:root {--ui-scale: 1; --text-scale: 1; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; font-family: "Courier New", monospace; font-size: calc(16px * var(--ui-scale, 1) * var(--text-scale, 1)); color: #9affac; background: #020a05;}
/* Scrollbars are hidden everywhere; menus still scroll by wheel, touch, keyboard and controller focus. */
* {scrollbar-width: none;}
/* No text selection or iOS copy callout anywhere; editable fields stay selectable so typing works in Safari. */
* {-webkit-user-select: none; user-select: none; -webkit-touch-callout: none;}
input, textarea, [contenteditable]:not([contenteditable="false"]) {-webkit-user-select: text; user-select: text; -webkit-touch-callout: default;}
*::-webkit-scrollbar {display: none; width: 0; height: 0;}
.ghost-desktop-captured, .ghost-desktop-captured *, .ghost-menu-nav, .ghost-menu-nav * {cursor: none !important;}
#ghost-menu-cursor {position: fixed; z-index: 2147483647; pointer-events: none; width: calc(14px * var(--ui-scale, 1)); height: calc(20px * var(--ui-scale, 1)); background: #9affac; clip-path: polygon(0 0, 0 85%, 30% 65%, 55% 100%, 75% 90%, 50% 55%, 100% 55%); filter: drop-shadow(1px 1px calc(2px * var(--ui-scale, 1)) #000);}
.ghost-cursor-hover {outline: calc(2px * var(--ui-scale, 1)) solid #9affac; background: #163722;}
* {box-sizing: border-box;}
html, body {width: 100%; height: 100%; margin: 0; overflow: hidden; touch-action: pan-x pan-y;}
.ghost-map-screen {position: absolute; inset: 0; overflow: hidden; background: #000805;}
.ghost-full-map {position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab;}
.ghost-full-map svg {position: absolute; left: 50%; top: 50%; display: block; max-width: none;}
.ghost-map-heading, .ghost-map-hint, .ghost-map-details {position: absolute; z-index: 1; margin: 0; padding: 12px; background: #000805dd; pointer-events: none;}
.ghost-map-heading {top: 0; left: 0; font-size: 1em;}
.ghost-map-hint {bottom: 0; left: 0; right: 0; font-size: .8em;}
.ghost-map-details {top: 48px; right: 12px; white-space: pre-line; max-width: min(80%, 400px);}
.ghost-map-crosshair {position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); border: 2px solid #ffffff; box-shadow: 0 0 3px #000000; pointer-events: none;}
.ghost-map-legend {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);}
#ghost-terminal.ghost-full-map-active {padding: 0;}
#ghost-terminal.ghost-full-map-active #ghost-menu-header, #ghost-terminal.ghost-full-map-active #ghost-status {display: none;}
#ghost-terminal.ghost-full-map-active #ghost-commands {position: absolute; inset: 0; padding: 0; margin: 0; overflow: hidden;}
.ghost-player-pause.ghost-map-player {padding: 0; overflow: hidden;}
[hidden] {display: none !important;}
#ghost-game {position: relative; width: 100%; height: 100%;}
#ghost-view {--safe-area-top: env(safe-area-inset-top, 0px); --safe-area-right: env(safe-area-inset-right, 0px); display: block; width: 100%; height: 100%; background: #000; touch-action: none; transform: translateZ(0); will-change: transform;}
/* WebGL world layer under the 2D game canvas, which turns transparent to overlay labels, minimap and fades. */
.ghost-gl-view {position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; pointer-events: none; transform: translateZ(0); will-change: transform;}
.ghost-gl-view[hidden] {display: none;}
#ghost-view.ghost-gl-overlay {background: transparent;}
/* Only real controls show focus; full-screen surfaces (game view, crawl dialog, page) never get a browser ring. */
:focus:not(button, select, input, textarea, summary, #ghost-commands h3), dialog:focus, dialog:focus-visible {outline: none !important;}
#ghost-terminal {--menu-scale: 1; position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; font-size: calc(16px * var(--ui-scale, 1) * var(--text-scale, 1)); padding: max(3vh, env(safe-area-inset-top)) max(calc(24px * var(--ui-scale, 1)), env(safe-area-inset-right), calc((100vw - calc(820px * var(--ui-scale, 1) * var(--text-scale, 1))) / 2)) max(3vh, env(safe-area-inset-bottom)) max(calc(24px * var(--ui-scale, 1)), env(safe-area-inset-left), calc((100vw - calc(820px * var(--ui-scale, 1) * var(--text-scale, 1))) / 2)); background: #020a05; text-shadow: 0 0 calc(8px * var(--ui-scale, 1)) #59f48066;}
#ghost-terminal.ghost-start-blank > * {visibility: hidden;}
#ghost-menu-header {flex: none; max-height: 40%; overflow: auto; overflow-wrap: anywhere;}
#ghost-menu-header h1 {margin-bottom: calc(calc(6px * var(--ui-scale, 1)) * var(--menu-scale, 1));}
#ghost-menu-body > h2 {margin-top: calc(calc(6px * var(--ui-scale, 1)) * var(--menu-scale, 1));}
#ghost-menu-body {flex: 1; min-height: 0; overflow: auto;}
.ghost-tutorial-overlay {flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(6px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)); margin: calc(4px * var(--ui-scale, 1)) 0 calc(8px * var(--ui-scale, 1)); padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); border: 1px solid #9affac; background: #071b0df2; box-shadow: 0 0 calc(16px * var(--ui-scale, 1)) #59f48033; max-height: 32vh; overflow: auto;}
.ghost-tutorial-overlay strong {grid-column: 1; grid-row: 1; align-self: start;}
.ghost-tutorial-overlay p {grid-column: 2; grid-row: 1; margin: 0; font-size: calc(14px * var(--ui-scale, 1) * var(--text-scale, 1)); line-height: 1.3; overflow-wrap: anywhere;}
h1 {font-size: calc(clamp(calc(28px * var(--ui-scale, 1)), 6vw, calc(54px * var(--ui-scale, 1))) * var(--menu-scale, 1) * var(--text-scale, 1)); overflow-wrap: anywhere; margin: calc(calc(20px * var(--ui-scale, 1)) * var(--menu-scale, 1)) 0;}
#ghost-terminal .ghost-field > span {font-size: calc(calc(13px * var(--ui-scale, 1)) * var(--menu-scale, 1) * var(--text-scale, 1));}
h2 {font-size: calc(calc(20px * var(--ui-scale, 1)) * var(--menu-scale, 1) * var(--text-scale, 1));}
:where(#ghost-terminal) :is(p, h2) {margin: calc(calc(16px * var(--ui-scale, 1)) * var(--menu-scale, 1)) 0;}
#ghost-status {white-space: pre-wrap; overflow-wrap: anywhere;}
#ghost-status:empty {display: none;}
.ghost-app-dialog.ghost-campaign-intro {width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; border: 0; padding: max(8vh, env(safe-area-inset-top)) max(6vw, env(safe-area-inset-right), calc((100vw - calc(820px * var(--ui-scale, 1) * var(--text-scale, 1))) / 2)) max(8vh, env(safe-area-inset-bottom)) max(6vw, env(safe-area-inset-left), calc((100vw - calc(820px * var(--ui-scale, 1) * var(--text-scale, 1))) / 2)); display: flex; flex-direction: column; background: #020a05;}
.ghost-campaign-intro h2 {flex: none; max-height: 30%; overflow: auto; overflow-wrap: anywhere;}
.ghost-campaign-intro p {flex: 1; min-height: 0; overflow: auto; white-space: pre-wrap; line-height: 1.6;}
.ghost-campaign-intro .ghost-dialog-actions {flex: none;}
.ghost-campaign-intro:not(.ghost-intro-crawl) .ghost-dialog-actions {align-self: flex-end;}
.ghost-intro-crawl h2 {text-align: center;}
.ghost-intro-crawl p {display: grid; place-items: center; text-align: center; text-shadow: 0 0 8px #59f48066;}
.ghost-crawl-copy::after {content: attr(data-remaining); visibility: hidden;}
.ghost-campaign-intro .ghost-crawl-hint {flex: none; margin: 0; font-size: .85em; text-align: center;}
#ghost-commands {display: grid; gap: calc(calc(8px * var(--ui-scale, 1)) * var(--menu-scale, 1)); padding-bottom: calc(calc(24px * var(--ui-scale, 1)) * var(--menu-scale, 1));}
#ghost-loading {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: max(calc(24px * var(--ui-scale, 1)), env(safe-area-inset-top)) max(calc(24px * var(--ui-scale, 1)), env(safe-area-inset-right)) max(calc(24px * var(--ui-scale, 1)), env(safe-area-inset-bottom)) max(calc(24px * var(--ui-scale, 1)), env(safe-area-inset-left)); background: #020a05; overflow: auto;}
.ghost-loading-card {display: flex; flex-direction: column; max-height: 100%; width: min(100%, calc(640px * var(--ui-scale, 1) * var(--text-scale, 1))); min-width: 0; overflow-wrap: anywhere; text-shadow: 0 0 calc(8px * var(--ui-scale, 1)) #59f48066;}
.ghost-loading-details {min-height: 0; overflow: auto;}
#ghost-loading-level, #ghost-loading-objective, #ghost-loading-status {white-space: pre-wrap; overflow-wrap: anywhere;}
.ghost-loading-status-area {position: relative; margin: 1em 0; min-height: 3em;}
#ghost-loading-status {margin: 0;}
#ghost-loading-continue {position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: transparent; white-space: pre-wrap;}
.ghost-loading-status-area:has(#ghost-loading-continue:not([hidden])) #ghost-loading-status {visibility: hidden;}
#ghost-loading-progress {display: block; width: 100%; height: calc(24px * var(--ui-scale, 1)); border: 1px solid #28783d; background: #071b0d; accent-color: #9affac;}
#ghost-loading-progress::-webkit-progress-bar {background: #071b0d;}
#ghost-loading-progress::-webkit-progress-value {background: #9affac;}
#ghost-loading-progress::-moz-progress-bar {background: #9affac;}
#ghost-loading-count {text-align: right;}
button, select {font: inherit; color: inherit; background: #071b0d; border: 1px solid #28783d; padding: calc(calc(12px * var(--ui-scale, 1)) * var(--menu-scale, 1)); text-align: left; cursor: pointer; overflow-wrap: anywhere;}
body:not(.ghost-menu-nav) button:hover, button:focus-visible, select:focus-visible,
.ghost-menu-nav :is(button, select, input, summary):focus {outline: calc(2px * var(--ui-scale, 1)) solid #9affac; background: #163722;}
button:disabled {opacity: .45; cursor: default;}
.ghost-field {display: grid; gap: calc(6px * var(--ui-scale, 1));}
.ghost-creator-template-field {grid-template-columns: minmax(0, 1fr) calc(56px * var(--ui-scale, 1)); align-items: center;}
.ghost-creator-template-field > span {grid-column: 1 / -1;}
.ghost-creator-template-field > .ghost-dropdown {min-width: 0;}
.ghost-creator-template-icon {width: calc(56px * var(--ui-scale, 1)); height: calc(56px * var(--ui-scale, 1)); padding: calc(4px * var(--ui-scale, 1)); border: 1px solid #28783d; background: #071b0d; object-fit: contain; image-rendering: pixelated;}
.ghost-creator-script-section {display: grid; gap: calc(8px * var(--ui-scale, 1)); min-width: 0; margin: calc(8px * var(--ui-scale, 1)) 0; padding: calc(12px * var(--ui-scale, 1)); border: 1px solid #28783d;}
.ghost-creator-script-section legend {padding: 0 calc(6px * var(--ui-scale, 1));}
.ghost-creator-map {display: grid; gap: calc(4px * var(--ui-scale, 1)); margin: calc(8px * var(--ui-scale, 1)) auto;}
.ghost-creator-map button {position: relative; aspect-ratio: 1; padding: calc(2px * var(--ui-scale, 1)); min-width: calc(44px * var(--ui-scale, 1)); min-height: calc(44px * var(--ui-scale, 1)); text-align: center; touch-action: manipulation;}
.ghost-creator-map-fill {margin: 0;}
.ghost-creator-map-fill button {aspect-ratio: auto; min-width: 0; min-height: 0; overflow: hidden;}
.ghost-creator-map img {width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none;}
.ghost-creator-map span {position: absolute; right: calc(2px * var(--ui-scale, 1)); bottom: calc(2px * var(--ui-scale, 1)); padding: 1px calc(3px * var(--ui-scale, 1)); font-size: calc(calc(12px * var(--ui-scale, 1)) * var(--menu-scale, 1) * var(--text-scale, 1)); background: #020a05dd; pointer-events: none;}
.ghost-creator-map .ghost-creator-marker {left: calc(4px * var(--ui-scale, 1)); top: calc(4px * var(--ui-scale, 1)); right: auto; bottom: auto; width: .8em; height: .8em; padding: 0; border: 1px solid #020a05;}
.ghost-creator-map .ghost-creator-marker-checkpoint {background: #80ff9d; border-radius: 50%;}
.ghost-creator-map .ghost-creator-marker-spawn {background: #80cfff; transform: rotate(45deg);}
.ghost-creator-selected {outline: calc(3px * var(--ui-scale, 1)) solid #d5ffdf; z-index: 1;}
.ghost-creator-map .ghost-creator-multi-selected {box-shadow: inset 0 0 0 calc(4px * var(--ui-scale, 1)) #ffcf55;}
.ghost-creator-multi-selected::after {content: ""; position: absolute; inset: 0; background: #ffcf5533; pointer-events: none;}
.ghost-creator-keyboard {display: grid; container-type: inline-size; gap: 6px; width: min(100%, 760px); min-width: 0; margin: auto;}
.ghost-keyboard-row {display: grid; gap: 4px; min-width: 0;}
.ghost-keyboard-row:nth-child(3) {margin-inline: 4%;}
.ghost-keyboard-controls {grid-template-columns: 3fr 4fr 3fr;}
.ghost-creator-keyboard .ghost-keyboard-row button {min-width: 0; min-height: clamp(28px, 6dvh, 40px); padding: 6px 1px; font-size: clamp(12px, 3cqi, 20px); line-height: 1.2; text-align: center;}
.ghost-creator-keyboard .ghost-keyboard-controls button {font-size: clamp(10px, 2.4cqi, 18px);}
#ghost-terminal.ghost-keyboard-active #ghost-menu-header,
#ghost-terminal.ghost-keyboard-active #ghost-status {display: none;}
#ghost-terminal.ghost-keyboard-active #ghost-commands {min-width: 0;}
#ghost-commands > .ghost-keyboard-input {position: sticky; top: 0; z-index: 2; box-shadow: 0 6px 12px #020a05;}
.ghost-player-pause {position: absolute; z-index: 10; overflow: auto; padding: 16px; background: #020a05ed; border: 1px solid #28783d; font-size: calc(16px * var(--text-scale, 1));}
.ghost-player-pause h2 {font-size: 1.2em;}
.ghost-player-pause-controls {display: grid; gap: 8px; min-width: 0;}
.ghost-player-pause :is(button, select) {width: 100%; min-width: 0; padding: 10px; font-size: inherit;}
.ghost-player-pause .ghost-player-menu-focus {outline: 2px solid #9affac; background: #163722;}
#ghost-commands > input {font: inherit; color: inherit; background: #071b0d; border: 1px solid #28783d; padding: calc(12px * var(--ui-scale, 1)); min-height: calc(48px * var(--ui-scale, 1)); width: 100%;}
.ghost-creator-grid-page .ghost-field {gap: calc(2px * var(--ui-scale, 1));}
.ghost-creator-grid-page .ghost-field button {min-height: calc(44px * var(--ui-scale, 1)); padding: calc(8px * var(--ui-scale, 1));}
#ghost-terminal.ghost-creator-map-active {padding-left: max(calc(24px * var(--ui-scale, 1)), 3vw, env(safe-area-inset-left)); padding-right: max(calc(24px * var(--ui-scale, 1)), 3vw, env(safe-area-inset-right));}
.ghost-creator-map-active #ghost-menu-header > p {display: none;}
.ghost-creator-map-active h1 {font-size: calc(calc(28px * var(--ui-scale, 1)) * var(--menu-scale, 1) * var(--text-scale, 1)); margin-top: 0;}
.ghost-creator-map-active .ghost-creator-grid-page {grid-template-columns: repeat(6, minmax(0, 1fr));}
.ghost-creator-map-active .ghost-creator-grid-page > * {grid-column: 1 / -1; min-width: 0;}
#ghost-commands.ghost-creator-grid-page:has(> .ghost-creator-map-fill) {padding-bottom: 0; gap: 0;}
.ghost-creator-map-active .ghost-creator-grid-page > :is([data-menu-id="creator.brush-category"], [data-menu-id="creator.brush"]) {grid-column: span 3;}
.ghost-creator-map-active .ghost-creator-grid-page:has(> [data-menu-id="creator.facing"]) > :is([data-menu-id="creator.brush-category"], [data-menu-id="creator.brush"], [data-menu-id="creator.facing"]) {grid-column: span 2;}
.ghost-creator-map-active .ghost-creator-grid-page > :is([data-menu-id="creator.edit-highlighted"], [data-menu-id="creator.enter-grid"], [data-menu-id="creator.undo"], [data-menu-id="creator.redo"], [data-menu-id="submenu.tools"], [data-menu-id="creator.back-level"]) {grid-column: span 3;}
.ghost-field > span {font-size: calc(13px * var(--ui-scale, 1) * var(--text-scale, 1)); color: #86be91;}
.ghost-field select {width: 100%; min-width: 0;}
.ghost-controls-advanced {border: 1px solid #28783d; padding: calc(12px * var(--ui-scale, 1));}
.ghost-controls-advanced summary {cursor: pointer; padding: calc(4px * var(--ui-scale, 1));}
.ghost-controls-advanced summary:focus-visible {outline: calc(2px * var(--ui-scale, 1)) solid #9affac;}
.ghost-controls-advanced[open] {display: grid; gap: calc(8px * var(--ui-scale, 1));}
.ghost-controls-advanced > .ghost-field, .ghost-controls-advanced > button {margin-top: calc(8px * var(--ui-scale, 1));}
#ghost-terminal.ghost-controls-active #ghost-commands {gap: calc(4px * var(--ui-scale, 1));}
#ghost-terminal.ghost-controls-active #ghost-commands button {padding: calc(8px * var(--ui-scale, 1));}
.ghost-menu-nav #ghost-commands h3:focus, #ghost-commands h3:focus-visible {outline: 2px solid #9affac; background: #163722;}
#ghost-commands h3:focus:not(:focus-visible) {outline: none;}
.ghost-dropdown {position: relative;}
.ghost-dropdown-trigger {width: 100%; padding-right: calc(36px * var(--ui-scale, 1));}
.ghost-dropdown-trigger::after {content: "\25be"; position: absolute; right: calc(14px * var(--ui-scale, 1));}
.ghost-dropdown-menu {position: absolute; left: 0; right: 0; z-index: 30; overflow: auto; padding: calc(4px * var(--ui-scale, 1)); background: #020a05; border: 1px solid #9affac; box-shadow: 0 0 calc(16px * var(--ui-scale, 1)) #59f48033;}
.ghost-dropdown-option {display: block; width: 100%; border: 0; background: transparent;}
.ghost-dropdown-option[aria-selected="true"] {color: #d5ffdf; border-left: calc(3px * var(--ui-scale, 1)) solid #9affac;}
.ghost-dropdown-option.ghost-dropdown-highlight, .ghost-dropdown-option:hover {background: #163722; outline: 1px solid #9affac;}
.ghost-action-menu {position: fixed; right: auto; width: min(calc(240px * var(--ui-scale, 1) * var(--text-scale, 1)), calc(100vw - calc(8px * var(--ui-scale, 1)))); max-height: calc(100dvh - calc(8px * var(--ui-scale, 1))); z-index: 100;}
.ghost-action-menu .ghost-dropdown-option {padding: calc(6px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)); min-height: calc(32px * var(--ui-scale, 1)); text-align: left;}
select:disabled {opacity: .45; cursor: default;}
#ghost-dialogue, .ghost-intro-dialogue {position: absolute; bottom: max(calc(28px * var(--ui-scale, 1)), env(safe-area-inset-bottom)); left: max(5%, env(safe-area-inset-left)); width: min(90%, calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); min-height: calc(100px * var(--ui-scale, 1)); max-height: 60vh; overflow: auto; white-space: pre-wrap; background: #020a05ed;}
#ghost-dialogue {z-index: 2; touch-action: manipulation;}
.ghost-app-dialog .ghost-intro-dialogue {background: #020a05ed; padding: calc(12px * var(--ui-scale, 1)); border: 1px solid #28783d;}
.ghost-dialogue-face {width: calc(80px * var(--ui-scale, 1)); height: calc(80px * var(--ui-scale, 1)); flex: none; image-rendering: pixelated;}
.ghost-dialogue-text {min-width: 0; max-height: calc(60vh - calc(24px * var(--ui-scale, 1))); overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap;}
#ghost-dialogue, .ghost-intro-dialogue {display: flex; align-items: center; gap: calc(16px * var(--ui-scale, 1)); text-align: left;}
#ghost-hud {position: absolute; left: calc(env(safe-area-inset-left, 0px) + calc(12px * var(--ui-scale, 1))); top: env(safe-area-inset-top, 0px); max-width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - calc(24px * var(--ui-scale, 1))); overflow-wrap: anywhere; background: #020a05ba; padding: calc(8px * var(--ui-scale, 1)); white-space: pre-wrap; pointer-events: none;}
#ghost-touch button:disabled {opacity: .25;}
#ghost-loading-tip {flex: none; max-height: 40dvh; overflow: auto; margin: calc(16px * var(--ui-scale, 1)) 0 0; color: #86be91; line-height: 1.5;}
#ghost-loading-tip:empty {display: none;}
#ghost-crt {position: absolute; inset: 0; pointer-events: none; transform: translateZ(0); will-change: transform; background: repeating-linear-gradient(transparent 0 calc(3px * var(--ui-scale, 1)), #0002 calc(3px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1))); box-shadow: inset 0 0 calc(100px * var(--ui-scale, 1)) #0009;}
.ghost-run-complete, .ghost-run-failed {background: #000;}
.ghost-results-active #ghost-status {white-space: pre-line;}
.ghost-run-complete > canvas, .ghost-run-failed > canvas {animation-duration: var(--ending-duration, 1s); animation-delay: var(--ending-time, 0s); animation-play-state: paused; animation-fill-mode: forwards; transform-origin: center;}
.ghost-run-complete > canvas {animation-name: ghost-brightness-rise; animation-timing-function: linear;}
.ghost-run-failed > canvas {animation-name: ghost-signal-loss; animation-timing-function: steps(1, end);}
.ghost-run-shutdown > canvas {animation-name: ghost-crt-power-off; animation-timing-function: ease-in;}
.ghost-run-failed:not(.ghost-run-shutdown)::after {content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: repeating-linear-gradient(0deg, #9affac18 0 2px, transparent 2px 9px); animation: ghost-signal-noise var(--ending-duration, 1s) linear var(--ending-time, 0s) forwards paused;}
@keyframes ghost-brightness-rise {
    0% {filter: brightness(1); transform: scale(1);}
    100% {filter: brightness(1.15); transform: scale(1);}
}
@keyframes ghost-crt-power-off {
    0% {filter: brightness(.7); transform: scale(1); opacity: 1;}
    55% {filter: brightness(1.2); transform: scale(1, .006); opacity: 1;}
    85% {transform: scale(.015, .006); opacity: 1;}
    100% {transform: scale(0); opacity: 0;}
}
.ghost-run-complete.ghost-run-shutdown > canvas {animation-name: ghost-crt-complete-off;}
@keyframes ghost-crt-complete-off {
    0% {filter: brightness(1.15); transform: scale(1); opacity: 1;}
    55% {filter: brightness(1.5); transform: scale(1, .006); opacity: 1;}
    85% {transform: scale(.015, .006); opacity: 1;}
    100% {transform: scale(0); opacity: 0;}
}
@keyframes ghost-signal-loss {
    0% {transform: translate(0); filter: none;}
    15% {transform: translate(-6px, 2px) skewX(1deg); filter: contrast(1.2) saturate(.5);}
    30% {transform: translate(3px, -2px); filter: hue-rotate(25deg);}
    45% {transform: translate(-3px, 1px) skewX(-2deg); filter: contrast(1.3);}
    65% {transform: translate(2px, -1px); filter: saturate(.2) brightness(.7);}
    80%, 100% {transform: translate(0); filter: brightness(.7);}
}
@keyframes ghost-signal-noise {
    0% {opacity: 0;}
    20% {opacity: .6; transform: translateY(3px);}
    50% {opacity: .8; transform: translateY(-3px);}
    80% {opacity: .5;}
    100% {opacity: 0;}
}
@media (prefers-reduced-motion: reduce) {
    .ghost-run-complete > canvas, .ghost-run-failed > canvas, .ghost-run-failed::after {animation: none;}
}
#ghost-touch {position: absolute; inset: 0; pointer-events: none; z-index: 1;}
#ghost-touch button {pointer-events: auto; min-width: calc(44px * var(--ui-scale, 1)); min-height: calc(44px * var(--ui-scale, 1)); text-align: center; padding: calc(8px * var(--ui-scale, 1)); background: #071b0dcc; touch-action: none; user-select: none;}
#ghost-touch svg {display: block; width: calc(28px * var(--ui-scale, 1)); height: calc(28px * var(--ui-scale, 1)); margin: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;}
.ghost-touch-pause {position: absolute; top: calc(env(safe-area-inset-top, 0px) + calc(12px * var(--ui-scale, 1))); left: calc(env(safe-area-inset-left, 0px) + calc(12px * var(--ui-scale, 1)));}
#ghost-game:has(#ghost-touch:not([hidden])) #ghost-hud {top: calc(env(safe-area-inset-top, 0px) + calc(60px * var(--ui-scale, 1)));}
#ghost-joystick {position: absolute; left: max(calc(16px * var(--ui-scale, 1)), env(safe-area-inset-left)); bottom: max(calc(16px * var(--ui-scale, 1)), env(safe-area-inset-bottom)); width: calc(144px * var(--ui-scale, 1)); height: calc(144px * var(--ui-scale, 1)); border: calc(2px * var(--ui-scale, 1)) solid #28783d; border-radius: 50%; background: #071b0d99; pointer-events: auto; touch-action: none; user-select: none; display: grid; place-items: center;}
.ghost-joystick-knob {width: calc(56px * var(--ui-scale, 1)); height: calc(56px * var(--ui-scale, 1)); border: calc(2px * var(--ui-scale, 1)) solid #9affac; border-radius: 50%; background: #163722cc; pointer-events: none;}
.ghost-actions {position: absolute; right: max(calc(12px * var(--ui-scale, 1)), env(safe-area-inset-right)); bottom: max(calc(12px * var(--ui-scale, 1)), env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(2, calc(64px * var(--ui-scale, 1))); grid-template-rows: repeat(2, calc(64px * var(--ui-scale, 1))); gap: calc(8px * var(--ui-scale, 1)); align-items: center;}
.ghost-actions button {width: calc(64px * var(--ui-scale, 1)); height: calc(64px * var(--ui-scale, 1)); border-radius: 50%;}
.ghost-actions [data-control="possess"] {grid-column: 2; grid-row: 1;}
.ghost-actions [data-control="action"] {grid-column: 2; grid-row: 2;}
.ghost-actions [data-control="interact"] {grid-column: 1; grid-row: 1 / 3;}
.ghost-actions:has(#ghost-swap-host:not([hidden])) [data-control="interact"] {grid-row: 1;}
.ghost-actions #ghost-swap-host {grid-column: 1; grid-row: 2;}
.ghost-custom-touch-layout .ghost-actions {display: contents;}
#ghost-touch.ghost-custom-touch-layout button {position: absolute; width: calc(64px * var(--ui-scale, 1)); height: calc(64px * var(--ui-scale, 1)); left: clamp(max(calc(32px * var(--ui-scale, 1)), calc(env(safe-area-inset-left) + calc(32px * var(--ui-scale, 1)))), var(--touch-x), calc(100% - max(calc(32px * var(--ui-scale, 1)), calc(env(safe-area-inset-right) + calc(32px * var(--ui-scale, 1)))))); top: clamp(max(calc(32px * var(--ui-scale, 1)), calc(env(safe-area-inset-top) + calc(32px * var(--ui-scale, 1)))), var(--touch-y), calc(100% - max(calc(32px * var(--ui-scale, 1)), calc(env(safe-area-inset-bottom) + calc(32px * var(--ui-scale, 1)))))); right: auto; bottom: auto; transform: translate(-50%, -50%);}
.ghost-touch-layout-preview {position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: calc(180px * var(--ui-scale, 1)); border: 1px solid #28783d; background: repeating-linear-gradient(0deg, #071b0d 0 calc(23px * var(--ui-scale, 1)), #163722 calc(24px * var(--ui-scale, 1))); overflow: hidden;}
.ghost-touch-layout-preview button {position: absolute; display: grid; place-items: center; width: calc(48px * var(--ui-scale, 1)); height: calc(48px * var(--ui-scale, 1)); padding: calc(8px * var(--ui-scale, 1)); left: clamp(calc(24px * var(--ui-scale, 1)), var(--touch-x), calc(100% - calc(24px * var(--ui-scale, 1)))); top: clamp(calc(24px * var(--ui-scale, 1)), var(--touch-y), calc(100% - calc(24px * var(--ui-scale, 1)))); transform: translate(-50%, -50%); border-radius: 50%; touch-action: none; cursor: grab;}
.ghost-touch-layout-preview button:active {cursor: grabbing;}
.ghost-touch-placement-active #ghost-menu-header {display: none;}
.ghost-touch-placement-active #ghost-menu-body {overflow: visible;}
.ghost-touch-layout-preview.ghost-touch-layout-fullscreen {position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border: 0; background: #071b0d;}
.ghost-touch-layout-preview.ghost-touch-layout-fullscreen button {width: calc(64px * var(--ui-scale, 1)); height: calc(64px * var(--ui-scale, 1)); left: clamp(calc(32px * var(--ui-scale, 1)), var(--touch-x), calc(100% - calc(32px * var(--ui-scale, 1)))); top: clamp(calc(32px * var(--ui-scale, 1)), var(--touch-y), calc(100% - calc(32px * var(--ui-scale, 1))));}
.ghost-touch-layout-close {position: fixed; z-index: 41; top: max(calc(12px * var(--ui-scale, 1)), env(safe-area-inset-top)); right: max(calc(12px * var(--ui-scale, 1)), env(safe-area-inset-right)); min-width: calc(44px * var(--ui-scale, 1)); min-height: calc(44px * var(--ui-scale, 1)); text-align: center;}
.ghost-touch-layout-preview svg {display: block; width: calc(28px * var(--ui-scale, 1)); height: calc(28px * var(--ui-scale, 1)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;}
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
    #ghost-terminal.ghost-creator-active {padding: max(calc(12px * var(--ui-scale, 1)), env(safe-area-inset-top)) max(calc(12px * var(--ui-scale, 1)), env(safe-area-inset-right)) max(calc(12px * var(--ui-scale, 1)), env(safe-area-inset-bottom)) max(calc(12px * var(--ui-scale, 1)), env(safe-area-inset-left));}
    .ghost-creator-active #ghost-menu-header > p {display: none;}
    .ghost-creator-active h1 {font-size: calc(20px * var(--ui-scale, 1) * var(--text-scale, 1)); margin: 0 0 calc(8px * var(--ui-scale, 1));}
    .ghost-creator-active h2 {font-size: calc(17px * var(--ui-scale, 1) * var(--text-scale, 1)); margin: calc(8px * var(--ui-scale, 1)) 0;}
    .ghost-creator-active #ghost-status {font-size: calc(13px * var(--ui-scale, 1) * var(--text-scale, 1)); margin: calc(8px * var(--ui-scale, 1)) 0 calc(12px * var(--ui-scale, 1));}
    .ghost-creator-active #ghost-commands {gap: calc(6px * var(--ui-scale, 1)); padding-bottom: calc(12px * var(--ui-scale, 1));}
    .ghost-creator-active #ghost-commands:has(> [data-menu-id="creator.entity-template-category"]) {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .ghost-creator-active #ghost-commands:has(> [data-menu-id="creator.entity-template-category"]) > * {grid-column: 1 / -1;}
    .ghost-creator-active #ghost-commands > [data-menu-id="creator.entity-template-category"],
    .ghost-creator-active #ghost-commands > [data-menu-id="creator.entity-template"] {grid-column: auto; min-width: 0;}
    .ghost-creator-active button {min-height: calc(44px * var(--ui-scale, 1)); padding: calc(10px * var(--ui-scale, 1)); font-size: calc(14px * var(--ui-scale, 1) * var(--text-scale, 1));}
    .ghost-creator-active .ghost-creator-map {width: min(100%, calc(280px * var(--ui-scale, 1))); margin: 0 auto;}
    .ghost-creator-active .ghost-creator-map button {padding: calc(2px * var(--ui-scale, 1));}
    .ghost-creator-active .ghost-creator-grid-page {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .ghost-creator-active .ghost-creator-grid-page > * {grid-column: 1 / -1;}
    .ghost-creator-active .ghost-creator-grid-page > [data-menu-id="creator.undo"],
    .ghost-creator-active .ghost-creator-grid-page > [data-menu-id="creator.redo"],
    .ghost-creator-active .ghost-creator-grid-page > [data-menu-id="creator.brush-category"],
    .ghost-creator-active .ghost-creator-grid-page > [data-menu-id="creator.brush"] {grid-column: auto; min-width: 0;}
    .ghost-creator-active .ghost-creator-grid-page:has(> [data-menu-id="creator.facing"]) {grid-template-columns: repeat(6, minmax(0, 1fr));}
    .ghost-creator-active .ghost-creator-grid-page:has(> [data-menu-id="creator.facing"]) > [data-menu-id="creator.brush-category"],
    .ghost-creator-active .ghost-creator-grid-page:has(> [data-menu-id="creator.facing"]) > [data-menu-id="creator.brush"],
    .ghost-creator-active .ghost-creator-grid-page > [data-menu-id="creator.facing"] {grid-column: span 2; min-width: 0;}
    .ghost-creator-active .ghost-creator-grid-page:has(> [data-menu-id="creator.facing"]) > [data-menu-id="creator.undo"],
    .ghost-creator-active .ghost-creator-grid-page:has(> [data-menu-id="creator.facing"]) > [data-menu-id="creator.redo"] {grid-column: span 3;}
    .ghost-creator-active [data-menu-id="creator.name"],
    .ghost-creator-active [data-menu-id="creator.mod-name"],
    .ghost-creator-active [data-menu-id="creator.mod-id"],
    .ghost-creator-active [data-menu-id="creator.mod-version"],
    .ghost-creator-active [data-menu-id="creator.mod-description"],
    .ghost-creator-active [data-menu-id="creator.mod-requires"] {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
}
@media (max-width: 380px) {
    #ghost-joystick {width: calc(120px * var(--ui-scale, 1)); height: calc(120px * var(--ui-scale, 1)); left: calc(8px * var(--ui-scale, 1));}
    .ghost-actions {grid-template-columns: repeat(2, calc(56px * var(--ui-scale, 1))); grid-template-rows: repeat(2, calc(56px * var(--ui-scale, 1))); right: max(calc(8px * var(--ui-scale, 1)), env(safe-area-inset-right)); gap: calc(4px * var(--ui-scale, 1));}
    .ghost-actions button {width: calc(56px * var(--ui-scale, 1)); height: calc(56px * var(--ui-scale, 1));}
    #ghost-touch button {font-size: calc(12px * var(--ui-scale, 1) * var(--text-scale, 1));}
}
.ghost-controller-diagnostic {white-space: pre-wrap; font-size: calc(calc(12px * var(--ui-scale, 1)) * var(--menu-scale, 1) * var(--text-scale, 1)); color: #86be91;}