/* Desktop combat presentation: shared by local and online matches. */
.combat-arena{position:fixed;inset:0;z-index:180;display:grid;place-items:center;background:radial-gradient(ellipse at center,#172319f2,#020503f5);backdrop-filter:blur(7px);padding:22px;overflow:auto}
.combat-arena[hidden]{display:none}
.arena-scene{width:min(1180px,95vw);text-align:center;color:#fff1cb;animation:arena-enter .35s ease-out}
.arena-kicker{font:800 14px Arial;letter-spacing:.3em;color:#d9b665;margin:0 0 8px}
.arena-scene h2{font-size:clamp(30px,4vw,56px);margin:0 0 18px;text-transform:uppercase;text-shadow:0 0 30px #dba85466}
.arena-scene h2 span{font-size:.55em;color:#b7bcae}
.arena-versus{display:flex;justify-content:center;align-items:center;gap:36px}
.arena-team{display:flex;align-items:center;gap:20px}
.arena-fighter{width:min(25vw,285px);position:relative;flex-shrink:0}
.arena-fighter>img{display:block;width:100%;height:min(43vh,370px);object-fit:contain;filter:drop-shadow(0 15px 25px #000);transition:filter .6s,transform .6s}
.arena-role{color:#f2d17e;font:800 14px Arial;margin-bottom:10px;min-height:17px}
.arena-fighter h3{text-transform:capitalize;font:700 18px Arial;margin:10px 0}
.arena-fighter .card-stat-strip{font-size:17px;padding:10px;border:1px solid #8b754b;background:#060c08;border-radius:10px}
.arena-fighter .card-stat-strip strong{font-size:28px}
.arena-cross{font-size:64px;color:#ffdc7c;min-width:135px}
.arena-cross small{display:block;font:700 14px/1.8 Arial;color:#e2ddc7}
.with-support{gap:20px}.with-support .arena-fighter{width:min(21vw,240px)}
.with-support .arena-team .arena-fighter:last-child{width:min(17vw,190px)}
.with-support .arena-team .arena-fighter:last-child .arena-role{font-size:12px}
.arena-outcome{min-height:34px;font:700 22px/1.4 Arial;color:#ffe29a;margin:24px 0 0}
.impact .arena-cross{animation:arena-strike .6s ease-out}
.impact .arena-fighter{animation:arena-hit .45s ease-out}
.arena-fighter.fallen>img{filter:grayscale(1) brightness(.35);transform:scale(.94) rotate(-3deg)}
.arena-fighter.fallen:after{content:'ELIMINADO';position:absolute;top:44%;left:0;right:0;background:#671d17e8;color:#ffdfbd;border-block:2px solid #ff9372;padding:14px;font:bold 22px Arial;transform:rotate(-8deg)}
.arena-direct{display:flex;align-items:center;justify-content:center;gap:90px}
.arena-damage{display:block;font:bold clamp(90px,13vw,170px) Arial;color:#ff7966;text-shadow:0 0 60px #ff492d66;animation:damage-burst .6s ease-out}
.arena-life{font:700 32px Arial;color:#ffe0ae}
.arena-dice{display:flex;justify-content:center;gap:32px;margin:45px 0;perspective:900px}
.arena-dice p{font:800 18px Arial;color:#e9d8b1}
.arena-die{width:150px;height:150px;display:grid;place-items:center;border:3px solid #ffb569;border-radius:28px;background:linear-gradient(145deg,#712f21,#200c07);box-shadow:inset 0 0 22px #ffbe7433,0 18px 40px #000;font:bold 90px Arial;color:#fff0d7}
.arena-die.def{border-color:#8dcfff;background:linear-gradient(145deg,#234f72,#081725);color:#ddf3ff}
.arena-die.rolling{animation:dice-tumble .38s linear infinite}
.coin-stage .initiative-coin{width:280px;height:280px;margin:auto}
.coin-spider,.coin-centipede{border-radius:0;background-size:contain}
/* Filters on the rotating parent flatten its 3D children in Chromium. */
.coin-stage{filter:drop-shadow(0 16px 16px #000a)}
.coin-stage .initiative-coin{filter:none;transform-style:preserve-3d}
.coin-stage .initiative-coin.spinning{animation:coinSpin .8s linear infinite}
.coin-spider,.coin-centipede{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.coin-spider{transform:translateZ(1px)}
.coin-centipede{transform:rotateY(180deg) translateZ(1px)}
.coin-choices{display:flex;gap:44px;justify-content:center;margin:24px 0}
.coin-choice{display:flex;flex-direction:column;align-items:center;gap:14px;background:#0c140e;border:2px solid #79633c;border-radius:20px;padding:18px 24px;cursor:pointer;color:#f6da8c;font-size:24px;transition:transform .2s,border-color .2s}
.coin-choice img{width:220px;height:220px;object-fit:contain}
.coin-choice:hover,.coin-choice:focus-visible{transform:translateY(-5px);border-color:#ffe198;box-shadow:0 0 30px #e8ba502b}
.initiative-options{display:flex;justify-content:center;gap:20px;margin:24px auto}
.initiative-options button{min-width:260px;padding:18px;font-size:20px}
.initiative-options small{display:block;margin-top:10px;font:500 14px Arial}
.combat-card-label{position:absolute;top:5px;left:4px;right:4px;z-index:5;background:#080c09ef;color:var(--fight-color,#ffce71);border:1px solid var(--fight-color,#ffce71);border-radius:6px;padding:5px 2px;text-align:center;font:800 11px Arial;pointer-events:none}
.game-card.declared-attacker{outline:3px solid #ffb84c!important;outline-offset:2px;box-shadow:0 0 20px #ffb637a6!important;animation:attacker-glow 1.5s ease-in-out infinite}
.game-card.fight-participant{border-color:var(--fight-color)!important;box-shadow:0 0 15px color-mix(in srgb,var(--fight-color) 45%,transparent)}
.card-stat-strip .stat-boosted{color:#ffe694;background:#81621c4a;border-radius:4px}
.card-stat-strip small{display:block;font:700 11px Arial;color:#f8db91;white-space:nowrap}
.game-card .card-stat-strip{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:5px 3px;text-align:center}
.game-card .card-stat-strip>span{display:block;min-width:0;font-size:12px}
.game-card .card-stat-strip strong{display:block;font-size:20px;line-height:1.1}
.board-row{padding-top:10px;padding-bottom:12px}
@keyframes attacker-glow{50%{box-shadow:0 0 32px #ffc444d9}}
@keyframes arena-enter{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes arena-hit{25%{transform:translateX(12px)}55%{transform:translateX(-9px)}}
@keyframes arena-strike{0%{transform:scale(.8)}40%{transform:scale(1.65);filter:drop-shadow(0 0 40px #ffb321)}100%{transform:scale(1)}}
@keyframes damage-burst{from{transform:scale(1.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes dice-tumble{0%{transform:rotateX(0) rotateZ(-8deg)}50%{transform:rotateX(180deg) rotateZ(10deg)}100%{transform:rotateX(360deg) rotateZ(-8deg)}}
@media(prefers-reduced-motion:reduce){.combat-arena *,.declared-attacker{animation:none!important;transition:none!important}}

.story-trophy{display:block;width:210px;max-height:180px;margin:0 auto 12px;filter:drop-shadow(0 0 22px #e6b84466)}