/* ============ base ============ */

/* Long-press behaviour, mainly for iOS/iPadOS Safari: a press-and-hold on the
 * canvas or on any control otherwise raises the text-selection highlight and
 * the callout menu — very visible on the hold-to-ascend buttons, where every
 * press is a long press. Nothing in this UI is text meant to be selected, so
 * selection and the callout are off everywhere; the settings panel re-enables
 * them for real inputs below. */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: #0b0d12;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    color: #e6edf3;
    overscroll-behavior: none;
}

/* text fields still need selection to be usable */
input[type="text"], input[type="number"], input[type="search"], textarea {
    -webkit-user-select: text;
    user-select: text;
}

#viewport,
#viewport canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

/* buttons: no double-tap zoom, no selection flash while held */
button, .icon-btn, .tool-btn, select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* ============ loading screen ============ */
#loader {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(1000px 600px at 70% 15%, rgba(56, 189, 248, .10), transparent 60%),
        radial-gradient(800px 500px at 25% 85%, rgba(129, 140, 248, .10), transparent 60%),
        #0b0d12;
    transition: opacity .6s ease;
}

#loader.hidden { opacity: 0; pointer-events: none; }

.loader-inner {
    width: min(420px, 86vw);
    text-align: center;
}

.loader-logo { animation: bob 3.2s ease-in-out infinite; }

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.loader-title {
    margin: 14px 0 4px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: .16em;
    background: linear-gradient(90deg, #7dd3fc, #a5b4fc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.loader-sub {
    margin: 0 0 26px;
    font-size: 13px;
    color: #8b98a9;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loader-bar-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.loader-bar {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(90deg, #38bdf8, #818cf8);
    transition: width .25s ease;
    position: relative;
}

.loader-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    animation: shine 1.4s linear infinite;
}

@keyframes shine {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

.loader-row {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: #8b98a9;
    font-variant-numeric: tabular-nums;
}

.loader-tip {
    margin-top: 40px;
    font-size: 12px;
    color: #5c6878;
}

.loader-error { margin-top: 26px; }

.loader-error p { color: #fda4af; font-size: 13px; }

.loader-error button {
    margin-top: 8px;
    padding: 8px 26px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: #e6edf3;
    font-size: 13px;
    cursor: pointer;
}

.loader-error button:hover { background: rgba(255, 255, 255, .12); }

/* ============ HUD shared ============ */
#hud { transition: opacity .5s ease; }
#hud.hud-hidden { opacity: 0; pointer-events: none; }

.chip {
    position: fixed;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 10px;
    background: rgba(15, 19, 28, .62);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 13px;
    user-select: none;
}

.chip-top-left { top: max(12px, env(safe-area-inset-top)); left: 12px; font-weight: 600; letter-spacing: .02em; }
.chip-top-right { top: max(12px, env(safe-area-inset-top)); right: 12px; padding: 4px 6px 4px 12px; }

/* with the FPS meter hidden the chip is just the fullscreen button */
.chip-top-right.no-fps { padding: 4px 6px; }

#fps-meter {
    font-variant-numeric: tabular-nums;
    color: #9fb1c4;
    font-size: 12px;
    min-width: 46px;
    text-align: right;
}

#hint {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: max(14px, env(safe-area-inset-top));
    z-index: 15;
    margin: 0;
    padding: 6px 14px;
    font-size: 12px;
    color: #aab7c7;
    background: rgba(15, 19, 28, .5);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 1.2s ease;
    pointer-events: none;
    white-space: nowrap;
    max-width: 92vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

#hint.faded { opacity: 0; }
#hint b { color: #dbe6f1; font-weight: 600; }

/* ============ buttons ============ */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #cfdae6;
    cursor: pointer;
}

.icon-btn:hover { background: rgba(255, 255, 255, .1); }

.icon-btn.flash { color: #7dd3fc; background: rgba(125, 211, 252, .18); }

.icon-btn svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-btn.round {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(15, 19, 28, .6);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.icon-btn.round:active { background: rgba(125, 211, 252, .25); }

/* ============ toolbar ============ */
#toolbar {
    position: fixed;
    z-index: 25;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
    display: flex;
    gap: 4px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(15, 19, 28, .68);
    border: 1px solid rgba(255, 255, 255, .09);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}

.tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 64px;
    padding: 7px 10px 6px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #b9c6d4;
    cursor: pointer;
    font-size: 10.5px;
    letter-spacing: .03em;
}

.tool-btn svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tool-btn svg[fill="none"], .tool-btn svg .nofill { fill: none; }

.tool-btn:hover { background: rgba(255, 255, 255, .08); color: #e8f0f8; }

.tool-btn.active {
    background: linear-gradient(180deg, rgba(56, 189, 248, .22), rgba(129, 140, 248, .18));
    color: #7dd3fc;
}

.tool-label { pointer-events: none; }

/* ============ popover panels (settings, scenes) ============ */
#settings, #scenes {
    position: fixed;
    z-index: 26;
    width: min(330px, 92vw);
    padding: 14px 16px 10px;
    border-radius: 14px;
    background: rgba(15, 19, 28, .82);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
}

/* hung above the toolbar, over the button that opened it */
#settings, #scenes.anchor-toolbar {
    left: 50%;
    transform: translateX(-50%);
    bottom: max(96px, calc(env(safe-area-inset-bottom) + 88px));
}

/* hung under the top-left chip, which is itself the trigger */
#scenes.anchor-topleft {
    left: 12px;
    top: calc(max(12px, env(safe-area-inset-top)) + 42px);
    width: min(300px, 78vw);
}

#settings h2, #scenes h2 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #9fb1c4;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.set-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 13px;
}

.set-row>span { flex: 0 0 96px; color: #c3cfdc; }

.set-row input[type="range"] { flex: 1; accent-color: #38bdf8; min-width: 0; }

.set-row output {
    flex: 0 0 62px;
    text-align: right;
    font-size: 12px;
    color: #8b98a9;
    font-variant-numeric: tabular-nums;
}

.set-row select {
    flex: 1;
    background: rgba(255, 255, 255, .07);
    color: #e6edf3;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    padding: 5px 8px;
    font-size: 12.5px;
    outline: none;
}

.set-row select option { background: #151a24; }

.set-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #38bdf8;
}

/* ---- render quality group ---- */
#settings, #scenes { max-height: min(76vh, 720px); overflow-y: auto; overscroll-behavior: contain; }

.set-head {
    margin: 14px 0 2px;
    padding-top: 11px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: 11px;
    font-weight: 600;
    color: #9fb1c4;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.set-row select:disabled { opacity: .5; cursor: default; }

/* ---- full-width action button (Copy link) ---- */
.set-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    background: rgba(255, 255, 255, .07);
    color: #dbe6f1;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.set-btn:hover { background: rgba(255, 255, 255, .13); }
.set-btn:active { background: rgba(125, 211, 252, .2); }

/* held for a moment after a successful copy */
.set-btn.ok {
    background: rgba(56, 189, 248, .18);
    border-color: rgba(125, 211, 252, .45);
    color: #7dd3fc;
}

/* state when collision is disabled (noclip / pass through walls) */
.set-btn.collision-off {
    background: rgba(245, 158, 11, .16);
    border-color: rgba(251, 191, 36, .4);
    color: #fde68a;
}

.set-btn svg {
    width: 15px;
    height: 15px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============ scene archive ============ */
/* The top-left chip is the picker in App2B: the scene name is the trigger. */
.scene-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 42vw;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.scene-trigger #scene-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scene-caret {
    flex: none;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #8b9bb0;
    transition: transform .15s ease, color .15s ease;
}

.scene-trigger:hover .scene-caret { color: #dbe6f1; }

.scene-trigger.active .scene-caret {
    transform: rotate(180deg);
    color: #7dd3fc;
}

#scene-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#scene-list:empty { display: none; }

.scene-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    color: #dbe6f1;
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.scene-item:hover { background: rgba(255, 255, 255, .11); }
.scene-item:active { background: rgba(125, 211, 252, .2); }

/* the scene this page is already showing */
.scene-item.active {
    background: rgba(56, 189, 248, .16);
    border-color: rgba(125, 211, 252, .4);
    color: #7dd3fc;
    cursor: default;
}

.scene-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scene-tag {
    flex: none;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7dd3fc;
}

/* "Reading the archive…", "no scenes yet", or why the listing failed */
.scene-status {
    margin: 8px 0 4px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #7f8b9b;
}

.scene-status:empty { display: none; }
.scene-status.error { color: #fca5a5; }

/* SH streaming status under the quality selector */
.set-hint {
    margin: 2px 0 4px;
    min-height: 15px;
    font-size: 11px;
    color: #7f8b9b;
    font-variant-numeric: tabular-nums;
}

/* ============ joystick & vertical buttons (touch) ============ */
#joystick {
    position: fixed;
    z-index: 22;
    left: 26px;
    bottom: max(104px, calc(env(safe-area-inset-bottom) + 96px));
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: rgba(15, 19, 28, .38);
    border: 1.5px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    touch-action: none;
}

#joystick-thumb {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(125, 211, 252, .35);
    border: 1.5px solid rgba(125, 211, 252, .55);
    transform: translate(-50%, -50%);
    transition: transform .08s linear;
}

#updown {
    position: fixed;
    z-index: 22;
    right: 22px;
    bottom: max(112px, calc(env(safe-area-inset-bottom) + 104px));
    display: none;
    flex-direction: column;
    gap: 12px;
    touch-action: none;
}

/* held down for as long as you want to climb — no gestures of any kind */
#updown .icon-btn { touch-action: none; }

/* ============ toast ============ */
#toast {
    position: fixed;
    z-index: 30;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(92px, calc(env(safe-area-inset-bottom) + 84px));
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(15, 19, 28, .88);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 12.5px;
    color: #dbe6f1;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

body.touch-ui #joystick { display: block; }
body.touch-ui #updown.fly { display: flex; }
body.touch-ui #hint { font-size: 11px; }

/* compact toolbar on narrow screens */
@media (max-width: 560px) {
    .tool-btn { min-width: 50px; padding: 7px 6px 5px; }
    .tool-label { font-size: 9.5px; }
    .chip-top-left span { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #hint { display: none; }
}

/* six toolbar buttons on the narrowest phones */
@media (max-width: 370px) {
    #toolbar { gap: 2px; padding: 5px; }
    .tool-btn { min-width: 46px; padding: 7px 4px 5px; }
}