/* Combattenti ed Esploratori dei Mari: interfaccia del gemello digitale.
   Sistema di design versione 2 (comune al Cantiere dei Mari): docs/design-system.md */

@font-face { font-family: 'Cormorant Garamond'; src: url('../assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../assets/fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'Fell'; src: url('../assets/fonts/im-fell-english-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fell'; src: url('../assets/fonts/im-fell-english-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('../assets/fonts/alegreya-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('../assets/fonts/alegreya-sans-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('../assets/fonts/alegreya-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('../assets/fonts/alegreya-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('../assets/fonts/alegreya-sans-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #f3ecdc;
  --paper-2: #e9dfc7;
  --paper-3: #fcf9f1;
  --sea: #d2e3df;
  --sea-2: #b8d2cb;
  --sea-line: #8fb3a9;
  --ink: #2a1e14;
  --ink-2: #5b4936;
  --ink-3: #7a6650;
  --rule: rgba(42, 30, 20, 0.16);
  --magenta: #a3195b;
  --magenta-tint: #f3dfe8;
  --buff: #e4cc92;
  --buff-ink: #6b5717;
  --key-red: #b23a2e;
  --key-blue: #2463a6;
  --heart: #c2332b;
  --gold: #c1952a;
  --ok: #2f7a4b;

  --p0: #127a85; --p0-on: #ffffff; --p0-tint: #d6ebec;
  --p1: #c17a14; --p1-on: #0e171d; --p1-tint: #f3e5cc;
  --p2: #6a4aa5; --p2-on: #ffffff; --p2-tint: #e5ddf1;
  --p3: #4f7a35; --p3-on: #ffffff; --p3-tint: #dfe9d6;
  --accent: var(--p0);
  --accent-on: var(--p0-on);
  --accent-tint: var(--p0-tint);

  --font-ui: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  --font-print: 'Fell', 'Iowan Old Style', Georgia, serif;
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --deck: #2a1a10; --deck-2: #3a2515; --deck-ink: #f1e6cf; --deck-ink-2: #cdb894;
  --brass: #8a6420; --brass-bright: #c9a04e; --brass-line: rgba(138, 100, 32, 0.38);
  --sea-glow: #14907f;
  --rope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M0 7C3 7 5 1 9 1' fill='none' stroke='%23C9A04E' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M7 7C10 7 12 1 16 1' fill='none' stroke='%238A6420' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");

  --t-13: 0.8125rem; --t-15: 0.9375rem; --t-17: 1.0625rem; --t-22: 1.375rem; --t-30: 1.875rem; --t-48: 3rem;

  --r-card: 10px;
  --r-sheet: 18px;
  --gutter: 16px;
  --float-shadow: 0 28px 56px -30px rgba(42, 26, 16, 0.55), 0 2px 6px rgba(42, 26, 16, 0.10);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-move: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 120ms; --t-state: 180ms; --t-enter: 280ms; --t-sheet: 380ms;
}

[data-player='1'] { --accent: var(--p1); --accent-on: var(--p1-on); --accent-tint: var(--p1-tint); }
[data-player='2'] { --accent: var(--p2); --accent-on: var(--p2-on); --accent-tint: var(--p2-tint); }
[data-player='3'] { --accent: var(--p3); --accent-on: var(--p3-on); --accent-tint: var(--p3-tint); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-17);
  line-height: 1.45;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-tint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.print { font-family: var(--font-print); font-weight: 400; letter-spacing: 0.005em; }

/* --- Icone --- */
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }

/* --- Pulsanti --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border: 1.5px solid var(--ink); border-radius: var(--r-card);
  background: var(--paper-3); color: var(--ink);
  font-weight: 700; font-size: var(--t-15); line-height: 1.2; text-align: center;
  transition: background-color var(--t-state) ease, color var(--t-state) ease, border-color var(--t-state) ease, transform var(--t-press) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); font-size: var(--t-17); }
.btn--quiet { border-color: transparent; background: transparent; }
.btn--danger { border-color: var(--heart); color: var(--heart); }
.btn--wide { width: 100%; }
.btn--small { min-height: 36px; padding: 6px 12px; font-size: var(--t-13); }
.btn--icon { padding: 0; width: 44px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { background: var(--paper-2); }
  .btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
  .btn--quiet:hover:not(:disabled) { background: var(--paper-2); }
}
@media (pointer: coarse) { .btn--small { min-height: 44px; } }

/* --- Struttura dell'app --- */
.app { min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px var(--gutter);
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 20;
}
.topbar__title { font-family: var(--font-print); font-size: var(--t-17); white-space: nowrap; }
.topbar__turn { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.topbar__actions { display: flex; gap: 4px; }


.chip {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--chip, var(--accent)); color: var(--chip-on, var(--accent-on));
  font-weight: 800; font-size: var(--t-15); flex: none;
  box-shadow: inset 0 0 0 1.5px rgba(23, 38, 48, 0.55);
}
.chip--p0 { --chip: var(--p0); --chip-on: var(--p0-on); }
.chip--p1 { --chip: var(--p1); --chip-on: var(--p1-on); }
.chip--p2 { --chip: var(--p2); --chip-on: var(--p2-on); }
.chip--p3 { --chip: var(--p3); --chip-on: var(--p3-on); }
.chip--small { width: 22px; height: 22px; font-size: var(--t-13); }

.table {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'chart' 'turn' 'supply';
  gap: 0;
}
.supply { grid-area: supply; }
.chart-area { grid-area: chart; }
.turn { grid-area: turn; }

@media (min-width: 1100px) {
  .app { height: 100dvh; min-height: 0; }
  .table {
    grid-template-columns: 300px minmax(0, 1fr) 360px;
    grid-template-areas: 'supply chart turn';
    min-height: 0;
    overflow: hidden;
  }
  .supply, .turn { overflow-y: auto; overscroll-behavior: contain; }
  .supply { background: var(--paper-2); }
  .turn { background: var(--paper-2); display: flex; flex-direction: column; }
}
@media (min-width: 1500px) {
  .table { grid-template-columns: 330px minmax(0, 1fr) 400px; }
}

.panel { padding: 20px var(--gutter); display: grid; gap: 14px; }
.panel + .panel { padding-top: 4px; }
.panel__title { font-size: var(--t-15); font-weight: 800; display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.panel__title small { font-weight: 500; color: var(--ink-2); font-size: var(--t-13); }
.hint { color: var(--ink-2); font-size: var(--t-15); }
.hint--warn { color: var(--magenta); font-weight: 700; }

/* --- Carta nautica --- */
.chart-area { display: grid; place-items: center; padding: 8px; min-height: 0; position: relative; }
.chart { width: 100%; height: 100%; max-height: calc(100dvh - 90px); display: block; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
@media (max-width: 1099px) { .chart { max-height: 72dvh; } .chart-area { padding: 4px 0 0; } }

.chart .frame { fill: none; stroke: var(--ink); }
.chart .frame--outer { stroke-width: 1.6; }
.chart .frame--inner { stroke-width: 0.6; }
.chart .tick { stroke: var(--ink); stroke-width: 0.6; }
.chart .coord.coord--num { font-family: var(--font-ui); font-style: normal; font-weight: 700; font-size: 11px; fill: var(--ink-2); }
.chart .coord { font-family: var(--font-print); font-style: italic; font-size: 14px; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.chart .sea { fill: var(--sea); stroke: var(--sea-line); stroke-width: 0.8; }
.chart .sea--deep { fill: var(--sea-2); }
:is(.chart, .tile-thumb) .tile-face { fill: var(--paper-3); stroke: var(--ink); stroke-width: 1.2; }
:is(.chart, .tile-thumb) .tile-face--port { fill: var(--buff); }
:is(.chart, .tile-thumb) .route { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; fill: none; }
:is(.chart, .tile-thumb) .route--oneway { stroke: var(--magenta); stroke-width: 2.4; stroke-dasharray: 4 3.5; }
:is(.chart, .tile-thumb) .arrow { fill: var(--magenta); }
:is(.chart, .tile-thumb) .cove-line { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 2 2.6; }
:is(.chart, .tile-thumb) .cove { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.2; }
:is(.chart, .tile-thumb) .waypoint { fill: var(--paper-3); stroke: var(--ink); stroke-width: 1.4; }
:is(.chart, .tile-thumb) .hub { fill: var(--paper-3); stroke: var(--ink); stroke-width: 1.6; }
:is(.chart, .tile-thumb) .tile-no { font-family: var(--font-print); font-style: italic; font-size: 10px; fill: var(--ink-2); text-anchor: middle; dominant-baseline: central; }
.chart .port-ring { fill: none; stroke-width: 3; }
.chart .chest-marker { color: var(--ink); }
.chart .chest-disc { fill: var(--gold); stroke: var(--ink); stroke-width: 1.4; }

.chart .target { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; cursor: pointer; }
.chart .target-plus { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; pointer-events: none; }
.chart .target--chosen { stroke-dasharray: none; }
.chart .push-target { fill: var(--magenta-tint); stroke: var(--magenta); stroke-width: 2.4; cursor: pointer; }
.chart .hop { fill: var(--paper-3); stroke: var(--accent); stroke-width: 3.2; cursor: pointer; transition: r var(--t-state) var(--ease-out); }
.chart .hop:focus { outline: none; }
.chart .hop:focus-visible, .chart .hop.is-hover { fill: var(--accent); stroke: var(--ink); stroke-width: 2; r: 11; }
.chart .hop-area { fill: transparent; cursor: pointer; }
.chart .trail { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; pointer-events: none; }
.chart .draft { cursor: pointer; }
.chart .draft .tile-face { stroke: var(--accent); stroke-width: 3; }
.chart .pawn-body { stroke: var(--ink); stroke-width: 1.6; }
.chart .pawn-letter { font-family: var(--font-ui); font-weight: 800; font-size: 13px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.chart .pawn { transition: transform 170ms var(--ease-move); }
.chart .pawn--active .pawn-body { stroke-width: 2.4; }
.chart .item { pointer-events: none; }
.chart .stamp { animation: stamp 320ms var(--ease-out); transform-box: fill-box; transform-origin: center; }
@keyframes stamp { from { transform: scale(1.08); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
.chart .appear { animation: appear 420ms var(--ease-out); transform-box: fill-box; transform-origin: center; }
@keyframes appear { 0% { transform: scale(0.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); } }

.chart-tools { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }

/* --- Componenti stampati: tessere nel mercato, carte --- */
.market { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.market-item { display: grid; gap: 4px; justify-items: stretch; min-width: 0; }
.market-item__tag { font-size: var(--t-13); font-weight: 700; color: var(--ink-2); text-align: center; min-height: 1.3em; }
.market-item__tag.tag--ok { color: color-mix(in srgb, var(--accent) 70%, var(--ink)); }
.market-item__tag.tag--no { color: var(--magenta); }
.market-item__swap { padding-inline: 4px; }
.market-tile {
  position: relative; aspect-ratio: 1; border: 1.5px solid transparent; border-radius: var(--r-card);
  background: var(--paper-3); padding: 4px; display: grid; place-items: center;
  transition: border-color var(--t-state) ease, transform var(--t-press) var(--ease-out);
}
.market-tile svg { width: 100%; height: 100%; overflow: visible; }
.market-tile[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-tint); }
.market-tile:active:not(:disabled) { transform: scale(0.97); }
.market-tile:disabled { cursor: default; }
.market-tile .tag { position: absolute; left: 6px; bottom: 5px; font-size: var(--t-13); font-weight: 700; color: var(--ink-2); }
.market-tile .tag--ok { color: var(--accent); color: color-mix(in srgb, var(--accent) 75%, var(--ink)); }
.market-tile .tag--no { color: var(--magenta); }
@media (hover: hover) and (pointer: fine) { .market-tile:hover:not(:disabled) { border-color: var(--ink); } }

.stack-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.stack { background: var(--paper-3); border-radius: var(--r-card); padding: 10px 12px; display: grid; gap: 2px; }
.stack__count { font-size: var(--t-22); font-weight: 800; line-height: 1.1; }
.stack__label { font-size: var(--t-13); color: var(--ink-2); }

/* Carte: formato mini 44 × 68 mm, fisso. Tutto ciò che sta dentro si misura sulla larghezza della carta
   (unità cqi), quindi la carta non si deforma mai: cambia solo la scala. I pulsanti stanno fuori. */
.card {
  --card-w: 124px;
  width: var(--card-w); height: auto; aspect-ratio: 44 / 68; min-height: 0; flex: none;
  container-type: inline-size; overflow: hidden; position: relative;
  border-radius: calc(var(--card-w) * 0.068);
  background: var(--paper-3);
  box-shadow: inset 0 0 0 1.5px var(--ink), inset 0 0 0 calc(var(--card-w) * 0.04) var(--paper-3), inset 0 0 0 calc(var(--card-w) * 0.04 + 1px) var(--rule);
  padding: calc(var(--card-w) * 0.085) calc(var(--card-w) * 0.07) calc(var(--card-w) * 0.07);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: center; row-gap: calc(var(--card-w) * 0.03);
  text-align: center; color: var(--ink);
}
.card__name { font-family: var(--font-print); font-size: 13.4cqi; line-height: 1.05; text-wrap: balance; align-self: start; }
.card__art { width: 42cqi; height: 42cqi; color: var(--ink); stroke-width: 1.4; }
.card__text { font-size: 10.6cqi; line-height: 1.22; color: var(--ink-2); text-wrap: pretty; align-self: end; }
.card--back { background: var(--ink); color: var(--paper); align-content: center; grid-template-rows: auto auto; row-gap: calc(var(--card-w) * 0.08); box-shadow: inset 0 0 0 calc(var(--card-w) * 0.05) var(--ink), inset 0 0 0 calc(var(--card-w) * 0.05 + 1px) rgba(255, 255, 255, 0.35); }
.card--back .card__name { color: var(--paper); font-style: italic; font-size: 12cqi; align-self: center; }
.card--back .card__art { color: #e9ddc2; width: 46cqi; height: 46cqi; stroke-width: 1.1; }
.card--back-event { background: #1e3f46; box-shadow: inset 0 0 0 calc(var(--card-w) * 0.05) #1e3f46, inset 0 0 0 calc(var(--card-w) * 0.05 + 1px) rgba(255, 255, 255, 0.35); }
/* Maree: dorsi dal mare profondo al quasi nero; il numero di onde le distingue anche senza colore. */
.card--tide-2 { background: #2b3b35; box-shadow: inset 0 0 0 calc(var(--card-w) * 0.05) #2b3b35, inset 0 0 0 calc(var(--card-w) * 0.05 + 1px) rgba(255, 255, 255, 0.35); }
.card--tide-3 { background: #12171b; box-shadow: inset 0 0 0 calc(var(--card-w) * 0.05) #12171b, inset 0 0 0 calc(var(--card-w) * 0.05 + 1px) rgba(255, 255, 255, 0.3); }
.card--back .tide-mark.card__art { width: 40cqi; height: 40cqi; }
.card__tide { position: absolute; top: calc(var(--card-w) * 0.06); right: calc(var(--card-w) * 0.06); width: 13cqi; height: 13cqi; color: var(--ink-2); }
.card--public { grid-template-rows: auto minmax(0, 1fr) auto; }
.card--public .card__art { width: 34cqi; height: 34cqi; color: var(--ink-2); }
.card--public .card__text { font-size: 9.2cqi; color: var(--ink); }
.card__stars .full { color: var(--gold); fill: var(--gold-light, #e2be5c); stroke: var(--brass, #8a6420); stroke-width: 1.3; }
.tide-mark { display: inline-block; flex: none; }
.card--warn { box-shadow: inset 0 0 0 2.5px var(--magenta), inset 0 0 0 calc(var(--card-w) * 0.04) var(--paper-3), inset 0 0 0 calc(var(--card-w) * 0.04 + 1px) var(--rule); }
.card--event { --card-w: 148px; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.card--event .card__art { width: 44cqi; height: 44cqi; }
.card__hearts { display: flex; gap: 1.5cqi; justify-content: center; }
.card__hearts .icon { width: 11cqi; height: 11cqi; }
.card__hearts .full { color: var(--heart); fill: var(--heart); stroke: var(--ink); stroke-width: 1.2; }
.card__hearts .gone { color: var(--ink-3); }
.card__rewards { margin: 0; display: grid; gap: 1.6cqi; width: 100%; align-self: end; }
.card__reward { display: flex; justify-content: space-between; gap: 3cqi; font-size: 8.8cqi; line-height: 1.15; text-align: left; padding: 1.4cqi 2.2cqi; border-radius: 2cqi; }
.card__reward dt { font-weight: 800; white-space: nowrap; display: flex; align-items: center; }
/* i colpi che servono: le rose dei dadi. Sulla carta in ceralacca; quelle già messe a segno sbiadiscono */
.roses { display: inline-flex; gap: 0.6cqi; align-items: center; }
.roses .icon { color: var(--face-hit); }
.roses .is-done { color: var(--ink-3); opacity: 0.38; }
.card__reward .roses .icon { width: 12cqi; height: 12cqi; }
.card__need .roses { gap: 1.8cqi; }
.card__need .roses .icon { width: 14cqi; height: 14cqi; }
.card__reward dd { margin: 0; color: var(--ink-2); text-align: right; }
.card__reward.is-on { background: rgba(14, 111, 98, 0.14); }
.card__reward.is-on dd { color: var(--ink); font-weight: 700; }
/* Carte coordinata: la casella scritta, la mappa in miniatura e l'ancora delle caselle da porto. */
.card--coord { grid-template-rows: auto minmax(0, 1fr); row-gap: calc(var(--card-w) * 0.05); }
.card__coord { font-size: 21cqi; line-height: 1; align-self: center; }
.coord-map { width: 80cqi; height: auto; align-self: center; }
.coord-map polygon { fill: var(--paper-2); stroke: var(--ink-2); stroke-width: 0.9; }
.coord-map polygon.is-on { fill: var(--ink); stroke: var(--ink); }
.card__anchor { color: var(--ink); stroke-width: 1.6; }
.card--back-coord { background: #5a4029; box-shadow: inset 0 0 0 calc(var(--card-w) * 0.05) #5a4029, inset 0 0 0 calc(var(--card-w) * 0.05 + 1px) rgba(255, 255, 255, 0.35); }
.chest-pairs { display: grid; gap: 6px; }
.chest-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; text-align: left; background: none; border: 0; padding: 6px; border-radius: 10px; cursor: pointer; font: inherit; color: inherit; min-height: 44px; }
.chest-row:hover { background: var(--paper-2); }
.chest-row .card { --card-w: 52px; }
.chest-row__text { display: grid; gap: 2px; font-size: var(--t-13); color: var(--ink-2); }
.chest-row__text b { color: var(--ink); font-size: var(--t-15); display: inline-flex; align-items: center; gap: 6px; }
.chest-row__reward { display: inline-flex; align-items: center; gap: 6px; }
.chest-row__reward .icon { width: 16px; height: 16px; flex: none; }
.chest-row__vp .icon { width: 13px; height: 13px; color: var(--brass, #8a6420); fill: var(--gold-light, #e2be5c); }
.chest-row__claim { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; vertical-align: middle; }
.chest-row__claim .icon { width: 14px; height: 14px; }
.slot--cmb { border-color: var(--key-red); }
.slot--exp { border-color: var(--key-blue); }
.card-grid--coord { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
.card-grid--coord .card { --card-w: 100px; }
.slot-side { font-size: var(--t-13); color: var(--ink-2); text-align: center; }
.card-slot { display: grid; gap: 6px; justify-items: center; align-content: start; width: min-content; }
.card-slot__caption { font-size: var(--t-13); color: var(--ink-2); text-align: center; }
.card-slot__actions { display: flex; gap: 4px; width: 100%; }
.card-slot__actions .btn { flex: 1; padding: 6px 4px; min-width: 0; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 10px; justify-items: center; }
.card-grid .card { --card-w: 132px; }
.card-grid .card--event { --card-w: 140px; }
button.card { border: 0; font: inherit; color: inherit; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
button.card:active { transform: scale(0.97); }
button.card:disabled { cursor: default; }

.hand { display: flex; gap: 10px; flex-wrap: wrap; }
.hand-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* --- Plancia del giocatore --- */
.board-sheet { background: var(--paper-3); border-radius: var(--r-card); padding: 14px; display: grid; gap: 12px; }
.board-sheet__head { display: flex; align-items: center; gap: 10px; }
.board-sheet__name { font-weight: 800; font-size: var(--t-17); }
.board-sheet__where { margin-left: auto; font-size: var(--t-13); color: var(--ink-2); }
.track { display: grid; gap: 4px; }
.track__label { font-size: var(--t-13); color: var(--ink-2); display: flex; justify-content: space-between; }
.track__label b { color: var(--ink); }
.pips { display: flex; gap: 3px; align-items: center; flex-wrap: nowrap; }
.pip { width: 15px; height: 15px; border: 1.4px solid var(--ink); border-radius: 3px; background: var(--paper-3); flex: none; }
.pip.on { background: var(--ink); }
.pips--exp .pip.on { background: var(--key-blue); border-color: var(--key-blue); }
.pips--cmb .pip.on { background: var(--key-red); border-color: var(--key-red); }
.pip-gap { width: 7px; flex: none; position: relative; }
.pip-gap::after { content: ''; position: absolute; left: 3px; top: -3px; bottom: -3px; border-left: 1.2px dashed var(--ink-3); }
.vp { display: flex; gap: 2px; }
.vp .icon { width: 18px; height: 18px; stroke-width: 1.3; }
.vp .on { color: var(--gold); fill: var(--gold); stroke: var(--ink); }
.hp { display: flex; gap: 3px; align-items: center; }
.hp .icon { width: 20px; height: 20px; }
.hp .full { color: var(--heart); fill: var(--heart); stroke: var(--ink); stroke-width: 1.2; }
.hp .empty { color: var(--ink-3); }
.hp .locked { color: var(--rule); stroke-dasharray: 2 2; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.slot-tier { background: var(--paper-2); border-radius: 8px; padding: 6px; display: grid; gap: 4px; justify-items: center; }
.slot-tier__label { font-size: 11px; color: var(--ink-2); font-weight: 700; }
.slot-tier__pair { display: flex; gap: 4px; }
.slot { width: 34px; height: 34px; border-radius: 6px; border: 1.4px dashed var(--ink-3); display: grid; place-items: center; background: var(--paper-3); }
.slot--locked { border-style: solid; border-color: transparent; background: transparent; color: var(--ink-3); }
.slot--filled { border-style: solid; border-color: var(--ink); }
.slot .icon { width: 22px; height: 22px; }
.inventory { display: flex; flex-wrap: wrap; gap: 6px; }
.token {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 6px; border-radius: 999px;
  background: var(--paper-2); font-weight: 700; font-size: var(--t-15); min-height: 32px;
}
.token .icon { width: 20px; height: 20px; }
button.token { border: 1.4px solid var(--ink); background: var(--paper-3); }
button.token:active { transform: scale(0.97); }
.token--empty { opacity: 0.45; }

/* --- Avversari --- */
.rival-list { display: grid; gap: 6px; }
.rival {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  background: var(--paper-3); border-radius: var(--r-card); padding: 8px 10px; text-align: left; border: 0;
  min-height: 52px;
}
.rival__name { font-weight: 700; font-size: var(--t-15); line-height: 1.2; }
.rival__meta { display: flex; gap: 10px; font-size: var(--t-13); color: var(--ink-2); flex-wrap: wrap; }
.rival__meta span { display: inline-flex; align-items: center; gap: 3px; }
.rival__meta .icon { width: 15px; height: 15px; }
.rival__vp { font-size: var(--t-22); font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
.rival__vp .icon { width: 18px; height: 18px; fill: var(--gold); stroke: var(--ink); stroke-width: 1.3; }

/* --- Barra delle azioni --- */
.actionbar {
  display: grid; gap: 10px; padding: 14px var(--gutter);
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
.actionbar__status { display: flex; align-items: center; gap: 10px; font-size: var(--t-15); }
.actionbar__status strong { font-size: var(--t-22); line-height: 1; }
.roll-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-15); color: var(--ink-2); }
.actionbar__row { display: flex; gap: 8px; flex-wrap: wrap; }
.actionbar__row .btn { flex: 1 1 auto; }
@media (max-width: 1099px) {
  .actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; box-shadow: 0 -18px 30px -26px rgba(23, 38, 48, 0.5); }
}
@media (min-width: 1100px) { .turn .actionbar { margin-top: auto; position: sticky; bottom: 0; } }
.moves { display: inline-flex; align-items: baseline; gap: 6px; }

/* --- Foglio con schede (tablet e telefono) --- */
.tabs { display: flex; gap: 4px; padding: 10px var(--gutter) 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: 0; background: transparent; padding: 8px 12px; border-radius: 999px; font-weight: 700; font-size: var(--t-15); color: var(--ink-2); min-height: 40px; white-space: nowrap; }
.tab[aria-selected='true'] { background: var(--ink); color: var(--paper); }
@media (min-width: 1100px) { .tabs { display: none; } }
@media (max-width: 1099px) {
  .table[data-tab='turno'] .supply { display: none; }
  .table:not([data-tab='turno']) .turn-sections { display: none; }
  .table { grid-template-areas: 'chart' 'tabs' 'turn' 'supply'; }
  .tabs { grid-area: tabs; }
}

/* --- Diario di bordo --- */
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--t-15); max-height: 320px; overflow-y: auto; }
.log li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--rule); align-items: start; }
.log li .chip { width: 20px; height: 20px; font-size: 11px; }
.log time { color: var(--ink-2); font-size: var(--t-13); }

/* --- Finestre e fogli --- */
dialog { border: 0; padding: 0; background: transparent; color: inherit; max-width: none; max-height: none; }
dialog::backdrop { background: radial-gradient(120% 90% at 50% 45%, rgba(42, 26, 16, 0.38), rgba(26, 15, 8, 0.66)); }
.sheet {
  background: var(--paper); border-radius: var(--r-sheet); box-shadow: var(--float-shadow);
  width: min(960px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  padding: 22px; display: grid; gap: 18px;
}
.sheet--narrow { width: min(520px, calc(100vw - 24px)); }
.sheet__head { display: flex; align-items: center; gap: 12px; }
.sheet__head h2 { font-family: var(--font-print); font-size: var(--t-30); line-height: 1.1; flex: 1; }
dialog[open] .sheet { animation: sheet-in var(--t-sheet) var(--ease-sheet); }
@keyframes sheet-in { from { transform: translateY(16px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) {
  dialog.as-sheet { margin: auto 0 0; width: 100%; }
  dialog.as-sheet .sheet { width: 100%; max-height: 92dvh; border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}

/* --- Combattimento --- */
.combat { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .combat { grid-template-columns: auto minmax(0, 1fr); align-items: start; } }
.combat__main { display: grid; gap: 16px; }
.dice-row { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.die-slot { display: grid; gap: 8px; justify-items: center; }
/* facce dei dadi (dicefaces.js): resina avorio con il simbolo inciso; il dado del movimento è color mare.
   Le vernici sono le stesse del dado 3D: ceralacca (successo), inchiostro di notte (vuoto), mare luminoso (marea) */
:root { --face-hit: #A3301F; --face-calm: #5B6B7C; --face-surge: #0F7F70; }
.die { width: 74px; height: 74px; overflow: visible; color: var(--face-calm); }
.die__body { fill: #FBF5E6; stroke: rgba(42, 30, 20, 0.78); stroke-width: 2.4; }
.die--hit { color: var(--face-hit); }
.die--surge { color: var(--face-surge); }
.die--blank .die__body { fill: transparent; stroke: var(--ink-3); stroke-dasharray: 7 6; }
.die--move .die__body { fill: #224F4D; stroke: #102B2A; }
.die__pip { fill: #F1E8D2; }
/* la risacca in attesa di una scelta: un filo di mare luminoso intorno al dado */
.die--choose .die__body { stroke: var(--face-surge); stroke-width: 4.5; }
.die--healed { opacity: 0.45; }
.die--rolling { animation: tumble 420ms var(--ease-out); }
@keyframes tumble { 0% { transform: rotate(-24deg) scale(0.86); } 55% { transform: rotate(10deg) scale(1.04); } 100% { transform: none; } }
.die-slot__label { font-size: var(--t-13); color: var(--ink-2); min-height: 1.3em; font-weight: 700; }
.die-slot__choice { display: flex; gap: 6px; }
/* le tre facce del dado a simboli, prima del tiro: segno inciso e nome */
.rules .rules__faces { list-style: none; padding-left: 0; display: grid; gap: 6px; }
.rules .rules__faces .icon, .rules .rules__faces svg.icon--sign { width: 26px; height: 26px; margin-right: 8px; vertical-align: -8px; }
.face-legend { display: grid; gap: 6px; justify-items: center; }
.face-legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: var(--t-15); color: var(--ink-2); }
.face-legend li { display: inline-flex; align-items: center; gap: 6px; }
.face-legend strong { color: var(--ink); }
.face-legend .icon, .tally__hits .icon { width: 22px; height: 22px; }
.tally__hits { display: inline-flex; align-items: center; gap: 6px; }
.tally__hits .icon { align-self: center; }
.tally { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; justify-content: center; font-size: var(--t-15); color: var(--ink-2); }
.tally strong { font-size: var(--t-30); color: var(--ink); line-height: 1; }
.verdict { text-align: center; font-family: var(--font-print); font-size: var(--t-30); }
.verdict--won { color: var(--ok); }
.verdict--lost { color: var(--heart); }
.rewards { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.reward-line { display: flex; align-items: center; gap: 8px; font-size: var(--t-13); text-align: left; width: 100%; }
.reward-line .icon { width: 18px; height: 18px; }
.reward-line--on { font-weight: 800; color: var(--ink); }
.hearts { display: flex; gap: 2px; justify-content: center; }
.hearts .icon { width: 20px; height: 20px; }
.hearts .full { color: var(--heart); fill: var(--heart); stroke: var(--ink); stroke-width: 1.2; }
.hearts .gone { color: var(--ink-3); }
.combat-sheet { display: grid; gap: 16px; }
.combat__decide { display: grid; gap: 10px; }
.combat__decide.is-rolling { visibility: hidden; }
.combat__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.combat__actions .btn { min-width: 180px; }
.versus { display: flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--font-print); font-size: var(--t-22); }

/* --- Avvisi --- */
.toasts { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; width: min(460px, calc(100vw - 32px)); pointer-events: none; }
@media (min-width: 1100px) { .toasts { bottom: 24px; } }
.toast {
  background: var(--ink); color: var(--paper); border-radius: 12px; padding: 12px 16px; font-size: var(--t-15);
  box-shadow: var(--float-shadow); display: flex; gap: 10px; align-items: center;
  animation: toast-in var(--t-enter) var(--ease-out);
}
.toast--warn { background: var(--magenta); }
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity 180ms ease, transform 180ms ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- Schermata iniziale --- */
.intro { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.intro__chart { background: var(--sea); position: relative; overflow: hidden; min-height: 38dvh; }
.intro__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__body { padding: clamp(28px, 6vw, 72px) var(--gutter); display: grid; gap: 28px; align-content: center; max-width: 640px; }
@media (min-width: 960px) { .intro__body { padding-left: clamp(32px, 5vw, 72px); padding-right: clamp(32px, 5vw, 72px); } }
.intro__title { font-family: var(--font-print); font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 0.95; letter-spacing: -0.01em; text-wrap: balance; }
.intro__lead { font-size: var(--t-17); color: var(--ink-2); max-width: 46ch; }
.choice { display: grid; gap: 10px; }
.option-group { display: grid; gap: 8px; }
.option-group > span { font-weight: 700; font-size: var(--t-15); }
.segmented { display: inline-flex; background: var(--paper-2); border-radius: 12px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.segmented button { border: 0; background: transparent; border-radius: 9px; min-height: 40px; min-width: 52px; padding: 6px 14px; font-weight: 700; }
.segmented button[aria-pressed='true'] { background: var(--paper-3); box-shadow: inset 0 0 0 1.5px var(--ink); }
details.variants { background: var(--paper-2); border-radius: var(--r-card); padding: 12px 14px; }
details.variants summary { cursor: pointer; font-weight: 700; font-size: var(--t-15); min-height: 28px; }
details.variants[open] summary { margin-bottom: 10px; }
.field { display: grid; gap: 4px; font-size: var(--t-15); }
.field input[type='number'] { width: 90px; min-height: 40px; border: 1.4px solid var(--ink); border-radius: 8px; padding: 6px 10px; background: var(--paper-3); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-15); }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--ink); }
.resume { background: var(--paper-3); border-radius: var(--r-card); padding: 14px; display: grid; gap: 10px; }

/* --- Sala d'attesa con QR --- */
.lobby { display: grid; gap: 18px; }
.qr { background: #fff; padding: 12px; border-radius: var(--r-card); width: 232px; height: 232px; display: grid; place-items: center; }
.qr svg { width: 100%; height: 100%; }
.joinlink { display: flex; gap: 8px; align-items: center; background: var(--paper-2); border-radius: var(--r-card); padding: 8px 8px 8px 12px; font-size: var(--t-13); word-break: break-all; }
.seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.seat { background: var(--paper-3); border-radius: var(--r-card); padding: 10px; display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: var(--t-15); }
.seat--empty { color: var(--ink-2); font-weight: 500; background: var(--paper-2); }

/* --- Telefono del giocatore --- */
.controller { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.controller__head { padding: max(16px, env(safe-area-inset-top)) var(--gutter) 12px; display: flex; gap: 12px; align-items: center; background: var(--accent-tint); }
.controller__head h1 { font-size: var(--t-22); font-weight: 800; line-height: 1.1; }
.controller__head p { font-size: var(--t-15); color: var(--ink-2); }
.controller__body { padding: 16px var(--gutter); display: grid; gap: 18px; align-content: start; }
.controller .hand { justify-content: center; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stat { background: var(--paper-3); border-radius: var(--r-card); padding: 8px; text-align: center; }
.stat strong { display: block; font-size: var(--t-22); line-height: 1.1; }
.stat span { font-size: var(--t-13); color: var(--ink-2); }

/* --- Componenti (riepilogo dei mazzi) --- */
.inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.is-gone { opacity: 0.35; }
.status-tag { font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: var(--paper-2); color: var(--ink-2); }
.status-tag--won, .status-tag--opened { background: #d8eadf; color: var(--ok); }
.status-tag--lost { background: #f4dcda; color: var(--heart); }
.status-tag--inPlay { background: var(--buff); color: var(--buff-ink); }
.coord-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.coord-card { background: var(--paper-3); border-radius: 8px; padding: 10px 0; text-align: center; font-family: var(--font-print); font-size: var(--t-22); }
.subtabs { display: flex; gap: 4px; flex-wrap: wrap; }

.rules { display: grid; gap: 14px; max-width: 68ch; font-size: var(--t-15); }
.rules h3 { font-size: var(--t-17); font-weight: 800; }
.rules ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

.gameover { text-align: center; display: grid; gap: 16px; justify-items: center; }
.gameover h2 { font-family: var(--font-print); font-size: var(--t-48); line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .chart .pawn { transition: none; }
}
@media (prefers-contrast: more) {
  :root { --rule: rgba(42, 30, 20, 0.4); --ink-2: #3e3022; --sea-line: #4f7f72; }
}

/* --- Telefono: barra superiore compatta --- */
@media (max-width: 640px) {
  .topbar { gap: 6px; padding-inline: 12px; }
  .topbar__turn { gap: 8px; overflow: hidden; }
  .topbar__turn > span { overflow: hidden; text-overflow: ellipsis; }
  .topbar__actions .btn--icon { width: 40px; }
  .topbar__round { display: none; }
  /* sul telefono componenti e regole stanno nel menu: in alto restano il Silenzio e il menu, e il nome si legge */
  .topbar__actions [data-focus='top-components'], .topbar__actions [data-focus='top-rules'] { display: none; }
  .topbar__title:empty { display: none; }
  .topbar__turn { gap: 6px; }
  /* la marea si legge sempre intera: se manca posto si accorcia il nome del giocatore, con i puntini */
  .topbar__tide { gap: 4px; flex: none; overflow: visible !important; }
  .topbar__turn > span:not(.topbar__tide) { min-width: 0; white-space: nowrap; }
}
/* telefoni stretti: il nome non ci sta intero, lo dice il gettone del giocatore (lettera e colore) */
@media (max-width: 400px) {
  .app--3d .topbar__turn > .chip:first-child { display: inline-grid; }
  .app--3d .topbar__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* --- Tablet orizzontale: carta a sinistra, colonna del turno a destra --- */
@media (min-width: 900px) and (max-width: 1099px) {
  .app { height: 100dvh; min-height: 0; }
  .table {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas: 'chart tabs' 'chart supply' 'chart turn';
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0; overflow: hidden; padding-bottom: 0 !important;
  }
  .table[data-tab='turno'] { grid-template-rows: auto 0 minmax(0, 1fr); }
  .tabs { padding-bottom: 8px; background: var(--paper-2); }
  .supply, .turn { background: var(--paper-2); min-height: 0; }
  .supply { overflow-y: auto; }
  .turn { display: flex; flex-direction: column; min-height: 0; }
  .turn-sections { overflow-y: auto; min-height: 0; flex: 1; }
  .actionbar { position: static; box-shadow: none; }
  .chart { max-height: calc(100dvh - 80px); }
}

/* --- Revisione: componenti stampati, aree di tocco, telefono --- */
.market-item__no { font-size: var(--t-13); color: var(--ink-2); text-align: center; }
.market-item__tag { min-height: 0; }
.component-tile { display: grid; gap: 4px; }
.component-tile .market-tile { aspect-ratio: 1; }

.piles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 1; }
.pile, .bag {
  position: relative; border-radius: var(--r-card); padding: 10px 6px 8px; min-height: 104px;
  display: grid; justify-items: center; align-content: center; gap: 2px; text-align: center;
}
.pile { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 5px rgba(255, 255, 255, 0.3), 3px 3px 0 -1px var(--paper-2), 3px 3px 0 0 var(--ink-3); }
.pile--empty { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px dashed var(--rule); }
.pile__art { width: 22px; height: 22px; opacity: 0.8; }
.pile__count { font-family: var(--font-print); font-size: var(--t-30); line-height: 1; }
.pile__label { font-size: var(--t-13); }
.bag { background: var(--paper-3); }
.bag__icon { width: 30px; height: 30px; }
.bag .pile__count { color: var(--ink); }
.bag .pile__label { color: var(--ink-2); }

.actionbar__market { display: none; }
@media (max-width: 1099px) {
  .actionbar__market { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; }
  .actionbar__market .market-tile { width: 64px; padding: 2px; }
}

.tab, .segmented button { min-height: 44px; }
details.variants summary { min-height: 44px; display: flex; align-items: center; }
.btn--small { min-height: 44px; }
.field input[type='number'] { min-height: 44px; }
.slot-tier__label, .status-tag { font-size: var(--t-13); }
.token--empty { opacity: 1; color: var(--ink-2); background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
.btn:disabled { opacity: 1; color: var(--ink-3); border-color: var(--rule); background: var(--paper-2); }
.btn--primary:disabled { background: var(--paper-2); color: var(--ink-3); border-color: var(--rule); }
.btn--quiet:disabled { background: transparent; border-color: transparent; }

.sheet { width: min(780px, calc(100vw - 24px)); }
.sheet--narrow { width: min(520px, calc(100vw - 24px)); }

.log--plain li { grid-template-columns: 1fr; }
.mini-board { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: var(--paper-3); border-radius: var(--r-card); padding: 12px 14px; }
.mini-board__vp { display: inline-flex; align-items: baseline; gap: 4px; font-size: var(--t-22); }
.mini-board__vp .icon { width: 20px; height: 20px; fill: var(--gold); stroke: var(--ink); stroke-width: 1.3; align-self: center; }
.mini-board__vp small { font-size: var(--t-15); color: var(--ink-2); }
.controller__actions {
  position: sticky; bottom: 0; display: grid; gap: 10px; z-index: 5;
  padding: 12px var(--gutter) max(16px, env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--rule);
}

@media (max-width: 640px) {
  .topbar__turn > span:first-of-type { display: none; }
  .topbar__actions [aria-label='Regole in breve'] { display: none; }
  .topbar__actions .btn--icon { width: 44px; }
}

/* --- Tablet verticale: carta sopra, mercato e turno affiancati sotto --- */
@media (min-width: 641px) and (max-width: 899px) {
  .chart { max-height: 54dvh; }
  .table {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'chart chart' 'supply turn';
  }
  .tabs { display: none; }
  .table[data-tab] .supply, .table[data-tab] .market-panel, .table[data-tab] .rival-panel { display: grid; }
  .table[data-tab] .supply { display: block; }
  .table[data-tab] .turn-sections { display: block; }
}
.table-supply { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.table-supply .piles { grid-template-columns: 1fr; }
.table-supply .pile, .table-supply .bag { min-height: 0; grid-template-columns: 28px auto 1fr; justify-items: start; align-items: center; column-gap: 8px; padding: 10px 12px; text-align: left; }
.table-supply .pile__count { font-size: var(--t-22); }
.discard-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.discard-row { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 8px; align-items: center; background: var(--paper-3); border-radius: var(--r-card); padding: 6px 8px 6px 12px; box-shadow: inset 0 0 0 1.5px var(--magenta); }
.discard-row__name { font-family: var(--font-print); font-size: var(--t-17); }


/* =====================================================================
   Sistema di design versione 2: la cabina del capitano (vedi docs/design-system.md).
   Lettura prima di tutto: carta chiara e testo scuro. Il mondo piratesco vive nei bordi:
   il ponte di legno con la cima nella barra in alto, l'ottone delle cornici, la pergamena delle
   finestre, i dadi tridimensionali con le scintille del mare.
   ===================================================================== */
body { background-color: var(--paper); background-image: url('../assets/textures/carta.jpg'); background-size: 420px; }
::selection { background: rgba(201, 160, 78, 0.35); }
:focus-visible { outline-color: #1f5f9c; }

/* ponte di comando */
.topbar {
  background: linear-gradient(180deg, var(--deck-2), var(--deck)); color: var(--deck-ink);
  border-bottom: 0; box-shadow: none; padding-bottom: 16px; position: sticky;
}
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--rope) repeat-x 0 0 / 14px 8px; border-top: 1px solid #1a0f08; }
.topbar__title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-22); color: var(--deck-ink); }
.topbar .hint { color: var(--deck-ink-2); }
.topbar .btn--quiet { color: var(--deck-ink); }
@media (hover: hover) and (pointer: fine) { .topbar .btn--quiet:hover:not(:disabled) { background: rgba(255, 244, 220, 0.10); } }
.topbar .chip { box-shadow: inset 0 0 0 1.5px rgba(255, 244, 220, 0.6); }

/* colonne laterali del tavolo */
@media (min-width: 1100px) {
  .supply, .turn { background: rgba(233, 223, 199, 0.78); }
  .supply { border-right: 1px solid var(--rule); }
  .turn { border-left: 1px solid var(--rule); }
}
.panel__title { font-family: var(--font-display); font-size: var(--t-22); font-weight: 700; letter-spacing: 0; }
.panel__title small { font-family: var(--font-ui); }
.board-sheet, .stack, .rival, .mini-board, .resume, .seat, .stat, .market-tile, .bag { border: 1px solid var(--rule); }
.actionbar { background: rgba(243, 236, 220, 0.96); }

/* carta nautica: cornice in ottone */
.chart .frame--outer { stroke: var(--brass); stroke-width: 2.2; }
.chart .frame--inner { stroke: var(--ink); }

/* finestre: fogli di pergamena con cornice in ottone */
.sheet {
  background-color: #efe4c9; background-image: url('../assets/textures/pergamena.jpg'); background-size: 420px;
  border: 1px solid #c4ad80; position: relative;
}
.sheet__head h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-30); }
.verdict { font-family: var(--font-display); font-weight: 700; }
.versus { font-family: var(--font-display); font-weight: 700; }
.gameover h2 { font-family: var(--font-display); font-weight: 700; }
.verdict--won { color: #0e6f62; }
.verdict--lost { color: #a3352a; }

/* pulsanti: il principale resta nel colore del giocatore di turno */
.btn { border-color: rgba(42, 30, 20, 0.7); }
.btn:not(.btn--primary):not(.btn--quiet) { background: var(--paper-3); }

/* schermata iniziale */
.intro__title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.005em; }
.intro__credits { font-size: var(--t-13); color: var(--ink-2); max-width: 60ch; }
.intro__credits a { color: inherit; }


/* palco dei dadi 3D */
.dice-stage { position: relative; min-height: 150px; display: grid; align-items: center; }
.dice3d { position: absolute; left: -12px; right: -12px; top: -24px; bottom: -24px; width: calc(100% + 24px); height: calc(100% + 48px); z-index: 2; opacity: 0; transition: opacity 220ms ease; cursor: pointer; touch-action: manipulation; }
.die-slot--pending .die, .die-slot--pending .die-slot__label, .die-slot--pending .die-slot__choice { visibility: hidden; }
.combat__main.is-rolling > :not(.dice-stage) { visibility: hidden; }
.combat__main.is-rolling .die-slot__choice { visibility: hidden; }
.die-slot--revealed .die { animation: reveal 260ms var(--ease-out); }
@keyframes reveal { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dice3d { display: none; } }

/* carte: arte stampata con gli emblemi pieni */
.icon--gi { fill: currentColor; stroke: none; }
.card__art.icon--gi { color: var(--ink); }

/* telefono del giocatore: stessa testata di legno del tavolo */
.controller__head { background: linear-gradient(180deg, var(--deck-2), var(--deck)); color: var(--deck-ink); position: relative; padding-bottom: 20px; }
.controller__head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--rope) repeat-x 0 0 / 14px 8px; }
.controller__head p { color: var(--deck-ink-2); }
.controller__head .chip { box-shadow: inset 0 0 0 1.5px rgba(255, 244, 220, 0.6); }
.controller__actions { background: rgba(243, 236, 220, 0.97); }

/* schermata iniziale: la carta nautica incorniciata in ottone come sul tavolo */
.intro__chart { background: var(--sea); box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 8px var(--brass); }
@media (min-width: 960px) { .intro__chart { box-shadow: inset 0 0 0 14px var(--paper), inset 0 0 0 16px var(--brass), inset 0 0 0 19px var(--paper), inset 0 0 0 20px var(--ink); } }

/* Maree: la prossima carta evento e le carte rimaste. La carta è l'informazione, i numeri accompagnano. */
.tide-panel__body { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.tide-panel .card--event { --card-w: 132px; }
.tide-now { display: flex; align-items: center; gap: 6px; margin: -4px 0 4px; color: var(--ink-2); font-size: var(--t-13); font-weight: 700; }
.tide-now .tide-mark { width: 18px; height: 18px; color: #0e6f62; }
.tide-left { margin: 0; display: grid; gap: 6px; min-width: 120px; flex: 1; }
.tide-left__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 8px; color: var(--ink-2); }
.tide-left__row dt { display: inline-flex; align-items: center; gap: 8px; }
.tide-left__row dd { margin: 0; font-weight: 800; color: var(--ink); }
.tide-left__row .tide-mark { width: 20px; height: 20px; }
.tide-left__row.is-now { background: var(--paper-3); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); }
.tide-left__row.is-done { color: var(--ink-3); }
.tide-left__row.is-done dd { color: var(--ink-3); }
.topbar__tide { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar__tide .tide-mark { width: 18px; height: 18px; }
.public-event { display: grid; gap: 12px; justify-items: center; }
.public-event__results { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; width: 100%; }
.public-event__results li { font-size: var(--t-15); color: var(--ink); }
.check--sub { padding-left: 30px; min-height: 44px; align-items: center; }
.card-slot__caption { text-wrap: balance; }
.check input:disabled + span { color: var(--ink-3); }
.next-tide { display: flex; align-items: center; gap: 8px; font-size: var(--t-15); color: var(--ink-2); }
.next-tide .tide-mark { width: 20px; height: 20px; color: #0e6f62; }
.next-tide b { color: var(--ink); }
.card:has(> .card__tide) > .card__name { padding-inline: 13cqi; }
/* sul telefono la marea si dice con le onde e il nome breve ("Nera"): dove sono si legge senza aprire il foglio */
.topbar__tide-short { display: none; }
@media (max-width: 640px) {
  .topbar__tide-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar__tide-short { display: inline; }
}
.next-tide.hint--minor { font-size: var(--t-13); }
.next-tide.hint--minor .tide-mark { width: 16px; height: 16px; }

/* più di due dadi (cannone come dado): una griglia regolare, al massimo quattro per riga */
.dice-row--many { display: grid; grid-template-columns: repeat(var(--n), auto); justify-content: center; gap: 14px 18px; }
.next-tide.next-tide--retreat { font-size: var(--t-15); color: var(--ink); }
.next-tide--retreat .icon { width: 18px; height: 18px; flex: none; color: var(--ink); }
.setup-coord { display: flex; justify-content: center; }
@media (max-width: 480px), (max-height: 700px) { .setup-coord { display: none; } }
.segmented--framed { background: var(--paper-3); box-shadow: inset 0 0 0 1px var(--rule); }
.segmented--framed button { font-weight: 600; white-space: nowrap; }

/* --- Suono e atmosfera (dialogs.js, settingsDialog) --- */
.settings { display: grid; gap: 14px; margin-top: 8px; }
.settings__row { display: grid; gap: 6px; }
.settings__label { font-weight: 700; font-size: var(--t-15); }
.settings__range { display: flex; align-items: center; gap: 12px; }
.settings__range input[type='range'] { flex: 1; min-height: 44px; accent-color: var(--ink); }
.settings__value { min-width: 4ch; text-align: right; color: var(--ink-2); font-size: var(--t-15); }
.settings .hint { margin: -6px 0 0; }

/* Carta scoperta prima di comprarla (26 ottobre): la carta intera, grande, poi la scelta */
.buy-sheet { display: grid; justify-items: center; gap: 14px; padding-block: 6px 4px; }
.buy-sheet__side { display: grid; gap: 6px; text-align: center; max-width: 34ch; }
.buy-sheet__actions { justify-content: flex-end; flex-wrap: wrap; }
.buy-sheet__actions .btn { min-height: 48px; }
@media (max-width: 480px) {
  .buy-sheet__actions { display: grid; grid-template-columns: 1fr; }
  .buy-sheet__actions .buy-sheet__buy { order: -1; }
}

/* Chi gioca: una riga per posto, persona o bot con il suo stile (26 ottobre) */
.seat-list { display: grid; gap: 8px; }
.seat-list__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seat-list__row .chip { flex: none; }
.seat-list__style { min-height: 44px; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper-3); padding: 6px 12px; font: inherit; font-weight: 700; color: var(--ink); }
.bot-last { font-size: var(--t-15); color: var(--ink-2); }
.bot-pace { display: flex; align-items: center; gap: 10px; justify-self: start; }
.bot-pace .segmented { padding: 3px; }
.bot-pace .segmented button { min-height: 44px; padding: 4px 12px; font-size: var(--t-13, .8125rem); }

/* Scene di gioco: salvare il momento come link, e riaprirlo dall'inizio (26 ottobre) */
.field input[type='text'], .field textarea { width: 100%; min-height: 44px; border: 1.4px solid var(--ink); border-radius: 8px; padding: 8px 12px; background: var(--paper-3); font: inherit; color: var(--ink); }
.field textarea { resize: vertical; line-height: 1.45; }
.scene-out { display: grid; gap: 8px; }
.scene-out input { width: 100%; min-height: 44px; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px; background: var(--paper-2); font: inherit; font-size: var(--t-13); color: var(--ink-2); }
.scene-offer { display: grid; gap: 10px; padding: 16px 18px; border-radius: 12px; background: var(--paper-3); box-shadow: inset 0 0 0 1.5px var(--ink); }
.scene-offer h2 { font-family: var(--font-display); font-size: var(--t-24, 1.5rem); line-height: 1.15; }
.scene-offer p { white-space: pre-line; }
.seat-list__hint { flex-basis: 100%; padding-left: 38px; }
/* telefono: la carta decorativa si accorcia, così il pulsante per giocare resta sopra la piega */
@media (max-width: 559px) { .intro__chart { min-height: 120px; max-height: 18dvh; } }

/* Anatomia fissa della carta (Scuola dei Mari, 27 ottobre 2026; Solis, "Three Principles of Card Design").
   Indice d'angolo in alto a sinistra, la parte che resta scoperta a ventaglio e nelle pile; zone fisse: banda del
   titolo per due righe, illustrazione, testo per quattro righe, sempre negli stessi punti. Sotto i 150 px di
   altezza (circa 97 px di larghezza) il testo non si legge più: resta il segno, e la carta in grande lo dice. */
.card__index { position: absolute; top: calc(var(--card-w) * 0.06); left: calc(var(--card-w) * 0.06); width: 13cqi; height: 13cqi; color: var(--ink); stroke-width: 1.7; }
.card--back .card__index { display: none; }
.card:has(> .card__index) > .card__name { padding-inline: 13cqi; }
.card--zones { grid-template-rows: calc(var(--card-w) * 0.134 * 1.05 * 2) minmax(0, 1fr) auto; }
.card--zones > .card__name { align-self: center; }
.card--zones > .card__text { align-self: start; font-weight: 500; color: var(--ink); min-height: calc(1em * 1.22 * 4); }
.card--public.card--zones > .card__text { min-height: calc(1em * 1.22 * 5); }
@container (max-width: 96px) {
  .card--zones > .card__text { display: none; }
  .card--zones > .card__art { width: 56cqi; height: 56cqi; }
}