/* ============================================
   IN-GAME MENU THEME
   Loaded after style.css. The look of the game's own pause and
   inventory menus: cold slate, white-parchment text, a gold rim and
   a blue-grey wash on the selected row, filigree rules between
   sections. Textures come from the game's menu files
   (tools/build_theme_assets.py -> static/img/game/).
   ============================================ */

:root {
    --bg-dark: #050608;
    --bg-surface: #0d1014;
    --bg-card: #12161b;
    --border-blood: #2b2f35;
    --border-subtle: #22262c;
    --text-gold: #d9d3c4;        /* body text: the menus' warm white */
    --text-muted: #9a958a;
    --text-dim: #7a766d;         /* was 2.3:1 on the panels; now ~4.6:1 */
    --highlight-gold: #c9a96a;   /* menu gold: rims, headings, numbers */
    --highlight-bright: #ecd8a4;
    --accent-red: #6e0b0b;
    --accent-bright-red: #b3261e;
    --eval-plus: #c9a96a;
    --eval-minus: #a14a3f;

    --rim: rgba(201, 169, 106, 0.85);
    --rim-soft: rgba(201, 169, 106, 0.28);
    --edge: rgba(190, 185, 170, 0.14);
    --select-wash: linear-gradient(180deg, rgba(56, 70, 92, 0.55) 0%, rgba(18, 24, 34, 0.55) 100%);
    --panel: linear-gradient(180deg, rgba(14, 17, 21, 0.78), rgba(8, 10, 13, 0.88)),
             url('/static/img/game/slate.jpg') center / cover;
    --brass: linear-gradient(90deg, #5e4a24, #c9a96a);
    --blood: linear-gradient(90deg, #4a0707, #a31a14);
    --pale: linear-gradient(90deg, #39424f, #8d9bb0);
}

/* ---------- page ---------- */

html {
    background: var(--bg-dark);
}

body {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%),
        url('/static/img/game/menu-bg.jpg') center top / cover fixed,
        var(--bg-dark);
    color: var(--text-gold);
    font-size: 1.02rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

::selection {
    background: rgba(201, 169, 106, 0.35);
}

a {
    color: var(--highlight-gold);
}

/* ---------- header: title, filigree, menu tabs ---------- */

.site-header {
    /* scrolls away with the page: at about 160px a pinned header would
       cover a fifth of a laptop screen and a sixth of a phone */
    position: relative;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0) 100%);
    border-bottom: none;
    padding: 0 1.5rem;
}

.header-content {
    flex-direction: column;
    justify-content: center;
    height: auto;
    padding: 0.9rem 0 0.2rem;
    gap: 0.15rem;
}

.logo {
    position: relative;
    padding-bottom: 2.6rem;
}

.logo-text {
    font-size: 2.1rem;
    color: #e4dccb;
    letter-spacing: 0.08em;
    text-shadow: 0 0 18px rgba(201, 169, 106, 0.25), 0 2px 3px #000;
    white-space: nowrap;
}

.logo-sub {
    color: var(--text-muted);
    letter-spacing: 0.4em;
    margin-top: 0.25rem;
}

/* the game's header flourish under the title */
.logo::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 420px;
    max-width: 90vw;
    height: 40px;
    transform: translateX(-50%);
    background: url('/static/img/game/divider-wide.webp') center / contain no-repeat;
    opacity: 0.85;
    pointer-events: none;
}

.main-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.1rem;
}

.nav-link {
    position: relative;
    z-index: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    padding: 0.7rem 0.95rem 0.8rem;
    border: none;
    background: none;
}

.nav-link:hover {
    color: var(--text-gold);
    border: none;
}

/* the selected tab: gold text over the game's light sweep */
.nav-link::after {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 0.15rem;
    height: 14px;
    z-index: -1;
    mix-blend-mode: screen;
    background: url('/static/img/game/glow-sweep.webp') right center / 200% 100% no-repeat;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

.nav-link:hover::after {
    opacity: 0.45;
}

.nav-link.active {
    color: var(--highlight-bright);
    border: none;
    background: none;
    text-shadow: 0 0 10px rgba(201, 169, 106, 0.45);
}

.nav-link.active::after {
    opacity: 1;
}

/* phones: one button naming the page opens the tabs */
.nav-toggle {
    display: none;
}

/* ---------- page header: title with the page's rune ---------- */

.page-header {
    position: relative;
    border-bottom: none;
    padding-bottom: 1.8rem;
}

.page-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    background: url('/static/img/game/divider.webp') left center / auto 100% no-repeat;
    opacity: 0.75;
}

.page-title {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #e4dccb;
    font-weight: 600;
    text-shadow: 0 0 14px rgba(201, 169, 106, 0.2), 0 2px 3px #000;
}

.page-title::before {
    content: '';
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    background: var(--highlight-gold);
    -webkit-mask: var(--page-rune, url('/static/img/game/runes/hunters-mark.svg')) center / contain no-repeat;
            mask: var(--page-rune, url('/static/img/game/runes/hunters-mark.svg')) center / contain no-repeat;
    filter: drop-shadow(0 0 6px rgba(201, 169, 106, 0.4));
}

.page-deaths       { --page-rune: url('/static/img/game/runes/hunters-mark.svg'); }
.page-messages     { --page-rune: url('/static/img/game/runes/oedon.svg'); }
.page-chalice,
.page-generator,
.page-chalice_detail { --page-rune: url('/static/img/game/runes/metamorphosis.svg'); }
.page-activity     { --page-rune: url('/static/img/game/runes/eye.svg'); }
.page-stats        { --page-rune: url('/static/img/game/runes/communion.svg'); }
.page-leaderboards,
.page-hunter       { --page-rune: url('/static/img/game/runes/clawmark.svg'); }
.page-about,
.page-account      { --page-rune: url('/static/img/game/runes/guidance.svg'); }

.page-deaths .page-title::before {
    background: var(--accent-bright-red);
    filter: drop-shadow(0 0 6px rgba(179, 38, 30, 0.55));
}

/* ---------- panels ---------- */

.card {
    background: var(--panel);
    border: 1px solid var(--edge);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 0 60px rgba(0, 0, 0, 0.55);
}

/* header plate: the game's title bar with its corner scrolls */
.card-title {
    position: relative;
    color: #e4dccb;
    font-size: 0.86rem;
    letter-spacing: 0.2em;
    padding: 0.95rem 1.4rem;
    background: none;
    border-bottom: none;
    border-style: solid;
    border-width: 10px 14px;
    border-image: url('/static/img/game/plate.webp') 14 18 / 10px 14px stretch;
    background: linear-gradient(180deg, #2a2c30 0%, #1c1e21 55%, #151619 100%) padding-box;
    margin: -1px -1px 0;
}

.card-title-count {
    color: var(--highlight-gold);
    letter-spacing: 0.12em;
}

.card-body.scrollable::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.4);
}

.card-body.scrollable::-webkit-scrollbar-thumb {
    background: #4a4538;
}

.card-body.scrollable {
    scrollbar-color: #4a4538 rgba(0, 0, 0, 0.4);
}

/* panels in a row keep their own height: no tall empty boxes */
.dashboard-grid,
.content-grid {
    align-items: start;
}

/* ---------- stat tiles ---------- */

.hero-stats {
    gap: 1.25rem;
}

.stat-card {
    background: var(--panel);
    border: 1px solid var(--edge);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 50px rgba(0, 0, 0, 0.6);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.stat-card.hero::before,
.stat-card.hero::after {
    content: none;
}

/* hover/selected: gold rim and the blue-grey wash of a chosen menu item */
.stat-card:hover,
a.stat-card:focus-visible {
    border-color: var(--rim);
    background: var(--select-wash), var(--panel);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 18px rgba(201, 169, 106, 0.18), inset 0 0 40px rgba(0, 0, 0, 0.5);
}

.stat-icon {
    opacity: 1;
    margin-bottom: 0.6rem;
}

.stat-art {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.9));
}

/* inline header tiles and the small tiles: a smaller piece of art */
.stat-card.hero.inline .stat-art,
.hero-stats.small .stat-card:not(.hero) .stat-art {
    width: 44px;
    height: 44px;
}

.stat-icon svg {
    color: #d23a2c;
    width: 2.6rem;
    height: 64px;
    filter: drop-shadow(0 0 6px rgba(179, 38, 30, 0.55));
}

.stat-value {
    color: #ece5d3;
    font-weight: 600;
    text-shadow: 0 0 16px rgba(201, 169, 106, 0.25), 0 2px 3px #000;
    font-variant-numeric: lining-nums tabular-nums;
}

.stat-value.updated {
    color: var(--highlight-bright);
}

.stat-label {
    color: var(--highlight-gold);
    letter-spacing: 0.22em;
}

/* ---------- list rows: inventory entries ---------- */

.data-item {
    position: relative;
    padding: 0.55rem 0.6rem;
    margin: 0 -0.6rem;
    border-bottom: none;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.data-item + .data-item::before {
    content: '';
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(190, 185, 170, 0.14) 15%, rgba(190, 185, 170, 0.14) 85%, transparent);
}

.data-item:not(.empty):hover {
    background: var(--select-wash);
    border-color: var(--rim-soft);
}

.data-item:not(.empty):hover::before,
.data-item:not(.empty):hover + .data-item::before {
    opacity: 0;
}

.data-item.empty {
    color: var(--text-dim);
}

/* icon slot, like an inventory square */
.item-icon {
    width: 2.6rem;
    height: 2.6rem;
    background: radial-gradient(circle at 50% 40%, #23272d 0%, #0b0d10 80%);
    border: 1px solid rgba(190, 185, 170, 0.22);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.9);
}

.item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.item-icon svg {
    width: 1.3rem;
    height: 2.2rem;
}

.item-icon.death { color: #d23a2c; }
.item-icon.death svg { filter: drop-shadow(0 0 4px rgba(210, 58, 44, 0.7)); }

.item-text strong {
    color: #e4dccb;
}

.item-count {
    font-variant-numeric: tabular-nums;
}

.item-count.death {
    color: #d0574b;
}

.lamp-glyph {
    color: var(--text-muted);
}

/* ratings read as the game's Fine / Foul */
.eval-plus::before {
    content: 'Fine ';
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 400;
}

.eval-minus::before {
    content: 'Foul ';
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 400;
}

/* ---------- bars: two inks, blood and brass ---------- */

.bar-label {
    color: var(--text-gold);
}

.bar-track {
    height: 14px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(190, 185, 170, 0.16);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9);
}

.bar-fill {
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}

.bar-fill.death,
.bar-fill.enemy { background: var(--blood); }

.bar-fill.location,
.bar-fill.message,
.bar-fill.weapon,
.bar-fill.summon,
.bar-fill.armor,
.bar-fill.gesture { background: var(--brass); }

.bar-fill.ghost,
.bar-fill.level { background: var(--pale); }

.bar-value {
    font-variant-numeric: tabular-nums;
}

/* weapon rows: the game's inventory icon in a small slot */
.bar-icon {
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    background: radial-gradient(circle at 50% 40%, #23272d 0%, #0b0d10 80%);
    border: 1px solid rgba(190, 185, 170, 0.22);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
}

.bar-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bar-icon + .bar-label {
    width: 150px;
}

/* gear named in a sentence (hunter page): icon chips */
.gear-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    margin: 0.4rem 0 0.9rem;
    padding: 0;
}

.gear-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #e4dccb;
}

.gear-chip small {
    color: var(--text-muted);
}

/* charts drawn by the pages: brass, like the bars */
.hour-bar {
    background: linear-gradient(0deg, #5e4a24, #c9a96a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sparkline {
    stroke: var(--highlight-gold);
    filter: drop-shadow(0 0 3px rgba(201, 169, 106, 0.45));
}

/* a wide table must not widen its column past the screen: the panel
   scrolls it instead (grid items default to their content's width) */
.dashboard-grid > *,
.content-grid > * {
    min-width: 0;
}

/* a date in a table stays on one line; a narrow screen scrolls the table */
.lb-when {
    white-space: nowrap;
}

.card-body:has(> table),
.card-body:has(> .leaderboard-table) {
    overflow-x: auto;
}

/* ---------- tables ---------- */

.leaderboard-table thead th {
    color: var(--highlight-gold);
    border-bottom: 1px solid var(--rim-soft);
}

.leaderboard-table tbody tr {
    border-bottom: 1px solid rgba(190, 185, 170, 0.08);
}

.leaderboard-table tbody tr:hover {
    background: var(--select-wash);
}

.lb-count {
    font-variant-numeric: tabular-nums;
}

/* ---------- forms and buttons ---------- */

.search-input,
.search-select,
.generator-select {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(190, 185, 170, 0.2);
    color: var(--text-gold);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.8);
}

.search-input:focus,
.search-select:focus,
.generator-select:focus {
    border-color: var(--rim);
    outline: none;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(201, 169, 106, 0.2);
}

/* menu buttons: dark plate, gold rim, light sweep when chosen */
.search-btn,
.generator-btn,
.anomaly-filter-btn,
.map-layer-btn,
.map-floor-btn {
    background: linear-gradient(180deg, #1b2027, #0b0e12);
    border: 1px solid var(--rim-soft);
    color: #e4dccb;
    letter-spacing: 0.16em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.search-btn:hover,
.generator-btn:hover,
.anomaly-filter-btn:hover,
.map-layer-btn:hover,
.map-floor-btn:hover,
.anomaly-filter-btn.active,
.map-floor-btn.active {
    background: var(--select-wash), linear-gradient(180deg, #1b2027, #0b0e12);
    border-color: var(--rim);
    color: var(--highlight-bright);
}

/* ---------- chalice ---------- */

/* the search row (input, four selects, two buttons) was wider than a
   1024px screen; it wraps instead */
.search-form .form-row {
    flex-wrap: wrap;
}

.search-form .search-input {
    min-width: 14rem;
}

.dungeon-card {
    background: var(--panel);
    border: 1px solid var(--edge);
}

.dungeon-card:hover {
    border-color: var(--rim);
    background: var(--select-wash), var(--panel);
}

.dungeon-card {
    position: relative;
}

/* the chalice that makes the dungeon, top left of its card */
.dungeon-chalice {
    position: absolute;
    left: 6px;
    top: 6px;
    width: 46px;
    height: 46px;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.9));
}

.dungeon-glyph {
    padding: 0 44px;          /* clear of the chalice in the corner */
    color: #ece5d3;
    text-shadow: 0 0 12px rgba(201, 169, 106, 0.3);
}

/* anomalies are marked with the red rune, not a warning sign */
.rune-mark {
    display: inline-block;
    width: 1.05em;
    height: 1.25em;
    vertical-align: -0.25em;
    background: var(--accent-bright-red);
    -webkit-mask: url('/static/img/game/runes/corruption.svg') center / contain no-repeat;
            mask: url('/static/img/game/runes/corruption.svg') center / contain no-repeat;
    filter: drop-shadow(0 0 3px rgba(179, 38, 30, 0.6));
}

/* on a glyph card the rune sits in the top-right corner, across from the chalice */
.dungeon-card .anomaly-badge.rune-mark {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 18px;
    height: 26px;
    margin: 0;
}

/* the Generator tile carries the Short Ritual Root Chalice, not a gear */
.generator-link .stat-label {
    margin-top: 0.15rem;
}

/* the Anomalies/Generator tiles were links with the browser's blue corners */
a.stat-card,
a.stat-card:visited {
    color: inherit;
    text-decoration: none;
}

/* ---------- about ---------- */

.about-credit {
    border-left-color: var(--rim-soft);
}

.about-features li::before {
    color: var(--highlight-gold);
}

/* ---------- footer ---------- */

.site-footer {
    position: relative;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    border-top: none;
    padding-top: 2.4rem;
}

.site-footer::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0.4rem;
    width: 360px;
    max-width: 80vw;
    height: 30px;
    transform: translateX(-50%) rotate(180deg);
    background: url('/static/img/game/divider.webp') center / contain no-repeat;
    opacity: 0.5;
}

.footer-text {
    color: var(--text-dim);
}

/* ---------- small screens ---------- */

@media (max-width: 768px) {
    .header-content {
        padding: 0.6rem 0 0.1rem;
    }

    .logo {
        padding-bottom: 2rem;
    }

    .logo-text {
        font-size: 1.45rem;
    }

    .logo::after {
        width: 260px;
        height: 32px;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        margin: 0.3rem 0 0.7rem;
        padding: 0.5rem 1.2rem;
        font-family: 'Cinzel', serif;
        font-size: 0.78rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #e4dccb;
        text-decoration: none;
        background: linear-gradient(180deg, #1b2027, #0b0e12);
        border: 1px solid var(--rim-soft);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    }

    .nav-toggle[aria-expanded="true"] {
        background: var(--select-wash), linear-gradient(180deg, #1b2027, #0b0e12);
        border-color: var(--rim);
        color: var(--highlight-bright);
    }

    .nav-toggle-mark {
        width: 0.8rem;
        height: 1.15rem;
        background: var(--highlight-gold);
        -webkit-mask: url('/static/img/game/runes/hunters-mark.svg') center / contain no-repeat;
                mask: url('/static/img/game/runes/hunters-mark.svg') center / contain no-repeat;
    }

    /* the tabs, folded until the button opens them */
    .main-nav {
        display: none;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        gap: 0.2rem;
        padding: 0 0 0.8rem;
    }

    .main-nav.open,
    .main-nav:target {
        display: grid;
    }

    .nav-link {
        font-size: 0.74rem;
        padding: 0.65rem 0.4rem 0.75rem;
        text-align: center;
        border: 1px solid rgba(190, 185, 170, 0.1);
        background: rgba(0, 0, 0, 0.35);
    }

    .nav-link.active {
        border-color: var(--rim-soft);
        background: var(--select-wash);
    }

    .hero-stats,
    .hero-stats.small {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .stat-card.hero {
        padding: 1.2rem 0.75rem;
    }

    .stat-card {
        min-width: 0;
    }

    .stat-card.hero .stat-value {
        font-size: 2rem;
        overflow-wrap: anywhere;
    }

    .hero-stats.small .stat-card.hero .stat-value {
        font-size: 1.35rem;
    }

    .stat-art {
        width: 48px;
        height: 48px;
    }

    .page-header::after {
        background-size: 90% auto;
    }

    .page-header,
    .hero-stats-inline {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .stat-card.hero.inline {
        padding: 0.8rem 1.1rem;
    }

    /* the bar beside a ranked table is decoration; on a phone it pushed
       the deaths page 16px wider than the screen */
    .leaderboard-table .lb-bar {
        display: none;
    }

    .card-body {
        overflow-x: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-link::after,
    .stat-card,
    .data-item {
        transition: none;
    }
}

/* ---------- chalice dungeon maps: the theme's palette ----------
   The maps are pre-rendered SVGs (chalice_maps/created_maps) put inline by
   map-viewer.js, with every colour a fill/stroke attribute; CSS overrides
   those, so each of the drawing's colours maps to a theme colour with the
   same meaning (legend included): floors are sandstone on slate, other
   tiles darker stone, lines ink; enemies blood-red, special characters pale
   blue, elevators and levers gold, traps sage. */
/* floors and tiles on paper (patterns defined in chalice_detail.html), the
   flat colour if the pattern is missing */
.map-dungeon svg [fill="#e6e6e6"], .map-dungeon svg [fill="#f9f9f9"] { fill: url(#paper-floor) #8a8070; }
.map-dungeon svg [fill="#fff"]    { fill: url(#paper-floor-light) #9a907e; }
.map-dungeon svg [fill="#808080"] { fill: url(#paper-stone) #3d3a35; }
.map-dungeon svg [fill="#666"]    { fill: url(#paper-stone-dark) #2d2a26; }
.map-dungeon svg [stroke="#000"]  { stroke: #17120f; }
.map-dungeon svg [stroke="#808080"] { stroke: #4a463f; }
/* enemies */
.map-dungeon svg [fill="#f55"]    { fill: #b3261e; }
.map-dungeon svg [fill="#ffd5d5"] { fill: #e3a59c; }
.map-dungeon svg [fill="#fea"]    { fill: #e2c48e; }
.map-dungeon svg [fill="#800000"] { fill: #5e0d0a; }
.map-dungeon svg [fill="#a00"]    { fill: #8e1712; }
.map-dungeon svg [stroke="#800000"] { stroke: #4a0707; }
.map-dungeon svg [stroke="#a40"]  { stroke: #7a4a1c; }
/* special characters */
.map-dungeon svg [fill="#d5e5ff"] { fill: #a9bad6; }
.map-dungeon svg [fill="#75a9ff"] { fill: #6f8fc4; }
.map-dungeon svg [fill="#003087"] { fill: #263c66; }
.map-dungeon svg [stroke="#000080"] { stroke: #1d2b4a; }
/* elevators, levers, one-way doors, bosses' tags */
.map-dungeon svg [fill="#fc0"]    { fill: #c9a96a; }
.map-dungeon svg [fill="#f9c440"] { fill: #d4a64a; }
.map-dungeon svg [fill="#f95"]    { fill: #c97c4a; }
.map-dungeon svg [stroke="#d4aa00"] { stroke: #a8843e; }
/* traps and events */
.map-dungeon svg [fill="#d5ffd5"] { fill: #a3bd94; }
.map-dungeon svg [stroke="#008000"] { stroke: #3f5e33; }
.map-dungeon svg [fill="#ffe6d5"] { fill: #dcc0a4; }
.map-dungeon svg [fill="#ffd5f6"] { fill: #d2a2c4; }
.map-dungeon svg [stroke="#800080"] { stroke: #5a2f55; }
.map-dungeon svg [fill="#0ff"]    { fill: #7fb3b0; }

.map-svg-container.map-dungeon,
.map-legend-svg-container.map-dungeon {
    background: radial-gradient(ellipse at 50% 40%, #16191e 0%, #0b0d10 85%);
    border: 1px solid var(--edge);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.7);
}
/* the drawing's other marks: the same hue, toned to the theme */
.map-dungeon svg [fill="#ffb855"] { fill: #cf8d4e; }
.map-dungeon svg [fill="#00d0af"] { fill: #4f9d8e; }
.map-dungeon svg [fill="#aa4500"] { fill: #7a3a12; }
.map-dungeon svg [stroke="#aa4500"] { stroke: #5c2c0e; }
.map-dungeon svg [fill="#ffd3b5"] { fill: #d9b496; }
.map-dungeon svg [stroke="#d45500"] { stroke: #9a4a1a; }
.map-dungeon svg [fill="#f00"]    { fill: #b3261e; }

/* marker lettering: warm white with a dark rim, readable on any marker
   colour (hollow lettering, fill="none", keeps its look) */
.map-dungeon svg text:not([fill="none"]),
.map-dungeon svg text:not([fill="none"]) tspan:not([fill="none"]) {
    fill: #f4ead6;
    stroke: #160f0c;
    stroke-width: 0.7px;
    paint-order: stroke;
    stroke-linejoin: round;
}

.paper-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------- private-test gate (BB_SITE_PASSWORD) ---------- */
.gate {
    max-width: 30rem;
    margin: 3rem auto;
}

.gate-form {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
}

.gate-form .search-input {
    flex: 1;
    min-width: 0;
}

.gate-error {
    color: #d0574b;
    margin-top: 0.6rem;
}

/* Activity: where hunters are now */
.abroad-note { margin: 0 0 10px; }
.abroad-sub { margin: 14px 0 6px; font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted); }
.item-sub { display: block; color: var(--text-muted); font-size: 0.88rem; }

/* Enemy and boss art (bloodborne-wiki.com, with permission): a small gold-rimmed medallion */
.enemy-ic { width: 28px; height: 28px; border-radius: 50%; object-fit: contain; vertical-align: middle; margin-right: 8px;
    background: radial-gradient(circle, #1c1814 0%, #0c0a08 70%); box-shadow: 0 0 0 1.5px #b8944e, 0 0 6px rgba(212, 168, 71, 0.35); }
.item-icon.enemy { border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #1c1814 0%, #0c0a08 70%);
    box-shadow: 0 0 0 1.5px #b8944e, 0 0 6px rgba(212, 168, 71, 0.35); }
.item-icon.enemy img { width: 100%; height: 100%; object-fit: contain; }

/* A chart row's enemy: its portrait on hover or focus, over the bar */
.has-tip { position: relative; cursor: default; }
.bar-row.has-tip:hover .bar-label, .bar-row.has-tip:focus .bar-label,
td.has-tip:hover, td.has-tip:focus { color: var(--highlight-bright, #fff1d6); }
.has-tip:focus { outline: 1px solid rgba(212, 168, 71, 0.5); outline-offset: 2px; }
td.has-tip .enemy-tip { left: calc(100% - 12px); }
/* following the mouse (site.js sets left/top in viewport pixels) */
.enemy-tip.follow { position: fixed; transform: none; transition: opacity 0.12s ease; }
.enemy-tip { position: absolute; left: 150px; top: 50%; transform: translateY(-50%); z-index: 30; display: none;
    align-items: center; gap: 10px; padding: 8px 14px 8px 8px; pointer-events: none; opacity: 0; visibility: hidden;
    background: linear-gradient(180deg, #161b22, #0b0e12); border: 1px solid var(--rim, #5a4a30);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.85), 0 0 12px rgba(201, 169, 106, 0.15); transition: opacity 0.12s ease; }
.enemy-tip img { width: 84px; height: 84px; border-radius: 50%; object-fit: contain;
    background: radial-gradient(circle, #1c1814 0%, #0c0a08 70%); box-shadow: 0 0 0 2px #b8944e, 0 0 10px rgba(212, 168, 71, 0.4); }
.enemy-tip span { font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--highlight-gold, #e8c878); white-space: nowrap; }
.has-tip:hover .enemy-tip, .has-tip:focus .enemy-tip { display: flex; opacity: 1; visibility: visible; }
@media (max-width: 700px) { .enemy-tip { left: 40px; } }

/* A profile death's coordinates: a link to its spot on the map */
a.death-spot { color: var(--highlight-gold, #e8c878); text-decoration: underline dotted; text-underline-offset: 2px; }
a.death-spot:hover { color: #fff1d6; }
.hunter-fact .fact-ic { display: block; margin: 0 auto 6px; width: 44px; height: 44px; }

/* A player's name, wherever it is shown: their profile */
a.hunter-link { color: var(--highlight-gold, #e8c878); text-decoration: none; border-bottom: 1px dotted rgba(232, 200, 120, 0.5); }
a.hunter-link:hover { color: #fff1d6; border-bottom-color: currentColor; }

.fallen-note { color: var(--text-dim); font-style: italic; text-align: center; margin: 0 0 12px; }

/* A profile's characters */
.hunter-characters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hunter-character { font-family: 'Cinzel', serif; font-size: 0.8rem; color: var(--text-gold, #e8dcc0); padding: 3px 9px;
    border: 1px solid var(--rim, #5a4a30); background: linear-gradient(180deg, #161b22, #0b0e12); }
.hunter-character small { color: var(--text-muted); margin-left: 4px; }

/* A count's magnitude (site.js bbCount): 12.3K, 1.23M - the letter smaller,
   in the gold of the rims, so the figure reads first */
.num-mag {
    font-family: 'Cinzel', serif;
    font-size: 0.55em;
    margin-left: 0.08em;
    letter-spacing: 0.02em;
    color: var(--highlight-gold);
    vertical-align: 0.12em;
}
[data-n][title] { cursor: help; }

/* Deeds of the Hunt (Stats): five tiles */
.deeds-title {
    font-family: 'Cinzel', serif;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: var(--highlight-gold);
    text-align: center;
    margin: 0.5rem 0 1rem;
}
.hero-stats.deeds { grid-template-columns: repeat(5, 1fr); }
.hero-stats.deeds .stat-value { font-size: 2.3rem; }
.stat-sub { display: block; margin-top: 0.25rem; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: none; opacity: 0.75; }
@media (max-width: 1024px) { .hero-stats.deeds { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .hero-stats.deeds { grid-template-columns: repeat(2, 1fr); } .hero-stats.deeds .stat-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .hero-stats.deeds { grid-template-columns: 1fr; } }

/* Fastest Boss Clears: the build at the kill */
.lb-build { min-width: 15rem; }
.build-head { display: block; color: #e4dccb; font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 0.04em; }
.build-weps { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; margin: 0.2rem 0; }
.build-wep { font-size: 0.9rem; gap: 0.35rem; }
.build-wep img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)); }
.build-stats { display: block; font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.lb-tag { display: inline-block; margin-left: 0.35rem; padding: 0 0.35rem; font-size: 0.7rem; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--highlight-gold); border: 1px solid var(--rim-soft); vertical-align: 1px; }

/* Hunters Dreaming (activity): the hunter's hat in a lantern-gold ring, as on the map */
.item-icon.dreamer { border-radius: 50%; overflow: hidden; background: #0c0a08;
    box-shadow: 0 0 0 1.5px #e0b85a, 0 0 8px 1px rgba(232, 192, 96, 0.45); }
.item-icon.dreamer img { width: 118%; height: 118%; margin: -9% 0 0 -9%; object-fit: cover; }
/* a grid of uniform cells: every cell the same height and the same bottom
   line (the lists' between-items separator would mark only some of a row),
   each text line on one line, cut with an ellipsis (the whole in its title) */
.dreaming-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 1.5rem;
    align-items: stretch; }
.dreaming-list .data-item { margin: 0; min-height: 4.6rem; box-sizing: border-box;
    border-bottom: 1px solid rgba(190, 185, 170, 0.14); }
.dreaming-list .data-item::before { content: none; }
.dreaming-list .data-item.empty { grid-column: 1 / -1; border-bottom: none; }
.dreaming-list .item-text { min-width: 0; align-self: stretch; justify-content: flex-start; }   /* names line up across a row */
.dreaming-list .dream-head, .dreaming-list .dream-char, .dreaming-list .item-sub {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dreaming-list .dream-char { margin-left: 0; }   /* its own line: a long name never hides it */
.dream-head { display: block; }
.dream-head strong { display: inline; }
.dream-char { display: inline; margin-left: 0.5rem; font-size: 0.85rem; color: var(--text-muted); }

/* A build (templates/_build.html): weapons with their gems, runes and oath */
.build-weps { list-style: none; margin: 0.25rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.build-wep .gear-chip { font-size: 0.9rem; }
.build-wep .gear-chip img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)); }
.build-gems { list-style: none; margin: 0.1rem 0 0 2.1rem; padding: 0; }
.build-gem { font-size: 0.78rem; line-height: 1.35; color: #c9bfa8; }
.build-gem { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0.1rem 0; }
.gem-icon { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9)); }
.gem-none { display: inline-flex; align-items: center; justify-content: center; color: #8f6a5c; font-size: 0.9rem; }
.gem-fxs { padding-top: 0.15rem; }
.gem-flag { display: block; font-size: 0.72rem; color: #d07a4a; font-style: italic; }
.gem-fx + .gem-fx::before { content: "\00b7"; margin: 0 0.4rem; color: var(--text-dim); }
.gem-fx.curse { color: #c96a5c; }
.build-runes { list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; }
.build-rune { font-size: 0.78rem; color: var(--text-muted); }
.rune-name { color: var(--highlight-gold); font-family: 'Cinzel', serif; font-size: 0.74rem; letter-spacing: 0.03em; }
.gem-icon.gem-unknown { filter: grayscale(0.85) brightness(1.5) drop-shadow(0 0 2px rgba(208, 122, 74, 0.8)); }
.gem-times { font-weight: 600; color: #e4dccb; }