/* SkyTycoonCraft: "Night above the clouds".
   One dark theme on purpose: it matches the game's own dark UI and the server's gold / cream / green chat palette.
   Fonts: Silkscreen (display), Figtree (body), DotGothic16 (addresses, labels), Pixelify Sans (display, in Turkish).
   Every colour comes from the tokens below (or color-mix() of them). Nothing here moves: transitions, animations
   and @keyframes belong to motion.css alone. */

:root {
  --night: #0c1220;
  --night-2: #101a2d;
  --panel: #142035;
  --panel-2: #1a2843;
  --line: #263652;
  --line-2: #344a70;
  --ink: #eef2f7;
  --soft: #c3cbd6;
  --muted: #9aa3ad;
  --gold: #ffd54a;
  --cream: #f5e58a;
  --green: #6ee7a0;
  --red: #ff6b6b;
  --sky: #7cc4ff;
  --nether: #ff8a5c;
  --end: #c9a7ff;
  --gold-ink: #241a02;

  --display: "Silkscreen", "Courier New", monospace;
  --display-tr: "Pixelify Sans", "Courier New", monospace;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "DotGothic16", "Cascadia Mono", Consolas, ui-monospace, monospace;

  --wrap: 1200px;
  --gutter: 32px;
  --bar-h: 64px;
  --radius: 14px;
  --radius-sm: 10px;

  /* Glass: translucent panel colours over the night sky, with a soft shadow. */
  --glass: color-mix(in srgb, var(--panel) 68%, transparent);
  --glass-hi: color-mix(in srgb, var(--panel-2) 82%, transparent);
  --glass-menu: color-mix(in srgb, var(--panel) 94%, transparent);
  --shadow-soft: 0 10px 28px -12px rgba(0 0 0 / 0.7);
  --shadow-deep: 0 24px 48px -18px rgba(0 0 0 / 0.8);

  /* Stars: one star per layer on large, odd-sized tiles, so the field doesn't read as a grid. */
  --stars:
    radial-gradient(1px 1px at 2px 174px, rgba(124, 196, 255, 0.6) 50%, transparent 55%) 0 0 / 523px 389px,
    radial-gradient(1px 1px at 234px 224px, rgba(255, 255, 255, 0.75) 50%, transparent 55%) 0 0 / 571px 433px,
    radial-gradient(1px 1px at 135px 325px, rgba(255, 255, 255, 0.7) 50%, transparent 55%) 0 0 / 613px 457px,
    radial-gradient(1px 1px at 543px 154px, rgba(245, 229, 138, 0.65) 50%, transparent 55%) 0 0 / 659px 401px,
    radial-gradient(1px 1px at 415px 265px, rgba(255, 255, 255, 0.65) 50%, transparent 55%) 0 0 / 701px 479px,
    radial-gradient(1px 1px at 590px 7px, rgba(245, 229, 138, 0.75) 50%, transparent 55%) 0 0 / 743px 421px,
    radial-gradient(2px 2px at 13px 178px, rgba(255, 255, 255, 0.75) 50%, transparent 55%) 0 0 / 797px 463px,
    radial-gradient(1px 1px at 319px 371px, rgba(255, 255, 255, 0.9) 50%, transparent 55%) 0 0 / 523px 389px,
    radial-gradient(2px 2px at 409px 349px, rgba(255, 255, 255, 0.6) 50%, transparent 55%) 0 0 / 571px 433px,
    radial-gradient(1.5px 1.5px at 489px 431px, rgba(124, 196, 255, 0.9) 50%, transparent 55%) 0 0 / 613px 457px,
    radial-gradient(1.5px 1.5px at 285px 103px, rgba(124, 196, 255, 0.6) 50%, transparent 55%) 0 0 / 659px 401px,
    radial-gradient(2px 2px at 582px 169px, rgba(245, 229, 138, 0.55) 50%, transparent 55%) 0 0 / 701px 479px,
    radial-gradient(1.5px 1.5px at 705px 231px, rgba(124, 196, 255, 0.7) 50%, transparent 55%) 0 0 / 743px 421px,
    radial-gradient(2px 2px at 346px 428px, rgba(124, 196, 255, 0.66) 50%, transparent 55%) 0 0 / 797px 463px;
  color-scheme: dark;
}

@media (max-width: 600px) {
  :root { --gutter: 16px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--night);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  font: 400 17px/1.65 var(--body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; }
p, li { text-wrap: pretty; }
a { color: var(--cream); text-underline-offset: 3px; }
a:hover { color: var(--gold); }
button { font: inherit; }
strong { font-weight: 700; color: var(--ink); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
}
.skip:focus { top: 12px; color: var(--gold-ink); }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------- Backdrop ---------- */
/* The night sky behind every page: a deep navy gradient, lighter towards the horizon, with the star field on top.
   Fixed, so it stays put while the page scrolls. On inner pages it is dimmed, so the content leads. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--stars),
    radial-gradient(90% 60% at 50% 108%, color-mix(in srgb, var(--panel-2) 85%, transparent), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 58%, var(--panel) 100%);
}
html[data-page]:not([data-page="home"]) body::before { opacity: 0.6; }

/* ---------- Glass ---------- */
/* The large rounded panel that holds an inner page's content. */
.panel {
  width: calc(100% - 2 * var(--gutter));
  max-width: 1040px;
  margin: 8px auto 0;
  padding: clamp(20px, 4vw, 44px);
  background: var(--glass);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ---------- Buttons ---------- */
/* Gold button with a block-style bevel. */
.btn {
  display: inline-grid;
  place-items: center;
  min-height: 48px;
  padding: 0 22px;
  font: 700 15px/1 var(--display);
  letter-spacing: 0.04em;
  color: var(--gold-ink);
  background: var(--gold);
  border: 2px solid var(--gold-ink);
  border-radius: 6px;
  box-shadow:
    inset 0 -4px 0 color-mix(in srgb, var(--gold) 68%, var(--gold-ink)),
    inset 0 2px 0 color-mix(in srgb, var(--gold) 55%, var(--ink)),
    0 8px 22px -8px color-mix(in srgb, var(--gold) 50%, transparent);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 82%, var(--ink)); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--gold) 68%, var(--gold-ink)); }
.btn[disabled], .btn[aria-disabled="true"] { cursor: default; color: var(--muted); background: var(--panel-2); border-color: var(--line-2); box-shadow: none; }

/* ---------- Top bar ---------- */
/* Home: the chips alone, top right. Inner pages: the small wordmark on top of the centre as well. */
.topbar {
  position: relative;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  min-height: var(--bar-h);
  padding: 12px max(var(--gutter), env(safe-area-inset-right, 0px)) 12px max(var(--gutter), env(safe-area-inset-left, 0px));
}

/* The wordmark may shrink to just its mark: when the name doesn't fit beside the chips (the smallest phones, longer
   Turkish labels), it wraps onto a second line, which the fixed height hides. The bar never overflows. */
.topbrand {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  column-gap: 10px;
  height: 28px;
  overflow: hidden;
  color: var(--gold);
  text-decoration: none;
  text-shadow: 0 2px 14px rgba(0 0 0 / 0.7);
}
.topbrand:hover { color: var(--cream); }
.topbrand:focus-visible { outline-offset: -2px; border-radius: 6px; }
.topbrand .brand-mark { width: 24px; height: 24px; flex: none; }
.brand-name { font: 700 15px/24px var(--display); letter-spacing: 0.02em; white-space: nowrap; }

.chips { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  font: 600 14px/1 var(--body);
  letter-spacing: 0.02em;
  color: var(--soft);
  background: var(--glass);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  list-style: none;
}
.chip::-webkit-details-marker { display: none; }
.chip:hover,
.chip:focus-visible,
details[open] > .chip {
  color: var(--gold);
  background: var(--glass-hi);
  border-color: color-mix(in srgb, var(--gold) 60%, var(--line-2));
}
.chip-icon { width: 40px; padding: 0; }
.chip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lite-toggle[aria-pressed="true"] { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 60%, var(--line-2)); background: color-mix(in srgb, var(--gold) 14%, var(--glass)); }
/* The language and lite chips ship hidden (they need JavaScript). When it is coming (html.js, which early.js sets
   before the first paint) they hold their place, unseen, from the first paint, so the chips beside them and the
   wordmark do not jump when i18n.js and shell.js show them. Without JavaScript they take no room at all. */
.js .lang-switch[hidden],
.js .lite-toggle[hidden] { display: inline-flex !important; visibility: hidden; }

/* ---------- Menus ---------- */
/* More (desktop) and the burger (phones) are both <details>, so they open without JavaScript. */
.dropdown, .burger { position: relative; }
.burger { display: none; }

.dropdown-toggle::after {
  content: "";
  margin-left: 10px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
}
.dropdown[open] > .dropdown-toggle::after { transform: rotate(180deg); }

.dropdown-menu, .phone-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--glass-menu);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-deep);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.dropdown-menu a, .phone-menu a {
  display: block;
  padding: 11px 14px;
  font: 600 15px/1.2 var(--body);
  color: var(--soft);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.dropdown-menu a:hover, .dropdown-menu a:focus-visible,
.phone-menu a:hover, .phone-menu a:focus-visible {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  outline-offset: -2px;
}
.dropdown-menu a[aria-current="page"], .phone-menu a[aria-current="page"] {
  color: var(--gold);
  box-shadow: inset 3px 0 0 var(--gold);
}

/* ---------- Hub ---------- */
/* The home page: the wordmark, the tagline pill, four glass cards and the address line, centred in the first
   screen, with the bottom line along its lower edge (the footer follows below). #sky is the mount point of the
   animated sky (sky.js fills it, motion.css moves it); without it the page is the still sky of body::before. */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(100vh - var(--bar-h) - 8px);
  min-height: calc(100svh - var(--bar-h) - 8px);
  padding: clamp(8px, 2.5vh, 32px) max(var(--gutter), env(safe-area-inset-right, 0px)) clamp(24px, 6vh, 64px) max(var(--gutter), env(safe-area-inset-left, 0px));
  text-align: center;
}

/* The wordmark: the pixel island over the name, in gold with a hard pixel shadow and a soft glow under it.
   The name stays on one line: Silkscreen bold is 0.875em a letter, so "SkyTycoonCraft" with its spacing is about
   12.4em wide, and the size follows the width between the gutters (72 px, a whole number of font pixels, at most). */
.wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.6vh, 16px);
  max-width: 100%;
  font: 700 clamp(20px, calc((100vw - 2 * var(--gutter)) / 12.8), 72px)/1.1 var(--display);
  letter-spacing: 0.01em;
  color: var(--gold);
  text-shadow:
    0.0625em 0.0625em 0 color-mix(in srgb, var(--gold) 34%, var(--gold-ink)),
    0 0.2em 0.6em rgba(0 0 0 / 0.6);
}
.wordmark .brand-mark {
  width: clamp(60px, 11vh, 108px);
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(0 0 0 / 0.55));
}
.wordmark-name { white-space: nowrap; }

/* The tagline: a glass pill with a thin gold-to-cream edge along its top. */
.tagline {
  position: relative;
  max-width: 100%;
  margin-top: clamp(14px, 2.6vh, 26px);
  padding: 9px 22px 10px;
  font: 600 15px/1.35 var(--body);
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.tagline::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 20px;
  right: 20px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--cream) 50%, var(--gold) 78%, transparent);
}

/* The cards: 2 x 2 on phones and tablets, one row of four from 1000 px. Each has its own accent colour for the
   icon badge and the thin edge along its top. Cards that are not live yet ([aria-disabled]) stay put on hover,
   their badge fades and their subtitle becomes a small "Coming soon" tag. Hover, press and focus are still states
   here; motion.css eases between them. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 1000px;
  margin: clamp(20px, 4.4vh, 44px) 0 0;
  padding: 0;
  list-style: none;
}
.cards > li { display: flex; min-width: 0; }

.card {
  --accent: var(--green);
  --accent-hi: color-mix(in srgb, var(--accent) 55%, var(--ink));
  container-type: inline-size; /* the title and the tag size themselves to the card */
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 22px 14px 20px;
  font: inherit;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  background: linear-gradient(180deg, var(--glass-hi), var(--glass));
  border: 1px solid var(--line-2);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  right: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 25%, var(--accent-hi) 50%, var(--accent) 75%, transparent);
}
.card-join { --accent: var(--green); }
.card[data-card="discord"] { --accent: var(--end); }
.card-lb { --accent: var(--nether); --accent-hi: var(--gold); }
.card[data-card="shop"] { --accent: var(--sky); }

/* Lifted: on keyboard focus, and on hover where there is a real pointer (a tap would leave a phone's card stuck up). */
.card:not([aria-disabled="true"]):focus-visible {
  color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 94%, transparent), var(--glass-hi));
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line-2));
  box-shadow: var(--shadow-deep), 0 0 28px -10px color-mix(in srgb, var(--accent) 60%, transparent);
  transform: translateY(-4px);
}
@media (hover: hover) {
  .card:not([aria-disabled="true"]):hover {
    color: var(--ink);
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 94%, transparent), var(--glass-hi));
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line-2));
    box-shadow: var(--shadow-deep), 0 0 28px -10px color-mix(in srgb, var(--accent) 60%, transparent);
    transform: translateY(-4px);
  }
}
.card:not([aria-disabled="true"]):active {
  border-color: color-mix(in srgb, var(--accent) 75%, var(--line-2));
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.card-badge {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 12px;
  color: var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, color-mix(in srgb, var(--accent-hi) 75%, transparent), transparent 55%),
    linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 42%, var(--night)));
  box-shadow:
    inset 0 2px 0 color-mix(in srgb, var(--ink) 30%, transparent),
    inset 0 -3px 0 color-mix(in srgb, var(--accent) 30%, var(--night)),
    0 10px 22px -10px color-mix(in srgb, var(--accent) 85%, transparent);
}
.icon-draw {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0 0 0 / 0.45));
}

/* "Leaderboards", the longest word, is about 10.3em in Silkscreen bold: 9.4% of the card's inner width keeps it
   on one line from the 138 px cards of a 320 px phone up. */
.card-title {
  font: 700 clamp(11px, 9.4cqi, 16px)/1.3 var(--display);
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.card-sub {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--soft);
  text-wrap: balance;
}

.card[aria-disabled="true"] {
  cursor: default;
  background: linear-gradient(180deg, var(--glass), color-mix(in srgb, var(--panel) 52%, transparent));
  border-color: var(--line);
}
.card[aria-disabled="true"]::before { opacity: 0.4; }
.card[aria-disabled="true"] .card-badge {
  opacity: 0.5;
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--ink) 18%, transparent);
}
.card[aria-disabled="true"] .card-title { color: var(--soft); }
.card[aria-disabled="true"] .card-sub {
  max-width: 100%;
  margin-top: 8px;
  padding: 3px 10px;
  font-size: clamp(10px, 7.4cqi, 11.5px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--soft);
  background: color-mix(in srgb, var(--line) 50%, transparent);
  border: 1px dashed var(--line-2);
  border-radius: 999px;
}

/* The address under the cards, selectable without JavaScript (one click selects all of it), and the facts. */
.address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin-top: clamp(18px, 3.6vh, 34px);
  font-size: 14px;
  color: var(--muted);
}
.address code {
  padding: 5px 14px 6px;
  font: 400 16px/1.35 var(--mono);
  letter-spacing: 0.04em;
  color: var(--cream);
  background: color-mix(in srgb, var(--night) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line-2));
  border-radius: 8px;
  -webkit-user-select: all;
  user-select: all;
}
/* Wide enough for the Turkish line on one line in the fallback font too, so the hub does not move when Figtree arrives. */
.facts {
  max-width: 72ch;
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: balance;
}

/* On the home page the bottom line closes the first screen, in gold, sky and End purple. */
html[data-page="home"] .bottom-line {
  height: 2px;
  margin-top: 0;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--sky) 50%, var(--end) 82%, transparent);
  opacity: 0.85;
}

@media (min-width: 1000px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 420px) {
  .cards { gap: 10px; }
  .card { padding: 18px 10px 16px; border-radius: 16px; }
  .card::before { left: 16px; right: 16px; }
  .card-badge { width: 48px; height: 48px; margin-bottom: 10px; }
  .icon-draw { width: 24px; height: 24px; }
  .card-sub { font-size: 13px; }
}

/* ---------- Inner pages ---------- */
/* Rules, Vote and the 404 page share one header inside the glass panel (.panel above): a small gold eyebrow in the
   address font with wide letter-spacing, a big display title and a muted one-line subtitle. Nothing here moves;
   the page-in class on <main> is a hook for motion.css. */
.panel-narrow { max-width: 640px; text-align: center; }

.eyebrow {
  font: 400 15px/1.3 var(--mono);
  letter-spacing: 0.24em;
  color: var(--gold);
}
.title {
  margin-top: 10px;
  font: 700 clamp(24px, calc(4.6vw + 6px), 44px)/1.15 var(--display);
  letter-spacing: 0.01em;
  color: var(--ink);
  text-shadow: 0 0.12em 0.5em rgba(0 0 0 / 0.5);
}
.subtitle {
  max-width: 60ch;
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
}
.panel-narrow .subtitle { margin-inline: auto; }

/* Tabs: pill buttons (or links); the selected one has a gold border. They are real buttons, so Tab, Enter and
   Space work; the Rules script adds the arrow keys. */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  font: 600 15px/1 var(--body);
  letter-spacing: 0.02em;
  color: var(--soft);
  text-decoration: none;
  background: var(--glass);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .tab:hover {
    color: var(--gold);
    background: var(--glass-hi);
    border-color: color-mix(in srgb, var(--gold) 60%, var(--line-2));
  }
}
.tab[aria-selected="true"], .tab[aria-current="page"],
.rule-groups > .tabs > .tab:first-child:not([aria-selected]) { /* the Rules tabs, until the script has marked one */
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, var(--glass));
  border-color: var(--gold);
}

/* Rules: the three groups stack, each under its heading, and the tab bar is left out (no JavaScript, or the script
   failed: main.js takes html.js off). With html.js, which early.js adds before the first paint, the page starts in
   its tab layout: the bar shows, the headings go (the tabs name the groups) and only the group with .is-active
   shows, the first one in the markup. rules.js turns the buttons into tabs and moves .is-active, so nothing moves
   when it runs. The rules are a numbered list with a small gold badge for each number. */
.rule-groups { margin-top: 28px; }
.rule-group + .rule-group { margin-top: 36px; }
html:not(.js) .rule-groups > .tabs { display: none; }
.js .rule-title { display: none; }
.js .rule-group { margin-top: 20px; }
.js .rule-group:not(.is-active) { display: none; }
.rule-title {
  font: 700 18px/1.3 var(--display);
  letter-spacing: 0.02em;
  color: var(--cream);
}
.rules {
  counter-reset: rule;
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.js .rule-group > .rules { margin-top: 0; }
.rules li {
  counter-increment: rule;
  position: relative;
  min-height: 44px;
  padding: 8px 0 8px 54px;
  color: var(--soft);
}
.rules li::before {
  content: counter(rule);
  position: absolute;
  left: 0;
  top: 4px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font: 700 14px/1 var(--display);
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, var(--night));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line-2));
  border-radius: 8px;
}
.rule-note {
  margin-top: 14px;
  padding: 12px 16px;
  color: var(--soft);
  background: color-mix(in srgb, var(--line) 40%, transparent);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
}
.appeal {
  margin-top: 28px;
  padding-top: 20px;
  font-size: 15px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* Vote: one card per voting site (the name and a gold VOTE button), or the "soon" line, in a slot that is as tall
   as one card, so the page below does not jump when the list arrives. Then the rules box. */
.vote-slot { min-height: 84px; margin-top: 28px; }
.vote-sites {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vote-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  min-width: 0;
  min-height: 84px;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--glass-hi), var(--glass));
  border: 1px solid var(--line-2);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}
.vote-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  right: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--cream) 50%, var(--gold) 75%, transparent);
}
.vote-name {
  flex: 1 1 120px;
  min-width: 0;
  font: 700 17px/1.3 var(--body);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.vote-card .btn { flex: none; }
.vote-empty {
  display: grid;
  place-items: center;
  min-height: 84px;
  padding: 16px 20px;
  color: var(--soft);
  text-align: center;
  background: color-mix(in srgb, var(--line) 30%, transparent);
  border: 1px dashed var(--line-2);
  border-radius: 18px;
}
.vote-rules {
  margin-top: 28px;
  padding: 22px clamp(16px, 3vw, 28px);
  background: color-mix(in srgb, var(--night) 45%, transparent);
  border: 1px solid var(--line-2);
  border-radius: 18px;
}
.box-title {
  font: 700 16px/1.3 var(--display);
  letter-spacing: 0.02em;
  color: var(--cream);
}
.vote-list { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.vote-list li { position: relative; padding-left: 28px; color: var(--soft); }
.vote-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 10px;
  height: 10px;
  background: var(--gold);
  box-shadow: inset -2px -2px 0 color-mix(in srgb, var(--gold) 55%, var(--gold-ink));
}
.vote-list code {
  padding: 1px 8px 2px;
  font: 400 16px/1.4 var(--mono);
  color: var(--cream);
  background: color-mix(in srgb, var(--night) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line-2));
  border-radius: 6px;
}

/* This month's top voters (boards.js fills section#top-voters once the leaderboard feed has them; it stays hidden
   otherwise): a box like the rules box, the top 10 in one column, two from 720 px (read down, then across). */
.top-voters {
  margin-top: 28px;
  padding: 22px clamp(16px, 3vw, 28px);
  background: color-mix(in srgb, var(--night) 45%, transparent);
  border: 1px solid var(--line-2);
  border-radius: 18px;
}
.tv-updated { margin-top: 4px; font-size: 14px; color: var(--muted); }
.tv-list { margin: 14px 0 0; padding: 0; list-style: none; }
.tv-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 6px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--night) 40%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  break-inside: avoid;
}
.tv-rank { font: 700 14px/1 var(--display); color: var(--gold); }
.tv-name { overflow: hidden; font-weight: 600; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.tv-votes { color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tv-more { margin-top: 10px; font-size: 15px; }
@media (min-width: 720px) {
  .tv-list { columns: 2; column-gap: 12px; }
}

/* ---------- Leaderboards ---------- */
/* /leaderboards/, /leaderboards/skyblock/ and /leaderboards/server/: the inner page header, the mode tabs (links), then
   the category list on the left (a select on phones) and the board: its title, the search box, the status line
   (p.updated, the live region) and the view (podium for places 1 to 3, the table from 4, "Show more").
   The page ships in its loading shape: under html.js (early.js adds it before the first paint) the board area
   (.lb-data) is as tall as the full board from the start (--lb-reserve: the tallest status line, the podium, the
   table head and 22 rows, the "Show more" button) and the skeleton has the real heights, so nothing moves when the
   data arrives. The "no data" and "no ranking yet" messages do NOT keep that room (the page would be a big box of
   empty glass under one line, and at launch that is every visit): they shrink to the message box, and the footer
   moves up once when the page gives up waiting. Every height below feeds that sum; keep them in step. Without JavaScript (or when boards.js fails and main.js takes html.js off) only "Leaderboards need
   JavaScript." shows under the mode tabs. Nothing here moves: .row-in, .skeleton and .spinner belong to motion.css. */
.lb {
  --lb-gap: 16px;
  --lb-status: 64px; /* the status line at its tallest: the stale note on two lines */
  --lb-podium: 212px; /* 16 px of room for the crown, then the tallest place */
  --lb-place-1: 196px;
  --lb-place-2: 174px;
  --lb-place-3: 162px;
  --lb-thead: 42px;
  --lb-row: 50px;
  --lb-more: 48px;
  --lb-message: 180px;
  --lb-reserve: calc(var(--lb-status) + 2 * var(--lb-gap) + var(--lb-podium) + 2px + var(--lb-thead) + 22 * var(--lb-row) + var(--lb-gap) + var(--lb-more));
}

.lb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 28px;
}

/* The category list: a vertical menu; the board on show has the gold bar. Phones get the select (.lb-pick) instead. */
.lb-side-title {
  margin: 0 0 8px 12px;
  font: 400 13px/1.3 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.lb-cats { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lb-cat {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font: 600 15px/1.3 var(--body);
  color: var(--soft);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lb-cat:hover,
.lb-cat:focus-visible { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.lb-cat:focus-visible { outline-offset: -2px; }
.lb-cat[aria-pressed="true"] {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--gold);
}

/* The labelled fields (the phone select and the search box), like the wiki's selects. */
.lb-field label {
  display: block;
  margin: 0 0 6px 2px;
  font: 400 13px/1.3 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.lb-field select,
.lb-field input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  font: 600 16px/1.3 var(--body);
  color: var(--ink);
  background: color-mix(in srgb, var(--night) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 60%, var(--line-2)); /* 4:1 and better on the page and the panels (WCAG 1.4.11 asks 3:1) */
  border-radius: var(--radius-sm);
}
.lb-field select:focus-visible,
.lb-field input:focus-visible { border-color: var(--gold); }
.lb-field input:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.6; }
.lb-pick { display: none; }

.lb-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
}
.lb-board-title {
  min-width: 0;
  font: 700 20px/1.3 var(--display);
  letter-spacing: 0.02em;
  color: var(--cream);
}
.lb-search { flex: 0 1 280px; min-width: 0; }

/* The board area and its status line. The line is the live region: "Updated 4 min ago", the stale note, or, in a big
   box, "Leaderboards open soon" / "No ranking yet. Be the first.". With nothing to show, that box is all there is:
   the reserved height is given up (loading, ok and stale keep it, which is what keeps the layout still when data
   arrives). */
.lb-data { margin-top: 20px; }
.js .lb-data { min-height: var(--lb-reserve); }
.js .lb-data[data-state="no-data"],
.js .lb-data[data-state="empty"] { min-height: 0; }
.lb-data > .updated {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.lb-data[data-state="stale"] > .updated {
  padding: 8px 14px;
  color: var(--cream);
  background: color-mix(in srgb, var(--gold) 10%, var(--panel));
  border: 1px dashed color-mix(in srgb, var(--gold) 45%, var(--line-2));
  border-radius: var(--radius-sm);
}
.lb-data[data-state="no-data"] > .updated,
.lb-data[data-state="empty"] > .updated {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  min-height: var(--lb-message);
  padding: 24px 20px;
  font: 700 19px/1.4 var(--body);
  color: var(--cream);
  text-align: center;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px dashed var(--line-2);
  border-radius: 18px;
}
/* A small pixel trophy over the message, drawn with box-shadow pixels (4 px each) from a 4 px corner. */
.lb-data[data-state="no-data"] > .updated::before,
.lb-data[data-state="empty"] > .updated::before {
  content: "";
  width: 4px;
  height: 4px;
  margin: 0 24px 24px 0;
  box-shadow:
    4px 0 var(--gold), 8px 0 var(--cream), 12px 0 var(--gold), 16px 0 var(--gold), 20px 0 var(--gold),
    0 4px var(--gold), 4px 4px var(--gold), 8px 4px var(--gold), 12px 4px var(--gold), 16px 4px var(--gold), 20px 4px var(--gold), 24px 4px var(--gold),
    0 8px var(--gold), 8px 8px var(--gold), 12px 8px var(--gold), 16px 8px var(--gold), 24px 8px var(--gold),
    8px 12px var(--gold), 12px 12px var(--gold), 16px 12px var(--gold),
    12px 16px var(--gold),
    8px 20px var(--gold), 12px 20px var(--gold), 16px 20px var(--gold),
    4px 24px color-mix(in srgb, var(--gold) 60%, var(--gold-ink)), 8px 24px color-mix(in srgb, var(--gold) 60%, var(--gold-ink)),
    12px 24px color-mix(in srgb, var(--gold) 60%, var(--gold-ink)), 16px 24px color-mix(in srgb, var(--gold) 60%, var(--gold-ink)),
    20px 24px color-mix(in srgb, var(--gold) 60%, var(--gold-ink));
}

/* "No player found." when the search matches no one (empty, it takes no room). */
.lb-found:not(:empty) {
  margin-top: var(--lb-gap);
  padding: 20px;
  color: var(--soft);
  text-align: center;
  background: color-mix(in srgb, var(--line) 30%, transparent);
  border: 1px dashed var(--line-2);
  border-radius: 18px;
}

/* Without JavaScript, or when boards.js failed: one line instead of the board. */
.lb-nojs { display: none; }
html:not(.js) .lb-nojs {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 20px;
  color: var(--soft);
  text-align: center;
  background: color-mix(in srgb, var(--line) 30%, transparent);
  border: 1px dashed var(--line-2);
  border-radius: 18px;
}
html:not(.js) .lb-layout { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .lb-side,
html:not(.js) .lb-top,
html:not(.js) .lb-data > .updated,
html:not(.js) .lb-found,
html:not(.js) .lb-view { display: none; }

/* Heads: the player's head image, or the pixel avatar (svg.avatar) in the same box when it fails. */
.lb-head {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  overflow: hidden;
  background: color-mix(in srgb, var(--night) 60%, transparent);
  border-radius: 6px;
}
.lb-head > img,
.lb-head > svg { display: block; width: 100%; height: 100%; }
.lb-head > img { image-rendering: pixelated; }
.avatar { color: var(--gold); }
.avatar-gold { color: var(--gold); }
.avatar-sky { color: var(--sky); }
.avatar-green { color: var(--green); }
.avatar-nether { color: var(--nether); }
.avatar-end { color: var(--end); }
.avatar-cream { color: var(--cream); }
.avatar .avatar-bg { fill: color-mix(in srgb, currentColor 16%, var(--night)); }
.avatar .avatar-on { fill: currentColor; }

/* The podium: second, first, third, left to right, as steps; first is the tallest and wears the pixel crown. Gold
   for first, silver for second, bronze for third. Names longer than the step end in an ellipsis. */
.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  height: var(--lb-podium);
  margin: var(--lb-gap) 0 0;
  padding: 16px 0 0;
  list-style: none;
}
.podium-place {
  --accent: var(--soft);
  --head: 56px;
  position: relative;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 16px 8px 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--panel-2)), color-mix(in srgb, var(--panel) 50%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line-2));
  border-radius: 16px 16px 6px 6px;
  box-shadow: var(--shadow-soft);
}
.podium-place::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 25%, color-mix(in srgb, var(--accent) 55%, var(--ink)) 50%, var(--accent) 75%, transparent);
}
.place-1 { --accent: var(--gold); --head: 72px; grid-column: 2; height: var(--lb-place-1); }
.place-2 { --accent: var(--soft); grid-column: 1; height: var(--lb-place-2); }
.place-3 { --accent: color-mix(in srgb, var(--nether) 55%, var(--gold)); grid-column: 3; height: var(--lb-place-3); }
.podium-head {
  width: var(--head);
  height: var(--head);
  border-radius: 10px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), var(--shadow-soft);
}
.podium-rank {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  font: 700 14px/1 var(--display);
  color: var(--gold-ink);
  background: var(--accent);
  border: 2px solid var(--night);
  border-radius: 7px;
}
.podium-name,
.podium-value {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.podium-name { margin-top: 8px; font: 700 16px/22px var(--body); color: var(--ink); }
.podium-value { margin-top: 2px; font: 700 15px/22px var(--body); color: var(--accent); font-variant-numeric: tabular-nums; }
.podium-line { display: block; width: 70%; height: 14px; margin-top: 12px; }
.podium-line-short { width: 45%; margin-top: 10px; }
.podium-crown {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 36px;
  height: 24px;
  margin-left: -18px;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.5));
}
.crown-body { fill: var(--gold); }
.crown-shine { fill: var(--cream); }
.crown-shade { fill: color-mix(in srgb, var(--gold) 60%, var(--gold-ink)); }
.crown-gem { fill: var(--nether); }
.crown-gem-mid { fill: var(--sky); }

/* The table, ranks 4 to 25 (to 50 after "Show more"; any rank while searching). The name column takes the room that
   is left and cuts long names with an ellipsis; the box scrolls sideways only if a value is wider than the screen. */
.lb-scroll {
  margin-top: var(--lb-gap);
  overflow-x: auto;
  background: color-mix(in srgb, var(--night) 45%, transparent);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
}
.lb-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lb-table th,
.lb-table td {
  height: var(--lb-row);
  padding: 0 14px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.lb-table thead th {
  height: var(--lb-thead);
  font: 400 13px/1.3 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: normal; /* "Island owners" and "Island level" take two lines on a small phone rather than overlap */
  border-bottom-color: var(--line-2);
}
.lb-table tbody tr:last-child > * { border-bottom: 0; }
.lb-table .lb-rank { width: 1%; padding-right: 4px; text-align: right; }
.lb-table tbody .lb-rank { font: 400 15px/1 var(--mono); color: var(--soft); }
.lb-table .lb-name { width: 100%; max-width: 0; }
.lb-table tbody .lb-name { font-weight: 600; color: var(--ink); }
.lb-table .lb-value { text-align: right; }
.lb-table tbody .lb-value { color: var(--cream); font-variant-numeric: tabular-nums; }
.lb-table tbody tr:hover > * { background: color-mix(in srgb, var(--gold) 5%, transparent); }
.lb-table tr:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.lb-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lb-sk { display: inline-block; height: 12px; vertical-align: middle; }
.lb-sk-rank { width: 20px; }
.lb-sk-name { width: 140px; }
.lb-sk-value { width: 90px; }
.lb-more-slot { display: flex; justify-content: center; margin-top: var(--lb-gap); }
.lb-sk-more { width: 180px; height: var(--lb-more); }

@media (min-width: 800px) {
  .lb-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
  .lb-side {
    padding: 16px 10px;
    background: color-mix(in srgb, var(--night) 45%, transparent);
    border: 1px solid var(--line-2);
    border-radius: 18px;
  }
}
@media (max-width: 799px) {
  .lb-side-title, .lb-cats { display: none; }
  .lb-pick { display: block; }
  .lb-search { flex: 1 1 100%; }
}
@media (max-width: 599px) {
  .lb {
    --lb-status: 88px; /* the stale note on three lines */
    --lb-podium: 204px; /* the steps have room for a value on two lines */
    --lb-place-1: 188px;
    --lb-place-2: 170px;
    --lb-place-3: 160px;
    --lb-row: 48px;
  }
  .podium { gap: 8px; }
  .podium-place { --head: 44px; padding: 14px 6px 0; }
  .place-1 { --head: 56px; }
  .podium-name, .podium-value { font-size: 14px; line-height: 20px; }
  /* A narrow step may break a long value ("Level 1,000") onto a second line, never a third. */
  .podium-value {
    display: -webkit-box;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .lb-table { font-size: 14px; }
  .lb-table th, .lb-table td { padding: 0 10px; }
  .lb-table .lb-rank { padding-right: 2px; }
  .lb-sk-name { width: 100px; }
  .lb-sk-value { width: 64px; }
}

/* 404: a narrow panel, centred, with the way home. */
.actions { margin-top: 28px; }

/* A command or an address inside a sentence, in the address font on a dark chip. It wraps rather than overflow. */
.cmd {
  padding: 1px 8px 2px;
  font: 400 15px/1.4 var(--mono);
  color: var(--cream);
  overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--night) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line-2));
  border-radius: 6px;
}
.cmd-address { -webkit-user-select: all; user-select: all; } /* one click selects the whole address */

/* ---------- Wiki ---------- */
/* Every wiki page is two glass cards side by side from 900 px: the page list (aside.wiki-nav, sticky) on the left and
   the page (article.wiki-page) on the right. Below that they stack. The list is always there as links; once wiki.js
   has added the two selects (div.wiki-select, .has-select on the layout) phones get those instead of the list. The
   Turkish note (p.wiki-note) is shown by the language switch in Turkish only. */
.wiki-note,
.wiki-layout {
  width: calc(100% - 2 * var(--gutter));
  max-width: 1160px;
  margin-inline: auto;
}
.wiki-note {
  margin-top: 8px;
  padding: 10px 16px;
  font-size: 15px;
  color: var(--soft);
  background: color-mix(in srgb, var(--line) 40%, transparent);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
}
.wiki-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.wiki-nav,
.wiki-page {
  min-width: 0;
  background: var(--glass);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.wiki-nav { padding: 20px 18px; }
.wiki-page { padding: clamp(20px, 4vw, 44px); }

/* The page list: a small gold heading per category and a link per page; the current page has the gold bar. */
.wiki-cat {
  margin: 0 0 6px 10px;
  font: 400 13px/1.3 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.wiki-links ul { margin: 0 0 18px; padding: 0; list-style: none; }
.wiki-links ul:last-child { margin-bottom: 0; }
.wiki-links a {
  display: block;
  padding: 9px 12px;
  font: 600 15px/1.3 var(--body);
  color: var(--soft);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.wiki-links a:hover,
.wiki-links a:focus-visible {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  outline-offset: -2px;
}
.wiki-links a[aria-current="page"] {
  color: var(--gold);
  box-shadow: inset 3px 0 0 var(--gold);
}

/* The phone selects. */
.wiki-select {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 16px 18px;
  background: var(--glass);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.wiki-field label {
  display: block;
  margin: 0 0 6px 2px;
  font: 400 13px/1.3 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.wiki-field select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  font: 600 16px/1.3 var(--body);
  color: var(--ink);
  background: color-mix(in srgb, var(--night) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 60%, var(--line-2)); /* same 3:1 as the board fields */
  border-radius: var(--radius-sm);
}
.wiki-field select:focus-visible { border-color: var(--gold); }
/* The page select and its Go button share one row: the row is as tall as the select alone (48 px; the button stretches
   to it), so the box and the gap that keeps its place below do not change. */
.wiki-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.wiki-pick .wiki-go { padding: 0 18px; }
@media (min-width: 560px) and (max-width: 899px) {
  .wiki-select { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .wiki-layout.has-select > .wiki-nav { display: none; }
}
/* With html.js (early.js adds it before the first paint) a phone does not start with the list: wiki.js is about to
   put the selects there, so the list stays out and a gap as tall as the selects' box keeps their place, and nothing
   moves when they arrive. The box is a 1 px border and 16 px of padding around two fields, each a 13 px label at
   line-height 1.3, 6 px and a 48 px select, 12 px apart; from 560 px the fields share one row. If wiki.js fails,
   main.js takes html.js off and the list shows as it does without JavaScript. Keep these sums in step with
   .wiki-select, .wiki-field label and .wiki-field select above (the wiki check compares the gap with the box). */
@media (max-width: 899px) {
  .js .wiki-layout:not(.has-select) > .wiki-nav { display: none; }
  .js .wiki-layout:not(.has-select)::before {
    content: "";
    height: calc(2 * (13px * 1.3 + 6px + 48px) + 12px + 2 * 16px + 2px);
  }
}
@media (min-width: 560px) and (max-width: 899px) {
  .js .wiki-layout:not(.has-select)::before { height: calc(13px * 1.3 + 6px + 48px + 2 * 16px + 2px); }
}
@media (min-width: 900px) {
  .wiki-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
  .wiki-nav { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
  .wiki-select { display: none; }
}

/* The page. The eyebrow and the title are the inner pages' own; here the eyebrow is also the way back to the
   overview. Text keeps a readable line length while tables may use the whole width. */
.wiki-page .eyebrow a { color: inherit; text-decoration: none; }
.wiki-page .eyebrow a:hover,
.wiki-page .eyebrow a:focus-visible { color: var(--cream); text-decoration: underline; }
.wiki-page > * { max-width: 72ch; }
.wiki-page > .wiki-scroll,
.wiki-page > .faq-list { max-width: none; }
.wiki-page .title { max-width: none; }
.wiki-lead {
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--soft);
}
.wiki-page h2 {
  margin-top: 40px;
  font: 700 20px/1.3 var(--display);
  letter-spacing: 0.02em;
  color: var(--cream);
}
.wiki-page h3 {
  margin-top: 28px;
  font: 700 16px/1.3 var(--display);
  letter-spacing: 0.02em;
  color: var(--cream);
}
.wiki-page h2 + *,
.wiki-page h3 + * { margin-top: 14px; }
.wiki-page p:not(.eyebrow) { margin-top: 14px; color: var(--soft); }
.wiki-page .title + .wiki-lead { margin-top: 12px; }
.wiki-page ul:not(.wiki-index),
.wiki-page ol.wiki-steps { margin-top: 14px; }
.wiki-page ul:not(.wiki-index) { display: grid; gap: 10px; padding: 0; list-style: none; }
.wiki-page ul:not(.wiki-index) > li { position: relative; padding-left: 28px; color: var(--soft); }
.wiki-page ul:not(.wiki-index) > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 10px;
  height: 10px;
  background: var(--gold);
  box-shadow: inset -2px -2px 0 color-mix(in srgb, var(--gold) 55%, var(--gold-ink));
}

/* The overview: a link and a line about the page, one row per page. */
.wiki-index { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.wiki-index li {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--night) 45%, transparent);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
}
.wiki-index a { font: 700 17px/1.3 var(--body); }
.wiki-index span { color: var(--soft); }

/* Tables and code scroll sideways inside their own box, never the page. A box that scrolls can take focus, so the
   keyboard can reach what is off to the side. */
.wiki-scroll {
  margin-top: 16px;
  overflow-x: auto;
  background: color-mix(in srgb, var(--night) 45%, transparent);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
}
.wiki-scroll table { width: 100%; border-collapse: collapse; font-size: 15px; }
.wiki-scroll th,
.wiki-scroll td { padding: 10px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.wiki-scroll thead th { font: 700 13px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); border-bottom-color: var(--line-2); }
.wiki-scroll tbody th { font-weight: 700; color: var(--ink); }
.wiki-scroll td { color: var(--soft); }
/* A table of sentences (table.wiki-prose) wraps its cells; a table of numbers and short names scrolls instead. */
.wiki-scroll .wiki-prose td { white-space: normal; }
.wiki-scroll tbody tr:last-child > * { border-bottom: 0; }
.wiki-scroll pre { margin: 0; padding: 14px 16px; font: 400 15px/1.5 var(--mono); color: var(--cream); }

/* The command sheet (dl.wiki-cmds): one row per command or small group, the commands on the left and what they do on
   the right; on a phone the description sits under the commands. Long text wraps, so nothing scrolls sideways. */
.wiki-cmds {
  margin-top: 14px;
  background: color-mix(in srgb, var(--night) 45%, transparent);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
}
.wiki-cmds > div {
  display: grid;
  gap: 8px 20px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.wiki-cmds > div:last-child { border-bottom: 0; }
.wiki-cmds dt { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; min-width: 0; }
.wiki-cmds dd { margin: 0; min-width: 0; color: var(--soft); }
@media (min-width: 640px) {
  .wiki-cmds > div { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: baseline; }
}

/* The FAQ: one box per question, opening with a plus. */
.faq-list { display: grid; gap: 10px; margin-top: 24px; }
.faq-list details {
  background: color-mix(in srgb, var(--night) 45%, transparent);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
}
.faq-list summary {
  position: relative;
  padding: 14px 52px 14px 16px;
  font: 700 17px/1.4 var(--body);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 12px;
  font: 700 22px/1.2 var(--display);
  color: var(--gold);
}
.faq-list details[open] > summary::after { content: "−"; }
.faq-list summary:hover { color: var(--gold); }
.faq-list summary:focus-visible { outline-offset: -3px; border-radius: var(--radius-sm); }
.faq-list details[open] > summary { color: var(--gold); }
.wiki-page .faq-list details > p { margin: 0; padding: 0 16px 16px; max-width: 72ch; }

/* Previous and next at the end of a page. A page that has only one of them keeps it on its own side. */
.wiki-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: none;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.wiki-pager a {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  text-decoration: none;
  background: color-mix(in srgb, var(--night) 45%, transparent);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
}
.wiki-pager a:hover,
.wiki-pager a:focus-visible { border-color: color-mix(in srgb, var(--gold) 60%, var(--line-2)); }
.wiki-prev { grid-column: 1; }
.wiki-next { grid-column: 2; text-align: right; }
.wiki-pager-dir { font: 400 13px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.wiki-pager-title { font: 700 17px/1.3 var(--body); color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .wiki-pager { grid-template-columns: minmax(0, 1fr); }
  .wiki-prev, .wiki-next { grid-column: 1; }
}

/* ---------- Footer ---------- */
.bottom-line {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--wrap);
  height: 1px;
  margin: 64px auto 0;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}
.footer { padding: 28px 0 40px; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; }
.footer-inner { display: grid; justify-items: center; gap: 12px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; margin: 0 0 4px; padding: 0; list-style: none; }
.footer-links a { display: block; padding: 8px 0; font-size: 14px; font-weight: 600; color: var(--soft); text-decoration: none; }
.footer-links a:hover, .footer-links a[aria-current="page"] { color: var(--gold); }
.disclaimer, .disclaimer-tr { max-width: 72ch; font-size: 11.5px; letter-spacing: 0.06em; }
.disclaimer-tr { letter-spacing: 0.02em; }
.copyright, .contact { font-size: 12.5px; }
.contact a { color: var(--soft); }
.contact a:hover { color: var(--gold); }

/* ---------- Toast ---------- */
/* One short message in gold-tinted glass at the bottom centre of the screen, above the bottom line. The script
   adds .show for about 2 s; motion.css fades and slides it. Hidden, it is only transparent and click-through, not
   visibility: hidden, so the status region stays in the accessibility tree and its message is announced. */
.toast {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: 11px 22px 12px;
  font: 600 15px/1.4 var(--body);
  color: var(--cream);
  text-align: center;
  text-wrap: balance;
  background: color-mix(in srgb, var(--gold) 14%, var(--glass-menu));
  border: 1px solid color-mix(in srgb, var(--gold) 60%, var(--line-2));
  border-radius: 999px;
  box-shadow: var(--shadow-deep), 0 0 26px -8px color-mix(in srgb, var(--gold) 50%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
}
.toast.show { opacity: 1; }

/* ---------- Turkish ---------- */
/* Silkscreen and DotGothic16 have no ğ, ş, ı or İ (and Silkscreen's i has no dot), so in Turkish (<html lang="tr">)
   the translated text set in them uses Pixelify Sans, a pixel font with the Turkish letters. The wordmark, numbers,
   address and commands read the same in both languages and keep their fonts. The element's own language counts
   (X:lang(tr), not :lang(tr) X), so English inside a Turkish page (the wiki's pages, lang="en") keeps its fonts. */
.btn:lang(tr),
.card-title:lang(tr),
.eyebrow:lang(tr),
.title:lang(tr),
.rule-title:lang(tr),
.box-title:lang(tr),
.lb-board-title:lang(tr),
.lb-side-title:lang(tr),
.lb-field label:lang(tr),
.lb-table thead th:lang(tr) { font-family: var(--display-tr); }
/* A wiki page is not translated yet; in Turkish its note shows from the first paint (early.js sets <html lang>
   before it), so the page does not move down when i18n.js takes the note's hidden attribute off. */
html[lang="tr"] .wiki-note[hidden] { display: block !important; }

/* ---------- Phones ---------- */
@media (max-width: 900px) {
  .dropdown { display: none; }
  .burger { display: block; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .topbrand { grid-column: 1; justify-self: start; }
  .chips { grid-column: 2; }
  .chip { min-height: 44px; }
  .chip-icon { width: 44px; }
  .phone-menu { min-width: min(240px, calc(100vw - 2 * var(--gutter))); }
}