/* css/killers.css — "Killers of the Week". Prefix: kw-
   Screenshot-first: a self-contained branded card (brand → glorifying scope
   title → tiles → top-3 podium → list). Green accent, finale-modeled layout. */

:root {
  --kw-1: var(--accent);              /* the green */
  --kw-2: #4ff0a3;
  --kw-glow:   rgba(0, 232, 122, .20);
  --kw-glow-2: rgba(0, 232, 122, .07);
  --kw-border: rgba(0, 232, 122, .26);
  --kw-gold: #fbbf24;
}

.kw-wrap { max-width: 780px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-10); position: relative; }

/* ── controls (hidden in screenshot mode) ─────────────────────────── */
.kw-shot-toggle {
  position: absolute; top: var(--sp-5); right: var(--sp-4); z-index: 6;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: var(--glass-bg-2); border: 1px solid var(--border-2); color: var(--text-2);
  font: 700 12px/1 var(--font-ui); white-space: nowrap;
}
.kw-shot-toggle:hover { color: var(--text-1); border-color: var(--kw-border); }
body.kw-shot .kw-controls { display: none; }
body.kw-shot .kw-shot-toggle { background: var(--kw-glow-2); border-color: var(--kw-border); color: var(--kw-1); }

.kw-controls { margin: 8px 0 18px; padding-right: 120px; }
.kw-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kw-tab {
  flex: 0 0 auto; padding: var(--sp-2) var(--sp-4); border-radius: 999px; cursor: pointer;
  background: var(--glass-bg-2); border: 1px solid var(--border-2); color: var(--text-2);
  font: 700 0.9rem/1 var(--font-ui); white-space: nowrap; transition: all .15s;
}
.kw-tab:hover { color: var(--text-1); border-color: var(--border-3); }
.kw-tab-on { background: var(--kw-glow-2); border-color: var(--kw-border); color: var(--kw-1); }
.kw-pickers { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.kw-ctl { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; }
/* The JS sets .hidden per mode (Warzone/Segment/Alliance/Global); this must beat the
   `display:flex` above, or the [hidden] attribute is ignored and every input always shows. */
.kw-ctl[hidden] { display: none; }
.kw-ctl-label { font: 600 0.7rem/1 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.kw-input {
  width: 100%; padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--border-2); color: var(--text-1);
  font: 600 1rem/1 var(--font-data);
}
.kw-input:focus { outline: none; border-color: var(--kw-border); box-shadow: 0 0 0 3px var(--kw-glow-2); }

/* ── the shareable card ───────────────────────────────────────────── */
.kw-card {
  border: 1px solid var(--kw-border); border-radius: var(--r-2xl); overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--kw-glow), transparent 60%),
    var(--glass-bg-2);
  box-shadow: var(--shadow-lg);
}

/* brand rides the very top — in any crop the domain is visible */
.kw-brandbar {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 18px; border-bottom: 1px solid var(--border-1);
  background: linear-gradient(180deg, var(--kw-glow-2), transparent);
}
.kw-brand-img { border-radius: 6px; }
.kw-brand-text { font: 800 1rem/1 var(--font-ui); letter-spacing: .02em; color: var(--text-1); }
.kw-brand-dim { color: var(--kw-1); }
.kw-brand-tag { margin-left: auto; font: 700 0.78rem/1 var(--font-data); color: var(--text-2); }

/* hero — eyebrow + glorifying scope title + stats */
.kw-hero { text-align: center; padding: 24px 18px 6px; position: relative; }
.kw-eyebrow {
  font: 700 0.74rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--kw-1); margin-bottom: 10px;
}
.kw-title {
  font: 800 clamp(2.1rem, 8vw, 3.4rem)/1.02 var(--font-ui); margin: 0; letter-spacing: -0.01em;
  background: linear-gradient(180deg, #fff 8%, var(--kw-2) 62%, var(--kw-1) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--kw-1);
  overflow-wrap: anywhere;
}
:root[data-theme="light"] .kw-title { background: linear-gradient(180deg, #10241a 8%, var(--kw-1) 100%); -webkit-background-clip: text; background-clip: text; }
.kw-sub { font: 500 0.95rem/1.4 var(--font-ui); color: var(--text-2); margin: 10px 0 0; }
.kw-sub strong { color: var(--text-1); font-weight: 700; }

/* ── podium (top 3) ───────────────────────────────────────────────── */
.kw-podium { padding: 22px 16px 4px; }
.kw-podium-head { text-align: center; font: 700 0.72rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 16px; }
.kw-podium-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.kw-pod {
  container-type: inline-size; text-align: center; cursor: pointer;
  border: 1px solid var(--border-1); border-radius: var(--r-lg);
  background: var(--glass-bg); padding: 16px 8px 14px; transition: transform .12s, border-color .12s;
}
.kw-pod:hover { transform: translateY(-3px); border-color: var(--kw-border); }
.kw-pod-1 {
  order: 2; padding-top: 22px;
  border-color: var(--kw-border);
  background: linear-gradient(180deg, var(--kw-glow), transparent 70%), var(--glass-bg-3);
  box-shadow: 0 8px 28px -14px var(--kw-1);
}
.kw-pod-2 { order: 1; } .kw-pod-3 { order: 3; }
.kw-pod-photo { position: relative; width: min(64cqw, 74px); aspect-ratio: 1; margin: 0 auto 9px; }
.kw-pod-1 .kw-pod-photo { width: min(78cqw, 94px); }
.kw-pod-photo::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--border-3); pointer-events: none;
}
.kw-pod-1 .kw-pod-photo::after { border-color: var(--kw-gold); box-shadow: 0 0 18px -2px var(--kw-gold); }
.kw-pod-2 .kw-pod-photo::after { border-color: #cbd5e1; }
.kw-pod-3 .kw-pod-photo::after { border-color: #d69b6a; }
.kw-pod-img, .kw-pod-initial {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.kw-pod-initial {
  display: grid; place-items: center; background: var(--bg-3); color: var(--text-2);
  font: 800 1.3rem/1 var(--font-ui);
}
.kw-pod-badge {
  position: absolute; right: -2px; bottom: -2px; min-width: 22px; height: 22px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px; color: #10241a;
  font: 800 12px/1 var(--font-data); background: linear-gradient(135deg, #e2e8f0, #94a3b8);
  border: 2px solid var(--bg-2);
}
.kw-pod-1 .kw-pod-badge { background: linear-gradient(135deg, var(--kw-gold), #d97706); min-width: 25px; height: 25px; font-size: 13px; }
.kw-pod-3 .kw-pod-badge { background: linear-gradient(135deg, #e0a97a, #b4703c); }
.kw-pod-name { font: 700 12.5px/1.25 var(--font-ui); color: var(--text-1); margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-pod-1 .kw-pod-name { font-size: 14px; }
.kw-pod-kills { font: 800 clamp(14px, 4.8vw, 20px)/1 var(--font-data); color: var(--kw-2); font-variant-numeric: tabular-nums; margin-bottom: 5px; }
.kw-pod-1 .kw-pod-kills { color: var(--kw-1); }
.kw-pod-meta { font: 500 10px/1.3 var(--font-data); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-pod-meta .ab { color: var(--text-2); }

/* ── the rest of the list ─────────────────────────────────────────── */
.kw-list { list-style: none; margin: 0; padding: 8px 12px 4px; display: flex; flex-direction: column; gap: 2px; }
.kw-center { text-align: center; padding: var(--sp-8) var(--sp-2); color: var(--text-2); font: 500 0.95rem/1.4 var(--font-ui); }
.kw-muted { color: var(--text-2); }
.kw-row {
  display: grid; grid-template-columns: 2rem 2.2rem 1fr auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); cursor: pointer;
  border: 1px solid transparent; transition: background .12s, border-color .12s;
}
.kw-row:hover { background: var(--glass-bg-2); border-color: var(--border-2); }
.kw-rk { font: 800 0.95rem/1 var(--font-data); color: var(--text-2); text-align: center; font-variant-numeric: tabular-nums; }
.kw-av { width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-2); background: var(--bg-3); }
.kw-av-blank { display: inline-block; }

/* skeleton loader rows (shown while a warzone/alliance tier fetches) */
.kw-skel { pointer-events: none; }
.kw-skel-box, .kw-skel-line {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--kw-glow-2) 50%, var(--bg-2) 75%);
  background-size: 200% 100%; animation: kw-shimmer 1.2s ease-in-out infinite; border-radius: 6px;
}
.kw-skel-line { height: 11px; display: inline-block; }
@keyframes kw-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.kw-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kw-name { font: 700 0.96rem/1.2 var(--font-ui); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-meta { display: flex; gap: var(--sp-2); align-items: center; }
.kw-abbr { font: 700 0.72rem/1 var(--font-data); color: var(--kw-1); }
.kw-wz { font: 600 0.72rem/1 var(--font-data); color: var(--text-2); }
.kw-metric { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.kw-perweek { font: 800 0.98rem/1 var(--font-data); color: var(--text-1); font-variant-numeric: tabular-nums; }
.kw-raw { font: 500 0.66rem/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }

.kw-cardfoot { text-align: center; padding: 14px 16px 18px; margin: 6px 0 0; font: 500 0.72rem/1.4 var(--font-ui); color: var(--text-2); }
.kw-cardfoot strong { color: var(--kw-1); font-weight: 700; }

.kw-foot { margin-top: var(--sp-5); font: 500 0.78rem/1.5 var(--font-ui); color: var(--text-3); text-align: center; }

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .kw-wrap { padding: var(--sp-4) var(--sp-3) var(--sp-10); }
  /* Toggle drops into normal flow (right-aligned above the controls) so it
     can never overlap the tabs — the absolute + padding-right hack was the
     mobile collision. */
  .kw-shot-toggle { position: static; display: block; margin: 0 0 10px auto; }
  .kw-controls { margin-top: 0; padding-right: 0; }
  /* Edit view must FIT on a phone: 4 tabs wrap 2×2 instead of scrolling off,
     and the pickers stack full-width (the alliance tier shows two). */
  .kw-tabs { flex-wrap: wrap; overflow: visible; gap: 6px; }
  .kw-tab { flex: 1 1 40%; justify-content: center; text-align: center; padding: 9px 6px; font-size: 0.84rem; }
  .kw-pickers { flex-direction: column; gap: var(--sp-2); }
  .kw-ctl { flex: 1 1 auto; }
  .kw-brandbar { padding: 11px 14px; }
  .kw-hero { padding: 20px 12px 4px; }
  .kw-podium { padding: 18px 8px 2px; }
  .kw-list { padding: 8px 8px 4px; }
  .kw-row { grid-template-columns: 1.5rem 2rem 1fr auto; gap: var(--sp-2); padding: var(--sp-2) var(--sp-1); }
  .kw-av { width: 2rem; height: 2rem; }
  .kw-name { font-size: 0.9rem; }
  .kw-perweek { font-size: 0.92rem; }
}
@media (max-width: 380px) {
  .kw-title { font-size: 1.85rem; }
}