:root { --cyan:#2ee6ff; --ink:#e8f6ff; }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; background:#04050a; color:var(--ink); font-family:"Share Tech Mono",monospace; }
.fog { position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 55%, rgba(46,230,255,.08), transparent 70%),
             radial-gradient(ellipse 100% 60% at 50% 110%, rgba(122,60,255,.12), transparent 60%); }
.fog::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }

.scene { position:fixed; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; padding:20px; }
.scene.on { display:flex; }

/* ---------- the door ---------- */
.stage { position:relative; width:min(240px,56vw); aspect-ratio:240/400; perspective:900px; transition:transform 1.4s cubic-bezier(.6,0,.2,1), opacity 1.1s ease .5s; }
.frame { position:absolute; inset:0; border:10px solid #14161e; border-bottom:none; border-radius:6px 6px 0 0; background:#000;
  box-shadow:0 0 0 2px #232735, 0 0 60px rgba(46,230,255,.12); }
.behind { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 60%, #fff 0%, #cfeaff 35%, #3a6fb0 80%); opacity:0; transition:opacity .6s ease .2s; }
.door { position:absolute; inset:0; border:none; cursor:pointer; background:linear-gradient(90deg,#1b1e29,#252a38 55%,#1b1e29);
  transform-origin:0 50%; transition:transform 1.3s cubic-bezier(.3,.7,.2,1); transform-style:preserve-3d; outline:none; }
.door:hover, .door:focus-visible { filter:brightness(1.25); }
.door:focus-visible { box-shadow:0 0 0 3px var(--cyan); }
.panel { position:absolute; left:12%; right:12%; border:2px solid #0e1018; background:linear-gradient(180deg,#20243200,#00000040); box-shadow:inset 0 0 12px rgba(0,0,0,.55), 0 0 0 1px #2d3346; }
.p1 { top:6%; height:20%; } .p2 { top:30%; height:20%; } .p3 { top:56%; height:16%; } .p4 { top:76%; height:16%; }
.peep { position:absolute; top:7%; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:#000; box-shadow:0 0 0 3px #9aa3ad, 0 0 10px var(--cyan); animation:peep 3.2s ease-in-out infinite; }
.knob { position:absolute; right:10%; top:52%; width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #ffe9a8, #b8862b 70%); box-shadow:0 0 10px rgba(255,200,80,.6); }
.lightspill { position:absolute; left:50%; bottom:-2%; width:130%; height:6px; transform:translateX(-50%); background:radial-gradient(ellipse, rgba(46,230,255,.9), transparent 70%); filter:blur(5px); animation:seam 3s ease-in-out infinite; }
.floor-glow { position:absolute; left:-40%; right:-40%; bottom:-6px; height:30px; background:radial-gradient(ellipse at 50% 0, rgba(46,230,255,.25), transparent 70%); }
@keyframes seam { 50% { opacity:.45; } }
@keyframes peep { 50% { box-shadow:0 0 0 3px #9aa3ad, 0 0 18px #fff; } }

.stage.open .door { transform:rotateY(-74deg); }
.stage.open .behind { opacity:1; }
.stage.open .lightspill { opacity:0; }
.stage.walk { transform:scale(7); opacity:0; }

.plate { margin-top:26px; display:flex; flex-direction:column; align-items:center; gap:6px; color:#6f7f99; font-size:12px; letter-spacing:2px; text-transform:uppercase; transition:opacity .6s; }
.plate input { background:transparent; border:none; border-bottom:1px solid #35405a; color:var(--ink); font:inherit; font-size:17px; text-align:center; width:min(260px,70vw); padding:6px; outline:none; letter-spacing:2px; text-transform:none; }
.plate input:focus { border-color:var(--cyan); }
.plate input.shake { animation:shake .35s; border-color:#ff5f6e; }
@keyframes shake { 25% { transform:translateX(-6px);} 75% { transform:translateX(6px);} }
.hint { margin-top:14px; color:#3f4a63; font-size:12px; letter-spacing:3px; animation:blink 2s ease-in-out infinite; transition:opacity .6s; }
@keyframes blink { 50% { opacity:.25; } }
#scene-door.leaving .plate, #scene-door.leaving .hint { opacity:0; }

/* ---------- the question ---------- */
#scene-pill { background:radial-gradient(ellipse at 50% 40%, #0b0f1c, #02030a 70%); gap:26px; text-align:center; }
#scene-pill.on { animation:fadein 1.2s ease; }
@keyframes fadein { from { opacity:0; } }
.talk { min-height:150px; max-width:560px; }
.line { font-size:clamp(14px,3.6vw,18px); line-height:1.7; color:#b9c7e0; min-height:1.7em; }
.line.big { font-size:clamp(22px,6.4vw,38px); color:#fff; margin-top:10px; letter-spacing:2px; text-shadow:0 0 22px rgba(255,255,255,.4); }
.line::after { content:""; }
.line.typing::after { content:"▌"; color:var(--cyan); animation:blink .7s steps(2) infinite; }

.pills { display:flex; gap:clamp(14px,4vw,40px); flex-wrap:wrap; justify-content:center; opacity:0; pointer-events:none; transition:opacity 1s; }
.pills.show { opacity:1; pointer-events:auto; }
.pill { width:min(250px,42vw); min-width:150px; background:transparent; border:1px solid #232b40; border-radius:14px; padding:20px 14px 16px; cursor:pointer; color:inherit; font:inherit; display:flex; flex-direction:column; align-items:center; gap:10px; transition:transform .2s, border-color .2s, box-shadow .2s; }
.pill b { letter-spacing:3px; font-size:15px; }
.pill small { color:#8593ad; font-size:12px; line-height:1.55; }
.pill .cap { width:90px; height:36px; border-radius:18px; position:relative; animation:bob 3.4s ease-in-out infinite; }
.pill .cap::after { content:""; position:absolute; top:5px; left:12px; right:12px; height:7px; border-radius:6px; background:rgba(255,255,255,.35); }
.pill.white .cap { background:linear-gradient(180deg,#fff,#cfd8e8); box-shadow:0 0 26px rgba(255,255,255,.55); }
.pill.black .cap { background:linear-gradient(180deg,#2a2d38,#05060a); box-shadow:0 0 0 1px #3a3f52, 0 0 26px rgba(122,60,255,.5); }
.pill.black .cap::after { background:rgba(255,255,255,.12); }
.pill:hover, .pill:focus-visible { transform:translateY(-4px); outline:none; }
.pill.white:hover, .pill.white:focus-visible { border-color:#fff; box-shadow:0 0 34px rgba(255,255,255,.25); }
.pill.black:hover, .pill.black:focus-visible { border-color:#7a3cff; box-shadow:0 0 34px rgba(122,60,255,.4); }
.pill.chosen { transform:scale(1.08); }
.pills.done .pill:not(.chosen) { opacity:0; transition:opacity .6s; }
@keyframes bob { 50% { transform:translateY(-5px) rotate(-4deg); } }
.fine { max-width:520px; color:#4b5670; font-size:11px; line-height:1.6; opacity:0; transition:opacity 1s 1s; }
.pills.show ~ .fine { opacity:1; }

#enter-form { display:none; }
#fade { position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; transition:opacity .9s; z-index:20; }
#fade.black { background:#000; }
#fade.on { opacity:1; }

@media (max-height:520px) { .stage { width:min(150px,30vw); } .plate { margin-top:12px; } .talk { min-height:90px; } .pill small { display:none; } }
@media (prefers-reduced-motion: reduce) { .stage, .door, .behind, .pills { transition:none; } .pill .cap, .peep, .lightspill { animation:none; } }

/* ---- 3D street backdrop (body.gl) ---- */
#scene3d { position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; }
.fog { z-index:1; }
.scene { z-index:2; }
body.gl .fog { background:radial-gradient(ellipse 90% 70% at 50% 45%, transparent 55%, rgba(4,8,20,.45)); }
body.gl .fog::after { display:none; }
body.gl .stage { display:none; }
body.gl #scene-door { justify-content:flex-end; padding-bottom:max(18px, 5vh); pointer-events:none; }
body.gl .plate, body.gl .hint { pointer-events:auto; }
body.gl .plate { margin-top:0; padding:12px 22px 10px; background:rgba(8,12,24,.62); border:1px solid rgba(255,255,255,.18); border-radius:14px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#b8c8e6; }
body.gl .plate input { color:#fff; }
body.gl .hint { color:#14213d; text-shadow:0 1px 0 rgba(255,255,255,.6); background:rgba(255,255,255,.55); padding:4px 12px; border-radius:99px; margin-top:10px; }
#scene-pill { z-index:3; }
@media (max-height:520px) { body.gl #scene-door { padding-bottom:8px; } body.gl .plate { padding:6px 14px; } }

.brand { position:fixed; left:0; right:0; top:max(12px,2vh); text-align:center; z-index:3; font-size:12px; letter-spacing:4px; font-weight:bold; color:#fff; text-shadow:0 2px 8px rgba(10,30,90,.8); pointer-events:none; }
.brand i { opacity:.6; font-style:normal; padding:0 6px; }

/* ---- accounts ---- */
.tabs { display:flex; gap:4px; margin-bottom:4px; }
.tab { background:transparent; border:1px solid #35405a; color:#8593ad; font:inherit; font-size:11px; letter-spacing:2px; padding:4px 10px; border-radius:99px; cursor:pointer; }
.tab.on { border-color:var(--cyan); color:var(--cyan); background:rgba(46,230,255,.1); }
.plate input[hidden] { display:none; }
#mode-note { color:#8593ad; font-size:11px; letter-spacing:1px; text-transform:none; min-height:1.3em; }
#mode-note.err { color:#ff7a8a; }
.lb-link { color:#8593ad; font-size:11px; letter-spacing:2px; text-decoration:none; }
.lb-link:hover { color:var(--cyan); }