/* =========================================================================
   Locali interattivi · sistema visivo
   Pensato per un telefono tenuto in mano dentro un locale poco illuminato:
   fondo profondo, luce che si muove piano, testi ad alto contrasto,
   bersagli grandi. Tutte le animazioni usano solo transform e opacity,
   e si spengono con prefers-reduced-motion.
   ========================================================================= */

:root {
  /* Fondali */
  --bg: #0a0b1a;
  --bg-2: #12142b;
  --bg-3: #1a1d3a;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-2: rgba(255, 255, 255, 0.09);
  --surface-solid: #1b1e3b;
  --hairline: rgba(255, 255, 255, 0.12);
  --hairline-strong: rgba(255, 255, 255, 0.2);

  /* Testo */
  --text: #f6f7ff;
  --muted: #a8adcf;
  --faint: #7a80a8;

  /* Colori delle quattro aree (dallo schema originale) */
  --event: #35b6ff;
  --event-2: #6f5cff;
  --table: #ff8a3d;
  --table-2: #ff5f6d;
  --party: #b45cff;
  --challenge: #ffd23f;
  --challenge-2: #ffa62b;
  --social: #ff8fc4;
  --social-2: #ff5fa2;

  /* Stati */
  --ok: #3ee98f;
  --warn: #ffc247;
  --danger: #ff5f6d;

  /* Forma e profondità */
  --radius: 20px;
  --radius-lg: 26px;
  --radius-sm: 14px;
  --tap: 54px;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 20px 60px rgba(0, 0, 0, 0.55);
  --glow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 32px rgba(53, 182, 255, 0.12);

  /* Movimento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.18s;
  --dur-2: 0.36s;
  --dur-3: 0.6s;

  /* Alias storici usati dal pannello gestore */
  --line: var(--hairline);
  --card: var(--surface);
  --card-2: var(--surface-2);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.011em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
}

/* ---------- Fondale animato: aurora lenta + velo di grana ---------- */
.aurora { position: fixed; inset: -20vh -20vw; z-index: -2; pointer-events: none; overflow: hidden; }
.aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(70px); opacity: 0.5; will-change: transform;
}
.aurora i:nth-child(1) { width: 60vw; height: 60vw; left: -10vw; top: 0; background: radial-gradient(circle, rgba(53,182,255,0.55), transparent 65%); animation: drift-a 26s var(--ease-in-out) infinite; }
.aurora i:nth-child(2) { width: 55vw; height: 55vw; right: -12vw; top: 18vh; background: radial-gradient(circle, rgba(180,92,255,0.5), transparent 65%); animation: drift-b 32s var(--ease-in-out) infinite; }
.aurora i:nth-child(3) { width: 50vw; height: 50vw; left: 10vw; bottom: -8vh; background: radial-gradient(circle, rgba(255,143,196,0.42), transparent 65%); animation: drift-c 38s var(--ease-in-out) infinite; }
.aurora i:nth-child(4) { width: 44vw; height: 44vw; right: 4vw; bottom: 6vh; background: radial-gradient(circle, rgba(255,138,61,0.32), transparent 65%); animation: drift-b 30s var(--ease-in-out) infinite reverse; }
/* Velo di grana: niente mix-blend-mode, che su telefoni lenti costa un ricalcolo a schermo intero. */
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
@keyframes drift-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(14vw,10vh,0) scale(1.18); } }
@keyframes drift-b { 0%,100% { transform: translate3d(0,0,0) scale(1.1); } 50% { transform: translate3d(-12vw,14vh,0) scale(0.92); } }
@keyframes drift-c { 0%,100% { transform: translate3d(0,0,0) scale(0.95); } 50% { transform: translate3d(10vw,-12vh,0) scale(1.2); } }

/* ---------- Tipografia ---------- */
a { color: inherit; }
button { font: inherit; }
h1, h2, h3 { margin: 0 0 8px; line-height: 1.15; letter-spacing: -0.025em; }
h1 { font-size: 27px; font-weight: 800; }
h2 { font-size: 21px; font-weight: 750; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spacer { flex: 1; }
.hidden { display: none !important; }

.app { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; position: relative; }

/* ---------- Avvio ---------- */
.boot { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 72vh; gap: 14px; }
.boot-logo { font-size: 58px; animation: boot-bounce 1.6s var(--ease-spring) infinite; }
@keyframes boot-bounce { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }

/* ---------- Barra superiore ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, rgba(10,11,26,0.92), rgba(10,11,26,0.72));
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
  padding: 10px 14px; display: flex; align-items: center; gap: 10px; min-height: 62px;
  animation: slide-down var(--dur-3) var(--ease-out) backwards;
}
.topbar .title { flex: 1; min-width: 0; }
.topbar .title strong { display: block; font-size: 17px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .title span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes slide-down { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }

.iconbtn {
  width: 46px; height: 46px; border-radius: 15px; border: 1px solid var(--hairline);
  background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer; position: relative; transition: transform var(--dur-1) var(--ease-spring), background var(--dur-1);
}
.iconbtn:active { transform: scale(0.9); background: var(--surface-2); }
.iconbtn .dot {
  position: absolute; top: 7px; right: 7px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 0 0 rgba(255,95,109,0.7); animation: ping 1.8s var(--ease-out) infinite;
}
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255,95,109,0.65); } 70% { box-shadow: 0 0 0 12px rgba(255,95,109,0); } 100% { box-shadow: 0 0 0 0 rgba(255,95,109,0); } }

.offline { background: linear-gradient(90deg, var(--warn), #ff9d3d); color: #221500; font-size: 13px; font-weight: 700; padding: 5px 12px; text-align: center; animation: slide-down var(--dur-2) var(--ease-out) backwards; }

.page { padding: 16px 14px 36px; display: flex; flex-direction: column; gap: 14px; flex: 1; }

/* ---------- Comparse in sequenza ---------- */
/* Le animazioni d'ingresso riempiono solo *prima* di partire (backwards), mai dopo:
   finiscono comunque nello stato naturale, e un'animazione di transform che resta in
   vigore trasforma l'elemento in contenitore di tutto ciò che è a posizione fissa.
   Era il motivo per cui i fogli a comparsa si aprivano fuori dallo schermo e la scena
   dei giochi 3D finiva sotto la barra in alto; e copriva l'effetto "premuto" delle tessere. */
.reveal > * { animation: fade-up var(--dur-3) var(--ease-out) backwards; }
.reveal > *:nth-child(1) { animation-delay: 0.02s; }
.reveal > *:nth-child(2) { animation-delay: 0.08s; }
.reveal > *:nth-child(3) { animation-delay: 0.14s; }
.reveal > *:nth-child(4) { animation-delay: 0.2s; }
.reveal > *:nth-child(5) { animation-delay: 0.26s; }
.reveal > *:nth-child(6) { animation-delay: 0.32s; }
.reveal > *:nth-child(7) { animation-delay: 0.38s; }
.reveal > *:nth-child(n+8) { animation-delay: 0.44s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
.fade { animation: fade-up var(--dur-2) var(--ease-out) backwards; }
.pop { animation: pop var(--dur-2) var(--ease-spring) backwards; }
@keyframes pop { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }

/* ---------- Superfici ---------- */
.card {
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 16px;
  box-shadow: var(--shadow-2);
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
}
.card.flat { box-shadow: none; background: var(--surface); }
.card.accent { border-left: 4px solid var(--accent, var(--event)); box-shadow: var(--shadow-2), -12px 0 36px -18px var(--accent, var(--event)); }
a.card { text-decoration: none; display: block; transition: transform var(--dur-1) var(--ease-out); }
a.card:active { transform: scale(0.985); }

/* ---------- Pulsanti ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 12px 20px; border-radius: 16px;
  border: 1px solid var(--hairline); background: var(--surface-2); color: var(--text);
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em; cursor: pointer; user-select: none; text-decoration: none; width: 100%;
  transition: transform var(--dur-1) var(--ease-spring), filter var(--dur-1), box-shadow var(--dur-2);
}
.btn:active { transform: scale(0.965); filter: brightness(1.12); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -140%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-18deg);
}
.btn.primary::after, .btn.ok::after, .btn.challenge::after { animation: sweep 3.6s var(--ease-in-out) 1.2s infinite; }
@keyframes sweep { 0% { left: -140%; } 55%, 100% { left: 140%; } }

.btn.primary { background: linear-gradient(135deg, var(--event), var(--event-2)); color: #03121f; border-color: transparent; box-shadow: 0 8px 26px -8px rgba(53,182,255,0.75); }
.btn.table { background: linear-gradient(135deg, var(--table), var(--table-2)); color: #240c00; border-color: transparent; box-shadow: 0 8px 26px -8px rgba(255,138,61,0.7); }
.btn.party { background: linear-gradient(135deg, var(--party), #7d3bd6); color: #fff; border-color: transparent; box-shadow: 0 8px 26px -8px rgba(180,92,255,0.7); }
.btn.challenge { background: linear-gradient(135deg, var(--challenge), var(--challenge-2)); color: #2b2000; border-color: transparent; box-shadow: 0 8px 26px -8px rgba(255,210,63,0.7); }
.btn.social { background: linear-gradient(135deg, var(--social), var(--social-2)); color: #380c22; border-color: transparent; box-shadow: 0 8px 26px -8px rgba(255,95,162,0.7); }
.btn.ok { background: linear-gradient(135deg, var(--ok), #19c06d); color: #002616; border-color: transparent; box-shadow: 0 8px 26px -8px rgba(62,233,143,0.7); }
.btn.danger { background: rgba(255,95,109,0.1); color: #ff8b95; border-color: rgba(255,95,109,0.55); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.sm { min-height: 42px; padding: 8px 14px; font-size: 15px; width: auto; border-radius: 12px; }
.btn.xl { min-height: 66px; font-size: 20px; border-radius: 20px; }
.btn.auto { width: auto; }
.btn.block { width: 100%; }

/* Onda al tocco */
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,0.45); pointer-events: none; animation: ripple 0.6s var(--ease-out) forwards; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------- Campi ---------- */
.input, select.input, textarea.input {
  width: 100%; min-height: var(--tap); padding: 12px 15px; border-radius: 15px;
  border: 1px solid var(--hairline); background: rgba(8,9,22,0.6); color: var(--text); font-size: 18px; outline: none;
  transition: border-color var(--dur-1), box-shadow var(--dur-2), background var(--dur-1);
}
.input:focus { border-color: var(--event); box-shadow: 0 0 0 4px rgba(53,182,255,0.18); background: rgba(8,9,22,0.8); }
.input.wrong { border-color: rgba(255,95,109,0.7); box-shadow: 0 0 0 4px rgba(255,95,109,0.16); }
textarea.input { min-height: 84px; line-height: 1.4; }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
label.check { display: flex; align-items: center; gap: 12px; min-height: var(--tap); font-size: 16px; color: var(--text); cursor: pointer; }
label.check input { width: 24px; height: 24px; accent-color: var(--event); flex-shrink: 0; }

/* ---------- Etichette ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--text); white-space: nowrap;
  border: 1px solid var(--hairline);
}
.badge.ok { background: rgba(62,233,143,0.16); color: var(--ok); border-color: rgba(62,233,143,0.32); }
.badge.warn { background: rgba(255,194,71,0.16); color: var(--warn); border-color: rgba(255,194,71,0.32); }
.badge.danger { background: rgba(255,95,109,0.16); color: #ff8b95; border-color: rgba(255,95,109,0.32); }
.badge.demo { background: rgba(255,210,63,0.16); color: var(--challenge); border-color: rgba(255,210,63,0.32); }
.badge.live { background: rgba(255,95,109,0.2); color: #ff9aa2; border-color: rgba(255,95,109,0.4); }
.badge.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff5f6d; animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }

/* ---------- Le quattro aree ---------- */
.areas { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.area {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 148px; border-radius: var(--radius-lg); padding: 15px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  color: #12081f; text-decoration: none; box-shadow: var(--shadow-2);
  transform: translateZ(0); transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2);
  animation: tile-in 0.65s var(--ease-spring) backwards;
}
.areas .area:nth-child(1) { animation-delay: 0.04s; }
.areas .area:nth-child(2) { animation-delay: 0.12s; }
.areas .area:nth-child(3) { animation-delay: 0.2s; }
.areas .area:nth-child(4) { animation-delay: 0.28s; }
@keyframes tile-in { from { opacity: 0; transform: translateY(26px) scale(0.9) rotate(-2deg); } to { opacity: 1; transform: none; } }
.area:active { transform: scale(0.955); box-shadow: var(--shadow-1); }
.area::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%);
  transform: translateX(-120%); animation: shine 6s var(--ease-in-out) infinite;
}
.areas .area:nth-child(2)::after { animation-delay: 1.5s; }
.areas .area:nth-child(3)::after { animation-delay: 3s; }
.areas .area:nth-child(4)::after { animation-delay: 4.5s; }
@keyframes shine { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.area > * { position: relative; z-index: 2; }
.area .ic { font-size: 34px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3)); animation: float 4.5s var(--ease-in-out) infinite; }
.area img.ic { width: 46px; height: 46px; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45)); }
.areas .area:nth-child(2) .ic { animation-delay: 0.6s; }
.areas .area:nth-child(3) .ic { animation-delay: 1.2s; }
.areas .area:nth-child(4) .ic { animation-delay: 1.8s; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
.area .txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.area strong { font-size: 18px; font-weight: 850; line-height: 1.12; letter-spacing: -0.03em; }
.area small { font-size: 12.5px; opacity: 0.78; font-weight: 650; line-height: 1.25; }
.area.table { background: linear-gradient(150deg, #ffb26b, var(--table) 55%, var(--table-2)); }
.area.challenge { background: linear-gradient(150deg, #ffe680, var(--challenge) 55%, var(--challenge-2)); }
.area.event { background: linear-gradient(150deg, #7fd6ff, var(--event) 50%, var(--event-2)); }
.area.social { background: linear-gradient(150deg, #ffc2de, var(--social) 55%, var(--social-2)); }
.area.disabled { filter: grayscale(0.75) brightness(0.72); }
.area.disabled::after { animation: none; }
.area .pill {
  position: absolute; top: 11px; right: 11px; z-index: 3;
  background: rgba(12,6,24,0.62); color: #fff; font-size: 11.5px; font-weight: 800; padding: 4px 9px; border-radius: 999px;
  letter-spacing: 0.02em; backdrop-filter: blur(4px); animation: pop var(--dur-2) var(--ease-spring) 0.5s backwards;
}

/* ---------- Persone al tavolo ---------- */
.members { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--hairline); font-size: 14px; font-weight: 600;
  animation: pop var(--dur-2) var(--ease-spring) backwards;
}
.chip .on { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse-dot 2.4s var(--ease-in-out) infinite; }
.chip .off { width: 8px; height: 8px; border-radius: 50%; background: #565c80; }
.chip.me { border-color: var(--event); box-shadow: 0 0 0 1px rgba(53,182,255,0.4), 0 0 20px -6px var(--event); }
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.82); } }

/* ---------- Elenchi ---------- */
.list { display: flex; flex-direction: column; gap: 9px; }
.item {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--hairline); min-height: var(--tap);
  text-align: left; color: var(--text); width: 100%; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1), border-color var(--dur-1);
  animation: fade-up var(--dur-2) var(--ease-out) backwards;
}
.list .item:nth-child(1) { animation-delay: 0.02s; }
.list .item:nth-child(2) { animation-delay: 0.06s; }
.list .item:nth-child(3) { animation-delay: 0.1s; }
.list .item:nth-child(4) { animation-delay: 0.14s; }
.list .item:nth-child(5) { animation-delay: 0.18s; }
.list .item:nth-child(n+6) { animation-delay: 0.22s; }
.item:active { transform: scale(0.985); background: var(--surface-2); }
.item[disabled] { opacity: 0.42; }
.item .grow { flex: 1; min-width: 0; }
.item .grow strong { display: block; font-weight: 700; }
.item .grow span { display: block; font-size: 13.5px; color: var(--muted); }
.item.selected { border-color: var(--event); box-shadow: 0 0 0 1px var(--event), 0 0 24px -8px var(--event); }
.rank {
  width: 36px; height: 36px; border-radius: 12px; background: var(--surface-2); display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; font-size: 15px;
}
.rank.gold { background: linear-gradient(140deg, #ffe680, var(--challenge)); color: #2b2000; box-shadow: 0 0 22px -6px var(--challenge); animation: gold-pulse 2.6s var(--ease-in-out) infinite; }
@keyframes gold-pulse { 0%,100% { box-shadow: 0 0 22px -6px var(--challenge); } 50% { box-shadow: 0 0 34px -4px var(--challenge); } }
.pts { font-size: 23px; font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }

/* ---------- Avvisi ---------- */
.notice {
  border-radius: var(--radius-sm); padding: 13px 15px; position: relative; overflow: hidden;
  background: rgba(53,182,255,0.1); border: 1px solid rgba(53,182,255,0.32);
  animation: fade-up var(--dur-2) var(--ease-out) backwards;
}
.notice.warn { background: rgba(255,194,71,0.1); border-color: rgba(255,194,71,0.34); }
.notice.ok { background: rgba(62,233,143,0.1); border-color: rgba(62,233,143,0.34); }
.notice.danger { background: rgba(255,95,109,0.1); border-color: rgba(255,95,109,0.34); }
a.notice { text-decoration: none; display: block; transition: transform var(--dur-1) var(--ease-out); }
a.notice:active { transform: scale(0.985); }
a.notice::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.14), transparent);
  animation: sweep 4.5s var(--ease-in-out) infinite;
}

/* ---------- Schede ---------- */
.tabs { display: flex; gap: 5px; background: rgba(8,9,22,0.55); padding: 5px; border-radius: 16px; border: 1px solid var(--hairline); }
.tabs button {
  flex: 1; min-height: 46px; border: 0; border-radius: 12px; background: transparent; color: var(--muted);
  font-weight: 700; font-size: 15px; cursor: pointer; transition: color var(--dur-1), background var(--dur-2) var(--ease-out), transform var(--dur-1);
}
.tabs button.active { background: linear-gradient(150deg, var(--surface-2), var(--surface)); color: var(--text); box-shadow: var(--shadow-1); }
.tabs button:active { transform: scale(0.96); }

/* ---------- Numeri grandi e conto alla rovescia ---------- */
.countdown { font-variant-numeric: tabular-nums; font-weight: 850; font-size: 40px; text-align: center; letter-spacing: -0.04em; }
.countdown.urgent { color: #ff8b95; animation: urgent 1s var(--ease-in-out) infinite; }
@keyframes urgent { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.big { font-size: 40px; font-weight: 850; text-align: center; line-height: 1.08; letter-spacing: -0.035em; }
.score {
  font-size: 48px; font-weight: 900; text-align: center; letter-spacing: 1px; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, #9fd8ff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(53,182,255,0.4));
}

/* Anello del tempo */
.ring { display: block; margin: 0 auto; }
.ring circle { fill: none; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ring .bg { stroke: rgba(255,255,255,0.1); }
.ring .fg { stroke: var(--event); transition: stroke-dashoffset 0.25s linear, stroke 0.3s; filter: drop-shadow(0 0 8px rgba(53,182,255,0.6)); }
.ring.warn .fg { stroke: var(--warn); filter: drop-shadow(0 0 8px rgba(255,194,71,0.6)); }
.ring.hot .fg { stroke: var(--danger); filter: drop-shadow(0 0 10px rgba(255,95,109,0.7)); }
.ring-wrap { position: relative; display: grid; place-items: center; margin: 2px auto; }
.ring-wrap .num { position: absolute; font-size: 32px; font-weight: 850; font-variant-numeric: tabular-nums; }

/* ---------- Risposte del quiz ---------- */
.options { display: grid; grid-template-columns: 1fr; gap: 11px; }
.option {
  position: relative; overflow: hidden; min-height: 64px; border-radius: 16px;
  border: 2px solid var(--hairline); background: var(--surface); color: var(--text);
  font-size: 17.5px; font-weight: 650; padding: 12px 14px; text-align: left; display: flex; align-items: center; gap: 12px;
  transition: transform var(--dur-1) var(--ease-spring), border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2);
  animation: fade-up var(--dur-2) var(--ease-out) backwards;
}
.options .option:nth-child(1) { animation-delay: 0.04s; }
.options .option:nth-child(2) { animation-delay: 0.1s; }
.options .option:nth-child(3) { animation-delay: 0.16s; }
.options .option:nth-child(4) { animation-delay: 0.22s; }
.option:active:not([disabled]) { transform: scale(0.975); }
.option .letter {
  width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); display: inline-flex;
  align-items: center; justify-content: center; font-weight: 850; flex-shrink: 0; font-size: 15px;
}
.option.mine { border-color: var(--event); background: rgba(53,182,255,0.12); box-shadow: 0 0 26px -10px var(--event); }
.option.mine .letter { background: var(--event); color: #03121f; }
.option.correct { border-color: var(--ok); background: rgba(62,233,143,0.16); box-shadow: 0 0 30px -8px var(--ok); animation: correct-pop 0.55s var(--ease-spring); }
.option.correct .letter { background: var(--ok); color: #002616; }
.option.wrong { border-color: var(--danger); background: rgba(255,95,109,0.12); animation: shake 0.45s var(--ease-in-out); }
@keyframes correct-pop { 0% { transform: scale(1); } 40% { transform: scale(1.045); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

/* ---------- Carte dei giochi da serata ---------- */
.card-big {
  border-radius: 24px; padding: 26px 20px; text-align: center; font-size: 23px; font-weight: 750; line-height: 1.25;
  min-height: 168px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--surface-2), var(--surface)); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-2); animation: card-flip 0.55s var(--ease-out) backwards;
}
.card-big::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.16) 50%, transparent 60%);
  transform: translateX(-120%); animation: shine 5s var(--ease-in-out) 0.6s infinite;
}
@keyframes card-flip { from { opacity: 0; transform: perspective(900px) rotateX(-28deg) translateY(20px); } to { opacity: 1; transform: none; } }
.card-big.truth { background: linear-gradient(155deg, #3a86d8, #1b4f8a); border-color: rgba(120,190,255,0.35); box-shadow: 0 16px 44px -18px #2d7dd2; }
.card-big.dare { background: linear-gradient(155deg, #e0653c, #8a301b); border-color: rgba(255,160,120,0.35); box-shadow: 0 16px 44px -18px #d2542d; }
.card-big.party { background: linear-gradient(155deg, #9b52c4, #5a2c73); border-color: rgba(210,150,255,0.35); box-shadow: 0 16px 44px -18px #8f4bb0; }

/* ---------- Barre e passi ---------- */
.progress { height: 9px; border-radius: 6px; background: rgba(8,9,22,0.6); overflow: hidden; border: 1px solid var(--hairline); }
.progress > div { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--event), var(--event-2)); transition: width 0.25s linear, background 0.4s; box-shadow: 0 0 14px rgba(53,182,255,0.55); }
.progress.warn > div { background: linear-gradient(90deg, var(--warn), #ff9d3d); box-shadow: 0 0 14px rgba(255,194,71,0.55); }
.progress.hot > div { background: linear-gradient(90deg, var(--danger), #ff3d7f); box-shadow: 0 0 16px rgba(255,95,109,0.6); }

.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button {
  width: 50px; height: 50px; border-radius: 15px; border: 1px solid var(--hairline); background: var(--surface-2);
  color: var(--text); font-size: 24px; font-weight: 700; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-spring), background var(--dur-1);
}
.stepper button:active { transform: scale(0.88); background: var(--surface); }
.stepper span { min-width: 42px; text-align: center; font-size: 28px; font-weight: 850; font-variant-numeric: tabular-nums; }

/* ---------- Scelta dei partecipanti ---------- */
.players { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.player {
  position: relative; overflow: hidden; min-height: 58px; border-radius: var(--radius-sm);
  border: 2px solid var(--hairline); background: var(--surface); color: var(--text);
  padding: 9px 11px; text-align: left; font-size: 15px; font-weight: 650;
  display: flex; flex-direction: column; justify-content: center; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-spring), border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2);
}
.player small { color: var(--muted); font-size: 12px; font-weight: 600; margin-top: 2px; }
.player:active:not([disabled]) { transform: scale(0.96); }
.player.on {
  border-color: var(--event); background: rgba(53,182,255,0.14);
  box-shadow: 0 0 0 1px var(--event), 0 0 26px -8px var(--event);
  animation: picked 0.45s var(--ease-spring);
}
.player.on::after { content: "✓"; position: absolute; top: 6px; right: 9px; font-size: 13px; font-weight: 900; color: var(--event); }
@keyframes picked { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
.player[disabled] { opacity: 0.35; }

/* ---------- Minigiochi ---------- */
.game-area { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.tris { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; aspect-ratio: 1; }
.tris button {
  border-radius: 18px; border: 2px solid var(--hairline); background: var(--surface);
  color: var(--text); font-size: 52px; font-weight: 900; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-spring), background var(--dur-2), border-color var(--dur-2);
}
.tris button:active { transform: scale(0.94); }
.tris button.x, .tris button.o { animation: mark-in 0.35s var(--ease-spring); }
.tris button.x { color: var(--table); text-shadow: 0 0 22px rgba(255,138,61,0.65); }
.tris button.o { color: var(--event); text-shadow: 0 0 22px rgba(53,182,255,0.65); }
@keyframes mark-in { from { transform: scale(0.2) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
.tris button.win { background: rgba(62,233,143,0.2); border-color: var(--ok); animation: win-flash 0.9s var(--ease-in-out) infinite; }
@keyframes win-flash { 0%,100% { box-shadow: 0 0 0 0 rgba(62,233,143,0.5); } 50% { box-shadow: 0 0 34px 2px rgba(62,233,143,0.55); } }

.memory { display: grid; gap: 9px; perspective: 1000px; }
.memory button {
  aspect-ratio: 3/4; border-radius: 15px; border: 2px solid var(--hairline);
  background: linear-gradient(150deg, var(--surface-2), var(--surface));
  font-size: 31px; color: transparent; cursor: pointer;
  transition: transform 0.4s var(--ease-out), background var(--dur-2), border-color var(--dur-2), opacity var(--dur-2);
  transform-style: preserve-3d;
}
.memory button.up { color: var(--text); background: rgba(53,182,255,0.16); border-color: var(--event); transform: rotateY(180deg) scaleX(-1); box-shadow: 0 0 26px -10px var(--event); }
.memory button.done { opacity: 0.3; border-color: var(--ok); background: rgba(62,233,143,0.12); animation: pair-found 0.5s var(--ease-spring); }
@keyframes pair-found { 0% { transform: rotateY(180deg) scaleX(-1) scale(1); } 45% { transform: rotateY(180deg) scaleX(-1) scale(1.14); } 100% { transform: rotateY(180deg) scaleX(-1) scale(1); } }

.reflex { display: grid; grid-template-rows: 1fr auto 1fr; height: 72vh; gap: 10px; }
.reflex .zone {
  border-radius: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 850; color: #fff; letter-spacing: -0.02em; cursor: pointer; position: relative; overflow: hidden;
  transition: background 0.12s, transform 0.1s var(--ease-spring), box-shadow 0.2s;
}
.reflex .zone:active { transform: scale(0.985); }
.reflex .zone.p1 { background: linear-gradient(150deg, #ffb26b, var(--table)); transform: rotate(180deg); }
.reflex .zone.p1:active { transform: rotate(180deg) scale(0.985); }
.reflex .zone.p2 { background: linear-gradient(150deg, #7fd6ff, var(--event)); }
.reflex .zone.go { background: linear-gradient(150deg, #7bffc0, var(--ok)) !important; color: #002616; box-shadow: 0 0 60px rgba(62,233,143,0.7) inset; animation: go-flash 0.25s var(--ease-out); }
.reflex .zone.flash { background: linear-gradient(150deg, #ff9aa2, var(--danger)) !important; animation: shake 0.4s var(--ease-in-out); }
/* La zona di chi sta di fronte è capovolta: la scossa generica le toglieva la rotazione
   e la scritta si raddrizzava per mezzo secondo proprio sotto gli occhi dell'altro. */
.reflex .zone.p1.flash { animation-name: shake-capovolto; }
@keyframes shake-capovolto { 0%,100% { transform: rotate(180deg) translateX(0); } 20% { transform: rotate(180deg) translateX(-8px); } 40% { transform: rotate(180deg) translateX(7px); } 60% { transform: rotate(180deg) translateX(-5px); } 80% { transform: rotate(180deg) translateX(3px); } }
@keyframes go-flash { from { filter: brightness(2.2); } to { filter: none; } }
.reflex .mid { text-align: center; font-weight: 700; }

/* ---------- Messaggi a comparsa ---------- */
.toasts { position: fixed; left: 0; right: 0; bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: none; z-index: 60; padding: 0 12px; }
.toast {
  background: rgba(255,255,255,0.97); color: #10112a; padding: 12px 18px; border-radius: 15px; font-weight: 700;
  box-shadow: var(--shadow-3); max-width: 460px; display: flex; align-items: center; gap: 9px;
  animation: toast-in 0.42s var(--ease-spring); backdrop-filter: blur(8px);
}
.toast.error { background: linear-gradient(135deg, var(--danger), #ff3d7f); color: #fff; }
.toast.ok { background: linear-gradient(135deg, var(--ok), #19c06d); color: #002616; }
@keyframes toast-in { from { transform: translateY(26px) scale(0.86); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Pannello a scomparsa ---------- */
.sheet { position: fixed; inset: 0; background: rgba(4,4,14,0.66); backdrop-filter: blur(6px); z-index: 50; display: flex; align-items: flex-end; animation: fade-in var(--dur-2) var(--ease-out); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.sheet .panel {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); border-top: 1px solid var(--hairline-strong);
  border-radius: 28px 28px 0 0; padding: 20px 16px calc(22px + env(safe-area-inset-bottom));
  width: 100%; max-width: 560px; margin: 0 auto; max-height: 86vh; overflow: auto;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.6); animation: sheet-up 0.42s var(--ease-out);
}
.sheet .panel::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--hairline-strong); margin: -6px auto 14px; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- Varie ---------- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 15px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.code {
  font-family: ui-monospace, Menlo, monospace; font-size: 30px; letter-spacing: 4px; font-weight: 850; text-align: center;
  background: linear-gradient(135deg, rgba(62,233,143,0.16), rgba(53,182,255,0.12)); border: 1px dashed rgba(62,233,143,0.5);
  padding: 15px; border-radius: 16px; position: relative; overflow: hidden;
  animation: code-glow 2.6s var(--ease-in-out) infinite;
}
@keyframes code-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(62,233,143,0.18); } 50% { box-shadow: 0 0 34px 0 rgba(62,233,143,0.3); } }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 8px 0; }

/* Scheletri di caricamento */
.skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 240% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.skeleton.line { height: 16px; margin-bottom: 10px; }
.skeleton.block { height: 108px; }

/* Transizione fra schermate */
.page-enter { display: flex; flex-direction: column; flex: 1; animation: page-in 0.4s var(--ease-out) backwards; }
@keyframes page-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Regole di partecipazione: si scorrono fino in fondo ---------- */
.panel.regole { max-height: 88vh; }
.testo-legale {
  flex: 1; min-height: 220px; max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: rgba(8,9,22,0.5); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 14px 16px; font-size: 14.5px; line-height: 1.55;
  /* Una sfumatura in basso dice, senza scriverlo, che il testo continua. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}
.testo-legale h3 { font-size: 15.5px; margin: 16px 0 4px; color: var(--text); }
.testo-legale h4 { font-size: 13px; margin: 0 0 8px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.testo-legale p { margin: 0 0 8px; color: var(--muted); }
.testo-legale li { margin: 0 0 6px 16px; color: var(--muted); }
button.link {
  background: none; border: 0; padding: 0; font: inherit; color: var(--event);
  text-decoration: underline; cursor: pointer;
}

/* ---------- Icone dell'interfaccia (pacchetto di @gvesster) ---------- */
.ico {
  display: block; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.45));
  -webkit-user-drag: none; user-select: none;
}
.ico.galleggia { animation: float 4.5s var(--ease-in-out) infinite; }
.ico.inline { display: inline-block; vertical-align: -0.22em; margin-right: 6px; }
.rank .ico { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5)); }

/* ---------- Sala giochi: partite lampo con tutti i telefoni del tavolo ---------- */
.lobby { gap: 12px; }
.badge.big { font-size: 17px; padding: 6px 14px; font-variant-numeric: tabular-nums; }
.who { display: flex; flex-wrap: wrap; gap: 7px; }
.who .chip {
  display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--hairline); font-size: 13px; font-weight: 650;
}
.who .chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.who .chip.me { border-color: var(--c); box-shadow: 0 0 16px -6px var(--c); }
.who .chip b { font-variant-numeric: tabular-nums; }
.who .chip b.vite { display: inline-flex; gap: 2px; }
.who .chip b.vite .ico { filter: none; }

.game-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--hairline);
  color: var(--text); cursor: pointer; transition: transform var(--dur-1) var(--ease-spring), border-color var(--dur-1);
}
.game-card:active { transform: scale(0.98); }
.game-card:hover { border-color: var(--party); }
.game-card .ico { font-size: 32px; }
.game-card .grow { display: flex; flex-direction: column; gap: 2px; }

/* La scelta della pista del Kart */
.pista-card { padding: 10px 12px; }
.pista-card .grow { gap: 4px; min-width: 0; }
.pista-caso { flex: none; width: 88px; height: 66px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--surface-2, rgba(255,255,255,0.06)); }
.pista-dati { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.badge.fatica-1 { background: rgba(62, 233, 143, 0.18); color: var(--ok); }
.badge.fatica-2 { background: rgba(255, 210, 63, 0.18); color: var(--warn); }
.badge.fatica-3 { background: rgba(255, 95, 109, 0.2); color: #ff8b96; }

/* Il garage del Kart: anteprima 3D, carte da toccare, comandi */
.garage { gap: 12px; }
.garage > * { flex-shrink: 0; }
.garage-vista { position: relative; height: 230px; border-radius: 20px; overflow: hidden; background: #1c2140; border: 1px solid var(--hairline); touch-action: none; }
.garage-vista .tela3d { display: block; width: 100%; height: 100%; }
.garage-attesa { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px; }
.garage-titolo { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.garage-riga { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.garage-riga::-webkit-scrollbar { display: none; }
.garage-carta { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; padding: 6px 4px; border-radius: 16px; background: var(--surface); border: 2px solid transparent; color: var(--text); cursor: pointer; scroll-snap-align: start; transition: transform var(--dur-1) var(--ease-spring), border-color var(--dur-1), background var(--dur-1); }
.garage-carta:active { transform: scale(0.94); }
.garage-carta.scelta { border-color: var(--party); background: var(--surface-2); }
.garage-tondo { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #34407a, #1a1f40); display: grid; place-items: center; }
.garage-tondo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.garage-tondo b { font-size: 26px; font-weight: 900; }
.garage-nome { font-size: 12px; font-weight: 800; }
.garage-comandi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.garage-comando { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 16px; background: var(--surface); border: 2px solid transparent; color: var(--text); cursor: pointer; text-align: center; }
.garage-comando strong { font-size: 13px; line-height: 1.15; }
.garage-comando .small { font-size: 11px; line-height: 1.2; }
.garage-comando.scelto { border-color: var(--party); background: var(--surface-2); }
.garage-icona { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 54px; height: 32px; }
.garage-icona i { display: block; }
.garage-icona.tocco i { width: 14px; height: 14px; border-top: 4px solid currentColor; border-left: 4px solid currentColor; border-radius: 2px; }
.garage-icona.tocco i:first-child { transform: rotate(-45deg); }
.garage-icona.tocco i:last-child { transform: rotate(135deg); }
.garage-icona.joy-sx i:first-child, .garage-icona.joy-dx i:last-child { width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; border: 3px solid currentColor; background: radial-gradient(circle, currentColor 0 22%, transparent 24%); }
.garage-icona.joy-sx i:last-child, .garage-icona.joy-dx i:first-child { width: 16px; height: 16px; border-radius: 50%; background: currentColor; }
/* La carta del garage nell'elenco dei giochi in 3D: le miniature di kart e pilota, una sull'altra */
.garage-card { padding: 10px 12px; }
.garage-card .grow { min-width: 0; }
.garage-mini { flex: none; display: flex; }
.garage-mini .garage-tondo { width: 46px; height: 46px; }
.garage-mini .garage-tondo + .garage-tondo { margin-left: -12px; box-shadow: -2px 0 0 var(--surface); }

.countdown { padding: 30px 18px; }
.big-num { font-size: 84px; font-weight: 900; line-height: 1; animation: pop-num 1s var(--ease-spring); }
@keyframes pop-num { from { transform: scale(0.4); opacity: 0; } 50% { transform: scale(1.12); } to { transform: scale(1); opacity: 1; } }

/* Tira la corda */
.rope { display: flex; align-items: center; gap: 8px; }
.rope .side { font-weight: 800; font-size: 13px; opacity: 0.85; }
.rope .side.a { color: #ff5f6d; } .rope .side.b { color: #35b6ff; }
.rope .track {
  position: relative; flex: 1; height: 54px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(90deg, rgba(255,95,109,0.24), rgba(8,9,22,0.5) 45%, rgba(8,9,22,0.5) 55%, rgba(53,182,255,0.24));
  border: 1px solid var(--hairline);
}
.rope .track::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.28); }
.rope .knot { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 30px; transition: left 90ms linear; }

.tap-area {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 34vh; border-radius: var(--radius-lg); border: 2px solid rgba(255,255,255,0.22);
  color: #fff; font-weight: 900; font-size: 30px; letter-spacing: 0.04em; cursor: pointer; touch-action: none;
  transition: transform 70ms var(--ease-out), filter 70ms;
}
.tap-area small { font-size: 13px; font-weight: 650; letter-spacing: 0; opacity: 0.85; }
.tap-area .ico { filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5)); }
.tap-area.cold .ico { opacity: 0.45; filter: grayscale(0.7); }
.tap-area:active { transform: scale(0.97); filter: brightness(1.18); }
.tap-area.team-a { background: radial-gradient(circle at 50% 30%, #ff8a9a, #d6263a); }
.tap-area.team-b { background: radial-gradient(circle at 50% 30%, #7fd0ff, #1273c7); }
.tap-area.riflessi.attesa { background: radial-gradient(circle at 50% 30%, #4a4f6b, #23263a); }
.tap-area.riflessi.verde { background: radial-gradient(circle at 50% 30%, #7dffbe, #14b866); color: #05281a; animation: none; }
.tap-area.riflessi.falso { background: radial-gradient(circle at 50% 30%, #ff9aa5, #b81f36); }
.tap-area.riflessi.esito { background: radial-gradient(circle at 50% 30%, #8fb6ff, #2c5cc5); }
.tap-area.bomb.hot { background: radial-gradient(circle at 50% 30%, #ffd07a, #e0490f); animation: hot-pulse 0.7s var(--ease-in-out) infinite; }
.tap-area.bomb.cold { background: var(--surface); color: var(--muted); border-color: var(--hairline); }
@keyframes hot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,138,61,0.5); } 50% { box-shadow: 0 0 44px 6px rgba(255,138,61,0.45); } }

/* Schiaccia il sushi */
/* Caselle di misura fissa: niente calcoli che dipendono dal contenuto, quindi
   niente griglie che si gonfiano da sole su schermi diversi. */
.whack { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.whack .hole {
  position: relative; flex: 0 0 auto; width: min(27vw, 108px); height: min(27vw, 108px); border-radius: 50%; overflow: hidden; padding: 0;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.05), rgba(6,8,20,0.6));
  border: 1px solid var(--hairline); cursor: pointer; touch-action: manipulation;
  transition: transform 80ms var(--ease-out);
}
.whack .hole > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; }
.whack .hole:active { transform: scale(0.92); }
.whack .hole.pieno { animation: mark-in 0.18s var(--ease-spring); }
.whack .hole.k-bomba { border-color: rgba(255,95,109,0.55); }
.whack .hole.k-moneta { border-color: var(--table); box-shadow: 0 0 22px -6px var(--table); }
.whack .hole .ico { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); }

.boom { animation: shake 0.5s var(--ease-out); }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* ---------- Sushi Run: gioco condiviso fra i telefoni del tavolo ---------- */
/* Il minimo è quello di un telefono girato in orizzontale (375 meno la barra in alto):
   con 420 turbo e uscita finivano sotto il bordo dello schermo. */
.sushi { position: relative; flex: 1; height: calc(100dvh - 62px); min-height: 280px; overflow: hidden; background: #17101a; }
/* La tela è posata sopra il riquadro e non ne fa parte: così il riquadro può anche
   rimpicciolire (telefono girato, barra del browser che ricompare). */
.sushi canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
.sushi-hud { position: absolute; top: 10px; left: 10px; display: flex; gap: 7px; pointer-events: none; }
.pill-hud {
  background: rgba(8,9,22,0.66); backdrop-filter: blur(8px); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 6px 13px; display: flex; gap: 7px; align-items: center;
  font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums;
}
.sushi-top { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.srow {
  display: flex; align-items: center; gap: 8px; background: rgba(8,9,22,0.62); backdrop-filter: blur(8px);
  border: 1px solid var(--hairline); border-radius: 11px; padding: 5px 10px; font-size: 13px; min-width: 140px; font-weight: 650;
}
.srow i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.srow span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow b { font-variant-numeric: tabular-nums; }
.srow.me { border-color: var(--event); box-shadow: 0 0 16px -6px var(--event); }
/* Sui telefoni stretti i tre indicatori a sinistra e la classifica a destra non stanno
   sulla stessa riga: la classifica copriva il conto di chi gioca (e il tempo, coi punti
   a tre cifre). Scende sotto gli indicatori. */
@media (max-width: 440px) { .sushi-top { top: 54px; } }
.turbo {
  position: absolute; right: 18px; bottom: calc(20px + env(safe-area-inset-bottom));
  width: 94px; height: 94px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.32);
  background: radial-gradient(circle at 35% 30%, #ffe27a, var(--table)); color: #2b1600;
  font-weight: 900; font-size: 15px; letter-spacing: 0.08em; touch-action: none; cursor: pointer;
  box-shadow: 0 12px 34px -10px rgba(255,138,61,0.85); transition: transform var(--dur-1) var(--ease-spring), filter var(--dur-1);
}
.turbo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.turbo .ico { pointer-events: none; filter: drop-shadow(0 3px 6px rgba(120,60,0,0.5)); }
.turbo:active { transform: scale(0.9); filter: brightness(1.2); }
.sushi-exit {
  position: absolute; left: 14px; bottom: calc(20px + env(safe-area-inset-bottom));
  width: 48px; height: 48px; border-radius: 15px; background: rgba(8,9,22,0.66); backdrop-filter: blur(8px);
  border: 1px solid var(--hairline); color: var(--text); font-size: 19px; cursor: pointer;
}
.sushi-overlay, .sushi-dead { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(6,7,20,0.74); backdrop-filter: blur(5px); animation: fade-in var(--dur-2) var(--ease-out); }
.sushi-dead { background: rgba(6,7,20,0.42); pointer-events: none; }

/* ---------- Giochi in 3D ----------
   Schermo intero sopra tutto il resto: la barra in alto e lo sfondo animato
   costerebbero fotogrammi e spazio. I pezzi dell'interfaccia (hud3d-*) sono
   comuni a tutti i giochi, così si somigliano fra loro e con il resto dell'app. */
.gioco3d { position: fixed; inset: 0; z-index: 40; background: #0a0b1a; overflow: hidden; user-select: none; -webkit-user-select: none; }
.gioco3d-scena { position: absolute; inset: 0; }
.gioco3d-scena .tela3d { display: block; width: 100%; height: 100%; }
.gioco3d-avviso { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; color: var(--muted); background: rgba(6,7,20,0.8); }
.gioco3d-via { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; background: rgba(6,7,20,0.55); backdrop-filter: blur(3px); pointer-events: none; }
.gioco3d-via strong { font-size: 26px; }
.gioco3d-via p { max-width: 340px; margin: 0; color: #dfe2ff; font-size: 15px; }
.gioco3d-esci {
  position: absolute; left: 12px; top: calc(12px + env(safe-area-inset-top)); z-index: 5;
  width: 44px; height: 44px; border-radius: 14px; background: rgba(8,9,22,0.66); backdrop-filter: blur(8px);
  border: 1px solid var(--hairline); color: var(--text); font-size: 18px; cursor: pointer;
}
.hud3d { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hud3d > * { pointer-events: auto; }
.hud3d-alto { position: absolute; left: 66px; right: 12px; top: calc(12px + env(safe-area-inset-top)); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; pointer-events: none; }
/* Su un tablet o un computer il pannello dei comandi resta della misura di un telefono,
   al centro: allargato a tutto lo schermo i pulsanti diventerebbero strisce. */
.hud3d-basso { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin-inline: auto; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.hud3d-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(8,9,22,0.7); backdrop-filter: blur(8px); border: 1px solid var(--hairline); font-weight: 800; font-size: 15px; color: var(--text); white-space: nowrap; }
.hud3d-pill.grande { font-size: 20px; padding: 8px 16px; }
.hud3d-pill .ico { width: 20px; height: 20px; }
.hud3d-pannello { background: rgba(10,11,26,0.82); backdrop-filter: blur(10px); border: 1px solid var(--hairline); border-radius: 18px; padding: 10px; box-shadow: var(--shadow-2); }
.hud3d-riga { display: flex; gap: 8px; align-items: stretch; }
.hud3d-btn {
  flex: 1; min-height: 52px; border-radius: 14px; border: 1px solid var(--hairline-strong); background: var(--surface-2);
  color: var(--text); font: inherit; font-weight: 800; font-size: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  cursor: pointer; touch-action: manipulation; transition: transform var(--dur-1) var(--ease-out);
}
.hud3d-btn:active { transform: scale(0.95); }
.hud3d-btn small { font-weight: 600; font-size: 12px; color: var(--muted); }
.hud3d-btn[disabled] { opacity: 0.4; }
.hud3d-btn.caldo { background: linear-gradient(135deg, var(--table), var(--table-2)); color: #240c00; border-color: transparent; }
.hud3d-btn.caldo small { color: rgba(36,12,0,0.75); }
/* Centrato con i margini, non con translateX: l'animazione d'ingresso usa transform e
   lo sovrascriverebbe, e l'avviso partirebbe dal centro uscendo dallo schermo a destra. */
.hud3d-avviso { position: absolute; left: 12px; right: 12px; margin-inline: auto; width: fit-content; max-width: calc(100% - 24px); top: 22%; padding: 10px 18px; border-radius: 16px; background: rgba(8,9,22,0.78); font-weight: 900; font-size: 22px; text-align: center; pointer-events: none; animation: pop-num 0.6s var(--ease-spring); text-wrap: balance; }
.hud3d-volante { position: absolute; transform: translate(-50%, -100%); font-weight: 900; font-size: 18px; color: var(--challenge); text-shadow: 0 2px 6px rgba(0,0,0,0.6); pointer-events: none; animation: sale 1.1s var(--ease-out) forwards; }
@keyframes sale { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -46px; } }

/* Il borgo: catalogo che scorre di lato, barra della cassa */
.borgo-catalogo { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.borgo-catalogo::-webkit-scrollbar { display: none; }
.borgo-catalogo .hud3d-btn { min-height: 112px; padding: 8px 4px; text-align: center; }
.borgo-barra { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.borgo-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--challenge), var(--challenge-2)); transition: width 0.5s linear; }

/* Coriandoli */
#fx-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

@media (min-width: 600px) { body { font-size: 18px; } .area { min-height: 168px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .aurora i { animation: none; }
  .grain { display: none; }
}