:root{
  --field:#2340FF; --ink:#0B0B10; --white:#FFFFFF; --acid:#E8FF2A; --pink:#FF7AD9; --err:#FF3B2F; --soft:#C9D1FF;
  --f-disp:"Tektur","Arial Black",sans-serif;
  --f-body:"Manrope","Segoe UI",Arial,sans-serif;
  --f-mono:"Fira Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--field);color:var(--ink);font:500 1rem/1.5 var(--f-body);overflow-x:hidden}
a{color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--acid);outline-offset:3px}

.stage{position:relative;height:min(100svh,920px);min-height:560px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:48px 48px}
.ghost{position:absolute;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));top:46%;transform:translateY(-50%);
  font:900 clamp(4rem,19vw,17rem)/.8 var(--f-disp);color:rgba(255,255,255,.1);letter-spacing:-.04em;pointer-events:none;text-transform:uppercase;white-space:nowrap}
.b{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;text-align:center;will-change:transform;cursor:grab;
  border:2.5px solid var(--ink);visibility:hidden;line-height:1.05}
.b:active{cursor:grabbing}
.b.ready{visibility:visible}
.circle{border-radius:50%;padding:10px}
.pill{border-radius:999px;padding:10px 20px;white-space:nowrap}
.slab{border-radius:6px;padding:14px 18px;flex-direction:column;align-items:flex-start;text-align:left;gap:4px}
.k-name{background:var(--ink);color:var(--white);font:900 clamp(1.8rem,4.4vw,3.2rem)/.9 var(--f-disp);text-transform:uppercase;letter-spacing:-.02em}
.k-first{background:var(--white);font:700 clamp(1.1rem,2.4vw,1.7rem) var(--f-disp)}
.k-role{background:var(--acid);font:900 clamp(1rem,2vw,1.4rem)/1 var(--f-disp);text-transform:uppercase}
.k-fact{background:var(--white);font:800 .95rem/1.05 var(--f-body)}
.k-fact b{display:block;font:900 1.5rem/1 var(--f-disp)}
.k-pink{background:var(--pink)}
.k-skill{background:var(--soft);font:800 .9rem var(--f-body)}
.k-job{background:var(--white);box-shadow:5px 5px 0 var(--ink);cursor:pointer}
.k-job small{font:500 .68rem var(--f-mono);text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.k-job strong{font:900 1.05rem/1.05 var(--f-disp);text-transform:uppercase}
.k-job .open{font:500 .7rem var(--f-mono);color:var(--field)}
.k-job.now{background:var(--acid)}
.k-photo{padding:0;overflow:hidden;background:var(--ink)}
.k-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;border-radius:50%;pointer-events:none;display:block}
.k-contact{background:var(--ink);color:var(--acid);font:700 1rem var(--f-mono);cursor:pointer}
.req{font:500 .72rem var(--f-mono);border-width:2px;padding:0}
.req.ok{background:var(--white)}
.req.bad{background:var(--err);color:var(--white)}

.hud{position:absolute;z-index:20;top:calc(env(safe-area-inset-top,0px) + 14px);left:max(14px,env(safe-area-inset-left,0px));right:max(14px,env(safe-area-inset-right,0px));
  display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;pointer-events:none}
.hud > *{pointer-events:auto}
.ctl{font:800 .9rem var(--f-body);background:var(--white);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:9px 16px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);display:inline-flex;gap:8px;align-items:center}
.ctl:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.ctl:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.ctl.hot{background:var(--err);color:var(--white)}
.ctl.on{background:var(--acid)}
.meter{margin-left:auto;font:500 .8rem/1.4 var(--f-mono);background:var(--ink);color:var(--white);border-radius:10px;padding:8px 12px;min-width:190px;font-variant-numeric:tabular-nums}
.meter b{color:var(--acid);font-weight:500}
.meter .e{color:var(--err)}
.hint{position:absolute;z-index:20;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);left:max(14px,env(safe-area-inset-left,0px));font:500 .78rem var(--f-mono);color:var(--white);opacity:.85;pointer-events:none}

.detail{position:absolute;z-index:30;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 14px);width:min(440px,calc(100% - 28px));
  background:var(--white);border:2.5px solid var(--ink);box-shadow:8px 8px 0 var(--ink);border-radius:14px;padding:20px 20px 18px;animation:pop .35s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:translateY(30px) rotate(3deg);opacity:0}}
.detail .co{font:500 .72rem var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--field)}
.detail h3{margin:4px 0 10px;font:900 1.5rem/1.05 var(--f-disp);text-transform:uppercase}
.detail ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:5px;max-height:38vh;overflow:auto}
.detail .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.detail .tags span{font:500 .72rem var(--f-mono);border:1.5px solid var(--ink);border-radius:999px;padding:2px 9px}
.x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:2.5px solid var(--ink);background:var(--acid);font:900 1rem var(--f-body);cursor:pointer}

.dry{background:var(--white);padding-block:56px 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-top:2.5px solid var(--ink)}
.dry-in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:260px 1fr;gap:40px}
.dry h2{margin:0;font:900 clamp(2rem,5vw,3.4rem)/.9 var(--f-disp);text-transform:uppercase;letter-spacing:-.02em}
.dry .lede{font:500 .85rem var(--f-mono);color:#555;margin-top:12px}
.dry h3{font:900 1.05rem var(--f-disp);text-transform:uppercase;margin:0 0 10px;padding-bottom:6px;border-bottom:2.5px solid var(--ink)}
.dry section + section{margin-top:30px}
.dry p{margin:0 0 10px;max-width:68ch}
.job{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid #ddd}
.job .m{font:500 .74rem/1.4 var(--f-mono);text-transform:uppercase;color:#555}
.job b{font-weight:800}
.job ul{margin:6px 0 0;padding-left:1.1em}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kv div{font-weight:800}
.kv small{display:block;font:500 .72rem var(--f-mono);text-transform:uppercase;color:#555}
.stk{display:grid;grid-template-columns:200px 1fr;gap:4px 16px}
.stk dt{font-weight:800}
.stk dd{margin:0 0 8px}
.cts{display:flex;flex-wrap:wrap;gap:10px}
.cts a,.cts span{font:700 1.1rem var(--f-mono);background:var(--ink);color:var(--acid);padding:8px 14px;border-radius:999px;text-decoration:none;user-select:all}

.arc{position:absolute;border-radius:50%;border:2.5px dashed rgba(255,255,255,.55);pointer-events:none}
.dist{position:absolute;left:0;top:0;z-index:26;pointer-events:none;font:700 .85rem var(--f-mono);background:var(--ink);color:var(--white);padding:4px 9px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.dist.three{background:var(--acid);color:var(--ink);border:2px solid var(--ink)}
.plus.three{color:var(--pink);font-size:2rem}
.hoop{position:absolute;left:0;top:0;pointer-events:none;z-index:6;will-change:transform;animation:hoopin .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes hoopin{from{opacity:0;scale:.3}}
.board{position:absolute;width:16px;height:150px;background:var(--white);border:2.5px solid var(--ink);border-radius:3px}
.board::after{content:"";position:absolute;left:-2.5px;top:72px;width:16px;height:34px;border:3px solid var(--err);border-radius:2px}
.rim{position:absolute;height:8px;background:var(--err);border:2.5px solid var(--ink);border-radius:6px}
.net{position:absolute;height:58px;clip-path:polygon(0 0,100% 0,82% 100%,18% 100%);transform-origin:top center;
  background:repeating-linear-gradient(60deg,transparent 0 9px,var(--white) 9px 11px),repeating-linear-gradient(-60deg,transparent 0 9px,var(--white) 9px 11px)}
.net.swish{animation:swish .5s ease-out}
@keyframes swish{30%{transform:scaleY(1.35) scaleX(.86)}70%{transform:scaleY(.92)}}
.hooplab{position:absolute;font:900 .78rem var(--f-disp);color:var(--white);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;text-align:right}
.plus{position:absolute;z-index:25;pointer-events:none;font:900 1.6rem var(--f-disp);color:var(--acid);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;animation:up 1.1s ease-out forwards;white-space:nowrap}
@keyframes up{to{transform:translateY(-70px) scale(1.3);opacity:0}}
.score{font:500 .8rem/1.4 var(--f-mono);background:var(--acid);color:var(--ink);border:2.5px solid var(--ink);border-radius:10px;padding:8px 12px;box-shadow:3px 3px 0 var(--ink);font-variant-numeric:tabular-nums}
.score b{font:900 1.5rem/1 var(--f-disp);display:inline-block;min-width:2ch}
.score .bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.5) rotate(-6deg)}}
.score small{display:block;font-size:.7rem;opacity:.75}

@media (max-width:760px){
  .stage{height:80svh;min-height:500px}
  .meter{margin-left:0;min-width:0}
  .dry-in{grid-template-columns:1fr;gap:24px}
  .job,.stk{grid-template-columns:1fr;gap:2px}
  .kv{grid-template-columns:1fr 1fr}
  .hint{display:none}
}

.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--acid);color:var(--ink);padding:8px 14px;border:2.5px solid var(--ink);font:800 .9rem var(--f-body)}
.skip:focus{left:12px}
@media (prefers-reduced-motion:reduce){.hoop,.net.swish,.plus,.score .bump{animation:none}}

.stage{touch-action:pan-y}
.b,.hud,.detail{touch-action:none}
.scrollcue{display:none}
@media (max-width:760px){
  .hud{gap:6px}
  .ctl{font-size:.8rem;padding:7px 11px;box-shadow:2px 2px 0 var(--ink)}
  .ctl[href="#dry"]{display:none}
  .meter{font-size:.7rem;padding:6px 9px;order:5}
  .score{font-size:.72rem;padding:6px 10px;order:4}
  .score b{font-size:1.2rem}
  .hooplab{font-size:.66rem}
  .detail{padding:16px 16px 14px}
  .detail h3{font-size:1.25rem}
  .scrollcue{display:flex;position:absolute;z-index:20;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
    align-items:center;gap:6px;font:800 .8rem var(--f-body);color:var(--ink);background:var(--white);border:2.5px solid var(--ink);border-radius:999px;padding:7px 14px;text-decoration:none;box-shadow:2px 2px 0 var(--ink);animation:nudge 1.6s ease-in-out infinite}
}
@keyframes nudge{50%{transform:translate(-50%,4px)}}
@media (prefers-reduced-motion:reduce){.scrollcue{animation:none}}