@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{color-scheme:dark;font-family:Space Grotesk,sans-serif;background:#11161b}*{box-sizing:border-box}html,body,#game,#board,#leftPanel{margin:0;width:100%;height:100%}body{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}input,textarea{user-select:text;-webkit-user-select:text}body{height:100vh;margin:0;background:#11161b}#game{background:#11161b}#leftPanel{position:fixed;left:0;top:0;bottom:0;width:0;z-index:3;pointer-events:auto;background:transparent}#board{position:fixed;inset:0;z-index:0}#game{position:fixed;inset:0;z-index:1;pointer-events:none}#rightPanel{position:fixed;right:0;top:0;bottom:0;width:0;z-index:3;pointer-events:auto;background:transparent}#game canvas{pointer-events:auto}canvas{display:block;width:100%;height:100%}.menu{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000}.menu.hidden{display:none}.menu-box{background:#101619f5;padding:24px;border:1px solid rgba(255,255,255,.06);color:#f3e4c8;min-width:300px;text-align:center;border-radius:8px}.menu-box h2,.menu-box h3{margin:0 0 12px}.menu-box button{display:block;width:100%;margin:8px 0;padding:10px;background:#101619;color:#f3e4c8;border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.menu-box button:hover{background:#1c2529;border-color:#ffffff24}.menu-box button:active{background:#232f34}.menu-box input{width:100%;padding:8px;margin:6px 0;border:1px solid rgba(255,255,255,.06);background:#ffffff05;color:#f3e4c8}.cosmetics-box{min-width:340px}.cosmetics-description{max-width:320px;margin:-4px auto 14px;color:#8f9ba0;font-size:13px;line-height:1.4}.cosmetics-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.menu-box button.hat-option{display:flex;height:112px;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin:0}.hat-option img{max-width:64px;max-height:58px;image-rendering:pixelated}.hat-action-label{font-size:13px}.menu-box button.hat-option.selected{border-color:#63d49b;box-shadow:0 0 0 1px #63d49b}.cosmetics-status{margin:0 0 10px;color:#8f9ba0}.menu-box button.hat-option:disabled{cursor:default;opacity:.55}#ui-root{position:fixed;top:60px;left:50%;transform:translate(-50%);text-align:center;z-index:1200;pointer-events:none}#title{font-family:Space Grotesk,sans-serif;font-size:64px;color:#f3e4c8;letter-spacing:1px;text-rendering:optimizeLegibility}#welcome.hidden{display:none}#welcome-elo{font-family:DM Mono,monospace;font-size:14px;color:#63d49b;margin-top:6px}#welcome-elo.hidden,#title.hidden{display:none}.settings-panel{position:fixed;right:18px;top:56px;width:220px;background:#101619f5;border:1px solid rgba(255,255,255,.06);padding:12px;z-index:1300;color:#f3e4c8;border-radius:8px;font-family:DM Mono,monospace}.settings-panel .settings-header{font-size:13px;margin-bottom:8px}.settings-panel .settings-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.settings-panel .settings-button{background:#101619;color:#f3e4c8;border:1px solid rgba(255,255,255,.06);padding:6px 8px;cursor:pointer}.settings-panel label{font-size:12px;color:#8f9ba0;min-width:48px}.settings-panel input[type=range]{flex:1}.settings-panel #settings-volume-value{width:42px;text-align:right;font-size:12px;color:#63d49b}#vs-root{position:fixed;left:50%;top:50%;transform:translate(-50%,calc(-50% - 130px));display:flex;align-items:center;gap:24px;z-index:1300;pointer-events:none}#vs-root.hidden{display:none}.vs-side{display:flex;flex-direction:column;align-items:center;min-width:160px}.vs-name{font-family:Space Grotesk,sans-serif;font-size:20px;color:#f3e4c8}.vs-elo{font-family:DM Mono,monospace;font-size:14px;color:#63d49b}.vs-vs{font-family:Space Grotesk,sans-serif;font-size:20px;color:#f3e4c8}.countdown{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);font-family:Space Grotesk,sans-serif;font-size:72px;color:#f3e4c8;font-weight:700;z-index:1300;pointer-events:none}.countdown.hidden{display:none}#upgrade-hud{position:fixed;z-index:4;transform-origin:top left;pointer-events:none}.upgrade-purchase,.upgrade-auto,.upgrade-auto-all{position:absolute;pointer-events:auto;font-family:DM Mono,monospace;cursor:pointer;touch-action:manipulation}.upgrade-purchase{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 8px 8px;border:2px solid var(--upgrade-accent);border-radius:10px;background:#293338;color:#f3e4c8;box-shadow:0 4px 12px #00000047;transition:background-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease}.upgrade-purchase:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000061}.upgrade-purchase:active{transform:translateY(0)}.upgrade-purchase:disabled{opacity:.4;cursor:not-allowed}.upgrade-purchase:disabled:hover,.upgrade-purchase:disabled:active{transform:none;box-shadow:0 4px 12px #00000047}.upgrade-purchase:focus-visible,.upgrade-auto:focus-visible,.upgrade-auto-all:focus-visible{outline:3px solid #f3e4c8;outline-offset:3px}.upgrade-name{font-size:22px;font-weight:700;line-height:1.1;text-align:center}.upgrade-cost{color:#e0645d;font-size:17px}.upgrade-cost.affordable{color:#63d49b;font-size:19px}.upgrade-auto{transform:translate(-50%,-50%);padding:0;border:2px solid #7c8588;border-radius:999px;background:#202a2f;color:#c3cbcc;font-size:18px;font-weight:700;line-height:1;z-index:2}.upgrade-auto.enabled{border-color:#63d49b;background:#63d49b;color:#101619}.upgrade-auto-all{display:flex;align-items:center;justify-content:center;padding:4px;border:2px solid #7c8588;border-radius:10px;background:#202a2f;color:#f3e4c8;font-size:14px;font-weight:700;line-height:1.15;text-align:center;white-space:pre-line;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.upgrade-auto-all.enabled{border-color:#63d49b;background:#63d49b;color:#101619}@media(hover:none)and (pointer:coarse){.upgrade-auto{transform:translate(-50%,-50%) scale(1.25)}.upgrade-auto-all{transform:scale(1.25);transform-origin:center}}#end-screen{position:fixed;left:50%;top:50%;transform:translate(-50%,-110px);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:1400;pointer-events:none}#end-screen.hidden{display:none}#end-message{font-family:Space Grotesk,sans-serif;font-size:48px;font-weight:700}#end-message.win{color:#63d49b}#end-message.lose{color:#e0645d}#end-elo-value{font-family:DM Mono,monospace;font-size:22px;color:#63d49b}.settings-panel{max-width:240px}.settings-panel #settings-volume-value{max-width:56px;overflow:hidden;text-overflow:ellipsis}#waiting-root{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1500;pointer-events:none}#waiting-root.hidden{display:none}#waiting-inner{background:#10161900;display:flex;flex-direction:column;align-items:center;gap:8px}.waiting-line{font-family:Space Grotesk,sans-serif;font-size:16px;color:#f3e4c8;letter-spacing:2px}#waiting-for-opponent{display:none}#spinning-up{display:block}#waiting-spinner{width:36px;height:36px;border-radius:50%;border:4px solid rgba(255,255,255,.06);border-top-color:#63d49b;box-sizing:border-box;animation:wf-spin .9s linear infinite}@keyframes wf-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.dom-joystick{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}.dom-joystick .joystick-base{position:absolute;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(255,255,255,.06);background:#10161959;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}.dom-joystick .joystick-knob{position:absolute;transform:translate(-50%,-50%);border-radius:50%;width:36px;height:36px;background:#63d49b;box-shadow:0 2px 6px #0009;pointer-events:none}.dom-joystick.hidden{display:none}html,body{overscroll-behavior-y:none}