/*
 * AOQML <room-view>: gemaltes Raumbild mit Hotspots und Helden-Sprite (Dungeon-Räume).
 * Gerendert von includes/classes/aoqml/engine/RoomViewPlayer.class.php,
 * Bewegung per scripts/room-view.js (CSS-Transition auf left/top, Sprite-Animation per Klassen/Inline-Style).
 * Positionen sind Prozentwerte des Bildes, daher ohne JS responsiv.
 */

.room-view {
    position: relative;
    width: 100%;
    /* volle Spaltenbreite, aber höchstens 75 % der Fensterhöhe hoch (--rv-ratio = Bildbreite/-höhe, vom Renderer);
       ein width-Attribut setzt inline zusätzlich max-width in px und gewinnt */
    max-width: calc(var(--rv-max-h, 75vh) * var(--rv-ratio, 1));
    margin: 0.6em auto;
}

.room-view-stage {
    position: relative;
    width: 100%;
    line-height: 0;
    border-radius: var(--card-radius, 5px);
    overflow: hidden;
    box-shadow: var(--card-shadow, 3px 3px 5px 0 rgba(0, 0, 0, 0.5));
}

/* .room-view davor: .game img (margin 5px) würde das Bild sonst gegen die Hotspot-Prozente verschieben */
.room-view .room-view-bg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
}

/* <overlay>: bedingt sichtbare Bild-Ebene (Gegenstand, Tür) über dem Raumbild, unter Hotspots und Held */
.room-view-overlay {
    position: absolute;
    display: block;
    pointer-events: none;
}
/* .game img (margin 5px, Spezifitaet 0,1,1) wuerde Bild-Overlays sonst um 5 px gegen die Prozent-Box verschieben */
.room-view img.room-view-overlay {
    margin: 0;
}

/* Rittergut-Karte, Baustelle und Schaden (functions_rittergut_bild.inc.php): rv-ov-bau = Ist-Wald, der sich mit dem
   Fortschritt lichtet, rv-ov-aufbau = kommende Burgstufe, die mit dem Fortschritt über der alten erscheint (beide
   opacity inline, ohne eigene Regel), *-bild = Schadensfilter am Stufenbild der Burg, rv-ov-badge = Pergament-Kreis
   mit Hammer/Flamme an der Box */
.room-view img.room-view-overlay.rv-ov-zerstoert-bild {
    filter: grayscale(0.85) brightness(0.6);
}
.room-view img.room-view-overlay.rv-ov-beschaedigt-bild {
    filter: sepia(0.4) brightness(0.85);
}
.room-view img.room-view-overlay.rv-ov-badge {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* Textmarke statt Bild-Overlay (RoomViewRender: Overlay-Eintrag mit text; Rittergut-Karte): Pergament-Plakette
   mit dem Zustand eines Bauwerks am unteren Rand seiner Box. Zustandsklassen rv-ov-<zustand> aus
   functions_rittergut_bild.inc.php; Klicks gehen an den Hotspot darunter (pointer-events none).
   rv-ov-name = Ortsname ohne Plakette (Rittergut: Dornfeld, Lindenbruch, Burgweiler; Zustaende nur im Tooltip). */
.room-view-overlay.rv-ov-label {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 0.5em;
    border: 1px solid rgba(80, 60, 30, 0.75);
    border-radius: 4px;
    background: rgba(245, 235, 210, 0.9);
    color: #2a2010;
    font-size: clamp(10px, 1.4vw, 14px);
    line-height: 1.2;
    text-align: center;
    text-shadow: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.room-view-overlay.rv-ov-label > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;              /* bis zu zwei Zeilen („Fischerhütte im Bau“), Rest verdeckt */
    max-width: 100%;
    white-space: normal;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.room-view-overlay.rv-ov-label.rv-ov-name {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    color: #2a1d0c;
    font-weight: bold;
    font-size: clamp(11px, 1.6vw, 16px);
    letter-spacing: 0.04em;
    text-shadow: 0 0 3px rgba(255, 245, 220, 0.95), 0 0 6px rgba(255, 245, 220, 0.9), 0 1px 1px rgba(255, 245, 220, 0.9);
    overflow: visible;                  /* Name darf ueber die (schmale) Marke hinausragen, nie „Burgwe…“ */
}

.room-view-overlay.rv-ov-label.rv-ov-name > span {
    display: inline;
    white-space: nowrap;
    overflow: visible;
    max-width: none;
}

.room-view-overlay.rv-ov-label.rv-ov-im_bau {
    background: rgba(225, 215, 190, 0.85);
    color: #5a4a30;
    font-style: italic;
}

.room-view-overlay.rv-ov-label.rv-ov-gesperrt {
    background: rgba(235, 225, 200, 0.75);
    color: #6a5a40;
}

.room-view-overlay.rv-ov-label.rv-ov-beschaedigt {
    background: rgba(240, 215, 185, 0.9);
    border-color: rgba(140, 60, 30, 0.8);
    color: #7a2e14;
}

.room-view-overlay.rv-ov-label.rv-ov-zerstoert {
    background: rgba(225, 195, 170, 0.9);
    border-color: rgba(120, 40, 20, 0.85);
    color: #6e1f0e;
}

.room-view-hotspot {
    position: absolute;
    display: block;
    cursor: pointer;
    border-radius: 6px;
    box-shadow: none;
    outline: none;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
    -webkit-tap-highlight-color: rgba(255, 220, 120, 0.3);
}

.room-view-hotspot:hover,
.room-view-hotspot:focus {
    background-color: rgba(255, 220, 120, 0.2);
    box-shadow: 0 0 0 2px rgba(255, 220, 120, 0.85), 0 0 14px 2px rgba(255, 200, 80, 0.55),
        inset 0 0 0 2px rgba(255, 220, 120, 0.8), inset 0 0 16px 3px rgba(255, 200, 80, 0.45);
}

/* Umriss eines Polygon-Hotspots (RoomViewRender::shapeSvg): eigene, NICHT beschnittene Ebene direkt hinter
   dem Hotspot - ein clip-path wuerde Rand und Leuchten des Hotspots selbst wegschneiden. */
.room-view-shape {
    position: absolute;
    display: block;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.room-view-shape polygon {
    fill: rgba(255, 220, 120, 0.2);
    stroke: rgba(255, 220, 120, 0.9);
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 5px rgba(255, 200, 80, 0.85));
}

.room-view-hotspot:hover + .room-view-shape,
.room-view-hotspot:focus + .room-view-shape {
    opacity: 1;
}

/* Karte statt Raum (RoomViewRender::renderParts noHighlight, Rittergut- und Privathaus-Karte): Hotspots ohne Rahmen
   und Leuchten, der Text steht im Tooltip; nur der Tastaturfokus zeigt einen schmalen Rand */
.rv-plain .room-view-hotspot {
    -webkit-tap-highlight-color: transparent;
}

/* background: none auch gegen a:hover der Skins Bombast/Pergament (graues 80prozPixel.png als background-image) */
.rv-plain .room-view-hotspot:hover,
.rv-plain .room-view-hotspot:focus {
    background: none;
    box-shadow: none;
}

.rv-plain .room-view-hotspot:focus-visible {
    outline: 2px solid rgba(255, 220, 120, 0.85);
}

.rv-plain .room-view-hotspot:hover + .room-view-shape,
.rv-plain .room-view-hotspot:focus + .room-view-shape {
    opacity: 0;
}

.room-view-info {
    cursor: help;
}

.room-view-disabled {
    cursor: not-allowed;
}

.room-view-hero {
    position: absolute;
    height: auto;
    transform: translate(-50%, -100%);
    transition: left 0.6s ease-in-out, top 0.6s ease-in-out;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}

.room-view-hero.flip {
    transform: translate(-50%, -100%) scaleX(-1);
}

/* Sprite-Set (bilder/dungeons/sprites/<name>/): Spritesheet als Hintergrund, Frames per steps()-Keyframes auf
   background-position-x, Blickrichtung = Zeile über background-position-y (beides inline, Werte aus sprite.json).
   Der Anker (Fußpunkt) steht inline als transform. Keine Pixel-Glättung und kein drop-shadow: das Sheet ist HD
   und bringt seinen Schatten mit. Drei gleichlautende Keyframe-Namen, damit ein Zustandswechsel neu startet.
   Im Manifest als "still" markierte Animationen (abenteurer: stand) bekommen gar keine animation-Eigenschaft,
   sondern nur eine feste Frame-Spalte — die Keyframes bleiben für animierte Sets erhalten. */
.room-view-hero.rv-sprite {
    height: auto;
    background-repeat: no-repeat;
    image-rendering: auto;
    filter: none;
}

@keyframes rv-idle { from { background-position-x: 0%; } to { background-position-x: 100%; } }
@keyframes rv-walk { from { background-position-x: 0%; } to { background-position-x: 100%; } }
@keyframes rv-act  { from { background-position-x: 0%; } to { background-position-x: 100%; } }

@media (prefers-reduced-motion: reduce) {
    .room-view-hero.rv-sprite {
        animation: none !important;
    }
}

.room-view-caption {
    padding: 0.4em 0.7em;
    font-style: italic;
    line-height: 1.4;
}

.room-view-caption:empty {
    display: none;
}

/* Textliste aller Hotspots: im Spiel eingeklappt am Szenenende (RoomViewPlayer -> Context::addSceneFooter),
   in der Editor-Vorschau aufgeklappt unter dem Bild. Optik wie .zauber-regeln (antamarGeneral). */
details.room-view-actions {
    margin: 0.8em 0 0;
}

details.room-view-actions > summary {
    cursor: pointer;
    opacity: 0.85;
    padding: 0.2em 0;
    list-style: none;
}

details.room-view-actions > summary::-webkit-details-marker {
    display: none;
}

details.room-view-actions > summary::before {
    content: "\25b8 ";
}

details.room-view-actions[open] > summary::before {
    content: "\25be ";
}

details.room-view-actions > ul {
    margin: 0.3em 0 0 1.4em;
    line-height: 1.5;
}

/* Hotspots hervorheben (Knopf rechts unten auf dem Bild, im Spiel auch Leertaste): alle Hotspots leuchten kurz */
.room-view-reveal {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 220, 120, 0.7);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #ffe08a;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    opacity: 0.75;
}

.room-view-reveal:hover,
.room-view-reveal:focus-visible {
    opacity: 1;
    outline: 2px solid rgba(255, 220, 120, 0.85);
    outline-offset: 1px;
}

.rv-reveal .room-view-shape {
    opacity: 1;
    animation: rv-reveal-shape 1s ease-in-out 2;
}

@keyframes rv-reveal-shape {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

.rv-reveal .room-view-hotspot {
    background-color: rgba(255, 220, 120, 0.2);
    box-shadow: 0 0 0 2px rgba(255, 220, 120, 0.85), 0 0 14px 2px rgba(255, 200, 80, 0.55),
        inset 0 0 0 2px rgba(255, 220, 120, 0.8), inset 0 0 16px 3px rgba(255, 200, 80, 0.45);
    animation: rv-reveal 1s ease-in-out 2;
}

/* Die Fuellung leuchtet mit, weil ein clip-path (Polygon-Hotspot) jeden aeusseren Schein abschneidet. */
@keyframes rv-reveal {
    0%, 100% {
        background-color: rgba(255, 220, 120, 0.18);
        box-shadow: 0 0 0 2px rgba(255, 220, 120, 0.85), 0 0 14px 2px rgba(255, 200, 80, 0.55),
            inset 0 0 0 2px rgba(255, 220, 120, 0.8), inset 0 0 16px 3px rgba(255, 200, 80, 0.45);
    }
    50% {
        background-color: rgba(255, 238, 170, 0.42);
        box-shadow: 0 0 0 3px rgba(255, 235, 160, 1), 0 0 22px 6px rgba(255, 200, 80, 0.8),
            inset 0 0 0 3px rgba(255, 235, 160, 1), inset 0 0 22px 5px rgba(255, 200, 80, 0.7);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rv-reveal .room-view-hotspot,
    .rv-reveal .room-view-shape {
        animation: none;
    }
}

@media (max-width: 770px) {
    .room-view {
        max-width: 100% !important;
    }

    .room-view-overlay.rv-ov-label {
        font-size: clamp(8px, 2.2vw, 11px);
        padding: 0 0.3em;
    }

    /* Mobil hebt eine Sammelregel jeden button auf min-height --touch-target-min (44 px) – Breite mitziehen,
       sonst wird der runde Knopf ein Oval */
    .room-view-reveal {
        width: var(--touch-target-min, 44px);
        height: var(--touch-target-min, 44px);
        line-height: calc(var(--touch-target-min, 44px) - 2px);
        font-size: 22px;
    }
}