/* Exile Rust — dark industrial. Committed single look: the palette is painted
   explicitly on body so no host theme can bleed through. */

:root {
  --bg:      #12100e;
  --raise:   #1b1815;
  --raise-2: #232019;
  --rule:    #332e27;
  --text:    #ece7df;
  --muted:   #b3a99b;   /* 7.4:1 on --bg — safe for interactive text */
  --faint:   #8b8175;   /* decorative only */
  --rust:    #d1642a;
  --rust-hi: #f0873f;
  --ember:   #e8b04b;
  --on:      #6fbf5b;
  --off:     #9a5b52;
  --measure: 68ch;
}

* { box-sizing: border-box; }

/* The UA stylesheet's [hidden]{display:none} is an AUTHOR-beatable default: any
   rule of ours that sets `display` wins, and the element stays on screen with
   its hidden attribute set. That is exactly what happened to the connect bar --
   .cc-plain sets display:inline-flex, so toggling .hidden did nothing and the
   address rendered twice. Anything toggled via el.hidden needs this. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-wrap: break-word;   /* global net: one long token must not scroll the page */
}

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 1.1rem; }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: 1rem; top: .6rem; z-index: 10;
  background: var(--rust); color: #fff; padding: .5rem .9rem; border-radius: 4px;
}

a { color: var(--rust-hi); }
a:hover { color: var(--ember); }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--raise-2); padding: .12em .4em; border-radius: 3px;
  font-size: .93em;
}
kbd {
  font-family: inherit; font-size: .85em; background: var(--raise-2);
  border: 1px solid var(--rule); border-bottom-width: 2px;
  border-radius: 4px; padding: .05em .4em;
}

/* ---------- header ---------- */
.topbar { border-bottom: 1px solid var(--rule); background: var(--raise); }
.bar { display: flex; align-items: center; justify-content: space-between;
       gap: 1rem; flex-wrap: wrap; padding-block: .8rem; }
.brand { text-decoration: none; letter-spacing: .09em; font-weight: 800; }
.brand-mark { color: var(--rust); }
.brand-sub  { color: var(--text); margin-left: .35em; }
.bar nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.bar nav a {
  color: var(--muted); text-decoration: none; padding: .35rem .7rem;
  border-radius: 4px; font-weight: 600; font-size: .95rem;
}
.bar nav a:hover { color: var(--text); background: var(--raise-2); }

/* ---------- hero ---------- */
.hero { padding: 3rem 0 2rem; }
.eyebrow {
  color: var(--ember); text-transform: uppercase; letter-spacing: .14em;
  font-size: .76rem; font-weight: 700; margin: 0 0 .6rem;
}
.hero h1 {
  font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.08;
  margin: 0 0 1rem; letter-spacing: -.02em;
}
.lede { font-size: 1.1rem; color: var(--muted); max-width: var(--measure); margin: 0 0 1.6rem; }
.lede strong { color: var(--text); }

.connect {
  background: var(--raise); border: 1px solid var(--rule);
  border-left: 3px solid var(--rust);
  border-radius: 6px; padding: 1rem 1.2rem; max-width: var(--measure);
}
.connect .label {
  display: block; text-transform: uppercase; letter-spacing: .12em;
  font-size: .7rem; color: var(--faint); font-weight: 700;
}
.addr {
  font-size: clamp(1.05rem, 3.4vw, 1.5rem); font-weight: 700;
  background: none; padding: 0; color: var(--ember);
}
.connect p { margin: .55rem 0 0; font-size: .9rem; }

.status-line { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }
.pill {
  display: inline-block; padding: .2rem .65rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.pill-on  { background: rgba(111,191,91,.16); color: var(--on);  border: 1px solid rgba(111,191,91,.4); }
.pill-off { background: rgba(154,91,82,.16);  color: #d08a80;    border: 1px solid rgba(154,91,82,.45); }

/* ---------- cards ---------- */
.cards {
  display: grid; gap: 1rem; margin: 1rem 0 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  background: var(--raise); border: 1px solid var(--rule);
  border-radius: 6px; padding: 1.15rem 1.25rem;
}
.card.accent { border-top: 3px solid var(--rust); }
.card.standalone { max-width: var(--measure); margin: 1.2rem 0; }
.card h2 {
  margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--faint);
}
.card p { margin: .35rem 0; }
.big { font-size: 1.7rem; font-weight: 800; color: var(--ember); line-height: 1.15; }

/* ---------- prose ---------- */
.prose { padding: 2.2rem 0 1rem; max-width: var(--measure); }
.prose h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin: 0 0 .8rem; letter-spacing: -.02em; }
.prose h2 {
  font-size: 1.18rem; margin: 2rem 0 .6rem; padding-top: .9rem;
  border-top: 1px solid var(--rule);
}
.prose ul { padding-left: 1.15rem; }
.prose li { margin: .4rem 0; }
.faint { color: var(--faint); }

/* ---------- facts ---------- */
.facts { margin: 0; }
.facts > div {
  display: grid; grid-template-columns: 11rem 1fr; gap: .6rem;
  padding: .6rem 0; border-bottom: 1px solid var(--rule);
}
.facts dt { color: var(--faint); font-size: .9rem; }
.facts dd { margin: 0; }

/* ---------- schedule ---------- */
.sched { width: 100%; border-collapse: collapse; margin: .6rem 0 1rem; }
.sched th, .sched td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--rule); }
.sched th { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.sched tr.is-next td { background: rgba(209,100,42,.09); }
.tag {
  display: inline-block; font-size: .76rem; font-weight: 700; padding: .12rem .55rem;
  border-radius: 4px; background: var(--raise-2); color: var(--muted);
}
.tag-bp { background: rgba(232,176,75,.16); color: var(--ember); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); margin-top: 3rem; padding-block: 1.5rem 2.5rem; }
.foot p { margin: .2rem 0; font-size: .92rem; }

/* The one fixed-width column on the page is .facts' label track. At 320px that
   leaves too little for the value, so stack instead — same failure the other
   site hit, avoided here rather than rediscovered. */
@media (max-width: 480px) {
  .facts > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* ---------- stats tabs + ladders ---------- */
.tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin: 1rem 0 .4rem;
        overflow-x: auto; padding-bottom: .2rem; }
.tab { display: inline-block; padding: .32rem .8rem; border-radius: 4px;
       background: var(--raise); border: 1px solid var(--rule); color: var(--muted);
       text-decoration: none; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.on { background: var(--rust); border-color: var(--rust); color: #fff; }

table.ladder { width: 100%; border-collapse: collapse; margin: .5rem 0 1.6rem; }
table.ladder th, table.ladder td { padding: .5rem .5rem; border-bottom: 1px solid var(--rule); text-align: left; }
table.ladder th { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
table.ladder .num { text-align: right; font-variant-numeric: tabular-nums; }
/* width:100%, never max-width:0 -- max-width:0 only produces an ellipsis if the
   layout hands the column the leftover space, and when it does not the cell
   collapses and the player name vanishes entirely. */
table.ladder .nm { width: 100%; max-width: 1px; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }

/* ---------- brand in the header ---------- */
.brand img { display: block; }
.bar nav { align-items: center; }
.nav-discord {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #5865F2; color: #fff !important; border-radius: 5px;
  padding: .4rem .8rem !important; font-weight: 700;
}
.nav-discord:hover { background: #4752c4; }

/* ---------- hero ---------- */
.hero h1 em { color: var(--rust-hi); font-style: normal; }
/* Was a two-up grid holding the connect box and the Discord CTA. The connect
   box moved to the bar under the nav, so this is now just the CTA -- flex, not
   a 1fr grid, or the button stretches to 900px and reads as a banner. */
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.4rem 0 0; }

/* Discord is the one thing on this page we most want clicked, so it gets the
   only saturated colour on the site. Everything else is rust and bone. */
.btn-discord {
  display: inline-flex; align-items: center; justify-content: center;
  background: #5865F2; color: #fff; text-decoration: none;
  border-radius: 6px; padding: .7rem 1.3rem; font-weight: 700;
  border: 1px solid #6b76f5; white-space: nowrap;
}
.btn-discord:hover { background: #4752c4; color: #fff; }
.btn-discord.big {
  flex-direction: column; gap: .25rem; padding: 1.1rem 1.4rem;
  font-size: 1.15rem; text-align: center;
}
.btn-discord.big span { font-weight: 500; font-size: .82rem; opacity: .85; }

/* ---------- the full-width Discord strip, on every page ---------- */
.discord-strip {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, #1a1a2e 0%, var(--raise) 100%);
  margin-top: 3rem;
}
.ds-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; padding: 1.8rem 0;
}
.ds-inner h2 { margin: 0 0 .3rem; font-size: 1.35rem; letter-spacing: -.01em; }
.ds-inner p { margin: 0; color: var(--muted); max-width: 56ch; }

/* ---------- why grid ---------- */
.why { padding: 1rem 0 2rem; }
.why h2 { font-size: 1.5rem; margin: 0 0 1.2rem; }
.why-grid { display: grid; gap: 1.4rem 2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.why-grid h3 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--ember); }
.why-grid p { margin: 0; color: var(--muted); }

/* ---------- footer ---------- */
.foot-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.foot-mark { opacity: .85; margin-bottom: .4rem; }

/* ---------- brand page ---------- */
.asset-row { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; margin: .8rem 0 1.6rem; }
.asset.dark { background: var(--raise); border: 1px solid var(--rule); border-radius: 8px; padding: 1rem; }
.asset img { display: block; max-width: 100%; height: auto; }
.asset-links { display: flex; flex-direction: column; gap: .3rem; }
.swatches { display: flex; gap: 1rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.swatches div { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.swatches span { width: 28px; height: 28px; border-radius: 5px; border: 1px solid var(--rule); display: inline-block; }

/* ---------- this wipe's map ---------- */
.mapshot { margin: 2.2rem 0 1rem; }
.mapshot-head h2 { font-size: 1.5rem; margin: 0 0 .2rem; }
.mapshot-head p { margin: 0 0 1rem; }
.mapshot-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
  align-items: start;
}
.mapshot-img {
  display: block; border: 1px solid var(--rule); border-radius: 8px;
  overflow: hidden; background: var(--raise); line-height: 0;
}
/* height:auto is load-bearing: the img carries width/height attributes so the
   browser reserves the right space before it loads, and without this the
   attribute height wins and the picture is squashed. */
.mapshot-img img { width: 100%; height: auto; display: block; }
.mapshot-facts h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--faint); margin: 0 0 .5rem;
}
.mapshot-facts h3 + dl { margin: 0 0 1.4rem; }
.mapshot-facts dl > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .35rem 0; border-bottom: 1px solid var(--rule);
}
.mapshot-facts dt { color: var(--muted); }
.mapshot-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.biomes { display: grid; gap: .45rem; margin-bottom: 1rem; }
.biome { display: grid; grid-template-columns: 4.6rem 1fr 3rem; align-items: center; gap: .5rem; font-size: .88rem; }
.biome-label { color: var(--muted); }
.biome-bar { background: var(--raise-2); border-radius: 3px; height: 8px; overflow: hidden; }
.biome-bar i { display: block; height: 100%; background: var(--rust); }
.biome-pct { text-align: right; color: var(--faint); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .mapshot-grid { grid-template-columns: 1fr; }
}

/* ---------- map vote ---------- */
.notice { background: var(--raise); border: 1px solid var(--rule);
          border-left: 3px solid var(--rust); border-radius: 5px;
          padding: .7rem 1rem; margin: 1rem 0; }
.notice.warn { border-left-color: var(--off); }
.votebar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
           background: var(--raise); border: 1px solid var(--rule);
           border-radius: 6px; padding: .9rem 1.1rem; margin: 1rem 0; }
.ballot { display: grid; gap: 1.2rem; margin: 1rem 0 2rem;
          grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.ballot-card { background: var(--raise); border: 1px solid var(--rule);
               border-radius: 8px; padding: 1rem; }
.ballot-card.chosen { border-color: var(--rust); box-shadow: 0 0 0 1px var(--rust); }
.ballot-img { display: block; border-radius: 6px; overflow: hidden; line-height: 0; }
.ballot-img img { width: 100%; height: auto; display: block; }
.ballot-card h3 { margin: .7rem 0 .3rem; font-size: 1.05rem; }
.ballot-facts { display: flex; gap: 1.2rem; margin: 0 0 .4rem; }
.ballot-facts > div { display: flex; gap: .4rem; font-size: .9rem; }
.ballot-facts dt { color: var(--faint); }
.ballot-facts dd { margin: 0; }
.ballot-tally { display: flex; align-items: center; gap: .6rem; margin: .6rem 0 .8rem;
                font-size: .88rem; color: var(--muted); }
.ballot-bar { flex: 1; height: 8px; background: var(--raise-2);
              border-radius: 3px; overflow: hidden; }
.ballot-bar i { display: block; height: 100%; background: var(--rust); }
.btn-vote { width: 100%; padding: .6rem 1rem; border-radius: 5px; cursor: pointer;
            background: var(--rust); color: #fff; border: 1px solid var(--rust-hi);
            font-weight: 700; font-size: .95rem; }
.btn-vote:hover { background: var(--rust-hi); }
.btn-vote.is-chosen, .btn-vote:disabled { background: var(--raise-2); color: var(--muted);
            border-color: var(--rule); cursor: default; }

/* ---------- connect bar ----------
   Directly under the nav on every page. The address is the single most useful
   thing on this site to a first-time visitor, so it is never more than a
   glance away and never behind a paragraph. */
.connectbar { background: var(--raise-2); border-bottom: 1px solid var(--rule); }
.cb {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem 1.1rem; flex-wrap: wrap; padding-block: .6rem;
}
.cb-status { display: flex; align-items: center; gap: .55rem; margin: 0; flex-wrap: wrap; }
.cb-count { font-size: .88rem; font-weight: 600; color: var(--muted); }

.cb-connect { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.cb-hint { font-size: .82rem; color: var(--faint); }
kbd {
  font: 600 .78rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--raise); border: 1px solid var(--rule); border-bottom-width: 2px;
  border-radius: 4px; padding: .18rem .4rem; color: var(--text);
}

.cc-btn, .cc-plain {
  display: inline-flex; align-items: center; gap: .7rem; min-width: 0;
  background: var(--raise); border: 1px solid var(--rule);
  border-left: 3px solid var(--rust); border-radius: 6px;
  padding: .42rem .7rem;
}
.cc-btn { font: inherit; color: var(--text); cursor: pointer; }
.cc-btn:hover { border-color: var(--rust); background: #241f1a; }
.cc-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.cc-btn code, .cc-plain {
  color: var(--ember); font-weight: 700;
  font-size: clamp(.86rem, 2.5vw, 1.02rem);
  background: none; padding: 0; white-space: nowrap;
}
.cc-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted);
  border-left: 1px solid var(--rule); padding-left: .7rem;
}
.cc-btn:hover .cc-label { color: var(--text); }
.cc-btn.is-copied { border-color: var(--on); }
.cc-btn.is-copied .cc-label { color: var(--on); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Below ~620px the full command is wider than the viewport, and one element
   wider than the viewport scrolls the WHOLE document sideways -- which shows
   up as unrelated text being clipped. So drop the "client.connect " prefix
   from the visible label; the button still copies the complete command. */
@media (max-width: 620px) {
  .cb { justify-content: flex-start; }
  .cc-pre { display: none; }
  .cb-hint { width: 100%; }
  /* The no-JS fallback still carries the FULL command, and nowrap on a 34-char
     string overflows a 320px viewport -- which scrolls the whole document
     sideways and clips unrelated text. Let it wrap; it is a fallback, not a
     showpiece. */
  .cc-plain { white-space: normal; overflow-wrap: anywhere; }
}

/* countdown in the connect bar */
.cb-wipe { display: flex; align-items: baseline; gap: .45rem; margin: 0; }
.cb-k {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--faint);
}
.cb-v { font-weight: 700; color: var(--ember); font-variant-numeric: tabular-nums; }
/* Tabular figures on the big one too: without them the digits are
   proportional and the whole line jitters sideways once a second. */
.big[data-countdown] { font-variant-numeric: tabular-nums; }