/* ============================================================
   LA EcoExplorers — story frame
   One bar above the story, then the story itself, scaled to fit.
   The bar sits OUTSIDE the story so it can never cover it.
   ============================================================ */

:root {
    color-scheme: dark;
    --bar-h: 44px;
    --bar-bg: #0f4d32;
    --stage-bg: #0d2a33;   /* replaced at runtime by the story's own page colour */
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    overflow: hidden;
    background: var(--stage-bg);
    font: 700 15px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.sf-bar {
    position: fixed; inset: 0 0 auto 0; z-index: 2;
    height: var(--bar-h);
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    background: var(--bar-bg); color: #fff;
}

.sf-bar a { color: #fff; text-decoration: none; }
.sf-home {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 6px 14px 6px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .14);
}
.sf-home:hover { background: rgba(255, 255, 255, .24); }
.sf-title {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    text-align: center; font-weight: 800; opacity: .92;
}
.sf-brand { font-weight: 900; }
.sf-bar a:focus-visible { outline: 3px solid #ffd633; outline-offset: 2px; }

.sf-stage {
    position: fixed; inset: var(--bar-h) 0 0 0;
    overflow: hidden;
}

/* Size and scale are set by js/story-frame.js; before it runs, just fill the stage */
.sf-story {
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    border: 0; display: block;
    transform-origin: 0 0;
    background: var(--stage-bg);
}

.sf-rotate {
    position: fixed; left: 50%; bottom: 12px; z-index: 3; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    margin: 0; padding: 8px 8px 8px 16px; border-radius: 999px;
    background: #fff; color: #123524; box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
    white-space: nowrap;
}
.sf-rotate[hidden] { display: none; }
.sf-rotate-close {
    width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: #e5f2de; color: #123524; font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
}

@media (max-width: 600px) {
    .sf-brand { display: none; }
    .sf-bar { grid-template-columns: auto minmax(0, 1fr); }
    .sf-title { text-align: left; font-size: 14px; }
}