:root{font-family:"Baloo 2","Nunito",system-ui,"Noto Sans",sans-serif;color:#f4f1de;background:#3d405b;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,select{min-width:44px;min-height:44px;border:2px solid #f2cc8f;border-radius:12px;background:#51475b;color:inherit;padding:6px 12px}button{cursor:pointer;box-shadow:0 3px 0 #5b356f}button:active{transform:translateY(2px)}button:disabled{opacity:.45}button:focus-visible,select:focus-visible{outline:4px solid #ffd319;outline-offset:2px}#app{height:100dvh;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:5px;position:relative;overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:clamp(13px,2vw,21px)}header strong:first-child{flex:1}#pitch{flex:1;min-height:60px;position:relative;border:2px solid #f2cc8f;border-radius:16px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}#callout{position:absolute;top:6%;left:5%;right:5%;text-align:center;font-size:clamp(17px,3vw,29px);font-weight:800;text-shadow:0 2px 3px #3d405b;pointer-events:none}#hint{margin:0;text-align:center;font-size:12px}#controls{display:flex;justify-content:space-between;gap:8px}.team{display:flex;gap:6px;align-items:center}.team span{font-weight:800;font-size:12px}.pad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:3px}.pad button{padding:1px;touch-action:none}.pad [data-screen='up']{grid-column:2}.pad [data-screen='left']{grid-row:2;grid-column:1}.pad [data-screen='down']{grid-row:2;grid-column:2}.pad [data-screen='right']{grid-row:2;grid-column:3}.one button{border-color:#81b29a}.two button{border-color:#e07a5f}.panel{position:absolute;z-index:3;inset:3% max(3%,calc((100% - 680px)/2));padding:18px;background:#3d405bf7;border:3px solid #f2cc8f;border-radius:21px;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 12px 30px #0008}.panel h1,.panel h2{margin:0 0 8px;line-height:1.1}.panel p{margin:8px 0;line-height:1.3}.panel label{display:flex;justify-content:space-between;align-items:center;gap:9px;margin:9px 0}.panel select{max-width:66%;min-width:100px}.settings{display:flex;gap:12px;flex-wrap:wrap}.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:#47786c}#records p{border-bottom:1px dashed #f2cc8f;padding:6px}[hidden]{display:none!important}@media(max-width:600px){header{gap:5px;font-size:13px}header button{padding:3px 6px;font-size:12px}header strong:first-child{flex-basis:40%}.team{flex-direction:column;gap:2px;align-items:start}.panel{inset:2% 2%;padding:13px}.panel select{font-size:14px}}@media(max-height:440px) and (min-width:600px){.pad{grid-template-columns:repeat(4,44px);grid-template-rows:44px}.pad [data-screen]{grid-row:1;grid-column:auto}.team span{font-size:11px}.panel{inset:2% 12%;padding:10px}.panel p{font-size:14px;margin:5px 0}.panel label{margin:4px 0}}@media(prefers-reduced-motion:reduce){button{transition:none}}

#host{width:48px;height:48px;flex:0 0 48px;pointer-events:none}.prize{width:42px;height:42px;float:right;pointer-events:none}

.pad [data-fire]{grid-column:3;grid-row:1;font-size:12px;background:#e07a5f;color:#201b2d}.two{display:none}#controls.local .two{display:flex}

#result.panel,#confirmation.panel{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:min(94%,680px);max-height:94%}

.settings label{min-height:44px;cursor:pointer}