:root{
  --bg:#05060a;
  --bg2:#090b12;
  --panel:rgba(12,15,24,.88);
  --panel-strong:#0d1019;
  --panel-soft:rgba(8,11,18,.78);
  --text:#f8fbff;
  --muted:#929bad;
  --muted-2:#667085;
  --line:rgba(154,169,196,.14);
  --line-strong:rgba(154,169,196,.24);
  --cyan:#23f3ff;
  --cyan-soft:rgba(35,243,255,.12);
  --pink:#ff2bd6;
  --pink-soft:rgba(255,43,214,.12);
  --danger:#ff4f8b;
  --shadow:0 30px 90px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  background:
    radial-gradient(720px 540px at 7% 7%,rgba(35,243,255,.095),transparent 64%),
    radial-gradient(780px 580px at 95% 90%,rgba(255,43,214,.09),transparent 66%),
    linear-gradient(155deg,#070910 0%,var(--bg) 52%,#07070c 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.2;
  background-image:
    linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.017) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),transparent 92%);
}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
a{color:inherit}
.hidden{display:none!important}

/* Shared public chrome */
.app,.public-page,.review-shell{width:min(1180px,calc(100% - 40px));margin:0 auto;min-height:100vh}
.topbar,.public-topbar,.review-top{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 0;
  position:relative;
  z-index:5;
}
.brand-wordmark{
  font-weight:900;
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  letter-spacing:-.035em;
  text-decoration:none;
  white-space:nowrap;
  transition:text-shadow .18s ease,color .18s ease;
}
.brand-wordmark:hover{color:#fff;text-shadow:0 0 20px rgba(35,243,255,.32)}
.header-actions,.public-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.navlink,.ghost{
  --button-glow:rgba(35,243,255,.28);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:1px solid rgba(154,169,196,.11);
  background:rgba(9,12,19,.34);
  color:#edf3ff;
  border-radius:999px;
  padding:10px 15px;
  font-size:.9rem;
  font-weight:720;
  transition:border-color .18s,box-shadow .18s,transform .18s,background .18s,color .18s;
}
.navlink:hover,.ghost:hover{
  border-color:rgba(35,243,255,.68);
  box-shadow:0 0 12px rgba(35,243,255,.22),0 0 34px var(--button-glow);
  background:rgba(15,20,29,.74);
  transform:translateY(-2px);
}
.ghost.secondary{--button-glow:rgba(255,43,214,.25)}
.ghost.secondary:hover{border-color:rgba(255,43,214,.64)}
.game-controls{display:flex;gap:8px}

/* Every public button glows on hover. Individual roles can override --button-glow. */
button{--button-glow:rgba(35,243,255,.26);transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease,background .17s ease,filter .17s ease}
button:not(:disabled):hover{box-shadow:0 0 12px rgba(35,243,255,.18),0 0 34px var(--button-glow);transform:translateY(-2px)}
button:disabled{opacity:.34;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* Homepage + game */
main{position:relative;z-index:1}
.start{min-height:calc(100vh - 126px);display:grid;place-items:center;text-align:center;padding:26px 20px 132px}
.hero{max-width:900px;margin:auto;transform:translateY(-34px)}
.start h1{margin:0;font-size:clamp(3rem,7vw,5.9rem);line-height:.96;letter-spacing:-.064em;font-weight:920;text-wrap:balance}
.start h1 .line-two{display:block;color:var(--text);text-shadow:0 0 34px rgba(35,243,255,.07)}
.start h1 .accent{background:linear-gradient(105deg,var(--cyan) 8%,#aefaff 44%,#ffd4f7 62%,var(--pink) 94%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 20px rgba(35,243,255,.1))}
.primary{
  --button-glow:rgba(255,43,214,.26);
  position:relative;
  border:0;
  border-radius:999px;
  padding:18px 38px;
  margin-top:38px;
  min-width:220px;
  background:linear-gradient(105deg,var(--cyan),#6ef5ff 48%,#fd6ee5);
  color:#05060a;
  font-size:1rem;
  font-weight:900;
  letter-spacing:-.01em;
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 10px 32px rgba(35,243,255,.12),0 0 38px rgba(255,43,214,.08);
}
.primary:not(:disabled):hover{filter:brightness(1.06);transform:translateY(-3px) scale(1.02);box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 0 18px rgba(35,243,255,.32),0 0 52px rgba(255,43,214,.32)}
.game-shell{max-width:1040px;margin:28px auto 70px}
.card,.public-card,.review-card{
  background:linear-gradient(180deg,rgba(15,19,30,.88),rgba(8,11,18,.93));
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}
.question-card{position:relative;overflow:hidden;padding:clamp(26px,5vw,54px);min-height:570px;display:flex;flex-direction:column}
.question-card::before,.public-card::before,.review-card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,rgba(35,243,255,.065),transparent 32%,transparent 70%,rgba(255,43,214,.055));opacity:.75}
.question-card>*{position:relative;z-index:1}
.meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:750}
.category{color:var(--cyan);text-shadow:0 0 18px rgba(35,243,255,.16)}
.question-card>h2{max-width:820px;margin:86px auto 62px;text-align:center;font-size:clamp(2rem,5vw,4rem);line-height:1.08;letter-spacing:-.048em;text-wrap:balance}
.answers{margin-top:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.answer{
  border:1px solid var(--line);
  background:rgba(9,12,19,.78);
  color:var(--text);
  border-radius:16px;
  padding:15px 9px;
  font-weight:850;
}
.answer:not(:disabled):hover{border-color:rgba(35,243,255,.72);background:rgba(35,243,255,.06);box-shadow:0 0 13px rgba(35,243,255,.24),0 0 36px rgba(35,243,255,.23)}
.answer:nth-child(4),.answer:nth-child(5){--button-glow:rgba(255,43,214,.26)}
.answer:nth-child(4):not(:disabled):hover,.answer:nth-child(5):not(:disabled):hover{border-color:rgba(255,43,214,.68);background:rgba(255,43,214,.055);box-shadow:0 0 13px rgba(255,43,214,.23),0 0 36px rgba(255,43,214,.22)}
.answer small{display:block;margin-top:3px;color:#687184;font-weight:600;font-size:.72rem}
.disabled{pointer-events:none;opacity:.34}
.panel{margin-top:26px;padding:clamp(22px,4vw,34px);border:1px solid var(--line);border-radius:22px;background:rgba(5,8,14,.78);text-align:left}
.guess-label,.eyebrow{color:var(--cyan);font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em;text-shadow:0 0 16px rgba(35,243,255,.16)}
.panel h3{font-size:clamp(1.8rem,4.5vw,3rem);line-height:1.04;letter-spacing:-.045em;margin:10px 0 4px}
.artist{color:#f1cfff;font-weight:780;font-size:1.06rem}
.detail{display:flex;gap:8px 16px;flex-wrap:wrap;color:var(--muted);font-size:.82rem;margin-top:10px}
.summary{color:var(--muted);line-height:1.65}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.correct,.wrong,.continue,.success-btn,.secondary-btn,.danger-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:12px 17px;
  font-weight:850;
}
.correct,.success-btn{border:1px solid rgba(35,243,255,.34);background:rgba(35,243,255,.92);color:#041012;--button-glow:rgba(35,243,255,.34)}
.correct:not(:disabled):hover,.success-btn:not(:disabled):hover{border-color:var(--cyan);box-shadow:0 0 15px rgba(35,243,255,.36),0 0 42px rgba(35,243,255,.30);filter:brightness(1.06)}
.wrong,.danger-btn{border:1px solid rgba(255,43,214,.42);background:var(--pink-soft);color:#ffdafa;--button-glow:rgba(255,43,214,.32)}
.wrong:not(:disabled):hover,.danger-btn:not(:disabled):hover{border-color:rgba(255,43,214,.8);background:rgba(255,43,214,.09);box-shadow:0 0 15px rgba(255,43,214,.30),0 0 42px rgba(255,43,214,.27)}
.continue,.secondary-btn{border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--text);--button-glow:rgba(35,243,255,.23)}
.continue:not(:disabled):hover,.secondary-btn:not(:disabled):hover{border-color:rgba(35,243,255,.6);background:rgba(35,243,255,.045);box-shadow:0 0 13px rgba(35,243,255,.22),0 0 36px rgba(35,243,255,.20)}
.rank-list{display:grid;gap:8px;margin:16px 0 20px}
.rank{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px;width:100%;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(8,11,18,.85);color:var(--text);text-align:left}
.rank:not(:disabled):hover{border-color:rgba(35,243,255,.7);box-shadow:0 0 12px rgba(35,243,255,.20),0 0 34px rgba(35,243,255,.19)}
.rank small{display:block;color:var(--muted);margin-top:3px}.rank-num{color:var(--cyan);font-weight:900}.rank-prob{color:var(--muted);font-size:.78rem}
.result{max-width:900px;margin:80px auto;padding:clamp(42px,7vw,76px);text-align:center}
.result h2{font-size:clamp(2.3rem,6vw,4.7rem);letter-spacing:-.06em;margin:0 0 24px}
.result .album{font-size:clamp(1.7rem,4vw,3rem);font-weight:920;letter-spacing:-.035em}
.result .artist{margin-top:6px}.result .summary{max-width:680px;margin:20px auto}.result .result-stats{color:var(--cyan);font-weight:800;font-size:.88rem}

/* Add-an-album + Help shared page layout */
.public-page,.review-shell{max-width:1060px}
.public-main{padding:30px 0 78px}
.public-hero{max-width:820px;margin:26px auto 28px;text-align:center}
.public-hero h1,.review-heading{font-size:clamp(2.5rem,6vw,4.8rem);line-height:.98;letter-spacing:-.058em;margin:10px 0 14px;text-wrap:balance}
.public-hero p,.review-lede{max-width:720px;margin:0 auto;color:var(--muted);line-height:1.65}
.public-card,.review-card{position:relative;overflow:hidden;padding:clamp(24px,5vw,46px)}
.public-card>*,.review-card>*{position:relative;z-index:1}
.status-badge,.blind-badge{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(35,243,255,.28);
  border-radius:999px;
  padding:6px 10px;
  color:var(--cyan);
  background:rgba(35,243,255,.045);
  font-size:.72rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.public-form{display:grid;gap:16px;margin-top:28px}
.public-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.public-form label,.report-box label{display:grid;gap:7px;color:#c3cada;font-size:.88rem;font-weight:650}
.public-form input,.public-form textarea,.public-form select,.report-box input,.report-box textarea,.report-box select{
  width:100%;
  border:1px solid var(--line);
  outline:none;
  background:rgba(6,9,15,.82);
  color:var(--text);
  border-radius:13px;
  padding:12px 13px;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.public-form input:focus,.public-form textarea:focus,.public-form select:focus,.report-box input:focus,.report-box textarea:focus,.report-box select:focus{
  border-color:rgba(35,243,255,.66);
  background:rgba(7,12,18,.94);
  box-shadow:0 0 0 3px rgba(35,243,255,.07),0 0 24px rgba(35,243,255,.09);
}
.public-form textarea{min-height:98px;resize:vertical}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.notice{border:1px solid rgba(35,243,255,.24);border-radius:18px;padding:18px;background:rgba(35,243,255,.045);color:#dce5f5}
.notice.warn{border-color:rgba(255,43,214,.3);background:rgba(255,43,214,.045)}
.candidate-list{display:grid;gap:10px;margin-top:14px}
.candidate{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:16px;background:rgba(7,10,16,.72)}
.candidate small{display:block;color:var(--muted);margin-top:4px}.candidate .score{color:var(--cyan);font-weight:850}.candidate>div:last-child{display:grid;justify-items:end;gap:8px}
.candidate-cover{width:72px;height:72px;object-fit:contain;background:#080b11;border:1px solid var(--line);border-radius:11px}.candidate-cover-missing{display:grid;place-items:center;text-align:center;padding:5px;color:var(--muted-2);font-size:.68rem}
.candidate code,.notice code{word-break:break-all}.tiny{font-size:.78rem;color:var(--muted-2)}

/* Help review */
.review-shell{padding-bottom:72px}
.review-intro{padding:34px 0 16px;text-align:center}
.review-start-copy{max-width:690px;color:var(--muted);line-height:1.65;margin:12px 0 20px}
.cover-wrap{display:grid;place-items:center;margin:16px 0 24px}
.review-cover{width:min(390px,82vw);aspect-ratio:1;object-fit:contain;background:#080b11;border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.36)}
.review-identity{text-align:center;margin:18px 0 6px;font-size:clamp(1rem,2.5vw,1.25rem);font-weight:850;display:grid;gap:4px}.review-identity span{color:#c5ccda;font-weight:650}
.review-question{text-align:center;font-size:clamp(1.55rem,4vw,2.65rem);line-height:1.16;margin:28px auto;max-width:760px;letter-spacing:-.035em;text-wrap:balance}
.review-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:.82rem;flex-wrap:wrap}
.review-answers{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.review-answer{border:1px solid var(--line);background:rgba(9,12,19,.8);color:var(--text);border-radius:15px;padding:14px 8px;font-weight:820}
.review-answer:not(:disabled):hover{border-color:rgba(35,243,255,.7);background:rgba(35,243,255,.055);box-shadow:0 0 13px rgba(35,243,255,.23),0 0 36px rgba(35,243,255,.22)}
.review-answer:nth-child(4),.review-answer:nth-child(5){--button-glow:rgba(255,43,214,.25)}
.review-answer:nth-child(4):not(:disabled):hover,.review-answer:nth-child(5):not(:disabled):hover{border-color:rgba(255,43,214,.68);background:rgba(255,43,214,.05);box-shadow:0 0 13px rgba(255,43,214,.22),0 0 36px rgba(255,43,214,.20)}
.review-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.all-list{display:grid;gap:9px;margin-top:16px}.all-row{border:1px solid var(--line);border-radius:14px;padding:13px;background:rgba(7,10,16,.74)}.all-row strong{display:block;margin-bottom:9px}.mini-answers{display:flex;gap:6px;flex-wrap:wrap}.mini-answers button{border:1px solid var(--line);background:rgba(12,16,24,.86);color:var(--text);border-radius:10px;padding:8px 10px;font-size:.78rem}.mini-answers button.selected{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 18px rgba(35,243,255,.11)}.mini-answers button:not(:disabled):hover{border-color:rgba(35,243,255,.68);box-shadow:0 0 12px rgba(35,243,255,.22),0 0 30px rgba(35,243,255,.19)}
.report-box{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}.status{min-height:1.2em;color:var(--muted)}

@media(max-width:820px){
  .app,.public-page,.review-shell{width:min(100% - 26px,1180px)}
  .topbar,.public-topbar,.review-top{align-items:flex-start;padding-top:14px}.header-actions,.public-actions{gap:7px}.navlink,.ghost{padding:9px 12px;font-size:.82rem}
  .start{min-height:calc(100vh - 110px);padding:24px 8px 100px}.hero{transform:translateY(-18px)}.start h1{font-size:clamp(2.75rem,11.8vw,4.9rem)}
  .question-card{min-height:unset;padding:24px 18px}.question-card>h2{margin:60px auto 46px}
  .answers{grid-template-columns:1fr 1fr}.answer:nth-child(3){grid-column:1/-1;order:5}.answer{padding:13px 10px}.answer small{display:none}
  .public-form .row{grid-template-columns:1fr}.candidate{grid-template-columns:64px minmax(0,1fr)}.candidate-cover{width:64px;height:64px}.candidate>div:last-child{grid-column:1/-1;justify-items:start}
  .review-answers{grid-template-columns:1fr}.review-answer{text-align:left}.review-top{align-items:flex-start}
}
@media(max-width:560px){
  .topbar,.public-topbar,.review-top{display:grid;grid-template-columns:1fr;gap:12px}.header-actions,.public-actions{justify-content:flex-start}.game-controls{width:100%}.game-controls .ghost{flex:1}
  .navlink{font-size:.78rem}.start{padding-top:52px}.hero{transform:none}.start h1{font-size:clamp(2.65rem,13.5vw,4rem)}
  .answers{grid-template-columns:1fr}.answer:nth-child(3){grid-column:auto;order:initial}.meta{font-size:.7rem}.actions>*{width:100%;justify-content:center;text-align:center}
  .public-hero{text-align:left;margin-top:18px}.public-hero p{margin:0}.review-intro{text-align:left}
}

/* 0.9.10 minimal album submission */
.compact-hero{max-width:700px;margin-top:54px}
.narrow-card{max-width:620px;margin:0 auto}
.minimal-submit-form{max-width:520px;margin:28px auto 0}
.minimal-submit-form .primary{margin-top:4px;width:100%}
.success-notice{text-align:center}