@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/press-start-2p-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/fredoka-one-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg:        #0c0f14;
  --bg-tex:    #11151b;
  --panel:     #1f262e;
  --panel-2:   #283039;
  --slot:      #0e1318;
  --edge:      #07090c;
  --text:      #e9edf2;
  --muted:     #98a3b2;
  --bev-hi:    rgba(255,255,255,.08);
  --bev-lo:    rgba(0,0,0,.55);

  --accent:    #3ba7ff;
  --accent-d:  #2b86d6;
  --accent-2:  #5ad16a;

  --rarity-common:    #c2ccd8;
  --rarity-uncommon:  #5ad16a;
  --rarity-rare:      #f0483b;
  --rarity-legendary: #f0a93b;
  --rarity-mythic:    #c777ff;

  --badge:  #efe9da;
  --grass:  #6cbf4b; --grass-d: #54a23a;
  --dirt:   #7c5333; --dirt-d:  #5f3f27;

  /* Home-page tile accents. Six hues that only have to stay distinguishable from each
     other, so they are their own small scale rather than reuses of the rarity ramp. */
  --tile-map:      #3ba7ff;
  --tile-quests:   #5ad16a;
  --tile-augments: #c777ff;
  --tile-items:    #f0a93b;
  --tile-guides:   #36c6c0;
  --tile-stats:    #ff7a7a;

  --shadow:    0 14px 34px rgba(0,0,0,.5);
  --shadow-sm: 0 6px 16px rgba(0,0,0,.4);
  --radius:    10px;
  --radius-sm: 7px;
  --maxw:      1140px;
  --nav-h:     64px;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-pixel:'Press Start 2P', 'Inter', monospace;
  --font-heading: 'Fredoka One', var(--font-pixel);
}

[data-theme="light"] {
  --bg:        #e1e6ec;
  --bg-tex:    #d9dee6;
  --panel:     #f3f6fa;
  --panel-2:   #ffffff;
  --slot:      #dae0e8;
  --edge:      #aeb6c2;
  --text:      #171c24;
  --muted:     #545d6b;
  --bev-hi:    rgba(255,255,255,.85);
  --bev-lo:    rgba(0,0,0,.14);

  --accent:    #1a62a2;
  --accent-d:  #114b7c;
  --accent-2:  #2f9e44;

  --rarity-common:    #3a4250;
  --rarity-uncommon:  #2f9e44;
  --rarity-rare:      #c62f2f;
  --rarity-legendary: #b9760f;
  --rarity-mythic:    #8b3fce;

  /* Darkened to carry on the recessed --slot the tile glyph sits on, where the dark-theme
     values land at 1.1-1.6:1. Each keeps its hue; all six clear 4:1 there. */
  --tile-map:      #1a62a2;
  --tile-quests:   #1c7330;
  --tile-augments: #7b34bd;
  --tile-items:    #835708;
  --tile-guides:   #0f6b67;
  --tile-stats:    #c03b3b;

  --shadow:    0 14px 30px rgba(40,60,90,.18);
  --shadow-sm: 0 6px 14px rgba(40,60,90,.14);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.65;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--bg-tex) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-tex) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s, color .25s;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-d); }
img { max-width: 100%; display: block; }
h1,h2,h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 800; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.kicker {
  font-family: var(--font-pixel); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); display: inline-block; margin-bottom: 14px;
}
.mc-head {
  font-family: var(--font-pixel); font-size: clamp(.9rem, 2vw, 1.15rem);
  letter-spacing: .02em; line-height: 1.5; margin: 0 0 22px;
}

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: .94rem; color: var(--text);
  padding: 12px 20px; border: 2px solid var(--edge); border-radius: var(--radius-sm);
  background: var(--panel-2);
  box-shadow: inset 2px 2px 0 var(--bev-hi), inset -2px -2px 0 var(--bev-lo);
  cursor: pointer; transition: transform .1s, filter .15s;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: inset 2px 2px 0 var(--bev-lo), inset -2px -2px 0 var(--bev-hi); }
.btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn svg { width: 16px; height: 16px; }
.btn-primary {
  background: var(--accent); color: #fff; border-color: var(--edge);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.28), inset -2px -2px 0 rgba(0,0,0,.32);
}
.btn-primary:hover { color: #fff; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--panel);
  border-bottom: 3px solid var(--edge);
  box-shadow: inset 0 2px 0 var(--bev-hi);
}
.nav { height: var(--nav-h); display: flex; align-items: center; gap: 12px; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); flex: none; }
.brand:hover { color: var(--text); }
.brand-logo { height: 34px; width: auto; flex: none; }
.brand-logo-dark { display: none; }
[data-theme="light"] .brand-logo-dark { display: block; }
[data-theme="light"] .brand-logo-light { display: none; }
.brand-tag {
  font-family: var(--font-heading); font-size: .75rem; text-transform: uppercase; letter-spacing: .02em;
  color: var(--muted); line-height: 1.35; flex: none; white-space: nowrap;
  margin-left: 2px; padding-left: 12px; border-left: 2px solid var(--edge);
}

/* `min-width: 0` is what lets the row compress at all — an <input> reports the same min-
   and max-content size, so without it .nav-links is rigid at its full width and the tools
   get pushed off the viewport. The search field (see .nav-search-wrap) absorbs the
   compression; the breakpoint below is set so the links never have to. */
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; min-width: 0; }
.nav-links a { color: var(--muted); font-weight: 700; font-size: .88rem; padding: 8px 9px; border-radius: 6px; border: 2px solid transparent; white-space: nowrap; }
.nav-links a:hover { color: var(--text); background: var(--slot); }

.nav-link-disabled {
  color: var(--muted); font-weight: 700; font-size: .88rem; padding: 8px 12px;
  border-radius: 6px; border: 2px solid transparent; opacity: .4; cursor: default;
  display: inline-flex; align-items: center; gap: 11px;
}
.footer-col .nav-link-disabled { display: block; padding: 4px 0; }
a.brand.nav-link-disabled, span.brand.nav-link-disabled { cursor: default; }
.nav-links a.active {
  color: var(--accent); background: var(--slot); border-color: var(--edge);
  box-shadow: inset 1px 1px 0 var(--bev-lo);
}
.nav-tools { display: flex; align-items: center; gap: 6px; margin-left: 4px; flex: 0 .05 auto; min-width: 0; }
.nav-tools > * { flex: none; }
.nav-search {
  display: flex; align-items: center; gap: 8px; color: var(--muted);
  background: var(--slot); border: 2px solid var(--edge); border-radius: 6px; padding: 7px 10px; margin-right: 4px;
  box-shadow: inset 2px 2px 0 var(--bev-lo), inset -2px -2px 0 var(--bev-hi);
}
.nav-search svg { width: 15px; height: 15px; flex: none; }
.nav-search input { border: 0; background: transparent; color: var(--text); outline: none; font-size: .85rem; flex: 1 1 150px; min-width: 0; width: auto; }
.nav-search-wrap { position: relative; flex: 0 20 auto; min-width: 106px; }
.search-panel {
  position: absolute; top: calc(100% + 6px); left: 0; width: 340px; max-width: 80vw;
  background: var(--panel); border: 2px solid var(--edge); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); overflow: hidden; z-index: 60;
}
.search-result { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; color: var(--text); border-bottom: 1px solid var(--edge); }
.search-result:last-child { border-bottom: 0; }
.search-result:hover { background: var(--slot); color: var(--text); }
.search-result-type {
  flex: none; font-family: var(--font-pixel); font-size: .45rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--edge); border-radius: 4px; padding: 4px 6px; margin-top: 2px;
}
.search-result-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-result-body strong { font-size: .88rem; }
.search-result-body span { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty { padding: 14px 12px; color: var(--muted); font-size: .85rem; margin: 0; }
.search-highlight { animation: search-flash 1.6s ease; }
@keyframes search-flash {
  0%, 40% { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: inset 2px 2px 0 var(--bev-hi), inset -2px -2px 0 var(--bev-lo); }
}
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; color: var(--text);
  background: var(--panel-2); border: 2px solid var(--edge); border-radius: 7px;
  box-shadow: inset 2px 2px 0 var(--bev-hi), inset -2px -2px 0 var(--bev-lo);
  cursor: pointer; transition: filter .15s, transform .1s;
}
.icon-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn svg { width: 19px; height: 19px; }
.theme-toggle .moon { display: none; }
[data-theme="light"] .theme-toggle .sun { display: none; }
[data-theme="light"] .theme-toggle .moon { display: block; }
.hamburger { display: none; }

.hero { position: relative; padding: 70px 0 0; }
.hero-panel {
  position: relative; max-width: 760px;
  background: var(--panel); border: 3px solid var(--edge); border-radius: var(--radius);
  box-shadow: inset 2px 2px 0 var(--bev-hi), inset -3px -3px 0 var(--bev-lo), var(--shadow);
  padding: 34px 34px 38px;
}
.hero-badge { width: 56px; height: 56px; margin-bottom: 18px; }
.hero-badge-dark { display: none; }
[data-theme="light"] .hero-badge-dark { display: block; }
[data-theme="light"] .hero-badge-light { display: none; }
.hero-title { font-family: var(--font-pixel); font-size: clamp(1.25rem, 4.2vw, 2.3rem); line-height: 1.45; margin: 0 0 14px; }
.hero-title span { color: var(--accent); }
.hero-sub { font-family: var(--font-pixel); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 16px; }
.hero-text { font-size: 1.08rem; color: var(--muted); max-width: 560px; margin: 0; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.ground {
  height: 30px; margin-top: 46px;
  background-color: var(--dirt);
  background-image:
    linear-gradient(var(--grass) 0 7px, transparent 7px),
    repeating-linear-gradient(90deg, var(--dirt) 0 10px, var(--dirt-d) 10px 11px),
    repeating-linear-gradient(90deg, var(--grass) 0 10px, var(--grass-d) 10px 11px);
  background-size: 100% 100%, 100% 100%, 100% 7px;
  background-repeat: no-repeat;
  border-top: 3px solid var(--edge); border-bottom: 3px solid var(--edge);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.25);
}

.inv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.slot-card {
  display: flex; flex-direction: column; gap: 4px; color: var(--text);
  background: var(--panel); border: 2px solid var(--edge); border-radius: var(--radius);
  box-shadow: inset 2px 2px 0 var(--bev-hi), inset -2px -2px 0 var(--bev-lo);
  padding: 18px 18px 20px; position: relative; overflow: hidden;
  transition: transform .12s, filter .15s;
}
.slot-card::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: var(--ac, var(--accent)); opacity: .9; }
.slot-card:hover { transform: translateY(-3px); filter: brightness(1.07); color: var(--text); }
.slot-ico {
  width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 12px;
  background: var(--slot); border: 2px solid var(--edge); border-radius: var(--radius-sm);
  box-shadow: inset 2px 2px 0 var(--bev-lo), inset -2px -2px 0 var(--bev-hi);
  color: var(--ac, var(--accent));
}
.slot-ico svg { width: 30px; height: 30px; }
.slot-name { font-weight: 800; font-size: 1.1rem; }
.slot-desc { color: var(--muted); font-size: .9rem; }
.slot-card .arrow { margin-top: 12px; color: var(--ac, var(--accent)); font-weight: 700; font-size: .85rem; }

.section { padding: 60px 0; }

.grid { display: grid; gap: 16px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--panel); border: 2px solid var(--edge); border-radius: var(--radius);
  box-shadow: inset 2px 2px 0 var(--bev-hi), inset -2px -2px 0 var(--bev-lo);
  padding: 22px;
}
a.card { color: var(--text); display: block; transition: transform .12s, filter .15s; }
a.card:hover { transform: translateY(-3px); filter: brightness(1.07); }
.card-ico {
  width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 15px; color: var(--accent);
  background: var(--slot); border: 2px solid var(--edge); border-radius: var(--radius-sm);
  box-shadow: inset 2px 2px 0 var(--bev-lo), inset -2px -2px 0 var(--bev-hi);
}
.card-ico svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.16rem; margin-bottom: 6px; }
.card p { color: var(--muted); margin: 0; font-size: .93rem; }
.card .arrow { margin-top: 13px; color: var(--accent); font-weight: 700; font-size: .88rem; display: inline-flex; gap: 6px; }

.placeholder {
  background: var(--slot); border: 2px solid var(--edge); border-radius: var(--radius);
  box-shadow: inset 2px 2px 0 var(--bev-lo), inset -2px -2px 0 var(--bev-hi);
  padding: 30px 24px; color: var(--muted); text-align: center;
}
.placeholder .tag {
  font-family: var(--font-pixel); font-size: .5rem; letter-spacing: .1em; color: var(--rarity-legendary);
  border: 2px solid var(--edge); border-radius: 6px; padding: 6px 9px; display: inline-block; margin-bottom: 12px;
  background: color-mix(in srgb, var(--rarity-legendary) 14%, transparent);
}
.placeholder h3 { color: var(--text); }

.page-head { padding: 50px 0 8px; }
.page-head h1 { font-family: var(--font-pixel); font-size: clamp(1.2rem, 3.4vw, 1.9rem); line-height: 1.5; }
.page-head p { color: var(--muted); max-width: 640px; }

.searchbar {
  display: flex; align-items: center; gap: 10px; max-width: 560px; color: var(--muted);
  background: var(--slot); border: 2px solid var(--edge); border-radius: var(--radius-sm);
  box-shadow: inset 2px 2px 0 var(--bev-lo), inset -2px -2px 0 var(--bev-hi); padding: 12px 16px;
}
.searchbar svg { width: 18px; height: 18px; flex: none; }
.searchbar input { border: 0; background: transparent; color: var(--text); font-size: 1rem; width: 100%; outline: none; }

.pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 28px; }
.pill {
  padding: 7px 14px; border-radius: 6px; font-weight: 700; font-size: .84rem; cursor: pointer; color: var(--muted);
  background: var(--panel-2); border: 2px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--bev-hi), inset -2px -2px 0 var(--bev-lo);
}
.pill:hover { color: var(--text); filter: brightness(1.1); }
.pill.active { color: var(--accent); box-shadow: inset 2px 2px 0 var(--bev-lo), inset -2px -2px 0 var(--bev-hi); }

.map-wrap { width: 100%; height: min(74vh, 680px); border-radius: var(--radius); overflow: hidden; position: relative; isolation: isolate; }
.map-attrib { position: absolute; right: 6px; bottom: 6px; z-index: 500; max-width: min(62%, 440px); margin: 0; padding: 4px 8px; border: 2px solid var(--edge); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--panel) 84%, transparent); color: var(--muted); font-size: .6rem; line-height: 1.35; pointer-events: none; box-shadow: var(--shadow-sm); }
@media (max-width: 560px) { .map-attrib { font-size: .52rem; max-width: 80%; right: 4px; bottom: 4px; } }
#map { width: 100%; height: 100%; transition: transform .3s ease, width .3s ease, height .3s ease, top .3s ease, left .3s ease; }
.cc-rotated .leaflet-tooltip, .cc-rotated .cc-edge { display: none !important; }
.map-fallback { display: grid; place-items: center; height: 100%; color: var(--muted); text-align: center; padding: 20px; }

.leaflet-container { background: var(--slot); font-family: var(--font-body); }
.leaflet-div-icon { background: transparent; border: 0; }
.cc-pin {
  display: block; width: 100%; height: 100%; background: var(--c, var(--accent));
  border: 2px solid var(--edge); border-radius: 3px; transform: rotate(45deg);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.45), inset -1px -1px 0 rgba(0,0,0,.4);
}
.cc-ico-img { width: 100%; height: 100%; image-rendering: pixelated; }
/* Markers scale with the map (--pin-k, set on #map per zoom) rather than staying a fixed
   number of screen pixels. The scale pivots on the marker's anchor, so the point that
   names the coordinate does not drift as it grows: tip-anchored sprites pivot on the tip,
   everything else on its middle. */
.leaflet-marker-icon > .cc-ico-img,
.leaflet-marker-icon > .cc-pin,
.leaflet-marker-icon > .cc-frame { transform: scale(var(--pin-k, 1)); transform-origin: 50% 50%; }
.cc-pinsprite > .cc-ico-img { transform-origin: 16px 31px; }
/* A drawn pin anchors on its point, the bottom centre of its box, so that is what it
   grows from too. */
.leaflet-marker-icon > .cc-frame { transform-origin: 50% 100%; }

/* The framed treatment: a teardrop in the category colour with the art laid on it, for
   categories whose art is an item texture or a level badge and so cannot anchor itself.
   The art keeps the size and offset the spec measured rather than filling the box, which
   is how a 16x16 level badge and a 130x130 mob drop both sit correctly in the same disc. */
.cc-frame { display: block; position: relative; width: 100%; height: 100%; }
.cc-frame > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cc-frame > .cc-ico-img { position: absolute; }
.cc-ent-arrow {
  position: absolute; left: 50%; top: 50%; width: 13px; height: 13px;
  color: var(--c, var(--accent)); filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); pointer-events: none;
}
.cc-ent-arrow svg { width: 100%; height: 100%; }
.cc-pin.found { filter: grayscale(1); opacity: .4; }
/* Completion, stamped on the marker root as .cc-done/.cc-todo plus data-state. A quest
   marker gets it from whether its quests are ticked, a collectible from its own tick.
   This is the icon variant of .cc-pin.found above — without it a category with artwork
   showed no completion at all. A category that ships per-state art in MAP_CONFIG swaps
   the file instead and never reaches this rule. */
.cc-done .cc-ico-img { filter: grayscale(1); opacity: .45; }
/* ...unless the category ships art for the done state. Greying a sprite that already
   says "completed" states it twice and washes the artwork out. */
.cc-done.cc-stateart .cc-ico-img { filter: none; opacity: 1; }
/* A marker whose subject does not stay put — Cubit moves once you have spoken to it. The
   dashed ring says "seen here", so the pin is not read as an exact position. Deliberately
   one accent for every category rather than the pin's own colour: it means "not fixed",
   which is the same statement whoever is wearing it. */
.cc-moves::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px dashed var(--accent); opacity: .75; pointer-events: none;
}
@keyframes cc-link-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,207,92,0)); }
  50% { transform: scale(1.45); filter: drop-shadow(0 0 9px rgba(255,207,92,.95)); }
}
.cc-marker-linked { animation: cc-link-pulse .7s ease-in-out 4; z-index: 10000 !important; }

.mc-icon { image-rendering: pixelated; vertical-align: middle; border-radius: 3px; flex: none; }
.mc-icon-fallback {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--slot); border: 1px solid var(--edge); border-radius: 3px;
  color: var(--muted); font-weight: 800; letter-spacing: -.02em; line-height: 1;
}
.mc-recipe-pic { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.mc-ing { position: relative; display: inline-flex; }
.mc-ing-n {
  position: absolute; right: -4px; bottom: -4px; font-size: .58rem; font-weight: 800;
  background: var(--panel); color: var(--text); border: 1px solid var(--edge); border-radius: 4px;
  padding: 0 3px; line-height: 1.3;
}
.mc-plus { color: var(--muted); font-size: .8rem; font-weight: 700; }
.mc-arrow { color: var(--accent); font-size: .95rem; font-weight: 800; margin: 0 1px; }
.mc-recipe-grid { align-items: center; gap: 8px; }
.mc-craft-slots { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 2px; flex: none; }
.mc-craft-slot {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: var(--slot); border: 1px solid var(--edge); border-radius: 3px; flex: none;
}
.mc-craft-out { position: relative; width: 34px; height: 34px; background: var(--panel); border-width: 2px; }
.mc-craft-out .mc-ing-n { right: -5px; bottom: -5px; }
.search-result-body .mc-recipe-pic,
.search-result-body .mc-recipe-pic span {
  white-space: normal; overflow: visible; text-overflow: clip; color: inherit; font-size: inherit;
}
.no-previews .leaflet-tooltip { display: none !important; }
.leaflet-tooltip {
  background: var(--panel) !important; color: var(--text) !important; border: 2px solid var(--edge) !important;
  box-shadow: var(--shadow-sm) !important; border-radius: 6px !important; font-weight: 700;
}
.leaflet-tooltip-top::before { border-top-color: var(--edge) !important; }
.cc-thumb {
  width: 160px; max-width: 46vw; display: block; border-radius: 4px;

  aspect-ratio: 16 / 9; object-fit: cover; background: var(--panel-2, rgba(0,0,0,.2));
}
.cc-tip.has-img { text-align: center; padding: 4px !important; }
.cc-tip .cc-tip-name { display: block; font-weight: 700; }
.cc-tip.has-img .cc-tip-name { margin-top: 5px; font-size: .8rem; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel) !important; color: var(--text) !important; box-shadow: var(--shadow) !important; }
.leaflet-popup-content-wrapper { border: 2px solid var(--edge) !important; border-radius: var(--radius-sm) !important; }
.cc-pop-h { font-family: var(--font-pixel); font-size: .62rem; line-height: 1.5; color: var(--c, var(--accent)); margin-bottom: 8px; }
.cc-pop-img { width: 190px; max-width: 100%; border-radius: 6px; margin-bottom: 6px; }
.cc-pop-coords { font-size: .82rem; color: var(--muted); margin-bottom: 6px; }
.cc-pop-moves { font-size: .8rem; font-weight: 700; color: var(--accent); margin: 0 0 6px; }
.cc-found-btn {
  font-weight: 700; cursor: pointer; padding: 8px 12px; border-radius: 6px; color: var(--text);
  background: var(--panel-2); border: 2px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--bev-hi), inset -2px -2px 0 var(--bev-lo);
}
.leaflet-bar a { background: var(--panel) !important; color: var(--text) !important; border-color: var(--edge) !important; }
.leaflet-bar a:hover { filter: brightness(1.15); }
.leaflet-control-layers {
  background: var(--panel) !important; color: var(--text) !important; border: 2px solid var(--edge) !important;
  border-radius: var(--radius-sm) !important; padding: 8px 10px !important;
  box-shadow: inset 2px 2px 0 var(--bev-hi), inset -2px -2px 0 var(--bev-lo) !important;
}
.leaflet-control-layers label { font-weight: 600; margin: 4px 0; display: flex; align-items: center; }
.cc-leg { display: inline-block; width: 12px; height: 12px; background: var(--c); border: 2px solid var(--edge); border-radius: 3px; transform: rotate(45deg); margin: 0 8px 0 4px; }

.cc-edge-layer { position: absolute; inset: 0; z-index: 650; pointer-events: none; }
.cc-edge { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; pointer-events: auto; cursor: pointer; }
.cc-edge-ic { display: grid; place-items: center; width: 26px; height: 26px; color: var(--c, var(--accent)); filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.cc-edge-ic svg { width: 22px; height: 22px; }
.cc-edge-lbl { display: none; font-size: .72rem; font-weight: 700; color: var(--text); background: var(--panel); border: 2px solid var(--edge); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.cc-edge:hover .cc-edge-lbl { display: block; }

.site-footer { border-top: 3px solid var(--edge); background: var(--panel); box-shadow: inset 0 3px 0 var(--bev-hi); margin-top: 40px; padding: 46px 0 28px; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; }
.footer-brand { max-width: 320px; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h4 { font-family: var(--font-pixel); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.footer-col a { display: block; color: var(--text); padding: 4px 0; font-size: .92rem; }
.footer-col a:hover { color: var(--accent); }
.credits-note { margin-top: 32px; padding-top: 20px; border-top: 2px solid var(--edge); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; }
.credits-note .tag { font-family: var(--font-pixel); font-size: .48rem; color: var(--rarity-legendary); border: 2px solid var(--edge); padding: 5px 8px; border-radius: 6px; }

@media (max-width: 1024px) {
  .inv-grid, .grid.cols-3 { grid-template-columns: 1fr 1fr; }
}

/* The header row (brand + search + nine links + four controls) needs more width than the
   1140px content column, so above this breakpoint the bar is allowed to be wider than
   --maxw; below it, the links collapse into the hamburger sheet. */
@media (min-width: 1240px) {
  .nav { max-width: 1320px; }
}
@media (max-width: 1239px) {
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--panel); border-bottom: 3px solid var(--edge); padding: 12px; margin: 0;
    transform: translateY(-140%); transition: transform .25s; box-shadow: var(--shadow);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: 12px 14px; font-size: 1rem; }
  .nav-search-wrap { width: 100%; min-width: 0; flex: none; }
  .nav-search { width: 100%; margin: 0 0 8px; }
  .nav-search input { flex: 1 1 auto; }
  .search-panel { width: 100%; max-width: none; }
  .nav-tools { margin-left: auto; }
  .hamburger { display: grid; }
}
@media (max-width: 560px) {
  .inv-grid, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
  .brand-tag { display: none; }
  .hero { padding-top: 44px; }
  .hero-panel { padding: 26px 22px 30px; }
}

.map-shell { display: flex; gap: 0; max-width: none; margin: 0; padding: 0; align-items: stretch; height: calc(100vh - var(--nav-h)); }
.map-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.map-wrap { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; border-radius: 0; overflow: hidden; }

.map-sidebar {
  width: 290px; flex: none; background: var(--panel);
  border: 0; border-right: 1px solid var(--edge); border-radius: 0;
  box-shadow: 7px 0 18px -12px rgba(0,0,0,.5);
  padding: 18px 16px 28px; overflow-y: auto;
}
.sb-head { display: flex; align-items: center; justify-content: space-between; }
.sb-title { font-family: var(--font-pixel); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.sb-close { display: none; width: 32px; height: 32px; font-size: 1.3rem; line-height: 1; background: var(--panel-2); border: 2px solid var(--edge); border-radius: 7px; color: var(--text); cursor: pointer; }
.sb-section { margin-top: 16px; }
.sb-section h4 { font-family: var(--font-pixel); font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.sb-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.select-all, .hide-found { display: flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.hide-found { margin: 8px 0 10px; }
.map-sidebar input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.region-list { display: flex; flex-direction: column; gap: 4px; }
.region-row { text-align: left; padding: 8px 10px; border-radius: 7px; border: 2px solid transparent; background: transparent; color: var(--muted); font-weight: 700; font-size: .88rem; cursor: pointer; }
.region-row:hover { background: var(--slot); color: var(--text); }
.region-row.active { background: var(--slot); color: var(--accent); border-color: var(--edge); box-shadow: inset 1px 1px 0 var(--bev-lo); }

.cat-list { display: flex; flex-direction: column; gap: 2px; }
.cat-row { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 7px; }
.cat-row:hover { background: var(--slot); }
.cat-eye { width: 28px; height: 28px; flex: none; display: grid; place-items: center; background: transparent; border: 0; color: var(--muted); cursor: pointer; border-radius: 6px; }
.cat-eye:hover { color: var(--text); }
.cat-eye:not(.on) { opacity: .45; }
.cat-eye svg { width: 18px; height: 18px; }
.cat-eye .eye-on, .cat-eye .eye-off { display: none; }
.cat-eye.on .eye-on { display: block; }
.cat-eye:not(.on) .eye-off { display: block; }
.cat-dot { width: 11px; height: 11px; flex: none; background: var(--c); border: 2px solid var(--edge); border-radius: 3px; transform: rotate(45deg); }
.cat-name { flex: 1; font-weight: 700; font-size: .9rem; }
.cat-count { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.cat-chk { flex: none; }
.cat-chk:disabled { opacity: .3; cursor: not-allowed; }

.map-titlebar { display: flex; align-items: center; gap: 12px; margin: 0; padding: 11px 18px; background: var(--panel); border-bottom: 1px solid var(--edge); flex-wrap: wrap; }
.dim-title { display: flex; align-items: center; gap: 10px; }
.dim-name { font-family: var(--font-pixel); font-size: clamp(.8rem, 2vw, 1rem); letter-spacing: .04em; color: var(--text); }
.dim-switch { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--panel-2); border: 2px solid var(--edge); border-radius: 8px; color: var(--accent); cursor: pointer; box-shadow: inset 2px 2px 0 var(--bev-hi), inset -2px -2px 0 var(--bev-lo); }
.dim-switch:hover { filter: brightness(1.14); }
.dim-switch svg { width: 20px; height: 20px; }
/* Wraps rather than forcing width: every label here is translated, and German runs about
   30% longer than the English it was sized for ("Preview" -> "Vorschauen"), which pushed
   the whole page into horizontal scroll at 320px. */
.map-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.map-tools .mini { display: flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.map-tools .mini input { width: 16px; height: 16px; accent-color: var(--accent); }
#rotateView { display: none; }
.filter-pins-btn { display: none; }

.account-btn { height: 40px; font-size: .82rem; padding: 0 12px; gap: 7px; max-width: 104px; min-width: 0; overflow: hidden; white-space: nowrap; }

/* The signed-in label is a user-supplied display name, so this is the one header control
   whose natural width is unbounded — it is capped, and it is the last thing to give way
   once the search field has shrunk to its floor. */
.account-select { position: relative; flex: 0 1 auto; min-width: 0; }
.account-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 220px; max-width: calc(100vw - 28px);
  padding: 6px; background: var(--panel); border: 2px solid var(--edge); border-radius: var(--radius-sm);
  box-shadow: inset 2px 2px 0 var(--bev-hi), inset -2px -2px 0 var(--bev-lo), var(--shadow);
}
.account-menu[hidden] { display: none; }
.account-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; border: 2px solid transparent; border-radius: 6px;
  background: transparent; color: var(--text); cursor: pointer; font: inherit; font-size: .85rem;
}
.account-item:hover { background: var(--slot); }
.account-item-danger { color: #d6493b; }

.lang-select { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 5px; width: auto; min-width: 40px; padding: 0 10px; }
.lang-btn svg { width: 19px; height: 19px; }
.lang-btn .lang-code { font-family: var(--font-pixel); font-size: .5rem; letter-spacing: .04em; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 248px; max-width: calc(100vw - 28px); max-height: min(64vh, 460px); overflow-y: auto;
  padding: 6px; background: var(--panel); border: 2px solid var(--edge); border-radius: var(--radius-sm);
  box-shadow: inset 2px 2px 0 var(--bev-hi), inset -2px -2px 0 var(--bev-lo), var(--shadow);
}
.lang-menu[hidden] { display: none; }
.lang-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 10px; border: 2px solid transparent; border-radius: 6px;
  background: transparent; color: var(--text); cursor: pointer; font: inherit;
}
.lang-item:hover { background: var(--slot); }
.lang-flag { font-size: 1.15rem; line-height: 1; width: 22px; height: 19px; display: grid; place-items: center; text-align: center; flex: none; color: var(--muted); }
.lang-flag svg { width: 18px; height: 18px; }
.lang-names { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.lang-native { font-weight: 700; font-size: .9rem; }
.lang-en { color: var(--muted); font-size: .72rem; }
.lang-check { color: var(--accent); flex: none; display: grid; place-items: center; }
.lang-check svg { width: 16px; height: 16px; display: block; }
.lang-div { height: 2px; background: var(--edge); margin: 6px 4px; border-radius: 2px; opacity: .8; }

@media (max-width: 1024px) {
  .map-shell { display: block; height: auto; padding: 0; }
  .map-col { display: block; }
  .map-titlebar { padding: 12px 14px; }
  .map-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 86vw; max-height: 100vh;
    border: 0; border-right: 2px solid var(--edge); border-radius: 0; z-index: 1200;
    transform: translateX(-110%); transition: transform .25s; box-shadow: var(--shadow);
  }
  .map-sidebar.open { transform: translateX(0); }
  .sb-close { display: grid; place-items: center; }
  .filter-pins-btn { display: inline-flex; }
  .map-wrap { flex: none; height: calc(100vh - var(--nav-h) - 120px); min-height: 380px; }
}

.aug-count { font-family: var(--font-pixel); font-size: .62rem; letter-spacing: .05em; color: var(--accent); margin-top: 10px; display: inline-block; }
.pill .pill-n { opacity: .55; font-size: .82em; margin-left: 3px; }
.aug-eff { color: var(--muted); font-size: .9rem; margin: 0 0 11px; line-height: 1.5; }
.aug-flag { color: var(--rarity-legendary); }

.cc-map-tiles { image-rendering: pixelated; }

.legal-page { max-width: 760px; padding: 20px 0 80px; }
.legal-page h2 { font-size: 1.25rem; margin-top: 2.2em; }
.legal-page h3 { font-size: 1.02rem; margin-top: 1.6em; color: var(--text); }
.legal-page p, .legal-page li { color: var(--muted); line-height: 1.65; }
.legal-page ul, .legal-page ol { padding-left: 1.3em; margin: .6em 0 1.2em; }
.legal-page li { margin-bottom: .45em; }
.legal-page strong { color: var(--text); }
.legal-page table { width: 100%; border-collapse: collapse; margin: 1em 0 1.6em; font-size: .92rem; }
.legal-page th, .legal-page td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--edge); vertical-align: top; }
.legal-page th { color: var(--text); font-weight: 700; }
.legal-page td { color: var(--muted); }
.legal-updated { color: var(--muted); font-size: .85rem; margin-top: -.6em; }
.legal-toc { background: var(--panel); border: 2px solid var(--edge); border-radius: var(--radius); padding: 14px 18px; margin: 1.4em 0; box-shadow: inset 2px 2px 0 var(--bev-hi), inset -2px -2px 0 var(--bev-lo); }
.legal-toc p { margin: 0 0 6px; font-weight: 700; color: var(--text); }
.legal-toc ol { margin: 0; padding-left: 1.2em; columns: 2; }

.container.quests-wide { max-width: 1140px; }
@media (min-width: 1300px) { .container.quests-wide { max-width: 1500px; } }
@media (min-width: 1700px) { .container.quests-wide { max-width: 1800px; } }

.quests-shell { display: flex; gap: 22px; align-items: flex-start; }

.quest-sidebar {
  width: 264px; flex: none; position: sticky; top: calc(var(--nav-h) + 16px);
  max-height: calc(100vh - var(--nav-h) - 32px); overflow-y: auto;
  background: var(--panel); border: 2px solid var(--edge); border-radius: var(--radius);
  box-shadow: inset 2px 2px 0 var(--bev-hi), inset -2px -2px 0 var(--bev-lo);
  padding: 16px;
}
.quest-sidebar-label { font-family: var(--font-pixel); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.quest-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 14px; margin-bottom: 10px; border-bottom: 2px solid var(--edge);
  font-size: .87rem; color: var(--text); font-weight: 600;
}
.quest-switch {
  width: 36px; height: 20px; flex: none; border-radius: 999px; position: relative; cursor: pointer;
  background: var(--slot); border: 2px solid var(--edge); padding: 0;
  box-shadow: inset 2px 2px 0 var(--bev-lo), inset -2px -2px 0 var(--bev-hi);
}
.quest-switch::after {
  content: ""; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--muted); transition: transform .16s ease, background .16s ease;
}
.quest-switch.on { background: color-mix(in srgb, var(--accent) 38%, var(--slot)); }
.quest-switch.on::after { transform: translateX(16px); background: var(--accent); }

.quest-island-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 2px solid transparent; border-radius: var(--radius-sm);
  padding: 9px 10px; margin-bottom: 3px; color: var(--muted); font-size: .87rem; font-weight: 600;
  font-family: var(--font-body); transition: background .12s, border-color .12s;
}
.quest-island-btn:hover { background: var(--slot); color: var(--text); }
.quest-island-btn.active {
  background: var(--slot); border-color: var(--accent); color: var(--text);
  box-shadow: inset 2px 2px 0 var(--bev-lo), inset -2px -2px 0 var(--bev-hi);
}
.quest-island-btn .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quest-island-btn .c { font-size: .72rem; font-weight: 700; color: var(--muted); flex: none; }
.quest-island-btn.active .c { color: var(--accent); }
.quest-island-btn.empty { opacity: .5; }

.quest-content { flex: 1; min-width: 0; }

.quest-section {
  background: var(--panel); border: 2px solid var(--edge); border-radius: var(--radius);
  box-shadow: inset 2px 2px 0 var(--bev-hi), inset -2px -2px 0 var(--bev-lo);
  margin-bottom: 14px; overflow: hidden;
}
.quest-section-head {
  display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0;
  padding: 15px 18px; cursor: pointer; text-align: left; color: var(--text); font: inherit;
}
.quest-section-head:hover { background: var(--panel-2); }
.quest-section-chev { font-size: .8rem; color: var(--accent); transition: transform .2s ease; flex: none; }
.quest-section.collapsed .quest-section-chev { transform: rotate(-90deg); }
.quest-section-name { font-family: var(--font-pixel); font-size: .8rem; letter-spacing: .01em; }
.quest-section-dim {
  font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--slot);
  border: 1px solid var(--edge); border-radius: 5px; padding: 2px 8px; flex: none;
}
.quest-section-count { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--muted); flex: none; white-space: nowrap; }

.quest-section-body-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s ease; border-top: 2px solid var(--edge); }
.quest-section.collapsed .quest-section-body-wrap { grid-template-rows: 0fr; border-top-color: transparent; }
.quest-section-body-inner { overflow: hidden; min-height: 0; }
.quest-section-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 20px; }
.quest-empty-note { color: var(--muted); font-size: .9rem; margin: 0; padding: 2px 0; }

.quest-subgroup { display: flex; flex-direction: column; gap: 12px; }
.quest-subgroup-label { font-family: var(--font-pixel); font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sc, var(--accent)); margin: 0; }
.quest-subgroup.sc-main   { --sc: #e8b923; }
.quest-subgroup.sc-side   { --sc: #4aa3ff; }
.quest-subgroup.sc-player { --sc: #56c98d; }
.quest-subgroup.sc-hidden { --sc: #9aa3ad; }

.quest-cards { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
@media (min-width: 460px) { .quest-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .quest-cards { grid-template-columns: repeat(3, 1fr); } }
.quest-card {
  position: relative; background: var(--panel-2); border: 2px solid var(--edge); border-radius: var(--radius);
  box-shadow: inset 2px 2px 0 var(--bev-hi), inset -2px -2px 0 var(--bev-lo);
  overflow: hidden; display: flex; flex-direction: column;
}
.quest-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--qc, var(--accent)); z-index: 1; }
.quest-card.qc-main   { --qc: #e8b923; }
.quest-card.qc-side   { --qc: #4aa3ff; }
.quest-card.qc-player { --qc: #56c98d; }
.quest-card.qc-hidden { --qc: #9aa3ad; }

.quest-cover-btn {
  display: block; width: 100%; aspect-ratio: 16 / 10; background: var(--slot); border: 0; border-bottom: 2px solid var(--edge);
  padding: 0; cursor: zoom-in; appearance: none; flex: none;
}
.quest-cover-btn img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

.quest-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }

@media (min-width: 900px) {
  .quest-card { flex-direction: row; }
  .quest-cover-btn {
    width: 34%; max-width: 240px; aspect-ratio: 16 / 10; align-self: flex-start;
    border-bottom: 0; border-right: 2px solid var(--edge); flex: none;
  }
  .quest-card-body { flex: 1; min-width: 0; }
}
.quest-card-top { display: flex; align-items: flex-start; gap: 10px; }
.quest-check { width: 19px; height: 19px; margin-top: 3px; flex: none; accent-color: var(--accent); }
.quest-card-title-wrap { flex: 1; min-width: 0; }
.quest-card-title-wrap h3 { margin: 6px 0 6px; font-family: var(--font-pixel); font-size: .74rem; line-height: 1.6; letter-spacing: .01em; font-weight: 400; }
.quest-card-title-wrap p { color: var(--muted); margin: 0; font-size: .92rem; line-height: 1.55; }
.quest-badge {
  font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 7px; border-radius: 6px; border: 2px solid var(--edge); white-space: nowrap; display: inline-block;
  color: var(--qc, var(--accent)); background: color-mix(in srgb, var(--qc, var(--accent)) 16%, transparent);
}
.quest-obj { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .87rem; }
.quest-obj li { display: flex; gap: 7px; align-items: baseline; color: var(--muted); line-height: 1.5; }
.quest-obj li::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--qc, var(--accent)); flex: none; margin-top: 6px; }
.quest-rewards { display: flex; flex-wrap: wrap; gap: 6px; }
.quest-reward-chip {
  font-size: .78rem; font-weight: 700; color: var(--text); background: var(--slot);
  border: 1px solid var(--edge); border-radius: 5px; padding: 3px 9px;
}
.quest-unlock { color: var(--muted); font-size: .82rem; line-height: 1.5; border-top: 2px solid var(--edge); padding-top: 9px; margin-top: 2px; }

.quest-lightbox {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.82);
  display: none; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out;
}
.quest-lightbox.open { display: flex; }
.quest-lightbox img { max-width: min(90vw, 900px); max-height: 85vh; border: 3px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow); }

@media (max-width: 680px) {
  .quests-shell { flex-direction: column; align-items: stretch; }
  .quest-sidebar { width: auto; position: static; max-height: none; }
}
@media (max-width: 460px) {
  .quest-cards { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .nav { gap: 8px; padding: 0 12px; }
  .nav-tools { gap: 4px; margin-left: auto; flex: none; }
  .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .brand-logo { height: 26px; max-width: 100%; object-fit: contain; object-position: left center; }
  .account-btn { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .container { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 620px) {
  .legal-page table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .legal-page table th, .legal-page table td { min-width: 150px; }
}

@media (pointer: coarse) {
  input[type=checkbox] { width: 22px; height: 22px; }
  .cat-eye { width: 38px; height: 38px; }
  .quest-check { width: 24px; height: 24px; }
  .btn, .icon-btn, .pill { min-height: 40px; }
  .lang-item, .account-item { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  #site-header, #site-footer, .searchbar, .kicker,
  #ccConsentBanner, #ccConsentManage,
  #cc-tour-veil, #cc-tour-spot, #cc-tour-card, .cc-tour-fab,
  .quest-lightbox, .quest-switch, .btn, .pill, .icon-btn { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .quest-card { break-inside: avoid; box-shadow: none; border: 1px solid #888; background: #fff; color: #000; }
  .muted { color: #444; }
  a { color: #000; text-decoration: underline; }
}