/* Eden Rooms in Farlight, the look of homebrew.page and ProsperoStore.

   Same colours (warm white, deep indigo, violet mid tone, one gold), same
   fonts and the same unit: --u is one pixel of a 1920-wide canvas. Each room
   has a tone of its own, shared with its line in the chart. */

@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #f4efe6;
  --deep: #0e0f24;
  --mid: #42358f;
  --accent: #ffd166;
  --on-accent: #241a05;
  --panel: #171926;
  --ok: #8fdab2;
  --bad: #ff8a8a;
  --r1: #ffd166;
  --r2: #4fd1c5;
  --r3: #a78bfa;
  --r4: #f472b6;
  --u: clamp(0.68px, 0.05208vw, 1px);
  --margin: calc(96 * var(--u));
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Montserrat", "Inter", system-ui, sans-serif;
  --mono: ui-monospace, "DejaVu Sans Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--deep); -webkit-text-size-adjust: 100%; scrollbar-color: rgba(244, 239, 230, 0.25) transparent; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* No background here: it would paint over the sky behind the page. */
  color: var(--ink);
  font: 400 calc(22 * var(--u))/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { flex: 1; position: relative; width: 100%; max-width: 1920px; margin: 0 auto; padding: calc(64 * var(--u)) var(--margin) calc(72 * var(--u)); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
code { font: 0.9em var(--mono); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 10px 16px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.skip:focus { left: 12px; }
:focus-visible { outline: 3px solid rgba(244, 239, 230, 0.95); outline-offset: 3px; }

/* The room: the dark, with slow clouds. */
.sky { position: fixed; inset: 0; z-index: -2; background: linear-gradient(180deg, #0a0b1a, var(--deep)); }
.sky::before, .sky::after { content: ""; position: absolute; inset: -20%; }
.sky::before {
  background:
    radial-gradient(46% 42% at 76% 24%, rgba(66, 53, 143, 0.5), transparent 70%),
    radial-gradient(40% 44% at 10% 92%, rgba(36, 74, 184, 0.3), transparent 70%);
  animation: drift 46s ease-in-out infinite alternate;
}
.sky::after { background: radial-gradient(38% 36% at 84% 16%, var(--accent), transparent 72%); opacity: 0.1; animation: drift 61s ease-in-out infinite alternate-reverse; }
@keyframes drift {
  from { transform: translate3d(-2%, -1.5%, 0) scale(1); }
  to { transform: translate3d(2.5%, 2%, 0) scale(1.08); }
}

/* ---- The top bar ---------------------------------------------------------------------- */

.bar { position: sticky; top: 0; z-index: 30; background: linear-gradient(180deg, rgba(14, 15, 36, 0.9), rgba(14, 15, 36, 0.62)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.bar__inner { display: flex; align-items: center; gap: calc(36 * var(--u)); max-width: 1920px; height: calc(112 * var(--u)); min-height: 64px; margin: 0 auto; padding: 0 var(--margin); }
.brand { display: flex; align-items: center; flex: none; }
.brand__mark { position: relative; width: calc(22 * var(--u)); height: calc(22 * var(--u)); min-width: 16px; min-height: 16px; margin: 0 calc(20 * var(--u)) 0 calc(6 * var(--u)); border-radius: 23%; background: var(--accent); transform: rotate(45deg); }
.brand__mark::after { content: ""; position: absolute; inset: 27%; border-radius: 20%; background: var(--deep); }
.brand__name { font: 600 calc(22 * var(--u))/1 var(--body); letter-spacing: calc(5 * var(--u)); text-transform: uppercase; white-space: nowrap; }
.brand__rule { width: 1.5px; height: calc(22 * var(--u)); min-height: 16px; margin: 0 calc(20 * var(--u)); background: rgba(244, 239, 230, 0.25); }
.brand__from { font: 600 calc(20 * var(--u))/1 var(--body); color: rgba(255, 209, 102, 0.92); white-space: nowrap; }
.bar__end { display: flex; align-items: center; gap: calc(26 * var(--u)); margin-left: auto; min-width: 0; }
.bar__link { font: 400 calc(20 * var(--u))/1 var(--body); color: rgba(244, 239, 230, 0.55); white-space: nowrap; transition: color 0.2s; }
.bar__link:hover { color: var(--ink); }
.pill { display: inline-grid; place-items: center; height: calc(46 * var(--u)); min-height: 36px; padding: 0 calc(22 * var(--u)); border-radius: 999px; font: 600 calc(20 * var(--u))/1 var(--body); white-space: nowrap; }
.pill--gold { border: 2px solid var(--accent); background: rgba(255, 209, 102, 0.08); color: var(--accent); transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.pill--gold:hover, .pill--gold:focus-visible { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 22px rgba(255, 209, 102, 0.3); }

/* ---- The opening ---------------------------------------------------------------------- */

.kicker { display: flex; align-items: center; margin: 0; font: 600 calc(18 * var(--u))/1 var(--body); letter-spacing: calc(4 * var(--u)); text-transform: uppercase; color: var(--accent); }
.kicker::before { content: ""; flex: none; width: calc(28 * var(--u)); height: 3px; margin-right: calc(12 * var(--u)); border-radius: 1.5px; background: var(--accent); }
h1 { margin: calc(18 * var(--u)) 0 0; font: 500 calc(92 * var(--u))/1.02 var(--display); letter-spacing: -0.035em; }
.lede { display: flex; align-items: center; gap: calc(14 * var(--u)); margin: calc(20 * var(--u)) 0 0; font-size: calc(28 * var(--u)); color: rgba(244, 239, 230, 0.72); }
.live { flex: none; width: calc(12 * var(--u)); height: calc(12 * var(--u)); min-width: 9px; min-height: 9px; border-radius: 50%; background: var(--ok); animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(143, 218, 178, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(143, 218, 178, 0); }
  100% { box-shadow: 0 0 0 0 rgba(143, 218, 178, 0); }
}

/* ---- The rooms ------------------------------------------------------------------------ */

.grid { display: grid; gap: calc(24 * var(--u)); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: calc(48 * var(--u)); }
.room, .panel { border: 1px solid rgba(244, 239, 230, 0.1); border-radius: calc(28 * var(--u)); background: rgba(23, 25, 38, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.room { --tone: var(--accent); position: relative; padding: calc(30 * var(--u)); overflow: hidden; transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s; }
.room::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: var(--tone); }
.room::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, var(--tone), transparent 60%); opacity: 0.1; pointer-events: none; }
.room:hover { transform: translateY(calc(-6 * var(--u))); border-color: rgba(244, 239, 230, 0.3); box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, 0.4); }
.room-1 { --tone: var(--r1); }
.room-2 { --tone: var(--r2); }
.room-3 { --tone: var(--r3); }
.room-4 { --tone: var(--r4); }
.room header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.room h2 { margin: 0; font: 500 calc(28 * var(--u))/1.15 var(--display); letter-spacing: -0.02em; }
.state { flex: none; padding: 0.3em 0.8em; border-radius: 999px; background: rgba(143, 218, 178, 0.14); color: var(--ok); font: 600 calc(15 * var(--u))/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
.off .state { background: rgba(255, 138, 138, 0.14); color: var(--bad); }
.off::before { background: var(--bad); }
.count { position: relative; display: flex; align-items: baseline; gap: calc(12 * var(--u)); margin: calc(26 * var(--u)) 0 calc(18 * var(--u)); }
.players { font: 500 calc(84 * var(--u))/0.95 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.count small { font-size: calc(20 * var(--u)); color: rgba(244, 239, 230, 0.6); }
progress { position: relative; display: block; width: 100%; height: calc(8 * var(--u)); min-height: 5px; border: 0; border-radius: 999px; overflow: hidden; background: rgba(244, 239, 230, 0.1); -webkit-appearance: none; appearance: none; }
progress::-webkit-progress-bar { background: rgba(244, 239, 230, 0.1); }
progress::-webkit-progress-value { background: var(--tone); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--tone); border-radius: 999px; }
.addr { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: calc(24 * var(--u)); color: rgba(244, 239, 230, 0.6); }
.addr code { font-size: calc(18 * var(--u)); overflow-wrap: anywhere; }
.addr b { color: var(--tone); font-weight: 700; }
.copy { flex: none; display: inline-grid; place-items: center; height: calc(36 * var(--u)); min-height: 26px; padding: 0 calc(16 * var(--u)); border: 1.5px solid rgba(244, 239, 230, 0.22); border-radius: 999px; background: rgba(244, 239, 230, 0.08); font: 600 calc(16 * var(--u))/1 var(--body); color: rgba(244, 239, 230, 0.8); transition: border-color 0.2s, color 0.2s; }
.copy:hover, .copy:focus-visible { border-color: var(--accent); color: var(--accent); }
.copy.done { border-color: var(--ok); color: var(--ok); }

/* ---- Panels --------------------------------------------------------------------------- */

.panel { margin-top: calc(24 * var(--u)); padding: calc(36 * var(--u)); }
.panel h2 { margin: 0; font: 500 calc(34 * var(--u))/1.1 var(--display); letter-spacing: -0.02em; }
.join ol { display: grid; gap: calc(24 * var(--u)); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: calc(24 * var(--u)) 0 0; padding: 0; list-style: none; counter-reset: step; font-size: calc(21 * var(--u)); color: rgba(244, 239, 230, 0.7); }
.join li { counter-increment: step; position: relative; padding-left: calc(62 * var(--u)); min-height: calc(44 * var(--u)); }
.join li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); min-width: 30px; min-height: 30px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); font: 600 calc(20 * var(--u))/1 var(--body); }
.join strong, .join code { color: var(--ink); font-weight: 600; }

.bar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ranges { position: relative; display: inline-flex; gap: calc(4 * var(--u)); padding: calc(5 * var(--u)); border: 1.5px solid rgba(244, 239, 230, 0.16); border-radius: 999px; background: rgba(9, 9, 22, 0.4); }
.ranges button { display: grid; place-items: center; height: calc(40 * var(--u)); min-height: 30px; padding: 0 calc(20 * var(--u)); border-radius: 999px; font: 600 calc(18 * var(--u))/1 var(--body); color: rgba(244, 239, 230, 0.55); transition: color 0.2s, background 0.2s; }
.ranges button:hover, .ranges button:focus-visible { color: var(--ink); }
.ranges button.active { background: var(--accent); color: var(--on-accent); }
.stats { margin: calc(16 * var(--u)) 0 calc(8 * var(--u)); font-size: calc(20 * var(--u)); color: rgba(244, 239, 230, 0.6); }
.stats strong { color: var(--ink); font-weight: 600; }
#chart { min-height: 360px; }
.hint { margin: calc(14 * var(--u)) 0 0; font-size: calc(17 * var(--u)); color: rgba(244, 239, 230, 0.46); }

.uplot { font-family: var(--body); }
.u-legend { margin-top: 8px; font-size: calc(17 * var(--u)); color: rgba(244, 239, 230, 0.6); }
.u-legend .u-value { color: var(--ink); font-variant-numeric: tabular-nums; }
.u-legend .u-series { padding: 2px 8px; }
.u-select { background: rgba(255, 209, 102, 0.16); }

/* ---- The foot ------------------------------------------------------------------------- */

.foot { position: relative; border-top: 1px solid rgba(244, 239, 230, 0.08); background: rgba(9, 9, 22, 0.55); }
.foot__inner { max-width: 1920px; margin: 0 auto; padding: calc(48 * var(--u)) var(--margin) calc(54 * var(--u)); }
.foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(28 * var(--u)); padding-bottom: calc(36 * var(--u)); border-bottom: 1px solid rgba(244, 239, 230, 0.08); }
.by { display: block; font: 600 calc(16 * var(--u))/1 var(--body); letter-spacing: calc(3.5 * var(--u)); text-transform: uppercase; color: rgba(244, 239, 230, 0.55); }
.maker { display: block; margin-top: calc(10 * var(--u)); font: 500 calc(44 * var(--u))/1.05 var(--display); letter-spacing: -0.03em; }
.links { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); }
.links a { display: inline-flex; align-items: center; gap: calc(12 * var(--u)); height: calc(52 * var(--u)); min-height: 40px; padding: 0 calc(24 * var(--u)); border: 1.5px solid rgba(244, 239, 230, 0.22); border-radius: 999px; background: rgba(244, 239, 230, 0.08); font: 600 calc(19 * var(--u))/1 var(--body); color: rgba(244, 239, 230, 0.88); transition: border-color 0.2s, color 0.2s, background 0.2s; }
.links a:hover, .links a:focus-visible { border-color: var(--accent); background: rgba(255, 209, 102, 0.08); color: var(--accent); }
.links svg { flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); min-width: 16px; min-height: 16px; fill: currentColor; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 8px calc(34 * var(--u)); margin-top: calc(32 * var(--u)); font: 600 calc(19 * var(--u))/1.4 var(--body); color: rgba(244, 239, 230, 0.7); }
.foot__nav a:hover { color: var(--accent); }
.foot__fine { max-width: calc(1320 * var(--u)); margin: calc(22 * var(--u)) 0 0; font-size: calc(17 * var(--u)); line-height: 1.6; color: rgba(244, 239, 230, 0.46); }

/* ---- Narrower screens ----------------------------------------------------------------- */

@media (max-width: 1180px) {
  :root { --u: 0.8px; --margin: 28px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .join ol { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --u: 0.76px; --margin: 18px; }
  .grid { grid-template-columns: 1fr; }
  .bar__link, .brand__rule, .brand__from { display: none; }
  h1 { font-size: 48px; }
  #chart { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky::before, .sky::after, .live { animation: none; }
  .room { transition: none; }
}