/* NOCTURNE — sodium lamp on wet asphalt.
   Amber is structure and self, magenta is threat, jade is confirmation.
   Nothing else gets a colour. */

:root {
  --ink: #07080b;
  --panel: #0c0e13;
  --haze: #14171f;
  --bone: #e8e4da;
  --kumo: #7f8798;
  --line: rgba(232, 228, 218, 0.13);
  --sodium: #f2a65a;
  --danger: #ff2e5e;
  --jade: #6fe3b0;
  --cyan: #27e0ff;

  --display: "Chakra Petch", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --jp: "Shippori Mincho", serif;

  /* Aliases. Later UI was written against these names; mapping them here keeps
     one palette rather than two competing sets of colour variables. */
  --amber: var(--sodium);
  --rose: var(--danger);
  --ink-0: var(--bone);
  --ink-1: #b9bdc7;
  --ink-2: var(--kumo);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

#view {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── shared frame: viewfinder brackets, echoing the crosshair ───────────── */
.frame {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 23, 31, 0.92), rgba(9, 10, 14, 0.94));
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.frame::before, .frame::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--sodium);
  opacity: 0.75;
  pointer-events: none;
}
.frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.btn {
  padding: 11px 20px;
  background: rgba(232, 228, 218, 0.05);
  border: 1px solid var(--line);
  color: var(--bone);
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { background: rgba(242, 166, 90, 0.12); border-color: var(--sodium); }
.btn.primary { background: var(--sodium); color: #120b04; border-color: var(--sodium); }
.btn.primary:hover { filter: brightness(1.12); }
.btn.ghost { background: none; color: var(--kumo); }
.btn.ghost:hover { color: var(--bone); border-color: var(--danger); background: rgba(255, 46, 94, 0.08); }
.btn i { font-style: normal; opacity: 0.5; font-size: 11px; margin-left: 6px; letter-spacing: 0.04em; }
:focus-visible { outline: 2px solid var(--sodium); outline-offset: 2px; }

.hint {
  font-size: 12px;
  line-height: 1.55;
  color: var(--kumo);
  margin: 14px 0 0;
  max-width: 52ch;
}

/* ── menu shell ─────────────────────────────────────────────────────────── */
#menu {
  position: fixed;
  inset: 0;
  z-index: 20;
  background:
    radial-gradient(120% 80% at 18% 12%, rgba(42, 58, 104, 0.32), transparent 60%),
    radial-gradient(90% 70% at 88% 88%, rgba(255, 46, 94, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(6, 7, 10, 0.62), rgba(6, 7, 10, 0.9));
  backdrop-filter: blur(9px) saturate(1.15);
}
#menu.hidden { display: none; }

.screen { position: absolute; inset: 0; padding: 48px 56px 48px 104px; display: none; }
.screen.on { display: block; animation: fade 0.32s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* signature: the spine. a hairline rule with vertical kanji and a travelling mark */
.spine {
  position: absolute;
  left: 46px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.spine-jp {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  font-family: var(--jp);
  font-size: 15px;
  letter-spacing: 0.42em;
  color: var(--kumo);
  opacity: 0.55;
  white-space: nowrap;
}
.spine-mark {
  position: absolute;
  left: -3px;
  width: 7px;
  height: 26px;
  background: var(--sodium);
  box-shadow: 0 0 16px rgba(242, 166, 90, 0.8);
  animation: travel 9s ease-in-out infinite;
}
@keyframes travel {
  0%, 100% { top: 22%; }
  50% { top: 74%; }
}

/* ── home ───────────────────────────────────────────────────────────────── */
.home-grid {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(420px, 560px);
  gap: 64px;
  align-content: center;
  align-items: center;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sodium);
}
h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(58px, 9vw, 126px);
  letter-spacing: -0.02em;
  line-height: 0.86;
  margin: 14px 0 20px;
  text-transform: uppercase;
}
.lede { color: var(--kumo); font-size: 15px; line-height: 1.65; max-width: 44ch; margin: 0; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row .field:last-child { grid-column: 1 / -1; }
.field { display: block; }
.field span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kumo);
  margin-bottom: 6px;
}
.field input, .field select, .row select, .row input[type="color"] {
  width: 100%;
  padding: 11px 13px;
  background: rgba(232, 228, 218, 0.04);
  border: 1px solid var(--line);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.05em;
}
.field input:focus, .field select:focus { border-color: var(--sodium); outline: none; }

.mainnav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 17px 18px;
  margin-top: 2px;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  text-align: left;
  transition: background 0.18s, padding-left 0.18s;
}
.nav-item:last-child { border-bottom: 1px solid var(--line); }
.nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--sodium);
  transform: scaleY(0);
  transition: transform 0.18s ease;
}
.nav-item:hover { background: rgba(242, 166, 90, 0.07); padding-left: 26px; }
.nav-item:hover::before { transform: scaleY(1); }
.nav-item .idx { font-family: var(--mono); font-size: 11px; color: var(--sodium); letter-spacing: 0.1em; }
.nav-item .lbl { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.nav-item .jp { font-family: var(--jp); font-size: 14px; color: var(--kumo); letter-spacing: 0.2em; }
.nav-item.primary .lbl { color: var(--sodium); }
.mainnav .field-row { margin-bottom: 8px; }
.mainnav .hint { margin-bottom: 20px; }

.corner-note {
  position: absolute;
  right: 56px;
  bottom: 42px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(127, 135, 152, 0.6);
}

/* ── screen heads ───────────────────────────────────────────────────────── */
.screen-head { display: flex; align-items: center; gap: 24px; margin-bottom: 26px; }
.screen-head h2 {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.screen-head h2 em { font-family: var(--jp); font-style: normal; font-size: 16px; color: var(--kumo); margin-left: 10px; letter-spacing: 0.2em; }
.back {
  background: none;
  border: 0;
  color: var(--kumo);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 0;
}
.back:hover { color: var(--sodium); }
.locker-tabs { margin-left: auto; display: flex; gap: 2px; }
.locker-tab, .set-tab {
  padding: 9px 18px;
  background: none;
  border: 1px solid var(--line);
  color: var(--kumo);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.locker-tab.on, .set-tab.on { color: #120b04; background: var(--sodium); border-color: var(--sodium); }

/* ── locker ─────────────────────────────────────────────────────────────── */
.locker-grid {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  gap: 18px;
  height: calc(100% - 92px);
}
.skin-list { padding: 16px; overflow: auto; }
#skin-grid { display: flex; flex-direction: column; gap: 8px; }
.skin-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  padding: 12px 14px 12px 12px;
  background: rgba(232, 228, 218, 0.03);
  border: 1px solid var(--line);
  text-align: left;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.skin-card:hover { background: rgba(232, 228, 218, 0.06); transform: translateX(3px); }
.skin-card.on { border-color: var(--sodium); background: rgba(242, 166, 90, 0.1); }
.skin-card i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--a), var(--b));
}
.sk-jp { grid-row: 1 / 3; font-family: var(--jp); font-size: 21px; color: var(--sodium); align-self: center; padding-left: 8px; }
.sk-name { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.03em; }
.sk-line { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kumo); }

.preview-wrap { display: flex; flex-direction: column; position: relative; }
#preview-canvas { flex: 1; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#preview-canvas:active { cursor: grabbing; }
.preview-actions { display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--line); }
.preview-hint {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(127, 135, 152, 0.7);
}

.detail { padding: 22px; }
.detail-jp { font-family: var(--jp); font-size: 40px; color: var(--sodium); line-height: 1; }
.detail h3 { font-family: var(--display); font-size: 24px; font-weight: 600; margin: 10px 0 4px; letter-spacing: 0.02em; text-transform: uppercase; }
.detail-line { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--kumo); }
.detail p { font-size: 13.5px; line-height: 1.7; color: var(--kumo); margin: 18px 0 22px; }
.stats { border-top: 1px solid var(--line); }
.stats div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.stats span { color: var(--kumo); }
.stats b { font-family: var(--mono); font-weight: 500; }

/* ── settings ───────────────────────────────────────────────────────────── */
.settings-body { padding: 26px 30px; height: calc(100% - 92px); overflow: auto; max-width: 860px; }
.set-pane { display: none; }
.set-pane.on { display: block; }
.row {
  display: grid;
  grid-template-columns: 1fr 220px 56px;
  align-items: center;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.row label { font-size: 14px; }
.row output { font-family: var(--mono); font-size: 12px; color: var(--sodium); text-align: right; }
.row input[type="checkbox"] { justify-self: start; width: 46px; height: 24px; appearance: none; background: rgba(232, 228, 218, 0.08); border: 1px solid var(--line); position: relative; cursor: pointer; }
.row input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--kumo); transition: transform 0.15s, background 0.15s; }
.row input[type="checkbox"]:checked { background: rgba(242, 166, 90, 0.2); border-color: var(--sodium); }
.row input[type="checkbox"]:checked::after { transform: translateX(20px); background: var(--sodium); }
.row input[type="color"] { padding: 3px; height: 34px; }

input[type="range"] { appearance: none; width: 100%; height: 2px; background: var(--line); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; background: var(--sodium); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; background: var(--sodium); cursor: pointer; }

#bind-list { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
.bind-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.bind-row button {
  min-width: 108px;
  padding: 7px 12px;
  background: rgba(232, 228, 218, 0.05);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--bone);
}
.bind-row button:hover { border-color: var(--sodium); color: var(--sodium); }
.bind-row button.capturing { border-color: var(--danger); color: var(--danger); }
.settings-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 26px; }

/* ── lobby ──────────────────────────────────────────────────────────────── */
#lobby { display: none; place-items: center; }
#lobby.on { display: grid; }
.lobby-card { padding: 44px 52px; text-align: center; min-width: 380px; }
.lobby-card h2 { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin: 18px 0 8px; }
.lobby-card p { color: var(--kumo); font-size: 13px; margin: 0 0 26px; font-family: var(--mono); letter-spacing: 0.05em; }
#lobby-spinner { display: flex; gap: 6px; justify-content: center; }
#lobby-spinner.hidden { visibility: hidden; }
#lobby-spinner i { width: 6px; height: 6px; background: var(--sodium); animation: pulse 1.1s ease-in-out infinite; }
#lobby-spinner i:nth-child(2) { animation-delay: 0.14s; }
#lobby-spinner i:nth-child(3) { animation-delay: 0.28s; }
@keyframes pulse { 0%, 100% { opacity: 0.2; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(2.4); } }

/* ── pause ──────────────────────────────────────────────────────────────── */
#pause { position: fixed; inset: 0; z-index: 25; display: none; place-items: center; background: rgba(7, 8, 11, 0.72); backdrop-filter: blur(6px); }
#pause.on { display: grid; }
.pause-card { padding: 38px 44px; min-width: 340px; }
.pause-card h2 { font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 8px; }
.pause-card p { color: var(--kumo); font-size: 13px; margin: 0 0 26px; }
.pause-actions { display: flex; flex-direction: column; gap: 8px; }

/* ── HUD ────────────────────────────────────────────────────────────────── */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
#hud.on { opacity: 1; }

#reticle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* #reticle already centres itself; the canvas just needs to match its buffer */
#crosshair { display: block; width: 200px; height: 200px; }
#hitmarker { position: absolute; inset: 0; opacity: 0; }
#hitmarker span { position: absolute; left: 50%; top: 50%; width: 9px; height: 2px; background: var(--bone); }
#hitmarker span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) translate(9px); }
#hitmarker span:nth-child(2) { transform: translate(-50%, -50%) rotate(135deg) translate(9px); }
#hitmarker span:nth-child(3) { transform: translate(-50%, -50%) rotate(225deg) translate(9px); }
#hitmarker span:nth-child(4) { transform: translate(-50%, -50%) rotate(315deg) translate(9px); }
#hitmarker.head span { background: var(--danger); height: 3px; width: 12px; }

#dmg-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at center, transparent 42%, rgba(255, 46, 94, 0.55) 100%);
  transition: opacity 0.12s linear;
}
#hitdir-wrap { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#hitdir { position: absolute; left: -110px; top: -110px; width: 220px; height: 220px; opacity: 0; transition: opacity 0.2s; }
#hitdir::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 46px;
  height: 4px;
  transform: translateX(-50%);
  background: var(--danger);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

#hud-top { position: absolute; top: 22px; left: 0; right: 0; display: grid; place-items: center; }
.score-block { display: flex; align-items: center; gap: 20px; padding: 8px 22px; background: rgba(7, 8, 11, 0.6); border: 1px solid var(--line); }
.score-block b { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; color: var(--sodium); }
.score-block b.them { color: var(--danger); }
.score-block span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; color: var(--kumo); }

#banner-wrap { position: absolute; left: 0; right: 0; top: 26%; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity 0.25s, transform 0.25s; }
#banner-wrap.on { opacity: 1; transform: none; }
#banner { font-family: var(--display); font-size: 44px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8); }
#banner-sub { font-family: var(--mono); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--kumo); margin-top: 8px; }

#killfeed { position: absolute; top: 84px; right: 30px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.feed-row { display: flex; align-items: center; gap: 10px; padding: 7px 13px; background: rgba(7, 8, 11, 0.7); border-left: 2px solid var(--sodium); font-size: 12.5px; transition: opacity 0.5s, transform 0.5s; }
.feed-row em { font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kumo); }
.feed-row.out { opacity: 0; transform: translateX(16px); }

#hud-bottom { position: absolute; left: 34px; right: 34px; bottom: 28px; display: flex; justify-content: space-between; align-items: flex-end; }
.hud-stat .cap { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--kumo); display: block; margin-bottom: 4px; }
.hud-stat.right { text-align: right; }
.hp-row, .ammo-row { display: flex; align-items: baseline; gap: 12px; }
.hud-stat b { font-family: var(--display); font-size: 40px; font-weight: 700; line-height: 1; }
#hp-value { color: var(--jade); }
#hp-value.low { color: var(--danger); }
#ammo-value.low { color: var(--danger); }
#hp-bar { width: 140px; height: 3px; background: rgba(232, 228, 218, 0.14); align-self: center; }
#hp-bar span { display: block; height: 100%; width: 100%; background: var(--jade); transition: width 0.18s; }
#ammo-label { font-family: var(--mono); font-style: normal; font-size: 14px; color: var(--kumo); }

#netgraph { position: absolute; top: 22px; left: 30px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(127, 135, 152, 0.85); }
#conn-status { position: absolute; top: 42px; left: 30px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--kumo); }
#conn-status.warn { color: var(--danger); }

#damage-numbers { position: absolute; inset: 0; }
.dmg-num {
  position: absolute;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--bone);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%);
  animation: floatUp 0.85s ease-out forwards;
}
.dmg-num.head { color: var(--danger); font-size: 27px; }
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  18% { opacity: 1; transform: translate(-50%, -60%) scale(1.12); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--drift)), -170%) scale(0.95); }
}

/* ── loading ────────────────────────────────────────────────────────────── */
#loading { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: var(--ink); transition: opacity 0.5s; }
#loading.gone { opacity: 0; pointer-events: none; }
.load-inner { text-align: center; }
.load-inner span { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: 0.44em; }
.load-inner i { display: block; width: 160px; height: 1px; margin: 18px auto 0; background: var(--line); overflow: hidden; position: relative; }
.load-inner i::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--sodium); animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.err { text-align: center; max-width: 420px; display: grid; gap: 10px; }
.err b { font-family: var(--display); font-size: 20px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--danger); }
.err span { color: var(--kumo); font-size: 13px; line-height: 1.6; }

/* ── responsive: the menu still needs to work on a laptop screen ────────── */
@media (max-width: 1180px) {
  .screen { padding: 32px 28px 32px 76px; }
  .spine { left: 30px; }
  .home-grid { grid-template-columns: 1fr; gap: 28px; align-content: start; padding-top: 4vh; }
  .locker-grid { grid-template-columns: 260px 1fr; grid-template-rows: 1fr auto; }
  .detail { grid-column: 1 / -1; }
  #bind-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* detonation: the slam, then the burn that will not leave your eyes */
#blast-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(65% 65% at 50% 45%, #fff 0%, #fff4d8 55%, #ffb35c 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 901;
  mix-blend-mode: screen;
}
#blast-burn {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 55%, transparent 30%, rgba(255, 122, 40, 0.55) 78%, rgba(214, 40, 8, 0.8) 100%),
    radial-gradient(45% 45% at 50% 42%, rgba(255, 214, 150, 0.5), transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 900;
  mix-blend-mode: screen;
}

/* settings sub-headings and preset chips */
.set-sub {
  margin: 22px 0 6px;
  font: 500 0.68rem/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: 0.85;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chip {
  padding: 6px 11px;
  font: 500 0.72rem/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.16s ease;
}
.chip:hover { color: var(--ink-0); border-color: var(--amber); }
.readout { font: 500 0.82rem/1 var(--mono); color: var(--jade); }

/* ── kill banner: takes the colour of whatever you killed them with ────── */
#killbanner {
  position: absolute;
  left: 50%;
  top: 21%;
  transform: translate(-50%, -14px);
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 20px 9px 16px;
  border-left: 3px solid var(--kb, #f2a65a);
  background: linear-gradient(90deg, rgba(10, 11, 15, 0.9), rgba(10, 11, 15, 0.15));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.2,.8,.3,1);
}
#killbanner.on { opacity: 1; transform: translate(-50%, 0); }
#killbanner .kb-jp { font: 500 1.15rem/1 var(--jp); color: var(--kb, #f2a65a); }
#killbanner .kb-name {
  font: 600 0.95rem/1 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-0);
}
#killbanner .kb-line {
  font: 500 0.66rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ── post-death damage report ──────────────────────────────────────────── */
#dmgreport {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, 8px);
  min-width: 340px;
  padding: 18px 22px 16px;
  background: rgba(8, 9, 13, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.2,.8,.3,1);
}
#dmgreport.on { opacity: 1; transform: translate(-50%, 0); }
#dmgreport h4 {
  margin: 0 0 14px;
  font: 500 0.66rem/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dr-grid { display: flex; gap: 34px; margin-bottom: 12px; }
.dr-col { display: flex; flex-direction: column; gap: 3px; }
.dr-k {
  font: 500 0.62rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dr-col b { font: 600 1.7rem/1 var(--display); color: var(--ink-0); }
.dr-col:first-child b { color: var(--jade); }
.dr-col:last-child b { color: var(--rose); }
.dr-col em { font: 400 0.68rem/1 var(--mono); font-style: normal; color: var(--ink-2); }
.dr-rows { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 10px; }
.dr-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 3px 0;
  font: 400 0.72rem/1.5 var(--mono);
  color: var(--ink-1);
}
.dr-row span:last-child { color: var(--ink-0); }

/* ── wallet + locked cards ─────────────────────────────────────────────── */
/* ── locker wallet strip ───────────────────────────────────────────────── */
#wallet {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  margin-right: 18px;
  font: 500 0.72rem/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
#wallet b { color: var(--amber); font-weight: 600; }
#wallet .w-cr { transition: transform 0.3s cubic-bezier(.2,1.6,.4,1); }
#wallet .w-cr b { color: var(--jade); }
#wallet .w-cr.spend { transform: scale(1.3); }
#wallet .w-cr.spend b { color: var(--rose); }
#wallet .w-bar {
  position: relative;
  width: 90px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
#wallet .w-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--amber);
  transition: width 0.5s cubic-bezier(.2,.8,.3,1);
}
#wallet .w-next { font-size: 0.66rem; opacity: 0.75; }

.skin-card.locked { opacity: 0.55; }
.skin-card.locked .sk-name { color: var(--ink-2); }
.skin-card .sk-price {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font: 600 0.72rem/1 var(--mono);
  color: var(--amber);
}
.skin-card { position: relative; }

#detail-buy { margin: 4px 0 14px; }
.buy-btn {
  width: 100%;
  padding: 11px 14px;
  font: 600 0.78rem/1 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* explicit hex, not a variable: this button must never be unreadable */
  color: #0b0c10;
  background: linear-gradient(180deg, #ffc074, #f2a65a);
  border: 1px solid #ffd9a8;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: filter 0.15s ease;
}
.buy-btn:hover { filter: brightness(1.1); }
.buy-btn.short {
  color: #cfd4de;
  background: rgba(255, 255, 255, 0.06);
  text-shadow: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
}
.buy-btn b { font-family: var(--mono); }

/* ── home: progression card ────────────────────────────────────────────── */
.progress-card {
  margin-top: 30px;
  max-width: 380px;
  padding: 16px 18px 14px;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.pc-top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.pc-k {
  display: block;
  margin-bottom: 4px;
  font: 500 0.6rem/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pc-level b { font: 600 2.1rem/0.85 var(--display); color: var(--ink-0); }
.pc-credits { text-align: right; }
.pc-credits b {
  font: 600 1.5rem/0.9 var(--mono);
  color: var(--jade);
  transition: transform 0.35s cubic-bezier(.2,1.7,.4,1), color 0.35s ease;
  display: inline-block;
}
.pc-credits b.bump { transform: scale(1.35); color: #b6ffd9; }
.pc-bar {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.pc-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--amber), #ffd9a0);
  transition: width 0.6s cubic-bezier(.2,.8,.3,1);
}
.pc-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font: 400 0.68rem/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.progress-card.levelup { animation: pcPulse 0.9s ease; }
@keyframes pcPulse {
  0% { border-color: rgba(255, 255, 255, 0.07); }
  25% { border-color: var(--amber); background: rgba(242, 166, 90, 0.1); }
  100% { border-color: rgba(255, 255, 255, 0.07); }
}

/* ── unlock celebration ────────────────────────────────────────────────── */
#unlock-fx {
  position: fixed;
  inset: 0;
  z-index: 940;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
}
#unlock-fx.on, #unlock-fx.out { opacity: 1; }
#unlock-fx { transition: opacity 0.25s ease; }
#unlock-fx::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 40% at 50% 50%, rgba(242, 166, 90, 0.22), transparent 70%);
  opacity: 0;
}
#unlock-fx.on::before { animation: ufGlow 1.1s ease; }
@keyframes ufGlow { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
/* Driven by transitions rather than a keyframe animation: the reveal is the
   part that has to be reliable, and transitions are far easier to verify. */
.uf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 54px;
  background: rgba(8, 9, 13, 0.86);
  border: 1px solid var(--uf, var(--amber));
  transform: scale(0.86);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(.16,1.5,.3,1), opacity 0.3s ease;
}
#unlock-fx.on .uf-card { transform: scale(1); opacity: 1; }
#unlock-fx.out .uf-card { transform: scale(1.04); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; }
.uf-card::before,
.uf-card::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--uf, var(--amber));
  opacity: 0.55;
}
.uf-card::before { top: 6px; }
.uf-card::after { bottom: 6px; }
.uf-jp { font: 500 2rem/1 var(--jp); color: var(--uf, var(--amber)); }
.uf-name {
  font: 600 1.35rem/1 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-0);
}
.uf-line {
  font: 500 0.64rem/1 var(--mono);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* card buy affordances */
.skin-card .sk-price::before { content: "◆ "; opacity: 0.7; }
.skin-card.locked.afford .sk-price { color: var(--jade); }
.skin-card.locked:hover { opacity: 0.85; }
.skin-card.just-bought { animation: boughtFlash 1s ease; }
@keyframes boughtFlash {
  0% { background: rgba(242, 166, 90, 0.5); }
  100% { background: transparent; }
}
.buy-btn { position: relative; overflow: hidden; }
.buy-btn:not(.short)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: buySheen 2.6s ease-in-out infinite;
}
@keyframes buySheen { 0% { left: -60%; } 55%, 100% { left: 130%; } }

/* ── career ────────────────────────────────────────────────────────────── */
#career-record {
  margin-left: auto;
  font: 500 0.74rem/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
#career-record b { color: var(--ink-0); font-weight: 600; }
#career-record .cr-w { color: var(--jade); }
#career-record .cr-l { color: var(--rose); }
.career-wrap { max-width: 720px; padding: 8px 0; }
#career-list { display: flex; flex-direction: column; }
.match-row {
  display: grid;
  grid-template-columns: 4px 108px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.match-row:last-child { border-bottom: none; }
.match-row i { display: block; width: 4px; height: 30px; }
.match-row.win i { background: var(--jade); }
.match-row.loss i { background: var(--rose); }
.match-res {
  font: 600 0.9rem/1 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.match-row.win .match-res { color: var(--jade); }
.match-row.loss .match-res { color: var(--rose); }
.match-meta {
  font: 400 0.7rem/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.match-score {
  font: 600 1.25rem/1 var(--mono);
  color: var(--ink-0);
  letter-spacing: 0.04em;
}
.match-score span { color: var(--ink-2); }