/* Deadzone — end-of-the-world UI. Tokens match the design canvas. */
:root {
  --soot: #15120F;
  --soot-2: #1D1915;
  --panel: #221D18;
  --panel-2: #2E2720;
  --line: #3A332B;
  --bone: #E9E1D0;
  --ash: #C9BEA9;
  --muted: #A89C88;
  --hazard: #E3B23C;
  --surv: #7FB8C4;
  --surv-bg: #1E2425;
  --horde: #E0643E;
  --horde-bg: #2A1A14;
  --horde-deep: #180F0C;
  --f-display: 'Rubik Dirt', Impact, sans-serif;
  --f-ui: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-note: 'Special Elite', 'Courier New', monospace;
  --tape: repeating-linear-gradient(-45deg, var(--hazard) 0 14px, var(--soot) 14px 28px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--soot); color: var(--bone); font-family: var(--f-ui); font-size: 17px; -webkit-text-size-adjust: 100%; }
body { overscroll-behavior: none; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--bone); }
a:hover { color: var(--hazard); }
:focus-visible { outline: 3px solid var(--hazard); outline-offset: 2px; }
[hidden] { display: none !important; }

#app { min-height: 100dvh; max-width: 520px; margin: 0 auto; position: relative; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; padding: 16px 18px 20px; gap: 14px; min-height: 100dvh;
  background: radial-gradient(120% 60% at 50% 0%, #2B241D 0%, var(--soot) 60%); }
.screen.horde { background: radial-gradient(110% 60% at 50% 38%, #2C1812 0%, var(--horde-deep) 65%); }
.screen.surv { background: radial-gradient(110% 60% at 50% 35%, #1C2224 0%, #121515 65%); }
.screen.down { background: radial-gradient(100% 55% at 50% 100%, #3A1A10 0%, var(--soot) 70%); }
.grow { flex: 1; }
.row { display: flex; gap: 10px; align-items: center; }
.between { justify-content: space-between; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.center { text-align: center; }
.tape { height: 14px; background: var(--tape); margin: -16px -18px 0; }
.tape.rust { background: repeating-linear-gradient(-45deg, var(--horde) 0 12px, var(--soot) 12px 24px); }

/* Type */
.display { font-family: var(--f-display); font-weight: 400; line-height: .9; margin: 0; letter-spacing: .01em; }
.xl { font-size: clamp(56px, 18vw, 80px); }
.lg { font-size: 44px; }
.md { font-size: 30px; }
.sm { font-size: 22px; }
.note { font-family: var(--f-note); font-size: 14px; color: var(--ash); margin: 0; }
.muted { color: var(--muted); }
.ash { color: var(--ash); }
.c-surv { color: var(--surv); }
.c-horde { color: var(--horde); }
.c-hazard { color: var(--hazard); }
p { margin: 0; line-height: 1.35; }
h2.label { font-family: var(--f-note); font-weight: 400; font-size: 14px; color: var(--ash); margin: 0; letter-spacing: .02em; }

/* Buttons */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 16px; border: 2px solid var(--bone);
  background: transparent; color: var(--bone); font-weight: 700; font-size: 20px; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: 0; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--hazard); border-color: var(--hazard); color: var(--soot); }
.btn.rust { background: var(--horde); border-color: var(--horde); color: var(--horde-deep); }
.btn.surv { background: var(--surv); border-color: var(--surv); color: #121515; }
.btn.warn { border-color: var(--hazard); color: var(--hazard); }
.btn.big { min-height: 64px; font-size: 24px; }
.btn.huge { min-height: 72px; font-family: var(--f-display); font-weight: 400; font-size: 32px; letter-spacing: .03em; }
.btn.small { min-height: 44px; font-size: 16px; padding: 0 12px; }
.linkbtn { background: none; border: 0; color: var(--bone); text-decoration: underline; min-height: 44px; cursor: pointer; font-size: 17px; padding: 0 4px; }
.iconbtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--bone); cursor: pointer; }

/* Inputs */
label.field { display: flex; flex-direction: column; gap: 6px; }
.input { min-height: 56px; background: var(--panel); border: 2px solid var(--line); color: var(--bone); padding: 0 14px; font-size: 22px; border-radius: 0; width: 100%; }
.input.code { font-family: var(--f-display); font-size: 34px; letter-spacing: .3em; text-transform: uppercase; }
.input:focus { border-color: var(--hazard); outline: none; }
.settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.settings .input { font-size: 18px; min-height: 48px; }
.settings label { font-size: 15px; color: var(--ash); }

/* Bits */
.tag { display: inline-block; transform: rotate(-2deg); background: var(--bone); color: var(--soot); font-family: var(--f-note); font-size: 15px; padding: 6px 10px; align-self: flex-start; }
.taped-code { display: inline-block; transform: rotate(-2deg); background: var(--bone); color: var(--soot); font-family: var(--f-display); font-size: 44px; line-height: 1; padding: 6px 12px 4px; }
.badge { font-family: var(--f-display); font-size: 22px; padding: 2px 8px 0; align-self: center; }
.badge.surv { background: var(--surv); color: #121515; }
.badge.horde { background: var(--horde); color: var(--horde-deep); }
.timer { font-family: var(--f-display); font-size: 30px; line-height: 1; }
.card { background: var(--panel); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.card.surv { border-top: 4px solid var(--surv); }
.card.horde { border-top: 4px solid var(--horde); }
.torn-a { clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 64% 95%, 38% 100%, 14% 94%, 0 100%); }
.torn-b { clip-path: polygon(0 0, 100% 0, 100% 100%, 82% 95%, 60% 100%, 34% 94%, 12% 100%, 0 93%); }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); padding: 8px 0; color: var(--ash); }

.roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.roster li { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 0 4px 0 10px; background: var(--panel); border-left: 3px solid var(--surv); font-size: 18px; font-weight: 600; }
.roster.horde li { border-left-color: var(--horde); }
.roster li.me { background: var(--panel-2); }
.roster .st { font-family: var(--f-note); font-size: 13px; font-weight: 400; }

.banner { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--hazard); color: var(--soot); clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 94%, 40% 100%, 0 95%); }
.banner.danger { background: var(--horde); color: var(--horde-deep); }
.banner.calm { background: var(--panel); color: var(--bone); clip-path: none; border-left: 3px solid var(--surv); }
.banner .head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }
.banner .big { font-family: var(--f-display); font-weight: 400; font-size: 26px; }
.bar { height: 6px; background: rgba(21,18,15,.25); }
.bar > span { display: block; height: 100%; background: var(--soot); }
.bar.light { background: var(--line); }
.bar.light > span { background: var(--bone); }

.objective { display: flex; align-items: center; gap: 16px; }
.distance { font-family: var(--f-display); font-size: 64px; line-height: .9; }
.distance small { font-size: 30px; color: var(--muted); }

.squad { display: flex; flex-direction: column; gap: 4px; }
.squad .mate { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; padding: 4px 4px 4px 12px; background: var(--surv-bg); border-left: 3px solid var(--surv); }
.horde .squad .mate { background: var(--horde-bg); border-left-color: var(--horde); }
.squad .mate.downed { background: var(--horde-bg); border: 2px solid var(--horde); }
.squad .mate .n { font-size: 18px; font-weight: 700; }
.squad .mate .d { font-size: 15px; color: var(--ash); }
.squad .mate.downed .d { color: #F0A58A; }

.noise { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; flex: 1; }
.noise span { height: 10px; background: var(--line); }
.noise span.on { background: var(--bone); }
.noise span.loud { background: var(--horde); }

.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-family: var(--f-note); font-size: 13px; color: var(--ash); }
.feed li:first-child { color: var(--bone); }

.items { display: flex; flex-wrap: wrap; gap: 8px; }

.radar-wrap { display: flex; justify-content: center; }
.radar { width: min(300px, 80vw); height: min(300px, 80vw); }

.tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 2px solid var(--line); }
.tabs button { min-height: 40px; background: none; border: 0; color: var(--ash); font-weight: 700; letter-spacing: .08em; cursor: pointer; }
.tabs button[aria-pressed="true"] { background: var(--line); color: var(--bone); }

.map { height: 56vh; min-height: 300px; background: var(--soot-2); border: 1px solid var(--line); }
.map.tall { height: calc(100dvh - 210px); }
.leaflet-container { background: #1D1915; font-family: var(--f-ui); }
.leaflet-tile-pane { filter: invert(1) grayscale(.75) sepia(.35) brightness(.62) contrast(1.15); }
.leaflet-control-attribution { background: rgba(21,18,15,.8) !important; color: var(--muted) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--ash) !important; }
.mk { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: var(--soot); }
.mk-me { width: 18px; height: 18px; border-radius: 50%; background: var(--bone); border: 3px solid var(--soot); box-shadow: 0 0 0 2px var(--bone); }
.mk-surv { width: 14px; height: 14px; border-radius: 50%; background: var(--surv); border: 2px solid var(--soot); }
.mk-horde { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid var(--horde); }
.mk-drop { width: 20px; height: 20px; background: var(--bone); }
.mk-drop.looted { background: var(--line); color: var(--muted); text-decoration: line-through; }
.mk-x { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--hazard); color: var(--hazard); font-size: 18px; background: rgba(21,18,15,.6); }
.mk-label { font-size: 12px; font-weight: 700; color: var(--bone); background: var(--soot); padding: 0 3px; white-space: nowrap; }

.toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.toolbar .btn { min-height: 44px; font-size: 15px; padding: 0 10px; letter-spacing: .04em; }
.toolbar .btn[aria-pressed="true"] { background: var(--bone); color: var(--soot); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 15px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

.qr { background: var(--bone); padding: 14px; align-self: center; line-height: 0; }
.qr svg, .qr img { width: min(220px, 60vw); height: auto; display: block; }
.digits { font-family: var(--f-display); font-size: 44px; letter-spacing: .3em; padding-left: .3em; text-align: center; line-height: 1; }

.viewfinder { position: relative; aspect-ratio: 1; width: 100%; background: repeating-linear-gradient(0deg, #1F1410 0 3px, var(--horde-deep) 3px 6px); overflow: hidden; }
.viewfinder video { width: 100%; height: 100%; object-fit: cover; display: block; }
.viewfinder .corner { position: absolute; width: 44px; height: 44px; border: 4px solid var(--bone); }
.viewfinder .tl { left: 12%; top: 12%; border-right: 0; border-bottom: 0; }
.viewfinder .tr { right: 12%; top: 12%; border-left: 0; border-bottom: 0; }
.viewfinder .bl { left: 12%; bottom: 12%; border-right: 0; border-top: 0; }
.viewfinder .br { right: 12%; bottom: 12%; border-left: 0; border-top: 0; }
.viewfinder .msg { position: absolute; inset: auto 0 8px 0; text-align: center; font-family: var(--f-note); font-size: 13px; color: var(--ash); }

.overlay { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; background: var(--soot); overflow-y: auto; }
.overlay > .screen { max-width: 520px; width: 100%; }
.toast { pointer-events: none; position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 12px); transform: translateX(-50%); z-index: 3000; max-width: 92vw; background: var(--bone); color: var(--soot); padding: 12px 16px; font-weight: 600; font-size: 17px; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.toast.err { background: var(--horde); color: var(--horde-deep); }

.skyline { display: block; width: 100%; height: auto; margin: 4px -18px 0; width: calc(100% + 36px); }
.dev { position: fixed; right: 8px; bottom: 8px; z-index: 1500; display: flex; flex-direction: column; gap: 4px; background: rgba(21,18,15,.92); border: 1px dashed var(--hazard); padding: 6px; }
.dev .row { gap: 4px; }
.dev button { min-width: 36px; min-height: 36px; background: var(--panel); border: 1px solid var(--line); color: var(--bone); cursor: pointer; font-size: 13px; }
.dev .note { font-size: 11px; }

@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: pulse 1.2s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .55; } }
}