/* The look: the game's own windows (warm charcoal, brass frames, amber-gold capitals, beige text) on a deep navy page.
   Dark only. Colours a rule needs more than once live here; everything else reads them through var(). */
:root {
  --bg: #06141c;          /* page */
  --panel: #221d1a;       /* window body */
  --panel-2: #2b2521;     /* title bars, raised blocks, zebra rows */
  --panel-3: #332e29;     /* hover / selected */
  --border: #5a4930;      /* thin lines (dim brass): decoration only, too faint to carry meaning */
  --border-hi: #a48a5b;   /* frame highlight, lines that must be seen */
  --brass: #745d39;       /* window frames */
  --text: #e3d7cf;
  --muted: #b4a092;
  --accent: #f9bc6d;      /* amber gold: brand, headings, focus rings */
  --accent-2: #ffd98a;
  --link: #8ecfe6;        /* text links: the one cool colour on the page */
  --heading-sm: #f0be79;
  --good: #5fd068;
  --bad: #ff6f5e;
  --slot-bg: #2f2925;
  --slot-border: #40372f;
  --rare: #c58cff;
  --cta: #f8a400;         /* the kill buttons: the one loud control */
  --cta-ink: #2b1e0a;
  --ink: #1a1208;         /* dark text on gold */
  --tab: linear-gradient(#583e2b, #412a18);   /* active tab / quiet primary button */
  --tab-off: #281e1b;
  --tip-bg: #16120f;
  --tip-border: #745d39;
  --input-bg: #1a1c1c;
  /* Loot value colours, as the game colours a stack's value: 1K+, 1M+, 100M+, 1B+ (below 1K stays white). */
  --val-k: #1eff00;
  --val-m: #4da3ff;
  --val-100m: #c58cff;
  --val-b: #ff8000;
  --radius: 2px;
  --shadow: 0 2px 12px rgb(0 0 0 / .5);
  /* A window's frame, from outside in: dark line, brass (the border), dark line, dim brass. */
  --frame: 0 0 0 1px #0f0e0c, inset 0 0 0 1px #110f0d, inset 0 0 0 2px #4d3d26;
  /* No fonts are downloaded: carved capitals for headings, the chat font (or the system's own sans) for text. */
  --font-head: Cinzel, "Trajan Pro 3", "Trajan Pro", "Perpetua Titling MT", "Felix Titling", "Palatino Linotype", Palatino,
    "Book Antiqua", "Noto Serif", Georgia, serif;
  --font-body: "Noto Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Thin gold scrollbars inside the windows; the page's own bar stays quiet. */
html { scrollbar-color: #5a4930 var(--bg); }
.chatbox, .dropdown, .picker-list, .table-scroll, .log, .report-dialog { scrollbar-color: #b98951 #1f1b18; scrollbar-width: thin; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--font-body);
}

a { color: var(--link); }
h1, h2, .brand-name { margin: 0; font-weight: 700; }
/* Headings are serif small capitals, letter-spaced, in amber gold. */
h1, h2, .brand-name, .about h3 { font-family: var(--font-head); font-variant-caps: small-caps; font-variant-numeric: lining-nums; }
/* The top-bar name is the home page's h1; on monster pages the h1 is the boss name in the boss box (.mon-title). Both set by src/seo.js. */
/* Full capitals here: small capitals would shrink the "3" of "RS3" next to its letters. */
.brand-name { font-variant-caps: normal; text-transform: uppercase; font-size: 1.25rem; color: var(--accent); letter-spacing: .08em; line-height: 1.2; text-shadow: 0 1px 0 #000; }
h2 { font-size: 1.05rem; letter-spacing: .09em; line-height: 1.25; color: var(--accent); margin-bottom: .6rem; }
.muted { color: var(--muted); font-size: .85rem; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--brass);
  box-shadow: 0 1px 0 #0f0e0c, inset 0 -1px 0 #110f0d, inset 0 -2px 0 #4d3d26;
}
.brand { display: flex; align-items: center; gap: .6rem; }
.price-status { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .85rem; }

.banner {
  margin: 1rem auto 0; max-width: var(--page-max); padding: .7rem 1rem;
  border: 1px solid var(--bad); border-radius: var(--radius); color: var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, var(--panel));
}

/* ---------- layout ---------- */
/* Three columns on wide screens (monster | kill, loot, chat | collection log). In between, the collection log sits
   under the monster panel on the left; phones get one column (order set further down). */
:root { --page-max: 1280px; }
@media (min-width: 1440px) { :root { --page-max: 1680px; } }
.layout {
  max-width: var(--page-max); margin: 0 auto; padding: 1rem;
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1rem; align-items: start;
  grid-template-areas: "left mid" "side mid"; grid-template-rows: auto 1fr;
}
.col-left, .col-right, .col-side { display: grid; gap: 1rem; min-width: 0; }
.col-left { grid-area: left; }
.col-right { grid-area: mid; }
.col-side { grid-area: side; }
@media (min-width: 1440px) {
  .layout { grid-template-columns: 340px minmax(0, 1fr) 340px; grid-template-areas: "left mid side"; grid-template-rows: auto; }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; padding: 1rem 16px; }
}

/* A window: square corners and a brass double-line frame. */
.panel {
  background: var(--panel);
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--frame), var(--shadow);
  min-width: 0;
}
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
/* Its heading sits in a darker title bar that reaches the frame (2px short, so the frame's inner lines stay visible). */
.panel > h2:first-child, .panel > .panel-head:first-child, details.panel > summary {
  margin: calc(2px - 1rem) calc(2px - 1rem) .9rem; padding: .4rem calc(1rem - 2px) .35rem;
  background: var(--panel-2); border-bottom: 1px solid #4a3823;
}
.panel > .panel-head:first-child h2 { margin-bottom: 0; }
details.panel:not([open]) > summary { margin-bottom: calc(2px - 1rem); border-bottom: 0; }

/* ---------- controls ---------- */
.btn {
  appearance: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel-3); color: var(--text);
  padding: .5rem .8rem; font: inherit; font-weight: 600;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05);
  transition: background .12s, border-color .12s, transform .05s;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
a.btn { display: inline-block; text-decoration: none; }   /* the footer's link to the sister site */
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* Primary buttons look like the game's active tab: warm brown, beige text. */
.btn.primary { background: var(--tab); border-color: var(--brass); }
.btn.primary:hover { background: linear-gradient(#6a4b34, #4e331d); border-color: var(--accent); }
/* The kill buttons are the one loud control: orange-gold with dark capitals, a light top edge and a dark foot. */
.kill-buttons .btn.primary, .mb-kill .btn.primary {
  background: linear-gradient(#fdd389 0 2px, #f9a700 2px, var(--cta) 88%, #915e00); border-color: #6b4500; color: var(--cta-ink);
  font-family: var(--font-head); font-weight: 700; font-variant-numeric: lining-nums; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: none; text-shadow: 0 1px 0 rgb(255 232 180 / .5);
}
.kill-buttons .btn.primary:hover, .mb-kill .btn.primary:hover {
  background: linear-gradient(#ffe2a8 0 2px, #ffb41f 2px, #ffae0d 88%, #a56b00); border-color: var(--accent-2);
}
/* Outlined until hovered, so reset buttons don't compete with the kill buttons. */
.btn.danger { color: var(--bad); background: transparent; border-color: color-mix(in srgb, var(--bad) 55%, transparent); box-shadow: none; }
.btn.danger:hover { color: #fff; background: #8b251a; border-color: #c56e60; }
.btn.small { padding: .3rem .6rem; font-size: .8rem; }
.btn.wide { width: 100%; }

input, select {
  font: inherit; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .45rem .6rem; min-width: 0;
}
input:focus, select:focus, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input::placeholder, textarea::placeholder { color: #9a8f83; opacity: 1; }

.kill-buttons { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .4rem; margin-bottom: .6rem; }
.kill-buttons .btn { padding: .5rem .2rem; }
.kill-buttons .btn[hidden] { display: none; }
.row { display: flex; gap: .4rem; margin-bottom: .6rem; }
.row > input, .row > select { flex: 1; }
.field { display: grid; gap: .25rem; margin-bottom: .7rem; font-size: .85rem; color: var(--muted); }
.check { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; cursor: pointer; }
.check[hidden] { display: none; }
.check input { accent-color: var(--accent); width: 1rem; height: 1rem; }

/* ---------- monster search ---------- */
.search { position: relative; }
.search input { width: 100%; }
.dropdown {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: .25rem; list-style: none;
  background: var(--panel-2); border: 1px solid var(--brass); border-radius: var(--radius);
  box-shadow: var(--shadow); max-height: 320px; overflow-y: auto;
}
.dropdown li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: .55rem;
  padding: .3rem .5rem; border-radius: var(--radius); cursor: pointer;
}
.dropdown .mthumb { width: 30px; height: 28px; object-fit: contain; display: block; }
.dropdown .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown li[aria-selected="true"], .dropdown li:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.dropdown .lvl { color: var(--muted); font-size: .8rem; white-space: nowrap; }
/* Group headings in the empty box's set list (God Wars / Classic bosses / Raids). */
.dropdown li.dd-group {
  display: block; padding: .5rem .5rem .2rem; cursor: default; background: none;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--heading-sm);
}

/* "kill until" drop picker */
.until { position: relative; }
.picker { flex: 1; min-width: 0; }
.picker-btn {
  width: 100%; min-height: 2.45rem; display: flex; align-items: center; gap: .45rem;
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: .25rem .5rem;
}
.picker-btn:hover { border-color: var(--accent); }
.picker-btn:disabled { opacity: .5; cursor: not-allowed; }
.picker-icon { width: 28px; height: 26px; display: grid; place-items: center; flex: none; }
.picker-icon img, .picker-list .ico img { max-width: 28px; max-height: 26px; }
.picker-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-rate { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.caret { color: var(--muted); font-size: .8rem; }
.picker-pop {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--panel-2); border: 1px solid var(--brass); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .4rem;
}
.picker-pop input { width: 100%; margin-bottom: .35rem; }
.picker-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.picker-list li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: .5rem;
  padding: .3rem .4rem; border-radius: var(--radius); cursor: pointer;
}
.picker-list li[aria-selected="true"], .picker-list li:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.picker-list .ico { display: grid; place-items: center; height: 26px; }
.picker-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-list .meta { font-size: .74rem; color: var(--muted); text-align: right; line-height: 1.2; white-space: nowrap; }
.picker-list li.none { display: block; color: var(--muted); cursor: default; }
.picker-list li.none:hover { background: none; }
/* Icons.select(): a native <select> shown as an icon dropdown (same look as the kill-until picker) */
.picker-sel { position: relative; }
.picker-sel .picker-list li { grid-template-columns: 28px minmax(0, 1fr); }
.picker-sel .picker-list li[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.picker-sel .picker-icon:empty { display: none; }

/* ---------- small icons: our copies of the wiki's pictures (public/wimg) and our own drawings (public/img) ---------- */
.ico { display: inline-block; width: 20px; height: 20px; object-fit: scale-down; flex: none; vertical-align: -5px; }
.ico.sm { width: 16px; height: 16px; vertical-align: -3px; }
.ico.wk { object-fit: contain; }                             /* wiki item and skill pictures fitted into the box */
.ico.thumb { object-fit: cover; border-radius: var(--radius); }        /* monster thumbnails */
.chip .ico, .popular a .ico, .seg span .ico, .check .ico, .mk-label .ico, .field > .ico, h2 .ico, h3 .ico, .label .ico { margin-right: .35rem; }
.check .ico { margin-right: 0; }                             /* the label's flex gap already spaces it */
.line .ico { width: 18px; height: 18px; vertical-align: -4px; margin: -2px .15rem -2px 0; }
.site-ico { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: .3rem; border-radius: var(--radius); }
/* A box a script fills with an icon later (share dialog's "This monster"); takes no room while empty. */
.ico-slot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; vertical-align: -5px; margin-right: .35rem; }
.ico-slot:empty { display: none; }
.ico-slot .ico { margin: 0; }
/* Where the scripts put icons: small text lines, headings, pickers, the feed, toasts and the phone bar. */
.irl-note .ico, #monsterMeta .ico { width: 18px; height: 18px; vertical-align: -4px; margin-right: .25rem; }
.picker-icon .ico, .picker-list .ico > .ico { width: 22px; height: 22px; }
.picker-list .ico { width: auto; }                           /* the 28px column centres it; no fixed 20px box */
.fb-from .ico { width: 18px; height: 18px; vertical-align: -4px; margin: 0 .15rem 0 0; }
.t-icon { width: 26px; height: 24px; object-fit: contain; vertical-align: middle; margin-right: .3rem; }
.lvl-float .ico { width: 32px; height: 32px; vertical-align: middle; margin-right: .3rem; }
.mb-k .ico { width: 14px; height: 14px; vertical-align: -3px; margin-right: .2rem; }
h2 .ico { vertical-align: -5px; }
h2 .ico.thumb { width: 22px; height: 22px; vertical-align: -6px; }
summary h2 .ico { vertical-align: -5px; }
.drops th .ico { vertical-align: -4px; margin-right: .25rem; }
.lvl-badge .ico { align-self: center; margin-right: .1rem; }   /* 16px: shorter than the level number, so the bar stays the same height */

.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.chip {
  font: inherit; font-size: .78rem; cursor: pointer;
  padding: .2rem .55rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: transparent; color: var(--muted);
}
.chip:hover { color: var(--text); border-color: var(--accent); }

.monster-card {
  display: flex; align-items: center; gap: .8rem;
  margin-top: .9rem; padding: .7rem; border-radius: var(--radius); background: var(--panel-2);
  border: 1px solid var(--slot-border); box-shadow: inset 0 0 0 1px #1f1b18;
}
.monster-card img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.monster-name {
  font-family: var(--font-head); font-variant-caps: small-caps; font-variant-numeric: lining-nums; letter-spacing: .04em;
  font-weight: 700; font-size: 1.2rem; line-height: 1.2; color: var(--text); text-decoration: none;
}
.monster-name:hover { color: var(--accent-2); text-decoration: underline; }
.mon-title { margin: 0; font: inherit; letter-spacing: normal; }   /* a <p>, or the page's <h1> on monster pages: the name itself carries the look */
/* One line under the boss box when part of the table isn't simulated yet. */
.pending-note { margin: .5rem 0 0; padding: .35rem .55rem; font-size: .82rem; line-height: 1.35; color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 9%, var(--panel)); border-left: 2px solid var(--accent); }
/* Kill conditions ("On a Slayer task", "In the Wilderness"): only the ones this monster's table uses are shown. */
.conds { margin-top: .6rem; display: grid; gap: .35rem; font-size: .9rem; }
.conds:not(:has(> .check:not([hidden]))) { display: none; }
.conds .check { margin: 0; }

.variants { margin-top: .7rem; display: grid; gap: .35rem; }
.variants .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: .3rem; }
.variants label { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .9rem; }
.variants input { accent-color: var(--accent); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.stat {
  background: var(--panel); border: 1px solid var(--brass); border-radius: var(--radius);
  padding: .7rem .8rem; box-shadow: var(--frame), var(--shadow); min-width: 0;
}
.stat .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.stat .v { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat .s { font-size: .68rem; color: var(--muted); }
/* Narrower: 3 tiles on top and 2 wider ones below (a 6-column grid), so no tile sits alone. */
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stat { grid-column: span 2; }
  .stat:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 520px) {
  .stats { gap: .4rem; }
  .stat { padding: .45rem .55rem; }
  .stat .k { font-size: .6rem; letter-spacing: .05em; }
  .stat .v { font-size: 1.05rem; }
}
.good { color: var(--good) !important; }
.bad  { color: var(--bad) !important; }

/* ---------- bank-style loot grid ---------- */
.bank {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px;
  min-height: 60px;
}
.slot {
  position: relative; height: 48px;
  background: var(--slot-bg); border: 1px solid var(--slot-border); border-radius: var(--radius);
  box-shadow: inset 1px 1px 0 #28231e, inset -1px -1px 0 #38322e;   /* the game's slot bevel: dark top-left, light bottom-right */
  display: grid; place-items: center;
}
.slot img { max-width: 36px; max-height: 32px; }
/* Item counts in the game's small pixel font (RuneLite's copy, public/fonts/; 16px = the game's pixels), top-left of the
   slot: yellow, white from 100K ("K"), green from 10M ("M"). */
@font-face { font-family: 'RuneScape Small'; src: url('/fonts/runescape_small.ttf') format('truetype'); font-display: swap; }
.slot .q {
  position: absolute; top: 0; left: 2px;
  font: 16px/1 'RuneScape Small', Verdana, sans-serif;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}
.q.y { color: #ffff00; }
.q.w { color: #ffffff; }
.q.g { color: #1eff00; }
/* Rare (collection log) items breathe with a vivid glow. Only box-shadow/border animate, never transform,
   so the icons stay sharp. */
.slot.rare { border-color: var(--rare-glow); animation: rareGlow 1.3s ease-in-out infinite alternate; }
@keyframes rareGlow {
  from { box-shadow: 0 0 0 1px var(--rare-glow) inset, 0 0 3px 0 color-mix(in srgb, var(--rare-glow) 60%, transparent); }
  to   { box-shadow: 0 0 0 2px var(--rare-glow) inset, 0 0 16px 4px color-mix(in srgb, var(--rare-glow) 85%, transparent),
                     0 0 28px 6px color-mix(in srgb, var(--rare-glow) 35%, transparent); }
}
/* New items flash in with a highlight instead of scaling (scaling blurred the sprites). */
.slot.fresh:not(.rare) { animation: slotIn .6s ease-out; }
@keyframes slotIn {
  from { background: color-mix(in srgb, var(--accent) 45%, var(--slot-bg)); border-color: var(--accent); }
  to   { background: var(--slot-bg); }
}
.empty { color: var(--muted); font-size: .9rem; padding: .6rem 0; grid-column: 1 / -1; }
/* The loot in 4 × 7 backpacks like the game's: a framed window each, with all 28 slots drawn
   whether or not they hold an item (the grid paints them: slot colour with 2px gutters over it). */
.invs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 60px; }
.invs .empty { width: 100%; }
.inv { padding: 6px; border-radius: var(--radius); background: #1f1b18; border: 1px solid var(--brass);
  box-shadow: 0 0 0 1px #0f0e0c, inset 0 0 0 1px #110f0d; }
.inv-grid {
  --cw: 42px; --ch: 36px;
  display: grid; grid-template-columns: repeat(4, var(--cw)); grid-template-rows: repeat(7, var(--ch)); gap: 2px;
  background:
    linear-gradient(to right, transparent var(--cw), #1f1b18 0) 0 0 / calc(var(--cw) + 2px) 100%,
    linear-gradient(to bottom, transparent var(--ch), #1f1b18 0) 0 0 / 100% calc(var(--ch) + 2px),
    var(--slot-bg);
}
.inv .slot { height: var(--ch); background: none; border: 0; box-shadow: none; }
@media (max-width: 600px) {   /* two inventories side by side on a phone */
  .inv { padding: 4px; }
  .inv-grid { --cw: 38px; --ch: 34px; }
}

/* tooltip on hover; phones tap instead (.tap-tip, see initTapTips() in app.js) */
@media (hover: hover) {
  .slot:hover::after, .stat[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute; z-index: 10; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
    white-space: pre; font-size: .78rem; line-height: 1.35;
    background: var(--tip-bg); color: var(--text); border: 1px solid var(--tip-border); border-radius: var(--radius);
    padding: .4rem .55rem; pointer-events: none;
  }
  .stat[data-tip] { position: relative; cursor: help; }
  .stat[data-tip]:hover::after { white-space: pre-line; width: max-content; max-width: 240px; bottom: auto; top: calc(100% + 6px); }
}
@media (hover: none) { [data-tip] { cursor: pointer; } }
.tap-tip {
  position: fixed; z-index: 60; max-width: min(280px, calc(100vw - 16px));
  white-space: pre-line; font-size: .8rem; line-height: 1.4;
  background: var(--tip-bg); color: var(--text); border: 1px solid var(--tip-border); border-radius: var(--radius);
  padding: .45rem .6rem; pointer-events: none; box-shadow: 0 4px 14px rgb(0 0 0 / .5);
}
.tip-on { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- notable log ---------- */
.log { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; display: grid; gap: 2px; }
.log li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: .55rem;
  padding: .3rem .4rem; border-radius: var(--radius); font-size: .88rem;
}
.log li:nth-child(odd) { background: var(--panel-2); }
.log img { max-width: 28px; max-height: 26px; }
.log .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log .kc { color: var(--muted); font-size: .8rem; white-space: nowrap; text-align: right; }

/* ---------- drop table ---------- */
details.panel > summary { list-style: none; cursor: pointer; display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary h2 { margin: 0; }
details.panel > summary h2::before { content: "▸ "; }
details[open].panel > summary h2::before { content: "▾ "; }
.table-scroll { overflow-x: auto; margin-top: .8rem; }
table.drops { width: 100%; border-collapse: collapse; font-size: .86rem; }
/* Rows alternate like the game's drop log; thin warm rules instead of grid lines. */
.drops th, .drops td { padding: .35rem .5rem; text-align: left; border-bottom: 1px solid #3a2f24; white-space: nowrap; }
.drops th { color: var(--muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; border-bottom-color: var(--border); }
.drops tbody tr:nth-child(even) td { background: #28221f; }
.drops .num { text-align: right; font-variant-numeric: tabular-nums; }
/* A long item name takes a second line before the table grows wider than its box. */
.drops td.item { display: flex; align-items: center; gap: .5rem; white-space: normal; }
.drops td.item img { flex: none; width: 24px; height: 22px; object-fit: contain; }
/* Section rows are the game's leather header bar. */
.drops tbody tr.sect td { background: #462814; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
/* A drop the sim doesn't roll (the wiki gives no usable rate): still listed, greyed. */
.drops tr.unrolled td { color: #9a8f83; }
.drops tr.unrolled td.item img { opacity: .45; filter: grayscale(1); }
.drops tr.unrolled a { color: inherit; }
/* A rate that is our estimate of a wiki word ("Common", marked "~") or scaled down with its table (marked "*"), a
   price that stands for another item's ("≈"), and the small words after a rate ("on task", "2 of 3", "×10"): the marks
   come from the script, the dots say "hover or tap me". */
.est, .scaled, .derived, .same, .mark { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.mark { margin-left: .15rem; font-size: .72rem; color: var(--muted); }
/* A row with no roll of its own (it comes with the row above it, or next in order): "same roll" where its rate would
   be, and set in under that row. */
.same { color: var(--muted); }
.drops tr.hung td.item { padding-left: 1.6rem; }
.tag { font-size: .72rem; padding: .05rem .4rem; border-radius: var(--radius); border: 1px solid var(--border); color: var(--muted); }
.tag[data-tip] { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }   /* a roll type with something to explain ("Pre-roll") */
/* Why a row is not rolled: a long reason ("Only with Luck of the Dwarves") takes two lines, so it does not push the
   price and value columns out. */
.drops tr.unrolled .tag { display: inline-block; width: max-content; max-width: 7.5rem; white-space: normal; }
/* Such a row's other cells start level with its item's name (the item cell is a flex box, which sits at the top). */
@media (min-width: 1680px) { .drops tr.unrolled td:not(.item) { vertical-align: top; padding-top: calc(.35rem + 2px); } }
/* Loot value colours for gp amounts and drop names, wherever they are shown. */
.v-low { color: var(--val-k); }
.v-med { color: var(--val-m); }
.v-high { color: var(--val-100m); }
.v-insane { color: var(--val-b); }

.footer { max-width: var(--page-max); margin: 0 auto; padding: .5rem 1rem 2rem; text-align: center; }
.footer .credit { margin: 0 0 .6rem; color: var(--text); font-weight: 600; }
.footer-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 .9rem; }
/* The sister sites (same markup and look on each of them). */
.more-tools { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; margin: -.4rem 0 .9rem; }
.more-tools-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: .2rem; }
.more-tools .btn { text-decoration: none; }
.tool-soon { display: inline-block; cursor: default; opacity: .75; }
.tool-soon:hover { border-color: var(--border); }
.tool-soon:active { transform: none; }
.soon-tag { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .02rem .3rem; margin-left: .2rem;
  border: 1px solid currentColor; border-radius: var(--radius); vertical-align: 1px; }
/* One centred column of evenly wrapped lines instead of three ragged ones. */
.footer .legal { max-width: 60rem; margin: 0 auto .35rem; line-height: 1.55; text-wrap: balance; }
/* The small print: wiki data + licence, privacy, Jagex. A thin rule above, even gaps, one narrow column. */
.legal-block { max-width: 46rem; margin: 1rem auto 0; padding-top: .9rem; border-top: 1px solid var(--border); font-size: .82rem; }
.legal-block .legal { margin: 0 auto .6rem; }
.legal-block .legal-jagex { margin-bottom: 0; font-size: .75rem; opacity: .75; }

/* ---------- OSRS Loot Simulator, shown like an advert ---------- */
/* Sean's other RuneScape tool, once, in one of three places by screen width: plain links in index.html, all named
   "sister" (ad blockers hide "ad", "promo" and "banner") and all `hidden` until this stylesheet shows them. The
   pictures are drawn in that site's own look by scripts/advert/render.mjs.
   Between a phone and 1536 px it is a picture card in the "More fun tools" box above the Collection log (#sister). */
.sister, .sister-card { display: block; }
.sister-card img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.sister-card:hover img, .sister-card:focus-visible img { border-color: var(--accent); }
/* Keyboard focus, in all three places: the page's own ring. The browser's is dark and can't be seen on this page. */
.sister-card:focus-visible, .sister-strip:focus-visible, .sister-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Phones show it as a slim banner between the header and the level bar instead (.sister-strip), and hide the box:
   one advert, not two. loading="lazy" keeps wide screens from fetching the banner at all. */
.sister-strip { display: none; }
@media (max-width: 860px) {
  .sister-strip { display: block; margin: 8px 16px 10px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .sister-strip:hover, .sister-strip:focus-visible { border-color: var(--accent); }
  .sister-strip img { display: block; width: 100%; height: auto; }
  .sister { display: none; }
}
/* From 1536 px it is a banner in the top bar instead (.sister-bar), in all the room between the online line and the
   lifetime numbers, and the box is hidden. The online line moves next to the name. The background is drawn here so
   the banner can be any width; the beam, the bow, the name and the plate are see-through pictures. The name and the
   plate are the game's small font, drawn with several picture pixels to one of the font's and shown at whole
   fractions (a half, a third, a quarter) on whole pixels, so the letters keep their hard edges: keep every size
   and the gap above it a whole number. By the banner's own inside width (a container query): the name on two lines
   and the small plate, from 271 px the beam, from 360 the name on one line, from 420 the big plate, from 600 the
   big name. */
.sister-bar { display: none; }
@media (min-width: 1536px) {
  /* One row, four columns: name, online line, banner, lifetime numbers and sound. The name and the buttons keep
     their full width. The banner's column takes whatever is left and gives way first, down to 256 px; only then
     does the online line wrap. A grid, because a flex row would wrap the line as soon as one pixel was missing. */
  .topbar { display: grid; grid-template-columns: max-content minmax(min-content, max-content) minmax(256px, 1fr) max-content; }
  .topbar .brand { grid-column: 1; }
  .topbar .online { grid-column: 2; text-align: left; white-space: normal; line-height: 1.2; }
  .topbar .online[hidden] { display: block; visibility: hidden; }   /* keeps its place: the banner doesn't jump when the count arrives */
  .topbar .price-status { grid-column: 4; }
  .sister-bar {
    grid-column: 3; justify-self: center; display: flex; align-items: center; width: 100%; max-width: 980px; height: 48px; margin: -6px 0;
    padding: 0 6px 0 2px; overflow: hidden; container-type: inline-size;
    border: 1px solid #6b563c; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .55);
    background:
      radial-gradient(150px 70px at 34px 55%, rgb(180 77 255 / .42), transparent 72%),
      radial-gradient(260px 80px at 100% 50%, rgb(255 152 31 / .14), transparent 72%),
      linear-gradient(90deg, #2a221a, #15110d 50%, #2a221a);
  }
  .sister-bar:hover, .sister-bar:focus-visible { border-color: #ff981f; }
  .sister-bar img { flex: none; max-width: none; }
  /* Smallest first, growing with the banner's inside width, so a browser that has no container queries shows the
     small one whole instead of the big one cut off. The pictures carry room for their shadow or glow: the margins
     let it overlap. */
  .sb-drop { display: none; position: relative; flex: none; width: 52px; height: 40px; margin-right: -6px; }
  .sb-drop img { position: absolute; inset: 0; width: 100%; height: 100%; }   /* the beam and the bow: two layers of one size */
  /* The bow's glow: a tight halo, a wide one (off until the animation swells it) and its own brightness. The keyframe
     lists the same three, so the browser can blend between them. */
  .sb-item { filter: drop-shadow(0 0 2px rgb(199 125 255 / .9)) drop-shadow(0 0 0 rgb(180 77 255 / 0)) brightness(1); transform-origin: 50% 55%; }
  /* Sparks rising in the beam: three dots on a tile that slides up and repeats, faded out at both ends. */
  .sb-motes {
    position: absolute; left: 50%; bottom: 16%; width: 16px; height: 32px; margin-left: -8px; opacity: .9;
    background:
      radial-gradient(circle 1px at 4px 6px, #f3dcff 90%, transparent), radial-gradient(circle .8px at 12px 17px, #dba8ff 90%, transparent),
      radial-gradient(circle 1px at 7px 27px, #fff 90%, transparent);
    background-size: 16px 32px;
    -webkit-mask-image: linear-gradient(to top, transparent, #000 30%, #000 60%, transparent); mask-image: linear-gradient(to top, transparent, #000 30%, #000 60%, transparent);
  }
  .sb-name, .sb-name2, .sb-play { image-rendering: pixelated; }   /* shrunk without blending: the banner can start on half a pixel */
  .sb-name { display: none; width: 228px; height: 28px; margin: 0 -2px; }
  .sb-name2 { width: 79px; height: 32px; margin: 0 -2px; }
  .sb-play { width: 66px; height: 26px; margin: 0 -2px 0 auto; }
  @container (min-width: 271px) { .sb-drop { display: block; } }
  @container (min-width: 360px) {
    .sb-drop { width: 65px; height: 50px; }
    .sb-name { display: block; }
    .sb-name2 { display: none; }
  }
  @container (min-width: 420px) { .sb-play { width: 132px; height: 52px; margin-right: -6px; } }
  @container (min-width: 600px) { .sb-name { width: 342px; height: 42px; } }
  .sister { display: none; }
  /* Slow, small moves, as on that site's own advert for this one: the bow bobs and its glow swells, the beam
     breathes, sparks rise. Nothing bigger: it must not pull the eye from the kill buttons. Nothing moves for
     visitors who asked for less motion. */
  @media (prefers-reduced-motion: no-preference) {
    .sb-beam { animation: sbBreathe 2.6s ease-in-out infinite; }
    .sb-item { animation: sbBob 3.6s ease-in-out infinite; }
    .sb-motes { animation: sbRise 3.4s linear infinite; }
  }
}
@keyframes sbBreathe { 50% { opacity: .72; } }
@keyframes sbBob { 50% { transform: translateY(-2px) rotate(3deg); filter: drop-shadow(0 0 4px rgb(226 178 255)) drop-shadow(0 0 12px rgb(180 77 255)) brightness(1.3); } }
@keyframes sbRise { to { background-position: 0 -32px; } }

.loading { opacity: .55; pointer-events: none; }

/* ---------- lifetime / sound ---------- */
.lifetime { color: var(--accent-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.lifetime .ico { vertical-align: -1px; margin: 0 .15rem 0 .05rem; }   /* the coin stack sits low in its sprite: lift it to the text's middle */

/* ---------- auto-kill ---------- */
.row.auto > .btn { flex: 1; }
.btn.running {
  border-color: var(--accent);
  animation: running 0.9s ease-in-out infinite alternate;   /* one pulse per auto-kill (3 game ticks) */
}
@keyframes running { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
                     to   { box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent) 55%, transparent); } }

/* ---------- chat box ---------- */
.chatbox {
  /* Like the game's chat window: light text on the dark window body, a dim brass frame, a hairline shadow on the text. */
  height: 190px; overflow-y: auto; padding: .45rem .6rem;
  background: #1c1611; color: #f5f5f5;
  border: 1px solid #5c472a; border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px #110f0d, inset 0 0 16px rgb(0 0 0 / .35);
  font: 13px/1.5 var(--font-body); text-shadow: .5px .5px 0 #000;
}
.chatbox .line { overflow-wrap: anywhere; }
.chatbox .kc { color: var(--muted); }
/* Line colours are the game's own where a line has one. */
.chatbox .beam { color: #f59700; }        /* "A golden beam shines over one of your items." */
.chatbox .news { color: #ff8c38; }        /* "News: ..." broadcasts */
.chatbox .red { color: #ff5a4d; }         /* red game messages (pure red is too dim on the dark box) */
.chatbox .pet { color: #00bd00; font-weight: 700; }   /* "Congratulations! You have unlocked the pet: ..." */
.chatbox .lvl { color: #ff5a4d; }         /* level-up lines are red in the game */
.chatbox .sys { color: var(--text); }
.chatbox .v-low, .chatbox .v-med, .chatbox .v-high, .chatbox .v-insane { font-weight: 700; }

/* ---------- collection log ---------- */
.clog-bar {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 10px; margin: .1rem 0 .7rem;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--input-bg);
}
.clog-bar::-webkit-progress-bar { background: var(--input-bg); }
.clog-bar::-webkit-progress-value { background: linear-gradient(90deg, var(--cta), var(--accent-2)); transition: width .4s; }
.clog-bar::-moz-progress-bar { background: linear-gradient(90deg, var(--cta), var(--accent-2)); }
.clog-bar.done::-webkit-progress-value { background: linear-gradient(90deg, var(--good), #b6ff7a); }
.clog-bar.done::-moz-progress-bar { background: linear-gradient(90deg, var(--good), #b6ff7a); }
.slot.missing img { opacity: .22; filter: grayscale(1); }
.slot.na { border-style: dashed; }
/* Collection log: chance per kill, coloured from common (green) to very rare (red) like the wiki's rarity cells. */
.slot .pct, .slot .lock {
  position: absolute; right: 2px; bottom: 1px; pointer-events: none;
  font: 700 9px/1 Verdana, sans-serif; text-shadow: 1px 1px 0 #000, 0 0 2px #000;
}
.pct.p0 { color: #8fd45a; } .pct.p1 { color: #c3e06a; } .pct.p2 { color: #f0d24a; }
.pct.p3 { color: #f5a35c; } .pct.p4 { color: #f47f72; } .pct.p5 { color: #ff5f5f; }
.slot .lock { right: auto; left: 50%; transform: translateX(-50%); color: var(--muted); }
.slot.na img { opacity: .1; }
.slot.got { border-color: color-mix(in srgb, var(--good) 70%, var(--slot-border)); }
/* Reset buttons sit in their panel's bottom-right corner, away from the buttons you press all the time. */
.corner-reset { display: block; margin: .7rem 0 0 auto; }

/* A short fade-in for small pop-ups (the locked-feature bubble, the tutorial bubble). */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .btn.running, .slot.fresh, .slot.rare, .levelbar.levelup, .lvl-float { animation: none; }
}

/* ---------- sound settings ---------- */
.subhead { margin: 1.1rem 0 .6rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--heading-sm); }
.sound-preview { align-items: center; margin: -.2rem 0 .7rem; }
.custom-sounds { border-top: 1px solid var(--border); padding-top: .6rem; }
.custom-sounds > p { font-size: .8rem; margin: 0 0 .6rem; }
.clip-row { display: grid; grid-template-columns: 1fr auto; gap: .15rem .5rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.clip-label { font-weight: 600; font-size: .88rem; }
.clip-name { grid-column: 1; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: .3rem; }
.clip-actions label.btn { cursor: pointer; }
.clip-error { color: var(--bad); font-size: .82rem; margin: .5rem 0 0; }

/* ---------- collection log popup (a small game window: brass frame, gold capitals for the title) ---------- */
.clog-toast {
  position: fixed; z-index: 80; top: 14px; left: 50%; transform: translateX(-50%);
  min-width: min(300px, calc(100vw - 32px)); max-width: calc(100vw - 32px);
  padding: .55rem 1.2rem .6rem; text-align: center;
  background: var(--panel); color: var(--text); font: 13px/1.4 var(--font-body);
  border: 1px solid var(--brass); border-radius: var(--radius);
  box-shadow: var(--frame), 0 6px 24px rgb(0 0 0 / .55);
  animation: toastIn .45s cubic-bezier(.2, 1.4, .4, 1);
}
.clog-toast[hidden] { display: none; }
.clog-toast.out { animation: toastOut .4s ease-in forwards; }
.clog-toast .t-title { color: var(--accent); font: 700 15px/1.4 var(--font-head); font-variant-caps: small-caps; letter-spacing: .08em; text-shadow: 1px 1px 0 #000; }
.clog-toast .t-body { color: var(--muted); }
.clog-toast .t-item { color: #fff; font-weight: 700; text-shadow: 1px 1px 0 #000; }
.clog-toast .t-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 5px; }
.clog-toast .t-slot { width: 30px; height: 28px; object-fit: contain;
  background: var(--slot-bg); border: 1px solid var(--slot-border); border-radius: var(--radius); padding: 1px; }
.clog-toast .t-names { max-width: 300px; margin: 3px auto 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes toastIn  { from { transform: translate(-50%, -120%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes toastOut { to { transform: translate(-50%, -120%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .clog-toast, .clog-toast.out { animation: none; } }

/* ---------- site notice: the owner's message to everyone online ("Fixed X, refresh your page") ---------- */
.site-notice {
  position: fixed; z-index: 85; top: 14px; left: 16px; right: 16px; width: fit-content; max-width: calc(100vw - 32px); margin: 0 auto;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem .7rem;
  padding: .55rem .6rem .55rem .95rem;
  background: var(--panel); color: var(--text); border: 1px solid var(--accent); border-radius: var(--radius);
  box-shadow: 0 0 0 1px #0f0e0c, inset 0 0 0 1px #110f0d, 0 6px 24px rgb(0 0 0 / .5); font-size: .9rem; font-weight: 600; line-height: 1.35;
  animation: noticeIn .35s ease-out;
}
.site-notice[hidden] { display: none; }
.site-notice .sn-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.site-notice .sn-close { padding: .15rem .5rem; font-size: 1.05rem; line-height: 1; }
@keyframes noticeIn { from { transform: translateY(-120%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .site-notice { animation: none; } }

/* ---------- gold values: green for millions, like in-game stacks ---------- */
:root { --gp-mil: #1eff00; --gp-norm: #ffffff; --rare-glow: #a335ee; }
.v.gp-mil, #lifetime .gp-mil { color: var(--gp-mil); }
.v.gp-norm, #lifetime .gp-norm { color: var(--gp-norm); }
.v.gp-mil { text-shadow: 0 0 12px color-mix(in srgb, var(--gp-mil) 35%, transparent); }

/* ---------- Looting level bar ---------- */
.levelbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--panel-2) 94%, transparent); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.lvl-inner { max-width: var(--page-max); margin: 0 auto; padding: .4rem 1rem; display: flex; align-items: center; gap: .75rem; }
.lvl-badge { display: inline-flex; align-items: baseline; gap: .3rem; white-space: nowrap; }
.lvl-skill { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.lvl-badge strong { font-size: 1.15rem; color: var(--accent); min-width: 1.4em; text-align: right; }
.lvl-max { font-size: .75rem; color: var(--muted); }
.lvl-track { flex: 1; height: 10px; border-radius: var(--radius); background: var(--input-bg); border: 1px solid var(--border); overflow: hidden; }
.lvl-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #915e00, var(--cta) 60%, #fdd389); transition: width .5s ease-out; }
.lvl-text { font-size: .76rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .lvl-text { display: none; } }
/* The level, the bar and its text are one button: it opens the skill guide. */
.lvl-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem;
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.lvl-open:hover .lvl-track { border-color: var(--border-hi); }
.lvl-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The cape earned and the title worn, right after the level. */
.lvl-cape { width: 18px; height: 18px; flex: none; margin-left: -.4rem; }
.lvl-title { margin-left: -.4rem; font-size: .76rem; font-style: italic; color: var(--accent-2); white-space: nowrap; }
@media (max-width: 860px) { .lvl-title { display: none; } }
.levelbar.levelup { animation: lvlGlow 2.2s ease-out; }
.levelbar.levelup .lvl-fill { box-shadow: 0 0 12px var(--accent-2); }
@keyframes lvlGlow {
  0% { box-shadow: 0 0 0 0 rgb(255 217 138 / 0); }
  15% { box-shadow: 0 2px 26px 4px rgb(255 217 138 / .55); background: color-mix(in srgb, var(--accent-2) 18%, var(--panel)); }
  100% { box-shadow: 0 0 0 0 rgb(255 217 138 / 0); }
}
.lvl-float {
  position: fixed; z-index: 75; pointer-events: none; transform: translate(-50%, -50%);
  font-family: var(--font-head); font-variant-numeric: lining-nums; letter-spacing: .04em;
  font-weight: 900; font-size: 1.3rem; color: var(--accent-2); text-shadow: 2px 2px 0 #000, 0 0 12px var(--cta); white-space: nowrap;
  animation: lvlFloat 2.4s ease-out forwards;
}
.lvl-float.big { font-size: 2rem; }
@keyframes lvlFloat {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); }
  15% { opacity: 1; transform: translate(-50%, -60%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -260%) scale(1); }
}

/* ---------- collapsible settings ---------- */
details.settings > summary { align-items: baseline; }
details.settings[open] > summary { margin-bottom: .8rem; }
.settings-body > .field:first-child { margin-top: 0; }
details.subsection { border-top: 1px solid var(--border); margin-top: .9rem; padding-top: .7rem; }
/* No rule under the Settings heading; every section after the first gets its own rule */
.settings-body > .subsection:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
details.subsection > summary { list-style: none; cursor: pointer; }
details.subsection > summary::-webkit-details-marker { display: none; }
details.subsection > summary h3 { display: inline; margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--heading-sm); }
details.subsection > summary h3::before { content: "▸ "; }
details.subsection[open] > summary h3::before { content: "▾ "; }
details.subsection[open] > summary { margin-bottom: .7rem; }
/* Section contents sit clearly indented under the section name, with a guide line */
details.subsection > .sub-body { margin-left: .4rem; padding-left: 1.1rem; border-left: 2px solid var(--border); }
details.subsection > .sub-body > :last-child { margin-bottom: 0; }
details.subsection > summary h3 .ico { width: 18px; height: 18px; vertical-align: -4px; }
details.subsection > summary .h3-emoji { margin-right: .35rem; font-size: .95rem; }

/* Phones: one column: monster, stats, kill, loot, collection log, chat, drop table, settings. */
@media (max-width: 860px) {
  .col-left, .col-right, .col-side { display: contents; }
  #clogPanel { order: 1; }
  .chat-panel, #tableWrap { order: 2; }
  .settings { order: 10; }
}

/* ---------- raid settings ---------- */
.raid-opts { display: grid; gap: .55rem; margin-top: .2rem; }
.raid-opts .field { margin: 0; }
.raid-note { margin: 0; font-size: .82rem; }
.raid-note .ico { margin-right: .35rem; }
.raid-opts input[type=range] { width: 100%; accent-color: var(--accent); padding: 0; }
.raid-opts strong { color: var(--text); font-weight: 700; }
/* Segments look like the game's tabs: the chosen one is warm brown with gold text, the rest sit back. */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
/* Only the label's own span is the segment: the share dialog nests an icon slot and a name span inside it. */
.seg label > span { display: block; text-align: center; padding: .45rem .4rem; font-size: .85rem; font-weight: 600; color: var(--muted); background: var(--tab-off); }
.seg label + label > span { border-left: 1px solid var(--border); }
.seg input:checked + span { color: var(--accent-2); background: var(--tab); box-shadow: inset 0 -2px 0 var(--accent); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -3px; }
.raid-summary { margin: .6rem 0 0; font-size: .82rem; color: var(--accent-2); font-weight: 600; }

/* ---------- level-locked features ---------- */
.locked { position: relative; opacity: .55; filter: grayscale(.6); }
.locked::after {
  content: "\1F512  " attr(data-lock);
  position: absolute; top: -9px; right: -6px; z-index: 2; pointer-events: none;
  font-size: .62rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
  padding: 0 .35rem; border-radius: var(--radius);
  background: var(--tip-bg); color: var(--accent-2); border: 1px solid var(--tip-border);
}
.picker-btn.dim { opacity: .6; }
.nope { animation: nope .35s ease-in-out; }
@keyframes nope { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-3px); } }
.lock-bubble {
  position: fixed; z-index: 70; width: 260px; transform: translateY(-100%); pointer-events: none;
  padding: .45rem .65rem; border-radius: var(--radius); font-size: .8rem; line-height: 1.35;
  background: var(--tip-bg); color: var(--text); border: 1px solid var(--accent); box-shadow: 0 6px 18px rgb(0 0 0 / .45);
  animation: fadeIn .15s ease-out;
}
.lock-bubble[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .nope { animation: none; } }

/* ---------- Looting rewards in Settings: luck ring, perk slots, title ---------- */
/* Three slots like the game's gizmo slots: a perk's picture, empty, or locked with its level inside. */
.perk-slots { display: flex; gap: .5rem; margin-top: .1rem; }
.perk-slot {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--slot-bg); border: 1px solid var(--slot-border); border-radius: var(--radius);
}
.perk-slot:hover { border-color: var(--accent); }
.perk-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.perk-slot img { width: 32px; height: 32px; }
.perk-slot.locked::after { content: attr(data-lock); position: static; padding: 0; border: 0; background: none; }
.perk-list { display: grid; gap: .45rem; margin-top: .35rem; }
.perk-row { margin: 0; align-items: flex-start; }
.perk-row input { margin-top: .2rem; flex: none; }
.perk-row .ico { width: 24px; height: 24px; }
.perk-text { flex: 1; min-width: 0; line-height: 1.3; }
.perk-text strong { color: var(--text); }
.perk-row.off { opacity: .55; cursor: default; }

/* ---------- skill guide: every Looting reward by level, like the game's ---------- */
.guide { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: 2px; }
.guide-row {
  display: grid; grid-template-columns: 2.4rem 24px minmax(0, 1fr) 1.2rem; align-items: center; gap: .55rem;
  padding: .3rem .45rem; border: 1px solid transparent; border-radius: var(--radius);
  font-size: .86rem; line-height: 1.3; color: var(--muted);
}
.guide-row:nth-child(odd) { background: var(--panel-2); }
.guide-row .g-at { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.guide-row .ico { width: 24px; height: 24px; vertical-align: 0; filter: grayscale(1); opacity: .45; }
.guide-row .g-state { text-align: center; font-size: .78rem; }
.guide-row.got { color: var(--text); }
.guide-row.got strong, .guide-row.next strong { color: var(--accent-2); }
.guide-row.got .g-at, .guide-row.next .g-at { color: var(--accent); }
.guide-row.got .ico, .guide-row.next .ico { filter: none; opacity: 1; }
.guide-row.got .g-state { color: var(--good); }
/* The next reward to earn. */
.guide-row.next { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }

/* ---------- bug report dialog ---------- */
.contact-how { display: flex; gap: .6rem; align-items: flex-end; }
.contact-how .grow { flex: 1; min-width: 0; }
.contact-how input { width: 100%; }
.report-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--brass); border-radius: var(--radius);
  background: var(--panel); color: var(--text); box-shadow: var(--frame), 0 16px 48px rgb(0 0 0 / .6);
}
.report-dialog::backdrop { background: rgb(3 8 12 / .65); }
.share-box { padding: 1.1rem 1.2rem 1rem; }
.share-what { margin-top: .5rem; }
.share-what[hidden] { display: none; }
.share-link { display: flex; gap: .4rem; margin: .5rem 0 .8rem; }
.share-link input { flex: 1; min-width: 0; font-size: .85rem; }
.share-sites { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.share-sites .btn { text-align: center; text-decoration: none; }
.share-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .9rem; }
.report-dialog form { padding: 1.1rem 1.2rem 1rem; }
.report-dialog h2 { margin-bottom: .3rem; }
.report-dialog p.muted { margin: 0 0 .8rem; }
.report-dialog textarea {
  width: 100%; resize: vertical; min-height: 7rem; font: inherit; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .6rem;
}
.report-dialog textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.report-meta { display: flex; justify-content: flex-end; margin: -.4rem 0 .4rem; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.report-meta .near { color: var(--accent); font-weight: 700; }
.report-msg { margin: .2rem 0 .6rem; font-size: .85rem; }
.report-msg.ok { color: var(--good); }
.report-msg.warn { color: var(--bad); }
.report-actions { display: flex; justify-content: flex-end; gap: .5rem; }
/* A button that looks like a footer link (opens the Privacy dialog; nothing pops up by itself). */
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.privacy-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.privacy-box { padding: 1.1rem 1.2rem 1rem; }
.privacy-box h2:focus { outline: none; }   /* focused on open so the dialog starts at the top */
.privacy-box h3 { margin: .75rem 0 .15rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--heading-sm); }
/* Long on phones: keep Close in reach while scrolling. */
.privacy-box .share-foot { position: sticky; bottom: 0; background: var(--panel); padding: .6rem 0 .2rem; margin-top: .6rem; }
.privacy-box p { margin: 0; font-size: .88rem; line-height: 1.5; }
.privacy-box p.muted { margin: 0 0 .2rem; }
.privacy-box p.muted:last-of-type { margin-top: .8rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- first-visit tutorial (never blocks the page) ---------- */
.replay-tutorial { margin: .1rem 0 .4rem; }
.tut-dim { position: fixed; inset: 0; z-index: 54; pointer-events: none; background: rgb(0 0 0 / .45); }
.tut-ring {
  position: fixed; z-index: 55; pointer-events: none; border-radius: var(--radius);
  border: 2px solid var(--accent);
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}
.tut-bubble {
  position: fixed; z-index: 56; padding: .7rem .8rem .6rem; border-radius: var(--radius);
  background: var(--panel); color: var(--text); border: 1px solid var(--accent);
  box-shadow: 0 0 0 1px #0f0e0c, inset 0 0 0 1px #110f0d, 0 10px 30px rgb(0 0 0 / .5); animation: fadeIn .2s ease-out;
}
.tut-text { margin: 0 0 .55rem; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.tut-bar { height: 3px; border-radius: var(--radius); background: var(--accent); transform-origin: left; animation: tutBar linear forwards; margin-bottom: .55rem; }
.tut-bubble.paused .tut-bar { animation-play-state: paused; opacity: .4; }
.tut-held { visibility: hidden; }   /* a drop celebration is open */
@keyframes tutBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.tut-actions { display: flex; align-items: center; gap: .4rem; }
.tut-step { margin-right: auto; font-size: .75rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .tut-ring { transition: none; } .tut-bar { animation: none; } }

/* ---------- "There are currently N people looting!" (like the game's homepage) ---------- */
.online { flex: 1 1 auto; margin: 0; text-align: center; font-size: .92rem; color: var(--text); white-space: nowrap; }
.online strong { color: var(--accent); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .online { order: 3; flex-basis: 100%; white-space: normal; } }   /* own row once the name, the count and the lifetime total no longer fit */

/* ---------- live drop feed (bottom-left: bubbles fade in, stay, fade out; the stack closes up smoothly) ---------- */
.feed {
  position: fixed; left: 12px; bottom: 12px; z-index: 45; pointer-events: none;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  max-width: min(360px, calc(100vw - 24px)); max-height: min(60vh, 470px); overflow: hidden;
}
.feed-bubble {
  display: inline-flex; align-items: center; gap: .4rem; max-width: 100%;
  padding: .28rem .7rem .28rem .35rem; border-radius: var(--radius);
  background: rgb(22 18 15 / .78); color: rgb(255 255 255 / .92); border: 1px solid rgb(116 93 57 / .7);
  font-size: .78rem; line-height: 1.25; text-shadow: 0 1px 1px rgb(0 0 0 / .6);
  backdrop-filter: blur(2px);
  flex: none; margin-top: 5px; max-height: 40px; overflow: hidden;
  animation: feedLife 5s ease-out forwards;
}
.feed-bubble img { width: 22px; height: 20px; object-fit: contain; flex: none; }
.feed-bubble .fb-name { font-weight: 700; color: var(--accent); }
.feed-bubble strong { font-weight: 700; }
/* The item's name takes its tier's colour: gold, hot orange for the biggest, green for pets. */
.feed-bubble.tier-rare strong { color: #ffd98a; }
.feed-bubble.tier-mega strong { color: #ff9a3d; }
.feed-bubble.tier-pet strong { color: #5cf07e; }
/* A player's Looting cape and title, by the name. */
.feed-bubble img.fb-cape { width: 16px; height: 16px; margin-right: -.15rem; }
.feed-bubble .fb-title { color: var(--accent-2); font-style: italic; }
/* "from Monster" takes only the room the name and the item leave (cut with …), so those two wrap last. */
.feed-bubble .fb-from { opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; min-width: 0; }
/* A bubble has two lines: a name or item that would need a third ends in … on the second. */
.feed-bubble .fb-name, .feed-bubble strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (min-width: 1101px) { .feed { max-width: 460px; } }   /* room for a name with a cape and a title on one line */
/* Just a fade; after fading out, the bubble folds away so the ones above slide down instead of jumping. */
@keyframes feedLife {
  0%   { opacity: 0; }
  7%   { opacity: .88; }
  80%  { opacity: .82; }
  93%  { opacity: 0; max-height: 40px; margin-top: 5px; padding-top: .28rem; padding-bottom: .28rem; border-width: 1px; }
  100% { opacity: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
}
@media (max-width: 560px) { .feed-bubble { font-size: .72rem; } .feed-bubble .fb-from { display: none; } }

/* ---------- name settings ---------- */
.name-now { margin: 0 0 .5rem; font-size: .88rem; }
.name-now strong { color: var(--accent); }
.name-msg { margin: -.2rem 0 .5rem; font-size: .82rem; }
.name-msg.ok { color: var(--good); }
.name-msg.warn { color: var(--bad); }
.name-code { margin-bottom: .5rem; }
.name-code p { margin: 0 0 .4rem; font-size: .8rem; }
.name-code code { user-select: all; font-size: .78rem; overflow-wrap: anywhere; }

/* ---------- auto-kill status (always visible in the sticky level bar) ---------- */
.auto-status {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  padding: .15rem .3rem .15rem .6rem; border-radius: var(--radius); font-size: .78rem; font-weight: 700;
  border: 1px solid var(--border); background: var(--panel-2);
}
.auto-status[hidden] { display: none; }
.auto-status .btn.small { padding: .15rem .55rem; font-size: .74rem; }
.auto-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.auto-status.running { border-color: var(--good); }
.auto-status.running .auto-dot { background: var(--good); animation: autoDot .9s ease-in-out infinite alternate; }
.auto-status.paused { border-color: var(--accent); color: var(--accent); }
.auto-status.paused .auto-dot { background: var(--accent); }
.auto-close { border: 0; background: none; color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.auto-status.running .auto-close { display: none; }
@keyframes autoDot { from { opacity: .35; } to { opacity: 1; } }
@media (max-width: 560px) { .auto-status { font-size: .72rem; } }
@media (prefers-reduced-motion: reduce) { .auto-status.running .auto-dot { animation: none; } }

/* Popular simulators under the page (visitors and search engines). */
.about { max-width: var(--page-max); margin: 1rem auto 0; padding: 1rem 1rem 0; border-top: 1px solid var(--border); }
.about h3 { font-size: 1.05rem; letter-spacing: .09em; color: var(--accent); margin: 0 0 .5rem; }
.popular { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.popular a { display: inline-flex; align-items: center; padding: .2rem .55rem; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: .85rem; }
.popular a:hover, .popular a:focus-visible { border-color: var(--accent); color: var(--accent); }

/* ---------- quick picks: recent + popular ---------- */
.chips-label { flex-basis: 100%; margin-top: .2rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.chips-label:first-child { margin-top: 0; }
.chip.new::after { content: 'new'; margin-left: .35rem; padding: 0 .3rem; border-radius: var(--radius); font-size: .62rem; font-weight: 800;
  text-transform: uppercase; color: var(--ink); background: var(--accent); vertical-align: 1px; }

/* ---------- Kill panel: the extra ways to kill fold away ---------- */
.more-kill { margin: .2rem 0 .7rem; border-top: 1px solid var(--border); padding-top: .55rem; }
.more-kill > summary { cursor: pointer; list-style: none; font-weight: 600; font-size: .9rem; user-select: none; }
.more-kill > summary::-webkit-details-marker { display: none; }
.more-kill > summary::before { content: '\25B8'; display: inline-block; margin-right: .4rem; transition: transform .15s; color: var(--accent); }
.more-kill[open] > summary::before { transform: rotate(90deg); }
.more-kill[open] > summary { margin-bottom: .6rem; }
/* The Kill panel runs full width above the loot: the "more ways" controls sit side by side when there's room. */
.kill-panel .kill-buttons .btn { padding: .6rem .2rem; font-size: 1rem; }
/* One labelled line per way to kill: label on the left, controls on the right (stacked on phones). */
.more-kill-body { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem .9rem; align-items: center; }
.more-kill-body > .row { margin: 0; max-width: 34rem; }
.more-kill-body #customN { flex: 0 0 6.5rem; }
.mk-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.more-kill-body > .check { grid-column: 2; margin: 0; }
@media (max-width: 520px) {
  .more-kill-body { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .more-kill-body > .check { grid-column: 1; }
  .mk-label { margin-top: .35rem; }
}
.kill-panel .more-kill { margin-bottom: 0; }
.kill-panel .more-kill:not([open]) > summary { margin-bottom: 0; }

/* ---------- "about N hours of real …" ---------- */
.irl-note { margin: -.35rem 0 0; font-size: .85rem; color: var(--muted); }

/* ---------- phone kill bar ---------- */
.mobile-bar { display: none; }
@media (max-width: 860px) {
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem 12px calc(.5rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--panel) 95%, transparent); backdrop-filter: blur(6px);
    border-top: 1px solid var(--brass); box-shadow: inset 0 1px 0 #110f0d, inset 0 2px 0 #4d3d26, 0 -6px 18px rgb(0 0 0 / .35);
  }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .feed { bottom: calc(78px + env(safe-area-inset-bottom)); }     /* live drops sit above the bar */
  .picker-pop { scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom)); }   /* an opened drop list is scrolled clear of the bar (openUntil()) */
  /* The bar is the phone's kill button: the panel keeps only "More ways to kill" (custom covers 500 / 1,000). */
  .kill-panel .kill-buttons { display: none; }
  .kill-panel .more-kill { margin-top: 0; border-top: 0; padding-top: 0; }
}
.mb-loot {
  position: relative; flex: 1; min-width: 0; display: grid; text-align: left; padding: .1rem .15rem;
  background: none; border: 0; color: var(--text); font: inherit; cursor: pointer;
}
.mb-k { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-v { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.mb-v.gp-mil { color: var(--gp-mil); } .mb-v.gp-norm { color: var(--gp-norm); }
.mb-delta { position: absolute; left: .15rem; top: -1.05rem; font-weight: 800; font-size: .85rem; color: var(--gp-mil); opacity: 0; pointer-events: none; }
.mb-delta.go { animation: mbDelta 1.1s ease-out; }
@keyframes mbDelta { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-12px); } }
.mb-kill { display: flex; gap: .4rem; flex: none; }
.mb-kill .btn { min-width: 3.3rem; padding: .7rem .55rem; font-size: 1rem; }

/* ---------- lighter header on phones ---------- */
@media (max-width: 600px) {
  .topbar { padding: .45rem 12px; gap: .3rem .8rem; }
  .brand img { width: 26px; height: 26px; }
  .brand-name { font-size: 1.1rem; }
  #lifetime { display: none; }
  .online { font-size: .82rem; }
}

/* ---------- phone header + kill bar (portrait phones only; sized on a 440px-wide phone) ----------
   Row 1: logo + title sized to span the phone's width. Row 2: people looting · sound icon. */
@media (max-width: 600px) {
  .topbar { gap: .45rem .5rem; padding: .55rem 12px .5rem; }
  /* 21 = logo + gap + the name's width in em in the widest heading font (about 20.5; Palatino Linotype needs 18.5,
     Georgia 19.4), so "RuneScape Loot Simulator" stays on one line and the row never overflows. */
  .brand { flex: 1 0 100%; justify-content: center; gap: .3em; font-size: min(calc((100vw - 24px) / 21), 2.4rem); }
  .brand .brand-name { font-size: 1em; line-height: 1.1; white-space: nowrap; letter-spacing: .04em; }
  .brand img { width: 1.2em; height: 1.2em; }
  .price-status { display: contents; }   /* its buttons join the topbar's second row */
  .online { order: 2; flex: 1 1 0; min-width: 0; font-size: .78rem; line-height: 1.25; white-space: normal; }
  #muteBtn { order: 3; margin-left: auto; padding-inline: .6rem; }   /* margin keeps it right while the count loads */
  #muteBtn .mute-label { display: none; }

  /* A taller kill bar with bigger thumb targets. */
  .mobile-bar { padding: .75rem 12px calc(.75rem + env(safe-area-inset-bottom)); }
  .mb-kill { gap: .5rem; }
  .mb-kill .btn { min-width: 4.3rem; padding: 1.1rem .7rem; font-size: 1.15rem; }
  .mb-v { font-size: 1.4rem; }
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .feed { bottom: calc(104px + env(safe-area-inset-bottom)); }
}

/* Jumping to a panel (e.g. the phone bar's loot value) stops below the sticky level bar. */
.panel { scroll-margin-top: 52px; }

/* ---------- icons added by the icon pass: roll-type tags, the GE+alch pair in the price-mode picker, settings fields that start
   with a skill icon (the .field grid would otherwise put the icon on its own row), and spacing for the new inline icons ---------- */
.tag .ico { width: 14px; height: 14px; vertical-align: -3px; margin-right: .25rem; }
.ico-pair { display: inline-flex; align-items: center; gap: 1px; width: auto; }
.ico-pair .ico { width: 16px; height: 16px; }
.field:has(> .ico) { grid-template-columns: auto 1fr; align-items: center; }
.field:has(> .ico) > select, .field:has(> .ico) > .picker, .field:has(> .ico) > input { grid-column: 1 / -1; }
.clip-label .ico, .lock-bubble .ico, .irl-note .ico, #clogNote .ico, #lootNote .ico, .mb-v .ico, .mb-k .ico, .auto-status .ico, .btn .ico { margin-right: .3rem; }
.lock-bubble .ico { vertical-align: -3px; }

/* ---------- icons in the log banner, level-up float, live feed, share dialog ---------- */
.clog-toast .t-title .ico { margin-right: .3rem; vertical-align: -3px; }
.clog-toast .t-item .t-icon { display: inline-block; width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin-right: .3rem; }
.lvl-float .ico { width: 32px; height: 32px; vertical-align: -8px; margin-right: .3rem; filter: drop-shadow(2px 2px 0 #000); }
.lvl-float.big .ico { width: 40px; height: 40px; vertical-align: -9px; }
.feed-bubble .fb-from .ico { width: 18px; height: 18px; object-fit: scale-down; vertical-align: -4px; margin: 0 .15rem; }   /* .fb-from stays a plain flex item so its ellipsis keeps working */
.feed-bubble .fb-from .ico.thumb { object-fit: cover; border-radius: var(--radius); }
#sharePageIcon { display: inline-block; vertical-align: middle; margin-right: .3rem; }
#sharePageIcon:empty { display: none; }
#sharePageIcon .ico { width: 20px; height: 20px; }
@media (max-width: 600px) { .lvl-float .ico { width: 24px; height: 24px; vertical-align: -6px; } .lvl-float.big .ico { width: 30px; height: 30px; } }

/* ---------- dry calculator (dialog, boss-box link, summary button) ---------- */
.dry-open { display: inline-flex; align-items: center; gap: .3rem; margin-top: .4rem; padding: .2rem .6rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--panel-2); color: var(--text); font-size: .78rem; font-weight: 700; text-decoration: none; }
.dry-open:hover, .dry-open:focus-visible { border-color: var(--accent); }
.dry-open[hidden] { display: none; }
.dry-open .ico { width: 16px; height: 16px; }
.about-dry { margin: .75rem 0 .2rem; text-align: center; }   /* centered under the summary */
.dry-btn { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.dry-btn .ico { margin: 0; }
.dry-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
.dry-box { padding: 0 1.1rem 1rem; }
.dry-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .9rem 0 .5rem; background: var(--panel); }
.dry-top h2 { margin: 0; font-size: 1.05rem; }
.dry-top h2:focus { outline: none; }
.dry-top h2 .ico { width: 22px; height: 22px; vertical-align: -5px; }
.dry-online { margin: 0 0 .7rem; text-align: left; white-space: normal; font-size: .85rem; }
.dry-online[hidden] { display: none; }
.dry-kc { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.dry-kc label { font-weight: 700; }
.dry-kc input { width: 9rem; }
.dry-hint { margin: .35rem 0 0; font-size: .8rem; }
.dry-sum { margin: .6rem 0 .7rem; }
.dry-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.dry-table th { padding: .3rem .4rem; border-bottom: 1px solid var(--border); text-align: left; font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dry-table td { padding: .45rem .4rem; border-bottom: 1px solid #3a2f24; vertical-align: middle; font-variant-numeric: tabular-nums; }
.dry-table tr.focus td { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.dry-item-cell { display: flex; align-items: center; gap: .5rem; }
.dry-item-cell .ico { width: 28px; height: 28px; margin: 0; }
.dry-name { display: block; font-weight: 700; }
.dry-rate { display: block; font-size: .74rem; color: var(--muted); }
.dry-got { color: var(--good); }
.dry-verdict { margin-left: .2rem; font-size: .72rem; font-weight: 700; }
.dry-table td strong, .dry-verdict { white-space: nowrap; }   /* "over 99.9%" and "Got it" each stay in one piece */
.dry-verdict.ok { color: var(--good); }
.dry-verdict.dry { color: var(--heading-sm); }
.dry-verdict.bone { color: var(--bad); }
.dry-bar { appearance: none; -webkit-appearance: none; display: block; width: 100%; max-width: 170px; height: 6px; margin-top: .25rem;
  border: 0; border-radius: var(--radius); overflow: hidden; background: var(--input-bg); }
.dry-bar::-webkit-progress-bar { background: var(--input-bg); }
.dry-bar::-webkit-progress-value { background: linear-gradient(90deg, var(--cta), var(--accent-2)); }
.dry-bar::-moz-progress-bar { background: linear-gradient(90deg, var(--cta), var(--accent-2)); }
.dry-foot { margin: .8rem 0 0; font-size: .78rem; }
@media (max-width: 560px) {
  .dry-box { padding: 0 .8rem .9rem; }
  .dry-table { font-size: .8rem; }
  .dry-table th, .dry-table td { padding: .4rem .25rem; }
  .dry-item-cell { gap: .35rem; }
  .dry-item-cell .ico { width: 22px; height: 22px; }
  .dry-kc input { width: 7rem; }
}

/* ---------- the Ko-fi support link ---------- */
.support-btn { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; }
@media (max-width: 720px) { .price-status { gap: .4rem; } }

/* ---------- sortable drop table headers ---------- */
.drops th .th-sort { display: inline-flex; align-items: center; gap: .25rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; white-space: nowrap; }
.drops th.num .th-sort { justify-content: flex-end; width: 100%; }
.drops th .th-sort::after { content: "\2195"; font-size: .8em; opacity: .35; }
.drops th[aria-sort="ascending"] .th-sort::after { content: "\25b2"; opacity: 1; color: var(--accent); }
.drops th[aria-sort="descending"] .th-sort::after { content: "\25bc"; opacity: 1; color: var(--accent); }
.drops th .th-sort:hover, .drops th[aria-sort="ascending"] .th-sort, .drops th[aria-sort="descending"] .th-sort { color: var(--accent); }
.drops th .th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }

/* ---------- drop table in a narrow box: nothing to scroll sideways. The table has all six columns only where its
   box is about 900 px wide (three page columns at full width, from 1680 px). Below that each row is a grid, so the
   columns still line up; the roll type gives way (the section rows name the tables), but a row that is not rolled
   keeps its reason, on a line of its own.
   - Box of 600 px or more (one page column from 721 px, two from 1021 px, three up to 1679 px): item, quantity,
     rarity, price and value per kill side by side.
   - Narrower (phones, and two page columns up to 1020 px): item, quantity and rarity, with the price under the
     quantity and the value per kill under the rarity (their headings likewise). ---------- */
@media (max-width: 1679px) {
  table.drops, .drops thead, .drops tbody { display: block; }
  .drops tr { display: grid; column-gap: .5rem; padding: .3rem .25rem; border-bottom: 1px solid #3a2f24; }
  .drops thead tr { border-bottom-color: var(--border); }
  .drops th, .drops td { display: block; min-width: 0; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .drops tr > :nth-child(4) { display: none; }
  .drops th { overflow-wrap: normal; }
  .drops th .ico { display: none; }
  .drops th .th-sort { white-space: normal; text-align: left; }
  .drops tr.unrolled > td:nth-child(4) { display: block; margin-top: .15rem; }
  .drops tr.unrolled .tag { width: auto; max-width: 100%; }
  .drops td.item { display: flex; align-items: flex-start; gap: .4rem; }
  .drops td.item a { min-width: 0; }
  .drops tbody tr:nth-child(even) { background: #28221f; }
  .drops tbody tr:nth-child(even) td { background: none; }
  .drops tbody tr.sect { display: block; padding: .35rem .5rem; background: #462814; }
  .drops tbody tr.sect td { background: none; }
}
@media (min-width: 721px) and (max-width: 860px), (min-width: 1021px) and (max-width: 1679px) {
  .drops tr { grid-template-columns: minmax(0, 1fr) 6rem 8.5rem 5.5rem 5.5rem; }
  .drops tr > :nth-child(1) { grid-area: 1 / 1; }
  .drops tr > :nth-child(2) { grid-area: 1 / 2; }
  .drops tr > :nth-child(3) { grid-area: 1 / 3; }
  .drops tr > :nth-child(5) { grid-area: 1 / 4; }
  .drops tr > :nth-child(6) { grid-area: 1 / 5; }
  .drops td.num { white-space: nowrap; overflow-wrap: normal; }
  .drops th.num .th-sort { text-align: right; }
  .drops tr.unrolled > td:nth-child(4) { grid-area: 2 / 1 / auto / -1; }
}
@media (max-width: 720px), (min-width: 861px) and (max-width: 1020px) {
  table.drops { font-size: .8rem; }
  .drops tr { grid-template: auto 1fr / minmax(0, 1fr) 4.4rem 7.2rem; }
  .drops tr > :nth-child(1) { grid-area: 1 / 1 / span 2; }
  .drops tr > :nth-child(2) { grid-area: 1 / 2; }
  .drops tr > :nth-child(3) { grid-area: 1 / 3; }
  .drops tr > :nth-child(5) { grid-area: 2 / 2; }
  .drops tr > :nth-child(6) { grid-area: 2 / 3; }
  .drops td:nth-child(n+5) { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow-wrap: normal; }
  .drops .num { text-align: left; }
  .drops th.num .th-sort { justify-content: flex-start; width: auto; }
  .drops tr.unrolled > td:nth-child(4) { grid-area: 3 / 1 / auto / -1; }
  .drops tr.hung td.item { padding-left: 1.2rem; }
}

/* ---------- Support button: a gold glow that breathes, with sparks drifting up out of it like the loot beam's.
   Spans from support-fx.js, placed behind the button's content so the footer's sizes don't move. ---------- */
.support-btn { position: relative; isolation: isolate; }
.sup-fx {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(255 200 61 / .55), 0 0 8px 1px rgb(248 164 0 / .38);
  animation: sup-glow 2.6s ease-in-out infinite;
}
@keyframes sup-glow {
  50% { box-shadow: inset 0 0 0 1px rgb(255 226 150 / .95), 0 0 14px 3px rgb(255 190 60 / .6), 0 0 28px 8px rgb(248 164 0 / .22); }
}
.support-btn:hover .sup-fx, .support-btn:focus-visible .sup-fx { animation-duration: 1.3s; }
/* Little diamond sparks rising out of the button and fading away. */
.sup-spark {
  position: absolute; left: var(--x, 50%); bottom: 2px; width: 5px; height: 5px; opacity: 0;
  background: #fff6d8; box-shadow: 0 0 5px 1px rgb(255 200 61 / .9);
  animation: sup-spark 3.6s ease-out infinite;
}
.sup-spark:nth-child(1) { --x: 16%; --dx: -8px; --r: -90deg; }
.sup-spark:nth-child(2) { --x: 80%; --dx: 8px; --r: 90deg; animation-delay: -.9s; }
.sup-spark:nth-child(3) { --x: 40%; --dx: -4px; --r: 60deg; animation-delay: -1.8s; }
.sup-spark:nth-child(4) { --x: 62%; --dx: 5px; --r: -60deg; animation-delay: -2.7s; }
@keyframes sup-spark {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(45deg) scale(.4); }
  15% { opacity: 1; }
  70% { opacity: .85; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -30px) rotate(calc(45deg + var(--r))) scale(1); }
}
.support-btn:hover .sup-spark { animation-duration: 2.2s; }
@media (prefers-reduced-motion: reduce) { .sup-fx { animation: none; } }