@font-face{font-family:Colony;src:url('assets/colony-pixel.ttf')}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:Colony,monospace;font-size:14px}button,input,select{font:inherit}button,select{background:var(--bg);color:var(--fg);border:1px solid var(--fg);padding:10px 12px;cursor:pointer}button{touch-action:manipulation}button:hover:not(:disabled){}button:active:not(:disabled){}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px dashed var(--fg);outline-offset:4px}button:disabled{cursor:default;border-style:dashed}button.primary,button[aria-pressed=true]{background:var(--fg);color:var(--bg)}button:disabled.primary{background:var(--bg);color:var(--fg)}[hidden]{display:none!important}@keyframes button-bounce{0%,100%{transform:scale(1)}35%{transform:scale(1.04)}70%{transform:scale(.99)}}
#stage{position:relative;width:100vw;height:100dvh;overflow:hidden}#world{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none}#hud{position:absolute;left:max(18px,env(safe-area-inset-left));top:max(18px,env(safe-area-inset-top));right:110px;display:flex;flex-wrap:wrap;gap:10px 24px;pointer-events:none;font-size:clamp(11px,1.2vw,15px);line-height:1.5}#hole-name{flex-basis:100%;font-size:11px}#tools{position:absolute;right:16px;top:16px;display:flex;gap:8px;z-index:7}#tools button{width:36px;height:36px;padding:0;font-size:18px}#collapse-wrap{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:50%;translate:-50% 0}#collapse{padding:13px 26px;letter-spacing:2px}#collapse.recommended{background:var(--fg);color:var(--bg);outline:1px dashed var(--fg);outline-offset:5px}#slots{position:absolute;inset:0;z-index:1;pointer-events:none}.slot-button{position:absolute;pointer-events:auto;width:42px;height:42px;margin:-21px 0 0 -21px;border:1px solid transparent;padding:0;background:transparent}.slot-button:hover{border:1px dashed var(--fg)}.slot-button:focus-visible{border-color:var(--fg)}.slot-button::after{content:'';position:absolute;inset:4px;border:1px solid transparent;border-radius:50%}.slot-button:hover::after{border-color:var(--fg)}
#local{position:absolute;z-index:6;width:300px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 100px);overflow:auto;background:var(--bg);border:1px solid var(--fg);padding:15px;font-size:12px;line-height:1.55}#local h2{font-size:14px;margin:0 30px 12px 0;font-weight:normal}#local .close{position:absolute;right:8px;top:8px;padding:3px 6px}#local .row{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:9px 0}#local button{padding:8px;font-size:11px}.wide{width:100%;margin-top:9px}.detail{font-size:11px;line-height:1.6;white-space:pre-line}.divider{border-top:1px dashed var(--fg);margin:12px 0;padding-top:10px}progress{width:100%;height:7px;appearance:none;border:1px solid var(--fg);background:var(--bg)}progress::-webkit-progress-bar{background:var(--bg)}progress::-webkit-progress-value{background:var(--fg)}progress::-moz-progress-bar{background:var(--fg)}select{width:100%;font-size:11px;margin:8px 0}#local.radial{width:260px;height:300px;background:none;border:0;overflow:visible;pointer-events:none;padding:0}#local.radial button{position:absolute;border-radius:50%;width:48px;height:48px;padding:0;pointer-events:auto;font-size:18px}#local.radial .radial-label{position:absolute;top:238px;left:0;width:260px;background:var(--bg);border:1px solid var(--fg);padding:8px;text-align:center;font-size:11px;line-height:1.5}
#overlay{position:absolute;inset:0;background:var(--bg);z-index:8}#overlay.reward{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:25px;text-align:center;padding:25px}#overlay.reward.ending{background:transparent}#overlay h1{font-size:clamp(24px,5vw,45px);font-weight:normal;letter-spacing:3px}.token{display:flex;align-items:center;gap:10px;font-size:24px}.sp-icon{display:inline-block;flex:none;width:22px;height:22px;border:3px solid currentColor;border-top-color:transparent;border-bottom-color:transparent;border-radius:50%;rotate:-25deg;position:relative}.sp-icon:after{content:'';position:absolute;inset:5px;background:currentColor}.tree-top{position:absolute;top:20px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.tree-top .token{font-size:16px}.tree-controls{position:absolute;right:18px;top:70px;display:flex;gap:6px}.tree-controls button{padding:8px}.tree-footer{position:absolute;bottom:20px;left:50%;translate:-50% 0}#tree{width:100%;height:100%;touch-action:none;cursor:grab}#tree:active{cursor:grabbing}#tree path{stroke:var(--fg);fill:none;stroke-width:1}#tree .locked-path{stroke-dasharray:2 6}#tree .skill-node{cursor:pointer}#tree .node-visual{}#tree .skill-node:hover .node-visual{}#tree .skill-node:active .node-visual{}#tree circle{fill:var(--bg);stroke:var(--fg);stroke-width:1.5}#tree .locked circle{stroke-dasharray:2 4}#tree .available circle{stroke-width:3}#tree .bought circle{fill:var(--fg)}#tree .selected circle{stroke-width:4}#tree text{fill:var(--fg);font-family:Colony,monospace;font-size:10px;text-anchor:middle;pointer-events:none}#tree .symbol{font-size:20px}#tree .bought .symbol{fill:var(--bg)}#tree .skill-node:focus{outline:none}#tree .skill-node:focus-visible circle{stroke-width:4;stroke-dasharray:3 2}
#inspector{position:absolute;bottom:78px;left:50%;translate:-50% 0;width:min(580px,calc(100% - 28px));padding:17px;background:var(--bg);border:1px solid var(--fg);max-height:45%;overflow:auto;animation:slide-in 180ms ease-out}#inspector h2{font-size:16px;font-weight:normal;margin:0 50px 10px 0}#inspector .close{position:absolute;top:10px;right:10px;font-size:10px;padding:6px}#inspector .detail{margin:8px 0}#inspector .buy-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:12px}#inspector .token{font-size:15px}@keyframes slide-in{from{transform:translateY(24px)}to{transform:translateY(0)}}
#modal{position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(var(--bg) 0% 25%,transparent 0% 50%) 0 0/4px 4px;padding:12px}.modal-panel{background:var(--bg);border:1px solid var(--fg);padding:16px;width:420px;max-width:100%;max-height:calc(100dvh - 24px);overflow:auto}.modal-panel h2{font-size:18px;font-weight:normal;margin:0 0 10px}.modal-panel button{padding:7px 10px}.setting{display:block;margin:9px 0;font-size:12px;line-height:1.45}.setting input[type=range]{width:100%;accent-color:var(--fg)}.setting input[type=checkbox]{accent-color:var(--fg)}.modal-panel .row{display:flex;justify-content:space-between;gap:10px;margin-top:12px}.modal-panel p{line-height:1.55;font-size:13px}.language{display:flex;gap:6px;margin-top:6px}.language button{flex:1}#toast{position:absolute;bottom:90px;left:50%;translate:-50% 0;width:max-content;max-width:calc(100% - 30px);background:var(--bg);border:1px solid var(--fg);padding:12px;font-size:12px;line-height:1.6;pointer-events:none;z-index:25}#catchup{position:absolute;inset:0;z-index:30;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:14px}#crt{position:absolute;inset:0;pointer-events:none;z-index:5;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,var(--bg) 3px,var(--bg) 4px);box-shadow:inset 0 0 80px 15px var(--bg);opacity:var(--crt,.22)}
@media(max-width:600px){#hud{gap:5px 14px;right:100px;font-size:11px}#hole-name{font-size:10px}#local:not(.radial){left:12px!important;top:auto!important;bottom:85px;width:calc(100% - 24px);max-height:48vh}.tree-top{font-size:12px}#inspector{padding:12px}#inspector .detail{font-size:10px}#inspector h2{font-size:13px}.modal-panel{padding:14px}}
@media(max-height:450px){#local{max-height:calc(100dvh - 35px)}#hud{top:10px;gap:3px 14px}#hole-name{flex-basis:auto}#collapse-wrap{bottom:12px}#collapse{padding:8px 20px}.tree-footer{bottom:10px}#inspector{bottom:60px;max-height:65%;left:16px;translate:0;width:320px}.setting{margin:8px 0}}
#hole-name{position:fixed;top:max(18px,env(safe-area-inset-top));left:50%;translate:-50% 0;width:min(58vw,560px);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:6;pointer-events:none;font-size:clamp(10px,1.1vw,14px)}
.setting select{display:block;width:100%;margin-top:6px;border:1px solid var(--fg);background:var(--bg);color:var(--fg);font:inherit;padding:6px}
.settings-group{border:1px solid var(--fg);margin:14px 0;padding:8px 12px 4px;min-inline-size:0;position:relative}.settings-group summary{display:inline-block;cursor:pointer;padding:0 8px;margin:-17px 0 5px 2px;background:var(--bg);font-size:13px;letter-spacing:1px;list-style:none}.settings-group summary::-webkit-details-marker{display:none}.settings-group summary::before{content:'+';display:inline-block;width:14px}.settings-group[open] summary::before{content:'−'}.audio-settings{border-width:2px}.settings-group .setting{margin:9px 0}.settings-group .setting:first-of-type{margin-top:3px}.check-setting{display:flex;align-items:center;gap:8px}.check-setting input{margin:0}.language-setting{margin-top:12px}
#level-block{display:flex;flex-direction:column;gap:1px;line-height:1.2}#money{font-size:.9em;opacity:.92}#crew{align-self:flex-start}
@media(max-height:450px){#hole-name{top:10px}}
#tools{z-index:12}.tree-top{right:120px}#local{max-height:calc(100dvh - 100px)}.setting input[type=range]{appearance:none;height:6px;background:var(--bg);border:1px solid var(--fg);border-radius:0;margin-top:6px}.setting input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;background:var(--fg);border:1px solid var(--bg);border-radius:0}.setting input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--fg);border:1px solid var(--bg);border-radius:0}button[aria-disabled=true]{border-style:dashed}
#local{max-height:calc(100dvh - 160px);scrollbar-color:var(--fg) var(--bg);scrollbar-width:thin}#local::-webkit-scrollbar,.modal-panel::-webkit-scrollbar{width:7px;background:var(--bg)}#local::-webkit-scrollbar-thumb,.modal-panel::-webkit-scrollbar-thumb{background:var(--fg)}
@media(max-width:600px){#local:not(.radial){max-height:48vh}}
@media(prefers-reduced-motion:reduce){*:not(.sc-button):not(.sc-node),*::before,*::after{animation:none!important;transition:none!important}button:hover:not(:disabled),#tree .skill-node:hover circle{outline:1px solid var(--fg);outline-offset:2px}button:active{transform:none}}
#tree line,#tree polyline{stroke:var(--fg);fill:none;stroke-width:1;vector-effect:non-scaling-stroke}#tree .locked-path{stroke-dasharray:2 6}#tree .available-path{stroke-width:1.5}#tree .bought-path{stroke-width:2}
.building-tier-title{font-size:.72em;white-space:nowrap;opacity:.85}

/* v2.1: independent recommended reward callout and readable research rails. */
#collapse-wrap{display:flex;align-items:center;flex-direction:column;gap:7px;min-width:max-content}
#recommended-callout{font-size:10px;letter-spacing:.5px;text-align:center;white-space:nowrap;animation:recommended-pulse .28s ease-out}
@keyframes recommended-pulse{0%{transform:scale(.9);opacity:0}65%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
#tree .locked-path{opacity:.42}#tree .available-path{stroke-width:1.5}#tree .bought-path{stroke-width:2}
#tree .tree-group{fill:var(--fg);opacity:.55;font-family:Colony,monospace;font-size:13px;letter-spacing:2px;text-anchor:middle;pointer-events:none}

/* Skill-tree presentation: clean local paths, quiet resting labels, generous hit targets. */
#tree .hit-area{fill:transparent!important;stroke:none!important;pointer-events:all}
#tree .node-visual circle{fill:var(--bg);stroke:var(--fg);stroke-width:1.5}
#tree .locked .node-visual circle{stroke-dasharray:2 4}
#tree .available .node-visual circle{stroke-width:3}
#tree .bought .node-visual circle{fill:var(--fg)}
#tree .selected .node-visual circle{stroke-width:4}
#tree .node-label{opacity:0;transition:opacity 120ms ease;paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
#tree .skill-node:hover .node-label{opacity:1}
#tree .skill-node:hover .node-cost,#tree .skill-node.selected .node-cost{opacity:0}
#tree .skill-node:focus-visible .node-visual circle{stroke-width:4;stroke-dasharray:3 2}
.research-catalog{display:grid;gap:6px;margin-top:10px}.research-card{width:100%;display:grid;gap:3px;text-align:left;padding:8px 10px}.research-card .research-name{font-size:12px}.research-card .research-effect,.research-card .research-cost,.research-card .research-reason{font-size:10px;line-height:1.35}.research-card .research-cost{text-align:right;opacity:.85}.research-card .research-reason{color:var(--fg);opacity:.7}.research-card:disabled{opacity:.55}
.research-picker{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}.research-picker:disabled{opacity:1;border-style:solid}.research-options{display:grid;gap:6px;margin-top:6px;padding:6px;border:1px dashed var(--fg)}.research-selection-status{font-size:18px}.research-spinner{display:inline-block;width:13px;height:13px;border:2px dotted var(--fg);border-radius:50%;animation:research-spin 1.1s linear infinite}@keyframes research-spin{to{rotate:360deg}}
:root{--ui-space:12px;--ui-space-tight:8px;--ui-text-weight:400}body,button,input,select,output,#hud,#local,#overlay,#modal,#toast,#catchup,#tree text{font-weight:var(--ui-text-weight)}h1,h2,h3{font-weight:var(--ui-text-weight)}#hud{gap:var(--ui-space) calc(var(--ui-space)*2);align-items:flex-start}#level-block{gap:0;line-height:1.25}#money{margin-top:var(--ui-space-tight);font-size:1em;opacity:1}.hud-bounce{animation:hud-value-bounce 360ms cubic-bezier(.22,1.55,.48,1)!important}@keyframes hud-value-bounce{0%{transform:scale(1) translateY(0)}35%{transform:scale(1.16) translateY(-3px)}68%{transform:scale(.97) translateY(1px)}100%{transform:scale(1) translateY(0)}}#local,#inspector,.modal-panel,#toast{padding:var(--ui-space)}#local h2,#inspector h2{margin-bottom:var(--ui-space)}#local .row,.language,.modal-panel .row{gap:var(--ui-space-tight)}#local .row{margin:var(--ui-space-tight) 0}.wide{margin-top:var(--ui-space-tight)}.divider{margin:var(--ui-space) 0;padding-top:var(--ui-space-tight)}.research-catalog,.research-options{gap:var(--ui-space-tight)}.research-options{margin-top:var(--ui-space-tight);padding:var(--ui-space-tight)}@keyframes button-hover-bounce{0%,100%{transform:scale(1)}26%{transform:scale(.985)}52%{transform:scale(1.018)}76%{transform:scale(.996)}}button:hover:not(:disabled),.slot-button:hover{}#tree .skill-node:hover .node-visual{}
button,.slot-button,#tree .skill-node,#tree .node-visual,#level,#money{}#tree .skill-node,#tree .node-visual{}.hover-bounce{}@media(prefers-reduced-motion:reduce){.hover-bounce{animation:button-hover-bounce 420ms cubic-bezier(.18,1.7,.42,1)!important}}
#collapse.recommended,#collapse:focus-visible{outline:none;outline-offset:0}button,.slot-button{will-change:transform;backface-visibility:hidden}.hover-bounce,button:hover:not(:disabled),.slot-button:hover,#tree .skill-node:hover .node-visual{}.hover-bounce{}
.skill-description{opacity:.82}
#inspector .resonance-transition{white-space:nowrap}#inspector .resonance-transition s{opacity:.65}#inspector .requirement-detail{margin-top:auto!important;margin-left:auto;text-align:right;max-width:100%;opacity:.85}
#inspector> :last-child{margin-bottom:0}#inspector .close{min-width:88px;min-height:40px;padding:9px 12px;font-size:11px}
#inspector .inspector-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:var(--ui-space)}#inspector .inspector-header h2{flex:1;min-width:0;margin:0}#inspector .inspector-header .close{position:static;flex:0 0 auto;white-space:nowrap}
button:focus-visible,select:focus-visible,input:focus-visible{outline:none;outline-offset:0}#slots .slot-button:hover,#slots .slot-button:focus-visible{border-color:transparent}#slots .slot-button:hover::after,#slots .slot-button:focus-visible::after{border-color:transparent}#tree .skill-node:focus-visible .node-visual circle{stroke-width:1.5;stroke-dasharray:none}#tree .skill-node.available:focus-visible .node-visual circle{stroke-width:3}#tree .skill-node.locked:focus-visible .node-visual circle{stroke-width:1.5;stroke-dasharray:2 4}#tree .skill-node.bought:focus-visible .node-visual circle{stroke-width:1.5}#tree .skill-node.selected:focus-visible .node-visual circle{stroke-width:4}@media(prefers-reduced-motion:reduce){button:hover:not(:disabled),#tree .skill-node:hover circle{outline:none;outline-offset:0}}
button:not(.slot-button),select,#local:not(.radial),#inspector,.modal-panel{clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}button:hover:not(:disabled){background:var(--fg);color:var(--bg)}button:active:not(:disabled){background:var(--fg);color:var(--bg)}#tools button{clip-path:polygon(0 3px,3px 3px,3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px))}.tree-footer{right:24px;left:auto;bottom:max(20px,env(safe-area-inset-bottom));translate:0 0}.tree-footer #start-run{min-width:190px;padding:14px 30px;font-size:15px;letter-spacing:1px}.tree-footer #start-run:hover:not(:disabled){background:var(--fg);color:var(--bg)}
button:not(.slot-button),select,#local:not(.radial),#inspector,.modal-panel{clip-path:none;border-width:2px}#tools button{clip-path:none}button:hover:not(:disabled){background:var(--fg);color:var(--bg)}button:active:not(:disabled){background:var(--fg);color:var(--bg)}.tree-footer{right:24px;left:auto;bottom:max(20px,env(safe-area-inset-bottom));translate:0 0}.tree-footer #start-run{min-width:190px;padding:14px 30px;font-size:15px;letter-spacing:1px}.tree-footer #start-run:hover:not(:disabled){background:var(--fg);color:var(--bg)}
button.slot-button:hover:not(:disabled),button.slot-button:active:not(:disabled){background:transparent;color:var(--fg)}.slot-button{width:54px;height:54px;margin:-27px 0 0 -27px}.slot-button:hover{border-color:transparent}.slot-button:hover::after{border-color:transparent}
button.slot-button{border-radius:50%}button.slot-button:hover:not(:disabled){background:transparent;border-color:var(--fg);border-style:dashed;border-radius:50%}.slot-button:hover::after{border-color:var(--fg)}
button.slot-button.build-slot::before,button.slot-button.build-slot::after{content:'';position:absolute;inset:12px;border-radius:50%;pointer-events:none}button.slot-button.build-slot::before{background:transparent}button.slot-button.build-slot::after{border:0;background:transparent}button.slot-button.build-slot:hover:not(:disabled),button.slot-button.build-slot:active:not(:disabled){background:transparent;border-color:transparent}button.slot-button.build-slot:hover:not(:disabled){}button.slot-button.build-slot:hover:not(:disabled)::before,button.slot-button.build-slot:active:not(:disabled)::before{background:var(--fg)}button.slot-button.build-slot:hover:not(:disabled)::after,button.slot-button.build-slot:active:not(:disabled)::after{background:linear-gradient(var(--bg),var(--bg)) center/2px 16px no-repeat,linear-gradient(var(--bg),var(--bg)) center/16px 2px no-repeat}button.slot-button.build-slot:active:not(:disabled){}
button:disabled,[aria-disabled=true],button.unavailable{opacity:.55;border-style:dashed}button.unavailable:hover{background:var(--bg);color:var(--fg);}#local.radial .radial-label{top:250px}#local.radial button.unavailable{opacity:.55;border-style:dashed}.slot-button{width:70px;height:70px;margin:-35px 0 0 -35px}.slot-button.build-slot::before,.slot-button.build-slot::after{inset:17px}.slot-button.build-slot.slot-active::before{background:var(--fg)}.slot-button.build-slot.slot-active::after{background:linear-gradient(var(--bg),var(--bg)) center/2px 20px no-repeat,linear-gradient(var(--bg),var(--bg)) center/20px 2px no-repeat}.research-active-status{display:flex;align-items:center;gap:8px}.research-percent{font-size:11px}.research-pause-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:2px solid currentColor;font-size:9px;line-height:1}.research-building #building-stats.detail.divider{margin-top:6px;margin-bottom:0;padding-top:6px}.research-building #building-actions{margin-top:0}
*{-webkit-user-select:none;user-select:none}
button:disabled,[aria-disabled=true],button.unavailable{opacity:.55;border-style:dashed}button.unavailable:hover{background:var(--bg);color:var(--fg);}#local.radial .radial-label{top:250px}#local.radial button.unavailable{opacity:.55;border-style:dashed}.slot-button{width:70px;height:70px;margin:-35px 0 0 -35px}.slot-button.build-slot::before,.slot-button.build-slot::after{inset:17px}.slot-button.build-slot.slot-active::before{background:var(--fg)}.slot-button.build-slot.slot-active::after{background:linear-gradient(var(--bg),var(--bg)) center/2px 20px no-repeat,linear-gradient(var(--bg),var(--bg)) center/20px 2px no-repeat}.research-active-status{display:flex;align-items:center;gap:8px}.research-percent{font-size:11px}.research-pause-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:2px solid currentColor;font-size:9px;line-height:1}.research-building #building-live>.divider{margin-top:4px;padding-top:6px}.research-building #research-picker{margin-top:0}.research-building #research-options{border:0;padding:0;margin-top:4px;gap:4px}.research-building .research-card{padding:6px 8px}.research-building #building-stats.detail.divider{margin-top:4px;margin-bottom:0;padding-top:6px}.research-building #building-actions{margin-top:0}
/* Fixed settings viewport and visual-only control animation */
.settings-modal-panel{width:min(672px,calc(100vw - 24px));height:min(720px,calc(100dvh - 24px));max-width:none;max-height:none;overflow:hidden;display:flex;flex-direction:column}
.settings-modal-panel h2{flex:0 0 auto;margin-bottom:10px}
.settings-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 8px 4px 0;scrollbar-color:var(--fg) var(--bg);scrollbar-width:thin;overscroll-behavior:contain}
.settings-scroll::-webkit-scrollbar{width:7px;background:var(--bg)}
.settings-scroll::-webkit-scrollbar-thumb{background:var(--fg)}
.settings-modal-panel>.settings-actions{flex:0 0 auto;margin-top:10px;padding-top:8px;border-top:1px solid var(--fg)}
.settings-modal-panel .settings-group{margin:10px 0}
.only-visual{position:relative;contain:layout paint;isolation:isolate;will-change:transform;backface-visibility:hidden}
#slots .slot-button{position:absolute}
button:hover:not(:disabled),.slot-button:hover{}
button.only-visual:hover:not(:disabled),.slot-button.only-visual:hover{}
button.only-visual.unavailable:hover{}
button:active:not(:disabled){}
button.only-visual:active:not(:disabled){}
.settings-modal-panel .settings-group summary{display:block;width:calc(100% + 24px);box-sizing:border-box;margin:-8px -12px 0;padding:8px 15px}
.settings-modal-panel .settings-group:not([open]){padding-bottom:0}
.settings-modal-panel .settings-group[open] summary{margin-bottom:8px}
@keyframes button-hover-bounce{0%,100%{transform:scale(1)}26%{transform:scale(.985)}52%{transform:scale(1.018)}76%{transform:scale(.996)}}
#crt{z-index:1000}

/* CRT pass: scanlines, a restrained phosphor grille, and a soft edge mask.
   The SVG filter supplies the light bloom/RGB split; this layer supplies the
   physical screen texture without moving or resizing any game hit areas. */
#crt{
  isolation:isolate;
  overflow:hidden;
  background:
    repeating-linear-gradient(to bottom,transparent 0 2px,color-mix(in srgb,var(--bg) 72%,transparent) 2px 3px),
    repeating-linear-gradient(to bottom,transparent 0 8px,color-mix(in srgb,var(--fg) 6%,transparent) 8px 9px);
  background-size:100% 4px,100% 9px;
  box-shadow:
    inset 0 0 92px 18px var(--bg),
    inset 0 0 18px 2px color-mix(in srgb,var(--bg) 72%,transparent);
}
#crt::after{
  content:"";
  position:absolute;
  inset:-1%;
  pointer-events:none;
  background:radial-gradient(ellipse at center,
    transparent 48%,
    color-mix(in srgb,var(--bg) 20%,transparent) 72%,
    var(--bg) 126%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bg) 82%,transparent);
  opacity:var(--crt-vignette,.53);
}

/* Hover motion stays inside the control's visual layer and cannot resize its parent. */
.button-visual{display:inline-block;will-change:transform;backface-visibility:hidden}
.research-card>.button-visual{display:grid;width:100%;gap:3px;text-align:left}
.research-picker>.button-visual{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left}
#tree.compact .node-label,#tree.compact .node-cost{display:none}
:root{--fg:#fff;--bg:#000}
.choice{position:relative;margin-top:8px}.choice-trigger{width:100%;text-align:left;min-height:40px}.choice-options{display:grid;gap:4px;border:1px solid var(--fg);padding:6px;margin-top:6px;max-height:220px;overflow:auto;background:var(--bg)}.choice-options button{text-align:left;min-height:36px}.choice-options [aria-selected=true]{background:var(--fg);color:var(--bg)}
#stage .choice button.ui-feedback:is(:hover,.hover-bounce,.ui-held,.release-bounce){background:var(--bg)!important;color:var(--bg)!important}
#stage .choice button.ui-feedback:is(:hover,.hover-bounce,.ui-held,.release-bounce)::before{background:var(--fg)!important;color:var(--fg)!important}
#stage .choice button.ui-feedback:is(:hover,.hover-bounce,.ui-held,.release-bounce)>.button-visual{position:relative;z-index:1;color:var(--bg)!important}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px dashed var(--fg);outline-offset:3px}#tree .skill-node:focus-visible .node-visual circle{stroke-width:4;stroke-dasharray:3 2}
#collapse.recommended{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.palette-panel{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}.palette-list{display:grid;gap:12px}.palette-row{display:grid;gap:5px}.palette-row small{font-size:11px;line-height:1.5}.palette-swatch{text-align:left;min-height:42px}.palette-swatch[aria-pressed=true]{border-width:3px}.swatch-dot{display:inline-block;width:16px;height:16px;background:var(--swatch);border:3px solid var(--swatch-bg);margin-right:10px;vertical-align:middle}
.secret-code input{min-width:0;flex:1;background:var(--bg);color:var(--fg);border:1px solid var(--fg);padding:8px;font:inherit;user-select:text;-webkit-user-select:text}.secret-code label{font-size:12px}.secret-code [role=status]{min-height:16px;font-size:11px}
.endless-label,.last-reward{display:block;text-align:center;font-size:10px;line-height:1.5;margin-top:7px;max-width:300px}.last-reward{opacity:.8}.collapse-overlay{pointer-events:none;background:transparent!important}.skip-collapse{position:absolute;bottom:24px;right:24px;pointer-events:auto}#reward-breakdown{font-size:clamp(12px,2vw,18px);line-height:1.6;max-width:90vw}.reward .token{animation:reward-arrive .5s ease-out}@keyframes reward-arrive{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:600px){.tree-top{right:110px;font-size:11px}.tree-footer{right:12px;bottom:12px}.tree-footer #start-run{min-width:160px;font-size:12px;padding:12px}.last-reward{max-width:220px;font-size:9px}.tree-controls{left:12px}#local.radial button{min-width:36px;min-height:36px}#tools{gap:5px}#hole-name{max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){*:not(.sc-button):not(.sc-node),*::before,*::after,.hover-bounce,button.slot-button:not(.sc-button):hover:not(:disabled),button.only-visual:hover:not(:disabled)>.button-visual,#collapse:hover:not(:disabled)>.button-visual{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* The pixel font is retained where available; native fallbacks supply CJK/Hangul glyphs. */
html[lang="ja"] body,html[lang="ja"] button,html[lang="ja"] input,html[lang="ja"] select,html[lang="ja"] output,html[lang="ja"] #tree text,html[lang="ja"] #tree .node-label-text{font-family:"Yu Gothic UI","Yu Gothic",sans-serif}
html[lang="ko"] body,html[lang="ko"] button,html[lang="ko"] input,html[lang="ko"] select,html[lang="ko"] output,html[lang="ko"] #tree text,html[lang="ko"] #tree .node-label-text{font-family:"Malgun Gothic",sans-serif}
html[lang="zh-CN"] body,html[lang="zh-CN"] button,html[lang="zh-CN"] input,html[lang="zh-CN"] select,html[lang="zh-CN"] output,html[lang="zh-CN"] #tree text,html[lang="zh-CN"] #tree .node-label-text{font-family:"Microsoft YaHei",sans-serif}
#goal{position:absolute;z-index:6;top:88px;left:max(18px,env(safe-area-inset-left));width:min(290px,calc(100vw - 36px));padding:10px 12px;background:var(--bg);border:0;border-bottom:1px dashed var(--fg);pointer-events:none;font-size:10px;line-height:1.45}
:root{--ui-top:max(18px,env(safe-area-inset-top))}#hud,#hole-name,#tools{top:var(--ui-top)}
@media(max-height:450px){:root{--ui-top:10px}}
#goal-title{font-size:12px;line-height:1.35}#goal-track{height:6px;margin-top:8px;border:1px solid var(--fg)}#goal-fill{display:block;height:100%;background:var(--fg);transition:width 180ms ease-out}#goal-count{margin-top:5px;opacity:.9}#goal-hint{margin-top:7px;padding-top:7px;border-top:1px dotted var(--fg);opacity:.78}
#milestone{position:absolute;z-index:7;top:20%;left:50%;translate:-50% 0;max-width:90vw;padding:11px 17px;border:2px solid var(--fg);background:var(--bg);text-align:center;white-space:nowrap;font-size:clamp(12px,2vw,20px);pointer-events:none;animation:milestone-arrive 280ms cubic-bezier(.2,1.4,.4,1)}
@keyframes milestone-arrive{from{transform:translateY(-12px) scale(.88);opacity:0}to{transform:none;opacity:1}}
@media(max-width:600px){#goal{top:83px;width:min(255px,calc(100vw - 128px));font-size:9px;padding:8px}#goal-title{font-size:10px}#milestone{top:24%;font-size:12px;white-space:normal}}
@media(max-height:450px){#goal{top:54px;width:220px;padding:7px}#goal-hint{display:none}#milestone{top:14%}}
@media(prefers-reduced-motion:reduce){#goal-fill{transition:none}#milestone{animation:none}}
.run-report{display:grid;gap:7px;max-width:min(540px,90vw);padding:12px 16px;border:1px solid var(--fg);font-size:11px;line-height:1.5}.run-report strong{font-size:13px;font-weight:normal;letter-spacing:1px}.last-run{display:block;max-width:320px;margin:6px auto 0;font-size:9px;line-height:1.4;text-align:center;opacity:.8}
.language{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.language button{min-width:0}
#palette-unlock-fx{position:absolute;inset:0;z-index:12;pointer-events:none}
.palette-unlock-card{position:absolute;display:flex;align-items:center;gap:8px;min-width:124px;padding:7px 9px;border:1px solid var(--palette-fg);background:var(--palette-bg);color:var(--palette-fg);font-size:11px;line-height:1.2;white-space:nowrap;box-shadow:0 0 0 2px var(--palette-bg)}
.palette-unlock-dot{display:block;flex:none;width:18px;height:18px;background:var(--palette-fg);border:3px solid var(--palette-bg);outline:1px solid var(--palette-fg)}
.palette-unlock-card.flying{animation:palette-unlock-flight 820ms cubic-bezier(.2,.9,.25,1) forwards}
@keyframes palette-unlock-flight{0%{opacity:0;transform:translate(0,0) scale(1.28) rotate(-8deg)}12%{opacity:1}62%{transform:translate(calc(var(--palette-fly-x)*.78),calc(var(--palette-fly-y)*.78)) scale(1.02) rotate(4deg)}100%{opacity:.55;transform:translate(var(--palette-fly-x),var(--palette-fly-y)) scale(.58) rotate(8deg)}}
#palette-unlock-notice{position:absolute;top:80px;right:16px;z-index:9;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;width:min(280px,calc(100vw - 32px));padding:11px 12px;background:var(--bg);border:1px solid var(--fg);font-size:12px;line-height:1.4;pointer-events:auto;animation:palette-notice-arrive 220ms ease-out}
#palette-unlock-title{min-width:0}
#palette-unlock-timer{opacity:.72;white-space:nowrap}
#palette-install{grid-column:1/-1;justify-self:end;padding:4px 8px;border:1px solid var(--fg);background:var(--bg);color:var(--fg);font-size:10px;line-height:1}
#palette-install:hover:not(:disabled){background:var(--fg);color:var(--bg)}
@keyframes palette-notice-arrive{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(max-width:600px){#palette-unlock-notice{top:80px;right:12px;width:min(245px,calc(100vw - 24px))}}
.research-selection-wrap{margin-top:4px}
.research-picker{min-height:36px;padding:7px 8px}
.research-options{display:grid;gap:0;margin-top:4px;padding:0;border:0;border-top:1px solid var(--fg)}
.research-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name cost" "effect cost" "reason reason";align-items:center;column-gap:10px;min-height:48px;padding:6px 2px;border:0;border-bottom:1px solid var(--fg);background:transparent}
.research-card:hover:not(:disabled){background:var(--fg);color:var(--bg);}
.research-card .research-name{grid-area:name;font-size:11px;line-height:1.2;letter-spacing:.2px}
.research-card .research-effect{grid-area:effect;font-size:9px;line-height:1.25;opacity:.72}
.research-card .research-cost{grid-area:cost;align-self:center;padding-left:4px;font-size:9px;line-height:1.25;text-align:right;white-space:nowrap;opacity:.72}
.research-card .research-reason{grid-area:reason;margin-top:2px;font-size:8px;line-height:1.2;opacity:.6}
.research-card:hover:not(:disabled) .research-effect,.research-card:hover:not(:disabled) .research-cost,.research-card:hover:not(:disabled) .research-reason{opacity:.85}
.research-card:disabled{background:transparent}
.research-card:disabled .research-name{opacity:.7}
.tree-footer{display:flex;flex-direction:column;align-items:stretch;gap:7px;width:min(240px,calc(100vw - 24px))}
.tree-footer button{width:100%;min-width:0}
.tree-footer #run-results{padding:10px 24px;font-size:12px;letter-spacing:1px}
@media(max-width:600px){.tree-footer{width:min(240px,calc(100vw - 24px))}.tree-footer #run-results{font-size:10px;padding:9px 16px}}

/* Skill labels are bounded SVG HTML boxes so long names wrap at word boundaries. */
#tree foreignObject.node-label{overflow:visible;pointer-events:none;paint-order:normal;stroke:none}
#tree .node-label-text{display:block;width:100%;height:100%;overflow-wrap:break-word;word-break:normal;white-space:normal;color:var(--fg);font-family:Colony,monospace;font-size:10px;line-height:1.15;text-align:center;overflow:hidden}
#tree .node-label-tier{white-space:nowrap}

/* v4: one font stack per script, shared by HTML and SVG. */
:root{--ui-font:Colony,monospace}
html:not([lang=en]):not([lang=ru]){--ui-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
html:root[lang=ja]{--ui-font:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif}
html:root[lang=ko]{--ui-font:"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
html:root[lang=zh-CN]{--ui-font:"PingFang SC","Microsoft YaHei",sans-serif}
html,body,#tree text,#tree .node-label-text{font-family:var(--ui-font)}
.language button[lang]{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.language button[lang=ja]{font-family:"Hiragino Sans","Yu Gothic",sans-serif}
.language button[lang=ko]{font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
.language button[lang=zh-CN]{font-family:"PingFang SC","Microsoft YaHei",sans-serif}
.settings-modal-panel .language button{min-height:44px;overflow-wrap:anywhere;line-height:1.4}
.settings-modal-panel .language button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--bg)}
.settings-actions{flex-wrap:wrap}.settings-actions button{flex:1;min-width:0}
.modal-panel h2,.modal-panel p,.detail,#inspector h2,.button-visual{overflow-wrap:anywhere}
.button-visual{max-width:100%;pointer-events:none}
/* Orbital glyphs are children; the circular 70px hit target never scales. */
#slots button.slot-button::before,#slots button.slot-button::after{display:none}
#slots .slot-button>.button-visual{position:absolute;inset:17px;max-width:none;border-radius:50%;display:block}
#slots .build-slot>.button-visual::before,#slots .build-slot>.button-visual::after{content:'';position:absolute;inset:0;border-radius:50%}
#slots .build-slot:is(:hover,:focus-visible,.slot-active)>.button-visual::before{background:var(--fg)}
#slots .build-slot:is(:hover,:focus-visible,.slot-active)>.button-visual::after{background:linear-gradient(var(--bg),var(--bg)) center/2px 20px no-repeat,linear-gradient(var(--bg),var(--bg)) center/20px 2px no-repeat}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,#prestige-label:focus-visible,#collapse:focus-visible,#slots .slot-button:focus-visible{outline:2px dashed var(--fg);outline-offset:3px}
#tree .skill-node:focus-visible .node-visual circle{stroke-width:4;stroke-dasharray:3 2}
#prestige-picker{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) 36px;gap:6px;align-items:center}
#prestige-picker button{min-width:0;min-height:40px;padding:6px;font-size:18px}
#prestige-label{font-size:12px;text-align:center;line-height:1.4;overflow-wrap:anywhere;padding:4px}
#prestige-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);right:0;width:max-content;max-width:min(340px,calc(100vw - 24px));max-height:50dvh;overflow:auto;z-index:2;padding:12px;border:2px solid var(--fg);background:var(--bg);color:var(--fg);font-size:12px;line-height:1.5;white-space:pre-line;pointer-events:none}
#prestige-picker:hover #prestige-tooltip,#prestige-picker:focus-within #prestige-tooltip{display:block}
.tree-top,.tree-controls{background:var(--bg);padding:8px;border:1px solid var(--fg)}
.tree-top .token{background:var(--bg);padding:4px;flex-shrink:0}
#collapse.recommended{background:var(--fg);color:var(--bg);border-color:var(--fg)}
#crew:empty{display:none}
@media(max-width:600px){
  #hud{row-gap:4px}
  #crew{flex-basis:100%;min-width:0;line-height:1.25;overflow-wrap:anywhere}
  #goal{top:max(88px,calc(env(safe-area-inset-top) + 70px))}
}
/* Skill-tree header: title and SP use independent panels. */
.tree-top{top:12px;left:24px;right:120px;height:60px;padding:0;background:transparent;border:0;pointer-events:none}
.tree-title-panel,.tree-sp-panel{position:absolute;top:0;height:60px;display:flex;align-items:center;background:var(--bg);border:1px solid var(--fg);padding:0 12px}
.tree-title-panel{left:0;max-width:calc(50% - 8px)}
.tree-title{min-width:0;overflow-wrap:anywhere}
.tree-sp-panel{position:fixed;left:50vw;top:12px;transform:translateX(-50%);gap:8px;font-size:16px;white-space:nowrap}
.tree-top .sp-label{font-size:14px;letter-spacing:1px}
.tree-controls{top:58px;gap:4px;padding:6px}
.tree-footer{right:max(24px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom))}
.modal-panel{padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));line-height:1.5}
#overlay.reward{overflow:auto;justify-content:safe center}
@media(max-width:600px){.tree-footer{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}#prestige-label{font-size:11px}.settings-actions button{font-size:11px;padding:8px}#inspector .resonance-transition{white-space:normal}#tree .node-label-text{font-size:11px}.tree-title-panel,.tree-sp-panel{height:50px}.tree-title-panel{max-width:calc(50% - 8px)}.tree-sp-panel{top:12px}.tree-controls{top:78px}}
@media(prefers-reduced-motion:reduce){*:not(.sc-button):not(.sc-node),*::before,*::after,button>.button-visual.hover-bounce,#tree .node-visual.hover-bounce,button>.button-visual.release-bounce,#tree .node-visual.release-bounce{animation:none!important;transition:none!important}button.ui-held:not(:disabled):not(.unavailable)>.button-visual,#tree .skill-node.ui-held>.node-visual:not(.sc-node){transform:none!important}}
@media(prefers-reduced-motion:reduce){#stage .button-visual,#stage #collapse>.button-visual,#stage #collapse:hover:not(:disabled)>.button-visual,#stage #collapse>.button-visual.hover-bounce,#stage #collapse>.button-visual.release-bounce,#stage button.slot-button:hover:not(:disabled)>.button-visual.hover-bounce,#stage button.slot-button:hover:not(:disabled)>.button-visual.release-bounce,#stage #tree .node-visual.hover-bounce,#stage #tree .node-visual.release-bounce{animation:none!important;transform:none!important}#stage button.ui-held:not(:disabled):not(.unavailable)>.button-visual,#stage #collapse.ui-held>.button-visual,#stage #tree .skill-node.ui-held>.node-visual:not(.sc-node){transform:none!important}}

.demo-ending{overflow-y:auto;gap:18px!important;background:var(--bg)!important}
.demo-ending h1{margin:0;max-width:900px;font-size:clamp(23px,5vw,48px)!important}
.demo-ending p{max-width:580px;line-height:1.8;margin:0;font-size:clamp(12px,2vw,15px);white-space:pre-line}
.demo-ending .run-report,.demo-ending .demo-next{width:min(580px,calc(100vw - 50px));max-width:none}
.demo-ending>button{width:min(280px,calc(100vw - 50px));height:48px}
.demo-eyebrow{font-size:11px;letter-spacing:2px}
.demo-next{padding-top:20px;border-top:1px dashed var(--fg)}
@media(max-height:550px){.demo-ending{justify-content:flex-start!important;padding-top:24px!important}}
.settings-modal-panel{height:auto;min-height:0;max-height:calc(100dvh - 24px)}
.pixel-trophy{position:relative;width:20px;height:20px;display:inline-block;background:currentColor;clip-path:polygon(4px 1px,16px 1px,16px 4px,19px 4px,19px 10px,15px 10px,15px 13px,11px 13px,11px 16px,15px 16px,15px 19px,5px 19px,5px 16px,9px 16px,9px 13px,5px 13px,5px 10px,1px 10px,1px 4px,4px 4px)}
.leaderboard-panel{width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 32px);display:flex;flex-direction:column;gap:12px}
.leaderboard-panel h2,.leaderboard-panel p{margin:0}
.leaderboard-scope,.leaderboard-rule{font-size:11px;line-height:1.6;opacity:.75}
.leaderboard-filters{display:flex;flex-wrap:wrap;gap:6px}
.leaderboard-filters button{font-size:11px;padding:8px 10px}
.leaderboard-status{min-height:26px;font-size:18px}
.leaderboard-status small{font-size:10px;margin-left:6px;opacity:.65}
.leaderboard-scroll{overflow:auto;min-height:0;max-height:50dvh;border:0;border-top:1px solid var(--fg)}
.leaderboard-panel table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.leaderboard-panel th,.leaderboard-panel td{text-align:left;padding:12px 10px;border-bottom:1px dashed var(--fg)}
.leaderboard-panel thead{position:sticky;top:0;background:var(--bg)}
.leaderboard-panel th{font-weight:normal}
.leaderboard-panel th small{display:block;font-size:9px;line-height:1.6;margin-top:4px}
.leaderboard-panel td:nth-last-child(-n+2){text-align:right;white-space:nowrap}
.leaderboard-current{background:var(--fg);color:var(--bg)}
.leaderboard-empty{padding:36px 12px;text-align:center;line-height:1.8}
.leaderboard-results{flex:0 0 auto;border-top:1px dashed var(--fg);padding-top:10px}
.leaderboard-results summary{display:block;cursor:pointer;font-size:13px;line-height:1.4;list-style:none}
.leaderboard-results summary::-webkit-details-marker{display:none}
.leaderboard-results summary::before{content:'+';display:inline-block;width:14px}
.leaderboard-results[open] summary::before{content:'−'}
.leaderboard-results[open] summary{margin-bottom:6px}
.leaderboard-result-row{padding:6px 0;border-bottom:1px dashed var(--fg);font-size:11px;line-height:1.45}
.leaderboard-result-row:last-child{border-bottom:0}
@media(max-width:600px){.leaderboard-panel{padding:16px}.leaderboard-panel th,.leaderboard-panel td{padding:9px 6px;font-size:10px}.leaderboard-filters button{font-size:10px;padding:8px}.leaderboard-status{font-size:15px}}
.pixel-medal{display:inline-block;width:22px;height:26px;flex-shrink:0;background:currentColor;clip-path:polygon(14% 0,43% 0,50% 19%,57% 0,86% 0,71% 31%,86% 42%,100% 42%,100% 77%,86% 77%,86% 89%,64% 89%,64% 100%,36% 100%,36% 89%,14% 89%,14% 77%,0 77%,0 42%,14% 42%,29% 31%)}
.achievements-panel{width:min(650px,calc(100vw - 28px));display:flex;flex-direction:column;max-height:calc(100dvh - 32px);gap:12px}
.achievements-panel>h2,.achievements-panel>p{margin:0}.achievement-hint{font-size:10px;line-height:1.6;opacity:.7}
.achievement-list{overflow:auto;min-height:0;display:grid;gap:10px;padding:3px;scrollbar-width:thin;scrollbar-color:var(--fg) var(--bg)}.achievement-list::-webkit-scrollbar{width:9px;background:var(--bg)}.achievement-list::-webkit-scrollbar-track{background:repeating-linear-gradient(0deg,var(--bg) 0 5px,var(--fg) 5px 6px,var(--bg) 6px 10px);border-left:1px solid var(--fg)}.achievement-list::-webkit-scrollbar-thumb{background:var(--fg);border:2px solid var(--bg);min-height:28px}.achievement-list::-webkit-scrollbar-button{display:none;width:0;height:0}
.achievement-card{display:flex;gap:14px;align-items:center;border:1px solid var(--fg);padding:14px}.achievement-card>div{flex:1;min-width:0}.achievement-card>.pixel-medal{opacity:.25}.achievement-done>.pixel-medal{opacity:1}
.achievement-card h3{font-size:13px;line-height:1.5;margin:0 0 6px;font-weight:normal}.achievement-card p{font-size:10px;line-height:1.6;margin:0 0 10px;opacity:.8}
.achievement-progress{display:flex;align-items:center;gap:12px;font-size:9px}.achievement-progress progress{flex:1;min-width:0;height:10px;appearance:none;border:2px solid var(--fg);padding:2px;background:repeating-linear-gradient(90deg,var(--bg) 0 4px,var(--fg) 4px 5px,var(--bg) 5px 9px);image-rendering:pixelated}.achievement-progress progress::-webkit-progress-bar{background:repeating-linear-gradient(90deg,var(--bg) 0 4px,var(--fg) 4px 5px,var(--bg) 5px 9px)}.achievement-progress progress::-webkit-progress-value{background:var(--fg);box-shadow:inset -2px 0 var(--bg)}.achievement-progress progress::-moz-progress-bar{background:var(--fg);box-shadow:inset -2px 0 var(--bg)}.achievement-progress span{white-space:nowrap}.achievements-panel>.wide{flex-shrink:0;margin:0}
#achievement-notice{position:fixed;z-index:100;top:max(72px,calc(env(safe-area-inset-top) + 12px));left:50%;right:auto;bottom:auto;translate:-50% 0;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:14px;width:min(390px,calc(100vw - 36px));padding:15px 18px;text-align:left;background:var(--bg);color:var(--fg);border:2px solid var(--fg);box-shadow:6px 6px 0 var(--bg);animation:achievement-pop 420ms cubic-bezier(.22,1.55,.48,1)}
#achievement-notice:hover{background:var(--fg);color:var(--bg)}.achievement-popup-icon{display:block;width:27px;height:32px;flex:0 0 27px;opacity:1}.achievement-popup-copy{display:flex;flex:1 1 auto;flex-direction:column;gap:3px;min-width:0}.achievement-popup-copy small{font-size:9px;line-height:1.3;letter-spacing:1px;opacity:.75}.achievement-popup-copy strong{font-size:14px;line-height:1.35;font-weight:normal}.achievement-popup-copy em{font-size:10px;line-height:1.3;font-style:normal;opacity:.75}@keyframes achievement-pop{from{opacity:0;transform:translate(24px,12px) scale(.9)}to{opacity:1;transform:translate(0) scale(1)}}
#hud{right:190px}.tree-top{right:200px}
@media(max-width:600px){.achievement-card{padding:10px;gap:10px}.achievement-card h3{font-size:11px}.achievements-panel{gap:10px}#achievement-notice{top:62px;width:min(350px,calc(100vw - 24px));padding:12px 14px}#hud{right:190px}}

/* Shared panel motion: soft scale-in with a pixel-friendly bounce, then a quick scale-out. */
@keyframes panel-scale-enter{0%{opacity:0;transform:scale(0)}42%{opacity:1;transform:scale(1.1)}68%{transform:scale(.9)}86%{transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@keyframes panel-scale-exit{0%{opacity:1;transform:scale(1)}22%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:scale(0)}}
.panel-enter{animation:panel-scale-enter 460ms cubic-bezier(.22,1.25,.36,1) both;transform-origin:50% 50%;will-change:transform,opacity}
.panel-exit{animation:panel-scale-exit 180ms cubic-bezier(.4,0,1,1) both;transform-origin:50% 50%;pointer-events:none!important;will-change:transform,opacity}
#overlay.reward:not(.collapse-overlay){animation:panel-scale-enter 460ms cubic-bezier(.22,1.25,.36,1) both;transform-origin:50% 50%}
@media(prefers-reduced-motion:reduce){.panel-enter,.panel-exit,#overlay.reward:not(.collapse-overlay){animation:none!important;transform:none!important;opacity:1!important}}
.modal-panel{animation:panel-scale-enter 460ms cubic-bezier(.22,1.25,.36,1) both;transform-origin:50% 50%;will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.modal-panel{animation:none!important;transform:none!important;opacity:1!important}}
.achievement-reward{display:block;margin-top:.3rem;color:var(--fg);opacity:.78;letter-spacing:.04em}

/* In-game skill tree window and HUD skill-point readout. */
#sp{display:block;margin-top:var(--ui-space-tight);font-size:1em}
#tools #tree-button{width:auto;min-width:122px;padding:0 8px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:10px;letter-spacing:.4px;white-space:nowrap}
#tools #tree-button .tree-button-icon{font-size:17px;line-height:1}
#overlay.tree-overlay{display:flex;align-items:center;justify-content:center;padding:10vh 10vw;background:rgba(0,0,0,.82);z-index:14}
.tree-window{position:relative;width:80vw;height:80vh;max-width:none;background:var(--bg);border:2px solid var(--fg);overflow:hidden}
.tree-window .tree-close{position:absolute;right:10px;top:10px;width:36px;height:36px;padding:0;z-index:4;font-size:24px;line-height:1}
.tree-window .tree-top{top:12px;left:24px;right:70px}
.tree-window .tree-controls{top:72px;right:18px}
.tree-window .tree-footer{bottom:18px;right:18px}
@media(max-width:600px){#tools #tree-button{min-width:36px;width:36px;padding:0}#tools #tree-button .tree-button-label{display:none}.tree-window{width:90vw;height:82vh}.tree-window .tree-top{left:12px;right:54px}.tree-window .tree-close{right:6px;top:6px}}

/* Recommended state is shown by color, not a periodic shape animation. */
#collapse.recommended{box-shadow:0 0 0 3px var(--fg),0 0 18px color-mix(in srgb,var(--fg) 45%,transparent)}

/* Shared motion for every button, including controls inserted after page load. */
@keyframes button-bounce{0%,100%{transform:scale(1)}35%{transform:scale(1.04)}70%{transform:scale(.99)}}
@keyframes button-hover-bounce{0%,100%{transform:scale(1)}26%{transform:scale(.985)}52%{transform:scale(1.018)}76%{transform:scale(.996)}}
@keyframes button-release-bounce{0%{transform:scale(.94)}58%{transform:scale(1.06)}80%{transform:scale(.985)}100%{transform:scale(1)}}
#stage button.ui-feedback:is(:hover,.hover-bounce,.ui-held,.release-bounce){}
#stage button.ui-feedback.slot-button:is(:hover,.hover-bounce,.ui-held,.release-bounce){overflow:clip}
/* The button keeps its layout and hitbox; its surface and content move together. */
:where(#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true])){position:relative}
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true]){border-color:transparent;clip-path:inset(0);isolation:isolate}
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true])::before{content:"";position:absolute;inset:-2px;z-index:0;pointer-events:none;background:inherit;border:solid var(--fg);border-width:inherit;border-style:inherit;border-radius:inherit;box-shadow:inherit;}
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true])>.button-visual{position:relative;z-index:1}
#stage .choice button.ui-feedback>.button-visual,#stage .palette-swatch.ui-feedback>.button-visual{display:block;width:100%;text-align:inherit}
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true]):is(.hover-bounce,.ui-held,.release-bounce){background:var(--bg);color:var(--bg)}
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true]):is(.hover-bounce,.ui-held,.release-bounce)::before{background:var(--fg)}
#stage button.ui-feedback.palette-swatch[aria-pressed=true]::before{inset:-3px}
#stage #collapse.recommended{clip-path:none}
#stage #collapse.recommended::before{inset:0}
#stage button.ui-feedback.ui-held:not(:disabled):not(.unavailable):not([aria-disabled=true])>.button-visual{}
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true]).ui-held::before{}
#stage button.ui-feedback:not(:disabled):not(.unavailable):not([aria-disabled=true]).release-bounce>.button-visual{}
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true]).release-bounce::before{}
#stage #tree .skill-node.ui-held>.node-visual{}
#stage #tree .skill-node>.node-visual.release-bounce{}

/* Selected controls use the active palette, with a 2px background-color inset. */
#stage button:is([aria-pressed=true],[aria-selected=true]){border-color:var(--fg)!important;background:var(--fg)!important;color:var(--bg)!important;box-shadow:inset 0 0 0 2px var(--bg)!important}
#stage button:is([aria-pressed=true],[aria-selected=true])::before{content:none!important;display:none!important}
#stage button:is([aria-pressed=true],[aria-selected=true])>.button-visual{color:var(--bg)!important}
#stage button.ui-feedback:is([aria-pressed=true],[aria-selected=true]):is(:hover,.hover-bounce,.ui-held,.release-bounce){background:var(--fg)!important;color:var(--bg)!important;box-shadow:none!important}

/* Affordable radial build choices retain a visible frame even while hovered. */
#stage #local.radial button.ui-feedback:not(.unavailable){border-color:var(--fg);background:var(--bg);color:var(--fg)}
#stage #local.radial button.ui-feedback:not(.unavailable)::before{inset:4px;border:0;background:transparent}
#stage #local.radial button.ui-feedback:not(.unavailable):is(:hover,.hover-bounce,.ui-held,.release-bounce){border-color:var(--fg);background:var(--bg);color:var(--bg)}
#stage #local.radial button.ui-feedback:not(.unavailable):is(:hover,.hover-bounce,.ui-held,.release-bounce)::before{inset:4px;background:var(--fg)}

/* Keep the two intentional ready-state callouts white through every gesture. */
#stage #tools #tree-button.has-available-upgrade:is(:hover,.hover-bounce,.ui-held,.release-bounce),
#stage #collapse.recommended:is(:hover,.hover-bounce,.ui-held,.release-bounce){background:var(--fg);color:var(--bg);border-color:var(--fg)}
#stage #tools #tree-button.has-available-upgrade:is(:hover,.hover-bounce,.ui-held,.release-bounce)::before,
#stage #collapse.recommended:is(:hover,.hover-bounce,.ui-held,.release-bounce)::before{background:var(--fg)}
#stage #tools #tree-button.has-available-upgrade:is(:hover,.hover-bounce,.ui-held,.release-bounce)>.button-visual,
#stage #collapse.recommended:is(:hover,.hover-bounce,.ui-held,.release-bounce)>.button-visual{color:var(--bg)}
#combo-hud{display:block;color:var(--fg);font-size:.9em;letter-spacing:.3px;opacity:.95}
#tree .demo-locked circle{stroke-dasharray:3 3}
#tree .node-backdrop{stroke:none;pointer-events:none}

/* Keep the top-right tools aligned and the skill-tree status unmistakable. */
#tools button{position:relative;display:flex;align-items:center;justify-content:center}
#tools button>.button-visual{display:inline-flex;flex:0 0 20px;width:20px;height:20px;max-width:none;align-items:center;justify-content:center;font-size:18px;line-height:1;overflow-wrap:normal}
#tools .pixel-trophy{width:20px;height:20px;flex:none}
#tools .pixel-medal{width:17px;height:20px;flex:none}
#tools #tree-button{align-items:center;padding-right:18px}
#tools #tree-button .tree-button-icon{font-size:20px;line-height:1}
#tools #tree-button .tree-button-label{position:relative;z-index:1;align-self:center;line-height:1}
#tools #tree-button.has-available-upgrade,#tools #tree-button.has-available-upgrade:hover:not(:disabled),#tools #tree-button.has-available-upgrade:active:not(:disabled){background:var(--fg);color:var(--bg)}
#tools #tree-button.has-available-upgrade>.button-visual::after{position:absolute;top:50%;right:-10px;width:6px;height:6px;z-index:2;transform:translateY(-50%);background:#f00;content:'';pointer-events:none}
@media(max-width:600px){#tools #tree-button{padding:0}#tools #tree-button.has-available-upgrade>.button-visual::after{right:-4px;width:4px;height:4px}}
#tools #tree-tool-group{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;gap:4px}
#tools #sp{display:block;margin:0;font-size:11px;line-height:1.2;text-align:center;white-space:nowrap}
@media(max-width:600px){#tools #tree-tool-group{gap:3px}#tools #sp{font-size:10px}}
#stage{-webkit-touch-callout:none}
#money{font-size:1.35em;line-height:1.1;opacity:1}
#goal{top:auto;bottom:max(18px,env(safe-area-inset-bottom))}
.typewriter-text{white-space:pre-wrap}
.typewriter-text.typewriter-text--active::after{content:'▌';display:inline-block;margin-left:2px;animation:typewriter-caret-blink .65s steps(1,end) infinite}
@keyframes typewriter-caret-blink{50%{opacity:0}}
#goal-hint{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
@media(max-width:800px){#goal{left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:min(320px,calc(50vw - 20px));max-height:56vh;overflow:auto}#collapse-wrap{left:auto;right:max(18px,env(safe-area-inset-right));translate:0 0}#collapse{padding:9px 14px;font-size:11px}}
@media(max-height:450px){#goal{pointer-events:auto;max-height:48vh;overflow:auto}#goal-hint{display:block}}
#overlay.collapse-results-overlay{display:flex;align-items:center;justify-content:center;background:transparent;pointer-events:none;padding:18px}
.collapse-results-card{position:relative;width:min(420px,calc(100vw - 36px));max-height:min(78dvh,440px);overflow:auto;padding:28px 24px 22px;background:var(--bg);border:1px solid var(--fg);box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 25%,transparent);text-align:center;pointer-events:auto;animation:panel-scale-enter 520ms cubic-bezier(.22,1.25,.36,1) both}
.collapse-results-card h2{margin:0 32px 18px;font-size:clamp(15px,2.4vw,20px);font-weight:normal;letter-spacing:1px}
.collapse-results-summary{margin:0 auto;max-width:340px;font-size:12px;line-height:1.8;white-space:normal;opacity:.88}
.collapse-results-reward{display:flex;justify-content:center;align-items:center;gap:10px;margin:20px auto 18px;font-size:20px}
.collapse-results-close{position:absolute;top:8px;right:8px;width:32px;height:32px;padding:0;border:1px solid var(--fg);font-size:23px;line-height:1}
.collapse-results-tree{width:100%;min-height:42px;letter-spacing:1px}
@media(max-width:420px){.collapse-results-card{padding:24px 17px 17px}.collapse-results-summary{font-size:10px}.collapse-results-close{width:29px;height:29px}}
@media(prefers-reduced-motion:reduce){.collapse-results-card{animation:none;transform:none;opacity:1}}

/* The Collapse button has stronger reduced-motion selectors than other controls. */
#stage #collapse.ui-feedback.ui-held>.button-visual{}
#stage #collapse.ui-feedback.release-bounce>.button-visual{}

/* Keep feedback fully opaque; animate a visible slot face, never its hitbox. */
#stage button.ui-feedback:is(:hover,.hover-bounce,.ui-held,.release-bounce):not(:disabled):not(.unavailable):not([aria-disabled=true]),
#stage button.ui-feedback:is(:hover,.hover-bounce,.ui-held,.release-bounce):not(:disabled):not(.unavailable):not([aria-disabled=true])>.button-visual,
#stage button.ui-feedback:is(:hover,.hover-bounce,.ui-held,.release-bounce):not(:disabled):not(.unavailable):not([aria-disabled=true])::before{opacity:1!important}
#stage #slots .slot-button>.button-visual{border:1px solid transparent;opacity:1!important}
#stage #slots .slot-button.ui-feedback:is(:hover,.hover-bounce,.ui-held,.release-bounce)>.button-visual{border-color:var(--fg);opacity:1!important}
#stage #slots .slot-button.ui-feedback:is(:hover,.hover-bounce,.ui-held,.release-bounce)>.button-visual::before,
#stage #slots .slot-button.ui-feedback:is(:hover,.hover-bounce,.ui-held,.release-bounce)>.button-visual::after{opacity:1!important}
#stage #tree .skill-node:is(:hover,.hover-bounce,.ui-held,.release-bounce),
#stage #tree .skill-node:is(:hover,.hover-bounce,.ui-held,.release-bounce)>.node-visual,
#stage #tree .skill-node:is(:hover,.hover-bounce,.ui-held,.release-bounce)>.node-backdrop,
#stage #tree .skill-node:is(:hover,.hover-bounce,.ui-held,.release-bounce) .node-visual circle,
#stage #tree .skill-node:is(:hover,.hover-bounce,.ui-held,.release-bounce) .node-visual .symbol{opacity:1!important}

/* Unified palette-aware control states: quiet at rest, filled on hover, framed while held/selected. */
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true]):not(:hover):not(.hover-bounce):not(.ui-held):not(.release-bounce):not([aria-pressed=true]):not([aria-selected=true]):not(#collapse.recommended):not(#tree-button.has-available-upgrade){
  border:1px solid transparent!important;
  background:transparent!important;
  color:var(--fg)!important;
  box-shadow:none!important;
}
#stage button.ui-feedback:not(:disabled):not(.unavailable):not([aria-disabled=true])::before{content:none!important;display:none!important}
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true]):not(#collapse.recommended):not(#tree-button.has-available-upgrade):is(:hover,.hover-bounce,.release-bounce){
  border-color:transparent!important;
  background:transparent!important;
  color:var(--bg)!important;
  box-shadow:none!important;
}
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true]):not(#collapse.recommended):not(#tree-button.has-available-upgrade):is(:hover,.hover-bounce,.release-bounce):not(.ui-held)::before{
  content:""!important;display:block!important;position:absolute!important;inset:-1px!important;z-index:0!important;pointer-events:none!important;
  background:var(--fg)!important;border:1px solid var(--fg)!important;box-shadow:none!important;
  
}
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true]):not(#collapse.recommended):not(#tree-button.has-available-upgrade):is(:hover,.hover-bounce,.release-bounce)>.button-visual{color:var(--bg)!important}
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true]):not(#collapse.recommended):not(#tree-button.has-available-upgrade).release-bounce:not(.ui-held)::before{}
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true]):not(#collapse.recommended):not(#tree-button.has-available-upgrade):is(:active,.ui-held),
#stage button.ui-feedback:not(:disabled):not(.unavailable):not([aria-disabled=true]):is([aria-pressed=true],[aria-selected=true]):not(:hover):not(.hover-bounce):not(.release-bounce){
  border-color:var(--fg)!important;
  background:transparent!important;
  color:var(--bg)!important;
  box-shadow:none!important;
}
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true]):not(#collapse.recommended):not(#tree-button.has-available-upgrade):is(:active,.ui-held),
#stage button.ui-feedback:not(:disabled):not(.unavailable):not([aria-disabled=true]):is([aria-pressed=true],[aria-selected=true]):not(:hover):not(.hover-bounce):not(.release-bounce){
  border-color:transparent!important;
}
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true]):not(#collapse.recommended):not(#tree-button.has-available-upgrade):is(:active,.ui-held)::before,
#stage button.ui-feedback:not(:disabled):not(.unavailable):not([aria-disabled=true]):is([aria-pressed=true],[aria-selected=true]):not(:hover):not(.hover-bounce):not(.release-bounce)::before{
  content:""!important;display:block!important;position:absolute!important;inset:-1px!important;z-index:0!important;pointer-events:none!important;
  background:var(--fg)!important;border:1px solid var(--fg)!important;box-shadow:inset 0 0 0 2px var(--bg)!important;
}
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true]):not(#collapse.recommended):not(#tree-button.has-available-upgrade):is(:active,.ui-held)::before{}
#stage button.ui-feedback:not(:disabled):not(.unavailable):not([aria-disabled=true]):is([aria-pressed=true],[aria-selected=true]):not(:hover):not(.hover-bounce):not(.release-bounce)::before{}
#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true]):is(:active,.ui-held)>.button-visual,
#stage button.ui-feedback:not(:disabled):not(.unavailable):not([aria-disabled=true]):is([aria-pressed=true],[aria-selected=true]):not(:hover):not(.hover-bounce):not(.release-bounce)>.button-visual{color:var(--bg)!important}

/* Slots keep their hit areas fixed; only their small visible marks change state. */
#stage #slots .slot-button.ui-feedback:is(:hover,.hover-bounce,.release-bounce)>.button-visual{background:var(--fg)!important;border-color:var(--fg)!important;box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--fg)!important}
#stage #slots .slot-button.ui-feedback:is(:hover,.hover-bounce,.release-bounce)>.button-visual::before{background:var(--bg)!important}
#stage #slots .slot-button.ui-feedback:is(:hover,.hover-bounce,.release-bounce)>.button-visual::after{background:linear-gradient(var(--bg),var(--bg)) center/2px 20px no-repeat,linear-gradient(var(--bg),var(--bg)) center/20px 2px no-repeat!important}
#stage #slots .slot-button.ui-feedback:is(:active,.ui-held)>.button-visual{background:var(--fg)!important;border-color:var(--fg)!important;box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--fg)!important}

/* Skill nodes use the same palette inversion on hover/press without moving the SVG hit target. */
#stage #tree .skill-node:is(:hover,.hover-bounce,.release-bounce) .node-visual circle:not(.node-press-ring):not(.node-press-gap){fill:var(--fg)!important}
#stage #tree .skill-node:is(:hover,.hover-bounce,.release-bounce) .node-visual .symbol{fill:var(--bg)!important}
#stage #tree .skill-node:is(:active,.ui-held) .node-visual circle:not(.node-press-ring):not(.node-press-gap){fill:var(--fg)!important;stroke:var(--fg)!important}
#stage #tree .skill-node:is(:active,.ui-held) .node-visual .symbol{fill:var(--bg)!important}
#stage #tree .node-visual .node-press-ring{fill:var(--fg);stroke:none;opacity:0}
#stage #tree .node-visual .node-press-gap{fill:var(--bg);stroke:none;opacity:0}
#stage #tree .skill-node:is(:active,.ui-held,.selected) .node-visual .node-press-ring,
#stage #tree .skill-node:is(:active,.ui-held,.selected) .node-visual .node-press-gap{opacity:1}
#stage #tree .skill-node:is(:active,.ui-held,.selected) .node-visual circle:not(.node-press-ring):not(.node-press-gap){fill:var(--fg)!important;stroke:var(--fg)!important}
#stage #tree .skill-node:is(:active,.ui-held,.selected) .node-visual .symbol{fill:var(--bg)!important}
#stage #tools #tree-button.has-available-upgrade:is(:active,.ui-held),
#stage #collapse.recommended:is(:active,.ui-held){background:transparent!important;border-color:transparent!important}
#stage #tools #tree-button.has-available-upgrade:is(:active,.ui-held)::before,
#stage #collapse.recommended:is(:active,.ui-held)::before{content:""!important;display:block!important;position:absolute!important;inset:-1px!important;z-index:0!important;pointer-events:none!important;background:var(--fg)!important;border:1px solid var(--fg)!important;box-shadow:inset 0 0 0 2px var(--bg)!important;}
#stage #tools #tree-button.has-available-upgrade:is(:active,.ui-held),
#stage #collapse.recommended:is(:active,.ui-held){color:var(--bg)!important;border-color:transparent!important;box-shadow:none!important}

/* Never animate/transform the hitbox itself; animate only its visual child. */
#stage button.ui-feedback:is(:hover,:active,.hover-bounce,.ui-held,.release-bounce){}
#stage #tree .skill-node.ui-feedback:is(:hover,:active,.hover-bounce,.ui-held,.release-bounce){}
#stage button.ui-feedback.release-bounce>.button-visual{}
#stage button.ui-feedback.ui-held>.button-visual{}
#stage #tree .skill-node.ui-feedback.hover-bounce>.node-visual{}
#stage #tree .skill-node.ui-feedback.release-bounce>.node-visual{}
#stage #tree .skill-node.ui-feedback.ui-held>.node-visual{}

/* Hover feedback is a small vertical bounce only; press/release may still scale. */
@keyframes button-hover-bounce{0%,100%{transform:translateY(0)}28%{transform:translateY(-2px)}56%{transform:translateY(.75px)}78%{transform:translateY(-.4px)}}
@keyframes button-bounce{0%,100%{transform:translateY(0)}28%{transform:translateY(-2px)}56%{transform:translateY(.75px)}78%{transform:translateY(-.4px)}}

/* Hover is color-only. Press feedback remains separate; no hover/release motion. */
/* Override legacy motion rules without touching the SVG group's translate(). */
#stage#stage button:is(:hover,.hover-bounce):not(.ui-held),
#stage#stage button:is(:hover,.hover-bounce):not(.ui-held)::before,
#stage#stage button:is(:hover,.hover-bounce):not(.ui-held)::after,
#stage#stage button:is(:hover,.hover-bounce):not(.ui-held)>.button-visual,
#stage#stage button:is(:hover,.hover-bounce):not(.ui-held)>.button-visual::before,
#stage#stage button:is(:hover,.hover-bounce):not(.ui-held)>.button-visual::after{}
#stage #tree .skill-node.ui-feedback:is(:hover,.hover-bounce):not(.ui-held){}
#stage #tree .skill-node.ui-feedback:is(:hover,.hover-bounce):not(.ui-held)>.node-visual,
#stage #tree .skill-node.ui-feedback:is(:hover,.hover-bounce):not(.ui-held)>.node-visual circle,
#stage #tree .skill-node.ui-feedback:is(:hover,.hover-bounce):not(.ui-held)>.node-visual .symbol{}
#stage #tools #tree-button>.tree-button-visual{position:relative;display:flex;flex:0 0 auto;width:100%;height:100%;align-items:center;justify-content:center;gap:5px;}
#stage #tools #tree-button.ui-held>.tree-button-visual,
#stage #collapse.ui-held>.button-visual{}
#stage #collapse:is(:hover,.hover-bounce):not(.ui-held)>.button-visual{}
#stage #tools #tree-button:is(:hover,.hover-bounce):not(.ui-held)>.tree-button-visual{}
#stage #tools #tree-button.has-available-upgrade:is(:hover,.hover-bounce):not(.ui-held),
#stage #collapse.recommended:is(:hover,.hover-bounce):not(.ui-held){background:var(--fg)!important;color:var(--bg)!important;border-color:var(--fg)!important}
#stage #tools #tree-button.has-available-upgrade:is(:hover,.hover-bounce):not(.ui-held)::before,
#stage #collapse.recommended:is(:hover,.hover-bounce):not(.ui-held)::before,
#stage #collapse.recommended:is(:hover,.hover-bounce):not(.ui-held)>.button-visual{}

/* Match the 1px resting border during hover/press so panels never reflow. */
#stage#stage button.ui-feedback:not(.slot-button):not(:disabled):not(.unavailable):not([aria-disabled=true]):not([aria-pressed=true]):not([aria-selected=true]):not(#collapse.recommended):not(#tree-button.has-available-upgrade):is(:hover,:active,.hover-bounce,.ui-held,.release-bounce){border-width:1px!important}

/* Shared, safe-area-aware spacing for UI anchored to the viewport edges. */
:root{--screen-gutter:max(16px,env(safe-area-inset-top),env(safe-area-inset-right),env(safe-area-inset-bottom),env(safe-area-inset-left))}
#hud,#hole-name,#tools{top:var(--screen-gutter)}
#hud{left:var(--screen-gutter)}
#tools{right:var(--screen-gutter)}
#goal{left:var(--screen-gutter);bottom:var(--screen-gutter)}
#collapse-wrap{bottom:var(--screen-gutter)}
#modal{padding:var(--screen-gutter)}
#palette-unlock-notice{right:var(--screen-gutter)}
#stage #palette-unlock-notice{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px 12px}
#stage #palette-unlock-title{min-width:0;line-height:1.35}
#stage #palette-unlock-timer{display:block;min-width:2ch;padding-top:1px;color:var(--fg);font-size:12px;line-height:1.35;text-align:right;opacity:1}
#stage #palette-unlock-notice #palette-install{grid-column:1/-1;justify-self:stretch;width:100%;min-width:0;height:36px;margin-top:2px;padding:0 12px;font-size:12px;line-height:1.2;letter-spacing:.3px;color:var(--fg)}
#stage #palette-unlock-notice #palette-install>.button-visual{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:inherit;line-height:1.2}
@media(max-width:800px){#collapse-wrap{right:var(--screen-gutter)}}
@media(max-width:600px){#local:not(.radial){left:var(--screen-gutter)!important;width:calc(100% - var(--screen-gutter) - var(--screen-gutter))}}

/* The skill tree uses the same inset on every side and anchors its tools to its own frame. */
#overlay.tree-overlay{align-items:stretch;justify-content:flex-start;padding:var(--screen-gutter)}
#overlay.tree-overlay .tree-window{width:auto;height:auto;max-width:none;min-width:0;min-height:0;flex:1 1 auto}
#overlay.tree-overlay .tree-close{top:var(--screen-gutter);right:var(--screen-gutter)}
#overlay.tree-overlay .tree-top{inset:0;height:auto;padding:0;border:0;background:transparent;pointer-events:none}
#overlay.tree-overlay .tree-title-panel{top:var(--screen-gutter);left:var(--screen-gutter)}
#overlay.tree-overlay .tree-sp-panel{position:absolute;top:var(--screen-gutter);left:50%;transform:translateX(-50%)}
#overlay.tree-overlay .tree-controls{top:auto;right:var(--screen-gutter);bottom:var(--screen-gutter);left:auto}
#overlay.tree-overlay .tree-bottom-tools{position:absolute;right:var(--screen-gutter);bottom:var(--screen-gutter);z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px;max-width:calc(100% - var(--screen-gutter) - var(--screen-gutter))}
#overlay.tree-overlay .tree-bottom-tools .tree-controls{position:static;top:auto;right:auto;bottom:auto;left:auto}
#overlay.tree-overlay #tree-wishlist{flex:0 1 auto;min-width:0;max-width:100%;margin:0;white-space:nowrap}
#overlay.tree-overlay .tree-footer:empty{display:none}
#overlay.tree-overlay .tree-footer{right:auto;bottom:var(--screen-gutter);left:var(--screen-gutter);translate:0 0;width:min(240px,calc(50% - var(--screen-gutter)))}
#overlay.tree-overlay .tree-footer #start-run{min-width:0}

/* Keep the tree trigger and its toolbar icons visually balanced.  The
   feedback wrapper is part of every button, so size the wrapper and the
   glyphs together instead of relying on the font's line box. */
#stage #tools button>.button-visual{
  display:flex;
  flex:0 0 20px;
  width:20px;
  height:20px;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  overflow:visible;
}
#stage #tools .pixel-trophy,
#stage #tools .pixel-medal{
  width:18px;
  height:18px;
}
#stage #tools #tree-button{
  padding:0 8px;
  justify-content:center;
}
#stage #tools #tree-button>.tree-button-visual{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:10px;
  line-height:1;
}
#stage #tools #tree-button .tree-button-icon{
  display:flex;
  flex:0 0 20px;
  width:20px;
  height:20px;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
  
  
}
#stage #tools #tree-button .tree-button-label{
  display:block;
  align-self:center;
  font-size:10px;
  line-height:1;
  letter-spacing:.4px;
  white-space:nowrap;
}
#stage #tools #tree-button>.tree-button-visual::after{
  content:"";
  display:block;
  flex:0 0 6px;
  width:6px;
  height:6px;
  margin-left:0;
  align-self:center;
  background:transparent;
}
#stage #tools #tree-button.has-available-upgrade>.button-visual::after{
  position:static;
  display:block;
  flex:0 0 6px;
  width:6px;
  height:6px;
  margin-left:0;
  align-self:center;
  
}

/* The close control is intentionally larger than the toolbar buttons.  A
   flex wrapper centers the cross on both axes regardless of the pixel font's
   baseline metrics. */
#overlay.tree-overlay .tree-close{
  width:44px;
  height:44px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  line-height:1;
}
#overlay.tree-overlay .tree-close>.button-visual{
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  font-size:26px;
  line-height:1;
}
@media(max-width:600px){
  #stage #tools #tree-button{padding:0}
  #stage #tools #tree-button>.tree-button-visual::after{display:none}
  #stage #tools #tree-button.has-available-upgrade>.button-visual::after{
    position:absolute;
    top:50%;
    right:-4px;
    width:4px;
    height:4px;
    display:block;
    flex:0 0 4px;
    margin-left:0;
    transform:translateY(-50%);
  }
  #overlay.tree-overlay .tree-close{width:44px;height:44px}
}

/* An occupied slot remains a transparent hit area for opening its building,
   but it must never paint a second circle over the building sprite. */
#stage #slots .occupied-slot{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
#stage #slots .occupied-slot>.button-visual{display:none!important}
#stage #slots .occupied-slot:is(:hover,:focus-visible,.slot-active,.ui-held){
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

/* Radial building choices keep a visible round frame at rest. The generic
   button feedback layer is allowed to fill the inside on hover/press while
   leaving that frame intact. */
#stage #local.radial button.ui-feedback:not(#collapse.recommended):not(#tree-button.has-available-upgrade){
  clip-path:none!important;
  border:1px solid var(--fg)!important;
  border-radius:50%;
  background:var(--bg)!important;
  color:var(--fg)!important;
}
#stage #local.radial button.ui-feedback:not(#collapse.recommended):not(#tree-button.has-available-upgrade)>.button-visual{
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
}
#stage #local.radial button.ui-feedback:not(#collapse.recommended):not(#tree-button.has-available-upgrade)::before{content:none!important;display:none!important}
#stage #local.radial button.ui-feedback:not(#collapse.recommended):not(#tree-button.has-available-upgrade):is(:hover,.hover-bounce,.ui-held,.release-bounce):not(.unavailable){
  background:var(--bg)!important;
  color:var(--bg)!important;
}
#stage #local.radial button.ui-feedback:not(#collapse.recommended):not(#tree-button.has-available-upgrade):is(:hover,.hover-bounce,.ui-held,.release-bounce):not(.unavailable)::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:3px!important;
  z-index:0!important;
  border:0!important;
  background:var(--fg)!important;
}
#stage #local.radial button.ui-feedback:not(#collapse.recommended):not(#tree-button.has-available-upgrade):is(:hover,.hover-bounce,.ui-held,.release-bounce):not(.unavailable)>.button-visual{color:var(--bg)!important}
#stage #local.radial button.ui-feedback.unavailable:not(#collapse.recommended):not(#tree-button.has-available-upgrade){border-style:dashed!important;opacity:.55}

/* Free slots show their plus only through the visual child, so the slot
   outline and plus survive the shared feedback rules. */
#stage #slots .build-slot>.button-visual{
  display:block!important;
  inset:17px!important;
  max-width:none!important;
  border-radius:50%;
  background:transparent!important;
}
#stage #slots .build-slot>.button-visual::before,
#stage #slots .build-slot>.button-visual::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:50%;
  pointer-events:none;
}
#stage #slots .build-slot:is(:hover,:focus-visible,.slot-active,.ui-held)>.button-visual::before{
  background:var(--fg)!important;
}
#stage #slots .build-slot:is(:hover,:focus-visible,.slot-active,.ui-held)>.button-visual::after{
  background:linear-gradient(var(--bg),var(--bg)) center/2px 20px no-repeat,linear-gradient(var(--bg),var(--bg)) center/20px 2px no-repeat!important;
}

/* A free slot is a single, ordinary round button. Its visual child owns the
   whole visible face, while the hit area stays larger around it. */
#stage#stage #slots .build-slot>.button-visual{
  position:absolute!important;
  inset:17px!important;
  z-index:1;
  display:flex!important;
  width:auto!important;
  height:auto!important;
  align-items:center;
  justify-content:center;
  border:1px solid var(--fg)!important;
  border-radius:50%;
  background:var(--bg)!important;
  color:var(--fg)!important;
  line-height:1;
}
#stage#stage #slots .build-slot>.button-visual::before,
#stage#stage #slots .build-slot>.button-visual::after{content:none!important;display:none!important}
#stage#stage #slots .build-slot>.button-visual>.slot-plus{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Colony,monospace;
  font-size:22px;
  line-height:1;
  color:var(--fg);
  pointer-events:none;
}
#stage#stage #slots .build-slot:is(:hover,:focus-visible,.slot-active,.ui-held)>.button-visual{
  background:var(--fg)!important;
  border-color:var(--fg)!important;
  color:var(--bg)!important;
}
#stage#stage #slots .build-slot:is(:hover,:focus-visible,.slot-active,.ui-held)>.button-visual>.slot-plus{
  color:var(--bg)!important;
}

/* Slot buttons are interaction hitboxes only. The slot rings and plus marks
   are drawn by Canvas before asteroids, matter and units, so they stay below
   the world entities without losing pointer/keyboard interaction. */
#stage#stage #slots .slot-button>.button-visual{
  visibility:hidden!important;
}

/* Keep the tree icon centered and as legible as the other toolbar icons.
   The upgrade marker is a red status dot, not an empty transparent flex item. */
#stage #tools #tree-button>.tree-button-visual{
  box-sizing:border-box;
  display:flex;
  width:100%;
  min-height:20px;
  height:auto;
  align-items:center;
  justify-content:center;
  gap:5px;
  overflow:visible;
}
#stage #tools #tree-button .tree-button-icon{
  position:relative;
  display:flex;
  flex:0 0 20px;
  width:20px;
  height:20px;
  align-items:center;
  justify-content:center;
  font-size:0;
  line-height:0;
  
}
#stage #tools #tree-button .tree-button-icon::before{
  content:"";
  display:block;
  width:18px;
  height:18px;
  background:currentColor;
  clip-path:polygon(50% 0,100% 42%,89% 42%,89% 100%,61% 100%,61% 66%,39% 66%,39% 100%,11% 100%,11% 42%,0 42%);
}
#stage #tools #tree-button .tree-button-icon::after{
  content:"";
  position:absolute;
  bottom:1px;
  left:8px;
  width:4px;
  height:6px;
  background:var(--bg);
  pointer-events:none;
}
#stage #tools #tree-button>.tree-button-visual::after{
  content:"";
  display:none!important;
  flex:0 0 6px;
  width:6px;
  height:6px;
  margin-left:2px;
  align-self:center;
  position:static!important;
  
  background:#ff304f!important;
}
#stage #tools #tree-button.has-available-upgrade>.tree-button-visual::after{
  display:block!important;
  background:#ff304f!important;
}

/* Building panels share one spacing rhythm and one worker control row. */
#stage #local:not(.radial){
  box-sizing:border-box;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
#stage #local:not(.radial)>h2,
#stage #local:not(.radial)>#building-live,
#stage #local:not(.radial)>#building-stats,
#stage #local:not(.radial)>#building-aura,
#stage #local:not(.radial)>#building-actions{margin:0}
#stage #local:not(.radial)>h2{padding-right:30px;line-height:1.25}
#stage #local:not(.radial)>.close{top:12px;right:12px}
#stage #local:not(.radial)>#building-live,
#stage #local:not(.radial)>#building-actions{display:flex;flex-direction:column;gap:12px}
#stage #local:not(.radial) .divider{margin:0;padding-top:12px}
#stage #local:not(.radial) #building-actions .wide{margin-top:0}
#stage #local:not(.radial) #staff-controls{margin:0}
#stage #local:not(.radial) #staff-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px}
#stage #local:not(.radial) #staff-text{display:flex;align-items:center;gap:7px;margin:0;line-height:1.2;white-space:nowrap}
#stage #local:not(.radial) #staff-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
#stage #local:not(.radial) #building-live>p{margin:0}
#stage #local:not(.radial) #staff-actions .worker-control{box-sizing:border-box;display:flex;flex:0 0 32px;width:32px!important;height:32px!important;min-width:32px;padding:0!important;align-items:center;justify-content:center;border:1px solid var(--fg)!important;background:var(--bg)!important;color:var(--fg)!important;font-size:18px;line-height:1}
#stage #local:not(.radial) #staff-actions .worker-control:disabled{border-style:dashed!important;opacity:.55}
#stage #local:not(.radial) #staff-actions .worker-control>.button-visual{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
#stage #local:not(.radial) #drone-progress{margin:0}
#stage #crew{display:flex;align-items:center;gap:7px;line-height:1.2}
.worker-icon{position:relative;display:inline-block;flex:0 0 16px;width:16px;height:18px;color:currentColor}
.worker-icon::before{content:"";position:absolute;top:0;left:4px;width:8px;height:8px;background:currentColor;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%)}
.worker-icon::after{content:"";position:absolute;top:8px;left:1px;width:14px;height:10px;background:currentColor;clip-path:polygon(28% 0,72% 0,100% 35%,100% 100%,0 100%,0 35%)}

/* Combo status sits under the hole name and uses a bar for its remaining time. */
#stage #combo-hud{position:fixed;top:max(40px,calc(env(safe-area-inset-top) + 38px));left:50%;translate:-50% 0;z-index:6;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--fg);font-size:clamp(14px,1.8vw,21px);line-height:1;letter-spacing:1px;white-space:nowrap;pointer-events:none;text-shadow:1px 0 var(--bg),-1px 0 var(--bg),0 1px var(--bg),0 -1px var(--bg)}
#stage #combo-hud #combo-value{display:block}
#stage #combo-hud #combo-progress{display:block;width:clamp(110px,18vw,180px);height:6px;margin:0}
@keyframes combo-hud-pop{0%{transform:scale(.68) rotate(-9deg)}35%{transform:scale(1.28) rotate(8deg)}58%{transform:scale(.92) rotate(-4deg)}78%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
#stage #combo-hud.combo-new{animation:none}
#stage #combo-hud #combo-value.combo-new{display:block;animation:combo-hud-pop 520ms cubic-bezier(.22,1.35,.36,1) both!important;transform-origin:50% 50%}
@media(max-width:600px){#stage #combo-hud{top:max(36px,calc(env(safe-area-inset-top) + 34px));font-size:16px}#stage #combo-hud #combo-progress{width:120px}}

/* Keep the selected music track label above the shared hover treatment. */
#stage#stage .choice>.choice-trigger{
  border:1px solid var(--fg)!important;
  background:var(--bg)!important;
  color:var(--fg)!important;
  clip-path:none!important;
}
#stage#stage .choice>.choice-trigger::before{content:none!important;display:none!important}
#stage#stage .choice>.choice-trigger>.button-visual{
  position:static!important;
  display:block;
  width:100%;
  color:inherit!important;
}
.skill-point-gain{position:fixed;z-index:13;box-sizing:border-box;pointer-events:none;color:var(--fg);font-size:13px;font-weight:bold;line-height:1.2;letter-spacing:.5px;text-align:center;white-space:nowrap;text-shadow:1px 0 var(--bg),-1px 0 var(--bg),0 1px var(--bg),0 -1px var(--bg);transform-origin:50% 50%;animation:skill-point-drop 1.1s cubic-bezier(.2,.65,.3,1) both}
@keyframes skill-point-drop{0%{opacity:0;transform:translate(-50%,-4px) scale(.8)}12%{opacity:1;transform:translate(-50%,2px) scale(1.15) rotate(var(--tilt,0deg))}100%{opacity:0;transform:translate(calc(-50% + var(--drift-x,0px)),56px) scale(.95) rotate(var(--tilt,0deg))}}
@media(prefers-reduced-motion:reduce){body .skill-point-gain{animation:skill-point-drop .75s cubic-bezier(.2,.65,.3,1) both!important}@keyframes skill-point-drop{0%{opacity:0;transform:translate(-50%,-2px)}18%{opacity:1;transform:translate(-50%,1px)}100%{opacity:0;transform:translate(calc(-50% + var(--drift-x,0px)),32px) rotate(var(--tilt,0deg))}}}
#stage#stage .choice>.choice-trigger:is(:hover,:focus-visible,.hover-bounce,.ui-held,.release-bounce){
  background:var(--fg)!important;
  color:var(--bg)!important;
  border-color:var(--fg)!important;
}

/* Every close control uses a centered cross instead of a translated label. */
#stage button.close-control{
  box-sizing:border-box;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  padding:0!important;
  font-size:0!important;
  line-height:1;
  text-align:center;
}
#stage button.close-control>.button-visual{
  display:flex!important;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  position:relative;
  color:transparent!important;
  font-size:0!important;
  line-height:0;
}
#stage button.close-control>.button-visual::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:2px;
  transform:translate(-50%,-50%) rotate(45deg);
  color:var(--fg);
  background:var(--fg);
}
#stage button.close-control>.button-visual::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:2px;
  transform:translate(-50%,-50%) rotate(-45deg);
  background:var(--fg);
}
#stage button.close-control:is(:hover,.hover-bounce,.ui-held,.release-bounce)>.button-visual::before{
  background:var(--bg);
}
#stage button.close-control:is(:hover,.hover-bounce,.ui-held,.release-bounce)>.button-visual::after{
  background:var(--bg);
}
#stage#stage button.close-control:is(:hover,.hover-bounce,.ui-held,.release-bounce)>.button-visual::before{
  
  transform:translate(-50%,-50%) rotate(45deg)!important;
}
#stage#stage button.close-control:is(:hover,.hover-bounce,.ui-held,.release-bounce)>.button-visual::after{
  
  transform:translate(-50%,-50%) rotate(-45deg)!important;
}
#stage .settings-modal-panel{
  position:relative;
}
#stage .settings-modal-panel>h2{
  padding-right:54px;
}
#stage .settings-modal-panel #settings-close{
  position:absolute!important;
  top:12px;
  right:12px;
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  margin:0!important;
  padding:0!important;
  border:2px solid var(--fg)!important;
  background:var(--bg)!important;
  color:var(--fg)!important;
}
#stage .settings-modal-panel #settings-close:is(:hover,.hover-bounce,.ui-held,.release-bounce){
  border-color:var(--fg)!important;
  background:var(--fg)!important;
  color:var(--bg)!important;
}
#stage .leaderboard-panel{
  position:relative;
}
#stage .leaderboard-panel>h2{
  padding-right:54px;
}
#stage#stage#stage .leaderboard-panel>#leaderboard-close{
  position:absolute!important;
  top:12px;
  right:12px;
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  margin:0!important;
  padding:0!important;
  border:2px solid var(--fg)!important;
  background:var(--bg)!important;
  color:var(--fg)!important;
}
#stage#stage#stage .leaderboard-panel>#leaderboard-close:is(:hover,.hover-bounce,.ui-held,.release-bounce){
  border-color:var(--fg)!important;
  background:var(--fg)!important;
  color:var(--bg)!important;
}
#stage .achievements-panel{
  position:relative;
}
#stage .achievements-panel>h2{
  padding-right:54px;
}
#stage#stage#stage .achievements-panel>#achievements-close{
  position:absolute!important;
  top:12px;
  right:12px;
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  margin:0!important;
  padding:0!important;
  border:2px solid var(--fg)!important;
  background:var(--bg)!important;
  color:var(--fg)!important;
}
#stage#stage#stage .achievements-panel>#achievements-close:is(:hover,.hover-bounce,.ui-held,.release-bounce){
  border-color:var(--fg)!important;
  background:var(--fg)!important;
  color:var(--bg)!important;
}

/* Universal press feedback: the hitbox stays fixed while its visible face
   scales down and returns smoothly after release. Skill nodes use their SVG
   visual, while occupied slots animate their Canvas building sprite in JS. */
#stage button:not(:disabled):not(.unavailable):is(:active,.ui-held)>.button-visual,
#stage .skill-node:is(:active,.ui-held)>.node-visual{
  
  
  
}
#stage button>.button-visual,
#stage .skill-node>.node-visual{
  
}
#stage button.release-bounce>.button-visual,
#stage .skill-node>.node-visual.release-bounce{
  
  
}
#stage button.close-control:not(.tree-close):not(.collapse-results-close){
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
}
#stage button.close-control.wide{
  display:flex!important;
  width:36px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Protocol boot screen. The central aperture becomes the camera transition. */
#loading-screen{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;overflow:hidden;background:var(--bg);color:var(--fg);font-family:Colony,monospace;isolation:isolate}
.loading-scene{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;transform-origin:50% 50%}
.loading-crt{position:absolute;inset:0;z-index:3;pointer-events:none}
.loading-card{position:absolute;z-index:2;top:var(--loading-card-top,62vh);left:50%;translate:-50% 0;width:min(360px,calc(100vw - 36px));padding:12px 14px 14px;background:var(--bg);border:2px solid var(--fg);font-size:10px;line-height:1.45;text-align:left;transition:opacity .4s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.loading-kicker{margin-bottom:8px;padding-bottom:7px;border-bottom:1px dashed var(--fg);font-size:9px;letter-spacing:1.5px;opacity:.78}.loading-title{margin:0 0 6px;font-size:14px;line-height:1.35;font-weight:var(--ui-text-weight,400);letter-spacing:1px}.loading-status{min-height:15px;opacity:.9}
.loading-track{height:6px;margin-top:8px;border:1px solid var(--fg)}.loading-track span{display:block;width:0;height:100%;background:var(--fg);transition:width .18s ease-out}
#loading-percent{margin-top:5px;padding-bottom:2px;text-align:right;opacity:.9}#loading-start[hidden]{display:none!important}#loading-start{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:44px;margin-top:10px;padding:10px 14px;border:2px solid var(--fg);background:var(--bg);color:var(--fg);font:inherit;font-size:13px;letter-spacing:1px;cursor:pointer;animation:loading-button-appear .3s steps(4,end) both}#loading-start span{font-size:16px;line-height:1}#loading-start:hover,#loading-start:focus-visible{background:var(--fg);color:var(--bg);outline:none}#loading-start:active{}#loading-start:disabled{cursor:default}
#loading-screen.loading-entering{pointer-events:auto}#loading-screen.loading-entering .loading-card{animation:loading-card-suck .9s cubic-bezier(.6,0,.9,.45) forwards}
@keyframes loading-button-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes loading-card-suck{0%{transform:none;opacity:1}70%{opacity:1}100%{transform:translateY(var(--loading-hole-dy,-200px)) rotate(-160deg) scale(0);opacity:0}}
/* First-launch language choice replaces the progress block until picked. */
#loading-screen.loading-pick-language :is(#loading-title,#loading-status,.loading-track,#loading-percent,#loading-start){display:none!important}
.loading-language-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:10px}
.loading-language-options button{min-height:44px;padding:10px 14px;border:2px solid var(--fg);background:var(--bg);color:var(--fg);font:inherit;font-size:13px;letter-spacing:1px;cursor:pointer;animation:loading-button-appear .3s steps(4,end) both}
.loading-language-options button:hover,.loading-language-options button:focus-visible{background:var(--fg);color:var(--bg);outline:none}
@media(max-width:600px){.loading-kicker{font-size:8px;letter-spacing:1px}#loading-start{font-size:12px}}
@media(prefers-reduced-motion:reduce){#loading-screen.loading-entering .loading-card{animation:none!important;opacity:0;transition:opacity .2s ease!important}}

/* ===== Claude port: CRT overlay (scanlines multiply + vignette) ===== */
#crt,.loading-crt{background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.55) 2px 4px),radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.75) 100%)!important;box-shadow:none!important;mix-blend-mode:normal;opacity:var(--crt-strength,.45)!important}

/* ===== Claude port: colour accents ===== */
:root{--t2:#B8FFC8;--t3:#A8D8FF;--t4:#D2B2FF;--gold:#FFE59A;--warn:#FF8F9B;--orange:#FFB36B}
#sp,.node-cost,#goal-count,.research-cost,.buyout-cost{color:var(--gold)}
#tree .node-cost{fill:var(--gold)}
#tree .locked .node-cost{fill:var(--warn)}
#combo-value{color:var(--gold)}
#combo-progress::-webkit-progress-value{background:var(--gold)}
#combo-progress::-moz-progress-bar{background:var(--gold)}

/* ===== Claude port: pixel icons ===== */
.pixel-icon,.ui-icon{display:inline-block;width:1.4em;height:1.4em;vertical-align:middle;fill:currentColor;image-rendering:pixelated}
.pixel-icon .icon-accent{fill:var(--icon-accent,currentColor)}
.pixel-icon .icon-badge-bg{fill:var(--bg)}
#local h2 .pixel-icon{width:22px;height:22px;margin:-4px 8px 0 0}
#local.radial .radial-choice .button-visual{display:flex;align-items:center;justify-content:center}
#local.radial .radial-choice .pixel-icon{width:30px;height:30px}
#local.radial .radial-choice:is(:hover,.hover-bounce,.ui-held,.release-bounce) .pixel-icon .icon-accent{fill:var(--bg)}
#local.radial .radial-choice{animation:panel-scale-enter .46s cubic-bezier(.2,.8,.2,1) both}
#tools .ui-icon,#tree-button .ui-icon{width:18px;height:18px}
#tree-button .tree-button-icon{display:inline-flex}
#tree .node-icon{fill:var(--fg)}
#tree .node-icon .icon-accent{fill:var(--icon-accent)}
#tree .node-icon .icon-badge-bg{fill:var(--bg)}
#tree .locked .node-icon{opacity:.45}
#tree .available .node-visual>circle:not(.node-press-ring):not(.node-press-gap){stroke:var(--node-accent)}
#stage #tree .skill-node.bought .node-visual>circle:not(.node-press-ring):not(.node-press-gap){fill:var(--node-accent)!important;stroke:var(--node-accent)}
#stage #tree .skill-node.bought .node-icon,#stage #tree .skill-node.bought .node-icon .icon-accent{fill:var(--bg)!important}
#stage #tree .skill-node.bought .node-icon .icon-badge-bg{fill:var(--node-accent)}
#stage #tree .skill-node:is(:hover,.hover-bounce,.ui-held,.release-bounce,.selected) .node-icon .icon-accent{fill:var(--bg)!important}

/* Steam wishlist call to action (demo ending and skill tree): a gold,
   double-framed button with a soft pulse so it stands out from every other
   control. The pulse lives on ::after and uses opacity/scale only, so it
   never fights the shared hover/press rules above. */
.demo-ending>button.wishlist{width:min(420px,calc(100vw - 50px));height:58px!important;font-size:clamp(13px,1.6vw,16px);letter-spacing:1px}
@keyframes wishlist-pulse{0%,100%{opacity:0;scale:.97}50%{opacity:.85;scale:1.03}}
#stage#stage#stage#stage#stage button.wishlist-cta{border:2px solid var(--gold)!important;background:var(--gold)!important;color:var(--bg)!important;box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--gold)!important;clip-path:none!important;overflow:visible}
#stage#stage#stage#stage#stage button.wishlist-cta>.button-visual{color:var(--bg)!important}
#stage#stage#stage#stage#stage button.wishlist-cta::after{content:"";position:absolute;inset:-10px;border:2px solid var(--gold);pointer-events:none;opacity:0;animation:wishlist-pulse 2.4s ease-in-out infinite!important;}
#stage#stage#stage#stage#stage button.wishlist-cta:is(:hover,.hover-bounce,.ui-held,.release-bounce)::after{opacity:0}
#stage#stage#stage#stage#stage button.wishlist-cta:is(:hover,.hover-bounce,.ui-held,.release-bounce)::before{background:var(--fg)!important;border-color:var(--fg)!important}
#ending-wishlist{margin-bottom:8px}
.tree-bottom-tools #tree-wishlist{padding:9px 16px;font-size:13px;letter-spacing:1px;margin:0}
@media(prefers-reduced-motion:reduce){#stage#stage#stage#stage#stage button.wishlist-cta::after{animation:none!important}}

/* Purchasable skills get a dashed, slowly marching accent ring, so a coloured
   node that can be bought never reads as one that is already bought. */
@keyframes skill-available-dash{to{stroke-dashoffset:-20}}
#stage #tree .skill-node.available .node-visual>circle:not(.node-press-ring):not(.node-press-gap){stroke-dasharray:6 4!important;stroke-width:3;}
@media(prefers-reduced-motion:reduce){#stage #tree .skill-node.available .node-visual>circle{animation:none!important}}

/* Pixel glyphs: currency icons replace unit text (SP / credits / Matter). */
.pixel-glyph{display:inline-block;flex:none;height:1em;width:auto;vertical-align:-.12em;fill:currentColor;image-rendering:pixelated;overflow:visible}
.pixel-glyph .glyph-accent{fill:var(--gold)}
.cur-icon{margin-left:.28em}
.cur-sp{color:var(--gold)}
.cur-credit{color:var(--gold)}
.cur-matter{color:var(--fg)}
#stage button :is(.cur-sp,.cur-credit){color:inherit}
.skill-point-gain{display:inline-flex;align-items:center;transform:translateX(-50%);color:var(--gold);font-size:15px}
.skill-point-gain .cur-icon{height:.95em;filter:drop-shadow(1px 0 var(--bg)) drop-shadow(-1px 0 var(--bg)) drop-shadow(0 1px var(--bg)) drop-shadow(0 -1px var(--bg))}
.tree-sp-panel .sp-label{height:18px;margin:0 2px 0 0}

/* Skill tree control legend (bottom-left). */
.tree-hints{position:absolute;left:var(--screen-gutter,24px);bottom:var(--screen-gutter,20px);z-index:3;display:flex;align-items:flex-end;gap:22px;padding:0;background:transparent;border:0;pointer-events:none;font-size:11px;letter-spacing:.5px}
.tree-hint{display:flex;flex-direction:column;align-items:center;gap:6px;white-space:nowrap}
.tree-hint-icons{display:flex;align-items:center;gap:8px;height:34px}
.tree-hint .hint-glyph{height:30px}
.tree-hint .glyph-drag{height:34px}
.hint-x2{font-size:12px;color:var(--gold);margin-left:-3px}
.kbd-cluster{display:grid;grid-template-columns:repeat(3,15px);grid-template-rows:15px 15px;gap:2px}
.kbd-cluster kbd{display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--fg);font:inherit;font-size:9px;line-height:1;color:var(--fg)}
.kbd-cluster .kbd-w{grid-row:1;grid-column:2}.kbd-cluster kbd:nth-child(2){grid-row:2;grid-column:1}.kbd-cluster kbd:nth-child(3){grid-row:2;grid-column:2}.kbd-cluster kbd:nth-child(4){grid-row:2;grid-column:3}
#overlay.tree-overlay .tree-footer{bottom:calc(var(--screen-gutter,20px) + 84px)}
@media(max-width:700px){.tree-hints{gap:12px;padding:0;font-size:9px}.tree-hint .hint-glyph{height:20px}.tree-hint .glyph-drag{height:24px}#overlay.tree-overlay .tree-bottom-tools{gap:8px}#overlay.tree-overlay #tree-wishlist{padding:11px 10px;font-size:10px;letter-spacing:0}}

/* Final level in the demo: the Collapse button blinks gold so the player
   knows the finale starts from here. The id chain outranks the shared button
   states, whose :not(#collapse.recommended) chains carry id specificity. */
#stage#stage#stage#stage #collapse#collapse.final-ready,#stage#stage#stage#stage #collapse#collapse.final-ready:is(:hover,:active,.hover-bounce,.ui-held,.release-bounce){--final-bg:#FFE59A;--final-fg:#000;--final-glow:0 0 0 3px #FFE59A,0 0 26px 6px rgba(255,229,154,.8);background:var(--final-bg)!important;color:var(--final-fg)!important;border-color:#FFE59A!important;box-shadow:var(--final-glow)!important;clip-path:none!important;animation:final-blink .9s infinite!important}
#stage#stage#stage#stage #collapse#collapse.final-ready::before{display:none!important}
#stage#stage#stage#stage #collapse#collapse.final-ready>.button-visual{color:inherit!important;animation:none!important}
/* Custom properties flip discretely, so the blink survives the !important state rules. */
@keyframes final-blink{0%,49%{--final-bg:#FFE59A;--final-fg:#000;--final-glow:0 0 0 3px #FFE59A,0 0 26px 6px rgba(255,229,154,.8)}50%,100%{--final-bg:#000;--final-fg:#FFE59A;--final-glow:0 0 0 3px #FFE59A,0 0 8px rgba(255,229,154,.35)}}
@media(prefers-reduced-motion:reduce){#stage#stage#stage#stage #collapse#collapse.final-ready{animation:none!important}}