@font-face {
  font-family: "Pretendard Variable";
  src: url("./assets/PretendardVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
}

@font-face {
  font-family: "Puzzle Sans";
  src: url("./assets/puzzle-sans.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #21162a;
  --ink-soft: #51415b;
  --cream: #fff2d6;
  --paper: #f6d9a9;
  --paper-deep: #d19c69;
  --plum: #3f2139;
  --plum-light: #74415c;
  --night: #17142c;
  --night-2: #292047;
  --gold: #f2bd62;
  --gold-bright: #ffe4a3;
  --rose: #da7187;
  --sage: #728c67;
  --blue: #788bd2;
  --shadow: 0 10px 0 rgba(22, 12, 27, .48), 0 18px 40px rgba(8, 7, 20, .45);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(circle at 16% 16%, rgba(125, 89, 185, .22) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 10%, rgba(255, 224, 154, .2) 0 1px, transparent 2px),
    radial-gradient(circle at 67% 76%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    linear-gradient(160deg, #0e1020, #24213f 54%, #171127);
  background-size: 90px 90px, 130px 130px, 75px 75px, auto;
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  overflow-x: hidden;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
  position: relative;
  width: min(100%, 520px);
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--night);
  box-shadow: 0 0 80px rgba(0,0,0,.58);
}

.game-map {
  position: relative;
  height: calc(100svh - 70px);
  min-height: 660px;
  overflow: hidden;
  isolation: isolate;
  background: #17213f;
}

.map-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  image-rendering: pixelated;
  filter: saturate(.78) brightness(.86) contrast(.96);
  z-index: -3;
}

.map-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,10,34,.34), rgba(20,17,42,.08) 34%, rgba(20,17,42,.06) 70%, rgba(12,10,26,.5));
  pointer-events: none;
  z-index: -2;
}

.intro-sequence {
  position: absolute;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(13,13,38,.28), transparent 58%, rgba(17,12,31,.42));
  transition: opacity .36s var(--ease);
  pointer-events: none;
}
.intro-sequence.is-ending { opacity: 0; }
.intro-logo {
  position: absolute;
  top: calc(74px + env(safe-area-inset-top));
  left: 50%;
  width: calc(100% - 48px);
  max-width: 390px;
  padding: 16px 18px 18px;
  transform: translate(-50%, -180px);
  opacity: 0;
  border: 3px solid #bb8054;
  border-radius: 7px;
  color: #fff0cf;
  background: linear-gradient(180deg, rgba(69,38,61,.96), rgba(38,26,49,.96));
  box-shadow: inset 0 0 0 3px #71435a, 0 7px 0 rgba(22,13,31,.7), 0 16px 30px rgba(10,8,20,.38);
  text-align: center;
}
.intro-sequence.is-running .intro-logo { animation: intro-logo-drop 1.05s .38s var(--ease) forwards; }
.intro-logo span { display: block; margin-bottom: 5px; color: var(--gold); font: 800 8px/1 ui-monospace, monospace; letter-spacing: .15em; }
.intro-logo h2 { margin: 0; font-size: clamp(29px, 9vw, 42px); line-height: 1.05; letter-spacing: -.07em; text-shadow: 3px 3px 0 #3e213d; }
.intro-logo p { margin: 7px 0 0; color: #e5cbbd; font-size: 11px; }
.intro-player {
  position: absolute;
  left: 53%;
  top: 111%;
  width: 54px;
  height: 108px;
  transform: translate(-50%, -72%);
  filter: drop-shadow(0 6px 2px rgba(10,7,17,.58));
}
.intro-sequence.is-running .intro-player { animation: intro-walk-in 3.75s .08s cubic-bezier(.38,.05,.52,1) forwards, walk-bob .32s steps(2,end) 12; }
@keyframes intro-logo-drop { to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes intro-walk-in { to { top: 86%; } }

.is-intro .hud,
.is-intro .quest-card,
.is-intro .npc,
.is-intro .guide-npc,
.is-intro .player,
.is-intro .map-hint,
.is-intro .bottom-nav { opacity: 0; pointer-events: none; }
.hud, .quest-card, .npc, .guide-npc, .player, .map-hint, .bottom-nav { transition: opacity .3s ease; }

.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 14px 20px;
  background: linear-gradient(180deg, rgba(12,10,29,.86), rgba(12,10,29,.38), transparent);
  pointer-events: none;
}

.brand-lockup { filter: drop-shadow(0 2px 0 #2b1734); }
.brand-kicker { display: block; margin-bottom: 2px; color: var(--gold-bright); font: 700 8px/1.2 ui-monospace, monospace; letter-spacing: .16em; }
.brand-lockup h1 { margin: 0; font-size: clamp(20px, 5.8vw, 28px); line-height: 1; letter-spacing: -.06em; text-shadow: 2px 2px 0 #4e2e4c, 0 3px 0 #1d1128; }

.hud-actions { display: flex; align-items: center; gap: 7px; pointer-events: auto; }
.sound-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid #8f654e;
  border-radius: 5px;
  color: #c4aebc;
  background: #302037d9;
  box-shadow: inset 0 0 0 2px #4d2d45, 0 3px 0 #1d1428;
  cursor: pointer;
}
.sound-toggle[aria-pressed="true"] { color: #ffe4a3; border-color: #c08a59; }
.sound-toggle:focus-visible { outline: 3px solid #ffe6a4; outline-offset: 3px; }
.sound-toggle svg { width: 21px; height: 21px; overflow: visible; }
.sound-toggle path { fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .sound-wave { fill: none; opacity: 0; }
.sound-toggle .sound-slash { fill: none; opacity: 1; }
.sound-toggle[aria-pressed="true"] .sound-wave { opacity: 1; }
.sound-toggle[aria-pressed="true"] .sound-slash { opacity: 0; }

.moon-score {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 66px;
  padding: 8px 10px;
  border: 2px solid #b67f51;
  border-radius: 5px;
  background: #33213ad9;
  color: #dec6b1;
  box-shadow: inset 0 0 0 2px #4d2d45, 0 3px 0 #1d1428;
  font-size: 12px;
}

.moon-score strong { color: #fff1a9; font-size: 16px; }
.moon-gem { width: 13px; height: 13px; margin-right: 3px; transform: rotate(45deg); border: 2px solid #ffd784; background: #9c70d6; box-shadow: inset 2px 2px #e0c7ff, 0 0 8px #b994ff; }

.quest-card {
  position: absolute;
  top: calc(74px + env(safe-area-inset-top));
  left: 14px;
  right: 14px;
  z-index: 8;
  padding: 8px 10px 7px;
  border: 2px solid #b5794e;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(58,31,52,.95), rgba(38,24,46,.95));
  box-shadow: inset 0 0 0 2px #5b354d, 0 5px 0 rgba(25,13,31,.72), 0 8px 20px rgba(15,8,24,.3);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.quest-card.is-compact { transform: translateY(-3px) scale(.98); opacity: .9; }
.quest-label { display: block; color: var(--gold); font: 800 9px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.quest-card p { margin: 4px 0 6px; font-size: 11px; line-height: 1.3; }
.quest-progress { height: 4px; overflow: hidden; background: #211727; box-shadow: inset 0 1px 2px #0d0a13; }
.quest-progress span { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, #d76d8b, #f4c86f); transition: width .45s var(--ease); }

.sprite {
  background-image: url("./assets/fortune-cast.png");
  background-repeat: no-repeat;
  background-size: 600% 100%;
  background-position: calc(var(--i, 0) * 20%) center;
  image-rendering: pixelated;
}

.field-sprite {
  background-image: url("./assets/field-sprites-simple.png");
  background-repeat: no-repeat;
  background-size: 700% 100%;
  background-position: calc(var(--fi, 0) * 16.666667%) center;
  image-rendering: pixelated;
}

.player {
  --i: 0;
  position: absolute;
  left: 53%;
  top: 94%;
  z-index: 4;
  width: 43px;
  height: 86px;
  transform: translate(-50%, -72%);
  filter: drop-shadow(0 5px 1px rgba(11,8,18,.52));
  transition: left 1.05s cubic-bezier(.38,.05,.52,1), top 1.05s cubic-bezier(.38,.05,.52,1), transform .2s var(--ease);
  pointer-events: none;
}

.player.is-walking { animation: walk-bob .22s steps(2, end) infinite; }
@keyframes walk-bob { 50% { transform: translate(-50%, -75%); } }

.guide-npc {
  position: absolute;
  left: 40%;
  top: 88%;
  z-index: 5;
  width: 70px;
  height: 132px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  color: var(--cream);
  background: transparent;
  filter: drop-shadow(0 5px 2px rgba(12,7,19,.58));
  cursor: pointer;
}
.guide-npc .guide-field-sprite { position: absolute; left: 15px; bottom: 0; width: 43px; height: 86px; transition: transform .18s var(--ease), filter .18s var(--ease); }
.guide-npc:hover .guide-field-sprite, .guide-npc:focus-visible .guide-field-sprite { transform: translateY(-4px); filter: brightness(1.1); }
.guide-npc:focus-visible { outline: 3px solid #ffe5a3; outline-offset: 4px; border-radius: 8px; }
.guide-npc .talk-bubble { right: 7px; bottom: 65px; }
.guide-label {
  position: absolute;
  left: 50%;
  bottom: 82px;
  width: max-content;
  min-width: 0;
  padding: 4px 7px;
  transform: translateX(-50%);
  border: 1px solid rgba(222,178,117,.72);
  border-radius: 4px;
  background: rgba(35,57,58,.84);
  box-shadow: 0 2px 0 rgba(20,12,27,.65);
  text-align: center;
}
.guide-label small { display: block; color: #ffe0a5; font-size: 9px; line-height: 1.15; }
.guide-label strong { display: none; }

.npc {
  position: absolute;
  z-index: 3;
  width: 72px;
  height: 126px;
  padding: 0;
  border: 0;
  color: var(--cream);
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 5px 2px rgba(12,7,19,.55));
}

.npc-sprite { position: absolute; left: 17px; bottom: 0; width: 40px; height: 80px; transition: transform .18s var(--ease), filter .18s var(--ease); }
.npc:hover .npc-sprite, .npc:focus-visible .npc-sprite { transform: translateY(-4px); filter: brightness(1.12); }
.npc:focus-visible { outline: 3px solid #ffe5a3; outline-offset: 4px; border-radius: 8px; }
.npc:active .npc-sprite { transform: translateY(0) scale(.94); }

.npc-label {
  position: absolute;
  bottom: 80px;
  left: 50%;
  width: max-content;
  min-width: 0;
  max-width: 86px;
  padding: 4px 7px;
  transform: translateX(-50%);
  border: 1px solid rgba(222,178,117,.72);
  border-radius: 4px;
  background: rgba(45,31,51,.82);
  box-shadow: 0 2px 0 rgba(20,12,27,.65);
  text-align: center;
  white-space: nowrap;
}

.npc-label small { display: block; color: #ffe0a5; font-size: 9px; line-height: 1.15; }
.npc-label strong { display: none; }

.talk-bubble {
  position: absolute;
  right: 8px;
  bottom: 63px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 20px;
  border: 2px solid #5a334f;
  border-radius: 4px;
  color: #5a2d45;
  background: #fff0d3;
  font: 900 12px/1 ui-monospace, monospace;
  animation: bubble 1.7s steps(2,end) infinite;
}

@keyframes bubble { 50% { transform: translateY(-4px); } }

.hotspot-love { left: 22%; top: 24%; }
.hotspot-wealth { left: 76%; top: 25%; }
.hotspot-career { left: 17%; top: 51%; }
.hotspot-health { left: 80%; top: 53%; }
.hotspot-general { left: 51%; top: 82%; }

.map-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 6;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 7px 12px;
  border: 1px solid rgba(255,220,158,.55);
  border-radius: 999px;
  background: rgba(23,16,39,.78);
  backdrop-filter: blur(5px);
  color: #ffe8bf;
  font-size: 11px;
  text-align: center;
}

.bottom-nav {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(70px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 3px solid #a36d52;
  background: linear-gradient(#37223a, #25182f);
  box-shadow: inset 0 2px 0 #55324a;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  color: #bba6b3;
  background: transparent;
  font-size: 10px;
  cursor: pointer;
}

.nav-item.is-active { color: #ffe2a0; background: rgba(245,190,100,.07); }
.nav-item:focus-visible { outline: 2px solid #ffe2a0; outline-offset: -4px; }
.nav-mark { position: relative; display: block; width: 18px; height: 18px; border: 2px solid currentColor; }
.mark-map { transform: rotate(45deg) scale(.8); }
.mark-map::after { content: ""; position: absolute; inset: 4px; background: currentColor; }
.mark-atlas { border-radius: 50%; box-shadow: inset 0 0 0 3px #312038; }
.mark-atlas::before, .mark-atlas::after { content: ""; position: absolute; background: currentColor; }
.mark-atlas::before { width: 2px; height: 22px; left: 6px; top: -4px; transform: rotate(45deg); }
.mark-atlas::after { width: 22px; height: 2px; left: -4px; top: 6px; transform: rotate(45deg); }
.mark-journal::after { content: ""; position: absolute; left: 4px; top: 3px; width: 7px; height: 2px; background: currentColor; box-shadow: 0 4px currentColor, 0 8px currentColor; }
.mark-sound { border-radius: 50% 50% 50% 4px; transform: rotate(-45deg) scale(.78); }
.mark-sound::after { content: ""; position: absolute; width: 8px; height: 2px; right: -7px; top: 6px; background: currentColor; box-shadow: 0 -5px currentColor, 0 5px currentColor; }
.mark-exit { border: 0; border-right: 2px solid currentColor; }
.mark-exit::before { content: ""; position: absolute; left: 1px; top: 8px; width: 13px; height: 2px; background: currentColor; }
.mark-exit::after { content: ""; position: absolute; left: 1px; top: 4px; width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }

dialog { padding: 0; border: 0; color: inherit; background: transparent; }
dialog::backdrop { background: rgba(9,7,19,.76); backdrop-filter: blur(3px); }

.game-dialog {
  width: min(100% - 16px, 500px);
  max-height: calc(100svh - 18px);
  overflow: visible;
}

.dialog-frame, .menu-panel {
  position: relative;
  overflow: auto;
  max-height: calc(100svh - 18px);
  border: 3px solid #a66d51;
  border-radius: 8px;
  background: #281b32;
  box-shadow: inset 0 0 0 3px #4d2e44, var(--shadow);
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0 0 3px;
  border: 2px solid #c18859;
  border-radius: 4px;
  color: #fff1d5;
  background: #482d45;
  box-shadow: inset 0 0 0 2px #6b4055, 0 3px 0 #1c1323;
  font-size: 24px;
  cursor: pointer;
}

.close-button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #6b4055, 0 1px 0 #1c1323; }
.close-button:focus-visible, .pixel-button:focus-visible, input:focus-visible { outline: 3px solid #ffe6a4; outline-offset: 3px; }

.dialog-scene {
  position: relative;
  display: grid;
  grid-template-columns: 42% 1fr;
  min-height: min(600px, 84svh);
  background:
    radial-gradient(circle at 18% 30%, rgba(205,128,143,.28), transparent 28%),
    linear-gradient(160deg, #3c2441, #1e1935 58%, #17162e);
}

.guide-frame { overflow: hidden; }
.guide-scene {
  position: relative;
  display: grid;
  grid-template-columns: 44% 1fr;
  min-height: min(610px, 86svh);
  background:
    radial-gradient(circle at 20% 28%, rgba(242,187,96,.24), transparent 31%),
    radial-gradient(circle at 80% 10%, rgba(87,139,131,.2), transparent 30%),
    linear-gradient(155deg, #294348, #24203a 58%, #17152b);
}
.guide-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image: radial-gradient(circle, #ffe4a0 0 1px, transparent 1.5px);
  background-size: 36px 36px;
  pointer-events: none;
}
.guide-portrait-wrap { position: relative; min-height: 440px; align-self: stretch; overflow: hidden; }
.guide-portrait { position: absolute; left: 50%; bottom: -4px; z-index: 2; width: 205px; height: 410px; transform: translateX(-50%); object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 12px 7px rgba(4,3,12,.55)); }
.guide-halo { position: absolute; left: 50%; bottom: 92px; width: 230px; height: 230px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(240,190,91,.36), transparent 67%); }
.guide-copy { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 64px 18px 24px 0; }
.guide-speech-box { min-height: 185px; }
.guide-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.guide-actions:has(#guide-secondary:not([hidden])) { grid-template-columns: 1fr 1fr; }
.guide-actions:has(#guide-back:not([hidden])) { grid-template-columns: minmax(84px, .38fr) 1fr; }
.guide-actions:has(#guide-back:not([hidden])):has(#guide-secondary:not([hidden])) { grid-template-columns: 1fr 1fr; }
.guide-actions:has(#guide-back:not([hidden])):has(#guide-secondary:not([hidden])) #guide-back { grid-column: auto; }
.guide-back { white-space: nowrap; }

.dialog-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .25;
  background-image: radial-gradient(circle, #ffe4a0 0 1px, transparent 1.5px);
  background-size: 34px 34px;
  pointer-events: none;
}

.portrait-wrap { position: relative; min-height: 420px; align-self: stretch; overflow: hidden; }
.portrait { position: absolute; left: 50%; bottom: -4px; z-index: 2; width: 180px; height: 360px; transform: translateX(-50%); filter: drop-shadow(0 12px 6px rgba(4,3,12,.55)); }
.portrait-glow { position: absolute; left: 50%; bottom: 80px; width: 220px; height: 220px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(246,191,104,.35), transparent 66%); }

.dialog-copy { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 64px 18px 24px 0; }
.npc-heading span, .step-label, .result-eyebrow { color: var(--gold); font: 800 10px/1.2 ui-monospace, monospace; letter-spacing: .09em; }
.npc-heading h2 { margin: 4px 0 0; font-size: 30px; line-height: 1; text-shadow: 2px 2px #321b37; }

.speech-box {
  position: relative;
  min-height: 150px;
  padding: 18px 16px 26px;
  border: 3px solid #9d624d;
  border-radius: 5px;
  color: var(--ink);
  background: linear-gradient(#fff0cf, #efd2a3);
  box-shadow: inset 0 0 0 3px #f8e0b7, 0 6px 0 #311b31;
}

.speech-box p { margin: 0; font-size: 15px; line-height: 1.75; word-break: keep-all; }
.continue-dot { position: absolute; right: 14px; bottom: 10px; width: 0; height: 0; border: 6px solid transparent; border-top-color: #8a4d49; animation: blink .9s steps(1,end) infinite; }
@keyframes blink { 50% { opacity: .15; } }

.pixel-button {
  min-height: 48px;
  padding: 12px 18px;
  border: 2px solid;
  border-radius: 4px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .16s ease, transform .12s ease, box-shadow .12s ease;
}
.pixel-button:hover { filter: brightness(1.08); }
.pixel-button:active { transform: translateY(3px); }
.pixel-button.primary { border-color: #d39962; color: #fff5d9; background: linear-gradient(#8d4f62, #6b3a53); box-shadow: inset 0 0 0 2px #b36571, 0 4px 0 #321b34; }
.pixel-button.primary:active { box-shadow: inset 0 0 0 2px #b36571, 0 1px 0 #321b34; }
.pixel-button.secondary { border-color: #8b7190; color: #eadceb; background: #40304d; box-shadow: inset 0 0 0 2px #594065, 0 4px 0 #21172a; }

.birth-form, .result-view { padding: 28px 20px 24px; background: linear-gradient(180deg, #31203b, #21182e); }
.form-heading { padding-right: 38px; margin-bottom: 22px; }
.form-heading h2, .result-hero h2, .menu-panel h2 { margin: 6px 0 8px; font-size: 25px; line-height: 1.25; letter-spacing: -.04em; }
.form-heading p, .menu-panel > p { margin: 0; color: #cdbdca; font-size: 12px; line-height: 1.55; }

.field { display: block; margin: 0 0 16px; padding: 0; border: 0; }
.field > span, .field legend { display: block; margin-bottom: 7px; color: #f4dec5; font-size: 12px; font-weight: 800; }
.field legend small { color: #99899b; font-weight: 500; }
.field input[type="text"], .field input[type="date"], .field input[type="time"], .field > input:not([type]) {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 2px solid #715067;
  border-radius: 4px;
  color: #fff1df;
  background: #171525;
  color-scheme: dark;
}
.field > input:focus { border-color: #d7a567; }
.field > input::placeholder { color: #77697d; }

.segmented { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.segmented.three { grid-template-columns: repeat(3, 1fr); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: grid; place-items: center; min-height: 44px; border: 2px solid #60435b; border-radius: 4px; color: #bba9b7; background: #1e1829; font-size: 12px; cursor: pointer; }
.segmented input:checked + span { border-color: #d29c64; color: #fff0d0; background: #694057; box-shadow: inset 0 0 0 2px #8b5363; }
.segmented input:focus-visible + span { outline: 3px solid #ffe6a4; outline-offset: 2px; }

.check-field { display: flex; align-items: center; gap: 9px; margin: -5px 0 18px; color: #c7b7c5; font-size: 12px; cursor: pointer; }
.check-field input { width: 19px; height: 19px; accent-color: #c0717b; }
.form-note { margin: 6px 0 18px; padding: 10px 12px; border-left: 3px solid #8e667f; color: #aa9bac; background: rgba(255,255,255,.035); font-size: 10px; line-height: 1.55; }
.birth-form > .pixel-button { width: 100%; }

.oracle-loading {
  min-height: min(590px, 82svh);
  padding: 88px 28px 48px;
  text-align: center;
  background: radial-gradient(circle at 50% 30%, #43316a, #221a39 48%, #171326);
}
.oracle-loading > span { color: #c3a6da; font: 800 10px/1 ui-monospace, monospace; letter-spacing: .12em; }
.oracle-loading h2 { max-width: 280px; margin: 18px auto 26px; font-size: 22px; line-height: 1.5; }
.constellation { position: relative; width: 150px; height: 150px; margin: 0 auto 36px; border: 1px solid rgba(225,197,255,.2); border-radius: 50%; animation: orbit 8s linear infinite; }
.constellation::before, .constellation::after { content: ""; position: absolute; left: 50%; top: 50%; width: 95px; height: 1px; background: linear-gradient(90deg, transparent, #a98ed0, transparent); transform: translate(-50%,-50%) rotate(35deg); }
.constellation::after { transform: translate(-50%,-50%) rotate(-42deg); }
.constellation i { position: absolute; width: 8px; height: 8px; transform: rotate(45deg); background: #ffe09b; box-shadow: 0 0 12px #e2bbff; }
.constellation i:nth-child(1) { left: 20px; top: 42px; }
.constellation i:nth-child(2) { left: 63px; top: 18px; }
.constellation i:nth-child(3) { right: 19px; top: 54px; }
.constellation i:nth-child(4) { left: 42px; bottom: 20px; }
.constellation i:nth-child(5) { right: 41px; bottom: 34px; }
@keyframes orbit { to { transform: rotate(360deg); } }
.loading-bar { width: 220px; max-width: 80%; height: 8px; margin: 0 auto; padding: 2px; border: 1px solid #80669b; background: #151020; }
.loading-bar span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #a369c2, #ffd978); animation: load 1.55s var(--ease) forwards; }
@keyframes load { to { width: 100%; } }

.result-view { padding-top: 44px; }
.result-hero { padding: 18px; border: 2px solid #ad775a; border-radius: 5px; background: radial-gradient(circle at 100% 0, rgba(255,218,133,.2), transparent 42%), linear-gradient(135deg, #59405d, #352943); box-shadow: inset 0 0 0 2px #72506a, 0 5px 0 #1b1425; }
.result-hero h2 { color: #fff0ce; }
.keyword-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.keyword-row span { padding: 5px 8px; border: 1px solid #c89b70; border-radius: 999px; color: #ffe2ab; background: #34243e; font-size: 10px; }
.result-summary { margin: 22px 2px; color: #f1dfdb; font-size: 14px; line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; }
.result-summary .reading-paragraph,
.reading-card-body .reading-paragraph { margin: 0; }
.result-summary .reading-paragraph + .reading-paragraph,
.reading-card-body .reading-paragraph + .reading-paragraph { margin-top: 16px; }
.reading-cards { display: grid; gap: 10px; }
.reading-tier { margin-top: 18px; }
.reading-tier-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.reading-tier-heading > span:first-child { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border: 1px solid #9b6b77; border-radius: 4px; color: #ffd584; background: #31233d; box-shadow: inset 0 0 0 2px #493049; }
.reading-tier-heading h3 { margin: 0; color: #fae7cc; font-size: 15px; }
.free-reading-tier { padding: 16px; border: 1px solid #694e67; border-radius: 5px; background: linear-gradient(180deg, rgba(70,48,76,.38), rgba(27,23,39,.25)); }
.free-reading-tier .result-summary { margin: 14px 0 16px; }
.premium-reading-tier { position: relative; margin-top: 14px; padding: 16px; border: 1px solid #9a6b62; border-radius: 5px; background: radial-gradient(circle at 50% 0, rgba(255,205,119,.13), transparent 38%), #201829; box-shadow: inset 0 0 0 2px rgba(86,55,77,.65); }
.premium-lock-mark svg, .premium-lock-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
.premium-lock-panel { position: relative; z-index: 2; display: grid; justify-items: center; padding: 4px 10px; text-align: center; }
.premium-lock-icon { display: grid; width: 42px; height: 42px; margin-bottom: 9px; place-items: center; border: 2px solid #d09a68; border-radius: 50%; color: #ffe29d; background: #3b2940; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.premium-lock-panel strong { color: #fff0d0; font-size: 15px; }
.premium-lock-panel p { max-width: 290px; margin: 7px 0 13px; color: #cdbbc8; font-size: 11px; line-height: 1.6; word-break: keep-all; }
.premium-lock-panel .pixel-button { width: min(100%, 310px); }
.premium-lock-panel > small { margin-top: 8px; color: #8f7e8e; font-size: 9px; }
.reading-card { padding: 15px; border: 1px solid #60475f; border-left: 4px solid #c98772; border-radius: 4px; background: #1b1727; }
.reading-card span { color: #dda997; font: 800 9px/1 ui-monospace, monospace; letter-spacing: .08em; }
.reading-card h3 { margin: 6px 0 7px; color: #f7e9d3; font-size: 15px; }
.reading-card p { margin: 0; color: #c9bcc9; font-size: 12px; line-height: 1.7; word-break: keep-all; }
.reading-card-body { min-width: 0; color: #c9bcc9; font-size: 12px; line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; }
.reading-card.is-locked-teaser { position: relative; overflow: hidden; min-height: 158px; border-color: #7c5d69; background: linear-gradient(145deg, #211824, #17131f 62%); box-shadow: inset 0 0 0 1px rgba(179,126,112,.16); }
.reading-card.is-locked-teaser::after { content: ""; position: absolute; inset: 72px 0 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(23,19,31,.72) 42%, #17131f 82%); }
.locked-reading-heading { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; filter: none; opacity: 1; }
.locked-reading-heading > span:first-child { color: #e1b6a5; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.inline-lock-icon { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border: 1px solid #a87868; border-radius: 4px; color: #ffe09a; background: #32233a; }
.inline-lock-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: square; stroke-linejoin: miter; }
.reading-card.is-locked-teaser h3 { position: relative; z-index: 3; max-width: 300px; margin: 10px 0 11px; color: #fff0d2; font-size: 16px; line-height: 1.42; word-break: keep-all; filter: none; opacity: 1; }
.locked-copy-preview { position: relative; z-index: 1; max-width: 96%; margin: 0; color: #dcc5ca; font-size: 12px; line-height: 1.75; filter: blur(3.6px); opacity: .62; user-select: none; }
.reading-card.is-locked-teaser > strong { position: absolute; right: 15px; bottom: 13px; z-index: 2; color: #f1c67f; font-size: 11px; }
.followup-block { margin-top: 18px; padding: 16px; border: 1px dashed #775978; background: rgba(255,255,255,.025); }
.followup-block > span { display: block; margin-bottom: 10px; color: #e4cadb; font-size: 12px; font-weight: 800; }
.question-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.question-chips button { padding: 8px 10px; border: 1px solid #795a78; border-radius: 999px; color: #d7c4d5; background: #2d2237; font-size: 10px; cursor: pointer; }
.question-chips button:hover, .question-chips button:focus-visible { border-color: #e0a472; color: #ffe7bb; outline: none; }
.followup-answer { margin: 13px 0 0; padding-top: 12px; border-top: 1px solid #4e3a50; color: #dbcfd9; font-size: 12px; line-height: 1.7; }
.result-actions { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 18px; }

.menu-dialog { width: min(calc(100% - 24px), 470px); }
.menu-panel { padding: 28px 18px 22px; background: linear-gradient(160deg, #31213b, #20172c); }
.menu-panel > h2, .menu-panel > p { padding-right: 36px; }
.atlas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
.atlas-card { position: relative; min-height: 158px; overflow: hidden; padding: 13px; border: 2px solid #60475d; border-radius: 5px; background: #191624; }
.atlas-card.is-awake { border-color: #b58159; background: radial-gradient(circle at 70% 10%, rgba(245,196,108,.2), transparent 40%), #2f2137; }
.atlas-mini { position: absolute; right: -2px; bottom: -16px; width: 82px; height: 164px; filter: grayscale(1) brightness(.45); opacity: .55; }
.atlas-card.is-awake .atlas-mini { filter: none; opacity: 1; }
.atlas-card small { color: #b493a8; font-size: 9px; }
.atlas-card h3 { position: relative; z-index: 2; max-width: 80px; margin: 7px 0 4px; font-size: 15px; }
.atlas-status { position: relative; z-index: 2; color: #8e7c90; font-size: 10px; }
.atlas-card.is-awake .atlas-status { color: #f0bd74; }

.journal-list { display: grid; gap: 10px; margin-top: 20px; }
.journal-empty { padding: 40px 18px; border: 1px dashed #645064; color: #a998aa; text-align: center; font-size: 12px; line-height: 1.7; }
.journal-entry { padding: 14px; border: 1px solid #5d465c; border-left: 4px solid #b87574; background: #191522; }
.journal-entry small { color: #a48ea2; font-size: 9px; }
.journal-entry h3 { margin: 5px 0 6px; color: #f5dfc6; font-size: 14px; }
.journal-entry p { margin: 0; color: #bdafbd; font-size: 11px; line-height: 1.6; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(90px + env(safe-area-inset-bottom));
  z-index: 100;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 10px 14px;
  transform: translate(-50%, 20px);
  border: 2px solid #c58a5e;
  border-radius: 4px;
  color: #fff0d4;
  background: #38243b;
  box-shadow: 0 5px 0 #1c1424;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s var(--ease);
  font-size: 12px;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

[hidden] { display: none !important; }

@media (max-width: 390px) {
  .game-map { min-height: 620px; }
  .quest-card { top: calc(68px + env(safe-area-inset-top)); }
  .npc-label { min-width: 78px; padding-inline: 6px; }
  .npc-label strong { font-size: 9px; }
  .hotspot-love { top: 26%; }
  .hotspot-wealth { top: 27%; }
  .dialog-scene { grid-template-columns: 38% 1fr; }
  .portrait { width: 152px; height: 304px; }
  .dialog-copy { padding-right: 12px; }
  .speech-box { min-height: 165px; padding-inline: 13px; }
  .speech-box p { font-size: 13px; }
  .guide-scene { grid-template-columns: 39% 1fr; }
  .guide-portrait { width: 172px; height: 344px; }
  .guide-copy { padding-right: 12px; }
  .guide-actions:has(#guide-secondary:not([hidden])) { grid-template-columns: 1fr; }
  .guide-actions:has(#guide-back:not([hidden])) { grid-template-columns: minmax(76px, .34fr) 1fr; }
  .guide-actions:has(#guide-back:not([hidden])):has(#guide-secondary:not([hidden])) { grid-template-columns: minmax(76px, .34fr) 1fr; }
  .guide-actions:has(#guide-back:not([hidden])):has(#guide-secondary:not([hidden])) #guide-back { grid-column: auto; }
}

/* v99: Seoul-time day/night ambience and obstacle-safe directional walking. */
.game-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 17% 13%, rgba(233, 211, 255, .78) 0 1px, transparent 1.8px),
    radial-gradient(circle at 78% 18%, rgba(255, 229, 181, .72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 66% 7%, rgba(218, 199, 255, .64) 0 1px, transparent 1.7px),
    linear-gradient(180deg, rgba(33, 22, 91, .26), rgba(73, 34, 109, .12) 52%, rgba(17, 26, 78, .3));
  background-size: 88px 112px, 132px 156px, 174px 198px, 100% 100%;
  box-shadow: inset 0 0 90px rgba(13, 15, 57, .28);
  transition: opacity 1.4s ease;
}

.game-map.is-night::before { opacity: 1; }

.game-map.is-night .map-art,
.game-map.is-night .intro-landscape {
  filter: brightness(.78) saturate(1.14) contrast(1.04) hue-rotate(8deg) !important;
}

.game-map.is-night .map-tint {
  opacity: .66 !important;
  mix-blend-mode: color !important;
  background: linear-gradient(180deg, rgba(61, 42, 151, .38), rgba(115, 55, 144, .12) 48%, rgba(28, 32, 108, .32)) !important;
}

.game-map.is-night .map-building,
.game-map.is-night .intro-map-building {
  filter: brightness(.86) saturate(1.12) contrast(1.04)
          drop-shadow(0 7px 3px rgba(10, 9, 45, .48))
          drop-shadow(0 0 5px rgba(255, 190, 86, .2));
}

.game-map.is-night .intro-sequence.is-running .intro-world {
  animation-name: intro-camera-world-night-v99 !important;
}

@keyframes intro-camera-world-night-v99 {
  0%, 10% { transform: translate3d(0, -18%, 0) scale(1.2); filter: brightness(.76) saturate(1.14) contrast(1.04) hue-rotate(8deg); }
  58% { transform: translate3d(0, -8%, 0) scale(1.1); filter: brightness(.78) saturate(1.14) contrast(1.04) hue-rotate(8deg); }
  100% { transform: translate3d(0, 0, 0) scale(1); filter: brightness(.8) saturate(1.14) contrast(1.04) hue-rotate(8deg); }
}

.player.movement-sprite[data-direction] {
  --player-scale-x: 1;
  --player-scale-y: 1;
  width: 86px !important;
  height: 86px !important;
  background-image: url("./assets/player-walk-directional-v4.png") !important;
  background-size: 400% 300% !important;
  background-repeat: no-repeat !important;
  transform: translate(-50%, -74%) !important;
  transition:
    left var(--walk-duration, 620ms) linear,
    top var(--walk-duration, 620ms) linear !important;
}

.player.movement-sprite.is-route-reset { transition: none !important; }
.player.movement-sprite:not(.is-walking)[data-direction="down"] { background-position: 0% 0% !important; }
.player.movement-sprite:not(.is-walking)[data-direction="up"] { background-position: 0% 50% !important; }
.player.movement-sprite:not(.is-walking)[data-direction="left"] { background-position: 0% 100% !important; }
.player.movement-sprite:not(.is-walking)[data-direction="right"] { background-position: 66.666667% 100% !important; }

@keyframes player-walk-down-v99 {
  0%, 24% { background-position: 33.333333% 0%; }
  25%, 49% { background-position: 66.666667% 0%; }
  50%, 74% { background-position: 100% 0%; }
  75%, 100% { background-position: 66.666667% 0%; }
}
@keyframes player-walk-up-v99 {
  0%, 24% { background-position: 33.333333% 50%; }
  25%, 49% { background-position: 66.666667% 50%; }
  50%, 74% { background-position: 100% 50%; }
  75%, 100% { background-position: 66.666667% 50%; }
}
@keyframes player-walk-left-v99 {
  0%, 49% { background-position: 0% 100%; }
  50%, 100% { background-position: 33.333333% 100%; }
}
@keyframes player-walk-right-v99 {
  0%, 49% { background-position: 66.666667% 100%; }
  50%, 100% { background-position: 100% 100%; }
}
@keyframes player-footfall-v99 {
  0%, 100% { transform: translate(-50%, -74%) translateY(0); }
  50% { transform: translate(-50%, -74%) translateY(-1px); }
}

.player.movement-sprite.is-walking[data-direction="down"] {
  animation: player-walk-down-v99 .54s steps(1, end) infinite, player-footfall-v99 .27s steps(2, end) infinite !important;
}
.player.movement-sprite.is-walking[data-direction="up"] {
  animation: player-walk-up-v99 .54s steps(1, end) infinite, player-footfall-v99 .27s steps(2, end) infinite !important;
}
.player.movement-sprite.is-walking[data-direction="left"] {
  animation: player-walk-left-v99 .46s steps(1, end) infinite, player-footfall-v99 .23s steps(2, end) infinite !important;
}
.player.movement-sprite.is-walking[data-direction="right"] {
  animation: player-walk-right-v99 .46s steps(1, end) infinite, player-footfall-v99 .23s steps(2, end) infinite !important;
}

/* v109: keep the opening sprite's native 44x88 frame and walk cycle, but
   prevent the old blurred drop-shadow from painting black wings on both sides. */
.intro-player.movement-sprite {
  filter: none !important;
  contain: paint;
  overflow: hidden;
  clip-path: inset(0 2px);
}

@media (prefers-reduced-motion: reduce) {
  .game-map::before { transition: none; }
  .player.movement-sprite.is-walking { animation-duration: .8s !important; }
}

/* Moonlight Arcade — isolated from the village and consultation screens. */
.bottom-nav,
.my-page-mobile-nav,
.arcade-page-nav { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

.arcade-dialog {
  width: min(calc(100% - 28px), 460px);
  max-width: 460px;
  height: auto;
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: #fff1d7;
  background: #151228;
  border: 1px solid rgba(255, 222, 150, .2);
  border-radius: 20px;
  box-shadow: 0 28px 70px rgba(5, 3, 18, .58);
}
.arcade-dialog.is-playing {
  width: min(100%, 560px);
  max-width: 560px;
  height: 100dvh;
  max-height: 100dvh;
  border: 0;
  border-radius: 0;
}
.arcade-dialog::backdrop { background: rgba(7, 5, 19, .82); backdrop-filter: blur(4px); }
.arcade-shell {
  display: flex;
  flex-direction: column;
  height: min(720px, calc(100dvh - 28px));
  min-height: 0;
  background:
    radial-gradient(circle at 50% -10%, rgba(137, 87, 202, .32), transparent 38%),
    linear-gradient(180deg, #221a40, #151228 58%, #0e0d1d);
}
.arcade-dialog.is-playing .arcade-shell { height: 100%; }
.arcade-header {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: calc(74px + env(safe-area-inset-top));
  padding: calc(12px + env(safe-area-inset-top)) 14px 10px;
  background: rgba(18, 14, 35, .84);
  border-bottom: 1px solid rgba(248, 205, 126, .14);
  box-shadow: 0 8px 24px rgba(5, 3, 18, .22);
}
.arcade-header small { display: block; margin-bottom: 3px; color: #cda5eb; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.arcade-header h2 { margin: 0; color: #fff0cf; font-size: 20px; line-height: 1.15; }
.arcade-back,
.arcade-game-exit,
.arcade-pause {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #f7dfbe;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255, 224, 164, .13);
  border-radius: 12px;
}
.arcade-back svg,
.arcade-game-exit svg,
.arcade-pause svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.arcade-wallet { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; color: #ffe09b; background: rgba(255, 208, 105, .08); border: 1px solid rgba(255, 215, 133, .16); border-radius: 999px; font-size: 11px; }
.arcade-wallet > span,
.arcade-reward-gem { width: 13px; height: 13px; background: linear-gradient(135deg, #ffe7a1 0 18%, #c98eff 19% 60%, #7650bf 61%); border: 1px solid #f8d18b; transform: rotate(45deg); box-shadow: 0 0 8px rgba(201, 142, 255, .42); }
.arcade-wallet b { white-space: nowrap; }
.arcade-content { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.arcade-library {
  height: 100%;
  overflow-y: auto;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  scrollbar-color: rgba(230, 178, 255, .45) rgba(36, 23, 67, .32);
  background:
    radial-gradient(circle at 11% 28%, rgba(255, 226, 153, .1) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 22%, rgba(226, 184, 255, .18) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 72%, rgba(255, 220, 143, .12) 0 1px, transparent 2px),
    linear-gradient(180deg, #1b1239, #120f2b 70%, #0d0c20);
}
.arcade-library::-webkit-scrollbar { width: 6px; }
.arcade-library::-webkit-scrollbar-thumb { background: rgba(230, 178, 255, .42); border-radius: 999px; }
.arcade-library-intro {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 148px;
  margin: 0 -16px 18px;
  padding: 40px 56px 24px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(169, 106, 238, .5), transparent 52%),
    linear-gradient(180deg, rgba(39, 25, 76, .94), rgba(28, 18, 57, .72));
  border-bottom: 1px solid rgba(255, 211, 142, .22);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 93% 85%, 89% 100%, 11% 100%, 7% 85%, 0 85%);
}
.arcade-library-intro::before,
.arcade-library-intro::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 16px;
  width: 46px;
  border: solid rgba(215, 150, 255, .4);
}
.arcade-library-intro::before { left: 5px; border-width: 3px 0 3px 3px; border-radius: 22px 0 0 22px; }
.arcade-library-intro::after { right: 5px; border-width: 3px 3px 3px 0; border-radius: 0 22px 22px 0; }
.arcade-library-intro h3 { position: relative; z-index: 2; margin: 8px 0 5px; color: #fff0c5; font-size: clamp(25px, 7vw, 32px); line-height: 1.15; letter-spacing: -.03em; text-shadow: 0 3px 0 #5d347a, 0 0 18px rgba(255, 214, 134, .28); }
.arcade-library-intro p { position: relative; z-index: 2; max-width: 30ch; margin: 0; color: rgba(255, 238, 210, .76); font-size: 12px; line-height: 1.55; word-break: keep-all; }
.arcade-hall-moon { position: absolute; z-index: 1; top: 10px; left: 50%; width: 44px; height: 44px; border-radius: 50%; background: #ffd981; box-shadow: 0 0 20px rgba(255, 217, 129, .38); transform: translateX(-50%); }
.arcade-hall-moon::after { content: ""; position: absolute; left: 14px; top: -4px; width: 42px; height: 42px; border-radius: 50%; background: #2b1a59; }
.arcade-hall-lantern { position: absolute; z-index: 2; top: 35px; width: 18px; height: 28px; background: linear-gradient(90deg, #573469, #ffd782 50%, #573469); border: 2px solid #ac6f91; border-radius: 4px; box-shadow: 0 0 14px rgba(255, 205, 118, .38); }
.arcade-hall-lantern::before { content: ""; position: absolute; left: 6px; top: -16px; width: 2px; height: 16px; background: #a66a8e; }
.arcade-hall-lantern.lantern-left { left: 31px; }
.arcade-hall-lantern.lantern-right { right: 31px; }
.arcade-game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.arcade-game-card {
  position: relative;
  display: grid;
  grid-template-rows: 118px auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  background: linear-gradient(180deg, #2d1c50, #1e173c);
  border: 2px solid rgba(229, 167, 244, .58);
  border-radius: 16px;
  box-shadow: 0 13px 24px rgba(3, 2, 15, .28), inset 0 0 0 2px rgba(255, 215, 149, .08);
  text-align: left;
  cursor: pointer;
  transition: filter .14s ease, box-shadow .14s ease;
}
.arcade-game-card::before { content: ""; position: absolute; z-index: 5; left: 50%; top: -7px; width: 24px; height: 14px; background: #ffd887; border: 3px solid #6a3c7c; transform: translateX(-50%) rotate(45deg); box-shadow: inset 0 0 0 2px #bd78a6; }
.arcade-game-card--active { border-color: rgba(255, 211, 139, .78); }
.arcade-game-card--active:hover { filter: brightness(1.04); box-shadow: 0 13px 24px rgba(3, 2, 15, .28), 0 0 18px rgba(223, 150, 255, .18); }
.arcade-game-card--active:active { transform: none; filter: brightness(1.07); }
.arcade-game-card:focus-visible { outline: 3px solid rgba(255, 218, 141, .62); outline-offset: 3px; }
.arcade-card-sky {
  position: relative;
  display: block;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 22%, #f7d88d 0 2px, transparent 3px),
    radial-gradient(circle at 70% 17%, #e9c4ff 0 1px, transparent 2px),
    radial-gradient(circle at 85% 42%, #f7d88d 0 2px, transparent 3px),
    radial-gradient(circle at 46% 33%, #fff0ba 0 1px, transparent 2px),
    linear-gradient(180deg, #221951, #4a2769 64%, #1d173d);
}
.arcade-card-sky::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -25px; height: 86px; background: linear-gradient(160deg, #151532 48%, transparent 49%) 0 0 / 45% 100%, linear-gradient(200deg, #21153d 48%, transparent 49%) 100% 0 / 55% 100%; background-repeat: no-repeat; opacity: .95; }
.arcade-card-star { position: absolute; width: 18px; height: 18px; background: #ffe699; clip-path: polygon(50% 0,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0 50%,39% 35%); filter: drop-shadow(0 0 7px #ffd36a); transform: rotate(18deg); }
.arcade-card-star::after { content: ""; position: absolute; right: 11px; top: 11px; width: 55px; height: 3px; background: linear-gradient(90deg, transparent, rgba(255, 220, 132, .72)); transform: rotate(-42deg); transform-origin: right; }
.arcade-card-star.star-one { left: 20%; top: 32%; }
.arcade-card-star.star-two { right: 20%; top: 42%; transform: scale(.7) rotate(8deg); }
.arcade-card-moon { position: absolute; right: 12%; top: 10%; width: 36px; height: 36px; border-radius: 50%; background: #ffe4a1; box-shadow: 0 0 18px rgba(255, 213, 118, .44); }
.arcade-card-player { position: absolute; z-index: 2; left: 50%; bottom: 0; width: 56px; height: 56px; background-image: url("./assets/player-walk-directional-v4.png"); background-repeat: no-repeat; background-size: 224px 168px; background-position: 0 0; image-rendering: pixelated; transform: translateX(-50%); overflow: hidden; }
.arcade-card-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 7px; min-height: 91px; padding: 12px 12px 13px; }
.arcade-card-copy small { grid-column: 1 / -1; color: #cda5ea; font-size: 10px; font-weight: 800; }
.arcade-card-copy strong { color: #fff0cf; font-size: 17px; line-height: 1.25; word-break: keep-all; }
.arcade-card-copy em { grid-column: 1 / -1; color: rgba(255, 240, 211, .61); font-size: 10px; font-style: normal; line-height: 1.45; word-break: keep-all; }
.arcade-card-copy > span { grid-column: 2; grid-row: 2; align-self: center; color: #ffd77f; font-size: 10px; font-weight: 800; white-space: nowrap; }
.arcade-card-copy > span b { margin-left: 4px; }
.arcade-game-card--coming { grid-template-rows: 118px auto; cursor: default; opacity: 1; }
.arcade-game-card--coming:disabled { color: inherit; }
.arcade-coming-art { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(164, 104, 215, .38), transparent 36%), linear-gradient(180deg, #271845, #3d245b 68%, #20163b); }
.arcade-coming-art::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255, 208, 147, .16); border-radius: 50% 50% 44% 44%; }
.arcade-coming-art i { position: relative; width: 48px; height: 48px; opacity: .58; filter: drop-shadow(0 0 10px rgba(226, 173, 255, .35)); }
.coming-crystal .arcade-coming-art i { border: 3px solid #d3a1ec; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f8dcff, #8e5fbd 28%, #342057 70%); }
.coming-crystal .arcade-coming-art i::after { content: ""; position: absolute; left: -9px; right: -9px; bottom: -10px; height: 11px; background: #c68ccf; border: 2px solid #6a3c7c; border-radius: 50%; }
.coming-moon .arcade-coming-art i { width: 44px; height: 44px; border-radius: 50%; background: #e2bdeb; }
.coming-moon .arcade-coming-art i::after { content: ""; position: absolute; left: 15px; top: -5px; width: 43px; height: 43px; border-radius: 50%; background: #30204f; }
.coming-cat .arcade-coming-art i { width: 52px; height: 36px; margin-top: 12px; background: #b181c5; border-radius: 48% 48% 40% 40%; }
.coming-cat .arcade-coming-art i::before,
.coming-cat .arcade-coming-art i::after { content: ""; position: absolute; top: -13px; width: 20px; height: 22px; background: #b181c5; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.coming-cat .arcade-coming-art i::before { left: 2px; }
.coming-cat .arcade-coming-art i::after { right: 2px; transform: scaleX(-1); }
.arcade-coming-copy { display: grid; place-content: center; gap: 5px; min-height: 91px; padding: 12px; text-align: center; background: linear-gradient(180deg, rgba(38, 25, 70, .9), rgba(27, 20, 52, .96)); }
.arcade-coming-copy strong { color: #e4b6ef; font-size: 13px; letter-spacing: .06em; }
.arcade-coming-copy small { color: rgba(255, 234, 210, .5); font-size: 10px; }
.arcade-reward-note { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 11px 13px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; }
.arcade-reward-note .arcade-reward-gem { flex: 0 0 15px; }
.arcade-reward-note p { display: grid; gap: 3px; margin: 0; }
.arcade-reward-note strong { color: #f9dfb2; font-size: 12px; }
.arcade-reward-note small { color: rgba(255, 241, 215, .5); font-size: 10px; line-height: 1.45; }

.arcade-game { position: relative; box-sizing: border-box; height: 100%; min-height: 0; padding: 10px 10px 12px; }
.arcade-game[hidden],
.arcade-library[hidden],
.arcade-overlay[hidden] { display: none !important; }
.arcade-game-topbar { position: absolute; z-index: 40; left: 10px; right: 10px; top: 10px; display: grid; place-items: center; height: 38px; margin: 0; pointer-events: none; }
.arcade-game-topbar h3 { margin: 0; color: #fff0d1; font-size: 16px; text-align: center; }
.arcade-pause:disabled { opacity: .36; }
.arcade-stage {
  position: relative;
  z-index: 1;
  contain: layout paint;
  isolation: isolate;
  transform: translateZ(0);
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  background: #171844 url("./assets/arcade-game-night-v2.png") center / cover no-repeat;
  border: 1px solid rgba(255, 218, 142, .2);
  border-radius: 18px;
  box-shadow: inset 0 0 42px rgba(4, 2, 18, .4), 0 18px 40px rgba(3, 2, 13, .28);
  outline: none;
}
.arcade-stage::before { content: none; }
.arcade-scenery { display: none; }
.arcade-scenery-moon { position: absolute; right: 11%; top: 19%; width: 82px; height: 82px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff3c7 0 5%, #f5cf82 36%, #c981aa 72%, rgba(201,129,170,.08) 73%); box-shadow: 0 0 28px rgba(255, 221, 150, .34), 0 0 70px rgba(176, 106, 205, .22); opacity: .86; }
.arcade-scenery-cloud { position: absolute; height: 22px; border-radius: 999px; background: rgba(119, 82, 157, .25); box-shadow: 23px -9px 0 rgba(119,82,157,.22), 49px 1px 0 rgba(95,69,137,.2), 72px -5px 0 rgba(95,69,137,.16); filter: blur(.2px); }
.arcade-scenery-cloud.cloud-one { left: 3%; top: 28%; width: 72px; }
.arcade-scenery-cloud.cloud-two { right: 5%; top: 39%; width: 58px; transform: scale(.8); opacity: .72; }
.arcade-scenery-ridge { position: absolute; left: -8%; right: -8%; bottom: 60px; height: 180px; clip-path: polygon(0 55%, 9% 39%, 20% 53%, 32% 30%, 43% 51%, 57% 25%, 68% 46%, 80% 31%, 91% 51%, 100% 38%, 100% 100%, 0 100%); }
.arcade-scenery-ridge.ridge-back { bottom: 82px; background: linear-gradient(180deg, rgba(77,55,119,.82), rgba(31,29,70,.96)); opacity: .72; }
.arcade-scenery-ridge.ridge-front { bottom: 25px; height: 155px; background: linear-gradient(180deg, #211d4b, #12152f 72%); clip-path: polygon(0 48%, 12% 30%, 25% 49%, 38% 24%, 49% 45%, 63% 29%, 74% 48%, 87% 22%, 100% 42%, 100% 100%, 0 100%); }
.arcade-scenery-village { position: absolute; left: 8%; right: 8%; bottom: 34px; height: 72px; background: linear-gradient(90deg, transparent 0 5%, #191831 5% 13%, transparent 13% 17%, #21193a 17% 29%, transparent 29% 34%, #17162e 34% 47%, transparent 47% 54%, #21193a 54% 68%, transparent 68% 73%, #17162e 73% 84%, transparent 84%); clip-path: polygon(0 56%, 5% 56%, 9% 29%, 13% 56%, 18% 56%, 23% 18%, 29% 56%, 36% 56%, 40% 35%, 44% 56%, 55% 56%, 61% 22%, 68% 56%, 75% 56%, 79% 31%, 84% 56%, 90% 56%, 94% 25%, 100% 56%, 100% 100%, 0 100%); box-shadow: inset 0 -18px rgba(9,12,28,.72); }
.arcade-scenery-village::after { content: ""; position: absolute; inset: 44px 8% auto; height: 3px; background: repeating-linear-gradient(90deg, #ffd27b 0 3px, transparent 3px 18px); opacity: .62; filter: drop-shadow(0 0 3px #e8a762); }
.arcade-night-glow { display: none; }
.arcade-night-glow::after { content: ""; position: absolute; left: -15%; right: -15%; bottom: 0; height: 65px; background: linear-gradient(165deg, #12142e 48%, transparent 49%) 0 0/45% 100%, linear-gradient(195deg, #1d1738 48%, transparent 49%) 100% 0/55% 100%; background-repeat: no-repeat; }
.arcade-hud { position: absolute; z-index: 8; left: 10px; right: 10px; top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; pointer-events: none; }
.arcade-hud > span { display: grid; gap: 2px; min-height: 47px; padding: 7px 8px; background: rgba(15, 10, 34, .78); border: 1px solid rgba(255, 220, 151, .14); border-radius: 10px; text-align: center; backdrop-filter: blur(3px); }
.arcade-hud small { color: rgba(255, 239, 209, .56); font-size: 9px; }
.arcade-hud b { color: #ffe19b; font-size: 14px; letter-spacing: .02em; }
.arcade-hud > span:nth-child(2) b { color: #f4b4c5; font-size: 12px; letter-spacing: -.08em; }
.arcade-falling-layer,
.arcade-effects-layer { position: absolute; z-index: 3; inset: 0; pointer-events: none; transform: translateY(60px); }
.arcade-falling-item { position: absolute; left: 0; top: 0; display: block; will-change: transform; }
.arcade-falling-item.is-star { width: 25px; height: 25px; background: #ffe493; clip-path: polygon(50% 0,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0 50%,39% 35%); filter: drop-shadow(0 0 5px rgba(255,216,119,.85)); }
.arcade-falling-item.is-star::after { content: ""; position: absolute; right: 15px; top: 14px; width: 36px; height: 3px; background: linear-gradient(90deg, transparent, #ffe4a0); transform: rotate(-38deg); transform-origin: right; }
.arcade-falling-item.is-moon { width: 30px; height: 30px; border-radius: 50%; background: #ffd475; box-shadow: 0 0 8px rgba(255,205,105,.72); }
.arcade-falling-item.is-meteor { width: 31px; height: 31px; border-radius: 45% 53% 48% 54%; background: radial-gradient(circle at 35% 33%, #82788f 0 3px, transparent 4px), radial-gradient(circle at 69% 67%, #3e3a49 0 4px, transparent 5px), linear-gradient(145deg, #716a79, #302d39); border: 2px solid #252332; box-shadow: -8px -10px 0 -5px rgba(142, 103, 91, .58), -14px -17px 0 -8px rgba(176, 112, 78, .36); }
.arcade-player { position: absolute; z-index: 6; left: 50%; bottom: 12px; width: 70px; height: 70px; overflow: hidden; contain: paint; isolation: isolate; background-image: url("./assets/player-walk-directional-v4.png"); background-repeat: no-repeat; background-size: 280px 210px; background-position: 0 0; image-rendering: pixelated; transform: translate(-50%, 0); will-change: left, background-position; }
.arcade-player.is-running { animation: arcade-player-step .55s steps(1, end) infinite; }
.arcade-player.is-hit { animation: arcade-player-hit .55s steps(2, end) 1; }
.arcade-score-pop { position: absolute; z-index: 9; color: #ffe18e; font-size: 16px; font-weight: 900; text-shadow: 0 2px 0 #4b284f, 0 0 8px rgba(255,210,112,.7); transform: translate(-50%, -50%); animation: arcade-score-rise .75s ease-out forwards; }
.arcade-score-pop.is-damage { color: #ff9ca6; }
.arcade-collision-spark { position: absolute; z-index: 8; width: 8px; height: 8px; background: #ffe69b; box-shadow: -12px 0 #ffd37a, 12px 0 #fff0c1, 0 -12px #ffe69b, 0 12px #d9a4ff; transform: translate(-50%, -50%); animation: arcade-spark .45s steps(3, end) forwards; }
.arcade-collision-spark.is-damage { background: #ff929f; box-shadow: -12px 0 #d76374, 12px 0 #ffb7b5, 0 -12px #f37b86, 0 12px #b05a76; }

.arcade-overlay { position: absolute; z-index: 20; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 78px 24px 30px; overflow-y: auto; color: #fff0d3; background: linear-gradient(180deg, rgba(13, 10, 32, .75), rgba(18, 12, 42, .94)); text-align: center; backdrop-filter: blur(5px); }
.arcade-overlay h4 { margin: 14px 0 9px; color: #fff0cf; font-size: 23px; line-height: 1.3; }
.arcade-overlay > p { margin: 0; color: rgba(255, 240, 211, .67); font-size: 12px; line-height: 1.7; word-break: keep-all; }
.arcade-intro-moon,
.arcade-pause-moon { position: relative; display: block; width: 58px; height: 58px; border-radius: 50%; background: #ffe09a; box-shadow: 0 0 25px rgba(255, 211, 119, .4); }
.arcade-intro-overlay ul { display: grid; gap: 8px; width: min(100%, 280px); margin: 18px 0 20px; padding: 0; list-style: none; }
.arcade-intro-overlay li { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 8px 12px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; text-align: left; }
.arcade-intro-overlay li span { display: flex; justify-content: space-between; flex: 1; color: #f4dfc5; font-size: 12px; }
.arcade-intro-overlay li b { color: #ffd982; }
.mini-star { width: 20px; height: 20px; background: #ffe493; clip-path: polygon(50% 0,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0 50%,39% 35%); }
.mini-moon { position: relative; width: 20px; height: 20px; border-radius: 50%; background: #ffd475; overflow: hidden; }
.arcade-card-moon,
.arcade-falling-item.is-moon,
.arcade-intro-moon,
.arcade-pause-moon,
.mini-moon {
  -webkit-mask-image: radial-gradient(circle at 78% 24%, transparent 0 47%, #000 49%);
  mask-image: radial-gradient(circle at 78% 24%, transparent 0 47%, #000 49%);
}
.mini-meteor { width: 20px; height: 20px; border-radius: 48%; background: linear-gradient(145deg, #78717f, #302d39); border: 2px solid #252332; }
.arcade-primary-button,
.arcade-secondary-button { width: min(100%, 280px); min-height: 48px; padding: 11px 18px; border-radius: 10px; font-size: 14px; font-weight: 900; }
.arcade-primary-button { color: #2c173d; background: linear-gradient(180deg, #ffe1a0, #e8b95e); border: 1px solid #fff0c8; box-shadow: 0 4px 0 #8b5a38, 0 9px 18px rgba(3,2,14,.28); }
.arcade-secondary-button { margin-top: 9px; color: #ead8f6; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); }
.arcade-result-overlay > small { color: #d4aaf0; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.arcade-result-score { display: grid; gap: 2px; margin: 10px 0 3px; }
.arcade-result-score span { color: rgba(255,240,211,.58); font-size: 11px; }
.arcade-result-score strong { color: #ffe08e; font-size: 52px; line-height: 1; text-shadow: 0 3px 0 #6d3a54, 0 0 18px rgba(255,211,116,.28); }
.arcade-best { margin-bottom: 14px !important; }
.arcade-best b { color: #e8c3ff; }
.arcade-result-reward { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 11px; width: min(100%, 300px); margin-bottom: 16px; padding: 11px 12px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.07); border-radius: 11px; text-align: left; }
.arcade-result-reward .arcade-reward-gem { margin-left: 2px; }
.arcade-result-reward p { display: grid; gap: 3px; margin: 0; }
.arcade-result-reward strong { color: #f9dfb2; font-size: 11px; }
.arcade-result-reward small { color: rgba(255, 241, 215, .53); font-size: 9px; line-height: 1.4; }
.arcade-login-guide { grid-column: 1 / -1; min-height: 34px; color: #e5c4ff; background: rgba(198,139,242,.08); border: 1px solid rgba(209,160,247,.14); border-radius: 7px; font-size: 10px; font-weight: 800; }

.arcade-page-nav { display: none; }
.arcade-page-nav .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; height: 76px; padding: 8px 3px 7px; color: rgba(255, 239, 210, .68); background: transparent; border: 0; font-size: 10px; font-weight: 800; }
.arcade-page-nav .nav-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.arcade-page-nav .nav-item.is-active { color: #ffe099; background: rgba(255,221,145,.055); }

@keyframes arcade-player-step {
  0%, 24% { background-position: -70px 0; }
  25%, 49% { background-position: -140px 0; }
  50%, 74% { background-position: -210px 0; }
  75%, 100% { background-position: -140px 0; }
}
@keyframes arcade-player-hit { 0%, 100% { opacity: 1; } 25%, 75% { opacity: .25; } }
@keyframes arcade-score-rise { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -40px) scale(1.08); } }
@keyframes arcade-spark { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.45); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9) rotate(45deg); } }

@media (max-width: 819px) {
  .bottom-nav,
  .my-page-mobile-nav {
    padding-inline: 4px !important;
    background-image: linear-gradient(180deg, rgba(53, 34, 58, .98), rgba(28, 22, 43, 1)) !important;
    border-top: 2px solid #8f603e !important;
    box-shadow: inset 0 2px 0 rgba(255, 214, 131, .22), 0 -7px 18px rgba(8, 6, 20, .3) !important;
  }
  .bottom-nav .nav-item,
  .my-page-mobile-nav .nav-item { min-width: 0; padding-inline: 2px; font-size: 10px; }
}

@media (min-width: 820px) {
  .arcade-dialog { width: min(92vw, 560px); max-width: 560px; height: auto; max-height: min(90dvh, 820px); }
  .arcade-dialog.is-playing { width: min(94vw, 760px); max-width: 760px; height: min(92dvh, 900px); max-height: min(92dvh, 900px); border: 1px solid rgba(255, 222, 150, .18); border-radius: 22px; }
  .arcade-dialog:not(.is-playing) .arcade-shell { height: min(780px, 90dvh); }
  .arcade-library { padding: 0 30px 34px; }
  .arcade-library-intro { margin-inline: -30px; min-height: 166px; }
  .arcade-game { padding: 14px 50px 20px; }
  .arcade-game-card { grid-template-rows: 144px auto; }
  .arcade-game-card--coming { grid-template-rows: 144px auto; }
  .arcade-card-copy { padding: 15px 16px 16px; }
  .arcade-card-copy strong { font-size: 19px; }
  .arcade-page-nav { display: none; }
  .arcade-header { padding-left: 22px; padding-right: 22px; }
  .arcade-stage { min-height: 560px; }
}

/* Reading results intentionally keep one continuation action and no floating close control. */
#fortune-dialog[data-view="result"] > .dialog-frame > .close-button { display: none !important; }

@media (max-width: 390px) {
  .arcade-header { grid-template-columns: 40px minmax(0, 1fr) auto; padding-left: 10px; padding-right: 10px; }
  .arcade-back { width: 40px; height: 40px; }
  .arcade-wallet { padding-inline: 8px; }
  .arcade-library { padding-left: 12px; padding-right: 12px; }
  .arcade-library-intro { margin-left: -12px; margin-right: -12px; }
  .arcade-game-grid { gap: 9px; }
  .arcade-game { padding-left: 7px; padding-right: 7px; }
  .arcade-overlay { padding-left: 18px; padding-right: 18px; }
  .arcade-game-card,
  .arcade-game-card--coming { grid-template-rows: 110px auto; }
  .arcade-card-copy,
  .arcade-coming-copy { min-height: 88px; padding: 10px; }
  .arcade-card-copy strong { font-size: 15px; }
  .arcade-card-copy > span { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
}

/* Arcade library frame — follows the supplied pixel-art layout exactly. */
.arcade-dialog:not(.is-playing) {
  width: min(calc(100% - 8px), 520px);
  max-width: 520px;
  height: min(calc(100dvh - 8px), 840px);
  max-height: 840px;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: 0 28px 70px rgba(5, 3, 18, .58);
}
.arcade-dialog:not(.is-playing) .arcade-shell {
  position: relative;
  height: 100%;
  background: transparent;
}
.arcade-dialog:not(.is-playing) .arcade-header {
  position: absolute;
  z-index: 30;
  inset: 0 0 auto;
  grid-template-columns: 44px 1fr auto;
  min-height: 68px;
  padding: calc(14px + env(safe-area-inset-top)) 18px 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.arcade-dialog:not(.is-playing) .arcade-header > div:nth-child(2) { visibility: hidden; }
.arcade-dialog:not(.is-playing) .arcade-back,
.arcade-dialog:not(.is-playing) .arcade-wallet {
  background: rgba(28, 18, 58, .82);
  border-color: rgba(255, 207, 144, .52);
  box-shadow: 0 5px 14px rgba(8, 4, 24, .38);
}
.arcade-dialog:not(.is-playing) .arcade-content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  overflow-y: auto;
  background: #171032;
}
.arcade-dialog:not(.is-playing) .arcade-library {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1003 / 1568;
  flex: 0 0 auto;
  margin-block: auto;
  padding: 0;
  overflow: hidden;
  background: #171032 url("./assets/arcade-library-frame-v1.png") center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.arcade-dialog:not(.is-playing) .arcade-library::after {
  content: "";
  position: absolute;
  z-index: 7;
  top: 32%;
  left: 6%;
  right: 6%;
  bottom: 12%;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 18%, rgba(103, 60, 150, .18), transparent 38%),
    linear-gradient(180deg, rgba(30, 19, 67, .98), rgba(25, 16, 57, .99));
}
.arcade-dialog:not(.is-playing) .arcade-library-intro {
  position: absolute;
  z-index: 6;
  top: 17.5%;
  left: 12%;
  right: 12%;
  display: grid;
  place-content: center;
  min-height: 0;
  height: 13.5%;
  margin: 0;
  padding: 4px 18px;
  overflow: visible;
  background: transparent;
  border: 0;
  clip-path: none;
}
.arcade-dialog:not(.is-playing) .arcade-library-intro::before,
.arcade-dialog:not(.is-playing) .arcade-library-intro::after,
.arcade-dialog:not(.is-playing) .arcade-hall-moon,
.arcade-dialog:not(.is-playing) .arcade-hall-lantern { display: none; }
.arcade-dialog:not(.is-playing) .arcade-library-intro h3 {
  margin: 0 0 6px;
  color: #fff1c8;
  font-size: clamp(24px, 7vw, 34px);
  line-height: 1.1;
  text-shadow: 0 3px 0 #5b3077, 0 5px 12px rgba(20, 9, 44, .55);
}
.arcade-dialog:not(.is-playing) .arcade-library-intro p {
  color: #ead4ef;
  font-size: clamp(10px, 2.8vw, 13px);
  line-height: 1.45;
}
.arcade-dialog:not(.is-playing) .arcade-game-grid {
  position: absolute;
  z-index: 8;
  top: 34%;
  left: 12.5%;
  right: 12.5%;
  bottom: 14.5%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  column-gap: 3%;
  row-gap: 3%;
}
.arcade-dialog:not(.is-playing) .arcade-game-card {
  position: relative;
  display: block;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: visible;
  background: transparent url("./assets/arcade-card-frame-unified-v2.png") center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
}
.arcade-dialog:not(.is-playing) .arcade-game-card::before { display: none; }
.arcade-dialog:not(.is-playing) .arcade-game-card--active:hover {
  transform: none;
  filter: brightness(1.04);
  box-shadow: 0 7px 14px rgba(12, 5, 35, .32);
}
.arcade-dialog:not(.is-playing) .arcade-game-card--active:active {
  transform: none;
  filter: brightness(1.07);
}
.arcade-dialog:not(.is-playing) .arcade-card-sky {
  position: absolute;
  z-index: 1;
  inset: 20% 13% 31%;
  border-radius: 12px 12px 7px 7px;
  background:
    linear-gradient(180deg, rgba(75, 37, 135, .05), rgba(43, 23, 91, .2)),
    url("./assets/arcade-game-night-v2.png") center 75% / 155% auto no-repeat;
  filter: saturate(1.18) brightness(1.12);
  box-shadow: inset 0 0 0 1px rgba(255, 225, 169, .2);
}
.arcade-dialog:not(.is-playing) .arcade-card-sky::after {
  display: none;
}
.arcade-dialog:not(.is-playing) .arcade-card-moon {
  top: 8%;
  right: 9%;
  width: 17px;
  height: 17px;
}
.arcade-dialog:not(.is-playing) .arcade-card-star.star-one {
  z-index: 3;
  left: 31%;
  top: 29%;
  width: 8px;
  height: 8px;
  background: transparent;
  clip-path: none;
  filter: none;
}
.arcade-dialog:not(.is-playing) .arcade-card-star.star-one::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: #ffe699;
  clip-path: polygon(50% 0,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0 50%,39% 35%);
  filter: drop-shadow(0 0 4px #ffd36a);
}
.arcade-dialog:not(.is-playing) .arcade-card-star.star-one::after {
  z-index: 1;
  left: 5px;
  right: auto;
  top: 2px;
  width: 27px;
  height: 2px;
  background: linear-gradient(90deg, #ffeaa2 0, rgba(255, 224, 142, .58) 44%, transparent 100%);
  transform: rotate(-34deg);
  transform-origin: left center;
}
.arcade-dialog:not(.is-playing) .arcade-card-star.star-two {
  left: 12%;
  right: auto;
  top: 18%;
  width: 6px;
  height: 6px;
}
.arcade-dialog:not(.is-playing) .arcade-card-star.star-two::after {
  display: none;
}
.arcade-dialog:not(.is-playing) .arcade-card-player {
  bottom: -1px;
  width: 48px;
  height: 48px;
  background-size: 192px 144px;
}
.arcade-dialog:not(.is-playing) .arcade-coming-art {
  position: absolute;
  z-index: 1;
  inset: 20% 13% 31%;
  display: block;
  overflow: hidden;
  border-radius: 12px 12px 7px 7px;
  background:
    radial-gradient(circle at 22% 22%, rgba(255, 224, 151, .66) 0 1px, transparent 2px),
    radial-gradient(circle at 77% 30%, rgba(244, 206, 255, .56) 0 1px, transparent 2px),
    radial-gradient(circle at 65% 15%, rgba(255, 224, 151, .5) 0 1px, transparent 2px),
    linear-gradient(180deg, rgba(28, 17, 65, .32), rgba(29, 17, 60, .7)),
    url("./assets/arcade-game-night-v2.png") center 76% / 150% auto no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 225, 169, .13);
  filter: saturate(.68) brightness(.72);
}
.arcade-dialog:not(.is-playing) .arcade-coming-art::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 35%;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #aa78c6;
  box-shadow: 0 0 16px rgba(190, 124, 224, .28);
  opacity: .62;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(circle at 72% 25%, transparent 0 47%, #000 49%);
  mask-image: radial-gradient(circle at 72% 25%, transparent 0 47%, #000 49%);
}
.arcade-dialog:not(.is-playing) .arcade-game-card--coming .arcade-coming-art i,
.arcade-dialog:not(.is-playing) .arcade-game-card--coming .arcade-coming-art i::before,
.arcade-dialog:not(.is-playing) .arcade-game-card--coming .arcade-coming-art i::after {
  box-sizing: border-box;
}
.arcade-dialog:not(.is-playing) .arcade-game-card--coming .arcade-coming-art i {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 47%;
  width: 22px;
  height: 18px;
  margin: 0;
  border: 2px solid #704b85;
  border-radius: 3px;
  background: #d4b2dc;
  opacity: .82;
  filter: drop-shadow(0 2px 3px rgba(18, 8, 38, .45));
  transform: translate(-50%, -20%);
}
.arcade-dialog:not(.is-playing) .arcade-game-card--coming .arcade-coming-art i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -13px;
  width: 14px;
  height: 14px;
  border: 3px solid #d4b2dc;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  transform: translateX(-50%);
}
.arcade-dialog:not(.is-playing) .arcade-game-card--coming .arcade-coming-art i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 4px;
  height: 7px;
  border: 0;
  border-radius: 3px;
  background: #704b85;
  transform: translateX(-50%);
}
.arcade-dialog:not(.is-playing) .arcade-card-copy,
.arcade-dialog:not(.is-playing) .arcade-coming-copy {
  position: absolute;
  z-index: 4;
  left: 18%;
  right: 18%;
  bottom: 14%;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-height: 0;
  height: 12%;
  padding: 0 8px;
  background: transparent;
  text-align: center;
}
.arcade-dialog:not(.is-playing) .arcade-card-copy small,
.arcade-dialog:not(.is-playing) .arcade-card-copy em { display: none; }
.arcade-dialog:not(.is-playing) .arcade-card-copy strong,
.arcade-dialog:not(.is-playing) .arcade-coming-copy strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 1;
  text-align: center;
  transform: translateY(-3px);
}
.arcade-dialog:not(.is-playing) .arcade-card-copy strong {
  color: #fff1ce;
  font-size: clamp(7.5px, 2.05vw, 9.5px);
  text-shadow: 0 2px 0 #4b275f;
}
.arcade-dialog:not(.is-playing) .arcade-card-copy > span {
  display: none;
}
.arcade-dialog:not(.is-playing) .arcade-game-card--coming { opacity: 1; }
.arcade-dialog:not(.is-playing) .arcade-coming-copy {
  padding-inline: 8px;
}
.arcade-dialog:not(.is-playing) .arcade-coming-copy strong {
  color: #f5d8f4;
  font-size: clamp(7.5px, 1.95vw, 9px);
  letter-spacing: 0;
  text-shadow: 0 2px 0 #4b275f;
}
.arcade-dialog:not(.is-playing) .arcade-coming-copy small { display: none; }
.arcade-dialog:not(.is-playing) .arcade-reward-note { display: none; }

@media (max-width: 390px) {
  .arcade-dialog:not(.is-playing) { width: calc(100% - 4px); height: calc(100dvh - 4px); }
  .arcade-dialog:not(.is-playing) .arcade-header { padding-inline: 12px; }
  .arcade-dialog:not(.is-playing) .arcade-game-grid { left: 12.5%; right: 12.5%; }
}

@media (prefers-reduced-motion: reduce) {
  .arcade-player.is-running { animation-duration: .85s; }
  .arcade-score-pop,
  .arcade-collision-spark { animation-duration: .01ms; }
}

/* v39: calmer house focus, central tarot workshop, and local manseryeok results. */
.npc::before {
  background-image: url("./assets/moon-village-flat-bridge-v4.png");
  opacity: 0;
  filter: brightness(1.035) saturate(1.025) drop-shadow(0 0 2px rgba(255,235,177,.62)) drop-shadow(0 0 6px rgba(255,190,72,.42));
  transition: opacity .34s cubic-bezier(.22,1,.36,1), filter .34s ease;
}
.npc:hover::before,
.npc:focus-visible::before,
.npc:active::before,
.npc.is-selected::before {
  opacity: .68;
  filter: brightness(1.055) saturate(1.04) drop-shadow(0 0 3px rgba(255,238,190,.72)) drop-shadow(0 0 8px rgba(255,190,72,.5));
}
.npc-label {
  transition: transform .28s cubic-bezier(.22,1,.36,1), filter .28s ease;
}
.npc:is(:hover, :focus-visible, .is-selected) .npc-label {
  transform: translate(-50%, -2px);
  filter: drop-shadow(0 2px 4px rgba(255,205,102,.38));
}
.tarot-house-art {
  top: 23.8%;
  width: min(33%, 176px);
  transition: filter .34s ease, transform .34s cubic-bezier(.22,1,.36,1);
}
.hotspot-tarot { top: 23.4%; width: 33%; height: 20.5%; }
.hotspot-tarot .npc-label { top: 58%; bottom: auto; }
.game-map:has(.hotspot-tarot:hover) .tarot-house-art,
.game-map:has(.hotspot-tarot:focus-visible) .tarot-house-art,
.game-map:has(.hotspot-tarot.is-selected) .tarot-house-art {
  transform: translateX(-50%) translateY(-1px);
  filter: saturate(.96) brightness(1.045) drop-shadow(0 0 3px rgba(255,235,177,.68)) drop-shadow(0 0 8px rgba(255,190,72,.48));
}

.birth-region-field { margin-top: 10px !important; }
.birth-region-field select {
  width: 100%;
  min-height: 44px;
  padding: 0 11px;
  border: 2px solid #b27a61;
  border-radius: 4px;
  color: #fff4e4;
  background: #21192d;
  font: inherit;
}
.privacy-note { color: #60404b !important; font-size: 10.5px !important; line-height: 1.55 !important; }
.partner-calendar { display: grid; grid-template-columns: 1fr 1fr; }
#compatibility-fields { grid-template-columns: 1fr 1fr; align-items: end; }
#compatibility-fields > :first-child,
#compatibility-fields > .check-field { grid-column: 1 / -1; }

.compatibility-score {
  position: relative;
  margin: 16px 0 18px;
  padding: 18px 16px 16px;
  overflow: hidden;
  border: 2px solid #d39a68;
  border-radius: 7px;
  text-align: center;
  background: radial-gradient(circle at 50% 0, rgba(255,218,133,.34), transparent 48%), linear-gradient(145deg, #6b3e57, #352942);
  box-shadow: inset 0 0 0 3px rgba(255,226,175,.12), 0 5px 0 #1b1425;
}
.compatibility-score::before,
.compatibility-score::after { content: "♥"; position: absolute; top: 20px; color: rgba(255,197,184,.32); font-size: 21px; }
.compatibility-score::before { left: 18px; transform: rotate(-12deg); }
.compatibility-score::after { right: 18px; transform: rotate(12deg); }
.compatibility-score > span { display: block; color: #ffd9bd; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.compatibility-score > strong { display: block; margin: 4px 0 6px; color: #fff1cd; font-size: 25px; }
.compatibility-score > strong b { color: #ffd97e; font-size: 46px; line-height: 1; text-shadow: 0 3px 0 #6a3549; }
.compatibility-score > p { margin: 0; color: #f6dfe1; font-size: 12px; line-height: 1.55; }

.manseryeok-stack {
  display: grid;
  gap: 10px;
  margin: 17px 0;
}
.manseryeok-panel {
  margin: 0;
  border: 2px solid #795a78;
  border-radius: 6px;
  color: #f3e3d8;
  background: #191522;
  box-shadow: 0 4px 0 #100c18;
}
.manseryeok-panel.is-partner { border-color: #6b678a; }
.manseryeok-panel summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 10px 13px;
  cursor: pointer;
  list-style: none;
}
.manseryeok-panel summary::-webkit-details-marker { display: none; }
.manseryeok-panel summary::after { content: "＋"; color: #e7b56e; font-size: 18px; font-weight: 900; }
.manseryeok-panel[open] summary::after { content: "－"; }
.manseryeok-panel summary:focus-visible { outline: 2px solid #ffe0a3; outline-offset: -4px; }
.manseryeok-panel summary > span { color: #ffe5b7; font-size: 14px; font-weight: 900; }
.manseryeok-panel summary > small { overflow: hidden; color: #bfaebd; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.manseryeok-content { min-width: 0; padding: 11px 10px 13px; border-top: 1px solid #4f3c52; }
.manse-table {
  width: 100%;
  min-width: 0;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  overflow: hidden;
  border: 1px solid #5f4b65;
  border-radius: 5px;
  color: #f3e3d8;
  background: #211a2a;
  font-variant-numeric: tabular-nums;
}
.manse-table th,
.manse-table td {
  min-width: 0;
  padding: 7px 2px;
  border-right: 1px solid #4c3b52;
  border-bottom: 1px solid #4c3b52;
  text-align: center;
  vertical-align: middle;
}
.manse-table tr > :last-child { border-right: 0; }
.manse-table tbody tr:last-child > * { border-bottom: 0; }
.manse-table thead th {
  height: 34px;
  color: #ead4bf;
  background: #35283e;
  font-size: 11px;
  font-weight: 900;
}
.manse-table thead th:first-child,
.manse-table tbody th {
  width: 56px;
}
.manse-table thead th:first-child { color: #ac9aaa; background: #2b2133; }
.manse-table tbody th {
  color: #c7b5c6;
  background: #2b2133;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  word-break: keep-all;
}
.manse-table td { background: linear-gradient(180deg, #30243a, #261e30); }
.manse-table td.is-hanja {
  height: 48px;
  color: var(--element-color);
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: clamp(23px, 7vw, 29px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.manse-table td.is-element {
  color: var(--element-color);
  font-size: 11px;
  font-weight: 900;
}
.manse-table td.is-unknown {
  color: #a99baa;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  background: #241d2b;
}
.element-balance { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 9px; }
.element-balance span { display: grid; place-items: center; gap: 2px; padding: 6px 2px; border-top: 3px solid var(--element-color); border-radius: 3px; background: #2a202f; }
.element-balance b { color: var(--element-color); font-size: 11px; }
.element-balance i { color: #f1dfdc; font-size: 11px; font-style: normal; }

.followup-chat .chat-oracle-portrait { z-index: 1; }

@media (max-width: 390px) {
  .tarot-house-art { top: 23.8%; width: min(33%, 166px); }
  .hotspot-tarot { top: 23.4%; width: 33%; }
  .hotspot-tarot .npc-label { top: 58%; }
  #compatibility-fields { grid-template-columns: 1fr; }
  #compatibility-fields > :first-child,
  #compatibility-fields > .check-field { grid-column: auto; }
  .manseryeok-content { padding-inline: 8px; }
  .manse-table thead th:first-child,
  .manse-table tbody th { width: 51px; }
  .manse-table th,
  .manse-table td { padding-inline: 1px; }
  .manse-table td.is-hanja { font-size: 24px; }
  .manse-table td.is-element { font-size: 10px; }
  .compatibility-score > strong b { font-size: 42px; }
}

.birth-form {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(650px, 88svh);
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(23,17,45,.12), rgba(27,18,38,.6) 66%, rgba(18,13,29,.94)),
    url("./assets/moon-village.png") 50% 44% / cover no-repeat;
  image-rendering: pixelated;
}
.form-oracle-stage { position: absolute; inset: 0; overflow: hidden; }
.form-oracle-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(22,15,32,.72)); }
.form-oracle-portrait { position: absolute; left: 50%; bottom: 258px; width: 190px; height: 380px; transform: translateX(-50%); filter: drop-shadow(0 12px 6px rgba(5,3,12,.58)); }
.form-dialog-panel { position: relative; z-index: 3; margin: 0 14px 16px; padding: 19px 15px 15px; border: 3px solid #9d624d; border-radius: 5px; color: var(--ink); background: linear-gradient(#fff0cf, #efd2a3); box-shadow: inset 0 0 0 3px #f8e0b7, 0 6px 0 #311b31; }
.form-speaker { position: absolute; left: 12px; top: -34px; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 2px solid #9d624d; border-radius: 4px 4px 0 0; color: #fff0d3; background: #7a4358; box-shadow: inset 0 0 0 2px #a75d69; }
.form-speaker strong { font-size: 15px; }
.form-speaker span { color: #f3c99a; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .05em; }
.form-dialog-panel h2 { margin: 3px 0 5px; color: #3b2231; font-size: 19px; line-height: 1.3; }
.form-dialog-panel > p { margin: 0 0 14px; color: #745360; font-size: 11px; line-height: 1.45; }
.form-step { min-height: 82px; }
.form-step .field { margin-bottom: 0; }
.form-step .field > span, .form-step .field legend { color: #5a3c47; }
.form-step .field input[type="text"], .form-step .field input[type="date"], .form-step .field input[type="time"], .form-step .field > input:not([type]) { border-color: #b27a61; color: #fff4e4; }
.form-step .segmented span { border-color: #b27a61; color: #694957; background: #f2d9b0; }
.form-step .segmented input:checked + span { border-color: #8a4e57; color: #fff2d9; background: #815066; box-shadow: inset 0 0 0 2px #aa6874; }
.form-step .check-field { margin: 10px 0 0; color: #694957; }
.form-step .form-note { margin: 10px 0 0; color: #795c65; background: rgba(75,40,49,.06); }
.form-navigation { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 14px; }
.form-navigation .pixel-button:only-child { grid-column: 1 / -1; }
#form-next, #form-submit { grid-column: 2; }
#form-prev[hidden] + #form-next, #form-prev[hidden] ~ #form-submit:not([hidden]) { grid-column: 1 / -1; }

@media (max-width: 390px) {
  .birth-form { min-height: min(620px, 88svh); }
  .form-oracle-portrait { width: 175px; height: 350px; bottom: 272px; }
  .form-dialog-panel { margin-inline: 10px; }
}

@media (min-width: 700px) {
  body { padding: 22px 0; }
  .app-shell { min-height: calc(100svh - 44px); border: 4px solid #3f2a46; border-radius: 18px; }
  .game-map { height: calc(100svh - 118px); border-radius: 14px 14px 0 0; }
}

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

/* Classic RPG conversation layout: centered character with a bottom dialogue panel. */
.dialog-scene,
.guide-scene {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(650px, 88svh);
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(23,17,45,.16), rgba(27,18,38,.54) 66%, rgba(18,13,29,.9)),
    url("./assets/moon-village.png") 50% 44% / cover no-repeat;
  image-rendering: pixelated;
}
.dialog-scene::before,
.guide-scene::before {
  background: linear-gradient(180deg, rgba(255,208,132,.05), transparent 42%, rgba(14,10,25,.26));
  opacity: 1;
}
.portrait-wrap,
.guide-portrait-wrap {
  position: absolute;
  inset: 0;
  min-height: 0;
  overflow: hidden;
}
.portrait,
.guide-portrait {
  position: absolute;
  left: 50%;
  bottom: 172px;
  z-index: 2;
  width: 210px;
  height: 420px;
  transform: translateX(-50%);
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 13px 6px rgba(5,3,12,.62));
}
.guide-portrait { width: 230px; height: 460px; }
.portrait-glow,
.guide-halo { left: 50%; bottom: 235px; width: 270px; height: 270px; }
.dialog-copy,
.guide-copy {
  position: relative;
  z-index: 4;
  display: block;
  width: 100%;
  padding: 0 15px 18px;
}
.npc-heading {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 28px);
  margin: 0 0 -3px 12px;
  padding: 7px 13px;
  border: 2px solid #9d624d;
  border-radius: 4px 4px 0 0;
  color: #fff0d3;
  background: #7a4358;
  box-shadow: inset 0 0 0 2px #a75d69;
}
.npc-heading span { order: 2; color: #f3c99a; font: 700 9px/1.2 ui-monospace, monospace; letter-spacing: .05em; }
.npc-heading h2 { order: 1; margin: 0; font-size: 17px; line-height: 1; }
.speech-box,
.guide-speech-box {
  min-height: 150px;
  padding: 18px 16px 26px;
  border-width: 3px;
  font-size: 14px;
}
.dialog-copy > .pixel-button { width: 100%; margin-top: 11px; }
.guide-actions { margin-top: 11px; }

@media (max-width: 390px) {
  .dialog-scene,
  .guide-scene { min-height: min(620px, 88svh); }
  .portrait { width: 185px; height: 370px; bottom: 180px; }
  .guide-portrait { width: 205px; height: 410px; bottom: 180px; }
  .dialog-copy,
  .guide-copy { padding: 0 11px 13px; }
  .speech-box,
  .guide-speech-box { min-height: 158px; }
}

/* Dialogue portraits are intentionally cropped to an expressive upper-body view. */
.dialog-scene .portrait,
.form-oracle-portrait {
  width: 290px;
  height: 330px;
  bottom: 178px;
  background-size: 600% auto;
  background-position: calc(var(--i, 0) * 20%) 7%;
}
.guide-scene .guide-portrait {
  width: 320px;
  height: 620px;
  bottom: 72px;
  object-position: center top;
}
.form-oracle-portrait { bottom: 270px; }

@media (max-width: 390px) {
  .dialog-scene .portrait { width: 260px; height: 300px; bottom: 188px; }
  .guide-scene .guide-portrait { width: 285px; height: 570px; bottom: 76px; }
  .form-oracle-portrait { width: 250px; height: 290px; bottom: 284px; }
}

/* Simplified field: houses are the interaction targets and every resident waits indoors. */
.map-art {
  filter: saturate(.88) brightness(.9) contrast(.96);
  object-position: 50% 50%;
}
.map-tint {
  background: linear-gradient(180deg, rgba(12,10,34,.24), rgba(20,17,42,.02) 34%, rgba(20,17,42,.02) 72%, rgba(12,10,26,.38));
}
.npc {
  width: 96px;
  height: 94px;
  border: 2px solid transparent;
  border-radius: 12px;
  filter: none;
}
.npc:hover,
.npc:focus-visible {
  border-color: rgba(255,226,160,.78);
  background: radial-gradient(circle, rgba(255,218,132,.16), transparent 68%);
  outline: none;
}
.npc-label {
  bottom: 72px;
  padding: 5px 9px;
  border-color: rgba(222,178,117,.62);
  background: rgba(38,27,45,.88);
}
.npc-label strong { display: none; }
.npc-sprite { display: none !important; }
.hotspot-love { left: 23%; top: 24%; }
.hotspot-wealth { left: 77%; top: 27%; }
.hotspot-career { left: 25%; top: 49%; }
.hotspot-health { left: 76%; top: 51%; }
.hotspot-general { left: 50%; top: 71%; }

.door-transition {
  position: absolute;
  inset: 0;
  z-index: 58;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  color: #ffe9bd;
  background: radial-gradient(circle at 50% 45%, #3d3154, #171326 58%);
  animation: door-fade-in .28s ease both;
}
.door-transition p { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.door-icon {
  position: relative;
  width: 54px;
  height: 76px;
  border: 4px solid #d29a5c;
  border-radius: 25px 25px 3px 3px;
  background: linear-gradient(90deg, #5d3545, #8a4d53 52%, #4a2c40);
  box-shadow: inset 0 0 0 4px #38233a, 0 0 28px rgba(250,205,113,.24);
}
.door-icon::after { content: ""; position: absolute; right: 9px; top: 39px; width: 5px; height: 5px; border-radius: 50%; background: #ffe297; box-shadow: 0 0 8px #ffe297; }
@keyframes door-fade-in { from { opacity: 0; } }

/* One calm interior is reused so the NPC portrait and dialogue remain the focus. */
.dialog-scene,
.guide-scene,
.birth-form {
  background:
    linear-gradient(180deg, rgba(23,17,45,.05), rgba(27,18,38,.26) 60%, rgba(18,13,29,.76)),
    url("./assets/oracle-interior.png") 50% 48% / cover no-repeat;
}
.dialog-scene .portrait {
  width: 320px;
  height: 292px;
  bottom: 184px;
  background-size: 600% auto;
  background-position: calc(var(--i, 0) * 20%) 2%;
}
.guide-scene .guide-portrait {
  width: 350px;
  height: 305px;
  bottom: 184px;
  object-fit: cover;
  object-position: center top;
}
.form-oracle-portrait {
  width: 320px;
  height: 284px;
  bottom: 286px;
  background-size: 600% auto;
  background-position: calc(var(--i, 0) * 20%) 2%;
}

.paid-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 13px;
  border: 2px solid #b97e56;
  border-radius: 5px;
  color: #f3dac5;
  background: rgba(43,29,50,.94);
  box-shadow: inset 0 0 0 2px #5c3b50;
}
.paid-offer span { font-size: 10px; line-height: 1.45; }
.paid-offer strong { flex: 0 0 auto; color: #ffe09a; font-size: 16px; }
.payment-panel { padding-top: 38px; }
.payment-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0 12px;
  padding: 16px;
  border: 2px solid #9c6b55;
  border-radius: 6px;
  background: linear-gradient(135deg, #4c334f, #2a2138);
  box-shadow: inset 0 0 0 2px #684258, 0 5px 0 #17101f;
}
.payment-product div { display: grid; gap: 5px; }
.payment-product strong { color: #fff0d1; font-size: 15px; }
.payment-product span { color: #cbb8c6; font-size: 10px; }
.payment-product b { flex: 0 0 auto; color: #ffe099; font-size: 20px; }
.payment-note { margin: 0 0 16px; color: #9d8b9d; font-size: 10px; line-height: 1.55; }
.payment-panel > .pixel-button { width: 100%; }

@media (max-width: 390px) {
  .dialog-scene .portrait { width: 292px; height: 270px; bottom: 192px; }
  .guide-scene .guide-portrait { width: 318px; height: 282px; bottom: 192px; }
  .form-oracle-portrait { width: 286px; height: 260px; bottom: 298px; }
  .npc { width: 82px; height: 86px; }
  .npc-label { bottom: 66px; }
}

/* The player and Lumi are separate field characters. Walking always uses rear-view frames. */
.movement-sprite {
  background-image: url("./assets/player-lumi-movement-v3.png");
  background-repeat: no-repeat;
  background-size: 400% 100%;
  background-position: calc(var(--mi, 0) * 33.333333%) center;
  image-rendering: pixelated;
}
.guide-npc {
  display: block;
  left: 50%;
  top: 74%;
  z-index: 5;
}
.guide-npc .guide-field-sprite { width: 43px; height: 86px; }
.guide-label { bottom: 84px; }
.guide-label small { font-size: 8px; }
.guide-label strong { display: block; color: #fff2cc; font-size: 10px; line-height: 1.15; }
.is-intro .guide-npc { opacity: 1; pointer-events: none; }

.intro-sequence.is-running .intro-player {
  animation:
    intro-walk-in 3.75s .08s cubic-bezier(.38,.05,.52,1) forwards,
    walk-bob .32s steps(2,end) 12,
    player-back-step .58s steps(1,end) .08s infinite;
}
.player.is-walking {
  animation: walk-bob .26s steps(2,end) infinite, player-back-step .52s steps(1,end) infinite;
}
@keyframes player-back-step {
  0%, 49% { background-position: 33.333333% center; }
  50%, 100% { background-position: 66.666667% center; }
}

/* Keep the dialogue box low and reveal a proper head-to-chest portrait. */
.dialog-scene .portrait {
  width: 320px;
  height: 390px;
  bottom: 172px;
  background-size: 600% auto;
  background-position: calc(var(--i, 0) * 20%) 1%;
}
.guide-scene .guide-portrait {
  width: 350px;
  height: 390px;
  bottom: 172px;
  object-fit: cover;
  object-position: center top;
}
.form-oracle-portrait {
  width: 320px;
  height: 360px;
  bottom: 276px;
  background-size: 600% auto;
  background-position: calc(var(--i, 0) * 20%) 1%;
}

@media (max-width: 390px) {
  .dialog-scene .portrait { width: 294px; height: 360px; bottom: 180px; }
  .guide-scene .guide-portrait { width: 320px; height: 360px; bottom: 180px; }
  .form-oracle-portrait { width: 290px; height: 334px; bottom: 286px; }
}

/* Lumi waits at the gate, then walks forward to meet the arriving player. */
.is-intro .guide-npc {
  top: 68%;
  animation: lumi-approach 1.45s 2.05s cubic-bezier(.22,1,.36,1) forwards;
}
.is-intro .guide-npc .guide-field-sprite {
  animation: lumi-field-bob .29s steps(2,end) 2.05s 5;
}
@keyframes lumi-approach { to { top: 74%; } }
@keyframes lumi-field-bob { 50% { transform: translateY(-3px); } }

/* Every oracle owns a distinct flat 2D room; only the pixel camera stays consistent. */
#fortune-dialog[data-npc="love"] .dialog-scene,
#fortune-dialog[data-npc="love"] .birth-form {
  background: linear-gradient(180deg, rgba(52,23,42,.02), rgba(44,20,37,.2) 61%, rgba(24,13,28,.78)), url("./assets/interior-love-v2.png") 50% 45% / cover no-repeat;
}
#fortune-dialog[data-npc="wealth"] .dialog-scene,
#fortune-dialog[data-npc="wealth"] .birth-form {
  background: linear-gradient(180deg, rgba(13,39,31,.02), rgba(18,37,31,.2) 61%, rgba(13,24,24,.8)), url("./assets/interior-wealth-v2.png") 50% 45% / cover no-repeat;
}
#fortune-dialog[data-npc="career"] .dialog-scene,
#fortune-dialog[data-npc="career"] .birth-form {
  background: linear-gradient(180deg, rgba(26,23,56,.02), rgba(26,20,50,.2) 61%, rgba(15,13,31,.8)), url("./assets/interior-career-v2.png") 50% 45% / cover no-repeat;
}
#fortune-dialog[data-npc="health"] .dialog-scene,
#fortune-dialog[data-npc="health"] .birth-form {
  background: linear-gradient(180deg, rgba(30,47,27,.02), rgba(33,43,27,.18) 61%, rgba(20,27,18,.78)), url("./assets/interior-health-v2.png") 50% 45% / cover no-repeat;
}
#fortune-dialog[data-npc="general"] .dialog-scene,
#fortune-dialog[data-npc="general"] .birth-form {
  background: linear-gradient(180deg, rgba(17,20,52,.02), rgba(23,19,53,.2) 61%, rgba(12,12,30,.82)), url("./assets/interior-general-v2.png") 50% 45% / cover no-repeat;
}
.guide-scene {
  background: linear-gradient(180deg, rgba(18,19,49,.08), rgba(22,19,43,.16) 55%, rgba(18,13,29,.74)), url("./assets/moon-village-simple.png") 50% 84% / cover no-repeat;
}

/* Paid follow-up uses the exact same speech-box footprint as the free greeting. */
.dialog-scene .speech-box {
  min-height: 150px;
  height: 150px;
  overflow: auto;
}
.dialog-scene .paid-offer { display: none !important; }

/* The supplied pixel logo drifts down slowly before the characters meet. */
.intro-logo {
  top: calc(40px + env(safe-area-inset-top));
  width: calc(100% - 20px);
  max-width: 470px;
  padding: 0;
  transform: translate(-50%, -230px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.intro-logo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 4px rgba(17,10,25,.55));
}
.intro-logo { isolation: isolate; }
.intro-logo::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5% -3% -2%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 54%, rgba(4,2,10,.78) 0%, rgba(8,4,17,.58) 43%, rgba(8,4,17,.22) 66%, transparent 82%);
  filter: blur(18px);
}
.intro-sequence.is-running .intro-logo {
  animation: intro-logo-drop 2.05s .22s cubic-bezier(.22,1,.36,1) forwards;
}

/* Preserve the native 3:4 sprite-cell ratio instead of stretching characters tall. */
.intro-player { width: 72px; height: 96px; }
.player { width: 60px; height: 80px; }
.guide-npc .guide-field-sprite {
  left: 50%;
  width: 60px;
  height: 80px;
  transform: translateX(-50%);
}
.guide-npc:hover .guide-field-sprite,
.guide-npc:focus-visible .guide-field-sprite { transform: translate(-50%, -4px); }
.is-intro .guide-npc .guide-field-sprite { transform: translateX(-50%); }
@keyframes lumi-field-bob { 50% { transform: translate(-50%, -3px); } }

/* Navigation stays below the viewport until Lumi finishes onboarding. */
.game-map { transition: height .48s cubic-bezier(.22,1,.36,1); }
.bottom-nav {
  transform: translateY(0);
  transition: transform .48s cubic-bezier(.22,1,.36,1), opacity .28s ease;
}
.nav-pending .game-map { height: 100svh; }
.nav-pending .bottom-nav {
  transform: translateY(105%);
  opacity: 0;
  pointer-events: none;
}
.guide-open .bottom-nav {
  transform: translateY(105%);
  opacity: 0;
  pointer-events: none;
}
.nav-revealed .bottom-nav { animation: nav-rise .48s cubic-bezier(.22,1,.36,1) both; }
@keyframes nav-rise { from { transform: translateY(105%); opacity: 0; } }

.mark-home { border: 0; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) scale(.82); }
.mark-home::before { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.mark-records { border-radius: 2px; }
.mark-records::after { content: ""; position: absolute; left: 4px; top: 3px; width: 7px; height: 2px; background: currentColor; box-shadow: 0 4px currentColor, 0 8px currentColor; }
.mark-pass { width: 22px; height: 15px; margin-block: 2px; border-radius: 3px; }
.mark-pass::before,
.mark-pass::after { content: ""; position: absolute; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: #2e1d36; }
.mark-pass::before { left: -4px; }
.mark-pass::after { right: -4px; }
.mark-my { border-radius: 50%; }
.mark-my::after { content: ""; position: absolute; left: 2px; bottom: -7px; width: 10px; height: 7px; border: 2px solid currentColor; border-radius: 8px 8px 2px 2px; background: #2e1d36; }

.my-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 14px;
  padding: 16px;
  border: 2px solid #74546e;
  border-radius: 5px;
  background: #1d1728;
}
.my-status span { color: #c9b8c6; font-size: 11px; }
.my-status strong { color: #ffe09a; font-size: 19px; }
.my-panel > .pixel-button,
#passes-dialog .pixel-button { width: 100%; }

/* Natural distance-based walking and tap-to-move. */
.game-map { touch-action: manipulation; }
.player {
  transition:
    left var(--walk-duration, 1050ms) cubic-bezier(.4,0,.2,1),
    top var(--walk-duration, 1050ms) cubic-bezier(.4,0,.2,1),
    transform .2s var(--ease);
}
.player.is-walking { animation: walk-bob .3s steps(2,end) infinite; }
.player.is-walking.is-facing-back {
  animation: walk-bob .3s steps(2,end) infinite, player-back-step .6s steps(1,end) infinite;
}

/* Lumi talks outdoors: no modal card, no dim backdrop, only portrait and bottom speech. */
.guide-dialog {
  width: min(100%, 520px);
  height: 100svh;
  max-height: none;
  margin: auto;
  overflow: hidden;
}
.guide-dialog::backdrop { background: transparent; backdrop-filter: none; }
.guide-dialog .guide-frame {
  height: 100%;
  max-height: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.guide-dialog .guide-scene {
  min-height: 100%;
  background: transparent !important;
}
.guide-dialog .guide-scene::before,
.guide-frame > .close-button { display: none; }
.guide-dialog .guide-copy {
  padding-bottom: calc(22px + env(safe-area-inset-bottom));
  pointer-events: auto;
}

/* A small physical gesture accompanies each new line without changing identity. */
.gesture-happy { animation: portrait-happy .55s cubic-bezier(.22,1,.36,1) both; }
.gesture-surprised { animation: portrait-surprised .42s cubic-bezier(.22,1,.36,1) both; }
.gesture-thinking { animation: portrait-thinking .62s ease both; }
.gesture-explaining { animation: portrait-explaining .64s ease both; }
.gesture-concerned { animation: portrait-concerned .58s ease both; }
.gesture-wave { animation: portrait-wave .72s ease-in-out 2; transform-origin: 50% 72%; }
@keyframes portrait-happy {
  0% { transform: translateX(-50%); }
  45% { transform: translateX(-50%) translateY(-7px) scale(1.015); }
  100% { transform: translateX(-50%); }
}
@keyframes portrait-surprised {
  0% { transform: translateX(-50%) scale(.97); }
  55% { transform: translateX(-50%) translateY(-5px) scale(1.02); }
  100% { transform: translateX(-50%); }
}
@keyframes portrait-thinking {
  from { transform: translateX(-50%); }
  to { transform: translateX(-50%) translateY(2px) rotate(-1.5deg); }
}
@keyframes portrait-explaining {
  0% { transform: translateX(-50%) rotate(0); }
  50% { transform: translateX(-50%) translateX(5px) rotate(1.2deg); }
  100% { transform: translateX(-50%); }
}
@keyframes portrait-concerned {
  from { transform: translateX(-50%); }
  to { transform: translateX(-50%) translateY(4px) rotate(1deg); }
}
@keyframes portrait-wave {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  50% { transform: translateX(-50%) rotate(1.8deg); }
}

/* Fast-mode polish: a quiet opening, stepped walking, full-screen houses and real pose frames. */
.quest-card { display: none !important; }

.intro-sequence { transition: opacity .65s ease; }
.intro-logo {
  top: calc(54px + env(safe-area-inset-top));
  width: calc(100% - 16px);
  max-width: 500px;
  transform: translate(-50%, -240px);
}
.intro-sequence.is-running .intro-logo {
  animation: intro-logo-drop 2.1s 1.25s cubic-bezier(.22,1,.36,1) forwards;
}
.intro-sequence.is-running .intro-player {
  animation:
    intro-walk-in 5s .1s steps(24,end) forwards,
    walk-bob .38s steps(2,end) 14,
    player-back-step .72s steps(1,end) .1s infinite;
}
.is-intro .guide-npc {
  top: 68%;
  animation: lumi-approach 1.6s 3.2s steps(7,end) forwards;
}
.is-intro .guide-npc .guide-field-sprite {
  animation: lumi-field-bob .38s steps(2,end) 3.2s 5;
}

.player {
  transition:
    left var(--walk-duration, 1500ms) steps(18,end),
    top var(--walk-duration, 1500ms) steps(18,end),
    transform .2s var(--ease);
}
.player.is-walking { animation: walk-bob .38s steps(2,end) infinite; }
.player.is-walking.is-facing-back {
  animation: walk-bob .38s steps(2,end) infinite, player-back-step .72s steps(1,end) infinite;
}

.sprite {
  background-image: var(--portrait-image, url("./assets/haerin-poses-v2.png"));
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: calc(var(--pose, 0) * 50%) center;
  image-rendering: pixelated;
}
.dialog-scene .portrait {
  width: 360px;
  height: 360px;
  bottom: 178px;
  background-size: 300% 100%;
  background-position: calc(var(--pose, 0) * 50%) center;
}
.form-oracle-portrait {
  width: 350px;
  height: 350px;
  bottom: 278px;
  background-size: 300% 100%;
  background-position: calc(var(--pose, 0) * 50%) center;
}
.lumi-portrait,
.ending-lumi {
  --portrait-image: url("./assets/lumi-poses-v2.png");
  background-size: 300% 100%;
  background-position: calc(var(--pose, 0) * 50%) center;
}
.guide-scene .guide-portrait {
  width: 360px;
  height: 360px;
  bottom: 178px;
  object-fit: unset;
}
.love-topic-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}
.love-topic-options button {
  min-height: 50px;
  padding: 8px 5px;
  border: 2px solid #a76b56;
  border-radius: 4px;
  color: #fff0d0;
  background: linear-gradient(#73465b, #59364e);
  box-shadow: inset 0 0 0 2px #8c5365, 0 3px 0 #2f1b31;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.love-topic-options button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #8c5365, 0 1px 0 #2f1b31; }

#compatibility-fields {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 8px;
}
#compatibility-fields .field { margin-bottom: 0; }

#fortune-dialog {
  width: min(100%, 520px);
  height: 100svh;
  max-height: none;
  margin: auto;
  overflow: hidden;
}
#fortune-dialog::backdrop { background: #17142c; backdrop-filter: none; }
#fortune-dialog .dialog-frame {
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: #17142c;
  box-shadow: none;
}
#fortune-dialog .dialog-scene,
#fortune-dialog .birth-form,
#fortune-dialog .oracle-loading,
#fortune-dialog .result-view { min-height: 100svh; }

@media (max-width: 390px) {
  .intro-logo { top: calc(66px + env(safe-area-inset-top)); }
  .dialog-scene .portrait,
  .guide-scene .guide-portrait { width: 318px; height: 318px; bottom: 184px; }
  .form-oracle-portrait { width: 304px; height: 304px; bottom: 292px; }
  .love-topic-options { grid-template-columns: 1fr; gap: 6px; }
  .love-topic-options button { min-height: 42px; }
  #compatibility-fields { grid-template-columns: 1fr; }
}

/* Bridge-follow opening: the player crosses into town while the camera rises. */
.intro-sequence {
  isolation: isolate;
  background: #101537;
}
.intro-sequence::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7,10,30,.14), transparent 34%, rgba(8,8,22,.26));
}
.intro-landscape {
  position: absolute;
  left: 0;
  top: -22%;
  z-index: 0;
  width: 100%;
  height: 122%;
  object-fit: cover;
  object-position: 50% 100%;
  image-rendering: pixelated;
  transform: translate3d(0, 0, 0) scale(1.025);
  transform-origin: 50% 50%;
  filter: saturate(.92) brightness(.88);
  will-change: transform, filter;
}
.intro-sequence.is-running .intro-landscape {
  animation: intro-camera-climb 6.15s .12s cubic-bezier(.22,1,.36,1) forwards;
}
.intro-sequence .intro-logo {
  z-index: 4;
  top: calc(42px + env(safe-area-inset-top));
}
.intro-sequence.is-running .intro-logo {
  animation: intro-logo-drop 1.85s 4.05s cubic-bezier(.22,1,.36,1) forwards;
}
.intro-sequence .intro-player {
  z-index: 3;
  top: 108%;
  filter: drop-shadow(0 8px 3px rgba(9,6,18,.66));
}
.intro-sequence.is-running .intro-player {
  animation:
    intro-bridge-walk 5.55s .18s steps(26,end) forwards,
    walk-bob .38s steps(2,end) 16,
    player-back-step .72s steps(1,end) .18s infinite;
}
@keyframes intro-camera-climb {
  0% { transform: translate3d(0, 0, 0) scale(1.025); filter: saturate(.9) brightness(.82); }
  54% { transform: translate3d(0, 10%, 0) scale(1.012); filter: saturate(.96) brightness(.9); }
  100% { transform: translate3d(0, 18%, 0) scale(1); filter: saturate(1) brightness(.96); }
}
@keyframes intro-bridge-walk {
  0% { top: 108%; opacity: 1; }
  74% { top: 73%; opacity: 1; }
  100% { top: 68%; opacity: .88; }
}

.love-topic-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 390px) {
  .intro-sequence .intro-logo { top: calc(52px + env(safe-area-inset-top)); }
  .love-topic-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v15: strict flat-map bridge meeting and illustrated pixel toolbar. */
.game-map { height: calc(100svh - 86px); }
.map-art {
  object-position: 50% 50%;
  filter: saturate(.9) brightness(.88) contrast(.98);
}

.intro-sequence {
  transition: opacity .42s ease;
  background: #0f1835;
}
.intro-landscape {
  top: -10%;
  height: 112%;
  object-fit: cover;
  object-position: 50% 100%;
  transform: translate3d(0, 0, 0);
  filter: saturate(.92) brightness(.86);
}
.intro-sequence.is-running .intro-landscape {
  animation: intro-flat-camera-follow 5.75s .08s cubic-bezier(.35,.05,.42,1) forwards;
}
.intro-lumi {
  position: absolute;
  left: 50%;
  top: 67%;
  z-index: 3;
  width: 60px;
  height: 80px;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 2px rgba(6,7,22,.62));
}
.intro-sequence.is-running .intro-lumi {
  animation: intro-lumi-greeting .72s 4.85s steps(2,end) 1;
}
.intro-sequence .intro-player {
  top: 104%;
  width: 60px;
  height: 80px;
}
.intro-sequence.is-running .intro-player {
  animation:
    intro-cross-flat-bridge 5.55s .12s steps(28,end) forwards,
    walk-bob .38s steps(2,end) 15,
    player-back-step .72s steps(1,end) .12s infinite;
}
.intro-sequence .intro-logo {
  top: calc(48px + env(safe-area-inset-top));
  z-index: 4;
}
.intro-sequence.is-running .intro-logo {
  animation: intro-logo-meet 2.7s 2.55s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes intro-flat-camera-follow {
  0% { transform: translate3d(0, 0, 0); filter: saturate(.9) brightness(.84); }
  62% { transform: translate3d(0, 5%, 0); filter: saturate(.96) brightness(.9); }
  100% { transform: translate3d(0, 8%, 0); filter: saturate(1) brightness(.94); }
}
@keyframes intro-cross-flat-bridge {
  0% { top: 104%; opacity: 1; }
  100% { top: 75%; opacity: 1; }
}
@keyframes intro-lumi-greeting {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, -56%); }
}
@keyframes intro-logo-meet {
  0% { transform: translate(-50%, -220px); opacity: 0; }
  28%, 72% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, -12px); opacity: 0; }
}

.guide-npc {
  left: 50%;
  top: 68%;
}

.bottom-nav {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(86px + env(safe-area-inset-bottom));
  padding: 0 7% env(safe-area-inset-bottom);
  overflow: hidden;
  border: 0;
  background: #15172d;
  box-shadow: 0 -8px 22px rgba(5,5,17,.38);
}
.bottom-nav-art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom);
  z-index: 0;
  width: 100%;
  height: 88px;
  object-fit: cover;
  object-position: 50% 100%;
  image-rendering: pixelated;
  pointer-events: none;
}
.bottom-nav .nav-item {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 82px;
  padding: 0;
  background: transparent;
}
.bottom-nav .nav-item > span { opacity: 0; }
.bottom-nav .nav-item.is-active { background: rgba(255,213,126,.045); }
.bottom-nav .nav-item.is-active::after {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 8px;
  height: 2px;
  background: #ffe29a;
}
.bottom-nav .nav-item:focus-visible {
  outline: 2px solid #ffe29a;
  outline-offset: -5px;
}

#compatibility-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#compatibility-fields .field:first-child { grid-column: 1 / -1; }

@media (max-width: 390px) {
  .intro-sequence .intro-logo { top: calc(56px + env(safe-area-inset-top)); }
  #compatibility-fields { grid-template-columns: 1fr; }
  #compatibility-fields .field:first-child { grid-column: auto; }
}

/* v16: Lumi holds the bridge entrance; separate the oracle house hit target. */
.guide-npc,
.is-intro .guide-npc {
  left: 50%;
  top: 69%;
  animation: none !important;
}
.is-intro .guide-npc .guide-field-sprite { animation: none !important; }
.hotspot-general {
  left: 50%;
  top: 56%;
}

/* Let the illustrated toolbar overlap the map edge instead of reading as a pasted strip. */
.game-map {
  height: calc(100svh - 84px);
}
.game-map::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 14;
  height: 38px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(17,21,44,0), #15172d 94%);
}
.bottom-nav {
  height: calc(92px + env(safe-area-inset-bottom));
  margin-top: -8px;
  padding-bottom: env(safe-area-inset-bottom);
  background: #15172d;
  box-shadow: 0 -5px 14px rgba(5,6,18,.28);
}
.bottom-nav-art {
  top: 0;
  bottom: auto;
  height: 92px;
  object-fit: cover;
  object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.78) 12px, #000 24px);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.78) 12px, #000 24px);
}
.bottom-nav .nav-item { height: 88px; }

/* v17: only the player moves during the bridge approach. Lumi and the world stay fixed. */
.intro-landscape,
.intro-sequence.is-running .intro-landscape {
  animation: none !important;
  transform: translate3d(0, 0, 0) !important;
}
.intro-lumi,
.intro-sequence.is-running .intro-lumi {
  top: 67%;
  animation: none !important;
  transform: translate(-50%, -50%) !important;
  will-change: auto;
}
.guide-npc,
.is-intro .guide-npc {
  top: 67%;
  animation: none !important;
}

/* v18: four-frame footsteps, a locked face-to-face meeting, and the supplied toolbar. */
.movement-sprite {
  background-image: url("./assets/player-lumi-movement-v5.png");
  background-size: 600% 100%;
  background-position: calc(var(--mi, 0) * 20%) center;
}

@keyframes player-walk-up-frames {
  0%, 24% { background-position: 20% center; }
  25%, 49% { background-position: 40% center; }
  50%, 74% { background-position: 60% center; }
  75%, 100% { background-position: 40% center; }
}
@keyframes player-meet-rest {
  to { background-position: 80% center; }
}

.intro-player {
  left: 50% !important;
  width: 36px;
  height: 96px;
  background-position: 80% center;
}
.intro-sequence.is-running .intro-player {
  animation:
    intro-cross-flat-bridge 5.15s .12s steps(28,end) forwards,
    player-walk-up-frames .56s .12s steps(1,end) 9,
    player-meet-rest .01s 5.22s step-end forwards !important;
}
@keyframes intro-cross-flat-bridge {
  0% { top: 104%; opacity: 1; }
  100% { top: 86%; opacity: 1; }
}

.intro-lumi,
.intro-sequence.is-running .intro-lumi {
  left: 50% !important;
  top: 67% !important;
  width: 40px;
  height: 88px;
  margin-left: 0 !important;
  background-position: 100% center;
  animation: none !important;
  transform: translate(-50%, -50%) !important;
}
.guide-npc,
.is-intro .guide-npc {
  left: 50% !important;
  top: 67% !important;
  margin-left: 0 !important;
  animation: none !important;
  transform: translate(-50%, -50%) !important;
}
.guide-npc .guide-field-sprite {
  left: 50% !important;
  width: 44px;
  height: 88px;
  background-position: 100% center;
  animation: none !important;
  transform: translateX(-50%) !important;
}

.player.is-facing-back:not(.is-walking),
.player.is-meeting {
  background-position: 80% center;
}
.player {
  width: 36px;
  height: 88px;
}
.player.is-walking.is-facing-back {
  animation: player-walk-up-frames .56s steps(1,end) infinite !important;
}
.player.is-meeting {
  animation: none !important;
  transform: translate(-50%, -72%) !important;
}

.game-map {
  height: calc(100svh - 88px);
  min-height: 0;
}
.bottom-nav {
  height: calc(96px + env(safe-area-inset-bottom));
  margin-top: -8px;
  padding: 0 6.5% env(safe-area-inset-bottom);
  background: #11152b;
  box-shadow: 0 -4px 14px rgba(5,6,18,.24);
}
.bottom-nav-art {
  top: 50%;
  bottom: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: 50% 50%;
  transform: translateY(-50%);
  -webkit-mask-image: none;
  mask-image: none;
}
.bottom-nav .nav-item { height: 92px; }
.bottom-nav .nav-item.is-active { background: rgba(255,213,126,.035); }
.bottom-nav .nav-item.is-active::after { bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  .intro-sequence.is-running .intro-player { animation: player-meet-rest .01s forwards !important; }
  .player.is-walking.is-facing-back { animation: none !important; background-position: 80% center; }
}

/* A quiet HUD: standalone exit icon, centered title, score on the right. */
.hud {
  position: absolute;
  align-items: center;
  padding: calc(18px + env(safe-area-inset-top)) 12px 22px;
}
.map-exit-button {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 84px;
  min-width: 84px;
  height: 48px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
}
.exit-icon {
  position: relative;
  display: block;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  overflow: hidden;
}
.exit-icon img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 96px;
  object-fit: contain;
  transform: translate(-50%, -52%);
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 1px rgba(10,7,18,.72));
}
.exit-label {
  color: #fff1d1;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 2px #171126, 1px 0 #171126, -1px 0 #171126;
}
.map-exit-button:focus-visible {
  outline: 2px solid #ffe29a;
  outline-offset: 1px;
}
.brand-lockup {
  position: absolute;
  left: 50%;
  top: calc(22px + env(safe-area-inset-top));
  display: block;
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.brand-kicker { display: none; }
.brand-lockup h1 {
  white-space: nowrap;
  font-size: clamp(18px, 5vw, 24px);
  letter-spacing: -.03em;
}
.hud-actions { margin-left: auto; }

@media (max-width: 390px) {
  .hud { padding-top: calc(20px + env(safe-area-inset-top)); }
  .map-exit-button { width: 76px; min-width: 76px; height: 44px; }
  .exit-icon { flex-basis: 34px; width: 34px; height: 34px; }
  .exit-icon img { width: 88px; height: 88px; }
  .exit-label { font-size: 10px; }
  .brand-lockup { display: block; top: calc(24px + env(safe-area-inset-top)); }
  .brand-lockup h1 { font-size: 17px; }
  .moon-score { min-width: 58px; padding-inline: 8px; }
}

@media (min-width: 700px) {
  .game-map { height: calc(100svh - 132px); }
}

/* Lumi speaks in the outdoor scene itself, never in a modal window. */
.guide-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: block;
  width: min(100%, 520px);
  height: 100svh;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: var(--cream);
  background: transparent;
}
.guide-dialog[hidden] { display: none !important; }

/* v25: player-proportioned bridge reveal, category identity, and paid free-chat flow. */
.intro-landscape {
  top: -24%;
  height: 128%;
  object-position: 50% 100%;
  transform: translate3d(0, 0, 0) scale(1.025) !important;
  will-change: transform, filter;
}
.intro-sequence.is-running .intro-landscape {
  animation: intro-camera-follow-player 5.25s .12s cubic-bezier(.3,.04,.4,1) forwards !important;
}
@keyframes intro-camera-follow-player {
  0%, 14% { transform: translate3d(0, 0, 0) scale(1.025); filter: saturate(.9) brightness(.82); }
  62% { transform: translate3d(0, 11%, 0) scale(1.012); filter: saturate(.96) brightness(.9); }
  100% { transform: translate3d(0, 18%, 0) scale(1); filter: saturate(1) brightness(.96); }
}
.intro-player {
  width: 30px !important;
  height: 96px !important;
  transform: translate(-50%, -72%) scaleX(.78);
  transform-origin: 50% 82%;
}
.intro-sequence.is-running .intro-player {
  animation:
    intro-cross-v25-bridge 5.15s .12s steps(30,end) forwards,
    player-walk-up-frames .56s .12s steps(1,end) 9,
    player-meet-rest .01s 5.22s step-end forwards !important;
}
@keyframes intro-cross-v25-bridge {
  0% { top: 106%; opacity: 1; }
  100% { top: 75%; opacity: 1; }
}
.player { width: 30px; height: 88px; }
.intro-lumi,
.intro-sequence.is-running .intro-lumi,
.guide-npc,
.is-intro .guide-npc {
  left: 51.2% !important;
}

.npc-title-row {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.npc-heading .npc-title-row h2 { order: initial; margin: 0; }
.npc-category-icon {
  display: inline-block;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  background-image: url("./assets/npc-category-icons-v1.png");
  background-repeat: no-repeat;
  background-size: 500% auto;
  background-position: var(--icon-position, 0%) center;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 1px rgba(35,18,35,.64));
}
.npc-heading > #npc-role { order: 2; }
.npc-heading .npc-category-icon { order: initial; color: inherit; font: inherit; letter-spacing: normal; }

.result-actions { grid-template-columns: 1fr; }
.result-actions .pixel-button { width: 100%; }

.followup-chat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(23,17,45,.12), rgba(27,18,38,.48) 58%, rgba(18,13,29,.94)),
    url("./assets/moon-village.png") 50% 44% / cover no-repeat;
  image-rendering: pixelated;
}
.followup-chat[hidden] { display: none !important; }
.chat-oracle-stage { position: absolute; inset: 0; overflow: hidden; }
.chat-oracle-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(22,15,32,.76));
  pointer-events: none;
}
.chat-oracle-portrait {
  position: absolute;
  left: 50%;
  bottom: 286px;
  width: 350px;
  height: 350px;
  transform: translateX(-50%);
  filter: drop-shadow(0 12px 6px rgba(5,3,12,.58));
}
.chat-panel {
  position: relative;
  z-index: 2;
  width: calc(100% - 22px);
  margin: 0 11px 12px;
  padding: 0 14px 14px;
  border: 3px solid #9d624d;
  border-radius: 5px;
  color: var(--ink);
  background: linear-gradient(#fff0cf, #efd2a3);
  box-shadow: inset 0 0 0 3px #f8e0b7, 0 6px 0 #311b31;
}
.chat-speaker-row {
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: calc(100% - 18px);
  margin: -35px 0 8px -4px;
  padding: 5px 11px 5px 7px;
  border: 2px solid #9d624d;
  border-radius: 4px 4px 0 0;
  color: #fff0d3;
  background: #7a4358;
  box-shadow: inset 0 0 0 2px #a75d69;
}
.chat-speaker-row .npc-category-icon { flex-basis: 25px; width: 25px; height: 25px; }
.chat-speaker-row strong { font-size: 16px; }
.chat-speaker-row > span:last-child { color: #f3c99a; font-size: 11px; font-weight: 800; }
.chat-messages {
  display: grid;
  gap: 8px;
  max-height: 168px;
  padding: 5px 0 10px;
  overflow-y: auto;
  scrollbar-color: #9c5b64 transparent;
}
.chat-message {
  width: fit-content;
  max-width: 88%;
  padding: 9px 11px;
  border: 1px solid #b67b67;
  border-radius: 7px 7px 7px 2px;
  color: #3b2434;
  background: rgba(255,249,225,.78);
  font-size: 12px;
  line-height: 1.6;
  word-break: keep-all;
}
.chat-message.user {
  justify-self: end;
  border-color: #70435c;
  border-radius: 7px 7px 2px 7px;
  color: #fff2d9;
  background: #70435c;
}
.chat-unlock { padding-top: 10px; border-top: 1px solid rgba(101,65,75,.28); }
.chat-unlock[hidden], .chat-form[hidden] { display: none !important; }
.chat-payment-product { margin: 0 0 8px; color: #f7e7cf; background: #3a2943; }
.chat-payment-product span { font-size: 11px; }
.chat-unlock > p { margin: 0 0 9px; color: #60404c; font-size: 12px; line-height: 1.5; }
.chat-unlock > .pixel-button { width: 100%; }
.chat-form { padding-top: 10px; border-top: 1px solid rgba(101,65,75,.28); }
.chat-form > label { display: block; margin-bottom: 6px; color: #61404c; font-size: 11px; font-weight: 800; }
.chat-compose { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.chat-compose input {
  min-width: 0;
  height: 48px;
  padding: 0 11px;
  border: 2px solid #80566a;
  border-radius: 4px;
  color: #fff2dc;
  background: #1c1728;
}
.chat-compose input::placeholder { color: #9e8c9e; }
.chat-compose input:focus { outline: 3px solid #dca66d; outline-offset: 1px; }
.chat-compose .pixel-button { min-width: 74px; padding-inline: 12px; }

@media (max-width: 390px) {
  .npc-heading { gap: 5px; }
  .npc-category-icon { flex-basis: 23px; width: 23px; height: 23px; }
  .chat-oracle-portrait { width: 304px; height: 304px; bottom: 300px; }
  .chat-panel { width: calc(100% - 16px); margin-inline: 8px; padding-inline: 11px; }
  .chat-messages { max-height: 145px; }
}

/* v26: seamless bridge camera, consistent oracle labels, and two paid question paths. */
.intro-sequence { transition: none !important; }
.intro-sequence.is-ending { opacity: 1; }
.intro-landscape {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: translate3d(0, -18%, 0) scale(1.2) !important;
  transform-origin: 50% 50%;
  filter: saturate(.9) brightness(.82) contrast(.98);
}
.intro-sequence.is-running .intro-landscape {
  animation: intro-camera-seamless-v26 5.55s .08s cubic-bezier(.28,.04,.32,1) forwards !important;
}
@keyframes intro-camera-seamless-v26 {
  0%, 10% { transform: translate3d(0, -18%, 0) scale(1.2); filter: saturate(.9) brightness(.82) contrast(.98); }
  58% { transform: translate3d(0, -8%, 0) scale(1.1); filter: saturate(.9) brightness(.86) contrast(.98); }
  100% { transform: translate3d(0, 0, 0) scale(1); filter: saturate(.9) brightness(.88) contrast(.98); }
}
.intro-player {
  width: 40px !important;
  height: 88px !important;
  transform: translate(-50%, -72%) scaleX(1) !important;
}
.intro-sequence.is-running .intro-player {
  animation:
    intro-cross-v26-bridge 5.35s .12s steps(30,end) forwards,
    player-walk-up-frames .56s .12s steps(1,end) 10,
    player-meet-rest .01s 5.48s step-end forwards !important;
}
@keyframes intro-cross-v26-bridge {
  0% { top: 106%; opacity: 1; }
  100% { top: 75%; opacity: 1; }
}
.intro-lumi,
.intro-sequence.is-running .intro-lumi,
.guide-npc .guide-field-sprite,
.player {
  width: 40px !important;
  height: 88px !important;
}

.npc-heading {
  max-width: calc(100% - 18px);
  gap: 8px;
  padding: 7px 12px;
}
.npc-heading > #npc-role {
  color: #ffe0b8;
  font: 800 12px/1.2 system-ui, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
}
.npc-heading .npc-title-row { gap: 5px; }
.npc-heading .npc-title-row h2 { font-size: 18px; }

.form-speaker { gap: 7px; padding: 5px 11px 5px 7px; }
.form-speaker .npc-category-icon {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
}
.form-speaker #form-step-label {
  color: #ffe0b8;
  font: 800 12px/1.2 system-ui, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
}
.chat-speaker-row > #chat-category-label {
  color: #ffe0b8;
  font: 800 12px/1.2 system-ui, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
}

#fortune-dialog[data-npc="love"] .followup-chat {
  background: linear-gradient(180deg, rgba(52,23,42,.02), rgba(44,20,37,.2) 61%, rgba(24,13,28,.78)), url("./assets/interior-love-v2.png") 50% 45% / cover no-repeat;
}
#fortune-dialog[data-npc="wealth"] .followup-chat {
  background: linear-gradient(180deg, rgba(13,39,31,.02), rgba(18,37,31,.2) 61%, rgba(13,24,24,.8)), url("./assets/interior-wealth-v2.png") 50% 45% / cover no-repeat;
}
#fortune-dialog[data-npc="career"] .followup-chat {
  background: linear-gradient(180deg, rgba(26,23,56,.02), rgba(26,20,50,.2) 61%, rgba(15,13,31,.8)), url("./assets/interior-career-v2.png") 50% 45% / cover no-repeat;
}
#fortune-dialog[data-npc="health"] .followup-chat {
  background: linear-gradient(180deg, rgba(30,47,27,.02), rgba(33,43,27,.18) 61%, rgba(20,27,18,.78)), url("./assets/interior-health-v2.png") 50% 45% / cover no-repeat;
}
#fortune-dialog[data-npc="general"] .followup-chat {
  background: linear-gradient(180deg, rgba(17,20,52,.02), rgba(23,19,53,.2) 61%, rgba(12,12,30,.82)), url("./assets/interior-general-v2.png") 50% 45% / cover no-repeat;
}
.chat-oracle-portrait {
  background-size: 300% 100%;
  background-position: calc(var(--pose, 0) * 50%) center;
}
.chat-panel {
  margin-bottom: 0;
  padding-top: 10px;
}
.chat-speaker-row {
  width: 100%;
  max-width: 100%;
  margin: 0 0 8px;
  border-radius: 4px;
}
.chat-messages { max-height: 126px; padding-top: 0; }
.chat-message.invite {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 5px;
}
.question-pass-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.question-pass-options button {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 112px;
  padding: 12px 10px;
  border: 2px solid #8b5363;
  border-radius: 5px;
  color: #fff1d8;
  background: #4d3049;
  box-shadow: inset 0 0 0 2px #71435d, 0 3px 0 #2d1c30;
  text-align: left;
  cursor: pointer;
}
.question-pass-options button:hover,
.question-pass-options button:focus-visible { border-color: #e0aa6f; filter: brightness(1.08); outline: 3px solid #ffe6a4; outline-offset: 2px; }
.question-pass-options button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #71435d, 0 1px 0 #2d1c30; }
.question-pass-options span { display: grid; gap: 4px; }
.question-pass-options strong { font-size: 13px; line-height: 1.35; }
.question-pass-options small { color: #e1c5d3; font-size: 11px; line-height: 1.35; }
.question-pass-options b { align-self: flex-end; color: #ffe09b; font-size: 16px; }
.chat-unlock > p { margin-top: 10px; }

.reading-card.is-bonus {
  border-color: #8c6a65;
  background: #241b2d;
}
.reading-card.is-bonus span { color: #f0c07f; }

.close-button {
  place-items: center;
  padding: 0;
  font-size: 0;
  line-height: 1;
}
.close-button::before,
.close-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 2px;
  border-radius: 1px;
  background: #fff1d5;
  transform-origin: center;
}
.close-button::before { transform: translate(-50%, -50%) rotate(45deg); }
.close-button::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 390px) {
  .npc-heading > #npc-role,
  .form-speaker #form-step-label,
  .chat-speaker-row > #chat-category-label { font-size: 12px; }
  .question-pass-options button { min-height: 106px; padding-inline: 8px; }
}

/* v28: keep the follow-up dialogue inside its panel at every mobile width. */
.chat-panel,
.chat-messages { min-width: 0; }
.chat-messages { overflow-x: hidden; }
.chat-message.invite {
  justify-self: stretch;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* v30: Luna's tarot workshop, immersive single-bubble chat, and unified dialogue type. */
.dialog-frame,
.dialog-frame *,
.menu-panel,
.menu-panel * {
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.npc-heading span,
.step-label,
.result-eyebrow,
.reading-card span,
.oracle-loading > span,
.form-speaker span,
.quest-label {
  font-family: inherit;
  letter-spacing: 0;
}

.tarot-house-art {
  position: absolute;
  left: 50%;
  top: 2%;
  z-index: 1;
  width: min(32%, 172px);
  height: auto;
  transform: translateX(-50%);
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 3px rgba(10,7,25,.42));
  pointer-events: none;
}
.hotspot-tarot { left: 50%; top: 18%; }
.hotspot-tarot .npc-label { bottom: 66px; background: rgba(46,29,67,.9); }

.guide-npc,
.is-intro .guide-npc {
  left: 50% !important;
  top: 74% !important;
}
.guide-label { display: none !important; }
.guide-marker {
  position: absolute;
  left: 50%;
  bottom: 86px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 30px;
  height: 22px;
  transform: translateX(-50%);
  border: 2px solid #715060;
  border-radius: 8px 8px 8px 3px;
  background: #fff0d3;
  box-shadow: 0 3px 0 rgba(28,18,35,.65), 0 0 12px rgba(255,220,148,.38);
  animation: guide-marker-float 1.8s steps(2,end) infinite;
}
.guide-marker::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: -6px;
  width: 7px;
  height: 7px;
  border-left: 2px solid #715060;
  border-bottom: 2px solid #715060;
  background: #fff0d3;
  transform: skewY(-35deg);
}
.guide-marker i { width: 4px; height: 4px; border-radius: 1px; background: #80536b; }
@keyframes guide-marker-float { 50% { transform: translate(-50%, -4px); } }

.npc-category-icon.is-tarot-icon {
  background-image: url("./assets/tarot-house-v2.png");
  background-size: 155% auto;
  background-position: 50% 58%;
}

#fortune-dialog[data-npc="tarot"] .dialog-scene,
#fortune-dialog[data-npc="tarot"] .birth-form,
#fortune-dialog[data-npc="tarot"] .tarot-reading,
#fortune-dialog[data-npc="tarot"] .followup-chat {
  background:
    linear-gradient(180deg, rgba(30,16,54,.02), rgba(31,18,52,.18) 60%, rgba(17,11,30,.78)),
    url("./assets/interior-tarot-v1.png") 50% 46% / cover no-repeat;
}

.tarot-reading {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  image-rendering: pixelated;
}
.tarot-reading[hidden] { display: none !important; }
.tarot-dialog-panel {
  position: relative;
  z-index: 3;
  margin: 0 12px 12px;
  padding: 19px 14px 14px;
  border: 3px solid #8f5d5a;
  border-radius: 5px;
  color: var(--ink);
  background: linear-gradient(#fff0cf, #efd2a3);
  box-shadow: inset 0 0 0 3px #f8e0b7, 0 6px 18px rgba(25,14,34,.5);
}
.tarot-dialog-panel .form-speaker { top: -34px; }
.tarot-dialog-panel h2 { margin: 3px 0 5px; color: #3b2231; font-size: 19px; line-height: 1.3; }
.tarot-dialog-panel p { margin: 0 0 12px; color: #745360; font-size: 11px; line-height: 1.5; }
.tarot-name-field { margin-bottom: 10px; }
.tarot-name-field > span { color: #5a3c47; }
.tarot-name-field input {
  width: 100%;
  height: 44px;
  padding: 0 11px;
  border: 2px solid #9b6471;
  border-radius: 4px;
  color: #fff4e4;
  background: #1c1728;
}
.tarot-topic-options { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-bottom: 11px; }
.tarot-topic-options button {
  min-height: 40px;
  border: 2px solid #a46d79;
  border-radius: 4px;
  color: #684653;
  background: #f2d9b0;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.tarot-topic-options button.is-selected { border-color: #7b4561; color: #fff1d7; background: #71485e; box-shadow: inset 0 0 0 2px #986178; }
.tarot-topic-step > .pixel-button { width: 100%; }
.tarot-card-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 6px; margin: 8px 0 12px; }
.tarot-card-grid button {
  position: relative;
  aspect-ratio: .62;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid #b98265;
  border-radius: 4px;
  color: #e5bd79;
  background:
    url("./assets/interior-tarot-v1.png") 56% 83% / 420% auto no-repeat,
    #30203f;
  box-shadow: inset 0 0 0 2px #51345c, 0 3px 0 #342137;
  cursor: pointer;
}
.tarot-card-grid button span { position: absolute; left: 0; right: 0; bottom: 4px; font-size: 9px; font-weight: 800; text-shadow: 1px 1px #2b1933; }
.tarot-card-grid button.is-selected { transform: translateY(-6px); border-color: #ffe0a0; filter: brightness(1.18); box-shadow: inset 0 0 0 2px #8d628a, 0 5px 10px rgba(63,35,84,.35); }
.tarot-actions { display: grid; grid-template-columns: .8fr 1.4fr; gap: 8px; }

.chat-panel { padding-bottom: 12px; }
.chat-messages {
  max-height: none;
  padding: 0 0 10px;
  overflow: visible;
}
.chat-message,
.chat-message.invite {
  width: 100%;
  max-width: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  padding: 12px 13px;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.65;
}
.chat-form { margin-top: 0; }
.chat-compose { align-items: stretch; }

.atlas-tarot-mini {
  position: absolute;
  right: -14px;
  bottom: -2px;
  width: 112px;
  height: 102px;
  background: url("./assets/tarot-house-v2.png") 50% 50% / contain no-repeat;
  image-rendering: pixelated;
  filter: grayscale(1) brightness(.45);
  opacity: .55;
}

/* v31: fanned tarot draw, illustrated card results, and integrated village placement. */
.tarot-house-art {
  top: 3.4%;
  width: min(28%, 150px);
  filter: drop-shadow(0 5px 2px rgba(10,7,25,.34));
}
.hotspot-tarot { top: 17.5%; }

.guide-npc,
.is-intro .guide-npc {
  left: 50% !important;
  top: 67% !important;
}

.tarot-card-step > p { margin-bottom: 7px; text-align: center; }
.tarot-card-table {
  position: relative;
  height: 292px;
  margin: 4px 0 10px;
  overflow: hidden;
  border: 1px solid rgba(103,66,104,.62);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(49,29,73,.88), rgba(34,20,56,.96)),
    url("./assets/interior-tarot-v1.png") 50% 72% / cover no-repeat;
  box-shadow: inset 0 0 0 2px rgba(217,165,115,.18);
}
.tarot-selected-slots {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 58px);
  justify-content: center;
  gap: 13px;
  padding-top: 16px;
}
.tarot-slot {
  position: relative;
  width: 58px;
  aspect-ratio: .625;
  padding: 0;
  border: 2px dashed rgba(243,206,161,.62);
  border-radius: 5px;
  color: #f3d6ab;
  background: rgba(25,16,42,.34);
  box-shadow: inset 0 0 10px rgba(13,8,26,.35);
  cursor: default;
}
.tarot-slot span {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: max-content;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 800;
  text-shadow: 1px 1px #281732;
}
.tarot-slot.is-filled {
  border-style: solid;
  border-color: #e3ad69;
  background: url("./assets/tarot-card-back-v1.png") 50% 50% / 100% 100% no-repeat;
  box-shadow: 0 5px 12px rgba(15,9,28,.45);
  cursor: pointer;
  animation: tarot-card-to-slot .36s cubic-bezier(.22,1,.36,1) both;
}
.tarot-slot.is-filled span {
  bottom: -15px;
  color: #f7d7a6;
  text-shadow: 1px 1px #24142f;
}
@keyframes tarot-card-to-slot {
  from { transform: translateY(78px) rotate(4deg) scale(.78); opacity: .25; }
  to { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}
.tarot-card-fan {
  position: absolute;
  left: 50%;
  bottom: -19px;
  z-index: 2;
  width: 330px;
  height: 166px;
  transform: translateX(-50%);
}
.tarot-card-fan button {
  position: absolute;
  left: calc(50% - 34px);
  bottom: 0;
  width: 68px;
  aspect-ratio: .625;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: #f0c77f;
  background: url("./assets/tarot-card-back-v1.png") 50% 50% / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 2px rgba(10,6,21,.55));
  transform: translate(var(--fan-x), var(--fan-y)) rotate(var(--fan-r));
  transform-origin: 50% 115%;
  transition: transform .34s cubic-bezier(.22,1,.36,1), opacity .2s ease, filter .2s ease;
  cursor: pointer;
}
.tarot-card-fan button:nth-child(1) { --fan-x: -112px; --fan-y: 29px; --fan-r: -25deg; }
.tarot-card-fan button:nth-child(2) { --fan-x: -73px; --fan-y: 9px; --fan-r: -15deg; }
.tarot-card-fan button:nth-child(3) { --fan-x: -27px; --fan-y: 0px; --fan-r: -5deg; }
.tarot-card-fan button:nth-child(4) { --fan-x: 27px; --fan-y: 0px; --fan-r: 5deg; }
.tarot-card-fan button:nth-child(5) { --fan-x: 73px; --fan-y: 9px; --fan-r: 15deg; }
.tarot-card-fan button:nth-child(6) { --fan-x: 112px; --fan-y: 29px; --fan-r: 25deg; }
.tarot-card-fan button:hover,
.tarot-card-fan button:focus-visible {
  z-index: 3;
  filter: brightness(1.15) drop-shadow(0 7px 3px rgba(10,6,21,.6));
  transform: translate(var(--fan-x), calc(var(--fan-y) - 12px)) rotate(var(--fan-r));
  outline: 2px solid #f1ce91;
  outline-offset: 2px;
}
.tarot-card-fan button.is-selected {
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--fan-x), -128px) rotate(0) scale(.78);
}
.tarot-card-fan button span { display: none; }

.reading-card.is-tarot-card {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 14px;
  align-items: center;
  padding: 13px;
}
.tarot-result-card-art {
  width: 92px;
  aspect-ratio: .625;
  border-radius: 5px;
  background-image: url("./assets/tarot-card-faces-v1.png");
  background-size: 300% 200%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 3px rgba(12,7,22,.42));
}
.tarot-result-card-art[data-tarot-card="달"] { background-position: 0% 0%; }
.tarot-result-card-art[data-tarot-card="별"] { background-position: 50% 0%; }
.tarot-result-card-art[data-tarot-card="열쇠"] { background-position: 100% 0%; }
.tarot-result-card-art[data-tarot-card="장미"] { background-position: 0% 100%; }
.tarot-result-card-art[data-tarot-card="거울"] { background-position: 50% 100%; }
.tarot-result-card-art[data-tarot-card="나침반"] { background-position: 100% 100%; }
.reading-card-copy { min-width: 0; }

@media (max-width: 390px) {
  .tarot-house-art { top: 3.6%; width: min(27%, 142px); }
  .hotspot-tarot { top: 17.5%; }
  .tarot-card-table { height: 276px; }
  .tarot-card-fan { width: 308px; transform: translateX(-50%) scale(.93); transform-origin: 50% 100%; }
  .reading-card.is-tarot-card { grid-template-columns: 78px minmax(0,1fr); gap: 11px; }
  .tarot-result-card-art { width: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .tarot-slot.is-filled { animation: none; }
  .tarot-card-fan button { transition-duration: .01ms; }
}

/* v31: a short full-room RPG entry beat before every consultation. */
.interior-entry {
  position: relative;
  min-height: min(650px, 88svh);
  overflow: hidden;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.interior-entry[hidden] { display: none !important; }
#fortune-dialog[data-npc="love"] .interior-entry { background-image: url("./assets/entry-love-v1.png"); }
#fortune-dialog[data-npc="wealth"] .interior-entry { background-image: url("./assets/entry-wealth-v1.png"); }
#fortune-dialog[data-npc="career"] .interior-entry { background-image: url("./assets/entry-career-v1.png"); }
#fortune-dialog[data-npc="health"] .interior-entry { background-image: url("./assets/entry-health-v1.png"); }
#fortune-dialog[data-npc="general"] .interior-entry { background-image: url("./assets/entry-general-v1.png"); }
#fortune-dialog[data-npc="tarot"] .interior-entry { background-image: url("./assets/entry-tarot-v1.png"); }
.interior-entry-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: #120d20;
  animation: interior-room-reveal .65s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes interior-room-reveal {
  from { opacity: 1; }
  to { opacity: 0; }
}
.interior-field-npc {
  position: absolute;
  left: 50%;
  top: 43%;
  z-index: 2;
  width: 64px;
  height: 104px;
  transform: translate(-50%, -50%);
  background-image: url("./assets/field-sprites-simple.png");
  background-size: 700% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 2px rgba(8,5,14,.48));
}
#fortune-dialog[data-npc="love"] .interior-field-npc { background-position: 33.333% center; }
#fortune-dialog[data-npc="wealth"] .interior-field-npc { background-position: 50% center; }
#fortune-dialog[data-npc="career"] .interior-field-npc { background-position: 66.667% center; }
#fortune-dialog[data-npc="health"] .interior-field-npc { background-position: 83.333% center; }
#fortune-dialog[data-npc="general"] .interior-field-npc { background-position: 100% center; }
#fortune-dialog[data-npc="tarot"] .interior-field-npc {
  width: 72px;
  height: 112px;
  background-image: url("./assets/luna-field-v1.png");
  background-position: center;
  background-size: contain;
}
.interior-field-npc.is-noticing { animation: interior-npc-notice .5s steps(2,end) 1; }
@keyframes interior-npc-notice {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, -57%); }
}
.interior-player {
  position: absolute;
  left: 50%;
  top: 91%;
  z-index: 2;
  width: 32px;
  height: 88px;
  transform: translate(-50%, -68%);
  background-position: 80% center;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 2px rgba(8,5,14,.5));
}

/* Follow-up choices use the same cream dialogue surface as the main conversation. */
.chat-messages { padding: 4px 0 8px; }
.chat-message,
.chat-message.invite {
  display: block;
  min-height: 0;
  padding: 6px 2px 11px;
  border: 0;
  border-radius: 0;
  color: #3b2434;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.75;
}
.chat-unlock { padding-top: 8px; }
.question-pass-options button {
  min-height: 82px;
  padding: 10px 11px;
}
.question-pass-options strong { font-size: 14px; }
.question-pass-options b { font-size: 11px; font-weight: 700; }
.question-pass-options b small { color: #ffe09b; font-size: 11px; }
.chat-unlock > p { margin: 8px 0 0; font-size: 10px; }

@media (max-width: 390px) {
  .interior-entry { min-height: min(620px, 88svh); }
  .interior-field-npc { top: 44%; width: 58px; height: 95px; }
  #fortune-dialog[data-npc="tarot"] .interior-field-npc { width: 66px; height: 103px; }
  .interior-player { top: 92%; width: 29px; height: 82px; }
  .chat-message,
  .chat-message.invite { font-size: 14px; }
}
.atlas-card.is-awake .atlas-tarot-mini { filter: none; opacity: 1; }

.journal-entry { padding: 0; border-left-width: 1px; }
.journal-entry summary { padding: 14px; cursor: pointer; list-style: none; }
.journal-entry summary::-webkit-details-marker { display: none; }
.journal-entry summary::after { content: "+"; position: absolute; right: 14px; top: 16px; color: #e4b979; font-size: 18px; }
.journal-entry[open] summary::after { content: "−"; }
.journal-entry { position: relative; }
.journal-entry summary > p { margin: 0; color: #bdafbd; font-size: 11px; line-height: 1.6; }
.journal-open-label { display: inline-block; margin-top: 9px; color: #e4b979; font-size: 10px; font-weight: 800; }
.journal-reading-copy { padding: 13px 14px; border-top: 1px solid #493749; color: #d8c9d4; font-size: 12px; line-height: 1.7; }
.journal-chat-log { display: grid; gap: 7px; padding: 0 14px 14px; }
.journal-chat-log h4 { margin: 4px 0 2px; color: #f2d9bd; font-size: 12px; }
.journal-chat-message { display: grid; gap: 3px; margin: 0; padding: 9px 10px; border-radius: 5px; background: #261d2e; }
.journal-chat-message.is-user { margin-left: 22px; background: #4e334a; }
.journal-chat-message strong { color: #e4b979; font-size: 10px; }
.journal-chat-message span { color: #d4c5d2; font-size: 11px; line-height: 1.6; }
.journal-chat-empty { padding: 12px; color: #a998aa; background: #211927; text-align: center; }

@media (max-width: 390px) {
  .tarot-house-art { width: min(30%, 154px); top: 3%; }
  .hotspot-tarot { top: 18%; }
  .tarot-dialog-panel { margin-inline: 8px; padding-inline: 11px; }
  .tarot-topic-options { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .tarot-card-grid { gap: 4px; }
  .chat-message,
  .chat-message.invite { font-size: 12px; }
}

/* v32: daily fortune mailbox, safer paths, distinct oracle icons and expanded tarot draw. */
.guide-npc,
.is-intro .guide-npc {
  left: 52.2% !important;
  top: 67% !important;
}

.daily-mailbox {
  position: absolute;
  left: 43.8%;
  top: 66.7%;
  z-index: 14;
  width: 58px;
  height: 78px;
  padding: 0;
  border: 0;
  color: #fff0c8;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 5px 2px rgba(12,8,21,.48));
  transform: translate(-50%, -50%);
}
.daily-mailbox img {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
  image-rendering: pixelated;
  transition: transform .2s cubic-bezier(.22,1,.36,1), filter .2s ease;
}
.daily-mailbox span {
  display: inline-block;
  margin-top: -2px;
  padding: 3px 5px;
  border: 1px solid #8f5c54;
  border-radius: 4px;
  color: #fff1cb;
  background: rgba(58,31,50,.92);
  box-shadow: 0 2px 0 rgba(20,12,26,.7);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.daily-mailbox:hover img,
.daily-mailbox:focus-visible img { transform: translateY(-4px); filter: brightness(1.12); }
.daily-mailbox:focus-visible { outline: 2px solid #f3c878; outline-offset: 3px; }
.is-intro .daily-mailbox { opacity: 0; pointer-events: none; }

.daily-fortune-dialog {
  width: min(94vw, 460px);
  max-height: 92svh;
  padding: 0;
  border: 0;
  color: #42283a;
  background: transparent;
  overflow: visible;
}
.daily-fortune-dialog::backdrop { background: rgba(11,7,25,.82); backdrop-filter: blur(3px); }
.daily-fortune-panel {
  position: relative;
  border: 3px solid #a86857;
  border-radius: 12px;
  background: #f8dfb2;
  box-shadow: inset 0 0 0 3px #f6c879, 0 12px 35px rgba(8,5,18,.5);
  overflow: hidden;
  transform-origin: 50% 65%;
}
.daily-fortune-dialog[open] .daily-fortune-panel { animation: daily-panel-arrive .36s cubic-bezier(.16,1,.3,1) both; }
@keyframes daily-panel-arrive {
  from { opacity: .2; transform: translateY(14px) scale(.97); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.daily-fortune-panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(133,72,65,.42);
  border-radius: 7px;
  pointer-events: none;
  z-index: 2;
}
.daily-fortune-stage { position: relative; z-index: 1; }
.daily-fortune-stage[hidden] { display: none !important; }

.daily-confirm {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 270px;
  padding: 27px 22px 20px;
}
.daily-confirm > img { width: 92px; image-rendering: pixelated; filter: drop-shadow(0 7px 5px rgba(68,35,54,.2)); }
.daily-confirm-copy > span,
.daily-result-heading > span { color: #814552; font-size: 11px; font-weight: 900; }
.daily-confirm-copy h2 { margin: 5px 0 9px; color: #45283c; font-size: 21px; line-height: 1.35; letter-spacing: -.025em; word-break: keep-all; }
.daily-confirm-copy p { margin: 0; color: #664558; font-size: 13px; font-weight: 700; line-height: 1.65; word-break: keep-all; }
.daily-confirm-copy small { display: block; margin-top: 8px; color: #8c6a67; font-size: 10px; }
.daily-confirm-actions { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 5px; }
.daily-confirm-actions .pixel-button { width: 100%; }

.daily-opening {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 450px;
  padding: 44px 24px 36px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #f9e9cb;
  text-align: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(196,108,185,.3), transparent 25%),
    radial-gradient(circle at 50% 34%, rgba(255,210,120,.1), transparent 43%),
    linear-gradient(180deg, #251943 0%, #1a1333 58%, #100d22 100%);
}
.daily-opening::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .42;
  background-image:
    radial-gradient(circle, rgba(255,231,165,.95) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(213,177,255,.78) 0 1px, transparent 1.5px);
  background-position: 8px 11px, 31px 37px;
  background-size: 47px 47px, 67px 67px;
  animation: daily-background-stars 2.8s steps(2, end) infinite;
}
.daily-opening::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -8%;
  right: -8%;
  bottom: -2px;
  height: 31%;
  opacity: .17;
  background: url("./assets/arcade-game-night-v2.png") center 88% / 118% auto no-repeat;
  filter: saturate(.78) brightness(.68) hue-rotate(-4deg);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.72) 35%, #000 76%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.72) 35%, #000 76%);
  pointer-events: none;
}
.daily-opening > * { position: relative; z-index: 1; }
.daily-opening h2 { margin: 17px 0 8px; color: #ffe6ad; font-size: 22px; line-height: 1.3; letter-spacing: -.025em; text-shadow: 0 2px 10px rgba(255,211,126,.16); }
.daily-opening p { margin: 0 auto; max-width: 280px; color: #d9c9e4; font-size: 12px; line-height: 1.65; word-break: keep-all; }
.moon-letter-seal { position: relative; width: 198px; height: 184px; margin: 0 auto 2px; }
.moon-letter-seal::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  clip-path: polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%);
  background: #ffe6a3;
  box-shadow: -82px -42px #d9b0ff, 78px -36px #ffe6a3, -65px 47px #ffe6a3, 72px 44px #d7adff, -12px -75px #fff4cd;
  animation: daily-stars 1.9s steps(2,end) infinite;
}
.moon-letter-seal::after {
  content: none;
}
@keyframes daily-background-stars { 50% { opacity: .28; } }
@keyframes daily-stars { 50% { opacity: .24; transform: scale(.74) rotate(45deg); } }
.moon-letter-sparkles {
  position: absolute;
  z-index: 2;
  inset: 8px 2px 10px;
  transform-origin: 50% 50%;
  animation: daily-sparkles-orbit 16s linear infinite;
}
.moon-letter-sparkles i {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #ffe59a;
  clip-path: polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%);
  filter: drop-shadow(0 1px 3px rgba(255,208,92,.76));
  animation: daily-sparkle-pulse 2.4s ease-in-out infinite;
}
.moon-letter-sparkles i:nth-child(1) { left: 4px; top: 63px; width: 10px; height: 10px; }
.moon-letter-sparkles i:nth-child(2) { left: 29px; top: 22px; width: 4px; height: 4px; border-radius: 50%; clip-path: none; animation-delay: -.4s; }
.moon-letter-sparkles i:nth-child(3) { left: 72px; top: 4px; width: 6px; height: 6px; animation-delay: -1.7s; }
.moon-letter-sparkles i:nth-child(4) { right: 33px; top: 23px; width: 4px; height: 4px; border-radius: 50%; clip-path: none; animation-delay: -.9s; }
.moon-letter-sparkles i:nth-child(5) { right: 3px; top: 65px; width: 9px; height: 9px; animation-delay: -2s; }
.moon-letter-sparkles i:nth-child(6) { right: 29px; bottom: 20px; width: 4px; height: 4px; border-radius: 50%; clip-path: none; animation-delay: -1.2s; }
.moon-letter-sparkles i:nth-child(7) { left: 57px; bottom: 7px; width: 6px; height: 6px; animation-delay: -.7s; }
.moon-letter-sparkles i:nth-child(8) { left: 18px; bottom: 38px; width: 3px; height: 3px; border-radius: 50%; clip-path: none; animation-delay: -1.5s; }
@keyframes daily-sparkles-orbit {
  to { transform: rotate(360deg); }
}
@keyframes daily-sparkle-pulse {
  50% { opacity: .3; transform: scale(.68); filter: drop-shadow(0 1px 1px rgba(255,208,92,.4)); }
}
.moon-letter-glow {
  position: absolute;
  z-index: 0;
  inset: 16px 15px 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,218,145,.3) 0%, rgba(191,101,183,.17) 42%, transparent 72%);
  filter: blur(5px);
  opacity: .32;
  animation: daily-glow 3.2s ease-in-out infinite;
}
@keyframes daily-glow { 50% { transform: scale(1.13); opacity: .72; filter: blur(8px); } }
.moon-letter-envelope {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -3px;
  width: 250px;
  height: auto;
  transform: translate3d(-50%, 0, 0);
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 9px rgba(3,2,12,.46)) drop-shadow(0 0 10px rgba(255,213,125,.18));
  animation: daily-envelope-float 4.2s ease-in-out infinite;
}
@keyframes daily-envelope-float { 50% { transform: translate3d(-50%, -6px, 0); } }
.daily-opening-progress { width: 230px; max-width: 76%; height: 8px; margin: 25px auto 0; padding: 2px; border: 1px solid #9a70ad; border-radius: 2px; background: #0d0a1c; box-shadow: 0 0 12px rgba(185,117,222,.16); }
.daily-opening-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #ad71cc, #f3b6b8 58%, #ffe19a); box-shadow: 0 0 8px rgba(255,220,147,.38); animation: daily-progress 2.35s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes daily-progress { to { transform: scaleX(1); } }

.daily-result {
  max-height: min(88svh, 760px);
  padding: 25px 21px 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #a96570 #edd09f;
}
.daily-result-heading { padding: 0 4px 15px; text-align: center; }
.daily-result-heading h2 { margin: 4px 0 5px; color: #45283c; font-size: 22px; letter-spacing: -.025em; }
.daily-result-heading small { color: #8c6a67; font-size: 10px; }
.daily-fortune-chapters { border-top: 2px solid rgba(145,86,105,.46); }
.daily-fortune-chapter { display: grid; grid-template-columns: 62px 1fr; gap: 12px; padding: 12px 4px; border-bottom: 1px solid rgba(145,86,105,.28); }
.daily-fortune-chapter h3 { margin: 2px 0 0; color: #8a4d62; font-size: 13px; line-height: 1.5; }
.daily-fortune-chapter p { margin: 0; color: #4b3040; font-size: 12px; font-weight: 650; line-height: 1.65; word-break: keep-all; }
.daily-lucky-cues { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; margin: 14px 0 16px; overflow: hidden; border: 1px solid rgba(145,86,105,.42); border-radius: 8px; background: rgba(145,86,105,.24); }
.daily-lucky-cues > div { padding: 12px; background: #f7dca9; text-align: center; }
.daily-lucky-cues small { display: block; margin-bottom: 4px; color: #814552; font-size: 10px; font-weight: 900; }
.daily-lucky-cues strong { color: #4c3041; font-size: 13px; line-height: 1.45; word-break: keep-all; }
.daily-result > .pixel-button { width: 100%; }

.intro-sequence.is-running .intro-landscape {
  animation: intro-camera-seamless-v26 4.8s .06s cubic-bezier(.28,.04,.32,1) forwards !important;
}
.intro-sequence.is-running .intro-player {
  animation:
    intro-cross-v26-bridge 4.62s .08s steps(28,end) forwards,
    player-walk-up-frames .52s .08s steps(1,end) 9,
    player-meet-rest .01s 4.76s step-end forwards !important;
}

.tarot-house-art {
  top: 4.4%;
  width: min(25%, 134px);
  filter: saturate(.88) brightness(.94) drop-shadow(0 5px 2px rgba(10,7,25,.32));
}
.hotspot-tarot { top: 18.5%; }

.npc-category-icon.has-custom-icon {
  background-position: 50% 50% !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

#fortune-dialog[data-npc="wealth"] .portrait,
#fortune-dialog[data-npc="wealth"] .form-oracle-portrait,
#fortune-dialog[data-npc="wealth"] .chat-oracle-portrait {
  transform: translateX(-50%) scale(.94);
  transform-origin: 50% 100%;
}

#fortune-dialog[data-npc="tarot"] .interior-entry { background-image: url("./assets/entry-tarot-v2.png"); }
.interior-field-npc {
  top: 45%;
  width: 54px;
  height: 86px;
}
#fortune-dialog[data-npc="tarot"] .interior-field-npc { display: none; }
.interior-player {
  top: 92%;
  width: 29px;
  height: 78px;
}

#fortune-dialog[data-npc="love"] :is(.dialog-scene, .birth-form, .followup-chat) {
  background: linear-gradient(180deg, rgba(30,18,30,.22), rgba(26,14,28,.42) 58%, rgba(20,10,22,.76)), url("./assets/entry-love-v1.png") 50% 50% / cover no-repeat;
}
#fortune-dialog[data-npc="wealth"] :is(.dialog-scene, .birth-form, .followup-chat) {
  background: linear-gradient(180deg, rgba(13,27,23,.2), rgba(13,25,22,.42) 58%, rgba(9,18,17,.78)), url("./assets/entry-wealth-v1.png") 50% 50% / cover no-repeat;
}
#fortune-dialog[data-npc="career"] :is(.dialog-scene, .birth-form, .followup-chat) {
  background: linear-gradient(180deg, rgba(19,17,39,.2), rgba(18,15,38,.42) 58%, rgba(10,9,25,.78)), url("./assets/entry-career-v1.png") 50% 50% / cover no-repeat;
}
#fortune-dialog[data-npc="health"] :is(.dialog-scene, .birth-form, .followup-chat) {
  background: linear-gradient(180deg, rgba(18,31,18,.2), rgba(20,30,18,.42) 58%, rgba(12,20,12,.76)), url("./assets/entry-health-v1.png") 50% 50% / cover no-repeat;
}
#fortune-dialog[data-npc="general"] :is(.dialog-scene, .birth-form, .followup-chat) {
  background: linear-gradient(180deg, rgba(13,15,36,.22), rgba(15,13,38,.44) 58%, rgba(8,8,24,.8)), url("./assets/entry-general-v1.png") 50% 50% / cover no-repeat;
}
#fortune-dialog[data-npc="tarot"] :is(.dialog-scene, .tarot-reading, .followup-chat) {
  background: linear-gradient(180deg, rgba(24,15,38,.26), rgba(25,14,42,.46) 58%, rgba(12,8,25,.82)), url("./assets/entry-tarot-v2.png") 50% 50% / cover no-repeat;
}

.tarot-shuffle {
  display: block;
  margin: 0 auto 7px;
  padding: 5px 10px;
  border: 1px solid #ad7692;
  border-radius: 5px;
  color: #fff0d3;
  background: #5b3658;
  box-shadow: inset 0 0 0 1px #7d4a6d;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.tarot-shuffle:hover,
.tarot-shuffle:focus-visible { background: #714566; outline: 2px solid #f0c783; outline-offset: 2px; }
.tarot-card-table { height: 316px; }
.tarot-selected-slots { gap: 17px; padding-top: 13px; padding-bottom: 24px; }
.tarot-slot.is-filled span {
  bottom: -38px;
  color: #fff1cc;
  line-height: 1.55;
  white-space: pre-line;
}
.tarot-card-fan { width: 360px; height: 168px; bottom: -18px; }
.tarot-card-fan button { left: calc(50% - 27px); width: 54px; }
.tarot-card-fan button:nth-child(1)  { --fan-x:-149px; --fan-y:50px; --fan-r:-32deg; }
.tarot-card-fan button:nth-child(2)  { --fan-x:-124px; --fan-y:34px; --fan-r:-26deg; }
.tarot-card-fan button:nth-child(3)  { --fan-x:-99px; --fan-y:22px; --fan-r:-20deg; }
.tarot-card-fan button:nth-child(4)  { --fan-x:-72px; --fan-y:13px; --fan-r:-14deg; }
.tarot-card-fan button:nth-child(5)  { --fan-x:-44px; --fan-y:6px; --fan-r:-8deg; }
.tarot-card-fan button:nth-child(6)  { --fan-x:-15px; --fan-y:2px; --fan-r:-3deg; }
.tarot-card-fan button:nth-child(7)  { --fan-x:15px; --fan-y:2px; --fan-r:3deg; }
.tarot-card-fan button:nth-child(8)  { --fan-x:44px; --fan-y:6px; --fan-r:8deg; }
.tarot-card-fan button:nth-child(9)  { --fan-x:72px; --fan-y:13px; --fan-r:14deg; }
.tarot-card-fan button:nth-child(10) { --fan-x:99px; --fan-y:22px; --fan-r:20deg; }
.tarot-card-fan button:nth-child(11) { --fan-x:124px; --fan-y:34px; --fan-r:26deg; }
.tarot-card-fan button:nth-child(12) { --fan-x:149px; --fan-y:50px; --fan-r:32deg; }
.tarot-card-fan.is-shuffling button { animation: tarot-hand-shuffle .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes tarot-hand-shuffle {
  0% { transform: translate(0, 42px) rotate(0deg) scale(.82); opacity: .4; }
  100% { transform: translate(var(--fan-x), var(--fan-y)) rotate(var(--fan-r)) scale(1); opacity: 1; }
}

.tarot-result-card-art[data-tarot-card="태양"] { background-position: 0% 0%; }
.tarot-result-card-art[data-tarot-card="구름"] { background-position: 50% 0%; }
.tarot-result-card-art[data-tarot-card="숲"] { background-position: 100% 0%; }
.tarot-result-card-art[data-tarot-card="왕관"] { background-position: 0% 100%; }
.tarot-result-card-art[data-tarot-card="파도"] { background-position: 50% 100%; }
.tarot-result-card-art[data-tarot-card="문"] { background-position: 100% 100%; }
.tarot-result-card-art:is(
  [data-tarot-card="촛불"],
  [data-tarot-card="시계"],
  [data-tarot-card="고리"],
  [data-tarot-card="탑"],
  [data-tarot-card="새"],
  [data-tarot-card="길"],
  [data-tarot-card="우물"],
  [data-tarot-card="책"],
  [data-tarot-card="불꽃"],
  [data-tarot-card="실"]
) {
  background-image: url("./assets/tarot-card-faces-v2.png");
  background-size: 500% 200%;
}
.tarot-result-card-art[data-tarot-card="촛불"] { background-position: 0% 0%; }
.tarot-result-card-art[data-tarot-card="시계"] { background-position: 25% 0%; }
.tarot-result-card-art[data-tarot-card="고리"] { background-position: 50% 0%; }
.tarot-result-card-art[data-tarot-card="탑"] { background-position: 75% 0%; }
.tarot-result-card-art[data-tarot-card="새"] { background-position: 100% 0%; }
.tarot-result-card-art[data-tarot-card="길"] { background-position: 0% 100%; }
.tarot-result-card-art[data-tarot-card="우물"] { background-position: 25% 100%; }
.tarot-result-card-art[data-tarot-card="책"] { background-position: 50% 100%; }
.tarot-result-card-art[data-tarot-card="불꽃"] { background-position: 75% 100%; }
.tarot-result-card-art[data-tarot-card="실"] { background-position: 100% 100%; }

@media (max-width: 390px) {
  .daily-mailbox { left: 42.8%; width: 52px; }
  .daily-mailbox img { width: 52px; height: 52px; }
  .daily-fortune-dialog { width: min(95vw, 372px); }
  .daily-confirm { grid-template-columns: 72px 1fr; gap: 11px; min-height: 250px; padding: 25px 16px 18px; }
  .daily-confirm > img { width: 72px; }
  .daily-confirm-copy h2 { font-size: 18px; }
  .daily-confirm-copy p { font-size: 12px; }
  .daily-confirm-actions { gap: 7px; }
  .daily-confirm-actions .pixel-button { padding-inline: 9px; font-size: 12px; }
  .daily-opening { min-height: 430px; padding: 38px 18px 32px; }
  .moon-letter-seal { width: 188px; height: 178px; }
  .moon-letter-envelope { width: 238px; }
  .daily-result { padding-inline: 15px; }
  .daily-fortune-chapter { grid-template-columns: 55px 1fr; gap: 9px; }
  .daily-fortune-chapter p { font-size: 11.5px; }
  .daily-lucky-cues > div { padding-inline: 8px; }
  .interior-field-npc { width: 49px; height: 78px; }
  .interior-player { width: 27px; height: 74px; }
  .tarot-card-table { height: 304px; }
  .tarot-card-fan { transform: translateX(-50%) scale(.9); transform-origin: 50% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tarot-card-fan.is-shuffling button { animation: none; }
  .daily-mailbox img { transition: none; }
  .daily-fortune-dialog[open] .daily-fortune-panel,
  .daily-opening::before,
  .moon-letter-seal::before,
  .moon-letter-seal::after,
  .moon-letter-sparkles,
  .moon-letter-sparkles i,
  .moon-letter-glow,
  .moon-letter-envelope,
  .daily-opening-progress span { animation: none; }
  .daily-opening-progress span { transform: scaleX(1); }
}

/* v34: unified field proportions, room framing, dialogue continuity, and horizontal tarot deck. */
.daily-mailbox {
  left: 62%;
  top: 70%;
  width: 50px;
}
.daily-mailbox img { width: 50px; height: 50px; }

.tarot-house-art {
  top: 2.8%;
  width: min(31%, 166px);
  filter: saturate(.92) brightness(.96) drop-shadow(0 6px 3px rgba(10,7,25,.36));
}
.hotspot-tarot { top: 18%; width: 28%; }

.interior-entry {
  min-height: min(650px, 88svh);
  background-color: #050408;
  background-position: 50% 50%;
  background-size: 88% auto;
  box-shadow: inset 0 0 70px rgba(0,0,0,.72);
}
.interior-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, transparent 48%, rgba(0,0,0,.34) 78%, rgba(0,0,0,.72));
}
.interior-field-npc,
.interior-player {
  width: 40px;
  height: 88px;
}
.interior-field-npc { top: 46%; }
.interior-player { top: 91%; }
#fortune-dialog[data-npc="tarot"] .interior-entry {
  background-color: #030207;
  background-size: 88% auto;
}
#fortune-dialog[data-npc="tarot"] .interior-field-npc {
  display: none;
  background-image: url("./assets/luna-field-v2.png");
}

.speech-box p,
#npc-greeting,
.chat-message,
.form-dialog-panel :is(h2, p),
.tarot-dialog-panel :is(h2, p),
#loading-copy {
  white-space: pre-line;
  text-wrap: pretty;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.form-speaker,
.chat-speaker-row,
.npc-heading .npc-title-row {
  align-items: center;
}
.form-speaker > strong,
.form-speaker > span:last-child,
.chat-speaker-row > strong,
.chat-speaker-row > span:last-child {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  line-height: 1.1;
}

.followup-chat { justify-content: flex-end; }
.chat-panel {
  margin: 0 11px 12px;
  padding: 0 14px 14px;
}
.chat-speaker-row {
  width: max-content;
  max-width: calc(100% - 18px);
  margin: -34px 0 10px -4px;
  padding: 5px 11px 5px 7px;
  border-radius: 4px 4px 0 0;
}
.chat-messages {
  min-height: 94px;
  max-height: 150px;
  padding: 5px 1px 10px;
  overflow-y: auto;
}
.chat-message,
.chat-message.invite {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  padding: 7px 3px 12px;
  border: 0;
  border-radius: 0;
  color: #3b2434;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.72;
}
.chat-message.user { color: #684653; background: transparent; text-align: right; }

.tarot-card-step { position: relative; }
.tarot-shuffle {
  min-height: 34px;
  margin: -34px 0 9px auto;
  padding: 6px 12px;
}
.tarot-card-table {
  height: 340px;
  margin-top: 6px;
}
.tarot-selected-slots {
  grid-template-columns: repeat(3, 62px);
  gap: 18px;
  padding-top: 15px;
  padding-bottom: 27px;
}
.tarot-slot { width: 62px; }
.tarot-card-fan {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  width: auto;
  height: 178px;
  padding: 22px 28px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  transform: none;
  scroll-padding-inline: 28px;
  scroll-snap-type: x mandatory;
  scrollbar-color: #9d6b91 rgba(26,15,43,.46);
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
  touch-action: pan-x;
}
.tarot-card-fan button,
.tarot-card-fan button:nth-child(n) {
  position: relative;
  left: auto;
  bottom: auto;
  flex: 0 0 82px;
  width: 82px;
  transform: none;
  transform-origin: 50% 100%;
  scroll-snap-align: center;
}
.tarot-card-fan button:hover,
.tarot-card-fan button:focus-visible {
  transform: translateY(-10px);
}
.tarot-card-fan button.is-selected {
  opacity: .14;
  transform: translateY(-28px) scale(.88);
}
.tarot-card-fan.is-shuffling button { animation: tarot-row-shuffle .48s cubic-bezier(.22,1,.36,1) both; }
@keyframes tarot-row-shuffle {
  0% { transform: translateY(34px) scale(.9); opacity: .35; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

#fortune-dialog[data-view="loading"] > .dialog-frame > .close-button { display: none; }
.oracle-loading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  align-items: end;
  min-height: min(620px, 86svh);
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: radial-gradient(circle at 30% 30%, #49336f, #251b3e 50%, #130f22);
}
.oracle-loading[hidden] { display: none; }
.loading-oracle-stage { position: relative; align-self: stretch; min-width: 0; overflow: hidden; }
.loading-oracle-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 50%, #211833 100%);
  pointer-events: none;
}
.loading-oracle-portrait {
  position: absolute;
  left: 54%;
  bottom: -8px;
  width: 330px;
  height: 330px;
  transform: translateX(-50%);
  filter: drop-shadow(0 12px 6px rgba(5,3,12,.58));
}
.loading-dialog-panel {
  position: relative;
  z-index: 2;
  margin: 0 18px 36px -24px;
  padding: 22px 18px;
  border: 3px solid #9d624d;
  border-radius: 6px;
  color: #3b2434;
  background: linear-gradient(#fff0cf, #efd2a3);
  box-shadow: inset 0 0 0 3px #f8e0b7, 0 8px 0 #311b31;
}
.loading-dialog-panel > span { color: #824e63; font-size: 11px; font-weight: 900; }
.loading-dialog-panel h2 { max-width: none; margin: 9px 0 18px; color: #3b2434; font-size: 19px; line-height: 1.55; }
.loading-dialog-panel .constellation { width: 84px; height: 84px; margin: 0 0 16px auto; }
.loading-dialog-panel .constellation i { width: 6px; height: 6px; }
.loading-dialog-panel .loading-bar { width: 100%; max-width: none; }
.loading-dialog-panel .loading-bar span { animation-duration: 2.25s; }

.result-hero {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  padding: 12px 14px 14px 6px;
  overflow: hidden;
}
.result-oracle-portrait {
  width: 118px;
  height: 118px;
  margin-bottom: -15px;
  filter: drop-shadow(0 8px 4px rgba(10,6,20,.42));
}
.result-oracle-copy { min-width: 0; }
.result-oracle-copy h2 { margin-top: 6px; text-wrap: pretty; word-break: keep-all; }

@media (max-width: 390px) {
  .daily-mailbox { left: 63%; top: 70%; width: 46px; }
  .daily-mailbox img { width: 46px; height: 46px; }
  .tarot-house-art { top: 2.8%; width: min(32%, 160px); }
  .interior-entry { background-size: 90% auto; }
  .interior-field-npc,
  .interior-player { width: 38px; height: 84px; }
  .chat-panel { width: calc(100% - 16px); margin-inline: 8px; padding-inline: 11px; }
  .chat-message,
  .chat-message.invite { font-size: 14px; }
  .tarot-card-table { height: 330px; }
  .tarot-card-fan { gap: 10px; padding-inline: 22px; }
  .tarot-card-fan button,
  .tarot-card-fan button:nth-child(n) { flex-basis: 76px; width: 76px; }
  .oracle-loading { grid-template-columns: 43% 57%; }
  .loading-oracle-portrait { left: 58%; width: 286px; height: 286px; }
  .loading-dialog-panel { margin: 0 10px 28px -20px; padding: 18px 14px; }
  .loading-dialog-panel .constellation { width: 70px; height: 70px; }
  .loading-dialog-panel h2 { font-size: 17px; }
  .result-hero { grid-template-columns: 96px minmax(0, 1fr); }
  .result-oracle-portrait { width: 104px; height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .tarot-card-fan.is-shuffling button { animation: none; }
}

/* v35: silhouette house focus, varied flat rooms, fanned tarot swipe, and calmer loading. */
.npc {
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  filter: none;
  outline: 0 !important;
}
.npc::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 0;
  opacity: 0;
  background: rgba(255, 214, 111, .16);
  clip-path: none;
  filter: drop-shadow(0 0 2px #ffe49a) drop-shadow(0 0 7px rgba(255, 190, 72, .9));
  transition: opacity .2s ease, filter .2s ease;
  pointer-events: none;
}
.npc:hover::before,
.npc:focus-visible::before,
.npc:active::before {
  opacity: 1;
  filter: drop-shadow(0 0 3px #fff0b8) drop-shadow(0 0 10px rgba(255, 191, 68, .95));
}
.npc-label {
  bottom: -13px;
  z-index: 2;
  pointer-events: none;
}
.hotspot-love { left: 22%; top: 17.5%; width: 38%; height: 22%; }
.hotspot-wealth { left: 78%; top: 18%; width: 38%; height: 22%; }
.hotspot-career { left: 22%; top: 43%; width: 34%; height: 20%; }
.hotspot-health { left: 78%; top: 44%; width: 34%; height: 20%; }
.hotspot-general { left: 50%; top: 64%; width: 31%; height: 20%; }
.hotspot-tarot { left: 50%; top: 11%; width: 31%; height: 20%; }
.game-map:has(.hotspot-tarot:hover) .tarot-house-art,
.game-map:has(.hotspot-tarot:focus-visible) .tarot-house-art {
  filter: saturate(1.02) brightness(1.09) drop-shadow(0 0 3px #ffe49a) drop-shadow(0 0 8px rgba(255,190,72,.88));
}

.daily-mailbox span {
  position: absolute;
  left: 50%;
  bottom: 55px;
  margin: 0;
  padding: 7px 9px;
  transform: translateX(-50%);
  border: 2px solid #8f5c54;
  border-radius: 8px;
  color: #5a3142;
  background: #fff0cf;
  box-shadow: inset 0 0 0 2px #f4c989, 0 4px 0 rgba(30,17,34,.72);
  font-size: 11px;
  line-height: 1.15;
  animation: mailbox-bubble 1.8s steps(2, end) infinite;
}
.daily-mailbox span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 11px;
  height: 11px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid #8f5c54;
  border-bottom: 2px solid #8f5c54;
  background: #fff0cf;
}
@keyframes mailbox-bubble { 50% { transform: translate(-50%, -4px); } }

.interior-entry {
  min-height: min(650px, 88svh);
  background-color: #020204;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .84);
}
.interior-entry::before {
  background: radial-gradient(ellipse at 50% 48%, transparent 38%, rgba(0,0,0,.18) 63%, rgba(0,0,0,.88) 100%);
}
#fortune-dialog[data-npc="love"] .interior-entry {
  background-image: url("./assets/entry-love-v2.png");
  background-position: 50% 49%;
  background-size: 76% auto;
}
#fortune-dialog[data-npc="wealth"] .interior-entry { background-position: 50% 47%; background-size: 72% auto; }
#fortune-dialog[data-npc="career"] .interior-entry { background-position: 50% 50%; background-size: 79% auto; }
#fortune-dialog[data-npc="health"] .interior-entry { background-position: 50% 47%; background-size: 74% auto; }
#fortune-dialog[data-npc="general"] .interior-entry { background-position: 50% 50%; background-size: 80% auto; }
#fortune-dialog[data-npc="tarot"] .interior-entry {
  background-image: url("./assets/entry-tarot-v4.png");
  background-position: 50% 50%;
  background-size: 80% auto;
}
.interior-field-npc,
.interior-player { width: 38px; height: 84px; }
.interior-field-npc { top: 46%; }
.interior-player { top: 77%; }
#fortune-dialog[data-npc="love"] .interior-field-npc { left: 48%; top: 45%; }
#fortune-dialog[data-npc="wealth"] .interior-field-npc { left: 52%; top: 44%; }
#fortune-dialog[data-npc="career"] .interior-field-npc { left: 49%; top: 45%; }
#fortune-dialog[data-npc="health"] .interior-field-npc { left: 52%; top: 44%; }
#fortune-dialog[data-npc="general"] .interior-field-npc { left: 50%; top: 46%; }
#fortune-dialog[data-npc="tarot"] .interior-field-npc { display: none; }

#fortune-dialog[data-npc="love"] :is(.dialog-scene, .birth-form, .followup-chat) {
  background: linear-gradient(180deg, rgba(52,23,42,.08), rgba(44,20,37,.28) 60%, rgba(24,13,28,.82)), url("./assets/entry-love-v2.png") 50% 48% / cover no-repeat;
}
#fortune-dialog[data-npc="tarot"] :is(.dialog-scene, .tarot-reading, .followup-chat) {
  background: linear-gradient(180deg, rgba(24,15,38,.14), rgba(25,14,42,.38) 58%, rgba(12,8,25,.86)), url("./assets/entry-tarot-v4.png") 50% 48% / cover no-repeat;
}

.tarot-dialog-panel .form-speaker {
  display: grid;
  grid-template-columns: 25px max-content max-content;
  align-items: center;
  min-height: 39px;
  padding-block: 5px;
}
.tarot-dialog-panel .form-speaker > strong,
.tarot-dialog-panel .form-speaker > span:last-child {
  display: flex;
  align-items: center;
  height: 25px;
  min-height: 25px;
  margin: 0;
  padding: 0;
  line-height: 25px;
}

.tarot-card-step > h2 { max-width: 275px; margin-bottom: 9px; }
.tarot-shuffle { margin: -36px 0 8px auto; }
.tarot-card-table { height: 340px; margin-top: 3px; overflow: hidden; }
.tarot-selected-slots { padding-top: 12px; padding-bottom: 12px; }
.tarot-fan-viewport {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 184px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.tarot-fan-viewport::-webkit-scrollbar { display: none; }
.tarot-card-fan {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  display: block;
  width: 1240px;
  height: 184px;
  padding: 0;
  overflow: visible;
  transform: none;
}
.tarot-card-fan button,
.tarot-card-fan button:nth-child(n) {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 72px;
  height: 108px;
  transform: translateX(-50%) translate(var(--fan-x), var(--fan-y)) rotate(var(--fan-r));
  transform-origin: 50% 100%;
  transition: transform .22s cubic-bezier(.22,1,.36,1), opacity .2s ease, filter .2s ease;
}
.tarot-card-fan button:nth-child(1)  { --fan-x:-546px; --fan-y:70px; --fan-r:-36deg; }
.tarot-card-fan button:nth-child(2)  { --fan-x:-494px; --fan-y:58px; --fan-r:-33deg; }
.tarot-card-fan button:nth-child(3)  { --fan-x:-442px; --fan-y:48px; --fan-r:-30deg; }
.tarot-card-fan button:nth-child(4)  { --fan-x:-390px; --fan-y:39px; --fan-r:-27deg; }
.tarot-card-fan button:nth-child(5)  { --fan-x:-338px; --fan-y:31px; --fan-r:-24deg; }
.tarot-card-fan button:nth-child(6)  { --fan-x:-286px; --fan-y:24px; --fan-r:-20deg; }
.tarot-card-fan button:nth-child(7)  { --fan-x:-234px; --fan-y:18px; --fan-r:-16deg; }
.tarot-card-fan button:nth-child(8)  { --fan-x:-182px; --fan-y:12px; --fan-r:-12deg; }
.tarot-card-fan button:nth-child(9)  { --fan-x:-130px; --fan-y:7px; --fan-r:-8deg; }
.tarot-card-fan button:nth-child(10) { --fan-x:-78px; --fan-y:3px; --fan-r:-5deg; }
.tarot-card-fan button:nth-child(11) { --fan-x:-26px; --fan-y:0px; --fan-r:-2deg; }
.tarot-card-fan button:nth-child(12) { --fan-x:26px; --fan-y:0px; --fan-r:2deg; }
.tarot-card-fan button:nth-child(13) { --fan-x:78px; --fan-y:3px; --fan-r:5deg; }
.tarot-card-fan button:nth-child(14) { --fan-x:130px; --fan-y:7px; --fan-r:8deg; }
.tarot-card-fan button:nth-child(15) { --fan-x:182px; --fan-y:12px; --fan-r:12deg; }
.tarot-card-fan button:nth-child(16) { --fan-x:234px; --fan-y:18px; --fan-r:16deg; }
.tarot-card-fan button:nth-child(17) { --fan-x:286px; --fan-y:24px; --fan-r:20deg; }
.tarot-card-fan button:nth-child(18) { --fan-x:338px; --fan-y:31px; --fan-r:24deg; }
.tarot-card-fan button:nth-child(19) { --fan-x:390px; --fan-y:39px; --fan-r:27deg; }
.tarot-card-fan button:nth-child(20) { --fan-x:442px; --fan-y:48px; --fan-r:30deg; }
.tarot-card-fan button:nth-child(21) { --fan-x:494px; --fan-y:58px; --fan-r:33deg; }
.tarot-card-fan button:nth-child(22) { --fan-x:546px; --fan-y:70px; --fan-r:36deg; }
.tarot-card-fan button:hover,
.tarot-card-fan button:focus-visible {
  z-index: 4;
  transform: translateX(-50%) translate(var(--fan-x), calc(var(--fan-y) - 12px)) rotate(var(--fan-r)) scale(1.06);
}
.tarot-card-fan button.is-selected {
  opacity: .18;
  transform: translateX(-50%) translate(var(--fan-x), calc(var(--fan-y) - 24px)) rotate(var(--fan-r)) scale(.9);
}
.tarot-card-fan.is-shuffling button { animation: tarot-fan-shuffle-v35 .52s cubic-bezier(.22,1,.36,1) both; }
@keyframes tarot-fan-shuffle-v35 {
  0% { transform: translateX(-50%) translate(0, 72px) rotate(0) scale(.8); opacity: .28; }
  100% { transform: translateX(-50%) translate(var(--fan-x), var(--fan-y)) rotate(var(--fan-r)) scale(1); opacity: 1; }
}

.chat-unlock { padding-top: 4px; border-top: 0; }
.question-pass-options button {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.question-pass-options span { justify-items: center; }
.question-pass-options b { align-self: center; margin-top: 8px; }

#fortune-dialog[data-view="loading"] > .dialog-frame > .close-button { display: none !important; }
.oracle-loading {
  grid-template-columns: 43% 57%;
  align-items: end;
  min-height: min(650px, 88svh);
  background: radial-gradient(circle at 26% 35%, #4a356f, #281d42 48%, #130f22 100%);
}
.loading-oracle-stage { overflow: visible; }
.loading-oracle-stage::after { background: linear-gradient(90deg, transparent 64%, rgba(33,24,51,.86) 100%); }
.loading-oracle-portrait {
  left: 56%;
  bottom: -2px;
  width: 300px;
  height: 300px;
}
.loading-dialog-panel {
  align-self: end;
  min-height: 176px;
  margin: 0 14px 72px -16px;
  padding: 20px 16px 18px;
}
.loading-dialog-panel .constellation {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 58px;
  height: 58px;
  margin: 0;
  opacity: .54;
}
.loading-dialog-panel > span { display: block; padding-right: 62px; }
.loading-dialog-panel h2 { margin: 11px 0 17px; padding-right: 8px; font-size: 18px; line-height: 1.58; }
.loading-dialog-panel .loading-bar span { animation-duration: 3.2s; }

@media (max-width: 390px) {
  .npc-label { bottom: -10px; }
  .daily-mailbox span { bottom: 51px; font-size: 10px; }
  .interior-entry { background-size: 76% auto; }
  #fortune-dialog[data-npc="love"] .interior-entry { background-size: 74% auto; }
  #fortune-dialog[data-npc="career"] .interior-entry { background-size: 77% auto; }
  #fortune-dialog[data-npc="general"] .interior-entry { background-size: 78% auto; }
  #fortune-dialog[data-npc="tarot"] .interior-entry { background-size: 78% auto; }
  .interior-field-npc,
  .interior-player { width: 36px; height: 80px; }
  .tarot-card-step > h2 { max-width: 230px; font-size: 17px; }
  .tarot-shuffle { margin-top: -34px; }
  .tarot-card-table { height: 326px; }
  .tarot-fan-viewport { height: 174px; }
  .tarot-card-fan { width: 1200px; height: 174px; }
  .tarot-card-fan button,
  .tarot-card-fan button:nth-child(n) { width: 68px; height: 102px; }
  .oracle-loading { grid-template-columns: 42% 58%; }
  .loading-oracle-portrait { left: 58%; width: 252px; height: 252px; }
  .loading-dialog-panel { min-height: 164px; margin: 0 8px 62px -15px; padding: 17px 12px 15px; }
  .loading-dialog-panel .constellation { width: 48px; height: 48px; }
  .loading-dialog-panel h2 { margin-top: 10px; font-size: 15.5px; line-height: 1.55; }
}

@media (prefers-reduced-motion: reduce) {
  .daily-mailbox span,
  .tarot-card-fan.is-shuffling button { animation: none; }
}

/* v37: preserve the original room art while presenting it as a compact RPG floorplan. */
.lumi-portrait,
.guide-scene .guide-portrait { --portrait-image: url("./assets/lumi-poses-v3.png"); }

.npc::before {
  inset: 0;
  padding: 0;
  background-color: transparent;
  background-image: url("./assets/moon-village-flat-bridge-v3.png");
  background-repeat: no-repeat;
  opacity: 0;
  filter: brightness(1.12) saturate(1.08) drop-shadow(0 0 2px #ffeab0) drop-shadow(0 0 7px rgba(255,194,76,.88));
}
.npc:hover::before,
.npc:focus-visible::before,
.npc:active::before { opacity: .98; }
.hotspot-love::before { background-size: 263.158% auto; background-position: 4.8% 8.3%; }
.hotspot-wealth::before { background-size: 263.158% auto; background-position: 95.2% 9%; }
.hotspot-career::before { background-size: 294.118% auto; background-position: 7.6% 41.25%; }
.hotspot-health::before { background-size: 294.118% auto; background-position: 92.4% 42.5%; }
.hotspot-general::before { background-size: 322.581% auto; background-position: 50% 67.5%; }
.hotspot-tarot::before { display: none; }

.npc-label,
.hotspot-tarot .npc-label {
  top: -13px;
  bottom: auto;
  z-index: 3;
}
.hotspot-general .npc-label { top: -17px; }
.hotspot-love .npc-label,
.hotspot-wealth .npc-label { top: -11px; }

.tarot-house-art {
  left: 50%;
  top: 25.5%;
  width: min(31%, 166px);
  transform: translateX(-50%);
  filter: saturate(.9) brightness(.95) drop-shadow(0 5px 3px rgba(10,7,25,.36));
}
.hotspot-tarot { left: 50%; top: 25%; width: 31%; height: 19%; }
.game-map:has(.hotspot-tarot:hover) .tarot-house-art,
.game-map:has(.hotspot-tarot:focus-visible) .tarot-house-art {
  filter: saturate(1.03) brightness(1.1) drop-shadow(0 0 3px #ffe9a7) drop-shadow(0 0 9px rgba(255,190,72,.9));
}

.daily-mailbox span {
  display: grid;
  place-items: center;
  left: 50%;
  bottom: 50px;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 1000;
  line-height: 1;
}
.daily-mailbox span::after { width: 8px; height: 8px; bottom: -6px; }

.interior-entry,
#fortune-dialog :is(.dialog-scene, .birth-form, .tarot-reading, .followup-chat) {
  background-color: #000 !important;
  background-repeat: no-repeat !important;
  background-position: 50% 48% !important;
  image-rendering: pixelated;
}
.interior-entry {
  background-size: 68% auto !important;
  box-shadow: inset 0 0 92px rgba(0,0,0,.94);
}
.interior-entry::before {
  background: radial-gradient(ellipse at 50% 48%, transparent 41%, rgba(0,0,0,.16) 66%, rgba(0,0,0,.92) 100%);
}
#fortune-dialog[data-npc="love"] .interior-entry { background-image: url("./assets/entry-love-v2.png") !important; }
#fortune-dialog[data-npc="wealth"] .interior-entry { background-image: url("./assets/entry-wealth-v1.png") !important; }
#fortune-dialog[data-npc="career"] .interior-entry { background-image: url("./assets/entry-career-v1.png") !important; }
#fortune-dialog[data-npc="health"] .interior-entry { background-image: url("./assets/entry-health-v1.png") !important; }
#fortune-dialog[data-npc="general"] .interior-entry { background-image: url("./assets/entry-general-v1.png") !important; }
#fortune-dialog[data-npc="tarot"] .interior-entry { background-image: url("./assets/entry-tarot-v4.png") !important; }

#fortune-dialog[data-npc="love"] :is(.dialog-scene, .birth-form, .followup-chat) {
  background-image: linear-gradient(rgba(10,6,12,.32), rgba(10,6,12,.48)), url("./assets/entry-love-v2.png") !important;
}
#fortune-dialog[data-npc="wealth"] :is(.dialog-scene, .birth-form, .followup-chat) {
  background-image: linear-gradient(rgba(5,10,8,.32), rgba(5,10,8,.48)), url("./assets/entry-wealth-v1.png") !important;
}
#fortune-dialog[data-npc="career"] :is(.dialog-scene, .birth-form, .followup-chat) {
  background-image: linear-gradient(rgba(7,6,15,.32), rgba(7,6,15,.48)), url("./assets/entry-career-v1.png") !important;
}
#fortune-dialog[data-npc="health"] :is(.dialog-scene, .birth-form, .followup-chat) {
  background-image: linear-gradient(rgba(7,11,6,.3), rgba(7,11,6,.47)), url("./assets/entry-health-v1.png") !important;
}
#fortune-dialog[data-npc="general"] :is(.dialog-scene, .birth-form, .followup-chat) {
  background-image: linear-gradient(rgba(5,6,14,.32), rgba(5,6,14,.5)), url("./assets/entry-general-v1.png") !important;
}
#fortune-dialog[data-npc="tarot"] :is(.dialog-scene, .tarot-reading, .followup-chat) {
  background-image: linear-gradient(rgba(7,4,14,.32), rgba(7,4,14,.5)), url("./assets/entry-tarot-v4.png") !important;
}
#fortune-dialog :is(.dialog-scene, .birth-form, .tarot-reading, .followup-chat) {
  background-size: 100% 100%, 68% auto !important;
  background-position: 0 0, 50% 48% !important;
}

.speech-box p,
.chat-message,
.result-view p { white-space: pre-line; text-wrap: pretty; word-break: keep-all; }

.chat-unlock,
.chat-form { margin-top: 0; padding-top: 4px; border-top: 0 !important; }
.chat-compose { align-items: stretch; gap: 8px; }
.chat-compose input,
.chat-compose .pixel-button { height: 48px; min-height: 48px; margin: 0; }
.chat-compose .pixel-button { display: grid; place-items: center; padding-block: 0; line-height: 1; }
.chat-panel { margin-top: 0; }
.chat-oracle-portrait { z-index: 1; }

@media (max-width: 390px) {
  .npc-label,
  .hotspot-tarot .npc-label { top: -10px; bottom: auto; }
  .hotspot-general .npc-label { top: -15px; }
  .tarot-house-art { top: 25.5%; width: min(31%, 156px); }
  .hotspot-tarot { top: 25%; }
  .interior-entry { background-size: 66% auto !important; }
  #fortune-dialog :is(.dialog-scene, .birth-form, .tarot-reading, .followup-chat) { background-size: 100% 100%, 66% auto !important; }
}

/* v39 final cascade overrides */
.npc::before {
  background-image: url("./assets/moon-village-flat-bridge-v4.png");
  opacity: 0;
  filter: brightness(1.035) saturate(1.025) drop-shadow(0 0 2px rgba(255,235,177,.62)) drop-shadow(0 0 6px rgba(255,190,72,.42));
  transition: opacity .34s cubic-bezier(.22,1,.36,1), filter .34s ease;
}
.npc:is(:hover, :focus-visible, :active, .is-selected)::before {
  opacity: .68;
  filter: brightness(1.055) saturate(1.04) drop-shadow(0 0 3px rgba(255,238,190,.72)) drop-shadow(0 0 8px rgba(255,190,72,.5));
}
.npc-label { transition: transform .28s cubic-bezier(.22,1,.36,1), filter .28s ease; }
.npc:is(:hover, :focus-visible, .is-selected) .npc-label { transform: translate(-50%, -2px); filter: drop-shadow(0 2px 4px rgba(255,205,102,.38)); }
.tarot-house-art { top: 23.8%; width: min(33%, 176px); transition: filter .34s ease, transform .34s cubic-bezier(.22,1,.36,1); }
.hotspot-tarot { top: 23.4%; width: 33%; height: 20.5%; }
.hotspot-tarot .npc-label { top: 58%; bottom: auto; }
.game-map:has(.hotspot-tarot:hover) .tarot-house-art,
.game-map:has(.hotspot-tarot:focus-visible) .tarot-house-art,
.game-map:has(.hotspot-tarot.is-selected) .tarot-house-art {
  transform: translateX(-50%) translateY(-1px);
  filter: saturate(.96) brightness(1.045) drop-shadow(0 0 3px rgba(255,235,177,.68)) drop-shadow(0 0 8px rgba(255,190,72,.48));
}
#compatibility-fields { grid-template-columns: 1fr 1fr; align-items: end; }
#compatibility-fields > :first-child,
#compatibility-fields > .check-field { grid-column: 1 / -1; }
@media (max-width: 390px) {
  .tarot-house-art { top: 23.8%; width: min(33%, 166px); }
  .hotspot-tarot { top: 23.4%; width: 33%; }
  .hotspot-tarot .npc-label { top: 58%; }
  #compatibility-fields { grid-template-columns: 1fr; }
  #compatibility-fields > :first-child,
  #compatibility-fields > .check-field { grid-column: auto; }
}

/* v40: contained speaker labels, aligned chat composer, and opening tarot house. */
.intro-world {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translate3d(0, -18%, 0) scale(1.2);
  transform-origin: 50% 50%;
  filter: saturate(.9) brightness(.82) contrast(.98);
}
.intro-world .intro-landscape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  z-index: 0;
}
.intro-tarot-house {
  position: absolute;
  left: 50%;
  top: 21.8%;
  width: min(33%, 176px);
  height: auto;
  transform: translateX(-50%);
  z-index: 1;
  image-rendering: pixelated;
  pointer-events: none;
}
.intro-sequence.is-running .intro-world {
  animation: intro-camera-world-v40 5.55s .08s cubic-bezier(.28,.04,.32,1) forwards;
}
@keyframes intro-camera-world-v40 {
  0%, 10% { transform: translate3d(0, -18%, 0) scale(1.2); filter: saturate(.9) brightness(.82) contrast(.98); }
  58% { transform: translate3d(0, -8%, 0) scale(1.1); filter: saturate(.9) brightness(.86) contrast(.98); }
  100% { transform: translate3d(0, 0, 0) scale(1); filter: saturate(.9) brightness(.88) contrast(.98); }
}
.tarot-house-art { top: 21.8%; }
.hotspot-tarot { top: 21.4%; }

.chat-compose { align-items: start; }
.chat-compose input {
  height: 52px;
  min-height: 52px;
}
.chat-compose .pixel-button {
  height: 48px;
  min-height: 48px;
}
.intro-world .intro-lumi,
.intro-sequence.is-running .intro-world .intro-lumi {
  left: 50% !important;
  top: 67% !important;
  margin-left: 0 !important;
  transform: translate(-50%, -50%) !important;
  animation: none !important;
  will-change: auto;
}

@media (max-width: 390px) {
  .intro-tarot-house { top: 21.8%; width: min(33%, 166px); }
  .tarot-house-art { top: 21.8%; }
  .hotspot-tarot { top: 21.4%; }
}

/* v43: mobile-safe rooms and forms, NPC notice beat, and calmer house focus. */
.npc::before {
  background-image: url("./assets/moon-village-flat-bridge-v5.png");
  opacity: 0;
  transform: none;
  filter: brightness(1.045) saturate(.98) drop-shadow(0 0 3px rgba(255,235,177,.62)) drop-shadow(0 0 8px rgba(255,190,72,.4));
  transition: opacity .34s cubic-bezier(.22,1,.36,1), filter .34s ease;
}
.npc:is(:hover, :focus-visible, :active, .is-selected)::before {
  opacity: .46;
  transform: none;
  filter: brightness(1.06) saturate(1) drop-shadow(0 0 3px rgba(255,235,177,.7)) drop-shadow(0 0 8px rgba(255,190,72,.48));
}

.tarot-house-art,
.intro-tarot-house { top: 20.2%; }
.hotspot-tarot { top: 19.8%; }
.game-map:has(.hotspot-tarot:hover) .tarot-house-art,
.game-map:has(.hotspot-tarot:focus-visible) .tarot-house-art,
.game-map:has(.hotspot-tarot.is-selected) .tarot-house-art {
  transform: translateX(-50%);
  filter: saturate(.98) brightness(1.06) drop-shadow(0 0 3px rgba(255,235,177,.7)) drop-shadow(0 0 8px rgba(255,190,72,.48));
}

#fortune-dialog[data-view="entry"],
#fortune-dialog[data-view="entry"] .dialog-frame {
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: #000;
}
#fortune-dialog[data-view="entry"] .interior-entry {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  background-size: contain !important;
  background-position: 50% 50% !important;
  box-shadow: none;
}
#fortune-dialog[data-view="entry"] .interior-entry::before {
  background: radial-gradient(ellipse at 50% 50%, transparent 46%, rgba(0,0,0,.12) 72%, rgba(0,0,0,.72) 100%);
}
.interior-field-npc { overflow: visible; }
.interior-field-npc::after {
  content: "!";
  position: absolute;
  left: 50%;
  top: -25px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  transform: translate(-50%, 8px) scale(.7);
  border: 2px solid #5c3448;
  border-radius: 8px;
  color: #5b3045;
  background: #fff0cf;
  box-shadow: inset 0 0 0 2px #f1c984, 0 4px 0 rgba(20,10,25,.58);
  font-size: 18px;
  font-weight: 1000;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}
.interior-field-npc.is-noticing {
  animation: interior-npc-look-v43 .42s steps(2,end) 1;
}
.interior-field-npc.is-noticing::after {
  animation: interior-notice-pop-v43 .72s cubic-bezier(.22,1,.36,1) both;
}
@keyframes interior-npc-look-v43 {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 4px)); }
}
@keyframes interior-notice-pop-v43 {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.7); }
  28%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -4px) scale(.96); }
}
#fortune-dialog[data-npc="tarot"] .interior-field-npc {
  display: block;
  left: 50%;
  top: 43%;
  width: 0;
  height: 0;
  background: none;
  filter: none;
}

.birth-form,
.form-dialog-panel,
.form-step,
.form-step > *,
#compatibility-fields,
#compatibility-fields > * { min-width: 0; max-width: 100%; }
.birth-form { width: 100%; overflow-x: hidden; }
.form-dialog-panel { width: auto; overflow-x: hidden; }
.form-dialog-panel :is(input, select, fieldset, .segmented) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.field > span small { color: #654653; font-size: .84em; font-weight: 700; }
#compatibility-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 7px;
  align-items: end;
}
#compatibility-fields > .partner-name-field,
#compatibility-fields > .partner-calendar-field,
#compatibility-fields > .check-field { grid-column: 1 / -1; }
#compatibility-fields > .partner-date-field { grid-column: 1; }
#compatibility-fields > .partner-time-field { grid-column: 2; }
.partner-calendar {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}
.partner-calendar > label { min-width: 0; }

@media (max-width: 390px) {
  .tarot-house-art,
  .intro-tarot-house { top: 20.2%; }
  .hotspot-tarot { top: 19.8%; }
  #fortune-dialog[data-view="entry"] .interior-entry { background-size: contain !important; }
  .form-dialog-panel { margin-inline: 7px; padding-inline: 11px; }
  #compatibility-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #compatibility-fields > .partner-name-field,
  #compatibility-fields > .partner-calendar-field,
  #compatibility-fields > .check-field { grid-column: 1 / -1; }
  #compatibility-fields > .partner-date-field { grid-column: 1; }
  #compatibility-fields > .partner-time-field { grid-column: 2; }
  #compatibility-fields :is(input[type="date"], input[type="time"]) {
    min-height: 44px;
    padding-inline: 7px;
    font-size: 12px;
  }
}

/* v65: keep the bridge meeting readable instead of letting both sprites intersect. */
@keyframes intro-cross-v26-bridge {
  0% { top: 106%; opacity: 1; }
  100% { top: 81%; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .interior-field-npc.is-noticing,
  .interior-field-npc.is-noticing::after { animation-duration: .01ms; }
}

/* v45: seamless opening handoff, stable house focus, clean portraits, and aligned birth-time controls. */
.player.is-intro-handoff {
  transition: none !important;
  animation: none !important;
}

.daily-mailbox {
  left: 64.5%;
  top: 64.4%;
}

.npc::before {
  opacity: 0 !important;
  transform: none !important;
  filter: brightness(1.015) saturate(1) drop-shadow(0 0 3px rgba(255,236,184,.72)) drop-shadow(0 0 8px rgba(255,190,72,.5));
  transition: opacity .24s cubic-bezier(.16,1,.3,1) !important;
  will-change: opacity;
}
.npc:is(:hover, :focus-visible, :active, .is-selected)::before {
  opacity: .28 !important;
  transform: none !important;
}
.npc-label,
.npc:is(:hover, :focus-visible, .is-selected) .npc-label {
  transform: translateX(-50%) !important;
  transition: filter .24s ease !important;
}
.tarot-house-art {
  transform: translateX(-50%) !important;
  transition: filter .24s cubic-bezier(.16,1,.3,1) !important;
}
.game-map:has(.hotspot-tarot:hover) .tarot-house-art,
.game-map:has(.hotspot-tarot:focus-visible) .tarot-house-art,
.game-map:has(.hotspot-tarot.is-selected) .tarot-house-art {
  transform: translateX(-50%) !important;
  filter: saturate(.98) brightness(1.055) drop-shadow(0 0 3px rgba(255,239,194,.78)) drop-shadow(0 0 8px rgba(255,190,72,.52));
}

.sprite,
.portrait,
.guide-portrait,
.form-oracle-portrait,
.tarot-oracle-portrait,
.chat-oracle-portrait,
.loading-oracle-portrait,
.result-oracle-portrait {
  overflow: hidden;
  contain: paint;
  isolation: isolate;
  background-color: transparent;
  background-repeat: no-repeat !important;
  background-size: 300% 100% !important;
  background-position: calc(var(--pose, 0) * 50%) 50% !important;
  background-clip: padding-box;
}
.portrait-wrap,
.form-oracle-stage,
.chat-oracle-stage,
.loading-oracle-stage {
  isolation: isolate;
  contain: paint;
}

.dialog-copy,
.form-dialog-panel,
.tarot-dialog-panel,
.chat-panel {
  isolation: isolate;
}
.npc-heading,
.form-speaker,
.tarot-dialog-panel .form-speaker,
.chat-speaker-row {
  z-index: 12 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.form-step[data-form-step="3"] .check-field {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
  line-height: 1.25;
}

/* v199: mobile-first saju result reading experience. Tarot and shaman stay unchanged. */
.result-view.is-saju-reading {
  padding: 0 0 32px;
  color: #f7ead8;
  background:
    radial-gradient(circle at 78% 7%, rgba(173, 111, 205, .16), transparent 30%),
    linear-gradient(180deg, #2f2042 0%, #21172f 38%, #171221 100%);
}

.result-view.is-saju-reading .result-hero {
  position: relative;
  display: grid;
  grid-template:
    "heading heading" auto
    "portrait speech" 1fr /
    minmax(148px, 41%) minmax(0, 1fr);
  min-height: 330px;
  gap: 12px 4px;
  align-items: end;
  overflow: hidden;
  padding: 0 18px 18px 0;
  border: 0;
  border-bottom: 1px solid rgba(224, 167, 202, .46);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(11, 7, 20, .16) 0%, rgba(15, 9, 25, .36) 44%, rgba(14, 8, 23, .78) 100%),
    var(--room-image);
  background-color: #1b1328;
  background-position: center, 50% 18%;
  background-size: 100% 100%, 100% auto;
  background-repeat: no-repeat;
  box-shadow: inset 0 -28px 46px rgba(8, 4, 15, .38);
}

.result-view.is-saju-reading .result-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 75% 42%, rgba(255, 215, 146, .12), transparent 30%),
    linear-gradient(90deg, rgba(20, 12, 31, .04), rgba(20, 12, 31, .18));
}

.result-view.is-saju-reading .result-hero-heading {
  position: relative;
  z-index: 3;
  grid-area: heading;
  padding: 13px 18px 12px;
  border-bottom: 1px solid rgba(228, 167, 203, .44);
  background: rgba(26, 16, 40, .86);
  box-shadow: 0 6px 16px rgba(9, 5, 16, .24);
  text-align: center;
  backdrop-filter: blur(3px);
}

.result-view.is-saju-reading .result-oracle-portrait {
  position: relative;
  z-index: 2;
  grid-area: portrait;
  align-self: end;
  width: 174px;
  height: 174px;
  aspect-ratio: 1;
  margin: 0 0 -18px -10px;
  filter: drop-shadow(0 10px 8px rgba(7, 4, 14, .48));
}

.result-view.is-saju-reading .result-oracle-copy {
  position: relative;
  z-index: 2;
  grid-area: speech;
  align-self: center;
  min-width: 0;
  padding: 18px 0 10px;
}

.result-view.is-saju-reading .result-eyebrow {
  color: #e6b7cc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

.result-view.is-saju-reading .result-hero-heading h2 {
  margin: 5px auto 0;
  max-width: 430px;
  color: #ffe7ad;
  font-size: clamp(20px, 5.6vw, 25px);
  line-height: 1.28;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.result-view.is-saju-reading .result-opening-speech {
  position: relative;
  padding: 18px 15px 14px;
  border: 2px solid #d7a57e;
  border-radius: 7px 16px 16px 16px;
  color: #382133;
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 255, 244, .65), transparent 31%),
    linear-gradient(180deg, #fff3d7, #f2d4aa);
  box-shadow: inset 0 0 0 1px rgba(255, 250, 228, .68), 0 8px 20px rgba(8, 5, 15, .32);
}

.result-view.is-saju-reading .result-opening-speech::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 32px;
  width: 18px;
  height: 22px;
  background: #f8e5c2;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.result-view.is-saju-reading .result-opening-speech strong {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  margin: -32px 0 8px -4px;
  padding: 4px 12px 5px;
  border: 1px solid #e6b47c;
  border-radius: 9px 9px 5px 5px;
  color: #fff0ce;
  background: linear-gradient(180deg, #8b4d6b, #6e3856);
  box-shadow: 0 3px 0 rgba(52, 24, 46, .55);
  font-size: 12px;
}

.result-view.is-saju-reading .result-opening-speech p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #382133;
  font-size: 16px;
  line-height: 1.62;
}

.result-view.is-saju-reading .keyword-row {
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.result-view.is-saju-reading .keyword-row span {
  padding: 5px 8px;
  border-color: rgba(241, 190, 127, .56);
  color: #ffe1a9;
  background: rgba(29, 20, 45, .72);
  font-size: 11px;
}

.result-view.is-saju-reading > :not(.result-hero) {
  margin-inline: 18px;
}

.result-view.is-saju-reading .manseryeok-stack {
  margin-top: 20px;
}

.result-view.is-saju-reading .free-reading-tier {
  margin-top: 22px;
  padding: 0;
  border: 0;
  background: transparent;
}

.result-view.is-saju-reading .result-summary {
  margin: 0 0 28px;
  padding: 18px 18px 19px;
  border: 1px solid rgba(204, 145, 179, .55);
  border-left: 4px solid #e2a96f;
  border-radius: 5px;
  color: #f9eadb;
  background: linear-gradient(135deg, rgba(83, 51, 91, .72), rgba(35, 25, 49, .72));
  box-shadow: 0 9px 22px rgba(7, 4, 13, .18);
  font-size: 16px;
  line-height: 1.75;
}

.result-view.is-saju-reading .result-summary::before {
  content: "핵심 풀이";
  display: block;
  margin-bottom: 10px;
  color: #ffd993;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
}

.result-view.is-saju-reading .result-summary .reading-paragraph + .reading-paragraph,
.result-view.is-saju-reading .reading-card-body .reading-paragraph + .reading-paragraph {
  margin-top: 18px;
}

.result-view.is-saju-reading .reading-cards {
  display: block;
}

.result-view.is-saju-reading .reading-card {
  position: relative;
  padding: 26px 2px 29px 48px;
  border: 0;
  border-bottom: 1px solid rgba(191, 132, 177, .28);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.result-view.is-saju-reading .reading-section-number {
  position: absolute;
  left: 0;
  top: 27px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #b6789c;
  border-radius: 10px 3px 10px 3px;
  color: #ffd78e;
  background: #34213f;
  box-shadow: inset 0 0 0 2px rgba(114, 69, 107, .55);
  font-size: 12px;
}

.result-view.is-saju-reading .reading-card-copy > span {
  display: block;
  margin-bottom: 8px;
  color: #dba6c5;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .03em;
}

.result-view.is-saju-reading .reading-card h3 {
  margin: 0 0 13px;
  color: #ffe3a4;
  font-size: 20px;
  line-height: 1.42;
  letter-spacing: -.025em;
  word-break: keep-all;
}

.result-view.is-saju-reading .reading-card-body,
.result-view.is-saju-reading .reading-card p {
  color: #eadde6;
  font-size: 16px;
  line-height: 1.75;
}

.result-view.is-saju-reading .reading-card.is-timeline {
  margin: 15px 0;
  padding: 20px 17px 21px 58px;
  border: 1px solid rgba(222, 164, 105, .48);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(77, 44, 85, .62), rgba(31, 24, 48, .72));
}

.result-view.is-saju-reading .reading-card.is-timeline .reading-section-number {
  left: 12px;
  top: 20px;
  border-color: #d8a767;
}

.result-view.is-saju-reading .reading-npc-interlude {
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  align-items: end;
  gap: 0;
  min-height: 150px;
  margin: 22px 0 4px;
  overflow: hidden;
  border: 1px solid rgba(177, 115, 166, .5);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(19, 11, 31, .28), rgba(19, 11, 31, .62)),
    var(--room-image);
  background-position: center, 50% 24%;
  background-size: 100% 100%, 100% auto;
  background-repeat: no-repeat;
}

.result-view.is-saju-reading .reading-interlude-portrait {
  align-self: end;
  width: 132px;
  height: 132px;
  aspect-ratio: 1;
  margin: 0 0 -10px -14px;
  filter: drop-shadow(0 7px 5px rgba(7, 4, 13, .45));
}

.result-view.is-saju-reading .reading-interlude-bubble {
  position: relative;
  z-index: 2;
  align-self: center;
  margin: 22px 14px 16px 0;
  padding: 18px 15px 14px;
  border: 2px solid #d7a57e;
  border-radius: 7px 16px 16px 16px;
  color: #392234;
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 255, 244, .6), transparent 31%),
    linear-gradient(180deg, #fff3d7, #f2d4aa);
  box-shadow: inset 0 0 0 1px rgba(255, 250, 228, .68), 0 7px 18px rgba(8, 5, 15, .28);
}

.result-view.is-saju-reading .reading-interlude-bubble::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 31px;
  width: 18px;
  height: 22px;
  background: #f8e5c2;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.result-view.is-saju-reading .reading-interlude-bubble strong {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  margin: -33px 0 8px -4px;
  padding: 4px 12px 5px;
  border: 1px solid #e6b47c;
  border-radius: 9px 9px 5px 5px;
  color: #fff0ce;
  background: linear-gradient(180deg, #8b4d6b, #6e3856);
  box-shadow: 0 3px 0 rgba(52, 24, 46, .55);
  font-size: 12px;
}

.result-view.is-saju-reading .reading-interlude-bubble p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #392234;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.65;
}

.result-view.is-saju-reading .premium-reading-tier {
  margin-top: 30px;
  padding: 14px;
  border-color: rgba(216, 161, 109, .65);
  background: linear-gradient(160deg, rgba(75, 43, 80, .78), rgba(28, 21, 40, .96));
}

.result-view.is-saju-reading .premium-teaser-slot .reading-card.is-locked-teaser {
  min-height: 150px;
  margin: 0 0 14px;
  padding: 17px;
  border: 1px solid rgba(201, 145, 124, .55);
  border-radius: 5px;
  background: rgba(22, 17, 31, .72);
}

.result-view.is-saju-reading .premium-teaser-slot .reading-card.is-locked-teaser h3 {
  color: #ffe1a2;
  font-size: 18px;
}

.result-view.is-saju-reading .premium-teaser-slot .reading-card.is-locked-teaser > strong {
  color: #ffd188;
}

.result-view.is-saju-reading .premium-lock-panel strong {
  font-size: 17px;
}

.result-view.is-saju-reading .premium-lock-panel p {
  margin-bottom: 4px;
  color: #decdd9;
  font-size: 14px;
  line-height: 1.65;
}

.result-view.is-saju-reading .result-actions {
  margin-top: 16px;
}

@media (max-width: 390px) {
  .result-view.is-saju-reading .result-hero {
    grid-template:
      "heading heading" auto
      "portrait speech" 1fr /
      minmax(140px, 41%) minmax(0, 1fr);
    min-height: 326px;
    padding: 0 13px 18px 0;
  }

  .result-view.is-saju-reading .result-oracle-portrait {
    width: 160px;
    height: 160px;
    margin-left: -12px;
  }

  .result-view.is-saju-reading .result-hero-heading {
    padding: 12px 15px 11px;
  }

  .result-view.is-saju-reading .result-hero-heading h2 {
    font-size: 20px;
  }

  .result-view.is-saju-reading .result-opening-speech {
    padding: 17px 12px 12px;
  }

  .result-view.is-saju-reading .keyword-row span:nth-child(n + 3) {
    display: none;
  }

  .result-view.is-saju-reading > :not(.result-hero) {
    margin-inline: 15px;
  }

  .result-view.is-saju-reading .reading-card {
    padding-left: 45px;
  }

  .result-view.is-saju-reading .reading-npc-interlude {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .result-view.is-saju-reading .reading-interlude-portrait {
    width: 122px;
    height: 122px;
  }
}
.form-step[data-form-step="3"] .check-field input {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin: 0;
}
.form-step[data-form-step="3"] .check-field span {
  display: block;
  min-width: 0;
  white-space: nowrap;
  word-break: keep-all;
}

@media (max-width: 390px) {
  .daily-mailbox { left: 64.5%; top: 64.4%; }
  .form-step[data-form-step="3"] .check-field { gap: 7px; font-size: 11.5px; }
}

/* v200: dedicated result poses, scene-led speech, and video-based destiny-thread loading. */
.sprite.is-result-pose-sheet {
  background-size: 200% 100% !important;
  background-position: calc(var(--result-pose, 0) * 100%) 50% !important;
}

.game-dialog #oracle-loading.oracle-loading {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  place-items: end center;
  padding: 0;
  background: #24143f;
  isolation: isolate;
}

.game-dialog #oracle-loading.oracle-loading[hidden] { display: none; }

/* v230-final: keep the village artwork behind the dock and keep walk controls above it. */
.app-shell {
  height: 100svh !important;
  min-height: 100svh !important;
  overflow: hidden;
}

.game-map,
body.nav-tour-open .game-map {
  height: 100svh !important;
  min-height: 100svh !important;
  border-radius: 0 !important;
}

.bottom-nav,
body.nav-tour-open .bottom-nav {
  position: absolute !important;
  inset: auto 0 0 !important;
  background-color: transparent !important;
}

.walk-skip {
  z-index: 85;
}

/* v230: skippable house walks and a full-height village behind the navigation. */
.app-shell {
  height: 100svh;
  min-height: 100svh;
}

.game-map,
body.nav-tour-open .game-map {
  height: 100svh !important;
  min-height: 100svh;
}

.bottom-nav,
body.nav-tour-open .bottom-nav {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  background-color: transparent !important;
}

.walk-skip {
  position: absolute;
  z-index: 45;
  top: calc(64px + env(safe-area-inset-top));
  right: 14px;
  min-width: 0;
  min-height: 38px;
  padding: 7px 4px;
  border: 0;
  color: #fff;
  background: transparent;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .04em;
  text-shadow: 0 2px 5px rgba(5, 3, 16, .9);
  cursor: pointer;
}

.walk-skip[hidden] { display: none !important; }
.walk-skip:focus-visible { outline: 2px solid #ffe29b; outline-offset: 3px; }

.guide-actions:has(#guide-back:not([hidden])):has(#guide-secondary:not([hidden])) {
  grid-template-columns: minmax(72px, .34fr) minmax(0, 1fr) !important;
}

.guide-actions:has(#guide-back:not([hidden])):has(#guide-secondary:not([hidden])) #guide-back,
.guide-actions:has(#guide-back:not([hidden])):has(#guide-secondary:not([hidden])) #guide-secondary {
  grid-column: auto !important;
}

/* v208: saju readings use Pretendard; only NPC speech uses Puzzle Sans. */
.result-view.is-saju-reading,
.result-view.is-saju-reading :is(button, input, textarea, select) {
  font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

.guide-speech-box,
.guide-speech-box *,
.dialog-scene .speech-box,
.dialog-scene .speech-box *,
.form-dialog-panel > h2,
.form-dialog-panel > p,
.tarot-dialog-panel h2,
.tarot-dialog-panel p,
.shaman-message,
.chat-message.oracle,
.result-view.is-saju-reading .result-opening-speech,
.result-view.is-saju-reading .result-opening-speech *,
.result-view.is-saju-reading .reading-interlude-bubble,
.result-view.is-saju-reading .reading-interlude-bubble * {
  font-family: "Puzzle Sans", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

/* v206: make the arcade library comfortably legible on phone screens. */
@media (max-width: 430px) {
  .arcade-dialog:not(.is-playing) .arcade-content {
    overflow-x: clip;
  }

  .arcade-dialog:not(.is-playing) .arcade-library {
    width: 114%;
    max-width: none;
    margin-inline: -7%;
  }

  .arcade-dialog:not(.is-playing) .arcade-game-grid {
    top: 33.5%;
    left: 11.5%;
    right: 11.5%;
    bottom: 13.5%;
    column-gap: 1.6%;
    row-gap: 1.8%;
  }

  .arcade-dialog:not(.is-playing) .arcade-library-intro h3 {
    font-size: clamp(28px, 7.8vw, 32px);
  }

  .arcade-dialog:not(.is-playing) .arcade-library-intro p {
    font-size: clamp(11px, 3vw, 12.5px);
  }

  .arcade-dialog:not(.is-playing) .arcade-card-copy strong,
  .arcade-dialog:not(.is-playing) .arcade-coming-copy strong {
    font-size: clamp(8.5px, 2.35vw, 10px);
  }

  .arcade-dialog:not(.is-playing) .arcade-library-benefit {
    font-size: clamp(8.8px, 2.35vw, 10px) !important;
  }
}

/* v205: keep loader copy geometrically centered over the full video frame. */
.game-dialog #oracle-loading .oracle-loading-copy {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: 24px !important;
  box-sizing: border-box;
  transform: none !important;
  text-align: center !important;
}

.game-dialog #oracle-loading .oracle-loading-copy h2,
.game-dialog #oracle-loading .loading-npc-copy {
  width: min(100%, 380px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* v204: clean motion loop and exact full-width centering for the loading copy. */
.game-dialog #oracle-loading.oracle-loading {
  grid-template-columns: minmax(0, 1fr) !important;
  text-align: center !important;
}

.game-dialog #oracle-loading.oracle-loading::after {
  background: none !important;
}

.game-dialog #oracle-loading .oracle-loading-copy {
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  transform: none;
}

.game-dialog #oracle-loading .oracle-loading-copy h2,
.game-dialog #oracle-loading .loading-npc-copy {
  display: block;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  text-align: center !important;
}

/* v201: remove the embedded intro copy and center only the live NPC loading text. */
.game-dialog #oracle-loading.oracle-loading {
  place-items: stretch;
}

.game-dialog #oracle-loading .oracle-loading-copy {
  position: absolute;
  left: 50%;
  top: clamp(44px, 7svh, 68px);
  z-index: 3;
  width: min(86%, 360px);
  margin: 0;
  padding: 0 16px;
  transform: translateX(-50%);
  text-align: center;
}

.arcade-library-benefit {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 34ch;
  margin: 6px auto 0;
  color: rgba(255, 232, 190, .82);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  word-break: keep-all;
}

.arcade-dialog:not(.is-playing) .arcade-library-benefit {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 12.8%;
  z-index: 9;
  max-width: none;
  margin: 0;
  color: rgba(255, 231, 190, .76);
  font-size: clamp(8px, 2.15vw, 9.5px);
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
}

.game-dialog #oracle-loading .oracle-loading-copy h2,
.game-dialog #oracle-loading .loading-npc-copy {
  width: 100%;
  text-align: center;
}

.game-dialog #oracle-loading .oracle-loading-progress {
  position: absolute;
  left: 50%;
  bottom: clamp(42px, 7svh, 68px);
  z-index: 3;
  margin: 0;
  transform: translateX(-50%);
}

.oracle-loading-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  background: #24143f;
}

.game-dialog #oracle-loading.oracle-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18, 9, 35, .08) 48%, rgba(18, 9, 35, .62) 76%, rgba(18, 9, 35, .92) 100%),
    radial-gradient(circle at 50% 39%, transparent 30%, rgba(25, 12, 47, .12) 72%);
}

.oracle-loading-copy {
  position: relative;
  z-index: 2;
  width: min(86%, 360px);
  margin: 0 auto clamp(48px, 9svh, 90px);
  padding: 20px 18px 16px;
  color: #ffe9bd;
  text-align: center;
  text-shadow: 0 2px 12px rgba(31, 10, 52, .9);
}

.oracle-loading-copy h2 {
  margin: 0 0 12px;
  color: #fff0c9;
  font-size: clamp(23px, 6.2vw, 29px);
  line-height: 1.3;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.game-dialog #oracle-loading .loading-npc-copy {
  position: static;
  width: auto;
  margin: 0;
  padding: 0;
  color: #f4dcb7;
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 600;
  line-height: 1.65;
  transform: none;
}

.oracle-loading-progress {
  position: relative;
  width: min(78%, 250px);
  height: 5px;
  margin: 22px auto 0;
  overflow: hidden;
  border: 1px solid rgba(248, 198, 133, .46);
  border-radius: 999px;
  background: rgba(22, 10, 40, .64);
  box-shadow: 0 0 16px rgba(218, 145, 255, .24);
}

.oracle-loading-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d795d8, #ffd98d 62%, #fff2c1);
  transform: scaleX(0);
  transform-origin: left;
  animation: destiny-thread-progress 3.25s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes destiny-thread-progress {
  0% { transform: scaleX(0); opacity: .65; }
  72% { transform: scaleX(.78); opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

.result-view.is-saju-reading .result-oracle-portrait.is-result-pose-sheet {
  width: 190px;
  height: 190px;
  margin: 0 0 -18px -15px;
  filter: drop-shadow(0 12px 12px rgba(7, 4, 14, .52));
}

.result-view.is-saju-reading .result-opening-speech,
.result-view.is-saju-reading .reading-interlude-bubble {
  border: 1px solid rgba(235, 196, 147, .9);
  border-radius: 15px 15px 15px 5px;
  background:
    radial-gradient(circle at 83% 13%, rgba(255, 255, 244, .74), transparent 34%),
    linear-gradient(180deg, #fff5dc 0%, #f3ddba 100%);
  box-shadow: 0 14px 34px rgba(8, 4, 15, .32), inset 0 0 0 1px rgba(255, 252, 233, .7);
}

.result-view.is-saju-reading .result-opening-speech::before,
.result-view.is-saju-reading .reading-interlude-bubble::before {
  left: -12px;
  top: 34px;
  width: 13px;
  height: 19px;
  background: #f8e8c9;
  clip-path: polygon(100% 0, 100% 100%, 0 58%);
}

.result-view.is-saju-reading .result-opening-speech strong,
.result-view.is-saju-reading .reading-interlude-bubble strong {
  min-height: 0;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #8a4d67;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}

.result-view.is-saju-reading .result-opening-speech p,
.result-view.is-saju-reading .reading-interlude-bubble p {
  color: #382133;
  font-weight: 700;
  line-height: 1.65;
}

.result-view.is-saju-reading .reading-npc-interlude {
  grid-template-columns: 124px minmax(0, 1fr);
  min-height: 174px;
  border: 0;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(19, 11, 31, .18), rgba(19, 11, 31, .68)),
    var(--room-image);
  background-position: center, 50% 24%;
  background-size: 100% 100%, 100% auto;
  box-shadow: inset 0 0 0 1px rgba(185, 130, 176, .38), 0 12px 28px rgba(8, 4, 15, .24);
}

.result-view.is-saju-reading .reading-interlude-portrait.is-result-pose-sheet {
  width: 152px;
  height: 152px;
  margin: 0 0 -8px -16px;
}

.result-view.is-saju-reading .reading-interlude-bubble {
  margin: 24px 15px 19px 0;
  padding: 16px 15px 14px;
}

@media (max-width: 390px) {
  .result-view.is-saju-reading .result-oracle-portrait.is-result-pose-sheet {
    width: 174px;
    height: 174px;
    margin-left: -18px;
  }

  .result-view.is-saju-reading .reading-npc-interlude {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .result-view.is-saju-reading .reading-interlude-portrait.is-result-pose-sheet {
    width: 138px;
    height: 138px;
  }

  .result-view.is-saju-reading .reading-interlude-bubble {
    margin-right: 12px;
    padding-inline: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oracle-loading-progress span {
    animation: none;
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .npc::before,
  .tarot-house-art,
  .npc-label { transition-duration: .01ms !important; }
}

/* v47: a fixed light silhouette replaces the doubled house bitmap; speaker tabs may escape panels. */
.npc::before {
  background-image: none !important;
  background-color: rgba(255, 221, 149, .18) !important;
  opacity: 0 !important;
  transform: none !important;
  filter: drop-shadow(0 2px 2px rgba(255, 239, 194, .72)) drop-shadow(0 4px 8px rgba(255, 185, 66, .48));
  transition: opacity .22s cubic-bezier(.16, 1, .3, 1) !important;
  will-change: auto;
}
.npc:is(:hover, :focus-visible, :active, .is-selected)::before {
  opacity: .82 !important;
  transform: none !important;
}

.form-dialog-panel,
.tarot-dialog-panel,
.chat-panel {
  overflow: visible !important;
}
.form-speaker,
.tarot-dialog-panel .form-speaker,
.chat-speaker-row {
  position: absolute;
  z-index: 20 !important;
}
.chat-speaker-row {
  left: 10px;
  top: -34px;
  margin: 0;
}
.chat-panel {
  padding-top: 18px;
}

/* v48: keep every checkbox and its label together as one compact row. */
.form-dialog-panel .check-field,
#compatibility-fields > .check-field {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  justify-self: start;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  line-height: 1.25;
}
.form-dialog-panel .check-field input[type="checkbox"] {
  flex: 0 0 19px;
  width: 19px !important;
  min-width: 19px !important;
  max-width: 19px !important;
  height: 19px;
  margin: 0;
}
.form-dialog-panel .check-field > span {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  word-break: keep-all;
}

/* v55: aligned directional frames keep the natural footfalls without frame bleed. */
.player,
.intro-player,
.interior-player {
  --player-scale-y: .95;
  background-image: url("./assets/player-walk-directional-v4.png") !important;
  background-repeat: no-repeat !important;
  background-size: 400% 300% !important;
  transform-origin: 50% 100%;
  image-rendering: pixelated;
}

.player {
  transition:
    left var(--walk-duration, 620ms) linear,
    top var(--walk-duration, 620ms) linear,
    transform 160ms cubic-bezier(.16, 1, .3, 1);
  transform: translate(-50%, var(--player-anchor-y, -68%)) scaleX(var(--player-scale-x, 1)) scaleY(var(--player-scale-y));
  will-change: auto;
}
.player.is-walking { will-change: left, top, transform, background-position; }

.player[data-direction="down"] {
  --player-anchor-y: -68.257143%;
  --player-scale-x: .73;
  width: 78px !important;
  height: 78px !important;
  background-size: 400% 300% !important;
  background-position: 0% 0%;
}
.player[data-direction="up"] {
  --player-anchor-y: -65.887097%;
  --player-scale-x: .84;
  width: 68px !important;
  height: 68px !important;
  background-size: 400% 300% !important;
  background-position: 0% 50%;
}
.player[data-direction="left"] {
  --player-anchor-y: -67.151515%;
  --player-scale-x: .81;
  width: 72px !important;
  height: 72px !important;
  background-size: 400% 300% !important;
  background-position: 0% 100%;
}
.player[data-direction="right"] {
  --player-anchor-y: -67.151515%;
  --player-scale-x: .81;
  width: 72px !important;
  height: 72px !important;
  background-size: 400% 300% !important;
  background-position: 66.666667% 100%;
}

@keyframes player-walk-down-v49 {
  0%, 24% { background-position: 33.333333% 0%; }
  25%, 49% { background-position: 66.666667% 0%; }
  50%, 74% { background-position: 100% 0%; }
  75%, 100% { background-position: 66.666667% 0%; }
}
@keyframes player-walk-up-v49 {
  0%, 24% { background-position: 33.333333% 50%; }
  25%, 49% { background-position: 66.666667% 50%; }
  50%, 74% { background-position: 100% 50%; }
  75%, 100% { background-position: 66.666667% 50%; }
}
@keyframes player-walk-left-v49 {
  0%, 49% { background-position: 0% 100%; }
  50%, 100% { background-position: 33.333333% 100%; }
}
@keyframes player-walk-right-v49 {
  0%, 49% { background-position: 66.666667% 100%; }
  50%, 100% { background-position: 100% 100%; }
}
@keyframes player-footfall-v49 {
  0%, 100% { transform: translate(-50%, var(--player-anchor-y, -68%)) translateY(0) scaleX(var(--player-scale-x, 1)) scaleY(var(--player-scale-y)); }
  50% { transform: translate(-50%, var(--player-anchor-y, -68%)) translateY(-1.5px) scaleX(var(--player-scale-x, 1)) scaleY(var(--player-scale-y)); }
}
@keyframes player-intro-footfall-v49 {
  0%, 100% { transform: translate(-50%, var(--player-anchor-y, -65.887097%)) translateY(0) scaleX(var(--player-scale-x, 1)) scaleY(var(--player-scale-y)); }
  50% { transform: translate(-50%, var(--player-anchor-y, -65.887097%)) translateY(-1px) scaleX(var(--player-scale-x, 1)) scaleY(var(--player-scale-y)); }
}
@keyframes player-meet-rest-v49 {
  to { background-position: 0% 50%; }
}

.player.is-walking[data-direction="down"] {
  animation: player-walk-down-v49 .54s steps(1, end) infinite, player-footfall-v49 .27s steps(2, end) infinite !important;
}
.player.is-walking[data-direction="up"] {
  animation: player-walk-up-v49 .54s steps(1, end) infinite, player-footfall-v49 .27s steps(2, end) infinite !important;
}
.player.is-walking[data-direction="left"] {
  animation: player-walk-left-v49 .46s steps(1, end) infinite, player-footfall-v49 .23s steps(2, end) infinite !important;
}
.player.is-walking[data-direction="right"] {
  animation: player-walk-right-v49 .46s steps(1, end) infinite, player-footfall-v49 .23s steps(2, end) infinite !important;
}
.player.is-facing-back:not(.is-walking),
.player.is-meeting {
  --player-anchor-y: -65.887097%;
  --player-scale-x: .84;
  width: 68px !important;
  height: 68px !important;
  background-size: 400% 300% !important;
  background-position: 0% 50% !important;
  transform: translate(-50%, var(--player-anchor-y)) scaleX(var(--player-scale-x)) scaleY(var(--player-scale-y)) !important;
}

.intro-player {
  --player-anchor-y: -65.887097%;
  --player-scale-x: .84;
  width: 68px !important;
  height: 68px !important;
  background-size: 400% 300% !important;
  background-position: 0% 50%;
  transform: translate(-50%, var(--player-anchor-y)) scaleX(var(--player-scale-x)) scaleY(var(--player-scale-y)) !important;
}
.intro-sequence.is-running .intro-player {
  animation:
    intro-cross-v26-bridge 4.62s .08s linear forwards,
    player-walk-up-v49 .52s .08s steps(1, end) 9,
    player-intro-footfall-v49 .26s .08s steps(2, end) 18,
    player-meet-rest-v49 .01s 4.76s step-end forwards !important;
}
.interior-player {
  width: 78px !important;
  height: 78px !important;
  background-position: 0% 0%;
  transform: translate(-50%, -68%) scaleX(.73) scaleY(var(--player-scale-y));
}

@media (prefers-reduced-motion: reduce) {
  .player {
    transition-duration: 1ms !important;
    animation: none !important;
    will-change: auto;
  }
  .intro-sequence.is-running .intro-player {
    animation: player-meet-rest-v49 .01s forwards !important;
  }
}

/* v67: mobile-safe forms, seamless room handoff, swipeable tarot, and focused fortune choices. */
@keyframes intro-cross-v26-bridge {
  0% { top: 106%; opacity: 1; }
  100% { top: 78%; opacity: 1; }
}

.general-topic-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding-bottom: 3px;
}
.general-topic-options[hidden] { display: none; }
.general-topic-options button {
  min-height: 44px;
  padding: 9px 12px;
  border: 2px solid #a86c5f;
  border-radius: 3px;
  color: #fff7e8;
  background: linear-gradient(#7b405e, #5a304f);
  box-shadow: inset 0 0 0 2px #c98b77, 0 3px 0 #2f1b31;
  font: inherit;
  font-weight: 900;
  text-align: center;
}
.general-topic-options button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #c98b77, 0 1px 0 #2f1b31; }

.daily-confirm {
  grid-template-columns: 1fr !important;
  justify-items: center;
  align-content: center;
  text-align: center;
}
.daily-confirm > img {
  justify-self: center;
  margin-inline: auto;
}
.daily-confirm-copy,
.daily-confirm-copy > * { text-align: center; }
.daily-confirm-copy h2 { max-width: 330px; margin-inline: auto; text-wrap: balance; }
.daily-confirm-actions { width: min(100%, 340px); margin-inline: auto; }

#fortune-dialog { --room-image: url("./assets/entry-general-v1.png"); --room-size: 84% auto; --room-position: 50% 50%; }
#fortune-dialog[data-npc="love"] { --room-image: url("./assets/entry-love-v2.png"); }
#fortune-dialog[data-npc="wealth"] { --room-image: url("./assets/entry-wealth-v1.png"); }
#fortune-dialog[data-npc="career"] { --room-image: url("./assets/entry-career-v1.png"); }
#fortune-dialog[data-npc="health"] { --room-image: url("./assets/entry-health-v1.png"); }
#fortune-dialog[data-npc="general"] { --room-image: url("./assets/entry-general-v1.png"); }
#fortune-dialog[data-npc="tarot"] { --room-image: url("./assets/entry-tarot-v4.png"); --room-size: 76% auto; }

#fortune-dialog[data-view="entry"] .interior-entry {
  background-color: #000 !important;
  background-image: var(--room-image) !important;
  background-position: var(--room-position) !important;
  background-size: var(--room-size) !important;
  background-repeat: no-repeat !important;
}
#fortune-dialog :is(.dialog-scene, .birth-form, .tarot-reading, .followup-chat) {
  background-color: #000 !important;
  background-image: linear-gradient(rgba(7, 5, 13, .34), rgba(7, 5, 13, .5)), var(--room-image) !important;
  background-position: 0 0, var(--room-position) !important;
  background-size: 100% 100%, var(--room-size) !important;
  background-repeat: no-repeat !important;
}
#fortune-dialog[data-view="entry"] .interior-entry::before {
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.08) 76%, rgba(0,0,0,.58) 100%);
}
#fortune-dialog[data-view="entry"] .interior-field-npc {
  width: 44px;
  height: 92px;
}
#fortune-dialog[data-view="entry"] .interior-player {
  width: 72px !important;
  height: 72px !important;
}

.tarot-fan-viewport {
  cursor: grab;
  touch-action: pan-y;
  scrollbar-width: none !important;
  -ms-overflow-style: none;
  user-select: none;
}
.tarot-fan-viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.tarot-fan-viewport::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

.birth-form,
.form-dialog-panel,
.form-step,
.form-step .field,
.form-step fieldset,
#compatibility-fields,
#compatibility-fields > * {
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  box-sizing: border-box;
}
.form-dialog-panel :is(input, select, .segmented) {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
  box-sizing: border-box !important;
}
.form-dialog-panel :is(input[type="date"], input[type="time"]) {
  display: block;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  -webkit-appearance: none;
  appearance: none;
}
.form-dialog-panel :is(input[type="date"], input[type="time"])::-webkit-date-and-time-value {
  min-width: 0;
  margin: 0;
  text-align: left;
}

@media (max-width: 430px) {
  #fortune-dialog { --room-size: 105% auto; }
  #fortune-dialog[data-npc="tarot"] { --room-size: 90% auto; }
  #fortune-dialog[data-view="entry"] .interior-field-npc { width: 42px; height: 88px; }
  #fortune-dialog[data-view="entry"] .interior-player { width: 70px !important; height: 70px !important; }
  .form-dialog-panel {
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    margin-inline: 6px !important;
    padding-inline: 10px !important;
    box-sizing: border-box !important;
  }
  .form-step { width: 100%; overflow: visible; }
  .form-step .field > span,
  .form-step .field legend { font-size: 11.5px; line-height: 1.25; }
  #compatibility-fields {
    width: 100%;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) !important;
    gap: 8px 6px;
  }
  #compatibility-fields > .partner-name-field,
  #compatibility-fields > .partner-calendar-field,
  #compatibility-fields > .check-field { grid-column: 1 / -1 !important; }
  #compatibility-fields > .partner-date-field { grid-column: 1 !important; }
  #compatibility-fields > .partner-time-field { grid-column: 2 !important; }
  #compatibility-fields :is(input[type="date"], input[type="time"]) {
    min-height: 42px;
    padding-inline: 5px !important;
    font-size: 11px !important;
  }
  .daily-confirm { padding-inline: 18px; }
  .daily-confirm > img { width: min(132px, 38vw); }
}

/* v68: one native sprite scale, compact map header, continuous Lumi meeting, and shape-safe house focus. */
:root {
  --field-player-w: 44px;
  --field-player-h: 88px;
  --field-npc-w: 38px;
  --field-npc-h: 88px;
}

/* Keep the upper houses readable without moving the baked-in village artwork. */
.hud {
  min-height: 52px;
  align-items: center;
  padding: calc(8px + env(safe-area-inset-top)) 10px 14px;
  background: linear-gradient(180deg, rgba(12,10,29,.82), rgba(12,10,29,.28) 72%, transparent);
}
.brand-kicker { display: none; }
.brand-lockup h1 { font-size: clamp(17px, 4.8vw, 22px); }
.moon-score { min-width: 58px; padding: 6px 8px; }
.moon-score strong { font-size: 14px; }
.map-exit-button { min-height: 34px; }
.hotspot-love .npc-label,
.hotspot-wealth .npc-label {
  top: auto !important;
  bottom: -12px !important;
}

/* Remove every geometric focus mask. The map crop is pixel-identical to the
   background, so only its gentle luminance lift is visible; soft alpha fades
   prevent a rectangular crop edge. */
.npc::before,
.hotspot-love::before,
.hotspot-wealth::before,
.hotspot-career::before,
.hotspot-health::before,
.hotspot-general::before {
  inset: 0 !important;
  clip-path: none !important;
  background-color: transparent !important;
  background-image: url("./assets/moon-village-flat-bridge-v5.png") !important;
  background-repeat: no-repeat !important;
  opacity: 0 !important;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 68% 72% at 50% 52%, #000 46%, rgba(0,0,0,.86) 64%, transparent 100%);
  mask-image: radial-gradient(ellipse 68% 72% at 50% 52%, #000 46%, rgba(0,0,0,.86) 64%, transparent 100%);
  filter: brightness(1.12) saturate(.92) sepia(.08) drop-shadow(0 0 3px rgba(255,232,169,.46)) !important;
  transform: none !important;
  transition: opacity .24s cubic-bezier(.16,1,.3,1), filter .24s ease !important;
  pointer-events: none;
}
.hotspot-love::before { background-size: 263.158% auto !important; background-position: 4.8% 8.3% !important; }
.hotspot-wealth::before { background-size: 263.158% auto !important; background-position: 95.2% 9% !important; }
.hotspot-career::before { background-size: 294.118% auto !important; background-position: 7.6% 41.25% !important; }
.hotspot-health::before { background-size: 294.118% auto !important; background-position: 92.4% 42.5% !important; }
.hotspot-general::before { background-size: 322.581% auto !important; background-position: 50% 67.5% !important; }
.npc:is(:hover, :focus-visible, :active, .is-selected)::before {
  opacity: .54 !important;
  filter: brightness(1.16) saturate(.96) sepia(.1) drop-shadow(0 0 4px rgba(255,230,158,.58)) !important;
}
.hotspot-tarot::before { display: none !important; }

/* The tarot workshop is a transparent standalone asset, so its glow follows
   the real alpha silhouette exactly. */
.tarot-house-art,
.intro-tarot-house {
  left: 50% !important;
  top: 20% !important;
  width: min(38%, 198px) !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  image-rendering: pixelated;
}
.hotspot-tarot {
  left: 50% !important;
  top: 20.1% !important;
  width: 38% !important;
  height: 23% !important;
}
.hotspot-tarot .npc-label { top: 76% !important; bottom: auto !important; }
.game-map:has(.hotspot-tarot:hover) .tarot-house-art,
.game-map:has(.hotspot-tarot:focus-visible) .tarot-house-art,
.game-map:has(.hotspot-tarot.is-selected) .tarot-house-art {
  transform: translateX(-50%) !important;
  filter: brightness(1.06) saturate(1.01) drop-shadow(0 0 3px rgba(255,235,177,.72)) drop-shadow(0 0 8px rgba(255,190,72,.48)) !important;
}

/* Player and Lumi share the same native 1:2 frame ratio. No per-direction
   scaleX/scaleY is allowed, which prevents the familiar squeeze/stretch bug. */
.player,
.intro-player,
.interior-player {
  width: var(--field-player-w) !important;
  height: var(--field-player-h) !important;
  background-image: url("./assets/player-lumi-movement-v5.png") !important;
  background-size: 600% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 0% 50%;
  transform: translate(-50%, -72%) !important;
  transform-origin: 50% 100%;
  image-rendering: pixelated;
}
.player[data-direction="down"] { background-position: 0% 50%; }
.player[data-direction="up"],
.player[data-direction="left"],
.player[data-direction="right"],
.player.is-facing-back:not(.is-walking),
.player.is-meeting { background-position: 80% 50%; }

@keyframes player-back-walk-v68 {
  0%, 24% { background-position: 20% 50%; }
  25%, 49% { background-position: 40% 50%; }
  50%, 74% { background-position: 60% 50%; }
  75%, 100% { background-position: 80% 50%; }
}
@keyframes player-footfall-v68 {
  0%, 100% { transform: translate(-50%, -72%) translateY(0); }
  50% { transform: translate(-50%, -72%) translateY(-1px); }
}
.player.is-walking[data-direction="up"],
.player.is-walking[data-direction="left"],
.player.is-walking[data-direction="right"] {
  animation: player-back-walk-v68 .56s steps(1,end) infinite, player-footfall-v68 .28s steps(2,end) infinite !important;
}
.player.is-walking[data-direction="down"] {
  animation: player-footfall-v68 .28s steps(2,end) infinite !important;
}
.player.is-meeting { animation: none !important; }

/* One fixed foot anchor keeps Lumi in exactly the same place in the opening
   and the live map. */
.guide-npc,
.is-intro .guide-npc {
  left: 53.2% !important;
  top: 72% !important;
  width: var(--field-player-w) !important;
  height: var(--field-player-h) !important;
  transform: translate(-50%, -72%) !important;
  animation: none !important;
}
.guide-npc .guide-field-sprite {
  inset: 0 !important;
  width: var(--field-player-w) !important;
  height: var(--field-player-h) !important;
  background-image: url("./assets/player-lumi-movement-v5.png") !important;
  background-size: 600% 100% !important;
  background-position: 100% 50% !important;
  transform: none !important;
  animation: none !important;
}
.guide-npc:hover .guide-field-sprite,
.guide-npc:focus-visible .guide-field-sprite { transform: translateY(-2px) !important; }
.guide-marker { bottom: 80px !important; }

.intro-world .intro-lumi,
.intro-sequence.is-running .intro-world .intro-lumi {
  left: 53.2% !important;
  top: 72% !important;
  width: var(--field-player-w) !important;
  height: var(--field-player-h) !important;
  background-image: url("./assets/player-lumi-movement-v5.png") !important;
  background-size: 600% 100% !important;
  background-position: 100% 50% !important;
  transform: translate(-50%, -72%) !important;
  animation: none !important;
}
@keyframes intro-cross-v68 {
  0% { top: 106%; opacity: 1; }
  100% { top: 83.5%; opacity: 1; }
}
.intro-player {
  left: 53.2% !important;
  top: 106%;
  background-position: 80% 50%;
}
.intro-sequence.is-running .intro-player {
  animation: intro-cross-v68 4.62s .08s linear forwards, player-back-walk-v68 .56s .08s steps(1,end) 9, player-footfall-v68 .28s .08s steps(2,end) 18 !important;
}
.intro-world { filter: saturate(.78) brightness(.86) contrast(.96); }
@keyframes intro-camera-world-v40 {
  0%, 10% { transform: translate3d(0, -18%, 0) scale(1.2); filter: saturate(.78) brightness(.82) contrast(.96); }
  58% { transform: translate3d(0, -8%, 0) scale(1.1); filter: saturate(.78) brightness(.84) contrast(.96); }
  100% { transform: translate3d(0, 0, 0) scale(1); filter: saturate(.78) brightness(.86) contrast(.96); }
}

/* Every room sprite uses the same native frame height as Lumi. NPC frames are
   slightly narrower only because their source cells are 310:724. */
#fortune-dialog[data-view="entry"] .interior-field-npc,
.interior-field-npc {
  width: var(--field-npc-w) !important;
  height: var(--field-npc-h) !important;
  transform: translate(-50%, -50%) !important;
  image-rendering: pixelated;
}
#fortune-dialog[data-view="entry"] .interior-player,
.interior-player {
  width: var(--field-player-w) !important;
  height: var(--field-player-h) !important;
  transform: translate(-50%, -72%) !important;
}
#fortune-dialog[data-npc="tarot"] .interior-field-npc::after { top: -86px !important; }

@media (max-width: 390px) {
  .hud { padding-inline: 8px; }
  .brand-lockup h1 { font-size: 17px; }
  .moon-score { min-width: 54px; padding-inline: 6px; }
  .tarot-house-art,
  .intro-tarot-house { width: min(38%, 190px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .npc::before,
  .tarot-house-art { transition-duration: .01ms !important; }
  .intro-sequence.is-running .intro-player { animation: none !important; top: 83.5%; }
}

/* v69: extracted alpha silhouettes replace every crop-shaped house glow. */
.npc::before,
.hotspot-love::before,
.hotspot-wealth::before,
.hotspot-career::before,
.hotspot-health::before,
.hotspot-general::before {
  background: rgba(255, 219, 119, .2) !important;
  -webkit-mask-image: url("./assets/building-highlight-atlas-v1.png") !important;
  mask-image: url("./assets/building-highlight-atlas-v1.png") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  filter: drop-shadow(0 0 2px rgba(255,237,183,.72)) drop-shadow(0 0 7px rgba(255,188,65,.48)) !important;
  mix-blend-mode: screen;
}
.hotspot-love::before {
  -webkit-mask-size: 246.8% 467.1% !important;
  mask-size: 246.8% 467.1% !important;
  -webkit-mask-position: 4.64% 14.06% !important;
  mask-position: 4.64% 14.06% !important;
}
.hotspot-wealth::before {
  -webkit-mask-size: 210.5% 396.7% !important;
  mask-size: 210.5% 396.7% !important;
  -webkit-mask-position: 100% 15.7% !important;
  mask-position: 100% 15.7% !important;
}
.hotspot-career::before {
  -webkit-mask-size: 246.8% 467.1% !important;
  mask-size: 246.8% 467.1% !important;
  -webkit-mask-position: 3.87% 60.63% !important;
  mask-position: 3.87% 60.63% !important;
}
.hotspot-health::before {
  -webkit-mask-size: 264.2% 499.3% !important;
  mask-size: 264.2% 499.3% !important;
  -webkit-mask-position: 100% 59.6% !important;
  mask-position: 100% 59.6% !important;
}
.hotspot-general::before {
  -webkit-mask-size: 339.4% 579.2% !important;
  mask-size: 339.4% 579.2% !important;
  -webkit-mask-position: 50.9% 86% !important;
  mask-position: 50.9% 86% !important;
}
.npc:is(:hover, :focus-visible, :active, .is-selected)::before { opacity: .72 !important; }

/* v74: keep Seoyeon's thinking portrait clean and lift the two upper signs
   beneath the fixed HUD without covering the house artwork. */
#fortune-dialog[data-npc="career"] .sprite:is([data-gesture="thinking"], [data-gesture="concerned"]) {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 94%, 17% 94%, 17% 58%, 0 58%);
}

.hotspot-love .npc-label,
.hotspot-wealth .npc-label {
  top: 20% !important;
  bottom: auto !important;
}

.guide-npc,
.is-intro .guide-npc {
  left: 53.5% !important;
  top: 75% !important;
}
.intro-world .intro-lumi,
.intro-sequence.is-running .intro-world .intro-lumi {
  left: 53.5% !important;
  top: 75% !important;
}
.intro-player { left: 53.5% !important; }

/* v71: the six-frame 1:2 sprite strip must always be sampled as one frame.
   Older directional rules used a 4x3 atlas and were more specific than the
   shared v68 rule, which exposed adjacent frames and made walking look like a
   slide. Keep the native Lumi-sized frame and animate only background-position. */
.player.movement-sprite[data-direction],
.player.movement-sprite.is-facing-back:not(.is-walking),
.player.movement-sprite.is-meeting,
.intro-player.movement-sprite,
.interior-player.movement-sprite {
  --player-scale-x: 1;
  --player-scale-y: 1;
  width: var(--field-player-w) !important;
  height: var(--field-player-h) !important;
  background-image: url("./assets/player-lumi-movement-v5.png") !important;
  background-size: 600% 100% !important;
  background-repeat: no-repeat !important;
  transform: translate(-50%, -72%) !important;
}
.player.movement-sprite:not(.is-walking)[data-direction="down"] { background-position: 0% 50% !important; }
.player.movement-sprite:not(.is-walking)[data-direction="up"],
.player.movement-sprite:not(.is-walking)[data-direction="left"],
.player.movement-sprite:not(.is-walking)[data-direction="right"],
.player.movement-sprite.is-facing-back:not(.is-walking),
.player.movement-sprite.is-meeting,
.interior-player.movement-sprite:not(.is-entering) { background-position: 80% 50% !important; }
.intro-player.movement-sprite { background-position: 80% 50%; }
.player.movement-sprite.is-walking[data-direction="up"],
.player.movement-sprite.is-walking[data-direction="left"],
.player.movement-sprite.is-walking[data-direction="right"] {
  animation: player-back-walk-v68 .56s steps(1,end) infinite,
             player-footfall-v68 .28s steps(2,end) infinite !important;
}
.intro-sequence.is-running .intro-player.movement-sprite {
  animation: intro-cross-v68 4.62s .08s linear forwards,
             player-back-walk-v68 .56s .08s steps(1,end) 9,
             player-footfall-v68 .28s .08s steps(2,end) 18 !important;
}

/* v79: ring-shaped moon village — new authored map, tarot pavilion and paths. */
.map-art,
.intro-landscape {
  object-position: 50% 50% !important;
  filter: saturate(1) brightness(.98) contrast(1.02) !important;
}
.map-tint {
  background: linear-gradient(180deg, rgba(72,45,127,.2), transparent 43%, rgba(25,14,59,.26)) !important;
  mix-blend-mode: color;
  opacity: .36;
}

/* Each copy is clipped only for paint cost. The PNG itself is transparent, so
   the visible light follows the exact alpha silhouette of the selected house. */
.building-selection-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  image-rendering: pixelated;
  pointer-events: none;
  filter: brightness(1.1) saturate(1.03)
          drop-shadow(0 0 2px rgba(255,241,190,.78))
          drop-shadow(0 0 8px rgba(255,190,72,.58));
  transition: opacity .28s cubic-bezier(.22,1,.36,1), filter .28s ease;
}
.selection-love { clip-path: inset(0 52% 63% 0); }
.selection-wealth { clip-path: inset(0 0 63% 52%); }
.selection-career { clip-path: inset(38% 56% 25% 0); }
.selection-health { clip-path: inset(38% 0 25% 56%); }
.selection-general { clip-path: inset(61% 24% 6% 24%); }
.game-map:has(.hotspot-love:is(:hover, :focus-visible, :active, .is-selected)) .selection-love,
.game-map:has(.hotspot-wealth:is(:hover, :focus-visible, :active, .is-selected)) .selection-wealth,
.game-map:has(.hotspot-career:is(:hover, :focus-visible, :active, .is-selected)) .selection-career,
.game-map:has(.hotspot-health:is(:hover, :focus-visible, :active, .is-selected)) .selection-health,
.game-map:has(.hotspot-general:is(:hover, :focus-visible, :active, .is-selected)) .selection-general {
  opacity: .66;
}
.npc::before,
.hotspot-love::before,
.hotspot-wealth::before,
.hotspot-career::before,
.hotspot-health::before,
.hotspot-general::before { display: none !important; }

.tarot-house-art,
.intro-tarot-house {
  left: 50% !important;
  top: 27.5% !important;
  z-index: 1;
  width: min(42%, 218px) !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 3px rgba(10,7,25,.46));
}
.game-map:has(.hotspot-tarot:hover) .tarot-house-art,
.game-map:has(.hotspot-tarot:focus-visible) .tarot-house-art,
.game-map:has(.hotspot-tarot.is-selected) .tarot-house-art {
  transform: translateX(-50%) !important;
  filter: brightness(1.06) saturate(1.02)
          drop-shadow(0 0 3px rgba(255,239,194,.78))
          drop-shadow(0 0 9px rgba(255,190,72,.56)) !important;
}

.hotspot-love { left: 18%; top: 17%; width: 38%; height: 25%; }
.hotspot-wealth { left: 82%; top: 18%; width: 38%; height: 25%; }
.hotspot-career { left: 17%; top: 57%; width: 36%; height: 25%; }
.hotspot-health { left: 83%; top: 57%; width: 36%; height: 25%; }
.hotspot-general { left: 50%; top: 70%; width: 44%; height: 23%; }
.hotspot-tarot { left: 50% !important; top: 40% !important; width: 44% !important; height: 27% !important; }

.hotspot-love .npc-label,
.hotspot-wealth .npc-label,
.hotspot-career .npc-label,
.hotspot-health .npc-label {
  top: 76% !important;
  bottom: auto !important;
}
.hotspot-general .npc-label { top: -9% !important; bottom: auto !important; }
.hotspot-tarot .npc-label { top: 82% !important; bottom: auto !important; }

.guide-npc,
.is-intro .guide-npc,
.intro-world .intro-lumi,
.intro-sequence.is-running .intro-world .intro-lumi {
  left: 53.2% !important;
  top: 82% !important;
}
.daily-mailbox { left: 62.5% !important; top: 80.2% !important; }
.intro-player { left: 50% !important; }
@keyframes intro-cross-v68 {
  0% { top: 106%; opacity: 1; }
  100% { top: 87%; opacity: 1; }
}

@media (max-width: 390px) {
  .tarot-house-art,
  .intro-tarot-house { width: min(42%, 208px) !important; }
  .npc-label { max-width: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .building-selection-art { transition-duration: .01ms !important; }
}

/* v80: every house is now an independent transparent sprite on one bright,
   building-free village ground. This keeps scale, placement and focus light
   identical for all six destinations, including the tarot workshop. */
.map-art,
.intro-landscape {
  object-position: 50% 50% !important;
  filter: saturate(1.04) brightness(1.02) contrast(1.01) !important;
}

.map-tint {
  background: linear-gradient(180deg, rgba(130, 83, 190, .08), transparent 48%, rgba(74, 43, 130, .08)) !important;
  mix-blend-mode: color;
  opacity: .2;
}

.building-selection-art,
.tarot-house-art,
.intro-tarot-house { display: none !important; }

.map-building,
.intro-map-building {
  position: absolute;
  z-index: 1;
  width: 33%;
  height: auto;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 7px 3px rgba(27, 16, 55, .36));
  transition: filter .28s cubic-bezier(.16, 1, .3, 1);
}

.building-love,
.intro-building-love { left: 17.5%; top: 8.5%; }

.building-wealth,
.intro-building-wealth { left: 82.5%; top: 10.5%; }

.building-career,
.intro-building-career { left: 17.5%; top: 38.5%; }

.building-health,
.intro-building-health { left: 82.5%; top: 38.5%; }

.building-general,
.intro-building-general {
  left: 50%;
  top: 54.5%;
  width: 35.5%;
}

.building-tarot,
.intro-building-tarot {
  left: 50%;
  top: 37.1%;
  width: 29.5%;
  /* The PNG's visible alpha silhouette sits slightly right of its image box.
     This optical correction pins the actual pavilion—not its transparent
     canvas—to the exact centre of the circular plaza. */
  transform: translate(-51.2%, -50%);
}

.game-map:has(.hotspot-love:is(:hover, :focus-visible, :active, .is-selected)) .building-love,
.game-map:has(.hotspot-wealth:is(:hover, :focus-visible, :active, .is-selected)) .building-wealth,
.game-map:has(.hotspot-career:is(:hover, :focus-visible, :active, .is-selected)) .building-career,
.game-map:has(.hotspot-health:is(:hover, :focus-visible, :active, .is-selected)) .building-health,
.game-map:has(.hotspot-general:is(:hover, :focus-visible, :active, .is-selected)) .building-general,
.game-map:has(.hotspot-tarot:is(:hover, :focus-visible, :active, .is-selected)) .building-tarot {
  filter: brightness(1.09) saturate(1.04)
          drop-shadow(0 0 3px rgba(255, 241, 190, .78))
          drop-shadow(0 0 9px rgba(255, 190, 72, .56));
}

.npc::before { display: none !important; }
.npc:focus-visible { outline: none !important; }
.npc:focus-visible .npc-label {
  outline: 2px solid #ffe5a3;
  outline-offset: 3px;
}

.hotspot-love { left: 17.5%; top: 22%; width: 30%; height: 26%; }
.hotspot-wealth { left: 82.5%; top: 22%; width: 30%; height: 26%; }
.hotspot-career { left: 17.5%; top: 51%; width: 28%; height: 24%; }
.hotspot-health { left: 82.5%; top: 51%; width: 28%; height: 24%; }
.hotspot-general { left: 50%; top: 67.5%; width: 34%; height: 24%; }
.hotspot-tarot { left: 50% !important; top: 37.1% !important; width: 31% !important; height: 25% !important; }

.hotspot-love .npc-label,
.hotspot-wealth .npc-label,
.hotspot-career .npc-label,
.hotspot-health .npc-label,
.hotspot-general .npc-label,
.hotspot-tarot .npc-label {
  top: 78% !important;
  bottom: auto !important;
}

.hotspot-general .npc-label {
  top: -10% !important;
}

.intro-world {
  filter: saturate(1.03) brightness(1.01) contrast(1.01) !important;
}

@keyframes intro-camera-world-v40 {
  0%, 10% { transform: translate3d(0, -18%, 0) scale(1.2); filter: saturate(1.03) brightness(.98) contrast(1.01); }
  58% { transform: translate3d(0, -8%, 0) scale(1.1); filter: saturate(1.03) brightness(1) contrast(1.01); }
  100% { transform: translate3d(0, 0, 0) scale(1); filter: saturate(1.03) brightness(1.01) contrast(1.01); }
}

@media (max-width: 390px) {
  .map-building,
  .intro-map-building { width: 32.5%; }
  .building-tarot,
  .intro-building-tarot { width: 29.5%; }
  .building-general,
  .intro-building-general { width: 35%; }
}

@media (prefers-reduced-motion: reduce) {
  .map-building { transition-duration: .01ms !important; }
}

/* Keep Lumi outdoors while gently lowering the village behind her dialogue. */
body.guide-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  background: rgba(12, 8, 31, .46);
  animation: guide-backdrop-in .3s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes guide-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body.guide-open::before { animation-duration: .01ms; }
}

/* v96: room entry uses four visible back-facing footfall frames while moving. */
#fortune-dialog[data-view="entry"] .interior-player {
  top: 84%;
}

#fortune-dialog[data-view="entry"] .interior-player.is-entering {
  animation:
    interior-player-walk-in-v96 1.12s linear both,
    player-back-walk-v68 .56s steps(1, end) 2 forwards !important;
  will-change: top;
}

@keyframes interior-player-walk-in-v96 {
  from { top: 84%; }
  to { top: 73%; }
}

@media (prefers-reduced-motion: reduce) {
  #fortune-dialog[data-view="entry"] .interior-player.is-entering {
    animation:
      interior-player-walk-in-v96 .9s linear both,
      player-back-walk-v68 .45s steps(1, end) 2 forwards !important;
  }
}

/* v97: Wolryeong's moon shrine, time-gated shinjeom, and immersive dialogue. */
.building-shaman,
.intro-building-shaman {
  left: 50%;
  top: 5.8%;
  width: 29.5%;
  transform: translateX(-50%);
  z-index: 2;
}

.hotspot-shaman {
  left: 50%;
  top: 16.5%;
  width: 30%;
  height: 22%;
}

.hotspot-shaman .npc-label {
  top: 77% !important;
  bottom: auto !important;
}

.game-map:has(.hotspot-shaman:is(:hover, :focus-visible, :active, .is-selected)) .building-shaman {
  filter: brightness(1.09) saturate(1.05)
          drop-shadow(0 0 3px rgba(255, 241, 190, .78))
          drop-shadow(0 0 9px rgba(255, 190, 72, .56));
}

.shaman-topic-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}
.shaman-topic-options[hidden] { display: none !important; }
.shaman-topic-options button {
  min-width: 0;
  min-height: 50px;
  padding: 8px 7px;
  border: 2px solid #9e5568;
  border-radius: 4px;
  color: #fff3df;
  background: linear-gradient(180deg, #71334f, #4c253f);
  box-shadow: inset 0 0 0 2px #b96f72, 0 3px 0 #2d182d;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
}
.shaman-topic-options button:is(:hover, :focus-visible) {
  filter: brightness(1.1);
  outline: 3px solid #ffe2a1;
  outline-offset: 2px;
}
.shaman-topic-options button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #b96f72, 0 1px 0 #2d182d; }
.shaman-apology {
  width: 100%;
  margin-top: 8px;
}

#fortune-dialog[data-npc="shaman"] {
  --room-image: url("./assets/entry-shaman-v1.png");
  --room-size: 81% auto;
  --room-position: 50% 50%;
}
#fortune-dialog[data-npc="shaman"] .interior-field-npc { display: none !important; }
#fortune-dialog[data-npc="shaman"][data-shaman-open="true"][data-view="entry"] .interior-entry::after {
  content: "!";
  position: absolute;
  left: 50%;
  top: 39%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 3px solid #4a283f;
  border-radius: 50% 50% 50% 12%;
  color: #5a2440;
  background: #fff0dc;
  box-shadow: 0 3px 0 rgba(19, 9, 25, .5);
  font: 1000 18px/1 system-ui, sans-serif;
  transform: translate(-50%, -50%) rotate(-7deg);
  animation: shaman-notice-v97 .42s 1.08s cubic-bezier(.2, .9, .25, 1.35) both;
}
@keyframes shaman-notice-v97 {
  from { opacity: 0; transform: translate(-50%, 5px) rotate(-7deg) scale(.72); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1); }
}

#fortune-dialog[data-npc="shaman"] :is(.dialog-scene, .birth-form, .shaman-consult) {
  background-color: #000 !important;
  background-image: linear-gradient(rgba(6, 3, 13, .24), rgba(8, 3, 14, .58)), var(--room-image) !important;
  background-position: 0 0, var(--room-position) !important;
  background-size: 100% 100%, var(--room-size) !important;
  background-repeat: no-repeat !important;
}

#fortune-dialog .sprite.is-single-portrait {
  background-image: var(--portrait-image) !important;
  background-repeat: no-repeat !important;
  background-size: 106% auto !important;
  background-position: 50% 100% !important;
  image-rendering: pixelated;
}
#fortune-dialog .sprite.is-single-portrait.is-wolryeong-prayer {
  background-size: 106% auto !important;
  background-position: 50% 100% !important;
}
.sprite.is-encouraging-portrait {
  background-image: var(--portrait-image) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: 50% 100% !important;
  image-rendering: pixelated;
}
.guide-scene:has(.guide-portrait.is-encouraging-portrait) .guide-speech-box {
  min-height: clamp(210px, 28svh, 250px);
  height: clamp(210px, 28svh, 250px);
  overflow-y: auto;
}
#fortune-dialog .npc-category-icon.has-custom-icon[style*="wolryeong-bell-icon"] {
  background-size: contain !important;
  background-position: center !important;
}

.shaman-consult {
  position: relative;
  display: flex;
  min-height: 100svh;
  align-items: flex-end;
  overflow: hidden;
  image-rendering: pixelated;
}
.shaman-consult[hidden] { display: none !important; }
.shaman-oracle-stage { position: absolute; inset: 0; overflow: hidden; }
.shaman-oracle-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 47%, rgba(15, 6, 21, .8));
  pointer-events: none;
}
.shaman-oracle-portrait {
  position: absolute;
  left: 50%;
  bottom: 330px;
  width: 390px;
  height: 390px;
  transform: translateX(-50%);
  filter: drop-shadow(0 12px 8px rgba(4, 2, 10, .68));
}
.shaman-dialog-panel {
  position: relative;
  z-index: 2;
  width: calc(100% - 20px);
  margin: 0 10px 10px;
  padding: 11px 12px 12px;
  border: 3px solid #9d624d;
  border-radius: 5px;
  color: #3b2633;
  background: #f7dfb6;
  box-shadow: inset 0 0 0 2px #f9efcf, 0 -2px 0 #5e3442, 0 7px 0 rgba(13, 7, 20, .62);
}
.shaman-speaker-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: -40px 0 8px;
  padding: 5px 10px 5px 7px;
  border: 2px solid #9d624d;
  border-radius: 4px 4px 0 0;
  color: #fff1da;
  background: #693650;
}
.shaman-speaker-row strong { font-size: 14px; }
.shaman-speaker-row > span:last-child { color: #ffe0b8; font-size: 12px; font-weight: 800; }
.shaman-message {
  min-height: 90px;
  padding: 12px;
  border: 1px solid #bc8068;
  border-radius: 4px;
  white-space: pre-line;
  font-size: 13px;
  line-height: 1.65;
  background: rgba(255, 245, 218, .65);
}
.shaman-chat-form { margin-top: 10px; }
.shaman-chat-form > label { display: block; margin-bottom: 6px; color: #61404c; font-size: 11px; font-weight: 900; }
.shaman-chat-form .chat-compose { align-items: stretch; }
.shaman-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.shaman-actions .pixel-button { min-width: 0; padding-inline: 8px; }

.atlas-shaman-mini {
  display: block;
  width: 72px;
  height: 72px;
  margin: 8px auto 0;
  background: url("./assets/building-shaman-v1.png") center / contain no-repeat;
  image-rendering: pixelated;
}

@media (max-width: 430px) {
  .building-shaman,
  .intro-building-shaman { width: 29.5%; top: 6.5%; }
  .hotspot-shaman { top: 17%; width: 31%; height: 21%; }
  #fortune-dialog[data-npc="shaman"] { --room-size: 96% auto; }
  .shaman-oracle-portrait { width: 340px; height: 340px; bottom: 338px; }
  .shaman-dialog-panel { width: calc(100% - 14px); margin-inline: 7px; padding-inline: 9px; }
  .shaman-message { min-height: 96px; font-size: 12.5px; }
  .shaman-topic-options { gap: 6px; }
  .shaman-topic-options button { min-height: 48px; padding-inline: 5px; font-size: 11.5px; }
  .shaman-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #fortune-dialog[data-npc="shaman"][data-shaman-open="true"][data-view="entry"] .interior-entry::after { animation-duration: .01ms; }
}

/* Final v99 overrides must remain last so the older sprite compatibility layers
   cannot re-enable the six-frame back-only walking strip. */

/* v119: restore the houses' visual weight and keep every nameplate attached
   to its doorway instead of floating deep in the path. Movement geometry and
   destination coordinates remain unchanged. This block intentionally sits in
   the final override layer so legacy mobile rules cannot win the cascade. */
.building-love,
.building-wealth,
.building-career,
.building-health,
.intro-building-love,
.intro-building-wealth,
.intro-building-career,
.intro-building-health {
  width: 40.5% !important;
}

.building-general,
.intro-building-general {
  width: 50% !important;
}

.building-tarot,
.intro-building-tarot,
.building-shaman,
.intro-building-shaman {
  width: 37.5% !important;
}

.hotspot-love .npc-label,
.hotspot-wealth .npc-label {
  top: 74% !important;
  bottom: auto !important;
}

.hotspot-career .npc-label,
.hotspot-health .npc-label {
  top: 42% !important;
  bottom: auto !important;
}

.building-love,
.intro-building-love {
  top: 16% !important;
}

.building-wealth,
.intro-building-wealth {
  top: 18% !important;
}

.hotspot-shaman .npc-label {
  top: 62% !important;
  bottom: auto !important;
}

.daily-mailbox {
  left: 20.5% !important;
  top: 72.5% !important;
}

.game-map.is-night .intro-world {
  filter: brightness(.78) saturate(1.14) contrast(1.04) hue-rotate(8deg) !important;
}

.player.movement-sprite[data-direction] {
  --player-scale-x: 1;
  --player-scale-y: 1;
  width: 70px !important;
  height: 70px !important;
  background-image: url("./assets/player-walk-directional-v4.png") !important;
  background-size: 400% 300% !important;
  background-repeat: no-repeat !important;
  transform: translate(-50%, -74%) !important;
  transition:
    left var(--walk-duration, 620ms) linear,
    top var(--walk-duration, 620ms) linear !important;
}

.player.movement-sprite.is-route-reset { transition: none !important; }
.player.movement-sprite:not(.is-walking)[data-direction="down"] { background-position: 0% 0% !important; }
.player.movement-sprite:not(.is-walking)[data-direction="up"] { background-position: 0% 50% !important; }
.player.movement-sprite:not(.is-walking)[data-direction="left"] { background-position: 0% 100% !important; }
.player.movement-sprite:not(.is-walking)[data-direction="right"] { background-position: 66.666667% 100% !important; }

.player.movement-sprite.is-walking[data-direction="down"] {
  animation: player-walk-down-v99 .54s steps(1, end) infinite, player-footfall-v99 .27s steps(2, end) infinite !important;
}
.player.movement-sprite.is-walking[data-direction="up"] {
  animation: player-walk-up-v99 .54s steps(1, end) infinite, player-footfall-v99 .27s steps(2, end) infinite !important;
}
.player.movement-sprite.is-walking[data-direction="left"] {
  animation: player-walk-left-v99 .46s steps(1, end) infinite, player-footfall-v99 .23s steps(2, end) infinite !important;
}
.player.movement-sprite.is-walking[data-direction="right"] {
  animation: player-walk-right-v99 .46s steps(1, end) infinite, player-footfall-v99 .23s steps(2, end) infinite !important;
}

/* v126: every saju NPC keeps portrait-identifying eyes and facial details
   during the room-entry beat. Luna and Wolryeong retain their own assets. */
#fortune-dialog:is(
  [data-npc="love"],
  [data-npc="wealth"],
  [data-npc="career"],
  [data-npc="health"],
  [data-npc="general"]
) .interior-field-npc {
  background-image: url("./assets/field-sprites.png") !important;
}
#fortune-dialog[data-npc="love"] .interior-field-npc {
  background-position: 33.333% center !important;
}
#fortune-dialog[data-npc="health"] .interior-field-npc {
  background-image: url("./assets/field-health-v2.png") !important;
  background-position: 50% 100% !important;
  background-size: contain !important;
}

/* 첨부 레퍼런스를 그대로 쓰는 전면 운세 풀이 로딩 화면 */
.game-dialog #oracle-loading.oracle-loading {
  position: relative;
  display: block;
  width: 100%;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background: #271746;
  container-type: inline-size;
}
.game-dialog #oracle-loading.oracle-loading[hidden] { display: none; }
.oracle-loading-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.loading-npc-copy {
  position: absolute;
  z-index: 2;
  top: 52cqw;
  left: 50%;
  width: min(82%, 360px);
  margin: 0;
  padding: 0 8px;
  color: #ffe9bd;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: clamp(12px, 3.15cqw, 15px);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  white-space: pre-line;
  text-wrap: balance;
  word-break: keep-all;
  transform: translateX(-50%);
}

/* v149: three-tab navigation, account page, truthful local records, and gradual dusk. */
.game-map::before {
  opacity: var(--night-progress, 0) !important;
  transition: opacity 70s linear !important;
}
.game-map .map-art,
.game-map .intro-landscape,
.game-map .intro-world {
  filter: brightness(var(--village-brightness, 1)) saturate(var(--village-saturation, 1)) contrast(1.02) hue-rotate(var(--village-hue, 0deg)) !important;
  transition: filter 70s linear !important;
}
.game-map .map-tint,
.game-map.is-night .map-tint,
.game-map.is-dusk .map-tint {
  opacity: var(--village-tint-opacity, 0) !important;
  background: linear-gradient(180deg, rgba(77, 48, 160, .46), rgba(116, 62, 151, .18) 45%, rgba(25, 31, 99, .42)) !important;
  mix-blend-mode: color !important;
  transition: opacity 70s linear !important;
}
.game-map .map-building,
.game-map .intro-map-building,
.game-map.is-night .map-building,
.game-map.is-night .intro-map-building {
  filter: brightness(var(--building-brightness, 1)) saturate(var(--village-saturation, 1)) contrast(1.03)
          drop-shadow(0 7px 3px rgba(10, 9, 45, .38))
          drop-shadow(0 0 5px rgba(255, 190, 86, calc(var(--night-progress, 0) * .26))) !important;
  transition: filter 70s linear !important;
}

.game-map { height: calc(100svh - 78px); }
.bottom-nav {
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100%;
  height: calc(78px + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  padding: 0 10px env(safe-area-inset-bottom) !important;
  overflow: visible;
  background: linear-gradient(180deg, rgba(35, 28, 63, .98), rgba(22, 19, 42, 1)) !important;
  border-top: 1px solid rgba(255, 222, 150, .22);
  box-shadow: 0 -9px 26px rgba(9, 7, 23, .34) !important;
}
.bottom-nav-art { display: none !important; }
.bottom-nav .nav-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  height: 74px !important;
  padding: 7px 8px 6px;
  color: rgba(255, 242, 214, .68);
  background: transparent !important;
  border: 0;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.bottom-nav .nav-item > span { opacity: 1 !important; }
.bottom-nav .nav-item .nav-icon {
  width: 24px;
  height: 24px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bottom-nav .nav-item.is-active {
  color: #ffe1a0;
  background: rgba(255, 222, 150, .08) !important;
}
.bottom-nav .nav-item.is-active::after {
  left: 34% !important;
  right: 34% !important;
  bottom: 4px !important;
  height: 2px !important;
  border-radius: 999px;
  background: #ffd77e !important;
  box-shadow: 0 0 8px rgba(255, 201, 100, .65);
}

.my-page-dialog {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #fff2d6;
  background: #191627 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 26px 80px rgba(4, 3, 12, .7) !important;
}
.my-page-dialog::backdrop { background: rgba(8, 6, 20, .76); backdrop-filter: blur(3px); }
.my-page-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background:
    radial-gradient(circle at 90% 0, rgba(117, 70, 145, .14), transparent 28%),
    #191627;
}
.my-page-mobile-nav {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 0 0 calc(70px + env(safe-area-inset-bottom));
  min-height: calc(70px + env(safe-area-inset-bottom));
  padding: 0 8px env(safe-area-inset-bottom);
  border-top: 1px solid rgba(255, 226, 164, .16);
  background: rgba(27, 22, 42, .97);
  box-shadow: 0 -10px 28px rgba(8, 6, 20, .24);
}
.my-page-mobile-nav .nav-item {
  min-width: 0;
  height: 70px !important;
  padding: 7px 4px 6px;
  color: rgba(255, 242, 214, .68);
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
}
.my-page-mobile-nav .nav-item.is-active { color: #ffe1a0; }
.my-page-mobile-nav .nav-icon {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.my-page-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  min-height: calc(68px + env(safe-area-inset-top));
  padding: calc(16px + env(safe-area-inset-top)) 20px 12px;
  background: rgba(25, 22, 39, .94);
  border-bottom: 1px solid rgba(255, 226, 164, .09);
}
.my-page-header h2 { margin: 0; color: #fff4db; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; }
.my-page-header .close-button {
  position: relative !important;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -9px;
  padding: 0;
  color: rgba(255, 242, 214, .76);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 0;
  line-height: 1;
}
.my-page-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
  scrollbar-color: rgba(255, 210, 125, .38) transparent;
}
.my-page-home { display: grid; gap: 18px; }
.my-profile-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 12px 14px;
}
.my-profile-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #e8d9ff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
}
.my-profile-avatar svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.my-profile-card > div { display: grid; gap: 4px; min-width: 0; }
.my-profile-card strong { color: #fff5df; font-size: 17px; }
.my-profile-card span { color: rgba(255, 242, 214, .57); font-size: 12px; font-style: normal; line-height: 1.45; }
.my-menu-section { display: grid; gap: 7px; }
.my-menu-section > h3 { margin: 0 0 0 6px; color: rgba(255, 242, 214, .52); font-size: 12px; font-weight: 600; }
.my-menu-group {
  overflow: hidden;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 15px;
}
.my-menu-row,
.my-install-card {
  width: 100%;
  min-height: 58px;
  color: #fff3dc;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.my-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}
.my-menu-row + .my-menu-row { border-top: 1px solid rgba(255,255,255,.075); }
.my-menu-row > span,
.my-install-card > span { display: grid; gap: 4px; min-width: 0; }
.my-menu-row strong,
.my-install-card strong { color: #fff3dc; font-size: 15px; line-height: 1.35; }
.my-menu-row small,
.my-install-card small { color: rgba(255, 242, 214, .5); font-size: 12px; line-height: 1.4; }
.my-menu-row svg,
.my-install-card svg,
.my-detail-back svg { flex: 0 0 auto; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.my-menu-row > svg { color: rgba(255,255,255,.42); }
.my-menu-row em { color: rgba(255, 226, 164, .54); font-size: 12px; font-style: normal; }
.my-menu-row[aria-disabled="true"] { cursor: default; }
.my-menu-row:not([aria-disabled="true"]):active,
.my-install-card:active { background: rgba(255, 223, 151, .07); }
.my-install-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  background: linear-gradient(135deg, rgba(108, 70, 139, .24), rgba(255,255,255,.055));
  border: 1px solid rgba(222, 180, 255, .13);
  border-radius: 15px;
}
.my-install-card svg { color: #dfbdff; }
.leave-village-link {
  min-height: 44px;
  margin: 0 auto;
  padding: 8px 14px;
  color: rgba(255, 211, 190, .76);
  background: transparent;
  border: 0;
  font-size: 13px;
  text-decoration: none;
}
.my-detail-view { min-height: 100%; }
.my-detail-view[hidden] { display: none; }
.my-detail-back {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: -4px 0 12px;
  padding: 7px 4px;
  color: #e6c7ff;
  background: transparent;
  border: 0;
  font-weight: 700;
}
.my-detail-heading { margin-bottom: 18px; padding: 4px 4px 0; }
.my-detail-heading small { color: #c59be4; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.my-detail-heading h3 { margin: 7px 0 8px; color: #fff3db; font-size: 24px; }
.my-detail-heading p,
.my-information-card p,
.my-empty-state p { margin: 0; color: rgba(255, 242, 214, .66); font-size: 14px; line-height: 1.75; word-break: keep-all; }
.my-information-card,
.my-empty-state {
  padding: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 15px;
}
.my-empty-state { display: grid; gap: 8px; text-align: center; }
.my-empty-state strong { color: #fff2d6; font-size: 16px; }
.payment-history-list { display: grid; gap: 10px; }
.payment-history-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
}
.payment-history-list article > span { display: grid; gap: 4px; }
.payment-history-list strong { color: #fff3db; font-size: 14px; }
.payment-history-list small { color: rgba(255, 242, 214, .52); font-size: 12px; }
.payment-history-list b { color: #ffdb8c; white-space: nowrap; font-size: 14px; }

.journal-entry summary { overflow: hidden; }
.journal-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.journal-access { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.journal-access.is-free { color: #dcd1ef; background: rgba(255,255,255,.08); }
.journal-access.is-prototype { color: #ffe1a0; background: rgba(255, 201, 100, .13); }
.journal-access.is-paid { color: #c9f3d8; background: rgba(94, 189, 133, .14); }
.journal-reading-copy > p,
.journal-reading-sections p { margin: 0; line-height: 1.72; word-break: keep-all; }
.journal-reading-copy > p + p { margin-top: 12px; }
.journal-reading-sections { display: grid; gap: 12px; margin-top: 16px; }
.journal-reading-sections section { padding: 13px 14px; background: rgba(255,255,255,.055); border-radius: 10px; }
.journal-reading-sections small { color: #cda9e6; font-size: 11px; font-weight: 800; }
.journal-reading-sections h4 { margin: 4px 0 8px; color: #fff0cf; font-size: 15px; }

@media (min-width: 820px) {
  .game-map { height: 100svh; }
  .bottom-nav {
    position: fixed !important;
    left: calc(50% + 278px);
    top: 50%;
    bottom: auto;
    grid-template-columns: 1fr !important;
    width: 116px;
    height: auto !important;
    padding: 9px !important;
    border: 1px solid rgba(255, 222, 150, .2);
    border-radius: 16px;
    transform: translateY(-50%) !important;
    box-shadow: 0 18px 42px rgba(7,5,18,.4) !important;
  }
  .bottom-nav .nav-item { height: 70px !important; }
  .nav-pending .bottom-nav,
  .guide-open .bottom-nav { opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(12px) !important; }
  .nav-revealed .bottom-nav { animation: none !important; }
  .my-page-dialog {
    width: min(92vw, 680px) !important;
    max-width: 680px !important;
    height: min(86dvh, 820px) !important;
    border: 1px solid rgba(255, 226, 164, .16) !important;
    border-radius: 20px !important;
  }
  .my-page-scroll { padding: 22px 24px 28px; }
  .my-page-mobile-nav { display: none; }
  .my-page-home { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
  .my-profile-card,
  .my-install-card,
  .leave-village-link { grid-column: 1 / -1; }
}

@media (max-width: 390px) {
  .my-page-scroll { padding-left: 14px; padding-right: 14px; }
  .my-menu-row { padding-left: 13px; padding-right: 13px; }
  .journal-meta { align-items: flex-start; flex-direction: column; }
}

/* Four-tab navigation shared by the village and mobile pages. */
@media (max-width: 819px) {
  .bottom-nav,
  .my-page-mobile-nav {
    height: calc(78px + env(safe-area-inset-bottom)) !important;
    min-height: calc(78px + env(safe-area-inset-bottom));
    padding: 0 7% env(safe-area-inset-bottom) !important;
    border: 0 !important;
    background-color: #21182e !important;
    background-image: linear-gradient(180deg, rgba(84, 48, 65, .98), rgba(37, 25, 44, 1)) !important;
    box-shadow: 0 -7px 18px rgba(8, 6, 20, .3) !important;
  }

  .my-page-mobile-nav {
    flex-basis: calc(78px + env(safe-area-inset-bottom));
  }

  .bottom-nav .nav-item,
  .my-page-mobile-nav .nav-item {
    position: relative;
    height: 76px !important;
    gap: 4px;
    padding: 9px 5px 8px;
    color: rgba(255, 239, 210, .74);
    background: transparent !important;
    border-radius: 4px;
    font-size: 11px;
    text-shadow: 0 1px 0 #3d2130;
  }

  .bottom-nav .nav-item + .nav-item::before,
  .my-page-mobile-nav .nav-item + .nav-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 213, 139, .28), transparent);
  }

  .bottom-nav .nav-item .nav-icon,
  .my-page-mobile-nav .nav-icon {
    width: 25px;
    height: 25px;
    stroke-width: 1.9;
    shape-rendering: crispEdges;
    filter: drop-shadow(0 2px 0 rgba(50, 25, 31, .7));
  }

  .bottom-nav .nav-item.is-active,
  .my-page-mobile-nav .nav-item.is-active {
    color: #fff1c8;
    background: linear-gradient(180deg, rgba(255, 222, 151, .08), rgba(255, 190, 100, .03)) !important;
  }

  .bottom-nav .nav-item.is-active::after,
  .my-page-mobile-nav .nav-item.is-active::after {
    content: "";
    position: absolute;
    left: 38% !important;
    right: 38% !important;
    bottom: 7px !important;
    height: 3px !important;
    border-radius: 1px;
    background: #f4c978 !important;
    box-shadow: 0 1px 0 #6e3d2d !important;
  }
}

/* v217: restore the moonlit pixel-art navigation while keeping the current four destinations. */
.game-map {
  height: calc(100svh - 94px) !important;
}
.bottom-nav,
.my-page-mobile-nav {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  height: calc(94px + env(safe-area-inset-bottom)) !important;
  min-height: calc(94px + env(safe-area-inset-bottom));
  margin: 0 !important;
  padding: 7px 6.5% calc(7px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #1a1022 !important;
  background-image: url("./assets/moon-toolbar-4tab-blank-v1.png") !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: 100% auto !important;
  box-shadow: 0 -8px 22px rgba(5, 4, 16, .4) !important;
  transform: none !important;
}
.bottom-nav .nav-item,
.my-page-mobile-nav .nav-item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 24px 14px;
  align-items: center;
  justify-content: center;
  justify-items: center;
  align-content: center;
  row-gap: 3px;
  min-width: 0;
  height: 80px !important;
  padding: 9px 3px 8px !important;
  color: rgba(255, 241, 207, .78) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: "Puzzle Sans", "Pretendard Variable", "Pretendard", sans-serif;
  font-size: 10px !important;
  font-weight: 800;
  line-height: 1.05;
  text-shadow: 0 2px 0 rgba(56, 29, 28, .75);
}
.bottom-nav .nav-item + .nav-item::before,
.my-page-mobile-nav .nav-item + .nav-item::before {
  display: none !important;
}
.bottom-nav .nav-item > span,
.my-page-mobile-nav .nav-item > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 14px;
  line-height: 14px;
  text-align: center;
  white-space: nowrap;
  opacity: 1 !important;
}
.bottom-nav .nav-item .nav-icon,
.my-page-mobile-nav .nav-icon {
  display: block;
  align-self: center;
  justify-self: center;
  width: 24px !important;
  height: 24px !important;
  overflow: visible;
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: auto;
  filter: none;
}
.bottom-nav .nav-item.is-active,
.my-page-mobile-nav .nav-item.is-active {
  color: #fff0be !important;
  background: radial-gradient(ellipse at center, rgba(255, 209, 111, .2), transparent 70%) !important;
}
.bottom-nav .nav-item.is-active::after,
.my-page-mobile-nav .nav-item.is-active::after {
  content: "";
  position: absolute;
  left: 31% !important;
  right: 31% !important;
  bottom: 8px !important;
  height: 2px !important;
  border-radius: 999px;
  background: #ffd878 !important;
  box-shadow: 0 1px 0 #6f392c, 0 0 7px rgba(255, 199, 90, .55) !important;
}

@media (min-width: 820px) {
  .game-map { height: calc(100svh - 94px) !important; }
  .bottom-nav {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 94px !important;
    padding: 7px 6.5% !important;
    transform: none !important;
  }
  .bottom-nav .nav-item { height: 80px !important; }
  .nav-pending .bottom-nav,
  .guide-open .bottom-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) !important;
  }
}

/* First-visit coach marks: dim the world and spotlight one real tab at a time. */
.nav-tour[hidden] { display: none !important; }
.nav-tour {
  --tour-arrow-x: 50%;
  --tour-arrow-y: 50%;
  position: fixed;
  inset: 0;
  z-index: 260;
  display: block;
  color: #fff2d6;
  background: rgba(4, 3, 12, .8);
  cursor: pointer;
}
.nav-tour-skip {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: max(14px, calc((100vw - 520px) / 2 + 14px));
  z-index: 3;
  min-width: 0;
  min-height: 40px;
  padding: 8px 4px;
  color: #fff;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: "Pretendard Variable", "Pretendard", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-shadow: 0 2px 9px rgba(0, 0, 0, .9);
  cursor: pointer;
}
.nav-tour-card {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: calc(122px + env(safe-area-inset-bottom));
  z-index: 2;
  width: auto;
  max-width: 360px;
  margin-inline: auto;
  padding: 0;
  color: #fff;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family: "Pretendard Variable", "Pretendard", sans-serif;
  text-align: center;
}
.nav-tour-card::before {
  display: none;
}
.nav-tour-card::after {
  display: none;
}
.nav-tour-meta {
  display: none;
}
.nav-tour-meta strong { color: #ffd985; font-variant-numeric: tabular-nums; }
.nav-tour-card h2 {
  margin: 0 0 7px;
  color: #ffe5a6;
  font-family: "Pretendard Variable", "Pretendard", sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .85);
}
.nav-tour-card p {
  margin: 0;
  color: rgba(255, 255, 255, .94);
  font-family: "Pretendard Variable", "Pretendard", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.75;
  white-space: pre-line;
  word-break: keep-all;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}
.nav-tour-dots { display: none; }
.nav-tour-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 238, 203, .25);
  transition: width .22s ease, background .22s ease;
}
.nav-tour-dots i.is-active { width: 20px; border-radius: 999px; background: #ffd67a; }
.nav-tour-next {
  display: none;
}
.nav-tour-next b { color: #ffd985; font-size: 20px; line-height: .7; }
body.nav-tour-open .game-map { height: calc(100svh - 94px) !important; }
body.nav-tour-open .bottom-nav {
  z-index: 280 !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
body.nav-tour-open .bottom-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(4, 3, 12, .72);
  pointer-events: none;
}
body.nav-tour-open .bottom-nav .nav-item {
  z-index: 1;
  opacity: .28;
  transition: opacity .22s ease, color .22s ease, box-shadow .22s ease;
}
body.nav-tour-open .bottom-nav .nav-item.is-tour-target {
  z-index: 3;
  opacity: 1;
  color: #fff1c6;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255, 220, 143, .2), rgba(255, 183, 92, .08)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 225, 162, .7), 0 0 0 5px rgba(255, 208, 117, .12), 0 0 26px rgba(255, 192, 96, .48);
  animation: nav-tour-spotlight 1.4s ease-in-out infinite alternate;
}

@keyframes nav-tour-spotlight {
  to { box-shadow: inset 0 0 0 1px rgba(255, 236, 190, .82), 0 0 0 7px rgba(255, 208, 117, .15), 0 0 32px rgba(255, 192, 96, .58); }
}

@media (min-width: 820px) {
  .nav-tour-card {
    left: 24px;
    right: 24px;
    top: auto;
    bottom: 132px;
    width: auto;
    max-width: 360px;
    margin-inline: auto;
    transform: none;
    text-align: center;
  }
  .nav-tour-card::before {
    display: none;
  }
  .nav-tour-card::after {
    display: none;
  }
  body.nav-tour-open .game-map { height: calc(100svh - 94px) !important; }
  body.nav-tour-open .bottom-nav { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.nav-tour-open .bottom-nav .nav-item.is-tour-target { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .game-map::before,
  .game-map .map-art,
  .game-map .intro-landscape,
  .game-map .intro-world,
  .game-map .map-tint,
  .game-map .map-building,
  .game-map .intro-map-building { transition-duration: .01ms !important; }
}

/* v152: keep real finger taps on a house from falling through to map movement. */
.game-map .npc {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/* v158: anchor the round notice bubble to each NPC head instead of the room. */
#fortune-dialog[data-view="entry"] .interior-field-npc::after,
#fortune-dialog[data-view="entry"] .interior-entry::after {
  display: none !important;
}

#fortune-dialog[data-view="entry"]:is(
  [data-npc="love"],
  [data-npc="wealth"],
  [data-npc="career"],
  [data-npc="health"],
  [data-npc="general"]
) .interior-field-npc.is-noticing::after,
#fortune-dialog[data-view="entry"]:is(
  [data-npc="tarot"],
  [data-npc="shaman"]
) .interior-entry:has(.interior-field-npc.is-noticing)::after {
  content: "!";
  position: absolute;
  z-index: 5;
  display: grid !important;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid #5c3448;
  border-radius: 50%;
  color: #5b3045;
  background: #fff0cf;
  box-shadow: inset 0 0 0 2px #f1c984, 0 4px 0 rgba(20, 10, 25, .58);
  font: 1000 18px/1 system-ui, sans-serif;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: interior-notice-unified-v158 .72s cubic-bezier(.22, 1, .36, 1) both;
}

#fortune-dialog[data-view="entry"]:is(
  [data-npc="love"],
  [data-npc="wealth"],
  [data-npc="career"],
  [data-npc="health"],
  [data-npc="general"]
) .interior-field-npc.is-noticing::after {
  left: 50%;
  top: 2px;
}

#fortune-dialog[data-npc="health"][data-view="entry"] .interior-field-npc.is-noticing::after {
  top: 8px;
}

#fortune-dialog[data-npc="tarot"][data-view="entry"] {
  --notice-left: 49.6%;
  --notice-top: 32.5%;
}

#fortune-dialog[data-npc="shaman"][data-view="entry"] {
  --notice-left: 50%;
  --notice-top: 39%;
}

#fortune-dialog[data-view="entry"]:is(
  [data-npc="tarot"],
  [data-npc="shaman"]
) .interior-entry:has(.interior-field-npc.is-noticing)::after {
  left: var(--notice-left);
  top: var(--notice-top);
}

@keyframes interior-notice-unified-v158 {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(.7); }
  28%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 4px)) scale(.96); }
}

.player.movement-sprite[data-direction] {
  contain: paint;
  overflow: hidden;
  isolation: isolate;
  background-size: 280px 210px !important;
}

.player.movement-sprite:not(.is-walking)[data-direction="down"] { background-position: 0 0 !important; }
.player.movement-sprite:not(.is-walking)[data-direction="up"] { background-position: 0 -70px !important; }
.player.movement-sprite:not(.is-walking)[data-direction="left"] { background-position: 0 -140px !important; }
.player.movement-sprite:not(.is-walking)[data-direction="right"] { background-position: -140px -140px !important; }

@keyframes player-walk-down-v154 {
  0%, 24% { background-position: -70px 0; }
  25%, 49% { background-position: -140px 0; }
  50%, 74% { background-position: -210px 0; }
  75%, 100% { background-position: -140px 0; }
}

@keyframes player-walk-up-v154 {
  0%, 24% { background-position: -70px -70px; }
  25%, 49% { background-position: -140px -70px; }
  50%, 74% { background-position: -210px -70px; }
  75%, 100% { background-position: -140px -70px; }
}

@keyframes player-walk-left-v154 {
  0%, 49% { background-position: 0 -140px; }
  50%, 100% { background-position: -70px -140px; }
}

@keyframes player-walk-right-v154 {
  0%, 49% { background-position: -140px -140px; }
  50%, 100% { background-position: -210px -140px; }
}

.player.movement-sprite.is-walking[data-direction="down"] {
  animation: player-walk-down-v154 .54s steps(1, end) infinite, player-footfall-v99 .27s steps(2, end) infinite !important;
}
.player.movement-sprite.is-walking[data-direction="up"] {
  animation: player-walk-up-v154 .54s steps(1, end) infinite, player-footfall-v99 .27s steps(2, end) infinite !important;
}
.player.movement-sprite.is-walking[data-direction="left"] {
  animation: player-walk-left-v154 .46s steps(1, end) infinite, player-footfall-v99 .23s steps(2, end) infinite !important;
}
.player.movement-sprite.is-walking[data-direction="right"] {
  animation: player-walk-right-v154 .46s steps(1, end) infinite, player-footfall-v99 .23s steps(2, end) infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  #fortune-dialog[data-view="entry"] .interior-field-npc.is-noticing::after,
  #fortune-dialog[data-view="entry"] .interior-entry:has(.interior-field-npc.is-noticing)::after {
    animation-duration: .01ms;
  }
}

/* v180: one cross-platform wheel date picker instead of Android's month-by-month calendar. */
.date-wheel-field { position: relative; }
.date-wheel-source {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  min-inline-size: 1px !important;
  min-block-size: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}
.date-wheel-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 48px;
  padding: 10px 12px;
  border: 2px solid #b27a61;
  border-radius: 4px;
  color: #806775;
  background: #171525;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.date-wheel-trigger.has-value { color: #fff4e4; }
.date-wheel-trigger:is(:hover, :focus-visible) { border-color: #d7a567; outline: none; }
.date-wheel-trigger:focus-visible { box-shadow: 0 0 0 3px rgba(215, 165, 103, .24); }
.date-wheel-trigger.is-invalid { border-color: #c95165; box-shadow: 0 0 0 3px rgba(201, 81, 101, .18); }
.date-wheel-trigger-value { overflow: hidden; min-inline-size: 0; white-space: nowrap; text-overflow: ellipsis; }
.date-wheel-trigger svg { flex: 0 0 20px; inline-size: 20px; block-size: 20px; fill: none; stroke: #e4b86e; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.date-wheel-dialog {
  z-index: 120;
  inline-size: min(calc(100% - 20px), 420px);
  max-inline-size: 420px;
  max-block-size: calc(100dvh - 20px);
  margin: auto;
  overflow: visible;
}
.date-wheel-dialog::backdrop { background: rgba(10, 7, 24, .76); backdrop-filter: blur(4px); }
.date-wheel-sheet {
  overflow: hidden;
  padding: 18px 16px max(16px, env(safe-area-inset-bottom));
  border: 2px solid #b27876;
  border-radius: 18px;
  color: #f7e7d7;
  background: linear-gradient(180deg, #30203f, #1c162c 72%);
  box-shadow: inset 0 0 0 2px rgba(245, 198, 139, .1), 0 18px 50px rgba(4, 2, 13, .55);
}
.date-wheel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.date-wheel-header small { display: block; margin-bottom: 3px; color: #c69cad; font: 800 9px/1.2 ui-monospace, monospace; letter-spacing: .12em; }
.date-wheel-header h2 { margin: 0; color: #fff1d2; font-size: 20px; line-height: 1.25; }
.date-wheel-close {
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid #71536f;
  border-radius: 50%;
  color: #ead2d5;
  background: rgba(255, 255, 255, .045);
  cursor: pointer;
}
.date-wheel-close svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.date-wheel-help { margin: 10px 0 16px; color: #cbb9c7; font-size: 12px; line-height: 1.5; }
.date-wheel-labels { display: grid; grid-template-columns: 1.25fr .8fr .8fr; gap: 6px; margin: 0 4px 6px; color: #b89aaa; font-size: 10px; font-weight: 800; text-align: center; }
.date-wheel-picker {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr .8fr .8fr;
  gap: 6px;
  block-size: 240px;
  border-block: 1px solid rgba(226, 177, 139, .2);
  background: linear-gradient(180deg, rgba(13, 9, 28, .7), rgba(20, 12, 38, .26) 43%, rgba(20, 12, 38, .26) 57%, rgba(13, 9, 28, .7));
}
.date-wheel-selection {
  position: absolute;
  z-index: 0;
  inset: 96px 4px auto;
  block-size: 48px;
  border-block: 1px solid rgba(242, 193, 122, .55);
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(135, 76, 104, .28), rgba(201, 135, 123, .18), rgba(135, 76, 104, .28));
  pointer-events: none;
}
.date-wheel-column {
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding-block: 96px;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.date-wheel-column::-webkit-scrollbar { display: none; }
.date-wheel-column:focus-visible { outline: 2px solid rgba(255, 223, 157, .5); outline-offset: -2px; }
.date-wheel-option {
  display: block;
  inline-size: 100%;
  block-size: 48px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  color: #958393;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 48px;
  text-align: center;
  scroll-snap-align: center;
  cursor: pointer;
}
.date-wheel-option[aria-selected="true"] { color: #fff0c9; font-size: 18px; text-shadow: 0 0 12px rgba(255, 205, 122, .3); }
.date-wheel-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; margin-top: 16px; }
.date-wheel-actions button {
  min-block-size: 46px;
  border: 2px solid #79566c;
  border-radius: 7px;
  color: #ead9df;
  background: #35253f;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.date-wheel-actions .date-wheel-confirm { border-color: #c88970; color: #fff2d6; background: linear-gradient(#8c5064, #6d3b55); box-shadow: inset 0 0 0 2px #a96370; }

@media (max-width: 430px) {
  .date-wheel-dialog { inline-size: 100%; max-inline-size: none; max-block-size: 100dvh; margin: auto 0 0; }
  .date-wheel-sheet { border-width: 2px 0 0; border-radius: 20px 20px 0 0; }
  #compatibility-fields > .partner-date-field .date-wheel-trigger { min-block-size: 42px; padding-inline: 8px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .date-wheel-column { scroll-behavior: auto; }
}

/* v224: make every house entrance read as an actionable RPG command.
   The entire house remains the touch target; this is only the visible label. */
.npc-label,
.hotspot-tarot .npc-label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: max-content;
  min-width: 74px;
  max-width: none !important;
  min-height: 32px;
  padding: 6px 10px 7px;
  border: 2px solid #c98670;
  border-radius: 7px;
  color: #ffeab5;
  background: linear-gradient(180deg, #6b3653 0%, #44243e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 218, 161, .2),
    0 3px 0 rgba(35, 17, 37, .82),
    0 7px 12px rgba(24, 11, 33, .34);
  filter: none;
  pointer-events: none;
}

.npc-label small {
  display: block;
  color: inherit;
  font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.01em;
}

.npc-label::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin-left: 1px;
  border-top: 2px solid #ffd98e;
  border-right: 2px solid #ffd98e;
  transform: rotate(45deg);
}

.npc:is(:hover, :focus-visible, .is-selected) .npc-label {
  color: #fff4cf;
  background: linear-gradient(180deg, #7d405d 0%, #522945 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 174, .28),
    0 3px 0 rgba(35, 17, 37, .82),
    0 0 11px rgba(255, 198, 92, .54);
  filter: none !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 390px) {
  .npc-label,
  .hotspot-tarot .npc-label {
    min-width: 72px;
    min-height: 31px;
    padding: 5px 9px 6px;
  }

  .npc-label small { font-size: 12px; }
}

/* v181: dock every NPC nameplate directly above its dialogue panel without overlap. */
.dialog-copy > .npc-heading,
.guide-copy > .npc-heading {
  margin-bottom: 0 !important;
}

.form-speaker,
.tarot-dialog-panel .form-speaker,
.chat-speaker-row {
  top: -42px !important;
}

.shaman-dialog-panel {
  padding-top: 18px;
}

.shaman-speaker-row {
  position: absolute;
  left: 12px;
  top: -42px;
  z-index: 20;
  min-height: 39px;
  margin: 0;
}

@media (max-width: 390px) {
  .shaman-speaker-row { left: 9px; }
}

/* v183: crop only the room-entry sprite frame edge; keep its size and position. */
#fortune-dialog[data-view="entry"] .interior-player {
  filter: none !important;
  contain: paint;
  overflow: hidden;
  isolation: isolate;
  clip-path: inset(0 1px);
}

/* v200-final: keep the motion reference full-frame after legacy loader rules. */
.game-dialog #oracle-loading.oracle-loading {
  display: grid;
  min-height: 100svh;
  place-items: end center;
  padding: 0;
  background: #24143f;
}
.game-dialog #oracle-loading.oracle-loading[hidden] { display: none; }

/* v231-final: the village fills the dock area; navigation returns after Lumi closes. */
.app-shell {
  position: relative;
  height: 100svh !important;
  min-height: 100svh !important;
  overflow: hidden;
}

.game-map,
body.nav-tour-open .game-map {
  height: 100svh !important;
  min-height: 100svh !important;
  border-radius: 0 !important;
}

.bottom-nav,
body.nav-tour-open .bottom-nav {
  position: absolute !important;
  inset: auto 0 0 !important;
  background-color: transparent !important;
}

body:not(.is-intro):not(.nav-pending):not(.guide-open) .bottom-nav {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

body.nav-tour-open .bottom-nav {
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}

.walk-skip { z-index: 285; }