/* Swarm — desktop build. Layout follows the 1440×900 Figma frames: 24px edge gutter, HUD at the edges, hero in the centre. */
:root{
  --bg:#08080a;
  --fg:#ffffff;
  --dim:rgba(255,255,255,.5);
  --dim2:rgba(255,255,255,.4);
  --faint:rgba(255,255,255,.25);
  --line:rgba(255,255,255,.15);
  --warm:#f0e2a4;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Geist",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --g:24px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font-family:var(--mono);font-weight:300;text-transform:uppercase;overflow-x:hidden;cursor:none;-webkit-font-smoothing:antialiased}
body.is-loading{overflow:hidden}
button{font:inherit;color:inherit;text-transform:inherit;background:none;border:0;padding:0;cursor:none}
button:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:1px solid var(--fg);outline-offset:4px}
p{margin:0}
.serif{font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:.02em;line-height:1.25}
.mono12{font-size:12px}
.mono10{font-size:10px}
.dim{color:var(--dim)}

#gl,#fx{position:fixed;inset:0;width:100%;height:100%;display:block}
#gl{z-index:0}#fx{z-index:2;pointer-events:none}
.layer{position:fixed;pointer-events:none;z-index:1}
#spacer{height:730vh}
.ui{position:fixed;z-index:5;transition:opacity .6s ease}
.ui.off{opacity:0;pointer-events:none}

/* hero frame */
#frame{left:0;top:0;width:644px;height:644px;transform-origin:0 0;transition:opacity .6s;will-change:transform}
#frame img{display:block;width:644px;height:644px}
#frame span{position:absolute;left:16px;font-size:10px;color:var(--faint);white-space:nowrap}
.frame-top{top:-29px}.frame-bottom{bottom:-29px}
#plate{left:50%;top:50%;border:1px solid var(--line);transform:translate(-50%,-50%);opacity:0;transition:opacity .6s}

/* trackers */
#trackers{inset:0}
#trackers svg{position:absolute;inset:0;width:100%;height:100%}
#trackers polyline{fill:none;stroke:#fff;stroke-opacity:.22;stroke-width:.6}
.tk{position:absolute;left:0;top:0;font-size:9px;color:var(--fg);white-space:nowrap;will-change:transform}
.tk::before{content:"";position:absolute;left:-8px;top:-8px;width:16px;height:16px;border:.5px solid #fff;border-color:#fff transparent #fff transparent;opacity:.7}
.tk span{position:absolute;left:12px;top:-6px;font-variant-numeric:tabular-nums}

#playLayer{position:fixed;inset:0;z-index:3;pointer-events:none;touch-action:none}
#playLayer.live{pointer-events:auto}

/* preloader */
#pre{position:fixed;inset:0;z-index:20;pointer-events:none}
#prePhrase{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;text-align:center;opacity:0;transition:opacity 1.2s ease}
#preCount{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14px;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .8s}
#preCount img{width:23px;height:23px}
#pre.phrase #prePhrase{opacity:1}
#pre.count #preCount{opacity:1}
#pre.done{opacity:0;transition:opacity .8s}

/* header */
#hdr{left:0;right:0;top:0;padding:var(--g);display:flex;justify-content:space-between;align-items:flex-start}
#logo{display:block;cursor:none}
#logo img{display:block;width:113px;height:28px}
#tabs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:24px;transition:opacity .5s}
.tab{font-size:14px;color:var(--dim2);white-space:nowrap;transition:color .3s}
.tab.on{color:var(--fg)}
.tab:hover{color:var(--fg)}
#sound{color:var(--fg);white-space:nowrap}

/* top-left info */
#info{left:var(--g);top:76px;width:224px;display:grid;gap:12px;font-size:12px;line-height:1.25}
#infoLine{color:var(--dim)}
#infoLabel b{font-weight:300;color:var(--fg)}
#infoLabel{color:var(--dim)}
#infoLabel .w{color:var(--fg)}

/* collection list */
#list{left:var(--g);top:50%;transform:translateY(-50%);display:grid;gap:12px;max-height:calc(100vh - 360px);overflow-y:auto;scrollbar-width:none;padding-right:8px}
#list::-webkit-scrollbar{display:none}
.item{display:flex;align-items:center;gap:12px;font-size:10px;color:var(--dim2);text-align:left;white-space:nowrap}
.item canvas{width:42px;height:42px;display:block;opacity:.4;transition:opacity .3s}
.item.on{color:var(--fg)}
.item.on canvas,.item:hover canvas{opacity:1}
.item:hover{color:var(--fg)}
.item input{font:inherit;text-transform:uppercase;color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--faint);padding:0 0 2px;width:150px;outline:none;cursor:none}
.item input::placeholder{color:var(--fg);opacity:1}

/* headline */
#headline{left:var(--g);bottom:var(--g);display:grid;gap:16px}
#title{white-space:nowrap;margin:0;line-height:normal}

#hintR{right:var(--g);top:50%;transform:translateY(-50%);white-space:nowrap}
#hintR.w{color:var(--fg)}

#zoom{left:50%;bottom:var(--g);transform:translateX(-50%);display:flex;gap:8px;align-items:center;white-space:nowrap}
#zoom{color:var(--fg)}
#zoom button{color:var(--fg)}
#zoomOut,#zoomIn{padding:0 4px;transition:opacity .3s}
#zoomOut:disabled,#zoomIn:disabled{opacity:.4}

#released{right:var(--g);bottom:var(--g);white-space:nowrap}
#released b{font-weight:300;color:var(--fg)}

#palette{right:var(--g);bottom:var(--g);display:grid;gap:8px;width:132px}
#swatches{display:flex;gap:8px}
#swatches button{width:12px;height:12px;border-radius:50%;position:relative}
#swatches button::before{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--c)}
#swatches button.on::after{content:"";position:absolute;inset:-.5px;border-radius:50%;border:.5px solid #fff}

/* panels */
.panel{left:50%;bottom:var(--g);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:24px}
#shepPanel{width:420px}
.prog{width:252px;display:grid;gap:12px;text-align:center}
.bar{height:1px;background:var(--faint);position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;transition:width .3s}
#shepHint,#chlHint{text-align:center;white-space:nowrap}
.doneRow{display:flex;gap:32px;align-items:center;justify-content:center;white-space:nowrap}
.doneRow[hidden]{display:none}
.reset{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.reset.armed{color:var(--warm)}
#chlPanel{width:516px}
#chlPanel .doneRow{justify-content:space-between;width:100%}
.chlRow{display:flex;gap:16px;align-items:center;width:100%}
#target{width:52px;height:52px;display:block;flex:none;box-shadow:inset 0 0 0 .5px var(--faint)}
.chlCol{flex:1;display:grid;gap:14px;min-width:0}
.chlTop{display:flex;justify-content:space-between;align-items:center}
.kv{display:grid;gap:4px;white-space:nowrap}
#found{display:flex;gap:6px}
#found canvas{width:28px;height:28px;display:block;opacity:.3;box-shadow:inset 0 0 0 .5px var(--faint)}
#found canvas.got{opacity:1;box-shadow:inset 0 0 0 .5px var(--warm)}
#found canvas.cur{opacity:.75}
#freqTrack{position:relative;height:12px;cursor:none;outline-offset:6px}
#freqTrack .d{position:absolute;top:50%;width:2px;height:2px;margin:-1px 0 0 -1px;border-radius:50%;background:var(--dim)}
#freqTrack .d.pure{background:#fff;opacity:.8}
#freqKnob{position:absolute;top:50%;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;z-index:1}

#toast{left:50%;top:76px;transform:translateX(-50%);color:var(--warm);opacity:0;white-space:nowrap;transition:opacity .5s}
#toast.show{opacity:1}

#skyTip{position:fixed;z-index:6;left:0;top:0;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .2s;padding-left:14px}
#skyTip.show{opacity:1}

#cursor{position:fixed;left:0;top:0;z-index:50;pointer-events:none;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;will-change:transform;transition:width .2s,height .2s,margin .2s,opacity .2s}
body.grab #cursor{width:24px;height:24px;margin:-12px 0 0 -12px}
body.hideCursor #cursor{opacity:0}

@media (prefers-reduced-motion:reduce){.ui,#frame,#plate,#prePhrase,#preCount{transition:none}}