/* ==========================================================================
   Outbreak Tactics — HUD inspired by the RE2/RE4 Remake menus:
   smoked-glass panels, hairline frames with corner ticks, condensed caps for
   labels, an old-style serif for titles, ECG condition readout and a
   merchant case for the shop. The 3D arena fills the window behind it.
   ========================================================================== */
:root{
  --ink:#ebe6da;--ink-2:#c9c3b5;--dim:#958f83;--faint:#615c53;
  --void:#070706;--panel:rgba(11,11,10,.80);--panel-2:rgba(20,19,17,.88);--panel-hi:rgba(38,35,30,.9);
  --line:rgba(235,228,210,.13);--line-2:rgba(235,228,210,.26);--line-3:rgba(235,228,210,.5);
  --gold:#d6b25e;--gold-2:#f0d48f;--gold-dim:#7f6a37;--red:#c63b2c;--red-2:#ff6a52;
  --fine:#4fd17a;--caution:#e7c33f;--warn:#e9852f;--danger:#e2432f;--blue:#8ab9d8;
  --display:'Palatino Linotype','Book Antiqua',Palatino,'URW Palladio L','Cormorant Garamond',Georgia,serif;
  --ui:'Bahnschrift','DIN Alternate','Barlow Condensed','Roboto Condensed','Arial Narrow','Segoe UI',sans-serif;
  --mono:'Bahnschrift','Consolas','DejaVu Sans Mono',monospace;
  --top-h:66px;--col-w:clamp(214px,17.5vw,286px);--gap:12px;--dock-h:auto;
  --tick:10px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--void);color:var(--ink);font:13px/1.35 var(--ui);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed;opacity:.42}
button:focus-visible,a:focus-visible{outline:1px solid var(--gold-2);outline-offset:2px}
kbd{font:10px var(--mono);color:var(--dim);border:1px solid var(--line-2);padding:0 4px;margin-left:5px;border-radius:2px}
img{user-select:none;-webkit-user-drag:none}
.hidden{display:none!important}
.hint{color:var(--dim);font-size:11px;letter-spacing:.02em;margin:6px 0 0}

/* Frame with four corner ticks, the signature of the RE remake menus. */
.hud-panel,.round-plate,.hover-card,.modal,.merchant-dock,.reserve-row,.camera-tools,.meter,.inspector-portrait{
  --c:var(--line-3);
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--tick) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) top left/1px var(--tick) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--tick) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/1px var(--tick) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--tick) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/1px var(--tick) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--tick) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/1px var(--tick) no-repeat,
    linear-gradient(180deg,rgba(26,25,22,.93),rgba(9,9,8,.93));
  border:1px solid var(--line);
  /* no backdrop blur: it re-samples the animated WebGL arena every frame */
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}

/* ---------- Arena ---------- */
#game{position:fixed;inset:0}
.battlefield{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 46%,#1b1a16 0%,#0d0c0b 55%,#050505 100%)}
.camera-surface,.board,.effects{position:absolute;inset:0}
.effects{pointer-events:none;z-index:6}
.board-model-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:5;background:
  radial-gradient(ellipse 75% 70% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%),
  linear-gradient(180deg,rgba(0,0,0,.55),transparent 16%,transparent 70%,rgba(0,0,0,.65));}
.battlefield.panning{cursor:grabbing}

/* Hex hit areas follow the projected board (size set by the 3D layer). */
.cell{position:absolute;width:var(--hex-w,60px);height:calc(var(--hex-h,52px)*1.12);transform:translate(-50%,-50%);z-index:2;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:transparent;transition:background .15s}
.board:not(.has-3d) .cell{transform:none;width:12%;height:11%;background:rgba(214,178,94,.06)}
.cell.enemy-cell{opacity:0;pointer-events:none}
.cell.player-cell:hover{background:rgba(240,212,143,.22)}
.board.has-unit-selected .cell.player-cell{background:rgba(214,178,94,.07)}
.board.has-unit-selected .cell.player-cell:hover{background:rgba(240,212,143,.34)}
.combat-board .cell{opacity:0;pointer-events:none}

/* Units: a standee box anchored at the unit's feet; the 3D layer sets --unit-h. */
.piece{position:absolute;z-index:3;width:calc(var(--unit-h,90px)*.6);height:var(--unit-h,90px);transform:translate(-50%,-100%);pointer-events:none}
.board:not(.has-3d) .piece{transform:translate(-25%,-55%);--unit-h:80px}
.piece::after{content:'';position:absolute;left:12%;right:12%;bottom:-5%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);z-index:-1}
.piece .token{pointer-events:auto;position:relative;display:block;width:100%;height:100%;background:none;border:0;padding:0}
.piece .token-core{position:absolute;inset:0;display:block;overflow:visible}
.piece .token-portrait{position:absolute;left:50%;bottom:0;height:104%;width:auto;max-width:none;transform:translateX(-50%);object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.7))}
.piece.model-ready .token-core{visibility:hidden}
.piece .token:hover .token-portrait{filter:drop-shadow(0 0 6px rgba(240,212,143,.75)) brightness(1.08)}
.piece .token.selected .token-portrait,.piece.model-ready .token.selected{filter:drop-shadow(0 0 8px rgba(240,212,143,.9))}
.piece .token.dead{opacity:.25;filter:grayscale(1)}
.piece .token.stunned .token-portrait{filter:hue-rotate(160deg) brightness(1.3)}
/* Nameplate above the head */
.piece .token-name{position:absolute;left:50%;bottom:calc(100% + 13px);transform:translateX(-50%);white-space:nowrap;font:600 11px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-shadow:0 1px 2px #000,0 0 6px #000}
.piece .token.enemy .token-name{color:#ffb4a6}
.piece .unit-stars{position:absolute;left:50%;bottom:calc(100% + 25px);transform:translateX(-50%);font-size:10px;line-height:1;color:var(--gold-2);text-shadow:0 0 4px #000;white-space:nowrap}
.piece .hp-bar,.piece .energy-bar{position:absolute;left:50%;transform:translateX(-50%);width:max(46px,100%);background:rgba(0,0,0,.75);border:1px solid rgba(0,0,0,.9)}
.piece .hp-bar{bottom:calc(100% + 5px);height:5px}
.piece .energy-bar{bottom:calc(100% + 1px);height:3px}
.hp-bar i,.energy-bar i{display:block;height:100%;transition:width .12s linear}
.hp-bar i{background:linear-gradient(90deg,#3fb866,var(--fine))}
.enemy .hp-bar i{background:linear-gradient(90deg,#a72c1f,var(--danger))}
.energy-bar i{background:var(--blue)}
.token-item{position:absolute;right:-10px;bottom:6px;display:flex;flex-direction:column;gap:1px}
.token-item .re-icon{width:14px;height:14px;color:var(--gold-2);background:rgba(0,0,0,.7);border:1px solid var(--gold-dim);padding:1px}
.assist-badge{position:absolute;left:-6px;bottom:6px;font:700 10px/16px var(--mono);width:16px;text-align:center;background:var(--gold);color:#120d04}

/* ---------- Top bar ---------- */
.hud-top{position:absolute;left:var(--gap);right:var(--gap);top:8px;height:var(--top-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:start;z-index:20;pointer-events:none}
.hud-top>*{pointer-events:auto}
.hud-brand{display:flex;align-items:center;gap:16px;min-width:0}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:400 21px/1 var(--display);letter-spacing:.22em}
.brand small{display:block;margin-top:5px;font:10px var(--ui);letter-spacing:.28em;color:var(--dim)}
.brand-mark{width:26px;height:26px;border:1px solid var(--red);transform:rotate(45deg);position:relative;flex:none;background:rgba(198,59,44,.12)}
.brand-mark::after{content:'';position:absolute;inset:6px;background:var(--red)}

/* ECG condition readout (RE2 Remake) */
.condition{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 10px;background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.2));border-left:2px solid var(--state,var(--fine));min-width:0}
.condition svg{width:118px;height:30px;flex:none;overflow:visible}
.condition .ecg-grid{stroke:rgba(255,255,255,.07);stroke-width:1}
.condition .ecg-line{fill:none;stroke:var(--state,var(--fine));stroke-width:1.8;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;animation:ecg var(--beat,1.6s) linear infinite;filter:drop-shadow(0 0 3px var(--state,var(--fine)))}
.condition .ecg-text{display:flex;flex-direction:column;line-height:1.05}
.condition .ecg-state{font:700 15px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--state,var(--fine))}
.condition .ecg-sub{font:11px var(--mono);color:var(--ink-2);letter-spacing:.06em}
.condition.fine{--state:var(--fine);--beat:1.7s}.condition.caution{--state:var(--caution);--beat:1.2s}.condition.warn{--state:var(--warn);--beat:.95s}.condition.danger{--state:var(--danger);--beat:.7s}
@keyframes ecg{0%{stroke-dashoffset:240;opacity:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.15}}

.round-plate{display:flex;flex-direction:column;align-items:center;padding:6px 26px 7px;min-width:380px}
.phase-content{display:flex;align-items:center;gap:16px}
.round-number{font:300 30px/1 var(--mono);letter-spacing:.04em;color:var(--ink)}
.phase-content>div{display:flex;flex-direction:column;border-left:1px solid var(--line-2);padding-left:14px}
.phase-name{font:400 17px/1.1 var(--display);letter-spacing:.06em;color:var(--ink)}
.phase-small{font:11px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.timer{font:300 30px/1 var(--mono);min-width:42px;text-align:right;color:var(--gold-2);font-variant-numeric:tabular-nums;border-left:1px solid var(--line-2);padding-left:14px}
.timer:not(:empty){letter-spacing:.02em}
.arena-heading{margin-top:4px;font:10px var(--ui);letter-spacing:.32em;text-transform:uppercase;color:var(--faint)}
.hud-menu{justify-self:end;display:flex;align-items:center;gap:2px;padding:4px;background:rgba(0,0,0,.45);border:1px solid var(--line)}
.hud-menu button{padding:7px 11px;font:12px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.hud-menu button:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.hud-menu .icon-btn{font-size:15px;letter-spacing:0}
#pauseBtn{color:var(--gold-2)}
#speedBtn{font-family:var(--mono);min-width:42px}
.menu-rule{width:1px;height:18px;background:var(--line-2);margin:0 4px}

/* ---------- Columns ---------- */
.hud-col{position:absolute;top:calc(var(--top-h) + 18px);width:var(--col-w);display:flex;flex-direction:column;gap:10px;z-index:15;max-height:calc(100% - var(--top-h) - 18px - var(--dock-space,250px));overflow:hidden}
.hud-left{left:var(--gap)}.hud-right{right:var(--gap)}
.hud-panel{padding:10px 12px 12px;min-height:0}
.panel-title{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--line);font:600 11px var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}
.panel-title b{font:12px var(--mono);color:var(--gold-2);letter-spacing:.04em}

/* Synergies */
.traits{display:flex;flex-direction:column;gap:3px;max-height:34vh;overflow:auto;scrollbar-width:thin}
.trait{display:grid;grid-template-columns:30px minmax(0,1fr) auto 24px;align-items:center;gap:8px;padding:5px 6px;text-align:left;border:1px solid transparent;background:rgba(255,255,255,.02)}
.trait:hover{border-color:var(--line-2);background:rgba(255,255,255,.05)}
.trait-icon{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line-2);transform:rotate(45deg);background:rgba(0,0,0,.35)}
.trait-icon .re-icon{transform:rotate(-45deg);width:17px;height:17px;color:var(--dim)}
.trait.active .trait-icon{border-color:var(--gold);background:rgba(214,178,94,.16)}
.trait.active .trait-icon .re-icon{color:var(--gold-2)}
.trait-name{display:flex;flex-direction:column;min-width:0;font:600 12px var(--ui);letter-spacing:.06em;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trait.active .trait-name{color:var(--ink)}
.trait .tier{font:10px var(--mono);color:var(--faint);letter-spacing:.06em}
.trait.active .tier{color:var(--gold)}
.trait-faces{display:flex}
.trait-faces img{width:20px;height:20px;object-fit:cover;border-radius:50%;margin-left:-6px;border:1px solid #000;background:#1d1b17}
.trait-faces img:first-child{margin-left:0}
.trait .count{font:16px var(--mono);text-align:right;color:var(--dim)}
.trait.active .count{color:var(--gold-2)}

/* Research vials */
.sample-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;width:100%}
.sample-strip i{position:relative;height:30px;border:1px solid var(--line-2);border-radius:3px 3px 9px 9px;font:9px var(--mono);font-style:normal;color:var(--faint);display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px;background:rgba(0,0,0,.35);overflow:hidden}
.sample-strip i.collected{color:#0e1a0d;border-color:#7fd28e;background:linear-gradient(0deg,#58c46f 0 70%,rgba(88,196,111,.2) 70%)}
.augments{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.augment-pill{font:11px var(--ui);letter-spacing:.06em;color:var(--gold-2);padding:4px 7px;border:1px solid var(--gold-dim);background:rgba(214,178,94,.07)}

/* Supplies: attaché case grid */
.items{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.item{aspect-ratio:1;display:grid;place-items:center;background:linear-gradient(145deg,#23211d,#121110);border:1px solid var(--line-2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.item:hover{border-color:var(--gold)}
.item.selected{border-color:var(--gold-2);box-shadow:0 0 0 1px var(--gold-2),inset 0 0 12px rgba(240,212,143,.3)}
.item .re-icon{width:24px;height:24px;color:var(--gold-2)}
.items .hint{grid-column:1/-1;margin:0}

/* Squads list (ECG coloured bars) */
.players-panel{flex:0 1 auto;min-height:130px;display:flex;flex-direction:column}
.players{display:flex;flex-direction:column;gap:1px;overflow:auto;scrollbar-width:thin;min-height:0}
.player{display:grid;grid-template-columns:16px minmax(0,1fr) 32px;align-items:center;gap:8px;padding:2px 6px;text-align:left;border-left:2px solid transparent}
.player:hover{background:rgba(255,255,255,.05)}
.player.you{border-left-color:var(--gold);background:rgba(214,178,94,.08)}
.player.opponent{border-left-color:var(--danger);background:rgba(226,67,47,.1)}
.player.out{opacity:.38}
.player-rank{font:11px var(--mono);color:var(--faint)}
.player-icon{display:none}
.player-info{display:flex;flex-direction:column;min-width:0}
.player-name{font:600 12px/1.15 var(--ui);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-level{font:10px/1.1 var(--ui);color:var(--dim);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-health{height:3px;margin-top:3px;background:rgba(255,255,255,.08)}
.player-health i{display:block;height:100%;background:var(--fine)}
.player-hp{font:15px var(--mono);text-align:right;color:var(--ink)}
.player.hp-caution .player-health i{background:var(--caution)}.player.hp-warn .player-health i{background:var(--warn)}.player.hp-danger .player-health i{background:var(--danger)}
.player.hp-danger .player-hp{color:var(--danger)}

/* Inspector: "examine item" panel */
.inspector-panel{flex:1 0 170px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.inspector{overflow:auto;scrollbar-width:thin;min-height:0}
.inspector-empty{display:flex;gap:10px;align-items:center;color:var(--dim);font-size:12px;padding:6px 2px}
.inspector-empty::before{content:'';width:28px;height:28px;flex:none;border:1px solid var(--line-2);transform:rotate(45deg)}
.inspector-empty{font-size:0}
.inspector-empty p{font-size:12px;margin:0}
.inspector-portrait{position:relative;height:96px;overflow:hidden;margin-bottom:8px;background-color:rgba(0,0,0,.4)}
.inspector-portrait .portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.inspector h3{margin:0;font:400 18px/1.15 var(--display);letter-spacing:.03em}
.unit-tags{font:10px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:3px 0 8px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-bottom:8px;background:var(--line)}
.stat-grid span{display:flex;justify-content:space-between;padding:4px 7px;background:rgba(12,12,11,.95);font:10px var(--ui);letter-spacing:.12em;color:var(--dim)}
.stat-grid b{font:13px var(--mono);color:var(--ink);letter-spacing:0}
.inspector p{margin:0 0 7px;font-size:12px;color:var(--ink-2)}
.inspector p b{color:var(--ink)}
.inspector button{width:100%;padding:7px;border:1px solid var(--line-2);font:12px var(--ui);letter-spacing:.1em;text-transform:uppercase}
.inspector button:hover{border-color:var(--gold);color:var(--gold-2)}
.last-events{margin-top:auto;padding-top:6px;border-top:1px solid var(--line)}
.last-events p{margin:3px 0;font-size:11px;color:var(--dim)}
.last-events b{font-family:var(--mono);color:var(--gold);margin-right:4px}

/* Camera tools and board status, pinned to the top of the open arena */
.camera-tools{position:absolute;z-index:14;top:calc(var(--top-h) + 18px);right:calc(var(--col-w) + var(--gap) * 2);display:flex;gap:1px;padding:3px;background:rgba(0,0,0,.5)}
.camera-tools button{padding:5px 10px;font:11px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.camera-tools button:hover{color:var(--ink);background:rgba(255,255,255,.07)}
#cameraReset{font-family:var(--mono);letter-spacing:.04em;color:var(--gold-2)}
.board-status{position:absolute;z-index:14;top:calc(var(--top-h) + 22px);left:calc(var(--col-w) + var(--gap) * 2);font:11px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);text-shadow:0 1px 2px #000;pointer-events:none}

/* ---------- Bottom dock ---------- */
.hud-dock{position:absolute;left:var(--gap);right:var(--gap);bottom:10px;z-index:18;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.hud-dock>*{pointer-events:auto}
.reserve-row{display:grid;grid-template-columns:minmax(0,1fr) auto;justify-content:space-between;gap:14px;align-items:center;padding:7px 10px;width:min(1180px,100%);margin:0 auto}
.reserve-case{display:flex;align-items:center;gap:12px;min-width:0}
.bench-heading{display:flex;flex-direction:column;gap:3px;flex:none;font:11px var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.bench-heading b{font:13px var(--mono);color:var(--ink);letter-spacing:0}
#assistCount{font-size:10px;color:var(--faint)}
.bench{position:relative;flex:1;max-width:690px;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;padding:3px;min-width:0;background:#0b0a09;border:1px solid var(--line-2);box-shadow:inset 0 0 16px #000}
.bench-slot{position:relative;height:66px;background:linear-gradient(160deg,#1f1d19,#11100e);border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}
.bench-slot>span{position:absolute;right:4px;bottom:2px;font:9px var(--mono);color:var(--faint)}
.bench-slot:hover{border-color:var(--line-3)}
.bench-model-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.bench-slot .token{position:absolute;inset:0;width:100%;height:100%;z-index:3;display:block;border:1px solid transparent}
.bench-slot .token:hover{border-color:var(--line-3)}
.bench-slot .token.selected{border-color:var(--gold-2);box-shadow:inset 0 0 14px rgba(240,212,143,.35)}
.bench-slot .token-core{position:absolute;inset:0;overflow:hidden}
.bench-slot .token-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bench-slot.model-ready .token-core{visibility:hidden}
.bench-slot .token-name{position:absolute;left:0;right:0;bottom:0;padding:9px 4px 2px;font:600 10px var(--ui);letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(transparent,rgba(0,0,0,.85));text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bench-slot .unit-stars{position:absolute;left:4px;top:3px;font-size:10px;color:var(--gold-2);text-shadow:0 0 3px #000;z-index:2}
.bench-slot .token::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--cost);opacity:.85;z-index:2}
.bench-slot .token-item{right:3px;top:3px;bottom:auto;flex-direction:row}
.bench-slot .assist-badge{left:auto;right:3px;bottom:3px}
.action-line{display:flex;align-items:center;gap:8px}
#selectedHint{max-width:240px;font-size:11px;color:var(--dim);letter-spacing:.04em;text-align:right}
.sell-button{padding:10px 14px;border:1px solid var(--line-2);font:12px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.sell-button:not(:disabled):hover{border-color:var(--danger);color:#ffb2a4;background:rgba(226,67,47,.12)}
.primary{position:relative;padding:11px 26px;border:1px solid var(--gold);background:linear-gradient(180deg,rgba(214,178,94,.28),rgba(214,178,94,.1));font:600 13px var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);white-space:nowrap}
.primary:not(:disabled):hover{background:linear-gradient(180deg,rgba(240,212,143,.42),rgba(214,178,94,.18));color:#fff3d4}
.primary::before{content:'▶';font-size:9px;margin-right:9px;vertical-align:1px}

/* Merchant */
.merchant-dock{display:grid;grid-template-columns:150px 176px minmax(0,1fr) 150px;gap:12px;align-items:stretch;padding:10px;width:min(1180px,100%);margin:0 auto;
  --c:rgba(214,178,94,.6);border-color:rgba(214,178,94,.22)}
.merchant-host{position:relative;margin:0;overflow:hidden;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 30%,#2a2216,#0c0a08 70%)}
.merchant-host img{position:absolute;left:50%;top:-8%;height:220%;transform:translateX(-50%);filter:saturate(.9) contrast(1.05)}
.merchant-host figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 8px 7px;background:linear-gradient(transparent,rgba(0,0,0,.9) 55%)}
.merchant-host strong{display:block;font:11px var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.merchant-host span{display:block;font:italic 13px var(--display);color:var(--ink)}
.economy{display:flex;flex-direction:column;gap:6px}
.level-block{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 8px;padding:2px 0 4px}
.level-label{font:11px var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.level-label b{font:300 24px var(--mono);color:var(--ink);margin-left:4px;letter-spacing:0}
.xp-text{justify-self:end;font:11px var(--mono);color:var(--dim)}
.xp-track{grid-column:1/-1;height:4px;background:rgba(255,255,255,.08)}
.xp-track i{display:block;height:100%;background:linear-gradient(90deg,#4a8bb8,var(--blue));transition:width .3s}
.economy button{display:flex;align-items:center;gap:4px;padding:7px 9px;border:1px solid var(--line-2);font:12px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:rgba(0,0,0,.3)}
.economy button:not(:disabled):hover{border-color:var(--gold);color:var(--ink)}
.economy button kbd{margin-left:2px}
.economy button b{margin-left:auto;font:13px var(--mono);color:var(--gold-2);letter-spacing:0}
.shop-content{display:flex;flex-direction:column;gap:6px;min-width:0}
.shop{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;flex:1}
.shop-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:132px;padding:7px 8px 7px;text-align:left;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.25)),#141310;border:1px solid var(--line-2);transition:transform .12s,border-color .12s}
.shop-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cost)}
.shop-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 18%,color-mix(in srgb,var(--cost) 26%,transparent),transparent 65%);pointer-events:none}
.shop-card:not(:disabled):hover{border-color:var(--gold);transform:translateY(-2px)}
.shop-card.unaffordable{filter:grayscale(.7);opacity:.62}
.shop-portrait{position:absolute;inset:0 0 34% 0;overflow:hidden}
.shop-portrait .portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shop-portrait .portrait-fallback{position:absolute;inset:0;display:grid;place-items:center;font:28px var(--display);color:var(--dim)}
.shop-card .cost{position:absolute;top:6px;right:6px;z-index:2;padding:2px 6px;font:12px var(--mono);color:#120d04;background:var(--gold-2)}
.shop-card .card-tags{position:relative;z-index:1;font:9px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-card .card-name{position:relative;z-index:1;font:400 15px/1.1 var(--display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-card .copies{position:relative;z-index:1;font:10px var(--ui);color:var(--gold);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:13px}
.shop-card .card-tags,.shop-card .card-name,.shop-card .copies{text-shadow:0 1px 3px #000}
.shop-card.empty{display:grid;place-items:center;font:11px var(--ui);letter-spacing:.24em;color:var(--faint);background:repeating-linear-gradient(135deg,#0d0c0b 0 6px,#121110 6px 12px)}
.shop-card.empty::after,.shop-card.empty::before{display:none}
.shop-closed{grid-column:1/-1;display:grid;place-items:center;font:12px var(--ui);letter-spacing:.24em;color:var(--dim);border:1px dashed var(--line-2)}
.shop-bottom{display:flex;justify-content:space-between;gap:10px;font:10px var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden}
.odds span{letter-spacing:.02em}
.wallet{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;padding-left:12px;border-left:1px solid var(--line)}
.wallet-label{font:11px var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.wallet strong{display:flex;align-items:baseline;gap:6px;font:300 38px/1 var(--mono);color:var(--gold-2);font-variant-numeric:tabular-nums}
.ptas{font-size:22px;color:var(--gold)}
#streak{font:11px var(--mono);color:var(--ink-2);min-height:14px}
#lockBtn{padding:5px 10px;border:1px solid var(--line-2);font:11px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
#lockBtn:hover{border-color:var(--gold);color:var(--gold-2)}
.gold-flash{animation:goldFlash .6s}

/* ---------- Banners, announcements, toast ---------- */
.battle-banner{position:absolute;left:0;right:0;top:calc(var(--top-h) + 52px);display:flex;justify-content:center;z-index:12;pointer-events:none}
.opponent-marker{font:11px var(--ui);letter-spacing:.32em;text-transform:uppercase;color:#ffb4a6;padding:5px 18px;background:linear-gradient(90deg,transparent,rgba(110,20,12,.6),transparent)}
.banner-bg{display:flex;flex-direction:column;align-items:center;margin-top:12vh;padding:14px 90px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.82) 25%,rgba(0,0,0,.82) 75%,transparent);border-top:1px solid;border-bottom:1px solid;border-image:linear-gradient(90deg,transparent,var(--line-3),transparent) 1;animation:banner .5s both}
.banner-bg strong{font:400 40px/1.1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.banner-bg span{font:12px var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
#announcements{position:absolute;top:calc(var(--top-h) + 52px);left:50%;transform:translateX(-50%);width:min(560px,60vw);z-index:40;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px}
.announcement{padding:7px 40px;text-align:center;font:15px var(--display);letter-spacing:.08em;color:var(--ink);background:linear-gradient(90deg,transparent,rgba(0,0,0,.85) 20%,rgba(0,0,0,.85) 80%,transparent);animation:announcement 2.4s both}
.announcement.evolution{color:var(--gold-2)}
.announcement.synergy{color:#cfe3b0}
.announcement.victory{color:var(--fine);font-size:18px;letter-spacing:.2em}
.announcement.defeat{color:var(--red-2);font-size:18px;letter-spacing:.2em}
.toast{position:fixed;left:50%;bottom:calc(var(--dock-space,270px) + 6px);transform:translate(-50%,12px);z-index:60;padding:9px 22px;font:13px var(--ui);letter-spacing:.06em;color:var(--ink);background:rgba(10,10,9,.94);border:1px solid var(--line-2);border-left:2px solid var(--gold);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.evolved{animation:evolve 1.8s!important}

/* ---------- Meter ---------- */
.meter{position:absolute;z-index:16;top:calc(var(--top-h) + 56px);right:calc(var(--col-w) + var(--gap) * 2);width:250px;max-height:50vh;overflow:auto;padding:10px}
.meter-tabs{display:flex;gap:1px;margin-bottom:8px}
.meter-tabs button{flex:1;padding:5px;font:10px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line)}
.meter-tabs button.active{color:var(--gold-2);border-bottom-color:var(--gold)}
.meter-row{position:relative;display:flex;justify-content:space-between;padding:3px 6px;font-size:12px;overflow:hidden}
.meter-row i{position:absolute;left:0;bottom:0;height:2px;background:var(--fine)}
.meter-row.enemy i{background:var(--danger)}
.meter-row b{font-family:var(--mono)}
.meter p{color:var(--dim);font-size:12px}

/* ---------- Tooltip ---------- */
.hover-card{position:fixed;z-index:70;width:300px;padding:12px 14px;pointer-events:none;background-color:rgba(10,10,9,.96)}
.hover-card small{display:block;font:10px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.hover-card h3{margin:2px 0 8px;font:400 19px var(--display);letter-spacing:.03em}
.hover-card p{margin:6px 0;font-size:12px;color:var(--ink-2)}
.hover-card footer{margin-top:8px;padding-top:6px;border-top:1px solid var(--line);font-size:11px;color:var(--dim)}
.tip-portrait{float:right;width:84px;height:110px;object-fit:cover;margin:-4px -6px 4px 8px;border:1px solid var(--line);background:#16140f}
.tip-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);clear:none}
.tip-stats span{display:flex;justify-content:space-between;padding:3px 7px;font:10px var(--ui);letter-spacing:.1em;color:var(--dim);background:#0d0c0b}
.tip-stats b{font:12px var(--mono);color:var(--ink);letter-spacing:0}
.tip-members{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;clear:both}
.tip-members span{font:10px var(--ui);letter-spacing:.06em;color:var(--ink-2);padding:2px 6px;border:1px solid var(--line)}
.portrait-members img{width:34px;height:34px;object-fit:cover;border:1px solid var(--line);opacity:.45;background:#16140f}
.portrait-members img.owned{opacity:1;border-color:var(--gold)}

/* ---------- Modals (RE menu screens) ---------- */
.modal-backdrop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at center,rgba(8,8,7,.82),rgba(0,0,0,.95))}
.modal{position:relative;width:min(760px,100%);max-height:calc(100dvh - 48px);overflow:auto;padding:28px 34px 30px;background-color:rgba(12,12,11,.97)}
.modal.wide{width:min(1060px,100%)}
.modal .close{position:absolute;top:12px;right:14px;width:32px;height:32px;font-size:22px;color:var(--dim);border:1px solid var(--line)}
.modal .close:hover{color:var(--ink);border-color:var(--line-3)}
.modal-eyebrow{display:block;font:10px var(--ui);letter-spacing:.34em;text-transform:uppercase;color:var(--red-2)}
.modal h2{margin:6px 0 4px;font:400 32px/1.15 var(--display);letter-spacing:.03em}
.modal h3{font:600 12px var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:18px 0 8px}
.modal p{color:var(--ink-2);font-size:13px}
.modal-subtitle{margin:0 0 18px;color:var(--dim)!important}
.modal-note{margin-top:16px;font-size:11px!important;color:var(--faint)!important;letter-spacing:.06em}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
.choice{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:170px;padding:16px;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.2));overflow:hidden;transition:border-color .15s,transform .15s}
.choice:hover{border-color:var(--gold);transform:translateY(-2px)}
.choice .large-icon{font-size:28px;color:var(--gold-2);margin-bottom:8px}
.choice h3{margin:0 0 6px;font:400 21px/1.15 var(--display);letter-spacing:.02em;text-transform:none;color:var(--ink)}
.choice p{margin:0;font-size:12px;color:var(--ink-2)}
.choice-footer{margin-top:auto;padding-top:12px;font:11px var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.choice:has(.choice-portrait){min-height:360px;justify-content:flex-end;padding:18px}
.choice .large-icon:has(.choice-portrait){position:absolute;inset:0 0 30% 0;margin:0;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,rgba(214,178,94,.14),transparent 65%)}
.choice-portrait{position:absolute;left:50%;top:0;height:165%;transform:translateX(-50%);filter:drop-shadow(0 6px 10px #000)}
.choice:has(.choice-portrait) h3,.choice:has(.choice-portrait) p,.choice:has(.choice-portrait) .choice-footer{position:relative;z-index:1;text-shadow:0 1px 3px #000}
.choice:has(.choice-portrait)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(transparent,rgba(8,8,7,.97) 45%)}
.portrait-fallback{display:grid;place-items:center;font:28px var(--display);color:var(--dim)}
.portrait-fallback-hidden{display:none!important}
.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.codex-grid article,.codex-unit{padding:12px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.codex-grid article h3{margin:0 0 4px;font:400 17px var(--display);letter-spacing:.02em;text-transform:none}
.codex-grid article p{font-size:12px;margin:4px 0}
.codex-grid small{font:10px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.codex-portrait{position:relative;height:150px;overflow:hidden;margin:-12px -12px 10px;background:radial-gradient(ellipse at 50% 35%,#231f17,#0c0b09 70%)}
.codex-portrait .portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.help-grid p{font-size:13px}
.settings-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.settings-row button,.modal .primary{padding:8px 16px}
.settings-row button{border:1px solid var(--line-2);font:12px var(--ui);letter-spacing:.12em;text-transform:uppercase}
.settings-row button:hover{border-color:var(--gold);color:var(--gold-2)}
.audio-controls{display:grid;gap:10px}
.audio-controls label{display:grid;grid-template-columns:90px 1fr;align-items:center;font:12px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
input[type=range]{accent-color:var(--gold)}
.log-entry{margin:4px 0;font-size:13px}.log-entry b{font-family:var(--mono);color:var(--gold);margin-right:8px}
.results-table p{padding:6px 0;border-bottom:1px solid var(--line);margin:0}
.trait-members{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.member{padding:8px 10px;border:1px solid var(--line)}
.member b{display:block;font:400 15px var(--display)}
.member span{font:11px var(--ui);color:var(--dim);letter-spacing:.06em}

/* ---------- Combat effects ---------- */
.fx{position:absolute;pointer-events:none;z-index:10}
.projectile{width:14px;height:2px;background:#fff1c9;box-shadow:0 0 8px 2px #ffb04a;animation:projectile .22s linear forwards}
.muzzle{width:18px;height:18px;border-radius:50%;background:radial-gradient(#fff6d8,#ffb04a 60%,transparent);animation:burst .25s forwards}
.impact{width:18px;height:18px;border:2px solid #e8573d;border-radius:50%;animation:burst .45s forwards;box-shadow:0 0 10px #d64c27}
.impact.blocked{border-color:#b9d9d1;box-shadow:0 0 10px #8ab9d8}
.slash{width:30px;height:20px;border-top:3px solid #fff0d0;border-bottom:1px solid #b33a26;transform:rotate(var(--angle));animation:slash .3s forwards}
.damage-number,.heal-number{font:700 15px var(--mono);text-shadow:0 2px 3px #000,0 0 6px #000;animation:damage .8s forwards}
.enemy-damage{color:#ffe0a6}.ally-damage{color:#ff7b62}.heal-number{color:#9fe5a6}
.death-ring{width:30px;height:30px;border:3px solid #a72d20;border-radius:50%;animation:death 1s forwards}
.death-text{font:600 11px var(--ui);letter-spacing:.3em;color:#ff7b62;animation:damage 1.2s forwards;text-shadow:0 1px 3px #000}
.heal-ring,.shield-ring,.skill-ring{width:34px;height:34px;border:2px solid #9fe5a6;border-radius:50%;animation:ring .8s forwards}
.shield-ring{border-color:#9cc5c5;color:#9cc5c5}
.skill-ring{border-color:var(--gold-2)}
.skill-name{font:italic 14px var(--display);color:var(--gold-2);white-space:nowrap;animation:damage 1.2s forwards;text-shadow:0 2px 4px #000}
@keyframes projectile{to{transform:translate(var(--dx),var(--dy));opacity:0}}
@keyframes burst{from{transform:translate(-50%,-50%) scale(.3);opacity:1}to{transform:translate(-50%,-50%) scale(2);opacity:0}}
@keyframes slash{from{opacity:1;scale:.5}to{opacity:0;scale:1.6}}
@keyframes damage{from{transform:translate(-50%,-100%);opacity:1}to{transform:translate(-50%,-230%);opacity:0}}
@keyframes death{to{transform:translate(-50%,-50%) scale(2.8);opacity:0}}
@keyframes ring{from{transform:translate(-50%,-50%) scale(.7)}to{transform:translate(-50%,-50%) scale(2);opacity:0}}
@keyframes evolve{0%,100%{filter:brightness(1)}30%,60%{filter:brightness(2) drop-shadow(0 0 18px #ffd778)}}
@keyframes goldFlash{50%{color:#fff;text-shadow:0 0 15px var(--gold)}}
@keyframes announcement{0%{opacity:0;transform:translateY(-8px)}15%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px)}}
@keyframes banner{from{opacity:0;letter-spacing:.5em}to{opacity:1}}

/* Icons */
.re-icon{width:1.45em;height:1.45em;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Scrollbars */
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:var(--line-2)}::-webkit-scrollbar-track{background:transparent}

/* ---------- Responsive ---------- */
@media (max-width:1400px){
  .merchant-dock{grid-template-columns:120px 160px minmax(0,1fr) 128px;gap:10px}
  .shop-card .card-name{font-size:14px}
  .wallet strong{font-size:32px}
}
@media (max-width:1180px){
  :root{--col-w:200px}
  .round-plate{min-width:300px;padding:6px 16px}
  .condition svg{width:80px}
  .brand small{display:none}
  .hud-menu button{padding:6px 7px;letter-spacing:.06em}
  .merchant-dock{grid-template-columns:96px 146px minmax(0,1fr) 112px}
  .shop-card{min-height:118px}
  .shop-card .card-tags{display:none}
  .trait-faces{display:none}
  .trait{grid-template-columns:30px minmax(0,1fr) 22px}
}
@media (max-height:820px){
  :root{--top-h:58px}
  .round-number,.timer{font-size:25px}
  .bench-slot{height:54px}
  .shop-card{min-height:108px}
  .merchant-dock{padding:7px}
  .inspector-portrait{height:90px}
  .traits{max-height:26vh}
}
@media (max-height:700px){
  .shop-card{min-height:94px}
  .shop-card .copies{display:none}
  .merchant-host figcaption span{display:none}
  .bench-slot{height:46px}
  .inspector-panel .last-events{display:none}
}
@media (max-width:900px){
  :root{--col-w:168px;--gap:8px}
  .hud-brand .brand>span{display:none}
  .round-plate{min-width:0}
  .arena-heading{display:none}
  .merchant-dock{grid-template-columns:minmax(0,1fr) 96px}
  .merchant-host,.economy{display:none}
  .reserve-row{grid-template-columns:1fr}
  #selectedHint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fx,.announcement,.evolved,.condition .ecg-line,.banner-bg{animation-duration:.01s!important;animation-iteration-count:1!important}
}

/* Portrait crops. The source art is full-body on a square canvas, so object-view-box picks the
   head-and-torso (busts) or the face (small chips) without needing extra image files. */
.bench-slot .token-portrait,.shop-portrait .portrait,.inspector-portrait .portrait,.codex-portrait .portrait,.tip-portrait{object-view-box:inset(0% 24% 50% 24%)}
.trait-faces img,.portrait-members img{object-view-box:inset(1% 37% 77% 37%)}


img[src*="ganado"].portrait,img[src*="ganado"].token-portrait,img[src*="krauser"].portrait,img[src*="krauser"].token-portrait,img[src*="regenerator"].portrait,img[src*="regenerator"].token-portrait{object-view-box:inset(4% 28% 48% 28%)}

.inspector-panel:has(.inspector h3) .last-events{display:none}
.choice:has(.choice-portrait) h3{margin-top:auto}
.choice:has(.choice-portrait) .choice-footer{margin-top:0;padding-top:10px}
.bench-slot .token-portrait,.shop-portrait .portrait,.inspector-portrait .portrait,.codex-portrait .portrait,.tip-portrait{object-position:50% 0}
.condition .ecg-sub,.economy button{white-space:nowrap}
@media (max-width:1500px){
  .brand small{display:none}
  .trait-faces{display:none}
  .trait{grid-template-columns:30px minmax(0,1fr) 22px}
}
@media (max-width:1400px) and (min-width:1181px){
  .merchant-dock{grid-template-columns:104px 172px minmax(0,1fr) 120px}
  .merchant-host figcaption span{font-size:12px}
  .economy button{letter-spacing:.04em;padding:7px 7px}
}
#lockBtn{white-space:nowrap}
@media (max-width:1400px){.merchant-host figcaption span{display:none}.merchant-host strong{letter-spacing:.14em}#lockBtn{letter-spacing:.06em;padding:5px 8px}}

.opponent-marker{display:none}
.bench-slot .token-name{font-size:9px;letter-spacing:.03em}

/* ---------- Gunfire ---------- */
.muzzle-flash{width:34px;height:20px;margin:-10px 0 0 -6px;transform-origin:6px 10px;transform:rotate(var(--angle));
  background:radial-gradient(ellipse 60% 50% at 30% 50%,#fffbe8 0 18%,#ffd37a 34%,rgba(255,140,40,.75) 52%,transparent 72%);
  clip-path:polygon(0 30%,55% 0,48% 34%,100% 50%,48% 66%,55% 100%,0 70%);filter:drop-shadow(0 0 8px #ffb050);animation:muzzleFlash .16s ease-out forwards;mix-blend-mode:screen}
.muzzle-glow{width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,140,.55),rgba(255,140,50,.18) 45%,transparent 70%);mix-blend-mode:screen;animation:glow .22s ease-out forwards}
.muzzle-smoke{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,rgba(200,196,186,.45),rgba(160,156,150,.15) 60%,transparent 72%);animation:smoke .9s ease-out forwards}
.tracer{height:2px;width:var(--len);margin-top:-1px;transform-origin:0 50%;transform:rotate(var(--angle));
  background:linear-gradient(90deg,rgba(255,240,200,0),rgba(255,226,160,.95) 70%,#fff);box-shadow:0 0 6px rgba(255,190,90,.9);animation:tracer .23s ease-out forwards;mix-blend-mode:screen}
.projectile{width:16px;height:3px;margin:-1.5px 0 0 -8px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff6d8);box-shadow:0 0 8px 2px #ffb04a;transform:rotate(var(--angle));animation:slug .14s linear forwards}
.impact-flash{width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,170,80,.7) 35%,transparent 70%);mix-blend-mode:screen;animation:glow .16s ease-out forwards}
.impact-flash.blocked{background:radial-gradient(circle,#fff,rgba(140,200,230,.7) 35%,transparent 70%)}
.spark{width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#ffe2a0;box-shadow:0 0 5px 1px #ff9a3c;animation:spark .42s cubic-bezier(.2,.7,.4,1) forwards}
.spark.blocked{background:#d8f0ff;box-shadow:0 0 5px 1px #7fc3e8}
@keyframes muzzleFlash{0%{opacity:1;scale:.6}40%{opacity:1;scale:1.15}100%{opacity:0;scale:1.3}}
@keyframes glow{from{opacity:1;scale:.5}to{opacity:0;scale:1.4}}
@keyframes smoke{from{opacity:.9;transform:translate(0,0) scale(.6)}to{opacity:0;transform:translate(var(--dx),-26px) scale(2.6)}}
@keyframes tracer{0%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 70%)}}
@keyframes slug{from{transform:translate(0,0) rotate(var(--angle))}to{transform:translate(var(--dx),var(--dy)) rotate(var(--angle))}}
@keyframes spark{from{opacity:1;transform:translate(0,0)}to{opacity:0;transform:translate(var(--sx),calc(var(--sy) + 14px))}}

/* Ashley's lantern throw */
.lantern-glow{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:radial-gradient(circle,rgba(255,226,150,.95),rgba(255,140,40,.55) 40%,transparent 70%);mix-blend-mode:screen;animation:lanternGlow .26s ease-out forwards}
.projectile.lantern{width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle,#fff3c4 0,#ffb347 45%,rgba(255,90,20,.0) 75%);box-shadow:0 0 14px 6px rgba(255,140,40,.55);animation:lanternOrb .3s cubic-bezier(.3,.1,.6,1) forwards}
.impact-flash.lantern{background:radial-gradient(circle,rgba(255,230,160,.95),rgba(255,120,30,.6) 45%,transparent 70%)}
.spark.lantern{background:#ffc35a;box-shadow:0 0 6px 2px rgba(255,120,30,.7)}
@keyframes lanternGlow{from{transform:scale(.4);opacity:1}to{transform:scale(1.4);opacity:0}}
@keyframes lanternOrb{from{transform:translate(0,0) scale(.7)}60%{transform:translate(calc(var(--dx)*.6),calc(var(--dy)*.6 - 14px)) scale(1)}to{transform:translate(var(--dx),var(--dy)) scale(.85)}}

/* Left column: research and supplies keep their size; the synergy list takes the remaining
   height and only scrolls inside its own panel when the column is really short. */
.hud-left{gap:14px}
.hud-left .hud-panel{flex:0 0 auto;overflow:hidden}
.hud-left .hud-panel:first-child{flex:0 1 auto;min-height:110px;display:flex;flex-direction:column}
.hud-left .traits{flex:1 1 auto;max-height:none;min-height:0;gap:6px;overflow-y:auto}
.hud-left .trait{padding:6px 6px}
/* The tactical report panel is gone: the squads list uses the column. */
.inspector-panel{display:none!important}
/* Dead units leave the board (their 3D body plays its death and then hides). */
.piece.is-dead{display:none!important}
/* Ashley's lantern bursts burn blue */
.lantern-glow{background:radial-gradient(circle,rgba(200,235,255,.95),rgba(70,150,255,.6) 40%,transparent 70%)}
.projectile.lantern{background:radial-gradient(circle,#eefaff 0,#6fb8ff 45%,rgba(40,90,255,0) 75%);box-shadow:0 0 14px 6px rgba(70,150,255,.6)}
.impact-flash.lantern{background:radial-gradient(circle,rgba(220,240,255,.95),rgba(60,140,255,.6) 45%,transparent 70%)}
.spark.lantern{background:#9fd3ff;box-shadow:0 0 6px 2px rgba(60,140,255,.75)}
/* Synergies own the whole left column; research and supplies moved under the squads list */
.hud-left .hud-panel:first-child{flex:0 1 auto}
.hud-left .traits{gap:4px}
.hud-left .trait{padding:4px 6px;grid-template-columns:26px minmax(0,1fr) auto 22px}
.hud-left .trait-icon{width:26px;height:26px}
.hud-right .hud-panel{flex:0 0 auto}
.hud-right .players-panel{flex:0 1 auto;min-height:0;overflow:hidden}
.hud-right .players-panel{flex:0 0 auto}
.hud-right .hud-panel:last-of-type{flex:0 1 auto;min-height:0}
.hud-right .hud-panel .hint{margin:4px 0 0}

/* thrown projectiles of the new roster */
.projectile.bolt{width:24px;height:3px;margin:-1.5px 0 0 -12px;border-radius:1px;background:linear-gradient(90deg,#5a3a1e 0 70%,#c9c1b0 70%);box-shadow:none;transform:rotate(var(--angle));animation:boltFly .18s linear forwards}
@keyframes boltFly{from{transform:translate(0,0) rotate(var(--angle))}to{transform:translate(var(--dx),var(--dy)) rotate(var(--angle))}}
.impact-flash.bolt{background:radial-gradient(circle,rgba(255,240,210,.8),rgba(160,110,60,.4) 45%,transparent 70%)}
.spark.bolt{background:#c8a27a;box-shadow:none}
.lantern-glow.acid{background:radial-gradient(circle,rgba(220,255,170,.9),rgba(110,200,40,.55) 40%,transparent 70%)}
.projectile.acid{width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle,#efffc8 0,#8fd13a 45%,rgba(60,140,20,0) 75%);box-shadow:0 0 12px 5px rgba(120,200,40,.55);animation:lanternOrb .32s cubic-bezier(.3,.1,.6,1) forwards}
.impact-flash.acid{background:radial-gradient(circle,rgba(230,255,190,.95),rgba(110,190,40,.6) 45%,transparent 70%)}
.spark.acid{background:#a6e05a;box-shadow:0 0 6px 2px rgba(110,190,40,.7)}
.lantern-glow.curse{background:radial-gradient(circle,rgba(240,200,255,.9),rgba(150,60,220,.55) 40%,transparent 70%)}
.projectile.curse{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,#f6e6ff 0,#b061ff 45%,rgba(90,20,170,0) 75%);box-shadow:0 0 16px 6px rgba(150,70,230,.55);animation:lanternOrb .3s cubic-bezier(.3,.1,.6,1) forwards}
.impact-flash.curse{background:radial-gradient(circle,rgba(245,225,255,.95),rgba(150,70,230,.6) 45%,transparent 70%)}
.spark.curse{background:#c48aff;box-shadow:0 0 6px 2px rgba(150,70,230,.75)}
/* RE4-achievement style emblems: engraved bronze silhouettes on dark square plates */
.trait-icon{transform:none;border:1px solid #4a4237;background:radial-gradient(circle at 50% 38%,#2a2620 0,#100e0c 72%);box-shadow:inset 0 0 0 2px #070605,inset 0 0 10px #000}
.trait-icon .re-icon{transform:none;width:20px;height:20px;color:#77716a}
.hud-left .trait-icon .re-icon{width:18px;height:18px}
.trait.active .trait-icon{border-color:#9a7843;background:radial-gradient(circle at 50% 38%,#4a3a24 0,#17110b 72%)}
.trait.active .trait-icon .re-icon{color:#e2bd72;filter:drop-shadow(0 1px 0 #000) drop-shadow(0 0 3px rgba(230,180,90,.45))}
.item{background:radial-gradient(circle at 50% 38%,#3a2f22 0,#14100c 72%);border-color:#7d6136;box-shadow:inset 0 0 0 2px #070605,inset 0 0 12px #000}
.item .re-icon{width:26px;height:26px;color:#dcb66c;filter:drop-shadow(0 1px 0 #000) drop-shadow(0 0 3px rgba(230,180,90,.35))}
.token-item .re-icon{color:#dcb66c;background:radial-gradient(circle,#3a2f22,#0c0a08);border-color:#7d6136}
.large-icon .re-icon{width:42px;height:42px;color:#e2bd72;filter:drop-shadow(0 1px 0 #000) drop-shadow(0 0 4px rgba(230,180,90,.45))}
.tip-members .re-icon,.tooltip h3 .re-icon{width:16px;height:16px;color:#e2bd72;vertical-align:-3px}
/* Right column: the squads list gives up height (and scrolls) so Research and Supplies always show whole */
.hud-right .players-panel{flex:0 1 auto;min-height:96px;overflow:hidden}
.hud-right .players-panel .players{flex:1 1 auto;min-height:0;overflow-y:auto}
.hud-right .hud-panel:not(.players-panel){flex:0 0 auto;overflow:visible}

/* ===== Escena más limpia ===== */
.board-status{display:none}
.piece .token-name{opacity:0;transition:opacity .15s}
.piece .token:hover .token-name,.piece .token.selected .token-name{opacity:1}
.hud-panel[title] .items:empty{min-height:0}
.action-line #selectedHint:empty{display:none}

.arena-heading:has(#arenaLabel:empty){display:none}

/* controles de cámara en la barra superior, entre «Preparación» y el menú */
.top-right{justify-self:stretch;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;padding-left:4px;container-type:inline-size}
.top-right .hud-menu{flex:none}
.top-right .camera-tools{position:static!important;flex:none;min-width:0;display:flex;gap:1px;padding:4px;background:rgba(0,0,0,.45);border:1px solid var(--line);margin:0}
.top-right .camera-tools button{padding:7px 7px;font:10.5px var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.top-right .camera-tools button:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.camera-tools .l-short,.camera-tools .l-ico{display:none}
@container (max-width:753px){.camera-tools .l-full{display:none}.camera-tools .l-short{display:inline}.top-right .camera-tools button{padding:7px 7px;letter-spacing:.06em}}
@container (max-width:625px){.camera-tools .l-short{display:none}.camera-tools .l-ico{display:inline}.top-right .camera-tools button{font-size:14px;letter-spacing:0;padding:5px 8px}}
.top-right .hud-menu button{padding:7px 6px;letter-spacing:.06em}
@container (max-width:494px){.top-right .camera-tools{display:none}}
.codex-tier{margin:14px 0 6px;font:12px var(--ui);letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:4px}
/* caras de las sinergias centradas en la cabeza de cada retrato */
.trait-faces img[src*="/ada."],.portrait-members img[src*="/ada."]{object-view-box:inset(0% 36% 78% 38%)}
.trait-faces img[src*="/armadura."],.portrait-members img[src*="/armadura."]{object-view-box:inset(4% 50% 74% 24%)}
.trait-faces img[src*="/ashley."],.portrait-members img[src*="/ashley."]{object-view-box:inset(0% 39% 78% 35%)}
.trait-faces img[src*="/chainsaw."],.portrait-members img[src*="/chainsaw."]{object-view-box:inset(0% 38% 78% 36%)}
.trait-faces img[src*="/colmillo."],.portrait-members img[src*="/colmillo."]{object-view-box:inset(16% 47% 62% 27%)}
.trait-faces img[src*="/ganado."],.portrait-members img[src*="/ganado."]{object-view-box:inset(1% 38% 77% 36%)}
.trait-faces img[src*="/garrador."],.portrait-members img[src*="/garrador."]{object-view-box:inset(1% 38% 77% 36%)}
.trait-faces img[src*="/hunk."],.portrait-members img[src*="/hunk."]{object-view-box:inset(4% 37% 74% 37%)}
.trait-faces img[src*="/krauser."],.portrait-members img[src*="/krauser."]{object-view-box:inset(0% 34% 78% 40%)}
.trait-faces img[src*="/leon."],.portrait-members img[src*="/leon."]{object-view-box:inset(0% 39% 78% 35%)}
.trait-faces img[src*="/luis."],.portrait-members img[src*="/luis."]{object-view-box:inset(0% 35% 78% 39%)}
.trait-faces img[src*="/mendez."],.portrait-members img[src*="/mendez."]{object-view-box:inset(2% 32% 76% 42%)}
.trait-faces img[src*="/merchant."],.portrait-members img[src*="/merchant."]{object-view-box:inset(0% 42% 78% 32%)}
.trait-faces img[src*="/novis."],.portrait-members img[src*="/novis."]{object-view-box:inset(6% 37% 72% 37%)}
.trait-faces img[src*="/regenerator."],.portrait-members img[src*="/regenerator."]{object-view-box:inset(1% 42% 77% 32%)}
.trait-faces img[src*="/saddler."],.portrait-members img[src*="/saddler."]{object-view-box:inset(6% 37% 72% 37%)}
.trait-faces img[src*="/salazar."],.portrait-members img[src*="/salazar."]{object-view-box:inset(0% 39% 78% 35%)}
.trait-faces img[src*="/soldier."],.portrait-members img[src*="/soldier."]{object-view-box:inset(9% 37% 69% 37%)}
.trait-faces img[src*="/verdugo."],.portrait-members img[src*="/verdugo."]{object-view-box:inset(13% 37% 65% 37%)}
.trait-faces img[src*="/wesker."],.portrait-members img[src*="/wesker."]{object-view-box:inset(0% 37% 78% 37%)}
.trait-faces img[src*="/zealot."],.portrait-members img[src*="/zealot."]{object-view-box:inset(0% 30% 78% 44%)}

/* tienda: Buhonero centrado */
.merchant-host img{left:50%;transform:translateX(-56%)}
/* suministros equipados: en fila a los pies del personaje */
.piece .token-item{left:50%;right:auto;top:auto;bottom:-14px;transform:translateX(-50%);flex-direction:row;gap:2px;z-index:3}
.piece .token-item .re-icon{width:13px;height:13px}
/* ===== Barras de salud ===== */
.piece .hp-bar{bottom:calc(100% + 6px);width:max(52px,70%);height:6px;border:1px solid rgba(0,0,0,.95);border-radius:2px;overflow:hidden;
 background:linear-gradient(#141312,#0a0909);box-shadow:0 1px 3px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.06)}
.piece .hp-bar>*{position:absolute;left:0;top:0;bottom:0;display:block;text-decoration:none}
.piece .hp-bar .hp-trail{width:calc(var(--hp,100) * 1%);background:#f3e2b4;transition:width .55s cubic-bezier(.5,0,.4,1) .28s}
.piece .hp-bar .hp-fill{width:calc(var(--hp,100) * 1%);background:linear-gradient(#6fe39a,#2f9e5a 60%,#22784a);transition:width .12s linear}
.piece .token.enemy .hp-bar .hp-fill{background:linear-gradient(#ff8a70,#c8321f 60%,#8f1f13)}
.piece .hp-bar .hp-shield{left:calc(var(--hp,100) * 1%);width:calc(var(--sh,0) * 1%);max-width:calc(100% - var(--hp,100) * 1%);background:repeating-linear-gradient(135deg,#e9f3ff 0 3px,#a8c8ee 3px 6px);opacity:.85}
.piece .hp-bar::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(100% / var(--ticks,3) - 1px),rgba(0,0,0,.55) calc(100% / var(--ticks,3) - 1px) calc(100% / var(--ticks,3)))}
.piece.low-hp .hp-bar .hp-fill{animation:hpPulse .9s ease-in-out infinite alternate}
@keyframes hpPulse{to{filter:brightness(1.5)}}
.piece .energy-bar{bottom:calc(100% + 2px);width:max(52px,70%);height:3px;border:0;border-radius:2px;overflow:hidden;background:rgba(0,0,0,.8)}
.piece .energy-bar i{width:calc(var(--en,0) * 1%);background:linear-gradient(90deg,#3d7bd6,#8ec5ff);transition:width .2s linear}
.piece .unit-stars{bottom:calc(100% + 14px)}

/* ===== Menú principal ===== */
.title-screen{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,rgba(10,9,8,.55),rgba(0,0,0,.92) 70%),linear-gradient(transparent 60%,rgba(0,0,0,.6));backdrop-filter:blur(2px)}
.title-screen.hidden{display:none}
.title-wrap{width:min(460px,92vw);text-align:center}
.title-logo .brand-mark{display:inline-block;transform:scale(2.2);margin-bottom:22px}
.title-logo h1{margin:0;font:400 46px/1 var(--display);letter-spacing:.32em;color:var(--ink);text-shadow:0 2px 18px rgba(0,0,0,.9)}
.title-logo h1 small{display:block;margin-top:10px;font:11px var(--ui);letter-spacing:.5em;color:var(--gold)}
.title-logo p{margin:14px 0 26px;color:var(--dim);font:italic 15px var(--display)}
.title-menu{display:flex;flex-direction:column;gap:6px}
.title-menu.hidden{display:none}
.title-menu h2{margin:0 0 6px;font:12px var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.title-menu button{padding:11px 16px;border:1px solid var(--line-2);background:rgba(12,11,9,.82);color:var(--ink);font:13px var(--ui);letter-spacing:.2em;text-transform:uppercase;text-align:center;transition:border-color .15s,background .15s}
.title-menu button small{display:block;margin-top:3px;font:11px var(--ui);letter-spacing:.04em;text-transform:none;color:var(--dim)}
.title-menu button:hover{border-color:var(--gold);background:rgba(40,32,20,.9)}
.title-menu button.primary{border-color:var(--gold);color:var(--gold-2);background:linear-gradient(rgba(60,46,24,.9),rgba(20,16,10,.9))}
.title-menu button.ghost{background:transparent;color:var(--dim)}
.title-foot{margin-top:18px;font:10px var(--mono);color:var(--faint);letter-spacing:.1em}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font:13px var(--ui);color:var(--ink-2)}
.opt-row select{background:#13110e;color:var(--ink);border:1px solid var(--line-2);padding:4px 6px}
body.names-always .piece .token-name{opacity:1}

#labBtn{display:none;position:fixed;z-index:30;left:50%;top:calc(var(--top-h) + 22px);transform:translateX(-50%);padding:7px 14px;border:1px solid var(--gold);background:rgba(30,24,14,.92);color:var(--gold-2);font:11px var(--ui);letter-spacing:.16em;text-transform:uppercase}
#labBtn.show{display:block}#labBtn:hover{background:rgba(60,46,24,.95)}
.lab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.lab-unit{position:relative;height:118px;overflow:hidden;border:1px solid var(--line-2);background:#14120f;padding:0}
.lab-unit:hover{border-color:var(--gold)}
.lab-unit .portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-view-box:inset(0% 24% 50% 24%);object-position:50% 0}
.lab-unit span{position:absolute;left:0;right:0;bottom:0;padding:14px 4px 4px;font:11px var(--ui);color:var(--ink);background:linear-gradient(transparent,rgba(0,0,0,.9))}
.lab-stars{display:flex;gap:6px;align-items:center;margin:6px 0 4px;font:12px var(--ui);color:var(--dim)}
.lab-stars button{padding:4px 10px;border:1px solid var(--line-2);color:var(--gold-2);background:#14120f}.lab-stars button.on{border-color:var(--gold);background:rgba(60,46,24,.9)}

/* ===== Menú principal: rediseño ===== */
.title-screen{background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(30,12,8,.35),rgba(0,0,0,.92) 75%),linear-gradient(180deg,rgba(0,0,0,.55),transparent 30%,transparent 70%,rgba(0,0,0,.8));backdrop-filter:blur(3px) saturate(.7);overflow:hidden}
.title-bg{position:absolute;inset:0;pointer-events:none}
.title-bg img{position:absolute;bottom:-4%;height:96%;width:auto;filter:grayscale(.35) contrast(1.1) brightness(.62) drop-shadow(0 0 40px rgba(0,0,0,.9));opacity:.0;animation:tbIn 1.6s ease-out .2s forwards,tbDrift 18s ease-in-out infinite alternate}
.title-bg .tb-left{left:-4%;-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 92%);mask-image:linear-gradient(90deg,#000 45%,transparent 92%)}
.title-bg .tb-right{right:-6%;transform:scaleX(-1);-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 92%);mask-image:linear-gradient(90deg,#000 45%,transparent 92%);animation-delay:.5s,0s}
@keyframes tbIn{to{opacity:.85}}
@keyframes tbDrift{from{translate:0 0}to{translate:0 -1.6%}}
.tb-fog{position:absolute;left:-10%;right:-10%;bottom:-5%;height:45%;background:radial-gradient(ellipse at 30% 100%,rgba(150,120,95,.18),transparent 60%),radial-gradient(ellipse at 75% 100%,rgba(140,110,90,.14),transparent 60%);animation:fogMove 14s ease-in-out infinite alternate}
@keyframes fogMove{to{transform:translateX(5%)}}
.ember{position:absolute;bottom:-10px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:#ffb357;box-shadow:0 0 6px 2px rgba(255,140,40,.7);opacity:0;animation:emberUp var(--d) linear var(--delay) infinite}
@keyframes emberUp{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}100%{transform:translate(40px,-95vh);opacity:0}}
.title-wrap{position:relative;z-index:2;width:min(440px,92vw);padding:34px 34px 22px;background:linear-gradient(rgba(10,8,7,.72),rgba(10,8,7,.88));border:1px solid rgba(201,160,90,.28);box-shadow:0 30px 80px rgba(0,0,0,.8),inset 0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,230,180,.06);animation:twIn .7s cubic-bezier(.2,.8,.3,1) both}
.title-wrap::before,.title-wrap::after{content:'';position:absolute;width:22px;height:22px;border:2px solid var(--gold)}
.title-wrap::before{left:-1px;top:-1px;border-right:0;border-bottom:0}.title-wrap::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
@keyframes twIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
.title-logo .brand-mark{transform:rotate(45deg) scale(1.7);margin:6px 0 26px;box-shadow:0 0 24px rgba(198,59,44,.55);animation:pulseMark 3.2s ease-in-out infinite}
@keyframes pulseMark{50%{box-shadow:0 0 38px rgba(198,59,44,.85)}}
.title-logo h1{font-size:44px;letter-spacing:.34em;margin-right:-.34em;background:linear-gradient(#f4ead6,#b9a37c);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 10px rgba(0,0,0,.9))}
.title-logo h1 small{-webkit-text-fill-color:var(--gold);letter-spacing:.55em;margin-right:-.55em}
.title-logo p{margin:12px 0 22px;font-size:14px}
.title-menu{gap:2px}
.title-menu button{position:relative;padding:10px 14px;border:0;border-bottom:1px solid rgba(255,255,255,.05);background:transparent;font-size:13px;letter-spacing:.24em;color:#d9ccb3;transition:color .15s,background .2s,letter-spacing .2s}
.title-menu button::before{content:'';position:absolute;left:0;top:50%;width:0;height:1px;background:var(--gold);transition:width .2s}
.title-menu button::after{content:'';position:absolute;right:0;top:50%;width:0;height:1px;background:var(--gold);transition:width .2s}
.title-menu button:hover{color:#fff1d2;background:linear-gradient(90deg,transparent,rgba(201,160,90,.12),transparent);letter-spacing:.3em}
.title-menu button:hover::before,.title-menu button:hover::after{width:14%}
.title-menu button.primary{margin-bottom:8px;padding:13px 14px;border:1px solid var(--gold);color:var(--gold-2);background:linear-gradient(rgba(90,58,24,.55),rgba(30,20,10,.75));box-shadow:0 0 20px rgba(201,140,60,.15),inset 0 1px 0 rgba(255,220,160,.12)}
.title-menu button.primary:hover{box-shadow:0 0 30px rgba(230,170,80,.3)}
.title-menu button small{color:#8f8471}
.title-quote{margin:18px 0 0;font:italic 13px var(--display);color:#b9a37c;opacity:.85}
.title-foot{margin-top:10px}
.title-screen:not(.hidden) ~ #modal{visibility:hidden}
/* suministros equipados: mini-iconos pegados al extremo derecho de la barra de vida */
.piece .token-item{left:calc(50% + max(26px,35%) + 3px);right:auto;bottom:calc(100% + 1px);top:auto;transform:none;flex-direction:row;gap:1px;z-index:3;opacity:.85;pointer-events:none}
.piece .token-item .re-icon{width:10px;height:10px;padding:0;border-width:1px}
.piece .token:hover .token-item,.piece .token.selected .token-item{opacity:1}
.piece .token-item .re-icon{transition:transform .15s}.piece .token:hover .token-item .re-icon{transform:scale(1.35)}

.codex-bond h3 .re-icon{width:20px;height:20px;color:#e2bd72;vertical-align:-4px}
.bond-members{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.bond-members>span{display:flex;flex-direction:column;align-items:center;width:52px;font-size:10px;color:var(--dim)}
.bond-members .portrait{width:44px;height:44px;object-fit:cover;object-view-box:inset(0% 30% 70% 30%);border:1px solid var(--line-2);border-radius:3px;background:#16140f}
.bond-note{align-self:center;color:var(--dim);font-size:11px}
.bond-members>span small{font-size:9px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52px}

.piece .token-item{pointer-events:auto}.piece .token-item i{display:inline-flex;font-style:normal}
.owned-n{font-style:normal;color:#9fd4a0}
/* estrellas encima del nombre */
.piece .unit-stars{bottom:calc(100% + 27px)!important}
.piece .token-name{bottom:calc(100% + 14px)}
.tooltip h3 .re-icon,.hover-card h3 .re-icon{width:18px;height:18px;color:#e2bd72;vertical-align:-3px}
.hover-card footer .re-icon{width:12px;height:12px;color:#e2bd72;vertical-align:-2px}

.codex-tabs{display:flex;gap:2px;margin:-4px 0 14px;border-bottom:1px solid var(--line-2)}
.codex-tabs button{padding:9px 16px;font:12px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);border-bottom:2px solid transparent}
.codex-tabs button.on{color:var(--gold-2);border-bottom-color:var(--gold)}
.codex-tabs button:hover{color:var(--ink)}
.guide{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.guide section{padding:12px 14px;background:rgba(255,255,255,.025);border:1px solid var(--line)}
.guide h3{margin:0 0 6px;font:12px var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.guide p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.guide kbd{padding:0 5px;border:1px solid var(--line-2);font:11px var(--mono);color:var(--gold-2)}
.players .player{cursor:default}
.squad{display:flex;flex-wrap:wrap;gap:4px}.squad .sq{position:relative}.squad .sq i{position:absolute;left:0;right:0;bottom:-2px;text-align:center;font:9px var(--ui);font-style:normal;color:var(--gold-2);text-shadow:0 0 3px #000}

/* apoyos desactivados */
[data-action=assist],.assist-badge,#assistCount{display:none!important}
.bench-heading{justify-content:center;align-items:center;text-align:center}
/* rachas en supervivientes */
.player-level .streak{font-style:normal;font-weight:700;margin-left:4px}
.player-level .streak.win{color:#7fd28e}.player-level .streak.loss{color:#ff8a70}
/* columna derecha: supervivientes completos, bloques compactos */
.hud-right{gap:8px}
.hud-right .players-panel{flex:0 0 auto!important;min-height:0;overflow:visible!important}
.hud-right .players-panel .players{overflow:visible!important;max-height:none}
.hud-right .player{padding:1px 6px}
.hud-right .player-name{font-size:11.5px}
.hud-right .player-hp{font-size:14px}
.hud-right .hud-panel{padding:8px 12px 9px}
.hud-right .sample-strip i{height:24px}
.hud-right .items{grid-template-columns:repeat(7,1fr);gap:3px}
.hud-right .item .re-icon{width:20px;height:20px}
/* placa de ronda: textos sin solaparse */
.phase-content>div{min-width:0;max-width:240px}
.phase-name,.phase-small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phase-small{font-size:10px;letter-spacing:.1em}
.round-plate{min-width:0}
.top-right{padding-left:12px!important}

/* r23: sin nombres sobre las piezas del tablero ni en combate */
.piece .token-name,body.names-always .piece .token-name{display:none!important}

/* r24: cartel de resultado solo texto */
.banner-text{margin-top:14vh;text-align:center;font:400 54px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);text-shadow:0 2px 3px #000,0 0 24px rgba(0,0,0,.9);animation:bannerIn .35s ease-out both}
.banner-text.win{color:#e9dcb4}.banner-text.loss{color:#e58a7c}
@keyframes bannerIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
/* r24: informe final */
.final-report h3{margin:18px 0 8px;font:600 11px var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.fr-lead{margin:0 0 12px;color:var(--dim)}
.fr-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.fr-tile{padding:10px 12px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.fr-tile small{display:block;font:10px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.fr-tile b{display:block;margin-top:4px;font:400 22px var(--display);color:var(--gold-2)}
.final-report.loss .fr-tile:first-child b{color:#e58a7c}
.fr-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.fr-timeline{display:flex;flex-wrap:wrap;gap:4px}
.fr-r{display:flex;flex-direction:column;align-items:center;min-width:38px;padding:4px 3px;border:1px solid var(--line);font:10px var(--mono)}
.fr-r b{font-weight:400;color:var(--dim)}.fr-r i{font-style:normal;font-size:13px}
.fr-r.w{border-color:rgba(120,190,120,.55)}.fr-r.w i{color:#9fd59a}
.fr-r.l{border-color:rgba(220,100,90,.55)}.fr-r.l i{color:#e58a7c}
.fr-mvp{display:grid;grid-template-columns:18px 34px 1fr auto;gap:8px;align-items:center;padding:4px 0;border-bottom:1px solid var(--line)}
.fr-mvp span{font:12px var(--mono);color:var(--dim)}.fr-mvp img{width:34px;height:34px;object-fit:cover;object-position:top}
.fr-mvp em{font:13px var(--mono);font-style:normal;color:var(--gold-2)}
.fr-ranking{display:flex;flex-direction:column;gap:4px;max-height:42vh;overflow:auto;padding-right:4px}
.fr-row{display:grid;grid-template-columns:38px 170px 1fr 230px;gap:10px;align-items:center;padding:6px 8px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.fr-row.me{border-color:var(--gold);background:rgba(216,180,104,.08)}
.fr-row.first .fr-place{color:var(--gold-2)}
.fr-place{font:400 20px var(--display);color:var(--dim);text-align:center}
.fr-who b{display:block;font-size:13px}.fr-who b em{font-style:normal;font-size:9px;letter-spacing:.14em;padding:1px 4px;margin-left:4px;background:var(--gold);color:#16110a}
.fr-who small{color:var(--dim);font-size:11px}
.fr-squad{display:flex;flex-wrap:wrap;gap:3px}
.fr-unit{position:relative;display:inline-block}
.fr-unit img{width:34px;height:34px;object-fit:cover;object-position:top;border:1px solid;display:block}
.fr-unit i{position:absolute;left:0;right:0;bottom:-2px;text-align:center;font-style:normal;font-size:8px;color:#ffd970;text-shadow:0 0 2px #000,0 0 2px #000}
.fr-bonds{display:flex;flex-wrap:wrap;gap:3px 8px}
.fr-bond{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#cfe3b0}
.fr-bond svg,.fr-bond img{width:16px;height:16px}
.fr-bond em{font-style:normal}
.fr-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
@media(max-width:900px){.fr-cols{grid-template-columns:1fr}.fr-row{grid-template-columns:32px 1fr;}.fr-squad,.fr-bonds{grid-column:1/-1}}
.fr-unit img,.fr-mvp img{object-view-box:inset(0% 28% 72% 28%);object-position:center}
.fr-actions button:not(.primary){padding:9px 16px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink);cursor:pointer}
.fr-actions button:not(.primary):hover{border-color:var(--gold)}

/* ==========================================================================
   r25 · Responsive + interfaz móvil (body.mobile la pone mobile.js)
   ========================================================================== */
.title-screen{overflow-y:auto;overscroll-behavior:contain}
.title-screen .title-wrap{margin:auto}
.m-tabs,.m-backdrop,.m-drawer-close,.m-shop-toggle,.m-menu-btn,.m-rotate{display:none}
.m-menu-list{display:flex;flex-direction:column;gap:6px}
.m-menu-list button{padding:13px 14px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);text-align:left;font:13px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.m-menu-list button small{display:block;margin-top:2px;font-size:11px;letter-spacing:.02em;text-transform:none;color:var(--dim)}
.opt-hint{margin:-2px 0 10px!important}
/* mid-size windows: let the top bar and dock shrink without overlapping */
@media (max-width:1100px) and (min-width:761px){
  .top-right .camera-tools .l-full{display:none}.top-right .camera-tools .l-ico{display:inline}
}

body.mobile{--top-h:44px;--gap:6px;font-size:12px}
body.mobile .battlefield{touch-action:none}
body.mobile button{touch-action:manipulation}
/* top bar */
body.mobile .hud-top{top:max(4px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));height:var(--top-h);grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:center}
body.mobile .hud-brand .brand{display:none}
body.mobile .condition{padding:3px 8px 3px 6px;gap:6px}
body.mobile .condition svg{width:46px;height:22px}
body.mobile .condition .ecg-state{font-size:11px;letter-spacing:.08em}
body.mobile .condition .ecg-sub{font-size:10px}
body.mobile .round-plate{justify-self:center;min-width:0!important;max-width:100%;padding:3px 10px}
body.mobile .round-plate .arena-heading{display:none}
body.mobile .phase-content{gap:8px}
body.mobile .round-number,body.mobile .timer{font-size:19px}
body.mobile .timer{padding-left:8px;min-width:30px}
body.mobile .phase-content>div{padding-left:8px;max-width:38vw}
body.mobile .phase-name{font-size:13px}
body.mobile .phase-small{font-size:9px}
body.mobile .top-right{padding-left:0!important;gap:4px}
body.mobile .top-right .camera-tools{display:none}
body.mobile .hud-menu{padding:2px;gap:0}
body.mobile .hud-menu button{padding:8px 9px;font-size:12px}
body.mobile .hud-menu .menu-rule,body.mobile .hud-menu [data-action=codex],body.mobile .hud-menu [data-action=log],body.mobile .hud-menu [data-action=help],body.mobile .hud-menu [data-action=settings]{display:none}
body.mobile .m-menu-btn{display:block;font-size:16px!important;padding:6px 11px!important}
/* drawers */
body.mobile .hud-col{position:fixed;top:0;bottom:0;max-height:none;width:min(330px,86vw);z-index:62;padding:42px 10px max(12px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background:rgba(9,9,8,.97);border:1px solid var(--line-2);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.8)}
body.mobile .hud-left{left:0;transform:translateX(-104%)}
body.mobile .hud-right{right:0;transform:translateX(104%)}
body.mobile.drawer-left .hud-left,body.mobile.drawer-right .hud-right{transform:none}
body.mobile .hud-col .hud-panel{flex:0 0 auto!important;overflow:visible!important}
body.mobile .hud-left .traits{max-height:none!important;overflow:visible}
body.mobile .trait-faces{display:flex}
body.mobile .m-drawer-close{display:block;position:absolute;top:6px;right:8px;width:34px;height:30px;font-size:22px;color:var(--ink-2);border:1px solid var(--line)}
body.mobile .m-backdrop{display:block;position:fixed;inset:0;z-index:61;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s}
body.mobile.drawer-left .m-backdrop,body.mobile.drawer-right .m-backdrop{opacity:1;pointer-events:auto}
/* edge tabs */
body.mobile .m-tabs{display:block}
body.mobile .m-tab{position:fixed;z-index:30;top:calc(var(--top-h) + 14px);display:flex;align-items:center;gap:5px;padding:7px 9px;background:rgba(9,9,8,.86);border:1px solid var(--line-2);font:11px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
body.mobile .m-tab-left{left:max(6px,env(safe-area-inset-left))}
body.mobile .m-tab-right{right:max(6px,env(safe-area-inset-right))}
body.mobile .m-tab b{min-width:16px;padding:0 4px;font:11px var(--mono);color:#120d04;background:var(--gold-2);text-align:center}
body.mobile .m-tab b:empty{display:none}
body.mobile .m-tab-ico{font-size:13px;color:var(--gold)}
/* floating unit sheet */
body.mobile .inspector-panel{display:none;position:fixed;z-index:28;left:max(6px,env(safe-area-inset-left));top:calc(var(--top-h) + 52px);width:min(300px,62vw);max-height:calc(100% - var(--top-h) - 60px - var(--dock-space,200px));overflow-y:auto;padding:8px 10px;background-color:rgba(10,10,9,.95)}
body.mobile.has-selection .inspector-panel{display:block}
body.mobile .inspector-panel .panel-title,body.mobile .inspector-panel .last-events{display:none}
body.mobile .inspector-panel .inspector-portrait{height:64px}
body.mobile .inspector-panel p{margin:4px 0;font-size:11px}
body.mobile .inspector-panel h3{font-size:15px;margin:4px 0}
/* dock */
body.mobile .hud-dock{left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));bottom:max(4px,env(safe-area-inset-bottom));gap:4px}
body.mobile .reserve-row{grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:4px 6px;width:100%}
body.mobile .reserve-case{gap:6px}
body.mobile .bench-heading{font-size:9px;letter-spacing:.1em}
body.mobile .bench-heading b{font-size:11px}
body.mobile .bench{max-width:none;gap:2px;padding:2px}
body.mobile .bench-slot{height:44px}
body.mobile .bench-slot .token-name{display:none}
body.mobile .action-line{gap:4px}
body.mobile #selectedHint{display:none}
body.mobile .action-line button{padding:10px 10px;font-size:11px;letter-spacing:.08em}
body.mobile .action-line kbd{display:none}
body.mobile .m-shop-toggle{display:block;border:1px solid var(--gold-dim);color:var(--gold-2);text-transform:uppercase;background:rgba(40,30,14,.6)}
body.mobile.shop-open .m-shop-toggle{background:linear-gradient(rgba(90,58,24,.7),rgba(30,20,10,.8));border-color:var(--gold)}
body.mobile.m-combat .m-shop-toggle{display:none}
body.mobile .merchant-dock{display:none;width:100%;padding:6px;gap:6px;grid-template-columns:minmax(0,1fr) 118px!important}
body.mobile.shop-open .merchant-dock{display:grid}
body.mobile .merchant-host{display:none}
body.mobile .economy{display:flex!important;grid-column:2;grid-row:1;gap:4px}
body.mobile .shop-content{grid-column:1;grid-row:1 / span 2}
body.mobile .wallet{grid-column:2;grid-row:2;flex-direction:row;align-items:center;justify-content:space-between;padding:0;border:0;gap:4px}
body.mobile .wallet-label,body.mobile #streak{display:none}
body.mobile .wallet strong{font-size:20px}
body.mobile #lockBtn{padding:6px 6px;font-size:10px}
body.mobile .level-block{padding:0;gap:0 6px}
body.mobile .economy button{padding:7px 7px;font-size:10px;letter-spacing:.06em}
body.mobile .economy button kbd{display:none}
body.mobile .shop{gap:4px}
body.mobile .shop-card{min-height:92px!important;padding:5px 5px}
body.mobile .shop-card .card-tags{display:none}
body.mobile .shop-card .card-name{font-size:12px}
body.mobile .shop-card .copies{font-size:9px;min-height:0}
body.mobile .shop-card .cost{top:3px;right:3px;font-size:10px;padding:1px 4px}
body.mobile .shop-bottom{font-size:9px}
body.mobile #income{display:none}
/* modals, cards, banners */
body.mobile .modal-backdrop{padding:max(6px,env(safe-area-inset-top)) 6px 6px}
body.mobile .modal{padding:18px 14px 16px;max-height:calc(100dvh - 12px)}
body.mobile .modal h2{font-size:20px}
body.mobile .modal .close{width:38px;height:38px;font-size:22px}
body.mobile .hover-card{width:min(300px,86vw);left:50%!important;top:auto!important;bottom:calc(var(--dock-space,160px) + 6px);transform:translateX(-50%)}
body.mobile .banner-text{font-size:34px;margin-top:16vh}
body.mobile #announcements{top:calc(var(--top-h) + 40px);width:86vw}
body.mobile .meter{top:calc(var(--top-h) + 52px)!important;right:6px!important;max-width:70vw}
body.mobile .title-bg{display:none}
body.mobile .title-wrap{padding:22px 18px 16px}
body.mobile .title-logo h1{font-size:30px}
body.mobile .title-menu button{padding:11px 12px}
body.mobile .fr-row{grid-template-columns:32px 1fr}
body.mobile .fr-squad,body.mobile .fr-bonds{grid-column:1/-1}
body.mobile .fr-cols{grid-template-columns:1fr}
body.mobile .fr-ranking{max-height:none}
/* very short landscape phones */
@media (max-height:430px){
  body.mobile{--top-h:38px}
  body.mobile .bench-slot{height:36px}
  body.mobile .shop-card{min-height:74px!important}
  body.mobile .condition .ecg-text{display:none}
  body.mobile .m-tab span:not(.m-tab-ico){display:none}
  body.mobile .economy .level-block .xp-text{display:none}
}
/* portrait phones */
body.mobile.portrait .m-rotate{display:flex;position:fixed;z-index:29;left:50%;transform:translateX(-50%);top:calc(var(--top-h) + 14px);align-items:center;gap:8px;padding:6px 8px 6px 12px;background:rgba(9,9,8,.9);border:1px solid var(--line-2);font-size:11px;color:var(--ink-2);white-space:nowrap}
body.mobile.portrait .m-rotate span{color:var(--gold);font-size:14px}
body.mobile.portrait .m-rotate button{padding:2px 6px;font-size:16px}
body.mobile.portrait .m-tab{top:calc(var(--top-h) + 52px)}
body.mobile.portrait .condition .ecg-text{display:none}
body.mobile.portrait .phase-content>div{display:none}
body.mobile.portrait .merchant-dock{grid-template-columns:1fr!important}
body.mobile.portrait .economy{grid-column:1;grid-row:2;flex-direction:row;flex-wrap:wrap;align-items:center}
body.mobile.portrait .economy .level-block{flex:1 1 100%}
body.mobile.portrait .economy button{flex:1}
body.mobile.portrait .shop-content{grid-row:1}
body.mobile.portrait .wallet{grid-column:1;grid-row:3}
body.mobile.portrait .shop{grid-template-columns:repeat(5,minmax(0,1fr))}
body.mobile.portrait .shop-card{min-height:96px!important}
body.mobile.portrait .reserve-row{grid-template-columns:1fr}
body.mobile.portrait .bench-heading{display:none}
body.mobile.portrait .action-line{justify-content:stretch}
body.mobile.portrait .action-line button{flex:1}
body.mobile.portrait .inspector-panel{width:min(300px,78vw)}
body.mobile #pauseBtn{font-size:0!important;min-width:34px}
body.mobile #pauseBtn::before{content:attr(data-short);font-size:14px}
/* landscape phones: the shop becomes a right column so the board keeps the middle of the screen */
body.mobile.m-land .merchant-dock{position:fixed;right:max(6px,env(safe-area-inset-right));top:calc(var(--top-h) + 10px);bottom:max(4px,env(safe-area-inset-bottom));width:clamp(176px,24vw,230px);grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr) auto auto;align-content:stretch;z-index:19}
body.mobile.m-land .shop-content{grid-column:1;grid-row:1;min-height:0}
body.mobile.m-land .shop{grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr);height:100%}
body.mobile.m-land .shop-card{min-height:0!important;flex-direction:row;align-items:center;justify-content:flex-start;padding:3px 6px 3px 48%;}
body.mobile.m-land .shop-card .shop-portrait{inset:0 auto 0 0;width:44%}
body.mobile.m-land .shop-card .copies{display:none}
body.mobile.m-land .shop-card .card-name{font-size:12px;white-space:normal;line-height:1.05}
body.mobile.m-land .shop-bottom{display:none}
body.mobile.m-land .economy{grid-column:1;grid-row:2;flex-direction:row;flex-wrap:wrap}
body.mobile.m-land .economy .level-block{flex:1 1 100%}
body.mobile.m-land .economy button{flex:1;justify-content:center}
body.mobile.m-land .wallet{grid-column:1;grid-row:3}
body.mobile.m-land.shop-open .hud-dock{right:calc(clamp(176px,24vw,230px) + 12px)}
body.mobile.m-land.shop-open .m-tab-right{right:calc(clamp(176px,24vw,230px) + 14px)}
body.mobile.m-land.shop-open .meter{right:calc(clamp(176px,24vw,230px) + 14px)!important}
/* r25 · reparto de suministros: cabe en una pantalla y deja visible la columna de Escuadras */
body.carousel-on #modal{background:rgba(0,0,0,.5);padding:calc(var(--top-h) + 14px) calc(var(--col-w) + var(--gap)*2) 14px calc(var(--col-w) + var(--gap)*2);place-items:start center}
body.carousel-on .hud-right{z-index:85}
body.carousel-on .hud-right .hud-panel:not(.players-panel){opacity:.35;pointer-events:none}
body.carousel-on #modal .modal{width:min(1000px,100%);max-height:calc(100dvh - var(--top-h) - 28px);overflow:hidden;padding:18px 20px;display:flex;flex-direction:column}
body.carousel-on #modal .modal h2{margin:2px 0 6px;font-size:22px}
.cz{display:flex;flex-direction:column;gap:10px;min-height:0;flex:1}
.cz-status{margin:0;color:var(--ink-2)}
.cz-status.mine{color:var(--gold-2)}
.cz-order{display:flex;flex-wrap:wrap;gap:4px}
.cz-turn{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 4px;border:1px solid var(--line);font-size:11px;color:var(--dim);background:rgba(255,255,255,.02)}
.cz-turn i{font:normal 10px var(--mono);width:16px;height:16px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--ink-2)}
.cz-turn small{font:10px var(--mono);color:var(--faint)}
.cz-turn.done{opacity:.55}
.cz-turn.me{color:var(--gold-2);border-color:var(--gold-dim)}
.cz-turn.now{color:var(--ink);border-color:var(--gold);background:rgba(214,178,94,.14);animation:czPulse 1s ease-in-out infinite alternate}
@keyframes czPulse{to{box-shadow:0 0 12px rgba(240,212,143,.35)}}
.cz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:1fr;gap:8px;min-height:0;flex:1;overflow:auto}
.cz-card{position:relative;display:flex;flex-direction:column;min-height:0;border:1px solid var(--line-2);border-bottom:2px solid var(--cost);background:linear-gradient(#1a1814,#0e0d0b);text-align:left;overflow:hidden;transition:border-color .15s,transform .15s}
.cz-card:disabled{cursor:default;opacity:1}
.cz-card.pickable{cursor:pointer}
.cz-card.pickable:hover{border-color:var(--gold);transform:translateY(-2px)}
.cz-art{position:relative;flex:1 1 auto;min-height:70px;max-height:150px;overflow:hidden;background:radial-gradient(ellipse at 50% 20%,color-mix(in srgb,var(--cost) 30%,transparent),transparent 70%)}
.cz-art .portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-view-box:inset(0% 22% 52% 22%);object-position:50% 0}
.cz-lot{position:absolute;inset:0;display:grid;place-items:center;font:28px var(--display);color:var(--gold-2)}
.cz-info{display:flex;flex-direction:column;gap:2px;padding:6px 8px 7px}
.cz-info b{font:400 14px/1.1 var(--display);color:var(--ink)}
.cz-info small{font-size:10px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cz-item{display:flex;align-items:center;gap:4px;font-size:11px;color:#cfe3b0}
.cz-item .re-icon{width:14px;height:14px}
.cz-owned{position:absolute;top:5px;left:5px;font:normal 10px var(--ui);padding:1px 5px;background:var(--gold);color:#16110a}
.cz-card.taken .cz-art,.cz-card.taken .cz-info{filter:grayscale(.85) brightness(.45)}
.cz-by{position:absolute;left:0;right:0;top:38%;padding:5px;text-align:center;font:11px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#ffb4a6;background:rgba(0,0,0,.78);border-top:1px solid rgba(255,120,100,.4);border-bottom:1px solid rgba(255,120,100,.4)}
.cz-by.me{color:var(--gold-2);border-color:var(--gold-dim)}
.pick-state{display:inline-flex;align-items:center;gap:3px;margin-left:auto;margin-right:4px}
.pick-state i{font:normal 9px var(--mono);width:14px;height:14px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--dim)}
.pick-state img{width:20px;height:20px;object-fit:cover;object-view-box:inset(0% 28% 72% 28%);border:1px solid var(--gold-dim)}
.pick-state b{font:11px var(--mono);color:var(--gold-2)}
.pick-state em{font:normal 9px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2)}
.pick-state.now i{background:var(--gold);color:#16110a}
.player .pick-state+.player-hp{margin-left:0}
body.mobile.carousel-on #modal{padding:max(6px,env(safe-area-inset-top)) 6px 6px}
body.mobile.carousel-on .hud-right{z-index:62}
body.mobile .cz-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
body.mobile .cz-art{min-height:48px}
@media (max-height:760px){.cz-art{max-height:96px}.cz-info small{display:none}}
body.carousel-on .player{grid-template-columns:16px minmax(0,1fr) auto 32px}
/* r25 · en 3D el hexágono bajo el cursor lo calcula la escena (hoverHex); las cajas DOM no reciben el puntero */
.board.has-3d .cell{pointer-events:none!important;background:transparent!important}
/* ==========================================================================
   r25 · Menú principal tipo "lobby": la aldea en 3D de fondo y paneles en las esquinas
   ========================================================================== */
body.lobby .hud-top,body.lobby .hud-col,body.lobby .hud-dock,body.lobby .m-tabs,body.lobby .m-rotate,body.lobby #battleBanner,body.lobby #announcements,body.lobby .board .piece,body.lobby .inspector-panel,body.lobby .meter{visibility:hidden!important}
.title-screen:has(.lobby){display:block;background:radial-gradient(ellipse 80% 70% at 50% 45%,transparent 40%,rgba(0,0,0,.6) 100%),linear-gradient(180deg,rgba(0,0,0,.55),transparent 22%,transparent 68%,rgba(0,0,0,.7));backdrop-filter:none;overflow:hidden}
.lobby{position:absolute;inset:0;padding:14px 16px;display:grid;grid-template-columns:minmax(250px,300px) 1fr minmax(300px,360px);grid-template-rows:auto 1fr auto;grid-template-areas:"top top top" "left . ." "radio . play";gap:12px;pointer-events:none;font-family:var(--ui)}
.lobby>*{pointer-events:auto}
.lb-top{grid-area:top;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:12px}
.lb-profile{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;background:linear-gradient(90deg,rgba(14,12,10,.94),rgba(14,12,10,.7));border:1px solid rgba(201,160,90,.35);border-left:3px solid var(--gold);min-width:250px}
.lb-avatar{width:54px;height:54px;border-radius:50%;overflow:hidden;border:2px solid var(--gold);box-shadow:0 0 14px rgba(214,178,94,.35);background:#16120c;flex:none}
.lb-avatar img{width:100%;height:100%;object-fit:cover;object-view-box:inset(0% 30% 72% 30%)}
.lb-id b{display:block;font:400 18px var(--display);color:var(--ink)}
.lb-id small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin:1px 0 5px}
.lb-bar{display:block;width:150px;height:4px;background:rgba(255,255,255,.1)}
.lb-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold-2))}
.lb-logo{justify-self:center;display:flex;align-items:center;gap:12px;padding-top:6px;font:400 22px var(--display);letter-spacing:.3em;color:var(--ink);text-shadow:0 2px 12px #000}
.lb-logo small{display:block;font:10px var(--ui);letter-spacing:.42em;color:var(--gold)}
.lb-logo .brand-mark{transform:rotate(45deg) scale(1.1)}
.lb-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.lb-counters{display:flex;gap:6px}
.lb-counters span{padding:5px 12px;border-radius:14px;background:rgba(10,9,8,.85);border:1px solid var(--line-2);font:12px var(--mono);color:var(--dim)}
.lb-counters b{color:var(--gold-2);font-weight:400}
.lb-icons{display:flex;gap:8px}
.lb-icons button{display:flex;flex-direction:column;align-items:center;gap:4px;width:74px;font:10px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-shadow:0 1px 3px #000}
.lb-icons button span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font-size:19px;color:var(--gold-2);background:radial-gradient(circle at 50% 35%,#2b241a,#0f0d0a);border:1px solid rgba(201,160,90,.45);box-shadow:0 4px 14px rgba(0,0,0,.6);transition:transform .15s,border-color .15s}
.lb-icons button:hover span{transform:translateY(-2px);border-color:var(--gold-2)}
.lb-left{grid-area:left;display:flex;flex-direction:column;gap:10px;align-self:start;max-height:100%;overflow:auto}
.lb-card{position:relative;padding:10px 12px;background:rgba(12,11,9,.9);border:1px solid var(--line-2);border-top:2px solid var(--gold-dim);overflow:hidden}
.lb-card small{display:block;font-size:10px;letter-spacing:.18em;color:var(--dim);margin-bottom:4px}
.lb-card small em{font-style:normal;padding:1px 5px;background:var(--red);color:#fff;letter-spacing:.1em}
.lb-news{display:flex;min-height:110px;border-top-color:var(--red)}
.lb-news>div{position:relative;z-index:1;max-width:62%}
.lb-news h3{margin:4px 0;font:400 21px/1.05 var(--display);color:var(--ink)}
.lb-news p{margin:0;font-size:11.5px;color:var(--ink-2)}
.lb-news img{position:absolute;right:-18px;bottom:-60px;height:200px;filter:drop-shadow(0 0 10px #000);-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.lb-last-row{display:flex;align-items:baseline;gap:10px}
.lb-place{font:400 30px var(--display);color:var(--gold-2)}
.lb-last-row span{color:var(--dim);font-size:11px}
.lb-squad{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.lb-squad span{position:relative}
.lb-squad img{width:30px;height:30px;object-fit:cover;object-view-box:inset(0% 28% 72% 28%);border:1px solid var(--line-2);display:block}
.lb-squad i{position:absolute;left:0;right:0;bottom:-3px;text-align:center;font-style:normal;font-size:7px;color:#ffd970;text-shadow:0 0 2px #000}
.lb-empty{margin:2px 0;color:var(--dim);font-size:12px}
.lb-tip p{margin:0;font-size:12px;color:var(--ink-2)}
.lb-radio{grid-area:radio;align-self:end;max-width:420px;padding:0 0 6px;background:rgba(8,8,7,.82);border:1px solid var(--line)}
.lb-radio-tabs{display:flex;align-items:center;gap:10px;padding:6px 10px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lb-radio-tabs b{padding:3px 9px;background:var(--gold);color:#16110a;font-weight:400}
.lb-radio p{margin:4px 10px 0;font-size:12px;color:var(--ink-2)}
.lb-radio p b{color:var(--gold-2);font-weight:400}
.lb-play{grid-area:play;align-self:end;display:flex;flex-direction:column;gap:8px;padding:12px;background:linear-gradient(160deg,rgba(40,28,14,.94),rgba(12,10,8,.95));border:1px solid rgba(214,178,94,.55);box-shadow:0 18px 50px rgba(0,0,0,.7)}
.lb-go{display:flex;align-items:center;gap:14px;padding:12px 14px;text-align:left;background:linear-gradient(90deg,rgba(214,178,94,.22),rgba(214,178,94,.05));border:1px solid var(--gold);transition:background .15s}
.lb-go:hover{background:linear-gradient(90deg,rgba(214,178,94,.36),rgba(214,178,94,.1))}
.lb-chev{display:grid;place-items:center;width:42px;height:42px;font-size:26px;color:#16110a;background:var(--gold-2);clip-path:polygon(20% 0,100% 0,80% 100%,0 100%)}
.lb-go b{display:block;font:400 26px/1 var(--display);color:var(--ink)}
.lb-go small{display:block;margin-top:4px;font-size:11px;color:var(--ink-2);letter-spacing:.06em}
.lb-diff{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lb-diff select{flex:1;max-width:200px;padding:7px 8px;background:#0c0b09;color:var(--ink);border:1px solid var(--line-2);font:12px var(--ui)}
.lb-diff-desc{margin:-2px 0 0;font-size:11px;color:var(--dim)}
.lb-sub{padding:9px;border:1px solid var(--line-2);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);background:rgba(0,0,0,.3)}
.lb-sub:hover{border-color:var(--gold)}
.lb-sub.armed{border-color:var(--danger);color:#ffb2a4;letter-spacing:.04em}
@media (max-width:1100px){.lobby{grid-template-columns:minmax(220px,270px) 1fr minmax(260px,320px)}.lb-logo{display:none}}
body.mobile .lobby{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"top top" "left play" "left play";padding:8px;gap:8px;overflow:auto}
body.mobile .lb-top{grid-template-columns:1fr auto}
body.mobile .lb-logo,body.mobile .lb-radio,body.mobile .lb-counters,body.mobile .lb-tip{display:none}
body.mobile .lb-profile{min-width:0;padding:5px 10px 5px 5px}
body.mobile .lb-avatar{width:40px;height:40px}
body.mobile .lb-icons button{width:54px;font-size:9px}
body.mobile .lb-icons button span{width:38px;height:38px;font-size:16px}
body.mobile .lb-news{min-height:84px}
body.mobile .lb-news img{height:150px}
body.mobile .lb-play{align-self:end}
body.mobile.portrait .lobby{grid-template-columns:1fr;grid-template-areas:"top" "left" "play";grid-template-rows:auto 1fr auto}
body.mobile.portrait .lb-left{max-height:none}
@media (max-height:500px){.cz-art{min-height:34px!important;max-height:58px}.cz-info{padding:4px 6px}.cz-info b{font-size:12px}}
/* r25 · fondo del menú: tres escenas en bucle con fundido y desplazamiento lento (Ken Burns) */
.lb-slides{position:absolute;inset:0;overflow:hidden;background:#050505}
.lb-slide{position:absolute;inset:-6%;background-size:cover;background-position:center;opacity:0;will-change:transform,opacity;animation:lbFade 27s linear infinite,var(--kb) 27s linear infinite}
.lb-slide.s0{--kb:lbPanA;animation-delay:0s,0s}
.lb-slide.s1{--kb:lbPanB;animation-delay:9s,9s}
.lb-slide.s2{--kb:lbPanC;animation-delay:18s,18s}
@keyframes lbFade{0%{opacity:0}6%{opacity:1}33%{opacity:1}41%{opacity:0}100%{opacity:0}}
@keyframes lbPanA{0%{transform:scale(1.02) translate(-2%,1%)}41%{transform:scale(1.12) translate(2%,-1%)}100%{transform:scale(1.12) translate(2%,-1%)}}
@keyframes lbPanB{0%{transform:scale(1.12) translate(2%,0)}41%{transform:scale(1.02) translate(-2.5%,1%)}100%{transform:scale(1.02) translate(-2.5%,1%)}}
@keyframes lbPanC{0%{transform:scale(1.04) translate(0,2%)}41%{transform:scale(1.14) translate(-1.5%,-1.5%)}100%{transform:scale(1.14) translate(-1.5%,-1.5%)}}
.lb-slides::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 45%,transparent 35%,rgba(0,0,0,.65) 100%),linear-gradient(180deg,rgba(0,0,0,.5),transparent 22%,transparent 62%,rgba(0,0,0,.75))}
@media (prefers-reduced-motion:reduce){.lb-slide{animation:lbFade 27s linear infinite!important}}
.lobby{z-index:1}
.lb-logo span{font-size:20px;letter-spacing:.24em}
.hud-top .brand{font-size:17px;letter-spacing:.16em}
/* r26 · Archivo y Ajustes se abren encima del menú principal sin salir de él */
body.modal-over-lobby .title-screen:not(.hidden) ~ #modal{visibility:visible}
body.modal-over-lobby #modal{z-index:95}
/* r27 · consejos de iniciación */
.coach{position:absolute;z-index:45;left:calc(var(--col-w) + var(--gap)*2);bottom:calc(var(--dock-space,250px) + 8px);width:min(360px,calc(100% - 24px));padding:12px 14px;background:rgba(10,9,8,.96);border:1px solid var(--gold-dim);border-left:3px solid var(--gold);box-shadow:0 14px 34px rgba(0,0,0,.6);animation:bannerIn .3s ease-out both}
.coach small{display:block;font-size:10px;letter-spacing:.2em;color:var(--gold)}
.coach h3{margin:3px 0 5px;font:400 18px var(--display);color:var(--ink)}
.coach p{margin:0 0 10px;font-size:12.5px;color:var(--ink-2)}
.coach div{display:flex;gap:6px}
.coach button{padding:7px 12px;border:1px solid var(--line-2);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.coach button.primary{border-color:var(--gold);color:var(--gold-2);background:rgba(214,178,94,.12)}
body.mobile .coach{left:max(6px,env(safe-area-inset-left));bottom:calc(var(--dock-space,160px) + 6px);width:min(330px,70vw)}
body.mobile.m-land.shop-open .coach{max-width:calc(100vw - clamp(176px,24vw,230px) - 30px)}
/* r28 · estructura de la etapa junto al estado de la escuadra */
.stage-track{display:flex;align-items:center;gap:3px;padding:5px 8px;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.2));border-left:1px solid var(--line-2);min-width:0}
.st-label{margin-right:4px;font:10px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.st-r{position:relative;display:grid;place-items:center;width:24px;height:24px;font-style:normal;font-size:13px;line-height:1;color:var(--faint);border:1px solid var(--line);background:rgba(0,0,0,.35);transition:all .2s}
.st-r.done{color:var(--dim);opacity:.45}
.st-r.next{color:var(--ink-2)}
.st-r.now{color:#16110a;background:var(--gold-2);border-color:var(--gold-2);box-shadow:0 0 10px rgba(240,212,143,.55);transform:translateY(-1px)}
.st-r.boss:not(.now){color:#e58a7c;border-color:rgba(226,67,47,.45)}
.st-r.carousel:not(.now){color:var(--gold)}
.st-r b{position:absolute;top:-5px;right:-4px;font-size:8px;color:var(--gold-2);font-weight:400}
.st-r.now b{color:#fff}
@media (max-width:1300px){.st-label{display:none}.st-r{width:20px;height:20px;font-size:11px}}
body.mobile .stage-track{padding:2px 4px;gap:2px}
body.mobile .st-label{display:none}
body.mobile .st-r{width:16px;height:16px;font-size:9px}
body.mobile.portrait .stage-track{display:none}
.hud-brand{gap:10px}
.st-label{display:none}
@media (min-width:1900px){.st-label{display:inline}}
@media (max-width:1750px){.hud-top .brand>span:not(.brand-mark){display:none}}
@media (max-width:1500px){.condition svg{width:80px}.st-r{width:21px;height:21px;font-size:11px}}
.announcement.boss{color:#ff9d86;font-size:17px;letter-spacing:.14em}
.fx.boss-ring{width:220px!important;height:120px!important;border-color:rgba(255,120,90,.8)!important}
/* r29 · barra de salud del jefe */
.boss-bar{position:absolute;z-index:16;top:calc(var(--top-h) + 22px);left:50%;transform:translateX(-50%);width:min(560px,52vw);text-align:center;pointer-events:none}
.boss-bar b{display:block;font:400 18px var(--display);letter-spacing:.24em;text-transform:uppercase;color:#ffcfc2;text-shadow:0 2px 6px #000}
.bb-track{position:relative;display:block;height:9px;margin:5px 0 3px;background:rgba(0,0,0,.7);border:1px solid rgba(255,140,110,.55);box-shadow:0 0 14px rgba(0,0,0,.7)}
.bb-track i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#7d140c,#d4382a);transition:width .25s}
.bb-track em{position:absolute;top:-3px;bottom:-3px;width:1px;background:rgba(255,230,200,.75)}
.boss-bar small{font:11px var(--mono);letter-spacing:.12em;color:var(--ink-2);text-shadow:0 1px 3px #000}
.boss-bar.exposed .bb-track i{background:linear-gradient(90deg,#c9a23a,#ffe27a);animation:czPulse .5s ease-in-out infinite alternate}
.boss-bar.exposed small{color:#ffe27a}
body.mobile .boss-bar{top:calc(var(--top-h) + 8px);width:min(420px,60vw)}
body.mobile .boss-bar b{font-size:13px}
/* r30 · seis escenas en el fondo del menú (9 s cada una, ciclo de 54 s) */
.lb-slide{animation:lbFade6 54s linear infinite,var(--kb) 54s linear infinite}
.lb-slide.k0{--kb:lbPan6A}.lb-slide.k1{--kb:lbPan6B}.lb-slide.k2{--kb:lbPan6C}
@keyframes lbFade6{0%{opacity:0}3%{opacity:1}16.7%{opacity:1}20.5%{opacity:0}100%{opacity:0}}
@keyframes lbPan6A{0%{transform:scale(1.02) translate(-2%,1%)}20.5%{transform:scale(1.12) translate(2%,-1%)}100%{transform:scale(1.12) translate(2%,-1%)}}
@keyframes lbPan6B{0%{transform:scale(1.12) translate(2%,0)}20.5%{transform:scale(1.02) translate(-2.5%,1%)}100%{transform:scale(1.02) translate(-2.5%,1%)}}
@keyframes lbPan6C{0%{transform:scale(1.04) translate(0,2%)}20.5%{transform:scale(1.14) translate(-1.5%,-1.5%)}100%{transform:scale(1.14) translate(-1.5%,-1.5%)}}
@media (prefers-reduced-motion:reduce){.lb-slide{animation:lbFade6 54s linear infinite!important}}
.piece .token.boss .hp-bar,.piece .token.boss .energy-bar,.piece .token.boss ~ .unit-stars,.piece .token.boss .unit-stars{display:none!important}
.fx.fire-zone{width:120px;height:60px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,150,40,.55),rgba(255,70,20,.28) 60%,transparent);box-shadow:0 0 30px rgba(255,90,20,.45);animation:fireZone 5s ease-out forwards;mix-blend-mode:screen}
@keyframes fireZone{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}10%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:.9}100%{opacity:0}}

/* ---- online ---- */
body.online #pauseBtn,body.online #speedBtn{display:none!important}
.lb-online{border-top:1px solid var(--line-2);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.lb-online h4{margin:0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.lb-online h4 small{display:block;margin-top:2px;font-size:10px;letter-spacing:.06em;text-transform:none;color:var(--dim)}
.lb-online-body{display:flex;flex-direction:column;gap:6px}
.lb-field{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lb-field input,.lb-join input{flex:1;max-width:200px;min-width:0;padding:7px 8px;background:#0c0b09;color:var(--ink);border:1px solid var(--line-2);font:12px var(--ui)}
.lb-join input{max-width:96px;text-align:center;letter-spacing:.2em;text-transform:uppercase}
.lb-rating{margin:0;font-size:11px;color:var(--dim)}.lb-rating b{color:var(--gold)}
.lb-room-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch}.lb-room-actions>*{flex:1}
.lb-join{display:flex;gap:6px}.lb-join button{flex:1}
.lb-go.small{padding:8px 10px;justify-content:center}.lb-go.small b{font-size:13px}.lb-go[disabled]{opacity:.45;filter:grayscale(.6);cursor:not-allowed}
.lb-code{margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:8px}
.lb-code b{font-size:22px;letter-spacing:.28em;color:var(--gold);font-family:var(--ui)}
.lb-code button{padding:2px 7px;border:1px solid var(--line-2);background:rgba(0,0,0,.3);color:var(--ink-2)}
.lb-room{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:3px}
.lb-room li{display:flex;gap:6px;align-items:baseline;padding:4px 6px;background:rgba(0,0,0,.35);border-left:2px solid var(--line-2);font-size:12px;overflow:hidden}
.lb-room li.me{border-left-color:var(--gold)}.lb-room li b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-room li em{font-size:9px;font-style:normal;text-transform:uppercase;letter-spacing:.1em;color:var(--gold)}.lb-room li small{margin-left:auto;color:var(--dim)}
.lb-net-status{margin:0;font-size:12px;color:var(--ink-2)}
.player{position:relative}
.emote-bubble{position:absolute;right:6px;top:-8px;z-index:5;padding:2px 8px;font-size:11px;border-radius:10px;background:#f2e3b8;color:#1a140b;box-shadow:0 3px 10px rgba(0,0,0,.5);animation:emoteIn .25s ease-out;pointer-events:none;white-space:nowrap}
@keyframes emoteIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cz-clock{display:inline-block;margin-right:8px;padding:1px 8px;border:1px solid var(--gold);color:var(--gold);font-variant-numeric:tabular-nums}
.fr-elo{margin:4px 0 0;font-size:13px;color:var(--ink-2)}.fr-elo b{color:var(--gold)}.fr-elo em{font-style:normal;margin-left:6px}.fr-elo .up{color:#7fd39a}.fr-elo .down{color:#ff9a8a}

/* ---- chat persistente (menú y partida) ---- */
:root{--chat-w:270px}
@media (max-width:1400px){:root{--chat-w:240px}}
.chat{position:fixed;z-index:40;display:flex;flex-direction:column;font-family:var(--ui);background:linear-gradient(170deg,rgba(22,18,12,.94),rgba(8,8,7,.95));border:1px solid var(--line-2);box-shadow:0 14px 40px rgba(0,0,0,.6);left:var(--gap,10px);bottom:10px;width:var(--chat-w);height:var(--dock-h,230px)}
body.lobby .chat{z-index:92;left:16px;top:112px;bottom:16px;height:auto;width:300px}
body.lobby.modal-over-lobby .chat{z-index:92}
.chat-head{display:flex;align-items:center;gap:4px;padding:6px 6px 0;border-bottom:1px solid var(--line)}
.chat-head [data-chat-tab]{position:relative;padding:6px 10px;border:0;border-bottom:2px solid transparent;background:none;color:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.chat-head [data-chat-tab].on{color:var(--gold);border-bottom-color:var(--gold)}
.chat-head [data-chat-tab] i{position:absolute;top:0;right:-2px;min-width:15px;padding:0 4px;border-radius:8px;background:var(--danger,#c0392b);color:#fff;font-size:9px;font-style:normal;line-height:15px}
.chat-head [data-chat-tab] i:empty{display:none}
.chat-count{margin-left:auto;font-size:10px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-log{flex:1;min-height:0;overflow-y:auto;padding:6px 8px;display:flex;flex-direction:column;gap:3px;overscroll-behavior:contain}
.chat-line{margin:0;font-size:12.5px;line-height:1.35;color:var(--ink);word-wrap:break-word;overflow-wrap:anywhere}
.chat-line time{margin-right:5px;font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums}
.chat-name{padding:0;margin-right:5px;border:0;background:none;color:#e5c77d;font:inherit;font-weight:700;cursor:pointer}
.chat-name::after{content:':'}
.chat-line.mine .chat-name{color:#8fd3a8}
.chat-line.emote span{color:#f2e3b8;font-style:italic}
.chat-empty{margin:auto 0;font-size:12px;color:var(--dim);text-align:center}
.chat-quick{display:flex;flex-wrap:wrap;gap:3px;padding:4px 6px;border-top:1px solid var(--line)}
.chat-quick[hidden]{display:none}
.chat-quick button{padding:3px 7px;font-size:11px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--ink)}
.chat-quick button:hover{border-color:var(--gold)}
.chat-form{display:flex;gap:4px;padding:6px;border-top:1px solid var(--line)}
.chat-form input{flex:1;min-width:0;padding:7px 8px;background:#0c0b09;color:var(--ink);border:1px solid var(--line-2);font:12.5px var(--ui)}
.chat-form input:focus{outline:none;border-color:var(--gold)}
.chat-form button{padding:0 10px;border:1px solid var(--gold);background:rgba(214,178,94,.14);color:var(--gold);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.chat-fab{display:none}
body.mobile .chat{display:none;left:0;top:0;bottom:0;width:min(340px,88vw);height:auto;z-index:96;background:#0d0b08}
body.mobile.chat-open .chat{display:flex}
body.mobile .chat-fab{display:flex;align-items:center;justify-content:center;position:fixed;left:6px;top:96px;z-index:61;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:rgba(10,9,7,.9);font-size:18px}
body.mobile.lobby .chat-fab{z-index:93;top:auto;bottom:12px}
body.mobile.chat-open .chat-fab{left:calc(min(340px,88vw) + 6px);z-index:97}
.chat-fab i{position:absolute;top:-3px;right:-3px;min-width:16px;padding:0 4px;border-radius:8px;background:var(--danger,#c0392b);color:#fff;font-size:10px;font-style:normal;line-height:16px}
.chat-fab i:empty{display:none}
/* menú: modos de juego */
.lb-modes{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line-2)}
.lb-modes button{padding:9px;border:0;background:rgba(0,0,0,.35);color:var(--dim);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.lb-modes button.on{background:rgba(214,178,94,.16);color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold)}
.lb-modes button[disabled]:not(.on){opacity:.4;cursor:not-allowed}
.lb-lastline{margin:0;font-size:11px;color:var(--dim)}.lb-lastline b{color:var(--gold)}
.lb-online-sub{margin:0 0 2px;font-size:11px;color:var(--dim)}
.lb-online{border-top:0;padding-top:0}
.lb-join input{max-width:110px}
body:not(.lobby):not(.mobile) .hud-dock{left:calc(var(--gap) + var(--chat-w) + 8px)}

/* ---- perfil personalizable ---- */
button.lb-profile{font:inherit;color:inherit;text-align:left;cursor:pointer;pointer-events:auto;transition:filter .15s}
button.lb-profile:hover{filter:brightness(1.15)}
.lb-coins{display:block;margin-top:5px;font-size:11px;color:var(--dim)}.lb-coins b{color:#7fd3ff}
.lb-claim{margin-left:6px;padding:1px 6px;font-style:normal;font-size:10px;color:#111;background:var(--gold);animation:pfPulse 1.6s ease-in-out infinite}
@keyframes pfPulse{50%{filter:brightness(1.35)}}
.lb-avatar.face img,.pf-sw.face img,.lb-room-av img{object-fit:cover}
/* marcos: el borde de la tarjeta y del retrato */
.lb-profile.frame-sencillo{border:1px solid rgba(201,160,90,.35);border-left:3px solid var(--gold)}
.lb-avatar.frame-sencillo{border:2px solid var(--gold)}
.lb-profile.frame-bronce{border:1px solid #8a5a2b;border-left:3px solid #b8763a}
.lb-avatar.frame-bronce{border:3px solid #b8763a;box-shadow:0 0 0 2px #4a2c12,0 0 12px rgba(184,118,58,.5)}
.lb-profile.frame-plata{border:1px solid #9aa4ad;border-left:3px solid #d8e0e6}
.lb-avatar.frame-plata{border:3px solid #d8e0e6;box-shadow:0 0 0 2px #4b545c,0 0 14px rgba(216,224,230,.55)}
.lb-profile.frame-oro{border:1px solid #c9a25a;border-left:3px solid #ffd77a;box-shadow:0 0 18px rgba(255,215,122,.25)}
.lb-avatar.frame-oro{border:3px solid #ffd77a;box-shadow:0 0 0 2px #6b4a12,0 0 0 4px #ffd77a55,0 0 18px rgba(255,215,122,.7)}
.lb-profile.frame-umbrella{border:1px solid #c0392b;border-left:3px solid #f2f2f2}
.lb-avatar.frame-umbrella{border:3px solid transparent;background:conic-gradient(#d8262b 0 45deg,#f4f4f4 0 90deg,#d8262b 0 135deg,#f4f4f4 0 180deg,#d8262b 0 225deg,#f4f4f4 0 270deg,#d8262b 0 315deg,#f4f4f4 0) border-box;box-shadow:0 0 12px rgba(216,38,43,.5)}
.lb-profile.frame-plaga{border:1px solid #4f7a24;border-left:3px solid #9be04a}
.lb-avatar.frame-plaga{border:3px solid #9be04a;animation:pfPlaga 2.4s ease-in-out infinite}
@keyframes pfPlaga{0%,100%{box-shadow:0 0 0 2px #1f3a0c,0 0 8px rgba(155,224,74,.4)}50%{box-shadow:0 0 0 3px #2f5512,0 0 22px rgba(155,224,74,.85)}}
.lb-profile.frame-llamas{border:1px solid #c2561c;border-left:3px solid #ff8a2b}
.lb-avatar.frame-llamas{border:3px solid transparent;background:conic-gradient(from var(--pfa,0deg),#ff3d00,#ffb300,#ff6d00,#ffd54f,#ff3d00) border-box;animation:pfFire 2.2s linear infinite;box-shadow:0 0 18px rgba(255,120,30,.75)}
@property --pfa{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes pfFire{to{--pfa:360deg}}
.lb-profile.frame-leyenda{border:1px solid #c9a25a;border-left:3px solid #fff2c2;box-shadow:0 0 22px rgba(255,226,140,.35),inset 0 0 20px rgba(255,226,140,.08)}
.lb-avatar.frame-leyenda{border:3px solid transparent;background:conic-gradient(from var(--pfa,0deg),#fff2c2,#c9a25a,#7fd3ff,#c9a25a,#fff2c2) border-box;animation:pfFire 4s linear infinite;box-shadow:0 0 0 2px #2a1d06,0 0 24px rgba(255,226,140,.8)}
.lb-avatar[class*="frame-"] img{border-radius:50%;background:#16120c}
/* ventana de perfil */
.pf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center;margin-bottom:12px}
.pf-preview{pointer-events:none;min-width:0}
.pf-preview .lb-avatar{width:64px;height:64px}
.pf-side{display:flex;flex-direction:column;gap:6px}
.pf-coins{margin:0;font-size:12px;color:var(--dim)}.pf-coins b{font-size:18px;color:#7fd3ff}
.pf-tabs{display:flex;gap:0;border:1px solid var(--line-2);margin-bottom:10px}
.pf-tabs button{flex:1;padding:9px 6px;border:0;background:rgba(0,0,0,.35);color:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.pf-tabs button.on{background:rgba(214,178,94,.16);color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold)}
.pf-tabs i{font-style:normal;padding:0 6px;margin-left:4px;background:var(--gold);color:#111}
.pf-missions{display:flex;flex-direction:column;gap:8px}
.pf-mission{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 12px;background:rgba(0,0,0,.35);border:1px solid var(--line);border-left:3px solid var(--line-2)}
.pf-mission.done{border-left-color:var(--gold)}.pf-mission.claimed{opacity:.55}
.pf-mission b{display:block;font-size:13px}
.pf-prog{display:inline-block;width:160px;max-width:60%;height:5px;margin-right:8px;background:rgba(255,255,255,.1);vertical-align:middle}
.pf-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold-2))}
.pf-mission small{font-size:11px;color:var(--dim)}
.pf-reward{font-size:13px;color:#7fd3ff;white-space:nowrap}
.pf-mission em{font-style:normal;font-size:11px;color:var(--dim)}
.pf-mission button{padding:6px 12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line-2);background:rgba(0,0,0,.3);color:var(--ink-2)}
.pf-mission button.primary{border-color:var(--gold);color:#111;background:var(--gold)}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;max-height:46vh;overflow-y:auto;padding:2px}
.pf-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;background:rgba(0,0,0,.35);border:1px solid var(--line);color:var(--ink);font:inherit;cursor:pointer}
.pf-item:hover{border-color:var(--gold)}
.pf-item.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.pf-item.locked .pf-sw{filter:grayscale(.85) brightness(.55)}
.pf-item b{font-size:12px;font-weight:600;text-align:center;line-height:1.2}
.pf-item small{font-size:11px;color:var(--dim)}.pf-item.locked small{color:#7fd3ff}.pf-item.on small{color:var(--gold)}
.pf-sw{display:grid;place-items:center;width:72px;height:72px;overflow:hidden}
.pf-avatar .pf-sw{border-radius:50%;background:#16120c;border:1px solid var(--line-2)}
.pf-sw img{width:100%;height:100%;object-fit:cover}
.pf-bgsw{width:100%;height:56px;border:1px solid var(--line-2)}
.pf-frame .pf-sw .lb-avatar{width:56px;height:56px}
.pf-bg .pf-sw{width:100%}
.lb-room li{align-items:center}
.lb-room-av{width:22px;height:22px;border-radius:50%;overflow:hidden;flex:none;background:#16120c}
.lb-room-av img{width:100%;height:100%}
@media (max-width:760px){.pf{grid-template-columns:1fr}.pf-mission{grid-template-columns:1fr auto}.pf-mission .pf-reward{grid-column:2;grid-row:1}}

/* recorte de cara para fotos de perfil */
.face img[src*="/ada."]{object-view-box:inset(0% 36% 78% 38%)}.face img[src*="/armadura."]{object-view-box:inset(4% 50% 74% 24%)}.face img[src*="/ashley."]{object-view-box:inset(0% 39% 78% 35%)}.face img[src*="/chainsaw."]{object-view-box:inset(0% 38% 78% 36%)}.face img[src*="/colmillo."]{object-view-box:inset(16% 47% 62% 27%)}.face img[src*="/ganado."]{object-view-box:inset(1% 38% 77% 36%)}.face img[src*="/garrador."]{object-view-box:inset(1% 38% 77% 36%)}.face img[src*="/hunk."]{object-view-box:inset(4% 37% 74% 37%)}.face img[src*="/krauser."]{object-view-box:inset(0% 34% 78% 40%)}.face img[src*="/leon."]{object-view-box:inset(0% 39% 78% 35%)}.face img[src*="/luis."]{object-view-box:inset(0% 35% 78% 39%)}.face img[src*="/mendez."]{object-view-box:inset(2% 32% 76% 42%)}.face img[src*="/merchant."]{object-view-box:inset(0% 42% 78% 32%)}.face img[src*="/novis."]{object-view-box:inset(6% 37% 72% 37%)}.face img[src*="/regenerator."]{object-view-box:inset(1% 42% 77% 32%)}.face img[src*="/saddler."]{object-view-box:inset(6% 37% 72% 37%)}.face img[src*="/salazar."]{object-view-box:inset(0% 39% 78% 35%)}.face img[src*="/soldier."]{object-view-box:inset(9% 37% 69% 37%)}.face img[src*="/verdugo."]{object-view-box:inset(13% 37% 65% 37%)}.face img[src*="/wesker."]{object-view-box:inset(0% 37% 78% 37%)}.face img[src*="/zealot."]{object-view-box:inset(0% 30% 78% 44%)}
.lb-coins b{display:inline;font:inherit;font-weight:700;margin:0}
.lb-claim{display:inline-block}
/* cuenta de Discord */
.pf-account{display:flex;flex-direction:column;gap:4px}
.pf-account small{font-size:11px;color:var(--dim)}
.pf-dc-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border:0;background:#5865f2;color:#fff;font:600 13px var(--ui);letter-spacing:.02em;cursor:pointer}
.pf-dc-btn:hover{background:#4752c4}
.pf-dc-btn svg,.pf-dc svg,.lb-dc svg{width:18px;height:18px}
.pf-account.on{flex-direction:row;align-items:center;gap:10px;padding:6px 8px;border:1px solid #5865f2;background:rgba(88,101,242,.12)}
.pf-account.on>span:nth-child(2){flex:1;font-size:11px;color:var(--dim)}.pf-account.on b{display:block;font-size:13px;color:var(--ink)}
.pf-dc{color:#8f98ff;display:grid}
.pf-account.on button{padding:5px 9px;font-size:11px;border:1px solid var(--line-2);background:rgba(0,0,0,.3);color:var(--ink-2)}
.lb-link{margin-left:6px;padding:1px 7px;border:1px solid var(--line-2);background:none;color:var(--gold);font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.lb-dc{display:grid;color:#8f98ff}.lb-dc svg{width:13px;height:13px}
img[src^="https://cdn.discordapp.com/"]{object-view-box:none!important;object-fit:cover}

.pf-join{display:flex;flex-direction:column;gap:10px;align-items:stretch;max-width:440px}
a.pf-dc-btn{text-decoration:none}
.pf-dc-btn.small{padding:6px 10px;font-size:12px}
.modal:has(.pf-join){max-width:520px}

.wait-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}.wait-list li{display:flex;justify-content:space-between;padding:6px 10px;background:rgba(0,0,0,.35);border-left:2px solid var(--line-2);font-size:13px}.wait-list li.ok{border-left-color:#7fd39a}.wait-list li.ok b{color:#7fd39a}.wait-list b{font-weight:600;color:var(--dim)}

/* distintivo de desarrollador */
.dev-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:3px;font:700 9px/1.5 var(--ui);font-style:normal;letter-spacing:.12em;color:#1a0d00;background:linear-gradient(90deg,#ffd77a,#ff8a2b);box-shadow:0 0 10px rgba(255,170,60,.55);vertical-align:middle;text-transform:uppercase}
.dev-tag.big{font-size:10px;padding:2px 8px}
.chat-name .dev-tag{margin:0 5px 0 0}
.chat-line.dev .chat-name{color:#ffb347}

.lb-lang{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:16px;pointer-events:auto}
.lang-select{padding:5px 6px;background:#0c0b09;color:var(--ink);border:1px solid var(--line-2);font:12px var(--ui);max-width:110px}