/* ==========================================================================
   BURRACO FIBUR — UI "Torneo FIBUR"
   Ricostruita da zero seguendo il design concordato: feltro classico da
   torneo, accento competitivo ambrato, mano in fila, avversari con dorsi.
   Ordine di cascata: base/menu → componenti e tavolo → adattamenti responsive →
   accessibilità/beta privata → menu 2+3. Le ultime due sezioni sono override:
   non spostarle sopra il tavolo senza verificare gli stili calcolati.
   ========================================================================== */

/* ---------- RESET & BASE ---------- */
/* Font delle carte: Oswald 700 (SIL OFL 1.1, public/fonts/), scelto da Thierry
   il 2026-09-30, servito dal nostro server su tutti gli schermi. */
@font-face {
  font-family: "Oswald";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/oswald-latin-700-normal.woff2") format("woff2");
}
* { box-sizing: border-box; }
/* Sfondo feltro anche dietro la pagina: nell'app sulla Home dell'iPad nessuna
   fascia bianca può comparire sotto il tavolo. */
html { background: #04120a; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color: #f3efe2;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.045), transparent 42%),
    radial-gradient(ellipse at 50% 100%, #04120a 0%, #0b3b1c 70%, #0e4a20 100%);
  -webkit-user-select: none; user-select: none;
  overflow-x: hidden;
}
h1,h2,h3 { font-weight: 800; letter-spacing: .5px; }

/* ---------- VARIABILI TEMA ---------- */
:root {
  --felt:        #125d2b;
  --felt-dark:   #0a3a1a;
  --felt-deep:   #06230f;
  --amber:       #f0c060;   /* accento competitivo: turno, selezione, allarme */
  --amber-soft:  rgba(240,192,96,.55);
  --gold:        #ffd977;
  --card-w:      56px;
  --card-h:      82px;
  --card-radius: 8px;
  --cardback:    #1d3a63;   /* mazzo blu */
  --cardback2:   #7a2424;   /* mazzo rosso */
  --panel:       rgba(6,32,14,.72);
  --panel-bd:    rgba(240,192,96,.35);
  --txt-soft:    rgba(243,239,226,.6);
  --danger:      #c0392b;
  /* Unica famiglia di easing per tutti i movimenti delle carte (= cardActionTiming). */
  --card-ease:   cubic-bezier(.2,.78,.2,1);
}

/* ---------- CLASSI UTILITÀ ---------- */
.hidden { display: none !important; }
.show    { display: inline-flex !important; }
button { font-family: inherit; cursor: pointer; }

/* ==========================================================================
   VISTE (menu / lobby / tutorial)
   ========================================================================== */
.view { display: none; width: 100%; max-width: 960px; margin: 0 auto; padding: 14px; }
.view.active { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; align-items: center; justify-content: center; }

.menuBox {
  background: var(--panel);
  border: 1px solid var(--panel-bd);
  border-radius: 16px;
  padding: 28px 30px;
  width: 100%; max-width: 560px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(3px);
}
.menuBox h2 { margin: 0 0 6px; font-size: 26px; color: var(--gold); }
.menuBox > p { margin: 6px 0 14px; color: var(--txt-soft); font-size: 14px; }

#menuMain, #menuConfig { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
#menuConfig h2 { font-size: 20px; margin: 0 0 2px; }
#menuConfig .mode { margin: 10px 0; }
#btnConfigBack { align-self: center; margin-top: 8px; }

/* ---------- MENU PRINCIPALE ---------- */
#acctBar {
  position: fixed; inset: 0 0 auto; z-index: 90;
  min-height: 64px; padding: 10px clamp(16px,3vw,40px);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(4,20,12,.72); border-bottom: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 8px 28px rgba(0,0,0,.18); backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.homeLink {
  color: #fff8df; text-decoration: none; font-size: 18px; font-weight: 850;
  letter-spacing: .3px; min-height: 44px; display: inline-flex; align-items: center;
}
.acctChip { display: inline-flex; align-items: center; gap: 10px; }
.acctName { color: rgba(255,255,255,.72); font-size: 14px; }
.acctBtn {
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(255,217,119,.45); color: #fff7de;
  background: rgba(255,255,255,.08); font-size: 14px; font-weight: 750;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
@media (hover:hover){ .acctBtn:hover { background: rgba(255,217,119,.14); border-color: rgba(255,217,119,.8); } }
.acctBtn:focus-visible, .homeLink:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

#view-menu.view.active { padding-top: 78px; overflow-y: auto; }
#view-menu .menuMsg:empty { display: none; }

@media (max-width:767px) {
  #acctBar { min-height: 58px; padding: 7px 14px; }
  .homeLink { font-size: 16px; }
  .acctName { display: none; }
  #view-menu.view.active { padding: 72px 12px 14px; }
}

@media (max-height:500px) and (orientation:landscape) {
  #acctBar { min-height: 50px; padding-block: 3px; }
  #view-menu.view.active { padding: 54px 12px 6px; justify-content: flex-start; }
  #view-menu .menuBox { padding: 10px 20px; }
  #menuMain { gap: 6px; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .acctBtn { transition: none; }
}

.mode { margin: 14px 0; }
.modeTitle { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--txt-soft); margin-bottom: 8px; }
select, input[type=text], input[type=email], input[type=password] {
  width: 100%; padding: 11px 12px;
  background: rgba(0,0,0,.35); color: #fff;
  border: 1px solid rgba(255,255,255,.22); border-radius: 9px;
  font-size: 15px;
}
select:focus, input:focus { border-color: var(--amber); outline: none; }
select option { background: #10241a; color: #fff; }

.btnRow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 4px; }
.btnRow .bigBtn:nth-last-child(1):nth-child(odd) { grid-column: 1 / -1; }
/* Bottoni selezionabili (sostituiscono i menu a tendina del menu config) */
.btnRow3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.segBtn {
  padding: 12px 10px; font-size: 15px; font-weight: 700; border-radius: 10px;
  background: rgba(255,255,255,.08); color: #eee; border: 1px solid rgba(255,255,255,.2);
  transition: transform .12s, box-shadow .12s, background .2s;
}
@media (hover:hover){ .segBtn:hover { background: rgba(255,255,255,.14); } }
.segBtn.active {
  background: linear-gradient(180deg,#e8b64b,#c88a1e); color: #1c1508;
  border-color: #a06f13; box-shadow: 0 3px 10px rgba(0,0,0,.35);
}

.bigBtn, .smallBtn, .uBtn {
  border-radius: 10px; border: 1px solid transparent;
  font-weight: 700; letter-spacing: .4px; transition: transform .12s, box-shadow .12s, background .2s;
}
.bigBtn {
  padding: 13px 18px; font-size: 16px;
  background: linear-gradient(180deg,#e8b64b,#c88a1e);
  color: #1c1508; border-color: #a06f13;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
@media (hover:hover){ .bigBtn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.45); } }
.bigBtn:active { transform: translateY(0); }
.bigBtn.ghost { background: linear-gradient(180deg,#2c5d3f,#1a3f27); color: #eaf6ec; border-color: #2f6a44; }
.smallBtn {
  padding: 9px 14px; font-size: 13px;
  background: rgba(255,255,255,.08); color: #eee; border-color: rgba(255,255,255,.18);
}
@media (hover:hover){ .smallBtn:hover { background: rgba(255,255,255,.14); } }

/* codice / join */
.codeBox {
  font-size: 26px; font-weight: 900; letter-spacing: 4px; color: var(--gold);
  margin: 8px 0; font-variant-numeric: tabular-nums;
}
.joinRow { display: flex; gap: 8px; margin: 12px 0; }
.joinRow select, .joinRow input { flex: 1; }
.hint { font-size: 13px; color: var(--txt-soft); line-height: 1.4; }
.menuMsg { min-height: 20px; color: var(--gold); font-weight: 600; margin-top: 10px; font-size: 14px; }
.menuMsg.err { color: #ff8c80; }

/* lobby */
.lobbySeats { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.seatRow {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  font-size: 15px;
}
.seatRow .avatar { width: 34px; height: 34px; }
.seatRow.empty { color: var(--txt-soft); font-style: italic; }
.seatRow .turn { outline: 2px solid var(--amber); }

/* browser "Cerca partita" (sale d'attesa aperte) */
.browseList { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.browseRow {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  cursor: pointer; text-align: left; transition: transform .12s, box-shadow .12s, background .2s;
}
@media (hover:hover){ .browseRow:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.4); } }
.browseRow:active { transform: translateY(0); }
.browseCode {
  font-weight: 900; letter-spacing: 2px; color: var(--gold);
  min-width: 76px; font-variant-numeric: tabular-nums; font-size: 18px;
}
.browseInfo { flex: 1; font-size: 14px; color: #e6e6e6; }
.browseGo { font-size: 13px; color: var(--amber); font-weight: 700; white-space: nowrap; }
.browseEmpty { color: var(--txt-soft); text-align: center; padding: 22px 10px; font-size: 14px; line-height: 1.5; }
.browseFooter { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }

/* tutorial: la pagina resta ferma, scorrono soltanto le regole */
#view-tutorial.active {
  height: 100dvh; min-height: 0; max-width: 960px; overflow: hidden;
  justify-content: stretch;
  padding: calc(78px + env(safe-area-inset-top))
           calc(14px + env(safe-area-inset-right))
           calc(14px + env(safe-area-inset-bottom))
           calc(14px + env(safe-area-inset-left));
}
#view-tutorial.active .tutBox {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: 720px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y;
  scrollbar-gutter: stable; scrollbar-color: rgba(240,192,96,.65) rgba(0,0,0,.18);
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}
#view-tutorial.active .tutFooter {
  flex: none; display: flex; justify-content: space-between; gap: 10px;
  margin-top: 10px; width: 100%; max-width: 720px;
}
#view-tutorial.active .tutFooter button { min-height: 44px; }

@media (max-height:500px) and (orientation:landscape) {
  #view-tutorial.active {
    padding: calc(56px + env(safe-area-inset-top))
             calc(10px + env(safe-area-inset-right))
             calc(8px + env(safe-area-inset-bottom))
             calc(10px + env(safe-area-inset-left));
  }
  #view-tutorial.active .tutFooter { margin-top: 6px; }
  #view-tutorial.active .tutFooter button { min-height: 44px; padding-block: 8px; }
}

/* ==========================================================================
   AVATAR / BADGE / BARRE
   ========================================================================== */
.avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px;
  background: linear-gradient(180deg,#4a7a5a,#1f4630);
  color: #fff; border: 3px solid var(--felt-dark);
  flex: none; user-select: none; overflow: hidden;
}
.badge, .levelBadge {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; border-radius: 999px;
  background: linear-gradient(180deg,#5b8d6b,#2b5636); color: #fff;
}
.mascot { display: inline-block; }
.mascot.rot { transform: rotate(-8deg); }
/* MASCOT del MENU PRINCIPALE: ridotto e racchiuso in un riquadro */
.xpBar, .progress {
  height: 10px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden;
  width: 120px;
}
.progressFill, .xpBar > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg,var(--amber),var(--gold));
  transition: width .4s ease;
}

/* ==========================================================================
   CARTE
   ========================================================================== */

.card.cartoon {
  position: relative; flex: none;
  container-type: size;
  width: var(--card-w); height: var(--card-h);
  background: linear-gradient(180deg,#f4f4f4,#d9d9d9);
  border: 2px solid #9aa; border-radius: var(--card-radius);
  box-shadow: 0 3px 6px rgba(0,0,0,.4);
  display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; color: #222;
  font-family: "Oswald", "Arial Narrow", system-ui, sans-serif;
}
.card.cartoon.red { color: #c22f24; }
/* Angolo "Oswald ingrandito" (immagine scelta da Thierry 2026-09-30): valore e
   seme piccolo in colonna, CENTRATI tra loro dentro l'angolo (text-align:center);
   l'angolo ha lo stesso margine in alto a sinistra su tutte le carte. */
.card.cartoon .corner { position: absolute; top: clamp(1px,4cqh,4px); left: clamp(2px,7cqw,5px); line-height: .86; font-weight: 700; text-align: center; }
.card.cartoon .corner .cr { font-size: clamp(9px,23cqh,20px); letter-spacing: -.02em; }
.card.cartoon .corner .cs { font-size: clamp(8px,17cqh,15px); }
.card.cartoon .big { font-size: clamp(10px,min(61cqw,42cqh),48px); font-weight: 700; }
/* Jolly: nell'angolo c'è solo la stella. Occupa lo stesso riquadro del valore
   delle altre carte (stessa altezza e larghezza del numero), così tutte le carte
   hanno lo stesso margine in alto a sinistra. */
.card.cartoon.joker .corner .cs { font-size: clamp(9px,23cqh,20px); line-height: .86; }
.card.cartoon.selected { outline:none; transform: translateY(-8px); box-shadow: none; }
/* iOS WebKit adds a translucent touch overlay to overlapping hand cards. */
#view-game .playerCard.mine .pcMyHand, #view-game .playerCard.mine .pcMyHand .card {
  -webkit-tap-highlight-color: transparent;
}

 /* compressione base */

/* dorso */
.card.back.cartoon {
  color: #fff;
  background: repeating-linear-gradient(45deg,var(--cardback),var(--cardback) 4px,#244a7a 4px,#244a7a 8px);
  border: 2px solid rgba(255,255,255,.15);
  box-shadow: none;
}
.card.back.cartoon.deck1 {
  background:repeating-linear-gradient(45deg,var(--cardback2),var(--cardback2) 4px,#6a1d1d 4px,#6a1d1d 8px);
}

/* Mani coperte rivolte verso il rispettivo giocatore, come la mano locale.
   La pesca nasce già con questa rotazione e cambia soltanto posizione e scala. */
.card.cartoon.rot180 { transform: rotate(180deg); }
.card.cartoon.rot90  { transform: rotate(90deg); }
.card.cartoon.rot-90 { transform: rotate(-90deg); }
.card.cartoon.micro { width: 40px; height: 60px; }
.card.cartoon.micro .big { font-size: clamp(8px,min(61cqw,42cqh),28px); }
.card.cartoon.micro .corner .cr { font-size: clamp(7px,23cqh,20px); letter-spacing: -.02em; }
.card.cartoon.micro .corner .cs { font-size: clamp(6px,17cqh,15px); }

/* ==========================================================================
   VISTA GAME — PORTRAIT
   ========================================================================== */
#view-game.active {
  /* Ancorata ai quattro bordi: nessuna altezza fissa in vh/dvh, che nell'app
     installata su iPad può risultare più corta dello schermo (fascia in basso). */
  position: fixed; inset: 0; width: 100%; height: auto;
  background: radial-gradient(ellipse at 50% 100%, #04120a 0%, #0b3b1c 70%, #0e4a20 100%);
  max-width: none; display: flex; flex-direction: column; padding: 0;
  justify-content: flex-start; overflow: hidden;
}

/* HUD */


/* Badge di stato connessione (riconnessione/rientro) */
.connBadge {
  display: inline-block; margin-left: 8px; padding: 2px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  vertical-align: middle; white-space: nowrap;
  border: 1px solid;
}
.connBadge[data-state="online"]   { color:#b6f0c3; border-color:#2f7a44; background:rgba(31,104,53,.35); }
.connBadge[data-state="offline"]  { color:#ffcf8c; border-color:#a86a17; background:rgba(148,92,15,.4); }
.connBadge[data-state="rejoin"]   { color:#bfe0ff; border-color:#2f6ba8; background:rgba(31,96,148,.45); }
.connBadge[hidden] { display:none; }

/* pannello avversari (nomi + dorsi + turno) */


/* carte SCOPERTE (fine smazzata) nelle mani avversarie: stesse dimensioni dei dorsi */

/* ==========================================================================
   CONTENITORE GIOCATORE UNIFICATO (playerCard).
   Stessa forma moderna per avversari E compagno di squadra: avatar circolare
   con badge di stato online (in alto a destra), nome, carte in mano, countdown
   del turno (se è il suo) e punti della partita in corso.
   ========================================================================== */
.playerCard {
  display: inline-flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg,#0f5a17,#062b0b);
  border: 3px solid #06330b; border-radius: 16px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.42);
  padding: 10px 16px; position: relative;
}
/* il turno è evidenziato SOLO dal colore del bordo ambrato: manteniamo la STESSA
   ombra (inset + esterna) della card non attiva, così l'elemento NON salta/si muove
   quando diventa di turno. Niente box-shadow none (faceva sparire l'ombra e la card
   'saltava'), niente transizione (l'hanno tolta per lo stesso motivo). */
.playerCard.active {
  border-color: var(--amber);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.42);
}
/* avatar + badge online (pallino in alto a destra dell'avatar) */
.pcAvatarWrap { position: relative; display: flex; }
.pcAvatarWrap .avatar { width: 48px; height: 48px; border-color: #ffffffcc; }
.pcAvatarWrap .pcOnline {
  position: absolute; top: -3px; right: -3px; width: 15px; height: 15px;
  border-radius: 50%; border: 2px solid #06230f;
  box-shadow: 0 0 6px rgba(0,0,0,.5);
}
/* gradi di stato: on (verde, umano connesso) · bot (ambra tenue, AI) · off (giallo, in attesa) */
.pcOnline.on  { background: #34d399; box-shadow: 0 0 7px rgba(52,211,153,.6); }
.pcOnline.bot { background: #9aa7b0; box-shadow: 0 0 5px rgba(154,167,176,.4); }
.pcOnline.off { background: #ffb020; box-shadow: 0 0 7px rgba(255,176,32,.5); }
/* corpo: nome + info */
.pcInfo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.pcName {
  font-size: 14px; font-weight: 800; letter-spacing: .5px; color: #fff;
  text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.4);
  max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcRowTop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* dorsi della mano (o carte scoperte a fine smazzata) */
.pcHand { display: flex; align-items: center; gap: 0; }
.handBackStack { --back-stack-step: 20px; }
.pcHand .card.back.cartoon.micro { width: 20px; height: 28px; margin-left: -14px; }
.pcHand .card.back.cartoon.micro:first-child { margin-left: 0; }
.pcHand .card.cartoon.micro { width: 20px; height: 28px; margin-left: -14px; font-size: 8px; }
.pcHand .card.cartoon.micro:first-child { margin-left: 0; }
/* variante COMPACT (compagno in alto, tbCenter): avatar e info più piccoli, orizzontali */
.playerCard.compact { padding: 7px 12px; border-radius: 14px; }
.playerCard.compact .pcAvatarWrap .avatar { width: 40px; height: 40px; font-size: 20px; }
.playerCard.compact .pcName { font-size: 12px; }
.playerCard.compact .pcRowTop { font-size: 11px; }
.playerCard.compact .pcHand .card.back.cartoon.micro { width: 16px; height: 23px; margin-left: -11px; }
.playerCard.compact .pcHand .card.cartoon.micro { width: 16px; height: 23px; margin-left: -11px; font-size: 7px; }
/* variante TOP (nord in alto, compagno/avversario): barra BASSA E LUNGA.
   Thierry: gap 12px, padding left 12 / top 6, flex-direction ORIZZONTALE,
   text-align CENTER. height fisso così la surface sotto non scende. */
.playerCard.top {
  flex-direction: row; gap: 12px; text-align: center;
  padding: 6px 12px 6px 12px; border-radius: 16px; min-width: 340px; height: 88px;
}
.playerCard.top .pcAvatarWrap .avatar { width: 44px; height: 44px; border-color: var(--amber); }
/* Disposizione come nei LATERALI (avatar → nome → carte) ma ORIZZONTALE:
   dentro pcInfo il NOME e le CARTE stanno sulla stessa riga (sinistra→destra). */
.playerCard.top .pcInfo { flex-direction: row; align-items: center; gap: 12px; }
.playerCard.top .pcName { font-size: 13px; max-width: 230px; white-space: nowrap; }
.playerCard.top .pcRowTop { display: none; }  /* fascia già compatta: le carte fanno da terzo elemento */
/* Card del COMPAGNO: ALTEZZA = larghezza della playercard ovest (64px).
   LUNGHEZZA = 450px.
   Stessi spazi interni dell'ovest: AVATAR → gap → NOME → gap → CARTE.
   Le CARTE occupano tutto lo spazio restante (flex:1). Contenuto a sinistra. */
#cellNorth .playerCard.top { min-width: 450px; width: 450px; height: 64px; justify-content: flex-start; align-items: center; gap: 12px; }
#cellNorth .playerCard.top .pcInfo { flex-direction: row; align-items: center; gap: 12px; flex: 1 1 auto; }
/* La mano nord usa lo stesso stack dei lati, ruotato sul proprio asse. */
#cellNorth .playerCard.top .handBackStack { flex-direction: row; align-items: center; flex: 1 1 0; min-width: 0; align-self: stretch; gap: 0; justify-content: normal; }
#cellNorth .playerCard.top .pcHand .card.back.cartoon.micro,
#cellNorth .playerCard.top .pcHand .card.cartoon.micro { width: 26px; height: 40px; flex: 0 0 auto; font-size: 9px; }
#cellNorth .playerCard.top .handBackStack .card.back.cartoon.micro:not(:first-child) {
  margin-left: calc(var(--back-stack-step) - var(--back-card-w, 26px));
}
#cellNorth .playerCard.top .handBackStack .card.cartoon.micro:not(.back):not(:first-child) {
  margin-left: calc(var(--back-stack-step) - var(--back-card-w, 26px));
}
/* TABLET-NORTH: la postazione nord lascia libera la fascia dei comandi a destra.
   Riga = punteggio (190) + gap + Computer 2 + gap + punteggio (190), centrata, con
   lo spazio dei comandi riservato su entrambi i lati: Computer 2 si allarga fino a
   450px solo quando c'è posto, così nomi, punteggi e pulsanti non si toccano. */
@media (min-width:768px) and (max-width:1023px) and (min-height:501px), (pointer:coarse) and (min-width:768px) and (max-width:1439px) and (min-height:501px) {
  .tbTopRow { gap:12px; }
  #tbMain .tbTopRow .scoreCard { width:190px; min-width:190px; }
  #tbMain .tbTopRow .scoreCard .scNames .scName { max-width:80px; }
  #cellNorth .playerCard.top { min-width:0; width:clamp(220px,calc(100vw - 716px),450px); }
  #cellNorth .playerCard.top .pcName { max-width:118px; }
  #cellNorth .playerCard.top .handBackStack { --back-stack-step:12px; }
}
/* Tablet stretti (finestre 768-1023px): resta solo la X di uscita in alto a destra. */
@media (min-width:768px) and (max-width:1023px) and (min-height:501px) {
  .tbBtns #btnTutGameL, .tbBtns #btnFullscreenL { display:none; }
  #cellNorth .playerCard.top { width:clamp(220px,calc(100vw - 516px),450px); }
}

/* variante MINE (tutta la barra in basso): un unico playerCard largo quanto il
   campo da gioco. Il profilo (avatar+nome+punti+timer) sta a SINISTRA, e il
   blocco delle carte VERE grandi della mano è CENTRATO sul monte scarti / centro
   del campo (x=700). */
/* Il playerCard 'mine' è un FLEX con 3 zone:
   [pcMineLeft (avatar+info)][pcMyHand (carte)][pcMineBal (spazio di bilanciamento)].
   La barra ha larghezza contenuta e la mano resta COMPATTA raggruppata al centro,
   senza sparpagliarsi su tutta la larghezza del campo. */
.playerCard.mine {
  width: 100%;                   /* riempie #tmBox (barra del profilo larga, "allarga al 80%" del campo) */
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 24px; padding: 10px 16px; border-radius: 16px;
}
.playerCard.mine .pcMineLeft { display: flex; align-items: center; gap: 14px; }
.playerCard.mine .pcAvatarWrap .avatar { width: 48px; height: 48px; border-color: var(--amber); }
.playerCard.mine .pcName { font-size: 14px; max-width: 200px; white-space: nowrap; }
.playerCard.mine .pcRowTop { flex-wrap: wrap; }
/* blocco carte: raggruppa TUTTE le carte della mano al centro (flex-start),
   così le carte restano COMPATTE vicine tra loro e non si distribuiscono.
   Il calcolo dell'overlap legge la larghezza di questo contenitore. */
.playerCard.mine .pcMyHand {
  min-width: 0; flex: 1 1 auto;
  display: flex; align-items: flex-end; gap: 0;
  flex-wrap: nowrap; overflow: visible; justify-content: center;
}
/* Selezione e deselezione scorrono (140ms) invece di scattare. Le copie in
   volo vivono fuori da .pcMyHand e non ereditano questa transizione. */
.playerCard.mine .pcMyHand .card.cartoon { cursor: pointer; transition: transform 140ms var(--card-ease); }
.playerCard.mine .pcMyHand.handReordering { cursor: grabbing; }
/* Trascinamento: la carta segue il dito con `translate` (render.js, in rAF);
   qui solo sollevamento e ombra. box-shadow, mai filter:drop-shadow (WebKit). */
.playerCard.mine .pcMyHand .card.handDragging {
  cursor: grabbing;
  /* niente z-index alto: l'ordine di sovrapposizione lo fissa render.js
     (la carta a destra resta sopra, decisione 2026-10-03) */
  transform: translateY(-10px) scale(1.06);
  box-shadow: 0 12px 16px rgba(0,0,0,.42);
  transition: transform 140ms var(--card-ease), box-shadow 140ms var(--card-ease);
}

/* le carte stanno dentro il playerCard 'mine' */


/* variante SIDE (corsie laterali west/east): impilata verticalmente, STRETTA e
   LUNGA per correre lungo tutta la corsia laterale. Altezza = 4/5 del campo
   (le celle west/east coprono l'intera riga surface; height:80% si centra nella cella). */
.playerCard.side {
  flex-direction: column; gap: 12px; width: 64px; height: 80%;
  padding: 16px 6px; border-radius: 16px; text-align: center;
}
.playerCard.side .pcAvatarWrap .avatar { width: 52px; height: 52px; }
.playerCard.side .pcInfo { align-items: center; gap: 8px; }
/* Nome ORIZZONTALE ruotato in VERTICALE (gira per leggere lungo la corsia):
   "Computer 1" sta per TUTTA la sua lunghezza senza essere tagliato. */
.playerCard.side .pcName {
  font-size: 13px; max-width: 60px;
  writing-mode: vertical-rl; white-space: nowrap; letter-spacing: .5px;
}
/* Nella card EST il nome verticale gira di 180° (leggibile dalla direzione opposta). */
#cellEast .playerCard.side .pcName {
  transform: rotate(180deg);
}
.playerCard.side .pcRowTop { justify-content: center; gap: 6px; font-size: 12px; }
.playerCard.side .pcHand {
  flex: 1 1 auto;                 /* occupa tutta l'altezza verticale della corsia */
  flex-direction: column;         /* impilate in verticale lungo la corsia */
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding-top: 0;
  min-height: 0;
}
/* Overlap UNIFORME su TUTTE le carte, PRIMA COMPRESA: stessa identica identità
   di margine → stesso centro di rotate(90) → nessuna carta sporge lateralmente.
   NOTA: annulliamo il margin-left:-14px delle regole base `.pcHand` (che dava
   alla PRIMA carta margin-left:0 → la spostava di +14px rispetto alle altre). */
.playerCard.side .handBackStack .card.back.cartoon.micro { width: 26px; height: 40px; margin-left: 0; flex: 0 0 auto; }
.playerCard.side .handBackStack .card.cartoon.micro { width: 26px; height: 40px; margin-left: 0; flex: 0 0 auto; font-size: 9px; }
/* Passo verticale = --back-stack-step, ristretto da render.js (fitHandStacks)
   quando la corsia è più corta della pila: le carte non escono mai dal box. */
.playerCard.side .handBackStack .card.cartoon.micro:not(:first-child) { margin-top: calc(var(--back-stack-step) - var(--back-card-h, 40px)); }
.playerCard.side .handBackStack .card.cartoon.micro:first-child { margin-top: 0; }
.playerCard.side .pcHand .card.back.cartoon.micro:first-child { margin-left: 0; }
.playerCard.side .pcHand .card.cartoon.micro:first-child { margin-left: 0; }


/* board portrait */


.pile {
  width: var(--card-w); height: var(--card-h);
  background: var(--panel); border: 2px solid rgba(255,255,255,.25);
  border-radius: var(--card-radius);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 30px; color: var(--txt-soft);
}
.pile.tapHint { border-color: var(--amber); }

/* due pannelli NOI / LORO portrait */


/* mano portrait */


.sortBar { display: flex; justify-content: flex-end; margin: 2px 0; }
.sortToggle {
  padding: 5px 11px; border-radius: 9px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .3px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  transition: background .15s, transform .1s;
}
@media (hover:hover){ .sortToggle:hover { background: rgba(255,255,255,.14); } }
.sortToggle:active { transform: translateY(1px); }
/* Modalità "stesso valore": A→A. */
.sortToggle .stIcon { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }

/* ==========================================================================
   VISTA GAME — LANDSCAPE (tablet / desktop)
   ========================================================================== */
#tbWrap {
  display:flex; position:absolute; inset:0; flex-direction:column; overflow:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* ---- TOP: bande punteggio in alto, bottoni a destra ---- */
/* box punteggio: uno a SINISTRA della card (#tScoreL = NOI) e uno a DESTRA
   (#tScoreR = LORO), ognuno con il suo .scoreCard. Vivono nel flex .tbTopRow. */
#tScoreL, #tScoreR { display: flex; align-items: center; min-width: 0; }
/* compagno al CENTRO */
/* bottoni a DESTRA */
.tbBtns { display:flex; align-items:center; gap:6px; flex:0 0 auto; margin-left:auto; }

/* BANDE PUNTEGGIO in alto: NOI e LORO. Sagoma STABILE (min-width+min-height):
   i box non cambiano forma quando nomi/punti cambiano né quanto fatture cambiano. */
#tbMain .tbTopRow .scoreCard {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 5px 8px; border-radius: 12px;
  background: var(--panel); border: 2px solid rgba(255,255,255,.18);
  font-size: 15px; font-weight: 700; color: #fff;
  /* forma fissa: non si allarga/strizza col contenuto; altezza = playercard nord (64px) */
  min-width: 150px; height: 64px; flex: 0 0 auto;
}
/* RIGA NOMI: "io - compagno" (o solo il nome) orizzontale con separatore "-" */
#tbMain .tbTopRow .scoreCard .scNames {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  white-space: nowrap; font-size: 12px; font-weight: 700;
}
#tbMain .tbTopRow .scoreCard .scNames .scName {
  max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #fff;
}
#tbMain .tbTopRow .scoreCard .scSep { color: var(--txt-soft); font-weight: 400; }
/* riga centrale: punteggio smazzata/partita + box pinella AFFIANCATI (sotto i nomi) */
#tbMain .tbTopRow .scoreCard .scRow { display: flex; align-items: center; gap: 10px; }
#tbMain .tbTopRow .scoreCard .scCounterWrap { display: inline-flex; align-items: center; }
/* counter "punti smazzata / punti partita" (es. 0/0) — più grande */
#tbMain .tbTopRow .scoreCard .scCounter {
  font-size: 21px; font-weight: 800; color: var(--gold);
  background: rgba(0,0,0,.22); padding: 2px 10px; border-radius: 999px;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1;
}
/* pinella più grande */
#tbMain .tbTopRow .scoreCard .scPoz {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; border-radius: 7px; font-size: 14px; font-weight: 800;
  background: rgba(0,0,0,.3); color: var(--txt-soft);
}
/* pozzetto PRESO (✓): il segnalino si illumina (bordo ambra + bagliore) */
#tbMain .tbTopRow .scoreCard .scPoz.took {
  background: rgba(240,192,96,.25); color: var(--gold);
  border: 1px solid var(--amber); box-shadow: 0 0 8px var(--amber-soft);
}
#tbMain .tbTopRow .scoreCard.turn { border-color: var(--amber); }

/* raggruppa banda + centro siblings */
/* #tbCenter: centro in alto, ospita il .playerCard.compact del compagno */

/* bottoni (tutorial + X) assoluti a DESTRA nella fascia north: stessa riga
   della card del compagno, sopra il campo da gioco. */
.tbBtns {
  position: absolute; top: 6px; right: 8px;
  display: flex; align-items: center; gap: 6px; z-index: 6;
}
.tbBtns button {
  padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.09); color: #eee; font-size: 12px; font-weight: 700;
}
/* (timer spostato sopra il bottone ordina) */
#btnExitL2 { display: none; }

/* ---- TABELLONE: plancia classica 3x3 (Nord/W/Sud/E) ----
   Nord = atleta/compagno in alto, West/East = avversari laterali,
   centro = i 2 pannelli NOI/LORO + mazzetto/monte, Sud = la mia mano. */
#tbMain {
  flex: 1 1 auto; min-height: 0; min-width: 0; position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0,1fr) 84px;
  /* riga superiore (north): il compagno/avversario in alto, sempre visibile */
  grid-template-rows: 64px 1fr;
  grid-auto-rows: 0;   /* nessuna riga implicita in più sotto (elimina il vuoto) */
  grid-template-areas:
    "north north  north"
    "west  surface east";
  gap: 6px; padding: 6px 10px 2px 10px;   /* fondo 2px: avvicina la surface alla playercard mine */
  overflow: hidden;
}
/* RIGA SUPERIORE: [box NOI][card compagno][box LORO] affiancati, tutti centrati
   e ADIACENTI (flex row, niente spazi tra loro). */
.tbTopRow {
  grid-area: north;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 64px;
}
/* Desktop/tablet retain their adjacent row; phones use matching field grids. */
.tbTopSurface, .tbNorthSlot, .tbNorthSeat, .tbScoreSlot, .tbScorePair { display:contents; }
.tbTopRow #tScoreL { order:0; }
.tbTopRow #cellNorth { order:1; }
.tbTopRow #tScoreR { order:2; }
#cellNorth{display:flex; align-items:center; justify-content:center; height:64px; min-height:64px; overflow:visible; position:relative;}
/* La riga north ospita il COMPAGNO come card LANDSCAPE ORIZZONTALE (avatar a
   sinistra, nome+carte affiancati): altezza fissa 88px così la surface non salta. */
#cellWest{grid-area:west;  display:flex; align-items:center; justify-content:center; position:relative; overflow:visible;}
#cellEast{grid-area:east;  display:flex; align-items:center; justify-content:center; position:relative; overflow:visible;}
/* la mano è in #tMine; SENZA grid-area per non creare righe implicite */
#tbSurface {
  grid-area: surface;
  position: relative;   /* contesto di posizionamento per mazzetto (#tblTalon) e monte (#tblDiscard) */
  display: flex; flex-direction: row; align-items: stretch; justify-content: space-between;
  gap: 4px; min-height:0; --table-center-lane: calc(var(--card-w) + 20px);
  height: 100%;   /* riempie tutta la riga della griglia: niente spazio vuoto sotto i pannelli */
}
.tblZone {
  flex: 0 0 calc((100% - var(--table-center-lane) - 4px) / 2);
  min-width: 0; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 10px;
  container-type: size;
  overflow: hidden;   /* MAI scroll: le carte si comprimono (overlap) per stare dentro */
}
#tblNoi  { order: 0; }
#tblLoro { order: 1; }
.tblZone .melRow {
  /* Le CALATE stanno tutte su una riga. Quando la larghezza non basta, le pile
     si sovrappongono progressivamente invece di creare una seconda fila. */
  display: flex;
  flex-direction: row;      /* calate fianco a fianco */
  flex-wrap: nowrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--field-col-gap, 14px);
  width: 100%; height: 100%; min-height: 0;
}
.tblZone .melRow .meld { }
.tblZone .meld {
  width: var(--card-w); min-width:0; min-height:0; flex: 0 0 var(--card-w); display: flex; flex-direction: column;
  align-items: flex-start; gap: 0; background: transparent; border: 0; padding: 0;
  position:relative; isolation:isolate; cursor: default; border-radius: calc(var(--card-radius) + 3px); outline: none;
}
.tblZone .meld.meldAttachable { cursor: pointer; }
.tblZone .meld::before { content:""; position:absolute; inset:-2px; border-radius:inherit; }
.tblZone .meld:focus-visible {
  box-shadow: 0 0 0 3px var(--gold), 0 8px 24px rgba(0,0,0,.34);
}
.tblZone .melRow .meld:not(:first-child) { margin-left: calc(0px - var(--field-meld-overlap, 0px)); }
.tblZone .meld .card.cartoon.micro {
  width: var(--card-w); height: var(--card-h); border-radius: var(--card-radius);
}
/* Spaziatura statica: le calate non devono "stringersi" animando a ogni render. */
.tblZone .meld .card:not(:first-child) { margin-top: calc(0px - var(--meld-overlap, var(--field-card-overlap, 42px))); }
/* Stessi glifi della mano; solo i campi densi comprimono le carte. */
.tblZone .card.cartoon.micro .big { font-size: clamp(10px,min(61cqw,42cqh),48px); }
.tblZone .card.cartoon.micro .corner .cr { font-size: clamp(9px,23cqh,20px); }
.tblZone .card.cartoon.micro .corner .cs { font-size: clamp(8px,17cqh,15px); }
.tblZone .meldPts {
  align-self: center; margin-top: 4px; font-size: 24px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.7);
  animation: meldPointsLifetime 1s linear both;
  pointer-events: none;
}
@keyframes meldPointsLifetime {
  0%, 80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(3px); }
}

@media (prefers-reduced-motion:reduce){
  .tblZone .meld .card.cartoon.micro { transition:none; animation:none; }
}

/* mazzetto + monte scarti al centro, sempre visibili */
#tblTalon, #tblDiscard {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: var(--card-w); min-height: var(--card-h);
  border-radius: var(--card-radius);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  font-size: 26px; color: #fff;
}
#tblTalon {
  top: 10px;   /* allineato al TOP del box centrale (non al centro) */
}
/* Area di tocco di almeno 44x44px anche col mazzetto orizzontale del telefono
   (41px di spessore), senza cambiarne la grafica. */
#tblTalon::after {
  content:""; position:absolute; left:50%; top:50%;
  width:max(100%,44px); height:max(100%,44px); transform:translate(-50%,-50%);
}
#tblDiscard {
  /* allineato subito SOTTO il mazzetto (stesso left, stessa larghezza) */
  left:50%; transform:translateX(-50%);
  top: calc(10px + var(--card-h) + 12px);   /* proprio sotto il mazzetto */
  background: transparent; border: 0; color: #222;
}
/* Corsia centrale in cui il monte cresce, fino alla mia mano: toccarla scarta
   la carta selezionata (app.js). Sta SOTTO mazzetto e monte, che restano i
   bersagli dei loro tocchi. */
#tblDiscardLane {
  position:absolute; left:50%; transform:translateX(-50%);
  top:0; bottom:0; width:var(--table-center-lane);
  z-index:0; background:transparent;
}
#tblTalon, #tblDiscard { z-index:1; }
/* stack del monte: cresce verso il BASSO, mostra tutte le carte in verticale */
#tblDiscard .discardStack {
  display:flex; flex-direction:column; align-items:center;
  min-width:var(--card-w);
}
#tblDiscard .discardStack .card {
  width:var(--card-w); height:var(--card-h);
  background: linear-gradient(180deg,#f4f4f4,#d9d9d9); border:2px solid #9aa;
  border-radius:var(--card-radius);
  z-index:auto;
}
#tblDiscard .discardStack .card + .card { margin-top:calc(-1 * var(--discard-overlap, 62px)); }

/* ---- MANO IN BASSO (box come le AI, carte in fila) ---- */
#tMine {
  /* Posto NEL FLUSSO di #tbWrap (flex column), DOPO i campi da gioco: niente
     position:absolute, quindi NON si sovrappone al tavolo. */
  flex: none; display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 120px;
  position: relative;
  /* Padding = corse laterali, così la zona utile coincide con lo spazio tra i campi. */
  padding: 6px 100px;
  overflow: visible;
}
#tmBox {
  /* Il playerCard (80% del campo) è CENTRATO: margin:0 auto. */
  display: flex; align-items: center; gap: 10px; width: 80%; min-width: 0;
  margin: 0 auto;
  padding: 0;
}
#tmLeft { flex: 1 1 auto; min-width: 0; }   /* la barra = playerCard wide */

#tmRight {
  /* Bottoni (suono, ordina): in COLONNA a sinistra della playercard (#tmLeft).
     Stretch = stessa altezza della card.
     I bottoni flex:1 si dividono lo spazio (sort metà, sound metà), stesse dimensioni. */
  display: flex; flex-direction: column; align-self: stretch;
  justify-content: center; align-items: stretch; gap: 6px; z-index: 2;
  flex: 0 0 auto; width: auto;
  --tool-size:clamp(44px,min(6.4dvh,5vw),50px);
}
/* ORDINA e SUONO: uno sopra l'altro, due bottoni IDENTICI (quadrati, stesso
   sfondo, bordo, raggio e colore icona) su telefono, tablet e desktop. */

#tmRight .sortBar { display:flex; flex:0 0 auto; margin:0; }
#tmRight .handTool, #btnSoundPhone {
  box-sizing:border-box; flex:0 0 var(--tool-size);
  width:var(--tool-size) !important; height:var(--tool-size) !important;
  min-width:var(--tool-size) !important; min-height:var(--tool-size) !important;
  display:flex; align-items:center; justify-content:center; margin:0; padding:0;
  border-radius:12px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  font:800 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:0;
  cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:background .15s, transform .1s;
}
@media (hover:hover){ #tmRight .handTool:hover, #btnSoundPhone:hover { background:rgba(255,255,255,.14); } }
#tmRight .handTool:active, #btnSoundPhone:active { transform:translateY(1px); }
#tmRight .handTool .toolIcon, #btnSoundPhone .toolIcon { width:58%; height:58%; display:block; }
#btnSoundPhone { display:none; }
#tmRight .handTool .stIcon { gap:1px; font-size:12px; }
/* Colonna destra: timer (il bottone uscita è nella fascia punteggi). */
#tmTimerCol { display:flex; flex-direction:column; align-items:center; gap:6px; align-self:flex-start; flex:0 0 auto; }

/* ==========================================================================
   TIMER DI TURNO (2 fasi, vicino al mio nome)
   ========================================================================== */
#turnTimer {
  align-self: center;       /* in cima alla colonna #tmTimerCol */
  background: #17172a; color: #fff; font-weight: 900; font-size: 14px;
  padding: 6px 12px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.25);
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
  pointer-events: none; font-variant-numeric: tabular-nums;
  /* TIMER GENERALE unico: sta a DESTRA della mia playercard. */
}
#turnTimer.low { background: var(--danger); border-color: #ff8484; animation: timerPulse 1s ease-in-out infinite; }
/* Fuori turno il timer resta al suo posto ma invisibile: la barra della mano
   non si allarga e non salta quando cambia il turno. */
#tmBox #turnTimer.hidden { display: block !important; visibility: hidden; }
@keyframes timerPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

/* ==========================================================================
   MODALI (auth, regole, start prompt, overlay)
   ========================================================================== */
.modal, .overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6);
}
.modalBox, .overlayBox {
  width: 92%; max-width: 420px; max-height: 88vh; overflow-y: auto;
  background: #0f2b1a; border: 1px solid var(--panel-bd);
  border-radius: 14px; padding: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.modalBox h3, .overlayBox h3 { color: var(--gold); margin: 0 0 10px; }
.modalBox p, .overlayBox p { color: #e8e4d8; line-height: 1.5; }
.exitConfirmBox { max-width:470px; margin-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right)); }
.exitConfirmBox h2 { margin:0 0 10px; color:#fff4df; font-size:clamp(18px,4dvh,24px); }
.exitConfirmBox p { margin:0 0 18px; }
.exitConfirmActions { display:flex; gap:10px; flex-wrap:wrap; }
.exitConfirmActions button { flex:1 1 150px; min-height:44px; }
#btnExitConfirm { background:#9d1e26; color:#fff; border:1px solid #fa8387; }
.modalBox label { display: block; margin: 10px 0 4px; font-size: 13px; color: var(--txt-soft); }
.modalBox .divider { text-align: center; margin: 12px 0; color: var(--txt-soft); font-size: 12px; }
.authMsg, .rulesNote { min-height: 16px; color: var(--gold); font-size: 13px; margin-top: 8px; }
.rulesBody { font-size: 14px; color: #eee; line-height: 1.6; margin: 10px 0; }
.rulesBody b { color: var(--gold); }

/* tabs auth */
.tabs { display: flex; gap: 0; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.15); }
.tabs button {
  flex: 1; padding: 9px; background: transparent; border: none; color: var(--txt-soft);
  font-weight: 700; border-bottom: 3px solid transparent;
}
.tabs button.active { color: var(--gold); border-bottom-color: var(--amber); }

/* start prompt */
#startPrompt .modalBox { max-width: 460px; text-align: center; }

/* ==========================================================================
   FEEDBACK / ANIMAZIONI / TOAST
   ========================================================================== */
#msg.toastMsg {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 400;
  background: rgba(0,0,0,.8); border: 1px solid var(--amber);
  padding: 10px 18px; border-radius: 10px; font-size: 15px;
  animation: toastIn .3s ease;
}
@keyframes toastIn { from{opacity:0; transform:translate(-50%,8px)} to{opacity:1; transform:translate(-50%,0)} }

.seatRow .avatar { border-color: var(--amber); }

/* evidenza giocatore attivo nei posti */


/* queste regole vuote le rimuovo subuto */

/* compat ID specifici modali */
#authModal.modal { }
#rulesModal.modal { }
#startPrompt.modal { }


/* ==========================================================================
   COMPATIBILITÀ — selettori residui usati dal JS (render/app/feedback/av)
   ========================================================================== */


.melRow { display:flex; flex-wrap:wrap; gap:5px; }
.melRow.teamRow { }
.meld { display:flex; flex-direction:column; align-items:center; }

.meldPts { }

.matchOver { }

.fieldCompact { }
.toastMsg { }

#msg { text-align:center; color:#fff; font-weight:700; padding:6px; min-height:0; }
/* Slot messaggi: quando è vuoto NON deve mostrare il box (niente pillola dorata
   flottante tra la mano e il mazzetto). Appare solo quando c'è un messaggio. */
#msg:empty { display:none; }
#view-game.active > #msg {
  position:absolute; bottom:134px; left:50%; transform:translateX(-50%); z-index:40;
  background:rgba(0,0,0,.65); border:1px solid var(--amber); border-radius:10px; padding:6px 16px; max-width:90vw;
}


/* ==========================================================================
   SELEZIONE CARTE — animazione + toast/feedback fingerprint
   ========================================================================== */
/* il wiggle parte SOLO sulla carta appena toccata (one-shot, vedi render.js).
   La classe .selected è uno stato persistente e NON deve riavviare l'animazione
   ad ogni re-render, altrimenti saltellano tutte le carte già selezionate. */
.card.cartoon.justWiggled,
.card.justWiggled { animation: selectWiggle .18s ease; }
@keyframes selectWiggle { 0%{transform:translateY(0)} 40%{transform:translateY(-11px)} 100%{transform:translateY(-8px)} }

/* tapHint del mazzetto/monte */
.pile.tapHint { }
#tblTalon.tapHint, #tblDiscard.tapHint { animation:none; }
#tblTalon.tapHint::before, #tblDiscard.tapHint::before { display:none; }

/* ==========================================================================
   ANTI-ALONE sulle calate (i meld non hanno bagliori luminosi attorno)
   ========================================================================== */
.tblZone .meld { background:transparent; border-color:transparent; box-shadow:none; }

/* I mazzi sovrapposti non devono proiettare una striscia scura sul fronte
   della carta successiva (calate e monte); le carte isolate conservano l'ombra. */
.tblZone .meld .card.cartoon, #tblDiscard .discardStack .card.cartoon { box-shadow:none; }
.tblZone .card.cartoon.burracoSideways {
  /* La rotazione sposta in basso il bordo visibile di (h-w)/2: compensalo,
     così il segnalino mantiene lo stesso passo delle carte sopra e sotto. */
  transform:translateY(calc((var(--card-w, 56px) - var(--card-h, 82px)) / 2)) rotate(90deg);
  z-index:3;
  outline:none;
}
.tblZone .card.cartoon.burracoBottomCover { z-index:8; }

/* Contatore carte rimaste nel mazzetto */
.talonCount {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  /* Più aria attorno al numero (richiesta 2026-09-30): padding interno 5px/10px. */
  min-width:34px; height:auto; padding:5px 10px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  background:#17172a; color:#ffd977; font-weight:900; font-size:13px; line-height:1;
  font-variant-numeric:tabular-nums;
  border:2px solid rgba(255,255,255,.35); border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
  pointer-events:none;
}

/* Mano: le carte si SOVRAPPONGONO (overlap) quando sono troppe, invece di scrollare.
   --hand-overlap è calcolato da render.js (applyHandSpacing). Si applica alla
   mano #myCards e a quella dentro il playerCard 'mine'
   (.pcMyHand), così le carte si sovrappongono anche lì e NON escono dal contenitore. */
.playerCard.mine .pcMyHand .card.cartoon + .card.cartoon {
  margin-left: calc(-1 * var(--hand-overlap, 0px));
}

.playerCard.mine .pcMyHand { gap:0; overflow-x:visible; }

/* ==========================================================================
   MONTE SCARTI VUOTO — zona segnaletica "Scarta qui"
   ========================================================================== */
#tblDiscard .discardEmptyHint {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; width: var(--card-w); height: var(--card-h);
  border: 2px dashed rgba(240,192,96,.6);
  border-radius: var(--card-radius);
  background: rgba(240,192,96,.10); color: var(--gold);
  font-weight: 700; font-size: 12px; text-align: center;
  padding: 4px 4px;
}
#tblDiscard .discardEmptyHint .dehIcon { font-size: 18px; line-height: 1; }
#tblDiscard .discardEmptyHint .dehText { font-size: 10px; letter-spacing: .3px; }


/* ==========================================================================
   OVERLAY FINE SMAZZATA — dettaglio punteggi NOI vs AVVERSARI.
   ========================================================================== */
#overlay {
  position: fixed; inset: 0; z-index: 999;   /* sopra TUTTO il campo di gioco */
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.76);
  padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right))
           max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  animation: overlayFadeIn .18s ease-out;
}
#overlay.hidden { display: none; }
#overlayBox {
  width: min(96vw,780px); max-width: 780px; max-height: min(92vh,760px); max-height: min(92dvh,760px);
  background: linear-gradient(155deg,rgba(28,83,55,.98),rgba(7,35,20,.99));
  border: 1px solid rgba(255,217,119,.72);
  border-radius: 20px; padding: clamp(16px,2.5vw,26px);
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
  display: flex; flex-direction: column;
  animation: overlayPanelIn .22s ease-out;
}
#overlayTitle {
  color: #fff7dc; margin: 0 0 16px; text-align: center;
  font-size: clamp(20px,3vw,28px); letter-spacing: .4px;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
#overlayBody {
  flex: 1 1 auto;
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px;
  min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-gutter: stable;
}
#overlayBody .ovTeam {
  min-width: 0; border-radius: 15px; padding: 14px 16px;
  background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.15);
}
#overlayBody .ovTeam.nous { background: rgba(255,209,102,.09); border-color: rgba(255,209,102,.38); }
#overlayBody .ovTeam.avv { background: rgba(140,180,255,.07); border-color: rgba(140,180,255,.3); }
#overlayBody .ovTeam.win { box-shadow: inset 0 0 0 1px var(--gold),0 8px 24px rgba(0,0,0,.22); }
.ovTeamHead { display: flex; align-items: center; min-height: 34px; margin-bottom: 8px; }
#overlayBody .ovTeamLabel {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #fff; font-size: clamp(15px,2vw,20px); font-weight: 900;
  text-transform: uppercase; letter-spacing: .5px;
}
.ovWinner { margin-left: auto; padding-left: 8px; font-size: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.ovBreakdown { display: flex; flex-direction: column; }
.ovStat {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 12px;
  min-height: 27px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.84); font-size: 14px;
}
.ovStat b { color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.ovStat.ovPositive b { color: #bdf4bd; }
.ovStat.ovNegative b { color: #ffb5ad; }
.ovStat.ovHandTotal {
  margin-top: 5px; padding-top: 9px; border-bottom: 0;
  color: #fff; font-size: 15px; font-weight: 800;
}
.ovStat.ovHandTotal b { color: var(--gold); font-size: 22px; }
.ovStat.ovMatchTotal {
  margin-top: 8px; padding: 12px 0 2px; border-top: 1px solid rgba(255,217,119,.36); border-bottom: 0;
  color: #fff; font-size: 16px; font-weight: 850;
}
.ovStat.ovMatchTotal b { color: var(--gold); font-size: 24px; }
/* ✕ in alto a destra del riepilogo (nessun bottone "Prossima smazzata"). */
#overlayBox { position: relative; }
#btnOverlayClose {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; font-weight: 800; cursor: pointer;
  color: #fff7dc; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,217,119,.55); border-radius: 12px;
}
@media (hover:hover){ #btnOverlayClose:hover { background: rgba(255,217,119,.2); } }
#btnOverlayClose:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#overlayTitle { padding: 0 52px; }

@keyframes overlayFadeIn { from { opacity: 0; } }
@keyframes overlayPanelIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }

@media (max-width:767px) and (orientation:portrait){
  #overlayBox { width: 96vw; padding: 14px; }
  #overlayTitle { margin-bottom: 10px; }
  #overlayBody { grid-template-columns: 1fr; }
  #overlayBody .ovTeam { padding: 11px 13px; }
}

@media (max-height:500px) and (orientation:landscape){
  #overlay { align-items: center; padding: 6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left)); }
  #overlayBox { width: min(98vw,780px); max-height: 100%; padding: 9px 14px; border-radius: 14px; }
  #overlayTitle { margin-bottom: 6px; font-size: 18px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  #overlayBody { gap: 8px; }
  #overlayBody .ovTeam { padding: 7px 10px; }
  .ovTeamHead { min-height: 23px; margin-bottom: 2px; }
  #overlayBody .ovTeamLabel { font-size: 14px; }
  .ovWinner { font-size: 17px; }
  .ovStat { min-height: 19px; padding: 1px 0; font-size: 11px; }
  .ovStat b { font-size: 12px; }
  .ovStat.ovHandTotal { margin-top: 2px; padding-top: 3px; font-size: 12px; }
  .ovStat.ovHandTotal b { font-size: 16px; }
  .ovStat.ovMatchTotal { margin-top: 2px; padding-top: 4px; font-size: 12px; }
  .ovStat.ovMatchTotal b { font-size: 17px; }
  #btnOverlayClose { top: 6px; right: 6px; }
}

@media (prefers-reduced-motion:reduce){
  #overlay, #overlayBox { animation: none; }
  #btnOverlayClose { transition: none; }
}


/* ================= MENU GIOCATORE (profilo) ================= */
#btnProfile {
  display: flex; align-items: center; gap: 11px; min-width: 0; margin-top: 6px;
}
.menuProfileAvatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: rgba(255,255,255,.1); border: 2px solid var(--amber);
  background-position: center; background-size: cover; font-size: 24px;
}
.menuProfileIdentity { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.menuProfileName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 15px; line-height: 1.2; }
.menuProfileEmail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt-soft); font-size: 12px; font-weight: 500; line-height: 1.2; }

@media (max-height:500px) and (orientation:landscape) {
  #btnProfile { gap: 8px; margin-top: 0; }
  .menuProfileAvatar { width: 32px; height: 32px; font-size: 19px; }
  .menuProfileName { font-size: 13px; }
  .menuProfileEmail { font-size: 10px; }
}
#view-menu:has(#profilePanel:not(.hidden)).active {
  max-width:1080px; padding:96px 28px 24px; justify-content:center;
}
#view-menu:has(#profilePanel:not(.hidden)) > .menuBox {
  max-width:none; padding:0; text-align:left;
  background:none; border:0; border-radius:0; box-shadow:none; backdrop-filter:none;
}
.profilePanel {
  width:100%; min-width:0; padding:30px; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--panel-bd); border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.45); color:#fff;
}
.profileTop {
  display:flex; align-items:center; gap:18px; min-width:0;
  padding:4px 0 24px; border-bottom:1px solid rgba(255,255,255,.14);
}
.avatarBtn {
  position:relative; flex:none; width:74px; height:74px; padding:0; border-radius:50%;
  background:var(--panel-bd); display:flex; align-items:center; justify-content:center;
  color:inherit; font-size:40px; border:2px solid var(--amber);
  box-shadow:0 8px 18px rgba(0,0,0,.28);
  transition:transform .16s ease, box-shadow .16s ease;
}
.avatarBtn::after {
  content:"✎"; position:absolute; right:-4px; bottom:-3px;
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; color:#221803; background:var(--gold);
  border:2px solid #163d26; font-size:13px; font-weight:900;
  box-shadow:0 3px 8px rgba(0,0,0,.35);
}
@media (hover:hover){ .avatarBtn:hover { transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.38); } }
.avatarBtn.img { background-size:cover; background-position:center; border:2px solid var(--amber); }
.profileId { flex:1 1 auto; min-width:0; }
.profileEyebrow { color:var(--amber); text-transform:uppercase; letter-spacing:1.5px; font-size:11px; font-weight:800; }
.pvtNameRow { display:flex; align-items:center; min-width:0; gap:10px; }
.pvtName { min-width:0; overflow-wrap:anywhere; font-size:clamp(22px,2.7vw,34px); line-height:1.15; font-weight:800; }
.nameEditBadge {
  flex:none; min-width:44px; min-height:44px; padding:0;
  border:1px solid var(--panel-bd); border-radius:10px; color:var(--gold); background:rgba(255,255,255,.055);
  font-size:17px; font-weight:900; line-height:1;
  transition:color .16s ease, background .16s ease, transform .16s ease;
}
@media (hover:hover){ .nameEditBadge:hover { color:#fff2be; background:rgba(255,217,119,.1); transform:scale(1.05); } }
.avatarBtn:focus-visible, .nameEditBadge:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.pvtEmail { overflow-wrap:anywhere; font-size:15px; line-height:1.4; color:#c8d5c4; }
.profileStats { min-width:0; margin:24px 0; }
.profilePrimary { display:grid; grid-template-columns:1.15fr 1fr; gap:14px; }
.profileSecondary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
.pstat { min-width:0; border-radius:10px; background:rgba(255,255,255,.06); }
.pstatPrimary { padding:25px 26px; background:#123b24; border:1px solid rgba(255,255,255,.08); }
.pstatLabel, .pstatDetail {
  display:block; color:var(--txt-soft); text-transform:uppercase;
  letter-spacing:.8px; font-size:11px; font-weight:750;
}
.pstatPrimary .pstatLabel { color:#e5dbba; }
.pstat .pstatV { display:block; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; }
.pstatPrimary .pstatV { margin:14px 0 2px; font-size:clamp(42px,5vw,60px); line-height:1; }
.pstatSecondary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 20px; }
.pstatSecondary .pstatV { font-size:25px; }
.profileActions {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-top:20px; border-top:1px solid rgba(255,255,255,.14);
}
.profileActionsCopy strong { display:block; font-size:15px; }
.profileActionsCopy span { display:block; margin-top:3px; color:var(--txt-soft); font-size:12px; }
.profileActionButtons { display:flex; gap:10px; flex-wrap:wrap; }
.profileActionButtons .smallBtn { min-height:44px; padding:9px 16px; white-space:normal; }
#btnDeleteAccount { background:transparent; border-color:rgba(255,255,255,.2); color:#d5c7bd; }
.profileMsg:not(:empty) { margin-top:12px; }
#btnProfileClose { align-self:flex-end; margin:22px 0 0; min-height:48px; min-width:140px; }
.profilePanel:not(.hidden) ~ #menuMsg { display:none; }
@media (max-width:767px) {
  #view-menu:has(#profilePanel:not(.hidden)).active { padding:72px 12px 24px; justify-content:flex-start; }
  .profilePanel { padding:20px; }
  .profileTop { gap:12px; padding-bottom:18px; }
  .avatarBtn { width:64px; height:64px; font-size:36px; }
  .pvtName { font-size:22px; }
  .pvtEmail { font-size:14px; }
  .profileStats { margin:18px 0; }
  .profilePrimary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .pstatPrimary { padding:16px; }
  .pstatPrimary .pstatV { font-size:clamp(30px,8vw,44px); }
  .profileSecondary { gap:6px; }
  .pstatSecondary { flex-direction:column-reverse; text-align:center; gap:3px; padding:12px 4px; }
  .pstatSecondary .pstatV { font-size:22px; }
  .pstatSecondary .pstatLabel { font-size:10px; }
  .profileActions { flex-direction:column; align-items:stretch; gap:14px; }
  .profileActionButtons .smallBtn { flex:1; }
  #btnProfileClose { width:100%; }
}
@media (max-height:500px) and (orientation:landscape) {
  #view-menu:has(#profilePanel:not(.hidden)).active { padding-top:60px; justify-content:flex-start; }
  .profilePanel { padding:18px; }
  .profileTop { padding-bottom:18px; }
  .profileStats { margin:18px 0; }
  .pstatPrimary { padding:16px; }
  .pstatPrimary .pstatV { margin-top:10px; font-size:44px; }
}

/* modale cambio avatar */
.avatarModalBox { max-width: 360px; }
.avatarGrid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-height: 220px; overflow-y: auto; }
.avEmoji {
  width: 46px; height: 46px; border-radius: 12px; font-size: 24px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
}
@media (hover:hover){ .avEmoji:hover { background: rgba(240,192,96,.22); border-color: var(--amber); } }

/* modale cambio password */
.pwdModalBox { max-width: 380px; }
.pwdModalBox input { width: 100%; margin-bottom: 10px; }

/* Animazioni carte: overlay sopra il tavolo, destinazioni già nel layout
   ma invisibili durante il volo; handoff sovrapposto senza frame vuoti.
   Marker verifica: card-motion-v6 */
.pickupTargetHidden { opacity:0 !important; }
/* Copie globali temporanee delle carte successive allo slot. Sono sopra il volo
   anche se la mano crea un proprio stacking context: la carta pescata entra
   realmente dietro alla carta successiva su desktop, tablet e mobile. */
.pickupCoverOverlay.card.cartoon {
  position:fixed !important; z-index:501; pointer-events:none;
  max-width:none; transition:none !important;
}
/* Niente filter:drop-shadow sulle carte in volo: su iPad Safari viene ridisegnato
   a ogni fotogramma per ogni carta e con monti grandi l'animazione si blocca.
   L'ombra è un box-shadow sulla carta, animata solo con transform/opacity. */
.pickupFlight {
  position:fixed; z-index:500; pointer-events:none; overflow:visible;
  contain:layout style; will-change:transform; max-width:none;
}
.pickupFlight .card.cartoon, .cardFlightMover .card.cartoon { box-shadow:0 10px 12px rgba(0,0,0,.38) !important; }
/* Nel ventaglio da pozzetto/scarti le carte passano una sull'altra: l'ombra
   di ogni copia finiva sopra il fronte della carta vicina. */
.pickupSpread .card.cartoon { box-shadow:none !important; }
.pickupFlight > .card { position:absolute; inset:0; width:100%; height:100%; max-width:none; }
.pickupSingle { perspective:620px; }
.pickupFlip {
  position:absolute; inset:0; width:100%; height:100%;
  transform-style:preserve-3d; will-change:transform;
}
.pickupFlipFace.card.cartoon {
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.pickupFlipFront { transform:rotateY(180deg); }
.pickupSpread { contain:layout style; }
.pickupSpreadCard.card.cartoon {
  position:absolute; inset:auto; max-width:none; margin:0;
  will-change:transform,opacity;
}
.pickupSpreadCover.card.cartoon {
  position:absolute; inset:auto; max-width:none; margin:0;
  transform:none; transition:none !important; pointer-events:none;
}
.pickupSpread .pickupPacketCount { right:auto; }
.pickupPacketCount {
  position:absolute; right:-9px; top:-10px; z-index:1000; min-width:23px; height:23px;
  display:grid; place-items:center; padding:0 5px; border-radius:99px;
  color:#1b160c; background:var(--gold); border:2px solid #fff4c9;
  font-size:12px; font-weight:900; box-shadow:0 3px 7px rgba(0,0,0,.45);
}
.tableActionFlightLayer {
  position:fixed; inset:0; z-index:510; pointer-events:none;
  overflow:visible; max-width:none; contain:layout style; isolation:isolate;
}
.actionRetainedCard { filter:none !important; }
.cardFlightMover.actionFlightCard {
  position:fixed !important; inset:auto; margin:0 !important; max-width:none;
  transform-origin:center center; will-change:transform,opacity;
  transition:none !important;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.cardFlightOrientation {
  position:absolute; inset:0; width:100%; height:100%;
  transform-origin:center center; transform-style:preserve-3d; will-change:transform;
}
.cardFlightContent.card.cartoon,
.cardFlightOrientation > .pickupFlip {
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  max-width:none; margin:0 !important; transition:none !important;
}
/* I clone overlay non sono più nel tavolo: l'orientamento burraco viene
   normalizzato dal JS e applicato al wrapper .cardFlightOrientation. */
.cardFlightContent.burracoSideways { transform:none !important; }

/* I voli avversari sono frequenti e spesso sovrapposti: niente filtro GPU per
   carta (costoso da ricampionare a ogni frame), basta l'ombra del box. */
.opponentActionFlight .cardFlightMover.actionFlightCard {
  filter:none; box-shadow:0 7px 12px rgba(0,0,0,.34);
}
.opponentActionFlight .opponentDrawBadgeCover {
  position:fixed; z-index:1000; transform:none; pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  #turnTimer.low, #msg.toastMsg, .card.cartoon.justWiggled, .card.justWiggled { animation:none; }
  .bigBtn, .smallBtn, .uBtn, .segBtn, .browseRow, .sortToggle, #tmRight .handTool, #btnSoundPhone,
  .avatarBtn, .nameEditBadge { transition:none; }
  .pickupFlight, .tableActionFlightLayer { display:none !important; }
  .playerCard.mine .pcMyHand .card { transition:none !important; }
  .tblZone .melRow .meld, .tblZone .meld .card { transition:none !important; }
}

/* ========================================================================== 
   PARTITA LANDSCAPE-ONLY — tavolo unico fluido su desktop, tablet e telefono
   ========================================================================== */
#rotateDevice { display:none; }

/* Sul solo tavolo di gioco neutralizziamo pinch, doppio tap e rubber-band.
   I menu e i pannelli esterni restano scrollabili; tap, pointer drag e click dei
   controlli continuano a essere gestiti normalmente dalla UI. */
#view-game.active #tbWrap {
  touch-action:none;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}
#view-game.active #tbWrap button,
#view-game.active #tbWrap .pile {
  touch-action:manipulation;
}

/* Partita in verticale: prompt di rotazione SOLO su smartphone e tablet touch
   (decisione 2026-10-03). Su un computer una finestra più alta che larga
   mostra il tavolo, che si adatta. I menu restano utilizzabili in verticale. */
@media (orientation:portrait) and (max-width:767px), (orientation:portrait) and (pointer:coarse) and (max-width:1439px){
  #view-game.active > #tbWrap,
  #view-game.active > #msg { display:none !important; }
  #view-game.active > #rotateDevice {
    display:grid; place-items:center; align-content:center; gap:10px;
    position:absolute; inset:0; padding:28px; text-align:center;
    background:radial-gradient(circle at 50% 35%,#145f2d,#061d0e 72%);
    color:#fff; z-index:50;
  }
  #rotateDevice .rotateIcon {
    display:grid; place-items:center; width:72px; height:72px;
    border:2px solid var(--amber); border-radius:18px;
    color:var(--gold); font-size:48px; line-height:1;
  }
  #rotateDevice strong { color:var(--gold); font-size:clamp(22px,7vw,34px); }
  #rotateDevice span { max-width:32ch; color:#e8e4d8; font-size:clamp(15px,4vw,19px); }
}

/* Tavolo fluido: in orizzontale e nelle finestre desktop verticali. */
#view-game.active {
    --card-h:clamp(54px,15.5dvh,82px);
    --card-w:calc(var(--card-h) * .683);
    --card-radius:clamp(5px,1.1dvh,8px);
  }
  #tbMain {
    --main-gap:clamp(2px,1dvh,6px);
    --table-center-lane:calc(var(--card-w) + 20px);
    --field-gap:clamp(2px,.5vw,4px);
    grid-template-columns:clamp(50px,11dvh,84px) minmax(0,1fr) clamp(50px,11dvh,84px);
    grid-template-rows:clamp(48px,16dvh,64px) minmax(0,1fr);
    gap:var(--main-gap);
    padding:clamp(2px,1dvh,6px) clamp(4px,1.3vw,10px) 2px;
  }
  #tbSurface {
    gap:var(--field-gap);
  }
  .tblZone { padding:clamp(4px,1.5dvh,10px); border-radius:clamp(8px,2dvh,14px); }
  #tMine {
    height:clamp(88px,29dvh,120px);
    gap:clamp(4px,1.5vw,12px);
    padding:clamp(3px,1dvh,6px) clamp(54px,12vw,100px);
  }
  #tmBox { width:min(92%,1100px); gap:clamp(4px,1.2vw,10px); }
  #tbMain .tbTopRow .scoreCard {
    min-width:clamp(104px,18vw,150px); height:clamp(48px,16dvh,64px);
    gap:clamp(2px,1dvh,7px); padding:3px clamp(4px,1vw,8px);
  }
  #tbMain .tbTopRow .scoreCard .scCounter { font-size:clamp(14px,3.3dvh,21px); padding:2px 7px; }
  #tbMain .tbTopRow .scoreCard .scNames { font-size:clamp(9px,2.2dvh,12px); gap:5px; }
  .tbTopRow { gap:clamp(3px,1.4vw,12px); min-height:0; }
  .tbBtns button { min-width:44px; min-height:44px; }
  #turnTimer { font-size:clamp(10px,2.5dvh,14px); padding:5px clamp(7px,1.4vw,12px); }
  #view-game.active > #msg { bottom:calc(clamp(88px,29dvh,120px) + 8px); }

/* TABLET + SMARTPHONE: la barra con la mia mano occupa tutta la larghezza
   disponibile, con un margine minimo di sicurezza. Il desktop la tiene centrata. */
@media (pointer:coarse) and (max-width:1439px), (max-width:1023px), (max-height:500px){
  #tMine { padding-inline:max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-right)); }
  #tmBox { width:100%; max-width:none; margin:0; }
}

/* TABLET: mano un poco più grande (iPad compreso). Lo smartphone ha un
   adattamento separato: controlli da 44px, box basso e carte poco più alte. */
@media (min-width:768px) and (max-width:1023px) and (min-height:501px), (pointer:coarse) and (min-width:768px) and (max-width:1439px) and (min-height:501px){
  #tMine { height:clamp(100px,26dvh,140px); }
  .playerCard.mine .pcMyHand { --card-h:clamp(66px,19dvh,94px); --card-w:calc(var(--card-h) * .683); }
  /* Il messaggio resta sopra la barra della mano, più alta su tablet. */
  #view-game.active > #msg { bottom:calc(clamp(100px,26dvh,140px) + 8px); }
}

/* SMARTPHONE (larghezza fino a 767px o altezza fino a 500px) ---------------
   - Computer 2 a sinistra, punteggi in fila a destra, pile nella fascia alta;
   - barra della mano a tutta larghezza, con nome e nomi laterali visibili;
   - uscita dopo il punteggio avversario;
   - avversari: una sola carta con sopra il totale; laterali più stretti,
     compagno in alto più basso e più corto. */
.pcBackCount { display:none; }
@media (max-width:767px), (max-height:500px){
  #tMine { padding-inline:max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-right)); }
  #tmBox { width:100%; max-width:none; margin:0; gap:6px; align-items:stretch; }
  /* Un poco d'aria prima del timer senza ridurre l'altezza delle carte. */
  #tmLeft { margin-right:12px; }
  #tbMain .tbTopRow {
    display:grid; grid-template-columns:44px minmax(0,1fr) 44px;
    column-gap:var(--main-gap); min-height:0; padding:0;
  }
  .tbTopSurface {
    grid-column:2; display:grid; min-width:0;
    grid-template-columns:minmax(0,1fr) calc(var(--table-center-lane) + var(--field-gap)) minmax(0,1fr);
  }
  .tbNorthSlot, .tbScoreSlot { display:flex; min-width:0; align-items:center; justify-content:center; }
  .tbNorthSlot { grid-column:1; }
  /* La coppia si sposta a sinistra di metà bottone+gap: Computer 2 resta
     centrato sopra NOI e il volume resta immediatamente alla sua sinistra. */
  .tbNorthSeat { display:flex; align-items:center; gap:4px; transform:translateX(-24px); }
  #btnSoundPhone { display:flex; flex:0 0 44px; --tool-size:44px; z-index:2; }
  #tmRight #btnSoundL { display:none; }
  .tbScoreSlot { grid-column:3; }
  .tbScorePair { display:flex; align-items:center; gap:4px; position:relative; transform:translateX(4px); }
  #cellNorth { order:initial; flex:0 0 auto; width:clamp(182px,25.5vw,216px); height:44px; min-height:44px; justify-content:center; }
  #cellNorth .playerCard.top { width:100%; min-width:0; max-width:100%; gap:4px; padding:3px 4px; }
  #cellNorth .playerCard.top .pcInfo { gap:4px; min-width:0; }
  #cellNorth .playerCard.top .pcName { font-size:clamp(9px,1.3vw,11px); }
  #tScoreL, #tScoreR { order:initial; margin-left:0; }
  #tbMain .tbTopRow .scoreCard { min-width:0; width:clamp(115px,calc(17.8vw - 6px),144px); height:44px; gap:2px; padding:2px 3px; }
  #tbMain .tbTopRow .scoreCard .scNames { display:flex; gap:2px; font-size:clamp(8px,1vw,10px); letter-spacing:-.3px; }
  #tbMain .tbTopRow .scoreCard .scNames .scName { max-width:none; }
  #tbMain .tbTopRow .scoreCard .scRow { gap:3px; }
  #tbMain .tbTopRow .scoreCard .scCounter { font-size:clamp(11px,3.3dvh,14px); padding:2px 4px; }
  .tbBtns #btnFullscreenL, .tbBtns #btnTutGameL, .tbBtns #btnNewL { display:none; }
  /* Mazzetto e monte occupano lo spazio sopra i campi, senza spostare i campi. */
  /* Dorso orizzontale: contatore e hitbox restano dritti. */
  #tblTalon { top:-48px; width:var(--card-h); height:var(--card-w); min-height:var(--card-w); }
  #tblDiscard { top:calc(-48px + var(--card-w) + 10px); }
  .tbTopRow #btnExitL2 {
    display:flex; align-items:center; justify-content:center; width:44px; height:44px;
    min-width:44px; min-height:44px; padding:0; border-radius:12px;
    position:absolute; left:calc(100% + 4px); top:50%; transform:translateY(-50%);
    border:1px solid #f47a80; background:#9d1e26; color:#fff;
    box-shadow:0 2px 9px rgba(0,0,0,.4); font:900 22px/1 system-ui,sans-serif;
  }
  .tbTopRow #btnExitL2:focus-visible { background:#bf2531; }
  @media (hover:hover){ .tbTopRow #btnExitL2:hover { background:#bf2531; } }
  html[data-island-side="left"] #tbMain .tbNorthSeat { transform:translateX(-48px); }
  html[data-island-side="left"] #tbMain .tbNorthSeat #btnExitL2 {
    position:static; left:auto; top:auto; transform:none; flex:0 0 44px;
  }
  #tmRight { align-self:center; gap:4px; }

  .handBackStack { position:relative; --back-stack-step:0px; }
  .playerCard .handBackStack .card.back.cartoon.micro:not(:first-child):not(.opponentBackAnchor) { display:none; }
  .playerCard .handBackStack { flex:0 0 auto !important; align-self:center !important; justify-content:center !important; }
  .pcBackCount {
    display:flex; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:21px; min-width:21px; height:19px; box-sizing:border-box;
    padding:0; border:0; border-radius:0; z-index:2;
    align-items:center; justify-content:center;
    background:transparent; color:#fff;
    font:700 15px/1 "Oswald",system-ui,sans-serif; font-variant-numeric:tabular-nums;
    text-shadow:0 1px 2px #041525,0 0 3px #041525;
    box-shadow:none; pointer-events:none;
  }
  #tbMain { grid-template-columns:44px minmax(0,1fr) 44px; grid-template-rows:44px minmax(0,1fr); }
  .playerCard.side { width:44px; height:80%; min-height:0; gap:5px; padding:5px 2px; justify-content:flex-start; --back-card-h:34px; }
  #view-game .playerCard.side .handBackStack .card.cartoon.micro { width:22px; height:34px; }
  .playerCard.side .pcAvatarWrap .avatar { width:34px !important; height:34px !important; font-size:16px; }
  .playerCard.side .pcInfo { gap:4px; }
  .playerCard.side .pcName { display:block; font-size:10px; max-width:none; overflow:visible; text-overflow:clip; }
  #cellNorth .playerCard.top { width:100%; min-width:0; max-width:100%; height:44px; gap:4px; padding:3px 4px; }
  #cellNorth .playerCard.top .pcAvatarWrap .avatar { width:34px !important; height:34px !important; font-size:16px; }
  #cellNorth .playerCard.top .pcInfo { flex:1 1 auto; min-width:0; gap:8px; }
  #cellNorth .playerCard.top .pcName { flex:0 1 auto; min-width:0; max-width:none; font-size:clamp(9px,1.3vw,11px); }
  /* 40px dentro un box da 44px calpestavano il bordo: 32px lasciano aria. */
  #cellNorth .playerCard.top .pcHand .card.back.cartoon.micro,
  #cellNorth .playerCard.top .pcHand .card.cartoon.micro { width:21px; height:32px; }
  #tbMain .tbTopRow .scoreCard { height:44px; }
}

/* DESKTOP (mouse, da 1024px): rapporto 56:82. Mano grande; sedute a 2/3,
   mazzetto, scarti e calate a 5/6 dell'altezza della mano. */
@media (not (pointer:coarse)) and (min-width:1024px) and (min-height:501px), (min-width:1440px) and (min-height:501px){
  /* Le misure delle sedute e quelle del tavolo hanno ruoli distinti. */
  #view-game.active {
    --hand-card-h:clamp(84px,14.5dvh,120px);
    /* Avversari e compagno: 2/3 della mia mano. */
    --seat-card-h:calc(var(--hand-card-h) * 2 / 3);
    --seat-card-w:calc(var(--seat-card-h) * 56 / 82);
    /* Mazzetto, monte scarti e calate: 5/6 della mia mano (più grandi, 2026-09-30). */
    --card-h:calc(var(--hand-card-h) * 5 / 6);
    --card-w:calc(var(--card-h) * 56 / 82);
    --back-card-w:var(--seat-card-w); --back-card-h:var(--seat-card-h);
  }
  #view-game .playerCard.mine .pcMyHand {
    --card-h:var(--hand-card-h); --card-w:calc(var(--hand-card-h) * 56 / 82);
  }
  #tMine { height:calc(var(--hand-card-h) + 38px); }
  #view-game.active > #msg { bottom:calc(var(--hand-card-h) + 46px); }
  #view-game #cellNorth .playerCard.top .pcHand .card.cartoon.micro,
  #view-game #cellNorth .playerCard.top .pcHand .card.back.cartoon.micro,
  #view-game .playerCard.side .handBackStack .card.cartoon.micro,
  #view-game .playerCard.side .handBackStack .card.back.cartoon.micro {
    width:var(--seat-card-w); height:var(--seat-card-h); font-size:inherit;
  }
  /* Contenitori mano di avversari e compagno UGUALI al mio (richiesta 2026-09-30):
     stesso spessore (carta + 2x10px + bordo 3px), stesso margine 10px attorno
     alle carte, stessa sovrapposizione (20px, come la mia mano). Se la corsia è
     corta render.js stringe il passo solo quanto basta. */
  #view-game .handBackStack { --back-stack-overlap:20px; --back-stack-step:calc(var(--seat-card-w) - 20px); }
  /* Angolo e seme centrale crescono con la carta (niente tetto a 20px/40px). */
  /* Valgono per OGNI carta, anche per le copie animate fuori da #view-game
     (presa dal monte/mazzo): i glifi non cambiano misura durante il volo. */
  .card.cartoon .corner .cr, .card.cartoon.micro .corner .cr, .tblZone .card.cartoon.micro .corner .cr { font-size:clamp(9px,23cqh,28px); }
  .card.cartoon .corner .cs, .card.cartoon.micro .corner .cs, .tblZone .card.cartoon.micro .corner .cs { font-size:clamp(8px,17cqh,21px); }
  .card.cartoon.joker .corner .cs { font-size:clamp(9px,23cqh,28px); }
  .card.cartoon .big, .card.cartoon.micro .big, .tblZone .card.cartoon.micro .big { font-size:clamp(10px,min(61cqw,42cqh),56px); }
  #tbMain {
    grid-template-columns:calc(var(--seat-card-h) + 26px) minmax(0,1fr) calc(var(--seat-card-h) + 26px);
    grid-template-rows:calc(var(--seat-card-h) + 30px) minmax(0,1fr);
  }
  .tbTopRow, #cellNorth { min-height:calc(var(--seat-card-h) + 30px); height:calc(var(--seat-card-h) + 30px); }
  #cellNorth { flex:0 1 auto; min-width:0; max-width:calc(100% - 340px); }
  #view-game #cellNorth .playerCard.top {
    height:calc(var(--seat-card-h) + 26px); padding:10px 16px; gap:14px;
    width:auto; min-width:0; max-width:100%; border-width:3px; border-radius:16px;
  }
  #view-game #cellNorth .playerCard.top .pcInfo { gap:14px; }
  #view-game #cellNorth .playerCard.top .handBackStack { flex:0 1 auto; align-self:center; }
  .playerCard.side {
    width:calc(var(--seat-card-h) + 26px); height:96%; padding:10px; gap:8px;
    border-width:3px; border-radius:16px;
  }
  .playerCard.side .handBackStack { align-self:stretch; align-items:center; }
  /* Misura delle CELLE rispetto alla riga delle calate:
     - #cellWest/#cellEast: ALTEZZA 2/3 su desktop, 60% del campo su desktop grande;
     - #cellNorth: LARGHEZZA 2/3 su desktop, 1/2 su desktop grande.
     La fascia del giocatore riempie la sua cella. */
  #view-game { --melrow-ratio:2/3; --melrow-side-ratio:2/3; }
  #cellWest, #cellEast {
    align-self:center; height:calc((100% - 20px) * var(--melrow-side-ratio)); min-height:0;
    align-items:stretch;
  }
  #view-game #cellWest .playerCard.side, #view-game #cellEast .playerCard.side { height:100%; }
  #view-game .playerCard.side { min-height:0; gap:6px; }
  /* Su desktop stretti (1024px) 2/3 della riga calate non bastano per avatar,
     nome e dorsi: almeno 300px, senza mai raggiungere i comandi in alto a destra. */
  #view-game #cellNorth {
    flex:0 0 auto; max-width:none;
    width:max(calc(var(--melrow-w, 0px) * var(--melrow-ratio)), min(300px, calc(100vw - 668px)));
  }
  #view-game #cellNorth .playerCard.top { width:100%; padding-inline:10px; gap:10px; }
  #view-game #cellNorth .playerCard.top .pcInfo { gap:6px; min-width:0; }
  #view-game #cellNorth .playerCard.top .pcName { flex:0 0 auto; max-width:none; overflow:visible; text-overflow:clip; font-size:12px; }
  #view-game .playerCard.side .pcInfo { gap:6px; min-height:0; }
  #view-game .playerCard.side .pcRowTop:empty { display:none; }
  /* Fascia corta: il nome resta intero, la pila di carte si stringe. */
  #view-game .playerCard.side .pcAvatarWrap .avatar { width:36px !important; height:36px !important; font-size:18px !important; }
  #view-game .playerCard.side .pcName { flex:0 0 auto; max-height:none; overflow:visible; text-overflow:clip; font-size:12px; }
}
/* DESKTOP GRANDE (mouse, da 1440px): i laterali occupano esattamente il 60% del
   campo; Computer 2 conserva la larghezza pari a metà della riga calate. */
@media (min-width:1440px) and (min-height:501px){
  /* Carte del 12% più grandi del desktop (mano; mazzetto, scarti e calate
     ne seguono i 5/6, le sedute i 2/3): decisione 2026-10-03. */
  #view-game.active {
    --hand-card-h:clamp(94px,16.24dvh,134px);
    /* Le carte di avversari e compagno restano quelle del desktop (2/3 della
       mano desktop): crescono solo mano e carte del tavolo. */
    --seat-card-h:calc(clamp(84px,14.5dvh,120px) * 2 / 3);
  }
  /* Tetti dei glifi cresciuti dello stesso 12% (le proporzioni non cambiano). */
  .card.cartoon .corner .cr, .card.cartoon.micro .corner .cr, .tblZone .card.cartoon.micro .corner .cr { font-size:clamp(9px,23cqh,32px); }
  .card.cartoon .corner .cs, .card.cartoon.micro .corner .cs, .tblZone .card.cartoon.micro .corner .cs { font-size:clamp(8px,17cqh,24px); }
  .card.cartoon.joker .corner .cs { font-size:clamp(9px,23cqh,32px); }
  .card.cartoon .big, .card.cartoon.micro .big, .tblZone .card.cartoon.micro .big { font-size:clamp(10px,min(61cqw,42cqh),63px); }
  #view-game { --melrow-ratio:1/2; }
  #view-game #cellNorth { width:calc(var(--melrow-w, 0px) * var(--melrow-ratio)); }
  #cellWest, #cellEast { height:60%; }
  .playerCard.side .pcAvatarWrap .avatar { width:44px !important; height:44px !important; }
}

/* TABLET (touch, o finestra 768-1023px): carte del tavolo un poco più piccole
   della mano (mazzetto = scarti = calate), corsie laterali di Computer 1 e 3
   attaccate al bordo con margini minimi. */
@media (min-width:768px) and (max-width:1023px) and (min-height:501px), (pointer:coarse) and (min-width:768px) and (max-width:1439px) and (min-height:501px){
  #view-game.active { --card-h:clamp(54px,10.5dvh,86px); --card-w:calc(var(--card-h) * 56 / 82); }
  #tbMain { grid-template-columns:64px minmax(0,1fr) 64px; column-gap:4px; padding-inline:max(4px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-right)); }
  /* Come nei laterali: la loro riga vuota occupa ancora un secondo gap. */
  #cellNorth .playerCard.top .pcInfo { gap:16px; }
}

/* TABLET + SMARTPHONE: seme piccolo a DESTRA del valore, centrati insieme. */
@media (pointer:coarse) and (max-width:1439px), (max-width:1023px), (max-height:500px){
  .card.cartoon .corner { display:flex; flex-direction:row; align-items:center; gap:1px; line-height:1; }
  /* Jolly: la stella ha la stessa riga (altezza) del valore delle altre carte. */
  .card.cartoon.joker .corner .cs, .card.cartoon.micro.joker .corner .cs { font-size:clamp(9px,23cqh,20px) !important; line-height:1; }
  .card.cartoon .corner .cr, .card.cartoon .corner .cs { line-height:1; }
  .card.cartoon .corner .cs, .card.cartoon.micro .corner .cs, .tblZone .card.cartoon.micro .corner .cs { font-size:clamp(8px,17cqh,15px); }
}

/* SMARTPHONE: mano leggermente più bassa, così il campo guadagna altezza. */
@media (max-width:767px), (max-height:500px){
  /* L'isola occupa solo il centro del lato corto: sedute e campi restano
     nell'area sicura, ma angoli superiori e mano usano tutta la superficie. */
  #tbWrap { padding-bottom:0; }
  #tbMain {
    margin-inline:calc(-1 * env(safe-area-inset-left)) calc(-1 * env(safe-area-inset-right));
    padding-inline:calc(4px + env(safe-area-inset-left)) calc(4px + env(safe-area-inset-right));
  }
  /* Home Screen iPhone: solo il lato libero recupera fino all'angolo;
     il lato dell'isola usa lo stesso rientro prudente di 8px nei due versi. */
  html[data-island-side="right"] #tbMain {
    padding-left:4px;
    padding-right:max(4px, calc(env(safe-area-inset-right) - 8px));
  }
  html[data-island-side="left"] #tbMain {
    padding-left:max(4px, calc(env(safe-area-inset-left) - 8px));
    padding-right:4px;
  }
  #tbMain .tbTopRow {
    margin-inline:calc(-1 * env(safe-area-inset-left)) calc(-1 * env(safe-area-inset-right));
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  html[data-island-side="right"] #tbMain .tbTopRow { margin-left:0; padding-left:0; }
  #tMine {
    margin-inline:calc(-1 * env(safe-area-inset-left)) calc(-1 * env(safe-area-inset-right));
    padding-inline:6px;
  }
  #tMine { height:92px; min-height:92px; padding-block:3px; }
  #tmLeft { align-self:center; }
  .playerCard.mine { height:84px; padding-block:4px; }
  .playerCard.mine .pcMineLeft { gap:6px; }
  .playerCard.mine .pcMineLeft .pcInfo { display:flex; }
  .playerCard.mine .pcName { font-size:clamp(10px,2.7vw,13px); max-width:clamp(44px,12vw,86px); }
  .playerCard.mine .pcMyHand {
    --card-h:clamp(72px,20dvh,74px); --card-w:calc(var(--card-h) * 56 / 82);
    justify-content:flex-start; padding-left:clamp(8px,1.4vw,12px);
  }
  #view-game.active > #msg { bottom:100px; }
}

#maintenanceBanner {
  position:fixed; z-index:1200; top:8px; left:50%; transform:translateX(-50%);
  width:min(760px,calc(100vw - 24px)); display:flex; align-items:center;
  justify-content:center; flex-wrap:wrap; gap:8px 12px; padding:10px 14px;
  border:1px solid #ffd36b; border-radius:12px; color:#fff7dc;
  background:rgba(92,52,0,.96); box-shadow:0 8px 28px rgba(0,0,0,.45);
  font-size:14px; text-align:center;
}
#maintenanceBanner.hidden { display:none; }
#maintenanceCountdown { font-weight:800; color:#ffd36b; }
#maintenanceUpdate:empty { display:none; }
#maintenanceUpdate { width:100%; opacity:.9; }
#btnMaintenanceAck { margin:0; padding:6px 10px; }

/* Private beta UX: touch, keyboard, safe areas and contextual panels. */
button, [role="button"] { min-height:44px; min-width:44px; }
input, select { min-height:44px; }
button:focus-visible, [role="button"]:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline:3px solid #fff4b8; outline-offset:3px;
}
#acctBar {
  padding-top:max(10px,env(safe-area-inset-top));
  padding-right:max(clamp(16px,3vw,40px),env(safe-area-inset-right));
  padding-left:max(clamp(16px,3vw,40px),env(safe-area-inset-left));
}
.menuBox, .modalBox { margin-left:env(safe-area-inset-left); margin-right:env(safe-area-inset-right); }
.lobbyPublicStats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.lobbyPublicStats span { padding:8px 6px; border-radius:9px; background:rgba(255,255,255,.07); color:#f5f0e2; font-size:12px; }
.lobbyPublicStats b { display:block; color:var(--gold); font-size:18px; }
.rulesDisclosure { margin:2px 0 0; color:#d8d2c3; font-size:11px; line-height:1.35; }
.communityPanel { display:flex; flex-direction:column; gap:12px; max-height:min(76dvh,620px); }
.communityList { display:flex; flex-direction:column; gap:8px; min-height:0; overflow-y:auto; text-align:left; }
.communityRow { display:flex; justify-content:space-between; gap:12px; padding:11px 12px; border-radius:10px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.13); }
.communityRow span { color:#e3dfd3; font-size:13px; text-align:right; }
.lobbyMeta { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 12px; color:#f3dfaa; font-size:13px; }
.gameStatusRegion { position:fixed; z-index:60; left:50%; top:max(8px,env(safe-area-inset-top)); transform:translateX(-50%); width:min(720px,calc(100vw - 120px)); pointer-events:none; text-align:center; }
.gameStatusRegion > div:not(:empty) { display:inline-block; margin:2px; padding:6px 10px; border-radius:9px; background:rgba(53,26,0,.94); border:1px solid var(--amber); color:#fff7dc; font-size:12px; }
#maintenanceBanner, #turnTimer { font-variant-numeric:tabular-nums; }
@media (max-height:500px) and (orientation:landscape){
  .lobbyPublicStats span { padding:3px; font-size:10px; }
  .lobbyPublicStats b { display:inline; font-size:12px; }
  .rulesDisclosure { font-size:9px; }
  .gameStatusRegion { width:min(620px,calc(100vw - 180px)); }
}
@media (max-width:767px) and (orientation:portrait){
  .communityRow { flex-direction:column; }
  .communityRow span { text-align:left; }
}

/* Approved menu 2 + 3. These rules never target the playing table. */
#acctBar .acctChip { min-width:0; }
#acctBar #acctName { display:none; }
#acctBar #btnProfile { margin:0; min-height:44px; max-width:280px; padding:4px 0; border:0; background:none; color:inherit; text-align:left; }
#acctBar #btnProfile:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
#acctBar #menuProfileEmail { display:none; }
body:has(#view-menu.active #menuMain:not(.hidden)) {
  --menu-rail:232px;
  background:radial-gradient(ellipse at 60% 25%,#16582e,#082b17 85%);
}
#view-menu:has(#menuMain:not(.hidden)).active {
  max-width:none; padding:88px 44px 24px calc(var(--menu-rail) + 44px);
}
#view-menu:has(#menuMain:not(.hidden)) > .menuBox {
  max-width:1100px; padding:0; background:none; border:0; box-shadow:none; backdrop-filter:none;
}
#menuMain { margin:0; gap:0; text-align:left; }
.menuSidebar {
  position:fixed; inset:0 auto 0 0; width:var(--menu-rail); padding:32px 22px;
  background:#062511e8; border-right:1px solid #b4c38830;
  display:flex; flex-direction:column;
}
.menuBrand { font:bold 25px Georgia,serif; letter-spacing:2px; margin:0 10px 55px; white-space:nowrap; }
.menuBrand span { color:var(--amber); }
#menuNav { display:grid; gap:9px; }
#menuNav button {
  min-height:48px; text-align:left; border:1px solid transparent; border-radius:8px;
  padding:13px 16px; color:#c3d3bd; background:transparent; font-size:14px;
}
@media (hover:hover){ #menuNav button:hover { background:#ffffff09; } }
#menuNav button[aria-current=page] { background:#f0c06020; color:var(--amber); border-color:#f0c06050; }
#menuMain button:focus-visible { outline:3px solid #ffe1a0; outline-offset:3px; }
.menuDivider { height:1px; background:#ffffff18; margin:17px 10px; }
.menuAsideNote { margin-top:auto; padding:30px 10px 0; color:#a8bfa9; font-size:12px; line-height:1.7; }
body:has(#view-menu.active #menuMain:not(.hidden)) #acctBar {
  left:var(--menu-rail); min-height:88px; padding:12px 44px; background:transparent;
  box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
body:has(#view-menu.active #menuMain:not(.hidden)) #acctBar .homeLink { visibility:hidden; }
.menuComposition { display:grid; grid-template-columns:minmax(230px,1fr) minmax(350px,1.15fr); gap:38px; align-items:center; padding:48px 0; }
.menuEyebrow { font-size:11px; text-transform:uppercase; letter-spacing:2.3px; color:#e5c984; }
#menuWelcomeTitle { font:normal clamp(38px,4.4vw,62px)/1.06 Georgia,serif; letter-spacing:0; margin:22px 0; }
.menuIntro { margin:0 0 24px; color:#c0d3c2; font-size:16px; line-height:1.75; }
.menuChoices { min-width:0; background:#06261188; border:1px solid #97a97a40; border-radius:18px; padding:28px; }
.menuChoices > .menuEyebrow { margin-bottom:22px; }
.menuAction {
  width:100%; min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid #86a57b66; border-radius:10px; padding:18px; background:#092d19bb;
  color:#f5efdc; text-align:left; font-size:16px; font-weight:600;
}
@media (hover:hover){ .menuAction:hover { border-color:#e2c58b; background:#123d23; } }
.menuAction small { display:block; margin-top:6px; font-size:13px; font-weight:400; color:#bdd0be; }
.menuAction > [aria-hidden] { font-size:25px; font-weight:400; }
.menuPrimary { min-height:84px; font-size:19px; background:#efc465; border-color:#efc465; color:#15321e; box-shadow:0 5px 18px #0002; }
@media (hover:hover){ .menuPrimary:hover { background:#f6cf7a; } }
.menuPrimary small { color:#385137; }
.menuActionRow { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:13px 0; }
/* Stessa grandezza del titolo di "Contro il computer" (eredita da .menuAction). */
.menuActionRow .menuAction { padding:17px 14px; }
.menuLocal { border-top:1px solid #ffffff19; margin-top:17px; padding-top:17px; }
/* Keep real operational notices in flow beneath the menu account header. */
body:has(#view-menu.active #menuMain:not(.hidden)) :is(#emailVerificationNotice,#maintenanceBanner):not(.hidden) {
  position:relative; inset:auto; transform:none; width:auto;
  margin:100px 24px 0 calc(var(--menu-rail) + 24px); padding:12px;
}
body:has(#view-menu.active #menuMain:not(.hidden)) #emailVerificationNotice:not(.hidden) ~ #maintenanceBanner:not(.hidden) { margin-top:12px; }
body:has(:is(#emailVerificationNotice,#maintenanceBanner):not(.hidden)) #view-menu:has(#menuMain:not(.hidden)).active { padding-top:12px; min-height:0; }
.menuLobbyStatus { margin:10px 0 0; font-size:11px; line-height:1.5; color:#adc3af; }
.menuLobbyStatus:empty { display:none; }
#menuMain .lobbyPublicStats { margin-top:20px; }
#menuMain .lobbyPublicStats span { background:none; padding:0; color:#adc3af; font-size:11px; }
#menuMain .lobbyPublicStats b { display:inline; font-size:11px; color:#adc3af; }
#menuMain .rulesDisclosure { border-top:1px solid #ffffff1a; padding:17px 0 0; color:#a8bca9; font-size:11px; line-height:1.6; }
.menuCards { position:relative; height:193px; width:270px; margin:33px 0 0 12px; }
.menuDecorCard { width:102px; height:149px; position:absolute; top:17px; padding:10px; background:#fff9e8; border:1px solid #d2c8a7; box-shadow:0 9px 20px #0004; border-radius:9px; font:bold 24px Georgia,serif; color:#223327; }
.menuDecorCard span { display:block; font-size:55px; text-align:center; margin-top:6px; }
.menuCardA { left:10px; transform:rotate(-18deg); }
.menuCardB { left:76px; top:0; }
.menuCardC { left:142px; transform:rotate(18deg); color:#a83132; }
/* Menu TABLET (768-1023px, o touch): colonna laterale più stretta. */
@media (min-width:768px) and (max-width:1023px) and (min-height:501px), (pointer:coarse) and (min-width:768px) and (max-width:1439px) and (min-height:501px) {
  body:has(#view-menu.active #menuMain:not(.hidden)) { --menu-rail:170px; }
  #view-menu:has(#menuMain:not(.hidden)).active { padding-left:calc(var(--menu-rail) + 20px); padding-right:20px; }
  .menuSidebar { padding-inline:12px; }
  .menuBrand { font-size:20px; letter-spacing:1px; }
  .menuComposition { gap:16px; grid-template-columns:minmax(180px,.85fr) minmax(290px,1.15fr); }
  .menuChoices { padding:18px; }
  .menuCards { transform:scale(.75); transform-origin:left top; width:200px; height:155px; }
  #menuWelcomeTitle { font-size:40px; }
  .menuIntro { font-size:15px; }
}
/* Menu stretto e alto (fino a 767px, altezza >500px: finestre desktop strette;
   gli smartphone in verticale vedono il prompt di rotazione): navigazione sopra,
   una colonna. */
@media (max-width:767px) and (min-height:501px) {
  #acctBar #btnProfile { max-width:145px; }
  #acctBar .homeLink { font-size:14px; }
  #acctBar .acctChip { gap:6px; }
  #acctBar .acctBtn { padding-inline:10px; font-size:12px; }
  #acctBar .menuProfileAvatar { width:30px; height:30px; font-size:18px; }
  body:has(#view-menu.active #menuMain:not(.hidden)) { --menu-rail:0px; }
  body:has(#view-menu.active #menuMain:not(.hidden)) :is(#emailVerificationNotice,#maintenanceBanner):not(.hidden) { margin-top:72px; }
  #view-menu:has(#menuMain:not(.hidden)).active { padding:72px 19px 24px; justify-content:flex-start; }
  body:has(#view-menu.active #menuMain:not(.hidden)) #acctBar { left:0; min-height:58px; padding:7px 14px; }
  body:has(#view-menu.active #menuMain:not(.hidden)) #acctBar .homeLink { visibility:visible; }
  .menuSidebar { position:static; width:auto; padding:8px 0 12px; border:0; border-bottom:1px solid #ffffff20; }
  .menuBrand, .menuAsideNote, .menuDivider { display:none; }
  #menuNav { display:flex; gap:5px; flex-wrap:wrap; }
  #menuNav button { min-height:44px; padding:10px; font-size:12px; }
  .menuComposition { grid-template-columns:1fr; max-width:490px; gap:20px; padding:28px 0; margin:auto; }
  .menuWelcome { position:relative; padding-right:100px; }
  #menuWelcomeTitle { font-size:38px; margin:13px 0; }
  .menuIntro { font-size:14px; margin:0; }
  .menuCards { position:absolute; right:-4px; top:56px; transform:scale(.4); transform-origin:top right; margin:0; width:250px; height:180px; }
  .menuChoices { padding:22px; }
  .menuEyebrow { font-size:10px; }
}
/* Linea sottile sotto l'account del menu principale: rimossa su tutti i
   breakpoint (decisione 2026-10-03). */
body:has(#view-menu.active #menuMain:not(.hidden)) #acctBar { border-bottom:0; }
/* Sottomenu: niente fascia scura in alto su nessun dispositivo (decisione
   2026-10-03); si torna al menu con "Indietro". */
body:not(:has(#view-menu.active #menuMain:not(.hidden))) #acctBar { display:none !important; }
/* "Accedi / Registrati" per esteso; sullo smartphone solo "Accedi". */
#btnAcct .acctShort { display:none; }
@media (max-width:767px), (max-height:500px) {
  #btnAcct .acctLong { display:none; }
  #btnAcct .acctShort { display:inline; }
}

/* Menu SMARTPHONE orizzontale (decisione 2026-10-03, video-0310):
   - nessuna barra in alto: "Accedi / Registrati" (o profilo + Esci) va in basso
     a sinistra nella colonna laterale, al posto della nota;
   - il menu principale e la scelta "Contro il computer" stanno nello schermo
     senza scorrere e rispettano le aree sicure (Dynamic Island). */
@media (max-height:500px) {
  body:has(#view-menu.active #menuMain:not(.hidden)) { --menu-rail:150px; }
  /* Avvisi reali (email, manutenzione): senza barra in alto partono dal bordo
     sicuro e il menu torna a scorrere solo in quel caso. */
  body:has(#view-menu.active #menuMain:not(.hidden)) :is(#emailVerificationNotice,#maintenanceBanner):not(.hidden) {
    margin:max(8px, env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(var(--menu-rail) + 12px + env(safe-area-inset-left));
  }
  body:has(:is(#emailVerificationNotice,#maintenanceBanner):not(.hidden)) #view-menu:has(#menuMain:not(.hidden)).active { height:auto; overflow:visible; }
  #view-menu:has(#menuMain:not(.hidden)).active {
    height:100dvh; min-height:0; overflow:hidden; justify-content:center;
    padding:max(8px, env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) calc(var(--menu-rail) + 12px + env(safe-area-inset-left));
  }
  /* Le aree sicure stanno nel padding della vista: il riquadro non aggiunge margini. */
  #view-menu .menuBox, #view-browse .menuBox, #view-lobby .menuBox { margin-inline:0; }
  .menuSidebar {
    width:calc(var(--menu-rail) + env(safe-area-inset-left));
    padding:max(12px, env(safe-area-inset-top)) 9px 0 calc(9px + env(safe-area-inset-left));
  }
  .menuBrand { margin:0 6px 10px; font-size:18px; letter-spacing:1px; }
  #menuNav { gap:4px; }
  #menuNav button { min-height:44px; padding:8px 10px; font-size:13px; }
  .menuDivider { margin-block:4px; }
  .menuAsideNote { display:none; }
  /* Account in basso a sinistra (stessa estetica dei bottoni, 44px). */
  body:has(#view-menu.active #menuMain:not(.hidden)) #acctBar {
    inset:auto auto 0 0; width:calc(var(--menu-rail) + env(safe-area-inset-left)); min-height:0;
    padding:0 9px max(8px, env(safe-area-inset-bottom)) calc(9px + env(safe-area-inset-left));
    flex-direction:column; align-items:stretch; justify-content:flex-end;
    border:0; background:none; box-shadow:none;
  }
  body:has(#view-menu.active #menuMain:not(.hidden)) #acctBar .homeLink { display:none; }
  body:has(#view-menu.active #menuMain:not(.hidden)) #acctBar .acctChip { flex-direction:column; align-items:stretch; gap:6px; }
  body:has(#view-menu.active #menuMain:not(.hidden)) #acctBar .acctBtn { width:100%; min-height:44px; padding-inline:4px; font-size:12px; letter-spacing:0; }
  body:has(#view-menu.active #menuMain:not(.hidden)) #acctBar #btnProfile { max-width:none; width:100%; gap:8px; padding:0 4px; }
  body:has(#view-menu.active #menuMain:not(.hidden)) #acctBar .menuProfileAvatar { width:32px; height:32px; font-size:19px; }
  /* Contenuto principale compatto. */
  .menuComposition { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:14px; padding:0; }
  .menuEyebrow { font-size:10px; letter-spacing:1.8px; }
  #menuWelcomeTitle { font-size:clamp(24px,3.6vw,34px); margin:8px 0; }
  .menuIntro { font-size:13px; line-height:1.5; }
  .menuCards { margin:8px 0 0 4px; height:96px; width:200px; transform:scale(.5); transform-origin:left top; }
  .menuChoices { padding:12px 14px; }
  .menuChoices > .menuEyebrow { margin-bottom:10px; }
  .menuAction { min-height:48px; padding:8px 12px; font-size:14px; }
  .menuPrimary { min-height:56px; font-size:16px; }
  .menuAction small { margin-top:3px; font-size:11px; }
  .menuActionRow { margin:8px 0; }
  .menuActionRow .menuAction { padding:8px 10px; }
  .menuLocal { margin-top:8px; padding-top:8px; }
  #menuMain .lobbyPublicStats { margin-top:8px; }
  .menuLobbyStatus { margin-top:4px; }
  #menuMain .rulesDisclosure { margin-top:10px; padding-top:6px; font-size:9px; line-height:1.4; }
  #view-menu.view.active, #view-browse.view.active, #view-lobby.view.active {
    padding-top:max(8px, env(safe-area-inset-top)); padding-bottom:max(8px, env(safe-area-inset-bottom));
    padding-inline:calc(12px + env(safe-area-inset-left)) calc(12px + env(safe-area-inset-right));
  }
  #view-menu:has(#profilePanel:not(.hidden)).active {
    padding:max(8px, env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  }
  #view-tutorial.active { padding-top:max(8px, env(safe-area-inset-top)); }
  /* "Gioca contro il computer" / "Crea tavolo": due colonne, tutto visibile. */
  #view-menu:has(#menuConfig:not(.hidden)).active { height:100dvh; min-height:0; justify-content:center; }
  #view-menu:has(#menuConfig:not(.hidden)) > .menuBox { max-width:760px; padding:10px 16px 12px; }
  #menuConfig {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"title title" "target side" "timer side" "back side";
    column-gap:18px; row-gap:8px; margin:0; align-items:start;
  }
  #menuConfig.hidden { display:none; }
  #configTitle { grid-area:title; font-size:18px; margin:0; }
  #menuConfig .mode { margin:0; }
  #menuConfig > .mode:has(#targetGroup) { grid-area:target; }
  #menuConfig > .mode:has(#timerGroup) { grid-area:timer; }
  #configSeats, #configAI { grid-area:side; align-self:center; }
  #menuConfig .modeTitle { font-size:11px; margin-bottom:5px; }
  #menuConfig .segBtn { min-height:44px; padding:8px 6px; font-size:14px; }
  #menuConfig .btnRow { margin:0 0 8px; gap:8px; }
  #configAI .btnRow { grid-template-columns:1fr; }
  #menuConfig .bigBtn { min-height:44px; padding:9px 12px; font-size:15px; }
  #configSeats .joinRow { margin:0; }
  #btnConfigBack { grid-area:back; justify-self:start; align-self:end; margin:0; min-height:44px; }
}

/* Menu solo in orizzontale (decisione 2026-10-03): stessa query del prompt
   della partita; fuori dalla partita copre menu, sottomenu e modali. Sui
   computer (finestra verticale) il menu si adatta. */
#menuRotateDevice { display:none; }
@media (orientation:portrait) and (max-width:767px), (orientation:portrait) and (pointer:coarse) and (max-width:1439px){
  body:not(:has(#view-game.active)) > #menuRotateDevice {
    display:grid; place-items:center; align-content:center; gap:10px;
    position:fixed; inset:0; z-index:2000; padding:28px; text-align:center;
    background:radial-gradient(circle at 50% 35%,#145f2d,#061d0e 72%); color:#fff;
  }
  #menuRotateDevice .rotateIcon {
    display:grid; place-items:center; width:72px; height:72px;
    border:2px solid var(--amber); border-radius:18px;
    color:var(--gold); font-size:48px; line-height:1;
  }
  #menuRotateDevice strong { color:var(--gold); font-size:clamp(22px,7vw,34px); }
  #menuRotateDevice span { max-width:32ch; color:#e8e4d8; font-size:clamp(15px,4vw,19px); }
}

/* Tour interattivo sopra il tavolo: il pannello resta cliccabile, il resto del
   livello lascia passare i tocchi; lo spot ambra segue l'elemento (anche al
   ridimensionamento, tutorial.js). Il pannello va in alto se lo spot è in basso. */
#tour { position:fixed; inset:0; z-index:1000; pointer-events:none; }
#tour.hidden { display:none; }
#tour > div:first-child {
  position:absolute; left:50%; bottom:max(12px,env(safe-area-inset-bottom)); transform:translateX(-50%);
  width:min(440px,calc(100vw - 24px)); z-index:2; pointer-events:auto;
  padding:14px 16px; border-radius:14px; text-align:center; color:#f3efe2;
  background:#0f2b1a; border:1px solid var(--panel-bd); box-shadow:0 18px 44px rgba(0,0,0,.55);
}
#tour.spotLow > div:first-child { bottom:auto; top:max(12px,env(safe-area-inset-top)); }
.tourTitle { color:var(--gold); font-weight:800; font-size:16px; margin-bottom:6px; }
.tourBody { font-size:14px; line-height:1.45; }
#tour > div:first-child > div:nth-child(3) { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.tourSkip { margin-top:6px; background:none; border:0; color:var(--txt-soft); text-decoration:underline; font-size:13px; }
.tourSpot {
  position:fixed; display:none; z-index:1; pointer-events:none;
  border:3px solid var(--amber); border-radius:14px; box-sizing:border-box;
  box-shadow:0 0 0 4px rgba(240,192,96,.25);
  transition:top .22s var(--card-ease), left .22s var(--card-ease), width .22s var(--card-ease), height .22s var(--card-ease);
}
/* Toast XP: fisso in alto, compare/scompare in dissolvenza. */
#xpToast {
  position:fixed; left:50%; top:max(14px,env(safe-area-inset-top)); transform:translateX(-50%);
  z-index:1100; pointer-events:none; opacity:0; transition:opacity .25s var(--card-ease);
  padding:8px 16px; border-radius:999px; background:rgba(0,0,0,.82); border:1px solid var(--amber);
  color:var(--gold); font-weight:800; font-size:14px;
}
#xpToast.show { opacity:1; transition:none; animation:xpToastIn .25s var(--card-ease); }
@keyframes xpToastIn { from { transform:translate(-50%,-6px); } to { transform:translate(-50%,0); } }
@media (prefers-reduced-motion: reduce){ .tourSpot, #xpToast { transition:none; } #xpToast.show { animation:none; } }

/* Utente non registrato: solo "Iscriviti per giocare online" e "Contro il computer";
   Crea tavolo, Cerca partita e Le mie partite compaiono dopo l'accesso. */
body.guest .memberOnly { display: none !important; }

/* Le quattro categorie (smartphone, tablet, desktop, desktop grande): il valore
   serve ai test e a chi ispeziona la pagina, non cambia la grafica. */
@media (max-width:767px), (max-height:500px) { :root { --bp:phone; } }
@media (min-width:768px) and (max-width:1023px) and (min-height:501px), (pointer:coarse) and (min-width:768px) and (max-width:1439px) and (min-height:501px) { :root { --bp:tablet; } }
@media (not (pointer:coarse)) and (min-width:1024px) and (max-width:1439px) and (min-height:501px) { :root { --bp:desktop; } }
@media (min-width:1440px) and (min-height:501px) { :root { --bp:big; } }