:root{--study-paper:#f2ead6;--study-serif:"Yu Mincho","Hiragino Mincho ProN",serif;--premium-ink:#0b1720;--premium-surface:#122732;--premium-brass:#bba06b;--premium-ivory:#f5ecd8}
/* Battle: frames sit behind the cards; values sit on a calm reading surface. */
body .game-app{background:#091620}
body .game-app:before{background:radial-gradient(ellipse at 50% 45%,#29405255,transparent 72%);inset:28px 0 0}
body .game-shell{background:transparent;border:0;box-shadow:none;gap:9px;padding:10px 18px;grid-template-rows:88px minmax(0,1fr) 171px}
body .game-shell:before{border:1px solid #a58b5240;border-radius:2px;background:radial-gradient(circle at 50% 46%,transparent 0 24%,#bfa05d0c 24.15% 24.35%,transparent 24.5% 36%,#bfa05d09 36.15% 36.3%,transparent 36.5%);box-shadow:none}
body .score-strip{gap:12px;grid-template-columns:minmax(0,1fr) 250px minmax(0,1fr)}
body .combatant{border:0;border-bottom:1px solid #807457;border-radius:0;background:#11222ddd;box-shadow:none;padding:8px 12px}
body .combatant.you{border-left:3px solid #d3b779}
body .combatant.cpu{border-right:3px solid #829aaa}
body .combatant .life-block{min-width:75px}
body .combatant .life{font:700 42px/1 Georgia,serif;color:#f9f2df;letter-spacing:0;text-shadow:none}
body .combatant .stat-label{font:500 10px/1 sans-serif;letter-spacing:.15em;color:#c4c7bd}
body .combatant .life-max{font-size:12px;color:#a7b7bf}
body .combatant .avatar{border-radius:2px;border-color:#8b7c58;background:#152c38;color:#e2d8bd;box-shadow:inset 0 0 0 3px #0c1c27}
body .mana-orb{border:0;border-left:1px solid #7d735752;border-radius:0;background:transparent;box-shadow:none}
body .mana-orb strong{font:700 28px/1 Georgia,serif;color:#e7cb89}
body .mana-orb small{color:#c6bb9f!important;letter-spacing:0;font-size:11px!important}
body .combatant .public-counts span{border:0;background:transparent;padding:3px;color:#aebfc8;font-size:12px}
body .combatant .public-counts b{color:#edf0e7;font-size:14px}
body .turn-center{border:0;border-top:1px solid #bfa56b;border-bottom:1px solid #bfa56b;border-radius:0;background:#162b36;box-shadow:none}
body .phase-copy b{font:700 18px/1.3 var(--study-serif);letter-spacing:.08em;color:#f2dfad}
body .phase-copy span{font:500 10px/1.4 sans-serif;color:#b3c2c9;letter-spacing:.1em}
body .phase-copy small{color:#c0cbd0;font-size:11px}
body .face-table{border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;padding:2px 0;gap:4px}
body .score-strip{overflow:hidden}
body .turn-center .match-score{height:22px;min-height:0;line-height:1}
body .turn-center{gap:2px;padding:4px 8px}
body .face-row{gap:8px}
body .face-tile{border:1px solid color-mix(in srgb,var(--attr) 45%,#a4aaa5);border-radius:3px!important;box-shadow:0 4px 8px #0003;background-position:center 32%;background-size:cover;overflow:visible}
body .face-shade{border-radius:2px;background:linear-gradient(180deg,#03091005 30%,#07121b66 55%,#08151f 72%)}
body .face-tile .face-num{left:6px;top:6px;width:37px;height:40px;border:1px solid #d7c8a2;border-radius:1px;background:#0b1823f2;box-shadow:inset 0 0 0 3px #243742;color:#fff4d5;font:700 28px/1 Georgia,serif;text-shadow:none}
body .face-tile .face-attr{right:7px;top:7px;width:23px;height:23px;font-size:16px;border:0;background:#0b1823d9;color:var(--attr)}
body .face-tile .board-cost{left:auto;right:7px;top:34px;min-width:22px;width:22px;height:23px;padding:0;font:700 13px Georgia,serif;border-radius:50%;background:#12222c;border:1px solid #bca976;box-shadow:none}
body .face-tile .face-copy{left:0!important;right:0!important;bottom:35px!important;min-height:25px;padding:4px 8px!important;border:0;border-radius:0;background:#0c1923ef;text-shadow:none}
body .face-tile .face-copy b{font:600 14px/1.25 sans-serif!important;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;letter-spacing:0;color:#f0eee1}
body .face-tile .face-result{left:0;right:0;bottom:0;height:34px;padding:3px 6px;border-top:1px solid #82939a42;background:#10232f;gap:5px;border-radius:0 0 2px 2px}
body .face-tile .key-effect{display:flex;align-items:center;justify-content:center;gap:4px;background:transparent;border:0;box-shadow:none;padding:0;min-height:26px;border-radius:0}
body .face-tile .key-effect+.key-effect{border-left:1px solid #8c9ca34a}
body .face-tile .key-effect b{font:700 23px/1 Georgia,serif;align-self:center}
body .face-tile .key-effect .effect-symbol{font-size:14px;align-self:center}
body .face-tile .key-effect small{font-size:10px;font-weight:400;line-height:1.2;align-self:center}
body .face-tile .key-effect.damage{color:#f2aaa2}
body .face-tile .key-effect.heal{color:#b6dfbf}
body .face-tile .key-effect.control{color:#c6c5ea}
body .face-tile.empty{border:1px solid #4a6068;box-shadow:inset 0 0 0 5px #12242e55;background:#0b1b24aa;backdrop-filter:none}
body .face-tile.empty .face-num{background:#162c39;color:#b5c4c9;border-color:#6c8187;box-shadow:none}
body .face-tile.empty .empty-face{color:#93a6ad}
body .dice-divider{border-color:#ad925050;background:transparent}
body .center-glyph{background:#122833;border:1px solid #9c8759;box-shadow:none;border-radius:1px;color:#cfb678}
body .side-caption{color:#a7b6ba;letter-spacing:.12em}
body .side-caption b{font-size:10px;color:#c1cec9}
body .end-turn-btn.board-end-turn{right:0;width:80px;height:80px;border-radius:50%;border:1px solid #ddc184;background:#263c42;box-shadow:inset 0 0 0 5px #0b1b27,inset 0 0 0 6px #887345;color:#f4dfad;padding:9px}
body .end-turn-btn.board-end-turn b{font-size:12px;line-height:1.5;white-space:nowrap}
body .end-turn-btn.board-end-turn:hover:not(:disabled){background:#4a5550;box-shadow:inset 0 0 0 5px #0b1b27,inset 0 0 0 6px #e0c48e}
body .end-turn-btn.board-end-turn:disabled{opacity:.55}
body .play-dock{gap:10px;background:transparent;border-radius:0}
body .play-dock .hand-zone{border:0;border-top:1px solid #7b7357;border-radius:0;background:#10222bbf;padding:8px}
body .play-dock .hand-head{height:22px}
body .play-dock .hand-zone{grid-template-rows:22px minmax(0,1fr)}
body .play-dock .hand{height:100%;min-height:0;box-sizing:border-box}
body .play-dock .hand-card{height:100%!important;max-height:143px}
body .mana-optional{left:8px!important;right:8px!important;bottom:40px!important;padding:0!important;border:0;background:transparent;font-size:10px!important}
body .skip-mana{left:8px;right:8px;min-height:30px;z-index:11;font-size:12px;bottom:7px}
body .charge-ready .mana-fan{padding-bottom:32px}
body .face-table .cpu-caption{padding:0;line-height:1}
body .play-dock .hand-head b{font:600 14px sans-serif;color:#d8dfd9}
body .hand-head span{color:#aabdc6;font-size:11px}
body .play-dock .hand{align-items:flex-end;padding:2px 4px 4px;justify-content:space-evenly}
body .play-dock .hand-card{border-radius:3px;border-color:#8c917e;box-shadow:0 4px 6px #0006;transition:transform .14s,border-color .14s;transform:none}
body .play-dock .hand-card:hover{transform:translateY(-5px);border-color:#efd8a0;box-shadow:0 7px 14px #0007}
body .hand-card .hand-name{font-size:13px!important;font-weight:500;letter-spacing:0}
body .hand-card .hand-info{border-radius:2px}
body .mana-zone-main{border:1px solid #928258;border-radius:3px;background:#172c34;box-shadow:inset 0 0 0 4px #0b1d28}
body .mana-compact-core strong{font-family:Georgia,serif;color:#edcf87}
body .mana-compact-core small{color:#c0cbc4}
body .mana-zone-main .zone-label{color:#e4d5ab}
body .mana-zone-main .zone-label span{color:#b4c4ca}
body .skip-mana{border-radius:2px;background:#263c42;border:1px solid #ad9761;color:#f4e6bf}
body .face-tile.target-highlight,body .face-tile.trigger{outline:2px solid #f4d990!important;outline-offset:2px;box-shadow:none!important;filter:none!important}
body .face-tile.trigger,body .face-tile.trigger-card{animation:none!important}
body .face-tile.trigger .face-num{background:#e8d093;color:#17232b;box-shadow:none}
body .card-action-modal,body .confirm-choice-modal,body .choice-target-modal{border-radius:3px;border-color:#b29a68;background:#0e202c;color:#eee8d7}

@media(max-width:1180px) and (max-height:600px) and (orientation:landscape){
 body.battle-screen-active .game-shell{gap:4px;padding-top:4px}
 body.battle-screen-active .combatant{border-radius:0;padding:2px 5px;gap:5px}
 body.battle-screen-active .combatant .life{font:700 28px/1 Georgia,serif}
 body.battle-screen-active .combatant .life-block{min-width:48px}
 body.battle-screen-active .combatant .life-max{font-size:9px}
 body.battle-screen-active .combatant .stat-label{font-size:8px}
 body.battle-screen-active .combatant .mana-orb{width:70px;min-width:70px;border-radius:0}
 body.battle-screen-active .combatant .mana-orb strong{font:700 23px/1 Georgia,serif}
 body.battle-screen-active .combatant .public-counts span{font-size:9px;padding:1px 2px}
 body.battle-screen-active .combatant .public-counts b{font-size:12px}
 body.battle-screen-active .turn-center{border-radius:0;background:#1b303a}
 body.battle-screen-active .phase-copy b{font-size:13px!important;letter-spacing:0}
 body.battle-screen-active .phase-copy span{font-size:8px!important}
 body.battle-screen-active .face-table{padding-right:0;border:0;border-radius:0;background:transparent}
 body.battle-screen-active .face-row{gap:5px}
 body.battle-screen-active .face-tile .face-num{left:4px;top:4px;width:26px;height:27px;font-size:21px;border-radius:1px;box-shadow:none}
 body.battle-screen-active .face-tile .board-cost{left:auto!important;right:5px;top:5px;width:20px;min-width:20px;height:20px;font-size:12px}
 body.battle-screen-active .face-tile .face-attr{right:29px;top:6px;width:18px;height:18px;font-size:13px}
 body.battle-screen-active .face-tile .face-copy{bottom:22px!important;left:0!important;right:0!important;min-height:18px!important;padding:2px 4px!important;line-height:1.2}
 body.battle-screen-active .face-tile .face-copy b{font-size:12px!important;line-height:1.2!important;font-weight:500!important}
 body.battle-screen-active .face-tile .face-result{height:22px;left:0;right:0;bottom:0;padding:1px 3px}
 body.battle-screen-active .face-tile .key-effect{min-height:20px;max-height:20px;padding:0;gap:3px}
 body.battle-screen-active .face-tile .key-effect b{font:700 16px/1 Georgia,serif}
 body.battle-screen-active .face-tile .key-effect .effect-symbol{font-size:11px}
 body.battle-screen-active .face-tile.empty .face-num{width:30px;height:32px;font-size:23px}
 body.battle-screen-active .board-end-turn{right:0;width:60px!important;height:60px!important;padding:5px}
 body.battle-screen-active .board-end-turn b{font-size:10px;white-space:nowrap}
 body.battle-screen-active .play-dock .hand-zone{padding:2px 3px}
 body.battle-screen-active .play-dock .hand-head{height:14px}
 body.battle-screen-active .play-dock .hand-zone{grid-template-rows:14px minmax(0,1fr)}
 body.battle-screen-active .play-dock .hand-head b{font-size:10px}
 body.battle-screen-active .hand-head span{font-size:9px}
 body.battle-screen-active .play-dock .hand-card:hover{transform:none}
 body.battle-screen-active .hand-card .hand-name{font-size:11px!important}
 body.battle-screen-active .mana-zone-main .zone-label b{font-size:12px}
 body.battle-screen-active .mana-compact-core strong{font-size:25px}
}
/* Home: local reading contrast; lower central underworld remains an art safe zone. */
body{color:var(--premium-ivory)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.premium-icon{display:inline-block;width:24px;height:24px;flex:none;vertical-align:middle}
body .app>.shared-header{background:#08131eee;border-bottom:1px solid #86724c;box-shadow:none}
body .shared-header .brand{font-family:"Yu Mincho","Hiragino Mincho ProN",serif!important;letter-spacing:.05em!important}
body button:focus-visible,body [tabindex]:focus-visible{outline:2px solid #ffe0a1;outline-offset:2px}
body .title-art-panel-v2317{background-image:url('assets/home-world-c3.webp');background-size:cover;background-position:center top;filter:none}
body .title-stage-v2317:before,body .title-stage-v2317:after{display:none}
body .title-menu-panel-v2317{position:relative;display:block;width:100%;max-width:none;height:100%;padding:0;background:none}
body .title-menu-panel-v2317:before{display:none}
body .home-title{position:absolute;top:9%;left:5%;padding:22px 35px 25px 0;margin:0;text-align:left;filter:none;isolation:isolate}
body .home-title:before{content:"";display:block;position:absolute;z-index:-1;inset:-50px -130px -40px -80px;background:radial-gradient(ellipse at 36% 48%,#07121be8 0%,#07121b8a 39%,transparent 69%);border:0;box-shadow:none;transform:none}
body .home-title:after{content:"";position:absolute;left:0;bottom:5px;width:75%;height:1px;background:linear-gradient(90deg,#e3c684,transparent)}
body .home-title h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;margin:0;line-height:1.15;letter-spacing:.12em;text-indent:0;text-shadow:0 2px 3px #000}
body .home-title h1 span{font-size:30px;letter-spacing:.25em;color:#f9eed8;margin-bottom:10px}
body .home-title h1 strong{font-size:clamp(62px,6.7vw,110px);color:#f3d997;letter-spacing:.1em;text-shadow:0 2px 2px #493e22,0 5px 18px #000b}
body .title-menu-actions-v2317{position:absolute;left:5%;top:43%;width:min(700px,62%);gap:16px}
body .title-menu-actions-v2317 .title-entry-v2317{min-height:100px;padding:18px 18px 18px 58px;text-align:left;position:relative;border:1px solid #ceaf6c;border-radius:3px;background:linear-gradient(112deg,#142d38f5,#0b1c28eb);box-shadow:inset 0 0 0 3px #081923,inset 0 0 0 4px #b5a17159,0 6px 16px #0005;backdrop-filter:blur(3px)}
body .title-entry-v2317:before{display:none}
body .title-entry-v2317>.premium-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#ead29c;width:27px;height:27px}
body .title-menu-actions-v2317 .title-entry-v2317 b{font:700 28px/1.35 "Yu Mincho","Hiragino Mincho ProN",serif;color:#fff0cf;letter-spacing:.06em}
body .title-menu-actions-v2317 .title-entry-v2317 small{font-size:14px;color:#c3cfd4}
body .title-menu-actions-v2317 .title-entry-v2317:hover{background:#27434f;border-color:#ffe1a3}
body .title-sub-actions-v2317{position:absolute;left:5%;right:5%;bottom:4.5%;width:auto;gap:0;padding:0;background:#091724e8;border-top:1px solid #b29a688f;border-bottom:1px solid #b29a688f;backdrop-filter:blur(4px)}
body .title-sub-actions-v2317 button{min-height:54px;border:0;border-right:1px solid #b29a6855;border-radius:0;box-shadow:none;background:transparent;gap:10px}
body .title-sub-actions-v2317 button:last-child{border-right:0}
body .title-sub-actions-v2317 button:hover{background:#d6ba7530}
body .title-sub-actions-v2317 b{font-size:15px;color:#f0e9d8;letter-spacing:.03em}
body .title-sub-actions-v2317 .premium-icon{color:#d6bd82;width:22px;height:22px}
body .title-version-v2317{position:absolute;right:5%;bottom:1%;padding:0}
body .title-version-v2317 b{background:none;border:0;box-shadow:none;color:#d9e0e1;font-size:11px;text-shadow:0 1px 3px #000}
.home-royal-cards{position:absolute;right:7%;top:10%;width:300px;height:230px;pointer-events:none}
.home-royal-card{position:absolute;width:112px;height:162px;border:1px solid #c9b17a;border-radius:2px;background-size:cover;background-position:50% 30%;box-shadow:inset 0 0 0 4px #18232a,inset 0 0 0 5px #b09969,0 10px 16px #0007;overflow:hidden;top:25px}
.home-royal-card.gaiaart{left:0;transform:rotate(-11deg)}.home-royal-card.aurex{left:85px;top:10px;z-index:2;transform:rotate(2deg)}.home-royal-card.lunaria{right:0;transform:rotate(13deg)}
.home-royal-card>b{position:absolute;top:8px;left:8px;background:#101e27e8;color:#f2d899;padding:2px 6px;border:1px solid #bb9b62;font:700 21px Georgia,serif}
.home-royal-card>span{position:absolute;bottom:5px;left:5px;right:5px;padding:8px 0 5px;text-align:center;font:600 10px/1.3 "Yu Mincho",serif;color:#faeac2;background:linear-gradient(transparent,#07121bf5 25%)}
/* Cosmetic board skin: exactly six grid tracks, with no action-rail paint. */
body .face-row{--board-action-rail:92px;padding-right:var(--board-action-rail);background:none;box-shadow:none;isolation:isolate}
body .face-row>.board-skin-layer{position:absolute;left:0;right:var(--board-action-rail);top:0;bottom:0;border-radius:3px;overflow:hidden;clip-path:inset(0 round 3px);pointer-events:none;z-index:-1;contain:paint}
body .face-row>.face-tile{z-index:0}
body .face-row>.face-tile:hover{z-index:60}
body .face-row>.face-tile.trigger{z-index:45}
body .face-row>.face-tile.empty{background:#0b1923b5}
body .face-row:has(.board-skin-layer[data-cosmetic-rarity]:not([data-cosmetic-rarity="0"]))>.face-tile{margin:5px 0}
body .face-table{grid-template-rows:2px minmax(0,1fr) 20px minmax(0,1fr) 2px}
body .hand-head>div:after{content:none!important}
body .mana-open:after{content:none}
body .mana-orb{cursor:pointer;touch-action:manipulation;color:var(--premium-ivory);min-height:44px;box-sizing:border-box;grid-template-rows:1fr 14px!important}
body .mana-orb:hover{background:#e0c58215;transform:none;box-shadow:inset 0 -2px #e0c582}
body .mana-orb:focus-visible{outline-offset:-2px}
body .game-shell .combatant .life,body .game-shell .key-effect b,body .game-shell .face-num{font-weight:800}
body .game-shell .face-tile .key-effect.damage{color:#ffb2a3}
body .game-shell .face-tile .key-effect.heal{color:#c2f0c5}
body .game-shell .hand-card .hand-name{font-weight:700}
body .turn-center .phase-copy span{font-size:12px;letter-spacing:0;color:#d7dfdf}
body .turn-center .phase-copy small:empty{display:none}
body .turn-center:has(.ranked-timer-panel){padding-right:64px}
body .energy-inspect-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
body .energy-inspect-counts>div{display:grid;gap:4px;text-align:center;padding:12px;background:#192e38;border:1px solid #776b4d}
body .energy-inspect-counts strong{font:800 32px/1 Georgia,serif;color:#f5dc9e}
body .energy-inspect-counts span{font-size:14px;color:#d2dcdc}
body .mana-detail-modal{width:min(620px,94vw);max-height:86dvh;overflow:auto;background:#10232e;border:1px solid #b7a06a;border-radius:4px}
body .mana-detail-modal h2{font-size:20px;margin:0}
body .mana-detail-modal .modal-actions{position:sticky;bottom:-1px;padding:10px 0 0;background:#10232e}
body .mana-detail-modal .modal-actions button{min-height:44px}
@media(max-width:1180px) and (max-height:600px) and (orientation:landscape){
 body .home-title{left:4%;top:6%;padding:12px 8px 14px 0}
 body .home-title h1 span{font-size:20px;margin-bottom:6px}
 body .home-title h1 strong{font-size:48px}
 body .title-menu-actions-v2317{left:4%;top:42%;width:64%;gap:10px}
 body .title-menu-actions-v2317 .title-entry-v2317{min-height:72px;padding:12px 10px 12px 43px}
 body .title-menu-actions-v2317 .title-entry-v2317 b{font-size:22px}
 body .title-menu-actions-v2317 .title-entry-v2317 small{font-size:12px}
 body .title-entry-v2317>.premium-icon{left:13px;width:22px;height:22px}
 body .title-sub-actions-v2317{left:max(3%,env(safe-area-inset-left));right:max(3%,env(safe-area-inset-right));bottom:5%}
 body .title-sub-actions-v2317 button{min-height:44px;gap:7px;padding:4px}
 body .title-sub-actions-v2317 b{font-size:13px}
 body .title-sub-actions-v2317 .premium-icon{width:19px;height:19px}
 body .title-version-v2317{bottom:.6%;right:3%}
 body .title-version-v2317 b{font-size:10px}
 .home-royal-cards{right:6%;top:7%;width:225px;height:145px}
 .home-royal-card{width:83px;height:120px;top:13px}
 .home-royal-card.aurex{left:66px;top:3px}.home-royal-card>span{font-size:8px}
 .home-royal-card>b{font-size:16px;top:6px;left:6px;padding:1px 4px}
 body.battle-screen-active .face-row{--board-action-rail:70px;overflow:visible!important;gap:5px}
 body.battle-screen-active .face-table{grid-template-rows:0 minmax(0,1fr) 14px minmax(0,1fr) 0}
 body.battle-screen-active .combatant .mana-orb{height:40px!important;min-height:40px;width:72px;min-width:64px;grid-template-rows:1fr 12px!important;padding:2px 5px!important}
 body.battle-screen-active .combatant .mana-orb small{font-size:10px!important;line-height:1}
 body.battle-screen-active .combatant .mana-orb>span{font-size:12px}
 body.battle-screen-active .combatant .public-counts b{font-size:13px}
 body.battle-screen-active .phase-copy span{font-size:10px!important}
 body.battle-screen-active .turn-center .match-score{height:12px}
 body.battle-screen-active .turn-center:has(.ranked-timer-panel){padding-right:4px}
 body.battle-screen-active .face-row:has(.board-skin-layer[data-cosmetic-rarity]:not([data-cosmetic-rarity="0"]))>.face-tile{margin:3px 0}
 body.battle-screen-active .key-effect b{font-size:18px!important}
 body.battle-screen-active .hand-name{font-size:11px!important}
 body .energy-inspect-counts{margin:8px 0;gap:6px}
 body .energy-inspect-counts>div{padding:7px}
 body .energy-inspect-counts strong{font-size:26px}
 body .energy-inspect-counts span{font-size:12px}
 body .mana-detail-modal{max-height:calc(100dvh - 48px);padding:12px}
 body .mana-detail-grid{max-height:100px;overflow:auto}
}
@media(min-aspect-ratio:21/9) and (min-width:1181px){.home-royal-cards{right:8%;top:12%}body .home-title{top:10%}body .title-menu-actions-v2317{top:45%;width:37%}}
/* Wide outpaint preserves the adopted castle and continues the sky to the left.
   Only the matching CSS background loads; no competing preloads or resize JS.
   Cover stays proportional; top alignment keeps sky above the original spires. */
body .title-screen-v2317{background:#081423}
@media(min-aspect-ratio:2/1){
 body .title-art-panel-v2317{background-image:radial-gradient(ellipse 32% 38% at 19% 24%,#07121b52,transparent 78%),url('assets/home-world-c3-wide.webp');background-size:cover;background-position:right top}
}
@media(max-width:760px) and (orientation:portrait){
 body .title-art-panel-v2317{background-image:linear-gradient(180deg,#081423a6,transparent 42%),url('assets/home-world-c3.webp');background-position:80% top}
}
@media(prefers-reduced-motion:reduce){.title-entry-v2317,.cosmetic-player-screen *,.premium-icon{animation:none!important;transition:none!important}}
/* The equipment atelier shares the battle's actual cosmetic selectors. */
body .cosmetic-player-screen{top:calc(28px + env(safe-area-inset-top));height:calc(100dvh - 28px - env(safe-area-inset-top));overflow:hidden;background:radial-gradient(ellipse at 20% 35%,#263d49,#09131d 68%);padding:20px max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left));color:var(--premium-ivory)}
body .cosmetic-frame{display:flex;flex-direction:column;width:100%;max-width:1680px;height:100%;min-height:0;margin:auto;overflow:hidden;border:1px solid #ae91554d;border-radius:3px;background:#0a1824d9;box-shadow:0 15px 45px #0004}
body .cosmetic-header{flex:none;min-height:64px;padding:12px 24px;border-bottom:1px solid #ae91554d;background:transparent}
body .cosmetic-header h1{font:700 27px/1.2 "Yu Mincho",serif;margin:0;color:#f5e1af;letter-spacing:.08em}
body .cosmetic-header button{min-height:40px;border:1px solid #867655;background:#122733}
body .cosmetic-nav{flex:none;padding:0 24px;gap:24px;min-height:45px;background:transparent;border-bottom:1px solid #5d655c}
body .cosmetic-nav button{padding:9px 2px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;min-width:64px;font-size:15px;color:#aebbc1}
body .cosmetic-nav button.active{color:#ffe3a3;border-bottom-color:#dec289;background:none;box-shadow:none}
body .cosmetic-player-screen button,body .cosmetic-player-screen select{font-size:14px;border-radius:3px;transition:background-color .14s,border-color .14s;color:#eae8dc}
body .cosmetic-player-screen button:active{transform:translateY(1px)}
body .cosmetic-toast,body .cosmetic-error{position:absolute;right:38px;top:24px;max-width:48%;z-index:8;margin:0;padding:10px 15px;border:1px solid #b8a06a;background:#163541;font-size:13px;box-shadow:0 5px 15px #0008}
body .cosmetic-error{background:#4b272c}
body .cosmetic-studio{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);grid-template-rows:44px minmax(0,1fr);gap:18px 28px;flex:1;min-height:0;padding:20px 24px;overflow:hidden}
.cosmetic-categories{display:flex;gap:8px;grid-column:1/-1;min-width:0;align-items:stretch}
body .cosmetic-categories button{min-height:44px;padding:8px 18px;border:1px solid transparent;border-bottom:1px solid #66706b;background:none;white-space:nowrap}
body .cosmetic-categories button.active{background:#293d45;border-color:#c4ad72;color:#fff0ca}
.cosmetic-showcase{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.cosmetic-stage-heading{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding-bottom:4px}
.cosmetic-stage-heading h2{font:600 22px/1.3 "Yu Mincho",serif;margin:0;color:#f2e5c6}
.equipped-label,.preview-label{font-size:12px;padding:4px 9px;border:1px solid #819f90;color:#bce9cf;border-radius:2px;white-space:nowrap}
.preview-label{color:#f5dba0;border-color:#bca26b}
.cosmetic-stage-actions{display:flex;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid #a68f584d;padding-top:16px;flex:none}
.cosmetic-stage-actions p{font-size:13px!important;color:#aabcc3;margin:0;max-width:55%}
body .cosmetic-equip-action{min-width:150px;min-height:44px;background:linear-gradient(110deg,#837044,#4b4c38);border:1px solid #d8bd7e;color:#fff3d4;font-weight:700}
body .cosmetic-equip-action:disabled{opacity:1;background:#183129;border-color:#57775f;color:#b7dec4}
.cosmetic-item-browser{display:flex;flex-direction:column;min-height:0;border-left:1px solid #a68f584d;padding-left:24px}
.cosmetic-browser-heading{font-size:13px;margin:0 0 12px;color:#aebdc5;font-weight:500}
.cosmetic-item-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;overflow:auto;align-content:start;min-height:0;padding:3px 7px 8px 3px;scrollbar-width:thin;scrollbar-color:#8a7b58 #10212c}
body .cosmetic-item-tile{min-width:0;position:relative;text-align:left;padding:0 0 9px;border:1px solid #4c6068;background:#102330;overflow:hidden}
body .cosmetic-item-tile>strong,body .cosmetic-item-tile>small,.cosmetic-item-state{display:block;padding:0 9px}
body .cosmetic-item-tile>strong{font-size:13px;line-height:1.45;min-height:38px;color:#e5e8df}
body .cosmetic-item-tile>small{font-size:11px;margin:8px 0 4px;color:#b2bcc2}
.cosmetic-item-state{min-height:18px;font-size:11px;color:#c5dfc4}
body .cosmetic-item-tile.is-preview{outline:2px solid #ecd093;outline-offset:0;border-color:#e3c68e}
body .cosmetic-item-tile.is-equipped:after{content:'✓';position:absolute;right:6px;top:5px;font-size:13px;color:#d7f1df;background:#1f483a;padding:1px 5px;border:1px solid #6f927d}
body .cosmetic-item-tile[data-rarity="2"]{box-shadow:inset 0 0 0 3px #a3885138}
body .cosmetic-item-tile[data-rarity="3"],body .cosmetic-item-tile[data-rarity="4"]{border-style:double;border-width:3px}
.cosmetic-preview-stage{position:relative;flex:1;min-height:180px;overflow:hidden;background:radial-gradient(ellipse at 50% 65%,#34485275,transparent 65%);isolation:isolate;width:100%}
.cosmetic-preview-stage:after{content:"";position:absolute;left:5%;right:5%;bottom:7%;height:1px;background:linear-gradient(90deg,transparent,#b2996060,transparent);pointer-events:none}
.cosmetic-preview-stage .preview-nameplate{position:absolute;left:6%;right:6%;top:16%;height:66px;display:flex;justify-content:space-between;padding:10px 18px;gap:12px;box-sizing:border-box;border:1px solid #a69a78;background:#122631}
.preview-nameplate .preview-identity{display:flex;flex-direction:column;gap:4px;min-width:0}
.preview-nameplate .preview-identity strong{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-nameplate .life-block{min-width:0!important;display:flex;align-items:baseline;gap:8px}
.preview-nameplate .life{font:700 34px Georgia,serif!important;line-height:1!important}
.preview-nameplate .stat-label{font-size:10px!important}
.cosmetic-preview-stage .preview-six-faces{position:absolute;left:4%;right:4%;width:92%;top:44%;height:32%;--board-action-rail:0px;padding:0!important;gap:7px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible}
.cosmetic-preview-stage .face-tile{margin:8px 2px!important;background:#0c1c2970!important;box-shadow:none;border:1px solid #89958977}
.cosmetic-preview-stage .face-num{position:relative!important;left:auto!important;top:auto!important;width:35px!important;height:40px!important;min-width:0;font:700 26px Georgia,serif!important;border-radius:2px!important;background:#12232ecc;color:#f5e4bd}
.cosmetic-preview-stage .preview-sleeve{position:absolute;right:10%;top:45%;width:130px;height:190px;display:none;transform:rotate(7deg)}
.cosmetic-preview-stage .deck-card{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:1px solid #c0a673;border-radius:5px;background:url('assets/card_back.webp') center/cover;box-shadow:0 14px 25px #0008}
.cosmetic-preview-stage .deck-card:nth-child(1){transform:translate(-14px,-7px) rotate(-7deg)}.cosmetic-preview-stage .deck-card:nth-child(2){transform:translate(-7px,-3px) rotate(-3deg)}
.cosmetic-preview-stage .preview-dice{display:none;position:absolute;width:70px;height:70px;left:calc(50% - 35px);top:43%}
.cosmetic-preview-stage .dice-cube{width:100%;height:100%;transform:none!important;animation:none!important}
.cosmetic-preview-stage .cube-face{inset:0!important;transform:rotate(-8deg)!important;position:absolute;display:block!important;width:100%;height:100%;border-radius:12px;padding:0;background:#243746;border:2px solid #d0bd88}
.cosmetic-preview-stage .die-face-pips{position:absolute;inset:10px;display:grid!important;width:auto!important;height:auto!important;grid-template:repeat(3,1fr)/repeat(2,1fr);padding:0!important;gap:7px!important}
.cosmetic-preview-stage .pip{position:static!important;display:block;align-self:center;justify-self:center;width:7px;height:7px;border-radius:50%;background:#f4e8c8}
.cosmetic-preview-stage.preview-sleeve .preview-six-faces,.cosmetic-preview-stage.preview-dice .preview-six-faces,.cosmetic-preview-stage.preview-nameplate .preview-six-faces,.cosmetic-preview-stage.preview-title .preview-six-faces{display:none}
.cosmetic-preview-stage.preview-sleeve .preview-sleeve{display:block;left:calc(50% - 65px);top:31%;right:auto}
.cosmetic-preview-stage.preview-dice .preview-dice{display:block}
.cosmetic-preview-stage.preview-number_card .preview-nameplate{display:none}
.cosmetic-preview-stage.preview-number_card .preview-six-faces{top:35%;height:40%}
.cosmetic-preview-stage.preview-nameplate .preview-nameplate,.cosmetic-preview-stage.preview-title .preview-nameplate{top:42%;height:82px}
.cosmetic-preview-stage.compact{height:108px;min-height:0;flex:none;margin:0;background:radial-gradient(ellipse at 50% 60%,#3a4d5b80,transparent 76%),#0b1925}
.cosmetic-preview-stage.compact .preview-nameplate{display:none}
.cosmetic-preview-stage.compact .preview-six-faces{top:28%;height:52%;left:5%;right:5%;width:90%;gap:3px}
.cosmetic-preview-stage.compact .face-tile{margin:3px 0!important;border-radius:1px!important}
.cosmetic-preview-stage.compact .face-num{width:13px!important;height:22px!important;font-size:13px!important;border-width:0!important;background:transparent!important}
.cosmetic-preview-stage.compact.preview-sleeve .preview-sleeve{display:block;left:calc(50% - 26px);top:13px;width:52px;height:74px}
.cosmetic-preview-stage.compact .preview-dice{width:40px;height:40px;left:calc(50% - 20px);top:35px}
.cosmetic-preview-stage.compact .die-face-pips{inset:5px;gap:3px!important}
.cosmetic-preview-stage.compact .pip{width:4px;height:4px}
.cosmetic-preview-stage.compact.preview-nameplate .preview-nameplate{display:flex;top:35px;height:40px;left:7%;right:7%;padding:6px}
.cosmetic-preview-stage.compact .life-block{display:none}
.cosmetic-preview-stage.compact .preview-identity strong{font-size:12px}
body .cosmetic-cards{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr);grid-template-rows:42px minmax(0,1fr);flex:1;gap:18px;padding:20px 24px;min-height:0;overflow:hidden}
body .cosmetic-card-select{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:0}
body .cosmetic-card-select select{min-width:220px;min-height:40px}
.cosmetic-card-showcase{display:flex;flex-direction:column;align-items:center;min-height:0;min-width:0}
.cosmetic-card-showcase>.cosmetic-preview-stage{min-height:0}
.preview-large-card{position:absolute;top:6%;bottom:6%;left:50%;transform:translateX(-50%);aspect-ratio:3/4;max-width:90%;background-size:cover;background-position:center;border:1px solid #c5ab75;border-radius:5px;box-shadow:0 12px 25px #0008;isolation:isolate;overflow:hidden}
.preview-card-cost{position:absolute;top:9px;left:9px;z-index:4;background:#091824e8;color:#ffe0a0;font:700 30px Georgia,serif;padding:3px 8px;border:1px solid #bfaa77}
.preview-card-name{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:14px 8px;background:#071520ee;color:#f6e8c6;text-align:center;font-size:16px}
.cosmetic-card-settings{min-height:0;overflow:auto;scrollbar-width:thin}
body .cosmetic-card-section{border:0;border-bottom:1px solid #8e7d5555;background:none;margin:0 0 15px;padding:0 0 15px;border-radius:0}
body .cosmetic-card-section h2{font-size:16px;margin:0 0 10px;color:#cbb77f}
body .cosmetic-art-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body .cosmetic-art-choice{padding:6px;border-radius:3px;background:#0d2330}
body .cosmetic-art-choice img{height:110px;object-fit:cover;width:100%;border-radius:2px}
body .cosmetic-art-choice .cosmetic-preview-stage{height:110px}
body .cosmetic-art-choice strong{font-size:12px!important}
body .cosmetic-art-choice .preview-card-cost,body .cosmetic-art-choice .preview-card-name{display:none}
body .cosmetic-collection,body .cosmetic-titles{flex:1;min-height:0;overflow:auto;padding:20px 24px;scrollbar-width:thin}
body .cosmetic-collection-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
body .cosmetic-owned-item{background:#132732;border:1px solid #897a55;border-radius:3px}
body .cosmetic-owned-item h2{font-size:15px}
body .cosmetic-owned-item>img{max-height:180px;object-fit:contain}
/* Cosmetic materials are defined by theme and by their individual role. */
@media(max-width:1180px) and (max-height:600px) and (orientation:landscape){
 body .cosmetic-player-screen{padding:6px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left))}
 body .cosmetic-header{min-height:40px;padding:3px 12px}
 body .cosmetic-header h1{font-size:20px}
 body .cosmetic-header button{min-height:32px;padding:5px 12px;font-size:12px}
 body .cosmetic-nav{padding:0 12px;min-height:36px;gap:18px}
 body .cosmetic-nav button{min-height:36px;font-size:13px;padding:5px 2px}
 body .cosmetic-studio{padding:7px 12px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:36px minmax(0,1fr);gap:9px 14px}
 body .cosmetic-categories{gap:5px}
 body .cosmetic-categories button{min-height:36px;padding:5px 11px;font-size:12px}
 .cosmetic-stage-heading{gap:7px;padding:0;flex-wrap:nowrap}
 .cosmetic-stage-heading h2{font-size:15px;line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .equipped-label,.preview-label{font-size:10px;padding:3px 5px}
 .cosmetic-stage-actions{padding-top:5px;gap:5px}
 .cosmetic-stage-actions p{font-size:10px!important}
 body .cosmetic-equip-action{min-height:36px;min-width:116px;font-size:12px;padding:5px 8px}
 .cosmetic-item-browser{padding-left:12px}
 .cosmetic-browser-heading{font-size:11px;margin:0 0 5px}
 .cosmetic-item-grid{gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));padding:2px 6px 4px 2px}
 body .cosmetic-item-tile>strong{font-size:11px;min-height:32px;padding:0 6px}
 body .cosmetic-item-tile>small{font-size:10px;margin:3px 0;padding:0 6px}
 .cosmetic-item-state{font-size:10px;padding:0 6px;min-height:13px}
 .cosmetic-preview-stage{min-height:0}
 .cosmetic-preview-stage.compact{height:68px}
 .cosmetic-preview-stage .preview-nameplate{height:35px;top:9%;padding:5px 10px}
 .preview-nameplate .preview-identity strong{font-size:12px}
 .preview-nameplate .life{font-size:23px!important}
 .cosmetic-preview-stage .preview-six-faces{top:42%;height:43%;gap:4px}
 .cosmetic-preview-stage .face-num{width:26px!important;height:30px!important;font-size:22px!important}
 .cosmetic-preview-stage .preview-sleeve{width:60px;height:83px;left:calc(50% - 30px)!important;top:35%!important}
 .cosmetic-preview-stage .preview-dice{width:48px;height:48px;left:calc(50% - 24px);top:43%}
 .cosmetic-preview-stage .die-face-pips{inset:7px;gap:4px!important}
 .cosmetic-preview-stage.compact .preview-sleeve{width:35px;height:49px;left:calc(50% - 18px)!important;top:10px!important}
 .cosmetic-preview-stage.compact .preview-dice{width:30px;height:30px;left:calc(50% - 15px);top:22px}
 .cosmetic-preview-stage.compact .pip{width:3px;height:3px}
 .cosmetic-preview-stage.compact .preview-nameplate{top:20px;height:32px}
 .cosmetic-preview-stage.compact .face-num{font-size:10px!important;width:10px!important;height:17px!important}
 body .cosmetic-cards{grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr);grid-template-rows:34px minmax(0,1fr);gap:8px;padding:7px 12px}
 body .cosmetic-card-select select{min-height:32px;font-size:12px}
 .cosmetic-card-select>span{font-size:12px}
 body .cosmetic-art-choice img,body .cosmetic-art-choice .cosmetic-preview-stage{height:72px}
 body .cosmetic-art-choice button{min-height:32px;font-size:11px}
 .preview-card-cost{font-size:20px;top:5px;left:5px;padding:2px 5px}
 .preview-card-name{font-size:11px;padding:6px 3px}
 .cosmetic-card-settings h2{font-size:13px!important}
 body .cosmetic-toast,body .cosmetic-error{top:10px;right:22px;padding:7px;font-size:11px}
 body .cosmetic-collection,body .cosmetic-titles{padding:10px 12px}
}

/* Items keep their text below the miniature, even when the browser scrolls. */
body .cosmetic-item-grid{grid-auto-rows:max-content}
body .cosmetic-item-tile{height:auto;min-height:196px;align-self:start;display:block}
body .cosmetic-title-studio{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(250px,.9fr);gap:28px;overflow:hidden}
.cosmetic-title-browser{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;padding:3px}
body .cosmetic-title-choice{text-align:left;min-height:54px;padding:12px 16px;background:#132a35;border-color:#617372}
body .cosmetic-title-choice.is-preview{border-color:#dec28b;outline:2px solid #dec28b;outline-offset:0}
@media(max-width:1180px) and (max-height:600px) and (orientation:landscape){
 body .cosmetic-item-tile{min-height:138px}
 body .cosmetic-title-studio{padding:8px 12px;gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 body .cosmetic-title-choice{min-height:44px;font-size:12px;padding:8px 10px}
}
/* Captions are absent in normal play, so board tracks are explicit. */
body .face-table{grid-template-rows:minmax(0,1fr) 18px minmax(0,1fr)}
body .face-table>.side-caption{display:none}
body .face-table>.cpu-face-row{grid-row:1}
body .face-table>.dice-divider{grid-row:2;justify-content:center}
body .face-table>.player-face-row{grid-row:3}
/* Beginner guidance shares the same three board tracks as every formal battle.
   The legacy basic-rules five-track override placed CPU faces in a zero track. */
@media(max-width:1180px) and (max-height:600px) and (orientation:landscape){
 body.battle-screen-active .face-table{grid-template-rows:minmax(0,1fr) 14px minmax(0,1fr)}
 body.battle-screen-active .game-shell .face-table:has(.beginner-help-actions){grid-template-rows:minmax(0,1fr) 30px minmax(0,1fr)!important}
body .game-shell .dice-divider:has(.beginner-help-actions){display:flex;justify-content:center;align-items:center;min-height:0;padding:0 var(--board-action-rail) 0 0;gap:0}

 body.battle-screen-active .face-table>.face-row{padding-right:var(--board-action-rail);gap:5px}
 body.cosmetic-screen-open .cosmetic-header{height:44px;min-height:44px;padding:0 12px}
 body.cosmetic-screen-open .cosmetic-nav{height:36px;min-height:36px;padding:0 12px}
 body.cosmetic-screen-open .cosmetic-nav button{height:36px;min-height:36px;padding:2px}
 body.cosmetic-screen-open .cosmetic-header button{height:36px;min-height:36px;padding:2px 12px}
 body.cosmetic-screen-open .cosmetic-categories button{height:36px;min-height:36px}
}

body .face-table .center-glyph{display:none}
body .face-tile.empty .miss{color:#bbc7cb;text-shadow:0 1px 2px #08131b;opacity:1}
/* Playable Tutorial uses the central track for live guidance. */
body.tutorial-practice-active .face-table{grid-template-rows:minmax(0,1fr) 50px minmax(0,1fr)}
body.tutorial-practice-active .tutorial-guide{grid-column:1/-1;grid-row:1}
body.tutorial-practice-active .turn-center .match-score{font-size:10px;height:12px;min-height:12px;line-height:12px}

body .mana-detail-modal .mana-view-card{width:112px;height:96px;min-height:96px;flex:none;border-radius:3px}
body .mana-detail-modal .mana-view-card>b{bottom:23px;font-size:12px;background:#071520d9;left:0;right:0;padding:4px}
body .mana-detail-modal .mana-view-card>small{bottom:6px;font-size:11px}
body .mana-detail-modal .mana-view-cost{width:24px;height:24px;font-size:15px;top:5px;left:5px}
.cosmetic-preview-stage .face-tile.preview-has-card{background-image:var(--preview-art)!important;background-size:cover!important;background-position:center 30%!important}
.cosmetic-preview-stage .preview-has-card .face-num{position:absolute!important;left:4px!important;top:4px!important;width:27px!important;height:30px!important;font-size:22px!important}
.preview-face-cost{position:absolute;right:4px;top:4px;border:1px solid #cbb888;background:#0a1b29e8;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font:700 14px Georgia,serif;color:#f5dfaa}
.preview-face-name{position:absolute;bottom:0;left:0;right:0;padding:5px 3px;background:#081925ee;font-size:11px;color:#f0e5cd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1180px) and (max-height:600px) and (orientation:landscape){
 .cosmetic-preview-stage .preview-has-card .face-num{width:20px!important;height:23px!important;font-size:18px!important;left:2px!important;top:2px!important}
 .preview-face-cost{width:16px;height:16px;font-size:11px;top:3px;right:2px}
 .preview-face-name{font-size:9px;padding:3px 1px}
}
/* Preview dimensions are independent of the fixed battle deck dimensions. */
body .cosmetic-preview-stage .preview-sleeve{width:170px!important;height:248px!important;left:calc(50% - 85px);top:16%}
body .cosmetic-preview-stage.compact .preview-sleeve{width:52px!important;height:74px!important}
body .cosmetic-toast,body .cosmetic-error{right:135px}
@media(max-width:1180px) and (max-height:600px) and (orientation:landscape){
 body .cosmetic-preview-stage .preview-sleeve{width:78px!important;height:112px!important;left:calc(50% - 39px)!important;top:10%!important}
 body .cosmetic-preview-stage.compact .preview-sleeve{width:35px!important;height:49px!important}
 body .cosmetic-toast,body .cosmetic-error{right:110px;max-width:55%}
}
body .cosmetic-preview-stage .preview-nameplate{width:88%!important;min-width:0!important;max-width:88%;box-sizing:border-box}
body .cosmetic-preview-stage.compact .preview-nameplate{width:86%!important;max-width:86%}
.cosmetic-preview-stage:is(.preview-sleeve,.preview-dice) .preview-nameplate{display:none}
body .cosmetic-art-choice{grid-template-rows:110px auto 40px;align-content:start;height:auto;min-height:0}
body .cosmetic-art-choice button{min-height:40px;height:40px}
.preview-card-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1180px) and (max-height:600px) and (orientation:landscape){
 body .cosmetic-art-choice{grid-template-rows:72px auto 32px;gap:5px}
 body .cosmetic-art-choice button{height:32px;min-height:32px}
}
@media(max-width:1180px) and (max-height:600px) and (orientation:landscape){
 .cosmetic-preview-stage:not(.compact).preview-nameplate .preview-nameplate,.cosmetic-preview-stage:not(.compact).preview-title .preview-nameplate{top:28%;height:60px}
}

/* Real-device polish: every Pick datum owns a grid cell. */
body .draft-screen:not(.complete){gap:10px;background:radial-gradient(ellipse at 50% 0,#233947,#09131d 70%)}
body .draft-head{border:0;border-bottom:1px solid #aa905766;border-radius:0;background:none;box-shadow:none;padding:4px 0 8px}
body .draft-head h1{font-family:var(--study-serif);color:var(--premium-ivory)}
body .pick-counter{border:0;border-left:1px solid #a48e5c;border-radius:0;background:none;box-shadow:none}
body .draft-card{display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-rows:32px minmax(10px,1fr) auto 34px;gap:4px;padding:8px;box-sizing:border-box;border:1px solid #9d895e;border-radius:3px;box-shadow:0 4px 12px #0006;transform:none;container-type:inline-size}
body .draft-card:before,body .draft-card:after{content:none}
body .draft-card:hover{transform:translateY(-2px);box-shadow:0 5px 14px #0007;border-color:#e4cea0}
body .draft-card.selected{border-color:#f6d990;box-shadow:inset 0 0 0 2px #c5a666;filter:none;transform:translateY(-2px);outline:none}
body .draft-card-shade{background:linear-gradient(180deg,#06101a40,transparent 35%,#071420c9 67%,#081621 83%)}
body .draft-card .draft-cost{position:static;grid-column:1;grid-row:1;width:32px;height:32px;font:700 23px/1 Georgia,serif;border-radius:2px;box-shadow:none}
body .draft-card>.card-kind-badge{position:static;grid-column:2;grid-row:1;align-self:start;justify-self:start;min-width:0;margin:0;padding:4px;gap:3px;font-size:12px;white-space:nowrap;background:#081622e8;border:0;border-radius:2px}
body .draft-card>.card-kind-badge b,body .draft-card>.card-kind-badge i{display:none}
body .draft-card.kind-spell>.card-kind-badge b{display:inline;font-size:12px}
body .draft-card .draft-attr{position:static;grid-column:3;grid-row:1;align-self:start;display:flex;align-items:center;gap:4px;max-width:100%;padding:4px;font-size:12px;border:0;border-radius:2px;background:#081622e8}
body .draft-card .draft-attr i{font-style:normal;font-size:14px}
body .draft-card .draft-card-copy{display:contents;padding:0}
body .draft-card .draft-card-copy>small{display:none}
body .draft-card .draft-card-copy>b{grid-column:1/-1;grid-row:3;min-width:0;width:100%;margin:0;padding:3px 0;font:700 16px/1.3 sans-serif;letter-spacing:0;text-shadow:0 1px 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .draft-card .draft-effects{grid-column:1/-1;grid-row:4;min-width:0;width:auto;display:flex;align-items:center;gap:8px;margin:0 40px 0 0;padding:0;max-height:none;overflow:hidden}
body .draft-card .pick-effect{display:flex;align-items:center;gap:3px;min-width:0;white-space:nowrap;color:#d2dce3;font:600 13px/1.2 sans-serif}
body .draft-card .pick-effect i{font-style:normal;font-size:13px}
body .draft-card .pick-effect b{font:700 20px/1 Georgia,serif}
body .draft-card .pick-effect small{font:500 12px/1.2 sans-serif;overflow:hidden;text-overflow:ellipsis}
body .draft-card .pick-effect.damage{color:#ffb6a7}body .draft-card .pick-effect.heal{color:#bce4c4}body .draft-card .pick-effect.draw{color:#b2d7f4}
body .draft-card .draft-info{display:grid!important;place-items:center;position:static;grid-column:3;grid-row:4;justify-self:end;align-self:center;width:34px;height:34px;min-width:34px;min-height:34px;padding:0;border:1px solid #ad986b;border-radius:2px;background:#152b37;color:#f1dfb7;font:20px/1 sans-serif;z-index:9;touch-action:manipulation}
body .draft-card .draft-check{left:auto;right:8px;top:44px;width:23px;height:23px;border:1px solid #f6d990;border-radius:2px;font-size:17px;transform:none;box-shadow:none;background:#d5b879}
body .draft-card.selected .draft-check{transform:none}
body .draft-footer{border:0;border-top:1px solid #a48e5c66;border-radius:0;background:#0c1b25;box-shadow:none;padding:6px 0}
body .draft-footer>.btn{border:1px solid #b19a64;border-radius:3px;background:#30444a;color:#f5e6c6;box-shadow:inset 0 0 0 2px #101f29;min-height:42px}
body .draft-footer>.btn:disabled{opacity:.5}
@media(max-width:1180px) and (max-height:600px) and (orientation:landscape){
 body.match-flow-screen-active .draft-screen:not(.complete){grid-template-rows:46px minmax(0,1fr) 42px;gap:5px}
 body.match-flow-screen-active .draft-head{padding:0 4px 4px}
 body.match-flow-screen-active .draft-grid{grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;overflow:visible;padding:2px}
 body.match-flow-screen-active .draft-card{min-height:0;padding:5px;grid-template-columns:26px minmax(0,1fr) auto;grid-template-rows:24px minmax(0,1fr) 21px 28px;gap:2px;border-width:1px;border-radius:3px}
 body.match-flow-screen-active .draft-card .draft-cost{width:24px;height:24px;font-size:19px}
 body.match-flow-screen-active .draft-card>.card-kind-badge{padding:3px 1px;font-size:11px}
 body.match-flow-screen-active .draft-card .draft-attr{padding:3px;font-size:11px;gap:3px}
 body.match-flow-screen-active .draft-card .draft-attr i{font-size:12px}
 body.match-flow-screen-active .draft-card .draft-card-copy>b{font-size:13px;line-height:17px;padding:2px 0;margin:0}
 body.match-flow-screen-active .draft-card .draft-effects{margin:0 34px 0 0;gap:6px}
 body.match-flow-screen-active .draft-card .pick-effect{font-size:12px;gap:2px}
 body.match-flow-screen-active .draft-card .pick-effect b{font-size:16px}
 body.match-flow-screen-active .draft-card .pick-effect small{font-size:10px}
 body.match-flow-screen-active .draft-card .draft-info{width:28px;height:28px;min-width:28px;min-height:28px;font-size:19px}
 body.match-flow-screen-active .draft-card .draft-check{top:32px;right:5px;width:18px;height:18px;font-size:14px}
 body.match-flow-screen-active .pick-counter{height:40px;width:86px;padding:0 6px;grid-template-rows:24px 14px}
 body.match-flow-screen-active .pick-counter strong{font-size:24px}
 body.match-flow-screen-active .pick-counter small{font-size:11px}
 body.match-flow-screen-active .draft-footer{padding:0 4px}
 body.match-flow-screen-active .draft-footer>.btn{min-height:38px;padding:6px 12px}
 body.match-flow-screen-active .tutorial-card-label{top:34px;left:5px;transform:none;font-size:9px;line-height:11px;height:13px;padding:0 4px;box-sizing:border-box;max-width:calc(100% - 36px)}
}
/* Two-sided camera safe bounds are shared by the title, entrances and header. */
:root{--polish-safe-left:env(safe-area-inset-left,0px);--polish-safe-right:env(safe-area-inset-right,0px)}
body .app>.topbar.shared-header{padding-left:calc(var(--polish-safe-left) + 8px)!important;padding-right:calc(var(--polish-safe-right) + 8px)!important}
body .title-menu-panel-v2317{width:auto;margin-left:var(--polish-safe-left);margin-right:var(--polish-safe-right)}
body .home-title{top:2%;left:4%;padding-top:10px}
body .title-menu-actions-v2317{left:4%;top:56%;width:44%;gap:12px}
body .title-menu-actions-v2317 .title-entry-v2317{min-height:86px;padding:12px 10px 12px 44px}
body .title-menu-actions-v2317 .title-entry-v2317 b{font-size:clamp(20px,2vw,28px);white-space:nowrap}
body .title-menu-actions-v2317 .title-entry-v2317 small{font-size:12px;white-space:nowrap}
body .title-entry-v2317>.premium-icon{left:12px;width:22px;height:22px}
body .home-royal-cards{right:3%;top:1%;width:235px;height:176px}
body .home-royal-card{width:86px;height:124px;top:16px}
body .home-royal-card.aurex{left:69px;top:5px}
body .home-royal-card>span{font-size:8px}
@media(max-width:1180px) and (max-height:600px) and (orientation:landscape){
 body .home-title{top:0;left:4%;padding:7px 0 8px}
 body .home-title h1 span{font-size:16px;margin-bottom:3px}
 body .home-title h1 strong{font-size:40px}
 body .title-menu-actions-v2317{top:57%;width:45%;gap:8px}
 body .title-menu-actions-v2317 .title-entry-v2317{min-height:58px;padding:7px 6px;text-align:center}
 body .title-menu-actions-v2317 .title-entry-v2317 b{font-size:19px;letter-spacing:0}
 body .title-menu-actions-v2317 .title-entry-v2317 small{font-size:10px;letter-spacing:0}
 body .title-entry-v2317>.premium-icon{display:none}
 body .home-royal-cards{width:165px;height:106px;top:0;right:3%}
 body .home-royal-card{width:61px;height:88px;top:9px}
 body .home-royal-card.aurex{left:49px;top:1px}
 body .home-royal-card>b{font-size:12px;padding:1px 3px;top:5px;left:5px}
 body .home-royal-card>span{font-size:6px;padding:3px 0}
}
body .draft-card>.card-kind-badge em{font:600 12px/1.2 sans-serif;color:#e1d2ae;white-space:nowrap}
body .draft-card>.card-kind-badge{box-shadow:none}

/* Portrait Home: give the logo, world and entrances separate layout rows. */
@media(max-width:760px) and (orientation:portrait){
 body .title-menu-panel-v2317{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(164px,1fr) auto auto auto;gap:12px;height:auto;min-height:calc(100dvh - 52px);box-sizing:border-box;padding:18px 16px max(12px,env(safe-area-inset-bottom))}
 body .home-title{position:relative;grid-row:1;top:auto;left:auto;width:100%;margin:0;padding:0;justify-self:start}
 body .home-royal-cards{position:relative;grid-row:2;right:auto;top:auto;width:190px;height:138px;margin-top:16px;justify-self:end;align-self:start}
 body .home-royal-card{width:70px;height:102px;top:16px}
 body .home-royal-card.aurex{left:56px;top:5px}
 body .title-menu-actions-v2317{position:relative;grid-row:3;left:auto;top:auto;width:100%;gap:10px}
 body .title-menu-actions-v2317 .title-entry-v2317{min-height:74px;padding:10px 14px 10px 46px}
 body .title-menu-actions-v2317 .title-entry-v2317 b{font-size:24px}
 body .title-sub-actions-v2317{position:relative;grid-row:4;left:auto;right:auto;bottom:auto;width:100%}
 body .title-sub-actions-v2317 button{min-height:52px;padding:6px}
 body .title-sub-actions-v2317 b{font-size:12px}
 body .title-version-v2317{position:relative;grid-row:5;right:auto;bottom:auto;justify-self:end}
}

@media(max-width:1180px) and (max-height:600px) and (orientation:landscape){
 body .title-sub-actions-v2317{left:7%;right:7%;width:auto}
 body .title-sub-actions-v2317 button{min-width:0;gap:5px}
 body .title-sub-actions-v2317 b{font-size:12px;white-space:nowrap}
 body .title-sub-actions-v2317 .premium-icon{width:17px;height:17px}
}
/* Keep the live Tutorial guidance bounds clear of the Turn End rail. */
body.tutorial-practice-active .tutorial-guide{width:calc(100% - 12px)}

/* Deck comparison: every owned instance remains visible; selection handlers are unchanged. */
body .deckbuild-attr{display:none}
body .deckbuild-card{border-radius:4px}
@media (orientation:landscape) and (max-width:1180px) and (max-height:600px){
 body.match-flow-screen-active .match-flow-app>.deckbuilder-screen{grid-template-columns:minmax(0,1fr);grid-template-rows:30px 22px minmax(0,1fr) 30px;gap:3px;padding:4px calc(var(--polish-safe-right) + 6px) 4px calc(var(--polish-safe-left) + 6px);overflow:hidden}
 body.match-flow-screen-active .deckbuilder-head{grid-column:1;grid-row:1;padding:2px 6px;border-radius:3px;background:#091827df;border-color:#8f79534d}
 body.match-flow-screen-active .deckbuilder-head h1{font-size:17px;line-height:22px;margin:0}
 body.match-flow-screen-active .deckbuilder-head .kicker{display:none}
 body.match-flow-screen-active .deckbuilder-counter{display:flex;align-items:center;gap:4px;width:auto;height:26px;border:0;background:none;padding:0}
 body.match-flow-screen-active .deckbuilder-counter strong{font-size:20px}
 body.match-flow-screen-active .deckbuilder-counter span{font-size:12px}
 body.match-flow-screen-active .deckbuilder-counter small{font-size:10px;margin-left:6px}
 body.match-flow-screen-active .deckbuilder-tools,body.match-flow-screen-active .tutorial-remove-banner{grid-column:1;grid-row:2;gap:6px}
 body.match-flow-screen-active .deckbuilder-tools .btn{height:22px;min-height:0;padding:1px 8px;font-size:11px;line-height:18px;border-radius:3px}
 body.match-flow-screen-active .tutorial-remove-banner b,body.match-flow-screen-active .tutorial-remove-banner span{font-size:12px;line-height:20px}
 body.match-flow-screen-active .mobile-deck-summary{display:none}
 body.match-flow-screen-active .deckbuilder-grid{grid-column:1;grid-row:3;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(var(--deck-overview-rows),minmax(0,1fr));grid-auto-rows:auto;align-content:stretch;gap:4px;padding:0;overflow:hidden;touch-action:manipulation}
 body.match-flow-screen-active .deckbuild-card{display:grid;grid-template-columns:18px 16px minmax(0,1fr) 20px;grid-template-rows:16px minmax(10px,1fr) 22px;column-gap:2px;min-height:0;min-width:0;box-sizing:border-box;padding:2px 3px;border:1px solid #6f6b60;border-radius:3px;background-position:center 30%;box-shadow:none;transform:none}
 body.match-flow-screen-active .deckbuild-card:before{display:none}
 body.match-flow-screen-active .deckbuild-card.selected{border-color:#bca272;box-shadow:inset 0 0 0 1px #d6bd7f40;filter:none}
 body.match-flow-screen-active .deckbuild-card:not(.selected){border-color:#727888;filter:saturate(.45);box-shadow:inset 0 0 0 1px #8590a44d}
 body.match-flow-screen-active .deckbuild-card.tutorial-remove.selected{border-color:#e79b88;box-shadow:inset 0 0 0 1px #e79b8855}
 body.match-flow-screen-active .deckbuild-shade{z-index:-1;background:linear-gradient(180deg,#061321e8 0%,#06132142 35%,#061321df 60%,#061321fa 100%)}
 body.match-flow-screen-active .deckbuild-cost{position:static;grid-column:1;grid-row:1;width:18px;height:16px;font-size:14px;line-height:16px;box-sizing:border-box;border-radius:2px}
 body.match-flow-screen-active .deckbuild-attr{display:block;grid-column:2;grid-row:1;font-size:14px;line-height:16px;text-align:center;color:var(--attr);text-shadow:0 1px 3px #000}
 body.match-flow-screen-active .deckbuild-check{position:static;grid-column:3;grid-row:1;justify-self:end;align-self:center;padding:0 2px;border:0;border-radius:2px;font-size:9px;line-height:14px;white-space:nowrap;color:#eee3c9;background:#081521eb}
 body.match-flow-screen-active .deckbuild-card:not(.selected) .deckbuild-check{background:#693c36;color:#fff1e8}
 body.match-flow-screen-active .deckbuild-card>.card-kind-badge{position:static;grid-column:1/-1;grid-row:2;align-self:center;justify-self:start;display:flex;gap:3px;min-width:0;padding:0 2px;margin:0;border:0;border-radius:1px;background:#071322c9;font-size:10px;line-height:10px;box-shadow:none}
 body.match-flow-screen-active .deckbuild-card>.card-kind-badge b{display:inline;font-size:10px;line-height:10px}
 body.match-flow-screen-active .deckbuild-card>.card-kind-badge i{display:none}
 body.match-flow-screen-active .deckbuild-card>.card-kind-badge em{font:600 10px/10px sans-serif}
 body.match-flow-screen-active .deckbuild-copy{position:static;grid-column:1/-1;grid-row:3;min-width:0;align-self:center}
 body.match-flow-screen-active .deckbuild-copy>small,body.match-flow-screen-active .deckbuild-effects{display:none}
 body.match-flow-screen-active .deckbuild-copy>b{margin:0;display:block;font:600 11px/11px sans-serif;color:#fff2da;white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip;max-height:22px}
 body.match-flow-screen-active .deckbuild-info{display:grid!important;place-items:center;position:static;grid-column:4;grid-row:1;width:20px;height:16px;min-height:0;box-sizing:border-box;padding:0;border-radius:3px;font:14px/16px sans-serif;background:#0c1b2de8}
 body.match-flow-screen-active .deckbuilder-footer{grid-column:1;grid-row:4;gap:8px;padding:1px 6px;border-radius:3px}
 body.match-flow-screen-active .deckbuilder-footer b{font-size:13px}
 body.match-flow-screen-active .deckbuilder-footer .btn{height:26px;min-height:0;padding:2px 10px;font-size:12px;line-height:20px;border-radius:3px}
 body.match-flow-screen-active .deckbuilder-screen>.online-turn-wait{left:calc(var(--polish-safe-left) + 8px);bottom:35px;max-width:calc(100% - var(--polish-safe-left) - var(--polish-safe-right) - 16px);font-size:11px;padding:2px 6px}
}

/* Card detail: fixed summary and actions, bounded ability-only scrolling. */
body .card-detail-modal[data-card-detail-formal]{box-sizing:border-box;height:min(540px,calc(100dvh - 48px));max-height:calc(100dvh - 48px);display:grid;grid-template-columns:minmax(150px,38%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:stretch;overflow:hidden;overscroll-behavior:none}
body .card-detail-modal[data-card-detail-formal] .detail-art{grid-column:1;grid-row:1;height:100%;min-height:0;box-sizing:border-box}
body .card-detail-modal[data-card-detail-formal] .detail-body{grid-column:2;grid-row:1;display:grid;grid-template-rows:auto minmax(0,1fr);align-self:stretch;min-width:0;min-height:0;max-height:none;height:100%;overflow:hidden;padding:0;scrollbar-gutter:auto}
body .card-detail-modal .detail-summary{min-width:0;padding:0 0 8px}
body .card-detail-modal .detail-summary-cost{display:block;margin-top:4px;color:#dec28b;font-size:13px}
body .card-detail-modal .detail-ability-scroll{min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;padding:0 6px 12px 0;scroll-padding-bottom:12px}
body .card-detail-modal[data-card-detail-formal]>.modal-actions{grid-column:1/-1;grid-row:2;position:static;min-height:44px;align-self:stretch;margin:0;padding:0;background:none}
body .card-detail-modal .detail-ability-scroll:focus-visible{outline:1px solid #dec28b;outline-offset:-1px}
@media(max-width:1180px) and (max-height:600px) and (orientation:landscape){
 body .card-detail-modal[data-card-detail-formal]{height:100%;max-height:100%;grid-template-columns:minmax(145px,27%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) 48px;gap:8px 14px}
 body .card-detail-modal .detail-summary{padding-bottom:4px}
 body .card-detail-modal .detail-summary .modal-kicker{margin-bottom:3px}
 body .card-detail-modal .detail-ability-scroll .big-key-effects{margin-top:0}
}
/* Persistent text, not animation, identifies the local player's current turn. */
body.battle-screen-active .game-app .turn-center .phase-copy [data-turn-owner]{font:800 24px/1.2 sans-serif;font-size:24px!important;letter-spacing:0;color:#fff1c9;white-space:normal;overflow:visible;text-overflow:clip}
body .turn-center .phase-copy .first-turn-copy{display:block;font:700 14px/1.3 sans-serif;font-style:normal;color:#f4d58e;margin:2px 0}
body .combatant.is-turn-active{position:relative;outline:2px solid #e2bf72;outline-offset:-2px;box-shadow:inset 0 0 18px #e2bf721a}
body.battle-screen-active .game-app .combatant .active-turn-badge{position:absolute;z-index:4;pointer-events:none;top:2px;right:5px;padding:1px 4px;border-radius:3px;background:#efd494;color:#16222a;font:800 9px/1.2 sans-serif;letter-spacing:.03em}
body .active-turn-badge[hidden]{display:none}
.battle-turn-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:1180px){
 body.battle-screen-active .game-app .turn-center .phase-copy [data-turn-owner]{font-size:16px!important;line-height:1.15}
 body.battle-screen-active .turn-center .phase-copy .first-turn-copy{font-size:11px;line-height:1.1;margin:1px 0}
 body.battle-screen-active .turn-center .phase-copy small{display:none}
}
@media(max-width:1180px) and (max-height:600px) and (orientation:landscape){
 body.battle-screen-active .turn-center:has(.first-turn-copy){grid-template-rows:1fr!important}
 body.battle-screen-active .turn-center:has(.first-turn-copy)>.match-score{display:none}
 body.battle-screen-active .turn-center:has(.first-turn-copy)>.phase-copy{grid-row:1;align-self:center}
 body.battle-screen-active .game-app .turn-center .phase-copy [data-turn-owner]{font-size:14px!important}
 body.battle-screen-active .turn-center:has(.first-turn-copy) .ranked-timer-panel.embedded{position:static;grid-row:2;grid-column:1}
}
@media(orientation:portrait) and (max-width:700px){
 /* The existing rotation gate keeps battle controls hidden. Its turn text stays visible. */
 body.battle-screen-active .battle-turn-status{position:fixed;z-index:10001;top:max(24px,env(safe-area-inset-top));left:16px;right:16px;width:auto;height:auto;margin:0;padding:14px;border:1px solid #d9bb76;border-radius:6px;background:#142633;color:#fff1c9;clip-path:none;white-space:normal;text-align:center;font:700 18px/1.6 sans-serif}
}