:root{--paper:#f7f4e8;--ink:#25352c;--muted:#667064;--edge:#cbcdbd;--green:#31583e;--gold:#d0a24f;font-family:system-ui,sans-serif;color:var(--ink);background:#d8e9df}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit}button{min-height:44px;padding:10px 16px;border:1px solid var(--edge);border-radius:5px;background:var(--paper);color:var(--ink);cursor:pointer;font-weight:600}button:hover:not(:disabled){background:#e7e9db;border-color:#72836c}button:active:not(:disabled){background:#d7decb}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bd8729;outline-offset:3px}button:disabled{opacity:.5;cursor:default}#scene{display:block;width:100vw;height:100dvh;touch-action:none}header{position:fixed;inset:18px 24px auto;display:flex;gap:10px;align-items:center;pointer-events:none}header>*{pointer-events:auto}header b{margin-right:auto;background:var(--paper);padding:12px 18px;border-left:4px solid var(--green);font-size:20px;letter-spacing:-1px}#status{background:var(--paper);padding:12px;font-size:14px}header button{padding:10px 12px}.panel{position:fixed;left:32px;bottom:32px;width:330px;max-height:calc(100dvh - 110px);overflow:auto;padding:26px;background:var(--paper);border:1px solid #d5d6c5;border-top:4px solid var(--green);border-radius:5px;box-shadow:0 5px 16px #25352c18}h1{margin:0 0 26px;font-size:36px;letter-spacing:-2px;line-height:1.15}h2{margin:0 0 18px;font-size:24px}label{display:block;margin-bottom:14px;font-size:13px;font-weight:600;color:var(--muted)}label input:not([type=range]),select{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid var(--edge);border-radius:4px;background:#fffef7;color:var(--ink);font-size:16px}.panel>button{width:100%;margin:8px 0;background:var(--green);border-color:var(--green);color:#fffef4}.panel>button:hover:not(:disabled){background:#25432f;border-color:#25432f}.join{display:flex;gap:8px;margin-top:12px;border-top:1px solid var(--edge);padding-top:18px}.join input{width:55%;min-width:0;padding:10px;border:1px solid var(--edge);border-radius:4px;background:#fffef7}#players{margin:12px 0;line-height:1.9;font-size:14px}#room{font-size:18px;font-weight:700;margin-top:14px}#controls{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 24px));padding:14px 18px;background:var(--paper);border:1px solid #d5d6c5;border-top:3px solid var(--green);border-radius:5px}.info{display:flex;gap:18px;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--edge);font-size:14px}.info strong{margin-left:auto;font-variant-numeric:tabular-nums;font-size:20px}.sliders{display:flex;gap:20px}.sliders label{flex:1;display:flex;align-items:center;gap:8px;margin-bottom:8px}.sliders input{width:100%;min-width:0;accent-color:var(--green)}.sliders output{min-width:38px;color:var(--ink);font-variant-numeric:tabular-nums}.power{height:9px;background:#d8dacb;border-radius:2px;overflow:hidden;margin:4px 0 14px}#power-fill{height:100%;width:0;background:var(--gold)}.actions{display:flex;gap:8px}#shot{flex:1;background:var(--green);border-color:var(--green);color:#fffef4}.score{padding:12px 0;border-bottom:1px solid var(--edge);font-size:15px}#result{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(380px,calc(100vw - 28px))}#error{position:fixed;top:84px;left:50%;transform:translateX(-50%);background:#823b32;color:#fffaf2;border-radius:4px;padding:12px 16px;display:none;max-width:calc(100vw - 24px)}[hidden]{display:none!important}@media(max-width:600px){header{inset:10px 10px auto;gap:6px}header b{padding:11px 12px;font-size:16px;letter-spacing:-.6px}header button{font-size:12px;padding:10px}#status{position:absolute;top:54px;left:0;font-size:12px;padding:7px 10px}.panel{left:14px;bottom:14px;width:min(310px,calc(100vw - 28px));padding:20px;max-height:calc(100dvh - 120px)}h1{font-size:30px;margin-bottom:20px}#controls{bottom:12px;padding:12px}.sliders{gap:8px;flex-direction:column}.sliders label{margin-bottom:4px}.actions button{font-size:13px;padding:10px}.info{margin-bottom:10px}}@media(max-height:500px){.panel{left:14px;bottom:12px;width:280px;max-height:calc(100dvh - 75px);padding:18px}h1{font-size:27px;margin-bottom:14px}#controls{width:510px;padding:8px 12px;bottom:8px}.info{margin-bottom:5px;padding-bottom:4px}.sliders{flex-direction:row}.power{margin:4px 0}header{inset:8px 14px auto}}dialog{width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 48px);overflow:auto;padding:24px;background:var(--paper);color:var(--ink);border:1px solid var(--edge);border-top:4px solid var(--green);border-radius:5px}dialog::backdrop{background:#17241dcc}dialog h3{font-size:16px;margin:20px 0 4px}dialog button{width:100%;margin-top:18px}#history-status{font-size:14px;color:var(--muted)}

#scene{touch-action:none;user-select:none;-webkit-user-select:none}

#power-label{position:fixed;transform:translate(-50%,-100%);pointer-events:none;padding:4px 8px;border-radius:4px;background:#20342be8;color:#f2faff;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}

header{flex-wrap:wrap}#leave{order:1}header b{order:0}#overview{order:2}#myball{order:3}#spectate{order:4}#status{order:5}@media(max-width:600px){header b{flex:1}#status{position:static;max-width:100%}header button{padding:8px 10px}}