:root {
  --charcoal:#111116;
  --charcoal-2:#19191f;
  --vermilion:#e72d32;
  --vermilion-dark:#8f171d;
  --lantern:#f6e8c6;
  --gold:#d6a044;
  --ocean:#123f5c;
  --ink:#221712;
  --muted:#c9bda7;
  --line:rgba(246,232,198,.22);
  --panel:rgba(17,17,22,.9);
  --shadow:0 22px 70px rgba(0,0,0,.54);
  color-scheme:dark;
}

html,body { background:#08080b; }
body { color:#fff8e9; }
.stage { background:radial-gradient(circle at 50% 0,#3b1719 0,#131318 52%,#08080b 100%); }
.phone { background:var(--charcoal); border-color:rgba(246,232,198,.16); box-shadow:var(--shadow); }
.world-art { opacity:1!important; background:none center/cover no-repeat!important; transition:opacity .35s ease,background-image .35s ease!important; }
.phone[data-scene="entrance"] .world-art { background-image:image-set(url("assets/scene-entrance-v2.bccb4fc176.avif") type("image/avif"), url("assets/scene-entrance-v2.4334eba4ab.webp") type("image/webp"))!important; }
.phone[data-scene="wall"] .world-art { background-image:image-set(url("assets/scene-sake-wall-v2.83eddb00f0.avif") type("image/avif"), url("assets/scene-sake-wall-v2.dda2bec392.webp") type("image/webp"))!important; }
.phone[data-scene="counter"] .world-art { background-image:image-set(url("assets/scene-counter-v2.3733995c61.avif") type("image/avif"), url("assets/scene-counter-v2.239320baa5.webp") type("image/webp"))!important; }
.world-art::after { background:linear-gradient(180deg,rgba(4,4,7,.04),rgba(7,7,10,.28) 42%,rgba(7,7,10,.8) 100%)!important; }
.screen { position:relative; z-index:1; }
.screen::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg,rgba(8,8,11,.02),rgba(8,8,11,.2) 40%,rgba(8,8,11,.82) 100%); }
.topbar { position:sticky; top:0; z-index:10; margin:-6px -2px 0; padding:6px 2px 8px; }
.topbar::before { content:""; position:absolute; inset:-20px -22px 0; z-index:-1; background:linear-gradient(180deg,rgba(10,10,14,.82),rgba(10,10,14,0)); pointer-events:none; }
.round-button,.pill-button,.secondary { background:rgba(13,13,18,.78); border-color:var(--line); color:var(--lantern); backdrop-filter:blur(14px); }
.wordmark small { color:#f1c66e; }
.eyebrow { color:#f0c26a; }

/* Entrance */
.welcome-screen { display:flex; flex-direction:column; justify-content:space-between; text-align:center; }
.welcome-screen[hidden] { display:none; }
.welcome-language { align-self:flex-start; }
.entrance-plaque { width:168px; min-height:102px; display:grid; place-items:center; margin:34px auto 0; padding:12px; color:var(--lantern); border:3px solid #c98d31; border-radius:8px; background:linear-gradient(140deg,#3b2418,#160f0c); box-shadow:0 10px 28px rgba(0,0,0,.42),inset 0 0 0 3px rgba(255,220,145,.14); font:800 42px/1 Georgia,"Songti TC",serif; letter-spacing:.12em; text-shadow:0 2px 0 #000; }
.welcome-copy { margin:0 -2px; padding:26px 20px 20px; border:1px solid rgba(246,232,198,.2); border-radius:28px; background:linear-gradient(180deg,rgba(10,10,14,.6),rgba(10,10,14,.94)); backdrop-filter:blur(12px); box-shadow:0 18px 46px rgba(0,0,0,.4); }
.welcome-mark { width:68px; height:68px; object-fit:contain; margin:0 auto 8px; filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.welcome-copy h1 { margin-bottom:10px; font-size:clamp(34px,9vw,46px); }
.welcome-copy .lede { margin:0 auto 18px; color:#e5d8bf; }
.enter-button { width:100%; min-height:58px; border:1px solid #ff7778; border-radius:18px; color:#fffaf0; background:linear-gradient(145deg,#f03b3f,#9f1b21); box-shadow:0 12px 34px rgba(195,32,38,.36); font-weight:800; cursor:pointer; }
.door-hint { display:block; margin-top:10px; color:#a99e8d; font-size:10px; letter-spacing:.08em; }

/* Route and quiz */
.route-intro { min-height:240px; display:flex; align-items:flex-end; position:relative; margin:6px 0 12px; padding:24px 145px 18px 4px; }
.route-intro::after { content:""; position:absolute; inset:44px -22px -8px; z-index:-1; background:linear-gradient(180deg,transparent,rgba(10,10,14,.82)); }
.route-intro h1 { font-size:34px; margin-bottom:7px; }
.route-intro p { margin:0; color:#e3d6bf; font-size:13px; line-height:1.55; }
.oni-host { position:absolute; right:-14px; bottom:-6px; width:164px; max-height:254px; object-fit:contain; object-position:bottom; filter:drop-shadow(0 16px 24px rgba(0,0,0,.45)); }
.route-intro.image-missing,.result-hero-v2.image-missing { padding-right:18px; }
.route-card { min-height:76px; border-color:rgba(246,232,198,.22); background:linear-gradient(110deg,rgba(24,24,30,.94),rgba(15,15,20,.94)); box-shadow:0 10px 30px rgba(0,0,0,.28); }
.route-card:hover,.route-card:focus-visible { border-color:rgba(240,194,106,.68); }
.route-icon { color:#fff7e6; background:radial-gradient(circle at 35% 20%,#f24a4d,#8f171d 72%); }
.quiz-panel { margin-top:14px; padding:18px; border:1px solid var(--line); border-radius:28px; background:rgba(12,12,16,.9); backdrop-filter:blur(14px); box-shadow:0 18px 48px rgba(0,0,0,.34); }
.progress-wrap { margin:10px 2px 22px; }
.progress span { background:linear-gradient(90deg,var(--vermilion),#f0c26a); }
.question-art { color:#f4c66b; background:rgba(231,45,50,.14); border-color:rgba(231,45,50,.35); }
.option { background:rgba(28,28,34,.94); border-color:rgba(246,232,198,.18); }
.option[aria-pressed="true"] { border-color:#ff8484; background:linear-gradient(105deg,rgba(178,30,35,.96),rgba(91,20,25,.96)); box-shadow:0 10px 30px rgba(132,20,25,.28); }
.primary { border-color:#ff7778; background:linear-gradient(145deg,#e83539,#971a20); }
.legal { color:#a99e8d; }
.prototype-badge { color:#e2bd73; }

/* Results */
.result-hero-v2 { min-height:230px; display:flex; align-items:flex-end; position:relative; margin:2px -2px 14px; padding:28px 145px 18px 18px; border:1px solid rgba(246,232,198,.2); border-radius:28px; overflow:hidden; background:linear-gradient(150deg,rgba(13,13,18,.52),rgba(13,13,18,.94)); box-shadow:0 18px 52px rgba(0,0,0,.38); }
.result-hero-v2 .oni-host { width:158px; right:-10px; bottom:-10px; }
.result-hero-v2 h2 { font-size:29px; margin-bottom:8px; }
.result-hero-v2 p { margin:0; color:#d7cbb5; font-size:12px; line-height:1.55; }
.result-list { gap:13px; }
.result-card { border-color:rgba(246,232,198,.2); background:rgba(15,15,20,.93); box-shadow:0 16px 42px rgba(0,0,0,.3); }
.result-card[data-role="best"] { border-color:rgba(239,194,106,.6); }
.result-card[data-role="recommended"] { border-color:rgba(238,78,82,.55); }
.result-card[data-role="upgrade"] { border-color:rgba(114,160,184,.5); }
.role-strip { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.025); }
.role-label { display:flex; align-items:center; gap:8px; color:#f4d18a; font-size:12px; font-weight:800; letter-spacing:.04em; }
.role-note { color:#9f9584; font-size:10px; }
.result-main { grid-template-columns:1fr; gap:14px; padding:16px; }
.result-copy { min-width:0; }
.result-price { display:flex; align-items:baseline; gap:6px; margin-top:10px; color:#fff4da; font:800 24px/1 Georgia,serif; }
.result-price small { color:#a99e8d; font:10px/1 -apple-system,sans-serif; }
.decision-reason { margin:0 14px 13px; padding:11px 12px; border-radius:14px; color:#e6d7bb; background:rgba(214,160,68,.08); font-size:12px; line-height:1.55; }
.detail-link { color:#efc66f; }
.detail-hero { background:linear-gradient(145deg,rgba(33,33,40,.96),rgba(14,14,18,.96)); border-color:rgba(238,78,82,.35); }
.panel { background:rgba(17,17,22,.92); }
.price { background:#e5b65f; }
.match { display:none!important; }

@keyframes doorOpen { from { opacity:0; transform:scale(.98) translateY(10px); } to { opacity:1; transform:none; } }
.welcome-copy,.route-card,.result-card { animation:doorOpen .38s ease both; }
.route-card:nth-child(2),.result-card:nth-child(2) { animation-delay:.06s; }
.route-card:nth-child(3),.result-card:nth-child(3) { animation-delay:.12s; }

/* Production interaction layer */
html { -webkit-text-size-adjust:100%; }
body { min-height:100svh; }
.stage { position:relative; overflow:hidden; }
.stage::before { content:""; position:fixed; inset:-30%; pointer-events:none; background:conic-gradient(from 210deg at 50% 20%,transparent,rgba(231,45,50,.09),transparent 35%); animation:ambientSweep 18s linear infinite; }
.phone { box-shadow:0 34px 110px rgba(0,0,0,.68),0 0 0 1px rgba(255,255,255,.025) inset; }
.screen[data-transition="back"] { animation-name:screenBack; }
button { touch-action:manipulation; }
.round-button,.pill-button,.primary,.secondary,.enter-button,.underage-button,.detail-link { min-height:44px; transition:transform .18s ease,border-color .18s ease,background .18s ease,opacity .18s ease,box-shadow .18s ease; }
.round-button:hover,.pill-button:hover,.secondary:hover,.detail-link:hover { border-color:rgba(246,205,124,.5); background:rgba(31,31,38,.9); }
.round-button:active,.pill-button:active,.primary:active,.secondary:active,.enter-button:active,.underage-button:active,.detail-link:active,.route-card:active,.option:active { transform:scale(.975); }
.primary:not(:disabled):hover,.enter-button:hover { filter:saturate(1.08) brightness(1.06); box-shadow:0 16px 38px rgba(195,32,38,.42); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* Full-screen sliding-door welcome */
.welcome-screen { padding:calc(16px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); isolation:isolate; overflow:hidden; }
.welcome-screen::before { z-index:-2; background:linear-gradient(180deg,rgba(4,5,8,.08),rgba(4,5,8,.04) 37%,rgba(4,5,8,.74) 73%,rgba(4,5,8,.94)); }
.welcome-utility { display:flex; justify-content:space-between; align-items:center; position:relative; z-index:10; transition:opacity .22s ease,transform .22s ease; }
.welcome-language,.sound-toggle { min-width:72px; background:rgba(8,9,13,.72); border-color:rgba(255,238,202,.3); box-shadow:0 8px 26px rgba(0,0,0,.24); }
.sound-toggle { display:inline-flex; justify-content:center; align-items:center; gap:7px; }
.sound-toggle span:first-child { color:#f0c26a; font-size:10px; }
.door-portal { position:absolute; inset:0; z-index:5; overflow:hidden; pointer-events:none; background:rgba(7,6,7,.14); }
.door-glow { position:absolute; z-index:0; inset:7% 25% 17%; opacity:0; transform:scale(.45); background:radial-gradient(ellipse at 50% 58%,rgba(255,213,113,.92),rgba(242,104,51,.4) 42%,transparent 72%); filter:blur(18px); }
.door-panel { position:absolute; z-index:2; top:0; bottom:0; width:50.5%; overflow:hidden; display:grid; place-items:center; background-color:#24130e; background-image:linear-gradient(90deg,rgba(0,0,0,.36),transparent 12%,rgba(255,191,99,.08) 38%,transparent 68%,rgba(0,0,0,.28)),repeating-linear-gradient(90deg,transparent 0 28px,rgba(0,0,0,.22) 29px 31px),linear-gradient(180deg,#3c2117,#1b100d 62%,#0c0909); border:1px solid rgba(238,172,80,.2); box-shadow:inset 0 0 55px rgba(0,0,0,.62); will-change:transform; }
.door-panel::before { content:""; position:absolute; inset:8% 10%; border:1px solid rgba(211,144,55,.34); box-shadow:inset 0 0 0 7px rgba(0,0,0,.2); }
.door-panel::after { content:""; position:absolute; top:0; bottom:0; width:4px; background:linear-gradient(180deg,#6d3a1d,#dda54b 24%,#56301d 76%,#b17834); box-shadow:0 0 20px rgba(255,185,73,.18); }
.door-left { left:0; transform-origin:left center; }
.door-left::after { right:0; }
.door-right { right:0; transform-origin:right center; }
.door-right::after { left:0; }
.door-crest { width:58px; height:72px; display:grid; place-items:center; color:#f6e8c6; border:1px solid rgba(240,194,106,.55); background:linear-gradient(145deg,#b52028,#721117); box-shadow:0 12px 28px rgba(0,0,0,.35),inset 0 0 0 3px rgba(255,232,188,.08); font:800 30px/1 Georgia,"Songti TC",serif; text-shadow:0 2px 0 rgba(0,0,0,.5); }
.door-left .door-crest { transform:translateX(30px); border-radius:28px 5px 5px 28px; }
.door-right .door-crest { transform:translateX(-30px); border-radius:5px 28px 28px 5px; }
.door-panel i { position:absolute; top:50%; width:11px; height:54px; border-radius:999px; background:linear-gradient(90deg,#4c2b18,#e0ab4c,#472715); box-shadow:0 4px 14px rgba(0,0,0,.48); }
.door-left i { right:17px; }
.door-right i { left:17px; }
.door-interior { position:absolute; z-index:1; inset:19% 9% auto; height:46%; display:flex; align-items:flex-end; justify-content:center; opacity:0; }
.door-interior img { position:absolute; right:4%; bottom:-8%; width:48%; max-height:100%; object-fit:contain; filter:drop-shadow(0 18px 25px rgba(0,0,0,.5)); transform:translateX(36px) rotate(2deg); }
.door-interior span { position:absolute; left:2%; bottom:19%; width:58%; padding:12px 14px; color:#27150f; border-radius:18px 18px 4px 18px; background:#f7e7bf; box-shadow:0 14px 36px rgba(0,0,0,.4); font:700 13px/1.45 Georgia,"Songti TC",serif; transform:translateY(12px); }
.entrance-plaque { position:absolute; z-index:8; top:86px; left:50%; width:132px; min-height:76px; margin:0; transform:translateX(-50%); font-size:32px; transition:opacity .22s ease,transform .22s ease; }
.entrance-plaque small { display:block; margin-top:5px; color:#d7aa57; font:700 7px/1 -apple-system,sans-serif; letter-spacing:.22em; }
.welcome-copy { position:relative; z-index:9; margin-top:auto; padding:22px 18px 17px; border-color:rgba(255,236,197,.28); background:linear-gradient(180deg,rgba(12,12,16,.76),rgba(10,10,14,.96)); box-shadow:0 22px 54px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.04); transition:opacity .24s ease,transform .3s ease; }
.welcome-copy::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 38%); }
.welcome-mark { width:58px; height:58px; }
.welcome-copy h1 { max-width:330px; margin-left:auto; margin-right:auto; font-size:clamp(30px,8.3vw,40px); }
.welcome-copy .lede { margin-bottom:16px; }
.enter-button { position:relative; overflow:hidden; letter-spacing:.01em; }
.enter-button::after { content:""; position:absolute; top:-120%; left:-36%; width:24%; height:330%; transform:rotate(24deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); animation:buttonShine 4.2s ease-in-out infinite; }
.enter-button:disabled { opacity:.68; cursor:wait; }
.underage-button { width:100%; margin-top:7px; border:0; color:#b9ad99; background:transparent; cursor:pointer; font-size:12px; }
.underage-button:hover { color:#f1dfbe; }
.door-hint { margin-top:5px; }
.age-message { position:absolute; z-index:12; left:18px; right:18px; bottom:calc(20px + env(safe-area-inset-bottom)); padding:28px 22px 22px; border:1px solid rgba(246,232,198,.28); border-radius:28px; text-align:center; background:rgba(12,12,16,.96); backdrop-filter:blur(18px); box-shadow:0 24px 70px rgba(0,0,0,.58); animation:doorOpen .25s ease both; }
.age-message[hidden] { display:none; }
.age-message>span { display:grid; place-items:center; width:66px; height:66px; margin:0 auto 16px; border-radius:50%; color:#f4cc7c; border:1px solid rgba(240,194,106,.45); background:rgba(231,45,50,.12); font:800 20px/1 Georgia,serif; }
.age-message strong { display:block; margin-bottom:8px; font:700 22px/1.25 Georgia,"Songti TC",serif; }
.age-message p { margin:0 auto 18px; color:#c9bda7; font-size:13px; line-height:1.65; }
.age-message .secondary { width:100%; }
.welcome-screen.is-opening .welcome-copy,.welcome-screen.is-opening .welcome-utility,.welcome-screen.is-opening .entrance-plaque { opacity:0; transform:translateY(16px); pointer-events:none; }
.welcome-screen.is-opening .welcome-copy { animation:none; }
.welcome-screen.is-opening .entrance-plaque { transform:translate(-50%,12px); }
.welcome-screen.is-opening .door-left { animation:slideDoorLeft .7s .15s cubic-bezier(.7,0,.24,1) both; }
.welcome-screen.is-opening .door-right { animation:slideDoorRight .7s .15s cubic-bezier(.7,0,.24,1) both; }
.welcome-screen.is-opening .door-glow { animation:warmReveal 1.4s .15s ease both; }
.welcome-screen.is-opening .door-interior { animation:hostMoment 1s .6s ease both; }
.welcome-screen.is-opening .door-interior img { animation:hostPeekMoment 1s .6s cubic-bezier(.2,.78,.25,1) both; }
.welcome-screen.is-opening .door-interior span { animation:bubbleIn .34s .78s ease both; }
.welcome-screen.is-opening .door-portal { animation:introFade .12s 1.6s ease both; }

/* Modern cards, motion and hierarchy */
.conversation-intro { min-height:calc(100% - 54px); position:relative; display:flex; align-items:flex-end; margin:8px 0 0; padding:22px 8px 22px; overflow:hidden; }
.conversation-intro[hidden],.quiz-panel[hidden] { display:none; }
.conversation-intro::before { content:""; position:absolute; inset:12px 0 0; border:1px solid rgba(246,232,198,.2); border-radius:30px; background:linear-gradient(180deg,rgba(8,8,12,.12),rgba(8,8,12,.3) 42%,rgba(8,8,12,.96) 78%); box-shadow:0 24px 64px rgba(0,0,0,.42); }
.conversation-host { position:absolute; z-index:1; top:22px; right:-12px; width:76%; height:55%; object-fit:contain; object-position:right bottom; filter:drop-shadow(0 20px 32px rgba(0,0,0,.55)); animation:hostConversationIn .55s cubic-bezier(.2,.8,.25,1) both; }
.conversation-bubble { position:relative; z-index:2; width:100%; padding:21px 19px 18px; border:1px solid rgba(246,232,198,.28); border-radius:24px 24px 24px 8px; background:linear-gradient(145deg,rgba(24,24,30,.97),rgba(10,10,14,.98)); box-shadow:0 22px 48px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.045); animation:bubbleIn .42s .16s ease both; }
.conversation-bubble::before { content:""; position:absolute; top:-12px; right:72px; width:22px; height:22px; transform:rotate(45deg); border-left:1px solid rgba(246,232,198,.28); border-top:1px solid rgba(246,232,198,.28); background:#17171d; }
.conversation-bubble h2 { margin-bottom:9px; font-size:27px; }
.conversation-bubble p { margin:0; color:#d5c7ae; font-size:14px; line-height:1.7; }
.conversation-start { width:100%; margin-top:18px; }
.conversation-intro.image-missing { align-items:center; }
.conversation-intro.image-missing .conversation-host { display:none; }
.question-dialogue { display:grid; grid-template-columns:58px 1fr; align-items:start; gap:11px; margin:0 0 18px; }
.question-host { position:relative; width:58px; min-height:74px; }
.question-host img { width:54px; height:54px; padding:4px; object-fit:contain; border-radius:50%; border:1px solid rgba(246,232,198,.28); background:linear-gradient(145deg,#b52028,#721117); box-shadow:0 10px 24px rgba(0,0,0,.32); }
.question-host .question-art { position:absolute; right:-2px; bottom:0; width:30px; height:30px; margin:0; border-radius:10px; font-size:14px; background:#19191f; box-shadow:0 7px 18px rgba(0,0,0,.34); }
.speech-bubble { position:relative; padding:15px 16px; border:1px solid rgba(246,232,198,.22); border-radius:6px 20px 20px 20px; background:linear-gradient(145deg,rgba(35,35,42,.97),rgba(19,19,24,.97)); box-shadow:0 12px 34px rgba(0,0,0,.28); }
.speech-bubble::before { content:""; position:absolute; left:-7px; top:18px; width:13px; height:13px; transform:rotate(45deg); border-left:1px solid rgba(246,232,198,.22); border-bottom:1px solid rgba(246,232,198,.22); background:#222229; }
.question-copy { margin:0; }
.question-copy .eyebrow { margin-bottom:7px; font-size:9px; }
.question-copy h2 { margin-bottom:7px; font-size:23px; line-height:1.2; }
.question-copy p { margin:0; color:#c9bda7; font-size:12px; line-height:1.55; }
.route-card { position:relative; overflow:hidden; box-shadow:0 12px 36px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.03); }
.route-card::after { content:""; position:absolute; inset:0; opacity:0; pointer-events:none; background:linear-gradient(110deg,transparent,rgba(255,255,255,.055),transparent); transform:translateX(-60%); transition:opacity .2s ease,transform .5s ease; }
.route-card:hover::after,.route-card:focus-visible::after { opacity:1; transform:translateX(60%); }
.route-card strong { font-size:14px; }
.route-card .chevron { transition:transform .18s ease; }
.route-card:hover .chevron,.route-card:focus-visible .chevron { transform:translateX(3px); }
.quiz-panel { box-shadow:0 24px 64px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.035); }
.quiz-panel[data-direction="forward"] .question-dialogue,.quiz-panel[data-direction="forward"] .option-list { animation:questionForward .34s cubic-bezier(.2,.75,.25,1) both; }
.quiz-panel[data-direction="back"] .question-dialogue,.quiz-panel[data-direction="back"] .option-list { animation:questionBack .34s cubic-bezier(.2,.75,.25,1) both; }
.option { position:relative; padding-right:45px; box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.option-check { position:absolute; right:14px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:#5b171b; background:#f4d18a; opacity:0; transform:scale(.4) rotate(-18deg); transition:opacity .18s ease,transform .24s cubic-bezier(.2,1.3,.3,1); }
.option[aria-pressed="true"] .option-check { opacity:1; transform:scale(1) rotate(-7deg); }
.option.is-confirmed { animation:confirmPulse .28s ease; }
.progress { height:5px; }
.progress span { box-shadow:0 0 16px rgba(240,194,106,.4); transition:width .42s cubic-bezier(.2,.75,.25,1); }
.result-card { transform-origin:center top; }
.result-card[data-role="best"] { box-shadow:0 20px 54px rgba(0,0,0,.38),0 0 0 1px rgba(239,194,106,.08) inset; }
.result-card[data-role="best"] .role-strip { background:linear-gradient(90deg,rgba(214,160,68,.14),rgba(255,255,255,.015)); }
.bottle { width:100%; height:170px; margin:0 auto; transform:none; filter:drop-shadow(0 14px 18px rgba(0,0,0,.32)); }
.bottle::before { width:68px; height:146px; }
.bottle::after { top:2px; width:30px; height:36px; }
.bottle .bottle-label { top:67px; width:60px; min-height:66px; font-size:13px; }
.bottle.has-photo { overflow:hidden; align-self:start; border:1px solid rgba(240,194,106,.22); border-radius:18px; background:radial-gradient(circle at 50% 34%,#fffdf5 0,#f3ead5 64%,#d9c39a 100%); isolation:isolate; }
.bottle.has-photo::before,.bottle.has-photo::after,.bottle.has-photo .bottle-label { display:none; }
.bottle.has-photo img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; mix-blend-mode:multiply; }
.detail-hero.has-bottle { display:grid; grid-template-columns:1fr; gap:18px; min-height:0; padding-right:16px; }
.detail-hero-copy { position:relative; z-index:1; align-self:center; min-width:0; }
.detail-hero.has-bottle h2 { max-width:none; }
.detail-bottle { position:relative; z-index:2; align-self:stretch; width:100%; min-height:235px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(246,232,198,.22); border-radius:22px; background:radial-gradient(circle at 50% 34%,#fffdf5 0,#f3ead5 66%,#d6bd8f 100%); box-shadow:0 20px 34px rgba(0,0,0,.3); isolation:isolate; }
.detail-bottle img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; mix-blend-mode:multiply; }
.detail-bottle:not(.has-photo)::before { content:""; width:88px; height:205px; align-self:end; border-radius:15px 15px 22px 22px; background:linear-gradient(90deg,#211814,#4a342a 45%,#17110f); border:1px solid rgba(255,255,255,.16); }
.detail-bottle:not(.has-photo)::after { content:""; position:absolute; top:14px; width:36px; height:47px; border-radius:6px 6px 3px 3px; background:#30221c; border:1px solid rgba(255,255,255,.12); }
.detail-bottle:not(.has-photo) .bottle-label { position:absolute; top:91px; width:78px; min-height:82px; display:grid; place-items:center; padding:7px; border-radius:3px; background:var(--paper); color:#312018; font:700 15px/1.15 Georgia,"Songti TC",serif; text-align:center; }
.detail-bottle.has-photo .bottle-label { display:none; }
.detail-hero,.panel,.spec { box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
.meter span { transition:width .65s cubic-bezier(.2,.75,.25,1); }

@keyframes ambientSweep { to { transform:rotate(360deg); } }
@keyframes screenBack { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } }
@keyframes slideDoorLeft { to { transform:translateX(-103%); } }
@keyframes slideDoorRight { to { transform:translateX(103%); } }
@keyframes warmReveal { 0% { opacity:0; transform:scale(.45); } 45%,100% { opacity:1; transform:scale(1.3); } }
@keyframes hostReveal { from { opacity:0; } to { opacity:1; } }
@keyframes hostPeek { from { transform:translateX(50px) rotate(4deg); } to { transform:translateX(0) rotate(0); } }
@keyframes hostMoment { 0% { opacity:0; } 18%,86% { opacity:1; } 100% { opacity:0; } }
@keyframes hostPeekMoment { 0% { transform:translateX(50px) rotate(4deg); } 30%,88% { transform:translateX(0) rotate(0); } 100% { transform:translateX(8px) rotate(1deg); } }
@keyframes introFade { to { opacity:0; } }
@keyframes bubbleIn { from { opacity:0; transform:translateY(12px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes buttonShine { 0%,72% { left:-36%; } 92%,100% { left:118%; } }
@keyframes questionForward { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:none; } }
@keyframes questionBack { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:none; } }
@keyframes confirmPulse { 50% { transform:scale(.985); } }
@keyframes hostConversationIn { from { opacity:0; transform:translateX(26px) scale(.98); } to { opacity:1; transform:none; } }

@media (max-width:360px) {
  .welcome-copy { padding:18px 15px 14px; }
  .welcome-copy h1 { font-size:29px; }
  .welcome-copy .lede { font-size:12px; line-height:1.55; }
  .entrance-plaque { top:76px; }
  .conversation-host { width:70%; height:50%; }
  .conversation-bubble { padding:18px 16px 16px; }
  .conversation-bubble h2 { font-size:24px; }
  .question-dialogue { grid-template-columns:50px 1fr; gap:9px; }
  .question-host { width:50px; }
  .question-host img { width:47px; height:47px; }
  .question-copy h2 { font-size:21px; }
  .route-intro { padding-right:118px; }
  .oni-host { width:142px; }
  .result-hero-v2 { padding-right:124px; }
  .result-hero-v2 .oni-host { width:140px; }
}
@media (prefers-reduced-motion:reduce) {
  .world-art,.welcome-copy,.route-card,.result-card,.stage::before,.enter-button::after,.quiz-panel *,.conversation-intro * { animation:none!important; transition:none!important; }
  .welcome-screen.is-opening .door-panel { display:none; }
  .welcome-screen.is-opening .door-glow,.welcome-screen.is-opening .door-interior { opacity:0; transform:none; animation:none!important; }
  .welcome-screen.is-opening .door-portal { opacity:0; animation:none!important; }
}

/* Responsive modern web-app shell */
.route-copy { min-width:0; }
.route-copy em { display:inline-flex; margin-top:8px; padding:4px 8px; border:1px solid rgba(240,194,106,.2); border-radius:999px; color:#d8b871; background:rgba(214,160,68,.07); font-size:9px; font-style:normal; font-weight:700; letter-spacing:.04em; }
.topbar { backdrop-filter:saturate(1.1) blur(3px); }
.topbar { display:grid; grid-template-columns:minmax(76px,1fr) auto minmax(76px,1fr); }
.topbar > :first-child { justify-self:start; }
.topbar > :last-child { justify-self:end; }
.topbar-nav-group { display:flex; align-items:center; gap:6px; }
.replay-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; border-color:rgba(240,194,106,.34); color:#f0c26a; white-space:nowrap; }
.replay-button span { font-size:15px; line-height:1; }
.replay-button b { font-size:10px; letter-spacing:.06em; }
.home-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:76px; padding:8px 13px; font-size:11px; font-weight:800; letter-spacing:.1em; }
.home-button span { color:var(--gold); font-size:15px; line-height:1; }
.home-button b { font:inherit; }
.screen { scroll-padding-top:72px; }
#homeScreen { animation-duration:.28s; }
.option,.route-card,.result-card,.panel,.spec,.conversation-bubble,.speech-bubble { -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }

@media (max-width:519px) {
  .topbar-nav-group .replay-button { width:44px; padding-inline:0; }
  .topbar-nav-group .replay-button b { display:none; }
  .screen { padding-left:17px; padding-right:17px; }
  .route-intro { min-height:226px; }
  .conversation-intro { min-height:calc(100% - 48px); padding-bottom:12px; }
  .conversation-host { top:12px; width:68%; height:46%; }
  .conversation-bubble { padding:18px 17px 16px; }
  .quiz-panel { margin-top:8px; padding:15px; border-radius:24px; }
  .progress-wrap { margin:5px 2px 18px; }
  .actions { position:sticky; bottom:calc(-15px - env(safe-area-inset-bottom)); z-index:5; margin:20px -15px -15px; padding:12px 15px calc(15px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,transparent,rgba(12,12,16,.98) 24%); }
  .result-hero-v2 { min-height:216px; }
}

@media (min-width:520px) and (max-width:759px) {
  .phone { width:min(680px,calc(100vw - 32px)); }
  .welcome-copy { width:min(470px,100%); margin-left:auto; margin-right:auto; }
  .route-intro { padding-right:220px; }
  .route-intro .oni-host { width:220px; }
  .bottle { height:205px; }
  .detail-bottle { min-height:250px; }
}

@media (min-width:760px) {
  .stage { padding:24px; }
  .phone { width:min(1180px,calc(100vw - 48px)); height:min(900px,calc(100svh - 48px)); min-height:680px; border-radius:32px; }
  .screen { padding:calc(22px + env(safe-area-inset-top)) 30px calc(30px + env(safe-area-inset-bottom)); }
  .world-art::after { background:linear-gradient(90deg,rgba(7,7,10,.18),rgba(7,7,10,.32) 48%,rgba(7,7,10,.7) 100%),linear-gradient(180deg,rgba(4,4,7,.02),rgba(7,7,10,.32) 58%,rgba(7,7,10,.78) 100%)!important; }
  .topbar { min-height:52px; margin:-7px -4px 0; padding:7px 4px 12px; }
  .wordmark { font-size:15px; }
  .wordmark small { font-size:8px; }
  .welcome-copy { width:min(480px,100%); margin:auto auto 0; }
  .welcome-screen { padding-left:30px; padding-right:30px; }
  .door-interior { inset:12% 14% auto; height:64%; }
  .door-interior img { right:14%; width:30%; }
  .door-interior span { left:22%; bottom:21%; width:34%; padding:16px 18px; font-size:15px; }
  .entrance-plaque { top:92px; }

  #homeScreen { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(350px,.85fr); grid-template-rows:auto minmax(0,1fr) auto; column-gap:34px; }
  #homeScreen[hidden] { display:none; }
  #homeScreen .topbar { grid-column:1/-1; }
  #homeScreen .route-intro { grid-column:1; min-height:0; height:100%; margin:0; padding:60px min(25vw,300px) 48px 16px; align-items:center; }
  #homeScreen .route-intro::after { inset:8% -20px 0 -30px; background:linear-gradient(90deg,rgba(10,10,14,.8),rgba(10,10,14,.22) 72%,transparent); }
  #homeScreen .route-intro h1 { max-width:500px; font-size:clamp(46px,4.5vw,60px); line-height:1.04; }
  #homeScreen .route-intro p { max-width:410px; font-size:15px; }
  #homeScreen .route-intro .oni-host { right:-8px; bottom:5%; width:min(31vw,360px); max-height:70%; }
  #homeScreen .route-list { grid-column:2; align-self:center; gap:14px; }
  #homeScreen .route-card { min-height:112px; grid-template-columns:60px 1fr 26px; padding:19px; border-radius:24px; }
  #homeScreen .route-icon { width:58px; height:58px; border-radius:18px; font-size:24px; }
  #homeScreen .route-card strong { font-size:16px; }
  #homeScreen .route-card small { font-size:12px; }
  #homeScreen .legal { grid-column:1/-1; margin-top:10px; }

  .conversation-intro { min-height:calc(100% - 64px); display:grid; grid-template-columns:minmax(320px,1.05fr) minmax(330px,.95fr); align-items:center; gap:26px; padding:34px 46px; }
  .conversation-intro::before { inset:10px 0 0; background:linear-gradient(100deg,rgba(8,8,12,.12),rgba(8,8,12,.34) 46%,rgba(8,8,12,.9)); }
  .conversation-host { position:relative; top:auto; right:auto; grid-column:1; width:100%; height:min(64vh,590px); max-height:620px; object-position:center bottom; }
  .conversation-bubble { grid-column:2; width:100%; padding:30px 28px 26px; border-radius:30px 30px 30px 10px; }
  .conversation-bubble::before { top:72px; right:auto; left:-13px; }
  .conversation-bubble h2 { font-size:clamp(32px,3.2vw,44px); }
  .conversation-bubble p { font-size:16px; }
  .conversation-start { min-height:58px; font-size:15px; }

  .quiz-panel { width:min(960px,100%); margin:22px auto 0; padding:26px 28px 28px; border-radius:30px; }
  .progress-wrap { margin:4px 2px 24px; }
  .question-dialogue { grid-template-columns:74px 1fr; gap:17px; width:min(760px,100%); margin:0 auto 24px; }
  .question-host { width:74px; min-height:88px; }
  .question-host img { width:68px; height:68px; }
  .question-host .question-art { width:34px; height:34px; font-size:15px; }
  .question-copy { padding:20px 22px; }
  .question-copy h2 { font-size:30px; }
  .question-copy p { font-size:13px; }
  .option-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .option { min-height:70px; }
  .actions { width:min(520px,100%); margin:26px 0 0 auto; }

  .result-hero-v2 { width:min(100%,920px); min-height:250px; margin:6px auto 22px; padding:34px 230px 28px 32px; }
  .result-hero-v2 .oni-host { width:220px; }
  .result-hero-v2 h2 { max-width:520px; font-size:38px; }
  .result-list { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:16px; }
  .result-card { display:flex; min-width:0; flex-direction:column; }
  .result-card[data-role="best"] { transform:translateY(-5px); }
  .role-strip { min-height:54px; align-items:flex-start; flex-direction:column; gap:4px; }
  .result-main { grid-template-columns:1fr; gap:16px; padding:18px; }
  .bottle { width:100%; height:225px; transform:none; }
  .result-card h3 { font-size:20px; }
  .decision-reason { flex:1; }
  .detail-link { margin-top:auto; }
  #restartButton { display:block; width:min(340px,100%)!important; margin:22px auto 0!important; }
  #resultsScreen>.legal { max-width:720px; margin-left:auto; margin-right:auto; }

  #detailScreen .topbar,#detailContent,#detailRestart { width:min(880px,100%); margin-left:auto; margin-right:auto; }
  .detail-hero { padding:34px 30px; }
  .detail-hero.has-bottle { grid-template-columns:minmax(0,1fr) 240px; gap:28px; min-height:370px; padding-right:30px; }
  .detail-bottle { min-height:300px; }
  .detail-hero h2 { font-size:42px; }
  .spec-grid { grid-template-columns:repeat(4,1fr); }
}