/* Códice Viviente: the stage and its controls share one responsive coordinate system. */
#battle-screen { --battle-height:100dvh; --hand-height:250px; --hand-top:calc(100dvh - 250px); background:#182521; height:100dvh; min-height:100dvh; isolation:isolate; }
#game-canvas,#battle-ui,#battle-fx-layer { min-width:0; min-height:0; width:100%; height:var(--battle-height); }
#battle-ui { position:absolute; inset:0; }
#battle-screen [hidden] { display:none!important; }
#battle-screen .top-bar { height:56px; min-height:56px; padding:6px 22px; color:#f1e2c5; background:linear-gradient(100deg,#172923f5,#24352efa); border-bottom:1px solid #bc9d6666; box-shadow:0 4px 18px #06120f55; }
#battle-screen .turn-indicator { color:#f1e2c5; font-size:16px; letter-spacing:.04em; }
#battle-screen .top-bar .action-btn { min-height:40px; background:#31463b!important; color:#efdfbd!important; border:1px solid #ac98604d!important; font:12px system-ui,sans-serif!important; padding:6px 12px!important; }
#battle-screen .top-bar .ap-container { border:0!important; background:#10231d!important; color:#e5dfb7!important; font:14px system-ui,sans-serif; min-width:125px; }
#battle-screen #ap-count { color:#9fdbcf; font-weight:700; font-size:22px; }
#battle-screen .status-panel { inset:0; max-height:none; overflow:visible; pointer-events:none; width:100%; }
#battle-screen .unit-status { position:absolute; left:var(--actor-x); top:var(--actor-label-y); width:var(--actor-label-width,158px); transform:translateX(-50%); margin:0; padding:6px 8px!important; pointer-events:auto; background:#172a23e8!important; border:1px solid #bda27288!important; border-radius:4px 4px 9px 9px; box-shadow:0 4px 12px #10241d50; }
#battle-screen .unit-name { font:12px system-ui,sans-serif!important; color:#f4e7ca; line-height:1.35; flex-direction:row; flex-wrap:nowrap; gap:4px; margin-bottom:0!important; }
#battle-screen .unit-name>span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#battle-screen .unit-name>span[aria-label] { font-size:10px; color:#d4d9bc; white-space:nowrap; }
#battle-screen .unit-status .hp-bar-bg { height:5px; margin:4px 0 0; border-radius:3px; background:#071b14; }
#battle-screen .unit-status .hp-bar-fill { background:linear-gradient(90deg,#8aab80,#bdd699); box-shadow:none; }
#battle-screen .enemy-status .hp-bar-fill { background:linear-gradient(90deg,#965043,#d99977); }
#battle-screen .unit-status .attack-btn,#battle-screen .unit-focus-btn { width:100%; min-height:32px; margin:3px 0 0; padding:4px 2px!important; border:0; background:transparent!important; color:#eed29a!important; font:11px system-ui,sans-serif!important; line-height:1.25; text-transform:none; box-shadow:none; }
#battle-screen .unit-status .attack-btn:disabled { color:#adb2a3!important; opacity:1; }
#battle-screen .actor-touch-zone { position:absolute; left:0; right:0; bottom:100%; height:var(--actor-hit-height,125px); width:100%; border:0; border-radius:45% 45% 5px 5px; background:transparent; cursor:pointer; }
#battle-screen .actor-touch-zone:focus-visible { outline:3px solid #f5dd8c; outline-offset:3px; background:#c8c09320; }
#battle-screen .actor-touch-zone:hover:not(:disabled) { background:radial-gradient(ellipse at bottom,#bfd5b426,transparent 70%); }
#battle-screen .unit-status.is-focused { border-color:#f2cf79!important; box-shadow:0 0 0 2px #efd59b66; }
#battle-screen .unit-status-effect { color:#d7ccb4; font:10px system-ui,sans-serif; }
#battle-screen .unit-meta { display:flex; align-items:center; gap:4px; color:#c6d3bc; font:10px system-ui,sans-serif; }
#battle-screen .unit-meta:empty { display:none; }
#battle-screen .enemy-intent { color:#efc3a0; font:10px system-ui,sans-serif; margin:3px 0; }
/* Fit shield/status lines between the two actor rows on a 720p battle. */
@media(min-width:700px) and (max-height:800px) {
    #battle-screen .unit-status { padding:3px 8px!important; }
    #battle-screen .unit-status .attack-btn,#battle-screen .unit-status .unit-focus-btn { min-height:26px; margin-top:2px; }
    #battle-screen .unit-meta { margin-top:2px!important; line-height:12px!important; height:12px; min-width:0; overflow:hidden; white-space:nowrap; }
    #battle-screen .unit-status-effect { margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    #battle-screen .enemy-intent { margin:0!important; line-height:13px; }
}
#battle-screen .bottom-bar { height:var(--hand-height); top:var(--hand-top); bottom:auto; padding:9px 24px 12px; grid-template-columns:minmax(0,1fr) 115px; gap:16px; border-top:1px solid #bda4738c; background:linear-gradient(#182b26eb,#10241ff7); box-shadow:0 -8px 30px #0917114a; }
#battle-screen .cards-hand { justify-content:center; gap:10px; padding:0 4px; align-items:start; overflow:visible; }
#battle-screen .hand-slot { position:relative; flex:0 1 166px; width:166px; min-width:0; display:flex; flex-direction:column; }
#battle-screen .deck-card.card-in-hand { width:100%!important; height:194px; flex:none; border-radius:8px 8px 2px 2px; background:#e8d6b1!important; border-color:#c4ac7f!important; box-shadow:0 6px 15px #06120e66,inset 0 0 0 2px #ffefd322; transition:transform .16s ease,box-shadow .16s ease; }
#battle-screen .card-in-hand .card-art-placeholder { height:78px; min-height:78px; margin:0 4px; border:0; }
#battle-screen .card-in-hand .card-top-bar { min-height:22px; padding:3px 6px!important; }
#battle-screen .card-in-hand .card-mana-gem { font:700 12px system-ui,sans-serif!important; width:auto; height:auto; flex-shrink:0; white-space:nowrap; }
#battle-screen .card-in-hand .card-type-tag { font:9px system-ui,sans-serif!important; letter-spacing:.04em; }
#battle-screen .card-in-hand .card-header-area { min-height:26px; padding:4px 6px 0!important; }
#battle-screen .card-in-hand .card-name-title { font:13px Georgia,serif!important; line-height:1.1; }
#battle-screen .card-in-hand .card-body-description { padding:3px 6px!important; min-height:25px; }
#battle-screen .card-in-hand .card-body-description p { font:10px/1.25 system-ui,sans-serif!important; margin:0; }
#battle-screen .card-in-hand .card-hero-class { display:none; }
#battle-screen .card-target-line { padding:4px 6px; min-height:27px; color:#284b3e; background:#d8c8a9; font:10px/1.2 system-ui,sans-serif; border-top:1px solid #aa947333; }
#battle-screen .card-details-btn { width:100%; min-height:30px; border-radius:0 0 6px 6px; color:#e9d7ae; background:#405347; border:1px solid #bba26d70; border-top:0; font:11px system-ui,sans-serif; }
#battle-screen .deck-card.card-in-hand:hover,#battle-screen .deck-card.card-in-hand:focus-visible { transform:translateY(-5px)!important; box-shadow:0 10px 18px #0006,0 0 0 2px #c5dfb066; }
#battle-screen .deck-card.card-in-hand.disabled { background:#d3c6aa!important; border-color:#9d927a!important; }
#battle-screen .deck-card.card-in-hand.disabled .card-art-placeholder { opacity:.72; }
#battle-screen .deck-controls { width:115px; gap:7px; align-self:end; }
#battle-screen .pile { min-height:38px; color:#e1d3b4!important; background:#293e32!important; border:1px solid #a68b594a!important; font:12px system-ui,sans-serif; clip-path:none; }
#battle-screen .end-turn-btn { min-height:63px; background:#8f4131!important; color:#fff0cc!important; border:1px solid #d4976990; border-radius:4px; font:15px Georgia,serif; box-shadow:0 4px 14px #0003; }
#battle-screen .manual-bar { bottom:auto; top:calc(var(--hand-top) - 31px); justify-content:center; }
#battle-screen .manual-feedback { font:12px system-ui,sans-serif; background:#163329e8; color:#e6ddbd; border-color:#aab98055; }
#battle-screen .manual-pending { background:#cdb783f5; color:#1c3529; }
#battle-screen .battle-banner { top:75px; background:#1b3029e8; color:#f1d99b; border:1px solid #bca57488; border-radius:3px; padding:10px 28px; font-size:19px; box-shadow:0 6px 18px #0003; }
#battle-screen .skip-animation-btn { top:64px; bottom:auto; right:16px; min-height:34px; font:11px system-ui,sans-serif; background:#172d25dc; color:#e1d2aa; border-color:#b29b6766; }
.presentation-paused .battle-float,.presentation-paused .battle-slash { animation-play-state:paused; }
#battle-screen .card-flight { transition:none!important; box-shadow:0 0 24px #e4c77988,0 10px 30px #06120f66!important; }
#battle-screen .card-flight .card-in-hand { width:100%!important; height:100%!important; transform:none!important; }
/* A card the hand no longer holds falls as an inert copy; it never takes a click. */
#battle-screen .hand-leave-ghost { transition:none!important; box-shadow:0 8px 22px #06120f55!important; }
#battle-screen .hand-leave-ghost .card-in-hand { width:100%!important; height:100%!important; transform:none!important; }
/* A legal card reads as ready by standing still and lit, never by blinking. */
#battle-screen .deck-card.card-in-hand.is-ready { border-color:#cbb684!important; box-shadow:0 6px 15px #06120e66,inset 0 0 0 2px #f2dda766; }
#battle-screen .deck-card.card-in-hand.is-ready:hover,#battle-screen .deck-card.card-in-hand.is-ready:focus-visible { box-shadow:0 10px 18px #0006,0 0 0 2px #c5dfb066,inset 0 0 0 2px #f2dda766; }
@media(prefers-reduced-motion:reduce) { #battle-screen .deck-card.card-in-hand { transition:none; } }
#battle-screen .battle-card-cast { top:108px; left:50%; width:max-content; max-width:60%; height:auto; min-height:0; padding:7px 18px; background:#18352ce8; color:#f5e6bf; border:1px solid #bca57488; border-radius:4px; transform:translate(-50%,-6px); box-shadow:0 4px 16px #081a1355; }
#battle-screen .battle-card-cast.is-visible { transform:translate(-50%,0); }
#battle-screen .battle-card-cast__name { font:16px/1.3 Georgia,serif; color:#f5e6bf; margin:0; }
#battle-screen .battle-card-cast__type,#battle-screen .battle-card-cast__ornament { display:none; }
#cards-modal .card-art-individual { height:250px; min-height:250px; }
#cards-modal .card-art-individual .card-art-production { object-fit:contain!important; background:#172b25; }
.battle-subtitle { position:absolute; z-index:60; top:62px; left:50%; transform:translateX(-50%); max-width:min(600px,90%); margin:0; padding:8px 16px; color:#fff2d3; background:#10251dea; border:1px solid #bc9d6670; border-radius:4px; font:14px/1.4 system-ui,sans-serif; text-align:center; pointer-events:none; }
/* The central aisle keeps announcements and dialogue clear of the actors and each other. */
@media(min-width:1100px) {
    #battle-screen .battle-banner { left:51.5%; top:148px; min-width:0; width:max-content; max-width:210px; padding:8px 16px; font-size:17px; letter-spacing:.08em; }
    #battle-screen .battle-subtitle { left:51.5%; top:202px; width:max-content; max-width:210px; padding:6px 10px; font:12px/1.4 system-ui,sans-serif; }
}
.audio-settings { display:grid; grid-template-columns:1fr 1.3fr; align-items:center; gap:4px 12px; padding:12px; margin:0 0 18px; border:1px solid #a58b60; color:#3f3526; text-align:left; }
.audio-settings legend { font:16px Georgia,serif; padding:0 6px; }
.audio-settings label { font:12px system-ui,sans-serif; }
.audio-settings output { color:#244e43; float:right; margin-left:4px; }
.audio-settings input[type=range] { width:100%; min-height:36px; accent-color:#315c4c; }
.audio-settings .audio-check { grid-column:1/-1; display:flex; align-items:center; gap:8px; min-height:36px; }
.audio-settings input[type=checkbox] { width:20px; height:20px; accent-color:#315c4c; }

@media(max-width:699px) {
    #battle-screen .top-bar { height:94px; min-height:94px; padding:5px 10px; display:flex; flex-direction:column; align-items:stretch; gap:4px; }
    #battle-screen .top-bar>div:last-child { display:flex; justify-content:space-between; gap:3px!important; }
    #battle-screen .top-bar .action-btn { min-height:44px; padding:5px!important; font-size:10px!important; }
    #battle-screen .top-bar .ap-container { min-width:45px; padding:3px 6px; font-size:0; }
    #battle-screen .top-bar .ap-container::before { content:'✦'; font-size:13px; margin-right:4px; }
    #battle-screen .unit-status { width:var(--actor-label-width,84px); padding:4px!important; }
    #battle-screen .unit-name { flex-direction:row; align-items:center; gap:3px; font-size:9px!important; }
    #battle-screen .unit-name>span[aria-label] { font-size:9px; }
    #battle-screen .unit-name>span:first-child { min-width:0; }
    #battle-screen .unit-status .attack-btn { min-height:32px; font-size:10px!important; }
    #battle-screen .unit-status .unit-focus-btn { min-height:20px; font-size:9px!important; }
    #battle-screen .unit-meta { font-size:8px; flex-wrap:wrap; }
    #battle-screen .enemy-intent { font-size:9px; }
    #battle-screen .bottom-bar { grid-template-columns:minmax(0,1fr); gap:6px; padding:6px; grid-template-rows:minmax(0,1fr) 46px; }
    #battle-screen .cards-hand { display:flex; justify-content:flex-start; align-items:flex-start; gap:10px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; touch-action:pan-x pinch-zoom; scroll-snap-type:x proximity; scroll-padding-inline:4px; padding:4px 4px 6px; scrollbar-width:thin; scrollbar-color:#a59062 #142a21; }
    #battle-screen .hand-slot { flex:0 0 170px; width:170px; min-width:170px; scroll-snap-align:start; }
    #battle-screen .deck-card.card-in-hand { height:218px; touch-action:pan-x pinch-zoom; }
    #battle-screen .card-in-hand .card-art-placeholder { height:80px; min-height:80px; margin:0 4px; }
    #battle-screen .card-in-hand .card-top-bar { padding:3px!important; }
    #battle-screen .card-in-hand .card-type-tag { font-size:9px!important; }
    #battle-screen .card-in-hand .card-header-area { min-height:32px; padding:4px 6px 0!important; }
    #battle-screen .card-in-hand .card-name-title { font-size:14px!important; }
    #battle-screen .card-in-hand .card-body-description { padding:4px 6px!important; min-height:30px; }
    #battle-screen .card-in-hand .card-body-description p { font-size:11px!important; }
    #battle-screen .card-target-line { padding:4px 6px; font-size:11px; min-height:32px; white-space:normal; }
    #battle-screen .card-details-btn { min-height:44px; font-size:12px; }
    #battle-screen .deck-controls { display:grid!important; grid-template-columns:1fr 1fr 1.4fr; width:100%; gap:5px; }
    #battle-screen .pile,#battle-screen .end-turn-btn { min-width:0; width:100%; min-height:44px; height:44px; font-size:12px; }
    #battle-screen .manual-bar { top:calc(var(--hand-top) - 25px); padding:0 6px; }
    #battle-screen .manual-feedback { font-size:10px; }
    #battle-screen .battle-banner { top:104px; font-size:15px; padding:7px 15px; }
    #battle-screen .skip-animation-btn { top:103px; right:5px; min-height:30px; font-size:9px; }
    .battle-subtitle { top:100px; padding:5px 8px; font-size:12px; }
}

/* A short landscape viewport uses a fixed hand rail and leaves the full height to battle. */
@media(min-width:700px) and (max-height:500px) {
    #battle-screen { overflow:hidden; }
    #battle-screen .bottom-bar {
        left:auto;
        right:0;
        top:56px;
        width:220px;
        height:calc(var(--battle-height) - 56px);
        padding:6px;
        grid-template-columns:minmax(0,1fr);
        grid-template-rows:minmax(0,1fr) auto;
        align-items:stretch;
        gap:6px;
        border-top:0;
        border-left:1px solid #bda4738c;
        box-shadow:-8px 0 30px #0917114a;
    }
    #battle-screen .cards-hand {
        flex-direction:column;
        justify-content:flex-start;
        align-items:stretch;
        gap:6px;
        min-height:0;
        padding:2px 4px 6px;
        overflow-x:hidden;
        overflow-y:auto;
        overscroll-behavior-y:contain;
        touch-action:pan-y pinch-zoom;
        scrollbar-width:thin;
        scrollbar-color:#a59062 #142a21;
    }
    #battle-screen .hand-slot { flex:0 0 auto; width:100%; min-width:0; }
    #battle-screen .deck-card.card-in-hand { height:194px; }
    #battle-screen .deck-controls {
        display:grid!important;
        grid-template-columns:1fr 1fr;
        align-self:stretch;
        align-items:stretch!important;
        width:100%;
        gap:4px;
        padding:0;
    }
    #battle-screen .pile { min-width:0; width:100%; min-height:32px; height:32px; padding:3px; font-size:10px; }
    #battle-screen .end-turn-btn { grid-column:1/-1; min-height:42px; height:42px; padding:4px; font-size:12px; }
    #battle-screen .end-turn-btn .icon { font-size:17px; }
    #battle-screen .manual-bar { right:220px; top:auto; bottom:0; padding:0 5px; }
    #battle-screen .unit-status { width:min(var(--actor-label-width,120px),120px,calc(var(--battle-field-width) * .2 - 8px)); padding:2px 5px!important; }
    #battle-screen .unit-name { font-size:10px!important; line-height:1.15; }
    #battle-screen .unit-status .hp-bar-bg { height:3px; margin-top:2px; }
    #battle-screen .unit-status .attack-btn,#battle-screen .unit-status .unit-focus-btn { min-height:22px; margin-top:1px; padding:1px!important; font-size:9px!important; }
    #battle-screen .unit-meta,#battle-screen .enemy-intent { height:11px; margin:0!important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; line-height:11px; }
    #battle-screen .battle-banner,#battle-screen .battle-subtitle,#battle-screen .battle-card-cast { left:calc(var(--battle-field-width) / 2); }
}

@media(max-width:359px) {
    #battle-screen .top-bar { padding-inline:6px; }
    #battle-screen .top-bar>div:last-child { flex-wrap:nowrap!important; gap:2px!important; }
    #battle-screen .top-bar .action-btn { min-width:0; padding:4px 3px!important; font-size:9px!important; }
    #battle-screen .top-bar .ap-container { min-width:36px; padding:3px 5px; }
    #battle-screen .top-bar .ap-container::before { display:none; }
}

/* The same original species seals appear in the roster, battle and codex. */
.species-emblem { display:inline-block; width:1.35em; height:1.35em; flex-shrink:0; vertical-align:-.28em; color:#ba9b62; }
.entry-icon .species-emblem { width:1em; height:1em; }
#battle-screen .unit-identity { display:inline-flex; align-items:center; gap:3px; min-width:0; }
#battle-screen .unit-identity>span:not(.sr-only) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#battle-screen .unit-identity .species-emblem { width:12px; height:12px; }
#battle-screen .unit-identity .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.card-art-fallback { display:none; }
.card-art-placeholder[data-art-unavailable="true"] .card-art-fallback { display:grid; position:absolute; inset:0; place-content:center; padding:4px; text-align:center; font:11px/1.2 system-ui,sans-serif; color:#57402a; background:radial-gradient(ellipse,#eddfbf,#c8ae7e); }
@media (max-width:699px) { .card-art-placeholder[data-art-unavailable="true"] .card-art-fallback { font-size:9px; } }