/* ---- Tokens, copied verbatim from ~/el/el-bots/web/templates/index.html
   so this page shares its exact palette/typography rather than a re-derived
   approximation. Only the categorical --c-* series (below) is this page's
   own, since el-bots has no equivalent. ---------------------------------- */
:root {
    --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
    --font-body:    'Ubuntu', system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --ink:          #2c1a08;
    --ink-soft:     #3d2810;
    --ink-muted:    #5c4830;
    --ink-faint:    #654f2d;

    --parch-lit:    #faf4e8;
    --parch:        #f2e8d5;
    --parch-page:   #d8cbb0;
    --parch-sunk:   #d6c9ae;
    --parch-deep:   #cbbfa2;
    --parch-panel:  #c8b898;

    --gilt:         #8b7040;
    --gilt-lo:      #6b5030;
    --gilt-inset:   #5c4828;
    --gilt-hi:      #9a8050;
    --gilt-hi2:     #d9bd77;
    --gilt-hi-lo:   #7a5c38;
    --gilt-lit:     #c0a850;
    --gilt-lit-lo:  #a08838;
    --gilt-bright:  #e8c874;
    --leather:      #4a3520;
    /* The market page's own teal for "a page away" - same colour, so the
       cross-page nav reads as one family of links on all three pages. */
    --tool:         #25646f;
    --tool-lit:     #1b4d56;
    --umber:        #2a1e12;

    --face:         linear-gradient(180deg, #6d5836 0%, #5a472a 46%, #3e301c 100%);
    --face-hi:      linear-gradient(180deg, #74603c 0%, #5f4b2e 46%, #453722 100%);
    --face-on:      linear-gradient(180deg, #ebc97a 0%, #d3ad58 46%, #a8893f 100%);

    --on-dark:      #f0e0c0;
    --on-dark-soft: #e8d8b0;
    /* Lettering engraved into the lit gold rather than bleached onto any
       gold - see the market page's --face comment. */
    --on-gilt:      #33240f;

    --raise:        0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
    --raise-hi:     0 3px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
    --pressed:      inset 0 2px 5px rgba(0,0,0,0.4);

    --press-t:      0.1s;
    --press-ease:   cubic-bezier(.2,.7,.3,1);
    --tint-t:       0.15s;
    --enter-t:      0.26s;
    --enter-ease:   cubic-bezier(.16,1,.3,1);
    --spring:       cubic-bezier(.34,1.56,.64,1);

    --success:      #2a6b2e;
    --success-deep: #1f5423;

    --panel-shadow: 0 2px 7px rgba(74,53,32,0.18);
    --radius:       6px;
    --radius-sm:    4px;

    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    font-size: 13.5px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--ink);
    background-color: #4a3a26;
    background-image:
        radial-gradient(ellipse 80% 55% at 50% -5%, rgba(190,158,100,0.26), transparent 70%),
        radial-gradient(ellipse 120% 85% at 50% 45%, transparent 45%, rgba(0,0,0,0.45) 100%),
        repeating-linear-gradient(0deg,  transparent 0 2px, rgba(0,0,0,0.045) 2px 4px),
        repeating-linear-gradient(90deg, transparent 0 2px, rgba(0,0,0,0.045) 2px 4px);
    background-attachment: fixed;
    min-height: 100vh;
    padding: 30px 20px;
}

::selection { background: var(--gilt); color: #fff8e7; }
html { scrollbar-width: thin; scrollbar-color: var(--gilt) #3a2d1d; }
html::-webkit-scrollbar { width: 13px; }
html::-webkit-scrollbar-track { background: #3a2d1d; }
html::-webkit-scrollbar-thumb { background: var(--gilt); border: 3px solid #3a2d1d; border-radius: 7px; }
html::-webkit-scrollbar-thumb:hover { background: #a68a52; }

:focus-visible { outline: 2px solid var(--gilt-lit); outline-offset: 2px; }

/* Item description tooltip - el-bots' own #itemTooltip verbatim. */
#itemTooltip {
    position: fixed;
    max-width: 340px;
    padding: 10px 14px;
    background: var(--ink);
    color: var(--on-dark);
    border: 1px solid var(--gilt);
    box-shadow: 0 6px 16px rgba(0,0,0,0.5);
    font-size: 12px;
    font-family: var(--font-body);
    line-height: 1.4;
    white-space: pre-line;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
    transition: opacity 0.13s ease, transform 0.13s var(--enter-ease), visibility 0.13s;
}
#itemTooltip.show { opacity: 1; visibility: visible; transform: none; }

/* ---- The leather-bound book frame, same as el-bots' .container/.inner --- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    background-color: var(--parch-page);
    background-image:
        radial-gradient(ellipse 55% 40% at 16% 10%, rgba(255,250,232,0.55), transparent 60%),
        radial-gradient(ellipse 50% 45% at 84% 26%, rgba(150,124,84,0.16), transparent 60%),
        radial-gradient(ellipse 60% 35% at 28% 72%, rgba(150,124,84,0.13), transparent 60%),
        radial-gradient(ellipse 45% 40% at 76% 94%, rgba(255,250,232,0.34), transparent 60%);
    border: 3px solid var(--leather);
    box-shadow:
        0 0 0 1px var(--gilt),
        inset 0 0 0 1px rgba(255,246,224,0.35),
        inset 0 0 40px rgba(120,95,58,0.16),
        0 25px 50px rgba(0,0,0,0.55);
    position: relative;
    overflow: hidden;
}
.container::before, .container::after {
    content: '';
    display: block;
    height: 20px;
    background:
        radial-gradient(circle at 11px 44%,
            rgba(255,236,196,0.85) 0 2.1px,
            rgba(198,166,104,0.95) 2.1px 3.4px,
            rgba(58,42,20,0.95)    3.4px 4.6px,
            transparent            5.0px) 0 0 / 22px 100% repeat-x,
        linear-gradient(to bottom, #7a6039 0%, #57411f 45%, #3a2a13 100%);
    box-shadow: inset 0 1px 0 rgba(255,228,178,0.28), inset 0 -1px 0 rgba(0,0,0,0.45);
}
.container::before { border-bottom: 2px solid var(--leather); }
.container::after  { border-top: 2px solid var(--leather); }

.inner {
    padding: 30px 40px;
    position: relative;
    background-image: var(--grain);
}
@media (max-width: 600px) {
    .inner { padding: 20px 16px; }
}

h1 {
    font-family: var(--font-display);
    color: var(--ink);
    margin-bottom: 6px;
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow: 0 1px 0 rgba(255,250,235,0.6), 0 -1px 0 rgba(74,53,32,0.25);
}
.subtitle {
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.95rem;
    max-width: 62ch;
    margin: 0 auto;
    line-height: 1.55;
}
header.hero { margin-bottom: 22px; }

/* Same convention as el-bots' /eltime page: a plain back-link, not a
   full nav bar - this is a satellite page, not a peer with its own tab
   set. */
/* The arrow already says "this goes somewhere"; the underline says it is
   a link at all, which a bare brown line of text beside a logo did not. */
/* Every destination, on every page - see the markup. */
.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 18px;
    font-size: 12.5px;
    color: var(--ink-muted);
}
.site-nav a {
    color: var(--tool);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.site-nav a:hover { color: var(--tool-lit); }
.site-nav [aria-current="page"] { color: var(--ink); font-weight: 600; }
/* The page's descriptive line and the night switch share one row:
   the text stays centred on the sheet (the 56px outer columns match
   the switch, so it is centred on the page and not on the space left
   over by the control), and the switch sits at the right edge where
   a setting belongs. Narrow screens stack it, still centred. */
.subtitle-row {
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    align-items: center;
    gap: 12px;
    margin: 2px 0 12px;
}
.subtitle-row .subtitle,
.subtitle-row .gamedate {
    grid-column: 2;
    text-align: center;
    margin: 0;
    min-width: 0;
}
.subtitle-row .theme-switch { grid-column: 3; justify-self: end; }
@media (max-width: 640px) {
    .subtitle-row { grid-template-columns: 1fr; gap: 8px; }
    .subtitle-row .subtitle,
    .subtitle-row .gamedate,
    .subtitle-row .theme-switch { grid-column: 1; }
    .subtitle-row .theme-switch { justify-self: center; }
}
/* The switch as a small sky, not a generic slider: by day the knob is a
   warm sun disc, by night a pale moon, so which theme you are in reads
   off the knob itself before any icon does. The track is a sunken slot
   (inset shade) so it reads as something to press; the old flat pill with
   a faint off-icon read as decoration. Icons sit exactly on the knob's two
   resting centres (13px and 41px across the 54px padding box). */
.theme-switch {
    position: relative;
    flex: none;
    width: 56px;
    height: 28px;
    padding: 0;
    background: var(--parch-sunk);
    border: 1px solid var(--gilt);
    border-radius: 14px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.30);
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.theme-switch:hover { border-color: var(--gilt-hi); }
.theme-switch:focus-visible { outline: 2px solid var(--gilt-lit); outline-offset: 2px; }
.theme-switch .ts-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fbe9b0, #e2b857 55%, #b98a2e);
    box-shadow: 0 1px 2px rgba(40,25,10,0.45), 0 0 8px rgba(233,183,80,0.55);
    transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1),
                background 0.3s ease, box-shadow 0.3s ease;
}
.theme-switch:hover .ts-knob {
    box-shadow: 0 1px 2px rgba(40,25,10,0.45), 0 0 12px rgba(233,183,80,0.8);
}
.theme-switch .ts-sun,
.theme-switch .ts-moon {
    position: absolute;
    top: 6px;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: color 0.25s ease, opacity 0.25s ease;
}
.theme-switch .ts-sun { left: 6px; color: #5a3d12; }
.theme-switch .ts-moon { left: 34px; color: var(--ink-muted); opacity: 0.8; }
.theme-switch[aria-pressed="true"] .ts-knob {
    transform: translateX(28px);
    background: radial-gradient(circle at 35% 30%, #fbf4de, #e3d6b0 55%, #b3a174);
    box-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 8px rgba(236,226,196,0.35);
}
.theme-switch[aria-pressed="true"]:hover .ts-knob {
    box-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 12px rgba(236,226,196,0.6);
}
.theme-switch[aria-pressed="true"] .ts-sun { color: var(--ink-muted); opacity: 0.8; }
.theme-switch[aria-pressed="true"] .ts-moon { color: #2a2418; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .theme-switch .ts-knob, .theme-switch .ts-sun, .theme-switch .ts-moon { transition: none; }
}

/* ---- Tabs, el-bots' .tab button verbatim ---- */
.tab-bar { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 22px 0; }
.tab {
    background: var(--face);
    color: var(--on-dark);
    border: 1px solid var(--leather);
    border-bottom-color: var(--ink);
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
    padding: 9px 26px;
    font-size: 12px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: var(--raise);
    transition: transform var(--press-t) var(--press-ease), box-shadow var(--press-t) ease,
                background var(--tint-t) ease, color var(--tint-t) ease;
}
.tab:hover { background: var(--face-hi); transform: translateY(-1px); box-shadow: var(--raise-hi); }
.tab:active { transform: translateY(1px); box-shadow: var(--pressed); }
.tab.active { background: var(--face-on); color: var(--on-gilt); box-shadow: var(--raise), 0 0 16px rgba(216,185,119,0.55); }

/* ---- Section headings ---- */
h2.section-title {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gilt-lo);
    margin: 0 0 12px;
}

/* ---- Panels, el-bots' .panel/.panel-header/.panel-body verbatim ---- */
.panel {
    background-color: var(--parch-panel);
    background-image: var(--grain);
    border: 1px solid var(--gilt);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),
                inset 0 -1px 0 rgba(0,0,0,0.1),
                var(--panel-shadow);
    margin-bottom: 20px;
}
.panel-header {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gilt-hi) 32%, var(--gilt-lo)) 0%,
        color-mix(in srgb, var(--gilt-lo) 78%, var(--gilt-inset)) 52%,
        var(--gilt-inset) 100%);
    box-shadow: inset 0 1px 0 rgba(255,238,196,0.45), inset 0 -1px 0 rgba(0,0,0,0.28);
    border-bottom: 1px solid #6d5530;
    padding: 10px 16px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--on-dark);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.panel-header .count {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--on-dark-soft);
    background: rgba(0,0,0,0.20);
    padding: 2px 9px;
    border-radius: 999px;
}
.panel-body { padding: 18px; }

/* ---- Master-detail: a chip list of bosses, el-bots' own .bot-btn (a flat
   parchment chip at rest, becomes the gilt button on hover/active) plus one
   detail panel for whichever is selected. ------------------------------- */
.boss-layout { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start; }
@media (max-width: 720px) { .boss-layout { grid-template-columns: 1fr; } }

.bot-grid { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 20px; }
@media (max-width: 720px) { .bot-grid { position: static; flex-direction: row; flex-wrap: wrap; } }

.bot-btn {
    padding: 9px 16px;
    font-size: 12.5px;
    font-family: var(--font-body);
    letter-spacing: 0.5px;
    background: var(--parch-sunk);
    color: var(--ink);
    border: 1px solid var(--gilt);
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,250,235,0.5);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform var(--press-t) var(--press-ease), box-shadow var(--press-t) ease,
                background var(--tint-t) ease, color var(--tint-t) ease;
}
.bot-btn .bot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bot-btn:hover { box-shadow: var(--raise-hi); transform: translateY(-1px); }
/* Bigger than the base 26px .logo-icon/.logo-tile - this is the one
   place a creature portrait is the whole point of the row, not a small
   aside next to other content (contrast the rare-item list, where the
   icon is secondary to the name/stats). */
.bot-btn .logo-icon, .bot-btn .logo-tile { width: 34px; height: 34px; }
.bot-btn .logo-tile { font-size: 0.72rem; }

/* Logo placeholder - a tinted tile with initials, meant to be swapped for
   real creature/rare artwork once it exists. */
.logo-tile {
    width: 26px; height: 26px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: linear-gradient(160deg, var(--gilt-hi2) 0%, var(--gilt) 55%, var(--gilt-lo) 100%);
    border: 1px solid var(--gilt-inset);
    box-shadow: inset 0 1px 0 rgba(255,244,214,0.45), 0 1px 2px rgba(0,0,0,0.18);
    color: var(--on-gilt);
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
    user-select: none;
}
.bot-btn.active .logo-tile {
    background: linear-gradient(160deg, #fff0c4 0%, var(--gilt-hi2) 60%, var(--gilt-hi) 100%);
    color: var(--umber);
    text-shadow: none;
}
/* Real artwork (el-bots item icons AND el-db creature portrait photos
   share this class - see logoFor() in app.js), used in place of
   .logo-tile wherever we have one. */
.logo-icon {
    width: 26px; height: 26px;
    flex: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(160deg, var(--gilt-hi2) 0%, var(--gilt) 55%, var(--gilt-lo) 100%);
    border: 1px solid var(--gilt-inset);
    box-shadow: inset 0 1px 0 rgba(255,244,214,0.45), 0 0 0 1px rgba(255,247,226,0.45), 0 1px 2px rgba(0,0,0,0.18);
    object-fit: contain;
    padding: 3px;
}
/* But a game item icon (rare-drop list) isn't a photo - it's the exact
   same pixel art el-bots itself shows, so it gets el-bots' own
   .itemicon treatment instead of the creature-portrait one above: a
   plain dark backing rather than a gold tint (the gradient is a
   *placeholder* treatment for the no-art-yet initials tile, wrongly
   inherited here for real icons too), no padding shrinking it down,
   and pixelated rendering so it stays crisp instead of blurring when
   scaled - none of which apply to a JPG creature photo. */
.rare-icon .logo-icon {
    background: var(--ink);
    border: 1px solid var(--gilt);
    border-radius: 3px;
    box-shadow: none;
    object-fit: fill;
    padding: 0;
    image-rendering: pixelated;
}
.bot-btn.active {
    background: var(--face-on);
    color: var(--on-gilt);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
    box-shadow: var(--raise), 0 0 12px rgba(216,185,119,0.4);
}

.monster-panel .panel-header { border-left: 5px solid var(--accent); }

.stat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.stat-tile { background: var(--parch); border-radius: var(--radius-sm); padding: 10px 6px; text-align: center; border: 1px solid var(--parch-deep); }
.stat-tile.value { background: color-mix(in srgb, var(--success) 12%, var(--parch)); border-color: color-mix(in srgb, var(--success) 30%, var(--parch-deep)); }
.stat-tile .n { font-family: var(--font-mono); font-weight: 700; font-size: 1.3rem; font-variant-numeric: tabular-nums; color: var(--ink); display: block; }
.stat-tile .l { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); }

/* el-db-style min/max ("0 to 150,000 Gold Coins") - its own small card,
   same visual language as .rare-item below it, sitting between the
   chart and the rares list rather than folded into a stat tile. */
.gold-range-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-top: 10px;
    background: var(--parch);
    border: 1px solid var(--parch-deep);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
.gold-range-card .itemicon {
    width: 26px; height: 26px;
    flex: none;
    image-rendering: pixelated;
    border: 1px solid var(--gilt);
    border-radius: 3px;
    background: var(--ink);
}
.gold-range-card .gold-range-text {
    font-family: var(--font-mono);
    font-size: 0.86rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* ---- Chart: gold-per-kill histogram + density overlay ---- */
.hist-title {
    font-family: var(--font-display);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gilt-lo);
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.chart-back-btn {
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.72rem;
    color: var(--accent, #2f7d8c);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--tint-t) ease;
}
.chart-back-btn:hover, .chart-back-btn:focus-visible { text-decoration-color: currentColor; }
.chart-wrap {
    position: relative;
    border: 1px solid var(--gilt);
    border-radius: var(--radius);
    background-color: #f6eeda;
    background-image:
        var(--grain),
        linear-gradient(180deg, #fbf4e3 0%, #ecdec0 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,252,242,0.7),
        inset 0 0 0 1px rgba(255,250,235,0.4),
        inset 0 2px 8px rgba(74,53,32,0.12),
        0 2px 6px rgba(74,53,32,0.18);
    padding: 16px 14px 10px;
}
/* Deliberately NOT position:relative - .chart-tip is absolute and is placed
   in .chart-wrap's coordinates (see wireHistogram), so the frame must stay
   static or the tooltip ends up offset by the wrap's padding. */
.chart-frame { position: static; }
/* pan-y: a vertical drag still scrolls the page; a horizontal one is
   delivered as pointer events so the tooltip can be scrubbed. Without it the
   browser claimed the gesture and a scrub scrolled instead. */
svg.hist { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
/* The chart is focusable (keyboard users can step through the buckets), so
   it needs a visible focus ring like every other control on the page. */
svg.hist:focus-visible { outline: 2px solid var(--gilt-lit); outline-offset: -2px; }
.plot-bg { fill: url(#plotBg); stroke: var(--parch-deep); stroke-width: 1; }
/* A soft light from the top of the plot, so the surface reads as a lit panel
   rather than a flat fill. */
.plot-glow { fill: url(#plotGlow); pointer-events: none; }
.chart-grid { stroke: rgba(139,112,64,0.20); stroke-width: 1; stroke-dasharray: 1 5; }
.chart-grid-v { stroke: rgba(139,112,64,0.14); stroke-width: 1; stroke-dasharray: 1 6; }
/* Decade subdivisions on the log x-axis - just enough to read a value
   between the labelled 1/2/5 marks without competing with them. */
.chart-grid-v-minor { stroke: rgba(139,112,64,0.07); stroke-width: 1; }
.chart-axis { stroke: var(--gilt-lo); stroke-width: 1.3; opacity: 0.85; }
.chart-ylabel {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    fill: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
.chart-xlabel {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    fill: var(--ink-muted);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.chart-axis-title {
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    fill: var(--gilt-lo);
    opacity: 0.85;
}
/* The two averages, dropped straight onto the plot as dashed rules. */
.chart-mean { stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0.65; }
.chart-mean.is-gold { stroke: #a87c1d; }
.chart-mean.is-total { stroke: #1e5560; }
.chart-mean-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    /* A cream halo (stroke painted under the fill) so the label stays legible
       over a bar or the curve, not just over empty parchment. */
    paint-order: stroke;
    stroke: #fffaf0;
    stroke-width: 3px;
    stroke-linejoin: round;
}
.chart-mean-label.is-gold { fill: #8a6512; }
.chart-mean-label.is-total { fill: #1e5560; }

.hist-bar {
    fill: url(#histGradGold);
    transition: filter 0.12s ease;
}
/* The modal kill, a touch brighter than the bars either side of it. */
.hist-bar.peak { fill: url(#histGradGoldPeak); }
.hist-bar.active { filter: brightness(1.1) saturate(1.12) drop-shadow(0 0 4px rgba(201,150,42,0.7)); }
.hist-area { fill: url(#histGradTotal); pointer-events: none; }
.hist-line {
    fill: none;
    stroke: url(#lineGrad);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(47,125,140,0.35));
    pointer-events: none;
}
/* Bars grow out of the baseline, the area breathes in, then the curve draws
   itself. Purely an arrival cue - nothing here carries meaning, so it is
   switched off for anyone who asked for less motion. */
/* Where the OS asks for more contrast, firm the hairlines up and darken the
   secondary text - the same pass the market page makes. */
@media (prefers-contrast: more) {
    .panel, .chart-wrap, .rare-item, .bar-track, .stat-tile, .boss-layout { border-color: var(--ink-soft); }
    .subtitle, .rares-title, .rare-foot, .unit-price, .price-note,
    .stat-tile .l, footer.note, .chart-note { color: var(--ink-soft); }
    .panel-header, .stat-tile .l { text-shadow: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .hist-bar {
        transform-box: fill-box;
        transform-origin: bottom;
        animation: barGrow 520ms cubic-bezier(.2,.8,.25,1) both;
        /* Capped at 18 steps (~230ms). Uncapped, a wide-amount chart - 591
           unit bins, before the bucketing fix - had the last bar waiting
           ten seconds to appear, which read as the chart failing to draw. */
        animation-delay: calc(min(var(--i, 0), 18) * 13ms);
    }
    .hist-area { animation: areaFade 720ms ease both; animation-delay: 170ms; }
    .hist-line {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: lineDraw 780ms cubic-bezier(.3,.8,.3,1) both;
        animation-delay: 130ms;
    }
}
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes areaFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lineDraw { to { stroke-dashoffset: 0; } }
.hist-hover { transition: opacity 0.12s ease; pointer-events: none; }
.hist-hover rect { fill: rgba(255,246,224,0.22); stroke: var(--gilt-lit); stroke-width: 1; }
.hist-hover circle { fill: #2f7d8c; stroke: var(--parch-lit); stroke-width: 1.5; }
.chart-hit { cursor: crosshair; }
.chart-empty { padding: 48px 12px; text-align: center; color: var(--ink-faint); font-size: 0.82rem; }

.chart-tip {
    position: absolute;
    z-index: 5;
    min-width: 158px;
    pointer-events: none;
    background: linear-gradient(180deg, #3a2c18 0%, #241a0e 100%);
    color: var(--on-dark);
    border: 1px solid var(--gilt);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,238,196,0.2);
    font-size: 0.76rem;
}
.chart-tip .tip-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--gilt-hi2);
    margin-bottom: 6px;
}
/* Four columns - swatch · label · kills · share. The two right-hand ones are
   right-aligned and tabular, so 5 and 18 line up (and 3.0% with 10.9%),
   instead of each row right-aligning as one ragged string. */
.chart-tip .tip-head,
.chart-tip .tip-row {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: center;
    column-gap: 8px;
    line-height: 1.7;
}
.chart-tip .tip-head {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #a8916a;
    margin-bottom: 1px;
}
.chart-tip .tip-head b { text-align: right; font-weight: 600; }
.chart-tip .tip-row i { width: 12px; height: 3px; border-radius: 2px; }
.chart-tip .sw-gold { background: #c9962a; }
.chart-tip .sw-total { background: #2f7d8c; }
.chart-tip .tip-row span { color: var(--on-dark-soft); }
.chart-tip .tip-row b {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.chart-tip .tip-share { min-width: 44px; }

.chart-legend {
    display: flex; gap: 20px; justify-content: center; align-items: center; flex-wrap: wrap;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid rgba(139,112,64,0.28);
    font-size: 0.76rem; color: var(--ink-soft); letter-spacing: 0.01em;
}
.chart-legend span { display: flex; align-items: center; gap: 7px; }
/* "(bars)" / "(line)" - which mark each series is drawn with. */
.chart-legend em { font-style: normal; font-size: 0.86em; color: var(--ink-faint); }
.chart-legend i { display: inline-block; width: 14px; height: 11px; border-radius: 3px; }
.chart-legend i.sw-gold-bar { background: linear-gradient(180deg, #f2d488, #c9962a 55%, #a87c1d); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
.chart-legend i.ln-total { width: 18px; height: 0; border-top: 2.6px solid #2f7d8c; border-radius: 0; }
/* Sample size + averages on their own centred line under the swatches. */
.chart-legend .legend-hint {
    flex-basis: 100%;
    text-align: center;
    font-size: 0.7rem; font-style: italic; color: var(--ink-muted);
    letter-spacing: 0.005em;
}

@media (max-width: 560px) { .chart-legend .legend-hint { font-size: 0.66rem; } }

.rares-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ink-faint); margin: 20px 0 10px;
}
.rares-title::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--parch-deep), transparent);
}
.rares-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--gilt) var(--parch-sunk);
}
.rare-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--parch);
    border: 1px solid var(--parch-deep);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
    transition: border-color var(--tint-t) ease, box-shadow var(--tint-t) ease, transform var(--press-t) var(--press-ease);
}
.rare-item:hover { border-color: var(--gilt); box-shadow: var(--panel-shadow); transform: translateY(-1px); }
/* Clickable-to-chart items are marked in the *page's* own metal, not the
   chart's accent teal: a cool tint on a warm card read as a foreign UI
   colour bolted on (and it clashed with the orange item icons), in both
   themes. Gilt still makes the affordance visible at a glance without
   leaving the palette. */
.rare-item.has-dist {
    cursor: pointer;
    background: color-mix(in srgb, var(--gilt) 7%, var(--parch));
    border-color: color-mix(in srgb, var(--gilt) 45%, var(--parch-deep));
}
.rare-item.has-dist:hover {
    border-color: var(--gilt-hi);
    background: color-mix(in srgb, var(--gilt) 15%, var(--parch));
}
.rare-item.has-dist:focus-visible { outline: 2px solid var(--gilt-lit); outline-offset: 1px; }
/* The item currently charted - a stronger fill plus a persistent border,
   since :hover alone would stop showing which one is active the moment
   the pointer moves away. */
.rare-item.has-dist.charted {
    background: color-mix(in srgb, var(--gilt) 22%, var(--parch));
    border-color: var(--gilt-lit);
    box-shadow: var(--panel-shadow), inset 0 0 0 1px var(--gilt-lit);
}
.rare-icon { display: flex; }
.rare-icon .logo-tile { width: 30px; height: 30px; font-size: 0.66rem; }
.rare-icon .logo-icon { width: 30px; height: 30px; }
.rare-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rare-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* Same weight/color as el-bots' own .item-link - an item name is bold
   ink there, not the lighter/regular ink-soft this used. */
/* Underlined at rest, same rule as el-bots' own item links: an item name
   that goes somewhere says so without waiting for a pointer, because a
   phone never gives it one. */
.rare-name {
    font-size: 0.82rem; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-decoration: underline; text-decoration-color: var(--gilt);
    text-decoration-thickness: 1px; text-underline-offset: 2px;
    cursor: pointer;
}
.rare-name:hover { color: var(--link-hover); text-decoration-color: currentColor; }
.rare-pct { flex: none; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bar-track { display: block; height: 7px; background: var(--parch-sunk); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.16); }
.bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: var(--accent);
    background-image: linear-gradient(90deg, rgba(255,255,255,0.4), rgba(255,255,255,0) 70%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.rare-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 0.68rem; color: var(--ink-faint); }
.rare-qty { font-family: var(--font-mono); }
.unit-price { font-family: var(--font-mono); opacity: 0.75; }
.rare-foot .ev { font-family: var(--font-mono); color: color-mix(in srgb, var(--success) 72%, var(--ink-muted)); }
.price-note { font-size: 0.7rem; color: var(--ink-faint); margin-top: 10px; }

/* The whole rares block on a phone. Three separate desktop assumptions
   stop holding at ~360px of text width:

   1. the 360px inner scroll put the list behind a second scrollbar,
      inside the page's own - a nested scroll region on a touch screen.
      The list is only a dozen-odd items; let the page carry it.
   2. .rare-foot's two ends each got half a ~300px row, so
      "≈5.6k gc/kill" broke after "≈5.6k" with "gc/kill" stranded under
      it. Stacked, every line is a whole thought.
   3. the note above the list is three sentences of explanation, not a
      heading - uppercase + letter-spacing turned it into five lines of
      shouting. Sentence case sets it as the prose it is, and the leader
      rule that follows a short heading has nothing to attach to. */
@media (max-width: 720px) {
    .rares-list {
        grid-template-columns: 1fr;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
    .rares-title {
        text-transform: none;
        letter-spacing: 0.01em;
        font-size: 0.74rem;
        line-height: 1.45;
        align-items: flex-start;
    }
    .rares-title::after { display: none; }
    .rare-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .rare-foot .ev { white-space: nowrap; }
}

footer.note {
    margin-top: 24px;
    font-size: 0.78rem;
    color: var(--ink-faint);
    text-align: center;
    max-width: 74ch;
    margin-inline: auto;
    line-height: 1.55;
}

/* ===================== Night =====================
   The market page's dark palette, re-lit onto this sheet - the same
   identity at night, not a second design: page near-black, sheet a dark
   leaf, ink becomes lamplight, gilt stays gold. Most of this is the
   token block; the rest names the handful of colours that live outside
   the tokens, plus the chart's own SVG gradients (app.js emits a dark
   pair alongside the day ones; these rules pick which the plot paints
   with, so a theme flip is CSS-only and needs no re-render). */
:root[data-theme="dark"] {
    color-scheme: dark;
    --ink:          #ecd9b0;
    --ink-soft:     #dcc79c;
    --ink-muted:    #bda87f;
    --ink-faint:    #b5a07a;

    --parch-lit:    #43341f;
    --parch:        #3a2c18;
    --parch-page:   #2b2113;
    --parch-sunk:   #2a2013;
    --parch-deep:   #16110a;
    --parch-panel:  #131009;

    --gilt:         #b08a48;
    --gilt-lo:      #75592f;
    --gilt-inset:   #4e3c20;
    --gilt-hi:      #b3945c;
    --gilt-hi-lo:   #8a6a40;
    --gilt-lit:     #d4b268;
    --gilt-lit-lo:  #b0924e;
    --gilt-bright:  #f0d488;
    --leather:      #0f0a05;
    --umber:        #0b0704;

    /* The gilt family after dark: rest and hover to dark bronze, the lit
       face to deep antique gold - the day's bright leaf with its cream
       text measured 2.3:1 and was the brightest thing on the page. */
    --face:         linear-gradient(180deg, #6d5836 0%, #5a472a 46%, #3e301c 100%);
    --face-hi:      linear-gradient(180deg, #816a43 0%, #6c5533 46%, #4c3b22 100%);
    --face-on:      linear-gradient(180deg, #8f7130 0%, #745c26 46%, #57431c 100%);

    --on-dark:      #f2e4c4;
    --on-dark-soft: #e4d2ac;
    --on-gilt:      #f6e8c8;

    --raise:        0 2px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,236,196,0.10);
    --raise-hi:     0 3px 6px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,236,196,0.10);
    --pressed:      inset 0 2px 5px rgba(0,0,0,0.6);

    --success:      #86bd8a;
    --success-deep: #a3cba6;
    --tool:         #8fb3ae;
    --tool-lit:     #a9c9c3;
    --panel-shadow: 0 2px 7px rgba(0,0,0,0.45);
}
:root[data-theme="dark"] body {
    background-color: #0a0b10;
    background-image:
        radial-gradient(ellipse 90% 60% at 50% -8%, rgba(214,160,90,0.22), transparent 72%),
        radial-gradient(ellipse 120% 85% at 50% 45%, transparent 42%, rgba(0,0,0,0.7) 100%),
        repeating-linear-gradient(0deg,  transparent 0 2px, rgba(0,0,0,0.05) 2px 4px),
        repeating-linear-gradient(90deg, transparent 0 2px, rgba(0,0,0,0.05) 2px 4px);
}
:root[data-theme="dark"] .container {
    background-image:
        radial-gradient(ellipse 55% 40% at 16% 10%, rgba(214,170,105,0.18), transparent 60%),
        radial-gradient(ellipse 50% 45% at 84% 26%, rgba(0,0,0,0.28), transparent 60%),
        radial-gradient(ellipse 60% 35% at 28% 72%, rgba(0,0,0,0.22), transparent 60%),
        radial-gradient(ellipse 45% 40% at 76% 94%, rgba(214,170,105,0.07), transparent 60%);
    box-shadow:
        0 0 0 1px var(--gilt),
        inset 0 0 0 1px rgba(255,236,196,0.09),
        inset 0 0 44px rgba(0,0,0,0.4),
        0 25px 60px rgba(0,0,0,0.8);
}
:root[data-theme="dark"] .container::before,
:root[data-theme="dark"] .container::after {
    background:
        radial-gradient(circle at 11px 44%,
            rgba(255,236,196,0.45) 0 2.1px,
            rgba(180,150,92,0.95) 2.1px 3.4px,
            rgba(24,16,9,0.95)    3.4px 4.6px,
            transparent            5.0px) 0 0 / 22px 100% repeat-x,
        linear-gradient(to bottom, #4e3c20 0%, #33240f 45%, #1c1309 100%);
    box-shadow: inset 0 1px 0 rgba(255,228,178,0.14), inset 0 -1px 0 rgba(0,0,0,0.6);
}
:root[data-theme="dark"] h1 {
    text-shadow: 0 1px 0 rgba(255,236,196,0.12), 0 -1px 0 rgba(0,0,0,0.5);
}
:root[data-theme="dark"] .panel {
    /* same idea as the market's: light caught along the top of the card */
    background-image: linear-gradient(180deg, rgba(255,236,196,0.045), rgba(255,236,196,0) 58%),
                      var(--grain);
    box-shadow: inset 0 1px 0 rgba(255,236,196,0.09),
                inset 0 -1px 0 rgba(0,0,0,0.5),
                var(--panel-shadow);
}
:root[data-theme="dark"] .panel-header {
    background: linear-gradient(180deg, #6b5330 0%, #57431f 55%, #443318 100%);
    border-bottom-color: #4e3c20;
    box-shadow: inset 0 1px 0 rgba(255,238,196,0.22), inset 0 -1px 0 rgba(0,0,0,0.45);
}
/* The active monster tile's own gold plate, same treatment as the faces. */
:root[data-theme="dark"] .bot-btn.active .logo-tile {
    background: linear-gradient(160deg, #8f7130 0%, #745c26 60%, #57431c 100%);
}
:root[data-theme="dark"] .rare-item,
:root[data-theme="dark"] .gold-range-card {
    box-shadow: inset 0 1px 0 rgba(255,236,196,0.07);
}
:root[data-theme="dark"] .logo-tile {
    box-shadow: inset 0 1px 0 rgba(255,244,214,0.20), 0 1px 2px rgba(0,0,0,0.4);
}
:root[data-theme="dark"] .bot-btn {
    /* content edges go quiet at night - see app.css */
    border-color: #4a3a22;
    box-shadow: inset 0 1px 0 rgba(255,250,235,0.16);
}
/* The tooltip is a dark card in daylight because dark-on-light was the
   readable direction; at night it lifts a step off the sheet instead of
   inverting into a light box with light text in it. */
:root[data-theme="dark"] #itemTooltip {
    background: #3d3020;
    color: var(--ink);
}
/* Chart and section lettering at night. These keep their day colours in
   the day sheet (dark gold on parchment), which on a dark plot measured
   1.6-2.9:1 - the axis title, the two average labels and their dashed
   rules, and the sidebar/panel headings. Same hues, lit for night. */
:root[data-theme="dark"] .section-title,
:root[data-theme="dark"] .hist-title,
:root[data-theme="dark"] .chart-axis-title { fill: var(--gilt-lit); color: var(--gilt-lit); }
:root[data-theme="dark"] .chart-mean.is-gold { stroke: #d9a63f; }
:root[data-theme="dark"] .chart-mean.is-total { stroke: #5aa6b4; }
:root[data-theme="dark"] .chart-mean-label.is-gold { fill: #e8c46a; }
:root[data-theme="dark"] .chart-mean-label.is-total { fill: #7cc7d2; }

/* The plot: a dark surface under the same gold bars. The gradient pairs
   live in app.js's <defs>; both exist in the DOM, so switching which one
   the plot paints with is a stylesheet change, not a re-render. */
:root[data-theme="dark"] .chart-wrap {
    background-color: #382c1a;
    background-image: var(--grain), linear-gradient(180deg, #40331f 0%, #33281a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,236,196,0.08),
        inset 0 0 0 1px rgba(255,236,196,0.05),
        inset 0 2px 8px rgba(0,0,0,0.4),
        0 2px 6px rgba(0,0,0,0.4);
}
:root[data-theme="dark"] .plot-bg { fill: url(#plotBgDark); stroke: var(--gilt-lo); }
:root[data-theme="dark"] .plot-glow { fill: url(#plotGlowDark); }
:root[data-theme="dark"] .chart-grid { stroke: rgba(214,170,105,0.16); }
:root[data-theme="dark"] .chart-grid-v { stroke: rgba(214,170,105,0.11); }
:root[data-theme="dark"] .chart-grid-v-minor { stroke: rgba(214,170,105,0.06); }
:root[data-theme="dark"] .chart-mean-label { stroke: #382c1a; }
:root[data-theme="dark"] .chart-tip .tip-head { color: var(--ink-muted); }
:root[data-theme="dark"] .chart-legend { border-top-color: rgba(214,170,105,0.28); }