:root{color-scheme:dark;--ivory:#f3e8cb;--gold:#d8b87d;--muted:#afaead;--night:#1d1c1b;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:#11100f;color:var(--ivory);font:14px/1.5 var(--font-ui)}body:before{content:'';position:fixed;inset:-20px;background:linear-gradient(#121110c9,#121110e6),var(--arena-image) center/cover;filter:blur(12px);pointer-events:none}button,select,input{font:inherit;color:inherit}button{border:0;cursor:pointer;user-select:none;touch-action:manipulation;background:none}button:disabled{opacity:.43;cursor:default}button:active:not(:disabled){transform:scale(.96)}p,h1,h2,figure{margin:0}svg{fill:currentColor}a{color:var(--gold)}
.game-shell{position:relative;isolation:isolate;container-type:inline-size;width:min(100%,560px);height:100dvh;max-height:1040px;margin:auto;background:#222120 var(--arena-image) center/cover;box-shadow:0 0 120px #0009;overflow:clip}.arena-atmosphere{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 25% 13%,#d6bd731d,transparent 40%),linear-gradient(#13121128,transparent 35%,#17161555);z-index:-1}.game-shell:after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 40px #12111077}#game-stage{position:absolute;inset:0}.game-topbar{position:absolute;left:15px;right:15px;top:calc(var(--safe-top) + 8px);height:44px;display:flex;align-items:center;justify-content:space-between;z-index:12;text-shadow:0 2px 6px #000}.top-title{font-family:var(--font-ui);font-weight:650;font-size:17px;letter-spacing:.12em}.icon-button,.brand-crown{width:44px;height:44px;display:grid;place-items:center;color:#dfc99a;font-size:24px}.brand-crown svg{width:26px;height:25px}.icon-button{background:radial-gradient(#1b1a19a8,transparent 70%);border:1px solid #c2ae7926;border-radius:50%}.draw-counter{font-family:var(--font-ui);font-size:12px;color:#c5b996;letter-spacing:.12em}.hero-home{height:100%;padding:calc(var(--safe-top) + 68px) 26px calc(var(--safe-bottom) + 20px);display:flex;flex-direction:column;align-items:center}.home-kicker{font-size:12px;letter-spacing:.18em;color:#c6ba9e;margin-bottom:12px}.hero-showcase{position:relative;flex:1;min-height:0;width:100%;display:grid;place-items:center}.hero-portrait{width:min(65cqw,calc((100dvh - 310px) / 1.5),290px)!important;transform:rotate(-3deg);filter:drop-shadow(0 22px 20px #0008)!important;animation:hero-idle 7s ease-in-out infinite}.hero-showcase:before{content:'';position:absolute;width:80%;height:75%;border-radius:50%;background:radial-gradient(#d2ae6435,transparent 67%);filter:blur(15px)}.hero-arrow{position:absolute;top:39%;font-size:36px;color:#d7bc83;padding:14px;z-index:4;text-shadow:0 2px 5px #000}.hero-arrow.left{left:-14px}.hero-arrow.right{right:-14px}.home-equipment{position:absolute;bottom:3%;left:1%;display:flex;gap:5px;transform:rotate(-8deg);filter:drop-shadow(0 8px 10px #0009)}.home-equipment .game-card{width:clamp(48px,14cqw,72px)}.hero-name{font-size:28px;font-weight:650;letter-spacing:.1em;margin-top:10px;text-shadow:0 3px 10px #000}.hero-affinity{font-size:12px;letter-spacing:.16em;color:#dbc18d;margin-top:2px}.hero-trait{font-size:13px;max-width:290px;text-align:center;line-height:1.65;color:#c5c4c3;margin-top:11px;min-height:42px;text-shadow:0 2px 3px #000}.hero-tabs{display:flex;gap:8px;margin:13px 0 15px}.hero-tab{font-size:12px;border:1px solid #d0b88132;border-radius:20px;padding:8px 18px;color:#b0afae;background:#1a191880}.hero-tab[aria-pressed=true]{color:#f1ddb0;border-color:#d3b37bb0;background:linear-gradient(#bda4722b,#1b1a1980);box-shadow:inset 0 0 12px #dabb6a10}.home-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;width:100%;max-width:400px}.primary-action,.secondary-action{min-height:50px;border-radius:9px;display:flex;justify-content:center;align-items:center;letter-spacing:.045em;font-weight:650}.primary-action{color:#302819;background:linear-gradient(160deg,#f0dfb2,#c6a269 80%);border:1px solid #f1dca4;box-shadow:inset 0 1px 0 #fff9d0,0 4px 0 #655032,0 6px 18px #0005;text-shadow:0 1px 0 #fff5}.secondary-action{background:linear-gradient(#302f2e,#1b1a19);color:#dfd0ac;border:1px solid #b8a17073;box-shadow:inset 0 0 0 2px #1a191840,0 3px 0 #131211}.home-deck-summary{font-size:10px;color:#859797;margin-top:15px;letter-spacing:.03em}
/* The entire board is one game surface, with no document panels. */
.arena{--arena-top:59px;--arena-bottom:145px;--card-max:65px;--rail-clearance:16px;--row-gap:2px;--card:min(15cqw,calc((min(100dvh,1040px) - var(--safe-top) - var(--safe-bottom) - var(--arena-top) - var(--arena-bottom) - 68px - 2 * var(--rail-clearance) - 5 * var(--row-gap)) / 9.81),var(--card-max));position:absolute;top:calc(var(--safe-top) + var(--arena-top));bottom:calc(var(--safe-bottom) + var(--arena-bottom));left:20px;right:20px;display:flex;flex-direction:column;justify-content:space-between;gap:var(--row-gap);z-index:5;transform-origin:center}.rail,.field-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;justify-items:center;gap:5px;flex-shrink:0}.rail-cell{width:var(--card);height:calc(var(--card)*1.5);position:relative}.rail-cell>.game-card{width:100%}.leader-cell:after{content:'';position:absolute;inset:-3px;border:1px solid #d3b97935;border-radius:10px;pointer-events:none}.rail .leader-cell{filter:drop-shadow(0 0 8px #eec6691d)}.empty-hand{width:80%;height:84%;margin:8% auto;border:1px solid #c0b08110;border-radius:7px}.field-slot{width:calc(var(--card)*.82);height:calc(var(--card)*1.23);border:1px solid #c6b78232;border-radius:7px;background:#17161527;position:relative;box-shadow:inset 0 0 15px #11100f35}.field-slot:empty:after{content:'';position:absolute;inset:8px;border:1px solid #c6b78210;border-radius:4px}.field-slot .game-card{position:absolute;width:100%;inset:0}.active-row{display:grid;grid-template-columns:1fr calc(var(--card)*1.6) 1fr;align-items:center;gap:18px;position:relative;flex-shrink:0}.active-slot{width:calc(var(--card)*1.6);height:calc(var(--card)*2.4);position:relative}.active-slot>.game-card{width:100%}.active-empty{position:absolute;inset:5% 5%;border:1px solid #b7ac743b;box-shadow:inset 0 0 18px #100f0e22;border-radius:12px;display:grid;place-items:center}.active-empty svg{width:29px;opacity:.17;color:#dfc486}.power-readout{text-align:right;line-height:1.1;text-shadow:0 3px 8px #000}.power-readout span{display:block;font-size:10px;color:#bdb595;margin-bottom:4px}.power-readout b{font-family:var(--font-stats);font-size:32px;font-weight:700;color:#f1dfb4;display:block;font-variant-numeric:tabular-nums}.active-status{text-align:left}.next-bonus{font-family:var(--font-ui);font-size:11px;white-space:nowrap;color:#a6cfcd;padding:4px 7px;border:1px solid #b0d3c52c;border-radius:10px;background:#1e1d1c70}.crown-marker{position:absolute;width:33px;height:26px;top:-14px;left:50%;transform:translateX(-50%);z-index:6;color:#efcf85;filter:drop-shadow(0 3px 3px #000) drop-shadow(0 0 6px #dcb05455)}.crown-marker svg{width:100%;height:100%;stroke:#725128;stroke-width:.6}.invisible{visibility:hidden!important}.player-sign{height:13px;line-height:13px;font-size:10px;color:#c7b994;text-align:center;letter-spacing:.12em;opacity:.75}.player-sign.mine{margin-top:3px}.pile-count{position:absolute;bottom:-4px;right:-4px;font-family:var(--font-ui);font-size:11px;font-weight:650;background:#262524;border:1px solid #c9ad744f;border-radius:50%;min-width:20px;height:20px;text-align:center;line-height:18px;color:#e2cd9e;z-index:3}.card-back{width:94%;height:94%;margin:3%;border-radius:8px;border:1px solid #ad9663;background:linear-gradient(145deg,#494847,#272625);box-shadow:2px 2px 0 #1e1d1c,3px 3px 0 #b49b6255,inset 0 0 15px #0e0d0c80;position:relative;display:grid;place-items:center}.back-inlay{position:absolute;inset:9%;border:1px solid #cbb47857;border-radius:4px;display:grid;place-items:center}.back-inlay:before{content:'';position:absolute;width:65%;aspect-ratio:1;transform:rotate(45deg);border:1px solid #cbb47838}.back-inlay svg{width:37%;height:auto;color:#d0b47b;filter:drop-shadow(0 2px 2px #0007)}.grave-back{margin:3%;width:94%;height:94%;border:1px solid #bfba9254;border-radius:8px;display:grid;place-items:center;color:#acabaa;background:#23222180;font-size:23px;box-shadow:inset 0 0 18px #0d0c0ba0}
.battle-dock{position:absolute;left:22px;right:22px;bottom:calc(var(--safe-bottom) + 24px);z-index:30;display:flex;flex-direction:column}.dock-options{order:1;display:flex;align-items:center;justify-content:flex-end;min-height:44px;margin:4px 0 0;color:#b7b6b5;font-size:11px}.explain-toggle{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-height:44px;font-size:11px;padding:0}.explain-toggle i{width:24px;height:13px;border:1px solid #afaead4f;border-radius:12px;background:#21201f;position:relative}.explain-toggle i:after{content:'';position:absolute;width:7px;height:7px;left:2px;top:2px;border-radius:50%;background:#858483}.explain-toggle[aria-pressed=true] i:after{left:13px;background:#e5c892}.explain-toggle[aria-pressed=true] i{border-color:#baa06b7a;background:#8f754638}.dock-actions{order:0;display:grid;grid-template-columns:52px 1fr 52px;gap:11px;align-items:center}.auto-button,.speed-button{height:50px;border:1px solid #b5a07075;border-radius:50%;color:#dfc894;background:linear-gradient(#373635,#222120);box-shadow:inset 0 0 0 3px #14131255,0 3px 0 #151413;font-family:var(--font-ui);font-weight:600;font-size:14px}.auto-button[aria-pressed=true]{border-color:#e3c178;background:linear-gradient(#665a3c,#353433);box-shadow:0 0 18px #e0b96623}.dock-actions .primary-action{height:52px;font-size:15px}.battle-caption{position:absolute;left:10px;right:10px;top:47%;pointer-events:none;color:#f2ddaa;text-align:center;font-size:15px;letter-spacing:.12em;text-shadow:0 2px 8px #000,0 0 20px #000;opacity:0;transition:opacity .2s;z-index:10}.battle-caption.visible{opacity:1}
/* Intro dimming belongs to the full camera, below the enlarged card.
   Overscan covers the maximum camera shake; modal backdrops own dimming while open. */
#motion-layer,#fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:21}#fx-canvas{z-index:24}#battle-camera:before{content:"";position:absolute;inset:-32px;z-index:20;background:#0a0908;opacity:0;pointer-events:none;transition:opacity .18s}.revealing #battle-camera:before{opacity:.58}body:has(dialog:modal) .revealing #battle-camera:before{opacity:0}.revealing .battle-caption{top:calc(var(--safe-top) + 68px);z-index:23;font-size:14px}.flying-card{position:absolute;transform-origin:0 0;perspective:1000px;will-change:transform;filter:none;z-index:22}.flying-card:before{content:"";position:absolute;inset:2.2% 3.2% 2.25%;border-radius:10% / 6.67%;box-shadow:0 15px 14px #0008;pointer-events:none}.card-flipper{width:100%;height:100%;position:relative;transform-style:preserve-3d}.flight-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.flight-back{transform:rotateY(180deg)}.flight-front .game-card{width:100%;height:100%;filter:none!important}.flight-back .card-back{border-width:2px}.awaiting-card{pointer-events:auto;cursor:pointer}.reveal-play{appearance:none;background:none;border:0;border-radius:0;box-shadow:none;padding:0;min-height:44px;line-height:1;display:block;cursor:pointer;font-family:var(--font-ui);position:absolute;top:calc(104% - 12px);left:0;right:0;text-align:center;font-size:12px;color:#e0d0af;letter-spacing:.12em;text-shadow:0 2px 5px #000;animation:hint-breathe 2s ease-in-out infinite}.flying-crown{position:absolute;color:#f2d391;filter:drop-shadow(0 0 9px #f8d873) drop-shadow(0 4px 4px #000);transform-origin:0 0}.flying-crown svg{width:100%;height:100%}.battle-pop{position:absolute;z-index:28;pointer-events:none;font-family:var(--font-ui);font-size:29px;font-weight:700;color:#ffe8b8;white-space:nowrap;text-shadow:0 2px 1px #24311e,0 0 15px #000}.battle-pop.reserve{font-family:inherit;font-size:12px;color:#b6e4e5}.battle-pop.guard{font-family:inherit;font-size:14px;color:#c6e6e9}.battle-pop.crown-pop{font-family:inherit;font-size:18px;color:#ffe1a0;letter-spacing:.07em}
.battle-pop.hero-damage-pop{color:#ffb1a4;text-shadow:0 2px 1px #57141a,0 0 16px #e64b42}.battle-pop.hero-heal-pop{color:#b9f1c9;text-shadow:0 2px 1px #333231,0 0 15px #6ad391}
.hero-damage-projectile{position:absolute;z-index:29;pointer-events:none;border-radius:50%;filter:drop-shadow(0 0 8px #f4c77f) drop-shadow(0 0 18px #a83d38);will-change:transform,opacity}.hero-damage-projectile:before,.hero-damage-projectile:after{content:"";position:absolute;inset:-110% -230%;border-radius:50%;background:linear-gradient(90deg,transparent,#ebcf9a66 58%,#fff1c9 85%,transparent);transform:rotate(-10deg);filter:blur(4px)}.hero-damage-projectile:after{inset:-45%;background:conic-gradient(from 20deg,#0000,#fff0bd,#a63838,#0000 60%);filter:blur(2px);animation:hero-projectile-spin .28s linear infinite}.hero-damage-projectile i,.hero-damage-projectile b,.hero-damage-projectile span{position:absolute;inset:14%;border-radius:42% 58% 48% 52%;background:#fff0c7;box-shadow:0 0 12px #e7b96b,0 0 25px #a53131}.hero-damage-projectile b{inset:29%;background:#fff;filter:blur(1px)}.hero-damage-projectile span{inset:-18%;background:none;border:2px solid #d6bd7b88;transform:rotate(45deg)}
.hero-damage-projectile.element-water{filter:drop-shadow(0 0 9px #a6dfe5) drop-shadow(0 0 18px #477f91)}.hero-damage-projectile.element-dark{filter:drop-shadow(0 0 9px #c9a3d5) drop-shadow(0 0 18px #604461)}.hero-damage-projectile.element-fire{filter:drop-shadow(0 0 9px #f0a67b) drop-shadow(0 0 18px #a63832)}.hero-damage-projectile.element-earth{filter:drop-shadow(0 0 9px #d6bd7e) drop-shadow(0 0 18px #6b6641)}.hero-damage-projectile.element-wind{filter:drop-shadow(0 0 9px #b9dfd2) drop-shadow(0 0 18px #777675)}.hero-damage-projectile.element-steel{filter:drop-shadow(0 0 9px #e0dfde) drop-shadow(0 0 18px #7a7978)}
.hero-break-energy{position:absolute;z-index:28;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#fff3c9 0 4%,#d9aa6d88 10%,#a53b4244 25%,transparent 62%),conic-gradient(from 10deg,transparent,#e4c88b33,transparent 16%,#a9434938,transparent 34%,#f1d9a34a,transparent 54%);filter:drop-shadow(0 0 14px #c79c68);will-change:transform,opacity}.hero-break-energy i{position:absolute;left:50%;top:50%;width:3px;height:16%;border-radius:3px;background:linear-gradient(#fff1c6,transparent);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(calc(var(--a) * 1deg)) translateY(calc(var(--r) * -1));box-shadow:0 0 7px #f0c987}.hero-card-fragment{position:absolute;z-index:30;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 3px 4px #000c)}.hero-card-fragment>.game-card{width:100%;height:100%}.hero-defeated-0 .rail[data-player="0"] .leader-cell>.game-card,.hero-defeated-1 .rail[data-player="1"] .leader-cell>.game-card{visibility:hidden}.is-cause-focused .game-topbar,.is-cause-focused .battle-dock{filter:brightness(.65)}
@keyframes hero-projectile-spin{to{transform:rotate(405deg)}}
/* Collection and controls live in temporary game sheets. */
dialog{color:var(--ivory);background:linear-gradient(150deg,#363534fa,#1f1e1dfa);border:1px solid #b6a37470;border-radius:17px;box-shadow:0 30px 70px #000a;padding:28px 22px;max-height:calc(100dvh - 32px);max-width:calc(100vw - 24px);overflow:auto;scrollbar-width:thin}dialog::backdrop{background:#0c0b0ab8;backdrop-filter:blur(5px)}.dialog-close{position:absolute;top:8px;right:8px;border-radius:50%;width:40px;height:40px;font-size:27px;color:#d2bd91;background:#181716b8;z-index:5;line-height:36px}.sheet-title{font-size:23px;letter-spacing:.02em;margin-bottom:18px;font-weight:650;padding-right:35px}.sheet-subtitle{font-size:12px;color:#abaaa9;margin:-12px 0 18px}.game-sheet{width:360px}.menu-row{display:block;width:100%;text-align:left;font-size:15px;padding:15px 3px;border-bottom:1px solid #e3d29517}.menu-row[aria-pressed=true]{color:#edcf92}.match-options{padding-top:20px;color:#c3c2c1}.match-options summary{cursor:pointer}.match-options label{display:block;margin-top:14px;font-size:12px}.match-options select,.match-options input{width:100%;margin-top:6px;padding:10px;background:#181716;border:1px solid #b8aa7840;border-radius:6px}.inspect-dialog{width:min(430px,94vw);padding:24px 13px 18px}.inspect-dialog .game-card{width:min(350px,calc((100dvh - 135px) / 1.5));margin:auto}.inspect-meta{font-size:12px;text-align:center;margin-top:10px;color:#c9c8c7}.card-id{font-family:var(--font-ui);display:block;text-align:center;font-size:10px;color:#889c99;margin-top:3px}.collection-sheet{width:min(660px,96vw)}.deck-equipment{display:flex;gap:20px;justify-content:center;margin-bottom:22px}.deck-equipment>div{width:65px;text-align:center}.deck-equipment span{font-size:11px;color:#c5c4c3}.deck-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #d6c89315}.deck-row>.game-card{width:44px;flex:0 0 44px}.deck-info{flex:1;min-width:0}.deck-info strong{display:block;font-size:13px}.deck-info small{font-size:10px;color:#acabaa}.quantity{display:flex;align-items:center;gap:8px;font-family:var(--font-ui)}.quantity-button{width:31px;height:35px;border:1px solid #bba87549;border-radius:6px;font-size:19px}.quantity span{width:14px;text-align:center}.deck-footer{display:flex;align-items:center;justify-content:space-between;margin:20px 0 8px;font-size:13px;color:#dec895}.text-button{color:#c5c4c3;font-size:12px;padding:10px}.validation{font-size:12px;color:#e6ad8c;margin-bottom:10px}.collection-sheet .primary-action{width:100%;margin-top:12px}#library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 7px}#library-grid figcaption{font-size:11px;color:#b7b6b5;text-align:center;margin-top:4px}.log-entry{padding:15px 0;border-bottom:1px solid #d8c78b1d}.log-entry strong{font-size:13px;color:#e2c993}.log-entry p{font-size:12px;color:#b6b5b4;margin-top:4px}.result-dialog{width:min(375px,92vw);text-align:center;padding:40px 30px 20px;background:radial-gradient(ellipse at top,#4a4b36,#222120 75%);overflow:hidden}.result-crown{width:65px;color:#f4d495;margin:5px auto 20px;filter:drop-shadow(0 0 18px #f4cf705e)}.result-eyebrow{font-size:11px;letter-spacing:.2em;color:#c1c0bf}.result-title{font-size:55px;font-weight:650;letter-spacing:.2em;margin:8px 0 10px;padding-left:.2em;color:#f1d7a1;text-shadow:0 3px 15px #0006}.result-detail{font-size:12px;color:#c0bfbe;margin-bottom:30px}.result-dialog .primary-action,.result-dialog .secondary-action{width:100%;margin:11px 0}#toast{position:fixed;left:50%;bottom:calc(var(--safe-bottom) + 130px);max-width:85vw;transform:translate(-50%,10px);z-index:99;pointer-events:none;background:#e3d2ab;color:#302f2e;border:1px solid #eee0bd;padding:10px 17px;border-radius:8px;font-size:12px;opacity:0;transition:.2s;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes hero-idle{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-6px)}}@keyframes hint-breathe{0%,100%{opacity:.6}50%{opacity:1}}
@media(min-width:700px){.hero-home{padding-left:45px;padding-right:45px}.arena{left:30px;right:30px}.battle-dock{left:35px;right:35px}}
@media(max-width:420px){#library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-home{padding-left:20px;padding-right:20px}.hero-name{font-size:26px}.hero-trait{font-size:12px}.home-equipment{left:0}.arena{left:15px;right:15px}.active-row{gap:12px}.power-readout b{font-size:29px}}
@media(max-height:720px){.hero-home{padding-top:55px;padding-bottom:12px}.home-kicker{margin-bottom:5px;font-size:10px}.hero-name{font-size:22px;margin-top:4px}.hero-trait{font-size:11px;line-height:1.5;margin-top:5px;min-height:33px}.hero-tabs{margin:8px 0 10px}.hero-tab{padding:5px 15px}.home-actions .primary-action,.home-actions .secondary-action{min-height:44px}.hero-portrait{width:min(62cqw,calc((100dvh - 273px) / 1.5),250px)!important}.home-deck-summary{margin-top:10px}.hero-affinity{font-size:10px}.battle-dock{bottom:calc(var(--safe-bottom) + 18px)}.arena{--arena-top:50px;--arena-bottom:134px;--card-max:60px}.game-topbar{top:calc(var(--safe-top) + 4px)}.player-sign{font-size:9px;height:10px;line-height:10px}.power-readout b{font-size:25px}.dock-options{margin-top:4px}.dock-actions .primary-action{height:47px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.game-card{position:relative;aspect-ratio:2/3;width:100%;container-type:inline-size;isolation:isolate;touch-action:manipulation;user-select:none;filter:drop-shadow(0 3px 4px #0005)}.card-surface{position:absolute;inset:0;overflow:hidden;clip-path:inset(2.2% 3.2% 2.25% round 10% / 6.67%)}.card-art,.card-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transform-origin:0 0}.card-art{clip-path:inset(2.5% 3.5% 2.6% round 10% / 6.67%)}.card-number{position:absolute;transform:translate(-50%,-50%);line-height:1;font-family:var(--font-stats);font-weight:700;font-variant-numeric:lining-nums tabular-nums;color:#fff4d7;text-shadow:0 .2cqw .7cqw #130f0af0;pointer-events:none}.card-name{position:absolute;top:64.45%;left:50%;transform:translate(-50%,-50%);width:75%;text-align:center;font-size:4.5cqw;font-weight:750;line-height:1.2;white-space:nowrap;letter-spacing:-.04em;color:#fff0cf;text-shadow:0 .3cqw .5cqw #000}.card-rules{position:absolute;top:70%;left:15%;width:70%;font-size:3.65cqw;line-height:1.65;font-weight:550;color:#f8f1de;text-shadow:0 .3cqw .4cqw #0009;word-break:keep-all}.art-pending .card-surface{background:#333231}.art-pending .card-surface:before{content:'원화 준비 중';font-size:10cqw;color:#a7a6a5;position:absolute;top:30%;left:10%;right:10%;text-align:center}.game-card[role=button]{cursor:pointer}.game-card[role=button]:hover{filter:drop-shadow(0 0 4px #e4cea455)}
.card-health-socket{position:absolute;z-index:5;transform:translate(-50%,-50%);display:block;object-fit:contain;filter:saturate(.86) brightness(.9) drop-shadow(0 .7cqw .7cqw #090807bb);pointer-events:none}.health-number{z-index:7;color:#fff1d5;text-shadow:0 .22cqw .25cqw #421015,0 0 .7cqw #000}.leader-cell .card-health-socket{filter:saturate(.86) brightness(.9) drop-shadow(0 0 5px #8b343d75) drop-shadow(0 2px 2px #000)}
.hero-shield-badge{position:absolute;right:-8px;bottom:7%;z-index:9;min-width:23px;height:21px;padding:0 4px;border:1px solid #a9d9de;border-radius:11px;background:linear-gradient(145deg,#434241,#262524);box-shadow:0 2px 5px #0009,inset 0 0 7px #a7e9ef2e;display:flex;align-items:center;justify-content:center;gap:1px;color:#bde7e9;font:700 10px var(--font-stats)}.hero-shield-badge svg{width:11px;height:11px}.hero-shield-badge b{font:inherit;color:#f8f7f6}

/* Story-only card composition keeps the face below the top gem/crown in every card size. */
.card-surface>.card-art-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;pointer-events:none}
.card-surface>.card-art-subject{inset:12% 0 0;width:100%;height:88%;object-fit:contain;object-position:50% 0;clip-path:none}

/* Warhaven Bold cap height: 765/1000; digit ink centers: 383–393.5.
   This font-bound .00575em correction centers the ink through size morphs.
   See assets/fonts/warhaven/stats-metrics.json; socket/art positions stay fixed. */
@supports (text-box-trim:trim-both) and (text-box-edge:cap alphabetic){
 .card-number{text-box-trim:trim-both;text-box-edge:cap alphabetic;transform:translate(-50%,calc(-50% + .00575em))}
}

/* Keep the leader portrait clear in hero selection. Statistics remain on battle cards. */

#advance[aria-disabled="true"]:not(:disabled){filter:saturate(.55);cursor:default}

.app-instruction{font-size:14px;line-height:1.7;margin:14px 0;color:#d8d7d6}.app-instruction~button{margin-top:16px;width:100%}

.hero-editions{display:flex;gap:8px;justify-content:center;margin:0 0 8px}.hero-edition{flex:1;max-width:125px;border:1px solid #8c9fa14d;border-radius:8px;padding:10px 5px;color:#cccbca;background:#232221;font:650 13px var(--font-ui)}.hero-edition[aria-pressed=true]{border-color:#cdcccb;color:#f4e6c6;background:#4d4c4b}.edition-note{text-align:center;font-size:10px;color:#adacab;margin:0 0 16px}.hero-budget-number{color:#f4f4e3}

/* The play surface behaves like an app; text inputs retain normal editing. */
.game-shell,dialog{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.game-shell img,dialog img{-webkit-user-drag:none}
input,textarea{-webkit-user-select:text;user-select:text}

/* Battlefield Units overlap horizontally; the five smaller slots remain the Base. */
.arena{--battle-card:min(90px,calc(var(--card) * 1.6))}.active-row{grid-template-columns:42px minmax(0,1fr);gap:8px}.active-slot{width:100%;height:calc(var(--battle-card) * 1.5 + 18px);min-width:0}.battlefield-scroll{width:100%;height:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x;position:relative}.battlefield-scroll::-webkit-scrollbar{display:none}.battlefield-track{position:relative;height:100%;width:max(100%,var(--battlefield-span));min-width:100%}.battlefield-unit{position:absolute;top:17px;width:var(--battle-card);height:calc(var(--battle-card) * 1.5)}.battlefield-unit>.game-card{width:100%;height:100%;touch-action:pan-x}.battlefield-unit .crown-marker{z-index:2;pointer-events:none}.active-slot .active-empty{width:var(--battle-card);height:calc(var(--battle-card) * 1.5 - 8px);left:calc(50% - var(--battle-card) / 2);top:21px;inset-inline-end:auto;bottom:auto}.active-slot .empty-crown{top:3px;left:50%;pointer-events:none}.active-status{position:absolute;right:2px;top:-3px;pointer-events:none;z-index:30}.power-readout{padding-top:15px}.power-readout b{font-size:30px}.active-status .next-bonus{font-size:9px;padding:2px 5px;background:#222120d9}.game-topbar .top-title{letter-spacing:.06em;font-size:16px}.field-row{position:relative}@media(max-width:420px){.active-row{gap:7px;grid-template-columns:37px minmax(0,1fr)}.power-readout b{font-size:27px}}@media(max-height:720px){.power-readout b{font-size:25px}}

/* Wallet chips get their own header row, clear of the title and menu. */
.lobby-topbar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;height:auto;gap:3px 0}.lobby-topbar .top-title{text-align:center;white-space:nowrap}.lobby-topbar>.currency-chips{grid-column:2/4;grid-row:2;justify-self:end}.hero-home.deck-home{padding-top:calc(var(--safe-top) + 101px)}.deck-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-right:25px;margin-bottom:18px;min-width:0}.deck-sheet-header .sheet-title{padding:0;margin:0;min-width:0;overflow-wrap:anywhere}.deck-sheet-header .currency-chips{flex:none}@media(max-width:350px){.lobby-topbar .top-title{font-size:14px;letter-spacing:.035em}.deck-sheet-header .sheet-title{font-size:20px}}@media(max-height:720px){.hero-home.deck-home{padding-top:calc(var(--safe-top) + 93px)}}

.art-zoom-button{width:36px;height:36px;flex:none;border:1px solid #b8b7b65c;border-radius:50%;display:grid;place-items:center;background:#282726ed;color:#dfd3ae;box-shadow:0 3px 10px #13121166;padding:8px;touch-action:manipulation}.art-zoom-button svg{width:20px;height:20px}.inspect-art-stage{position:relative;max-width:100%;display:grid;place-items:center}.inspect-art-stage>.art-zoom-button{position:absolute;right:1px;bottom:8px;z-index:3}
.profile-button{display:flex;align-items:center;gap:9px;min-width:0;max-width:100%;text-align:left;height:44px;padding:0}.profile-avatar{display:block;flex:none;width:37px;height:37px;border-radius:50%;padding:2px;border:1px solid #c2af81;background:linear-gradient(145deg,#9b8e6b,#535251);box-shadow:0 2px 7px #12111077}.profile-avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 25%;border-radius:50%;border:1px solid #2e2d2c}.profile-nickname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;letter-spacing:.03em;color:#e1d4b4}.profile-name-label{display:block;font-size:12px;color:#c7c6c5}.profile-name-input{display:block;width:100%;padding:12px;margin-top:7px;border:1px solid #b2b1b055;border-radius:8px;background:#201f1e;font-size:16px}.profile-save{width:100%;margin-top:18px}
.lobby-topbar{grid-template-columns:minmax(0,1fr) auto 44px;gap:5px 8px}.lobby-topbar>.profile-button{grid-column:1/3;grid-row:1;justify-self:start}.lobby-topbar>.icon-button{grid-column:3;grid-row:1}.lobby-topbar>.top-title{grid-column:1;grid-row:2;white-space:normal;text-align:left;font-size:15px;line-height:1.25;letter-spacing:.035em}.lobby-topbar>.currency-chips{grid-column:2/4;grid-row:2}.hero-home.deck-home{padding-top:calc(var(--safe-top) + 112px)}@media(max-width:350px){.lobby-topbar>.top-title{font-size:13px}.hero-home.deck-home{padding-top:calc(var(--safe-top) + 116px)}}

.power-readout .power-role-icon{display:block;width:20px;height:20px;margin:0 0 4px auto;color:#caba91;line-height:0}.power-role-icon svg{width:100%;height:100%}.inspect-art-stage>.game-card{width:min(100%,350px,calc((100dvh - 155px) / 1.5))}

.pile[role=button]{cursor:pointer;touch-action:manipulation}.pile[role=button]>.game-card{pointer-events:none}
.preparing-opening .rail .game-card,.preparing-opening .pile[data-zone=deck] .card-back,.preparing-opening .pile[data-zone=deck] .pile-count{visibility:hidden}

/* Mirrored battlefield: reserve equal side gutters and equal card head/foot room. */
.arena{--battle-card:min(76px,calc(var(--card) * 1.45))}.active-row{grid-template-columns:38px minmax(0,1fr) 38px;gap:8px}.active-slot{height:calc(var(--battle-card) * 1.5 + 34px)}.battlefield-unit{top:17px}.active-slot .active-empty{top:17px;height:calc(var(--battle-card) * 1.5)}.active-slot .empty-crown{top:3px}.power-readout{padding-top:0}.power-readout .power-role-icon{width:21px;height:21px}.empty-pile{background:none;box-shadow:none}.empty-pile .pile-count{background:#262524b0}@media(max-width:420px){.active-row{grid-template-columns:31px minmax(0,1fr) 31px;gap:7px}}

/* A shared camera keeps physical cards, flight carriers and their optics together. */
#battle-camera{position:absolute;inset:0;transform-origin:50% 50%}
/* Battle has one menu; the draw counter stays on the screen centerline. */
.battle-topbar{display:grid;grid-template-columns:44px 1fr 44px}.battle-topbar .draw-counter{grid-column:2;justify-self:center}.battle-topbar .icon-button{grid-column:3}
.overkill-pop{position:absolute;z-index:30;pointer-events:none;display:flex;flex-direction:column;align-items:center;white-space:nowrap;filter:drop-shadow(0 4px 1px #37170d) drop-shadow(0 0 14px #d7752266);transform-origin:center}.overkill-pop span{font-size:clamp(15px,4.8cqw,25px);font-weight:850;letter-spacing:.08em;color:#fff3c9;-webkit-text-stroke:3px #492b1b;paint-order:stroke fill}.overkill-pop b{font-family:var(--font-stats);font-weight:850;font-size:clamp(42px,13cqw,70px);line-height:1.06;color:#ffe69b;-webkit-text-stroke:5px #653715;paint-order:stroke fill;text-shadow:0 2px #fff9ce,0 5px #a76222}
.inspect-dialog{overflow:hidden;max-height:calc(100dvh - 28px)}#inspect-body{display:flex;flex-direction:column;max-height:calc(100dvh - 82px);min-height:0}.inspect-art-stage{flex:none}.inspect-info{flex:none;min-width:0;padding:0 3px 5px}#inspect-body.has-battle-spec .inspect-art-stage>.game-card{width:min(100%,300px,calc((100dvh - 275px) / 1.5))}#inspect-body.has-battle-spec .inspect-info{margin-top:8px}.inspect-info .inspect-meta{margin-top:5px}

/* Equipment silhouettes belong to the empty board slots. */
/* Both rail/Base gaps reserve the same space without visible zone labels.
   Card sizing reserves 2×34px Battlefield insets, 2×16px rail padding and 5 gaps.
   The remaining six card rows need at most (3 + 2.46 + 4.35) × card width. */
.arena>.rail[data-player="1"]{padding-bottom:var(--rail-clearance)}
.arena>.rail[data-player="0"]{padding-top:var(--rail-clearance)}
.equipment-cell>.empty-hand{position:absolute;inset:8% 10%;width:auto;height:auto;margin:0;display:grid;place-items:center;color:#b8af89a0;background:#1e1d1c24;border-color:#bfaf852b;box-shadow:inset 0 0 12px #12111030;pointer-events:none}
.empty-hand svg{display:block;width:88%;height:auto;max-width:36px}
.equipment-cell>.game-card{position:relative;z-index:1}
.equipment-cell.two-handed>.empty-hand{background:#13121166;border-color:#b3a47a12;box-shadow:inset 0 0 16px #0b0a0940}
.equipment-cell.two-handed>.empty-hand svg{visibility:hidden}
#battle-load-status:empty{display:none}

.unclaimed-crown{width:44px;height:35px;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;pointer-events:none}.power-readout .power-role-icon[hidden]{visibility:hidden;display:block}

/* One selected profile owns the former lobby title area. */
.lobby-topbar{grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:72px auto;gap:2px 8px}.lobby-topbar>.profile-button{grid-column:1;grid-row:1;width:100%;height:72px;gap:12px}.lobby-topbar>.profile-button .player-avatar{flex:none}.lobby-topbar>.profile-button .profile-nickname{font-size:clamp(17px,4.7cqw,21px);font-weight:700;letter-spacing:.01em}.lobby-topbar>.icon-button{grid-column:2;grid-row:1;align-self:start;margin-top:10px}.lobby-topbar>.currency-chips{grid-column:1/3;grid-row:2;justify-self:end}.hero-home.deck-home{padding-top:calc(var(--safe-top) + 123px)}
/* Keep one hit target while each profile visual presses around its own center. */
.lobby-topbar>.profile-button:active:not(:disabled){transform:none}
.lobby-topbar>.profile-button>:is(.player-avatar,.profile-nickname){transform-origin:center}
.lobby-topbar>.profile-button:active:not(:disabled)>:is(.player-avatar,.profile-nickname){transform:scale(.96)}
/* A moving single card has no deck-edge extrusion or outer carrier plate. */
.flight-back .card-back,.flight-back .cosmetic-card-back,.opening-deck-card>.card-back{box-shadow:none;border:0}
.flying-card:before{content:none;display:none}

/* Fit the lobby Hero inside the space left by the enlarged profile header. */
.deck-home .hero-showcase{container-type:size}.hero-home.deck-home .hero-showcase .hero-portrait{width:min(75cqw,calc(90cqh / 1.5),290px)!important}

/* Combat amounts and playback speed share the card stat typeface. Text labels remain UI. */
.combat-number,.speed-button{font-family:var(--font-stats);font-variant-numeric:lining-nums tabular-nums}

/* Keep the battlefield grave stack visually spent; its count and inspected cards stay clear. */
.in-battle .arena .pile[data-zone="grave"] > .game-card > .card-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .36);
  pointer-events: none;
}
/* Connection failures leave a visible retry action after releasing loading. */
.game-connect-retry{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;text-align:center;}

/* Keep the lower options row reserved when tutorials hide the explanation toggle.
   Initial poses are installed synchronously; no animation runs on label updates. */
.battle-dock[data-controls-entrance="running"]{pointer-events:none}

/* Catch dimmed-board taps below the enlarged card, above all board hit targets. */
#motion-layer>.reveal-backdrop{position:absolute;inset:-32px;z-index:0;pointer-events:auto;background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;min-height:0;opacity:1;cursor:pointer;touch-action:manipulation;transform:none}
#motion-layer>.reveal-backdrop:disabled{opacity:1;cursor:default}
/* R168 lobby is ivory stone; battle still uses each player's selected mat. */
body { background: #e9e3d8; }
body::before { background: linear-gradient(#f6f1e8c9,#e9e2d8ed), url("assets/optimized/scene-lobby-ivory-768.007f931d906b.webp") center/cover; }
.game-shell[data-scene=lobby] { background: #f5f1e7 url("assets/optimized/scene-lobby-ivory-768.007f931d906b.webp") center/cover; color: #2c2924; }
.game-shell[data-scene=lobby] .arena-atmosphere { background: linear-gradient(#fffaf322,transparent 35%,#d8c6a222); }
.game-shell[data-scene=lobby]::after { box-shadow: inset 0 0 30px #967b3620; }
.game-shell[data-scene=lobby] :is(.home-deck-name,.home-title,.home-kicker,.top-title,.profile-player-name,.home-player-name) { color: #2c2924; text-shadow: none; }
.game-shell[data-scene=lobby] .game-topbar { text-shadow: none; }