/* Rust Loot Simulator: dark, gritty, Rust-style UI. */
:root {
  --bg: #0d0c0b;
  --panel: rgba(29, 27, 24, .95);
  --panel-2: rgba(255, 255, 255, .045);
  --head: rgba(255, 255, 255, .055);
  --line: rgba(255, 255, 255, .07);
  --text: #e3dccf;
  --muted: #9b9385;
  --dim: #6d665b;
  --accent: #cd412b;          /* Rust red-orange */
  --accent-2: #e8653d;
  --green: #5f7d32;           /* craft-button green */
  --green-hi: #74973d;
  --green-text: #eaf5d6;
  --red: #a4372a;
  --slot: #3a3834;
  --slot-hi: #4b4843;
  --slot-empty: rgba(58, 56, 52, .5);
  --cond: #88c33c;
  --rare: #b37cff;
  --mega: #ffb938;
  --good: #9cc451;
  --bad: #e5604a;
  --card-green: #45b04f;
  --card-blue: #3f86dd;
  --card-red: #d8433a;
  --head-font: "Roboto Condensed", "Bahnschrift", "DIN Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: url(img/noise.svg), radial-gradient(ellipse 120% 900px at 50% -10%, #2b211b 0%, #151311 45%, var(--bg) 80%) no-repeat;
  background-color: var(--bg);
}
a { color: var(--accent-2); }
h1, h2, h3 { margin: 0; }
button, input { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.head { font-family: var(--head-font); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap;
  padding: .55rem 1rem; background: rgba(9, 8, 7, .92); border-bottom: 2px solid var(--accent);
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.logo { width: 40px; height: 40px; flex: none; }
.brand-text { display: grid; line-height: 1.05; }
.brand-name { font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .03em; }
.brand-name b { color: var(--accent); }
.badge { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.top-right { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.life { font-family: var(--head-font); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; color: var(--muted); }
.life b { color: var(--text); }

/* ---------- layout & panels ---------- */
/* Wide screens: picker | loot | monument card. Medium: the monument card sits under the picker. Phones: one column. */
.layout {
  display: grid; grid-template-columns: minmax(310px, 400px) minmax(0, 1fr); gap: 12px;
  grid-template-areas: "left main" "side main"; grid-template-rows: auto 1fr;
  max-width: 1440px; margin: 0 auto; padding: 12px;
}
.col-left { grid-area: left; }
.col-right { grid-area: main; }
.col-side { grid-area: side; }
.col-left, .col-right, .col-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (min-width: 1480px) {
  .layout { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) minmax(320px, 420px); grid-template-areas: "left main side";
    grid-template-rows: auto; max-width: 1900px; }
  /* The picker ends level with the bottom of the Drop table's title bar, open or closed (its height is set by
     alignPicker() in app.js); its list scrolls. contain: size keeps the long list from stretching the panel. */
  .col-left, .col-right, .col-side { align-self: start; }
  .col-left > .panel { display: flex; flex-direction: column; }
  .col-left .source-list { flex: 1 1 0; max-height: none; min-height: 240px; contain: size; margin-bottom: -.8rem; }
  /* the list runs to the panel's bottom edge; a fade there shows there's more to scroll */
  .col-left .source-list::after {
    content: ""; position: sticky; bottom: 0; display: block; height: 26px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(29, 27, 24, 0), rgba(29, 27, 24, .95));
  }
  /* The right column ends at the same line (its height is set by alignPicker() in app.js). The monument card keeps its
     size until Sections makes it too tall, then scrolls; open Spawn odds fills the rest and scrolls, title bar on top. */
  .col-side { display: flex; flex-direction: column; }
  #detail, #odds { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6d665b rgba(255, 255, 255, .06); }
  #detail { flex: 0 1 auto; min-height: 200px; }
  #odds { flex: 1 1 0; min-height: min(300px, 45%); }
  #odds.collapsed { flex: none; min-height: 0; overflow: visible; }
  #odds > .win-head { position: sticky; top: -.8rem; z-index: 2; background: linear-gradient(var(--head), var(--head)), #1d1b18; }
}
.panel {
  background: url(img/noise.svg), var(--panel); border: 1px solid var(--line); border-radius: 2px;
  padding: .8rem; min-width: 0; box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.win-head {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin: -.8rem -.8rem .75rem; padding: .45rem .8rem; background: var(--head); border-bottom: 1px solid var(--line);
}
.win-title, .win-sub { font-family: var(--head-font); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.win-title { color: #d8d0c2; font-size: .95rem; }
.win-title::before { content: ""; display: inline-block; width: 3px; height: .85em; background: var(--accent); margin-right: .5rem; vertical-align: -1px; }
/* the Loot window's light: flashes when loot appears (lootLight() in app.js) */
.lootwin { --glow: 232, 101, 61; }
.lootwin.lit-rare { --glow: 179, 124, 255; }
.lootwin.lit-mega { --glow: 255, 185, 56; }
.lootwin > .win-head .win-title::before { width: 4px; border-radius: 1px; }
.lootwin.lit > .win-head .win-title::before { animation: loot-light 1.8s ease-out; }
@keyframes loot-light {
  0%, 12% { background: rgb(var(--glow)); box-shadow: 0 0 3px 1px rgba(var(--glow), .95), 0 0 12px 4px rgba(var(--glow), .6), 0 0 26px 8px rgba(var(--glow), .25); }
  100% { background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--glow), 0); }
}
.win-sub { color: var(--accent-2); font-size: .9rem; }
.win-meta { margin-left: auto; font-size: .8rem; color: var(--muted); }
button.win-title { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: inherit; text-align: left; }
.win-toggle::after, .fold-title::after {
  content: ""; display: inline-block; width: .36em; height: .36em; margin-left: .55rem; vertical-align: .22em;
  border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s;
}
.win-toggle:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.panel[data-panel] > .win-head { cursor: pointer; user-select: none; }
.panel[data-panel] > .win-head:hover .win-toggle::after { border-color: var(--text); }
.panel.collapsed > :not(.win-head) { display: none !important; }
.panel.collapsed > .win-head { margin-bottom: -.8rem; border-bottom-color: transparent; }
.panel.collapsed > .win-head .seg { display: none; }
.panel.collapsed .win-toggle::after, .fold.collapsed .fold-title::after { transform: rotate(-45deg); }
/* the Sections bar folds everything below it in the monument panel */
.fold-head { appearance: none; background: none; border: 0; padding: 0; width: 100%; cursor: pointer; text-align: left; font-weight: inherit; line-height: inherit; user-select: none; }
.fold-head:hover, .fold-head:hover .fold-title::after { color: var(--text); border-color: var(--text); }
.fold-head:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
button.fold-head { color: var(--muted); }
.fold.collapsed > .fold-body, .fold.collapsed .fold-note, .fold:not(.collapsed) .fold-sum { display: none; }
.fold-sum { color: var(--muted); text-transform: none; letter-spacing: .02em; }
.est {
  font-family: var(--head-font); font-stretch: 87.5%; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--mega); border: 1px solid rgba(255, 185, 56, .45); padding: .02rem .32rem; border-radius: 2px; vertical-align: middle; white-space: nowrap;
}
.muted { color: var(--muted); font-size: .85rem; }
.empty-note { color: var(--muted); font-size: .88rem; margin: .2rem 0; }

/* ---------- buttons ---------- */
.btn {
  appearance: none; border: 0; border-radius: 2px; cursor: pointer;
  font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: rgba(255, 255, 255, .09); color: var(--text); padding: .55rem .85rem;
  transition: background .12s, transform .05s;
}
.btn:hover { background: rgba(255, 255, 255, .16); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .tile:focus-visible, .tabs button:focus-visible, input:focus-visible, .slot:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.btn.primary { background: var(--green); color: var(--green-text); }
.btn.primary:hover { background: var(--green-hi); }
.btn.danger { background: rgba(164, 55, 42, .3); color: #f3b1a3; }
.btn.danger:hover { background: var(--red); color: #fff; }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.small { padding: .32rem .6rem; font-size: .8rem; }
a.btn { display: inline-block; text-decoration: none; }   /* the footer's link to the sister site */
.btn.big { font-size: 1.05rem; }
.btn[disabled] { opacity: .45; cursor: default; }
input[type="search"], input[type="number"], #popN, #bmLink {
  width: 100%; padding: .5rem .6rem; border-radius: 2px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); color: var(--text);
}
.check { display: flex; align-items: center; gap: .45rem; font-size: .88rem; margin-top: .65rem; cursor: pointer; color: var(--muted); }
.check input, .part input { accent-color: var(--green-hi); width: 16px; height: 16px; margin: 0; }

/* ---------- picker ---------- */
.tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: .6rem; }
.tabs button {
  appearance: none; border: 0; background: rgba(255, 255, 255, .06); color: var(--muted); padding: .55rem; cursor: pointer;
  font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.tabs button[aria-selected="true"] { background: var(--accent); color: #fff; }
.source-list { margin-top: .6rem; max-height: 440px; overflow-y: auto; padding: 3px 4px 0 3px; scrollbar-width: thin; scrollbar-color: #6d665b rgba(255, 255, 255, .06); scrollbar-gutter: stable; }
.group-label { font-family: var(--head-font); font-stretch: 87.5%; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin: .7rem 0 .35rem; }
.group-label:first-child { margin-top: 0; }
.tiles { display: grid; gap: 5px; }
.tiles.mons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles.cons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile {
  appearance: none; position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
  background: var(--slot); border-radius: 2px; overflow: hidden; min-width: 0;
}
.tile:hover { filter: brightness(1.15); }
.tile[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.tile .nm {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem .45rem .28rem;
  font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85)); color: #f1ebdf; line-height: 1.1;
}
.tile .tier-dot { position: absolute; top: 5px; left: 5px; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .6); }
.tile.con { display: grid; justify-items: center; padding: .45rem .3rem .4rem; gap: .15rem; }
.tile.con .crate-ic { width: 46px; height: 46px; }
.tile.con .nm { position: static; background: none; padding: 0; text-align: center; font-size: .72rem; color: var(--text); }
.t1 { background: var(--card-green); } .t2 { background: var(--card-blue); } .t3 { background: var(--card-red); }

/* ---------- scenes ---------- */
.scene { position: relative; aspect-ratio: 32 / 15; overflow: hidden; }
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .5) 100%); pointer-events: none; }
.sky-dusk { background: radial-gradient(circle at 72% 78%, rgba(255, 214, 150, .95) 0 2.4%, rgba(255, 170, 90, .45) 5%, rgba(255, 140, 70, 0) 22%), linear-gradient(180deg, #1a1b24 0%, #3a2630 38%, #8a4630 68%, #d9853f 88%, #f0b060 100%); }
.sky-dawn { background: radial-gradient(circle at 28% 80%, rgba(255, 220, 160, .95) 0 2.2%, rgba(255, 180, 110, .4) 5%, rgba(255, 150, 80, 0) 20%), linear-gradient(180deg, #1d2231 0%, #4a3a4a 40%, #b0674a 72%, #e7a66a 100%); }
.sky-sea { background: radial-gradient(circle at 64% 74%, rgba(255, 214, 150, .95) 0 2.4%, rgba(255, 170, 90, .45) 5%, rgba(255, 140, 70, 0) 22%), linear-gradient(180deg, #161b26 0%, #3a2b36 42%, #9a5238 70%, #e39a55 100%); }
.sky-storm { background: linear-gradient(180deg, #16181c 0%, #2c2d30 45%, #54463c 75%, #7d6048 100%); }
.sky-night { background: radial-gradient(circle at 80% 20%, rgba(230, 235, 255, .9) 0 1.6%, rgba(200, 210, 255, .2) 3.5%, transparent 12%), linear-gradient(180deg, #070a14 0%, #121a2e 50%, #2a2a40 80%, #4a3a44 100%); }
.sky-cold { background: radial-gradient(circle at 70% 60%, rgba(255, 250, 235, .9) 0 2%, rgba(255, 245, 220, .35) 5%, transparent 20%), linear-gradient(180deg, #1c2a3d 0%, #3d5a78 45%, #9fb8cf 80%, #dfe8ef 100%); }
.sky-rad { background: radial-gradient(circle at 60% 72%, rgba(240, 240, 160, .9) 0 2.2%, rgba(220, 220, 120, .35) 5%, transparent 22%), linear-gradient(180deg, #1a1d14 0%, #3a3f22 40%, #7d7f35 72%, #c2b85a 100%); }
.sky-deep { background: linear-gradient(180deg, #0f4a58 0%, #0a3340 35%, #06212b 70%, #031219 100%); }

/* ---------- hero (selected source) ---------- */
.hero-banner { position: relative; margin: -.8rem -.8rem .7rem; }
.hero-banner .scene { aspect-ratio: 32 / 13; }
.hero-title { position: absolute; left: .8rem; right: .8rem; bottom: .55rem; z-index: 2; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.hero-title h1 { font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700; font-size: 1.6rem; text-transform: uppercase; letter-spacing: .03em; text-shadow: 0 2px 6px #000; line-height: 1; }
.tier { font-family: var(--head-font); font-stretch: 87.5%; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .1rem .4rem; border-radius: 2px; color: #fff; }
.hero-title .est { background: rgba(0, 0, 0, .55); }
.con-hero { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: .8rem; align-items: center; margin-bottom: .4rem; }
.con-hero .crate-ic { width: 92px; height: 92px; background: var(--slot); border-radius: 2px; padding: 6px; }
/* the summary the Worker puts in #detail on /launch-site-style pages until the app has loaded (src/seo.js) */
.seo-h { font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; margin: .9rem 0 .3rem; color: var(--muted); }
.seo-h + ul { margin: 0 0 .4rem; padding-left: 1.2rem; }
.con-hero h1 { font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700; font-size: 1.45rem; text-transform: uppercase; line-height: 1.05; }
.blurb { margin: 0 0 .5rem; color: var(--muted); font-size: .88rem; }
.facts { margin: .2rem 0 0; padding-left: 1.1rem; font-size: .86rem; }
.facts li { margin: .15rem 0; }
.parts-head { display: flex; justify-content: space-between; font-family: var(--head-font); font-stretch: 87.5%; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin: .8rem 0 .3rem; }
.part {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .2rem .55rem;
  padding: .42rem .5rem; background: var(--panel-2); border-left: 3px solid transparent; margin-bottom: 3px;
}
.part:hover { background: rgba(255, 255, 255, .075); }
.part label { cursor: pointer; font-size: .9rem; font-weight: 600; min-width: 0; display: flex; align-items: center; gap: .35rem; }
.part label .ic { width: 28px; height: 28px; }
.part .only {
  appearance: none; border: 0; background: rgba(255, 255, 255, .08); color: var(--muted); border-radius: 2px; cursor: pointer;
  font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700; text-transform: uppercase; font-size: .7rem; padding: .18rem .45rem;
}
.part .only:hover { background: var(--green); color: var(--green-text); }
.part .mix-icons { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .2rem .7rem; }
.mi { display: inline-flex; align-items: center; gap: .25rem; font: 700 .86rem/1 var(--head-font); font-stretch: 87.5%; color: var(--text); }
.mi .crate-ic, .mi .ic { width: 32px; height: 32px; }
.mi.dim { color: var(--muted); }
.part .note { grid-column: 2 / -1; font-size: .78rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; }
.part .note b { color: var(--text); font-weight: 600; }
.part .note .ic { width: 24px; height: 24px; vertical-align: -6px; }
.room.card-green { border-left-color: var(--card-green); }
.room.card-blue { border-left-color: var(--card-blue); }
.room.card-red { border-left-color: var(--card-red); }
.room.card-none { border-left-color: var(--dim); }
.quick { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }

/* ---------- loot bar ---------- */
.lootbar {
  position: sticky; top: 66px; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem;
  padding: .55rem .7rem; background: url(img/noise.svg), rgba(24, 22, 20, .97); border-top: 2px solid var(--green);
  container-type: inline-size;   /* the @container rules below keep it on one line as long as they can */
}
.loot-buttons { display: flex; gap: 5px; }
.loot-buttons .btn { padding: .62rem .85rem; min-width: 3.6rem; }
.loot-buttons .btn.big { padding-inline: 1.3rem; }
.custom-row { display: flex; align-items: center; gap: .4rem; }
.custom-row input { width: 5.2rem; }
.pop-row { display: flex; align-items: center; gap: .4rem; margin-left: auto; }   /* the far right of the loot bar */
.pop-row[hidden] { display: none; }
.pop-row.idle .pop-fx { font-style: italic; }
#popN { width: 5.4rem; text-align: center; }
/* server population slider: 0-300 players (the right end means 300 or more) */
.pop-range { --fill: 0%; -webkit-appearance: none; appearance: none; flex: 1 1 8rem; min-width: 5rem; max-width: 10rem; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.pop-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--fill), rgba(255, 255, 255, .13) var(--fill)); }
.pop-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: var(--text); border: 3px solid var(--accent); }
.pop-range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .13); }
.pop-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.pop-range::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--text); border: 3px solid var(--accent); }
.pop-range:hover::-webkit-slider-thumb { background: #fff; }
.pop-range:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
#popN[aria-invalid] { border-color: var(--accent); }
.pop-fx { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.pop-find { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: .78rem; color: var(--muted); white-space: nowrap; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pop-find.live { color: var(--green-hi); font-weight: 700; text-decoration: none; }
.pop-find:hover, .pop-find:focus-visible { color: var(--text); }
/* Loot buttons, custom amount and server population share one line. As the bar narrows it drops the "Server pop" and
   "Custom" labels, then shortens "Loot ×N" to "×N" and slims the buttons, slider and player box; only then does the
   population part wrap to a second line (right-aligned). Hidden words stay readable to screen readers. */
@container (max-width: 1000px) { .pop-label { display: none; } }
@container (max-width: 930px) {
  .custom-row label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@container (max-width: 880px) {
  .cust-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .loot-buttons .btn { padding-inline: .6rem; min-width: 0; }
  .loot-buttons .btn.big { padding-inline: .95rem; }
  .custom-row input { width: 4rem; }
  .pop-range { flex-basis: 6rem; max-width: 7rem; }
  #popN { width: 4.4rem; }
}
@container (max-width: 760px) {
  .loot-buttons .btn { padding-inline: .5rem; }
  .loot-buttons .btn.big { padding-inline: .8rem; }
  .pop-row { gap: .3rem; }
  .pop-range { flex-basis: 4.5rem; min-width: 4.5rem; max-width: 5.5rem; }
  #popN { width: 4rem; }
  .pop-fx, .pop-find { font-size: .74rem; }
}
@container (max-width: 660px) { .pop-find:not(.live) { display: none; } }   /* the Your server panel has the search */
/* your server: BattleMetrics' own status banner (500x80, scales down on phones) */
.bm-row { display: flex; gap: .4rem; margin: .5rem 0 .3rem; }
.bm-row input { flex: 1; min-width: 0; }
#bmLink[aria-invalid] { border-color: var(--accent); }
.bm-banner { display: block; max-width: 500px; font-size: .88rem; }
.bm-banner img { display: block; width: 100%; height: auto; border-radius: 2px; background: #151412; }
.linkish { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--accent-2); text-decoration: underline; cursor: pointer; }
/* your server: Steam server search */
[data-panel="server"] { scroll-margin-top: 72px; }
.srv-list { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: 3px; max-height: 24rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6d665b rgba(255, 255, 255, .06); }
.srv-list:empty { display: none; }
.srv-pick {
  appearance: none; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .15rem .7rem;
  padding: .45rem .6rem; background: var(--panel-2); border: 0; border-left: 3px solid transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.srv-pick:hover, .srv-pick:focus-visible { background: rgba(255, 255, 255, .08); border-left-color: var(--accent); outline: none; }
.srv-name { font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.srv-pop { font: 700 .98rem/1.1 var(--head-font); font-stretch: 87.5%; color: var(--muted); white-space: nowrap; }
.srv-pop b, .srv-line b { color: var(--text); }
.srv-meta { grid-column: 1 / -1; font-size: .76rem; color: var(--muted); overflow-wrap: anywhere; }
.srv-card { padding: .55rem .7rem .6rem; background: var(--panel-2); border-left: 3px solid var(--green-hi); }
.srv-card .srv-name { font-size: 1rem; }
.srv-card:focus { outline: none; }
.srv-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.srv-line { font-size: .88rem; color: var(--muted); margin-top: .2rem; }
.srv-line b { font: 700 1.2rem/1 var(--head-font); font-stretch: 87.5%; }
.srv-card .odds-note { margin-top: .45rem; }
.odds-note.warn { color: var(--accent-2); }
.bm-box { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.custom-row label, .pop-label { font-family: var(--head-font); font-stretch: 87.5%; text-transform: uppercase; font-size: .8rem; color: var(--muted); font-weight: 700; }

/* ---------- odds ---------- */
.odds-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.odds-table th { text-align: left; font-family: var(--head-font); font-stretch: 87.5%; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); font-weight: 700; padding: .2rem .2rem .3rem; }
.odds-table td { padding: .45rem .2rem; border-top: 1px solid var(--line); vertical-align: top; }
.odds-table td.n { text-align: right; font: 700 1rem/1.2 var(--head-font); font-stretch: 87.5%; white-space: nowrap; }
.pool-name { font-weight: 600; }
.odds-table td > .mi { vertical-align: middle; }   /* keeps "always" level with the name beside the icon */
.mix { display: flex; height: 6px; overflow: hidden; margin: .3rem 0 .3rem; background: rgba(255, 255, 255, .05); }
.mix span { display: block; height: 100%; }
.k-mil { background: #6f8f3a; } .k-brown { background: #a3703f; } .k-elite { background: #3c6fb8; } .k-tools { background: #c0392b; }
.k-blue { background: #2f64a8; } .k-yellow { background: #c99a22; } .k-food { background: #6aa84f; } .k-tan { background: #c9a569; } .k-med { background: #c9302c; }
.k-other { background: #807a70; } .k-none { background: transparent; }
.mix-legend { display: flex; flex-wrap: wrap; gap: .2rem .7rem; }
.callout { margin: .7rem 0 0; padding: .55rem .65rem; background: rgba(95, 125, 50, .16); border-left: 3px solid var(--green-hi); font-size: .88rem; }
.callout b { color: #cfe8a6; }
.exp-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .6rem; font-size: .86rem; margin: .2rem 0 0; }
.exp-list dt { display: flex; align-items: center; gap: .4rem; color: var(--text); }
.exp-list dt .crate-ic, .exp-list dt .ic { width: 32px; height: 32px; flex: none; }
.exp-list dd { margin: 0; text-align: right; font: 700 .98rem/1.3 var(--head-font); font-stretch: 87.5%; }
.exp-title { margin-top: .9rem; }
.odds-note { font-size: .78rem; color: var(--muted); margin: .6rem 0 0; }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.stat { background: url(img/noise.svg), var(--panel); border: 1px solid var(--line); border-top: 2px solid rgba(205, 65, 43, .55); padding: .55rem .7rem; display: grid; gap: .05rem; min-width: 0; }
.stat .k { font-family: var(--head-font); font-stretch: 87.5%; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.stat .v { font: 700 1.55rem/1.1 var(--head-font); font-stretch: 87.5%; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat .sub { font-size: .74rem; color: var(--muted); }
.v.good { color: var(--good); } .v.bad { color: var(--bad); }

/* ---------- Rust-style inventory slots ---------- */
.inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 4px; }
.inv.six { grid-template-columns: repeat(6, minmax(0, 76px)); }
.slot {
  position: relative; aspect-ratio: 1; min-width: 0; border-radius: 2px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .14)), var(--slot);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); cursor: default; outline: none;
}
/* Hover (or tap): the slot pops out of the grid and the icon bounces up. */
.slot { transition: transform .18s cubic-bezier(.3, 1.7, .5, 1), box-shadow .18s, background-color .12s; }
.slot .ic { transition: transform .22s cubic-bezier(.3, 1.9, .5, 1), filter .22s; }
.slot:not(.empty):hover, .slot.on {
  transform: scale(1.16); z-index: 6; overflow: visible; background-color: var(--slot-hi);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 22px rgba(0, 0, 0, .65);
}
.slot:not(.empty):hover .ic, .slot.on .ic {
  transform: scale(1.14) translateY(-4px) rotate(-4deg);
  filter: drop-shadow(0 9px 7px rgba(0, 0, 0, .6)) brightness(1.12);
}
.slot.rare:hover, .slot.rare.on { box-shadow: inset 0 0 0 1px var(--rare), 0 10px 22px rgba(0, 0, 0, .65), 0 0 18px rgba(179, 124, 255, .55); }
.slot.mega:hover, .slot.mega.on { box-shadow: inset 0 0 0 1px var(--mega), 0 10px 22px rgba(0, 0, 0, .65), 0 0 20px rgba(255, 185, 56, .6); }
.slot.missing:hover .ic, .slot.missing.on .ic { filter: grayscale(.4) brightness(.9) drop-shadow(0 9px 7px rgba(0, 0, 0, .6)); opacity: .85; }
.crate-tile, .tile { transition: transform .18s cubic-bezier(.3, 1.7, .5, 1), box-shadow .18s; }
.crate-tile:hover, .tile:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 18px rgba(0, 0, 0, .55); z-index: 2; position: relative; }
.slot.empty { background: var(--slot-empty); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.slot .ic { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); }
.slot svg.ic { fill: #a39c90; width: 50%; height: 50%; }
.slot .q {
  position: absolute; right: 4px; bottom: 2px; font: 700 12.5px/1 var(--head-font); font-stretch: 87.5%;
  color: #f1ece2; text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
.slot .cond { position: absolute; left: 3px; top: 5px; bottom: 5px; width: 3px; background: var(--cond); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.slot .nm { display: none; }   /* item name: only the phone drop table (a list) shows it */
.slot .pct { position: absolute; left: 4px; top: 3px; font: 700 10.5px/1 var(--head-font); font-stretch: 87.5%; text-shadow: 0 1px 2px #000; }
.slot.rare::after, .slot.mega::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.slot.rare::after { box-shadow: inset 0 0 0 1px var(--rare), inset 0 -14px 18px -12px var(--rare); }
.slot.mega::after { box-shadow: inset 0 0 0 1px var(--mega), inset 0 -16px 20px -12px var(--mega); }
.slot.missing .ic { filter: grayscale(1) brightness(.55); opacity: .5; }
.slot.na { opacity: .3; }
.slot.pop { animation: pop .3s ease-out; }
@keyframes pop { from { transform: scale(.82); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.p0 { color: #8ee37a; } .p1 { color: #c9e36a; } .p2 { color: #f1d45c; } .p3 { color: #f5a64a; } .p4 { color: #f57a4a; } .p5 { color: #ff5e5e; }
.row-btns { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
#resetBtn { margin-left: auto; }

/* last-run chips */
.opened { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: .6rem; }
.opened:empty { display: none; }
.chip-c { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem .15rem .2rem; background: var(--panel-2); font: 700 .86rem/1 var(--head-font); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .02em; }
.chip-c .crate-ic, .chip-c .ic { width: 38px; height: 38px; flex: none; }
.chip-c b { color: var(--accent-2); }

/* containers opened */
.crates { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 5px; }
.crates > .empty-note { grid-column: 1 / -1; }
.crate-tile { display: grid; justify-items: center; gap: .1rem; padding: .45rem .3rem .4rem; background: var(--slot); border-radius: 2px; text-align: center; min-width: 0; }
.crate-tile .crate-ic, .crate-tile .ic { width: 52px; height: 52px; }
.crate-tile .n { font: 700 1.2rem/1 var(--head-font); font-stretch: 87.5%; }
.crate-tile .nm { font-size: .7rem; color: var(--muted); line-height: 1.15; overflow-wrap: anywhere; }

/* console */
.console {
  height: 170px; overflow-y: auto; font: 12.5px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: rgba(0, 0, 0, .6); color: #cfcac0; padding: .5rem .6rem; scrollbar-width: thin; scrollbar-color: #4a4640 transparent;
}
.console .line { overflow-wrap: anywhere; }
.console .t { color: #625e57; }
.console .sys { color: #8fb5d9; }
.console .rare { color: #d7a6ff; font-weight: 700; }
.console .mega { color: #ffc24d; font-weight: 700; }
.console .warn { color: #ffb05c; }

/* footer: one slim row (loot data date + "unofficial" line | buttons); credits and notices are in the About dialog */
.footer { margin-top: 1rem; background: rgba(0, 0, 0, .35); border-top: 1px solid var(--line); }
.footer-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem;
  max-width: 1440px; margin: 0 auto; padding: .55rem 12px;
}
.footer-text { min-width: 0; }
.footer-text p { margin: 0; text-wrap: balance; }
.databar { font-size: .8rem; color: var(--muted); }
.databar b { color: var(--text); font-weight: 600; }
.databar .warn { color: var(--mega); }
.footer-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Sean's other tools (same markup and look on the OSRS sim and Godclone). */
.more-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.more-tools-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: .2rem; }
.tool-soon { display: inline-block; cursor: default; opacity: .7; }
.tool-soon:hover { background: rgba(255, 255, 255, .09); }
.tool-soon:active { transform: none; }
.soon-tag { font-size: .62rem; padding: .02rem .3rem; margin-left: .2rem; border: 1px solid currentColor; border-radius: 2px; vertical-align: 1px; }
@media (min-width: 1480px) { .footer-row { max-width: 1900px; } }   /* as wide as the three-column layout */
/* Short page on a tall window: the footer sits at the bottom edge instead of floating above an empty band. */
@media (min-width: 961px) {
  body { display: flex; flex-direction: column; }
  .layout { width: 100%; margin-bottom: 1rem; }
  .footer { margin-top: auto; }
}

/* ---------- bug report, suggestion & contact dialogs ---------- */
.report-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 4px;
  background: #1d1b18; color: var(--text); box-shadow: 0 16px 48px rgba(0, 0, 0, .6);
}
.report-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.report-dialog form { padding: 1.1rem 1.2rem 1rem; }
.report-dialog h2 { margin: 0 0 .3rem; font-family: var(--head-font); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .04em; font-size: 1.15rem; }
.report-dialog p.muted { margin: 0 0 .8rem; color: var(--muted); font-size: .85rem; }
.report-dialog .field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .7rem; font-size: .85rem; color: var(--muted); }
.report-dialog select, .report-dialog input[type="email"], .report-dialog input[type="text"], .report-dialog textarea {
  font: inherit; color: var(--text); background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 2px; padding: .45rem .55rem;
}
.report-dialog textarea { width: 100%; resize: vertical; min-height: 7rem; }
.report-dialog select:focus-visible, .report-dialog input:focus-visible, .report-dialog textarea:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.contact-how { display: flex; gap: .6rem; align-items: flex-end; }
.contact-how .grow { flex: 1; min-width: 0; }
.contact-how input { width: 100%; }
.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-2); 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; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.legal { color: var(--dim); font-size: .75rem; }
.about-dialog { width: min(520px, calc(100vw - 32px)); }
.about-dialog .dlg-body { padding: 1.1rem 1.2rem 1rem; font-size: .85rem; color: var(--muted); line-height: 1.45; }
.about-dialog h2:focus { outline: none; }
.about-dialog h3 { margin: .9rem 0 .2rem; font-family: var(--head-font); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; color: var(--text); }
.about-dialog p { margin: 0; }
.about-dialog h2 + p { margin-top: .5rem; }
.about-dialog a { color: var(--accent-2); }
.about-dialog .check { margin: .6rem 0 1rem; color: var(--text); }

/* ---------- item tooltip ---------- */
.tip {
  position: fixed; z-index: 45; pointer-events: none; width: max-content; max-width: 270px;
  background: rgba(16, 15, 13, .97); border: 1px solid rgba(255, 255, 255, .12); border-top: 2px solid var(--accent);
  padding: .5rem .65rem; font-size: .82rem; box-shadow: 0 10px 28px rgba(0, 0, 0, .65);
}
.tip[hidden] { display: none; }
.tip-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .5rem; align-items: center; margin-bottom: .3rem; }
.tip-head .ic { width: 44px; height: 44px; }
.tip-name { font: 700 1rem/1.1 var(--head-font); font-stretch: 87.5%; text-transform: uppercase; }
.tip-cat { color: var(--muted); font-size: .75rem; }
.tip dl { display: grid; grid-template-columns: auto auto; gap: .1rem .8rem; margin: 0; }
.tip dt { color: var(--muted); }
.tip dd { margin: 0; text-align: right; font-weight: 600; }

/* ---------- pickup notices (bottom right) ---------- */
.pickups { position: fixed; right: 14px; bottom: 14px; z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; pointer-events: none; }
.pick {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: .55rem; min-width: 200px; max-width: 320px;
  padding: .2rem .7rem .2rem .25rem; background: rgba(18, 17, 15, .9); border-left: 3px solid var(--green-hi);
  font: 700 .88rem/1.1 var(--head-font); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .03em;
  animation: pickIn .22s ease-out; transition: opacity .35s, transform .35s;
}
.pick .ic { width: 30px; height: 30px; }
.pick .pa { color: #a5d65f; }
.pick.rare { border-left-color: var(--rare); }
.pick.mega { border-left-color: var(--mega); }
.pick.out { opacity: 0; transform: translateX(20px); }
@keyframes pickIn { from { opacity: 0; transform: translateX(24px); } }

/* ---------- celebration ---------- */
.fx {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 40;
  background: radial-gradient(circle at center, rgba(0, 0, 0, .35), rgba(0, 0, 0, .75)); animation: fade .2s ease-out;
}
.fx[hidden] { display: none; }
.fx-card {
  width: min(92vw, 350px); text-align: center; padding: 1.1rem 1.2rem 1rem; border-radius: 2px;
  background: url(img/noise.svg), #1b1916; color: #eee8dc; border: 1px solid var(--fx-color, #cd412b); border-top: 3px solid var(--fx-color, #cd412b);
  box-shadow: 0 0 50px rgba(0, 0, 0, .7), 0 0 36px color-mix(in srgb, var(--fx-color, #cd412b) 40%, transparent);
  animation: rise .35s cubic-bezier(.2, 1.4, .4, 1);
}
.fx.rare { --fx-color: #b37cff; }
.fx.mega { --fx-color: #ffb938; }
.fx-tier { font: 700 1.05rem/1 var(--head-font); font-stretch: 87.5%; letter-spacing: .16em; text-transform: uppercase; color: var(--fx-color, #cd412b); }
.fx-stage { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: .8rem 0 .6rem; }
.fx-slot { width: 150px; }
.fx-nav {
  appearance: none; width: 36px; height: 58px; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 2px;
  background: rgba(0, 0, 0, .45); color: var(--fx-color, #cd412b); border: 1px solid color-mix(in srgb, var(--fx-color, #cd412b) 55%, transparent);
  transition: background .12s, color .12s;
}
.fx-nav:hover { background: rgba(0, 0, 0, .75); color: #fff; }
.fx-nav:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.fx-nav.off { visibility: hidden; }
.fx-nav.next { animation: nudge 1.1s ease-in-out infinite; }
.fx-card[data-left="1"] {
  box-shadow: 7px 7px 0 -1px #1b1916, 7px 7px 0 0 color-mix(in srgb, var(--fx-color, #cd412b) 60%, transparent),
    0 0 50px rgba(0, 0, 0, .7), 0 0 36px color-mix(in srgb, var(--fx-color, #cd412b) 40%, transparent);
}
.fx-card[data-left="2"] {
  box-shadow: 7px 7px 0 -1px #1b1916, 7px 7px 0 0 color-mix(in srgb, var(--fx-color, #cd412b) 60%, transparent),
    14px 14px 0 -2px #1b1916, 14px 14px 0 -1px color-mix(in srgb, var(--fx-color, #cd412b) 35%, transparent),
    0 0 50px rgba(0, 0, 0, .7), 0 0 36px color-mix(in srgb, var(--fx-color, #cd412b) 40%, transparent);
}
.fx-card.in-next { animation: in-next .3s cubic-bezier(.2, .9, .3, 1); }
.fx-card.in-prev { animation: in-prev .3s cubic-bezier(.2, .9, .3, 1); }
.fx .fx-ghost { position: fixed; margin: 0; z-index: 2; pointer-events: none; animation: fly-off .34s cubic-bezier(.55, 0, .8, .35) forwards; }
.fx-slot .slot { width: 150px; }
.fx-name { font: 700 1.5rem/1.1 var(--head-font); font-stretch: 87.5%; text-transform: uppercase; }
.fx-meta { color: #b8b1a4; font-size: .86rem; margin-top: .25rem; }
.fx-more { color: #ffcf7a; font-size: .82rem; margin: .35rem 0 .7rem; min-height: 1em; }
.fx.shake .fx-card { animation: rise .35s cubic-bezier(.2, 1.4, .4, 1), shake .45s .1s; }
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 41; }
@keyframes fade { from { opacity: 0; } }
@keyframes nudge { 50% { transform: translateX(3px); } }
@keyframes in-next { from { transform: translate(7px, 7px) scale(.96); filter: brightness(.6); } }
@keyframes in-prev { from { transform: translateX(-60%) rotate(-10deg); opacity: 0; } }
@keyframes fly-off { to { transform: translateX(-125%) rotate(-14deg); opacity: 0; } }
@keyframes rise { from { transform: translateY(18px) scale(.9); opacity: 0; } }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 42;
  background: rgba(18, 17, 15, .96); color: #eee8dc; border-left: 3px solid var(--cond);
  padding: .55rem .9rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); max-width: min(92vw, 440px); font-size: .88rem; animation: rise .25s ease-out;
}
.toast[hidden] { display: none; }
.toast b { color: #b5e08a; }

/* ---------- your loot & drop table ---------- */
.seg { display: inline-flex; }
.tierpick { margin: .2rem 0 .7rem; font-size: .85rem; }
.respawn-line { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; margin: 0 0 .7rem; font-size: .85rem; }
.respawn-line > span:first-child { flex: 1 1 14em; min-width: 0; }   /* narrower than this and the timer moves under the text */
.respawn-line b { color: var(--text); }
/* personal countdown: a clock button to the right of the respawn line, a chip while it runs, a badge on the tile */
.timer-btn {
  appearance: none; display: inline-flex; align-items: center; flex: none; gap: .3rem; padding: .2rem .5rem .2rem .4rem;
  border: 1px solid rgba(232, 101, 61, .6); border-radius: 2px; background: rgba(205, 65, 43, .16); color: #f0dcd2; cursor: pointer;
  font: 700 .74rem/1 var(--head-font); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .06em;
}
.timer-btn svg { width: 15px; height: 15px; color: var(--accent-2); }
.timer-btn:hover, .timer-btn:focus-visible { background: rgba(205, 65, 43, .32); border-color: var(--accent-2); color: #fff; }
.timer-chip { display: inline-flex; flex: none; align-items: center; gap: .3rem; padding: 0 0 0 .4rem; border: 1px solid var(--line); border-radius: 2px;
  font-size: .78rem; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.timer-chip svg, .tile-timer svg { flex: none; color: var(--accent-2); }
.timer-chip button { appearance: none; background: none; border: 0; color: var(--muted); cursor: pointer; padding: .15rem .5rem; font-size: 1rem; line-height: 1.2; }
.timer-chip button:hover, .timer-chip button:focus-visible { color: var(--text); }
.tile-timer { position: absolute; top: 4px; right: 4px; z-index: 1; display: inline-flex; align-items: center; gap: 3px; padding: 1px 4px; border-radius: 2px;
  background: rgba(0, 0, 0, .7); font-size: .68rem; color: var(--text); font-variant-numeric: tabular-nums; }
.tierpick .seg { margin-left: .4rem; vertical-align: middle; }
.tierpick .muted { display: block; margin-top: .3rem; font-size: .78rem; }
.seg button {
  appearance: none; border: 0; cursor: pointer; background: rgba(255, 255, 255, .07); color: var(--muted); padding: .36rem .6rem;
  font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
}
.seg button:hover { background: rgba(255, 255, 255, .13); color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.grp + .grp { margin-top: .75rem; }
.grp-head { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; font-family: var(--head-font); font-stretch: 87.5%; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.grp-head[hidden] { display: none; }
.grp-head .grp-meta { color: var(--dim); letter-spacing: .04em; }
.r-always { --r: #afeeee; } .r-common { --r: #56e156; } .r-uncommon { --r: #ffed4c; } .r-rare { --r: #ff863c; } .r-vrare { --r: #ff6262; }
.slot .chance { position: absolute; left: 4px; top: 3px; font: 700 10.5px/1 var(--head-font); font-stretch: 87.5%; color: var(--r); text-shadow: 0 1px 2px #000, 0 0 2px #000; }
.slot .rar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--r); opacity: .9; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .76rem; color: var(--muted); margin: -.2rem 0 .7rem; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--r); margin-right: .35rem; vertical-align: -1px; }

/* containers to loot (monuments) */
.ltypes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.ltype {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .35rem;
  padding: .28rem .45rem; background: var(--panel-2); cursor: pointer; font-size: .82rem; min-width: 0;
}
.ltype:hover { background: rgba(255, 255, 255, .08); }
.ltype input { accent-color: var(--green-hi); width: 15px; height: 15px; margin: 0; }
.ltype .crate-ic, .ltype .ic { width: 34px; height: 34px; }
.ltype .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltype .n { font: 700 .82rem/1 var(--head-font); font-stretch: 87.5%; color: var(--muted); }
.ltype.off { opacity: .42; }
.ltype.off .nm { text-decoration: line-through; }
@media (max-width: 560px) { .ltypes { grid-template-columns: minmax(0, 1fr); } .seg button { padding: .32rem .45rem; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- small screens ---------- */
@media (max-width: 960px) {
  /* --bar-h is the fixed loot bar's real height (set by app.js), so nothing hides behind it however many lines it has */
  body { padding-bottom: calc(var(--bar-h, 76px) + 6px); }
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "left" "side" "main"; grid-template-rows: auto; padding: 8px; gap: 8px; }
  .lootbar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 25; justify-content: center; border-radius: 0;
    padding: .45rem .5rem calc(.45rem + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(0, 0, 0, .55); column-gap: 5px; }
  .custom-row { gap: 5px; align-self: stretch; align-items: stretch; }   /* as tall as the loot buttons */
  .custom-row input { width: 3.8rem; }
  .lootbar .custom-row .btn { padding: .62rem .7rem; }
  .pop-row .pop-label { display: none; }
  .pop-row { margin-left: 0; }
  .pop-row.idle { display: none; }   /* nothing here scales with players: keep the bottom bar to one line */
  .pickups { bottom: calc(var(--bar-h, 76px) + 10px); }
  .toast { top: 66px; bottom: auto; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .source-list { max-height: 360px; }
  .tiles.mons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles.cons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body { font-size: 14px; }
  .topbar { padding: .45rem .7rem; }
  .brand-name { font-size: 1.1rem; }
  .logo { width: 32px; height: 32px; }
  .life { display: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat .v { font-size: 1.25rem; }
  .tiles.mons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles.cons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inv { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
  .inv.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* Drop table as named rows: icon | name, then chance and amount; the rarity bar becomes a left edge. Tap still opens the card. */
  #dropTable .inv { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 3px; }
  #dropTable .slot {
    aspect-ratio: auto; min-height: 46px; padding: 5px 6px 5px 8px; align-items: center; justify-items: start; align-content: center;
    grid-template-columns: 32px auto minmax(0, 1fr); column-gap: 7px; row-gap: 3px;
  }
  #dropTable .slot .ic { grid-area: 1 / 1 / 3 / 2; width: 32px; height: 32px; }
  #dropTable .slot .nm {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; grid-area: 1 / 2 / 2 / 4;
    font-size: 12.5px; line-height: 1.15; font-weight: 600; color: var(--text); overflow-wrap: anywhere;
  }
  #dropTable .slot .chance, #dropTable .slot .q { position: static; font-size: 12.5px; }
  #dropTable .slot .chance { grid-area: 2 / 2; }
  #dropTable .slot .q { grid-area: 2 / 3; color: var(--muted); text-shadow: none; font-weight: 600; }
  #dropTable .slot .rar { top: 0; right: auto; width: 3px; height: auto; }
  #dropTable .slot:hover, #dropTable .slot.on { transform: none; }
  #dropTable .slot:hover .ic, #dropTable .slot.on .ic { transform: scale(1.1) rotate(-4deg); }
  .hero-title h1 { font-size: 1.3rem; }
  .pickups { right: 8px; }
  .loot-buttons .btn, .lootbar .custom-row .btn { padding: .6rem .55rem; min-width: 0; }
  .loot-buttons .btn.big { padding-inline: .9rem; }
  .pick { min-width: 170px; }
  .footer-row { justify-content: center; text-align: center; padding: .5rem 8px; }
  .footer-actions, .more-tools { justify-content: center; }
}
@media (max-width: 400px) {
  .pop-find:not(.live) { display: none; }   /* no room; the Your server panel has the search */
}