/* One compact opponent HUD; the full colored battle text remains below it. */
#br-combat:not([hidden]){display:flex;flex-wrap:nowrap;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(110deg,#38282b,#182b36 70%);border-bottom:1px solid #805f4c}
#br-battle-portrait{flex:0 0 auto;width:48px;height:58px;object-fit:contain}
#br-battle-portrait[hidden]{display:none}
.br-battle-target{flex:1;min-width:0;display:grid;gap:4px}
.br-battle-target .br-battle-label{font-size:9px;line-height:1.2;letter-spacing:.15em}
#br-opponent{display:block;max-width:none;overflow-wrap:anywhere;font:700 15px/1.25 system-ui;color:#ffedd0}
.br-battle-health{display:flex;align-items:center;gap:8px;max-width:500px}
#br-opponent-hp{flex:1;width:100%;height:13px;min-width:32px;appearance:none;background:#0c1921;border:1px solid #745b53;border-radius:8px;overflow:hidden}
#br-opponent-hp::-webkit-meter-bar{background:#0c1921;border:0;box-shadow:none;border-radius:8px}
#br-opponent-hp::-webkit-meter-optimum-value{background:linear-gradient(90deg,#a45442,#e5a368);border-radius:8px}
#br-opponent-hp::-moz-meter-bar{background:linear-gradient(90deg,#a45442,#e5a368);border-radius:8px}
#br-combat[data-health=low] #br-opponent-hp::-webkit-meter-optimum-value{background:#e07c6d}
#br-opponent-pct{font:700 12px/1.3 ui-monospace,monospace;color:#ffdfb8;min-width:4ch;text-align:right}
#br-battle-note{font:11px/1.3 system-ui;color:#bac6c9}
.br-battle-actions{display:flex;gap:6px;flex-shrink:0}
.br-battle-actions button,#br-flee{min-height:44px;min-width:60px;padding:8px 12px;font:600 12px system-ui;border:1px solid #6e897a;border-radius:8px;background:linear-gradient(#405d51,#29453e);color:#e6edc9;cursor:pointer}
#br-flee{background:#65392d;border-color:#b1815c;color:#ffead1}
#br-attack{background:#633c31;border-color:#b58660;color:#ffecd0;min-height:44px}
@media(max-width:600px){#br-combat:not([hidden]){padding:8px;gap:8px}#br-battle-portrait{width:40px;height:50px}#br-opponent{font-size:13px}.br-battle-actions{flex-direction:column;gap:4px}.br-battle-actions button,#br-flee{min-height:44px;min-width:58px;padding:7px;font-size:11px}#br-battle-note{font-size:10px}}
@media(max-height:560px){#br-battle-portrait{width:32px;height:40px}#br-combat:not([hidden]){padding:4px 8px}.br-battle-actions{flex-direction:row}.br-battle-target .br-battle-label{display:none}#br-battle-note{display:none}}

/* Combat has one status header. Keyboard mode reserves the viewport for text. */
body.beta-in-combat #br-combat-alert{display:none!important}
body.beta-in-combat #client-toolbar,body.beta-in-combat #opponent-bar{display:none!important}
body.beta-in-combat.ck-native-keyboard[data-beta-view="map"] #beta-navigation,
body.beta-in-combat.ck-native-keyboard[data-beta-view="map"] #beta-nav-controls,
body.beta-in-combat.ck-native-keyboard[data-beta-view="map"] #br-battle-portrait,
body.beta-in-combat.ck-native-keyboard[data-beta-view="map"] #br-battle-note,
body.beta-in-combat.ck-native-keyboard[data-beta-view="map"] .br-battle-label{display:none!important}
body.beta-in-combat.ck-native-keyboard #br-combat{padding:4px 7px!important;gap:6px!important}
body.beta-in-combat.ck-native-keyboard .br-battle-actions{flex-direction:row!important}
body.beta-in-combat.ck-native-keyboard .br-battle-actions button{min-height:36px!important;padding:5px 8px!important;min-width:50px!important}
body.beta-in-combat.ck-native-keyboard #br-opponent{font-size:12px}
body.beta-in-combat.ck-native-keyboard .br-feed-heading{padding:3px 7px!important;min-height:28px}
body.beta-in-combat.ck-native-keyboard #br-feed{flex:1!important;height:auto!important;min-height:0!important;max-height:none!important}

body.beta-in-combat.ck-native-keyboard[data-beta-view="map"] #beta-hud{display:none!important}

/* Keep attack awareness when the player chooses another tab. */
body.beta-in-combat:not([data-beta-view="map"]) #br-combat-alert:not([hidden]){display:block!important}
#br-combat:not([hidden]){flex-wrap:wrap}
.br-battle-layout{display:flex;align-items:center;gap:4px;width:100%;flex:0 0 100%}
.br-battle-layout button{min-height:32px;border:1px solid var(--ui-border,#6e897a);border-radius:6px;padding:4px 8px;background:var(--ui-raised,#243a44);color:var(--ui-accent,#e6edc9);font:600 11px system-ui;cursor:pointer}
#br-battle-drag{margin-right:auto;border-color:transparent;background:transparent;color:var(--ui-text,#ffedd0);opacity:1;touch-action:none;user-select:none}
#br-battle-drag:disabled{cursor:default}
.br-unlocked #br-battle-drag{cursor:grab;border:1px dashed var(--ui-accent,#e6edc9)}
#br-combat.br-floating{position:fixed;z-index:400;width:350px;max-width:calc(100vw - 16px);box-sizing:border-box;border:1px solid var(--ui-border,#805f4c);border-radius:12px;box-shadow:0 8px 25px #0007;background:var(--ui-chrome,#182b36);color:var(--ui-text,#ffedd0)}
#br-combat.br-collapsed #br-battle-portrait,#br-combat.br-collapsed #br-battle-note,#br-combat.br-collapsed .br-battle-actions,#br-combat.br-collapsed .br-battle-label{display:none!important}
#br-combat.br-collapsed .br-battle-target{flex-basis:100%;grid-template-columns:minmax(0,1fr) minmax(90px,1fr);align-items:center;gap:8px}
#combat-layout-dialog{max-width:440px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;padding:20px;border:1px solid var(--ui-border,#516a70);border-radius:14px;background:var(--ui-chrome,#182b36);color:var(--ui-text,#e6edc9);font:15px/1.5 system-ui}
#combat-layout-dialog h2{margin:0 0 12px;font-size:21px}
#combat-layout-dialog label{display:flex;gap:10px;align-items:center;min-height:44px;margin:8px 0}
#combat-layout-dialog input{flex:0 0 auto;width:18px;height:18px;accent-color:var(--ui-accent,#e6edc9)}
#combat-layout-dialog p{font-size:13px}
#combat-layout-dialog button{min-height:44px;margin:4px;padding:8px 14px;border-radius:7px;border:1px solid var(--ui-border,#6e897a);background:var(--ui-raised,#243a44);color:var(--ui-accent,#e6edc9)}
#combat-layout-dialog::backdrop{background:#0008}







/* Optional layout controls stay out of the way until a panel is floated/collapsed. */
body.beta-client .ck-panel-layout,body.beta-client .ck-panel-resize,#br-battle-resize{display:none}
body.beta-client .ck-panel-floating{position:fixed!important;z-index:390;box-sizing:border-box;max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 24px);min-width:0!important;min-height:0!important;flex:none!important;margin:0!important;border:1px solid var(--ui-border,#58717b)!important;border-radius:10px!important;box-shadow:0 8px 25px #0007;background:var(--ui-chrome,#182b36)!important;color:var(--ui-text,#eee);overflow:auto!important;display:flex!important;flex-direction:column!important}
body.beta-client .ck-panel-floating>.ck-panel-layout,body.beta-client .ck-panel-collapsed>.ck-panel-layout{display:flex!important;align-items:center;gap:4px;padding:5px;flex:0 0 auto;width:100%;box-sizing:border-box;background:var(--ui-chrome,#182b36)}
.ck-panel-layout button{min-height:32px;border:1px solid var(--ui-border,#58717b);border-radius:6px;padding:4px 8px;background:var(--ui-raised,#243a44);color:var(--ui-accent,#e6edc9);font:600 11px system-ui;cursor:pointer}
.ck-panel-layout .ck-panel-handle{margin-right:auto;background:transparent;border-color:transparent;opacity:1;color:var(--ui-text,#eee)}
.ck-panel-unlocked .ck-panel-handle{cursor:grab;border:1px dashed var(--ui-accent,#e6edc9)}
body.beta-client .ck-panel-collapsed{min-height:0!important;height:auto!important;flex:0 0 auto!important}
body.beta-client .ck-panel-collapsed>:not(.ck-panel-layout){display:none!important}
body.beta-client .ck-panel-floating.ck-panel-unlocked:not(.ck-panel-collapsed)>.ck-panel-resize,#br-combat.br-floating.br-unlocked:not(.br-collapsed)>#br-battle-resize{display:block;position:absolute;bottom:1px;right:1px;width:28px;height:28px;min-height:0;padding:2px;z-index:5;cursor:nwse-resize;touch-action:none;background:var(--ui-raised,#243a44);color:var(--ui-accent,#e6edc9);border:1px solid var(--ui-border,#58717b);border-radius:5px}
body.beta-client #br-live.ck-panel-floating #br-feed{flex:1;height:auto!important;min-height:0;max-height:none!important}
body.beta-client #vitals-bar.ck-panel-floating{flex-direction:row!important;flex-wrap:wrap;align-content:start}
#br-combat.br-floating{max-height:calc(100dvh - 24px);overflow:auto;align-content:start}
#br-combat.br-idle .br-battle-actions,#br-combat.br-idle .br-battle-health{display:none!important}
body.beta-client .ck-layout-inactive.ck-panel-floating,body.beta-client #br-combat.ck-layout-inactive{display:none!important}
#combat-layout-dialog fieldset{border:1px solid var(--ui-border,#58717b);border-radius:8px;display:flex;gap:10px;flex-wrap:wrap;margin:10px 0;padding:4px 10px}
#combat-layout-dialog fieldset label{margin:0}
#ck-controls-dialog{width:620px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);box-sizing:border-box;padding:20px;overflow:auto;background:var(--ui-chrome,#182b36);color:var(--ui-text,#eee);border:1px solid var(--ui-border,#58717b);border-radius:12px;font:14px/1.45 system-ui}
#ck-controls-dialog::backdrop{background:#0009}
#ck-controls-dialog h2{margin:0 0 10px;color:var(--ui-text,#eee)}
#ck-controls-dialog button{min-height:40px;border:1px solid var(--ui-border,#58717b);border-radius:7px;padding:6px 10px;background:var(--ui-raised,#243a44);color:var(--ui-accent,#e6edc9);font:inherit;cursor:pointer}
#ck-controls-dialog>button{margin:8px 5px 0 0}
#ck-controls-dialog label{display:flex;align-items:center;gap:8px;min-height:44px}
#ck-controls-dialog input{accent-color:var(--ui-accent,#e6edc9)}
.ck-controls-list{display:grid;gap:6px;margin:10px 0}
.ck-controls-row{display:grid;grid-template-columns:minmax(100px,1fr) minmax(140px,1fr) auto;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--ui-border,#58717b)}
#ck-controls-status{min-height:2.8em;color:var(--ui-accent,#e6edc9)}
#ck-controls-dialog .ck-recording{outline:2px solid var(--ui-accent,#e6edc9)}
.ck-controls-help{font-size:12px}
@media(max-width:480px){#ck-controls-dialog{padding:12px}.ck-controls-row{grid-template-columns:minmax(80px,1fr) minmax(115px,1fr) auto;gap:5px;font-size:12px}}
/* Shared desktop/browser text mode reuses the current terminal and connection. */
body.beta-client.ck-text-mode #beta-navigation,body.beta-client.ck-text-mode #beta-side,body.beta-client.ck-text-mode #beta-map-host,body.beta-client.ck-text-mode #beta-room-host,body.beta-client.ck-text-mode #beta-sheet>header,body.beta-client.ck-text-mode #beta-chat-bubbles,body.beta-client.ck-text-mode #beta-ticker{display:none!important}
body.beta-client.ck-text-mode #beta-sheet{position:relative;inset:auto;flex:1}
body.beta-client.ck-text-mode #beta-sheet-body{padding:0}
body.beta-client.ck-text-mode .ck-panel-floating{display:none!important}
/* Keep Controls and Text/2D reachable during combat. */
body.beta-client.beta-in-combat:not(.ck-native-visual) #client-toolbar{display:flex!important}
body.beta-client #toolbar-right{flex-wrap:wrap}
body.beta-client #toolbar-right>#btn-controls,body.beta-client #toolbar-right>#btn-visual-mode{display:inline-flex!important;align-items:center;justify-content:center}
/* Explicitly floating panels override the normal tab-specific visibility rules. */
body.beta-client[data-beta-view] :is(#beta-chat,#beta-nav-controls,#beta-map-panel,#br-live,#vitals-bar).ck-panel-floating:not([hidden]){display:flex!important}
body.beta-client :is(#beta-chat,#beta-nav-controls,#beta-map-panel,#br-live,#vitals-bar).ck-panel-collapsed>:not(.ck-panel-layout){display:none!important}
body.beta-client[data-beta-view] :is(#beta-chat,#beta-nav-controls,#beta-map-panel,#br-live,#vitals-bar).ck-panel-floating.ck-layout-inactive,
body.beta-client.ck-text-mode[data-beta-view] :is(#beta-chat,#beta-nav-controls,#beta-map-panel,#br-live,#vitals-bar).ck-panel-floating{display:none!important}
/* Android supplies its toolbar, but the shared 2D view owns the full vitals row. */
body.beta-client.ck-native-visual[data-beta-view] #client-toolbar{display:none!important}
body.beta-client.ck-native-visual[data-beta-view="map"] #vitals-bar{display:flex!important}
#ck-controls-status{position:sticky;top:-20px;z-index:2;background:var(--ui-chrome,#182b36);padding:8px 0}
@media(max-width:480px){#ck-controls-status{top:-12px}}

/* Keep dismissal available even at the end of a long shortcut list. */
#ck-controls-dialog .ck-controls-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:-20px;z-index:3;padding:8px 0;background:var(--ui-chrome,#182b36)}
#ck-controls-dialog .ck-controls-heading h2{margin:0}
#ck-controls-dialog #ck-controls-close{flex:0 0 44px;min-height:44px;padding:4px;font-size:26px;line-height:1;color:var(--ui-accent,#e6edc9)}
#ck-controls-status{top:40px}
@media(max-width:480px){#ck-controls-dialog .ck-controls-heading{top:-12px}#ck-controls-status{top:48px}}

/* Hidden must win over base room and floating layout display rules. */
body.beta-client #br-combat[hidden]{display:none!important}

/* The terminal already shows live output; reclaim the duplicate activity space. */
body.beta-client.ck-text-mode #br-live{display:none!important}