/* The game owns the viewport. HUD elements sit over the playable world. */
body:has(#game.battle-screen) { overflow: hidden; height: 100dvh; }
body:has(#game.battle-screen) > .site-header,
body:has(#game.battle-screen) > .site-footer,
body:has(#game.battle-screen) > .connection-panel { display: none; }
body:has(#game.battle-screen) .storage-notice:not([hidden]) { position: fixed; top: 190px; left: 24px; z-index: 25; max-width: 260px; margin: 0; font-size: 12px; }
#game.battle-screen { position: fixed; inset: 0; max-width: none; width: 100%; height: 100dvh; padding: 0; margin: 0; overflow: hidden; }
.battle-shell { position: relative; width: 100%; height: 100%; isolation: isolate; }
.battle-arena, .battle-world { position: absolute; inset: 0; overflow: hidden; }
.battle-world { background: radial-gradient(ellipse at 50% 42%, #3c4535 0%, #252c25 42%, #111917 80%); pointer-events: none; }
.battle-world::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#1015159c 0%, transparent 30%, transparent 66%, #0d1014e8 100%); }
.world-tree { position: absolute; width: 290px; max-width: none; height: 375px; image-rendering: pixelated; opacity: .3; filter: brightness(.45); }
.world-tree-a { top: 23%; left: -175px; transform: scale(1.8); }
.world-tree-b { top: 14%; right: -125px; transform: scale(1.6); }
.world-tree-c { bottom: -145px; left: 6%; transform: scale(1.5); }
.world-tree-d { bottom: -190px; right: 6%; transform: scale(1.8); }
.battle-shell[data-map="deltaris-foundry"] .battle-world { background: radial-gradient(ellipse at 50% 42%, #49463e, #292927 45%, #151819 85%); }
.battle-shell[data-map="deltaris-foundry"] .world-tree { content: url('assets/pixel/props/rock.png'); height: 280px; opacity: .45; }
.scene-viewport { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; scrollbar-width: none; --scene-safe-top: 100px; --scene-safe-bottom: 180px; --scene-safe-left: 24px; --scene-safe-right: 24px; }
.scene-viewport::-webkit-scrollbar { display: none; }
#battle-scene { position: relative; min-width: 100%; min-height: 100%; }
.iso-stage { position: relative; isolation: isolate; width: var(--stage-width); height: var(--stage-height); margin: 0; overflow: visible; }
.iso-stage-caption { display: none !important; position: absolute; top: 32px; left: 34px; display: grid; gap: 4px; font-size: 9px; letter-spacing: 2px; color: #929688; }
.iso-stage-caption span:first-child { font-size: 11px; color: #c3c7b5; }
.iso-ground-depth { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.iso-ground-shadow { fill: #070a07; transform: translateY(29px) scale(1.02); transform-origin: center; }
.iso-ground-left { fill: #564a36; stroke: #3c3329; stroke-width: 2; }
.iso-ground-right { fill: #3c352b; stroke: #2e2922; stroke-width: 2; }
.iso-ground-stratum { fill: none; stroke: #746348; stroke-width: 3; opacity: .7; }
.iso-stage[data-map="deltaris-foundry"] .iso-ground-left { fill: #58534b; }
.iso-stage[data-map="deltaris-foundry"] .iso-ground-right { fill: #3d3b37; }
.iso-stage[data-map="deltaris-foundry"] .iso-ground-stratum { stroke: #80715b; }
.iso-tiles, .iso-pieces, .iso-controls, .iso-piece-targets, .iso-effects { position: absolute; inset: 0; pointer-events: none; }
.iso-tiles { z-index: 1; }
.iso-pieces { z-index: 3; }
.iso-controls { z-index: 2; }
.iso-piece-targets { z-index: 4; }
.iso-effects { z-index: 5; }
.iso-piece-hit { position: absolute; width: 64px; height: 80px; min-width: 48px; min-height: 48px; border: 0; padding: 0; background: transparent; pointer-events: auto; border-radius: 12px 12px 4px 4px; }
.iso-tile { position: absolute; width: var(--tile-width); height: var(--tile-height); pointer-events: none; }
.iso-tile::before { content: ''; position: absolute; inset: 0; background: #65763f; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.iso-tile[data-terrain="water"]::before { background: #41636b; }
.iso-stage[data-map="deltaris-foundry"] .iso-tile::before { background: #727263; }
.iso-tile-art { position: absolute; left: 0; max-width: none; object-fit: fill; image-rendering: pixelated; opacity: 0; }
.iso-tile-art.is-loaded { opacity: 1; }
.iso-tile-alternate .iso-tile-art { filter: brightness(.93); }
.iso-tile > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: transparent; stroke: #f9ffdf19; stroke-width: 1; }
.iso-cell { position: absolute; width: var(--tile-width); height: var(--tile-height); min-width: 48px; min-height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); pointer-events: auto; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.iso-target { position: absolute; inset: 0; width: 100%; height: 100%; fill: transparent; stroke: transparent; stroke-width: 3; pointer-events: none; }
.iso-cell:hover .iso-target { fill: #fff2; stroke: #fff8; }
.iso-cell.is-selected .iso-target { stroke: var(--primary); stroke-width: 4; fill: #bb86fc1c; }
.iso-cell.legal-move .iso-target { fill: #bb86fc22; stroke: #d3b1ff; stroke-width: 2; stroke-dasharray: 5 3; }
.iso-cell.legal-attack .iso-target { fill: #cf667925; stroke: #fb9cad; stroke-width: 4; }
.iso-cell:focus-visible { outline: none; }
.iso-cell:focus-visible .iso-target { stroke: #03dac6; stroke-width: 5; stroke-dasharray: none; fill: #03dac622; }
.iso-cell-coordinate { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); font-size: 8px; font-weight: 500; color: #fff; opacity: 0; text-shadow: 0 1px 2px #000; pointer-events: none; }
.iso-cell:hover .iso-cell-coordinate, .iso-cell:focus-visible .iso-cell-coordinate { opacity: 1; }
.iso-action-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 10px; font-weight: 700; letter-spacing: .5px; line-height: 1.5; padding: 0 5px; color: #f0e2ff; background: #211c2aed; pointer-events: none; }
.iso-action-label:empty { display: none; }
.iso-cell.legal-attack .iso-action-label { color: #ffd3da; background: #4b2532ed; }
.iso-piece { position: absolute; width: 0; height: 0; pointer-events: none; }
.iso-piece-shadow { display: block; position: absolute; box-sizing: border-box; width: 58px; height: 19px; left: -29px; top: -9.5px; border-radius: 50%; background: #17200a96; }
.iso-piece-art { position: absolute; width: var(--art-width); height: var(--art-height); left: calc(var(--art-width) / -2); bottom: calc(var(--foot-y) * -1); }
.iso-piece-art img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; image-rendering: pixelated; }
.iso-sprite { opacity: 0; }
.iso-sprite.is-loaded { opacity: 1; }
.iso-piece-art:has(.iso-sprite.is-loaded) .iso-sprite-fallback { visibility: hidden; }
.iso-sprite-fallback { opacity: .8; }
.iso-action-sprite { position: absolute; image-rendering: pixelated; background-repeat: no-repeat; pointer-events: none; }
.iso-piece:has(.iso-action-sprite:not([hidden])) .iso-piece-art { visibility: hidden; }
.iso-piece-label { position: absolute; left: 0; top: 16px; transform: translateX(-50%); font-size: 9px; font-weight: 500; letter-spacing: .25px; white-space: nowrap; color: #f2eee2; line-height: 1.3; padding: 2px 4px; background: #151811df; border: 1px solid #d2d8bf44; }
.iso-piece-label:empty { display: none; }
.iso-creature .iso-piece-label { opacity: 0; font-size: 8px; padding: 1px 3px; }
.iso-creature.is-selected .iso-piece-label, .iso-creature.is-inspected .iso-piece-label { opacity: 1; }
.iso-piece.is-yours .iso-piece-label { border-color: #b699dc; }
.iso-piece.is-opponent .iso-piece-label { border-color: #d4aa83; }
.iso-piece.is-selected .iso-piece-label { color: #e9d7ff; border-color: var(--primary); }
.iso-piece-health { position: absolute; top: 11px; left: -23px; width: 46px; height: 3px; background: #342f29; border: 1px solid #111; box-sizing: content-box; }
.iso-piece-health i { display: block; height: 100%; background: #c3da98; }
.iso-piece.is-opponent .iso-piece-health i { background: #e1ba8c; }
.iso-egg .iso-piece-health i { background: #ebd48b; }
.iso-egg .iso-piece-label { color: #f4dea2; }
.iso-egg.is-destroyed .iso-piece-art { opacity: .3; transform: rotate(15deg) translateY(14px); filter: grayscale(1); }
.iso-egg.is-destroyed .iso-piece-label { color: #c3bbaa; }
.iso-damage { position: absolute; transform: translateX(-50%); z-index: 30; color: #fff0ea; font-weight: 700; font-size: 12px; white-space: nowrap; background: #422328f2; border: 1px solid #d18391; padding: 2px 5px; }
.iso-compass { display: none !important; position: absolute; bottom: 13px; left: 34px; right: 34px; display: flex; justify-content: space-between; color: #8d9381; font-size: 9px; letter-spacing: 1.5px; pointer-events: none; }

/* Minimal overlaid game HUD, with no page header, sidebar or footer. */
.battle-masthead { position: absolute; z-index: 10; top: max(20px, env(safe-area-inset-top)); left: 28px; right: 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 20px; pointer-events: none; }
.battle-masthead > * { pointer-events: auto; }
.battle-kicker { font-size: 9px; font-weight: 500; letter-spacing: 1.8px; color: #b4b7b4; }
.battle-masthead h1 { font-size: 19px; letter-spacing: .1px; margin-top: 4px; text-shadow: 0 2px 3px #000; }
.battle-masthead > div:first-child { pointer-events: none; }
.battle-turn { display: grid; justify-items: center; gap: 2px; min-width: 230px; text-align: center; padding: 9px 38px 12px; background: #191d1dde; border-top: 2px solid #969789; box-shadow: 0 5px 16px #0003; clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px); }
.battle-turn strong { font-size: 21px; font-weight: 500; line-height: 1.2; }
.battle-turn #turn-ap { font-size: 11px; letter-spacing: 2px; color: #c6c6bd; }
.battle-turn.is-your-turn { border-top-color: var(--primary); }
.battle-turn.is-your-turn strong { color: var(--primary); }
.battle-menu-button { justify-self: end; min-width: 112px; background: #1c2020da; border-color: #ffffff30; border-radius: 3px; gap: 10px; }
.battle-menu-button > span { font-size: 19px; }
.battle-menu-button kbd { font: 9px Roboto,sans-serif; color: #aaa; border: 1px solid #666; padding: 2px 3px; }
.battle-base-hud { position: absolute; z-index: 8; top: 95px; left: 26px; right: 26px; display: flex; justify-content: space-between; align-items: start; pointer-events: none; }
.battle-base-status { display: flex; gap: 10px; align-items: center; min-width: 155px; }
.battle-base-status img { width: 40px; height: 48px; image-rendering: pixelated; }
.battle-base-status > div { display: grid; gap: 5px; }
.battle-base-name { font-size: 9px; font-weight: 500; letter-spacing: 1px; color: #e4dfcc; }
.battle-hit-pips { display: flex; gap: 5px; }
.battle-hit-pips i { display: block; width: 20px; height: 8px; border: 1px solid #d4c897; transform: skewX(-12deg); background: #d8c690; box-shadow: 0 1px 4px #0008; }
.battle-hit-pips i.is-broken { background: transparent; border-color: #d4c89766; }
.battle-base-count { font-size: 10px; color: #bfbfb1; font-weight: 400; }
.battle-enemy-hud { display: grid; justify-items: end; gap: 14px; }
.battle-enemy-hud .battle-base-status { flex-direction: row-reverse; text-align: right; }
.battle-enemy-hud .battle-hit-pips { justify-content: end; }
.battle-opponent-row { pointer-events: auto; }
.battle-objective { position: absolute; z-index: 7; left: 50%; top: 125px; transform: translateX(-50%); text-align: center; color: #d2d6c5; font-size: 9px; letter-spacing: 2px; pointer-events: none; }
.battle-objective span { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .3px; color: #a4ae9e; }
.battle-objective { padding: 6px 10px; background: #151b17d9; }
.battle-notice { position: absolute; z-index: 9; top: 181px; left: 28px; width: 195px; min-height: 0; padding: 0; font-size: 11px; line-height: 1.7; color: #c6cebd; pointer-events: none; }
.battle-notice:empty { display: none; }
.battle-shell.is-controls-paused .battle-notice { color: #f4db9e; background: #202222ec; padding: 10px; }
.battle-command-deck { position: absolute; z-index: 10; left: 28px; right: 28px; bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: end; justify-content: space-between; gap: 24px; pointer-events: none; }
.battle-command-deck > * { pointer-events: auto; }
.battle-own-row > p { margin-bottom: 10px; letter-spacing: 1.7px; font-size: 9px; }
#your-squad-label { margin-left: 10px; color: #8e988e; font-size: 9px; letter-spacing: 0; }
.battle-roster { display: flex; gap: 8px; }
.battle-roster-slot { position: relative; display: grid; justify-items: center; align-content: center; width: 78px; height: 85px; min-height: 48px; padding: 3px 3px 9px; color: #e2e6d8; background: linear-gradient(#242929ed,#171c1be8); border: 1px solid #666b5a; border-radius: 3px; box-shadow: 0 5px 12px #0004; }
.battle-roster-slot:hover { border-color: #d4d8c6; background: #333b32; }
.battle-roster-slot.is-selected { border-color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary), 0 5px 12px #0004; background: #302e3be8; }
.battle-roster-slot > img { width: 46px; height: 46px; image-rendering: pixelated; }
.battle-slot-copy strong { display: block; font-weight: 500; font-size: 9px; line-height: 1.3; }
.battle-slot-copy small { font-size: 8px; line-height: 1; color: #adb7a7; }
.battle-slot-health { position: absolute; left: 6px; right: 6px; bottom: 5px; height: 2px; background: #4b5144; }
.battle-slot-health i { display: block; height: 100%; background: #c7d6a1; }
.battle-roster-slot.is-defeated img { filter: grayscale(1); opacity: .3; }
.battle-roster-slot.is-defeated strong { text-decoration: line-through; }
.battle-opponent-row .battle-roster-slot { width: 48px; height: 48px; padding: 0; background: #191e1ab8; border-color: #7470638c; }
.battle-opponent-row .battle-roster-slot > img { width: 38px; height: 38px; }
.battle-opponent-row .battle-slot-copy { display: none; }
.battle-selection { display: flex; align-items: center; gap: 6px; padding: 8px 20px 10px 8px; min-width: 330px; min-height: 115px; background: #191e1ddb; border-top: 1px solid #737a6966; border-bottom: 1px solid #737a6933; box-shadow: 0 5px 24px #0002; }
.battle-selected-portrait { width: 90px; height: 90px; image-rendering: pixelated; flex: none; }
.battle-selection-copy { flex: 1; }
.battle-selection h2 { font-size: 23px; letter-spacing: .2px; line-height: 1.3; }
.battle-selection .battle-kicker { font-size: 8px; letter-spacing: 1px; }
.battle-stats { display: flex; gap: 19px; margin-top: 7px; }
.battle-stats > div { display: grid; gap: 1px; }
.battle-stats dt { color: #929e8e; font-size: 8px; letter-spacing: .8px; }
.battle-stats dd { margin: 0; font-size: 16px; color: #e5e9dc; line-height: 1.2; font-variant-numeric: tabular-nums; }
.battle-action-flags { margin-top: 8px; color: #c9bd9c; font-size: 8px; letter-spacing: .4px; }
.battle-command-actions { display: grid; justify-items: stretch; gap: 7px; min-width: 186px; }
.battle-mobile-ap { font-size: 11px; letter-spacing: 2px; color: #d0d7c6; text-align: right; }
.battle-command-actions .button { min-height: 56px; border-radius: 3px; font-size: 17px; box-shadow: 0 4px 0 #59436c, 0 7px 20px #0006; }
.battle-command-hint { font-size: 9px; text-align: center; color: #8f9b8c; }
.battle-field-feedback { position: absolute; z-index: 8; bottom: 161px; left: 50%; width: min(520px, 58%); transform: translateX(-50%); text-align: center; pointer-events: none; }
.battle-action-preview { color: #d8dfcf; font-size: 11px; min-height: 18px; line-height: 1.5; text-shadow: 0 1px 4px #000; }
.battle-scene-key { display: flex; justify-content: center; gap: 15px; margin-top: 7px; color: #b2bbaa; font-size: 8px; letter-spacing: .7px; }
.battle-scene-key > span { display: flex; align-items: center; gap: 5px; }
.battle-scene-key i { width: 10px; height: 6px; transform: skewY(-25deg); border: 1px solid; }
.key-move { border-color: var(--primary) !important; background: #bb86fc30; }
.key-attack { border-color: var(--error) !important; background: #cf667930; }
.battle-pan-hint { color: #8b9785; }
.battle-menu { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 24px; background: #202222; border: 1px solid #70786b; border-top: 3px solid var(--primary); border-radius: 4px; color: var(--text); box-shadow: 0 25px 100px #0009; }
.battle-menu::backdrop { background: #080c0bc9; }
.battle-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.battle-menu-heading h2 { margin-top: 5px; font-size: 27px; }
.battle-menu-heading button { font-size: 24px; width: 48px; padding: 0; }
.battle-menu-note { font-size: 12px; margin: 16px 0; }
.battle-menu-actions { display: grid; gap: 8px; }
.battle-reference { margin-top: 18px; }
.battle-reference details { border-top: 1px solid #454d43; }
.battle-reference summary { font-size: 13px; }
.battle-guide-copy, #battle-log { font-size: 12px; color: #b8c0b4; line-height: 1.8; }
.battle-guide-copy p { margin: 0 0 12px; }
#battle-log { padding-left: 20px; }
#battle-log li { padding-bottom: 8px; }
#resign-game { width: 100%; margin-top: 14px; color: #dcadad; }
.battle-result { position: absolute; z-index: 20; top: 35%; left: 50%; transform: translateX(-50%); width: min(530px, calc(100% - 32px)); padding: 32px; background: #171e1af5; text-align: center; border-top: 3px solid var(--primary); border-bottom: 1px solid #75856b; box-shadow: 0 20px 80px #000b; }
.battle-result h2 { font-size: 34px; margin: 8px 0 14px; }
.battle-result p:not(.battle-kicker) { font-size: 13px; }
.battle-result .battle-kicker { color: var(--primary); letter-spacing: 4px; }
.battle-result-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
#new-room-note { margin-top: 12px; }
@media (max-width: 900px) {
  .battle-masthead { left: 16px; right: 16px; top: 16px; gap: 8px; }
  .battle-masthead h1 { font-size: 15px; max-width: 170px; }
  .battle-turn { min-width: 175px; padding: 8px 18px; }
  .battle-turn strong { font-size: 18px; }
  .battle-menu-button { min-width: 48px; padding: 10px; font-size: 12px; }
  .battle-menu-button kbd { display: none; }
  .battle-base-hud { left: 16px; right: 16px; }
  .battle-notice { left: 16px; width: 160px; font-size: 10px; }
  .battle-command-deck { left: 16px; right: 16px; bottom: 18px; gap: 12px; }
  .battle-roster-slot { width: 60px; height: 76px; }
  .battle-roster { gap: 5px; }
  .battle-selection { min-width: 255px; padding: 8px 12px; }
  .battle-selected-portrait { display: none; }
  .battle-selection h2 { font-size: 20px; }
  .battle-command-actions { min-width: 144px; }
  .battle-command-actions .button { font-size: 15px; }
  .battle-command-hint { display: none; }
  .battle-stats { gap: 16px; }
  .battle-field-feedback { bottom: 153px; }
}
@media (max-width: 640px) {
  .scene-viewport { --scene-safe-top: 140px; --scene-safe-bottom: 223px; --scene-safe-left: 0px; --scene-safe-right: 0px; }
  .battle-masthead { top: 10px; left: 12px; right: 12px; grid-template-columns: 1fr 1fr; }
  .battle-masthead h1 { font-size: 14px; max-width: none; }
  .battle-masthead > div:first-child .battle-kicker { font-size: 7px; }
  .battle-menu-button { font-size: 11px; min-height: 48px; align-self: start; }
  .battle-turn { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); min-width: 124px; padding: 7px 12px; }
  .battle-turn strong { font-size: 15px; }
  .battle-turn .battle-kicker { font-size: 7px; letter-spacing: .6px; }
  .battle-turn #turn-ap { font-size: 9px; }
  .battle-base-hud { top: 77px; left: 10px; right: 10px; }
  .battle-base-status { min-width: 0; gap: 4px; }
  .battle-base-status img { display: none; }
  .battle-base-name { font-size: 7px; letter-spacing: .3px; }
  .battle-hit-pips { gap: 3px; }
  .battle-hit-pips i { width: 13px; height: 7px; }
  .battle-base-count { font-size: 8px; }
  .battle-enemy-hud { gap: 10px; }
  .battle-opponent-row { display: none; }
  .battle-objective { display: none; }
  .battle-notice { top: 137px; left: 12px; right: 12px; width: auto; text-align: center; font-size: 10px; }
  .battle-command-deck { left: 12px; right: 12px; bottom: max(12px,env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 124px; gap: 12px; }
  .battle-selection { grid-column: 1 / -1; grid-row: 1; min-width: 0; min-height: 72px; padding: 9px 12px; }
  .battle-selection-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; align-items: center; }
  .battle-selection .battle-kicker { font-size: 7px; grid-column: 1; }
  .battle-selection h2 { font-size: 18px; grid-column: 1; }
  .battle-stats { grid-column: 2; grid-row: 1 / 3; margin: 0; justify-content: space-between; gap: 9px; }
  .battle-stats dd { font-size: 14px; }
  .battle-stats dt { font-size: 7px; }
  .battle-action-flags { grid-column: 1 / -1; margin: 0; font-size: 7px; }
  .battle-own-row > p { display: none; }
  .battle-roster-slot { width: 52px; height: 64px; padding-bottom: 7px; }
  .battle-roster-slot > img { width: 37px; height: 37px; }
  .battle-slot-copy strong { font-size: 7px; }
  .battle-slot-copy small { display: none; }
  .battle-command-actions { min-width: 0; gap: 5px; }
  .battle-command-actions .button { font-size: 14px; min-height: 48px; padding: 8px; }
  .battle-mobile-ap { font-size: 9px; line-height: 1; }
  .battle-field-feedback { bottom: 190px; width: calc(100% - 24px); }
  .battle-action-preview { font-size: 10px; }
  .battle-scene-key { font-size: 7px; gap: 12px; margin-top: 5px; }
  .battle-pan-hint { font-size: 7px; }
  .world-tree { opacity: .2; }
  .battle-result { top: 27%; padding: 22px; }
  .battle-result h2 { font-size: 26px; }
  .battle-result-actions { flex-wrap: wrap; }
}
@media (max-width: 359px) {
  .battle-command-deck { left: 8px; right: 8px; grid-template-columns: 1fr 112px; gap: 9px; }
  .battle-roster { gap: 3px; }
  .battle-roster-slot { width: 48px; }
  .battle-selection { padding: 8px; }
  .battle-selection-copy { gap: 4px 8px; }
  .battle-stats { gap: 7px; }
  .battle-turn { min-width: 110px; }
}
@media (max-height: 600px) and (min-width: 641px) {
  .scene-viewport { --scene-safe-top: 80px; --scene-safe-bottom: 125px; }
  .battle-masthead { top: 10px; }
  .battle-base-hud { top: 80px; }
  .battle-objective { display: none; }
  .battle-command-deck { bottom: 10px; }
  .battle-selection { min-height: 92px; }
  .battle-field-feedback { bottom: 122px; }
}
@media (prefers-reduced-motion: reduce) {
  .battle-shell *, .battle-shell *::before, .battle-shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Movement remains legible without covering every tile with a text label. */
.iso-cell.legal-move:not(:hover):not(:focus-visible) .iso-action-label { width: 7px; height: 7px; padding: 0; font-size: 0; background: #e0c4ff; border-radius: 50%; box-shadow: 0 1px 3px #21152c; }
.iso-cell.legal-move .iso-target { fill: #bb86fc16; stroke: #d3b1ffbb; stroke-width: 1.5; stroke-dasharray: none; }
.iso-stage .iso-cell:focus-visible .iso-target { stroke: #03dac6; stroke-width: 5; stroke-dasharray: none; fill: #03dac622; }

.battle-network { margin-top: 16px; padding-top: 16px; border-top: 1px solid #454d43; }
.battle-network p { font-size: 12px; margin-bottom: 10px; }
.battle-network > div { display: grid; gap: 6px; }

/* Owner-selected Confluence artwork, with an overview and full-size play view. */
.iso-stage.is-confluence .iso-tile > svg { display: none; }
.iso-stage.is-confluence .iso-tile { overflow: hidden; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.iso-stage.is-confluence .iso-tile .iso-tile-art { filter: brightness(var(--terrain-brightness, 1)) saturate(var(--terrain-saturation, 1)); }
.iso-stage.is-confluence .iso-tile[data-terrain="water"] .iso-tile-art { animation: field-water 2.4s steps(4, end) infinite; animation-delay: var(--water-phase, 0s); }
@keyframes field-water {
  0%, 100% { filter: brightness(.90) saturate(1.04); }
  50% { filter: brightness(1.12) saturate(.95); }
}
.field-brick-left { fill: url('#field-bricks-left'); stroke: #302636; stroke-width: 3; }
.field-brick-right { fill: url('#field-bricks-right'); stroke: #302636; stroke-width: 3; }
.field-rim { fill: none; stroke: #403b35; stroke-width: 5; stroke-linejoin: miter; }
.iso-willow .iso-piece-shadow, .iso-boulder .iso-piece-shadow { display: none; }
.iso-creature.is-destroyed .iso-piece-shadow { opacity: .35; border: 0 !important; }
.scene-viewport.is-panning, .scene-viewport.is-panning * { cursor: grabbing !important; user-select: none; }
.scene-viewport.has-orbit-camera { touch-action: pinch-zoom; }
.scene-viewport.is-orbit-mode { cursor: grab; }
.iso-stage.is-confluence .iso-cell-coordinate { transform: translateX(-50%) var(--counter-orbit, matrix(1,0,0,1,0,0)); }
.iso-stage.is-confluence .iso-action-label { transform: translate(-50%,-50%) var(--counter-orbit, matrix(1,0,0,1,0,0)); }
.iso-stage.is-confluence .iso-piece.is-yours .iso-piece-shadow { border: 2px solid #65cee8; }
.iso-stage.is-confluence .iso-piece.is-opponent .iso-piece-shadow { border: 2px dashed #ee9a83; }
.iso-stage.is-confluence .iso-egg.is-destroyed .iso-piece-art { opacity: 1; transform: none; filter: none; }
.field-camera { position: absolute; z-index: 12; left: 24px; top: 182px; display: grid; grid-template-columns: repeat(6,minmax(48px,1fr)); gap: 6px; align-items: center; width: 336px; max-width: calc(100% - 48px); }
.field-camera .button { height: 49px; min-width: 48px; padding: 8px; background: #1e1e1ee8; }
.field-camera .field-wide { grid-column: span 2; }
.field-camera span, .field-camera small { grid-column: 1 / -1; font-size: 12px; line-height: 1.3; color: #ddd; text-shadow: 0 1px 2px #000; }
.field-camera small { font-size: 11px; color: #bdc2b6; }
@media (max-width: 700px) { .field-camera { left: 12px; top: 170px; max-width: calc(100% - 24px); gap: 4px; } }
@media (max-width: 359px) { .field-camera { left: 8px; max-width: calc(100% - 16px); grid-template-columns: repeat(6,48px); gap: 3px; } }

.battle-shell:has(.iso-stage.is-confluence) .battle-notice { top: 350px; }
@media (max-width: 700px) { .battle-shell:has(.iso-stage.is-confluence) .battle-notice { top: 332px; } }
@media (prefers-reduced-motion: reduce) { .iso-stage.is-confluence .iso-tile[data-terrain="water"] .iso-tile-art { animation: none; } }
@media (max-width: 640px) {
  .battle-own-row { min-width: 0; }
  .battle-own-row .battle-roster { max-width: 100%; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .battle-own-row .battle-roster-slot { flex: 0 0 52px; }
  .battle-selection-copy { min-width: 0; }
}
@media (max-width: 640px) {
  .battle-command-deck { grid-template-columns: minmax(0, 1fr) 124px; }
  .battle-selection-copy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .battle-stats { gap: 7px; }
}
@media (max-width: 359px) { .battle-command-deck { grid-template-columns: minmax(0, 1fr) 112px; } }

/* Every raised surface shares its plane with the hit target. Vertical faces
   remain upright and depth-sort together with the existing creature sprites. */
.iso-stage.is-confluence .iso-tiles,
.iso-stage.is-confluence .iso-pieces,
.iso-stage.is-confluence .iso-controls { display: contents; }
.iso-stage.is-confluence .iso-piece-targets { z-index: 31000; }
.iso-stage.is-confluence .iso-effects { z-index: 32000; }
.iso-terrain-detail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.terrain-cliff { stroke: #494b38; stroke-width: 1; stroke-linejoin: round; }
.terrain-cliff.light { fill: #807b60; }
.terrain-cliff.dark { fill: #5d634d; }
.terrain-cliff-rim { fill: none; stroke: #abc17c; stroke-width: 3; }
.terrain-cliff-stratum { fill: none; stroke: #3a453746; stroke-width: 2; }
.bridge-post { fill: none; stroke: #5c3b24; stroke-width: 6; }
.bridge-rail-shadow { fill: none; stroke: #493423; stroke-width: 7; }
.bridge-rail { fill: none; stroke: #edcb87; stroke-width: 4; }
.iso-stage.is-confluence .iso-tile[data-terrain="bridge"] .iso-tile-art { filter: brightness(1.32) saturate(1.22); }
.iso-stage.is-confluence .iso-tile[data-terrain="bridge"] > svg { display: block; fill: transparent; stroke: #f3d59d; stroke-width: 3; }
.iso-cell.legal-move .iso-target { fill: #a770f04a; stroke: #f0ddff; stroke-width: 3; filter: drop-shadow(0 1px 1px #171123); }
.iso-cell.legal-move[data-terrain="water"] .iso-target { fill: #503a8090; stroke: #f3e3ff; stroke-width: 4; }
.iso-cell.legal-move:not(:hover):not(:focus-visible) .iso-action-label { width: 11px; height: 11px; border: 2px solid #352544; background: #f2e1ff; box-shadow: 0 1px 2px #16101f; }
.iso-cell.legal-move:hover .iso-target { fill: #b478f77a; stroke: #fff4ff; }