/* Science Arcade — layout. Landscape-first, edge-safe, readable from 10 m. */

#stage {
  position: fixed;
  inset: 0;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
}
.screen.active { display: block; }

/* --------------------------------------------------------------- sky bgs */

.sky-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #74c8ec 0%, var(--sky) 45%, #2a7fd4 100%);
}
.home-sky {
  background: #0a1d52 url('../assets/bg/home-night.png') center bottom / cover no-repeat;
}
.home-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.pilot-sky { background: linear-gradient(to top, #f5a05a 0%, #6fa8dc 40%, #2a5fb4 100%); }
.eq-sky { background: linear-gradient(to top, #0a2a6e 0%, var(--navy) 70%, #041236 100%); }

/* ------------------------------------------------------------------ home */

.home-grid {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  /* tall footer row keeps the UI floating in the sky, clear of the campus
     skyline painted along the bottom of the background art */
  grid-template-rows: auto auto minmax(0, 1fr) clamp(56px, 20vh, 260px);
  grid-template-areas: 'head' 'modes' 'top10' 'foot';
  gap: 2.6vmin;
  padding: var(--safe);
}

.home-head { grid-area: head; text-align: center; }
.game-title {
  font-family: var(--font-pixel);
  font-size: clamp(26px, 7.2vmin, 92px);
  color: var(--gold);
  text-shadow: 0.5vmin 0.5vmin 0 rgba(0, 0, 0, 0.55);
  letter-spacing: 0.04em;
}
.game-tagline {
  margin-top: 1.2vmin;
  font-weight: 700;
  font-size: clamp(13px, 2.4vmin, 30px);
  letter-spacing: 0.42em;
  color: var(--ink-dim);
}

.mode-buttons {
  grid-area: modes;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  gap: 3vmin;
  margin-top: 1vmin;
}

/* arcade-cabinet buttons: thick bezel, glossy face, physical press travel */
.mode-btn {
  position: relative;
  flex: 0 1 52vmin;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8vmin;
  padding: 2.2vmin 2.8vmin 2.8vmin;
  border-radius: 2.6vmin;
  border: 0.55vmin solid rgba(4, 8, 24, 0.75);
  text-align: left;
  transition: transform 0.07s ease, box-shadow 0.07s ease, filter 0.12s ease;
}
.mode-btn::after { /* glossy top highlight, like a plastic cap */
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  top: 5%;
  height: 26%;
  border-radius: 2vmin;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.mode-btn:active {
  transform: translateY(0.8vmin);
}
.mode-quiz {
  background: linear-gradient(180deg, #ffd35c 0%, var(--gold) 55%, #d97f06 100%);
  box-shadow:
    0 1.2vmin 0 #7a4a00,
    0 1.6vmin 2.6vmin rgba(0, 0, 0, 0.55),
    inset 0 -0.9vmin 0 rgba(122, 60, 0, 0.35);
  animation: rise-in 0.45s ease 0.05s backwards, cab-glow 2.2s ease-in-out 0.6s infinite;
}
.mode-quiz:active { box-shadow: 0 0.4vmin 0 #7a4a00, 0 0.6vmin 1.4vmin rgba(0, 0, 0, 0.5), inset 0 -0.5vmin 0 rgba(122, 60, 0, 0.35); }
.mode-eq {
  background: linear-gradient(180deg, #a98cf2 0%, var(--ans-violet) 55%, #5233ad 100%);
  box-shadow:
    0 1.2vmin 0 #2c1a66,
    0 1.6vmin 2.6vmin rgba(0, 0, 0, 0.55),
    inset 0 -0.9vmin 0 rgba(30, 14, 80, 0.4);
}
.mode-eq:active { box-shadow: 0 0.4vmin 0 #2c1a66, 0 0.6vmin 1.4vmin rgba(0, 0, 0, 0.5), inset 0 -0.5vmin 0 rgba(30, 14, 80, 0.4); }

.mode-kicker {
  font-family: var(--font-pixel);
  font-size: clamp(9px, 1.5vmin, 18px);
  letter-spacing: 0.1em;
  padding: 0.6vmin 1.2vmin;
  border-radius: 0.8vmin;
  background: rgba(4, 8, 24, 0.55);
  color: #ffe9b0;
  z-index: 1;
}
.mode-name {
  font-family: var(--font-pixel);
  font-size: clamp(14px, 2.9vmin, 38px);
  white-space: nowrap;
  color: #fff;
  text-shadow: 0.35vmin 0.35vmin 0 rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.mode-quiz .mode-name { color: #241503; text-shadow: 0.35vmin 0.35vmin 0 rgba(255, 236, 180, 0.55); }
.mode-desc {
  font-size: clamp(10px, 1.8vmin, 22px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  z-index: 1;
}
.mode-quiz .mode-desc { color: rgba(50, 28, 4, 0.9); }

.boards-row {
  grid-area: top10;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2.6vmin;
  min-height: 0;
  max-height: 100%;
}

.top10-panel {
  flex: 1 1 42vmin;
  max-width: min(92vw, 62vmin);
  max-height: 100%;
  overflow: hidden;
  padding-bottom: 1.6vmin;
}
.board-eq .panel-title { color: #b9a1ff; }

.top10-list {
  list-style: none;
  padding: 0 2.2vmin;
  font-size: clamp(12px, 2.15vmin, 26px);
  font-weight: 700;
}
.top10-list li {
  display: flex;
  justify-content: space-between;
  gap: 1.6vmin;
  padding: 0.55vmin 0;
  border-bottom: 1px solid rgba(120, 170, 255, 0.15);
  white-space: nowrap;
}
.top10-list li .t10-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.top10-list li .t10-score { color: var(--gold); font-family: var(--font-pixel); font-size: 0.85em; }
.top10-list li.t10-empty { color: var(--ink-dim); justify-content: center; }
.top10-list li.t10-first .t10-name { color: var(--gold); }

.home-foot { grid-area: foot; display: flex; justify-content: center; align-items: flex-end; }
.suad-logo { height: clamp(28px, 6.4vmin, 84px); }
.suad-logo-small { height: clamp(20px, 4.6vmin, 60px); }

#attract-overlay {
  position: absolute;
  inset: 0;
  background: rgba(1, 8, 34, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.attract-inner { text-align: center; padding: var(--safe); }
.attract-beat {
  font-family: var(--font-pixel);
  font-size: clamp(18px, 4.6vmin, 60px);
  color: var(--ink);
}
.attract-score {
  font-family: var(--font-pixel);
  font-size: clamp(34px, 11vmin, 150px);
  color: var(--gold);
  margin: 2.4vmin 0;
  text-shadow: 0.7vmin 0.7vmin 0 rgba(0, 0, 0, 0.6);
  animation: attract-pulse 1.6s ease-in-out infinite;
}
.attract-cycle {
  min-height: 4.6vmin;
  font-size: clamp(14px, 3vmin, 40px);
  font-weight: 700;
  color: var(--ink-dim);
}
.attract-cycle b { color: var(--ink); }
.attract-tap {
  margin-top: 3.4vmin;
  font-family: var(--font-pixel);
  font-size: clamp(13px, 2.6vmin, 34px);
  color: #7fe3ff;
  animation: blink 1.1s step-end infinite;
}

/* ----------------------------------------------------------- pilot select */

.screen-title {
  position: relative;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: clamp(20px, 5.4vmin, 68px);
  color: var(--gold);
  text-shadow: 0.45vmin 0.45vmin 0 rgba(0, 0, 0, 0.5);
  padding: var(--safe) var(--safe) 0;
}

.pilot-cards {
  position: relative;
  height: calc(100% - 22vmin);
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 3.6vmin;
  padding: 2.4vmin var(--safe);
}

.pilot-card {
  flex: 0 1 30vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1.8vmin;
  padding: 2.4vmin;
  border-radius: 2.4vmin;
  background: rgba(2, 10, 40, 0.55);
  border: 0.5vmin solid rgba(255, 255, 255, 0.22);
  transition: transform 0.1s ease;
}
.pilot-card:active { transform: scale(0.96); }
.pilot-card img {
  max-height: 34vmin;
  max-width: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.pilot-card .pilot-name {
  font-family: var(--font-pixel);
  font-size: clamp(13px, 2.7vmin, 34px);
  color: #fff;
  background: rgba(0, 35, 118, 0.85);
  border: 0.3vmin solid var(--gold);
  border-radius: 1vmin;
  padding: 1.1vmin 2.2vmin;
}
.pilot-default { border-color: var(--gold); box-shadow: 0 0 3vmin rgba(255, 173, 10, 0.4); }
.pilot-default .pilot-name { background: var(--gold); color: #23180a; }

.pilot-hint {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--safe);
  text-align: center;
  font-size: clamp(13px, 2.5vmin, 32px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* ------------------------------------------------------------------ quiz */

#parallax { position: absolute; inset: 0; pointer-events: none; }
.plx {
  position: absolute;
  left: 0;
  width: 100%;
  background-repeat: repeat-x;
  background-position: bottom left;
  image-rendering: pixelated;
  will-change: transform, opacity;
}
#plx-1 { bottom: 0; height: 28vmin; background-image: url('../assets/bg/layer-1.png'); background-size: auto 100%; }
#plx-2 { bottom: 8vmin; height: 22vmin; background-image: url('../assets/bg/layer-2.png'); background-size: auto 100%; }
#plx-3 { bottom: 40vmin; height: 16vmin; background-image: url('../assets/bg/layer-3.png'); background-size: auto 100%; }
#plx-4 { top: 0; height: 60vmin; background-image: url('../assets/bg/layer-4.png'); background-size: auto 100%; opacity: 0; }
#plx-5 { top: 0; height: 70vmin; background-image: url('../assets/bg/layer-5.png'); background-size: auto 100%; opacity: 0; }

.quiz-layout {
  position: relative;
  height: 100%;
  display: flex;
  gap: 2vmin;
  padding: var(--safe);
}

.quiz-left {
  flex: 0 0 26vmin;
  display: flex;
  flex-direction: column;
  gap: 2vmin;
  min-width: 0;
}

.hud-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1vmin;
  padding: 1.4vmin 2vmin;
}
.hud-alt .hud-label { flex-basis: 100%; }
.hud-label {
  font-family: var(--font-pixel);
  font-size: clamp(9px, 1.5vmin, 18px);
  color: #7fe3ff;
  letter-spacing: 0.08em;
}
.alt-value {
  font-family: var(--font-pixel);
  font-size: clamp(15px, 3vmin, 40px);
  color: #7fe3ff;
}
.alt-unit { font-family: var(--font-pixel); font-size: clamp(10px, 1.8vmin, 22px); color: var(--ink-dim); }

#rocket-rig {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rocket-bob 2.6s ease-in-out infinite;
}
#rocket-img {
  height: min(46vmin, 90%);
  image-rendering: pixelated;
  z-index: 2;
}
#flame-img {
  position: absolute;
  top: calc(50% + min(21vmin, 41%));
  left: 50%;
  transform: translateX(-50%);
  height: min(15vmin, 30%);
  image-rendering: pixelated;
  z-index: 1;
}

.quiz-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.8vmin;
  min-width: 0;
}

.quiz-hud {
  display: flex;
  align-items: center;
  gap: 2.2vmin;
}
.hearts { display: flex; gap: 1vmin; }
.hearts img { height: clamp(22px, 4.6vmin, 56px); image-rendering: pixelated; }
.q-chip {
  font-family: var(--font-pixel);
  font-size: clamp(10px, 1.9vmin, 24px);
  color: var(--ink);
  background: var(--panel-bg);
  border: 2px solid var(--panel-line);
  border-radius: 1vmin;
  padding: 1vmin 1.6vmin;
}
.streak-chip {
  font-family: var(--font-pixel);
  font-size: clamp(11px, 2.2vmin, 28px);
  color: #23180a;
  background: var(--gold);
  border-radius: 1vmin;
  padding: 1vmin 1.8vmin;
  animation: streak-pop 0.35s ease;
}
.porthole {
  margin-left: auto;
  width: clamp(44px, 9.4vmin, 120px);
  height: clamp(44px, 9.4vmin, 120px);
  border-radius: 50%;
  border: 0.65vmin solid #8f9bb8;
  background: radial-gradient(circle at 35% 30%, #0e2a66, #041028);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-shadow: 0 0.5vmin 1.6vmin rgba(0, 0, 0, 0.5);
}
.porthole img {
  width: 86%;
  object-fit: contain;
  image-rendering: pixelated;
  transform: translateY(6%);
}

.question-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.8vmin;
  padding: 2.6vmin;
  min-height: 0;
}

.q-text {
  font-weight: 800;
  font-size: clamp(18px, 4.3vmin, 56px);
  line-height: 1.18;
  min-height: 2.4em;
  display: flex;
  align-items: center;
}

.answers-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 1.8vmin;
  min-height: 0;
}

.answer {
  display: flex;
  align-items: center;
  gap: 1.8vmin;
  padding: 1.6vmin 2.2vmin;
  border-radius: 1.4vmin;
  border-bottom: 0.7vmin solid rgba(0, 0, 0, 0.35);
  font-weight: 800;
  font-size: clamp(15px, 3.1vmin, 40px);
  color: #fff;
  text-align: left;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.07s ease, filter 0.15s ease, opacity 0.2s ease;
}
.answer:active { transform: scale(0.97); }
.a-shape { font-size: 0.8em; opacity: 0.9; }
.a-text { flex: 1; }
.a-cyan { background: var(--ans-cyan); }
.a-amber { background: var(--ans-amber); }
.a-violet { background: var(--ans-violet); }
.a-coral { background: var(--ans-coral); }

.answer.dimmed { opacity: 0.25; filter: grayscale(0.6); }
.answer.picked { outline: 0.6vmin solid #fff; }
.answer.reveal-correct {
  outline: 0.7vmin solid var(--gold);
  box-shadow: 0 0 3vmin rgba(255, 173, 10, 0.8);
  opacity: 1;
  filter: none;
  animation: verdict-flash 0.5s ease;
}
.answer.reveal-wrong {
  outline: 0.7vmin solid var(--red);
  background: var(--red);
  animation: shake-x 0.4s ease;
}

.timer-row {
  display: flex;
  align-items: center;
  gap: 1.8vmin;
}
.timer-bar {
  flex: 1;
  height: 2.2vmin;
  border-radius: 1.1vmin;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.timer-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 1.1vmin;
  background: #7fe3ff;
}
.timer-bar i.urgent { background: var(--red); animation: pulse-fast 0.5s ease-in-out infinite; }
.timer-num {
  font-family: var(--font-pixel);
  font-size: clamp(14px, 3vmin, 38px);
  color: #7fe3ff;
  min-width: 2.2em;
  text-align: right;
}
.timer-num.urgent { color: var(--red); }

/* ---------------------------------------------------------------- mayday */

.mayday-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, #3a0a10 0%, #14040a 75%);
}
#screen-mayday.active { animation: shake-hard 0.3s linear infinite; }
.mayday-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.6vmin;
  padding: var(--safe);
}
.mayday-title {
  font-family: var(--font-pixel);
  font-size: clamp(40px, 13vmin, 170px);
  color: var(--red);
  text-shadow: 0 0 4vmin rgba(222, 56, 49, 0.7), 0.7vmin 0.7vmin 0 #2a0006;
  animation: blink-soft 0.45s step-end infinite;
}
.mayday-sub {
  font-family: var(--font-pixel);
  font-size: clamp(14px, 3.4vmin, 44px);
  color: #ff9d97;
}
.porthole-big {
  width: clamp(90px, 22vmin, 260px);
  height: clamp(90px, 22vmin, 260px);
  border-color: #b33;
  margin-left: 0; /* .porthole floats right in the quiz HUD; center it here */
}
.mayday-status {
  font-family: var(--font-pixel);
  font-size: clamp(12px, 2.6vmin, 34px);
  color: #ffd9d6;
}
.blink-hard { color: var(--red); animation: blink-soft 0.3s step-end infinite; }

/* -------------------------------------------------------------- ceremony */

.ceremony-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #4a2a6e 0%, #1c1450 45%, #060b30 100%);
}
.ceremony-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6vmin;
  padding: var(--safe);
}
.cer-title {
  font-family: var(--font-pixel);
  font-size: clamp(24px, 6.4vmin, 84px);
  color: var(--gold);
  text-shadow: 0.55vmin 0.55vmin 0 rgba(0, 0, 0, 0.55);
}
.cer-alt-row { display: flex; align-items: baseline; gap: 1.4vmin; }
#cer-alt {
  font-family: var(--font-pixel);
  font-size: clamp(38px, 10vmin, 140px);
  color: #bfe6ff;
  text-shadow: 0.55vmin 0.55vmin 0 rgba(0, 0, 0, 0.5);
}
.cer-alt-unit { font-family: var(--font-pixel); font-size: clamp(16px, 4vmin, 52px); color: var(--ink-dim); }
.cer-flair {
  min-height: 3.6vmin;
  font-family: var(--font-pixel);
  font-size: clamp(13px, 2.8vmin, 36px);
  color: #ff9ecf;
}
.cer-rank {
  font-family: var(--font-pixel);
  font-size: clamp(16px, 3.6vmin, 48px);
  color: #23180a;
  background: linear-gradient(180deg, #ffd35c, var(--gold));
  border: 0.45vmin solid #8a5b00;
  border-radius: 1.2vmin;
  padding: 1.6vmin 3.2vmin;
  box-shadow: 0 0.7vmin 2vmin rgba(255, 173, 10, 0.45);
}
.cer-columns {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 3.2vmin;
  margin-top: 1vmin;
}
.cer-top10 { flex: 0 1 52vmin; overflow: hidden; }
.cer-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4vmin;
}

.big-btn {
  font-family: var(--font-pixel);
  font-size: clamp(13px, 2.7vmin, 34px);
  color: #fff;
  background: #1d3f8e;
  border: 0.4vmin solid rgba(255, 255, 255, 0.35);
  border-bottom-width: 0.8vmin;
  border-radius: 1.4vmin;
  padding: 2vmin 3.4vmin;
  transition: transform 0.08s ease;
}
.big-btn:active { transform: scale(0.95); }
.big-btn.gold { background: linear-gradient(180deg, #ffc23d, #e8940a); color: #23180a; border-color: #8a5b00; }
.big-btn.subtle { background: rgba(255, 255, 255, 0.12); }

/* ----------------------------------------------------------- modals/keys */

.modal {
  position: absolute;
  inset: 0;
  background: rgba(1, 6, 26, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
.modal-card {
  max-width: min(92vw, 120vmin);
  padding: 3.4vmin 4.2vmin;
  text-align: center;
}
.modal-title {
  font-family: var(--font-pixel);
  font-size: clamp(20px, 4.6vmin, 60px);
  animation: slam-in 0.35s ease;
}
.modal-sub {
  font-family: var(--font-pixel);
  font-size: clamp(11px, 2.2vmin, 28px);
  color: var(--ink-dim);
  margin-top: 1.6vmin;
}

.initials-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4vmin;
  margin: 2.6vmin 0;
  max-width: min(92vw, 120vmin);
}
.ini-slot {
  font-family: var(--font-pixel);
  font-size: clamp(26px, 6.4vmin, 84px);
  color: #fff;
  min-width: 1.4em;
  padding: 0.6vmin 0.4vmin;
  border-bottom: 0.7vmin solid var(--ink-dim);
}
.ini-slot.active { color: var(--gold); border-color: var(--gold); animation: blink 0.9s step-end infinite; }
.wall-slots .ini-slot { font-size: clamp(18px, 4.2vmin, 56px); min-width: 1.1em; }

.key-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 1.1vmin;
  max-width: min(90vw, 130vmin);
}
.key-grid button {
  font-family: var(--font-pixel);
  font-size: clamp(12px, 2.4vmin, 30px);
  color: #fff;
  background: #24408c;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.9vmin;
  padding: 1.5vmin 0;
  transition: transform 0.06s ease;
}
.key-grid button:active { transform: scale(0.92); background: #3a5cc0; }
.key-grid button.key-ok { background: #1d8a4a; grid-column: span 2; }
.key-grid button.key-del { background: #8a2d1d; grid-column: span 2; }

/* ------------------------------------------------------------- equations */

.eq-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.8vmin;
  padding: var(--safe);
}
.eq-head {
  display: flex;
  flex-direction: column;
  gap: 0.9vmin;
  text-align: center;
}
.eq-level {
  font-family: var(--font-pixel);
  font-size: clamp(11px, 2.2vmin, 28px);
  color: var(--gold);
}
.eq-prompt {
  font-weight: 800;
  font-size: clamp(18px, 4.2vmin, 54px);
}
.eq-canvas-wrap {
  flex: 1;
  min-height: 0;
  background: #f6f4ec;
  border-color: rgba(0, 35, 118, 0.5);
  overflow: hidden;
  touch-action: none;
}
#eq-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}
.eq-controls {
  display: flex;
  justify-content: center;
  gap: 2.6vmin;
}

/* live judge ticker — the AI keeps checking as you draw (Quick-Draw style) */
.eq-status {
  align-self: center;
  font-family: var(--font-pixel);
  font-size: clamp(11px, 2.2vmin, 28px);
  padding: 1.2vmin 2.4vmin;
  border-radius: 1.2vmin;
  background: var(--panel-bg);
  border: 2px solid var(--panel-line);
  color: var(--ink-dim);
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eq-status.thinking { color: #7fe3ff; animation: pulse-fast 0.8s ease-in-out infinite; }
.eq-status.done { color: #48d97a; border-color: rgba(72, 217, 122, 0.6); }
.eq-status.guess { color: var(--ink); border-color: rgba(255, 173, 10, 0.6); }
.eq-status.error { color: #ffb0aa; border-color: rgba(222, 56, 49, 0.6); }

.verdict-title { font-family: var(--font-pixel); font-size: clamp(24px, 5.6vmin, 72px); animation: slam-in 0.3s ease; }
.verdict-title.good { color: #48d97a; }
.verdict-title.bad { color: var(--red); }
.verdict-comment {
  font-size: clamp(15px, 3vmin, 38px);
  font-weight: 700;
  color: var(--ink);
  margin-top: 2.2vmin;
  max-width: 100vmin;
}
.eq-verdict-actions {
  display: flex;
  justify-content: center;
  gap: 2.4vmin;
  margin-top: 3vmin;
}

/* ------------------------------------------------------------------ wall */

.wall-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vmin;
  padding: var(--safe);
}
.wall-result {
  font-family: var(--font-pixel);
  font-size: clamp(15px, 3.4vmin, 44px);
  color: #7fe3ff;
}
.wall-panel { flex: 1; min-height: 0; width: min(92vw, 110vmin); overflow: hidden; }
.wall-entry { text-align: center; display: flex; flex-direction: column; align-items: center; }

/* --------------------------------------------------------------- overlays */

#fx-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
}

#banner-layer {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 50;
}
.banner {
  font-family: var(--font-pixel);
  font-size: clamp(26px, 7.4vmin, 96px);
  color: var(--gold);
  text-shadow: 0.6vmin 0.6vmin 0 rgba(0, 0, 0, 0.6), 0 0 5vmin rgba(255, 173, 10, 0.5);
  animation: banner-slam 1.5s ease forwards;
  text-align: center;
  padding: 0 var(--safe);
  max-width: 100vw;
  overflow-wrap: break-word;
}
.banner.danger { color: var(--red); text-shadow: 0.6vmin 0.6vmin 0 rgba(0, 0, 0, 0.7), 0 0 5vmin rgba(222, 56, 49, 0.6); }
.banner.info { color: #7fe3ff; text-shadow: 0.6vmin 0.6vmin 0 rgba(0, 0, 0, 0.7), 0 0 5vmin rgba(127, 227, 255, 0.5); }

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(222, 56, 49, 0.55) 100%);
  transition: opacity 0.4s ease;
}
#vignette.on { opacity: 1; animation: pulse-fast 0.9s ease-in-out infinite; }

body.shake #stage { animation: shake-hard 0.28s linear; }

/* ---------------------------------------------------- hover (mouse only) */
/* Every button reacts on hover. Gated to real pointers so the iPad/Pencil
   never gets stuck in a hover state after a tap. */
@media (hover: hover) and (pointer: fine) {
  .mode-btn:hover {
    transform: translateY(-0.5vmin);
    filter: brightness(1.08);
  }
  .mode-btn:hover:active { transform: translateY(0.8vmin); }

  .big-btn { transition: transform 0.08s ease, filter 0.12s ease; }
  .big-btn:hover { transform: translateY(-0.35vmin); filter: brightness(1.14); }
  .big-btn:hover:active { transform: scale(0.95); }

  .answer:not(.dimmed):not(.reveal-correct):not(.reveal-wrong):hover {
    transform: scale(1.015);
    filter: brightness(1.12);
  }
  .answer:not(.dimmed):not(.reveal-correct):not(.reveal-wrong):hover:active {
    transform: scale(0.97);
  }

  .key-grid button { transition: transform 0.06s ease, background 0.1s ease; }
  .key-grid button:hover { background: #3a5cc0; transform: translateY(-0.25vmin); }
  .key-grid button.key-ok:hover { background: #25a85c; }
  .key-grid button.key-del:hover { background: #a83a25; }

  .pilot-card {
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  }
  .pilot-card:hover {
    transform: translateY(-0.9vmin) scale(1.02);
    border-color: var(--gold);
    box-shadow: 0 0 3.2vmin rgba(255, 173, 10, 0.5);
  }
}

/* ------------------------------------------------- narrow / portrait mode */

@media (max-aspect-ratio: 5/4) {
  .quiz-layout { flex-direction: column; }
  .quiz-left {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 2vmin;
  }
  .hud-alt { flex: 0 0 auto; }
  #rocket-rig { flex: 1; height: 16vmin; }
  #rocket-img { height: 100%; }
  #flame-img { display: none; }
  .pilot-cards { flex-wrap: wrap; height: auto; }
  .cer-columns { flex-direction: column; align-items: center; }
  .cer-actions { flex-direction: row; }
  .answers-grid { grid-template-columns: 1fr; }
  .answer { font-size: clamp(14px, 4.4vmin, 30px); }
}