/* Strikeship Smashers — leaderboards and champion stats.
   Shares index.html's design language: deep-space ground, sticker cards with a heavy
   maroon keyline and a hard offset shadow, Fredoka/Nunito/Silkscreen.
   Kept as one stylesheet for the three pages so the look cannot drift between them. */
:root{
  --void:#140B2B; --deep:#1E1147; --panel:#2A1960; --panel-hi:#36217A;
  --ink:#3A0E14; --cream:#FFF3E0; --cream-dim:#C9B8DE;
  --star:#FFD23F; --glaze:#FF8E72;
  --sprinkle-blue:#4EC3FF; --sprinkle-violet:#8B6BFF; --sprinkle-lime:#B8E986;
  --line:rgba(255,243,224,.16);
  --shadow:6px 6px 0 var(--ink); --shadow-sm:4px 4px 0 var(--ink);
  --r:18px;
  --f-display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Nunito","Segoe UI",system-ui,sans-serif;
  --f-pixel:"Silkscreen","Courier New",monospace;

  /* ---- THE TIER RAMP -------------------------------------------------------------
     Nine tiers are an ORDERED scale, so this is ONE hue getting lighter - not nine
     colours.  Nine hues would say the tiers are nine unrelated things and would need a
     legend to read; a ramp says "further along" without one.
     Every step was tuned until its label text clears WCAG AA (4.5:1) on it, which is why
     the dark half is lettered in cream and the light half in ink.  The tier NAME is
     always printed, so the colour never carries the meaning on its own. */
  --tier-0:#3B2E6B; --tier-1:#4F427E; --tier-2:#625690; --tier-3:#72669D;
  --tier-4:#8A7DB5; --tier-5:#9E91C8; --tier-6:#B2A4DA; --tier-7:#C5B8EC;
  --tier-8:#D9CCFF;
}
*{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--cream);font-family:var(--f-body);
  font-size:16px;line-height:1.65;overflow-x:hidden;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 40% at 12% 8%, rgba(139,107,255,.26), transparent 70%),
    radial-gradient(50% 35% at 88% 22%, rgba(255,142,114,.18), transparent 70%),
    radial-gradient(70% 45% at 50% 108%, rgba(78,195,255,.16), transparent 70%);}
.wrap{width:100%;max-width:1080px;margin-inline:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px))}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;
  background:rgba(30,17,71,.88);backdrop-filter:blur(10px);border-bottom:3px solid var(--ink)}
.bar{display:flex;align-items:center;gap:14px;padding-block:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream);margin-right:auto}
.brand img{width:28px;height:28px}
.brand b{font-family:var(--f-display);font-weight:600;font-size:1.15rem}
.brand span{color:var(--star)}
nav{display:flex;gap:6px;flex-wrap:wrap}
nav a{font-family:var(--f-display);font-weight:500;color:var(--cream);text-decoration:none;
  padding:6px 12px;border-radius:999px;border:2px solid transparent}
nav a:hover{border-color:var(--line)}
nav a[aria-current="page"]{background:var(--star);color:var(--ink);border-color:var(--ink)}
h1,h2{font-family:var(--f-display);font-weight:600;line-height:1.08;margin:0}
h1{font-size:clamp(1.9rem,4.6vw,3rem)}
.eyebrow{font-family:var(--f-pixel);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--star);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--glaze);box-shadow:0 -8px 0 var(--star)}
.band{padding-block:clamp(32px,6vw,64px)}
.card{background:var(--panel);border:3px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--shadow);padding:clamp(16px,2.6vw,28px);min-width:0}
.muted{color:var(--cream-dim)}
.lede{max-width:62ch;color:var(--cream-dim);margin:.6rem 0 0}

/* ---------- the switch between the two ladders ---------- */
.modes{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}
.modes a{font-family:var(--f-display);font-weight:600;text-decoration:none;color:var(--cream);
  background:var(--panel-hi);border:3px solid var(--ink);border-radius:999px;
  padding:8px 18px;box-shadow:var(--shadow-sm)}
.modes a[aria-current="page"]{background:var(--star);color:var(--ink)}

/* ---------- tables ---------- */
.scroller{overflow-x:auto;margin-top:18px}
table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:620px}
caption{text-align:left;font-family:var(--f-pixel);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cream-dim);padding-bottom:10px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
thead th{font-family:var(--f-pixel);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-dim);border-bottom:2px solid var(--line);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
.num{font-family:var(--f-pixel);font-variant-numeric:tabular-nums;white-space:nowrap}
.place{font-family:var(--f-pixel);color:var(--cream-dim);width:1%}
.place b{color:var(--cream);font-size:1.05rem}
tr.top .place b{color:var(--star)}
.who{font-family:var(--f-display);font-weight:600;font-size:1.02rem;
  max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr{font-family:var(--f-pixel);font-size:1.05rem;color:var(--star)}

/* tier chip — colour reinforces the ramp, the word carries the meaning */
.tier{font-family:var(--f-pixel);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;border:2px solid var(--ink);white-space:nowrap;
  display:inline-block;color:var(--cream)}
.tier.t0{background:var(--tier-0)} .tier.t1{background:var(--tier-1)}
.tier.t2{background:var(--tier-2)} .tier.t3{background:var(--tier-3)}
.tier.t4{background:var(--tier-4);color:var(--ink)} .tier.t5{background:var(--tier-5);color:var(--ink)}
.tier.t6{background:var(--tier-6);color:var(--ink)} .tier.t7{background:var(--tier-7);color:var(--ink)}
.tier.t8{background:var(--tier-8);color:var(--ink)}

/* ---------- the win-rate meter ----------
   A win rate's question is "better or worse than even", so the bar DIVERGES from 50%
   rather than growing from zero: warm to the right of the centre line, cool to the left,
   with a neutral track behind.  A 0-100 bar would make 52% look like a landslide.
   The centre line is drawn on top so the reader can see where even is. */
.meter{position:relative;height:16px;min-width:140px;background:var(--deep);
  border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.meter i{position:absolute;top:0;bottom:0;display:block;border-radius:3px}
.meter i.up{background:var(--sprinkle-blue)}
.meter i.down{background:var(--glaze)}
.meter u{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;
  background:var(--cream);opacity:.85;box-shadow:0 0 0 1px rgba(58,14,20,.55)}
/* A rate the sample cannot support is hatched rather than filled, so it reads as
   "not measured yet" at a glance instead of as a measurement. */
.meter.thin i{background:repeating-linear-gradient(45deg,
  var(--cream-dim) 0 3px, transparent 3px 7px);opacity:.75}
.rate{font-family:var(--f-pixel);font-variant-numeric:tabular-nums}
.rate.thin{color:var(--cream-dim)}
.games{font-family:var(--f-pixel);font-size:.8rem;color:var(--cream-dim);white-space:nowrap}

/* ---------- states ---------- */
.note{margin-top:18px;padding:14px 16px;border:2px dashed var(--line);border-radius:14px;
  color:var(--cream-dim);background:rgba(20,11,43,.5)}
.note b{color:var(--cream);font-family:var(--f-display)}
.err{border-color:var(--glaze);color:var(--cream)}
footer{border-top:3px solid var(--ink);background:var(--deep);margin-top:40px}
.foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:22px}
.foot img{width:150px}
.foot p{margin:0;color:var(--cream-dim);font-size:.9rem}
/* ---------- phones ----------
   The table still scrolls inside its own box, but it must not NEED to: the columns a
   phone sheds (.drop) are the context ones, so what is left - who, rank, SR, win rate -
   fits the screen.  Shedding the win rate instead would hide the number the page exists
   to show. */
@media (max-width:640px){
  .who{max-width:11ch}
  table{font-size:.88rem;min-width:0}
  th,td{padding:9px 6px}
  .drop{display:none}
  .meter{min-width:56px}
  /* the full header does not fit; the column is self-evident beside the rate */
  thead th:last-child{font-size:0}
  thead th:last-child::after{content:"VS EVEN";font-size:.68rem}
  caption{white-space:normal}
}

/* ---------- the hub: /strikeshipsmashers/ ----------
   Three destinations as sticker cards, each with one live line under it.  The line is
   filled in by script and is empty without one, so the card never depends on it. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(20px,4vw,44px);align-items:center;margin-top:8px}
.hero .shot{margin:0;aspect-ratio:16/9;border:3px solid var(--ink);border-radius:14px;
  overflow:hidden;background:var(--deep);display:grid;place-items:center;
  box-shadow:var(--shadow)}
.hero .shot img{width:100%;height:100%;object-fit:cover;display:block}
.hero .shot.empty{border-style:dashed}
.hero .shot figcaption{display:none;font-family:var(--f-pixel);font-size:.72rem;
  line-height:1.9;color:var(--cream-dim);text-align:center;padding:10px}
.hero .shot.empty figcaption{display:block}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
/* The same sticker chip the home page uses.  It lives in index.html's own stylesheet,
   so it is restated here rather than imported - these pages have to stand on their own. */
.chip{font-family:var(--f-pixel);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;border:2px solid var(--ink);
  background:var(--star);color:var(--ink);white-space:nowrap}
.chip.alt{background:var(--sprinkle-blue)}

.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:clamp(14px,2.4vw,22px);margin-top:26px}
.pick{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--cream);
  background:var(--panel);border:3px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--shadow);padding:20px 20px 18px;min-width:0;
  transition:transform .12s ease, box-shadow .12s ease}
.pick:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.pick:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.pick:focus-visible{outline:3px solid var(--star);outline-offset:3px}
.pick h2{font-size:1.28rem}
.pick p{margin:0;color:var(--cream-dim);font-size:.95rem;line-height:1.5}
.pick .live{font-family:var(--f-pixel);font-size:.72rem;letter-spacing:.06em;
  color:var(--star);min-height:1.1em;margin-top:2px}
/* pins the live line and the call to action to the bottom of every card, so
   three cards of different paragraph lengths still line up along the base. */
.pick .live{margin-top:auto;padding-top:6px}
.pick .go{font-family:var(--f-pixel);font-size:.7rem;letter-spacing:.1em;
  color:var(--cream-dim);text-transform:uppercase}
.pick .go::after{content:"  \2192"}
@media (max-width:760px){ .hero{grid-template-columns:1fr} }