/* DungeonSettlersDB - game-authentic theme.
   Palette sampled from the game's own UI sprites (Box/Button frames):
   panel #2d2a31 / strip #222025 / raised #36323a, rust border #915847,
   tan #b6835a, activated #d9be8f, HP teal #228286, energy #d9c23e, stress #d92b49.
   Fonts extracted from game assets: PerfectDOSVGA437 (UI), Lora-MediumItalic (flavor). */

@font-face {
  font-family: "DSPixel";
  src: url("fonts/PerfectDOSVGA437.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "DSFlavor";
  src: url("fonts/Lora-MediumItalic.ttf") format("truetype");
  font-display: swap;
}

:root {
  --bg: #1a181d; --bg2: #16141a;
  --panel: #2d2a31; --panel2: #222025; --panel3: #36323a;
  --border: #4a3a33; --border-strong: #915847; --border-soft: #3a363f;
  --text: #d8d3cb; --muted: #a49eab; --accent: #b6835a; --accent-bright: #d9be8f;
  --link: #c99e6b; --rust: #915847; --accent-dim: #7d6a54;
  --common: #b0aeb3; --uncommon: #6cae58; --rare: #5f8fd6; --legendary: #d9a13e;
  --good: #3aa7ad; --bad: #d92b49; --energy: #d9c23e;
  --pix: "DSPixel", "Courier New", monospace;
}
* { box-sizing: border-box; }
html { scrollbar-color: #4a4550 var(--bg); }
body {
  margin: 0; color: var(--text);
  background: var(--bg);
  background-image: radial-gradient(ellipse at 50% -10%, #24212a 0%, var(--bg) 55%, var(--bg2) 100%);
  background-attachment: fixed;
  font: 14px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent-bright); text-decoration: underline; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: #cdc4b6; }
img { image-rendering: pixelated; object-fit: contain; }
::selection { background: #91584755; }

/* ---- Layout ---- */
#layout { display: flex; min-height: 100vh; }
#sidebar {
  width: 234px; flex: 0 0 234px; background: #201d24;
  border-right: 1px solid #3c3129; padding: 12px 0 40px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 200;
  overscroll-behavior: contain;
}
/* bottom padding clears the fixed wishlist CTA so it never covers page content */
#main { flex: 1; min-width: 0; padding: 0 28px 96px; }
#topbar {
  display: flex; align-items: center; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid #3c3129; margin-bottom: 18px;
  position: sticky; top: 0; z-index: 150;
  background: linear-gradient(180deg, #1c1a20f5, #1a181df5);
  backdrop-filter: blur(3px);
}
/* text-overflow:clip, not ellipsis - the U+2026 glyph garbles in the CP437 pixel font */
#topbar h1 { font-family: var(--pix); font-size: 20px; font-weight: 400; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; color: var(--accent-bright); letter-spacing: .5px; }
#topbar .crumb { color: var(--muted); font-size: 13px; }
#navtoggle {
  display: none; background: var(--panel2); color: var(--accent);
  border: 1px solid var(--border-strong); border-radius: 6px;
  font-family: var(--pix); font-size: 18px; padding: 4px 10px; cursor: pointer; flex: 0 0 auto;
}
#navbackdrop { display: none; }

/* ---- Sidebar ---- */
#sidebar .logo {
  display: block; padding: 6px 16px 12px; font-family: var(--pix);
  font-size: 19px; color: var(--accent-bright); line-height: 1.2;
}
#sidebar .logo span { color: var(--good); }
#sidebar .logo small { display: block; color: var(--muted); font-size: 12px; font-family: var(--pix); margin-top: 3px; }
#sidebar .group { margin-top: 12px; }
#sidebar .group > .gt {
  padding: 4px 16px; font-family: var(--pix); font-size: 13px;
  text-transform: uppercase; letter-spacing: .12em; color: #7d6a54;
}
#sidebar a.nav {
  display: flex; align-items: center; gap: 8px; padding: 5px 16px 5px 22px;
  color: var(--text); font-size: 13.5px; border-right: 2px solid transparent;
}
#sidebar a.nav:hover { background: var(--panel2); text-decoration: none; color: var(--accent-bright); }
#sidebar a.nav.active { background: #2a2126; color: var(--accent-bright); border-right-color: var(--rust); }
#sidebar a.nav .cnt { margin-left: auto; color: #8b8593; font-size: 11px; font-family: var(--pix); }

/* ---- Search + language ---- */
#searchwrap { position: relative; margin-left: auto; width: 300px; max-width: 34vw; }
#searchbox, #langsel {
  width: 100%; padding: 7px 12px; background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px; outline: none;
}
#searchbox:focus { border-color: var(--border-strong); box-shadow: 0 0 0 1px #91584744; }
/* ---- DS custom dropdown (replaces native select popups) ---- */
.dssel { position: relative; display: inline-block; flex: 0 0 auto; }
.dssel select { display: none !important; }
.dssel-btn {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 10px; min-width: 120px; font-size: 12.5px; color: var(--text);
  background: linear-gradient(180deg, #2a272e, #242127);
  border: 1px solid #5c4335; border-radius: 6px;
  box-shadow: inset 0 1px 0 #ffffff0a, 0 1px 2px #00000044;
  font-family: inherit; text-align: left; width: 100%;
}
.dssel-btn:hover { border-color: var(--accent); color: var(--accent-bright); }
.dssel-btn .dssel-arrow { margin-left: auto; color: var(--accent); font-size: 10px; }
/* language selector relocated into the sidebar on mobile */
#sidebar .dssel.langsel-side { display: block; width: auto; margin: 2px 14px 14px; }
#sidebar .dssel.langsel-side .dssel-btn { width: 100%; min-width: 0; }
.dssel-menu {
  display: none; position: absolute; top: calc(100% + 5px); right: 0; min-width: 100%;
  max-height: 340px; overflow-y: auto; z-index: 600; white-space: nowrap;
  background: linear-gradient(180deg, #2f2c34, #26232a);
  border: 1px solid var(--border-strong); border-radius: 7px;
  box-shadow: inset 0 0 0 1px #00000066, 0 8px 24px #000000aa;
  padding: 4px;
}
.dssel.open .dssel-menu { display: block; }
.dssel-opt { padding: 6px 12px; border-radius: 5px; cursor: pointer; font-size: 13px; color: var(--text); }
.dssel-opt:hover, .dssel-opt.hl { background: #3a3640; color: var(--accent-bright); }
.dssel-btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }
.dssel-opt.on { background: linear-gradient(180deg, #c49468, #a97e50); color: #241e1f; font-weight: 600; }
.dssel-langsel .dssel-btn { min-width: 132px; }

/* DS range sliders (builder level etc.) */
input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 4px; background: #222025;
  border: 1px solid #4a3a33; box-shadow: inset 0 1px 3px #00000088;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 5px;
  background: linear-gradient(180deg, #c49468, #a97e50);
  border: 1px solid var(--accent-bright); box-shadow: inset 0 1px 0 #ffffff33, 0 1px 3px #000a;
}
input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: #222025; border: 1px solid #4a3a33; }
input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 5px;
  background: linear-gradient(180deg, #c49468, #a97e50); border: 1px solid var(--accent-bright);
}

/* DS scrollbars (WebKit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #1d1b21; }
::-webkit-scrollbar-thumb { background: #4a4048; border: 2px solid #1d1b21; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #6b5a4e; }

/* Sticky Steam wishlist CTA (homepage): bobbing, glowing, shine sweep, dismissible */
.wishlist-wrap {
  position: fixed; right: 18px; bottom: 18px; z-index: 400;
  animation: wl-bob 2.6s ease-in-out infinite;
}
.wishlist-cta {
  position: relative; display: inline-block; overflow: hidden;
  padding: 13px 24px; font-family: var(--pix); font-size: 18px; color: #241e1f;
  background: linear-gradient(180deg, #d3a374, #a97e50);
  border: 2px solid var(--accent-bright); border-radius: 9px;
  box-shadow: inset 0 1px 0 #ffffff33, 0 4px 14px #000000aa;
  animation: wl-glow 2.6s ease-in-out infinite;
}
.wishlist-cta:hover { color: #241e1f; text-decoration: none; filter: brightness(1.08); }
.wl-shine {
  position: absolute; top: -20%; bottom: -20%; width: 46px; left: -70px;
  background: linear-gradient(105deg, transparent 15%, #ffffff88 50%, transparent 85%);
  transform: skewX(-20deg); animation: wl-shine 3.2s ease-in-out infinite; pointer-events: none;
}
.wl-close {
  position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; line-height: 18px;
  border-radius: 50%; border: 1px solid var(--border-strong); background: var(--panel2);
  color: var(--muted); font-size: 14px; cursor: pointer; padding: 0;
}
.wl-close:hover { color: var(--text); border-color: var(--accent); }
@keyframes wl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes wl-glow {
  0%, 100% { box-shadow: inset 0 1px 0 #ffffff33, 0 4px 14px #000000aa, 0 0 0px #d9be8f00; }
  50% { box-shadow: inset 0 1px 0 #ffffff33, 0 4px 18px #000000aa, 0 0 22px #d9be8f88; }
}
@keyframes wl-shine { 0% { left: -70px; } 55% { left: 115%; } 100% { left: 115%; } }
@media (prefers-reduced-motion: reduce) {
  .wishlist-wrap, .wishlist-cta, .wl-shine { animation: none; }
}
a.stat:hover { border-color: var(--accent-bright); text-decoration: none; }
a.stat:hover .v { color: #ecc272; }
a.stat { color: inherit; }
#searchresults {
  position: absolute; top: 37px; left: 0; right: 0; background: var(--panel);
  border: 1px solid var(--border-strong); border-radius: 6px;
  max-height: min(420px, calc(100dvh - 140px)); overflow-y: auto;
  display: none; z-index: 300; box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
#searchresults a {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px; color: var(--text); font-size: 13px;
}
#searchresults a:hover, #searchresults a.sel { background: var(--panel3); text-decoration: none; }
#searchresults .stype { margin-left: auto; color: var(--muted); font-size: 11px; font-family: var(--pix); }
#searchresults img { width: 24px; height: 24px; object-fit: contain; }
#searchresults .snone { padding: 10px 12px; color: var(--muted); font-size: 13px; }

/* ---- Panels (game Box style) ---- */
.tablewrap {
  overflow-x: auto; background: var(--panel);
  border: 1px solid var(--border-strong); border-radius: 7px;
  box-shadow: inset 0 0 0 1px #00000055, 0 2px 8px #00000033;
}
table.db { border-collapse: collapse; width: 100%; }
table.db th {
  text-align: left; padding: 9px 12px; font-family: var(--pix); font-size: 13px; font-weight: 400;
  color: var(--accent); letter-spacing: .04em;
  border-bottom: 1px solid var(--border); white-space: nowrap; cursor: default; user-select: none;
  position: sticky; top: 0; background: var(--panel2); z-index: 10;
}
table.db th[data-sort] { cursor: pointer; }
table.db th[data-sort]:hover { color: var(--accent-bright); }
table.db th[data-sort]:active { color: var(--accent-bright); }
table.db th[data-sort]:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; }
/* idle cue on sortable-but-unsorted headers: a dim version of the sort arrow
   (▼ is CP437-native, unlike ⇅/↕ which garble in the pixel font) */
table.db th[data-sort]:not(.sorted-asc):not(.sorted-desc)::after {
  content: " ▼"; color: var(--accent-dim); font-size: 9px; opacity: .55;
}
table.db th.sorted-asc::after { content: " ▲"; color: var(--accent-bright); font-size: 9px; }
table.db th.sorted-desc::after { content: " ▼"; color: var(--accent-bright); font-size: 9px; }
/* draggable column-resize handle (added to headers by app.js) */
table.db th { position: relative; }
table.db th .colresize {
  position: absolute; top: 0; right: -4px; width: 9px; height: 100%; z-index: 15;
  cursor: col-resize; touch-action: none; user-select: none;
}
table.db th .colresize::before {
  content: ""; position: absolute; top: 25%; bottom: 25%; left: 4px; width: 2px;
  background: var(--border-strong); opacity: 0; transition: opacity .12s;
}
table.db th .colresize:hover::before, table.db th.resizing .colresize::before { opacity: .8; }
table.db td { padding: 6px 12px; border-bottom: 1px solid #262329; vertical-align: middle; }
table.db tr:last-child td { border-bottom: none; }
/* subtle zebra; hover stays stronger (declared after, same specificity) */
table.db tbody tr:nth-child(even) td { background: #2f2c34; }
table.db tbody tr:hover td { background: #322e37; }
/* injected 'no matches' row */
table.db tbody tr.dsempty td, table.db tbody tr.dsempty:hover td {
  background: #2e2417; color: #d9be8f; text-align: center;
  padding: 16px 12px; font-size: 13px; cursor: default;
  box-shadow: inset 0 0 0 1px #6b5324; border-radius: 7px;
}
table.db td.num, table.db th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Changelog diff tables (Entry | Changes): a fixed two-column layout that WRAPS
   instead of overflowing - long entry keys and diff values were running off the
   right edge and getting cut off on mobile. */
table.db.chgtable { table-layout: fixed; }
table.db.chgtable th, table.db.chgtable td { white-space: normal; overflow-wrap: anywhere;
  word-break: break-word; vertical-align: top; }
table.db.chgtable th:first-child, table.db.chgtable td:first-child { width: 42%; }
table.db.chgtable code { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 900px) { table.db.chgtable th:first-child, table.db.chgtable td:first-child { width: 46%; } }
.entcell { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.entcell img { width: 32px; height: 32px; object-fit: contain; flex: 0 0 32px; }
.entcell .sub { display: block; color: #8b8593; font-size: 11px; }

/* ---- Filters (game button style) ---- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; align-items: center; }
.filters input[type=text] {
  padding: 7px 10px; background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; font-size: 13px; width: 220px; outline: none;
}
.filters input[type=text]:focus { border-color: var(--border-strong); }
.chip {
  padding: 4px 11px; border: 1px solid #5c4335; border-radius: 6px; font-size: 12px;
  color: #b3aca3; cursor: pointer; user-select: none;
  background: linear-gradient(180deg, #2a272e, #242127);
  box-shadow: inset 0 1px 0 #ffffff0a, 0 1px 2px #00000044; min-height: 26px;
}
.chip:hover { border-color: var(--accent); color: var(--accent-bright); }
.chip.on {
  background: linear-gradient(180deg, #c49468, #a97e50); color: #241e1f;
  border-color: var(--accent-bright); font-weight: 700;
  box-shadow: inset 0 1px 0 #ffffff33;
}
.chip:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }
.chip:active, .btn:active, .dssel-btn:active, .wl-close:active, .dslb-close:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px #00000066;
}
.filters .fcount { margin-left: auto; color: var(--muted); font-size: 12px; font-family: var(--pix); }
/* global saved-units bar (injected by app.js at the top of #main) */
.unitsbar {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  padding: 7px 10px; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.unitsbar .ub-toggle {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px; cursor: pointer;
  background: none; border: none; color: var(--accent); font-family: var(--pix);
  font-size: 13px; padding: 2px 4px;
}
.unitsbar .ub-toggle::before { content: "\25BE"; color: var(--accent-dim); font-size: 10px; }
.unitsbar.collapsed .ub-toggle::before { content: "\25B8"; }
.unitsbar .ub-cnt { color: var(--muted); font-size: 11px; }
.unitsbar .ub-chips { display: flex; align-items: center; gap: 8px; overflow-x: auto; min-width: 0; padding-bottom: 2px; }
.unitsbar.collapsed .ub-chips { display: none; }
.unitsbar .unitchip {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px; cursor: pointer;
  background: linear-gradient(180deg, #2a272e, #242127); border: 1px solid #5c4335;
  border-radius: 7px; padding: 4px 10px 4px 5px; color: var(--text); font: inherit;
}
.unitsbar .unitchip:hover { border-color: var(--accent); }
.unitsbar .unitchip:active { transform: translateY(1px); }
.unitsbar .unitchip img { width: 30px; height: 30px; object-fit: cover; object-position: top center; flex: 0 0 30px; image-rendering: pixelated; border-radius: 4px; }
/* composited in-game unit sprite: the builder crops it to the character, so it is scaled
   to FILL the chip height (aspect preserved) instead of floating in transparent padding */
.unitsbar .unitchip img.uc-npc {
  width: auto; height: 34px; max-width: 46px; flex: 0 0 auto; object-fit: contain;
  image-rendering: pixelated; border-radius: 0; background: none;
}
.unitsbar .uc-n { font-size: 13px; color: var(--accent-bright); white-space: nowrap; }
.unitsbar .uc-s { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* DEFAULT: a tight quick-switch strip of icons. The name + stats are in the chip's
   tooltip, and appear on the chips themselves only with "More info" on. */
.unitsbar:not(.info) .unitchip { padding: 3px; gap: 0; }
.unitsbar:not(.info) .uc-n,
.unitsbar:not(.info) .uc-s { display: none; }
/* the character currently loaded in the builder = the selected chip */
.unitsbar .unitchip.cur {
  border-color: var(--accent-bright); background: linear-gradient(180deg, #3a2f22, #322a20);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 1px #00000055;
}
.unitsbar .unitchip.cur .uc-n { color: #ecc272; }
.unitsbar .ub-ib {
  flex: 0 0 auto; cursor: pointer; white-space: nowrap; padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  font-family: var(--pix); font-size: 11px; line-height: 1.5;
}
.unitsbar .ub-ib:hover { color: var(--accent-bright); border-color: var(--accent); }
.unitsbar .ub-ib.on { background: var(--panel3); color: var(--accent-bright); border-color: var(--border-strong); }
.unitsbar .ub-ib:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }
.unitsbar.collapsed .ub-ib { display: none; }
.unitsbar .ub-more { flex: 0 0 auto; font-size: 12px; color: var(--link); white-space: nowrap; padding: 0 4px; }
/* BC: roster-wide combat difficulty control in the units bar */
.unitsbar .ub-diff { display: flex; align-items: center; gap: 3px; flex: 0 0 auto;
  padding: 1px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
.unitsbar.collapsed .ub-diff { display: none; }
.unitsbar .ub-diff-l { font-family: var(--pix); font-size: 10.5px; color: var(--muted); padding: 0 4px; }
.unitsbar .ub-db { cursor: pointer; background: none; border: none; border-radius: 5px; padding: 2px 7px;
  color: var(--muted); font-family: var(--pix); font-size: 11px; line-height: 1.5; white-space: nowrap; }
.unitsbar .ub-db:hover { color: var(--accent-bright); }
.unitsbar .ub-db.on { background: var(--panel3); color: var(--accent-bright); box-shadow: inset 0 0 0 1px var(--border-strong); }
.unitsbar .ub-db:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }
/* when the roster is empty the bar still shows the difficulty control (builder page) */
.unitsbar.ub-empty .ub-toggle .ub-cnt { display: none; }
@media (max-width: 700px) { .unitsbar .ub-diff-l { display: none; } }
.unitsbar .ub-tail { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* obvious multi-character action: park the current one, start a fresh one.
   It is a <button> on the builder page (in-place, no navigation) and an <a> elsewhere,
   so this has to style both identically. */
.unitsbar .ub-new {
  flex: 0 0 auto; white-space: nowrap; padding: 4px 10px; border-radius: 7px;
  border: 1px dashed var(--border-strong); color: var(--accent-bright);
  font-family: var(--pix); font-size: 12px; line-height: 1.5; background: #2a272e;
  cursor: pointer; display: inline-block;
}
.unitsbar .ub-new:hover { border-style: solid; border-color: var(--accent-bright); text-decoration: none; background: var(--panel3); }
.unitsbar .ub-new:active { transform: translateY(1px); }
.unitsbar .ub-new:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }
@media (max-width: 900px) { .unitsbar { margin-bottom: 10px; } }
/* builder: the composited unit icon on the Character card + the Build card. The image is
   cropped to the character's bounding box, so height:100% makes it fill the box and the
   sprite reads big; width:auto keeps the pixel aspect ratio. */
.dsb-topnpc {
  flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center;
  height: 104px; min-width: 76px; margin: 0; padding: 5px 8px; background: var(--panel2);
  border: 1px solid var(--border-soft); border-radius: 9px;
}
.dsb-topnpc img {
  height: 100%; width: auto; max-width: 128px; display: block;
  image-rendering: pixelated; object-fit: contain;
}
.dsb-topface.sm { width: 40px; height: 40px; border-radius: 7px; }
/* beats `.dsb-build-portrait img` (56x56 cover) from the builder's own style block */
.dsb-build-portrait img.dsb-build-npc {
  height: 72px; width: auto; max-width: 90px; flex: 0 0 auto;
  image-rendering: pixelated; object-fit: contain;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--panel2);
  padding: 2px 4px;
}
@media (max-width: 640px) { .dsb-topcard-head { flex-wrap: wrap; } }
/* AH: the Settings group in the sidebar (injected by app.js). Same chrome as every other
   sidebar group - .group > .gt header, rows on the same 16px gutter as the nav links. */
#sidebar .sb-set { margin-top: 18px; padding-bottom: 8px; }
#sidebar .sb-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 16px 5px 22px;
  color: var(--text); font-size: 13px;
}
#sidebar .sb-row.sb-check { cursor: pointer; }
#sidebar .sb-row.sb-check:hover { background: var(--panel2); color: var(--accent-bright); }
#sidebar .sb-lbl { color: var(--muted); font-size: 12.5px; }
#sidebar .sb-hint { margin-left: auto; color: #8b8593; font-size: 10.5px; }
#sidebar .sb-check input { width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; }
#sidebar .sb-seg { display: flex; gap: 2px; margin-left: auto; padding: 1px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
#sidebar .sb-segb {
  cursor: pointer; background: none; border: none; border-radius: 5px; padding: 2px 7px;
  color: var(--muted); font-family: var(--pix); font-size: 11px; line-height: 1.5;
}
#sidebar .sb-segb:hover { color: var(--accent-bright); }
#sidebar .sb-segb.on { background: var(--panel3); color: var(--accent-bright); box-shadow: inset 0 0 0 1px var(--border-strong); }
#sidebar .sb-segb:focus-visible, #sidebar .sb-check:focus-within { outline: 2px solid var(--accent-bright); outline-offset: -2px; }
/* tap-tooltips stays a touch-screen setting */
#sidebar .sb-touch { display: none; }
@media (max-width: 900px) { #sidebar .sb-touch { display: flex; } }

/* AL: desktop sidebar collapse. The chevron lives at the head of the topbar and flips
   direction, so the way back is always visible. Mobile keeps its drawer (#navtoggle) and
   never shows this button - the two never compete. */
#sbtoggle {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 26px; height: 26px; cursor: pointer; padding: 0;
  background: var(--panel2); color: var(--accent); border: 1px solid var(--border-strong);
  border-radius: 6px;
}
#sbtoggle:hover { color: var(--accent-bright); border-color: var(--accent-bright); }
#sbtoggle:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }
#sbtoggle .sbt-i {
  width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-right: 6px solid currentColor;      /* points left: click to tuck the sidebar away */
}
body.sb-collapsed #sbtoggle .sbt-i {
  border-right: 0; border-left: 6px solid currentColor;   /* points right: click to bring it back */
}
body.sb-collapsed #sidebar { display: none; }              /* #main is flex:1 -> full width */
@media (max-width: 900px) {
  #sbtoggle { display: none; }                             /* the drawer owns mobile */
  body.sb-collapsed #sidebar { display: block; }           /* never leak the desktop state */
}
/* One line per facet category: label + its chips on a single scrollable row.
   SCOPED to the bars app.js actually reflows (it stamps data-reflowed="1", and .fgroup /
   .fgchips exist nowhere else). Unscoped, this column layout hit EVERY .filters row on
   the site - including the builder's chip rows, which is why plain action chips rendered
   full-width and stacked one per line instead of sitting inline. */
.filters[data-reflowed] { flex-direction: column; align-items: stretch; gap: 7px; }
.filters[data-reflowed] .fgroup { display: flex; align-items: center; gap: 8px; min-width: 0; }
.filters[data-reflowed] .fgroup.ftop { gap: 10px; }
.filters[data-reflowed] .fglabel {
  flex: 0 0 auto; width: 86px; text-align: right; color: var(--muted);
  font-family: var(--pix); font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
.filters[data-reflowed] .fgchips {
  display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden;
  padding-bottom: 2px; scrollbar-width: thin; min-width: 0;
}
.filters[data-reflowed] .fgchips .chip { flex: 0 0 auto; }
@media (max-width: 900px) {
  .filters[data-reflowed] .fglabel { width: 64px; font-size: 10px; }
}
/* chips in a plain (unreflowed) row never stretch */
.filters > .chip { flex: 0 0 auto; }
.fcount .fclear, .filters .fclear { margin-left: 6px; color: var(--accent); cursor: pointer; text-decoration: none; }
.fcount .fclear:hover { color: var(--accent-bright); text-decoration: none; }

/* ---- Badges ---- */
.badge {
  display: inline-block; padding: 2px 8px 1px; border-radius: 5px; font-size: 12px;
  font-family: var(--pix); font-weight: 400; letter-spacing: .03em; border: 1px solid transparent;
}
.r-common { color: var(--common); } .r-uncommon { color: var(--uncommon); }
.r-rare { color: var(--rare); } .r-legendary { color: var(--legendary); }
.b-common { background: #34313a; color: var(--common); border-color: #45414b; }
.b-uncommon { background: #22301f; color: var(--uncommon); border-color: #38512f; }
.b-rare { background: #1f2a40; color: #82a7e0; border-color: #33476b; }
.b-legendary { background: #3a2d14; color: var(--legendary); border-color: #6b5324; }
.b-gated { background: #3a1d22; color: #e08a92; border-color: #64303a; }
.b-ok { background: #16333a; color: #59b9b0; border-color: #24545c; }
.b-type { background: #2c2933; color: #aea8b6; border-color: #413d49; }

/* ---- Detail pages ---- */
.detailhead {
  display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px;
  padding: 12px 14px 10px; background: #26232b;
  border-image: url("img/frame9.png") 16 / 16px stretch;
  border-style: solid; border-width: 16px;
  border-radius: 8px; box-shadow: 0 2px 10px #00000044;
}
.detailhead .icon {
  width: 96px; height: 96px; background: var(--panel2); border: 1px solid #5c4335;
  border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 96px;
  box-shadow: inset 0 0 12px #00000066;
}
.detailhead .icon img { width: 80px; height: 80px; object-fit: contain; }
.detailhead h2 { margin: 0 0 4px; font-family: var(--pix); font-size: 26px; font-weight: 400; color: var(--accent-bright); }
.detailhead .key { color: var(--muted); font-size: 12px; }
.detailhead .desc { margin-top: 8px; max-width: 720px; }
.detailhead .flavor { font-family: "DSFlavor", Georgia, serif; color: #a89f92; margin-top: 6px; max-width: 720px; font-size: 14.5px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: start; }
.card {
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 7px; overflow: hidden;
  box-shadow: inset 0 0 0 1px #00000042, 0 2px 8px #00000030;
}
.card > h3 {
  margin: 0; padding: 9px 14px 8px; font-family: var(--pix); font-size: 15px; font-weight: 400;
  color: var(--accent); letter-spacing: .04em;
  border-bottom: 1px solid #4a352b; background: var(--panel2);
}
.card .cb { padding: 10px 14px; }
.card.wide { grid-column: 1 / -1; }
.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: 4px 0; border-bottom: 1px solid #26232b; font-size: 13px; }
.kv tr:last-child td { border-bottom: none; }
.kv td:first-child { color: var(--muted); width: 46%; padding-right: 10px; }
.kv td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Anchor landing: highlight the targeted row/section (#DROP_X, #QUEST_X, ...) ---- */
:target, tr:target td { background: #3a3020 !important; outline: 1px solid var(--accent-dim); }
tr:target td { outline-width: 0; border-bottom-color: var(--accent-dim); }
[id] { scroll-margin-top: 70px; }

/* ---- Misc ---- */
.statmods span { display: inline-block; margin: 2px 6px 2px 0; padding: 2px 8px; background: #262329; border: 1px solid #3c3843; border-radius: 5px; font-size: 12px; }
.pos { color: #5cc4b0; } .neg { color: #e0708a; }
/* inline game-style keyword refs ([AFFECTER_X] etc.): colored, tooltipped, clickable */
.refx { color: #d9a13e; border-bottom: 1px dotted #d9a13e77; cursor: help; text-decoration: none; }
a.refx { cursor: pointer; }
a.refx:hover { color: #ecc272; text-decoration: none; border-bottom-style: solid; }
/* material amounts that scale with management difficulty - hover shows per-tier cost */
.mscale { border-bottom: 1px dotted var(--muted); cursor: help; }
.mscale:hover { color: var(--accent-bright); }

/* DS-styled instant tooltip (replaces native title on data-tip elements) */
#dstip {
  position: fixed; display: none; z-index: 1000; max-width: 340px; pointer-events: none;
  background: linear-gradient(180deg, #2f2c34, #26232a);
  border: 1px solid var(--border-strong); border-radius: 7px;
  box-shadow: inset 0 0 0 1px #00000066, 0 6px 18px #000000aa;
  padding: 8px 11px; font-size: 12.5px; line-height: 1.45; color: var(--text);
}
#dstip .th { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
#dstip .th img { width: 26px; height: 26px; object-fit: contain; }
#dstip .th b { font-family: var(--pix); font-weight: 400; font-size: 14px; color: var(--accent-bright); }
#dstip .tb { color: #c9c3ba; white-space: pre-wrap; }
/* truncated tooltip body: fade the cut edge so clipping is visible */
#dstip .tb.cut {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
}
.pill-list a { display: inline-block; margin: 2px 6px 2px 0; }
.notice {
  background: #2e2417; border: 1px solid #6b5324; color: #d9be8f;
  padding: 10px 14px; border-radius: 7px; margin-bottom: 16px; font-size: 13px;
}
.spoiler-gate { filter: blur(4px); transition: filter .15s; cursor: pointer; }
.spoiler-gate.open { filter: none; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 12px; }
.mini { background: var(--panel); border: 1px solid var(--border); border-radius: 7px; padding: 12px 14px; }
.mini:hover { border-color: var(--border-strong); }
.mini h4 { margin: 0 0 4px; font-size: 14px; }
.mini .m { color: var(--muted); font-size: 12px; }
/* ---- Homepage hero (Steam store art) ---- */
.homebanner {
  position: relative; margin: 14px 0 4px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border-strong);
  background: url("img/steam/library_hero.jpg") center 30% / cover no-repeat;
  min-height: 230px; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: flex-start;
  box-shadow: inset 0 -90px 70px -30px #16141aee, inset 0 0 0 1px #00000055, 0 4px 16px #00000055;
  image-rendering: auto;
}
.homebanner img { image-rendering: auto; }
.hb-logo { max-width: min(440px, 70%); margin: 0 0 4px 22px; filter: drop-shadow(0 3px 8px #000c); }
.hb-sub {
  margin: 0 0 14px 24px; padding: 3px 10px; border-radius: 6px;
  background: #16141ac9; color: var(--accent-bright); font-family: var(--pix); font-size: 13px;
}
.shotstrip {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 6px 0 18px;
}
.shotstrip .shot { display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.shotstrip .shot:hover { border-color: var(--accent); }
.shotstrip img { width: 100%; height: 74px; object-fit: cover; display: block; image-rendering: auto; }
@media (max-width: 900px) {
  .homebanner { min-height: 150px; }
  .shotstrip { grid-template-columns: repeat(3, 1fr); }
  .shotstrip img { height: 64px; }
}
.homehero { padding: 10px 0 8px; }
.homehero h2 { font-family: var(--pix); font-size: 30px; font-weight: 400; margin: 0 0 6px; color: var(--accent-bright); }
.homehero p { color: var(--muted); max-width: 760px; }
.statrow { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.stat {
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 7px;
  padding: 12px 18px; min-width: 128px; box-shadow: inset 0 0 0 1px #00000042;
}
.stat .v { font-family: var(--pix); font-size: 24px; color: var(--accent-bright); }
.stat .l { font-size: 12px; color: var(--muted); }
footer { margin-top: 40px; padding-top: 14px; border-top: 1px solid #3c3129; color: var(--muted); font-size: 12px; }
h2.sec { font-family: var(--pix); font-size: 21px; font-weight: 400; margin: 26px 0 10px; color: var(--accent-bright); }
/* CP437 pixel font lacks -, ·, − glyphs (maps them to box-drawing junk):
   anything inside .crumb within pixel-font headers falls back to the UI sans */
h1 .crumb, h2 .crumb, h3 .crumb, .stat .v .crumb,
h2.sec .crumb { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; letter-spacing: 0; }
.md p { margin: 8px 0; } .md ul { margin: 6px 0; padding-left: 22px; }
.card .cb.md p, .md p { max-width: 76ch; }
.md h3 { font-family: var(--pix); font-size: 16px; font-weight: 400; color: var(--accent); margin: 16px 0 6px; }
.md table { border-collapse: collapse; margin: 10px 0; }
.md table td, .md table th { border: 1px solid var(--border); padding: 5px 10px; font-size: 13px; }
.md code { background: #262329; padding: 1px 5px; border-radius: 4px; }

/* ---- DS lightbox ---- */
#dslb {
  display: none; position: fixed; inset: 0; z-index: 900;
  background: #0e0c11e0; padding: 4vh 4vw;
  align-items: center; justify-content: center;
}
#dslb.open { display: flex; }
#dslb .dslb-box {
  position: relative; max-width: 100%; max-height: 100%;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 9px;
  box-shadow: inset 0 0 0 1px #00000066, 0 12px 48px #000000cc; padding: 10px;
}
#dslb img {
  display: block; max-width: 88vw; max-height: 84vh; border-radius: 5px;
  image-rendering: auto; cursor: zoom-out;
}
#dslb .dslb-cap { font-family: var(--pix); font-size: 13px; color: var(--accent); padding: 8px 2px 0; }
#dslb .dslb-close {
  position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; line-height: 24px;
  border-radius: 50%; border: 1px solid var(--accent-bright); background: var(--panel2);
  color: var(--accent-bright); font-size: 17px; cursor: pointer; padding: 0;
  box-shadow: 0 2px 8px #000a;
}
#dslb .dslb-close:hover { background: var(--panel3); }

/* ---- Feedback form ---- */
.feedback-form { max-width: 640px; }
.feedback-form label { display: block; margin: 12px 0 4px; color: var(--accent); font-family: var(--pix); font-size: 14px; }
.feedback-form select, .feedback-form input[type=text], .feedback-form textarea {
  width: 100%; padding: 8px 10px; background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px; outline: none; font-family: inherit;
}
.feedback-form textarea { min-height: 140px; resize: vertical; }
.feedback-form select:focus, .feedback-form input:focus, .feedback-form textarea:focus { border-color: var(--border-strong); }
.btn {
  display: inline-block; margin-top: 14px; padding: 8px 18px; cursor: pointer;
  font-family: var(--pix); font-size: 15px; color: #241e1f;
  background: linear-gradient(180deg, #c49468, #a97e50);
  border: 1px solid var(--accent-bright); border-radius: 6px;
  box-shadow: inset 0 1px 0 #ffffff33, 0 2px 4px #00000044;
}
.btn:hover { background: linear-gradient(180deg, #d3a374, #b98a58); }
.btn.secondary { background: var(--panel3); color: var(--text); border-color: var(--border-strong); }

/* ---- Mobile ---- */
@media (max-width: 900px) {
  html, body { overflow-x: clip; }
  .cards, .grid-cards { grid-template-columns: 1fr; }
  .card, .mini, .stat { min-width: 0; }
  .card .cb { overflow-x: auto; }
  .homehero h2 { font-size: 22px; overflow-wrap: anywhere; }
  h2.sec { font-size: 18px; overflow-wrap: anywhere; }
  code { overflow-wrap: anywhere; }
  .kv td:first-child { width: 40%; }
  .detailhead > div:last-child { min-width: 0; }
  #sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100vh;
    transform: translateX(-105%); transition: transform .2s ease; box-shadow: 4px 0 24px #000000aa;
  }
  #sidebar.open { transform: translateX(0); }
  #navbackdrop.show { display: block; position: fixed; inset: 0; background: #00000088; z-index: 190; }
  #navtoggle { display: block; }
  #main { padding: 0 12px 90px; }
  /* >=16px inputs: stops iOS Safari focus-zoom (covers builder + feedback too) */
  input[type=text], textarea, select,
  #searchbox, .filters input[type=text],
  .feedback-form select, .feedback-form input[type=text], .feedback-form textarea { font-size: 16px; }
  /* compact, static wishlist CTA */
  .wishlist-wrap { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); animation: none; }
  .wishlist-cta { padding: 8px 14px; font-size: 14px; }
  .wl-close { width: 30px; height: 30px; line-height: 26px; }
  .wl-close::before { content: ""; position: absolute; inset: -8px; }
  /* sticky first column: keep the entity readable while the table pans */
  table.db th:first-child, table.db td:first-child {
    position: sticky; left: 0; z-index: 5;
    background: var(--panel);
    box-shadow: 6px 0 8px -6px #00000088;
  }
  table.db th:first-child { z-index: 12; background: var(--panel2); }
  /* item/entity column: tighter on mobile + truncate long names (drag the header
     edge to resize; width is remembered) */
  .entcell { min-width: 108px; max-width: 46vw; }
  .entcell > span { min-width: 0; overflow: hidden; }
  .entcell > span > a, .entcell .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #topbar { flex-wrap: wrap; gap: 8px; }
  #topbar h1 { font-size: 17px; flex: 1 1 auto; min-width: 0; }
  #topbar .crumb { display: none; }
  #searchwrap { order: 5; width: 100%; max-width: none; margin-left: 0; }
  .detailhead { flex-direction: row; gap: 14px; padding: 14px; border-width: 10px; border-image-width: 10px; }
  .detailhead .icon { width: 64px; height: 64px; flex: 0 0 64px; }
  .detailhead .icon img { max-width: 52px; max-height: 52px; }
  .detailhead h2 { font-size: 20px; }
  table.db th, table.db td { padding: 6px 8px; }
  .entcell { min-width: 140px; }
  .chip { min-height: 32px; display: inline-flex; align-items: center; }
  .filters .fcount { flex-basis: 100%; text-align: right; }
  .statrow .stat { min-width: calc(33% - 8px); flex: 1; padding: 10px 12px; }
  .stat .v { font-size: 19px; }
}
@media (pointer: coarse) {
  #sidebar a.nav { padding-top: 9px; padding-bottom: 9px; }
  #searchresults a { padding: 10px 12px; }
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
  table.db th { padding-top: 11px; padding-bottom: 11px; }
  #navtoggle { padding: 8px 14px; font-size: 22px; }
  .dslb-close { width: 30px; height: 30px; line-height: 26px; font-size: 19px; }
}