/* Geist Variable Font — Editor und Export sehen identisch aus. */
@font-face {
    font-family: "Geist";
    src: url("fonts/GeistVF.woff") format("woff");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Onest — Title-Font (Pano-UI Handoff) */
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range:
        U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/onest-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope — Body / Caption-Font (Pano-UI Handoff) */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range:
        U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono — Eyebrow / Counter / Index (Monospace) */
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("fonts/jetbrains-mono-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range:
        U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: var(--vp-font-family);
    background: var(--page-bg);
    color: var(--page-text);
}

/* viewer-tokens.css definiert --vp-* in :root und html.dark.
   Hier mappen wir die Legacy-Variablen-Namen auf die Tokens, damit der
   restliche style.css unveraendert weiter funktioniert.
   --page-bg / --page-text bleiben LOKAL — sie betreffen nur den
   Standalone-Export-Body und sind absichtlich NICHT im Token-Scope. */
:root {
    --page-bg: #f0f4f8;
    --page-text: #0f172a;

    --glass-bg:       var(--vp-glass-bg);
    --glass-border:   var(--vp-glass-border);
    --glass-shadow:   var(--vp-glass-shadow);

    --accent:         var(--vp-accent);
    --accent-strong:  var(--vp-accent-strong);
    --accent-glow:    var(--vp-accent-glow);
    --text-muted:     var(--vp-text-muted);

    --button-bg:      var(--vp-button-bg);
    --button-border:  var(--vp-button-border);
    --button-text:    var(--vp-button-text);

    --strip-radius:       var(--vp-strip-radius);
    --strip-item-radius:  var(--vp-strip-item-radius);
}

html.dark {
    /* Token-Vars werden in viewer-tokens.css selbst auf dark umgeschaltet.
       Hier bleiben nur die echten lokalen Body-Farben. */
    --page-bg: #080b11;
    --page-text: #e8f2ff;
}

/* ── Layout ──────────────────────────────────────────────────── */

#app {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#viewer {
    position: absolute;
    inset: 0;
    cursor: grab;
    touch-action: none;
}

/* ── Glass ──────────────────────────────────────────────────── */

.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
}

/* ── Top bar ─────────────────────────────────────────────────── */

#topBar {
    position: absolute;
    top: var(--vp-topbar-inset);
    left: var(--vp-topbar-inset);
    right: var(--vp-topbar-inset);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vp-topbar-gap);
    z-index: 20;
    pointer-events: none;
}

/* .top-center/.top-right Padding und Radius kommen aus viewer-tokens.css.
   .top-left ist NUR Layout-Wrapper — die Logo-Pille (kleine rounded glass) lebt im
   #projectLogo selbst (matches Editor: <img className="rounded pillCls px-1.5 py-1">). */
#topBar .top-left {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    border-radius: 0;
}

#topBar .top-center {
    pointer-events: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    border-radius: var(--vp-pill-radius);
    max-width: min(480px, calc(100vw - 200px));
    text-align: center;
}

#topBar .top-right {
    pointer-events: auto;
    border-radius: var(--vp-pill-radius);
    display: flex;
    align-items: center;
    margin-left: auto;
}

.tool-buttons {
    display: inline-flex;
    align-items: center;
}

/* ── Buttons ─────────────────────────────────────────────────── */

/* Background, Border und Hover-Ring kommen aus viewer-tokens.css.
   Hier bleiben nur Layout (Groesse, Radius, Cursor, Transition). */
.icon-button {
    width: var(--vp-btn-size);
    height: var(--vp-btn-size);
    border-radius: var(--vp-pill-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--button-text);
    cursor: pointer;
    flex-shrink: 0;
    transition: box-shadow 0.16s, color 0.16s, transform 0.12s;
}

.icon-button svg {
    width: var(--vp-icon-size);
    height: var(--vp-icon-size);
}

.icon-button:hover {
    color: var(--accent);
    transform: translateY(-1px);
}

.icon-button.is-active {
    color: var(--accent);
}

.icon-button:disabled,
.icon-button.is-disabled {
    opacity: 0.38;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.ghost-button {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    color: var(--button-text);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.16s, color 0.16s, box-shadow 0.16s;
}

.ghost-button:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ── TopBar map button (hidden on desktop, visible on mobile) ──── */

.topbar-map-btn {
    display: none;
}

/* ── Logo ─────────────────────────────────────────────────────── */
/* Synced mit Editor-Logo-Pille (max-h-8 max-w-[100px] rounded pillCls px-1.5 py-1). */

#projectLogo {
    display: none;
    box-sizing: border-box;
    max-width: var(--vp-logo-max-w);
    max-height: var(--vp-logo-max-h);
    width: auto;
    height: auto;
    object-fit: contain;
    padding: var(--vp-logo-pad-y) var(--vp-logo-pad-x);
    border-radius: var(--vp-logo-radius);
    background: var(--vp-glass-bg);
    border: 1px solid var(--vp-glass-border);
    backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
}

/* ── Scene meta (centered pill) ──────────────────────────────── */

#sceneMeta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    align-items: center;
}

#title {
    font-size: var(--vp-title-size);
    font-weight: var(--vp-title-weight);
    letter-spacing: var(--vp-title-tracking);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

#description {
    font-size: 10px;
    color: var(--text-muted);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Title overlay pill ──────────────────────────────────────── */
/* Shows current scene name when the strip is collapsed          */

#titleOverlay {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 19;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 220px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
}

#titleOverlay.visible {
    opacity: 1;
}

/* ── Bottom strip ─────────────────────────────────────────────── */

#bottomStrip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 20;
    display: none;          /* JS sets display:flex to show */
    flex-direction: column;
    align-items: center;
    max-width: min(860px, calc(100vw - 32px));
    /* no glass bg on container — split between toggle + .strip-scenes */
}

#bottomStrip[style*="flex"] {
    display: flex !important;
}

/* Toggle pill — always visible, even when strip is collapsed.
   Background/Border/Blur kommen aus den gleichen Tokens wie alle Pills. */
.strip-toggle {
    position: static !important;
    transform: none !important;
    top: auto !important;
    border-radius: 9999px 9999px 0 0;
    width: 52px;
    height: 22px;
    background: var(--vp-glass-bg);
    border: 1px solid var(--vp-glass-border);
    border-bottom: none;
    backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--button-text);
    flex-shrink: 0;
    transition: border-color 0.16s, color 0.16s;
    z-index: 1;
}

/* Scenes area — collapses independently */
.strip-scenes {
    position: relative;
    overflow: hidden;
    max-height: 120px;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    /* matches Editor PreviewSceneStrip: px-3 pt-3 pb-2 */
    padding: 12px 12px 8px;
    border-radius: 0;
    width: max-content;
    max-width: 100%;
}

/* When collapsed: scenes slide up, toggle stays visible */
#bottomStrip.collapsed .strip-scenes {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#bottomStrip.collapsed {
    /* strip stays at bottom, no slide-out */
    pointer-events: auto;
    opacity: 1;
}

/* ── Scene Selector (floating button + popup) ─────────────────── */

/* Position: bottom-left, aber rechts von Minimap (falls sichtbar).
   Minimap ist left:16px, w:280px → Selector bei left:16px wenn Minimap hidden,
   sonst JS verschiebt ihn. Fallback: immer unten-links. */
#sceneSelector {
    position: absolute;
    bottom: 18px;
    left: 16px;
    z-index: 24;
    display: none;
    transition: left 0.2s ease;
}

#sceneSelector.active {
    display: block;
}

/* Scene-Selector-Button: matches Editor SceneSelectorWidget
   (rounded-full px-3 py-2 gap-1.5 text-xs font-medium) */
.scene-selector-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--vp-pill-radius);
    border: 1px solid var(--vp-glass-border);
    background: var(--vp-glass-bg);
    backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    box-shadow: var(--vp-glass-shadow);
    color: var(--button-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.16s, box-shadow 0.16s, transform 0.12s;
    user-select: none;
}

/* Hover matches Editor btnCls: text-akzent + 2px ring + 1px lift,
   KEIN border-color-shift (Editor faerbt den Border nicht um). */
.scene-selector-btn:hover {
    color: var(--accent);
    box-shadow: 0 0 0 var(--vp-hover-ring-width) var(--vp-accent-ring), var(--vp-glass-shadow);
    transform: translateY(-1px);
}

/* Editor kennt KEINEN .open-State am Button — Button bleibt unveraendert,
   nur der Popup oeffnet sich. Daher kein Override hier. */

.scene-selector-btn svg {
    width: 16px;
    height: 16px;
    opacity: 1;
}

/* Popup panel: matches Editor SceneSelectorWidget Popup
   (rounded-xl p-3 min-w-[200px] max-w-[260px] + pillCls = Token-Glass) */
.scene-selector-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 260px;
    padding: 12px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--vp-glass-border);
    background: var(--vp-glass-bg);
    backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    box-shadow: var(--vp-glass-shadow);
    transform-origin: bottom left;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: scale(0.95) translateY(6px);
    pointer-events: none;
}

.scene-selector-popup.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* Header: matches Editor "Сцены" — text-xs font-semibold opacity-60 mb-1 */
.scene-selector-popup-header {
    padding: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--button-text);
    opacity: 0.60;
}

/* Liste: Wrapper hat schon padding 12px, daher hier 0 */
.scene-selector-list {
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
}

.scene-selector-list::-webkit-scrollbar {
    width: 4px;
}

.scene-selector-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.28);
    border-radius: 999px;
}

.scene-selector-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--page-text);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.1s;
    font-family: inherit;
}

/* Item-Hover matches Editor btnCls (text-akzent + Akzent-Ring + Lift) —
   kein eigenes Hintergrund-Tint, weil das Popup schon glass-bg hat. */
.scene-selector-item:hover {
    color: var(--accent);
    box-shadow: 0 0 0 var(--vp-hover-ring-width) var(--vp-accent-ring);
    transform: translateY(-1px);
}

/* Active: blue ring statt Akzent-Tint — matches Editor ring-1 ring-blue-500 */
.scene-selector-item.active {
    background: transparent;
    box-shadow: inset 0 0 0 1px #3b82f6;
}

.scene-selector-thumb {
    width: 48px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    border: none;
}

.scene-selector-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scene-selector-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--button-bg);
    font-size: 11px;
    color: var(--text-muted);
}

.scene-selector-label {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Aktiver Eintrag faerbt den Text NICHT um — Editor kennzeichnet
   die Auswahl nur mit dem Blau-Ring (siehe oben). */

/* ── Strip toggle pill ───────────────────────────────────────── */

.strip-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.22s ease;
}

/* When strip is collapsed, flip chevron to point upward */
#bottomStrip.collapsed .strip-toggle svg {
    transform: rotate(180deg);
}

/* Toggle-Hover matches Editor btnCls (text-akzent + 2px ring + lift, kein Border-Shift) */
.strip-toggle:hover {
    color: var(--accent);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.10), 0 0 0 var(--vp-hover-ring-width) var(--vp-accent-ring);
    transform: translateY(-1px);
}

/* ── Scroll arrows ───────────────────────────────────────────── */

.strip-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--vp-btn-size);
    height: var(--vp-btn-size);
    border-radius: var(--vp-pill-radius);
    background: var(--vp-glass-bg);
    border: 1px solid var(--vp-glass-border);
    backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    color: var(--button-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 21;
    box-shadow: var(--vp-glass-shadow);
    transition: box-shadow 0.16s, color 0.16s, transform 0.12s, opacity 0.16s;
}

.strip-arrow svg {
    width: var(--vp-icon-size);
    height: var(--vp-icon-size);
}

.strip-arrow.left {
    left: 6px;
}

.strip-arrow.right {
    right: 6px;
}

/* Arrow-Hover matches Editor btnCls (akzent-text + ring + lift, kein Border-Shift) */
.strip-arrow:hover {
    color: var(--accent);
    box-shadow: var(--vp-glass-shadow), 0 0 0 var(--vp-hover-ring-width) var(--vp-accent-ring);
    transform: translateY(calc(-50% - 1px));
}

.strip-arrow:disabled {
    opacity: 0.30;
    cursor: not-allowed;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

/* ── Scene list (horizontal scroll container) ────────────────── */

#sceneList {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
    scroll-snap-type: x mandatory;
    scroll-padding: 10px;
    /* prevent height from changing during scroll */
    align-items: stretch;
}

#sceneList::-webkit-scrollbar {
    height: 4px;
}

#sceneList::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.28);
    border-radius: 999px;
}

/* ── Scene cards ─────────────────────────────────────────────── */

/* Scene-Cards angeglichen an Editor PreviewSceneStrip:
   - kein eigener Hintergrund (Glass-Container scheint durch)
   - 1px Border statt 1.5px
   - Active: einfaches Blau-Ring statt Akzent-Glow */
.scene-card {
    flex: 0 0 auto;
    padding: 0;
    width: 120px;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.scene-card:hover {
    border-color: rgba(255, 255, 255, 0.40);
    transform: translateY(-2px);
}

.scene-card.active {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6;
}

.scene-thumb {
    width: 100%;
    height: 70px;
    object-fit: cover;
    display: block;
    transition: opacity 0.14s;
}

/* Editor aendert die Thumb-Opacity beim Hover NICHT — keine Regel hier. */

/* Scene-Title-Pille (Editor: bg-black/40 text-white/80 px-1.5 py-1 text-[10px]) */
.scene-title {
    padding: 4px 6px;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.40);
    color: rgba(255, 255, 255, 0.80);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Info side panel (schwebendes Seitenfenster) ─────────────── */

.info-panel {
    position: absolute;
    top: 16px;
    right: 16px;
    bottom: 16px;
    width: 340px;
    max-width: calc(100vw - 32px);
    z-index: 40;
    pointer-events: none;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-panel.open {
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0);
}

.info-panel-inner {
    height: 100%;
    border-radius: 16px;
    padding: 24px 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
    position: relative;
}

.info-panel-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.14s, background 0.14s;
}

.info-panel-close svg {
    width: 16px;
    height: 16px;
}

.info-panel-close:hover {
    color: var(--page-text);
    background: var(--button-bg);
}

.info-panel h2 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    padding-right: 32px;
}

.info-panel p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--page-text);
    opacity: 0.85;
}

#infoLink {
    display: inline-block;
    margin-top: 4px;
    color: var(--accent);
    font-weight: 500;
    font-size: 13px;
    text-decoration: none;
    transition: opacity 0.14s;
}

#infoLink:hover {
    opacity: 0.75;
}

.info-media {
    margin: 12px 0;
}

.info-media.hidden {
    display: none;
}

.info-media img {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: 10px;
}

.info-media video {
    width: 100%;
    max-height: 300px;
    border-radius: 10px;
    background: #000;
}

.info-media audio {
    width: 100%;
    margin-top: 4px;
}

/* Legacy .primary button kept for other modals */
.primary {
    margin-top: 20px;
    padding: 10px 22px;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: opacity 0.16s;
}

.primary:hover {
    opacity: 0.88;
}

/* ── Info panel mobile ── */
@media (max-width: 640px) {
    .info-panel {
        top: 10px;
        right: 10px;
        bottom: 10px;
        left: 10px;
        width: auto;
        max-width: none;
        transform: translateY(20px);
    }
    .info-panel.open {
        transform: translateY(0);
    }
    .info-panel-inner {
        padding: 20px 16px;
        border-radius: 14px;
    }
}

/* ── Minimap ─────────────────────────────────────────────────── */

#minimapContainer {
    position: absolute;
    bottom: 18px;
    left: 16px;
    z-index: 22;
    border-radius: 14px;
    overflow: hidden;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.22s ease;
    width: 280px;
    height: 220px;
}

#minimapContainer.enlarged {
    width: 560px;
    height: 440px;
}

#minimapContainer.hidden {
    display: none;
}

#minimapCanvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

#minimapControls {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    z-index: 2;
}

.minimap-btn {
    width: 26px !important;
    height: 26px !important;
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 1;
    transition: border-color 0.14s, color 0.14s, box-shadow 0.14s;
}

.minimap-btn:hover {
    opacity: 1;
    border-color: var(--accent) !important;
    color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.minimap-btn svg {
    width: 13px !important;
    height: 13px !important;
}

.minimap-open-btn {
    position: absolute;
    bottom: 62px;
    left: 16px;
    z-index: 22;
    width: 38px;
    height: 38px;
    display: none;
}

.minimap-open-btn.visible {
    display: inline-flex;
}

/* ── Controls toolbar ───────────────────────────────────────── */

#controlsToolbar {
    position: absolute;
    right: 16px;
    bottom: 18px;
    z-index: 22;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border-radius: 14px;
    transition: opacity 0.32s ease, transform 0.28s ease;
}

#controlsToolbar .icon-button {
    width: 36px;
    height: 36px;
}

#controlsToolbar .icon-button svg {
    width: 17px;
    height: 17px;
}

/* ── Audio player bar ───────────────────────────────────────── */

.audio-player {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 23;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    transition: opacity 0.22s ease;
}

.audio-player.hidden {
    display: none !important;
}

.audio-pp,
.audio-mute {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--button-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.14s;
}

.audio-pp:hover,
.audio-mute:hover {
    color: var(--accent);
}

.audio-pp svg,
.audio-mute svg {
    width: 16px;
    height: 16px;
}

.audio-pp svg.hidden,
.audio-mute svg.hidden {
    display: none;
}

.audio-vol {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    background: var(--button-border);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}

.audio-vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--glass-bg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    cursor: pointer;
}

.audio-vol::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--glass-bg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    cursor: pointer;
    border: none;
}

/* ── Scene counter ──────────────────────────────────────────── */

#sceneCounter {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 19;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--button-text);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
    display: none;
}

#sceneCounter.visible {
    opacity: 1;
    display: block;
}

/* ── Auto-hide UI ───────────────────────────────────────────── */

.ui-auto-hide #topBar,
.ui-auto-hide #bottomStrip,
.ui-auto-hide #controlsToolbar,
.ui-auto-hide #minimapContainer,
.ui-auto-hide .minimap-open-btn,
.ui-auto-hide #sceneCounter,
.ui-auto-hide #sceneSelector,
.ui-auto-hide .audio-player {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* Share toast */

.share-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    pointer-events: none;
    animation: toastFade 1.6s ease forwards;
}

@keyframes toastFade {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Powered by ─────────────────────────────────────────────── */

#poweredBy {
    position: absolute;
    bottom: 4px;
    right: 16px;
    z-index: 18;
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.6;
    text-decoration: none;
    transition: opacity 0.16s;
    pointer-events: auto;
}

#poweredBy:hover {
    opacity: 1;
    color: var(--accent);
}

/* ── Share modal ─────────────────────────────────────────────── */

.share-modal-content {
    max-width: 420px;
    width: min(92%, 420px);
}

.share-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.share-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.share-header .icon-button {
    width: 30px;
    height: 30px;
}

.share-header .icon-button svg {
    width: 15px;
    height: 15px;
}

.share-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.share-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.share-url-row {
    display: flex;
    gap: 6px;
}

.share-url-input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    color: var(--page-text);
    font-size: 12px;
    font-family: monospace;
    outline: none;
}

.share-url-input:focus {
    border-color: var(--accent);
}

.share-qr-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.share-qr-wrap {
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    padding: 12px;
}

.share-qr-wrap canvas,
.share-qr-wrap img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.share-qr-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    text-align: center;
}

.share-social-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.share-social-btn {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: transform 0.14s, box-shadow 0.16s;
    text-decoration: none;
}

.share-social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.share-social-btn svg {
    width: 22px;
    height: 22px;
}

.share-tg {
    background: #2AABEE;
}

.share-vk {
    background: #4C75A3;
}

.share-wa {
    background: #25D366;
}

/* ── Mobile ──────────────────────────────────────────────────── */

/* ── Mobile Layout ────────────────────────────────────────────
   ┌──────────────────────────────────┐
   │ [🗺]     [Titel]          [ℹ]   │  Map links oben, Info rechts oben
   │ [Minimap]                        │  links oben (wenn offen)
   │                                  │
   │      [PANORAMA fullscreen]       │
   │                                  │
   │                      [Controls]  │  rechts unten
   │ [⊞ 1/5]                         │  links unten
   │ ════ [♪  ▬▬▬▬▬  🔇] ═══════   │  full-width ganz unten
   └──────────────────────────────────┘
────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    :root {
        --m-edge: 10px;
        --m-audio-h: 0px;
        --m-safe-b: env(safe-area-inset-bottom, 0px);
    }

    /* ── Top Bar ── */
    #topBar {
        left: var(--m-edge);
        right: var(--m-edge);
        top: var(--m-edge);
        gap: 6px;
    }
    #topBar .top-left { padding: 0; border-radius: 0; gap: 6px; display: flex; align-items: center; }
    /* Logo bleibt auf Mobile Token-gestützt — keine extra Verkleinerung mehr (matches Editor). */
    /* TopBar Map-Button nicht auf Mobile (standalone Button stattdessen) */
    .topbar-map-btn { display: none !important; }
    /* Map-Button: rechts unten über Audio — IMMER sichtbar als Toggle */
    .minimap-open-btn {
        top: auto;
        left: auto;
        right: 10px;
        bottom: calc(10px + var(--m-audio-h) + var(--m-safe-b));
        width: 38px;
        height: 38px;
        border-radius: 999px;
        border: 1px solid var(--glass-border);
        background: var(--glass-bg);
        backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
        -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
        box-shadow: var(--glass-shadow);
        color: var(--button-text);
        display: inline-flex !important;
    }
    #topBar .top-center {
        max-width: calc(100vw - 140px);
        padding: 5px 14px;
    }
    #topBar .top-center #title { font-size: 11px; }
    #topBar .top-center #description { display: none; }
    #topBar .top-right { padding: 4px; border-radius: 999px; }

    /* ── Minimap: schwebt über dem Button (rechts unten) ── */
    /* Größe exakt = JS-Konstanten MINIMAP_MOBILE_SMALL 200×160 */
    #minimapContainer {
        top: auto;
        left: auto;
        right: 10px;
        bottom: calc(56px + var(--m-audio-h) + var(--m-safe-b));
        width: 200px;
        height: 160px;
        border-radius: 10px;
        border: none;
        padding: 0;
        transform-origin: bottom right;
        transition: opacity 0.18s ease,
                    transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #minimapContainer.hidden {
        display: block !important;
        opacity: 0;
        transform: scale(0.95) translateY(6px);
        pointer-events: none;
    }
    /* Enlarged: volle Breite mit gleichen Lücken */
    #minimapContainer.enlarged {
        left: 10px;
        right: 10px;
        width: auto;
        height: 280px;
    }

    /* ── Unified bottom bar ──────────────────────────────
       Eine schlanke Leiste: Audio links + Controls rechts
    ──────────────────────────────────────────────────── */

    /* Audio: full-width bar am Boden (Hintergrund der Leiste) */
    .audio-player {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        transform: none;
        z-index: 25;
        border-radius: 0;
        padding: 8px 10px;
        padding-right: 180px; /* Platz für Controls rechts */
        padding-bottom: calc(8px + var(--m-safe-b));
        gap: 6px;
        justify-content: flex-start;
    }
    .audio-pp, .audio-mute { width: 28px; height: 28px; }
    .audio-pp svg, .audio-mute svg { width: 14px; height: 14px; }
    .audio-vol { width: 50px; flex: 0 0 50px; }

    /* Controls: horizontal, rechte Seite der Bottom-Bar */
    #controlsToolbar {
        position: fixed;
        right: 6px;
        bottom: calc(2px + var(--m-safe-b));
        left: auto;
        top: auto;
        flex-direction: row;
        gap: 2px;
        padding: 3px;
        border-radius: 999px;
        z-index: 26;
        /* Transparent wenn Audio sichtbar (Audio-Bar ist der Hintergrund) */
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
        -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
        box-shadow: none;
    }
    /* Wenn Audio sichtbar: Controls ohne eigenen Hintergrund */
    .audio-player:not(.hidden) ~ #controlsToolbar,
    .audio-player:not(.hidden) + * + * + #controlsToolbar {
        background: transparent;
        border-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    #controlsToolbar .icon-button { width: 32px; height: 32px; }
    #controlsToolbar .icon-button svg { width: 15px; height: 15px; }

    /* ── Scene-Selector: LINKS UNTEN, über der Bar ── */
    #sceneSelector {
        bottom: calc(10px + var(--m-audio-h) + var(--m-safe-b));
        left: var(--m-edge);
        z-index: 24;
    }
    .scene-selector-btn { min-height: 38px; padding: 7px 12px; font-size: 11px; }
    .scene-selector-popup {
        position: fixed;
        bottom: calc(54px + var(--m-audio-h) + var(--m-safe-b));
        left: var(--m-edge);
        width: min(260px, calc(100vw - 70px));
        max-height: 60vh;
        transform-origin: bottom left;
    }
    .scene-selector-list { max-height: 50vh; }

    /* ── Rest ── */
    #bottomStrip { display: none !important; }
    #sceneCounter { display: none !important; }
    #poweredBy {
        right: var(--m-edge);
        bottom: calc(2px + var(--m-audio-h) + var(--m-safe-b));
    }

    /* ── No-Audio Layout ──────────────────────────────────────────
       Wenn kein ambientAudioUrl konfiguriert ist, fehlt die Audio-Bar
       als visueller Bottom-Anker. Floater werden umpositioniert, damit
       Map-Button NICHT mehr Controls überlappt und Abstände konsistent
       sind. JS togglet `html.no-audio` in viewer.js (updateAmbientAudio).
    ────────────────────────────────────────────────────────────── */
    html.no-audio #controlsToolbar {
        bottom: calc(10px + var(--m-safe-b));
        right: 10px;
    }
    html.no-audio .minimap-open-btn {
        bottom: calc(56px + var(--m-safe-b));
        right: 10px;
    }
    html.no-audio #minimapContainer {
        bottom: calc(56px + var(--m-safe-b));
    }
    html.no-audio #sceneSelector {
        bottom: calc(14px + var(--m-safe-b));
    }
    html.no-audio #poweredBy {
        bottom: calc(4px + var(--m-safe-b));
    }
}

#controlsToolbar:empty { display: none; }

/* ── Tour floating button (bottom-center, independent of all other UI) ── */

#tourFloatBtn {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
}

.tour-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    box-shadow: var(--glass-shadow);
    color: var(--button-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.16s, box-shadow 0.16s, color 0.16s, transform 0.12s;
    user-select: none;
}

.tour-pill-btn svg {
    flex-shrink: 0;
}

.tour-pill-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow), var(--glass-shadow);
    transform: translateY(-1px);
}

.tour-pill-stop {
    border-color: rgba(220, 50, 50, 0.5);
    color: #f87171;
}

.tour-pill-stop:hover {
    border-color: rgba(220, 50, 50, 0.85);
    color: #fca5a5;
    box-shadow: 0 0 0 3px rgba(220, 50, 50, 0.18), var(--glass-shadow);
}

.tour-counter {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 0 2px;
    min-width: 28px;
    text-align: center;
    letter-spacing: 0.02em;
}

/* Auto-hide: Tour button fades with the rest of the UI */
.ui-auto-hide #tourFloatBtn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

@media (max-width: 640px) {
    #tourFloatBtn {
        bottom: calc(10px + var(--m-audio-h, 0px) + var(--m-safe-b, 0px));
    }
    .tour-pill-btn {
        font-size: 12px;
        padding: 7px 13px;
        gap: 6px;
    }
}

/* ── Tour mobile toolbar button ──────────────────────────────── */
/* Hidden on desktop; CSS shows it on mobile inside #controlsToolbar */

.tour-toolbar-btn {
    display: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #16a34a;
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.16s, box-shadow 0.16s, transform 0.12s;
}

.tour-toolbar-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.tour-toolbar-btn:hover {
    background: #15803d;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.30);
    transform: translateY(-1px);
}

.tour-toolbar-btn.is-playing {
    background: #dc2626;
}

.tour-toolbar-btn.is-playing:hover {
    background: #b91c1c;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.28);
}

/* On mobile: hide float pill, show toolbar button */
@media (max-width: 640px) {
    #tourFloatBtn {
        display: none !important;
    }

    .tour-toolbar-btn {
        display: inline-flex !important;
    }
}