:root {
  --purple: #522398;
  --deep: #470A68;
  --mid: #754FAD;
  --tint: #E5DEF0;
  --line: #B9C8D3;
  --grey: #778692;
  --ink: #333333;
  --orange: #FF6B00;
  --teal: #009490;
  --yellow: #FFE900;
  --bg: #F4F2F7;
  --sans: 'Space Grotesk', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: #000; font-family: var(--sans); min-height: 100vh; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

#app { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }

/* screen frames: phone-sized for menus/students, wide for host display */
.screen { width: 100%; background: #fff; border: 2px solid var(--ink); display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.phone { max-width: 400px; min-height: 560px; border-radius: 26px; }
.wide { max-width: 860px; min-height: 480px; border-radius: 16px; }
.dark { background: var(--deep); color: #fff; }
.teal { background: var(--teal); color: #fff; }
.orange { background: var(--orange); color: #fff; }
.slate { background: var(--grey); color: #fff; }
.grow { margin-top: auto; }

.title { font-size: 22px; font-weight: 700; color: var(--deep); }
.dark .title, .teal .title, .orange .title, .slate .title { color: #fff; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 10px; }
.rule { height: 1px; background: var(--line); border: 0; }
.dark .rule { background: var(--mid); }

.label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.dark .label, .teal .label, .orange .label { color: var(--line); }
.note { font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--grey); }
.dark .note { color: var(--tint); }
.error { font-family: var(--mono); font-size: 12px; color: #B3261E; min-height: 16px; }
.dark .error, .teal .error, .orange .error { color: var(--yellow); }

.mascot { border-radius: 50%; border: 2px dashed #A991CB; background: repeating-linear-gradient(45deg, var(--tint) 0 5px, #fff 5px 10px); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 9px; color: var(--mid); text-align: center; flex: none; }
.dark .mascot { background: repeating-linear-gradient(45deg, var(--mid) 0 5px, var(--deep) 5px 10px); color: var(--tint); }
.teal .mascot, .orange .mascot { background: repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 5px, rgba(255,255,255,.05) 5px 10px); border-color: var(--line); color: #fff; }

/* buttons */
.btn { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px; border-radius: 12px; font-size: 17px; font-weight: 700; text-align: left; width: 100%; }
.btn.center { justify-content: center; text-align: center; }
.btn.small { padding: 12px 18px; font-size: 15px; border-radius: 10px; width: auto; }
.btn-primary { background: var(--purple); color: #fff; }
.btn-outline { border: 2px solid var(--purple); color: var(--deep); background: #fff; }
.btn-dashed { border: 2px dashed var(--purple); color: var(--deep); background: #fff; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-orange { background: var(--orange); color: #fff; font-size: 20px; padding: 18px; }
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.link { font-family: var(--mono); font-size: 12px; color: var(--purple); text-align: left; }
.link:hover { color: var(--orange); }

.tile { border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; }
.tile.fill { background: var(--tint); }
.tile.line { border: 2px solid var(--purple); background: #fff; }
.tile h3 { font-size: 16px; color: var(--deep); }
.tile .note { color: var(--mid); }

.badge { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--purple); color: #fff; padding: 3px 6px; }
.badge.soon { background: var(--line); color: var(--ink); }

/* inputs */
.field { width: 100%; padding: 10px 12px; border: 2px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); outline: none; }
.field:focus { border-color: var(--purple); }
.code-boxes { display: flex; gap: 8px; }
.code-boxes input { flex: 1; min-width: 0; height: 60px; text-align: center; font-size: 28px; font-weight: 700; text-transform: uppercase; border: 2px solid var(--ink); border-radius: 10px; background: var(--bg); outline: none; }
.code-boxes input:focus { border-color: var(--purple); background: #fff; }

/* deck list */
.deck { border: 2px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; }
.deck.on { border-color: var(--purple); background: var(--tint); }
.deck strong { font-size: 15px; color: var(--ink); }
.deck.on strong { color: var(--deep); }
.decks { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 330px; }

/* deck builder */
.chips { display: flex; gap: 8px; }
.chip { flex: 1; border: 2px solid var(--line); border-radius: 8px; padding: 10px; text-align: center; font-size: 13px; font-weight: 500; color: var(--ink); }
.chip.on { border-color: var(--purple); background: var(--tint); color: var(--deep); font-weight: 700; }
.qcard { border: 2px solid var(--line); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: center; gap: 8px; }
.opt input[type=radio] { accent-color: var(--teal); width: 18px; height: 18px; flex: none; }
.builder { display: flex; flex-direction: column; gap: 10px; }

/* lobby */
.code { font-size: 64px; font-weight: 700; color: var(--yellow); letter-spacing: 0.1em; line-height: 1; }
.players { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.player { background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; padding: 6px 10px; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }

/* question / results */
.timer { display: flex; align-items: center; gap: 10px; }
.bar { width: 180px; height: 8px; background: var(--tint); border-radius: 4px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--orange); width: 100%; }
.mono-orange { font-family: var(--mono); font-size: 12px; color: var(--orange); min-width: 36px; text-align: right; }
.qtext { font-size: 28px; font-weight: 700; color: var(--deep); line-height: 1.2; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.option { border: 2px solid; border-radius: 10px; padding: 14px; font-size: 16px; color: var(--ink); text-align: left; background: #fff; }
.option.dim { opacity: 0.35; }
.answers { display: flex; flex-direction: column; gap: 10px; }
.answer { border-radius: 10px; padding: 16px; font-size: 16px; font-weight: 700; text-align: left; display: flex; gap: 12px; }
.answer.picked { outline: 4px solid var(--deep); }
.answer:disabled:not(.picked) { opacity: 0.4; }
.chart { display: flex; align-items: flex-end; gap: 16px; height: 140px; }
.chart .col { flex: 1; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.chart .fill { width: 100%; background: var(--line); min-height: 4px; }
.chart .ok .fill { background: var(--teal); }
.chart .ok .label { color: var(--teal); }

.board { display: flex; flex-direction: column; gap: 8px; }
.board .row { border-bottom: 1px solid var(--line); padding-bottom: 6px; font-size: 16px; }
.board .rank { font-family: var(--mono); font-size: 12px; color: var(--grey); width: 26px; }
.board .who { flex: 1; font-weight: 500; text-shadow: 0 0 4px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5); }
.name-tint { text-shadow: 0 0 4px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5); }
.board .pts { font-family: var(--mono); color: var(--deep); font-weight: 700; }
.big { font-size: 40px; font-weight: 700; color: var(--yellow); line-height: 1; }
.center-text { text-align: center; align-items: center; }

/* start screen: reference artwork with real, invisible-but-accessible hit targets on top */
.start-art { position: relative; width: 100%; max-width: 400px; aspect-ratio: 929 / 1692; border-radius: 26px; overflow: hidden; background: #F4F2F7; }
.start-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.start-art .hit, .scene-card .hit { position: absolute; border: 0; background: transparent; cursor: pointer; border-radius: 12px; }
.start-art .hit:hover, .scene-card .hit:hover { background: rgba(255, 255, 255, 0.08); }
.start-art .hit:focus-visible, .scene-card .hit:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.start-art .hit-settings { border-radius: 10px; }
.start-art .hit-circle { border-radius: 50%; }

/* host/join screens: cropped from the same reference mockup (sprite technique — one
   source image, positioned via background-size/position to show just one card), with
   real opaque controls drawn on top for the parts that need live data or typing. */
.scene-card {
  position: relative; width: 100%; max-width: 400px; aspect-ratio: 610 / 1186;
  border-radius: 26px; overflow: hidden; background-color: #1a0a35;
  background-image: url('/assets/host-join-mockup.webp'); background-repeat: no-repeat;
}
.scene-host { background-size: 215.1% 101.1%; background-position: 4.1% 38.5%; }
.scene-join { background-size: 215.5% 101.1%; background-position: 95.9% 38.5%; }
.scene-card .hit-settings { border-radius: 10px; } /* back button */

.scene-tile { position: absolute; border-radius: 14px; padding: 0 14px; display: flex; align-items: center; gap: 10px; text-align: left; width: 88%; left: 6%; }
.scene-tile .ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; font-size: 14px; }
.scene-tile .tx { flex: 1; min-width: 0; }
.scene-tile .tx h3 { font-size: 14.5px; color: #fff; line-height: 1.2; }
.scene-tile .tx span { font-family: var(--mono); font-size: 8.8px; line-height: 1.35; display: block; margin-top: 2px; }
.scene-tile .arrow { font-size: 18px; flex: none; }
.scene-tile.fill { background: linear-gradient(135deg, var(--purple), var(--deep)); border: 2px solid #8a5cd6; }
.scene-tile.fill .ic { background: rgba(255, 255, 255, 0.18); color: #fff; }
.scene-tile.fill .tx span { color: var(--tint); }
.scene-tile.fill .arrow { color: #fff; }
.scene-tile.light { background: #f2e4ff; border: 2px solid var(--tint); }
.scene-tile.light .ic { background: var(--tint); color: var(--deep); }
.scene-tile.light .tx h3 { color: var(--deep); }
.scene-tile.light .tx span { color: var(--mid); }
.scene-tile.light .arrow { color: var(--deep); }
.scene-tile:disabled { opacity: 0.55; cursor: not-allowed; }

.scene-label { position: absolute; left: 6%; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #cdbdeb; }
.scene-seeall { position: absolute; right: 6%; font-family: var(--mono); font-size: 11px; color: var(--tint); background: none; border: 0; cursor: pointer; }
.scene-seeall:hover { color: #fff; }

.scene-row { position: absolute; left: 6%; width: 88%; border-radius: 10px; padding: 0 14px; display: flex; align-items: center; gap: 12px; background: rgba(117, 79, 173, 0.32); border: 1px solid rgba(201, 180, 235, 0.3); text-align: left; }
.scene-row .ic { width: 26px; height: 26px; border-radius: 6px; background: rgba(255, 255, 255, 0.15); flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.scene-row span { flex: 1; min-width: 0; color: #fff; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-row .chev { color: var(--tint); flex: none; }
.scene-empty { position: absolute; left: 6%; width: 88%; font-family: var(--mono); font-size: 11px; color: var(--tint); }
/* opaque backing so the dynamic recent-decks list fully hides the mockup's baked-in
   placeholder rows underneath instead of letting them peek through */
.scene-panel { position: absolute; left: 0; right: 0; bottom: 0; top: 43%; background: linear-gradient(180deg, #230f49 0%, #1c0c3c 35%, #120625 100%); }

/* opaque backing so the game-code boxes, nickname field and Join button fully hide the
   mockup's baked-in versions underneath instead of letting their edges peek through
   (same technique as .scene-panel on the host screen) */
.scene-panel-join { position: absolute; left: 0; right: 0; top: 44.5%; height: 39%; background: #1c0f3b; }
.scene-code-label { position: absolute; left: 6%; top: 46.3%; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #cdbdeb; }
.scene-codebox { position: absolute; top: 49.6%; height: 10.3%; border-radius: 10px; background: #1b0c3a; border: 2px solid var(--mid); color: #fff; text-align: center; font-size: 22px; font-weight: 700; text-transform: uppercase; outline: none; }
.scene-codebox:focus { border-color: var(--yellow); }
.scene-nick-label { position: absolute; left: 6%; top: 62.0%; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #cdbdeb; }
.scene-nickname { position: absolute; left: 4%; top: 64.3%; width: 92%; height: 6.0%; border-radius: 10px; background: #1b0c3a; border: 2px solid var(--mid); color: #fff; font-size: 15px; padding: 0 16px 0 46px; outline: none; }
.scene-nickname-ic { position: absolute; left: 6%; top: 66.0%; width: 22px; height: 22px; border-radius: 50%; background: var(--mid); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.scene-nickname::placeholder { color: #a08ecb; }
.scene-nickname:focus { border-color: var(--yellow); }
.scene-join-btn { position: absolute; left: 4%; top: 72.0%; width: 92%; height: 8.6%; border-radius: 12px; background: linear-gradient(135deg, var(--teal), #017471); border: 0; color: #fff; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.scene-join-btn:hover { filter: brightness(1.08); }
.scene-error { position: absolute; left: 6%; width: 88%; top: 81.5%; font-family: var(--mono); font-size: 11px; color: var(--yellow); text-align: center; }

/* avatar picker: cropped from static/assets/avatar-mockup.webp. The header art and the
   20-avatar grid are the mockup image itself; everything below the grid is real (so the
   live nickname + its chosen color can show), backed by an opaque panel. */
.avatar-card {
  position: relative; width: 100%; max-width: 400px; aspect-ratio: 927 / 1654;
  border-radius: 26px; overflow: hidden; background-color: #f4f0f8;
  background-image: url('/assets/avatar-mockup.webp'); background-size: 100% 100%; background-position: 0 0;
}
.avatar-grid-btn {
  position: absolute; width: 18.9%; height: 10.6%; border-radius: 50%;
  background-image: url('/assets/avatar-mockup.webp'); background-size: 543.4% 945.1%;
  border: 3px solid transparent; cursor: pointer; transform: translate(-50%, -50%);
}
.avatar-grid-btn:hover { border-color: rgba(82, 35, 152, 0.4); }
.avatar-grid-btn.selected { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(82, 35, 152, 0.25); transform: translate(-50%, -50%) scale(1.06); }
.avatar-grid-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.avatar-panel { position: absolute; left: 0; right: 0; bottom: 0; top: 66%; background: #f4f0f8; }
.avatar-divider { position: absolute; left: 10%; width: 80%; display: flex; align-items: center; gap: 12px; justify-content: center; }
.avatar-divider hr { flex: 1; border: 0; border-top: 1px solid var(--line); margin: 0; }
.avatar-divider span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--grey); white-space: nowrap; }

.swatch { position: absolute; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transform: translate(-50%, -50%); }
.swatch.selected { border-color: var(--deep); box-shadow: 0 0 0 3px rgba(71, 10, 104, 0.2); }
.swatch:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }

.avatar-nick-label { position: absolute; left: 6%; top: 78.5%; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.avatar-nick-box { position: absolute; left: 6%; top: 80.8%; width: 88%; height: 5.6%; border-radius: 10px; background: #fff; border: 2px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.avatar-nick-box .ic { width: 24px; height: 24px; border-radius: 50%; background: var(--tint); color: var(--mid); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.avatar-nick-box span { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-ready-btn { position: absolute; left: 5%; top: 89.0%; width: 90%; height: 7.8%; border-radius: 12px; background: linear-gradient(135deg, var(--purple), var(--deep)); border: 0; color: #fff; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.avatar-ready-btn:hover { filter: brightness(1.08); }
.avatar-ready-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.avatar-error { position: absolute; left: 6%; width: 88%; top: 86.8%; font-family: var(--mono); font-size: 11px; color: #B3261E; text-align: center; }
.avatar-dev-note { position: absolute; left: 6%; width: 88%; top: 67.3%; font-family: var(--mono); font-size: 10px; color: var(--mid); text-align: center; }

@media (max-width: 480px) {
  #app { padding: 0; }
  .screen { border: 0; border-radius: 0; min-height: 100vh; }
  .bar { width: 100px; }
  .options { grid-template-columns: 1fr; }
  .qtext { font-size: 22px; }
  .code { font-size: 52px; }
}