html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #101014; }
canvas { display: block; }

body {
    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #e6e6ea;
}

#hud {
    position: fixed;
    top: 12px;
    left: 286px;
    z-index: 10;
    padding: 10px 12px;
    min-width: 260px;
    max-width: min(46ch, calc(100vw - 24px));
    background: rgba(10, 10, 14, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    backdrop-filter: blur(6px);
    pointer-events: none;
}
#hud .row { display: flex; gap: 10px; align-items: baseline; }
#hud .k { flex: 0 0 68px; color: #8b8b99; }
#hud .v { flex: 1 1 auto; word-break: break-all; }
#hud .v.ok   { color: #6ee7a8; }
#hud .v.warn { color: #f5c451; }
#hud .v.bad  { color: #ff7b72; }

#picker {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 232px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}
#picker a {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 6px;
    background: rgba(10, 10, 14, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    color: #b8b8c6;
    text-decoration: none;
    backdrop-filter: blur(6px);
}
#picker a:hover { border-color: rgba(255, 255, 255, 0.34); color: #e6e6ea; }
#picker a[aria-current] { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
#picker img, #picker .noimg {
    flex: 0 0 auto;
    width: 52px;
    height: 38px;
    object-fit: cover;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
}
#picker .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#picker .meta b { font-weight: 600; }
#picker .meta i { font-style: normal; color: #8b8b99; font-size: 11px; }
#picker .meta b, #picker .meta i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#error {
    position: fixed;
    inset: auto 12px 12px 12px;
    z-index: 20;
    max-height: 60vh;
    overflow: auto;
    padding: 14px 16px;
    background: rgba(40, 12, 12, 0.94);
    border: 1px solid #ff7b72;
    border-radius: 6px;
}
#error h1 { margin: 0 0 8px; font-size: 13px; color: #ff7b72; }
#error pre { margin: 0 0 8px; white-space: pre-wrap; word-break: break-all; color: #ffd9d6; }
#error .hint { margin: 0; color: #e6e6ea; white-space: pre-wrap; }

#hints {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 10;
    padding: 6px 10px;
    max-width: calc(100vw - 24px);
    background: rgba(10, 10, 14, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #8b8b99;
    pointer-events: none;
}

#panel {
    flex: 0 0 auto;
    width: 100%;
    overflow-y: auto;
    background: rgba(10, 10, 14, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    backdrop-filter: blur(6px);
}
#panel-toggle {
    width: 100%;
    padding: 7px 10px;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #e6e6ea;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
#panel-toggle::after { content: ' ▾'; color: #8b8b99; }
#panel-toggle[aria-expanded='false']::after { content: ' ▸'; }
#panel-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
/* `display: flex` outranks the UA sheet's [hidden] { display: none }, so the
   collapse toggle silently does nothing without this. */
#panel-body[hidden] { display: none; }
#panel label { display: block; color: #d0d0da; cursor: pointer; }
#panel label.unavailable { opacity: 0.45; cursor: default; }
#panel label small { display: block; margin: 1px 0 0 20px; color: #7c7c8a; font-size: 10px; line-height: 1.35; }
#panel label.row { display: flex; align-items: center; gap: 8px; }
#panel label.row input[type='range'] { flex: 1 1 auto; min-width: 0; }
#panel label.row span { flex: 0 0 46px; color: #8b8b99; text-align: right; }
#panel select { background: #1a1a22; color: #e6e6ea; border: 1px solid rgba(255,255,255,0.18); border-radius: 4px; font: inherit; padding: 2px 4px; }
#panel .buttons { display: flex; gap: 6px; }
#panel .buttons button {
    flex: 1 1 auto;
    padding: 5px 6px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    color: #d0d0da;
    font: inherit;
    cursor: pointer;
}
#panel .buttons button:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

#waypoints {
    flex: 0 0 auto;
    width: 100%;
    padding: 8px;
    background: rgba(10, 10, 14, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    backdrop-filter: blur(6px);
}
#waypoints h2 { margin: 0 0 6px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #7c7c8a; font-weight: 600; }
#waypoints button {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    margin-bottom: 3px;
    padding: 4px;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #b8b8c6;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
#waypoints button:hover { background: rgba(255, 255, 255, 0.08); color: #e6e6ea; }
#waypoints button[aria-current] { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
#waypoints button img, #waypoints button .noimg {
    flex: 0 0 auto;
    width: 54px;
    height: 30px;
    object-fit: cover;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.07);
}
#waypoints button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#left-rail {
    overflow-y: auto;
    scrollbar-width: thin;
    position: fixed;
    top: 12px;
    left: 12px;
    bottom: 40px;
    z-index: 10;
    width: 258px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

canvas.measuring { cursor: crosshair; }

#measure-labels { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.measure-label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px 6px;
    background: rgba(10, 10, 14, 0.86);
    border: 1px solid #6ee7a8;
    border-radius: 4px;
    color: #6ee7a8;
    white-space: nowrap;
}
#panel .buttons button.active {
    background: #6ee7a8;
    border-color: #6ee7a8;
    color: #0a0a0e;
}

/* --- narrow screens -------------------------------------------------------
   The 3D renders fine on a phone; it is the chrome that doesn't fit. The HUD
   is diagnostics, and the keyboard hints are meaningless without a keyboard,
   so both go. The rails shrink and the display panel starts collapsed. */
@media (max-width: 640px) {
    #hud,
    #hints { display: none; }

    #left-rail {
        width: 44vw;
        max-width: 190px;
        bottom: 12px;
    }

    #picker {
        width: 44vw;
        max-width: 170px;
    }
    #picker img, #picker .noimg { width: 38px; height: 28px; }
    #picker .meta i { display: none; }

    #waypoints button { padding: 7px; }

    #panel-body { gap: 10px; }
    /* Touch targets, not mouse targets. */
    #panel .buttons button { padding: 9px 6px; }
    #panel input[type='range'] { height: 22px; }

    #error { font-size: 11px; }
}

#loading {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    background: #101014;
    overflow: hidden;
    transition: opacity 0.6s ease;
}
#loading.done { opacity: 0; pointer-events: none; }
#loading img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(18px) saturate(0.7) brightness(0.45);
    transform: scale(1.1);
}
#loading .box {
    position: relative;
    width: min(360px, calc(100vw - 48px));
    padding: 18px 20px;
    background: rgba(10, 10, 14, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    text-align: center;
}
#loading h1 { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #e6e6ea; }
#loading .bar { height: 4px; background: rgba(255, 255, 255, 0.14); border-radius: 2px; overflow: hidden; }
#loading .bar i { display: block; width: 0; height: 100%; background: #6ee7a8; transition: width 0.25s ease; }
#loading p { margin: 10px 0 0; color: #8b8b99; }

/* On-screen movement, shown only while walking on a touch device. */
#dpad {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 12;
    display: grid;
    grid-template-areas: '. up rise' 'left down right';
    gap: 8px;
    touch-action: none;
}
#dpad button {
    width: 52px;
    height: 52px;
    background: rgba(10, 10, 14, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #e6e6ea;
    font-size: 19px;
    line-height: 1;
    backdrop-filter: blur(6px);
    -webkit-user-select: none;
    user-select: none;
}
#dpad button.held { background: #6ee7a8; border-color: #6ee7a8; color: #0a0a0e; }
#dpad .up { grid-area: up; }
#dpad .down { grid-area: down; }
#dpad .left { grid-area: left; }
#dpad .right { grid-area: right; }
#dpad .rise { grid-area: rise; }
#dpad[hidden] { display: none; }

#capture-note {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    padding: 8px 14px;
    background: rgba(10, 10, 14, 0.9);
    border: 1px solid #6ee7a8;
    border-radius: 6px;
    color: #6ee7a8;
}

#tags { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    background: rgba(10, 10, 14, 0.85);
    border: 1.5px solid #38bdf8;
    border-radius: 50%;
    color: #38bdf8;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    pointer-events: auto;
}
.tag:hover { background: #38bdf8; color: #0a0a0e; }

#tag-card {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 232px;
    padding: 10px 12px;
    background: rgba(10, 10, 14, 0.92);
    border: 1px solid #38bdf8;
    border-radius: 6px;
    backdrop-filter: blur(6px);
}
#tag-card[hidden] { display: none; }
#tag-card h3 { margin: 0 0 5px; font-size: 12px; color: #fff; padding-right: 16px; }
#tag-card p { margin: 0; color: #b8b8c6; line-height: 1.45; }
#tag-card .close {
    position: absolute;
    top: 5px;
    right: 7px;
    background: none;
    border: 0;
    color: #8b8b99;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}