:root{font-family:'Trebuchet MS',Arial,sans-serif;color:#203653;background:#dfeaf2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer;border:0;border-radius:7px;font-weight:700;padding:12px 16px;background:#f6c762;color:#283951;min-height:44px;box-shadow:0 3px 0 #b48b37}button:hover{filter:brightness(1.06)}button:disabled{opacity:.55;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #df65a0;outline-offset:3px}[hidden]{display:none!important}header{max-width:1250px;margin:auto;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}header a{color:#3b5879;font-weight:700;text-decoration:none}h1{font-size:30px;letter-spacing:-1px;margin:0}header button{background:transparent;box-shadow:none;border:1px solid #9aadc1;font-size:13px}main{max-width:1250px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:25px;padding:0 24px}.cabinet{background:#13335f;border:7px solid #315a87;border-radius:18px;box-shadow:0 9px 0 #adc0d0;overflow:hidden;color:#f6f4de}.scorebar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 18px;background:#122c51;font-size:13px}.scorebar strong{font-size:24px;margin-left:7px;color:#f6c762}.scorebar small{margin-left:4px;color:#a8c3dd}#mode{color:#92cfdd;font-size:12px}.arena{position:relative;height:clamp(300px,52vh,480px);background:#173c72}canvas{width:100%;height:100%;display:block}#overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#173c72db;padding:20px}.badge{font-size:12px;color:#9cdae4}#overlay h2{font-size:clamp(34px,4vw,50px);line-height:1.05;margin:22px 0 12px;letter-spacing:-1.5px;color:#fff5cb}#overlay p{font-size:15px;line-height:1.6;color:#c4d8e8;margin:0 0 24px}#overlay button{min-width:190px}#pause{position:absolute;bottom:15px;right:15px;font-size:12px;background:#203f68;color:#e8f2f8;box-shadow:none;border:1px solid #6383a3}.target{display:flex;align-items:center;gap:14px;padding:13px 18px;background:#203f69;font-size:12px}.target strong{font-size:24px;color:#f6c762}#fingers{flex:1}.meter{height:6px;width:72px;background:#102d50;border-radius:9px;overflow:hidden}.meter i{display:block;height:100%;width:0;background:#6dddc7}.pads{display:flex;gap:9px;padding:15px 18px 8px}.pads button{flex:1;background:#e4edf4;box-shadow:0 4px 0 #849fb7;padding:9px 4px;color:#223f64;touch-action:none;user-select:none}.pads button strong{display:block;font-size:20px}.pads button small{font-size:10px;font-weight:400}.pads button.active{background:#f6c762;transform:translateY(2px)}#status{font-size:12px;color:#c4d8e8;margin:12px 18px 17px;min-height:30px;line-height:1.5}aside section{padding:6px 0 22px;border-bottom:1px solid #b4c6d6;margin-bottom:16px}aside h2{font-size:20px;margin:10px 0 16px}label{font-size:12px;display:block;margin:14px 0 6px}select{width:100%;padding:12px;border:1px solid #a4b9cd;border-radius:5px;background:#f2f6f9;color:#203653}aside p{font-size:13px;line-height:1.6;color:#4a6380}aside button{width:100%;font-size:13px}#hear{background:transparent;box-shadow:none;border:1px solid #a4b9cd}.hint{font-size:12px!important}.other{display:block;color:#315f87;font-size:13px;margin:14px 0}footer{max-width:1250px;margin:28px auto;padding:0 24px;font-size:12px;color:#61788e}dialog{max-width:520px;width:90vw;max-height:85vh;overflow:auto;border:0;border-radius:14px;padding:28px;color:#203653;background:#edf4f8}dialog::backdrop{background:#0d2443aa}dialog p{font-size:14px;line-height:1.6}dialog button{width:100%}@media(max-width:850px){main{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:20px}.arena{height:450px}.hint{grid-column:1/-1}header a{font-size:12px}h1{font-size:25px}}@media(max-width:480px){header{padding:15px 12px;flex-wrap:wrap}header a{order:3;width:100%}main{padding:0 8px;gap:18px}.cabinet{border-width:4px;border-radius:12px}.arena{height:400px}.scorebar{padding:12px 10px;font-size:11px}.scorebar strong{font-size:18px;margin-left:3px}#mode{font-size:10px}.target{padding:12px 10px;gap:9px;font-size:10px}.pads{padding:12px 10px 5px;gap:6px}.pads button strong{font-size:17px}aside{padding:0 10px;gap:12px}.meter{width:45px}#status{margin:10px}.arena #overlay h2{font-size:40px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

:root{background:#e8eee8;color:#294b50}header a{color:#467069}.cabinet{border-color:#487675;background:#315b60;color:#f7f0d9;box-shadow:0 9px 0 #b0c5b9}.scorebar{background:#315b60}.scorebar strong{color:#ffe0a0}#mode{color:#d4e7de}.arena{background:#c8e5e9}#overlay{background:#315b60dc}#overlay h2{color:#fff2cf}.badge,#overlay p{color:#dfebe0}.target{background:#3a6567}.meter{background:#294e55}.pads button{background:#f1f1df;color:#315b60;box-shadow:0 4px 0 #9bb4a8}#status{color:#e3eee3}aside p{color:#4d6967}select{background:#f6f7ed;color:#315b60;border-color:#a4bdb1}#pause{background:#315b60}.other{color:#366b63}header button{color:#315b60}footer{color:#58736b}
