/* Layout only. Themes override colors/fonts via CSS variables in themes/<name>.css */
*{box-sizing:border-box}body{margin:0;font-family:var(--font,system-ui,-apple-system,sans-serif);background:var(--bg);color:var(--fg);padding:env(safe-area-inset-top) 12px 24px}
header{display:flex;justify-content:space-between;align-items:baseline;padding:12px 4px}h1{margin:0;font-size:1.5rem}#updated{opacity:.6;font-size:.85rem}
#office{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.desk{display:flex;flex-direction:column;gap:6px;min-height:140px;padding:14px;border-radius:var(--radius,14px);background:var(--desk);color:inherit;text-decoration:none;border:2px solid var(--border);border-left:8px solid var(--stc,var(--border))}
.desk:active{transform:scale(.98)}.desk.boss{grid-column:1/-1;border-width:3px}
.who{display:flex;gap:8px;align-items:center;font-weight:700;font-size:1.05rem}.emoji{font-size:1.6rem}
.status{text-transform:uppercase;font-size:.8rem;font-weight:700;display:flex;gap:6px;align-items:center}.dot{width:12px;height:12px;border-radius:50%;background:var(--stc,#999)}
.when{font-size:.85rem;opacity:.75}.note{font-size:.9rem}
.st-ok{--stc:var(--ok)}.st-warn{--stc:var(--warn)}.st-error{--stc:var(--err)}.st-none{--stc:#9ca3af}
#login{display:flex;flex-direction:column;gap:12px;max-width:420px;margin:40px auto}#login input{display:block;width:100%;font-size:1.2rem;padding:14px;margin-top:6px;border-radius:10px;border:1px solid var(--border)}
#login button{font-size:1.2rem;padding:16px;border-radius:10px;border:0;background:var(--accent);color:#fff}#err{color:var(--err)}

.hdr{display:flex;gap:8px;align-items:center}#theme-pick,#demo{font-size:.9rem;padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:var(--desk);color:var(--fg)}
#office.scene{display:block;margin:0 -12px}.scene-svg{display:block;width:100%;height:auto}.station{cursor:pointer}
.blink{animation:bl 1s steps(2) infinite}@keyframes bl{50%{opacity:.2}}.wave{animation:wv 2s ease-in-out infinite;transform-box:fill-box;transform-origin:left}@keyframes wv{50%{transform:scaleX(.8)}}
@media (prefers-reduced-motion:reduce){.blink,.wave{animation:none}}
#login[hidden]{display:none}

/* ---- v2 art scenes ---- */
.stage{display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-areas:"art feed" "stats stats";gap:14px;padding:0 12px}
.art{grid-area:art;position:relative;aspect-ratio:16/9;container-type:size;border-radius:18px;overflow:hidden;box-shadow:0 10px 40px #0008}
.art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ov,.lane{position:absolute;inset:0}.lane{pointer-events:none}
.ttl{position:absolute;left:14px;bottom:12px;display:flex;flex-direction:column;padding:8px 14px;border-radius:12px;background:#0009;backdrop-filter:blur(6px);color:#fff}
.ttl b{font-size:1.2rem;letter-spacing:.02em}.ttl span{font-size:.75rem;opacity:.8}
.fs{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:4px 8px 5px;min-width:76px;max-width:130px;
  border-radius:8px;background:var(--scr);border:1.5px solid var(--stc);color:#fff;text-decoration:none;font-size:11px;line-height:1.2;
  box-shadow:0 0 12px color-mix(in srgb,var(--stc) 55%,transparent),inset 0 0 10px #ffffff12;backdrop-filter:blur(3px);transition:opacity .4s,transform .2s;white-space:nowrap}
.fs::after{content:"";position:absolute;left:50%;bottom:-6px;width:2px;height:6px;background:var(--stc);opacity:.7}
.fs.boss{font-size:13px;padding:6px 12px;max-width:170px}.fs:hover{transform:translate(-50%,-100%) scale(1.08);z-index:2}
.fs-n{font-weight:700;display:flex;align-items:center;gap:5px}.fs-t{font-size:.85em;opacity:.75;padding-left:13px}.fs.away{opacity:.35}
.fs .dot,.fi .dot,.card .dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--stc);box-shadow:0 0 6px var(--stc)}
.st-error .dot{animation:bl 1s steps(2) infinite}
.feed{grid-area:feed;display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:18px;background:var(--panel);border:2px solid var(--border);min-height:0;overflow:auto}
.feed h2{margin:0 0 4px;font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.fi{display:flex;gap:8px;align-items:center;padding:8px;border-radius:10px;background:#ffffff0d;color:inherit;text-decoration:none;font-size:.82rem}
.fi span{flex:1;min-width:0;display:flex;flex-direction:column}.fi small{opacity:.75;overflow-wrap:anywhere}.fi em{font-style:normal;font-size:.72rem;opacity:.7;white-space:nowrap}
.live{margin-top:auto;font-size:.75rem;color:var(--ok);padding-top:6px}
.stats{grid-area:stats;display:flex;gap:10px}.stats span{flex:1;display:flex;flex-direction:column;padding:10px 14px;border-radius:14px;background:var(--panel);border:2px solid var(--border);font-size:1.4rem;font-weight:800}
.stats small{font-size:.7rem;font-weight:600;text-transform:uppercase;opacity:.75}.s-ok{color:var(--ok)}.s-warn{color:var(--warn)}.s-err{color:var(--err)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;padding:14px 12px 0}
.card{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--panel);border:1.5px solid var(--border);border-left:5px solid var(--stc);color:inherit;text-decoration:none}
.card.boss{grid-column:1/-1}.cav{width:64px;height:40px;object-fit:contain;flex:none}.cav.e{font-size:1.8rem;text-align:center;line-height:40px}
.cb{display:flex;flex-direction:column;min-width:0;gap:2px}.cn{font-weight:700}.cs{display:flex;align-items:center;gap:6px;font-size:.8rem;opacity:.85}.cnote{font-size:.85rem;opacity:.9;overflow-wrap:anywhere}
.racer{position:absolute;left:0;top:0;width:7cqw;will-change:transform;filter:drop-shadow(0 4px 4px #0008)}
@media (max-width:760px){.stage{grid-template-columns:1fr;grid-template-areas:"art" "stats";padding:0}.feed{display:none}.art{border-radius:0}
  .fs{min-width:0;padding:0;width:14px;height:14px;border-radius:50%;background:var(--stc);font-size:0}.fs>*{display:none}.fs::after{display:none}
  .ttl{left:8px;bottom:8px;padding:4px 10px}.ttl b{font-size:.95rem}.stats{padding:0 12px}.stats span{font-size:1.1rem;padding:8px}.cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.st-error .dot{animation:none}}
.stage,.cards{max-width:1600px;margin-left:auto;margin-right:auto}
@media (max-width:1000px) and (min-width:761px){.stage{grid-template-columns:1fr;grid-template-areas:"art" "stats"}.feed{display:none}}
@media (max-width:760px){.fs.boss{padding:0;width:18px;height:18px}h1{font-size:1.15rem}#updated{display:none}header{align-items:center}}

/* usage meter */
.um{display:inline-flex;align-items:center;margin:0 .6rem}
.ub{display:inline-flex;align-items:center;gap:.4em;font:600 13px/1.2 system-ui,sans-serif;white-space:nowrap}
.ub-t{display:inline-block;width:90px;height:8px;border-radius:4px;background:rgba(127,127,127,.35);overflow:hidden}
.ub-f{display:block;height:100%;border-radius:4px}
.u-g .ub-f{background:#22c55e}.u-a .ub-f{background:#f59e0b}.u-r .ub-f{background:#ef4444}
.ub-r{font-weight:500;opacity:.85;font-size:12px}
.ub.mini{font-size:10px;gap:.3em;display:flex;margin-top:2px}.ub.mini .ub-t{width:40px;height:5px}
.card .ub.mini .ub-t,.desk .ub.mini .ub-t{width:70px}

/* v4: compact screens hang above each character's head (never over face/body) */
.fs{transform:translate(-50%,calc(-100% - 4px));padding:2px 6px 3px;min-width:0;max-width:11cqw;font-size:clamp(8px,.95cqw,11px);border-width:1px;
  box-shadow:0 3px 10px #0007;overflow:hidden;text-overflow:ellipsis}
.fs.boss{font-size:clamp(9px,1.05cqw,12px);padding:3px 8px;max-width:14cqw}
.fs:hover{transform:translate(-50%,calc(-100% - 4px)) scale(1.06)}
.fs-n{overflow:hidden;text-overflow:ellipsis}.fs::after{bottom:-5px;height:4px}
.calm .art>img{filter:brightness(.82) saturate(.9)}
.calm .art,.calm .feed,.calm .stats span{box-shadow:0 6px 20px #0005}
/* Hot Wheels: F1-style pit-board monitors hanging on a slim arm from above */
.ov.pit .fs{background:#07090ef2;border:1px solid #2a2f3a;border-bottom:2px solid var(--stc);border-radius:3px;box-shadow:0 4px 10px #0009;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.03em;gap:0;padding:2px 6px;align-items:stretch;overflow:visible}
.ov.pit .fs::after{display:none}
.ov.pit .fs::before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:3.5cqh;background:linear-gradient(#5a606c00,#5a606c);transform:translateX(-50%)}
.pb-r{display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden}.pb-r b{color:#ffd400;font-weight:800}
.pb-r em{font-style:normal;color:#9fe870;margin-left:auto;padding-left:6px}.pb-r .dot{width:6px;height:6px}
.racer{backface-visibility:hidden}
/* v6 pirate crew */
.crew{position:absolute;inset:0;pointer-events:none;z-index:3}
.crew .desk-fg{position:absolute;display:block;pointer-events:none}
.mate{position:absolute;left:0;top:0;will-change:transform}
.mate img{position:absolute;left:0;top:0;display:none;height:auto;filter:drop-shadow(0 3px 3px #0006);backface-visibility:hidden}
.mate img.on{display:block}
.t-pirate .ov{z-index:2}
.t-pirate .fs[data-duty="off"]{opacity:.55;filter:saturate(.4)}
.t-pirate .fs[data-duty="going"]{opacity:.85}
.t-pirate .fs[data-duty="on"]{opacity:1;box-shadow:0 0 14px color-mix(in srgb,var(--stc) 70%,transparent),0 3px 10px #0007}
.t-pirate .fs{transition:opacity .6s ease,box-shadow .6s ease,filter .6s ease}
.t-pirate .ttl{z-index:4}
@media (max-width:760px){.crew{display:none}}
.crew .fs.plaque{pointer-events:auto;transform:translate(-50%,-50%);max-width:9.5cqw;padding:1px 5px 2px;font-size:clamp(7px,.78cqw,10px);border-radius:5px;background:#2b1a0ce6}
.crew .fs.plaque::after{display:none}.crew .fs.plaque:hover{transform:translate(-50%,-50%) scale(1.08)}
.crew .fs.plaque.boss{transform:translate(-50%,-50%);max-width:12cqw;font-size:clamp(8px,.9cqw,11px)}.crew .fs.plaque.boss:hover{transform:translate(-50%,-50%) scale(1.05)}
/* v7 rig test */
.rigwrap{position:absolute;left:0;top:0;width:140px;height:175px;transform-origin:0 0;z-index:5;pointer-events:none;will-change:transform}
.rigwrap svg{width:140px;height:175px;overflow:visible;filter:drop-shadow(0 2px 2px #0005)}