/* C106 Here It Comes: "Clay Court" theme. Self-host fonts. */
@font-face{font-family:"Big Shoulders Display";src:local("Big Shoulders Display Black"),url(fonts/BigShouldersDisplay-Black.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Space Grotesk";src:local("Space Grotesk"),url(fonts/SpaceGrotesk-Variable.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --hic-clay:#C4572F; --hic-clay-dark:#9E4123; --hic-chalk:#F7F3EA; --hic-ball:#DDF23A; --hic-seam:#F8FBE6;
  --hic-shadow:#3A1E14; --hic-sky:#8FC6E8; --hic-ink:#1E0F0A;
  --hic-display:"Big Shoulders Display","Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --hic-ui:"Space Grotesk",system-ui,-apple-system,sans-serif;
  --hic-flight:1500ms; --hic-window:650ms; /* catch window; SAME under reduced motion (Writer copy: 'Same timing') */
}
.hic{margin:0;min-height:100dvh;overflow:hidden;position:relative;color:var(--hic-chalk);font-family:var(--hic-ui);
  background:linear-gradient(var(--hic-sky) 0 22%,var(--hic-clay-dark) 22% 23%,var(--hic-clay) 23%)}
/* perspective court lines */
.hic-court{position:absolute;inset:22% 0 0;perspective:520px;pointer-events:none}
.hic-court i{position:absolute;left:50%;bottom:-8%;width:78%;height:130%;transform:translateX(-50%) rotateX(62deg);transform-origin:bottom;
  border:5px solid var(--hic-chalk);border-bottom:0;
  background:linear-gradient(90deg,transparent calc(50% - 2px),var(--hic-chalk) calc(50% - 2px) calc(50% + 2px),transparent 0) ,
             linear-gradient(transparent 44%,var(--hic-chalk) 44% calc(44% + 5px),transparent 0);opacity:.9}
.hic-net{position:absolute;left:12%;right:12%;top:46%;height:6%;background:repeating-linear-gradient(90deg,rgba(30,15,10,.6) 0 1px,transparent 1px 7px),repeating-linear-gradient(0deg,rgba(30,15,10,.6) 0 1px,transparent 1px 7px);border-top:5px solid var(--hic-chalk)}
.hic-hud{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px;font:600 12px var(--hic-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--hic-ink)}
.hic-board{background:var(--hic-ink);color:var(--hic-ball);font:900 13px var(--hic-display);letter-spacing:.14em;padding:8px 12px}
.hic-big{position:relative;z-index:3;font:900 clamp(72px,16vw,220px)/.82 var(--hic-display);text-transform:uppercase;letter-spacing:-.01em;margin:0;padding:0 20px;color:var(--hic-chalk);text-shadow:0 6px 0 var(--hic-shadow)}
.hic-sub{position:relative;z-index:3;font-size:17px;max-width:30ch;padding:10px 14px;margin:12px 20px;background:var(--hic-ink);color:var(--hic-chalk)}
.hic-ball{position:absolute;z-index:4;left:50%;top:var(--y,62%);width:var(--d,120px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%,#F4FF9A,var(--hic-ball) 45%,#B5C820);box-shadow:0 calc(var(--d,120px)*.5) 18px -6px rgba(30,15,10,.55)}
.hic-ball::after{content:"";position:absolute;inset:8%;border-radius:50%;border:4px solid var(--hic-seam);border-color:var(--hic-seam) transparent var(--hic-seam) transparent;transform:rotate(30deg)}
.hic-ring{position:absolute;z-index:4;left:50%;top:var(--y,62%);width:calc(var(--d,120px)*1.7);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:4px dashed var(--hic-chalk)}
.hic-ring.is-hot{border-style:solid;border-color:var(--hic-ball)}
.hic-actions{position:absolute;z-index:5;left:0;right:0;bottom:24px;display:flex;justify-content:center;gap:12px;padding:0 20px;flex-wrap:wrap}
.hic-btn{font:900 22px/1 var(--hic-display);letter-spacing:.1em;text-transform:uppercase;padding:16px 28px;min-height:56px;border:3px solid var(--hic-chalk);background:var(--hic-ink);color:var(--hic-chalk);cursor:pointer}
.hic-btn--go{background:var(--hic-ball);color:var(--hic-ink);border-color:var(--hic-ink)}
.hic-btn:focus-visible{outline:4px solid var(--hic-ball);outline-offset:4px}
/* motion */
.hic-ball.is-incoming{animation:hic-fly var(--hic-flight) cubic-bezier(.55,0,.85,.4) both}
@keyframes hic-fly{from{--d:14px;top:30%;width:14px}to{top:62%;width:140px}}
.hic-ball.is-caught{animation:hic-squash 260ms ease-out both}
@keyframes hic-squash{40%{transform:translate(-50%,-50%) scale(1.25,.75)}100%{transform:translate(-50%,-50%)}}
.hic-ball.is-thrown{animation:hic-throw 900ms cubic-bezier(.2,.6,.4,1) forwards}
@keyframes hic-throw{to{top:24%;width:12px;opacity:.6}}
@media(prefers-reduced-motion:reduce){.hic-ball.is-incoming{animation:hic-grow var(--hic-flight) steps(6) both;top:62%}.hic-ball.is-caught,.hic-ball.is-thrown{animation:none}
@keyframes hic-grow{from{width:14px}to{width:140px}}}
/* --- build additions (Engineer) --- */
*{box-sizing:border-box}[hidden]{display:none!important}
.hic{height:100dvh}
.hic-scene{position:absolute;inset:0;z-index:1;touch-action:manipulation}
.hic-hud a{color:inherit;text-decoration:none}.hic-hud a:focus-visible{outline:3px solid var(--hic-ball)}
.hic-big{font-size:clamp(56px,14vw,200px)}
.hic-sub:empty{display:none}
.hic-ball,.hic-ring{transform:translate(calc(-50% + var(--x,0px)),-50%)}
.hic-ring{transition:border-color 80ms}
.hic-ring[hidden]{display:none}
/* Mobile fix from Creative handoff: throw choices are a 2×2 grid ABOVE the primary bar, and the resting ball sits at --y:48% (or higher) so nothing covers it. */
.hic-actions{flex-direction:column;align-items:center}
.hic-throws{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(100%,520px)}
.hic-throw{font:700 15px/1.1 var(--hic-ui);text-align:left;padding:10px 12px;min-height:52px;border:2px solid var(--hic-chalk);background:rgba(30,15,10,.82);color:var(--hic-chalk);cursor:pointer}
.hic-throw small{display:block;font-weight:400;font-size:12px;opacity:.85}
.hic-throw[aria-pressed=true]{background:var(--hic-ball);color:var(--hic-ink);border-color:var(--hic-ink)}
.hic-throw:focus-visible{outline:4px solid var(--hic-ball);outline-offset:2px}
.hic-note{width:min(100%,520px);display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--hic-chalk)}
.hic-note input{font:16px var(--hic-ui);padding:10px 12px;border:2px solid var(--hic-chalk);background:rgba(30,15,10,.82);color:var(--hic-chalk)}
.hic-fine{font-size:12px;max-width:520px;text-align:center;background:rgba(30,15,10,.7);padding:6px 10px;margin:0}
.hic-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.hic-toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:var(--hic-ink);color:var(--hic-ball);padding:10px 16px;font:600 13px var(--hic-ui);z-index:9}
.hic-callout{position:absolute;z-index:6;left:50%;top:24%;transform:translateX(-50%);font:900 clamp(40px,10vw,120px)/1 var(--hic-display);color:var(--hic-chalk);text-shadow:0 5px 0 var(--hic-shadow);pointer-events:none;text-transform:uppercase}
.hic-dust{position:absolute;z-index:3;left:50%;top:var(--y,62%);width:200px;height:60px;transform:translate(-50%,10%);border-radius:50%;background:radial-gradient(rgba(247,243,234,.7),transparent 70%);animation:hic-dust 500ms ease-out forwards;pointer-events:none}
@keyframes hic-dust{from{opacity:1;transform:translate(-50%,10%) scale(.4)}to{opacity:0;transform:translate(-50%,0) scale(1.6)}}
@media(max-height:700px){.hic-big{font-size:clamp(44px,11vw,120px)}}
@media(prefers-reduced-motion:reduce){.hic-dust{animation:none;opacity:0}}