/* ─────────────────────────────────────────────────────────────
   Rustic Theme — "Alchemist's Workbench"
   Retrofits existing modals and buttons with wood + parchment +
   tarnished-brass treatment. Loaded LAST so its broad selectors
   win against per-feature modal stylesheets without needing to
   edit each one.

   Palette, font, and layout choices follow the plank texture at
   images/ui/modal-wood.webp. Body copy sits on a parchment inset
   for legibility — text directly on the wood is illegible.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&display=swap');

:root {
    /* Base materials */
    --rw-wood-url: url('../images/ui/modal-wood.webp');
    --rw-wood-ink: #2a1607;
    --rw-wood-shadow: rgba(24, 12, 4, 0.85);
    --rw-wood-tint: rgba(89, 52, 24, 0.0);

    /* Parchment — ink readable body panel */
    --rw-parchment: #e9d7ad;
    --rw-parchment-2: #d9c292;
    --rw-parchment-edge: #6a4a22;
    --rw-parchment-stain: rgba(120, 70, 30, 0.08);

    /* Metal */
    --rw-iron: #18120c;
    --rw-iron-2: #2a1f15;
    --rw-brass: #b68233;
    --rw-brass-hi: #e0b26a;
    --rw-brass-lo: #7d551d;

    /* Accents */
    --rw-ember: #c4461a;
    --rw-ember-hi: #f07a3a;
    --rw-ink: #26170c;
    --rw-ink-soft: #3c2613;

    /* Typography */
    --rw-font-display: 'IM Fell English SC', 'Cinzel', serif;
    --rw-font-body: 'IM Fell English', 'Cormorant Garamond', 'Georgia', serif;
}

/* ── Overlay darkening ──────────────────────────────────────── */
/* Uniform near-opaque scrim behind every modal. Individual stylesheets
   set their own overlay background — we override to a consistent dim
   amber-tinged black so the wood modal pops. */
.modal-overlay,
.potency-overlay,
.tier-achievement-overlay,
.rank-up-overlay,
.vial-modal-overlay,
.story-mode-overlay,
.leaderboard-overlay,
.timing-minigame-overlay,
.element-details-overlay,
.discoveries-overlay,
.completion-overlay,
.discovery-notification-overlay,
.tier-upgrade-overlay,
.mobile-rank-overlay {
    background: radial-gradient(ellipse at center,
        rgba(50, 26, 10, 0.72) 0%,
        rgba(14, 6, 2, 0.92) 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── The wood panel ─────────────────────────────────────────── */
/* Any element whose class name ends in "-modal" or that is a known
   generic modal box gets the wood treatment. The attribute selector
   catches most per-feature modals without enumeration. */
.modal-overlay > *:not(.modal-overlay),
.warning-modal,
.potency-modal,
.rank-up-modal,
.vial-modal,
.story-mode-modal,
.leaderboard-modal,
.timing-minigame-modal,
.element-details-modal,
.completion-modal,
.tier-upgrade-modal,
.tier-achievement-modal,
.unlearn-modal,
.mythical-modal,
.rustic-modal {
    background:
        /* subtle dark vignette on the inner edges */
        radial-gradient(ellipse at center,
            rgba(0,0,0,0) 55%,
            rgba(18, 9, 3, 0.55) 100%),
        var(--rw-wood-url) center/cover no-repeat,
        #2a1607 !important;
    border: 3px solid var(--rw-iron) !important;
    border-radius: 6px !important;
    box-shadow:
        /* iron-rim shadow */
        0 0 0 2px rgba(12, 7, 3, 0.9),
        /* dark outer aura */
        0 24px 60px rgba(0, 0, 0, 0.85),
        /* inner plank shadow */
        inset 0 0 80px rgba(12, 6, 2, 0.55),
        /* warm firelight catch */
        inset 0 1px 0 rgba(230, 175, 110, 0.15) !important;
    color: var(--rw-parchment) !important;
    font-family: var(--rw-font-body) !important;
    position: relative;
    overflow: hidden;
}

/* Decorative iron corner studs — pseudo-elements on any rustic panel.
   Pure CSS so no asset dependency. */
.warning-modal::before,
.potency-modal::before,
.rank-up-modal::before,
.vial-modal::before,
.story-mode-modal::before,
.leaderboard-modal::before,
.timing-minigame-modal::before,
.element-details-modal::before,
.completion-modal::before,
.tier-upgrade-modal::before,
.tier-achievement-modal::before,
.unlearn-modal::before,
.mythical-modal::before,
.rustic-modal::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(22, 13, 5, 0.6);
    border-radius: 3px;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(210, 160, 90, 0.08);
    z-index: 1;
}

/* Corner "rivets" in each corner of the inner frame */
.warning-modal::after,
.potency-modal::after,
.rank-up-modal::after,
.vial-modal::after,
.story-mode-modal::after,
.leaderboard-modal::after,
.timing-minigame-modal::after,
.element-details-modal::after,
.completion-modal::after,
.tier-upgrade-modal::after,
.tier-achievement-modal::after,
.unlearn-modal::after,
.mythical-modal::after,
.rustic-modal::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 14px 14px,
            rgba(20, 12, 6, 0.95) 0 3px,
            rgba(70, 45, 20, 0.0) 4px 100%),
        radial-gradient(circle at calc(100% - 14px) 14px,
            rgba(20, 12, 6, 0.95) 0 3px,
            rgba(70, 45, 20, 0.0) 4px 100%),
        radial-gradient(circle at 14px calc(100% - 14px),
            rgba(20, 12, 6, 0.95) 0 3px,
            rgba(70, 45, 20, 0.0) 4px 100%),
        radial-gradient(circle at calc(100% - 14px) calc(100% - 14px),
            rgba(20, 12, 6, 0.95) 0 3px,
            rgba(70, 45, 20, 0.0) 4px 100%);
    pointer-events: none;
    z-index: 2;
}

/* Lift the real content above the decorative ::before/::after */
.warning-modal > *,
.potency-modal > *,
.rank-up-modal > *,
.vial-modal > *,
.story-mode-modal > *,
.leaderboard-modal > *,
.timing-minigame-modal > *,
.element-details-modal > *,
.completion-modal > *,
.tier-upgrade-modal > *,
.tier-achievement-modal > *,
.unlearn-modal > *,
.mythical-modal > *,
.rustic-modal > * {
    position: relative;
    z-index: 3;
}

/* ── Typography ─────────────────────────────────────────────── */
.modal-overlay h1, .modal-overlay h2, .modal-overlay h3,
.warning-modal h1, .warning-modal h2, .warning-modal h3,
.potency-modal h1, .potency-modal h2, .potency-modal h3,
.rank-up-modal h1, .rank-up-modal h2, .rank-up-modal h3,
.vial-modal h1, .vial-modal h2, .vial-modal h3,
.story-mode-modal h1, .story-mode-modal h2, .story-mode-modal h3,
.leaderboard-modal h1, .leaderboard-modal h2, .leaderboard-modal h3,
.element-details-modal h1, .element-details-modal h2, .element-details-modal h3,
.completion-modal h1, .completion-modal h2, .completion-modal h3,
.tier-upgrade-modal h1, .tier-upgrade-modal h2, .tier-upgrade-modal h3,
.tier-achievement-modal h1, .tier-achievement-modal h2, .tier-achievement-modal h3,
.unlearn-modal h1, .unlearn-modal h2, .unlearn-modal h3,
.mythical-modal h1, .mythical-modal h2, .mythical-modal h3 {
    font-family: var(--rw-font-display) !important;
    color: var(--rw-brass-hi) !important;
    letter-spacing: 0.05em;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.9),
        0 0 18px rgba(196, 70, 26, 0.35) !important;
    font-weight: 500 !important;
    background: none !important;
    -webkit-text-fill-color: var(--rw-brass-hi);
}

.modal-overlay p,
.warning-modal p,
.potency-modal p,
.rank-up-modal p,
.vial-modal p,
.story-mode-modal p,
.leaderboard-modal p,
.element-details-modal p,
.completion-modal p,
.tier-upgrade-modal p,
.tier-achievement-modal p,
.unlearn-modal p,
.mythical-modal p {
    font-family: var(--rw-font-body) !important;
    color: var(--rw-parchment) !important;
    line-height: 1.55;
    font-size: 1rem;
}

/* ── Parchment inset — for any long body text block ─────────── */
/* Apply manually by wrapping content in .rustic-parchment, but also
   auto-applied to common wrappers we know about. */
.rustic-parchment,
.vial-modal .modal-content,
.leaderboard-modal .leaderboard-content,
.story-mode-modal .story-content,
.element-details-modal .element-details-content {
    background:
        linear-gradient(180deg,
            rgba(233, 215, 173, 0.96),
            rgba(217, 194, 146, 0.96)) !important;
    color: var(--rw-ink) !important;
    border: 1px solid var(--rw-parchment-edge) !important;
    border-radius: 4px !important;
    padding: 18px 22px !important;
    box-shadow:
        inset 0 0 30px var(--rw-parchment-stain),
        0 2px 6px rgba(0, 0, 0, 0.35) !important;
    font-family: var(--rw-font-body) !important;
}

.rustic-parchment p,
.rustic-parchment span,
.rustic-parchment li,
.vial-modal .modal-content p,
.vial-modal .modal-content span,
.leaderboard-modal .leaderboard-content p,
.story-mode-modal .story-content p,
.element-details-modal .element-details-content p {
    color: var(--rw-ink) !important;
}

/* ── Standardized buttons ───────────────────────────────────── */
/* "Iron band" button — wood-hewn with a forged iron frame. Applied
   to existing button classes used throughout modals. */
.rustic-btn,
.modal-btn,
.modal-buttons button,
.modal-overlay button:not(.close-btn):not(.modal-close):not(.intro-story-btn),
.warning-modal button,
.potency-modal button,
.rank-up-modal button,
.vial-modal button:not(.vial-close):not(.tab-btn),
.story-mode-modal button:not(.story-close),
.leaderboard-modal button:not(.leaderboard-close),
.timing-minigame-modal button:not(.timing-close),
.element-details-modal button:not(.element-details-close),
.completion-modal button,
.tier-upgrade-modal button,
.tier-achievement-modal button,
.unlearn-modal button,
.mythical-modal button {
    font-family: var(--rw-font-display) !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.08em !important;
    font-weight: 500 !important;
    color: var(--rw-parchment) !important;
    padding: 11px 24px !important;
    border: 2px solid var(--rw-iron) !important;
    border-radius: 3px !important;
    background:
        linear-gradient(180deg,
            rgba(155, 98, 44, 0.35) 0%,
            rgba(60, 32, 14, 0.55) 100%),
        var(--rw-wood-url) center/cover !important;
    box-shadow:
        /* outer iron edge shadow */
        0 0 0 1px rgba(10, 6, 3, 0.8),
        /* stroke highlight */
        inset 0 1px 0 rgba(230, 175, 110, 0.25),
        /* depth */
        0 2px 0 rgba(10, 6, 3, 0.6),
        0 5px 14px rgba(0, 0, 0, 0.55) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease !important;
    text-transform: uppercase;
    position: relative;
    min-width: 120px;
}

.rustic-btn:hover,
.modal-btn:hover,
.modal-buttons button:hover,
.modal-overlay button:not(.close-btn):not(.modal-close):not(.intro-story-btn):hover,
.warning-modal button:hover,
.potency-modal button:hover,
.rank-up-modal button:hover,
.vial-modal button:not(.vial-close):not(.tab-btn):hover,
.story-mode-modal button:not(.story-close):hover,
.leaderboard-modal button:not(.leaderboard-close):hover,
.timing-minigame-modal button:not(.timing-close):hover,
.element-details-modal button:not(.element-details-close):hover,
.completion-modal button:hover,
.tier-upgrade-modal button:hover,
.tier-achievement-modal button:hover,
.unlearn-modal button:hover,
.mythical-modal button:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.12) saturate(1.05) !important;
    box-shadow:
        0 0 0 1px rgba(10, 6, 3, 0.8),
        inset 0 1px 0 rgba(230, 175, 110, 0.35),
        0 3px 0 rgba(10, 6, 3, 0.6),
        0 8px 22px rgba(0, 0, 0, 0.65),
        0 0 20px rgba(196, 70, 26, 0.35) !important;
}

.rustic-btn:active,
.modal-btn:active,
.modal-buttons button:active {
    transform: translateY(1px) !important;
    box-shadow:
        0 0 0 1px rgba(10, 6, 3, 0.9),
        inset 0 2px 4px rgba(10, 6, 3, 0.6),
        0 0 0 rgba(0, 0, 0, 0) !important;
}

/* Primary action — tarnished brass with ember glow */
.rustic-btn.primary,
.confirm-btn,
.modal-btn.confirm-btn,
.modal-btn[data-action="primary"],
.rank-up-modal .primary-btn,
.completion-modal .primary-btn,
.tier-upgrade-modal .primary-btn,
.continue-btn {
    background:
        linear-gradient(180deg,
            rgba(240, 140, 60, 0.55) 0%,
            rgba(196, 70, 26, 0.75) 55%,
            rgba(125, 85, 29, 0.9) 100%),
        var(--rw-wood-url) center/cover !important;
    border-color: var(--rw-brass-lo) !important;
    color: #fff4dc !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 0 8px rgba(240, 122, 58, 0.6) !important;
}

/* Destructive action — crack-red iron */
.rustic-btn.danger,
.cancel-btn,
.modal-btn.cancel-btn,
.unlearn-confirm-btn,
.delete-btn,
.modal-btn[data-action="danger"] {
    background:
        linear-gradient(180deg,
            rgba(130, 40, 24, 0.45) 0%,
            rgba(60, 18, 10, 0.75) 100%),
        var(--rw-wood-url) center/cover !important;
    border-color: #1a0a06 !important;
    color: #f3d9c0 !important;
}

/* Subtle secondary — plain wood */
.rustic-btn.ghost,
.secondary-btn,
.skip-btn {
    background:
        linear-gradient(180deg,
            rgba(74, 42, 18, 0.25) 0%,
            rgba(30, 16, 6, 0.55) 100%),
        var(--rw-wood-url) center/cover !important;
    border-color: var(--rw-iron-2) !important;
}

/* ── Close buttons — wrought-iron square with engraved X ────── */
.modal-close,
.close-btn,
.vial-close,
.story-close,
.leaderboard-close,
.timing-close,
.element-details-close,
.rank-up-close,
.close-mobile-overlay,
.rustic-close {
    background: radial-gradient(circle at 35% 30%,
        #3a2a1c 0%,
        #150c06 75%) !important;
    border: 2px solid #0d0805 !important;
    color: var(--rw-brass-hi) !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--rw-font-display) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(220, 160, 90, 0.25),
        0 3px 6px rgba(0, 0, 0, 0.6) !important;
    transition: transform 120ms ease, color 120ms ease !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9) !important;
}

.modal-close:hover,
.close-btn:hover,
.vial-close:hover,
.story-close:hover,
.leaderboard-close:hover,
.timing-close:hover,
.element-details-close:hover,
.rank-up-close:hover,
.rustic-close:hover {
    color: var(--rw-ember-hi) !important;
    transform: rotate(90deg) scale(1.05) !important;
}

/* ── Inputs — aged paper feel ───────────────────────────────── */
.modal-overlay input[type="text"],
.modal-overlay input[type="email"],
.modal-overlay input[type="password"],
.modal-overlay input[type="number"],
.modal-overlay textarea,
.modal-overlay select,
.rustic-modal input,
.rustic-modal textarea,
.rustic-modal select,
.vial-modal input,
.leaderboard-modal input,
.element-details-modal input,
.auth-modal input,
.otp-input {
    background: linear-gradient(180deg, #f1ddab 0%, #ddc28a 100%) !important;
    color: var(--rw-ink) !important;
    border: 2px solid var(--rw-parchment-edge) !important;
    border-radius: 3px !important;
    padding: 9px 12px !important;
    font-family: var(--rw-font-body) !important;
    font-size: 1rem !important;
    box-shadow:
        inset 0 2px 4px rgba(110, 70, 30, 0.35),
        0 0 0 1px rgba(10, 6, 3, 0.6) !important;
    outline: none !important;
}

.modal-overlay input:focus,
.rustic-modal input:focus,
.vial-modal input:focus,
.auth-modal input:focus,
.otp-input:focus {
    border-color: var(--rw-brass) !important;
    box-shadow:
        inset 0 2px 4px rgba(110, 70, 30, 0.35),
        0 0 0 1px rgba(10, 6, 3, 0.6),
        0 0 0 3px rgba(182, 130, 51, 0.35) !important;
}

/* ── Dividers and section rules — engraved ink ─────────────── */
.modal-overlay hr,
.rustic-modal hr,
.warning-modal hr,
.potency-modal hr,
.leaderboard-modal hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(26, 15, 7, 0.8) 15%,
        rgba(182, 130, 51, 0.6) 50%,
        rgba(26, 15, 7, 0.8) 85%,
        transparent 100%) !important;
    margin: 22px 0;
    opacity: 1;
}

/* ── Leaderboard / lists on wood need parchment rows ───────── */
.leaderboard-modal table,
.leaderboard-modal .leaderboard-entry,
.leaderboard-modal ul,
.rank-up-modal ul,
.completion-modal ul {
    background:
        linear-gradient(180deg,
            rgba(233, 215, 173, 0.94),
            rgba(217, 194, 146, 0.94)) !important;
    color: var(--rw-ink) !important;
    border: 1px solid var(--rw-parchment-edge) !important;
    border-radius: 3px !important;
    padding: 12px 16px !important;
    box-shadow: inset 0 0 30px var(--rw-parchment-stain) !important;
}

.leaderboard-modal table th,
.leaderboard-modal table td {
    color: var(--rw-ink) !important;
    border-color: rgba(106, 74, 34, 0.35) !important;
    font-family: var(--rw-font-body) !important;
}

/* ── Cards / inner panels (stats blocks, option tiles) ────── */
.modal-overlay .stat-box,
.modal-overlay .stat-card,
.modal-overlay .tier-card,
.potency-modal .potency-option,
.element-details-modal .detail-card {
    background:
        linear-gradient(180deg, rgba(58, 34, 14, 0.7), rgba(26, 14, 5, 0.85)),
        var(--rw-wood-url) center/cover !important;
    border: 2px solid var(--rw-iron) !important;
    border-radius: 4px !important;
    color: var(--rw-parchment) !important;
    box-shadow:
        inset 0 1px 0 rgba(230, 175, 110, 0.2),
        0 3px 10px rgba(0, 0, 0, 0.6) !important;
}

/* ── Intro story and hamburger menu are intentionally untouched ── */
.intro-story-overlay { background: #000 !important; }
.intro-story-btn { /* keep existing styling */ }
.hamburger-menu { /* keep existing styling */ }

/* ── Mobile: keep the wood but shrink ornamentation ────────── */
@media (max-width: 640px) {
    .warning-modal::before, .potency-modal::before, .rank-up-modal::before,
    .vial-modal::before, .story-mode-modal::before, .leaderboard-modal::before,
    .timing-minigame-modal::before, .element-details-modal::before,
    .completion-modal::before, .tier-upgrade-modal::before,
    .tier-achievement-modal::before, .unlearn-modal::before,
    .mythical-modal::before, .rustic-modal::before {
        inset: 5px;
    }
    .modal-overlay .stat-box,
    .modal-overlay .stat-card {
        padding: 10px !important;
    }
    .rustic-btn, .modal-btn, .modal-buttons button {
        font-size: 0.85rem !important;
        padding: 9px 16px !important;
        min-width: 90px;
    }
}