#vr-debug {
    position: absolute;
    top: 0;
    right: 0;
    margin: 1.5rem;
    /* padding: 0.5rem 1rem; */
    /* gap: 0.5rem; */
    max-height: 90%;
    overflow: auto;
    color: #fff;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.8);
    color: rgba(251, 170, 170, 0.8);
    z-index: 99;
    font-family: monospace;
}


#vr-debug.visible {
    display: grid;
}


.debug-row {
    display: grid;
    /* grid-auto-flow: column; */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.5rem;
    padding: 0.5rem 1rem;
}

#vr-debug .debug-row .debug-label {
    color: rgba(251, 170, 170, 0.3)
}

.hidden {
    display: none;
}

.waveloop-brand { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--uk-primary-hi); font: 22px/1 var(--uk-font-display, 'Micro 5', monospace); }
.waveloop-brand img { width: 28px; height: 28px; object-fit: contain; }
.a-enter-vr { left: 16px !important; right: auto !important; bottom: 16px !important; }
.a-enter-vr-button { display: flex !important; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; box-sizing: border-box; width: 104px !important; height: 116px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 0 10px !important; font-size: 0 !important; line-height: 0 !important; border-radius: 0 !important; border: 1px solid var(--uk-primary-dim) !important; background: var(--uk-surface) url('/branding/waveloop-logo.png') center 8px / 28px 38px no-repeat !important; opacity: 1 !important; }
.a-enter-vr-button::before { content: 'XR'; display: block; flex: none; height: 16px; color: var(--uk-muted); font: 14px/16px var(--uk-font-body); }
.a-enter-vr-button::after { content: 'enter'; display: block; flex: none; height: 26px; color: var(--uk-primary-hi); font: 24px/26px var(--uk-font-body); }
.a-enter-vr-button:hover { border-color: var(--uk-primary-hi) !important; }
#art-laser-mode { position: fixed; left: 16px; bottom: 176px; z-index: 60; padding: 8px 12px; border: 1px solid var(--uk-primary-dim); background: var(--uk-surface); color: var(--uk-primary-hi); font: 22px/1 var(--uk-font-brand); text-transform: uppercase; letter-spacing: 0.04em; border-radius: 0; cursor: pointer; }
#art-laser-mode:hover { border-color: var(--uk-primary-hi); }
#art-laser-mode[hidden] { display: none; }

#vr-debug #debug-row-first {
    font-weight: 700;
    background-color: #333;
}

/* The dock: every desk control in one UltraKit column, top left. Square,
   silver, one lit edge on top; a section is a row you open. */
#waveloop-dock { position: fixed; top: 16px; left: 16px; z-index: 100; display: flex; flex-direction: column; box-sizing: border-box; width: min(288px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 0 12px 12px; color: var(--uk-text); background: var(--uk-surface); border: 1px solid var(--uk-primary-dim); border-top-color: var(--uk-primary); font: 13px/1.35 var(--uk-font-body); scrollbar-width: thin; scrollbar-color: var(--uk-primary-dim) var(--uk-ground); }
#waveloop-dock[hidden], #waveloop-dock [hidden] { display: none; }
#waveloop-dock .waveloop-brand, #waveloop-dock .waveloop-brand:hover { order: 0; flex: none; width: 100%; height: 40px; min-height: 40px; margin: 0; padding: 0; background: none; color: var(--uk-primary-hi); font: 22px/1 var(--uk-font-brand); text-transform: none; letter-spacing: 0; text-align: left; }
#waveloop-dock .waveloop-brand::after { content: '-'; margin-left: 10px; color: var(--uk-muted); }
#waveloop-dock .waveloop-version { margin-left: auto; padding-left: 10px; color: var(--uk-muted); font: 12px/1 var(--uk-font-mono); }
#waveloop-dock.shut { width: auto; padding-bottom: 0; }
#waveloop-dock.shut .waveloop-brand::after { content: '+'; padding-left: 12px; }
#waveloop-dock.shut > :not(.waveloop-brand) { display: none; }
#waveloop-dock #view-helpers { order: 1; }
#waveloop-dock #world-login { order: 2; }
#waveloop-dock #locations { order: 3; }
#waveloop-dock #locations [data-list] { display: flex; flex-wrap: wrap; }
#waveloop-dock #target-review { order: 4; }
#waveloop-dock #choppa-mic { order: 5; margin-top: 12px; }
#waveloop-dock #build-help { order: 6; flex: none; display: flex; align-items: center; gap: 8px; height: var(--uk-menu-row-h); margin-top: 12px; border-top: 1px solid var(--uk-primary-dim); color: var(--uk-primary); font: 22px/1 var(--uk-font-brand); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; }
#waveloop-dock.shut #build-help { display: none; }
#waveloop-dock #dock-credits { order: 7; flex: none; display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 10px 0 0; color: var(--uk-muted); font: 12px/1.2 var(--uk-font-mono); }
#waveloop-dock #dock-credits p { margin: 0; }
#waveloop-dock #dock-credits table { border-collapse: collapse; width: 100%; }
#waveloop-dock #dock-credits td { padding: 3px 8px 3px 0; vertical-align: top; border-top: 1px solid var(--uk-line, rgba(255, 255, 255, 0.08)); }
#waveloop-dock #dock-credits a { color: var(--uk-primary-top, inherit); text-decoration: none; }
#waveloop-dock #dock-credits a:hover { text-decoration: underline; }
#waveloop-dock.shut #dock-credits { display: none; }
#waveloop-dock #dock-footer { order: 8; flex: none; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--uk-primary-dim); color: var(--uk-muted); font: 12px/1.2 var(--uk-font-mono); }
#waveloop-dock #dock-footer a { color: var(--uk-primary-top, inherit); text-decoration: none; }
#waveloop-dock #dock-footer a:hover { text-decoration: underline; }
#waveloop-dock.shut #dock-footer { display: none; }
#waveloop-dock #build-help:hover { color: var(--uk-primary-top); }
#waveloop-dock #build-help b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--uk-primary); color: var(--uk-ground); font-weight: 400; }
#waveloop-dock > details, #waveloop-dock #world-login > details { border-top: 1px solid var(--uk-primary-dim); }
#waveloop-dock summary { display: flex; align-items: center; height: var(--uk-menu-row-h); cursor: pointer; list-style: none; color: var(--uk-primary); font: 22px/1 var(--uk-font-brand); text-transform: uppercase; letter-spacing: 0.04em; }
#waveloop-dock summary::-webkit-details-marker { display: none; }
#waveloop-dock summary::after { content: '+'; margin-left: auto; color: var(--uk-muted); }
#waveloop-dock details[open] > summary { color: var(--uk-primary-top); }
#waveloop-dock details[open] > summary::after { content: '-'; }
#waveloop-dock details[open] { padding-bottom: 12px; }
#waveloop-dock p { margin: 4px 0 8px; color: var(--uk-muted); font-size: 12px; }
#waveloop-dock label { display: block; margin: 8px 0; color: var(--uk-muted); font: 11px/1.2 var(--uk-font-mono); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
#waveloop-dock input[type='checkbox'] { accent-color: var(--uk-primary); margin: 0 6px 0 0; vertical-align: -2px; }
#waveloop-dock input:not([type='checkbox']), #waveloop-dock textarea { display: block; box-sizing: border-box; width: 100%; margin-top: 4px; padding: 5px 6px; border: 1px solid var(--uk-primary-dim); border-radius: 0; background: var(--uk-ground); color: var(--uk-text); font: 12px/1.3 var(--uk-font-mono); text-transform: none; letter-spacing: 0; }
#waveloop-dock input:focus, #waveloop-dock textarea:focus { outline: 0; border-color: var(--uk-primary-hi); }
#waveloop-dock textarea { resize: vertical; }
#waveloop-dock button { box-sizing: border-box; min-height: var(--uk-row-h); margin: 4px 4px 0 0; padding: 0 10px; border: 0; border-radius: 0; background: var(--uk-primary); color: var(--uk-ground); font: 11px/1 var(--uk-font-mono); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
#waveloop-dock button:hover { background: var(--uk-primary-top); }
#waveloop-dock button:disabled { background: var(--uk-primary-dim); color: var(--uk-muted); cursor: default; }
#waveloop-dock #choppa-mic { width: 100%; margin-right: 0; }
#waveloop-dock output { display: block; margin: 8px 0 0; color: var(--uk-primary-hi); font: 40px/1 var(--uk-font-mono); letter-spacing: 0.08em; }
#waveloop-dock .bookmark-row { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--uk-primary-dim); }

/* What the thing in the hand can do: bottom left, one row a control. */
#held-hud { position: fixed; left: 136px; bottom: 16px; z-index: 60; display: grid; gap: 4px; padding: 10px 12px; pointer-events: none; color: var(--uk-primary-hi); background: var(--uk-surface); border: 1px solid var(--uk-primary-dim); border-top-color: var(--uk-primary); font: 22px/1 var(--uk-font-brand); text-transform: uppercase; letter-spacing: 0.04em; }
#held-hud[hidden] { display: none; }
#world-talk { position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 60; padding: 6px 12px; pointer-events: none; color: #fff; background: #ff2d95; font: 22px/1 var(--uk-font-brand); text-transform: uppercase; letter-spacing: 0.06em; }
#world-talk[hidden] { display: none; }
/* backtick: a clean picture, every overlay kept but not drawn (`utils/clean-screen.ts`) */
body.clean #waveloop-dock, body.clean #world-hud, body.clean #world-cross, body.clean #world-hints, body.clean #held-hud, body.clean #world-where, body.clean #world-talk, body.clean #world-login, body.clean #target-review, body.clean #restyle-panel, body.clean #art-laser-mode, body.clean #touch-pad, body.clean #error-readout, body.clean .a-enter-vr, body.clean #choppa-mic { display: none !important; }
#held-hud div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; min-height: 24px; }
#held-hud kbd { min-width: 56px; box-sizing: border-box; padding: 1px 6px 3px; text-align: center; font: inherit; color: var(--uk-ground); background: var(--uk-primary); }
#held-hud kbd:empty { background: none; }
#held-hud div > span:first-child { display: flex; gap: 4px; }

/* the phone: a pad for the left thumb, use and take for the right (touch-pad.ts) */
#touch-pad { position: fixed; inset: 0; z-index: 55; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; font: 22px/1 var(--uk-font-brand); text-transform: uppercase; letter-spacing: 0.04em; }
#touch-pad[hidden] { display: none; }
#touch-pad .pad { position: absolute; left: 16px; bottom: 16px; width: 148px; height: 148px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); pointer-events: auto; touch-action: none; background: var(--uk-surface); border: 1px solid var(--uk-primary-dim); border-top-color: var(--uk-primary); opacity: 0.16; transition: opacity 0.4s; }
#touch-pad .pad:active, #touch-pad .pad.run { opacity: 0.4; transition-duration: 0.08s; }
#touch-pad .pad.run { border-color: var(--uk-primary-hi); }
#touch-pad .arrow { display: flex; align-items: center; justify-content: center; color: var(--uk-primary); font-size: 18px; }
#touch-pad .arrow.KeyW { grid-area: 1 / 2; } #touch-pad .arrow.KeyA { grid-area: 2 / 1; } #touch-pad .arrow.KeyD { grid-area: 2 / 3; } #touch-pad .arrow.KeyS { grid-area: 3 / 2; }
#touch-pad .arrow.down { color: var(--uk-ground); background: var(--uk-primary-hi); }
#touch-pad .hands { position: absolute; right: 16px; bottom: 16px; display: grid; grid-template-columns: auto auto; align-items: end; gap: 10px; pointer-events: auto; touch-action: none; }
#touch-pad .act { display: flex; align-items: center; justify-content: center; color: var(--uk-primary); background: var(--uk-surface); border: 1px solid var(--uk-primary-dim); border-top-color: var(--uk-primary); opacity: 0.16; transition: opacity 0.4s; }
#touch-pad .act.lit { opacity: 0.3; }
#touch-pad .act.down, #touch-pad .act:active { opacity: 0.45; transition-duration: 0.08s; }
#touch-pad .act.take { width: 72px; height: 72px; margin-bottom: 44px; }
#touch-pad .act.use { width: 96px; height: 96px; }
#touch-pad .act.lit { color: var(--uk-ground); background: var(--uk-primary); }
#touch-pad .act.down { color: var(--uk-ground); background: var(--uk-primary-hi); }
#touch-pad .act.reach { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 64px; height: 44px; pointer-events: auto; touch-action: none; }
#phone-reach { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1; pointer-events: none; }
body.touch .a-enter-vr { left: auto !important; right: 16px !important; top: 16px !important; bottom: auto !important; }
body.touch .a-enter-vr-button { transform: scale(0.7); transform-origin: top right; opacity: 0.2 !important; }
body.touch #held-hud { left: 50%; bottom: 16px; transform: translateX(-50%); pointer-events: auto; font-size: 20px; opacity: 0.22; transition: opacity 0.4s; }
body.touch #held-hud:active { opacity: 0.45; transition-duration: 0.08s; }
body.touch #held-hud kbd[data-key] { min-width: 40px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; touch-action: none; }
body.touch #art-laser-mode { bottom: 180px; }

/* turning a gallery picture: the kit's panel, square, a lit top edge, labels only */
#world-hud { position: fixed; top: 16px; right: 16px; z-index: 110; box-sizing: border-box; width: min(260px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 0 12px 10px; color: var(--uk-text); background: var(--uk-surface); border: 1px solid var(--uk-primary-dim); border-top-color: var(--uk-primary); font: 13px/1.35 var(--uk-font-body); scrollbar-width: thin; }
#world-hud[hidden] { display: none; }
#world-hud [data-who] { display: flex; align-items: center; height: 36px; overflow: hidden; color: var(--uk-primary-hi); font: 20px/1 var(--uk-font-brand); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
#world-hud [data-who]:empty { display: none; }
#world-hud dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; }
#world-hud dl:empty { display: none; }
#world-hud nav { display: flex; flex-wrap: wrap; padding-top: 10px; }
#world-hud nav:empty { display: none; }
#world-hud nav button { box-sizing: border-box; min-height: var(--uk-row-h); margin: 4px 4px 0 0; padding: 0 10px; border: 0; border-radius: 0; background: var(--uk-primary); color: var(--uk-ground); font: 11px/1 var(--uk-font-mono); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
#world-hud nav button:hover { background: var(--uk-primary-top); }
#world-hud dt { color: var(--uk-muted); font: 11px/22px var(--uk-font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
#world-hud dd { margin: 0; color: var(--uk-primary-hi); font: 20px/22px var(--uk-font-brand); text-align: right; }
body.touch #world-hud { right: 96px; width: min(220px, calc(100vw - 112px)); opacity: 0.85; }
#restyle-panel { margin-top: 8px; border-top: 1px solid var(--uk-primary-dim); }
#restyle-panel header { display: flex; align-items: center; height: 30px; color: var(--uk-muted); font: 11px/1 var(--uk-font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
#restyle-panel header [data-close] { margin: 0 0 0 auto; min-height: 0; height: 26px; padding: 0 8px; background: none; color: var(--uk-muted); font: 18px/1 var(--uk-font-mono); }
#restyle-panel nav { display: flex; flex-wrap: wrap; padding: 4px 0 6px; }
#restyle-panel nav:empty { display: none; }
#restyle-panel button { box-sizing: border-box; min-height: 28px; margin: 4px 4px 0 0; padding: 0 8px; border: 0; border-radius: 0; background: var(--uk-primary); color: var(--uk-ground); font: 11px/1 var(--uk-font-mono); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
#restyle-panel button:hover { background: var(--uk-primary-top); }
#restyle-panel button:disabled { background: var(--uk-primary-dim); color: var(--uk-muted); cursor: default; }
#restyle-panel ol { display: flex; flex-wrap: wrap; margin: 0; padding: 4px 0; list-style: none; border-top: 1px solid var(--uk-primary-dim); }
#restyle-panel li { display: flex; }
#restyle-panel li button { background: var(--uk-ground); color: var(--uk-primary); border: 1px solid var(--uk-primary-dim); }
#restyle-panel li.on button:first-child { background: var(--uk-primary-hi); color: var(--uk-ground); }
#restyle-panel [data-status] { min-height: 1.3em; margin: 4px 0 0; color: var(--uk-primary-hi); font: 11px/1.3 var(--uk-font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
#world-where { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; padding: 4px 10px; pointer-events: none; white-space: nowrap; color: var(--uk-primary-hi); background: var(--uk-surface); border: 1px solid var(--uk-primary-dim); border-top-color: var(--uk-primary); font: 12px/1.4 var(--uk-font-mono); }
#world-where[hidden] { display: none; }
body.touch #world-where { display: none; }