:root{--bg:#0b0d10;--fg:#e8edf2;--muted:#9aa6b2;--glass:rgba(20,24,30,.55);--line:rgba(255,255,255,.09);--danger:#ff3b3b;--accent:#f2d27a;}
*{box-sizing:border-box;}html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;}#app{height:100%;}
.scene{position:relative;height:100%;width:100%;overflow:hidden;}
.bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);} .bg.dim{filter:brightness(.35) saturate(.9);} .bg.level{background:radial-gradient(1000px 600px at 50% 25%, rgba(242,210,122,.18), transparent 60%), linear-gradient(180deg,#07090c,#0b0d10 60%, #050608);} .bg.level2{background:radial-gradient(900px 520px at 50% 30%, rgba(255,255,255,.08), transparent 60%), linear-gradient(180deg,#07090c,#090b0f 60%, #050608);}
.hud.top{position:absolute;top:0;left:0;right:0;padding:14px 14px env(safe-area-inset-top);display:flex;align-items:center;justify-content:space-between;pointer-events:none;}
.title{letter-spacing:.14em;text-transform:uppercase;font-weight:700;font-size:18px;opacity:.92;pointer-events:auto;user-select:none;} .title.small{font-size:14px;opacity:.85;}
.meta{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;} .pill{display:inline-block;padding:2px 8px;border:1px solid var(--line);border-radius:999px;margin-left:6px;color:var(--accent);}
.scene-entrance .bg{animation:breath 8s ease-in-out infinite;} @keyframes breath{0%{transform:scale(1.02) translateY(0px);}50%{transform:scale(1.03) translateY(1px);}100%{transform:scale(1.02) translateY(0px);}}
.flowers-sway{position:absolute;left:-10%;right:-10%;bottom:-10%;height:42%;background:radial-gradient(800px 240px at 50% 80%, rgba(255,255,255,.10), transparent 65%);filter:blur(10px);opacity:.22;animation:sway 6.5s ease-in-out infinite;pointer-events:none;} @keyframes sway{0%{transform:translateX(0px) translateY(0px);}50%{transform:translateX(3px) translateY(1px);}100%{transform:translateX(0px) translateY(0px);}}
.hotspot-door{position:absolute;left:34%;top:34%;width:32%;height:44%;border-radius:12px;background:rgba(255,255,255,0);-webkit-tap-highlight-color:transparent;}
.center-card{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px 16px;} .center-card.wide{align-items:flex-start;padding-top:90px;}
.card{width:min(520px,100%);padding:18px 16px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.55);} .card-title{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:14px;} .card-sub{color:var(--muted);margin-top:8px;font-size:13px;line-height:1.35;} .quote{margin:14px 0;padding:12px;border:1px solid var(--line);border-radius:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:12px;color:#dfe7ef;}
.lbl{display:block;margin:12px 0 6px;color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase;}
.inp{width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:var(--fg);outline:none;font-size:16px;} .inp:focus{border-color:rgba(242,210,122,.55);} .inp.code{text-align:center;letter-spacing:.35em;font-weight:700;}
.btn{width:100%;margin-top:12px;padding:12px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--fg);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.btn.primary{background:rgba(242,210,122,.14);border-color:rgba(242,210,122,.25);} .btn.ghost{background:rgba(255,255,255,.03);} .btn.danger{background:rgba(255,59,59,.10);border-color:rgba(255,59,59,.22);color:#ffdede;} .btn.choice{text-transform:none;letter-spacing:0;font-size:14px;font-weight:700;}
.note{margin-top:12px;font-size:12px;color:var(--muted);} .note.small{font-size:11px;}
.modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:24px 16px;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);} .modal[aria-hidden="false"]{display:flex;}
.panel{width:min(520px,100%);padding:18px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(10,12,15,.85);} .panel-title{font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:14px;} .panel-sub{color:var(--muted);margin-top:8px;font-size:13px;}
.countdown{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:12px;text-align:center;} .countdown .time{font-size:28px;font-weight:900;letter-spacing:.08em;color:var(--accent);} .countdown .hint{font-size:12px;color:var(--muted);margin-top:4px;}
.flash{position:absolute;inset:0;background:radial-gradient(900px 600px at 50% 55%, rgba(255,255,255,1), rgba(255,255,255,.9) 35%, rgba(242,210,122,.9) 55%, rgba(0,0,0,0) 80%);opacity:0;pointer-events:none;} .flash.on{animation:flash 950ms ease-out forwards;} @keyframes flash{0%{opacity:0;}10%{opacity:1;}70%{opacity:1;}100%{opacity:0;}}
.divider{height:1px;background:var(--line);margin:14px 0;}
.log{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:10px;background:rgba(0,0,0,.22);} .logline{display:grid;grid-template-columns:160px 180px 1fr;gap:10px;font-size:11px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);} .logline:last-child{border-bottom:0;} .ts{color:#b7c2cc;}


/* Door background */
.hero{background-image:url('/static/door.png'),url('/static/door.jpg'),url('/static/door.webp'),url('/static/door.svg');background-size:cover;background-position:center;background-repeat:no-repeat;}