/* 魔王復活アリーナ — UI */

:root {
  --bg-deep: #070712;
  --panel: #12122a;
  --panel-2: #1a1a38;
  --gold: #e8c56a;
  --gold-dim: #9a7a3a;
  --crimson: #c43c3c;
  --mint: #5dffb0;
  --sky: #6ec8ff;
  --violet: #c77dff;
  --text: #f2efe6;
  --muted: #9a9ab4;
  --frame: #6a5430;
  --frame-bright: #d4b06a;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

html {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

html, body {
  width: 100%;
  min-height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Courier New", serif;
  background: var(--bg-deep);
  color: var(--text);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
}

img, svg {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

button, a, input, label, .pressable, .reward-card, .choice-option, .message-window {
  touch-action: manipulation;
}

::selection { background: transparent; color: inherit; }

.fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(160deg, #1a1028 0%, #0a0a18 45%, #180808 100%);
}

.sparkles {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff8, transparent),
    radial-gradient(1px 1px at 30% 70%, #ffd70088, transparent),
    radial-gradient(1px 1px at 70% 30%, #fff6, transparent),
    radial-gradient(1px 1px at 85% 60%, #ffd70066, transparent),
    radial-gradient(1px 1px at 50% 50%, #fff4, transparent);
  animation: twinkle 6s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.2; }
  to { opacity: 0.45; }
}

.game-container {
  position: relative;
  z-index: 1;
  width: min(960px, 96vw);
  max-height: none;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(40, 28, 20, 0.35), transparent 30%),
    linear-gradient(180deg, #0e0e1c, #0a0a14);
  border: 2px solid var(--frame);
  border-radius: 10px;
  padding: 16px 18px 18px;
  box-shadow:
    0 0 0 1px #2a1c10,
    0 0 0 4px rgba(212, 176, 106, 0.18),
    0 18px 50px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 220, 150, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.screen {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: screen-in 0.35s ease;
}

.screen[hidden] { display: none !important; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.title-screen {
  gap: 0;
  width: 100%;
}

.title-stage {
  position: relative;
  width: 100%;
  min-height: min(78dvh, 640px);
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--frame);
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(212, 176, 106, 0.25),
    0 16px 40px rgba(0, 0, 0, 0.55);
  background: #07060c;
}

.title-arena-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  pointer-events: none;
  z-index: 0;
}

.title-rays {
  position: absolute;
  inset: -10% 10% auto;
  height: 70%;
  z-index: 1;
  pointer-events: none;
  background: conic-gradient(
    from 200deg at 50% 0%,
    transparent 0deg,
    rgba(255, 200, 120, 0.12) 20deg,
    transparent 40deg,
    rgba(255, 160, 80, 0.16) 55deg,
    transparent 80deg,
    rgba(255, 220, 160, 0.1) 100deg,
    transparent 130deg
  );
  mix-blend-mode: screen;
  animation: ray-sweep 8s ease-in-out infinite alternate;
}

@keyframes ray-sweep {
  from { opacity: 0.55; transform: scaleY(1); }
  to { opacity: 0.9; transform: scaleY(1.06); }
}

.title-embers {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 18% 70%, #ff8040cc, transparent),
    radial-gradient(2px 2px at 28% 55%, #ffe080aa, transparent),
    radial-gradient(1.5px 1.5px at 72% 62%, #ff6040bb, transparent),
    radial-gradient(2px 2px at 80% 48%, #ffd070aa, transparent),
    radial-gradient(1px 1px at 45% 40%, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 60% 75%, #ff9050aa, transparent);
  animation: ember-drift 5s ease-in-out infinite alternate;
}

@keyframes ember-drift {
  from { transform: translateY(0); opacity: 0.55; }
  to { transform: translateY(-14px); opacity: 0.95; }
}

.title-cast {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.title-maou {
  position: absolute;
  right: 2%;
  bottom: 18%;
  width: clamp(140px, 38vw, 260px);
  height: auto;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 18px rgba(200, 30, 40, 0.65))
    drop-shadow(0 12px 24px rgba(0, 0, 0, 0.7));
  animation: maou-threat 3.2s ease-in-out infinite;
  transform-origin: center bottom;
}

.title-hero {
  position: absolute;
  left: 4%;
  bottom: 16%;
  width: clamp(90px, 24vw, 160px);
  height: auto;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 12px rgba(232, 197, 106, 0.45))
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.65));
  animation: hero-ready 2.6s ease-in-out infinite;
  transform-origin: center bottom;
  z-index: 2;
}

.title-hime {
  position: absolute;
  right: 28%;
  bottom: 42%;
  width: clamp(48px, 12vw, 78px);
  height: auto;
  image-rendering: pixelated;
  opacity: 0.55;
  filter:
    brightness(0.85)
    drop-shadow(0 0 10px rgba(255, 180, 220, 0.35));
  animation: hime-pulse 4s ease-in-out infinite;
  z-index: 1;
}

@keyframes maou-threat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.03); }
}

@keyframes hero-ready {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes hime-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

.title-foreground {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding:
    clamp(16px, 4vh, 28px)
    16px
    clamp(18px, 4vh, 28px);
  width: 100%;
  min-height: min(78dvh, 640px);
  justify-content: flex-start;
  background: linear-gradient(
    180deg,
    rgba(6, 4, 10, 0.55) 0%,
    rgba(6, 4, 10, 0.15) 28%,
    rgba(6, 4, 10, 0.05) 50%,
    rgba(8, 4, 10, 0.72) 78%,
    rgba(6, 4, 10, 0.92) 100%
  );
}

.title-badge {
  letter-spacing: 0.4em;
  font-size: clamp(0.65rem, 2.4vw, 0.8rem);
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(10, 8, 14, 0.65);
  backdrop-filter: blur(4px);
  margin-top: 4px;
}

.game-title {
  font-size: clamp(1.7rem, 7.2vw, 2.7rem);
  text-align: center;
  letter-spacing: 0.08em;
  line-height: 1.25;
  margin-top: 4px;
}

.title-glow {
  display: inline-block;
  color: #f5e6c0;
  text-shadow:
    0 0 18px rgba(200, 40, 40, 0.55),
    0 0 40px rgba(232, 197, 106, 0.25),
    2px 2px 0 #000;
  animation: title-pulse 2.8s ease-in-out infinite;
}

@keyframes title-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

.catchcopy {
  text-align: center;
  font-size: clamp(0.95rem, 3.8vw, 1.15rem);
  line-height: 1.7;
  color: var(--gold);
  max-width: 22em;
  margin-top: auto;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.title-sub {
  text-align: center;
  font-size: clamp(0.8rem, 3vw, 0.95rem);
  color: #c8c0b0;
  line-height: 1.5;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.title-cta {
  margin-top: 6px;
  min-width: min(280px, 80vw);
  animation: cta-pulse 1.8s ease-in-out infinite;
  box-shadow:
    0 4px 0 #2a1010,
    0 8px 16px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(200, 40, 40, 0.35);
}

@keyframes cta-pulse {
  0%, 100% { filter: brightness(1); box-shadow: 0 4px 0 #2a1010, 0 8px 16px rgba(0,0,0,0.35), 0 0 18px rgba(200,40,40,0.3); }
  50% { filter: brightness(1.12); box-shadow: 0 4px 0 #2a1010, 0 8px 16px rgba(0,0,0,0.35), 0 0 32px rgba(255,80,60,0.55); }
}

.title-hint {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: #8a7a60;
  text-align: center;
}
.screen-heading {
  font-size: clamp(1.2rem, 4.5vw, 1.6rem);
  color: var(--gold);
  text-align: center;
  text-shadow: 0 0 12px rgba(232, 197, 106, 0.35);
}

.ornate {
  position: relative;
  background: linear-gradient(180deg, #16162e, #10101e);
  border: 2px solid var(--frame);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(212, 176, 106, 0.15),
    0 8px 20px rgba(0, 0, 0, 0.35);
}

.story-box {
  width: 100%;
  max-width: 34em;
  padding: 16px 18px;
  line-height: 1.85;
  font-size: clamp(0.85rem, 3.2vw, 1rem);
  color: #ddd8c8;
}

.story-box p + p { margin-top: 0.7em; }
.story-emphasis { color: #ffb347; font-weight: bold; }

.prologue-art {
  width: 100%;
  max-width: 34em;
  padding: 12px 12px 14px;
  overflow: hidden;
}

.prologue-caption {
  text-align: center;
  font-size: clamp(0.8rem, 3vw, 0.95rem);
  color: #ffb0b0;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  text-shadow: 0 0 12px rgba(180, 40, 40, 0.45);
}

.prologue-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  min-height: 190px;
  padding: 4px 6px 0;
}

.prologue-figure {
  text-align: center;
  margin: 0;
  position: relative;
}

.prologue-maou {
  flex: 1.35;
  z-index: 2;
}

.prologue-maou img {
  max-width: 100%;
  max-height: 200px;
  width: auto;
  height: auto;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 16px rgba(200, 30, 40, 0.55))
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6));
}

.prologue-hime {
  flex: 0.75;
  z-index: 1;
  margin-bottom: 8px;
}

.hostage-cage {
  position: relative;
  display: inline-block;
  padding: 10px 12px 8px;
  border: 3px solid #8a7350;
  border-radius: 4px;
  background:
    linear-gradient(180deg, #1a1018 0%, #0c0810 100%);
  box-shadow:
    inset 0 0 0 2px #3a2e20,
    inset 0 0 24px rgba(0, 0, 0, 0.75),
    0 0 0 1px #c4a060,
    0 8px 18px rgba(0, 0, 0, 0.55);
}

.hostage-cage-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 88px;
  min-height: 110px;
}

.hostage-bars {
  position: absolute;
  inset: 6px 8px 6px;
  z-index: 2;
  display: flex;
  justify-content: space-evenly;
  pointer-events: none;
}

.hostage-bars span {
  width: 5px;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    #2a2218 0%,
    #9a8060 22%,
    #d4b888 45%,
    #6a5840 70%,
    #2a2218 100%
  );
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.55);
  opacity: 0.92;
}

.hostage-lock {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  z-index: 3;
  width: 18px;
  height: 14px;
  background: linear-gradient(180deg, #d4b06a, #8a6a30);
  border: 2px solid #5a4020;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hostage-lock::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border: 2px solid #c4a060;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: transparent;
}

.prologue-hime img {
  max-width: 100%;
  max-height: 110px;
  width: auto;
  height: auto;
  image-rendering: pixelated;
  opacity: 0.95;
  filter:
    brightness(0.9)
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.prologue-figure figcaption {
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--gold);
  letter-spacing: 0.06em;
}

.prologue-hime figcaption {
  color: #d8a0b0;
}

/* ボタン押し心地 */
.pressable {
  cursor: pointer;
  border: none;
  font-family: inherit;
  transform: translateY(0);
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    filter 0.12s ease,
    opacity 0.08s ease;
  box-shadow:
    0 4px 0 #2a1010,
    0 8px 16px rgba(0, 0, 0, 0.35);
}

.pressable:hover:not(:disabled) {
  filter: brightness(1.08);
}

.pressable:active:not(:disabled),
.pressable.is-pressed:not(:disabled) {
  transform: translateY(3px) scale(0.97);
  box-shadow:
    0 1px 0 #2a1010,
    0 2px 6px rgba(0, 0, 0, 0.4);
}

.pressable:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.primary-btn {
  margin-top: 8px;
  padding: 14px 28px;
  min-height: 52px;
  background: linear-gradient(180deg, #a82828, #6a1010);
  color: #ffe8e8;
  border: 2px solid #e06060 !important;
  border-radius: 8px;
  font-size: clamp(0.95rem, 3.5vw, 1.1rem);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 #000;
}

.battle-header {
  width: 100%;
  text-align: center;
}

.battle-title {
  font-size: clamp(1rem, 4vw, 1.3rem);
  color: #d8d0c0;
}

.wave-label {
  margin-top: 4px;
  display: inline-block;
  color: #1a1208;
  background: linear-gradient(180deg, #ffe08a, #d4a84a);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: clamp(0.85rem, 3.2vw, 1rem);
  font-weight: bold;
  box-shadow: 0 0 16px rgba(232, 197, 106, 0.35);
}

.battle-field {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.character-info {
  padding: 10px;
  text-align: center;
}

.character-info h2 {
  font-size: clamp(0.85rem, 3vw, 1rem);
  margin-bottom: 6px;
  color: var(--gold);
}

.player-info { border-color: #3a6a8a; }
.enemy-info { border-color: #8a3a3a; }

.character-sprite {
  position: relative;
  min-height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.character-sprite img.pixel-art {
  max-width: 120px;
  max-height: 120px;
  width: auto;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
  transition: transform 0.12s ease, filter 0.12s ease;
}

.character-sprite.is-hit img {
  animation: hit-shake 0.35s ease;
}

.character-sprite.is-attack img {
  animation: lunge 0.28s ease;
}

@keyframes hit-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); filter: brightness(1.4) saturate(1.4); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}

@keyframes lunge {
  0% { transform: translateX(0); }
  40% { transform: translateX(10px) scale(1.05); }
  100% { transform: translateX(0); }
}

.float-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.float-num {
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%, 0);
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 1.25rem;
  text-shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, 0.8);
  animation: float-up 0.9s ease forwards;
  white-space: nowrap;
  z-index: 5;
}

.float-num.damage { color: #ff6b6b; }
.float-num.heal { color: #6bffb0; }
.float-num.miss { color: #ddd; font-size: 1rem; }

@keyframes float-up {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.8); }
  20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -36px) scale(1); }
}

.stat-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-family: "Courier New", monospace;
}

.bar {
  height: 12px;
  background: #1a1a28;
  border: 1px solid #555;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.bar-fill {
  height: 100%;
  width: 100%;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.player-hp-fill { background: linear-gradient(90deg, #1e9e55, #5dff9a); }
.player-mp-fill { background: linear-gradient(90deg, #1f6fb8, #6ec8ff); }
.enemy-hp-fill { background: linear-gradient(90deg, #a82020, #ff6b6b); }

.stat-text {
  font-size: 0.7rem;
  color: #bbb;
  min-width: 4.5em;
  text-align: right;
}

.param-line {
  font-size: 0.72rem;
  color: #c8c8d8;
  margin-top: 4px;
  letter-spacing: 0.04em;
  font-family: "Courier New", monospace;
}

.affinity-line {
  color: #c9a0ff;
  font-size: 0.68rem;
}

#battle-screen {
  position: relative;
}

.battle-commands {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.command-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.command-btn {
  width: 100%;
  min-height: 52px;
  padding: 12px 8px;
  background: linear-gradient(180deg, #2e2e4a, #1c1c30);
  color: var(--text);
  border: 2px solid #7a6a4a !important;
  border-radius: 8px;
  font-size: clamp(0.9rem, 3.2vw, 1.05rem);
  letter-spacing: 0.06em;
}

.command-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.drop-chevron {
  font-size: 0.7em;
  color: var(--gold);
  transition: transform 0.18s ease;
}

.command-toggle[aria-expanded="true"] {
  border-color: var(--gold) !important;
  background: linear-gradient(180deg, #3a3a58, #24243c);
}

.command-toggle[aria-expanded="true"] .drop-chevron {
  transform: rotate(180deg);
}

.command-btn:hover:not(:disabled) {
  border-color: var(--gold) !important;
  background: linear-gradient(180deg, #3a3a58, #24243c);
}

.choice-panel,
.dropdown-panel {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  z-index: 30;
  margin-top: 2px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, #1a1428, #100c18);
  border: 2px solid var(--frame-bright);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
  transform-origin: top center;
  animation: dropdown-pop 0.18s ease;
}

@keyframes dropdown-pop {
  from {
    opacity: 0;
    transform: translateY(-8px) scaleY(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.choice-panel[hidden],
.dropdown-panel[hidden] {
  display: none !important;
  animation: none;
}

.choice-title {
  text-align: center;
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.choice-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  min-height: 48px;
  background: linear-gradient(180deg, #2a2440, #1a1628);
  border: 2px solid #6a5a4a;
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}

.choice-option:hover:not(:disabled) {
  border-color: var(--gold);
}

.choice-option:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.choice-option-name {
  font-size: 0.95rem;
  color: #ffe08a;
}

.choice-option-desc {
  font-size: 0.72rem;
  color: #a8a0b8;
}

.choice-cancel {
  align-self: center;
  margin-top: 4px;
  padding: 10px 20px;
  min-height: 44px;
  background: #2a2030;
  color: #ddd;
  border: 2px solid #666;
  border-radius: 8px;
  font-family: inherit;
  cursor: pointer;
}

/* 固定メッセージウィンドウ — 高さ固定、伸びない */
.message-window {
  width: 100%;
  height: 118px;
  min-height: 118px;
  max-height: 118px;
  padding: 10px 14px 8px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(40, 30, 20, 0.25), transparent 40%),
    linear-gradient(180deg, #141428, #0c0c18);
}

.message-speaker {
  height: 1.2em;
  font-size: 0.78rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  min-height: 1.2em;
}

.message-body {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-start;
}

.message-text {
  font-size: clamp(0.9rem, 3.2vw, 1.05rem);
  line-height: 1.55;
  color: #f4f0e4;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 3.1em;
  max-height: 3.1em;
  overflow: hidden;
}

.message-text.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--gold);
  animation: blink-caret 0.7s steps(1) infinite;
}

@keyframes blink-caret {
  50% { opacity: 0; }
}

.message-cursor {
  position: absolute;
  right: 2px;
  bottom: 0;
  color: var(--gold);
  font-size: 0.85rem;
  animation: bounce-cursor 0.8s ease infinite;
}

@keyframes bounce-cursor {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(4px); opacity: 0.55; }
}

.message-hint {
  font-size: 0.65rem;
  color: #666680;
  text-align: right;
  margin-top: 2px;
}

.message-text.tone-damage { color: #ff9a9a; }
.message-text.tone-heal { color: #8dffc4; }
.message-text.tone-buff { color: #ffe08a; }
.message-text.tone-special { color: #e0b0ff; }

.reward-lead {
  color: var(--gold);
  text-align: center;
  font-size: clamp(0.9rem, 3.2vw, 1.05rem);
}

.reward-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.reward-card {
  text-align: left;
  background: linear-gradient(180deg, #1a1a32, #121222);
  border: 2px solid #6a5a4a;
  border-radius: 10px;
  padding: 14px;
  color: var(--text);
  min-height: 104px;
  box-shadow: 0 4px 0 #1a1010, 0 8px 16px rgba(0, 0, 0, 0.3);
}

.reward-card:hover {
  border-color: var(--gold);
  background: linear-gradient(180deg, #242448, #181830);
}

.reward-card .reward-icon { font-size: 1.5rem; margin-bottom: 4px; }
.reward-card .reward-name {
  font-size: clamp(0.9rem, 3.2vw, 1.05rem);
  color: #ffe08a;
  margin-bottom: 4px;
}
.reward-card .reward-desc {
  font-size: clamp(0.72rem, 2.8vw, 0.85rem);
  color: #b8b8c8;
  line-height: 1.45;
}

.reward-card[data-type="sword"] { border-color: #c44; }
.reward-card[data-type="shield"] { border-color: #4a8; }
.reward-card[data-type="magic"] { border-color: #68c; }
.reward-card[data-type="item"] { border-color: #c8a; }

.current-build {
  width: 100%;
  font-size: 0.8rem;
  color: #b0b0c4;
  text-align: center;
  line-height: 1.5;
  padding: 10px;
  font-family: "Courier New", monospace;
}

.result-message {
  text-align: center;
  line-height: 1.7;
  font-size: clamp(0.9rem, 3.4vw, 1.1rem);
  max-width: 26em;
  color: #e8e0d0;
}

.ending-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  padding: 4px 0;
}

.ending-art[hidden] {
  display: none !important;
}

.ending-scene {
  width: 100%;
  max-height: min(42vh, 320px);
  object-fit: contain;
  border-radius: 8px;
  border: 2px solid var(--frame);
  box-shadow:
    0 0 0 1px rgba(212, 176, 106, 0.2),
    0 10px 28px rgba(0, 0, 0, 0.5);
  image-rendering: pixelated;
  animation: ending-rise 0.7s ease both;
}

@keyframes ending-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.ending-epilogue {
  text-align: center;
  max-width: 26em;
  line-height: 1.75;
  font-size: clamp(0.85rem, 3.1vw, 1rem);
  color: var(--gold);
}

.ending-epilogue[hidden] {
  display: none !important;
}

.audio-controls {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.audio-menu-btn {
  min-width: 44px;
  min-height: 44px;
  background: rgba(10, 10, 20, 0.88);
  color: #fff;
  border: 1px solid rgba(212, 176, 106, 0.45) !important;
  border-radius: 10px;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.audio-menu-btn[aria-expanded="true"] {
  border-color: var(--gold) !important;
}

.audio-dropdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 168px;
  padding: 10px 12px;
  background: rgba(10, 10, 20, 0.94);
  border: 1px solid rgba(212, 176, 106, 0.4);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
  animation: dropdown-pop 0.16s ease;
}

.audio-dropdown[hidden] {
  display: none !important;
}

.audio-dropdown #mute-btn {
  min-height: 40px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #2e2e4a, #1c1c30);
  color: #ffe8c8;
  border: 1px solid #7a6a4a !important;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  box-shadow: none !important;
}

.volume-label {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.audio-controls input[type="range"] {
  width: 100%;
  touch-action: pan-x;
}

.magic-effect {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 40;
  transform: translate(-50%, -50%);
  animation: burst 0.45s ease forwards;
}

@keyframes burst {
  from { opacity: 0.9; transform: translate(-50%, -50%) scale(0.4); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

.magic-effect.fire { background: radial-gradient(circle, #ff6b00, transparent 70%); }
.magic-effect.ice { background: radial-gradient(circle, #7ec8ff, transparent 70%); }
.magic-effect.thunder { background: radial-gradient(circle, #ffe066, transparent 70%); }
.magic-effect.holy { background: radial-gradient(circle, #fff6b0, transparent 70%); }

@media (max-width: 520px) {
  body {
    padding: 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .game-container {
    width: 100%;
    min-height: 100dvh;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding:
      max(12px, env(safe-area-inset-top))
      12px
      max(20px, env(safe-area-inset-bottom));
  }

  .battle-field {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .character-sprite img.pixel-art {
    max-width: 100px;
    max-height: 100px;
  }

  .character-sprite { min-height: 100px; }

  .battle-commands {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .command-btn {
    min-height: 56px;
    font-size: 1.05rem;
  }

  .choice-list {
    max-height: min(42vh, 280px);
  }

  .choice-option {
    min-height: 54px;
    padding: 12px 14px;
  }

  .message-window {
    height: 120px;
    min-height: 120px;
    max-height: 120px;
  }

  .reward-grid { grid-template-columns: 1fr; }

  .reward-card {
    min-height: 88px;
    padding: 16px;
  }

  .prologue-stage {
    min-height: 160px;
  }

  .prologue-maou img {
    max-height: 160px;
  }

  .prologue-hime img {
    max-height: 88px;
  }

  .ending-scene {
    max-height: min(36vh, 260px);
  }

  .title-stage,
  .title-foreground {
    min-height: min(86dvh, 700px);
  }

  .title-maou {
    right: -2%;
    bottom: 22%;
    width: clamp(130px, 46vw, 200px);
  }

  .title-hero {
    left: 0;
    bottom: 20%;
    width: clamp(84px, 30vw, 130px);
  }

  .title-hime {
    right: 22%;
    bottom: 48%;
    width: 52px;
  }

  .title-foreground {
    padding-top: 18px;
  }

  .catchcopy {
    margin-top: auto;
  }

  .primary-btn {
    width: min(100%, 320px);
    min-height: 56px;
  }

  .audio-controls {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
  }
}