:root{--bg:#06080f;--p:rgba(16,21,34,.72);--p2:rgba(26,33,50,.7);--ln:#26314a;--tx:#dde4f2;--mu:#8190ab;--cy:#38f0ff;--am:#ffb347;--pk:#ff6fb5;color-scheme:dark}
*{box-sizing:border-box;margin:0}
html,body{min-height:100%}
body{font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--tx);overflow-x:hidden;
background:radial-gradient(1200px 700px at 80% -15%,#1a2a52,transparent 60%),radial-gradient(1000px 600px at -10% 105%,#3a1438,transparent 58%),radial-gradient(600px 400px at 50% 50%,#0c1226,transparent),var(--bg);background-attachment:fixed}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.hidden{display:none!important}
.c-cy{--c:var(--cy)}.c-am{--c:var(--am)}.c-pk{--c:var(--pk)}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#26314a;border-radius:8px}

#snow{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
#snow i{position:absolute;top:-10px;border-radius:50%;background:#e8f0ff;box-shadow:0 0 6px #cfe0ff;animation:fall linear infinite;will-change:transform}
@keyframes fall{to{transform:translate3d(50px,110vh,0)}}

/* title */
#title{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;overflow:hidden;
background:radial-gradient(2px 2px at 15% 25%,#fff9,transparent),radial-gradient(1.5px 1.5px at 70% 15%,#fff9,transparent),radial-gradient(1.5px 1.5px at 88% 40%,#fff8,transparent),radial-gradient(1px 1px at 40% 10%,#fff8,transparent),radial-gradient(800px 420px at 50% 42%,#231f4a,transparent 70%),linear-gradient(#04060d,#0b1022 60%,#2a1638);transition:opacity 1.4s ease,visibility 1.4s}
#title::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(#0a0e1c,#05070d);border-top:2px solid #38f0ff33;box-shadow:0 -30px 80px #ff6fb522}
#title::after{content:"";position:absolute;left:50%;bottom:0;width:140px;height:34%;transform:translateX(-50%);background:repeating-linear-gradient(#ffb347aa 0 22px,transparent 22px 52px);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);opacity:.5}
#title>*{position:relative;z-index:1}
#title.gone{opacity:0;visibility:hidden;pointer-events:none}
.logo{font:italic 800 clamp(3.2rem,14vw,8.5rem)/1 Georgia,"Times New Roman",serif;letter-spacing:.03em;color:#fff0d6;
text-shadow:0 0 6px #fff4,0 0 22px var(--am),0 0 60px var(--am),0 0 120px #ff7a1a;animation:flick 7s infinite}
.sub{font-size:clamp(1rem,3.6vw,1.7rem);letter-spacing:.7em;color:var(--cy);text-shadow:0 0 10px var(--cy),0 0 34px var(--cy);margin:.5em 0 1.4em .7em}
.tag{color:#a9b4cc;margin-bottom:2.4rem;font-style:italic;font-family:Georgia,serif;font-size:1.05rem}
@keyframes flick{0%,17%,21%,60%,63%,100%{opacity:1}19%,61.5%{opacity:.5}}
.btn{background:linear-gradient(#ff6fb51f,#ff6fb50a);border:1.5px solid var(--pk);color:#ffd3ea;padding:.85em 2.4em;border-radius:999px;letter-spacing:.1em;
box-shadow:0 0 18px #ff6fb566,inset 0 0 16px #ff6fb533;text-shadow:0 0 8px var(--pk);transition:transform .2s,box-shadow .2s;animation:breathe 3.5s ease-in-out infinite}
.btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 0 34px #ff6fb5bb,inset 0 0 22px #ff6fb566}
@keyframes breathe{50%{box-shadow:0 0 32px #ff6fb599,inset 0 0 20px #ff6fb544}}

/* layout */
#app{max-width:1200px;margin:0 auto;padding:18px;min-height:100vh;display:flex;flex-direction:column;gap:16px;animation:appin 1.6s ease both}
@keyframes appin{from{opacity:0;filter:blur(8px)}}
header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
header h2{font:italic 700 1.7rem Georgia,serif;color:#fff0d6;text-shadow:0 0 14px #ffb347aa,0 0 36px #ffb34755}
header small{font:400 .72rem system-ui;color:var(--cy);letter-spacing:.35em;text-shadow:0 0 8px var(--cy);margin-left:.7em}
.hud{display:flex;flex-wrap:wrap;gap:8px}
.hud span{background:var(--p);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--ln);border-radius:14px;padding:.4em 1em;color:var(--mu);box-shadow:0 4px 20px #0006}
.hud b{color:var(--tx);font-variant-numeric:tabular-nums}
#cash{color:var(--am);text-shadow:0 0 10px #ffb34777}
main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:860px){main{grid-template-columns:1fr}}
.left{display:flex;flex-direction:column;gap:14px}

/* panel */
#panel{background:var(--p);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid #2a3556;border-radius:22px;padding:14px;max-height:calc(100vh - 110px);overflow:auto;position:sticky;top:14px;box-shadow:0 20px 60px #0009,0 0 40px #ff6fb512}
@media(max-width:860px){#panel{position:static;max-height:none}}
nav{display:flex;gap:6px;margin-bottom:12px;padding:4px;background:#0a0e1a99;border-radius:14px}
nav button{flex:1;background:transparent;border:1px solid transparent;border-radius:10px;padding:.55em;color:var(--mu);transition:.2s}
nav button.on{background:#38f0ff14;border-color:var(--cy);color:var(--cy);text-shadow:0 0 8px var(--cy);box-shadow:0 0 14px #38f0ff44}
nav button.ping{animation:ping 1.2s 3}
@keyframes ping{50%{box-shadow:0 0 22px var(--am);border-color:var(--am);color:var(--am)}}
h3{font:italic 600 1rem Georgia,serif;color:#bcc7df;margin:16px 0 8px;padding-bottom:5px;border-bottom:1px solid #26314a}
.row{display:flex;align-items:center;gap:11px;background:var(--p2);border:1px solid var(--ln);border-radius:14px;padding:10px 12px;margin-bottom:8px;transition:border-color .2s,transform .2s}
.row:hover{border-color:#3b4a70;transform:translateX(2px)}
.row>span:first-child{font-size:1.5rem}.row div{flex:1;min-width:0}.row b{display:block;font-size:.92rem}.row small{color:var(--mu);font-size:.78rem}
.buy{background:linear-gradient(#ffb34722,#ffb3470c);border:1px solid var(--am);color:var(--am);border-radius:999px;padding:.32em 1em;white-space:nowrap;text-shadow:0 0 8px #ffb34766;transition:.2s}
.buy:hover:not(:disabled){box-shadow:0 0 18px #ffb347aa;transform:scale(1.05)}
.buy:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.5)}
.sign.big{display:inline-block;animation:none}
.book{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px}
.tc{--rc:var(--mu);background:linear-gradient(160deg,color-mix(in srgb,var(--rc) 12%,transparent),var(--p2));border:1px solid var(--rc);border-radius:14px;padding:12px;font-size:.8rem;display:flex;flex-direction:column;gap:4px;box-shadow:0 0 14px color-mix(in srgb,var(--rc) 25%,transparent)}
.tc .car{font-size:1.8rem;animation:none}.tc.lock{opacity:.4;border:1px dashed var(--ln);box-shadow:none;text-align:center;background:var(--p2)}.tc small{color:var(--mu)}.tc em{color:var(--rc);font-style:normal;font-size:.72rem;text-shadow:0 0 8px var(--rc)}
.tc p{color:var(--tx)}

#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);z-index:20;background:#0b101cee;border:1px solid var(--cy);color:var(--tx);padding:.7em 1.4em;border-radius:999px;
box-shadow:0 0 26px #38f0ff66,0 10px 30px #000a;opacity:0;pointer-events:none;transition:.4s;max-width:92vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}#snow{display:none}}

/* ===== inside the booth ===== */
main{display:block}
#stage{position:relative;container-type:size;width:min(100%,calc((100vh - 150px)*16/9));aspect-ratio:16/9;min-height:300px;margin:0 auto;border-radius:18px;overflow:hidden;background:#05070d;border:1px solid #2a3556;box-shadow:0 24px 70px #000b,0 0 60px #38f0ff16;user-select:none;-webkit-user-select:none}
.out{position:absolute;inset:0 0 38% 0;background:linear-gradient(#02040a,#0d1530 55%,#2b1740 88%,#4a2250);overflow:hidden}
.out>*{position:absolute}
.aur{left:-10%;right:-10%;top:-8%;height:50%;background:linear-gradient(100deg,transparent 10%,#38f0ff40 30%,#5dffb04a 48%,#ff6fb540 68%,transparent 90%);filter:blur(3cqw);opacity:.7;animation:wave 14s ease-in-out infinite alternate}
@keyframes wave{to{transform:translateX(5cqw) skewY(3deg);opacity:.4}}
.moon{top:9%;left:15%;width:5cqw;height:5cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fffbea,#ffe3b0 70%);box-shadow:0 0 4cqw #fff3d6aa,0 0 12cqw #ffb34755}
.hills{left:0;right:0;background-repeat:repeat-x;background-position:bottom}
.h1{bottom:15%;height:36%;background-size:60cqw 100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 120' preserveAspectRatio='none'%3E%3Cpath d='M0 80C40 60 70 90 120 40S200 70 250 30 330 70 360 80V120H0Z' fill='%231b2750'/%3E%3C/svg%3E")}
.h2{bottom:15%;height:24%;background-size:42cqw 100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C50 40 90 80 150 35S250 75 300 45 340 60 360 70V120H0Z' fill='%230b1126'/%3E%3C/svg%3E")}
.pines{left:0;right:0;bottom:14%;height:15%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='84'%3E%3Cpath d='M23 0L38 34H30L43 62H3L16 34H8Z' fill='%23060913'/%3E%3C/svg%3E") repeat-x bottom/3cqw 100%;filter:blur(.12cqw)}
.bk{border-radius:50%;filter:blur(.5cqw);opacity:.75}
.road{left:0;right:0;bottom:0;height:15%;background:linear-gradient(#0a0d18,#04060b);border-top:.3cqw solid #1c2338}
.road::after{content:"";position:absolute;left:0;right:0;top:48%;height:.35cqw;background:repeating-linear-gradient(90deg,#ffb347aa 0 4cqw,transparent 4cqw 9cqw);opacity:.6;animation:dash 3s linear infinite}
@keyframes dash{to{background-position:9cqw 0}}
#car{left:34%;bottom:8%;width:30cqw;height:7cqw;border-radius:6cqw 6cqw 1cqw 1cqw;background:linear-gradient(var(--car,#3b4a74),#080b16);transform:translateX(-90cqw);filter:blur(.12cqw)}
#car::before{content:"";position:absolute;left:18%;top:-48%;width:58%;height:60%;background:linear-gradient(#26304f,#080b16);border-radius:5cqw 5cqw 0 0}
#car::after{content:"";position:absolute;right:-.5cqw;top:30%;width:3cqw;height:2cqw;border-radius:50%;background:#fff6d0;box-shadow:0 0 3cqw 1.5cqw #fff3c8aa,12cqw 0 14cqw 5cqw #fff3c833}
#car.in,#car.go{transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
#car.in{transform:none}#car.go{transform:translateX(90cqw);transition-timing-function:ease-in}
#cust{position:absolute;left:50%;bottom:34%;height:70%;transform:translate(-50%,6%);opacity:0;transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1);cursor:pointer;z-index:2}
#cust.show{opacity:1;transform:translateX(-50%)}
#cust .b{animation:bre 5s ease-in-out infinite}
@keyframes bre{50%{transform:translateY(4px)}}
.eyes{animation:blink 4.5s infinite;transform-box:fill-box;transform-origin:center}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.frame{position:absolute;left:0;right:0;top:0;height:62%;pointer-events:none;z-index:5;box-shadow:inset 0 0 0 1.5cqw #06080f,inset 0 0 0 1.7cqw #263150,inset 0 0 9cqw 2cqw #000d;background:linear-gradient(112deg,transparent 28%,#ffffff0b 30%,transparent 36%),linear-gradient(112deg,transparent 52%,#ffffff07 53%,transparent 57%)}
#signs{position:absolute;top:3.4%;left:50%;transform:translateX(-50%);display:flex;gap:1cqw;z-index:6}
.sign{font:700 12px/1 system-ui;letter-spacing:.14em;color:var(--c);border:1.5px solid var(--c);border-radius:6px;padding:5px 9px;background:color-mix(in srgb,var(--c) 10%,#05070f);text-shadow:0 0 6px var(--c),0 0 14px var(--c);box-shadow:0 0 12px var(--c),inset 0 0 8px color-mix(in srgb,var(--c) 55%,transparent);animation:pop .8s cubic-bezier(.2,1.6,.4,1)}
#signs .sign{font-size:1.1cqw;padding:.45cqw .8cqw}.sign:nth-child(3n){animation:flick 5s infinite}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.sign.big{display:inline-block;animation:none}
#note{position:absolute;left:2.5%;top:7%;width:16cqw;padding:1.3cqw;background:#f0e5cb;color:#2a2118;font:italic 1.35cqw/1.45 Georgia,serif;transform:rotate(-3deg) translateY(-4cqw);opacity:0;transition:.5s;z-index:7;box-shadow:0 .8cqw 1.8cqw #000a;border-radius:2px}
#note.on{opacity:1;transform:rotate(-2.5deg)}
#note::before{content:"";position:absolute;top:-.6cqw;left:50%;width:1.2cqw;height:1.2cqw;border-radius:50%;background:#d33;box-shadow:0 .3cqw .5cqw #0007}
#note b{display:block;font:700 1cqw system-ui;letter-spacing:.25em;opacity:.6;margin-bottom:.4cqw}
#note p.ok{text-decoration:line-through;opacity:.5}#note small{display:block;font-size:.95cqw;opacity:.65;margin-top:.7cqw}
#bubble{position:absolute;left:50%;top:7%;transform:translate(-50%,-8px);max-width:36cqw;background:#0b101cf0;border:1px solid var(--cy);border-radius:2cqw;padding:.7cqw 1.6cqw;text-align:center;box-shadow:0 0 24px #38f0ff55;opacity:0;transition:.35s;pointer-events:none;font:italic 1.7cqw/1.4 Georgia,serif;z-index:8}
#bubble.on{opacity:1;transform:translate(-50%,0)}
#bubble small{display:block;font:600 .95cqw system-ui;font-style:normal;letter-spacing:.12em;color:var(--cy);text-shadow:0 0 8px var(--cy)}
.desk{position:absolute;left:0;right:0;bottom:0;top:62%;z-index:6;border-top:.45cqw solid #38f0ff;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23w)'/%3E%3C/svg%3E"),linear-gradient(#3a2a21,#120c09);background-blend-mode:overlay;box-shadow:0 -1.5cqw 4cqw #000a,0 -.2cqw 1.6cqw #38f0ff88}
.shelf{position:absolute;left:3%;top:12%;display:flex;gap:1.5cqw}
.item{position:relative;width:9.5cqw;height:11.5cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4cqw;background:linear-gradient(#2c3654,#171d31);border:1px solid #3d4b72;border-radius:1cqw;cursor:grab;touch-action:none;box-shadow:0 .6cqw 1.3cqw #000a,inset 0 0 1.6cqw #38f0ff14;transition:border-color .2s}
.item:hover{border-color:var(--cy)}.item span{font-size:4.6cqw;line-height:1;filter:drop-shadow(0 .3cqw .4cqw #000a)}.item small{font:600 1.05cqw system-ui;color:#a9b6d0}
.item em{position:absolute;top:.5cqw;right:.7cqw;font:700 1cqw system-ui;font-style:normal;color:var(--am)}
.ghost{z-index:50;opacity:.95;cursor:grabbing}
#bag{position:absolute;left:57%;top:2%;width:13cqw;height:16.5cqw;cursor:grab;touch-action:none;transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:3}
#bag.held{transition:none;z-index:60;cursor:grabbing;filter:drop-shadow(0 1.5cqw 1.5cqw #000a)}
.bagc{position:absolute;inset:3.2cqw 0 0;background:linear-gradient(90deg,#9c7140,#dcb273 45%,#946a39);clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);z-index:2}
.bagc::after{content:"LAST LIGHT";position:absolute;left:0;right:0;top:46%;text-align:center;font:700 1.1cqw Georgia,serif;letter-spacing:.2em;color:#6b4423aa}
.bagc::before{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(#ffffff40,transparent)}
#peek{position:absolute;left:0;right:0;top:0;display:flex;justify-content:center;gap:.5cqw;font-size:3.4cqw;line-height:1;z-index:1}
.reg{position:absolute;right:3%;top:10%;width:17cqw;padding:1cqw 1.2cqw;background:linear-gradient(#222b44,#121827);border:1px solid #ffb34777;border-radius:1cqw;box-shadow:0 .6cqw 1.5cqw #000a}
.reg small{font:700 .95cqw system-ui;letter-spacing:.25em;color:var(--am)}
#rtxt{margin-top:.5cqw;background:#06210f;color:#5dffb0;font:700 2.8cqw monospace;text-align:right;padding:.4cqw 1cqw;border-radius:.5cqw;text-shadow:0 0 8px #5dffb0}
.hint{position:absolute;bottom:2.5%;left:0;right:0;text-align:center;font-size:1.05cqw;color:#9a8f86;letter-spacing:.08em}
.vig{position:absolute;inset:0;pointer-events:none;z-index:20;background:radial-gradient(ellipse at 50% 42%,transparent 42%,#000d 108%)}
.vig::after{content:"";position:absolute;inset:0;opacity:.11;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .5s steps(3) infinite}
@keyframes grain{to{background-position:70px 40px}}
#dock{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn.sm{padding:.6em 1.5em;font-size:.9rem}.btn.ping{animation:ping 1.2s 4}
#panel{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);max-height:none;border-radius:22px 0 0 22px;transform:translateX(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:30;padding-top:46px;background:#0c111ef2}
#panel.open{transform:none}
.x{position:absolute;top:10px;right:12px;background:none;border:1px solid var(--ln);border-radius:50%;width:30px;height:30px;color:var(--mu)}
.tc svg{align-self:center;filter:drop-shadow(0 0 8px var(--rc))}

/* ===== v2 restyle: grimy night-shift booth ===== */
:root{--bg:#14110e;--p:#e7dcc3;--p2:#d8ccb0;--ln:#1a1511;--tx:#241c14;--mu:#6f604b;--cy:#7fb89a;--am:#e0a526;--pk:#b8321f;--ink:#120e0a}
body{font-family:"Courier New",Courier,monospace;color:#e7dcc3;background:radial-gradient(900px 600px at 50% 0,#2a2218,transparent 70%),#14110e}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.14;mix-blend-mode:multiply;background:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 3px)}
button{touch-action:manipulation}
#snow i{background:#d9d2c0;box-shadow:none}
#title{background:radial-gradient(700px 420px at 50% 40%,#3a2d1c,transparent 70%),linear-gradient(#0c0a08,#1a140e 62%,#2a1d12)}
#title::before{background:#0a0806;border-top:4px solid var(--ink);box-shadow:none}
#title::after{opacity:.35}
.logo{font:400 clamp(3.4rem,15vw,9rem)/.95 Impact,"Arial Narrow Bold","Haettenschweiler",sans-serif;font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:#e7dcc3;text-shadow:5px 5px 0 var(--pk),9px 9px 0 var(--ink);animation:none;transform:rotate(-2deg)}
.sub{font:700 clamp(.9rem,3vw,1.3rem) "Courier New",monospace;letter-spacing:.5em;color:var(--am);text-shadow:none;background:var(--ink);padding:.3em .9em .3em 1.2em;margin:1.2em 0 1.4em}
.tag{font:italic 1rem "Courier New",monospace;color:#b3a688}
.btn{background:var(--am);color:var(--ink);border:3px solid var(--ink);border-radius:4px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-shadow:none;box-shadow:5px 5px 0 var(--ink);animation:none}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);background:#f0b93a}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
header h2{font:400 1.8rem Impact,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#e7dcc3;text-shadow:3px 3px 0 var(--pk)}
header small{color:var(--am);text-shadow:none;letter-spacing:.3em}
.hud span{background:var(--p);color:var(--mu);border:3px solid var(--ink);border-radius:3px;backdrop-filter:none;box-shadow:3px 3px 0 var(--ink);font-weight:700}
.hud b{color:var(--ink)}#cash{color:#2f6a2a;text-shadow:none}
#panel{background:#cfc2a3;color:var(--tx);border:4px solid var(--ink);border-right:0;border-radius:6px 0 0 6px;box-shadow:-8px 0 0 #0006;backdrop-filter:none}
nav{background:#b9ab8a;border:3px solid var(--ink);border-radius:3px}
nav button{color:var(--mu);border-radius:2px;font-weight:700}
nav button.on{background:var(--ink);color:var(--am);text-shadow:none;box-shadow:none;border-color:var(--ink)}
h3{font:400 1.1rem Impact,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:3px solid var(--ink)}
.row{background:var(--p);border:2px solid var(--ink);border-radius:3px;box-shadow:3px 3px 0 #0004}
.row:hover{border-color:var(--ink);transform:translate(-1px,-1px)}
.row small{color:var(--mu)}
.buy{background:var(--am);color:var(--ink);border:2px solid var(--ink);border-radius:3px;font-weight:700;text-shadow:none;box-shadow:2px 2px 0 var(--ink)}
.buy:hover:not(:disabled){box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
.buy:active:not(:disabled){transform:translate(2px,2px);box-shadow:none}
.buy:disabled{opacity:.45;box-shadow:none}
.x{border:2px solid var(--ink);border-radius:3px;color:var(--ink);background:var(--p)}
.tc{background:var(--p);color:var(--tx);border:2px solid var(--ink);border-radius:3px;box-shadow:3px 3px 0 #0004}
.tc small,.tc p{color:var(--tx)}.tc em{text-shadow:none;font-weight:700;color:var(--pk)}.tc.lock{background:#b9ab8a;border:2px dashed var(--ink)}
#toast{background:var(--p);color:var(--ink);border:3px solid var(--ink);border-radius:3px;box-shadow:5px 5px 0 var(--ink);font-weight:700}
#stage{border:5px solid var(--ink);border-radius:6px;box-shadow:0 0 0 3px #3a3026,10px 10px 0 #0008}
.out{background:linear-gradient(#05070c,#16203a 55%,#3a2a3a 90%,#5a3a30)}
.aur{opacity:.35;filter:blur(4cqw) saturate(.6)}
.frame{box-shadow:inset 0 0 0 1.6cqw #1c1812,inset 0 0 0 2cqw #5a4c38,inset 0 0 8cqw 2cqw #000e}
.sign{border-radius:2px;border-width:2px;font-family:"Courier New",monospace}
#note{background:#e9dfc4;border-radius:0;font-family:"Courier New",monospace;font-style:normal}
#bubble{background:#e7dcc3;color:var(--ink);border:.35cqw solid var(--ink);border-radius:.8cqw;box-shadow:.6cqw .6cqw 0 #000a;font-family:"Courier New",monospace;font-style:normal;font-weight:700}
#bubble small{color:var(--pk);text-shadow:none}
.desk{border-top:.7cqw solid var(--ink);box-shadow:0 -1cqw 3cqw #000a}
.item{background:linear-gradient(#c9ad7a,#a98b57);border:.3cqw solid var(--ink);border-radius:.5cqw;box-shadow:.5cqw .5cqw 0 #000a}
.item:hover{border-color:var(--ink);filter:brightness(1.12);transform:translateY(-.4cqw)}
.item small{color:var(--ink);font-family:"Courier New",monospace}.item em{color:var(--pk)}
.reg{background:#3a3a34;border:.35cqw solid var(--ink);border-radius:.5cqw}
.reg small{color:#d8cfb8}#rtxt{background:#0b1c0e;color:#6fe08a;border-radius:.3cqw;text-shadow:0 0 .8cqw #6fe08a}
.hint{color:#b3a688}
.vig::after{opacity:.2}
.gw{position:fixed;z-index:50;pointer-events:none;container-type:size}
.gw .item{cursor:grabbing;transform-origin:center}
#stage .item,#bag,#cust{cursor:pointer}
@media(max-width:700px){
#stage{aspect-ratio:3/4;width:100%;min-height:0}
.out{inset:0 0 44% 0}.frame{height:56%}.desk{top:56%}
.shelf{top:5%;gap:3cqw;left:3%}
.item{width:28cqw;height:30cqw;border-radius:1.5cqw}.item span{font-size:12cqw}.item small{font-size:3.2cqw}.item em{font-size:3.2cqw}
#bag{left:auto;right:4%;top:52%;width:30cqw;height:34cqw}.bagc::after{font-size:2.6cqw}#peek{font-size:8cqw}
.reg{left:4%;right:auto;top:56%;width:44cqw;padding:2.5cqw}.reg small{font-size:2.6cqw}#rtxt{font-size:7cqw}
.hint{font-size:2.6cqw;bottom:1.5%}
#signs .sign{font-size:2.6cqw;padding:1cqw 1.6cqw}#bubble{font-size:3.6cqw;max-width:80cqw}#bubble small{font-size:2.4cqw}
#note{width:34cqw;font-size:3cqw;padding:2.5cqw;top:12%}#note b{font-size:2.4cqw}#note small{font-size:2.4cqw}
#cust{height:56%;bottom:44%}
}

@media(max-width:700px){
#stage{aspect-ratio:5/7}
.out{inset:0 0 48% 0}.frame{height:52%}.desk{top:52%}
.item{width:26cqw;height:25cqw}.item span{font-size:10cqw}.shelf{top:6%}
#bag{top:46%;width:28cqw;height:30cqw}#peek{font-size:7cqw}
.reg{top:52%;width:44cqw}
.hint{display:none}
#cust{height:52%;bottom:48%}
}

/* v3: spacing, rarity, aura */
#dock{margin-top:26px;position:relative;z-index:2}
#ticker{margin-top:14px;text-align:center;color:#b3a688;min-height:1.5em}
@media(max-width:700px){#dock{margin-top:22px}}
.r-common{--rc:#7a6a52}.r-uncommon{--rc:#2f7a5a}.r-rare{--rc:#7a3fa0}.r-legendary{--rc:#c77d0a}
.tc.r-rare{box-shadow:3px 3px 0 #0004,0 0 14px #9b5fd066}
.tc.r-legendary{box-shadow:3px 3px 0 #0004,0 0 18px #ffb52fb0;background:linear-gradient(160deg,#f3e2a8,var(--p))}
.tc b{font-size:.85rem}
#cust[data-r=uncommon]{filter:drop-shadow(0 0 1.2cqw #4fd09a66)}
#cust[data-r=rare]{filter:drop-shadow(0 0 2cqw #b06bffaa)}
#cust[data-r=legendary]{filter:drop-shadow(0 0 2.6cqw #ffc94dcc);animation:lg 2.4s ease-in-out infinite alternate}
@keyframes lg{to{filter:drop-shadow(0 0 4cqw #ffe28a)}}

/* v4: cozy lamp-lit booth */
:root{--ink:#2b1d13;--p:#f1e3c6;--p2:#e4d3ae;--am:#f2ab3c;--pk:#c8452c}
body{background:radial-gradient(900px 600px at 50% 0,#4a3220,transparent 70%),#1d1510}
body::after{opacity:.06}
#title{background:radial-gradient(700px 420px at 50% 40%,#5e3d1e,transparent 70%),linear-gradient(#170f09,#2c1d12 62%,#4a2c16)}
#title::before{background:#120c07}
.btn{border-radius:14px}.hud span{border-radius:10px}.row,.tc,#toast{border-radius:8px}
#panel{background:#dac9a3;border-radius:14px 0 0 14px}
.out{background:linear-gradient(#0b0b1c,#2a1c3c 48%,#6a3a3e 86%,#9a5c3a)}
.aur{opacity:.28}
.frame{box-shadow:inset 0 0 0 1.6cqw #2b1d13,inset 0 0 0 2cqw #8a6a44,inset 0 0 8cqw 2cqw #1a0d05cc}
.frame::before{content:"";position:absolute;left:3%;right:3%;top:2.4%;height:1.8cqw;background:radial-gradient(circle,#fff0b8 0 .35cqw,#ffc15a .55cqw,transparent .95cqw) 0 0/4.2cqw 100% repeat-x;filter:drop-shadow(0 0 .7cqw #ffb347);animation:tw 3.2s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.65}to{opacity:1}}
.desk{border-top-color:#8a6a44}
.desk::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 22% 0,#ffb34755,transparent 62%),radial-gradient(ellipse at 88% 0,#ffb34733,transparent 55%)}
.desk::before{content:"☕";position:absolute;left:41%;top:14%;font-size:5cqw;line-height:1;filter:drop-shadow(.3cqw .5cqw .5cqw #0009)}
.vig{background:radial-gradient(ellipse at 50% 42%,transparent 55%,#1a0d05aa 118%)}
.item{border-radius:1cqw}
#cust svg,#cust{image-rendering:pixelated}
.rh{grid-column:1/-1;margin:12px 0 0}
.tc svg{image-rendering:pixelated}
@media(max-width:700px){.desk::before{content:none}}
#bubble{left:73%;top:6%;max-width:34cqw}
@media(max-width:700px){#bubble{left:50%;top:7%;max-width:80cqw}}

/* v5: icons + cars */
.mi{width:1em;height:1em;display:inline-block;vertical-align:-.15em;overflow:visible}
.hi{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.25em}.hi .mi{width:100%;height:100%;vertical-align:top}
.item span{display:block}.item span .mi{filter:drop-shadow(0 .3cqw .4cqw #0006)}
.btn .hi{margin-right:.2em}
#car{left:5%;bottom:4%;width:36cqw;height:auto;aspect-ratio:2.4/1;background:none;border-radius:0;filter:none}
#car::before,#car::after{content:none}
#car svg{width:100%;height:100%;display:block;overflow:visible}
#car{bottom:8%}
.desk::before{content:"";width:6cqw;height:6cqw;font-size:0;filter:drop-shadow(.3cqw .5cqw .5cqw #0009);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg stroke='%232b1d13' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M16 12q-3-4 0-8M25 12q-3-4 0-8' stroke='%23f9f0dc' fill='none'/%3E%3Cpath d='M8 16H32V32Q32 43 20 43Q8 43 8 32Z' fill='%23f1e3c6'/%3E%3Cpath d='M32 20H37Q42 20 42 25Q42 31 32 31' fill='none'/%3E%3Cpath d='M10 23H30' stroke='%23c8452c' stroke-width='3.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}

/* v9: smooth faces, new cars, update log, sound */
#cust svg,#cust,.tc svg{image-rendering:auto}
#cust{will-change:transform,opacity;transition:opacity .75s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
#cust .b{transform-box:fill-box;transform-origin:50% 100%;animation:bre2 6s ease-in-out infinite}
@keyframes bre2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(4px) rotate(.5deg)}}
#bag .bagc{transform-origin:50% 100%}#bag.pop .bagc{animation:bagpop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes bagpop{40%{transform:scale(1.07,.93)}}
#car{will-change:transform}
#car.in,#car.go{transition:transform 2.6s cubic-bezier(.22,.8,.24,1)}
#car.go{transform:translateX(95cqw);transition-duration:2.2s;transition-timing-function:cubic-bezier(.5,0,.9,.4)}
.wh{transform-box:fill-box;transform-origin:center}
#car.in .wh{animation:wspin 2.6s cubic-bezier(.22,.8,.24,1)}
#car.go .wh{animation:wspin2 2.2s cubic-bezier(.5,0,.9,.4) forwards}
@keyframes wspin{from{transform:rotate(-1260deg)}to{transform:none}}
@keyframes wspin2{to{transform:rotate(1260deg)}}
#car.in .cb{animation:brake 2.6s ease-out}
#car.go .cb{animation:accel 1.4s ease-out forwards}
@keyframes brake{0%{transform:none}60%{transform:rotate(.6deg)}85%{transform:rotate(1.6deg)}93%{transform:rotate(-.5deg)}100%{transform:none}}
@keyframes accel{40%{transform:rotate(-1.6deg)}100%{transform:rotate(-.4deg)}}
#car.in .ci{animation:cidle .4s ease-in-out 2.7s infinite}
@keyframes cidle{50%{transform:translateY(-.6px)}}
.bm{animation:beam 3s ease-in-out infinite}@keyframes beam{50%{opacity:.7}}
.pf{opacity:0;transform-box:fill-box;transform-origin:center;animation:puff 1.8s ease-out infinite}
@keyframes puff{0%{opacity:.5;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(-26px,-12px) scale(1.6)}}
#title{overflow-y:auto}.tag{margin-bottom:1.4rem}
#updlog{width:min(440px,92vw);margin-top:1.6rem;text-align:left;background:var(--p);color:var(--tx);border:4px solid var(--ink);border-radius:4px;box-shadow:6px 6px 0 var(--ink);padding:12px 14px;max-height:30vh;overflow:auto;font:13px/1.5 "Courier New",monospace}
#updlog h4{font:400 1.2rem Impact,sans-serif;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
#updlog details{border-top:2px solid var(--ink);padding:6px 0}
#updlog summary{cursor:pointer;font-weight:700;list-style:none}
#updlog summary::before{content:"▸ "}#updlog details[open] summary::before{content:"▾ "}
#updlog li{margin:3px 0 3px 18px}
#updlog .new{background:var(--pk);color:#fff;padding:0 6px;font-size:11px;margin-left:8px}
#mute{background:var(--p);color:var(--ink);border:3px solid var(--ink);border-radius:3px;box-shadow:3px 3px 0 var(--ink);padding:.4em .9em;font:700 inherit system-ui;cursor:pointer}
#mute[aria-pressed=true]{opacity:.6}

/* v1.5: bag, minigames */
svg.bagc{inset:0;width:100%;height:100%;background:none;clip-path:none;z-index:2;overflow:visible}
.bagc::before,.bagc::after{content:none!important}
.bagc .shut{display:none}#bag.sealed .shut{display:inline}#bag.sealed .in{display:none}#bag.sealed #peek{visibility:hidden}
#peek{top:-1.4cqw}
#seal{position:absolute;left:0;right:0;top:0;height:34%;display:none;z-index:5;cursor:ew-resize;touch-action:none}
#seal.on{display:block;animation:sealp 1.3s ease-in-out infinite}
@keyframes sealp{50%{background:#f2c94c44}}
#seal::before{content:"";position:absolute;left:8%;right:8%;top:56%;border-top:3px dashed #2b1d13}
#seal i{position:absolute;left:8%;top:56%;margin-top:-.5cqw;height:1cqw;width:0;background:#f2c94c;border:2px solid #2b1d13;border-radius:99px}
#mg{position:absolute;inset:0;z-index:30;display:none;place-items:center;background:#000a}
#mg.on{display:grid;animation:mgin .3s ease-out}@keyframes mgin{from{opacity:0}}
.mgc{background:var(--p);color:var(--tx);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);border-radius:4px;padding:2cqw 3cqw;text-align:center;min-width:30cqw}
.mgc h3{font:400 2.6cqw Impact,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.mgc p{font:1.5cqw "Courier New",monospace;margin:.5cqw 0 1.4cqw;min-height:2em}
.gauge{position:relative;width:5cqw;height:18cqw;border:3px solid var(--ink);border-radius:99px;background:#d8ccb0;overflow:hidden;margin:0 auto 1.4cqw}
#gf{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(#e0a526,#c8452c)}
.gz{position:absolute;left:0;right:0;height:12%;background:#6fae6a;opacity:.85;border-block:2px solid var(--ink);z-index:2}
#pot{position:relative;width:15cqw;height:15cqw;margin:0 auto 1.4cqw;touch-action:none;cursor:grab}
#pot .mi{position:absolute;left:20%;top:20%;width:60%;height:60%}#pot svg:not(.mi){position:absolute;inset:0;width:100%;height:100%}
#mgs{margin-top:1.2cqw}

/* v1.6: 3D */
#view3d{position:fixed;inset:0;width:100%;height:100%;z-index:1;display:block;background:#05070f}
#app{position:fixed;inset:0;z-index:6;pointer-events:none;min-height:0;padding:12px 18px}#app header{pointer-events:auto}
#stage,#dock,#ticker{display:none!important}
#title{background:radial-gradient(800px 420px at 50% 42%,#0005,#000c)!important}#title::before,#title::after{display:none}
#ctl{color:#d9c9a6;font:13px "Courier New",monospace;margin-top:.8rem;letter-spacing:.05em}
#cross{position:fixed;left:50%;top:50%;width:8px;height:8px;margin:-4px;border:2px solid #f1e3c6;border-radius:50%;z-index:7;opacity:.7;pointer-events:none;transition:.15s}
#cross.hot{background:var(--am);border-color:var(--ink);transform:scale(1.8);opacity:1}
#pr3{position:fixed;left:50%;top:56%;transform:translateX(-50%);z-index:7;pointer-events:none;color:#fff;font:700 15px "Courier New",monospace;text-shadow:0 2px 6px #000,0 0 3px #000;letter-spacing:.04em}
#o3{position:fixed;left:18px;top:84px;z-index:7;width:230px;padding:10px 14px;background:#f0e5cb;color:#2a2118;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font:14px/1.5 "Courier New",monospace;transform:rotate(-1.5deg);opacity:0;transition:.3s;pointer-events:none}
#o3.on{opacity:1}#o3 b{display:block;font:400 16px Impact,sans-serif;letter-spacing:.2em;opacity:.7}
#o3 p{display:flex;align-items:center;gap:8px}#o3 p span{flex:1}#o3 p.ok{text-decoration:line-through;opacity:.5}#o3 svg{width:22px;height:22px}#o3 em{font-style:normal;font-weight:700}#o3 small{display:block;margin-top:6px;opacity:.7;font-size:12px}
#bub3{position:fixed;left:50%;top:14%;transform:translate(-50%,-8px);z-index:7;max-width:min(80vw,420px);background:var(--p);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:8px 16px;text-align:center;font:italic 17px/1.4 Georgia,serif;opacity:0;transition:.3s;pointer-events:none}
#bub3.on{opacity:1;transform:translate(-50%,0)}#bub3 small{display:block;font:700 11px "Courier New",monospace;font-style:normal;letter-spacing:.14em;color:var(--pk);text-transform:uppercase}
#rl3{position:fixed;left:50%;bottom:9%;transform:translateX(-50%);z-index:7;background:#000b;color:#fff;border:2px solid var(--p);padding:8px 18px;border-radius:99px;font:14px "Courier New",monospace;opacity:0;pointer-events:none;transition:.3s}#rl3.on{opacity:1}
#mg{position:fixed;z-index:60}
#tapebar{width:320px;height:30px;margin:0 auto 14px;border:3px solid var(--ink);border-radius:99px;background:#d8ccb0;overflow:hidden;touch-action:none;cursor:ew-resize}#tapebar i{display:block;height:100%;width:0;background:#f2c94c}
body.in3d *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* v1.7: computer + book UIs, reset, 3D snow */
#snow{display:none!important}
#rst{display:block;margin:.8rem auto 0;background:none;border:2px solid #f1e3c666;color:#d9c9a6;font:12px "Courier New",monospace;padding:.4em 1em;border-radius:99px;cursor:pointer}#rst:hover{border-color:var(--am);color:var(--am)}
#rst2{background:var(--p);color:var(--ink);border:3px solid var(--ink);border-radius:3px;box-shadow:3px 3px 0 var(--ink);padding:.4em .9em;font:700 inherit system-ui;cursor:pointer}
#panel.pc,#panel.bkm{top:6vh;bottom:auto;left:0;right:0;margin:0 auto;width:min(900px,94vw);max-height:88vh;transform:translateY(130%);border-radius:18px}
#panel.pc.open,#panel.bkm.open{transform:none}#panel.pc nav,#panel.bkm nav{display:none}
#panel.pc{background:#08120e!important;color:#b8ffcf;border:16px solid #2a2d36;box-shadow:0 0 0 4px #14161c,0 30px 90px #000d,inset 0 0 70px #0f2a1c;font-family:"Courier New",monospace;padding:0 16px 16px;background-image:repeating-linear-gradient(#0000 0 2px,#0004 2px 3px)!important}
#panel.pc::before{content:"LAST LIGHT OS  v1.7  |  SUPPLIES + UPGRADES";display:block;margin:0 -16px 8px;padding:8px 16px;background:#0f3b27;color:#7bf0a0;font:700 13px "Courier New",monospace;letter-spacing:.12em}
#panel.pc h3{color:#7bf0a0;border-color:#1f5a3a}#panel.pc .row{background:#0d2218;border-color:#1f5a3a;color:#b8ffcf}#panel.pc .row small{color:#6fd0a0}#panel.pc .buy{color:#7bf0a0;border-color:#7bf0a0;text-shadow:0 0 8px #7bf0a0aa}
#panel.pc .x{border-color:#1f5a3a;color:#7bf0a0;top:4px;right:4px}
#panel.bkm{background:linear-gradient(90deg,#e6d6b4,#f4e8cc 49%,#b79d70 50%,#f4e8cc 51%,#e6d6b4)!important;color:#2b1d13;border:12px solid #5a1f28;border-radius:10px 24px 24px 10px;font-family:Georgia,serif;box-shadow:0 30px 90px #000d,inset 0 0 40px #0003}
#panel.bkm h3{color:#2b1d13;border-color:#8b6f47;font-family:Georgia,serif}#panel.bkm .book{grid-template-columns:repeat(4,1fr)}
#panel.bkm .tc{background:#fbf3df;color:#2b1d13;border-color:var(--rc)}#panel.bkm .tc small{color:#6f604b}#panel.bkm .tc.lock{background:#e4d6b4;opacity:.7}#panel.bkm .x{border-color:#5a1f28;color:#5a1f28;top:2px;right:2px}
#panel.pc .buy{background:#0d2218!important;box-shadow:none}#panel.pc .buy:disabled{opacity:.35}

#diag{display:none;position:fixed;left:12px;bottom:12px;z-index:70;max-width:min(560px,92vw);max-height:60vh;overflow:auto;margin:0;padding:10px 14px;background:#000d;color:#9ff0b8;border:2px solid #38f0ff;font:12px/1.5 "Courier New",monospace;white-space:pre-wrap;pointer-events:none}#diag.on{display:block}