/* The site palette is the launcher's palette, so the launcher, the game's login
   screen, and the website read as one product. */
:root {
  --bg: #050a17;
  --surface: #081226;
  --card: #0c1c35;
  --field: #06101f;
  --accent: #1f7ae8;
  --accent-2: #efaa31;
  --text: #e8eff9;
  --muted: #97a9c2;
  --ok: #3ed089;
  --bad: #ed5b5b;
  --warn: #f6c04a;
  --line: #1b2f4d;
}


* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(31, 122, 232, 0.22), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The operator's own artwork, when it is present. It is layered under a scrim so
   body text keeps its contrast whatever the image contains. */
body.has-backdrop::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("/site/background");
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  z-index: -1;
  pointer-events: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--field); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }

.top, main, .bottom { width: min(1080px, 100% - 32px); margin-inline: auto; }
main { flex: 1; padding-bottom: 40px; }

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 0;
}

.brand { display: flex; align-items: center; gap: 12px; color: var(--text); }
.brand:hover { text-decoration: none; }
.logo { height: 46px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 17px; letter-spacing: 0.02em; }
.brand-text small { color: var(--muted); font-size: 12px; }

.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav a {
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.nav a:hover { color: var(--text); background: rgba(31, 122, 232, 0.14); text-decoration: none; }
.nav a.cta { background: var(--accent); color: #fff; font-weight: 600; }
.nav a.cta:hover { background: #2f8bfa; }

.hero { padding: 26px 0 8px; }
.hero.compact { padding: 14px 0 4px; }
.hero h1 {
  font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.lede { color: var(--muted); max-width: 62ch; margin: 0 0 16px; font-size: 16px; }
.about-intro { max-width: 900px; }
.about-disclaimer { margin: 20px 0 24px; line-height: 1.6; }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 16px; margin: 18px 0 42px; }
.about-grid .panel { margin: 0; }
.about-grid h2 { margin: 4px 0 14px; }
.about-grid p:last-child { margin-bottom: 0; }

.status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.addr { color: var(--muted); font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.who { color: var(--muted); font-size: 13px; }

.pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.pill.live { color: var(--ok); background: rgba(62, 208, 137, 0.12); border-color: rgba(62, 208, 137, 0.4); }
.pill.warn { color: var(--warn); background: rgba(246, 192, 74, 0.12); border-color: rgba(246, 192, 74, 0.4); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 22px 0 6px;
}

.card, .panel {
  background: linear-gradient(180deg, rgba(31, 122, 232, 0.07), transparent 60%), var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.card { padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.card .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.card .v { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card .s { color: var(--muted); font-size: 12px; }

.panel { padding: 20px; margin-top: 20px; }
.panel.narrow { max-width: 440px; margin-inline: auto; }
.panel h1, .panel h2 { margin: 0 0 12px; font-size: 20px; }
.panel h1 { font-size: 26px; }

.stats-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  color: var(--muted);
  font-size: 14px;
}
.stats-inline b { color: var(--text); font-variant-numeric: tabular-nums; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.table th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.table tbody tr:hover { background: rgba(31, 122, 232, 0.08); }
.table .num { font-variant-numeric: tabular-nums; }
.table .name { font-weight: 600; }

.tag { font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; }
.tag.ok { color: var(--ok); border-color: rgba(62, 208, 137, 0.4); }
.tag.warn { color: var(--warn); border-color: rgba(246, 192, 74, 0.4); }
.tag.bad { color: var(--bad); border-color: rgba(237, 91, 91, 0.4); }

form { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 13px; }
input {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  padding: 11px 12px;
  font-size: 15px;
  font-family: inherit;
}
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31, 122, 232, 0.2); }

.registration-field { display:grid; gap:7px; min-width:0; }
.registration-label { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.registration-label label { color:var(--text); }
button.field-info { flex:0 0 28px; width:28px; height:28px; padding:0; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--muted); font:600 14px/1 serif; }
button.field-info:hover,button.field-info[aria-expanded="true"] { color:var(--text); border-color:var(--accent); background:var(--field); }
.field-help,.field-status { margin:0; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.field-help { padding:10px 12px; color:var(--muted); background:var(--field); border-left:2px solid var(--accent); }
.field-help[hidden],.password-strength[hidden] { display:none; }
.field-status { min-height:18px; color:var(--muted); }
.field-status[data-valid="false"] { color:var(--bad); }
.field-status[data-valid="true"] { color:var(--ok); }
[data-registration-form] [aria-invalid="true"] { border-color:var(--bad); }
.password-strength { display:flex; align-items:center; gap:12px; color:var(--warn); font-size:12px; }
.password-strength meter { flex:1; min-width:0; height:8px; }
.password-strength[data-strength="2"],.password-strength[data-strength="3"] { color:var(--ok); }

button {
  background: var(--accent);
  border: 0;
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  font: 600 15px/1 inherit;
  padding: 12px 16px;
}
button:hover { background: #2f8bfa; }

.search { flex-direction: row; gap: 10px; }
.search input { flex: 1; }
.search button { white-space: nowrap; }

/* Admin forms stack: groups of related fields sit side by side, and the whole
   form is a column so a long label never squeezes the field next to it. */
form.stack { gap: 14px; }
form .row { display: flex; gap: 12px; flex-wrap: wrap; }
form .row > label { flex: 1 1 140px; }
.account-suggestions { position: relative; z-index: 8; display: grid; max-height: 240px; overflow-y: auto; border: 1px solid var(--line); background: var(--field); box-shadow: 0 8px 20px #0008; }
.account-suggestions[hidden] { display: none; }
.account-suggestion { display: block; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.account-suggestion:hover, .account-suggestion:focus-visible { background: var(--panel); outline: 2px solid var(--accent); }
form.inline { display: inline; margin: 0; padding: 0; }
button.quiet {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  padding: 6px 12px;
}
button.quiet:hover { background: rgba(237, 91, 91, 0.12); border-color: var(--bad); color: var(--text); }

select {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  padding: 11px 12px;
  font: inherit;
  font-size: 15px;
}
select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31, 122, 232, 0.2); }

/* A checkbox row reads as one line, not as an input above its own label. */
label.check { flex-direction: row; align-items: center; gap: 9px; color: var(--text); font-size: 14px; }
label.check input { width: 18px; height: 18px; padding: 0; accent-color: var(--accent); }

/* The podium. Three places, each with its own metal, so the landing page reads as
   a welcome rather than as a truncated league table. */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 14px; }
@media (max-width: 680px) { .podium { grid-template-columns: 1fr; } }
.trophy {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
}
.trophy .medal { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.trophy .who { font-size: 18px; font-weight: 700; }
.trophy .rank { font-size: 13px; color: var(--muted); }
.trophy .detail { font-size: 12px; color: var(--muted); }
.trophy.place-0 { border-color: rgba(239, 170, 49, 0.6); }
.trophy.place-0 .medal { color: var(--accent-2); }
.trophy.place-1 { border-color: rgba(203, 213, 225, 0.45); }
.trophy.place-1 .medal { color: #cbd5e1; }
.trophy.place-2 { border-color: rgba(214, 145, 96, 0.45); }
.trophy.place-2 .medal { color: #d69160; }

/* The period tabs on the ranking page. */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 0; }
.tabs a {
  padding: 7px 14px; border-radius: 999px; font-size: 13px;
  text-decoration: none; color: var(--muted); border: 1px solid var(--line);
}
.tabs a.on { color: var(--text); background: rgba(31, 122, 232, 0.16); border-color: var(--accent); }
.ranking-periods { margin-top:8px; }
.ranking-region-select { display:grid; gap:8px; max-width:520px; margin:18px 0 22px; }
.ranking-region-select label { color:var(--muted); font-size:12px; }
.ranking-region-controls { display:flex; align-items:stretch; gap:8px; }
.ranking-region-controls select { flex:1; min-width:0; }
.regional-heading { display:flex; align-items:center; gap:10px; margin:22px 0 12px; }
.regional-heading img { object-fit:cover; border-radius:3px; box-shadow:0 0 0 1px var(--line); }
.regional-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:12px; margin:20px 0 24px; }
.regional-podium-place { display:flex; min-width:0; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; padding:14px 12px 12px; text-align:center; border:1px solid var(--line); border-bottom-width:5px; border-radius:10px 10px 5px 5px; background:linear-gradient(180deg,rgba(31,122,232,.10),var(--card)); }
.regional-podium-place.place-1 { grid-column:2; grid-row:1; min-height:208px; border-color:rgba(239,170,49,.65); background:linear-gradient(180deg,rgba(239,170,49,.18),var(--card)); }
.regional-podium-place.place-2 { grid-column:1; grid-row:1; min-height:174px; border-bottom-color:#cbd5e1; }
.regional-podium-place.place-3 { grid-column:3; grid-row:1; min-height:146px; border-bottom-color:#d69160; }
.regional-podium .podium-place { color:var(--accent-2); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.regional-podium .podium-player { max-width:100%; overflow-wrap:anywhere; font-size:clamp(14px,2vw,19px); }
.regional-podium .podium-overall { color:var(--muted); font-size:11px; }
.regional-podium .rank-cell img { display:block; image-rendering:pixelated; }
.profile-state-standing { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin:20px 0; padding:18px; border:1px solid rgba(31,122,232,.35); border-radius:10px; background:linear-gradient(110deg,rgba(31,122,232,.12),var(--card)); }
.profile-state-standing h2 { margin:0; font-size:18px; }
.profile-state-standing .eyebrow { margin:0 0 3px; }
.state-standing-result { display:flex; min-width:0; align-items:center; gap:10px; }
.state-standing-result img { flex:none; object-fit:cover; border-radius:3px; }
.state-standing-result p { margin:0; color:var(--muted); }
.state-standing-result strong { color:var(--text); white-space:nowrap; }
.state-standing-result span { margin:0 3px; }
@media(max-width:680px) { .ranking-region-controls { flex-direction:column; }.regional-podium { grid-template-columns:1fr; align-items:stretch; }.regional-podium-place.place-1,.regional-podium-place.place-2,.regional-podium-place.place-3 { grid-column:1; grid-row:auto; min-height:0; }.profile-state-standing { align-items:flex-start; flex-direction:column; } }

/* The player's own page: the badge beside the account it belongs to. The badge is
   the client's own artwork, so it is drawn at its own size rather than smoothed. */
.profile { display: flex; align-items: center; gap: 18px; margin: 6px 0 14px; flex-wrap: wrap; }
.badge {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line);
}
.badge img { width: 64px; height: 64px; image-rendering: pixelated; }
.badge .level { font-size: 14px; font-weight: 700; }
.badge .where { font-size: 12px; color: var(--muted); }
.profile .who { display: flex; flex-direction: column; gap: 4px; }
.profile .who strong { font-size: 22px; }
.profile .who small { color: var(--muted); }

.pride-chip { display:inline-flex; align-self:flex-start; max-width:100%; padding:3px 9px; border:1px solid rgba(239,170,49,.48); border-radius:999px; background:rgba(239,170,49,.10); color:#ffd690; font-size:11px; font-weight:700; letter-spacing:.02em; overflow-wrap:anywhere; }
.combat-dashboard { min-width:0; max-width:100%; margin:22px 0; padding:24px; border:1px solid rgba(31,122,232,.35); border-radius:12px; background:radial-gradient(circle at 95% 0%,rgba(31,122,232,.17),transparent 45%),var(--field); }
.combat-dashboard-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.combat-dashboard-heading h3 { margin:0; font-size:21px; }
.combat-dashboard-heading .eyebrow { margin:0 0 2px; }
.combat-season { color:var(--muted); font-size:12px; }
.combat-overview { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1fr); align-items:stretch; gap:18px; }
.combat-radar { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; margin:0; padding:12px; border:1px solid var(--line); border-radius:8px; background:rgba(5,10,23,.42); }
.combat-radar svg { display:block; width:min(100%,340px); max-width:100%; height:auto; overflow:visible; }
.radar-grid { fill:rgba(57,126,212,.035); stroke:rgba(111,155,213,.26); stroke-width:1; }
.radar-grid-outer { stroke:rgba(111,155,213,.5); }
.radar-axis { fill:none; stroke:rgba(111,155,213,.3); stroke-width:1; }
.radar-value { fill:rgba(244,181,74,.24); stroke:#f4b54a; stroke-width:2.5; stroke-linejoin:round; }
.radar-center { fill:#f4b54a; }
.combat-radar text { fill:var(--muted); font-size:10px; font-weight:700; letter-spacing:.05em; }
.combat-radar figcaption { max-width:300px; color:var(--muted); text-align:center; font-size:11px; line-height:1.45; }
.combat-highlights { display:grid; grid-template-columns:1fr; gap:10px; }
.combat-highlight { display:flex; flex-direction:column; gap:2px; min-width:0; padding:16px; border:1px solid var(--line); border-radius:8px; background:rgba(12,28,53,.83); }
.combat-highlight small { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.combat-highlight strong { color:var(--accent-2); font-size:clamp(24px,3vw,36px); line-height:1.15; font-variant-numeric:tabular-nums; }
.combat-highlight span { color:var(--muted); font-size:12px; }
.combat-stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); gap:9px; margin:16px 0 0; }
.combat-stat-grid div { min-width:0; padding:13px 14px; border:1px solid var(--line); border-radius:7px; background:rgba(5,10,23,.45); }
.combat-stat-grid dt { color:var(--muted); font-size:11px; }
.combat-stat-grid dd { margin:4px 0 0; font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; }
.combat-coverage { margin:14px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
@media (max-width:850px) { .combat-overview { grid-template-columns:minmax(0,1fr); }.combat-highlights { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:680px) { .combat-dashboard { padding:17px; }.combat-highlights { grid-template-columns:1fr; }.combat-highlight { padding:13px; } }

/* The four steps to playing, numbered because they are a sequence: running the
   launcher before having it does not work. */
.steps { margin: 6px 0 12px; padding-left: 22px; }
.steps li { margin: 0 0 10px; }
.steps li b { color: var(--text); }
.steps li code { background: var(--field); padding: 1px 5px; border-radius: 4px; }

.alert { border-radius: 9px; padding: 11px 13px; margin: 12px 0; font-size: 14px; }
.alert.error { background: rgba(237, 91, 91, 0.12); border: 1px solid rgba(237, 91, 91, 0.45); color: #ffd7d7; }
.alert.notice { background: rgba(62, 208, 137, 0.12); border: 1px solid rgba(62, 208, 137, 0.45); color: #d8ffee; }

.site-notice-board { border-color: rgba(237, 182, 85, .48); }
.site-notice { border-top: 1px solid var(--line); padding: 16px 0; }
.site-notice:first-of-type { border-top: 0; }
.site-notice-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.site-notice-meta h3 { margin: 0; overflow-wrap: anywhere; }
.notice-new { font-size: 10px; vertical-align: middle; }
.site-notice-board .notice-updated { margin: -4px 0 12px; font-size: 12px; }
.site-notice-meta time { color: var(--muted); font-size: 12px; }
.site-notice p { white-space: pre-line; overflow-wrap: anywhere; margin: 10px 0 0; }

.muted { color: var(--muted); font-size: 14px; }

.bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  padding: 16px 0 26px;
}

@media (max-width: 620px) {
  .table { font-size: 13px; }
  .table th:nth-child(7), .table td:nth-child(7),
  .table th:nth-child(8), .table td:nth-child(8),
  .table th:nth-child(9), .table td:nth-child(9) { display: none; }
  .panel { padding: 16px; }
}

/* WTMY redesign: one presentation layer shared across public/player/admin pages. */
:root { --bg:#0b1018; --surface:#111a26; --card:#151f2c; --field:#0b131e; --accent:#edb655; --accent-2:#edb655; --text:#f2f0e9; --muted:#a7b3c2; --line:#2a3543; color-scheme:dark; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { background:radial-gradient(ellipse at 80% 0,#20314666,transparent 55%),var(--bg); line-height:1.65; }
body.has-backdrop::before { opacity:.12; }
.top,main,.bottom { width:min(1200px,100% - 64px); }
.top { padding:24px 0; border-bottom:1px solid var(--line); }
main { padding:32px 0 72px; min-width:0; }
.logo { width:68px; height:62px; object-fit:contain; }
.brand-text small { letter-spacing:.15em; font-size:10px; margin-top:6px; }
.nav a { border-radius:3px; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.cta,button { display:inline-flex; align-items:center; justify-content:center; gap:24px; background:var(--accent); color:#17120b; border:1px solid var(--accent); border-radius:3px; font:700 14px/1.4 "Segoe UI",sans-serif; padding:14px 22px; cursor:pointer; text-decoration:none; }
.cta:hover,button:hover,.nav a.cta:hover { background:#f5ca81; color:#17120b; text-decoration:none; }
.nav a.cta { color:#17120b; }
.button-secondary { display:inline-flex; align-items:center; justify-content:center; border:1px solid #6c7888; border-radius:3px; color:var(--text); padding:13px 22px; font-size:14px; font-weight:600; }
.button-secondary:hover { border-color:var(--accent); text-decoration:none; }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:.2em; color:var(--accent); text-transform:uppercase; margin:0 0 18px; }
.landing-hero { display:grid; grid-template-columns:1.35fr 1fr; align-items:center; gap:40px; min-height:470px; padding:42px 0 55px; }
.landing-hero h1 { font-size:clamp(42px,5.5vw,72px); font-weight:850; letter-spacing:-.045em; line-height:1.03; text-transform:uppercase; }
.landing-hero h1 em { color:var(--accent); font-style:normal; }
.lede { line-height:1.85; max-width:52ch; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin:26px 0; }
.hero-copy>.muted { font-size:12px; margin:20px 0 0; max-width:60ch; }
.hero-mark { min-height:350px; display:flex; align-items:center; justify-content:center; flex-direction:column; border:1px solid #edb65544; background:radial-gradient(ellipse,#edb65510,transparent 70%),linear-gradient(130deg,#18263770,#0b101888); transform:rotate(-2deg); position:relative; }
.hero-mark::before,.hero-mark::after { content:""; position:absolute; width:34px; height:34px; border-color:var(--accent); border-style:solid; }
.hero-mark::before { top:-1px; left:-1px; border-width:2px 0 0 2px; }
.hero-mark::after { right:-1px; bottom:-1px; border-width:0 2px 2px 0; }
.hero-mark img { width:min(300px,85%); height:250px; object-fit:contain; transform:rotate(2deg); }
.hero-caption { font-size:10px; letter-spacing:.35em; color:var(--muted); margin:16px; }
.wordmark { font-size:94px; font-weight:900; letter-spacing:-.09em; }.wordmark span { color:var(--accent); }
.cards { gap:0; border:1px solid var(--line); margin:0 0 34px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.card { padding:24px 26px; border:0; border-right:1px solid var(--line); border-radius:0; background:#111a26e8; }.card:last-child { border-right:0; }.card .v { font-size:38px; }.card .k { font-size:10px; }
.panel { background:linear-gradient(120deg,#172230,#111a26); border-radius:4px; padding:30px; margin-top:24px; min-width:0; overflow-x:auto; }
.panel h1 { font-size:32px; }.panel h2 { font-size:25px; }.panel.narrow { width:100%; max-width:490px; }
.download-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; margin:24px 0 32px; }
.download-card { display:flex; flex-direction:column; gap:8px; padding:24px; background:#edb65508; border:1px solid #edb65555; color:var(--muted); font-size:13px; }.download-card .eyebrow { margin:0; }.download-card strong { font-size:19px; color:var(--text); }.download-card:hover { background:#edb65512; text-decoration:none; border-color:var(--accent); }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; list-style:none; counter-reset:steps; padding:0; margin:28px 0; }.steps li { counter-increment:steps; position:relative; padding-top:38px; font-size:13px; color:var(--muted); }.steps li::before { content:"0" counter(steps); position:absolute; top:0; font-size:20px; font-weight:700; color:var(--accent); }.steps b { display:block; margin-bottom:8px; font-size:14px; }.steps span { display:block; }
.trophy { padding:24px; border-radius:3px; background:var(--field); }.trophy .who { color:var(--text); overflow-wrap:anywhere; }.table th,.table td { padding:14px 12px; }.table th { background:#0b131e70; }.table input { min-width:90px; max-width:150px; }
input,select { width:100%; min-width:0; border-radius:3px; border-color:#394657; }form { gap:18px; }form .row { gap:16px; }button.quiet { border-radius:3px; }.check input { flex-shrink:0; }
.auth-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; min-height:620px; padding:30px 50px; }.auth-intro h1 { font-size:clamp(38px,4.3vw,58px); line-height:1.1; letter-spacing:-.035em; }.auth-intro p:not(.eyebrow) { color:var(--muted); max-width:35ch; }.auth-layout .panel { margin:0; padding:38px; }.auth-layout button { width:100%; }.tabs a { border-radius:3px; }
.profile { gap:24px; margin:24px 0; }.badge { border-color:#edb65555; border-radius:3px; background:var(--field); padding:20px; }.profile .who strong { font-size:28px; color:var(--text); }.alert { border-radius:3px; }.addr { overflow-wrap:anywhere; }
.flag-pair { display:inline-flex; align-items:center; gap:6px; vertical-align:middle; }
.flag-pair img { display:inline-block; object-fit:contain; border:1px solid #ffffff30; border-radius:2px; box-shadow:0 2px 8px #0005; }
.rank-cell { min-width:76px; text-align:center; }.rank-cell img,.rank-badge img { display:inline-block; width:auto; max-width:64px; object-fit:contain; vertical-align:middle; }
.rank-badge { display:flex; align-items:center; justify-content:center; min-height:62px; }
.rank-name { display:block; color:var(--muted); font-size:11px; text-align:center; }
.profile-nav { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; padding-bottom:16px; border-bottom:1px solid var(--line); }
.profile-nav a { border:1px solid var(--line); padding:7px 13px; border-radius:3px; font-size:12px; color:var(--muted); }.profile-nav a:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
.rank-progress { margin-top:28px; padding-top:18px; border-top:1px solid var(--line); }.rank-progress h2 { font-size:18px; margin-bottom:6px; }.rank-progress p { margin:6px 0; }
.progress-track { width:100%; height:12px; overflow:hidden; background:var(--field); border:1px solid var(--line); border-radius:999px; }.progress-track span { display:block; height:100%; background:linear-gradient(90deg,#a97525,var(--accent)); border-radius:inherit; transition:width .25s ease; }
.profile-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }.profile-settings h3 { margin:0 0 8px; font-size:18px; }
.item-cell { min-width:82px; }.item-icon { display:block; width:56px; height:56px; object-fit:contain; border:1px solid var(--line); border-radius:4px; background:var(--field); }
.download-page { max-width:900px; margin-inline:auto; }.download-actions { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0; }.download-actions .button-secondary { align-items:center; }
.download-showcase { display:flex; align-items:center; justify-content:center; gap:28px; min-height:190px; padding:22px 28px; margin:26px 0 20px; border:1px solid var(--line); background:radial-gradient(ellipse at 28% 50%,#edb65512,transparent 58%),var(--field); }
.download-brand-logo { display:block; width:min(100%,390px); height:150px; object-fit:contain; filter:drop-shadow(0 8px 22px #0008); }
.download-wordmark { font-size:clamp(60px,12vw,100px); font-weight:900; letter-spacing:-.09em; color:var(--text); line-height:1; }.download-wordmark span { color:var(--accent); }
.download-showcase-copy { display:flex; flex-direction:column; gap:5px; padding-left:26px; border-left:1px solid var(--line); color:var(--text); }.download-showcase-copy .eyebrow { margin:0; }.download-showcase-copy strong { font-size:17px; }
.download-cta { gap:14px; min-height:74px; text-align:left; }.drive-logo { width:38px; height:38px; flex:0 0 auto; }.download-cta-copy { display:flex; flex-direction:column; align-items:flex-start; gap:4px; line-height:1.2; }.download-cta-copy strong { font-size:15px; }.download-cta-copy small { color:#493719; font-size:12px; font-weight:500; }
.download-cta:focus-visible { outline-color:var(--text); }
.download-page .steps { margin-top:36px; }
.moderation-status { min-width:160px; }
.moderation-status small { display:block; max-width:190px; margin-top:4px; color:var(--muted); overflow-wrap:anywhere; }
[hidden] { display:none !important; }
@media(max-width:680px) { .download-showcase { flex-direction:column; gap:16px; padding:18px; text-align:center; }.download-brand-logo { height:120px; }.download-showcase-copy { align-items:center; padding:14px 0 0; border-left:0; border-top:1px solid var(--line); }.download-cta { width:100%; justify-content:space-between; padding:12px 14px; gap:10px; }.download-cta-copy strong { font-size:13px; } }
.skip-link { position:fixed; left:12px; top:-100px; padding:12px; background:var(--accent); color:var(--bg); z-index:99; }.skip-link:focus { top:12px; }
.flag-pair img { width:30px; height:18px; max-height:none; object-fit:contain; flex:0 0 30px; image-rendering:auto; }
.badge .flag-pair { margin-top:10px; }
.site-disclaimer { margin:18px 0 34px; color:var(--muted); font-size:12px; text-align:center; }
.live-community-events { border-color:#edb65566; }
.live-event-card { margin:14px 0; padding:18px; background:var(--field); border:1px solid var(--line); }
.live-event-card h3 { margin:10px 0 6px; }
.milestone-strip { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
.milestone-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.milestone-cards article { display:flex; flex-direction:column; gap:6px; padding:14px; background:var(--field); border:1px solid var(--line); }
.item-search { align-items:end; }
.item-search label { min-width:170px; }
@media(max-width:1000px) { .landing-hero { gap:24px; }.hero-mark { min-height:310px; }.auth-layout { gap:36px; padding:20px 0; }.cards { grid-template-columns:repeat(2,minmax(0,1fr)); }.card:nth-child(2) { border-right:0; }.card:nth-child(-n+2) { border-bottom:1px solid var(--line); }.steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:680px) { .top,main,.bottom { width:calc(100% - 32px); }.top { padding:18px 0; gap:16px; }.logo { width:48px; height:48px; }.brand-text strong { font-size:13px; }.nav a { padding:9px 10px; }.landing-hero { grid-template-columns:1fr; padding:22px 0 36px; min-height:0; }.hero-mark { display:none; }.landing-hero h1 { font-size:clamp(39px,9vw,58px); }.panel { padding:22px 18px; }.card { padding:18px; }.card .v { font-size:30px; }.auth-layout { grid-template-columns:1fr; gap:24px; min-height:0; }.auth-intro h1 { font-size:38px; }.auth-layout .panel { padding:26px 22px; max-width:none; }.table { min-width:620px; }.table th:nth-child(n),.table td:nth-child(n) { display:table-cell; }.steps { gap:22px 16px; }.search { flex-wrap:wrap; }.search input { flex-basis:65%; } }
@media(max-width:680px) { .profile-settings { grid-template-columns:1fr; gap:24px; }.profile-nav { gap:6px; }.profile-nav a { padding:7px 10px; }.badge { min-width:115px; }.rank-badge { justify-content:flex-start; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Workspaces share navigation, artwork and dialogs across profile and admin. */
[hidden] { display:none !important; }
.section-nav { display:flex; gap:6px; flex-wrap:wrap; padding:6px; background:#0b1320; border:1px solid var(--line); border-radius:12px; margin:20px 0; }
.section-nav a { padding:11px 18px; border:0; border-radius:8px; color:var(--muted); font-weight:650; }
.section-nav a.on { background:var(--accent); color:#18202a; box-shadow:0 3px 12px #0003; }
.page-heading h1 { margin:8px 0; font-size:36px; }
.catalog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; max-height:410px; overflow:auto; margin:22px 0; }
.catalog-card { display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--field); text-align:left; font:inherit; cursor:pointer; }
.catalog-card > button { display:flex; flex-direction:column; gap:8px; border:0; background:none; color:inherit; text-align:left; font:inherit; cursor:pointer; padding:0; }
.catalog-card > .check { margin-top:auto; }
.catalog-art { width:100%; height:100px; object-fit:contain; }
.item-selection { display:flex; gap:24px; align-items:center; padding:18px; background:var(--field); border:1px solid var(--line); border-radius:10px; }
.item-selection .catalog-art { width:160px; }.item-selection label { flex:1; min-width:0; }
.milestone-cards article { border-radius:12px; padding:20px; gap:12px; }.milestone-cards strong { font-size:20px; }
progress { width:100%; height:12px; border:0; border-radius:8px; overflow:hidden; accent-color:var(--accent); }
progress::-webkit-progress-bar { background:#080f19; }progress::-webkit-progress-value { background:linear-gradient(90deg,#b8812d,#f3cb7c); }
.live-event-card { border-radius:12px; border-left:3px solid var(--accent); }.live-event-card h3 { font-size:24px; }
.live-event-card > summary { cursor:pointer; font-size:clamp(18px,2.5vw,24px); font-weight:700; overflow-wrap:anywhere; }
.live-event-card > summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.live-event-card .event-date-range { display:flex; flex-wrap:wrap; gap:3px 16px; margin-top:8px; color:var(--muted); font-size:12px; font-weight:400; line-height:1.5; }
.live-event-card[open] > summary { padding-bottom:12px; border-bottom:1px solid var(--line); }
.live-event-body { padding-top:14px; }
.profile-event-list { list-style:none; margin:0 0 20px; padding:0; }
.profile-event-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px 18px; padding:12px 0; border-bottom:1px solid var(--line); }
.profile-event-row:first-child { border-top:1px solid var(--line); }
.profile-event-title { min-width:0; font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.profile-event-progress { color:var(--muted); font-size:12px; line-height:1.5; font-variant-numeric:tabular-nums; }
.profile-event-status { display:inline-flex; align-items:center; justify-content:flex-end; gap:5px; min-width:72px; color:var(--muted); font-size:12px; white-space:nowrap; }
.profile-event-status.is-active,.profile-event-status.event-completed { color:var(--ok); }
.profile-event-dot { width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:currentColor; }
.profile-event-empty { padding:10px 0; font-size:13px; }
@media(max-width:760px) { .profile-event-row { grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; padding:10px 0; }.profile-event-progress { grid-column:1; grid-row:2; }.profile-event-status { grid-column:2; grid-row:1 / 3; }.profile-event-title { font-size:13px; } }
.table .item-icon { width:100px; height:60px; }.num { font-variant-numeric:tabular-nums; }
@media(max-width:680px) { .item-selection { flex-direction:column; }.section-nav { flex-wrap:nowrap; overflow:auto; }.section-nav a { white-space:nowrap; } }

.catalog-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));max-height:none;overflow:visible}.catalog-art{height:150px;object-fit:contain}.catalog-card{text-decoration:none;color:inherit;min-width:0;overflow-wrap:anywhere}.catalog-card:hover{border-color:var(--accent)}.catalog-pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:20px 0}.catalog-pagination .button{min-width:38px;text-align:center;padding:8px}.catalog-pagination .current{pointer-events:none}.item-selection .catalog-art{width:min(280px,45%);height:160px}

/* Keep live totals ahead of updates and hold the notice board to one viewport. */
.landing-stats { margin:0 0 18px; }
.landing-stats .card { padding:14px 18px; }
.landing-stats .card .v { font-size:28px; line-height:1.15; }
.landing-stats .card .s { font-size:11px; }
.landing-stats .registration-gain { display:inline-block; margin-left:7px; color:var(--ok); font-size:12px; font-weight:650; vertical-align:super; line-height:1; white-space:nowrap; }
.landing-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,320px); gap:24px; align-items:start; }
.landing-updates { min-width:0; }
.landing-updates>.panel:first-child { margin-top:0; }
.landing-podium { margin-top:0; padding:22px 18px; overflow:visible; }
.landing-podium .eyebrow { margin-bottom:8px; font-size:9px; }
.landing-podium h2 { margin:0; font-size:22px; }
.landing-podium .podium-caption { margin:6px 0 18px; font-size:12px; }
.landing-podium .podium { grid-template-columns:minmax(0,1fr); gap:10px; margin:0 0 16px; }
.landing-podium .trophy { display:grid; grid-template-columns:34px minmax(0,1fr) 40px; align-items:center; column-gap:10px; row-gap:10px; padding:14px 12px; min-width:0; border-left-width:3px; }
.landing-podium .trophy.place-0 { background:linear-gradient(110deg,#edb65516,var(--field)); }
.landing-podium .medal { font-size:15px; letter-spacing:0; }
.landing-podium .podium-identity { display:grid; gap:5px; min-width:0; }
.landing-podium .ranking-pride { margin:0; font-size:10px; overflow-wrap:anywhere; }
.landing-podium .who { font-size:15px; line-height:1.3; }
.landing-podium .rank-badge { min-height:40px; font-size:9px; text-align:center; }
.landing-podium .rank-badge img { max-width:40px; max-height:40px; }
.landing-podium .detail { grid-column:1/-1; padding-top:8px; border-top:1px solid var(--line); font-size:11px; line-height:1.5; }
.landing-podium .detail strong { color:var(--text); font-weight:600; }
.podium-link { display:flex; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--line); font-size:12px; }
@media(max-width:900px) { .landing-content { grid-template-columns:minmax(0,1fr); gap:20px; }.landing-podium { width:100%; }.landing-podium .trophy { grid-template-columns:38px minmax(0,1fr) 40px; } }
.online-milestones-compact { display:flex; align-items:center; gap:18px; padding:12px 16px; margin:0 0 10px; border:1px solid #edb65555; border-radius:4px; background:#111a26e8; }
.online-milestones-heading { flex:0 1 220px; min-width:0; }
.online-milestones-heading h2 { margin:0 0 4px; font-size:14px; }
.online-milestones-heading>span { display:block; font-size:11px; }
.online-milestones-list { flex:1; min-width:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:8px 18px; }
.online-milestone-mini { min-width:0; display:grid; gap:5px; }
.online-milestone-status { display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:12px; }
.online-milestone-status small,.online-milestone-reward { font-size:11px; color:var(--muted); }
.online-milestone-mini progress { height:6px; }
@media(max-width:680px) { .online-milestones-compact { align-items:stretch; flex-direction:column; gap:10px; padding:12px; }.online-milestones-heading { flex-basis:auto; }.online-milestones-heading>span { font-size:10px; } }
.site-notice-board { margin-top:0; overflow:visible; }
.site-notice-board .eyebrow { margin-bottom:5px; }
.site-notice-board h2 { margin:0 0 12px; }
.site-notice-scroll { height:270px; overflow-y:auto; overscroll-behavior:contain; padding-right:12px; scrollbar-gutter:stable; }
.site-notice-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:680px) { .landing-stats .card { padding:12px; }.landing-stats .card .v { font-size:25px; }.site-notice-scroll { height:240px; } }

/* The two ranking scopes share one league surface and one player identity. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.community-banner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.community-banner > div { flex:1 1 300px; min-width:0; }
.community-banner h2 { margin-bottom:8px; }
.community-banner p { margin-bottom:0; }
.community-banner .eyebrow { margin:0 0 8px; }
.community-links { display:flex; flex-wrap:wrap; gap:10px; }
.community-links a { gap:8px; white-space:nowrap; }
.community-whatsapp { border-color:#51876b; }
.community-discord { border-color:#777dcc; }
.bottom .community-links { flex-basis:100%; }
.ranking-shell { margin: 24px 0; border: 1px solid var(--line); background: rgba(8,18,38,.96); border-radius: 16px; overflow: hidden; }
.ranking-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 32px; border-bottom: 1px solid var(--line); background: linear-gradient(105deg,#102743,#081226 70%); }
.ranking-heading h1 { margin: 0; font-size: clamp(30px,5vw,48px); line-height: 1.15; letter-spacing: -.04em; }
.ranking-heading p { margin: 8px 0; }
.ranking-title-mark { color: var(--accent-2); margin-left: 12px; }
.ranking-community { text-align: right; display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.ranking-community strong { color: var(--ok); font-size: 27px; font-variant-numeric: tabular-nums; }
.ranking-community small { font-size: 10px; letter-spacing: .12em; margin-left: 6px; }
.ranking-shell .ranking-boards { margin: 0; padding: 12px 32px 0; border-bottom: 1px solid var(--line); }
.ranking-shell .ranking-boards a { padding: 12px 20px; border-radius: 0; border-bottom: 3px solid transparent; }
.ranking-shell .ranking-boards a.on { border-bottom-color: var(--accent-2); background: transparent; }
.ranking-controls { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 22px 32px; flex-wrap: wrap; }
.ranking-controls .tabs { margin: 0; }
.ranking-search { margin: 0; width: 260px; max-width: 100%; font-size: 12px; color: var(--muted); }
.ranking-search input { width: 100%; }
.ranking-controls .ranking-region-select { margin: 0; flex: 1; max-width: 530px; }
.ranking-board { padding: 0 32px 24px; }
.ranking-board-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.ranking-board-heading .eyebrow { margin: 0 0 5px; }
.ranking-board-heading h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; }
.ranking-limit { color: var(--muted); font-size: 12px; }
.ranking-prizes { border: 1px solid var(--line); border-radius: 10px; background: #0d1d32; padding: 10px 12px; margin: 0 0 20px; }
.ranking-prizes-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.ranking-prizes-heading strong { color: var(--accent-2); font-size: 12px; }
.ranking-prizes-heading small, .ranking-prize-extra { color: var(--muted); font-size: 10px; }
.ranking-prize-list { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.ranking-prize { display: flex; align-items: center; min-width: 0; gap: 6px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.ranking-prize-place { color: var(--accent-2); font-size: 11px; font-weight: 700; white-space: nowrap; }
.ranking-prize img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 40px; }
.ranking-prize-details { display: grid; gap: 2px; min-width: 0; }
.ranking-prize-details strong { font-size: 11px; overflow-wrap: anywhere; }
.ranking-prize-details small { color: var(--muted); font-size: 10px; }
.ranking-prize-extra { margin: 8px 0 0; }
.ranking-leaders { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0 0 24px; }
.ranking-leader { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: var(--card); display: block; }
.ranking-leader.place-1 { border-top: 3px solid var(--accent-2); background: linear-gradient(135deg,#252633,#0c1c35); }
.ranking-leader.place-2 { border-top: 3px solid #9cacbe; }
.ranking-leader.place-3 { border-top: 3px solid #b88966; }
.leader-position { display: flex; justify-content: space-between; align-items: center; }
.leader-position .eyebrow { font-size: 9px; margin: 0; }
.leader-position > strong { font-size: 27px; color: var(--muted); line-height: 1; }
.place-1 .leader-position > strong { color: var(--accent-2); }
.leader-identity { display: flex; gap: 10px; align-items: center; margin: 18px 0; min-width: 0; }
.leader-identity > div { min-width: 0; }
.leader-identity .podium-player { display: block; overflow-wrap: anywhere; font-size: 17px; }
.leader-identity .rank-badge { flex: 0 0 44px; margin: 0; }
.board-flags { display: flex; gap: 6px; align-items: center; margin-top: 5px; }
.board-flags img, .ranking-board-heading img { display: inline-block; object-fit: cover; border: 1px solid rgba(255,255,255,.22); border-radius: 2px; flex-shrink: 0; }
.board-flags small { font-size: 10px; color: var(--muted); font-weight: 400; line-height: 1.25; }
.leader-record { display: grid; gap: 3px; padding-top: 12px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.leader-record strong { font-size: 21px; }
.leader-record small { font-size: 11px; color: var(--muted); font-weight: 400; }
.leader-record > span { font-size: 11px; color: var(--muted); }
.ranking-table { margin: 0; min-width: 740px; border-collapse: separate; border-spacing: 0; }
.ranking-table thead th { background: #0b192e; color: var(--muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; padding: 14px 10px; }
.ranking-table tbody td, .ranking-table tbody th { padding: 12px 10px; border-bottom: 1px solid var(--line); background: transparent; font-variant-numeric: tabular-nums; }
.ranking-table tbody tr:hover { background: rgba(31,122,232,.09); }
.ranking-table .ranking-player { text-align: left; min-width: 195px; text-transform: none; letter-spacing: normal; font-size: 14px; }
.ranking-pride { display:block; color:var(--muted); font-size:10px; font-weight:400; line-height:1.2; margin-bottom:2px; }
.ranking-movement { display:block; color:var(--muted); font-size:10px; font-weight:600; white-space:nowrap; margin-top:3px; }
.ranking-movement.up { color:#78d5a5; }
.ranking-movement.down { color:#e69595; }
.ranking-table .ranking-place { width: 55px; text-align: center; }
.ranking-table .rank-cell img { width: 38px; height: 38px; }
.ranking-table .ranking-score { color: #f6cf84; font-weight: 600; }
.position-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; color: var(--muted); border-radius: 5px; font-size: 13px; }
.position-pill.place-1 { color: #f8ce72; background: rgba(239,170,49,.15); }
.position-pill.place-2 { color: #c1d0e0; background: rgba(156,172,190,.12); }
.position-pill.place-3 { color: #d5ab88; background: rgba(184,137,102,.12); }
.ranking-rules { font-size: 12px; padding-top: 15px; border-top: 1px solid var(--line); margin-top: 20px; }
.ranking-search-result { font-size: 12px; margin: 10px 0; }
.ranking-empty { text-align: center; padding: 40px 16px; border: 1px dashed var(--line); border-radius: 8px; }
.ranking-empty > span { font-size: 40px; color: var(--accent-2); }
.site-live-status { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 12px 0; color: var(--muted); font-size: 11px; }
.site-live-status [data-live-status]::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 6px; }
.site-live-status [data-live-state="error"]::before { background: var(--warn); }
.site-live-status button { background: transparent; border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; color: var(--text); font-size: 11px; cursor: pointer; }
.jackpot-tier { padding: 16px 0; border-top: 1px solid var(--line); }
.jackpot-tier h3 { margin: 0 0 8px; }
.jackpot-tier form { margin: 10px 0; }
.jackpot-prizes { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 8px; margin: 10px 0; }
.jackpot-prize { display: flex; gap: 8px; align-items: center; padding: 7px; border: 1px solid var(--line); border-radius: 6px; background: rgba(20,34,52,.4); }
.jackpot-prize img { flex: 0 0 44px; object-fit: contain; }
.jackpot-prize span { min-width: 0; }
.jackpot-prize strong, .jackpot-prize small { display: block; overflow-wrap: anywhere; }
.jackpot-prize strong { font-size: 11px; }
.jackpot-prize small { font-size: 10px; color: var(--muted); }
.jackpot-rewards { display: grid; gap: 10px; }
.jackpot-reward-row { display: grid; grid-template-columns: 48px minmax(250px,2fr) repeat(3,minmax(90px,1fr)) auto; gap: 8px; align-items: end; padding: 12px; background: rgba(20,34,52,.55); border: 1px solid var(--line); border-radius: 8px; }
.jackpot-item-picker { display: grid; grid-template-columns: repeat(2,minmax(110px,1fr)); gap: 6px; }
.jackpot-item-picker label { min-width: 0; }
.jackpot-item-picker input,.jackpot-item-picker select { width: 100%; box-sizing: border-box; }
.jackpot-reward-row label { min-width: 0; }
.jackpot-reward-row input { width: 100%; box-sizing: border-box; }
.jackpot-admin-preview { object-fit: contain; align-self: center; }
.jackpot-tier-editor { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.jackpot-reveal { margin-top: 14px; overflow: hidden; padding: 16px; scroll-margin-top: 16px; border: 1px solid #b28444; border-radius: 10px; background: radial-gradient(circle at 50% 0%,rgba(231,180,83,.16),transparent 70%),#0c1726; }
.jackpot-reel { position: relative; display: flex; gap: 10px; overflow: hidden; height: 120px; align-items: center; border-top: 1px solid #846336; border-bottom: 1px solid #846336; }
.jackpot-reel-card { flex: 0 0 95px; height: 104px; display: grid; justify-items: center; align-content: center; background: #18283b; border: 1px solid #4a5665; border-radius: 5px; text-align: center; }
.jackpot-reel-card img { width: 68px; height: 68px; object-fit: contain; }
.jackpot-reel-card small { font-size: 9px; line-height: 1.15; max-height: 25px; overflow: hidden; }
.jackpot-winner { display: flex; align-items: center; gap: 15px; margin: 14px 0 0; }
.jackpot-winner img { object-fit: contain; }
.jackpot-winner strong { color: #f8d694; }
.jackpot-winner[hidden] { display: none; }
.jackpot-reveal.is-open .jackpot-winner { animation: jackpot-finish .5s ease-out both; }
@keyframes jackpot-finish { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .jackpot-reward-row { grid-template-columns: 48px repeat(2,minmax(0,1fr)); } .jackpot-item-picker { grid-column: 2 / -1; grid-template-columns: 1fr; } .jackpot-reward-row button { grid-column: 2 / -1; } .jackpot-winner { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .jackpot-reveal.is-open .jackpot-winner { animation: none; } }
[data-live-wrapper] { display: contents; }
@media (max-width: 720px) {
  .ranking-heading { padding: 22px 18px; align-items: flex-start; }
  .ranking-community { max-width: 120px; }
  .ranking-community strong { font-size: 20px; }
  .ranking-community small { display: block; margin: 0; font-size: 8px; }
  .ranking-shell .ranking-boards { padding-inline: 18px; }
  .ranking-controls { padding: 18px; gap: 14px; }
  .ranking-controls .ranking-search, .ranking-controls .ranking-region-select { width: 100%; max-width: none; }
  .ranking-board { padding: 0 18px 20px; }
  .ranking-board-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .ranking-prize-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ranking-prizes-heading { flex-wrap: wrap; }
  .ranking-leaders { grid-template-columns: 1fr; }
  .ranking-leader { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; padding: 12px; }
  .leader-position { flex-direction: column-reverse; justify-content: center; gap: 6px; }
  .leader-position .eyebrow { display: none; }
  .leader-identity { margin: 0; }
  .leader-record { grid-column: 2; padding-top: 8px; margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .leader-record strong { font-size: 17px; }
}

/* Admin components: one sizing/spacing contract, scoped away from public pages. */
.admin-workspace {
  --control-height: 44px;
  --panel-space: clamp(18px, 2.5vw, 28px);
  --component-radius: 8px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
}
.admin-workspace h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.2; margin: 0; }
.admin-workspace h2 { font-size: 22px; line-height: 1.35; margin: 0 0 12px; }
.admin-workspace h3 { font-size: 17px; line-height: 1.4; margin: 0 0 8px; }
.admin-workspace p { margin: 0 0 16px; }
.admin-workspace .eyebrow { margin-bottom: 8px; }
.admin-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.admin-heading .status { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; }
.admin-workspace :is(button,.button-secondary,.cta) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control-height); min-width: 100px; max-width: 100%;
  padding: 10px 16px; gap: 8px; border: 1px solid var(--accent);
  border-radius: var(--component-radius); font: 600 14px/1.4 "Segoe UI",sans-serif;
  white-space: normal; text-align: center; text-decoration: none;
}
.admin-workspace :is(.button-secondary,button.quiet,.dialog-close) { background: var(--field); color: var(--text); border-color: #536377; }
.admin-workspace :is(.button-secondary,button.quiet,.dialog-close):hover { background: #223144; border-color: var(--accent); }
.admin-workspace button.danger { background: #9c263b; color: #fff; border-color: #dd7184; }
.admin-workspace button.danger:hover { background: #b52f47; }
.admin-workspace :is(input:not([type=checkbox]),select,textarea) {
  width: 100%; min-width: 0; max-width: 100%; min-height: var(--control-height);
  padding: 10px 12px; border: 1px solid #536377; border-radius: var(--component-radius);
  background: var(--field); color: var(--text); font: inherit;
}
.admin-workspace textarea { resize: vertical; }
.admin-workspace input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.admin-workspace label { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; }
.admin-workspace label.check { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; }
.admin-workspace :is(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.admin-workspace form { gap: 18px; margin: 20px 0 0; }
.admin-workspace form > button[type=submit] { align-self: flex-end; }
.admin-workspace form .row { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); gap: 16px; }
.admin-workspace .search { flex-direction: row; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 24px; }
.admin-workspace .search > input { flex: 1 1 220px; }
.admin-workspace .search > label { flex: 1 1 180px; }
.admin-workspace .search > button { flex: 0 0 auto; }
.admin-workspace .panel { margin: 20px 0 0; padding: var(--panel-space); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: visible; }
.admin-workspace .panel.narrow { margin-inline: 0; max-width: 560px; }
.admin-tabs { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 24px; }
.admin-tabs a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 8px; border-radius: 8px; color: var(--muted); text-align: center; font-weight: 600; }
.admin-tabs a:hover { color: var(--text); background: #263348; text-decoration: none; }
.admin-tabs a.on { color: #17120b; background: var(--accent); }
.admin-workspace .section-nav { display: flex; flex-wrap: wrap; overflow: visible; gap: 6px; border: 0; background: none; padding: 0 0 16px; margin: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.admin-workspace .section-nav a { min-height: 44px; padding: 10px 14px; white-space: normal; }
.admin-dashboard-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; border: 0; margin-bottom: 24px; }
.admin-dashboard-cards .card { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 12px; }
.admin-dashboard-cards .card .v { font-size: clamp(28px,4vw,38px); overflow-wrap: anywhere; }
.admin-dashboard-cards .muted { font-size: 12px; }
.admin-tools,.player-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 16px; }
.tool-card,.player-card { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); overflow-wrap: anywhere; }
.tool-card { display: flex; flex-direction: column; align-items: flex-start; }
.tool-card p { color: var(--muted); flex: 1; }
.tool-card > .button-secondary { margin-top: auto; }
.admin-details,.player-moderation { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 8px; }
.admin-workspace summary { cursor: pointer; padding: 12px 0; min-height: 44px; font-weight: 600; }
.admin-event-list { display: grid; gap: 10px; margin-top: 12px; }
.admin-event-card { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
.admin-workspace .admin-event-card > summary { padding: 12px 16px; overflow-wrap: anywhere; }
.admin-event-card[open] > summary { border-bottom: 1px solid var(--line); }
.admin-event-body { padding: 16px; }
.admin-event-body > p:first-child { margin-top: 0; }
.admin-facts,.player-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 16px; margin: 20px 0; }
.admin-facts dt,.player-metrics dt { color: var(--muted); font-size: 12px; }
.admin-facts dd,.player-metrics dd { margin: 4px 0 0; font-size: 17px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.player-card-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.player-card-heading p,.player-card-heading h3 { margin: 0; }
.player-card-heading img { object-fit: contain; }
.admin-player-profile { margin:20px 0 26px; padding:22px; border:1px solid var(--accent); border-radius:12px; background:var(--surface); }
.profile-detail-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.profile-detail-heading h3 { margin:0 0 5px; font-size:23px; }
.profile-detail-heading .eyebrow { margin:0 0 3px; }
.admin-player-profile .combat-dashboard { margin-bottom:0; }
.admin-player-profile .rank-progress { margin-top:18px; }
.admin-player-profile .rank-progress h4 { margin:0 0 8px; font-size:17px; }
.admin-player-profile .rank-progress progress { display:block; width:100%; height:12px; accent-color:var(--accent); }
.player-card .moderation-form { display: flex; flex-direction: column; min-width: 0; }
.admin-workspace .catalog-grid { margin: 24px 0; gap: 16px; }
.admin-workspace .catalog-card { border-radius: 12px; padding: 18px; }
.admin-workspace .catalog-pagination { flex-wrap: wrap; align-items: center; }
.admin-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; margin-top: 20px; }
.admin-workspace .table { width: 100%; margin: 0; border-collapse: collapse; }
.admin-workspace .table th,.admin-workspace .table td { padding: 12px; vertical-align: middle; }
.admin-workspace .table small { display: block; color: var(--muted); }
.admin-workspace .table form { margin: 0; }
.admin-item { display: flex; align-items: center; gap: 12px; min-width: 150px; }
.admin-item img { flex: 0 0 100px; }
.admin-workspace .price-dialog {
  width: min(900px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  padding: 0; overflow: auto; margin: auto; color: var(--text); background: var(--surface);
  border: 1px solid #536377; border-radius: 12px; box-shadow: 0 24px 80px #0009;
}
.admin-workspace .price-dialog::backdrop { background: #040a14d9; }
.admin-workspace .dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 1; }
.admin-workspace .dialog-header h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.admin-workspace .dialog-close { float: none; flex: 0 0 auto; min-width: 76px; }
.admin-workspace .dialog-body { margin: 0; padding: 24px; }
.admin-workspace .dialog-body .admin-table-scroll { margin-top: 0; }
@media(max-width:800px) {
  .admin-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .admin-heading { align-items: flex-start; flex-direction: column; }
}
@media(max-width:680px) {
  .admin-dashboard-cards { grid-template-columns: 1fr; }
  .admin-workspace :is(.dialog-header,.dialog-body) { padding: 18px; }
  .admin-workspace .dialog-header h2 { font-size: 19px; }
  .admin-workspace .table[data-responsive-table] { display: block; min-width: 0; }
  .admin-workspace .table[data-responsive-table] thead { display: none; }
  .admin-workspace .table[data-responsive-table] tbody { display: block; }
  .admin-workspace .table[data-responsive-table] tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-bottom: 1px solid var(--line); padding: 12px 0; }
  .admin-workspace .table[data-responsive-table] td:nth-child(n) { display: block; min-width: 0; border: 0; padding: 8px; white-space: normal; overflow-wrap: anywhere; }
  .admin-workspace .table[data-responsive-table] td:first-child,.admin-workspace .table[data-responsive-table] td:last-child { grid-column: 1/-1; }
  .admin-workspace .table[data-responsive-table] td:empty { display: none; }
  .admin-workspace .table[data-responsive-table] td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
  .admin-workspace .table input,.admin-workspace .table select { min-width: 0; max-width: 100%; width: 100%; }
  .admin-workspace .table input[type=checkbox] { width: 20px; }
}
.event-objectives {min-width:0;border:1px solid var(--line,#2c394b);border-radius:8px;padding:14px;margin:4px 0;}
.event-objectives legend {padding:0 8px;font-weight:700;}
.event-objectives select {width:100%;min-width:0;max-width:100%;}