:root{--ground:#0b1220;--surface:#111b2e;--board:#05080f;--line:#22314d;--line-strong:#3a4f78;--ink:#eef3ff;--muted:#9fb0cf;--dim:#8193b5;--accent:#f5c400;--on-accent:#1a1400;--team-red:#e5484d;--team-blue:#3f7bf0;--team-red-text:#ff8f93;--team-blue-text:#8fb3ff;--pitch:#2e6b3a;--pitch-stripe:#2b6436;--pitch-line:#fff;--kick-full:#3ccf7f;--kick-over:#ff4d4d;--font-display:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;--font-body:Barlow, system-ui, sans-serif;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-10:40px;--radius-sm:2px;--radius-md:4px;--radius-full:9999px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:var(--ground);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.45}body{margin:0}[hidden]{display:none!important}h1,h2,p{margin:0}kbd{font-family:var(--font-display);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:0 var(--space-1);font-weight:700}.wordmark,.wordmark-small{font-family:var(--font-display);text-transform:uppercase;font-weight:800;line-height:.9}.wordmark{letter-spacing:.01em;font-size:96px}.wordmark-small{font-size:28px}.wordmark span,.wordmark-small span{color:var(--accent)}.tagline{font-family:var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:20px;font-weight:600}.heading{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;font-size:30px;font-weight:800;line-height:1.1}.panel-title{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0;font-size:18px;font-weight:800}.hint{color:var(--muted);font-size:13px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-6);min-width:0;margin:0}.board{background:var(--board);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-6)}.message{border:1px solid var(--kick-over);border-radius:var(--radius-sm);background:var(--surface);padding:var(--space-3) var(--space-4);margin-top:var(--space-3)}.btn{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;border-radius:var(--radius-sm);cursor:pointer;min-height:48px;padding:0 22px;font-size:20px;font-weight:800}.btn-primary{background:var(--accent);color:var(--on-accent);border:0}.btn-secondary{color:var(--ink);border:2px solid var(--line-strong);background:0 0}.btn:disabled{background:var(--surface);color:var(--dim);border:2px solid var(--line);cursor:default}.btn-small{padding:0 var(--space-3);min-height:40px;font-size:17px}.btn-large{min-height:52px;padding:0 28px;font-size:22px}.btn:focus-visible,.input:focus-visible,.link-field:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.field-label{gap:var(--space-1);color:var(--muted);flex-direction:column;font-size:13px;font-weight:500;display:flex}.input{font:inherit;color:var(--ink);background:var(--ground);border:0;border-bottom:2px solid var(--line-strong);padding:var(--space-2) 2px;box-sizing:border-box;border-radius:0;min-height:44px;font-size:18px}.input:focus{border-bottom-color:var(--accent)}.input-centered{text-align:center}.lobby{gap:var(--space-10);flex-direction:column;max-width:1180px;margin:0 auto;padding:48px 32px 64px;display:flex}.lobby-top{gap:var(--space-10);flex-wrap:wrap;align-items:stretch;display:flex}.intro{flex-direction:column;flex:360px;justify-content:space-between;gap:32px;display:flex}.intro-title{gap:var(--space-2);flex-direction:column;display:flex}.profile-fields{gap:var(--space-4);margin-top:var(--space-4);flex-wrap:wrap;align-items:end;display:flex}.avatar-preview{border-radius:var(--radius-full);background:var(--team-red);border:4px solid var(--ink);box-sizing:border-box;width:64px;height:64px;font-family:var(--font-display);justify-content:center;align-items:center;font-size:26px;font-weight:800;display:flex}.nick-field{flex:160px}.avatar-field{width:80px}.rooms-board{flex-direction:column;display:flex}.board-head{justify-content:space-between;align-items:baseline;gap:var(--space-4);padding-bottom:var(--space-3);border-bottom:2px solid var(--accent);display:flex}.board-count{font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:18px}.rooms{margin:var(--space-2) 0 0;padding:0;list-style:none}.room{align-items:center;gap:var(--space-4);padding:14px var(--space-3);border-bottom:1px solid var(--line);flex-wrap:wrap;display:flex}.room:last-child{border-bottom:0}.room.invited{background:color-mix(in srgb, var(--accent) 10%, transparent);outline:1px solid var(--accent);margin:var(--space-1) 0;border-bottom-color:#0000}.room-lock{flex:none}.room-label{flex-direction:column;flex:140px;display:flex}.room-name{font-family:var(--font-display);text-transform:uppercase;font-size:26px;font-weight:700;line-height:1.15}.room-stadium{color:var(--muted);font-size:13px}select.input{cursor:pointer}select.input option{background:var(--surface);color:var(--ink)}.room-invite{color:var(--accent);font-size:13px;font-weight:600}.room-count{font-family:var(--font-display);color:var(--accent);font-variant-numeric:tabular-nums;font-size:28px;font-weight:700}.room.full .room-name,.room.full .room-count{color:var(--dim)}.room-password{width:120px;font-size:16px}.create-room{border-top:4px solid var(--accent);flex:1.4 520px;grid-template-columns:1fr 1fr 120px;align-content:start;gap:20px;display:grid}.create-room .heading{grid-column:1/-1;font-size:26px}.create-room .grow,.create-room .btn{grid-column:1/-1}.create-room .btn{justify-self:end}.room-bar{align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-6);background:var(--board);border-bottom:1px solid var(--line);flex-wrap:wrap;display:flex}.room-title{font-family:var(--font-display);text-transform:uppercase;padding-left:var(--space-4);border-left:2px solid var(--line);flex:1;font-size:22px;font-weight:700}.link-field{font:inherit;color:var(--muted);background:var(--ground);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 var(--space-3);box-sizing:border-box;width:270px;min-height:40px}.game{flex-direction:column;height:100dvh;display:flex}.play{gap:var(--space-6);min-height:0;padding:var(--space-3) var(--space-6) var(--space-6);flex:1;display:flex}.pitch-area{flex-direction:column;flex:1;min-width:0;display:flex;container-type:inline-size}.pitch-canvas{box-sizing:border-box;background:var(--board);border:1px solid var(--line);border-radius:var(--radius-md);width:100%;height:100%;display:block;position:absolute;inset:0}.scoreboard{margin-bottom:var(--space-3);font-family:var(--font-display);text-transform:uppercase;grid-template-columns:1fr auto auto auto 1fr;align-items:center;gap:clamp(4px,.9cqi,12px);display:grid}.score-team{letter-spacing:.08em;font-size:clamp(16px,2.6cqi,34px);font-weight:700}.score-team-red{color:var(--team-red-text);justify-self:end}.score-team-blue{color:var(--team-blue-text)}.score{text-align:center;min-width:1.5em;color:var(--ink);border-radius:var(--radius-md);font-variant-numeric:tabular-nums;padding:0 .2em;font-size:clamp(26px,4cqi,52px);font-weight:800;line-height:1.2}.score-red{background:var(--team-red)}.score-blue{background:var(--team-blue)}.score-middle{flex-direction:column;align-items:center;display:flex}.match-clock{font-variant-numeric:tabular-nums;font-size:clamp(22px,3.2cqi,42px);font-weight:700;line-height:1.1}.golden-goal{letter-spacing:.08em;color:var(--accent);font-size:clamp(12px,1.7cqi,22px);font-weight:700}.match-limits{letter-spacing:.06em;color:var(--dim);font-size:clamp(12px,1.7cqi,22px)}.pitch-stage{flex:1;min-height:0;position:relative;container-type:size}.match-banner{justify-content:center;align-items:center;gap:var(--space-1);pointer-events:none;font-family:var(--font-display);text-transform:uppercase;text-shadow:0 2px 12px #000000b3;flex-direction:column;display:flex;position:absolute;inset:0}.match-banner-title{letter-spacing:.04em;text-align:center;color:var(--ink);font-size:12cqi;font-weight:800;line-height:1}.match-banner-goal .match-banner-title{font-size:min(12cqi, calc(120cqi / var(--letters,4)))}.match-banner-end .match-banner-title{font-size:7cqi}.match-banner-red .match-banner-title{color:var(--team-red-text)}.match-banner-blue .match-banner-title{color:var(--team-blue-text)}.room-view{inset:0 0 var(--chat-height,0);padding:var(--space-3);border-radius:var(--radius-md);background:#05080f9e;justify-content:center;align-items:center;display:flex;position:absolute}.room-panel{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-md);flex-direction:column;gap:1.2em;width:clamp(420px,64cqi,860px);max-width:100%;max-height:100%;padding:.9em 1.5em 1.5em;font-size:clamp(13px,1.5cqi,19px);display:flex;overflow-y:auto;box-shadow:0 8px 32px #00000080}.room-view-title{font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;grid-column:2;font-size:1.55em;font-weight:800}.room-view-head{grid-template-columns:1fr auto 1fr;align-items:baseline;margin-bottom:-.55em;display:grid}.room-view-hint{color:var(--dim);grid-column:3;justify-self:end;font-size:.85em}.lineup{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5em;display:grid}.lineup-column{background:var(--board);border:1px solid var(--line);border-radius:var(--radius-sm);flex-direction:column;display:flex;overflow:hidden}.lineup-column.drop-target{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.lineup-head{width:100%;min-height:2em;font:inherit;text-align:left;background:var(--line-strong);cursor:pointer;border:0;align-items:center;padding:0 .5em;display:flex}.lineup-head:hover:enabled{filter:brightness(1.15)}.lineup-head:disabled{cursor:default}.lineup-column-red .lineup-head{background:var(--team-red)}.lineup-column-blue .lineup-head{background:var(--team-blue)}.lineup-title{font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);flex:1;font-size:1.15em;font-weight:800}.lineup-list{height:15em;margin:0;padding:.3em 0;list-style:none;overflow-y:auto}.lineup-player{-webkit-user-select:none;user-select:none;align-items:center;gap:.5em;min-height:1.75em;padding:0 .5em;display:flex}.lineup-player[draggable=true]{cursor:grab}.lineup-player:hover{background:var(--surface)}.lineup-self{font-weight:600}.lineup-dragging{opacity:.4}.lineup-avatar{min-width:1.6em;font-family:var(--font-display);text-align:center;color:var(--muted);font-weight:700}.lineup-nick{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.lineup-admin{color:var(--accent)}.lineup-move{visibility:hidden;min-width:1.5em;min-height:1.5em;color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer;background:0 0;padding:0;font-size:.85em;line-height:1}.lineup-player:hover .lineup-move{visibility:visible}.lineup-move:hover{border-color:var(--accent)}.room-settings{flex-wrap:wrap;align-items:center;gap:.8em 1.4em;padding-top:1em;display:flex}.setting{color:var(--muted);align-items:center;gap:.5em;display:flex}.setting-select{min-height:2.1em;font:inherit;color:var(--ink);background:var(--board);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:0 .4em}.setting-select:disabled{color:var(--dim)}.setting-kick{margin-left:auto}.setting-kick input{width:8em;accent-color:var(--accent)}.setting-value{min-width:2.6em;font-family:var(--font-display);color:var(--ink);font-weight:700}.room-view-foot{flex-wrap:wrap;align-items:center;gap:.6em;display:flex}.admin-tools{align-items:center;gap:.5em;display:flex}.room-view-note{color:var(--muted);flex:1;font-size:.9em}.lock-teams{cursor:pointer;align-items:center;gap:.5em;display:flex}.lock-teams:has(input:disabled){color:var(--dim);cursor:default}.stadium-field{align-items:center;gap:.5em;margin-left:auto;display:flex}.stadium-label{color:var(--muted);font-size:.9em}.stadium-name,.stadium-select{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-size:1.15em;font-weight:700}.stadium-select{background:var(--board);border:1px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer;min-width:9em;min-height:1.85em;padding:0 .6em}.stadium-select:disabled{color:var(--dim);cursor:default}.match-controls{display:flex}.btn-compact{min-height:2.1em;padding:0 .8em;font-size:1.05em}.chat{border-top:1px solid var(--line);border-radius:0 0 var(--radius-md) var(--radius-md);background:#05080fb8;flex-direction:column;display:flex;position:absolute;bottom:0;left:0;right:0}.chat-resize{cursor:ns-resize;touch-action:none;height:12px;position:absolute;top:-7px;left:0;right:0}.chat-resize:after{content:"";background:var(--line-strong);border-radius:var(--radius-full);width:48px;height:4px;margin-left:-24px;position:absolute;top:4px;left:50%}.chat-resize:hover:after{background:var(--accent)}.chat-log{min-height:0;padding:var(--space-2) var(--space-3);flex:1;margin:0;font-size:14px;line-height:1.5;list-style:none;overflow-y:auto}.chat-line{overflow-wrap:anywhere}.chat-author{color:var(--muted);font-weight:600}.chat-author-red{color:var(--team-red-text)}.chat-author-blue{color:var(--team-blue-text)}.chat-notice{color:var(--dim);font-style:italic}.chat-input{margin:0 var(--space-2) var(--space-2);padding:var(--space-1) var(--space-2);font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:14px}.chat-input:focus{border-color:var(--accent);outline:none}.wave-letter{animation:.85s ease-in-out 3 goal-wave;animation-delay:calc(var(--letter) * .3s / var(--letters,4));display:inline-block}@keyframes goal-wave{0%,35%,to{transform:translateY(0)scale(1)}17%{transform:translateY(-.12em)scale(1.35)}}@media (prefers-reduced-motion:reduce){.wave-letter{animation:none}}.match-banner-detail{letter-spacing:.06em;color:var(--ink);font-size:max(16px,2.6cqi);font-weight:700}.side{gap:var(--space-4);flex-direction:column;flex:0 0 260px;display:flex;overflow-y:auto}.help-button{border:2px solid var(--line-strong);border-radius:var(--radius-full);width:36px;height:36px;color:var(--ink);font-family:var(--font-display);cursor:pointer;background:0 0;flex:none;padding:0;font-size:20px;font-weight:800;line-height:1}.help-button:hover,.help-button:focus-visible,.help-button[aria-expanded=true]{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}.bubble{box-sizing:border-box;padding:var(--space-4);background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-md);margin:0;position:fixed;inset:auto;overflow:visible;box-shadow:0 12px 32px #00000073}.bubble:before{content:"";top:-7px;left:var(--arrow-left,50%);background:var(--surface);border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong);width:12px;height:12px;position:absolute;transform:rotate(45deg)}.controls{gap:var(--space-2) var(--space-4);margin:var(--space-3) 0 0;grid-template-columns:auto 1fr;line-height:1.5;display:grid}.controls dt{font-family:var(--font-display);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700}.controls dd{margin:0}.controls kbd+kbd{margin-left:2px}.ring-legend{gap:var(--space-2);margin:var(--space-4) 0 0;padding:var(--space-3) 0 0;border-top:1px solid var(--line);list-style:none;display:grid}.ring-legend li{align-items:center;gap:var(--space-2);display:flex}.ring-legend svg{flex:none;width:22px;height:22px}.ring{fill:none;stroke-width:3px}.ring-charging{stroke:var(--accent);stroke-linecap:round}.ring-full{stroke:var(--kick-full)}.ring-over{stroke:var(--kick-over);stroke-dasharray:4 3}.diagnostics summary{cursor:pointer;color:var(--muted);padding:var(--space-1) 0}.diagnostics .hint{margin:var(--space-2) 0}.diagnostics dl{gap:var(--space-1) var(--space-4);grid-template-columns:auto auto;margin:0;font-size:13px;display:grid}.diagnostics dt{color:var(--muted)}.diagnostics dd{font-variant-numeric:tabular-nums;margin:0}.profile legend{float:left;width:100%}.profile .profile-fields{clear:both}