/* Presentation only. Legal actions and all match state come from the server. */
.auth-screen{min-height:var(--app-viewport-height);display:grid;place-items:center;padding:32px 20px;position:relative}.auth-landscape{position:absolute;inset:0;background:linear-gradient(90deg,#07100df2,#07100d66),url('/assets/scenes/academy.webp') center/cover;z-index:-1}.auth-card{width:min(100%,440px);padding:32px;background:#101e19e8;border:1px solid #c3a56a44;border-radius:16px;box-shadow:0 30px 100px #0009;backdrop-filter:blur(16px)}.auth-card>.emblem{width:52px;height:52px;display:block;margin-bottom:24px}.auth-card h1{font-size:32px;line-height:1.3;margin:16px 0}.auth-card p{color:#abb9b0;line-height:1.6}.auth-tabs{display:flex;border-bottom:1px solid #ffffff18;margin:24px 0}.auth-tabs button{flex:1;padding:12px;color:#9faea6;background:none;border:0;border-bottom:2px solid transparent}.auth-tabs .active{color:#ecd6a4;border-color:#d5b97b}.auth-card form label{display:block;margin:16px 0 8px;font-size:13px}.auth-card input{display:block;width:100%;margin-top:8px;padding:13px;border:1px solid #ffffff22;border-radius:6px;background:#07110f;color:#fff;font-size:16px}.auth-hint{font-size:11px}.auth-card form .button{width:100%;margin-top:16px}.auth-language{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px}.auth-language select{max-width:230px}#auth-error{color:#f7aa9b;font-size:13px}.pvp-panel{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:28px;margin-bottom:32px;background:linear-gradient(120deg,#162b23,#101d1b);border:1px solid #b7996044;border-radius:12px}.pvp-panel h2{margin:8px 0}.pvp-panel p{color:#9caea5;font-size:13px}.pvp-controls{display:grid;gap:12px;flex-shrink:0}.pvp-controls>div{display:flex;gap:8px}.pvp-controls input{width:130px;min-width:0;background:#0a1713;border:1px solid #b7996044;color:white;border-radius:6px;padding:10px;text-transform:uppercase}#room-waiting strong{display:block;font:28px monospace;letter-spacing:5px;color:#e2ca91;margin:8px 0}.deck-overview{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0}.grave-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.equip-options{max-height:220px;overflow:auto}.card-title{top:6.4%;height:7.4%;justify-content:center;gap:0}.card-title strong{font-size:5cqw;line-height:1.15}.card-title span{font-size:2.85cqw;line-height:1.15;white-space:nowrap;max-width:100%;overflow:hidden}.card-description{top:65.7%;height:17.9%;padding:0 1%;justify-content:center;gap:1.2cqw}.card-description>strong{font-size:4cqw;line-height:1.2}.card-description>span{font-size:3.25cqw;line-height:1.2}.card-description>small{font-size:2.8cqw;line-height:1.15}.card-stats{top:86.8%;height:5.3%;left:16%;width:68%;font-size:5cqw;align-items:center;justify-content:space-between}.card-stats>span{gap:1.2cqw;line-height:1}.card-stats .icon{width:4.8cqw;height:4.8cqw}.card-school{left:44.7%;top:57%;width:10.6%;height:7.1%}.card-school .icon{width:65%;height:65%}
body.in-battle{overflow:hidden;background:#090f10}.game-arena{height:var(--app-viewport-height);min-height:480px;width:100%;position:relative;isolation:isolate;overflow:hidden;color:#e9e3d3;--unit-w:clamp(72px,9vw,125px);--unit-h:calc(var(--unit-w)*1.23);--hand-w:clamp(105px,11vw,152px);font-family:'DM Sans',sans-serif}.arena-backdrop{position:absolute;inset:0;background:linear-gradient(#07110cad,#080f0bad),var(--arena-image) center/cover;z-index:-3}.arena-backdrop:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 10%,#03090ab0 85%)}#arena-particles{position:absolute;inset:0;pointer-events:none;z-index:2}.arena-topbar{height:64px;display:flex;align-items:center;gap:18px;padding:0 28px;border-bottom:1px solid #bea67425;background:#08110ca3;position:relative;z-index:5}.arena-topbar button{background:none;border:0;color:#bdbda9;cursor:pointer}.arena-back .icon{transform:rotate(180deg)}.arena-title{display:flex;flex-direction:column;gap:3px}.arena-title>span{text-transform:uppercase;font-size:9px;letter-spacing:2.5px;color:#c6ad79}.arena-title strong{font-family:Cinzel,serif;font-size:14px;font-weight:500}.server-badge{margin-left:auto;font-size:10px;color:#8dada0;display:flex;align-items:center;gap:7px}.server-badge i{width:5px;height:5px;border-radius:50%;background:#78c99f;box-shadow:0 0 8px #5fc792}.arena-exit{font-size:11px}.arena-help .icon{width:18px}.tabletop{height:calc(100% - 64px);max-width:1400px;margin:auto;position:relative;background:radial-gradient(ellipse at 50% 42%,#40635825,transparent 65%)}.tabletop:before{content:'';position:absolute;left:18%;right:18%;top:12%;bottom:24%;border:1px solid #cfb77818;border-radius:48%;box-shadow:0 0 80px #abb77a06 inset;transform:perspective(800px) rotateX(18deg);pointer-events:none}.opponent-hand{position:absolute;top:-53px;left:50%;transform:translateX(-50%);display:flex;height:88px}.opponent-hand>span{display:grid;place-items:center;width:60px;height:88px;margin:0 -15px;border:2px solid #8d7950;border-radius:5px;background:repeating-linear-gradient(45deg,#152c26,#152c26 3px,#1b342d 3px,#1b342d 6px);transform:rotate(var(--fan));box-shadow:0 5px 10px #0008}.opponent-hand img{width:28px}.rival-zone{position:absolute;top:30px;left:50%;transform:translateX(-50%);z-index:3}.arena-avatar{display:block;position:relative;width:76px;height:76px;padding:0;border-radius:50%;border:2px solid #ba9b66;background:#16241b;box-shadow:0 4px 24px #0009;opacity:1!important;cursor:default}.arena-avatar>img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:50%}.avatar-health{position:absolute;right:-10px;bottom:0;background:radial-gradient(#993a40,#541e26);border:1px solid #d5887c;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font:bold 19px Georgia;color:#fff}.avatar-name{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;letter-spacing:.3px;text-shadow:0 2px 4px #000}.avatar-hp-track{position:absolute;bottom:-7px;left:5%;width:75%;height:3px;background:#2e1719;border-radius:4px;overflow:hidden}.avatar-hp-track i{display:block;height:100%;background:#bf7362;transition:width .4s}.rival-mana{position:absolute;top:24px;left:calc(100% + 22px);white-space:nowrap;display:flex;gap:6px;align-items:center;font-size:13px;color:#a8d7ed}.rival-mana .icon{width:16px}.battle-lanes{position:absolute;top:23%;left:50%;transform:translateX(-50%);width:max-content;z-index:3}.field-row{display:flex;justify-content:center;gap:clamp(10px,2vw,28px)}.battle-divider{height:29px;display:flex;align-items:center;gap:20px;padding:0 30px;color:#af97624d}.battle-divider i{height:1px;flex:1;background:linear-gradient(90deg,transparent,#b9a56d55,transparent)}.battle-divider .icon{width:15px;height:15px}.field-slot{position:relative;width:var(--unit-w);height:var(--unit-h);border-radius:13px;padding:0;flex-shrink:0;background:#0d1c174d;border:1px solid #bdb3882e;color:#d6cfb2;overflow:visible;transition:box-shadow .2s,filter .2s,transform .2s;isolation:isolate;opacity:1!important}.field-slot.empty{border-style:dashed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-shadow:inset 0 0 20px #0003}.slot-rune{font-size:27px;color:#bcb79228}.field-slot small{font-size:10px;color:#a2dabc}.field-slot.occupied{border:2px solid var(--rarity);box-shadow:0 7px 18px #0009;cursor:pointer}.unit-portrait{width:100%;height:100%;object-fit:cover;object-position:50% 15%;border-radius:11px}.unit-shade{position:absolute;inset:0;border-radius:11px;background:linear-gradient(#030b0030,transparent 45%,#060f0bed)}.unit-name{position:absolute;bottom:20px;left:3px;right:3px;text-align:center;font:10px Cinzel,serif;letter-spacing:.4px;text-shadow:0 1px 4px black}.unit-cost,.unit-attack,.unit-health{position:absolute;display:grid;place-items:center;width:27px;height:29px;font:bold 19px Georgia;text-shadow:0 2px 3px #000;border:1px solid #bea774;border-radius:8px}.field-slot{--unit-mana-width:24px;--unit-mana-height:25px}.unit-cost{left:-7px;top:-9px;background:#184556;color:#d5f1f8;font-size:16px;width:24px;height:25px}.unit-attack{left:-9px;bottom:-8px;background:linear-gradient(#745b2a,#42321d);color:#ffe7a5}.unit-health{right:-9px;bottom:-8px;background:linear-gradient(#73373a,#371e28);color:#fff1e3}.unit-health.damaged{color:#ffaaa0}.unit-status{position:absolute;top:5px;right:4px;display:flex;flex-direction:column;gap:3px;color:#bcdcee;text-shadow:0 2px 3px black;font-size:11px}.unit-status .icon{width:15px;height:15px;filter:drop-shadow(0 1px 2px black)}.unit-status i{font-weight:bold;font-size:16px;color:#e1d9be}.unit-guard{position:absolute;top:36%;left:-10px;color:#b9e7f9;filter:drop-shadow(0 0 4px #91bdd3)}.unit-guard .icon{width:23px;height:27px}.attack-ready{box-shadow:0 0 0 2px #81c79b77,0 0 22px #6cbc7770!important}.unit-ready-gem{display:none}.attack-ready .unit-ready-gem{display:block;position:absolute;bottom:-5px;left:calc(50% - 4px);width:8px;height:8px;background:#b5e5a1;transform:rotate(45deg);box-shadow:0 0 10px #b6f8a2}.selected-unit,.valid-target,.summon-target{border-color:#e5cd87!important;box-shadow:0 0 0 2px #e5cd8755,0 0 28px #e5cd8755!important;cursor:pointer!important}.valid-target{animation:target-pulse 1.2s ease-in-out infinite}.summon-target .slot-rune{color:#e5cd87}.frozen{filter:drop-shadow(0 0 8px #86d5eb);border-color:#acecff!important}.frozen:after{content:'';position:absolute;inset:0;border-radius:10px;background:linear-gradient(120deg,#a0eaff4d,transparent,#a0eaff4d);pointer-events:none}.turn-control{position:absolute;right:4.5%;top:43%;width:112px;text-align:center;z-index:4}.round-label{font-size:9px;letter-spacing:1.7px;text-transform:uppercase;color:#bdb194}.end-turn{width:100%;min-height:66px;margin-top:8px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:5px;border-radius:12px;border:1px solid #887858;background:linear-gradient(#273d30,#13201a);color:#b9b496;font-size:10px;letter-spacing:.7px;box-shadow:0 5px 16px #0008}.end-turn.your-turn:not(:disabled){color:#eee0b5;border-color:#c5ac6f;box-shadow:0 0 22px #c3a66020,0 5px 16px #0008;cursor:pointer}.end-turn .icon{width:18px}.end-turn:disabled{opacity:.7}.self-zone{position:absolute;left:50%;bottom:19.5%;transform:translateX(-50%);z-index:4}.self-zone .arena-avatar{width:68px;height:68px}.self-zone .avatar-name{bottom:-20px}.mana-tray{position:absolute;left:calc(100% + 27px);top:22px;display:flex;align-items:center;gap:12px}.mana-tray>strong{font:25px Georgia;color:#c9eaff}.mana-tray small{font-size:14px;color:#8cadbb}.mana-tray>div{display:flex;gap:5px}.mana-tray i{width:12px;height:17px;background:#0e2431;border:1px solid #3b5665;transform:skewY(-12deg);border-radius:2px}.mana-tray .full{background:linear-gradient(130deg,#b6eeff,#348abe);box-shadow:0 0 8px #4eafc966}.mana-tray .unavailable{opacity:.25}.deck-pile{position:absolute;width:51px;height:72px;border-radius:5px;border:2px solid #8d7950;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#152c26,#152c26 3px,#1b342d 3px,#1b342d 6px);box-shadow:3px 3px 0 #26352d,5px 5px 0 #857352,8px 8px 16px #0008}.deck-pile img{width:30px}.deck-pile>span{position:absolute;bottom:-12px;right:-10px;display:grid;place-items:center;width:26px;height:26px;border:1px solid #bba56a;border-radius:50%;background:#19251b;color:#d6cba8;font-size:13px}.deck-pile small{position:absolute;top:calc(100% + 14px);font-size:9px;white-space:nowrap;color:#aeaa98}.opponent-deck{top:15%;right:8%}.player-deck{bottom:22%;left:8%}.graveyard{position:absolute;display:flex;align-items:center;justify-content:center;gap:7px;color:#9faaa1;background:#07140f88;border:1px solid #8e9c7833;border-radius:8px;padding:10px;width:63px;height:43px}.graveyard .icon{width:19px}.graveyard b{font-size:12px}.graveyard small{position:absolute;top:calc(100% + 5px);font-size:9px;white-space:nowrap}.opponent-grave{left:8%;top:16%}.player-grave{right:8%;bottom:23%}.arena-instruction{position:absolute;bottom:17%;left:10%;right:10%;text-align:center;font-size:11px;color:#cbc3a5;z-index:4;text-shadow:0 2px 4px #000}.arena-instruction button{margin-left:10px;background:none;color:#f0d196;border:0;text-decoration:underline;font-size:10px}.player-hand{position:absolute;bottom:calc(var(--hand-w)*-.62);left:50%;transform:translateX(-50%);display:flex;align-items:flex-start;justify-content:center;z-index:5;padding-top:25px}.hand-card-wrap{width:var(--hand-w);flex-shrink:0;margin:0 -10px;position:relative;transform:translateY(var(--lift)) rotate(var(--angle));transform-origin:50% 110%;transition:transform .22s;z-index:var(--index)}.hand-card{width:100%;border:0;background:none;padding:0;cursor:pointer;display:block;position:relative;border-radius:12px;transition:filter .2s}.hand-card>.mage-card{width:100%;pointer-events:none}.hand-card-wrap.playable .hand-card{filter:drop-shadow(0 -2px 4px #7fc69999)}.hand-card-wrap:hover,.hand-card-wrap.hand-selected{transform:translateY(-62px) rotate(0deg) scale(1.08);z-index:30}.hand-selected .hand-card{filter:drop-shadow(0 0 8px #f4d895)!important}.hand-mana{position:absolute;left:1px;top:9px;border-radius:50%;width:27px;height:27px;background:linear-gradient(#427eab,#102e45);color:#e8faff;border:1px solid #a5d6ef;display:grid;place-items:center;font:bold 18px Georgia;box-shadow:0 2px 10px #000}.hand-inspect{position:absolute;top:35%;right:6px;background:#0b1b17e0;color:#e6d4a4;border:1px solid #bbac7c66;border-radius:50%;padding:5px;display:none}.hand-inspect .icon{width:15px;height:15px}.hand-card-wrap:hover .hand-inspect,.hand-selected .hand-inspect{display:block}.empty-hand{height:130px;font-size:12px;color:#948e7b}.arena-log-toggle{position:absolute;bottom:14px;left:22px;border:0;background:none;color:#aaa994;display:flex;align-items:center;gap:9px;font-size:10px;z-index:8}.arena-log-toggle .icon{width:17px}.match-result{position:absolute;inset:64px 0 0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:radial-gradient(ellipse,#192419e8,#06100eea);backdrop-filter:blur(7px);text-align:center;padding:25px}.result-sigil{width:90px;height:90px;border:1px solid #ceaa6477;transform:rotate(45deg);display:grid;place-items:center;box-shadow:0 0 90px #c6a24c25}.result-sigil .icon{width:42px;height:42px;transform:rotate(-45deg);color:#e2c07d}.match-result h1{font:clamp(28px,5vw,56px) Cinzel,serif;margin:0}.match-result .eyebrow{margin-top:20px}.match-result p{color:#b4bba6}.match-result.lost .result-sigil{filter:grayscale(.7)}#battle-fx{position:fixed;inset:0;pointer-events:none;z-index:50}.spell-projectile{position:absolute;width:26px;height:26px;border-radius:50%;background:white;box-shadow:0 0 12px 8px var(--spell),0 0 45px 18px var(--spell)}.summon-ghost{position:absolute;border:2px solid var(--spell);box-shadow:0 0 25px var(--spell);border-radius:12px;overflow:hidden}.summon-ghost img{width:100%;height:100%;object-fit:cover}.summon-ring{position:absolute;width:100px;height:100px;border-radius:50%;border:2px solid var(--spell);box-shadow:0 0 20px var(--spell),inset 0 0 20px var(--spell)}.combat-number{position:absolute;font:bold 42px Georgia;color:#ffe0aa;text-shadow:0 3px 0 #36150e,0 0 20px #ff8e46}.combat-number.heal{color:#a8f7bb;text-shadow:0 3px 0 #103921,0 0 20px #51cc7e}.combat-number.shield{color:#b5eaff;text-shadow:0 3px 0 #103139,0 0 20px #518ecc}.death-ghost{position:absolute;pointer-events:none}.death-ghost>.field-slot{width:100%;height:100%}.turn-banner{position:absolute;left:50%;top:45%;white-space:nowrap;font:25px Cinzel,serif;padding:24px 65px;border-top:1px solid #ceaa6455;border-bottom:1px solid #ceaa6455;background:linear-gradient(90deg,transparent,#101b18ed 20%,#101b18ed 80%,transparent);color:#d5b596}.turn-banner.own{color:#f6dda3}@keyframes target-pulse{50%{box-shadow:0 0 0 2px #e5cd8799,0 0 35px #e5cd8790}}
@media(min-height:850px){.battle-lanes{top:25%}.self-zone{bottom:24%}.arena-instruction{bottom:20%}.player-hand{bottom:calc(var(--hand-w)*-.4)}}
@media(max-width:700px){.auth-card{padding:25px}.pvp-panel{align-items:stretch;flex-direction:column;padding:20px}.deck-overview{grid-template-columns:1fr}.game-arena{--unit-w:clamp(57px,16.3vw,98px);--hand-w:clamp(92px,25vw,135px);min-height:560px}.arena-topbar{height:53px;padding:0 12px;gap:12px}.arena-title strong{font-size:11px}.arena-title>span{font-size:8px}.server-badge{font-size:0;gap:0}.arena-exit{font-size:9px}.tabletop{height:calc(100% - 53px)}.rival-zone{top:35px}.arena-avatar{width:62px;height:62px}.avatar-health{width:28px;height:28px;font-size:17px}.avatar-name{font-size:9px}.battle-lanes{top:26%}.field-row{gap:clamp(12px,3.5vw,22px)}.battle-divider{height:28px}.unit-name{font-size:8px;bottom:17px}.unit-attack,.unit-health{width:23px;height:25px;font-size:17px;bottom:-7px}.field-slot{--unit-mana-width:21px;--unit-mana-height:23px}.unit-cost{width:21px;height:23px;font-size:14px}.unit-guard .icon{width:18px}.unit-status .icon{width:12px;height:12px}.unit-status{gap:1px;top:3px}.turn-control{top:auto;bottom:21%;right:13px;width:80px}.round-label{font-size:8px;letter-spacing:1px}.end-turn{min-height:53px;font-size:9px;margin-top:5px;gap:3px}.end-turn .icon{width:14px;height:14px}.self-zone{bottom:24%;left:44%}.self-zone .arena-avatar{width:56px;height:56px}.mana-tray{left:auto;right:calc(100% + 18px);top:10px;gap:5px;flex-direction:column}.mana-tray>strong{font-size:20px}.mana-tray>div{gap:3px}.mana-tray i{width:6px;height:10px}.deck-pile{width:34px;height:48px}.deck-pile img{width:21px}.deck-pile>span{width:22px;height:22px;font-size:11px}.deck-pile small{font-size:8px}.opponent-deck{top:7%;right:8%}.opponent-grave{top:9%;left:6%;width:43px;height:32px;padding:5px;gap:4px}.graveyard .icon{width:15px}.graveyard small{font-size:8px}.player-deck{bottom:19%;left:6%;display:none}.player-grave{bottom:6%;right:12px;width:35px;height:30px;padding:3px}.player-grave small{display:none}.arena-instruction{bottom:17%;left:5%;right:5%;font-size:10px;line-height:1.5}.player-hand{bottom:calc(var(--hand-w)*-.37)}.hand-card-wrap{margin:0 -18px}.hand-card-wrap:hover,.hand-card-wrap.hand-selected{transform:translateY(-48px) rotate(0deg) scale(1.12)}.hand-mana{width:23px;height:23px;font-size:16px;top:7px}.arena-log-toggle{left:9px;bottom:8px;gap:0}.arena-log-toggle span{display:none}.match-result{inset:53px 0 0}.turn-banner{font-size:19px;padding:20px 35px}.combat-number{font-size:32px}}
@media(max-height:700px) and (min-width:701px){.game-arena{--unit-w:75px;--hand-w:110px;min-height:360px}.arena-topbar{height:45px}.tabletop{height:calc(100% - 45px)}.rival-zone{top:12px}.arena-avatar{width:54px;height:54px}.battle-lanes{top:23%}.battle-divider{height:22px}.self-zone{bottom:19%;left:25%}.self-zone .arena-avatar{width:54px;height:54px}.arena-instruction{bottom:24%;left:24%;right:24%;font-size:10px}.player-hand{bottom:-78px}.turn-control{right:7%;top:39%}.player-deck{bottom:17%;left:9%}.player-grave{bottom:14%;right:10%}.mana-tray{gap:7px;left:calc(100% + 20px)}.mana-tray i{width:8px;height:12px}.mana-tray>div{gap:3px}.rival-mana{top:15px}.field-slot .unit-name{font-size:9px}}
@media(max-height:600px) and (min-width:701px){.game-arena{--unit-w:57px;--hand-w:94px}.arena-avatar{width:43px;height:43px}.rival-zone{top:10px}.avatar-health{width:24px;height:24px;font-size:15px}.avatar-name{bottom:-17px;font-size:8px}.battle-lanes{top:21%}.battle-divider{height:20px}.self-zone{bottom:14%;left:23%}.self-zone .arena-avatar{width:45px;height:45px}.arena-instruction{bottom:24%;font-size:9px}.player-hand{bottom:-64px}.unit-name{font-size:7px!important}.unit-attack,.unit-health{font-size:15px;width:22px;height:24px}.field-slot{--unit-mana-width:20px;--unit-mana-height:21px}.unit-cost{font-size:14px;width:20px;height:21px}.opponent-hand{top:-62px}.deck-pile{height:48px;width:34px}.deck-pile img{width:22px}.mana-tray{top:10px}.player-grave{bottom:12%}.end-turn{min-height:50px}.turn-control{width:90px}.arena-log-toggle{bottom:8px}}
@media(prefers-reduced-motion:reduce){.valid-target{animation:none}.hand-card-wrap,.field-slot,.avatar-hp-track i{transition:none}}

.arena-topbar{z-index:10}.turn-timer{display:block;color:#c2b589;font-size:11px;font-variant-numeric:tabular-nums}.turn-timer.urgent{color:#f89c81}

.unit-wrap{position:relative;width:var(--unit-w);height:var(--unit-h);flex:0 0 var(--unit-w)}.unit-wrap>.field-slot{width:100%;height:100%;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.unit-inspect{position:absolute;right:-5px;top:-9px;bottom:auto;z-index:6;width:30px;height:30px;display:grid;place-items:center;border:1px solid #9a9875;border-radius:50%;background:#15201df5;color:#e9dfbd;box-shadow:0 2px 6px #0008}.unit-inspect .icon{width:17px;height:17px}.unit-inspect:hover,.unit-inspect:focus-visible{background:#3b4b39}.arena-inspect-hint{position:absolute;bottom:calc(var(--hand-w)*1.35 + 27px);left:20%;right:20%;text-align:center;color:#b8c6b7;font-size:10px;pointer-events:none}.field-readout{margin-top:18px;border:1px solid #536347;padding:16px;border-radius:8px;background:#1b2b22}.field-readout p,.field-readout li{font-size:12px;color:#cbd6c5}.field-readout ul{margin:8px 0 0;padding-left:18px}.field-readout .detail-stats{margin:12px 0}@media(max-width:700px){.unit-inspect{width:32px;height:32px;right:-6px;top:-9px;bottom:auto}.arena-inspect-hint{display:none}}

/* Three protected ranks per side: front, middle and rear. */
.game-arena{--unit-w:clamp(42px,6dvh,66px);--unit-h:calc(var(--unit-w)*1.12);--hand-w:clamp(95px,12vw,125px)}.battle-lanes{top:90px;display:flex;flex-direction:column;gap:12px}.field-row{display:flex;flex-direction:column;gap:16px}.formation-rank{position:relative;display:grid;grid-template-columns:repeat(3,var(--unit-w));gap:18px;padding:3px 5px;border-radius:7px;background:#ffffff03}.formation-rank.rank-0{background:#b99b5720;outline:1px solid #b99b5730}.formation-rank.rank-1{background:#6ba59010}.formation-rank.rank-2{background:#7b79ab14}.rank-label{position:absolute;left:-65px;top:50%;transform:translateY(-50%);width:56px;text-align:right;font-size:9px;color:#b7c7b5}.battle-divider{margin:0;height:9px}.rival-zone{top:8px}.arena-avatar,.self-zone .arena-avatar{width:50px;height:50px}.avatar-health{width:27px;height:27px;font-size:17px}.self-zone{bottom:145px;left:50%;display:flex;align-items:center;gap:15px}.mana-tray{position:static;transform:none;max-width:115px}.turn-control{top:44%;bottom:auto;right:12px;width:67px}.end-turn{width:64px;min-height:67px;padding:8px 3px}.end-turn span{font-size:9px}.round-label{font-size:8px}.arena-instruction{bottom:215px;left:8%;right:8%;font-size:10px}.arena-inspect-hint{display:none}.player-hand{bottom:-35px;padding-top:15px}.opponent-deck{top:16px;right:15px}.opponent-grave{top:18px;left:15px}.player-deck{display:block;left:15px;bottom:145px}.player-grave{left:15px;bottom:215px}.unit-name{font-size:8px}.field-slot{--unit-mana-width:19px;--unit-mana-height:21px}.unit-cost{font-size:12px;width:19px;height:21px}.unit-attack,.unit-health{font-size:14px;width:22px;height:23px}.unit-inspect{width:28px;height:28px;top:-8px;right:-6px;bottom:auto}.unit-inspect .icon{width:15px;height:15px}.unit-status{font-size:8px}.unit-status .icon{width:11px;height:11px}
@media(max-width:700px){.rank-label{left:-55px;width:48px;font-size:8px}.game-arena{min-height:650px;--hand-w:100px}.self-zone{left:50%;bottom:142px}.arena-instruction{bottom:212px}.tabletop{height:calc(100% - 53px)}}
@media(min-aspect-ratio:6/5){.game-arena{min-height:360px;--unit-w:clamp(42px,11dvh,75px);--unit-h:calc(var(--unit-w)*1.08);--hand-w:clamp(92px,19dvh,128px)}.battle-lanes{top:18%;flex-direction:row;gap:72px}.field-row{flex-direction:row;gap:16px}.formation-rank{grid-template-columns:var(--unit-w);gap:14px}.rank-label{top:-22px;left:50%;width:70px;text-align:center;transform:translateX(-50%)}.battle-divider{position:absolute;top:0;bottom:0;left:50%;height:100%;width:1px;opacity:.3}.battle-divider>*{display:none}.rival-zone{top:40%;left:8%;transform:translate(-50%,-50%)}.self-zone{top:40%;bottom:auto;left:92%;transform:translate(-50%,-50%);flex-direction:column;gap:26px}.turn-control{left:50%;right:auto;top:35%;transform:translateX(-50%);width:64px}.player-hand{bottom:-70px}.arena-instruction{bottom:22%;left:23%;right:23%;font-size:10px}.opponent-deck{top:8%;left:6%;right:auto}.opponent-grave{left:5%;top:67%}.player-deck{left:auto;right:6%;bottom:auto;top:8%}.player-grave{left:auto;right:5%;bottom:auto;top:67%}.opponent-hand{left:8%;top:8%;opacity:.45}.tabletop{height:calc(100% - 53px)}}
.unit-role{position:absolute;left:4px;top:24px;width:15px;height:15px;color:#f9dfab;filter:drop-shadow(0 1px 2px #000)}.unit-role .icon{width:12px;height:12px}.trap-zone{position:absolute;z-index:8;display:flex;align-items:center;gap:5px;color:#ddbd79}.trap-zone .icon{width:16px;height:16px}.enemy-traps{top:62px;left:18px}.enemy-traps span{display:grid;place-items:center;width:25px;height:33px;border:1px solid #917147;background:#1d1930;border-radius:4px}.own-traps{bottom:184px;left:16px;background:#17141e;border:1px solid #715b3e;border-radius:8px;padding:7px;font-size:11px}.selected-spell{position:absolute;z-index:15;bottom:244px;left:50%;transform:translateX(-50%);width:min(330px,86vw);background:#141321f2;border:1px solid #9c8154;border-radius:10px;padding:10px 14px;text-align:center;pointer-events:none;box-shadow:0 5px 30px #0008}.selected-spell strong{display:block;color:#efcf93;font-size:12px}.selected-spell span{display:block;color:#d5cedc;font-size:11px;margin-top:4px}.arena-instruction .cast-confirm{color:#191621;background:#e6c685;border-radius:5px;padding:6px 12px;font-weight:700}.spell-banner{position:absolute;left:50%;top:40%;width:max-content;max-width:80vw;white-space:normal;text-align:center;border:1px solid #d8b271;background:#181326f5;color:#ffe4a6;border-radius:12px;padding:14px 24px;font:600 20px Georgia,serif;box-shadow:0 0 40px #b994514f}.spell-card-type{flex:1;font-size:.7em;gap:4px!important}
@media(min-aspect-ratio:6/5){.own-traps{bottom:94px;left:auto;right:18%}.enemy-traps{top:75px;left:18%}.selected-spell{bottom:130px;width:270px}.arena-instruction{max-width:64vw}}
.hand-inspect{display:grid;place-items:center;top:30%;right:5px;width:28px;height:28px;z-index:3}.hand-inspect .icon{width:14px;height:14px}
.field-slot.valid-target{outline:2px solid #f4d48b;box-shadow:0 0 15px #ffcc6666}.arena-avatar.valid-target{outline:2px solid #f4d48b;box-shadow:0 0 20px #ffcc6688}
@media(min-aspect-ratio:6/5){.self-zone .mana-tray{width:110px;justify-content:center;gap:8px}.self-zone .mana-tray>div{display:grid;grid-template-columns:repeat(5,6px);gap:4px}.self-zone .mana-tray strong{font-size:19px}.self-zone .mana-tray i{width:6px;height:10px}}
@media(max-aspect-ratio:6/5) and (max-height:760px){body.in-battle{overflow-y:auto}.game-arena{height:780px;min-height:780px}}

.special-detail{padding:14px;border:1px solid #b9a56d66;border-radius:8px;margin:16px 0;background:#1b2d24}.special-detail h3{font-size:18px}.special-detail small{display:block;color:#c2cbb9;line-height:1.6}.special-detail .button{width:100%;margin-top:12px}.special-target-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:min(540px,90vw);max-height:100px;overflow-y:auto;pointer-events:auto}.special-target-choices .cast-confirm{min-height:36px;padding:6px 10px}.arena-audio{min-width:32px;min-height:36px;font-size:20px}.arena-audio[aria-pressed=false]{opacity:.45}.arena-audio .icon{width:17px}.hand-card{touch-action:manipulation}@media(max-width:700px){.arena-topbar{gap:6px}.arena-title{min-width:0}.arena-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}.arena-audio{min-width:30px;padding:0}.special-target-choices{max-height:82px}.special-detail h3{font-size:16px}}

/* Cards keep a stable hit area between the first and second tap. */
.hand-card-wrap,.hand-card-wrap:hover,.hand-card-wrap.hand-selected{transform:none;transition:filter .18s}
.hand-card-wrap.hand-selected{z-index:6}.hand-selected .hand-card{outline:2px solid #f4d895;outline-offset:-3px}
.player-hand{touch-action:pan-x}.field-slot{touch-action:manipulation}
.arena-instruction{line-height:1.6}.arena-instruction button{white-space:normal}
@media(max-aspect-ratio:6/5){
 body.in-battle{overflow-y:auto}
 .game-arena{height:auto;min-height:var(--app-viewport-height);overflow:clip;--unit-w:clamp(42px,11.5vw,56px);--unit-h:calc(var(--unit-w)*1.12);--hand-w:110px}
 .arena-topbar{height:auto;min-height:53px;padding:8px 10px;gap:6px;flex-wrap:wrap}
 .arena-title{flex:1;min-width:80px}.arena-title strong{max-width:100%;font-size:11px}
 .server-badge{display:none}.arena-topbar button{min-height:32px;flex-shrink:0}
 .tabletop{height:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:'grave rival rival deck' 'lanes lanes lanes lanes' 'ptrap self self turn' 'pdeck self self turn' 'instruction instruction instruction instruction' 'hand hand hand hand' 'log log log pgrave';grid-template-rows:90px auto 44px 40px auto auto 30px;align-items:center;gap:8px 0;padding:0 10px 8px}
 .tabletop:before,.opponent-hand{display:none}
 .rival-zone,.self-zone,.battle-lanes,.turn-control,.deck-pile,.graveyard,.arena-instruction,.player-hand,.arena-log-toggle,.trap-zone{position:relative;inset:auto;transform:none;margin:0}
 .rival-zone{grid-area:rival;justify-self:center;margin-top:-12px}
 .rival-zone .avatar-name{max-width:175px;overflow:hidden;text-overflow:ellipsis}
 .rival-mana{left:calc(100% + 16px);top:16px;font-size:12px}
 .opponent-grave{grid-area:grave;justify-self:start;width:42px}.opponent-deck{grid-area:deck;justify-self:end;margin-right:12px}
 .deck-pile{width:30px;height:40px}.deck-pile img{width:18px}.deck-pile small{display:none}.deck-pile>span{width:21px;height:21px;font-size:10px;bottom:-7px;right:-9px}
 .enemy-traps{grid-area:grave;align-self:end;font-size:10px}.enemy-traps span{height:22px;width:18px}
 .battle-lanes{grid-area:lanes;justify-self:center;width:max-content;gap:8px;margin:0 0 12px 12px}
 .field-row{gap:12px}.formation-rank{gap:20px;padding:2px 5px}.rank-label{left:-53px;width:46px;font-size:8px}
 .battle-divider{height:8px}.unit-name{font-size:8px;bottom:15px;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .unit-inspect{width:25px;height:25px;right:-7px;top:-7px}.unit-inspect .icon{width:14px;height:14px}
 .unit-status{right:1px;top:21px;max-height:22px;overflow:hidden}.unit-role{left:2px;top:20px}.unit-attack,.unit-health{width:20px;height:21px;font-size:13px}
 .self-zone{grid-area:self;justify-self:center;flex-direction:row;gap:14px;align-self:center;padding-bottom:15px}
 .self-zone .arena-avatar{width:44px;height:44px}.self-zone .avatar-name{max-width:115px;overflow:hidden;text-overflow:ellipsis}
 .mana-tray{position:static;max-width:80px;gap:5px;flex-direction:column}.mana-tray>strong{font-size:20px;line-height:1.2}.mana-tray>div{display:grid;grid-template-columns:repeat(5,7px);gap:4px}.mana-tray i{width:7px;height:9px}
 .turn-control{grid-area:turn;width:76px;justify-self:end;align-self:start}.end-turn{width:76px;min-height:56px;margin-top:3px;font-size:10px}.end-turn span{font-size:10px;letter-spacing:0}.round-label{letter-spacing:0}
 .own-traps{grid-area:ptrap;justify-self:start;padding:6px;font-size:10px}.player-deck{grid-area:pdeck;justify-self:start;margin-left:5px}.player-grave{grid-area:pgrave;justify-self:end;align-self:end;width:36px;height:26px;padding:3px}.player-grave small{display:none}
 .arena-instruction{grid-area:instruction;min-height:80px;font-size:11px;text-align:center;padding:8px 6px;background:#07120dc9;border:1px solid #9f936b30;border-radius:8px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
 .arena-instruction button{margin:0;min-height:30px}.special-target-choices{width:100%;max-height:120px}
 .player-hand{grid-area:hand;left:auto;width:100%;max-width:100%;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;gap:8px;padding:8px 5px 12px;scrollbar-width:thin;min-height:170px}
 .hand-card-wrap{flex:0 0 var(--hand-w);width:var(--hand-w);margin:0;z-index:1}.hand-inspect{top:27%;right:7px;width:29px;height:29px}
 .hand-mana{width:22px;height:22px;top:6px;font-size:14px}.arena-log-toggle{grid-area:log;justify-self:start;font-size:10px;min-height:28px;gap:7px}.arena-log-toggle span{display:inline}
 .match-result{position:fixed;inset:53px 0 0}.turn-banner{max-width:95vw;white-space:normal;text-align:center}
}
@media(max-aspect-ratio:6/5){
 .game-arena{--unit-w:clamp(48px,13vw,62px);--unit-h:calc(var(--unit-w)*1.3)}
 .field-slot.empty{gap:2px}.field-slot.empty .slot-rune{font-size:18px;line-height:1}.field-slot.empty small{font-size:9px;line-height:1.1;max-width:100%;padding:0 2px}
 .unit-cost{left:0;top:0}.unit-attack{left:0;bottom:0}.unit-health{right:0;bottom:0}.unit-name{bottom:24px;line-height:12px}
 .unit-role{display:none}.unit-status{top:-10px;right:auto;left:50%;transform:translateX(-50%);flex-direction:row;max-width:30px;max-height:13px;line-height:12px;background:#0c1915cc;border-radius:3px}.unit-status i{font-size:12px}
}
@media(min-aspect-ratio:6/5){
 body.in-battle{overflow-y:auto}.game-arena{height:auto;min-height:var(--app-viewport-height);overflow:clip;--unit-w:clamp(42px,5.5vw,64px);--unit-h:calc(var(--unit-w)*1.3);--hand-w:120px}
 .tabletop{height:auto;display:grid;grid-template-columns:80px minmax(0,1fr) 110px minmax(0,1fr) 80px;grid-template-areas:'odeck ohand ohand ohand pdeck' 'rival lanes lanes lanes self' 'ograve etrap turn ptrap pgrave' 'instruction instruction instruction instruction instruction' 'hand hand hand hand hand' 'log log log log log';grid-template-rows:64px auto 80px auto auto 30px;align-items:center;gap:12px 4px;padding:10px 18px 14px}
 .tabletop:before,.opponent-hand{display:none}
 .rival-zone,.self-zone,.battle-lanes,.turn-control,.deck-pile,.graveyard,.arena-instruction,.player-hand,.arena-log-toggle,.trap-zone{position:relative;inset:auto;transform:none;margin:0}
 .rival-zone{grid-area:rival;justify-self:center}.self-zone{grid-area:self;justify-self:center;gap:30px}
 .arena-avatar{width:46px;height:46px}.avatar-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rival-mana{top:calc(100% + 30px);left:50%;transform:translateX(-50%)}
 .self-zone .mana-tray{max-width:78px;width:78px;flex-direction:column;gap:5px}.self-zone .mana-tray strong{font-size:18px}
 .battle-lanes{grid-area:lanes;justify-self:center;width:max-content;gap:40px;padding-top:24px}.field-row{gap:12px}.formation-rank{gap:14px;padding:2px 4px}
 .rank-label{top:-22px}.battle-divider{position:absolute;top:20px;bottom:0;left:50%}
 .opponent-deck{grid-area:odeck;justify-self:center}.player-deck{grid-area:pdeck;justify-self:center}.deck-pile{width:32px;height:42px}.deck-pile small{display:none}.deck-pile img{width:20px}
 .opponent-grave{grid-area:ograve;justify-self:center}.player-grave{grid-area:pgrave;justify-self:center}.graveyard small{display:none}
 .enemy-traps{grid-area:etrap;justify-self:start}.own-traps{grid-area:ptrap;justify-self:end}
 .turn-control{grid-area:turn;justify-self:center;width:110px}.end-turn{width:110px;min-height:52px;flex-direction:row;justify-content:center}.end-turn span{font-size:11px;letter-spacing:0}
 .arena-instruction{grid-area:instruction;justify-self:stretch;max-width:none;min-height:80px;padding:10px;background:#07120dc9;border:1px solid #9f936b30;border-radius:8px;font-size:12px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
 .arena-instruction button{margin:0;min-height:30px}.special-target-choices{width:100%}
 .player-hand{grid-area:hand;justify-self:center;width:min(900px,100%);max-width:100%;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;gap:10px;padding:8px 5px 12px;scrollbar-width:thin}
 .hand-card-wrap{margin:0;flex:0 0 var(--hand-w);z-index:1}.arena-log-toggle{grid-area:log;justify-self:start}
 .unit-cost{left:0;top:0}.unit-attack{left:0;bottom:0}.unit-health{right:0;bottom:0}.unit-name{bottom:25px;line-height:12px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unit-role{display:none}.unit-status{top:-11px;right:auto;left:50%;transform:translateX(-50%);flex-direction:row;max-width:30px;max-height:14px;background:#0c1915cc;line-height:12px}.unit-status i{font-size:12px}
 .field-slot.empty{gap:2px}.field-slot.empty .slot-rune{font-size:18px;line-height:1}.field-slot.empty small{font-size:9px;line-height:1.1}
 .match-result{position:fixed;inset:64px 0 0}
}

/* Keep the hand and turn controls on screen; only the battlefield scrolls. */
@media(max-width:700px),(max-height:500px){
 body.in-battle{overflow:hidden}
 .game-arena{height:var(--app-viewport-height);min-height:0;display:flex;flex-direction:column;overflow:hidden;--hand-w:clamp(84px,23vw,100px);--hand-height:calc(var(--hand-w)*1.5 + 18px)}
 .arena-topbar{flex:0 0 auto;min-height:48px}
 .tabletop{flex:1;min-height:0;width:100%;height:auto;max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:'grave rival rival deck' 'lanes lanes lanes lanes' 'ptrap self self turn' 'instruction instruction instruction instruction' 'hand hand hand hand' 'log log pdeck pgrave';grid-template-rows:66px minmax(0,1fr) 62px 44px var(--hand-height) 25px;gap:4px 0;padding:0 8px 4px}
 .rival-zone{grid-area:rival;margin-top:-8px}.rival-zone .arena-avatar{width:38px;height:38px}.rival-mana{top:10px;left:calc(100% + 16px);transform:none}
 .opponent-grave{grid-area:grave}.opponent-deck{grid-area:deck}.enemy-traps{grid-area:grave;align-self:end}
 .battle-lanes{grid-area:lanes;align-self:stretch;justify-self:stretch;min-height:0;height:100%;width:auto;margin:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:12px 12px 12px 54px;align-items:center;justify-content:flex-start}
 .field-row,.battle-divider{flex-shrink:0}.battle-lanes>.battle-divider{position:relative;inset:auto;height:8px;min-height:8px;width:60%;padding:0}
 .self-zone{grid-area:self;flex-direction:row;gap:12px;padding-bottom:12px;align-self:center}.self-zone .arena-avatar{width:38px;height:38px}.self-zone .mana-tray{position:static;flex-direction:column;gap:3px;max-width:72px;width:auto}.mana-tray>strong{font-size:19px}.self-zone .avatar-name{bottom:-16px}
 .turn-control{grid-area:turn;width:76px;align-self:center;justify-self:end}.end-turn{width:76px;min-height:38px;padding:4px;flex-direction:row;gap:3px;margin-top:2px}.end-turn span{font-size:9px}.end-turn .icon{width:12px}.round-label{font-size:8px}.turn-timer{display:inline;font-size:9px;margin-left:4px}
 .own-traps{grid-area:ptrap;justify-self:start}.arena-instruction{grid-area:instruction;min-height:0;height:44px;max-width:none;overflow-y:auto;padding:3px 5px;font-size:10px;gap:4px;border-radius:5px}.arena-instruction button{min-height:26px;font-size:10px}.special-target-choices{max-height:none;overflow:visible}
 .player-hand{grid-area:hand;position:relative;inset:auto;align-self:stretch;justify-self:stretch;min-height:0;height:var(--hand-height);width:100%;max-width:100%;padding:6px 4px 12px;gap:7px;overflow-x:auto;overflow-y:hidden;background:#07120ee8;border-top:1px solid #baa36c50;border-radius:8px;z-index:6}
 .hand-card-wrap{width:var(--hand-w);flex:0 0 var(--hand-w);margin:0}.hand-inspect{width:27px;height:27px;right:5px;top:27%}.hand-mana{width:21px;height:21px;font-size:13px}
 .arena-log-toggle{grid-area:log;font-size:9px;min-height:24px}.player-deck{grid-area:pdeck;width:auto;height:23px;border:0;background:none;box-shadow:none;display:flex;gap:5px;justify-self:end;margin:0}.player-deck img{width:15px;height:20px}.player-deck>span{position:static;width:auto;height:auto;border:0;background:none;font-size:11px}.player-grave{grid-area:pgrave;width:36px;height:23px;padding:2px;align-self:center;justify-self:end}
 .empty-hand{height:auto;align-self:center}
}
@media(max-height:500px) and (min-aspect-ratio:6/5){
 .game-arena{--hand-w:72px}.tabletop{grid-template-rows:0 minmax(0,1fr) 48px 32px var(--hand-height) 22px;gap:2px 0}.rival-zone,.opponent-deck,.opponent-grave,.enemy-traps{display:none}.arena-instruction{height:32px}.arena-topbar{min-height:40px;height:40px}.battle-lanes{padding:24px 8px 10px;justify-content:center;align-items:flex-start}.battle-lanes>.battle-divider{display:none}.self-zone{padding-bottom:10px}.self-zone .arena-avatar{width:30px;height:30px}
}
.rival-zone>.rival-mana{position:absolute;left:calc(100% + 16px);right:auto;top:0;transform:none;display:flex;flex-direction:column;gap:3px;width:72px;max-width:72px}
.rival-mana>strong{font-size:19px;line-height:1.2}.rival-mana small{font-size:14px}.rival-mana>div{display:grid;grid-template-columns:repeat(5,7px);gap:4px}.rival-mana i{width:7px;height:9px}
@media(min-aspect-ratio:6/5) and (min-height:501px){.rival-zone>.rival-mana{left:50%;top:calc(100% + 30px);transform:translateX(-50%)}}
@media(max-height:500px) and (min-aspect-ratio:6/5){
 .game-arena{--hand-w:56px}.tabletop{grid-template-rows:36px minmax(0,1fr) 44px 28px var(--hand-height) 20px}
 .rival-zone,.opponent-deck,.opponent-grave{display:block}.rival-zone{margin:0}.rival-zone .arena-avatar{width:24px;height:24px}.rival-zone .avatar-name{bottom:-12px;font-size:7px}.rival-zone .avatar-health{width:20px;height:20px;font-size:12px}
 .rival-zone>.rival-mana{left:calc(100% + 15px);top:3px;max-width:55px}.mana-tray>div{display:none!important}.mana-tray>strong,.rival-mana>strong{font-size:16px}.opponent-deck{height:28px;width:22px}.opponent-grave{height:24px;padding:2px;width:36px}.opponent-grave small{display:none}
 .arena-instruction{height:28px}.end-turn{min-height:28px}.hand-inspect{width:23px;height:23px;right:2px}.hand-mana{width:17px;height:17px;top:3px;font-size:11px}
}
@media(max-width:700px),(max-height:500px){.tabletop:after{content:'↕';grid-area:lanes;align-self:end;justify-self:end;z-index:5;pointer-events:none;color:#d5c08d;background:#0b181de8;border:1px solid #9f936b55;border-radius:12px;padding:1px 7px;margin:6px;font-size:16px}}

/* Compact battle: all 18 slots and the full hand fit without scrolling. */
@media(max-width:700px),(max-height:500px){
 .game-arena{--hand-w:clamp(68px,20vw,84px);--hand-height:calc(var(--hand-w)*1.5 + 12px)}
 .arena-topbar{min-height:42px;height:42px;padding:4px 8px;flex-wrap:nowrap}.arena-title strong{font-size:10px}.arena-topbar .server-badge{display:none}
 .tabletop{grid-template-rows:50px minmax(0,1fr) 50px 34px var(--hand-height) 22px;gap:3px 0;overflow:hidden}
 .tabletop:after{display:none}
 .rival-zone{margin-top:-5px}.rival-zone .arena-avatar,.self-zone .arena-avatar{width:30px;height:30px}.avatar-health{width:23px;height:23px;font-size:15px}.avatar-name{font-size:8px;bottom:-15px}.rival-zone .avatar-name{max-width:150px}.rival-zone>.rival-mana{left:calc(100% + 12px);top:0}
 .mana-tray>div{display:none!important}.mana-tray>strong,.rival-mana>strong{font-size:18px}.self-zone{padding-bottom:12px;gap:12px}.end-turn{min-height:30px}.turn-control{width:76px}
 .battle-lanes{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:minmax(0,1fr);gap:12px;align-items:stretch;justify-content:stretch;align-self:stretch;justify-self:center;width:min(246px,calc(100% - 64px));height:100%;min-height:0;padding:6px 0;margin:0 0 0 30px;overflow:visible}
 .battle-lanes>.battle-divider{display:none}.field-row{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:minmax(0,1fr);gap:7px;min-height:0;width:100%;height:100%;align-items:stretch}
 .formation-rank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);height:100%;min-height:0;width:100%;gap:14px;padding:0 3px;align-items:stretch}
 .rank-label{top:50%;left:-50px;width:43px;transform:translateY(-50%);text-align:right;font-size:8px}
 .unit-wrap,.formation-rank>.field-slot{width:100%;height:100%;min-width:0;min-height:0}.unit-wrap>.field-slot{width:100%;height:100%}.unit-portrait{object-position:50% 20%}.field-slot{border-radius:7px}.unit-portrait,.unit-shade{border-radius:6px}
 .unit-name{font-size:8px;line-height:10px;bottom:20px}.field-slot{--unit-mana-width:17px;--unit-mana-height:18px}.unit-cost{width:17px;height:18px;font-size:11px}.unit-attack,.unit-health{width:19px;height:19px;font-size:12px;border-radius:5px}.unit-inspect{width:23px;height:23px;right:-3px;top:-4px}.unit-inspect .icon{width:13px;height:13px}.unit-status{top:0;max-height:12px}.unit-guard{left:-7px}.unit-guard .icon{width:15px;height:18px}
 .field-slot.empty .slot-rune{font-size:16px}.field-slot.empty small{font-size:8px;line-height:1}.field-slot.empty{gap:0}
 .arena-instruction{height:34px;min-height:0;overflow:hidden;font-size:9px;line-height:1.2;gap:3px;padding:2px 4px}.arena-instruction button{min-height:24px;font-size:9px}.arena-instruction .cast-confirm{padding:3px 6px}.special-target-choices{display:contents}
 .player-hand{position:relative;display:block;height:var(--hand-height);min-height:0;width:100%;padding:0;overflow:visible;background:linear-gradient(#07120ee8,#0c1a14);border-radius:7px}
 .hand-card-wrap{position:absolute;top:6px;left:calc(var(--index)*(100% - var(--hand-w))/max(1,var(--hand-count) - 1));width:var(--hand-w);height:calc(var(--hand-w)*1.5);margin:0;z-index:var(--index)}
 .hand-card-wrap.hand-selected{z-index:20}.hand-card{width:100%}.hand-inspect{display:none;top:auto;bottom:5px;right:4px;width:24px;height:24px}.hand-selected .hand-inspect{display:grid}.hand-mana{width:20px;height:20px;font-size:13px;top:3px;left:1px}.empty-hand{padding:25px;text-align:center}
}
@media(max-height:680px) and (max-aspect-ratio:6/5){
 .game-arena{--hand-w:68px}.tabletop{grid-template-rows:44px minmax(0,1fr) 46px 30px var(--hand-height) 20px;gap:2px 0}.arena-instruction{height:30px}.field-row{gap:6px}.battle-lanes{gap:10px}.unit-name{bottom:18px;font-size:7px}.arena-topbar{height:40px;min-height:40px}
}
@media(max-height:500px) and (min-aspect-ratio:6/5){
 .game-arena{--hand-w:56px}.tabletop{grid-template-columns:70px minmax(0,1fr) 70px;grid-template-areas:'rival lanes self' 'ograve lanes turn' 'etrap lanes ptrap' 'instruction instruction instruction' 'hand hand hand' 'log pdeck pgrave';grid-template-rows:42px 44px minmax(0,1fr) 28px var(--hand-height) 20px;gap:2px 6px}
 .rival-zone{grid-area:rival;margin:0}.opponent-grave{grid-area:ograve;align-self:start}.opponent-deck{display:none}.enemy-traps{grid-area:etrap;display:flex}.own-traps{grid-area:ptrap;align-self:start}.self-zone{grid-area:self;padding-bottom:10px;gap:5px}.self-zone .arena-avatar{width:24px;height:24px}.self-zone .avatar-name{max-width:70px;font-size:7px}.self-zone .mana-tray strong{font-size:14px}.rival-zone>.rival-mana{top:0;left:calc(100% + 8px);width:35px}.rival-mana>strong{font-size:14px}
 .battle-lanes{grid-area:lanes;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr);width:100%;height:100%;margin:0;gap:22px;padding:16px 0 4px}.field-row{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:10px}.formation-rank{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:7px;padding:0}.rank-label{left:50%;top:-14px;transform:translateX(-50%);width:65px;text-align:center;font-size:7px}.unit-name{font-size:7px;bottom:16px}.field-slot{--unit-mana-width:15px;--unit-mana-height:16px}.unit-cost{width:15px;height:16px;font-size:10px}.unit-attack,.unit-health{height:16px;width:17px;font-size:11px}.unit-inspect{width:20px;height:20px}.unit-status{display:none}.turn-control{width:68px}.end-turn{width:68px;min-height:26px}.arena-instruction{height:28px}.hand-mana{width:17px;height:17px;font-size:11px}
}
@media(max-width:700px),(max-height:500px){
 .arena-instruction{flex-wrap:nowrap}.arena-instruction-text{flex:1;min-width:0;max-height:2.4em;line-height:1.2;overflow:hidden;text-overflow:ellipsis}.arena-instruction button{flex-shrink:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arena-instruction .cast-confirm{flex-shrink:1}
}
@media(max-height:500px) and (min-aspect-ratio:6/5){.self-zone .avatar-health,.rival-zone .avatar-health{right:auto;left:-8px}.arena-log-toggle span{display:none}}

/* Mirrored player panels: rival on the left, own player on the right. */
@media(max-width:700px),(max-height:500px){
 .tabletop{grid-template-areas:'rival rival grave deck' 'lanes lanes lanes lanes' 'ptrap turn self self' 'instruction instruction instruction instruction' 'hand hand hand hand' 'log log pdeck pgrave'}
 .rival-zone,.self-zone{display:flex;position:relative;inset:auto;transform:none;align-items:center;align-self:center;gap:12px;width:100%;max-width:164px;height:44px;margin:0;padding:5px 8px;border:1px solid #9f936b40;border-radius:8px;background:#0b1914df}
 .rival-zone{justify-self:start;flex-direction:row}.self-zone{justify-self:end;flex-direction:row-reverse}
 .rival-zone .arena-avatar,.self-zone .arena-avatar{width:30px;height:30px;flex:0 0 30px}
 .rival-zone .avatar-name,.self-zone .avatar-name{position:absolute;top:-1px;bottom:auto;transform:none;width:83px;max-width:83px;line-height:12px;font-size:9px;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .rival-zone .avatar-name{left:41px;right:auto;text-align:left}.self-zone .avatar-name{left:auto;right:41px;text-align:right}
 .rival-zone>.rival-mana,.self-zone>.mana-tray{position:static;inset:auto;transform:none;display:block;width:auto;max-width:none;min-width:0;flex:1;padding-top:12px;margin:0}
 .rival-zone>.rival-mana{text-align:left}.self-zone>.mana-tray{text-align:right}.rival-mana>strong,.self-zone .mana-tray>strong{display:block;font-size:17px;line-height:18px}.mana-tray small{font-size:12px}
 .rival-zone .avatar-health{left:auto;right:-6px;bottom:-2px}.self-zone .avatar-health{left:-6px;right:auto;bottom:-2px}.avatar-health{width:21px;height:21px;font-size:13px}
 .opponent-grave{justify-self:center}.opponent-deck{justify-self:end;margin-right:9px}.own-traps{justify-self:start}.turn-control{justify-self:center;align-self:center;margin:0;width:76px;text-align:center}.round-label{display:block;line-height:10px}.end-turn{width:76px;margin-top:3px;min-height:30px;border-radius:7px}.end-turn span{line-height:11px}
 .arena-instruction{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:3px 7px;margin:0;border-radius:7px;background:#0b1914f2}.arena-instruction-text{display:block;text-align:left;flex:1;line-height:1.2}.arena-instruction button{align-self:center;margin:0}.arena-instruction [data-action=deselect]{min-width:46px;text-align:right;padding:0 2px}
 .enemy-traps{grid-area:grave;align-self:end;justify-self:center}
}
@media(max-height:500px) and (min-aspect-ratio:6/5){
 .tabletop{grid-template-columns:128px minmax(0,1fr) 128px;grid-template-areas:'rival lanes self' 'ograve lanes turn' 'etrap lanes ptrap' 'instruction instruction instruction' 'hand hand hand' 'log pdeck pgrave'}
 .rival-zone,.self-zone{height:40px;padding:4px 6px;gap:8px}.rival-zone .arena-avatar,.self-zone .arena-avatar{width:26px;height:26px;flex-basis:26px}.rival-zone .avatar-name,.self-zone .avatar-name{width:72px;max-width:72px;font-size:8px}.rival-zone .avatar-name{left:34px}.self-zone .avatar-name{right:34px}.rival-zone .avatar-health,.self-zone .avatar-health{width:18px;height:18px;font-size:12px}.own-traps,.turn-control{justify-self:end}
}
.rival-resources,.own-resources{display:contents}
@media(max-width:700px),(max-height:500px){
 .tabletop{grid-template-areas:'rival rival grave deck' 'lanes lanes lanes lanes' 'ptrap turn self self' 'instruction instruction instruction instruction' 'hand hand hand hand' 'log resources resources resources';grid-template-rows:70px minmax(0,1fr) 50px 34px var(--hand-height) 28px}
 .rival-zone{align-self:start;margin-top:2px}
 .rival-resources,.own-resources{display:flex;align-items:center;gap:10px;min-width:0}
 .rival-resources{grid-area:1/1/2/4;align-self:end;justify-self:start}.own-resources{grid-area:resources;justify-self:end}
 .rival-resources .deck-pile,.own-resources .deck-pile{position:static;display:flex;align-items:center;gap:4px;width:auto;height:24px;margin:0;padding:2px 4px;background:#0b1914df;border:1px solid #9f936b40;border-radius:5px;box-shadow:none}
 .rival-resources .deck-pile img,.own-resources .deck-pile img{width:12px;height:17px}.rival-resources .deck-pile>span,.own-resources .deck-pile>span{position:static;display:inline;width:auto;height:auto;background:none;border:0;font-size:11px;order:2}
 .rival-resources .deck-pile small,.own-resources .deck-pile small{position:static;display:inline;font-size:9px;white-space:nowrap;order:1;color:#c9d4c5}
 .rival-resources .graveyard,.own-resources .graveyard{position:static;display:flex;align-items:center;gap:4px;width:auto;height:24px;margin:0;padding:2px 5px;border:1px solid #9f936b40;border-radius:5px;background:#0b1914df}
 .rival-resources .graveyard small,.own-resources .graveyard small{position:static;display:inline;font-size:9px;white-space:nowrap;order:1}.rival-resources .graveyard b,.own-resources .graveyard b{order:2;font-size:11px}.rival-resources .graveyard .icon,.own-resources .graveyard .icon{width:13px;height:13px}
 .arena-log-toggle{justify-self:start}.arena-log-toggle span{display:none}.enemy-traps{grid-area:1/4/2/5;justify-self:end}
}
@media(max-height:680px) and (max-aspect-ratio:6/5){.tabletop{grid-template-rows:66px minmax(0,1fr) 46px 30px var(--hand-height) 28px}}
@media(max-height:500px) and (min-aspect-ratio:6/5){
 .tabletop{grid-template-areas:'rival lanes self' 'ograve lanes turn' 'etrap lanes ptrap' 'instruction instruction instruction' 'hand hand hand' 'log resources resources';grid-template-rows:42px 50px minmax(0,1fr) 28px var(--hand-height) 28px}
 .rival-zone{align-self:center;margin:0}.rival-resources{grid-area:ograve;flex-wrap:wrap;gap:3px;align-self:start}.enemy-traps{grid-area:etrap}.rival-resources .deck-pile,.rival-resources .graveyard{height:22px}.own-resources{grid-area:resources}
}

/* Keep conceding visible even on the narrowest battle header. */
.arena-topbar .arena-exit{flex-shrink:0;padding:6px 8px;border:1px solid #ba807466;border-radius:6px;color:#efb4a6}
@media(max-width:700px),(max-height:500px){
 .arena-topbar{gap:6px}.arena-title{min-width:0;flex:1}.arena-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arena-topbar .arena-exit{display:block;font-size:9px;line-height:12px;max-width:70px;white-space:normal}.arena-topbar .arena-audio,.arena-topbar .arena-help,.arena-topbar .arena-back{flex-shrink:0;padding:3px}
}

.card-impact{position:absolute;width:54px;height:54px;pointer-events:none;border:1px solid var(--effect-color);border-radius:50%;box-shadow:0 0 18px var(--effect-color),inset 0 0 12px var(--effect-color);color:var(--effect-color)}
.card-impact i{position:absolute;left:50%;top:50%;font:22px Georgia;line-height:1;font-style:normal;transform:translate(-50%,-50%) rotate(var(--petal-angle)) translateY(calc(-1 * var(--effect-radius)));text-shadow:0 0 8px currentColor}
.card-impact.motif-stone,.card-impact.motif-prism,.card-impact.motif-rune,.card-impact.motif-fracture{border-radius:4px}.card-impact.motif-rift,.card-impact.motif-veil{width:30px;height:65px}.card-impact.motif-flame{border-radius:50% 10% 50% 10%}.combat-block{position:absolute;color:#b9eafa;background:#112b3be8;border:1px solid #a0d2e1;border-radius:5px;padding:3px 6px;font-size:11px;white-space:nowrap}

.card-impact.effect-heal{border-style:double;border-width:4px}.card-impact.effect-shield,.card-impact.effect-armor{border-width:3px;box-shadow:0 0 8px var(--effect-color)}.card-impact.effect-status{border-style:dashed}.card-impact.effect-move{border-style:dotted}.card-impact.effect-summon{border-width:2px;outline:1px solid var(--effect-color);outline-offset:7px}

.effect-preview{outline:2px solid #ddbc78;outline-offset:1px;box-shadow:0 0 15px #ebad564d!important}.pending-mana{color:#b5e8a3;font-size:9px;font-weight:400}

/* Keep the PvP clock on the same line as the round; no extra control row. */
.turn-meta{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0}
.turn-meta .round-label,.turn-meta .turn-timer{margin:0;white-space:nowrap;line-height:1.2}
.turn-meta .turn-timer{font-variant-numeric:tabular-nums}
@media(max-width:700px),(max-height:500px){.turn-meta{height:11px;gap:4px}.turn-meta .round-label{font-size:8px}.turn-meta .turn-timer{font-size:9px}}
/* Basic attacks remain distinct from ending the turn. */
.arena-instruction .attack-all{display:flex;align-items:center;justify-content:center;gap:4px;flex:none;min-height:30px;padding:4px 8px;border:1px solid #9d704b;border-radius:5px;background:#3b251de6;color:#f2d3a7;font-size:10px;margin:0}.attack-all .icon{width:13px;height:13px}.attack-all:disabled{opacity:.45}
@media(max-width:700px),(max-height:500px){.arena-instruction .attack-all{min-height:26px;padding:2px 5px;font-size:9px;gap:3px}.attack-all .icon{width:11px;height:11px}}

.ability-tray{display:inline-flex;align-items:center;gap:3px;margin-left:8px;font-size:13px;color:#ccacff;white-space:nowrap}.ability-tray small{font-size:9px}@media(max-width:600px){.ability-tray{font-size:10px;margin-left:5px}.ability-tray small{display:none}}

/* Attack, shield and health share one readable bottom row on every board. */
.field-slot.occupied{container-type:inline-size}
.field-slot .unit-attack,.field-slot .unit-shield,.field-slot .unit-health{width:clamp(16px,28cqw,27px);height:clamp(18px,30cqw,29px);font-size:clamp(11px,20cqw,19px);bottom:0;border-radius:5px;z-index:3}
.field-slot .unit-attack{left:0}.field-slot .unit-health{right:0}
.field-slot .unit-shield{position:absolute;left:50%;transform:translateX(-50%);display:grid;place-items:center;background:linear-gradient(#287ec1,#123c71);border:1px solid #87cbff;color:#ecf8ff;font-family:Georgia,serif;font-weight:bold;text-shadow:0 1px 3px #061c35}
.field-slot .unit-ready-gem{bottom:32px;left:calc(50% - 3px);width:6px;height:6px}
@media(max-width:700px),(max-height:500px){.field-slot .unit-ready-gem{bottom:23px}}

/* Preserve the shield readout footprint and blue palette, with a shield silhouette. */
.field-slot .unit-shield{border:0;border-radius:0;background:#87cbff;clip-path:polygon(0 0,100% 0,100% 57%,86% 79%,50% 100%,14% 79%,0 57%)}
.field-slot .unit-shield::before{content:'';position:absolute;inset:1px;z-index:-1;background:linear-gradient(#287ec1,#123c71);clip-path:polygon(0 0,100% 0,100% 57%,86% 79%,50% 100%,14% 79%,0 57%)}
.unit-status:has(.attack-unavailable){display:flex;max-width:none;max-height:none;overflow:visible;z-index:4;background:none;border:0;border-radius:0;box-shadow:none;text-shadow:none}
.unit-status .attack-unavailable{display:block;flex:none;width:var(--unit-mana-width);height:var(--unit-mana-height);fill:none;stroke:#ff565f;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;filter:none;overflow:visible}
.attack-unavailable .blocked-sword,.attack-unavailable .blocked-hilt{stroke-width:1.25}
.attack-unavailable .blocked-sword{fill:#ff565f;fill-opacity:.15}
.attack-unavailable .blocked-slash{stroke-width:1.45}

.field-hazard{position:absolute;left:36%;top:3%;width:21%;height:19%;color:#ffb75f;filter:drop-shadow(0 0 3px #351a00);z-index:8;pointer-events:none}.field-hazard svg{width:100%;height:100%}.strategy-marker{position:absolute;top:23%;left:8%;color:#e7beff;font-size:15cqw;text-shadow:0 0 4px #563479;z-index:7;pointer-events:none}
/* Readable battlefield names and a consistent transparent line icon vocabulary. */
.field-slot .unit-name{left:4%;right:4%;padding:2px 1px;background:linear-gradient(90deg,#07110eee,#07110ef5,#07110eee);color:#fff3cd;font-family:'DM Sans',sans-serif;font-weight:800;font-size:clamp(9px,1vw,13px);line-height:1.2;letter-spacing:.15px;text-shadow:0 1px 2px #000,0 0 4px #000;border-bottom:1px solid var(--rarity);z-index:5;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.field-slot .unit-role{display:none}.unit-symbols{position:absolute;left:1px;top:calc(var(--unit-mana-height,22px) + 3px);display:flex;flex-direction:column;align-items:center;gap:2px;width:var(--unit-mana-width,22px);max-height:52%;z-index:6;pointer-events:none;color:#fff1c5}.battle-glyph{display:block;width:22px;height:22px;flex:none;fill:none;background:none}.unit-symbols .battle-glyph{width:clamp(10px,1.1vw,16px);height:clamp(10px,1.1vw,16px)}.glyph-impetus{color:#ffe1a0}.glyph-excess{color:#ffab84}.glyph-freezeProof{color:#8be8ff}.unit-status .battle-glyph{width:14px;height:14px}.glyph-shield{color:#87cbff}
.pvp-timebar{position:absolute;right:175px;top:110px;bottom:calc(var(--hand-height,190px) + 175px);width:24px;min-height:100px;border:1px solid #a6bc92;border-radius:8px;overflow:visible;background:#08120dc9;z-index:4;pointer-events:none}.pvp-time-fill{position:absolute;inset:0;transform:scaleY(var(--remaining,1));transform-origin:bottom;background:linear-gradient(0deg,#347b5e,#b9d194);border-radius:6px;transition:transform .25s linear}.pvp-time-label{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;color:#e5f0d2;white-space:nowrap}.pvp-timebar.urgent{border-color:#ff8573}.pvp-timebar.urgent .pvp-time-fill{background:linear-gradient(#ffae65,#d74d45)}.pvp-timebar.urgent .pvp-time-label{color:#ff9b85}
@media(max-width:700px),(max-height:500px){.field-slot .unit-name{font-size:8px;line-height:1.08;bottom:22px;padding:1px 0;letter-spacing:0}.unit-symbols{top:calc(var(--unit-mana-height,16px) + 2px);gap:1px}.unit-symbols .battle-glyph{width:10px;height:10px}.pvp-timebar{right:5px;top:65px;bottom:calc(var(--hand-height,150px) + 100px);width:13px;min-height:45px}.pvp-time-label{font-size:10px;bottom:-18px}}

@media(max-width:700px),(max-height:500px){.battle-lanes{padding-right:20px}.pvp-timebar{top:75px;bottom:calc(var(--hand-height,150px) + 155px)}}

/* Keep multiple traits above the name and stat row on compact cards. */
.unit-symbols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;width:calc(var(--unit-mana-width,22px) + 3px);gap:1px}.unit-symbols .battle-glyph{width:clamp(9px,.9vw,12px);height:clamp(9px,.9vw,12px)}.unit-symbols .battle-glyph:only-child{grid-column:1/-1}
@media(max-width:700px),(max-height:500px){.field-slot .unit-name{font-size:8px!important}.unit-symbols .battle-glyph{width:9px;height:9px}}

/* Center larger, bold traits on the same axis as the mana circle. */
.unit-symbols,.unit-symbols:has(.battle-glyph:nth-child(3)){left:calc(var(--unit-mana-width,24px)/2);top:calc(var(--unit-mana-height,25px) + 1px);width:max-content;max-height:none;display:flex;flex-direction:row;align-items:center;gap:1px;transform:translateX(-50%)}
.unit-symbols .battle-glyph{width:var(--unit-mana-width,24px);height:var(--unit-mana-height,25px);stroke-width:2.4;filter:drop-shadow(0 1px 1px #000)}
.field-slot:has(.unit-symbols .battle-glyph:nth-child(3)) .unit-name{bottom:20px;font-size:10px}
@media(max-width:700px),(max-height:500px){.field-slot:has(.unit-symbols .battle-glyph:nth-child(3)) .unit-name{font-size:8px!important}}

.own-traps .battle-glyph{display:inline-block;vertical-align:middle;width:20px;height:20px;stroke-width:2;color:#eac08b}

/* Reserve two rails per card; adjacent cards leave a small gap between rails. */
.game-arena{--rail-size:20px;--rail-gap:3px}
.unit-wrap{--unit-mana-width:var(--rail-size);--unit-mana-height:var(--rail-size);container-type:size;isolation:isolate}
.unit-rail{position:absolute;top:0;bottom:0;width:var(--rail-size);display:flex;flex-direction:column;align-items:center;gap:1px;z-index:7;pointer-events:none;color:#fff1c5}
.unit-rail-left{right:calc(100% + 1px)}.unit-rail-right{left:calc(100% + 1px)}
.rail-token,.rail-eye-space,.unit-rail .unit-cost{position:relative;inset:auto;transform:none;display:grid;place-items:center;width:var(--rail-size);height:min(var(--rail-size),calc((100cqh - 6px)/var(--rail-count)));min-height:0;flex:0 1 auto;flex-shrink:1}
.unit-rail .unit-cost{flex-shrink:0;height:var(--rail-size);font-size:13px;border-radius:50%;border:1px solid #a2c1c9;background:#184556;color:#d5f1f8;font-weight:700}
.rail-token .battle-glyph{width:100%;height:100%;stroke-width:2.4;filter:drop-shadow(0 1px 1px #000)}
.rail-token sup{position:absolute;right:-2px;bottom:-1px;font-size:8px;font-weight:800;line-height:1;color:#fff;background:#07110ed9;border-radius:2px;padding:1px}
.rail-ready{color:#8beba9}.rail-blocked{color:#ff565f}.rail-freeze{color:#87daff}.rail-poison{color:#b0ef83}.rail-burn{color:#ffab70}.rail-prepared{color:#e7beff}
.unit-wrap>.unit-inspect{right:calc(-1*var(--rail-size) - 1px);top:0;width:var(--rail-size);height:var(--rail-size);padding:2px;box-shadow:none;z-index:9}.unit-wrap>.unit-inspect .icon{width:100%;height:100%}
.field-slot .unit-ready-gem{display:none}
.field-row{gap:calc(var(--rail-size)*2 + var(--rail-gap) + 2px)}.formation-rank{padding-inline:calc(var(--rail-size) + 1px)}
@media(max-width:700px),(max-height:500px){
 .game-arena{--rail-size:17px}.battle-lanes{width:calc(100% - 64px);max-width:420px;padding:6px 21px 4px 0}
 .formation-rank{column-gap:calc(var(--rail-size)*2 + var(--rail-gap) + 2px);padding-inline:calc(var(--rail-size) + 1px)}
 .field-row{gap:7px}.rank-label{left:-47px;width:42px}.unit-rail .unit-cost{font-size:11px}
}
@media(max-height:500px) and (min-aspect-ratio:6/5){
 .game-arena{--rail-size:15px}.battle-lanes{width:100%;max-width:none;padding:18px 16px 4px;gap:38px}
 .field-row{column-gap:calc(var(--rail-size)*2 + 4px)}.formation-rank{row-gap:7px;padding-inline:0}
 .rank-label{left:50%;width:60px}
}

.rail-eye-space{flex-shrink:0;height:var(--rail-size)}.rail-token{height:min(var(--rail-size),calc((100cqh - var(--rail-size) - (var(--rail-count) - 1)*1px)/max(1,var(--rail-count) - 1)))}

.unit-wrap>.unit-inspect::before{content:"";position:absolute;inset:-5px}
@media(max-width:360px){.game-arena{--rail-size:15px}.battle-lanes{width:calc(100% - 44px)}.rank-label{font-size:7px;width:34px;left:-37px}}
@media(max-height:500px) and (min-aspect-ratio:6/5){.pvp-timebar{top:132px;bottom:calc(var(--hand-height,96px) + 68px);width:10px;min-height:30px}.pvp-time-label{bottom:2px;font-size:8px}}
.field-slot .unit-name{font-size:clamp(9px,.85vw,12px);overflow-wrap:anywhere}
@media(min-width:701px) and (min-height:501px){.formation-rank{padding-inline:0}.battle-lanes{padding-inline:21px}.pvp-timebar{right:200px}}

.arena-instruction .mana-convert{flex:none;min-height:30px;padding:4px 8px;border:1px solid #528bb9;border-radius:5px;background:#123653;color:#cae9ff;font-size:10px;white-space:nowrap}.mana-convert:disabled{opacity:.4;cursor:default}
@media(max-width:700px),(max-height:500px){.arena-instruction .mana-convert{min-height:26px;padding:2px 5px;font-size:9px}}

/* A uniform back uses only the server's opponent hand count. */
.opponent-hand{position:relative;grid-area:ohand;inset:auto;transform:none;display:flex;align-items:center;justify-self:center;gap:7px;width:180px;max-width:100%;height:48px;pointer-events:none;z-index:3;opacity:1}
.opponent-hand-cards{position:relative;flex:1;min-width:0;height:100%}
.opponent-card-back{position:absolute;left:calc(var(--index)*(100% - 32px)/max(1,var(--hidden-count) - 1));top:0;width:32px;height:46px;border-radius:4px;box-shadow:0 2px 5px #0008}
.opponent-card-back img{display:block;width:100%;height:100%;border-radius:4px}
.opponent-hand-count{flex:none;min-width:18px;font-size:12px;color:#eed8a2;text-align:center;text-shadow:0 1px 3px #000}
@media(max-aspect-ratio:6/5){.opponent-hand{grid-area:1/3/2/5;align-self:start;justify-self:end;width:calc(100% - 9px);height:36px;margin-top:5px}.opponent-card-back{width:24px;height:35px;left:calc(var(--index)*(100% - 24px)/max(1,var(--hidden-count) - 1))}}
@media(max-width:700px),(max-height:500px){.opponent-hand{grid-area:1/3/2/5;align-self:start;justify-self:end;width:calc(100% - 9px);height:36px;margin-top:5px}.opponent-card-back{width:24px;height:35px;left:calc(var(--index)*(100% - 24px)/max(1,var(--hidden-count) - 1))}.opponent-hand-count{font-size:11px;min-width:14px}}
@media(max-height:500px) and (min-aspect-ratio:6/5){.opponent-hand{grid-area:etrap;align-self:start;justify-self:start;width:120px;margin:0}.enemy-traps{align-self:end}}
@media(min-width:701px) and (min-height:501px) and (min-aspect-ratio:6/5){.opponent-hand{justify-self:start;margin-left:clamp(40px,16vw,210px)}}
.email-back{display:block;margin:14px auto 0;font-size:13px;color:#ddc28c}.email-settings{margin-bottom:0;min-width:0}.email-settings>p{margin:10px 0;overflow-wrap:anywhere}.email-settings form{display:grid;gap:12px;margin-top:18px}.email-settings label{display:grid;gap:6px;font-size:13px}.email-settings input{min-width:0;width:100%;padding:12px;background:#07110f;border:1px solid #ffffff22;border-radius:6px;color:#fff;font-size:16px}.email-settings [role=alert]{color:#f7aa9b;font-size:13px}
.monster-hosts{grid-area:ohand;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(560px,100%);justify-self:center;align-self:center;z-index:3}
.monster-host{position:relative;min-width:0;border:1px solid #c6b48166;border-radius:12px;background:linear-gradient(140deg,#243c35ed,#0c1715ed);overflow:hidden;box-shadow:0 4px 16px #0005}
.monster-target{position:relative;display:flex;flex-direction:column;justify-content:end;text-align:left;width:100%;height:116px;padding:10px;border:0;background:none;color:#f5e6bc;cursor:pointer;font:inherit;overflow:hidden}
.monster-target img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right;opacity:.72;mask-image:linear-gradient(90deg,transparent,#000 65%);z-index:-1}
.monster-target{isolation:isolate}.monster-name{font-weight:700;font-size:12px;line-height:1.2;max-width:90%;text-shadow:0 1px 4px #000}.monster-hp{font-size:20px;color:#bdf1c8}.monster-hp small{font-size:11px;color:#a4b9b0}.monster-hp span{color:#8bcfff;font-size:14px}.monster-hp-track{height:4px;margin:4px 0;background:#52615c;border-radius:3px;overflow:hidden}.monster-hp-track i{display:block;height:100%;background:#83cc9b}.monster-intent{font-size:10px;line-height:1.35;color:#e6be91;min-height:26px}.monster-eye{position:absolute;right:4px;top:4px;width:24px;height:24px;background:#10271bcc;color:#eed9a9;border:1px solid #bbbc8c66;border-radius:50%;display:grid;place-items:center;cursor:pointer}.monster-eye .icon{width:14px;height:14px}.monster-host.valid-target{border-color:#d9ec8a;box-shadow:0 0 12px #cce98866}.monster-host.slain{opacity:.3;filter:grayscale(1)}.monster-target:focus-visible,.monster-eye:focus-visible{outline:2px solid #e9d493;outline-offset:-3px}
.monster-dialog{max-width:520px}.monster-detail-art{display:block;width:100%;height:min(42dvh,380px);object-fit:contain}.monster-reinforcements{display:flex;gap:12px;justify-content:center}.monster-reinforcements>div{width:90px;font-size:11px;text-align:center}.monster-reinforcements img{width:100%;height:80px;object-fit:contain}
.adventure-monster-thumb{width:64px;height:80px;object-fit:contain;flex:none}.monster-party{top:66px!important;font-size:10px}
@media(min-aspect-ratio:6/5) and (min-width:701px) and (min-height:501px){.monster-arena .monster-hosts{grid-area:1/1/2/-1;height:116px;align-self:start}.monster-arena .tabletop{grid-template-rows:140px auto 80px auto auto 30px;padding-top:32px}}
@media(max-aspect-ratio:6/5),(max-width:700px){.monster-arena .monster-hosts{grid-area:1/1/2/-1;width:100%;gap:5px;margin:0;align-self:start}.monster-arena .tabletop{grid-template-rows:88px minmax(0,1fr) 50px 34px var(--hand-height) 28px}.monster-target{height:86px;padding:6px}.monster-name{font-size:9px;max-width:calc(100% - 12px)}.monster-hp{font-size:15px}.monster-hp small{font-size:9px}.monster-intent{font-size:8px;min-height:23px}.monster-eye{width:20px;height:20px;top:2px;right:2px}.monster-eye .icon{width:12px;height:12px}.monster-party{top:40px!important}.monster-party summary{max-width:235px!important}.adventure-monster-thumb{width:42px;height:64px}.adventure-node-number{display:none}.monster-empty{min-width:0}}
@media(max-height:680px) and (max-aspect-ratio:6/5){.monster-arena .tabletop{grid-template-rows:78px minmax(0,1fr) 46px 30px var(--hand-height) 28px}.monster-target{height:76px}.monster-intent{min-height:20px;font-size:7px}}
@media(max-height:500px) and (min-aspect-ratio:6/5){.monster-arena .monster-hosts{grid-area:rival;height:auto;display:flex;flex-direction:column;gap:3px}.monster-target{height:62px;padding:4px}.monster-name{font-size:8px}.monster-hp{font-size:12px}.monster-intent{font-size:7px;min-height:16px}.monster-party{top:38px!important}}

@media(max-aspect-ratio:6/5),(max-width:700px){.monster-arena .monster-hosts{margin-top:22px}.monster-arena .tabletop{grid-template-rows:110px minmax(0,1fr) 50px 34px var(--hand-height) 28px}}
@media(max-height:680px) and (max-aspect-ratio:6/5){.monster-arena .tabletop{grid-template-rows:100px minmax(0,1fr) 46px 30px var(--hand-height) 28px}}
@media(min-aspect-ratio:6/5) and (min-width:701px) and (min-height:501px){
 .monster-arena{display:flex;flex-direction:column;--hand-height:124px;--hand-w:76px;min-height:0}
 .monster-arena .tabletop{flex:1;min-height:0;overflow:hidden;grid-template-rows:116px minmax(0,1fr) 50px 34px var(--hand-height) 22px;gap:5px 8px;padding:32px 18px 6px}
 .monster-arena .battle-lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:48px;width:min(660px,100%);height:100%;min-height:0;align-self:stretch;align-items:stretch;transform:none;position:relative;inset:auto}
 .monster-arena .field-row{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:minmax(0,1fr);gap:8px;height:100%;min-height:0}
 .monster-arena .formation-rank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:24px;padding:0 4px;min-height:0}
 .monster-arena .unit-wrap,.monster-arena .field-slot{width:100%;height:100%;min-height:0;--unit-mana-width:18px;--unit-mana-height:19px}
 .monster-arena .unit-name{font-size:9px;bottom:18px}.monster-arena .unit-attack,.monster-arena .unit-health,.monster-arena .unit-shield{font-size:13px;width:19px;height:18px}
 .monster-arena .rank-label{left:-42px;top:50%;transform:translateY(-50%);width:38px;text-align:right;font-size:8px}
 .monster-arena .battle-divider{display:none}.monster-arena .player-hand{position:relative;inset:auto;height:100%;padding:4px 0 0;overflow:visible;align-self:end}.monster-arena .hand-card-wrap{height:114px}.monster-arena .arena-instruction{height:34px;position:relative;inset:auto}.monster-arena .arena-log-toggle{position:relative;inset:auto}
}
@media(min-aspect-ratio:6/5) and (min-width:701px) and (min-height:501px){
 body.in-battle:has(.monster-arena){overflow:hidden}
 .monster-arena{height:var(--app-viewport-height);min-height:0;overflow:hidden}.monster-arena .tabletop{width:100%;max-width:1200px}
 .monster-arena .battle-lanes{padding:8px 0;margin:0;justify-self:center}
}
@media(min-aspect-ratio:6/5) and (min-width:701px) and (min-height:501px){
 .monster-arena .arena-instruction{min-height:0;max-height:34px;padding:4px 8px;flex-wrap:nowrap;overflow:auto;font-size:10px}
 .monster-arena .turn-control{height:48px;min-height:0}.monster-arena .turn-meta{height:14px;margin:0}.monster-arena .end-turn{height:32px;min-height:32px;padding:4px}
 .monster-arena .player-hand{justify-content:center}.monster-arena .pvp-timebar{top:160px}
}
@media(max-aspect-ratio:6/5),(max-width:700px){.monster-arena .pvp-timebar{top:124px}}

/* Compact encounter portraits occupy their actual battlefield column. */
.monster-host{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}.monster-target{height:96px;padding:0;align-items:center;justify-content:start;overflow:visible;text-align:center;gap:2px}.monster-target img{position:static;width:64px;height:64px;object-fit:contain;object-position:center;opacity:1;mask-image:none;z-index:auto;filter:drop-shadow(0 3px 5px #0009)}.monster-name{display:none}.monster-hp{font-size:14px;line-height:18px;text-shadow:0 1px 4px #000}.monster-hp small{font-size:10px}.monster-hp-track{width:58px;flex-shrink:0;height:3px;margin:0}.monster-eye{right:2px;top:2px;width:20px;height:20px}.monster-statuses{position:absolute;left:0;top:22px;display:grid;gap:3px}.monster-status{position:relative;color:#89c9ff;display:block;width:19px;height:19px}.monster-status svg{width:100%;height:100%}.monster-status b{position:absolute;bottom:-2px;right:-4px;font-size:9px;text-shadow:0 1px 3px #000}.monster-status.status-burn{color:#ff986d}.monster-status.status-poison{color:#b8da7d}.monster-host.valid-target{border:0;box-shadow:none}.monster-host.valid-target .monster-target img{filter:drop-shadow(0 0 9px #d9ec8a)}
@media(min-aspect-ratio:6/5) and (min-width:701px) and (min-height:501px){.monster-arena .monster-hosts{width:min(306px,calc((100% - 48px)/2));height:96px;justify-self:center;transform:translateX(calc(-50% - 24px));gap:24px}.monster-arena .tabletop{grid-template-rows:96px minmax(0,1fr) 50px 34px var(--hand-height) 22px;padding-top:16px}}
@media(max-aspect-ratio:6/5),(max-width:700px){.monster-arena .monster-hosts{height:96px;margin-top:0;gap:24px;padding-inline:18px}.monster-arena .tabletop{grid-template-rows:96px minmax(0,1fr) 50px 34px var(--hand-height) 28px}.monster-arena:has(.monster-party) .monster-hosts{margin-top:20px}.monster-arena:has(.monster-party) .tabletop{grid-template-rows:116px minmax(0,1fr) 50px 34px var(--hand-height) 28px}.monster-target{height:96px}}
@media(max-height:680px) and (max-aspect-ratio:6/5){.monster-target{height:82px}.monster-target img{width:54px;height:54px}.monster-arena .tabletop{grid-template-rows:82px minmax(0,1fr) 46px 30px var(--hand-height) 28px}.monster-arena:has(.monster-party) .tabletop{grid-template-rows:102px minmax(0,1fr) 46px 30px var(--hand-height) 28px}}
@media(max-aspect-ratio:6/5),(max-width:700px){.monster-arena .monster-hosts{width:calc(100% - 64px);max-width:420px;justify-self:center;margin-left:30px;padding:0 calc(var(--rail-size) + 22px) 0 calc(var(--rail-size) + 1px);gap:calc(var(--rail-size)*2 + var(--rail-gap) + 2px)}}
@media(max-width:360px){.monster-arena .monster-hosts{width:calc(100% - 44px)}}

.monster-dialog{width:min(620px,calc(100vw - 24px));max-width:620px;padding:26px;scrollbar-width:thin}.monster-detail-header{display:grid;grid-template-columns:145px minmax(0,1fr);gap:18px;align-items:center;padding:10px 0 20px;border-bottom:1px solid #b8a47233}.monster-detail-header .monster-detail-art{width:145px;height:160px;object-fit:contain;filter:drop-shadow(0 4px 16px #6cbca327)}.monster-detail-header .eyebrow{font-size:9px;line-height:1.6;padding-right:22px}.monster-detail-header h2{font-size:25px;margin:6px 0 10px}.monster-detail-header .monster-lore{font-size:12px;line-height:1.6;color:#b4c7bc;margin:0 0 12px}.monster-detail-stats{display:flex;gap:18px}.monster-detail-stats>span{display:grid;grid-template-columns:21px auto;gap:2px 6px;align-items:center;color:#b4e3bf}.monster-detail-stats>span+span{color:#83c9ff}.monster-detail-stats svg{width:21px;height:21px;grid-row:1/3}.monster-detail-stats strong{font-size:19px}.monster-detail-stats strong small{font-size:11px}.monster-detail-stats small{font-size:10px;color:#aabbb3}.monster-detail-actions{display:grid;gap:10px;margin-top:18px}.monster-detail-section{padding:14px 16px;border:1px solid #93b5a52b;background:#11241b85;border-radius:10px}.monster-detail-section h3{display:flex;align-items:center;gap:8px;font:600 13px 'DM Sans',sans-serif;color:#ead9ad;margin:0 0 8px}.monster-detail-section h3 svg{width:20px;height:20px;flex-shrink:0;color:#d9bd80}.monster-detail-section p{font-size:13px;line-height:1.6;margin:0;color:#d0dbd4}.monster-detail-section>small{display:block;font-size:11px;line-height:1.5;color:#9cb1a5;margin-top:8px}.monster-detail-tag{margin-left:auto;font-size:9px;background:#305740;color:#c4ebc6;border-radius:12px;padding:4px 8px;white-space:nowrap}.preparing .monster-detail-tag{background:#303a37;color:#bcc8c0}.enraged.monster-detail-tag{background:#673827;color:#ffd0ab}.monster-reinforcements{display:grid;grid-template-columns:1fr;gap:6px;margin-top:12px}.monster-reinforcements>article{display:flex;align-items:center;gap:12px;padding:5px 8px;background:#07181188;border-radius:8px}.monster-reinforcements img{width:46px;height:50px;object-fit:contain}.monster-reinforcements strong{display:block;font-size:12px;color:#dce5dd}.monster-reinforcements small{display:block;margin-top:3px;font-size:10px;color:#9eb9a8}
@media(max-width:700px){.monster-dialog{padding:23px 16px 18px}.monster-detail-header{grid-template-columns:96px minmax(0,1fr);gap:12px;padding-top:10px;padding-bottom:16px}.monster-detail-header .monster-detail-art{width:96px;height:132px}.monster-detail-header h2{font-size:20px;line-height:1.2;margin:5px 0 8px}.monster-detail-header .monster-lore{font-size:11px}.monster-detail-stats{gap:12px}.monster-detail-stats strong{font-size:17px}.monster-detail-section{padding:12px}.monster-detail-section p{font-size:12px}.monster-detail-section h3{font-size:12px}.monster-detail-tag{font-size:8px;padding:4px 6px}}

/* Individual encounter reserves occupy the existing portrait rails. */
.monster-mana{position:absolute;left:0;top:0;display:grid;place-items:center;width:22px;height:22px;color:#8fcfff;pointer-events:none;filter:drop-shadow(0 1px 2px #000)}.monster-mana svg{position:absolute;width:100%;height:100%;opacity:.5}.monster-mana b{position:relative;font-size:12px;line-height:1}.monster-statuses{top:26px}.monster-detail-stats{flex-wrap:wrap;gap:10px 14px}.monster-detail-stats>span:last-child{color:#9cd7ff}

.monster-mana b{font-size:9px;transform:translateY(3px);font-variant-numeric:tabular-nums}.monster-mana:has(b[data-digits="2"]) b{font-size:8px}.adventure-lobby-actions{flex-wrap:wrap}.adventure-lobby-actions .button{white-space:normal}

.adventure-turn-label{font-size:11px;line-height:1.3;padding:5px 9px;background:#0b201de8;border:1px solid #bda87955;border-radius:15px;max-width:calc(100% - 80px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.combat-number.critical{color:#ffd174;font-size:14px;text-shadow:0 1px 4px #000}

/* Avoid platform serif fallbacks for the small battlefield counters. */
.unit-cost,.unit-attack,.unit-shield,.unit-health{font-family:var(--serif);font-variant-numeric:tabular-nums}

/* Inspection and ability points stay readable while the remaining board adapts. */
.game-arena{--rail-size:22px}
.unit-wrap{min-height:70px}
.unit-wrap>.unit-inspect,.unit-wrap>.unit-ability-inspect{position:absolute;right:calc(-1*var(--rail-size) - 1px);width:22px;height:22px;min-width:22px;min-height:22px;flex-shrink:0;padding:2px;display:grid;place-items:center;z-index:9;border:1px solid #c4b578;border-radius:50%;background:#14241ff5;color:#eee3c4;box-shadow:none}
.unit-wrap>.unit-inspect{top:0;bottom:auto}
.unit-wrap>.unit-inspect .icon,.unit-wrap>.unit-ability-inspect .icon{width:18px;height:18px;min-width:18px;min-height:18px}
.unit-wrap>.unit-ability-inspect{top:auto;bottom:0;border-color:#cba6ff;background:#3b205bf5;color:#e5ccff}
.unit-wrap>.unit-ability-inspect::before{content:"";position:absolute;inset:-2px}
.unit-ability-cost{position:absolute;top:24px;right:calc(-1*var(--rail-size) - 1px);z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;width:22px;height:22px;min-width:22px;min-height:22px;border:1px solid #b899db;border-radius:6px;background:#251738f5;color:#eddbff;font-size:13px;font-weight:800;line-height:13px;pointer-events:none;font-variant-numeric:tabular-nums}
.unit-ability-cost small{font-size:7px;line-height:7px}
.rail-eye-space,.rail-ability-space{flex:0 0 22px;width:22px;height:22px;min-height:22px}
.unit-rail-right{padding-bottom:24px;overflow:hidden}
.field-ability-dialog{width:min(440px,100%);text-align:center}.field-ability-dialog>.eyebrow{display:block;margin:10px 0}.field-ability-dialog p{line-height:1.7;color:var(--muted)}.field-ability-eye{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid #b795dc;border-radius:50%;background:#342149;color:#dfc4ff}.field-ability-points{color:#dfc4ff!important;font-weight:700}.field-ability-dialog .special-detail{text-align:left}
.hand-card,.field-slot.occupied{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.battle-press-preview{position:fixed;inset:var(--app-safe-top,0px) 0 var(--app-safe-bottom,0px);z-index:180;display:grid;place-items:center;pointer-events:none}
.battle-press-card{width:min(260px,calc(100vw - 32px),calc((var(--app-viewport-height,100dvh) - 52px)/1.65));filter:drop-shadow(0 12px 28px #000d)}
.battle-press-card .mage-card{width:100%;margin:0;transform:none!important}
@media(max-width:700px),(max-height:500px){
 .battle-lanes{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;grid-template-rows:repeat(2,minmax(224px,1fr));scrollbar-width:thin}
 .field-row{grid-template-rows:repeat(3,minmax(70px,1fr));min-height:224px}
 .formation-rank{min-height:70px}
}
@media(max-height:500px) and (min-aspect-ratio:6/5){
 .battle-lanes{grid-template-rows:minmax(224px,1fr)}
 .field-row{grid-template-rows:minmax(224px,1fr)}
 .formation-rank{grid-template-rows:repeat(3,minmax(70px,1fr))}
}
/* Tutorial guidance occupies its own row, preserving touch controls and safe areas. */
.tutorial-arena .hand-inspect{display:grid;width:28px;height:28px;right:4px;bottom:5px;top:auto;background:#14291f;border:1px solid #d5b97b;border-radius:50%}
.game-arena.tutorial-arena{display:flex;flex-direction:column;height:var(--app-viewport-height);min-height:0}.tutorial-arena>.tabletop{flex:1;min-height:0}.tutorial-guide{display:flex;align-items:center;gap:12px;flex:0 0 auto;max-height:130px;overflow:auto;padding:10px max(16px,var(--app-safe-left));background:#14291ff5;border-bottom:1px solid #d5b97b70;position:relative;z-index:6}.tutorial-guide-icon{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border:1px solid #d5b97b70;border-radius:50%;color:#dfc58b}.tutorial-guide-copy{flex:1;min-width:0}.tutorial-guide-copy small{font-size:10px;color:#b9c8bc}.tutorial-guide-copy strong{display:block;font-size:13px;color:#f0d99f;margin:2px 0}.tutorial-guide-copy p{font-size:13px;line-height:1.4;color:#eff1e8;margin:3px 0}.tutorial-guide .button{min-height:44px;font-size:12px;padding:8px 12px;white-space:normal;max-width:150px;flex-shrink:0}.tutorial-focus{outline:3px solid #ffe29a!important;outline-offset:3px;box-shadow:0 0 18px #e8c573b0!important}.tutorial-affected{outline:2px dashed #f3b25e;outline-offset:3px}.tutorial-read-continue{display:block;margin:20px auto 0;min-height:44px}.tutorial-result h2{font-size:18px}.tutorial-result>p{max-width:440px;font-size:13px;line-height:1.6}.tutorial-result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
@media(max-width:700px){.tutorial-guide{padding:8px 10px;gap:8px;max-height:120px}.tutorial-guide-icon{width:28px;height:28px}.tutorial-guide-copy small{font-size:9px}.tutorial-guide-copy strong{font-size:11px}.tutorial-guide-copy p{font-size:12px}.tutorial-guide .button{font-size:10px;max-width:95px;padding:6px 8px}.tutorial-arena .battle-lanes{overflow-y:auto}.tutorial-arena .match-result{padding:16px;overflow:auto;max-height:calc(var(--app-viewport-height) - 70px)}}
@media(max-height:500px){.tutorial-guide{max-height:88px}.tutorial-guide-copy strong{display:none}.tutorial-guide-copy p{font-size:11px;margin:2px 0}}

.tutorial-guide-copy .tutorial-next{color:#ffe5ab;font-weight:600}.tutorial-next b{display:inline-block;margin-right:4px;padding:1px 5px;border:1px solid #dfc58b80;border-radius:5px;font-size:10px;white-space:nowrap}.tutorial-arena .arena-instruction .tutorial-focus{outline-offset:-3px}