/* ==========================================================================
   Bora — fuori dal tavolo carta chiara e inchiostro (tema chiaro/scuro automatico);
   in partita un tavolo vero: panno, bordo in legno, luce su chi deve giocare.
   ========================================================================== */
:root {
  --bg: #f4f1ea;
  --surface: #fffdf8;
  --surface-2: #f0ebe1;
  --ink: #1e1c18;
  --muted: #726d63;
  --line: #e4ddcf;
  --accent: #1d6a4f;
  --accent-ink: #ffffff;
  --accent-soft: #e1eee7;
  --danger: #b5432f;
  --gold: #d6a226;
  --gold-hi: #f3d27a;
  /* tavolo: panno (dal centro ai bordi) e bordo in legno; i colori del panno si scelgono dal menu */
  --felt-hi: #2e7d5e;
  --felt: #1f6248;
  --felt-2: #1a5540;
  --felt-lo: #0f3b2b;
  --felt-3: #0b2b20;
  --rail-hi: #7a5233;
  --rail: #4c301c;
  --rail-lo: #24160b;
  --on-felt: #f6f2e7;
  --on-felt-soft: rgba(246, 242, 231, .74);
  --chip: rgba(4, 14, 10, .36);   /* fondo di nomi, pillole e pulsanti tondi sul panno */
  --team-0: #e2ad2f;
  --team-1: #6b9bff;
  /* un colore per posto (avatar, carte giocate): chiari e distinti sul panno, nessuno uguale all'oro del turno */
  --seat-0: #7cc4ff; --seat-1: #ff8a7a; --seat-2: #c7a6ff; --seat-3: #8ee6c8;
  --seat-4: #ffb86b; --seat-5: #ff9ccf; --seat-6: #d6e86a; --seat-7: #e9e2d0;
  --radius: 18px;
  --shadow-sm: 0 1px 2px rgba(30, 24, 12, .06), 0 1px 1px rgba(30, 24, 12, .04);
  --shadow: 0 14px 34px -14px rgba(30, 24, 12, .3);
  --card-w: 100px;
  --table-card-w: 88px;
  --mini-w: 38px;
  --card-ratio: 300 / 559;   /* proporzioni delle immagini in static/cards */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;
  color-scheme: light;
  font-family: var(--font);
}
:root[data-felt="blu"] { --felt-hi: #2d6496; --felt: #1f4b78; --felt-2: #1a4067; --felt-lo: #102a46; --felt-3: #0a1d31; }
:root[data-felt="rosso"] { --felt-hi: #8e3039; --felt: #6e2129; --felt-2: #5e1b22; --felt-lo: #3c1015; --felt-3: #290a0e; }
:root[data-felt="grafite"] { --felt-hi: #4d5653; --felt: #363d3b; --felt-2: #2e3432; --felt-lo: #1d2221; --felt-3: #131716; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111412;
    --surface: #191d1b;
    --surface-2: #222724;
    --ink: #ecebe5;
    --muted: #9b998f;
    --line: #2c312e;
    --accent: #52b78f;
    --accent-ink: #0b1d15;
    --accent-soft: #1d3229;
    --danger: #e0735e;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 16px 38px -14px rgba(0, 0, 0, .75);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { background: var(--bg); color: var(--ink); min-height: 100vh; min-height: 100dvh; line-height: 1.45; -webkit-font-smoothing: antialiased;
  /* viewport-fit=cover: niente sotto notch e barre di sistema */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
h1, h2, h3, h4 { font-weight: 680; letter-spacing: -.02em; margin: 0 0 .45em; line-height: 1.15; }
h3 { font-size: 15px; }
h4 { font-size: 13px; margin-top: 14px; color: var(--muted); font-weight: 600; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; color: var(--muted); margin: 0 0 8px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.spread { justify-content: space-between; margin-top: 8px; }
.loading { text-align: center; padding: 30vh 0; }

/* ---------- menu della partita e punteggio: pulsanti tondi di vetro scuro ---------- */
/* il menu sta a sinistra del mio nome, a portata di pollice, come le emote a destra */
.me-row .game-menu { position: static; }
.me-row .game-menu summary { position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.game-menu summary, .score-pill, .emote-picker summary {
  background: var(--chip); color: var(--on-felt); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.game-menu summary {
  list-style: none; cursor: pointer; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; line-height: 1; transition: background-color .15s;
}
.game-menu summary::-webkit-details-marker { display: none; }
.game-menu[open] summary { background: var(--on-felt); color: #1c1c1a; }
.menu-pop {
  /* si apre verso l'alto, centrato sulla riga del mio nome (come le emote) */
  position: absolute; z-index: 30; bottom: calc(100% + 8px); left: calc(50% - min(125px, 50vw - 16px)); width: 250px; max-width: calc(100vw - 32px);
  max-height: 60vh; overflow: auto; -webkit-user-select: text; user-select: text;
  padding: 14px; border-radius: 16px; display: grid; gap: 10px; font-size: 14px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .6);
  transform-origin: bottom center; animation: popIn .16s ease-out;
}
@keyframes popIn { from { opacity: 0; transform: scale(.94); } }
.menu-pop p { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.menu-pop b { font-weight: 650; }
.menu-pop .btn { width: 100%; }
.menu-check { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--muted); }
.menu-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.menu-felt { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); padding: 2px 0 4px; }
.felt-pick { display: flex; gap: 8px; }
.felt-swatch { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.felt-swatch[aria-pressed=true] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.sw-verde { background: radial-gradient(circle at 35% 30%, #3a8f6d, #13432f); }
.sw-blu { background: radial-gradient(circle at 35% 30%, #3b74a8, #102a46); }
.sw-rosso { background: radial-gradient(circle at 35% 30%, #a23b45, #3c1015); }
.sw-grafite { background: radial-gradient(circle at 35% 30%, #5e6865, #1d2221); }

/* punteggio dei giochi a due parti, sempre in vista nell'angolo in alto a sinistra */
.score-pill { position: absolute; top: 10px; left: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px; border-radius: 999px; font-size: 16px; font-weight: 750;
  font-variant-numeric: tabular-nums; pointer-events: none; }
.score-pill i { font-style: normal; font-weight: 400; opacity: .5; }

.report-dialog { width: min(440px, calc(100vw - 32px)); padding: 22px; border-radius: 18px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.report-dialog::backdrop { background: rgba(8, 10, 9, .55); }
.report-dialog p { margin: 0 0 12px; }
.report-dialog textarea { width: 100%; box-sizing: border-box; resize: vertical; padding: 10px 12px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg); }
.report-dialog .modal-actions { margin-top: 14px; }


/* ---------- emote ---------- */
/* il riquadro delle emote si centra sulla riga del mio nome (al centro del tavolo), non sul pulsante */
.me-row { display: flex; align-items: center; gap: 8px; position: relative; }
.emote-picker { position: static; }
/* il pulsante sta accanto al nome senza spostarlo: il nome resta al centro, e con lui il fumetto delle mie emote */
.me-row .emote-picker summary { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.emote-picker summary {
  list-style: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; line-height: 1; transition: background-color .15s, opacity .2s;
}
.emote-picker summary::-webkit-details-marker { display: none; }
.emote-picker[open] summary { background: var(--on-felt); color: #1c1c1a; }
.emote-picker.cooling summary { opacity: .35; cursor: not-allowed; filter: grayscale(1); }
.emote-pop {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 30;
  width: min(330px, calc(100vw - 32px)); max-height: 60vh; overflow: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.emote-pop button { border: 0; cursor: pointer; border-radius: 12px; padding: 4px 2px 6px; background: var(--surface-2); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.emote-pop button .em { width: 64px; height: 64px; }
.emote-pop button:hover { background: var(--accent-soft); }
.emote-pop button:last-child:nth-child(3n + 1) { grid-column: 2; }   /* l'ultima da sola sta al centro */
.emote-bubble {
  position: fixed; z-index: 55; pointer-events: none; display: flex; flex-direction: column; align-items: center;
  animation: emotePop 3.2s ease-out both;
}
.emote-bubble .em { width: 96px; height: 96px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.emote-bubble b { margin-top: -10px; padding: 4px 12px; border-radius: 12px; background: #fff; color: #1c1c1a; font-size: 15px; white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .55); }
.emote-bubble.above { transform: translate(-50%, -100%); }
.emote-bubble.below { transform: translate(-50%, 0); }
@keyframes emotePop {
  0% { opacity: 0; scale: .3; } 8% { opacity: 1; scale: 1.15; } 14% { scale: 1; }
  86% { opacity: 1; } 100% { opacity: 0; }
}

/* il Re delle emote: ogni parte ruota e scala attorno a sé */
.em * { transform-box: fill-box; transform-origin: center; }
.em .em-skin { fill: #f3c49b; }
.em .em-head { transform-origin: 50% 90%; }
.em-laugh .em-head { animation: emLaugh .45s ease-in-out infinite; }
.em-laugh .em-tongue { transform-origin: 50% 0; animation: emTongue .22s ease-in-out infinite alternate; }
.em-laugh .em-point { animation: emPoint .45s ease-in-out infinite; }
.em-ha { font: 900 15px system-ui, sans-serif; fill: #ffd23f; stroke: #2a1a10; stroke-width: 1; paint-order: stroke; opacity: 0; animation: emHa .9s ease-out infinite; }
.em-ha.h2 { animation-delay: .45s; }
.em-cry .em-head { animation: emSob 1.2s ease-in-out infinite; }
.em-cry .em-drop { animation: emFall .8s ease-in infinite; }
.em-cry .em-drop.d2 { animation-delay: .4s; }
.em-rage { animation: emShake .12s linear infinite; }
.em-rage .em-skin { animation: emRed 1.2s ease-in-out infinite alternate; }
.em-rage .em-crown { animation: emHop .36s ease-out infinite; }
.em-rage .em-steam { animation: emSteam .9s ease-out infinite; }
.em-rage .em-steam.s2 { animation-delay: .45s; }
.em-wtf .em-head { animation: emTilt 1.4s ease-in-out infinite; }
.em-wtf .em-pupil { animation: emLook 1.4s steps(1) infinite; }
.em-q { font: 900 22px system-ui, sans-serif; fill: #fff; stroke: #2a1a10; stroke-width: 1.2; paint-order: stroke; opacity: 0; animation: emQ 1.4s ease-out infinite; }
.em-q.q2 { animation-delay: .35s; font-size: 18px; }
.em-q.q3 { animation-delay: .7s; }
/* Spacco tutto: un'unica sequenza di 3 s (nel fumetto si vede una volta) */
.em-boom { overflow: visible; }
.em-boom .em-head, .em-boom .em-body { animation: emSwell 3s linear infinite; }
.em-boom .em-head { transform-origin: 50% 50%; }
.em-boom .em-head .em-skin { animation: emRed 1.3s ease-in forwards; }
.em-boom .em-burst { animation: emBurst 3s ease-out infinite; }
.em-boom .em-smoke { animation: emSmoke 3s ease-out infinite; }
.em-boom .em-bits > g { animation: emShow 3s steps(1) infinite; }
.em-boom .em-card { animation: emBit1 3s ease-out infinite; }
.em-boom .em-card.c2 { animation-name: emBit2; }
.em-boom .em-card.c3 { animation-name: emBit3; }
.em-boom .em-card.c4 { animation-name: emBit4; }
.em-boom .em-crownfly { animation: emCrownFly 3s ease-out infinite; }
.em-lucky .em-head { animation: emSmug 1.6s ease-in-out infinite; }
.em-lucky .em-clover { animation: emSpin 1.6s ease-in-out infinite; }
.em-lucky .em-spark { animation: emTwinkle 1s ease-in-out infinite; }
.em-lucky .em-spark.k2 { animation-delay: .5s; }
.em-sleep .em-head { animation: emNod 2s ease-in-out infinite; }
.em-z { font: 700 14px system-ui, sans-serif; fill: var(--on-felt, #fff); stroke: #2a1a10; stroke-width: .8; paint-order: stroke; opacity: 0;
  animation: emZ 2s ease-out infinite; }
.em-z.z2 { animation-delay: .5s; font-size: 17px; }
.em-z.z3 { animation-delay: 1s; font-size: 20px; }
.em-scold .em-head { animation: emGrumble .9s ease-in-out infinite; }
.em-scold .em-wag { transform-origin: 50% 100%; animation: emWag .3s ease-in-out infinite alternate; }
.em-scold .em-curse { animation: emCurse 1.2s ease-out infinite; }
.em-curse text { font: 900 13px system-ui, sans-serif; fill: #b5432f; }
.em-clap .em-head { animation: emBounce .5s ease-in-out infinite; }
.em-clap .em-hand.l { animation: emClapL .25s ease-in infinite alternate; }
.em-clap .em-hand.r { animation: emClapR .25s ease-in infinite alternate; }
.em-clap .em-hit { animation: emHit .5s ease-out infinite; }
.em-clap .em-spark { animation: emTwinkle 1s ease-in-out infinite; }
.em-clap .em-spark.k2 { animation-delay: .5s; }
@keyframes emGrumble { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-3deg) translateY(1px); } }
@keyframes emWag { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@keyframes emCurse { 0% { transform: scale(.3); opacity: 0; } 20% { transform: scale(1.1); opacity: 1; } 75% { transform: scale(1) rotate(-4deg); opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
@keyframes emBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes emClapL { from { transform: translate(-4px, 2px) rotate(-10deg); } to { transform: translate(7px, 0) rotate(4deg); } }
@keyframes emClapR { from { transform: translate(4px, 2px) rotate(10deg); } to { transform: translate(-7px, 0) rotate(-4deg); } }
@keyframes emHit { 0%, 40% { transform: scale(.2); opacity: 0; } 55% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes emLaugh { 0%, 100% { transform: rotate(-8deg) translateY(-2px); } 50% { transform: rotate(-3deg) translateY(2px); } }
@keyframes emTongue { from { transform: scaleY(.8) rotate(-8deg); } to { transform: scaleY(1.1) rotate(8deg); } }
@keyframes emPoint { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, -5px) rotate(-8deg); } }
@keyframes emHa { 0% { transform: translateY(6px) scale(.4); opacity: 0; } 25% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { transform: translateY(-10px) scale(1); opacity: 0; } }
@keyframes emTilt { 0%, 100% { transform: rotate(0); } 30%, 70% { transform: rotate(-12deg); } }
@keyframes emLook { 0% { transform: translate(0, 0); } 33% { transform: translate(-2px, -1px); } 66% { transform: translate(2px, 1px); } }
@keyframes emQ { 0% { transform: translateY(8px) scale(.3); opacity: 0; } 25% { transform: translateY(0) scale(1.2); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-6px) rotate(12deg); opacity: 0; } }
@keyframes emSwell {
  0% { transform: scale(1); opacity: 1; } 10% { transform: scale(1.03) translate(-1px, 0); } 15% { transform: scale(1.04) translate(1px, 0); }
  20% { transform: scale(1.06) translate(-2px, 1px); } 25% { transform: scale(1.08) translate(2px, -1px); } 30% { transform: scale(1.1) translate(-2px, 0); }
  34% { transform: scale(1.13) translate(3px, 1px); } 38% { transform: scale(1.16) translate(-3px, -1px); } 42% { transform: scale(1.2) translate(3px, 0); }
  45% { transform: scale(1.24) translate(-3px, 1px); opacity: 1; } 47%, 100% { transform: scale(1.5); opacity: 0; }
}
@keyframes emBurst { 0%, 44% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.1); opacity: 1; } 62% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }
@keyframes emSmoke { 0%, 46% { transform: scale(.2); opacity: 0; } 55% { transform: scale(1); opacity: .95; } 85% { transform: scale(1.4) translateY(-6px); opacity: .7; } 100% { transform: scale(1.6) translateY(-10px); opacity: 0; } }
@keyframes emShow { 0% { opacity: 0; } 46% { opacity: 1; } }
@keyframes emBit1 { 0%, 46% { transform: none; } 100% { transform: translate(-60px, -30px) rotate(-540deg); opacity: 0; } }
@keyframes emBit2 { 0%, 46% { transform: none; } 100% { transform: translate(60px, -36px) rotate(500deg); opacity: 0; } }
@keyframes emBit3 { 0%, 46% { transform: none; } 100% { transform: translate(-50px, 40px) rotate(420deg); opacity: 0; } }
@keyframes emBit4 { 0%, 46% { transform: none; } 100% { transform: translate(52px, 44px) rotate(-460deg); opacity: 0; } }
@keyframes emCrownFly { 0%, 46% { transform: none; } 70% { transform: translate(8px, -64px) rotate(220deg); } 100% { transform: translate(14px, -20px) rotate(400deg); opacity: 0; } }
@keyframes emSob { 0%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(2px) rotate(-2deg); } 50% { transform: translateY(3px) rotate(2deg); } }
@keyframes emFall { 0% { transform: translateY(-6px); opacity: 1; } 100% { transform: translateY(14px) scale(.5); opacity: 0; } }
@keyframes emShake { 0% { transform: translate(-1.5px, 0); } 50% { transform: translate(1.5px, -1px); } 100% { transform: translate(-1.5px, 0); } }
@keyframes emRed { from { fill: #f3c49b; } to { fill: #e0533b; } }
@keyframes emHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px) rotate(4deg); } }
@keyframes emSteam { 0% { transform: translateY(6px) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-16px) scale(1.3); opacity: 0; } }
@keyframes emSmug { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-2px); } }
@keyframes emSpin { 0%, 100% { transform: rotate(-20deg) scale(1); } 50% { transform: rotate(20deg) scale(1.15); } }
@keyframes emTwinkle { 0%, 100% { transform: scale(.3); opacity: 0; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes emNod { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(-10deg) translateY(3px); } }
@keyframes emZ { 0% { transform: translate(0, 6px) scale(.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(8px, -14px) scale(1.1); opacity: 0; } }
/* nel selettore si muovono solo al passaggio del mouse, per non distrarre */
@media (hover: hover) { .emote-pop button:not(:hover) .em, .emote-pop button:not(:hover) .em * { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) {
  .em, .em * { animation: none !important; }
  .em .em-z, .em .em-ha, .em .em-q { opacity: 1; }
  .em-boom .em-burst, .em-boom .em-smoke, .em-boom .em-bits { display: none; }
}

main { max-width: 1180px; margin: 0 auto; padding: 36px 24px 48px; }

/* ---------- controlli ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: 12px; padding: 11px 20px; cursor: pointer;
  font-weight: 650; font-size: 15px; line-height: 1.2; text-decoration: none; white-space: nowrap;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 6px -3px rgba(0, 0, 0, .35);
  transition: filter .15s, transform .08s, background-color .15s, box-shadow .15s;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .42; cursor: not-allowed; filter: none; transform: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; }
@media (hover: hover) { .btn.ghost:hover { background: var(--surface-2); } }   /* sul telefono l'hover resta attaccato dopo il tocco */
.btn.soft { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.small { padding: 7px 12px; font-size: 13px; border-radius: 9px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.panel > h2 { font-size: 20px; }
label.field, div.field { display: grid; gap: 7px; justify-items: start; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 16px; }
label.field input { justify-self: stretch; }
input[type=text], input[type=number], .field select {
  width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font-size: 16px; font-weight: 500; transition: border-color .15s, box-shadow .15s;
}
.field select { justify-self: stretch; cursor: pointer; }
input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.code-input { text-transform: uppercase; letter-spacing: .3em; font-family: ui-monospace, Menlo, monospace; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface-2); max-width: 100%; }
/* scelte delle impostazioni: larghe uguali; se non ci stanno su una riga vanno a capo per pulsante intero */
.field .seg { display: flex; width: 100%; }
.field .seg button { flex: 1 1 0; min-width: max-content; white-space: nowrap; }
.seg button { border: 0; background: transparent; color: var(--muted); padding: 7px 13px; border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 550; transition: background-color .15s, color .15s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed=true] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.error { color: var(--danger); min-height: 1.3em; font-size: 14px; margin-top: 8px; }
.error:empty { min-height: 0; margin: 0; }

/* ---------- home ---------- */
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin: 0 0 22px; }
.logo { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(40px, 6vw, 58px); letter-spacing: -.01em; line-height: .95;
  margin: 0; color: var(--accent); display: flex; align-items: center; gap: 12px; }
.logo-mark { width: .82em; height: .82em; flex: none; }
.lead { font-size: 16px; color: var(--muted); margin: 0; max-width: 460px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 22px; border-radius: 14px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.stat { display: flex; flex-direction: column; gap: 1px; padding: 11px 16px; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { font-size: 21px; font-weight: 750; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat:first-child b { color: var(--accent); }
.stat span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.games { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.game-tile {
  text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 10px; color: var(--ink);
  padding: 10px 10px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  transition: border-color .15s, box-shadow .2s, transform .2s; box-shadow: var(--shadow-sm);
}
.game-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.game-tile.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.game-tile h3 { font-size: 17px; margin: 0 0 1px; padding-left: 2px; }
.tile-meta { font-size: 12px; font-weight: 600; color: var(--muted); padding-left: 2px; display: block; }
.game-tile.active .tile-meta { color: var(--accent); }
.tile-meta .short { display: none; }
.tile-fan { position: relative; height: 104px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(120% 95% at 50% 25%, var(--felt-hi), var(--felt) 55%, var(--felt-lo)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.tile-fan .card { --card-w: 58px; position: absolute; left: 50%; top: 14px; transform-origin: 50% 130%;
  transform: translateX(calc(-50% + (var(--i) - 1) * 34px)) rotate(calc((var(--i) - 1) * 12deg)); }
.game-tile:hover .tile-fan .card { transform: translateX(calc(-50% + (var(--i) - 1) * 38px)) rotate(calc((var(--i) - 1) * 15deg)); }
.blurb { margin: -4px 0 18px; }
.forms { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.forms .btn[type=submit] { min-width: 160px; }
.info { margin-top: 26px; }
.info h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.info ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 22px; }
.info li { font-size: 14px; color: var(--muted); line-height: 1.45; }
.info li b { color: var(--ink); display: block; }

/* ---------- lobby ---------- */
.lobby { max-width: 720px; margin: 0 auto; }
.lobby h2 { font-size: 30px; font-family: var(--font-display); font-style: italic; letter-spacing: -.01em; }
.code-box { display: flex; align-items: center; gap: 14px 16px; flex-wrap: wrap; justify-content: space-between; margin: 18px 0; padding: 16px 18px; border-radius: 14px;
  background: radial-gradient(130% 120% at 0% 0%, var(--felt-hi), var(--felt) 55%, var(--felt-lo)); color: var(--on-felt); }
.code-box .muted { color: var(--on-felt-soft); }
.code-box .btn, .code-box .btn:hover { background: var(--on-felt); color: #1c1c1a; }
.code { font-family: ui-monospace, Menlo, monospace; font-size: 30px; letter-spacing: .25em; font-weight: 700; line-height: 1.2; }
.teams { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 16px 0; }
.teams h3 { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.seat-list { display: grid; gap: 8px; margin: 16px 0; }
.seat { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1.5px dashed var(--line); margin-bottom: 8px; min-height: 60px; }
.seat-list .seat { margin: 0; }
.seat.taken { border-style: solid; border-width: 1px; background: var(--bg); }
.seat.me { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.seat .av { --av: 38px; margin: 0; }
.av.empty { background: none; box-shadow: inset 0 0 0 1.5px var(--line); }
.seat .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .actions { display: flex; gap: 6px; }

/* ---------- carte ---------- */
.card {
  width: var(--card-w); aspect-ratio: var(--card-ratio); border-radius: calc(var(--card-w) * .12);
  position: relative; flex: none; -webkit-user-select: none; user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 5px 12px -5px rgba(0, 0, 0, .45);
  transition: transform .18s ease, opacity .2s, filter .2s, box-shadow .2s;
}
.card-img { width: 100%; height: 100%; display: block; border-radius: inherit; -webkit-touch-callout: none; }
.card-zoom {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: rgba(0, 0, 0, .6); pointer-events: none; animation: zoom-in .14s ease-out;
}
.card-zoom .card { --card-w: min(72vw, 64vh * 300 / 559, 360px); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .7); }
@keyframes zoom-in { from { opacity: 0; transform: scale(.92); } }
/* dorso: reticolo rosso e oro con cornice bianca, in solo CSS */
.card-back {
  display: block; width: 100%; height: 100%; border-radius: inherit;
  background:
    radial-gradient(ellipse 26% 16% at 50% 50%, #7d1d1d 0 60%, var(--gold) 63% 72%, transparent 75%),
    repeating-linear-gradient(45deg, rgba(226, 179, 60, .5) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(226, 179, 60, .5) 0 1px, transparent 1px 7px),
    linear-gradient(160deg, #9a2626, #7a1a1a);
  box-shadow: inset 0 0 0 3px #faf8f2, inset 0 0 0 4px rgba(214, 162, 38, .8);
}
.mini { --card-w: var(--mini-w); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.team-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.team-0 { background: var(--team-0); }
.team-1 { background: var(--team-1); }

/* ---------- tavolo ---------- */
/* in partita la pagina è una stanza scura e il tavolo la riempie; le carte crescono con l'altezza dello schermo */
body.in-game { display: flex; flex-direction: column; box-sizing: border-box;
  background: radial-gradient(120% 90% at 50% 15%, #2a2f2b 0%, #141816 55%, #0b0d0c 100%) fixed; }
body.in-game main { flex: 1; display: flex; width: 100%; max-width: 1680px; padding: 14px 16px; min-height: 0; }
.game { display: flex; flex: 1; min-width: 0; min-height: 0; }
.felt {
  --rail-w: 14px;
  position: relative; isolation: isolate; flex: 1; min-width: 0;
  border: var(--rail-w) solid transparent; border-radius: 36px; padding: 14px 18px; color: var(--on-felt);
  /* panno con una trama appena accennata, e il bordo in legno disegnato nello spazio del bordo */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") padding-box,
    radial-gradient(ellipse 90% 75% at 50% 42%, var(--felt-hi) 0%, var(--felt) 45%, var(--felt-lo) 88%, var(--felt-3) 100%) padding-box,
    repeating-linear-gradient(100deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px) border-box,
    linear-gradient(180deg, var(--rail-hi), var(--rail) 40%, var(--rail-lo)) border-box;
  /* ombra del tavolo, filo d'oro fra legno e panno, il panno che scende sotto il bordo */
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .55),
    inset 0 0 0 1px rgba(214, 162, 38, .38), inset 0 12px 30px -10px rgba(0, 0, 0, .6), inset 0 -8px 24px -12px rgba(0, 0, 0, .5);
  display: grid; gap: 10px;
  --card-w: clamp(70px, 9.4vh, 124px); --table-card-w: clamp(58px, 8vh, 108px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);   /* simmetriche e fisse: il centro non si sposta */
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "top top top" "left center right" "me me me";
  -webkit-user-select: none; user-select: none; touch-action: manipulation;   /* niente zoom col doppio tocco (doppio tocco = gioca) */
}
/* livello sotto a tutto, ritagliato sul panno: luce, segni stampati, bagliore del turno */
.felt-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: calc(36px - var(--rail-w)); }
.felt-light {
  position: absolute; left: 0; top: 0; width: 110vmin; height: 110vmin; margin: -55vmin 0 0 -55vmin; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 226, 158, .2), rgba(255, 226, 158, .075) 45%, transparent);
  transition: transform .8s cubic-bezier(.3, .7, .2, 1); will-change: transform;
}
/* pista stampata sul panno, con il nome del sito in corsivo, appena visibile */
.felt-mark { position: absolute; inset: 15% 9% 21%; border-radius: 999px; display: grid; place-items: center;
  border: 1.5px solid rgba(255, 255, 255, .075); box-shadow: 0 0 0 8px rgba(255, 255, 255, .022), inset 0 0 0 8px rgba(0, 0, 0, .045); }
.felt-mark span { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(56px, 13vmin, 150px);
  line-height: 1; color: rgba(255, 255, 255, .045); letter-spacing: .01em; }
/* tocca a me: un filo d'oro attorno al panno che respira (solo opacità: lo anima la scheda grafica) */
.felt-bg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .35s; will-change: opacity;
  box-shadow: inset 0 0 0 2px rgba(243, 210, 122, .85), inset 0 0 70px rgba(214, 162, 38, .3); }
.felt.my-turn .felt-bg::after { opacity: 1; animation: turnGlow 2.4s ease-in-out .35s infinite; }
@keyframes turnGlow { 50% { opacity: .4; } }

.opps { display: contents; }   /* sul telefono, in tanti, diventa un arco in alto */
.seats-top { grid-area: top; display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; padding: 0 56px; }
.seats-left { grid-area: left; align-self: center; justify-self: start; }
.seats-right { grid-area: right; align-self: center; justify-self: end; }
.opp { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px; max-width: 220px; border-radius: 16px; transition: background-color .25s; }
.opp-cards { display: flex; position: relative; min-height: 20px; }
.opp-cards .card { --card-w: 46px; margin-left: -30px; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.opp-cards .card:first-child { margin-left: 0; }
/* avatar: iniziale nel colore del posto, carte in mano nel pallino */
.av {
  --av: 26px; position: relative; flex: none; width: var(--av); height: var(--av); border-radius: 50%;
  display: inline-grid; place-items: center; font-size: calc(var(--av) * .48); font-weight: 780; line-height: 1;
  color: #16231d; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 55%), var(--seat-c, #ccc);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .18), 0 2px 6px -2px rgba(0, 0, 0, .5);
}
.nameplate.turn .av { box-shadow: 0 0 0 2px var(--gold), 0 2px 6px -2px rgba(0, 0, 0, .5); }
.np-tags { display: inline-flex; align-items: center; gap: 4px; }
.nameplate {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--chip); color: var(--on-felt); white-space: nowrap; max-width: 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: background-color .2s, box-shadow .2s, color .2s;
}
.np-name { overflow: hidden; text-overflow: ellipsis; }
.nameplate.turn { background: var(--on-felt); color: #1c1c1a; box-shadow: 0 0 0 3px rgba(243, 210, 122, .5), 0 6px 16px -6px rgba(0, 0, 0, .5); }
.nameplate.acting { background: var(--gold); color: #2a1f05; box-shadow: 0 0 0 4px rgba(214, 162, 38, .3); animation: acting .5s cubic-bezier(.3, 1.6, .5, 1); }
.nameplate.accused { box-shadow: 0 0 0 3px var(--danger); }
@keyframes acting { 40% { transform: scale(1.07); } }
.tag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.nameplate.turn .tag { background: rgba(0, 0, 0, .08); }
.tag.accent, .nameplate.turn .tag.accent { background: var(--gold); color: #2a1f05; }
.tag.cards { display: none; }   /* il numero di carte: lo mostrano i dorsi, tranne sul telefono in verticale */

.center { grid-area: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 6px; min-height: 0; min-width: 0; }
.center-main { display: flex; align-items: center; justify-content: center; gap: 28px; max-width: 100%; }
.center-main.stretch { align-self: stretch; }
/* ultimo evento della partita, al posto della cronaca */
.ticker { max-width: min(560px, 100%); min-height: 1.75em; padding: 4px 14px; border-radius: 999px; font-size: 13px; text-align: center;
  color: var(--on-felt-soft); background: rgba(0, 0, 0, .2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker:empty { visibility: hidden; }
.ticker.k-take, .ticker.k-big { color: var(--on-felt); font-weight: 600; }
.ticker.k-big { background: rgba(181, 67, 47, .6); }
.ticker.fresh { animation: tickIn .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes tickIn { from { opacity: 0; transform: translateY(-6px); } }
.deck { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: var(--on-felt-soft); }
.deck .stack { position: relative; width: 72px; aspect-ratio: var(--card-ratio); }
.deck .stack .card { position: absolute; --card-w: 72px; }
/* mazzo coperto con lo spessore delle carte sotto */
#tallone .stack > .card:not(.trump), #cx-deck .stack > .card {
  box-shadow: 0 1px 0 #e8e1cf, 0 2px 0 #b8ae96, 0 3px 0 #e8e1cf, 0 4px 0 #b8ae96, 0 10px 16px -6px rgba(0, 0, 0, .6); }
.deck .stack.with-trump { margin-right: 46px; }
.deck .stack .card.trump { left: 50%; transform: translate(-6%, 0) rotate(90deg); }
.trump-note b { color: var(--on-felt); }
/* posti vuoti (mazzo finito, carta pescata): stampati sul panno; i posti della presa invece restano invisibili */
.deck .empty { border-radius: calc(var(--table-card-w) * .1); background: rgba(0, 0, 0, .07); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08); }
.deck .empty { width: 72px; aspect-ratio: var(--card-ratio); }
/* centro con una riga d'informazioni sopra le carte (Bisca, Scopa) */
.table-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.table-info { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--on-felt-soft); white-space: nowrap; }
.table-info b { color: var(--on-felt); }
.table-info .mini-back { --card-w: 13px; margin-right: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.table-info .mini-back .card-back { box-shadow: inset 0 0 0 1px #faf8f2; }
/* Scopa: il tavolo prende tutto lo spazio fra avversari e mano; fitTable (app.js) adatta le carte */
.felt[data-game="scopa"] { grid-template-rows: auto minmax(0, 1fr) auto; }
.center-main.fill { flex: 1 1 0; min-height: 0; align-self: stretch; flex-direction: column; align-items: stretch; }
.center-main.fill .table-wrap { flex: 1; min-height: 0; width: 100%; }
.table-zone { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.table-cards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-content: center; align-items: center; max-width: 100%; }
.table-cards .card, .slot .card { --card-w: var(--table-card-w); }
.table-cards .card.new { animation: drop .35s ease-out; }
.table-cards .card.hl { transform: translateY(-8px); box-shadow: 0 0 0 2px var(--gold), 0 8px 20px -6px rgba(0, 0, 0, .5); }
.table-cards .card.pickable { cursor: pointer; }
.table-cards .card.off { filter: brightness(.55) saturate(.6); }
.table-empty { color: var(--on-felt-soft); font-size: 14px; font-style: italic; opacity: .8; }
@keyframes drop { from { transform: translateY(-20px) scale(1.05); opacity: 0; } }

.me-area { grid-area: me; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hand { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; min-height: calc(var(--card-w) * 559 / 300 + 14px); padding-top: 12px; }
.hand.active .card { cursor: pointer; }
.hand.active .card:hover:not(.dim) { transform: translateY(-8px); }
.hand .card.sel { transform: translateY(-16px); box-shadow: 0 0 0 3px var(--gold), 0 12px 24px -6px rgba(0, 0, 0, .55); }
.hand .card.dim { filter: grayscale(.7) brightness(.6); cursor: not-allowed; }
/* tante carte (fitHand in app.js): sovrapposte di --step, e se serve su due file sfalsate; la seconda copre
   solo la metà bassa della prima, così l'indice in alto a sinistra resta sempre visibile */
.hand.fan { gap: 0; flex-wrap: wrap; justify-content: center; margin-inline: auto; max-width: none; padding-right: calc(var(--card-w) - var(--step)); }
.hand.fan .card { flex: none; margin-right: calc(var(--step) - var(--card-w)); }
.hand.fan .card.r2 { margin-top: calc(var(--card-w) * -.95); }
.hand.fan .card:hover, .hand.fan .card.sel { z-index: 2; }
.hand.rows { min-height: calc(var(--card-w) * 559 / 300 * 1.49 + 14px); }
.me-plate { display: contents; }
.move-panel { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
/* pulsanti fissi: sempre gli stessi, larghezza fissa, al più disattivati; sotto indicazioni e scelte */
.mp-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 46px; max-width: 100%; }
.mp-buttons:has(.opt-row) { flex-wrap: nowrap; }
.mp-buttons:has(.opt-row) .btn { flex: none; }
/* sul panno: pulsante principale color avorio, il secondario di vetro scuro, quello rischioso rosso */
.mp-buttons .btn { min-width: 112px; padding: 12px 22px; border-radius: 14px; background: linear-gradient(180deg, #fdf8ec, #ece2c8); color: #1f1a10;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 18px -8px rgba(0, 0, 0, .7); }
.mp-buttons .btn:disabled { opacity: 1; background: rgba(255, 255, 255, .08); color: rgba(246, 242, 231, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); }
.mp-buttons .btn.danger:not(:disabled) { background: linear-gradient(180deg, #d95c43, #a83a26); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 18px -8px rgba(0, 0, 0, .7); }
.mp-buttons .btn.ghost-felt:not(:disabled) { background: var(--chip); color: var(--on-felt); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.mp-below { height: 3em; overflow: hidden; align-content: flex-start; max-width: 720px; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; justify-content: center; text-align: center; }
.mp-below .hint { flex-basis: 100%; }
.mp-below .rank-pick { flex-basis: 100%; }
.opt-btn[aria-pressed=true] { box-shadow: 0 0 0 3px var(--gold); }
.hint { font-size: 14px; color: var(--on-felt-soft); }
.hint b { color: var(--on-felt); }
.opt-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 6px 14px; border-radius: 12px; cursor: pointer;
  border: 0; background: var(--on-felt); color: #1c1c1a; font-weight: 600; font-size: 14px;
}
.opt-btn:hover, .opt-btn:focus-visible { background: #fff; }
.opt-btn .mini { --mini-w: 28px; }
/* scorciatoie per la presa: una riga sola che scorre di lato, mai tagliata sotto */
.opt-row { flex: 0 1 auto; min-width: 0; display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 3px 2px; scrollbar-width: none; }
.opt-row::-webkit-scrollbar { display: none; }
.opt-row .opt-btn { flex: none; padding: 4px 8px; gap: 3px; }
.opt-row .opt-btn .mini { --mini-w: 19px; }


/* Tressette: presa in corso a croce */
.trick { display: grid; grid-template-columns: repeat(3, var(--table-card-w)); gap: 6px 14px; align-items: center; justify-items: center; }
.trick-2 { grid-template-columns: var(--table-card-w); }
/* in due le carte si sovrappongono un po', sfalsate: metà dell'altezza di due carte in colonna */
.trick-2 { grid-template-rows: calc(var(--table-card-w) * 559 / 300 * .48) auto; row-gap: 0; }
.trick-2 .slot { align-self: start; }
.trick-2 .slot-top { grid-row: 1; transform: translateX(-14%); }
.trick-2 .slot-bottom { grid-row: 2; transform: translateX(14%); }
/* tallone a sinistra e presa sempre al centro del tavolo (la terza colonna bilancia la prima) */
.trick-table { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: clamp(16px, 4vw, 44px); }
.trick-table > .deck { grid-area: 1 / 1; justify-self: end; flex-direction: column; gap: 6px; text-align: center; --deck-w: var(--table-card-w); }
.trick-table > .trick { grid-area: 1 / 2; }
.trick-table .deck .stack { width: var(--deck-w); }
.trick-table .deck .stack .card { --card-w: var(--deck-w); width: var(--deck-w); }
/* la briscola sta di traverso sotto il mazzo, a filo del suo lato sinistro, e ne sporge per metà a destra */
.trick-table .deck .stack.with-trump { margin-right: calc(var(--deck-w) * .9); }
.trick-table .deck .stack .card.trump { left: 50%; top: 50%; transform: translate(-50%, -50%) translateX(calc(var(--deck-w) * .43)) rotate(90deg); }
.slot { width: var(--table-card-w); aspect-ratio: var(--card-ratio); border-radius: calc(var(--table-card-w) * .1); }
.trick-4 { grid-template-rows: repeat(3, calc(var(--table-card-w) * .95)); margin: calc(var(--table-card-w) * .46) 0; }
.trick-4 .slot-top { grid-area: 1 / 2; } .trick-4 .slot-left { grid-area: 2 / 1; }
.trick-4 .slot-right { grid-area: 2 / 3; } .trick-4 .slot-bottom { grid-area: 3 / 2; }

/* Dubito */
.claim { text-align: center; min-width: 180px; }
.claim-label { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--on-felt-soft); }
.claim-rank { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.claim-sub { font-size: 13px; color: var(--on-felt-soft); margin-top: 6px; }
.claim-sub b { color: var(--on-felt); }
.pile-stack .card { --card-w: 72px; }
/* Dubito: il valore da dichiarare, su una riga sola (sul telefono le figure con l'iniziale) */
.rank-pick { display: flex; gap: 4px; justify-content: center; }
.rank-pick .pick-btn { flex: 0 1 auto; }
.mp-below:has(.rank-pick) { height: auto; }   /* qui la riga dei valori si aggiunge alle indicazioni */
.rk-short { display: none; }
/* Bisca: chiamata e valore dell'Asso nella riga dei pulsanti */
.mp-buttons:has(.pick-btn) { align-items: center; }
.bid-pick { display: flex; gap: 6px; }
.pick-btn {
  min-width: 34px; height: 34px; padding: 0 9px; border-radius: 10px; cursor: pointer; flex: none;
  border: 1.5px solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .22); color: var(--on-felt);
  font: inherit; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: transform .12s, background .12s, box-shadow .12s;
}
.pick-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.pick-btn:active:not(:disabled) { transform: scale(.94); }
.pick-btn[aria-pressed=true] { background: var(--gold); border-color: var(--gold); color: #2a1f05; transform: translateY(-2px); box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .5); }
.pick-btn:disabled { opacity: .3; cursor: not-allowed; background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(0, 0, 0, .25) 5px 7px); }
.pick-btn.ace-pick { font-size: 14px; }
.pick-btn i { font-style: normal; font-size: 11px; }

/* Bisca */
.bisca-trick { display: flex; flex-wrap: wrap; gap: 14px 10px; padding-top: 6px; justify-content: center; min-height: calc(var(--table-card-w) * 559 / 300 + 24px); align-items: flex-start; }
.played { position: relative; }
/* di chi è la carta: nome corto in una linguetta del colore del posto, a cavallo del bordo alto */
.owner {
  position: absolute; left: 50%; top: -8px; transform: translateX(-50%); z-index: 2; max-width: calc(100% + 6px); pointer-events: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 999px; color: #16231d; background: var(--seat-c); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .55);
}
.played .card { --card-w: var(--table-card-w); }
.opp-cards .card.forehead { --card-w: var(--table-card-w); margin: 0; box-shadow: 0 0 0 2px var(--on-felt), 0 6px 14px -4px rgba(0, 0, 0, .5); }
.card.mine-blind { position: relative; }
.card.mine-blind::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--card-w) * .45); font-weight: 700; color: var(--on-felt); text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.nameplate .tag.lives { background: rgba(181, 67, 47, .85); color: #fff; }
.tag.away { background: #6b7280; color: #fff; }   /* scollegato: gioca la CPU */
.score-table tr.out td { color: var(--muted); }

/* Cactus: carte coperte in fila, numerate; le avversarie si toccano per 7 e Fante */
.opp-cards:has(.cx-slot) { flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 240px; }
.felt .opp-cards .card.cx-slot { margin: 0; }   /* mai sovrapposte: si devono poter toccare */
.cx-mine { display: flex; gap: 10px; justify-content: center; flex-wrap: nowrap; max-width: 100%; min-width: 0; }
.cx-slot { position: relative; }
.cx-slot.pick { cursor: pointer; }
.cx-slot.pick:hover, .cx-slot.pick:focus-visible { transform: translateY(-6px); }
.cx-slot.sel { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--gold), 0 10px 22px -6px rgba(0, 0, 0, .5); }
.cx-slot.cx-hl { animation: cxHl 1.6s ease-out 2; }
.cx-slot.cx-seen { box-shadow: 0 0 0 3px var(--on-felt), 0 0 22px 2px rgba(255, 255, 255, .45); }
@keyframes cxHl { 0%, 40% { box-shadow: 0 0 0 3px var(--gold), 0 0 22px 2px rgba(214, 162, 38, .65); } }
.cx-n { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); font-size: 10px; font-weight: 700; line-height: 1;
  padding: 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: var(--on-felt); pointer-events: none; }
.cx-none { font-size: 12px; color: var(--on-felt-soft); }
.cx-center { display: flex; gap: 22px; align-items: flex-end; justify-content: center; }
.cx-pile .stack .card, .cx-drawn .stack .card { position: relative; }
.cx-pile .stack:has(.card) { cursor: default; }
.my-turn #cx-deck .stack, .my-turn #cx-discard .stack { cursor: pointer; }
.cx-drawn .stack { width: calc(72px * 1.25); }
.cx-drawn .stack .empty { width: 100%; }
.cx-drawn .stack .card { --card-w: calc(72px * 1.25); box-shadow: 0 0 0 3px var(--gold), 0 10px 24px -8px rgba(0, 0, 0, .55); }
.cx-drawn span { color: var(--on-felt); font-weight: 600; }
/* etichette su una riga e di altezza fissa: mazzo, scarti e carta pescata non si muovono */
.cx-center .deck > span { white-space: nowrap; height: 1.4em; line-height: 1.4em; }
.cx-center .deck { width: calc(72px * 1.25); }
.cx-looking { z-index: 3; box-shadow: 0 0 0 3px var(--on-felt), 0 0 26px 4px rgba(255, 255, 255, .55); }
.fly.cx-jack { box-shadow: 0 0 0 3px var(--gold), 0 0 20px 3px rgba(214, 162, 38, .6); }
.cx-banner.fly { position: absolute; inset: 0; transform: none; width: auto; display: grid; place-content: center; text-align: center; gap: 4px;
  z-index: 40; border-radius: inherit; background: rgba(0, 0, 0, .28); animation: cxBanner 1.5s ease-out both; }
.cx-banner b { font-size: clamp(44px, 10vw, 96px); letter-spacing: .04em; color: var(--gold); text-shadow: 0 6px 24px rgba(0, 0, 0, .6); }
.cx-banner span { font-size: 18px; font-weight: 600; color: var(--on-felt); }
@keyframes cxBanner { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cxPop { from { transform: scale(.4) rotate(-6deg); } }
.cx-banner b { animation: cxPop .45s cubic-bezier(.2, 1.4, .4, 1) both; display: block; }
.cx-final { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.cx-score { font-size: 20px; font-variant-numeric: tabular-nums; }


/* ---------- zoom al passaggio del mouse (solo con mouse) ---------- */
@media (hover: hover) and (pointer: fine) {
  .table-cards .card, .slot .card, .played .card, .opp-cards .card.forehead, .pile .card {
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .table-cards .card:hover, .slot .card:hover, .played .card:hover, .opp-cards .card.forehead:hover, .pile .card:hover {
    transform: scale(1.7); z-index: 20; position: relative;
    box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .65);
  }
  .hand.active .card:hover:not(.dim) { transform: translateY(-14px) scale(1.25); z-index: 5; }
  .hand:not(.active) .card:hover { transform: scale(1.25); z-index: 5; position: relative; }
}

/* ---------- di chi è il turno ---------- */
.felt.my-turn .me-area { background: radial-gradient(55% 75% at 50% 65%, rgba(214, 162, 38, .14), transparent 70%); border-radius: 22px; }
.your-turn {
  position: absolute; top: -12px; z-index: 3; pointer-events: none;   /* non ruba spazio al tavolo */
  padding: 4px 13px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #2a1f05; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .65);
  animation: popIn .3s cubic-bezier(.3, 1.5, .5, 1);
}

/* Asso di Denari: etichetta a cavallo del bordo basso della carta */
.ace-tag {
  position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); z-index: 1; pointer-events: none;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden;
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1;
  padding: 4px 9px 4px 7px; border-radius: 999px;
  color: #2a1f05; background: linear-gradient(180deg, #f6d77a, var(--gold) 55%, #b5841a);
  box-shadow: 0 0 0 1.5px rgba(255, 248, 220, .85), 0 4px 10px -2px rgba(0, 0, 0, .55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.ace-tag i { font-style: normal; font-size: 9px; }
.ace-tag.low { color: #f1f5ff; background: linear-gradient(180deg, #7d9be0, #3f5fae 55%, #2b437f); text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  box-shadow: 0 0 0 1.5px rgba(220, 230, 255, .8), 0 4px 10px -2px rgba(0, 0, 0, .55); }
.ace-tag.pending { color: var(--on-felt); background: rgba(0, 0, 0, .6); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); animation: acePending 1.2s ease-in-out infinite; }
@keyframes acePending { 50% { box-shadow: 0 0 0 1.5px var(--gold), 0 0 12px rgba(214, 162, 38, .7); } }
/* comparsa: sale da sotto la carta con un rimbalzo, poi un riflesso la attraversa */
.ace-tag.fresh { animation: aceIn .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.ace-tag.pending.fresh { animation: aceIn .5s cubic-bezier(.3, 1.6, .5, 1) both, acePending 1.2s ease-in-out .5s infinite; }
.ace-tag.fresh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%);
  transform: translateX(-120%); animation: aceShine .7s ease-out .35s forwards; }
@keyframes aceIn { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.4); } }
@keyframes aceShine { to { transform: translateX(120%); } }
.card.ace-glow { animation: aceGlow 1s ease-out; }
@keyframes aceGlow { 0% { box-shadow: 0 0 0 0 rgba(246, 215, 122, .9); } 30% { box-shadow: 0 0 0 4px rgba(246, 215, 122, .9), 0 0 30px 6px rgba(214, 162, 38, .7); } }

/* ---------- sala d'attesa e ingresso ---------- */
.settings-line { justify-content: space-between; }
.settings-edit { margin-top: 14px; padding: 16px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 14px; }
.settings-edit .field { margin: 0; }
.stepper { display: inline-flex; align-items: center; border-radius: 10px; background: var(--surface-2); padding: 3px; gap: 2px; }
.stepper button { width: 38px; height: 34px; border: 0; border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 18px; cursor: pointer; box-shadow: var(--shadow-sm); }
.stepper output { min-width: 44px; text-align: center; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.settings-edit .stepper { background: var(--surface); }
.settings-edit .stepper button { background: var(--surface-2); }
.settings-edit .seg { background: var(--surface); }
.settings-edit .seg button[aria-pressed=true] { background: var(--accent-soft); color: var(--accent); }
.settings-edit .error:empty { display: none; }
.join-quick { max-width: 480px; }

/* ---------- modali ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(8, 10, 9, .55); animation: fade .2s ease-out; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--surface); color: var(--ink); border-radius: 20px; width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 28px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.modal h2 { font-size: 24px; }
.tabs { margin-bottom: 18px; }
.score-table { width: 100%; border-collapse: collapse; margin: 14px 0 22px; font-size: 14px; }
.score-table th, .score-table td { padding: 11px 8px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.score-table th:first-child, .score-table td:first-child { text-align: left; }
.score-table thead th { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.score-table thead th .team-dot { margin-right: 4px; }
.score-table thead th .you { text-transform: none; letter-spacing: 0; font-weight: 500; }
.score-table tfoot td { font-weight: 650; font-size: 16px; border-bottom: 0; }
.pt { display: inline-block; min-width: 26px; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.pt.on { background: var(--accent); color: var(--accent-ink); }
.pt.bad { background: var(--danger); color: #fff; }
.detail { font-size: 12px; color: var(--muted); display: block; font-weight: 400; }
.pile-head { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 8px 0 12px; }
.pile { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; background: var(--felt); border-radius: 14px; min-height: 96px; }
.pile .card { --card-w: 50px; }
.pile .empty { color: var(--on-felt-soft); font-size: 14px; }
.note { background: var(--accent-soft); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 8px 0; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; align-items: center; margin-top: 22px; }
/* pulsanti dei riepiloghi: un piede fisso in fondo al foglio, sempre in vista anche scorrendo */
.modal:has(.modal-foot) { padding-bottom: 0; }
.modal-foot { position: sticky; bottom: 0; z-index: 2; margin: 18px -28px 0; padding: 0 28px 20px; background: var(--surface);
  box-shadow: 0 -1px 0 var(--line), 0 -14px 18px -14px rgba(0, 0, 0, .18); }
.modal-foot .modal-actions { margin-top: 0; padding-top: 14px; justify-content: space-between; }
.modal-foot .modal-actions > .muted { flex: 1 1 160px; }
/* riepilogo di fine mano: barra del tempo che resta prima che la mano riparta da sola */
.recap-bar { height: 3px; margin: 0 -28px; background: var(--surface-2); overflow: hidden; }
.recap-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; animation: recapBar linear both; }
@keyframes recapBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.btn .count { min-width: 1.6em; padding: 1px 6px; border-radius: 99px; background: rgba(0, 0, 0, .16); font-variant-numeric: tabular-nums; font-size: .86em; }
.winner { text-align: center; padding: 6px 0 14px; }
.winner .crown { font-size: 40px; }
.winner h2 { font-size: 30px; margin: 6px 0 4px; }
.winner p { margin: 0; }
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 12px 0 20px; }
.side-score { text-align: center; padding: 18px; border-radius: 14px; background: var(--surface-2); }
.side-score.win { background: var(--accent); color: var(--accent-ink); }
.side-score.win .muted { color: inherit; opacity: .8; }
.side-score .big { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.vs { color: var(--muted); font-size: 13px; }
.breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.breakdown h4 { color: var(--ink); }
.breakdown ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.breakdown li { display: flex; justify-content: space-between; padding: 9px 12px; background: var(--surface-2); border-radius: 10px; font-size: 14px; }
details.more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
details.more summary { cursor: pointer; font-weight: 600; }
.ranking { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ranking li { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); }
.ranking li.mine { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ranking .pos { font-weight: 700; width: 20px; color: var(--muted); }
.ranking .nm { flex: 1; font-weight: 600; }

/* ---------- avvisi ---------- */
#toast-root { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 16px); transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow); font-weight: 500; font-size: 14px; animation: fade .2s; }
.toast.err { background: var(--danger); color: #fff; }
.conn { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); background: var(--danger); color: #fff; padding: 8px 14px; border-radius: 10px; z-index: 70; font-size: 14px; }

/* ---------- animazioni di gioco ---------- */
.felt.animating { pointer-events: none; }
.felt.animating .game-menu, .felt.animating .emote-picker { pointer-events: auto; }   /* menu ed emote sempre usabili */
.felt.animating .card { pointer-events: auto; }   /* zoom sempre possibile: i clic li blocca app.js */
.fly { position: fixed; z-index: 45; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.card.taken { box-shadow: 0 0 0 3px var(--gold), 0 0 22px 2px rgba(214, 162, 38, .65); }
.card.bad { box-shadow: 0 0 0 3px var(--danger), 0 0 22px 2px rgba(181, 67, 47, .7); }
.card.faded { filter: brightness(.6) saturate(.5); }   /* scurite, mai trasparenti: sotto non deve vedersi il tavolo */
.fly.drawn { box-shadow: 0 0 0 3px var(--on-felt), 0 18px 36px -10px rgba(0, 0, 0, .6); }
.fly-label { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap;
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--on-felt); color: #1c1c1a; }
.table-cards.scopa-flash .card.taken { box-shadow: 0 0 0 3px var(--danger), 0 0 28px 4px rgba(181, 67, 47, .7); }
.table-cards .card.taken { transform: translateY(-12px) scale(1.04); z-index: 2; }
.card.deal-in { animation: dealIn .5s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes dealIn { from { transform: translateY(-80px) scale(.6) rotate(-8deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .card.deal-in, .table-cards .card.new { animation-duration: .01s; }
}

/* ---------- responsive ---------- */
@media (min-width: 761px) and (max-height: 820px) {
  /* portatili: schermo basso, tavolo più compatto */
  body.in-game main { padding: 10px 14px; }
  .felt { padding: 8px 18px; gap: 6px; --rail-w: 12px; }
  .trick { gap: 2px 14px; }
  .opp { gap: 4px; padding: 3px 6px; }
  .opp-cards .card { --card-w: 36px; margin-left: -24px; }
  .trick-4 { margin: calc(var(--table-card-w) * .3) 0; grid-template-rows: repeat(3, calc(var(--table-card-w) * .88)); }
  .center { gap: 6px; }
}
@media (max-width: 1000px) {
  .games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --mini-w: 30px; }
  html { font-size: 16px; }
  main { padding: 18px 14px 28px; }
  .forms, .teams, .breakdown { grid-template-columns: minmax(0, 1fr); }
  .hero { margin-bottom: 14px; gap: 6px; }
  .logo { font-size: 40px; }
  .lead { font-size: 14.5px; }
  .stats { margin: 0 0 14px; border-radius: 12px; }
  .stat { padding: 8px 10px; }
  .stat b { font-size: 17px; }
  .stat span { font-size: 10.5px; white-space: normal; line-height: 1.2; }
  .games { gap: 8px; margin-bottom: 14px; }
  .game-tile { padding: 6px 6px 8px; gap: 6px; border-radius: 14px; }
  .tile-fan { height: 62px; border-radius: 10px; }
  .tile-fan .card { --card-w: 34px; top: 9px; transform: translateX(calc(-50% + (var(--i) - 1) * 19px)) rotate(calc((var(--i) - 1) * 12deg)); }
  .game-tile:hover .tile-fan .card { transform: translateX(calc(-50% + (var(--i) - 1) * 19px)) rotate(calc((var(--i) - 1) * 12deg)); }
  .game-tile h3 { font-size: 14.5px; }
  .tile-meta { font-size: 11px; }
  .tile-meta .long { display: none; }
  .tile-meta .short { display: inline; }
  .panel { padding: 18px 16px; border-radius: 16px; }
  .forms .btn[type=submit] { width: 100%; }
  .info ul { grid-template-columns: 1fr; gap: 10px; }
  .lobby h2 { font-size: 26px; }
  .code-box { padding: 14px; }
  .code { font-size: 26px; }
  .code-box .btn { width: 100%; }
  .seat { padding: 8px 10px; gap: 10px; }
  .seat .av { --av: 34px; }
  .lobby .row.spread .btn:last-child { flex: 1; }
  .side-score .big { font-size: 34px; }
  /* riepiloghi: un foglio che sale dal basso */
  .modal-backdrop { place-items: end stretch; padding: 0; }
  .modal { width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; border-bottom: 0; padding: 20px 16px calc(18px + env(safe-area-inset-bottom));
    animation: sheetUp .32s cubic-bezier(.2, .8, .2, 1); }
  .modal-actions .btn { flex: 1; }
  .modal-foot { margin-inline: -16px; padding: 0 16px calc(14px + env(safe-area-inset-bottom)); }
  .recap-bar { margin-inline: -16px; }
  .score-table th, .score-table td { padding: 9px 5px; }
}
@keyframes sheetUp { from { transform: translateY(40%); opacity: 0; } }

/* telefono (in verticale o in orizzontale): il tavolo è tutto lo schermo, senza bordo in legno, e la pagina non scorre */
@media (max-width: 760px), (max-height: 520px) and (orientation: landscape) {
  body.in-game { height: 100dvh; overflow: hidden; padding: 0; background: var(--felt-3); }
  body.in-game main { padding: 0; min-height: 0; max-width: none; }
  .felt { border: 0; border-radius: 0; box-shadow: none; overflow: auto; min-height: 0; overscroll-behavior: contain;
    padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }   /* ai lati un po' di più: bordi curvi */
  .felt-bg { border-radius: 0; }
  .felt-bg::after { box-shadow: inset 0 0 0 2px rgba(243, 210, 122, .8), inset 0 0 44px rgba(214, 162, 38, .3); }
  .score-pill { top: calc(8px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); }
}

@media (max-width: 760px) {
  .felt {
    gap: 8px;
    --card-w: min(clamp(52px, 10vh, 80px), 16.5vw); --table-card-w: clamp(52px, 9.5vh, 84px);
    grid-template-areas: "top top top" "left center right" "me me me";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
  }
  .felt-mark { inset: 17% 5% 27%; }
  /* in due le colonne laterali sono vuote: il centro prende tutta la larghezza */
  .felt:not(.many) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "center" "me"; }
  .felt:not(.many) .seats-left, .felt:not(.many) .seats-right { display: none; }
  .seats-top { padding: 0 46px; }
  .opp { max-width: 104px; }
  .felt .seats-top .opp:only-child { max-width: 220px; }
  .seats-top { gap: 10px; }
  .opp-cards .card { --card-w: 34px; margin-left: -24px; }
  .seats-left .opp-cards .card, .seats-right .opp-cards .card { margin-left: -29px; }
  .seats-left .opp-cards .card:first-child, .seats-right .opp-cards .card:first-child { margin-left: 0; }
  .trick { gap: 6px 8px; }
  .nameplate { font-size: 12.5px; padding: 3px 10px 3px 3px; }
  .seats-left .nameplate, .seats-right .nameplate { white-space: normal; text-align: center; flex-wrap: wrap; justify-content: center; border-radius: 12px; padding: 4px 8px; }
  .center { padding: 2px; gap: 8px; }
  .center-main { flex-direction: column-reverse; gap: 12px; }
  .ticker { font-size: 12.5px; }
  .deck { flex-direction: row; gap: 10px; }
  .deck .stack, .deck .empty, .deck .stack .card, .pile-stack .card { width: 46px; --card-w: 46px; }
  .deck .stack.with-trump { margin-right: 30px; }
  .cx-center { gap: 16px; }
  .cx-center .deck { flex-direction: column; gap: 6px; }
  .cx-drawn .stack { width: 60px; }
  .cx-center .deck { width: 66px; }
  .cx-center .deck > span { font-size: 11px; overflow: visible; }
  .mp-buttons { gap: 6px; flex-wrap: nowrap; min-height: 44px; }
  .mp-buttons .btn { min-width: 0; padding: 11px 16px; font-size: 15px; }
  .mp-buttons:has(.btn ~ .btn ~ .btn) .btn { padding-inline: 11px; font-size: 14px; }   /* tre pulsanti (Cactus): più stretti */
  .mp-below { height: 4.4em; }
  .mp-below .hint { font-size: 14px; line-height: 1.35; }
  .cx-drawn .stack .card { --card-w: 60px; width: 60px; }   /* la regola .deck .stack .card la stringerebbe, storta nel suo posto */
  .opp-cards .cx-slot { --card-w: 30px; }
  .cx-mine { gap: 8px; }
  .cx-n { font-size: 9px; padding: 1px 5px; bottom: -6px; }
  .hand { gap: 8px; padding-top: 12px; }
  .hand:not(.fan) { flex-wrap: nowrap; max-width: 100%; }
  .hint { font-size: 15px; text-align: center; }
  .opt-btn { font-size: 15px; padding: 8px 12px 8px 14px; }
  .rank-pick .pick-btn { flex: 1 1 0; min-width: 0; max-width: 46px; padding: 0; }
  .mp-below:has(.rank-pick) { height: 4.4em; }
  .rk-short { display: inline; }
  .rk-long { display: none; }
  .bid-pick { gap: 4px; }
  .pick-btn { min-width: 34px; height: 40px; padding: 0 8px; font-size: 16px; }
  .pick-btn.ace-pick { font-size: 13px; }
  .claim-rank { font-size: 32px; }
}

/* telefono in verticale: carte della mano grandi quanto ci stanno su una riga (--n carte, impostato da app.js) */
@media (max-width: 760px) and (orientation: portrait) {
  .hand { --card-w: min(clamp(56px, 11vh, 98px), max(16.5vw, calc((100vw - 40px - (var(--n, 3) - 1) * 8px) / var(--n, 3)))); }
  .hand .cx-mine { --card-w: min(clamp(56px, 11vh, 98px), calc((100vw - 40px - (var(--n, 4) - 1) * 8px) / var(--n, 4))); }
}

/* telefono in verticale: avversari su un arco in alto, uno per colonna, con avatar grande; niente dorsi
   (dove il numero di carte conta lo dice un'etichetta). Uguale in tutti i giochi, anche in due.
   In orizzontale restano ai lati. */
@media (max-width: 760px) and (orientation: portrait) {
  .felt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "center" "me"; }
  /* arco al centro del tavolo, un po' lontano dai bordi (sui telefoni con lo schermo curvo piegano l'immagine) */
  .felt .opps { grid-area: top; display: flex; justify-content: space-around; align-items: flex-start; gap: 2px; padding: 0 12px; }
  .felt:not(.many) .opps { padding: 0 48px; }   /* un solo avversario: al centro, lontano dal punteggio */
  .felt.many.has-score { padding-top: calc(54px + env(safe-area-inset-top)); }   /* in 4 a squadre: il punteggio in una fascia sopra gli avversari */
  .felt.many.has-score .opps { padding-inline: 0; }
  .felt .seats-top, .felt .seats-left, .felt .seats-right { display: contents; }
  .felt .opp { flex: 1 1 0; max-width: 92px; min-width: 0; gap: 4px; padding: 4px 1px 5px; margin-top: calc(var(--arc) * 22px); border-radius: 16px; }
  .felt:not(.many) .opp { max-width: 160px; }
  .felt.many .seats-top .opp:only-child { max-width: 92px; }
  .felt .opp .nameplate { --avc: clamp(36px, 11vw, 46px); position: relative; flex-direction: column; gap: 3px; padding: 0; background: none; box-shadow: none; animation: none; border-radius: 0; max-width: 100%; white-space: normal; text-align: center; font-size: 11.5px; line-height: 1.15; }
  .felt .opp .np-name { max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; hyphens: auto; color: var(--on-felt-soft); }
  .felt.many .opp .np-pre { display: none; }
  .felt .opp .np-tags { flex-wrap: wrap; justify-content: center; gap: 2px; }
  .felt .opp .tag { font-size: 10px; padding: 1px 5px; }
  .felt .opp .tag.cards { display: inline-block; }
  .felt .opp .team-dot { position: absolute; left: calc(50% - var(--avc) / 2 - 4px); top: 0; width: 10px; height: 10px; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }   /* squadra: pallino sull'avatar */
  .felt .opp .av { --av: var(--avc); margin: 0; }
  /* di turno: anello d'oro che gira attorno all'avatar e nome acceso */
  .felt .opp .nameplate.turn .np-name { color: var(--on-felt); font-weight: 700; }
  .felt .opp .nameplate.turn .av { box-shadow: 0 0 0 2.5px var(--gold), 0 0 18px 2px rgba(214, 162, 38, .55); }
  .felt .opp .nameplate.turn .av::before {
    content: ""; position: absolute; inset: -6px; border-radius: 50%; z-index: -1;
    background: conic-gradient(from 0deg, transparent 0 55%, rgba(246, 215, 122, .95) 85%, transparent 100%);
    -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%); mask: radial-gradient(circle, transparent 62%, #000 64%);
    animation: avSpin 1.4s linear infinite; will-change: transform;
  }
  .felt .opp .nameplate.acting .av { box-shadow: 0 0 0 2.5px var(--gold), 0 0 22px 4px rgba(214, 162, 38, .7); }
  .felt .opp .nameplate.accused .av { box-shadow: 0 0 0 3px var(--danger); }
  .felt .opp-cards { min-height: 0; }
  .felt .opp-cards > .card:not(.cx-slot):not(.forehead) { display: none; }
  /* Cactus: le 4 carte avversarie in fila se l'avversario è uno solo, in tanti in un quadrato 2×2 */
  .felt .opp-cards:has(.cx-slot) { gap: 3px; max-width: none; flex-wrap: nowrap; }
  .felt .opp-cards .card.cx-slot { --card-w: 30px; margin: 0; }
  .felt.many .opp-cards:has(.cx-slot) { display: grid; grid-template-columns: repeat(2, auto); }
  .felt.many .opp-cards .card.cx-slot { --card-w: clamp(20px, 6.4vw, 27px); }
  .felt.many .opp-cards .cx-slot .cx-n { display: none; }
  .felt .opp-cards .card.forehead { --card-w: clamp(38px, 11vw, 52px); margin: 0; }
  /* presa a croce più fitta e tallone piccolo a lato: tutto sta tra avversari e mano */
  .felt.many { --table-card-w: clamp(40px, 8vh, 72px); }
  .felt.many .trick-4 { grid-template-rows: repeat(3, calc(var(--table-card-w) * .8)); margin: calc(var(--table-card-w) * .53) 0; }
  .felt .trick-table { column-gap: 10px; }
  .felt .trick-table > .deck { --deck-w: 40px; font-size: 10.5px; gap: 3px; }
  .felt.many .trick-table > .deck { --deck-w: 34px; }
}
@keyframes avSpin { to { transform: rotate(1turn); } }

@media (max-height: 700px), (max-width: 760px) {
  .your-turn { display: none; }   /* schermi bassi: bastano il filo d'oro, il nome acceso e la vibrazione */
}
@media (max-width: 760px) and (max-height: 700px) and (orientation: portrait) {
  .felt[data-game="scopa"] .table-info { display: none; }   /* telefoni piccoli: lo spazio va alle carte in tavola */
  .table-cards { gap: 6px; }
}

/* telefono in orizzontale: carte in proporzione all'altezza, la mia mano accanto a nome e pulsanti */
@media (max-height: 520px) and (orientation: landscape) {
  .felt { padding: calc(6px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
    gap: 4px; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
    --card-w: clamp(44px, 14vh, 70px); --table-card-w: clamp(36px, 10.5vh, 60px); }
  .felt-mark { inset: 12% 14% 14%; }
  .trick-table > .deck { font-size: 11px; gap: 2px; white-space: nowrap; }
  .opp { gap: 3px; padding: 2px; }
  .opp-cards .card { --card-w: 26px; margin-left: -18px; }
  .nameplate { padding: 3px 9px 3px 3px; font-size: 12px; }
  .av { --av: 22px; }
  .game-menu summary, .score-pill { height: 34px; }
  .game-menu summary { width: 34px; }
  .center { gap: 3px; padding: 0; }
  .ticker { font-size: 12px; min-height: 1.4em; padding: 1px 10px; }
  .trick-4 { grid-template-rows: repeat(3, calc(var(--table-card-w) * .8)); margin: calc(var(--table-card-w) * .53) 0; }
  .me-area { display: grid; grid-template-columns: auto auto; grid-template-rows: auto 1fr; column-gap: 22px; row-gap: 4px; justify-content: center; align-items: start; }
  .me-area .hand { grid-row: 1 / 3; padding-top: 8px; min-height: 0; }
  .me-row { grid-column: 2; align-self: end; justify-self: center; }
  .move-panel { grid-column: 2; }
  .mp-buttons { min-height: 40px; }
  .mp-buttons .btn { padding: 9px 16px; }
  .mp-below { height: 2.9em; max-width: 300px; }
  .rank-pick .pick-btn { flex: 1 1 0; min-width: 0; height: 32px; padding: 0; font-size: 14px; }
  .rk-short { display: inline; }
  .rk-long { display: none; }
  .hint { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .felt-light { transition: none; }
  .felt.my-turn .felt-bg::after, .your-turn, .nameplate.acting { animation: none; }
  .felt.many .opp .nameplate.turn .av::before { animation: none; }
  .modal { animation: none; }
}