:root {
  --bg: #0d0b26; --ink: #ffffff; --muted: #c5c9ee; --card: rgba(22, 20, 58, 0.88); --line: rgba(160, 170, 255, 0.28);
  --yellow: #ffe14d; --green: #5fe08a; --red: #ff6b6b; --cyan: #7fe9ff; --purple: #b07cff; --pink: #ff7ad1;
  --font: ui-rounded, "SF Pro Rounded", "Baloo 2", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#lab { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }

a { color: var(--yellow); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
button { font: inherit; color: inherit; cursor: pointer; }

/* Every game: a way back to the others, and who's signed in. */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top));
  font-size: 15px; pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar .home, .bar .account, .icon-btn {
  background: rgba(13, 11, 38, 0.6); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; color: var(--muted); text-decoration: none; backdrop-filter: blur(6px);
}
.bar .home:hover { color: var(--ink); }
.bar .account:empty { display: none; }
.bar .account strong { color: var(--ink); }
.bar-right { display: flex; align-items: center; gap: 8px; }
.icon-btn { min-width: 40px; min-height: 36px; padding: 4px 8px; font-size: 18px; line-height: 1; }
.playing .bar .home { font-size: 0; padding: 6px 10px; }
.playing .bar .home::before { content: "←"; font-size: 16px; }
.playing .bar .account { display: none; }

.screen {
  position: fixed; inset: 0; z-index: 3; display: flex; padding: 56px 12px 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom)); overflow-y: auto; pointer-events: none;
}
.card {
  pointer-events: auto; margin: auto; width: min(100%, 460px); padding: 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  backdrop-filter: blur(10px); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}

.logo { margin: 0; text-align: center; font-size: clamp(40px, 12vw, 60px); line-height: 0.95; font-weight: 900; letter-spacing: -1px; }
.logo span:first-child { color: var(--yellow); display: inline-block; transform: rotate(-4deg); text-shadow: 0 4px 0 #b9770e, 0 0 30px rgba(255, 225, 77, 0.5); }
.logo span:last-child { color: var(--cyan); display: inline-block; transform: rotate(2deg); text-shadow: 0 4px 0 #1b7f9c, 0 0 30px rgba(127, 233, 255, 0.5); }
.tagline { margin: 10px 0 16px; text-align: center; color: var(--muted); }

.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-weight: 700; margin-bottom: 4px; font-size: 15px; }
input[type="text"] {
  width: 100%; padding: 12px 14px; font: inherit; font-weight: 700; color: var(--ink);
  background: rgba(8, 7, 28, 0.7); border: 2px solid var(--line); border-radius: 14px;
}
input[type="text"]::placeholder { color: #7f84b5; }
input[type="text"]:focus { border-color: var(--cyan); outline: none; }

.levels { border: 0; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.levels legend { padding: 0; margin-bottom: 6px; font-weight: 700; font-size: 15px; }
.level {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px;
  background: rgba(8, 7, 28, 0.6); border: 2px solid var(--line); border-radius: 16px; min-width: 0;
}
.level .emoji { font-size: 26px; line-height: 1.1; }
.level .name { font-weight: 800; font-size: 14px; }
.level .ages { font-size: 12px; color: var(--muted); white-space: nowrap; }
.level[aria-checked="true"] { border-color: var(--yellow); background: rgba(255, 225, 77, 0.16); box-shadow: 0 0 0 2px rgba(255, 225, 77, 0.3); }
.levels.compact .level { padding: 5px 2px; }
.levels.compact .level .emoji { font-size: 20px; }

.btn {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  padding: 12px 18px; border: 0; border-radius: 16px; font-weight: 900; font-size: 18px;
  color: #1c1503; background: linear-gradient(#ffe97a, #ffc93a); box-shadow: 0 5px 0 #b9770e;
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #b9770e; }
.btn.big { width: 100%; padding: 15px 18px; font-size: 21px; }
.btn.alt { color: #04222b; background: linear-gradient(#a5f1ff, #5fd6f2); box-shadow: 0 5px 0 #1b7f9c; }
.btn.alt:active { box-shadow: 0 1px 0 #1b7f9c; }
.btn.small { padding: 7px 12px; font-size: 15px; border-radius: 12px; box-shadow: 0 3px 0 #1b7f9c; }
.btn:disabled { filter: grayscale(0.7); opacity: 0.6; cursor: default; }
.link { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--muted); text-decoration: underline; font-size: 15px; }

.join-row { display: flex; gap: 8px; margin-top: 14px; }
.join-row input { flex: 1; min-width: 0; text-align: center; text-transform: uppercase; letter-spacing: 6px; font-size: 22px; font-weight: 900; padding: 8px; }
.join-row .btn { white-space: nowrap; }
.error { min-height: 1.3em; margin: 10px 0 0; color: #ffb3b3; text-align: center; font-weight: 700; }

/* Buy me a coffee: the same badge on every game (see ADDING_A_GAME.md). */
.bmc {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: #ffdd00; color: #0d0c22;
  font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-decoration: none; white-space: nowrap;
}
.bmc:hover { background: #ffe74d; }
.bmc:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bmc svg { width: 18px; height: 18px; flex: none; }
.foot { display: flex; justify-content: center; padding-top: 8px; }

/* The lab's waiting room sits at the bottom, so the scientists show above it. */
#room { align-items: flex-end; }
#room .card { margin: auto auto 0; padding: 14px 16px; }
.room-code { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.room-code span { color: var(--muted); font-weight: 700; }
.room-code strong { font-size: 30px; letter-spacing: 5px; color: var(--yellow); font-weight: 900; flex: 1; }
.roster { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.roster li, .chips li {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px;
  background: rgba(8, 7, 28, 0.7); border: 1px solid var(--line); border-radius: 999px; font-weight: 700; font-size: 15px;
}
.dot { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 2px solid rgba(255, 255, 255, 0.85); }
.you { border-color: var(--yellow) !important; }
.away { opacity: 0.5; }
.looks { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 12px; }
.look { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; padding: 0; flex: none; }
.look[aria-checked="true"] { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); transform: scale(1.12); }
.waiting { text-align: center; color: var(--muted); font-weight: 700; margin: 6px 0 0; }

/* Playing */
.hud { position: fixed; z-index: 4; top: 0; left: 0; right: 0; padding: 52px 10px 0; padding-top: calc(max(8px, env(safe-area-inset-top)) + 46px); pointer-events: none; }
.hud-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: rgba(13, 11, 38, 0.72); border: 1px solid var(--line); font-weight: 800; font-size: 15px; backdrop-filter: blur(6px);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fuel { flex: none; }
.fuel-track { display: inline-block; width: 64px; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.fuel-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #5fe08a, #c8ff7a); border-radius: 6px; transition: width 1s; box-shadow: 0 0 10px #5fe08a; }
.timer { margin-top: 8px; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.timer span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--cyan), var(--purple)); border-radius: 6px; transform-origin: left; }
.timer.low span { background: linear-gradient(90deg, #ffb13d, #ff6b6b); }
.chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.chips li { font-size: 13px; padding: 3px 8px 3px 4px; backdrop-filter: blur(6px); }
.chips .dot { width: 13px; height: 13px; }
.chips .score { color: var(--yellow); }
.chips .gain { color: var(--green); }

.banner {
  position: fixed; z-index: 4; left: 50%; top: 42%; transform: translate(-50%, -50%); text-align: center; pointer-events: none;
  padding: 18px 30px; border-radius: 28px; background: rgba(13, 11, 38, 0.8); border: 2px solid var(--yellow);
  box-shadow: 0 0 60px rgba(255, 225, 77, 0.35); animation: banner-in 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; width: max-content; max-width: 92vw;
}
.banner-icon { font-size: 62px; line-height: 1; }
.banner-sub { color: var(--muted); font-weight: 800; margin-top: 6px; }
.banner-title { font-size: clamp(28px, 8vw, 46px); font-weight: 900; color: var(--yellow); }
@keyframes banner-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-6deg); } }

.panel {
  position: fixed; z-index: 4; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(100%, 720px); padding: 12px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0;
  backdrop-filter: blur(10px); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45);
  animation: panel-in 0.4s ease-out both; max-height: 62vh; overflow-y: auto;
}
@keyframes panel-in { from { transform: translate(-50%, 60%); opacity: 0; } }
.prompt-row { display: flex; gap: 8px; align-items: flex-start; }
.prompt { flex: 1; margin: 0 0 10px; font-size: clamp(18px, 4.6vw, 23px); font-weight: 800; line-height: 1.25; }
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.options.stack { grid-template-columns: 1fr; }
.option {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 68px; padding: 8px 6px;
  border-radius: 18px; border: 3px solid rgba(255, 255, 255, 0.22); background: rgba(60, 66, 150, 0.6);
  font-weight: 900; font-size: clamp(16px, 4.2vw, 20px); text-align: center; line-height: 1.15;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35); transition: transform 0.08s, box-shadow 0.08s, opacity 0.2s;
}
.options.stack .option { flex-direction: row; min-height: 50px; font-size: 16px; }
.option .emoji { font-size: 30px; line-height: 1; }
.option .swatch { width: 44px; height: 30px; border-radius: 10px; border: 3px solid #fff; }
.option:not(:disabled):active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.option:disabled { cursor: default; }
.option.picked { border-color: var(--yellow); background: rgba(255, 225, 77, 0.25); }
.options.locked .option:not(.picked):not(.right) { opacity: 0.5; }
.option.right { border-color: var(--green); background: rgba(95, 224, 138, 0.3); opacity: 1; }
.option.missed { border-color: var(--red); background: rgba(255, 107, 107, 0.25); }
.hint { margin: 8px 0 0; min-height: 1.3em; text-align: center; color: var(--muted); font-weight: 700; font-size: 15px; }
.hint:empty { display: none; }
.result { text-align: center; font-size: clamp(22px, 6vw, 30px); font-weight: 900; margin-bottom: 6px; animation: banner-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.result.good { color: var(--green); }
.result.bad { color: #ffb08d; }
@keyframes banner-pop { from { opacity: 0; transform: scale(0.5); } }
.fact { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(127, 233, 255, 0.12); border: 1px solid rgba(127, 233, 255, 0.35); font-size: 16px; }
.fact::before { content: "💡 "; }

/* The end */
#final { align-items: flex-end; }
#final .card { margin: auto auto 0; }
.final-card h2 { margin: 0 0 4px; text-align: center; font-size: clamp(24px, 6.5vw, 32px); color: var(--yellow); font-weight: 900; }
.final-card > p { margin: 0 0 10px; text-align: center; color: var(--muted); font-weight: 700; }
.podium { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; max-height: 34vh; overflow-y: auto; }
.podium li { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 14px; background: rgba(8, 7, 28, 0.7); border: 1px solid var(--line); font-weight: 800; }
.podium .medal { width: 28px; text-align: center; font-size: 20px; }
.podium .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .stars { color: var(--muted); font-size: 14px; }
.podium .score { color: var(--yellow); }

.toast {
  position: fixed; z-index: 9; left: 50%; top: 60px; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px;
  background: #2b1d5c; border: 1px solid var(--purple); font-weight: 800; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); max-width: 92vw; text-align: center;
}

/* Wide screens: the lobby and results sit to the side of the stage. */
@media (min-width: 900px) and (min-height: 560px) {
  #home { justify-content: flex-start; padding-left: 4vw; }
  #home .card { margin: auto 0; }
  #room, #final { align-items: center; justify-content: flex-end; padding-right: 4vw; }
  #room .card, #final .card { margin: auto 0; width: 400px; }
  .hud { padding-left: 16px; padding-right: 16px; }
  .chips { max-width: 46vw; }
}
@media (max-height: 520px) {
  .logo { font-size: 34px; }
  .tagline { display: none; }
  .panel { max-height: 70vh; }
  .option { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .banner, .panel, .result { animation: none; }
}