/* =========================================================
   Barbacane — Foglio di stile
   Palette: terracotta calda, oro vivace, rosso sangue, verde bosco
   ========================================================= */

:root {
  --bg-dark:      #1a0c00;
  --bg-medium:    #2c1800;
  --bg-light:     #3e2408;
  --bg-card:      #281200;
  --gold:         #fbc402;
  --gold-light:   #ffd042;
  --red:          #b03030;
  --red-light:    #e04040;
  --green:        #2d6b3a;
  --green-light:  #4a9a58;
  --blue:         #2a4a8a;
  --blue-light:   #4a7aaa;
  --text:         #f0e0b8;
  --text-dim:     #d1a94a;
  --border:       #6a3010;
  --border-gold:  #a06820;
  --brown:        #4a2008;
  --brown-light:  #c9a227;
  --orange:       #e08020;

  /* Palette della grafica delle carte (card_factory/assets/card.html): usata
     dove la UI deve essere coerente con le carte stampate (es. catalogo) */
  --card-brown: #4a2c15;
  --card-gold:  #b98a3e;
  --card-cream: #f4dea0;
  /* Colori delle specie (come i bollini del client mobile) */
  --elfo:  #7aaa55;
  --nano:  #b85a3a;
  --maga:  #9966cc;
  --umano: #5599cc;
  /* Gemma del costo (un ottagono), come sulle carte stampate (card_factory/assets/esagono.png) */
  --hex-mana:   radial-gradient(closest-side, #fe8c16 0%, #fe9c1c 55%, #fed222 86%, #fee822 100%);
  --hex-maga:   radial-gradient(closest-side, #8fcde4 0%, #a3d7ed 60%, #d4eef8 100%);
  --hex-act:    radial-gradient(closest-side, #ec5a24 0%, #f47e44 60%, #fbc6a2 100%);  /* rombo delle Azioni */
  --hex-border: #5a3518;
  --hex-ink:    #5a2d06;
  --card-ink:   #171009;   /* fondo su cui sono renderizzati i PNG delle carte */

  /* Regioni dipinte come il campo del client mobile (PALETTE in mobile/board.js):
     centro e bordo della sfumatura; le mie più accese, quelle degli avversari più cupe */
  --rg-vanguard:     #a33a22;  --rg-vanguard-edge:     #742316;
  --rg-bastion:      #c3a279;  --rg-bastion-edge:      #937350;
  --rg-village:      #3f6339;  --rg-village-edge:      #2a462a;
  --rg-opp-vanguard: #64221a;  --rg-opp-vanguard-edge: #451610;
  --rg-opp-bastion:  #6a5545;  --rg-opp-bastion-edge:  #4c3b2f;
  --rg-opp-village:  #2e442c;  --rg-opp-village-edge:  #1e2f1e;
  /* La grana della pittura (filtro ba-paint di board.js), in due tessere:
     macchie scure larghe e puntini chiari fitti, appena percettibili */
  --rg-blots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.04 0 0 0 0 0 0 0 0 0.8 -0.34'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23b)'/%3E%3C/svg%3E");
  --rg-specks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.92 0 0 0 0 0.78 0 0 0 0.16 -0.07'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Colori dei giocatori nella cronaca e nel riepilogo, per posto al tavolo */
  --seat-0: #fbc402;
  --seat-1: #7fb8e8;
  --seat-2: #8fd49b;
  --seat-3: #ec9a8c;

  --card-w: 90px;
  --card-h: 130px;
  --card-w-sm: 70px;
  --card-h-sm: 100px;
  --card-w-hand: 99px;
  --card-h-hand: 143px;
  /* Carte del mio campo: grandi come in mano, salvo sugli schermi bassi */
  --card-w-field: var(--card-w-hand);
  --card-h-field: var(--card-h-hand);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg-dark);
  color: var(--text);
  font-family: 'Caudex', Georgia, serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Sfondo su layer fisso: background-attachment:fixed non funziona su iOS Safari
   e lascerebbe lo sfondo troncato in basso su schermi touch. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-dark) url('/assets/background.jpg') center center / cover no-repeat;
}

/* ==================== SCHERMATE ==================== */

.screen { display: none; }
.screen.active { display: block; }

/* ==================== SCINTILLE DI FORGIA ==================== */

#sparks-canvas {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ==================== MUSICA ==================== */

.music-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 400;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  background: var(--bg-medium);
  color: var(--gold-light);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
}
.music-toggle:hover { opacity: 1; transform: scale(1.08); }
.music-toggle.muted { color: var(--brown-light); }
.music-toggle[hidden] { display: none; }

/* In partita il pulsante si inserisce nella barra dell'header, a destra di "Abbandona" */
.music-toggle.in-header {
  position: static;
  z-index: auto;
  width: 28px;
  height: 28px;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* Nel catalogo si inserisce nella barra del titolo, speculare al pulsante "Indietro" */
.music-toggle.in-catalog-header {
  position: absolute;
  top: 50%;
  right: 1.2rem;
  left: auto;
  transform: translateY(-50%);
  z-index: auto;
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
  opacity: 0.85;
}
.music-toggle.in-catalog-header:hover { transform: translateY(-50%) scale(1.08); }

/* Con la cronaca aperta si inserisce nella sua intestazione, accanto alla ✕ */
.music-toggle.in-chronicle {
  position: static;
  z-index: auto;
  width: 28px;
  height: 28px;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* ==================== LOBBY ==================== */

#screen-lobby,
#screen-waiting {
  position: relative;
  overflow: hidden;
}


.lobby-container {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 2rem 6vh;
  gap: 1.5rem;
}

.logo-area { text-align: center; }
.logo { width: min(80vw, 400px, 38vh); display: block; margin: 0 auto; }

/* ==================== SPLASH ==================== */

#screen-splash { position: relative; overflow: hidden; }

.splash-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 2rem;
  cursor: pointer;
}

.splash-logo {
  max-width: 520px;
  width: 84vw;
  display: block;
  /* Il transform gestisce solo il volo verso la lobby; il filter dà il bagliore al passaggio del mouse */
  transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.25s ease;
  will-change: transform;
  filter: drop-shadow(0 0 0 transparent);
}
.splash-logo:hover {
  filter: drop-shadow(0 0 26px rgba(251, 196, 2, 0.55));
}

.splash-title-fallback { display: none; }
.splash-title-fallback.show { display: block; }

/* Durante il volo lo splash è un overlay fisso: non allunga la pagina, così la
   misura della posizione finale del logo nella lobby resta corretta. */
#screen-splash.splash-flying {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

/* Il logo della lobby resta nascosto (ma impaginato) finché quello volante non atterra */
.lobby-container.logo-hidden .logo-area { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .splash-logo { transition: none !important; }
}

/* Comparsa del resto della lobby: parte mentre il logo è ancora in volo */
@keyframes lobby-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lobby-container.reveal .home-modes  { animation: lobby-reveal 0.5s ease both 0.34s; }

/* Partita in corso salvata nel browser: prima voce del menu (.home-mode),
   con cornice d'oro e fondo giallo trasparente. I selettori doppi scavalcano
   le regole di .menu-frame, che stanno in fondo al file. */
.home-resume.menu-frame {
  --frame-img: var(--frame-hover);
  --frame-fill: rgba(251, 196, 2, 0.12);
}
button.home-resume.menu-frame:hover { --frame-fill: rgba(251, 196, 2, 0.2); }
.home-resume .home-mode-title { color: var(--gold-light); }

/* ==================== HOME ==================== */

/* Le tre voci (Gioca, Tutorial, Catalogo): banner orizzontali uno sotto
   l'altro, con il titolo a sinistra e un personaggio a destra che poggia sul
   bordo inferiore */
.home-modes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: min(100%, 620px);
  /* Altezza dei banner: segue quella della finestra, così 3 o 4 voci più il
     logo stanno nello schermo. Le figure si scalano con lo spazio verticale
     utile (altezza - 44px: contenuto più il margine sotto), che a 172px vale
     256 unità di --art-u = 0.5px, la scala di riferimento. */
  --mode-h: clamp(124px, 16.5vh, 172px);
  --art-u: calc((var(--mode-h) - 44px) / 256);
}

.home-mode {
  width: 100%;
  height: var(--mode-h);
  display: flex;
  align-items: stretch;
  padding: 0;
  font-family: inherit;
}

/* Titolo e descrizione, a sinistra */
.home-mode-text {
  flex: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-left: 1.6rem;
  text-align: left;
}
.home-mode-title {
  color: var(--card-cream);
  font-size: 1.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.home-mode-desc {
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.4;
}

/* Illustrazione: le figure sono ritagliate sul contenuto in assets/home/ e
   vengono tutte dalla stessa tela delle carte, dove le teste hanno già misure
   coerenti: si scalano quindi con lo stesso fattore (altezza = altezza del
   PNG × --art-u), non alla stessa altezza. Orfeo è ridotto del 10%
   perché l'elmo è più grande di una testa. Poggiano sul bordo visibile della
   cornice (margine negativo: il contenuto può invadere l'area del
   border-image) e sono centrate sul busto, cioè sul punto medio dei pixel
   della riga più bassa della figura: il translateX è quello scarto, in % della
   larghezza. */
.home-mode-art {
  flex: 0 0 210px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* fino al tratto dorato (14/30 del bordo oltre l'area del contenuto): senza
     questo restano pixel vuoti sotto la figura */
  margin-bottom: calc(var(--frame-size, 28px) * -14 / 30 + 1px);
  overflow: hidden;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.home-mode:hover .home-mode-art { opacity: 1; }

.home-mode-art img { display: block; flex: 0 0 auto; }
.art-patrizio { height: calc(269 * var(--art-u)); transform: translate(-10.2%, calc(20 * var(--art-u))); }  /* abbassato: le orecchie toccherebbero il bordo superiore */
.art-faust    { height: calc(230 * var(--art-u)); transform: translateX(0.6%); }
.art-orfeo    { height: calc(295 * var(--art-u) * 0.9); transform: translateX(-13.1%); }
/* Evelyn (Tutorial): capelli e vento escono dal riquadro dell'illustrazione
   (overflow visibile, sotto il testo) per non essere tagliati. */
#btn-tutorial .home-mode-art { overflow: visible; min-width: 0; }  /* min-width: senza, il riquadro si allargherebbe alla figura */
#btn-tutorial .home-mode-text { position: relative; z-index: 1; }
.art-evelyn { height: calc(219 * var(--art-u)); transform: translateX(-0.4%); }
/* Riprendi: la figura è eterea, tinta d'oro tenue e semitrasparente come il banner */
.home-resume .home-mode-art img {
  filter: grayscale(1) contrast(0.5) brightness(1.35) sepia(0.6) hue-rotate(12deg) saturate(1.6)
          drop-shadow(0 0 6px rgba(251, 196, 2, 0.4));
  opacity: 0.55;
}

/* ==================== MULTIGIOCATORE ==================== */

#screen-multiplayer.active {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Giocatore singolo e Multigiocatore: l'intestazione resta in alto, le scelte
   si centrano in verticale nello spazio che resta (margini automatici). Il
   padding in basso compensa l'altezza dell'intestazione, così il blocco
   risulta centrato rispetto allo schermo. */
#screen-multiplayer .lobby-panels { margin: auto; padding: 0 1.2rem; }

#screen-multiplayer.active,
#screen-bot-difficulty.active { padding-bottom: 4rem; }

.game-title {
  font-size: 3.5rem;
  color: var(--gold-light);
  text-shadow: 0 0 20px rgba(200, 168, 75, 0.5);
  letter-spacing: 0.2em;
  display: none;
}
.game-title.show { display: block; }

.game-subtitle {
  color: var(--text-dim);
  font-style: italic;
  margin-top: 0.3rem;
}

.lobby-panels {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.panel {
  --frame-size: 34px;
  padding: 0.6rem 0.6rem 0.5rem;
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.panel h2 {
  color: var(--card-cream);
  font-size: 1.7rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  text-align: center;
}
.panel label { font-size: 1rem; }
.panel input { padding: 0.65rem 0.85rem; font-size: 1.1rem; }
.panel .btn { padding: 0.8rem 1rem; font-size: 1.1rem; }

label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

input[type="text"],
input[type="number"] {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 0.5rem 0.7rem;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:hover {
  border-color: var(--border-gold);
  box-shadow: 0 0 10px rgba(251, 196, 2, 0.15);
}

input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(251, 196, 2, 0.3);
}

/* ==================== SALA D'ATTESA ==================== */

#screen-waiting.active {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 4rem;
}
#screen-waiting [hidden] { display: none !important; }

/* Scheda centrale (cornice a bastione: classe .menu-frame) */
.waiting-container {
  --frame-size: 36px;
  position: relative;
  z-index: 1;
  padding: 0.2rem 0.4rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  width: min(470px, calc(100% - 2rem));
  margin: auto;
}

/* Codice in chiaro, con accanto «Invita» */
.wait-code-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  height: 3rem;
}
.wait-code {
  flex: 1;
  text-align: center;
}
#lobby-code-text {
  color: var(--card-cream);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
  user-select: all;
}
.btn-invite {
  align-self: stretch;
  padding: 0 1.5rem;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

/* I quattro posti: esagono col numero nel colore del giocatore */
.wait-seats {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
}
.wait-seat {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  height: 3.1rem;
  padding: 0 0.55rem 0 0.6rem;
  background: rgba(26, 12, 0, 0.55);
  border: 1px solid var(--border);
  border-left: 3px solid var(--seat-color);
  border-radius: 4px;
}
.wait-seat.seat-enter { animation: seat-in 0.35s ease both; }
@keyframes seat-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

.seat-hex {
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  position: relative;
  isolation: isolate;
  flex: none;
  width: 28px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: var(--hex);
  background: var(--hex-border);
  color: var(--card-cream);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  font-weight: 800;
  font-size: 0.95rem;
  padding-top: 1px;
}
.seat-hex::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  clip-path: var(--hex);
  background: var(--seat-color);
}

.seat-name {
  flex: 1;
  min-width: 0;
  color: var(--card-cream);
  font-size: 1.08rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seat-tag {
  flex: none;
  padding: 0.12rem 0.45rem;
  border: 1px solid rgba(251, 196, 2, 0.55);
  border-radius: 3px;
  color: var(--gold-light);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.wait-seat .seat-tag { border-color: var(--seat-color); color: var(--seat-color); }

.seat-tools {
  display: flex;
  gap: 0.25rem;
  opacity: 0.45;
  transition: opacity 0.2s;
}
.wait-seat:hover .seat-tools,
.seat-tools:focus-within { opacity: 1; }
.seat-btn {
  background: rgba(26, 12, 0, 0.6);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  width: 1.75rem;
  height: 1.75rem;
  cursor: pointer;
  font-size: 0.75rem;
  font-family: inherit;
}
.seat-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-light); }
.seat-btn:disabled { opacity: 0.3; cursor: default; }

/* Posto libero: esagono vuoto e filetto sottile, senza barra colorata */
.wait-seat.empty {
  background: none;
  border: 1px solid rgba(160, 104, 32, 0.35);
}
.wait-seat.empty .seat-hex { background: rgba(160, 104, 32, 0.6); color: rgba(209, 169, 74, 0.7); }
.wait-seat.empty .seat-hex::before { background: var(--bg-dark); }
.wait-seat.empty .seat-name { color: var(--text-dim); font-style: italic; opacity: 0.7; }
.seat-add {
  flex: none;
  padding: 0.35rem 0.8rem;
  background: transparent;
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  color: var(--gold-light);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.seat-add:hover {
  background: rgba(251, 196, 2, 0.12);
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(251, 196, 2, 0.25);
}

/* Difficoltà dei Bot: etichetta e scelta centrate sotto i posti */
.wait-botdiff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.wait-botdiff-label {
  color: var(--text-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.wait-diff {
  display: inline-flex;
  border: 1px solid var(--border-gold);
  border-radius: 5px;
  overflow: hidden;
}
.wait-diff-btn {
  padding: 0.4rem 1.1rem;
  background: rgba(26, 12, 0, 0.5);
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.wait-diff-btn + .wait-diff-btn { border-left: 1px solid var(--border); }
.wait-diff-btn:hover:not(.on) { background: rgba(251, 196, 2, 0.1); color: var(--gold-light); }
.wait-diff-btn.on { background: var(--gold); color: var(--bg-dark); font-weight: 700; }

.wait-start {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.status-msg { color: var(--text-dim); font-size: 0.85rem; min-height: 1.2rem; text-align: center; }

/* ==================== PULSANTI ==================== */

.btn {
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}

.btn:hover { filter: brightness(1.15); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Nei menu (non in partita) i pulsanti si accendono anche con un bagliore */
#screen-splash .btn:hover,
#screen-lobby .btn:hover,
#screen-waiting .btn:hover,
#screen-gameover .btn:hover,
#screen-catalog .btn:hover {
  box-shadow: 0 0 16px rgba(251, 196, 2, 0.35);
}

.btn-primary   { background: var(--gold);        color: var(--bg-dark); font-weight: bold; }
.btn-secondary { background: var(--bg-light);     color: var(--text);   border: 1px solid var(--border); }
.btn-danger    { background: var(--red);           color: #fff; }
.btn-warning   { background: #8a5a20;              color: #fff; }
.btn-small     { padding: 0.3rem 0.6rem; font-size: 0.8rem; }

.btn-abandon {
  background: transparent;
  border: 1px solid rgba(176, 48, 48, 0.6);
  color: #e05050;
}
.btn-abandon:hover { background: rgba(176, 48, 48, 0.2); filter: none; }

.btn-chronicle {
  background: transparent;
  border: 1px solid var(--border-gold);
  color: var(--gold-light);
}
.btn-chronicle:hover { background: rgba(251, 196, 2, 0.12); filter: none; }

/* ==================== HEADER GIOCO ==================== */

#game-header {
  background: rgba(50, 22, 4, 0.88);
  border-bottom: 1px solid rgba(160, 104, 32, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.4rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left, .header-right {
  display: flex;
  gap: 1.3rem;
  align-items: center;
  font-size: 1.05rem;
  color: var(--text);
}
#game-header .btn-small { padding: 0.4rem 0.9rem; font-size: 0.98rem; }

/* Turno e mazzo: le «pillole» dell'intestazione mobile (.tb-pill) */
.hdr-pill {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  background: #1a0d03;
  border: 1px solid #6e3c15;
  border-radius: 4px;
  font-weight: 700;
  white-space: nowrap;
}
/* Il mazzo (e le carte in mano degli avversari): una carta coperta in piccolo,
   come .tb-deck-ico del mobile */
.deck-ico {
  display: inline-block;
  flex: 0 0 auto;
  width: 11px;
  height: 16px;
  background: #6b1515;
  border: 1px solid var(--card-gold);
  border-radius: 2px;
}

.header-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.35rem;
  color: var(--gold-light);
  font-weight: bold;
  pointer-events: none;
}

.timer {
  background: var(--red);
  color: #fff;
  padding: 0.2rem 0.7rem;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1.15rem;
}

.timer.warning { background: var(--red-light); animation: pulse 1s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ==================== TAVOLO DI GIOCO ==================== */

#screen-game.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#game-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

/* Giocatore di fronte (2p: unico avversario; 4p: across player) */
#top-opponents {
  flex-shrink: 0;
  padding: 4px 8px;
}
#top-opponents:empty { display: none; padding: 0; border: none; }

/* ==================== LAYOUT TRE COLONNE ==================== */

#side-layout {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}

#center-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ==================== STRIP LATERALI ==================== */

#left-strip,
#right-strip {
  width: 172px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
  padding: 4px;
}

#left-strip.hidden, #right-strip.hidden { display: none; }

/* ==================== AVVERSARI: 4 TASSELLI RIASSUNTIVI ====================
   Come le Regioni dei vicini sul campo mobile: tasselli dipinti coi colori più
   cupi, gli stessi simboli e il nome sopra, senza pannello. In cima una riga
   specchiata (B.D. | Avanscoperta | Villaggio | B.S.); nelle strip laterali
   una colonna col Bastione adiacente al mio campo in fondo. */

.opponent-field {
  padding: 2px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.opponent-field.opp-column {
  flex: 1;
  min-height: 0;
}

/* Intestazione come le etichette degli avversari sul mobile (.opp-label):
   nome | Vite | carte in mano | effetti attivi */
.opp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 4px;
  text-shadow: 0 1px 3px rgba(10, 5, 0, 0.9);
}
/* Colonne laterali: il nome su una riga, sotto le Vite e a destra le carte in mano */
.opp-column .opp-head { gap: 2px 10px; }
.opp-column .opp-name,
.opp-column .opp-active-effects { flex: 0 0 100%; }

.opp-name {
  font-weight: bold;
  font-size: 1.05rem;
  color: var(--text);
  /* Contorno marrone: si legge sullo sfondo */
  text-shadow:
    -1px -1px 0 #3a1f08, 1px -1px 0 #3a1f08, -1px 1px 0 #3a1f08, 1px 1px 0 #3a1f08,
    0 -1px 0 #3a1f08, 0 1px 0 #3a1f08, -1px 0 0 #3a1f08, 1px 0 0 #3a1f08;
}
.opp-column .opp-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Di turno: nome d'oro */
.opponent-field.active-player .opp-name { color: var(--gold-light); }
.opponent-field.damaged .opp-name { animation: name-hit 0.6s; }
@keyframes name-hit {
  30% { color: var(--red-light); transform: translateX(-3px); }
  60% { color: var(--red-light); transform: translateX(3px); }
}
.opp-lives { display: inline-flex; align-items: center; gap: 3px; }
.opp-lives svg {
  width: 12px; height: 12px; fill: var(--red-light);
  overflow: visible; stroke: #3a1f08; stroke-width: 5; stroke-linejoin: round; paint-order: stroke;
}
.opp-lives b { color: var(--red-light); font-size: 0.85em; margin-left: 2px; }
.opp-out { font-size: 0.85rem; font-style: italic; color: var(--text-dim); }
.opp-hand-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}
.opp-hand-count .deck-ico { width: 9px; height: 13px; }
.opp-hand-count { margin-left: auto; }

/* Effetti attivi: ✧ e il nome, nell'oro di quelli del mobile (.opp-fx) */
.opp-active-effects {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.opp-active-badge {
  font-size: 0.78rem;
  color: var(--gold-light);
  cursor: default;
  white-space: nowrap;
}

.opp-tiles {
  display: grid;
  gap: 6px;
}
.opp-row .opp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opp-column .opp-tiles {
  flex: 1;
  min-height: 0;
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

/* Il tassello è dipinto come le Regioni (vedi «Regioni dipinte» più sotto) */
.opp-tile {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 6px 5px;  /* senza bordo (--rg-bw: 0): overflow taglierebbe il contorno che ci cade sopra */
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s, opacity 0.2s;
}
/* Il contorno è quello frastagliato della pittura (--rg-line, «Regioni dipinte») */
.opp-tile:hover {
  --rg-line: rgba(255, 214, 120, 0.85);
  box-shadow: 0 0 10px rgba(255, 214, 120, 0.35);
}
/* Bastione esposto al mio campo: il contorno arancio dei bersagli del mobile */
.opp-tile.attack-target { --rg-line: rgba(255, 150, 70, 0.95); --rg-line-w: 1.6px; }
/* Bastione che non posso attaccare */
.opp-tile.nonadj { opacity: 0.6; }
.opp-tile.nonadj:hover { opacity: 1; }

.opp-tile-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2px;
  pointer-events: none;
}
/* Nome della Regione come i titoli del campo mobile (.ov-title) */
.opp-tile-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(20, 10, 2, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.opp-column .opp-tile-label { letter-spacing: 0.04em; }
.opp-tile-sub {
  padding: 0 0.2em;
  font-size: 0.72rem;
  color: var(--gold-light);
  text-shadow: 0 1px 2px rgba(20, 10, 2, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Riassunto di una Regione: simboli con l'etichetta sotto, pallini delle Specie */
.rg-summary {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
}
.rg-stat-row {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  align-items: flex-end;
}
.rg-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.opp-column .rg-stat .ov-lbl { font-size: 0.6rem; letter-spacing: 0.02em; }

/* ── Simboli del campo mobile (.ov-* di mobile.css), qui in linea col testo:
   rombi delle Caratteristiche come sulle carte, Muri, torri delle Costruzioni,
   pallini delle Specie ── */
.ov-dia, .ov-wall, .ov-tower {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  line-height: 1;
  color: var(--card-cream);
}
.ov-dia { width: 26px; height: 26px; isolation: isolate; }
.ov-dia::before {
  content: '';
  position: absolute;
  inset: 15%;
  z-index: -1;
  background: var(--card-brown);
  border: 1.5px solid var(--card-gold);
  border-radius: 2px;
  transform: rotate(45deg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.ov-dia b { font-size: 0.85rem; font-weight: 700; padding-top: 0.08em; }
.ov-dia.zero b, .ov-wall.zero b { color: #a8875a; }
.ov-wall { width: 28px; height: 22px; }
.ov-tower { width: 24px; height: 27px; }
.ov-wall svg, .ov-tower svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.ov-wall svg { fill: #3a2414; stroke: #d0a24a; stroke-width: 1.5; }
.ov-tower svg { fill: #3a2414; stroke: #d0a24a; stroke-width: 1.3; stroke-linejoin: round; }
.ov-tower.done svg { fill: #e7b94b; stroke: #9a6f22; }
.ov-wall b, .ov-tower b { position: relative; font-weight: 700; text-shadow: 0 1px 2px rgba(20, 10, 2, 0.8); }
.ov-wall b { font-size: 0.8rem; padding-top: 0.08em; }
.ov-tower b { top: 13%; font-size: 0.75rem; }
.ov-tower.done b { color: #3a2414; text-shadow: none; }
.ov-lbl {
  font-size: 0.66rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(20, 10, 2, 0.8);
  white-space: nowrap;
}
.ov-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px;
  min-height: 10px;
}
/* Pallino da 8px con un filo scuro attorno, disegnato con un gradiente
   circolare: con lo zoom degli avversari (schermi non alti) il riquadro può
   venire arrotondato a 7×8 px, e un border-radius diventerebbe ovale */
.ov-dots i {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle closest-side, var(--sp) calc(100% - 1.4px),
    rgba(20, 10, 2, 0.35) calc(100% - 1px), rgba(20, 10, 2, 0.35) calc(100% - 0.4px), transparent 100%);
}
.ov-dots i.sp-elfo  { --sp: var(--elfo); }
.ov-dots i.sp-nano  { --sp: var(--nano); }
.ov-dots i.sp-maga  { --sp: var(--maga); }
.ov-dots i.sp-umano { --sp: var(--umano); }
.ov-dots em { font-style: normal; font-size: 0.68rem; color: var(--text); margin-left: 0.2em; }

/* Campo di un avversario carta per carta (Renderer.showOpponentField) */
#modal-box:has(.oppf) { max-width: min(820px, 92vw); }
.oppf {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-height: 64vh;
  overflow-y: auto;
  padding-right: 0.2rem;
}
/* Padding e distanza lasciano posto a ciò che sporge dalle carte: il bordo d'oro
   e il tondo dell'Orda (6px in alto a destra). .oppf scorre e taglierebbe i
   bordi; ogni carta è un contesto a sé (container-type), quindi la vicina, che
   viene dopo, coprirebbe il tondo */
.oppf-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 12px 12px;
}
.oppf-cards .card {
  width: var(--card-w-field);
  min-width: var(--card-w-field);
  height: var(--card-h-field);
}
.oppf-empty { font-size: 0.8rem; color: var(--text-dim); }

/* ==================== LANE SEPARATOR ==================== */


/* Spazio tavolo centrale — spinge il campo del giocatore in basso */
#table-surface {
  flex: 1;
  min-height: 0;  /* è il primo spazio a sparire quando il campo si riempie */
}

/* Barra log — appena sopra il campo del giocatore. Alta sempre 3 righe
   (CHRONICLE_TICKER_ENTRIES), così non cambia la misura del tavolo; se
   l'avversario in cima cresce si accorcia fino a una riga, la più recente
   (fitCards in renderer.js conta su questo margine) */
#center-bar {
  --log-line: calc(0.92rem * 1.3);
  display: flex;
  align-items: flex-end;
  padding: 4px 1rem;
  background: transparent;
  overflow: hidden;
  box-sizing: border-box;
  flex: 0 1 calc(3 * var(--log-line) + 2px + 8px);
  min-height: calc(var(--log-line) + 8px);
}
/* Durante la misura di fitCards la barra resta alta 3 righe */
#center-column.fitting #center-bar { flex-shrink: 0; }

#battle-log {
  font-size: 0.92rem;
  color: var(--brown-light);
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1px;
  overflow: hidden;
  cursor: pointer;
}

.battle-log-entry {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  color: var(--text);
}

.battle-log-entry:not(:first-child) {
  opacity: 0.5;
}

.battle-log-entry.chr-battle { color: #f0b8a0; }
.battle-log-entry.fresh:first-child { animation: chr-fresh 0.9s ease; }

/* ==================== CRONACA ==================== */

/* Nomi e carte nei testi della cronaca (chronicle.js) */
.chr-player { font-weight: bold; color: var(--seat-0); }
.chr-player.chr-seat-1 { color: var(--seat-1); }
.chr-player.chr-seat-2 { color: var(--seat-2); }
.chr-player.chr-seat-3 { color: var(--seat-3); }
.chr-card { color: var(--card-cream); font-style: italic; }
button.chr-card {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-style: italic;
  color: var(--card-cream);
  cursor: pointer;
  text-decoration: underline dotted rgba(244, 222, 160, 0.5);
  text-underline-offset: 2px;
}
button.chr-card:hover { color: var(--gold-light); }

@keyframes chr-fresh {
  from { background: rgba(251, 196, 2, 0.28); }
  to   { background: transparent; }
}

#chronicle-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 92vw);
  z-index: 240;  /* sopra il tavolo e i modali, sotto il dettaglio carta */
  display: flex;
  flex-direction: column;
  background: rgba(32, 14, 2, 0.97);
  border-left: 1px solid var(--border-gold);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5);
  animation: chr-panel-in 0.22s ease;
}
/* Aperto dalla fine partita: sopra la sua schermata (z-index 300) */
#chronicle-panel.above-overlay { z-index: 320; }
body.chronicle-open #card-detail-overlay { z-index: 330; }

@keyframes chr-panel-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.chronicle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(160, 104, 32, 0.5);
}
.chronicle-head h3 { color: var(--gold-light); font-size: 1.05rem; margin-right: auto; }
/* ✕ e pulsante musica: due tondi gemelli, allineati sulla stessa riga */
#chronicle-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border-color: var(--border-gold);
  background: var(--bg-medium);
  color: var(--gold-light);
  opacity: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* ✕ disegnata in SVG: il glifo del font non sta al centro del tondo */
#chronicle-close svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  fill: none;
}

.chronicle-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem 0.9rem 1.2rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.chr-group { padding: 0.35rem 0; border-bottom: 1px solid rgba(106, 48, 16, 0.5); }
.chr-turn {
  position: sticky;
  z-index: 1;
  top: -0.4rem;
  padding: 0.3rem 0;
  background: rgb(32, 14, 2);
  color: var(--text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chr-turn .chr-player { text-transform: none; letter-spacing: 0; font-size: 0.9rem; }
.chr-entry { padding: 0.18rem 0 0.18rem 0.6rem; border-left: 2px solid transparent; border-radius: 2px; }
.chr-entry.chr-event { color: var(--text-dim); font-size: 0.85rem; }
.chr-entry.chr-battle { border-left-color: var(--red-light); }
.chr-entry.chr-system { border-left-color: var(--gold); color: var(--gold-light); }
.chr-entry.fresh { animation: chr-fresh 1.2s ease; }
.chr-older { color: var(--text-dim); font-size: 0.8rem; font-style: italic; padding: 0.4rem 0; }

/* Campo locale: i Bastioni ai lati occupano due righe, al centro Avanscoperta
   sopra e Villaggio sotto. Le righe hanno altezza fissa, così le carte dei
   Bastioni non le allungano ma scorrono in verticale. */
#my-field {
  background: transparent;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(120px, 2fr) minmax(80px, 1fr);
  grid-template-rows: calc(var(--card-h-field) + 78px) calc(var(--card-h-field) + 44px);
  grid-template-areas: "bl vg br" "bl vi br";
  gap: 6px;
  /* Con il campo pieno su uno schermo basso è il campo a scorrere in verticale:
     la mano sotto resta sempre intera */
  min-height: 0;
  overflow-y: auto;
}
#my-field > * { flex-shrink: 0; }

#my-bottom-area {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  padding: 0 8px 6px 8px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;  /* la mano non si schiaccia mai: se manca spazio cede il campo */
}

#my-right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.region-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: center;
  min-width: 50px;
}

/* Etichette regioni del giocatore — via ::before per sopravvivere a innerHTML='' */
#my-bastion-left::before,
#my-vanguard::before,
#my-bastion-right::before,
#my-life-deck::before,
#my-active-cards::before,
#my-village::before {
  content: attr(data-label);
  display: block;
  width: 100%;
  font-size: 0.8rem;
  color: var(--gold-light);
  text-align: center;
  padding-bottom: 2px;
  pointer-events: none;
  white-space: pre-line;
  order: -2;
}
/* Nomi delle Regioni come i titoli del campo mobile (.ov-title); così anche Vite e Carte Attive */
#my-field .region::before,
#my-life-deck::before,
#my-active-cards::before {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(20, 10, 2, 0.8);
}

/* Riga «Esposto a …» dei Bastioni */
#my-bastion-left::after,
#my-bastion-right::after {
  content: attr(data-sub);
  display: block;
  width: 100%;
  min-height: 1.2em;
  line-height: 1.2;
  font-size: 0.66rem;
  font-style: italic;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(20, 10, 2, 0.8);
  text-align: center;
  margin-top: -2px;
  padding-bottom: 4px;
  pointer-events: none;
  order: -1;
}

/* Riepilogo in fondo alle mie Regioni: i rombi delle Caratteristiche più alte */
.region-stats-recap {
  flex-basis: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 4px;
}
.rg-recap-item { display: inline-flex; align-items: center; gap: 4px; }

.region {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
  border: 1px solid rgba(160, 90, 30, 0.55);
  border-radius: 4px;
  padding: 4px;
  min-height: 70px;
  background: rgba(50, 22, 4, 0.72);
  transition: border-color 0.2s, background 0.2s;
}

/* ── Regioni dipinte, come il campo mobile (board.js): sfumatura dal centro,
   grana (macchie e puntini), bordo interno in ombra; le mie col bordo d'oro
   (niente alone: tra Regioni vicine si sommerebbe). La pittura sta in .rg-paint (renderer.js → paintRegions),
   ritagliata coi lati frastagliati: il riquadro non ha sfondo e il suo bordo è
   trasparente (tiene solo la misura). Bordo, passaggio del mouse e bersagli
   cambiano il colore del contorno (--rg-line); le zone del trascinamento
   aggiungono la loro luce a --rg-shadow (sotto, .drop-zone) ── */
#my-field .region,
.opp-tile {
  --rg-bw: 1px;
  --rg-line: rgba(30, 14, 4, 0.55);
  --rg-line-w: 1.2px;
  --rg-shadow: inset 0 0 12px rgba(28, 13, 3, 0.85);
  position: relative;
  isolation: isolate;
  background: none;
  border: var(--rg-bw) solid transparent;
  border-radius: 10px;
  box-shadow: none;
}
.opp-tile { --rg-bw: 0px; }
#my-field .region {
  --rg-bw: 1.5px;
  --rg-line: rgba(255, 214, 120, 0.5);
  --rg-line-w: 1.5px;
}
.rg-paint {
  position: absolute;
  inset: calc(-1 * var(--rg-bw));
  z-index: -1;
  pointer-events: none;
}
.rg-fill {
  position: absolute;
  inset: 0;
  background:
    var(--rg-specks),
    var(--rg-blots),
    radial-gradient(60% 60% at 50% 50%, var(--rg-in), var(--rg-out));
  box-shadow: var(--rg-shadow);
  transition: box-shadow 0.12s;
}
.rg-paint svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--rg-line);
  stroke-width: var(--rg-line-w);
  stroke-linejoin: round;
  transition: stroke 0.2s;
}
#my-field .region.vanguard { --rg-in: var(--rg-vanguard); --rg-out: var(--rg-vanguard-edge); }
#my-field .region.bastion  { --rg-in: var(--rg-bastion);  --rg-out: var(--rg-bastion-edge); }
#my-field .region.village  { --rg-in: var(--rg-village);  --rg-out: var(--rg-village-edge); }
.opp-tile[data-zone="vanguard"]  { --rg-in: var(--rg-opp-vanguard); --rg-out: var(--rg-opp-vanguard-edge); }
.opp-tile.opp-tile-bastion       { --rg-in: var(--rg-opp-bastion);  --rg-out: var(--rg-opp-bastion-edge); }
.opp-tile[data-zone="village"]   { --rg-in: var(--rg-opp-village);  --rg-out: var(--rg-opp-village-edge); }
/* Zone del trascinamento: la luce sulla pittura, non sul riquadro */
#my-field .region.drop-zone,
#my-field .region.drop-over { box-shadow: none; background: none; }
#my-field .region.drop-zone > .rg-paint > .rg-fill {
  box-shadow: inset 0 0 0 2px rgba(251, 196, 2, 0.35), inset 0 0 18px rgba(251, 196, 2, 0.12), var(--rg-shadow);
}
#my-field .region.drop-over > .rg-paint > .rg-fill {
  box-shadow: inset 0 0 0 2px rgba(251, 196, 2, 0.9), inset 0 0 26px rgba(251, 196, 2, 0.35), var(--rg-shadow);
}
/* Un clic fuori dalle carte apre il riepilogo della Regione (app.js) */
#my-field .region { cursor: pointer; }
#my-field .region:hover,
#my-field .region.drop-target { --rg-line: rgba(255, 214, 120, 0.85); }
#my-field .region.drop-over { --rg-line: rgba(251, 196, 2, 0.95); }

/* Riga di carte di Avanscoperta e Bastioni: scorre in orizzontale invece di
   andare a capo (vedi renderer.js → _regionCardsRow). Il padding in alto lascia
   spazio al sollevamento delle carte al passaggio del mouse. */
.region-cards {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* in alto e ai lati c'è posto per ciò che sporge dalle carte: la sagoma delle
     carte assegnate (-8px) e il tondo dell'Orda (-6px), altrimenti l'overflow li taglia;
     sotto per il bagliore dei Guerrieri trascinabili (il margine negativo lo compensa) */
  padding: 10px 6px 6px;
  margin: -6px -2px -6px;
}

.region-cards > * { flex-shrink: 0; }
/* Carte centrate nella Regione: margini automatici e non justify-content, che
   quando la riga scorre renderebbe irraggiungibile la prima carta */
.region-cards > :first-child { margin-left: auto; }
.region-cards > :last-child { margin-right: auto; }

.region.vanguard    { flex: 2; min-width: 120px; }
.region.bastion     { flex: 1; min-width: 80px; cursor: pointer; }
.region.bastion:hover { border-color: var(--text-dim); }
.region.village     { flex: 3; min-width: 160px; }

/* Regioni del mio campo, alte quanto la loro cella della griglia: etichetta in
   cima, carte centrate nello spazio che resta, riepilogo (ATT/DIF max) in fondo */
#my-field .region {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  min-height: 0;
  min-width: 0;
}
#my-field #my-bastion-left  { grid-area: bl; }
#my-field #my-vanguard      { grid-area: vg; }
#my-field #my-bastion-right { grid-area: br; }
#my-field #my-village       { grid-area: vi; }
#my-field .region > .region-cards {
  flex: 0 1 auto;
  min-height: 0;
  margin-block: auto;
}
/* Bastioni: le carte vanno a capo (quante per riga dipende dalla larghezza) e
   se sono troppe scorrono in verticale */
#my-field .region.bastion > .region-cards {
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
}
/* Riepilogo (ATT/DIF max) in fondo alla Regione: le carte, centrate coi margini
   automatici, lo spingono giù */
#my-field .region-stats-recap { flex: 0 0 auto; }
#my-field .region.bastion > .region-cards > :first-child,
#my-field .region.bastion > .region-cards > :last-child { margin-left: 0; margin-right: 0; }

.region.drop-target {
  border-color: var(--gold);
  background: rgba(200, 168, 75, 0.08);
}

.player-stats {
  display: flex;
  gap: 1.5rem;
  font-size: 0.85rem;
  padding: 4px 14px;
  background: rgba(50, 22, 4, 0.78);
  border: 1px solid rgba(160, 90, 30, 0.5);
  border-radius: 20px;
  align-self: center;
}

/* Nella barra delle azioni: stessa misura dei pulsanti (.btn). Il numero sta
   nel simbolo, come nella riga delle risorse del mobile (.st-gem) */
#my-stats { font-size: 0.95rem; padding: 3px 14px; }
.stat-gem-item { display: inline-flex; align-items: center; gap: 7px; }
#my-mana    { color: var(--gold-light); }
#my-actions { color: #f47e44; }  /* l'arancio del rombo delle Azioni (--hex-act) */
/* Mana: la gemma ottagonale delle carte stampate */
.st-gem {
  --gem: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  position: relative;
  isolation: isolate;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  clip-path: var(--gem);
  background: var(--hex-border);
}
.st-gem::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  clip-path: var(--gem);
  background: var(--hex-mana);
}
.st-gem b { font-size: 0.88rem; font-weight: 800; color: var(--hex-ink); padding-top: 1px; }
/* Azioni: rombo arancio, distinto dalla stella azzurra delle Maghe */
.st-gem-act { --gem: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 28px; height: 28px; }
.st-gem-act::before { inset: 2px; background: var(--hex-act); }
.st-gem-act b { color: #4a1405; }

/* Mazzo vite e Carte Attive: solo il dorso con l'etichetta, senza il riquadro delle Regioni */
.region.life-deck,
.region.active-cards {
  border: none;
  background: transparent;
}
.region.life-deck {
  position: absolute;
  left: 8px;
  bottom: 6px;
  /* 24px per l'etichetta, 6px sotto: il dorso finisce alla stessa altezza
     delle carte in mano */
  height: calc(var(--card-h-field) + 30px);
  width: calc(var(--card-w-field) + 10px);
  justify-content: flex-end;
  align-items: center;
  padding: 0 4px 6px 4px;
}

/* Carte attive — specchio simmetrico di .region.life-deck */
.region.active-cards {
  position: absolute;
  right: 8px;
  bottom: 6px;
  height: calc(var(--card-h-field) + 30px);
  width: calc(var(--card-w-field) + 10px);
  justify-content: flex-end;
  align-items: center;
  padding: 0 4px 6px 4px;
}

/* Mano */
#hand-area {
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: visible;
}

.hand-label { display: none; }

#hand-cards {
  display: flex;
  gap: 0;  /* a ventaglio le carte si sovrappongono (margini negativi da fanHand) */
  flex-wrap: nowrap;
  align-items: flex-start;
  /* sopra: il badge del costo (la stella delle Magie sporge di più) anche con la
     carta sollevata dal passaggio del mouse */
  padding: 28px 12px 14px;
  justify-content: center;
  /* Altezza fissa (anche a mano vuota, altrimenti il campo scende e il mazzo
     delle Vite viene tagliato), calcolata sulle carte del campo: quelle in
     mano sono più grandi e la loro parte bassa esce dal fondo dello schermo. */
  height: calc(var(--card-h-hand) + 42px);
  overflow: visible;
}

/* ==================== CARTA ==================== */

.card {
  width: var(--card-w);
  min-width: var(--card-w);
  height: var(--card-h);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  position: relative;
  user-select: none;
  font-size: 0.65rem;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  z-index: 10;
}

.card.selected {
  border-color: var(--gold-light);
  box-shadow: 0 0 8px rgba(200,168,75,0.6);
  transform: translateY(-6px);
}

.card.in-field { cursor: default; }
/* In campo niente salita né ombra: solo un contorno dorato sottile, come i mazzi (.card.deck) */
.card.in-field:hover { transform: none; box-shadow: 0 0 0 1px var(--gold); }

.card.ethereal {
  border-color: #ffffff !important;
  box-shadow: 0 0 10px rgba(255,255,255,0.45);
}
.ethereal-cost { color: #ffffff; font-weight: bold; }


/* Carte assegnate a un Guerriero (CardArt.attachAssigned): sotto la carta, ne
   sbuca solo il bordo in alto; ognuna in più sporge un po' di più. La carta fa
   da contesto di impilamento, così z-index -1 resta sotto di lei ma sopra la
   Regione. */
.card.has-assigned { isolation: isolate; }
/* Bordo e ombra della carta (evidenziazione al passaggio del mouse, bagliore
   dello Schieramento, del bersaglio del Trono…) sono disegnati sotto le carte
   assegnate: li si ripete in un livello sopra */
.card.has-assigned::before {
  content: '';
  position: absolute;
  inset: -1px;  /* il bordo della carta */
  border-style: solid;
  border-width: inherit;
  border-color: inherit;
  border-radius: inherit;
  box-shadow: inherit;
  pointer-events: none;
  z-index: 1;
}
.card.has-art > .mc-under {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  translate: 0 calc(-4px - var(--i, 0) * 3px);
}
.mc-under-wall {
  rotate: calc(var(--tilt, 1) * 4deg);
  border-radius: 5.7cqw;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.mc-under-wall img { display: block; width: 100%; height: 100%; object-fit: fill; }

/* Badge costo: la gemma ottagonale della carta stampata (giallo e arancio, con un bordino
   marrone), fuori dalla carta in alto a destra. La minicarta non riporta il
   costo: è solo qui. Il costo in Maghe sta in una stella azzurra (come sulle
   Magie stampate); bianco = carta eterea (gratis).
   Il bordo è il fondo della gemma, il colore uno strato interno (::before):
   con clip-path un border vero verrebbe tagliato. */
.card-cost-badge {
  position: absolute;
  top: -9px;    /* sull'angolo della carta, un po' dentro */
  right: -7px;
  min-width: 25px;  /* ottagono regolare: largo quanto alto */
  height: 25px;
  padding: 0 5px;
  clip-path: var(--badge-shape);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Caudex', Georgia, serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--hex-ink);
  background: var(--hex-border);
  isolation: isolate;
  z-index: 2;
}
.card-cost-badge::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  clip-path: var(--badge-shape);
  background: var(--hex-fill, var(--hex-mana));
}
.card-cost-badge { --badge-shape: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }  /* ottagono, come la gemma della carta */
/* Stella: più grande della gemma, perché il numero sta nella parte centrale */
.card-cost-badge.star {
  --badge-shape: polygon(50% 4%, 65.9% 32.2%, 97.6% 38.5%, 75.7% 62.3%, 79.4% 94.5%, 50% 81%, 20.6% 94.5%, 24.3% 62.3%, 2.4% 38.5%, 34.1% 32.2%);
  top: -12px;
  right: -9px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 4px 0 0;
}
.card-cost-badge.star::before { inset: 2px; }
.card-cost-badge.maga { --hex-fill: var(--hex-maga); }
/* Eterea: gemma bianca sfumata di grigio, come le altre sono sfumate */
.card-cost-badge.ethereal { --hex-fill: radial-gradient(closest-side, #b4b4b4 0%, #cfcfcf 55%, #ececec 86%, #ffffff 100%); color: #241608; }

/* Carta piccola (per campo) */
.card-sm {
  width: var(--card-w-sm);
  min-width: var(--card-w-sm);
  height: var(--card-h-sm);
  font-size: 0.68rem;
}

/* Le carte del mio campo sono grandi come quelle in mano (--card-*-field) */
#my-field .card-sm {
  width: var(--card-w-field);
  min-width: var(--card-w-field);
  height: var(--card-h-field);
}

/* Carta in campo: nascondi descrizione, ingrandisci stats */
.card-sm.in-field .card-effect { display: none; }
.card-sm.in-field .card-name { font-size: 0.78rem; }
.card-sm.in-field .card-stats { font-size: 0.8rem; margin-top: auto; }

/* Tipi carta */
.card[data-type="warrior"]  { border-left: 3px solid var(--red); }
.card[data-type="spell"]    { border-left: 3px solid var(--blue-light); }
.card[data-type="building"] { border-left: 3px solid var(--green); }
.card[data-type="wall"]     { border-left: 3px solid var(--text-dim); background: #1a1a1a; }

/* Costruzione completata: ruotata (verticale = completata) */
.card[data-type="building"].completed {
  border-left-color: var(--gold);
  border-top: 3px solid var(--green);
}

.card-name {
  font-weight: bold;
  color: var(--gold-light);
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
}

.card-species {
  font-size: 0.6rem;
  color: var(--text-dim);
}

.card-stats {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: auto;
}

/* Stats mano */
.hand-cost-row {
  font-size: 0.82rem;
}

/* Guerriero in mano: ATT/GIT/DIF in colonna, spinto verso il basso */
.card-warrior-attrs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
  font-size: 0.78rem;
}

/* Riga mana sotto le caratteristiche guerriero */
.hand-mana-row {
  display: flex;
  font-size: 0.78rem;
  margin-top: 0.25rem;
}

/* Carte in mano con le proporzioni della minicarta (280×400): l'altezza è
   quella della mano, la larghezza ne deriva. */
#hand-cards .card {
  height: var(--card-h-hand);
  width: auto;
  min-width: 0;
  aspect-ratio: 7 / 10;
  flex-shrink: 0;
}
/* Ventaglio (fanHand in renderer.js): ogni carta copre il lato destro della
   precedente, quindi il badge del costo sta a sinistra per restare visibile. */
#hand-cards .card {
  height: calc(var(--card-h-hand) * 1.2);
  cursor: grab;  /* si giocano trascinandole (il clic non apre il dettaglio) */
  rotate: var(--fan-rot, 0deg);
  translate: 0 var(--fan-y, 0px);
  transform-origin: 50% 100%;
  transition: transform 0.15s, translate 0.15s, border-color 0.15s, box-shadow 0.15s;
}
#hand-cards .card:hover,
#hand-cards .card.selected {
  transform: none;
  translate: 0 calc(var(--fan-y, 0px) - 10px);
  z-index: 10;
}
/* Classe e non #hand-cards: vale anche per i fantasmi delle animazioni */
.hand-card .card-cost-badge { right: auto; left: -7px; scale: 1.2; }  /* in mano un po' più grandi */
.hand-card .card-cost-badge.star { left: -9px; }
#hand-cards .card .card-name { font-size: 0.82rem; }
#hand-cards .card .card-species { font-size: 0.72rem; }

/* Minicarta (cardart.js): sopra la carta testuale, che resta nascosta, ci sono
   solo la minicarta (.card-art), il badge del costo (che mostra 0 per la carta
   Eterea) e la fascia con le informazioni che cambiano (.card-keep). */
.card-art { display: none; }
.card.has-art {
  padding: 0;
  border-width: 1px;
  background: transparent;
  container-type: inline-size;  /* testi e simboli si misurano sulla larghezza della carta */
}
/* A riposo un bordino oro spento, per staccare la carta dal tavolo (oro pieno se evidenziata) */
/* Sulla minicarta nessun bordo spesso dei tipi (es. Costruzione completata):
   tutte le carte hanno la stessa misura */
.card.has-art[data-type] { border-width: 1px; }
.card.has-art:not(:hover):not(.selected) { border-color: rgba(214, 170, 60, 0.35); }
/* Cornice oro uniforme: senza questa regola il bordo sinistro manterrebbe il
   colore del tipo (.card[data-type], più specifica di .card:hover) */
.card.has-art[data-type]:hover { border-color: var(--gold); }
.card.has-art.in-field[data-type]:hover { border-color: rgba(214, 170, 60, 0.35); }  /* in campo l'oro pieno è il contorno esterno */
.card.has-art[data-type].selected { border-color: var(--gold-light); }
.card.has-art > :not(.card-art):not(.card-cost-badge):not(.card-keep):not(.mc-under):not(.mc-back) { display: none; }
/* La minicarta (.mc), disegnata in HTML: posizioni in % della carta (la
   minicarta è progettata a 280×400 con cornice di 13), testi in cqw (larghezza
   della carta), così è identica a ogni dimensione. */
.card.has-art .card-art {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 5.7cqw;
  background: var(--mc-frame, #7a0000);
  font-family: 'Caudex', Georgia, serif;
  overflow: hidden;
  pointer-events: none;
}
.mc-spell    { --mc-frame: #123a52; }
.mc-building { --mc-frame: #245e33; }
/* Pergamena dentro la cornice colorata */
.mc::before {
  content: '';
  position: absolute;
  left: 4.64%; right: 4.64%; top: 3.25%; bottom: 3.25%;
  border-radius: 2.9cqw;
  background: linear-gradient(rgba(60,35,15,.06), rgba(60,35,15,.14)),
              url('/card_images/mini/sfondo.webp') center / cover;
}
.mc > * { position: absolute; }
/* Stendardo del nome, come sulla carta intera: stesso corpo per tutte le carte,
   tarato sul nome più lungo («KAISER JOSEPH»; i nomi troppo lunghi hanno una
   versione abbreviata, mini_name in cards.json) */
.mc-name {
  left: 5.36%; right: 5.36%; top: 5.5%; height: 11%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-brown);
  border: max(1px, 1cqw) solid var(--card-gold);
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
}
.mc-name > span {
  font-weight: 700;
  font-size: 8cqw;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--card-cream);
}
.mc-name .ini { font-size: 1.36em; }
/* Sotto il nome: bollino della specie (Guerrieri) e Scuola (Magie e Maghe),
   separati da un punto. Lo spazio resta anche quando è vuoto (Costruzioni),
   così le illustrazioni stanno tutte alla stessa altezza. */
.mc-school {
  left: 5%; right: 5%; top: 18%; height: 7.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-weight: 700;
  font-size: 8.6cqw;
  line-height: 1;
  white-space: nowrap;
  color: #2e1a0c;
  gap: 2cqw;
}
.mc-sep { font-style: normal; color: var(--card-brown); }
/* Illustrazione nel suo riquadro con fondo e bordo, come sulla carta intera:
   quelle rettangolari lo riempiono, quelle (quasi quadrate) degli Eroi ci
   stanno intere, ingrandite un po' */
.mc-illus {
  left: 7.5%; right: 7.5%; top: 27.5%; height: 36%;
  border: max(1px, 1cqw) solid var(--card-brown);
  border-radius: 1cqw;
  overflow: hidden;
  background: linear-gradient(rgba(52,30,13,.22), rgba(52,30,13,.34)),
              url('/card_images/mini/sfondo.webp') center / cover;
}
.mc-illus img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.mc-illus.hero img { object-fit: contain; object-position: 50% 50%; transform: scale(1.25); transform-origin: 50% 40%; }
.mc-dot {
  flex: 0 0 auto;
  width: 7cqw;
  height: 7cqw;
  border-radius: 50%;
  background: var(--mc-sp);
}
.mc-sp-elfo  { --mc-sp: var(--elfo); }
.mc-sp-nano  { --mc-sp: var(--nano); }
.mc-sp-maga  { --mc-sp: var(--maga); }
.mc-sp-umano { --mc-sp: var(--umano); }
/* Scelta come Muro: la carta è girata e mostra il dorso (CardArt.flipWall) */
.card.has-art > .mc-back {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 5.7cqw;
  z-index: 3;
  pointer-events: none;
}
.card.has-art.wall-marked > .mc-back { display: block; }
.card.wall-marked .card-cost-badge,
.card.flipping .card-cost-badge { visibility: hidden; }

/* Fascia della minicarta (cardart.js → _band), sotto l'illustrazione (dal
   66% al 95% dell'altezza): le informazioni che cambiano durante la
   partita. Rombi, torre e stella occupano circa lo stesso spazio. Le misure sono in cqw (larghezza della carta),
   così valgono a ogni dimensione. */
.card-keep { display: none; }
.card.has-art > .card-keep { display: flex; }
.mc-band {
  position: absolute;
  left: 5%; right: 5%;
  top: 66%; bottom: 5%;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  font-family: 'Caudex', Georgia, serif;
  pointer-events: none;
}
/* Caratteristiche (ATT, GIT, DIF) nei rombi della carta stampata:
   verde = sopra il valore stampato, rosso = sotto */
.mc-band.mc-warrior { gap: 0.5cqw; }
.mc-dia {
  position: relative;
  isolation: isolate;
  width: 27cqw;
  height: 27cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15.5cqw;
  line-height: 1;
  color: var(--card-cream);
}
.mc-dia::before {
  content: '';
  position: absolute;
  inset: 15%;
  z-index: -1;
  background: var(--card-brown);
  border: max(1px, 0.9cqw) solid var(--card-gold);
  border-radius: 1cqw;
  transform: rotate(45deg);
}
.mc-dia.up   { color: var(--seat-2); }
.mc-dia.up::before   { border-color: var(--seat-2); }
.mc-dia.down { color: var(--seat-3); }
.mc-dia.down::before { border-color: var(--seat-3); }
/* Torre della Costruzione (piena = completata) e stella della Magia (piena =
   Prodigio attivo), disegnate come sulla carta stampata */
.mc-sym {
  width: 30cqw;
  height: 30cqw;
  color: var(--card-brown);
}
.mc-sym svg { display: block; width: 100%; height: 100%; }
/* Costo per completare la Costruzione (finché non è completata), nella gemma
   della carta stampata */
.mc-gem {
  position: relative;
  isolation: isolate;
  width: 26cqw;
  height: 26cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  background: var(--hex-border);
  color: var(--hex-ink);
  font-weight: 800;
  font-size: 16cqw;
  line-height: 1;
  padding-top: 1cqw;  /* le cifre di Caudex stanno alte: così cadono al centro della gemma */
}
.mc-gem::before {
  content: '';
  position: absolute;
  inset: max(1px, 0.8cqw);
  z-index: -1;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  background: var(--hex-mana);
}

/* Orda attiva sopra un'illustrazione: il fulmine in un tondo, ben visibile */
.card.has-art.horde-active::after {
  top: -6px; right: -6px;
  width: 17px; height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-ink);
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-size: 0.62rem;
  z-index: 3;
}

/* Carta intera al centro dello schermo (al passaggio del mouse su una minicarta):
   il PNG pieno, 744×1040 (CardArt.showFull). */
/* Posizione calcolata in renderer.js (CardPreview.place): al centro per le
   carte in mano, accanto alla carta (a destra o a sinistra) per quelle in campo */
.hand-preview {
  position: fixed;
  width: min(400px, calc(62vh * 744 / 1040), 90vw);
  z-index: 220;  /* sopra le modali (200), sotto il dettaglio della carta (250) */
  height: auto;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  animation: hand-preview-in 0.14s ease-out;
}
/* Carte collegate (Recluta ↔ Eroe, Cardo ↔ Decumano…): accanto, più piccole */
.hand-preview-related {
  width: min(220px, calc(62vh * 744 / 1040 * 0.55), 45vw);
  border-radius: 8px;
}
@keyframes hand-preview-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* Transizioni delle carte (motion.js): i "fantasmi" volano sopra l'interfaccia */
.motion-layer {
  position: fixed;
  inset: 0;
  z-index: 170;
  pointer-events: none;
}
.motion-ghost {
  position: fixed;
  margin: 0;
  /* Le misure sono quelle della carta fotografata (inline): i minimi di .card
     e simili la deformerebbero */
  box-sizing: border-box;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform, opacity;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}
/* Dorso di carta (Muro nuovo di un avversario che vola verso il Bastione) */
.card.motion-back { padding: 0; overflow: hidden; border: none; border-radius: 6px; background: transparent; }

.stat { color: var(--text-dim); }
.stat-att { color: var(--red-light); }
.stat-git { color: #aaa; }
.stat-dif { color: var(--green-light); }
.stat-cost { color: var(--blue-light); }
.stat-mana { color: var(--gold-light); }

.card-effect {
  font-size: 0.7rem;
  color: var(--text-dim);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Muro faccia in giù (legacy) */
.wall-card {
  width: 32px;
  min-width: 32px;
  height: 50px;
  background: #1a1a1a;
  border: 1px solid var(--text-dim);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--text-dim);
}

/* Mazzo coperto (Muri, Vite, Carte Attive — renderer.js → renderDeck): il dorso
   della carta, grande come le carte del mio campo, con sotto la scritta un
   riquadro marrone e il numero di carte dentro un simbolo. */
.card.deck {
  width: var(--card-w-field);
  min-width: var(--card-w-field);
  height: var(--card-h-field);
  /* Bordino oro spento come le minicarte: il dorso ha la misura della loro illustrazione */
  padding: 0;
  border: 1px solid rgba(214, 170, 60, 0.35);
  border-radius: 6px;  /* in px: i cqw qui si misurerebbero sul contenitore esterno */
  background: transparent;
  overflow: hidden;
  container-type: inline-size;
}
/* Al passaggio del mouse come le carte in campo (.card.in-field:hover) */
.card.deck:hover { transform: none; box-shadow: 0 0 0 1px var(--gold); }
.card.deck.clickable { cursor: pointer; }
.deck-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;  /* intera: il dorso (output/mini/retro.webp) ha le proporzioni della minicarta */
  pointer-events: none;
  user-select: none;
}
.deck-count {
  position: absolute;
  left: 50%;
  top: 63%;
  width: 40cqw;
  height: 40cqw;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  background: var(--card-brown);
  border: max(1px, 1.2cqw) solid var(--card-gold);
  border-radius: 3cqw;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.deck-count > * { grid-area: 1 / 1; }
.deck-count svg { width: 82%; height: 82%; }
.deck-wall   .deck-count svg { fill: #a8916b; }
.deck-life   .deck-count svg { fill: #c0392b; }
.deck-active .deck-count svg { fill: #4a9eff; }
.deck-count span {
  font-family: 'Caudex', Georgia, serif;
  font-weight: 700;
  font-size: 16cqw;
  line-height: 1;
  color: #fff8e6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.deck-life .deck-count span { margin-top: -1.5cqw; }  /* il cuore ha il centro un po' più in alto */

/* Horde indicator */
.card.horde-active::after {
  content: '⚡';
  position: absolute;
  top: 2px; right: 2px;
  font-size: 0.7rem;
}

/* ==================== PANNELLO AZIONI ==================== */

/* Tre colonne, le laterali larghe uguali: Mana e Azioni (#my-stats) stanno
   esattamente al centro. Cornice a bastione come la barra delle risorse del
   mobile (#statusbar): sfondo e bordo li dà .menu-frame, qui non vanno
   ridefiniti. Il margine negativo recupera la parte trasparente del bordo */
#action-panel {
  --frame-size: 20px;
  --frame-fill: rgba(50, 22, 4, 0.88);  /* come l'intestazione (#game-header) */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 0.3rem;
  margin: -6px 2px;
  z-index: 2;
  flex-shrink: 0;
}

#action-panel h3 { display: none; }
.ap-left, .ap-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}
.ap-right { justify-content: flex-end; }
/* Pulsanti del pannello più bassi di quelli dei menu: lo spazio va alle carte */
.ap-left > .btn, .ap-right > .btn { padding: 0.4rem 1rem; }
#action-hint { font-size: 0.95rem; }

.hint {
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1.3;
  font-style: italic;
}


/* ==================== MODALE ==================== */

#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

#modal-overlay.hidden { display: none !important; }

/* Cornice a bastione (.menu-frame): sfondo e bordo li dà lei, e una regola con
   #id qui li scavalcherebbe. Il bordo della cornice occupa spazio: padding ridotto */
#modal-box {
  padding: 0.6rem 0.8rem;
  /* Larghezze di prima più i due bordi della cornice (2 × 28px) */
  min-width: 376px;
  max-width: min(536px, 94vw);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


#modal-body { font-size: 0.9rem; color: var(--text); line-height: 1.4; }

.modal-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.modal-option {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}

.modal-option:hover { border-color: var(--gold); background: var(--bg-dark); }
.modal-option.selected { border-color: var(--gold-light); color: var(--gold-light); }

#modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* Selettore di Guerrieri (Renderer.showWarriorPicker): sezioni per giocatore,
   sottosezioni per Regione. Stessa palette e nastri della grafica delle carte. */
.wpick-subtitle { font-size: 0.8rem; color: var(--text-dim); font-style: italic; margin-bottom: 0.6rem; }
.wpick {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.2rem;
}
.wpick-player { display: flex; flex-direction: column; gap: 0.45rem; }
.wpick-player-head {
  color: var(--card-cream);
  font-weight: bold;
  font-size: 0.95rem;
}
.wpick-zone { display: flex; flex-direction: column; gap: 0.3rem; padding-left: 0.5rem; }
.wpick-zone-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--gold-light);
  font-style: italic;
}
.wpick-zone-icon { font-style: normal; }
.wpick-tag {
  margin-left: auto;
  font-style: normal;
  font-size: 0.68rem;
  color: var(--card-ink);
  background: var(--card-gold);
  border-radius: 3px;
  padding: 0.05rem 0.45rem;
  letter-spacing: 0.03em;
}
.wpick-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.6rem;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wpick-row:hover { border-color: var(--gold); background: var(--bg-dark); }
.wpick-row.selected { border-color: var(--gold-light); background: var(--bg-dark); }
.wpick-row.selected .wpick-name { color: var(--gold-light); }
.wpick-row.disabled { opacity: 0.45; cursor: default; }
.wpick-row.disabled:hover { border-color: var(--border); background: var(--bg-light); }
.wpick-row .wpick-tag { margin-left: 0; }
.wpick-row-icon { color: var(--gold-light); }
.wpick-name { font-weight: bold; font-size: 0.88rem; }
.wpick-stats { font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; margin-left: auto; }
.wpick-note { flex-basis: 100%; font-size: 0.74rem; color: var(--card-cream); font-style: italic; margin-top: 0.15rem; }

/* Ricerca nel mazzo */
.search-summary {
  font-size: 0.85rem;
  color: var(--gold-light);
  margin-bottom: 0.6rem;
}

.search-deck-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 55vh;
  overflow-y: auto;
}

.search-deck-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 0.88rem;
}

.search-match {
  background: var(--bg-light);
  border-color: var(--gold);
  color: var(--gold-light);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.search-match:hover { background: var(--bg-dark); border-color: var(--gold-light); }

.search-no-match {
  background: transparent;
  opacity: 0.35;
  cursor: default;
}

.search-card-name { font-weight: 600; }
.search-card-type { font-size: 0.75rem; color: #888; }

.search-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.7rem;
}

.search-page-btn { padding: 0.25rem 0.7rem; font-size: 0.85rem; }
.search-page-btn:disabled { opacity: 0.35; cursor: default; }
.search-page-info { font-size: 0.85rem; color: var(--gold-light); min-width: 3rem; text-align: center; }

.search-exit-row { display: flex; justify-content: center; margin-top: 1rem; }

/* ==================== TOAST ==================== */

#toast-container {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
}

.toast {
  background: var(--bg-medium);
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  color: var(--text);
  animation: toast-in 0.2s ease, toast-out 0.3s ease 2.7s forwards;
  max-width: 400px;
  text-align: center;
}

.toast.error { border-color: var(--red); color: var(--red-light); }
.toast.success { border-color: var(--green-light); color: var(--green-light); }

@keyframes toast-in  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; } }

/* ==================== BANNER CAMBIO TURNO ==================== */
/* Come #turn-banner del client mobile: pillola oro per il proprio turno,
   versione sobria (.subtle) per il turno degli altri. */

#turn-banner {
  position: fixed;
  top: 34vh;
  left: 0; right: 0;
  z-index: 290;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
#turn-banner.hidden { display: none; }
#turn-banner span {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 0.9rem 2.2rem;
  border-radius: 10px;
  color: var(--bg-dark);
  background: var(--gold);
  border: 2px solid var(--border-gold);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
  animation: turn-banner-pop 1.9s ease-out forwards;
}
#turn-banner.subtle span {
  font-size: 1.2rem;
  color: var(--text);
  background: var(--bg-medium);
  border: 1px solid var(--border-gold);
}
@keyframes turn-banner-pop {
  0%   { opacity: 0; transform: scale(0.7) translateY(14px); }
  14%  { opacity: 1; transform: scale(1.03); }
  22%  { transform: scale(1); }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: scale(0.96) translateY(-10px); }
}

/* ==================== FINE PARTITA ==================== */

#screen-gameover.active {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 300;
  align-items: center;
  justify-content: center;
}

/* Cornice a bastione (.menu-frame); scorre la tabella, non il riquadro */
.gameover-container {
  padding: 1.2rem 1.4rem;
  min-width: 320px;
  max-width: min(920px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}

#gameover-winner { font-size: 1.4rem; }
#gameover-scores { font-size: 1rem; color: var(--text-dim); max-width: 100%; max-height: 55vh; overflow: auto; }

/* Riepilogo: classifica e statistiche */
.gameover-table { border-collapse: collapse; font-size: 0.9rem; }
.gameover-table th {
  color: var(--text-dim);
  font-weight: normal;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border-bottom: 1px solid var(--border-gold);
}
.gameover-table td { padding: 0.45rem 0.55rem; border-bottom: 1px solid rgba(106, 48, 16, 0.6); color: var(--text); }
.gameover-table tr.winner td { background: rgba(251, 196, 2, 0.08); }
.gameover-table .go-place { color: var(--gold-light); font-weight: bold; }
.gameover-table .go-name { text-align: left; white-space: nowrap; }
.gameover-table .go-you { color: var(--text-dim); font-size: 0.8rem; }
.gameover-table .go-outcome { color: var(--text-dim); font-size: 0.78rem; }
.gameover-table .go-num { font-variant-numeric: tabular-nums; }

.gameover-note { color: var(--gold-light); font-size: 0.95rem; max-width: 520px; }
.gameover-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }

/* ==================== UTILITY ==================== */

.hidden { display: none !important; }

.life-heart { color: var(--red-light); }
.life-empty { color: var(--text-dim); }

/* Specie colori */
.species-elfo   { color: #7aaa55; }
.species-nano   { color: #b85a3a; }
.species-maga   { color: #9966cc; }
.species-umano  { color: #5599cc; }

/* Scuola colori */
.school-anatema    { color: var(--red-light); }
.school-sortilegio { color: var(--blue-light); }
.school-incantesimo { color: #88bbcc; }

/* Scrollbar: stessa barra sottile ovunque. Non impostare scrollbar-width /
   scrollbar-color su un elemento: in Chrome annullano queste regole */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-gold); }
/* Firefox non conosce ::-webkit-scrollbar */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg-dark); }
}

/* ==================== CARD DETAIL ==================== */

#card-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
}

#card-detail-overlay.hidden { display: none !important; }

/* --- Modalità testo (flashcard) --- */

/* Cornice a bastione (.menu-frame): vedi #modal-box. Scorre il corpo, non il
   riquadro: lo scorrimento taglierebbe il riempimento delle punte */
#card-detail-box {
  padding: 0.6rem 0.8rem;
  min-width: 300px;
  max-width: 440px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.card-detail-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.2rem;
}


.card-detail-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--text);
}

.detail-meta {
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1.5;
}

.detail-stats {
  display: flex;
  gap: 1.5rem;
  font-size: 1.1rem;
  padding: 0.3rem 0;
}

.detail-section {
  background: var(--bg-dark);
  border-radius: 4px;
  padding: 0.5rem 0.8rem;
  line-height: 1.5;
  border-left: 3px solid var(--border);
}

.detail-prodigy { border-left-color: var(--border); }
.detail-gold    { border-left-color: var(--border); }

.detail-dim {
  color: var(--text-dim);
  font-size: 0.8rem;
  font-style: italic;
}

#card-detail-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.3rem;
}

.card-footer-center {
  flex: 1;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

#card-detail-extra-btns {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.card-nav-btn {
  flex-shrink: 0;
  padding: 0.1rem 0.7rem 0.3rem;
  font-size: 1.6rem;  /* ‹ › in Caudex sono piccole */
  line-height: 1;
}

/* --- Modalità immagine carta --- */

#card-image-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  max-width: min(90vw, 480px);
}

#card-detail-img {
  max-height: 74vh;
  max-width: 100%;
  object-fit: contain;
  border-radius: 18px;
  border: 2px solid var(--border-gold);
  display: block;
}

/* Carta che si gira al clic (fronte e retro, come sul mobile) */
.card-flip { perspective: 1400px; cursor: pointer; }
.card-flip-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.card-flip.flipped .card-flip-inner { transform: rotateY(180deg); }
.card-flip-face {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card-flip-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: rotateY(180deg);
  border-radius: 18px;
  border: 2px solid var(--border-gold);
}
.card-flip-hint {
  color: var(--text-dim);
  font-size: 0.78rem;
  font-style: italic;
  margin-top: -0.2rem;
}
/* Copie nel mazzo (catalogo): attaccata alla carta, staccata dalla barra delle frecce */
.card-img-note { color: var(--gold-light); font-size: 0.9rem; margin: -0.3rem 0 0.5rem; }
@media (prefers-reduced-motion: reduce) {
  .card-flip-inner { transition: none; }
}

#card-image-footer {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: rgba(20, 8, 0, 0.9);
  border: 2px solid var(--border-gold);
  border-radius: 8px;
}

#card-img-center {
  flex: 1;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#card-img-extra-btns {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* ==================== PHASE BAR ==================== */

/* Nell'intestazione, accanto al numero del turno: un pallino per fase, come
   le fasi dell'intestazione mobile (.ph-dot) */
#phase-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.1rem;
  font-size: 1rem;
  flex-wrap: nowrap;
}

.phase-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.phase-step i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #3b2210;
  border: 1px solid #5e3a19;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.phase-step em {
  font-style: italic;
  color: #a88a5a;
  transition: color 0.3s;
}
.phase-step.active i {
  background: var(--gold-light);
  border-color: #ffe48c;
  box-shadow: 0 0 8px rgba(255, 208, 66, 0.55);
}
.phase-step.active em { color: var(--gold-light); font-weight: 700; }
.phase-step.done i { background: #7a5520; border-color: #8a6428; }
.phase-step.done em { opacity: 0.6; }

/* ==================== BANNER AZIONE ==================== */

#action-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

.banner-label {
  font-size: 0.9rem;
  color: var(--gold-light);
  font-weight: bold;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Carta non giocabile ora (Azioni esaurite) */
.card.unplayable { opacity: 0.4; filter: grayscale(0.6); }

/* ==================== RESPONSIVE ==================== */

/* La dimensione delle carte di mano e campo sul tavolo è calcolata in base allo
   schermo da renderer.js (fitCards), che sovrascrive --card-*-hand/-field */

/* Schermi non alti: tutto ciò che sta attorno alle mie carte (intestazione,
   avversari, cronaca, pannello azioni con Mana/Azioni) al 90%, come lo zoom del
   browser; lo spazio guadagnato lo prendono le carte (fitCards) */
@media (max-height: 1000px) {
  #game-header,
  #top-opponents,
  #left-strip,
  #right-strip,
  #center-bar,
  #action-panel { zoom: 0.9; }
}

@media (max-width: 900px) {
  :root {
    --card-w: 72px;
    --card-h: 104px;
    --card-w-sm: 56px;
    --card-h-sm: 82px;
    --card-w-hand: 81px;
    --card-h-hand: 117px;
  }
}

/* Mobile — pannello azioni diventa drawer dal basso */
@media (max-width: 600px) {
  :root {
    --card-w: 62px;
    --card-h: 92px;
    --card-w-sm: 48px;
    --card-h-sm: 72px;
    --card-w-hand: 71px;
    --card-h-hand: 105px;
  }

  /* Su mobile le strip spariscono; le mostriamo in top-opponents */
  #left-strip, #right-strip { display: none !important; }
  #top-opponents { max-height: 35vh; overflow-y: auto; }

  /* Cassetto dal basso: niente cornice a bastione */
  #action-panel::before { display: none; }
  #action-panel {
    display: flex;  /* niente tre colonne: il pannello va a capo */
    position: fixed;
    left: 0; right: 0;
    bottom: 0; top: auto;
    width: 100%;
    margin: 0;
    background: rgba(28, 15, 4, 0.95);
    border: none;
    border-image: none;
    border-top: 2px solid var(--border-gold);
    border-radius: 14px 14px 0 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 0.6rem 0.6rem;
    max-height: 46px;
    overflow: hidden;
    transition: max-height 0.32s ease;
    z-index: 80;
  }

  #action-panel.panel-open {
    max-height: 65vh;
    overflow-y: auto;
  }

  #panel-toggle {
    display: flex;
    order: -1;
    width: 100%;
    padding: 0.55rem 0;
    background: transparent;
    border: none;
    color: var(--gold-light);
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.3rem;
  }

  #action-panel h3 { display: none; }

  #game-table {
    margin-bottom: 46px;
  }

  .btn-danger, .btn-warning { flex: 1; min-width: 80px; }

  #phase-bar, #hdr-deck { display: none; }
  #game-header { padding: 0.45rem 0.8rem; }

}

#panel-toggle { display: none; }

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

#screen-catalog.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

#catalog-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.2rem;
  background: rgba(23, 16, 9, 0.92);
  border-bottom: 2px solid var(--card-gold);
  flex-shrink: 0;
}

#btn-catalog-back {
  position: absolute;
  left: 1.2rem;
}

#catalog-header h2 {
  color: var(--card-cream);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin: 0;
}

#catalog-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem;
}

#catalog-grid {
  max-width: 1080px;
  margin: 0 auto;
}

/* Ogni sezione è un ripiano su cui le carte poggiano: senza questo contenitore
   i PNG (rettangolari, con la cornice già disegnata) sembrano fluttuare sul
   mattone dello sfondo. Il marrone è velato, non pieno, per non appesantire. */
.catalog-section {
  background: rgba(40, 18, 0, 0.58);
  border: 1px solid rgba(185, 138, 62, 0.35);
  border-radius: 12px;
  padding: 0 1.3rem 1.3rem;
  margin-top: 1.6rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.catalog-section:first-child { margin-top: 0; }

/* Il nome della sezione vive nella fascia ricavata in cima al ripiano */
.catalog-section-title {
  padding: 1.5rem 0 1.2rem;
  text-align: center;
  color: var(--card-cream);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
}

.catalog-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.catalog-card {
  aspect-ratio: 744 / 1040;
  /* In percentuale (non in px) così la smussatura resta allineata a quella
     disegnata sulla carta (18px su 744x1040) a qualsiasi dimensione di griglia */
  border-radius: 2.7% / 1.95%;
  overflow: hidden;
  cursor: pointer;
  background: var(--card-ink);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.catalog-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.65);
}

.catalog-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.catalog-card-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  background: var(--card-brown);
  color: var(--card-cream);
  font-weight: 700;
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .catalog-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .catalog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Intestazioni delle schermate di menu: stesso stile di quella del catalogo
   (titolo crema maiuscolo al centro, «Indietro» a sinistra, filetto dorato). */
#bot-difficulty-header,
#multiplayer-header,
#waiting-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.2rem;
  background: rgba(23, 16, 9, 0.92);
  border-bottom: 2px solid var(--card-gold);
  flex-shrink: 0;
}

#bot-difficulty-header .btn,
#multiplayer-header .btn,
#waiting-header .btn {
  position: absolute;
  left: 1.2rem;
}

#bot-difficulty-header h2,
#multiplayer-header h2,
#waiting-header h2 {
  color: var(--card-cream);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin: 0;
}


/* ==================== SFIDA UN BOT ==================== */

#screen-bot-difficulty.active {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


#bot-difficulty-grid {
  max-width: 760px;
  margin: auto;
  padding: 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
}

.bot-count-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  padding: 0 15px 0.5rem;  /* allineata al bordo visibile delle cornici sotto */
}
.bot-count-label {
  color: var(--card-cream);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.85rem;
}
.bot-count-options {
  display: inline-flex;
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  overflow: hidden;
}
.bot-count-btn {
  min-width: 2.8rem;
  padding: 0.45rem 0.9rem;
  background: var(--bg-medium);
  color: var(--text);
  border: none;
  border-right: 1px solid var(--border-gold);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.bot-count-btn:last-child { border-right: none; }
.bot-count-btn:hover { color: var(--gold-light); }
.bot-count-btn.selected { background: var(--gold); color: var(--bg-dark, #171009); }
.bot-count-hint { color: var(--text-dim); font-style: italic; font-size: 0.85rem; }

.difficulty-card {
  display: block;
  text-align: left;
  padding: 0.3rem 0.7rem;
  font-family: inherit;
}
.difficulty-card-title { font-size: 1.1rem; font-weight: bold; }
.difficulty-card-desc  { color: var(--text); font-size: 0.9rem; margin-top: 0.3rem; }

.difficulty-easy   .difficulty-card-title { color: var(--green-light); }
.difficulty-normal .difficulty-card-title { color: var(--gold-light); }
.difficulty-hard   .difficulty-card-title { color: var(--red-light); }

/* ---------------------------------------------------------------------------
   Tutorial — occhio di bue (spotlight.js) e pannello dei passi.
   Tutto lo schermo si scurisce tranne le zone spiegate, circondate da un
   anello dorato; al cambio di passo buchi, anelli e pannello scivolano nella
   nuova posizione. Lo strato scuro sta sotto modali e dettaglio carta (200+),
   così le scelte di gioco aperte durante un passo restano in primo piano.
   --------------------------------------------------------------------------- */

#spotlight {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
}

#spotlight[hidden] { display: none; }

.spotlight-shade {
  position: absolute;
  inset: 0;
  fill: rgba(10, 5, 0, 0.7);
  animation: spotlight-fade-in 0.3s ease-out;
}

@keyframes spotlight-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Anelli: tracciati SVG che seguono la forma della zona; il bagliore pulsa
   sull'intero strato */
.spotlight-rings {
  position: absolute;
  inset: 0;
  overflow: visible;
  animation: spotlight-ring-pulse 1.6s ease-in-out infinite;
}

.spotlight-ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linejoin: round;
}

@keyframes spotlight-ring-pulse {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(251, 196, 2, 0.6)); }
  50%      { filter: drop-shadow(0 0 11px var(--gold)); }
}

/* Pannello del tutorial: stesso aspetto sul campo e nella spiegazione delle carte */
/* Cornice a bastione (.menu-frame, in fondo al file): il bordo della cornice
   occupa già spazio, il padding è ridotto di conseguenza */
.tut-panel {
  padding: 0.3rem 0.6rem;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.75));
}
/* Quasi pieno: sta sopra il tavolo; cornice un po' più grande di quella dei
   menu, così il bordo è più spesso (più specifico di .menu-frame, che viene dopo) */
.tut-panel.menu-frame { --frame-fill: rgba(44, 24, 0, 0.96); --frame-size: 34px; }

.tut-panel-progress {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

/* Titolo delle finestre con la cornice a bastione: un solo stile per tutte
   (tutorial, finestre e selettori, dettaglio carta, dado, fine partita) */
.tut-panel-title,
#modal-title,
.card-detail-title,
.dice-title,
#gameover-title {
  color: var(--gold-light);
  font-weight: bold;
  font-size: 1.3rem;
}
.tut-panel-title { margin-bottom: 0.6rem; }

.tut-panel-text {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.55;
}

/* Obiettivi del passo: quelli fatti si spuntano */
.tut-goals {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
}

.tut-goals.hidden { display: none; }

.tut-goals li {
  position: relative;
  padding: 0.2rem 0 0.2rem 1.6rem;
  color: var(--card-cream);
  font-size: 0.95rem;
}

.tut-goals li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.42rem;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid var(--gold);
  transform: rotate(45deg) scale(0.8);
}

.tut-goals li.done { color: var(--text-dim); text-decoration: line-through; }

.tut-goals li.current > span { color: var(--gold-light); font-weight: bold; }

.tut-goals li.todo { opacity: 0.45; }

/* Testo dell'obiettivo da fare ora, sotto la sua voce */
.tut-goal-text {
  margin: 0.3rem 0 0.5rem;
  color: var(--text);
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.55;
  animation: tutorial-panel-in 0.3s ease-out;
}

.tut-goals li.done::before { background: var(--gold); }

.tut-panel-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1.3rem;
}

.tut-panel-actions .hidden { display: none; }

.tut-panel-actions button { white-space: nowrap; }

.tut-panel-nav {
  display: flex;
  gap: 0.6rem;
  margin-left: auto;  /* a destra anche da sola */
}
/* Riga senza pulsanti visibili (passo con obiettivi, senza «Indietro»): niente spazio vuoto */
#tutorial-panel .tut-panel-actions:not(:has(button:not(.hidden))) { display: none; }

/* «Indietro» alla prima sezione della carta: nascosto ma tiene il posto */
.tut-panel-actions .invisible { visibility: hidden; }

#tutorial-panel {
  position: fixed;
  z-index: 160;
  width: min(400px, calc(100vw - 24px));
  animation: tutorial-panel-in 0.3s ease-out;
}

#tutorial-panel.hidden { display: none !important; }

/* Mentre si trascina una carta (drag.js) il pannello del tutorial sparisce:
   starebbe in mezzo. Ricompare al rilascio */
#tutorial-panel { transition: opacity 0.15s; }
body.dragging-card #tutorial-panel { opacity: 0; pointer-events: none; }

/* Più largo quando contiene lo schema della Battaglia */
#tutorial-panel.tut-panel-wide { width: min(560px, calc(100vw - 24px)); }

/* Schema della Battaglia nel tutorial (tutorial_diagram.js): i due lati con i
   loro valori, gli scontri e il risultato. I rombi riprendono le
   Caratteristiche delle carte. */
.bd { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.7rem; }
.bd-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.bd-side {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}
.bd-title { color: var(--gold-light); font-weight: bold; font-size: 0.95rem; }
.bd-sub { color: var(--text-dim); font-size: 0.78rem; line-height: 1.3; margin-bottom: 0.2rem; }
.bd-stat { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.45rem; }
.bd-label { display: flex; flex-direction: column; line-height: 1.2; }
.bd-label b { color: var(--card-cream); font-size: 0.95rem; }
.bd-from { color: var(--text-dim); font-size: 0.78rem; }
.bd-dia {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  margin: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
  background: var(--card-ink);
  border: 2px solid var(--gold);
}
.bd-dia b { transform: rotate(-45deg); color: var(--card-cream); font-size: 0.95rem; }
.bd-dia.gold { background: var(--gold); }
.bd-dia.gold b { color: var(--card-ink); }
.bd-head { color: var(--gold-light); font-size: 0.78rem; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
.bd-rows { display: flex; flex-direction: column; gap: 0.35rem; }
.bd-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--card-cream);
  font-weight: bold;
  font-size: 0.95rem;
}
.bd-total {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--card-cream);
  font-weight: bold;
  font-size: 0.95rem;
}
.bd-vs { color: var(--text-dim); font-weight: normal; font-style: italic; }
.bd-arrow { color: var(--gold-light); }
.bd-pass { color: var(--gold-light); }
.bd-pass.none { color: var(--text-dim); font-style: italic; font-weight: normal; }

#tutorial-panel.spotlight-panel-placed {
  transition: left 0.38s ease, top 0.38s ease;
}

@keyframes tutorial-panel-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Tutorial, lettura di una carta dentro il suo dettaglio: un riquadro dorato
   si sposta sulla sezione spiegata (la sua ombra, ritagliata dalla carta,
   scurisce il resto) e il pannello accanto la spiega. Finché la lettura non è
   finita la carta non si gira e i pulsanti del dettaglio restano spenti. */
.card-read-focus {
  position: absolute;
  z-index: 2;
  border: 3px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 0 0 200vmax rgba(10, 5, 0, 0.62), 0 0 18px var(--gold);
  transition: left 0.35s ease, top 0.35s ease, width 0.35s ease, height 0.35s ease;
  pointer-events: none;
}

.card-flip.reading { pointer-events: none; }
.card-flip.reading .card-flip-inner { overflow: hidden; border-radius: 18px; }

/* Durante la lettura niente «Gioca», «Chiudi» e frecce: si esce con «Ho capito».
   visibility e non display, così la carta non si sposta sotto il pannello */
#card-detail-overlay.reading #card-image-footer,
#card-detail-overlay.reading #card-detail-footer {
  visibility: hidden;
  pointer-events: none;
}
#card-detail-overlay.reading .card-flip-hint { visibility: hidden; }
/* Le frecce tra le carte hanno visibility inline (renderer.js): vincerebbe sulla barra nascosta */
#card-detail-overlay.reading .card-nav-btn { visibility: hidden !important; }
/* Frecce ‹ › dei pannelli del tutorial: in Caudex sono piccole, si ingrandiscono
   (classe messa da app.js solo quando il pulsante contiene una freccia) */
.tut-arrow { font-size: 1.6em; line-height: 1; padding-top: 0.15rem; padding-bottom: 0.3rem; min-width: 2.6em; }


/* Posizione calcolata in app.js: accanto alla carta, o sotto se non c'è spazio */
#card-read {
  position: fixed;
  z-index: 5;
  width: min(380px, calc(100vw - 2rem));
}

/* ==================== LANCIO DEL D10 ==================== */
/* Finestra di dice.js: nome della carta, motivo del lancio, dado 3D (canvas)
   ed esito. Stesso stile delle finestre di gioco. Un clic la chiude subito. */
.dice-overlay {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.7);
  animation: dice-fade 0.2s ease-out;
  cursor: pointer;
}
.dice-overlay[hidden] { display: none; }
.dice-panel {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem 0.3rem;  /* cornice a bastione (.menu-frame) */
  text-align: center;
  font-family: 'Caudex', Georgia, serif;
  animation: dice-pop 0.28s cubic-bezier(.2, 1.4, .4, 1);
}
.dice-reason {
  color: var(--text);
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.3;
}
.dice-canvas { display: block; position: relative; z-index: 1; pointer-events: none; }
.dice-result {
  min-height: 2rem;
  line-height: 1.25;
  color: var(--text-dim);
  font-size: 1.05rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s;
}
.dice-result.shown { opacity: 1; transform: none; }
.dice-num { margin-right: 0.45rem; vertical-align: -0.1em; font-size: 1.7rem; font-weight: 700; color: var(--gold-light); }
.dice-result.ok .dice-outcome { color: var(--green-light); font-weight: 700; }
.dice-result.ko .dice-outcome { color: var(--text-dim); }
@keyframes dice-fade { from { opacity: 0; } }
@keyframes dice-pop { from { opacity: 0; transform: scale(0.85); } }
@media (prefers-reduced-motion: reduce) {
  .dice-overlay, .dice-panel { animation: none; }
}

/* ==================== CORNICE A BASTIONE ==================== */
/* Pannelli dei menu: bordi dritti e angoli che sporgono a punta, come i
   bastioni di una fortezza. Il disegno è in assets/frames/ e si applica con
   border-image (lo sfondo è il fill dell'SVG), così le punte restano della
   stessa misura a ogni dimensione; --frame-size ne regola la scala. Il
   bordo visibile sta a circa metà del bordo CSS: il padding va ridotto di
   conseguenza. Sta in fondo al file per prevalere sugli stili dei pannelli. */
.menu-frame {
  --frame-normal: url('/assets/frames/bastione.svg');
  --frame-hover:  url('/assets/frames/bastione-oro.svg');
  --frame-img: var(--frame-normal);
  --frame-fill: rgba(44, 24, 0, 0.8);
  --u: calc(var(--frame-size, 28px) / 30);
  border: var(--frame-size, 28px) solid transparent;
  border-image: var(--frame-img) 30 fill / var(--frame-size, 28px) stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  position: relative;
  isolation: isolate;
  transition: filter 0.2s ease;
}
/* Il marrone è un riempimento unico con la sagoma esatta della cornice
   (rettangolo più punte, clip-path; --u = 1/30 del bordo, come le unità degli
   SVG), steso fin quasi al centro del tratto dorato. Dentro l'immagine,
   stirata a pezzi, la trasparenza lascerebbe righe più scure nei punti di
   taglio; con più riempimenti affiancati (rettangolo + punte) resterebbe una
   sottile giuntura chiara. */
.menu-frame::before {
  content: '';
  position: absolute;
  inset: calc(var(--frame-size, 28px) * -1);  /* tutto il box, bordo compreso */
  z-index: -1;
  background: var(--frame-fill);
  clip-path: var(--frame-clip);
  pointer-events: none;
}
.menu-frame-small {
  --frame-size: 20px;
  --frame-normal: url('/assets/frames/bastione-piccola.svg');
  --frame-hover:  url('/assets/frames/bastione-piccola-oro.svg');
}

/* Sagoma del riempimento per ogni forma di cornice */
.menu-frame { --frame-clip: polygon(calc(16.6 * var(--u)) calc(26 * var(--u)), calc(6 * var(--u)) calc(6 * var(--u)), calc(26 * var(--u)) calc(16.6 * var(--u)), calc(100% - 26 * var(--u)) calc(16.6 * var(--u)), calc(100% - 6 * var(--u)) calc(6 * var(--u)), calc(100% - 16.6 * var(--u)) calc(26 * var(--u)), calc(100% - 16.6 * var(--u)) calc(100% - 26 * var(--u)), calc(100% - 6 * var(--u)) calc(100% - 6 * var(--u)), calc(100% - 26 * var(--u)) calc(100% - 16.6 * var(--u)), calc(26 * var(--u)) calc(100% - 16.6 * var(--u)), calc(6 * var(--u)) calc(100% - 6 * var(--u)), calc(16.6 * var(--u)) calc(100% - 26 * var(--u))); }
.menu-frame-small { --frame-clip: polygon(calc(16.6 * var(--u)) calc(24 * var(--u)), calc(12 * var(--u)) calc(12 * var(--u)), calc(24 * var(--u)) calc(16.6 * var(--u)), calc(100% - 24 * var(--u)) calc(16.6 * var(--u)), calc(100% - 12 * var(--u)) calc(12 * var(--u)), calc(100% - 16.6 * var(--u)) calc(24 * var(--u)), calc(100% - 16.6 * var(--u)) calc(100% - 24 * var(--u)), calc(100% - 12 * var(--u)) calc(100% - 12 * var(--u)), calc(100% - 24 * var(--u)) calc(100% - 16.6 * var(--u)), calc(24 * var(--u)) calc(100% - 16.6 * var(--u)), calc(12 * var(--u)) calc(100% - 12 * var(--u)), calc(16.6 * var(--u)) calc(100% - 24 * var(--u))); }
.menu-frame-alto { --frame-clip: polygon(calc(16.6 * var(--u)) calc(26 * var(--u)), calc(6 * var(--u)) calc(6 * var(--u)), calc(26 * var(--u)) calc(16.6 * var(--u)), calc(100% - 26 * var(--u)) calc(16.6 * var(--u)), calc(100% - 6 * var(--u)) calc(6 * var(--u)), calc(100% - 16.6 * var(--u)) calc(26 * var(--u)), calc(100% - 16.6 * var(--u)) calc(100% - 16.6 * var(--u)), calc(16.6 * var(--u)) calc(100% - 16.6 * var(--u))); }
.menu-frame-basso { --frame-clip: polygon(calc(16.6 * var(--u)) calc(16.6 * var(--u)), calc(100% - 16.6 * var(--u)) calc(16.6 * var(--u)), calc(100% - 16.6 * var(--u)) calc(100% - 26 * var(--u)), calc(100% - 6 * var(--u)) calc(100% - 6 * var(--u)), calc(100% - 26 * var(--u)) calc(100% - 16.6 * var(--u)), calc(26 * var(--u)) calc(100% - 16.6 * var(--u)), calc(6 * var(--u)) calc(100% - 6 * var(--u)), calc(16.6 * var(--u)) calc(100% - 26 * var(--u))); }
.menu-frame-centro { --frame-clip: polygon(calc(16.6 * var(--u)) calc(16.6 * var(--u)), calc(100% - 16.6 * var(--u)) calc(16.6 * var(--u)), calc(100% - 16.6 * var(--u)) calc(100% - 16.6 * var(--u)), calc(16.6 * var(--u)) calc(100% - 16.6 * var(--u))); }
.menu-frame-sinistra { --frame-clip: polygon(calc(16.6 * var(--u)) calc(26 * var(--u)), calc(6 * var(--u)) calc(6 * var(--u)), calc(26 * var(--u)) calc(16.6 * var(--u)), calc(100% - 16.6 * var(--u)) calc(16.6 * var(--u)), calc(100% - 16.6 * var(--u)) calc(100% - 16.6 * var(--u)), calc(26 * var(--u)) calc(100% - 16.6 * var(--u)), calc(6 * var(--u)) calc(100% - 6 * var(--u)), calc(16.6 * var(--u)) calc(100% - 26 * var(--u))); }
.menu-frame-destra { --frame-clip: polygon(calc(16.6 * var(--u)) calc(16.6 * var(--u)), calc(100% - 26 * var(--u)) calc(16.6 * var(--u)), calc(100% - 6 * var(--u)) calc(6 * var(--u)), calc(100% - 16.6 * var(--u)) calc(26 * var(--u)), calc(100% - 16.6 * var(--u)) calc(100% - 26 * var(--u)), calc(100% - 6 * var(--u)) calc(100% - 6 * var(--u)), calc(100% - 26 * var(--u)) calc(100% - 16.6 * var(--u)), calc(16.6 * var(--u)) calc(100% - 16.6 * var(--u))); }

/* Pannelli affiancati: le punte restano solo sui lati liberi, e i pannelli si
   avvicinano sovrapponendo i bordi trasparenti (il tratto visibile sta a
   16/30 del bordo CSS, quindi 32/30 del bordo farebbero coincidere i due tratti,
   +8px lasciano un po' di respiro tra un pannello e l'altro). alto/centro/basso: pila verticale;
   sinistra/destra: coppia orizzontale. */
.menu-frame-alto     { --frame-normal: url('/assets/frames/bastione-alto.svg');     --frame-hover: url('/assets/frames/bastione-alto-oro.svg'); }
.menu-frame-centro   { --frame-normal: url('/assets/frames/bastione-centro.svg');   --frame-hover: url('/assets/frames/bastione-centro-oro.svg'); }
.menu-frame-basso    { --frame-normal: url('/assets/frames/bastione-basso.svg');    --frame-hover: url('/assets/frames/bastione-basso-oro.svg'); }
.menu-frame-sinistra { --frame-normal: url('/assets/frames/bastione-sinistra.svg'); --frame-hover: url('/assets/frames/bastione-sinistra-oro.svg'); }
.menu-frame-destra   { --frame-normal: url('/assets/frames/bastione-destra.svg');   --frame-hover: url('/assets/frames/bastione-destra-oro.svg'); }
.menu-frame-centro,
.menu-frame-basso    { margin-top: calc(var(--frame-size, 28px) * -1.0667 + 8px); }
.menu-frame-destra   { margin-left: calc(var(--frame-size, 28px) * -1.0667 + 8px); }

/* Pannelli cliccabili: al passaggio la cornice si fa d'oro e si accende (senza
   spostarsi né ingrandirsi) */
button.menu-frame,
.menu-frame.clickable { cursor: pointer; }
button.menu-frame:hover,
.menu-frame.clickable:hover,
.menu-frame.menu-frame-gold {
  --frame-img: var(--frame-hover);
  --frame-fill: rgba(50, 28, 2, 0.8);
}
button.menu-frame:hover,
.menu-frame.clickable:hover {
  filter: drop-shadow(0 0 6px rgba(251, 196, 2, 0.18));
  box-shadow: none;
}
.difficulty-easy.menu-frame:hover { --frame-img: url('/assets/frames/bastione-verde.svg'); }
.difficulty-hard.menu-frame:hover { --frame-img: url('/assets/frames/bastione-rosso.svg'); }

/* Fregio sotto i titoli dei pannelli */
.fregio::after {
  content: '';
  display: block;
  width: 140px;
  height: 12px;
  margin: 0.45rem auto 0;
  background: url('/assets/frames/fregio.svg') center / contain no-repeat;
}

/* Carte giocate trascinandole dalla mano (drag.js): la copia che segue il
   puntatore, che si illumina sopra un posto valido, e le zone dove si può
   lasciare (illuminate appena, di più quando la carta ci è sopra). */
.motion-ghost.drag-ghost {
  z-index: 330;
  rotate: 0deg;
  translate: none;
  scale: 1.06;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.12s;
}
.motion-ghost.drag-ghost.drop-ok {
  box-shadow: 0 0 0 2px rgba(251, 196, 2, 0.95), 0 0 24px 6px rgba(251, 196, 2, 0.55);
}
/* Schieramento: i miei Guerrieri si possono prendere e spostare (app.js, bindFieldDrag) */
#my-field.can-reposition .card.in-field[data-type="warrior"] {
  cursor: grab;
  box-shadow: 0 0 0 1px rgba(251, 196, 2, 0.45), 0 0 5px rgba(251, 196, 2, 0.35);
}
#my-field.can-reposition .card.in-field[data-type="warrior"]:hover {
  box-shadow: 0 0 0 2px rgba(251, 196, 2, 0.8), 0 0 6px rgba(251, 196, 2, 0.5);
}
/* «Completa»: le Costruzioni completabili si accendono e si cliccano (app.js) */
#my-village .card.completable {
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(251, 196, 2, 0.6), 0 0 5px rgba(251, 196, 2, 0.4);
}
#my-village .card.completable:hover {
  box-shadow: 0 0 0 2px rgba(251, 196, 2, 0.9), 0 0 6px rgba(251, 196, 2, 0.55);
}
/* Costruzione assegnata (Trono) completabile: si accende la carta che sbuca
   sotto il Guerriero, che si clicca */
#my-field .card.completable-host { cursor: pointer; }
#my-field .mc-under.completable {
  border-radius: 5.7cqw;
  box-shadow: 0 0 0 1px rgba(251, 196, 2, 0.6), 0 0 5px rgba(251, 196, 2, 0.4);
}
#my-field .card.completable-host:hover > .mc-under.completable {
  box-shadow: 0 0 0 2px rgba(251, 196, 2, 0.9), 0 0 6px rgba(251, 196, 2, 0.55);
}
/* In attesa di una scelta: sotto i selettori (modal-overlay 200) */
.motion-ghost.drag-ghost.drag-held { z-index: 190; }
.card.drag-source { opacity: 0.35; }
.card.drag-pending { opacity: 0; }
body.dragging-card { user-select: none; -webkit-user-select: none; }
.drop-zone {
  box-shadow: inset 0 0 0 2px rgba(251, 196, 2, 0.35), inset 0 0 18px rgba(251, 196, 2, 0.12);
  transition: box-shadow 0.12s, background-color 0.12s;
}
.drop-over {
  box-shadow: inset 0 0 0 2px rgba(251, 196, 2, 0.9), inset 0 0 26px rgba(251, 196, 2, 0.35);
  background-color: rgba(251, 196, 2, 0.08);
}
body.dragging-card { cursor: grabbing; }
body.dragging-card .hand-preview { display: none !important; }
/* Guerriero su cui si sta per lasciare il Trono: l'immagine coprirebbe
   l'ombra interna delle zone, quindi bagliore esterno */
.card.drop-over {
  border-color: rgba(251, 196, 2, 0.95);
  box-shadow: 0 0 0 2px rgba(251, 196, 2, 0.9), 0 0 6px 1px rgba(251, 196, 2, 0.55);
}

/* Finestre di gioco con la cornice (finestre, dettaglio carta, dado, fine
   partita): riempimento quasi pieno, stanno sopra il tavolo */
.menu-frame.frame-solid { --frame-fill: rgba(44, 24, 0, 0.96); }