:root{--bg: #07090f;--panel: rgba(255, 255, 255, .05);--line: rgba(255, 255, 255, .14);--text: #e6ecf5;--muted: #8b98ac;--accent: #0DD4F2;--good: #4ade80;--font: Inter, system-ui, -apple-system, Segoe UI, sans-serif;--poster-w: clamp(190px, 21vw, 460px);--card-rail-w: clamp(64px, 11vh, 140px);--card-zone-w: clamp(44px, 6.5vh, 90px);--inspect-h: 84vh}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);user-select:none;-webkit-user-select:none;cursor:default}#app{height:100vh;display:flex;flex-direction:column}.hdr{display:flex;align-items:center;gap:20px;padding:1.4vh 2vw;border-bottom:1px solid var(--line)}.l8{--l8-size: clamp(34px, 5.2vh, 64px);display:flex;align-items:center;flex:none}.l8__mark{height:var(--l8-size);width:auto;display:block}.l8__title,.l8__tag{font-family:Barlow,Arial Narrow,Arial,sans-serif;white-space:nowrap;color:var(--text)}.l8__title{padding-left:calc(var(--l8-size) * .2);font-weight:500;font-size:calc(var(--l8-size) * .44);line-height:1;letter-spacing:-.005em}.l8__tag{padding-left:calc(var(--l8-size) * .2);font-weight:400;font-size:max(10px,calc(var(--l8-size) * .2));line-height:1.2;margin-top:calc(var(--l8-size) * .05);letter-spacing:.01em;color:var(--muted)}.hdr__rule{width:1px;align-self:stretch;margin:.4vh 0;background:var(--line);flex:none}.hdr__title{font-size:clamp(16px,2.1vh,30px);font-weight:700;letter-spacing:.01em}.hdr__title span{color:var(--accent)}.hdr__sub{font-size:clamp(11px,1.4vh,17px);color:var(--muted);margin-top:2px}.hdr__spacer{flex:1}.pill{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:clamp(11px,1.4vh,16px);color:var(--muted);white-space:nowrap}.pill__dot{width:9px;height:9px;border-radius:50%;background:#ef4444;transition:background .2s}.pill--live .pill__dot{background:var(--good);box-shadow:0 0 10px var(--good)}.pill--live{color:var(--text)}.pill--btn{font-family:var(--font);cursor:pointer;color:var(--accent);border-color:#0dd4f280;transition:background .15s}.pill--btn:hover{background:#0dd4f229}.pill[hidden]{display:none}.cam{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#000;line-height:0}.cam canvas{display:block;width:clamp(140px,13vh,240px);height:auto}.board{flex:1;display:flex;gap:2vw;padding:2vh 2vw;min-height:0}.poster{display:flex;flex-direction:column;gap:1vh;min-height:0;flex:0 0 var(--poster-w)}.poster img{flex:1;min-height:0;width:100%;object-fit:contain;object-position:top;border-radius:8px;box-shadow:0 14px 40px #0009}.poster__cap{font-size:clamp(10px,1.3vh,15px);color:var(--muted);text-align:center}.zones{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2vw;min-width:0}.zone{display:flex;flex-direction:column;align-items:center;gap:1vh;padding:1.2vh 1vh;border-radius:12px;border:2px dashed var(--line);background:var(--panel);transition:background .15s,border-color .15s,transform .15s}.zone--hot{background:#0dd4f229;border-color:var(--accent);border-style:solid;transform:scale(1.02)}.zone__hdr{width:100%;padding:.9vh 8px;border-radius:8px;text-align:center;font-size:clamp(11px,1.5vh,18px);font-weight:700;color:#fff;line-height:1.2}.zone__dots{display:grid;grid-template-columns:repeat(4,1.5vh);grid-template-rows:repeat(5,1.5vh);gap:.5vh;flex:0 0 auto}.zone__dot{border-radius:50%}.zone__dot--on{background:#fff}.zone__dot--off{border:1px dashed rgba(255,255,255,.22)}.zone__cards{display:flex;flex-wrap:wrap;gap:.8vh;justify-content:center;align-content:flex-start;flex:1}.card{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5vh;padding:.7vh;border-radius:8px;background:#ffffff12;border:1px solid transparent;transition:transform .12s,border-color .12s,background .12s}.card img{width:var(--card-w);height:calc(var(--card-w) * 1.32);object-fit:cover;object-position:top;background:#fff;border-radius:4px}.card span{font-size:clamp(9px,1.25vh,14px);color:var(--text);text-align:center;max-width:var(--card-w);line-height:1.25}.card--hot{border-color:var(--accent);background:#0dd4f224;transform:scale(1.05)}.card--held{opacity:.25}.card--rail{--card-w: var(--card-rail-w)}.card--zone{--card-w: var(--card-zone-w)}.rail{display:flex;align-items:center;justify-content:center;gap:1.2vw;padding:1.4vh 2vw;border-top:1px solid var(--line);background:#0a0a0fb3;min-height:16vh;transition:background .15s}.rail--hot{background:#0dd4f21a}.rail__empty{color:var(--muted);font-size:clamp(12px,1.6vh,18px)}.cursor,.ghost{position:fixed;pointer-events:none}.ghost{z-index:9001}.cursor{z-index:9550;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;border:4px solid var(--accent);background:#0dd4f21a;box-shadow:0 0 22px #0dd4f280;transition:width .09s,height .09s,margin .09s,border-color .09s,background .09s}.cursor--pinch{width:30px;height:30px;margin:-15px 0 0 -15px;border-color:var(--good);background:#4ade8047;box-shadow:0 0 22px #4ade8099}.cursor--hidden{display:none}.cursor__fill{position:absolute;inset:4px;border-radius:50%;background:#0dd4f28c;transform:scale(0);transform-origin:center;transition:transform .06s linear}.cursor--pinch .cursor__fill{display:none}.inspect{position:fixed;inset:0;z-index:9200;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4vh;padding:3vh;background:#07090fd1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:inspectIn .14s ease-out}.inspect--gone{display:none}.inspect img{height:var(--inspect-h);max-width:88vw;width:auto;object-fit:contain;background:#fff;border-radius:6px;box-shadow:0 26px 70px #000000e6}.inspect__cap{font-size:clamp(13px,2vh,26px);font-weight:600;color:var(--text);text-shadow:0 2px 8px rgba(0,0,0,.9)}@keyframes inspectIn{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}.ghost{transform:translate(-50%,-50%) rotate(-3deg) scale(1.12)}.ghost .card{background:#0dd4f233;box-shadow:0 18px 44px #000c}.veil{position:fixed;inset:0;z-index:9500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4vh;text-align:center;background:#07090fed;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:4vh}.veil--gone{display:none}.veil h1{font-size:clamp(26px,6vh,76px);margin:0;font-weight:800;letter-spacing:-.02em}.veil h1 span{color:var(--accent)}.veil p{font-size:clamp(14px,2.4vh,30px);color:var(--muted);margin:0;max-width:24ch;line-height:1.5}.veil__hand{font-size:clamp(50px,12vh,150px);animation:wave 1.6s ease-in-out infinite}@keyframes wave{0%,to{transform:rotate(-12deg)}50%{transform:rotate(14deg)}}.veil__pin{font-size:clamp(50px,14vh,170px);font-weight:800;letter-spacing:.18em;color:var(--good)}.veil__hint{font-size:clamp(11px,1.6vh,18px);color:var(--muted)}.veil__build{position:absolute;bottom:2vh;right:2vw;font-size:clamp(10px,1.2vh,13px);color:var(--muted);opacity:.6}.veil--congrats{background:radial-gradient(ellipse at 75% 65%,rgba(0,194,243,.45) 0%,transparent 50%),radial-gradient(ellipse at 20% 30%,rgba(43,0,250,.4) 0%,transparent 50%),radial-gradient(ellipse at 50% 90%,rgba(13,121,242,.35) 0%,transparent 50%),linear-gradient(135deg,#420df2,#2b00fa 30%,#0d79f2,#00c2f3);-webkit-backdrop-filter:none;backdrop-filter:none;overflow:hidden}.congrats__text{position:relative;z-index:5;text-align:center;opacity:0;transition:opacity 1.5s ease}.congrats__title{font-size:clamp(3rem,8vw,6rem);font-weight:800;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.3);margin-bottom:16px}.congrats__sub{font-size:clamp(1.2rem,3vw,2rem);font-weight:300;color:#ffffffe6;text-shadow:0 2px 10px rgba(0,0,0,.2)}.congrats__pinlabel{margin-top:4vh;font-size:clamp(.8rem,1.6vh,1.1rem);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#ffffffb3}.congrats__pin{font-size:clamp(3rem,11vh,8rem);font-weight:800;letter-spacing:.18em;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.35)}.congrats__time{margin-top:2vh;font-size:clamp(.9rem,2vh,1.4rem);font-weight:300;color:#ffffffd9}.congrats__reset{position:absolute;bottom:4vh;left:50%;transform:translate(-50%);z-index:15;padding:10px 26px;border-radius:999px;cursor:pointer;border:1px solid rgba(255,255,255,.35);background:#ffffff1a;font-size:clamp(.9rem,1.8vh,1.2rem);color:#ffffffd9;transition:background .2s,color .2s}.congrats__reset:hover{background:#ffffff38;color:#fff}.hud{position:fixed;left:12px;bottom:12px;z-index:9600;display:none;padding:10px 14px;border-radius:8px;background:#000000d1;border:1px solid var(--line);font:12px/1.6 ui-monospace,monospace;color:var(--good);white-space:pre}.hud--on{display:block}
