:root{--turf-deep: #163a26;--turf: #2f7d36;--turf-light: #3f9a45;--chalk: #f4f7f0;--amber: #ffb627;--plate: #0d1b26;--home: #3fa7ff;--away: #ff6b5e;--display: "Silkscreen", ui-monospace, "Courier New", monospace;--body: system-ui, -apple-system, "Segoe UI", sans-serif;--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--turf-deep);color:var(--chalk);font-family:var(--body);-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}#game{position:fixed;inset:0}#game canvas{image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.btn{font-family:var(--display);font-size:15px;padding:10px 18px;border-radius:3px;border:2px solid var(--chalk);background:transparent;letter-spacing:.02em;box-shadow:0 3px #00000059}.btn:active{transform:translateY(2px);box-shadow:0 1px #00000059}.btn.go{background:var(--amber);color:#22180a;border-color:#22180a}.btn.ghost{background:#0000002e}.btn:disabled{opacity:.5;pointer-events:none}.menu{position:fixed;inset:0;z-index:30;display:grid;pointer-events:none;grid-template-rows:auto 1fr auto;--side: clamp(132px, 14vw, 190px)}.menu>*{pointer-events:auto}.menu-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:max(8px,1.4vh) calc(14px + var(--safe-r)) 8px calc(14px + var(--safe-l));background:linear-gradient(var(--turf-deep),rgba(22,58,38,.92));border-bottom:2px solid rgba(244,247,240,.85)}.brand{display:flex;align-items:center;min-width:0}.menu-top{position:relative;z-index:3}.logo-fren{image-rendering:pixelated;image-rendering:crisp-edges;flex:none;display:block}.logo-fren[hidden]{display:none}.title{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(22px,5vh,40px);line-height:1;color:var(--chalk);text-shadow:3px 3px 0 #0b2216}.setup{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.seg{display:inline-flex;align-items:stretch;border:2px solid var(--chalk);border-radius:3px;overflow:hidden;background:#0003}.seg button{font-family:var(--display);font-size:12px;padding:5px 9px;border:0;background:transparent}.seg button+button{border-left:2px solid var(--chalk)}.seg button[aria-pressed=true]{background:var(--chalk);color:var(--turf-deep)}.seg-label{font-family:var(--display);font-size:11px;padding:6px 7px;background:var(--chalk);color:var(--turf-deep);border-right:2px solid var(--chalk)}.seg.labelled .seg-label+button{border-left:0}.menu-mid{display:grid;grid-template-columns:var(--side) 1fr var(--side);min-height:0;pointer-events:none}.side{pointer-events:auto;min-height:0;overflow:auto;scrollbar-width:none;padding:10px calc(10px + var(--safe-l)) 10px 10px;display:grid;align-content:start;gap:8px;background:repeating-linear-gradient(90deg,var(--turf) 0 48px,var(--turf-light) 48px 96px)}.side.away{padding:10px;padding-right:calc(10px + var(--safe-r));border-left:2px solid rgba(244,247,240,.85)}.side.home{border-right:2px solid rgba(244,247,240,.85)}.kit{display:grid;gap:3px;font-size:11px}.kit>span{opacity:.85}.kit-row{display:grid;grid-template-columns:1fr auto;gap:4px}.kit select{font-family:var(--display);font-size:11px;padding:5px 4px;border-radius:3px;width:100%;min-width:0;border:2px solid var(--chalk);background-color:var(--plate);color:var(--chalk);--kit-arrow-inset: 9px;-webkit-appearance:none;appearance:none;padding-right:calc(var(--kit-arrow-inset) + 13px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:10px 6px;background-position:right var(--kit-arrow-inset) center}.kit select[data-ink=dark]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2314110a' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E")}.kit select option{color:initial;background:initial}.icon-btn{display:inline-grid;place-items:center;grid-auto-flow:column;gap:6px;min-width:30px;min-height:30px;border:2px solid var(--chalk);border-radius:3px;background:#0d1b268c;color:var(--chalk)}.icon-btn:hover{background:var(--chalk);color:var(--turf-deep)}.icon-btn:active{transform:translateY(1px)}.icon-btn.wide{width:100%;padding:4px 6px;font-family:var(--display);font-size:10px;justify-content:center}.side>.icon-btn.wide{position:sticky;bottom:0;z-index:2;background:var(--plate)}.frens{list-style:none;margin:0;padding:0;display:grid;gap:3px}.fren{display:grid;grid-template-columns:clamp(34px,calc((100vh - 290px) / 7),56px) 1fr;grid-template-columns:clamp(34px,calc((100dvh - 290px) / 7),56px) 1fr;align-items:center;gap:6px;padding:1px 4px 1px 0;border-radius:3px;border:2px solid transparent;cursor:grab;touch-action:none;background:#0d1b2647;user-select:none}.fren:hover{border-color:#f4f7f066}.fren.locked{cursor:default;background:#0d1b2673}.fren.locked:hover{border-color:transparent}.fren.selected{border-color:var(--amber)}.fren.drop{border-color:var(--amber);background:#ffb6272e}.fren.dragging{position:relative;z-index:40;cursor:grabbing;opacity:.92;box-shadow:0 6px #00000059}.fren canvas{width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated}.side.away .fren canvas{transform:scaleX(-1)}.fren-info{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:5px;min-width:0;line-height:1.15}.fren-info .role{font-family:var(--display);font-weight:400;font-size:11px;padding:1px 4px;border-radius:2px;background:var(--chalk);color:var(--turf-deep);text-align:center;min-width:30px}.fren-info .role-gk{background:linear-gradient(90deg,#ff4d4d,#ffe14d,#3ecf6e,#3b82f6,#9b5cf6);color:#14110a}.fren-info .role-fwd{background:var(--amber)}.fren-info .fid{font-family:var(--display);font-size:10px;white-space:nowrap}.fren-info .pet{grid-column:1 / -1;font-size:10px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.warmup-window{position:relative;pointer-events:none;box-shadow:inset 0 0 0 2px #f4f7f059}.warmup-tag{position:absolute;left:8px;top:8px;font-family:var(--display);font-size:11px;padding:3px 6px;background:#0d1b26a6;border-radius:2px}.warmup-help{position:absolute;left:50%;bottom:8px;transform:translate(-50%);font-size:11px;opacity:.8;white-space:nowrap;text-shadow:1px 1px 0 #0b2216}.warmup-help .tc,body.touch .warmup-help .kb{display:none}body.touch .warmup-help .tc{display:inline}.howto-link{pointer-events:auto;border:0;background:none;padding:0;color:var(--amber);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.howto{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#08120cb8;padding:12px}.howto[hidden]{display:none}.howto-card{position:relative;width:min(560px,100%);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;background:var(--plate);border:2px solid var(--chalk);border-radius:3px;padding:14px 16px 12px;box-shadow:0 4px #0006}.howto-card h2{margin:0;font-family:var(--display);color:var(--amber);font-size:22px}.howto-x{position:absolute;right:8px;top:8px;width:30px;height:30px;border:2px solid var(--chalk);border-radius:3px;background:none;color:var(--chalk)}.howto-tabs{display:flex;gap:6px}.howto-tabs button{font-family:var(--display);font-size:12px;padding:5px 10px;border:2px solid var(--chalk);border-radius:3px;background:none;color:var(--chalk)}.howto-tabs button[aria-selected=true]{background:var(--chalk);color:var(--turf-deep)}.howto-body{overflow:auto;min-height:0;padding-right:4px}.howto-body h4{margin:10px 0 4px;font-family:var(--display);font-size:13px;color:var(--amber)}.howto-body dl{display:grid;grid-template-columns:170px 1fr;gap:4px 12px;margin:0;font-size:13px}.howto-body dt{font-family:var(--display);font-size:12px;white-space:nowrap}.howto-body dd{margin:0;opacity:.9}.howto-tips{margin:0;padding-left:18px;font-size:13px;display:grid;gap:4px;opacity:.92}.howto-ok{justify-self:end}@media(max-width:520px){.howto-body dl{grid-template-columns:1fr}.howto-body dt{margin-top:4px}}.unstuck-row{margin-top:18px;text-align:left;display:flex;gap:14px}.unstuck{border:0;background:none;padding:2px 0;font-size:11px;color:var(--chalk);opacity:.6;text-decoration:underline;cursor:pointer}.unstuck:hover{opacity:1}.practice-flash{position:absolute;left:50%;top:18%;transform:translate(-50%);font-family:var(--display);font-weight:700;font-size:clamp(16px,4vh,28px);color:var(--chalk);text-shadow:2px 2px 0 var(--plate);opacity:0}.practice-flash.show{animation:flash 1.1s ease-out}@keyframes flash{0%{opacity:0;transform:translate(-50%,6px)}15%{opacity:1;transform:translate(-50%)}75%{opacity:1}to{opacity:0}}.menu-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:8px calc(14px + var(--safe-r)) max(8px,1.2vh) calc(14px + var(--safe-l));background:linear-gradient(rgba(22,58,38,.92),var(--turf-deep));border-top:2px solid rgba(244,247,240,.85)}.modes{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.btn.kickoff{font-size:18px;padding:10px 30px}.btn.small{font-size:12px;padding:6px 10px}.btn.mode{background:var(--plate);border-color:var(--chalk)}.bottom-left{justify-self:start;display:flex;align-items:center;gap:12px;min-width:0}.status{margin:0;font-size:11px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ball-pick{display:flex;gap:4px}.ball-swatch{width:30px;height:30px;padding:0;display:grid;place-items:center;border-radius:50%;border:2px solid rgba(244,247,240,.35);background:#0d1b268c}.ball-swatch canvas{width:18px;height:18px;image-rendering:pixelated}.ball-swatch:hover{border-color:var(--chalk)}.ball-swatch[aria-checked=true]{border-color:var(--amber);background:#ffb62733}.popover{position:fixed;right:calc(14px + var(--safe-r));bottom:74px;z-index:35;width:min(340px,92vw);max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);overflow:auto;background:var(--plate);border:2px solid var(--chalk);border-radius:3px;padding:12px 14px;box-shadow:0 4px #0006}.popover h3{font-family:var(--display);margin:0;font-size:18px;color:var(--amber)}.pop-sub{margin:2px 0 10px;font-size:12px;opacity:.8}.popover .row{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.pop-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0;font-size:12px}.checks{display:grid;gap:4px}.check{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:13px;padding:4px 6px;border-radius:2px;cursor:pointer}.check:hover{background:#ffffff0f}.check input{accent-color:var(--amber);width:16px;height:16px}.check em{font-style:normal;font-size:11px;opacity:.6}.modebar{position:fixed;left:calc(8px + var(--safe-l));top:8px;z-index:11;display:grid;gap:4px;background:#0d1b26d1;border:2px solid #26394a;border-radius:3px;padding:6px 8px;font-size:12px}.mb-title b{font-family:var(--display);font-weight:400;color:var(--amber)}.mb-title em{font-style:normal;opacity:.6}.mb-stats{display:flex;gap:10px;opacity:.9}.mb-btns{display:flex;gap:4px}body.in-warmup #touch{position:relative;z-index:32}body.in-warmup .stick-zone{left:var(--wu-left, 0);bottom:var(--wu-bottom, 0);width:min(30vw,200px);height:min(40vh,180px)}body.in-warmup .buttons{right:calc(var(--wu-right, 0px) + 10px);bottom:calc(var(--wu-bottom, 0px) + 10px)}body.in-warmup .tbtn{width:58px;height:58px}body.in-warmup .tbtn-skill,body.in-warmup .tbtn-tackle{width:62px;height:62px}#hud{position:fixed;inset:0;pointer-events:none;z-index:10}.board{position:absolute;top:8px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:5px 10px;background:var(--plate);border:2px solid #26394a;border-radius:3px;font-family:var(--display);font-size:14px;box-shadow:0 3px #00000059}.board .team{display:inline-flex;align-items:center;padding:1px 7px;border-radius:2px;background:#26394a}.board .digits{color:var(--amber);font-size:18px;display:inline-flex;gap:6px}.board .digits em{font-style:normal;opacity:.6}.board .clock{color:var(--amber);opacity:.85;padding-left:8px;border-left:1px solid #26394a}.toast{position:absolute;top:26%;left:50%;transform:translate(-50%);white-space:nowrap;font-family:var(--display);font-weight:700;font-size:clamp(28px,9vh,60px);color:var(--chalk);text-shadow:3px 3px 0 var(--plate)}.toast{display:grid;justify-items:center;gap:4px}.toast-main.card-yellow,.toast-main.card-red{padding:0 10px;border-radius:2px;color:#14110a;text-shadow:none}.toast-main.card-yellow{background:#ffd60a}.toast-main.card-red{background:#ff3b30}.toast-sub{font-family:var(--body);font-weight:600;font-size:clamp(12px,3vh,16px);text-shadow:1px 1px 0 var(--plate);white-space:normal;max-width:70vw;text-align:center}.toast-sub:empty{display:none}.toast-sub.owner{font-family:var(--display);font-weight:400;font-size:clamp(11px,2.6vh,15px);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(80vw,420px)}.toast.small{font-size:clamp(14px,3.6vh,20px);top:18%;font-weight:400}.corner{position:absolute;top:8px;right:calc(8px + var(--safe-r));display:flex;gap:6px;pointer-events:auto}.hud-btn{font-family:var(--display);font-size:11px;padding:5px 8px;border:1px solid rgba(244,247,240,.6);border-radius:3px;background:#0d1b2699}#touch{display:none}body.touch #touch:not([hidden]){display:block}.stick-zone{position:fixed;left:0;bottom:0;z-index:12;touch-action:none;width:min(40vw,280px);height:min(58vh,240px);padding-left:var(--safe-l)}.stick-base{position:absolute;left:90px;top:60%;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;border:2px solid rgba(244,247,240,.35);background:#0d1b262e;transition:opacity .15s;opacity:.55}.stick-base.active{opacity:1;transition:none}.stick-knob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#f4f7f0cc}.buttons{position:fixed;right:calc(14px + var(--safe-r));bottom:14px;z-index:12;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;gap:10px;align-items:end}.tbtn{width:72px;height:72px;border-radius:50%;border:2px solid var(--chalk);font-family:var(--display);font-size:12px;touch-action:none;background:#0d1b2680}.tbtn.down{transform:scale(.92)}.tbtn-skill{grid-column:2;grid-row:2;background:#ffb627bf;color:#22180a;width:80px;height:80px}.tbtn-tackle{grid-column:2;grid-row:2;background:#3fa7ffb3;width:80px;height:80px}.tbtn-slide{grid-column:1;grid-row:2;background:#ff6b5eb3}.tbtn-switch{grid-column:2;grid-row:1;width:56px;height:56px;justify-self:center;font-size:10px}.overlay{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:#0d1b268c}.overlay .card{background:var(--plate);border:2px solid #26394a;padding:18px 26px;border-radius:3px;text-align:center;box-shadow:0 4px #0006}.overlay h2{font-family:var(--display);margin:0 0 8px;font-size:26px;color:var(--amber)}.overlay .final{font-family:var(--display);font-size:16px;margin:6px 0}.overlay .final b{color:var(--amber);font-size:24px;margin:0 8px}.overlay .row{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}.overlay .hint{font-size:12px;opacity:.75;margin:10px 0 0;max-width:360px}.crash{z-index:90}.crash pre{text-align:left;font-size:11px;max-width:min(80vw,640px);max-height:40vh;overflow:auto;white-space:pre-wrap;background:#000;padding:8px;color:#ffb3aa;user-select:text}.debug{position:fixed;left:calc(8px + var(--safe-l));bottom:8px;z-index:20;width:290px;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow:auto;background:#0d1b26d1;border:1px solid #26394a;border-radius:3px;padding:8px;font-size:11px}.debug summary{cursor:pointer;margin:2px 0}.dbg-head{font-family:var(--display);font-size:12px;margin-bottom:4px}.dbg-hint{opacity:.6;font-family:var(--body)}.dbg-opts{display:grid;grid-template-columns:1fr 1fr;gap:1px 8px}.dbg-opts label{display:flex;align-items:center;gap:4px}.dbg-info{margin:6px 0 0;font-size:10.5px;white-space:pre-wrap;color:#cfe8ff}.rotate{display:none}@media(orientation:portrait)and (pointer:coarse){.rotate{display:grid;place-items:center;position:fixed;inset:0;z-index:100;background:var(--turf-deep);font-family:var(--display);text-align:center;padding:24px}}@media(prefers-reduced-motion:reduce){.btn:active,.tbtn.down{transform:none}}@media(max-height:520px){.side{padding-top:6px;padding-bottom:6px;gap:5px}.kit>span{display:none}.fren{grid-template-columns:30px 1fr;padding:0 4px 0 0}.fren-info .pet{display:none}.fren-info .role{font-size:10px;min-width:26px}.frens{gap:2px}.icon-btn{min-height:26px;min-width:28px}.icon-btn.wide span{display:none}}@media(max-height:430px){.menu-bottom{padding-top:5px;padding-bottom:5px}.btn.kickoff{font-size:15px;padding:7px 24px}.btn.mode{font-size:13px;padding:7px 12px}.fren{grid-template-columns:25px 1fr}.fren-info .role{font-size:9px;padding:0 3px}.fren-info .fid{font-size:9px}.kit select{padding:3px 4px}}.settings-toggle{display:none}@media(pointer:coarse)and (orientation:landscape)and (max-height:500px){.menu-top{flex-wrap:nowrap}.settings-toggle{display:inline-flex;align-items:center;font-family:var(--display);font-size:12px;padding:6px 12px;border:2px solid var(--chalk);border-radius:3px;background:#00000040;color:var(--chalk)}.menu-top.settings-open .settings-toggle{background:var(--chalk);color:var(--turf-deep)}.menu-top .setup{display:none;position:absolute;top:calc(100% + 4px);right:calc(10px + var(--safe-r));z-index:30;flex-direction:column;align-items:stretch;gap:8px;padding:10px;background:var(--turf-deep);border:2px solid var(--chalk);border-radius:4px;box-shadow:0 6px 18px #00000073}.menu-top.settings-open .setup{display:flex}.menu-top .setup .seg{justify-content:stretch}.menu-top .setup .seg button{flex:1;padding:8px 10px}}