@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;color:#f6efd9;background:#102c25}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#28553f,#102c25 75%)}button,a{-webkit-tap-highlight-color:transparent}button{font:700 14px 'DM Sans',sans-serif;color:inherit;background:#234b3c;border:1px solid #a8cf9a40;border-radius:12px;padding:12px 18px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}button:hover{background:#366247}button:focus-visible,a:focus-visible{outline:3px solid #ffd67e;outline-offset:3px}button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}main{max-width:1120px;margin:auto;padding:14px 24px 10px}header{display:flex;align-items:center;gap:13px;height:62px;margin-bottom:12px}header img{width:44px;height:48px;object-fit:contain}header small{font-size:9px;letter-spacing:2px;color:#a4bfa5}h1{font:700 29px 'Barlow Condensed',sans-serif;line-height:1;margin:4px 0}h1 span{color:#f5cc72}#pause{margin-left:auto;margin-right:0;padding:9px 16px} .arena{height:min(58vw,570px);min-height:380px;position:relative;border-radius:22px;overflow:hidden;isolation:isolate;background:#d9e6bd;box-shadow:0 20px 70px #0004;border:1px solid #92b88a45}canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.scoreboard{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;background:#123c32ef;box-shadow:0 4px 0 #092b2370;border:1px solid #95b78a66;border-radius:14px;padding:10px 24px;min-width:300px;pointer-events:none}.team{display:grid;text-align:center;min-width:34px;color:#b6f4d2}.team.cpu{color:#ffab8b}.team small{font-size:10px;font-weight:800;letter-spacing:1px}.team strong{font:800 35px 'Barlow Condensed',sans-serif;line-height:1}.clock{text-align:center;display:grid;gap:2px;min-width:130px}.clock small{font-size:8px;letter-spacing:1.8px;color:#c3cea9}.clock b{font:700 27px 'Barlow Condensed',sans-serif}.clock span{font-size:8px;letter-spacing:.6px;color:#c3cea9}.feedback{position:absolute;top:36%;left:0;width:100%;text-align:center;font:800 clamp(25px,5vw,52px) 'Barlow Condensed',sans-serif;color:#fff8db;text-shadow:0 3px 0 #143f32,0 4px 20px #143f32;pointer-events:none}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,#12392fee,#163c2fc9 60%,#15392f44);display:flex;align-items:center;padding:28px 7%;overflow:auto}.menu{max-width:490px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#f4cd77;font-weight:700}h2{font:800 clamp(36px,5vw,64px)/.92 'Barlow Condensed',sans-serif;margin:15px 0 16px;letter-spacing:-.7px}h2 em{font-style:normal;color:#b6f4d2}.menu p{font-size:14px;line-height:1.5;color:#d3ddc8;margin:12px 0}.difficulties{display:flex;gap:8px;margin:18px 0 12px}.difficulties button{flex:1;background:#163b30}.difficulties [aria-pressed=true]{background:#f3cb78;color:#203c2e;border-color:#f3cb78}.primary{background:#b6f4d2;color:#173c2c;border-color:#b6f4d2}.primary:hover{background:#d0ffe2}#start{width:100%;font-size:16px;text-align:left;display:flex;justify-content:space-between}#restart{margin-top:10px;width:100%}.menu .howto{font-size:11px;color:#b5c8b4}.menu .record{font-size:9px;letter-spacing:1.5px;color:#f0d395}.controls{display:flex;justify-content:space-between;gap:18px;margin-top:15px}.movement,.actions{display:flex;gap:10px}.controls button{min-height:61px;min-width:78px;box-shadow:0 4px 0 #071f18}.movement button{font-size:27px}.controls button small{display:block;font-size:8px;letter-spacing:1px;margin-top:4px;color:inherit;opacity:.65}.controls .held{transform:translateY(3px);box-shadow:0 1px 0 #071f18;background:#f5cf7f;color:#203c2e}.shoot-wrap{width:175px;position:relative}.shoot-wrap button{width:100%}.power{height:5px;background:#163c2e;position:absolute;bottom:3px;left:12px;right:12px;overflow:hidden;border-radius:5px}.sweet{position:absolute;left:40%;width:32%;height:100%;background:#54a778}.power i{display:block;height:100%;width:0;background:#f2b843;position:relative;opacity:.85}.match-footer{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#abc3aa;margin:13px 0}.match-footer b{color:#f4d286}.match-footer>span:last-child{white-space:nowrap}footer{font-size:9px;color:#87a48f;display:flex;gap:5px;align-items:center}footer span{margin-left:auto}.loading{position:fixed;z-index:100;inset:0;background:#123a30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}.loading img{width:110px;height:132px;object-fit:contain}.loading span{letter-spacing:4px}.loading small{position:absolute;bottom:30px;font-size:10px}#tackle.cooldown{opacity:.55}
@media(max-width:600px){main{padding:7px 10px max(10px,env(safe-area-inset-bottom))}header{height:45px;margin-bottom:8px;gap:8px}header img{width:31px;height:37px}h1{font-size:23px}header small{font-size:7px;letter-spacing:1px}#pause{font-size:11px;padding:9px;margin-right:0}.arena{height:calc(100svh - 238px);min-height:360px;max-height:690px;border-radius:16px}.scoreboard{top:10px;gap:15px;padding:9px 15px;min-width:266px}.overlay{padding:22px;background:#12392fe6}.menu{margin:auto}.menu h2{font-size:45px;margin:12px 0}.menu p{font-size:12px}.menu .howto{font-size:10px}.difficulties{margin:12px 0 10px}.difficulties button{padding:10px 12px}.controls{gap:8px;margin-top:12px}.movement,.actions{gap:6px}.controls button{min-width:45px;padding:10px 8px;min-height:58px;font-size:12px}.movement button{font-size:25px;width:46px}.shoot-wrap{width:101px}.controls button small{font-size:7px;letter-spacing:0}.match-footer{font-size:9px;margin:12px 0 9px;line-height:1.4}footer{font-size:8px;flex-wrap:wrap}footer span{display:none}.feedback{top:36%;font-size:37px}}
@media(max-height:520px) and (orientation:landscape){main{padding:4px 12px}header{height:33px;margin:0 0 4px}header img{height:29px;width:28px}header small{display:none}h1{font-size:23px}.arena{height:calc(100svh - 126px);min-height:190px;border-radius:12px}.scoreboard{top:6px;padding:4px 16px;gap:15px;min-width:240px}.team strong{font-size:27px}.clock b{font-size:20px}.clock span{display:none}.overlay{padding:10px 28px}.menu{max-width:580px;width:100%;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:5px 20px}.menu .eyebrow{grid-column:1}.menu h2{grid-column:1;font-size:34px;margin:3px 0}.menu #menu-copy{grid-column:1;font-size:10px;margin:0}.menu .difficulties{grid-column:2;grid-row:1/3;margin:0;align-self:end}.menu #start{grid-column:2;grid-row:3}.menu .howto{grid-column:1/3;font-size:9px;margin:2px 0}.menu .record{display:none}.menu #restart{grid-column:2;margin:0;padding:6px}.controls{margin-top:6px}.controls button{min-height:42px;padding:5px 14px;min-width:60px}.controls button small{display:none}.match-footer{margin:7px 0;font-size:9px}footer{display:none}.feedback{top:39%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

header>div{flex-shrink:0}header h1{white-space:nowrap}@media(max-width:360px){header{gap:6px}header h1{font-size:20px}header img{width:26px}#pause{padding:8px 6px}.controls button{min-width:42px}.movement button{width:42px}.shoot-wrap{width:88px}.actions,.movement{gap:4px}}
/* Head-to-head edition */
.arena{height:min(57vw,590px);min-height:400px}.overlay{padding:22px 5%;background:linear-gradient(90deg,#0e3027f5,#153a2de8 58%,#15392f44)}.menu{max-width:495px;width:100%}.menu h2{font-size:clamp(37px,4.4vw,57px);line-height:.95;margin:10px 0}.menu p{margin:9px 0;font-size:12px}.menu .howto{font-size:10px}.characters{display:flex;gap:8px}.characters button{position:relative;flex:1;min-width:0;padding:5px 5px 9px;background:#183f33;border:1px solid #8cad7655}.characters [aria-pressed=true]{border-color:#d3ef8e;background:#37634a;box-shadow:0 0 0 1px #d3ef8e}.characters canvas{width:90px;height:75px;max-width:100%;margin:auto;pointer-events:none}.characters b,.characters small{display:block}.characters b{font-size:14px}.characters small{font-size:7px;letter-spacing:.4px;color:#c7d8b3;margin-top:3px}.menu .select-label{font-size:8px;letter-spacing:1.5px;color:#c6d4b3}.difficulties{margin:10px 0}.difficulties button{padding:10px 14px}.menu .record{font-size:8px;margin-bottom:0}.energy-row{display:flex;align-items:center;gap:10px;margin-top:12px;color:#c6d4ac;font-size:9px;letter-spacing:.8px}.energy{position:relative;height:8px;flex:1;background:#203e32;border-radius:10px;overflow:hidden}.energy i{display:block;height:100%;background:linear-gradient(90deg,#b3ec88,#ffe598);border-radius:10px}.energy-row>b{width:42px;font-size:9px;color:#f5d886}.cpu-energy{width:55px;background:#203e32;border-radius:10px;overflow:hidden;height:5px}.cpu-energy i{height:100%;display:block;background:#f19a77}.controls{margin-top:10px}.controls button{min-width:74px}.actions{gap:8px}.controls .lob{background:#d2eab0;color:#213e2e;border-color:#d2eab0}.power-action{color:#d6caa7;background:#293f2f;border-color:#8d8b5e}.power-action.ready{background:#f7d47f;color:#233d2d;border-color:#ffe9ac;box-shadow:0 4px 0 #806330,0 0 15px #ffd77433}.power-action[aria-disabled=true]{opacity:.6}.feedback{top:28%;font-size:clamp(28px,4vw,47px)}
@media(max-width:600px){.arena{height:calc(100svh - 227px);min-height:465px;max-height:650px}.overlay{padding:17px 21px;background:#12392fe8}.menu h2{font-size:39px}.menu p{font-size:11px}.characters canvas{width:73px;height:61px}.characters b{font-size:12px}.characters small{font-size:6px;letter-spacing:0}.menu .howto{font-size:9px}.menu .record{font-size:7px}.controls{gap:9px}.controls button{min-width:45px;padding:9px 7px;font-size:11px}.movement button{width:45px;font-size:24px}.actions{flex:1;gap:5px;justify-content:flex-end}.actions button{flex:1;max-width:58px}.energy-row{font-size:8px;gap:7px;margin-top:9px}.energy-row>b{font-size:8px;width:34px}.cpu-energy{width:34px}.energy-row>span{font-size:7px;letter-spacing:0}.match-footer{margin:10px 0;font-size:8px}.feedback{top:34%}}
@media(max-height:520px) and (orientation:landscape){.arena{height:calc(100svh - 140px);min-height:190px}.overlay{padding:8px 28px}.menu{max-width:700px;grid-template-columns:1fr 1fr;gap:3px 22px}.menu h2{font-size:30px;margin:0}.menu #menu-copy{font-size:9px}.menu .eyebrow{font-size:8px}.menu #character-select{grid-column:2;grid-row:1/4}.characters canvas{width:60px;height:50px}.characters button{padding:2px 3px 4px}.characters b{font-size:10px}.characters small{font-size:6px}.menu .select-label{display:none}.menu .difficulties{grid-column:1;grid-row:4;align-self:center}.difficulties button{padding:7px;font-size:11px}.menu #start{grid-column:2;grid-row:4;padding:9px;font-size:12px}.menu .howto{grid-column:1/3;grid-row:5;font-size:8px;margin:0}.energy-row{margin-top:5px}.controls{margin-top:4px}.controls button{min-height:39px;padding:5px 12px}.match-footer{margin:6px 0}.menu:has(#character-select[hidden]) #start{grid-column:2;grid-row:2}.menu:has(#character-select[hidden]) #restart{grid-column:2;grid-row:3}.feedback{top:29%}}