/* Fablekin battle windows: plum enamel, tide-green edges and warm gold.
   This layer changes the skin only; the arena, dock sizes, touch targets,
   turn-cost explanations and lasting recaps keep their existing layout. */
body.game-mode[data-screen=battle]{
 --battle-plum:#343047;
 --battle-plum-deep:#262435;
 --battle-teal:#49b6a8;
 --battle-teal-light:#a7ead0;
 --battle-gold:#ffd18a;
 --battle-paper:#fff3d3;
 --battle-ink:#243a42;
}

/* The diagonal enamel and stepped bevel identify combatants at a glance. */
body.game-mode[data-screen=battle] :is(.health-plate,.double-health){
 background:linear-gradient(125deg,transparent 0 69%,#65556c47 69% 78%,transparent 78%),linear-gradient(100deg,#353448,#292b3b);
 color:#fff8e8;
 border-color:#53b8aa;
 border-radius:2px 13px 2px 13px;
 box-shadow:inset 0 0 0 1px #b2edce,inset 0 0 0 3px #286d6d,3px 3px 0 #18363c,5px 5px 0 #10283066;
}
body.game-mode[data-screen=battle] .health-plate.enemy{
 border-left-color:#53b8aa;
 background:linear-gradient(125deg,transparent 0 69%,#8a607b38 69% 78%,transparent 78%),linear-gradient(100deg,#433448,#302b3e);
}
body.game-mode[data-screen=battle] .health-plate.player{border-left-color:#53b8aa}
body.game-mode[data-screen=battle][data-battle-format] .plate-top strong{
 font-family:Pixelify,monospace;
 font-weight:600;
 letter-spacing:.15px;
 color:#fff8e8;
 text-shadow:1px 2px #191d2c;
}
body.game-mode[data-screen=battle] :is(.plate-top .level,.plate-top .level b,.health-row small){color:#fff5df}
body.game-mode[data-screen=battle][data-battle-format=singles] .health-plate .plate-owner{color:#d0e7dc}
body.game-mode[data-screen=battle][data-battle-format=singles] .health-plate.enemy .plate-owner{color:#ffe0a0}
body.game-mode[data-screen=battle] .plate-types .type-tag,
body.game-mode[data-screen=battle] .double-health-types i{
 color:#20333e;
 background:color-mix(in srgb,var(--type),#fff7da 75%);
 border-color:color-mix(in srgb,var(--type),#fff7da 45%);
 border-radius:1px 4px 1px 4px;
 box-shadow:inset 0 -2px 0 #203c3922;
 font-style:normal;
 font-weight:700;
}
body.game-mode[data-screen=battle] .health-row>span{color:#f8d68f}
body.game-mode[data-screen=battle] .health-row .health-track,
body.game-mode[data-screen=battle] .double-health-track{
 background:#191d2b;
 border-color:#f1e6cd;
 border-radius:1px;
 box-shadow:0 1px 0 #17202b;
}
body.game-mode[data-screen=battle] .health-row .health-track>i{
 background:#48d387;
 box-shadow:inset 0 2px 0 #a4f1af,inset 0 -1px 0 #248c62;
}
body.game-mode[data-screen=battle] .health-row .health-track>i.low{
 background:#ffc35b;
 box-shadow:inset 0 2px 0 #ffe9a6,inset 0 -1px 0 #ba8036;
}
body.game-mode[data-screen=battle] .health-row .health-track>i.critical{
 background:#f3796d;
 box-shadow:inset 0 2px 0 #ffc6a3,inset 0 -1px 0 #b74e4e;
}
body.game-mode[data-screen=battle] .health-plate .xp-track{background:#191e2e}
body.game-mode[data-screen=battle] .xp-track>i{background:#63cfe0;box-shadow:inset 0 1px #c3f5eb}
body.game-mode[data-screen=battle] .boss-shield-tag{color:#ffe0a1}
body.game-mode[data-screen=battle] .shiny-star{color:#ffe08c;text-shadow:1px 1px #513d4e}

/* Dialogue stays in the same footprint, with readable prose inside a game box. */
body.game-mode[data-screen=battle] .battle-message{
 background:linear-gradient(115deg,#42354c,#302d43 72%);
 border-color:#3b9f98;
 border-radius:2px 9px 2px 9px;
 box-shadow:inset 0 0 0 1px #a7e2c7,inset 0 0 0 3px #2b6268,0 0 0 2px #18393f,0 4px 0 #142c36;
}
body.game-mode[data-screen=battle] .battle-message p{color:#fff5e2}
body.game-mode[data-screen=battle] :is(.message-diamond,.message-next){color:var(--battle-gold);text-shadow:1px 1px #181e2d}
body.game-mode[data-screen=battle] .double-recap>small{color:#f5d295}

/* Cream command paper is framed as a handheld RPG menu, rather than a card. */
body.game-mode[data-screen=battle] :is(.action-area,.outcome-area){
 background:linear-gradient(135deg,#fff9e8 0 73%,#e7e2c641 73% 84%,transparent 84%),#f5edcf;
 border-color:#2c6e70;
 border-radius:2px 10px 2px 10px;
 box-shadow:inset 0 0 0 1px #fff9db,inset 0 0 0 3px #80c8ae,0 0 0 2px #233b45,0 4px 0 #18313b;
}
body.game-mode[data-screen=battle][data-battle-format=singles] .battle-command-heading strong{
 font-family:Pixelify,monospace;
 color:#41354d;
 font-size:22px;
 font-weight:700;
 letter-spacing:.1px;
}
body.game-mode[data-screen=battle][data-battle-format=singles] .battle-command{
 position:relative;
 background:linear-gradient(115deg,#e6eee0,#d1e6dc);
 border-color:#527f78;
 border-radius:2px 8px 2px 8px;
 box-shadow:inset 0 1px 0 #fff8df,inset 0 -2px 0 #659b8b44,0 2px 0 #33545b;
 color:#253c45;
}
body.game-mode[data-screen=battle][data-battle-format=singles] .battle-command[data-action=capture]{background:linear-gradient(115deg,#eef0cd,#d5e4c2)}
body.game-mode[data-screen=battle][data-battle-format=singles] .battle-command[data-action=bag]{background:linear-gradient(115deg,#eee1e5,#dcd7e6)}
body.game-mode[data-screen=battle][data-battle-format=singles] .battle-command--fight{
 background:linear-gradient(115deg,#ffdda0,#f1bd70);
 border-color:#9b6e3e;
 box-shadow:inset 0 1px 0 #fff2c7,inset 0 -2px 0 #b0824a55,0 2px 0 #775445;
}
body.game-mode[data-screen=battle][data-battle-format=singles] .battle-command strong{
 font-family:Pixelify,monospace;
 font-weight:700;
 letter-spacing:.2px;
}
body.game-mode[data-screen=battle][data-battle-format=singles] .battle-command small{color:#374f55}
body.game-mode[data-screen=battle][data-battle-format=singles] .battle-command .icon{color:#395b61;filter:drop-shadow(1px 1px 0 #fff8de)}
body.game-mode[data-screen=battle][data-battle-format=singles] .battle-command--fight .icon{color:#79503d}
body.game-mode[data-screen=battle][data-battle-format=singles] .battle-command::after{
 content:"";
 position:absolute;
 top:8px;
 right:7px;
 border-top:4px solid transparent;
 border-bottom:4px solid transparent;
 border-left:6px solid #67473b;
 opacity:0;
 pointer-events:none;
}
body.game-mode[data-screen=battle][data-battle-format=singles] .battle-command:not(:disabled):is(:hover,:focus-visible){
 background:linear-gradient(115deg,#ffe3a9,#f4cb83);
 border-color:#855d36;
 box-shadow:inset 0 0 0 1px #ffefbe,0 2px 0 #64464a;
}
body.game-mode[data-screen=battle][data-battle-format=singles] .battle-command:not(:disabled):is(:hover,:focus-visible)::after{opacity:1}

/* Type color is an accent and pale tint; the tactical text remains dark. */
body.game-mode[data-screen=battle] .command-area .move-button,
body.game-mode[data-screen=battle] .double-moves>button{
 background:linear-gradient(115deg,#fff9e5,color-mix(in srgb,var(--type),#fff9e5 88%));
 border-color:#8b9f8e;
 border-left-color:var(--type);
 border-radius:2px 7px 2px 7px;
 box-shadow:inset 0 1px 0 #fffdf2,0 2px 0 #78998a;
 color:#253e48;
}
body.game-mode[data-screen=battle] .command-area .move-button:hover:not(:disabled),
body.game-mode[data-screen=battle] .double-moves>button:hover:not(:disabled){background:color-mix(in srgb,var(--type),#fff9df 80%);border-color:#527f78}
body.game-mode[data-screen=battle] .command-area .move-info strong{color:#38334a}
body.game-mode[data-screen=battle] .command-area .move-info .move-element{color:#23464e;font-weight:750}
body.game-mode[data-screen=battle] .command-area .move-pp{color:#344f5b}
body.game-mode[data-screen=battle] :is(.capture-card,.switch-card){
 border-radius:2px 7px 2px 7px;
 box-shadow:inset 0 1px #fffaf0,0 2px 0 #91a78f;
}
body.game-mode[data-screen=battle] :is(.capture-orb,.party-token){border-radius:2px 6px 2px 6px}
body.game-mode[data-screen=battle] .party-token{border-color:#82bfaa;background:#2f3c48;box-shadow:inset 0 0 0 1px #456c6d,0 2px #1d3038}
body.game-mode[data-screen=battle] .party-token.active{background:#7c6249;border-color:#ffe0a0;box-shadow:inset 0 0 0 1px #e0b273,0 2px #1d3038}
body.game-mode[data-screen=battle] .wild-label{background:#343047ed;border-color:#77b9a8;color:#ffedc8;border-radius:1px 6px 1px 6px}

/* Doubles retain their measured compact panels and two-order interaction. */
body.game-mode[data-screen=battle] .double-health strong{font-family:Pixelify,monospace;color:#fff8e8;text-shadow:1px 1px #1d2030}
body.game-mode[data-screen=battle] .double-health :is(small,.double-health-value){color:#fff4de}
body.game-mode[data-screen=battle] .double-health-types b{color:#ffdb99}
body.game-mode[data-screen=battle] .double-health.selected{border-color:#ffe0a0;box-shadow:inset 0 0 0 1px #fff1c5,inset 0 0 0 3px #80654c,3px 3px #22343f}
body.game-mode[data-screen=battle] .double-actor-tabs>button{border-radius:2px 6px 2px 6px}
body.game-mode[data-screen=battle] .double-actor-tabs>button.selected{background:#f6d79b;border-color:#987348;color:#303c41}
body.game-mode[data-screen=battle] .double-turn-actions{background:#f5edcf}
body.game-mode[data-screen=battle] .double-turn-actions .double-resolve{background:#315f65;border-color:#83c8b2;color:#fff6df;box-shadow:inset 0 1px #8ac2af,0 2px #243c48}

@media(max-width:700px){
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-command-heading strong{font-size:19px}
 body.game-mode[data-screen=battle][data-battle-format] .plate-top strong{font-size:22px;line-height:1.05}
}
@media(max-width:700px) and (min-height:501px) and (max-height:700px){
 body.game-mode[data-screen=battle][data-battle-format] .plate-top strong{font-size:18px;line-height:1.05}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-command-heading strong{font-size:18px}
}
@media(min-width:701px) and (max-height:500px){
 body.game-mode[data-screen=battle][data-battle-format] .plate-top strong{font-size:19px;line-height:1.05}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-command-heading strong{font-size:20px}
}

/* Each category has the same generous return target as Fight, including
   desktop Catch and Bag, where the old text-only Back was only 20 px tall. */
body.game-mode[data-screen=battle][data-battle-format=singles] .controls-heading .text-button[data-action=moves]{
 min-height:44px;
 min-width:66px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 flex-shrink:0;
 padding:6px;
}

/* One location rail and the root tools occupy the first phone row. The turn
   controls and field inspector occupy the second. This applies to tall as
   well as short phones; the older compact rules covered only short phones. */
@media(max-width:700px) and (min-height:501px){
 body.game-mode[data-screen=battle][data-battle-format=singles] .game-hud{top:max(10px,env(safe-area-inset-top));left:auto;right:12px}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-heading{top:max(10px,env(safe-area-inset-top));left:12px;right:12px;min-height:44px;display:block}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-heading>div:first-child{
  width:calc(100% - 196px);max-width:calc(100% - 196px);min-height:44px;height:44px;
  margin:0;padding:0;gap:0;display:flex;border:0;background:transparent;box-shadow:none;
 }
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-heading>div:first-child>span{display:none}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-heading>div:first-child:has([data-action=run-scout])>[data-action=battle-home]{display:none}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-heading :is(.run-info-button,[data-action=battle-home]){
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;
  min-width:0;max-width:100%;width:100%;height:44px;min-height:44px;margin:0;padding:4px;
  background:linear-gradient(125deg,#294653,#303147);border:1px solid #82c9b5;
  box-shadow:inset 0 1px #c7f0ce30,0 2px #203541;border-radius:1px;
  font:600 12px/1.2 var(--body);color:#fff1d3;opacity:1;
 }
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-heading [data-action=battle-home]>.icon{display:none}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-heading>div:last-child{
  position:fixed;left:12px;top:calc(max(10px,env(safe-area-inset-top)) + 50px);right:auto;
  display:flex;min-height:44px;height:44px;width:auto;max-width:none;
  margin:0;padding:0;gap:4px;border:0;background:transparent;box-shadow:none;
 }
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-heading .turn-chip{
  display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  background:#29374aed;border:1px solid #82c9b5;color:#f4e7ca;font:600 10px/1.2 var(--body);
 }
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-heading .icon-button{
  width:44px;min-width:44px;height:44px;min-height:44px;background:#29374aed;
  border:1px solid #82c9b5;border-radius:1px;color:#ffe3aa;font-size:14px;
 }
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-heading .icon-button .icon{width:17px;height:17px}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-field-strip{
  top:calc(max(10px,env(safe-area-inset-top)) + 50px);bottom:auto;left:auto;right:12px;
  width:calc(100% - 172px);max-width:190px;min-height:44px;height:44px;padding:0;gap:0;
  background:#29374aee;border-color:#82c9b5;border-radius:1px;
 }
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-field-strip>span{display:none}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-field-strip button{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:5px;
  font:600 12px/1.2 var(--body);color:#ffe0a0;white-space:normal;
 }
 body.game-mode[data-screen=battle][data-battle-format=singles] .health-plate.enemy{top:calc(max(10px,env(safe-area-inset-top)) + 102px)}
 body.game-mode[data-screen=battle][data-battle-format=singles] .wild-label{top:calc(max(10px,env(safe-area-inset-top)) + 105px);right:12px;max-width:calc(44% - 24px);font-size:9px;white-space:normal}
}

/* Keep a scrollable initial doubles instruction in the measured dialogue
   window, just as the existing lasting recap already provides scrolling. */
body.game-mode[data-screen=battle][data-battle-format=doubles] .battle-message>p{
 align-self:stretch;
 max-height:100%;
 overflow:auto;
 overscroll-behavior:contain;
 scrollbar-width:thin;
 scrollbar-color:#a4d3c3 #343047;
}