/* Font dei titoli: FFF (Andrea Gaspari), in static/fonts/fff. È la versione TRIAL: cifre, ? e @ sono
   segnaposto "FFF", quindi unicode-range li esclude e quei caratteri usano il font di sistema. */
@font-face { font-family: 'FFF'; src: url('/static/fonts/fff/FFF_Light_TRIAL.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0020-002F, U+003A-003E, U+0041-10FFFF; }
@font-face { font-family: 'FFF'; src: url('/static/fonts/fff/FFF_Regular_TRIAL.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0020-002F, U+003A-003E, U+0041-10FFFF; }
@font-face { font-family: 'FFF'; src: url('/static/fonts/fff/FFF_Medium_TRIAL.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0020-002F, U+003A-003E, U+0041-10FFFF; }
@font-face { font-family: 'FFF'; src: url('/static/fonts/fff/FFF_Bold_TRIAL.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0020-002F, U+003A-003E, U+0041-10FFFF; }
@font-face { font-family: 'FFF'; src: url('/static/fonts/fff/FFF_Ultra_TRIAL.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0020-002F, U+003A-003E, U+0041-10FFFF; }
/* Font degli h2: Enchanted Land (Sharkshock), in static/fonts/enchanted_land */
@font-face { font-family: 'Enchanted Land'; src: url('/static/fonts/enchanted_land/enchanted-land.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --felt: #050505;
  --felt-2: #141414;
  --felt-line: #343434;
  --ink: #f3efe4;
  --muted: #a6a6a6;
  --card: #f7f1e1;
  --card-ink: #2b2418;
  --gold: #d9a520;
  --gold-deep: #8a6410;
  --stick: #b4532a;
  --stick-deep: #6e2d14;
  --danger: #e26d5a;
  --ok: #7fcf9a;
  --radius: 12px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--felt);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: radial-gradient(ellipse at 50% 40%, var(--felt-2), var(--felt) 70%); min-height: 100dvh; }
[hidden] { display: none !important; }
h1, h2 { margin: 0 0 .5rem; line-height: 1.15; }

/* Titoli della UI: FFF per h1, h3 e titoletti; Enchanted Land per h2 */
h1, h3, .brand, .turn-label, .action-alert__title {
  font-family: 'FFF', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400; /* FFF Regular: la versione snella (non la Bold) */
}
h2 {
  font-family: 'Enchanted Land', Georgia, serif;
  font-weight: 400; font-size: 2.1em; letter-spacing: .01em; line-height: 1.05;
}
/* Titoli principali (non le carte): sfumatura dorata */
h1, h2, .brand, .turn-label {
  background: linear-gradient(180deg, #f8da62 0%, #785f0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.muted { color: var(--muted); }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--gold); margin: 0 0 .4rem; }
.error { color: var(--danger); min-height: 1.2em; margin: .5rem 0 0; }

.screen { min-height: 100dvh; }
.screen--center { display: grid; place-items: center; padding: 16px; }
.panel { background: #101010; border: 1px solid var(--felt-line); border-radius: 16px; padding: 24px; width: min(420px, 100%); display: grid; gap: .6rem; }
label { font-size: .85rem; color: var(--muted); }
input { font: inherit; padding: .7rem .8rem; border-radius: 10px; border: 1px solid var(--felt-line); background: rgba(0,0,0,.25); color: var(--ink); }
input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

.btn { font: inherit; font-weight: 600; border-radius: 10px; padding: .75rem 1.1rem; border: 1px solid transparent; cursor: pointer; min-height: 44px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--gold); color: #24190a; }
.btn--primary:not(:disabled):hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--felt-line); }
.link { background: none; border: 0; color: var(--gold); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--felt-line); flex-wrap: wrap; }
.brand { font-weight: 800; letter-spacing: .04em; }
.lobby { padding: 20px 16px 32px; max-width: 900px; margin: 0 auto; }
.characters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 190px), 1fr)); gap: clamp(10px, 3vw, 18px); margin: 18px 0 28px; }
/* Scheda personaggio: immagine di sfondo a tutta scheda, sopra solo il nome */
.character {
  --portrait: none; --tint: #3a2a10;
  position: relative; overflow: hidden; aspect-ratio: 7 / 10; /* ritratti 1400 × 2000 */ container-type: inline-size; cursor: pointer; font: inherit; color: var(--ink);
  border: 2px solid #2a2a2a; border-radius: 16px; padding: 0 12px 18px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; text-align: center;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.78) 100%),
    var(--portrait) center / cover no-repeat,
    radial-gradient(120% 90% at 50% 25%, color-mix(in srgb, var(--tint) 80%, #fff 6%) 0%, color-mix(in srgb, var(--tint) 45%, #000) 55%, #050505 100%);
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.character:hover, .character:focus-visible { transform: translateY(-3px); border-color: #785f0b; box-shadow: 0 16px 36px rgba(0,0,0,.7), 0 0 0 1px rgba(248,218,98,.25); outline: none; }
.character[aria-checked="true"] { border-color: var(--gold); }
.character--slayer { --tint: #5a1a14; }
.character--warrior { --tint: #3d3a36; }
.character--elf { --tint: #1f4a2a; }
.character--barbarian { --tint: #5a3216; }
.character--dwarf { --tint: #4a3a14; }
.character--paladin { --tint: #3a4a6a; }
.character--thief { --tint: #2a2440; }
.character--mage { --tint: #2a1f5a; }
/* Nome: Enchanted Land dorato, bordino esterno nero e ombra nera (il bordo sta in un livello sotto) */
.character__name { position: relative; isolation: isolate; display: inline-block; font-family: 'Enchanted Land', Georgia, serif; font-weight: 400; font-size: clamp(1.5rem, 17cqi, 2.7rem); line-height: 1.05; letter-spacing: .01em; }
.character__gold { position: relative; z-index: 1; background: linear-gradient(180deg, #f8da62 0%, #785f0b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.character__name::before { content: attr(data-text); position: absolute; inset: 0; z-index: 0; color: #000; -webkit-text-stroke: 6px #000; text-shadow: 0 5px 12px rgba(0,0,0,.95), 0 2px 3px #000; }
.character__stats { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.gender { display: flex; gap: 6px; margin: 4px 0 8px; }
.portrait { display: inline-grid; place-items: center; border-radius: 10px; overflow: hidden; flex: 0 0 auto; background: rgba(0,0,0,.3); border: 1px solid var(--felt-line); font-weight: 800; color: var(--muted); }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait--seat { width: 30px; height: 30px; font-size: .9rem; margin-right: 6px; vertical-align: middle; border-radius: 50%; }
.portrait--female.portrait--empty { color: #e7a6c4; }
.portrait--male.portrait--empty { color: #9cc4e8; }
.seat__who { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lobby__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }

/* Tavolo */
.table { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; grid-template-columns: minmax(0, 1fr); height: 100dvh; }
.seat { padding: 10px 16px; }
.seat--opp { border-bottom: 1px solid var(--felt-line); background: rgba(255,255,255,.035); }
.seat--me { border-top: 1px solid var(--felt-line); background: rgba(255,255,255,.05); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.seat__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.seat__name { position: relative; isolation: isolate; display: inline-block; font-family: 'Enchanted Land', Georgia, serif; font-weight: 400; font-size: 1.6rem; line-height: 1; letter-spacing: .01em; }
.seat__gold { position: relative; z-index: 1; background: linear-gradient(180deg, #f8da62 0%, #785f0b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.seat__name::before { content: attr(data-text); position: absolute; inset: 0; z-index: 0; color: #000; -webkit-text-stroke: 3px #000; text-shadow: 0 2px 5px rgba(0,0,0,.7); }
.seat__dot { display: none; }
.seat.is-active .seat__dot, .seat__info.is-active .seat__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: 2px; }

.hp { flex: 1 1 140px; min-width: 120px; display: grid; gap: 3px; }
.hp__bar { height: 10px; border-radius: 99px; background: #000; overflow: hidden; }
.hp__fill { height: 100%; background: var(--hp-fill, #35584f); transition: width .35s ease; }
/* fasce di vita (valori predefiniti per tutti i personaggi; ogni personaggio potrà avere i suoi
   ridefinendo le variabili --hp-100 … --hp-0 su .hp--<id>); sfumature da sinistra a destra */
.hp { --hp-100: #da3832; --hp-80: linear-gradient(90deg, #632421, #da3832); --hp-60: linear-gradient(90deg, #753c5a, #632421);
  --hp-40: linear-gradient(90deg, #64427c, #753c5a); --hp-20: linear-gradient(90deg, #4b315c, #64427c); --hp-0: #271630; }
.hp__fill[data-band="100"] { background: var(--hp-100); }
.hp__fill[data-band="80"] { background: var(--hp-80); }
.hp__fill[data-band="60"] { background: var(--hp-60); }
.hp__fill[data-band="40"] { background: var(--hp-40); }
.hp__fill[data-band="20"] { background: var(--hp-20); }
.hp__fill[data-band="0"] { background: var(--hp-0); }
.hp__track { position: relative; }
.hp { padding: 6px 0; cursor: default; }
.hp__text { position: absolute; z-index: 5; left: 50%; top: calc(100% + 6px); transform: translate(-50%, -3px); white-space: nowrap; padding: 2px 10px; border: 1px solid #3a3a3a; border-radius: 99px; background: rgba(8,8,8,.94); font-size: .8rem; color: var(--ink); box-shadow: 0 4px 12px rgba(0,0,0,.7); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.hp:hover .hp__text, .hp:focus-within .hp__text { opacity: 1; transform: translate(-50%, 0); }
/* Carte in mano all'avversario: retri (back.jpg) capovolti, a ventaglio, che escono da sotto la barra */
.seat--opp { position: relative; z-index: 3; }
.seat--opp .hp { position: relative; }
.seat--opp .hp__bar { position: relative; z-index: 2; background: #000; box-shadow: 0 0 0 2px #050505; }
.opp-hand { position: absolute; z-index: 1; left: 50%; top: 2px; transform: translateX(-50%); height: 78px; overflow: hidden;
  display: flex; justify-content: center; pointer-events: none; padding: 0 12px; }
.opp-hand__card { --rot: 180deg; --dy: 0px; flex: 0 0 auto; width: 54px; aspect-ratio: 675 / 944; margin-left: -22px; border-radius: 3px;
  border: 1.5px solid #785f0b; background: #0b1420 url('/static/cards/basegame/back.jpg') center / cover no-repeat;
  box-shadow: 0 2px 6px rgba(0,0,0,.7); transform-origin: 50% 50%; transform: translateY(calc(-6px - var(--dy))) rotate(var(--rot)); }
.opp-hand__card:first-child { margin-left: 0; }
/* telefono: la barra è stretta e accanto ci sono i contatori, quindi le carte spuntano da sotto il
   bordo inferiore della barra dell'avversario, a destra */
@media (max-width: 640px) {
  .seat--opp .hp { position: static; }
  .opp-hand { top: 100%; left: auto; right: 10px; transform: none; height: 38px; padding: 0 6px; }
  .opp-hand__card { width: 36px; margin-left: -15px; transform: translateY(calc(-12px - var(--dy))) rotate(var(--rot)); }
}
.piles { display: flex; gap: 6px; flex-wrap: wrap; }
.pile { font-size: .78rem; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--felt-line); color: var(--muted); white-space: nowrap; }
.pile strong { color: var(--ink); }

.arena__below { display: grid; gap: 8px; min-width: 0; }
.market-area { justify-self: center; }
.arena { overflow: hidden; display: grid; grid-template-rows: auto auto 1fr; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 16px; min-height: 0; }
.arena__status { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.turn-label { font-weight: 700; }
.turn-label.is-mine { filter: brightness(1.15); }
.arena__turn { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.coins { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.in-play { display: flex; flex-wrap: wrap; gap: 8px; min-height: 64px; align-items: center; }
.in-play .card { --w: 58px; }
.arena__hint { margin: 0; font-size: .85rem; }
.auto-end { display: flex; align-items: center; gap: 6px; font-size: .75rem; }
.auto-end input { accent-color: var(--gold); }
.log-panel { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: visible; }
.log-panel .log { min-height: 0; }
.log-head { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 30px; }

.icon-btn { flex: 0 0 auto; margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 99px; border: 1px solid var(--felt-line);
  background: rgba(0,0,0,.3); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s, transform .3s; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { color: var(--gold); border-color: #785f0b; }
.icon-btn[aria-expanded="true"] .icon { transform: scale(1.12); }
.settings-pop { position: fixed; z-index: 60; width: min(320px, calc(100vw - 16px)); padding: 12px; display: grid; gap: 10px;
  background: #0b0b0b; border: 1px solid #785f0b; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.75); }
.settings-pop[hidden] { display: none; }
.settings-pop .auto-end { align-items: flex-start; color: var(--ink); font-size: .8rem; line-height: 1.35; }
.settings-pop .auto-end input { margin-top: 2px; }
/* telefono: sotto il registro c'è poco spazio, quindi le impostazioni si aprono verso l'alto */
.log-filters { position: absolute; z-index: 20; top: 36px; right: 0; width: 240px; max-height: 60vh; overflow-y: auto; padding: 6px; display: grid; gap: 2px; background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.7); }
.log-filters[hidden] { display: none; }
.log-filters__empty { padding: 6px 10px; font-size: .78rem; color: var(--muted); }
.log-filters .log-pill { display: flex; justify-content: flex-start; gap: 4px; align-items: center; width: 100%; text-align: left; border: 0; border-radius: 6px; background: transparent; font-size: .82rem; padding: 7px 10px; color: var(--ink); }
.log-filters .log-pill:hover { background: rgba(248,218,98,.1); }
.log-filters .log-pill.is-on { background: rgba(248,218,98,.18); color: var(--gold); }
.log-filters .log-pill.is-on::before { content: "✓ "; }
.log-filters .log-pill.is-on strong { color: var(--gold); }
#filter-btn { position: relative; }
#filter-btn.is-filtering { color: var(--gold); border-color: #785f0b; }
#filter-btn.is-filtering::after { content: ""; position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.log-pill { flex: 0 0 auto; white-space: nowrap; }
.log-pill { font: inherit; font-size: .72rem; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--felt-line); background: rgba(0,0,0,.2); color: var(--muted); cursor: pointer; }
.log-pill strong { color: var(--ink); margin-left: 4px; }
.log-pill.is-on { background: var(--gold); border-color: var(--gold); color: #24190a; }
.log-pill.is-on strong { color: #24190a; }
.log-empty { color: var(--muted); font-style: italic; }
.log { flex: 1; list-style: none; margin: 0; padding: 8px 10px; overflow-y: auto; min-height: 0; background: #000; border-radius: 10px; font-size: .84rem; display: flex; flex-direction: column; gap: 4px; }
.log li { color: #9a9a9a; }
.log li.is-me { color: var(--me-color, #7fc8ff); }   /* le tue azioni: azzurro */
.log li.is-opp { color: #ff9f7a; }  /* azioni dell'avversario: arancio */
.log .log-card { color: #fff; }     /* nomi delle carte: bianco */
.log .log-player { font-weight: 800; }
.log li.is-new { animation: flash 1.2s ease; }
.log li.is-market { color: #b9a77a; font-style: italic; }
.log li.is-win { color: var(--gold); font-weight: 700; }
.log li.is-refill, .log li.is-refill .log-card { color: #4a4436; } /* carte che escono nel mercato: molto in secondo piano */
/* "Turn N:" all'inizio di ogni turno: etichetta grigia col bordino arrotondato */
.log-turn { display: inline-block; padding: 0 8px; margin: 6px 2px 0 0; border: 1px solid #3a3a3a; border-radius: 99px; color: #6e6e6e; font-size: .85em; line-height: 1.5; vertical-align: baseline; }
@keyframes flash { from { background: rgba(217,165,32,.25); } to { background: transparent; } }

.hand { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px; min-height: 120px; align-items: flex-end; scroll-snap-type: x proximity; }
.hand .card { --w: clamp(54px, calc((100vw - 72px) / 5), 96px); }
.seat__play { display: flex; align-items: center; gap: 12px; }
.seat__play .hand { flex: 1 1 auto; min-width: 0; justify-content: flex-start; }
.seat__actions { flex: 0 0 auto; width: clamp(150px, 24vw, 260px); display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: center; gap: 8px; }
.seat__actions .btn--primary, .seat__actions .action-needed { flex: 1 1 100%; max-width: none; }
.seat__actions .btn--ghost { flex: 1 1 auto; }
.seat__actions .icon-btn { flex: 0 0 auto; margin-left: auto; }
/* telefono stretto: le azioni vanno sotto la mano */
@media (max-width: 560px) {
  .seat__play { flex-wrap: wrap; }
  .seat__actions { width: 100%; flex-wrap: nowrap; }
  .seat__actions .btn--primary, .seat__actions .action-needed { flex: 1 1 auto; }
}
.btn--remove[aria-pressed="true"] { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Difese davanti al giocatore */
.defences { display: flex; align-items: center; gap: 6px; flex-basis: 100%; }
.defences__label { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.defences .card { --w: 40px; }
.attack-order__cards { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 8px 0; }
.attack-order__cards .card { --w: 72px; }
.attack-order__slot { position: relative; background: none; border: 0; padding: 4px; cursor: pointer; border-radius: 12px; font: inherit; color: inherit; }
.attack-order__slot.is-picked { background: rgba(217,165,32,.2); }
.target-chip { display: grid; gap: 4px; place-items: center; min-width: 96px; min-height: 100px; padding: 10px; border-radius: 10px; border: 2px solid var(--felt-line); background: rgba(0,0,0,.25); }
.card__hp { position: absolute; left: 3px; top: 3px; padding: 0 5px; border-radius: 99px; background: var(--danger); color: #fff; font-size: calc(var(--w) * .14); font-weight: 800; line-height: 1.4; }
.monsters .card, .card.is-monster { --accent: #8a55b5; }
.monsters .defences__label { color: #ff3b30; } /* scritta MONSTERS rossa */
.attack-order__num { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: #24190a; font-weight: 800; display: grid; place-items: center; }
.attack-order__actions { display: flex; gap: 10px; justify-content: center; }

/* Mercato */
.pile-stack { position: relative; flex: 0 0 auto; }
.pile-stack.is-deep .card { box-shadow: 2px 2px 0 #000, 4px 4px 0 #000, 0 3px 8px rgba(0,0,0,.35); }
.pile-stack.is-deep .card.is-affordable { box-shadow: 0 0 0 2px var(--gold), 2px 2px 0 #000, 4px 4px 0 #000; }
.pile-stack__count { position: absolute; left: -4px; top: -6px; background: #000; color: var(--ink); border: 1px solid var(--felt-line); border-radius: 99px; font-size: .62rem; font-weight: 700; padding: 0 5px; line-height: 1.5; pointer-events: none; }
.market-area {
  /* misure del tabellone (pixel del file 5032 × 1843): spazi carta larghi 757, passo 957, margine 226;
     prima riga in alto a 478, seconda riga a 1677; spazio alto 1050 (= proporzione delle carte) */
  width: min(calc(100vw - 32px), 780px); container-type: inline-size;
  padding-bottom: 8px; border-bottom: 0; /* niente lineetta sotto il mercato */
}
.board { position: relative; container-type: inline-size; aspect-ratio: 5032 / 2727; /* tabellone + seconda riga */
  background: url('/static/lobby/market-board.jpg') top center / 100% auto no-repeat; border-radius: 6px; }
.board__row { position: absolute; left: 0; right: 0; height: 38.5%; display: flex; gap: 3.975%; padding-left: 4.49%; }
.board__row--supply { top: 17.53%; }
.board__row--market { top: 61.5%; }
.board .card, .board .pile-stack { --w: 15.04cqi; }
/* retro che si gira quando una carta nuova entra nel mercato (fx.js) */
.fx-back { position: fixed; z-index: 64; pointer-events: none; border-radius: 4.5px; border: 3px solid #785f0b; background: #0b1420 url('/static/cards/basegame/back.jpg') center / cover no-repeat; }

/* Carte */
.card {
  --w: clamp(62px, 18vw, 96px);
  width: var(--w); aspect-ratio: 675 / 944; /* proporzione delle carte: 675 × 944 px */ flex: 0 0 auto;
  background: var(--card); color: var(--card-ink); border-radius: 4.5px;
  border: 3px solid var(--accent, #999); box-shadow: 0 3px 8px rgba(0,0,0,.35);
  display: grid; grid-template-rows: auto 1fr auto; padding: 5px; text-align: center;
  font: inherit; scroll-snap-align: start;
}
.card--treasure { --accent: var(--gold); --accent-deep: var(--gold-deep); }
.card--weapon { --accent: var(--stick); --accent-deep: var(--stick-deep); }
.card--defence { --accent: #4f7fb8; --accent-deep: #22456e; }
.card--monster { --accent: #8a55b5; --accent-deep: #4b2470; }
.monsters .card { --w: 46px; }
.card--chest { --accent: #8b6a3e; --accent-deep: #4f3a1c; }
.card--beer { --accent: #c7861c; --accent-deep: #6b4405; }
.card--scroll { --accent: #3f9a8c; --accent-deep: #1b5249; }
.card--spell { --accent: #5a63c9; --accent-deep: #2b2f78; }
.card--potion { --accent: #c4466b; --accent-deep: #6e1832; }
.card--empty { --accent: var(--felt-line); background: rgba(0,0,0,.18); color: var(--muted); border-style: dashed; box-shadow: none; display: grid; place-items: center; font-size: .7rem; }
.card { position: relative; }
.card__cost { position: absolute; right: 4px; bottom: 4px; min-width: 1.6em; padding: 1px 4px; border-radius: 99px; background: var(--accent-deep); color: #fff; font-size: calc(var(--w) * .13); font-weight: 800; line-height: 1.3; }
.card.is-affordable { box-shadow: 0 0 0 2px var(--gold), 0 4px 12px rgba(217,165,32,.45); }
.card.is-bought { outline: 2px dashed var(--gold); outline-offset: 2px; }
.card__type { font-size: clamp(.42rem, calc(var(--w) * .1), .6rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-deep); font-weight: 700; }
.card__value { align-self: center; font-size: calc(var(--w) * .26); font-weight: 800; color: var(--accent-deep); line-height: 1; }
.card__value.is-small { font-size: calc(var(--w) * .15); }
.card__int { position: absolute; left: 4px; bottom: 4px; padding: 1px 4px; border-radius: 99px; background: #2b2f78; color: #fff; font-size: calc(var(--w) * .11); font-weight: 800; line-height: 1.3; white-space: nowrap; }
.card.has-art .card__int { left: 3px; bottom: 3px; }
.card.needs-int { filter: brightness(.42); } /* più scura, non sbiadita */
.card__sell { position: absolute; z-index: 4; top: 3px; right: 3px; padding: 1px 5px; border-radius: 99px; background: var(--ok); color: #000; font-size: calc(var(--w) * .13); font-weight: 800; line-height: 1.3; }
.hand.is-selling { background: rgba(127,207,154,.08); border-radius: 10px; }
.card.is-sellable { box-shadow: 0 0 0 2px var(--ok), 0 4px 12px rgba(127,207,154,.4); }
.card.not-sellable { filter: brightness(.35); }
.hand.is-choosing { background: rgba(226,109,90,.12); border-radius: 10px; }
.card.is-choosable { box-shadow: 0 0 0 2px var(--danger), 0 4px 12px rgba(226,109,90,.4); }
.arena__hint.is-alert { color: var(--danger); font-weight: 700; }
.card.is-sold { opacity: .6; outline: 2px dashed var(--danger); outline-offset: 2px; }
.btn--sell[aria-pressed="true"] { background: var(--ok); color: #000; border-color: var(--ok); }
.card.needs-int .card__int { background: var(--danger); }
.pile.is-berserk { border-color: var(--danger); color: var(--danger); font-weight: 700; }
.pile.is-berserk strong { color: var(--danger); }
.pile.is-spent { border-color: #5a63c9; color: #aab0ff; }
.pile.is-spent strong { color: #aab0ff; }
.pile.is-boosted { border-color: var(--gold); color: var(--gold); }
.pile.is-boosted strong { color: var(--gold); }
.card__name { font-size: calc(var(--w) * .12); font-weight: 700; line-height: 1.1; padding-bottom: calc(var(--w) * .22); hyphens: auto; -webkit-hyphens: auto; }
.card.has-art { padding: 0; border: 0; background: transparent; overflow: hidden; display: block; }
.card__art { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4.5px; pointer-events: none; }
button.card { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
button.card:not(:disabled):hover, button.card:not(:disabled):focus-visible { transform: translateY(-8px); box-shadow: 0 8px 16px rgba(0,0,0,.45); outline: none; }
button.card:disabled { cursor: default; filter: brightness(.5); } /* carte non attive: scurite col nero, colori pieni */

.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 16px; z-index: 10; }
.overlay .panel { background: var(--felt-2); box-shadow: 0 12px 40px rgba(0,0,0,.5); text-align: center; }
.toast { position: fixed; left: 50%; bottom: 140px; transform: translateX(-50%); background: #1a1a1a; border: 1px solid var(--danger); color: var(--ink); padding: 10px 14px; border-radius: 10px; z-index: 20; max-width: calc(100% - 32px); }

@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .arena { padding: 16px 24px; grid-template-columns: auto minmax(260px, 460px); column-gap: 24px; } /* registro largo al massimo 460 px */
  .arena > .arena__table { grid-column: 1; grid-row: 1 / -1; }
  /* tabellone al centro dello spazio disponibile, in orizzontale e in verticale */
  .arena { grid-template-rows: minmax(0, 1fr); }
  .arena__table { display: grid; grid-template-rows: 1fr auto 1fr; gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .arena__table > .market-area { grid-row: 2; justify-self: center; }
  .arena__table > .arena__below { grid-row: 3; align-self: start; }
  /* il più grande possibile, ma lasciando spazio sotto per le carte giocate e i suggerimenti */
  .market-area { width: min(calc(100vw - 340px), 960px, calc((100dvh - 420px) * 1.845)); } /* un po' più grande (il countdown ora è nella pillola del turno) */
  .arena .log-panel { grid-column: 2; grid-row: 1 / -1; min-height: 0; }
  .seat { padding: 12px 24px; }
}

/* Richiesta d'azione nel turno dell'avversario: grande, fissa, lampeggiante */
.action-alert {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 50;
  width: min(92vw, 720px); padding: 18px 20px; border-radius: 16px; text-align: center;
  background: #743a54; border: 3px solid var(--danger); color: #fff; font-family: 'FFF', system-ui, sans-serif;
  box-shadow: 0 10px 40px rgba(0,0,0,.7), 0 0 0 6px rgba(226,109,90,.25);
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
  animation: alert-pulse 1.1s ease-in-out infinite;
}
.action-alert[hidden] { display: none; }
.action-alert__title { font-size: clamp(28px, 7vw, 48px); font-weight: 900; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.action-alert__text { font-size: clamp(17px, 4.2vw, 24px); font-weight: 700; line-height: 1.3; }
@keyframes alert-pulse { 0%, 100% { box-shadow: 0 10px 40px rgba(0,0,0,.7), 0 0 0 6px rgba(226,109,90,.25); } 50% { box-shadow: 0 10px 40px rgba(0,0,0,.7), 0 0 0 14px rgba(226,109,90,.55); } }
body.has-action-alert .hand { outline: 3px solid var(--danger); outline-offset: 2px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .action-alert { animation: none; } }

/* Grafica d'azione al passaggio (o al tocco): strappo per le carte da rimuovere dal gioco
   (static/actions/remove.png) */
.card.is-removable { position: relative; }
.card.is-removable::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: url('/static/actions/remove.png') center / 100% 100% no-repeat;
  opacity: 0; transform: scale(.92); transition: opacity .15s ease, transform .15s ease;
}
.card.is-removable:hover::after, .card.is-removable:focus-visible::after, .card.is-removable:active::after { opacity: 1; transform: scale(1); }

/* Velo scuro (0.5) con un'icona bianca al centro, al passaggio (o al tocco):
   carta che brucia per lo scarto (static/icons/card-burn.svg), mano che riceve monete per la vendita
   (static/icons/receive-money.svg) */
.card.is-discardable, .card.is-sellable:not(:disabled) { position: relative; }
.card.is-discardable::after, .card.is-sellable:not(:disabled)::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: rgba(0,0,0,.5) url('/static/icons/card-burn.svg') center / 46% auto no-repeat;
  opacity: 0; transition: opacity .15s ease;
}
.card.is-sellable:not(:disabled)::after { background-image: url('/static/icons/receive-money.svg'); }
/* Smelt Gold: lingotto sulle monete e i Nuggets che si possono fondere (static/icons/gold-bar.svg) */
.card.is-smeltable:not(:disabled) { position: relative; }
.card.is-smeltable:not(:disabled)::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: rgba(0,0,0,.5) url('/static/icons/gold-bar.svg') center / 46% auto no-repeat; opacity: 0; transition: opacity .15s ease; }
.card.is-smeltable:not(:disabled):hover::after, .card.is-smeltable:focus-visible::after, .card.is-smeltable:active::after { opacity: 1; }
.card.is-discardable:not(:disabled):hover::after, .card.is-discardable:focus-visible::after, .card.is-discardable:active::after,
.card.is-sellable:not(:disabled):hover::after, .card.is-sellable:not(:disabled):focus-visible::after, .card.is-sellable:not(:disabled):active::after { opacity: 1; }

/* Al posto di End turn, quando serve una tua scelta per proseguire */
.action-needed {
  flex: 1; max-width: 420px; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 8px 14px; border-radius: 12px; border: 2px solid var(--danger); background: rgba(226,109,90,.12);
  color: #ffd9d2; font-weight: 800; font-size: 15px; line-height: 1.25;
}
.action-needed[hidden] { display: none; }
.action-needed.is-waiting { border-color: var(--felt-line); background: rgba(255,255,255,.03); color: var(--muted); font-weight: 600; }

/* Countdown del turno */
.turn-timer { font-family: 'FFF', system-ui, sans-serif; font-variant-numeric: tabular-nums; font-weight: 400; font-size: .95rem; min-width: 3.4em; text-align: center;
  padding: 2px 10px; border-radius: 99px; border: 1px solid var(--felt-line); color: var(--ink); background: rgba(255,255,255,.04); }
.turn-timer.is-low { color: #fff; border-color: var(--danger); background: rgba(226,109,90,.25); animation: timer-pulse 1s ease-in-out infinite; }
.turn-timer.is-over { animation: none; opacity: .6; }
@keyframes timer-pulse { 50% { background: rgba(226,109,90,.5); } }
@media (prefers-reduced-motion: reduce) { .turn-timer.is-low { animation: none; } }

/* Effetti animati (client/fx.js) */
.fx-float { position: fixed; z-index: 70; pointer-events: none; font-family: 'FFF', system-ui, sans-serif; font-weight: 700; font-size: 1.6rem;
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.8); white-space: nowrap; }
.fx-float.is-dmg { color: #ff5a43; }
.fx-float.is-heal { color: #ff5a43; } /* cure: rosso, come il lampo (scelta di Lore) */
.fx-float.is-xp { color: #f8da62; font-size: 1.2rem; }
.fx-float.is-poison { color: #7dff4a; text-shadow: 0 2px 0 #000, 0 0 12px rgba(80,255,40,.7); }
.fx-ghost { position: fixed !important; z-index: 65; margin: 0 !important; pointer-events: none; }
.fx-crumb { position: fixed; z-index: 66; width: 6px; height: 6px; border-radius: 50%; background: #e0302a; box-shadow: 0 0 4px rgba(224,48,42,.8); pointer-events: none; }

/* Menu col tasto destro sulle carte in mano */
.card-menu { position: fixed; z-index: 80; min-width: 190px; padding: 6px; border-radius: 10px;
  background: #0b0b0b; border: 1px solid #785f0b; box-shadow: 0 12px 30px rgba(0,0,0,.75), 0 0 0 1px rgba(248,218,98,.08);
  display: flex; flex-direction: column; gap: 2px; }
.card-menu__title { font-family: 'Enchanted Land', Georgia, serif; font-size: 1.25rem; padding: 2px 10px 6px; border-bottom: 1px solid #2a2a2a; margin-bottom: 4px;
  background: linear-gradient(180deg, #f8da62 0%, #785f0b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-menu__item { font: inherit; text-align: left; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); cursor: pointer; }
.card-menu__item:hover:not([disabled]), .card-menu__item:focus-visible { background: rgba(248,218,98,.12); color: #fff; outline: none; }
.card-menu__item[disabled] { color: #5a5a5a; cursor: default; }
.card-menu__why { font-size: .72rem; color: #6f6250; }

/* Ingrandimento di una carta (mouse fermo 3 secondi) */
.card-zoom { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.78); display: flex; align-items: center; justify-content: center; gap: 28px; padding: 24px; pointer-events: auto; }
.card-zoom__art, .card-zoom .card-zoom__card { height: min(49.2vh, 456px); width: auto; aspect-ratio: 675 / 944; border-radius: 9px; box-shadow: 0 20px 60px rgba(0,0,0,.8), 0 0 0 2px #000; } /* bordo nero (scelta di Lore) */
.card-zoom .card-zoom__card { --w: min(34.8vh, 324px); width: var(--w); height: auto; } /* 3/5 della misura di prima */
.card-zoom__info { max-width: 320px; color: var(--ink); }
.card-zoom__name { font-family: 'FFF', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 400; font-size: 2rem; line-height: 1.1; margin: 0 0 6px; color: #fff; }
.card-zoom__meta { margin: 0 0 12px; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.card-zoom__text { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.45; }
.card-zoom__fact { margin: 0 0 4px; font-size: .9rem; color: #f3e3a6; }
@media (max-width: 900px) {
  .card-zoom { flex-direction: column; gap: 14px; padding: 16px; }
  .card-zoom__info { text-align: center; }
  /* su mobile la carta sta nello schermo e lascia spazio al testo sotto */
  .card-zoom__art, .card-zoom .card-zoom__card { height: auto; width: min(50.4vw, calc(34.8dvh * 675 / 944)); }
  .card-zoom .card-zoom__card { --w: min(50.4vw, calc(34.8dvh * 675 / 944)); }
  .card-zoom__name { font-size: 1.7rem; }
}

/* Conteggio del main deck (il mazzo non si vede più: resta solo il numero) */

/* Icone di game-icons.net (static/icons, CC BY 3.0): colorate col colore del testo tramite maschera */
.icon { display: inline-block; width: 18px; height: 18px; background-color: currentColor; transition: transform .2s;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }

/* Dadi nel registro: un'icona per dado, la faccia in alto mostra il risultato */
.log-dice { display: inline-flex; gap: 2px; vertical-align: -5px; margin: 0 1px; }
.icon--die { width: 1.5em; height: 1.5em; color: #fff; }

/* Punti vita: goccia rossa al posto di "HP" */
.icon--hp { --icon: url('/static/icons/drop.svg'); width: .95em; height: .95em; vertical-align: -.1em; margin: 0 .08em; color: #e0302a; }
.card__hp .icon--hp { color: #fff; }
.icon--dmg { --icon: url('/static/icons/battle-axe.svg'); width: 1.05em; height: 1.05em; vertical-align: -.15em; margin: 0 .08em; color: #e8e8e8; }
.icon--int { --icon: url('/static/icons/spell-book.svg'); width: 1.05em; height: 1.05em; vertical-align: -.15em; margin: 0 .08em; color: #aab0ff; }
.card__int .icon--int { color: #fff; }
.icon--shield { --icon: url('/static/icons/checked-shield.svg'); width: 1em; height: 1em; vertical-align: -.12em; margin: 0 .1em 0 0; color: #7fb3e8; }
.icon--coin { --icon: url('/static/icons/two-coins.svg'); width: 1.1em; height: 1.1em; vertical-align: -.18em; margin: 0 .1em; color: #f0c64a; }
.coins .icon--coin { width: 1.25em; height: 1.25em; margin: 0 .25em 0 0; }
/* anteprima dei personaggi (lobby): icone di vita e INT dorate */
.character__stats .icon { color: var(--gold); width: 1.25em; height: 1.25em; vertical-align: -.25em; margin: 0 .2em 0 0; }

/* Pila o slot vuoto: nessun riquadro grigio, si vede il tabellone */
.board .card--empty { background: transparent; border-color: transparent; box-shadow: none; color: transparent; }
/* Icone nel registro: stesso colore del testo della riga (azzurro tu, arancio l'avversario…) */
.log .icon { color: inherit; }
/* Icone nelle finestre (ingrandimento, menu, fine partita, scelte, impostazioni): dorate */
.card-zoom .icon, .card-menu .icon, .overlay .icon, .settings-pop .icon { color: var(--gold); }
/* Pillole delle stats dei giocatori (INT…): icone bianche */
.piles .icon { color: #fff; }
/* lobby: valori delle stats in bianco */
.character__stats { color: #fff; }
/* contatore delle pile (×7…): senza bordino */
.pile-stack__count { border: 0; }
/* registro: margine sotto l'ultima riga, così si legge bene anche scrollando fino in fondo */
.log { padding-bottom: 28px; scroll-padding-bottom: 28px; }
.log::after { content: ''; display: block; flex: 0 0 18px; }

/* Barra del giocatore: mano | difese e mostri | azioni */
.hand-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.hand-scroll { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 30px; height: 64px; padding: 0; border: 1px solid var(--gold); border-radius: 8px; background: rgba(0,0,0,.82); color: var(--gold); font-size: 30px; line-height: 1; cursor: pointer; box-shadow: 0 0 12px rgba(0,0,0,.8); }
.hand-scroll:hover { background: #1a1408; }
.hand-scroll--prev { left: 0; }
.hand-scroll--next { right: 0; }
.hand-scroll[hidden] { display: none; }
.seat__board { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.seat__board::-webkit-scrollbar { display: none; }
.seat__board-wrap[hidden] { display: none; }
.seat__board[hidden] { display: none; }
.seat__board .defences { flex-basis: auto; flex-wrap: nowrap; flex-shrink: 0; }
.seat__board .defences .card { flex: 0 0 auto; }
.seat__board .defences:not(.monsters) { order: 0; }
.seat__board .monsters { order: 1; }
.seat__board .defences__label { flex: 0 0 64px; }
#screen-table .card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .seat__play { flex-wrap: wrap; }
  .seat__board-wrap { order: -1; flex-basis: 100%; }
}
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .seat__play { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(300px, 24vw)) minmax(0, min(300px, 22vw)); gap: 16px; align-items: center; }
  .seat__play > .hand-wrap { grid-column: 1; }
  .seat__play > .seat__board-wrap { grid-column: 2; }
  .seat__play > .seat__actions { grid-column: 3; width: 100%; max-width: 300px; justify-self: end; }
  .hand-wrap .hand { scrollbar-width: none; }
  .hand-wrap .hand::-webkit-scrollbar { display: none; }
}
.card-zoom__text .icon { color: #fff; } /* icone nell'effetto della carta ingrandita: bianche */

/* Proprio posto: ritratto grande in un cerchio che esce un po' sopra la barra ed è tagliato a sinistra
   e in basso; sopra il ritratto il nome, sotto il nome una barra della vita sottile */
.seat-hero { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.portrait--hero { width: 44px; height: 44px; border-radius: 50%; font-size: 1.3rem; border: 0; }
.portrait--hero img { object-position: 50% 20%; }
.seat-hero .seat__name { font-size: 1.7rem; }
.hp--hero { flex: 0 1 160px; min-width: 90px; padding: 4px 0; }
.hp--hero .hp__bar { height: 6px; background: #000; box-shadow: 0 0 0 1px rgba(0,0,0,.8); }
.seat-hero.is-active .portrait--hero { box-shadow: none; } /* il turno lo mostrano scintilla e timer sull'anello */
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .seat--me { --hero: 250px; position: relative; padding-left: 230px; clip-path: inset(-40px 0 0 0); }
  .seat-hero { position: absolute; left: 0; top: 0; bottom: 0; width: 214px; display: block; margin: 0; }
  .portrait--hero { position: absolute; width: var(--hero); height: var(--hero); left: -47px; top: -50px; font-size: 6rem; border: 0; background: #1a1410; }
  .portrait--hero::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.75) 92%); pointer-events: none; }
  .seat-hero .seat__name { position: absolute; z-index: 2; left: 16px; bottom: 30px; font-size: 2.6rem; }
  .hp--hero { position: absolute; z-index: 2; left: 10px; bottom: 12px; width: 196px; padding: 4px 0; }
  .hp--hero .hp__bar { height: 7px; }
}
.hp--hero .hp__text { top: auto; bottom: calc(100% + 6px); }

/* mobile: barre dei giocatori fisse in alto e in basso, in mezzo scorrono tavolo e registro */
@media (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .arena { overflow-y: auto; overscroll-behavior: contain; grid-template-rows: none; }
  .arena__table { display: grid; gap: 8px; min-width: 0; }
  .arena .log-panel { min-height: 260px; max-height: 60dvh; }
}
.log-filters .log-pill strong { margin-left: auto; }

/* bottone Sell: icona + scritta in FFF */
#sell-mode { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'FFF', system-ui, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
#sell-mode .btn__icon { width: 1.35em; height: 1.35em; flex: 0 0 auto; }

/* Abilità del personaggio (passando sopra il proprio ritratto) */
.hero-tip { position: fixed; z-index: 70; width: min(340px, calc(100vw - 32px)); padding: 14px 16px; background: rgba(8,8,8,.96); border: 1px solid #2a2a2a; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.8); pointer-events: none; }
.hero-tip[hidden] { display: none; }
.hero-tip__name { margin: 0 0 8px; font-family: 'Enchanted Land', Georgia, serif; font-weight: 400; font-size: 1.9rem; line-height: 1; background: linear-gradient(180deg, #f8da62 0%, #785f0b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-tip__list { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .84rem; line-height: 1.35; }
.hero-tip__list li::before { content: "• "; opacity: .6; }
.hero-tip__base { color: #fff; } /* abilità di base in bianco */
.hero-tip__level--1 { color: #fff; }
.hero-tip__level { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 4px; font-family: 'FFF', system-ui, sans-serif; font-weight: 400; letter-spacing: .06em; font-size: .9rem; }
.hero-tip__xp { font-weight: 400; font-size: .72rem; letter-spacing: .02em; opacity: .75; }
.hero-tip__got { margin-left: auto; }
.hero-tip__lv { font-family: 'FFF', system-ui, sans-serif; }
.hero-tip__level--2, .hero-tip__lv--2 { color: #eca141; }
.hero-tip__level--3, .hero-tip__lv--3 { color: #72c3d7; }
.hero-tip .icon { color: inherit; }
.hero-tip__lv:last-child { margin-bottom: 0; }
.portrait--hero { cursor: help; }
.hero-tip__lv { font-size: .9rem; letter-spacing: .03em; }
.hp__text .icon { color: #fff; } /* goccia della vita bianca nel numero sopra/sotto la barra */

/* Avversario: ventaglio dei retri e, alla sua destra, la pila degli scarti con le carte che ha
   comprato nel suo ultimo turno (ognuna un po' più a destra e ancora meno più in alto) */
.opp-zone { position: absolute; z-index: 1; left: 50%; top: 2px; transform: translateX(-50%); display: flex; align-items: flex-start; gap: 18px; pointer-events: none; }
.opp-zone .opp-hand { position: static; transform: none; left: auto; top: auto; }
.opp-buys { position: relative; height: 78px; width: calc(54px + var(--n, 0) * 6px); flex: 0 0 auto; }
.opp-buys:empty { display: none; }
.opp-buys .opp-buys__card { --w: 54px; position: absolute; left: calc(var(--i) * 6px); top: calc(4px - var(--i) * 2px); margin: 0; box-shadow: 0 2px 6px rgba(0,0,0,.8); pointer-events: auto; }
@media (max-width: 640px) {
  .opp-zone { top: 100%; left: auto; right: 10px; transform: none; gap: 10px; }
  .opp-zone .opp-hand { height: 38px; }
  .opp-buys { height: 38px; }
  .opp-buys .opp-buys__card { --w: 30px; left: calc(var(--i) * 4px); top: calc(2px - var(--i) * 1px); }
}

/* carta che si gira (fx.js revealFromBack): due facce, retro back.jpg e fronte la carta nuova */
.fx-flip { position: fixed; z-index: 64; pointer-events: none; perspective: 800px; }
.fx-flip__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.fx-flip__face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.fx-flip__back { border-radius: 4.5px; border: 3px solid #785f0b; background: #0b1420 url('/static/cards/basegame/back.jpg') center / cover no-repeat; }
.fx-flip__front { transform: rotateY(180deg); }

/* Avversario (desktop): ritratto in un cerchio grande in alto a sinistra, tagliato dai bordi dello
   schermo e che esce un po' sotto la barra; nome e barra della vita alla sua destra */
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .seat--opp { padding-left: 116px; }
  .portrait--opp { position: absolute; left: -16px; top: -24px; width: 112px; height: 112px; margin: 0; border: 2px solid #b8963a; background: #1a1410; font-size: 2.6rem; box-shadow: 0 6px 18px rgba(0,0,0,.6); z-index: 4; }
  .portrait--opp img { object-position: 50% 25%; }
}

/* New game: FFF, sfondo con sfumatura dorata verticale (chiara in alto, scura in basso) */
#new-game { font-family: 'FFF', system-ui, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; color: #24190a; border: 1px solid #785f0b; background: linear-gradient(180deg, #f8da62 0%, #d9a520 55%, #785f0b 100%); text-shadow: 0 1px 0 rgba(255,240,180,.4); }
#new-game:hover { filter: brightness(1.08); }
#new-game { color: #000; border: 1px solid #000; text-shadow: none; box-shadow: none; }

/* filtri del registro: cerchio a sinistra di ogni voce, con un pallino bianco quando è attiva */
.log-filters .log-pill::before, .log-filters .log-pill.is-on::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-right: 6px; border-radius: 50%; border: 1.5px solid #6e6e6e; box-sizing: border-box; background: transparent; }
.log-filters .log-pill.is-on::before { border-color: #fff; background: radial-gradient(circle, #fff 0 3.5px, transparent 4px); }
/* filtro non attivo: voce, cerchio e pallino nello stesso grigio (non troppo scuro) */
.log-filters .log-pill:not(.is-on), .log-filters .log-pill:not(.is-on) strong { color: #9a9a9a; }
.log-filters .log-pill:not(.is-on)::before { border-color: #9a9a9a; background: radial-gradient(circle, #9a9a9a 0 3.5px, transparent 4px); }

/* Le tue carte comprate in questo turno: sopra tutto, tagliate dal bordo inferiore dello schermo;
   ognuna un po' più a destra e più in alto della precedente */
.my-buys { position: fixed; z-index: 55; right: 340px; bottom: 0; width: 0; height: 0; pointer-events: none; }
.my-buys .my-buys__card { --w: 104px; position: absolute; right: calc(var(--i) * -10px); bottom: calc(-62px + var(--i) * 4px); margin: 0; pointer-events: auto;
  box-shadow: 0 -6px 18px rgba(0,0,0,.75); transform-origin: 50% 100%; }
@media (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) {
  .my-buys { right: auto; left: 12px; }
  .my-buys .my-buys__card { --w: 64px; right: auto; left: calc(var(--i) * 8px); bottom: calc(-40px + var(--i) * 3px); }
}
@media (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) { .my-buys .my-buys__card { pointer-events: none; } }
/* al tavolo la pagina non scorre mai (scorre solo il tavolo di gioco): le carte che sporgono dal
   bordo inferiore non devono allungare la pagina */
body:has(#screen-table:not([hidden])) { overflow: hidden; height: 100dvh; }

/* Colori della barra della vita per personaggio: .hp--<id> { --hp-100: …; --hp-80: …; … } */
/* zone dell'avversario: una riga sotto nome e barra; su desktop mostri e difese affiancati */
.seat__zones { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .seat__zones { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
  .seat__zones .defences { flex-basis: auto; }
}

/* Sell e Play all affiancati, metà larghezza ciascuno, stesso stile (icona + FFF) */
#play-all { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'FFF', system-ui, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
#play-all .btn__icon { width: 1.35em; height: 1.35em; flex: 0 0 auto; }
.seat__actions #sell-mode, .seat__actions #play-all { flex: 1 1 calc(50% - 4px); min-width: 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.hero-tip__stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.hero-tip__stat { font-size: .78rem; color: #cfcfcf; padding: 2px 9px; border: 1px solid #2f2f2f; border-radius: 99px; }
.hero-tip__stat--level, .hero-tip__stat--level strong { font-family: 'FFF', system-ui, sans-serif; font-weight: 400; letter-spacing: .06em; } /* LEVEL 1 in FFF, come i titoli dei livelli */
.hero-tip__stat strong { color: #fff; margin-left: 2px; }
.hero-tip__stat .icon { color: var(--gold); }
.hero-tip__stat.is-berserk { border-color: var(--danger); color: var(--danger); }

/* "Your move!": carta che la provoca, sovrapposta a sinistra e ruotata di -20°; countdown in basso */
.action-alert { overflow: visible; padding-left: 120px; }
.action-alert__card { position: absolute; left: -34px; top: 50%; transform: translateY(-50%) rotate(-20deg); filter: drop-shadow(0 10px 18px rgba(0,0,0,.75)); }
.action-alert__card:empty { display: none; }
.action-alert__card .card { --w: 120px; }
.action-alert__text { color: #fff; font-family: 'FFF', system-ui, sans-serif; }
.action-alert__timer { font-family: 'FFF', system-ui, sans-serif; font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 400; color: #fff; }
.action-alert__timer:empty { display: none; }
.action-alert__timer.is-low { color: #ffd0d0; }
@media (max-width: 640px) {
  .action-alert { padding-left: 84px; }
  .action-alert__card { left: -18px; }
  .action-alert__card .card { --w: 80px; }
}

/* carta nuova del mercato mentre si gira (fx.js): la vera resta nascosta e non cliccabile */
.card.is-revealing { opacity: 0 !important; pointer-events: none !important; }

/* turno e monete sopra i bottoni d'azione, a destra della tua barra */
.seat__actions .seat__turn { flex: 1 1 100%; display: flex; align-items: center; justify-content: flex-start; gap: 14px; min-width: 0; }
.seat__turn .turn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.seat__turn .coins { flex: 0 0 auto; }
/* imbuto e ingranaggio: senza bordo, anche al passaggio */
.icon-btn, .icon-btn:hover, .icon-btn[aria-expanded="true"], #filter-btn.is-filtering { border: 0; }
/* turno sopra i bottoni: pillola come "Turn N" del registro, un po' più grande e più chiara */
.seat__turn .turn-label { font-family: inherit; font-weight: 400; font-size: .92rem; line-height: 1.5; padding: 1px 12px; border: 1px solid #4a4a4a; border-radius: 99px;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #8f8f8f; -webkit-text-fill-color: #8f8f8f; filter: none; text-transform: none; letter-spacing: 0; }
.hero-tip__stat .icon { color: #fff; } /* icona dell'intelligenza nel riquadro del ritratto: bianca */

/* I mostri davanti ai giocatori "sono vivi": un breve fremito ogni 5 secondi (sfalsato tra i mostri).
   Usa le proprietà translate/rotate, così non interferisce con le animazioni GSAP (transform). */
@keyframes monster-alive {
  0%, 9%, 100% { translate: 0 0; rotate: 0deg; }
  1% { translate: -1.5px 0; rotate: -2deg; }
  2% { translate: 1.5px -1px; rotate: 2deg; }
  3% { translate: -1.5px 0; rotate: -1.5deg; }
  4% { translate: 1.5px -1px; rotate: 1.5deg; }
  5% { translate: -1px 0; rotate: -1deg; }
  6% { translate: 1px 0; rotate: 1deg; }
  7% { translate: 0 0; rotate: 0deg; }
}
#screen-table .monsters .card { animation: monster-alive 5s ease-in-out infinite; }
#screen-table .monsters .card:nth-of-type(2) { animation-delay: .6s; }
#screen-table .monsters .card:nth-of-type(3) { animation-delay: 1.2s; }
#screen-table .monsters .card:nth-of-type(4) { animation-delay: 1.8s; }
@media (prefers-reduced-motion: reduce) { #screen-table .monsters .card { animation: none; } }

/* Anello sopra il ritratto: stessa posizione e misura del ritratto */
.seat-hero, .seat__who { position: relative; }
.portrait-ring { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; overflow: visible; pointer-events: none; z-index: 5; }
.portrait-ring--opp { width: 30px; height: 30px; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .seat-hero { position: absolute; }
  .seat--opp .seat__who { position: static; } /* il ritratto grande e il suo anello si posizionano sulla barra */
  .portrait-ring--hero { left: -47px; top: -50px; transform: none; width: var(--hero); height: var(--hero); }
  .portrait-ring--opp { left: -16px; top: -24px; transform: none; width: 112px; height: 112px; }
}
.portrait-ring circle { fill: none; }
/* timer del turno: tratto dorato che si consuma in senso orario partendo dall'alto */
.portrait-ring__timer { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; opacity: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transform-box: view-box; transition: stroke-dashoffset .25s linear, opacity .3s; }
.portrait-ring.has-timer .portrait-ring__timer { opacity: 1; }
.portrait-ring.has-timer.is-low .portrait-ring__timer { stroke: var(--danger); }
/* scintilla che gira lungo il bordo del ritratto del giocatore di turno */
.portrait-ring__spark { opacity: 0; transform-origin: 50% 50%; transform-box: view-box; animation: ring-orbit 3.2s linear infinite; transition: opacity .4s; }
.portrait-ring.is-active .portrait-ring__spark { opacity: 1; }
.portrait-ring__glow { fill: rgba(255, 214, 102, .45) !important; filter: blur(2.5px); }
.portrait-ring__dot { fill: #fff6c8 !important; }
@keyframes ring-orbit { to { transform: rotate(360deg); } }
/* lampi: rosso quando subisce danni, verde quando recupera vita */
.portrait-ring__flash { stroke: transparent; stroke-width: 6; }
.portrait-ring.is-hit .portrait-ring__flash { animation: ring-hit .8s ease-out; }
.portrait-ring.is-heal .portrait-ring__flash { animation: ring-heal .8s ease-out; }
.portrait-ring.is-poison .portrait-ring__flash { animation: ring-poison .8s ease-out; }
@keyframes ring-poison { 0% { stroke: rgba(90, 255, 50, 1); filter: drop-shadow(0 0 8px #4cff2a); } 100% { stroke: rgba(90, 255, 50, 0); filter: none; } }
@keyframes ring-hit { 0% { stroke: rgba(255, 60, 50, 1); filter: drop-shadow(0 0 8px #ff3b30); } 100% { stroke: rgba(255, 60, 50, 0); filter: none; } }
@keyframes ring-heal { 0% { stroke: rgba(255, 60, 50, 1); filter: drop-shadow(0 0 8px #ff3b30); } 100% { stroke: rgba(255, 60, 50, 0); filter: none; } } /* anche le cure: rosso */
@media (prefers-reduced-motion: reduce) { .portrait-ring__spark { animation: none; } }

/* bordo del ritratto in base al livello: LEVEL 2 arancio, LEVEL 3 azzurro (con una versione più chiara) */
.portrait-ring__level { stroke-width: 3.2; opacity: 0; transition: opacity .6s; }
.portrait-ring.is-level-2 .portrait-ring__level, .portrait-ring.is-level-3 .portrait-ring__level { opacity: 1; }
.portrait-ring.is-level-2 .portrait-ring__stop-a { stop-color: #eca141; }
.portrait-ring.is-level-2 .portrait-ring__stop-b { stop-color: #f7c98a; }
.portrait-ring.is-level-3 .portrait-ring__stop-a { stop-color: #72c3d6; }
.portrait-ring.is-level-3 .portrait-ring__stop-b { stop-color: #b4e2ec; }
.fx-level-wave { position: fixed; z-index: 66; pointer-events: none; border-radius: 50%; border: 3px solid #f8da62; box-shadow: 0 0 22px rgba(248,218,98,.8), inset 0 0 18px rgba(248,218,98,.5); }
.portrait-ring.is-leveling .portrait-ring__level { opacity: 0 !important; } /* durante l'onda: il colore arriva dopo */
.portrait-ring__spark { display: none; } /* scintilla tolta: resta l'anello del timer */
#new-game { font-size: 1.35rem; padding-top: 12px; padding-bottom: 12px; }

/* timer: solo l'anello attorno al ritratto (niente numeri), più sottile, centrato sul bordo dell'immagine */
.portrait-ring__timer { stroke-width: 1.8; }
@media (max-width: 899px) and (orientation: portrait), (max-width: 899px) and (min-height: 501px) { .portrait-ring__timer { stroke-width: 5; } } /* ritratto piccolo: tratto proporzionalmente più spesso */

/* desktop: barra della vita allineata a quella dell'avversario (alignMyHp in app.js) */
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .hp--hero.is-aligned { bottom: auto; top: 10px; padding: 4px 0; }
  .hp--hero.is-aligned .hp__bar { height: 10px; }
  .hp--hero.is-aligned .hp__text { top: calc(100% + 6px); bottom: auto; }
}
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) { #seat-me .seat__row { justify-content: flex-end; } } /* Deck e Discard a destra, dopo la fine della barra della vita */

/* turno e monete: appena sopra la tua barra, al centro dello schermo */
.seat--me { position: relative; }
.seat--me > .seat__turn { position: absolute; z-index: 6; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; pointer-events: none; }

/* countdown numerico: al centro, appena sotto la barra del computer */
.arena { position: relative; }
.arena > #turn-timer { position: absolute; z-index: 4; top: 8px; left: 50%; transform: translateX(-50%); }
.arena > #turn-timer[hidden] { display: none; }
/* sopra la tua barra, al centro: turno e monete, e sotto i suggerimenti */
.seat--me > .seat__turn { flex-direction: column; gap: 4px; white-space: normal; text-align: center; }
.seat__turn .arena__turn { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
.seat__turn .arena__hint { margin: 0; max-width: min(720px, 90vw); font-size: .85rem; line-height: 1.35; }
.seat__turn .arena__hint:empty { display: none; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) { .seat--me { clip-path: inset(-160px 0 0 0); } } /* spazio sopra la barra per turno e suggerimenti */
.arena > #turn-timer { top: 46px; } /* sotto il ventaglio di carte del computer */

/* scelta del bersaglio di una cura: velo scuro (0.5) con il cuore che brilla (static/icons/hearts.svg) */
.attack-order__slot.has-overlay--heal { position: relative; }
.attack-order__slot.has-overlay--heal::after { content: ''; position: absolute; inset: 4px; z-index: 3; pointer-events: none; border-radius: 10px;
  background: rgba(0,0,0,.5) url('/static/icons/hearts.svg') center / 46% auto no-repeat; opacity: 0; transition: opacity .15s ease; }
.attack-order__slot.has-overlay--heal:hover::after, .attack-order__slot.has-overlay--heal:focus-visible::after, .attack-order__slot.has-overlay--heal.is-picked::after { opacity: 1; }

/* carta che il tuo personaggio non può giocare: velo scuro e scritta bianca (niente filtro, che scurirebbe anche il testo) */
.card.is-banned, .card.is-banned:disabled { filter: none; position: relative; }
.card__ban { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 8%; border-radius: inherit; background: rgba(0,0,0,.62);
  color: #fff; font-family: 'FFF', system-ui, sans-serif; font-weight: 400; font-size: calc(var(--w, 96px) * .13); line-height: 1.15; text-align: center; text-transform: uppercase; letter-spacing: .02em; pointer-events: none; }

/* scelta in ordine (bersagli, ordine d'attacco): sul bersaglio scelto un velo scuro col numero bianco al centro */
.attack-order__slot.is-ordered .attack-order__num { inset: 4px; top: 4px; left: 4px; width: auto; height: auto; border-radius: 10px; background: rgba(0,0,0,.58);
  color: #fff; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,.8); z-index: 4; }
/* sopra la tua barra: prima le monete, a capo la pillola del turno, poi i suggerimenti */
.seat__turn .arena__turn { flex-direction: column; gap: 4px; }
.seat__turn .arena__turn .coins { order: -1; }

/* comprabile ma inutilizzabile dal tuo personaggio: bordo rosso */
.card.is-affordable.is-unusable { box-shadow: 0 0 0 2px var(--danger), 0 4px 12px rgba(226,109,90,.45); }
.pile-stack.is-deep .card.is-affordable.is-unusable { box-shadow: 0 0 0 2px var(--danger), 2px 2px 0 #000, 4px 4px 0 #000; }

/* nomi dei giocatori: iniziali maiuscole */
.seat__name, .seat__gold, .log-player, .target-chip strong, #lobby-user { text-transform: capitalize; }

/* anello del timer nel colore del livello: LEVEL 2 arancio, LEVEL 3 azzurro (sotto, il bordo del livello
   si attenua mentre scorre il tempo, così si vede quanto ne resta) */
.portrait-ring.is-level-2 .portrait-ring__timer { stroke: #eca141; }
.portrait-ring.is-level-3 .portrait-ring__timer { stroke: #72c3d6; }
.portrait-ring.has-timer .portrait-ring__level { opacity: .22; }
.hero-tip .is-locked { opacity: .5; } /* livelli non ancora raggiunti */

/* lampo rosso (danni) o verde (cure) anche sulla barra della vita e sulle carte mostro */
.fx-hit { animation: fx-hit .8s ease-out; }
.fx-heal { animation: fx-heal .8s ease-out; }
.fx-poison { animation: fx-poison .8s ease-out; }
@keyframes fx-poison { 0% { box-shadow: 0 0 0 2px rgba(90,255,50,1), 0 0 18px 4px rgba(76,255,42,.9); filter: brightness(1.4) saturate(1.3); } 100% { box-shadow: 0 0 0 2px rgba(90,255,50,0), 0 0 0 0 rgba(76,255,42,0); filter: none; } }
@keyframes fx-hit { 0% { box-shadow: 0 0 0 2px rgba(255,60,50,1), 0 0 18px 4px rgba(255,59,48,.9); filter: brightness(1.5) saturate(1.3); } 100% { box-shadow: 0 0 0 2px rgba(255,60,50,0), 0 0 0 0 rgba(255,59,48,0); filter: none; } }
@keyframes fx-heal { 0% { box-shadow: 0 0 0 2px rgba(255,60,50,1), 0 0 18px 4px rgba(255,59,48,.9); filter: brightness(1.3); } 100% { box-shadow: 0 0 0 2px rgba(255,60,50,0), 0 0 0 0 rgba(255,59,48,0); filter: none; } }
#end-turn { font-weight: 400; font-size: 1.1rem; padding-top: 9px; padding-bottom: 9px; } /* End turn: niente grassetto, testo un po' più grande, meno spazio */

/* scelta del colore nella schermata iniziale */
.color-label { display: block; margin: 12px 0 6px; font-size: .9rem; color: var(--muted); }
.color-pick { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.color-dot { width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--dot); cursor: pointer; padding: 0;
  box-shadow: none; outline: 1px solid transparent; outline-offset: 2px; transition: transform .12s; }
.color-dot:hover { transform: scale(1.12); }
.color-dot.is-on { outline-color: #fff; }
/* schede dei personaggi: bordo nel colore che hai scelto (più acceso al passaggio) */
.character { border-color: color-mix(in srgb, var(--me-color, #2a2a2a) 70%, #000); }
.character:hover, .character:focus-visible { border-color: var(--me-color, #785f0b); box-shadow: 0 16px 36px rgba(0,0,0,.7), 0 0 14px color-mix(in srgb, var(--me-color, #f8da62) 45%, transparent); }

/* mentre gioca il computer: la tua prossima mano già visibile ma oscurata, con una clessidra che si gira ogni 3 s */
.hand-wait { display: none; }
.hand-wrap.is-waiting .hand-wait { display: grid; place-items: center; position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.hand-wrap.is-waiting .hand { filter: brightness(.35); pointer-events: none; }
.hand-wait__icon { width: 56px; height: 56px; background: url('/static/icons/hourglass.svg') center / contain no-repeat; filter: drop-shadow(0 4px 10px rgba(0,0,0,.8)); animation: hourglass-turn 3s ease-in-out infinite; }
@keyframes hourglass-turn { 0%, 80% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .hand-wait__icon { animation: none; } }

/* cima di una pila coperta (durante le mosse del computer, dopo un suo acquisto) */
.card.card--back { background: #0b1420 url('/static/cards/basegame/back.jpg') center / cover no-repeat; border: 3px solid #785f0b; }

/* finestra di scelta: la carta che l'ha aperta, inclinata di -20° e sporgente a sinistra */
#attack-order .panel { position: relative; overflow: visible; }
.panel__source { position: absolute; left: -70px; top: 24px; transform: rotate(-20deg); filter: drop-shadow(0 12px 20px rgba(0,0,0,.8)); pointer-events: none; z-index: 2; }
.panel__source:empty { display: none; }
.panel__source .card { --w: 120px; }
@media (max-width: 640px) { .panel__source { left: -14px; top: -40px; } .panel__source .card { --w: 76px; } }
.hand-wait__icon { width: 34px; height: 34px; } /* clessidra più piccola */
.character { border-color: #000; } /* bordo nero; il tuo colore solo al passaggio */

/* carta venduta/rimossa/scartata dal computer: compare un attimo con la scritta e sparisce */
.fx-transient { position: fixed; }
.fx-transient__label { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); z-index: 6; white-space: nowrap; padding: 2px 8px; border-radius: 99px;
  background: rgba(0,0,0,.85); color: #fff; font-family: 'FFF', system-ui, sans-serif; font-weight: 400; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.log li.is-kobold, .log li.is-kobold .log-card, .log li.is-kobold .log-player { color: #ff5a4f; } /* Kobold nel registro: rosso */

/* Surrender: piccolo bottone outline nel viola della fascia 40% della vita */
.btn-surrender { flex: 0 0 auto; margin-left: auto; padding: 3px 12px; min-height: 0; border-radius: 99px; border: 1px solid #64427c; background: transparent;
  color: #9a78b8; font: inherit; font-size: .75rem; cursor: pointer; }
.btn-surrender:hover { border-color: #8a63a8; color: #c3a4dc; background: rgba(100,66,124,.15); }
.seat__actions .btn-surrender + .icon-btn { margin-left: 8px; }
.btn-surrender--big { margin: 0; padding: .7rem 1.1rem; font-size: 1rem; border-radius: 10px; }

/* ── Telefono in orizzontale (schermo basso): stessa disposizione a colonne del desktop, ma compatta ── */
@media (orientation: landscape) and (max-height: 500px) {
  .seat { padding: 4px 12px; }
  .seat--me { padding-bottom: max(4px, env(safe-area-inset-bottom)); padding-right: max(12px, env(safe-area-inset-right)); }
  /* barra del computer */
  .seat--opp { padding-left: max(62px, calc(env(safe-area-inset-left) + 52px)); padding-right: max(12px, env(safe-area-inset-right)); }
  .portrait--opp, .portrait-ring--opp { left: max(4px, env(safe-area-inset-left)); top: 2px; width: 48px; height: 48px; font-size: 1.3rem; }
  .seat--opp .seat__name { font-size: 1.15rem; }
  .seat .pile { font-size: .68rem; padding: 1px 7px; }
  .seat--opp .seat__row { gap: 4px 6px; }
  .seat--opp .seat__who { flex-wrap: nowrap; }
  .seat--opp .seat__who > * { min-width: 0; }
  .seat--opp .seat__row { flex-wrap: nowrap; flex: 0 1 auto; overflow: hidden; }
  .seat--opp .hp { min-width: 60px; }
  .opp-hand { height: 44px; }
  .opp-hand__card { width: 30px; margin-left: -13px; }
  .opp-buys .opp-buys__card { --w: 30px; }
  /* tabellone a sinistra, registro stretto a destra */
  .arena { padding: 4px 12px 2px max(12px, env(safe-area-inset-left)); grid-template-columns: auto minmax(150px, 1fr); column-gap: 12px; }
  :root { --mkt-w: min(calc(100vw - 230px), calc((100dvh - 178px) * 1.845)); }
  .market-area { width: var(--mkt-w); }
  .arena__table { grid-template-rows: auto auto 1fr; }
  .in-play .card { --w: 36px; }
  .arena .log-panel { font-size: .72rem; }
  .arena > #turn-timer { top: 0; left: calc(max(12px, env(safe-area-inset-left)) + var(--mkt-w) / 2); font-size: .8rem; }
  /* la tua barra: ritratto piccolo, mano, difese e azioni su una riga */
  .seat--me { --hero: 84px; padding-left: max(88px, calc(env(safe-area-inset-left) + 80px)); clip-path: inset(-120px 0 0 0); }
  .seat-hero { width: 84px; left: max(0px, env(safe-area-inset-left)); }
  .portrait--hero, .portrait-ring--hero { left: 2px; top: 4px; font-size: 2.2rem; }
  .seat-hero .seat__name { left: 6px; bottom: 6px; font-size: 1.1rem; }
  .hp--hero:not(.is-aligned) { left: 4px; bottom: 2px; width: 76px; }
  .hp--hero.is-aligned { top: 4px; }
  .hp--hero.is-aligned .hp__bar { height: 7px; }
  .seat__play { grid-template-columns: minmax(0, 1fr) minmax(0, min(150px, 14vw)) minmax(0, min(190px, 24vw)); gap: 10px; }
  .hand { min-height: 0; padding: 4px 2px; gap: 6px; }
  .hand .card { --w: clamp(48px, calc((100dvh - 150px) * .3), 66px); }
  .defences .card { --w: 30px; }
  .monsters .card { --w: 34px; }
  .seat__actions { gap: 6px; }
  .seat__actions { row-gap: 4px; }
  .seat__actions .btn { min-height: 28px; padding: .25rem .6rem; font-size: .8rem; }
  .seat__actions #end-turn, .seat__actions #new-game, .seat__actions #choice-done { min-height: 34px; font-size: .95rem; }
  .seat__actions .icon-btn { width: 26px; height: 26px; }
  .seat__actions .btn--sell, .seat__actions .btn--playall { padding: .3rem .5rem; }
  .btn-surrender { font-size: .65rem; padding: 2px 10px; }
  /* turno, monete e suggerimenti: in basso nella colonna del registro, non sopra il tabellone */
  .seat--me > .seat__turn { left: auto; right: max(12px, env(safe-area-inset-right)); transform: none; width: calc(100vw - var(--mkt-w) - 48px); bottom: calc(100% + 4px); }
  .seat__turn .arena__turn { flex-direction: row; gap: 10px; }
  .seat__turn .arena__hint { font-size: .7rem; line-height: 1.25; }
  .arena .log-panel { padding-bottom: 58px; }
  .my-buys .my-buys__card { --w: 54px; }
  .action-alert__card .card, .panel__source .card { --w: 70px; }
  .card-zoom .card-zoom__card { --w: min(34vw, calc(80dvh * 675 / 944)); }
  .overlay .panel { max-height: 94dvh; overflow-y: auto; }
  .attack-order__cards .card { --w: 58px; }
  .seat__board .defences__label { display: none; } /* poco spazio: niente scritta Monsters/Defences sotto la tua barra */
  .hand-scroll { width: 22px; height: 48px; font-size: 22px; }
}

/* telefono in verticale durante la partita: avviso a tutto schermo "ruota il telefono" */
.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 599px) and (pointer: coarse) {
  .rotate-hint { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: 24px; text-align: center; background: #0d0b09; color: #fff; }
  .rotate-hint p { margin: 0; max-width: 280px; }
  .rotate-hint__title { font-family: 'Enchanted Land', Georgia, serif; font-size: 2rem; color: var(--gold); }
  .rotate-hint__phone { width: 88px; height: 88px; color: var(--gold); animation: rotate-hint 2.4s ease-in-out infinite; }
  .rotate-hint .btn { margin-top: 8px; }
  .rotate-hint [hidden] { display: none; }
}
@keyframes rotate-hint { 0%, 20% { transform: rotate(0); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .rotate-hint__phone { animation: none; transform: rotate(-90deg); } }

.log-head .icon-btn { margin-left: 0; }

/* registro chiuso: resta la riga in alto (mazzo principale, turno e freccia), il tabellone si allarga */
.log-toggle svg { transition: transform .25s ease; }
body.log-collapsed .log-toggle svg { transform: rotate(180deg); }
body.log-collapsed .log-panel .log, body.log-collapsed #filter-btn, body.log-collapsed .log-filters { display: none; }
body.log-collapsed .log-panel { min-height: 0; max-height: none; align-self: start; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  body.log-collapsed .arena { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 900px) and (min-height: 501px) {
  body.log-collapsed .market-area { width: min(calc(100vw - 360px), 1100px, calc((100dvh - 420px) * 1.845)); }
}
@media (orientation: landscape) and (max-height: 500px) {
  body.log-collapsed { --mkt-w: min(calc(100vw - 280px), calc((100dvh - 178px) * 1.845)); }
  body.log-collapsed .seat--me > .seat__turn { width: auto; }
  body.log-collapsed .arena__table > .market-area { justify-self: start; } /* così il timer resta centrato sul tabellone */
}

/* New game: testo centrato davvero (la spaziatura delle lettere aggiunge spazio anche dopo l'ultima,
   e le maiuscole di FFF senza discendenti stanno un po' alte) */
#new-game { display: inline-flex; align-items: center; justify-content: center; text-indent: .05em; padding-top: 14px; padding-bottom: 10px; line-height: 1; }

/* nel tuo turno la pila degli scarti del computer resta visibile ma leggermente oscurata */
.opp-buys .opp-buys__card { transition: filter .35s ease; }
body.is-my-turn .opp-buys .opp-buys__card { filter: brightness(.55) saturate(.8); }

/* scelta del personaggio: una sezione per il gioco base e una per ogni espansione */
.char-sets { display: grid; gap: 8px; margin: 18px 0 28px; }
.char-set .characters { margin: 10px 0 22px; }
.char-set__title { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #d8d8d8; -webkit-text-fill-color: #d8d8d8; }
.char-set__title::after { content: ""; flex: 1 1 auto; height: 1px; background: #2a2a2a; }
.char-set__tag { padding: 1px 10px; border: 1px solid #4a4a4a; border-radius: 99px; background: #000; color: #8f8f8f; -webkit-text-fill-color: #8f8f8f;
  font-size: .62rem; letter-spacing: .12em; }
/* eroe non ancora fatto: spento, non cliccabile */
.character--soon { cursor: default; filter: grayscale(1) brightness(.55); }
.character--soon:hover, .character--soon:focus-visible { transform: none; box-shadow: 0 10px 28px rgba(0,0,0,.55); border-color: #2a2a2a; }
.character--soon .character__stats { letter-spacing: .2em; }

/* Berserk attivo: la barra del giocatore da grigia diventa rossa */
.seat { transition: background-color .4s ease, border-color .4s ease; }
/* effetto "infernale": brace che pulsa (::before) e scintille che salgono (::after), sotto al contenuto */
.seat.is-berserk { isolation: isolate;
  background: linear-gradient(90deg, #180708 0%, #421012 25%, #301011 55%, #180708 100%);
  box-shadow: 0 4px 18px #0009, inset 0 -1px 0 #d64b3025; }
.seat--opp.is-berserk { border-bottom-color: #783329; }
.seat--me.is-berserk { border-top-color: #783329; box-shadow: 0 -4px 18px #0009, inset 0 1px 0 #d64b3025; }
.seat.is-berserk::before, .seat.is-berserk::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.seat.is-berserk::before {
  background:
    radial-gradient(ellipse 40% 140% at 20% 60%, #d72e1650 0%, transparent 70%),
    radial-gradient(ellipse 35% 130% at 65% 45%, #ff4b1740 0%, transparent 70%),
    radial-gradient(ellipse 40% 140% at 85% 70%, #a8141660 0%, transparent 70%);
  background-size: 130% 100%; background-repeat: no-repeat;
  animation: berserkEmber 7s ease-in-out infinite alternate; }
.seat.is-berserk::after {
  background-image:
    radial-gradient(circle, #ffb16b 1px, transparent 1.8px),
    radial-gradient(circle, #ff5b32 1px, transparent 2px),
    radial-gradient(circle, #d88b48 1px, transparent 1.8px);
  background-size: 97px 61px, 137px 83px, 181px 71px;
  background-position: 12px 38px, 65px 17px, 110px 51px;
  opacity: .22; animation: berserkSparks 12s linear infinite; }
@keyframes berserkEmber {
  0%   { background-position: 0% 0;   opacity: .65; }
  50%  { background-position: 60% 0;  opacity: 1; }
  100% { background-position: 100% 0; opacity: .75; } }
@keyframes berserkSparks {
  from { background-position: 12px 38px, 65px 17px, 110px 51px; }
  to   { background-position: 109px -23px, -72px -66px, 291px -20px; } }
@media (prefers-reduced-motion: reduce) { .seat.is-berserk::before, .seat.is-berserk::after { animation: none; } }

/* sotto il tuo nome: INT disponibile nel turno (o livello di Berserk per Slayer, Barbarian, Dwarf) */
.hero-stat { display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border: 1px solid #4a4a4a; border-radius: 99px; background: #000;
  color: #d8d8d8; font-size: .8rem; line-height: 1.5; white-space: nowrap; transition: color .2s, border-color .2s; }
.hero-stat .icon { color: #fff; }
.hero-stat strong { color: #fff; font-variant-numeric: tabular-nums; }
.hero-stat.is-spent { border-color: #5a63c9; color: #aab0ff; } .hero-stat.is-spent strong { color: #aab0ff; }
.hero-stat.is-boosted { border-color: var(--gold); color: var(--gold); } .hero-stat.is-boosted strong { color: var(--gold); }
.hero-stat--berserk { letter-spacing: .04em; font-size: .72rem; }
.hero-stat--berserk.is-on, .hero-stat--berserk.is-on strong { border-color: var(--danger); color: var(--danger); font-weight: 700; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .seat-hero .seat__name { bottom: 38px; }
  .seat-hero .hero-stat-row { position: absolute; z-index: 2; left: 16px; bottom: 10px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .seat-hero .seat__name { bottom: 24px; }
  .seat-hero .hero-stat-row { left: 6px; bottom: 4px; }
  .seat-hero .hero-stat { font-size: .65rem; padding: 0 7px; }
}

/* sopra la tua barra, sempre in colonna: monete, sotto il turno, sotto i testi di aiuto (anche sul telefono) */
.seat--me > .seat__turn, .seat__turn .arena__turn { flex-direction: column; }
@media (orientation: landscape) and (max-height: 500px) {
  .seat__turn .arena__turn { flex-direction: column; gap: 2px; }
  .arena .log-panel { padding-bottom: 110px; } /* spazio per monete, turno e testi sotto il registro */
  body.hide-hints .arena .log-panel { padding-bottom: 80px; }
}
/* impostazione "Show the text hints": spenta, i testi sotto il contatore dei turni non si vedono */
body.hide-hints .seat__turn .arena__hint { display: none; }

/* prezzo scontato (es. Druid: mostri −10): numero dorato */
.card__cost.is-discounted { background: #785f0b; color: #fff; }

/* mostri con valore Taming: etichetta in alto a sinistra */
.card__taming { position: absolute; left: 4%; top: 4%; z-index: 2; padding: 1px 6px; border-radius: 99px; background: #1f4a2a; color: #fff; font-size: calc(var(--w, 96px) * .1); font-weight: 700; letter-spacing: .02em; }

/* Merchant: pulsante delle monete in più */
.btn--trade { flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-color: var(--gold); color: var(--gold); }
.btn--trade .icon { color: var(--gold); }
.btn--lifelink { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-color: var(--danger); color: var(--danger); font-weight: 700; letter-spacing: .04em; }
.btn--lifelink .btn__icon { width: 1.35em; height: 1.35em; flex: 0 0 auto; }
.btn--lifelink[aria-pressed="true"] { background: var(--danger); color: #1a0705; box-shadow: 0 0 12px rgba(226, 109, 90, .55); }

/* Sleep: mostro addormentato — più scuro, con le zZz che salgono sopra la carta */
.card.is-asleep::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: rgba(8, 14, 40, .45); }
.card__zzz { position: absolute; top: -6px; right: 4px; z-index: 4; pointer-events: none; display: flex; gap: 1px;
  font-weight: 800; font-size: .8rem; line-height: 1; color: #cfe3ff; text-shadow: 0 0 6px rgba(120, 170, 255, .9), 0 1px 2px #000; }
.card__zzz span { display: inline-block; opacity: 0; animation: zzz-rise 2.4s ease-in-out infinite; }
.card__zzz span:nth-child(2) { font-size: 1.2em; animation-delay: .5s; }
.card__zzz span:nth-child(3) { font-size: 1.45em; animation-delay: 1s; }
@keyframes zzz-rise { 0% { opacity: 0; transform: translate(0, 6px) rotate(-8deg); } 25% { opacity: 1; } 75% { opacity: .9; } 100% { opacity: 0; transform: translate(6px, -16px) rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .card__zzz span { animation: none; opacity: 1; } }

/* Segnalini veleno: pillola verde sul giocatore, bollino sul mostro */
.poison-token { display: inline-block; width: 18px; height: 18px; border-radius: 3px; border: 1px solid #5c9a3c; box-shadow: 0 1px 3px rgba(0,0,0,.7); vertical-align: middle; object-fit: cover; }
/* segnalino del giocatore: bordo verde con una luce che gli gira attorno (ogni segnalino sfasato) e un alone che respira */
@property --poison-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.poison-token-wrap { position: relative; display: inline-block; padding: 2px; border-radius: 6px; line-height: 0;
  background: conic-gradient(from var(--poison-a), #2f5a1c 0deg, #4c8a2c 200deg, #b6ff8c 300deg, #eaffd9 330deg, #4c8a2c 360deg);
  animation: poison-spin 2.2s linear infinite, poison-breathe 2.2s ease-in-out infinite; }
.poison-token-wrap:nth-child(2n) { animation-delay: -.7s; }
.poison-token-wrap:nth-child(3n) { animation-delay: -1.4s; }
.poison-tokens .poison-token { border: 0; box-shadow: none; display: block; }
@keyframes poison-spin { to { --poison-a: 360deg; } }
@keyframes poison-breathe { 0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,.7), 0 0 4px rgba(90,255,50,.35); } 50% { box-shadow: 0 1px 3px rgba(0,0,0,.7), 0 0 12px 2px rgba(90,255,50,.7); } }
@media (prefers-reduced-motion: reduce) { .poison-token-wrap { animation: none; } }
.hero-stat-row { display: inline-flex; align-items: center; gap: 8px; }
.poison-tokens { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; vertical-align: middle; }
.poison-tokens .poison-token { width: 30px; height: 30px; border-radius: 4px; }
.seat-hero .poison-tokens .poison-token { width: 40px; height: 40px; }
.card__poison { position: absolute; left: 3px; bottom: 3px; z-index: 4; display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 1px;
  border-radius: 5px; background: rgba(8, 16, 5, .9); color: #b6f08f; font-weight: 800; font-size: .7rem; line-height: 1; }
.card__poison .poison-token { width: 16px; height: 16px; }

/* Mind Control: sui mostri del mercato che si possono prendere, il ghigno (sharp-smile.svg, bianco) sempre visibile */
.card.is-controllable::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: rgba(40, 0, 60, .45) url('/static/icons/sharp-smile.svg') center / 52% auto no-repeat; opacity: .85; transition: opacity .15s ease, transform .15s ease; }
.card.is-controllable:hover::after, .card.is-controllable:focus-visible::after { opacity: 1; transform: scale(1.04); }

/* scelta tra due effetti (Cure) nella finestra di scelta */
.pick-choice { display: grid; gap: 4px; min-width: 130px; padding: 14px 12px; border-radius: 10px; background: #111; border: 1px solid #3a3a3a; text-align: center; }
.pick-choice strong { font-size: .95rem; color: var(--ink); }
.pick-choice span { font-size: .75rem; color: var(--muted); }

/* DEFENSIVE: bollino sul mostro che protegge chi lo ha davanti */
.card__defensive { position: absolute; right: 4px; bottom: 4px; z-index: 4; padding: 1px 5px; border-radius: 99px; background: #0b1424;
  border: 1px solid #5d86c2; color: #b9d3ff; font-weight: 800; font-size: .6rem; letter-spacing: .05em; line-height: 1.3; }

/* Logo (static/logo.png, 1015 × 190): al login e nella barra della lobby */
.logo { display: block; height: auto; max-width: 100%; }
.logo-title { margin: 4px 0 10px; line-height: 0; }
.logo--login { width: min(100%, 270px); margin: 0 auto; } /* un po' più piccolo */
.logo--bar { width: auto; height: 26px; }
@media (max-width: 480px) { .logo--bar { height: 20px; } }

/* Pugnale (broad-dagger.svg, bianco): sul bottone Sabotage e, al passaggio, sulle carte del mercato da eliminare
   (Knife, Elven Knife, Kryss, Orchish Blade, Sabotage) */
#sabotage-mode { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#sabotage-mode .btn__icon { width: 1.35em; height: 1.35em; flex: 0 0 auto; }
.card.is-dagger::after { background: rgba(0,0,0,.5) url('/static/icons/broad-dagger.svg') center / 46% auto no-repeat; }

/* Berserk attivo: barra dei turni rimasti sotto la scritta (sfondo nero, parte rossa #ff0000 che si riduce) */
.hero-stat--berserk.is-on { flex-direction: column; gap: 2px; padding-bottom: 4px; }
/* la pillola con la barra è più alta: il nome sale un po' per non sovrapporsi */
@media (min-width: 900px) and (min-height: 501px) { .seat-hero:has(.hero-stat--berserk.is-on) .seat__name { bottom: 46px; } }
@media (orientation: landscape) and (max-height: 500px) { .seat-hero:has(.hero-stat--berserk.is-on) .seat__name { bottom: 34px; } }
/* segnalini veleno accanto alla pillola: il nome sale ancora un po'; più piccoli sul telefono in orizzontale */
@media (min-width: 900px) and (min-height: 501px) { .seat-hero:has(.poison-tokens) .seat__name { bottom: 56px; } }
@media (orientation: landscape) and (max-height: 500px) {
  .seat-hero .poison-tokens .poison-token { width: 24px; height: 24px; }
  .seat-hero:has(.poison-tokens) .seat__name { bottom: 34px; } }
.hero-stat__bar { display: block; width: 100%; min-width: 48px; height: 5px; border-radius: 3px; background: #000; border: 1px solid #5a0000; overflow: hidden; }
.hero-stat__bar-fill { display: block; height: 100%; background: #ff0000; transition: width .4s ease; }

/* Countdown dentro la pillola del turno, dopo "your turn" */
.seat__turn .turn-pill { display: inline-flex; align-items: center; gap: 0; min-width: 0; padding: 1px 12px; border: 1px solid #4a4a4a; border-radius: 99px; }
.seat__turn .turn-pill .turn-label { border: 0; padding: 0; border-radius: 0; }
.turn-pill .turn-timer { min-width: 0; padding: 0 0 0 .45em; border: 0; border-radius: 0; background: none; color: var(--ink); font-size: .92rem; line-height: 1.5; }
.turn-pill .turn-timer::before { content: '· '; color: #8f8f8f; }
.turn-pill .turn-timer.is-low { color: var(--danger); background: none; animation: timer-pulse-text 1s ease-in-out infinite; }
.turn-pill .turn-timer.is-over { opacity: .6; }
.turn-pill:has(.turn-timer.is-low) { border-color: var(--danger); }
@keyframes timer-pulse-text { 50% { color: #fff; } }
@media (prefers-reduced-motion: reduce) { .turn-pill .turn-timer.is-low { animation: none; } }

.hero-tip__who { margin: -4px 0 8px; color: var(--muted); font-size: .8rem; } /* nome del giocatore (riquadro del computer) */
.pile.is-berserk { display: inline-flex; flex-direction: column; align-items: stretch; gap: 2px; padding-bottom: 3px; line-height: 1.1; }
.hero-tip__stat--bar { display: inline-flex; flex-direction: column; gap: 2px; }

/* End turn: font FFF, testo nero */
#end-turn { font-family: 'FFF', system-ui, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; color: #000; }
/* Play all, abilità (Sell, Remove, Sabotage, Trade, Lifelink), Surrender, Deck, Discard e filtri: sfondo nero opaco al 70% */
.seat__actions .btn--ghost, .btn-surrender, .pile[data-pile="deck"], .pile[data-pile="discard"], #filter-btn { background-color: rgba(0,0,0,.7); }

/* computer: sotto il nome la pillola INT/Berserk e i segnalini veleno */
.seat__namebox { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hero-stat-row--opp .poison-tokens .poison-token { width: 26px; height: 26px; }

/* INT: valore e libro insieme dentro un cerchio (niente pillola) */
.hero-stat--int, .hero-tip__stat--int { display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  width: 3.4em; height: 3.4em; padding: 0; border-radius: 50%; box-sizing: border-box; border: 1.5px solid #aab0ff; background: #000; line-height: 1; }
.hero-tip__stat--int { border-color: #cfcfcf; }
.hero-stat--int.is-boosted { border-color: var(--gold); }
.int-val { font-variant-numeric: tabular-nums; }
.hero-stat--int .icon--int, .hero-tip__stat--int .icon--int { width: 1.45em; height: 1.45em; vertical-align: middle; margin: 0; }
/* (il cerchio INT ora è sul ritratto: il nome non deve più salire) */
@media (orientation: landscape) and (max-height: 500px) { .seat-hero .hero-stat--int { width: 3em; height: 3em; } .seat-hero:has(.hero-stat--int) .seat__name { bottom: 40px; } }
.hero-tip__stats { align-items: center; } /* le pillole Level e XP non si allungano accanto al cerchio dell'INT */
#end-turn, #new-game { box-shadow: none !important; } /* niente ombra attorno a End turn e New game */
.hero-stat.hero-stat--int, .hero-stat.hero-stat--int.is-boosted, .hero-stat.hero-stat--int.is-spent, .hero-tip__stat.hero-tip__stat--int { border-color: #fff; } /* bordo del cerchio INT: sempre bianco */

.hero-tip__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } /* nome del personaggio con accanto la pillola XP */
.hero-tip__head .hero-tip__name { margin-bottom: 0; }
.hero-stat-row { width: max-content; } .hero-stat-row .poison-tokens { flex-wrap: nowrap; } /* INT, Berserk e veleno sempre su una riga */
#filter-btn { background-color: #000; } /* icona filtri: sfondo nero pieno */
#settings-btn { background-color: #000; } /* icona settings: sfondo nero pieno */
/* carte giocate: a sinistra, a metà altezza del tavolo (in colonna, sopra il bordo sinistro del tabellone) */
@media (min-width: 900px) and (min-height: 501px) {
  .arena__table { position: static; padding-bottom: 80px; } /* spazio sotto per monete e turno; le carte giocate si posizionano sull'arena (non tagliate dal tavolo che scorre) */
  .arena__table > .arena__below { position: absolute; z-index: 6; left: 6px; top: 50%; transform: translateY(-50%); pointer-events: none; }
  .arena__table > .arena__below .in-play { display: grid; grid-template-columns: repeat(3, max-content); gap: 6px; min-height: 0; align-items: start; } /* righe da tre */
  .arena__table > .arena__below .in-play .card { --w: 95px; }
  .arena__table > .arena__below .in-play > * { pointer-events: auto; }
}
.hero-stat.hero-stat--int, .hero-stat.hero-stat--int strong, .hero-stat.hero-stat--int.is-boosted, .hero-stat.hero-stat--int.is-boosted strong, .hero-stat.hero-stat--int.is-spent, .hero-stat.hero-stat--int.is-spent strong { color: #fff; } /* valore INT sempre bianco */
@media (min-width: 900px) and (min-height: 501px) { .hero-stat-row--opp .hero-stat--int { position: relative; z-index: 5; transform: translateX(-50px); margin-right: -50px; } } /* cerchio INT del computer sopra il suo ritratto */
/* cerchio INT del giocatore: 130px più a destra, sopra il ritratto e sopra l'anello del timer del turno */
@media (min-width: 900px) and (min-height: 501px) {
  .seat-hero .hero-stat-row { z-index: 7; }
  .seat-hero .hero-stat-row .hero-stat--int { transform: translateX(130px); margin-right: -52px; }
}
.card.has-art { background: #0b1018; } /* mentre l'immagine si scarica: fondo scuro come la cornice delle carte */
/* barre dei giocatori: sfondo di pietra (static/lobby/stone.jpg, o il .webp accanto); col Berserk attivo lo
   sostituisce l'effetto rosso (.seat.is-berserk, più specifico) */
.seat--opp, .seat--me { background: #141414 url('/static/lobby/stone.jpg') center / cover no-repeat; }

/* caricamento prima della partita */
.loading { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #000; }
.loading[hidden] { display: none; }
.loading__box { width: min(420px, 80vw); display: grid; justify-items: center; gap: 14px; }
.loading__logo { width: min(260px, 60vw); height: auto; }
.loading__bar { width: 100%; height: 10px; border-radius: 99px; background: #000; border: 1px solid #3a3020; overflow: hidden; }
.loading__fill { width: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #785f0b, #f8da62); transition: width .2s ease; }
.loading__text { margin: 0; color: var(--gold); font-family: 'FFF', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; }

/* barre della vita: anche l'estremità destra della parte colorata è arrotondata quando scende */
.hp__fill { border-radius: 99px; }
/* registro chiuso: il tabellone si sposta a destra per lasciare libera a sinistra la colonna delle carte
   giocate (3 carte da 95 px), invece di finirci sotto */
@media (min-width: 900px) and (min-height: 501px) {
  body.log-collapsed .arena__table { padding-left: 310px; }
  body.log-collapsed .market-area { width: min(calc(100vw - 440px), 1100px, calc((100dvh - 420px) * 1.845)); }
}
/* smusso in rilievo (circa 7 px): sul lato superiore della tua barra, sul lato inferiore di quella del computer.
   Linea chiara sullo spigolo, faccia dello smusso, linea scura dove lo smusso finisce; resta anche col Berserk */
:root {
  /* smusso netto (bordo deciso, niente sfumatura) ma senza righe grigie: una fascia di 7 px più chiara (tua
     barra, in alto) o più scura (computer, in basso), con i 2 px sullo spigolo ancora più marcati */
  --bevel-me: inset 0 2px 0 rgba(255,255,255,.12), inset 0 7px 0 rgba(255,255,255,.09);
  --bevel-opp: inset 0 -2px 0 rgba(0,0,0,.35), inset 0 -7px 0 rgba(0,0,0,.38);
}
.seat--me { box-shadow: var(--bevel-me), 0 -4px 10px rgba(0,0,0,.55); }
.seat--opp { box-shadow: var(--bevel-opp), 0 4px 10px rgba(0,0,0,.55); }
.seat--me.is-berserk { box-shadow: var(--bevel-me), 0 -4px 18px #0009, inset 0 1px 0 #d64b3025; }
.seat--opp.is-berserk { box-shadow: var(--bevel-opp), 0 4px 18px #0009, inset 0 -1px 0 #d64b3025; }
/* niente righe grigie sui bordi delle barre: il bordo lo fa lo smusso */
.seat--me, .seat--opp, .seat--me.is-berserk, .seat--opp.is-berserk { border-top-width: 0; border-bottom-width: 0; }

/* messaggi rapidi: bottone con bordino bianco smussato, menu di frasi, fumetto sul ritratto */
#talk-btn { background-color: #000; border: 1.5px solid #e6e6e6 !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.55), 0 0 0 1px #5a5a5a; }
#talk-btn:hover, #talk-btn[aria-expanded="true"] { border-color: #fff !important; color: #fff; }
.seat__actions #talk-btn { margin-left: auto; }
.seat__actions #talk-btn + #settings-btn, .seat__actions .btn-surrender + #talk-btn { margin-left: 8px; }
.talk-pop { position: fixed; z-index: 60; width: min(260px, calc(100vw - 16px)); padding: 6px; display: grid; gap: 2px;
  background: #0b0b0b; border: 1px solid #785f0b; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.75); }
.talk-pop[hidden] { display: none; }
.talk-pop__item { text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: .88rem; cursor: pointer; }
.talk-pop__item:hover, .talk-pop__item:focus-visible { background: rgba(248,218,98,.14); color: var(--gold); outline: none; }
.emote-bubble { position: fixed; z-index: 300; transform: translateX(-50%); max-width: 240px; padding: 8px 14px; border-radius: 14px;
  background: #000; color: #fff; border: 1px solid #fff; font-weight: 600; font-size: .95rem; line-height: 1.25; text-align: center; pointer-events: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.7); animation: emote-in .25s ease-out; transition: opacity .45s ease, transform .45s ease; }
/* fumetto nero con la scritta bianca; la punta (un quadratino ruotato con lo stesso bordo) verso il ritratto */
.emote-bubble::after { content: ''; position: absolute; left: 50%; width: 12px; height: 12px; background: #000; border: 1px solid #fff; transform: translateX(-50%) rotate(45deg); }
.emote-bubble--me::after { border-top: 0; border-left: 0; }
.emote-bubble--opp::after { border-bottom: 0; border-right: 0; }
.emote-bubble--me::after { bottom: -7px; }
.emote-bubble--opp::after { top: -7px; }
.emote-bubble.is-leaving { opacity: 0; transform: translateX(-50%) translateY(-6px); }
@keyframes emote-in { from { opacity: 0; transform: translateX(-50%) scale(.85); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
#talk-btn.is-cooling { opacity: .4; cursor: default; } /* pausa tra un messaggio e l'altro */

/* il fumetto del computer parte dal bordo sinistro (non esce dallo schermo), con la punta a sinistra */
.emote-bubble--opp { transform: none; }
.emote-bubble--opp.is-leaving { transform: translateY(-6px); }
.emote-bubble--opp::after { left: 18px; }
.emote-bubble--opp { animation-name: emote-in-left; }
@keyframes emote-in-left { from { opacity: 0; transform: scale(.85); transform-origin: 18px 0; } to { opacity: 1; transform: none; } }

/* bottoni premuti (Done selling, Remove/Sabotage attivi, Lifelink): il loro colore, non il nero delle azioni */
.seat__actions .btn--sell[aria-pressed="true"] { background-color: var(--ok); color: #000; border-color: var(--ok); }
.seat__actions .btn--remove[aria-pressed="true"] { background-color: var(--danger); color: #fff; border-color: var(--danger); }
.seat__actions .btn--lifelink[aria-pressed="true"] { background-color: var(--danger); color: #1a0705; }

/* "Your move!" più in linea col resto: pietra scura, bordino oro da 1 px con una seconda cornice sottile
   all'interno, titolo in Enchanted Land dorato, e un alone dorato che respira piano (niente lampeggio rosso) */
.action-alert {
  background: linear-gradient(rgba(10,8,6,.72), rgba(10,8,6,.86)), #141414 url('/static/lobby/stone.jpg') center / cover;
  border: 1px solid #b8963a; border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,236,170,.12);
  animation: alert-glow 2.4s ease-in-out infinite;
}
.action-alert::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(184,150,58,.35); border-radius: 10px; pointer-events: none; }
.action-alert__title { font-family: 'Enchanted Land', Georgia, serif; font-weight: 400; text-transform: none; letter-spacing: .01em;
  font-size: clamp(30px, 6.5vw, 52px); line-height: 1; background: linear-gradient(180deg, #f8da62 0%, #b8963a 60%, #785f0b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
.action-alert__text { font-size: clamp(15px, 3.4vw, 20px); color: #efe6d2; }
.action-alert__timer { color: var(--gold); }
@keyframes alert-glow {
  0%, 100% { box-shadow: 0 14px 40px rgba(0,0,0,.75), 0 0 0 0 rgba(248,218,98,0), inset 0 1px 0 rgba(255,236,170,.12); }
  50% { box-shadow: 0 14px 40px rgba(0,0,0,.75), 0 0 22px 2px rgba(248,218,98,.28), inset 0 1px 0 rgba(255,236,170,.12); } }
body.has-action-alert .hand { outline: 1px solid #b8963a; outline-offset: 3px; }

/* stesso bordino grigio-bianco in leggero rilievo del bottone Talk: anche sull'ingranaggio e sul cerchio
   dell'INT (che è un po' più grande, così i numeri a due cifre non toccano il bordo) */
:root { --relief-ring: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.55), 0 0 0 1px #5a5a5a; }
#settings-btn { border: 1.5px solid #e6e6e6 !important; box-shadow: var(--relief-ring); }
#settings-btn:hover, #settings-btn[aria-expanded="true"] { border-color: #fff !important; }
.hero-stat.hero-stat--int, .hero-stat.hero-stat--int.is-boosted, .hero-stat.hero-stat--int.is-spent, .hero-tip__stat.hero-tip__stat--int {
  width: calc(3.4em + 7px); height: calc(3.4em + 7px); padding: 0 4px; border: 1.5px solid #e6e6e6; box-shadow: var(--relief-ring); }
@media (orientation: landscape) and (max-height: 500px) {
  .seat-hero .hero-stat.hero-stat--int { width: calc(3em + 6px); height: calc(3em + 6px); padding: 0 3px; }
}
.action-alert__text { white-space: pre-line; } /* "X played Y." su una riga, la richiesta sotto */

/* tua barra: scritta MONSTERS / DEFENCES sopra le carte (non più a sinistra), così la colonna di mostri e
   difese si stringe di circa 50 px e la mano ha più spazio */
@media (min-width: 900px) and (min-height: 501px) {
  .seat__board .defences { position: relative; margin-top: 13px; }
  .seat__board .defences__label { position: absolute; left: 0; top: -14px; flex: none; line-height: 1; white-space: nowrap; }
  .seat__play { grid-template-columns: minmax(0, 1fr) minmax(0, min(250px, 20vw)) minmax(0, min(300px, 22vw)); }
}

/* telefono: testo del registro molto più piccolo */
@media (orientation: landscape) and (max-height: 500px), (max-width: 899px) {
  .log { font-size: .62rem; gap: 2px; padding: 6px 8px; line-height: 1.3; }
  .log-head { justify-content: flex-end; }
}
/* anche il tuo fumetto parte da sinistra, con la punta in basso poco dopo il bordo */
.emote-bubble--me { transform: none; animation-name: emote-in-left; }
.emote-bubble--me.is-leaving { transform: translateY(-6px); }
.emote-bubble--me::after { left: 18px; }
/* il nome del personaggio sta sopra l'anello animato del turno (tuo e del computer, anche sul telefono) */
.seat-hero .seat__name, .seat--opp .seat__name { position: relative; z-index: 8; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) { .seat-hero .seat__name { position: absolute; } }
/* barre della vita: leggerissimo rilievo esterno (1-2 px): ombra sopra, luce sullo spigolo in basso */
.hp__bar, .seat--opp .hp__bar, .hp--hero .hp__bar {
  box-shadow: 0 0 0 1px rgba(0,0,0,.85), 0 -2px 2px 1px rgba(0,0,0,.55), 0 1px 0 1px rgba(255,255,255,.14); /* scuro sopra, chiaro sotto */
}

/* tooltip (al posto di quello grigio del browser): nero, scritta chiara, bordino sottile */
.ui-tip { position: fixed; z-index: 400; max-width: 300px; padding: 7px 11px; border-radius: 8px; pointer-events: none;
  background: #000; color: #eee; border: 1px solid #4a4a4a; box-shadow: 0 8px 24px rgba(0,0,0,.7);
  font-size: .8rem; line-height: 1.4; white-space: pre-line; animation: tip-in .12s ease-out; }
.ui-tip[hidden] { display: none; }
@keyframes tip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.ui-tip__head { display: block; margin-bottom: 2px; color: var(--gold); font-weight: 700; }
.ui-tip .icon { color: #fff; }
/* telefono: il ventaglio delle carte in mano del computer scende di 15 px, così la barra della vita non lo copre */
@media (orientation: landscape) and (max-height: 500px) {
  .opp-zone { margin-top: 15px; }
  #screen-table .seat--opp { z-index: 10; } /* il ventaglio sporge sotto la barra: deve stare sopra al tavolo */
  .seat--opp .seat__row { overflow-x: clip; overflow-y: visible; } /* taglia solo in orizzontale, non il ventaglio sotto */
}

/* scelta del personaggio: 6 eroi per riga (i 6 del gioco base su una riga sola, anche sul telefono);
   contenitore più largo sullo schermo grande */
.lobby { max-width: min(1320px, 100%); }
.characters { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 1.4vw, 16px); }

/* accesso su schermi bassi (telefono in orizzontale): tutto visibile senza scorrere, "Enter the battle" compreso */
@media (max-height: 560px) {
  #screen-login { padding: 8px 16px; min-height: 100dvh; }
  #login-form { padding: 10px 18px; gap: .25rem; width: min(460px, 100%);
    grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
  /* nome da solo sulla sua riga; colore (etichetta + pallini) sulla riga sotto */
  #login-form > .logo-title, #login-form > label[for="username"], #login-form > #username,
  #login-form > button[type="submit"], #login-form > .error, #login-form > .app-version { grid-column: 1 / -1; }
  #login-form .logo--login { width: min(100%, 180px); }
  #login-form > .color-label { grid-column: 1; margin: 6px 0 0; }
  #login-form > .color-pick { grid-column: 2; margin: 6px 0 0; gap: 8px; }
  #login-form > button[type="submit"] { margin-top: 18px; min-height: 40px; }
}
/* numero di versione: in fondo alla card, sotto "Enter the battle", allineato a destra */
.app-version { margin: 0; text-align: right; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* "Enter the battle" in FFF, come NEW GAME / END TURN */
#login-form > button[type="submit"] { font-family: 'FFF', system-ui, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; }
/* lobby: HP e INT sulla stessa riga, sopra il nome; icone bianche e vicine al loro valore */
.character__stats { display: flex; justify-content: center; align-items: center; gap: .9em; white-space: nowrap; color: #fff; letter-spacing: .08em; }
.character__stat { display: inline-flex; align-items: center; gap: .15em; }
.character__stats .icon { color: #fff; margin: 0; vertical-align: 0; }
/* telefono: bordo nero del nome un po' più sottile */
@media (max-width: 899px), (max-height: 560px) {
  .character__name::before { -webkit-text-stroke: 4px #000; }
}
/* telefono: "Choose your character" e Male/Female sulla stessa riga */
@media (max-width: 899px), (max-height: 560px) {
  .lobby__head { display: flex; align-items: center; flex-wrap: wrap; column-gap: 16px; row-gap: 4px; }
  .lobby__head h2 { margin: 0; }
  .lobby__head .gender { margin: 0; }
}
/* telefono in orizzontale: cerchio INT del computer grande uguale al tuo */
@media (orientation: landscape) and (max-height: 500px) {
  #seat-opp .hero-stat.hero-stat--int { font-size: .65rem; width: calc(3em + 6px); height: calc(3em + 6px); padding: 0 3px; }
}
/* costo della carta (tooltip e carta ingrandita): numero in un cerchio dorato se vendibile, argento se no */
.cost-coin { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9em; height: 1.9em; padding: 0 .3em; border-radius: 99px;
  font-family: 'FFF', system-ui, sans-serif; font-weight: 700; font-size: .85em; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0;
  color: #2a2a2a; background: linear-gradient(180deg, #f0f0f0 0%, #b9b9b9 55%, #7d7d7d 100%); border: 1px solid #5c5c5c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 3px rgba(0,0,0,.6); text-shadow: 0 1px 0 rgba(255,255,255,.45); vertical-align: middle; }
.cost-coin.is-sellable { color: #24190a; background: linear-gradient(180deg, #f8da62 0%, #d9a520 55%, #785f0b 100%); border-color: #785f0b; text-shadow: 0 1px 0 rgba(255,240,180,.45); }
.ui-tip__head .cost-coin { margin-left: 8px; font-size: .78rem; }
.card-zoom__cost { display: flex; align-items: center; gap: 10px; }
.card-zoom__cost .cost-coin { font-size: 1.15rem; }
/* telefono in orizzontale: carte giocate a sinistra del tabellone (come su desktop), il tabellone si sposta a destra */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --played-w: 136px; --mkt-w: min(calc(100vw - 230px - var(--played-w)), calc((100dvh - 178px) * 1.845)); }
  .arena { padding-left: calc(max(12px, env(safe-area-inset-left)) + var(--played-w)); }
  .arena > #turn-timer { left: calc(max(12px, env(safe-area-inset-left)) + var(--played-w) + var(--mkt-w) / 2); }
  .arena__table { position: static; }
  .arena__table > .arena__below { position: absolute; z-index: 6; left: max(8px, env(safe-area-inset-left)); top: 4px; height: calc(100% - 8px); align-self: auto; width: calc(var(--played-w) - 8px);
    display: flex; align-items: center; pointer-events: none; }
  .arena__table > .arena__below .in-play { display: grid; grid-template-columns: repeat(3, max-content); gap: 4px; min-height: 0; max-height: 100%;
    overflow-y: auto; align-content: center; pointer-events: auto; scrollbar-width: none; }
  .arena__table > .arena__below .in-play .card { --w: 40px; }
  /* turno e suggerimenti: solo nello spazio a destra del tabellone, così non ci finiscono sopra */
  .seat--me > .seat__turn, body.log-collapsed .seat--me > .seat__turn { width: calc(100vw - var(--played-w) - var(--mkt-w) - 48px); }
  .seat__turn .arena__hint { white-space: normal; }
}
/* fumetti dei messaggi: bordo più sottile (mezzo pixel sugli schermi retina, più tenue sugli altri) */
.emote-bubble, .emote-bubble::after { border-width: .5px; border-color: rgba(255,255,255,.8); }
.emote-bubble--me::after { border-top-width: 0; border-left-width: 0; }
.emote-bubble--opp::after { border-bottom-width: 0; border-right-width: 0; }
/* fine partita: finestra quadrata; l'immagine di chi ha vinto fa da sfondo, scurita verso il nero */
#game-over .panel.game-over__panel { --go-bg: none; box-sizing: border-box; width: min(440px, 92vw, 88dvh); aspect-ratio: 1 / 1; max-height: none; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 10px; padding: 24px 28px;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,.92) 100%), var(--go-bg) center 18% / cover no-repeat, var(--felt-2); }
#game-over .game-over__panel h2 { margin: 0 0 auto; text-shadow: none; filter: drop-shadow(0 2px 6px #000) drop-shadow(0 0 2px #000); font-size: 2.6rem; }
#game-over .game-over__panel .btn { width: 100%; }
#game-over-text { margin: 0 0 8px; }
.game-over__quote { display: block; max-width: 340px; margin: 0 auto; color: #c4c4c4; font-style: italic; font-size: 1.1rem; line-height: 1.4; quotes: '“' '”'; text-shadow: 0 1px 6px #000; }
@media (orientation: landscape) and (max-height: 500px) {
  #game-over .panel.game-over__panel { padding: 14px 20px; gap: 6px; }
  .game-over__quote { font-size: .95rem; }
}
/* registro: niente sfondo nero (su schermi piccoli finiva sopra il tabellone) */
.log { background: transparent; }
/* desktop: il registro si stringe sugli schermi meno larghi, così non tocca mai il tabellone
   (solo schermi alti: i telefoni grandi in orizzontale sono larghi più di 900 px ma usano il layout del telefono) */
@media (min-width: 900px) and (min-height: 501px) {
  .arena { grid-template-columns: minmax(0, 1fr) clamp(240px, 30vw, 460px); }
  body.log-collapsed .arena { grid-template-columns: minmax(0, 1fr) auto; }
  .arena__table > .market-area { max-width: 100%; }
}
/* costo: numero in Enchanted Land, centrato in verticale nel cerchio */
.cost-coin { font-family: 'Enchanted Land', Georgia, serif; font-weight: 400; font-size: 1em; line-height: 1; padding: 0 .3em; }
.ui-tip__head .cost-coin { font-size: 1.1rem; }
.card-zoom__cost .cost-coin { font-size: 1.4rem; }
/* icone Talk e impostazioni: perfettamente centrate nel cerchio (niente padding che le spinge a destra) */
#talk-btn, #settings-btn { padding: 0; display: grid; place-items: center; }
#talk-btn .icon, #settings-btn .icon { margin: 0; width: 60%; height: 60%; }
/* costo: numero più grande, circa 5px di margine dentro il cerchio (dimensione del cerchio invariata) */
.cost-coin { --d: 30px; min-width: var(--d); height: var(--d); padding: 0 5px; font-size: calc(var(--d) * .78); }
.ui-tip__head .cost-coin { --d: 30px; font-size: calc(var(--d) * .78); }
.card-zoom__cost .cost-coin { --d: 42px; font-size: calc(var(--d) * .78); }
/* fine partita: leggera vibrazione quando compare la finestra */
@keyframes game-over-shake {
  0% { transform: scale(.96); opacity: 0; }
  18% { transform: scale(1) translateX(0); opacity: 1; }
  30% { transform: translateX(-6px) rotate(-.6deg); }
  42% { transform: translateX(5px) rotate(.5deg); }
  54% { transform: translateX(-4px) rotate(-.3deg); }
  66% { transform: translateX(3px); }
  78% { transform: translateX(-1px); }
  100% { transform: none; }
}
#game-over:not([hidden]) .game-over__panel { animation: game-over-shake .6s ease-out both; }
@media (prefers-reduced-motion: reduce) { #game-over:not([hidden]) .game-over__panel { animation: none; } }
/* impostazione "Reduce animations": niente animazioni né transizioni CSS (le animazioni GSAP le salta fx.reducedMotion) */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body.reduce-motion .card__zzz span { opacity: 1; } /* mostro addormentato: le Z restano visibili, ferme */
body.reduce-motion .portrait-ring__spark { display: none; } /* niente luce che gira attorno al ritratto */
/* Surrender spento durante il turno dell'avversario */
.btn-surrender:disabled { opacity: .35; cursor: default; pointer-events: none; }
/* barre della vita: stessa altezza per te e per l'avversario in ogni risoluzione */
#seat-opp .hp__bar, .hp--hero .hp__bar, .hp--hero.is-aligned .hp__bar { height: 10px; }
@media (orientation: landscape) and (max-height: 500px) {
  #seat-opp .hp__bar, .hp--hero .hp__bar, .hp--hero.is-aligned .hp__bar { height: 7px; }
}
#seat-opp .seat__name { white-space: nowrap; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  #seat-opp .seat__row { flex-wrap: nowrap; }
  #seat-opp .seat__row > .piles { margin-left: auto; flex-shrink: 0; }
}
/* telefono in orizzontale: la finestra di scelta (bersagli, ordine d'attacco…) sta sempre tutta nello schermo,
   con i bottoni visibili; se le carte non ci stanno, scorrono solo loro */
@media (orientation: landscape) and (max-height: 500px) {
  .overlay { padding: 6px; }
  #attack-order .panel { max-height: calc(100dvh - 12px); padding: 10px 16px 12px; gap: .35rem;
    grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: visible; }
  #attack-order h2 { font-size: 1.35rem; margin: 0; line-height: 1.1; }
  #attack-order-text { font-size: .78rem; line-height: 1.3; margin: 0; }
  .attack-order__cards { min-height: 0; overflow-y: auto; padding: 6px 0 2px; gap: 8px; }
  .attack-order__cards .card { --w: 50px; }
  .attack-order__cards .target-chip { padding: 8px 14px; min-width: 80px; min-height: 70px; }
  .attack-order__actions .btn { min-height: 36px; padding: .45rem 1rem; }
}
/* finestra di scelta: niente titolo (la carta che l'ha aperta si vede già a sinistra), su desktop e telefono */
#attack-order-title { display: none; }
/* conferma acquisto di una carta che non puoi usare: frasi corte, tutto in FFF */
#confirm-buy .panel { position: relative; overflow: visible; }
.confirm-buy, .confirm-buy h2, .confirm-buy p, .confirm-buy .btn { font-family: 'FFF', system-ui, sans-serif; }
.confirm-buy h2 { font-weight: 400; text-transform: uppercase; letter-spacing: .05em; font-size: 1.35rem; margin: 0; color: var(--gold); }
.confirm-buy p { margin: 0; }
.confirm-buy .btn { text-transform: uppercase; letter-spacing: .05em; font-weight: 400; }
/* telefono: solo i primi 10 colori (gli ultimi 2 restano su desktop) — stesso limite di PHONE_COLORS in app.js */
@media (max-width: 899px), (orientation: landscape) and (max-height: 500px) {
  .color-pick .color-dot:nth-child(n+11) { display: none; }
}
/* ===== barra del computer ===== */
/* colonna destra (solo telefono): INT come valore + libro, oppure la barra Berserk; su desktop non si vede */
.opp-side { display: none; }
/* ventaglio delle carte in mano al computer: appeso sotto la sua barra (posizione da placeOppFan in app.js),
   le carte si intravedono tutte senza sporgere troppo */
#seat-opp .opp-zone { transform: translateX(-50%); margin-top: 0; right: auto; }
#seat-opp .opp-zone .opp-hand, #seat-opp .opp-buys { height: 46px; }
#seat-opp .opp-hand__card { transform: translateY(calc(8px - var(--dy))) rotate(var(--rot)); }

@media (orientation: landscape) and (max-height: 500px) {
  /* barra alta circa 32 px: nome, barra della vita e numeri tutti centrati in verticale */
  .seat--opp { padding-top: 0; padding-bottom: 0; }
  #seat-opp .seat__row { min-height: 32px; align-items: center; padding-top: 0; padding-bottom: 0; }
  #seat-opp .seat__who, #seat-opp .seat__namebox { align-self: center; }
  #seat-opp .hero-stat-row--opp .hero-stat--int, #seat-opp .hero-stat-row--opp .hero-stat--berserk { display: none; } /* spostati a destra */
  #seat-opp .hero-stat-row--opp:not(:has(> *:not(.hero-stat--int):not(.hero-stat--berserk))) { display: none; } /* riga vuota: niente spazio */
  /* nome: va a capo dopo circa 210 px invece di allargarsi */
  #seat-opp .seat__namebox { flex: 0 1 auto; max-width: 210px; min-width: 0; }
  #seat-opp .seat__name { display: block; white-space: normal; max-width: 210px; width: max-content; line-height: 1.05; }
  #seat-opp .hp { align-self: center; }
  #seat-opp .hp__bar { height: 7px; }
  /* colonna destra: INT (valore + libro) poi Deck e Discard */
  .opp-side { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; flex: 0 0 auto; }
  .opp-side--int { color: #fff; font-size: .8rem; font-variant-numeric: tabular-nums; }
  .opp-side--int .icon { color: #fff; width: 1.3em; height: 1.3em; }
  .opp-side--berserk { position: relative; width: 56px; height: 9px; border-radius: 99px; overflow: hidden; cursor: help;
    background: #1a0303; box-shadow: 0 0 0 1px rgba(255,90,40,.6), 0 0 8px rgba(255,60,0,.55); }
  .opp-side--berserk .opp-side__fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit;
    background: linear-gradient(90deg, #5c0000, #ff2a00, #ffb000, #ff2a00, #5c0000); background-size: 200% 100%; animation: opp-berserk-flow 1.1s linear infinite; }
  #seat-opp .piles { align-items: center; }
  /* ventaglio: più piccolo, si vede la parte alta delle carte sotto la barra */
  #seat-opp .opp-zone .opp-hand, #seat-opp .opp-buys { height: 32px; }
  #seat-opp .opp-hand__card { transform: translateY(calc(2px - var(--dy))) rotate(var(--rot)); }
}
@keyframes opp-berserk-flow { from { background-position: 0 0; } to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .opp-side--berserk .opp-side__fill { animation: none; } }
.hero-tip, #hero-tip { z-index: 320; } /* sopra i fumetti dei messaggi */
/* ===== barra del giocatore ===== */
/* bottone del registro: aperto → freccia a destra (chiude); chiuso → candelabro acceso (riapre) */
.log-toggle__candle { display: none; width: 20px; height: 20px; }
body.log-collapsed .log-toggle__arrow { display: none; }
body.log-collapsed .log-toggle__candle { display: inline-block; }
body.log-collapsed .log-toggle svg { transform: none; }

/* NEW GAME / END TURN: stessa misura del bottone, scritta un po' più grande (meno spazio interno) */
@media (min-width: 900px) and (min-height: 501px) {
  .seat__actions #end-turn, .seat__actions #new-game { height: 44px; min-height: 0; padding-top: 0; padding-bottom: 0; font-size: 1.3rem; line-height: 1; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .seat__actions #end-turn, .seat__actions #new-game { height: 35px; min-height: 0; padding-top: 0; padding-bottom: 0; font-size: 1.12rem; line-height: 1; }
}

/* ritratto: grande quanto quello del computer, nell'angolo in basso a sinistra (si vede tutto l'anello animato);
   il nome sopra il ritratto, INT / Berserk / veleno accanto */
@media (min-width: 900px) and (min-height: 501px) {
  .seat--me { --hero: 112px; }
  .portrait--hero, .portrait-ring--hero { width: 112px; height: 112px; left: 6px; top: auto; bottom: 6px; font-size: 3rem; }
  .seat-hero .seat__name, .seat-hero:has(.hero-stat--int) .seat__name, .seat-hero:has(.poison-tokens) .seat__name,
  .seat-hero:has(.hero-stat--berserk.is-on) .seat__name { left: 10px; bottom: 124px; font-size: 2rem; }
  .seat-hero .hero-stat-row { left: 124px; bottom: 10px; }
  .seat-hero .hero-stat-row .hero-stat--int { transform: none; margin-right: 0; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .seat--me { --hero: 48px; padding-left: max(100px, calc(env(safe-area-inset-left) + 92px)); }
  .seat-hero { width: 96px; }
  .portrait--hero, .portrait-ring--hero { width: 48px; height: 48px; left: 4px; top: auto; bottom: 2px; font-size: 1.5rem; }
  .seat-hero .seat__name, .seat-hero:has(.hero-stat--int) .seat__name, .seat-hero:has(.poison-tokens) .seat__name,
  .seat-hero:has(.hero-stat--berserk.is-on) .seat__name { left: 6px; bottom: 54px; font-size: 1.1rem; }
  .seat-hero .hero-stat-row { left: 56px; bottom: 6px; }
  /* niente colonna di difese e mostri: la mano prende quello spazio, difese e mostri le stanno subito accanto */
  .seat__play { display: flex; align-items: center; gap: 10px; }
  .seat__play > .hand-wrap { flex: 1 1 auto; min-width: 0; }
  .seat__play > .seat__board-wrap { flex: 0 1 auto; max-width: 40%; }
  .seat__play > .seat__actions { flex: 0 0 min(190px, 24vw); }
}
/* conferma d'acquisto: la carta 45 px più a destra, sovrapposta alla finestra */
#confirm-buy .panel__source { left: -25px; }
/* i tuoi mostri: grandi, sopra il mercato, appoggiati sul bordo della tua barra (posizione da placeMyMonsters) */
.my-monster-row { position: fixed; z-index: 58; transform: translateX(-50%); display: flex; justify-content: center; pointer-events: none;
  transition: opacity .25s ease; }
.my-monster-row[hidden] { display: none; }
.my-monster-row .monsters { display: flex; flex-wrap: nowrap; gap: 10px; align-items: flex-end; margin: 0; padding: 0; background: none; border: 0; }
.my-monster-row .defences__label { display: none; }
.my-monster-row .card { --w: 120px; pointer-events: auto; box-shadow: 0 14px 30px rgba(0,0,0,.85), 0 0 0 2px rgba(0,0,0,.6); }
@media (orientation: landscape) and (max-height: 500px) {
  .my-monster-row .card { --w: 66px; }
  .my-monster-row .monsters { gap: 6px; }
}
/* devi usare il mercato (Sabotage, carte da eliminare o da prendere): quasi invisibili e non cliccabili */
body.market-active .my-monster-row { opacity: .12; }
body.market-active .my-monster-row .card { pointer-events: none; }
/* impostazioni: accanto al bottone del registro, stesso stile (niente cornice bianca) */
#settings-btn, #settings-btn:hover, #settings-btn[aria-expanded="true"] { border: 0 !important; box-shadow: none; background-color: rgba(0,0,0,.3); }
#settings-btn .icon { width: 20px; height: 20px; }
.log-head #settings-btn { margin-left: 0; }
/* messaggi rapidi: il bottone sta sul tuo ritratto, nell'angolo in alto a destra del quadrato che lo contiene */
@media (min-width: 900px) and (min-height: 501px) {
  .seat__actions #talk-btn { position: fixed; z-index: 30; margin: 0; left: calc(6px + 112px - 15px); bottom: calc(6px + 112px - 15px); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .seat__actions #talk-btn { position: fixed; z-index: 30; margin: 0; left: calc(max(0px, env(safe-area-inset-left)) + 4px + 48px - 13px); bottom: calc(2px + 48px - 13px); }
}
.seat__actions .btn-surrender + #talk-btn, .seat__actions #talk-btn { margin-left: 0; } /* (fixed sul ritratto: niente spazio a sinistra) */
/* telefono: anche il tuo INT è un valore + libro (niente cerchio) accanto a Deck/Discard; in Berserk la barra di fuoco */
@media (orientation: landscape) and (max-height: 500px) {
  .seat-hero .hero-stat-row .hero-stat--int, .seat-hero .hero-stat-row .hero-stat--berserk { display: none; }
  #seat-me .piles { align-items: center; }
}