*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Motion of the Knobs/XY indicator; the toggle switch slides with the same values */
:root {
    --ctrl-move: 0.2s cubic-bezier(.3, .7, .3, 1);
}

body {
    background: #0d0d0f;
    color: #e8e4d8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.app {
    /* Width: the window minus body padding, up to 1000px. Height: the window,
       up to 1080px; the stage takes whatever the other rows leave (see .stage). */
    width: 100%;
    max-width: 1000px;
    height: 100%;
    max-height: 1080px;
    display: flex;
    flex-direction: column;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    background: #0d0d0f;
}

/* ── Topbar ── */
.topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.07);
}

.logo {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.logo span {
    color: #8b7355;
}

.logo .brand-mark,
.mob-logo .brand-mark {
    display: block;
    width: auto;
    transform-origin: 51% 47%;
}

.logo .brand-mark {
    height: 40px;
}

@keyframes markSpin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    60% {
        transform: rotate(310deg) scale(1.08);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

.brand-mark.spin {
    animation: markSpin 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.status-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #555;
    background: rgba(255, 255, 255, 0.04);
    border: 0.5px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    padding: 4px 12px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #444;
    transition: background 0.4s;
    flex-shrink: 0;
}

.status-dot.loading {
    background: #c4a97a;
    animation: pulse 1s infinite;
}

.status-dot.ready {
    background: #4a9977;
    animation: pulse 2s infinite;
}

.status-dot.error {
    background: #c45050;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.3
    }
}

/* ── Main grid ── */
.main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.stage {
    flex: 1 1 0;
    min-height: 0;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

/* Scene backgrounds — two-layer crossfade */
.scene-bg,
.scene-bg-next {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.scene-bg {
    background-image: url('img/tavern.webp');
    transition: filter 0.15s linear;
}

.scene-bg-next {
    opacity: 0;
}

.scene-bg::after,
.scene-bg-next::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.56);
}

.stage-energy {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.stage>*:not(.scene-bg):not(.scene-bg-next):not(.flavor-overlay):not(.session-panel):not(.stage-energy) {
    position: relative;
    z-index: 1;
}

/* Scene row: three columns so the Knobs/XY switch sits on the stage's centre
   line. Scene text left, switch centre, Browse + info right. */
.scene-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    column-gap: 8px;
}

.scene-cat {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #c4a97a;
    margin-bottom: 2px;
}

.scene-name {
    font-size: 20px;
    font-weight: 500;
}

.scene-sub {
    font-size: 12px;
    color: #555;
    margin-top: 3px;
}

/* Browse location button: one continuous pill. The artwork
   (img/browse_locations_bg.webp, lazy-loaded by LocationBrowser.loadBrowseArt) covers
   the whole button; a left-to-right dark gradient keeps the label legible. Until the
   image has loaded the gradient sits on the panel colour, so the button is complete
   without it. The whole button is the click target. */
.browse-btn {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 1 300px;         /* 300px, shrinking to 210px beside the switch on narrower windows */
    min-width: 210px;
    height: 46px;
    padding: 0 16px 0 20px;
    background: #17171b;
    border: 1px solid rgba(196, 169, 122, 0.55);
    border-radius: 23px;
    color: #f2ede0;
    cursor: pointer;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    outline: none;
    overflow: hidden;
    transition: border-color 0.2s;
    white-space: nowrap;
}

.browse-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(13, 13, 15, 0.92) 0%, rgba(13, 13, 15, 0.78) 48%, rgba(13, 13, 15, 0) 78%);
}

.browse-btn:not(:disabled):hover {
    border-color: #c4a97a;
}

.browse-btn:focus-visible {
    outline: 2px solid #c4a97a;
    outline-offset: 3px;
}

.browse-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.browse-btn-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, filter 0.2s;
}

.browse-btn.has-img .browse-btn-img {
    opacity: 1;
}

.browse-btn:not(:disabled):hover .browse-btn-img {
    filter: brightness(1.15);
}

.browse-btn-icon,
.browse-btn-text {
    position: relative;
    z-index: 2;
}

.browse-btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #c4a97a;
}

/* Below 820px the pill (210px at its narrowest) no longer fits beside the centred
   Knobs/XY switch: plain text button, no icon or artwork, same 46px height so it
   still lines up with the switch. */
@media (max-width: 819px) {
    .scene-row .browse-btn {
        flex: 0 0 auto;
        min-width: 0;
        padding: 0 18px;
        font-size: 14px;
        background: rgba(255, 255, 255, 0.05);
        border: 0.5px solid rgba(255, 255, 255, 0.14);
    }

    .scene-row .browse-btn:not(:disabled):hover {
        background: rgba(255, 255, 255, 0.09);
        border-color: rgba(255, 255, 255, 0.22);
    }

    .scene-row .browse-btn::before,
    .scene-row .browse-btn-img,
    .scene-row .browse-btn-icon {
        display: none;
    }
}

/* Narrowest desktop windows (the mobile layout takes over at 640px): tighten the
   switch and the button so the three columns keep air between them. */
@media (max-width: 719px) {
    .scene-row .browse-btn {
        padding: 0 12px;
    }

    .ctrl-toggle .ctrl-toggle-opt {
        padding: 0 9px;
        font-size: 12px;
    }
}

/* Viz */
.viz {
    display: none;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
    border: 0.5px solid rgba(255, 255, 255, .05);
    align-items: flex-end;
    padding: 0 8px;
    gap: 2px;
    overflow: hidden;
}

.vbar {
    flex: 1;
    border-radius: 1px;
    background: rgba(139, 115, 85, .35);
    min-height: 2px;
    transform-origin: bottom;
    will-change: transform;
}

/* ── Controls area ── */
/* The stage's slot for the control panel. The panel has a fixed design size
   (set from PANEL_W/PANEL_H in app.js) and is scaled uniformly to fit this box;
   it is absolutely positioned so its size never feeds back into the stage. */
.controls-area {
    flex: 1 1 0;
    min-height: 0;
}

.control-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Vertical faders. The control panel centres every column on the dials'
   centre line: only the fader holder is in flow, so its centre sits on that
   line; the value, label and Drift pill hang above/below it. */
.faders-col {
    position: relative;
    display: flex;
    justify-content: center;
}

.vfader-val {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    font-size: 9px;
    color: #444;
    font-variant-numeric: tabular-nums;
    text-align: center;
    padding-bottom: 4px;
}

.vfader-track {
    position: relative;
    justify-self: center;
    cursor: pointer;
    /* Set from the theme's art aspect by ControlsModule (never stretched) */
    width: 67px;
    height: 294px;
}

.vfader-bed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
}

.vfader-thumb {
    position: absolute;
    left: 50%;
    /* Size and `top` (the handle's centre) are set by ControlsModule */
    width: 121px;
    height: 40px;
    transform: translate(-50%, -50%);
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

/* Pre-blurred shadow image between the holder and the handle. It replaces a CSS
   drop-shadow filter, which was re-rendered on every fader move. Size and `top`
   (centred on the handle) are set by ControlsModule; the offset is baked in. */
.vfader-shadow {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
}

.vfader-label {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #666;
    text-align: center;
    padding-top: 5px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

/* Fader column */
.faders-inertia-group {
    position: relative;
    flex-shrink: 0;
    width: 124px;
}

/* Knobs */
.knobs-pair {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
}

.knob-wrap {
    /* Only the dial is in flow: its centre is the panel's centre line */
    position: relative;
}

.k-state {
    font-size: 18px;
    color: #c4a97a;
    font-weight: 600;
    text-align: center;
    min-height: 18px;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.55);
    padding: 2px 10px;
    border-radius: 8px;
    position: absolute;
    bottom: 100%;
    left: 50%;
    translate: -50% 0;
    margin-bottom: 3px;
}

/* Two-layer dial: static ring + rotating knob, both filling the dial box.
   Drag/wheel/MIDI input lands on .dial; the layers never take pointer events. */
.dial {
    position: relative;
    flex-shrink: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity .25s ease;
}

.knobs-pair.dials-loading .dial {
    opacity: 0;
}

.dial-ring,
.dial-knob {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.dial-knob {
    transform-origin: 50% 50%;
    will-change: transform;
}

.knob-arc {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.k-name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #e8e4d8;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 8px;
    border-radius: 6px;
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    white-space: nowrap;
    margin-top: 4px;
}

/* Toggles: Music, Voices, Drift. Only the images are in flow (labels hang
   below), so the middle toggle (Voices) sits on the dials' centre line. */
.side-toggles {
    --sw-w: 104px;                   /* toggle art width, all themes */
    --toggle-off-opacity: 0.9;       /* an OFF toggle, any theme; multiplies with .stoggle.inactive below */
    display: flex;
    flex-direction: column;
    gap: 29px;
    flex-shrink: 0;
    width: 116px;
    align-items: center;
}

.stoggle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.stoggle-art {
    position: relative;
    width: var(--sw-w);
    transition: opacity 0.15s;
}

.stoggle.inactive .stoggle-art {
    opacity: var(--toggle-off-opacity);
}

.stoggle-img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.15s;
}

.stoggle.inactive .stoggle-img {
    opacity: 0.85;
}

/* Sliding switch (Modern / Sci-Fi; .is-switch is set from the theme's art). The
   holder and the button each have an on and an off image; the on image fades in
   over the off one, so the swap never pops. The button slides with translateX
   only: its centre sits at --sw-x-off / --sw-x-on of the holder width. */
.sw {
    display: none;
    position: relative;
    width: 100%;
    aspect-ratio: var(--sw-aspect);
}

.side-toggles.is-switch .sw {
    display: block;
}

.side-toggles.is-switch .stoggle-img {
    display: none;
}

.sw-holder,
.sw-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.sw-holder-on,
.sw-face-on {
    opacity: 0;
    transition: opacity var(--ctrl-move);
}

.stoggle.active .sw-holder-on,
.stoggle.active .sw-face-on {
    opacity: 1;
}

.sw-btn {
    --sw-btn-d: calc(var(--sw-w) * var(--sw-dia));
    position: absolute;
    left: 0;
    top: calc((100% - var(--sw-btn-d)) / 2);
    width: var(--sw-btn-d);
    height: var(--sw-btn-d);
    transform: translateX(calc(var(--sw-w) * var(--sw-x-off) - var(--sw-btn-d) / 2));
    transition: transform var(--ctrl-move);
}

.stoggle.active .sw-btn {
    transform: translateX(calc(var(--sw-w) * var(--sw-x-on) - var(--sw-btn-d) / 2));
}

/* Theme swap: the switch appears in its current state, nothing moves */
.side-toggles.sw-instant .stoggle-art,
.side-toggles.sw-instant .sw * {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .side-toggles .stoggle-art,
    .side-toggles .sw-btn,
    .side-toggles .sw-holder-on,
    .side-toggles .sw-face-on {
        transition: none;
    }
}

.stoggle-lbl {
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    margin-top: 4px;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #666;
    text-align: center;
}

/* Hover tooltip (text in data-tip), to the left of the toggle. A short
   delay so it doesn't flash while the pointer passes by. */
.stoggle[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    translate: 0 -50%;
    z-index: 5;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(14, 13, 16, 0.92);
    border: 0.5px solid rgba(196, 169, 122, 0.35);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    color: #e8e4d8;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.stoggle[data-tip]:hover::after {
    opacity: 1;
    transition-delay: .35s;
}

/* The label keeps full strength when off; the toggle art shows the state */
.stoggle.active .stoggle-lbl,
.stoggle.inactive .stoggle-lbl {
    color: #c4a97a;
}

/* ── Scene Shortcuts ── */
.scene-shortcuts {
    display: flex;
    flex-direction: column;
    gap: 9px;
    position: relative;
    flex: 0 0 auto;
    background: #141416;
    border-top: 0.5px solid rgba(255, 255, 255, .06);
    padding: 14px 22px 16px;
}

.ss-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ss-title {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #888;
}

.ss-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 7px;
}

.scene-shortcuts .ss-slot-filled,
.scene-shortcuts .ss-slot-empty {
    aspect-ratio: auto;
    height: var(--ss-slot-h, 138px);   /* app.js sets it: 138px, or 64px in the compact row */
}

/* Compact row for short windows: name only, one line */
.scene-shortcuts.ss-compact .ss-slot-tags {
    display: none;
}

.scene-shortcuts.ss-compact .ss-slot-name {
    -webkit-line-clamp: 1;
}

.scene-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

/* XY / Knobs segmented toggle: two equal columns, so the 50% slider covers
   exactly the active option */
.ctrl-toggle {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 0.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 3px;
    height: 46px;           /* same top and height as the Browse button beside it */
    box-sizing: border-box;
}

.ctrl-toggle-opt {
    position: relative;
    z-index: 1;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0 20px;
    height: 100%;
    border-radius: 9px;
    text-indent: 0.12em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.18s;
}

.ctrl-toggle-opt:hover {
    color: #bbb;
}

.ctrl-toggle-opt.active {
    color: #1a1a1e;
}

.ctrl-toggle-slider {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 9px;
    background: #c4a97a;
    z-index: 0;
    transition: transform var(--ctrl-move);
}

.ctrl-toggle.xy .ctrl-toggle-slider {
    transform: translateX(100%);
}

.stage-info-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 0.5px solid rgba(255, 255, 255, 0.14);
    color: #aaa;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color .15s, border-color .15s;
}

.stage-info-btn:hover,
.stage-info-btn.active {
    color: #c4a97a;
    border-color: rgba(196, 169, 122, .5);
}

.flavor-overlay {
    position: absolute;
    right: 24px;
    top: 64px;
    z-index: 3;
    max-width: 300px;
    background: rgba(10, 9, 11, .82);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    border: 0.5px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 14px 16px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}

.flavor-overlay.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.session-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    width: min(280px, 70%);
    background: rgba(10, 9, 11, .9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-left: 0.5px solid rgba(255, 255, 255, .12);
    transform: translateX(101%);
    transition: transform .26s cubic-bezier(.2, .7, .2, 1);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.session-panel.open {
    transform: translateX(0);
}

.session-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.session-panel .s-title {
    display: block;
    color: #888;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
}

.session-panel-close {
    background: none;
    border: 0;
    color: #555;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
}

.session-panel-close:hover {
    color: #aaa;
}

/* Empty slot */
.ss-slot-empty {
    aspect-ratio: 1 / 0.82;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(255, 255, 255, .02);
    border: 0.5px dashed rgba(255, 255, 255, .1);
    border-radius: 10px;
    cursor: pointer;
    color: #666;
    font-family: inherit;
    font-size: 18px;
    transition: background .15s, border-color .15s, color .15s;
}

.ss-slot-empty:hover {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .2);
    color: #aaa;
}

.ss-slot-empty-label {
    font-size: 9px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #777;
}

/* Filled slot */
.ss-slot-filled {
    position: relative;
    aspect-ratio: 1 / 0.82;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 0.5px solid rgba(255, 255, 255, .1);
    transition: border-color .15s, transform .1s;
}

.ss-slot-filled:hover {
    border-color: rgba(196, 169, 122, .55);
}

.ss-slot-filled:active {
    transform: scale(0.97);
}

.ss-slot-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: saturate(0.75) brightness(0.65);
    transition: filter .2s;
}

.ss-slot-filled:hover .ss-slot-bg {
    filter: saturate(0.92) brightness(0.75);
}

.ss-slot-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.08) 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 7px 8px 7px;
}

.ss-slot-name {
    font-size: 13px;
    font-weight: 600;
    color: #f0ece0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.ss-slot-tags {
    display: flex;
    gap: 3px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.ss-slot-tag {
    font-size: 10px;
    color: rgba(220, 200, 160, 0.9);
    letter-spacing: .04em;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.ss-slot-tag+.ss-slot-tag::before {
    content: '·';
    margin-right: 3px;
}

/* Slot menu button + dropdown */
.ss-menu-btn {
    position: absolute;
    top: 4px;
    right: 5px;
    background: rgba(0, 0, 0, 0.55);
    border: 0.5px solid rgba(255, 255, 255, .14);
    border-radius: 5px;
    color: #aaa;
    font-size: 11px;
    line-height: 1;
    padding: 2px 5px;
    cursor: pointer;
    font-family: inherit;
    opacity: 0;
    transition: opacity .15s, background .15s;
    z-index: 2;
}

.ss-slot-filled:hover .ss-menu-btn {
    opacity: 1;
}

.ss-menu-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #e8e4d8;
}

.ss-dropdown {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    background: #1a1a1e;
    border: 0.5px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    overflow: hidden;
    z-index: 60;
    min-width: 130px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.ss-dropdown.open {
    display: block;
}

.ss-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: .03em;
    color: #bbb;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .1s, color .1s;
    white-space: nowrap;
}

.ss-dropdown-item:hover {
    background: rgba(255, 255, 255, .07);
    color: #e8e4d8;
}

.ss-dropdown-item.danger:hover {
    background: rgba(196, 80, 80, .12);
    color: #c45050;
}

/* Loading state — grid locked */
.ss-grid.ss-loading {
    pointer-events: none;
}

.ss-grid.ss-loading .ss-slot-filled:not(.ss-slot-active) {
    opacity: 0.35;
    transition: opacity 0.2s;
}

.ss-grid.ss-loading .ss-slot-active {
    border-color: rgba(196, 169, 122, .7);
}

.ss-grid.ss-loading .ss-slot-empty {
    opacity: 0.35;
}

@keyframes ssFlash {
    0% {
        border-color: rgba(196, 169, 122, .9);
    }

    100% {
        border-color: rgba(255, 255, 255, .1);
    }
}

.ss-slot-filled.flash {
    animation: ssFlash 0.5s ease-out forwards;
}

/* Rename overlay — floats over the slot */
.ss-rename-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: rgba(13, 13, 15, 0.88);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
}

.ss-rename-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border: 0.5px solid rgba(196, 169, 122, 0.45);
    border-radius: 6px;
    color: #e8e4d8;
    font-family: inherit;
    font-size: 11px;
    padding: 5px 8px;
    outline: none;
    text-align: center;
    transition: border-color 0.15s;
}

.ss-rename-input:focus {
    border-color: rgba(196, 169, 122, 0.8);
}

.ss-rename-actions {
    display: flex;
    gap: 6px;
}

.ss-rename-ok,
.ss-rename-cancel {
    font-family: inherit;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 4px 10px;
    cursor: pointer;
    border: 0.5px solid transparent;
    transition: background 0.12s;
}

.ss-rename-ok {
    background: rgba(139, 115, 85, 0.25);
    border-color: rgba(139, 115, 85, 0.45);
    color: #c4a97a;
}

.ss-rename-ok:hover {
    background: rgba(139, 115, 85, 0.4);
}

.ss-rename-cancel {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #666;
}

.ss-rename-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ── Location flavour text ── */
.loc-flavor {
    padding-bottom: 16px;
    border-bottom: 0.5px solid rgba(255, 255, 255, .05);
}

.loc-flavor-label {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #4a4640;
    margin-bottom: 8px;
}

.loc-flavor-text {
    font-size: 11px;
    line-height: 1.65;
    color: #706a62;
    transition: opacity 0.5s ease;
}

.loc-flavor-text.fading {
    opacity: 0;
}

/* ── Sidebar ── */
.sidebar {
    background: rgba(0, 0, 0, .18);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.s-title {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #333;
    padding-bottom: 8px;
    border-bottom: 0.5px solid rgba(255, 255, 255, .05);
    margin-bottom: 2px;
    display: none;
}

.p-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.p-row:last-child {
    margin-bottom: 0;
}

.av {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 500;
    flex-shrink: 0;
}

.av.gm {
    background: rgba(139, 115, 85, .25);
    color: #c4a97a;
    border: 0.5px solid rgba(139, 115, 85, .4);
}

.av.p1 {
    background: rgba(74, 153, 120, .2);
    color: #4a9977;
}

.av.p2 {
    background: rgba(140, 100, 190, .2);
    color: #9c6ec8;
}

.av.p3 {
    background: rgba(190, 120, 60, .2);
    color: #be783c;
}

.av.p4 {
    background: rgba(60, 120, 190, .2);
    color: #3c78be;
}

.av.p5 {
    background: rgba(190, 60, 120, .2);
    color: #be3c78;
}

.p-name {
    font-size: 11px;
    color: #555;
    flex: 1;
}

.p-tag {
    font-size: 10px;
    color: #333;
    border: 0.5px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    padding: 2px 6px;
}

.room-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    background: rgba(139, 115, 85, 0.08);
    border: 0.5px solid rgba(139, 115, 85, 0.3);
    border-radius: 20px;
    padding: 4px 12px;
}

.room-pill:hover {
    background: rgba(139, 115, 85, 0.16);
    border-color: rgba(139, 115, 85, 0.5);
}

.room-pill-icon {
    width: 13px;
    height: 13px;
    color: #9a8763;
    flex-shrink: 0;
}

.room-pill-code {
    color: #c4a97a;
    font-weight: 500;
    letter-spacing: 0.18em;
}

.room-pill-count {
    color: #d6c193;
    font-weight: 600;
    font-size: 10px;
    background: rgba(196, 169, 122, 0.16);
    border-radius: 10px;
    padding: 1px 7px;
    letter-spacing: 0.02em;
}

/* ── Splash ── */
.splash {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #0d0d0f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    cursor: pointer;
    transition: opacity 0.7s ease;
}

.splash::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 35% at 50% 50%, rgba(139, 115, 85, 0.07) 0%, transparent 70%);
    pointer-events: none;
}

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

.splash-logo {
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color: #e8e4d8;
    animation: splashIn 0.9s ease both;
}

.splash-logo span {
    color: #8b7355;
}

.splash-logo img {
    height: 104px;
    width: auto;
    display: block;
}

.splash-def {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: -4px;
    text-align: center;
    animation: splashIn 0.9s 0.18s ease both;
}

.splash-def-head {
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: #6c6456;
}

.splash-def-head em {
    font-style: italic;
    color: #a8916c;
    letter-spacing: 0.06em;
}

.splash-def-gloss {
    font-size: 11.5px;
    font-style: italic;
    letter-spacing: 0.02em;
    color: #6f6a60;
    max-width: 340px;
}

.splash-rule {
    width: 28px;
    height: 0.5px;
    background: rgba(255, 255, 255, 0.09);
    animation: splashIn 0.9s 0.2s ease both;
}

.splash-loader {
    width: 120px;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 1px;
    overflow: hidden;
    animation: splashIn 0.9s 0.3s ease both;
}

.splash-loader-fill {
    height: 100%;
    width: 0%;
    background: #8b7355;
    border-radius: 1px;
    transition: width 0.4s ease;
}

.splash-cta {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #3a3935;
    transition: color 0.5s ease;
    animation: splashIn 0.9s 0.4s ease both, pulse 2.8s 1.3s ease-in-out infinite;
}

.splash-cta.ready {
    color: #7a6a50;
}

@keyframes splashIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.splash-fmod {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    opacity: 0;
    animation: splashFmodIn 0.9s 0.6s ease forwards;
}

@keyframes splashFmodIn {
    from {
        opacity: 0;
        transform: translate(-50%, 8px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.splash-fmod img {
    height: 18px;
    width: auto;
    opacity: 0.55;
    display: block;
}

.splash-fmod-cred {
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #3d3a34;
    white-space: nowrap;
}

.splash-ready {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: splashIn 0.4s ease both;
}

.splash-solo {
    background: none;
    border: 0.5px solid rgba(139, 115, 85, 0.5);
    border-radius: 10px;
    color: #c4a97a;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 14px 52px;
    min-width: 260px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    animation: splashIn 0.5s ease both;
}

.splash-solo:hover {
    background: rgba(139, 115, 85, 0.08);
    border-color: rgba(139, 115, 85, 0.8);
}

.splash-solo:disabled {
    opacity: 0.35;
    cursor: default;
}

.splash-session-row {
    display: flex;
    align-items: center;
    gap: 16px;
    animation: splashIn 0.5s 0.1s ease both;
    margin-top: 4px;
}

.splash-session-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.1);
}

.splash-session-btn {
    background: none;
    border: none;
    outline: none;
    color: #444;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 4px 6px;
    transition: color 0.15s;
}

.splash-session-btn:hover {
    color: #888;
}

.splash-back {
    color: #333;
}

.splash-back:hover {
    color: #666;
}

.splash-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: splashIn 0.3s ease both;
}

.splash-panel-title {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 2px;
}

.splash-panel-sub {
    font-size: 11px;
    color: #444;
    letter-spacing: 0.05em;
}

.splash-room-code {
    font-size: 38px;
    font-weight: 300;
    letter-spacing: 0.3em;
    color: #c4a97a;
    font-variant-numeric: tabular-nums;
}

.splash-code-input {
    background: rgba(255, 255, 255, 0.04);
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #e8e4d8;
    font-family: inherit;
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 0.3em;
    outline: none;
    padding: 8px 16px;
    text-align: center;
    text-transform: uppercase;
    width: 160px;
    transition: border-color 0.15s;
}

.splash-code-input:focus {
    border-color: rgba(139, 115, 85, 0.5);
}

.splash-name-input {
    background: rgba(255, 255, 255, 0.03);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #888;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.05em;
    outline: none;
    padding: 6px 12px;
    text-align: center;
    width: 180px;
    transition: border-color 0.15s;
}

.splash-name-input:focus {
    border-color: rgba(255, 255, 255, 0.18);
}

.splash-panel-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 4px;
}

.splash-error {
    font-size: 11px;
    color: #c45050;
    min-height: 14px;
    text-align: center;
}

.splash-corner {
    position: absolute;
    top: 18px;
    right: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 2;
}

.splash-login {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 0;
    color: #5a574e;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color .15s;
}

.splash-login:hover {
    color: #8a877d;
}

.splash-entry-locked {
    opacity: 0.5;
}

.splash-gear {
    background: none;
    border: 0;
    color: #5a574e;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 2px 4px;
    transition: color .15s;
}

.splash-gear:hover {
    color: #8a877d;
}

.splash-entry {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.015);
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #8a877d;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.02em;
    padding: 11px 22px;
    cursor: pointer;
    transition: color .16s, border-color .16s, background .16s;
}

.splash-entry:hover {
    color: #e8e4d8;
    border-color: rgba(139, 115, 85, 0.45);
    background: rgba(139, 115, 85, 0.05);
}

.splash-entry svg {
    width: 15px;
    height: 15px;
    stroke: #5a574e;
    fill: none;
    transition: stroke .16s;
}

.splash-entry:hover svg {
    stroke: #c4a97a;
}

/* ── Tutorial overlay (sorle-onboarding.js) ──
   --tut-pl/-pt/-pw/-ph (pad window) and --tut-x / --tut-y / --tut-r (ring centre and
   radius), all viewport px, are set from JS. */
.tut-root {
    position: fixed;
    inset: 0;
    z-index: 4000;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.tut-stage {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.tut-stage.tut-snap {
    transition: none;
}

/* Raised on Play Solo, above the splash, until the tutorial prompt is ready */
.tut-cover {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: #000;
    transition: opacity 0.4s ease;
}

.tut-cover.tut-out {
    opacity: 0;
}

/* Pointer over the click target (class set from JS) */
.tut-root.tut-hot {
    cursor: pointer;
}

.tut-stage.tut-in,
.tut-text.tut-in {
    opacity: 1;
}

/* The pad is a window in the black: a box over the pad whose huge shadow paints
   everything else solid black. One static layer, so fading it is cheap. */
.tut-pad {
    position: absolute;
    left: var(--tut-pl);
    top: var(--tut-pt);
    width: var(--tut-pw);
    height: var(--tut-ph);
    box-shadow: 0 0 0 150vmax #000;
    /* Inside the pad: 40% darker everywhere except a soft-edged spotlight on the target */
    background: radial-gradient(circle var(--tut-r) at calc(var(--tut-x) - var(--tut-pl)) calc(var(--tut-y) - var(--tut-pt)),
            transparent 0,
            transparent calc(var(--tut-r) - 2px),
            rgba(0, 0, 0, 0.4) calc(var(--tut-r) + 6px));
    pointer-events: none;
}

.tut-ring {
    position: absolute;
    left: calc(var(--tut-x) - var(--tut-r));
    top: calc(var(--tut-y) - var(--tut-r));
    width: calc(var(--tut-r) * 2);
    height: calc(var(--tut-r) * 2);
    border-radius: 50%;
    border: 2px solid #c4a97a;
    box-shadow: 0 0 18px rgba(196, 169, 122, 0.55), inset 0 0 18px rgba(196, 169, 122, 0.25);
    pointer-events: none;
    animation: tutBreath 1.9s ease-in-out infinite;
}

.tut-ring::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid #c4a97a;
    animation: tutPulse 1.9s ease-out infinite;
}

.tut-dot {
    position: absolute;
    left: var(--tut-x);
    top: var(--tut-y);
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: #ecdcb8;
    box-shadow: 0 0 10px 3px rgba(196, 169, 122, 0.9), 0 0 26px 8px rgba(196, 169, 122, 0.45);
    pointer-events: none;
}

.tut-text {
    position: absolute;
    left: calc(var(--tut-x) + var(--tut-r) + 24px);
    top: var(--tut-y);
    transform: translateY(-50%);
    max-width: calc(100vw - var(--tut-x) - var(--tut-r) - 40px);
    font-size: clamp(26px, 4.2vw, 54px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: #c4a97a;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Prompt to the left of the ring, ending at its edge */
.tut-text.tut-left {
    left: auto;
    right: calc(100% - var(--tut-x) + var(--tut-r) + 24px);
    max-width: calc(var(--tut-x) - var(--tut-r) - 40px);
    text-align: right;
}

.tut-text.tut-instant {
    transition: none;
}

.tut-skip {
    position: absolute;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    padding: 10px 12px;
    background: none;
    border: none;
    color: rgba(232, 228, 216, 0.35);
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: color 0.15s;
}

.tut-skip:hover,
.tut-skip:focus-visible {
    color: rgba(232, 228, 216, 0.75);
}

@keyframes tutPulse {
    from {
        transform: scale(1);
        opacity: 0.7;
    }

    to {
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes tutBreath {
    50% {
        box-shadow: 0 0 28px rgba(196, 169, 122, 0.8), inset 0 0 26px rgba(196, 169, 122, 0.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tut-ring {
        animation: none;
    }

    .tut-ring::after {
        display: none;
    }
}

.loc-browser-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.loc-browser-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.loc-browser {
    width: 100%;
    max-width: 780px;
    max-height: 80vh;
    background: #111114;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(10px);
    transition: transform 0.2s ease;
}

.loc-browser-overlay.open .loc-browser {
    transform: translateY(0);
}

.loc-browser-header {
    padding: 14px 16px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.loc-browser-title {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #555;
    flex: 1;
}

.loc-search-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.loc-search-icon {
    position: absolute;
    left: 10px;
    font-size: 13px;
    color: #444;
    pointer-events: none;
}

.loc-search {
    width: 100%;
    padding: 7px 12px 7px 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: #e8e4d8;
    font-family: inherit;
    font-size: 12px;
    outline: none;
    transition: border-color 0.15s;
}

.loc-search:focus {
    border-color: rgba(139, 115, 85, 0.4);
}

.loc-search::placeholder {
    color: #444;
}

.loc-result-count {
    font-size: 11px;
    color: #666;
    white-space: nowrap;
}

.loc-close-btn {
    background: none;
    border: none;
    color: #3a3935;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    transition: color 0.15s;
    font-family: inherit;
}

.loc-close-btn:hover {
    color: #888;
}

.loc-browser-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.loc-genre-sidebar {
    width: 110px;
    flex-shrink: 0;
    border-right: 0.5px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    overflow-x: hidden;
    overflow-y: auto;
}

.loc-genre-item {
    padding: 10px 12px;
    font-size: 12px;
    color: #888;
    cursor: pointer;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.04);
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: color 0.12s;
}

.loc-genre-item:hover {
    color: #bbb;
}

.loc-genre-item.active {
    color: #e8e4d8;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.03);
    border-right: 2px solid rgba(139, 115, 85, 0.6);
}

.loc-genre-count {
    font-size: 10px;
    color: #666;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 1px 5px;
}

.loc-grid {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    align-content: start;
}

.loc-card {
    border: 0.5px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
}

.loc-card:hover:not(.loc-card-unavailable) {
    border-color: rgba(139, 115, 85, 0.5);
}

.loc-card.loc-card-active {
    border-color: rgba(139, 115, 85, 0.7);
    border-width: 1px;
}

.loc-card.loc-card-unavailable {
    opacity: 0.38;
    cursor: default;
}

/* Locked = live content the user hasn't unlocked. Clearly locked: desaturated
       + dimmed + lock badge, still clickable to prompt unlock. Colour lifts on
       hover to preview the location and signal interactivity. */
.loc-multi-btn{background:rgba(255,255,255,.05);border:0.5px solid rgba(255,255,255,.16);border-radius:8px;color:#c4a97a;font-family:inherit;font-size:12px;padding:7px 12px;margin-right:10px;cursor:pointer;white-space:nowrap;}
.loc-multi-btn:hover{background:rgba(196,169,122,.14);border-color:rgba(196,169,122,.45);}
.loc-selbar{display:none;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 18px;border-top:0.5px solid rgba(255,255,255,.12);background:rgba(16,15,13,.96);}
.loc-selbar.open{display:flex;}
.loc-selbar-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.loc-selbar-count{font-size:14px;color:#e8e4d8;}
.loc-selbar-hint{font-size:11px;color:#c4a97a;line-height:1.4;}
.loc-selbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}
.loc-selbar-total{font-size:18px;color:#e8e4d8;white-space:nowrap;}
.loc-selbar-total s{color:#5a574e;font-size:14px;margin-right:6px;}
.loc-selbar-btn{background:rgba(255,255,255,.07);border:0;border-radius:9px;color:#e8e4d8;
  font-family:inherit;font-size:13px;padding:10px 16px;cursor:pointer;}
.loc-selbar-btn:hover{background:rgba(255,255,255,.12);}
.loc-selbar-btn.gold{background:#c4a97a;color:#1a1712;font-weight:600;}
.loc-selbar-btn.gold:hover{background:#d4ba8c;}
.loc-selbar-btn.gold:disabled{opacity:.4;cursor:not-allowed;background:#c4a97a;}
.loc-card-selected{outline:2px solid #c4a97a;outline-offset:-2px;border-radius:10px;}
.loc-card-selected .loc-card-img{filter:none;opacity:1;}
.loc-card-tick{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;
  background:rgba(10,9,8,.72);border:1px solid rgba(255,255,255,.35);color:transparent;z-index:3;}
.loc-card-selected .loc-card-tick{background:#c4a97a;border-color:#c4a97a;color:#1a1712;}
.loc-card-notselectable{opacity:.28;pointer-events:none;}
.loc-card.loc-card-locked {
    cursor: pointer;
}

.loc-card.loc-card-locked .loc-card-img {
    filter: grayscale(0.9) brightness(0.78);
    transition: filter 0.18s;
}

.loc-card.loc-card-locked:hover .loc-card-img {
    filter: grayscale(0.25) brightness(0.95);
}

.loc-card.loc-card-locked .loc-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.loc-card-lock-badge {
    position: absolute;
    bottom: 4px;
    right: 5px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 13px;
    color: #f0d59a;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(240, 213, 154, 0.35);
    border-radius: 5px;
    padding: 2px 6px;
}

.loc-card-img {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    background-color: #111;
    position: relative;
    border-radius: 9px 9px 0 0;
    overflow: hidden;
}

.loc-card-img-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* Bottom gradient for text legibility */
.loc-card-img-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.80) 0%, transparent 100%);
    pointer-events: none;
}

/* Genre pill — top left */
.loc-card-genre-pill {
    position: absolute;
    top: 5px;
    left: 6px;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 2px 6px;
    pointer-events: none;
    z-index: 2;
}

.loc-card-genre-pill.fantasy {
    background: rgba(100, 60, 20, 0.72);
    color: #e8c98a;
}

.loc-card-genre-pill.modern {
    background: rgba(20, 50, 80, 0.72);
    color: #90bcd8;
}

.loc-card-genre-pill.scifi {
    background: rgba(10, 50, 65, 0.80);
    color: #7ad4e0;
}

/* Location name overlay — bottom left */
.loc-card-name-over {
    position: absolute;
    bottom: 5px;
    left: 7px;
    right: 28px;
    pointer-events: none;
    z-index: 2;
}

.loc-card-cat-over-text {
    font-size: 14px;
    font-weight: 600;
    color: rgba(245, 240, 228, 0.98);
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.98);
}

.loc-card-name-over-text {
    font-size: 10px;
    font-weight: 500;
    color: rgba(240, 234, 218, 0.66);
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
}

/* Location icon — bottom right */
.loc-card-icon {
    position: absolute;
    bottom: 5px;
    right: 6px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.38);
    pointer-events: none;
    z-index: 2;
    line-height: 1;
}

.loc-card-unavail-badge {
    position: absolute;
    bottom: 4px;
    right: 5px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #444;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    padding: 1px 5px;
    z-index: 3;
}

/* Favorite star button on loc-card */
.loc-fav-btn {
    position: absolute;
    top: 4px;
    right: 5px;
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.18);
    transition: color 0.15s, transform 0.15s;
    z-index: 2;
}

.loc-fav-btn:hover {
    color: #c4a97a;
    transform: scale(1.15);
}

.loc-fav-btn.fav-on {
    color: #c4a97a;
}

.loc-card-unavailable .loc-fav-btn {
    pointer-events: none;
}

.loc-card-body {
    padding: 7px 8px 9px;
}

.loc-card-name {
    font-size: 12px;
    font-weight: 500;
    color: #e8e4d8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loc-card-unavailable .loc-card-name {
    color: #444;
}

.loc-card-unavailable .loc-card-cat-over-text {
    color: rgba(240, 234, 218, 0.4);
}

.loc-card-unavailable .loc-card-name-over-text {
    color: rgba(240, 234, 218, 0.28);
}

.loc-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 5px;
}

.loc-card-tag {
    font-size: 9px;
    color: #888;
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 1px 5px;
}

.loc-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #3a3935;
    font-size: 13px;
    gap: 8px;
}

/* fmod debug bar: hidden for users, shown with ?debug=1 (html.debug, set in app.js) */
.fmod-bar {
    display: none;
    flex-shrink: 0;
    font-size: 10px;
    color: #333;
    padding: 6px 24px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.04);
    letter-spacing: 0.03em;
    font-family: monospace;
}
html.debug .fmod-bar {
    display: block;
}

/* ══════════════════════════════════════════
       MOBILE UI  (≤ 640px)
       Desktop layout is hidden; mobile-ui shown.
    ══════════════════════════════════════════ */
.mobile-ui {
    display: none;
}

@media (max-width: 640px) {
    body {
        padding: 0;
        align-items: stretch;
    }

    /* Hide entire desktop card */
    .app {
        display: none !important;
    }

    /* Mobile root */
    .mobile-ui {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
        background: #0d0d0f;
        position: relative;
        overflow: hidden;
    }

    /* ── Background image layer ── */
    .mob-bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        background-image: url('img/tavern.webp');
        transition: filter 0.3s linear;
        z-index: 0;
    }

    .mob-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.55) 0%,
                rgba(0, 0, 0, 0.3) 40%,
                rgba(0, 0, 0, 0.65) 100%);
    }

    /* ── Animated energy canvas ── */
    .mob-energy-canvas {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }

    /* All content above bg */
    .mob-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
    }

    /* ── Top bar ── */
    .mob-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px 10px;
        flex-shrink: 0;
    }

    .mob-logo {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #e8e4d8;
    }

    .mob-logo span {
        color: #8b7355;
    }

    .mob-logo .brand-mark {
        height: 34px;
    }

    .mob-status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #444;
        transition: background 0.4s;
        flex-shrink: 0;
    }

    .mob-status-dot.loading {
        background: #c4a97a;
        animation: pulse 1s infinite;
    }

    .mob-status-dot.ready {
        background: #4a9977;
        animation: pulse 2s infinite;
    }

    .mob-status-dot.error {
        background: #c45050;
    }

    .mob-room-pill {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        background: rgba(139, 115, 85, 0.1);
        border: 0.5px solid rgba(139, 115, 85, 0.3);
        border-radius: 20px;
        padding: 3px 10px;
    }

    .mob-room-pill-label {
        color: #6a5a3a;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 9px;
    }

    .mob-room-pill-code {
        color: #c4a97a;
        font-weight: 500;
        letter-spacing: 0.18em;
    }

    /* ── Scene info ── */
    .mob-scene-info {
        padding: 0 18px 6px;
        flex-shrink: 0;
    }

    .mob-scene-cat {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #c4a97a;
        margin-bottom: 2px;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
    }

    .mob-scene-name {
        font-size: 22px;
        font-weight: 500;
        color: #f0e8d0;
        letter-spacing: 0.02em;
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
        line-height: 1.15;
    }

    .mob-scene-sub {
        font-size: 11px;
        color: rgba(232, 228, 216, 0.45);
        margin-top: 3px;
        letter-spacing: 0.04em;
    }

    /* ── Browse button ── */
    /* Same full-bleed pill as the desktop one (.browse-btn), full row width. The
       artwork is the same lazy-loaded image (LocationBrowser.loadBrowseArt). */
    .mob-browse-btn {
        align-self: stretch;
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        height: 44px;
        margin: 6px 18px 0;
        border-radius: 22px;
        font-size: 16px;
        -webkit-tap-highlight-color: transparent;
    }

    .mob-browse-btn:active:not(:disabled) {
        border-color: #c4a97a;
    }

    .mob-browse-btn:active:not(:disabled) .browse-btn-img {
        filter: brightness(1.15);
    }

    /* ── Loading row ── */
    .mob-loading-row {
        display: none;
        align-items: center;
        gap: 10px;
        margin: 8px 18px 0;
        flex-shrink: 0;
    }

    .mob-loading-row.visible {
        display: flex;
    }

    .mob-loading-bar {
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 1px;
        overflow: hidden;
        position: relative;
    }

    @keyframes mobLoad {
        0% {
            transform: translateX(-100%)
        }

        100% {
            transform: translateX(250%)
        }
    }

    .mob-loading-fill {
        position: absolute;
        inset: 0;
        width: 40%;
        background: #8b7355;
        animation: mobLoad 1s ease-in-out infinite;
    }

    .mob-loading-name {
        font-size: 10px;
        color: #8b7355;
        letter-spacing: 0.06em;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ── Pad area (flex: 1 so it fills remaining vertical space) ── */
    .mob-pad-area {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Pad sits right under Browse; the volume row is pushed to the bottom of
           the area (margin-top:auto below), so any spare height ends up between
           readout and volume instead of as dead space above and below the pad. */
        justify-content: flex-start;
        padding: 10px 18px 6px;
        gap: 0;
        min-height: 0;
        /* Lets the pad size itself against this area's HEIGHT (cqh units). */
        container-type: size;
    }


    .mob-pad-container {
        position: relative;
        width: 100%;
        max-width: 340px;
        /* Square, so width is height. Cap it by the pad area's height (cqh) so
           pad + state readout + volume row fit: 60px is a tightened reserve (the
           full column is ~100px: area padding 16, readout ~40, volume ~42).
           Without container-query support the calc is dropped and the 340px cap
           above applies. */
        max-width: min(480px, calc(100cqh - 60px));
        aspect-ratio: 1 / 1;
        flex: none;   /* never squash vertically — the canvas must stay square */
    }

    /* Axis labels sit inside the pad edges. pointer-events:none so a touch on
       a label still reaches the pad. */
    .mob-axis-in {
        position: absolute;
        pointer-events: none;
        color: rgba(232, 228, 216, 0.38);
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
        padding: 0;
        z-index: 1;
    }
    .mob-axis-in.mob-axis-top     { top: 8px;    left: 50%; transform: translateX(-50%); padding: 0; }
    .mob-axis-in.mob-axis-bottom  { bottom: 8px; left: 50%; transform: translateX(-50%); padding: 0; }
    .mob-axis-in.mob-axis-left    { left: 7px;  top: 50%; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); padding: 0; }
    .mob-axis-in.mob-axis-right   { right: 7px; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%); padding: 0; }

    .mob-pad-canvas {
        width: 100%;
        height: 100%;
        display: block;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
        cursor: crosshair;
    }

    /* ── Axis labels around pad ── */
    .mob-axis-labels {
        width: 100%;
        max-width: 340px;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto auto;
        align-items: center;
        font-size: 9px;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(232, 228, 216, 0.35);
        margin-top: 2px;
        pointer-events: none;
    }

    .mob-ax-top {
        grid-column: 2;
        grid-row: 1;
        text-align: center;
        padding-bottom: 4px;
    }

    .mob-ax-left {
        grid-column: 1;
        grid-row: 2;
        text-align: left;
    }

    .mob-ax-center {
        grid-column: 2;
        grid-row: 2;
    }

    .mob-ax-right {
        grid-column: 3;
        grid-row: 2;
        text-align: right;
    }

    .mob-ax-bottom {
        grid-column: 2;
        grid-row: 3;
        text-align: center;
        padding-top: 4px;
    }

    /* ── State readout under pad ── */
    .mob-state-readout {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: 12px;
    }

    .mob-state-pill {
        font-size: 11px;
        color: #c4a97a;
        font-weight: 500;
        background: rgba(196, 169, 122, 0.1);
        border: 0.5px solid rgba(196, 169, 122, 0.22);
        border-radius: 20px;
        padding: 5px 14px;
        letter-spacing: 0.04em;
        transition: border-color 0.3s;
    }

    /* ── Volume slider ── */
    .mob-vol-row {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        max-width: 480px;
        margin-top: auto;     /* sits at the bottom of the pad area, just above the toggles */
        padding: 8px 2px 0;
    }

    .mob-vol-icon {
        font-size: 14px;
        flex-shrink: 0;
        opacity: 0.5;
    }

    .mob-vol-track {
        flex: 1;
        height: 28px;
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mob-vol-track::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 3px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
    }

    .mob-vol-fill {
        position: absolute;
        left: 0;
        top: 50%;
        height: 3px;
        width: 100%;
        background: #c4a97a;
        border-radius: 2px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .mob-vol-thumb {
        position: absolute;
        top: 50%;
        left: 100%;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #c4a97a;
        border: 2px solid #0d0d0f;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 8px rgba(196, 169, 122, 0.4);
        pointer-events: none;
        transition: transform 0.05s;
    }

    .mob-vol-val {
        font-size: 10px;
        font-weight: 500;
        color: #666;
        font-variant-numeric: tabular-nums;
        min-width: 30px;
        text-align: right;
    }

    /* ── Bottom bar: toggles + inertia ── */
    .mob-bottom-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 18px 18px;
        flex-shrink: 0;
    }

    .mob-toggle-pill {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 7px 14px;
        border-radius: 20px;
        border: 0.5px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.04);
        cursor: pointer;
        user-select: none;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.06em;
        color: #444;
        transition: all 0.18s;
        -webkit-tap-highlight-color: transparent;
    }

    .mob-toggle-pill.active {
        border-color: rgba(139, 115, 85, 0.35);
        background: rgba(139, 115, 85, 0.08);
        color: #c4a97a;
    }

    .mob-toggle-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        flex-shrink: 0;
        background: transparent;
        border: 0.5px solid rgba(255, 255, 255, 0.2);
    }

    .mob-toggle-pill.active .mob-toggle-dot {
        background: #c4a97a;
        border-color: transparent;
    }

    /* ── Mobile fmod debug bar ── */
    /* Hidden: it printed engine log lines ("fmod: unloaded bank …") to users.
       ?debug=1 (html.debug) brings it back while debugging on a phone. */
    .mob-fmod-bar {
        display: none;
        font-size: 9px;
        color: #2a2a2a;
        padding: 4px 18px;
        letter-spacing: 0.03em;
        font-family: monospace;
        flex-shrink: 0;
        text-align: center;
    }
    html.debug .mob-fmod-bar {
        display: block;
    }

    /* ── Pad axis labels ── */
    .mob-axis-label {
        font-size: 9px;
        font-weight: 500;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: rgba(232, 228, 216, 0.3);
    }

    .mob-axis-top {
        text-align: center;
        padding-bottom: 6px;
    }

    .mob-axis-bottom {
        text-align: center;
        padding-top: 6px;
    }

    .mob-axis-side {
        white-space: nowrap;
        writing-mode: vertical-rl;
    }

    .mob-axis-left {
        transform: rotate(180deg);
        padding-right: 2px;
    }

    .mob-axis-right {
        padding-left: 2px;
    }
}

/* end @media mobile */

/* ── Location browser — mobile overrides ── */
@media (max-width: 640px) {
    .loc-browser-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .loc-browser {
        max-width: 100%;
        max-height: 88vh;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        transform: translateY(40px);
    }

    .loc-browser-overlay.open .loc-browser {
        transform: translateY(0);
    }

    .loc-browser-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 14px 10px;
    }

    .loc-browser-title {
        flex-basis: 100%;
        margin-bottom: 0;
        font-size: 10px;
    }

    .loc-search-wrap {
        flex: 1;
        min-width: 0;
    }

    .loc-result-count {
        font-size: 10px;
    }

    /* Genre sidebar becomes a horizontal scroll row */
    .loc-browser-body {
        flex-direction: column;
        overflow-y: auto;
    }

    .loc-genre-sidebar {
        width: 100%;
        flex-direction: row;
        border-right: none;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
        overflow-x: auto;
        overflow-y: hidden;
        flex-shrink: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .loc-genre-sidebar::-webkit-scrollbar {
        display: none;
    }

    .loc-genre-item {
        flex-shrink: 0;
        flex-direction: column;
        gap: 2px;
        padding: 8px 14px;
        font-size: 11px;
        border-bottom: none;
        border-right: 0.5px solid rgba(255, 255, 255, 0.04);
        min-width: 64px;
        text-align: center;
    }

    .loc-genre-item.active {
        border-right: 0.5px solid rgba(255, 255, 255, 0.04);
        border-bottom: 2px solid rgba(139, 115, 85, 0.7);
        margin-right: 0;
        background: rgba(255, 255, 255, 0.03);
    }

    .loc-genre-count {
        margin-left: 0;
    }

    /* 2-column grid with bigger cards — override desktop 4-col */
    .loc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
        padding: 12px;
        flex: none !important;
        overflow-y: visible !important;
        height: auto !important;
    }

    .loc-card-img {
        height: 120px;
    }

    .loc-card-body {
        padding: 9px 10px 11px;
    }

    .loc-card-name {
        font-size: 13px;
        white-space: normal;
        line-height: 1.3;
    }

    .loc-card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 6px;
    }

    .loc-card-tag {
        font-size: 10px;
        padding: 2px 7px;
    }

    .loc-card-unavail-badge {
        font-size: 9px;
        padding: 2px 6px;
    }

    .loc-card-name-over-text {
        font-size: 12px;
    }

    .loc-card-icon {
        font-size: 17px;
    }
}

/* ── Topbar loading indicator ── */
@keyframes locLoad {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(200%)
    }
}

.loc-loading-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #8b7355;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.loc-loading-pill.visible {
    opacity: 1;
}

.loc-loading-pill-name {
    letter-spacing: 0.06em;
}

.loc-loading-pill-bar {
    width: 48px;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1px;
    overflow: hidden;
    position: relative;
}

.loc-loading-pill-fill {
    position: absolute;
    inset: 0;
    width: 40%;
    background: #8b7355;
    animation: locLoad 1s ease-in-out infinite;
}

/* ── Scene shortcut pages (tabs) ── */
.ss-pages {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    flex-wrap: wrap;
}

.ss-page-tab {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    letter-spacing: .05em;
    cursor: pointer;
    border: 0.5px solid rgba(255, 255, 255, .09);
    background: none;
    color: #444;
    font-family: inherit;
    transition: all .15s;
    white-space: nowrap;
}

.ss-page-tab.active {
    border-color: rgba(196, 169, 122, .5);
    color: #c4a97a;
    background: rgba(196, 169, 122, .07);
}

.ss-page-tab:hover:not(.active) {
    color: #777;
    border-color: rgba(255, 255, 255, .18);
}

.ss-page-add {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 13px;
    border: 0.5px dashed rgba(255, 255, 255, .12);
    background: none;
    color: #444;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.6;
}

.ss-page-add:hover {
    border-color: rgba(255, 255, 255, .25);
    color: #666;
}

.ss-page-menu {
    position: fixed;
    z-index: 3500;
    min-width: 120px;
    background: #16161e;
    border: 0.5px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

.ss-page-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    color: #bbb;
    border-radius: 5px;
}

.ss-page-menu-item:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.ss-page-menu-item.danger {
    color: #c47a7a;
}

.ss-page-menu-item.danger:hover {
    background: rgba(196, 80, 80, .12);
    color: #e08888;
}

/* ── Currently playing slot indicator ── */
.ss-slot-filled {
    position: relative;
}

.ss-slot-filled.ss-slot-playing {
    box-shadow: 0 0 0 1px rgba(196, 169, 122, .7) !important;
}

.ss-slot-filled.ss-slot-playing::after {
    content: '▶';
    position: absolute;
    bottom: 6px;
    right: 7px;
    font-size: 7px;
    color: #c4a97a;
    opacity: .85;
}

/* ── Options panel ── */
.opt-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.opt-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.opt-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3001;
    width: 270px;
    background: #111118;
    border-left: 0.5px solid rgba(255, 255, 255, .1);
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.opt-panel.open {
    transform: translateX(0);
}

.opt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 14px;
    border-bottom: 0.5px solid rgba(255, 255, 255, .07);
    flex-shrink: 0;
}

.opt-title {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #c9c3b6;
}

.opt-close {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    line-height: 1;
}

.opt-close:hover {
    color: #aaa;
}

.opt-section {
    padding: 16px 18px;
    border-bottom: 0.5px solid rgba(255, 255, 255, .05);
}

/* Hover tooltip in the Options panel (text in data-tip). The panel scrolls, so
   it can't hang outside it: it sits inside, just above the section. Hover only. */
.opt-section[data-tip] {
    position: relative;
}

@media (hover: hover) {
    .opt-section[data-tip]::after {
        content: attr(data-tip);
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: calc(100% - 4px);
        z-index: 5;
        padding: 7px 10px;
        border-radius: 8px;
        background: rgba(14, 13, 16, 0.96);
        border: 0.5px solid rgba(196, 169, 122, 0.35);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
        color: #e8e4d8;
        font-size: 12px;
        line-height: 1.4;
        letter-spacing: .02em;
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s ease;
    }

    .opt-section[data-tip]:hover::after {
        opacity: 1;
        transition-delay: .35s;
    }
}

.opt-lbl {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9a948a;
    margin-bottom: 10px;
}

.opt-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.opt-slider-cap {
    font-size: 10px;
    color: #7d7970;
    white-space: nowrap;
}

.opt-slider {
    flex: 1;
    min-width: 0;
    accent-color: #c4a97a;
    cursor: pointer;
}

.opt-slider-val {
    font-size: 11px;
    color: #c4a97a;
    font-weight: 500;
    min-width: 40px;
    flex-shrink: 0;
    text-align: right;
}

.opt-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.opt-pills {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.opt-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    cursor: pointer;
    border: 0.5px solid rgba(255, 255, 255, .1);
    background: none;
    color: #444;
    font-family: inherit;
    transition: all .15s;
}

.opt-pill.active {
    border-color: rgba(196, 169, 122, .5);
    color: #c4a97a;
    background: rgba(196, 169, 122, .07);
}

.opt-midi-val {
    font-size: 11px;
    color: #555;
    line-height: 1.5;
}

.opt-gear-btn {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    font-size: 15px;
    padding: 2px 5px;
    line-height: 1;
    margin-left: auto;
}

.opt-gear-btn:hover {
    color: #999;
}

.opt-action-row {
    display: flex;
    gap: 7px;
    margin-top: 4px;
}

.opt-main {
    display: flex;
    flex-direction: column;
}

.opt-nav-section {
    padding: 0;
}

.opt-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    background: none;
    border: none;
    border-bottom: 0.5px solid rgba(255, 255, 255, .05);
    color: #aaa;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: .04em;
    text-align: left;
    padding: 15px 18px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.opt-nav-row:hover {
    background: rgba(255, 255, 255, .03);
    color: #e8e4d8;
}

.opt-nav-row:disabled {
    opacity: .4;
    cursor: default;
}

.opt-nav-row:disabled:hover {
    background: none;
    color: #aaa;
}

.opt-nav-arrow {
    color: #555;
    font-size: 14px;
}

.opt-sub {
    display: flex;
    flex-direction: column;
}

.opt-back {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    border-bottom: 0.5px solid rgba(255, 255, 255, .07);
    color: #888;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    padding: 14px 18px;
    cursor: pointer;
    transition: color .15s;
}

.opt-back:hover {
    color: #c4a97a;
}

.opt-about {
    font-size: 12px;
    color: #9a958a;
    line-height: 1.7;
}

.opt-about p {
    margin-bottom: 10px;
}

.opt-about p:last-child {
    margin-bottom: 0;
}

.opt-about em {
    color: #a8916c;
    font-style: italic;
}

.opt-about a {
    color: #a8916c;
    text-decoration: none;
    border-bottom: 0.5px solid rgba(168, 145, 108, .3);
    transition: color .15s, border-color .15s;
}

.opt-about a:hover {
    color: #c4a97a;
    border-bottom-color: rgba(196, 169, 122, .6);
}

.opt-about-role {
    color: #7d7970;
}

.opt-about-meta {
    font-size: 10px;
    color: #555;
    letter-spacing: .06em;
    margin-bottom: 0;
}

/* ── Center stage: fixed-width slot for knobs OR XY pad ── */
/* Fixed width so swapping knobs↔XY never shifts the fader or toggles,
       even though knob state labels vary in width (they overflow harmlessly). */
.center-stage {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* ── Desktop XY pad ── */
#desktop-xy-wrap {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
}

#desktop-xy-canvas {
    cursor: crosshair;
    touch-action: none;
    display: block;
}

/* Live knobDef readout, sits in the open space above the pad */
#desktop-xy-readout {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 16px;
    white-space: nowrap;
    pointer-events: none;
    display: flex;
    align-items: baseline;
    gap: 9px;
    letter-spacing: .04em;
    line-height: 1;
}

#desktop-xy-readout .dxy-ro-tag {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(232, 228, 216, .42);
}

#desktop-xy-readout .dxy-ro-val {
    font-size: 15px;
    color: #d6c193;
    font-weight: 500;
}

#desktop-xy-readout .dxy-ro-sep {
    font-size: 15px;
    color: rgba(232, 228, 216, .28);
    margin: 0 5px;
}

/* ── Mobile scene shortcuts bar ── */
.mob-scenes-bar {
    display: flex;
    gap: 7px;
    padding: 8px 18px 6px;
    overflow-x: auto;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mob-scenes-bar::-webkit-scrollbar {
    display: none;
}

.mob-ss-pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    border: 0.5px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    padding: 0 10px;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.mob-ss-pill-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .22;
    pointer-events: none;
}

.mob-ss-pill-name {
    position: relative;
    z-index: 1;
    font-size: 10px;
    color: #bbb;
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mob-ss-pill-add {
    font-size: 16px;
    color: #2e2e2e;
}

.mob-ss-pill.playing {
    border-color: rgba(196, 169, 122, .65);
}

.mob-ss-pill.playing .mob-ss-pill-name {
    color: #c4a97a;
}