html,body{height:100%;margin:0}#content_layer{position:fixed;inset:0;background:#111827}#ui_layer{--controller-control-size: 120px;--controller-zone-height: 173px;--controller-offset: 43px;--controller-action-gap: .625rem;--controller-label-gap: .25rem;--controller-label-size: .8rem;position:fixed;inset:min(5vw,5vh);pointer-events:none}#ui_root{height:100%}.screen-debug-viewport{position:fixed;z-index:2;inset:0;box-sizing:border-box;border:1px solid #4ade80;pointer-events:none}.screen-debug-ui-outline{position:absolute;z-index:2;inset:0;box-sizing:border-box;border:1px solid #22d3ee;pointer-events:none}.ui-shell{--edge-height: 44px;height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--edge-height) minmax(0,1fr) var(--edge-height)}#header,#footer{display:flex}#header{align-items:flex-start;justify-content:space-between;color:#f8fafc;font:700 clamp(.85rem,2vw,1rem) system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 10px #020617}#project_title{display:grid;gap:.25rem}#tilemap_status,#renderer_status,#fps_status,#mouse_circle_radius_status,.ui-label{color:#93c5fd;font:600 clamp(.65rem,1.5vw,.75rem) system-ui,sans-serif;letter-spacing:.05em;text-transform:none}.ui-subtitle{color:#93c5fd;font:600 clamp(.75rem,1.75vw,.875rem) system-ui,sans-serif;letter-spacing:.05em;text-transform:none}#header a,#header a:visited,.control-art{pointer-events:auto}#header a,#header a:visited{color:#f8fafc}.header-actions,.settings-group{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}.debug-circle-group{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;margin-top:.75rem}.debug-circle-field{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;width:min(14rem,42vw);pointer-events:auto}.debug-circle-field-label{width:100%;text-align:right}.debug-circle-field-controls{display:flex;align-items:center;gap:.4rem;width:100%}.debug-circle-field input[type=number]{width:4.5rem;flex:0 0 auto;appearance:textfield;border:1px solid #334155;border-radius:.25rem;padding:.15rem .3rem;background:#0f172a;color:#e2e8f0;font:inherit}.debug-circle-field input[type=range]{flex:1 1 auto;width:100%;min-width:0;accent-color:#93c5fd;cursor:pointer}.debug-circle-field input[type=number]::-webkit-outer-spin-button,.debug-circle-field input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.settings-control{appearance:none;border:0;padding:0;background:transparent;cursor:pointer;pointer-events:auto}.settings-control:hover,.settings-control:focus-visible{color:#bfdbfe;text-decoration:underline;text-underline-offset:.16em;outline:none}.settings-text-style{color:#93c5fd;font:600 clamp(.65rem,1.5vw,.75rem) system-ui,sans-serif}.colliders-toggle{appearance:none;border:0;padding:0;background:transparent;cursor:pointer;pointer-events:auto}.colliders-toggle:hover,.colliders-toggle:focus-visible{color:#bfdbfe;text-decoration:underline;text-underline-offset:.16em;outline:none}.mute-sfx-toggle{appearance:none;border:0;padding:0;background:transparent;cursor:pointer;pointer-events:auto}.mute-sfx-toggle:hover,.mute-sfx-toggle:focus-visible{color:#bfdbfe;text-decoration:underline;text-underline-offset:.16em;outline:none}.respawn-toggle{appearance:none;border:0;padding:0;background:transparent;cursor:pointer;pointer-events:auto}.respawn-toggle:hover,.respawn-toggle:focus-visible{color:#bfdbfe;text-decoration:underline;text-underline-offset:.16em;outline:none}.coords-toggle{appearance:none;border:0;padding:0;background:transparent;cursor:pointer;pointer-events:auto}.coords-toggle:hover,.coords-toggle:focus-visible{color:#bfdbfe;text-decoration:underline;text-underline-offset:.16em;outline:none}.mouse-control-toggle{appearance:none;border:0;padding:0;background:transparent;cursor:pointer;pointer-events:auto}.mouse-control-toggle:hover,.mouse-control-toggle:focus-visible{color:#bfdbfe;text-decoration:underline;text-underline-offset:.16em;outline:none}#player_coords_status{color:#93c5fd;font:600 clamp(.65rem,1.5vw,.75rem) system-ui,sans-serif;letter-spacing:.05em;text-transform:none}#body{min-height:0;display:flex;align-items:flex-end}#footer{align-items:flex-end;justify-content:flex-end;color:#cbd5e1;font:500 .75rem system-ui,sans-serif}.virtual-controller{width:100%;height:var(--controller-zone-height);display:flex;align-items:center;justify-content:space-between;padding-bottom:.15rem;transform:translateY(var(--controller-offset));pointer-events:none}.action-controls{display:flex;align-items:center;min-width:0;gap:var(--controller-action-gap)}.virtual-control{display:grid;justify-items:center;min-width:0;gap:var(--controller-label-gap);color:#e2e8f0;font:700 var(--controller-label-size) system-ui,sans-serif;text-align:center;text-shadow:0 1px 3px #020617}.virtual-control>span{max-inline-size:var(--controller-control-size);line-height:1.15;overflow-wrap:anywhere}.control-art{--control-size: var(--controller-control-size);position:relative;width:var(--control-size);height:var(--control-size);padding:0;border:0;background:transparent;touch-action:none;cursor:grab}.control-art:active{cursor:grabbing}.action-art{--control-size: var(--controller-control-size)}.control-art img:first-child,.control-handle{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.control-handle{width:52.94%;height:52.94%;inset:23.53%;transition:transform 70ms ease-out,scale 70ms ease-out}.action-art .control-handle{width:58.33%;height:58.33%;inset:20.83%}.action-art .control-handle.is-pressed{scale:.85}@media(max-width:480px){.ui-shell{--edge-height: 36px}}