@charset "UTF-8";

/* ── 악역 영애는 오늘도 사랑받는다 — 달빛 황궁 스킨 v2 (2026-09-04) ──
 * ui-ux-pro-max 디자인 시스템 반영: 로맨스 로즈 + 골드, 시네마틱 다크
 * (헤어라인 rgba 보더 · radius 12/18 · 앰비언트 글로우 · 200~300ms 모션).
 * 레이아웃·클래스는 v1 그대로 — 스킨(질감·색·폰트)만 갈았다.
 * 명조는 여기서 실제로 로드한다(index.html 링크) — 안 하면 안드로이드에서
 * 고딕 폴백으로 로판 분위기가 통째로 죽는다. */

:root {
  --ink: #f7f0e7;
  --muted: #beb5b3;
  --night: #070916;
  --navy: #111830;
  --wine: #6e2139;
  --rose: #e79ab2;
  --rose-deep: #c05f7f;
  --gold: #d6b36a;
  --gold-pale: #f1dcaa;
  --gold-deep: #a87e3f;
  --glass: rgba(10, 12, 28, .76);
  --route: #7b4156;
  --hairline: rgba(255, 255, 255, .09);
  --r-md: 12px;
  --r-lg: 18px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --serif: "Noto Serif KR", "AppleMyungjo", "Nanum Myeongjo", serif;
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  color-scheme: dark;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #050712; }
body { min-width: 320px; overflow: hidden; color: var(--ink); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 3px; }
button { touch-action: manipulation; cursor: pointer; }
.hidden { display: none !important; }

#app {
  position: relative;
  width: min(100vw, 500px);
  height: 100svh;
  min-height: 600px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #0b0f22 0%, var(--night) 45%, #04050e 100%);
  box-shadow: 0 0 80px #000;
}

.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s var(--ease), visibility .5s;
}
.screen.active { opacity: 1; visibility: visible; pointer-events: auto; }

/* ── 타이틀 ─────────────────────────────────────────── */
.cover-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  animation: cover-breathe 12s ease-in-out infinite alternate;
}
.cover-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 6, 16, .2) 0%, rgba(7, 8, 20, .05) 30%, rgba(5, 6, 15, .64) 63%, rgba(4, 5, 12, .98) 100%),
    radial-gradient(circle at 50% 30%, transparent 18%, rgba(2, 3, 10, .3) 100%);
}
.title-content {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: max(45px, calc(env(safe-area-inset-bottom) + 24px));
  text-align: center;
  text-shadow: 0 2px 22px #000;
}
.eyebrow {
  margin: 0 0 8px;
  color: var(--gold-pale);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.title-ornament, .ending-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--gold);
  font-size: 8px;
}
.title-ornament span, .ending-line span {
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.title-ornament span:last-child, .ending-line span:last-child { transform: rotate(180deg); }
.title-content h1 {
  margin: 9px auto 12px;
  max-width: 390px;
  font-family: var(--serif);
  font-size: clamp(34px, 10vw, 48px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.07em;
  background: linear-gradient(180deg, #fffdf4 22%, #f6e3b4 58%, #d9b878 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .85));
}
.title-content h1 span {
  display: block;
  margin-bottom: 4px;
  font-size: .56em;
  font-weight: 500;
  letter-spacing: .04em;
}
.title-copy {
  margin: 0 auto 18px;
  color: rgba(255, 247, 240, .82);
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.75;
}
.name-field {
  display: flex;
  align-items: center;
  width: min(100%, 312px);
  height: 48px;
  margin: 0 auto 12px;
  border: 1px solid rgba(218, 188, 124, .4);
  border-radius: var(--r-md);
  background: rgba(3, 5, 15, .66);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px rgba(255, 255, 255, .07);
  overflow: hidden;
  transition: border-color .25s;
}
.name-field:focus-within { border-color: var(--gold-pale); }
.name-field span {
  flex: 0 0 auto;
  padding-left: 16px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .08em;
}
.name-field input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: center;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
}
.primary-btn, .ghost-btn {
  min-height: 50px;
  border-radius: var(--r-md);
  cursor: pointer;
  letter-spacing: .02em;
  transition: transform .2s var(--ease), box-shadow .25s, border-color .25s;
}
.primary-btn {
  position: relative;
  overflow: hidden;
  border: 1px solid #f0d9a2;
  background: linear-gradient(160deg, #caa057 0%, #ecd28a 42%, #a87e3f 100%);
  color: #191019;
  font-weight: 800;
  box-shadow:
    0 10px 32px rgba(197, 151, 76, .3),
    0 2px 8px rgba(0, 0, 0, .5),
    inset 0 1px rgba(255, 255, 255, .6);
}
.primary-btn:active { transform: translateY(1px) scale(.99); box-shadow: 0 5px 16px rgba(197, 151, 76, .22), inset 0 1px rgba(255, 255, 255, .5); }
.primary-btn::after {
  content: "";
  position: absolute;
  inset: -20% auto -20% -45%;
  width: 28%;
  transform: skewX(-20deg);
  background: rgba(255, 255, 255, .26);
  animation: sheen 4.5s ease-in-out infinite;
}
.ghost-btn {
  border: 1px solid var(--hairline);
  background: rgba(7, 9, 21, .58);
  color: #eee7e4;
  backdrop-filter: blur(8px);
}
.ghost-btn:active { border-color: rgba(241, 220, 170, .5); }
.title-actions { display: grid; width: min(100%, 312px); gap: 8px; margin: auto; }
.sound-hint {
  min-height: 16px;
  margin: 11px 0 0;
  color: rgba(255, 255, 255, .61);
  font-size: 10px;
  letter-spacing: .02em;
  transition: opacity .3s;
}
.sound-hint.open { opacity: 0; }
.copyright {
  position: absolute;
  z-index: 2;
  bottom: max(10px, env(safe-area-inset-bottom));
  width: 100%;
  margin: 0;
  color: rgba(255, 255, 255, .28);
  text-align: center;
  font-size: 8px;
  letter-spacing: .08em;
}
.petals { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.petals i {
  position: absolute;
  top: -8%;
  width: 9px;
  height: 14px;
  border-radius: 90% 10% 80% 20%;
  background: linear-gradient(135deg, #f6c3d0, #a84a68);
  box-shadow: 0 0 6px rgba(240, 170, 190, .35);
  opacity: .65;
  animation: petal-fall 10s linear infinite;
}
.petals i:nth-child(1) { left: 8%; animation-delay: -3s; }
.petals i:nth-child(2) { left: 28%; animation-delay: -7s; animation-duration: 12s; }
.petals i:nth-child(3) { left: 47%; animation-delay: -1s; animation-duration: 9s; }
.petals i:nth-child(4) { left: 65%; animation-delay: -5s; animation-duration: 13s; }
.petals i:nth-child(5) { left: 81%; animation-delay: -8s; animation-duration: 11s; }
.petals i:nth-child(6) { left: 93%; animation-delay: -2s; animation-duration: 14s; }

/* ── 루트 선택 ──────────────────────────────────────── */
.route-screen {
  overflow-y: auto;
  padding: max(38px, env(safe-area-inset-top)) 18px max(26px, env(safe-area-inset-bottom));
  background:
    linear-gradient(rgba(5, 8, 20, .74), rgba(5, 6, 16, .96)),
    url("assets/cover.webp") center/cover;
}
.route-head { text-align: center; }
.route-head h2 {
  margin: 5px 0 9px;
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: -.04em;
  background: linear-gradient(180deg, #fffdf4 30%, #ecd7a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.route-head > p:last-child { margin: 0 0 22px; color: var(--muted); font-size: 12px; }
.route-list { display: grid; gap: 13px; }
.route-card {
  --card: #65789e;
  position: relative;
  min-height: 168px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card) 50%, rgba(255, 255, 255, .14));
  border-radius: var(--r-lg);
  background: #101526;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .05);
  cursor: pointer;
  text-align: left;
  isolation: isolate;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .3s;
}
.route-card:active {
  transform: scale(.985);
  border-color: color-mix(in srgb, var(--card) 75%, #fff 20%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4), 0 0 24px color-mix(in srgb, var(--card) 30%, transparent);
}
.route-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent 6%, color-mix(in srgb, var(--card) 80%, #fff 30%) 50%, transparent 94%);
  opacity: .7;
}
.route-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(7, 8, 19, .98) 0%, rgba(7, 8, 19, .87) 43%, rgba(7, 8, 19, .12) 78%);
}
.route-card img {
  position: absolute;
  z-index: -2;
  right: 0;
  top: 0;
  width: 64%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
  transition: transform .45s var(--ease);
}
.route-card:active img { transform: scale(1.04); }
.route-card-copy { position: relative; z-index: 1; width: 64%; padding: 21px 0 18px 19px; }
.route-card-no { color: color-mix(in srgb, var(--card) 72%, #fff 26%); font: 600 10px var(--display); letter-spacing: .24em; }
.route-card h3 { margin: 8px 0 2px; font: 700 22px var(--serif); letter-spacing: -.02em; }
.route-card .role { display: block; margin-bottom: 10px; color: color-mix(in srgb, var(--card) 70%, #fff 28%); font-size: 11px; font-weight: 700; }
.route-card q { display: block; color: #d8d0cf; font: 12px/1.65 var(--serif); quotes: none; }
.route-card .tags { display: flex; gap: 5px; margin-top: 11px; }
.route-card .tags i {
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--card) 55%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--card) 12%, transparent);
  color: #e2dbd9;
  font-size: 9px;
  font-style: normal;
}
.text-btn { display: block; margin: 20px auto 0; border: 0; background: transparent; color: #a9a0a2; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ── 대화 화면 ──────────────────────────────────────── */
.game-screen { background: #0b1020; }
.scene-bg {
  position: absolute;
  inset: 0;
  background-image: url("assets/cover.webp");
  background-position: center;
  background-size: cover;
  filter: blur(15px) saturate(.65) brightness(.45);
  transform: scale(1.12);
  transition: background-image .6s ease, filter .6s ease;
}
.scene-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 5, 15, .74), transparent 20%, transparent 53%, rgba(4, 5, 14, .94) 78%),
    radial-gradient(circle at 50% 44%, transparent 40%, rgba(3, 4, 12, .38) 100%);
}
.game-hud {
  position: absolute;
  z-index: 4;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  right: 14px;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
}
.round-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: rgba(7, 9, 22, .55);
  color: #f5ead6;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: border-color .2s, transform .2s var(--ease);
}
.round-btn:active { transform: scale(.93); border-color: rgba(241, 220, 170, .45); }
.chapter-display { min-width: 0; text-align: center; text-shadow: 0 2px 10px #000; }
.chapter-display small { display: block; color: var(--gold); font: 600 9px var(--display); letter-spacing: .24em; }
.chapter-display strong { display: block; margin-top: 3px; overflow: hidden; font: 600 13px var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.sound-wave { display: inline-block; font-family: Georgia, serif; font-size: 17px; }
.sound-btn[aria-pressed="false"] .sound-wave { opacity: .35; text-decoration: line-through; }
.status-row {
  position: absolute;
  z-index: 4;
  top: max(65px, calc(env(safe-area-inset-top) + 50px));
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.affection-pill {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0 5px;
  min-width: 75px;
  padding: 7px 11px;
  border: 1px solid rgba(232, 150, 174, .32);
  border-radius: 25px;
  background: linear-gradient(160deg, rgba(52, 17, 40, .72), rgba(28, 10, 24, .66));
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 4px 14px rgba(0, 0, 0, .3);
  backdrop-filter: blur(10px);
}
.affection-pill > span { grid-row: span 2; color: var(--rose); font-size: 12px; text-shadow: 0 0 8px rgba(231, 154, 178, .6); }
.affection-pill b { color: #ffe3ea; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; }
.affection-pill small { color: #c8a2ae; font-size: 8px; }
.progress-wrap { flex: 1; min-width: 0; }
.progress-meta { display: flex; justify-content: space-between; margin-bottom: 5px; color: rgba(255, 255, 255, .78); font-size: 9px; }
.progress-track { height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--route), var(--rose) 60%, var(--gold-pale));
  box-shadow: 0 0 10px color-mix(in srgb, var(--rose) 60%, transparent);
  transition: width .5s var(--ease);
}
.character-stage { position: absolute; inset: 90px 0 172px; overflow: hidden; }
.character-glow {
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: 80%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--route) 48%, transparent) 0%, transparent 68%);
  filter: blur(20px);
}
.character-art {
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: min(114%, 570px);
  height: 108%;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .65));
  transition: opacity .25s, transform .4s;
  animation: character-idle 5.5s ease-in-out infinite;
}
.character-art.speaking { transform: translateX(-50%) scale(1.012); }
.character-art.portrait-swap {
  animation: portrait-in .42s cubic-bezier(.2, .75, .3, 1), character-idle 5.5s ease-in-out .42s infinite;
}
.dialogue-panel {
  position: absolute;
  z-index: 5;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  min-height: 174px;
  padding: 20px 20px 16px;
  border: 1px solid rgba(226, 202, 159, .34);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(16, 19, 39, .93), rgba(7, 8, 20, .96));
  box-shadow:
    0 20px 54px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(0, 0, 0, .35),
    inset 0 1px rgba(255, 255, 255, .07);
  backdrop-filter: blur(18px);
}
.dialogue-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 26px;
  width: 74px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  box-shadow: 0 0 10px var(--gold);
}
.dialogue-panel::after {
  content: "◆";
  position: absolute;
  top: -5px;
  left: 16px;
  color: var(--gold);
  font-size: 8px;
  text-shadow: 0 0 8px rgba(214, 179, 106, .8);
}
.speaker-row { display: flex; align-items: center; gap: 10px; min-height: 19px; }
.speaker-name { color: var(--gold-pale); font: 700 13px var(--serif); letter-spacing: .03em; }
.mood-label {
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--route) 45%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--route) 22%, transparent);
  color: #e0ced3;
  font-size: 8px;
  letter-spacing: .04em;
}
.dialogue-text { min-height: 64px; margin: 12px 0 5px; color: #f4eeee; font: 14px/1.72 var(--serif); word-break: keep-all; }
.dialogue-text::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 3px; background: var(--gold); vertical-align: -.15em; animation: cursor-blink .7s step-end infinite; }
.dialogue-text.done::after { display: none; }
.next-btn {
  display: block;
  min-width: 70px;
  margin: 0 0 0 auto;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--gold-pale);
  font-size: 10px;
  letter-spacing: .06em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.next-btn.visible { opacity: 1; pointer-events: auto; animation: next-nudge 1.6s ease-in-out infinite; }
.next-btn i { display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); }
.choices { display: grid; gap: 8px; margin-top: 12px; }
.choice-btn {
  width: 100%;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid rgba(218, 186, 126, .3);
  border-radius: var(--r-md);
  background: linear-gradient(120deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .035));
  color: #f2e9e7;
  font: 12px/1.4 var(--serif);
  text-align: left;
  cursor: pointer;
  animation: choice-in .32s var(--ease) both;
  transition: border-color .2s, background .25s, transform .2s var(--ease);
}
.choice-btn:nth-child(2) { animation-delay: .08s; }
.choice-btn:nth-child(3) { animation-delay: .16s; }
.choice-btn:active {
  transform: scale(.985);
  border-color: var(--rose);
  background: linear-gradient(120deg, rgba(231, 154, 178, .18), rgba(214, 179, 106, .1));
}

/* ── 이벤트·엔딩 ────────────────────────────────────── */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .55s, visibility .55s;
  background: #060711;
}
.overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
.event-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .7s, transform 8s ease-out; transform: scale(1.04); }
.event-layer.active .event-art { transform: scale(1); }
.event-layer[data-event="2"] .event-art { filter: hue-rotate(-8deg) saturate(.9); object-position: 44% center; }
.event-layer[data-event="3"] .event-art { filter: sepia(.1) brightness(.83); object-position: 56% center; }
.event-layer[data-event="4"] .event-art { filter: saturate(1.2) contrast(1.05); object-position: center 42%; }
.event-layer[data-event="5"] .event-art { filter: grayscale(.18) brightness(.68); object-position: center 35%; }
.event-layer[data-event="6"] .event-art { filter: brightness(1.08) saturate(1.13); object-position: center 25%; }
.event-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 5, 14, .2) 32%, rgba(4, 5, 13, .97) 82%); }
.event-number {
  position: absolute;
  top: max(32px, env(safe-area-inset-top));
  left: 24px;
  padding-left: 12px;
  border-left: 1px solid var(--gold);
  color: var(--gold-pale);
  font: 600 11px var(--display);
  letter-spacing: .26em;
}
.event-copy { position: absolute; left: 26px; right: 26px; bottom: max(34px, calc(env(safe-area-inset-bottom) + 20px)); text-align: center; text-shadow: 0 3px 18px #000; }
.event-copy > p:first-child { margin: 0 0 7px; color: var(--gold); font-size: 10px; letter-spacing: .15em; }
.event-copy h2 {
  margin: 0;
  font: 700 32px var(--serif);
  letter-spacing: -.04em;
  background: linear-gradient(180deg, #fffdf4 26%, #ecd7a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .9));
}
.event-copy > p:nth-of-type(2) { margin: 12px auto 19px; max-width: 370px; color: #ddd3d1; font: 13px/1.72 var(--serif); }
.event-copy .primary-btn { width: min(100%, 290px); }

.ending-layer { background: radial-gradient(circle at 50% 17%, color-mix(in srgb, var(--route) 50%, #121224), #050610 60%); text-align: center; }
.ending-aura { position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, rgba(246, 211, 145, .18), transparent 45%); }
.ending-art { width: 100%; height: 51%; object-fit: cover; object-position: center 28%; mask-image: linear-gradient(#000 65%, transparent); opacity: .84; }
.ending-card { position: absolute; left: 25px; right: 25px; bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px)); }
.ending-card h2 {
  margin: 6px 0 12px;
  font: 700 32px var(--serif);
  letter-spacing: -.05em;
  background: linear-gradient(180deg, #fffdf4 26%, #ecd7a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .9));
}
.ending-line { margin-bottom: 15px; color: var(--rose); }
.ending-line span { background: linear-gradient(90deg, transparent, var(--rose-deep)); }
.ending-copy { min-height: 68px; margin: 0 auto 10px; color: #d9d1d0; font: 13px/1.75 var(--serif); }
.ending-score { margin: 0 0 18px; color: var(--gold-pale); font-size: 11px; }
.ending-card .primary-btn, .ending-card .ghost-btn { width: 100%; margin-top: 8px; }
.toast {
  position: absolute;
  z-index: 40;
  top: max(112px, calc(env(safe-area-inset-top) + 90px));
  left: 50%;
  transform: translate(-50%, -10px);
  padding: 8px 15px;
  border: 1px solid rgba(235, 177, 195, .3);
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(46, 15, 38, .92), rgba(26, 9, 22, .9));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .08);
  color: #ffd7e3;
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease);
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes cover-breathe { to { transform: scale(1.025); } }
@keyframes character-idle { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } }
@keyframes portrait-in {
  from { opacity: .15; transform: translateX(-48%) scale(1.025); filter: blur(5px) drop-shadow(0 16px 22px rgba(0, 0, 0, .65)); }
  to { opacity: 1; transform: translateX(-50%) scale(1); filter: blur(0) drop-shadow(0 16px 22px rgba(0, 0, 0, .65)); }
}
@keyframes cursor-blink { 50% { opacity: 0; } }
@keyframes choice-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes next-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes sheen { 0%, 65% { transform: translateX(0) skewX(-20deg); } 86%, 100% { transform: translateX(560px) skewX(-20deg); } }
@keyframes petal-fall { from { transform: translate3d(0, -10vh, 0) rotate(0); } to { transform: translate3d(60px, 110vh, 0) rotate(540deg); } }

@media (min-width: 700px) {
  body { background: radial-gradient(circle at 50% 30%, #22243d, #060711 60%); }
  #app { height: min(920px, 100svh); margin-top: max(0px, calc((100svh - 920px) / 2)); border: 1px solid rgba(214, 179, 106, .14); }
}

@media (max-height: 700px) {
  .title-content { bottom: max(28px, calc(env(safe-area-inset-bottom) + 17px)); }
  .title-content h1 { font-size: 32px; margin-bottom: 7px; }
  .title-copy { margin-bottom: 10px; line-height: 1.5; }
  .name-field { height: 42px; margin-bottom: 8px; }
  .primary-btn, .ghost-btn { min-height: 44px; }
  .sound-hint { margin-top: 6px; }
  .character-stage { bottom: 158px; }
  .dialogue-panel { min-height: 155px; padding-top: 15px; }
  .dialogue-text { min-height: 52px; margin-top: 8px; font-size: 13px; }
  .event-copy h2, .ending-card h2 { font-size: 27px; }
  .ending-copy { line-height: 1.55; }
}

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