/* Shared components for the Minecraft pages (/game, /minecraft, /minecraft/stats).
 *
 * Everything is themed off brand.css custom properties, so light/dark and the
 * per-account override come for free. The ONE exception is a nation's colour: that
 * is the game's own permanent palette (red/blue/yellow/purple), passed in per element
 * as --c. It is only ever used for a swatch, a rail or a bar FILL, never for text on
 * the page background: #FFFF55 on white is unreadable, and the colour is identity,
 * not typography.
 */

/* ── shared bits ─────────────────────────────────────────────────────────── */
.grad{background:linear-gradient(90deg,var(--accent-2),var(--accent-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.arw{display:inline-block;transition:transform .15s}
a:hover > .arw,a:hover .arw{transform:translateX(3px)}

.addr{font-size:13.5px;font-weight:600;color:var(--accent-deep);background:var(--surface-3);
  padding:6px 11px;border-radius:7px;white-space:nowrap;font-variant-numeric:tabular-nums}
.copy{cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--text-dim);
  border-radius:7px;padding:6px 11px;font:inherit;font-size:12px;transition:background .15s,color .15s}
.copy:hover{background:var(--surface-3)}
.copy.done{color:var(--ok);border-color:rgba(63,145,66,.4)}

/* status pill: a soft capsule with a slow heartbeat ring */
.mc-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;
  font-weight:650;font-size:13px;white-space:nowrap}
.mc-pill .beat{width:9px;height:9px;border-radius:50%;position:relative;flex:none}
.mc-pill .beat::after{content:"";position:absolute;inset:0;border-radius:50%;
  animation:mcbeat 2.6s ease-out infinite}
@keyframes mcbeat{0%{box-shadow:0 0 0 0 currentColor;opacity:.55}70%{box-shadow:0 0 0 8px transparent;opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.mc-pill .beat::after{animation:none}}
.mc-pill.ok{background:rgba(63,145,66,.13);color:var(--ok)}.mc-pill.ok .beat{background:var(--ok)}
.mc-pill.down{background:rgba(192,57,43,.12);color:var(--danger)}.mc-pill.down .beat{background:var(--danger)}
.mc-pill.mut{background:var(--surface-3);color:var(--text-faint)}.mc-pill.mut .beat{background:var(--text-faint)}
.mc-pill.era{background:var(--accent-soft);color:var(--accent)}
.mc-pill.era b{font-weight:750}

/* ── hero ────────────────────────────────────────────────────────────────── */
.mc-hero{position:relative;overflow:hidden;margin:14px 0 26px;padding:26px 26px 24px;
  border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);
  background:radial-gradient(120% 140% at 12% 0%,var(--surface-2) 0%,var(--surface) 55%,var(--bg-soft) 100%)}
.mc-flags{position:absolute;inset:0 0 auto 0;height:4px;display:flex}
.mc-flags i{flex:1;background:var(--c)}
.mc-eyebrow{margin:0;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-faint)}
.mc-hero h2{margin:7px 0 0;font-size:clamp(30px,6vw,42px);font-weight:800;letter-spacing:-.03em;
  line-height:1.04;color:var(--text)}
.mc-tag{margin:9px 0 0;font-size:15px;color:var(--text-dim);line-height:1.6;max-width:56ch}
.mc-heroline{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.mc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
.mc-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 19px;border-radius:11px;
  font-weight:650;font-size:14.5px;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,var(--accent-2),var(--accent-deep));
  box-shadow:var(--shadow-sm);transition:filter .15s,transform .15s,box-shadow .15s}
.mc-btn:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:var(--shadow)}
.mc-btn:active{transform:translateY(0)}
/* Secondary CTA (proximity voice). Same shape and weight as the primary button so the
   pair reads as one row, but outlined rather than filled: two solid gradient buttons
   side by side would compete, and the standings link is the one most people want. */
.mc-btn.alt{background:none;color:var(--text);border:1px solid var(--line,#2a3138);
  box-shadow:none}
.mc-btn.alt:hover{border-color:var(--accent-2);color:var(--text);filter:none}
.mc-addr{display:inline-flex;align-items:center;gap:8px}

/* ── live map ────────────────────────────────────────────────────────────── */
.mc-map{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);background:var(--surface-3)}
.mc-map iframe{display:block;width:100%;height:clamp(320px,52vh,540px);border:0}
.mc-mapopen{position:absolute;right:12px;bottom:12px;padding:8px 14px;border-radius:9px;
  font-size:12.5px;font-weight:650;text-decoration:none;color:var(--text);
  background:var(--header-bg);border:1px solid var(--line);backdrop-filter:blur(8px);
  box-shadow:var(--shadow-sm);transition:transform .15s,color .15s}
.mc-mapopen:hover{transform:translateY(-1px);color:var(--accent-2)}
.mc-note{margin:11px 2px 0;font-size:12.5px;color:var(--text-faint);line-height:1.6}

/* ── prose + fact cards ──────────────────────────────────────────────────── */
.mc-blurb p{margin:0 0 13px;font-size:14.5px;line-height:1.75;color:var(--text-dim);max-width:70ch}
.mc-blurb p:last-child{margin-bottom:0}
.mc-blurb b{color:var(--text);font-weight:650}
.mc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px;margin-top:20px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 17px;box-shadow:var(--shadow-sm)}
.fact .fi{display:block;font-size:19px;line-height:1;margin-bottom:9px}
.fact b{display:block;font-size:14px;font-weight:650;color:var(--text);margin-bottom:5px}
.fact span:not(.fi){display:block;font-size:12.5px;color:var(--text-faint);line-height:1.6}

/* ── standings board (compact, on /minecraft) ────────────────────────────── */
.mc-board{display:block;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:8px 8px 6px;transition:box-shadow .15s,border-color .15s}
.mc-board:hover{box-shadow:var(--shadow);border-color:var(--accent-soft)}
.mc-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius-sm)}
.mc-row + .mc-row{border-top:1px solid var(--line-soft)}
.mc-rank{width:30px;flex:none;font-size:12px;font-weight:750;color:var(--text-faint);
  font-variant-numeric:tabular-nums}
.mc-swatch{width:11px;height:11px;flex:none;border-radius:3px;background:var(--c);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.mc-name{flex:none;min-width:0;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14px;font-weight:650;color:var(--text)}
.mc-bar{flex:1;min-width:40px;height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.mc-bar i{display:block;height:100%;border-radius:99px;background:var(--c);
  transition:width .5s cubic-bezier(.2,.7,.3,1)}
.mc-pts{flex:none;width:38px;text-align:right;font-size:15px;font-weight:750;color:var(--text);
  font-variant-numeric:tabular-nums}
.mc-boardmore{display:block;padding:10px 12px 8px;font-size:12.5px;font-weight:650;color:var(--accent-2)}
.mc-empty{padding:22px;text-align:center;color:var(--text-faint);font-size:13px}
.mc-updated{margin:22px 2px 0;font-size:11.5px;color:var(--text-faint)}

/* ── full standings (on /minecraft/stats) ────────────────────────────────── */
.mc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.mc-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px 19px 17px}
.mc-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--c)}
.mc-card.lead{box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--c) 45%,var(--line))}
.mc-card.lead::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,color-mix(in srgb,var(--c) 9%,transparent),transparent 62%)}
.mc-cardtop{display:flex;align-items:center;gap:10px}
.mc-place{font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:var(--surface-3);color:var(--text-faint)}
.mc-card.lead .mc-place{background:color-mix(in srgb,var(--c) 20%,transparent);color:var(--text)}
.mc-crown{margin-left:auto;font-size:17px;line-height:1}
.mc-cardname{margin:12px 0 0;display:flex;align-items:center;gap:9px;font-size:20px;font-weight:750;
  letter-spacing:-.02em;color:var(--text);line-height:1.2}
.mc-cardsub{margin:4px 0 0;font-size:11.5px;color:var(--text-faint)}
.mc-score{display:flex;align-items:baseline;gap:7px;margin-top:14px}
.mc-score .n{font-size:36px;font-weight:800;letter-spacing:-.03em;color:var(--text);
  font-variant-numeric:tabular-nums;line-height:1}
.mc-score .u{font-size:12px;font-weight:650;color:var(--text-faint);text-transform:uppercase;
  letter-spacing:.07em}
.mc-card .mc-bar{margin-top:12px;height:8px}
.mc-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.mc-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:5px 10px;border-radius:999px;background:var(--surface-3);color:var(--text-dim)}
.mc-chip .ck{color:var(--text-faint);font-weight:700}

/* summary tiles */
.mc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px;margin:18px 0 4px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 17px;box-shadow:var(--shadow-sm)}
.tile .k{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--text-faint);font-weight:700}
.tile .v{font-size:26px;font-weight:750;letter-spacing:-.02em;margin-top:6px;color:var(--text);
  font-variant-numeric:tabular-nums;line-height:1.15}
.tile .s{font-size:12px;color:var(--text-dim);margin-top:3px}
.tile.hero{background:linear-gradient(135deg,var(--accent-2),var(--accent-deep));border-color:transparent}
.tile.hero .k{color:rgba(255,255,255,.85)}.tile.hero .v{color:#fff}.tile.hero .s{color:rgba(255,255,255,.92)}

/* era track: one segment per era, filled up to the current one */
.mc-era{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow-sm)}
.mc-eratop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mc-eratop b{font-size:16px;font-weight:750;color:var(--text)}
.mc-eratop span{font-size:12.5px;color:var(--text-faint)}
.mc-track{display:flex;gap:4px;margin-top:12px}
.mc-track i{flex:1;height:8px;border-radius:3px;background:var(--surface-3)}
.mc-track i.on{background:linear-gradient(90deg,var(--accent-2),var(--accent-deep))}
.mc-track i.now{box-shadow:0 0 0 2px var(--accent-glow)}
.mc-eranames{display:flex;justify-content:space-between;gap:6px;margin-top:8px;
  font-size:10.5px;color:var(--text-faint);letter-spacing:.02em}
.mc-eranames span{flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-eranames span.now{color:var(--accent);font-weight:700}
@media (max-width:620px){.mc-eranames{display:none}}

/* ── /game: the Minecraft feature card (the one link) ────────────────────── */
.gm-feature{position:relative;display:block;overflow:hidden;text-decoration:none;color:inherit;
  border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);padding:26px 26px 24px;
  background:radial-gradient(120% 150% at 88% 0%,var(--surface-2) 0%,var(--surface) 52%,var(--bg-soft) 100%);
  transition:transform .16s,box-shadow .16s,border-color .16s}
.gm-feature:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent-soft)}
.gm-feature:active{transform:translateY(0)}
.gm-feature h3{margin:8px 0 0;font-size:clamp(25px,5vw,34px);font-weight:800;letter-spacing:-.03em;
  color:var(--text);line-height:1.06}
/* Scoped to .gm-lede so it doesn't also restyle .mc-eyebrow (same element type). */
.gm-feature p.gm-lede{margin:10px 0 0;font-size:14.5px;color:var(--text-dim);line-height:1.65;max-width:52ch}
.gm-enter{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;font-weight:700;
  color:var(--accent-2)}
/* The feature card's own mini standings strip: same rows, no interactive children
   (it lives INSIDE the card's <a>, so nothing in here may be focusable). */
.gm-mini{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.gm-mini .mc-row{padding:7px 0}
.gm-mini .mc-row + .mc-row{border-top:0}

/* ── /game: the connect card ─────────────────────────────────────────────── */
/* One server, so the address IS the content: it gets the size and the weight, and
   everything else on the card is a label around it. */
.gm-connect{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px 22px 18px}
.gm-connect::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--accent-2),var(--accent-deep))}
.gm-connect-k{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-faint)}
.gm-connect-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:9px}
.gm-ip{font-size:clamp(22px,5.2vw,33px);font-weight:800;letter-spacing:-.025em;color:var(--text);
  line-height:1.1;word-break:break-all;
  /* selectable + monospaced digits so the address reads as something you copy */
  font-variant-numeric:tabular-nums;user-select:all}
.gm-connect .copy{padding:8px 15px;font-size:13px;font-weight:600}
.gm-connect-meta{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:13px 0 0;
  font-size:13px;color:var(--text-dim)}
.gm-connect-meta b{color:var(--text);font-weight:700;letter-spacing:.01em}
.gm-sep{width:3px;height:3px;border-radius:50%;background:var(--text-faint);flex:none}
/* Unpublished: no listener behind the address, so drop the emphasis with it. */
.gm-connect.off::before{background:var(--text-faint)}
.gm-connect.off .gm-ip{color:var(--text-faint);font-weight:700}
.gm-connect.off .copy{display:none}

/* ── Queue Skip ──────────────────────────────────────────────────────────────
   The purchase widget, shared by /game and /minecraft (qs.js renders into it).
   Same card language as .gm-connect so it reads as part of the page rather than
   as an ad bolted onto it. */
.qs-card{border:1px solid var(--line,#2a3138);border-radius:14px;padding:18px 18px 16px;
  background:var(--card,rgba(255,255,255,.03))}
.qs-lede p{margin:0 0 10px;color:var(--text-dim);font-size:14px;line-height:1.65;max-width:70ch}
.qs-lede p:last-child{margin-bottom:0}
.qs-lede b{color:var(--text)}
/* The badge, shown at the size players actually see it. */
.qs-plus{color:#FFAA00;font-weight:800}
.qs-buy{margin-top:16px;padding-top:16px;border-top:1px solid var(--line,#2a3138)}
.qs-lab{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:7px}
.qs-row{display:flex;gap:10px;flex-wrap:wrap}
.qs-in{flex:1 1 12rem;min-width:0;padding:11px 13px;border-radius:9px;font:inherit;
  font-size:15px;color:var(--text);background:var(--bg,#0f1215);
  border:1px solid var(--line,#2a3138)}
.qs-in:focus{outline:2px solid #80213b;outline-offset:1px}
.qs-go{flex:0 0 auto;padding:11px 20px;border:0;border-radius:9px;font:inherit;
  font-size:15px;font-weight:700;color:#fff;background:#80213b;cursor:pointer}
.qs-go:hover{background:#932644}
.qs-go[disabled]{opacity:.55;cursor:progress}
.qs-note{margin:10px 0 0;font-size:13px;color:var(--text-dim);line-height:1.55}
.qs-note.bad{color:#ff6b6b}
.qs-note.good{color:#4ade80}

/* ── The address, front and centre ───────────────────────────────────────────
   The single thing a visitor must leave with. Sized like a headline, not like a
   field: it is read off a screen and typed into a game, often from a phone. */
.mc-join{margin:22px 0 0;padding:18px 20px;border-radius:14px;
  border:1px solid var(--line,#2a3138);background:var(--card,rgba(255,255,255,.03))}
.mc-join-k{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-dim)}
.mc-join-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mc-join-addr{font-size:clamp(20px,4.2vw,30px);font-weight:800;letter-spacing:-.02em;
  color:var(--text);word-break:break-all;font-variant-ligatures:none}
.mc-join-copy{flex:none;padding:9px 16px;border-radius:9px;border:1px solid var(--line,#2a3138);
  background:none;color:var(--text);font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;
  transition:border-color .15s,color .15s}
.mc-join-copy:hover{border-color:var(--accent-2)}
.mc-join-copy.ok{border-color:#4ade80;color:#4ade80}
.mc-join-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:10px 0 0;font-size:13px;color:var(--text-dim)}
.mc-join-meta b{color:var(--text);font-weight:650}
.mc-join-sep{width:3px;height:3px;border-radius:50%;background:var(--text-faint);flex:none}

/* ── Section tabs ────────────────────────────────────────────────────────────
   A sub-header under the site header. Always open: every destination visible at
   all times, nothing to click before you can see where you can go. */
.mc-tabs{display:flex;gap:4px;margin:6px 0 20px;padding:5px;border-radius:12px;
  border:1px solid var(--line,#2a3138);background:var(--card,rgba(255,255,255,.03));
  /* Five tabs do not fit on a phone. The STRIP scrolls, never the page: wrapping to a
     second row would push the server address below the fold on small screens. */
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.mc-tabs::-webkit-scrollbar{height:5px}
.mc-tabs::-webkit-scrollbar-thumb{background:var(--line,#2a3138);border-radius:3px}
.mc-tab{flex:0 0 auto;padding:9px 15px;border-radius:8px;text-decoration:none;
  white-space:nowrap;font-size:14px;font-weight:650;color:var(--text-dim);
  transition:background .14s,color .14s}
.mc-tab:hover{background:var(--hover,rgba(255,255,255,.05));color:var(--text)}
/* The page you are on. Filled rather than underlined so it reads at a glance on a
   strip that may be scrolled halfway. */
.mc-tab.on{background:var(--accent-deep,#80213b);color:#fff}
.mc-tab:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

/* Sub-page heading: smaller than the hub hero, same family. */
.mc-sub{margin:16px 2px 20px}
.mc-sub h2{margin:0;font-size:27px;font-weight:750;letter-spacing:-.02em;color:var(--text)}
.mc-sub p{margin:7px 0 0;color:var(--text-dim);font-size:14px;max-width:66ch;line-height:1.6}
.mc-back{display:inline-block;margin:0 0 14px;font-size:13.5px;color:var(--text-dim);
  text-decoration:none}
.mc-back:hover{color:var(--text)}

/* Plus benefits, listed before the price so the ask follows the offer. */
.qs-benefits{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.qs-benefits li{display:flex;gap:10px;font-size:14px;color:var(--text-dim);line-height:1.55}
.qs-benefits li::before{content:"+";flex:none;color:#FFAA00;font-weight:800}
.qs-benefits b{color:var(--text);font-weight:650}