@font-face{font-family:"D-DIN";src:url(fonts/D-DIN.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"D-DIN";src:url(fonts/D-DIN-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Orbitron";src:url(fonts/Orbitron-VF.woff2) format("woff2");font-weight:400 900;font-display:swap}
:root{--ink:#0A0A0A;--sky1:#5ec8ff;--sky2:#bfeaff;--sea1:#14c4d6;--sea2:#0b93c9;--sand:#ffe3a3;--sand2:#f6cf7c;--work:#ff6b3d;--beach:#ffc21a;--swim:#00a6ff;--hammock:#2fcf72;--paper:#fffaf0}
*{box-sizing:border-box;margin:0}
html{background:var(--sky2)}
body{font-family:"D-DIN",system-ui,sans-serif;color:var(--ink);font-size:18px;line-height:1.4}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;z-index:50}.skip:focus{left:8px}
.top{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:flex-end;padding:20px clamp(16px,3vw,40px) 16px;background:var(--sky2)}
.tag{font-family:Orbitron;font-weight:700;font-size:13px;letter-spacing:.18em}
h1{font-family:Orbitron;font-weight:900;font-size:clamp(34px,5.4vw,76px);line-height:1;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}
.where{font-size:clamp(18px,1.6vw,22px);margin-top:6px}#clock{font-family:Orbitron;font-weight:700;font-size:.85em;margin-left:8px}
.status{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.mode{font-family:Orbitron;font-weight:700;font-size:13px;letter-spacing:.12em;border:2px solid var(--ink);padding:6px 10px;border-radius:999px;background:#fff}
.mode.live{background:var(--hammock)}
.counts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:18px}.counts b{font-family:Orbitron;margin-right:4px}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);margin-right:6px;vertical-align:-1px}
.dot.working{background:var(--work)}.dot.beach{background:var(--beach)}.dot.swim{background:var(--swim)}.dot.hammock{background:var(--hammock)}
.scene{position:relative;background:#5FD3FF;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.stage{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain}
#cv{display:block;image-rendering:pixelated;margin:0 auto;cursor:pointer}
.hint{position:absolute;left:12px;bottom:12px;background:var(--ink);color:#FFF6DC;font-size:15px;padding:6px 12px;border-radius:999px;pointer-events:none}
.roster{padding:40px clamp(16px,3vw,40px) 56px;background:var(--paper)}
.roster h2{font-family:Orbitron;font-weight:900;font-size:clamp(26px,3vw,40px);text-transform:uppercase}
.note{margin:8px 0 22px;max-width:680px;font-size:18px;text-wrap:pretty}
.list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.list button{width:100%;min-height:56px;display:flex;align-items:center;gap:12px;padding:8px 12px;background:#fff;border:2px solid var(--ink);border-radius:14px;font:inherit;font-size:18px;text-align:left;cursor:pointer;color:var(--ink)}
.list button:hover{background:#fff6dc}.list button:active{transform:scale(.98)}.list button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.list small{display:block;font-size:15px}
.pop{position:fixed;inset:0;background:rgba(10,10,10,.35);display:grid;place-items:center;z-index:40;padding:16px}
.pop[hidden]{display:none}
.pop-card{position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:24px;padding:32px 28px 24px;min-width:min(360px,92vw);text-align:center}
.pop-av{width:96px;height:96px;margin:0 auto 12px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;font-family:Orbitron;font-weight:900;font-size:30px;overflow:hidden}
.pop-card h3{font-family:Orbitron;font-weight:900;font-size:28px}#pop-state{font-size:22px;margin-top:6px}.pop-type{font-size:16px;margin-top:4px;text-transform:uppercase;letter-spacing:.1em}
.x{position:absolute;right:12px;top:12px;min-width:44px;min-height:44px;border:2px solid var(--ink);border-radius:999px;background:#fff;font:inherit;font-size:15px;padding:0 12px;cursor:pointer}
.foot{display:flex;justify-content:space-between;gap:12px;padding:16px clamp(16px,3vw,40px);background:var(--ink);color:#fff;font-size:15px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}