/*
 * REMENATRY overhaul / phase 04
 * Battle command UI. No enemy-hit visuals or collision logic are defined here.
 */

#game-screen.rem-battle--phase4 {
  --battle-void: #02070a;
  --battle-panel: rgba(5, 18, 24, .92);
  --battle-panel-solid: #071820;
  --battle-plate: #0b2630;
  --battle-line: rgba(91, 213, 224, .62);
  --battle-line-dim: rgba(91, 213, 224, .22);
  --battle-cyan: #64dce4;
  --battle-cyan-pale: #c9fffa;
  --battle-paper: #f0fbf9;
  --battle-copy: #b4ccce;
  --battle-muted: #6f9195;
  --battle-gold: #dfba70;
  --battle-red: #dd6565;
  --battle-green: #62d89f;
  --battle-display: "MS Gothic", "Yu Gothic UI", "Noto Sans Mono CJK JP", monospace;
  --battle-body: "Yu Gothic UI", "Meiryo", sans-serif;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  color: var(--battle-paper);
  background: var(--battle-void) !important;
  font-family: var(--battle-body);
  touch-action: none;
  isolation: isolate;
}

#game-screen.rem-battle--phase4 .game-canvas-wrap,
#game-screen.rem-battle--phase4 #game-canvas {
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
}

#game-screen.rem-battle--phase4 .game-canvas-wrap { z-index: 1; }
#game-screen.rem-battle--phase4 #game-canvas { object-fit: fill; background: #03090f; }

/* ---------- Lightweight chassis ---------- */
#game-screen.rem-battle--phase4 .rem-battle-frame {
  position: absolute !important;
  inset: 5px !important;
  z-index: 14 !important;
  display: block !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

#game-screen.rem-battle--phase4 .rem-battle-frame .corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid rgba(100, 220, 228, .5) !important;
}

#game-screen.rem-battle--phase4 .rem-battle-frame .corner::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--battle-gold);
  opacity: .72;
}

#game-screen.rem-battle--phase4 .rem-battle-frame .corner.tl { left: 0; top: 0; border-left-width: 2px !important; border-top-width: 2px !important; }
#game-screen.rem-battle--phase4 .rem-battle-frame .corner.tr { right: 0; top: 0; border-right-width: 2px !important; border-top-width: 2px !important; }
#game-screen.rem-battle--phase4 .rem-battle-frame .corner.bl { left: 0; bottom: 0; border-left-width: 2px !important; border-bottom-width: 2px !important; }
#game-screen.rem-battle--phase4 .rem-battle-frame .corner.br { right: 0; bottom: 0; border-right-width: 2px !important; border-bottom-width: 2px !important; }
#game-screen.rem-battle--phase4 .rem-battle-frame .corner.tl::after { left: 5px; top: 5px; }
#game-screen.rem-battle--phase4 .rem-battle-frame .corner.tr::after { right: 5px; top: 5px; }
#game-screen.rem-battle--phase4 .rem-battle-frame .corner.bl::after { left: 5px; bottom: 5px; }
#game-screen.rem-battle--phase4 .rem-battle-frame .corner.br::after { right: 5px; bottom: 5px; }

#game-screen.rem-battle--phase4 .rem-battle-rail {
  position: absolute;
  top: 24%;
  bottom: 27%;
  width: 3px;
  opacity: .42;
  background: repeating-linear-gradient(180deg, var(--battle-cyan) 0 2px, transparent 2px 13px);
}

#game-screen.rem-battle--phase4 .rem-battle-rail--left { left: 0; }
#game-screen.rem-battle--phase4 .rem-battle-rail--right { right: 0; }

#game-screen.rem-battle--phase4 .rem-battle-reticle {
  position: absolute;
  left: 50%;
  top: 49%;
  width: 34px;
  height: 34px;
  opacity: .09;
  transform: translate(-50%, -50%);
  border: 1px solid var(--battle-cyan);
}

#game-screen.rem-battle--phase4 .rem-battle-reticle i {
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--battle-cyan);
  transform: translate(-50%, -50%);
}

#game-screen.rem-battle--phase4 .rem-battle-reticle i:first-child { width: 46px; height: 1px; }
#game-screen.rem-battle--phase4 .rem-battle-reticle i:last-child { width: 1px; height: 46px; }

#game-screen.rem-battle--phase4 .rem-battle-sector-code {
  position: absolute;
  left: 22px;
  bottom: 5px;
  color: rgba(178, 231, 231, .34);
  font: 700 7px/1 var(--battle-display);
  letter-spacing: .12em;
}

#game-screen.rem-battle--phase4 .rem-battle-vignette {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  opacity: 1 !important;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 5, 8, .22), transparent 8%, transparent 92%, rgba(0, 5, 8, .22)),
    linear-gradient(180deg, rgba(0, 5, 8, .28), transparent 13%, transparent 79%, rgba(0, 5, 8, .3)) !important;
}

/* ---------- Top command readout ---------- */
#game-screen.rem-battle--phase4 .hud {
  box-sizing: border-box !important;
  border-radius: 0 !important;
  color: var(--battle-paper) !important;
  background: var(--battle-panel) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  font-family: var(--battle-display) !important;
}

#game-screen.rem-battle--phase4 .hud-top {
  position: absolute !important;
  left: 7px !important;
  right: 7px !important;
  top: calc(7px + env(safe-area-inset-top)) !important;
  z-index: 30 !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  display: grid !important;
  grid-template-columns: 1.2fr 1fr .78fr .78fr !important;
  grid-template-rows: 30px 26px !important;
  grid-template-areas:
    "score runhi credit stage"
    "score runhi mode mode" !important;
  gap: 4px 6px !important;
  overflow: hidden !important;
  border: 1px solid rgba(100,220,228,.48) !important;
  border-top: 2px solid var(--battle-cyan) !important;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

#game-screen.rem-battle--phase4 .hud-top::before,
#game-screen.rem-battle--phase4 .hud-top::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

#game-screen.rem-battle--phase4 .hud-top::before {
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--battle-cyan);
}

#game-screen.rem-battle--phase4 .hud-top::after {
  right: 22px;
  top: 6px;
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--battle-gold) 0 10px, transparent 10px 15px, var(--battle-cyan) 15px 100%);
}

#game-screen.rem-battle--phase4 .hud-block {
  position: relative;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 3px 6px !important;
  display: grid !important;
  align-content: center !important;
  gap: 2px !important;
  overflow: hidden !important;
  border-left: 1px solid rgba(100,220,228,.15);
  background: rgba(100,220,228,.025);
}

#game-screen.rem-battle--phase4 .hud-block--score { grid-area: score; border-left: 0; }
#game-screen.rem-battle--phase4 .hud-block--run-hi { grid-area: runhi; }
#game-screen.rem-battle--phase4 .hud-block--credit { grid-area: credit; grid-template-columns: 1fr auto !important; align-items: center; }
#game-screen.rem-battle--phase4 .hud-block--stage { grid-area: stage; grid-template-columns: 1fr auto !important; align-items: center; }
#game-screen.rem-battle--phase4 .hud-block--mode { grid-area: mode; grid-template-columns: auto 1fr !important; align-items: center; gap: 8px !important; }

#game-screen.rem-battle--phase4 .hud-block .label {
  min-width: 0;
  color: var(--battle-muted) !important;
  font: 700 7px/1.1 var(--battle-display) !important;
  letter-spacing: .11em !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

#game-screen.rem-battle--phase4 :is(#score-value, #run-hi-value, #credit-value, #stage-value, #mode-value) {
  min-width: 0;
  display: block;
  color: var(--battle-paper) !important;
  font-family: var(--battle-display) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: .025em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  transform-origin: left center;
}

#game-screen.rem-battle--phase4 #score-value { color: var(--battle-cyan-pale) !important; font-size: clamp(17px, 5vw, 22px) !important; }
#game-screen.rem-battle--phase4 #run-hi-value { font-size: clamp(13px, 3.8vw, 17px) !important; }
#game-screen.rem-battle--phase4 :is(#credit-value, #stage-value) { font-size: 11px !important; text-align: right; }
#game-screen.rem-battle--phase4 #mode-value { color: #9edee3 !important; font-size: 9px !important; text-align: right; }

#game-screen.rem-battle--phase4 #score-value.score-pulse {
  animation: rb-score-tick .2s steps(2, end) 1 !important;
}

#game-screen.rem-battle--phase4 #score-value.score-pulse-big {
  color: #ffe3a0 !important;
  animation: rb-score-major .34s steps(3, end) 1 !important;
}

@keyframes rb-score-tick {
  0% { transform: translateX(0) scale(1); }
  50% { transform: translateX(2px) scale(1.08); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes rb-score-major {
  0% { transform: scale(1); }
  45% { transform: scale(1.18); text-shadow: 2px 0 #ce557f, -2px 0 #54dce2; }
  100% { transform: scale(1); text-shadow: none; }
}

#game-screen.rem-battle--phase4 .hud-top.hud-special-ready {
  border-top-color: var(--battle-gold) !important;
  box-shadow: inset 0 2px rgba(223,186,112,.15) !important;
}

#game-screen.rem-battle--phase4 :is(.hud-top, .hud-bottom).hud-lowhp {
  border-color: rgba(221,101,101,.78) !important;
  box-shadow: inset 3px 0 rgba(221,101,101,.56) !important;
  animation: none !important;
}

/* ---------- Boss command strip ---------- */
#game-screen.rem-battle--phase4 .boss-hud {
  position: absolute !important;
  left: 9px !important;
  right: 9px !important;
  top: calc(90px + env(safe-area-inset-top)) !important;
  z-index: 29 !important;
  box-sizing: border-box !important;
  min-height: 39px !important;
  height: 39px !important;
  max-height: 39px !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  display: grid !important;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden;
  border: 1px solid rgba(221,101,101,.55) !important;
  border-left: 3px solid var(--battle-red) !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, rgba(154,42,54,.22), transparent 44%), rgba(15,8,13,.94) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: none;
}

#game-screen.rem-battle--phase4 .boss-hud.hidden { display: none !important; }

#game-screen.rem-battle--phase4 .boss-name {
  min-width: 0 !important;
  color: #ffd6d1 !important;
  font: 900 9px/1.25 var(--battle-display) !important;
  letter-spacing: .035em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#game-screen.rem-battle--phase4 .boss-name::before {
  content: "HOSTILE / ";
  color: rgba(221,101,101,.72);
  font-size: 7px;
}

#game-screen.rem-battle--phase4 .boss-gauge {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 10px !important;
  overflow: hidden;
  border: 1px solid rgba(255,183,178,.42) !important;
  border-radius: 0 !important;
  background: #16090e !important;
}

#game-screen.rem-battle--phase4 .boss-gauge::after,
#game-screen.rem-battle--phase4 .hp-gauge::after,
#game-screen.rem-battle--phase4 .dust-gauge::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(2,7,10,.55) calc(10% - 1px) 10%);
}

#game-screen.rem-battle--phase4 .boss-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #9e253e, #ee6f73) !important;
  transition: width .16s linear;
}

#game-screen.rem-battle--phase4 .boss-hud-enter {
  animation: rb-boss-deploy .48s cubic-bezier(.2,.75,.2,1) 1 !important;
}

@keyframes rb-boss-deploy {
  0% { opacity: 0; transform: scaleX(.18); }
  55% { opacity: 1; transform: scaleX(1.02); }
  100% { opacity: 1; transform: scaleX(1); }
}

#game-screen.rem-battle--phase4 .boss-hud-critical {
  border-color: rgba(255,123,117,.85) !important;
  box-shadow: inset 4px 0 rgba(255,123,117,.55) !important;
  animation: none !important;
}

#game-screen.rem-battle--phase4 .boss-hud-critical .boss-fill { animation: none !important; background: #f04d55 !important; }

/* ---------- Announcements ---------- */
#game-screen.rem-battle--phase4 .status-text {
  position: absolute !important;
  left: 50% !important;
  top: 43% !important;
  z-index: 42 !important;
  box-sizing: border-box;
  width: min(84%, 430px) !important;
  max-width: 430px !important;
  min-height: 48px;
  padding: 12px 18px !important;
  opacity: 0;
  overflow-wrap: anywhere;
  border: 1px solid rgba(100,220,228,.45) !important;
  border-left: 4px solid var(--battle-cyan) !important;
  border-radius: 0 !important;
  color: var(--battle-paper) !important;
  text-align: center;
  font: 900 clamp(10px,3vw,13px)/1.55 var(--battle-display) !important;
  letter-spacing: .045em;
  background: rgba(3,13,18,.94) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.34) !important;
  pointer-events: none;
}

#game-screen.rem-battle--phase4 .status-text.show { opacity: 1 !important; }
#game-screen.rem-battle--phase4 .status-text.ready-text { border-color: rgba(100,220,228,.62) !important; color: var(--battle-cyan-pale) !important; }
#game-screen.rem-battle--phase4 .status-text.boss-warning { border-color: rgba(221,101,101,.75) !important; border-left-color: var(--battle-red) !important; color: #ffd5d0 !important; background: rgba(27,7,12,.95) !important; }

#game-screen.rem-battle--phase4 .rem-battle-warning {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 31% !important;
  z-index: 43 !important;
  box-sizing: border-box;
  width: 100% !important;
  min-height: 56px;
  padding: 16px 14px !important;
  opacity: 0;
  transform: none !important;
  overflow: hidden;
  border: 0 !important;
  border-top: 1px solid rgba(255,123,117,.65) !important;
  border-bottom: 1px solid rgba(255,123,117,.65) !important;
  border-radius: 0 !important;
  color: #ffe3dc !important;
  text-align: center;
  font: 900 clamp(12px,3.8vw,17px)/1.3 var(--battle-display) !important;
  letter-spacing: .16em;
  background: linear-gradient(90deg, transparent, rgba(78,10,23,.9) 18%, rgba(78,10,23,.9) 82%, transparent) !important;
  pointer-events: none;
}

#game-screen.rem-battle--phase4 .rem-battle-warning::before,
#game-screen.rem-battle--phase4 .rem-battle-warning::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 28%;
  opacity: .5;
  background: repeating-linear-gradient(135deg, rgba(255,160,144,.35) 0 3px, transparent 3px 9px);
}

#game-screen.rem-battle--phase4 .rem-battle-warning::before { left: 0; }
#game-screen.rem-battle--phase4 .rem-battle-warning::after { right: 0; transform: scaleX(-1); }
#game-screen.rem-battle--phase4 .rem-battle-warning.show { opacity: 1 !important; transition: opacity .1s linear !important; }

/* ---------- Bottom flight console ---------- */
#game-screen.rem-battle--phase4 .hud-bottom {
  position: absolute !important;
  left: 7px !important;
  right: 7px !important;
  bottom: calc(6px + env(safe-area-inset-bottom)) !important;
  z-index: 32 !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-height: 125px !important;
  height: 125px !important;
  max-height: 125px !important;
  margin: 0 !important;
  padding: 7px 8px !important;
  display: grid !important;
  grid-template-rows: 18px 18px 1fr !important;
  gap: 5px !important;
  overflow: hidden !important;
  border: 1px solid rgba(100,220,228,.48) !important;
  border-bottom: 2px solid var(--battle-cyan) !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

#game-screen.rem-battle--phase4 .hud-bottom::before {
  content: "FLIGHT CONSOLE";
  position: absolute;
  right: 9px;
  top: 4px;
  color: rgba(117,158,161,.55);
  font: 700 6px/1 var(--battle-display);
  letter-spacing: .12em;
}

#game-screen.rem-battle--phase4 :is(.dust-panel, .hp-panel) {
  min-width: 0;
  display: grid !important;
  grid-template-columns: 105px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 7px !important;
}

#game-screen.rem-battle--phase4 :is(.dust-head, .hp-head) {
  min-width: 0;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  gap: 2px !important;
  color: var(--battle-copy) !important;
  font: 700 8px/1 var(--battle-display) !important;
}

#game-screen.rem-battle--phase4 :is(.dust-head, .hp-head) .label {
  color: var(--battle-muted) !important;
  font-size: 7px !important;
  letter-spacing: .06em;
  white-space: nowrap;
}

#game-screen.rem-battle--phase4 :is(#dust-text, #hp-text) {
  color: var(--battle-paper);
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

#game-screen.rem-battle--phase4 :is(.dust-gauge, .hp-gauge) {
  position: relative;
  box-sizing: border-box;
  width: 100% !important;
  height: 9px !important;
  overflow: hidden !important;
  border: 1px solid rgba(100,220,228,.46) !important;
  border-radius: 0 !important;
  background: #031015 !important;
}

#game-screen.rem-battle--phase4 :is(.dust-fill, .hp-fill) {
  height: 100% !important;
  transition: width .12s linear;
}

#game-screen.rem-battle--phase4 .dust-fill { background: linear-gradient(90deg, #428cb2, #65d8e0) !important; }
#game-screen.rem-battle--phase4 .hp-fill { background: linear-gradient(90deg, #38a87b, #68e4a5) !important; }

#game-screen.rem-battle--phase4 .bottom-row {
  min-width: 0;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 25px 43px !important;
  gap: 4px !important;
}

#game-screen.rem-battle--phase4 .weapon-panel {
  box-sizing: border-box;
  min-width: 0 !important;
  width: 100% !important;
  height: 25px !important;
  min-height: 25px !important;
  max-height: 25px !important;
  padding: 4px 7px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden;
  border: 1px solid var(--battle-line-dim) !important;
  border-radius: 0 !important;
  background: rgba(100,220,228,.035) !important;
}

#game-screen.rem-battle--phase4 .weapon-panel .label {
  color: var(--battle-muted) !important;
  font: 700 7px/1 var(--battle-display) !important;
  letter-spacing: .1em;
}

#game-screen.rem-battle--phase4 #weapon-value {
  display: block !important;
  min-width: 0;
  color: var(--battle-paper) !important;
  text-align: right;
  font: 800 9px/1.2 var(--battle-display) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#game-screen.rem-battle--phase4 .item-panel {
  min-width: 0;
  width: 100%;
  height: 43px;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  align-items: start !important;
  gap: 4px !important;
}

#game-screen.rem-battle--phase4 .item-btn {
  position: relative !important;
  align-self: start !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 43px !important;
  min-height: 43px !important;
  max-height: 43px !important;
  margin: 0 !important;
  padding: 5px 3px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(100,220,228,.35) !important;
  border-radius: 0 !important;
  color: var(--battle-paper) !important;
  background: linear-gradient(180deg, #10303a, #071a22) !important;
  box-shadow: inset 0 2px rgba(100,220,228,.09) !important;
  font: 800 clamp(6px,1.85vw,8px)/1.25 var(--battle-display) !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center;
  pointer-events: auto !important;
  touch-action: manipulation;
}

#game-screen.rem-battle--phase4 .item-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--battle-cyan);
  opacity: .55;
}

#game-screen.rem-battle--phase4 .item-btn.item-emp { border-color: rgba(103,222,230,.62) !important; color: #c9fffa !important; }
#game-screen.rem-battle--phase4 .item-btn.item-repair::before { background: var(--battle-green); }
#game-screen.rem-battle--phase4 .item-btn.item-shield::before { background: #77aeea; }
#game-screen.rem-battle--phase4 .item-btn.item-converter::before { background: var(--battle-gold); }
#game-screen.rem-battle--phase4 .item-btn.item-limiter::before { background: #cc7197; }

#game-screen.rem-battle--phase4 .item-btn:active:not(:disabled) {
  transform: translateY(1px) !important;
  background: #16414a !important;
}

#game-screen.rem-battle--phase4 .item-btn:disabled {
  opacity: .64 !important;
  filter: saturate(.58) !important;
  color: #9dafb0 !important;
}

/* ---------- Special, pause and return controls ---------- */
#game-screen.rem-battle--phase4 .special-skill-btn {
  --special-progress: 0%;
  position: absolute !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  bottom: calc(142px + env(safe-area-inset-bottom)) !important;
  z-index: 36 !important;
  box-sizing: border-box !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  margin: 0 !important;
  padding: 13px 8px 8px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #dfd8ba !important;
  background:
    radial-gradient(circle at 50% 50%, #192025 0 53%, transparent 54%),
    conic-gradient(var(--battle-gold) 0 var(--special-progress), rgba(127,145,146,.24) var(--special-progress) 100%) !important;
  box-shadow: 0 0 0 3px rgba(2,8,11,.86), 0 0 0 4px rgba(223,186,112,.34) !important;
  font: 900 8px/1.25 var(--battle-display) !important;
  letter-spacing: .015em !important;
  text-align: center !important;
  white-space: normal !important;
  pointer-events: auto !important;
  touch-action: manipulation;
}

#game-screen.rem-battle--phase4 .special-skill-btn::before {
  content: "ULT";
  position: absolute;
  left: 50%;
  top: 8px;
  color: rgba(223,186,112,.72);
  font: 900 7px/1 var(--battle-display);
  letter-spacing: .14em;
  transform: translateX(-50%);
}

#game-screen.rem-battle--phase4 .special-skill-btn:disabled {
  opacity: .82 !important;
  filter: none !important;
}

#game-screen.rem-battle--phase4 .special-skill-btn.ready {
  color: #fff1bd !important;
  background:
    radial-gradient(circle at 50% 45%, #604717 0 48%, #271d0c 49% 53%, transparent 54%),
    conic-gradient(#fff0a4, #d7a94c, #fff0a4) !important;
  box-shadow: 0 0 0 3px rgba(2,8,11,.88), 0 0 0 5px rgba(223,186,112,.64), 0 0 18px rgba(223,186,112,.35) !important;
  animation: rb-special-ready 1.15s steps(2,end) infinite !important;
}

#game-screen.rem-battle--phase4 .special-skill-btn.active { color: #fff !important; }

@keyframes rb-special-ready {
  0%, 100% { outline: 0 solid rgba(255,235,165,.08); }
  50% { outline: 5px solid rgba(255,235,165,.16); }
}

#game-screen.rem-battle--phase4 > :is(#back-to-menu-btn, #pause-btn).floating-btn {
  position: absolute !important;
  right: max(7px, env(safe-area-inset-right)) !important;
  z-index: 35 !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  margin: 0 !important;
  padding: 5px !important;
  overflow: hidden !important;
  border: 1px solid rgba(100,220,228,.38) !important;
  border-radius: 0 !important;
  color: var(--battle-copy) !important;
  background: rgba(5,20,27,.92) !important;
  box-shadow: inset 2px 0 rgba(100,220,228,.42) !important;
  font: 800 8px/1.1 var(--battle-display) !important;
  letter-spacing: .025em !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  transform: none !important;
}

#game-screen.rem-battle--phase4 > #back-to-menu-btn.floating-btn { top: calc(138px + env(safe-area-inset-top)) !important; }
#game-screen.rem-battle--phase4 > #pause-btn.floating-btn { top: calc(179px + env(safe-area-inset-top)) !important; }

#game-screen.rem-battle--phase4 > #back-to-menu-btn.floating-btn::after {
  content: "HOLD .65" !important;
  display: block !important;
  margin: 1px 0 0 !important;
  color: var(--battle-muted) !important;
  font-size: 6px !important;
  line-height: 1 !important;
}

#game-screen.rem-battle--phase4 > #back-to-menu-btn.floating-btn.armed {
  border-color: var(--battle-gold) !important;
  color: #fff1c6 !important;
  background: #3b2c16 !important;
  animation: rb-hold-confirm .65s linear 1 !important;
}

@keyframes rb-hold-confirm {
  from { box-shadow: inset 0 0 rgba(223,186,112,.2) !important; }
  to { box-shadow: inset 72px 0 rgba(223,186,112,.28) !important; }
}

#game-screen.rem-battle--phase4 > #pause-btn.floating-btn.paused {
  border-color: var(--battle-gold) !important;
  color: #fff0c0 !important;
  background: #332817 !important;
}

/* ---------- Pause presentation ---------- */
#game-screen.rem-battle--phase4 .rem-battle-pause-display {
  position: absolute;
  inset: 0;
  z-index: 70;
  padding: 24px;
  display: none;
  place-content: center;
  justify-items: center;
  color: var(--battle-paper);
  text-align: center;
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(3,12,16,.88) 9% 91%, transparent 91%),
    rgba(1,5,7,.48);
  pointer-events: none;
}

#game-screen.rem-battle--phase4.rem-battle-paused .rem-battle-pause-display { display: grid; }
#game-screen.rem-battle--phase4.rem-battle-paused::before { display: none !important; }

#game-screen.rem-battle--phase4 .rem-battle-pause-display::before,
#game-screen.rem-battle--phase4 .rem-battle-pause-display::after {
  content: "";
  width: min(72vw, 360px);
  height: 1px;
  margin: 12px 0;
  background: linear-gradient(90deg, transparent, var(--battle-cyan), transparent);
}

#game-screen.rem-battle--phase4 .rem-battle-pause-display span {
  color: var(--battle-cyan);
  font: 700 8px/1 var(--battle-display);
  letter-spacing: .18em;
}

#game-screen.rem-battle--phase4 .rem-battle-pause-display strong {
  margin-top: 8px;
  color: var(--battle-paper);
  font: 900 clamp(25px,8vw,42px)/1 var(--battle-display);
  letter-spacing: .14em;
}

#game-screen.rem-battle--phase4 .rem-battle-pause-display p {
  margin: 10px 0 0;
  color: var(--battle-copy);
  font-size: 11px;
}

/* ---------- Player feedback only ---------- */
#game-screen.rem-battle--phase4.rem-battle-hitflash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 58;
  opacity: 1 !important;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(221,73,73,.25), transparent 12%, transparent 88%, rgba(221,73,73,.25)),
    linear-gradient(180deg, rgba(221,73,73,.2), transparent 15%, transparent 85%, rgba(221,73,73,.2)) !important;
}

#game-screen.rem-battle--phase4.special-active .rem-battle-frame .corner { border-color: rgba(255,219,117,.75) !important; }
#game-screen.rem-battle--phase4.special-active .rem-battle-vignette {
  background:
    radial-gradient(ellipse at 50% 55%, rgba(255,220,102,.11), transparent 55%),
    linear-gradient(90deg, rgba(119,78,13,.12), transparent 12%, transparent 88%, rgba(119,78,13,.12)) !important;
}

#game-screen.rem-battle--phase4.dust-active .rem-battle-vignette {
  opacity: 1 !important;
  background:
    linear-gradient(115deg, rgba(255,76,145,.18), rgba(255,204,77,.12) 24%, rgba(85,232,188,.15) 48%, rgba(85,153,255,.15) 72%, rgba(202,102,255,.18)),
    radial-gradient(ellipse at 50% 52%, transparent 38%, rgba(255,255,255,.1)) !important;
  animation: rb-dust-spectrum .8s steps(4,end) infinite !important;
}

#game-screen.rem-battle--phase4 .hud-bottom.hud-dust-active {
  border-color: rgba(255,223,140,.76) !important;
  box-shadow: inset 3px 0 rgba(255,112,174,.46), inset -3px 0 rgba(101,213,255,.45) !important;
}

#game-screen.rem-battle--phase4 .hud-bottom.hud-dust-active .dust-fill {
  background: linear-gradient(90deg, #ff669e, #ffd15e, #62e4ae, #5fa2ff, #c879f0) !important;
}

#game-screen.rem-battle--phase4 .hud-bottom.hud-dust-charged .dust-gauge {
  border-color: var(--battle-gold) !important;
  box-shadow: 0 0 8px rgba(223,186,112,.28) !important;
}

@keyframes rb-dust-spectrum {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(24deg); }
}

/* ---------- Abyss battle controls ---------- */
#game-screen.rem-battle--phase4 #abyss-hud {
  position: absolute !important;
  left: 8px !important;
  right: auto !important;
  top: calc(138px + env(safe-area-inset-top)) !important;
  z-index: 34 !important;
  box-sizing: border-box;
  width: 112px !important;
  min-height: 47px;
  padding: 8px 9px !important;
  display: grid !important;
  justify-items: start !important;
  gap: 4px !important;
  border: 1px solid rgba(187,78,112,.58) !important;
  border-left: 3px solid #b74b70 !important;
  border-radius: 0 !important;
  color: #f3ced8 !important;
  background: rgba(24,7,16,.92) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#game-screen.rem-battle--phase4 #abyss-hud.hidden { display: none !important; }
#game-screen.rem-battle--phase4 #abyss-hud strong { color: #ffd9a2 !important; font: 900 10px/1 var(--battle-display) !important; }
#game-screen.rem-battle--phase4 #abyss-hud span { color: #dbaeba !important; font: 700 9px/1 var(--battle-display) !important; }

#game-screen.rem-battle--phase4 .abyss-upgrade-toggle-btn {
  position: absolute !important;
  left: 8px !important;
  right: auto !important;
  top: calc(192px + env(safe-area-inset-top)) !important;
  z-index: 35 !important;
  width: 76px !important;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(187,78,112,.56) !important;
  border-radius: 0 !important;
  color: #f2cad5 !important;
  background: #250c19 !important;
  font: 800 9px/1 var(--battle-display) !important;
}

#game-screen.rem-battle--phase4 .abyss-upgrade-tracker {
  position: absolute !important;
  left: 8px !important;
  right: auto !important;
  top: calc(192px + env(safe-area-inset-top)) !important;
  z-index: 35 !important;
  width: min(210px, 58vw) !important;
  max-height: 37vh !important;
  padding: 9px !important;
  overflow: auto !important;
  border: 1px solid rgba(187,78,112,.5) !important;
  border-radius: 0 !important;
  background: rgba(23,7,16,.95) !important;
  box-shadow: none !important;
}

#game-screen.rem-battle--phase4 .abyss-upgrade-tracker-title { color: #f1becd !important; font: 900 8px/1.2 var(--battle-display) !important; }
#game-screen.rem-battle--phase4 .abyss-upgrade-tracker-item { border-radius: 0 !important; background: rgba(255,255,255,.035) !important; }

#game-screen.rem-battle--phase4 .abyss-upgrade-overlay {
  position: absolute;
  inset: 0;
  z-index: 120 !important;
  padding: max(12px,env(safe-area-inset-top)) 11px max(12px,env(safe-area-inset-bottom)) !important;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(2,4,8,.92) !important;
}

#game-screen.rem-battle--phase4 .abyss-upgrade-overlay.hidden { display: none !important; }

#game-screen.rem-battle--phase4 .abyss-upgrade-card {
  box-sizing: border-box;
  width: min(100%, 610px) !important;
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  padding: 14px !important;
  overflow: auto !important;
  border: 1px solid rgba(198,94,116,.55) !important;
  border-top: 3px solid #b74b70 !important;
  border-radius: 0 !important;
  background: linear-gradient(145deg, #240d1b, #08070d 62%) !important;
  box-shadow: none !important;
}

#game-screen.rem-battle--phase4 .abyss-upgrade-floor { color: #d88ca5 !important; font: 800 8px/1.2 var(--battle-display) !important; letter-spacing: .12em; }
#game-screen.rem-battle--phase4 .abyss-upgrade-card h3 { color: #fff0e5 !important; font: 900 18px/1.35 var(--battle-display) !important; }
#game-screen.rem-battle--phase4 .abyss-upgrade-sub { color: #bdaab2 !important; font-size: 11px !important; }

#game-screen.rem-battle--phase4 .abyss-upgrade-options {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 7px !important;
}

#game-screen.rem-battle--phase4 .abyss-upgrade-option {
  box-sizing: border-box;
  min-width: 0 !important;
  min-height: 178px !important;
  height: auto !important;
  padding: 11px !important;
  border: 1px solid rgba(198,94,116,.4) !important;
  border-left: 2px solid #b74b70 !important;
  border-radius: 0 !important;
  color: #e8dadd !important;
  background: rgba(39,12,27,.88) !important;
  text-align: left !important;
}

#game-screen.rem-battle--phase4 .abyss-upgrade-option h4 { color: #fff1df !important; font: 900 11px/1.4 var(--battle-display) !important; overflow-wrap: anywhere; }
#game-screen.rem-battle--phase4 .abyss-upgrade-option .rarity { color: var(--battle-gold) !important; }
#game-screen.rem-battle--phase4 .abyss-upgrade-option :is(.desc,.detail) { color: #c7b6bc !important; font-size: 10px !important; line-height: 1.45 !important; }

#game-screen.rem-battle--phase4 .abyss-upgrade-reroll-btn {
  min-height: 38px !important;
  border: 1px solid rgba(223,186,112,.54) !important;
  border-radius: 0 !important;
  color: #ffedc1 !important;
  background: #392818 !important;
}

/* ---------- Tutorial modal ---------- */
#game-screen.rem-battle--phase4 .tutorial-guide-overlay {
  position: absolute;
  inset: 0;
  z-index: 130 !important;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2,7,10,.82) !important;
}

#game-screen.rem-battle--phase4 .tutorial-guide-overlay.hidden { display: none !important; }

#game-screen.rem-battle--phase4 .tutorial-guide-card {
  box-sizing: border-box;
  width: min(100%, 430px);
  padding: 18px !important;
  border: 1px solid rgba(100,220,228,.5) !important;
  border-left: 4px solid var(--battle-cyan) !important;
  border-radius: 0 !important;
  background: #071820 !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.42) !important;
}

#game-screen.rem-battle--phase4 .tutorial-guide-card h3 { color: var(--battle-cyan-pale) !important; font: 900 17px/1.4 var(--battle-display) !important; }
#game-screen.rem-battle--phase4 .tutorial-guide-body { color: var(--battle-copy) !important; font-size: 12px !important; line-height: 1.7 !important; }
#game-screen.rem-battle--phase4 #tutorial-guide-close-btn { width: 100% !important; min-height: 46px !important; border-radius: 0 !important; }

/* ---------- Mode identity without covering bullets ---------- */
#game-screen.rem-battle--phase4[data-mode="galactic_abyss"] .rem-battle-frame .corner { border-color: rgba(193,74,111,.66) !important; }
#game-screen.rem-battle--phase4[data-mode="galactic_abyss"] .hud { border-color: rgba(181,75,109,.52) !important; }
#game-screen.rem-battle--phase4[data-mode="genkyo"] .rem-battle-frame .corner { border-color: rgba(199,145,107,.6) !important; }
#game-screen.rem-battle--phase4[data-mode="cosmofloor"] .rem-battle-frame .corner { border-color: rgba(142,111,201,.64) !important; }

/* ---------- Phone guards ---------- */
@media (max-width: 390px) {
  #game-screen.rem-battle--phase4 .hud-top {
    left: 5px !important;
    right: 5px !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    padding: 6px 7px !important;
    grid-template-rows: 28px 24px !important;
    gap: 4px !important;
  }

  #game-screen.rem-battle--phase4 .boss-hud { top: calc(84px + env(safe-area-inset-top)) !important; }
  #game-screen.rem-battle--phase4 > #back-to-menu-btn.floating-btn { top: calc(131px + env(safe-area-inset-top)) !important; }
  #game-screen.rem-battle--phase4 > #pause-btn.floating-btn { top: calc(171px + env(safe-area-inset-top)) !important; }
  #game-screen.rem-battle--phase4 #abyss-hud { top: calc(131px + env(safe-area-inset-top)) !important; }
  #game-screen.rem-battle--phase4 .abyss-upgrade-toggle-btn,
  #game-screen.rem-battle--phase4 .abyss-upgrade-tracker { top: calc(185px + env(safe-area-inset-top)) !important; }

  #game-screen.rem-battle--phase4 .hud-bottom {
    left: 5px !important;
    right: 5px !important;
    padding: 6px !important;
  }

  #game-screen.rem-battle--phase4 :is(.dust-panel,.hp-panel) { grid-template-columns: 94px minmax(0,1fr) !important; gap: 5px !important; }
  #game-screen.rem-battle--phase4 :is(.dust-head,.hp-head) .label { font-size: 6px !important; }
  #game-screen.rem-battle--phase4 .special-skill-btn {
    right: max(8px,env(safe-area-inset-right)) !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    font-size: 7px !important;
  }

  #game-screen.rem-battle--phase4 > :is(#back-to-menu-btn,#pause-btn).floating-btn {
    right: max(5px,env(safe-area-inset-right)) !important;
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
  }

  #game-screen.rem-battle--phase4 .abyss-upgrade-options { grid-template-columns: 1fr !important; }
  #game-screen.rem-battle--phase4 .abyss-upgrade-option { min-height: 0 !important; }
}

@media (max-width: 340px) {
  #game-screen.rem-battle--phase4 .hud-top {
    grid-template-columns: 1.15fr .9fr .72fr .72fr !important;
    padding-inline: 5px !important;
    gap: 2px !important;
  }

  #game-screen.rem-battle--phase4 .hud-block { padding-inline: 3px !important; }
  #game-screen.rem-battle--phase4 #score-value { font-size: 15px !important; }
  #game-screen.rem-battle--phase4 #run-hi-value { font-size: 12px !important; }
  #game-screen.rem-battle--phase4 .item-panel { gap: 2px !important; }
  #game-screen.rem-battle--phase4 .item-btn { font-size: 6px !important; padding-inline: 1px !important; }
}

@media (orientation: landscape) and (max-height: 520px) {
  #game-screen.rem-battle--phase4 .hud-top { width: min(58vw,540px) !important; right: auto !important; }
  #game-screen.rem-battle--phase4 .boss-hud { right: 90px !important; }
  #game-screen.rem-battle--phase4 .hud-bottom { right: 92px !important; height: 110px !important; min-height: 110px !important; max-height: 110px !important; grid-template-rows: 16px 16px 1fr !important; }
  #game-screen.rem-battle--phase4 .bottom-row { grid-template-columns: .8fr 2.4fr !important; grid-template-rows: 43px !important; }
  #game-screen.rem-battle--phase4 .weapon-panel { height: 43px !important; min-height: 43px !important; max-height: 43px !important; grid-template-columns: 1fr !important; }
  #game-screen.rem-battle--phase4 .special-skill-btn { bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
}

#game-screen.rem-battle--phase4.lowfx .rem-battle-reticle,
#game-screen.rem-battle--phase4.lowfx .rem-battle-rail { display: none !important; }

#game-screen.rem-battle--phase4.lowfx.dust-active .rem-battle-vignette { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  #game-screen.rem-battle--phase4 *,
  #game-screen.rem-battle--phase4 *::before,
  #game-screen.rem-battle--phase4 *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}