/* Central tabletop carousel and TV-first game controls. */
.tv-game-state.active {
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(.8rem, 1.8vh, 1.4rem);
  padding: 10vh 4vw 3vh;
}

.tv-game-bar {
  flex: 0 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(230px, .7fr) minmax(260px, 1fr) minmax(380px, .9fr);
  align-items: center;
  gap: clamp(1.2rem, 3vw, 3.5rem);
}

.tv-current-player {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .9rem;
}

.tv-current-player .eyebrow { grid-column: 1 / -1; margin: 0 0 .2rem; }
.tv-current-player h2 {
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 4rem);
  line-height: .9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv-current-player b {
  justify-self: start;
  padding: .55rem .8rem;
  border: 1px solid #d7ff4545;
  border-radius: 999px;
  background: #d7ff4510;
  color: var(--lime);
  font: 500 .7rem DM Mono;
  white-space: nowrap;
}

.tv-game-instruction {
  max-width: 520px;
  margin: 0 auto;
  color: #aaa9a5;
  font-size: clamp(.76rem, 1vw, .95rem);
  line-height: 1.5;
  text-align: center;
}

.tv-bonus {
  padding: .65rem .75rem .75rem;
  border: 1px solid #ffffff12;
  border-radius: 20px;
  background: #ffffff07;
}

.tv-bonus-label { margin: 0 0 .45rem; padding: 0 .15rem; }
.tv-bonus .tv-exact-guesses {
  margin: 0;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: .55rem;
}

.tv-bonus .tv-exact-guesses input,
.tv-bonus select {
  min-height: 44px;
  padding: .65rem .8rem;
  border-radius: 12px;
  background: #08080a99;
}

.tv-challenger-label {
  display: block;
  margin: 0 0 .45rem;
  color: var(--lime);
  font: 500 .58rem DM Mono;
  letter-spacing: .1em;
}

.tv-bonus select { width: 100%; border: 1px solid #ffffff18; color: #fff; }

.tv-table {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: clamp(1rem, 2vw, 1.8rem) clamp(1.2rem, 3vw, 3.5rem);
  border: 1px solid #ffffff14;
  border-radius: clamp(24px, 2.2vw, 38px);
  background:
    radial-gradient(ellipse at 50% 105%, #6075222c 0, transparent 50%),
    linear-gradient(155deg, #20241b 0, #111310 48%, #17141e 100%);
  box-shadow: 0 28px 80px #0009, 0 1px 0 #ffffff12 inset, 0 -30px 90px #8267ff0b inset;
  overflow: hidden;
  perspective: 1200px;
}

.tv-table::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(115deg, transparent 0 48%, #ffffff08 49%, transparent 50%),
    radial-gradient(circle at 50% 50%, transparent 0 46%, #0004 100%);
  background-size: 180px 100%, 100% 100%;
  opacity: .45;
  pointer-events: none;
}

.tv-table .tv-panel-head { position: relative; z-index: 2; padding: 0 .3rem; color: #93958f; }
.tv-table .tv-panel-head strong { color: var(--lime); }
.tv-table .tv-panel-head i { font-style: normal; color: #666862; }

.tv-game-state .tv-select-timeline {
  position: relative;
  z-index: 1;
  width: 100%;
  height: calc(100% - 1.6rem);
  min-height: 0;
  max-height: none;
  padding: clamp(.8rem, 1.8vh, 1.5rem) clamp(.5rem, 1vw, 1rem);
  gap: clamp(.75rem, 1.4vw, 1.7rem);
  align-items: center;
  justify-content: safe center;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.tv-game-state .tv-select-timeline::-webkit-scrollbar { display: none; }

.tv-game-state .tv-select-timeline article {
  flex: 0 0 clamp(78px, 8.2vw, 142px);
  max-width: 142px;
  max-height: 100%;
  border-radius: clamp(13px, 1.2vw, 20px);
  box-shadow: 0 18px 35px #0009, 0 0 0 1px #ffffff70 inset;
  transform: translateY(2px) rotate(-1.8deg);
  transform-origin: 50% 100%;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), filter .22s, opacity .22s, box-shadow .22s;
  animation: tvCardDeal .4s cubic-bezier(.2, .8, .2, 1) both;
}

.tv-game-state .tv-select-timeline article:nth-of-type(even) {
  transform: translateY(-2px) rotate(1.5deg);
  animation-delay: .05s;
}

.tv-game-state .tv-select-timeline article:nth-of-type(3n) {
  transform: translateY(3px) rotate(.5deg);
  animation-delay: .1s;
}

.tv-game-state .tv-select-timeline article strong { font-size: clamp(.55rem, .72vw, .82rem); }
.tv-game-state .tv-select-timeline article span { font-size: clamp(1rem, 1.5vw, 1.55rem); }

.tv-game-actions {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(280px, 430px);
  align-items: center;
  justify-content: center;
  gap: clamp(.8rem, 1.3vw, 1.4rem);
}

.tv-game-actions .tv-token-actions { display: flex; gap: .75rem; }
.tv-game-actions button { min-height: 54px; border-radius: 999px; padding: .75rem 1.3rem; white-space: nowrap; }
.tv-game-actions .tv-token-actions button { display: flex; align-items: center; gap: .6rem; }
.tv-game-actions button small { color: #999; font-size: .62rem; }
.tv-game-actions .tv-primary-action { border-radius: 999px; }
.tv-game-actions .form-error { position: absolute; right: 0; bottom: 100%; margin: 0 0 .25rem; }
.correction-bar { grid-template-columns: minmax(250px, .7fr) minmax(280px, 1fr) minmax(330px, .8fr); }

@keyframes tvCardDeal {
  from { opacity: 0; transform: translateY(36px) rotate(4deg) scale(.9); }
}

/* Match setup to the same soft, spacious visual system. */
.tv-setup-state.active {
  grid-template-columns: minmax(300px, .72fr) minmax(560px, 1.28fr);
  gap: clamp(3rem, 7vw, 8rem);
  padding: 12vh 7vw 6vh;
}

.tv-setup-state .tv-control-copy h2 { margin-bottom: 1.5rem; }
.tv-setup-state .tv-control-panel {
  padding: clamp(1.5rem, 2.2vw, 2.5rem);
  gap: clamp(1rem, 1.8vh, 1.5rem);
  border-radius: 32px;
  background: linear-gradient(145deg, #242429ed, #101013ed);
}

.tv-setup-state .tv-player-inputs { gap: .9rem; padding: .2rem; }
.tv-setup-state .tv-player-inputs input {
  min-height: 58px;
  border-radius: 17px;
  padding: 1rem 1.15rem;
  box-shadow: 0 8px 22px #0003;
  transition: transform .18s, border-color .18s, background .18s, box-shadow .18s;
}

.tv-setup-state .tv-player-inputs input:focus {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 16px 30px #0007, 0 0 22px #d7ff451c;
}

.tv-setup-state .tv-player-count { margin-bottom: .15rem; }
.tv-setup-state #tvStartGame { min-height: 58px; border-radius: 999px; padding-inline: 1.5rem; }

@media (max-width: 1100px) {
  .tv-game-state.active { padding-left: 2.5vw; padding-right: 2.5vw; }
  .tv-game-bar { grid-template-columns: minmax(190px, .65fr) minmax(220px, .8fr) minmax(330px, 1fr); gap: 1rem; }
  .tv-game-instruction { font-size: .72rem; }
  .tv-game-state .tv-select-timeline { gap: .55rem; }
  .tv-setup-state.active { grid-template-columns: minmax(240px, .65fr) minmax(500px, 1.35fr); gap: 3vw; padding-inline: 4vw; }
}

@media (prefers-reduced-motion: reduce) {
  .tv-game-state .tv-select-timeline article { animation: none; transition: none; }
  .tv-game-state .tv-timeline-gap { transition: none; }
}

/* v12: concealed insertion slots and a real provisional card. */
.tv-control-state input:focus,
.tv-control-state select:focus {
  outline: 0 !important;
  border-color: var(--lime) !important;
  box-shadow: 0 0 0 2px var(--lime) inset, 0 10px 28px #0007, 0 0 22px #d7ff4525 !important;
}

.tv-setup-state .tv-player-inputs { overflow: visible; padding: .35rem; }
.tv-setup-state .tv-player-inputs input:focus { transform: translateY(-2px); }

.tv-game-state .tv-select-timeline { gap: 0; }
.tv-game-state .tv-select-timeline article { margin-inline: clamp(.28rem, .55vw, .65rem); }

.tv-game-state .tv-timeline-gap.tv-provisional-card {
  position: relative;
  align-self: center;
  flex: 0 0 clamp(88px, 8.2vw, 142px);
  width: clamp(88px, 8.2vw, 142px);
  height: clamp(165px, 23vh, 220px);
  max-height: 100%;
  aspect-ratio: 63 / 88;
  margin-inline: clamp(.28rem, .55vw, .65rem);
  padding: .8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  overflow: hidden;
  border: 2px solid #b9aaff;
  border-radius: clamp(13px, 1.2vw, 20px);
  background:
    radial-gradient(circle at 76% 18%, #d7ff4560 0 5%, transparent 6%),
    linear-gradient(150deg, #342d52 0, #1d1930 58%, #8267ff 100%);
  color: #fff;
  box-shadow: 0 20px 42px #000a, 0 0 28px #8267ff35, 0 0 0 1px #ffffff18 inset;
  opacity: 1;
  transform: translateY(-8px) rotate(1deg);
  animation: provisionalDeal .28s cubic-bezier(.2, .8, .2, 1) both;
}

.tv-game-state .tv-timeline-gap.tv-provisional-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 13px, #ffffff08 14px 15px);
  pointer-events: none;
}

.tv-game-state .tv-timeline-gap.tv-provisional-card small {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: .4rem .3rem;
  border-bottom: 1px solid #ffffff1f;
  background: #0b0b0cd6;
  color: var(--lime);
  font: 500 clamp(.42rem, .5vw, .58rem) DM Mono;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv-game-state .tv-timeline-gap.tv-provisional-card b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff22;
  font-size: clamp(4rem, 6vw, 7rem);
}

.tv-game-state .tv-timeline-gap.tv-provisional-card strong {
  position: relative;
  z-index: 1;
  font-size: clamp(.58rem, .7vw, .78rem);
  text-align: left;
}


.reveal-state .tv-reveal-next {
  background: var(--ink);
  color: var(--lime);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 14px 30px #56690e45;
}

.reveal-state .tv-reveal-next:focus {
  outline-color: #fff !important;
  box-shadow: 0 0 0 7px #0b0b0c24, 0 16px 34px #56690e66;
}

@keyframes provisionalDeal {
  from { opacity: 0; transform: translateY(24px) rotate(5deg) scale(.88); }
}

/* The phone uses the same card metaphor, scaled for touch. */
.controller-page .virtual-timeline { gap: 0; }
.controller-page .timeline-card { margin-inline: 5px; }
.controller-page .timeline-gap.provisional-card {
  position: relative;
  align-self: stretch;
  flex: 0 0 clamp(88px, 24vw, 108px);
  width: clamp(88px, 24vw, 108px);
  height: auto;
  padding: .65rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  border: 2px solid #b9aaff;
  border-radius: 15px;
  background: linear-gradient(150deg, #342d52, #1d1930 60%, #8267ff);
  color: #fff;
  box-shadow: 0 14px 28px #0008, 0 0 22px #8267ff30;
  opacity: 1;
}

.controller-page .timeline-gap.provisional-card small {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: .32rem .25rem;
  border-bottom: 1px solid #ffffff1f;
  background: #0b0b0cd6;
  color: var(--lime);
  font: 500 .43rem DM Mono;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.controller-page .timeline-gap.provisional-card b { position: absolute; inset: 0; display: grid; place-items: center; color: #ffffff20; font-size: 4rem; }
.controller-page .timeline-gap.provisional-card strong { position: relative; font-size: .6rem; text-align: left; }

/* v14: result feedback, mouse controls and smartphone overflow. */
.tv-current-player b {
  padding: .65rem .95rem;
  border-width: 2px;
  font-size: clamp(.72rem, .85vw, .92rem);
  box-shadow: 0 0 22px #d7ff4518;
}

.tv-result-outcome {
  position: relative;
  z-index: 4;
  width: min(720px, 62vw);
  margin-top: clamp(.5rem, 1.4vh, 1rem);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 22px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 20px 50px #56690e55;
  animation: resultEnter .55s cubic-bezier(.18, .89, .32, 1.28) both;
}
.tv-result-outcome > span {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  font-size: 2rem;
  font-weight: 800;
}
.tv-result-outcome > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .15rem 1rem; }
.tv-result-outcome small { grid-column: 1 / -1; color: var(--lime); font: 500 .58rem DM Mono; letter-spacing: .12em; }
.tv-result-outcome strong { font-size: clamp(1rem, 1.5vw, 1.45rem); }
.tv-result-outcome em { padding: .4rem .65rem; border-radius: 999px; background: var(--lime); color: var(--ink); font: 500 .62rem DM Mono; font-style: normal; }
.tv-result-outcome.miss { background: #32121d; box-shadow: 0 20px 50px #6e183655; }
.tv-result-outcome.miss > span { background: var(--pink); color: #fff; }
.tv-result-outcome.miss small { color: #ff9ab6; }
.reveal-state.result-success .tv-result-outcome > span { animation: resultPulse .7s .3s both; }
.reveal-state.result-miss { background: #ff7b9f; }
.tv-round-result { position: relative; z-index: 3; margin-top: .8rem; }

@keyframes resultEnter { from { opacity: 0; transform: translateY(32px) scale(.9); } }
@keyframes resultPulse { 50% { transform: scale(1.22); box-shadow: 0 0 0 18px #d7ff4528; } }

.controller-page .phone-shell {
  height: 100dvh;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
.controller-page .phone-view { overflow: visible !important; padding-bottom: 2rem; }
.controller-page .phone-view.active { min-height: calc(100dvh - 4rem); }
.controller-page .token-count {
  padding: .7rem .9rem;
  border-width: 2px;
  background: #d7ff4510;
  font-size: .68rem;
  box-shadow: 0 0 20px #d7ff4515;
}
.controller-page .round-result.success,
.controller-page .round-result.miss {
  border: 0;
  border-radius: 18px;
  padding: 1.1rem;
  font-weight: 700;
  font-size: .86rem;
  animation: resultEnter .45s cubic-bezier(.18, .89, .32, 1.2) both;
}
.controller-page .round-result.success { background: #d7ff45; color: var(--ink); box-shadow: 0 14px 30px #d7ff4528; }
.controller-page .round-result.miss { background: #451624; color: #fff; box-shadow: 0 14px 30px #0005; }
.controller-page #nextButton { flex: 0 0 auto; }

@media (max-height: 720px) {
  .controller-page .phone-view.active { min-height: auto; }
  .controller-page .virtual-game-view { padding-top: .65rem; }
}

/* v15: the current card travels through the carousel, arrows sit below it. */
.tv-table {
  display: flex;
  flex-direction: column;
  gap: clamp(.4rem, .9vh, .8rem);
}

.tv-game-state .tv-select-timeline {
  flex: 1 1 auto;
  height: auto;
  padding-block: clamp(.6rem, 1.4vh, 1.2rem);
}

.carousel-tools {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.6rem, 1vw, 1.1rem);
  color: #93958f;
  font: 500 .62rem DM Mono;
  letter-spacing: .1em;
}

.carousel-tools i { font-style: normal; }
.carousel-tools button {
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff20;
  border-radius: 50%;
  background: #ffffff0b;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}

@media (hover: hover) {
  .carousel-tools button:hover { background: var(--lime); color: var(--ink); transform: scale(1.08); }
}

.tv-control-state .carousel-tools button:focus {
  outline: 3px solid #fff !important;
  outline-offset: 4px;
  background: var(--lime);
  color: var(--ink);
  transform: scale(1.08);
}

.controller-page .carousel-tools {
  margin-top: .6rem;
  gap: 1.1rem;
  font-size: .55rem;
}

.controller-page .carousel-tools button {
  width: 54px;
  height: 54px;
  border: 1px solid #ffffff18;
  background: linear-gradient(145deg, #202023, #151517);
  font-size: 1.2rem;
}

.controller-page .carousel-tools button:active { transform: scale(.94); }

/* The challenger plays a card of its own, in another colour. */
.tv-game-state .tv-timeline-gap.tv-provisional-card.challenge {
  border-color: #ffc0d3;
  background:
    radial-gradient(circle at 76% 18%, #ffd76a55 0 5%, transparent 6%),
    linear-gradient(150deg, #55203a 0, #2c1220 58%, #ff5c8a 100%);
  box-shadow: 0 20px 42px #000a, 0 0 28px #ff5c8a40, 0 0 0 1px #ffffff18 inset;
  transform: translateY(-8px) rotate(-1.4deg);
}

.controller-page .timeline-gap.provisional-card.challenge {
  border-color: #ffc0d3;
  background: linear-gradient(150deg, #55203a, #2c1220 60%, #ff5c8a);
  box-shadow: 0 14px 28px #0008, 0 0 22px #ff5c8a35;
}

.tv-game-state .tv-timeline-gap.tv-provisional-card.challenge small,
.controller-page .timeline-gap.provisional-card.challenge small { color: #ffd9e4; }

.controller-page .virtual-timeline { justify-content: safe center; }

/* Endgame: play again with the same players, or start over from the roster. */
.winner-state .tv-endgame-actions {
  display: flex;
  justify-content: center;
  gap: clamp(.8rem, 1.4vw, 1.4rem);
  margin-top: clamp(1.8rem, 4vh, 3rem);
}

.winner-state .tv-endgame-actions button {
  width: max-content;
  gap: 1.4rem;
  border-radius: 999px;
  padding: .95rem 1.6rem;
}

.winner-state .form-error { margin-top: 1rem; }
.controller-page .winner-actions { display: grid; gap: .6rem; padding-top: 1.4rem; }

/* v17: the phone drives the same provisional cards on the TV in real time. */
.tv-game-state.remote-preview .tv-bonus,
.tv-game-state.remote-preview .tv-game-actions,
.tv-game-state.remote-preview .carousel-tools {
  display: none;
}

.tv-game-state.remote-preview.active { padding-bottom: 4vh; }
.tv-game-state.remote-preview .tv-game-bar {
  grid-template-columns: minmax(260px, .7fr) minmax(360px, 1.3fr);
}
.tv-game-state.remote-preview .tv-game-instruction { justify-self: end; margin-right: 0; }
.tv-game-state.remote-preview .tv-table { flex: 1 1 auto; }
.tv-game-state.remote-preview .tv-select-timeline { pointer-events: none; }
.tv-game-state.remote-preview .tv-panel-head::after {
  content: 'AGGIORNAMENTO DAL TELEFONO';
  color: var(--lime);
  font: 500 .58rem DM Mono;
  letter-spacing: .1em;
}

/* v19: reserve a clear strip for the persistent screen footer. */
.tv-game-state.active,
.tv-game-state.remote-preview.active {
  padding-bottom: max(7vh, 64px);
}

/* v21: game difficulty selector shared by phone and TV setup. */
.difficulty-picker {
  display: grid;
  gap: .55rem;
}
.difficulty-picker > span {
  color: #8c8b88;
  font: 500 .6rem DM Mono;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.difficulty-picker > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .65rem;
}
.difficulty-option {
  min-height: 58px;
  padding: .65rem .9rem;
  display: grid;
  gap: .2rem;
  border: 1px solid #ffffff1c;
  border-radius: 16px;
  background: #ffffff08;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.difficulty-option b { font-size: .8rem; }
.difficulty-option small { color: #8c8b88; font-size: .62rem; }
.difficulty-option.selected {
  border-color: var(--lime);
  background: #d7ff4514;
  box-shadow: 0 0 0 1px #d7ff4535 inset, 0 10px 24px #0004;
}
.difficulty-option.selected b { color: var(--lime); }
.controller-page .difficulty-picker { margin: .25rem 0; }
.controller-page .difficulty-option:active { transform: scale(.98); }
.tv-setup-state .difficulty-picker { margin-top: .1rem; }
.tv-control-state .difficulty-option:focus {
  outline: 3px solid #fff !important;
  outline-offset: 3px;
}
.controller-page .physical-difficulty {
  flex: 0 0 auto;
  margin: 0 0 .85rem;
}
.controller-page .physical-difficulty .difficulty-option {
  min-height: 48px;
  padding-block: .5rem;
}

/* v33: bonus dopo il posizionamento, dettatura TV e testi leggibili da lontano. */
#tvPlace .tv-game-bar { grid-template-columns: minmax(360px, .8fr) minmax(0, 1.2fr) }
#tvPlace .tv-game-instruction { max-width: 820px; justify-self: center }
#tvPlace .tv-current-player { grid-template-columns: minmax(0, max-content) max-content; width: 100%; overflow: visible }
#tvPlace .tv-current-player h2 { max-width: none; overflow: visible; font-size: clamp(2rem, 3.15vw, 3.6rem) }
#tvPlace .tv-current-player .token-pile { margin-left: .25rem; justify-self: start }

.tv-guess-panel label {
  color: #c7c6c1;
  font: 600 clamp(.78rem, 1vw, 1rem) DM Mono;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tv-guess-player { margin: 0 0 .35rem; color: #aaa9a5; font: 500 .85rem DM Mono; letter-spacing: .1em }
.tv-guess-player strong { color: var(--lime) }
.tv-voice-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem }
.tv-voice-field input {
  min-height: 64px;
  width: 100%;
  padding: .9rem 1.1rem;
  border: 2px solid #ffffff26;
  border-radius: 16px;
  background: #08080a99;
  color: #fff;
  font-size: clamp(1rem, 1.35vw, 1.3rem);
}
.tv-voice-button {
  min-width: 150px;
  border: 2px solid #d7ff4555;
  border-radius: 16px;
  background: #d7ff4512;
  color: var(--lime);
  font-weight: 800;
}
.tv-voice-button.listening { background: var(--pink); border-color: var(--pink); color: #fff; animation: pulse .9s infinite }
.tv-guess-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 1rem; margin-top: .5rem }
.tv-guess-actions button { min-height: 60px; font-size: 1rem }
#tvVoiceHelp { margin: 0; font-size: .9rem }

.controller-page .guess-view .exact-guesses { margin: 1rem 0 }
.controller-page .guess-view #submitGuess { margin-top: auto }
.controller-page .guess-view #skipGuess { margin-top: .8rem }

/* L'anno resta nella posizione originale di sfondo, ma con più contrasto. */
.reveal-state .giant-year { color: rgba(11, 11, 12, .28) }

/* Dimensioni minime pensate per la distanza divano-TV. */
.screen-page .muted { font-size: clamp(1rem, 1.25vw, 1.3rem) }
.screen-page .eyebrow { font-size: clamp(.78rem, .9vw, 1rem) }
.screen-page .tv-game-instruction { font-size: clamp(1rem, 1.25vw, 1.3rem); line-height: 1.55 }
.screen-page .tv-table .tv-panel-head { font-size: clamp(.78rem, .9vw, .95rem) }
.screen-page .tv-primary-action, .screen-page .tv-secondary-action, .screen-page .tv-token-actions button { font-size: clamp(.9rem, 1vw, 1.08rem) }
.screen-page .tv-primary-action small, .screen-page .tv-secondary-action small, .screen-page .tv-token-actions small { font-size: .78rem }
.screen-page .virtual-hud strong { font-size: clamp(.9rem, 1vw, 1.05rem) }
.screen-page .virtual-hud span { font-size: clamp(.72rem, .82vw, .88rem) }
.screen-page .screen-footer { font-size: clamp(.68rem, .78vw, .82rem) }
.screen-page .connection-pill { font-size: clamp(.7rem, .78vw, .82rem) }
.screen-page .tv-round-result { max-width: 850px; font-size: clamp(1rem, 1.25vw, 1.3rem) }
.screen-page .tv-turn-overlay { padding: .85rem 1.35rem; gap: 1rem }
.screen-page .tv-turn-overlay span { font-size: clamp(.82rem, 1vw, 1.05rem); letter-spacing: .14em }
.screen-page .tv-turn-overlay strong { font-size: clamp(1.1rem, 1.4vw, 1.5rem) }

/* v23: the player roster expands naturally; the whole phone page scrolls. */
.controller-page #setupView.active {
  flex: 0 0 auto;
  min-height: calc(100dvh - 4rem);
}
.controller-page #setupView .players-form {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}
.controller-page #setupView #playerInputs {
  flex: 0 0 auto;
  min-height: auto;
  max-height: none;
  overflow: visible !important;
}

/* v24: frecce leggibili, fila navigabile col telecomando, reveal che sta
   dentro la fascia utile anche con titoli lunghi. */

/* Il glifo era piccolo dentro il pallino e, a fuoco, anello e scala finivano
   sopra la scritta centrale: serve piu' respiro e meno ingrandimento. */
.carousel-tools {
  gap: clamp(1rem, 2vw, 1.9rem);
}
.carousel-tools i {
  white-space: nowrap;
}
.carousel-tools button {
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1;
}
.carousel-tools button:hover {
  transform: scale(1.04);
}
.tv-control-state .carousel-tools button:focus {
  outline-width: 2px;
  outline-offset: 3px;
  transform: scale(1.04);
}
.controller-page .carousel-tools {
  gap: clamp(1.2rem, 6vw, 2rem);
}
.controller-page .carousel-tools button {
  font-size: 1.75rem;
}

/* Col telecomando la carta si muove stando sulla fila: invece di un anello
   attorno a tutta la fila, si illumina la carta che si sta spostando. */
.tv-game-state .tv-select-timeline:focus,
.tv-game-state .tv-select-timeline:focus-visible {
  outline: none;
}
.tv-game-state .tv-select-timeline[data-carousel="place"]:focus .tv-provisional-card[data-variant="current"],
.tv-game-state .tv-select-timeline[data-carousel="correction"]:focus .tv-provisional-card[data-variant="challenge"] {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* Il badge del risultato si allargava fino a coprire l'anno gigante. */
.tv-result-outcome {
  width: max-content;
  max-width: min(520px, 44vw);
}
.tv-result-outcome strong {
  line-height: 1.15;
}

/* Reveal: fascia libera per il footer e titolo che si adatta alla lunghezza. */
.reveal-state.active {
  padding-bottom: max(10vh, 76px);
}
.reveal-state h2 {
  font-size: clamp(2.6rem, 6.6vw, 7.2rem);
}
.reveal-state[data-title="medium"] h2 {
  font-size: clamp(2.2rem, 5vw, 5.4rem);
}
.reveal-state[data-title="long"] h2 {
  font-size: clamp(1.9rem, 3.9vw, 4.2rem);
}

/* La carta provvisoria aveva un'altezza propria (minimo 165px) mentre le carte
   piazzate la ricavano dal rapporto 63/88: sui viewport stretti, come la
   WebView del televisore, veniva molto piu' alta. Stesse misure per tutte. */
.tv-game-state .tv-timeline-gap.tv-provisional-card {
  flex: 0 0 clamp(78px, 8.2vw, 142px);
  width: clamp(78px, 8.2vw, 142px);
  height: auto;
}


/* ============================================================
   v25: le carte sono il gioco, quindi occupano piu' spazio; e un po' di
   colore per non sembrare un pannello di controllo.
   ============================================================ */

/* Alone caldo negli angoli: il nero piatto sembrava una dashboard. */
.screen::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42vw 42vw at 6% 94%, #d7ff4514, transparent 68%),
    radial-gradient(34vw 34vw at 94% 6%, #ff5c8a14, transparent 68%);
}

/* --- Le carte ------------------------------------------------------------
   Erano piccole rispetto al resto: adesso la misura segue quante ne hai in
   timeline, cosi' restano grandi quando c'e' spazio e si stringono solo
   quando la fila si riempie. */
.tv-game-state .tv-select-timeline article,
.tv-game-state .tv-timeline-gap.tv-provisional-card {
  flex: 0 0 clamp(116px, 13.4vw, 225px);
  width: clamp(116px, 13.4vw, 225px);
  max-width: none;
}
.tv-game-state .tv-select-timeline:has(article:nth-of-type(6)) article,
.tv-game-state .tv-select-timeline:has(article:nth-of-type(6)) .tv-provisional-card {
  flex-basis: clamp(96px, 10.6vw, 180px);
  width: clamp(96px, 10.6vw, 180px);
}
.tv-game-state .tv-select-timeline:has(article:nth-of-type(8)) article,
.tv-game-state .tv-select-timeline:has(article:nth-of-type(8)) .tv-provisional-card {
  flex-basis: clamp(84px, 8.6vw, 150px);
  width: clamp(84px, 8.6vw, 150px);
}
.tv-game-state .tv-select-timeline:has(article:nth-of-type(10)) article,
.tv-game-state .tv-select-timeline:has(article:nth-of-type(10)) .tv-provisional-card {
  flex-basis: clamp(74px, 7.4vw, 132px);
  width: clamp(74px, 7.4vw, 132px);
}

/* Testi della carta proporzionati alla nuova misura. */
.tv-game-state .tv-select-timeline article strong { font-size: clamp(.6rem, .84vw, 1rem) }
.tv-game-state .tv-select-timeline article span { font-size: clamp(1.05rem, 1.75vw, 1.9rem) }
.tv-game-state .tv-select-timeline article small { font-size: clamp(.4rem, .52vw, .58rem) }

/* Mazzo tenuto in mano: inclinazioni piu' evidenti e carta in gioco che
   sporge dalle altre. */
.tv-game-state .tv-select-timeline article { transform: translateY(3px) rotate(-2.6deg) }
.tv-game-state .tv-select-timeline article:nth-of-type(even) { transform: translateY(-3px) rotate(2.2deg) }
.tv-game-state .tv-select-timeline article:nth-of-type(3n) { transform: translateY(4px) rotate(.8deg) }
/* La banda lime scende piu' in alto: titolo e anno stanno tutti dentro,
   prima l'anno restava a cavallo della diagonale. */
.tv-game-state .tv-select-timeline article {
  background: linear-gradient(162deg, #fffdf4 0 60%, var(--lime) 60%);
  box-shadow: 0 22px 40px #000a, 0 0 0 1px #ffffff7a inset;
}
.tv-game-state .tv-timeline-gap.tv-provisional-card {
  transform: translateY(-8px) rotate(-.6deg) scale(1.03);
  z-index: 3;
}

/* Binario della timeline dietro le carte: si capisce che sono in fila. */
.tv-game-state .tv-select-timeline::after {
  content: '';
  position: absolute; z-index: 0; left: clamp(1rem, 4vw, 4rem); right: clamp(1rem, 4vw, 4rem); top: 50%;
  height: 3px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #ffffff26 0 16px, transparent 16px 30px);
}
.tv-game-state .tv-select-timeline article,
.tv-game-state .tv-timeline-gap { z-index: 1 }

/* Il tavolo respira: meno cornice, piu' feltro. */
.tv-table {
  border-color: #ffffff1f;
  background:
    radial-gradient(ellipse at 50% 108%, #6d8a2a3a 0, transparent 55%),
    radial-gradient(ellipse at 12% -10%, #8267ff26 0, transparent 45%),
    linear-gradient(155deg, #23271c, #14161a);
}
.tv-table .tv-panel-head { color: #b6b9b0 }

/* Pulsanti adesivo anche qui. */
.tv-primary-action { box-shadow: 0 6px 0 #93c722, 0 18px 34px #bdfa2726 }
.tv-primary-action:active { transform: translateY(4px); box-shadow: 0 2px 0 #93c722, 0 10px 20px #bdfa2726 }
.tv-primary-action:focus, .tv-secondary-action:focus { box-shadow: 0 6px 0 #93c722, 0 0 0 8px #d7ff4518 }
.tv-secondary-action { box-shadow: 0 5px 0 #ffffff1a }

/* Vittoria: coriandoli fini, non un rapporto finale. */
.winner-state::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 50%, var(--lime) 0 2px, transparent 2.5px),
    radial-gradient(circle at 50% 50%, var(--pink) 0 2px, transparent 2.5px),
    radial-gradient(circle at 50% 50%, var(--violet) 0 2.5px, transparent 3px);
  background-size: 46px 46px, 62px 62px, 78px 78px;
  background-position: 6px 12px, 30px 4px, 18px 40px;
  opacity: .5;
  mask-image: radial-gradient(120% 90% at 50% 45%, transparent 0 32%, #000 78%);
}
.winner-state > * { position: relative; z-index: 1 }

/* Il bonus titolo/anno non deve sembrare un modulo: campi tratteggiati come
   il codice partita sul telefono. */
.tv-bonus { border-color: #ffffff1a; border-radius: 24px }
.tv-bonus .tv-exact-guesses input, .tv-bonus select {
  border: 2px dashed #ffffff24;
  border-radius: 16px;
  background: #08080a80;
}
.tv-bonus .tv-exact-guesses input:focus, .tv-bonus select:focus { border-style: solid }
.tv-bonus-label span { color: var(--lime) }

/* Gettoni: la pastiglia diventa una moneta. */
.tv-current-player b {
  border-width: 2px;
  background: radial-gradient(circle at 30% 25%, #d7ff4530, #d7ff4510);
  box-shadow: 0 4px 0 #d7ff4520;
}

/* Punteggi finali: tessere, con il vincitore in evidenza. */
.tv-final-scores div {
  border: 0;
  border-radius: 999px;
  padding: .6rem 1.1rem;
  background: #ffffff0d;
  box-shadow: inset 0 0 0 1px #ffffff1c;
}
.tv-final-scores div:first-child {
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 5px 0 #93c722;
}

/* Il segnaposto del codice partita era quasi invisibile. */
.controller-page .room-input::placeholder { color: #ffffff33 }

/* Gioca su questo telefono: un'alternativa, non una riga di tabella. */
.controller-page .solo-button {
  border-radius: 22px;
  background: linear-gradient(150deg, #8267ff26, #ffffff08);
  box-shadow: inset 0 0 0 1px #8267ff4d;
}
.controller-page .solo-button b:last-child { color: var(--violet) }

/* Configurazione: i nomi sono cartellini, non campi di un modulo, e il
   contatore giocatori due tasti veri. */
.tv-setup-state .tv-player-count button {
  border: 2px solid #d7ff4538;
  background: #d7ff450d;
  color: var(--lime);
  font-size: 1.4rem;
}
.tv-setup-state .tv-player-inputs input {
  border: 2px solid #ffffff1c;
  background: linear-gradient(150deg, #ffffff12, #ffffff05);
}
.tv-setup-state .tv-player-inputs input:nth-child(odd) { border-left: 4px solid #d7ff4573 }
.tv-setup-state .tv-player-inputs input:nth-child(even) { border-left: 4px solid #8267ffa1 }
.tv-setup-state .tv-control-panel {
  background: linear-gradient(145deg, #26262ced, #101015ed);
  box-shadow: 0 30px 70px #0009, inset 0 1px 0 #ffffff14;
}

/* Sulla rivelazione il fondo diventa lime (o rosa): marchio, pastiglia e
   footer erano chiari su chiaro e sparivano. */
#screen[data-state="reveal"] .brand { color: var(--ink) }
#screen[data-state="reveal"] .brand-mark { background: var(--ink); color: var(--lime) }
#screen[data-state="reveal"] .connection-pill { border-color: #0b0b0c33; color: #3d4a12 }
#screen[data-state="reveal"] .screen-footer { color: #56630f }
.reveal-state.result-miss .tv-round-result,
.reveal-state.result-miss .muted { color: #4a0f22 }

/* Con la posizione errata il fondo e' rosa: cambio anche pastiglia e footer. */
#screen[data-state="reveal"]:has(#reveal.result-miss) .connection-pill { border-color: #0b0b0c2e; color: #5c1228 }
#screen[data-state="reveal"]:has(#reveal.result-miss) .screen-footer { color: var(--ink) }

/* ============================================================
   v26: i gettoni diventano monete vere sul tavolo, non un contatore.
   ============================================================ */

.token-pile {
  --coin: clamp(20px, 2.1vw, 36px);
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.token-pile-sm { --coin: clamp(13px, 1.25vw, 20px) }

/* La moneta: bordo scanalato come una fiche, disco interno e luce in alto
   a sinistra. Si sovrappongono un po', come le pile sul tavolo. */
.token-coin {
  position: relative;
  flex: 0 0 auto;
  width: var(--coin);
  height: var(--coin);
  margin-left: calc(var(--coin) * -.22);
  border-radius: 50%;
  background:
    conic-gradient(from 8deg,
      #e2ff7a 0 6.25%, #a9d321 0 12.5%, #e2ff7a 0 18.75%, #a9d321 0 25%,
      #e2ff7a 0 31.25%, #a9d321 0 37.5%, #e2ff7a 0 43.75%, #a9d321 0 50%,
      #e2ff7a 0 56.25%, #a9d321 0 62.5%, #e2ff7a 0 68.75%, #a9d321 0 75%,
      #e2ff7a 0 81.25%, #a9d321 0 87.5%, #e2ff7a 0 93.75%, #a9d321 0);
  box-shadow:
    0 1px 0 #0b0b0c66,
    0 3px 5px #0009,
    inset 0 0 0 1px #0b0b0c3d;
  transform: rotate(calc(var(--i, 0) * 9deg - 9deg));
  animation: tokenDrop .32s cubic-bezier(.2, .9, .25, 1.2) both;
  animation-delay: calc(var(--i, 0) * .05s);
}
.token-coin:first-child { margin-left: 0 }

/* Disco interno con la C del marchio. */
.token-coin::after {
  content: 'C';
  position: absolute;
  inset: 17%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #f2ffc0 0 42%, #c3ea33 78%, #a9d321);
  box-shadow: inset 0 0 0 1px #0b0b0c2b, inset 0 -1px 2px #0b0b0c1f;
  color: #0b0b0c;
  font: 500 calc(var(--coin) * .42) / 1 'DM Mono', monospace;
}
.token-pile-sm .token-coin::after { content: '' }

@keyframes tokenDrop {
  from { opacity: 0; transform: translateY(-40%) scale(.7) rotate(-14deg) }
}

.token-more {
  margin-left: .35em;
  color: var(--lime);
  font: 500 .8em 'DM Mono', monospace;
}
.token-empty {
  color: #7d7f78;
  font: 500 .85em 'DM Mono', monospace;
  font-style: normal;
  letter-spacing: .08em;
}

/* --- I contenitori --------------------------------------------------- */

/* Il vassoio del giocatore di turno: le monete stanno dentro la pastiglia. */
.tv-current-player b {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  min-height: calc(var(--coin, 2vw) + .7rem);
  padding: .3rem .55rem;
}
.tv-current-player b.token-pile { --coin: clamp(22px, 2.4vw, 40px) }
.tv-current-player b .token-empty { padding: 0 .2rem }

/* Riepiloghi: carte a sinistra, monete a destra. */
.virtual-hud span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}
.tv-final-scores div {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Il bonus del reveal: moneta piu' il +1. */
.tv-result-outcome em {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .6rem .3rem .35rem;
}
.tv-result-outcome em .token-coin { --coin: 22px; margin: 0 }

/* Telefono: il contatore diventa il vassoio dei gettoni. */
.controller-page .token-count {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  padding: .35rem .5rem;
}
.controller-page .token-count.token-pile { --coin: 24px }
.controller-page .virtual-hud span,
.controller-page .players-scoreboard span { gap: .4rem }

@media (prefers-reduced-motion: reduce) {
  .token-coin { animation: none }
}

/* Le scanalature erano troppo tenui: la moneta sembrava un cerchio piatto.
   Piu' contrasto sul bordo e un riflesso in alto a sinistra. */
.token-coin {
  background:
    conic-gradient(from 8deg,
      #e8ff8f 0 6.25%, #86ad16 0 12.5%, #e8ff8f 0 18.75%, #86ad16 0 25%,
      #e8ff8f 0 31.25%, #86ad16 0 37.5%, #e8ff8f 0 43.75%, #86ad16 0 50%,
      #e8ff8f 0 56.25%, #86ad16 0 62.5%, #e8ff8f 0 68.75%, #86ad16 0 75%,
      #e8ff8f 0 81.25%, #86ad16 0 87.5%, #e8ff8f 0 93.75%, #86ad16 0);
  box-shadow:
    0 1px 0 #0b0b0c80,
    0 3px 6px #000a,
    inset 0 0 0 1.5px #0b0b0c59;
}
.token-coin::before {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: linear-gradient(150deg, #ffffff70 0 18%, transparent 42%);
  pointer-events: none;
}
.token-coin::after {
  background: radial-gradient(circle at 34% 26%, #f6ffd0 0 38%, #c9ee44 74%, #9dc523);
  box-shadow: inset 0 0 0 1.5px #0b0b0c33, inset 0 -1px 2px #0b0b0c26;
}

/* Le monete stanno sul tavolo, non dentro una gabbia: via la pastiglia. */
.tv-current-player b.token-pile {
  border: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  gap: 0;
  --coin: clamp(26px, 2.7vw, 44px);
}
.controller-page .token-count.token-pile {
  border: 0;
  padding: 0;
  background: none;
}

/* La moneta deve avere una scatola propria: come elemento inline le misure
   venivano ignorate (sul telefono il prezzo restava invisibile). */
.token-coin { display: inline-block }

/* E il contenitore del prezzo sui pulsanti e' un <small> che il telefono
   mette a display:block: qui torna in linea con le monete. */
.controller-page .token-actions button small.token-pile,
.tv-game-actions button small.token-pile {
  display: inline-flex;
  align-items: center;
}

/* Le righe di riepilogo tengono il testo in un <i>: niente corsivo. */
.virtual-hud span i, .players-scoreboard span i, .round-scoreboard span i { font-style: normal }