:root {
  --navy: #0b1730;
  --navy2: #13264d;
  --gold: #e8c46a;
  --gold2: #ffe6a3;
  --cream: #fff8ea;
  --red: #c8302b;
  --ink: #1b1b1b;
  --muted: #b9c4dc;
  --sans: 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans TC', 'Noto Sans SC', system-ui, sans-serif;
  --serif: 'Noto Serif KR', serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--navy); color: var(--cream); font-family: var(--sans); overflow: hidden; user-select: none; -webkit-user-select: none; }
body.lang-ja { --sans: 'Noto Sans JP', 'Noto Sans KR', sans-serif; }
body.lang-zht { --sans: 'Noto Sans TC', 'Noto Sans KR', sans-serif; }
body.lang-zhs { --sans: 'Noto Sans SC', 'Noto Sans KR', sans-serif; }
button { font-family: var(--sans); cursor: pointer; }

#app { position: fixed; inset: 0; background: radial-gradient(120% 90% at 50% 0%, var(--navy2) 0%, var(--navy) 60%, #060d1d 100%); }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); text-align: center; }
.screen.active { display: flex; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.corner { position: fixed; top: 0; left: 0; width: 72px; height: 72px; background: transparent; border: 0; z-index: 30; }
.demo-badge { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 29; background: var(--red); color: #fff; font-weight: 900; padding: 6px 14px; border-radius: 999px; font-size: 14px; letter-spacing: .04em; }

/* Seal */
.seal { width: clamp(84px, 14vmin, 130px); aspect-ratio: 1; border-radius: 50%; background: var(--red); display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(200, 48, 43, .25), 0 10px 30px rgba(0, 0, 0, .4); margin-bottom: 18px; }
.seal span { font-family: var(--serif); font-weight: 900; color: var(--cream); font-size: clamp(48px, 8.5vmin, 80px); line-height: 1; transform: translateY(-2px); }
.seal.big { width: clamp(130px, 26vmin, 230px); box-shadow: 0 0 0 10px rgba(200, 48, 43, .22), 0 0 60px rgba(232, 196, 106, .25), 0 14px 40px rgba(0, 0, 0, .5); animation: breathe 3.2s ease-in-out infinite; }
.seal.big span { font-size: clamp(80px, 16vmin, 145px); }
@keyframes breathe { 50% { transform: scale(1.04); } }

/* Attract */
#s-attract { justify-content: flex-start; padding-top: clamp(28px, 8vh, 90px); }
.attract-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.stars { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 12% 18%, #fff8, transparent), radial-gradient(1.5px 1.5px at 72% 12%, #fff9, transparent), radial-gradient(2px 2px at 85% 30%, #fff6, transparent), radial-gradient(1.5px 1.5px at 30% 34%, #fff7, transparent), radial-gradient(2px 2px at 55% 22%, #fff5, transparent), radial-gradient(1.5px 1.5px at 5% 45%, #fff6, transparent); }
h1 { margin: 6px 0 4px; font-size: clamp(34px, 7.4vmin, 76px); font-weight: 900; color: var(--gold2); letter-spacing: .02em; }
.sub { margin: 0; font-size: clamp(17px, 3.2vmin, 30px); color: var(--muted); font-weight: 500; }
.price-chip { margin: clamp(14px, 3vh, 30px) 0 8px; border: 2px solid var(--gold); color: var(--gold2); border-radius: 999px; padding: 6px 26px; font-size: clamp(22px, 4.2vmin, 40px); font-weight: 900; }
.tap { margin: 14px 0 0; font-size: clamp(20px, 3.8vmin, 36px); font-weight: 700; color: #fff; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.langs-mini { margin-top: 14px; color: #8fa0c4; font-size: clamp(13px, 2.2vmin, 18px); }
.rot { transition: opacity .35s ease; }
.rot.out { opacity: 0; }
.bridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(110px, 22vh, 230px); z-index: 1; }
.bridge .lights circle { animation: twinkle 2.4s ease-in-out infinite; }
.bridge .lights circle:nth-child(3n) { animation-delay: .8s; }
.bridge .lights circle:nth-child(3n+1) { animation-delay: 1.6s; }
@keyframes twinkle { 50% { opacity: .35; } }

/* Language */
h2 { font-size: clamp(22px, 4.2vmin, 40px); font-weight: 900; margin: 0 0 12px; color: var(--gold2); }
h2.multi { font-size: clamp(17px, 3vmin, 28px); line-height: 1.5; color: var(--cream); }
.lang-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2vmin, 20px); width: min(100%, 900px); margin-top: 18px; }
.lang-grid button { flex: 0 1 clamp(150px, 27vw, 270px); font-size: clamp(24px, 4.6vmin, 42px); font-weight: 900; padding: clamp(18px, 3.6vmin, 34px) 10px; border-radius: 22px; border: 2px solid var(--gold); background: rgba(255, 248, 234, .06); color: var(--cream); }
.lang-grid button[data-lang="ja"] { font-family: 'Noto Sans JP', sans-serif; }
.lang-grid button[data-lang="zht"] { font-family: 'Noto Sans TC', sans-serif; }
.lang-grid button[data-lang="zhs"] { font-family: 'Noto Sans SC', sans-serif; }
.lang-grid button:active { background: var(--gold); color: var(--navy); }
.back-home { position: absolute; top: 16px; right: 16px; width: 56px; height: 56px; border-radius: 50%; font-size: 24px; }

/* Buttons */
.primary, .ghost, .row button, .staff { border-radius: 16px; font-weight: 900; font-size: clamp(18px, 3.2vmin, 28px); padding: 14px 28px; border: 0; }
.primary { background: var(--gold); color: var(--navy); }
.primary:disabled { opacity: .35; }
.ghost { background: transparent; color: var(--cream); border: 2px solid rgba(255, 248, 234, .4); }
.row { display: flex; gap: 12px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

/* Birth */
.birth-wrap { display: flex; gap: clamp(16px, 4vw, 56px); align-items: center; justify-content: center; width: min(100%, 1100px); }
.birth-left { flex: 1 1 0; min-width: 0; }
.birth-right { flex: 0 0 auto; }
.hint { color: var(--muted); font-size: clamp(15px, 2.6vmin, 22px); margin: 0 0 16px; line-height: 1.5; }
.date-boxes { display: flex; gap: 10px; justify-content: center; }
.box { background: var(--cream); color: var(--ink); border-radius: 16px; padding: 10px 14px 6px; min-width: clamp(78px, 13vmin, 120px); display: flex; flex-direction: column; align-items: center; }
.box.w4 { min-width: clamp(120px, 20vmin, 180px); }
.box b { font-size: clamp(32px, 6.4vmin, 60px); font-weight: 900; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.box b.empty { color: #c9c2b3; }
.box small { font-size: clamp(13px, 2.2vmin, 18px); color: #6b6455; font-weight: 700; }
.err { min-height: 1.4em; color: #ff9b8f; font-weight: 700; font-size: clamp(15px, 2.6vmin, 22px); margin: 10px 0 0; }
.pad { display: grid; grid-template-columns: repeat(3, clamp(72px, 12vmin, 104px)); gap: 10px; justify-content: center; }
.pad button { height: clamp(62px, 10vmin, 92px); border-radius: 18px; border: 0; background: rgba(255, 248, 234, .1); color: var(--cream); font-size: clamp(26px, 5vmin, 42px); font-weight: 900; }
.pad button:active { background: var(--gold); color: var(--navy); }
.pad button.fn { font-size: clamp(16px, 2.8vmin, 24px); }
@media (orientation: portrait) {
  .birth-wrap { flex-direction: column; }
}

/* Pay */
#p-title { font-size: clamp(26px, 5vmin, 48px); max-width: 900px; line-height: 1.35; }
.note { color: var(--muted); font-size: clamp(17px, 3vmin, 26px); margin: 4px 0; }
.note.small { font-size: clamp(13px, 2.2vmin, 18px); opacity: .7; }
.staff { position: absolute; right: 18px; bottom: 18px; background: #24365f; color: var(--gold2); font-size: clamp(16px, 2.6vmin, 22px); padding: 14px 22px; }

/* Shake */
.tube-wrap { position: relative; width: clamp(120px, 20vmin, 180px); height: clamp(200px, 34vmin, 300px); margin-bottom: 26px; animation: shake .45s ease-in-out infinite; transform-origin: 50% 90%; }
.tube { position: absolute; inset: 22% 0 0 0; background: linear-gradient(90deg, #8a2a1f, #c8302b 45%, #8a2a1f); border-radius: 18px 18px 26px 26px; display: grid; place-items: center; box-shadow: inset 0 0 0 5px var(--gold); }
.tube span { font-family: var(--serif); font-weight: 900; font-size: clamp(54px, 9vmin, 82px); color: var(--gold2); }
.stick { position: absolute; left: 50%; top: 0; width: 22%; height: 46%; transform: translateX(-50%); background: var(--cream); color: var(--red); border-radius: 6px; font-family: var(--serif); font-weight: 900; font-size: clamp(16px, 2.6vmin, 24px); display: flex; justify-content: center; padding-top: 6px; animation: pop 1.3s ease-in-out infinite; }
@keyframes shake { 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes pop { 50% { top: -16%; } }

/* Result */
.result-wrap { display: flex; gap: clamp(16px, 4vw, 56px); align-items: center; justify-content: center; width: 100%; height: 100%; }
.paper { height: 100%; max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border-radius: 6px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); padding: 10px; flex: 0 0 auto; }
.paper canvas { display: block; width: clamp(260px, 40vmin, 420px); height: auto; }
.result-side { max-width: 420px; }
.result-side p { color: var(--muted); font-size: clamp(16px, 2.8vmin, 24px); }
.staff-err { color: #ffb4a8 !important; font-size: 15px !important; }
@media (orientation: portrait) {
  .result-wrap { flex-direction: column; }
  .paper { height: auto; max-height: 64vh; }
  .paper canvas { width: min(78vw, 420px); }
}

/* Overlays */
.overlay { position: fixed; inset: 0; z-index: 40; background: rgba(4, 9, 20, .82); display: grid; place-items: center; padding: 16px; }
.overlay[hidden] { display: none; }
.panel { background: #13264d; border: 2px solid var(--gold); border-radius: 22px; padding: 22px; width: min(92vw, 380px); text-align: center; max-height: 94vh; overflow: auto; }
.panel.wide { width: min(94vw, 560px); text-align: left; }
.panel h3 { margin: 0 0 14px; color: var(--gold2); font-size: 22px; text-align: center; }
.dots { display: flex; gap: 14px; justify-content: center; margin: 6px 0 16px; }
.dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--gold); }
.dots i.on { background: var(--gold); }
.dots.bad { animation: nope .3s; }
@keyframes nope { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.pad.small { grid-template-columns: repeat(3, 72px); margin-bottom: 12px; }
.pad.small button { height: 60px; font-size: 24px; }
.panel label { display: block; font-size: 15px; color: var(--muted); margin-bottom: 10px; }
.panel input, .panel select { display: block; width: 100%; margin-top: 4px; font-size: 18px; padding: 10px 12px; border-radius: 10px; border: 1px solid #3a5288; background: #0b1730; color: var(--cream); font-family: var(--sans); }
.panel label.check { display: flex; gap: 10px; align-items: center; }
.panel label.check input { width: auto; margin: 0; }
.panel .row button { font-size: 17px; padding: 12px 18px; background: #24365f; color: var(--cream); }
.panel .row .primary { background: var(--gold); color: var(--navy); }
.msg { color: var(--gold2); font-size: 15px; min-height: 1.2em; margin: 8px 0 0; white-space: pre-line; }