.gal-top { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin: 1.4rem 0; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.gcard { border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; display: grid; align-content: start; }
.gthumb { display: grid; place-items: center; background: var(--bg2); padding: .8rem; height: 210px; }
.gthumb canvas { height: 100%; width: auto; max-width: 100%; image-rendering: pixelated; }
.gmeta { padding: .7rem .8rem; display: grid; gap: .35rem; min-width: 0; }
.gmeta b { font-size: 1rem; overflow-wrap: anywhere; }
.gby { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted); } .gby span { overflow-wrap: anywhere; }
.av { width: 20px; height: 20px; flex: none; border-radius: 6px; background: var(--grape); }
.gact { display: flex; gap: .4rem; align-items: center; margin-top: .2rem; }
.gact button, .gact a { font: 800 .8rem var(--f-body); padding: .4em .75em; border: 2px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); min-height: 40px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.gact .like[aria-pressed=true] { background: var(--coral); color: #1b1740; }
.gact .remix { background: var(--sun); color: #1b1740; margin-left: auto; }
.greport { font: 600 .74rem var(--f-body); color: var(--muted); background: none; border: 0; padding: .2em 0; cursor: pointer; text-align: left; text-decoration: underline; justify-self: start; min-height: 32px; }
.feat { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem; border: 2px solid var(--line); border-radius: var(--radius); background: #1b0f3a; color: #fff; box-shadow: var(--shadow); }
.feat canvas { height: 150px; width: auto; image-rendering: pixelated; background: #2c1a58; border-radius: 12px; padding: 6px; }
.feat h2 { margin: 0; font: 700 1.4rem var(--f-display); color: #ffb347; } .feat p { margin: .2em 0 0; color: #e8defa; } .feat .small { color: #d8c8ff; font-size: .85rem; }
@media (max-width: 640px) { .feat { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.joinbar { margin: 1.4rem 0; padding: 1rem; border: 2px dashed var(--line); border-radius: var(--radius); display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; background: var(--bg2); }
.gempty { grid-column: 1 / -1; padding: 2rem 1rem; text-align: center; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--bg2); }
.center { text-align: center; }
/* contest, weekly challenge, badges, hall of fame */
.contest { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; margin: 1.2rem 0; padding: 1.3rem; border-radius: calc(var(--radius) + 4px); color: #fff; border: 2px solid #5b3fd1;
  background: radial-gradient(900px 300px at 0% 0%, #4b2fb8 0%, transparent 60%), radial-gradient(600px 300px at 100% 100%, #0f6b8f55 0%, transparent 60%), #150c33; box-shadow: 0 0 0 1px #8f7bff33, 0 18px 50px -20px #6c4dff99; }
.contest[hidden] { display: none; }
.contest h2 { margin: .1em 0 .4em; font: 700 clamp(1.4rem, 3.4vw, 2rem) var(--f-display); color: #ffd36b; }
.contest p { color: #e6defa; max-width: 60ch; } .contest .small { color: #b9a9ff; font-weight: 800; letter-spacing: .02em; margin: 0; }
.contest .muted, .contest .small-text { color: #bdb2e3; } .contest a:not(.btn) { color: #9fe6ff; }
.ct-week { background: #ffffff10; border: 1px solid #ffffff26; border-radius: var(--radius); padding: 1rem; display: grid; gap: .5rem; justify-items: center; text-align: center; backdrop-filter: blur(6px); }
.ct-week h3 { margin: 0; font: 700 1.15rem var(--f-display); } .ct-thumb canvas { height: 140px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 0 14px #ffb34788); }
.ct-top { grid-column: 1 / -1; } .ct-top h3 { margin: .2rem 0 .6rem; color: #fff; }
.ct-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: .8rem; overflow-x: auto; padding-bottom: .4rem; }
.ct-row .gcard { color: var(--ink); }
.gbadges { display: flex; flex-wrap: wrap; gap: .3rem; }
.gbadge { font: 800 .68rem var(--f-body); padding: .2em .6em; border-radius: 99px; background: var(--bg2); border: 1px solid var(--line); color: var(--ink); } .gbadge.gold { background: #ffd36b; color: #2a1a00; border-color: #ffb347; }
.gcard.winner { border-color: #ffb347; box-shadow: 0 0 0 2px #ffb34744, var(--shadow-sm); }
#hall { margin: 2rem 0 0; } #hall[hidden] { display: none; }
@media (max-width: 760px) { .contest { grid-template-columns: 1fr; } }
.contest { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.contest > * { min-width: 0; }
.contest .btn.ghost { color: #fff; border-color: #ffffff66; background: #ffffff12; }
.contest .gact a, .contest .gact button { color: #1b1740; } .contest .gact .like { color: var(--ink); background: var(--surface); } .contest .gact .like[aria-pressed=true] { background: var(--coral); color: #1b1740; }
.contest .gact .remix { color: #1b1740; }
@media (max-width: 760px) { .contest { grid-template-columns: minmax(0, 1fr); } .ct-row { grid-auto-columns: minmax(170px, 70%); } }