:root{
  --bg:#12050f;--bg2:#1c0a19;--pink:#ff2d95;--hot:#ff5fb3;--orange:#ff8a1f;--gold:#ffc83d;
  --text:#fff4fa;--muted:#e4bfd6;
  --grad:linear-gradient(120deg,var(--pink),var(--orange) 55%,var(--gold));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:radial-gradient(1200px 700px at 80% -10%,#4a0f3a55,transparent),radial-gradient(900px 600px at 0% 40%,#5a220a33,transparent),var(--bg);
  color:var(--text);font-family:'Poppins',system-ui,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;line-height:1.6;min-height:100vh;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
#glitter{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.page,.top{position:relative;z-index:2}
.script{font-family:'Pacifico',cursive;font-weight:400}
.glitter-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.top{display:flex;align-items:center;justify-content:space-between;padding:.8rem clamp(1rem,4vw,3rem);
  background:#12050fcc;backdrop-filter:blur(10px);border-bottom:1px solid #ff2d9533;position:sticky;top:0;z-index:5}
.brand{font-family:'Playfair Display',serif;font-weight:700;font-size:1.25rem}
.brand span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.top .back{font-size:.85rem;color:var(--muted)}

.page{max-width:680px;margin:0 auto;padding:1.5rem 1rem 4rem}
h1{font-family:'Playfair Display',serif;font-size:clamp(1.9rem,7vw,2.8rem);line-height:1.1;text-align:center;margin-bottom:.5rem}
h1 .script{display:block;color:var(--hot);font-size:.7em;text-shadow:0 0 24px #ff2d9599;margin-bottom:.2rem}
.sub{text-align:center;color:var(--muted);margin-bottom:1.5rem}
.card{padding:clamp(1.2rem,5vw,2rem);border-radius:1.3rem;border:3px solid transparent;
  background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--grad) border-box;box-shadow:0 0 60px #ff2d9544}

label{display:block;font-size:.85rem;font-weight:500;color:var(--muted);margin-bottom:1rem}
input,textarea,select{display:block;width:100%;margin-top:.35rem;padding:.85rem 1rem;border-radius:.7rem;
  border:1.5px solid #ff5fb355;background:#0c030a;color:var(--text);font:400 1rem 'Poppins',sans-serif;color-scheme:dark}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px #ff8a1f44}
.code-input{text-align:center;text-transform:uppercase;letter-spacing:.15em;font-size:1.3rem;font-weight:600}
.hint{font-size:.78rem;color:var(--muted);text-align:right;margin-top:.2rem}

.btn{display:inline-block;padding:.85rem 1.8rem;border-radius:999px;border:0;cursor:pointer;font:600 1rem 'Poppins',sans-serif;
  color:#fff;background:var(--grad);box-shadow:0 0 22px #ff2d9566,0 4px 14px #0006;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.btn-block{display:block;width:100%}
.btn-ghost{background:transparent;border:2px solid var(--hot);box-shadow:none}
.btn-sm{padding:.45rem 1rem;font-size:.85rem}
.msg{text-align:center;min-height:1.4em;margin-top:.8rem;font-weight:500}
.msg.err{color:#ff8a8a}.msg.ok{color:var(--gold)}
.hidden{display:none!important}

/* pills */
.pills{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:1.2rem 0}
.pill{padding:.5rem 1.3rem;border-radius:999px;border:1.5px solid var(--hot);background:transparent;color:var(--text);
  font:500 .9rem 'Poppins',sans-serif;cursor:pointer;transition:.2s}
.pill.active,.pill:hover{background:var(--grad);border-color:transparent}

/* question list */
.q{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.1rem;margin-bottom:.8rem;border-radius:1rem;
  background:var(--bg2);border:1.5px solid #ff5fb33a}
.q.mine{border-color:var(--orange)}
.q.answered{opacity:.55}
.q .body{flex:1;min-width:0}
.q .text{white-space:pre-wrap;overflow-wrap:anywhere}
.q .tag{display:inline-block;font-size:.7rem;padding:.1rem .6rem;border-radius:999px;margin-bottom:.3rem;margin-right:.3rem;
  border:1px solid var(--orange);color:var(--gold)}
.starbtn{display:flex;flex-direction:column;align-items:center;min-width:3.2rem;background:none;border:0;cursor:pointer;color:var(--muted);font-weight:600}
.starbtn svg{width:2.2rem;height:2.2rem;transition:transform .2s}
.starbtn:active svg{transform:scale(1.3)}
.starbtn svg{fill:none;stroke:var(--hot);stroke-width:4;stroke-linejoin:round}
.starbtn.on svg{fill:url(#sg);stroke:url(#sg)}
.starbtn.on{color:var(--gold)}
.empty{text-align:center;color:var(--muted);padding:2rem 0}
.note{text-align:center;color:var(--muted);font-size:.9rem;margin-bottom:1rem}

footer{position:relative;z-index:2;text-align:center;padding:2rem 1rem;color:var(--muted);font-size:.8rem}

/* Drag Bingo theme */
.bingo-letters{display:none}
body.bingo .bingo-letters,.bingo-letters.show{display:flex;justify-content:center;gap:.5rem;margin-bottom:1rem}
.bingo-letters span{width:2.4rem;height:2.4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:700 1.2rem 'Playfair Display',serif;color:#2a0620;background:var(--grad);box-shadow:0 0 14px #ff2d9588}

/* ---- Question gallery (board) ---- */
.page.wide{max-width:1150px}
#list{columns:3 260px;column-gap:16px}
#list .q{display:block;break-inside:avoid;margin:0 0 16px;padding:1.1rem 1.2rem 1rem;border-radius:1.2rem;
  border:3px solid transparent;background:linear-gradient(#1c0a19,#1c0a19) padding-box,var(--o,var(--grad)) border-box;
  box-shadow:0 0 22px var(--glow,#ff2d9533);transition:transform .25s,box-shadow .25s}
#list .q:hover{transform:translateY(-3px) rotate(-.6deg);box-shadow:0 0 34px var(--glow,#ff2d9566)}
#list .q.mine{box-shadow:0 0 0 2px #fff3,0 0 30px var(--glow,#ff2d9566)}
#list .q.answered{opacity:.6}
#list .q .text{font-size:1rem;line-height:1.45}
#list .q.t-lg .text{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.3rem,3.2vw,1.8rem);line-height:1.25}
#list .q.t-xl{padding:1.5rem 1.4rem 1.2rem}
#list .q.t-xl .text{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.2}
#list .q.t-sm .text{font-size:.9rem}
#list .starbtn{flex-direction:row;gap:.4rem;margin:.8rem 0 0 auto;min-width:0;font-size:1.05rem}
#list .starbtn svg{width:1.9rem;height:1.9rem}
.c0{--o:linear-gradient(135deg,#ff2d95,#ff8a1f);--glow:#ff2d9544}
.c1{--o:linear-gradient(135deg,#ff8a1f,#ffc83d);--glow:#ff8a1f44}
.c2{--o:linear-gradient(135deg,#ff5fb3,#a855f7);--glow:#c04fd144}
.c3{--o:linear-gradient(135deg,#ffc83d,#ff2d95);--glow:#ffc83d44}
.c4{--o:linear-gradient(135deg,#ff6b6b,#e11d9c);--glow:#ff6b6b44}
.c5{--o:linear-gradient(135deg,#22d3ee,#ff5fb3);--glow:#22d3ee33}
@media(max-width:600px){#list{columns:2 140px;column-gap:10px}#list .q{margin-bottom:10px;padding:.9rem .85rem .8rem}}