/* The battle console is a single piece of field equipment. Its stepped rails
   are decorative layers: health changes, status tags and focus rings stay free
   to extend outside their panels. Existing arena and dock geometry is retained. */
body.game-mode:has(.battle-shell){
 --rpg-ink:#151e32;--rpg-panel:#252b43;--rpg-slate:#334660;
 --rpg-rail:#61dccc;--rpg-light:#c0ffeb;--rpg-gold:#ffda88;
 --rpg-step:polygon(0 10px,5px 10px,5px 5px,10px 5px,10px 0,calc(100% - 10px) 0,calc(100% - 10px) 5px,calc(100% - 5px) 5px,calc(100% - 5px) 10px,100% 10px,100% calc(100% - 10px),calc(100% - 5px) calc(100% - 10px),calc(100% - 5px) calc(100% - 5px),calc(100% - 10px) calc(100% - 5px),calc(100% - 10px) 100%,10px 100%,10px calc(100% - 5px),5px calc(100% - 5px),5px calc(100% - 10px),0 calc(100% - 10px));
}

/* A common lower shell joins the dialogue and commands without taking space
   from either window or changing the actual control hit boxes. */
body.game-mode:has(.battle-shell) .battle-frame::after{
 content:"";position:absolute;pointer-events:none;z-index:13;
 left:calc(var(--game-gutter) - 5px);right:calc(var(--game-gutter) - 5px);
 bottom:calc(var(--game-dock-bottom) - 5px);height:calc(var(--game-dock-height) + 10px);
 background:linear-gradient(#71edda 0 3px,#224d60 3px 6px,#13243b 6px calc(100% - 4px),#0b1528 calc(100% - 4px));
 clip-path:var(--rpg-step);filter:drop-shadow(0 4px #0e192c);
}
body.game-mode:has(.battle-shell) :is(.health-plate,.double-health){
 isolation:isolate;border-color:transparent;border-radius:0;box-shadow:none;
 background:transparent;color:#fff9e9;
}
body.game-mode:has(.battle-shell) :is(.health-plate,.double-health)::before,
body.game-mode:has(.battle-shell) :is(.health-plate,.double-health)::after{
 content:"";position:absolute;pointer-events:none;z-index:-1;clip-path:var(--rpg-step);
}
body.game-mode:has(.battle-shell) :is(.health-plate,.double-health)::before{
 inset:-1px;background:linear-gradient(180deg,var(--rpg-light),var(--rpg-rail) 34%,#247b8d 72%,#0d293e);
 filter:drop-shadow(3px 4px #14203988);
}
body.game-mode:has(.battle-shell) :is(.health-plate,.double-health)::after{
 inset:3px;
 background:linear-gradient(90deg,var(--plate-element,#61dccc) 0 7px,transparent 7px),linear-gradient(126deg,transparent 0 69%,#ffffff09 69% 80%,transparent 80%),linear-gradient(100deg,#313348,#23283d);
 box-shadow:inset 0 3px #99cab522,inset 0 -3px #111b30;
}
body.game-mode:has(.battle-shell) :is(.health-plate.enemy,.double-health.enemy)::after{
 background:linear-gradient(90deg,var(--plate-element,#ad9cce) 0 7px,transparent 7px),linear-gradient(126deg,transparent 0 69%,#ffffff08 69% 80%,transparent 80%),linear-gradient(100deg,#3b3049,#27283e);
}
body.game-mode:has(.battle-shell) .health-plate.player,
body.game-mode:has(.battle-shell) .health-plate.enemy{border-left-color:transparent}
body.game-mode:has(.battle-shell) .health-row>span{color:#71f3a1;font-size:15px;letter-spacing:.5px;text-shadow:1px 1px #101d2a}
body.game-mode:has(.battle-shell) .health-row .health-track{border-radius:0;border-color:#fff6dc;background:#131a2c;box-shadow:0 2px #11182a}
body.game-mode:has(.battle-shell) .health-row .health-track>i{background:#39e887;box-shadow:inset 0 2px #a5ffbe,inset 0 -2px #20935f}
body.game-mode:has(.battle-shell) .health-plate .xp-track{height:5px;background:#101c32;border-radius:0}
body.game-mode:has(.battle-shell) .health-plate .xp-track>i{background:#49cce9;box-shadow:inset 0 1px #c0f6ff}
body.game-mode:has(.battle-shell) .health-plate .status-tag{border-radius:0;box-shadow:2px 2px #121b30;font-weight:800}

body.game-mode:has(.battle-shell) .battle-message{
 isolation:isolate;background:#29283e;border-radius:0;border-color:#91d9c2;
 box-shadow:inset 0 0 0 2px #1b2a40,inset 0 0 0 4px #426575;
}
body.game-mode:has(.battle-shell) .battle-message::before{
 content:"";position:absolute;inset:-4px;z-index:-1;pointer-events:none;
 background:linear-gradient(#aaffde,#339d9a 40%,#15465d);clip-path:var(--rpg-step);
}
body.game-mode:has(.battle-shell) .battle-message::after{
 content:"";position:absolute;inset:3px;z-index:-1;pointer-events:none;
 background:linear-gradient(125deg,#343047,#262a40);clip-path:var(--rpg-step);
}
body.game-mode:has(.battle-shell) .battle-message p{color:#fff7e8}
body.game-mode:has(.battle-shell) :is(.action-area,.outcome-area){
 border-radius:0;border-color:#88c5ba;
 box-shadow:inset 0 0 0 2px #18354c,inset 0 0 0 4px #81b8af;
}

/* Four distinct, dark command keys. Fight is the suggested first decision;
   a gold pointer identifies hover/focus without relying on color alone. */
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-commands,
body.game-mode:has(.battle-shell) :is(.battle-fight,.waiting-area,.double-commands,.settled-command){
 background:linear-gradient(135deg,#263b53,#20263e);color:#f9f4e4;
 border-color:#80c9bd;box-shadow:inset 0 0 0 2px #12283d,inset 0 0 0 4px #39576c;
}
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command-heading{color:#e2eaf1}
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command-heading strong{color:#ffdf96;font-family:Pixelify,monospace;font-size:24px;text-shadow:1px 2px #152239}
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command{
 border-radius:0;border:1px solid #84adbc;border-left:4px solid #70cbbf;
 color:#fff6df;background:linear-gradient(115deg,#314d69,#29334f);
 box-shadow:inset 0 2px #c5ffef26,inset 0 -3px #17243c,2px 2px #102039;
}
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command[data-action=capture]{background:linear-gradient(115deg,#285a67,#293b55);border-left-color:#8ae9cd}
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command[data-action=bag]{background:linear-gradient(115deg,#504264,#2e3656);border-left-color:#d5b3ee}
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command--fight{
 background:linear-gradient(115deg,#6b4c3f,#493c48);border-color:#f5cd7e;border-left-color:#ffda88;
 box-shadow:inset 0 2px #ffe9b62e,inset 0 -3px #302339,2px 2px #112039;
}
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command strong{font:700 clamp(23px,2.2vw,31px)/1.05 Pixelify,monospace;color:#fff4d8;text-shadow:1px 2px #18243a;letter-spacing:.3px}
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command small{color:#e0e9f4}
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command .icon{color:#a2eadc;filter:drop-shadow(1px 2px #15263b)}
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command--fight .icon{color:#ffdb8c}
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command::after{border-left-color:#ffe199;top:11px;right:7px}
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command:not(:disabled):is(:hover,:focus-visible){
 background:linear-gradient(115deg,#5a5a62,#3a4159);border-color:#ffe0a0;
 box-shadow:inset 0 0 0 1px #f9d589,inset 0 -3px #242039,2px 2px #122039;
}
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command:disabled{opacity:1;color:#a1b0c3;border-color:#526c82;background:#283549;box-shadow:inset 0 -3px #1c293d}
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command:disabled :is(strong,small,.icon){color:#a7b5c5;text-shadow:none;filter:none}

/* Move details remain prose-sized; the name and elemental rail carry the
   character. Turn costs and Back keep their original position and hit area. */
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-fight .controls-heading strong{font:700 22px/1.1 Pixelify,monospace;color:#ffdf9d}
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-fight .controls-heading>div>span{color:#e3eaf4}
body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-fight .controls-heading .text-button{border-radius:0;background:#2a475e;border-color:#b0d8ca;color:#fff1d7;box-shadow:inset 0 -3px #18283f}
body.game-mode:has(.battle-shell)[data-battle-format] .command-area .move-button,
body.game-mode:has(.battle-shell) .double-moves>button{
 border-radius:0;background:linear-gradient(115deg,#30465c,#29334c);border-color:#7d9ca7;border-left-color:var(--type);
 box-shadow:inset 0 2px #ffffff12,inset 0 -3px #14253d,1px 2px #12223a;color:#f7f0dc;
}
body.game-mode:has(.battle-shell)[data-battle-format] .command-area .move-button:hover:not(:disabled),
body.game-mode:has(.battle-shell) .double-moves>button:hover:not(:disabled){background:#40536b;border-color:#ffdf9d;border-left-color:var(--type)}
body.game-mode:has(.battle-shell)[data-battle-format] .command-area .move-info strong{font:700 clamp(18px,1.6vw,24px)/1.08 Pixelify,monospace;color:#fff4dd;letter-spacing:0}
body.game-mode:has(.battle-shell)[data-battle-format] .command-area .move-info :is(small,small>span,.move-category){color:#dbe7ef}
body.game-mode:has(.battle-shell)[data-battle-format] .command-area .move-info small>b{color:#fff0c7}
body.game-mode:has(.battle-shell)[data-battle-format] .command-area .move-info .move-element{color:color-mix(in srgb,var(--type),white 52%)}
body.game-mode:has(.battle-shell)[data-battle-format] .command-area .move-hint{color:#dbe6e9}
body.game-mode:has(.battle-shell)[data-battle-format] .command-area .move-hint.advantage{color:#a9f0bb}
body.game-mode:has(.battle-shell)[data-battle-format] .command-area .risky .move-hint{color:#ffcd9d}
body.game-mode:has(.battle-shell)[data-battle-format] .command-area :is(.move-pp,.move-pp small){color:#eff4e9}
body.game-mode:has(.battle-shell)[data-battle-format] .command-area .move-key{color:#a9c5ce}
body.game-mode:has(.battle-shell) .waiting{color:#fff3d9}
body.game-mode:has(.battle-shell) .battle-beats{color:#d1e4e9}
body.game-mode:has(.battle-shell) .double-moves>button strong{font:700 20px/1.15 Pixelify,monospace;color:#fff3de}
body.game-mode:has(.battle-shell) .double-moves>button small{color:#e1eaf1}
body.game-mode:has(.battle-shell) .double-actor-tabs>button{border-radius:0;background:#273f58;border-color:#86bcb9;color:#edf0e7;box-shadow:inset 0 -3px #15263e}
body.game-mode:has(.battle-shell) .double-actor-tabs>button.selected{background:#64513e;border-color:#ffdb8d;color:#fff4d3}
body.game-mode:has(.battle-shell) .double-turn-actions{background:#21334b;color:#e8efec;border-color:#759eaa}
body.game-mode:has(.battle-shell) .double-turn-actions>span{color:#ffdf9d}
body.game-mode:has(.battle-shell) .double-turn-actions :is(button,.double-resolve){border-radius:0;background:#31566b;color:#fff3d4;border-color:#a0cfbe;box-shadow:inset 0 -3px #182c43}
body.game-mode:has(.battle-shell) .double-turn-actions .double-resolve:not(:disabled){background:#6d513d;border-color:#ffdd91}
body.game-mode:has(.battle-shell) :is(.double-targets,.double-replacements){color:#f8f1df}
body.game-mode:has(.battle-shell) :is(.double-targets,.double-replacements)>button{border-radius:0}
body.game-mode:has(.battle-shell) .double-targets>span,
body.game-mode:has(.battle-shell) .double-replacements>strong{color:#ffdf9d}
body.game-mode:has(.battle-shell) .double-replacements>p{color:#e2eaf1}
body.game-mode:has(.battle-shell) .double-targets .double-cancel{color:#fff0ca;background:#2b455b;border:1px solid #8ebeb7;text-decoration:none}

@media(max-width:700px) and (min-height:501px){
 body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-frame::after{height:calc(var(--game-dock-height) + var(--compact-message-height,100px) + 22px)}
 body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command-heading strong{font-size:21px}
 body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command strong{font-size:23px}
 body.game-mode:has(.battle-shell)[data-battle-format=singles] .health-row>span{font-size:12px}
 body.game-mode:has(.battle-shell)[data-battle-format=singles] .health-plate .xp-track{height:3px}
}
@media(max-width:700px) and (min-height:501px) and (max-height:700px){
 body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command-heading strong{font-size:19px}
 body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command strong{font-size:21px}
 body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-fight .controls-heading strong{font-size:20px}
 body.game-mode:has(.battle-shell)[data-battle-format=singles] .command-area .move-info strong{font-size:18px}
 body.game-mode:has(.battle-shell)[data-battle-format=singles] .health-row>span{font-size:10px}
}
@media(min-width:701px) and (max-height:500px){
 body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command strong{font-size:23px}
 body.game-mode:has(.battle-shell)[data-battle-format=singles] .battle-command-heading strong{font-size:20px}
 body.game-mode:has(.battle-shell)[data-battle-format=singles] .health-row>span{font-size:12px}
 body.game-mode:has(.battle-shell)[data-battle-format=singles] .command-area .move-info strong{font-size:18px}
}