/* pelto.se/minecraft/: same world as the start page (home.css): paper and ink, Bricolage Grotesque, hairline rules,
   pill controls, automatic dark mode. Ore colours only where they mean something: green online, gold first place
   and weekly winners, teal playtime bars. Keep the shared tokens equal to home.css. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  color-scheme: light;
  --paper: #f2ede3;
  --ink: #1d1b17;
  --soft: #5e594f;
  --faint: #8c8577;
  --rule: #d6cebf;
  --wash: #e9e2d4;
  --track: #e0d8c9;
  --accent: #b03c17;
  --online: #25773f;
  --offline: #b23a2a;
  --gold: #8a5d0b;
  --diamond: #17707c;
  --sans: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --bar-height: 66px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #161512;
    --ink: #ece6da;
    --soft: #aaa293;
    --faint: #7d7668;
    --rule: #34302a;
    --wash: #211f1b;
    --track: #2a2722;
    --accent: #ef7148;
    --online: #6cc488;
    --offline: #f08a78;
    --gold: #e3b552;
    --diamond: #5cc8d4;
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-height) + 16px); scrollbar-color: var(--rule) var(--paper); accent-color: var(--accent); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.55 var(--sans); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
a, button, input, select, textarea, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.05; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.5vw, 2.75rem); letter-spacing: -.035em; font-variation-settings: "opsz" 72; }
h3 { font-size: 1.25rem; letter-spacing: -.015em; }
p { margin: 0; }
code { font-family: var(--mono); font-size: .9em; }
svg { width: 16px; height: 16px; flex: none; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon-ext { width: 14px; height: 14px; }
.wrap { width: min(1040px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 20; transform: translateY(-200%); padding: 10px 14px; background: var(--ink); color: var(--paper); }
.skip-link:focus { transform: none; }
.hint { margin: 6px 0 0; font-size: .8125rem; color: var(--soft); }
.panel-title { margin-bottom: 14px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 10; background: var(--paper); }
.bar .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 28px; padding-top: 12px; }
.bar .wrap::after { content: ""; grid-column: 1 / -1; height: 1px; margin-top: 12px; background: var(--ink); }
.wordmark { font-weight: 700; font-size: 1.6rem; letter-spacing: -.04em; text-decoration: none; font-variation-settings: "opsz" 96; }
.wordmark span { color: var(--accent); }
.tabs { position: relative; display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.tab-indicator { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--accent); pointer-events: none; }
.tabs.has-indicator a[aria-current="true"] { border-bottom-color: transparent; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; display: inline-flex; align-items: center; min-height: 40px; border-bottom: 2px solid transparent; color: var(--soft); font-size: .9375rem; font-weight: 500; text-decoration: none; }
.tabs a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .9375rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn-plain { border-color: var(--faint); background: transparent; color: var(--ink); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn:active:not(:disabled) { transform: scale(.97); }
.copy-button .icon-check, .copy-button.copied .icon-copy { display: none; }
.copy-button.copied .icon-check { display: block; stroke-width: 2.25; }
.copy-button.copied, .copy-button.copied:hover { border-color: var(--online); background: var(--online); color: var(--paper); }

/* ---------- status band ---------- */
.band { padding-top: clamp(36px, 7vw, 72px); }
.band-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; }
.band-head h1 { font-size: clamp(3rem, 9vw, 6rem); font-weight: 700; line-height: .9; letter-spacing: -.04em; font-variation-settings: "opsz" 96; }
.band-head h1 span { color: var(--accent); }
.server-status { display: flex; align-items: center; gap: 9px; margin-top: 16px; font-size: .9375rem; color: var(--soft); }
.status-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--faint); }
.server-status[data-state="online"] .status-dot { background: var(--online); }
.server-status[data-state="offline"] .status-dot { background: var(--offline); }
.address { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 4px 4px 4px 18px; border: 1px solid var(--faint); border-radius: 999px; }
.server-address { font-size: 1rem; }
.address .btn { min-height: 40px; padding: 0 16px; font-size: .875rem; }
/* Copy feedback floats in the gap below the address, so showing and clearing it moves nothing. */
.copy-status { position: absolute; top: calc(100% + 6px); right: 0; font-size: .8125rem; color: var(--soft); white-space: nowrap; pointer-events: none; }

.online-players { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); }
/* One reserved row (32 px avatars): players joining never push the page down. The row scrolls
   sideways when full and fades its edge while more are hidden (main.js sets data-more). */
.player-slot { display: grid; align-content: center; min-height: 32px; }
.player-list { display: flex; gap: 10px 28px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.player-list::-webkit-scrollbar { display: none; }
.player-list[data-more] { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.player-chip { display: flex; flex: none; align-items: center; gap: 10px; font-weight: 500; white-space: nowrap; }
.player-message { color: var(--soft); }
.player-message:empty { display: none; }
.player-avatar { position: relative; display: grid; place-items: center; width: 32px; height: 32px; flex: none; overflow: hidden; border-radius: 4px; background: var(--wash); color: var(--soft); font-size: .875rem; font-weight: 600; }
.player-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }

/* ---------- sections ---------- */
.block { padding-top: clamp(56px, 9vw, 96px); }
.section-head { position: relative; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; padding-bottom: 14px; }
.section-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform-origin: left center; }
.section-head p { color: var(--soft); font-size: .9375rem; }

/* segmented switch with one sliding indicator */
.segmented { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--faint); border-radius: 999px; }
.segmented::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--ink); }
/* No period is marked until the leaderboard has loaded (or the visitor picks one). */
.leaderboard-periods:not(:has([aria-pressed="true"]))::before { visibility: hidden; }
.leaderboard-periods:has(#leaderboard-all[aria-pressed="true"])::before, .edition-switch[data-edition="bedrock"]::before { transform: translateX(100%); }
.segmented button { position: relative; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font-size: .8125rem; font-weight: 600; cursor: pointer; }
.segmented button[aria-pressed="true"] { color: var(--paper); }

/* ---------- leaderboard ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.leaderboard-intro { margin: 0 0 20px; }
/* Rows and messages share one grid cell. index.html ships invisible placeholder rows and
   cards with the filled height, and messages sit over masked rows, so loading, failing and
   filling never change the height. */
.leaderboard-body, .winner-body { display: grid; }
.leaderboard-body > *, .winner-body > * { grid-area: 1 / 1; }
.leaderboard-body > .player-message, .winner-body > .player-message { align-self: start; }
.is-placeholder, .is-masked > li { visibility: hidden; }
.leaderboard-list { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.leaderboard-row { display: grid; grid-template-columns: 1.75rem 40px minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; }
.leaderboard-rank { font-size: 1.25rem; font-weight: 700; color: var(--soft); font-variant-numeric: tabular-nums; }
.leaderboard-row:first-child .leaderboard-rank { color: var(--gold); }
.leaderboard-row .player-avatar { width: 40px; height: 40px; }
.leaderboard-name { font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }
.leaderboard-time { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.leaderboard-meter, .leaderboard-detail { grid-column: 3 / 5; }
.leaderboard-meter { height: 6px; overflow: hidden; border-radius: 3px; background: var(--track); }
.leaderboard-meter span { display: block; height: 100%; border-radius: 3px; background: var(--diamond); transform-origin: left center; }
.leaderboard-row:first-child .leaderboard-meter span { background: var(--gold); }
.leaderboard-detail { font-size: .8125rem; color: var(--soft); }
.leaderboard-foot { display: grid; gap: 2px; margin-top: 24px; }
.leaderboard-foot .hint { margin: 0; }
#leaderboard-period-note { min-height: 1.55em; }

.winner-list { display: grid; margin: 0; padding: 0; list-style: none; }
.winner-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding-block: 12px; border-bottom: 1px solid var(--rule); }
.winner-card:first-child { padding-top: 0; }
.winner-card .player-avatar { width: 40px; height: 40px; }
.winner-details { display: grid; min-width: 0; }
.winner-details strong { font-weight: 600; overflow-wrap: anywhere; }
.winner-details small { font-size: .8125rem; color: var(--soft); }
.winner-time { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- map ---------- */
.section-head #map-close { min-height: 40px; }
.map { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.map-view { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; border-radius: 12px; background: var(--wash); }
.map-view[data-active] { aspect-ratio: auto; height: clamp(420px, 72vh, 700px); }
.map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--wash); }
.map-art-link { position: absolute; inset: 0; display: block; }
.map-art-link picture, .map-art { display: block; width: 100%; height: 100%; }
.map-art { object-fit: cover; object-position: 50% 45%; }
.map-start-label { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .9375rem; font-weight: 600; }
.map-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-top: 12px; font-size: .875rem; color: var(--soft); }
.map-caption a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; }
.place-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.place { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 44px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-weight: 500; text-decoration: none; }
.place span { font-family: var(--mono); font-size: .8125rem; font-weight: 400; color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.place[aria-current="true"] { color: var(--accent); }

/* ---------- commands ---------- */
.commands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin: 0; }
.commands div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.commands dt code { color: var(--accent); font-size: .95rem; font-weight: 600; }
.commands dd { margin: 0; font-size: .9375rem; }
.who { display: block; margin-top: 2px; font-size: .8125rem; color: var(--soft); }

/* ---------- server information ---------- */
.info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.info h3 { margin-bottom: 12px; }
.info p, .info li { color: var(--soft); font-size: .9375rem; }
.info ul { display: grid; gap: 6px; margin: 0; padding-left: 1.1em; }
.join { display: grid; gap: 12px; align-content: start; }
.join h3 { margin-bottom: 0; }
.join .segmented { justify-self: start; }
.join code { color: var(--ink); }
.join.switchable .edition-name { display: none; }

/* ---------- whitelist ---------- */
.apply { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; }
.apply h2 { padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.apply-intro { margin-top: 16px; color: var(--soft); }
.steps { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: flex; align-items: baseline; gap: 12px; counter-increment: step; }
.steps li::before { content: counter(step); flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--ink); border-radius: 50%; font-size: .8125rem; font-weight: 700; }
form { display: grid; gap: 18px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.form-field { min-width: 0; }
label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 600; }
label span { color: var(--soft); font-weight: 400; }
input, select, textarea { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--faint); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 1rem; caret-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--soft); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
textarea { min-height: 100px; resize: vertical; }
.name-hint { margin-top: -10px; }
.name-check { display: flex; align-items: center; gap: 10px; min-height: 32px; margin-top: -10px; font-size: .8125rem; color: var(--soft); overflow-wrap: anywhere; }
.name-check strong { color: var(--ink); font-weight: 600; }
.name-check.is-error { color: var(--offline); }
input.is-invalid { border-color: var(--offline); }
.website-field { display: none; }
.form-status { color: var(--online); font-weight: 600; }
.form-status:not(:empty) { margin-top: 16px; }
.form-status.error { color: var(--offline); }

/* ---------- footer ---------- */
footer { margin-top: 96px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px; padding: 6px 0 28px; border-top: 1px solid var(--ink); font-size: .875rem; color: var(--soft); }
footer nav, .request-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
footer a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.request-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; min-height: 20px; padding: 2px 6px; border-radius: 999px; background: var(--accent); color: var(--paper); font-size: .75rem; font-weight: 700; }

@media (hover: hover) {
  .tabs a:hover, footer a:hover { color: var(--ink); }
  .place:hover { color: var(--accent); transform: translateX(4px); }
  .btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent); color: var(--paper); }
  .btn-plain:hover:not(:disabled) { border-color: var(--ink); background: transparent; color: var(--ink); }
  .map-art-link:hover .map-start-label { background: var(--ink); color: var(--paper); }
  .segmented button:not([aria-pressed="true"]):hover { color: var(--ink); }
}

@media (max-width: 900px) {
  .split, .map, .apply { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .info { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .commands { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  :root { --bar-height: 106px; }
  .wrap { width: calc(100% - 32px); }
  .bar .wrap { grid-template-columns: minmax(0, 1fr) auto; padding-top: 10px; }
  .bar .wrap::after { margin-top: 0; }
  .tabs { grid-column: 1 / -1; grid-row: 2; gap: 18px; }
  /* While the row can scroll further right, fade its edge to show there is more. */
  .tabs[data-more] { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .address { width: 100%; justify-content: space-between; }
  .copy-status { left: 0; right: auto; }
  .commands div { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: minmax(0, 1fr); }
  .request-admin { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .segmented::before { transition: transform .28s var(--ease-out); }
  .tabs a, .place, .btn, footer a, .map-start-label { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .2s var(--ease-out); }
  .grow .leaderboard-row { animation: slide-in .55s var(--ease-out) both; animation-delay: calc(var(--row, 0) * 90ms); }
  .grow .leaderboard-meter span { animation: grow 1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(150ms + var(--row, 0) * 90ms); }
  .player-chip { animation: pop-in .45s var(--ease-out) both; }
  .tab-indicator { transition: transform .35s var(--ease-out), width .35s var(--ease-out); }
  .reveal .section-head::after { transform: scaleX(0); transition: transform 1s var(--ease-out); }
  .reveal .section-head h2 { transition: transform .8s var(--ease-out); }
  .reveal .section-head:not(.seen) h2 { transform: translateY(18px); }
  .reveal .section-head.seen::after { transform: none; }
  .server-status[data-state="online"] .status-dot { animation: pulse 3s cubic-bezier(0, 0, .2, 1) infinite; }
  .copy-button.copied .icon-check { animation: pop .3s var(--ease-out); }
  .map-frame { opacity: 0; transition: opacity .4s ease; }
  .map-frame[data-loaded] { opacity: 1; }
  /* Load: the heading sharpens into place, then status, address and online players follow. */
  .band-head h1 { animation: focus-in .9s var(--ease-out) both; }
  .server-status { animation: lift .6s var(--ease-out) .25s both; }
  .address { animation: lift .6s var(--ease-out) .35s both; }
  .online-players { animation: lift .6s var(--ease-out) .45s both; }
  @keyframes focus-in { from { opacity: 0; transform: translateY(.18em); filter: blur(12px); } }
  @keyframes lift { from { opacity: 0; transform: translateY(16px); } }
  @keyframes slide-in { from { opacity: 0; transform: translateX(-14px); } }
  @keyframes pop-in { from { opacity: 0; transform: scale(.85); } }
  @keyframes grow { from { transform: scaleX(0); } }
  @keyframes pop { from { transform: scale(.4); opacity: 0; } }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--online) 45%, transparent); }
    55%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--online) 0%, transparent); }
  }
}