@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:linear-gradient(#101619,#101619) padding-box,linear-gradient(115deg,#4aa8ff,#4be0cc,#a877ff) border-box;color:#f3e4c8;border:1px solid transparent;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}#fp-toggle{border:1px solid transparent!important;background:linear-gradient(#101619,#101619) padding-box,linear-gradient(115deg,#4aa8ff,#4be0cc,#a877ff) border-box!important}.menu-box button:hover,#fp-toggle:hover{background:linear-gradient(#1c2529,#1c2529) padding-box,linear-gradient(115deg,#4aa8ff,#4be0cc,#a877ff) border-box!important}.menu-box button:active,#fp-toggle:active{background:linear-gradient(#232f34,#232f34) padding-box,linear-gradient(115deg,#4aa8ff,#4be0cc,#a877ff) border-box!important}.menu-box input{width:100%;padding:8px;margin:6px 0;border:1px solid rgba(255,255,255,.06);background:#ffffff05;color:#f3e4c8}.cosmetics-box{width:340px;min-width:0}.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);align-content:center;gap:8px;min-height:232px}.cosmetics-options.minion-options{grid-template-columns:minmax(120px,160px);justify-content:center}.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}.cosmetics-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 10px}.menu-box button.cosmetics-tab{margin:0}.menu-box button.cosmetics-tab.active{border-color:transparent;color:#f3e4c8;box-shadow:0 0 12px #4be0cc2e;background:linear-gradient(#202a2f,#202a2f) padding-box,linear-gradient(115deg,#4aa8ff,#4be0cc,#a877ff) border-box}.minion-preview{width:64px;height:64px;image-rendering:pixelated}.spug-preview{background-image:url(/spug.png);background-repeat:no-repeat;background-position:center bottom;background-size:64px 256px}.hat-action-label{font-size:13px}.menu-box button.hat-option.selected{border-color:#63d49b;box-shadow:0 0 0 1px #63d49b}.cosmetics-status{min-height:42px;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}.settings-toggle-button{position:fixed;top:12px;right:12px;z-index:1403;display:grid;width:38px;height:38px;place-items:center;padding:0;border:1px solid transparent;border-radius:8px;background:linear-gradient(#101619,#101619) padding-box,linear-gradient(115deg,#4aa8ff,#4be0cc,#a877ff) border-box;color:#f3e4c8;font-family:DM Mono,monospace;font-size:20px;cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.settings-toggle-button:hover{background:linear-gradient(#1c2529,#1c2529) padding-box,linear-gradient(115deg,#4aa8ff,#4be0cc,#a877ff) border-box}.settings-toggle-button:active{background:linear-gradient(#232f34,#232f34) padding-box,linear-gradient(115deg,#4aa8ff,#4be0cc,#a877ff) border-box}#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-side:first-child{align-items:flex-end;text-align:right}.vs-side:last-child{align-items:flex-start;text-align:left}.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}@media(max-width:640px)and (orientation:portrait){#ui-root{top:calc(26vh + 10px + env(safe-area-inset-top));width:calc(100% - 32px)}#fp-toggle{top:max(12px,env(safe-area-inset-top))!important;left:max(12px,env(safe-area-inset-left))!important;right:auto!important;z-index:10000!important}#title{font-size:clamp(34px,10vw,48px);line-height:1;letter-spacing:0}#welcome h2{margin:6px 0 0;font-size:17px;line-height:1.25;font-weight:500;overflow-wrap:anywhere}#welcome-elo{margin-top:2px;font-size:12px}.menu{align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain;padding:calc(40vh + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.menu-box,.cosmetics-box{width:min(100%,380px);min-width:0;margin:0 auto;padding:20px;border-radius:14px;box-shadow:0 14px 40px #0000006b}.menu-box h2,.menu-box h3{font-size:20px}.menu-box button{min-height:48px;margin:10px 0;padding:12px 14px;border-radius:10px;font-size:15px}.menu-box input{min-height:46px;font-size:16px}.cosmetics-description{font-size:12px}.cosmetics-options{min-height:200px}.menu-box button.hat-option{height:96px}.hat-option img{max-height:48px}#landscape-hint{top:calc(48px + env(safe-area-inset-top))!important;height:56px!important;padding:0 14px;font-size:14px!important;line-height:1.25;text-align:center}}