:root {
  --bg: #f2f1ea;
  --ink: #16201e;
  --muted: #56605d;
  --panel: #ffffff;
  --line: #2a3a36;
  --accent: #1c7c62;
  --accent-strong: #135949;
  --gold: #c58a28;
  --danger: #a83d3d;
  --mana: #315f9c;
  --soft: #e5ece5;
  --shadow: 0 12px 26px rgba(20, 30, 28, 0.14);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(41, 101, 180, 0.14), transparent 220px),
    radial-gradient(circle at 14% 12%, rgba(197, 138, 40, 0.16), transparent 180px),
    var(--bg);
  color: var(--ink);
  font-family: "Yu Gothic", "Meiryo", system-ui, sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  min-height: 42px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--line);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

button:hover:not(:disabled),
button:focus-visible:not(:disabled) {
  background: var(--soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--line);
}

button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--line);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}

input,
select {
  width: 100%;
  min-height: 42px;
  border: 2px solid #9aa39f;
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  padding: 0 10px;
}

.shell {
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto;
  padding: 10px 0 10px;
}

.site-header,
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header {
  margin-bottom: 10px;
  padding: 10px 14px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: #22322e;
  color: #f7f6ef;
  box-shadow: var(--shadow);
}

.site-header h1 {
  margin: 0;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1;
  letter-spacing: 0;
}

.kicker {
  margin: 0 0 4px;
  color: #d9c17d;
  font-weight: 700;
}

.header-badge {
  flex: 0 0 auto;
  border: 2px solid #d9c17d;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
}

.app {
  display: grid;
  gap: 16px;
}

.site-footer {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.panel {
  border: 3px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 3px solid var(--line);
  background: #edf3ed;
}

.panel-header h2,
.panel-header h3 {
  margin: 0;
}

.panel-body {
  padding: 16px;
}

.setup-grid,
.game-grid,
.battle-grid {
  display: grid;
  gap: 16px;
}

.setup-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.member-setup {
  display: grid;
  gap: 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcf8;
}

.member-setup h3 {
  margin: 0;
  font-size: 18px;
}

.field-label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.job-note {
  min-height: 70px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.button-row,
.command-row,
.location-list,
.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button-row button,
.command-row button,
.result-actions button {
  padding: 0 14px;
}

.primary {
  background: var(--accent);
  color: #ffffff;
}

.primary:hover:not(:disabled),
.primary:focus-visible:not(:disabled) {
  background: var(--accent-strong);
}

.danger {
  border-color: #6f2525;
  background: #fff0f0;
  color: #6f2525;
  box-shadow: 0 3px 0 #6f2525;
}

.game-grid {
  grid-template-columns: 1fr 1.35fr;
  align-items: start;
}

.adventure-grid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.battle-grid {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.party-list {
  display: grid;
  gap: 10px;
}

.party-member {
  display: grid;
  gap: 8px;
  border: 2px solid #b6bfba;
  border-radius: 8px;
  padding: 10px;
  background: #fbfcf8;
}

.member-header-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.member-portrait {
  position: relative;
  width: 58px;
  height: 64px;
  overflow: hidden;
  border: 2px solid #263633;
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 245, 168, 0.34) 0 18%, transparent 19%),
    linear-gradient(180deg, #dbe7ef 0 44%, #9ab77b 45% 100%);
  image-rendering: pixelated;
}

.character-portrait-image {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background:
    linear-gradient(45deg, #f5f5f5 25%, transparent 25% 75%, #f5f5f5 75%),
    linear-gradient(45deg, #f5f5f5 25%, #ffffff 25% 75%, #f5f5f5 75%);
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;
}

.character-portrait-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 7%;
  image-rendering: auto;
  transform: scale(1.42);
  transform-origin: 50% 9%;
}

.member-info {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.party-member.is-active {
  border-color: var(--gold);
  outline: 3px solid rgba(197, 138, 40, 0.25);
}

.party-member.is-down {
  opacity: 0.62;
}

.member-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.member-name {
  font-weight: 900;
  font-size: 17px;
}

.member-job {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.member-title {
  color: #38504a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.member-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.meter {
  display: grid;
  gap: 4px;
}

.meter-label {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.meter-track {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #d9dedb;
}

.meter-fill {
  height: 100%;
  background: var(--accent);
}

.meter-fill.hp-low {
  background: var(--danger);
}

.meter-fill.mp {
  background: var(--mana);
}

.stat-line,
.resource-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 2px solid #a8b2ad;
  border-radius: 999px;
  padding: 3px 10px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 800;
}

.scene {
  display: grid;
  gap: 14px;
}

.scene-art {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: #8ac6b1;
}

.landscape {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #6aa9c8 0 42%, #94c36f 42% 66%, #42693f 66% 100%);
}

.landscape::before,
.landscape::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}

.landscape::before {
  top: 42%;
  height: 50px;
  background:
    linear-gradient(135deg, transparent 0 35%, #526d57 36% 48%, transparent 49%),
    linear-gradient(225deg, transparent 0 30%, #6d805f 31% 45%, transparent 46%);
  background-size: 170px 70px, 210px 70px;
}

.landscape::after {
  bottom: 0;
  height: 64px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 18px, transparent 18px 34px),
    #315335;
}

.scene-copy {
  line-height: 1.7;
}

.location-list button {
  flex: 1 1 170px;
  justify-content: center;
  padding: 0 12px;
}

.location-list button.is-selected {
  background: #dcefe6;
}

.log-box {
  display: grid;
  gap: 6px;
  max-height: 150px;
  overflow: auto;
  border: 2px solid #a8b2ad;
  border-radius: 8px;
  padding: 10px;
  background: #fbfcf8;
  color: #2e3936;
  line-height: 1.55;
}

.log-line {
  margin: 0;
}

.battlefield {
  display: grid;
  gap: 14px;
}

.enemy-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.enemy-card {
  display: grid;
  gap: 8px;
  justify-items: center;
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbf6;
}

.enemy-card.is-down {
  opacity: 0.45;
}

.enemy-name {
  font-weight: 900;
  text-align: center;
}

.monster-visual {
  position: relative;
  width: 92px;
  height: 74px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: #d9ebe1;
  overflow: hidden;
}

.monster-visual::before,
.monster-visual::after {
  content: "";
  position: absolute;
  display: block;
}

.visual-moss::before {
  width: 62px;
  height: 42px;
  left: 13px;
  bottom: 10px;
  border: 3px solid #234c34;
  border-radius: 42px 42px 18px 18px;
  background: #5f9f58;
}

.visual-moss::after {
  width: 8px;
  height: 8px;
  left: 36px;
  top: 34px;
  border-radius: 50%;
  background: #16201e;
  box-shadow: 18px 0 0 #16201e;
}

.visual-needle::before {
  left: 18px;
  top: 10px;
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-bottom: 52px solid #b9b348;
}

.visual-needle::after {
  width: 54px;
  height: 12px;
  left: 18px;
  bottom: 12px;
  background: #5e6d2d;
}

.visual-ember::before {
  left: 22px;
  top: 10px;
  width: 45px;
  height: 50px;
  border-radius: 45% 45% 50% 50%;
  background: #d85d36;
  box-shadow: inset 10px -8px 0 #f2b447;
}

.visual-ember::after {
  width: 8px;
  height: 8px;
  left: 37px;
  top: 38px;
  border-radius: 50%;
  background: #16201e;
  box-shadow: 16px 0 0 #16201e;
}

.visual-stone::before {
  left: 18px;
  top: 17px;
  width: 56px;
  height: 42px;
  transform: rotate(-8deg);
  border: 3px solid #3b4542;
  border-radius: 10px;
  background: #87918b;
}

.visual-stone::after {
  left: 30px;
  top: 30px;
  width: 10px;
  height: 10px;
  background: #16201e;
  box-shadow: 22px 0 0 #16201e, 10px 16px 0 #4d5854;
}

.visual-mist::before {
  left: 12px;
  top: 18px;
  width: 68px;
  height: 40px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 45%, #ffffff 0 9px, transparent 10px),
    radial-gradient(circle at 58% 42%, #ffffff 0 11px, transparent 12px),
    #8e9bd0;
}

.visual-mist::after {
  left: 28px;
  top: 39px;
  width: 36px;
  height: 4px;
  background: #3d497e;
}

.visual-armor::before {
  left: 25px;
  top: 9px;
  width: 42px;
  height: 54px;
  border: 3px solid #293532;
  border-radius: 8px 8px 14px 14px;
  background: #6f7c78;
}

.visual-armor::after {
  left: 34px;
  top: 28px;
  width: 24px;
  height: 5px;
  background: #151d1b;
  box-shadow: 0 14px 0 #d2a64b;
}

.visual-crystal::before {
  left: 27px;
  top: 8px;
  width: 38px;
  height: 56px;
  clip-path: polygon(50% 0, 100% 27%, 82% 100%, 18% 100%, 0 27%);
  background: #6e5bb7;
}

.visual-crystal::after {
  left: 39px;
  top: 28px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff6b7;
  box-shadow: 14px 0 0 #fff6b7;
}

.visual-drake::before {
  left: 13px;
  top: 17px;
  width: 64px;
  height: 41px;
  border: 3px solid #33221f;
  border-radius: 18px 18px 10px 10px;
  background: #7d342f;
}

.visual-drake::after {
  left: 59px;
  top: 7px;
  border-left: 14px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 22px solid #d4a247;
  transform: rotate(18deg);
}

.visual-guardian::before {
  left: 18px;
  top: 9px;
  width: 54px;
  height: 54px;
  clip-path: polygon(50% 0, 82% 18%, 100% 50%, 82% 82%, 50% 100%, 18% 82%, 0 50%, 18% 18%);
  border: 3px solid #253532;
  background:
    radial-gradient(circle at 50% 50%, #fff7a8 0 18%, transparent 19%),
    #4f8d90;
}

.visual-guardian::after {
  left: 39px;
  top: 26px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f9f1b5;
  box-shadow: 0 0 14px #f9f1b5;
}

.command-panel {
  display: grid;
  gap: 12px;
}

.command-section {
  display: grid;
  gap: 8px;
}

.command-section h3 {
  margin: 0;
  font-size: 16px;
}

.skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.skill-button {
  display: grid;
  gap: 2px;
  align-content: center;
  min-height: 62px;
  padding: 6px 10px;
}

.skill-button span {
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.82;
}

.monster-visual.has-sprite {
  border: 0;
  background: transparent;
  overflow: visible;
}

.monster-visual.has-sprite::before,
.monster-visual.has-sprite::after {
  content: none;
}

.monster-visual.has-sprite img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.28));
}

.battle-scene {
  overflow: hidden;
  border: 3px solid #14201f;
  border-radius: 8px;
  background: #0b1517;
  box-shadow: var(--shadow);
}

.battle-stage {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
  background-position: center;
  background-size: cover;
}

.battle-backdrop-field .battle-stage {
  background-image: url("../assets/images/battle/backgrounds/stone_plateau_day.png");
}

.battle-backdrop-cave .battle-stage {
  background-image: url("../assets/images/battle/backgrounds/crystal_cave.png");
}

.battle-backdrop-ship .battle-stage {
  /* 専用の船内背景。未配置の間は下層の野外背景にフォールバックする。 */
  background-image: url("../assets/images/battle/backgrounds/shipwreck_hold.png"), url("../assets/images/battle/backgrounds/stone_plateau_day.png");
}

.battle-backdrop-beach .battle-stage {
  background-image: url("../assets/images/battle/backgrounds/beach_dunes.png"), url("../assets/images/battle/backgrounds/stone_plateau_day.png");
}

.battle-backdrop-hill .battle-stage {
  background-image: url("../assets/images/battle/backgrounds/lantern_hill.png"), url("../assets/images/battle/backgrounds/stone_plateau_day.png");
}

.battle-backdrop-slope .battle-stage {
  background-image: url("../assets/images/battle/backgrounds/firefly_slope.png"), url("../assets/images/battle/backgrounds/crystal_cave.png");
}

.battle-backdrop-shrine .battle-stage {
  background-image: url("../assets/images/battle/backgrounds/old_shrine.png"), url("../assets/images/battle/backgrounds/stone_plateau_day.png");
}

.battle-backdrop-forest .battle-stage {
  background-image: url("../assets/images/battle/backgrounds/forest_grove.png"), url("../assets/images/battle/backgrounds/stone_plateau_day.png");
}

.battle-backdrop-hollow .battle-stage {
  background-image: url("../assets/images/battle/backgrounds/tree_hollow.png"), url("../assets/images/battle/backgrounds/crystal_cave.png");
}

.battle-backdrop-waterway .battle-stage {
  background-image: url("../assets/images/battle/backgrounds/under_canal.png"), url("../assets/images/battle/backgrounds/crystal_cave.png");
}

.battle-backdrop-warehouse .battle-stage {
  background-image: url("../assets/images/battle/backgrounds/oil_warehouse.png"), url("../assets/images/battle/backgrounds/crystal_cave.png");
}

.battle-backdrop-alley .battle-stage {
  background-image: url("../assets/images/battle/backgrounds/town_alley_night.png"), url("../assets/images/battle/backgrounds/stone_plateau_day.png");
}

.battle-backdrop-pier .battle-stage {
  background-image: url("../assets/images/battle/backgrounds/foggy_pier.png"), url("../assets/images/battle/backgrounds/stone_plateau_day.png");
}

.battle-backdrop-gate .battle-stage {
  background-image: url("../assets/images/battle/backgrounds/castle_gate_dawn.png"), url("../assets/images/battle/backgrounds/stone_plateau_day.png");
}

.battle-backdrop-isleshore .battle-stage {
  background-image: url("../assets/images/battle/backgrounds/island_shallows.png"), url("../assets/images/battle/backgrounds/stone_plateau_day.png");
}

.battle-backdrop-nightshore .battle-stage {
  background-image: url("../assets/images/battle/backgrounds/eternal_night_shore.png"), url("../assets/images/battle/backgrounds/crystal_cave.png");
}

.battle-backdrop-throne .battle-stage {
  background-image: url("../assets/images/battle/backgrounds/whiteflag_throne.png"), url("../assets/images/battle/backgrounds/crystal_cave.png");
}

.battle-stage::before,
.battle-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.battle-stage::before {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5, 16, 22, 0.08) 0 48%, rgba(4, 11, 14, 0.34) 100%),
    radial-gradient(ellipse at 54% 74%, transparent 0 34%, rgba(4, 10, 12, 0.23) 100%);
}

.battle-stage::after {
  z-index: 2;
  background: linear-gradient(90deg, rgba(4, 10, 12, 0.18), transparent 18% 82%, rgba(4, 10, 12, 0.22));
}

.battle-scene-hud {
  position: absolute;
  z-index: 10;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.battle-location-chip,
.battle-resource-strip,
.battle-command-overlay,
.battle-status-overlay,
.battle-log-overlay .log-box {
  border: 2px solid rgba(240, 247, 244, 0.8);
  border-radius: 5px;
  background: rgba(8, 15, 17, 0.86);
  color: #f7fbf8;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(5px);
}

.battle-location-chip {
  display: grid;
  gap: 2px;
  min-width: 210px;
  padding: 9px 12px;
}

.battle-location-chip span,
.battle-location-chip small {
  color: #d3dfda;
  font-size: 12px;
  font-weight: 800;
}

.battle-location-chip strong {
  font-size: 20px;
}

.battle-resource-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 14px;
  max-width: 58%;
  padding: 8px 12px;
  color: #eef7f3;
  font-size: 12px;
  font-weight: 800;
}

.battle-enemy-formation {
  position: absolute;
  z-index: 4;
  top: 16%;
  left: 10%;
  right: 31%;
  height: 39%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 2.4vw, 34px);
  pointer-events: none;
}

.enemy-card {
  position: relative;
  display: grid;
  flex: 0 1 230px;
  gap: 5px;
  justify-items: center;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
}

.enemy-card:nth-child(2) {
  transform: translateY(-16px) scale(0.94);
}

.enemy-card:nth-child(3) {
  transform: translateY(5px) scale(0.88);
}

.enemy-card.is-down {
  opacity: 0.3;
  filter: grayscale(0.7);
}

.enemy-sprite-shell {
  display: grid;
  width: 100%;
  height: clamp(150px, 20vw, 250px);
  place-items: end center;
  transform-origin: center bottom;
  filter: drop-shadow(0 15px 8px rgba(0, 0, 0, 0.38));
}

.enemy-card.size-small .enemy-sprite-shell {
  transform: scale(0.78);
}

.enemy-card.size-large .enemy-sprite-shell {
  transform: scale(1.12);
}

.battle-monster-visual.has-sprite {
  width: 100%;
  height: 100%;
}

.battle-monster-visual:not(.has-sprite) {
  width: 138px;
  height: 112px;
  border-color: rgba(238, 247, 243, 0.75);
  background: rgba(217, 235, 225, 0.88);
}

.enemy-sprite-shell .monster-visual {
  transform-origin: center bottom;
  animation: enemy-battle-idle 1700ms ease-in-out infinite;
}

.enemy-card:nth-child(2) .enemy-sprite-shell .monster-visual {
  animation-delay: -420ms;
}

.enemy-card:nth-child(3) .enemy-sprite-shell .monster-visual {
  animation-delay: -760ms;
}

.enemy-card.is-enemy-motion-hit .enemy-sprite-shell .monster-visual {
  animation: enemy-battle-hit 460ms ease-out;
}

.enemy-card.is-enemy-motion-attack .enemy-sprite-shell .monster-visual {
  animation: enemy-battle-attack 560ms cubic-bezier(0.18, 0.84, 0.24, 1);
}

.enemy-card.is-enemy-motion-down .enemy-sprite-shell .monster-visual {
  animation: enemy-battle-down 620ms ease-out both;
}

.enemy-nameplate {
  display: grid;
  gap: 4px;
  width: min(100%, 190px);
  min-width: 145px;
  border: 1px solid rgba(243, 248, 246, 0.85);
  border-radius: 3px;
  padding: 5px 7px;
  background: rgba(7, 13, 15, 0.82);
  color: #ffffff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}

.enemy-name-row,
.enemy-hp-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.enemy-name-row {
  justify-content: space-between;
}

.enemy-name-row strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enemy-name-row span {
  color: #ffe79b;
  font-size: 10px;
  font-weight: 800;
}

.enemy-hp-line {
  color: #dbe7e2;
  font-size: 10px;
  font-weight: 800;
}

.enemy-hp-line i {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.5);
}

.enemy-hp-line b {
  display: block;
  height: 100%;
  background: #59d478;
}

.enemy-hp-line b.hp-low {
  background: #ef6a5a;
}

.enemy-hp-line small {
  min-width: 42px;
  text-align: right;
}

.battle-party-formation {
  position: absolute;
  z-index: 5;
  right: 22%;
  bottom: 31%;
  left: 43%;
  height: 29%;
  pointer-events: none;
}

.battle-party-actor {
  position: absolute;
  bottom: 0;
  width: 110px;
  height: 185px;
  transform-origin: center bottom;
}

.battle-party-actor.actor-0 {
  left: 0;
  transform: scale(1.08);
}

.battle-party-actor.actor-1 {
  left: 27%;
  bottom: 9%;
  transform: scale(0.94);
}

.battle-party-actor.actor-2 {
  left: 54%;
  bottom: 2%;
  transform: scale(1.02);
}

.battle-party-actor.actor-3 {
  left: 79%;
  bottom: 11%;
  transform: scale(0.9);
}

.battle-party-actor.is-down {
  opacity: 0.4;
  filter: grayscale(0.75);
}

.battle-party-actor.is-active::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 20px;
  width: 78px;
  height: 78px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 235, 142, 0.78), rgba(255, 235, 142, 0) 70%);
  animation: battle-active-aura 1100ms ease-in-out infinite;
}

.battle-party-shadow {
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 74px;
  height: 17px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.32);
  filter: blur(2px);
}

.battle-party-sprite-frame {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: center bottom;
}

.battle-party-actor.is-party-animated .battle-party-sprite-frame {
  animation: party-battle-ready 1600ms ease-in-out infinite;
}

.battle-party-actor.actor-1 .battle-party-sprite-frame {
  animation-delay: -260ms;
}

.battle-party-actor.actor-2 .battle-party-sprite-frame {
  animation-delay: -520ms;
}

.battle-party-actor.actor-3 .battle-party-sprite-frame {
  animation-delay: -780ms;
}

.battle-party-actor.is-party-animated.is-motion-attack .battle-party-sprite-frame {
  animation: party-battle-strike 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.battle-party-actor.is-party-animated.is-motion-guard .battle-party-sprite-frame {
  animation: party-battle-guard 520ms ease-out;
}

.battle-party-actor.is-party-animated.is-motion-cast .battle-party-sprite-frame,
.battle-party-actor.is-party-animated.is-motion-item .battle-party-sprite-frame,
.battle-party-actor.is-party-animated.is-motion-heal .battle-party-sprite-frame {
  animation: party-battle-cast 620ms ease-out;
}

.battle-party-actor.is-party-animated.is-motion-hit .battle-party-sprite-frame {
  animation: party-battle-hit 460ms ease-out;
}

.battle-party-actor.is-party-animated.is-motion-move .battle-party-sprite-frame {
  animation: party-battle-stepback 520ms ease-out;
}

.battle-party-actor.is-hero-male-animated .battle-party-sprite-frame {
  animation: hero-male-ready 1500ms ease-in-out infinite;
}

.battle-party-actor.is-hero-male-animated.is-motion-attack .battle-party-sprite-frame {
  animation: hero-male-strike 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.battle-party-actor.is-hero-male-animated.is-motion-guard .battle-party-sprite-frame {
  animation: hero-male-guard 520ms ease-out;
}

.battle-party-actor.is-hero-male-animated.is-motion-cast .battle-party-sprite-frame,
.battle-party-actor.is-hero-male-animated.is-motion-item .battle-party-sprite-frame {
  animation: hero-male-cast 620ms ease-out;
}

.battle-party-actor.is-hero-male-animated.is-motion-move .battle-party-sprite-frame {
  animation: hero-male-stepback 520ms ease-out;
}

.battle-party-sprite.field-character-sprite {
  top: 48%;
  width: 145%;
  height: 145%;
  filter: drop-shadow(0 7px 2px rgba(0, 0, 0, 0.36));
}

.battle-party-sprite.pixel-sprite,
.battle-party-sprite.pixel-sprite.sprite-0,
.battle-party-sprite.pixel-sprite.sprite-1,
.battle-party-sprite.pixel-sprite.sprite-2,
.battle-party-sprite.pixel-sprite.sprite-3 {
  top: 50%;
  width: 64%;
  height: 78%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 7px 2px rgba(0, 0, 0, 0.36));
}

.battle-party-name {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 3px;
  padding: 2px 5px;
  background: rgba(6, 13, 15, 0.76);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.battle-command-overlay {
  position: absolute;
  z-index: 9;
  bottom: 16px;
  left: 16px;
  width: min(38%, 480px);
  max-height: 318px;
  overflow: hidden;
}

.battle-command-overlay .command-panel {
  gap: 10px;
  padding: 11px;
}

.command-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.command-heading div {
  display: grid;
  gap: 1px;
}

.command-heading strong {
  font-size: 15px;
}

.command-heading small {
  color: #c9d8d2;
  font-size: 11px;
  font-weight: 800;
}

.command-marker {
  color: #ffe08a;
  font-size: 13px;
}

.battle-command-main,
.battle-command-subpanel {
  display: grid;
  gap: 8px;
}

.battle-victory-panel {
  display: grid;
  gap: 10px;
}

.battle-victory-lines {
  display: grid;
  gap: 5px;
  max-height: 172px;
  overflow: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding: 8px 2px;
}

.battle-victory-lines p {
  margin: 0;
  color: #f7fbf8;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

/* === 勝利の見せ場：段階表示の演出 === */
.victory-banner {
  opacity: 0;
  animation: victory-pop 360ms ease-out both;
}

.victory-spoils {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.spoil-badge {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(38, 64, 54, 0.92), rgba(20, 36, 30, 0.92));
  border: 1px solid rgba(255, 224, 138, 0.55);
  opacity: 0;
  animation: victory-pop 320ms ease-out both;
}

.spoil-badge em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #bfe6cf;
}

.spoil-badge strong {
  font-size: 16px;
  font-weight: 900;
  color: #ffe98a;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.victory-rewards {
  display: grid;
  gap: 4px;
}

.reward-spark {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: #f5fff7;
  opacity: 0;
  animation: victory-slide 320ms ease-out both;
}

.reward-spark span {
  color: #ffe98a;
  margin-right: 5px;
  animation: spark-twinkle 1.4s ease-in-out infinite;
}

.victory-levelups {
  display: grid;
  gap: 8px;
}

.levelup-card {
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(58, 50, 18, 0.95), rgba(34, 44, 30, 0.95));
  border: 1px solid rgba(255, 224, 138, 0.85);
  box-shadow: 0 0 0 1px rgba(255, 224, 138, 0.18), 0 6px 16px rgba(0, 0, 0, 0.35);
  opacity: 0;
  animation: levelup-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.levelup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.levelup-head strong {
  font-size: 13px;
  font-weight: 900;
  color: #fff6d4;
}

.levelup-flash {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #1c2a1f;
  background: #ffe98a;
  padding: 2px 6px;
  border-radius: 5px;
  animation: levelup-flash 900ms ease-in-out 2;
}

.levelup-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.stat-up {
  font-size: 11px;
  font-weight: 800;
  color: #d7f0dd;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  padding: 2px 6px;
}

.stat-up b {
  color: #9be7a6;
}

.levelup-skills {
  margin-top: 6px;
  display: grid;
  gap: 3px;
}

.skill-learned {
  font-size: 11px;
  font-weight: 800;
  color: #ffd6f0;
  opacity: 0;
  animation: victory-slide 320ms ease-out both;
}

@keyframes victory-pop {
  0% { opacity: 0; transform: scale(0.82) translateY(6px); }
  70% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes victory-slide {
  0% { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes levelup-rise {
  0% { opacity: 0; transform: translateY(14px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes levelup-flash {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 233, 138, 0); }
  50% { box-shadow: 0 0 12px 3px rgba(255, 233, 138, 0.85); }
}

@keyframes spark-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .victory-banner,
  .spoil-badge,
  .reward-spark,
  .levelup-card,
  .skill-learned { animation-duration: 1ms; }
  .levelup-flash,
  .reward-spark span { animation: none; }
}

.battle-command-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.battle-command-actions .wide {
  grid-column: 1 / -1;
}

.battle-command-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 8px;
  color: #f7fbf8;
  font-size: 12px;
}

.battle-command-overlay .battle-back-button {
  min-height: 28px;
  width: auto;
  padding: 3px 10px;
  border-color: rgba(255, 224, 138, 0.88);
  color: #fff6d4;
  text-align: center;
}

.battle-choice-list {
  display: grid;
  gap: 6px;
  max-height: 205px;
  overflow: auto;
  padding-right: 4px;
}

.battle-choice-button {
  display: grid;
  gap: 3px;
  align-content: center;
  min-height: 48px;
}

.battle-choice-button span {
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  opacity: 0.82;
}

.battle-empty-choice {
  margin: 0;
  border: 1px solid rgba(241, 248, 245, 0.45);
  border-radius: 3px;
  padding: 10px;
  color: #d5e1dc;
  font-size: 12px;
  font-weight: 800;
}

.command-menu-grid {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  gap: 10px;
}

.battle-command-overlay .command-section {
  gap: 5px;
}

.battle-command-overlay .command-section h3 {
  color: #cbd9d4;
  font-size: 11px;
}

.battle-command-overlay .command-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.battle-command-overlay .skill-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.battle-command-overlay button {
  position: relative;
  min-height: 42px;
  border: 1px solid rgba(241, 248, 245, 0.82);
  border-radius: 3px;
  padding: 5px 7px 5px 24px;
  background: rgba(12, 22, 24, 0.92);
  color: #ffffff;
  box-shadow: none;
  font-size: 13px;
  text-align: center;
}

.battle-command-overlay button.primary {
  border-color: #ffe08a;
  background: #2b4d45;
  color: #fff6d4;
}

.battle-command-overlay button:hover:not(:disabled),
.battle-command-overlay button:focus-visible:not(:disabled),
.battle-command-overlay button.is-command-selected {
  border-color: #ffe08a;
  background: #335f54;
}

.battle-command-overlay button:disabled {
  border-color: rgba(241, 248, 245, 0.28);
  background: rgba(12, 22, 24, 0.58);
  color: rgba(255, 255, 255, 0.42);
}

.battle-command-overlay .skill-button {
  min-height: 48px;
  text-align: left;
}

.battle-command-overlay .skill-button span {
  font-size: 10px;
  line-height: 1.3;
}

.battle-status-overlay {
  position: absolute;
  z-index: 9;
  right: 16px;
  bottom: 16px;
  width: 230px;
  padding: 9px;
}

.battle-status-heading,
.battle-status-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.battle-status-heading {
  margin-bottom: 6px;
  color: #d6e3de;
  font-size: 11px;
}

.battle-status-list {
  display: grid;
  gap: 5px;
}

.battle-status-member {
  display: grid;
  gap: 3px;
  border-left: 3px solid transparent;
  padding: 4px 5px;
  background: rgba(255, 255, 255, 0.04);
}

.battle-status-member.is-active {
  border-left-color: #ffe08a;
  background: rgba(255, 224, 138, 0.1);
}

.battle-status-member.is-down {
  opacity: 0.46;
}

.battle-status-name strong {
  font-size: 13px;
}

.battle-status-name span,
.battle-status-meter span {
  color: #d5e1dc;
  font-size: 9px;
  font-weight: 800;
}

.battle-status-meter {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
}

.battle-status-meter i {
  height: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(0, 0, 0, 0.45);
}

.battle-status-meter b {
  display: block;
  height: 100%;
  background: #55d474;
}

.battle-status-meter.mp b {
  background: #66aaff;
}

.battle-log-overlay {
  position: absolute;
  z-index: 8;
  top: 125px;
  left: 16px;
  width: min(360px, 38%);
}

.battle-log-overlay .log-box {
  max-height: 128px;
  border-color: rgba(240, 247, 244, 0.72);
  padding: 8px 10px;
  background: rgba(8, 15, 17, 0.76);
  color: #f7fbf8;
  font-size: 11px;
  line-height: 1.45;
}

@keyframes battle-active-aura {
  0%,
  100% {
    opacity: 0.45;
    transform: translateX(-50%) scale(0.9);
  }
  50% {
    opacity: 0.88;
    transform: translateX(-50%) scale(1.08);
  }
}

@keyframes party-battle-ready {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-2px) rotate(-0.5deg);
  }
}

@keyframes party-battle-strike {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  28% {
    transform: translate(-5px, 2px) rotate(-3deg);
  }
  58% {
    transform: translate(16px, -8px) rotate(4deg) scale(1.05);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes party-battle-guard {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(6px) scale(0.94);
  }
}

@keyframes party-battle-cast {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: none;
  }
  45% {
    transform: translateY(-10px) scale(1.04);
    filter: drop-shadow(0 0 10px rgba(255, 224, 138, 0.7));
  }
}

@keyframes party-battle-hit {
  0%,
  100% {
    transform: translateX(0);
    filter: none;
  }
  28% {
    transform: translateX(9px) rotate(2deg);
    filter: brightness(1.45) drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
  }
  52% {
    transform: translateX(-5px) rotate(-1deg);
  }
}

@keyframes party-battle-stepback {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(16px);
  }
}

@keyframes enemy-battle-idle {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.015);
  }
}

@keyframes enemy-battle-hit {
  0%,
  100% {
    transform: translateX(0) scale(1);
    filter: none;
  }
  24% {
    transform: translateX(-10px) scale(1.04);
    filter: brightness(1.45) saturate(1.2);
  }
  46% {
    transform: translateX(6px) scale(0.98);
  }
}

@keyframes enemy-battle-attack {
  0%,
  100% {
    transform: translateX(0) scale(1);
  }
  30% {
    transform: translateX(10px) translateY(2px) scale(0.97);
  }
  62% {
    transform: translateX(-22px) translateY(-4px) scale(1.06);
  }
}

@keyframes enemy-battle-down {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
  100% {
    opacity: 0.18;
    transform: translateY(14px) scale(0.88);
    filter: grayscale(1);
  }
}

@keyframes hero-male-ready {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-3px) rotate(-1deg);
  }
}

@keyframes hero-male-strike {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  28% {
    transform: translate(-6px, 3px) rotate(-5deg);
  }
  58% {
    transform: translate(20px, -9px) rotate(6deg) scale(1.08);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes hero-male-guard {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(5px) scale(0.94);
  }
}

@keyframes hero-male-cast {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: none;
  }
  45% {
    transform: translateY(-12px) scale(1.05);
    filter: drop-shadow(0 0 10px rgba(255, 224, 138, 0.75));
  }
}

@keyframes hero-male-stepback {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(16px);
  }
}

.result-title {
  margin: 0 0 8px;
  font-size: clamp(26px, 5vw, 42px);
}

.result-art {
  display: block;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin: 4px auto 14px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.result-lines {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  line-height: 1.7;
}

.small-text {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.world-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  position: relative;
}

.compact-header {
  padding: 10px 12px;
}

.compact-header h2 {
  font-size: 22px;
}

.world-panel > .panel-body {
  padding: 12px;
}

.map-board {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 2px;
  width: min(100%, calc((100vh - 230px) * 1.333));
  border: 4px solid #1b2d36;
  border-radius: 8px;
  padding: 6px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 32%),
    #142831;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.18),
    0 10px 0 #0d171b;
  image-rendering: pixelated;
  justify-self: center;
}

.world-panel .map-board:not(.place-board),
.place-board.place-town {
  background:
    linear-gradient(180deg, rgba(4, 13, 10, 0.08), rgba(4, 13, 10, 0.2)),
    url("../assets/images/maps/green_village_path.png"),
    linear-gradient(135deg, #78b95c 0%, #d7c58c 42%, #3c7f47 100%);
  background-position: center;
  background-size: cover;
  image-rendering: auto;
}

.world-panel .map-board:not(.place-board) .tile,
.place-board.place-town .tile {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.world-panel .map-board:not(.place-board) .tile::before,
.world-panel .map-board:not(.place-board) .tile::after,
.place-board.place-town .tile::before,
.place-board.place-town .tile::after {
  display: none !important;
}

.map-board-3d,
.world-panel .map-board-3d:not(.place-board),
.place-board.map-board-3d {
  position: relative;
  display: block;
  width: min(100%, calc((100vh - 132px) * 1.5));
  min-height: clamp(520px, calc(100vh - 170px), 760px);
  aspect-ratio: 3 / 2;
  padding: 0;
  overflow: hidden;
  border: 4px solid #162a2f;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 34%),
    #375d49;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.18),
    0 10px 0 #0c171b,
    0 20px 34px rgba(0, 0, 0, 0.22);
  image-rendering: auto;
}

.map-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  background: #5eaf64;
}

.map-board-legacy {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.map-board-legacy .tile,
.map-board-legacy .field-character-sprite,
.map-board-legacy .pixel-sprite,
.map-board-legacy .place-npc,
.map-board-legacy .map-depth-layer {
  pointer-events: none;
}

.map-canvas-hud {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  z-index: 11;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  pointer-events: none;
}

.map-canvas-objective,
.map-canvas-hud p {
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 3px;
  background: rgba(9, 18, 20, 0.72);
  color: #ffffff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
}

.map-canvas-objective {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  min-width: min(420px, 52%);
  max-width: 560px;
  padding: 8px 10px;
}

.map-canvas-objective span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 224, 138, 0.8);
  color: #ffe08a;
  font-size: 12px;
  font-weight: 900;
}

.map-canvas-objective strong {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-canvas-objective small {
  overflow: hidden;
  color: #dfe9e4;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-canvas-hud p {
  max-width: min(430px, 44%);
  margin: 0;
  padding: 8px 10px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-command-toggle {
  position: absolute;
  z-index: 15;
  top: 22px;
  left: 22px;
  min-height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  padding: 4px 14px;
  background: rgba(0, 0, 0, 0.66);
  color: #ffffff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  font-size: 13px;
}

.map-command-toggle.is-open {
  border-color: #ffe08a;
  color: #fff6d4;
}

.map-command-overlay {
  position: absolute;
  z-index: 14;
  top: 62px;
  left: 22px;
  display: grid;
  grid-template-columns: minmax(132px, 0.72fr) minmax(190px, 1fr) minmax(190px, 1fr);
  gap: 8px;
  width: min(840px, calc(100% - 44px));
  pointer-events: auto;
}

.map-command-panel {
  min-width: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.68);
  color: #ffffff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.42);
}

.map-command-panel h3 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 13px;
}

.map-command-panel p {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.map-command-list {
  display: grid;
  gap: 2px;
  max-height: 236px;
  overflow: auto;
}

.map-command-list button,
.map-command-toggle {
  text-align: left;
}

.map-command-list button {
  position: relative;
  min-height: 28px;
  border: 0;
  border-radius: 2px;
  padding: 3px 8px 3px 26px;
  background: transparent;
  color: #ffffff;
  box-shadow: none;
  font-size: 13px;
}

.map-command-list button.primary {
  background: transparent;
  color: #ffffff;
}

.map-command-list button:hover:not(:disabled),
.map-command-list button:focus-visible:not(:disabled),
.map-command-list button.is-command-selected {
  background: rgba(255, 255, 255, 0.16);
}

.map-command-list button:disabled {
  color: rgba(255, 255, 255, 0.42);
}

.map-command-list button.is-command-selected::before,
.battle-command-overlay button.is-command-selected::before {
  content: "▶";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
}

.map-party-command-list {
  display: grid;
  gap: 4px;
}

.map-party-command-member {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.map-party-command-member.is-down {
  opacity: 0.5;
}

.map-party-command-member > span {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  overflow: visible;
}

.map-command-party-sprite.field-character-sprite {
  top: 50%;
  width: 190%;
  height: 190%;
}

.map-command-panel .status-details {
  border-color: rgba(255, 255, 255, 0.32);
}

.map-command-panel .status-details summary,
.map-command-panel .status-mini {
  color: #ffffff;
}

.map-command-panel .status-mini {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.world-panel .command-window {
  display: none;
}

.tile {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  overflow: visible;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.16);
}

.tile-grass {
  background:
    radial-gradient(circle at 22% 70%, rgba(255, 255, 255, 0.22) 0 8%, transparent 9%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 20%, transparent 21%),
    #69ad59;
}

.tile-grass::before {
  content: "";
  position: absolute;
  inset: 58% 18% 18% 12%;
  background:
    linear-gradient(65deg, transparent 0 38%, #3f7b38 39% 48%, transparent 49%),
    linear-gradient(115deg, transparent 0 45%, #4f9144 46% 56%, transparent 57%);
  opacity: 0.6;
}

.tile-road {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 6px, transparent 6px 14px),
    linear-gradient(180deg, #d8bc78 0 48%, #b98d53 49% 100%);
}

.tile-road::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 48%;
  height: 10%;
  background: rgba(94, 69, 40, 0.22);
}

.tile-forest {
  background:
    radial-gradient(circle at 35% 34%, #2f7b3c 0 19%, transparent 20%),
    radial-gradient(circle at 68% 62%, #285f33 0 23%, transparent 24%),
    radial-gradient(circle at 62% 26%, #4c9c4a 0 14%, transparent 15%),
    #2f7f42;
}

.tile-forest::after {
  content: "";
  position: absolute;
  left: 46%;
  top: 34%;
  width: 9%;
  height: 38%;
  border-radius: 2px;
  background: #4d3524;
  box-shadow: -12px 12px 0 -2px #4d3524, 14px 17px 0 -2px #4d3524;
}

.tile-mountain {
  background:
    linear-gradient(135deg, transparent 0 35%, #d3d4c7 36% 46%, transparent 47%),
    linear-gradient(225deg, transparent 0 32%, #6d736c 33% 52%, transparent 53%),
    linear-gradient(180deg, #737c75 0 38%, #4d5752 39% 100%);
}

.tile-water {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0 4px, transparent 4px 12px),
    #4980c7;
  animation: water-flow 1200ms linear infinite;
}

.tile-town {
  background:
    linear-gradient(90deg, transparent 0 18%, #f8f0c8 19% 38%, transparent 39% 61%, #f8f0c8 62% 81%, transparent 82%),
    linear-gradient(180deg, #bd5a3b 0 34%, #e7d197 35% 100%);
}

.tile-town::before {
  content: "";
  position: absolute;
  left: 31%;
  top: 16%;
  width: 38%;
  height: 50%;
  border: 2px solid rgba(35, 32, 24, 0.45);
  background:
    linear-gradient(180deg, #b84337 0 32%, #f2daa0 33% 100%);
}

.tile-town::after {
  content: "";
  position: absolute;
  left: 43%;
  top: 47%;
  width: 14%;
  height: 23%;
  background: #5c3b2b;
}

.tile-castle {
  background:
    linear-gradient(90deg, #bec3bf 0 18%, #f2f0df 19% 35%, #c7c9bf 36% 64%, #f2f0df 65% 81%, #bec3bf 82% 100%),
    #87918b;
}

.tile-castle::before {
  content: "";
  position: absolute;
  left: 25%;
  top: 22%;
  width: 50%;
  height: 54%;
  background:
    linear-gradient(90deg, #9aa4a0 0 18%, transparent 19% 81%, #9aa4a0 82%),
    #edf0e4;
  border: 2px solid rgba(32, 43, 41, 0.5);
}

.tile-castle::after {
  content: "";
  position: absolute;
  left: 53%;
  top: 8%;
  width: 28%;
  height: 15%;
  background: #f7f2d5;
  border: 1px solid rgba(32, 43, 41, 0.5);
  box-shadow: -17px 7px 0 -3px #4265a0;
}

.tile-shrine {
  background:
    radial-gradient(circle at 50% 35%, #fff7a0 0 12%, transparent 13%),
    linear-gradient(180deg, #7a67b8 0 44%, #ece6ff 45% 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 14px rgba(255, 237, 128, 0.42);
}

.tile-shrine::after {
  content: "";
  position: absolute;
  left: 40%;
  top: 13%;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background: #fff3a0;
  animation: shrine-pulse 1400ms ease-in-out infinite;
}

.tile-cave {
  background:
    radial-gradient(circle at 50% 64%, #101b21 0 25%, transparent 26%),
    radial-gradient(circle at 50% 62%, rgba(119, 206, 206, 0.5) 0 17%, transparent 18%),
    linear-gradient(180deg, #78716c 0 44%, #b0a194 45% 100%);
}

.tile-cave::after {
  content: "";
  position: absolute;
  left: 37%;
  top: 48%;
  width: 26%;
  height: 18%;
  border-radius: 50%;
  background: rgba(148, 235, 226, 0.5);
  filter: blur(1px);
}

.tile-port {
  background:
    linear-gradient(90deg, transparent 0 25%, #855b3a 26% 74%, transparent 75%),
    linear-gradient(180deg, #5aa6cf 0 44%, #b68654 45% 70%, #3f89b6 71% 100%);
}

.tile-port::before {
  content: "";
  position: absolute;
  left: 42%;
  top: 12%;
  width: 16%;
  height: 52%;
  background: #f1ecd8;
  border: 1px solid rgba(36, 46, 48, 0.55);
}

.tile-port::after {
  content: "";
  position: absolute;
  left: 36%;
  top: 8%;
  width: 28%;
  height: 14%;
  background: #c94f4a;
  box-shadow: 0 18px 0 -5px #ffe98c;
}

.place-board {
  max-width: 760px;
}

.place-board.map-board-3d {
  max-width: none;
}

.tile-wall {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 48%, transparent 49%),
    linear-gradient(180deg, #7a756b 0 46%, #5b584f 47% 100%);
}

.tile-stone {
  background:
    repeating-linear-gradient(90deg, rgba(46, 47, 43, 0.12) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(0deg, rgba(46, 47, 43, 0.12) 0 2px, transparent 2px 18px),
    #bfc0b2;
}

.tile-garden {
  background:
    radial-gradient(circle at 30% 36%, #f7d56b 0 9%, transparent 10%),
    radial-gradient(circle at 68% 64%, #e87a6d 0 10%, transparent 11%),
    #6aa65b;
}

.tile-carpet {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 18%, transparent 19% 81%, rgba(255, 255, 255, 0.18) 82%),
    #a83d45;
}

.tile-gate,
.tile-inn,
.tile-herb,
.tile-weapon,
.tile-guild,
.tile-exchange,
.tile-arena {
  background:
    linear-gradient(180deg, #5f3a28 0 18%, #d9bf83 19% 66%, #8b5d38 67% 100%);
}

.tile-herb {
  background:
    radial-gradient(circle at 50% 36%, #6aae53 0 20%, transparent 21%),
    linear-gradient(180deg, #e8d59b 0 64%, #8b5d38 65% 100%);
}

.tile-weapon {
  background:
    linear-gradient(135deg, transparent 0 43%, #d5dde2 44% 54%, transparent 55%),
    linear-gradient(180deg, #b8795d 0 58%, #5f3a28 59% 100%);
}

.tile-guild {
  background:
    linear-gradient(90deg, transparent 0 30%, #f4efcf 31% 69%, transparent 70%),
    linear-gradient(180deg, #5176a8 0 48%, #d8c28d 49% 100%);
}

.tile-exchange {
  background:
    radial-gradient(circle at 50% 38%, #f4dc60 0 16%, transparent 17%),
    linear-gradient(180deg, #6b5fa8 0 52%, #d7c597 53% 100%);
}

.tile-arena {
  background:
    repeating-linear-gradient(90deg, rgba(60, 35, 25, 0.28) 0 5px, transparent 5px 13px),
    #c68154;
}

.tile-fountain {
  background:
    radial-gradient(circle at 50% 50%, #7fc1dd 0 28%, #e7e4d7 29% 44%, transparent 45%),
    #bfc0b2;
}

.tile-sign {
  background:
    linear-gradient(90deg, transparent 0 38%, #69452f 39% 61%, transparent 62%),
    linear-gradient(180deg, transparent 0 26%, #d6b16d 27% 56%, transparent 57%),
    #bfc0b2;
}

.tile-bed {
  background:
    linear-gradient(90deg, #f5f1dc 0 32%, #8db5d5 33% 100%);
}

.tile-counter {
  background:
    linear-gradient(180deg, #d6b16d 0 28%, #7b5337 29% 100%);
}

.tile-throne {
  background:
    linear-gradient(90deg, #d5b64f 0 18%, #c74949 19% 81%, #d5b64f 82%),
    #7b5337;
}

.tile-statue {
  background:
    radial-gradient(circle at 50% 34%, #d7d4c8 0 18%, transparent 19%),
    linear-gradient(180deg, transparent 0 48%, #85837a 49% 74%, transparent 75%),
    #bfc0b2;
}

.tile-rubble {
  background:
    radial-gradient(circle at 34% 58%, #6d675e 0 16%, transparent 17%),
    radial-gradient(circle at 64% 42%, #8a8377 0 18%, transparent 19%),
    radial-gradient(circle at 58% 70%, #514e48 0 13%, transparent 14%),
    #3f413c;
}

.tile-cavePool {
  background:
    radial-gradient(circle at 50% 48%, #5ba7b8 0 34%, #244a56 35% 52%, transparent 53%),
    #3f413c;
}

.tile-glowStone {
  background:
    radial-gradient(circle at 50% 46%, #b9f1ff 0 16%, rgba(70, 173, 198, 0.78) 17% 34%, transparent 35%),
    linear-gradient(135deg, #575b55 0 48%, #343833 49% 100%);
}

.tile-deepGate {
  background:
    linear-gradient(90deg, transparent 0 18%, #1f2423 19% 81%, transparent 82%),
    radial-gradient(circle at 50% 50%, rgba(160, 232, 255, 0.6) 0 24%, transparent 25%),
    #353833;
}

.tile-bossGate {
  background:
    radial-gradient(circle at 50% 44%, #d2fbff 0 12%, rgba(69, 156, 183, 0.8) 13% 28%, transparent 29%),
    linear-gradient(90deg, #1b1e20 0 18%, #4d4b63 19% 81%, #1b1e20 82%),
    #303235;
}

.tile-sea {
  background:
    repeating-linear-gradient(170deg, rgba(238, 252, 255, 0.5) 0 3px, transparent 3px 18px),
    #4b9dca;
}

.tile-dock {
  background:
    repeating-linear-gradient(90deg, rgba(64, 38, 22, 0.28) 0 3px, transparent 3px 14px),
    linear-gradient(180deg, #c29461 0 50%, #8a633f 51% 100%);
}

.tile-lighthouse {
  background:
    radial-gradient(circle at 50% 24%, #fff18a 0 12%, transparent 13%),
    linear-gradient(90deg, transparent 0 32%, #f3f0df 33% 67%, transparent 68%),
    linear-gradient(180deg, #c94f4a 0 18%, #d8d4c5 19% 100%);
}

.tile-ship {
  background:
    linear-gradient(135deg, transparent 0 44%, #efe6c8 45% 65%, transparent 66%),
    linear-gradient(180deg, transparent 0 52%, #72492f 53% 74%, transparent 75%),
    #4b9dca;
}

.place-board .tile {
  border-radius: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: pixelated;
}

.place-board .tile-wall {
  background-image: url("../assets/images/tiles/town/wall.png");
}

.place-board .tile-stone {
  background-image: url("../assets/images/tiles/town/stone.png");
}

.place-board .tile-garden {
  background-image: url("../assets/images/tiles/town/garden.png");
}

.place-board .tile-carpet {
  background-image: url("../assets/images/tiles/town/carpet.png");
}

.place-board .tile-gate {
  background-image: url("../assets/images/tiles/town/gate.png");
}

.place-board .tile-inn {
  background-image: url("../assets/images/tiles/town/inn.png");
}

.place-board .tile-herb {
  background-image: url("../assets/images/tiles/town/herb.png");
}

.place-board .tile-weapon {
  background-image: url("../assets/images/tiles/town/weapon.png");
}

.place-board .tile-guild {
  background-image: url("../assets/images/tiles/town/guild.png");
}

.place-board .tile-exchange {
  background-image: url("../assets/images/tiles/town/exchange.png");
}

.place-board .tile-arena {
  background-image: url("../assets/images/tiles/town/arena.png");
}

.place-board .tile-fountain {
  background-image: url("../assets/images/tiles/town/fountain.png");
}

.place-board .tile-sign {
  background-image: url("../assets/images/tiles/town/sign.png");
}

.place-board .tile-bed {
  background-image: url("../assets/images/tiles/town/bed.png");
}

.place-board .tile-counter {
  background-image: url("../assets/images/tiles/town/counter.png");
}

.place-board .tile-throne {
  background-image: url("../assets/images/tiles/town/throne.png");
}

.place-board .tile-statue {
  background-image: url("../assets/images/tiles/town/statue.png");
}

.map-depth-layer {
  position: absolute;
  z-index: 9;
  pointer-events: none;
}

.map-depth-grass {
  left: -12%;
  right: -12%;
  bottom: -3%;
  height: 42%;
  background:
    linear-gradient(64deg, transparent 0 34%, rgba(45, 113, 44, 0.96) 35% 46%, transparent 47%),
    linear-gradient(108deg, transparent 0 40%, rgba(70, 145, 58, 0.96) 41% 52%, transparent 53%),
    linear-gradient(82deg, transparent 0 56%, rgba(30, 94, 39, 0.96) 57% 66%, transparent 67%),
    repeating-linear-gradient(96deg, transparent 0 9px, rgba(78, 150, 55, 0.9) 10px 13px, transparent 14px 21px);
  filter: drop-shadow(0 -1px 0 rgba(13, 63, 24, 0.35));
}

.map-depth-forest {
  left: -18%;
  right: -18%;
  bottom: -6%;
  height: 64%;
  border-radius: 46% 54% 14% 14% / 54% 54% 12% 12%;
  background:
    radial-gradient(circle at 18% 48%, rgba(39, 96, 42, 0.96) 0 20%, transparent 21%),
    radial-gradient(circle at 42% 34%, rgba(52, 128, 54, 0.98) 0 26%, transparent 27%),
    radial-gradient(circle at 72% 48%, rgba(32, 84, 42, 0.98) 0 26%, transparent 27%),
    linear-gradient(180deg, transparent 0 46%, rgba(64, 45, 30, 0.94) 47% 72%, transparent 73%);
  filter: drop-shadow(0 -2px 0 rgba(8, 43, 21, 0.45));
}

.map-depth-rock,
.map-depth-rubble {
  right: -4%;
  bottom: -2%;
  left: -4%;
  height: 48%;
  background:
    radial-gradient(circle at 24% 58%, rgba(65, 63, 57, 0.98) 0 16%, transparent 17%),
    radial-gradient(circle at 52% 43%, rgba(118, 113, 104, 0.98) 0 19%, transparent 20%),
    radial-gradient(circle at 74% 67%, rgba(54, 53, 49, 0.98) 0 15%, transparent 16%);
}

.map-depth-cave-mouth {
  inset: 8% 7% -4%;
  border-radius: 46% 46% 12% 12%;
  background:
    radial-gradient(ellipse at 50% 62%, rgba(7, 11, 14, 0.96) 0 35%, transparent 36%),
    linear-gradient(135deg, rgba(67, 73, 72, 0.95) 0 21%, transparent 22% 78%, rgba(53, 58, 58, 0.95) 79%);
  opacity: 0.9;
}

.map-depth-port {
  left: -7%;
  right: -7%;
  bottom: -5%;
  height: 76%;
  background:
    linear-gradient(90deg, transparent 0 16%, rgba(124, 82, 50, 0.98) 17% 35%, transparent 36% 64%, rgba(124, 82, 50, 0.98) 65% 83%, transparent 84%),
    linear-gradient(180deg, transparent 0 12%, rgba(242, 238, 219, 0.98) 13% 64%, rgba(199, 77, 72, 0.98) 65% 77%, transparent 78%),
    linear-gradient(180deg, transparent 0 66%, rgba(133, 91, 58, 0.98) 67% 82%, transparent 83%);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3));
}

.map-depth-garden {
  left: -10%;
  right: -10%;
  bottom: -3%;
  height: 48%;
  background:
    radial-gradient(circle at 20% 54%, rgba(255, 218, 100, 0.98) 0 9%, transparent 10%),
    radial-gradient(circle at 47% 42%, rgba(241, 124, 117, 0.96) 0 10%, transparent 11%),
    radial-gradient(circle at 73% 58%, rgba(255, 245, 152, 0.92) 0 8%, transparent 9%),
    repeating-linear-gradient(78deg, transparent 0 8px, rgba(53, 126, 50, 0.96) 9px 12px, transparent 13px 20px);
  filter: drop-shadow(0 -1px 0 rgba(22, 69, 25, 0.3));
}

.map-depth-fountain {
  inset: 38% 8% -5%;
  border-radius: 50% 50% 20% 20%;
  background:
    radial-gradient(ellipse at 50% 24%, rgba(154, 221, 239, 0.92) 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 62%, rgba(218, 217, 201, 0.98) 0 49%, rgba(114, 112, 103, 0.98) 50% 64%, transparent 65%);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.16);
}

.map-depth-sign {
  left: 23%;
  right: 23%;
  bottom: -2%;
  height: 58%;
  background:
    linear-gradient(90deg, transparent 0 42%, rgba(91, 59, 39, 0.98) 43% 57%, transparent 58%),
    linear-gradient(180deg, rgba(214, 174, 95, 0.98) 0 45%, transparent 46%);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3));
}

.map-depth-counter,
.map-depth-bed,
.map-depth-throne {
  left: -5%;
  right: -5%;
  bottom: -2%;
  height: 50%;
  border-radius: 5px 5px 2px 2px;
  background:
    linear-gradient(180deg, rgba(225, 184, 100, 0.98) 0 28%, rgba(114, 73, 44, 0.99) 29% 100%);
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.16);
}

.map-depth-bed {
  background:
    linear-gradient(90deg, rgba(248, 244, 220, 0.98) 0 34%, rgba(112, 148, 190, 0.98) 35% 100%);
}

.map-depth-throne {
  height: 62%;
  background:
    linear-gradient(90deg, rgba(210, 177, 63, 0.98) 0 16%, rgba(176, 54, 64, 0.99) 17% 83%, rgba(210, 177, 63, 0.98) 84%),
    rgba(99, 58, 38, 0.98);
}

.map-depth-statue {
  left: 10%;
  right: 10%;
  bottom: -3%;
  height: 80%;
  background:
    radial-gradient(circle at 50% 18%, rgba(218, 216, 205, 0.98) 0 14%, transparent 15%),
    linear-gradient(180deg, transparent 0 22%, rgba(187, 185, 174, 0.98) 23% 64%, rgba(124, 123, 115, 0.98) 65% 86%, transparent 87%);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.32));
}

.map-depth-cave-pool {
  left: 5%;
  right: 5%;
  bottom: -3%;
  height: 46%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(116, 200, 219, 0.78) 0 42%, rgba(33, 82, 94, 0.9) 43% 68%, transparent 69%);
  filter: drop-shadow(0 -1px 0 rgba(113, 221, 245, 0.24));
}

.map-depth-glow-stone {
  left: 23%;
  right: 23%;
  bottom: -2%;
  height: 66%;
  background:
    radial-gradient(circle at 50% 26%, rgba(199, 249, 255, 0.96) 0 18%, rgba(70, 174, 199, 0.82) 19% 38%, transparent 39%),
    linear-gradient(135deg, transparent 0 36%, rgba(79, 83, 78, 0.95) 37% 72%, transparent 73%);
  filter:
    drop-shadow(0 0 8px rgba(139, 236, 255, 0.52))
    drop-shadow(0 2px 0 rgba(0, 0, 0, 0.28));
}

.map-depth-lighthouse {
  left: 22%;
  right: 22%;
  bottom: -2%;
  height: 92%;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 241, 138, 0.98) 0 9%, transparent 10%),
    linear-gradient(180deg, rgba(201, 79, 74, 0.98) 0 14%, transparent 15% 36%, rgba(201, 79, 74, 0.98) 37% 45%, transparent 46%),
    linear-gradient(90deg, transparent 0 22%, rgba(243, 240, 223, 0.98) 23% 77%, transparent 78%);
  filter:
    drop-shadow(0 0 8px rgba(255, 235, 128, 0.36))
    drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3));
}

.map-depth-ship {
  left: -18%;
  right: -18%;
  bottom: -4%;
  height: 70%;
  background:
    linear-gradient(135deg, transparent 0 47%, rgba(240, 231, 200, 0.98) 48% 68%, transparent 69%),
    linear-gradient(90deg, transparent 0 48%, rgba(77, 52, 39, 0.98) 49% 53%, transparent 54%),
    linear-gradient(180deg, transparent 0 58%, rgba(115, 74, 48, 0.98) 59% 78%, transparent 79%);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.28));
}

.map-label {
  position: absolute;
  inset: auto 2px 2px;
  z-index: 12;
  display: grid;
  place-items: center;
  min-height: 14px;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.78);
  color: #172320;
  font-size: 10px;
  font-weight: 900;
}

.place-board .map-label {
  inset: auto 2px 2px auto;
  min-width: 12px;
  min-height: 11px;
  padding: 0 2px;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(18, 22, 20, 0.68);
  color: #fff1b8;
  font-size: 8px;
  line-height: 1;
}

.pixel-sprite {
  --tint: #316ed1;
  --shadow-tint: #173d82;
  --trim: #f2c94c;
  --skin: #f2d2a0;
  --hair: #4b2b24;
  --cape: #b83e46;
  --weapon: #dfe8ec;
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 5;
  width: 50%;
  height: 70%;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  color: var(--tint);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.32));
  animation: sprite-walk 720ms steps(2, end) infinite;
}

.field-character-sprite {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 6;
  width: 132%;
  height: 132%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: end center;
  pointer-events: none;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.34));
}

.field-character-sprite img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: auto;
}

.place-board .field-character-sprite {
  top: 42%;
  width: 118%;
  height: 118%;
}

.map-board:not(.place-board) .pixel-sprite:not(.portrait-sprite) {
  width: 200%;
  height: 280%;
  top: 18%;
}

.place-board .pixel-sprite:not(.portrait-sprite) {
  width: 118%;
  height: 155%;
  top: 34%;
}

.pixel-sprite::before,
.pixel-sprite::after,
.sprite-cape,
.sprite-aura,
.sprite-weapon,
.sprite-face,
.sprite-arm,
.sprite-leg {
  content: "";
  position: absolute;
  display: block;
}

.pixel-sprite::before {
  left: 28%;
  top: 0;
  z-index: 4;
  width: 44%;
  height: 26%;
  border: 2px solid #13201d;
  border-radius: 4px 4px 3px 3px;
  background:
    linear-gradient(180deg, var(--hair) 0 28%, var(--skin) 29% 100%);
  box-shadow:
    inset 4px 0 0 rgba(255, 255, 255, 0.18),
    0 -5px 0 -2px var(--trim);
}

.pixel-sprite::after {
  left: 24%;
  top: 27%;
  z-index: 2;
  width: 52%;
  height: 45%;
  border: 2px solid #13201d;
  border-radius: 5px 5px 2px 2px;
  background:
    linear-gradient(90deg, transparent 0 14%, var(--trim) 15% 24%, transparent 25% 75%, var(--trim) 76% 85%, transparent 86%),
    linear-gradient(180deg, var(--tint) 0 60%, var(--shadow-tint) 61% 100%);
  box-shadow:
    inset 0 9px 0 rgba(255, 255, 255, 0.12);
}

.sprite-cape {
  left: 13%;
  top: 30%;
  z-index: 1;
  width: 74%;
  height: 55%;
  border: 2px solid #13201d;
  border-radius: 5px 5px 10px 10px;
  background: var(--cape);
  transform-origin: 50% 0;
  animation: cape-sway 900ms steps(2, end) infinite;
}

.sprite-aura {
  left: 19%;
  top: 8%;
  z-index: 0;
  width: 62%;
  height: 72%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 237, 132, 0.52) 0 18%, transparent 48%);
  opacity: 0;
}

.sprite-face {
  left: 38%;
  top: 12%;
  z-index: 6;
  width: 5%;
  height: 5%;
  border-radius: 50%;
  background: #13201d;
  box-shadow:
    18px 0 0 #13201d,
    8px 11px 0 -2px rgba(100, 48, 34, 0.75);
}

.sprite-weapon {
  right: -9%;
  top: 22%;
  z-index: 5;
  width: 10%;
  height: 54%;
  border: 1px solid #13201d;
  border-radius: 2px;
  background:
    linear-gradient(180deg, #f7fbff 0 64%, #8b633e 65% 100%);
  transform: rotate(24deg);
  transform-origin: 50% 80%;
}

.sprite-arm {
  top: 34%;
  z-index: 3;
  width: 12%;
  height: 34%;
  border: 2px solid #13201d;
  border-radius: 8px;
  background:
    linear-gradient(180deg, var(--tint) 0 62%, var(--skin) 63% 100%);
  transform-origin: 50% 8%;
  animation: arm-swing 720ms steps(2, end) infinite;
}

.sprite-arm-left {
  left: 12%;
  transform: rotate(12deg);
}

.sprite-arm-right {
  right: 12%;
  transform: rotate(-12deg);
  animation-delay: 360ms;
}

.sprite-leg {
  top: 70%;
  z-index: 1;
  width: 15%;
  height: 26%;
  border: 2px solid #13201d;
  border-radius: 4px;
  background: #1d2523;
  transform-origin: 50% 0;
  animation: leg-step 720ms steps(2, end) infinite;
}

.sprite-leg-left {
  left: 29%;
  transform: rotate(-8deg);
}

.sprite-leg-right {
  right: 29%;
  transform: rotate(8deg);
  animation-delay: 360ms;
}

.facing-left .sprite-weapon {
  left: -8%;
  right: auto;
  transform: rotate(-32deg);
}

.facing-right .sprite-weapon {
  right: -8%;
  transform: rotate(32deg);
}

.facing-up .sprite-weapon {
  right: -1%;
  top: 8%;
  transform: rotate(4deg);
}

.pixel-sprite.sprite-0,
.pixel-sprite.is-leader {
  width: 56%;
  height: 76%;
}

.is-leader .sprite-aura {
  opacity: 1;
  animation: hero-aura 1200ms ease-in-out infinite;
}

.pixel-sprite.sprite-0 {
  transform: translate(-50%, -54%);
}

.pixel-sprite.sprite-1 {
  transform: translate(-34%, -47%) scale(0.88);
}

.pixel-sprite.sprite-2 {
  transform: translate(-66%, -44%) scale(0.82);
}

.pixel-sprite.sprite-3 {
  transform: translate(-50%, -35%) scale(0.78);
}

.portrait-sprite {
  left: 50%;
  top: 49%;
  width: 42px;
  height: 54px;
  transform: translate(-50%, -50%) scale(1);
}

.member-portrait .pixel-sprite.sprite-1,
.member-portrait .pixel-sprite.sprite-2,
.member-portrait .pixel-sprite.sprite-3 {
  transform: translate(-50%, -50%) scale(0.92);
}

.job-hero {
  --tint: #2d64c8;
  --shadow-tint: #183f91;
  --trim: #f1c84d;
  --cape: #c43e4a;
  --hair: #593018;
}

.pixel-sprite.job-hero::before {
  box-shadow:
    inset 4px 0 0 rgba(255, 255, 255, 0.18),
    0 -7px 0 -3px #f1c84d,
    0 -10px 0 -6px #ffffff;
}

.job-warrior {
  --tint: #687780;
  --shadow-tint: #3c4a50;
  --trim: #c9d0d4;
  --cape: #344c5a;
  --hair: #2f2521;
}

.job-warrior .sprite-weapon {
  width: 13%;
  height: 48%;
  background:
    linear-gradient(180deg, #cfd8dc 0 42%, #5e6468 43% 60%, #8b633e 61% 100%);
}

.job-fighter {
  --tint: #d15c3a;
  --shadow-tint: #923922;
  --trim: #f6d18a;
  --cape: transparent;
  --hair: #202120;
}

.job-fighter .sprite-cape,
.job-fighter .sprite-weapon {
  display: none;
}

.job-mage {
  --tint: #6741a4;
  --shadow-tint: #3d2869;
  --trim: #8bd0ee;
  --cape: #2a254a;
  --hair: #f0e6bd;
}

.job-mage .sprite-weapon,
.job-priest .sprite-weapon,
.job-sage .sprite-weapon {
  width: 8%;
  height: 63%;
  background:
    radial-gradient(circle at 50% 8%, #fff1a1 0 16%, transparent 17%),
    linear-gradient(180deg, #7e5a36 0 100%);
}

.job-priest {
  --tint: #f3f1df;
  --shadow-tint: #b8c8c1;
  --trim: #4f9c8c;
  --cape: #5f8eb2;
  --hair: #5c4332;
}

.job-thief {
  --tint: #2f716d;
  --shadow-tint: #1c4645;
  --trim: #e3d06a;
  --cape: #253739;
  --hair: #29221d;
}

.job-thief .sprite-weapon {
  height: 34%;
  top: 38%;
}

.job-merchant {
  --tint: #b77732;
  --shadow-tint: #765028;
  --trim: #f4d37a;
  --cape: #3f6a50;
  --hair: #6b3c22;
}

.job-merchant .sprite-weapon {
  width: 20%;
  height: 24%;
  top: 46%;
  border-radius: 4px;
  background: #cfa15f;
}

.job-performer {
  --tint: #b63f82;
  --shadow-tint: #712653;
  --trim: #f5d15d;
  --cape: #5542a1;
  --hair: #253653;
}

.job-performer .sprite-weapon {
  width: 18%;
  height: 18%;
  top: 48%;
  border-radius: 50%;
  background: #f3d15d;
}

.job-sage {
  --tint: #4d5bb9;
  --shadow-tint: #303974;
  --trim: #efcf70;
  --cape: #722f86;
  --hair: #e7dfc2;
}

.job-tamer,
.job-monster-scholar {
  --tint: #3f8f72;
  --shadow-tint: #255742;
  --trim: #9be0d0;
  --cape: #63563a;
  --hair: #343029;
}

.job-tamer .sprite-weapon,
.job-monster-scholar .sprite-weapon {
  width: 18%;
  height: 22%;
  top: 42%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #baf4df 0 35%, #416b59 36% 100%);
}

.place-npc {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 5;
  width: 118%;
  height: 118%;
  transform: translate(-50%, -50%);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.32));
}

.place-npc::before,
.place-npc::after {
  content: none;
}

.npc-child {
  background-image: url("../assets/images/npcs/child.png");
}

.npc-elder {
  background-image: url("../assets/images/npcs/elder.png");
}

.npc-merchant {
  background-image: url("../assets/images/npcs/merchant.png");
}

.npc-guard {
  background-image: url("../assets/images/npcs/guard.png");
}

.npc-ruler {
  background-image: url("../assets/images/npcs/ruler.png");
}

.npc-innkeeper {
  background-image: url("../assets/images/npcs/innkeeper.png");
}

.npc-traveler {
  background-image: url("../assets/images/npcs/traveler.png");
}

.map-side {
  display: grid;
  gap: 10px;
}

.objective-card,
.tactic-note {
  display: grid;
  gap: 8px;
  border: 3px solid #1b2d36;
  border-radius: 8px;
  padding: 10px;
  background: #fffef6;
}

.objective-card h3,
.objective-card p,
.tactic-note strong,
.tactic-note span {
  margin: 0;
}

.objective-card strong {
  font-size: 17px;
}

.objective-card p,
.tactic-note span {
  color: var(--muted);
  line-height: 1.55;
}

.objective-meta,
.collection-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.collection-line {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.command-window {
  display: grid;
  gap: 10px;
  border: 3px solid #1b2d36;
  border-radius: 8px;
  padding: 10px;
  background: #fffef6;
}

.command-window summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
}

.command-window[open] summary {
  margin-bottom: 8px;
}

.command-window h3 {
  margin: 0;
}

.compact-buttons {
  gap: 8px;
}

.compact-buttons button {
  min-height: 36px;
  padding: 0 10px;
  font-size: 13px;
}

.status-details {
  border-top: 2px solid rgba(27, 45, 54, 0.22);
  padding-top: 8px;
}

.status-details summary {
  color: #2c433d;
  font-size: 13px;
}

.status-mini-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.status-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 6px;
  align-items: center;
  border: 1px solid #a8b2ad;
  border-radius: 6px;
  padding: 6px;
  background: #fbfcf8;
  color: #2e3936;
  font-size: 11px;
  font-weight: 800;
}

.status-mini strong {
  font-size: 12px;
}

.status-mini.is-down {
  opacity: 0.62;
}

.mini-meter {
  grid-column: span 2;
  height: 6px;
  overflow: hidden;
  border: 1px solid #263633;
  border-radius: 999px;
  background: #d9dedb;
}

.mini-meter i {
  display: block;
  height: 100%;
  background: var(--accent);
}

.mini-meter.mp i {
  background: var(--mana);
}

.dpad {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  grid-auto-rows: 40px;
  gap: 7px;
  justify-content: center;
  border: 3px solid #1b2d36;
  border-radius: 8px;
  padding: 9px;
  background: #e6edf4;
}

.dpad button {
  min-height: 40px;
  padding: 0;
  font-size: 18px;
}

.town-panel {
  overflow: hidden;
}

.town-art {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #75a9d6 0 45%, #8fc16b 46% 100%);
}

.town-art::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 74px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 18px, transparent 18px 36px),
    #746a5b;
}

.roof {
  position: absolute;
  bottom: 60px;
  width: 92px;
  height: 70px;
  border: 3px solid #263633;
  background: #f3dfaa;
}

.roof::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -34px;
  border-left: 56px solid transparent;
  border-right: 56px solid transparent;
  border-bottom: 36px solid #bc4f37;
}

.roof-a {
  left: 12%;
}

.roof-b {
  right: 14%;
  transform: scale(0.9);
}

.tower {
  position: absolute;
  left: 47%;
  bottom: 58px;
  width: 54px;
  height: 116px;
  border: 3px solid #263633;
  background: #d8d5c4;
}

.tower::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -34px;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 34px solid #5d79b7;
}

.flag {
  position: absolute;
  left: calc(47% + 52px);
  bottom: 174px;
  width: 42px;
  height: 22px;
  background: #f4f1d4;
  border: 2px solid #263633;
}

.flag::before {
  content: "";
  position: absolute;
  left: -6px;
  top: -4px;
  width: 4px;
  height: 60px;
  background: #263633;
}

.guild-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.summary-card,
.quest-row,
.shop-card,
.book-card {
  border: 2px solid #a8b2ad;
  border-radius: 8px;
  padding: 12px;
  background: #fbfcf8;
}

.story-card {
  display: grid;
  gap: 6px;
  border: 2px solid #74867f;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 14px;
  background: #eef6f0;
  color: #243833;
}

.story-card h3,
.story-card p {
  margin: 0;
}

.story-card h3 {
  font-size: 18px;
}

.story-card p,
.story-card strong {
  font-size: 13px;
  line-height: 1.55;
}

.story-label {
  color: #3e6256;
  font-size: 12px;
  font-weight: 900;
}

.compact-story {
  margin: 8px 0;
  padding: 8px;
}

.compact-story h3 {
  font-size: 14px;
}

.compact-story p,
.compact-story strong {
  font-size: 11px;
}

.summary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-weight: 800;
}

.quest-list,
.shop-grid,
.equip-grid,
.book-grid {
  display: grid;
  gap: 12px;
}

.quest-row,
.shop-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.quest-row p,
.shop-card p,
.book-card p {
  margin: 4px 0 0;
}

.quest-row.is-active {
  border-color: var(--gold);
  outline: 3px solid rgba(197, 138, 40, 0.18);
}

.quest-row.is-done {
  background: #eef6ef;
}

.shop-card-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.screen-command-scope button {
  position: relative;
}

.screen-command-scope button.is-command-selected {
  border-color: #ffe08a;
  outline: 2px solid rgba(255, 224, 138, 0.35);
  outline-offset: 2px;
}

.shop-scene-screen {
  min-height: 620px;
}

.shop-scene-backdrop {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border: 3px solid #d8e2dd;
  border-radius: 8px;
  background: #15100d;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.7);
}

.shop-scene-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62), transparent 38%, rgba(0, 0, 0, 0.34)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.42));
}

.shop-scene-merchant {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.shop-scene-merchant img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.shop-command-window,
.shop-resource-window,
.shop-dialogue-window {
  position: absolute;
  z-index: 2;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.74);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}

.shop-command-window {
  top: 22px;
  left: 22px;
  width: min(360px, 36vw);
  padding: 12px;
}

.shop-command-window h2 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 18px;
}

.shop-command-list {
  display: grid;
  gap: 5px;
  max-height: 395px;
  overflow-y: auto;
  padding-right: 4px;
}

.shop-command-list button {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 6px 8px 6px 28px;
  background: transparent;
  color: #fff;
  box-shadow: none;
  text-align: left;
}

.shop-command-list button:hover:not(:disabled),
.shop-command-list button:focus-visible:not(:disabled),
.shop-command-list button.is-command-selected {
  background: rgba(70, 88, 56, 0.78);
}

.shop-command-list button.is-command-selected::before,
.equipment-screen button.is-command-selected::before {
  content: "▶";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffe08a;
  font-weight: 900;
}

.shop-command-list button:disabled {
  color: rgba(255, 255, 255, 0.45);
}

.shop-buy-command {
  display: grid;
  gap: 2px;
}

.shop-buy-command strong,
.shop-buy-command span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.shop-buy-command span {
  font-size: 11px;
  opacity: 0.86;
}

.shop-resource-window {
  top: 22px;
  right: 22px;
  display: grid;
  gap: 6px;
  min-width: 210px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 800;
}

.shop-dialogue-window {
  right: 24px;
  bottom: 24px;
  left: min(360px, 34%);
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
}

.shop-dialogue-window p {
  margin: 0;
}

.equipment-screen .equipment-workbench {
  margin-top: 0;
}

.equipment-screen .button-row button {
  padding-left: 28px;
}

.equipment-screen .equip-hero-button,
.equipment-screen .equip-item-button {
  padding-left: 26px;
}

.equipment-screen .equip-slot-row button {
  padding-left: 24px;
}

.equip-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 10px 0 14px;
}

.equipment-workbench {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(280px, 1.15fr) minmax(260px, 1fr);
  gap: 14px;
  align-items: start;
  margin: 10px 0 14px;
}

.equip-hero-list,
.equip-item-list,
.equip-slot-list {
  display: grid;
  gap: 8px;
}

.equip-hero-button,
.equip-item-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 8px;
  text-align: left;
}

.equip-item-button {
  grid-template-columns: minmax(0, 1fr) auto;
}

.equip-hero-button.is-selected,
.equip-item-button.is-equipped {
  border-color: var(--gold);
  background: #fff8d9;
}

.mini-portrait {
  position: relative;
  display: block;
  width: 42px;
  height: 48px;
  overflow: hidden;
  border: 2px solid #263633;
  border-radius: 6px;
  background: #eef2ea;
}

.equip-character-panel {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  border: 2px solid #a8b2ad;
  border-radius: 8px;
  padding: 12px;
  background: #fbfcf8;
}

.equip-preview-portrait {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  border: 2px solid #263633;
  border-radius: 8px;
  background:
    linear-gradient(45deg, #f5f5f5 25%, transparent 25% 75%, #f5f5f5 75%),
    linear-gradient(45deg, #f5f5f5 25%, #ffffff 25% 75%, #f5f5f5 75%);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}

.equip-preview-portrait .character-portrait-image img {
  object-fit: contain;
  object-position: 50% 50%;
  transform: none;
}

.equip-character-info {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.equip-slot-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #d8dedb;
}

.equip-slot-row:last-child {
  border-bottom: 0;
}

.mini-button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.mini-button-grid button {
  min-height: 38px;
  padding: 0 8px;
  font-size: 13px;
}

.book-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.book-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.book-card:not(.is-seen) {
  opacity: 0.72;
}

.book-card h3 {
  margin: 0;
}

@keyframes water-flow {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 12px 12px;
  }
}

@keyframes shrine-pulse {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

@keyframes sprite-walk {
  0%,
  100% {
    margin-top: 0;
  }
  50% {
    margin-top: -4px;
  }
}

@keyframes cape-sway {
  0%,
  100% {
    transform: skewX(-3deg);
  }
  50% {
    transform: skewX(5deg);
  }
}

@keyframes arm-swing {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 3px;
  }
}

@keyframes leg-step {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -3px;
  }
}

@keyframes hero-aura {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile-water,
  .tile-shrine::after,
  .pixel-sprite,
  .sprite-cape,
  .sprite-arm,
  .sprite-leg,
  .is-leader .sprite-aura,
  .enemy-sprite-shell .monster-visual,
  .battle-party-actor.is-party-animated .battle-party-sprite-frame,
  .battle-party-actor.is-hero-male-animated .battle-party-sprite-frame {
    animation: none;
  }
}

@media (max-width: 900px) {
  .setup-grid,
  .game-grid,
  .battle-grid,
  .adventure-grid,
  .world-layout,
  .equipment-workbench {
    grid-template-columns: 1fr;
  }

  .map-board {
    max-width: 100%;
  }

  .map-board-3d,
  .world-panel .map-board-3d:not(.place-board),
  .place-board.map-board-3d {
    width: 100%;
    min-height: clamp(360px, 72vw, 560px);
  }

  .map-canvas-hud {
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: grid;
    gap: 8px;
  }

  .map-canvas-objective,
  .map-canvas-hud p {
    max-width: none;
    width: 100%;
  }

  .map-command-toggle {
    top: 16px;
    left: 16px;
  }

  .map-command-overlay {
    top: 56px;
    right: 16px;
    left: 16px;
    grid-template-columns: 1fr;
    width: auto;
    max-height: min(70vh, 560px);
    overflow: auto;
  }

  .shop-scene-backdrop {
    display: grid;
    gap: 12px;
    align-content: start;
    min-height: 760px;
    padding: 14px;
  }

  .shop-command-window,
  .shop-resource-window,
  .shop-dialogue-window {
    position: relative;
    inset: auto;
    width: auto;
    min-width: 0;
  }

  .shop-command-window {
    max-width: 390px;
  }

  .shop-dialogue-window {
    left: auto;
    right: auto;
    bottom: auto;
  }

  .shop-command-list {
    max-height: 330px;
  }

  .battle-stage {
    min-height: 1160px;
  }

  .battle-scene-hud {
    flex-direction: column;
  }

  .battle-resource-strip {
    max-width: 100%;
    justify-content: flex-start;
  }

  .battle-log-overlay {
    top: 180px;
    left: 12px;
    width: min(420px, 70%);
  }

  .battle-enemy-formation {
    top: 24%;
    right: 4%;
    left: 4%;
    height: 26%;
  }

  .battle-party-formation {
    right: 12%;
    bottom: 50%;
    left: 20%;
    height: 20%;
  }

  .battle-command-overlay {
    right: 12px;
    bottom: 300px;
    left: 12px;
    width: auto;
    max-height: 330px;
  }

  .battle-status-overlay {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
  }

  .battle-status-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .shell {
    width: min(100% - 16px, 1180px);
    padding-top: 10px;
  }

  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .button-row button,
  .command-row button,
  .result-actions button {
    width: 100%;
  }

  .summary-card,
  .quest-row,
  .shop-card,
  .book-card {
    grid-template-columns: 1fr;
  }

  .summary-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .shop-card-actions {
    justify-items: stretch;
  }

  .shop-scene-backdrop {
    min-height: 820px;
  }

  .shop-command-window {
    max-width: none;
  }

  .equip-character-panel {
    grid-template-columns: 1fr;
  }

  .equip-preview-portrait {
    min-height: 260px;
  }

  .equip-slot-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .equip-slot-row button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .battle-stage {
    display: grid;
    grid-template-areas:
      "hud"
      "log"
      "enemies"
      "party"
      "commands"
      "status";
    gap: 10px;
    min-height: 0;
    padding: 10px;
  }

  .battle-location-chip,
  .battle-resource-strip {
    width: 100%;
  }

  .battle-scene-hud {
    position: relative;
    grid-area: hud;
    inset: auto;
  }

  .battle-log-overlay {
    position: relative;
    grid-area: log;
    inset: auto;
    width: auto;
  }

  .battle-enemy-formation {
    position: relative;
    grid-area: enemies;
    inset: auto;
    height: 250px;
    gap: 3px;
  }

  .enemy-card {
    flex-basis: 32%;
  }

  .enemy-sprite-shell {
    height: 150px;
  }

  .enemy-nameplate {
    width: 100%;
    min-width: 0;
    padding: 4px;
  }

  .enemy-name-row strong {
    font-size: 11px;
  }

  .enemy-hp-line small {
    display: none;
  }

  .battle-party-formation {
    position: relative;
    grid-area: party;
    inset: auto;
    height: 160px;
  }

  .battle-party-actor {
    width: 82px;
    height: 140px;
  }

  .battle-party-name {
    font-size: 10px;
  }

  .battle-command-overlay {
    position: relative;
    grid-area: commands;
    inset: auto;
    width: auto;
    max-height: none;
    overflow: visible;
  }

  .command-menu-grid {
    grid-template-columns: 1fr;
  }

  .battle-command-overlay .skill-grid {
    max-height: 190px;
    overflow: auto;
  }

  .battle-status-overlay {
    position: relative;
    grid-area: status;
    inset: auto;
    width: auto;
  }

  .battle-status-list {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════
   M1: スマホ対応(仮想パッド+縦持ちレイアウト)
   ════════════════════════════════════════════════════════════ */

html {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── 仮想十字キー+OK/キャンセル ───────────────────────────── */

.touch-controls {
  display: none;
}

body.has-touch .touch-controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

body.has-touch {
  padding-bottom: calc(180px + env(safe-area-inset-bottom));
}

.tc-dpad {
  pointer-events: auto;
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(3, 56px);
  gap: 4px;
}

.tc-btn {
  min-height: 0;
  border: 2px solid rgba(247, 251, 248, 0.55);
  border-radius: 10px;
  background: rgba(13, 23, 27, 0.72);
  color: #f7fbf8;
  font-size: 19px;
  font-weight: 800;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  touch-action: none;
}

.tc-btn.is-pressed,
.tc-btn:active {
  background: rgba(28, 124, 98, 0.88);
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.tc-up { grid-area: 1 / 2; }
.tc-left { grid-area: 2 / 1; }
.tc-right { grid-area: 2 / 3; }
.tc-down { grid-area: 3 / 2; }

.tc-actions {
  pointer-events: auto;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 4px;
}

.tc-cancel {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  font-size: 20px;
}

.tc-ok {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  font-size: 20px;
  border-color: rgba(217, 193, 125, 0.85);
  background: rgba(28, 124, 98, 0.82);
}

.tc-ok.is-pressed,
.tc-ok:active {
  background: rgba(19, 89, 73, 0.95);
}

/* ── 縦持ちレイアウト ─────────────────────────────────────── */

@media (max-width: 840px) {
  body {
    min-height: 100dvh;
  }

  .shell {
    width: 100%;
    padding: 6px 8px 10px;
  }

  .site-header {
    margin-bottom: 8px;
    padding: 8px 12px;
  }

  .site-header h1 {
    font-size: 20px;
  }

  .kicker {
    font-size: 11px;
    margin-bottom: 2px;
  }

  .header-badge,
  .site-footer {
    display: none;
  }

  .app {
    gap: 10px;
  }

  .panel-header {
    padding: 10px 12px;
    flex-wrap: wrap;
  }

  .panel-body {
    padding: 10px;
  }

  button {
    min-height: 44px;
  }

  /* 多段グリッドをすべて1カラムへ */
  .setup-grid,
  .game-grid,
  .battle-grid,
  .adventure-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  /* 地図ボードを画面幅に合わせる(520px固定の縦寸法を解除) */
  .map-board {
    width: 100%;
  }

  .map-board-3d,
  .world-panel .map-board-3d:not(.place-board),
  .place-board.map-board-3d {
    width: 100%;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .map-canvas-hud {
    right: 8px;
    left: 8px;
    font-size: 12px;
  }

  /* マップコマンドを1カラムの全面オーバーレイへ */
  .map-command-overlay {
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    max-height: calc(100% - 16px);
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 戦闘画面: 高さを画面に収める */
  .battle-stage {
    min-height: min(78vh, 640px);
  }

  .battle-command-overlay {
    left: 8px;
    bottom: 8px;
    width: min(78%, 360px);
    max-height: 56%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .battle-resource-strip {
    display: none;
  }

  /* ボタン列は2列で指が届きやすく */
  .button-row button,
  .result-actions button {
    flex: 1 1 calc(50% - 10px);
  }
}

@media (max-width: 420px) {
  .tc-dpad {
    grid-template-columns: repeat(3, 50px);
    grid-template-rows: repeat(3, 50px);
  }

  .tc-cancel {
    width: 52px;
    height: 52px;
  }

  .tc-ok {
    width: 64px;
    height: 64px;
  }
}

/* ════════════════════════════════════════════════════════════
   タイトル画面とセーブスロットメニュー
   ════════════════════════════════════════════════════════════ */

.title-screen {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: min(76vh, 640px);
  align-content: center;
  padding: 28px 16px 34px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 18%, rgba(217, 193, 125, 0.35), transparent 46%),
    linear-gradient(180deg, #fdf9ec 0%, #f0e7cd 58%, #dfd1ab 100%);
  box-shadow: var(--shadow);
  cursor: pointer;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

.title-art {
  width: min(40vh, 280px);
  max-width: 72%;
  filter: drop-shadow(0 12px 16px rgba(20, 30, 28, 0.3));
}

.title-kicker {
  margin: 10px 0 0;
  color: #8a6b1f;
  font-weight: 800;
  letter-spacing: 0.35em;
}

.title-name {
  margin: 2px 0 0;
  font-size: clamp(36px, 9vw, 60px);
  line-height: 1.15;
  color: #1d2b27;
  text-shadow: 0 2px 0 #fff, 0 5px 0 rgba(20, 30, 28, 0.16);
}

.title-prompt {
  margin: 16px 0 0;
  font-weight: 800;
  color: #56441a;
  animation: title-blink 1.5s step-end infinite;
}

@keyframes title-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.title-menu-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: min(76vh, 640px);
  padding: 32px 16px;
  border: 3px solid #000;
  border-radius: 8px;
  background: #070c0e;
  color: #f7fbf8;
  text-align: center;
}

.title-menu-heading {
  margin: 0 0 10px;
  color: #d9c17d;
  font-size: 26px;
  letter-spacing: 0.2em;
}

.title-menu-caption {
  margin: 0;
  color: #cfdcd6;
  font-size: 14px;
}

.title-menu-list {
  display: grid;
  gap: 12px;
  width: min(420px, 100%);
}

.title-menu-button {
  min-height: 54px;
  border: 2px solid rgba(247, 251, 248, 0.75);
  border-radius: 8px;
  background: #101b20;
  color: #f7fbf8;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}

.title-menu-button:hover:not(:disabled),
.title-menu-button:focus-visible:not(:disabled),
.title-menu-button.is-command-selected {
  background: var(--accent);
  border-color: #d9c17d;
  color: #ffffff;
}

.title-menu-button:disabled {
  opacity: 0.35;
}

.title-slot-button {
  display: grid;
  gap: 2px;
  justify-items: start;
  text-align: left;
  padding: 8px 16px;
}

.title-slot-button small {
  color: #b8c8c2;
  font-size: 12px;
}

.title-slot-button.is-command-selected small,
.title-slot-button:hover:not(:disabled) small {
  color: #eef6f1;
}

.title-menu-back {
  margin-top: 4px;
}

.title-menu-help {
  margin: 4px 0 0;
  color: #93a6a0;
  font-size: 12px;
}

/* ════════════════════════════════════════════════════════════
   M1.5: UI刷新(パッド重なり解消/メッセージ窓/コマンド改善/つよさ画面)
   ════════════════════════════════════════════════════════════ */

/* ── メッセージウィンドウ(DQ風) ── */

.map-message-window {
  min-height: 58px;
  max-height: 92px;
  overflow-y: auto;
  margin-top: 8px;
  padding: 8px 12px;
  border: 3px solid #f7fbf8;
  border-radius: 6px;
  box-shadow: 0 0 0 2px #0a1113, 0 4px 0 rgba(0, 0, 0, 0.35);
  background: rgba(8, 14, 16, 0.94);
  color: #f7fbf8;
  font-size: 13px;
  line-height: 1.55;
}

.map-message-window p {
  margin: 0 0 2px;
}

.map-message-window p:not(:last-child) {
  opacity: 0.55;
}

/* HUDは目的チップのみ・左上に固定 */
.map-canvas-hud {
  left: 10px;
  top: 10px;
  right: auto;
  bottom: auto;
  max-width: 75%;
}

/* ── つよさ画面 ── */

.status-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 12px;
}

.status-card {
  display: grid;
  gap: 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcf8;
}

.status-card.is-down {
  opacity: 0.55;
}

.status-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-card-header strong {
  display: block;
  font-size: 18px;
}

.status-card-header span {
  color: var(--muted);
  font-size: 13px;
}

.status-card-sprite {
  transform: scale(1.15);
  transform-origin: center;
}

.status-card-meters {
  display: grid;
  gap: 6px;
}

.status-meter-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.status-meter {
  display: block;
  height: 12px;
  border: 1px solid #56605d;
  border-radius: 999px;
  background: #e2e8e2;
  overflow: hidden;
}

.status-meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2fa37b, #1c7c62);
}

.status-meter.mp i {
  background: linear-gradient(90deg, #5d8ed1, #315f9c);
}

.status-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.status-stats div {
  display: grid;
  gap: 2px;
  border: 1px solid #d7ded7;
  border-radius: 6px;
  padding: 6px 4px;
  text-align: center;
  background: #f2f6f0;
}

.status-stats dt {
  color: var(--muted);
  font-size: 11px;
}

.status-stats dd {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}

.status-card-section h4 {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--accent-strong);
}

.status-card-section p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.screen-actions {
  margin-top: 14px;
}

/* ── 仮想パッド改良: 専用バー化(コンテンツと重ねない) ── */

body.has-touch .touch-controls {
  align-items: center;
  gap: 14px;
  padding: 10px 14px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(9, 15, 17, 0.94), rgba(9, 15, 17, 0.99));
  border-top: 2px solid rgba(217, 193, 125, 0.55);
}

body.has-touch {
  padding-bottom: calc(152px + env(safe-area-inset-bottom));
}

.tc-dpad {
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(3, 48px);
  gap: 3px;
}

.tc-btn {
  border-radius: 9px;
  font-size: 17px;
}

.tc-cancel {
  width: 54px;
  height: 54px;
}

.tc-ok {
  width: 66px;
  height: 66px;
}

/* ── スマホレイアウト刷新 ── */

@media (max-width: 840px) {
  .site-header {
    display: none;
  }

  .shell {
    padding-top: 4px;
  }

  /* マップ画面: ヘッダー説明文を畳んで縦を節約 */
  .world-panel .compact-header .small-text {
    display: none;
  }

  .world-panel .compact-header h2 {
    font-size: 16px;
  }

  .world-panel .compact-header {
    padding: 6px 10px;
  }

  .world-panel .resource-line .pill {
    font-size: 11px;
    padding: 2px 8px;
  }

  .map-message-window {
    font-size: 14px;
    min-height: 66px;
  }

  /* コマンド: 盤面全体を覆うDQ風メニュー */
  .map-command-overlay {
    position: absolute;
    inset: 4px;
    width: auto;
    max-height: none;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 10px;
    padding: 10px;
    border: 3px solid #f7fbf8;
    border-radius: 8px;
    background: rgba(8, 14, 16, 0.96);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 30;
  }

  .map-command-overlay .map-command-help {
    display: none;
  }

  .map-command-overlay .map-command-panel {
    border: 0;
    padding: 0;
    background: transparent;
    color: #f7fbf8;
    box-shadow: none;
  }

  .map-command-overlay .map-command-panel h3 {
    margin: 0 0 6px;
    color: #d9c17d;
    font-size: 13px;
  }

  .map-command-overlay .map-party-command-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .map-command-overlay .map-party-command-member {
    color: #f7fbf8;
    font-size: 11px;
    text-align: center;
  }

  .map-command-overlay .map-command-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .map-command-overlay .map-command-list button {
    min-height: 46px;
    border-color: rgba(247, 251, 248, 0.7);
    background: #101b20;
    color: #f7fbf8;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  }

  .map-command-overlay .map-command-list button:disabled {
    opacity: 0.32;
  }

  .map-command-overlay .map-command-list button.is-command-selected,
  .map-command-overlay .map-command-list button:focus-visible:not(:disabled) {
    background: var(--accent);
    border-color: #d9c17d;
    color: #ffffff;
  }

  /* 戦闘画面: パッドに隠れない高さへ(キャラ・敵のサイズは不変) */
  .battle-stage {
    min-height: calc(100dvh - 230px);
  }

  .battle-command-overlay {
    left: 6px;
    right: 6px;
    bottom: 6px;
    width: auto;
    max-height: 52%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .battle-status-overlay {
    transform: scale(0.82);
    transform-origin: top right;
  }

  /* つよさ画面 */
  .status-card-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .status-stats dd {
    font-size: 16px;
  }
}

/* ════════════════════════════════════════════════════════════
   M1.6: 戦闘メッセージDQ風+ダメージポップ+歩行スムーズ化対応
   ════════════════════════════════════════════════════════════ */

/* 戦闘シーン: オーバーレイの基準をシーン全体に */
.battle-scene {
  position: relative;
}

/* 戦闘メッセージ帯(DQ風・画面下中央) */
.battle-log-overlay {
  top: auto;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, 58%);
  z-index: 12;
}

.battle-message-window {
  border: 3px solid #f7fbf8;
  border-radius: 6px;
  box-shadow: 0 0 0 2px #0a1113, 0 4px 0 rgba(0, 0, 0, 0.4);
  background: rgba(8, 14, 16, 0.92);
  color: #ffffff;
  padding: 10px 16px;
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
}

.battle-message-window p {
  margin: 0;
}

.battle-message-window .is-prev {
  opacity: 0.5;
  font-size: 13px;
}

/* ダメージ/回復ポップ(頭上に -10 / +8) */
/* 注意: .battle-party-actor は元々 absolute 配置のため position を触らない */
.enemy-sprite-shell {
  position: relative;
}

.battle-pop {
  position: absolute;
  left: 50%;
  top: -4px;
  z-index: 40;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 0 2px 0 #000000, 0 0 8px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  animation: battle-pop-float 0.8s ease-out forwards;
}

.pop-damage {
  color: #ffe1e1;
}

.pop-heal {
  color: #c2f6cf;
}

@keyframes battle-pop-float {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.7);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1.18);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -40px) scale(1);
  }
}

/* 地図メッセージ窓: 最新行を強調 */
.map-message-window p:last-child {
  font-size: 15px;
  font-weight: 700;
}

/* ── スマホ: 戦闘を縦に流す(ステージ→メッセージ→コマンド) ── */

@media (max-width: 840px) {
  .battle-scene {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .battle-stage {
    min-height: min(48vh, 430px);
  }

  .battle-log-overlay {
    position: static;
    transform: none;
    width: 100%;
  }

  .battle-message-window {
    min-height: 56px;
    font-size: 15px;
  }

  .battle-command-overlay {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
  }

  .battle-pop {
    font-size: 22px;
  }
}

/* ════════════════════════════════════════════════════════════
   M1.7: 全画面固定レイアウト(スクロール禁止・DQ7 3DS品質目標)
   後段定義のためこのセクションが最終的に優先される。
   ════════════════════════════════════════════════════════════ */

:root {
  --pad-h: 0px;
  --battle-msg-h: 92px;
}

body.has-touch {
  --pad-h: calc(150px + env(safe-area-inset-bottom));
  padding-bottom: 0; /* 固定レイアウトに移行したため予約余白は廃止 */
}

/* タイトル/メニュー/パーティ作成ではパッドを出さない(タップで完結) */
body[data-screen="title"] .touch-controls,
body[data-screen="titleMenu"] .touch-controls {
  display: none !important;
}

/* マップ・戦闘中はページスクロールを完全に止める */
body[data-screen="map"],
body[data-screen="place"],
body[data-screen="battle"] {
  overflow: hidden;
}

/* ── 戦闘: 全画面固定(PC・スマホ共通) ───────────────────── */

.battle-scene {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--pad-h);
  z-index: 60;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 0;
}

.battle-scene .battle-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

/* メッセージ帯: 画面最下部に常設(スクロール不要で必ず見える) */
.battle-scene .battle-log-overlay {
  position: static;
  transform: none;
  width: auto;
  margin: 0;
  z-index: 70;
}

.battle-scene .battle-message-window {
  min-height: var(--battle-msg-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
}

/* コマンド窓: 左下のオーバーレイ(メッセージ帯の上) */
.battle-scene .battle-command-overlay {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: min(340px, 64%);
  max-height: min(46vh, 330px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 65;
}

/* パーティHP: 右上の縦カード(DQ風) */
.battle-scene .battle-status-overlay {
  top: 8px;
  right: 8px;
  bottom: auto;
  left: auto;
  width: 148px;
  padding: 6px;
  font-size: 11px;
  transform: none;
}

@media (max-width: 840px) {
  .battle-scene .battle-command-overlay {
    width: min(300px, 70%);
    font-size: 13px;
  }

  .battle-scene .battle-command-overlay button {
    min-height: 40px;
  }

  .battle-scene .battle-status-overlay {
    width: 124px;
    font-size: 10px;
  }

  .battle-scene .battle-message-window {
    font-size: 15px;
  }

  /* 敵と味方の配置をスマホ縦画面向けに少し広げる(サイズは不変) */
  .battle-enemy-formation {
    left: 4%;
    right: 4%;
    top: 12%;
  }

  .battle-party-formation {
    left: 30%;
    right: 6%;
    bottom: 26%;
  }
}

/* ── マップ/施設内: スマホは全画面固定 ───────────────────── */

@media (max-width: 840px) {
  body[data-screen="map"] .world-panel,
  body[data-screen="place"] .world-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--pad-h);
    z-index: 40;
    display: flex;
    flex-direction: column;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-screen="map"] .world-panel > .panel-header,
  body[data-screen="place"] .world-panel > .panel-header {
    flex: 0 0 auto;
    border-radius: 0;
  }

  body[data-screen="map"] .world-panel > .panel-body,
  body[data-screen="place"] .world-panel > .panel-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 6px;
    overflow: hidden;
  }

  body[data-screen="map"] .map-board-3d,
  body[data-screen="place"] .map-board-3d {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 3 / 2;
    min-height: 0;
  }

  /* メッセージ窓: 残り空間を全部使う(切れない・読める) */
  body[data-screen="map"] .map-message-window,
  body[data-screen="place"] .map-message-window {
    flex: 1 1 auto;
    min-height: 64px;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.6;
  }

  body[data-screen="map"] .map-message-window p,
  body[data-screen="place"] .map-message-window p {
    margin: 0 0 4px;
  }
}

/* ════════════════════════════════════════════════════════════
   M1.8: 実画面確認に基づく微修正
   ════════════════════════════════════════════════════════════ */

/* 戦闘中の資源帯(所持金等)は非表示 — 右上HPカードと重なるため */
.battle-scene .battle-resource-strip {
  display: none;
}

/* 右上HPカード: はみ出し防止 */
.battle-scene .battle-status-overlay {
  max-height: calc(100% - 16px);
  overflow-y: auto;
}

/* コマンド窓: 見切れ防止+コンパクト化 */
.battle-scene .battle-command-overlay {
  max-height: calc(100% - 16px);
}

.battle-scene .battle-command-overlay .command-panel {
  padding: 8px;
  gap: 6px;
}

.battle-scene .battle-command-overlay button {
  min-height: 40px;
  font-size: 13px;
}

/* マップ: コマンドボタンを右上へ(目的チップと重ねない) */
.map-command-toggle {
  left: auto;
  right: 10px;
  top: 10px;
}

/* ゲーム中はサイトヘッダーを出さない(全幅・全画面) */
body[data-screen="map"] .site-header,
body[data-screen="place"] .site-header,
body[data-screen="battle"] .site-header,
body[data-screen="map"] .site-footer,
body[data-screen="place"] .site-footer,
body[data-screen="battle"] .site-footer {
  display: none;
}

/* マップ/施設の全画面固定をPCにも適用(スクロール撤廃) */
body[data-screen="map"] .world-panel,
body[data-screen="place"] .world-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--pad-h);
  z-index: 40;
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body[data-screen="map"] .world-panel > .panel-header,
body[data-screen="place"] .world-panel > .panel-header {
  flex: 0 0 auto;
  border-radius: 0;
  padding: 6px 12px;
}

body[data-screen="map"] .world-panel > .panel-body,
body[data-screen="place"] .world-panel > .panel-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 6px;
  overflow: hidden;
}

/* 盤面: 縦に収まる範囲で3:2を保ち中央寄せ(歪ませない) */
body[data-screen="map"] .map-board-3d,
body[data-screen="place"] .map-board-3d {
  flex: 0 0 auto;
  aspect-ratio: 3 / 2;
  width: min(100%, calc((100dvh - var(--pad-h) - 170px) * 1.5));
  min-height: 0;
  margin: 0 auto;
}

body[data-screen="map"] .map-message-window,
body[data-screen="place"] .map-message-window {
  flex: 1 1 auto;
  min-height: 56px;
  max-height: none;
  overflow-y: auto;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.6;
}

/* 盤面サイズ指定の優先度修正(旧ルールに勝つ) */
body[data-screen="map"] .world-panel .map-board-3d:not(.place-board),
body[data-screen="place"] .world-panel .map-board-3d:not(.place-board),
body[data-screen="map"] .world-panel .place-board.map-board-3d,
body[data-screen="place"] .world-panel .place-board.map-board-3d,
body[data-screen="map"] .world-panel .map-board-3d,
body[data-screen="place"] .world-panel .map-board-3d {
  flex: 0 0 auto;
  aspect-ratio: 3 / 2;
  width: min(100%, calc((100dvh - var(--pad-h) - 175px) * 1.5)) !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto;
}

/* メッセージ窓の幅修正(world-layoutのalign-items:start対策) */
body[data-screen="map"] .world-panel > .panel-body,
body[data-screen="place"] .world-panel > .panel-body {
  align-items: stretch;
}

body[data-screen="map"] .map-message-window,
body[data-screen="place"] .map-message-window {
  width: 100%;
}

/* ════════════════════════════════════════════════════════════
   M2先行: 固定パーティ開始+メニュー画面のパッド埋もれ修正
   ════════════════════════════════════════════════════════════ */

/* メニュー系画面(町・店・つよさ等)はパッド分の余白を確保して全部押せるように */
body.has-touch {
  padding-bottom: var(--pad-h);
}

/* オープニングではパッドを出さない(タップで完結) */
body[data-screen="opening"] .touch-controls {
  display: none !important;
}

body[data-screen="opening"] {
  padding-bottom: 0;
}

.opening-screen {
  text-align: left;
}

.opening-text {
  display: grid;
  gap: 10px;
  width: min(460px, 100%);
  font-size: 15px;
  line-height: 1.8;
}

.opening-text strong {
  color: #d9c17d;
}

.opening-text p {
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   M1.9: スマホ戦闘の確実なコマンド表示+隊列等間隔+バランス
   ════════════════════════════════════════════════════════════ */

@media (max-width: 840px) {
  /* コマンドをオーバーレイではなく「ステージ→コマンド→メッセージ」の固定シートに */
  .battle-scene .battle-command-overlay {
    position: static;
    order: 1;
    width: 100%;
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    border-radius: 0;
  }

  .battle-scene .battle-stage {
    order: 0;
  }

  .battle-scene .battle-log-overlay {
    order: 2;
  }

  .battle-scene .battle-command-overlay .battle-command-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .battle-scene .battle-command-overlay button {
    min-height: 46px;
    font-size: 14px;
  }

  .battle-scene .battle-message-window {
    min-height: 64px;
    max-height: 92px;
    overflow-y: auto;
    font-size: 14px;
  }

  /* 4人の隊列: ステージ下部に等間隔で必ず収める */
  .battle-party-formation {
    left: 5%;
    right: 3%;
    bottom: 23%;
  }

  .battle-party-actor.actor-0 { left: 0; }
  .battle-party-actor.actor-1 { left: 25%; }
  .battle-party-actor.actor-2 { left: 50%; }
  .battle-party-actor.actor-3 { left: 75%; }
}

/* ════════════════════════════════════════════════════════════
   M1.10: スマホ戦闘はパッド非表示+薄型コマンドシート
   (戦闘はタップ直接操作。隊列がコマンドに隠れないように)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 840px) {
  /* 戦闘中は仮想パッドを消し、画面全体をステージに返す */
  body[data-screen="battle"] .touch-controls {
    display: none !important;
  }

  body.has-touch[data-screen="battle"] {
    --pad-h: 0px;
    padding-bottom: 0;
  }

  /* コマンドシートを薄型化 */
  .battle-scene .battle-command-overlay {
    max-height: 34vh;
  }

  .battle-scene .battle-command-overlay .command-panel {
    padding: 6px 10px;
    gap: 4px;
  }

  .battle-scene .battle-command-overlay .command-heading strong {
    font-size: 13px;
  }

  .battle-scene .battle-command-overlay .command-heading small {
    font-size: 10px;
  }

  .battle-scene .battle-command-overlay button {
    min-height: 44px;
    font-size: 13px;
  }

  .battle-scene .battle-message-window {
    min-height: 58px;
    max-height: 84px;
    font-size: 14px;
  }

  /* 隊列はステージ下部へ(コマンドに重ならない) */
  .battle-party-formation {
    bottom: 18%;
  }
}

/* ════════════════════════════════════════════════════════════
   M2.1: HD-2D風 半透明オーバーレイUI
   歩行中はマップのみ。イベント/コマンド時だけ浮かぶ。
   ════════════════════════════════════════════════════════════ */

/* 盤面はメッセージ分の余白を取り戻して大きく */
body[data-screen="map"] .world-panel .map-board-3d:not(.place-board),
body[data-screen="place"] .world-panel .map-board-3d:not(.place-board),
body[data-screen="map"] .world-panel .place-board.map-board-3d,
body[data-screen="place"] .world-panel .place-board.map-board-3d,
body[data-screen="map"] .world-panel .map-board-3d,
body[data-screen="place"] .world-panel .map-board-3d {
  width: min(100%, calc((100dvh - var(--pad-h) - 78px) * 1.5)) !important;
}

/* ── 半透明メッセージオーバーレイ(最新が一番上・3行+履歴スクロール) ── */

.map-message-overlay {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 26;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  background: rgba(6, 11, 19, 0.74);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  color: #ffffff;
  padding: 8px 12px 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.map-message-lines {
  max-height: calc(1.6em * 3);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 15px;
  line-height: 1.6;
}

.map-message-lines p {
  margin: 0;
  opacity: 0.62;
}

.map-message-lines p.is-latest {
  opacity: 1;
  font-weight: 700;
}

.map-message-hint {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  text-align: right;
}

/* ── コマンドオーバーレイの半透明化(マップが透けるDQ風) ── */

.map-command-overlay {
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  background: rgba(8, 13, 22, 0.66) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.map-command-overlay .map-command-panel {
  border: 0;
  padding: 0;
  background: transparent;
  color: #f7fbf8;
  box-shadow: none;
}

.map-command-overlay .map-command-panel h3 {
  color: #ffe9ae;
}

.map-command-overlay .map-command-list button {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(12, 20, 30, 0.55);
  color: #ffffff;
  box-shadow: none;
}

.map-command-overlay .map-command-list button:disabled {
  opacity: 0.3;
}

.map-command-overlay .map-command-list button.is-command-selected,
.map-command-overlay .map-command-list button:focus-visible:not(:disabled),
.map-command-overlay .map-command-list button:hover:not(:disabled) {
  background: rgba(28, 124, 98, 0.85);
  border-color: #ffe9ae;
  color: #ffffff;
}

.map-command-overlay .map-party-command-member {
  color: #f7fbf8;
}

/* PCでもコマンドは盤面に重ねる(3列→中央寄せ) */
@media (min-width: 841px) {
  .map-command-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    width: min(640px, calc(100% - 24px));
    max-height: calc(100% - 24px);
    overflow-y: auto;
    z-index: 24;
  }
}

/* ── 戦闘メッセージも半透明に ── */

.battle-scene .battle-message-window {
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(6, 11, 19, 0.74);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.battle-message-window .is-prev {
  opacity: 0.55;
}

/* コマンド窓・HPカードも半透明トーンに統一 */
.battle-scene .battle-command-overlay .command-panel,
.battle-scene .battle-status-overlay {
  background: rgba(6, 11, 19, 0.72);
}

/* ════════════════════════════════════════════════════════════
   M2.2: つよさ画面の立ち絵+メニュースクロール保証
   ════════════════════════════════════════════════════════════ */

.status-card {
  position: relative;
  padding-right: 104px;
  overflow: hidden;
}

.status-card-art {
  position: absolute;
  right: 6px;
  top: 8px;
  height: calc(100% - 16px);
  max-height: 230px;
  width: auto;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 4px 6px rgba(20, 30, 28, 0.25));
  pointer-events: none;
}

/* メニュー系画面は必ず縦スクロールできるように保険 */
body[data-screen="status"],
body[data-screen="shop"],
body[data-screen="equipment"],
body[data-screen="questLog"],
body[data-screen="bestiary"],
body[data-screen="coinExchange"],
body[data-screen="arena"],
body[data-screen="guild"],
body[data-screen="town"] {
  overflow-y: auto !important;
}

/* ════════════════════════════════════════════════════════════
   M2.3: 武具屋の作り直し(1カラム・全幅商品カード)
   ════════════════════════════════════════════════════════════ */

.shop-screen {
  border-color: #3a2c1c;
  background: linear-gradient(180deg, #2a2014 0%, #221a10 60%, #1b140c 100%);
  color: #f4ead6;
  padding: 12px;
}

.shop-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(217, 193, 125, 0.4);
  margin-bottom: 10px;
}

.shop-merchant {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255, 235, 200, 0.08);
}

.shop-head-text h2 {
  margin: 0 0 2px;
  color: #ffe9ae;
  font-size: 18px;
}

.shop-owner-line {
  margin: 0;
  font-size: 12px;
  color: #e8dcc0;
}

.shop-note-line {
  margin: 2px 0 0;
  font-size: 11px;
  color: #b7a888;
}

.shop-wallet {
  display: grid;
  gap: 2px;
  justify-items: end;
  font-size: 12px;
  color: #e8dcc0;
}

.shop-wallet strong {
  color: #ffe9ae;
  font-size: 15px;
}

.shop-goods {
  display: grid;
  gap: 8px;
}

.shop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 54px;
  padding: 8px 14px;
  border: 2px solid rgba(244, 234, 214, 0.45);
  border-radius: 8px;
  background: rgba(58, 44, 28, 0.55);
  color: #f4ead6;
  box-shadow: none;
  text-align: left;
}

.shop-item:disabled {
  opacity: 0.4;
}

.shop-item.is-command-selected,
.shop-item:hover:not(:disabled),
.shop-item:focus-visible:not(:disabled) {
  background: rgba(28, 124, 98, 0.5);
  border-color: #ffe9ae;
  transform: none;
}

.shop-item-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.shop-item-main strong {
  font-size: 15px;
}

.shop-item-main small {
  color: #cfc1a2;
  font-size: 11px;
}

.shop-item-price {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 15px;
  color: #ffe9ae;
}

.shop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.shop-actions button {
  min-height: 48px;
}

@media (max-width: 840px) {
  .shop-head {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .shop-merchant {
    width: 48px;
    height: 48px;
  }

  .shop-wallet {
    grid-column: 1 / -1;
    grid-template-columns: auto auto;
    justify-content: start;
    justify-items: start;
    gap: 12px;
  }
}

/* 立ち絵は幅基準で右下に固定(本文と重ねない) */
.status-card {
  min-height: 250px;
}

.status-card-art {
  height: auto;
  max-height: none;
  width: 92px;
  top: auto;
  bottom: 6px;
  right: 4px;
  opacity: 0.96;
}

/* ════════════════════════════════════════════════════════════
   M2.4: 武具屋ロビー(店主どん!+かう/うる/みせをでる)
   ════════════════════════════════════════════════════════════ */

.shop-lobby {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 8px 4px 4px;
}

.shop-merchant-hero {
  width: min(46vh, 300px);
  max-width: 86%;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45));
}

.shop-lobby-window {
  width: min(460px, 100%);
  border: 2px solid rgba(255, 233, 174, 0.7);
  border-radius: 8px;
  background: rgba(20, 14, 8, 0.66);
  padding: 10px 14px;
  text-align: center;
}

.shop-lobby-window h2 {
  margin: 0 0 4px;
  color: #ffe9ae;
  font-size: 18px;
}

.shop-lobby-window p {
  margin: 0;
  font-size: 13px;
  color: #f4ead6;
}

.shop-lobby-commands {
  display: grid;
  gap: 10px;
  width: min(380px, 100%);
}

.shop-lobby-commands button {
  min-height: 52px;
  font-size: 16px;
  border: 2px solid rgba(244, 234, 214, 0.6);
  background: rgba(58, 44, 28, 0.6);
  color: #f4ead6;
  box-shadow: none;
}

.shop-lobby-commands button.primary {
  background: rgba(28, 124, 98, 0.7);
}

.shop-lobby-commands button.is-command-selected,
.shop-lobby-commands button:hover:not(:disabled),
.shop-lobby-commands button:focus-visible:not(:disabled) {
  background: rgba(28, 124, 98, 0.9);
  border-color: #ffe9ae;
  transform: none;
}

.shop-empty {
  margin: 8px 4px;
  color: #cfc1a2;
  font-size: 14px;
}

/* ════════════════════════════════════════════════════════════
   M2.5: コマンド窓の小型化 — マップを隠さない(DQ流)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 840px) {
  /* スマホ: 下半分のシートにして上半分はマップが見える */
  .map-command-overlay {
    inset: auto 4px 4px 4px;
    max-height: 52%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 841px) {
  /* PC: 右上の小窓。マップ中央とキャラは隠さない */
  .map-command-overlay {
    top: 12px;
    right: 12px;
    left: auto;
    width: min(340px, 42%);
    max-height: calc(100% - 24px);
    overflow-y: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .map-command-overlay .map-command-help {
    display: none;
  }

  .map-command-overlay .map-party-command-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .map-command-overlay .map-command-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

/* ════════════════════════════════════════════════════════════
   M2.6: マップを覆う窓ゼロ化
   目的=盤面外の細バー、メッセージ=盤面の下の空きスペースへ
   ════════════════════════════════════════════════════════════ */

.map-objective-strip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  margin-bottom: 6px;
  border: 1px solid rgba(217, 193, 125, 0.6);
  border-radius: 6px;
  background: rgba(8, 13, 22, 0.7);
  color: #ffffff;
  font-size: 12px;
  line-height: 1.4;
}

.map-objective-strip span {
  flex: 0 0 auto;
  color: #ffe9ae;
  font-weight: 700;
  font-size: 11px;
}

.map-objective-strip strong {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* メッセージ窓: マップに重ねず、盤面の下の空きに流し込む */
.map-message-overlay {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  margin-top: 6px;
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 6px 10px 4px;
}

.map-message-lines {
  max-height: calc(1.55em * 3);
  font-size: 14px;
  line-height: 1.55;
}

.map-message-hint {
  font-size: 9px;
  margin-top: 2px;
}

/* 旧チップのスペース予約を無効化 */
.map-canvas-hud {
  display: none;
}

/* ════════════════════════════════════════════════════════════
   M2.7: 章イントロ/クリア画面
   ════════════════════════════════════════════════════════════ */

.chapter-art {
  width: min(30vh, 190px);
  max-width: 60%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5));
  margin: 4px 0;
}

.chapter-intro .opening-text,
.chapter-clear .opening-text {
  text-align: center;
}

body[data-screen="chapterIntro"] .touch-controls,
body[data-screen="chapterClear"] .touch-controls {
  display: none !important;
}

body[data-screen="chapterIntro"],
body[data-screen="chapterClear"] {
  padding-bottom: 0;
}

/* ════════════════════════════════════════════════════════════
   T6: マップ/施設画面の余白を暗色化(白い空き領域の解消)
   ════════════════════════════════════════════════════════════ */

body[data-screen="map"] .world-panel,
body[data-screen="place"] .world-panel {
  background: linear-gradient(180deg, #101a16, #0b1310);
}

body[data-screen="map"] .world-panel > .panel-header,
body[data-screen="place"] .world-panel > .panel-header {
  background: rgba(13, 23, 19, 0.92);
  border-bottom: 1px solid rgba(217, 193, 125, 0.35);
}

body[data-screen="map"] .world-panel > .panel-header h2,
body[data-screen="place"] .world-panel > .panel-header h2 {
  color: #f2ead2;
}

body[data-screen="map"] .world-panel > .panel-header .small-text,
body[data-screen="place"] .world-panel > .panel-header .small-text {
  color: rgba(242, 234, 210, 0.65);
}

body[data-screen="map"] .world-panel .resource-line .pill,
body[data-screen="place"] .world-panel .resource-line .pill {
  background: rgba(20, 32, 27, 0.9);
  border-color: rgba(217, 193, 125, 0.4);
  color: #e9e2cc;
}

/* ════════════════════════════════════════════════════════════
   T6: スマホ戦闘のパーティHPカード整理(折返し・スクロール・配置崩れの解消)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 840px) {
  .battle-scene .battle-status-overlay {
    position: fixed;
    top: 118px;
    right: 8px;
    bottom: auto;
    left: auto;
    width: 142px;
    max-height: 46%;
    overflow-y: auto;
    transform: none;
    padding: 6px;
    font-size: 10px;
    border-radius: 8px;
  }

  .battle-scene .battle-status-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .battle-scene .battle-status-heading {
    margin-bottom: 4px;
    white-space: nowrap;
  }

  .battle-scene .battle-status-heading strong,
  .battle-scene .battle-status-heading span {
    font-size: 10px;
  }
}

/* ── T7: 旅のしおり ── */
.shiori-card {
  margin-top: 10px;
}

.shiori-card .shiori-line {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink, #2c3a36);
}

/* ════════════════════════════════════════════════════════════
   装備画面v2: キャラチップ+部位アコーディオン
   ════════════════════════════════════════════════════════════ */

.equipment-v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.equip-hero-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.equip-hero-chip {
  flex: 1 1 0;
  min-width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font-size: 12px;
}

.equip-hero-chip .mini-portrait {
  width: 40px;
  height: 40px;
  display: block;
  overflow: hidden;
  border-radius: 6px;
}

.equip-hero-chip .mini-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.equip-hero-chip.is-selected {
  border-color: #b88f2e;
  background: #fdf3d7;
  box-shadow: 0 0 0 2px rgba(184, 143, 46, 0.25);
}

.equip-status-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font-size: 14px;
}

.equip-slot-accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.equip-slot-block {
  border: 2px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}

.equip-slot-block.is-open {
  border-color: #b88f2e;
}

.equip-slot-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 14px;
}

.equip-slot-name {
  font-weight: 700;
  color: #5a6660;
}

.equip-slot-current {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equip-slot-arrow {
  text-align: right;
  color: #9aa6a0;
  font-size: 12px;
}

.equip-slot-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 8px 8px;
  border-top: 1px dashed var(--line);
  background: rgba(0, 0, 0, 0.03);
}

.equip-slot-items .equip-item-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 6px 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  text-align: left;
}

.equip-slot-items .equip-item-button small {
  display: block;
  font-size: 11px;
  color: #76817b;
}

.equip-slot-items .equip-item-button.is-equipped {
  border-color: #3f8a5d;
  background: #e8f6ec;
}

.equip-slot-items .equip-remove {
  border-style: dashed;
}

.equip-diff .diff-up { color: #1f8a4c; }
.equip-diff .diff-down { color: #c2453a; }
.equip-diff .diff-flat { color: #9aa6a0; font-weight: 400; }
.equip-diff b { font-weight: 700; margin-left: 4px; }

.equip-empty { margin: 6px 4px; }

/* 装備v2: 旧ワークベンチのレイアウト指定に勝つ(幅いっぱいに) */
.equipment-workbench.equipment-v2 {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  grid-template-columns: none !important;
}

.equipment-v2 .equip-slot-accordion,
.equipment-v2 .equip-slot-block,
.equipment-v2 .equip-status-line,
.equipment-v2 .equip-hero-strip {
  width: 100%;
}

/* ════════════════════════════════════════════════════════════
   道具・店・装備のUI改善
   ════════════════════════════════════════════════════════════ */

/* どうぐ選択(フィールド) */
.field-item-list button,
.field-item-targets button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.field-item-list button small,
.field-item-targets button small {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.8;
}

/* 武具屋カテゴリタブ */
.shop-category-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}

.shop-category-tab {
  flex: 1 1 0;
  padding: 8px 4px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font-size: 13px;
  font-weight: 700;
}

.shop-category-tab.is-active {
  border-color: #b88f2e;
  background: #fdf3d7;
}

/* 商品リストは固定高でスクロール */
.shop-goods-scroll {
  max-height: calc(100dvh - var(--pad-h, 0px) - 280px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

/* 装備画面: 仲間チップ+攻守早を上に固定 */
.equip-fixed-head {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0 8px;
  background: var(--bg, #eef1ea);
  box-shadow: 0 6px 8px -6px rgba(20, 30, 26, 0.35);
}

/* ── 遭遇時の演出ベール(コマンド誤タップ防止の「間」) ── */
.battle-encounter-veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 26, 0.5);
  z-index: 80;
  pointer-events: none;
  animation: encounterVeilFade 0.16s ease-out;
}
.battle-encounter-veil span {
  font-weight: 800;
  font-size: clamp(20px, 5vw, 34px);
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
  animation: encounterVeilPop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes encounterVeilFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes encounterVeilPop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.equip-locked { opacity: 0.75; }

/* ── セーブスロット: 個別「セーブをけす」 ── */
.title-slot-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.title-slot-row .title-slot-button { flex: 1 1 auto; }
.title-slot-delete {
  flex: 0 0 auto;
  align-self: stretch;
  font-size: 13px;
  padding: 0 14px;
  color: #b3402f;
  border-color: #d98b80;
  background: #fff5f3;
}

/* タイトルのセーブ保存先の注意書き */
.title-menu-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 520px;
}