/* =====================================================
   SCHLOSS.CSS
   "Mein Schloss" - Raum-Editor (Phase 1: ein Raum, Platzhalter-
   Möbelgrafiken, siehe JS/schloss-data.js).
   ===================================================== */

/* Dieselbe Falle ist in dieser Datei schon dreimal aufgetreten
   (Kontextmenü, Inventar/Laden-Tabs, Dreh-Buttons): eine eigene
   "display: flex/block"-Regel auf einem Element schlägt die
   UA-Regel "[hidden]{display:none}", weil Autor-Styles immer vor
   Browser-Styles gewinnen - das JS setzt .hidden=true korrekt, es
   bleibt aber sichtbar. Statt das bei jedem neuen Element erneut zu
   vergessen: EINMAL, generell, für die ganze Seite festgelegt.
   !important ist hier bewusst und begrenzt auf dieses eine Attribut. */
.schloss-page [hidden] {
    display: none !important;
}

.schloss-page {

    /* Der Schlossraum soll die Seite füllen, nicht als Karte in einem
       breiten Rahmen sitzen: das übliche main-Padding (40px) hier
       zurücknehmen. */
    padding: 12px 10px 14px 12px;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;

}

/* Desktop: die fixe Sidebar steht LINKS über dem Content. Die ganze
   Schloss-Seite (Bühne UND Schublade) beginnt rechts daneben - und
   verschiebt sich MIT, wenn die Sidebar auf-/zugeklappt wird
   (#sidebar bekommt dann .open, Breite 92px -> 260px). Kein fester
   Pixelwert, der bei anderem Zustand/Zoom wieder kollidiert:
   body:has(#sidebar.open) liest den echten Zustand live. */
@media (min-width: 961px) {
    .schloss-page {
        margin-left: 100px;
        padding-left: 10px;
        transition: margin-left .4s var(--yj-ease-out, ease);
    }
    /* #sidebar steht als vorheriges Geschwister von <main.schloss-page>
       im DOM -> der Geschwister-Kombinator reagiert zuverlässig auf das
       .open-Umschalten (kein :has(), das hier je nach Browser die
       Neuberechnung des Geschwisters verschluckt). 260px + 8px Luft. */
    #sidebar.open ~ .schloss-page {
        margin-left: 268px;
    }
}

/* Mobil: keine linke Sidebar-Spalte, aber Platz für die fixe Topbar
   (56px). Die Sidebar ist hier ein Overlay mit Backdrop - der Content
   verschiebt sich NICHT, aber die Schublade darf sich beim geöffneten
   Overlay nicht mehr davor legen (Bug-Melder-z-index 1900 -> runter). */
@media (max-width: 960px) {
    .schloss-page {
        margin-left: 0;
        padding-top: 72px;
    }
    #sidebar.open ~ .schloss-page .schloss-drawer {
        z-index: 40;
    }
}

/* Die Editor-Seite soll großflächig wirken - die 3D-Ansicht bekommt
   fast die volle Höhe, die Einrichtungs-Schublade darunter nur so viel
   wie nötig. */
.schloss-editor {

    /* .yj-page (main) ist column-flex mit align-items:center - ohne
       ein explizites width würde #schloss-editor auf seine breiteste
       Zeile (die Möbel-/Stil-Schublade) zusammenschrumpfen und die
       3D-Szene mitziehen (auf Mobil rechts abgeschnitten). */
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 10px;

}

/* --- 3D-Szene (JS/schloss-3d.js) --- */

.schloss-scene-wrap {

    position: relative;

    width: 100%;
    height: 86vh;
    min-height: 380px;

    /* Kein Karten-/Editor-Rahmen mehr: der Raum soll wie eine Bühne
       direkt in der Seite stehen. Nur dezent abgesetzte Ecken +
       weicher Schatten, damit die 3D-Fläche nicht hart an anderen
       Seitenelementen klebt. */
    border-radius: var(--yj-radius-md, 12px);
    overflow: hidden;

    background: #241a12;

    box-shadow: var(--yj-shadow-float);

}

.schloss-scene-title {

    position: absolute;
    left: 14px;
    top: 12px;

    padding: 5px 12px;
    border-radius: var(--yj-radius-pill, 999px);

    background: rgba(35, 20, 8, 0.55);
    backdrop-filter: blur(3px);

    color: #ffe3ad;
    font-family: var(--yj-font-display, system-ui, sans-serif);
    font-weight: 800;
    font-size: 0.95rem;

    pointer-events: none;

}

/* Kaminfeuer an/aus - dauerhaft sichtbarer runder Knopf oben rechts,
   unabhängig von der Möbelauswahl (der Kamin gehört zur Raumhülle). */
.schloss-fire-toggle {

    position: absolute;
    right: 14px;
    top: 12px;
    z-index: 3;

    width: 44px;
    height: 44px;

    border: 2px solid var(--yj-color-border);
    border-radius: 50%;
    background: var(--yj-color-paper);

    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;

    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
    transition: filter 0.15s ease, background 0.15s ease;

}

.schloss-fire-toggle:hover {
    background: var(--yj-color-accent, #e0a53c);
}

/* Aus-Zustand: sichtbar gedämpft (wie der Lampen-Schalter). */
.schloss-fire-toggle.is-off {
    filter: grayscale(0.85) brightness(0.8);
    opacity: 0.75;
}

#schloss-canvas {

    /* Absolut im Wrapper (der ist position:relative;overflow:hidden) -
       so kann die vom Renderer per setSize() gesetzte Pixelbreite des
       Canvas NICHT den Flex-Container aufblähen (sonst Rückkopplung:
       Container zu breit -> nächster resize misst zu breit -> ...,
       auf Mobil rechts abgeschnitten). Größe kommt rein aus dem
       Wrapper (width:100% des Elternteils, height:72vh). */
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;

}

.schloss-rotate-controls {

    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

}

.schloss-rotate-buttons {

    display: flex;
    gap: 10px;

}

/* Farbauswahl (nur bei einfärbbaren Möbeln, z. B. Teppich) - eigene
   Zeile über den Dreh-/Entfernen-Buttons, gleiche Optik wie die
   Farbkreise aus dem ehemaligen 2D-Kontextmenü. */
.schloss-item-menu-colors {

    display: flex;
    gap: 8px;

    padding: 6px 10px;

    border-radius: var(--yj-radius-pill, 999px);
    background: rgba(35, 20, 8, 0.55);
    backdrop-filter: blur(3px);

}

.schloss-rotate-controls button {

    width: 44px;
    height: 44px;

    border: 2px solid var(--yj-color-border);
    border-radius: 50%;
    background: var(--yj-color-paper);

    font-size: 1.2rem;
    cursor: pointer;

    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);

}

.schloss-rotate-controls button:hover {
    background: var(--yj-color-accent, #e0a53c);
}

/* Lampen-Schalter: im Aus-Zustand sichtbar gedämpft. */
.schloss-light-toggle[aria-pressed="false"] {
    filter: grayscale(0.55) brightness(0.92);
}

/* 15°-Einrast-Hilfe: aus = gedämpft, an = hervorgehoben. */
.schloss-rotate-snap {
    filter: grayscale(0.6) brightness(0.95);
    font-size: 0.76rem;
    font-weight: 800;
}

.schloss-rotate-snap.is-on {
    filter: none;
    background: var(--yj-color-accent, #e0a53c);
    border-color: var(--yj-color-wood-dark, #5b3a1c);
}

@media (max-width: 700px) {

    .schloss-scene-wrap {
        height: 70vh;
        min-height: 320px;
    }

}

/* --- Raum (alt, 2D) --- */

.schloss-room {

    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    border: 5px solid var(--yj-color-wood-dark);
    border-radius: var(--yj-radius-lg);
    overflow: hidden;

    /* Platzhalter-Hintergrund, solange kein gemalter Raum existiert
       (echtes Bild kommt mit den übrigen Gemini-Assets). */
    background: linear-gradient(180deg, #d8c39a 0%, #c9a876 55%, #a9855a 100%);

    box-shadow:
        0 1px 0 rgba(255, 226, 165, 0.25) inset,
        0 0 0 3px rgba(var(--yj-accent-rgb), 0.35),
        var(--yj-shadow-float);

}

.schloss-placed {

    position: absolute;

    width: 15%;
    aspect-ratio: 1 / 1;

    padding: 0;
    border: none;
    background: none;

    cursor: grab;
    touch-action: none;

    transform: translate(-50%, -50%);

}

.schloss-placed img {

    width: 100%;
    height: 100%;
    object-fit: contain;

    filter: drop-shadow(0 6px 8px rgba(35, 20, 8, 0.35));

}

.schloss-placed--flipped img {
    transform: scaleX(-1);
}

.schloss-placed--dragging {
    cursor: grabbing;
    z-index: 5;
}

/* --- Einrichtungs-Schublade (Tabs + Inhalt, einklappbar) --- */

.schloss-drawer {

    /* Über dem Bug-Melder (#bug-reporter, z-index 1800), damit der
       Ein-/Ausklapp-Knopf und die Tabs immer anklickbar bleiben. */
    position: relative;
    z-index: 1900;

    border: 1px solid var(--yj-color-border);
    border-radius: var(--yj-radius-md, 12px);
    background: var(--yj-color-paper);

    padding: 5px 9px 6px;

}

/* Der Bug-Melder sitzt sonst unten rechts über der Schublade. Auf der
   Schloss-Seite über die eingeklappte Schublade anheben, damit er den
   Öffnen-Knopf weder verdeckt noch dessen Klicks abfängt. */
.schloss-page ~ #bug-reporter {
    bottom: 104px;
}

.schloss-drawer-body {

    margin-top: 5px;

    /* Kompakt halten: die 3D-Bühne darüber soll dominieren. Die Bühne
       hat feste Höhe (86vh) und ändert sich beim Öffnen NICHT. */
    max-height: 164px;
    overflow-y: auto;

}

/* Designkarten brauchen mehr Höhe als die kompakte Möbelzeile. */
.schloss-drawer.is-style-tab .schloss-drawer-body {
    max-height: none;
    overflow-y: visible;
}

.schloss-drawer.is-collapsed .schloss-drawer-body {
    display: none;
}

.schloss-drawer-toggle {

    /* Links vor den Tabs - so nie unter dem Bug-Melder unten rechts. */
    margin-right: 6px;
    flex: none;

    width: 30px;
    height: 30px;

    border: 2px solid var(--yj-color-border);
    border-radius: 50%;
    background: var(--yj-color-paper);

    font-size: 0.9rem;
    cursor: pointer;

    transition: transform 0.15s ease;

}

.schloss-drawer.is-collapsed .schloss-drawer-toggle {
    transform: rotate(-90deg);
}

/* --- Tabs (Inventar / Raum gestalten) --- */

.schloss-tabs {

    display: flex;
    align-items: center;
    gap: 6px;

}

.schloss-tab {

    padding: 5px 12px;

    border: 1px solid var(--yj-color-border);
    border-radius: var(--yj-radius-pill, 999px);
    background: var(--yj-color-paper);

    font-weight: 700;
    font-size: 0.78rem;
    color: var(--yj-color-ink-soft);

    cursor: pointer;

}

.schloss-tab.is-active {

    background: var(--yj-color-accent, #e0a53c);
    color: var(--yj-color-wood-dark);

}

/* --- Möbel-Kategoriezeile (nur im Tab "Inventar", über den Karten) ---
   Kompakte Pillen, horizontal scrollbar; auf Mobil größere Tap-Ziele. */
.schloss-inv-cats {

    display: flex;
    gap: 6px;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;

    padding: 2px 2px 6px;
    margin-bottom: 2px;

    border-bottom: 1px solid var(--yj-color-border);

}

.schloss-inv-cat {

    flex: none;

    padding: 5px 11px;

    border: 1px solid var(--yj-color-border);
    border-radius: var(--yj-radius-pill, 999px);
    background: var(--yj-color-paper);

    font-weight: 700;
    font-size: 0.74rem;
    color: var(--yj-color-ink-soft);
    white-space: nowrap;

    cursor: pointer;

}

.schloss-inv-cat.is-active {

    background: var(--yj-color-accent, #e0a53c);
    color: var(--yj-color-wood-dark);
    border-color: var(--yj-color-accent, #e0a53c);

}

@media (max-width: 700px) {

    .schloss-inv-cat {
        padding: 8px 14px;
        font-size: 0.82rem;
    }

}

/* --- Stil-Auswahl / "Raum gestalten" (Themes) --- */

.schloss-style {
    padding: 4px 2px 8px;
}

.schloss-style-hint {
    margin: 0 0 10px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--yj-color-ink-soft);
}

.schloss-style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.schloss-style-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    border: 2px solid var(--yj-color-border);
    border-radius: var(--yj-radius-md, 12px);
    background: var(--yj-color-paper);
}

.schloss-style-card-preview {
    display: block;
    width: 100%;
    height: 108px;

    background-color: var(--yj-color-cream, #fff8ea);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--yj-color-border);
}

.schloss-style-card-preview--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
}

.schloss-style-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 11px 11px;
}

.schloss-style-card-name {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--yj-color-wood-dark);
}

.schloss-style-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    min-height: 1.1em;
}

.schloss-style-card-status {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--yj-color-ink-soft);
}

.schloss-style-card-price {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--yj-color-wood-dark);
}

.schloss-style-card-action {
    margin-top: 4px;
    padding: 8px 10px;

    border: 2px solid var(--yj-color-wood-dark, #5b3a1c);
    border-radius: 9px;
    background: var(--yj-color-accent, #e0a53c);

    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--yj-color-wood-dark, #3c2a16);

    cursor: pointer;
}

.schloss-style-card-action:hover:not(:disabled) {
    filter: brightness(1.05);
}

.schloss-style-card-action:disabled {
    cursor: default;
}

/* aktives Design: Karte hervorgehoben, Aktion nur noch Status */
.schloss-style-card.is-active {
    border-color: var(--yj-color-accent, #e0a53c);
    box-shadow: 0 0 0 2px var(--yj-color-accent, #e0a53c) inset;
}
.schloss-style-card-action--active {
    background: var(--yj-color-cream, #fff8ea);
    color: var(--yj-color-ink-soft);
}

/* besessen, nicht aktiv: ruhiger "Verwenden"-Knopf */
.schloss-style-card-action--use {
    background: var(--yj-color-cream, #fff8ea);
}

/* Level noch nicht erreicht: gedämpft, Aktion gesperrt */
.schloss-style-card.is-locked .schloss-style-card-preview {
    filter: grayscale(0.5) brightness(0.92);
}
.schloss-style-card-action--locked {
    background: var(--yj-color-paper);
    border-style: dashed;
    color: var(--yj-color-ink-soft);
}


/* =====================================================
   EINRICHTUNGSSTART (JS/schloss-starter.js)
   Kurzer, besonderer Erst-Besuch: Stil wählen + zwei Geschenke.
   ===================================================== */

.schloss-starter {
    width: 100%;
    max-width: 760px;
    margin: 24px auto;
    padding: 24px 22px 26px;
    text-align: center;
}

.schloss-starter-title {
    margin: 0 0 6px;
    font-size: 1.5rem;
}

.schloss-starter-sub {
    margin: 0 auto 18px;
    max-width: 46ch;
    color: var(--yj-color-ink-soft);
}

.schloss-starter-styles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.schloss-starter-style-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;

    width: min(300px, 44vw);
    padding: 10px;

    border: 3px solid var(--yj-color-border);
    border-radius: var(--yj-radius-lg, 16px);
    background: var(--yj-color-paper);

    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.schloss-starter-style-card:hover {
    transform: translateY(-3px);
}

.schloss-starter-style-card.is-chosen {
    border-color: var(--yj-color-accent, #e0a53c);
    background: var(--yj-color-cream, #fff8ea);
}

.schloss-starter-style-preview {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--yj-radius-md, 12px);
    background: #2a1c10 center / cover no-repeat;
}

.schloss-starter-style-name {
    font-weight: 800;
    font-size: 1rem;
    color: var(--yj-color-wood-dark);
}

.schloss-starter-gifts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin: 10px 0 22px;
}

.schloss-starter-gift {
    animation: schloss-gift-pop 0.5s var(--yj-ease-out, ease) backwards;
}

@keyframes schloss-gift-pop {
    from { opacity: 0; transform: scale(0.7) translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.schloss-starter-gift-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    width: 150px;
    padding: 14px 10px;

    border: 3px solid var(--yj-color-accent, #e0a53c);
    border-radius: var(--yj-radius-lg, 16px);
    background: var(--yj-color-cream, #fff8ea);

    font-weight: 800;
    color: var(--yj-color-wood-dark);
}

.schloss-starter-gift-inner img {
    width: 84px;
    height: 84px;
    object-fit: contain;
}

.schloss-starter-confirm,
.schloss-starter-go {
    max-width: 320px;
}

@media (max-width: 700px) {
    .schloss-starter-style-card { width: 100%; }
}

/* --- Inventar --- */

.schloss-inventory {

    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 4px 2px 6px;

}

.schloss-inventory-empty {

    color: var(--yj-color-ink-soft);
    font-style: italic;

}

.schloss-inv-item {

    flex: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    width: 68px;
    padding: 6px 4px;

    border: 1px solid var(--yj-color-border);
    border-radius: var(--yj-radius-md, 12px);
    background: var(--yj-color-paper);

    font-size: 0.72rem;
    font-weight: 700;
    color: var(--yj-color-wood-dark);

    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;

}

.schloss-inv-item:hover {
    transform: translateY(-2px);
    background: var(--yj-color-cream, #fff8ea);
}

.schloss-inv-item img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.schloss-shop-price {

    display: flex;
    align-items: center;
    gap: 3px;

    font-size: 0.75rem;
    color: var(--yj-color-ink-soft);

}

.schloss-shop-price .coin-icon {
    width: 14px;
    height: 14px;
}

/* --- Kontextmenü für ein platziertes Möbelstück --- */

.schloss-item-menu {

    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);

    z-index: 500;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    padding: 14px 18px;

    border: 2px solid var(--yj-color-border);
    border-radius: var(--yj-radius-lg);
    background: var(--yj-color-paper);
    box-shadow: 0 12px 32px rgba(35, 20, 8, 0.35);

    color: var(--yj-color-wood-dark);

}

.schloss-item-menu-actions {
    display: flex;
    gap: 10px;
}

.schloss-item-menu-colors {
    display: flex;
    gap: 8px;
}

.schloss-color-swatch {

    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--yj-color-border);
    cursor: pointer;

}

.schloss-item-menu-close {

    position: absolute;
    top: 6px;
    right: 8px;

    border: none;
    background: none;

    font-size: 0.9rem;
    color: var(--yj-color-ink-soft);
    cursor: pointer;

}


/* --- Gesperrter Zustand --- */

.schloss-locked h1 {
    margin-bottom: 8px;
}