/* Stream Room field guide.
   Idea: a surveyor's notebook. Pale green graph paper, blue-black fountain pen ink, a neon highlighter,
   a red pencil for margin notes, masking tape holding polaroids. The handwriting is Patrick Hand,
   the same font the game uses for its taped notes. Body text is Atkinson Hyperlegible for easy reading. */

/* every font comes from this site itself, nothing is loaded from Google (privacy) */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Patrick Hand";
  src: url("fonts/PatrickHand-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --paper: #eef4ea;
  --paper-deep: #e2ecdc;
  --grid: rgba(64, 120, 100, 0.13);
  --grid-major: rgba(64, 120, 100, 0.22);
  --ink: #1d2d5c;
  --pencil: #58616f;
  --marker: rgba(226, 255, 46, 0.85);
  --marker-ink: #1d2d5c;
  --red: #c8372b;
  --tape: rgba(233, 205, 120, 0.78);
  --photo: #fdfdf8;
  --sticky: #fff27a;
  --sticky-ink: #2b2a1c;
  --shadow: 0 1px 1px rgba(29, 45, 92, 0.12), 0 6px 14px -6px rgba(29, 45, 92, 0.35);

  /* map watercolor */
  --water: rgba(86, 160, 205, 0.45);
  --tree: rgba(84, 160, 92, 0.42);
  --wood: rgba(190, 132, 72, 0.42);
  --sand: rgba(214, 186, 130, 0.45);
  --soil: rgba(120, 82, 52, 0.38);
  --fire: rgba(240, 120, 40, 0.75);
  --portal: rgba(150, 90, 220, 0.4);

  /* index tab colors */
  --t1: #ffd36e; --t2: #9fdcc4; --t3: #f6a6b8; --t4: #a9c4ff; --t5: #c9e57a;

  --hand: "Patrick Hand", "Segoe Print", "Comic Sans MS", cursive;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --measure: 62ch;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: light;
}

/* Night reading: the same notebook under a desk lamp */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #18211f; --paper-deep: #1f2a27;
    --grid: rgba(160, 220, 190, 0.06); --grid-major: rgba(160, 220, 190, 0.11);
    --ink: #e4ebf7; --pencil: #a2acb9;
    --marker: #cdef3c; --marker-ink: #18211f;
    --red: #ff8a7a; --tape: rgba(233, 205, 120, 0.5);
    --photo: #2a3431; --sticky: #e8d85a; --sticky-ink: #23220f;
    --shadow: 0 1px 1px rgba(0, 0, 0, 0.4), 0 8px 18px -6px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #18211f; --paper-deep: #1f2a27;
  --grid: rgba(160, 220, 190, 0.06); --grid-major: rgba(160, 220, 190, 0.11);
  --ink: #e4ebf7; --pencil: #a2acb9;
  --marker: #cdef3c; --marker-ink: #18211f;
  --red: #ff8a7a; --tape: rgba(233, 205, 120, 0.5);
  --photo: #2a3431; --sticky: #e8d85a; --sticky-ink: #23220f;
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.4), 0 8px 18px -6px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 24px; }

body {
  margin: 0;
  color: var(--ink);
  font: 1.0625rem/1.6 var(--body);
  background-color: var(--paper);
  /* graph paper: 6 mm squares, a stronger line every 5 */
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  overflow-x: hidden;
}

main { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 { font-family: var(--hand); font-weight: 400; line-height: 1.05; margin: 0; }
h2 { font-size: clamp(2.3rem, 5vw, 3.4rem); margin-bottom: 0.4em; }
h3 { font-size: 1.6rem; margin-bottom: 0.2em; }
p { margin: 0 0 0.9em; max-width: var(--measure); }
b { font-weight: 700; }

a { color: inherit; text-decoration-color: var(--red); text-underline-offset: 3px; }
:focus-visible { outline: 3px dashed var(--red); outline-offset: 3px; border-radius: 2px; }

section { padding: clamp(56px, 9vw, 110px) 0 0; }

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px); align-items: start; padding-top: clamp(28px, 6vw, 72px);
}
.hero h1 { font-size: clamp(3rem, 7.4vw, 5.6rem); letter-spacing: -0.01em; }
.hero h1 span { display: block; }
.squiggle { width: min(300px, 80%); height: 18px; margin: 4px 0 18px; display: block; }
.squiggle path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; }
.lede { font-size: 1.2rem; }

.margin-note {
  display: inline-flex; align-items: flex-end; gap: 6px; margin: 4px 0 26px;
  font-family: var(--hand); font-size: 1.35rem; color: var(--red); text-decoration: none; transform: rotate(-2deg);
}
.margin-note svg { width: 56px; height: 42px; flex: none; }
.margin-note path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.margin-note:hover { text-decoration: underline wavy; }

/* ---------- polaroids and tape ---------- */
.polaroid {
  position: relative; margin: 0; background: var(--photo); padding: 10px 10px 8px;
  box-shadow: var(--shadow); max-width: 340px;
}
.polaroid img { display: block; width: 100%; height: auto; }
.polaroid figcaption { font-family: var(--hand); font-size: 1.15rem; padding: 6px 2px 0; line-height: 1.25; }
.polaroid::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px;
  transform: translateX(-50%) rotate(-3deg); background: var(--tape);
  clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 45%);
}
.tilt-l { transform: rotate(-1.6deg); }
.tilt-r { transform: rotate(1.4deg); }

/* ---------- map ---------- */
.map {
  position: relative; aspect-ratio: 10 / 7; background: var(--paper-deep);
  border: 2px solid var(--ink); border-radius: 6px 10px 5px 12px; box-shadow: var(--shadow);
}
.map-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.map.has-art .sketch { visibility: hidden; }
.sketch { display: block; width: 100%; height: 100%; }
.sketch .ink { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sketch .thin { stroke-width: 1.4; }
.sketch .fence { stroke-dasharray: 2 7; stroke-width: 3; }
.sketch .dashed { stroke-dasharray: 10 12; stroke-width: 6; stroke: var(--pencil); opacity: 0.6; }
.sketch .fill-wood { fill: var(--wood); }
.sketch .fill-water { fill: var(--water); }
.sketch .fill-tree { fill: var(--tree); }
.sketch .fill-sand { fill: var(--sand); }
.sketch .fill-soil { fill: var(--soil); }
.sketch .fill-fire { fill: var(--fire); }
.sketch .fill-portal { fill: var(--portal); }
.sketch .flowers circle { fill: #f07aa0; }
.sketch .label text { font-family: var(--hand); font-size: 28px; fill: var(--pencil); }
.sketch .label .compass { fill: var(--red); font-size: 26px; }

.pins { position: absolute; inset: 0; }
.pin {
  position: absolute; width: 30px; height: 30px; margin: -30px 0 0 -15px; padding: 0; border: 0;
  background: none; cursor: pointer;
}
.pin::before { /* the pin head */
  content: ""; position: absolute; left: 6px; top: 0; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9b8f, var(--red) 60%);
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35);
}
.pin::after { /* the needle */
  content: ""; position: absolute; left: 14px; top: 16px; width: 2px; height: 13px; background: #8b8f96;
}
.pin[aria-expanded="true"]::before { background: radial-gradient(circle at 35% 30%, #fff9a8, #e0c419 60%); }
.pin:hover::before { transform: scale(1.15); }

.pin-card {
  position: absolute; left: 12px; bottom: 12px; width: min(300px, calc(100% - 24px));
  background: var(--photo); border: 1.5px solid var(--ink); padding: 12px 14px 10px; box-shadow: var(--shadow);
  border-radius: 3px; z-index: 2;
}
.pin-card h3 { font-size: 1.5rem; }
.pin-card p { font-size: 0.95rem; margin-bottom: 0.5em; }
.pin-card .close {
  position: absolute; top: 4px; right: 6px; border: 0; background: none; color: var(--pencil);
  font: 1.5rem/1 var(--hand); cursor: pointer; padding: 4px 6px;
}
.map-hint { font-family: var(--hand); color: var(--pencil); font-size: 1.15rem; margin-top: 30px; }

.sticky {
  background: var(--sticky); color: var(--sticky-ink); font-family: var(--hand); padding: 14px 16px 16px;
  box-shadow: var(--shadow); line-height: 1.25;
}

/* the one orchestrated moment: the map draws itself, then the pins drop in */
@media (prefers-reduced-motion: no-preference) {
  .sketch .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s ease-out 0.2s forwards; }
  .sketch .fence.draw { stroke-dasharray: none; animation: none; }
  .sketch .dashed.draw { stroke-dasharray: none; animation: none; }
  .pin { animation: drop 0.45s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(1s + var(--i) * 70ms); }
  .flash { animation: flash 1.4s ease-out; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes drop { from { transform: translateY(-26px); opacity: 0; } }
@keyframes flash { 0%, 40% { background-color: var(--marker); } 100% { background-color: transparent; } }

/* ---------- first visit ---------- */
.steps {
  list-style: none; padding: 0; margin: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px);
}
.steps li { counter-increment: step; position: relative; padding-top: 58px; }
.steps li::before { /* a number circled in red pencil */
  content: counter(step); position: absolute; top: 0; left: 0; width: 48px; height: 46px;
  display: grid; place-items: center; font: 1.9rem/1 var(--hand); color: var(--red);
  border: 2.5px solid var(--red); border-radius: 52% 48% 55% 45% / 50% 55% 45% 50%; transform: rotate(-6deg);
}

/* highlighter: a slightly uneven swipe behind the text */
.cmd-chip, .cmd-name {
  font-family: var(--hand); color: var(--marker-ink); border: 0; cursor: pointer;
  background: linear-gradient(100deg, transparent 1%, var(--marker) 3%, var(--marker) 96%, transparent 99%) no-repeat 0 62% / 100% 72%;
}
.cmd-chip { font-size: 1.25rem; padding: 0 4px; }

/* ---------- commands ---------- */
.commands-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); column-gap: 40px; align-items: end; }
.commands-head h2, .commands-head > p { grid-column: 1; }
.finder { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-bottom: 0.9em; }
.finder label { display: block; font-family: var(--hand); font-size: 1.25rem; color: var(--pencil); }
.finder input {
  width: 100%; font: 1.5rem var(--hand); color: var(--ink); background: transparent;
  border: 0; border-bottom: 2.5px solid var(--ink); padding: 4px 2px; border-radius: 0;
}
.finder input::placeholder { color: var(--pencil); opacity: 0.6; }
.finder input:focus-visible { outline: none; border-bottom-color: var(--red); }
.group-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; }
.group-links a { font-family: var(--hand); font-size: 1.2rem; color: var(--pencil); }

.group { margin-top: 56px; }
.group-title { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-bottom: 4px; }
.group-title h3 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.group-blurb { color: var(--pencil); margin: 8px 0 8px; }

.entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.entry {
  position: relative; padding: 20px 0 18px; border-bottom: 1px dashed var(--grid-major);
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
}
.entry.has-photo { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) 230px; column-gap: 32px; }
.entry.has-photo .polaroid { grid-column: 2; grid-row: 1 / span 4; align-self: start; margin-top: 8px; }
.entry-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cmd-name { font-size: 1.9rem; line-height: 1.1; padding: 0 6px; margin-left: -6px; }
.cmd-name:hover { text-decoration: underline wavy var(--red); text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.wait { font-family: var(--hand); color: var(--pencil); font-size: 1.1rem; white-space: nowrap; }
.entry p { margin: 6px 0 4px; }
.usage { font-family: var(--hand); font-size: 1.15rem; color: var(--pencil); margin: 2px 0 0; }

.stamp {
  display: inline-block; font-family: var(--hand); font-size: 1.05rem; color: var(--red);
  border: 2px solid currentColor; border-radius: 4px; padding: 0 8px; transform: rotate(-4deg); opacity: 0.85;
}

.options { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.options li { display: inline-flex; align-items: baseline; gap: 6px; }
.option {
  font: 1.15rem/1.2 var(--hand); color: var(--ink); background: none; cursor: pointer;
  border: 1.5px solid var(--pencil); border-radius: 48% 52% 46% 54% / 60% 50% 50% 40%; padding: 1px 10px;
}
.option.is-default { border-color: var(--red); border-width: 2px; }
.option:hover { background: var(--marker); color: var(--marker-ink); }
.option-note { font-size: 0.85rem; color: var(--pencil); }

.empty { font-family: var(--hand); font-size: 1.5rem; color: var(--red); margin-top: 40px; }

/* ---------- points ---------- */
.points-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.ledger { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
.ledger caption { text-align: left; font-family: var(--hand); font-size: 1.5rem; padding-bottom: 6px; }
.ledger td { padding: 9px 0; border-bottom: 1px solid var(--grid-major); vertical-align: baseline; }
.ledger td:last-child { text-align: right; font-family: var(--hand); font-size: 1.3rem; padding-left: 16px; }
.ledger tr:first-child td { border-top: 2px solid var(--ink); }
.level-steps { list-style: none; padding: 0; margin: 4px 0 26px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--hand); font-size: 1.2rem; }
.level-steps b { font-weight: 400; color: var(--red); }
.boards { padding-left: 1.1em; margin: 6px 0 30px; }
.boards li { margin-bottom: 4px; }

/* ---------- places ---------- */
.section-intro { font-size: 1.1rem; }
.place-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); margin-top: 34px; }
.place-row .polaroid { max-width: none; }
.place-row figcaption { font-size: 1.1rem; }
.place-row figcaption b { font-weight: 400; color: var(--red); font-size: 1.3rem; }

/* ---------- support ---------- */
.support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px clamp(24px, 4vw, 52px); align-items: start; margin-top: 12px; }
.support-item h3 { border-bottom: 2px solid var(--ink); display: inline-block; padding-right: 10px; margin-bottom: 8px; }
.support-photo { max-width: 320px; justify-self: center; }

/* ---------- rules ---------- */
.rules { display: flex; justify-content: center; }
.rules-note { max-width: 640px; padding: 26px 32px 22px; transform: rotate(-1deg); font-size: 1.3rem; position: relative; }
.rules-note h2 { font-size: 2.6rem; margin-bottom: 0.2em; }
.rules-note ul { margin: 0; padding-left: 1.1em; }
.rules-note li { margin-bottom: 8px; }
.rules-note::before {
  content: ""; position: absolute; top: -12px; left: 40px; width: 100px; height: 26px; background: var(--tape);
  transform: rotate(-4deg); clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 45%);
}

.foot { max-width: 1180px; margin: 80px auto 0; padding: 24px var(--gutter) 48px; color: var(--pencil); font-size: 0.95rem; border-top: 1px dashed var(--grid-major); }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  font-family: var(--hand); font-size: 1.3rem; background: var(--sticky); color: var(--sticky-ink);
  padding: 8px 18px; box-shadow: var(--shadow); transition: opacity 0.2s, transform 0.2s; z-index: 30;
}
.toast.show { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); }

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .commands-head { grid-template-columns: minmax(0, 1fr); }
  .finder { grid-column: 1; grid-row: auto; }
  .entries { grid-template-columns: minmax(0, 1fr); }
  .entry.has-photo { grid-template-columns: minmax(0, 1fr); }
  .entry.has-photo .polaroid { grid-column: 1; grid-row: auto; margin-top: 18px; max-width: 280px; }
  .points-layout { grid-template-columns: minmax(0, 1fr); }
  .place-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-grid { grid-template-columns: minmax(0, 1fr); }
  .support-photo { justify-self: start; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .place-row { grid-template-columns: minmax(0, 1fr); }
    .sketch .label text { font-size: 34px; }
  .pin-card { left: 6px; bottom: 6px; width: calc(100% - 12px); }
  .rules-note { padding: 22px 20px 18px; }
}

/* ---------- leaderboards (leaderboard.js) ---------- */
.ranks-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; }
.ranks-sub { color: var(--pencil); margin: 0; }
#lb-updated { font-family: var(--hand); font-size: 1.15rem; color: var(--red); }
.lb-card {
  position: relative; margin-top: 18px; background: var(--photo); border: 2px solid var(--ink);
  border-radius: 6px 10px 5px 12px; box-shadow: var(--shadow); padding: 0 clamp(14px, 3vw, 34px) 26px;
}
.lb-card::before { /* tape on the top edge */
  content: ""; position: absolute; top: -14px; left: 40%; width: 110px; height: 28px; background: var(--tape);
  transform: rotate(-2deg); clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 45%);
}
.lb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; transform: translateY(-2px); }
.lb-tab {
  font: 1.15rem/1 var(--hand); color: var(--ink); border: 2px solid var(--ink); border-top: 0; cursor: pointer;
  padding: 10px 14px 8px; border-radius: 0 0 10px 10px; background: var(--paper-deep);
}
.lb-tab:nth-child(5n+1) { --tab: var(--t1); } .lb-tab:nth-child(5n+2) { --tab: var(--t2); }
.lb-tab:nth-child(5n+3) { --tab: var(--t3); } .lb-tab:nth-child(5n+4) { --tab: var(--t4); } .lb-tab:nth-child(5n+5) { --tab: var(--t5); }
.lb-tab[aria-selected="true"] { background: var(--tab); color: #1d2d5c; padding-top: 16px; box-shadow: var(--shadow); }
.lb-tab:hover { background: var(--tab); color: #1d2d5c; }
.lb-tools { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 24px; }
.lb-find { display: flex; flex-direction: column; font-family: var(--hand); color: var(--pencil); font-size: 1.05rem; }
.lb-find input {
  font: 1.4rem var(--hand); color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--ink);
  padding: 2px 4px; width: min(320px, 70vw);
}
.lb-find input:focus { outline: none; border-bottom-color: var(--red); background: var(--marker); }
.lb-note { margin: 0; font-family: var(--hand); font-size: 1.15rem; color: var(--pencil); }
.lb-status { margin: 14px 0 6px; color: var(--pencil); }
.lb-list { list-style: none; margin: 0; padding: 0; columns: 380px 2; column-gap: 40px; }
.lb-row {
  break-inside: avoid; display: grid; grid-template-columns: 2.6em 2.4em minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 7px 4px; border-bottom: 1.5px dashed var(--grid-major);
}
.lb-rank { font: 1.35rem/1 var(--hand); color: var(--pencil); text-align: right; }
.lb-platform {
  font: 700 0.62rem/1 var(--body); letter-spacing: 0.06em; text-align: center; padding: 4px 0; border-radius: 4px; color: #fff;
}
.lb-tw { background: #8b5cf6; } .lb-yt { background: #e0352b; }
.lb-host { background: #c9961a; letter-spacing: 0.02em; }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.lb-value { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; white-space: nowrap; }
.lb-value small { font-weight: 400; color: var(--pencil); }
.lb-top .lb-rank { /* a medal instead of the number */
  justify-self: end; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #3a2a10;
  font-size: 1.2rem; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 1px 2px 3px rgba(0, 0, 0, 0.25);
}
.lb-top1 .lb-rank { background: radial-gradient(circle at 35% 30%, #fff3b0, #e8b923 70%); }
.lb-top2 .lb-rank { background: radial-gradient(circle at 35% 30%, #ffffff, #b9c0cc 70%); }
.lb-top3 .lb-rank { background: radial-gradient(circle at 35% 30%, #ffd7b0, #c8813f 70%); }
.lb-top .lb-name { font-size: 1.12rem; }
.lb-top1 { background: linear-gradient(90deg, var(--marker), transparent 70%); }
.lb-more {
  display: block; margin: 18px auto 0; font: 1.3rem var(--hand); color: var(--ink); background: var(--sticky);
  border: 0; padding: 8px 22px 10px; box-shadow: var(--shadow); cursor: pointer; transform: rotate(-1deg);
}
.lb-more:hover { transform: rotate(1deg); }
.lb-more[hidden] { display: none; }
.lb-card, .lb-list, .lb-row { min-width: 0; max-width: 100%; }
@media (max-width: 560px) {
  .lb-tab { font-size: 1rem; padding: 8px 10px 6px; }
  .lb-row { grid-template-columns: 2.2em 2.2em minmax(0, 1fr) auto; }
}

/* ---------- header on every page: brand, pages, LIVE badge ---------- */
.site-head {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 12px var(--gutter);
  background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(6px);
  border-bottom: 1.5px dashed var(--grid-major);
}
.brand { font-family: var(--hand); font-size: 1.7rem; line-height: 1; text-decoration: none; color: var(--ink); }
.brand b { font-weight: 400; color: var(--red); }
.brand span { color: var(--pencil); font-size: 1.15rem; }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.site-nav a {
  font-family: var(--hand); font-size: 1.2rem; text-decoration: none; color: var(--ink);
  padding: 4px 12px 6px; border-radius: 8px; border: 2px solid transparent;
}
.site-nav a:hover { border-color: var(--ink); }
.site-nav a[aria-current="page"] { background: var(--marker); color: var(--marker-ink); border-color: var(--ink); }
.live-badge {
  display: inline-flex; align-items: center; gap: 8px; font: 700 0.9rem/1 var(--body); text-decoration: none;
  color: var(--pencil); padding: 7px 12px; border-radius: 99px; border: 2px solid var(--grid-major);
}
.live-badge[hidden] { display: none; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pencil); opacity: 0.6; }
.live-badge.is-live { color: #fff; background: #e0352b; border-color: #e0352b; box-shadow: var(--shadow); }
.live-badge.is-live .live-dot { background: #fff; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .live-badge.is-live .live-dot { animation: pulse 1.4s ease-in-out infinite; }
}
@keyframes pulse { 50% { transform: scale(0.55); opacity: 0.55; } }
@media (max-width: 640px) {
  .site-head { position: static; }
  .site-nav { margin-left: 0; width: 100%; }
  .site-nav a { font-size: 1.1rem; padding: 3px 9px 5px; }
}

/* ---------- home: news and the way to the other pages ---------- */
.news { padding-top: clamp(40px, 6vw, 70px); }
.news-note { max-width: 760px; transform: rotate(-0.6deg); padding: 20px 26px 22px; }
.news-note h2 { font-size: clamp(2rem, 4vw, 2.6rem); }
.news-note ul { list-style: none; margin: 8px 0 0; padding: 0; font-family: var(--body); font-size: 1rem; }
.news-note li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.15); }
.news-note li:last-child { border-bottom: 0; }
.news-note a { color: inherit; }
.news-date { flex: none; font-family: var(--hand); font-size: 1.1rem; color: var(--red); min-width: 4.2em; }
.news-new {
  flex: none; font: 700 0.65rem/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--red); color: #fff; padding: 3px 6px; border-radius: 4px; transform: rotate(-4deg);
}
.explore-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); }
.explore-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink);
  background: var(--photo); border: 2px solid var(--ink); border-top: 12px solid var(--tab);
  border-radius: 6px 10px 5px 12px; padding: 18px 20px 20px; box-shadow: var(--shadow); transition: transform 0.15s;
}
.explore-card b { font: 400 1.9rem/1.05 var(--hand); }
.explore-card b::after { content: " →"; color: var(--red); }
.explore-card:hover { transform: translateY(-3px) rotate(-0.5deg); }
@media (max-width: 760px) { .explore-grid { grid-template-columns: 1fr; } }

/* ---------- ranks: your card ---------- */
.me-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; }
.me-form label { width: 100%; font-family: var(--hand); color: var(--pencil); font-size: 1.1rem; }
.me-form input {
  font: 1.5rem var(--hand); color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--ink);
  padding: 2px 4px; width: min(340px, 70vw);
}
.me-form input:focus { outline: none; border-bottom-color: var(--red); background: var(--marker); }
.me-form button {
  font: 1.3rem var(--hand); color: var(--ink); background: var(--sticky); border: 0; padding: 6px 18px 8px;
  box-shadow: var(--shadow); cursor: pointer; transform: rotate(-1deg);
}
.me-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; margin-top: 20px; }
.me-card[hidden] { display: none; }
.me-empty { font-family: var(--hand); font-size: 1.3rem; color: var(--pencil); }
.me-one {
  position: relative; background: var(--photo); border: 2px solid var(--ink); border-radius: 6px 10px 5px 12px;
  padding: 18px 22px 20px; box-shadow: var(--shadow); transform: rotate(-0.4deg);
}
.me-one::before {
  content: ""; position: absolute; top: -12px; left: 30%; width: 96px; height: 26px; background: var(--tape); transform: rotate(3deg);
}
.me-top { display: flex; align-items: center; gap: 10px; }
.me-top h3 { font-size: 2.2rem; overflow-wrap: anywhere; }
.me-top .lb-platform { width: 2.4em; }
.me-level { margin: 6px 0 6px; font-size: 1.1rem; }
.me-bar { height: 14px; border: 2px solid var(--ink); border-radius: 99px; overflow: hidden; background: var(--paper-deep); }
.me-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--t5), var(--t1)); }
.me-next { font-family: var(--hand); color: var(--pencil); font-size: 1.1rem; margin: 4px 0 10px; }
.me-ranks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.me-ranks li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 8px 10px; border: 1.5px dashed var(--grid-major); border-radius: 8px; }
.me-board { font-family: var(--hand); font-size: 1.1rem; }
.me-rank { font: 400 1.4rem/1 var(--hand); color: var(--red); grid-row: span 2; align-self: center; }
.me-value { font-size: 0.85rem; color: var(--pencil); }
.me-none { opacity: 0.55; }
.lb-name { font: inherit; font-weight: 700; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.lb-name:hover { text-decoration: underline wavy var(--red); }
.lb-stale { color: var(--red); font-weight: 700; }

/* ---------- impressum and datenschutz ---------- */
.legal { max-width: 760px; }
.legal h3 { margin-top: 1.2em; font-size: 1.5rem; }
.legal p, .legal li { max-width: 70ch; }
.legal-en { color: var(--pencil); }
.legal-summary { margin: 10px 0 18px; transform: rotate(-0.4deg); font-family: var(--body); }
.legal-summary p { margin: 0; }
.legal-date { color: var(--pencil); margin-top: 2em; }
mark.todo { background: #ffd0c8; color: #8a1a10; padding: 0 4px; border-radius: 3px; font-weight: 700; }