:root {
  --bg: #050609;
  --bg2: #0d1018;
  --panel: rgba(9, 12, 18, 0.96);
  --panel2: rgba(18, 22, 32, 0.95);
  --text: #f2f2ee;
  --muted: #a6a9b3;
  --line: #d7d7d2;
  --danger: #d65353;
  --warning: #d7bc67;
  --good: #7ccf91;
  --cell: #151925;
  --cell2: #1d2330;
  --wall: #313744;
  --shadow: 0 22px 80px rgba(0,0,0,.55);
  --control-h: 154px;
  --dialogue-h: 104px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -20%, rgba(78, 83, 120, 0.18), transparent 34%),
    linear-gradient(180deg, #050609, #080a10 42%, #020305);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif;
  line-height: 1.7;
  overflow: hidden;
}

button { font: inherit; color: inherit; }
.hidden { display: none !important; }

.app {
  width: min(100%, 760px);
  height: 100dvh;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  display: flex;
}

.screen {
  width: 100%;
  height: 100%;
  position: relative;
}

.title-screen,
.ending-screen {
  border: 2px solid rgba(255,255,255,.78);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 26%),
    var(--panel);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  padding: 34px 18px;
}

.title-screen::before,
.game-screen::before,
.ending-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 100% 4px;
  opacity: .35;
  mix-blend-mode: screen;
  z-index: 0;
}

.title-noise {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.07), transparent 4%),
    radial-gradient(circle at 73% 78%, rgba(255,255,255,.05), transparent 5%),
    radial-gradient(circle at 45% 52%, rgba(214,83,83,.08), transparent 12%);
  filter: blur(1px);
  opacity: .72;
}

.game-title {
  position: relative;
  font-size: clamp(3.6rem, 14vw, 7.4rem);
  font-weight: 500;
  letter-spacing: .18em;
  margin: 0 0 8px;
  line-height: 1;
  text-shadow: 0 8px 36px rgba(255,255,255,.16);
}
.game-title::after {
  content: "";
  display: block;
  width: 1px;
  height: 70px;
  margin: -8px auto 0;
  background: linear-gradient(180deg, rgba(255,255,255,.75), transparent);
  opacity: .32;
}

.version,
.system-message { color: var(--muted); margin: 4px 0 18px; }
.title-menu { position: relative; width: min(100%, 280px); display: grid; gap: 12px; }

.btn,
.mini-btn,
.pad-btn,
.action-btn,
.menu-control {
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.055);
  color: var(--text);
  cursor: pointer;
  border-radius: 0;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
  user-select: none;
}
.btn { min-height: 44px; padding: 10px 14px; }
.btn:hover,
.mini-btn:hover,
.pad-btn:hover,
.action-btn:hover,
.menu-control:hover { background: rgba(255,255,255,.13); border-color: #fff; }
.btn:active,
.mini-btn:active,
.pad-btn:active,
.action-btn:active,
.menu-control:active { transform: translateY(1px); }
.btn.primary { background: rgba(255,255,255,.16); }
.btn.subtle { color: var(--muted); border-color: rgba(255,255,255,.25); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.game-screen {
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--control-h);
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.topbar { display: none !important; }

.panel,
.dialogue-panel,
.choice-panel,
.mobile-controls {
  position: relative;
  border: 2px solid rgba(255,255,255,.74);
  background: var(--panel);
  box-shadow: 0 12px 48px rgba(0,0,0,.35);
  z-index: 1;
}

.panel {
  min-height: 0;
  padding: 10px;
  overflow: hidden;
}

.scene-panel,
.map-panel,

.battle-panel {
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(85, 90, 140, .12), transparent 42%),
    rgba(4, 5, 9, .98);
}
.battle-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 96px 10px 120px;
}
.battle-backdrop {
  position: absolute;
  inset: 78px 14px 116px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  opacity: .48;
  filter: blur(.2px);
  pointer-events: none;
}
.battle-backdrop span {
  align-self: stretch;
  border-radius: 48% 48% 42% 42%;
  background:
    radial-gradient(circle at 50% 18%, rgba(214,83,83,.22), transparent 24%),
    linear-gradient(180deg, rgba(88,42,148,.65), rgba(22,18,67,.42));
  transform: scaleY(.92);
}
.battle-backdrop span:nth-child(2n) {
  background:
    radial-gradient(circle at 50% 18%, rgba(214,83,83,.28), transparent 24%),
    linear-gradient(180deg, rgba(145,43,162,.7), rgba(27,18,78,.5));
  transform: scaleY(1.03);
}
.enemy-focus {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 180px;
  text-align: center;
  margin-top: 112px;
}
.enemy-sprite {
  width: clamp(86px, 22vw, 118px);
  height: clamp(86px, 22vw, 118px);
  border: 2px solid rgba(214,83,83,.82);
  display: grid;
  place-items: center;
  font-size: clamp(2rem, 8vw, 3.2rem);
  color: var(--danger);
  background:
    radial-gradient(circle at 50% 45%, rgba(214,83,83,.26), rgba(0,0,0,.02) 70%),
    rgba(0,0,0,.16);
  box-shadow: 0 0 42px rgba(214,83,83,.22), inset 0 0 28px rgba(0,0,0,.45);
}
.enemy-name {
  font-weight: 800;
  letter-spacing: .08em;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.enemy-hp-shell {
  width: min(210px, 54vw);
  height: 8px;
  border: 1px solid rgba(255,255,255,.38);
  background: rgba(255,255,255,.055);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.enemy-hp-shell span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(214,83,83,.95), rgba(215,188,103,.82));
  transition: width .38s ease;
}
.enemy-condition {
  letter-spacing: .12em;
  color: rgba(242,242,238,.66);
}
.battle-top-window {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: min(calc(100% - 30px), 520px);
  min-height: 72px;
  padding: 6px 10px;
  border: 2px solid rgba(255,255,255,.78);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 24%),
    rgba(5, 7, 11, .94);
  box-shadow: 0 12px 36px rgba(0,0,0,.48), inset 0 0 18px rgba(255,255,255,.035);
}
.battle-command-window {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.battle-log-pane {
  min-height: 64px;
  display: flex;
  align-items: center;
  white-space: pre-wrap;
  color: rgba(242,242,238,.94);
  font-size: clamp(.94rem, 3.7vw, 1.06rem);
  line-height: 1.45;
  letter-spacing: .03em;
}
.command-title {
  grid-column: 1 / -1;
  color: var(--warning);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.1;
}
.command {
  min-height: 28px;
  padding: 3px 8px;
  text-align: left;
  border-color: transparent;
  background: transparent;
  font-size: clamp(.84rem, 3.2vw, .94rem);
  line-height: 1.2;
}
.command.selected {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.55);
}
.command.selected::before { content: "▶ "; color: var(--warning); }
.battle-status-row {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.status-card {
  min-width: 0;
  border: 2px solid rgba(255,255,255,.72);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 38%),
    rgba(10, 12, 19, .93);
  box-shadow: 0 10px 28px rgba(0,0,0,.38), inset 0 0 18px rgba(255,255,255,.035);
  padding: 6px 6px 7px;
}
.status-name {
  font-weight: 800;
  color: rgba(242,242,238,.95);
  letter-spacing: .04em;
  margin-bottom: 2px;
  font-size: clamp(.78rem, 3vw, .94rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-line {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px;
  align-items: baseline;
  font-size: clamp(.68rem, 2.6vw, .78rem);
  color: var(--muted);
}
.status-line strong {
  justify-self: end;
  color: var(--text);
  font-size: .98rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.status-gauge {
  height: 9px;
  margin-top: 5px;
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.status-gauge span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(124,207,145,.95), rgba(215,188,103,.9));
  transition: width .38s ease;
}
.support-member .status-line strong {
  font-size: .84rem;
  color: var(--warning);
}
.support-dots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 7px;
}
.support-dots span {
  height: 9px;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.08);
}
.support-dots span.filled {
  background: rgba(215,188,103,.9);
  box-shadow: 0 0 14px rgba(215,188,103,.28);
}
.small-text,
.battle-log { color: var(--muted); font-size: .82rem; }
.battle-log { display: none; }
.dialogue-panel.speaker-battle {
  min-height: 72px;
  width: min(calc(100% - 34px), 500px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.dialogue-panel.speaker-battle .speaker-portrait,
.dialogue-panel.speaker-battle .speaker {
  display: none;
}
.dialogue-panel.speaker-battle .dialogue-body {
  justify-content: center;
}
.dialogue-panel.speaker-battle .dialogue-text {
  font-size: clamp(.94rem, 3.7vw, 1.05rem);
  line-height: 1.45;
}
.mobile-controls {
  position: relative;
  border: 2px solid rgba(255,255,255,.74);
  background: var(--panel);
  box-shadow: 0 12px 48px rgba(0,0,0,.35);
  z-index: 1;
}

.panel {
  min-height: 0;
  padding: 10px;
  overflow: hidden;
}

.scene-panel,
.map-panel,
.battle-panel {
  grid-row: 1;
  width: 100%;
  height: 100%;
}

.scene-panel {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.045), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 45%),
    var(--panel);
}
.scene-vignette {
  width: min(86%, 460px);
  min-height: 60%;
  border: 1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 40%),
    rgba(0,0,0,.18);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
}
.scene-title { font-size: 1.25rem; letter-spacing: .1em; }
.scene-hint { color: var(--muted); font-size: .92rem; }

.map-panel {
  display: grid;
  place-items: center;
}
.map-grid {
  display: grid;
  gap: 4px;
  justify-content: center;
  align-content: center;
  touch-action: manipulation;
}
.cell {
  width: clamp(32px, 9.2vw, 52px);
  height: clamp(32px, 9.2vw, 52px);
  background: var(--cell);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.88);
  font-weight: 700;
  position: relative;
  user-select: none;
}
.cell.floor:nth-child(odd) { background: var(--cell2); }
.cell.wall { background: var(--wall); color: rgba(255,255,255,.18); }
.cell.exit { outline: 1px solid rgba(124,207,145,.55); }
.cell.event { outline: 1px solid rgba(214,188,103,.7); }
.cell.player {
  background: rgba(255,255,255,.9);
  color: #080a10;
  box-shadow: 0 0 26px rgba(255,255,255,.18);
}
.cell.npc { color: var(--warning); }
.cell.demon { color: var(--danger); }
.map-help { display: none; }

.dialogue-panel {
  position: absolute;
  left: 10px;
  right: 10px;
  width: min(calc(100% - 20px), 560px);
  min-height: 82px;
  max-height: 118px;
  padding: 8px 10px;
  display: flex;
  gap: 9px;
  align-items: stretch;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 22%),
    rgba(5, 7, 11, .91);
  backdrop-filter: blur(4px);
  z-index: 8;
}
.dialogue-panel.dialogue-top {
  top: 12px;
  bottom: auto;
  margin-right: auto;
}
.dialogue-panel.dialogue-bottom {
  top: auto;
  bottom: calc(var(--control-h) + 12px);
  margin-right: auto;
}
.dialogue-panel.speaker-system,
.dialogue-panel.speaker-battle {
  opacity: .96;
}
.dialogue-panel::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(5, 7, 11, .91);
  border-right: 2px solid rgba(255,255,255,.74);
  border-bottom: 2px solid rgba(255,255,255,.74);
  transform: rotate(45deg);
}
.dialogue-panel.dialogue-top::after {
  top: auto;
  bottom: -7px;
  left: 34px;
}
.dialogue-panel.dialogue-bottom::after {
  top: -7px;
  bottom: auto;
  left: 34px;
  transform: rotate(225deg);
}
.dialogue-panel.speaker-system::after,
.dialogue-panel.speaker-battle::after { display: none; }
.speaker-portrait {
  flex: 0 0 46px;
  height: 46px;
  align-self: center;
  border: 2px solid rgba(255,255,255,.65);
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.16), transparent 46%),
    rgba(255,255,255,.06);
  display: grid;
  place-items: center;
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  box-shadow: inset 0 0 22px rgba(0,0,0,.42);
}
.speaker-portrait.portrait-pug { color: var(--warning); }
.speaker-portrait.portrait-friend { color: var(--good); }
.speaker-portrait.portrait-system,
.speaker-portrait.portrait-npc { color: var(--muted); opacity: .78; }
.dialogue-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.speaker { color: var(--warning); font-weight: 700; margin-bottom: 2px; font-size: .82rem; }
.dialogue-panel.speaker-player .speaker { color: var(--text); }
.dialogue-panel.speaker-battle .speaker { color: var(--danger); }
.dialogue-text {
  width: 100%;
  min-height: 0;
  white-space: pre-wrap;
  font-size: clamp(.86rem, 3.3vw, .98rem);
  line-height: 1.42;
  overflow: auto;
  scrollbar-width: none;
}
.dialogue-text::-webkit-scrollbar { display: none; }
.next-btn { display: none !important; }
.choice-panel { display: none; }

.battle-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; padding-top: 0; }
.battle-stage { display: grid; grid-template-rows: 1fr auto; gap: 8px; min-height: 0; height: 100%; }
.enemy-card,
.party-card {
  background: var(--panel2);
  border: 1px solid rgba(255,255,255,.18);
  padding: 10px;
}
.enemy-card { text-align: center; display: grid; align-content: center; }
.enemy-sprite {
  width: 72px;
  height: 72px;
  border: 2px solid rgba(214,83,83,.75);
  margin: 0 auto 6px;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  color: var(--danger);
  background: radial-gradient(circle, rgba(214,83,83,.18), rgba(0,0,0,.0) 68%);
  box-shadow: 0 0 42px rgba(214,83,83,.16);
}
.enemy-name { font-weight: 700; }
.party-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.bar {
  height: 10px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
  margin: 6px 0 4px;
  overflow: hidden;
}
.bar span { display: block; height: 100%; width: 100%; background: var(--danger); transition: width .22s ease; }
.bar.player span { background: var(--good); }
.small-text,
.battle-log { color: var(--muted); font-size: .86rem; }
.battle-log {
  min-height: 60px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  white-space: pre-wrap;
  display: none;
}
.command-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.command {
  min-height: 38px;
  padding: 7px 10px;
  text-align: left;
}
.command.selected {
  background: rgba(255,255,255,.2);
  border-color: #fff;
}
.command.selected::before { content: "▶ "; color: var(--warning); }

.mobile-controls {
  grid-row: 2;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(124px, 1fr) auto minmax(124px, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 0;
  touch-action: none;
}
.dpad {
  width: 128px;
  height: 128px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 7px;
  justify-self: start;
}
.pad-btn {
  min-height: 0;
  min-width: 0;
  font-size: 1rem;
  font-weight: 800;
}
.pad-btn.dpad-center { opacity: .55; font-size: .65rem; }
.pad-btn.ghost { visibility: hidden; }
.menu-control {
  width: 70px;
  height: 42px;
  padding: 0 6px;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .08em;
}
.ab-pad {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}
.action-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 900;
  box-shadow: inset 0 0 20px rgba(0,0,0,.35);
}
.a-btn { background: rgba(255,255,255,.18); }
.b-btn { color: var(--muted); }

.ending-box { position: relative; width: min(100%, 540px); text-align: left; }
.ending-box h2 { text-align: center; font-size: 2.2rem; letter-spacing: .18em; font-weight: 500; }
.ending-box hr { border: 0; border-top: 1px solid rgba(255,255,255,.28); margin: 28px 0; }
.next-title { color: var(--muted); text-align: center; margin-bottom: 0; }
.next-episode { text-align: center; font-size: 1.2rem; margin-top: 0; }

.flash { animation: flash .24s linear 0s 2; }
@keyframes flash { 50% { filter: brightness(1.9); } }
.shake { animation: shake .26s linear 0s 2; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

@media (min-width: 760px) {
  .app { padding: 14px; }
}

@media (max-width: 430px) {
  :root { --control-h: 142px; --dialogue-h: 96px; }
  .battle-panel { padding-top: 0; }
  .enemy-focus { margin-top: 104px; }
  .app { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
  .game-screen { gap: 6px; }
  .panel, .dialogue-panel, .mobile-controls { border-width: 2px; }
  .dpad { width: 118px; height: 118px; gap: 6px; }
  .action-btn { width: 54px; height: 54px; }
  .ab-pad { gap: 10px; }
  .menu-control { width: 58px; font-size: .68rem; }
  .speaker-portrait { flex-basis: 42px; height: 42px; font-size: 1.1rem; }
  .speaker { font-size: .82rem; }
}

@media (max-width: 360px) {
  :root { --control-h: 132px; --dialogue-h: 90px; }
  .dpad { width: 106px; height: 106px; }
  .action-btn { width: 48px; height: 48px; }
  .ab-pad { gap: 8px; }
  .cell { width: clamp(27px, 8.4vw, 40px); height: clamp(27px, 8.4vw, 40px); }
}

/* v0.1.8: battle top box owns command/log display */
.battle-top-window .battle-command-window.hidden,
.battle-top-window .battle-log-pane.hidden { display: none !important; }
.battle-status-row.party-count-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.battle-status-row .status-card { min-width: 0; }
@media (max-width: 430px) {
  .battle-top-window { width: calc(100% - 18px); top: -10px; min-height: 72px; padding: 6px 8px; }
  .battle-status-row { left: 6px; right: 6px; gap: 5px; }
  .status-card { padding: 5px 5px 6px; }
  .status-name { font-size: .76rem; }
  .status-line { font-size: .66rem; }
  .status-gauge { height: 8px; }
}


/* v0.1.11: force battle command/log to true top */
.battle-panel {
  padding-top: 0 !important;
}

.battle-stage {
  height: 100% !important;
}

.battle-top-window {
  top: 8px !important;
  min-height: 72px !important;
}

.enemy-focus {
  margin-top: 112px !important;
}

@media (max-width: 430px) {
  .battle-panel {
    padding-top: 0 !important;
  }

  .battle-top-window {
    top: 8px !important;
    min-height: 72px !important;
  }

  .enemy-focus {
    margin-top: 104px !important;
  }
}