:root {
  --ink: #10333b;
  --muted: #526f73;
  --purple: #0f9a9d;
  --purple-dark: #067078;
  --purple-soft: #c9f3ed;
  --yellow: #ffc857;
  --pink: #ff6b5f;
  --mint: #37c7a5;
  --paper: #d6f0ea;
  --white: #fff;
  --shadow: 0 18px 50px rgba(67, 42, 137, .16);
  font-family: Inter, ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #073b4c;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { min-height: 100dvh; background: radial-gradient(circle at 16% 5%, #ff936f, transparent 32%), radial-gradient(circle at 88% 16%, #48d6c2, transparent 34%), linear-gradient(155deg, #073b4c, #0f6b6e); }
html[dir="rtl"] body { direction: rtl; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
  position: relative;
  width: min(100%, 470px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(165deg, #d9f4ec 0%, #bfe8e1 48%, #f8ddb3 100%);
  box-shadow: 0 0 80px rgba(31, 23, 66, .13);
}

.screen {
  display: none;
  min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) 22px max(18px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 4% 8%, rgba(255,105,85,.78), transparent 29%),
    radial-gradient(circle at 96% 22%, rgba(38,208,190,.82), transparent 31%),
    radial-gradient(circle at 30% 95%, rgba(255,197,71,.72), transparent 34%),
    linear-gradient(145deg, #ffd0a6, #95e4dc 52%, #62c8cc);
  background-size: 130% 130%, 125% 125%, 140% 140%, 100% 100%;
  animation: screen-in .34s cubic-bezier(.2,.8,.2,1), color-drift 12s ease-in-out infinite alternate;
}
.screen.active { display: flex; flex-direction: column; }
@keyframes screen-in { from { opacity: 0; transform: translateX(18px); } }
@keyframes color-drift { from { background-position: 0 0, 100% 0, 0 100%, 0 0; } to { background-position: 14% 8%, 84% 18%, 22% 82%, 0 0; } }

#homeScreen { justify-content: center; text-align: center; padding-inline: 34px; }
.home-art { position: relative; height: 260px; margin-bottom: 6px; }
.mascot {
  position: absolute; inset: 48px 60px 20px; display: grid; place-items: center;
  border-radius: 46% 54% 48% 52%; font-size: 96px;
  background: linear-gradient(145deg, #ffd95e, #ffae5c); box-shadow: var(--shadow);
  transform: rotate(-3deg); animation: float 3.2s ease-in-out infinite;
}
.mascot::after { content: ""; position: absolute; width: 52px; height: 16px; border-radius: 50%; background: rgba(39,24,72,.12); bottom: -32px; filter: blur(4px); }
.bubble { position: absolute; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 10px 26px rgba(44,30,91,.12); font-weight: 900; z-index: 2; }
.bubble-one { width: 60px; height: 60px; left: 8px; top: 28px; background: var(--pink); color: white; font-size: 34px; transform: rotate(-12deg); }
.bubble-two { width: 68px; height: 68px; right: 2px; top: 10px; background: var(--mint); font-size: 34px; transform: rotate(9deg); }
.bubble-three { width: 54px; height: 54px; right: 23px; bottom: 0; background: var(--purple); font-size: 25px; transform: rotate(-6deg); }
@keyframes float { 50% { transform: translateY(-9px) rotate(2deg); } }

.eyebrow { margin: 0 0 10px; color: var(--purple); font-size: 12px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: clamp(46px, 14vw, 68px); line-height: .92; letter-spacing: -.065em; }
h1 span { color: var(--purple); }
h2 { margin-bottom: 12px; font-size: clamp(32px, 9vw, 43px); line-height: 1.02; letter-spacing: -.045em; }
.intro, .muted { color: var(--muted); line-height: 1.55; }
.intro { margin: 0 auto 28px; max-width: 350px; font-size: 17px; }

.primary-button, .danger-button {
  width: 100%; min-height: 58px; border: 0; border-radius: 18px; padding: 15px 20px;
  color: white; background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  box-shadow: 0 11px 25px rgba(108,76,255,.3); font-weight: 850; cursor: pointer;
  transition: transform .15s, filter .15s;
}
.primary-button:active, .danger-button:active { transform: scale(.98); }
.primary-button:disabled { opacity: .42; box-shadow: none; cursor: default; }
.jumbo { min-height: 66px; border-radius: 21px; font-size: 18px; }
.text-button { border: 0; padding: 15px; color: var(--purple); background: transparent; font-weight: 800; cursor: pointer; }
.app-version { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.language-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 auto 14px; padding: 5px; width: min(100%, 270px); border-radius: 18px; background: #eeeaff; }
.language-button { min-height: 42px; border: 0; border-radius: 14px; color: var(--purple-dark); background: transparent; font-weight: 900; cursor: pointer; }
.language-button.active { color: white; background: linear-gradient(145deg, #805fff, #563bdc); box-shadow: 0 6px 16px rgba(108,76,255,.25); }
.difficulty-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: min(100%, 300px); margin: -6px auto 14px; }
.difficulty-button { min-height: 36px; border: 2px solid #d7cdf1; border-radius: 13px; color: var(--muted); background: rgba(243,238,255,.86); font-size: 12px; font-weight: 900; cursor: pointer; }
.difficulty-button.active { color: var(--purple-dark); border-color: var(--purple); background: #f0edff; }
.game-options { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: min(100%, 330px); margin: -2px auto 10px; transform: translateY(-6px); }
.game-option { display: grid; gap: 6px; text-align: start; }
.game-option > span { color: var(--ink); font-size: 11px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.game-option select { width: 100%; min-height: 46px; border: 2px solid #2ea6a2; border-radius: 15px; padding: 0 34px 0 12px; color: #073b4c; background: #c9eee5; font-weight: 900; outline: none; box-shadow: 0 7px 16px rgba(7,59,76,.12); }
.game-option select:focus { border-color: #ff7a5c; box-shadow: 0 0 0 4px rgba(255,122,92,.2); }
html[dir="rtl"] .game-option select { padding: 0 12px 0 34px; }
html[dir="rtl"] { font-family: Arial, "Segoe UI", sans-serif; }
html[dir="rtl"] .muted, html[dir="rtl"] .hint-card p { line-height: 1.65; }
html[dir="rtl"] .reply-timer-track i { transform-origin: right center; }
.text-button.compact { padding: 10px; font-size: 13px; }
#backToMenuButton, #summaryMenuButton {
  min-height: 46px; margin-top: 2px; border: 2px solid #ded7f4; border-radius: 15px;
  background: rgba(255,255,255,.7); color: var(--purple-dark); font-size: 15px;
}
.mic-test-button { width: 100%; min-height: 50px; margin-top: 11px; border: 2px solid #ded7f4; border-radius: 17px; color: var(--purple-dark); background: rgba(255,255,255,.74); font-weight: 850; cursor: pointer; }
.mic-test-button span { margin-right: 5px; }
.danger-button { background: linear-gradient(135deg, #ef5379, #d83860); box-shadow: 0 11px 25px rgba(220,57,99,.22); }

.screen-header, .game-header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.icon-button { width: 42px; height: 42px; border: 0; border-radius: 50%; color: var(--ink); background: #f0edf8; font-size: 25px; cursor: pointer; }
.header-spacer { width: 42px; }
.step-dots { display: flex; gap: 7px; }
.step-dots i { width: 8px; height: 8px; border-radius: 9px; background: #ddd8ea; transition: .2s; }
.step-dots .current { width: 26px; background: var(--purple); }
.screen-content { flex: 1; }
.center-content { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.mini-icon, .round-icon, .dialog-icon { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 22px; border-radius: 27px; background: var(--purple-soft); font-size: 38px; transform: rotate(-4deg); }
.bottom-action { padding-top: 18px; }
.stacked-actions { display: grid; gap: 4px; }

.count-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 32px 0 18px; }
.count-button { aspect-ratio: 1; border: 2px solid #d9cff3; border-radius: 20px; color: var(--ink); background: rgba(243,238,255,.9); font-weight: 900; font-size: 26px; cursor: pointer; transition: .18s; }
.count-button.selected { color: white; border-color: var(--purple); background: var(--purple); box-shadow: 0 10px 24px rgba(108,76,255,.28); transform: translateY(-3px) rotate(-2deg); }
.player-mode-choices { display: grid; gap: 14px; width: min(100%, 360px); margin: 30px auto 8px; }
.player-mode-button { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 13px; min-height: 104px; padding: 15px 19px; border: 2px solid #d8cef2; border-radius: 24px; color: var(--ink); background: linear-gradient(145deg, rgba(248,244,255,.92), rgba(226,216,255,.9)); text-align: left; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.player-mode-button:hover, .player-mode-button:focus-visible { border-color: var(--purple); box-shadow: 0 12px 26px rgba(108,76,255,.17); transform: translateY(-3px); outline: none; }
.player-mode-button:active { transform: scale(.98); }
.player-mode-button .mode-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; background: var(--purple-soft); font-size: 28px; }
.player-mode-button strong { align-self: end; font-size: 21px; letter-spacing: -.03em; }
.player-mode-button small { align-self: start; color: var(--muted); font-size: 13px; font-weight: 700; }
.player-mode-button.multi-mode .mode-icon { background: #e4f8f1; }

.names-content { padding-top: 24px; text-align: center; overflow-y: auto; }
.name-orb-wrap { margin: 26px 0 20px; }
.voice-orb { position: relative; width: 108px; height: 108px; display: grid; place-items: center; margin: auto; }
.orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(108,76,255,.16); }
.ring-two { inset: 9px; }
.mic-button { position: relative; z-index: 2; width: 78px; height: 78px; border: 0; border-radius: 50%; color: white; background: linear-gradient(145deg, #17b8ae, #067078); box-shadow: 0 12px 30px rgba(6,112,120,.3); font-size: 33px; cursor: pointer; touch-action: none; user-select: none; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.voice-orb.listening .orb-ring { animation: pulse-ring 1.4s ease-out infinite; }
.voice-orb.listening .ring-two { animation-delay: .35s; }
.voice-orb.listening .mic-button { background: linear-gradient(145deg, #ff7798, #e84c74); }
.voice-orb.listening .mic-button { transform: translateY(5px) scale(.92); box-shadow: 0 4px 12px rgba(232,76,116,.35), inset 0 4px 8px rgba(92,17,44,.2); }
.voice-equalizer { position: absolute; z-index: 4; left: 50%; bottom: -14px; display: flex; align-items: center; justify-content: center; gap: 3px; width: 112px; height: 30px; padding: 4px 9px; border-radius: 18px; opacity: 0; background: rgba(255,255,255,.96); box-shadow: 0 7px 18px rgba(61,39,126,.16); transform: translate(-50%, 7px) scale(.85); transition: opacity .16s, transform .16s; pointer-events: none; }
.voice-equalizer i { width: 5px; height: 18px; border-radius: 5px; background: linear-gradient(#ff7a5c, #0f9a9d); transform: scaleY(.16); transition: transform 70ms linear; }
.voice-orb.listening .voice-equalizer { opacity: 1; transform: translate(-50%, 0) scale(1); }
.voice-orb.listening:not(.meter-live) .voice-equalizer i { animation: equalizer-fallback .55s ease-in-out infinite alternate; }
.voice-orb.listening:not(.meter-live) .voice-equalizer i:nth-child(2n) { animation-delay: -.27s; }
.voice-orb.listening:not(.meter-live) .voice-equalizer i:nth-child(3n) { animation-delay: -.42s; }
.voice-orb.meter-live .voice-equalizer i { transform: scaleY(var(--level, .16)); }
@keyframes equalizer-fallback { from { transform: scaleY(.18); } to { transform: scaleY(.92); } }
@keyframes pulse-ring { from { transform: scale(.78); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.mic-status { min-height: 22px; margin: 12px 0 0; color: var(--purple); font-weight: 800; font-size: 14px; }
.auto-record-row { width: min(100%, 340px); margin: 10px auto 0; text-align: center; }
/* Answer-mode switch on the ready screen. */
.reply-mode-choice { width: min(100%, 360px); margin: 18px auto 0; }
.reply-mode-choice .eyebrow { margin-bottom: 8px; }
.reply-mode-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reply-mode-button {
  display: grid; gap: 2px; padding: 12px 10px; cursor: pointer;
  border: 2px solid #ded7f4; border-radius: 17px;
  background: rgba(255,255,255,.72); color: var(--muted); text-align: center;
  transition: border-color .15s, background .15s, transform .15s;
}
.reply-mode-button span { font-size: 24px; line-height: 1.1; }
.reply-mode-button strong { color: var(--ink); font-size: 15px; }
.reply-mode-button small { font-size: 11px; line-height: 1.35; }
.reply-mode-button:active { transform: scale(.98); }
.reply-mode-button.selected {
  border-color: var(--purple); background: var(--purple-soft);
  box-shadow: 0 8px 18px rgba(15,154,157,.18);
}
.reply-mode-button.selected strong { color: var(--purple-dark); }
.admin-counts { display: grid; gap: 6px; width: 100%; margin: 0 auto 12px; }
.admin-count { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: 12px; background: rgba(255,255,255,.62); border: 2px solid #ded7f4; }
.admin-count small { color: var(--muted); font-size: 11px; font-weight: 800; }
.admin-count strong { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.admin-setting { margin: 4px auto 14px; padding: 10px 12px; border: 2px solid #ded7f4; border-radius: 14px; background: rgba(255,255,255,.6); }
.auto-record-toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 800; font-size: 13px; }
.auto-record-toggle input { accent-color: var(--purple); width: 18px; height: 18px; }
.auto-record-note { display: block; margin: 6px auto 0; color: var(--muted); font-size: 11px; }
.live-heard { display: grid; gap: 3px; width: min(100%, 290px); margin: 10px auto 0; padding: 10px 15px; border: 2px solid #dcd5f5; border-radius: 14px; color: var(--ink); background: white; box-shadow: 0 7px 20px rgba(61,39,126,.08); }
.live-heard small { color: var(--purple); font-size: 9px; font-weight: 950; letter-spacing: .14em; }
.live-heard strong { min-height: 21px; font-size: 17px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 12px; color: #aaa4bb; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: #e5e0ee; }
.input-label { display: block; margin-bottom: 7px; color: var(--muted); text-align: left; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.text-input { width: 100%; min-height: 54px; border: 2px solid #e7e2f0; border-radius: 16px; padding: 0 16px; outline: none; color: var(--ink); background: white; font-weight: 750; }
.text-input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(108,76,255,.09); }
.players-preview, .ready-players { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.player-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid rgba(6,112,120,.2); border-radius: 30px; color: var(--purple-dark); background: var(--purple-soft); font-size: 13px; font-weight: 800; cursor: pointer; }
.rename-current-player { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 5px; }
.player-chip i { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--purple); font-style: normal; font-size: 10px; }
.ready-content { padding-bottom: 18px; }
.ready-orbit { position: relative; width: 190px; height: 170px; margin: 0 auto 24px; }
.ready-orbit b { position: absolute; inset: 24px; display: grid; place-items: center; border-radius: 46% 54% 55% 45%; background: linear-gradient(145deg, var(--yellow), #ffb754); font-size: 66px; box-shadow: var(--shadow); }
.ready-orbit span { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: white; box-shadow: 0 8px 22px rgba(31,23,66,.13); font-size: 24px; }
.ready-orbit span:nth-child(1) { left: -2px; top: 14px; }
.ready-orbit span:nth-child(2) { right: -6px; top: 30px; }
.ready-orbit span:nth-child(3) { left: 5px; bottom: 3px; }

.game-screen { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.game-header { padding-bottom: 12px; }
.quit-game-button { min-height: 34px; border: 1px solid rgba(92,66,181,.22); border-radius: 13px; padding: 6px 10px; color: var(--purple-dark); background: rgba(238,232,255,.9); font-size: 11px; font-weight: 900; cursor: pointer; box-shadow: 0 5px 14px rgba(70,44,150,.1); }
#giveUpButton { width: min(100%, 190px); margin: 3px auto 0; color: #c22d61; font-size: 13px; font-weight: 900; }
#giveUpButton:hover { color: #a31f4e; }
.category-badge { display: inline-flex; align-items: center; min-height: 27px; padding: 0 11px; border-radius: 20px; color: var(--purple-dark); background: var(--purple-soft); font-size: 10px; font-weight: 900; letter-spacing: .09em; }
.difficulty-badge { display: inline-flex; align-items: center; min-height: 27px; margin-inline-start: 4px; padding: 0 9px; border-radius: 20px; color: #915a00; background: #fff1c8; font-size: 9px; font-weight: 950; letter-spacing: .06em; }
.round-label { margin-left: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.game-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.blur-reveal-card { display: grid; justify-items: center; gap: 6px; margin: 0 0 14px; }
.blur-reveal-art {
  position: relative; width: 118px; height: 118px; display: grid; place-items: center;
  border-radius: 50%; overflow: hidden; box-shadow: 0 14px 30px rgba(28,16,75,.22);
  background: linear-gradient(145deg, #a38aff, #6b48ee);
  transition: background .4s ease;
}
.blur-reveal-emoji {
  font-size: 62px; line-height: 1;
  filter: blur(26px) saturate(1.4);
  transform: scale(1.35);
  transition: filter .5s ease, transform .5s ease;
}
/* Five stages, one per hint: the blur steps down as hints are used up. */
.blur-reveal-art[data-stage="1"] .blur-reveal-emoji { filter: blur(26px) saturate(1.4); transform: scale(1.35); }
.blur-reveal-art[data-stage="2"] .blur-reveal-emoji { filter: blur(18px) saturate(1.3); transform: scale(1.26); }
.blur-reveal-art[data-stage="3"] .blur-reveal-emoji { filter: blur(11px) saturate(1.2); transform: scale(1.17); }
.blur-reveal-art[data-stage="4"] .blur-reveal-emoji { filter: blur(6px) saturate(1.1); transform: scale(1.08); }
.blur-reveal-art[data-stage="5"] .blur-reveal-emoji { filter: blur(2.5px); transform: scale(1.02); }
.blur-reveal-art.solved .blur-reveal-emoji { filter: blur(0); transform: scale(1); }
.blur-reveal-label { margin: 0; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .12em; }

.hint-card { position: relative; overflow: hidden; padding: 19px 21px 17px; border-radius: 23px; color: white; background: linear-gradient(135deg, #ff765d, #e64f65); box-shadow: 0 14px 32px rgba(179,62,76,.25); }
.hint-card::after { content: "?"; position: absolute; right: -4px; bottom: -42px; color: rgba(255,255,255,.1); font-size: 150px; font-weight: 950; transform: rotate(12deg); }
.hint-card-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .1em; }
.hint-card p { position: relative; z-index: 1; margin: 13px 0 17px; font-size: 20px; line-height: 1.28; font-weight: 820; }
.hint-progress { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.hint-progress small {
  flex: none; color: rgba(255,255,255,.86); font-size: 11px; font-weight: 900;
  letter-spacing: .08em; font-variant-numeric: tabular-nums;
}
.hint-dots { display: flex; flex: 1 1 auto; gap: 5px; min-width: 0; }
.hint-dots i {
  flex: 1 1 0; height: 5px; min-width: 8px; border-radius: 3px;
  background: rgba(255,255,255,.26); transition: background .25s ease;
}
.hint-dots i.on { background: #fff; }
.hint-dots i.current { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.34); }
.turn-area { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 18px 0 10px; text-align: center; }
.turn-area h2 { margin-bottom: 5px; font-size: 31px; }
.turn-area h2 span { color: var(--purple); }
.turn-area h2.turn-blink { animation: turn-message-blink 1.8s ease-in-out; }
@keyframes turn-message-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  15%, 45%, 75% { opacity: .16; transform: scale(.96); }
  30%, 60%, 90% { opacity: 1; transform: scale(1.07); text-shadow: 0 7px 22px rgba(108,76,255,.28); }
}
.turn-area .muted { margin-bottom: 8px; font-size: 14px; }
.reply-timer { display: grid; grid-template-columns: 1fr 30px; align-items: center; gap: 7px; width: min(100%, 290px); margin: 0 0 7px; }
.reply-timer-track { height: 9px; overflow: hidden; border-radius: 99px; background: rgba(91,66,161,.15); box-shadow: inset 0 1px 3px rgba(56,31,122,.18); }
.reply-timer-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5ed9bd, #ffd45b 62%, #ff6f91); transform-origin: left center; transform: scaleX(1); transition: transform .2s linear; }
.reply-timer.active strong { color: #d7466d; }
.reply-timer strong { color: var(--purple-dark); font-size: 12px; text-align: end; }
.guess-orb { width: 130px; height: 130px; margin-top: 4px; }
.big-mic { width: 91px; height: 91px; font-size: 40px; }
.transcript-card { display: grid; gap: 3px; min-width: 180px; margin: 6px 0; padding: 9px 16px; border-radius: 12px; background: #f0edf8; }
.transcript-card small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.transcript-card strong { color: var(--ink); }
.guess-history { width: 100%; max-height: 72px; overflow-y: auto; margin: 3px 0; padding: 7px 10px; border: 1px solid #d5c9ef; border-radius: 13px; background: rgba(238,232,255,.9); text-align: start; }
.guess-history > small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 950; letter-spacing: .1em; }
#guessHistoryList { display: flex; flex-wrap: wrap; gap: 5px; }
.guess-entry { max-width: 100%; padding: 4px 7px; border-radius: 9px; color: #6a607e; background: #f1eef7; font-size: 10px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guess-entry.correct { color: #087a66; background: #daf8ef; }
.hidden { display: none !important; }

/* Countdown before the first hint of a new game. */
.countdown-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(15,154,157,.96), rgba(4,42,52,.97));
  color: #fff; text-align: center;
}
.countdown-overlay p { margin: 0 0 6px; font-size: 13px; font-weight: 900; letter-spacing: .22em; opacity: .82; }
.countdown-number {
  font-family: "Fredoka", "Arial Rounded MT Bold", sans-serif;
  font-size: clamp(96px, 34vw, 180px); line-height: 1; font-weight: 900;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
  animation: countdownPop .62s cubic-bezier(.2,.9,.25,1);
}
@keyframes countdownPop {
  0% { transform: scale(.45); opacity: 0; }
  55% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.typed-guess-box { display: flex; width: 100%; gap: 8px; margin-top: 4px; }
.typed-guess-box .text-input { min-height: 48px; }
.small-button { border: 0; border-radius: 14px; padding: 0 17px; color: white; background: var(--purple); font-weight: 850; }
.turn-rail { display: flex; justify-content: center; gap: 8px; min-height: 42px; padding-top: 8px; overflow-x: auto; }
.turn-token { flex: 0 0 auto; min-width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid #e3deec; border-radius: 50%; color: var(--muted); background: white; font-size: 11px; font-weight: 900; }
.turn-token.active { color: white; border-color: var(--purple); background: var(--purple); box-shadow: 0 5px 14px rgba(108,76,255,.28); }
.turn-token.done { color: white; border-color: var(--mint); background: var(--mint); }

.round-screen { background: linear-gradient(160deg, #f8f5ff, #fff8e8); }
.round-icon { width: 92px; height: 92px; border-radius: 32px; background: #fff0b8; font-size: 48px; animation: pop-in .5s cubic-bezier(.2,1.5,.5,1); }
@keyframes pop-in { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }
.new-hint-card { position: relative; margin: 18px 0 16px; padding: 25px 20px; border: 2px solid #eee3bc; border-radius: 23px; background: white; box-shadow: 0 14px 40px rgba(112,84,28,.09); font-size: 19px; line-height: 1.42; font-weight: 820; }

.reveal-screen { padding-inline: 0; text-align: center; background: linear-gradient(160deg, #d4f3e9, #aee3df 52%, #ffd69f); }
.reveal-top { padding: 26px 24px 10px; }
.reveal-top h2 { margin-bottom: 6px; font-size: 31px; }
.answer-picture { position: relative; flex: 1; min-height: 270px; display: grid; place-items: center; overflow: hidden; margin: 3px 22px 17px; border-radius: 32px; background: linear-gradient(145deg, #a38aff, #6b48ee); box-shadow: var(--shadow); }
.answer-picture::before, .answer-picture::after { content: ""; position: absolute; width: 230px; height: 230px; border-radius: 50%; background: rgba(255,255,255,.12); }
.answer-picture::before { left: -100px; top: -80px; }
.answer-picture::after { right: -80px; bottom: -110px; }
.answer-emoji { position: relative; z-index: 1; display: grid; place-items: center; width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 18px 44px rgba(28,16,75,.25); font-size: 106px; animation: reveal-bounce .7s cubic-bezier(.2,1.6,.4,1); }
@keyframes reveal-bounce { from { transform: scale(.15) rotate(-20deg); opacity: 0; } }
.answer-copy { padding: 0 24px; }
.answer-copy p { margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.answer-copy h1 { margin-bottom: 9px; font-size: 43px; text-transform: capitalize; }
.single-score-card { margin: 16px auto 0; width: min(92%, 320px); padding: 12px 16px; border-radius: 18px; background: #f3f0ff; border: 2px solid #e5e0ff; color: var(--ink); }
.single-score-card p { margin-bottom: 2px; font-size: 11px; font-weight: 900; color: var(--purple); letter-spacing: .12em; }
.score-value { font-size: 43px; line-height: 1; color: var(--purple-dark); font-weight: 950; }
.single-score-card small { color: var(--muted); margin: 2px 0 0; display: block; }

/* Running score on the game screen: always on, styled like a slot-machine
   window so the climbing digits read as a payout. */
.live-score-card {
  margin: 8px auto 2px; padding: 6px 18px;
  display: inline-flex; align-items: baseline; gap: 10px;
  border-radius: 999px; border: 2px solid #e5e0ff; background: #f3f0ff;
  box-shadow: inset 0 2px 6px rgba(60, 30, 160, .09);
}
.live-score-card p { margin: 0; font-size: 10px; font-weight: 900; letter-spacing: .12em; color: var(--purple); }
.live-score-part { display: inline-flex; align-items: baseline; gap: 8px; }

/* End-of-game results screen. */
.summary-screen { height: var(--app-h); max-height: var(--app-h); min-height: 0; }
.summary-screen .screen-content { gap: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.summary-screen .bottom-action {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: auto;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(255,255,255,.88) 55%, rgba(255,255,255,0));
  backdrop-filter: blur(7px);
}
.summary-total { margin: 4px auto 14px; }
.summary-total p { margin: 0 0 2px; font-size: 11px; font-weight: 900; letter-spacing: .12em; color: var(--purple); }
.summary-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(100%, 360px); margin: 0 auto 14px; }
.summary-stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-radius: 14px; border: 2px solid #ded7f4; background: rgba(255,255,255,.66);
}
.summary-stat small { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.summary-stat strong { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.summary-review {
  width: min(100%, 360px); margin: 0 auto 12px; padding: 12px 14px;
  border-radius: 16px; background: var(--purple-soft); color: var(--purple-dark);
  font-size: 15px; font-weight: 700; line-height: 1.45;
}
.summary-screen .hof-entry { width: min(100%, 360px); margin: 0 auto; }
.live-score-part.total-part { padding-inline-start: 12px; border-inline-start: 2px solid rgba(15,154,157,.24); }
.live-score-part.total-part p { color: var(--muted); }
.live-score-part.total-part strong { color: var(--purple); }
.live-score-card strong {
  font-family: "Fredoka", "Arial Rounded MT Bold", sans-serif;
  font-size: 22px; line-height: 1; font-weight: 900; color: var(--purple-dark);
  font-variant-numeric: tabular-nums; transition: color .2s ease, transform .2s ease;
}
.live-score-card strong.rolling,
.score-value.rolling { color: #f59e0b; transform: scale(1.08); }
.live-score-card strong.rolled,
.score-value.rolled { animation: scorePop .55s ease; }
.score-value { font-variant-numeric: tabular-nums; transition: color .2s ease, transform .2s ease; }
@keyframes scorePop {
  0% { transform: scale(1.14); text-shadow: 0 0 18px rgba(245, 158, 11, .8); }
  100% { transform: scale(1); text-shadow: none; }
}
.hall-of-fame { margin: 16px 16px 0; text-align: left; }
.hall-of-fame h3 { margin: 0 0 10px; font-size: 20px; }
.hall-of-fame-list { display: grid; gap: 8px; max-height: 220px; overflow: auto; padding: 2px 4px 4px 0; }
.hof-item { display: grid; grid-template-columns: 30px 1fr auto; column-gap: 8px; align-items: baseline; padding: 8px 11px; border-radius: 12px; background: #faf8ff; border: 1px solid #e7e3f7; }
.hof-rank { color: var(--purple-dark); font-weight: 900; opacity: .8; }
.hof-name { font-weight: 800; }
.hof-score { justify-self: end; color: var(--purple); font-weight: 900; }
.hof-meta, .hof-status { grid-column: 1 / -1; color: var(--muted); font-size: 11px; line-height: 1.35; }
.home-hall-of-fame.hall-of-fame { margin: 12px 0 6px; }
.home-hall-of-fame.hall-of-fame .hall-of-fame-list { max-height: min(165px, 22dvh); }
.home-hall-of-fame .hof-item { padding: 6px 8px; }
/* Hidden below the desktop breakpoint; the left column shows it on wide screens. */
#homeHallOfFameSection { display: none; }
/* Dark-theme overrides so HoF cards read against the neon home screen background. */
#homeScreen .hall-of-fame h3 { color: rgba(220, 215, 255, 0.92); }
#homeScreen .hof-item { background: rgba(20, 8, 85, 0.7); border-color: rgba(115, 91, 255, 0.38); }
#homeScreen .hof-name { color: #fff; }
#homeScreen .hof-rank { color: #a89bff; opacity: 1; }
#homeScreen .hof-score { color: #ffcf45; }
#homeScreen .hof-meta, #homeScreen .hof-status { color: rgba(192, 191, 241, 0.52); }
#homeScreen .hall-of-fame-list .muted { color: rgba(192, 191, 241, 0.52); }
#homeScreen .hof-actions .compact { color: rgba(192, 191, 241, 0.7); border-color: rgba(115, 91, 255, 0.35); }
.hof-actions { display: flex; justify-content: flex-end; margin: 8px 0 2px; }
.hof-actions .compact { padding-inline: 10px; min-height: 30px; }
.reveal-actions { padding: 15px 22px 0; }
.reveal-auto-advance-note {
  display: block; margin: 4px 0 0; text-align: center;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  color: var(--purple-dark); opacity: .8; font-variant-numeric: tabular-nums;
}
/* Lives inside the pinned action bar, so naming yourself is always reachable
   no matter how much the answer, score and leaderboard fill the screen. */
.hof-entry { margin: 0 0 10px; width: 100%; text-align: start; }
.hof-entry .input-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.hof-entry-row { display: flex; gap: 8px; }
.hof-entry-row .text-input { flex: 1; min-width: 0; min-height: 44px; }
.hof-entry-row .small-button { flex: 0 0 auto; }
.hof-entry-status { display: block; margin-top: 5px; color: var(--purple-dark); font-size: 12px; font-weight: 800; }
.hof-entry input:disabled { opacity: .6; }
/* Once the score is filed the form collapses to its confirmation line. */
.hof-entry.saved .input-label, .hof-entry.saved .hof-entry-row { display: none; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 16px; border-radius: 3px; animation: confetti-fall 2.4s ease-in forwards; }
@keyframes confetti-fall { to { transform: translate3d(var(--drift), 105dvh, 0) rotate(720deg); } }

.game-dialog { width: min(calc(100% - 34px), 410px); border: 1px solid rgba(7,112,120,.22); border-radius: 28px; padding: 30px 25px 24px; color: var(--ink); background: linear-gradient(155deg, #d9f3eb, #bfe8e1); box-shadow: 0 30px 90px rgba(7,59,76,.32); text-align: center; }
.game-dialog::backdrop { background: rgba(27,19,56,.62); backdrop-filter: blur(5px); }
.dialog-close { position: absolute; right: 14px; top: 12px; border: 0; background: transparent; color: var(--muted); font-size: 29px; }
.game-dialog h2 { font-size: 30px; }
.game-dialog ol { display: grid; gap: 17px; margin: 22px 0 26px; padding: 0; list-style: none; text-align: left; }
.game-dialog li { display: flex; align-items: flex-start; gap: 13px; }
.game-dialog li > span { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--purple); font-weight: 900; }
.game-dialog li strong { display: block; margin-bottom: 3px; }
.game-dialog li p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.small-dialog { padding-top: 38px; }
.small-dialog .text-button { width: 100%; }
.share-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.share-actions button {
  width: 100%;
}
.mic-test-dialog .muted { margin-bottom: 14px; }
.mic-test-dialog .muted strong { color: var(--ink); }
.test-orb { margin-block: 10px 0; }
.test-result { display: grid; gap: 4px; margin: 16px 0; padding: 13px 16px; border-radius: 16px; color: var(--ink); background: #effbf7; }
.test-result small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.test-result strong { font-size: 19px; }
.test-result span { color: #22977f; font-size: 13px; font-weight: 850; }
.mic-test-dialog #finishMicTestButton { margin-top: 18px; }

html[dir="rtl"] .eyebrow,
html[dir="rtl"] .category-badge,
html[dir="rtl"] .hint-card-top,
html[dir="rtl"] .answer-copy p { letter-spacing: .035em; }
html[dir="rtl"] .input-label { text-align: right; }
html[dir="rtl"] .hint-card,
html[dir="rtl"] .game-dialog ol { text-align: right; }
html[dir="rtl"] .dialog-close { right: auto; left: 14px; }
html[dir="rtl"] .hint-card::after { right: auto; left: -4px; transform: rotate(-12deg); }
html[dir="rtl"] .game-dialog li > span { flex-shrink: 0; }
html[dir="rtl"] .answer-copy h1 { letter-spacing: -.035em; }

@media (max-height: 700px) {
  .home-art { height: 190px; }
  .mascot { inset: 30px 86px 16px; font-size: 70px; }
  .bubble-one { top: 10px; }.bubble-two { top: 0; }.bubble-three { bottom: -5px; }
  #homeScreen h1 { font-size: 48px; }
  .guess-orb { width: 105px; height: 105px; }
  .big-mic { width: 77px; height: 77px; font-size: 33px; }
  .hint-card p { margin-block: 8px 11px; font-size: 17px; }
  .turn-area { padding-top: 10px; }
  .game-screen { padding-top: max(8px, env(safe-area-inset-top)); padding-inline: 14px; }
  .game-header { min-height: 34px; padding-bottom: 6px; }
  .blur-reveal-art { width: 86px; height: 86px; }
  .blur-reveal-emoji { font-size: 44px; }
  .hint-card { padding: 12px 16px 10px; border-radius: 18px; }
  .hint-card p { margin-block: 6px 8px; font-size: 15px; line-height: 1.25; }
  .turn-area { justify-content: flex-start; padding: 7px 0 4px; }
  .turn-area h2 { margin-bottom: 2px; font-size: 24px; }
  .turn-area > .eyebrow, .turn-area .muted { margin-bottom: 3px; }
  .guess-orb { width: 88px; height: 88px; }
  .big-mic { width: 66px; height: 66px; font-size: 29px; }
  .mic-status { margin-top: 6px; font-size: 12px; }
  .auto-record-row { margin-top: 3px; }
  .auto-record-note { display: none; }
  .transcript-card { margin: 3px 0; padding: 6px 10px; }
  .guess-history { max-height: 56px; padding: 5px 8px; }
  .text-button.compact { padding: 5px; }
  .turn-rail { min-height: 32px; padding-top: 3px; }
  .turn-token { min-width: 30px; height: 30px; }
}

@media (max-width: 480px) {
  .app-shell, .screen { width: 100%; min-height: 100dvh; }
  .game-screen { height: 100dvh; overflow: hidden; padding: max(10px, env(safe-area-inset-top)) 14px max(8px, env(safe-area-inset-bottom)); }
  .game-content { overflow: hidden; }
  .game-header { min-height: 36px; padding-bottom: 7px; }
  .hint-card { padding: 13px 16px 11px; border-radius: 19px; }
  .hint-card p { margin: 7px 0 9px; font-size: 16px; line-height: 1.28; }
  .turn-area { justify-content: flex-start; padding: 9px 0 4px; }
  .turn-area h2 { margin-bottom: 3px; font-size: 26px; }
  .turn-area > .eyebrow, .turn-area .muted { margin-bottom: 4px; }
  .guess-orb { width: 100px; height: 100px; }
  .big-mic { width: 74px; height: 74px; font-size: 32px; }
  .mic-status { margin-top: 7px; }
  .auto-record-row { margin-top: 4px; }
  .auto-record-note { display: none; }
  .guess-history { max-height: 62px; }
  .turn-rail { min-height: 34px; padding-top: 4px; }
}

@media (min-width: 700px) {
  body { padding: 28px 0; }
  .app-shell, .screen { min-height: calc(100dvh - 56px); border-radius: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Neon home screen based on the selected mobile reference. */
#homeScreen {
  justify-content: flex-start;
  padding: max(10px, env(safe-area-inset-top)) 30px max(14px, env(safe-area-inset-bottom));
  color: #fff;
  background:
    radial-gradient(circle at 12% 18%, rgba(237,31,255,.32), transparent 26%),
    radial-gradient(circle at 86% 54%, rgba(45,55,255,.32), transparent 30%),
    radial-gradient(circle at 54% 86%, rgba(236,28,255,.18), transparent 24%),
    linear-gradient(160deg, #22006d 0%, #14006a 42%, #091065 100%);
  animation: screen-in .34s cubic-bezier(.2,.8,.2,1);
}

#homeScreen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image: radial-gradient(circle, #6e5dff 1px, transparent 1.6px);
  background-size: 15px 15px;
  mask-image: linear-gradient(to bottom, #000, transparent 50%);
}

#homeScreen > * { position: relative; z-index: 1; }
#homeScreen .home-art { width: calc(100% + 38px); height: clamp(255px, 38dvh, 355px); margin: -8px -19px -1px; overflow: hidden; border-radius: 28px; filter: drop-shadow(0 18px 24px rgba(5,0,55,.34)); }
#homeScreen .home-art img,
#homeScreen .home-art .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; object-fit: cover; object-position: center 47%;
}
#homeScreen .home-art .hero-video {
  z-index: 1;
  transition: opacity .7s ease;
}
#homeScreen .home-art .hero-video.hero-done { opacity: 0; pointer-events: none; }
/* Typed sign-off over the last frame of the intro clip. */
#homeScreen .home-art .hero-caption {
  position: absolute; inset: auto 0 14px; z-index: 2;
  display: none; margin: 0; padding: 0 16px;
  color: #fff; text-align: center;
  font-family: "Fredoka", "Arial Rounded MT Bold", sans-serif;
  font-size: clamp(30px, 9vw, 46px); line-height: 1; letter-spacing: -.03em;
  text-shadow: 0 4px 0 #311072, 0 10px 22px rgba(0,0,0,.55);
  transition: opacity .7s ease;
}
#homeScreen .home-art .hero-caption.typing { display: block; }
#homeScreen .home-art .hero-caption.hero-done { opacity: 0; }
#homeScreen .home-art .hero-caret {
  display: inline-block; width: .07em; height: .85em; margin-left: .06em;
  background: #ffc928; vertical-align: -.08em;
  animation: heroCaretBlink .6s steps(1, end) infinite;
}
@keyframes heroCaretBlink { 50% { opacity: 0; } }
#homeScreen .eyebrow { align-self: center; margin: 0 0 4px; padding: 5px 16px; border: 1px solid rgba(126,98,255,.62); border-radius: 99px; color: #dcd7ff; background: rgba(24,8,108,.62); box-shadow: 0 0 18px rgba(90,64,255,.28); font-size: 9px; letter-spacing: .22em; }
#homeScreen h1 { margin: 0 0 12px; font-family: "Fredoka", "Arial Rounded MT Bold", sans-serif; font-size: clamp(52px, 16vw, 72px); line-height: .94; letter-spacing: -.06em; text-shadow: 0 6px 0 #311072, 0 12px 24px rgba(0,0,0,.42); }
#homeScreen .title-say { color: #fff; }
#homeScreen .title-what { color: #ff3d9c; background: linear-gradient(#ff6bc5, #ff2d85); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#homeScreen .title-punct { color: #ffc928; background: linear-gradient(#ffe548, #ff9e19); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

#homeScreen .game-options { width: 100%; gap: 10px; margin: 0 0 10px; transform: none; }
/* Language and Level sit side by side; the voice list needs the full width for
   names like "Microsoft Aria Online (Natural)". */
#homeScreen .game-option { position: relative; grid-template-columns: 36px minmax(0,1fr); grid-template-rows: 17px 28px; gap: 1px 7px; min-width: 0; padding: 10px 9px; border: 1px solid rgba(115,91,255,.7); border-radius: 17px; color: white; background: linear-gradient(145deg, rgba(39,16,125,.94), rgba(16,14,97,.94)); box-shadow: inset 0 0 18px rgba(103,73,255,.12), 0 8px 18px rgba(2,0,40,.28); }
#homeScreen .game-option .option-icon { grid-row: 1 / 3; align-self: center; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 12px; color: white; font-size: 17px; box-shadow: inset 0 1px 4px rgba(255,255,255,.34), 0 0 15px currentColor; }
#homeScreen .game-option .language-icon { background: linear-gradient(145deg, #3475ff, #264ed9); }
#homeScreen .game-option .level-icon { background: linear-gradient(145deg, #ffc32f, #ff8d08); }
#homeScreen .game-option > span { color: #bfc2ef; font-size: 10px; line-height: 18px; letter-spacing: 0; text-transform: none; }
#homeScreen .game-option select { width: 100%; min-width: 0; min-height: 28px; border: 0; padding: 0 16px 0 0; color: #fff; background: transparent; box-shadow: none; font-size: 13px; line-height: 28px; }
#homeScreen .game-option select option { color: #12065f; background: #fff; }
#homeScreen .intro { margin: 0 auto 10px; max-width: 330px; color: #e6e4ff; font-size: 13px; line-height: 1.35; }
#homeScreen .primary-button { min-height: 58px; border: 2px solid rgba(255,211,87,.62); border-radius: 22px; background: linear-gradient(105deg, #ffad22, #ff675b 44%, #fa228f); box-shadow: inset 0 -5px 0 rgba(173,19,84,.36), 0 0 24px rgba(255,47,145,.43); font-family: "Fredoka", sans-serif; font-size: 21px; }
#homeScreen .mic-test-button { min-height: 51px; margin-top: 10px; border: 2px solid #734aff; border-radius: 21px; color: #fff; background: rgba(25,10,107,.76); box-shadow: inset 0 -3px 0 rgba(71,38,198,.52), 0 0 17px rgba(82,53,255,.28); font-size: 15px; }
#homeScreen .mic-test-button i { width: 34px; height: 34px; display: inline-grid; place-items: center; margin-inline-end: 9px; border-radius: 50%; background: linear-gradient(145deg, #893dff, #4d1acb); box-shadow: 0 0 13px #8f52ff; }
#homeScreen #howButton { display: inline-flex; align-self: center; align-items: center; gap: 8px; padding: 10px 14px 5px; color: #45d4ff; font-size: 14px; }
#homeScreen #howButton i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #b7eaff; background: linear-gradient(145deg, #3475ff, #1244b4); box-shadow: 0 0 13px rgba(38,137,255,.75); }
#homeScreen .home-corner-actions { position: absolute; z-index: 3; inset-inline: 15px; bottom: max(15px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; pointer-events: none; }
#homeScreen .home-corner-actions button { pointer-events: auto; min-width: 48px; height: 48px; border: 1px solid rgba(79,59,196,.34); border-radius: 50%; color: #fff; background: rgba(8,5,75,.76); box-shadow: 0 8px 22px rgba(0,0,35,.3); font-weight: 800; }
#homeScreen #shareGameButton.shared { color: #45f1d4; box-shadow: 0 0 20px rgba(69,241,212,.65); }
#homeScreen .app-version { margin-top: 0; padding-bottom: 4px; color: rgba(192,191,241,.52); font-size: 9px; }

@media (max-height: 760px) {
  #homeScreen .home-art { height: 285px; }
  #homeScreen h1 { font-size: 56px; }
  #homeScreen .game-option { padding-block: 7px; }
  #homeScreen .intro { font-size: 12px; }
  #homeScreen .primary-button { min-height: 53px; }
  #homeScreen .mic-test-button { min-height: 46px; margin-top: 7px; }
  #homeScreen #howButton { padding-top: 6px; }
}

/* ==========================================================================
   Fit the viewport
   The shell clips its overflow, so anything taller than the screen used to be
   cut off with no way to reach it. Each screen now owns its scrolling as a
   safety valve, and the short-screen rules below keep the home screen inside
   small phones (360x640) so the valve is never actually needed.
   ========================================================================== */
/* --app-h is the height the game is allowed to occupy. It starts as the
   smallest viewport height (toolbars showing) rather than 100dvh, because a
   phone's dynamic viewport can report more room than is actually on screen and
   push the bottom button out of reach. app.js then overwrites it with the real
   measured height, so the fit is correct on every device. */
:root { --app-h: 100vh; }
@supports (height: 100svh) { :root { --app-h: 100svh; } }

.screen { overflow-y: auto; overscroll-behavior: contain; }

/* Phones: every screen is exactly one visible viewport tall. Flexible middles
   shrink and scroll inside themselves so the bottom action button - "Next
   question", "New game", "Add player" - is always on screen. */
@media (max-width: 699px) {
  body { min-height: var(--app-h); }
  .app-shell, .screen { height: var(--app-h); max-height: var(--app-h); min-height: 0; }
  .screen-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .bottom-action { flex: 0 0 auto; }
  .game-content { min-height: 0; }
  .turn-area { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  /* Typing is a primary way to answer, so the input stays pinned to the bottom
     of the turn area even when the hint, history and transcript fill it up. */
  .turn-area .typed-guess-box {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding-block: 5px;
    background: linear-gradient(to top, rgba(233,246,243,.94) 62%, rgba(233,246,243,0));
    backdrop-filter: blur(6px);
  }
}

/* Very short phone viewports (small handsets, or a phone in landscape with
   toolbars showing): compress the setup screens so their cards and buttons
   stay on screen instead of relying on the scroll fallback. */
@media (max-width: 699px) and (max-height: 560px) {
  .mini-icon, .round-icon { width: 56px; height: 56px; margin-bottom: 12px; border-radius: 20px; font-size: 28px; }
  .player-mode-choices { gap: 10px; margin: 14px auto 4px; }
  .player-mode-button { min-height: 82px; padding: 11px 15px; }
  .player-mode-button strong { font-size: 18px; }
  .player-mode-button small { font-size: 12px; }
  .player-mode-button .mode-icon { width: 44px; height: 44px; font-size: 24px; }
  .ready-orbit { width: 140px; height: 122px; margin-bottom: 14px; }
  .ready-orbit b { font-size: 46px; }
  .name-orb-wrap { margin: 14px 0 10px; }
  h2 { font-size: clamp(24px, 7vw, 32px); margin-bottom: 8px; }
  /* The reveal carries the most content of any screen; on a very short phone
     the illustration and the leaderboard both give way so the name row and the
     action button stay reachable. */
  .reveal-screen .answer-picture { min-height: min(110px, 14dvh); }
  .reveal-screen .answer-emoji { width: min(120px, 15dvh); height: min(120px, 15dvh); font-size: min(70px, 9dvh); }
  .reveal-screen .hall-of-fame-list,
  .reveal-screen:has(.hof-entry:not(.hidden)) .hall-of-fame-list { max-height: min(74px, 9dvh); }
  .reveal-screen .hall-of-fame { margin-top: 10px; }
  .reveal-screen .hall-of-fame h3 { margin-bottom: 6px; font-size: 16px; }
  .reveal-top { padding-block: 0 4px; }
  .single-score-card { margin-top: 10px; padding: 8px 12px; }
  .hof-entry { margin-top: 8px; }
}

/* Extremely short phones (around 480px tall). The illustration is decorative
   and the answer is spelled out in text anyway, so it steps aside rather than
   letting the pinned action button cover the name field. */
@media (max-width: 699px) and (max-height: 520px) {
  .reveal-screen .answer-picture { display: none; }
  .reveal-screen .reveal-top { padding-block: 0 2px; }
  .reveal-screen .reveal-top h2 { font-size: 21px; }
  .reveal-screen .answer-copy h1 { font-size: 29px; margin-bottom: 4px; }
  .reveal-screen .single-score-card { margin-top: 8px; padding: 6px 10px; }
  .reveal-screen .score-value { font-size: 24px; }
  .reveal-screen .reveal-actions { padding-top: 8px; }
}

/* Tablets keep the 28px framed-card inset from the 700px breakpoint. */
@media (min-width: 700px) and (max-width: 899px) {
  .app-shell, .screen {
    height: calc(var(--app-h) - 56px);
    max-height: calc(var(--app-h) - 56px);
    min-height: 0;
  }
  .screen-content { min-height: 0; overflow-y: auto; }
  .turn-area { min-height: 0; overflow-y: auto; }
}

/* Reveal screen: once a score card and a full Hall of Fame appear, the content
   outgrew the phone and pushed the "Next question" button past the bottom of
   the clipped shell, where it could not be reached at all. The illustration now
   shrinks, the Hall of Fame scrolls, and the action button stays pinned. */
.reveal-screen { min-height: 0; height: var(--app-h); max-height: var(--app-h); }
.reveal-screen .answer-picture { flex: 1 1 auto; min-height: min(150px, 18dvh); }
.reveal-screen .answer-emoji { width: min(190px, 21dvh); height: min(190px, 21dvh); font-size: min(106px, 12dvh); }
.reveal-screen .hall-of-fame-list { max-height: min(160px, 16dvh); }
/* The name row costs vertical space, so the list yields more of it on phones. */
.reveal-screen:has(.hof-entry:not(.hidden)) .hall-of-fame-list { max-height: min(120px, 12dvh); }
.reveal-screen .reveal-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: auto;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(255,255,255,.86) 55%, rgba(255,255,255,0));
  backdrop-filter: blur(7px);
}

@media (max-height: 660px) {
  #homeScreen { padding-inline: 26px; }
  #homeScreen .home-art { height: clamp(148px, 23dvh, 200px); }
  #homeScreen h1 { font-size: clamp(38px, 12vw, 50px); margin-bottom: 8px; }
  #homeScreen .eyebrow { margin-bottom: 2px; }
  #homeScreen .game-options { margin-bottom: 7px; }
  #homeScreen .intro { margin-bottom: 7px; font-size: 12px; }
  #homeScreen .primary-button { min-height: 48px; font-size: 18px; }
  #homeScreen .mic-test-button { min-height: 42px; margin-top: 6px; font-size: 14px; }
  #homeScreen #howButton { padding: 5px 14px 2px; }
}

/* ==========================================================================
   Desktop layout
   Below 900px the game stays a single phone-shaped column. From 900px up it
   becomes a real two-column desktop layout that fills the window: art beside
   copy on the home and reveal screens, hint card beside the microphone during
   play. Every screen is exactly one viewport tall, so nothing scrolls.
   ========================================================================== */
@media (min-width: 900px) {
  /* Drop the 28px framed-card inset from the 700px breakpoint: at this size
     the game goes edge to edge, so the shell is exactly one viewport tall. */
  body { padding: 0; }
  .app-shell { width: 100%; max-width: none; height: 100dvh; min-height: 0; border-radius: 0; }
  .screen {
    height: 100dvh;
    min-height: 0;
    border-radius: 0;
    padding: clamp(20px, 3vh, 38px) clamp(30px, 4vw, 70px) clamp(18px, 2.6vh, 34px);
  }

  /* --- Home: hero art left, everything else in a column on the right ---
     Scoped to .active: a bare #homeScreen display rule outranks the
     .screen { display: none } that hides inactive screens. */
  #homeScreen.active {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 480px);
    grid-auto-rows: min-content;
    align-content: center;
    justify-content: center;
    column-gap: clamp(36px, 5vw, 88px);
    padding-inline: clamp(40px, 6vw, 120px);
    text-align: start;
  }
  #homeScreen > :not(.home-art):not(.home-corner-actions) { grid-column: 2; width: 100%; }
  #homeScreen .home-art {
    grid-column: 1;
    grid-row: 1 / span 24;
    align-self: center;
    width: 100%;
    height: min(76dvh, 620px);
    margin: 0;
    border-radius: 34px;
  }
  #homeScreen #homeHallOfFameSection { display: block; }
  #homeScreen .eyebrow { justify-self: start; width: auto; }
  #homeScreen h1 { font-size: clamp(58px, 5vw, 84px); margin-bottom: 16px; }
  #homeScreen .game-options { margin-bottom: 14px; }
  #homeScreen .intro { margin: 0 0 16px; max-width: none; font-size: 15px; }
  #homeScreen .app-version { text-align: start; }
  #homeScreen #howButton { align-self: start; justify-self: start; width: auto; }

  /* --- Setup screens: a centred column, modes side by side --- */
  #playerCountScreen .screen-content,
  #namesScreen .screen-content,
  #readyScreen .screen-content,
  #roundScreen .screen-content { width: min(100%, 780px); margin-inline: auto; }
  .player-mode-choices { grid-template-columns: 1fr 1fr; width: min(100%, 700px); }
  .bottom-action { width: min(100%, 520px); margin-inline: auto; }
  #namesScreen .name-orb-wrap { margin-block: 18px 14px; }

  /* --- Game: hint card and microphone side by side --- */
  .game-content {
    flex-direction: row;
    align-items: stretch;
    gap: clamp(28px, 3vw, 56px);
    width: min(100%, 1300px);
    margin-inline: auto;
    min-height: 0;
  }
  .game-content > .hint-card {
    flex: 1 1 44%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 3vw, 50px);
    border-radius: 32px;
  }
  .game-content > .hint-card p { margin: 18px 0 22px; font-size: clamp(23px, 2.2vw, 34px); }
  .game-content > .hint-card::after { font-size: 250px; bottom: -70px; }
  .turn-area {
    flex: 1 1 56%;
    min-height: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .turn-area h2 { font-size: clamp(30px, 2.7vw, 44px); }
  .turn-area .muted { font-size: 15px; }
  .guess-orb { width: 148px; height: 148px; margin-top: 10px; }
  .big-mic { width: 106px; height: 106px; font-size: 47px; }
  .mic-status { font-size: 15px; }
  .reply-timer { width: min(100%, 360px); }
  .auto-record-row { width: min(100%, 420px); }
  .auto-record-note { display: block; }
  .guess-history { width: min(100%, 460px); max-height: 108px; }
  .transcript-card { min-width: 260px; }
  .typed-guess-box { width: min(100%, 430px); }
  .turn-rail { min-height: 48px; padding-top: 12px; }
  .game-header { padding-bottom: 16px; }

  /* --- Reveal: answer picture left, score and Hall of Fame right --- */
  #revealScreen.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 530px);
    grid-auto-rows: min-content;
    align-content: center;
    justify-content: center;
    column-gap: clamp(32px, 4vw, 76px);
    padding-inline: clamp(36px, 5vw, 90px);
    text-align: start;
  }
  #revealScreen > :not(.answer-picture):not(.confetti) {
    grid-column: 2;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }
  #revealScreen .answer-picture {
    grid-column: 1;
    grid-row: 1 / span 24;
    align-self: center;
    height: min(74dvh, 610px);
    min-height: 0;
    margin: 0;
  }
  #revealScreen .answer-emoji {
    width: min(44vh, 290px);
    height: min(44vh, 290px);
    font-size: min(25vh, 165px);
  }
  #revealScreen .reveal-top { padding-block: 0 10px; }
  #revealScreen .answer-copy h1 { font-size: clamp(46px, 4vw, 66px); }
  #revealScreen .hall-of-fame { margin: 16px 0 0; }
  #revealScreen .hall-of-fame-list { max-height: 24dvh; }
  /* Desktop always fits, so the pinned bar needs no fade behind it. */
  #revealScreen .reveal-actions { padding-block: 18px 0; background: none; backdrop-filter: none; }
}

/* Short desktop windows (e.g. 1024x600, or a laptop with lots of browser
   chrome): keep a fully-loaded round inside the viewport without scrolling. */
@media (min-width: 900px) and (max-height: 700px) {
  .guess-orb { width: 112px; height: 112px; margin-top: 4px; }
  .big-mic { width: 82px; height: 82px; font-size: 36px; }
  .auto-record-note { display: none; }
  .guess-history { max-height: 78px; }
  .game-content > .hint-card p { margin: 12px 0 14px; font-size: clamp(19px, 1.9vw, 26px); }
  .turn-area h2 { font-size: clamp(26px, 2.3vw, 34px); }
  .mic-status { margin-top: 8px; }
  .turn-rail { min-height: 40px; padding-top: 8px; }
}