/* MangroveSMP shared world: tokens, base, night sky, chips, nav, footer. Used by every page. */
:root {
  color-scheme: dark;
  /* night over the swamp */
  --sky-top: oklch(0.15 0.035 205);
  --sky-low: oklch(0.22 0.05 188);
  --mist: oklch(0.34 0.06 165 / 0.32);
  --water: oklch(0.21 0.05 182);
  --water-deep: oklch(0.11 0.03 210);
  --line: oklch(0.42 0.03 190 / 0.45);
  --ink: oklch(0.95 0.02 110);
  --ink-2: oklch(0.82 0.03 160);
  --ink-3: oklch(0.72 0.03 175);
  /* the gauge: bone enamel, black paint, red carved marks */
  --bone: oklch(0.93 0.025 95);
  --bone-2: oklch(0.85 0.03 90);
  --paint: oklch(0.2 0.02 60);
  --paint-2: oklch(0.42 0.02 60);
  --red: oklch(0.58 0.17 30);
  --wood: oklch(0.31 0.05 40);
  --wood-hi: oklch(0.37 0.06 40);
  /* ink semantics: moss = live, firefly = record / just moved */
  --moss: oklch(0.83 0.17 128);
  --danger: oklch(0.7 0.17 27);
  --firefly: oklch(0.92 0.16 112);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sans: "Barlow", system-ui, sans-serif;
  --stencil: "Big Shoulders Stencil Display", "Barlow", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* 16px up to 1440px wide, then the whole layout grows with the screen */
html { font-size: clamp(100%, 0.5vw + 0.55rem, 137.5%); -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink-3) var(--water-deep); }
body {
  margin: 0;
  font: 400 1rem/1.5 var(--sans);
  color: var(--ink);
  background: var(--water-deep);
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--bone); color: var(--paint); }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--firefly); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: min(68rem, 100% - 32px); margin-inline: auto; }
.label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
}

/* night: sky band + leaderboard, above the water ------------------------- */
.night {
  position: relative;
  background:
    radial-gradient(36rem 22rem at 82% -4rem, oklch(0.42 0.06 180 / 0.3), transparent 70%),
    radial-gradient(80rem 18rem at 50% 100%, var(--mist), transparent 70%),
    linear-gradient(var(--sky-top), var(--sky-low));
}
.fireflies { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fireflies span {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--firefly);
  box-shadow: 0 0 8px 2px oklch(0.88 0.18 115 / 0.5);
  opacity: 0;
  animation:
    drift var(--d) ease-in-out var(--delay) infinite alternate,
    blink calc(var(--d) / 2.5) ease-in-out var(--delay) infinite alternate;
}
@keyframes drift { to { transform: translate(var(--dx), var(--dy)); } }
@keyframes blink { 0%, 45% { opacity: 0; } 100% { opacity: 0.9; } }

@keyframes emerge { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }

/* chip: the one toggle button (stat picker, item picker, enchantment picker) */
.metric {
  padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 3px;
  background: oklch(0.12 0.03 220 / 0.4);
  color: var(--ink-2); font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
.metric:hover { border-color: var(--ink-3); color: var(--ink); }
.metric[aria-pressed="true"] { background: var(--bone); border-color: var(--bone); color: var(--paint); font-weight: 600; }

.metric:disabled { opacity: 0.4; cursor: not-allowed; }

/* tool pages: logo + nav bar, big stencil title, one-line lead */
.tool-page .night { min-height: 100vh; }
.tool-head { position: relative; }
.tool-head .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; }
.tool-head .bar .topnav { padding-top: 0; }
.tool-head .logo { --p: 6px; width: 11rem; rotate: -1deg; filter: drop-shadow(0 10px 16px oklch(0.06 0.03 220 / 0.7)); }
@media (max-width: 640px) { .tool-head .logo { --p: 5px; width: clamp(5rem, 100vw - 18.5rem, 8rem); flex: none; } .tool-head .bar { flex-wrap: wrap; row-gap: 8px; } .tool-head .bar .topnav { margin-left: auto; } }
.tool-head h1 {
  margin: 28px 0 0;
  font: 800 clamp(2.5rem, 7vw, 4.25rem)/0.92 var(--stencil);
  text-transform: uppercase; letter-spacing: 0.005em;
  animation: emerge 1100ms var(--ease) both;
}
.tool-head .lead { margin: 12px 0 0; max-width: 40rem; color: var(--ink-2); font-size: 1.0625rem; animation: emerge 1100ms 120ms var(--ease) both; }

/* site nav: plain links, the current page underlined in bone */
.topnav { display: flex; justify-content: flex-end; gap: 4px 22px; flex-wrap: wrap; padding: 14px 0 0; position: relative; z-index: 3; }
.topnav a {
  color: var(--ink-3); text-decoration: none;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.topnav a:hover { color: var(--ink); }
.topnav a[aria-current="page"] { color: var(--ink); border-color: var(--bone); }
/* phones: one line, tighter tracking; the tool-page logo shrinks to make room */
@media (max-width: 640px) {
  .topnav { flex-wrap: nowrap; gap: 12px; }
  .topnav a { font-size: 0.75rem; letter-spacing: 0.05em; white-space: nowrap; }
}

footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
  margin-top: 80px; padding: 20px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem; color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
  .fireflies { display: none; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
}

/* the banner screenshot set into a weathered plank board, nailed at the corners (home sign + tool-page logo) */
.plank {
  --p: clamp(9px, 1.3vw, 16px);
  position: relative;
  display: block;
  padding: var(--p);
  border-radius: 12px 16px 10px 14px;
  background:
    linear-gradient(transparent calc(100% - 2px), oklch(0.14 0.03 40 / 0.8) 0) 0 0 / 100% 25%,
    repeating-linear-gradient(91deg, transparent 0 37px, oklch(0.75 0.03 70 / 0.07) 38px 39px, transparent 40px 83px),
    radial-gradient(ellipse at 20% 30%, oklch(0.5 0.04 140 / 0.25), transparent 40%),
    radial-gradient(ellipse at 85% 80%, oklch(0.45 0.04 140 / 0.22), transparent 35%),
    linear-gradient(oklch(1 0 0 / 0.07), oklch(0 0 0 / 0.3)),
    url(/wood.png) 0 0 / 512px 25%, var(--wood);
  box-shadow: inset 0 1px oklch(1 0 0 / 0.12), inset 0 0 22px oklch(0 0 0 / 0.55);
}
.plank::before, .plank::after { content: ""; position: absolute; pointer-events: none; }
.plank::before {
  inset: 0;
  --nail: oklch(0.62 0.02 60) 0 2px, oklch(0.2 0.02 40) 3px, transparent 4px;
  background:
    radial-gradient(circle at calc(var(--p) / 2) calc(var(--p) / 2), var(--nail)),
    radial-gradient(circle at calc(100% - var(--p) / 2) calc(var(--p) / 2), var(--nail)),
    radial-gradient(circle at calc(var(--p) / 2) calc(100% - var(--p) / 2), var(--nail)),
    radial-gradient(circle at calc(100% - var(--p) / 2) calc(100% - var(--p) / 2), var(--nail));
}
.plank::after { inset: var(--p); border-radius: 3px; box-shadow: inset 0 0 0 2px oklch(0.12 0.03 40), inset 0 0 36px oklch(0.06 0.03 220 / 0.7); }
.banner { display: block; width: 100%; height: auto; border-radius: 3px; }