.game-bar {
  font-size:12px
}
.game-bar button {
  padding:8px 0
}
.game-bar strong {
  font-size:12px
}
#game>progress {
  height:6px
}
.stage {
  height:145px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center
}
.stage .mascot-host {
  height:140px;
  width:160px
}
.audience {
  position:absolute;
  bottom:12px;
  width:100%;
  text-align:center;
  color:#c09539;
  opacity:var(--energy,.1);
  font-size:32px;
  letter-spacing:8px
}
#combo {
  position:absolute;
  right:0;
  top:20px;
  background:var(--yellow);
  padding:5px 10px;
  border-radius:20px;
  font-size:11px;
  min-height:0
}
#combo:empty {
  display:none
}
.question-card {
  position:relative;
  background:#fffdf8;
  border:1.5px solid var(--line);
  border-radius:24px;
  text-align:center;
  padding:12px;
  box-shadow:var(--shadow)
}
.question-card .eyebrow {
  display:none;
  font-size:11px;
  margin:0 0 5px
}
.equation {
  font-size:42px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:3px
}
.reading {
  font-size:15px;
  min-height:24px;
  margin:5px 0;
  color:var(--muted)
}
.answer {
  font-size:40px;
  line-height:1.1;
  font-weight:900;
  color:#39816e;
  min-height:46px
}
#feedback {
  font-size:12px;
  min-height:20px;
  margin:5px 0 0;
  color:#478572
}
.numpad {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:18px
}
.numpad button {
  font-size:27px;
  font-weight:900;
  padding:6px;
  min-height:54px;
  box-shadow:0 3px 0 #e0dfd5;
  border-radius:14px
}
.numpad .key-small {
  font-size:13px;
  background:#ecefe6
}
.numpad .key-enter {
  background:var(--mint)
}
.reveal {
  width:100%;
  border:0;
  background:none;
  color:var(--muted);
  font-size:13px;
  margin-top:6px
}

#game.revealed .question-card {
  border-color:#e5b154;
  background:#fff6d7
}
#game.correct .question-card {
  border-color:#69af93
}

/* The concert stage is independent from the fixed question and input layout. */
.parade-meter {display:flex;align-items:center;gap:8px;margin-top:7px;font-size:10px;color:#655382}
#parade-label {min-width:110px}
#parade-count {font-variant-numeric:tabular-nums;white-space:nowrap}
#parade-lights {display:flex;gap:3px;flex:1}
#parade-lights i {height:10px;flex:1;border-radius:4px;background:#d8cfe4;border:1px solid #fff9}
#parade-lights i.lit {background:#ed4e98;box-shadow:0 0 8px #ffb92a}
.stage {height:150px;isolation:isolate;perspective:700px}
.stage-floor {position:absolute;left:4%;right:4%;bottom:1px;height:30px;border-radius:50%;background:repeating-linear-gradient(90deg,#be89e6 0 24px,#e4bbf5 24px 48px);border:3px solid #fff;box-shadow:0 6px 0 #6c4b91;transform:rotateX(35deg)}
.stage-backdrop {position:absolute;inset:6% 6% 10%;z-index:-2;border:3px solid #fff8;border-radius:30px;background:linear-gradient(145deg,#f8eaffbb,#c6edffbb);box-shadow:0 5px 0 #9583c233;transform:scale(calc(1 + var(--impact,0)*.025))}
.stage-lights {position:absolute;inset:7% 8% 13%;z-index:-1;pointer-events:none;display:flex;justify-content:space-around;align-items:flex-end;gap:8px;overflow:hidden;border-radius:22px;opacity:.5}
.stage-lights i {width:12%;height:55%;border-radius:14px 14px 4px 4px;background:linear-gradient(#fff3ad,#ffbce0);transform-origin:bottom;transform:scaleY(calc(.55 + var(--beat,0)*.30 + var(--impact,0)*.15))}
.stage-lights i:nth-child(2n) {height:85%;background:linear-gradient(#bcfff0,#a8bcff);transform:scaleY(calc(.75 + var(--beat,0)*.20))}
.stage-lights i:nth-child(3) {height:100%;background:linear-gradient(#fff2b3,#f7aee4)}
body[data-tier="2"] .stage-backdrop {background:linear-gradient(145deg,#c9caffcc,#f7c4eccc)}
body[data-tier="3"] .stage-backdrop {background:linear-gradient(145deg,#ffe993dd,#ffd4e8dd);border-color:#fff6c2}
body[data-tier="3"] .stage-lights {opacity:.8}
.stage .mascot-host {z-index:2;height:155px;width:172px;filter:drop-shadow(0 5px 0 #fff8);align-self:flex-end;margin-bottom:4px}
.audience {inset:0;width:auto;opacity:1;letter-spacing:0;pointer-events:none}
.parade-guest {position:absolute;bottom:8px;width:76px;height:74px;transition:opacity .3s;opacity:0;filter:hue-rotate(var(--guest-color))}
.parade-guest svg {width:100%;height:100%;overflow:visible}
.parade-guest:nth-child(1){left:0}
.parade-guest:nth-child(2){right:0}
.parade-guest:nth-child(3){left:5%;bottom:53px;width:55px;height:55px}
.parade-guest:nth-child(4){right:5%;bottom:53px;width:55px;height:55px}
.parade-guest:nth-child(5){left:20%;bottom:5px;width:55px;height:55px}
.parade-guest:nth-child(6){right:20%;bottom:5px;width:55px;height:55px}
#stage-cheer {position:absolute;z-index:3;top:0;left:50%;white-space:nowrap;font-size:24px;font-weight:900;color:white;background:#d33783;border:3px solid white;border-radius:18px;padding:3px 16px;box-shadow:0 4px 0 #753960;text-shadow:0 2px #753960;pointer-events:none;opacity:0;transform:translate(-50%,-5px) rotate(-5deg)}
#stage-cheer.visible {opacity:1}
#combo {z-index:3;top:auto;bottom:0;left:0;right:auto;border:2px solid white;background:#ffe887;box-shadow:0 3px 0 #aa761c44}
.question-card {border:3px solid #a18aba;padding:10.5px;box-shadow:0 6px 0 #7a569c33;margin-top:8px;overflow:visible}
#answer-seal {position:absolute;top:-52px;right:5px;z-index:2;rotate:10deg;background:#ec438a;color:white;border:3px solid white;border-radius:30px;padding:3px 12px;font-size:21px;text-shadow:0 2px #a82860;box-shadow:0 3px 0 #a82860;opacity:0;pointer-events:none}
#game.correct #answer-seal {opacity:1}
#game.correct .question-card {border-color:#edac24;background:#fff6c7;box-shadow:0 6px 0 #d69b35,0 0 0 5px #ffdf7888}
#game.correct .answer {color:#bf2774;text-shadow:2px 2px #fff}
#game.revealed .question-card {border-color:#67bcb2;background:#f0fffb}
.numpad button {border:2px solid #af9abf;box-shadow:0 5px 0 #9981ae;background:#fffcff}
.numpad button:disabled {opacity:.8}
.numpad .key-enter {background:#ffcf62;border-color:#e9a13f;box-shadow:0 5px 0 #c58f3d}
body[data-tier="2"] .stage-floor {background:repeating-linear-gradient(90deg,#ffaecf 0 24px,#ffda7b 24px 48px)}
body[data-tier="3"] .stage-floor {background:repeating-linear-gradient(90deg,#ffcd37 0 24px,#fff8a1 24px 48px);box-shadow:0 6px 0 #c58d39,0 0 24px #ffd344}
.recitation-guide {display:flex;align-items:center;justify-content:center;gap:10px;margin-top:24px;font-size:13px;color:var(--muted)}
.recitation-guide [data-step] {padding:10px 12px;border-radius:18px;background:#fff9}
#game[data-recitation=listen] [data-step=listen],#game[data-recitation=cue] [data-step=cue],#game[data-recitation=repeat] [data-step=repeat] {background:var(--yellow);color:var(--ink)}
#game[data-recitation=cue] #feedback {color:#a55b1c;font-weight:900}
#game[data-recitation=repeat] .reading {color:#257b61;font-weight:900}
body[data-paused=true] * {animation-play-state:paused!important}
body[data-scene=game] #sound[aria-pressed=false] {background:#fff3bd;opacity:1!important;border:2px solid #dbaf50}

body[data-scene=game] .topbar {height:62px}

body[data-motion=off] *,body[data-motion=off] *::before,body[data-motion=off] *::after {animation:none!important;transition:none!important}

.parade-crown {display:none}
body[data-tier="3"] #mascot-game .parade-crown,body[data-scene=result] #mascot-result .parade-crown {display:block}