/* ──────────────────────────────────────────────────────────────────────────
   MANHUNT — industrial / off-white. Bone paper, black ink, signal orange (hunters),
   volt (thieves). Heavy grotesk caps, "quoted" words, mono captions, hazard tape,
   square corners, hard shadows. No rounded anything.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --bone: #f1efe9;
  --paper: #ffffff;
  --ink: #0b0b0b;
  --orange: #ff4f00;
  --volt: #d4ff00;
  --grey: #8a8780;
  --line: rgba(11, 11, 11, 0.16);
  --hazard: repeating-linear-gradient(-45deg, var(--ink) 0 10px, var(--orange) 10px 20px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --vh1: 1vh;
  --lobby-map: calc(var(--vh1) * 36);
  --font: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', Roboto, sans-serif;
  --mono: 'SF Mono', ui-monospace, Menlo, Consolas, 'Roboto Mono', 'Courier New', monospace;
}
@supports (height: 1dvh) { :root { --vh1: 1dvh; } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; border-radius: 0; }
html, body { margin: 0; height: 100%; background: var(--bone); color: var(--ink); font-family: var(--font); overscroll-behavior: none; }
body { font-size: 15px; line-height: 1.35; -webkit-text-size-adjust: 100%; font-variant-emoji: text; }
::selection { background: var(--orange); color: var(--ink); }
button, input, select { font: inherit; color: inherit; touch-action: manipulation; }
button { cursor: pointer; }
.hidden { display: none !important; }
.mono { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.muted { color: var(--grey); }
.small { font-size: 12px; }
.num { font-style: normal; background: var(--orange); color: var(--ink); padding: 1px 5px; margin-right: 6px; }

#app { position: fixed; inset: 0; overflow: hidden; }

/* ───────────── layout per screen ───────────── */
#mapwrap { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: #e8e6df; transition: height .25s ease; z-index: 1; }
#map { position: absolute; inset: 0; background-color: #e8e6df;
  background-image: linear-gradient(rgba(11,11,11,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(11,11,11,.07) 1px, transparent 1px); background-size: 32px 32px; }
.leaflet-container { font-family: var(--font); background: transparent; }
.screen { position: absolute; left: 0; right: 0; bottom: 0; top: 0; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 5; }
.screen-home #home { display: flex; }
.screen-home #mapwrap { visibility: hidden; }
.screen-lobby #mapwrap { height: var(--lobby-map); }
.screen-result #mapwrap { height: calc(var(--vh1) * 44); }
.screen-lobby #lobby { display: block; top: var(--lobby-map); background: var(--bone); border-top: 4px solid var(--ink); }
.screen-lobby .leaflet-control-attribution, .screen-result .leaflet-control-attribution { display: none; }
.leaflet-control-attribution { background: rgba(241,239,233,.85) !important; font: 700 9px var(--mono) !important; letter-spacing: .04em; color: var(--ink) !important; }
.leaflet-control-attribution a { color: var(--ink) !important; }

.mapcaption { position: absolute; left: 0; bottom: 0; z-index: 600; background: var(--ink); color: #fff; padding: 5px 9px; font-size: 9.5px; pointer-events: none; }
.screen-game .mapcaption, .screen-home .mapcaption { display: none; }

/* ───────────── home ───────────── */
#home { flex-direction: column; padding: calc(var(--safe-top) + 12px) 16px calc(var(--safe-bottom) + 18px); background: var(--bone); gap: 0; }
.home-head { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); font-size: 9.5px; }
.wordmark { margin: 16px 0 6px -3px; font: 900 clamp(76px, 27vw, 148px)/.78 var(--font); letter-spacing: -.075em; text-transform: uppercase; }
.wordmark .qm { color: var(--orange); letter-spacing: -.1em; }
.tape { margin: 14px -30px 14px; transform: rotate(-3deg); background: var(--orange); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); overflow: hidden; white-space: nowrap; flex: none; }
.tape-track { display: inline-flex; animation: tape 22s linear infinite; font: 900 14px/1 var(--font); letter-spacing: .05em; padding: 8px 0; text-transform: uppercase; }
@keyframes tape { to { transform: translateX(-50%); } }
.blurb { margin: 4px 0 18px; max-width: 30ch; font-weight: 700; font-size: 15px; line-height: 1.25; }
.card { background: var(--paper); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 16px; display: flex; flex-direction: column; gap: 14px; margin-right: 6px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { display: block; }
input[type=text], input:not([type]), input[type=search] { background: var(--paper); border: 2px solid var(--ink); padding: 13px 12px; outline: none; width: 100%; font-weight: 800; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; }
input::placeholder { color: #b5b2a8; }
input:focus { outline: 3px solid var(--orange); outline-offset: 0; }
.glyphs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.glyphbtn { aspect-ratio: 1; border: 2px solid var(--ink); background: var(--paper); font: 900 20px/1 var(--font); padding: 0; }
.glyphbtn.sel { background: var(--ink); color: var(--volt); }
.or { display: flex; align-items: center; gap: 10px; color: var(--grey); }
.or::before, .or::after { content: ''; flex: 1; height: 2px; background: var(--ink); opacity: .15; }
.joinrow { display: flex; gap: 8px; }
.joinrow input { flex: 1; min-width: 0; text-align: center; letter-spacing: .4em; font-size: 20px; padding-left: calc(12px + .4em); }
#createBlock, #joinBlock { display: flex; flex-direction: column; gap: 10px; }
#roomPeek { margin: 0; color: var(--ink); background: var(--volt); padding: 6px 8px; font-size: 10px; }
#homeCard.invited #joinBlock { order: -1; }
#homeCard.invited #btnCreate { background: var(--paper); color: var(--ink); box-shadow: none; }
#homeCard.invited #btnJoin { background: var(--orange); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.textlink { align-self: flex-start; background: none; border: 0; padding: 14px 0 6px; text-decoration: underline; text-underline-offset: 4px; }
.home-foot { display: flex; justify-content: space-between; margin-top: auto; padding-top: 18px; color: var(--grey); font-size: 9px; }

/* ───────────── buttons ───────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 16px; background: var(--ink); color: #fff; border: 2px solid var(--ink); font: 800 14px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; transition: transform .06s; }
.btn.block { display: flex; width: 100%; justify-content: space-between; min-height: 56px; font-size: 16px; }
.btn.arrow::after { content: '→'; font-weight: 400; font-size: 1.25em; line-height: 1; }
.btn:active { transform: translate(2px, 2px); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.primary { background: var(--orange); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn.primary:active { box-shadow: 2px 2px 0 var(--ink); }
.btn.volt { background: var(--volt); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.danger { color: var(--orange); background: transparent; border-color: var(--orange); }
.btn.small { min-height: 34px; padding: 0 11px; font-size: 11.5px; }
.sqbtn { position: relative; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: var(--ink); border: 2px solid var(--ink); color: #fff; }
.sqbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.sqbtn:active { background: var(--orange); color: var(--ink); }
.badge { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; background: var(--orange); color: var(--ink); border: 2px solid var(--ink); font: 800 11px/16px var(--mono); font-style: normal; text-align: center; }
.textbtn { background: none; border: 0; padding: 0; }

/* ───────────── map overlay buttons ───────────── */
#mapButtons { position: absolute; right: 8px; top: calc(var(--safe-top) + 180px); z-index: 600; display: flex; flex-direction: column; gap: 6px; }
.screen-lobby #mapButtons, .screen-result #mapButtons { top: 8px; }
.screen-home #mapButtons { display: none; }

/* ───────────── lobby ───────────── */
.panel { padding: 12px 12px calc(var(--safe-bottom) + 28px); max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.statusline { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--ink); color: #fff; }
.statusline .dot { width: 8px; height: 8px; background: var(--volt); flex: none; animation: livedot 1s steps(1) infinite; }
.statusline.bad { background: var(--orange); color: var(--ink); }
.statusline.bad .dot { background: var(--ink); animation: none; }
.statusline.wait .dot { background: var(--orange); }
@keyframes livedot { 50% { opacity: .15; } }
.codecard { background: var(--ink); color: #fff; padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: end; position: relative; }
.codecard .lbl { color: #9a988f; }
.codecard .code { font: 900 64px/.9 var(--font); letter-spacing: -.02em; color: var(--paper); margin-top: 6px; }
.codecard .barcode { grid-column: 1 / -1; height: 30px; width: 100%; fill: var(--paper); display: block; }
.codecard .btn { align-self: start; }
.section { background: var(--paper); border: 2px solid var(--ink); padding: 14px; }
.sec-h { display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px; font: 800 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.sec-h .num { margin-right: 8px; }
.plist { display: flex; flex-direction: column; }
.prow { display: grid; grid-template-columns: 22px 36px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: default; }
.prow:last-child { border-bottom: 0; }
.prow .ix { font: 700 10px var(--mono); color: var(--grey); }
.gl { width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--paper); font: 900 18px/1 var(--font); }
.gl.hunter { background: var(--orange); }
.gl.thief { background: var(--volt); }
.prow .nm { font-weight: 900; font-size: 16px; text-transform: uppercase; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .nm .tag { margin-left: 6px; vertical-align: 2px; }
.prow .sub { font: 700 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.prow .meta { min-width: 0; }
.prow .end { display: flex; align-items: center; gap: 6px; font: 700 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.prow.out { opacity: .45; }
.prow.you .nm::after { content: ' ←'; color: var(--orange); }
.pdot { display: inline-block; width: 8px; height: 8px; background: var(--grey); margin-right: 5px; }
.pdot.ok { background: var(--ink); }
.pdot.live { background: var(--orange); }
.x { background: none; border: 2px solid var(--ink); width: 28px; height: 28px; padding: 0; font-size: 14px; font-weight: 900; line-height: 1; }
.x:active { background: var(--orange); }
.tag { display: inline-block; background: var(--orange); color: var(--ink); font: 800 9.5px/1 var(--mono); letter-spacing: .1em; padding: 3px 5px; text-transform: uppercase; }
.tag.ink { background: var(--ink); color: #fff; }
.tag.volt { background: var(--volt); }
.tag.line { background: transparent; border: 1.5px solid var(--ink); }
.settings { display: flex; flex-direction: column; gap: 16px; }
.setting > .lab { display: flex; justify-content: space-between; align-items: baseline; font-weight: 900; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; }
.setting > .lab em { font-style: normal; font: 900 26px/1 var(--font); letter-spacing: -.03em; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 2px solid var(--ink); background: var(--paper); min-height: 38px; padding: 0 12px; font: 800 12.5px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; }
.chip.sel { background: var(--ink); color: var(--volt); }
.chips.ro .chip { pointer-events: none; opacity: .4; }
.chips.ro .chip.sel { opacity: 1; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; background: var(--ink); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 28px; margin-top: -11px; background: var(--orange); border: 2px solid var(--ink); }
input[type=range]::-moz-range-track { height: 6px; background: var(--ink); }
input[type=range]::-moz-range-thumb { width: 14px; height: 24px; background: var(--orange); border: 2px solid var(--ink); }
input[type=range]:disabled { opacity: .4; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.toggle .t { font-weight: 900; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.toggle .d { font: 600 11.5px/1.3 var(--font); color: var(--grey); margin-top: 2px; }
.switch { position: relative; width: 54px; height: 30px; flex: none; }
.switch input { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 2; }
.switch i { position: absolute; inset: 0; background: var(--paper); border: 2px solid var(--ink); }
.switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; background: var(--ink); transition: transform .12s steps(3); }
.switch input:checked + i { background: var(--orange); }
.switch input:checked + i::after { transform: translateX(24px); }
.switch input:disabled + i { opacity: .45; }
.note { font: 600 12px/1.35 var(--font); color: var(--grey); }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > .btn { flex: 1; }
.safety { font: 700 9.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grey); text-align: center; margin: 4px 0 0; }
details.section > summary { cursor: pointer; list-style: none; }
details.section > summary::-webkit-details-marker { display: none; }

/* ───────────── HUD ───────────── */
#hud { position: absolute; inset: 0; z-index: 700; pointer-events: none; }
#hud > * { pointer-events: none; }
#hud button { pointer-events: auto; }
#hudTop { position: absolute; top: calc(var(--safe-top) + 8px); left: 8px; right: 8px; display: flex; gap: 6px; align-items: stretch; }
.mod { background: var(--ink); color: #fff; border: 2px solid var(--ink); padding: 6px 10px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 48px; text-align: left; }
.mod small { font: 700 8px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #a3a198; }
.mod b { font: 900 21px/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mod.role { background: var(--orange); color: var(--ink); }
.mod.role.thief { background: var(--volt); }
.mod.role.spectator { background: var(--paper); }
.mod.role small { color: rgba(11,11,11,.65); }
.mod.role b { font-size: 16px; letter-spacing: -.02em; text-transform: uppercase; }
.clockmod { flex: 1; }
.pingmod { min-width: 66px; position: relative; padding-bottom: 9px; }
.pingmod b { color: var(--orange); }
.pingmod .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #2a2a2a; }
.pingmod .bar u { display: block; height: 100%; background: var(--orange); width: 0; transition: width .3s linear; }
.pingmod.soon b { animation: livedot .5s steps(1) infinite; }
.pingmod.idle b { color: #6b6a64; }
.scoremod { cursor: pointer; pointer-events: auto; }
#liveStrip { position: absolute; top: calc(var(--safe-top) + 64px); left: 8px; display: flex; gap: 8px; align-items: center; background: var(--ink); color: #fff; padding: 5px 8px; font-size: 9px; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; }
#liveStrip .dot { width: 7px; height: 7px; background: var(--volt); flex: none; animation: livedot 1s steps(1) infinite; }
#liveStrip .dot.warn { background: var(--orange); }
#liveStrip .dot.off { background: #777; animation: none; }
.banner { position: absolute; top: calc(var(--safe-top) + 92px); left: 8px; right: 8px; padding: 11px 12px; background: var(--ink); color: #fff; font: 800 12.5px/1.25 var(--mono); letter-spacing: .06em; text-transform: uppercase; border-left: 6px solid var(--volt); }
.banner.warn { background: var(--ink); border: 0; border-top: 7px solid; border-bottom: 7px solid; border-image: var(--hazard) 7; }
.banner.info { border-left-color: var(--orange); }
#hudBottom { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 12px); padding: 0 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.hudleft { display: flex; flex-direction: column; gap: 8px; }
.abilitybtn { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; min-width: 138px; padding: 10px 16px; background: var(--ink); color: #fff; border: 2px solid var(--ink); font: 900 15px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; text-align: left; box-shadow: 4px 4px 0 var(--orange); }
.abilitybtn small { display: block; margin-top: 5px; font: 700 8.5px/1.2 var(--mono); letter-spacing: .1em; color: #a3a198; }
.abilitybtn:disabled { opacity: .5; box-shadow: none; }
.abilitybtn.armed { background: var(--volt); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.abilitybtn.armed small { color: var(--ink); }
.tagbtn { width: 94px; height: 94px; background: var(--orange); color: var(--ink); border: 3px solid var(--ink); font: 900 italic 30px/1 var(--font); letter-spacing: -.03em; box-shadow: 5px 5px 0 var(--ink); animation: tagPulse 1s steps(4) infinite; }
.tagbtn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
@keyframes tagPulse { 0% { outline: 0 solid rgba(255,79,0,.9); } 100% { outline: 14px solid rgba(255,79,0,0); } }
.screen-result #hud { display: none; }
#oobVignette { position: absolute; inset: 0; pointer-events: none; z-index: 650; opacity: 0; border: 9px solid; border-image: var(--hazard) 9; }
#oobVignette.on { opacity: 1; animation: livedot 1s steps(1) infinite; }
#pingFlash { position: absolute; inset: 0; pointer-events: none; z-index: 640; opacity: 0; box-shadow: inset 0 0 0 22px var(--orange); }
#pingFlash.go { animation: pingflash .9s steps(6) forwards; }
#pingFlash.go.bad { box-shadow: inset 0 0 0 22px var(--ink), inset 0 0 0 30px var(--orange); }
@keyframes pingflash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* target card (tap an enemy) */
.targetcard { position: absolute; left: 10px; right: 10px; bottom: calc(var(--safe-bottom) + 122px); z-index: 760; max-width: 440px; margin: 0 auto; background: var(--paper); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); padding: 10px; display: flex; align-items: center; gap: 12px; }
.targetcard .info { flex: 1; min-width: 0; }
.targetcard .nm { font: 900 20px/1 var(--font); letter-spacing: -.02em; text-transform: uppercase; }
.targetcard .sub { margin-top: 5px; color: var(--grey); font-size: 9.5px; }

/* ───────────── markers ───────────── */
.leaflet-marker-icon.mkwrap { background: none; border: 0; transition: transform 1.05s linear; }
.leaflet-zoom-anim .leaflet-marker-icon.mkwrap { transition: transform .25s cubic-bezier(0,0,.25,1); }
.mk { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; --c: #fff; }
.mk .face { position: absolute; inset: 0; background: var(--c); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center; font: 900 17px/1 var(--font); color: var(--ink); }
.mk.hunter { --c: var(--orange); }
.mk.thief { --c: var(--volt); }
.mk.neutral { --c: var(--paper); }
.mk .tag { position: absolute; top: 41px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font: 700 9.5px/1 var(--mono); letter-spacing: .1em; padding: 3px 5px; white-space: nowrap; text-transform: uppercase; }
.mk .ring { position: absolute; inset: -3px; border: 2px solid var(--ink); opacity: 0; pointer-events: none; }
.mk .arrow { position: absolute; inset: -13px; transform: rotate(var(--hdg, 0deg)); display: none; pointer-events: none; transition: transform .6s linear; }
.mk.hashdg .arrow { display: block; }
.mk .arrow::before { content: ''; position: absolute; left: 50%; top: 0; margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--ink); }
.mk.me .face { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: none; }
.mk.me .tag { background: var(--c); color: var(--ink); border: 1.5px solid var(--ink); }
.mk.me .ring { opacity: 1; animation: mkring 2s linear infinite; }
.mk.blink .face { animation: mkblink .5s steps(1, end) infinite; }
.mk.blink .ring, .mk.near .ring, .mk.beacon .ring { animation: mkring 1.1s linear infinite; }
@keyframes mkblink { 0% { background: var(--c); } 50% { background: var(--paper); } }
@keyframes mkring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.8); opacity: 0; } }
.mk.near .face { box-shadow: 3px 3px 0 var(--ink), 0 0 0 4px rgba(11,11,11,.18); }
.mk.ghost .face { background: repeating-linear-gradient(-45deg, var(--c) 0 3px, var(--paper) 3px 6px); border-style: dashed; box-shadow: none; color: rgba(11,11,11,.55); }
.mk.ghost .tag { background: rgba(11,11,11,.72); }
.mk.beacon .face { background: var(--hazard); color: #fff; }
.mk.caught .face { background: #c9c7c0; color: #555; box-shadow: none; border-style: dashed; }
.mk.caught .tag { text-decoration: line-through; background: #555; }
.mk.lost .face, .mk.lost .tag { opacity: .5; }
.mk.target .face { outline: 3px solid var(--ink); outline-offset: 3px; }
.mk.centerpin .face { top: -42px; bottom: auto; height: 36px; background: var(--orange); font-size: 20px; }
.mk.centerpin::after { content: ''; position: absolute; left: 10px; top: -6px; border: 8px solid transparent; border-top: 14px solid var(--ink); border-bottom: 0; }
.mk.catchx .face { background: var(--ink); color: var(--volt); }
.mk.rhead { left: -14px; top: -14px; width: 28px; height: 28px; }
.mk.rhead .face { font-size: 13px; box-shadow: 2px 2px 0 var(--ink); }

/* ───────────── toasts, sheets, modals ───────────── */
#toasts { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 180px); z-index: 900; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; padding: 0 62px 0 8px; }
.screen-lobby #toasts, .screen-result #toasts { top: calc(var(--safe-top) + 10px); }
.screen-home #toasts { top: calc(var(--safe-top) + 10px); padding: 0 8px; }
.toast { background: var(--ink); color: #fff; border-left: 6px solid var(--orange); padding: 10px 12px; font: 800 11.5px/1.25 var(--mono); letter-spacing: .07em; text-transform: uppercase; max-width: 100%; box-shadow: 4px 4px 0 rgba(11,11,11,.25); animation: toastIn .18s steps(3); }
.toast.good { background: var(--volt); color: var(--ink); border-left-color: var(--ink); }
.toast.bad { background: var(--orange); color: var(--ink); border-left-color: var(--ink); }
.toast.warn { background: var(--ink); border-left: 0; border-top: 6px solid; border-bottom: 6px solid; border-image: var(--hazard) 6; }
.toast.out { opacity: 0; transform: translateX(-10px); transition: .25s; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-16px); } }
.netstatus { position: absolute; top: calc(var(--safe-top) + 2px); left: 50%; transform: translateX(-50%); z-index: 1200; background: var(--orange); color: var(--ink); padding: 5px 12px; font-size: 10px; border: 2px solid var(--ink); }

.scrim { position: absolute; inset: 0; background: rgba(11,11,11,.72); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; animation: fade .15s; }
.scrim.center { align-items: center; padding: 16px; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: 560px; max-height: calc(var(--vh1) * 86); overflow-y: auto; background: var(--bone); border-top: 5px solid var(--ink); padding: 16px 16px calc(var(--safe-bottom) + 18px); animation: slideUp .2s steps(4); }
.scrim.center .sheet { border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } }
.sheet .kicker { display: inline-block; margin-bottom: 8px; background: var(--orange); color: var(--ink); padding: 3px 6px; font-size: 9.5px; }
.sheet h2 { margin: 0 0 10px; font: 900 32px/.9 var(--font); letter-spacing: -.05em; text-transform: uppercase; }
.sheet h4 { margin: 16px 0 4px; font: 800 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; border-top: 2px solid var(--ink); padding-top: 8px; }
.sheet p, .sheet li { font-size: 14px; font-weight: 600; }
.sheet ul { padding-left: 18px; margin: 6px 0; }
.sheet .actions { display: flex; gap: 8px; margin-top: 16px; }
.sheet .actions .btn { flex: 1; }
.q::before { content: '"'; }
.q::after { content: '"'; }

.roleSplash { position: absolute; inset: 0; z-index: 1100; display: flex; flex-direction: column; justify-content: center; padding: 44px 20px; gap: 12px; animation: fade .2s; overflow: hidden; }
.roleSplash::before, .roleSplash::after { content: ''; position: absolute; left: 0; right: 0; height: 30px; background: var(--hazard); }
.roleSplash::before { top: calc(var(--safe-top) + 10px); }
.roleSplash::after { bottom: calc(var(--safe-bottom) + 10px); }
.roleSplash.hunter { background: var(--orange); }
.roleSplash.thief { background: var(--volt); }
.roleSplash .kicker { font-size: 10px; }
.roleSplash h1 { margin: 0; font: 900 clamp(46px, 16.5vw, 110px)/.82 var(--font); letter-spacing: -.07em; text-transform: uppercase; }
.roleSplash h1::before { content: '"'; } .roleSplash h1::after { content: '"'; }
.roleSplash p { max-width: 32ch; margin: 0; font-weight: 800; font-size: 16px; line-height: 1.2; }
.roleSplash.thief h1 { font-size: clamp(54px, 21vw, 140px); }
.roleSplash .mates { display: flex; flex-wrap: wrap; gap: 6px; }
.roleSplash .tap { margin-top: 14px; animation: livedot 1.2s steps(1) infinite; }

/* feed + chat */
.feeditem { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .01em; }
.feeditem time { color: var(--grey); flex: none; width: 46px; font: 700 10.5px var(--mono); padding-top: 2px; }
.chatlist { display: flex; flex-direction: column; gap: 6px; min-height: 120px; max-height: calc(var(--vh1) * 40); overflow-y: auto; padding: 4px 0 10px; }
.msg { background: var(--paper); border: 2px solid var(--ink); padding: 7px 10px; font-weight: 700; font-size: 14px; max-width: 88%; align-self: flex-start; overflow-wrap: anywhere; }
.msg.mine { align-self: flex-end; background: var(--ink); color: #fff; }
.msg b { display: block; font: 800 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin-bottom: 2px; }
.chatform { display: flex; gap: 8px; }
.chatform input { flex: 1; min-width: 0; text-transform: none; font-weight: 700; }
.quick { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.quick .chip { flex: none; min-height: 30px; font-size: 11px; }

/* players sheet rows reuse .prow */
.prow.tap { cursor: pointer; }

/* result */
.resultSheet { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--vh1) * 44); z-index: 800; background: var(--bone); border-top: 5px solid var(--ink); overflow-y: auto; padding: 14px 12px calc(var(--safe-bottom) + 24px); }
.resultSheet .inner { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.winner { padding: 14px; border: 2px solid var(--ink); position: relative; }
.winner.hunter { background: var(--orange); }
.winner.thief { background: var(--volt); }
.winner.draw { background: var(--paper); }
.winner .kicker { margin-bottom: 6px; }
.winner h2 { margin: 0; font: 900 clamp(46px, 16vw, 78px)/.82 var(--font); letter-spacing: -.07em; text-transform: uppercase; }
.winner p { margin: 8px 0 0; font-weight: 800; font-size: 14px; }
.winner .verdict { display: inline-block; margin-top: 10px; background: var(--ink); color: #fff; padding: 5px 8px; font: 800 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.award { background: var(--paper); border: 2px solid var(--ink); padding: 10px; }
.award .ti { color: var(--grey); font-size: 9.5px; }
.award .who { font: 900 20px/1.05 var(--font); letter-spacing: -.03em; text-transform: uppercase; margin: 6px 0 4px; }
.award .detail { font: 700 11px var(--mono); }
.statrow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 800; text-transform: uppercase; font-size: 14px; }
.statrow:last-child { border: 0; }
.statrow span:not(:first-child) { font: 700 11px var(--mono); color: var(--grey); letter-spacing: .06em; }
.replayctl { display: flex; align-items: center; gap: 10px; }
.replayctl input[type=range] { flex: 1; }

@media (min-width: 800px) {
  :root { --lobby-map: calc(var(--vh1) * 44); }
}
@media (max-width: 379px) {
  #hudTop { gap: 4px; left: 6px; right: 6px; }
  .mod { padding: 5px 7px; }
  .mod b { font-size: 18px; }
  .mod.role small { display: none; }
  .mod.role b { font-size: 13px; }
  .abilitybtn { min-width: 0; padding: 9px 12px; font-size: 13px; }
  .abilitybtn small { display: none; }
  .tagbtn { width: 82px; height: 82px; font-size: 26px; }
  .codecard .code { font-size: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .tape-track, .tagbtn, .mk .ring, .mk.blink .face, #oobVignette.on, .roleSplash .tap { animation: none !important; }
}

/* map vector layers */
.zone-mask { fill: url(#hatch); fill-opacity: 1; pointer-events: none; }
.zone-mask.zone-mask-off { fill: none; }

#homeBar svg { width: 72px; height: 14px; fill: var(--grey); display: block; }

/* off-screen player pointers (live tracking) */
#edgeLayer { position: absolute; inset: 0; z-index: 610; pointer-events: none; overflow: hidden; }
.screen-lobby #edgeLayer, .screen-result #edgeLayer, .screen-home #edgeLayer { display: none; }
.edge { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 2px solid var(--ink); background: var(--c, #fff); box-shadow: 2px 2px 0 var(--ink); display: grid; place-items: center; font: 900 15px/1 var(--font); color: var(--ink); pointer-events: auto; --c: var(--paper); }
.edge.hunter { --c: var(--orange); }
.edge.thief { --c: var(--volt); }
.edge.dim { opacity: .6; }
.edge .ea { position: absolute; inset: -10px; transform: rotate(var(--a, 0deg)); pointer-events: none; }
.edge .ea::before { content: ''; position: absolute; top: 50%; right: 0; margin-top: -6px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid var(--ink); }
.edge small { position: absolute; top: 37px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font: 700 8.5px/1 var(--mono); letter-spacing: .06em; padding: 2px 4px; white-space: nowrap; text-transform: uppercase; }

/* ───────────── real-world additions ───────────── */
.snd-off { display: none; }
#btnSound.off .snd-on { display: none; }
#btnSound.off .snd-off { display: block; }
#btnSound.off { background: var(--orange); color: var(--ink); }
.screen-lobby #btnSound, .screen-result #btnSound { display: none; }

.pausebar { position: absolute; top: calc(var(--safe-top) + 92px); left: 8px; right: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; background: var(--ink); color: #fff; border: 0; border-top: 8px solid; border-bottom: 8px solid; border-image: var(--hazard) 8; pointer-events: auto !important; }
.pausebar b { display: block; font: 900 26px/1 var(--font); letter-spacing: -.04em; text-transform: uppercase; }
.pausebar b::before, .pausebar b::after { content: '"'; }
.pausebar span { display: block; margin-top: 4px; color: #a3a198; font-size: 9.5px; }

.menu-list { display: flex; flex-direction: column; gap: 8px; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 0 14px; background: var(--paper); border: 2px solid var(--ink); font: 900 15px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; text-align: left; }
.menu-row > span { white-space: nowrap; }
.menu-row small { font: 700 9.5px/1.2 var(--mono); letter-spacing: .1em; color: var(--grey); text-align: right; margin-left: auto; }
.menu-row::after { content: '→'; font-weight: 400; font-size: 18px; }
.menu-row.noarrow::after { content: none; }
.menu-row:active { transform: translate(2px, 2px); }
.menu-row.hot { background: var(--orange); }
.menu-row.hot small { color: var(--ink); }
.menu-row.dark { background: var(--ink); color: #fff; }
.menu-row.dark small { color: #a3a198; }

/* press-and-hold to confirm (accidental taps must not eliminate you) */
.holdbtn { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
.holdbtn .fill { position: absolute; inset: 0; width: 0; background: var(--orange); z-index: 0; }
.holdbtn.holding .fill { width: 100%; transition: width var(--hold, 1.5s) linear; }
.holdbtn > span { position: relative; z-index: 1; }
.holdbtn.dark .fill { background: var(--volt); }

.kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 6px 0 2px; }
.kv dt { font: 700 10px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.kv dd { margin: 0; font-weight: 900; font-size: 14px; text-transform: uppercase; text-align: right; }
.houserules { background: var(--volt); border: 2px solid var(--ink); padding: 10px 12px; font-weight: 800; font-size: 15px; line-height: 1.25; }
.houserules.empty { background: transparent; border-style: dashed; color: var(--grey); font-weight: 600; font-size: 13px; }
textarea.rules-input { width: 100%; min-height: 84px; resize: vertical; background: var(--paper); border: 2px solid var(--ink); padding: 10px 12px; font: 700 14px/1.3 var(--font); outline: none; }
textarea.rules-input:focus { outline: 3px solid var(--orange); }
textarea.rules-input:disabled { background: var(--bone); color: var(--ink); opacity: 1; }
.qrbox { display: block; width: min(78vw, 300px); aspect-ratio: 1; margin: 6px auto 10px; border: 3px solid var(--ink); background: #fff; }
.qrbox rect { fill: var(--ink); }
.qrbox rect.bg { fill: #fff; }
.qrcode-url { text-align: center; word-break: break-all; margin: 0 0 4px; }
.codecard .btn { white-space: nowrap; }
.codecard .actions2 { display: flex; flex-direction: column; gap: 6px; align-self: start; }
.codecard .btn:not(.primary) { background: transparent; border-color: #fff; color: #fff; }

/* opened inside another app's browser (Instagram, Messenger…) */
.inapp { position: relative; margin: 0 0 14px; padding: 14px 44px 14px 14px; background: var(--ink); color: #fff; border: 0; border-top: 7px solid; border-bottom: 7px solid; border-image: var(--hazard) 7; }
.inapp .q { display: block; font: 800 14px/1.2 var(--font); text-transform: uppercase; letter-spacing: .04em; }
.inapp p { margin: 6px 0 10px; font: 600 12px/1.4 var(--font); color: #d8d6cf; }
.inapp .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inapp .btn { text-decoration: none; }
.inapp-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 2px solid #fff; background: transparent; color: #fff; font: 800 14px/1 var(--font); cursor: pointer; }