/* Il tavolo 3D e il livello digitale sopra di lui.
   La scena occupa tutto lo spazio sotto la barra; i pannelli sono il "regolamento digitale": fogli chiari
   sospesi sopra il tavolo, lisci, senza grana di carta, con un filo d'ottone. Ciò che è stampato vive
   solo nella scena. */

.counts { margin: 0; display: grid; gap: 4px; align-content: start; font-size: var(--t-15); }
.count { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--rule); padding: 4px 0; }
.count dt { color: var(--ink-2); }
.count dd { margin: 0; font-weight: 800; }
.table-supply { grid-template-columns: auto minmax(0, 1fr); }
.app--3d .hand { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.hand .card, .hand .card-slot .card { --card-w: 116px; }
.controller .hand { justify-content: safe center; }
.combat-panel { display: none; }

/* --- Struttura in modalità 3D --- */
.app--3d { height: 100dvh; min-height: 0; overflow: hidden; background: #0d0907; }
.app--3d .table { position: relative; flex: 1; min-height: 0; display: block; padding: 0 !important; overflow: hidden; }
.app--3d .stage { position: absolute; inset: 0; padding: 0; display: block; background: #0d0907; }
.app--3d .stage canvas.world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.app--3d .stage canvas.world:focus-visible { box-shadow: inset 0 0 0 3px #59c8ff; }
.stage__loading { position: absolute; inset: 0; display: grid; place-items: center; color: #cdb894; font-family: var(--font-display); font-size: var(--t-22); }

/* pannelli digitali: carta quasi opaca con il filo d'ottone. Niente sfocatura dietro (al 97% non si vede
   e sul telefono costa a ogni fotogramma) e solo un'ombra di contatto, che li stacca dal tavolo */
.app--3d .hud {
  background: rgba(252, 249, 241, 0.97);
  border: 1px solid rgba(201, 160, 78, 0.55);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  color: var(--ink);
}
.app--3d .supply, .app--3d .turn { background: rgba(252, 249, 241, 0.95); border-left: 0; border-right: 0; }
.app--3d .panel { padding: 16px; }
.app--3d .panel + .panel { padding-top: 2px; }
.app--3d .board-sheet, .app--3d .rival, .app--3d .market-tile { background: #fff; }
.app--3d .dock { position: absolute; z-index: 5; pointer-events: none; }
.app--3d .dock > * { pointer-events: auto; }
.app--3d .actionbar { background: transparent; border-top: 1px solid var(--rule); box-shadow: none; position: static; }
.app--3d .turn { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.app--3d .turn-sections, .app--3d .combat-panel { overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; }
.app--3d .supply { overflow-y: auto; overscroll-behavior: contain; }
.app--3d .turn[data-mode='combat'] .turn-sections { display: none !important; }
.app--3d .turn[data-mode='combat'] .combat-panel { display: block; padding: 16px; }
.app--2d .turn[data-mode='combat'] .turn-sections { display: none; }
.app--2d .turn[data-mode='combat'] .combat-panel { display: block; padding: 16px var(--gutter); }
.app--3d .log { max-height: none; }
.app--3d .toasts { bottom: auto; top: 76px; }

/* combattimento nel pannello: carta evento a sinistra, dadi e scelte a destra */
.combat-panel .sheet__head h2 { font-size: var(--t-22); }
.combat-panel .combat { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; }
.combat-panel .card--event { --card-w: 132px; }
.combat-panel .combat__actions .btn { min-width: 0; flex: 1 1 140px; }
.combat-panel .die { width: 56px; height: 56px; }
.combat-panel .dice-row { gap: 14px; }
.combat-panel .dice-stage { min-height: 0; }
.combat-panel .verdict { font-size: var(--t-22); }
.combat-panel .tally strong { font-size: var(--t-22); }

/* bersagli del tavolo raggiungibili da tastiera: invisibili finché non hanno il fuoco */
.table-targets { position: absolute; width: 0; height: 0; overflow: visible; }
.table-target { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.table-target:focus {
  position: fixed; left: 50%; top: 70px; transform: translateX(-50%); width: auto; height: auto; margin: 0; clip-path: none; overflow: visible; z-index: 30;
  background: #0b2a3d; color: #e8f6ff; border: 1.5px solid #59c8ff; border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: var(--t-15);
}

/* barra della vista: comandi digitali, vetro scuro con icone chiare */
.viewbar {
  position: absolute; z-index: 6; display: flex; align-items: center; gap: 2px; padding: 4px;
  background: rgba(16, 11, 8, 0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(201, 160, 78, 0.4); border-radius: 999px; color: #f1e6cf;
  left: 50%; transform: translateX(-50%); top: 10px; max-width: calc(100% - 20px); overflow-x: auto; scrollbar-width: none;
}
.viewbar::-webkit-scrollbar { display: none; }
.viewbar[hidden] { display: none; }
.viewbar__btn { width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: inherit; display: grid; place-items: center; flex: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.viewbar__btn .icon { width: 22px; height: 22px; }
.viewbar__btn .chip { box-shadow: inset 0 0 0 1.5px rgba(255, 244, 220, 0.6); }
.viewbar__btn:active { background: rgba(255, 244, 220, 0.16); }
@media (hover: hover) and (pointer: fine) { .viewbar__btn:hover { background: rgba(255, 244, 220, 0.12); } }
.viewbar__btn:focus-visible { outline: 2px solid #59c8ff; outline-offset: -2px; }
.viewbar__sep { width: 1px; height: 24px; background: rgba(241, 230, 207, 0.25); margin: 0 4px; flex: none; }

/* --- Schermo largo: rifornimento a sinistra, turno a destra, il tavolo in mezzo --- */
@media (min-width: 1180px) and (min-height: 560px) {
  .app--3d .dock { inset: 12px; display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; grid-template-rows: minmax(0, 1fr); gap: 12px; }
  .app--3d .tabs { display: none; }
  .app--3d .supply { grid-column: 1; grid-row: 1; align-self: stretch; }
  .app--3d .turn { grid-column: 3; grid-row: 1; align-self: stretch; }
  .app--3d .supply .log-panel { display: grid; }
  .app--3d .table .supply, .app--3d .table .turn-sections { display: block; }
  .app--3d .table[data-tab] .market-panel, .app--3d .table[data-tab] .rival-panel { display: grid; }
}
@media (min-width: 1500px) and (min-height: 560px) {
  .app--3d .dock { grid-template-columns: 320px minmax(0, 1fr) 390px; }
}

/* --- Tablet orizzontale e computer piccoli: una colonna a destra con le schede --- */
@media (min-width: 760px) and (max-width: 1179px) and (orientation: landscape), (min-width: 1180px) and (max-height: 559px) {
  .app--3d .dock { top: 12px; right: 12px; bottom: 12px; width: 352px; display: flex; flex-direction: column; gap: 0; }
  .app--3d .tabs { display: flex; background: rgba(252, 249, 241, 0.95); border: 1px solid rgba(201, 160, 78, 0.55); border-bottom: 0; border-radius: 14px 14px 0 0; padding: 8px 8px 6px; }
  .app--3d .supply { border-radius: 0; border-top: 0; border-bottom: 0; flex: 1 1 auto; min-height: 0; box-shadow: none; }
  .app--3d .turn { border-radius: 0 0 14px 14px; border-top: 0; flex: 1 1 auto; min-height: 0; }
  .app--3d .table[data-tab='turno'] .supply { display: none; }
  .app--3d .table:not([data-tab='turno']) .turn { flex: 0 0 auto; }
  .app--3d .table:not([data-tab='turno']) .turn-sections { display: none; }
  .app--3d .table[data-tab='turno'] .turn-sections { display: block; }
  .app--3d .table[data-tab='partita'] .log-panel { display: grid; }
  .app--3d .turn[data-mode='combat'] { flex: 1 1 auto; }
}

/* --- Telefono e tablet verticale: foglio in basso, il tavolo sopra --- */
@media (max-width: 759px), (max-width: 1179px) and (orientation: portrait) {
  .app--3d .dock { left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 62%; }
  .app--3d .tabs {
    display: flex; background: rgba(252, 249, 241, 0.96); border-radius: 16px 16px 0 0; padding: 6px 10px 4px;
    border: 1px solid rgba(201, 160, 78, 0.55); border-bottom: 0; box-shadow: 0 -14px 30px -22px rgba(0, 0, 0, 0.8);
    position: relative;
  }
  .app--3d .tabs { border-radius: 0; border-top: 0; box-shadow: none; padding-top: 0; }
  .app--3d .sheet-handle {
    display: grid; place-items: center; height: 26px; width: 100%; border: 1px solid rgba(201, 160, 78, 0.55); border-bottom: 0;
    border-radius: 16px 16px 0 0; background: rgba(252, 249, 241, 0.96); box-shadow: 0 -14px 30px -22px rgba(0, 0, 0, 0.8); cursor: pointer;
  }
  .app--3d .sheet-handle::before { content: ''; width: 40px; height: 4px; border-radius: 4px; background: var(--ink-3); opacity: 0.6; }
  .app--3d .dock { left: max(0px, calc(50% - 340px)); right: max(0px, calc(50% - 340px)); }
  .app--3d .supply, .app--3d .turn { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .app--3d .supply { border-top: 0; border-bottom: 0; flex: 1 1 auto; min-height: 0; }
  .app--3d .turn { border-top: 0; border-bottom: 0; flex: 1 1 auto; min-height: 0; }
  .app--3d .actionbar { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .app--3d .table[data-tab='turno'] .supply { display: none; }
  .app--3d .table:not([data-tab='turno']) .turn { flex: 0 0 auto; }
  .app--3d .table:not([data-tab='turno']) .turn-sections { display: none; }
  .app--3d .table[data-tab='turno'] .turn-sections { display: block; }
  .app--3d .table[data-tab='partita'] .log-panel { display: grid; }
  /* foglio abbassato: restano le schede e la barra delle azioni */
  .app--3d .table[data-sheet='min'] .supply, .app--3d .table[data-sheet='min'] .turn-sections { display: none !important; }
  .app--3d .table[data-sheet='min'] .tab[aria-selected='true'] { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
  .app--3d .turn[data-mode='combat'] .combat-panel { max-height: 46dvh; }
  .app--3d .viewbar { top: 8px; }
  .app--3d .toasts { top: 70px; }
  .combat-panel .combat { grid-template-columns: auto minmax(0, 1fr); }
  .combat-panel .card--event { --card-w: 108px; }
  .combat-panel .sheet__head h2 { font-size: var(--t-17); }
}
@media (max-width: 420px) {
  .app--3d .viewbar__btn { width: 40px; height: 44px; }
  .app--3d .viewbar__sep { margin: 0 1px; }
}

/* --- Carta 2D di riserva (senza WebGL): la vecchia impaginazione --- */
.app--2d .viewbar, .app--2d .table-targets { display: none; }
.app--2d .dock { display: contents; }

/* sul tocco la rotazione si fa con due dita: i due pulsanti di rotazione lasciano spazio */
@media (pointer: coarse) and (max-width: 759px) {
  .viewbar [data-focus='view-ccw'], .viewbar [data-focus='view-cw'] { display: none; }
}

/* --- Correzioni dopo il controllo qualità --- */
.sheet-handle { display: none; }
.app--3d .tabs { flex: none; }
.app--3d .actionbar[hidden] { display: none; }
.table-targets { position: fixed; left: 0; top: 0; z-index: 40; }
.actionbar__market .market-tile:disabled { opacity: 0.45; border: 1.5px dashed var(--ink-3); background: transparent; }
.market-panel .card-slot .card, .table-supply .card { --card-w: 132px; }

/* la plancia in numeri: una lettura, non un secondo tabellone */
.board-summary { display: grid; gap: 12px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); padding: 14px; }
.summary { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.summary__row { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--rule); padding: 5px 0; font-size: var(--t-15); }
.summary__row dt { color: var(--ink-2); }
.summary__row dd { margin: 0; font-weight: 800; text-align: right; }
.board-summary > .btn { justify-self: start; }
.counts--wide { max-width: 420px; }
.count dt .icon { vertical-align: -0.3em; }

/* finestre nel modo 3D: superfici digitali lisce, non pergamena */
body.mode-3d .sheet { background-color: rgba(252, 249, 241, 0.98); background-image: none; border-color: rgba(201, 160, 78, 0.55); }
.sheet--tall { height: min(860px, calc(100dvh - 24px)); grid-template-rows: auto minmax(0, 1fr); }
.sheet--tall > div:last-child { overflow-y: auto; min-height: 0; align-content: start; }
.subtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }

/* barra della vista: nella barra in alto sugli schermi larghi, sotto di lei negli altri */
.app--3d .topbar { position: relative; }
.app--3d .topbar .viewbar { position: absolute; top: calc(100% + 8px); transform: translateX(-50%); }
@media (min-width: 1180px) and (min-height: 560px) {
  .app--3d .topbar:not(.topbar--crowded) .viewbar { position: static; transform: none; left: auto !important; max-width: none !important; margin: -4px auto; background: rgba(255, 244, 220, 0.06); border-color: rgba(201, 160, 78, 0.3); }
  .app--3d .topbar__turn { flex: 0 1 auto; }
}
.viewbar__btn[aria-pressed='true'] { background: rgba(255, 244, 220, 0.2); box-shadow: inset 0 0 0 1.5px rgba(255, 244, 220, 0.55); }
@media (max-width: 420px) { .app--3d .viewbar__btn { width: 44px; } }

/* combattimento: lettura dei dadi del vassoio, con le stesse facce incise */
.die--read { width: 56px; height: 56px; }
.combat-panel .verdict { margin-bottom: -4px; }
.combat-panel .tally { font-size: var(--t-15); }
.combat-panel { container-type: inline-size; }
@container (min-width: 460px) { .combat-panel .card--event { --card-w: 168px; } }

/* --- Seconda verifica --- */
.app--3d .sheet-handle { flex: none; height: 44px; }
.sheet--tall > div:last-child { grid-auto-rows: max-content; }
.subtabs { flex: none; min-height: 44px; }
.subtabs .tab { padding-inline: 10px; }
.table-supply .card, .market-panel .table-supply .card-slot .card { --card-w: 112px; }
.rival__name { display: flex; justify-content: space-between; gap: 8px; }
.rival__where { font-weight: 500; color: var(--ink-2); font-size: var(--t-13); }
.card-slot__actions .btn { white-space: nowrap; }
.app--3d .stage, .app--3d { background: #2a1a10; }
@media (min-width: 1180px) and (min-height: 560px) {
  .combat-panel .combat { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .combat-panel .card--event { --card-w: 168px; }
  .combat-panel .combat__main { width: 100%; }
}
.hand .card-slot__actions { flex-direction: column; }

/* =====================================================================
   Gerarchia del turno (24 ottobre 2026)
   Prima si vede cosa puoi fare, poi come stai, per ultime le spiegazioni.
   - Possibilità: pulsanti grandi con icona, testo forte e il costo in un badge.
   - Plancia: forme del gioco (stelle, cuori, caselle, monete, chiavi) al posto dei numeri.
   - Spiegazioni: testo piccolo e più chiaro, mai in concorrenza con le azioni.
   ===================================================================== */

/* spiegazioni in secondo piano */
.hint--minor { font-size: var(--t-13); color: var(--ink-3); line-height: 1.35; }
.panel__title--minor { font-family: var(--font-ui); font-size: var(--t-15); font-weight: 700; color: var(--ink-2); }

/* possibilità del turno */
.possibilities { display: grid; gap: 8px; }
.possibility {
  justify-content: flex-start; gap: 10px; min-height: 50px; padding: 8px 12px 8px 10px;
  border: 2px solid var(--accent); background: #fff !important; color: var(--ink);
  font-size: var(--t-17); font-weight: 800; text-align: left;
}
.possibility > .icon { width: 26px; height: 26px; flex: none; }
.possibility .possibility__label { flex: 1 1 auto; min-width: 0; line-height: 1.15; }
.possibility--gold { border-color: var(--gold); }
.possibility--danger { border-color: var(--heart); color: #7d1f19; }
.possibility--small { min-height: 44px; font-size: var(--t-15); border-width: 1.5px; }
@media (hover: hover) and (pointer: fine) {
  .possibility:hover:not(:disabled) { background: var(--accent-tint) !important; }
  .possibility--gold:hover:not(:disabled) { background: #f7ead0 !important; }
  .possibility--danger:hover:not(:disabled) { background: #f6dedb !important; }
}
.badge {
  display: inline-flex; align-items: center; gap: 3px; flex: none; margin-left: auto;
  padding: 3px 9px 3px 5px; border-radius: 999px; background: var(--paper-2); color: var(--ink);
  font-size: var(--t-15); font-weight: 800; line-height: 1;
}
.badge .icon { width: 18px; height: 18px; }
.badge.num:not(.badge--cost) { padding: 3px 9px; }
.possibility .chip { margin-left: auto; }
.btn--primary .badge { background: rgba(255, 255, 255, 0.92); color: var(--ink); margin-left: 4px; }
.btn__split { display: inline-flex; align-items: center; gap: 8px; }

/* il pulsante per andare avanti: il più grande del pannello */
.btn--go { min-height: 54px; font-size: 1.125rem; }
.btn--go > .icon { width: 22px; height: 22px; }

/* mosse rimaste: il dado tirato e una casella per ogni mossa */
.turn-status { display: grid; gap: 4px; }
.moves-meter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.moves-meter .die--mini { width: 36px; height: 36px; flex: none; }
.moves-meter__count { display: inline-flex; align-items: baseline; gap: 5px; font-weight: 700; font-size: var(--t-15); color: var(--ink-2); }
.moves-meter__count strong { font-size: var(--t-30); line-height: 1; color: var(--ink); }
.steps { display: inline-flex; gap: 5px; align-items: center; }
.step { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--rule); background: transparent; }
.step.is-on { border-color: var(--accent); background: var(--accent); }

/* richiamo dello sguardo: tre respiri di luce intorno, poi niente */
@keyframes attention {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 38%, transparent); }
}
.is-attention { animation: attention 800ms ease-in-out 3; }
.possibility--gold.is-attention { --accent: var(--gold); }
@media (prefers-reduced-motion: reduce) { .is-attention { animation: none; outline: 3px solid var(--accent); outline-offset: 2px; } }

/* plancia: forme al posto dei numeri */
.gauges { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 12px; align-items: center; }
.gauge { display: contents; }
.gauge__label { font-size: var(--t-13); color: var(--ink-2); }
.meter { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.meter .icon { flex: none; }
.meter--star .icon { width: 20px; height: 20px; stroke-width: 1.3; }
.meter--star .is-on { color: var(--gold); fill: var(--gold); stroke: var(--ink); }
.meter--star .is-off { color: var(--ink-3); opacity: 0.55; }
.meter--heart { gap: 3px; }
.meter--heart .icon { width: 22px; height: 22px; }
.meter--heart .is-on { color: var(--heart); fill: var(--heart); stroke: var(--ink); stroke-width: 1.2; }
.meter--heart .is-off { color: var(--ink-3); opacity: 0.7; }
.meter--track { gap: 2px; flex-wrap: nowrap; }
.meter__box { width: 13px; height: 13px; border-radius: 3px; border: 1.4px solid var(--ink-3); flex: none; }
.meter--exp .meter__box.is-on { background: var(--key-blue); border-color: var(--key-blue); }
.meter--cmb .meter__box.is-on { background: var(--key-red); border-color: var(--key-red); }
.meter__gap { width: 5px; flex: none; position: relative; }
.meter__gap::after { content: ''; position: absolute; left: 2px; top: -3px; bottom: -3px; border-left: 1.2px dashed var(--ink-3); }
.meter--coins { gap: 7px; flex-wrap: wrap; }
.meter__five { display: inline-flex; }
.meter--coins .icon { width: 18px; height: 18px; }
.meter__five .icon + .icon { margin-left: -4px; }
.meter__more { font-weight: 800; font-size: var(--t-15); margin-left: 4px; }
.meter__none { font-size: var(--t-13); color: var(--ink-3); }
.meter--keys { gap: 4px; }
.meter__key { display: inline-grid; }
.meter__key .icon { width: 22px; height: 22px; stroke-width: 2; }
.meter__key.is-off { opacity: 0.28; }
.meter--slots { gap: 8px; }
.meter__pair { display: inline-flex; gap: 3px; }
.meter__slot { width: 24px; height: 24px; border-radius: 5px; border: 1.4px dashed var(--ink-3); display: grid; place-items: center; background: #fff; }
.meter__slot .icon { width: 16px; height: 16px; }
.meter__slot.is-locked { border-style: solid; border-color: var(--rule); background: transparent; color: var(--ink-3); }
.meter__slot.is-filled { border-style: solid; border-color: var(--ink); }
.meter__slot.is-cmb:not(.is-locked) { border-color: var(--key-red); }
.meter__slot.is-exp:not(.is-locked) { border-color: var(--key-blue); }
.meter--hand { gap: 3px; vertical-align: middle; }
.meter__card { width: 11px; height: 16px; border-radius: 2px; border: 1.4px solid var(--ink-3); }
.meter__card.is-on { background: var(--ink); border-color: var(--ink); }
.meter__card.is-over { background: var(--magenta); border-color: var(--magenta); }
.meter--sm .icon { width: 15px; height: 15px; }
.rival__meta .meter--coins .icon { width: 15px; height: 15px; }
.rival__meta .meter__five .icon + .icon { margin-left: -5px; }
.rival__meta .meter--coins { gap: 4px; }
.rival__meta .meter__key .icon { width: 16px; height: 16px; }
.rival__meta { align-items: center; gap: 6px 12px; }
.board-summary .board-sheet__name { font-size: var(--t-22); }
.board-summary__look { justify-self: start; color: var(--ink-2); padding-inline: 6px; border-color: transparent !important; background: transparent !important; }
.board-summary .inventory { gap: 8px; }

/* lato del turno: le possibilità in alto nella barra, sempre visibili */
.app--3d .actionbar { gap: 12px; }
.app--3d .actionbar__status { font-size: var(--t-17); font-weight: 700; }

/* telefono: le possibilità scorrono in una riga, il foglio resta basso */
@media (max-width: 759px), (max-width: 1179px) and (orientation: portrait) {
  .app--3d .possibilities { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; padding: 2px; margin: -2px; }
  .app--3d .possibilities::-webkit-scrollbar { display: none; }
  .app--3d .possibility { flex: none; max-width: 78vw; min-height: 48px; font-size: var(--t-15); }
  .app--3d .possibility > .icon { width: 22px; height: 22px; }
  .app--3d .actionbar { gap: 10px; padding-top: 12px; }
  .app--3d .moves-meter__count strong { font-size: var(--t-22); }
  .app--3d .moves-meter .die--mini { width: 30px; height: 30px; }
}
/* i pulsanti "quieti" restano senza bordo anche dopo le regole generali dei pulsanti */
.btn.btn--quiet { border-color: transparent; }
.market-item__swap { color: var(--ink-2); }

/* --- Dopo il secondo controllo (UX e codice) --- */
/* oro più scuro: il bordo si distingue dal bianco (contrasto oltre 3:1) */
.possibility--gold { border-color: #9a7316; }
.possibility--gold.is-attention { --accent: #9a7316; }
/* il badge resta un gettone anche sul fondo bianco del pulsante */
.badge { box-shadow: inset 0 0 0 1px var(--rule); }
.possibility .badge .icon { width: 18px; height: 18px; }
.possibility .badge:not(.badge--cost) > span { font-size: var(--t-13); font-weight: 700; }
.possibility__short { display: none; }
/* forme vuote: contorno pieno, non trasparenza (si leggono anche al sole) */
.meter--star .is-off { opacity: 1; color: var(--ink-3); fill: none; }
.meter--heart .is-off { opacity: 1; color: var(--ink-3); fill: none; }
.meter__key.is-off { opacity: 0.55; }
.meter__key.is-off .icon { color: var(--ink-3) !important; }
.meter--vp .icon { width: 14px; height: 14px; }
.rival { grid-template-columns: auto minmax(0, 1fr); }
.rival__vp { grid-column: 2; font-size: inherit; }
.turn-status--row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.steps--rot .step { width: 12px; height: 12px; }
.counts { font-size: var(--t-13); }
.count dt { color: var(--ink-3); }

/* computer e tablet orizzontale: le possibilità in cima al pannello del turno, prima della plancia */
@media (min-width: 760px) and (orientation: landscape), (min-width: 1180px) {
  .app--3d .turn .actionbar { order: -1; border-top: 0; border-bottom: 1px solid var(--rule); margin-top: 0; position: static; }
}

/* telefono e tablet verticale */
@media (max-width: 759px), (max-width: 1179px) and (orientation: portrait) {
  /* le possibilità vanno a capo in due colonne con le etichette brevi: nessuna resta fuori schermo */
  .app--3d .possibilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .app--3d .possibility { max-width: none; min-width: 0; padding-inline: 8px; gap: 6px; }
  .app--3d .possibility .badge { padding: 2px 6px 2px 3px; }
  /* il nome della carta da comprare non va a capo: la possibilità prende tutta la riga */
  .app--3d .possibility--wide { grid-column: 1 / -1; }
  .app--3d .possibility .badge:not(.badge--cost) > span { display: none; }
  /* barra della vista ridotta all'essenziale */
  .viewbar [data-focus='view-market'], .viewbar [data-focus='view-tilt'], .viewbar .viewbar__sep { display: none; }
}

/* etichette brevi solo dove due colonne sono strette (telefono): sul tablet verticale c'è posto per quelle intere */
@media (max-width: 559px) {
  .app--3d .possibility__long { display: none; }
  .app--3d .possibility__short { display: inline; }
}

/* --- Maree (24 ottobre): evento pubblico e carta scoperta sul telefono --- */
@media (max-width: 759px), (max-width: 1179px) and (orientation: portrait) {
  /* l'evento pubblico sta accanto ai suoi effetti: il pulsante per andare avanti resta sempre sullo schermo */
  .app--3d .public-event { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: start; gap: 12px; }
  .app--3d .public-event .card--event { --card-w: 92px; }
  .app--3d .public-event__results li { font-size: var(--t-13); }
  .app--3d .actionbar { max-height: calc(100dvh - 160px); overflow-y: auto; overscroll-behavior: contain; }
  .app--3d .actionbar > .btn--go:last-child { position: sticky; bottom: 0; }
  /* nell'evento pubblico il foglio mostra l'evento e i suoi effetti: la plancia si guarda dalle schede */
  .app--3d .table[data-tab='turno'] .turn[data-mode='public'] .turn-sections { display: none; }
}

/* --- Cerimonia del cambio di marea (ceremony.js) ---
   Carta chiara a pieno contrasto sopra la parte libera del tavolo; ottone a filo sottile come le altre
   cornici. Entra e si ritira senza rimbalzi; con "riduci movimento" compare e sparisce e basta. */
.ceremony {
  position: absolute; z-index: 40; top: 22%;
  left: calc(var(--free-left, 0px) + (100% - var(--free-left, 0px) - var(--free-right, 0px)) / 2);
  transform: translateX(-50%); width: min(400px, calc(100% - var(--free-left, 0px) - var(--free-right, 0px) - 32px));
  animation: ceremony-in 520ms var(--ease-out) both;
}
.ceremony.is-leaving { animation: ceremony-out 260ms ease both; }
@keyframes ceremony-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ceremony-out { to { opacity: 0; transform: translate(-50%, -6px); } }
@media (prefers-reduced-motion: reduce) { .ceremony, .ceremony.is-leaving { animation: none; } }
.ceremony__sheet {
  background: var(--paper-3); color: var(--ink); border-radius: 14px; padding: 20px 22px 12px; text-align: center;
  border: 1px solid var(--brass-line); box-shadow: 0 0 0 4px rgba(16, 11, 8, 0.55), var(--float-shadow);
}
.ceremony__mark { width: 40px; height: 40px; color: var(--ink-2); display: block; margin: 0 auto 4px; }
.ceremony__title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-30); line-height: 1.1; margin: 0 0 8px; }
.ceremony__line { font-family: var(--font-print); font-size: var(--t-17); color: var(--ink-2); margin: 0 auto 12px; max-width: 32ch; }
.ceremony__changes { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 4px; font-size: var(--t-15); }
.ceremony__go { margin-top: 6px; min-height: 44px; }
@media (max-width: 700px) {
  .ceremony { top: 70px; }
  .ceremony__sheet { padding: 14px 16px 8px; }
  .ceremony__title { font-size: var(--t-22); }
  .ceremony__line { font-size: var(--t-15); margin-bottom: 8px; }
  /* resta nello spazio sopra il foglio, senza coprire le schede */
  .ceremony { max-height: calc(100% - var(--free-bottom, 0px) - 78px); overflow-y: auto; }
}
@media (max-width: 700px) and (max-height: 760px) {
  .ceremony { top: 64px; }
  .ceremony__mark { display: none; }
  .ceremony__changes { font-size: var(--t-13); }
}

/* Combattimento sul telefono (revisione UX del 25 sera): la carta del nemico intera, con le ricompense, e
   le decisioni sempre sopra la piega. Lo scontro occupa il foglio: schede e maniglia si nascondono (nello
   scontro non servono) e il foglio sale fino al 72% del tavolo; il vassoio resta visibile sopra.
   La barra delle decisioni (tira, fuggi, carte da giocare) sta sotto la carta e resta fissa in fondo. */
@media (max-width: 700px) {
  .app--3d .dock:has(.turn[data-mode='combat']) { max-height: 72%; }
  .app--3d .dock:has(.turn[data-mode='combat']) .tabs,
  .app--3d .dock:has(.turn[data-mode='combat']) .sheet-handle { display: none; }
  .app--3d .dock:has(.turn[data-mode='combat']) .turn { border-top: 1px solid rgba(201, 160, 78, 0.55); border-radius: 16px 16px 0 0; }
  .app--3d .turn[data-mode='combat'] .combat-panel { max-height: none; padding-top: 12px; }
  .app--3d .combat-panel { --combat-card: 124px; --combat-gap: 12px; }
  .app--3d .combat-panel .card--event { --card-w: var(--combat-card); }
  .app--3d .combat-panel .combat { gap: var(--combat-gap); }
  .app--3d .combat-panel .combat-sheet { gap: 12px; }
  .app--3d .combat-panel .combat__decide {
    position: sticky; bottom: -16px; z-index: 2; padding: 10px 16px max(14px, env(safe-area-inset-bottom));
    margin: 0 -16px -16px; background: rgb(252, 249, 241); border-top: 1px solid var(--rule);
  }
  .app--3d .combat-panel .combat__decide .btn { flex: 1 1 0; min-width: 0; }
  .app--3d .combat-panel .combat__decide .combat__actions:not(.combat__actions--main) .btn { flex: 1 1 100%; }
}
@media (max-width: 700px) and (max-height: 700px) {
  .app--3d .combat-panel { --combat-card: 112px; --combat-gap: 10px; }
}

/* Con le schede (telefono e tablet): fuori dalla scheda Turno il pannello del turno tiene solo il pulsante
   principale, così Mercato, Giocatori e Diario hanno lo spazio per farsi leggere (revisione del 26 ottobre). */
@media (max-width: 759px), (max-width: 1179px) and (orientation: portrait), (min-width: 760px) and (max-width: 1179px) and (orientation: landscape), (min-width: 1180px) and (max-height: 559px) {
  .app--3d .table:not([data-tab='turno']) .turn:not([data-mode='combat']) .actionbar > :not(.btn--go):not(.actionbar__row) { display: none; }
}

/* telefono con quattro giocatori: la barra non ci sta, la cabina resta nel menu */
@media (max-width: 420px) { .viewbar:has([data-focus='view-seat-3']) [data-focus='view-cabin'] { display: none; } }

/* =====================================================================
   Azioni e letture, binari (28 ottobre 2026, direzione di Rod)
   - Destra (scheda Azioni): solo ciò che si può fare adesso. Carta piena, bordo nel colore di chi gioca,
     la barra delle possibilità in cima su un fondo tinto: è la parte che chiama la mano.
   - Sinistra (scheda Partita): solo letture. Carta più spenta, titoli piccoli, niente bordi d'accento.
   - Binari: tappe unite da un filo che si riempie. Fasi del turno, maree, corsa ai punti.
   ===================================================================== */

/* --- Binario delle fasi nella barra in alto (fondo scuro del ponte) --- */
.rail { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; flex: none; min-width: 0; }
.rail > li { list-style: none; }
.rail__stop { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: var(--t-13); white-space: nowrap; color: var(--deck-ink-2); line-height: 1; }
.rail__node { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; box-sizing: border-box; }
.rail__stop.is-done { color: var(--brass-bright); }
.rail__stop.is-done .rail__node { background: var(--brass-bright); }
.rail__stop.is-done .rail__label { color: var(--deck-ink-2); }
.rail__stop.is-next { opacity: 0.8; }
.rail__stop.is-now { background: var(--accent); color: var(--accent-on); font-weight: 800; font-size: var(--t-15); padding: 6px 12px 6px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255, 244, 220, 0.55); }
.rail__stop.is-now .rail__node { background: currentColor; border-color: currentColor; width: 8px; height: 8px; }
.rail__link { position: relative; width: 22px; height: 2px; margin: 0 5px; border-radius: 2px; background: rgba(241, 230, 207, 0.24); overflow: hidden; flex: none; }
.rail__link.is-live { width: 56px; height: 4px; }
.rail__fill { position: absolute; inset: 0; background: var(--brass-bright); transform: scaleX(var(--k, 0)); transform-origin: left center; transition: transform var(--t-enter) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .rail__fill { transition: none; } }
@media (max-width: 640px) {
  /* telefono: delle tappe non in corso restano i nodi; il filo che si carica resta lungo */
  .rail__stop:not(.is-now) .rail__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rail__link { width: 12px; margin: 0 3px; }
  .rail__link.is-live { width: 30px; }
  .rail__stop.is-now { padding: 5px 10px 5px 8px; }
}
@media (max-width: 400px) { .rail__stop.is-now { font-size: var(--t-13); } .rail__link.is-live { width: 24px; } }

/* --- Binario a tratti: le maree --- */
.seg-rail { display: flex; gap: 6px; align-items: flex-start; width: 100%; }
.seg-rail__part { flex: 1 1 0; min-width: 0; display: grid; gap: 5px; }
.seg-rail__bar { position: relative; height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.seg-rail__fill { position: absolute; inset: 0; background: var(--ink-3); transform: scaleX(var(--k, 0)); transform-origin: left center; }
.seg-rail__part.is-now .seg-rail__fill { background: #0e6f62; }
.seg-rail__part.is-now .seg-rail__bar { box-shadow: 0 0 0 1.5px #0e6f62; }
.seg-rail__label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-13); color: var(--ink-3); white-space: nowrap; }
.seg-rail__label b { color: var(--ink-2); }
.seg-rail__label .tide-mark { width: 15px; height: 15px; flex: none; }
.seg-rail__part.is-now .seg-rail__label { color: var(--ink); font-weight: 700; }
.seg-rail__part.is-now .seg-rail__label .tide-mark { color: #0e6f62; }
.seg-rail__part.is-done .seg-rail__label { text-decoration: line-through; text-decoration-color: var(--ink-3); }
.tide-panel { gap: 12px; }
.tide-panel__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.tide-panel__notes { display: grid; gap: 8px; align-content: start; }
.tide-panel .next-tide { align-items: flex-start; font-size: var(--t-15); }
.tide-panel .next-tide--retreat { color: #7d1f19; }
.tide-panel .next-tide--retreat .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* --- Corsa ai punti: una riga per giocatore, la barra nel suo colore --- */
.race { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.race__row { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: var(--t-13); color: var(--ink-2); }
.race__row.is-me { color: var(--ink); font-weight: 700; }
.race__who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.race__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race__track {
  position: relative; height: 8px; border-radius: 4px; overflow: hidden; background: var(--rule);
  /* una tacca per punto: il traguardo si conta senza leggere */
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--n) - 1px), rgba(252, 249, 241, 0.9) calc(100% / var(--n) - 1px), rgba(252, 249, 241, 0.9) calc(100% / var(--n)));
}
.race__fill { position: absolute; inset: 0; background: var(--c); transform: scaleX(var(--k, 0)); transform-origin: left center; mix-blend-mode: multiply; }
.race__value { font-weight: 800; color: var(--ink); min-width: 3ch; text-align: right; }

/* --- Le due colonne: letture spente, azioni accese --- */
.app--3d .supply { background: rgba(236, 228, 210, 0.95); border-color: rgba(201, 160, 78, 0.35); }
.app--3d .supply .panel__title { font-family: var(--font-ui); font-size: var(--t-15); font-weight: 700; color: var(--ink-2); }
.app--3d .supply .board-summary { background: rgba(255, 255, 255, 0.55); }
.app--3d .supply .board-summary .board-sheet__name { font-size: var(--t-17); }
.app--3d .turn { background: #fffdf8; border: 2px solid var(--accent); }
.app--3d .turn .actionbar { background: color-mix(in srgb, var(--accent-tint) 60%, #fffdf8); }
.act-panel.is-waiting .market { opacity: 0.6; }
.tab__note { display: inline-grid; margin-left: 6px; color: #b23a2e; }
.tab__note .icon { width: 16px; height: 16px; }
.tab[aria-selected='true'] .tab__note { color: inherit; }

@media (min-width: 1180px) and (min-height: 560px) {
  .app--3d .dock { grid-template-columns: 308px minmax(0, 1fr) 368px; }
}
@media (min-width: 1500px) and (min-height: 560px) {
  .app--3d .dock { grid-template-columns: 324px minmax(0, 1fr) 400px; }
}
.app--3d .supply .panel { padding: 14px; }
.app--3d .supply .board-summary { padding: 12px; }
.app--3d .supply .tide-panel .card--event { --card-w: 112px; }

/* --- Schede (tablet e telefono): due, larghe come il foglio --- */
@media (max-width: 759px), (max-width: 1179px) and (orientation: portrait), (min-width: 760px) and (max-width: 1179px) and (orientation: landscape), (min-width: 1180px) and (max-height: 559px) {
  .app--3d .tabs { gap: 6px; }
  .app--3d .tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: var(--t-15); }
  .app--3d .table[data-tab='partita'] .supply { display: block; }
  /* il bordo d'accento resta sulla colonna delle azioni anche dentro il foglio */
  .app--3d .turn { border-width: 0; }
  .app--3d .table[data-tab='turno'] .turn { box-shadow: inset 0 3px 0 var(--accent); }
}

/* --- Telefono e tablet verticale: foglio più basso, il tavolo respira --- */
@media (max-width: 759px), (max-width: 1179px) and (orientation: portrait) {
  .app--3d .sheet-handle { height: 22px; }
  .app--3d .sheet-handle::before { width: 36px; }
  .app--3d .tabs { padding: 0 12px 8px; }
  .app--3d .actionbar { padding: 10px 14px max(10px, env(safe-area-inset-bottom)); gap: 8px; }
  .app--3d .turn-status { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
  .app--3d .turn-status > .hint--minor { margin: 0; }
  .app--3d .btn--go { min-height: 50px; }
  .app--3d .panel { padding: 12px 14px; }
  .app--3d .dock { max-height: 66%; }
  .app--3d .tide-panel__body { grid-template-columns: auto minmax(0, 1fr); }
  .app--3d .tide-panel .card--event { --card-w: 104px; }
}
/* la plancia nella colonna delle letture: senza la cornice interna, così le tracce stanno intere */
.app--3d .supply .board-summary { background: transparent; border: 0; padding: 0; border-radius: 0; }
.app--3d .supply .meter__box { width: 11px; height: 11px; }
.app--3d .supply .gauges { column-gap: 10px; }
/* computer piccolo con la barra della vista scesa sul tavolo: le rotazioni si fanno trascinando, i pulsanti lasciano posto */
@media (min-width: 1180px) and (max-width: 1359px) and (min-height: 560px) {
  .app--3d .topbar--crowded .viewbar :is([data-focus='view-ccw'], [data-focus='view-cw'], [data-focus='view-tilt'], .viewbar__sep) { display: none; }
}