body.action-cursor .radial-action,body.action-cursor .icon-btn{cursor:inherit}
body.action-cursor .battlefield,body.action-cursor #grid,body.action-cursor .hex,body.action-cursor .unit{cursor:inherit!important}
.unit img{transform:scale(1.5);transform-origin:50% 88%}
.unit.harpy img{transform:scale(1.5) translateY(12px)}
.unit-name,.unit .hp,.unit .status-row{z-index:2}
.hex.preview-area{background:#d39a45}.hex.preview-area::before{background:#594728}
.hex.preview-line{background:#58a5a5}.hex.preview-line::before{background:#294b4b}
.hex.firewall::after{content:"";inset:2px 7px 5px;border:0;background:url('assets/terrain/fire-v3.png') center bottom/128% 128% no-repeat;filter:drop-shadow(0 0 8px rgba(242,105,34,.72));animation:fireFlicker .65s ease-in-out infinite alternate}
.hex.spikes::after{content:"";inset:1px;border:0;display:block;background:url('assets/terrain/spikes-v2.png') center/118% auto no-repeat;filter:drop-shadow(0 7px 4px rgba(0,0,0,.82)) drop-shadow(0 0 5px rgba(220,153,55,.3));animation:spikeRise .28s ease-out}
.hex.avatar::after{content:"◆";inset:0;border:0;display:grid;place-items:center;color:#62cbc7;font-size:42px;text-shadow:0 4px 2px #000}
.unit.untargetable{opacity:.3;filter:saturate(.45)}.unit.afflicted{filter:drop-shadow(0 0 7px rgba(81,194,194,.6))}.unit.burning{filter:drop-shadow(0 0 9px rgba(244,97,34,.9)) brightness(1.08)}.unit.targetable{cursor:inherit;pointer-events:auto;filter:brightness(1.06) drop-shadow(0 0 4px rgba(91,184,188,.42))}
.burning-status{color:#ff9b43;text-shadow:0 0 7px #e43f1f}
.unit.targetable::before{content:"";position:absolute;z-index:0;inset:8px 8px 22px;border:2px solid rgba(239,190,89,.9);border-radius:50%;opacity:0;transform:scale(.78);box-shadow:0 0 0 3px rgba(40,180,190,.2),0 0 13px rgba(74,211,218,.75),inset 0 0 13px rgba(212,164,72,.2);transition:opacity .12s,transform .12s;pointer-events:none}.unit.targetable:hover::before{opacity:1;transform:scale(1)}.unit.targetable:hover .unit-art{filter:brightness(1.3) drop-shadow(0 0 9px rgba(94,224,226,.9)) drop-shadow(0 7px 4px rgba(0,0,0,.8))}
.unit.target-hover::before{opacity:1;transform:scale(1)}.unit.target-hover .unit-art{filter:brightness(1.3) drop-shadow(0 0 9px rgba(94,224,226,.9)) drop-shadow(0 7px 4px rgba(0,0,0,.8))}
@keyframes spikeRise{from{opacity:0;transform:translateY(14px) scale(.72)}to{opacity:1;transform:none}}
.unit-marker{position:absolute;z-index:8;transform:translate(-50%,-50%);width:58px;height:26px;border-radius:50%;background:rgba(8,8,7,.65);border:2px dashed #897b55;box-shadow:0 0 12px #000;pointer-events:none}
.unit-marker.burrow{background:radial-gradient(ellipse,#4d3925 0 42%,transparent 45%);border-color:#6c5534}
.monster-popup,.spell-popup{position:fixed;z-index:120;width:286px;padding:15px;border:2px solid #706746;background:#151814;color:#e9e1c9;box-shadow:8px 8px 18px rgba(0,0,0,.72)}
.monster-popup.hidden,.spell-popup.hidden{display:none}.popup-head{display:grid;grid-template-columns:60px 1fr;gap:11px;align-items:center;padding-bottom:10px;border-bottom:1px solid #454332}.popup-art{width:60px;height:60px;object-fit:contain}.popup-icon{display:grid;place-items:center;width:60px;height:60px;font-size:40px;background:#24271f}.popup-name{font:700 20px Georgia,serif;color:#ddb65e}.popup-sub{margin-top:3px;color:#aaa694;font-size:11px}.popup-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:11px 0}.popup-stat{padding:7px;background:#20231e;color:#aaa694;font-size:10px}.popup-stat strong{float:right;color:#eee5cc}.popup-ability{padding:7px 0;border-top:1px solid #303329;font:12px/1.35 Georgia,serif}.popup-ability strong{color:#d7ad55}.popup-desc{margin:10px 0 0;color:#c7c1ac;font:13px/1.4 Georgia,serif}
.battle-title{position:absolute;z-index:25;top:10px;left:50%;transform:translateX(-50%);min-width:310px;padding:8px 18px;border:2px solid #454334;background:rgba(15,18,15,.9);text-align:center;color:#d8cba9;font:700 13px Georgia,serif}
.strike-extension{position:absolute;z-index:34;left:44px;bottom:263px;display:flex;gap:5px}.strike-extension.hidden{display:none}.strike-extra{width:48px;height:42px;border:2px solid #5b543b;background:#161a18;color:#786f5b;cursor:not-allowed;font:700 15px Georgia,serif}.strike-extra.charged{background:#1e6168;border-color:#b79b56;color:#f0daa1;cursor:pointer}.strike-extra.active{outline:2px solid #85dfd6}
.choice-overlay{position:fixed;inset:0;z-index:150;display:grid;place-items:center;background:rgba(5,7,6,.88);backdrop-filter:blur(5px)}.choice-overlay.hidden{display:none}.choice-panel{width:min(900px,calc(100vw - 34px));padding:25px;border:3px solid #5c573d;background:#171a15;box-shadow:10px 10px #080a08}.choice-panel h2{margin:0 0 5px;color:#ddb65e;font:700 28px Georgia,serif;text-align:center}.choice-panel>p,.choice-panel>.choice-heading>p{text-align:center;color:#aaa694;margin:0 0 20px}.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.choice-card{min-height:170px;padding:16px;border:2px solid #4e4935;background:#21241e;color:#e9e1ca;cursor:pointer;text-align:left}.choice-card:hover{border-color:#c19d52;background:#2b2d24}.choice-icon{font-size:33px}.choice-name{margin:9px 0 4px;color:#ddb65e;font:700 18px Georgia,serif}.choice-meta{color:#7fc6d1;font-size:10px;text-transform:uppercase}.choice-card p{font:13px/1.4 Georgia,serif;color:#c6c0aa}.campaign-reset{display:block;margin:17px auto 0}
.book-left{overflow-y:auto;padding-right:5px}.spell-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.spell{height:124px}.spell img,.spell-symbol{width:58px;height:58px}.spell-symbol{font-size:38px}.spell.locked{filter:grayscale(1)}
@media(max-height:800px){.strike-extension{bottom:205px}.battle-title{top:5px}.spell{height:110px}.spell img,.spell-symbol{width:48px;height:48px}}

/* Polished command wheel */
.radial-menu{width:286px;height:286px;left:18px;bottom:12px}
.radial-menu canvas{filter:drop-shadow(0 8px 10px rgba(0,0,0,.82))}
.radial-action{transition:background .14s,filter .14s,box-shadow .14s}
.radial-action:hover:not(:disabled){filter:brightness(1.3);background:rgba(85,210,220,.12)}
.radial-action:focus-visible{outline:2px solid #8ce2df;outline-offset:-5px}
.radial-action[data-strike]:disabled{background:rgba(5,7,7,.42)}
.radial-action[data-strike].charged{background:rgba(36,183,199,.12);box-shadow:inset 0 0 22px rgba(71,225,230,.25)}
.radial-action[data-strike].active{background:rgba(83,226,229,.25);filter:brightness(1.25)}
.radial-book:hover,.radial-end:hover{box-shadow:inset 0 0 20px rgba(98,219,220,.28)}
.strike-extension{bottom:292px;left:38px}

/* Battle identity now belongs to the HUD. */
.topbar .battle-title{position:static;transform:none;top:auto;left:auto;min-width:230px;max-width:390px;height:38px;display:flex;align-items:center;justify-content:center;padding:4px 14px;margin-left:2px;border:2px solid #3b3a2d;background:#1b1d18;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d8cba9;font:700 13px Georgia,serif}

.hex.predicted{background:#edbd56;filter:brightness(1.25) drop-shadow(0 0 9px rgba(237,189,86,.75));z-index:7}.hex.predicted::before{background:#655029}.hex.predicted::after{content:"✦";display:grid;place-items:center;inset:0;border:0;color:#fff0bb;font-size:28px;text-shadow:0 2px 3px #000}
.hex.path:last-child{filter:brightness(1.2)}

.spell-fx{position:absolute;z-index:38;pointer-events:none;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;animation:spellBurst .65s ease-out forwards}
.spell-projectile{font-size:31px;transition-duration:.4s;filter:drop-shadow(0 0 7px #7be0e0) drop-shadow(0 2px 2px #000)}
.spell-fx.magic{border:4px solid #a5f3fa;box-shadow:0 0 18px #42bfd6,inset 0 0 18px #42bfd6}.spell-fx.fire{border:5px solid #ffb14a;box-shadow:0 0 24px #e44124,inset 0 0 20px #f37b2d}.spell-fx.mind{border:4px dashed #8ce1dc;box-shadow:0 0 22px #3ba3a6}.spell-fx.earth{border:6px solid #c5a35a;border-radius:22%;box-shadow:0 0 18px #8e6330}.spell-fx.strike{border:5px solid #f0d78e;clip-path:polygon(0 43%,43% 43%,43% 0,57% 0,57% 43%,100% 43%,100% 57%,57% 57%,57% 100%,43% 100%,43% 57%,0 57%);transform:translate(-50%,-50%) rotate(45deg)}
.unit.dying{animation:unitDie .55s ease forwards}.battlefield.shake{animation:fieldShake .3s linear}
@keyframes spellBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}
@keyframes unitDie{to{opacity:0;transform:translate(-50%,-58%) scale(.55) rotate(-8deg)}}
@keyframes fieldShake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

@media(max-width:1050px){.topbar .battle-title{max-width:260px;font-size:11px}.radial-menu{width:240px;height:240px}.strike-extension{bottom:242px}}
@media(max-width:760px){.topbar .battle-title{display:none}.radial-menu{width:220px;height:220px}.strike-extension{bottom:220px}}

/* Illustrated battle HUD */
.app{grid-template-rows:66px minmax(0,1fr)}
.topbar{gap:8px;padding:7px 12px;border-bottom:3px solid #464331;background:#0e120f;box-shadow:0 4px 14px rgba(0,0,0,.65)}
.brand{width:154px}.brand-mark{width:31px;height:36px;background:#b54935;box-shadow:0 0 0 2px #251b16}.brand strong{font-size:22px;color:#f0e2c1;text-shadow:0 2px #000}.brand small{color:#827d68}
.hud-stat,.topbar .battle-title,.icon-btn{position:relative;height:48px;border:2px solid #5c543b;background:#151914;box-shadow:inset 0 0 0 2px #090c0a,0 2px 0 #080a08}
.hud-stat::before,.hud-stat::after,.topbar .battle-title::before,.topbar .battle-title::after{content:"";position:absolute;width:7px;height:7px;background:#9a7d42;transform:rotate(45deg);box-shadow:0 0 0 2px #211e16}
.hud-stat::before,.topbar .battle-title::before{left:-4px;top:-4px}.hud-stat::after,.topbar .battle-title::after{right:-4px;bottom:-4px}
.hud-stat{min-width:92px;padding:5px 12px}.hud-stat i{font-size:22px;color:#d7bb75;text-shadow:0 2px #000}.hud-stat span{color:#8f8b78;font-size:9px}.hud-stat b{font-size:16px;color:#efe2bf}
.topbar .battle-title{height:48px;min-width:270px;max-width:440px;padding:6px 20px;color:#e5d5ae;font-size:15px;background:#171a15}
.top-mana{gap:7px}.top-mana .gem{width:12px;height:12px}.icon-btn{width:48px;color:#d8bd79;font-size:24px}.icon-btn:hover{background:#25271f;border-color:#b08d4d}

#hero-figure{width:218px;height:244px;object-fit:contain;object-position:center bottom;transform-origin:50% 88%;filter:drop-shadow(0 10px 5px rgba(0,0,0,.82)) drop-shadow(0 0 2px #b6924d)}
.defender-platform{display:none;position:absolute;z-index:1;width:430px;height:auto;transform:translate(-50%,-100%);pointer-events:none;filter:drop-shadow(0 13px 8px rgba(0,0,0,.72))}
.battlefield[data-scene="fire-chasm"] .defender-platform{display:block}
#hero-figure.hero-striking{animation:heroStrikeRecoil .48s ease-out both}
#hero-figure.hero-throwing{animation:heroTrapThrow .58s ease-out both}
#hero-figure.hero-casting{animation:heroBookCast .72s ease-in-out both;filter:drop-shadow(0 10px 5px rgba(0,0,0,.82)) drop-shadow(0 0 10px rgba(68,221,235,.58))}
.hero-bolt{z-index:41;color:#f6d47a;font-size:20px;text-shadow:0 0 6px #ffbd47;transition:left .3s linear,top .3s linear;transform:translate(-50%,-50%)}
@keyframes heroStrikeRecoil{0%{transform:translate(-50%,-100%)}35%{transform:translate(-50%,-100%) translateX(-7px) rotate(-1deg)}100%{transform:translate(-50%,-100%)}}
@keyframes heroTrapThrow{0%{transform:translate(-50%,-100%) rotate(0)}45%{transform:translate(-50%,-100%) translateX(5px) rotate(1.5deg)}100%{transform:translate(-50%,-100%) rotate(0)}}
@keyframes heroBookCast{0%,100%{transform:translate(-50%,-100%);filter:brightness(1)}50%{transform:translate(-50%,-100%) translateY(-3px);filter:brightness(1.22)}}
#ballista-figure{z-index:10;width:252px;transform:translate(-50%,-100%) rotate(-11deg) scaleX(-1);transform-origin:56% 72%;filter:drop-shadow(0 11px 7px rgba(0,0,0,.88)) drop-shadow(0 0 2px #9f7b45)}
#ballista-figure.ballista-cocking{animation:ballistaCock .36s ease-out both}
#ballista-figure.ballista-firing{animation:ballistaFire .18s ease-out both}
@keyframes ballistaCock{from{transform:translate(-50%,-100%) translateX(0) rotate(-11deg) scaleX(-1)}to{transform:translate(-50%,-100%) translateX(-3px) rotate(-11deg) scale(-.99,1.01)}}
@keyframes ballistaFire{0%{transform:translate(-50%,-100%) translateX(0) rotate(-11deg) scaleX(-1)}45%{transform:translate(-50%,-100%) translateX(-9px) rotate(-12deg) scaleX(-1)}100%{transform:translate(-50%,-100%) translateX(0) rotate(-11deg) scaleX(-1)}}
.unit{width:138px;height:154px;transform:translate(-50%,-58%)}
.unit{--unit-scale:1.45}.unit.size-s{--unit-scale:1.25}.unit.size-m{--unit-scale:1.45}.unit.size-l{--unit-scale:1.65}.unit.size-xl{--unit-scale:1.9}
.unit.skeleton{--unit-scale:var(--skeleton-scale,1.4)}
.battlefield[data-character-art="animated"] .unit.skeleton{--unit-scale:1.25}
.unit.skeleton .unit-art{transform:scale(var(--unit-scale)) scale(var(--motion-scale,1))}
.battlefield[data-character-art="animated"][data-skeleton-flip="true"] .unit.skeleton .unit-art{transform:scaleX(-1) scale(var(--unit-scale)) scale(var(--motion-scale,1))}
.unit.edge-top .unit-art{translate:0 18px}
.unit.edge-top.skeleton .unit-art{translate:0 42px}
.battlefield[data-character-art="animated"] .unit img.unit-art{position:absolute;left:calc(5px + var(--motion-offset-x,0px));top:var(--motion-offset-y,var(--skeleton-offset-y,-1px));width:128px;height:128px;object-fit:contain;transform:scale(var(--unit-scale)) scale(var(--motion-scale,1));transform-origin:50% 88%}
.battlefield[data-character-art="animated"][data-skeleton-flip="true"] .unit.skeleton img.unit-art{transform:scaleX(-1) scale(var(--unit-scale)) scale(var(--motion-scale,1))}
.unit img{inset:-1px 9px 27px;width:120px;height:126px;transform:scale(var(--unit-scale));transform-origin:50% 88%;filter:drop-shadow(0 10px 6px rgba(0,0,0,.9))}
.unit .unit-walk-sprite,.unit .unit-hurt-sprite{position:absolute;left:calc(5px + var(--motion-offset-x,0px));top:var(--motion-offset-y,var(--skeleton-offset-y,-1px));width:128px;height:128px;background-repeat:no-repeat;background-size:640px 256px;transform:scale(var(--unit-scale)) scale(var(--motion-scale,1));transform-origin:50% 88%;filter:drop-shadow(0 10px 6px rgba(0,0,0,.9));pointer-events:none}
.battlefield[data-character-art="animated"] .unit.motion-flipped .unit-art{transform:scaleX(-1) scale(var(--unit-scale)) scale(var(--motion-scale,1))}
.unit .unit-walk-sprite{animation:unitMotion8Frames var(--motion-cycle,var(--skeleton-cycle,.96s)) steps(1,end) infinite}
.unit .unit-walk-sprite.frames-6{animation-name:unitMotion6Frames}
.unit .unit-walk-sprite.motion-crawl{animation-name:unitMotion8FramesFromFirst}
.unit .unit-hurt-sprite{animation:unitHurt6Frames .72s steps(1,end) both}
@keyframes unitMotion8Frames{0%,12.499%{background-position:-256px -128px}12.5%,24.999%{background-position:0 0}25%,37.499%{background-position:-128px 0}37.5%,49.999%{background-position:-256px 0}50%,62.499%{background-position:-384px 0}62.5%,74.999%{background-position:-512px 0}75%,87.499%{background-position:0 -128px}87.5%,100%{background-position:-128px -128px}}
@keyframes unitMotion8FramesFromFirst{0%,12.499%{background-position:0 0}12.5%,24.999%{background-position:-128px 0}25%,37.499%{background-position:-256px 0}37.5%,49.999%{background-position:-384px 0}50%,62.499%{background-position:-512px 0}62.5%,74.999%{background-position:0 -128px}75%,87.499%{background-position:-128px -128px}87.5%,100%{background-position:-256px -128px}}
@keyframes unitMotion6Frames{0%,16.665%{background-position:0 -128px}16.666%,33.332%{background-position:0 0}33.333%,49.999%{background-position:-128px 0}50%,66.665%{background-position:-256px 0}66.666%,83.332%{background-position:-384px 0}83.333%,100%{background-position:-512px 0}}
@keyframes unitHurt6Frames{0%,16.665%{background-position:0 0}16.666%,33.332%{background-position:-128px 0}33.333%,49.999%{background-position:-256px 0}50%,66.665%{background-position:-384px 0}66.666%,83.332%{background-position:-512px 0}83.333%,100%{background-position:0 -128px}}
.unit.hurt-pulse .unit-art{animation:unitFallbackHurt .42s ease-out both}
@keyframes unitFallbackHurt{0%,100%{filter:drop-shadow(0 10px 6px rgba(0,0,0,.9));translate:0 0}35%{filter:brightness(1.65) saturate(.55) drop-shadow(0 0 8px #d95b42);translate:9px -2px}}
.unit.brute img{inset:-7px 5px 25px;width:128px;height:134px;transform:scale(var(--unit-scale))}
.unit.harpy img{transform:scale(var(--unit-scale)) translateY(8px)}
.unit .status-row{z-index:11;left:31px;bottom:2px;transform:none}
.unit-health{position:absolute;z-index:32;width:96px;height:18px;transform:translateX(-50%);overflow:hidden;border:2px solid #0a0b09;background:#35130f;box-shadow:0 3px 0 #000;pointer-events:none}.unit-health i{position:absolute;z-index:0;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(#d24e39,#9e281e)}.unit-health b{position:absolute;z-index:1;inset:0;display:grid;place-items:center;color:#fff1d5;font:700 9px Georgia,serif;text-shadow:0 1px 2px #000}

/* Horizontal command deck inspired by the concept UI. */
.combat-dock.radial-menu{position:absolute;left:50%;bottom:8px;width:min(1080px,calc(100vw - 150px));height:auto;transform:translateX(-50%);filter:drop-shadow(0 10px 12px rgba(0,0,0,.88));z-index:44}
.command-row{height:84px;display:flex;align-items:stretch;justify-content:center;gap:7px;padding:6px 10px 8px;border:3px solid #504730;background:#101410;box-shadow:inset 0 0 0 2px #080b09}
.command-row::before,.quick-spells::before{content:"";position:absolute;inset:5px;pointer-events:none;border:1px solid rgba(193,157,83,.22)}
.radial-action.command-card{position:relative;inset:auto;width:106px;height:68px;display:grid;grid-template-rows:31px 18px 14px;place-items:center;padding:2px 4px;border:2px solid #74633e;clip-path:none;border-radius:0;background:linear-gradient(#272921,#111511);color:#eadbb4;box-shadow:inset 0 0 0 2px #0a0d0b;cursor:pointer;overflow:hidden}
.command-card::before{content:"";position:absolute;inset:3px;border:1px solid rgba(215,181,102,.18);pointer-events:none}.command-card:hover:not(:disabled){border-color:#d0a85a;background:linear-gradient(#3a3a2d,#171b16);filter:brightness(1.12)}
.command-card:disabled{filter:grayscale(.9) brightness(.48);cursor:not-allowed}.command-card.charged{border-color:#a98244;box-shadow:inset 0 0 12px rgba(52,185,197,.2)}.command-card.active{border-color:#75d8df;box-shadow:inset 0 0 18px rgba(53,205,216,.38),0 0 8px rgba(63,198,207,.55)}
.command-icon{font-size:28px;line-height:29px;color:#d6b671;text-shadow:0 2px #000}.strike-card:nth-child(2) .command-icon{font-size:31px}.strike-card:nth-child(3) .command-icon{filter:drop-shadow(0 0 4px #c99b45)}
.command-card strong{font:700 13px Georgia,serif;text-transform:uppercase;letter-spacing:0;color:#eee0bc}.command-card small{font:700 10px Georgia,serif;color:#52c5dc}.book-card .command-icon{font-size:30px}.end-card{width:126px!important;background:linear-gradient(#715334,#3d2d20)!important}.end-card .command-icon{font-size:30px}.end-card strong{font-size:12px}
.charge-orb{position:relative;width:104px;min-width:104px;height:104px;margin:-16px 6px -10px;align-self:center;border:7px solid #342f25;border-radius:50%;background:radial-gradient(circle at 45% 35%,#2b9dc1 0 12%,#176180 44%,#0a2735 70%);box-shadow:0 0 0 3px #a17e42,0 0 0 7px #161813,inset 0 0 16px #04131a;display:grid;place-items:center;z-index:3}
.charge-orb>span{position:absolute;top:17px;color:#9bd8e8;font:700 8px Georgia,serif;text-transform:uppercase}.charge-orb>strong{font:700 42px Georgia,serif;color:#e8eef0;text-shadow:0 3px #062230}.charge-pips{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);display:flex;gap:5px;padding:4px 8px;border:2px solid #5f5234;background:#111511}.charge-pips i{width:10px;height:10px;border:2px solid #75633a;transform:rotate(45deg);background:#111}.charge-pips i.full{background:#36b8dc;border-color:#a2eaff;box-shadow:0 0 6px #2aa0c1}
.quick-spells{position:relative;height:82px;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;padding:7px;border:3px solid #504730;border-top:0;background:#0f1310;box-shadow:inset 0 0 0 2px #080b09}
.quick-spell{position:relative;min-width:0;height:68px;display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:1fr 18px;padding:4px 5px;border:2px solid #5e5137;background:#171b17;color:#eadfbe;cursor:pointer;overflow:hidden;text-align:left}.quick-spell::after{content:"";position:absolute;inset:2px;border:1px solid rgba(213,176,91,.16);pointer-events:none}.quick-spell:hover:not(:disabled),.quick-spell.active{border-color:#6ed1d7;background:#1e3532;box-shadow:inset 0 0 14px rgba(62,191,197,.22)}
.quick-spell img{grid-row:1/3;width:46px;height:56px;align-self:center;object-fit:contain;filter:drop-shadow(0 3px 2px #000)}.quick-spell strong{align-self:end;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ebddba;font:700 10px Georgia,serif;text-transform:uppercase}.quick-spell small{color:#4fc4dc;font:700 10px Georgia,serif}.quick-spell.locked{filter:grayscale(1) brightness(.36)}.quick-spell:disabled{cursor:not-allowed}.quick-cd{position:absolute;right:4px;top:4px;display:none;width:21px;height:21px;border-radius:50%;place-items:center;background:#121512;border:2px solid #be944b;color:#f0ddb2;font:700 10px Georgia,serif}.quick-cd.visible{display:grid}
.strike-extension{left:50%;bottom:183px;transform:translateX(-50%)}

@media(max-width:1180px){.combat-dock.radial-menu{width:min(920px,calc(100vw - 90px))}.quick-spell{grid-template-columns:38px minmax(0,1fr)}.quick-spell img{width:38px}.command-card{width:92px!important}.topbar .battle-title{min-width:220px;max-width:300px;font-size:12px}.brand{width:130px}.brand small{display:none}}
@media(max-height:800px){.combat-dock.radial-menu{bottom:4px}.command-row{height:62px;padding-top:5px}.radial-action.command-card{height:49px;grid-template-rows:21px 15px 10px}.command-icon{font-size:20px;line-height:20px}.command-card strong{font-size:11px}.command-card small{font-size:8px}.charge-orb{width:78px;min-width:78px;height:78px;margin:-14px 3px -9px}.charge-orb>span{top:11px}.charge-orb>strong{font-size:31px}.charge-pips{bottom:-19px;padding:3px 6px}.charge-pips i{width:8px;height:8px}.quick-spells{height:56px;padding:5px}.quick-spell{height:43px;grid-template-columns:29px minmax(0,1fr);grid-template-rows:1fr 13px;padding:2px 4px}.quick-spell img{width:28px;height:37px}.quick-spell strong{font-size:7px}.quick-spell small{font-size:8px}.strike-extension{bottom:126px}}

/* Deckbuilder hand */
.combat-dock.radial-menu{width:min(1040px,calc(100vw - 130px));bottom:0;filter:drop-shadow(0 10px 15px rgba(0,0,0,.92))}
.command-row{width:660px;height:76px;margin:0 auto;padding:6px 10px;border-bottom:0}
.command-row .command-card{width:92px}.command-row .end-card{width:116px!important}.charge-orb{width:92px;min-width:92px;height:92px;margin:-14px 4px -8px}
.card-zone{position:relative;height:176px;display:grid;grid-template-columns:82px minmax(0,1fr) 82px;align-items:end;gap:8px;padding:8px 12px 4px;border:3px solid #504730;background:rgba(11,14,11,.94);box-shadow:inset 0 0 0 2px #070907}
.card-zone::before{content:"";position:absolute;inset:5px;border:1px solid rgba(202,164,81,.2);pointer-events:none}
.card-hand{height:168px;display:flex;align-items:flex-end;justify-content:center;padding:0 7px;overflow:visible}
.game-card{--card-angle:0deg;--card-y:0px;position:relative;width:132px;height:184px;flex:0 0 132px;margin:0 -7px;padding:0;border:4px solid #776342;border-radius:7px;background:#171b18;color:#eee3c7;box-shadow:inset 0 0 0 2px #090b09,0 7px 8px rgba(0,0,0,.72);transform:translateY(var(--card-y)) rotate(var(--card-angle));transform-origin:50% 115%;transition:transform .16s ease,filter .16s,border-color .16s;cursor:pointer;overflow:hidden;text-align:center}
.game-card::before{content:"";position:absolute;inset:4px;z-index:1;border:1px solid rgba(236,206,137,.24);border-radius:3px;pointer-events:none}.game-card:hover:not(:disabled){z-index:30!important;transform:translateY(-62px) rotate(0) scale(1.12);border-color:#e0b75f;filter:brightness(1.12)}.game-card.selected{z-index:25!important;transform:translateY(-45px) rotate(0) scale(1.06);border-color:#82e1e4;box-shadow:inset 0 0 16px rgba(63,207,211,.35),0 0 12px rgba(70,207,214,.55)}.game-card:disabled{filter:grayscale(.75) brightness(.46);cursor:not-allowed}
.game-card.battle{border-color:#8b5138;background:#211713}.game-card.mind{border-color:#39788a;background:#122027}.game-card.obstacle{border-color:#6f7942;background:#182015}
.card-cost{position:absolute;z-index:5;left:-5px;top:-6px;width:38px;height:38px;display:grid;place-items:center;border:4px solid #a68848;border-radius:50%;background:radial-gradient(circle at 38% 30%,#68d8ec,#16789b 48%,#082c3b 72%);color:white;font:700 21px Georgia,serif;text-shadow:0 2px #062431;box-shadow:0 2px 5px #000}
.card-name{position:absolute;z-index:3;left:18px;right:5px;top:7px;height:27px;display:grid;place-items:center;padding-left:9px;color:#f2e2bb;font:700 11px/1.05 Georgia,serif;text-transform:uppercase;text-shadow:0 2px #000}
.card-art{position:absolute;left:8px;right:8px;top:36px;height:82px;display:grid;place-items:center;border:2px solid #51462f;background:rgba(5,8,7,.62);overflow:hidden}.card-art img{width:94%;height:94%;object-fit:contain;filter:drop-shadow(0 4px 3px #000)}
.card-text{position:absolute;left:8px;right:8px;top:121px;min-height:43px;display:grid;place-items:center;padding:3px 4px;color:#d5ceb9;font:10px/1.2 Georgia,serif}.card-type{position:absolute;left:0;right:0;bottom:4px;color:#b7a77c;font:700 8px Georgia,serif;text-transform:uppercase}
.pile-button{position:relative;width:72px;height:96px;margin-bottom:5px;border:3px solid #655738;border-radius:5px;background:#171b17;color:#eadcb8;box-shadow:5px 5px 0 #080a08,inset 0 0 0 2px #090c09;cursor:default}.pile-button::before,.pile-button::after{content:"";position:absolute;inset:-7px 5px 5px -7px;z-index:-1;border:2px solid #4a402c;background:#101310}.pile-button::after{inset:-12px 10px 10px -12px}.pile-button span{display:block;font-size:34px;color:#9f8650}.pile-button strong{display:block;color:#55c5dc;font:700 22px Georgia,serif}.pile-button small{color:#aaa083;font:700 9px Georgia,serif;text-transform:uppercase}.discard-pile{transform:rotate(2deg)}
.deck-card{cursor:default}.deck-count{position:absolute;right:5px;top:5px;z-index:3;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#242018;color:#e9ce8a;font:700 12px Georgia,serif}
.choice-overlay[data-mode="cards"] .choice-panel{width:min(920px,calc(100vw - 34px));padding:26px 28px 34px}.choice-overlay[data-mode="cards"] .choice-grid{grid-template-columns:repeat(3,218px);justify-content:center;gap:24px;margin-top:24px}.choice-card.card-reward.game-card{width:218px;height:304px;min-height:0;flex:0 0 218px;margin:0;padding:0;text-align:center;transform:none;transform-origin:50% 100%;overflow:hidden}.choice-card.card-reward.game-card:hover,.choice-card.card-reward.game-card:focus-visible{z-index:2;transform:translateY(-9px) scale(1.035);border-color:#e0b75f;filter:brightness(1.1);outline:0}.card-reward .card-cost{left:-6px;top:-7px;width:50px;height:50px;font-size:27px}.card-reward .card-name{left:29px;right:8px;top:11px;height:35px;font-size:15px}.card-reward .card-art{left:12px;right:12px;top:52px;height:151px;border-width:2px}.card-reward .card-art img{width:91%;height:91%}.card-reward .card-text{left:13px;right:13px;top:210px;min-height:61px;padding:5px 8px;font-size:14px;line-height:1.25}.card-reward .card-type{bottom:8px;font-size:10px}.choice-overlay[data-mode="cards"] .choice-grid[data-count="2"]{grid-template-columns:repeat(2,218px)}
@media(max-height:760px){.choice-overlay[data-mode="cards"] .choice-panel{padding:18px 22px 23px}.choice-overlay[data-mode="cards"] .choice-grid{grid-template-columns:repeat(3,174px);gap:18px;margin-top:15px}.choice-card.card-reward.game-card{width:174px;height:243px;flex-basis:174px}.card-reward .card-cost{width:40px;height:40px;font-size:21px}.card-reward .card-name{left:24px;top:8px;height:28px;font-size:12px}.card-reward .card-art{top:42px;height:117px}.card-reward .card-text{top:165px;min-height:49px;font-size:11px}.card-reward .card-type{bottom:6px;font-size:8px}.choice-overlay[data-mode="cards"] .choice-grid[data-count="2"]{grid-template-columns:repeat(2,174px)}}

@media(max-height:800px){.combat-dock.radial-menu{width:min(900px,calc(100vw - 110px))}.command-row{width:590px;height:56px}.card-zone{height:137px;grid-template-columns:65px minmax(0,1fr) 65px;padding-top:4px}.card-hand{height:130px}.game-card{width:108px;height:148px;flex-basis:108px;margin:0 -5px;border-width:3px}.game-card:hover:not(:disabled){transform:translateY(-50px) rotate(0) scale(1.1)}.game-card.selected{transform:translateY(-38px) rotate(0) scale(1.05)}.card-cost{width:31px;height:31px;font-size:17px}.card-name{left:14px;top:5px;height:22px;font-size:9px}.card-art{top:29px;height:62px}.card-text{top:94px;min-height:38px;font-size:8px}.card-type{font-size:7px}.pile-button{width:58px;height:78px}.pile-button span{font-size:27px}.pile-button strong{font-size:18px}.charge-orb{width:72px;min-width:72px;height:72px}.strike-extension{bottom:198px}}

/* Card-first combat layout */
.topbar{position:relative}.topbar .battle-title{position:absolute;left:50%;top:7px;width:min(440px,38vw);min-width:0;transform:translateX(-50%);margin:0;z-index:2}.settings-wrap{position:relative;margin-left:auto;z-index:5}.settings-toggle{font-family:Georgia,serif;font-size:25px}.settings-menu{position:absolute;right:0;top:55px;width:230px;padding:7px;border:3px solid #5e5136;background:#101410;box-shadow:8px 8px 16px rgba(0,0,0,.72),inset 0 0 0 2px #080b09}.settings-menu.hidden{display:none}.settings-menu :is(button,a){width:100%;min-height:48px;display:grid;grid-template-columns:32px 1fr;align-items:center;padding:7px 10px;border:1px solid #413b2b;background:#191d18;color:#e8dab8;text-align:left;text-decoration:none;cursor:pointer}.settings-menu :is(button,a)+:is(button,a){margin-top:5px}.settings-menu :is(button,a):hover{border-color:#b18d4c;background:#262920}.settings-menu :is(button,a)>span{font:700 13px Georgia,serif}.settings-menu :is(button,a)>small{grid-column:2;color:#7e7d6d;font-size:9px;text-transform:uppercase}
.combat-dock.radial-menu{width:min(1000px,calc(100vw - 390px));bottom:0}.card-zone{height:176px}
.energy-orb{position:absolute;z-index:46;left:max(26px,calc(50% - 610px));bottom:26px;width:116px;height:116px;display:grid;place-items:center;border:7px solid #342f25;border-radius:50%;background:radial-gradient(circle at 42% 34%,#44b9d7 0 10%,#176583 44%,#092a38 72%);box-shadow:0 0 0 3px #a17e42,0 0 0 7px #111511,inset 0 0 19px #03151d,0 7px 12px #000;color:#edf4f3}.energy-mark{position:absolute;top:12px;font-size:22px;color:#d9f5ff;text-shadow:0 2px #082735}.energy-orb>strong{margin-top:9px;font:700 27px Georgia,serif;text-shadow:0 3px #062432}.energy-orb>small{position:absolute;bottom:20px;color:#9cd8e6;font:700 8px Georgia,serif;text-transform:uppercase}.energy-orb .top-mana{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);display:flex;gap:5px;padding:5px 8px;border:2px solid #594c33;background:#111511}.energy-orb .gem{width:9px;height:9px}
.floating-end-turn{position:absolute;z-index:46;right:20px;bottom:31px;width:160px;height:72px;display:grid;grid-template-columns:45px 1fr;align-items:center;padding:7px 12px;border:4px solid #68573a;background:#63472f;color:#f0dfb7;box-shadow:inset 0 0 0 2px #211812,6px 6px 0 #080a08;cursor:pointer}.floating-end-turn::before{content:"";position:absolute;inset:4px;border:1px solid rgba(242,210,143,.35)}.floating-end-turn span{font-size:31px;text-shadow:0 3px #17100c}.floating-end-turn strong{font:700 13px/1.15 Georgia,serif;text-transform:uppercase}.floating-end-turn:hover:not(:disabled){border-color:#c29a53;background:#7a5738}.floating-end-turn:disabled{filter:grayscale(1) brightness(.5);cursor:not-allowed}
.special-card{background:#171b18}.hero-strike-card{border-color:#b68d4a;background:#201b13}.hero-strike-card .card-art{color:#e3c276;background:radial-gradient(circle,#493b24,#11130f 70%)}.hero-strike-card .card-art img{width:82%;height:82%;object-fit:contain}.ballista-card{border-color:#82683e;background:#1c1a14}.ballista-card .card-art{background:#161712}.ballista-card .card-art img{width:92%;height:88%;object-fit:contain}.special-art{font-size:55px;text-shadow:0 4px #000}.card-level{position:absolute;z-index:5;right:4px;top:32px;padding:3px 5px;border:1px solid #8d7547;background:#151711;color:#e3cb91;font:700 8px Georgia,serif;text-transform:uppercase}.special-card .card-text strong{color:#f2c96f;font-size:12px}

@media(max-width:1100px){.topbar .battle-title{width:34vw;font-size:11px}.combat-dock.radial-menu{width:calc(100vw - 300px)}.energy-orb{left:18px}.floating-end-turn{right:14px;width:136px}}
@media(max-height:800px){.combat-dock.radial-menu{width:min(900px,calc(100vw - 310px))}.card-zone{height:137px}.energy-orb{width:94px;height:94px;bottom:21px}.energy-mark{top:8px;font-size:18px}.energy-orb>strong{font-size:23px}.energy-orb>small{bottom:15px}.floating-end-turn{bottom:23px;height:61px;width:142px}.floating-end-turn span{font-size:26px}.floating-end-turn strong{font-size:11px}.card-level{top:27px;font-size:7px}.special-art{font-size:43px}}

/* Five cards are drawn from the combat deck. */
.combat-dock.radial-menu{width:min(780px,calc(100vw - 390px))}
.energy-orb{left:auto;right:clamp(80px,5vw,96px);bottom:clamp(142px,16vh,178px)}
.floating-end-turn{right:clamp(48px,2.5vw,56px);bottom:clamp(76px,11.5vh,132px)}
@media(max-height:800px){.combat-dock.radial-menu{width:min(760px,calc(100vw - 310px))}.energy-orb{left:auto;right:78px;bottom:112px}.floating-end-turn{right:clamp(48px,4vw,56px);bottom:clamp(62px,10vh,76px)}}

/* Illustrated arena and translucent tactical grid. */
.battle-shell,.battlefield{
  background:#10130f url('assets/backgrounds/cavern-board-v1.png') center/cover no-repeat;
}
.battlefield[data-scene="bone-court"]{background-image:url('assets/backgrounds/scenes/bone-court.jpg')}
.battlefield[data-scene="fire-chasm"]{background-image:url('assets/backgrounds/scenes/fire-chasm.jpg')}
.battlefield[data-scene="glass-wastes"]{background-image:url('assets/backgrounds/scenes/glass-wastes.jpg')}
.battlefield[data-scene="burnt-roots"]{background-image:url('assets/backgrounds/scenes/burnt-roots.jpg')}
.battlefield[data-scene="azure-bastion"]{background-image:url('assets/backgrounds/scenes/azure-bastion.jpg')}
.battlefield[data-scene="ashen-crown"]{background-image:url('assets/backgrounds/scenes/ashen-crown.png')}
.battlefield::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(12,17,13,.18);
}
.battlefield::after{
  background:linear-gradient(90deg,rgba(4,7,5,.42),transparent 17%,transparent 82%,rgba(4,7,5,.34));
}
.battlefield[data-scene="ashen-crown"]::before{background:rgba(10,8,7,.24);transition:background .45s ease,box-shadow .45s ease}
.battlefield[data-scene="ashen-crown"].cataclysm-active::before{background:rgba(58,12,5,.18);box-shadow:inset 0 0 120px rgba(218,47,18,.24)}
.hex{
  width:107.4px;height:124px;
  background:rgba(43,57,39,.28);
  filter:none;
}
.battlefield .hex::before{
  content:"";inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116' preserveAspectRatio='none'%3E%3Cpolygon points='50,1 99,29 99,87 50,115 1,87 1,29' fill='none' stroke='%23bfb26b' stroke-opacity='.58' stroke-width='1.35'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.hex::after{inset:0;border:0}
.hex:hover{filter:brightness(1.16)}
.hex.hero-cell{background:rgba(112,102,58,.48)}
.hex.danger{background:rgba(145,48,38,.68)}
.hex.path,.hex.preview-line,.hex.preview-area,.hex.target-cell,.hex.predicted{background:rgba(74,132,119,.48)}

/* The hand floats directly over the arena; piles and cards provide their own frames. */
.combat-dock.radial-menu{width:min(1120px,calc(100vw - 460px));bottom:16px;filter:none;transition:transform .18s ease}
.card-zone{
  height:218px;grid-template-columns:88px minmax(0,1fr) 88px;gap:13px;
  padding:8px 4px 0;border:0;background:transparent;box-shadow:none;
}
.card-zone::before{display:none}
.card-hand{height:211px;padding:0 4px}
.combat-dock.radial-menu,.card-zone,.card-hand{pointer-events:none}
.game-card,.pile-button{pointer-events:auto}
.pile-button{
  width:78px;height:106px;margin-bottom:8px;border-color:#8d7648;
  background:linear-gradient(145deg,rgba(35,38,30,.96),rgba(12,16,13,.96));
  box-shadow:6px 7px 0 rgba(3,5,4,.72),inset 0 0 0 2px #090c09,0 0 18px rgba(0,0,0,.45);
}
.pile-button::before,.pile-button::after{background:rgba(14,18,14,.9)}

/* Large illustrated card families. */
.game-card{
  --frame:#a8894f;--frame-deep:#4a3820;--wash:#332819;
  width:152px;height:212px;flex-basis:152px;margin:0 -9px;border:5px solid var(--frame);
  border-radius:9px;
  background:
    radial-gradient(circle at 50% 23%,color-mix(in srgb,var(--wash) 72%,transparent),transparent 48%),
    linear-gradient(155deg,#26261f 0%,#121612 50%,#090d0b 100%);
  box-shadow:
    inset 0 0 0 2px #090b09,
    inset 0 0 26px color-mix(in srgb,var(--wash) 58%,transparent),
    0 9px 10px rgba(0,0,0,.76),0 0 0 1px #090b09;
}
.game-card::before{
  inset:5px;border:2px solid color-mix(in srgb,var(--frame) 52%,transparent);border-radius:4px;
  background:
    linear-gradient(135deg,var(--frame) 0 8px,transparent 8px) top left/18px 18px no-repeat,
    linear-gradient(225deg,var(--frame) 0 8px,transparent 8px) top right/18px 18px no-repeat,
    linear-gradient(45deg,var(--frame) 0 8px,transparent 8px) bottom left/18px 18px no-repeat,
    linear-gradient(315deg,var(--frame) 0 8px,transparent 8px) bottom right/18px 18px no-repeat;
  opacity:.82;
}
.game-card::after{
  content:"";position:absolute;z-index:2;left:15px;right:15px;top:35px;height:2px;
  background:linear-gradient(90deg,transparent,var(--frame),transparent);opacity:.7;pointer-events:none;
}
.game-card.battle{--frame:#b86745;--frame-deep:#572c20;--wash:#5d2418}
.game-card.control{--frame:#4e9ca8;--frame-deep:#214850;--wash:#153945}
.game-card.mind{--frame:#56a9bc;--frame-deep:#214a57;--wash:#123b49}
.game-card.obstacle{--frame:#8c9b52;--frame-deep:#3d4a25;--wash:#314018}
.game-card.special-card{--frame:#c6a25b;--frame-deep:#5a4222;--wash:#58401d}
.game-card.ballista-card{--frame:#aa8750;--frame-deep:#4c3922;--wash:#42331d}
.game-card:hover:not(:disabled){transform:translateY(-70px) rotate(0) scale(1.1);border-color:#f0d58e}
.game-card.selected{transform:translateY(-53px) rotate(0) scale(1.06)}
.card-cost{
  left:-7px;top:-8px;width:43px;height:43px;border:4px solid #d0ad61;
  background:radial-gradient(circle at 37% 27%,#8cecff,#1a8aae 48%,#073448 75%);
  font-size:23px;box-shadow:0 3px 7px #000,0 0 0 2px #171711;
}
.card-name{
  left:24px;right:8px;top:6px;height:30px;padding-left:4px;
  color:#f4e6c3;font-size:12px;text-shadow:0 2px 2px #000;
}
.card-art{
  left:11px;right:11px;top:40px;height:94px;border:3px solid var(--frame-deep);
  background:
    radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--wash) 90%,#161a15),#080b09 73%);
  box-shadow:inset 0 0 18px #050706,0 3px 0 rgba(0,0,0,.55);
}
.card-art img{width:96%;height:96%;filter:drop-shadow(0 5px 4px #000) saturate(1.08)}
.card-text{
  left:12px;right:12px;top:138px;min-height:50px;padding:4px 5px;
  color:#ded5bd;font-size:10.5px;line-height:1.22;
}
.card-type{
  left:12px;right:12px;bottom:6px;padding-top:4px;border-top:1px solid color-mix(in srgb,var(--frame) 48%,transparent);
  color:color-mix(in srgb,var(--frame) 80%,#f2e5c1);font-size:8px;
}
.card-level{right:7px;top:39px;border-color:var(--frame);background:#171711;color:#ead49a}
.special-art{font-size:62px;color:#e6c36d}

@media(max-height:800px){
  .hex{width:86.6px;height:100px}
  .combat-dock.radial-menu{width:min(850px,calc(100vw - 340px));bottom:16px}
  body.action-cursor .combat-dock.radial-menu{transform:translate(-50%,112px)}
  body.action-cursor .game-card:not(.selected){pointer-events:none}
  .card-zone{height:164px;grid-template-columns:68px minmax(0,1fr) 68px;gap:8px}
  .card-hand{height:158px}
  .game-card{width:120px;height:163px;flex-basis:120px;margin:0 -6px;border-width:4px}
  .game-card:hover:not(:disabled){transform:translateY(-52px) rotate(0) scale(1.08)}
  .game-card.selected{transform:translateY(-40px) rotate(0) scale(1.04)}
  .card-cost{width:33px;height:33px;font-size:17px}
  .card-name{left:17px;top:4px;height:24px;font-size:9px}
  .card-art{left:8px;right:8px;top:31px;height:70px;border-width:2px}
  .card-text{top:104px;min-height:40px;font-size:8px}
  .card-type{bottom:3px;font-size:7px}
  .card-level{top:29px}
  .special-art{font-size:46px}
  .pile-button{width:62px;height:84px}
}

/* Turn commands stay distinct from the player's hand. */
.turn-actions{
  position:absolute;z-index:46;right:clamp(48px,3vw,64px);bottom:clamp(24px,3vh,36px);
  display:flex;align-items:center;gap:14px;
}
.turn-actions .floating-end-turn{
  position:relative;right:auto;bottom:auto;
  width:88px;height:88px;display:grid;grid-template-columns:1fr;place-items:center;padding:0;
  border:5px solid #8d7043;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#856443 0 12%,#513923 48%,#211810 78%);
  box-shadow:inset 0 0 0 3px #1a120d,inset 0 0 18px rgba(0,0,0,.62),0 0 0 3px #11140f,0 8px 14px rgba(0,0,0,.78);
}
.floating-end-turn::before{inset:7px;border:1px solid rgba(239,207,137,.42);border-radius:50%}
.floating-end-turn::after{
  content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 11px);transform:translate(-50%,5px);
  width:max-content;padding:7px 11px;border:2px solid #685a3d;
  background:rgba(15,18,14,.96);color:#eadbb8;
  font:700 11px Georgia,serif;text-transform:uppercase;
  box-shadow:4px 5px 0 rgba(0,0,0,.55);opacity:0;
  transition:opacity .13s,transform .13s;pointer-events:none;
}
.floating-end-turn:hover::after,.floating-end-turn:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.floating-end-turn img{width:68%;height:68%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 2px rgba(0,0,0,.55))}
.floating-end-turn.wait-turn img{width:61%;height:61%}
.floating-end-turn strong{display:none}
.floating-end-turn:hover:not(:disabled){border-color:#d2ad64;background:radial-gradient(circle at 38% 30%,#a47b4c 0 12%,#664627 49%,#271a10 78%);transform:translateY(-2px)}
.floating-end-turn:focus-visible{outline:2px solid #edd18d;outline-offset:4px}
@media(max-height:800px){
  .turn-actions{right:48px;bottom:18px;gap:11px}
  .turn-actions .floating-end-turn{width:72px;height:72px}
}

/* Enemy intentions and active effects share one readable HUD row. */
.unit-intent-row{
  position:absolute;z-index:33;transform:translateX(-50%);display:flex;align-items:center;
  gap:4px;pointer-events:none;filter:drop-shadow(0 3px 0 #050705);
}
.unit-intent{
  position:relative;width:34px;height:34px;display:grid;place-items:center;padding:0;border-radius:50%;
  border:3px solid #63583d;background:rgba(12,15,12,.97);color:#eee1bf;
  box-shadow:0 0 10px rgba(0,0,0,.7);font:700 17px Georgia,serif;
  pointer-events:none;
}
.unit-intent.danger{border-color:#c95b43;color:#ffb49c;background:#311713;animation:intentPulse 1.15s ease-in-out infinite}
.unit-intent.controlled{border-color:#4da8ae;color:#a7e8e5}
.unit-intent.special{border-color:#ac8b48;color:#efd78e}
.unit-intent.movement-walk::before,.unit-intent.movement-flight::before{content:"";position:absolute;inset:6px;background:currentColor;mask-position:center;mask-repeat:no-repeat;mask-size:contain}
.unit-intent.movement-walk::before{mask-image:url('assets/ui/movement/footprints.svg')}.unit-intent.movement-flight::before{inset:5px;mask-image:url('assets/ui/movement/wings.svg')}
@keyframes intentPulse{50%{filter:brightness(1.35);transform:translateY(-2px)}}
.unit-effect{position:relative;width:25px;height:25px;display:grid;place-items:center;border:2px solid #625c44;border-radius:50%;background:#111510;color:#e9dfc1;font:normal 13px/1 sans-serif;box-shadow:0 0 8px rgba(0,0,0,.72)}
.unit-effect.burning{border-color:#c75a31;background:#371810;color:#ffad55;box-shadow:0 0 9px rgba(239,79,25,.65)}
.unit-effect.controlled{border-color:#4b9ca4;background:#13282a;color:#a9e7e7}.unit-effect.danger{border-color:#b64e3c;background:#301512;color:#ffb49c}.unit-effect.special{border-color:#a48444;color:#ecd28a}
.unit-effect>b{position:absolute;right:-5px;bottom:-5px;min-width:14px;height:14px;display:grid;place-items:center;padding:0 2px;border:1px solid #bba46c;border-radius:8px;background:#090b09;color:#fff0c8;font:700 9px Georgia,serif}
.popup-intent{display:grid;grid-template-columns:38px 1fr;gap:9px;align-items:center;margin:10px 0;padding:8px;border:1px solid #554c35;background:#20231d}.popup-intent>span{display:grid;place-items:center;width:36px;height:36px;border:2px solid #7b6840;border-radius:50%;color:#efd78e;font:700 20px Georgia,serif}.popup-intent small{display:block;color:#8f8a77;font-size:9px;text-transform:uppercase}.popup-intent strong{display:block;margin-top:2px;color:#eee2c4;font:700 12px Georgia,serif}.popup-intent.danger{border-color:#8f4436;background:#2b1714}.popup-intent.controlled{border-color:#39777b;background:#142426}
.popup-intent.movement-walk>span,.popup-intent.movement-flight>span{position:relative}.popup-intent.movement-walk>span::before,.popup-intent.movement-flight>span::before{content:"";position:absolute;inset:7px;background:currentColor;mask-position:center;mask-repeat:no-repeat;mask-size:contain}.popup-intent.movement-walk>span::before{mask-image:url('assets/ui/movement/footprints.svg')}.popup-intent.movement-flight>span::before{inset:6px;mask-image:url('assets/ui/movement/wings.svg')}
.popup-effects{margin:9px 0;padding:8px;border:1px solid #3f4133;background:#1b1e19}.popup-effects>small{display:block;margin-bottom:6px;color:#8f8a77;font-size:9px;text-transform:uppercase}.popup-effect{display:grid;grid-template-columns:24px 1fr auto;gap:7px;align-items:center;padding:5px 0;border-top:1px solid #303329;color:#d8d1b9;font:12px Georgia,serif}.popup-effect:first-of-type{border-top:0}.popup-effect i{font-style:normal;text-align:center}.popup-effect strong{color:#9a9684;font-size:10px}.popup-effect.burning i{color:#ff9b43}.popup-effect.controlled i{color:#8edbdc}

/* Lianas are a placed trap rather than an immediate targeted status. */
.hex.lianas::after{
  content:"";inset:5px;border:0;
  background:url('assets/ui/spells/lianas.png') center/105% 105% no-repeat;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.72));
}
.hex.forcefield{background:#5bdce4;filter:drop-shadow(0 0 8px rgba(75,221,235,.75))}
.hex.forcefield::before{background:rgba(20,83,101,.78)}
.hex.forcefield::after{
  content:"";inset:7px;border:2px solid rgba(167,249,255,.92);
  background:radial-gradient(circle at 50% 45%,rgba(105,231,246,.32),rgba(20,103,132,.12) 55%,rgba(6,29,43,.5));
  box-shadow:inset 0 0 13px rgba(96,235,247,.78),0 0 10px rgba(75,218,238,.68);
  animation:forceFieldPulse 1.15s ease-in-out infinite alternate;
}
.hex.forcefield-cracked::after{
  border-color:rgba(204,251,255,.95);
  background:
    linear-gradient(108deg,transparent 0 45%,rgba(224,254,255,.96) 47% 51%,transparent 53%) 48% 23%/31% 31% no-repeat,
    linear-gradient(72deg,transparent 0 45%,rgba(197,249,255,.94) 47% 51%,transparent 53%) 53% 45%/29% 29% no-repeat,
    linear-gradient(116deg,transparent 0 45%,rgba(157,237,247,.92) 47% 51%,transparent 53%) 48% 69%/34% 34% no-repeat,
    linear-gradient(38deg,transparent 0 45%,rgba(180,244,251,.88) 47% 51%,transparent 53%) 36% 47%/27% 24% no-repeat,
    linear-gradient(146deg,transparent 0 45%,rgba(151,232,243,.86) 47% 51%,transparent 53%) 66% 59%/25% 22% no-repeat,
    radial-gradient(circle at 50% 45%,rgba(105,231,246,.24),rgba(20,103,132,.09) 55%,rgba(6,29,43,.55));
  box-shadow:inset 0 0 9px rgba(173,248,255,.9),0 0 13px rgba(75,218,238,.78);
  animation:forceFieldCracked .32s steps(2,end) infinite alternate;
}
.hex.glass-spikes::after{
  content:"";inset:1px;border:0;display:block;
  background:url('assets/terrain/spikes-v1.png') center/112% 112% no-repeat;
  filter:hue-rotate(154deg) saturate(.55) brightness(1.45) drop-shadow(0 7px 4px rgba(0,0,0,.85)) drop-shadow(0 0 8px rgba(120,207,230,.72));
  animation:glassSpikeRise .3s ease-out;
}
.hex.featured-trap{z-index:6;animation:featuredTrapPulse 1.25s ease-in-out infinite alternate}
@keyframes featuredTrapPulse{to{filter:brightness(1.22) drop-shadow(0 0 10px rgba(231,184,82,.7))}}
.hex.burning-lianas::after{
  content:"";inset:2px;border:0;
  background:url('assets/terrain/fire-v3.png') center bottom/92% 92% no-repeat,url('assets/ui/spells/lianas.png') center/105% 105% no-repeat;
  filter:drop-shadow(0 0 10px rgba(244,91,31,.9)) drop-shadow(0 6px 4px rgba(0,0,0,.78));
  animation:burningRoots .58s ease-in-out infinite alternate;
}
.hex.wildfire::after{
  content:"";inset:5px 10px 2px;border:0;display:block;
  background:url('assets/terrain/fire-v3.png') center bottom/105% 105% no-repeat;
  filter:drop-shadow(0 0 11px rgba(255,92,24,.95)) drop-shadow(0 7px 4px rgba(0,0,0,.8));
  animation:wildfirePulse .52s ease-in-out infinite alternate;
}
.hex.wildfire{background:rgba(129,39,20,.35)}
@keyframes wildfirePulse{to{filter:brightness(1.18) drop-shadow(0 0 17px rgba(255,125,36,.98)) drop-shadow(0 7px 4px rgba(0,0,0,.8));transform:translateY(-2px) scale(1.02)}}
.unit.cinderWarden img{transform:scale(1.9);filter:drop-shadow(0 11px 7px rgba(0,0,0,.94)) drop-shadow(0 0 9px rgba(225,73,26,.55))}
.unit-health.cinderWarden{width:122px;border-color:#1b0d08;box-shadow:0 3px 0 #000,0 0 9px rgba(230,73,28,.5)}

.cataclysm-hud{position:relative;height:48px;min-width:132px;display:grid;grid-template-columns:34px 1fr;align-items:center;padding:5px 11px;border:2px solid #68543a;background:#191813;box-shadow:inset 0 0 0 2px #090c0a,0 2px 0 #080a08;color:#e7d8b5}
.cataclysm-hud.hidden{display:none}.cataclysm-hud i{font-size:25px;color:#d48a42;font-style:normal;text-shadow:0 0 8px rgba(221,82,26,.55)}.cataclysm-hud span{display:block;color:#a99d82;font-size:8px;text-transform:uppercase}.cataclysm-hud b{display:block;color:#f0d7a5;font:700 16px Georgia,serif}.cataclysm-hud.active{border-color:#a7462e;background:#2a130e;animation:cataclysmHud .75s ease-in-out infinite alternate}.cataclysm-hud.active i,.cataclysm-hud.active b{color:#ffb05c}
@keyframes cataclysmHud{to{box-shadow:inset 0 0 15px rgba(207,47,20,.36),0 0 12px rgba(207,47,20,.32)}}
@keyframes glassSpikeRise{from{opacity:0;transform:translateY(15px) scale(.7)}to{opacity:1;transform:none}}
@keyframes burningRoots{to{filter:brightness(1.2) drop-shadow(0 0 15px rgba(255,136,35,.95)) drop-shadow(0 6px 4px rgba(0,0,0,.78))}}
.hex.collision-cell{z-index:8;filter:brightness(1.45) drop-shadow(0 0 14px rgba(136,244,255,.95))}
.hex.path.rebound-path{background:rgba(61,151,177,.66)}
.hex.path.rebound-path::before{background:rgba(25,76,94,.82)}
.hex.path.rebound-path:not(.predicted)::after{color:#d3fbff;text-shadow:0 0 8px #31cde3,0 2px 3px #07100d}
@keyframes forceFieldPulse{to{filter:brightness(1.28);box-shadow:inset 0 0 20px rgba(151,250,255,.92),0 0 17px rgba(75,218,238,.9)}}
@keyframes forceFieldCracked{to{filter:brightness(1.35) opacity(.82)}}

/* Summoned decoy and directional movement preview. */
.hex.avatar{background:rgba(42,164,177,.48);filter:drop-shadow(0 0 10px rgba(73,222,235,.72))}
.hex.avatar::before{background:rgba(21,67,70,.62)}
.hex.avatar::after{
  content:"";inset:13px;border:2px solid rgba(142,244,247,.72);border-radius:50%;
  background:radial-gradient(circle,rgba(92,231,238,.23),transparent 64%);
  box-shadow:inset 0 0 16px rgba(83,225,235,.45),0 0 12px rgba(53,200,214,.5);
  animation:avatarRune 1.25s ease-in-out infinite alternate;
}
.avatar-unit{
  position:absolute;width:150px;height:174px;transform:translate(-50%,-100%);
  pointer-events:none;filter:drop-shadow(0 9px 5px rgba(0,0,0,.82)) drop-shadow(0 0 9px rgba(83,231,238,.72));
  animation:avatarFloat 1.7s ease-in-out infinite;
}
.avatar-unit img{width:100%;height:100%;object-fit:contain}
.hex.path[class*="trail-"]:not(.predicted)::after{
  content:attr(data-trail);display:grid;place-items:center;inset:0;border:0;
  color:#b8f4e7;font:700 22px Georgia,serif;text-shadow:0 2px 3px #07100d;
  transform:none;filter:drop-shadow(0 0 4px rgba(122,231,217,.45));
}
.hex.path-hazard{filter:brightness(1.28) drop-shadow(0 0 10px rgba(117,226,213,.78))}
.hex.path.trail-walk:not(.predicted)::after,.hex.path.trail-flight:not(.predicted)::after{content:"";inset:15px 24px;background:#c6f5eb;mask-position:center;mask-repeat:no-repeat;mask-size:contain;transform:rotate(var(--trail-angle,0deg));filter:drop-shadow(0 0 4px rgba(122,231,217,.62))}
.hex.path.trail-walk:not(.predicted)::after{mask-image:url('assets/ui/movement/footprints.svg')}.hex.path.trail-flight:not(.predicted)::after{inset:17px 20px;mask-image:url('assets/ui/movement/wings.svg');filter:drop-shadow(0 0 5px rgba(148,235,229,.7))}
.hex.path.trail-burrow:not(.predicted)::after{font-size:25px;color:#b99767;text-shadow:0 0 7px #4b3321,0 2px 3px #07100d}
.hex.path.trail-ethereal:not(.predicted)::after{font-size:27px;color:#9ce7e5;text-shadow:0 0 8px #3ba4a7,0 2px 3px #07100d}
@keyframes avatarRune{to{filter:brightness(1.35);transform:scale(.94)}}
@keyframes avatarFloat{50%{transform:translate(-50%,calc(-100% - 5px));filter:drop-shadow(0 13px 7px rgba(0,0,0,.76)) drop-shadow(0 0 14px rgba(106,240,246,.88))}}

/* The battlefield fills the screen; only the logo and utility icons float above it. */
.app{display:block;height:100%}
.battle-layout{position:absolute;inset:0;height:auto}
.topbar{
  position:absolute;z-index:72;inset:0 0 auto;height:70px;display:flex;align-items:flex-start;
  padding:11px 15px;border:0;background:transparent;box-shadow:none;pointer-events:none;
}
.topbar>*{pointer-events:auto}
.topbar .brand{width:auto;filter:drop-shadow(0 3px 3px rgba(0,0,0,.9))}
.topbar .brand-mark{width:27px;height:32px;box-shadow:0 0 0 2px rgba(25,17,13,.8)}
.topbar .brand strong{font-size:21px}.topbar .brand small{color:#b5ac92}
.hud-data,.hud-stat,.topbar .battle-title,.cataclysm-hud{display:none!important}
.top-actions{margin-left:auto;margin-right:38px;display:flex;align-items:center;gap:3px}
.top-actions .settings-wrap{margin:0}
.top-icon{
  width:56px;height:56px;display:grid;place-items:center;padding:0;border:0;background:transparent;
  cursor:pointer;transition:filter .14s,transform .14s;
}
.top-icon img{width:100%;height:100%;object-fit:contain;pointer-events:none;transform:scale(1.18);filter:drop-shadow(0 4px 3px rgba(0,0,0,.86))}
.top-icon:hover,.top-icon:focus-visible{filter:brightness(1.22);transform:translateY(-1px)}
.top-icon[aria-expanded="true"]{filter:brightness(1.28) drop-shadow(0 0 7px rgba(205,164,81,.48));transform:translateY(-1px)}
.top-icon:focus-visible{outline:0}
.top-actions .settings-menu{top:57px}

/* Settings and battle history share one right-side utility drawer. */
.battle-sidebar,.top-actions .settings-menu{
  position:fixed;z-index:180;top:0;right:0;bottom:0;width:330px;margin:0;padding:0;
  border:0;border-left:2px solid #75633f;
  background:linear-gradient(180deg,#171a16 0,#10130f 100%);
  color:#e9dfc5;box-shadow:-18px 0 34px rgba(0,0,0,.72),inset 2px 0 rgba(13,15,12,.9);
}
.top-actions .settings-menu{display:flex;flex-direction:column}
.top-actions .settings-menu.hidden{display:none}
.drawer-heading{
  flex:0 0 auto;min-height:84px;display:flex;align-items:center;justify-content:space-between;
  padding:17px 17px 15px 21px;border-bottom:1px solid #5a5037;
  background:linear-gradient(180deg,rgba(45,45,34,.64),rgba(20,23,18,.25));
  box-shadow:inset 0 -2px #090b09;
}
.drawer-heading small{display:block;color:#b48d4b;font:700 9px Georgia,serif;text-transform:uppercase}
.drawer-heading h2{margin:3px 0 0;color:#efdcae;font:700 23px Georgia,serif}
.drawer-close{
  width:38px;height:38px;padding:0;border:1px solid #5f553c;background:#171a15;color:#cdbb90;
  font:28px/34px Georgia,serif;cursor:pointer;box-shadow:inset 0 0 0 2px #0b0d0b;
}
.top-actions .settings-menu .drawer-close{
  display:block;flex:0 0 38px;width:38px;min-height:38px;margin:0;padding:0;
  border:1px solid #5f553c;background:#171a15;color:#cdbb90;text-align:center;box-shadow:inset 0 0 0 2px #0b0d0b;
}
.drawer-close:hover,.drawer-close:focus-visible{border-color:#bd9450;color:#fff0c7;background:#24271f;outline:0}
.drawer-body{min-height:0;padding:17px 18px 20px;overflow:auto}
.settings-actions{display:flex;flex-direction:column;gap:7px}
.top-actions .settings-menu .settings-actions :is(button,a){
  width:100%;min-height:58px;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;
  margin:0;padding:8px 11px;border:1px solid #494431;background:#1b1f19;color:#e8dab8;
  text-align:left;text-decoration:none;cursor:pointer;box-shadow:inset 0 0 0 2px #11140f;
}
.top-actions .settings-menu .settings-actions :is(button,a):hover{border-color:#a98549;background:#292c22}
.top-actions .settings-menu .settings-actions :is(button,a)>span{font:700 13px Georgia,serif}
.top-actions .settings-menu .settings-actions :is(button,a)>small{grid-column:2;color:#858372;font-size:9px;text-transform:uppercase}
.battle-sidebar{overflow:hidden;transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
.battle-layout.logs-open .battle-sidebar{transform:translateX(0);visibility:visible;transition-delay:0s}
.battle-sidebar .sidebar-content{height:calc(100% - 84px);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .15s ease}
.battle-layout.logs-open .battle-sidebar .sidebar-content{opacity:1;pointer-events:auto}
.battle-sidebar .side-section>h2{font-size:13px;text-transform:uppercase;color:#b99b60}
.battle-sidebar .enemy-row{border:1px solid #34372d;background:#1b1f1a;box-shadow:inset 0 0 0 1px #11140f}
.battle-sidebar .battle-log{padding-top:0}
@media(max-width:720px){.battle-sidebar,.top-actions .settings-menu{width:min(330px,calc(100vw - 34px))}}

.mission-overlay{position:fixed;z-index:145;inset:0;display:grid;place-items:center;padding:22px;background:rgba(6,8,7,.78);backdrop-filter:blur(4px)}
.mission-overlay.hidden{display:none}
.mission-panel{position:relative;width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 38px);overflow:auto;padding:26px 30px 28px;border:2px solid #675d40;background:#141814;color:#e9dfc5;box-shadow:0 18px 40px rgba(0,0,0,.76),inset 0 0 0 2px #090c0a}
.mission-close{position:absolute;right:13px;top:12px;width:36px;height:36px;border:0;background:transparent;color:#b7aa89;font:28px/1 Georgia,serif;cursor:pointer}.mission-close:hover{color:#f0d58e}
.mission-heading{display:flex;align-items:center;gap:13px;padding-right:40px}.mission-heading img{width:48px;height:48px;object-fit:contain}.mission-heading small,.mission-details small{display:block;color:#c08b47;font:700 9px Georgia,serif;text-transform:uppercase}.mission-heading h2{margin:2px 0 0;color:#efdcae;font:700 25px Georgia,serif;letter-spacing:0}
.mission-story{margin:20px 0;color:#c8c1ad;font:15px/1.5 Georgia,serif}
.mission-details{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:17px 0;border-top:1px solid #464331;border-bottom:1px solid #464331}.mission-details section{min-width:0}.mission-details p{margin:6px 0 0;color:#e5dcc3;font:14px/1.45 Georgia,serif}
.mission-panel>h3{margin:19px 0 10px;color:#c9a45c;font:700 13px Georgia,serif;text-transform:uppercase}
.mission-enemies{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:7px}
.mission-enemies article{min-width:0;height:58px;display:grid;grid-template-columns:48px 1fr;align-items:center;gap:8px;padding:4px 7px;border:1px solid #393b30;background:#1b1f1a}
.mission-enemies img{width:48px;height:48px;object-fit:contain}.mission-enemies strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e7d8b5;font:700 12px Georgia,serif}.mission-enemies span{display:block;margin-top:3px;color:#8f8d7d;font-size:9px}

.round-announcer{position:fixed;z-index:96;left:50%;top:78px;width:min(390px,calc(100vw - 38px));padding:9px 20px 11px;border-top:1px solid rgba(205,174,105,.65);border-bottom:1px solid rgba(205,174,105,.65);background:linear-gradient(90deg,transparent,rgba(12,15,12,.88) 14%,rgba(12,15,12,.88) 86%,transparent);text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,-9px);transition:opacity .28s,transform .28s}
.round-announcer.show{opacity:1;transform:translate(-50%,0)}
.round-announcer small{display:block;color:#a99c7c;font:700 8px Georgia,serif;text-transform:uppercase}.round-announcer strong{display:block;margin-top:2px;color:#f0dca9;font:700 22px Georgia,serif}.round-announcer span{display:block;min-height:11px;margin-top:2px;color:#b7b09c;font-size:10px}.round-announcer.danger{border-color:rgba(211,78,42,.72);background:linear-gradient(90deg,transparent,rgba(47,15,10,.9) 14%,rgba(47,15,10,.9) 86%,transparent)}.round-announcer.danger strong{color:#ffb067}
@media(max-width:720px){.mission-panel{padding:22px 18px}.mission-details{grid-template-columns:1fr;gap:14px}.round-announcer{top:70px}.topbar{padding:8px 10px}.top-actions{margin-right:32px}.top-icon{width:48px;height:48px}}

/* Hero skill choice is staged as an in-world decision rather than a modal. */
.choice-hero{display:none}
.choice-overlay[data-mode="skills"]{
  background:rgba(5,8,7,.82);backdrop-filter:blur(7px);
}
.choice-overlay[data-mode="skills"] .choice-panel{
  position:relative;width:min(1160px,100vw);height:min(760px,100vh);padding:0;
  border:0;background:linear-gradient(180deg,rgba(8,11,9,.62),rgba(8,11,9,.1) 28%,rgba(8,11,9,.72));
  box-shadow:none;overflow:hidden;
}
.choice-overlay[data-mode="skills"] .choice-panel::before{
  content:"";position:absolute;left:50%;bottom:-310px;width:620px;height:620px;transform:translateX(-50%);
  border:3px solid rgba(161,130,69,.48);border-radius:50%;box-shadow:inset 0 0 0 14px rgba(10,14,11,.55),inset 0 0 0 17px rgba(90,77,48,.38);
}
.choice-overlay[data-mode="skills"] .choice-heading{
  position:absolute;z-index:8;left:50%;top:24px;transform:translateX(-50%);width:min(510px,70vw);padding:14px 30px 12px;
  border-block:2px solid #74613d;background:rgba(12,16,13,.88);text-align:center;
}
.choice-overlay[data-mode="skills"] .choice-heading::before,.choice-overlay[data-mode="skills"] .choice-heading::after{
  content:"◆";position:absolute;top:50%;transform:translateY(-50%);color:#a88545;font-size:15px;
}
.choice-overlay[data-mode="skills"] .choice-heading::before{left:-8px}.choice-overlay[data-mode="skills"] .choice-heading::after{right:-8px}
.choice-overlay[data-mode="skills"] .choice-heading h2{margin:0;color:#e2bd68;font:700 28px Georgia,serif;letter-spacing:0;text-transform:uppercase}
.choice-overlay[data-mode="skills"] .choice-heading p{margin:5px 0 0;color:#aaa797;font:700 11px Georgia,serif;letter-spacing:0;text-transform:uppercase}
.choice-overlay[data-mode="skills"] .choice-hero{
  position:absolute;display:block;z-index:6;left:50%;bottom:0;width:360px;height:455px;transform:translateX(-50%);pointer-events:none;
}
.choice-overlay[data-mode="skills"] .choice-hero img{
  position:absolute;z-index:2;left:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;
  transform-origin:50% 88%;transition:transform .28s ease,filter .28s ease;filter:drop-shadow(0 13px 7px rgba(0,0,0,.88));
}
.choice-overlay[data-mode="skills"] .choice-hero-rune{
  position:absolute;z-index:1;left:50%;bottom:-30px;width:390px;height:142px;transform:translateX(-50%);
  border:3px solid rgba(159,128,65,.55);border-radius:50%;box-shadow:inset 0 0 0 12px rgba(10,13,10,.62),0 0 22px rgba(0,0,0,.8);
}
.choice-panel[data-facing="left"] .choice-hero img{transform:scaleX(-1) rotate(-2deg);filter:drop-shadow(0 13px 7px rgba(0,0,0,.88)) drop-shadow(0 0 10px rgba(213,168,78,.34))}
.choice-panel[data-facing="right"] .choice-hero img{transform:rotate(2deg);filter:drop-shadow(0 13px 7px rgba(0,0,0,.88)) drop-shadow(0 0 10px rgba(76,192,207,.38))}
.choice-overlay[data-mode="skills"] .choice-grid{
  position:absolute;z-index:5;left:50%;top:176px;width:920px;height:336px;transform:translateX(-50%);
  display:grid;align-items:start;justify-content:space-between;gap:28px;padding:0;
}
.choice-overlay[data-mode="skills"] .choice-grid[data-count="2"]{grid-template-columns:320px 320px}
.choice-overlay[data-mode="skills"] .choice-grid[data-count="3"]{top:190px;width:1080px;grid-template-columns:repeat(3,290px)}
.choice-overlay[data-mode="skills"] .choice-grid[data-count="3"] .choice-card:nth-child(2){transform:translateY(-64px)}
.choice-overlay[data-mode="skills"] .choice-grid[data-count="3"] .choice-card:nth-child(2):hover,.choice-overlay[data-mode="skills"] .choice-grid[data-count="3"] .choice-card:nth-child(2):focus-visible{transform:translateY(-74px)}
.choice-overlay[data-mode="skills"] .choice-card{
  --skill:#c8a252;position:relative;min-height:316px;padding:142px 22px 44px;border:3px solid #5b5037;
  background:linear-gradient(180deg,rgba(29,33,27,.96),rgba(12,16,13,.98));color:#e8dec5;text-align:center;
  box-shadow:0 12px 20px rgba(0,0,0,.55);clip-path:polygon(12% 0,88% 0,100% 11%,100% 100%,0 100%,0 11%);
  transition:transform .18s ease,border-color .18s ease,filter .18s ease;overflow:visible;
}
.choice-overlay[data-mode="skills"] .choice-card[data-tone="arcane"]{--skill:#62cbd4}.choice-overlay[data-mode="skills"] .choice-card[data-tone="war"]{--skill:#cf6547}.choice-overlay[data-mode="skills"] .choice-card[data-tone="knowledge"]{--skill:#d2aa55}.choice-overlay[data-mode="skills"] .choice-card[data-tone="ward"]{--skill:#8fa46d}
.choice-overlay[data-mode="skills"] .choice-card:hover,.choice-overlay[data-mode="skills"] .choice-card:focus-visible{transform:translateY(-10px);border-color:var(--skill);filter:brightness(1.08);outline:0}
.choice-overlay[data-mode="skills"] .choice-card.chosen{border-color:var(--skill);filter:brightness(1.3);animation:skillChosen .42s ease both}
.choice-overlay[data-mode="skills"] .choice-arch{
  position:absolute;left:50%;top:-1px;width:188px;height:132px;transform:translateX(-50%);display:grid;place-items:center;
  border:3px solid #5f5338;border-top-color:var(--skill);background:linear-gradient(180deg,rgba(38,43,35,.98),rgba(11,15,12,.98));
  clip-path:polygon(50% 0,88% 19%,100% 60%,83% 100%,17% 100%,0 60%,12% 19%);
}
.choice-overlay[data-mode="skills"] .choice-icon{color:var(--skill);font:700 72px/1 Georgia,serif;text-shadow:0 4px 3px #000;transition:transform .2s ease}
.choice-overlay[data-mode="skills"] .choice-skill-art{width:138px;height:118px;object-fit:contain;filter:drop-shadow(0 5px 3px rgba(0,0,0,.8));transition:transform .2s ease}
.choice-overlay[data-mode="skills"] .choice-card:hover :is(.choice-icon,.choice-skill-art),.choice-overlay[data-mode="skills"] .choice-card:focus-visible :is(.choice-icon,.choice-skill-art){transform:scale(1.08)}
.choice-overlay[data-mode="skills"] .choice-name{margin:0 0 7px;color:#e7c678;font:700 23px Georgia,serif;letter-spacing:0;text-transform:uppercase}
.choice-overlay[data-mode="skills"] .choice-meta{color:var(--skill);font:700 11px Georgia,serif;letter-spacing:0;text-transform:uppercase}
.choice-overlay[data-mode="skills"] .choice-card p{min-height:48px;margin:15px 0 0;color:#c7c1ae;font:15px/1.35 Georgia,serif}
.choice-overlay[data-mode="skills"] .choice-seal{
  position:absolute;left:50%;bottom:-28px;width:58px;height:58px;transform:translateX(-50%);display:grid;place-items:center;
  border:3px solid #594d34;border-radius:50%;background:#111511;color:var(--skill);font:700 23px Georgia,serif;box-shadow:0 5px 8px rgba(0,0,0,.7);
}
@keyframes skillChosen{50%{transform:translateY(-14px) scale(1.03)}100%{transform:translateY(-8px) scale(1.01)}}
@media(max-width:980px){
  .choice-overlay[data-mode="skills"] .choice-grid{width:720px}.choice-overlay[data-mode="skills"] .choice-grid[data-count="2"]{grid-template-columns:250px 250px}.choice-overlay[data-mode="skills"] .choice-grid[data-count="3"]{width:760px;grid-template-columns:repeat(3,220px);gap:18px}.choice-overlay[data-mode="skills"] .choice-card{min-height:300px;padding-inline:14px}.choice-overlay[data-mode="skills"] .choice-hero{width:280px;height:380px}
}
@media(max-height:720px){
  .choice-overlay[data-mode="skills"] .choice-heading{top:10px}.choice-overlay[data-mode="skills"] .choice-grid{top:125px;height:290px}.choice-overlay[data-mode="skills"] .choice-grid[data-count="3"]{top:150px}.choice-overlay[data-mode="skills"] .choice-card{min-height:278px;padding-top:116px}.choice-overlay[data-mode="skills"] .choice-arch{width:154px;height:108px}.choice-overlay[data-mode="skills"] :is(.choice-icon,.choice-skill-art){width:106px;height:96px;font-size:58px}.choice-overlay[data-mode="skills"] .choice-hero{width:270px;height:350px}
}

/* Illustrated deck covers and mana glass keep live values in the DOM. */
.pile-button{
  border:0;background:transparent;box-shadow:none;overflow:visible;
  isolation:isolate;
}
.pile-button::before,.pile-button::after{
  inset:8px 4px 2px;border:2px solid #4e432d;border-radius:5px;background:#101310;
  transform:translate(-5px,-5px);
}
.pile-button::after{transform:translate(-9px,-9px)}
.pile-cover{
  position:absolute;z-index:1;left:50%;top:50%;width:142%;height:142%;
  transform:translate(-50%,-50%);object-fit:contain;pointer-events:none;
  filter:drop-shadow(4px 6px 3px rgba(0,0,0,.8));
}
.pile-button strong{
  position:absolute;z-index:3;right:-3px;bottom:3px;min-width:28px;height:28px;
  display:grid;place-items:center;padding:0 5px;border:2px solid #806a3c;border-radius:50%;
  background:#101511;color:#65d3e6;font:700 17px Georgia,serif;
  box-shadow:0 3px 5px rgba(0,0,0,.8);
}
.pile-button small{
  position:absolute;z-index:3;left:50%;bottom:-16px;transform:translateX(-50%);
  color:#d3c39b;font:700 9px Georgia,serif;text-shadow:0 2px #000;
}
.discard-pile{transform:rotate(2deg)}

.energy-orb{
  border:0;background:transparent;box-shadow:none;isolation:isolate;
}
.energy-orb-art{
  position:absolute;z-index:0;left:50%;top:50%;width:140%;height:140%;
  transform:translate(-50%,-50%);object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 8px 6px rgba(0,0,0,.78));
}
.energy-mark,.energy-orb>strong,.energy-orb>small,.energy-orb .top-mana{z-index:2}
.energy-mark{top:18px;color:#f1ce69;text-shadow:0 2px 2px #082735}
.energy-orb>strong{margin-top:8px;font-size:27px}
.energy-orb>small{bottom:22px;color:#bce9f0}
.energy-orb .top-mana{bottom:-17px;border-color:#806a3c;background:#111511}
@media(max-height:800px){
  .pile-cover{width:140%;height:140%}
  .pile-button strong{right:-2px;bottom:1px;min-width:24px;height:24px;font-size:15px}
  .pile-button small{bottom:-14px;font-size:8px}
  .energy-mark{top:14px}.energy-orb>small{bottom:17px}.energy-orb .top-mana{bottom:-15px}
}

/* The hex surface owns the mask; terrain art is free to cross its boundary. */
.hex{
  --hex-fill:rgba(43,57,39,.28);
  clip-path:none!important;background:transparent!important;overflow:visible;
  pointer-events:none;
}
.battlefield .hex::before{
  inset:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116' preserveAspectRatio='none'%3E%3Cpolygon points='50,1 99,29 99,87 50,115 1,87 1,29' fill='none' stroke='%23bfb26b' stroke-opacity='.58' stroke-width='1.35'/%3E%3C/svg%3E") center/100% 100% no-repeat,
    var(--hex-fill)!important;
  pointer-events:auto;
}
.hex::after{clip-path:none!important;pointer-events:none}
.hex.hero-cell{--hex-fill:rgba(112,102,58,.48)}
.hex.danger{--hex-fill:rgba(145,48,38,.68)}
.hex:is(.path,.preview-line,.preview-area,.target-cell,.predicted){--hex-fill:rgba(74,132,119,.48)}
.hex.preview-area{--hex-fill:rgba(124,92,48,.58)}
.hex.predicted{--hex-fill:rgba(126,101,41,.72)}
.hex.forcefield{--hex-fill:rgba(20,83,101,.78)}
.hex.wildfire{--hex-fill:rgba(129,39,20,.35)}
.hex.path.rebound-path{--hex-fill:rgba(61,151,177,.66)}
.hex.avatar{--hex-fill:rgba(21,67,70,.62)}

.hex.obstacle::after{inset:-18px -20px -12px;background-size:contain;transform:translateY(-8px)}
.hex.mine::after{inset:-8px;background-size:88% 88%}
.hex.sands::after{inset:0;background-size:80% auto}
.hex:is(.fire,.firewall,.wildfire)::after{inset:-17px -18px -7px;background-size:contain;background-position:center calc(100% - 5px)}
.hex:is(.spikes,.glass-spikes)::after{inset:-15px -18px -7px;background-size:contain}
.hex:is(.lianas,.burning-lianas)::after{inset:-12px -15px;background-size:contain}

/* Selected card language: Classic Relic. */
.card-zone{height:232px;grid-template-columns:92px minmax(0,1fr) 92px;gap:13px}
.card-hand{height:225px}
.game-card{
  --relic:#806b43;--relic-light:#b09359;--category:#99743e;--category-deep:#3f301c;--art-wash:#332819;
  width:154px;height:226px;flex-basis:154px;margin:0 -8px;border:3px solid var(--relic);border-radius:2px;
  overflow:visible;
  background:linear-gradient(155deg,#22231d,#0b0e0c 72%);
  box-shadow:inset 0 0 0 1px #090b09,inset 0 0 0 2px #332d20,0 9px 11px rgba(0,0,0,.78),0 0 0 1px #070907;
  border-color:var(--relic)!important;
}
.game-card::before{
  inset:-1px;z-index:1;border:0;border-radius:1px;opacity:1;
  background:
    linear-gradient(135deg,var(--relic-light) 0 5px,var(--relic) 5px 9px,transparent 9px) top left/14px 14px no-repeat,
    linear-gradient(225deg,var(--relic-light) 0 5px,var(--relic) 5px 9px,transparent 9px) top right/14px 14px no-repeat,
    linear-gradient(45deg,var(--relic-light) 0 5px,var(--relic) 5px 9px,transparent 9px) bottom left/14px 14px no-repeat,
    linear-gradient(315deg,var(--relic-light) 0 5px,var(--relic) 5px 9px,transparent 9px) bottom right/14px 14px no-repeat;
  box-shadow:inset 0 0 0 1px rgba(218,191,128,.24);pointer-events:none;
}
.game-card::after{display:none}
.game-card>*{z-index:3}
.game-card.battle{--category:#a64b32;--category-deep:#522418;--art-wash:#542015}
.game-card.control{--category:#43838d;--category-deep:#1d4249;--art-wash:#15353d}
.game-card.mind{--category:#4b8995;--category-deep:#214852;--art-wash:#173943}
.game-card.obstacle{--category:#747f43;--category-deep:#343d21;--art-wash:#2d3819}
.game-card.special-card{--category:#a6803f;--category-deep:#4b381e;--art-wash:#4c381d}
.game-card.ballista-card{--category:#9b7841;--category-deep:#45331d;--art-wash:#3e301c}
.card-name{
  left:8px;right:8px;top:7px;height:31px;padding:0 7px 0 25px;
  border:1px solid var(--category-deep);border-bottom-color:var(--category);
  background:linear-gradient(180deg,color-mix(in srgb,var(--category) 76%,#312a1d),var(--category-deep));
  color:#f3e3bb;font:700 12px/1.05 Georgia,serif;text-shadow:0 2px 2px #000;
  box-shadow:inset 0 0 0 1px rgba(235,211,151,.12);
}
.card-cost{
  z-index:8;
  left:-5px;top:-6px;width:39px;height:39px;border:3px solid var(--relic);
  background:radial-gradient(circle at 37% 27%,#9ceeff,#238caf 46%,#0a3b50 74%);
  color:#f7f1dc;font-size:21px;box-shadow:0 3px 6px #000,0 0 0 2px #151712,inset 0 0 7px #062a39;
}
.card-art{
  left:9px;right:9px;top:42px;height:99px;border:1px solid #51442d;
  background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--art-wash) 88%,#161a15),#080a08 74%);
  box-shadow:inset 0 0 18px #040604,0 2px 0 #050605;
}
.card-art img{width:93%;height:93%;object-fit:contain;filter:drop-shadow(0 5px 4px #000) saturate(1.06)}
.card-text{
  left:10px;right:10px;top:145px;bottom:31px;min-height:0;height:auto;padding:5px 7px;
  border:1px solid #4e432d;background:rgba(16,17,14,.9);
  color:#ded4bc;font:10.2px/1.18 Georgia,serif;overflow:hidden;
}
.card-text.medium{font-size:9px;line-height:1.15}.card-text.long{font-size:7.7px;line-height:1.12}
.special-card .card-text strong{color:#f2c96f;font-size:inherit}
.card-type{
  left:8px;right:8px;bottom:7px;height:21px;display:grid;place-items:center;padding:0;
  border:1px solid var(--category-deep);border-top-color:var(--category);
  background:linear-gradient(180deg,var(--category-deep),color-mix(in srgb,var(--category-deep) 78%,#0b0d0a));
  color:color-mix(in srgb,var(--category) 72%,#f1ddb1);font:700 8px Georgia,serif;
}
.card-level{right:8px;top:43px;border-color:var(--relic);background:#171711;color:#ead49a}
.hero-strike-card .card-art,.ballista-card .card-art{background:radial-gradient(circle at 50% 45%,var(--art-wash),#080a08 74%)}
.hero-strike-card .card-art img{width:76%;height:76%}
.game-card:hover:not(:disabled){transform:translateY(-76px) rotate(0) scale(1.09);border-color:var(--relic-light)!important}
.game-card.selected{transform:translateY(-58px) rotate(0) scale(1.06);border-color:#9de6e7!important}

@media(max-height:800px){
  .combat-dock.radial-menu{width:min(900px,calc(100vw - 340px))}
  .card-zone{height:214px;grid-template-columns:78px minmax(0,1fr) 78px;gap:9px}
  .card-hand{height:207px}
  .game-card{width:142px;height:208px;flex-basis:142px;margin:0 -7px;border-width:2px}
  .game-card:hover:not(:disabled){transform:translateY(-66px) rotate(0) scale(1.08)}
  .game-card.selected{transform:translateY(-49px) rotate(0) scale(1.04)}
  .card-cost{left:-4px;top:-5px;width:35px;height:35px;border-width:3px;font-size:18px}
  .card-name{left:7px;right:7px;top:6px;height:29px;padding-left:24px;font-size:10.5px}
  .card-art{left:8px;right:8px;top:38px;height:88px}
  .card-text{left:8px;right:8px;top:129px;bottom:28px;padding:4px 5px;font-size:8.5px;line-height:1.14}
  .card-text.medium{font-size:7.6px;line-height:1.1}.card-text.long{font-size:6.7px;line-height:1.07}
  .card-type{left:7px;right:7px;bottom:6px;height:21px;font-size:7px}
  .card-level{right:7px;top:38px;font-size:6.5px}
  .pile-button{width:72px;height:98px}
}

/* Unified fantasy turn controls. */
.turn-actions .floating-end-turn{
  width:84px;height:84px;border:3px solid #8a7043;
  background:radial-gradient(circle at 42% 34%,#59452c 0 9%,#302318 48%,#15100d 78%);
  box-shadow:inset 0 0 0 2px #15100c,inset 0 0 15px rgba(0,0,0,.58),0 0 0 2px #10130f,0 7px 12px rgba(0,0,0,.76);
}
.turn-actions .floating-end-turn::before{inset:6px;border-color:rgba(220,188,119,.34)}
.turn-actions .floating-end-turn img{width:76%;height:76%;object-fit:contain}
.turn-actions .wait-turn img{width:74%;height:74%}
.turn-actions .wait-turn{border-color:#746d4b;box-shadow:inset 0 0 0 2px #15100c,inset 0 0 14px rgba(33,170,181,.12),0 0 0 2px #10130f,0 7px 12px rgba(0,0,0,.76)}
.turn-actions .end-turn{border-color:#9b7741}
@media(max-height:800px){.turn-actions .floating-end-turn{width:70px;height:70px}}

/* Full-screen battle outcome scene. */
.result{
  position:fixed;z-index:200;inset:0;display:block;overflow:hidden;
  background:#090b09 var(--result-scene) center/cover no-repeat;backdrop-filter:none;
}
.result::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,6,.97) 0 36%,rgba(5,7,6,.68) 58%,rgba(5,7,6,.88)),linear-gradient(0deg,rgba(3,4,3,.95),transparent 58%)}
.result::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 150px #020302;pointer-events:none}
.result-panel{position:relative;width:100%;height:100%;padding:0;border:0;background:none;text-align:left;box-shadow:none}
.result-copy{position:absolute;z-index:4;left:clamp(42px,7vw,124px);top:50%;width:min(480px,40vw);transform:translateY(-54%)}
.result-copy>small{display:block;margin-bottom:15px;color:#b99151;font:700 12px Georgia,serif;text-transform:uppercase;letter-spacing:2px}
.result-panel h2{max-width:620px;margin:0;color:#f0e4c5;font:700 clamp(48px,6.2vw,94px)/.88 Georgia,serif;text-transform:uppercase;text-wrap:balance}
.result-panel blockquote{margin:24px 0 8px;color:#d8b875;font:italic 700 clamp(18px,2vw,29px)/1.2 Georgia,serif}
.result-panel p{max-width:430px;margin:0 0 28px;color:#a9aa9a;font-size:14px;line-height:1.5}
.result-panel .btn{min-width:190px;height:52px;border:2px solid #a26a4c;background:#75382e;color:#f5e6c7;font:700 14px Georgia,serif;text-transform:uppercase;box-shadow:5px 6px 0 rgba(0,0,0,.62)}
.result-panel .btn:hover{background:#94483a;border-color:#d47b60;transform:translateY(-1px)}
.result-stage{position:absolute;z-index:2;inset:0;pointer-events:none}
.result-hero{position:absolute;z-index:2;left:43%;bottom:-2%;width:min(57vw,920px);height:auto;filter:drop-shadow(0 22px 14px rgba(0,0,0,.9)) saturate(.82)}
.result-victor{position:absolute;z-index:1;right:clamp(40px,8vw,145px);bottom:8%;width:min(31vw,470px);height:77%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.result-victor img{width:100%;height:86%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 20px 12px rgba(0,0,0,.92))}
.result-victor small,.result-victor strong{position:absolute;z-index:3;top:0;padding:5px 13px;background:rgba(10,12,9,.88);font-family:Georgia,serif;text-transform:uppercase}
.result-victor small{color:#9d8c68;font-size:9px;letter-spacing:2px}.result-victor strong{color:#ead8ad;font-size:17px}
.result-victor strong{top:25px}
.result[data-kind="victory"]::before{background:rgba(5,8,6,.77)}
.result[data-kind="victory"] .result-copy{left:50%;width:min(660px,80vw);text-align:center;transform:translate(-50%,-50%)}
.result[data-kind="victory"] .result-copy>small,.result[data-kind="victory"] .result-quote,.result[data-kind="victory"] .result-stage{display:none}
.result[data-kind="victory"] .result-panel h2{margin-inline:auto;font-size:clamp(45px,6vw,82px)}
.result[data-kind="victory"] .result-panel p{margin:20px auto 28px}
@media(max-width:900px){.result-copy{left:28px;top:35%;width:55vw}.result-panel h2{font-size:44px}.result-hero{left:26%;width:76vw}.result-victor{right:8px;width:38vw;height:67%}}