@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-mono-cyrillic-ext-400-normal-B3hZxag_.woff2) format("woff2"),url(/assets/ibm-plex-mono-cyrillic-ext-400-normal-ZyMXPjaT.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-mono-cyrillic-400-normal-DvQQgHTq.woff2) format("woff2"),url(/assets/ibm-plex-mono-cyrillic-400-normal-CJUKFyLa.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-mono-vietnamese-400-normal-BFiUPp6R.woff2) format("woff2"),url(/assets/ibm-plex-mono-vietnamese-400-normal-DLynVohM.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-mono-latin-ext-400-normal-DxDDqVQb.woff2) format("woff2"),url(/assets/ibm-plex-mono-latin-ext-400-normal-uwM7KshN.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-mono-latin-400-normal-Dm_PoFIZ.woff2) format("woff2"),url(/assets/ibm-plex-mono-latin-400-normal-O6-GRVqx.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/ibm-plex-mono-cyrillic-ext-500-normal-CmcxpzmF.woff2) format("woff2"),url(/assets/ibm-plex-mono-cyrillic-ext-500-normal-yqk7_qG0.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/ibm-plex-mono-cyrillic-500-normal-BtGHVI3Q.woff2) format("woff2"),url(/assets/ibm-plex-mono-cyrillic-500-normal-N1TV9ACq.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/ibm-plex-mono-vietnamese-500-normal-CevHOlzG.woff2) format("woff2"),url(/assets/ibm-plex-mono-vietnamese-500-normal-QhwQXayn.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/ibm-plex-mono-latin-ext-500-normal-Dn-cqWhb.woff2) format("woff2"),url(/assets/ibm-plex-mono-latin-ext-500-normal-BhDX_RLI.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/ibm-plex-mono-latin-500-normal-C_OblDzq.woff2) format("woff2"),url(/assets/ibm-plex-mono-latin-500-normal-zoSM89R3.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/ibm-plex-mono-cyrillic-ext-600-normal-6-AWF9yE.woff2) format("woff2"),url(/assets/ibm-plex-mono-cyrillic-ext-600-normal-BZFL66GJ.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/ibm-plex-mono-cyrillic-600-normal-DqTcxLwU.woff2) format("woff2"),url(/assets/ibm-plex-mono-cyrillic-600-normal-C8N-B5AP.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/ibm-plex-mono-vietnamese-600-normal-D7hk9wLv.woff2) format("woff2"),url(/assets/ibm-plex-mono-vietnamese-600-normal-BifMsNUA.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/ibm-plex-mono-latin-ext-600-normal-5raxGPWx.woff2) format("woff2"),url(/assets/ibm-plex-mono-latin-ext-600-normal-C5zKQMXr.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/ibm-plex-mono-latin-600-normal-rgB1DpUr.woff2) format("woff2"),url(/assets/ibm-plex-mono-latin-600-normal-DeXYNBV7.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}*{box-sizing:border-box;margin:0;padding:0}html{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{font-family:var(--font-mono);background:var(--color-bg-primary);color:var(--color-text-primary);margin:0;padding:0;width:100vw;height:100dvh;overflow:hidden;font-variant-numeric:tabular-nums;line-height:1.4}.\!container{width:100%!important;margin-right:auto!important;margin-left:auto!important;padding-right:2rem!important;padding-left:2rem!important}.container{width:100%;margin-right:auto;margin-left:auto;padding-right:2rem;padding-left:2rem}@media (min-width: 1400px){.\!container{max-width:1400px!important}.container{max-width:1400px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.left-\[50\%\]{left:50%}.right-4{right:1rem}.top-4{top:1rem}.top-\[50\%\]{top:50%}.z-\[2000\]{z-index:2000}.z-\[2100\]{z-index:2100}.block{display:block}.inline{display:inline}.flex{display:flex}.grid{display:grid}.h-4{height:1rem}.w-4{width:1rem}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.grow{flex-grow:1}.translate-x-\[-50\%\]{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[-50\%\]{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.gap-4{gap:1rem}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.375rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem * var(--tw-space-y-reverse))}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.bg-black\/80{background-color:#000c}.p-6{padding:1.5rem}.text-center{text-align:center}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.leading-none{line-height:1}.tracking-tight{letter-spacing:-.025em}.opacity-70{opacity:.7}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}@keyframes enter{0%{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))}}.duration-200{animation-duration:.2s}.running{animation-play-state:running}.paused{animation-play-state:paused}:root{--color-bg-primary: #000000;--color-bg-secondary: #111111;--color-bg-tertiary: #1a1a1a;--color-text-primary: #ffffff;--color-text-secondary: #cccccc;--color-text-tertiary: #999999;--color-border: #333333;--color-border-subtle: #222222;--color-accent: #00ff00;--color-accent-dim: #007700;--color-accent-bright: #44ff44;--font-mono: "IBM Plex Mono", "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--grid-unit: 8px;--panel-radius: 4px;--hairline: 1px}.app-shell{display:flex;flex-direction:column;width:100vw;height:100dvh;background:var(--color-bg-primary);overflow:hidden}.app-header{padding:calc(var(--grid-unit) + env(safe-area-inset-top,0px)) var(--grid-unit) var(--grid-unit);border-bottom:var(--hairline) solid var(--color-border-subtle);background:var(--color-bg-primary);position:relative;z-index:100;min-height:44px;display:flex;align-items:center}.header-content{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1920px;margin:0 auto;padding:0 var(--grid-unit)}.app-title{font-size:24px;font-weight:600;letter-spacing:.1em;color:var(--color-text-primary)}.header-status{display:flex;align-items:center;gap:calc(var(--grid-unit) * 2)}.status-label{font-size:13px;color:var(--color-text-tertiary);letter-spacing:.05em}.app-main{position:relative;overflow:hidden;flex:1;min-height:0}.panel{background:var(--color-bg-secondary);border:var(--hairline) solid var(--color-border);border-radius:var(--panel-radius)}.panel-header{padding:var(--grid-unit);border-bottom:var(--hairline) solid var(--color-border-subtle);font-size:13px;font-weight:500;color:var(--color-text-secondary);letter-spacing:.05em;text-transform:uppercase}.panel-content{padding:var(--grid-unit)}.control-group{display:flex;flex-direction:column;gap:calc(var(--grid-unit) * 2)}.control-row{display:flex;align-items:center;gap:calc(var(--grid-unit) * 2)}.control-label{font-size:13px;color:var(--color-text-secondary);min-width:60px;text-transform:uppercase;letter-spacing:.05em}.button-primary{background:var(--color-accent);color:var(--color-bg-primary);border:none;padding:calc(var(--grid-unit) * 1) calc(var(--grid-unit) * 2);font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border-radius:var(--panel-radius);transition:background .1s ease;min-width:0;word-break:break-word;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.button-primary:hover{background:var(--color-accent-bright)}.button-primary:active{background:var(--color-accent-dim)}.button-secondary{background:transparent;color:var(--color-text-secondary);border:var(--hairline) solid var(--color-border);padding:calc(var(--grid-unit) * 1) calc(var(--grid-unit) * 2);font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border-radius:var(--panel-radius);transition:all .1s ease;min-width:0;word-break:break-word;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.button-secondary:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.slider{width:100%;height:2px;background:var(--color-border);border-radius:1px;outline:none;-webkit-appearance:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--color-accent);border-radius:50%;cursor:pointer}.slider::-moz-range-thumb{width:12px;height:12px;background:var(--color-accent);border-radius:50%;border:none;cursor:pointer}.status-display{font-size:14px;color:var(--color-text-primary);font-weight:500}.status-value{color:var(--color-accent)}.canvas-container{width:100%;height:100%;position:relative;overflow:hidden}.canvas-container canvas{width:100%!important;height:100%!important;display:block}.canvas-container-2d{flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:calc(var(--grid-unit) * 1);position:relative;overflow:hidden}@media (min-width: 1024px){.canvas-container-2d{padding:calc(var(--grid-unit) * .5)}}@media (max-width: 768px){.canvas-container-2d{padding:0}}.game-layout{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}@media (min-width: 1024px){.game-layout{flex-direction:row;gap:calc(var(--grid-unit) * 1);padding:calc(var(--grid-unit) * 1)}}.control-panel{display:flex;flex-direction:row;gap:calc(var(--grid-unit) * 1);padding:calc(var(--grid-unit) * 1);background:var(--color-bg-secondary);border-bottom:var(--hairline) solid var(--color-border);overflow-x:auto;flex-shrink:0;scrollbar-width:none;-ms-overflow-style:none}.control-panel::-webkit-scrollbar{display:none}@media (min-width: 1024px){.control-panel{flex-direction:column;width:280px;height:100%;overflow-y:auto;overflow-x:hidden;border-bottom:none;border-right:var(--hairline) solid var(--color-border);gap:calc(var(--grid-unit) * 1.5);padding:calc(var(--grid-unit) * 1.5)}}.game-canvas{display:flex;flex-direction:column;position:relative;overflow:hidden;flex:1;min-height:0;background:var(--color-bg-primary)}@media (max-width: 768px){.game-canvas{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}}.mobile-hud{position:absolute;left:0;right:0;bottom:0;padding:8px calc(8px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px));display:flex;gap:8px;align-items:center;justify-content:center;background:linear-gradient(to top,#000000b3,#0000);pointer-events:none}.mobile-hud .hud-button{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:10px 14px;border-radius:10px;border:1px solid var(--color-border);background:#000000bf;color:var(--color-text-primary);font-family:var(--font-mono);font-size:12px}.mobile-hud .hud-button.primary{background:var(--color-accent);color:var(--color-bg-primary);border-color:var(--color-accent);font-weight:700}.mobile-hud .hud-button.icon{width:44px;padding:10px}@media (min-width: 769px){.mobile-hud{display:none}}.mobile-pattern-dock{position:absolute;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom,0px));padding:6px 8px;display:flex;flex-wrap:wrap;justify-content:center;-moz-column-gap:6px;column-gap:6px;row-gap:6px}.pattern-chip{position:relative;flex:0 0 auto;min-width:64px;max-width:140px;min-height:34px;height:auto;padding:6px 8px 8px;border-radius:9px;background:#000000bf;color:var(--color-text-secondary);border:1px solid var(--color-border);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px}.pattern-chip.selected{color:var(--color-bg-primary);background:var(--color-accent);border-color:var(--color-accent);font-weight:700}.pattern-chip.cooldown{opacity:.8}.pattern-chip .chip-label{position:relative;z-index:2;white-space:normal;text-align:center;line-height:1.1}.pattern-chip .chip-timer{position:absolute;right:6px;top:4px;font-size:9px;color:var(--color-text-tertiary);z-index:3}.pattern-chip .chip-progress{position:absolute;left:0;bottom:0;height:2px;background:var(--color-accent);border-bottom-left-radius:9px;border-bottom-right-radius:9px;z-index:1}@media (max-width: 360px){.pattern-chip{min-width:48px;font-size:10px;padding:6px}}@media (min-width: 769px){.mobile-pattern-dock{display:none}}.mobile-stats-overlay{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));left:calc(8px + env(safe-area-inset-left,0px));display:flex;gap:8px;padding:6px 8px;background:#0009;border:1px solid rgba(255,255,255,.08);border-radius:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none}.mobile-stats-overlay .stat{display:flex;gap:4px;align-items:baseline}.mobile-stats-overlay .k{font-size:10px;color:var(--color-text-tertiary);letter-spacing:.06em}.mobile-stats-overlay .v{font-size:12px;color:var(--color-text-primary);font-weight:600}.mobile-stats-overlay .v.accent{color:var(--color-accent)}@media (min-width: 769px){.mobile-stats-overlay{display:none}}.hud-container{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);flex-shrink:0}.hud-group{display:flex;align-items:center;gap:24px}.hud-item{display:flex;flex-direction:column}.hud-label{font-size:10px;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}.hud-value{font-size:16px;font-weight:600;color:var(--color-text-primary)}.hud-value.score{color:var(--color-accent)}.high-scores-list{display:flex;flex-direction:column;gap:2px}.high-score-entry{display:flex;align-items:baseline;gap:8px;font-size:11px}.high-score-entry .rank{color:var(--color-text-tertiary);width:20px}.high-score-entry .score{color:var(--color-text-secondary);font-weight:600;width:60px;text-align:right}.high-score-entry .time{color:var(--color-text-tertiary)}.game-over-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .5s ease-out}.game-over-content{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}.game-over-title{font-size:28px;font-weight:600;letter-spacing:.1em;color:#f33;text-transform:uppercase}.final-score-value{font-size:48px;font-weight:700;color:var(--color-accent)}.final-score-value.new-high-score{color:#ff0;animation:scoreGlow 1.5s infinite ease-in-out}.new-high-score-badge{background:#ff0;color:var(--color-bg-primary);padding:4px 8px;border-radius:2px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-top:8px}.try-again-button{padding:12px 24px;font-size:14px;letter-spacing:.1em;margin-top:16px}.game-over-actions{display:flex;gap:16px;margin-top:24px}.stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.stat-item{display:flex;flex-direction:column;padding:8px;background:var(--color-bg-tertiary);border-radius:var(--panel-radius);border:1px solid var(--color-border);text-align:center;min-height:60px}.stat-label{font-size:11px;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;flex-shrink:0}.stat-value{font-size:16px;font-weight:700;color:var(--color-text-primary);font-family:var(--font-mono);flex:1;display:flex;align-items:center;justify-content:center}.stat-value.score{color:var(--color-accent)}.pattern-grid{display:grid;gap:calc(var(--grid-unit) * .25);grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}@media (max-width: 900px){.pattern-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,1fr)}}@media (max-width: 768px){.pattern-grid{grid-template-columns:1fr;grid-template-rows:repeat(9,1fr);max-height:180px;overflow-y:auto;padding-right:4px}.pattern-grid::-webkit-scrollbar{width:4px}.pattern-grid::-webkit-scrollbar-thumb{background:var(--color-accent);border-radius:2px}}.pattern-item{background:var(--color-bg-tertiary);border:var(--hairline) solid var(--color-border);border-radius:var(--panel-radius);padding:calc(var(--grid-unit) * .25);cursor:pointer;transition:all .1s ease;text-align:center;min-width:0;overflow:hidden;min-height:0;font-size:10px;line-height:1.1;display:flex;align-items:center;justify-content:center}.pattern-item:hover{background:var(--color-bg-primary);border-color:var(--color-accent)}.pattern-item.selected{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 0 2px #00ff004d,0 0 0 4px #00ff001a;transform:scale(1.05);transform-origin:center;position:relative;z-index:10}.pattern-item.selected:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,var(--color-accent),transparent,var(--color-accent));border-radius:calc(var(--panel-radius) + 2px);z-index:-1;animation:pulse-selected 2s ease-in-out infinite}.pattern-ready-message{display:flex;align-items:center;gap:8px;color:var(--color-accent);font-weight:600;animation:pulse-text 1.5s ease-in-out infinite}.icon-target{animation:pulse-icon 1.5s ease-in-out infinite}@keyframes pulse-icon{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@keyframes pulse-selected{0%,to{opacity:1}50%{opacity:.7}}@keyframes pulse-text{0%,to{textShadow:0 0 4px rgba(0,255,0,.5)}50%{textShadow:0 0 8px rgba(0,255,0,.8),0 0 12px rgba(0,255,0,.4)}}.pattern-item.cooldown{background:var(--color-bg-tertiary);cursor:not-allowed;opacity:.8}.cooldown-info{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;gap:4px}.pattern-name-cooldown{font-size:9px;text-transform:uppercase;color:var(--color-text-tertiary);line-height:1}.cooldown-visual{display:flex;align-items:center;gap:6px;width:100%;padding:0 4px}.cooldown-progress-bar-inline{flex:1;height:6px;background:#0000004d;border-radius:3px;overflow:hidden}.cooldown-progress-fill-inline{height:100%;background:var(--color-accent-dim);border-radius:3px}.cooldown-timer-inline{font-size:11px;font-weight:600;color:var(--color-text-secondary);min-width:20px;text-align:right}.cooldown-timer{font-size:10px;color:var(--color-accent);margin-top:4px}.cooldown-progress-bar{width:100%;height:4px;background:#0f03;border-radius:2px;margin-top:6px;overflow:hidden;position:relative}.cooldown-progress-fill{height:100%;background:linear-gradient(90deg,var(--color-accent),rgba(0,255,0,.8));border-radius:2px;transition:width .3s ease-out;position:relative}.cooldown-progress-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:progress-shimmer 2s ease-in-out infinite}@keyframes progress-shimmer{0%,to{transform:translate(-100%)}50%{transform:translate(100%)}}.pattern-name{font-size:10px;color:var(--color-text-secondary);letter-spacing:.05em;text-transform:uppercase;min-height:14px;line-height:1.1;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;display:flex;align-items:center;justify-content:center}.saved-pattern-item{background:var(--color-bg-tertiary);border:var(--hairline) solid var(--color-border);border-radius:var(--panel-radius);padding:calc(var(--grid-unit) * 1);transition:all .1s ease;text-align:center}.saved-pattern-item:hover{background:var(--color-bg-primary);border-color:var(--color-accent)}.grid-size-buttons{display:flex;gap:4px;margin-top:8px}.grid-size-button{flex:1;background:transparent;color:var(--color-text-secondary);border:var(--hairline) solid var(--color-border);padding:4px 8px;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border-radius:var(--panel-radius);transition:all .1s ease}.grid-size-button:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.grid-size-button.active{background:var(--color-accent);color:var(--color-bg-primary);border-color:var(--color-accent)}.density-toggle{background:transparent;color:var(--color-text-secondary);border:var(--hairline) solid var(--color-border);padding:4px 12px;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border-radius:var(--panel-radius);transition:all .1s ease;min-width:80px}.density-toggle:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.density-toggle.compact{background:var(--color-accent);color:var(--color-bg-primary);border-color:var(--color-accent)}.compact-mode{--grid-unit: 6px}.compact-mode .panel-header{padding:calc(var(--grid-unit) * 1.5);font-size:10px}.compact-mode .panel-content{padding:calc(var(--grid-unit) * 1.5)}.compact-mode .control-row,.compact-mode .control-group{gap:calc(var(--grid-unit) * 1.5)}.compact-mode .control-label{font-size:10px;min-width:50px}.compact-mode .status-display{font-size:11px}.compact-mode .button-primary,.compact-mode .button-secondary{padding:calc(var(--grid-unit) * .75) calc(var(--grid-unit) * 1.5);font-size:10px}.compact-mode .app-header{padding:calc(var(--grid-unit) * 1.5) calc(var(--grid-unit) * 2)}.compact-mode .app-title{font-size:13px}.compact-mode .status-label{font-size:10px}.compact-mode .pattern-grid{gap:calc(var(--grid-unit) * .75)}.compact-mode .pattern-item,.compact-mode .saved-pattern-item{padding:calc(var(--grid-unit) * .75)}.compact-mode .game-layout{grid-template-columns:280px 1fr;gap:calc(var(--grid-unit) * 1.5);padding:calc(var(--grid-unit) * 1.5)}@media (max-width: 1024px){.game-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}.control-panel{flex-direction:row;overflow-x:auto;height:auto}.panel{min-width:250px}}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}#root{width:100%;height:100%}@media (hover: none) and (pointer: coarse){.button-primary,.button-secondary{min-height:44px;padding:calc(var(--grid-unit) * 1) calc(var(--grid-unit) * 2)}.pattern-item{min-height:44px;padding:calc(var(--grid-unit) * 1)}.slider{height:4px}.slider::-webkit-slider-thumb{width:20px;height:20px}.slider::-moz-range-thumb{width:20px;height:20px}}.button-primary,.button-secondary,.pattern-item{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}@keyframes urgentPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.02)}}@keyframes threatWarning{0%,to{box-shadow:0 0 10px #ff33334d}50%{box-shadow:0 0 20px #f33c}}.progress-bar .progress-fill[style*="width: 0%"],.progress-bar .progress-fill[style*="width: 1%"],.progress-bar .progress-fill[style*="width: 2%"]{animation:urgentPulse 1.5s infinite ease-in-out}.panel:has(.status-display .status-value[style*="#ff3333"]){animation:threatWarning 3s infinite ease-in-out}.score-notification{position:fixed;top:20%;right:20px;background:#00ff001a;border:2px solid var(--color-accent);border-radius:var(--panel-radius);padding:calc(var(--grid-unit) * 1.5);color:var(--color-accent);font-weight:600;font-size:14px;z-index:1000;animation:slideInRight .3s ease-out,fadeOutUp .5s ease-in 2.5s forwards;min-width:120px;text-align:center}@keyframes fadeOutUp{to{transform:translateY(-20px);opacity:0}}.score-panel{border:2px solid var(--color-accent)!important;background:#00ff0005!important;position:relative;overflow:visible}.score-panel .panel-header{background:var(--color-accent);color:var(--color-bg-primary);margin:-2px -2px calc(var(--grid-unit) * 2) -2px;padding:calc(var(--grid-unit) * 1.5) calc(var(--grid-unit) * 2);display:flex;justify-content:space-between;align-items:center;font-weight:600;letter-spacing:.1em}.score-legend{font-size:9px;opacity:.9;font-weight:400;letter-spacing:.05em}.score-primary{display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(var(--grid-unit) * 1);gap:calc(var(--grid-unit) * 2)}.current-score,.high-score-display{display:flex;flex-direction:column;align-items:center;text-align:center}.score-label{font-size:10px;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:calc(var(--grid-unit) * .5)}.score-value{font-size:18px;font-weight:600;color:var(--color-accent);font-variant-numeric:tabular-nums;letter-spacing:-.02em}.score-value.new-high-score{color:#ff0;animation:scoreGlow 2s infinite ease-in-out;text-shadow:0 0 10px rgba(255,255,0,.5)}.score-value.high-score{color:var(--color-accent-dim);font-size:14px}@keyframes scoreGlow{0%,to{text-shadow:0 0 10px rgba(255,255,0,.5);transform:scale(1)}50%{text-shadow:0 0 20px rgba(255,255,0,.8);transform:scale(1.05)}}.score-breakdown{display:flex;justify-content:space-between;gap:calc(var(--grid-unit) * 1);padding-top:calc(var(--grid-unit) * 1);border-top:var(--hairline) solid var(--color-border)}.score-item{display:flex;flex-direction:column;align-items:center;flex:1;text-align:center}.score-type{font-size:9px;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}.score-amount{font-size:12px;color:var(--color-accent);font-weight:500;font-variant-numeric:tabular-nums}.high-scores-panel{background:#00ff0003}.high-scores-list{display:flex;flex-direction:column;gap:4px}.high-score-entry{display:flex;gap:12px;font-size:12px;align-items:baseline}.high-score-entry .rank{color:var(--color-text-tertiary)}.high-score-entry .score{color:var(--color-text-secondary)}.high-score-entry.best-score .score{color:var(--color-accent)}.high-score-entry .time{color:var(--color-text-secondary);font-variant-numeric:tabular-nums;text-align:center}.high-score-entry .date{color:var(--color-text-tertiary);font-size:9px;text-align:right}.game-end-panel{background:#ff33330d!important;animation:alertPulse 2s infinite ease-in-out}.game-end-panel.victory{background:#00ffff0d!important;border-color:#0ff!important}.game-end-panel .panel-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:calc(var(--grid-unit) * 1)}.new-high-badge{background:#ff0;color:var(--color-bg-primary);padding:2px 6px;border-radius:2px;font-size:8px;font-weight:600;letter-spacing:.1em;animation:badgePulse 1s infinite ease-in-out}@keyframes badgePulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.final-score-display{text-align:center;margin-bottom:calc(var(--grid-unit) * 2)}.final-score{margin-bottom:calc(var(--grid-unit) * 1)}.final-score .score-label{display:block;margin-bottom:calc(var(--grid-unit) * .5)}.final-score .score-value{font-size:24px;display:block}.high-score-celebration{color:#ff0;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;animation:celebration 2s infinite ease-in-out}@keyframes celebration{0%,to{transform:scale(1) rotate(0);opacity:1}25%{transform:scale(1.1) rotate(1deg);opacity:.9}75%{transform:scale(1.1) rotate(-1deg);opacity:.9}}.final-stats{display:flex;justify-content:space-around;gap:calc(var(--grid-unit) * 2);margin-bottom:calc(var(--grid-unit) * 2)}.final-stats .stat-item{display:flex;flex-direction:column;align-items:center;text-align:center}.final-stats .label{font-size:10px;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}.final-stats .value{font-size:14px;color:var(--color-accent);font-weight:600;font-variant-numeric:tabular-nums}.game-end-message{font-size:11px;color:var(--color-text-tertiary);text-align:center;line-height:1.4;opacity:.8}.score-notifications{position:fixed;top:calc(var(--grid-unit) * 8);right:calc(var(--grid-unit) * 2);z-index:1000;display:flex;flex-direction:column;gap:calc(var(--grid-unit) * 1);pointer-events:none}.score-notification{background:var(--color-bg-secondary);border:var(--hairline) solid var(--color-border);border-left:3px solid var(--color-accent);border-radius:var(--panel-radius);padding:calc(var(--grid-unit) * 1) calc(var(--grid-unit) * 1.5);box-shadow:0 4px 12px #0000004d;animation:slideInRight .3s ease-out;max-width:200px}.score-notification.threat-eliminated{border-left-color:#f44}.score-notification.threat-collision{border-left-color:#f80}.score-notification.survival{border-left-color:var(--color-accent)}.score-notification.high-score{border-left-color:#ff0;background:#ffff001a;animation:slideInRight .3s ease-out,scoreNotificationGlow 2s infinite ease-in-out}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes scoreNotificationGlow{0%,to{box-shadow:0 4px 12px #0000004d}50%{box-shadow:0 4px 20px #ff06}}.notification-message{font-size:11px;color:var(--color-text-primary);font-weight:600;letter-spacing:.05em;text-transform:uppercase}@media (max-width: 768px){.score-notifications{top:calc(var(--grid-unit) * 6);right:calc(var(--grid-unit) * 1);left:calc(var(--grid-unit) * 1)}.score-notification{max-width:none;font-size:11px;padding:8px 12px}.control-panel .panel{min-width:200px}.pattern-grid{grid-template-columns:repeat(auto-fit,minmax(85px,1fr))}.stats-grid{grid-template-columns:1fr 1fr 1fr}.score-primary{flex-direction:column;gap:calc(var(--grid-unit) * 1)}.score-value{font-size:18px}.final-score .score-value{font-size:20px}.final-stats{flex-direction:column;gap:calc(var(--grid-unit) * 1)}.high-score-entry{grid-template-columns:20px 1fr 50px;font-size:9px}.high-score-entry .date{display:none}.score-legend{font-size:8px}}@media (max-width: 480px){.score-breakdown{flex-direction:column;gap:calc(var(--grid-unit) * .5)}.score-item{flex-direction:row;justify-content:space-between}.score-value{font-size:16px}.final-score .score-value{font-size:18px}}.onboarding-modal{background:var(--color-bg-secondary)!important;border:var(--hairline) solid var(--color-border)!important;color:var(--color-text-primary);font-family:var(--font-mono);max-height:85dvh;overflow-y:auto}.onboarding-title{font-size:18px!important;font-weight:600;color:var(--color-text-primary)!important;letter-spacing:.1em;text-transform:uppercase;text-align:center;margin-bottom:calc(var(--grid-unit) * 1)}.onboarding-title .subtitle{display:block;font-size:14px;color:var(--color-accent);font-weight:500;margin-top:calc(var(--grid-unit) * .5)}.username-step{display:flex;justify-content:center}.username-input{background:var(--color-bg-primary);border:1px solid var(--color-border);color:var(--color-text-primary);padding:12px;font-size:16px;border-radius:4px;width:100%;max-width:300px;text-align:center}.onboarding-content{padding:calc(var(--grid-unit) * 2) 0;display:block}.onboarding-welcome{text-align:center}.welcome-text{margin-bottom:calc(var(--grid-unit) * 3)}.mission-statement{font-size:16px;line-height:1.6;color:var(--color-text-secondary);max-width:500px;margin:0 auto}.mission-statement .accent{color:var(--color-accent);font-weight:600}.game-visual{display:flex;justify-content:center;margin-top:calc(var(--grid-unit) * 4)}.colony-demo{position:relative;width:120px;height:120px;border:var(--hairline) solid var(--color-border-subtle);border-radius:var(--panel-radius);background:var(--color-bg-primary)}.colony-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:var(--color-accent);border-radius:50%;box-shadow:0 0 8px #0f06}.threat-demo{position:absolute;width:8px;height:8px;background:#f44;border-radius:2px;opacity:.8}.threat-1{top:20%;left:20%;animation:pulse 2s infinite}.threat-2{top:20%;right:20%;animation:pulse 2s infinite .5s}.threat-3{bottom:20%;left:50%;transform:translate(-50%);animation:pulse 2s infinite 1s}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}.gameplay-rules{display:flex;flex-direction:column;gap:calc(var(--grid-unit) * 2)}.rule-item{display:flex;align-items:flex-start;gap:calc(var(--grid-unit) * 2);padding:calc(var(--grid-unit) * 1.5);background:var(--color-bg-tertiary);border-radius:var(--panel-radius);border:var(--hairline) solid var(--color-border-subtle)}.rule-icon{font-size:16px;min-width:20px;text-align:center}.rule-content{display:flex;flex-direction:column;gap:calc(var(--grid-unit) * .5)}.rule-title{font-weight:600;color:var(--color-text-primary);font-size:13px;letter-spacing:.05em;text-transform:uppercase}.rule-desc{color:var(--color-text-secondary);font-size:12px;line-height:1.4}.controls-tutorial{display:flex;flex-direction:column;gap:calc(var(--grid-unit) * 3)}.control-section{display:flex;flex-direction:column;gap:calc(var(--grid-unit) * 1.5)}.control-title{font-size:13px;font-weight:600;color:var(--color-accent);letter-spacing:.05em;text-transform:uppercase;margin-bottom:calc(var(--grid-unit) * 1)}.control-list{display:flex;flex-direction:column;gap:calc(var(--grid-unit) * 1)}.control-item{display:flex;align-items:center;gap:calc(var(--grid-unit) * 2);padding:calc(var(--grid-unit) * 1);background:var(--color-bg-tertiary);border-radius:var(--panel-radius)}.key{background:var(--color-bg-primary);border:var(--hairline) solid var(--color-border);border-radius:3px;padding:calc(var(--grid-unit) * .5) calc(var(--grid-unit) * 1);font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--color-accent);min-width:50px;text-align:center;letter-spacing:.05em;text-transform:uppercase}.control-desc{color:var(--color-text-secondary);font-size:12px}.tip-list{display:flex;flex-direction:column;gap:calc(var(--grid-unit) * .75)}.tip-item{color:var(--color-text-secondary);font-size:12px;line-height:1.4;padding-left:calc(var(--grid-unit) * 2);position:relative}.tip-item:before{content:"→";position:absolute;left:0;color:var(--color-accent);font-weight:600}.onboarding-footer{display:flex;flex-direction:column;gap:calc(var(--grid-unit) * 2);align-items:center;padding-top:calc(var(--grid-unit) * 2);border-top:var(--hairline) solid var(--color-border-subtle)}.step-indicators{display:flex;gap:calc(var(--grid-unit) * 1)}.step-dot{width:8px;height:8px;border-radius:50%;background:var(--color-border);transition:all .2s ease}.step-dot.active{background:var(--color-accent);box-shadow:0 0 4px #0f06}.step-dot.completed{background:var(--color-accent-dim)}.onboarding-actions{display:flex;gap:calc(var(--grid-unit) * 2);align-items:center}.start-button{min-width:180px;font-weight:600;letter-spacing:.1em}@media (max-width: 640px){.onboarding-modal{max-width:95vw!important;margin:calc(var(--grid-unit) * 1)}.onboarding-content{display:block}.mission-statement{font-size:14px}.colony-demo{width:80px;height:80px}.colony-center{width:12px;height:12px}.threat-demo{width:6px;height:6px}.controls-tutorial{gap:calc(var(--grid-unit) * 2)}.onboarding-actions{flex-direction:column;gap:calc(var(--grid-unit) * 1)}.start-button{min-width:160px}}@media (max-width: 768px){.app-header{padding:4px 8px;min-height:auto}.app-title span,.subtitle,.header-status{display:none}.control-panel{padding:4px;gap:4px}.panel{padding:8px;flex-shrink:0}.panel-header{font-size:11px;padding:0 0 6px;margin-bottom:6px}.pattern-grid{max-height:150px;overflow-y:auto;padding-right:4px}.pattern-grid::-webkit-scrollbar{width:4px}.pattern-grid::-webkit-scrollbar-thumb{background:var(--color-accent);border-radius:2px}.pattern-item{padding:6px}.pattern-name{font-size:9px}.stats-grid{grid-template-columns:repeat(3,1fr);gap:4px}.stat-item{padding:2px;min-height:0}.stat-label{font-size:0}.stat-label:before{content:attr(data-short);font-size:8px;text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:13px;line-height:1.2}.control-label{font-size:10px}.button-primary,.button-secondary{padding:4px 8px;font-size:10px;min-height:28px}}@media (max-width: 768px){.control-panel{display:none!important}}.mobile-controls-modal{max-height:85dvh;overflow-y:auto}.mobile-controls-content{display:flex;flex-direction:column;gap:12px}.mobile-controls-modal .button-primary.PLAY,.mobile-controls-modal .button-primary.PAUSE{pointer-events:none;opacity:.6}.difficulty-selector{display:flex;gap:8px}.difficulty-button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--panel-radius);color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease}.difficulty-button:hover{background:var(--color-bg-secondary);border-color:var(--color-accent);color:var(--color-text-primary)}.difficulty-button.active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg-primary);font-weight:600}.difficulty-name{font-size:10px;text-transform:uppercase;letter-spacing:.05em}@media (max-width: 768px){.difficulty-name{display:none}.difficulty-button{padding:6px}}.all-leaderboards-container{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:16px 0}.leaderboard-column{display:flex;flex-direction:column;gap:12px}.leaderboard-title{font-size:14px;font-weight:600;text-align:center;text-transform:uppercase;letter-spacing:.1em;padding-bottom:8px;border-bottom:1px solid var(--color-border)}.high-scores-list .high-score-entry{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:baseline;padding:4px 0}.high-scores-list .rank{font-size:12px;color:var(--color-text-tertiary)}.high-scores-list .username{font-size:14px;font-weight:500;color:var(--color-text-primary)}.high-scores-list .score{font-size:14px;font-weight:600;color:var(--color-accent);justify-self:end}.high-scores-list .no-scores{text-align:center;color:var(--color-text-tertiary);font-style:italic;padding:16px}@media (max-width: 768px){.leaderboards-modal{max-height:85dvh!important;overflow-y:auto!important;width:calc(100vw - 24px)}.all-leaderboards-container{grid-template-columns:1fr;gap:16px}.leaderboard-title{font-size:12px;letter-spacing:.08em}.high-scores-list .high-score-entry{grid-template-columns:20px 1fr 60px;gap:8px;padding:6px 0}.high-scores-list .rank{font-size:11px}.high-scores-list .username{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.high-scores-list .score{font-size:13px}.high-scores-list .date{display:none}}.hover\:opacity-100:hover{opacity:1}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}.disabled\:pointer-events-none:disabled{pointer-events:none}.data-\[state\=open\]\:animate-in[data-state=open]{animation-name:enter;animation-duration:.15s;--tw-enter-opacity: initial;--tw-enter-scale: initial;--tw-enter-rotate: initial;--tw-enter-translate-x: initial;--tw-enter-translate-y: initial}.data-\[state\=closed\]\:animate-out[data-state=closed]{animation-name:exit;animation-duration:.15s;--tw-exit-opacity: initial;--tw-exit-scale: initial;--tw-exit-rotate: initial;--tw-exit-translate-x: initial;--tw-exit-translate-y: initial}.data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity: 0}.data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity: 0}.data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale: .95}.data-\[state\=open\]\:zoom-in-95[data-state=open]{--tw-enter-scale: .95}.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed]{--tw-exit-translate-x: -50%}.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed]{--tw-exit-translate-y: -48%}.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open]{--tw-enter-translate-x: -50%}.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open]{--tw-enter-translate-y: -48%}@media (min-width: 640px){.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}.sm\:space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.sm\:rounded-lg{border-radius:.5rem}.sm\:text-left{text-align:left}}