/* =========================================================
   PARTYGAMES — COMPONENTI DEI GIOCHI
   Caricato solo sulle pagine di gioco, dopo base.css.
   Testi grandi e contrasto alto: le partite vengono spesso
   proiettate sulla TV e lette da lontano.
   ========================================================= */

/* ---------- Intestazione della pagina di gioco ---------- */
.game-page { --card: var(--cyan); }
.game-page__head { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-4) 0 var(--space-5); }
.game-page__icon {
  flex-shrink: 0; font-size: 2.6rem; line-height: 1; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 22px;
  background: color-mix(in srgb, var(--card) 16%, transparent); border: 1px solid color-mix(in srgb, var(--card) 45%, transparent);
}
.game-page__head h1 { font-size: var(--fs-2xl); font-weight: 900; }
.game-page__tagline { color: var(--card-text); font-weight: 600; margin: 2px 0 var(--space-2); }
.game-page__head .game-card__meta { margin: 0; flex-wrap: wrap; }
.game-page__head .game-card__meta a { color: var(--text-muted); }
@media (max-width: 480px) { .game-page__icon { width: 60px; height: 60px; font-size: 2rem; border-radius: 18px; } }

.game-page__article { margin-top: var(--space-7); max-width: 860px; }
.game-page__article .faq { margin-top: var(--space-4); }

/* Pannello squadre richiudibile */
.teams-panel--compact { padding: 0; margin-bottom: var(--space-4); border-radius: var(--radius); }
.teams-panel--compact > summary {
  list-style: none; cursor: pointer; padding: var(--space-3) var(--space-5);
  display: flex; flex-direction: column; gap: 2px;
}
.teams-panel--compact > summary::-webkit-details-marker { display: none; }
.teams-panel--compact > summary span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; }
.teams-panel--compact > summary span::after { content: "▾"; color: var(--cyan); margin-left: auto; transition: transform .2s; }
.teams-panel--compact[open] > summary span::after { transform: rotate(180deg); }
.teams-panel--compact > summary small { color: var(--text-muted); font-size: var(--fs-xs); }
.teams-panel--compact > :not(summary) { margin-left: var(--space-5); margin-right: var(--space-5); }
.teams-panel--compact .teams-actions { padding-bottom: var(--space-4); }

/* ---------- Area di gioco ---------- */
.game-stage {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 7%, transparent), transparent 60%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--card) 35%, var(--border));
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  min-height: max(560px, 70vh);
  scroll-margin-top: 80px;
}
/* Finché il JavaScript non ha disegnato il gioco, il contenuto resta invisibile:
   lo spazio è già riservato, quindi non ci sono spostamenti del layout (CLS) */
.game-stage:not(.is-ready) > * { visibility: hidden; }
@media (min-width: 768px) { .game-stage { padding: var(--space-6); } }
.gk-view { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
.gk-view > * { max-width: 100%; }
.gk-view h2:focus, .gk-view [data-focus]:focus { outline: none; box-shadow: none; }

.gk-topbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); width: 100%; flex-wrap: wrap; }
.gk-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700;
  padding: 6px 14px; border-radius: var(--radius-pill); color: var(--card-text);
  background: color-mix(in srgb, var(--card) 12%, transparent); border: 1px solid color-mix(in srgb, var(--card) 45%, transparent);
}
.gk-segment { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.gk-segment .chip.is-active { background: var(--card); border-color: var(--card); box-shadow: 0 0 18px color-mix(in srgb, var(--card) 45%, transparent); }

.gk-title { font-size: var(--fs-xl); }
.gk-lead { color: var(--text-muted); max-width: 620px; }

.gk-card {
  width: 100%; max-width: 860px; padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg); background: rgba(10, 14, 26, .55); border: 1px solid var(--border-strong);
  box-shadow: 0 16px 48px -18px color-mix(in srgb, var(--card) 55%, transparent);
}
.gk-eyebrow { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--card-text); margin-bottom: var(--space-3); }
.gk-question { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 1rem + 2.4vw, 2.6rem); line-height: 1.25; }
.gk-question.is-enter { animation: gk-enter .45s var(--ease); }
@keyframes gk-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.gk-info {
  width: 100%; max-width: 860px; padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  background: rgba(255, 214, 0, .07); border: 1px dashed rgba(255, 214, 0, .4); color: var(--text-muted); font-size: .95rem;
}
.gk-info strong { color: var(--yellow); }

.gk-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); width: 100%; }
.gk-actions .btn { min-width: 200px; }
@media (max-width: 480px) { .gk-actions .btn { width: 100%; min-width: 0; } }
.btn--accent { background: var(--card); color: var(--on-accent); box-shadow: 0 0 24px color-mix(in srgb, var(--card) 40%, transparent); }
.btn--accent:hover { color: var(--on-accent); filter: brightness(1.1); }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* Opzioni A / B (Dilemmi) */
.gk-options { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: var(--space-3); width: 100%; max-width: 860px; }
.gk-option {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-lg); font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, .9rem + .6vw, 1.3rem);
  background: var(--surface); border: 2px solid var(--border-strong); transition: transform .2s var(--ease), border-color .2s, background .2s;
}
.gk-option b { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: var(--card); color: var(--on-accent); }
.gk-option--b b { background: var(--cyan); }
.gk-option:hover { transform: translateY(-2px); }
.gk-vs { align-self: center; font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; color: var(--text-faint); }
@media (max-width: 640px) {
  .gk-options { grid-template-columns: 1fr; }
  .gk-vs { padding: 0; }
}

/* Barra del tempo */
.gk-timer { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.gk-timer__track { width: 100%; height: 12px; border-radius: var(--radius-pill); background: var(--bg-elev-2); overflow: hidden; }
.gk-timer__fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--card), var(--yellow)); border-radius: inherit; transition: width 1s linear; }
.gk-timer__fill.is-low { background: var(--danger); }
.gk-timer__text { font-weight: 600; color: var(--text-muted); font-size: var(--fs-sm); }

/* Scelta modalità (card selezionabili) */
.gk-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); width: 100%; max-width: 720px; }
.gk-mode {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface); border: 2px solid var(--border); cursor: pointer; transition: all .2s var(--ease);
}
.gk-mode input { position: absolute; opacity: 0; pointer-events: none; }
.gk-mode__icon { font-size: 2.2rem; line-height: 1; }
.gk-mode__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); }
.gk-mode__desc { color: var(--text-muted); font-size: var(--fs-sm); }
.gk-mode:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.gk-mode:has(input:checked) { border-color: var(--card); background: color-mix(in srgb, var(--card) 12%, transparent); box-shadow: 0 0 26px color-mix(in srgb, var(--card) 35%, transparent); }
.gk-mode:has(input:focus-visible) { box-shadow: var(--focus); }

/* Campi di testo */
.gk-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); width: 100%; max-width: 560px; }
.gk-field { display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.gk-input {
  width: 100%; padding: 12px 16px; border-radius: var(--radius); background: rgba(10, 14, 26, .6);
  border: 1px solid var(--border-strong); color: var(--text); font-size: var(--fs-lg); font-weight: 600;
}
.gk-input:focus { outline: none; border-color: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--card) 30%, transparent); }
.gk-error { color: var(--danger); font-weight: 600; min-height: 1.5em; font-size: var(--fs-sm); }
.gk-hint { color: var(--text-faint); font-size: var(--fs-xs); }
kbd { font-family: var(--font-body); font-size: .85em; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--bg-elev-2); }

/* Tabellone squadre */
.gk-scoreboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-3); width: 100%; max-width: 860px; }
.gk-score {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name name" "value btns"; align-items: center; gap: 4px 8px;
  padding: 12px 14px; border-radius: var(--radius); background: rgba(10, 14, 26, .5); border: 2px solid color-mix(in srgb, var(--team-color) 55%, transparent);
  text-align: left; transition: transform .2s, box-shadow .2s;
}
.gk-score.is-active { border-color: var(--team-color); box-shadow: 0 0 24px color-mix(in srgb, var(--team-color) 45%, transparent); transform: translateY(-2px); }
.gk-score__name { grid-area: name; font-weight: 700; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gk-score__value { grid-area: value; font-family: var(--font-display); font-weight: 900; font-size: 1.8rem; color: var(--team-color); line-height: 1; }
.gk-score__btns { grid-area: btns; display: flex; gap: 6px; }
.gk-score__btns button { width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-weight: 800; font-size: 1.1rem; }
.gk-score__btns button:hover { border-color: var(--team-color); color: var(--team-color); }

/* Schermata finale */
.gk-result { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.gk-result__trophy { font-size: 4.5rem; line-height: 1; animation: gk-bounce 1.2s var(--ease) 2; }
@keyframes gk-bounce { 30% { transform: translateY(-14px) scale(1.06); } 60% { transform: translateY(0); } }
.gk-result__title { font-size: var(--fs-2xl); font-weight: 900; }
.gk-result__line { color: var(--text-muted); font-size: var(--fs-lg); }
.gk-ranking { display: grid; gap: var(--space-2); width: 100%; max-width: 480px; counter-reset: rank; }
.gk-ranking li {
  counter-increment: rank; display: flex; align-items: center; gap: var(--space-3); padding: 10px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--team-color, var(--card));
}
.gk-ranking li::before { content: counter(rank); font-family: var(--font-display); font-weight: 900; color: var(--text-faint); width: 1.2em; }
.gk-ranking li span { flex: 1; text-align: left; font-weight: 600; }
.gk-ranking li strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--team-color, var(--card)); }
.gk-ranking li:first-child { border-color: var(--yellow); box-shadow: 0 0 24px rgba(255, 214, 0, .25); }

/* Penitenza */
.gk-forfeit {
  width: 100%; max-width: 860px; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: rgba(176, 106, 255, .08); border: 1px solid rgba(176, 106, 255, .4); display: flex; flex-direction: column; gap: var(--space-2); align-items: center;
}
.gk-forfeit__label { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--violet); }
.gk-forfeit__text { font-weight: 600; font-size: var(--fs-lg); }

/* ---------- Overlay conto alla rovescia ---------- */
.gk-countdown {
  position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
  background: rgba(6, 9, 15, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.gk-countdown__num { font-family: var(--font-display); font-weight: 900; font-size: min(40vw, 14rem); line-height: 1; color: var(--yellow); text-shadow: 0 0 60px rgba(255, 214, 0, .55); }
.gk-countdown__num.is-pop { animation: gk-pop .5s var(--ease); }
@keyframes gk-pop { from { transform: scale(.4); opacity: 0; } }
.gk-countdown__label { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); text-transform: uppercase; letter-spacing: 2px; }

/* ---------- Coriandoli ---------- */
.gk-confetti { position: fixed; inset: 0; z-index: 94; pointer-events: none; overflow: hidden; }
.gk-confetti span { position: absolute; top: -20px; width: 10px; height: 14px; animation: gk-fall linear forwards; }
@keyframes gk-fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------- Termometro (Numero Esatto) ---------- */
.thermo { width: 100%; max-width: 860px; display: flex; flex-direction: column; gap: var(--space-2); padding-top: 34px; }
.thermo__ends { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-faint); font-weight: 600; }
.thermo__track {
  position: relative; height: 46px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #2e86de, #4dd9ff 30%, #ffd600 60%, #ff4757);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}
/* Le maschere scure coprono la parte di scala già esclusa */
.thermo__mask { position: absolute; top: 0; bottom: 0; background: rgba(6, 9, 15, .78); transition: width .5s var(--ease); }
.thermo__mask--left { left: 0; border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.thermo__mask--right { right: 0; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.thermo__marker { position: absolute; top: -32px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; opacity: 0; transition: left .5s var(--ease), opacity .3s; }
.thermo__marker.is-shown { opacity: 1; }
.thermo__marker span { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-sm); background: var(--text); color: var(--on-accent); padding: 2px 10px; border-radius: var(--radius-pill); }
.thermo__marker i { width: 2px; height: 46px; background: var(--text); margin-top: 2px; }
.thermo__labels { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.thermo__bound { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; padding: 4px 14px; border-radius: var(--radius-sm); background: var(--bg-elev-2); border: 1px solid var(--border-strong); min-width: 64px; }
.thermo__hint { font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 1px; }

.gk-turn { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); }
.gk-turn span { color: var(--card-text); }

.gk-history { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); width: 100%; max-width: 860px; }
.gk-history__col { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.gk-history__col h3 { font-size: var(--fs-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gk-history__chip { display: flex; justify-content: space-between; gap: 8px; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 600; }
.gk-history__chip.is-correct { border-color: var(--green); color: var(--green); }
.gk-history__empty { color: var(--text-faint); font-size: var(--fs-sm); }

.gk-guess { display: flex; gap: var(--space-2); width: 100%; max-width: 480px; }
.gk-guess .gk-input { flex: 1; min-width: 0; text-align: center; font-family: var(--font-display); font-size: 1.4rem; }

/* Flash "più alto / più basso" */
.gk-flash {
  position: fixed; inset: 0; z-index: 93; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0;
}
.gk-flash.is-on { animation: gk-flash .9s var(--ease); }
.gk-flash__arrow { font-family: var(--font-display); font-weight: 900; font-size: min(36vw, 12rem); line-height: 1; }
.gk-flash__label { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xl); letter-spacing: 2px; }
.gk-flash.is-higher { color: #ffd600; text-shadow: 0 0 60px rgba(255, 214, 0, .6); }
.gk-flash.is-lower { color: #4dd9ff; text-shadow: 0 0 60px rgba(77, 217, 255, .6); }
@keyframes gk-flash { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1.05); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }

/* ---------- Timer circolare (Fire Down, Parola Nascosta) ---------- */
.gk-ring {
  --p: 100;
  width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--ring-color, var(--card)) calc(var(--p) * 1%), var(--bg-elev-2) 0);
  transition: --p .2s linear;
}
.gk-ring span {
  width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center; background: var(--bg);
  font-family: var(--font-display); font-weight: 900; font-size: 3.4rem; line-height: 1;
}
.gk-ring.is-warn { --ring-color: var(--yellow); }
.gk-ring.is-danger { --ring-color: var(--danger); animation: gk-shake .4s ease-in-out infinite; }
@keyframes gk-shake { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@media (max-width: 480px) { .gk-ring { width: 120px; height: 120px; } .gk-ring span { width: 98px; height: 98px; font-size: 2.6rem; } }

/* ---------- Chip giocatori eliminabili (Fire Down) ---------- */
.gk-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); width: 100%; max-width: 860px; }
.gk-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
  background: rgba(10, 14, 26, .5); border: 2px solid var(--team-color, var(--card)); transition: all .2s var(--ease);
}
.gk-chip:hover { transform: translateY(-2px); }
.gk-chip.is-out { opacity: .4; text-decoration: line-through; border-style: dashed; filter: grayscale(1); }

/* ---------- Letterone (Nomi Cose Città) ---------- */
.gk-letter {
  font-family: var(--font-display); font-weight: 900; font-size: clamp(5rem, 14vw, 9rem); line-height: 1;
  width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 28px;
  background: rgba(10, 14, 26, .6); border: 2px solid var(--card); color: var(--card);
  text-shadow: 0 0 40px color-mix(in srgb, var(--card) 60%, transparent);
}
.gk-letter.is-rolling { animation: gk-roll .08s linear infinite; }
@keyframes gk-roll { 50% { transform: scale(.94); } }

/* ---------- Parole a scomparsa (Parola Nascosta) ---------- */
.gk-words { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); width: 100%; max-width: 960px; }
@media (max-width: 720px) { .gk-words { grid-template-columns: 1fr; } }
.gk-word {
  position: relative; display: grid; place-items: center; min-height: 76px; padding: 10px; border-radius: var(--radius);
  background: rgba(10, 14, 26, .55); border: 2px dashed var(--border-strong);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, .9rem + .7vw, 1.45rem); color: var(--text-faint);
}
.gk-word small { position: absolute; top: 6px; left: 10px; font-size: .7rem; color: var(--text-faint); }
.gk-word.is-shown { color: var(--text); border-style: solid; border-color: var(--card); animation: gk-enter .4s var(--ease); }
.gk-solution {
  width: 100%; max-width: 860px; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: rgba(0, 230, 118, .08); border: 1px solid rgba(0, 230, 118, .45);
}
.gk-solution__label { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--green); }
.gk-solution__word { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xl); margin: 4px 0; }
.gk-solution__note { color: var(--text-muted); font-size: var(--fs-sm); }

/* Righe risposta per squadra (Parola Nascosta, Duello Lampo) */
.gk-answers { display: grid; gap: var(--space-2); width: 100%; max-width: 640px; }
.gk-answer {
  display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; align-items: center; gap: var(--space-3);
  padding: 8px 12px; border-radius: var(--radius); background: rgba(10, 14, 26, .5); border: 2px solid var(--border);
  text-align: left;
}
.gk-answer__name { font-weight: 700; color: var(--team-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gk-answer .gk-input { font-size: var(--fs-md); padding: 8px 12px; }
.gk-answer__mark { min-width: 2.2em; text-align: center; font-weight: 700; font-size: var(--fs-sm); }
.gk-answer.is-correct, .gk-answer.is-best { border-color: var(--green); background: rgba(0, 230, 118, .08); }
.gk-answer.is-wrong { border-color: var(--danger); background: rgba(255, 77, 109, .08); }
@media (max-width: 480px) { .gk-answer { grid-template-columns: 1fr auto; } .gk-answer__name { grid-column: 1 / -1; } }

/* Permette di animare la percentuale del timer circolare */
@property --p { syntax: "<number>"; inherits: false; initial-value: 100; }

/* ---------- Duello Lampo ---------- */
.dl-types { width: 100%; max-width: 860px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.dl-types summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 600; font-size: var(--fs-sm); color: var(--text-muted); }
.dl-types .gk-segment { padding: 0 var(--space-4) var(--space-4); }
.dl-types .chip:not(.is-active) { opacity: .55; }
.dl-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.dl-card .gk-question.is-big { font-size: clamp(1.8rem, 1.2rem + 3vw, 3.4rem); letter-spacing: 1px; }
.dl-card .gk-question.is-muted { color: var(--text-muted); font-size: var(--fs-lg); }
.dl-widget { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.dl-widget:empty { display: none; }

.dl-stopwatch { font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 10vw, 5.5rem); font-variant-numeric: tabular-nums; color: var(--cyan); }
.dl-stopwatch.is-blind { color: var(--text-faint); }
.dl-dots { width: 100%; max-width: 640px; aspect-ratio: 4 / 3; border-radius: var(--radius); background: rgba(10, 14, 26, .7); border: 1px solid var(--border-strong); }
.dl-memo { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); width: 100%; max-width: 520px; }
.dl-memo div { aspect-ratio: 1; display: grid; place-items: center; font-size: clamp(1.6rem, 6vw, 2.6rem); border-radius: var(--radius-sm); background: rgba(10, 14, 26, .6); border: 1px solid var(--border); }
.dl-big-num { font-family: var(--font-display); font-weight: 900; font-size: 2rem; }

.dl-simon { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); width: min(100%, 320px); }
.dl-simon button { aspect-ratio: 1; border-radius: 22px; background: var(--pad); opacity: .35; border: 3px solid transparent; transition: opacity .1s, transform .1s, box-shadow .1s; }
.dl-simon button:disabled { cursor: default; }
.dl-simon button.is-lit, .dl-simon button:not(:disabled):active { opacity: 1; transform: scale(.97); box-shadow: 0 0 40px var(--pad); }
.dl-status { font-weight: 700; color: var(--text-muted); }

.dl-light { width: min(100%, 420px); padding: var(--space-6) var(--space-4); border-radius: var(--radius-lg); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xl); background: var(--bg-elev-2); border: 2px solid var(--border-strong); }
.dl-light.is-wait { background: rgba(255, 77, 109, .2); border-color: var(--danger); color: var(--danger); }
.dl-light.is-go { background: rgba(0, 230, 118, .25); border-color: var(--green); color: var(--green); box-shadow: 0 0 50px rgba(0, 230, 118, .45); }
.dl-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-3); width: 100%; }
.dl-zone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-4) var(--space-3); border-radius: var(--radius); border: 2px solid var(--team-color); background: rgba(10, 14, 26, .5); touch-action: manipulation; user-select: none; }
.dl-zone kbd { font-size: 1.4rem; font-weight: 800; color: var(--team-color); }
.dl-zone.is-winner { background: rgba(0, 230, 118, .15); border-color: var(--green); }
.dl-zone.is-false { opacity: .45; border-style: dashed; }

.dl-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.dl-tiles span { width: 52px; height: 58px; display: grid; place-items: center; border-radius: 12px; font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; color: var(--on-accent); background: linear-gradient(180deg, #ffe9a8, #ffc247); box-shadow: 0 4px 0 #b9852b; }

.dl-points { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); width: 100%; max-width: 860px; }
.dl-point { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius); font-weight: 700; background: rgba(10, 14, 26, .5); border: 2px solid color-mix(in srgb, var(--team-color) 50%, transparent); }
.dl-point b { color: var(--team-color); }
.dl-point[aria-pressed="true"] { border-color: var(--green); background: rgba(0, 230, 118, .14); box-shadow: 0 0 20px rgba(0, 230, 118, .25); }
.dl-card.is-enter { animation: gk-enter .45s var(--ease); }

/* ---------- Dialog modale condiviso ---------- */
.gk-dialog {
  width: min(560px, calc(100vw - 2 * var(--gutter))); max-height: calc(100vh - 2 * var(--gutter)); margin: auto;
  padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--border-strong);
  background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-lg);
}
.gk-dialog::backdrop { background: rgba(6, 9, 15, .75); backdrop-filter: blur(4px); }
.gk-dialog h2 { font-size: var(--fs-xl); margin-bottom: var(--space-3); }
.gk-dialog dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.gk-dialog dt { color: var(--text-faint); }
.gk-dialog .gk-field { margin-bottom: var(--space-3); }
.gk-dialog select { width: 100%; }
.gk-dialog .gk-actions { justify-content: flex-end; margin-top: var(--space-4); }
.gk-dialog .gk-actions .btn { min-width: 0; }
select.gk-input { appearance: auto; }

/* ---------- La Stecca ---------- */
.st-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: var(--space-2); width: 100%; }
.st-cat {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-4) var(--space-3); border-radius: var(--radius);
  background: rgba(10, 14, 26, .5); border: 1px solid var(--border); font-weight: 700; font-size: var(--fs-sm); transition: all .2s var(--ease);
}
.st-cat span { font-size: 2rem; line-height: 1; }
.st-cat:hover { border-color: var(--card); transform: translateY(-2px); }
.st-cat.is-picked { border-color: var(--yellow); box-shadow: 0 0 24px rgba(255, 214, 0, .4); }
.st-element { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.st-element__emoji { font-size: clamp(3.5rem, 10vw, 5.5rem); line-height: 1; }
.st-element__name { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xl); }
.st-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-3); width: 100%; max-width: 860px; }
.st-result { display: flex; flex-direction: column; gap: 6px; padding: var(--space-4); border-radius: var(--radius); background: rgba(10, 14, 26, .5); border: 2px solid var(--team-color); text-align: left; }
.st-result__team { font-weight: 800; color: var(--team-color); }
.st-result__answer { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); }
.st-result__answer small { font-family: var(--font-body); font-weight: 600; color: var(--text-faint); font-size: var(--fs-xs); margin-left: 6px; }
.st-result__value { font-family: var(--font-display); font-weight: 900; font-size: 1.8rem; color: var(--team-color); font-variant-numeric: tabular-nums; }
.st-result__total { font-size: var(--fs-sm); color: var(--text-muted); }
.st-result .btn { align-self: flex-start; }
.st-table-wrap { width: 100%; max-width: 860px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.st-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 460px; }
.st-table th, .st-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.st-table thead th { color: var(--team-color, var(--text)); background: var(--surface); }
.st-table tfoot td { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-lg); }
.st-table td button { color: var(--cyan); font-size: var(--fs-xs); margin-left: 4px; }
.st-table td.is-best { color: var(--green); }

/* ---------- Carte da girare (L'Intruso) ---------- */
.in-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); width: 100%; perspective: 1200px; }
@media (max-width: 900px) { .in-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .in-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } }
.in-flip { position: relative; min-height: 168px; border-radius: var(--radius); text-align: center; }
.in-flip__inner { position: absolute; inset: 0; transition: transform .6s var(--ease); transform-style: preserve-3d; }
.in-flip.is-revealed .in-flip__inner { transform: rotateY(180deg); }
.in-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: var(--radius); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: rgba(10, 14, 26, .65); border: 2px solid var(--border-strong);
}
.in-flip:not(:disabled):hover .in-face--front { border-color: var(--card); box-shadow: 0 0 22px color-mix(in srgb, var(--card) 35%, transparent); }
.in-face--back { transform: rotateY(180deg); }
.in-flip.is-safe .in-face--back { border-color: var(--green); background: rgba(0, 230, 118, .12); }
.in-flip.is-intruder .in-face--back { border-color: var(--danger); background: rgba(255, 77, 109, .18); }
.in-flip.is-boom { animation: gk-shake .35s ease-in-out 3; }
.in-flip.is-late { opacity: .65; }
.in-avatar {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem; line-height: 1;
  background: var(--av, rgba(255, 255, 255, .06)); color: #fff; font-family: var(--font-display); font-weight: 800;
}
.in-avatar.is-initials { font-size: 1.1rem; }
.in-name { font-weight: 700; font-size: var(--fs-sm); line-height: 1.25; overflow-wrap: anywhere; }
.in-tap, .in-by { font-size: var(--fs-xs); color: var(--text-faint); }
.in-value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-sm); }
.in-badge { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .5px; }
.in-flip.is-safe .in-badge { color: var(--green); }
.in-flip.is-intruder .in-badge { color: var(--danger); }
.gk-turn.is-ok { color: var(--green); }
.gk-turn.is-ko { color: var(--danger); }

/* ---------- Ordina ---------- */
.or-hint { display: flex; justify-content: space-between; width: 100%; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 1px; color: var(--card); }
/* minmax(0, 1fr) + min-width: 0: la fila di carte scorre dentro .or-track invece di allargare la pagina */
.or-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); width: 100%; min-width: 0; }
.or-row { min-width: 0; padding: var(--space-3); border-radius: var(--radius); background: rgba(10, 14, 26, .45); border: 2px solid color-mix(in srgb, var(--team-color) 50%, transparent); }
.or-row__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.or-row__name { font-family: var(--font-display); font-weight: 800; color: var(--team-color); }
.or-row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.or-row__result { font-weight: 700; font-size: var(--fs-sm); color: var(--yellow); }
.or-row__result.is-ok { color: var(--green); }
.or-track { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.or-item {
  flex: 1 0 116px; max-width: 170px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px;
  border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid var(--border-strong); text-align: center;
  cursor: grab; user-select: none; scroll-snap-align: start; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.or-item:focus-visible { box-shadow: var(--focus); }
.or-item.is-dragging { opacity: .45; }
.or-item.is-over { border-color: var(--card); transform: scale(1.03); }
.or-item.is-solved { cursor: default; }
.or-item.is-right { border-color: var(--green); }
.or-item.is-wrong { border-color: var(--danger); }
.or-item__pos { font-size: var(--fs-xs); font-weight: 800; color: var(--text-faint); }
.or-item__name { font-weight: 700; font-size: var(--fs-sm); line-height: 1.25; overflow-wrap: anywhere; flex-grow: 1; }
.or-item__value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xs); color: var(--card); min-height: 1.2em; }
.or-item__moves { display: flex; gap: 4px; }
.or-item__moves button { width: 30px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: .8rem; }
.or-item__moves button:disabled { opacity: .3; }

/* ---------- Il Picco ---------- */
.pk-subject { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.pk-subject .in-avatar { width: 110px; height: 110px; font-size: 2.4rem; box-shadow: 0 0 40px color-mix(in srgb, var(--card) 35%, transparent); }
.pk-subject__name { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xl); }
.pk-attempts { display: grid; gap: var(--space-2); width: 100%; max-width: 720px; }
.pk-attempt { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); text-align: left; animation: gk-enter .3s var(--ease); }
.pk-attempt.is-good { border-color: var(--orange); background: rgba(255, 159, 28, .08); }
.pk-attempt.is-peak { border-color: var(--green); background: rgba(0, 230, 118, .12); }
.pk-attempt__result { font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }
.pk-top5 { width: 100%; max-width: 720px; padding: var(--space-4); border-radius: var(--radius-lg); background: rgba(10, 14, 26, .55); border: 1px solid var(--border-strong); }
.pk-top5 h3 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.pk-top5 ol { display: grid; gap: 6px; }
.pk-top5 li { display: grid; grid-template-columns: 2em 1fr auto; gap: var(--space-3); align-items: center; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface); text-align: left; }
.pk-top5 li:first-child { background: rgba(255, 214, 0, .12); border: 1px solid rgba(255, 214, 0, .4); }
.pk-top5 li b { font-family: var(--font-display); color: var(--card); }

/* ---------- Battaglia all'Asta ---------- */
.ba-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px; gap: var(--space-3); width: 100%; align-items: start; }
@media (max-width: 960px) { .ba-grid { grid-template-columns: 1fr 1fr; } .ba-center { grid-column: 1 / -1; grid-row: 1; } }
.ba-board { padding: var(--space-3); border-radius: var(--radius); background: rgba(10, 14, 26, .5); border: 2px solid var(--team-color); display: flex; flex-direction: column; gap: var(--space-2); }
.ba-board__name { font-family: var(--font-display); font-weight: 800; color: var(--team-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ba-board__budget { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; }
.ba-board__budget small { font-size: var(--fs-xs); color: var(--text-faint); font-weight: 600; margin-left: 4px; }
.ba-slots { display: grid; gap: 6px; }
.ba-slot { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px dashed var(--border-strong); font-size: var(--fs-xs); font-weight: 600; text-align: left; }
.ba-slot.is-filled { border-style: solid; border-color: color-mix(in srgb, var(--team-color) 55%, transparent); background: color-mix(in srgb, var(--team-color) 8%, transparent); }
.ba-slot span:first-child { font-size: 1.4rem; line-height: 1; }
.ba-slot span:nth-child(2) { flex: 1; overflow-wrap: anywhere; }
.ba-slot b { color: var(--yellow); white-space: nowrap; }
.ba-center { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.ba-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.ba-item__emoji { font-size: clamp(4rem, 12vw, 7rem); line-height: 1; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .45)); animation: gk-pop .45s var(--ease); }
.ba-item__name { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xl); text-align: center; }
.ba-offer { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 5vw, 3rem); color: var(--yellow); }
.ba-offer.is-pulse { animation: gk-pop .3s var(--ease); }
.ba-bids { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.ba-bids .gk-input { width: 80px; text-align: center; padding: 8px; font-size: var(--fs-md); }
.ba-assign { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-2); width: 100%; }
@media (max-width: 560px) { .ba-assign { grid-template-columns: 1fr; } }
.ba-assign .btn { white-space: normal; }
.ba-assign [data-assign] { background: var(--team-color); color: var(--on-accent); }
.ba-final { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-4); width: 100%; }
.ba-roster { padding: var(--space-4); border-radius: var(--radius-lg); background: rgba(10, 14, 26, .5); border: 2px solid var(--team-color); }
.ba-roster h3 { color: var(--team-color); font-size: var(--fs-xl); }
.ba-roster .gk-hint { margin-bottom: var(--space-3); }
.ba-roster ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-2); }
.ba-roster li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--fs-xs); font-weight: 700; text-align: center; }
.ba-roster li span:first-child { font-size: 2rem; line-height: 1; }
.ba-roster li b { color: var(--yellow); }
.ba-dream { margin-top: var(--space-3); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }

/* ---------- Indovina la Top 10 ---------- */
.tt-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: var(--space-2); width: 100%; max-width: 860px; perspective: 1000px; }
@media (max-width: 560px) { .tt-board { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; } }
.tt-box { position: relative; height: 54px; }
.tt-box__inner { position: absolute; inset: 0; transition: transform .6s var(--ease); transform-style: preserve-3d; }
.tt-box.is-flipped .tt-box__inner { transform: rotateX(180deg); }
.tt-face { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); border-radius: var(--radius-sm); backface-visibility: hidden; -webkit-backface-visibility: hidden; font-family: var(--font-display); font-weight: 800; }
.tt-face--front { background: linear-gradient(180deg, #1d2a5a, #121a3a); border: 2px solid #3a4f9a; justify-content: center; font-size: 1.4rem; color: #9fb3ff; }
.tt-face--back { transform: rotateX(180deg); background: linear-gradient(180deg, #ffd166, #ffb703); color: #1a1200; justify-content: space-between; }
.tt-box.is-shown .tt-face--back { background: var(--bg-elev-2); color: var(--text-muted); border: 2px dashed var(--border-strong); }
.tt-face--back span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-face--back b { font-size: var(--fs-sm); white-space: nowrap; }
.tt-feedback { min-height: 1.6em; font-weight: 700; }
.tt-feedback.is-correct { color: var(--green); }
.tt-feedback.is-wrong { color: var(--danger); }
.tt-feedback.is-dup { color: var(--yellow); }
.gk-flash-wrong { position: fixed; inset: 0; z-index: 92; pointer-events: none; background: radial-gradient(circle, rgba(255, 77, 109, .35), transparent 70%); opacity: 0; }
.gk-flash-wrong.is-on { animation: gk-flash .7s var(--ease); }

/* ---------- Canzoni dalle emoji ---------- */
.ce-emoji { font-size: clamp(3rem, 10vw, 6rem); line-height: 1.15; letter-spacing: .08em; word-break: break-word; }
.ce-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--space-2); width: 100%; max-width: 860px; }
.ce-award { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 8px 12px; border-radius: var(--radius); background: rgba(10, 14, 26, .5); border: 2px solid var(--team-color); }
.ce-award span { font-weight: 700; color: var(--team-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-award div { display: flex; gap: 6px; }
.ce-award button { min-width: 44px; height: 36px; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 800; background: var(--surface); border: 1px solid var(--border-strong); }
.ce-award button:hover { border-color: var(--team-color); color: var(--team-color); }

/* ---------- Skill Test ---------- */
.sk-target { width: 110px; height: 110px; display: grid; place-items: center; padding: 10px; border-radius: var(--radius); background: rgba(255, 255, 255, .06); border: 2px solid var(--yellow); }
.sk-target.is-wide { width: 100%; max-width: 640px; height: auto; border-color: var(--border-strong); }
.sk-target svg { width: 100%; height: 100%; }
.sk-seq { display: flex; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }
.sk-seq__item { width: 72px; height: 72px; display: grid; place-items: center; padding: 6px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .06); border: 1px solid var(--border-strong); }
.sk-seq__item.is-q { font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: var(--yellow); border-style: dashed; }
.sk-seq__item svg { width: 100%; height: 100%; }
.sk-grid { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: var(--space-2); width: 100%; max-width: 720px; }
@media (max-width: 480px) { .sk-grid { grid-template-columns: repeat(min(var(--cols, 5), 4), minmax(0, 1fr)); } }
.sk-cell { aspect-ratio: 1; display: grid; place-items: center; padding: 8%; border-radius: var(--radius-sm); background: rgba(10, 14, 26, .55); border: 2px solid var(--border); transition: transform .15s, border-color .15s; }
.sk-cell:not(:disabled):hover { transform: scale(1.05); border-color: var(--card); }
.sk-cell svg { width: 100%; height: 100%; }
.sk-cell.is-wrong { border-color: var(--danger); background: rgba(255, 77, 109, .15); opacity: .6; }
.sk-cell.is-right { border-color: var(--green); background: rgba(0, 230, 118, .18); box-shadow: 0 0 24px rgba(0, 230, 118, .45); animation: gk-pop .4s var(--ease); }
.sk-emoji { font-size: clamp(1.6rem, 5vw, 2.6rem); line-height: 1; }
.sk-target .sk-emoji { font-size: 3.4rem; }
.sk-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem, 5vw, 2.6rem); }