/* ═══════════════════════════════════════════════════════
   CEO Capital Empires: Origins — Game Board CSS
   ═══════════════════════════════════════════════════════ */
/* I font sono caricati via ../fonts/fonts.css incluso separatamente nell'HTML */

:root {
  --bg-deep:#0d0618; --bg-board:#1a0a2e; --bg-zone:#1f0e35; --bg-card:#221240;
  --border-gold:#b8943e; --border-dim:#5a4520; --gold:#d4a843; --gold-bright:#f0c957;
  --cyan:#47d4c0; --cyan-glow:#47d4c088; --purple:#9b59b6; --purple-dim:#6a3580;
  --magenta:#e84393; --text:#e8dcc8; --text-dim:#8a7a62; --text-gold:#c9a44a;
  --red:#e04040; --green:#4a9e6e; --pr-color:#e04070; --pe-color:#d4a843;
  --font-display:'Cinzel',serif; --font-body:'Cormorant Garamond',serif;
  --card-w:104px; --card-h:142px; --radius:6px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);font-size:17px;background:var(--bg-deep);color:var(--text);min-height:100vh;min-height:100dvh;overflow-x:hidden}

#board{max-width:480px;margin:0 auto;background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(150,80,200,.08) 0%,transparent 70%),linear-gradient(180deg,#1a0a2e 0%,#150828 40%,#1a0a2e 60%,#150828 100%);border-left:3px solid var(--border-gold);border-right:3px solid var(--border-gold);position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
#board::before,#board::after{content:'';position:absolute;width:80px;height:80px;border-radius:50%;pointer-events:none;z-index:0}
#board::before{top:-20px;left:-20px;background:radial-gradient(circle,var(--cyan-glow),transparent 70%)}
#board::after{bottom:-20px;right:-20px;background:radial-gradient(circle,rgba(155,89,182,.3),transparent 70%)}

.bar{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 10px;border-bottom:2px solid var(--border-dim);position:relative;z-index:1}
/* Plancia del giocatore: ritratto del CEO, risorse, pile — come gli eroi nei giochi di carte */
.player-plate{display:flex;align-items:center;gap:14px;padding:10px 14px;background:linear-gradient(180deg,rgba(34,18,64,.75),rgba(19,9,35,.5))}
/* La tua plancia sta sotto la mano, al centro: CEO e PR sempre sott'occhio */
.player-plate.is-me{justify-content:center;gap:18px;border-top:none;border-bottom:2px solid rgba(240,201,87,.5)}
.player-plate.is-me .plate-stats{flex:0 0 auto}
.player-plate.is-me .plate-piles{order:-1}

.player-plate.is-opp{border-bottom:2px solid rgba(224,106,106,.45)}
.plate-stats{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.plate-piles{display:flex;gap:8px;align-items:center}
.hand-gem{background:rgba(71,212,192,.1);color:#47d4c0;border:1px solid rgba(71,212,192,.25)}
.plate-stats .info-chip,.plate-stats .score-gem{font-size:1.06rem;padding:7px 14px}
.plate-stats .info-chip b,.plate-stats .score-gem b{font-size:1.28rem}

.bottom-bar{border-bottom:none;border-top:2px solid var(--border-dim)}
.bar-slot{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}.ceo-slot{flex:1.3}
.slot-label{font-family:var(--font-display);font-size:.69rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;text-align:center}
.mini-pile{width:48px;height:64px;border:1.5px solid var(--border-dim);border-radius:var(--radius);background:var(--bg-card);display:flex;align-items:center;justify-content:center}
.deck-pile{border-color:var(--border-gold);box-shadow:0 0 8px rgba(212,168,67,.15)}
.pile-count{font-family:var(--font-display);font-size:1.12rem;color:var(--gold);font-weight:700}
.ceo-card-slot{min-width:118px;max-width:170px;min-height:64px;border:1.5px solid var(--border-gold);border-radius:var(--radius);background:var(--bg-card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:.78rem;color:var(--text-dim);text-align:center;padding:6px;font-family:var(--font-display)}
.dice-area{display:flex;gap:6px;justify-content:center}
.score-gem{font-family:var(--font-display);font-size:.81rem;padding:4px 10px;border-radius:12px;font-weight:600}
.score-gem.pr{background:rgba(224,64,112,.15);color:var(--pr-color);border:1px solid rgba(224,64,112,.3)}
.score-gem b{font-size:1.06rem}

.field-zone{flex:1;min-height:130px;border-bottom:1.5px solid var(--border-dim);padding:8px;position:relative;display:flex;flex-direction:column}
.player-zone{border-bottom:none;border-top:1.5px solid var(--border-dim)}
.zone-tag{font-family:var(--font-display);font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1.5px;opacity:.6;position:absolute;left:10px;top:6px}
.card-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:flex-start;padding:14px 8px 4px;flex:1;align-content:center}
.empty-slot{font-size:.88rem;color:var(--text-dim);font-style:italic}

.event-zone{min-height:100px;border-top:1.5px solid var(--border-dim);border-bottom:1.5px solid var(--border-dim);padding:8px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(100,50,150,.1),transparent 80%)}
.event-row{justify-content:center;padding-left:20px}

.orb{position:absolute;top:50%;transform:translateY(-50%);width:64px;height:64px;border-radius:50%;border:3px solid var(--border-gold);background:var(--bg-card);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;transition:transform .2s,box-shadow .2s;box-shadow:0 0 12px rgba(0,0,0,.5);overflow:hidden}
.orb:hover:not(:disabled){transform:translateY(-50%) scale(1.08);box-shadow:0 0 20px rgba(212,168,67,.3)}
.orb:active:not(:disabled){transform:translateY(-50%) scale(.95)}
.orb:disabled{opacity:.35;cursor:not-allowed}
.orb-left{left:-32px}.orb-right{right:-32px}
.orb-inner{width:32px;height:32px;border-radius:50%;display:block}
.orb-inner.draw{background:radial-gradient(circle at 35% 35%,#7aecd6,#2ab5a0 40%,#1a7a6a 100%);box-shadow:0 0 10px var(--cyan-glow)}
.orb-inner.advance{background:radial-gradient(circle at 35% 35%,#d4a0e8,#9b59b6 40%,#6a3580 100%);box-shadow:0 0 10px rgba(155,89,182,.4)}
.orb-label{font-family:var(--font-display);font-size:.68rem;color:var(--gold);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}

.info-strip{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:8px 10px;background:rgba(0,0,0,.25);border-top:1.5px solid var(--border-dim);border-bottom:1.5px solid var(--border-dim)}
.info-chip{font-family:var(--font-display);font-size:.75rem;padding:3px 10px;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.pr-chip{background:rgba(224,64,112,.12);color:var(--pr-color);border:1px solid rgba(224,64,112,.25)}
.pe-chip{background:rgba(212,168,67,.12);color:var(--pe-color);border:1px solid rgba(212,168,67,.25)}
.phase-chip{background:rgba(155,89,182,.15);color:var(--purple);border:1px solid rgba(155,89,182,.3)}
.turn-chip{background:rgba(71,212,192,.1);color:var(--cyan);border:1px solid rgba(71,212,192,.2)}
.name-chip{background:rgba(212,168,67,.1);color:var(--gold);border:1px solid rgba(212,168,67,.2)}
.info-chip b{font-size:.94rem}

.hand-tray{padding:8px 8px calc(78px + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,.2);border-top:2px solid var(--border-gold);position:relative}
.hand-tray .zone-tag{writing-mode:horizontal-tb;position:static;transform:none;display:block;margin-bottom:6px;text-align:center}
.hand-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;justify-content:center;flex-wrap:wrap;align-items:stretch}

.card{width:var(--card-w);min-height:var(--card-h);background:var(--bg-card);border:1.5px solid var(--border-gold);border-radius:var(--radius);padding:6px;font-size:.75rem;position:relative;cursor:default;transition:transform .15s,box-shadow .15s;flex-shrink:0}
.card:hover{transform:translateY(-3px);box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 8px rgba(184,148,62,.15)}
.card[data-type="CEO"]{border-color:var(--gold-bright)}.card[data-type="Asset"]{border-color:#4a9e6e}.card[data-type="Dipendente"]{border-color:#4a7ec9}.card[data-type="Collaboratore"]{border-color:var(--purple)}.card[data-type="Formazione"]{border-color:#c98a4a}.card[data-type="Geopolitica"]{border-color:var(--magenta)}.card[data-type="Evento"]{border-color:var(--red)}

.card-type-badge{display:inline-block;padding:1px 5px;border-radius:3px;font-size:.68rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;font-family:var(--font-display)}
.card-name{display:block;font-family:var(--font-display);font-size:.75rem;font-weight:600;color:#fff;line-height:1.15;margin-bottom:2px}
.card-subtype{display:block;font-size:.68rem;color:var(--text-dim)}
.card-stats{display:flex;flex-wrap:wrap;gap:3px;margin:3px 0}.stat{background:rgba(255,255,255,.06);padding:1px 4px;border-radius:3px;font-size:.68rem}.stat.cost{color:var(--red)}
.pe-bar{height:3px;background:rgba(255,255,255,.08);border-radius:2px;margin:3px 0;overflow:hidden}.pe-fill{height:100%;border-radius:2px;transition:width .3s}
.card-extra{font-size:.68rem;color:var(--text-dim);margin-bottom:2px;line-height:1.3}.card-effect{font-size:.68rem;color:var(--text-dim);font-style:italic;line-height:1.25;margin-bottom:4px}
.card-actions{display:flex;gap:3px;flex-wrap:wrap}.card-actions button{border:none;border-radius:3px;padding:3px 6px;font-size:.68rem;font-weight:700;cursor:pointer;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.3px;transition:filter .15s}.card-actions button:hover{filter:brightness(1.2)}
.btn-play{background:var(--green);color:#fff}.btn-sell{background:#c98a4a;color:#fff}.btn-fire{background:var(--red);color:#fff}.btn-offer{background:var(--purple);color:#fff}

.overlay{position:fixed;inset:0;background:rgba(13,6,24,.92);backdrop-filter:blur(6px);z-index:50;display:flex;justify-content:center;align-items:center;overflow-y:auto;padding:20px}
.overlay-box{background:var(--bg-board);border:2px solid var(--border-gold);border-radius:16px;padding:28px;text-align:center;max-width:520px;width:100%;max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 0 40px rgba(184,148,62,.15)}
.overlay-box h1{font-family:var(--font-display);color:var(--gold);font-size:2rem;margin-bottom:8px}
.overlay-box p{color:var(--text);font-size:1.25rem;margin-bottom:20px}.crown{font-size:3.75rem;margin-bottom:8px}
.overlay h2{font-family:var(--font-display);color:var(--gold);font-size:1.38rem;margin-bottom:16px}
.overlay p{color:var(--text-dim);font-size:1.06rem;margin-bottom:12px}

.ceo-grid,.mulligan-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:16px 0}
.ceo-option{background:var(--bg-card);border:2px solid var(--border-dim);border-radius:10px;padding:12px;width:240px;cursor:pointer;text-align:left;transition:all .15s}
.ceo-option:hover{border-color:var(--gold);box-shadow:0 0 16px rgba(212,168,67,.2);transform:translateY(-2px)}
.ceo-option strong{font-family:var(--font-display);color:var(--gold);font-size:1.06rem;display:block;margin-bottom:4px}
.ceo-option .card-effect{font-size:.81rem}
/* CEO option image */
.ceo-option-img{width:100%;height:120px;border-radius:6px;overflow:hidden;margin-bottom:8px}
.ceo-option-img img{width:100%;height:100%;object-fit:cover;object-position:top center}

.mulligan-card{cursor:pointer;width:120px}
.mulligan-card.selected{border-color:var(--magenta)!important;box-shadow:0 0 12px rgba(232,67,147,.3)}

.btn{border:none;border-radius:8px;padding:10px 24px;font-family:var(--font-display);font-size:1rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .15s}
.btn.gold{background:linear-gradient(135deg,var(--gold),#b8943e);color:var(--bg-deep)}.btn.gold:hover{filter:brightness(1.15)}
.btn.secondary{background:var(--bg-card);color:var(--text);border:1px solid var(--border-dim)}.btn.secondary:hover{border-color:var(--gold)}

/* Card thumbnail & preview */
.card-thumb{width:calc(100% + 12px);height:50px;border-radius:4px 4px 0 0;overflow:hidden;margin:-6px -6px 4px -6px;cursor:zoom-in;position:relative}
.card-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .2s}
.card-thumb:hover img{transform:scale(1.05)}
.card-thumb::after{content:'🔍';position:absolute;top:2px;right:4px;font-size:.68rem;opacity:0;transition:opacity .2s}
.card-thumb:hover::after{opacity:.8}
.card-preview-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);z-index:100;display:flex;justify-content:center;align-items:center;cursor:pointer;animation:fadeIn .15s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.card-preview-content{position:relative;max-width:90vw;max-height:90vh}
.card-preview-content img{max-width:90vw;max-height:85vh;border-radius:12px;border:2px solid var(--border-gold);box-shadow:0 0 40px rgba(184,148,62,.3);object-fit:contain}
.card-preview-close{position:absolute;top:-12px;right:-12px;width:32px;height:32px;border-radius:50%;border:2px solid var(--border-gold);background:var(--bg-deep);color:var(--gold);font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.card-preview-close:hover{background:var(--gold);color:var(--bg-deep)}

/* Pending indicators */
.pending-indicator{background:rgba(232,67,147,.12);border:1px solid rgba(232,67,147,.3);border-radius:8px;padding:6px 12px;margin:4px 0;text-align:center}
.pending-text{font-family:var(--font-display);font-size:.69rem;color:var(--magenta);font-weight:600;letter-spacing:.3px}

/* Hint modal */
.hint-box{max-width:440px;border-color:var(--purple)!important;box-shadow:0 0 40px rgba(155,89,182,.25)!important}
.hint-icon{font-size:3rem;margin-bottom:4px}
.hint-box h2#hint-title{color:var(--gold-bright);font-size:1.31rem;margin-bottom:12px;line-height:1.3}
.hint-box p#hint-text{color:var(--text);font-size:1.19rem;line-height:1.5;text-align:left;margin-bottom:22px;background:rgba(155,89,182,.08);border-left:3px solid var(--purple);padding:12px 14px;border-radius:6px}

/* ═══════════════════════════════════════════════════
   BOTTOM NAV (stile webapp mobile)
   ═══════════════════════════════════════════════════ */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:space-around;align-items:stretch;
  background:linear-gradient(180deg,rgba(26,10,46,.92),rgba(13,6,24,.98));
  border-top:2px solid var(--border-gold);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -4px 16px rgba(0,0,0,.5);
  backdrop-filter:blur(10px);
}
.nav-btn{
  flex:1;max-width:160px;min-height:52px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:transparent;border:none;
  color:var(--text-dim);text-decoration:none;cursor:pointer;
  padding:6px 8px;border-radius:10px;position:relative;
  font-family:var(--font-display);transition:all .15s;
}
.nav-btn:hover,.nav-btn:focus-visible{color:var(--gold);background:rgba(212,168,67,.08);outline:none}
.nav-btn:active{transform:scale(.96)}
.nav-icon{font-size:1.75rem;line-height:1}
.nav-label{font-size:.78rem;letter-spacing:.5px;text-transform:uppercase;font-weight:600}
.nav-badge{
  position:absolute;top:4px;right:14%;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--magenta);color:#fff;font-family:var(--font-display);font-size:.75rem;font-weight:700;
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--bg-deep);box-shadow:0 0 8px rgba(232,67,147,.4);
}

/* Pulse dorato sul bottone suggerimento durante il turno del player */
.nav-hint.is-active{color:var(--gold-bright)}
.nav-hint.is-active::before{
  content:'';position:absolute;inset:6px;border-radius:10px;
  background:radial-gradient(circle,rgba(212,168,67,.25),transparent 70%);
  animation:hintPulse 1.8s ease-in-out infinite;pointer-events:none;
}
@keyframes hintPulse{
  0%,100%{opacity:.3;transform:scale(1)}
  50%{opacity:.7;transform:scale(1.08)}
}

/* Spazio in fondo per non far finire la mano sotto la nav */
#board{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}

/* ═══════════════════════════════════════════════════
   LOG OVERLAY (drawer bottom-sheet)
   ═══════════════════════════════════════════════════ */
.log-overlay{
  position:fixed;inset:0;background:rgba(13,6,24,.75);backdrop-filter:blur(6px);
  z-index:60;display:flex;align-items:flex-end;justify-content:center;
  animation:fadeIn .15s ease;
}
.log-panel{
  background:var(--bg-board);border:2px solid var(--border-gold);border-bottom:none;
  border-radius:16px 16px 0 0;width:100%;max-width:560px;
  max-height:70vh;display:flex;flex-direction:column;
  animation:slideUp .25s ease-out;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.log-panel-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--border-dim);
}
.log-panel-head h3{font-family:var(--font-display);color:var(--gold);font-size:1.19rem;letter-spacing:.5px}
.log-close{background:transparent;border:1px solid var(--border-dim);border-radius:50%;
  width:30px;height:30px;color:var(--text-dim);font-size:1.12rem;cursor:pointer;transition:all .15s}
.log-close:hover{color:var(--red);border-color:var(--red)}

/* ═══════════════════════════════════════════════════
   DICE ROLL ANIMATION
   ═══════════════════════════════════════════════════ */
.dice-roll-area{display:flex;align-items:center;justify-content:center;gap:24px;margin:24px 0 16px}
.dice-player{display:flex;flex-direction:column;align-items:center;gap:8px}
.dice-label{font-family:var(--font-display);font-size:1rem;color:var(--gold);font-weight:600}
.dice-cube{font-size:3.75rem;animation:diceShake .08s infinite alternate;line-height:1}
.dice-cube.dice-landed{animation:diceLand .3s ease-out forwards}
.dice-result{font-family:var(--font-display);font-size:1.75rem;color:var(--gold-bright);font-weight:700;min-height:1.6rem}
.dice-vs{font-family:var(--font-display);font-size:1.25rem;color:var(--purple);font-weight:700}
.dice-winner-text{font-family:var(--font-display);font-size:1.25rem;color:var(--cyan);font-weight:700;margin-top:8px;transition:opacity .3s}

@keyframes diceShake{
  0%{transform:rotate(-8deg) scale(1)}
  100%{transform:rotate(8deg) scale(1.05)}
}
@keyframes diceLand{
  0%{transform:scale(1.3) rotate(10deg)}
  50%{transform:scale(.9) rotate(-5deg)}
  100%{transform:scale(1) rotate(0deg)}
}

/* Log */
.log-body{flex:1;overflow-y:auto;padding:10px 16px 14px;font-size:1rem;color:var(--text);line-height:1.55}
.log-entry{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.log-entry:last-child{border-bottom:none}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-dim);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--gold)}

@media(min-width:520px){:root{--card-w:126px;--card-h:170px}#board{max-width:620px}.orb{width:72px;height:72px}.orb-inner{width:36px;height:36px}.card-thumb{height:72px}}
@media(min-width:768px){:root{--card-w:140px;--card-h:186px}#board{max-width:720px}.card-name{font-size:.95rem}.card-effect{font-size:.76rem}.card-thumb{height:82px}}
/* Schermi grandi: il tavolo si allarga e il testo cresce ancora */
@media(min-width:1180px){:root{--card-w:158px;--card-h:210px}body{font-size:18px}#board{max-width:860px}.card-name{font-size:1.02rem}.card-effect{font-size:.82rem}.card-extra{font-size:.8rem}.card-thumb{height:96px}}

/* ── Finestra di risposta (Evento avversario in attesa) ── */
.response-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 10px;padding:10px 14px;background:rgba(224,64,64,.12);border:1.5px solid rgba(224,64,64,.45);border-radius:10px;box-shadow:0 0 18px rgba(224,64,64,.18);animation:response-pulse 1.6s ease-in-out infinite}
.response-bar[hidden]{display:none}
.response-text{font-size:1rem;color:var(--text);line-height:1.3;flex:1}
.response-actions{display:flex;gap:6px;flex-shrink:0}
.response-actions .btn{padding:8px 12px;font-size:.88rem}
@keyframes response-pulse{0%,100%{box-shadow:0 0 12px rgba(224,64,64,.15)}50%{box-shadow:0 0 24px rgba(224,64,64,.35)}}

/* ── Stack eventi (2D) ── */
#event-stack:empty{display:none}
.stack-card{opacity:.85}
.stack-card.stack-top{opacity:1;box-shadow:0 0 14px rgba(224,64,64,.45)}

/* ── Tutorial: spotlight, oscuramento e freccia ── */
.card.tutorial-spot{box-shadow:0 0 0 2px var(--gold-bright),0 0 22px rgba(240,201,87,.55);animation:tut-spot 1.3s ease-in-out infinite;z-index:2;position:relative}
.card.tutorial-dim{opacity:.42;filter:saturate(.6)}
.ceo-card-slot.tutorial-spot,#btnNextPhase.tutorial-spot,.info-chip.tutorial-spot,#btnRespond.tutorial-spot{box-shadow:0 0 0 2px var(--gold-bright),0 0 18px rgba(240,201,87,.6)!important;animation:tut-spot 1.3s ease-in-out infinite;position:relative}
@keyframes tut-spot{0%,100%{box-shadow:0 0 0 2px var(--gold-bright),0 0 14px rgba(240,201,87,.35)}50%{box-shadow:0 0 0 3px var(--gold-bright),0 0 28px rgba(240,201,87,.75)}}
/* La freccia: discreta, rimbalza sopra l'elemento da usare */
.tutorial-spot::before{content:"▼";position:absolute;left:50%;top:-20px;transform:translateX(-50%);color:var(--gold-bright);font-size:1.12rem;text-shadow:0 0 8px rgba(0,0,0,.8);animation:tut-arrow 1s ease-in-out infinite;pointer-events:none;z-index:3}
@keyframes tut-arrow{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,5px)}}
.pr-float{position:absolute;left:50%;top:-4px;transform:translateX(-50%);font-weight:700;font-size:1.06rem;pointer-events:none;animation:pr-float 1.3s ease-out forwards}
.pr-chip{position:relative}
.pr-float.gain{color:#7fd4a3}.pr-float.loss{color:#ff7a7a}
@keyframes pr-float{0%{opacity:0;transform:translate(-50%,4px)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px)}}

/* ── Tutorial: fumetto del mentore ── */
.tut-bubble{position:fixed;top:8px;left:50%;transform:translateX(-50%);width:min(94vw,680px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;z-index:60;background:rgba(13,6,24,.94);border:1.5px solid var(--border-gold);border-radius:14px;padding:14px 18px 16px;box-shadow:0 8px 32px rgba(0,0,0,.6),0 0 24px rgba(212,168,67,.15);backdrop-filter:blur(8px);color:var(--text)}
.tut-bubble[hidden]{display:none}
.tut-bubble-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tut-mentor{width:44px;height:44px;border-radius:50%;overflow:hidden;border:1.5px solid var(--gold);background:var(--bg-card);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tut-mentor img{width:100%;height:100%;object-fit:cover;object-position:top}
.tut-phase{font-family:var(--font-display);color:var(--gold);font-size:.9rem;font-weight:700;letter-spacing:.4px}
.tut-skip{margin-left:auto;background:none;border:1px solid var(--border-dim);color:var(--text-dim);font-size:.83rem;cursor:pointer;padding:3px 8px;border-radius:6px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.4px}
.tut-skip:hover{color:var(--gold);border-color:var(--gold)}
.tut-phases{display:flex;gap:4px;margin:0 0 8px}
.tut-dot{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.12)}
.tut-dot.is-done{background:var(--green)}
.tut-dot.is-now{background:var(--gold-bright);box-shadow:0 0 6px rgba(240,201,87,.7)}
.tut-text{font-size:1.45rem;line-height:1.45;margin:0 0 10px;color:var(--text)}
.tut-figure{margin:0 0 8px}
.tut-figure-card{position:relative;width:min(100%,300px);margin:0 auto}
.tut-figure-card img{display:block;width:100%;border-radius:8px;border:1px solid var(--border-gold)}
.tut-callout{position:absolute;transform:translate(-50%,-50%);pointer-events:none}
.tut-callout i{display:block;width:10px;height:10px;border-radius:50%;border:2px solid rgba(240,201,87,.55);background:rgba(240,201,87,.15)}
.tut-callout.is-active i{width:30px;height:30px;margin:-10px;border:3px solid var(--gold-bright);background:rgba(240,201,87,.18);box-shadow:0 0 14px rgba(240,201,87,.8);animation:tut-spot 1.3s ease-in-out infinite}
.tut-callout.is-active b{position:absolute;left:50%;top:22px;transform:translateX(-50%);white-space:nowrap;background:rgba(13,6,24,.95);color:var(--gold-bright);border:1px solid var(--gold);border-radius:6px;padding:2px 7px;font-size:.9rem;font-family:var(--font-display)}
.field-zone.tutorial-spot,.event-zone.tutorial-spot,.hand-tray.tutorial-spot,.score-gem.tutorial-spot,#btnMenuToggle.tutorial-spot,.mini-pile.tutorial-spot{box-shadow:0 0 0 2px var(--gold-bright),0 0 18px rgba(240,201,87,.6)!important;animation:tut-spot 1.3s ease-in-out infinite;position:relative;border-radius:10px}
.tut-note{font-size:1.05rem;line-height:1.35;margin:0 0 8px;color:#ffb3b3;background:rgba(224,64,64,.12);border-left:3px solid rgba(224,64,64,.6);padding:6px 10px;border-radius:6px}
.tut-note[hidden]{display:none}
.tut-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;min-height:30px}
.tut-actions .btn{padding:8px 16px;font-size:.9rem}
.tut-hint{font-size:1rem;color:var(--gold);margin-right:auto}
.tut-wait{color:var(--text-dim);animation:tut-blink 1.2s ease-in-out infinite}
@keyframes tut-blink{0%,100%{opacity:.4}50%{opacity:1}}
.tut-bubble.is-waiting{border-color:var(--gold-bright)}
.tut-bubble.is-silent{opacity:.85}
.tut-bubble.is-coach{background:rgba(13,6,24,.82);border-color:var(--border-dim)}
.tut-bubble.is-coach .tut-text{font-size:1.12rem;color:var(--text-dim)}
.tut-bubble.is-end{border-color:var(--green);box-shadow:0 8px 32px rgba(0,0,0,.6),0 0 28px rgba(74,158,110,.35)}
.tut-pop{animation:tut-pop .28s ease-out}
@keyframes tut-pop{0%{transform:translateX(-50%) translateY(-6px);opacity:.6}100%{transform:translateX(-50%) translateY(0);opacity:1}}
.tut-note.tut-pop{animation:tut-note-pop .25s ease-out}
@keyframes tut-note-pop{0%{transform:translateY(-4px);opacity:0}100%{transform:none;opacity:1}}
/* In 2D il fumetto copre il campo avversario: lascia spazio sopra */
.tutorial-mode.render-dom #board{padding-top:170px}

/* ── Tutorial: intro dei momenti e celebrazione ── */
.tut-scene-overlay{z-index:70}
.tut-scene-box{max-width:420px}
.tut-scene-kicker{font-family:var(--font-display);color:var(--purple);font-size:.9rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
.tut-celebrate .overlay-box{border-color:var(--gold-bright);box-shadow:0 0 60px rgba(240,201,87,.35)}

/* ── Prima schermata: tutorial o salta ── */
.tutorial-choice p{font-size:1.19rem;line-height:1.45}
.tutorial-choice-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.tutorial-choice-actions .btn{width:100%}

/* ── Menu dei mazzi ── */
.overlay.overlay-top{align-items:flex-start;padding-top:36px}
.deck-menu{max-width:1060px;text-align:left;margin:0 auto 36px;max-height:none;padding:0 0 0;overflow:visible;background:linear-gradient(180deg,#1f0e35,#150828)}

/* Testata con arte: il menu si apre come una carta */
.deck-menu-head{position:relative;overflow:hidden;text-align:center;padding:26px 24px 20px;border-radius:14px 14px 0 0}
.deck-menu-head::before{content:"";position:absolute;inset:0;background-image:var(--art-3);background-size:cover;background-position:center 30%;opacity:.5}
.deck-menu-head::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,6,24,.35),rgba(31,14,53,.97))}
.deck-menu-head > *{position:relative;z-index:1}
.deck-menu-head h1{margin:8px 0 2px}
.deck-menu-sub{color:var(--text-dim);font-size:1.06rem;margin:0}

.deck-side{padding:0 24px;margin-bottom:6px}
.deck-side:last-of-type{padding-bottom:18px}
.deck-side h2{display:flex;align-items:center;gap:10px;margin:18px 0 12px;text-align:left}
.deck-side-tag{font-size:.8rem;letter-spacing:2px;padding:3px 10px;border-radius:999px;background:rgba(240,201,87,.14);border:1px solid var(--gold);color:var(--gold-bright)}
.deck-side-tag.is-cpu{background:rgba(224,106,106,.14);border-color:#e06a6a;color:#ff9c9c}
.deck-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:14px}

/* Placca del mazzo */
.deck-option{position:relative;overflow:hidden;text-align:left;background:var(--bg-card);border:1.5px solid var(--border-dim);border-radius:12px;padding:0 14px 14px;color:var(--text);cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,box-shadow .15s,transform .15s}
.deck-art{position:absolute;left:0;right:0;top:0;height:96px;background-size:cover;background-position:center 22%;opacity:.5}
.deck-option::after{content:"";position:absolute;left:0;right:0;top:0;height:96px;background:linear-gradient(180deg,rgba(13,6,24,.2),rgba(34,18,64,.97))}
.deck-option:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.deck-option.is-selected{border-color:var(--gold-bright);box-shadow:0 0 0 2px rgba(240,201,87,.45),0 0 26px rgba(240,201,87,.35)}
.deck-head{position:relative;z-index:1;display:flex;align-items:flex-end;gap:12px;padding-top:52px}
.deck-portrait{width:62px;height:62px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid var(--gold);box-shadow:0 4px 14px rgba(0,0,0,.6);flex:0 0 auto}
.deck-dice{font-size:2.6rem;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.deck-titles{display:flex;flex-direction:column;gap:1px;min-width:0}
.deck-arch{font-size:.78rem;text-transform:uppercase;letter-spacing:1px;color:var(--purple)}
.deck-name{font-family:var(--font-display);color:var(--gold-bright);font-size:1.19rem;line-height:1.15}
.deck-ceo{font-size:1rem;color:var(--gold)}
.deck-strategy{position:relative;z-index:1;font-size:1rem;color:var(--text-dim);line-height:1.35}
.deck-keys{position:relative;z-index:1;display:flex;gap:5px;margin-top:auto}
.deck-keys img{width:48px;height:66px;object-fit:cover;object-position:top;border-radius:4px;border:1px solid var(--border-dim)}
.deck-check{position:absolute;z-index:2;top:10px;right:10px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#241405;background:var(--gold-bright);opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.deck-option.is-selected .deck-check{opacity:1;transform:scale(1)}
/* "Casuale" è una scelta sola: una fascia sopra i quattro mazzi */
.deck-random{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px;padding:12px 16px}
.deck-random .deck-head{padding-top:0;flex:0 0 auto}
.deck-random .deck-dice{font-size:2rem}
.deck-random .deck-strategy{margin:0}
.deck-random .deck-check{position:static;margin-left:auto}

.deck-manual{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:1.12rem;color:var(--text);cursor:pointer}
.deck-manual input{width:20px;height:20px;accent-color:var(--gold)}

/* Piede: riepilogo e partenza, sempre in fondo al pannello */
/* Il piede sta in fondo al pannello: non galleggia e non copre i mazzi */
.deck-menu-foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 18px;padding:14px 24px 20px;margin-top:6px;border-top:1px solid rgba(184,148,62,.3);border-radius:0 0 14px 14px}
.deck-summary{margin:0;font-size:1.06rem;color:var(--text-dim)}
.deck-summary b{font-family:var(--font-display);color:var(--gold-bright)}
.deck-vs{color:var(--text-dim);font-style:italic;margin:0 6px}

.chooser-skip{margin-right:8px}
.ceo-card-slot .btn-ability{font-size:.8rem;line-height:1.2;white-space:normal;width:100%;padding:5px 6px}

/* ── Fase contabile: PRODUZIONE PR / MANTENIMENTO PR ── */
.ledger-overlay{z-index:58}
.ledger-box{max-width:620px;padding:22px 22px 18px;display:flex;flex-direction:column;max-height:calc(100vh - 40px)}
.ledger-title{font-family:var(--font-display);letter-spacing:2px;font-size:1.56rem;margin:0 0 4px;color:var(--gold-bright)}
.is-maintenance .ledger-title{color:#ff8a8a}
.ledger-owner{display:inline-block;align-self:center;font-family:var(--font-display);font-size:1rem;letter-spacing:3px;padding:3px 14px;border-radius:999px;border:1px solid var(--border-gold);color:var(--gold);margin-bottom:10px}
.ledger-owner.is-cpu{border-color:#e06a6a;color:#ff9c9c}
.ledger-blocked{font-size:1.02rem;color:#ffb3b3;margin:0 0 8px}
.ledger-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1 1 auto;min-height:0;text-align:left;border-top:1px solid var(--border-dim)}
.ledger-row{display:flex;align-items:center;gap:14px;padding:10px 4px;border-bottom:1px solid var(--border-dim)}
.ledger-thumb{flex:0 0 54px;width:54px;height:74px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid var(--border-dim)}
.ledger-thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.ledger-name{flex:1 1 auto;display:flex;flex-direction:column;font-size:1.19rem;color:var(--text)}
.ledger-name small{font-size:.9rem;color:var(--text-dim);line-height:1.2}
.ledger-amount{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-family:var(--font-display);font-size:1.35rem;min-width:88px;text-align:right}
.ledger-pe{color:#8fd3ff;font-size:.92em}
.ledger-total-amounts{display:flex;align-items:baseline;gap:10px}
.ledger-total-amounts .ledger-pe{font-size:1.38rem}
.ledger-row .ledger-pr.is-plus,.ledger-total b.is-plus{color:#7ee2a8}
.ledger-row .ledger-pr.is-minus,.ledger-total b.is-minus{color:#ff8a8a}
.ledger-row .ledger-pr.is-zero,.ledger-total b.is-zero{color:var(--text-dim)}
.ledger-row.is-note{opacity:.8}
.ledger-empty{padding:14px 4px;text-align:center;color:var(--text-dim);font-style:italic}
.ledger-total{display:flex;justify-content:space-between;align-items:center;border-top:2px solid var(--border-gold);margin-top:6px;padding:10px 4px 4px;font-family:var(--font-display);letter-spacing:1px}
.ledger-total b{font-size:1.88rem}
.ledger-summary{font-size:1rem;color:var(--text-dim);margin:2px 0 10px}
.ledger-summary b{color:var(--text)}
.ledger-ok{min-width:140px;align-self:center}
.is-production .ledger-box{border-color:rgba(126,226,168,.55);box-shadow:0 0 40px rgba(126,226,168,.15)}
.is-maintenance .ledger-box{border-color:rgba(255,138,138,.55);box-shadow:0 0 40px rgba(255,138,138,.15)}

/* ═══════════════════════════════════════════════════════
   KIT ORNAMENTALE — decorazioni ricavate dalle carte
   Il medaglione, gli angoli e le arti vengono dalle stesse
   illustrazioni del mazzo: nessuna immagine nuova, solo
   ritagli fatti in CSS, così restano nitidi a ogni misura.
   ═══════════════════════════════════════════════════════ */
:root{
  --art-1:url("../mazzo definitivo/37.jpg");    /* Magazzino: officina dorata */
  --art-2:url("../mazzo definitivo/263.jpg");   /* Antitrust: aula solenne */
  --art-3:url("../mazzo definitivo/49.jpg");    /* Innovation Hub */
  --art-4:url("../mazzo definitivo/13.jpg");    /* Sede */
  --emblem-art:url("../mazzo definitivo/37.jpg");
}

/* Medaglione del tipo, ritagliato dall'alto della carta */
.emblem{display:inline-block;flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background-image:var(--emblem-art);background-size:1000% 1111%;background-position:50% 7.1%;
  box-shadow:0 0 0 2px var(--gold),0 0 14px rgba(240,201,87,.4);vertical-align:middle}
.emblem.lg{width:66px;height:66px}
.emblem.sm{width:26px;height:26px;box-shadow:0 0 0 1.5px var(--gold)}

/* Divisore dorato con medaglione al centro */
.ornate-div{display:flex;align-items:center;gap:14px;margin:18px 0;width:100%}
.ornate-div::before,.ornate-div::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* Pannello con angoli dorati (quattro, via ::before/::after + .corner) */
.ornate{position:relative;background:linear-gradient(180deg,rgba(31,14,53,.96),rgba(19,9,35,.96));
  border:1px solid rgba(184,148,62,.4);border-radius:6px}
.ornate::before,.ornate::after{content:"";position:absolute;width:22px;height:22px;pointer-events:none}
.ornate::before{top:-1px;left:-1px;border-top:3px solid var(--gold);border-left:3px solid var(--gold);border-radius:6px 0 0 0}
.ornate::after{bottom:-1px;right:-1px;border-bottom:3px solid var(--gold);border-right:3px solid var(--gold);border-radius:0 0 6px 0}

/* Intestazione con l'arte della carta che sfuma nel pannello */
.art-head{position:relative;overflow:hidden}
.art-head::before{content:"";position:absolute;inset:0;background-image:var(--art-1);
  background-size:cover;background-position:center 28%;opacity:.55}
.art-head::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,6,24,.25) 0%,rgba(19,9,35,.86) 62%,rgba(19,9,35,.99) 100%)}
.art-head > *{position:relative;z-index:1}

/* Bottone principale in stile placca d'ottone */
.btn-forge{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--font-display);font-size:1.16rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  padding:18px 34px;min-height:64px;border:none;border-radius:10px;cursor:pointer;text-decoration:none;
  color:#241405;background:linear-gradient(180deg,#f3d07f 0%,#d4a843 46%,#a87f2c 100%);
  box-shadow:0 6px 0 #6b4f16,0 12px 26px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .12s ease,box-shadow .12s ease,filter .15s ease}
.btn-forge:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 8px 0 #6b4f16,0 16px 32px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-forge:active{transform:translateY(3px);box-shadow:0 2px 0 #6b4f16,0 6px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-forge.is-ghost{color:var(--gold-bright);background:linear-gradient(180deg,rgba(60,38,92,.9),rgba(34,18,64,.95));
  border:1.5px solid rgba(184,148,62,.6);box-shadow:0 5px 0 rgba(0,0,0,.45),0 10px 22px rgba(0,0,0,.45)}
.btn-forge.is-ghost:hover{border-color:var(--gold-bright);color:#fff}
.btn-forge .btn-sub{display:block;font-family:var(--font-body);font-size:1rem;letter-spacing:.2px;
  text-transform:none;opacity:.92;font-weight:400}
.btn-forge .btn-lines{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}

/* ═══════════════════════════════════════════════════
   SEGNALI: cosa posso fare adesso
   ═══════════════════════════════════════════════════ */

/* Una carta giocabile si accende; le altre restano indietro */
.hand-row .card:has([data-action="play"]:not([disabled])){
  border-color:#7ee2a8;
  box-shadow:0 0 0 1px rgba(126,226,168,.5),0 0 18px rgba(126,226,168,.28);
}
.hand-row .card:has([data-action="play"]:not([disabled])):hover{
  transform:translateY(-8px);
  box-shadow:0 0 0 1px rgba(126,226,168,.7),0 10px 26px rgba(0,0,0,.6),0 0 26px rgba(126,226,168,.4);
}
.hand-row .card:not(:has([data-action="play"]:not([disabled]))){opacity:.72}

/* Il bottone di fine turno respira quando tocca a te */
#btnNextPhase:not(:disabled){animation:turnBreath 2.4s ease-in-out infinite}
@keyframes turnBreath{
  0%,100%{box-shadow:0 0 0 0 rgba(240,201,87,.45)}
  50%{box-shadow:0 0 0 10px rgba(240,201,87,0)}
}

/* Mentre gioca la CPU la tua mano si tira indietro */
body.cpu-turn .hand-row{opacity:.55;filter:saturate(.75)}
body.cpu-turn .player-plate.is-me{opacity:.8}
body.cpu-turn .player-plate.is-opp{box-shadow:0 0 22px rgba(224,106,106,.3) inset}

/* Il ritratto del CEO: tondo, come un eroe */
.ceo-slot-name{font-family:var(--font-display);font-size:.88rem;color:var(--gold);line-height:1.15;display:block}

/* ═══════════════════════════════════════════════════
   TAVOLO IN UNA SCHERMATA
   Le carte sul tavolo mostrano arte, nome e numeri; il testo
   dell'effetto sta a un tocco di distanza, nella scheda grande.
   Così tutto il tavolo sta sotto gli occhi senza scorrere.
   ═══════════════════════════════════════════════════ */
#board .card-row .card .card-effect,#board .hand-row .card .card-effect{display:none}
#board .card-row .card,#board .hand-row .card{min-height:0;padding-bottom:8px}
#board .card-row .card-thumb,#board .hand-row .card-thumb{height:104px}
/* Il testo per esteso è a un tocco: la carta grande con la scheda accanto */
#board .hand-row .card-thumb::before{content:'🔍';position:absolute;bottom:4px;right:6px;font-size:.8rem;opacity:.65;z-index:2;text-shadow:0 1px 3px #000}

@media(min-height:680px){
  /* Solo la vista a carte: in 3D il tavolo calcola da sé lo spazio */
  body:not(.render-webgl) #board{height:100dvh;min-height:0;overflow:hidden}
  /* Carte del tavolo compatte: arte, nome e numeri. Il resto è nella scheda. */
  #board .card-row .card-thumb,#board .hand-row .card-thumb{height:74px}
  #board .card-row .card-type-badge,#board .hand-row .card-type-badge{display:none}
  #board .card-row .card,#board .hand-row .card{padding:5px 6px 7px}
  #board .card-row .card-name,#board .hand-row .card-name{margin-bottom:1px}
  #board .card-row .card-stats,#board .hand-row .card-stats{margin:2px 0}
  .player-plate{padding:7px 12px}
  .hand-tray{padding:4px 8px calc(26px + env(safe-area-inset-bottom,0px))}
  .hand-tray .zone-tag{margin-bottom:2px}
  #board > .event-zone .card-row{padding-top:14px;min-height:38px}
  /* Il bottone di fine turno galleggia sul lato, come nei giochi di carte */
  body:not(.render-webgl) #board > .turn-bar{position:absolute;right:12px;top:47%;transform:translateY(-50%);z-index:6;padding:0;width:auto}
  #board > .field-zone{padding:2px 6px}
  #board > .field-zone .card-row{padding:12px 4px 2px}
  #board > .field-zone{flex:1 1 0;min-height:0}
  #board > .field-zone .card-row{overflow-y:auto;overscroll-behavior:contain}
  #board > .event-zone{flex:0 0 auto;min-height:0}
  .hand-tray{flex:0 0 auto;padding-bottom:calc(46px + env(safe-area-inset-bottom,0px))}
  .hand-row{overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;justify-content:flex-start;padding-bottom:4px;scrollbar-width:thin}
  .hand-row .card{flex:0 0 auto}
}
/* Schermi molto larghi: il tavolo occupa la scena */
@media(min-width:1400px){#board{max-width:min(1180px,94vw)}}

/* Bottone di partenza: presente ma discreto, in fondo alla scelta */
#deckConfirm{font-size:1rem;letter-spacing:1.2px;padding:12px 26px;min-height:48px;
  box-shadow:0 4px 0 #6b4f16,0 8px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.45)}
#deckConfirm:hover{box-shadow:0 5px 0 #6b4f16,0 11px 22px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.45)}
#deckConfirm:active{box-shadow:0 1px 0 #6b4f16,0 4px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35)}

/* ═══════════════════════════════════════════════════
   FONDALE DEL TAVOLO
   Arte delle carte in trasparenza, montanti d'ottone ai lati
   e il medaglione inciso al centro: decorazione che non ruba
   contrasto alle carte.
   ═══════════════════════════════════════════════════ */
.board-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.render-webgl .board-bg{display:none}

.bg-art{position:absolute;inset:-8%;background-image:var(--art-1);background-size:cover;
  background-position:center 30%;opacity:.42;filter:saturate(.85) contrast(.95)}
/* Il velo spegne l'arte quanto basta: le carte restano sempre le più chiare */
.bg-veil{position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 62% at 50% 46%,rgba(13,6,24,.42) 0%,rgba(13,6,24,.8) 60%,rgba(13,6,24,.94) 100%),
             linear-gradient(180deg,rgba(26,10,46,.72) 0%,rgba(13,6,24,.22) 28%,rgba(13,6,24,.28) 72%,rgba(26,10,46,.78) 100%)}

/* Medaglione inciso al centro del panno */
.bg-emblem{position:absolute;left:50%;top:48%;width:min(42vh,380px);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background-image:var(--emblem-art);background-size:1000% 1111%;background-position:50% 7.1%;
  opacity:.16;filter:saturate(.7) contrast(1.15);
  mask-image:radial-gradient(circle,#000 52%,transparent 74%);
  -webkit-mask-image:radial-gradient(circle,#000 52%,transparent 74%)}

/* Montanti d'ottone lungo i bordi */
.bg-rail{position:absolute;top:0;bottom:0;width:18px;
  background:linear-gradient(90deg,rgba(184,148,62,.55),rgba(184,148,62,.14) 55%,transparent),
             repeating-linear-gradient(0deg,rgba(240,201,87,.3) 0 2px,transparent 2px 15px)}
.bg-rail-l{left:0}
.bg-rail-r{right:0;transform:scaleX(-1)}

/* Sopra il fondale ci va tutto il resto */
#board > .event-zone,#board > .info-strip,#board > .response-bar{position:relative;z-index:1}
#board > .bar,#board > .field-zone,#board > .hand-tray{z-index:1}

/* Territori: il campo avversario tira al rosso, il tuo al blu */
.field-zone.opp-zone{box-shadow:inset 0 0 70px rgba(224,106,106,.08)}
.field-zone.player-zone{box-shadow:inset 0 0 70px rgba(106,157,224,.1)}
.event-zone{background:linear-gradient(180deg,rgba(240,201,87,.05),transparent 60%)}
.hand-tray{background:linear-gradient(180deg,rgba(13,6,24,.55),rgba(13,6,24,.8))}

/* Schermi stretti: la plancia resta su una riga sola */
@media(max-width:560px){
  .player-plate{gap:8px;padding:7px 8px}
  .player-plate.is-me{gap:10px}
  .ceo-card-slot{min-width:98px;padding:4px}
  .ceo-card-slot .btn-ability{font-size:.72rem;padding:4px}
  .mini-pile{width:40px;height:54px}
  .plate-stats .info-chip,.plate-stats .score-gem{padding:6px 10px;font-size:.98rem}
  .plate-stats .info-chip b,.plate-stats .score-gem b{font-size:1.15rem}
}

/* ═══════════════════════════════════════════════════
   SELETTORE LINGUA
   ═══════════════════════════════════════════════════ */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: rgba(26, 10, 46, .9);
  border: 1.5px solid var(--border-gold);
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .4), 0 0 16px rgba(212, 168, 67, .12);
}
.lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .6px;
  padding: 5px 13px;
  border-radius: 20px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lang-btn:hover { background: rgba(212, 168, 67, .18); }
.lang-btn.is-on {
  background: var(--gold);
  color: var(--bg-deep);
  box-shadow: 0 0 12px rgba(212, 168, 67, .35);
}
/* Dentro una finestra: centrato sotto i bottoni */
.lang-switch.lang-inline { margin: 18px auto 0; }