:root{--color-paper: oklch(17% .03 255);--color-paper-2: oklch(22% .035 255);--color-paper-3: oklch(28% .04 255);--color-ink: oklch(96% .015 95);--color-muted: oklch(76% .025 245);--color-rule: oklch(47% .06 245);--color-accent: oklch(86% .18 95);--color-accent-ink: var(--color-paper);--color-accent-deep: oklch(63% .14 95);--color-accent-2: oklch(72% .14 235);--color-accent-3: oklch(68% .22 18);--color-bargo: oklch(66% .16 157);--color-dalby: oklch(65% .2 315);--color-focus: oklch(83% .16 95);--color-overlay: oklch(13% .04 255 / .7);--color-panel: oklch(14% .035 255 / .85);--color-panel-line: oklch(94% .015 95 / .22);--color-stick: oklch(15% .025 255 / .57);--color-stick-line: oklch(96% .015 95 / .44);--color-stick-dot: oklch(96% .015 95 / .78);--color-stick-dot-line: oklch(15% .025 255 / .4);--color-control-pass: oklch(43% .14 235 / .88);--color-control-dash: oklch(44% .13 157 / .88);--color-control-kick: oklch(47% .16 315 / .88);--color-shadow: oklch(15% .03 255 / .7);--color-shadow-soft: oklch(15% .03 255 / .6);--font-display: "Plus Jakarta Sans", ui-rounded, sans-serif;--font-body: "Plus Jakarta Sans", ui-sans-serif, sans-serif;--space-3xs: .125rem;--space-2xs: .25rem;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2.5rem;--space-2xl: 4rem;--text-xs: .64rem;--text-sm: .8rem;--text-base: 1rem;--text-lg: 1.5625rem;--text-display: clamp(3.6rem, 11vw, 7rem);--dur-micro: .12s;--dur-short: .22s;--dur-long: .42s;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.7, 0, .84, 0);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--radius-card: 1.25rem;--radius-pill: 999px;--z-base: 1;--z-raised: 10;--z-sticky: 200;--z-modal: 400}*{box-sizing:border-box}html,body{min-height:100%;overflow-x:clip}body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body)}button{font:inherit}button:not(:disabled):active{transform:translateY(1px)}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,a:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}a:hover{color:var(--color-accent)}a:active{opacity:.55}a[aria-disabled=true]{cursor:not-allowed;opacity:.55}.nav-slab{min-height:3.5rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-sm);padding:var(--space-xs) max(var(--space-md),env(safe-area-inset-left));background:var(--color-paper);border-bottom:2px solid var(--color-accent);position:relative;z-index:var(--z-sticky)}.wordmark{color:var(--color-ink);font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;letter-spacing:-.055em;text-decoration:none;white-space:nowrap}.wordmark span{color:var(--color-accent)}.match-label{color:var(--color-muted);font-size:var(--text-xs);font-weight:500;letter-spacing:.08em;margin:0;text-align:center;white-space:nowrap}.sound-toggle{justify-self:end;min-height:2.75rem;padding:0 var(--space-sm);border:1px solid var(--color-rule);border-radius:var(--radius-pill);background:var(--color-paper-2);color:var(--color-ink);font-size:var(--text-xs);cursor:pointer;white-space:nowrap;transition:background-color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}.sound-toggle:hover{background:var(--color-paper-3)}.sound-toggle:active{transform:translateY(1px)}.game-shell{aspect-ratio:16 / 9;background:var(--color-paper-2);margin:auto;max-height:calc(100dvh - 7.4rem);max-width:100%;overflow:hidden;position:relative}#game,#game canvas{height:100%!important;width:100%!important}.start-screen{background:var(--color-paper);inset:0;position:absolute;z-index:var(--z-modal)}.start-screen>img{height:100%;object-fit:cover;object-position:center;position:absolute;width:100%}.start-screen:after{background:var(--color-overlay);content:"";inset:0;position:absolute}.start-copy{bottom:clamp(1.2rem,8vh,5rem);left:clamp(1.2rem,7vw,6rem);max-width:min(34rem,76%);position:absolute;z-index:var(--z-raised)}.plate,.how-to{color:var(--color-accent);font-size:clamp(.58rem,1.1vw,.78rem);font-weight:500;letter-spacing:.09em;line-height:1.45;margin:0 0 var(--space-sm)}.start-copy h1{color:var(--color-ink);font-family:var(--font-display);font-size:var(--text-display);font-weight:700;letter-spacing:-.09em;line-height:.78;margin:0;min-width:0;overflow-wrap:anywhere}.start-copy h1 span{color:var(--color-accent)}.start-lede{font-size:clamp(.85rem,1.8vw,1.2rem);font-weight:600;line-height:1.35;margin:var(--space-lg) 0 var(--space-md);max-width:30ch}.how-to{color:var(--color-muted);margin:var(--space-lg) 0 0;max-width:50ch}.btn{align-items:center;border:0;border-radius:var(--radius-pill);color:var(--color-paper);cursor:pointer;display:inline-flex;font-weight:700;gap:var(--space-xs);justify-content:center;min-height:3rem;padding:var(--space-sm) var(--space-lg);position:relative;white-space:nowrap}.btn--pear{--btn-edge: var(--color-accent-deep);background:var(--color-accent);box-shadow:0 4px 0 var(--btn-edge),0 6px 12px -3px var(--color-shadow-soft);color:var(--color-accent-ink);transform:translateY(0);transition:box-shadow .14s cubic-bezier(.2,.7,.3,1),transform .14s cubic-bezier(.2,.7,.3,1)}.btn--pear:hover{transform:translateY(-2px)}.btn--pear:active{box-shadow:0 1px 0 var(--btn-edge),0 2px 6px -2px var(--color-shadow);transform:translateY(3px);transition-duration:70ms}.hud{inset:0;pointer-events:none;position:absolute;z-index:var(--z-raised)}.scoreboard{align-items:start;display:grid;grid-template-columns:1fr auto 1fr;left:50%;max-width:32rem;padding-top:var(--space-sm);position:absolute;transform:translate(-50%);width:86%}.team-score{align-items:center;display:flex;gap:var(--space-xs);font-size:clamp(.55rem,1.1vw,.78rem);font-weight:500;letter-spacing:.06em}.team-score strong{font-family:var(--font-display);font-size:clamp(1.45rem,3vw,2.7rem);line-height:.9}.bargo{color:var(--color-bargo);justify-content:end}.dalby{color:var(--color-dalby);justify-content:start}.clock{align-items:center;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:0 0 var(--radius-card) var(--radius-card);color:var(--color-ink);display:grid;justify-items:center;min-width:5.4rem;padding:var(--space-xs) var(--space-sm)}.clock strong{font-size:clamp(.9rem,2vw,1.3rem);font-variant-numeric:tabular-nums}.clock span{color:var(--color-muted);font-size:.52rem;letter-spacing:.08em}.match-meta{background:var(--color-panel);bottom:calc(1rem + env(safe-area-inset-bottom));border:1px solid var(--color-panel-line);color:var(--color-ink);display:flex;font-size:clamp(.48rem,1.1vw,.72rem);gap:var(--space-sm);left:50%;letter-spacing:.045em;max-width:42rem;padding:var(--space-xs) var(--space-sm);position:absolute;transform:translate(-50%);width:max-content}#status-line{color:var(--color-accent);min-width:15ch}.beauty-meter{align-items:center;display:flex;gap:var(--space-xs);left:var(--space-sm);position:absolute;top:22%;transform:rotate(-3deg)}.beauty-meter span{color:var(--color-accent);font-family:var(--font-display);font-size:clamp(.58rem,1.4vw,1rem);font-weight:700;letter-spacing:-.04em}.beauty-meter i{background:var(--color-panel);border:1px solid var(--color-accent);display:block;height:.65rem;overflow:hidden;transform:skew(-10deg);width:clamp(4rem,13vw,9rem)}.beauty-meter b{background:var(--color-accent);display:block;height:100%;transform-origin:left;width:0}.surge-button{background:var(--color-accent-3);border:2px solid var(--color-paper);border-radius:var(--radius-pill);bottom:16%;box-shadow:0 4px 0 var(--color-paper);color:var(--color-paper);cursor:pointer;font-family:var(--font-display);font-size:clamp(.65rem,1.4vw,.9rem);font-weight:700;left:50%;padding:var(--space-xs) var(--space-md);pointer-events:auto;position:absolute;transform:translate(-50%);white-space:nowrap}.surge-button:hover{background:var(--color-accent)}.controls{align-items:end;bottom:max(var(--space-sm),env(safe-area-inset-bottom));display:flex;justify-content:space-between;left:max(var(--space-sm),env(safe-area-inset-left));pointer-events:none;position:absolute;right:max(var(--space-sm),env(safe-area-inset-right));z-index:var(--z-sticky)}.stick{background:var(--color-stick);border:2px solid var(--color-stick-line);border-radius:50%;height:clamp(5rem,16vw,8.8rem);pointer-events:auto;position:relative;touch-action:none;width:clamp(5rem,16vw,8.8rem)}.stick i{background:var(--color-stick-dot);border:2px solid var(--color-stick-dot-line);border-radius:50%;height:38%;left:31%;position:absolute;top:31%;transform:translate(0);width:38%}.action-buttons{align-items:end;display:grid;gap:var(--space-xs);grid-template-columns:repeat(3,minmax(3.65rem,1fr));max-width:21rem;pointer-events:auto;width:49%}.control-button{border:2px solid var(--color-paper);border-radius:50%;color:var(--color-paper);cursor:pointer;font-size:clamp(.48rem,1.1vw,.68rem);font-weight:500;height:clamp(3.65rem,11vw,5.7rem);letter-spacing:.04em;line-height:1.25;padding:var(--space-xs);touch-action:none;transition:background-color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out);white-space:nowrap}.control-button:active{transform:translateY(2px)}.control-button--pass{background:var(--color-control-pass)}.control-button--dash{background:var(--color-control-dash)}.control-button--kick{background:var(--color-control-kick)}.orientation{background:var(--color-paper);display:grid;inset:0;place-content:center;position:fixed;text-align:center;z-index:1000}.orientation p{color:var(--color-accent);font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;letter-spacing:-.05em;margin:0}.orientation span{color:var(--color-muted);font-size:var(--text-sm);margin-top:var(--space-xs)}.foot-marquee{background:var(--color-accent);border-top:2px solid var(--color-ink);overflow:hidden}.foot-marquee:focus-visible{outline:3px solid var(--color-focus);outline-offset:-3px}.foot-marquee__track{animation:marquee 32s linear infinite;color:var(--color-accent-ink);display:flex;font-family:var(--font-display);font-size:clamp(.75rem,1.7vw,1.15rem);font-weight:700;gap:var(--space-xl);letter-spacing:.04em;padding-block:var(--space-xs);white-space:nowrap;width:max-content}.foot-marquee:hover .foot-marquee__track,.foot-marquee:focus .foot-marquee__track{animation-play-state:paused}@keyframes marquee{to{transform:translate(-50%)}}@media(max-aspect-ratio:1 / 1)and (orientation:portrait){.orientation{display:grid}}.orientation[hidden]{display:none}@media(max-width:40rem){.match-label{display:none}.nav-slab{grid-template-columns:1fr auto}.game-shell{max-height:calc(100dvh - 6.1rem)}.scoreboard{width:96%}.team-score span{display:none}.match-meta{max-width:74%}.beauty-meter{top:20%}.how-to{display:none}}@media(max-height:32rem)and (orientation:landscape){.game-shell{aspect-ratio:auto;height:calc(100dvh - 3.875rem);max-height:none;width:100%}.foot-marquee{display:none}.start-copy{bottom:var(--space-md);left:clamp(1rem,5vw,3.25rem)}.start-copy h1{font-size:clamp(3.5rem,17vh,5.6rem)}.start-lede{margin-block:var(--space-sm)}.plate{margin-bottom:var(--space-xs)}.how-to{display:none}}@media(hover:hover)and (pointer:fine){.control-button:hover{transform:translateY(-2px)}.stick:hover{border-color:var(--color-accent)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:0ms!important;animation-iteration-count:1!important;transition-duration:0ms!important}.foot-marquee__track{animation:none}.sound-toggle:hover,.btn--pear:hover,.control-button:hover{transform:none}}