/* BSV Metropolis — a city that the chain dreams; deep-indigo night-sky chrome. */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0b1026;
    font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    color: #e8c547;
    -webkit-user-select: none;
    user-select: none;
    /* the canvases are pointer-events:none, so touches land on the body:
       kill ALL native touch gestures here (pinch page-zoom fought the
       per-frame relayout self-heal — jitter + runaway zoom) and let the
       in-app camera own pinch/pan. Mirrors the touch-action:none every
       other viz sets on its canvas. */
    touch-action: none;
    overscroll-behavior: none;
}

/* the city canvases sit in an overscanned stage so idle camera drift never
   shows an edge (the demo's PAD trick) */
#stage { position: fixed; inset: 0; pointer-events: none; will-change: transform; transform-origin: 0 0; }
#stage canvas { position: absolute; left: 0; top: 0; pointer-events: none; }

.panel {
    background: rgba(9, 12, 28, 0.84);
    border: 1px solid #3d3d5c;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.5;
}

.hud { position: fixed; z-index: 10; }

#hud-title { top: 10px; left: 10px; max-width: 400px; }

.hud-title-row { display: flex; align-items: center; gap: 8px; }

#hud-toggle {
    border: none;
    background: none;
    color: #e8c547;
    font-size: 11px;
    padding: 0 2px;
    margin-left: auto;
    cursor: pointer;
}
#hud-toggle:hover { color: #fff; background: none; }
#hud-title.collapsed .hud-sub,
#hud-title.collapsed .hud-links { display: none; }

.hud-title {
    color: #fff;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 11px;
    white-space: nowrap;
    text-shadow: 0 0 12px rgba(127, 234, 210, 0.5);
}

.hud-sub { color: #e8c547; opacity: 0.85; margin-top: 2px; }
.hud-sub b { color: #fff; }
#st-clock { color: #fff; font-weight: bold; letter-spacing: 1px; }

.hud-subtitle {
    color: #fff;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 4px;
    font-size: 10px;
}

.hud-links { margin-top: 5px; display: flex; gap: 12px; }
.hud-links a, a { color: #e8c547; text-decoration: none; }
.hud-links a:hover, a:hover { color: #fff; text-decoration: underline; }

.badge {
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 1px 6px;
    border: 1px solid #55ff55;
    color: #55ff55;
}
.badge.paused { border-color: #ffff55; color: #ffff55; }
.badge.demo { border-color: #e8c547; color: #e8c547; }
.badge.offline { border-color: #ff5555; color: #ff5555; }

/* top-right district legend */
#legend { top: 10px; right: 10px; min-width: 168px; }
.leg-row { display: flex; align-items: center; gap: 6px; color: #cfd2e8; font-size: 10px; }
.leg-dot { width: 7px; height: 7px; flex: none; }
.leg-fam { color: #8f95b8; margin-left: 4px; font-size: 9px; }
.leg-n { margin-left: auto; color: #fff; padding-left: 8px; }

#detail-panel { left: 10px; bottom: 10px; min-width: 200px; max-width: 310px; display: none; }
.hud-subtitle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hud-subtitle-row .hud-subtitle { margin-bottom: 0; }
#detail-unpin { display: none; padding: 1px 6px; font-size: 11px; line-height: 1.3; }
.k-cat { font-weight: bold; }
.k-batch { color: #fff; font-size: 10px; opacity: 0.8; }
.k-txid { display: block; margin: 2px 0; }
.k-row { color: #fff; opacity: 0.82; font-size: 10px; word-break: break-word; }
.k-name { color: #7fead2; font-weight: bold; }

#hud-hint {
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

button {
    background: #000;
    border: 1px solid #e8c547;
    color: #e8c547;
    font-family: inherit;
    font-size: 10px;
    padding: 3px 8px;
    cursor: pointer;
}
button:hover { background: #e8c547; color: #000; }
button.active { background: #e8c547; color: #000; }

/* top-center history navigator — fixed flex bases so the ◀ ▶ arrows never
   shift between blocks (the mandala's rule) */
#gallery-nav {
    display: none;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    max-width: 96vw;
}
#gallery-nav button {
    font-size: 13px;
    line-height: 1;
    padding: 5px 9px;
    flex: 0 0 auto;
}
#gallery-nav button:disabled { opacity: 0.3; cursor: default; background: #000; color: #e8c547; }
#gal-info { flex: 0 0 250px; width: 250px; text-align: center; overflow: hidden; }
#gal-title { color: #fff; font-weight: bold; letter-spacing: 1px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gal-sub { color: #e8c547; opacity: 0.85; font-size: 10px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gal-input {
    flex: 0 0 78px;
    width: 78px;
    background: #000;
    border: 1px solid #3d3d5c;
    color: #e8c547;
    font-family: inherit;
    font-size: 11px;
    padding: 4px 6px;
    -moz-appearance: textfield;
    appearance: textfield;
}
#gal-input::-webkit-outer-spin-button,
#gal-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#gal-input::placeholder { color: #55557a; }
#gal-exit { margin-left: 2px; }

@media (max-width: 700px) {
    #gal-info { flex-basis: 120px; width: 120px; }
    #gal-input { flex-basis: 58px; width: 58px; }
    #gallery-nav { gap: 5px; }
    #gallery-nav button { padding: 5px 7px; }
}

/* hover plaque — the demo's building record, follows the pointer */
#plaque {
    position: fixed;
    z-index: 12;
    pointer-events: none;
    min-width: 170px;
    max-width: 300px;
    background: rgba(11, 16, 38, 0.86);
    border: 1px solid #3d3d5c;
    border-left: 2px solid #7fead2;
    padding: 8px 12px;
}
#plaque[hidden] { display: none; }
#plaque .pname { font-size: 12px; font-weight: bold; letter-spacing: 0.5px; color: #fff; }
#plaque .pmeta { margin-top: 3px; font-size: 9.5px; letter-spacing: 1px; color: #8f95b8; }

#banner {
    position: fixed;
    top: 11%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: none;
    text-align: center;
    background: rgba(9, 12, 28, 0.88);
    border: 1px solid #7fead2;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 12px 20px;
    text-shadow: 0 0 10px #7fead2;
    max-width: 90vw;
}
#banner div + div { color: #e8c547; font-size: 11px; margin-top: 4px; text-shadow: none; }

@media (max-width: 700px) {
    #hud-title { max-width: 64vw; }
    #legend { display: none; }
    .btn-label { display: none; }
    #mute-btn, #pause-btn, #save-btn, #hist-btn {
        font-size: 16px;
        line-height: 1;
        padding: 5px 9px;
    }
    #hud-hint { bottom: 8px; right: 8px; gap: 8px; background: none; border: none; padding: 0; }
    #detail-panel { max-width: calc(100vw - 130px); }
}

/* embed/kiosk mode (OPL-2832): /console's monitor windows frame this page
   with ?embed=1 — hide all chrome, the scene is the whole feed */
body.embed .panel { display: none !important; }