:root{
  --bg:#0c0a08; --ink:#f5efe4; --dim:#cfc4b2; --faint:#9b907f;
  --gold:#e6b96e; --gold-2:#f6d9a2; --panel:rgba(18,14,10,.72); --line:rgba(245,239,228,.16);
  --r:18px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none!important}
#app{position:relative;max-width:560px;height:100%;height:100dvh;margin:0 auto;overflow:hidden;background:#000}

/* ---------- lobby ---------- */
.lobby{height:100%;overflow-y:auto;padding:calc(28px + var(--safe-t)) 18px calc(28px + var(--safe-b));
  background:radial-gradient(120% 60% at 50% 0%,#2a2014 0%,#120e0a 55%,#0c0a08 100%)}
.lobby h1{font-size:30px;line-height:1.25;margin:26px 0 10px;font-weight:650;letter-spacing:-.01em;text-wrap:balance}
.lobby .tag{font-size:17px;line-height:1.55;color:var(--gold-2);margin:0 0 8px;text-wrap:balance}
.lobby .sub{font-size:15px;line-height:1.65;color:var(--dim);margin:0 0 18px;max-width:34em}
.now{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--dim);margin:0 0 20px;min-height:20px}
.now i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(230,185,110,.6);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(230,185,110,.55)}70%{box-shadow:0 0 0 10px rgba(230,185,110,0)}100%{box-shadow:0 0 0 0 rgba(230,185,110,0)}}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.door{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);
  background:#1a1510;border:1px solid var(--line);isolation:isolate}
.door:first-child{grid-column:1/-1;aspect-ratio:16/11}
.door img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s ease}
.door::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(8,6,4,.86) 100%)}
.door:active img{transform:scale(1.04)}
.door .t{position:absolute;left:14px;right:14px;bottom:12px}
.door .trad{font-size:12px;letter-spacing:.08em;color:var(--gold-2);text-transform:uppercase}
.door .name{font-size:20px;font-weight:650;margin:2px 0 3px}
.door .line{font-size:13px;line-height:1.45;color:var(--dim)}
.door .last{position:absolute;top:10px;left:10px;inset-inline-start:10px;font-size:11.5px;background:rgba(0,0,0,.55);border:1px solid var(--line);
  padding:4px 9px;border-radius:99px;color:var(--gold-2)}
.foot{margin:26px 0 0;font-size:12.5px;line-height:1.7;color:var(--faint)}
.foot button{color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.topbar{display:flex;justify-content:flex-end;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:99px;font-size:14px;
  background:rgba(0,0,0,.42);border:1px solid var(--line);color:var(--ink);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chip svg{width:18px;height:18px;flex:none}
.chip.icon{width:42px;padding:0;justify-content:center}
.chip[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-2)}

/* ---------- space ---------- */
.space{position:absolute;top:0;right:0;bottom:0;left:0}
.stage{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:#000}
.stage .layer{position:absolute;top:0;right:0;bottom:0;left:0;transition:transform .42s cubic-bezier(.3,.1,.2,1),filter .42s ease;
  animation:breathe 26s ease-in-out infinite alternate;transform-origin:50% 40%}
@keyframes breathe{from{scale:1}to{scale:1.045}}
.stage img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}
.stage.bow .layer{transform:translateY(-9%) scale(1.1);filter:brightness(.55)}
.stage.dim .layer{filter:brightness(.5) saturate(.85)}
.stage canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}
.shade{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 46%,rgba(6,4,3,.88) 100%)}
.head{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:calc(10px + var(--safe-t)) 12px 0}
.head .title{flex:1;min-width:0;padding-inline:6px}
.head .title b{display:block;font-size:17px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head .title span{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel{position:absolute;left:0;right:0;bottom:0;padding:0 14px calc(14px + var(--safe-b));display:flex;flex-direction:column;gap:12px}
.work{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;text-align:center}
.hint{font-size:14.5px;line-height:1.55;color:var(--ink);text-shadow:0 1px 3px #000,0 0 14px #000;max-width:26em;text-wrap:balance}
.stat{font-size:13px;color:var(--ink);text-shadow:0 1px 3px #000,0 0 14px #000;min-height:18px;font-variant-numeric:tabular-nums}
.acts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;padding:2px 0}
.acts.n4{grid-auto-flow:row;grid-template-columns:1fr 1fr}
[dir="rtl"] .head a.chip svg{transform:scaleX(-1)}
.act{min-width:0;min-height:50px;padding:8px 6px;border-radius:16px;font-size:13.5px;line-height:1.25;overflow-wrap:anywhere;hyphens:auto;
  background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.act[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-2);background:rgba(40,28,12,.82)}

.pad{position:relative;width:148px;height:148px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,rgba(70,50,22,.9),rgba(18,13,8,.9));border:1px solid rgba(230,185,110,.5);
  box-shadow:0 10px 40px rgba(0,0,0,.6);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.pad:active{transform:scale(.97)}
.pad svg.ring{position:absolute;top:-7px;left:-7px;width:calc(100% + 14px);height:calc(100% + 14px);transform:rotate(-90deg)}
.pad svg.ring circle{fill:none;stroke-width:3.5}
.pad svg.ring .bgc{stroke:rgba(245,239,228,.16)}
.pad svg.ring .fgc{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset .25s ease}
.pad .num{font-size:40px;font-weight:650;font-variant-numeric:tabular-nums;line-height:1}
.pad .of{display:block;font-size:13px;color:var(--dim);margin-top:6px;font-weight:400}
.pad .lbl{display:block;width:124px;font-size:17px;font-weight:600;line-height:1.3}
.row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.link{font-size:13.5px;color:var(--dim);text-decoration:underline;text-underline-offset:3px;min-height:36px;padding:0 6px;text-shadow:0 1px 6px #000}
.link[aria-pressed="true"]{color:var(--gold-2)}
.btn{min-height:48px;padding:0 22px;border-radius:99px;font-size:15.5px;font-weight:600;background:var(--gold);color:#22180a}
.btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line);font-weight:500}
.steps{display:flex;gap:8px;justify-content:center}
.steps span{font-size:12.5px;padding:5px 11px;border-radius:99px;border:1px solid var(--line);color:var(--dim);background:rgba(0,0,0,.4)}
.steps span.on{border-color:var(--gold);color:#22180a;background:var(--gold)}
.marks{display:flex;gap:6px;justify-content:center}
.marks i{width:26px;height:4px;border-radius:2px;background:rgba(245,239,228,.2)}
.marks i.on{background:var(--gold)}

.breath{width:150px;height:150px;border-radius:50%;border:1.5px solid rgba(230,185,110,.7);
  background:radial-gradient(circle,rgba(230,185,110,.22),rgba(230,185,110,0) 70%);display:grid;place-items:center;font-size:15px;color:var(--gold-2)}
.breath.go{animation:inout 10s ease-in-out infinite}
@keyframes inout{0%{transform:scale(.62)}40%{transform:scale(1)}100%{transform:scale(.62)}}
.timer{font-size:15px;color:var(--dim);font-variant-numeric:tabular-nums;text-shadow:0 1px 6px #000}

/* ---------- sheets ---------- */
.veil{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;z-index:20}
.sheet{width:100%;max-height:86%;overflow-y:auto;background:#17120d;border-top:1px solid var(--line);border-radius:22px 22px 0 0;
  padding:18px 18px calc(22px + var(--safe-b))}
.sheet h2{font-size:19px;margin:4px 0 12px}
.sheet p{font-size:15px;line-height:1.7;color:var(--dim);margin:0 0 10px}
.sheet p.own{color:var(--gold-2)}
.sheet .mail{font-size:14.5px;color:var(--ink);user-select:all;-webkit-user-select:all;word-break:break-all}
.sheet .x{position:sticky;top:0;float:inline-end}
.langs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.langs button{min-height:44px;text-align:start;padding:8px 12px;border-radius:12px;border:1px solid var(--line);font-size:14.5px}
.langs button[aria-current="true"]{border-color:var(--gold);color:var(--gold-2)}
.done{position:absolute;top:0;right:0;bottom:0;left:0;z-index:15;background:rgba(6,4,3,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:24px;text-align:center}
.done canvas{width:min(70%,280px);height:auto;border-radius:14px;box-shadow:0 14px 50px rgba(0,0,0,.7)}
.done h2{font-size:21px;margin:0;text-wrap:balance}
.toast{position:absolute;left:0;right:0;top:calc(64px + var(--safe-t));display:flex;justify-content:center;z-index:30;pointer-events:none}
.toast span{background:rgba(0,0,0,.78);border:1px solid var(--line);padding:9px 16px;border-radius:99px;font-size:14px}
@media (prefers-reduced-motion:reduce){.stage .layer{animation:none}.breath.go{animation:none}.now i{animation:none}}
@media (min-width:420px){.lobby h1{font-size:34px}}

@supports not (aspect-ratio:1){.door{height:230px}.door:first-child{height:250px}}
[dir="rtl"] .door .last{left:auto}
:lang(ko) .lobby,:lang(ko) .hint,:lang(ko) .sheet p,:lang(ko) .act,:lang(ko) .done h2{word-break:keep-all}
.note{width:100%;max-width:340px;min-height:88px;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);background:rgba(14,10,7,.8);
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;resize:none;outline:none}
.note:focus{border-color:var(--gold)}
.note::placeholder{color:var(--faint)}
.space.typing .panel{top:calc(66px + var(--safe-t));bottom:auto}
.space.typing .acts{display:none}
.space.typing .work{justify-content:flex-start;min-height:0}
.space.typing .shade{background:rgba(6,4,3,.74)}
.lobby h1.brand{display:flex;align-items:baseline;gap:12px;font-size:40px;margin:26px 0 6px;letter-spacing:0}
.lobby h1.brand .dot{color:var(--gold);font-weight:400}
.lobby h1.brand span[lang="en"]{font-weight:400;color:var(--gold-2);letter-spacing:.04em}
.lobby .goyo{font-size:13.5px;line-height:1.55;color:var(--faint);margin:0 0 16px}
.stage3d{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none}
.stage3d canvas{display:block;width:100%!important;height:100%!important}
.layer.has3d>img{visibility:hidden}
.layer.has3d{animation:none!important}
.stage.bow .layer.has3d{transform:none;filter:none}
.space:has(.has3d) .shade{background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 14%,rgba(0,0,0,0) 60%,rgba(6,4,3,.8) 100%)}
.door img{object-position:50% 30%}
.door:first-child img{object-position:50% 12%}

/* ---------- PC and wide windows ---------- */
@media (min-width:900px){
  #app{max-width:none}
  .lobby{padding:calc(36px + var(--safe-t)) clamp(32px,6vw,120px) 48px}
  .lobby .topbar{position:absolute;top:calc(20px + var(--safe-t));right:clamp(32px,6vw,120px)}
  .lobby h1.brand{font-size:56px;margin-top:20px}
  .lobby .goyo{font-size:15px}.lobby .tag{font-size:22px}.lobby .sub{font-size:17px;max-width:40em}
  .doors{grid-template-columns:repeat(4,1fr);gap:16px}
  .door,.door:first-child{aspect-ratio:16/11}
  .door:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;min-height:420px}
  .door .name{font-size:24px}.door .line{font-size:14px}
  .door img,.door:first-child img{object-position:50% 40%}
  .door:hover img{transform:scale(1.04)}
  .foot{max-width:60em}
  /* a space: the picture fills the window; the controls sit in a centred panel under the title */
  .space .panel{inset-inline:auto;left:50%;transform:translateX(-50%);width:min(640px,92vw);padding-bottom:calc(24px + var(--safe-b))}
  .stage img{object-position:50% 40%}
  .head{padding-inline:28px}
  .head .title b{font-size:20px}
  .sheet{max-width:640px;margin-inline:auto;border-radius:22px;margin-bottom:24px}
  .veil{align-items:center}
  .done canvas{width:min(34vw,340px)}
}
@media (min-width:1500px){ .doors{grid-template-columns:repeat(5,1fr)} .door:first-child{grid-column:span 2;grid-row:span 2} }

/* ---------- Lantern Child on the picture ---------- */
.avbox{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}
.space.hasav .stage{bottom:var(--ph,0px);right:var(--pw,0px)}
.space.hasav .shade{background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 100%)}
.space.hasav{background:#0c0a08}
.space.hasav .stage{cursor:pointer}
.chip.cush{padding:0;overflow:hidden}
.chip.cush img{width:32px;height:auto;display:block}
.cushpick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cp{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:14.5px}
.cp img{width:100%;max-width:150px;height:auto}
.cp[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-2);background:rgba(40,28,12,.7)}
@media (min-width:900px){
  .space.hasav .panel{left:auto;right:20px;transform:none;top:72px;bottom:20px;width:min(380px,30vw);justify-content:center;padding:0}
  .space.hasav .work{min-height:0}
}
.bellv{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease;pointer-events:none;background:transparent}
.bellv.on{opacity:1}

/* ---------- day theme (light UI + daylight pictures); night is the base look ---------- */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}
.themepick{display:grid;gap:8px}
.themepick button{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border-radius:14px;border:1px solid var(--line);font-size:16px;text-align:start}
.themepick svg{width:22px;height:22px;flex:none}
.themepick button[aria-checked="true"]{border-color:var(--gold);color:var(--gold-2)}
html[data-theme="day"]{--bg:#f6f0e6;--ink:#2a2118;--dim:#5b4c3c;--faint:#7c6b58;--gold:#a56d0f;--gold-2:#8a5808;--panel:rgba(255,251,243,.92);--line:rgba(70,48,22,.22);color-scheme:light}
html[data-theme="day"] .lobby{background:radial-gradient(120% 60% at 50% 0%,#fff8ea 0%,#f6f0e6 55%,#efe6d6 100%)}
html[data-theme="day"] .lobby .chip{background:rgba(255,255,255,.72);color:var(--ink)}
html[data-theme="day"] .sheet{background:#fbf6ec}
html[data-theme="day"] .veil{background:rgba(40,28,14,.45)}
html[data-theme="day"] .act[aria-pressed="true"]{background:#fff0d2;color:#7a4f06;border-color:var(--gold)}
html[data-theme="day"] .cp{background:rgba(120,90,40,.06)}
html[data-theme="day"] .cp[aria-pressed="true"]{background:#fff0d2}
html[data-theme="day"] .space.hasav .hint,html[data-theme="day"] .space.hasav .stat,html[data-theme="day"] .space.hasav .timer{color:var(--ink);text-shadow:none}
html[data-theme="day"] .space.hasav .link{color:var(--dim);text-shadow:none}
/* text that sits on a picture is always light */
.door,.door .name{color:#f7f1e6}.door .trad{color:#f6d9a2}.door .line{color:#eadfcd}
.head .chip,.head .title b{color:#f7f1e6}.head .title span{color:#e4d9c7}
.pad{color:#f5efe4}.pad .of{color:#cfc4b2}
.space:not(.hasav) .hint,.space:not(.hasav) .stat,.space:not(.hasav) .timer{color:#f5efe4}
.space:not(.hasav) .link{color:#e6dccb}
.done,.done h2{color:#f5efe4}
.space.hasav{background:var(--bg)}
html[data-theme="day"] .space.hasav .shade{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 100%)}

/* ---------- feedback ---------- */
.fbfab{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:max(14px,calc(env(safe-area-inset-bottom,0px) + 10px));z-index:12;display:flex;align-items:center;gap:8px;min-height:48px;padding:4px 16px 4px 5px;border-radius:99px;background:rgba(20,15,9,.88);color:#f5efe4;border:1px solid var(--gold);box-shadow:0 6px 24px rgba(0,0,0,.45);font-size:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fbfab img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#2a2014}
.fbfab span{max-width:9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lobby{padding-bottom:calc(88px + var(--safe-b))}
.fbkinds{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.fbkinds button{min-height:40px;padding:0 14px;border-radius:99px;border:1px solid var(--line);font-size:14.5px}
.fbkinds button[aria-checked="true"]{border-color:var(--gold);color:var(--gold-2);background:rgba(40,28,12,.55)}
.fbtext,.fbcontact{max-width:none;width:100%;margin-bottom:10px;display:block}
.fbtext{min-height:110px}.fbcontact{min-height:0;height:46px;resize:none}
.fbchk{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--dim);margin:2px 0 14px}
.fbchk input{width:20px;height:20px;accent-color:var(--gold)}
.fbmsg{min-height:22px;margin-top:10px;color:var(--gold-2);text-align:center}
html[data-theme="day"] .fbfab{background:rgba(255,251,243,.95);color:#2a2118}
@media (min-width:900px){.fbfab{right:28px;bottom:24px}}
.ambv{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;pointer-events:none;background:transparent}
.ambv.on{opacity:1}

/* QA fixes */
.steps{flex-wrap:wrap}
.pad .of{direction:ltr;unicode-bidi:isolate}