/* Leaderboard (leaderboard.html) and roadmap (roadmap.html). Loads after style-a.css and
   reuses its tokens: black borders, hard shadows, mustard and red accents, Titan One. */

/* ---------- Shared bits ---------- */
.lb-online {
  display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 8px 14px;
  background: var(--ink); color: var(--snow); font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; font-size: .85rem; transform: rotate(.8deg); box-shadow: 5px 5px 0 var(--red);
}
.ph-card .lb-online { display: flex; width: fit-content; }
.lb-goal { text-transform: none; letter-spacing: 0; font-size: .95rem; transform: rotate(-.5deg); margin-top: 10px; max-width: 100%; }
.lb-dot { width: 10px; height: 10px; border-radius: 50%; background: #3ddc73; flex: none; animation: pulse 1.2s ease-in-out infinite; }

.lb-cta {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 4vw, 40px);
  background: var(--mustard); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--red);
  padding: clamp(20px, 4vw, 36px);
}
.lb-cta img { width: clamp(110px, 14vw, 170px); transform: rotate(-6deg); filter: drop-shadow(5px 5px 0 var(--ink)); }
.lb-cta h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1; }
.lb-cta p { margin: 0 0 18px; max-width: 60ch; font-size: 1.05rem; }
.lb-cta a:not(.btn) { color: var(--ink); font-weight: 800; text-decoration-thickness: 3px; text-decoration-color: var(--red); }

/* ---------- Tier badges ---------- */
.tier {
  display: inline-block; white-space: nowrap; font-weight: 800; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .06em; padding: 3px 8px; border: 2px solid var(--ink); line-height: 1.3;
}
.t-flake { background: var(--snow); color: var(--ink); }
.t-flurry { background: #cfe6ec; color: var(--ink); }
.t-storm { background: var(--sky-2); color: var(--ink); }
.t-blizzard { background: #1e4f74; color: var(--snow); }
.t-king { background: var(--mustard); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

/* ---------- Leaderboard ---------- */
.lb-panel { background: var(--snow); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); padding: clamp(16px, 3vw, 32px); }
.lb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; }
.lb-title { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1; padding-left: 12px; border-left: 8px solid var(--red); }
.lb-updated { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--muted); }
.lb-state { margin: 0 0 12px; padding: 12px 14px; border: 3px dashed var(--muted); background: var(--snow-2); font-weight: 700; }
.lb-state[data-kind="error"] { border: 3px solid var(--red); background: #fff4f2; color: var(--ink); }
.lb-state[data-kind="stale"] { border-color: var(--mustard-2); }
.lb-note { margin: 14px 0 0; font-size: .85rem; color: var(--muted); }

.lb-scroll { overflow-x: auto; border: 3px solid var(--ink); }
.lb-table { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.lb-table thead th {
  background: var(--ink); color: var(--snow); text-align: left; text-transform: uppercase; letter-spacing: .08em;
  font-size: .74rem; font-weight: 800; padding: 10px 12px; white-space: nowrap;
}
.lb-table td, .lb-table tbody th { padding: 9px 12px; border-top: 2px solid var(--ink); text-align: left; vertical-align: middle; }
.lb-table tbody tr:nth-child(even) { background: var(--snow-2); }
.lb-table .lb-num { text-align: right; white-space: nowrap; }
.lb-rank { width: 3.2em; font-family: var(--display); font-weight: 400; font-size: 1.1rem; }
.lb-table thead .lb-rank { font-family: var(--body); font-size: .74rem; }
.lb-name { font-weight: 800; overflow-wrap: anywhere; }
.lb-unknown { color: var(--muted); font-style: italic; font-weight: 700; }
.lb-strong { font-weight: 800; }
.lb-table tbody tr.lb-top-1 { background: #fff3c4; }
.lb-top-1 .lb-rank, .lb-top-2 .lb-rank, .lb-top-3 .lb-rank { color: var(--red); }
.lb-top-1 .lb-rank { font-size: 1.45rem; }

/* Period tabs */
.lb-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.lb-tabs [role="tab"] {
  font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1;
  padding: 10px 18px; border: 3px solid var(--ink); background: var(--snow); color: var(--ink); cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink); transition: transform .08s, box-shadow .08s;
}
.lb-tabs [role="tab"]:hover { background: var(--mustard); }
.lb-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--snow); box-shadow: 4px 4px 0 var(--red); transform: rotate(-1.5deg); }

/* Rating explainer and tier ladder */
.lb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.lb-split .prose { max-width: none; margin: 0; }
.lb-lines { padding-left: 22px; }
.lb-lines li { margin-bottom: .6em; }
.lb-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lb-ladder li {
  display: grid; grid-template-columns: 9.5em 7.5em minmax(0, 1fr); align-items: center; gap: 6px 12px;
  padding: 8px 10px; border: 3px solid var(--ink); background: var(--snow-2);
}
.lb-ladder .tier { justify-self: start; font-size: .82rem; }
.lb-ladder b { font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-quip { color: var(--ink-2); font-size: .92rem; }

@media (max-width: 860px) {
  .lb-split { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: each player becomes a card; labels come from data-label set by leaderboard.js. */
@media (max-width: 640px) {
  .lb-panel { padding: 14px 12px; box-shadow: 6px 6px 0 var(--ink); }
  .lb-scroll { border: 0; overflow: visible; }
  .lb-table, .lb-table tbody { display: block; }
  .lb-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lb-table tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; padding: 10px 12px; margin-bottom: 10px;
    border: 3px solid var(--ink); background: var(--snow); box-shadow: 4px 4px 0 var(--ink);
  }
  .lb-table tbody tr:nth-child(even) { background: var(--snow); }
  .lb-table tbody tr.lb-top-1 { background: #fff3c4; }
  .lb-table td, .lb-table tbody th { border: 0; padding: 0; }
  .lb-table .lb-rank { width: auto; min-width: 1.6em; flex: none; }
  .lb-table .lb-name { flex: 1 1 calc(100% - 11em); min-width: 0; }
  .lb-table .lb-tier { flex: none; }
  .lb-table:not([data-period-view="all"]) .lb-name { flex-basis: calc(100% - 3em); }
  .lb-table td.lb-num {
    flex: 1 1 calc(20% - 6px); min-width: 0; display: flex; flex-direction: column; text-align: left;
    font-weight: 800; font-size: .88rem; padding: 4px 5px; background: var(--snow-2); border: 2px solid var(--ink);
  }
  .lb-table td.lb-num::before {
    content: attr(data-label); font-size: .56rem; font-weight: 800; letter-spacing: .02em; line-height: 1.15;
    text-transform: uppercase; color: var(--muted);
  }
  .lb-ladder li { grid-template-columns: auto minmax(0, 1fr); }
  .lb-quip { grid-column: 1 / -1; }
  .lb-cta { grid-template-columns: minmax(0, 1fr); }
  .lb-cta img { width: 110px; justify-self: center; }
  .lb-updated { margin-left: 0; width: 100%; }
  .lb-tabs { gap: 8px; }
  .lb-tabs [role="tab"] { flex: 1 1 0; font-size: .88rem; padding: 9px 6px; }
}

/* ---------- Season prizes wallet check (js/rewards-lookup.js) ---------- */
.sp-panel { background: var(--snow); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--red); padding: clamp(16px, 3vw, 32px); }
.sp-panel .lb-title { margin-bottom: 14px; }
.sp-lede { margin: 0 0 14px; max-width: 70ch; font-size: 1.05rem; }
.sp-off { margin: 0; padding: 12px 14px; border: 3px dashed var(--muted); background: var(--snow-2); font-weight: 700; max-width: 70ch; }
.sp-sub { margin: 18px 0 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; display: inline-block; background: var(--ink); color: var(--snow); padding: 4px 10px; }
.sp-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem) auto; gap: 8px 14px; align-items: start; margin: 0 0 14px; }
.sp-field { min-width: 0; }
.sp-field label { margin-bottom: 6px; }
.sp-field input[type="text"] { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .95rem; }
.sp-field select { width: 100%; }
.sp-form .btn { margin-top: 1.75rem; align-self: start; }
.sp-form .error { grid-column: 1 / -1; margin: 0; }
.sp-hint { margin: 6px 0 0; font-size: .85rem; color: var(--muted); }
.sp-hint a, .sp-facts a { color: var(--ink); font-weight: 800; text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.sp-warn { color: var(--ink); background: #fff4f2; border: 2px solid var(--red); padding: 6px 8px; font-weight: 800; }
.lb-state[data-kind="ok"] { border: 3px solid #3a9c62; background: #eaf7ef; }
.lb-state[data-kind="miss"] { border-style: solid; }

.sp-result { border: 3px solid var(--ink); background: var(--snow-2); padding: clamp(12px, 2.4vw, 20px); margin: 0 0 16px; }
.sp-verdict { margin: 0 0 12px; font-weight: 700; }
.sp-verdict b { display: inline-block; margin-right: 8px; padding: 3px 10px; border: 3px solid var(--ink); font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.1rem; }
.sp-verdict.is-hit b { background: var(--mustard); box-shadow: 4px 4px 0 var(--ink); }
.sp-verdict.is-miss b { background: var(--snow); }
.sp-facts-list { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.sp-facts-list dt { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: .15em; }
.sp-facts-list dd { margin: 0; min-width: 0; }
.sp-strong { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.sp-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .88rem; overflow-wrap: anywhere; word-break: break-all; }
.sp-hash { margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--ink); }
.sp-hash p { margin: 0 0 4px; }
.sp-hash-label { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.sp-facts { margin: 0; padding-left: 22px; max-width: 75ch; font-size: .95rem; }
.sp-facts li { margin-bottom: .5em; }

@media (max-width: 760px) {
  .sp-form { grid-template-columns: minmax(0, 1fr); }
  .sp-form .btn { margin-top: 0; justify-self: start; }
  .sp-facts-list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sp-facts-list dd { margin-bottom: 8px; }
}
@media (max-width: 640px) {
  .sp-panel { padding: 14px 12px; box-shadow: 6px 6px 0 var(--red); }
}

/* ---------- Roadmap ---------- */
.rm-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.rm-jump a {
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; text-decoration: none;
  color: var(--ink); background: var(--snow); border: 3px solid var(--ink); padding: 6px 12px; box-shadow: 4px 4px 0 var(--ink);
}
.rm-jump a:hover { background: var(--mustard); }

.rm { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 30px; }
.rm::before { content: ""; position: absolute; left: 88px; top: 10px; bottom: 10px; width: 6px; background: var(--ink); }
.rm-phase { display: grid; grid-template-columns: 182px minmax(0, 1fr); gap: 0 26px; align-items: start; position: relative; scroll-margin-top: 80px; }
.rm-when { position: sticky; top: 76px; display: grid; justify-items: center; gap: 8px; text-align: center; z-index: 1; }
.rm-badge {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.25rem; line-height: 1;
  background: var(--mustard); color: var(--ink); border: 3px solid var(--ink); padding: 10px 14px; box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-3deg);
}
.rm-phase:nth-child(even) .rm-badge { background: var(--red); color: var(--snow); transform: rotate(2deg); }
.rm-now .rm-badge { background: #3a9c62; color: var(--snow); }
.rm-later .rm-badge { background: var(--snow); }
.rm-status { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; background: var(--snow); border: 2px solid var(--ink); padding: 3px 8px; }

.rm-body { background: var(--snow); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); padding: clamp(18px, 3vw, 32px); min-width: 0; }
.rm-now .rm-body { box-shadow: 10px 10px 0 #3a9c62; }
.rm-body h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1; }
.rm-lede { margin: 0 0 16px; font-size: 1.05rem; max-width: 70ch; }
.rm-sub { margin: 22px 0 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; display: inline-block; background: var(--ink); color: var(--snow); padding: 4px 10px; }
.rm-lede + .rm-sub { margin-top: 4px; }
.rm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.rm-list li { border: 3px solid var(--ink); background: var(--snow-2); padding: 12px 14px; font-size: .95rem; color: var(--ink-2); }
.rm-list b { display: block; font-weight: 800; color: var(--ink); font-size: 1.02rem; margin-bottom: 4px; }
.rm-list a { color: var(--ink); font-weight: 800; text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.rm-now .rm-list li { border-left: 10px solid #3a9c62; }
.rm-risk { display: block; margin-top: 8px; padding: 6px 8px; border: 2px solid var(--red); background: #fff4f2; color: var(--ink); font-weight: 800; }

.rm-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0 4px; }
.rm-shots figure { margin: 0; border: 3px solid var(--ink); background: var(--ink); box-shadow: 6px 6px 0 var(--mustard-2); }
.rm-shots figure:nth-child(2) { box-shadow: 6px 6px 0 var(--red); }
.rm-shots img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.rm-shots figcaption { color: var(--snow); font-size: .82rem; font-weight: 700; padding: 6px 10px; }

.rm-not {
  margin-top: 40px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 24px;
  background: var(--ink); color: var(--snow); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--red); padding: clamp(18px, 3vw, 28px);
}
.rm-not h2 { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1; color: var(--mustard); }
.rm-not ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rm-not li { padding: 4px 10px; border: 2px solid var(--snow); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.rm-not p { grid-column: 1 / -1; margin: 0; color: #c9d3d6; font-size: .92rem; }

@media (max-width: 760px) {
  .rm::before { left: 14px; }
  .rm-phase { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rm-when { position: static; justify-items: start; grid-auto-flow: column; align-items: center; justify-content: start; padding-left: 30px; }
  .rm-shots { grid-template-columns: minmax(0, 1fr); }
  .rm-not { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .rm-when { grid-auto-flow: row; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-dot { animation: none; }
}