/* ═══════════════════════════════════════
   Убежище 2026 — Pip-Boy Terminal Theme
   ═══════════════════════════════════════ */

:root {
    --bg: #0a0f0d;
    --panel: #0f1a17;
    --panel-2: #132220;
    --line: rgba(0, 255, 65, 0.12);
    --green: #00ff41;
    --green-rgb: 0, 255, 65;
    --green-dim: rgba(0, 255, 65, 0.6);
    --amber: #ffb000;
    --amber-rgb: 255, 176, 0;
    --red: #ff6b57;
    --red-rgb: 255, 107, 87;
    --text: #c8e6c0;
    --muted: #7a9a76;
    --radius: 12px;
    --glow-shadow: none;
    --shadow: none;
    --font-body: 'Share Tech Mono', 'Courier New', monospace;
    --font-heading: 'Share Tech Mono', 'Courier New', monospace;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* ── Reset & base ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

#app {
    height: 100%;
    overflow: hidden;
    transition: opacity 0.15s ease;
}

/* ── Global focus indicator for keyboard navigation ── */
:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}
button:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* ── Page transition ── */
#app > * {
    animation: pageFadeIn 0.2s ease-out;
}

@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Respect user motion preferences ──
 * Users with vestibular disorders or just annoyance get essentially no
 * animation. Transitions are still allowed (color changes are fine) but
 * transforms/scanlines/celebration particles get killed. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    body::after {
        display: none !important;
    }
    .payment-success-particles,
    .payment-success-img {
        display: none !important;
    }
    .typing .dot {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* User-toggled via Settings → Visual Effects — same rules without media query */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}
html.reduce-motion body::after {
    display: none !important;
}

/* ── CRT scanline overlay — only when world enables it via body[data-scanlines="true"] ── */
body[data-scanlines="true"]::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.04) 2px,
        rgba(0, 0, 0, 0.04) 4px
    );
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(var(--green-rgb), 0.2);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--green-rgb), 0.35);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--green-rgb), 0.2) transparent;
}

/* ── Common buttons ── */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s;
}

.btn:hover {
    background: var(--panel-2);
    border-color: var(--green-dim);
}

.btn-primary {
    background: rgba(var(--green-rgb), 0.1);
    border-color: rgba(var(--green-rgb), 0.3);
    color: var(--green);
}

.btn-primary:hover {
    background: rgba(var(--green-rgb), 0.18);
    box-shadow: 0 0 12px rgba(var(--green-rgb), 0.15);
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.btn-icon:hover {
    color: var(--green);
}

.btn-icon-small {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0.6;
    line-height: 1;
}

.btn-icon-small:hover {
    opacity: 1;
    background: rgba(var(--green-rgb), 0.1);
}


/* Apply --radius to key elements */
.lib-card, .lib-shared-card, .studio-stage-panel, .studio-char-card,
.vault-modal, .improve-modal, .lib-upload-modal, .lib-qsettings-modal,
.lib-reassemble-modal, .lib-share-modal, .conv-page,
.msg .bubble, .settings-section, .theme-card {
    border-radius: var(--radius, 12px);
}

/* Apply --shadow to panels */
.lib-card, .studio-stage-panel, .vault-modal, .improve-modal,
.lib-upload-modal, .lib-qsettings-modal {
    box-shadow: var(--shadow, none);
}

/* Apply --glow-shadow to accent elements */
.lib-upload-btn, .studio-btn.primary, .conv-submit-btn,
.custom-theme-save-btn, .settings-nickname-save {
    text-shadow: var(--glow-shadow, none);
}
.studio-btn.primary:hover, .lib-upload-btn:hover {
    box-shadow: var(--glow-shadow, none);
}