/* Native battle: field first, then a compact Pokémon-style command panel. */
body[data-mode=native]{background:#07131d;color:#eaf3ef}
body[data-mode=native] .top{padding:10px max(20px,calc((100vw - 1260px)/2));border-bottom:1px solid #557e85;background:#101f2d}
body[data-mode=native] .top h1{font-size:18px;color:#f5e7bd}
body[data-mode=native] .top small{color:#82d7d6}
body[data-mode=native] .mode-switch{display:none}
body[data-mode=native] main{display:block;max-width:1300px;margin:14px auto;padding:0 20px}
body[data-mode=native] .game{border:2px solid #78b7b7;border-radius:12px;overflow:hidden;box-shadow:0 0 0 4px #132c3b,0 18px 50px #020710b8}
body[data-mode=native] .panel,body[data-mode=native] #native-toolbar{display:none}
body[data-mode=native] .hud{padding:9px 18px;background:#142b3a;border-bottom:1px solid #3f707c}
body[data-mode=native] .hud>div:first-child{display:flex;align-items:center;gap:12px}
body[data-mode=native] .hud strong{font-size:15px;letter-spacing:.05em}
body[data-mode=native] .hud span{font-size:11px}
body[data-mode=native] .arena{background-position:center 62%}
body[data-mode=native] canvas{aspect-ratio:1200/400}
body[data-mode=native] .location{font-size:10px;letter-spacing:.14em;text-shadow:0 2px 3px #07131d}
body[data-mode=native] #foe-plates>div{bottom:3%;width:16%;font-size:11px}
body[data-mode=native] #foe-plates strong{padding:4px 6px;border:1px solid #b88d78;border-radius:5px;background:#1b2c39e8;color:#ffe8c4}
body[data-mode=native] #native-controls{padding:0;border-top:3px solid #96caca;background:#112533}
body[data-mode=native] .battle-console{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,2fr);min-height:216px}
body[data-mode=native] .battle-prompt{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:23px 28px;border-right:2px solid #568993;background:linear-gradient(130deg,#173e50,#112c3e 68%)}
body[data-mode=native] .battle-eyebrow{font:700 10px/1.2 monospace;letter-spacing:.16em;color:#98e6da}
body[data-mode=native] .battle-prompt strong{max-width:230px;font:700 clamp(20px,2vw,28px)/1.2 Georgia,serif;color:#fff4d8}
body[data-mode=native] #native-frame{font:11px/1.55 monospace;color:#a8cad1;min-height:33px}
body[data-mode=native] .battle-loadout{padding:15px 17px 18px}
body[data-mode=native] .loadout-heading{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;margin-bottom:9px;font:700 10px monospace;letter-spacing:.1em;color:#a4c6cf}
body[data-mode=native] .loadout-heading span:nth-child(2){color:#a8e4d7}
body[data-mode=native] .loadout-heading span:nth-child(3){color:#f8ca96}
body[data-mode=native] #native-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(78px,1fr));gap:8px}
body[data-mode=native] #native-actions button{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;min-height:78px;padding:10px 10px 9px 42px;border:2px solid #477583;border-radius:8px;background:#193b4c;color:#f3f8f4;text-align:left;box-shadow:0 3px 0 #061722;transition:transform .14s,border-color .14s,background .14s}
body[data-mode=native] #native-actions button:hover{transform:translateY(-2px);border-color:#c5dce1;background:#275163}
body[data-mode=native] #native-actions button:focus-visible{outline:3px solid #f5d386;outline-offset:2px}
body[data-mode=native] #native-actions button[aria-pressed=true]{border-color:#f4d18e;background:#31515a}
body[data-mode=native] #native-actions button:nth-child(1){grid-column:1;grid-row:1}
body[data-mode=native] #native-actions button:nth-child(2){grid-column:2;grid-row:1}
body[data-mode=native] #native-actions button:nth-child(3){grid-column:1;grid-row:2}
body[data-mode=native] #native-actions button:nth-child(4){grid-column:2;grid-row:2}
body[data-mode=native] #native-actions button:nth-child(5){grid-column:3;grid-row:1}
body[data-mode=native] #native-actions button:nth-child(6){grid-column:3;grid-row:2}
body[data-mode=native] #native-actions button:nth-child(7){grid-column:4;grid-row:1/span 2;background:linear-gradient(150deg,#63384a,#362a47);border-color:#af6d72}
body[data-mode=native] #native-actions button:nth-child(7)[aria-pressed=true]{border-color:#f6cf85;background:linear-gradient(150deg,#865064,#4b3654)}
body[data-mode=native] #native-actions button[data-slot=gadget]{background:#1d4649;border-color:#548e8b}
body[data-mode=native] #native-actions .action-index{position:absolute;left:10px;top:12px;display:grid;place-items:center;width:24px;height:24px;border-radius:6px;border:1px solid #679da7;color:#9fd3d3;font:700 10px monospace}
body[data-mode=native] #native-actions button[data-slot=ultimate] .action-index{width:28px;border-color:#d5a37d;color:#ffd5a9;font-size:8px}
body[data-mode=native] #native-actions strong{font-size:clamp(11px,1.1vw,14px);line-height:1.2}
body[data-mode=native] #native-actions small{margin-top:5px;font-size:10px;line-height:1.3;color:#b6d0d5}
body[data-mode=native] .native-detail{margin:0;padding:10px 18px;border:0;border-top:1px solid #3b6878;background:#0e2532}
body[data-mode=native] .native-detail strong{font-size:12px}
body[data-mode=native] .native-detail p{margin:3px 0;font-size:11px}
body[data-mode=native] .native-detail details{margin-top:5px}
body[data-mode=native] .native-extra{margin:0;padding:0 18px;border-top:1px solid #315261}
body[data-mode=native] .native-extra>summary{padding:10px 0;font-size:11px;color:#a9d6da}
body[data-mode=native] .native-extra[open]{padding-bottom:18px}
body[data-mode=native] #defense-lab{margin:0;border:0;border-top:1px solid #548ca1}
@media(max-width:850px){body[data-mode=native] .battle-console{grid-template-columns:1fr}body[data-mode=native] .battle-prompt{min-height:82px;padding:13px 18px;border-right:0;border-bottom:1px solid #568993;gap:3px}body[data-mode=native] .battle-prompt strong{max-width:none;font-size:20px}body[data-mode=native] #native-frame{min-height:0}body[data-mode=native] .battle-loadout{padding:12px}}
@media(max-width:600px){body[data-mode=native] .top{padding:10px 13px}body[data-mode=native] .top h1{font-size:15px}body[data-mode=native] .top nav{font-size:10px}body[data-mode=native] main{padding:0 6px;margin:7px auto}body[data-mode=native] .hud{padding:7px 10px}body[data-mode=native] canvas{aspect-ratio:1200/500}body[data-mode=native] .location{font-size:8px}body[data-mode=native] .loadout-heading{display:none}body[data-mode=native] #native-actions{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(61px,auto));gap:6px}body[data-mode=native] #native-actions button{min-height:61px;padding:7px 6px 7px 39px}body[data-mode=native] #native-actions button:nth-child(1){grid-column:1;grid-row:1}body[data-mode=native] #native-actions button:nth-child(2){grid-column:2;grid-row:1}body[data-mode=native] #native-actions button:nth-child(3){grid-column:1;grid-row:2}body[data-mode=native] #native-actions button:nth-child(4){grid-column:2;grid-row:2}body[data-mode=native] #native-actions button:nth-child(5){grid-column:1;grid-row:3}body[data-mode=native] #native-actions button:nth-child(6){grid-column:2;grid-row:3}body[data-mode=native] #native-actions button:nth-child(7){grid-column:1/span 2;grid-row:4;min-height:65px}body[data-mode=native] #native-actions strong{font-size:11px}body[data-mode=native] #native-actions small{font-size:9px}body[data-mode=native] #native-actions .action-index{left:7px;top:9px}body[data-mode=native] #native-moves{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){body[data-mode=native] #native-actions button{transition:none}}

body[data-mode=native] .top::before{display:none}body[data-mode=native] .top{max-width:1300px;min-height:0;padding:10px 18px;border-width:0 0 1px;box-shadow:none}body[data-mode=native] .top h1{font:700 18px/1.35 'Silkscreen',monospace;letter-spacing:0}body[data-mode=native] .top a{min-height:34px;padding:5px 8px;font-size:9px}body[data-mode=native] .game{border-width:2px;box-shadow:0 0 0 4px #132c3b,0 18px 50px #020710b8}body[data-mode=native] .native-detail,body[data-mode=native] #defense-lab{border-width:0;border-top:1px solid #3b6878;background:#0e2532}@media(max-width:600px){body[data-mode=native] .top{padding:8px 11px;gap:8px}body[data-mode=native] .top h1{font-size:13px}body[data-mode=native] .top a{font-size:8px;min-height:30px}}

body[data-mode=native] .hud{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:12px}
body[data-mode=native] .hud>div:first-child{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:5px 10px}
body[data-mode=native] .hero-resources{display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:none;margin-top:3px}
body[data-mode=native] .hero-resources label{grid-template-columns:48px minmax(0,1fr) auto;font-size:10px}
body[data-mode=native] .hero-resources label b{font-size:10px}
body[data-mode=native] .round{display:grid;grid-column:2;grid-row:1;align-self:stretch;justify-items:center;align-content:center;border:1px solid #557f8c;border-radius:6px}
body[data-mode=native] .hud-note{display:none}
body[data-mode=native] #foe-plates i,body[data-mode=native] #foe-plates small{display:block}
body[data-mode=native] #foe-plates i{height:6px;margin:4px 0}
body[data-mode=native] #foe-plates small{font-size:9px;color:#e8f3f2}
body[data-mode=native] #foe-plates .is-dead{opacity:.5}
body[data-mode=native] #battle-message{min-height:36px;margin:0;color:#c3e2e6;font-size:11px;line-height:1.4}
body[data-mode=native] #native-reset{align-self:flex-start;min-height:34px;padding:5px 12px;border:1px solid #9abdc0;border-radius:5px;background:#173847;color:#e7f4ed;font-size:11px;font-weight:700}
body[data-mode=native] #native-actions button:disabled{opacity:.48;cursor:default;transform:none}
@media(max-width:600px){body[data-mode=native] .hud{grid-template-columns:minmax(0,1fr) 46px;gap:5px}body[data-mode=native] .hud>div:first-child{grid-template-columns:auto 1fr;gap:3px 7px}body[data-mode=native] .hud>div:first-child>span{display:none}body[data-mode=native] .hero-resources{gap:6px}body[data-mode=native] .hero-resources label{grid-template-columns:18px minmax(0,1fr) auto;gap:3px;font-size:8px}body[data-mode=native] .hero-resources label b{font-size:8px}body[data-mode=native] .round b{font-size:18px}body[data-mode=native] #foe-plates small{font-size:7px}body[data-mode=native] #battle-message{min-height:0;font-size:10px}body[data-mode=native] #native-reset{min-height:30px;font-size:10px}}

@media(max-width:600px){body[data-mode=native] .hero-resources{grid-template-columns:1fr;gap:2px}body[data-mode=native] .hero-resources label{grid-template-columns:35px minmax(0,1fr) auto}body[data-mode=native] .hud{grid-template-columns:minmax(0,1fr) 46px}}
body[data-mode=native] #native-notion{margin:0 0 12px;padding:0 12px;border:1px solid #386b77;border-radius:6px;background:#0b2935}
body[data-mode=native] #native-notion summary{padding:7px 0;color:#b8dedf;font-weight:700}
body[data-mode=native] #native-notion p{margin:6px 0;color:#c4dadd;font-size:11px}
body[data-mode=native] #notion-skills{margin:8px 0 12px;padding-left:18px;color:#d4e8e8;font-size:11px;line-height:1.6}

/* The command area stays close to the arena, as in a four-move battle screen. */
body[data-mode=native] main{max-width:1100px;margin:8px auto}
body[data-mode=native] .battle-console{min-height:190px}
body[data-mode=native] .battle-prompt{padding:16px 21px;gap:8px}
body[data-mode=native] .battle-loadout{padding:11px 13px 13px}
body[data-mode=native] #native-actions{grid-template-rows:repeat(2,minmax(70px,1fr));gap:7px}
body[data-mode=native] #native-actions button{min-height:70px}
body[data-mode=native] #foe-plates .is-target strong{border-color:#ffde85;box-shadow:0 0 0 2px #152b39,0 0 12px #ffd77d8a}
body[data-mode=native] #native-impact{position:absolute;z-index:4;top:35%;left:50%;transform:translateX(-50%);pointer-events:none;opacity:0;white-space:nowrap;color:#ffe392;font:900 clamp(19px,3vw,36px)/1 'Silkscreen',monospace;letter-spacing:.04em;text-shadow:3px 3px #5c2029,-2px -2px #102b38,0 0 13px #07131d}
body[data-mode=native] #native-impact[data-tone=enemy]{color:#fff3ee;text-shadow:3px 3px #9d3043,-2px -2px #102b38,0 0 13px #07131d}
body[data-mode=native] #native-notion-link{display:inline-flex;align-items:center;min-height:28px;padding:3px 7px;border:1px solid #427987;border-radius:4px;color:#aee4dc;font-size:10px;text-decoration:none}
body[data-mode=native] #native-notion-link[hidden]{display:none}
body[data-mode=native] #native-notion-link:hover,body[data-mode=native] #native-notion-link:focus-visible{color:#fff3ce;border-color:#e1c785}
@media(max-width:850px){body[data-mode=native] .battle-console{min-height:0}body[data-mode=native] .battle-prompt{padding:11px 14px;gap:3px}body[data-mode=native] .battle-loadout{padding:10px}}
@media(max-width:600px){body[data-mode=native] main{margin:5px auto}body[data-mode=native] #native-actions{grid-template-rows:repeat(4,minmax(60px,auto));gap:6px}body[data-mode=native] #native-actions button{min-height:60px}body[data-mode=native] #native-impact{top:30%;font-size:16px}}

/* Native battle is the playable screen. Keep the old move browser in the trial mode. */
body[data-mode=native] .command{display:none}
body[data-mode=native] .game{border-radius:0}
body[data-mode=native] .battle-prompt{border-color:#356378}
body[data-mode=native] .battle-prompt strong{font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:clamp(16px,1.6vw,21px)}
body[data-mode=native] #native-frame{min-height:0;font-size:11px}
body[data-mode=native] #native-actions button{border-width:1px;border-radius:4px;box-shadow:inset 0 -3px #071d29}
body[data-mode=native] #native-actions button[data-slot=ultimate]{border-color:#e5a66c;background:linear-gradient(145deg,#803b4a,#412a46)}
body[data-mode=native] .native-detail{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center}
body[data-mode=native] .native-detail strong{font-size:13px;color:#f5dfb3}
body[data-mode=native] .native-detail p{grid-column:1;font-size:11px;line-height:1.45}
body[data-mode=native] .native-detail>a{grid-column:2;grid-row:1/span 2}
body[data-mode=native] .native-detail>details{grid-column:1/-1}
body[data-mode=native] .native-extra>summary{min-height:40px}
body[data-mode=native] .native-detail,
body[data-mode=native] .native-extra{display:none}
body[data-mode=native]{overflow:hidden}
body[data-mode=native] main{height:100dvh;min-height:0;margin:0;padding:0}
body[data-mode=native] .game{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;border:0;box-shadow:none}
body[data-mode=native] .arena{min-height:0}
body[data-mode=native] .arena canvas{height:100%;width:100%;object-fit:contain;aspect-ratio:auto}
body[data-mode=native] .battle-console{min-height:0}
body[data-mode=native] .battle-prompt{padding:6px 10px;gap:2px}
body[data-mode=native] .battle-eyebrow{display:none}
body[data-mode=native] #battle-message{min-height:0}
body[data-mode=native] #native-actions{grid-auto-rows:auto;grid-template-rows:repeat(2,54px)}
body[data-mode=native] #native-actions button{min-height:44px}
@media(max-width:600px){body[data-mode=native] #native-actions{grid-template-rows:repeat(4,44px)}body[data-mode=native] #native-actions button:nth-child(7){min-height:44px}body[data-mode=native] #native-actions strong{font-size:11px}body[data-mode=native] .battle-prompt strong{font-size:13px}body[data-mode=native] .native-detail{display:none}}
@media(max-width:600px){
 body[data-mode=native] .hud{padding:6px 10px}
 body[data-mode=native] .turn-strip{padding:5px 9px}
 body[data-mode=native] .turn-strip #order{display:none}
 body[data-mode=native] .arena canvas{aspect-ratio:1200/610}
 body[data-mode=native] .battle-prompt{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:0;padding:7px 10px;gap:2px 8px}
 body[data-mode=native] .battle-eyebrow{grid-column:1/-1;font-size:9px}
 body[data-mode=native] .battle-prompt strong{grid-column:1;font-size:15px}
 body[data-mode=native] #native-frame{display:none}
 body[data-mode=native] #battle-message{grid-column:1;font-size:11px;min-height:0}
 body[data-mode=native] #native-reset{grid-column:2;grid-row:2/span 2;min-height:44px}
 body[data-mode=native] .battle-loadout{padding:7px}
 body[data-mode=native] #native-actions{grid-template-rows:repeat(4,minmax(52px,auto));gap:5px}
 body[data-mode=native] #native-actions button{min-height:52px;padding:5px 5px 5px 34px}
 body[data-mode=native] #native-actions button:nth-child(7){min-height:54px}
 body[data-mode=native] #native-actions .action-index{left:5px;top:7px;width:24px;height:24px}
 body[data-mode=native] #native-actions strong{font-size:12px}
 body[data-mode=native] #native-actions small{font-size:10px;margin-top:2px}
 body[data-mode=native] .native-detail{padding:8px 10px;grid-template-columns:minmax(0,1fr)}
 body[data-mode=native] .native-detail p{grid-column:1}
 body[data-mode=native] .native-detail>a{grid-column:1;grid-row:auto;justify-self:start}
}

body[data-mode=native] .top{display:none}
@media(max-width:600px){body[data-mode=native] #native-actions button,body[data-mode=native] #native-actions button:nth-child(7){min-height:44px;height:44px}body[data-mode=native] #native-actions{grid-template-rows:repeat(4,44px)}}

/* Clash-inspired command rack: four primary cards, then the support row. */
body[data-mode=native] #native-actions button[data-availability=cooldown] small{color:#f2cc83}
body[data-mode=native] #native-actions button[data-availability=energy] small{color:#ffaca4}
body[data-mode=native] #native-actions button[data-slot=ultimate][aria-pressed=true]{background:linear-gradient(145deg,#803b4a,#412a46);border-color:#efcc86}
@media(max-width:600px){
 body[data-mode=native] #native-actions{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:86px 50px;gap:6px}
 body[data-mode=native] #native-actions button[data-slot=skill]{grid-row:1;grid-column:auto;height:86px;min-height:86px;padding:28px 4px 6px;align-items:center;justify-content:space-between;text-align:center;background:linear-gradient(165deg,#22485d,#10293b);border:1px solid #618c9d;border-bottom-width:3px}
 body[data-mode=native] #native-actions button:nth-child(1){grid-column:1}
 body[data-mode=native] #native-actions button:nth-child(2){grid-column:2}
 body[data-mode=native] #native-actions button:nth-child(3){grid-column:3}
 body[data-mode=native] #native-actions button:nth-child(4){grid-column:4}
 body[data-mode=native] #native-actions button:nth-child(5){grid-column:1;grid-row:2;height:50px;min-height:50px}
 body[data-mode=native] #native-actions button:nth-child(6){grid-column:2;grid-row:2;height:50px;min-height:50px}
 body[data-mode=native] #native-actions button:nth-child(7){grid-column:3/span 2;grid-row:2;height:50px;min-height:50px}
 body[data-mode=native] #native-actions button[data-slot=gadget]{padding:5px 4px;text-align:center;align-items:center;justify-content:center}
 body[data-mode=native] #native-actions button[data-slot=gadget] .action-index{display:none}
 body[data-mode=native] #native-actions button[data-slot=skill] .action-index{top:5px;left:calc(50% - 10px);width:20px;height:19px;font-size:9px;border-radius:3px;color:#bce8ee;background:#0b2537}
 body[data-mode=native] #native-actions strong{font:700 11px/1.2 'Be Vietnam Pro',system-ui,sans-serif;overflow-wrap:anywhere}
 body[data-mode=native] #native-actions small{font:500 9px/1.2 'Be Vietnam Pro',system-ui,sans-serif;margin-top:3px;white-space:normal}
 body[data-mode=native] #native-actions button[aria-pressed=true]{border-color:#efcc86;box-shadow:inset 0 -3px #efcc86;background:linear-gradient(165deg,#385563,#172d3b)}
 body[data-mode=native] #native-actions button:disabled{opacity:.66}
}

body[data-mode=native] .arena canvas{object-position:50% 50%}
body[data-mode=native] #foe-plates,body[data-mode=native] #targets{position:absolute;inset:auto;left:var(--scene-left,0px);top:var(--scene-top,0px);width:var(--scene-width,100%);height:var(--scene-height,100%)}
body[data-mode=native] #foe-plates>div,body[data-mode=native] #targets button{top:calc(76.666667% + 6px);bottom:auto}

body[data-mode=native]{padding:0;min-height:0}
body[data-mode=native] main{width:100%;max-width:none;height:100dvh;margin:0 auto;padding:0}
body[data-mode=native] .game{width:100%;grid-template-columns:minmax(0,1fr)}

body[data-mode=native] .arena{background-color:#142235;background-size:100% var(--arena-background-height,100%);background-position:center top;background-repeat:no-repeat}