:root{--chrome1:#fff;--chrome2:#8d97a3;--navy:#0c1838;--beige:#d9c9a6;--burg:#6a0f1c;--teal:#3ff2e0;--ink:#0a0b0f}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'IBM Plex Mono',monospace;color:#e8eaee;touch-action:none;user-select:none;-webkit-user-select:none}
#scene-container{position:fixed;inset:0}
#scene-container canvas{display:block}
.hidden{display:none!important}
.chrome{font-family:'Michroma',sans-serif;background:linear-gradient(180deg,#fff 0%,#c9d0d8 40%,#5e6874 52%,#e9eef3 70%,#9aa3ad 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.8))}
.zlabel{display:block;font-size:9px;letter-spacing:4px;color:var(--teal);opacity:.8}
#zone{position:fixed;top:14px;left:16px;pointer-events:none;max-width:70vw}
#zoneName{font-size:clamp(13px,2.2vw,22px);letter-spacing:2px;display:block}
#zone.flash #zoneName{animation:zflash .9s ease}
@keyframes zflash{0%{opacity:0;transform:translateX(-14px)}100%{opacity:1;transform:none}}
#memos{position:fixed;top:14px;right:16px;text-align:right;pointer-events:none}
#memoCount{font-size:clamp(18px,3vw,30px)}
#memos.pop #memoCount{animation:pop .6s ease}
@keyframes pop{50%{transform:scale(1.4)}}
#crosshair{position:fixed;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.5),0 0 10px var(--teal);pointer-events:none}
#crosshair.on{background:var(--teal);width:14px;height:14px;margin:-7px;background:transparent;border:2px solid var(--teal)}
#prompt{position:fixed;left:50%;top:calc(50% + 22px);transform:translateX(-50%);font-family:'Michroma';font-size:11px;letter-spacing:3px;color:var(--teal);text-shadow:0 0 8px rgba(63,242,224,.7);pointer-events:none;white-space:nowrap}
#minimap{position:fixed;right:16px;bottom:44px;width:90px;height:190px;border:2px solid #aab3bd;border-radius:4px;background:rgba(5,6,10,.7);box-shadow:inset 0 0 0 1px #000,0 0 18px rgba(0,0,0,.6)}
#toggles{position:fixed;left:16px;bottom:40px;display:flex;flex-direction:column;gap:6px}
button{font-family:'Michroma',sans-serif;font-size:10px;letter-spacing:2px;color:#111;cursor:pointer;border:1px solid #fff;border-radius:3px;padding:8px 12px;background:linear-gradient(180deg,#fafcff,#b7c0c9 48%,#8a949e 52%,#dfe5ea);box-shadow:0 2px 0 #444,inset 0 1px 0 #fff}
button:active{transform:translateY(1px);box-shadow:0 1px 0 #444}
#resumeHint{position:fixed;left:50%;top:62%;transform:translateX(-50%);font-family:'Michroma';font-size:12px;letter-spacing:3px;padding:10px 16px;background:rgba(0,0,0,.6);border:1px solid #666;display:none}
#resumeHint.show{display:block}
#mobile #joy{position:fixed;left:24px;bottom:110px;width:120px;height:120px;border-radius:50%;border:2px solid rgba(220,230,240,.6);background:radial-gradient(circle,rgba(255,255,255,.08),rgba(0,0,0,.3))}
#knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:linear-gradient(180deg,#fff,#8a949e);box-shadow:0 2px 6px #000}
#inspectBtn{position:fixed;right:120px;bottom:120px;padding:18px 16px;font-size:11px}
#inspect{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);z-index:20}
.panel{position:relative;width:min(560px,90vw);padding:22px 24px 16px;background:linear-gradient(160deg,rgba(20,24,30,.92),rgba(8,9,12,.95));border:3px solid;border-image:linear-gradient(135deg,#fff,#6c757f,#f4f7fa,#50585f) 1;box-shadow:0 20px 60px rgba(0,0,0,.8);animation:rise .3s ease}
.panel::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.97)}}
.ptitle{font-family:'Michroma';font-size:14px;letter-spacing:3px;color:var(--teal);margin-bottom:12px;border-bottom:1px solid #333;padding-bottom:8px}
.ptext{font-size:15px;line-height:1.55;min-height:60px;white-space:pre-wrap}
.phint{margin-top:14px;font-size:9px;letter-spacing:3px;opacity:.5;text-align:right}
#inspect.terminal .panel{background:#020a03;border-image:linear-gradient(135deg,#d8cfb4,#8c826a) 1}
#inspect.terminal .ptitle,#inspect.terminal .ptext{font-family:'VT323',monospace;color:#39ff6a;text-shadow:0 0 6px rgba(57,255,106,.7);font-size:20px}
#inspect.memo .panel{background:linear-gradient(#fff7c2,#f3e38a);color:#2a2410;border-image:linear-gradient(135deg,#e8d77a,#b09a3a) 1}
#inspect.memo .ptitle{color:#7a1020;border-color:#c9b760}
#start{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#1b2440 0%,#05060a 70%),#000;overflow:auto;padding:16px}
#start::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 58px,rgba(255,255,255,.04) 58px 60px),linear-gradient(0deg,rgba(63,242,224,.07),transparent 40%)}
.badge{position:relative;width:min(400px,92vw);border-radius:14px;padding:20px;color:#1a1a1a;background:linear-gradient(170deg,#f3ecd9,#d9cba8);box-shadow:0 0 0 6px rgba(255,255,255,.18),0 30px 80px rgba(0,0,0,.8);overflow:hidden;animation:badgeIn .8s cubic-bezier(.2,.9,.3,1.2)}
@keyframes badgeIn{from{transform:translateY(40px) rotate(-6deg);opacity:0}}
.holo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,120,220,.25) 42%,rgba(120,255,240,.25) 50%,rgba(255,255,140,.2) 58%,transparent 70%);background-size:250% 100%;animation:holo 4s linear infinite}
@keyframes holo{from{background-position:120% 0}to{background-position:-120% 0}}
.bhead{background:var(--navy);margin:-20px -20px 16px;padding:14px 20px;border-bottom:4px solid #b8c0c8}
.logo{display:block;font-family:'Michroma';font-size:26px;letter-spacing:6px;background:linear-gradient(#fff,#8f99a4 50%,#eef);-webkit-background-clip:text;color:transparent}
.sub{font-size:9px;letter-spacing:3px;color:var(--teal)}
.bbody{display:flex;gap:14px}
.photo{width:90px;height:110px;background:linear-gradient(#6d8fb3,#3f5a7a);border:3px solid #fff;position:relative;overflow:hidden;flex-shrink:0}
.photo .head{position:absolute;left:28px;top:18px;width:34px;height:40px;border-radius:50%;background:#1d2533;box-shadow:0 -8px 0 6px #1d2533}
.photo .shoulders{position:absolute;left:10px;top:62px;width:70px;height:60px;border-radius:40% 40% 0 0;background:#1d2533}
.fields{flex:1;display:flex;flex-direction:column;gap:6px}
.lbl{font-size:10px;letter-spacing:2px}
#nameInput{font-family:'Michroma';font-size:15px;padding:8px;border:none;border-bottom:2px solid #1a1a1a;background:rgba(255,255,255,.5);width:100%;text-transform:uppercase;outline:none}
#clockIn{width:100%;margin-top:16px;padding:14px;font-size:13px}
.howto{margin-top:12px;font-size:9px;letter-spacing:1.5px;line-height:1.7;text-align:center;opacity:.75}
#cert{position:fixed;inset:0;z-index:25;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);padding:16px}
.certcard{width:min(620px,94vw);background:#f6f0dc;color:#2a1f14;padding:28px;text-align:center;border:10px double #6a0f1c;box-shadow:0 0 0 4px #c8b98a,0 30px 90px #000;animation:rise .6s ease}
.ctop{font-family:'Michroma';font-size:10px;letter-spacing:4px;color:#6a0f1c}
.ctitle{font-family:'Michroma';font-size:clamp(18px,4vw,28px);margin:12px 0;letter-spacing:2px}
.cbody{font-size:14px;line-height:1.8}
#certName{font-family:'Michroma';font-size:22px;color:#0c1838;border-bottom:1px solid #2a1f14;padding:0 12px}
.csig{display:flex;justify-content:space-between;margin-top:20px;font-size:11px;font-style:italic}
.cbtns{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
body.gleam::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.06),transparent 60%);mix-blend-mode:screen}
footer{position:fixed;bottom:8px;left:50%;transform:translateX(-50%);z-index:40}
footer a{font-family:'Michroma';font-size:9px;letter-spacing:2px;color:#cfd6dd;text-decoration:none;padding:4px 10px;border:1px solid #555;background:rgba(0,0,0,.5)}
@media (max-width:600px){#toggles button{padding:6px 8px;font-size:8px}#minimap{width:68px;height:143px;bottom:40px}}