/* ── Design tokens ────────────────────────────────── */
:root {
  --bg:           #0c0c10;
  --surface:      rgba(255,255,255,0.042);
  --surface-hi:   rgba(255,255,255,0.075);
  --border:       rgba(255,255,255,0.08);
  --border-hi:    rgba(255,255,255,0.15);
  --text:         #f0ebe3;
  --muted:        rgba(240,235,227,0.52);
  --faint:        rgba(240,235,227,0.26);

  --orange:       #e8693a;
  --orange-dim:   rgba(232,105,58,0.14);
  --orange-glow:  rgba(232,105,58,0.22);
  --amber:        #f5a623;
  --violet:       #9b84f4;
  --teal:         #2dd4bf;
  --rose:         #fb7185;
  --scene-bg:     none;
  --battle-bg:    none;
  --scene-accent: #e8693a;

  --shadow-card:  0 8px 32px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.055) inset;
  --shadow-float: 0 24px 72px rgba(0,0,0,0.72);
  --glow-orange:  0 0 64px rgba(232,105,58,0.13);

  --r:   14px;
  --r-s: 8px;
}

/* ── Reset ────────────────────────────────────────── */
* { box-sizing: border-box; }
button, input { font: inherit; }
button { cursor: pointer; }

/* ── Body / global bg ─────────────────────────────── */
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter","M PLUS Rounded 1c","Noto Sans JP",system-ui,sans-serif;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(12,12,16,.76), rgba(12,12,16,.92)),
    var(--scene-bg) center / cover fixed no-repeat,
    radial-gradient(ellipse 100% 50% at 50% -8%,  rgba(232,105,58,.10) 0%, transparent 60%),
    radial-gradient(ellipse  60% 40% at 88%  88%,  rgba(155,132,244,.07) 0%, transparent 55%),
    radial-gradient(ellipse  50% 35% at 12%  62%,  rgba(45,212,191,.04) 0%, transparent 50%),
    var(--bg);
}

/* ── Shell ────────────────────────────────────────── */
.game-shell {
  width: min(1120px, calc(100vw - 24px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px 0 32px;
}

/* ── Topbar ───────────────────────────────────────── */
.topbar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.topbar h1 {
  margin: 0;
  font-size: clamp(1.5rem, 4.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
}

.topbar__label,
.chapter {
  margin: 0 0 3px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--scene-accent);
  text-transform: uppercase;
}

.topbar__back,
.icon-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--border-hi);
  border-radius: var(--r-s);
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
  font-size: 1.1rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.2s, border-color 0.2s;
}

.topbar__back:hover,
.icon-button:hover {
  background: var(--surface-hi);
  border-color: var(--border-hi);
}

.owned-weapon {
  width: fit-content;
  margin: -8px 0 14px auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(246,200,107,.34);
  border-radius: var(--r-s);
  background: linear-gradient(145deg, rgba(22,18,32,.9), rgba(42,32,56,.82));
  box-shadow: 0 12px 34px rgba(0,0,0,.32), 0 0 24px rgba(246,200,107,.08) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.owned-weapon[hidden] {
  display: none;
}

.owned-weapon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(246,200,107,.42));
}

.owned-weapon span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.owned-weapon small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.owned-weapon strong {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.1;
}

/* ── Screen container ─────────────────────────────── */
.screen {
  display: none;
  min-height: calc(100vh - 120px);
}
.screen.is-active { display: grid; }

/* ── Intro screen ─────────────────────────────────── */
.screen--intro {
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.88fr);
  gap: 16px;
  align-items: stretch;
}

.intro-copy,
.prologue-form {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.intro-copy {
  display: flex;
  min-height: 560px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  background:
    linear-gradient(180deg, rgba(12,12,16,.06) 0%, rgba(12,12,16,.90) 62%),
    url("/assets/sukipi-kamen/b00_プロローグ_氷の都市と囚われた女性.png") center / cover no-repeat,
    rgba(20,18,28,0.6);
  border-color: var(--border-hi);
  overflow: hidden;
}

/* Orange accent line at top */
.intro-copy::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  border-radius: var(--r) var(--r) 0 0;
  opacity: 0.7;
}
.intro-copy { position: relative; }

.intro-copy h2,
.result-body h2 {
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

.intro-copy p:not(.chapter) {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 0.95rem;
}

/* ── Prologue form ────────────────────────────────── */
.prologue-form {
  display: grid;
  gap: 18px;
  align-content: center;
  padding: 28px;
}

.prologue-form label,
.prologue-form fieldset {
  display: grid;
  gap: 8px;
}

.prologue-form span,
.prologue-form legend {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.prologue-form input[type="text"] {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  padding: 12px 14px;
  color: var(--text);
  background: rgba(255,255,255,0.045);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.prologue-form input[type="text"]::placeholder {
  color: var(--faint);
}

.prologue-form input[type="text"]:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232,105,58,0.15);
}

.prologue-form fieldset {
  margin: 0;
  border: 0;
  padding: 0;
}

/* ── Hero picker ──────────────────────────────────── */
.hero-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.hero-picker label {
  position: relative;
  display: grid;
  min-height: 180px;
  place-items: end center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  background: rgba(255,255,255,0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.hero-picker input {
  position: absolute;
  inset: 10px auto auto 10px;
  accent-color: var(--orange);
}

.hero-picker img {
  width: min(180px, 100%);
  max-height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.5));
}

.hero-picker label:has(input:checked) {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-glow), inset 0 0 20px rgba(232,105,58,.06);
}

/* ── Buttons ──────────────────────────────────────── */
.primary-button,
.secondary-button,
.choice-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 0;
  border-radius: var(--r-s);
  padding: 12px 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.primary-button {
  color: #fff;
  background: linear-gradient(135deg, var(--scene-accent) 0%, color-mix(in srgb, var(--scene-accent) 72%, #1b1113) 100%);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--scene-accent) 34%, transparent), 0 1px 0 rgba(255,255,255,.12) inset;
}

.primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(232,105,58,.45), 0 1px 0 rgba(255,255,255,.12) inset;
}

.primary-button:active { transform: translateY(0); }

.secondary-button {
  color: var(--text);
  border: 1px solid var(--border-hi);
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.secondary-button:hover {
  background: var(--surface-hi);
  border-color: rgba(255,255,255,.2);
}

/* ── Battle screen ────────────────────────────────── */
.screen--battle { gap: 12px; }

/* ── HUD ──────────────────────────────────────────── */
.hud {
  display: grid;
  grid-template-columns: 1fr 120px 120px;
  gap: 10px;
}

.hud > div {
  border: 1px solid var(--border-hi);
  border-radius: var(--r-s);
  padding: 10px 14px;
  background: rgba(12,12,16,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-card);
}

.hud span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hud strong {
  font-size: clamp(0.95rem, 2.2vw, 1.25rem);
  font-weight: 700;
  color: var(--text);
}

/* ── Battlefield ──────────────────────────────────── */
.battlefield {
  position: relative;
  min-height: min(58vh, 560px);
  overflow: hidden;
  border: 1px solid var(--border-hi);
  border-radius: var(--r);
  background: #0a0810;
  box-shadow: var(--shadow-float), var(--glow-orange);
}

.battlefield__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,16,36,.18) 0%, rgba(8,6,16,.86) 100%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0,0,0,.55), transparent 70%),
    var(--battle-bg) center / cover no-repeat,
    radial-gradient(ellipse 60% 50% at 25% 30%, rgba(155,132,244,.18), transparent 55%),
    radial-gradient(ellipse 50% 40% at 75% 70%, rgba(232,105,58,.08), transparent 50%),
    linear-gradient(155deg, #100d1e 0%, #1a1230 50%, #0f1a22 100%);
  filter: saturate(0.88);
}

/* Top accent line on battlefield */
.battlefield::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--orange) 40%, var(--violet) 100%);
  opacity: 0.5;
  z-index: 5;
}

/* ── Character units ──────────────────────────────── */
.hero-unit,
.boss-unit {
  position: absolute;
  z-index: 2;
  margin: 0;
  text-align: center;
  color: var(--text);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 16px rgba(0,0,0,.7);
}

.boss-unit {
  isolation: isolate;
}

.hero-unit  { left: clamp(6px,4vw,34px); bottom: 12px; }
.boss-unit  { right: clamp(4px,3vw,28px); bottom: 18px; }

.hero-unit img,
.boss-unit img {
  display: block;
  width: min(180px, 28vw);
  max-height: 230px;
  object-fit: contain;
  filter: drop-shadow(0 20px 28px rgba(0,0,0,.5));
}

.boss-unit img {
  width: min(370px, 48vw);
  max-height: 350px;
}

.boss-unit.is-materializing::after,
.boss-intro-img.is-materializing::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(ellipse 58% 42% at 50% 74%, rgba(240,248,255,.52), rgba(174,204,232,.22) 42%, transparent 72%),
    radial-gradient(ellipse 80% 34% at 50% 86%, rgba(36,30,48,.62), transparent 72%),
    linear-gradient(90deg, transparent, rgba(226,238,255,.30), transparent);
  filter: blur(10px);
  opacity: 0;
  mix-blend-mode: screen;
  animation: bossMistReveal 820ms ease-out both;
}

.boss-unit.is-materializing::after {
  inset: -40px -28px -18px -28px;
}

.boss-intro-img.is-materializing::after {
  inset: 10% 2% 0;
}

.boss-unit img.is-materializing,
.boss-intro-img img.is-materializing {
  animation: bossImageMaterialize 820ms cubic-bezier(.18,.82,.22,1) both;
  will-change: opacity, filter, transform;
}

.boss-unit.is-mirror-boss::before,
.boss-intro-img.is-mirror-boss::before {
  content: "";
  position: absolute;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 60% at 50% 55%, rgba(222,244,255,.34), transparent 64%),
    radial-gradient(ellipse 62% 74% at 50% 58%, rgba(149,111,255,.24), transparent 70%);
  filter: blur(2px);
}

.boss-unit.is-mirror-boss::before {
  inset: -28px -18px 6px -18px;
  z-index: -1;
}

.mirror-boss-img {
  transform: scaleX(-1) scale(1.06);
  filter:
    drop-shadow(0 20px 34px rgba(0,0,0,.58))
    drop-shadow(0 0 30px rgba(178,220,255,.48))
    saturate(0.72)
    hue-rotate(18deg)
    brightness(1.08);
}

/* ── Falling card ─────────────────────────────────── */
.falling-card {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  width: min(500px, calc(100% - 28px));
  min-height: 140px;
  margin: 0;
  padding: 20px;
  transform: translate(-50%, -150px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r);
  color: var(--text);
  background: linear-gradient(145deg, rgba(30,22,52,.95), rgba(50,38,78,.88));
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(155,132,244,.15) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.falling-card.is-falling {
  animation: fall var(--fall-duration, 7600ms) linear forwards;
}
.falling-card.is-break {
  animation: breakCard 520ms ease forwards;
}
.falling-card.is-miss {
  animation: missCard 520ms ease forwards;
}

.falling-card__eyebrow {
  margin: 0 0 8px;
  color: var(--amber);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.falling-card h2 {
  margin: 0;
  font-size: clamp(1.1rem, 3.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ── Timer ────────────────────────────────────────── */
.timer {
  height: 3px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.1);
}

.timer div {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--amber), var(--orange));
  transform-origin: left;
}

.timer.is-running div {
  animation: timerDrain var(--fall-duration, 7600ms) linear forwards;
}

/* ── Choices ──────────────────────────────────────── */
.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.choice-button {
  min-height: 64px;
  color: var(--text);
  background: rgba(255,255,255,.052);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-s);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.92rem;
  font-weight: 500;
  text-align: left;
  padding: 14px 18px;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.choice-button:hover,
.choice-button:focus-visible {
  background: var(--surface-hi);
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-dim), var(--shadow-card);
  outline: none;
}

/* ── Log strip ────────────────────────────────────── */
.log-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

/* ── Effect layer ─────────────────────────────────── */
.effect-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.burst,
.smoke {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.burst {
  background:
    radial-gradient(circle, rgba(255,255,255,.92) 0 10%, rgba(245,166,35,.72) 11% 24%, rgba(232,105,58,.28) 25% 42%, transparent 43%),
    conic-gradient(from 0deg, transparent 0 12deg, rgba(255,255,255,.85) 13deg 17deg, transparent 18deg 36deg);
  animation: burst 560ms ease-out forwards;
}

.smoke {
  background: radial-gradient(circle, rgba(16,12,24,.88), rgba(50,40,60,.42) 42%, transparent 70%);
  animation: smoke 620ms ease-out forwards;
}

/* ── Result screen ────────────────────────────────── */
.screen--result {
  grid-template-columns: minmax(240px, 0.82fr) minmax(300px, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.result-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  min-height: 560px;
  background:
    linear-gradient(180deg, rgba(12,10,22,.2) 0%, rgba(18,14,30,.85) 100%),
    var(--scene-bg) center / cover no-repeat,
    linear-gradient(155deg, #120f22, #1c1535 50%, #101820);
  border-right: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* Soft glow behind characters in result */
.result-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 80%, rgba(232,105,58,.08), transparent 60%);
}

.result-visual img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  align-self: end;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.6));
  position: relative;
}

.result-body {
  display: grid;
  gap: 18px;
  align-content: center;
  padding: 32px;
}

.result-body h2 {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.result-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 0.95rem;
}

/* ── Diagnosis grid ───────────────────────────────── */
.diagnosis-weapon-img {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.diagnosis-weapon-img img {
  width: min(220px, 55vw);
  height: min(220px, 55vw);
  object-fit: contain;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--scene-accent) 54%, transparent));
  border-radius: var(--r);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--scene-accent) 18%, transparent), transparent 68%),
    rgba(255,255,255,.04);
  padding: 8px;
}

.diagnosis-grid {
  display: grid;
  gap: 8px;
  margin: 0;
}

.diagnosis-grid div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  background: rgba(255,255,255,.035);
  transition: border-color 0.15s;
}

.diagnosis-grid div:hover {
  border-color: var(--border-hi);
}

.diagnosis-grid dt {
  color: var(--orange);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.diagnosis-grid dd {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.6;
}

.mask-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  color: #f6c86b;
  background: transparent;
  font: inherit;
  font-weight: 800;
  line-height: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mask-link:hover,
.mask-link:focus-visible {
  color: #fff0b8;
  outline: none;
}

.mask-separator {
  color: var(--muted);
}

/* ── Result actions ───────────────────────────────── */
.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.result-detail-button {
  flex-basis: 100%;
}

.mask-picture-modal[hidden] {
  display: none;
}

.mask-picture-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 18px;
}

.mask-picture-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 10, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mask-picture-panel {
  position: relative;
  z-index: 1;
  width: min(940px, 100%);
  height: min(82dvh, 760px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--border-hi);
  border-radius: var(--r);
  background: rgba(14, 13, 20, .96);
  box-shadow: var(--shadow-float);
}

.mask-picture-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.mask-picture-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-hi);
  border-radius: 50%;
  color: var(--text);
  background: rgba(255,255,255,.07);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
}

.mask-picture-frame,
.mask-picture-panel iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #11131c;
}

/* ── Log output ───────────────────────────────────── */
.log-output {
  max-height: 220px;
  overflow: auto;
  margin: 0;
  padding: 14px;
  border-radius: var(--r-s);
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(0,0,0,.35);
  font-size: 0.78rem;
  white-space: pre-wrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.log-output--live {
  max-height: 180px;
  border-color: var(--border-hi);
}

/* ── Keyframes ────────────────────────────────────── */
@keyframes fall {
  from { transform: translate(-50%, -150px); }
  to   { transform: translate(-50%, calc(min(58vh, 560px) - 118px)); }
}

@keyframes timerDrain {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@keyframes breakCard {
  0%   { opacity:1; filter: brightness(1);   transform: translate(-50%, var(--current-y,120px)) scale(1); }
  100% { opacity:0; filter: brightness(2.4); transform: translate(-50%, var(--current-y,120px)) scale(1.18) rotate(3deg); }
}

@keyframes missCard {
  0%   { opacity:1; filter: grayscale(0); }
  100% { opacity:0; filter: grayscale(1) brightness(.3); transform: translate(-50%, var(--current-y,120px)) scale(.92); }
}

@keyframes burst {
  from { opacity:1; transform: translate(-50%,-50%) scale(.2) rotate(0deg); }
  to   { opacity:0; transform: translate(-50%,-50%) scale(1.6) rotate(22deg); }
}

@keyframes smoke {
  from { opacity:.85; transform: translate(-50%,-50%) scale(.35); }
  to   { opacity:0;   transform: translate(-50%,-50%) scale(1.28); }
}

@keyframes bossMistReveal {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(.88);
  }
  28% {
    opacity: .92;
  }
  64% {
    opacity: .58;
  }
  100% {
    opacity: 0;
    transform: translateY(-12px) scale(1.14);
  }
}

@keyframes bossImageMaterialize {
  0% {
    opacity: 0;
    filter: blur(14px) brightness(1.65) saturate(.55) drop-shadow(0 24px 34px rgba(0,0,0,.35));
    transform: translateY(18px) scale(.94);
  }
  42% {
    opacity: .72;
    filter: blur(5px) brightness(1.32) saturate(.82) drop-shadow(0 22px 34px rgba(0,0,0,.48));
  }
  100% {
    opacity: 1;
    filter: drop-shadow(0 20px 28px rgba(0,0,0,.5));
    transform: translateY(0) scale(1);
  }
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 760px) {
  .screen--intro,
  .screen--result {
    grid-template-columns: 1fr;
  }

  .intro-copy,
  .result-visual {
    min-height: 340px;
  }

  .hud {
    grid-template-columns: 1fr 88px 88px;
  }

  .battlefield {
    min-height: 52vh;
  }

  .hero-unit img  { width: min(145px, 36vw); }
  .boss-unit img  { width: min(260px, 58vw); }

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

  .choice-button {
    min-height: 52px;
  }

  .result-visual {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══ New scene screens ════════════════════════════════════════════════ */

/* ── Story screen ─────────────────────────────────── */
.screen--story {
  align-items: start;
  padding: 20px 0 32px;
}

.story-panel {
  width: min(700px, 100%);
  display: grid;
  gap: 22px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-hi);
  border-radius: var(--r);
  padding: 40px;
  background:
    linear-gradient(145deg, rgba(12,12,16,.74), rgba(12,12,16,.54)),
    var(--scene-bg) center / cover no-repeat;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-float);
}

.story-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(12,12,16,.92) 0%, rgba(12,12,16,.72) 46%, rgba(12,12,16,.28) 100%),
    radial-gradient(ellipse 70% 55% at 74% 34%, color-mix(in srgb, var(--scene-accent) 18%, transparent), transparent 72%);
  z-index: 0;
}

.story-panel.is-mirror-thaw {
  border-color: color-mix(in srgb, #ffd98c 48%, var(--border-hi));
  background:
    linear-gradient(145deg, rgba(7,10,15,.66), rgba(10,13,20,.44)),
    var(--scene-bg) center / cover no-repeat;
}

.story-panel.is-mirror-thaw::before {
  background:
    linear-gradient(90deg, rgba(7,10,15,.82) 0%, rgba(7,10,15,.56) 42%, rgba(255,210,126,.16) 100%),
    radial-gradient(ellipse 80% 58% at 70% 32%, rgba(255,214,137,.38), transparent 70%),
    radial-gradient(ellipse 75% 70% at 22% 82%, rgba(80,199,255,.20), transparent 68%);
  animation: thawSceneWarmth 3.8s ease-out both;
}

.mirror-thaw-effect {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at 52% 48%, rgba(255,255,255,.30), rgba(171,225,255,.18) 18%, transparent 42%),
    linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.22) 45%, transparent 47% 100%);
}

.mirror-thaw-effect::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 2;
  background:
    linear-gradient(115deg, rgba(220,244,255,.42), rgba(168,211,255,.12) 42%, rgba(255,218,148,.22) 72%, transparent),
    repeating-linear-gradient(98deg, rgba(235,251,255,.18) 0 1px, transparent 1px 14px);
  filter: blur(.2px) saturate(.82);
  transform: translateX(0);
  animation: thawIceVeil 3.2s ease-in-out both;
}

.thaw-town-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: saturate(1.18) brightness(1.08);
  animation: thawTownFadeIn 3.4s ease-out .45s both;
}

.mirror-thaw-effect::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(7,8,13,.72) 0%, rgba(7,8,13,.48) 46%, rgba(7,8,13,.18) 100%),
    radial-gradient(circle at 34% 38%, rgba(255,255,255,.88) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 52%, rgba(255,236,174,.82) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 30%, rgba(180,236,255,.78) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 68%, rgba(255,255,255,.7) 0 1px, transparent 2px);
  background-size: 96px 96px, 132px 132px, 118px 118px, 150px 150px;
  opacity: 0;
  animation: thawParticles 3.8s ease-out both;
}

.story-panel.is-mirror-thaw h2 {
  opacity: 0;
  color: #fff;
  text-shadow: 0 3px 18px rgba(0,0,0,.88), 0 0 18px rgba(255,224,165,.32);
  animation: thawTextFadeIn 1.1s ease-out 1.05s both;
}

.story-panel.is-mirror-thaw .story-body p {
  opacity: 0;
  color: rgba(255,255,255,.88);
  text-shadow: 0 2px 14px rgba(0,0,0,.9);
  animation: thawTextFadeIn 1.05s ease-out both;
}

.story-panel.is-mirror-thaw .story-body p:nth-child(1) { animation-delay: 1.35s; }
.story-panel.is-mirror-thaw .story-body p:nth-child(2) { animation-delay: 1.65s; }
.story-panel.is-mirror-thaw .story-body p:nth-child(3) { animation-delay: 1.95s; }

.mirror-crack {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 2px;
  height: 45%;
  transform-origin: 50% 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.98), rgba(142,222,255,.72), transparent);
  box-shadow: 0 0 16px rgba(185,235,255,.78);
  opacity: 0;
  z-index: 4;
  animation: mirrorCrack 1.1s cubic-bezier(.2,.9,.2,1) both;
}

.mirror-crack--a { --crack-rot: 18deg; }
.mirror-crack--b { --crack-rot: -36deg; animation-delay: .12s; }
.mirror-crack--c { --crack-rot: 74deg; height: 34%; animation-delay: .2s; }

.mirror-shard {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 58px;
  height: 76px;
  clip-path: polygon(48% 0, 100% 28%, 76% 100%, 0 64%);
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(142,220,255,.22) 46%, rgba(255,204,112,.36));
  border: 1px solid rgba(244,252,255,.7);
  box-shadow: 0 0 22px rgba(180,232,255,.52);
  opacity: 0;
  z-index: 4;
  animation: mirrorShardFly 2.2s cubic-bezier(.16,.86,.28,1) both;
}

.mirror-shard--1 { --tx: -210px; --ty: -105px; --rot: -38deg; animation-delay: .25s; }
.mirror-shard--2 { --tx: 190px; --ty: -82px; --rot: 31deg; width: 42px; height: 62px; animation-delay: .32s; }
.mirror-shard--3 { --tx: -140px; --ty: 125px; --rot: 54deg; width: 36px; height: 58px; animation-delay: .38s; }
.mirror-shard--4 { --tx: 156px; --ty: 118px; --rot: -62deg; width: 48px; height: 68px; animation-delay: .46s; }

.thaw-light {
  position: absolute;
  inset: auto -10% -20% -10%;
  height: 58%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,209,116,.62), rgba(255,150,86,.22) 42%, transparent 74%);
  opacity: 0;
  z-index: 3;
  animation: thawLightRise 3.6s ease-out .5s both;
}

.story-panel > * {
  position: relative;
  z-index: 2;
}

.story-panel > .mirror-thaw-effect {
  position: absolute;
  z-index: 1;
}

.story-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 24px;
}

/* ── Fixed skip button (global) ───────────────────── */
.skip-fixed {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 200;
  min-height: 40px;
  padding: 8px 20px;
  border: 1px solid var(--border-hi);
  border-radius: 99px;
  color: var(--muted);
  background: rgba(12,12,16,.86);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
}

.skip-fixed:hover {
  color: var(--text);
  border-color: var(--orange);
  background: rgba(232,105,58,.1);
  transform: translateY(-1px);
}

.skip-fixed[hidden] { display: none; }

.story-panel h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
}

.story-body {
  display: grid;
  gap: 12px;
  color: var(--muted);
  line-height: 1.85;
  font-size: 0.95rem;
}

.story-body p { margin: 0; }

@keyframes thawSceneWarmth {
  0% {
    filter: saturate(.45) brightness(.72);
    opacity: .92;
  }
  54% {
    filter: saturate(.78) brightness(.9);
  }
  100% {
    filter: saturate(1.2) brightness(1.08);
    opacity: 1;
  }
}

@keyframes thawTownFadeIn {
  0% {
    opacity: 0;
    filter: saturate(.55) brightness(.82) blur(3px);
    transform: scale(1.025);
  }
  46% {
    opacity: .52;
  }
  100% {
    opacity: .72;
    filter: saturate(1.18) brightness(1.02) blur(0);
    transform: scale(1);
  }
}

@keyframes thawTextFadeIn {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes thawIceVeil {
  0% {
    opacity: .95;
    transform: translateX(0) scale(1);
    clip-path: inset(0 0 0 0);
  }
  44% {
    opacity: .72;
  }
  100% {
    opacity: 0;
    transform: translateX(18%) scale(1.08);
    clip-path: inset(0 0 0 88%);
  }
}

@keyframes mirrorCrack {
  0% {
    opacity: 0;
    transform: scaleY(.06) rotate(var(--crack-rot, 18deg));
  }
  28% {
    opacity: 1;
  }
  76% {
    opacity: .9;
  }
  100% {
    opacity: 0;
    transform: scaleY(1) rotate(var(--crack-rot, 18deg));
  }
}

@keyframes mirrorShardFly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.18) rotate(0deg);
  }
  22% {
    opacity: .96;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.88) rotate(var(--rot));
  }
}

@keyframes thawLightRise {
  0% {
    opacity: 0;
    transform: translateY(34%);
  }
  36% {
    opacity: .88;
  }
  100% {
    opacity: .55;
    transform: translateY(0);
  }
}

@keyframes thawParticles {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  24% {
    opacity: .82;
  }
  100% {
    opacity: .26;
    transform: translateY(-24px);
  }
}

.story-weapon-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 8px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--scene-accent) 42%, rgba(255,255,255,.12));
  border-radius: var(--r);
  background:
    radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--scene-accent) 28%, transparent), transparent 58%),
    rgba(255,255,255,.06);
  box-shadow: 0 18px 52px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
}

.story-weapon-card__image {
  display: grid;
  place-items: center;
  min-height: 180px;
  border-radius: var(--r-s);
  background: radial-gradient(circle, rgba(255,255,255,.09), transparent 68%);
}

.story-weapon-card__image img {
  width: min(180px, 100%);
  height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--scene-accent) 64%, transparent));
}

.story-weapon-card__text {
  display: grid;
  gap: 7px;
}

.story-weapon-card__text span {
  color: var(--scene-accent);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
}

.story-weapon-card__text strong {
  color: var(--text);
  font-size: clamp(1.3rem, 3vw, 2rem);
}

.story-weapon-card__text p {
  margin: 0;
  color: var(--muted);
}

.story-reunion-card {
  display: grid;
  grid-template-columns: minmax(210px, 0.7fr) 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 10px;
  padding: 18px;
  border: 1px solid rgba(145, 205, 255, .28);
  border-radius: var(--r);
  background:
    radial-gradient(circle at 24% 44%, rgba(146, 210, 255, .24), transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow: 0 22px 62px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.1);
}

.story-reunion-card__image {
  display: grid;
  place-items: center;
  min-height: 280px;
  overflow: hidden;
  border-radius: var(--r-s);
  background:
    radial-gradient(circle at 50% 48%, rgba(255,245,212,.2), transparent 34%),
    radial-gradient(circle, rgba(122,190,255,.16), transparent 68%);
}

.story-reunion-card__image img {
  width: min(340px, 100%);
  height: 340px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 28px rgba(130, 200, 255, .5))
    drop-shadow(0 26px 34px rgba(0,0,0,.48));
}

.story-reunion-card__text {
  display: grid;
  gap: 9px;
}

.story-reunion-card__text span {
  color: #9fd4ff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.story-reunion-card__text strong {
  color: var(--text);
  font-size: clamp(1.25rem, 2.8vw, 1.9rem);
  line-height: 1.28;
}

.story-reunion-card__text p {
  margin: 0;
  color: var(--muted);
}

.story-reunion-card__text .story-reunion-card__quote {
  margin-top: 8px;
  color: #ffd166;
  font-size: clamp(1.18rem, 3.4vw, 1.8rem);
  font-weight: 900;
  line-height: 1.45;
  text-shadow:
    0 0 18px rgba(255, 209, 102, .36),
    0 3px 18px rgba(0,0,0,.72);
}

.story-footer {
  display: flex;
  justify-content: flex-end;
}

/* ── Boss intro screen ────────────────────────────── */
.screen--boss-intro {
  grid-template-columns: minmax(180px, 0.68fr) 1fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border-hi);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  align-items: stretch;
}

.boss-intro-img {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(12,10,22,.1) 0%, rgba(14,10,28,.9) 100%),
    var(--battle-bg) center / cover no-repeat,
    linear-gradient(155deg, #100d20, #1a1430 50%, #0f1820);
  padding: 28px 24px 0;
  min-height: 460px;
  border-right: 1px solid var(--border);
  isolation: isolate;
}

.boss-intro-img img {
  position: relative;
  z-index: 1;
  width: min(330px, 100%);
  max-height: 430px;
  object-fit: contain;
  filter: drop-shadow(0 20px 36px rgba(0,0,0,.65));
}

.boss-intro-img.is-mirror-boss::before {
  inset: 46px 20px 0;
  z-index: 0;
}

.boss-intro-info {
  display: grid;
  gap: 20px;
  align-content: center;
  padding: 44px 40px;
}

.boss-intro-info h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.boss-intro-text {
  display: grid;
  gap: 10px;
  color: var(--muted);
  line-height: 1.8;
  font-size: 0.95rem;
}

.boss-intro-text p { margin: 0; }

.boss-intro-actions {
  display: flex;
  gap: 10px;
}

/* ── Final choice screen ──────────────────────────── */
.screen--final-choice {
  position: relative;
  place-items: center;
}

.final-choice-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,5,14,.38), rgba(6,5,14,.88)),
    var(--scene-bg) center / cover no-repeat,
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(155,132,244,.1), transparent 60%),
    linear-gradient(155deg, #0b0918, #15112a 50%, #090f18);
  filter: saturate(0.75) brightness(0.55);
}

.final-choice-mirror {
  position: absolute;
  z-index: 1;
  top: clamp(20px, 4vh, 52px);
  left: 50%;
  width: min(520px, 82vw);
  max-height: 64vh;
  object-fit: contain;
  opacity: 0.55;
  pointer-events: none;
}

.final-choice-mirror.mirror-boss-img {
  transform: translateX(-50%) scaleX(-1) scale(1.06);
}

.final-choice-content {
  position: relative;
  z-index: 2;
  width: min(560px, calc(100% - 32px));
  display: grid;
  gap: 24px;
  border: 1px solid var(--border-hi);
  border-radius: var(--r);
  padding: 40px;
  background: rgba(10,8,18,.84);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: var(--shadow-float);
  text-align: center;
}

.final-choice-content h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
}

.final-choices {
  display: grid;
  gap: 10px;
}

.choice-button--final {
  min-height: 58px;
  text-align: center;
  font-size: 0.95rem;
  border-color: var(--border-hi);
  justify-content: center;
}

/* ── Survey screen ────────────────────────────────── */
.screen--survey {
  align-items: start;
  padding: 20px 0 32px;
}

.survey-panel {
  width: min(640px, 100%);
  display: grid;
  gap: 16px;
}

.survey-speaker {
  display: flex;
  align-items: center;
  gap: 12px;
}

.survey-bubble-label {
  display: inline-flex;
  align-items: center;
  padding: 5px 16px;
  border: 1px solid var(--border-hi);
  border-radius: 99px;
  color: var(--orange);
  background: var(--orange-dim);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.survey-body {
  display: grid;
  gap: 20px;
  border: 1px solid var(--border-hi);
  border-radius: var(--r);
  padding: 32px;
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-float);
}

.survey-body h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2.8vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--text);
}

.survey-choices { display: grid; gap: 8px; }

.survey-progress {
  font-size: 0.76rem;
  color: var(--faint);
  text-align: right;
}

/* ── Responsive additions ─────────────────────────── */
@media (max-width: 760px) {
  .screen--boss-intro {
    grid-template-columns: 1fr;
  }
  .boss-intro-img {
    min-height: 260px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
  }
  .boss-intro-info  { padding: 24px; }
  .story-panel      { padding: 24px; }
  .survey-body      { padding: 24px; }
  .final-choice-content { padding: 28px 24px; }
  .story-weapon-card {
    grid-template-columns: 1fr;
  }
  .story-reunion-card {
    grid-template-columns: 1fr;
  }
  .story-weapon-card__image {
    min-height: 150px;
  }
  .story-weapon-card__image img {
    height: 150px;
  }
  .story-reunion-card__image {
    min-height: 220px;
  }
  .story-reunion-card__image img {
    height: 260px;
  }
}