/* Part 8: the shared window style (decided 2026-09-29).
   One look for every window: dark box with a gold border, gold spaced-capitals title, and the
   same ✕ top-right. Windows opt in with class="ob-overlay" (the dimmed backdrop) and
   class="ob-window" on their .modal-box. Question-style windows (confirm, level up, trial gate,
   tutorial) keep their own buttons at the bottom instead of a ✕.
   Kept as their own look on purpose: the story book (#intro-overlay), the hero detail card,
   the level-up green border and the crash log.
   The id list in :is() gives these rules the weight of an id selector, so they win over the
   older per-window rules without !important. */

/* Backdrop: one colour everywhere, no blur (blur is expensive to redraw, see the tutorial fix) */
.ob-overlay:is(#settings-overlay, #records-overlay, #chronicle-overlay, #achievements-overlay,
    #compendium-overlay, #trial-gate-overlay, #confirm-overlay, #dev-note-overlay,
    #beginner-guide-overlay, #title-audio-overlay, #levelup-overlay, #tut-overlay, #my-deck-modal) {
    background: rgba(6, 7, 10, 0.9);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* The box */
:is(#settings-overlay, #records-overlay, #chronicle-overlay, #achievements-overlay,
    #compendium-overlay, #trial-gate-overlay, #confirm-overlay, #dev-note-overlay,
    #beginner-guide-overlay, #title-audio-overlay, #levelup-overlay, #tut-overlay, #my-deck-modal) .ob-window {
    background: #15171c;
    border: 1px solid var(--accent-gold); /* follows the theme: red in Hard Mode */
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    position: relative;
}
/* Status colour kept as a signal */
#levelup-overlay .ob-window { border-color: var(--safe); }

/* Title */
.ob-window-title {
    color: var(--accent-gold);
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
    margin: 10px 0;
    line-height: 1.3;
}

/* Close button: same size and place on every window */
.ob-window .close-popup-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    color: #b8b8b8;
    font-size: 15px;
    font-weight: normal;
    line-height: 1;
    cursor: pointer;
    z-index: 20;
}
.ob-window .close-popup-btn:hover { color: var(--accent-gold); border-color: var(--accent-gold); }

/* Buttons in windows: primary (confirm / continue), secondary (cancel, back, restore), danger
   (destructive or final), and cta (the one "buy" button). Window-scoped with the same id list, so
   they win over .confirm-btn / .c-yes / .c-no. */
:is(#settings-overlay, #records-overlay, #chronicle-overlay, #achievements-overlay,
    #compendium-overlay, #trial-gate-overlay, #confirm-overlay, #dev-note-overlay,
    #beginner-guide-overlay, #title-audio-overlay, #levelup-overlay, #tut-overlay, #my-deck-modal) .ob-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 10px;
    border-radius: 4px;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    outline: none;
}
:is(#trial-gate-overlay, #confirm-overlay, #levelup-overlay, #tut-overlay) .ob-btn.ob-btn-primary {
    background: rgba(var(--gold-old-rgb), 0.12);
    border: 1px solid var(--accent-gold);
    color: #f1e3b5;
}
:is(#trial-gate-overlay, #confirm-overlay, #levelup-overlay, #tut-overlay) .ob-btn.ob-btn-primary:hover { background: rgba(var(--gold-old-rgb), 0.22); }
:is(#trial-gate-overlay, #confirm-overlay, #levelup-overlay, #tut-overlay) .ob-btn.ob-btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #a8adb7;
    font-size: 10px;
}
:is(#trial-gate-overlay, #confirm-overlay, #levelup-overlay, #tut-overlay) .ob-btn.ob-btn-secondary:hover { border-color: rgba(255, 255, 255, 0.35); color: #e1e2e6; }
:is(#trial-gate-overlay, #confirm-overlay, #levelup-overlay, #tut-overlay) .ob-btn.ob-btn-danger {
    background: #6b2e2e;
    border: 1px solid #e15f5f;
    color: #ffdada;
}
:is(#trial-gate-overlay, #confirm-overlay, #levelup-overlay, #tut-overlay) .ob-btn.ob-btn-danger:hover { background: #853333; }
:is(#trial-gate-overlay, #confirm-overlay, #levelup-overlay, #tut-overlay) .ob-btn.ob-btn-cta {
    background: var(--accent-gold);
    border: 1px solid var(--accent-gold);
    color: #14110a;
    font-size: 13px;
}
:is(#trial-gate-overlay, #confirm-overlay, #levelup-overlay, #tut-overlay) .ob-btn.ob-btn-cta:hover { filter: brightness(1.08); }
/* The confirm dialog's two buttons sit side by side */
#confirm-overlay .confirm-btn-group .ob-btn { flex: 1; width: auto; padding: 14px 10px; }