:root {
  --dark: #0e0b0b;
  --panel: #1a1413;
  --blood: #e5251d;
  --bone: #ece6df;
  --ash: #8c8582;
  --rule: #2e2523;
  --hazard: #f2c200;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--dark);
  color: var(--bone);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* faint scanlines over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px);
}

main {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 3rem) 1rem 5rem;
  overflow-x: clip;
}

a { color: var(--bone); text-underline-offset: 0.2em; text-decoration-color: var(--blood); }
a:hover { color: var(--blood); }

:focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; }

/* ---------- warning banner and ticker ---------- */

.warn {
  padding: 0.55rem 1rem;
  background: var(--hazard);
  color: var(--dark);
  text-align: center;
  font-weight: 800;
  border-block: 6px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--dark) 0 10px, var(--hazard) 10px 20px) 6;
}

.ticker { overflow: hidden; background: var(--blood); color: var(--dark); font-weight: 800; white-space: nowrap; }
.ticker .track { display: inline-block; padding: 0.45rem 0; }
.ticker span { padding: 0 2rem; }
.ticker span::before { content: "\25B6"; margin-right: 2rem; font-size: 0.7em; vertical-align: 0.1em; }

@media (prefers-reduced-motion: no-preference) {
  .ticker .track { animation: marquee 40s linear infinite; }
  @keyframes marquee { to { transform: translateX(-50%); } }
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 52rem) {
  .hero { grid-template-columns: minmax(0, 24rem) 1fr; gap: 4rem; }
}

h1 {
  margin: 0;
  font-size: clamp(2.75rem, 8vw, 5.75rem);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.caption {
  margin: 1.25rem 0 0;
  min-height: 3.1em;
  max-width: 30ch;
  font-size: 1.375rem;
  line-height: 1.35;
}

.kd {
  display: flex;
  gap: 2.5rem;
  margin-top: 1.5rem;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.85;
}
.kd b { display: block; font-size: clamp(5rem, 14vw, 8.5rem); font-weight: 900; font-variant-numeric: tabular-nums; }
.kd span { display: block; margin-top: 0.5rem; font-size: 1rem; font-weight: 600; font-stretch: 100%; color: var(--ash); }
.kd .deaths b { color: var(--blood); }
.kd .deaths b[data-long] { font-size: clamp(2.6rem, 8vw, 5.5rem); }
.kd .deaths b[data-xl] { font-size: clamp(1.6rem, 5vw, 3.2rem); }

@media (prefers-reduced-motion: no-preference) {
  .ready .kd { animation: slam 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) 0.15s both; }
  @keyframes slam {
    0% { transform: translateY(-1.5rem) scale(1.15); opacity: 0; }
    55% { transform: translate(0.4rem, 0.2rem); opacity: 1; }
    75% { transform: translate(-0.3rem, -0.1rem); }
    100% { transform: none; }
  }
}

.respawn {
  margin-top: 1.75rem;
  padding: 0.8rem 1.5rem;
  border: 2px solid var(--blood);
  border-radius: 0;
  background: transparent;
  color: var(--bone);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.respawn:hover { background: var(--panel); }
.respawn[aria-pressed="true"] { background: var(--blood); color: var(--dark); }

/* ---------- killcam and stickers ---------- */

.cam-wrap { position: relative; width: 100%; max-width: 24rem; }

.cam {
  position: relative;
  width: 100%;
  border: 4px solid var(--blood);
  background: #000;
}

.frame {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
}

.frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.frame .dead { opacity: 1; transition: opacity 0.35s steps(4); }
.respawned .dead { opacity: 0; }

.tag {
  margin: 0;
  padding: 0.55rem 0.9rem;
  background: var(--blood);
  color: var(--dark);
  font-weight: 900;
  font-stretch: 125%;
}
.tag:empty::after { content: "Eliminated"; }
.respawned .tag:empty::after { content: "Respawned. Not for long."; }

.sticker {
  position: absolute;
  z-index: 2;
  padding: 0.3rem 0.7rem;
  border: 3px solid var(--dark);
  box-shadow: 3px 3px 0 rgb(0 0 0 / 0.6);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.2;
  pointer-events: none;
}
.sticker.s1 { top: -0.9rem; left: -0.7rem; background: var(--hazard); color: var(--dark); transform: rotate(-9deg); }
.sticker.s2 { top: -0.8rem; right: -0.5rem; background: var(--bone); color: var(--dark); transform: rotate(7deg); }
.sticker.s3 { bottom: 3.6rem; left: -0.8rem; background: var(--blood); color: var(--dark); transform: rotate(-4deg); }

/* ---------- sections ---------- */

section { margin-top: clamp(3.5rem, 8vw, 6rem); }

h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.1;
}

/* ---------- first-kill clock ---------- */

.clock { padding: 1.5rem; border: 2px solid var(--blood); background: var(--panel); max-width: 40rem; }
.clock h2 { font-size: 1.15rem; font-weight: 700; font-stretch: 100%; color: var(--ash); margin-bottom: 0.75rem; }

.digits {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  font-size: clamp(2.5rem, 11vw, 5rem);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.digits i { font-style: normal; color: var(--blood); }

@media (prefers-reduced-motion: no-preference) {
  .digits i { animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0.15; } }
}

.progress { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.progress .track { flex: 1; height: 0.9rem; border: 2px solid var(--rule); background: var(--dark); }
.progress .fill { width: 0; height: 100%; background: var(--blood); }
.progress .pct { font-weight: 900; font-stretch: 125%; font-variant-numeric: tabular-nums; }
.clock-note { margin: 0.75rem 0 0; color: var(--ash); font-size: 0.95rem; }

/* ---------- scoreboard ---------- */

dl { margin: 0; max-width: 40rem; }

.row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}
.row:last-child { border-bottom: 1px solid var(--rule); }
dt { color: var(--ash); }
dd { margin: 0; }

@media (max-width: 30rem) {
  .row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ---------- reviews ---------- */

.reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .reviews { grid-template-columns: 1fr 1fr; } }

.reviews li { padding: 1rem 1.1rem; background: var(--panel); border-left: 4px solid var(--blood); }
.reviews p { margin: 0; }
.stars { color: var(--hazard); letter-spacing: 0.1em; }
.reviews .by { margin-top: 0.5rem; color: var(--ash); font-size: 0.95rem; }

/* ---------- lobby chat ---------- */

.chat {
  list-style: none;
  margin: 0;
  padding: 1rem 1.1rem;
  max-width: 40rem;
  height: 15.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--panel);
  border-left: 4px solid var(--hazard);
}
.chat li { padding: 0.15rem 0; }
.chat b { margin-right: 0.35rem; }
.chat .c1 { color: var(--hazard); }
.chat .c2 { color: #7ec8ff; }
.chat .c3 { color: #8ee08e; }
.chat .c4 { color: #ff9bd0; }

@media (prefers-reduced-motion: no-preference) {
  .chat li:last-child { animation: pop 0.25s ease-out; }
  @keyframes pop { from { opacity: 0; transform: translateY(0.4rem); } }
}

/* ---------- roast wall ---------- */

.wall form { display: grid; gap: 0.75rem; max-width: 32rem; }

.wall label { display: grid; gap: 0.3rem; color: var(--ash); font-size: 0.95rem; }

.wall input,
.wall textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid #4a3a36;
  border-radius: 0;
  background: var(--panel);
  color: var(--bone);
  font: inherit;
}
.wall textarea { resize: vertical; min-height: 5.5rem; }

.wall .submit {
  justify-self: start;
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: 0;
  background: var(--blood);
  color: var(--dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.wall .submit:disabled { opacity: 0.55; cursor: wait; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.status { margin: 0; min-height: 1.5em; color: var(--ash); }

.roasts { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 40rem; }
.roasts li { padding: 1rem 0; border-top: 1px solid var(--rule); }
.roasts p { margin: 0; }
.roasts .by { margin-top: 0.25rem; color: var(--ash); font-size: 0.95rem; }

footer { margin-top: 5rem; color: var(--ash); font-size: 0.95rem; }
footer p { margin: 0 0 0.75rem; }
footer details p { max-width: 40rem; margin-top: 0.5rem; }
summary { cursor: pointer; }

/* ---------- sound toggle ---------- */

.sound {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  padding: 0.6rem 1rem;
  border: 2px solid var(--blood);
  border-radius: 0;
  background: var(--panel);
  color: var(--bone);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sound[aria-pressed="true"] { background: var(--blood); color: var(--dark); }

@media (max-width: 30rem) {
  .sound { right: 0.5rem; bottom: 0.5rem; padding: 0.4rem 0.7rem; font-size: 0.85rem; }
}

/* ---------- matchmaking ---------- */

.matchmaking {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 1rem;
  background: rgb(14 11 11 / 0.98);
}
.mm .matchmaking { display: grid; }
.mm { overflow: hidden; }

.mm-box { width: 100%; max-width: 30rem; }
.mm-title { margin: 0; font-size: clamp(1.5rem, 5vw, 2.1rem); font-weight: 900; font-stretch: 125%; line-height: 1.1; }
.mm-count { margin: 1rem 0 0.75rem; color: var(--ash); }
.mm-count b { color: var(--bone); font-variant-numeric: tabular-nums; }
.mm-bar { height: 0.7rem; overflow: hidden; background: var(--panel); }
.mm-bar i { display: block; width: 35%; height: 100%; background: var(--blood); animation: sweep 0.9s linear infinite; }
.mm.failed .mm-bar i, .failed .mm-bar i { width: 100%; animation: none; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.mm-detail { min-height: 3em; margin: 1rem 0 0; color: var(--ash); }

.mm-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }

.mm-sound {
  padding: 0.8rem 1.25rem;
  border: 2px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ash);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.mm-sound:hover { color: var(--bone); border-color: var(--ash); }
.mm-sound[aria-pressed="true"] { color: var(--bone); border-color: var(--bone); }

.mm-go {
  padding: 0.8rem 1.5rem;
  border: 2px solid var(--blood);
  border-radius: 0;
  background: transparent;
  color: var(--bone);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.mm-go:hover { background: var(--panel); }
.failed .mm-go { background: var(--blood); color: var(--dark); }

/* ---------- death effects ---------- */

.flash {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, transparent 25%, rgb(229 37 29 / 0.8) 100%);
}
.flash.on { animation: flash 0.7s ease-out; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

.splash {
  position: fixed;
  inset: 0;
  z-index: 91;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  font-size: clamp(3rem, 15vw, 10rem);
  font-weight: 900;
  font-stretch: 125%;
  color: var(--blood);
  text-shadow: 0 0 2rem rgb(0 0 0 / 0.9);
}
.splash.on { animation: splash 0.9s ease-out; }
@keyframes splash {
  0% { opacity: 1; transform: scale(1.4); }
  30% { transform: scale(1); }
  100% { opacity: 0; }
}

.shake main, .shake .warn, .shake .ticker { animation: shake 0.45s; }
@keyframes shake {
  0%, 100% { transform: none; }
  15% { transform: translate(-10px, 6px) rotate(-0.4deg); }
  30% { transform: translate(9px, -7px); }
  45% { transform: translate(-7px, -4px) rotate(0.3deg); }
  60% { transform: translate(6px, 5px); }
  80% { transform: translate(-3px, 2px); }
}

/* ---------- crosshair everywhere, hand on things that do something ---------- */

body { cursor: crosshair; }
a, button, summary, select, label, .frame { cursor: pointer; }
input, textarea { cursor: text; }

.miss {
  position: fixed;
  z-index: 85;
  pointer-events: none;
  color: var(--ash);
  font-weight: 800;
  font-size: 0.95rem;
  transform: translate(-50%, -50%);
  animation: miss 0.7s ease-out forwards;
}
@keyframes miss { to { opacity: 0; transform: translate(-50%, -2.4rem); } }

/* ---------- mic ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.actions .respawn { margin-top: 0; }

.mic-open {
  padding: 0.8rem 1.5rem;
  border: 2px solid var(--ash);
  border-radius: 0;
  background: transparent;
  color: var(--bone);
  font: inherit;
  font-weight: 700;
}
.mic-open:hover { background: var(--panel); }
.mic-open[aria-pressed="true"] { border-color: #3ddc84; color: #3ddc84; }

.voice {
  max-width: 26rem;
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  background: var(--panel);
  border-left: 4px solid #3ddc84;
}
.voice[hidden] { display: none; }
.voice-head { display: flex; align-items: center; gap: 0.85rem; }
.avatar {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: url("/danile.webp") 65% 35% / 260% no-repeat;
  box-shadow: 0 0 0 3px #3ddc84;
}
.voice.muted .avatar { box-shadow: 0 0 0 3px var(--rule); filter: grayscale(1); }
.voice-who { flex: 1; display: grid; line-height: 1.25; }
.voice-status { color: #3ddc84; font-size: 0.9rem; }
.voice.muted .voice-status { color: var(--ash); }
.mute {
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--bone);
  font: inherit;
  font-weight: 700;
}
.mute:hover { border-color: var(--ash); }
.subtitle { margin: 0.9rem 0 0; min-height: 3.2em; font-size: 1.1rem; line-height: 1.45; }

@media (prefers-reduced-motion: no-preference) {
  .voice:not(.muted) .avatar { animation: speak 0.55s ease-in-out infinite alternate; }
  @keyframes speak { to { box-shadow: 0 0 0 7px rgb(61 220 132 / 0.45); } }
}

/* ---------- killcam and achievement toast ---------- */

.killcam {
  position: fixed;
  left: 50%;
  bottom: 5rem;
  z-index: 95;
  width: min(92vw, 28rem);
  padding: 0.9rem 1.1rem;
  background: var(--dark);
  border-left: 5px solid var(--blood);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 1rem);
  transition: opacity 0.2s, transform 0.2s;
}
.killcam.on { opacity: 1; transform: translate(-50%, 0); }
.killcam p { margin: 0; }
.kc-head { font-size: 1.15rem; }
.kc-head b { color: var(--blood); }
.kc-meta { color: var(--ash); font-size: 0.95rem; }
.kc-last { margin-top: 0.4rem; font-style: italic; }

.toast {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 95;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  width: min(92vw, 22rem);
  padding: 0.8rem 1rem;
  background: var(--panel);
  border: 2px solid var(--hazard);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-1.5rem);
  transition: opacity 0.25s, transform 0.25s;
}
.toast.on { opacity: 1; transform: none; }
.toast p { margin: 0; line-height: 1.3; }
.toast-icon { font-size: 2rem; color: var(--hazard); line-height: 1; }
.toast-label { color: var(--ash); font-size: 0.85rem; }
.toast-title { font-weight: 800; }
.toast-desc { color: var(--ash); font-size: 0.9rem; }

/* ---------- loadout ---------- */

.loadout { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; max-width: 40rem; }
@media (min-width: 40rem) { .loadout { grid-template-columns: 1fr 1fr; } }
.loadout li { display: grid; gap: 0.15rem; padding: 1rem 1.1rem; background: var(--panel); border-left: 4px solid var(--blood); }
.loadout .slot { color: var(--ash); font-size: 0.95rem; }
.loadout b { font-size: 1.4rem; font-weight: 900; font-stretch: 125%; line-height: 1.15; }

/* ---------- skill rating ---------- */

.rank { margin: 0; max-width: 40rem; }
.rank svg { display: block; width: 100%; height: auto; background: var(--panel); }
.rank .grid line { stroke: var(--rule); stroke-width: 1; }
.rank .line { fill: none; stroke: var(--blood); stroke-width: 3; stroke-linejoin: round; }
.rank .dots circle { fill: var(--blood); stroke: var(--dark); stroke-width: 2; }
.rank text { font: 600 13px "Archivo", sans-serif; fill: var(--ash); }
.rank .label { fill: var(--bone); }
.rank figcaption { margin-top: 0.6rem; color: var(--ash); font-size: 0.95rem; }

/* ---------- shooting range ---------- */

.lede { margin: 0 0 1rem; max-width: 40rem; color: var(--ash); }
.range { max-width: 40rem; }
.range canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border: 3px solid var(--blood); }
.range canvas.live { cursor: none; touch-action: none; }
.hud { margin: 0.75rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.range-msg { margin: 0.25rem 0 0; min-height: 1.6em; color: var(--ash); }
.range .respawn { margin-top: 0.75rem; }

/* ---------- compare and report ---------- */

.inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; max-width: 32rem; }
.inline label { display: grid; gap: 0.3rem; color: var(--ash); font-size: 0.95rem; }
.inline input, .inline select {
  min-width: 11rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #4a3a36;
  border-radius: 0;
  background: var(--panel);
  color: var(--bone);
  font: inherit;
}
.inline .submit {
  padding: 0.75rem 1.4rem;
  border: 0;
  border-radius: 0;
  background: var(--blood);
  color: var(--dark);
  font: inherit;
  font-weight: 700;
}
.out { margin: 1rem 0 0; min-height: 1.6em; max-width: 40rem; font-size: 1.1rem; }

/* ---------- 404 ---------- */

.lost .frame { cursor: default; display: grid; place-items: center; background: var(--panel); }
.lost .frame span { font-size: 6rem; font-weight: 900; font-stretch: 125%; color: var(--blood); }

@media (prefers-reduced-motion: reduce) {
  .frame .dead { transition: none; }
}