/* Shared party theme. Loaded after the game and native layouts. */
:is(.landing, .controller-page, .screen-page) {
  --ink: #17132b;
  --paper: #fff9eb;
  --muted: #bab6cd;
  --line: #ffffff24;
  color: var(--paper);
  background: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
:is(.landing, .controller-page, .screen-page) .muted { color: var(--muted); }
:is(.landing, .controller-page, .screen-page) :is(button, a, input, select) { touch-action: manipulation; }
:is(.landing, .controller-page, .screen-page) :is(button, a, input, select):focus-visible {
  outline: 3px solid #fff9eb;
  outline-offset: 5px;
}
:is(.landing, .controller-page, .screen-page) button { cursor: pointer; }
:is(.landing, .controller-page, .screen-page) button:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
:is(.landing, .controller-page, .screen-page) .brand { font-size: 1.5rem; letter-spacing: -.06em; }
:is(.landing, .controller-page, .screen-page) .brand-mark {
  width: 2.5rem;
  height: 2.7rem;
  border-radius: 10px;
  font-size: 1.4rem;
  box-shadow: 3px 3px 0 #8267ff;
}
.brand-dot { color: var(--lime); }
:is(.landing, .controller-page) .button {
  min-height: 58px;
  border-radius: 18px;
  gap: 1rem;
  padding: 1rem 1.25rem;
  line-height: 1.35;
  transition: transform .16s, box-shadow .16s, background .16s;
}
:is(.landing, .controller-page) .button.primary {
  background: var(--lime);
  color: var(--ink);
  border: 1px solid #e7ff9c;
  box-shadow: 0 5px 0 #879f2c, 0 12px 28px #0003;
}
:is(.landing, .controller-page) .button.ghost { background: #ffffff07; border-color: #ffffff38; }
:is(.landing, .controller-page) .button.primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #879f2c; }
.party-tag, .game-facts { font-size: .75rem; font-weight: 700; }
.party-tag { border: 1px solid #ffffff30; border-radius: 999px; padding: .6rem 1rem; color: #d3cde8; }

/* A little deck of real HTML/CSS cards: crisp at phone and TV resolutions. */
.landing { background: radial-gradient(ellipse at 80% 25%, #4f328457, transparent 50%), #17132b; }
.landing-wrap { max-width: 1440px; padding: 2rem 5vw 1.2rem; }
.landing-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.landing .hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: center; padding: 4.5rem 0 3.8rem; }
.landing .hero::after { content: none; }
.hero-content { position: relative; z-index: 1; min-width: 0; }
.landing .eyebrow { font-size: .72rem; letter-spacing: .12em; }
.landing .hero h1 { font-size: clamp(5rem, 8.8vw, 8.5rem); line-height: .95; letter-spacing: -.075em; margin: 1.2rem 0 1.6rem; }
.landing .hero h1 em { font-weight: 800; font-style: normal; }
.landing .hero-copy { color: #c4bed5; font-size: 1rem; line-height: 1.75; max-width: 470px; }
.game-facts { display: flex; flex-wrap: wrap; gap: .6rem 1rem; color: #e5dfef; margin: 1.4rem 0; }
.game-facts span + span::before { content: '✦'; margin-right: 1rem; color: var(--pink); }
.landing .hero-actions { flex-direction: column; max-width: 420px; gap: .9rem; margin-top: 1.8rem; }
.landing .hero-actions .button small { font-size: .76rem; color: #c4bed5; }
.landing .hero-actions .button.primary small { color: #414d1c; }
.hero-deck { position: relative; height: 470px; width: 90%; justify-self: center; min-width: 0; isolation: isolate; }
.hero-deck::before { content: ''; position: absolute; inset: 5% 0; border: 1px solid #bca4ff20; border-radius: 50%; }
.demo-card {
  position: absolute;
  width: 48%;
  height: 66%;
  top: 13%;
  border: 2px solid #fff9eb;
  border-radius: 22px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  box-shadow: 0 18px 0 #0002, 0 30px 45px #0004;
}
.demo-card small { font: 500 .58rem 'DM Mono', monospace; letter-spacing: .06em; }
.demo-card strong { font-size: 1.15rem; letter-spacing: -.04em; }
.demo-card > b { font-size: 2.8rem; letter-spacing: -.06em; }
.demo-symbol { flex: 1; display: grid; place-items: center; font-size: 6rem; line-height: 1; }
.demo-past { background: #e0f3a2; left: 0; transform: rotate(-17deg) translateY(22px); }
.demo-future { background: #ff9cbb; right: -1%; transform: rotate(17deg) translateY(22px); }
.demo-mystery { background: #9171f5; left: 27%; top: 10%; transform: rotate(-5deg); z-index: 2; color: #fff9eb; }
.demo-mystery::after { content: ''; position: absolute; inset: 8px; border: 1px dashed #ffffff50; border-radius: 15px; pointer-events: none; }
.demo-mystery .demo-symbol { font-size: 9rem; font-weight: 800; color: var(--lime); text-shadow: 5px 5px 0 #17132b; }
.demo-mystery > b { font-size: .75rem; letter-spacing: 0; margin-top: .45rem; }
.deck-spark { position: absolute; color: var(--lime); font-size: 4rem; line-height: 1; }
.spark-one { right: -2%; top: 0; transform: rotate(12deg); }
.spark-two { bottom: 0; left: 5%; color: var(--pink); font-size: 3rem; }
.deck-sticker { position: absolute; bottom: 6%; left: 26%; z-index: 3; padding: .8rem 1rem; border-radius: 9px; background: var(--lime); color: var(--ink); font-size: .85rem; font-weight: 800; transform: rotate(-6deg); box-shadow: 4px 5px 0 #0003; white-space: nowrap; }
.landing .steps { gap: 1rem; margin: 0; }
.landing .steps article, .landing .steps article:first-child { display: flex; align-items: flex-start; gap: 1rem; padding: 1.4rem; border-radius: 20px; background: #ffffff06; box-shadow: inset 0 0 0 1px #ffffff20; }
.landing .steps b { flex: 0 0 2.5rem; margin: 0; }
.landing .steps span { font-size: 1rem; }
.landing .steps p { font-size: .8rem; line-height: 1.55; color: #bab6cd; }
.landing-footer { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.7rem; color: #aba4c0; font-size: .7rem; }
.landing-footer span:last-child { letter-spacing: .08em; }

/* Phone: one scroll surface, safe-area spacing, readable touch controls. */
.controller-page .phone-shell {
  width: min(100%, 560px);
  height: 100dvh;
  padding: max(1.2rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 100% 0%, #7550b830, transparent 52%), #17132b;
  scrollbar-gutter: auto;
}
.controller-page .phone-shell > header { min-height: 44px; gap: .5rem; padding-bottom: .7rem; }
.controller-page .brand { font-size: 1.35rem; }
.controller-page .brand-mark { width: 2rem; height: 2.2rem; font-size: 1.1rem; }
.controller-page .tiny-status { font-size: .68rem; color: #bdb7cd; border: 1px solid #ffffff25; padding: .5rem .65rem; border-radius: 999px; white-space: nowrap; }
.controller-page .tiny-status.online { color: var(--lime); background: #d7ff450a; }
.controller-page .phone-view.active { min-height: calc(100dvh - 6rem); flex: 0 0 auto; padding-top: 1.5rem; padding-bottom: 1.5rem; gap: 0; }
.controller-page .phone-view h1, .controller-page .phone-view h2 { font-size: clamp(2.6rem, 11vw, 3.9rem); line-height: 1; letter-spacing: -.065em; overflow-wrap: anywhere; }
.controller-page .phone-view h1 em { font-style: normal; color: var(--lime); }
.controller-page .phone-view :is(h1, h2)[tabindex="-1"]:focus { outline: none; }
.controller-page .muted { font-size: .92rem; line-height: 1.6; }
.controller-page .step-label { font-size: .7rem; letter-spacing: .09em; }
.controller-page #joinView.active { position: relative; padding-top: 5rem; }
.phone-party-art { position: absolute; right: .8rem; top: 1.1rem; width: 110px; height: 77px; }
.phone-party-art span { position: absolute; display: grid; place-items: center; width: 43px; height: 60px; top: 5px; border: 1px solid #ffffffb0; border-radius: 7px; background: #e0f3a2; color: var(--ink); font-size: .65rem; font-weight: 800; transform: rotate(-18deg); }
.phone-party-art span:nth-child(2) { left: 30px; top: 0; background: #9171f5; color: var(--lime); font-size: 2rem; transform: rotate(-3deg); z-index: 1; }
.phone-party-art span:nth-child(3) { left: 60px; background: #ff9cbb; transform: rotate(17deg); }
.phone-party-art i { position: absolute; left: -27px; top: 4px; color: var(--lime); font-size: 1.8rem; font-style: normal; }
.controller-page #joinView h1 { margin-top: .55rem; margin-bottom: .7rem; }
.controller-page .join-intro { margin: 0 0 1.4rem; }
.controller-page .solo-button { border-radius: 18px; text-align: left; }
.controller-page .solo-button small { color: #414d1c; font-size: .76rem; }
.controller-page .solo-button b:last-child { color: var(--ink); }
.controller-page .mode-divider { color: #b7afca; font-size: .66rem; margin: 1.7rem 0 1rem; gap: .7rem; }
.controller-page .mode-divider::before, .controller-page .mode-divider::after { background: #ffffff25; }
.controller-page #joinView form { margin-top: 0; }
.controller-page .phone-view label { color: #c6bfd6; font-size: .72rem; letter-spacing: .07em; }
.controller-page .phone-view :is(input, select) { min-height: 52px; font-size: 16px; background-color: #ffffff08; border-color: #ffffff30; }
.controller-page .room-input { font-size: 2.8rem !important; min-height: 82px; border-color: #9784bf80; color: var(--lime); background: #0f0c2080; letter-spacing: .3em; padding-left: .3em; margin-bottom: 1rem; }
.controller-page .room-input::placeholder { color: #a59bbf; }
.controller-page .form-error { font-size: .85rem; line-height: 1.4; }
.controller-page .form-error:empty { min-height: 0; margin: 0; }
.controller-page .mode-cards { margin-top: 1rem; gap: 1rem; }
.controller-page .mode-card { grid-template-columns: 48px 1fr; gap: .35rem .9rem; padding: 1.25rem 2.5rem 1.25rem 1.1rem; border: 1px solid #ffffff30; background: #ffffff07; border-radius: 20px; }
.controller-page .mode-card.featured { border-color: #a78af0; background: linear-gradient(125deg, #6945b958, #302340); }
.controller-page .mode-card .mode-icon { grid-row: 1 / 4; align-self: center; display: grid; place-items: center; width: 46px; height: 54px; border-radius: 11px; background: #ff9cbb; color: var(--ink); font-size: 1.8rem; transform: rotate(-6deg); }
.controller-page .mode-card.featured .mode-icon { background: var(--lime); }
.controller-page .mode-kicker { color: #d1bcff; font: 500 .62rem 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.controller-page .mode-card b { font-size: 1.12rem; }
.controller-page .mode-card > span:not(.mode-icon) { font-size: .8rem; color: #c9c2d9; }
.controller-page .mode-card i { right: .9rem; }
.controller-page .player-input-row { grid-template-columns: 32px minmax(0, 1fr) 44px; }
.controller-page .player-input-row span { color: var(--ink); background: var(--lime); font-size: .75rem; border-radius: 10px; }
.controller-page .player-input-row:nth-child(even) span { background: #b69aff; }
.controller-page .player-input-row:nth-child(3n) span { background: #ff9cbb; }
.controller-page .player-input-row button { width: 44px; height: 44px; color: #e2dbea; font-size: 1.4rem; }
.controller-page .difficulty-picker { margin-block: 1rem; }
.controller-page .difficulty-picker > span { color: #c6bfd6; font-size: .75rem; }
.controller-page .difficulty-picker > div { gap: .45rem; }
.controller-page .difficulty-option { min-height: 66px; padding: .65rem .4rem; border-color: #ffffff25; border-radius: 14px; background: #ffffff06; }
.controller-page .difficulty-option b { font-size: .8rem; }
.controller-page .difficulty-option small { font-size: .64rem; color: #bab6cd; line-height: 1.35; }
.controller-page .difficulty-option.selected { background: #d7ff4518; border: 2px solid var(--lime); }
.controller-page .difficulty-option.selected small { color: #e0eabc; }
.controller-page .turn-head { align-items: center; justify-content: flex-start; gap: .7rem; }
.controller-page .turn-head > div { min-width: 0; width: 100%; }
.controller-page .turn-name { display: flex; align-items: center; gap: .65rem; margin: .4rem 0 1rem; }
.controller-page .turn-head .turn-name h2 { flex: 0 1 auto; min-width: 0; margin: 0; font-size: clamp(2rem, 9vw, 3rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.controller-page .turn-name .token-pile { align-self: center; line-height: 1; }
.controller-page .token-count { flex-shrink: 0; }
.controller-page .virtual-timeline { flex: 0 0 210px; min-height: 210px; padding: 1rem .65rem; background: radial-gradient(ellipse at bottom, #7051a336, transparent 80%), #100d20; border: 1px solid #ffffff25; border-radius: 22px; }
.controller-page .timeline-card, .controller-page .timeline-gap.provisional-card { flex-basis: 118px; width: 118px; min-height: 164px; height: 164px; align-self: center; border-radius: 13px; }
.controller-page .timeline-card { background: linear-gradient(165deg, #fff9eb 64%, #d7ff45 64%); transform: rotate(-2deg); gap: .35rem; }
.controller-page .timeline-card[data-type="tv"] { background: linear-gradient(165deg, #fff9eb 64%, #c1a7ff 64%); }
.controller-page .timeline-card strong { font-size: .78rem; line-height: 1.2; }
.controller-page .timeline-card small { font-size: .58rem; color: #514967; }
.controller-page .timeline-card span { font-size: 1.6rem; margin-top: .2rem; }
.controller-page .timeline-gap.provisional-card { background: repeating-linear-gradient(135deg, transparent 0 12px, #ffffff08 12px 14px), #6046a0; }
.controller-page .timeline-gap.provisional-card small { font-size: .58rem; padding: .45rem .2rem; }
.controller-page .timeline-gap.provisional-card strong { font-size: .75rem; }
.controller-page .timeline-gap.provisional-card b { color: #e4d7ff80; font-size: 4.5rem; }
.controller-page .timeline-gap.provisional-card.challenge { background: #662f59; border-color: var(--pink); }
.controller-page .carousel-tools { margin-block: .75rem; color: #c7c0d8; font-size: .67rem; }
.controller-page .carousel-tools button { width: 54px; height: 50px; min-width: 54px; background: #ffffff0d; border: 1px solid #ffffff40; border-radius: 15px; font-size: 1.7rem; }
.controller-page .token-actions button { display: grid; grid-template-columns: minmax(0, auto) auto; align-items: center; justify-content: center; gap: .45rem; min-height: 64px; color: var(--paper); font-size: .82rem; background: #ffffff08; border-color: #ffffff30; }
.controller-page .token-actions button > span { line-height: 1.35; }
.controller-page .token-actions button small.token-pile { margin: 0; line-height: 1; align-self: center; }
.controller-page .phone-bonus-label { gap: .5rem; flex-wrap: wrap; }
.controller-page .phone-bonus-label :is(b, span) { font-size: .7rem; }
.controller-page .exact-guesses { grid-template-columns: minmax(0, 1fr) 100px; margin: 1.2rem 0; }
.controller-page #guessView .exact-guesses { grid-template-columns: minmax(0, 1fr); }
.controller-page .guess-view #submitGuess { margin: 0 0 1.5rem; flex-shrink: 0; }
.screen-page #tvSubmitGuess { width: 100%; min-height: 6vh; }
.controller-page .bottom-action { margin-top: 1.5rem; }
.controller-page .local-player-wrap { width: 100%; margin: 0 0 1.5rem; border-radius: 18px; flex-shrink: 0; max-height: none; }
.controller-page .scanner { border-radius: 22px; background: #211b35; border-color: #ffffff30; flex-shrink: 0; }
.controller-page .camera-button { min-height: 52px; background: var(--lime); color: var(--ink); font-weight: 700; border: 0; }
.controller-page .inline-form { gap: .5rem; }
.controller-page .inline-form input { min-width: 0; }
.controller-page .inline-form button { flex-shrink: 0; border-radius: 14px; }
.controller-page #revealView .phone-year { font-size: clamp(5rem, 24vw, 7rem); margin: .7rem 0; text-shadow: 4px 5px 0 #8267ff60; }
.controller-page :is(.phone-scoreboard, .round-scoreboard) { max-height: none; overflow: visible; }
.controller-page :is(.phone-scoreboard, .round-scoreboard) > div { padding: 1rem .7rem; font-size: .88rem; gap: .7rem; }
.controller-page :is(.phone-scoreboard, .round-scoreboard) strong { overflow-wrap: anywhere; min-width: 0; }
.controller-page .phone-scoreboard > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.controller-page .phone-scoreboard > div > strong { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.controller-page .phone-scoreboard > div > span { display: flex; align-items: center; gap: .85rem; white-space: nowrap; font-size: .75rem; }
.controller-page .phone-scoreboard > div > span > i { font-style: normal; }
.controller-page .phone-scoreboard .token-pile { padding-left: .75rem; border-left: 1px solid #ffffff30; gap: .3rem; line-height: 1; }
.controller-page .winner-crown { background: #ffcb72; box-shadow: 0 0 0 12px #ffcb7210, 0 6px 0 #b07f3c; transform: rotate(-8deg); margin-top: 1rem; }
.controller-page .winner-actions { display: grid; gap: 1rem; }

/* TV: generous safe margins and type proportional to the actual viewport.
   vw/vh units also work in Android TV's smaller CSS viewport. */
.screen-page .screen { background: radial-gradient(ellipse at 75% 20%, #54388165, transparent 58%), #17132b; }
.screen-page .screen::before { background-image: radial-gradient(#e1d4ff12 1px, transparent 1px); background-size: 24px 24px; }
.screen-page .screen::after { background: radial-gradient(ellipse at 0 100%, #8267ff22, transparent 50%); }
.screen-page .screen-header { top: 4vh; }
.screen-page .screen-footer { bottom: 3.5vh; color: #b7afca; font-size: clamp(10px, .9vw, 22px); }
.screen-page .screen .brand { font-size: clamp(18px, 1.7vw, 38px); }
.screen-page .screen .brand-mark { width: 2.5vw; height: 2.7vw; min-width: 28px; min-height: 30px; font-size: clamp(16px, 1.6vw, 32px); }
.screen-page .connection-pill { font-size: clamp(10px, .95vw, 22px); padding: .65em 1em; color: #c5bdd7; border-color: #ffffff35; }
.screen-page .connection-pill.online { color: var(--lime); border-color: #d7ff4570; }
.screen-page .eyebrow { font-size: clamp(11px, 1.05vw, 24px); letter-spacing: .12em; }
.screen-page .screen-state .muted { font-size: clamp(14px, 1.45vw, 30px); line-height: 1.6; }
.screen-page #waiting.active { display: grid; grid-template-columns: 1.05fr 1fr; gap: 6vw; padding: 15vh 7vw 11vh; align-items: center; }
.waiting-copy { min-width: 0; }
.screen-page #waiting h1 { font-size: clamp(48px, 6.6vw, 150px); line-height: .96; margin: 2vh 0; }
.screen-page #waiting h1 em { color: var(--lime); font-style: normal; }
.screen-page #waiting .muted { margin: 2vh 0 3vh; }
.screen-page #tvOnlyButton { width: 100%; margin: 0; min-height: 6.5vh; padding: 1.1em 1.3em; font-size: clamp(14px, 1.3vw, 30px); border-radius: 16px; }
.remote-hint { color: #c1b8d3; font-size: clamp(10px, .95vw, 20px); margin: 2.5vh 0 0; }
.remote-hint kbd { display: inline-block; background: #ffffff0d; border: 1px solid #ffffff30; padding: .3em .5em; margin-right: .25em; border-radius: 5px; font: inherit; }
.screen-page .join-grid { position: relative; display: flex; flex-direction: column; align-items: stretch; margin: 0; padding: 3vw; border: 1px solid #c0a9f05c; border-radius: 2vw; background: linear-gradient(145deg, #3d2d58, #251c39); box-shadow: 0 1.1vw 0 #0e0a1f50, inset 0 1px 0 #ffffff1a; transform: rotate(1deg); }
.screen-page .join-ticket-heading { position: relative; }
.screen-page .join-ticket-heading .ticket-symbol { position: absolute; right: 0; top: -.5vw; font: 800 3.5vw Manrope, sans-serif; color: var(--lime); }
.screen-page .join-ticket-heading .eyebrow { font-size: clamp(10px, .8vw, 20px); margin: 0 0 1.5vh; padding-right: 2vw; }
.screen-page .join-grid h2 { font-size: clamp(26px, 3vw, 72px); letter-spacing: -.055em; line-height: 1.06; margin: 0 0 3vh; }
.screen-page .join-grid .room-block { text-align: left; margin: 0; padding-block: 2.5vh; border-top: 2px dashed #bba0e440; border-bottom: 2px dashed #bba0e440; }
.screen-page .join-grid span { font-size: clamp(10px, .85vw, 20px); color: #d0c6e0; text-transform: none; letter-spacing: .02em; }
.screen-page .join-grid .room-block strong { display: block; font: 500 clamp(50px, 6.4vw, 150px)/1.15 'DM Mono', monospace; letter-spacing: .14em; color: var(--lime); }
.screen-page .join-address { padding-top: 2.5vh; }
.screen-page .join-address strong { display: block; font-size: clamp(13px, 1.25vw, 30px); color: #fff9eb; overflow-wrap: anywhere; }
.screen-page .join-grid small { font-size: clamp(10px, .85vw, 20px); color: #bdb1cf; line-height: 1.5; }
.screen-page .tv-primary-action { background: var(--lime); color: var(--ink); border-radius: 16px; font-size: clamp(14px, 1.3vw, 30px); }
.screen-page .tv-secondary-action { font-size: clamp(14px, 1.2vw, 28px); background: #ffffff0d; border-color: #ffffff40; }
.screen-page .tv-control-state button:focus, .screen-page #tvOnlyButton:focus { outline: max(3px, .22vw) solid #fff9eb; outline-offset: max(4px, .35vw); transform: none; }
.screen-page .tv-setup-state.active, .screen-page .tv-guess-state.active { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4vw; padding: 14vh 6vw 10vh; }
.screen-page .tv-control-copy h2 { font-size: clamp(38px, 6vw, 130px); }
.screen-page .tv-control-panel { min-width: 0; max-height: 76vh; overflow-y: auto; padding: 2vw; border-radius: 1.7vw; background: #302440; border: 1px solid #ffffff25; }
.screen-page .tv-setup-state .tv-control-panel { gap: 1.5vh; box-shadow: 0 16px 50px #0003; }
.screen-page .tv-player-inputs { gap: 1vh 1vw; }
.screen-page .tv-setup-state .tv-player-inputs input { min-width: 0; min-height: 5.7vh; padding: .7em; border-radius: .8vw; font-size: clamp(13px, 1.25vw, 28px); }
.screen-page .tv-player-count { grid-template-columns: auto minmax(2em, auto) auto auto; gap: 1vw; }
.screen-page .tv-setup-state .tv-player-count button { min-height: 36px; min-width: 36px; width: 3.3vw; height: 3.3vw; font-size: clamp(18px, 1.7vw, 38px); }
.screen-page .tv-player-count strong { font-size: clamp(22px, 2.2vw, 50px); }
.screen-page .tv-player-count span { color: #c6bdd4; font-size: clamp(12px, 1.1vw, 26px); }
.screen-page .difficulty-picker > span, .screen-page .tv-guess-panel label { font-size: clamp(11px, 1vw, 24px); color: #c6bdd4; }
.screen-page .difficulty-option { min-height: 6.5vh; padding: .6em .4em; border-radius: .8vw; border-color: #ffffff30; background: #ffffff08; }
.screen-page .difficulty-option b { font-size: clamp(12px, 1.1vw, 26px); }
.screen-page .difficulty-option small { font-size: clamp(10px, .85vw, 20px); color: #c6bdd4; }
.screen-page .difficulty-option.selected { border: 2px solid var(--lime); background: #d7ff4515; }
.screen-page .tv-setup-state #tvStartGame { min-height: 5.7vh; padding: .8em 1em; }
.screen-page .tv-game-state.active { padding: 13vh 4vw 10vh; gap: 2vh; }
.screen-page .tv-game-bar, .screen-page #tvPlace .tv-game-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 3vw; }
.screen-page .tv-game-bar.correction-bar { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2vw; }
.screen-page .tv-current-player, .screen-page #tvPlace .tv-current-player { min-width: 0; grid-template-columns: minmax(0, max-content) auto; justify-content: start; column-gap: 1vw; }
.screen-page .tv-current-player h2, .screen-page #tvPlace .tv-current-player h2 { font-size: clamp(23px, 3.1vw, 70px); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.screen-page .tv-current-player > .token-pile > .token-more { font: 500 clamp(11px, 1vw, 22px) 'DM Mono', monospace; }
.screen-page .tv-game-instruction { max-width: none; text-align: left; font-size: clamp(12px, 1.2vw, 28px); color: #c6bdd4; }
.screen-page .tv-table { background: radial-gradient(ellipse at 50% 100%, #71519b40, transparent 70%), #21192f; border-color: #b298dd45; box-shadow: 0 14px 40px #0003, inset 0 1px 0 #ffffff18; padding: 1.5vh 2vw; border-radius: 2vw; }
.screen-page .tv-panel-head { font-size: clamp(10px, .95vw, 22px); }
.screen-page .tv-game-state .tv-select-timeline article { background: linear-gradient(165deg, #fff9eb 62%, var(--lime) 62%); }
.screen-page .tv-game-state .tv-select-timeline article[data-type="tv"] { background: linear-gradient(165deg, #fff9eb 62%, #c1a7ff 62%); }
.screen-page .tv-game-state .tv-select-timeline article strong { font-size: clamp(11px, 1.05vw, 24px); line-height: 1.2; }
.screen-page .tv-game-state .tv-select-timeline article span { font-size: clamp(19px, 2.3vw, 52px); }
.screen-page .tv-game-state .tv-select-timeline article small { font-size: clamp(9px, .7vw, 16px); }
.screen-page .tv-game-state .tv-provisional-card small { font-size: clamp(9px, .7vw, 16px); }
.screen-page .tv-game-state .tv-provisional-card strong { font-size: clamp(11px, .9vw, 22px); }
.screen-page .tv-game-state .tv-provisional-card b { color: #e4d7ff70; }
.screen-page .carousel-tools { color: #c7bfd7; font-size: clamp(10px, .9vw, 20px); gap: 2vw; }
.screen-page .carousel-tools button { width: clamp(36px, 3.6vw, 80px); height: clamp(36px, 3.6vw, 80px); font-size: clamp(22px, 2vw, 44px); border-radius: 12px; }
.screen-page .tv-game-actions { min-height: 0; grid-template-columns: auto minmax(0, 1fr); justify-content: stretch; }
.screen-page .tv-game-actions button { min-height: 6vh; padding: .75em 1.1em; font-size: clamp(12px, 1.15vw, 27px); }
.screen-page .tv-game-actions .tv-token-actions button { background: #ffffff0d; border-color: #ffffff30; }
.screen-page .tv-game-actions .tv-primary-action { justify-self: end; min-width: 25vw; border-radius: 16px; }
.screen-page .tv-bonus select { min-height: 5vh; font-size: clamp(12px, 1.1vw, 26px); }
.screen-page .tv-challenger-label { font-size: clamp(10px, .8vw, 20px); }
.screen-page .tv-voice-field input { min-width: 0; min-height: 6vh; font-size: clamp(14px, 1.25vw, 30px); }
.screen-page .tv-voice-button { min-width: 8vw; font-size: clamp(12px, 1.1vw, 26px); }
.screen-page .tv-voice-field { grid-template-columns: auto minmax(0, 1fr); }
.screen-page .tv-voice-button { display: grid; place-items: center; min-width: 0; width: clamp(48px, 5vw, 96px); padding: .6em; }
.screen-page .tv-voice-button[hidden] { display: none; }
.screen-page .tv-voice-field:has(.tv-voice-button[hidden]) { grid-template-columns: minmax(0, 1fr); }
.screen-page .tv-voice-button svg { width: clamp(24px, 2.2vw, 44px); height: clamp(24px, 2.2vw, 44px); }
.screen-page .tv-guess-actions { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1vw; }
.screen-page .tv-guess-actions button { min-height: 6vh; font-size: clamp(12px, 1.1vw, 26px); padding: .8em; gap: .5em; }
.screen-page #tvVoiceHelp { font-size: clamp(12px, 1vw, 24px); }
.screen-page .tv-guess-player { font-size: clamp(12px, 1.1vw, 26px); }
.screen-page .virtual-hud { width: clamp(250px, 27vw, 580px); background: #21192ff2; border-color: #ffffff30; border-radius: 12px; overflow: hidden; }
.screen-page .virtual-hud > div { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6vw; padding: .75em .9em; }
.screen-page .virtual-hud strong { font-size: clamp(12px, 1.1vw, 26px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.screen-page .virtual-hud span { font-size: clamp(10px, .9vw, 22px); }
.screen-page .virtual-hud > div > span { gap: .7em; }
.token-pile-compact { flex-shrink: 0; gap: .3em; }
.token-pile-compact .token-more { margin-left: 0; min-width: 3ch; font: inherit; font-variant-numeric: tabular-nums; }
.screen-page .virtual-hud .token-pile-compact { gap: .3em; }
.screen-page .screen:is([data-state="tvGuess"], [data-state="ready"], [data-state="ended"]) .virtual-hud { display: none; }
.screen-page .reveal-state h2 { max-width: 62vw; }
.screen-page .tv-result-outcome small { font-size: clamp(9px, .75vw, 18px); }
.screen-page .tv-final-scores div { font-size: clamp(12px, 1.1vw, 26px); }
.screen-page .reveal-state .muted { color: #45521b; }
.screen-page .reveal-state.result-miss .muted { color: #4a0f22; }
.screen-page .reveal-state .tv-reveal-next { background: var(--ink); color: var(--lime); }
.screen-page .winner-state h2 { overflow-wrap: anywhere; max-width: 90%; }
.screen-page .tv-final-scores { flex-wrap: wrap; max-width: 90%; gap: 1rem; }
.screen-page .tv-final-scores div { max-width: 100%; overflow-wrap: anywhere; }
.screen-page .form-error { font-size: clamp(12px, 1vw, 24px); }
.screen-page .form-error:empty { margin: 0; min-height: 0; }

/* Conferma esplicita prima di entrare nella scelta della correzione. */
.screen-page .tv-correction-prompt-state.active { grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); gap: 5vw; padding: 14vh 7vw 10vh; }
.screen-page .tv-correction-prompt-state .tv-control-copy h2 { font-size: clamp(34px, 4.4vw, 96px); line-height: 1.02; }
.screen-page .tv-correction-prompt-panel { justify-content: center; overflow: visible; }
.correction-prompt-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 1rem; }
.screen-page .correction-prompt-actions button { min-height: 8vh; justify-content: center; font-size: clamp(18px, 1.6vw, 34px); }
.controller-page .correction-prompt-view h2 { font-size: clamp(2.2rem, 11vw, 4rem); overflow-wrap: anywhere; }
.controller-page .correction-prompt-actions { width: 100%; }

/* One visual result language for both screens. */
.round-outcome {
  --result-unit: 16px;
  position: relative;
  z-index: 4;
  flex-shrink: 0;
  color: #fff9eb;
  background: linear-gradient(135deg, #322743, #211a30);
  border: 1px solid #b8a2df55;
  border-left: 4px solid var(--lime);
  border-radius: 20px;
  padding: 1em;
  text-align: left;
  font-size: var(--result-unit);
  box-shadow: 0 12px 28px #0003;
  animation: resultEnter .35s ease-out both;
}
.round-outcome.miss { border-left-color: var(--pink); background: linear-gradient(135deg, #3f223b, #25192d); }
.outcome-heading { display: flex; align-items: center; gap: .8em; }
.outcome-icon { flex: 0 0 2.6em; width: 2.6em; height: 2.6em; display: grid; place-items: center; border-radius: .8em; background: var(--lime); color: #17132b; font-weight: 800; transform: rotate(-6deg); }
.round-outcome.miss .outcome-icon { background: var(--pink); }
.outcome-copy { display: grid; gap: .3em; min-width: 0; flex: 1; }
.outcome-kicker, .bonus-caption { color: #d5c8ed; font: 500 .65em/1.4 'DM Mono', monospace; letter-spacing: .07em; text-transform: uppercase; }
.outcome-title { font-size: 1.15em; line-height: 1.2; letter-spacing: -.03em; }
.outcome-player { font-size: .85em; color: #d5c8ed; overflow-wrap: anywhere; line-height: 1.35; }
.outcome-card-prize { flex-shrink: 0; padding: .5em .6em; border-radius: .7em; background: #d7ff4515; border: 1px solid #d7ff4538; color: var(--lime); font-size: .7em; font-weight: 800; white-space: nowrap; }
.outcome-bonus { margin-top: 1em; padding-top: .8em; border-top: 1px dashed #c9b3e840; display: grid; gap: .7em; }
.guess-badges { display: flex; gap: .5em; flex-wrap: wrap; }
.guess-badge { display: inline-flex; align-items: center; gap: .45em; padding: .55em .7em; border: 1px solid #d7ff4540; border-radius: .7em; color: #e5ff9a; background: #d7ff450c; font-size: .8em; font-weight: 700; line-height: 1.2; }
.guess-badge.incorrect { color: #ffb4cc; border-color: #ff7b9f45; background: #ff5c8a10; }
.guess-mark { font-style: normal; font-weight: 800; }
.bonus-reward { display: flex; align-items: center; gap: .8em; padding: .7em .9em; border: 1px solid #ffd78680; border-radius: .8em; background: linear-gradient(115deg, #ffcf7c, #ffeab0); color: #302039; box-shadow: 0 3px 0 #8c633c; }
.bonus-coins { --coin: 1.8em; display: inline-flex; align-items: center; flex-shrink: 0; line-height: 1; }
.bonus-reward-copy { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; gap: .6em; }
.bonus-reward-copy small { font-size: .7em; font-weight: 800; }
.bonus-reward-copy strong { font-size: 1.15em; line-height: 1.2; white-space: nowrap; }
.round-outcome .bonus-note { color: #d5c8ed; margin: 0; font-size: .75em; line-height: 1.4; }
.controller-page #roundResult.round-outcome { --result-unit: 15px; margin: 1rem 0 .5rem; }
.controller-page #revealView .phone-year { margin: .4rem 0; }
.controller-page #phoneOriginal:empty { display: none; }
.screen-page #tvResultOutcome.round-outcome { --result-unit: clamp(12px, 1.15vw, 25px); width: min(50vw, 850px); max-width: 100%; margin-top: 1vh; border-radius: 1em; }
.screen-page .reveal-state .giant-year { right: 4vw; bottom: 10vh; width: 38vw; font-size: 19vw; text-align: right; color: #17132b70; }
.screen-page .round-outcome .outcome-title { font-size: 1.2em; }
.screen-page .round-outcome .outcome-player { font-size: .9em; }

@media (max-width: 360px) {
  .controller-page #roundResult.round-outcome { --result-unit: 13px; }
  .controller-page .phone-scoreboard > div { padding-inline: .25rem; }
  .controller-page .phone-scoreboard > div > span { gap: .6rem; }
  .controller-page .phone-scoreboard .token-pile { padding-left: .5rem; }
  .controller-page .token-actions button { font-size: .76rem; }
}

@media (min-width: 1600px) {
  .landing-wrap { max-width: 1700px; }
  .landing .hero { padding-block: 7vh; }
  .landing .hero-copy { font-size: 1.2rem; }
  .landing .hero-actions { max-width: 500px; }
  .landing .button { font-size: 1.15rem; }
  .hero-deck { height: 560px; }
}
@media (max-width: 800px) {
  .landing-wrap { padding: 1.3rem 6vw; }
  .landing .party-tag { font-size: .6rem; padding: .5rem .7rem; }
  .landing .hero { grid-template-columns: 1fr; gap: 1rem; padding: 2.8rem 0 2rem; }
  .landing .hero h1 { font-size: clamp(4.6rem, 17vw, 7rem); }
  .landing .hero-copy { font-size: .95rem; }
  .landing .hero-actions { max-width: none; }
  .landing .game-facts { font-size: .68rem; gap: .5rem .7rem; }
  .game-facts span + span::before { margin-right: .7rem; }
  .hero-deck { height: 330px; width: min(85%, 380px); margin: 1.2rem auto 0; }
  .demo-card { padding: .9rem; border-radius: 16px; }
  .demo-card small { font-size: .43rem; }
  .demo-card strong { font-size: .9rem; }
  .demo-card > b { font-size: 2rem; }
  .demo-card .demo-symbol { font-size: 4rem; }
  .demo-mystery .demo-symbol { font-size: 6rem; }
  .demo-mystery > b { font-size: .58rem; }
  .deck-sticker { font-size: .65rem; padding: .65rem; }
  .landing .steps { grid-template-columns: 1fr; gap: .75rem; }
  .landing .steps article { padding: 1.1rem; }
  .landing-footer { flex-direction: column; line-height: 1.6; }
}
@media (max-width: 360px) {
  .controller-page .phone-shell { padding-inline: 1rem; }
  .controller-page .phone-view h1 { font-size: 2.65rem; }
  .controller-page .mode-card { grid-template-columns: 36px 1fr; padding-left: .8rem; gap: .4rem .7rem; }
  .controller-page .mode-card .mode-icon { width: 34px; height: 44px; }
  .controller-page .mode-card b { font-size: 1rem; }
  .controller-page .exact-guesses { grid-template-columns: minmax(0, 1fr) 85px; }
  .controller-page .button { font-size: .9rem; }
  .landing .party-tag { display: none; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .controller-page #joinView.active { padding-top: 1rem; }
  .controller-page .phone-party-art { display: none; }
  .screen-page .tv-control-panel { padding: 1.5vw; }
  .screen-page .tv-control-copy .muted { line-height: 1.4; }
}
/* Portrait browser fallback for the TV page, including enlarged text. */
@media (max-aspect-ratio: 1/1) {
  .screen-page { overflow: auto; }
  .screen-page .screen { min-height: 100dvh; height: auto; }
  .screen-page .screen-header { position: relative; top: auto; left: auto; right: auto; }
  .screen-page .screen-state.active { position: relative; inset: auto; min-height: 85dvh; padding: 2rem 2vw 5rem; }
  .screen-page #waiting.active { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 3vw 4rem; }
  .screen-page #waiting h1 { font-size: 3.7rem; }
  .screen-page .join-grid { padding: 1.5rem; border-radius: 20px; transform: none; }
  .screen-page .join-grid .room-block strong { font-size: 4.3rem; }
  .screen-page .tv-setup-state.active, .screen-page .tv-guess-state.active { grid-template-columns: 1fr; }
  .screen-page .tv-control-panel { padding: 1.25rem; max-height: none; }
  .screen-page .tv-game-bar, .screen-page #tvPlace .tv-game-bar, .screen-page .tv-game-bar.correction-bar { grid-template-columns: 1fr; }
  .screen-page .tv-table { min-height: 310px; }
  .screen-page .tv-game-actions { grid-template-columns: 1fr; }
  .screen-page .tv-game-actions .tv-primary-action { width: 100%; }
  .screen-page .tv-game-actions button { min-height: 48px; }
  .screen-page .screen-footer { position: absolute; bottom: 1rem; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.landing, .controller-page, .screen-page) *,
  :is(.landing, .controller-page, .screen-page) *::before,
  :is(.landing, .controller-page, .screen-page) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Avvio diretto: nasconde il form TV prima ancora del primo paint. */
.controller-page .solo-boot-view {
  width: 100%;
  min-height: calc(100dvh - 6rem);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: 2rem 0;
  text-align: center;
}
.controller-page .solo-boot-view .loader { margin: 0 0 1.25rem }
.controller-page .solo-boot-view h1 {
  width: 100%;
  max-width: 430px;
  margin: .2rem 0 .5rem;
  font-size: clamp(2.7rem, 12vw, 4rem);
  line-height: .95;
  overflow-wrap: normal;
}
.controller-page .solo-boot-view .muted { width: 100%; max-width: 330px; margin: 0 auto }
html[data-solo-starting="true"] .controller-page #joinView.active { display: none !important }
html[data-solo-starting="true"] .controller-page #soloBoot { display: flex !important }

/* Audio: a nudge when autoplay is blocked, and a switch the remote can reach. */
.screen-page .screen-status { display: flex; align-items: center; gap: .6rem }
.screen-page .audio-hint { color: var(--lime); border-color: #d7ff4570 }
.audio-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 52px;
  padding: .8rem 1.15rem;
  border: 1px solid #ffffff1c;
  border-radius: 14px;
  background: #ffffff09;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.audio-toggle b { font: 500 .78rem DM Mono, monospace; letter-spacing: .1em; color: var(--lime) }
.audio-toggle.off b { color: #a29ab8 }