/* ============================================================
 * skin-slots.css (27.05.2026)
 * ============================================================
 * Base styles for SKIN SLOTS architecture (skin-engine.js).
 *
 * Slot anchors live in user-dashboard.html as `<div data-skin-slot="...">`.
 * They are display:none by default — skin-engine.js sets display:'' when
 * a slot has a renderer config in the active manifest.
 *
 * Slot anchors are position:fixed so they overlay page chrome without
 * affecting flow. Content slots inside the main grid (e.g. between
 * stat-tile rows) are position:relative and flow normally.
 *
 * The four outer-chrome slots (page-header-deco / page-edge-left /
 * page-edge-right / page-footer-deco) sit OUTSIDE the content column,
 * so they NEVER cover usable controls.
 *
 * On mobile (<=900px) the edge slots collapse — there's no horizontal
 * margin to fill, and portrait paintings would steal touch space.
 * ============================================================ */

/* === SLOT ANCHORS — outer chrome (fixed positioning) === */

.skin-slot {
    position: fixed;
    pointer-events: none;          /* decoration only — never blocks UI */
    z-index: 0;                    /* below content (z-index:1+) but above body bg */
    user-select: none;
    -webkit-user-select: none;
}

.skin-slot-header {
    top: 0;
    left: 0;
    right: 0;
    height: 64px;                  /* renderer can override via inline style */
}

.skin-slot-footer {
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
}

/* Edge slots — fixed vertical strips on left/right.
   Width is intentionally narrow (160px) so usable content area stays
   centered around the existing max-width. Renderer can grow it via
   inline style if a particular skin wants wider portraits. */
.skin-slot-edge-left {
    top: 80px;
    bottom: 80px;
    left: 0;
    width: 160px;
}

.skin-slot-edge-right {
    top: 80px;
    bottom: 80px;
    right: 0;
    width: 160px;
}

/* On narrow viewports, edge slots would compete with content — hide.
   Dashboard's typical content max-width is ~1200px, so we need viewport
   >= 1200 + 2*160 = 1520px to fit portraits without overlap.
   Round up to 1600px to leave breathing room. */
@media (max-width: 1599px) {
    .skin-slot-edge-left,
    .skin-slot-edge-right {
        display: none !important;
    }
}

/* Inline content slots (slot anchors placed inside the grid) flow normally. */
.skin-slot-inline {
    position: relative;
    pointer-events: none;
}

/* === RENDERER: framed-portrait === */
/* Gold-framed character portrait with optional name plaque.
   Uses CSS vars from manifest palette (--se-frame, --se-frame-inner). */

.se-portrait-frame {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
}

.se-portrait-img {
    flex: 1 1 auto;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 3px solid var(--se-frame, #b8893d);
    box-shadow:
        inset 0 0 0 1px var(--se-frame-inner, #1c0d09),
        inset 0 0 24px rgba(0, 0, 0, 0.55),
        0 6px 20px rgba(0, 0, 0, 0.55);
    border-radius: 2px;
}

.se-portrait-plate {
    flex: 0 0 auto;
    margin-top: 8px;
    padding: 4px 8px;
    text-align: center;
    background: linear-gradient(180deg,
        var(--se-plate-bright, #d4a851) 0%,
        var(--se-plate, #8b6f3a) 60%,
        var(--se-plate-dark, #5a431f) 100%);
    color: var(--se-plate-text, #1a0a05);
    font-family: 'Cinzel', 'Trajan Pro', serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 130, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 0 rgba(255, 220, 130, 0.4);
}

/* === RENDERER: wide-strip === */
/* Horizontal decorative band (header / footer / section divider).
   Image is tile-able horizontally. */

.se-wide-strip {
    width: 100%;
    background-position: center;
    background-size: auto 100%;
    background-repeat: repeat-x;
    opacity: 0.95;
}

/* === RENDERER: ornament === */
/* Small corner ornament — used for inline accents. */

.se-ornament {
    display: inline-block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: center;
}

/* === RENDERER: section-divider === */
/* Horizontal divider with centered ornament — used between content sections. */

.se-divider {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 18px 0;
    gap: 12px;
    pointer-events: none;
}

.se-divider-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--se-frame, #b8893d) 20%,
        var(--se-frame, #b8893d) 80%,
        transparent 100%);
    opacity: 0.6;
}

.se-divider-ornament {
    flex: 0 0 auto;
    height: 24px;
    width: auto;
    opacity: 0.85;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

/* === BACKGROUND ROTATION (orientation-aware) === */
/* Skin manifest's `background` block sets --se-bg-landscape / --se-bg-portrait.
   The body bg is then driven by CSS variables — orientation media queries
   below swap which one is used. Skin CSS still applies for palette/typography. */

@media (orientation: landscape) {
    body[data-skin][data-skin-bg-locked="true"] {
        background-image: var(--se-bg-landscape, none) !important;
    }
}

@media (orientation: portrait) {
    body[data-skin][data-skin-bg-locked="true"] {
        background-image: var(--se-bg-portrait, var(--se-bg-landscape, none)) !important;
    }
}

/* 30.05.2026: plná barva pozadí (Skin Editor) — background.color z manifestu.
   Pro obrázkové pozadí je --se-bg-color unset (transparent) → obrázek prosvítá. */
body[data-skin][data-skin-bg-locked="true"] {
    background-color: var(--se-bg-color, transparent) !important;
}