:root{font-family:"Baloo 2","Nunito",system-ui,"Noto Sans",sans-serif;color:#21374a;background:#cde8f5;color-scheme:light}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,select{min-height:44px;min-width:44px;border:2px solid #21374a;border-radius:13px;background:#fff;padding:7px 13px;color:inherit}button{cursor:pointer;box-shadow:0 3px 0 #8aa4b5;transition:transform .1s}button:active{transform:translateY(2px)}button:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible{outline:4px solid #ffca3a;outline-offset:2px}#app{height:100dvh;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}header{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:clamp(14px,2vw,22px)}header strong:first-child{flex:1}#pitch{flex:1;min-height:90px;position:relative;background:#e4f0ca;border:3px solid #21374a;border-radius:16px;overflow:hidden}canvas{display:block;width:100%;height:100%}#callout{position:absolute;top:8%;left:4%;right:4%;text-align:center;font-size:clamp(17px,4vw,34px);font-weight:800;text-shadow:0 2px 0 white;pointer-events:none}#controls{display:flex;justify-content:space-between;gap:12px}.team{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.team>span{font-weight:800}.one button{background:#ffca3a}.two button{background:#93d5f6}#rotate{display:none;margin:0;font-size:13px;text-align:center}.panel{position:absolute;z-index:3;inset:4% max(4%,calc((100% - 680px)/2));padding:20px;background:#fff9e9f7;border:3px solid #21374a;border-radius:22px;box-shadow:0 12px 45px #21374a55;overflow-y:auto;overscroll-behavior:contain}.panel h1,.panel h2{margin:0 0 8px;line-height:1.1}.panel p{margin:8px 0;line-height:1.35}.panel label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:9px 0}.panel select{max-width:66%;min-width:100px}.settings{display:flex;flex-wrap:wrap;gap:12px}.settings input{width:25px;height:25px}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}.actions button{flex:1 0 100px}.actions #play,.actions #next{background:#8ac926}#records>p{border-bottom:1px dashed #8aa4b5;padding:6px}[hidden]{display:none!important}@media(max-width:600px){header{gap:5px;font-size:13px}header button{font-size:12px;padding:4px 7px}#score{font-size:20px}header strong:first-child{flex-basis:42%}.team{gap:5px;flex:1}.team>span{width:100%;font-size:13px}.team button{flex:1;padding:7px 9px}#rotate{display:block}.panel{inset:3% 2%;padding:15px}.panel select{font-size:14px}.panel h1{font-size:24px}}@media(max-height:440px) and (min-width:600px){#app{gap:3px;padding-top:3px}header{font-size:13px}header button{font-size:12px;min-height:44px}.team>span{font-size:12px}.panel{inset:2% 12%;padding:12px}.panel p{font-size:14px;margin:5px 0}.panel label{margin:4px 0}}@media(prefers-reduced-motion:reduce){button{transition:none}}

button[data-cooldown='true']{filter:saturate(.4);box-shadow:inset 0 0 0 3px #21374a33;touch-action:none}button[data-action]{touch-action:none}