:root {
  --bg: #0e1116;
  --surface: #171b22;
  --raised: #1f252e;
  --line: #2b323d;
  --text: #e9edf2;
  --muted: #8d97a6;
  --hunter: #ff4f4f;
  --hunted: #38a5ff;
  --accent: #ffb224;
  --ok: #3ccf7a;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --role: var(--muted);
}
body[data-role="hunter"] { --role: var(--hunter); }
body[data-role="hunted"] { --role: var(--hunted); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none; -webkit-text-size-adjust: 100%;
}
h1, h2, p { margin: 0; }
h2 { font-size: 1.05rem; letter-spacing: .02em; }
a { color: var(--accent); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* ---------- Ansichten */
.view {
  min-height: 100%; max-width: 560px; margin: 0 auto;
  padding: calc(18px + var(--sat)) 16px calc(22px + var(--sab));
  display: flex; flex-direction: column; gap: 14px;
}
.view.center { align-items: center; justify-content: center; }
#v-game { max-width: none; padding: 0; position: fixed; inset: 0; display: block; }

.brand { text-align: center; padding: 22px 0 6px; }
.brand h1 { font-size: 2.3rem; letter-spacing: .16em; font-weight: 800; margin-top: 8px; }
.brand p { color: var(--muted); margin-top: 6px; }
.trophy { font-size: 4rem; line-height: 1; }
#v-end .brand h1 { font-size: 1.8rem; letter-spacing: .03em; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--muted); }
.field.range { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.field.range output { color: var(--text); font-weight: 700; font-size: 1rem; }
.field.range input { flex: 1 0 100%; }
input:not([type]), input[type="text"] {
  background: var(--raised); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 14px; font-size: 1.05rem; width: 100%; min-width: 0; outline: none;
}
input:focus-visible { border-color: var(--accent); }
input[type="range"] { accent-color: var(--accent); height: 34px; }

.btn {
  background: var(--raised); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; font-weight: 650; text-align: center; text-decoration: none; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
}
.btn:active { transform: translateY(1px); filter: brightness(1.15); }
.btn:disabled { opacity: .45; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #1b1300; }
.btn.danger { background: var(--hunter); border-color: var(--hunter); color: #fff; }
.btn.ghost { background: transparent; }
.btn.big { padding: 16px; font-size: 1.1rem; border-radius: 14px; }
.btn.small { padding: 7px 12px; font-size: .9rem; border-radius: 10px; }
.grow { flex: 1; }
.row { display: flex; gap: 10px; align-items: center; }
.row > input { flex: 1; }

.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .85rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.joinrow { display: flex; gap: 10px; }
.joinrow input { text-transform: uppercase; letter-spacing: .3em; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.links { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 10px; }
body.native .webonly, body.native #a-apk { display: none; }
a.donate { color: var(--muted); }
a.donate.btn { color: var(--text); }
.heart { color: var(--hunter); }
.update { display: block; background: var(--accent); color: #1b1300; font-weight: 700; font-size: .9rem; text-align: center; text-decoration: none; padding: 10px 12px; border-radius: 12px; }

/* ---------- Lobby */
.lobbyhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.lbl { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.code { background: none; border: 0; padding: 0; font-size: 2.3rem; font-weight: 800; letter-spacing: .14em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.headbtns { display: flex; gap: 8px; }
.hint { color: var(--muted); font-size: .88rem; }
.hint.warn { color: var(--accent); }
body:not(.is-host) .hostonly { display: none !important; }
body.is-host .guestonly { display: none !important; }

.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plist li { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.plist .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.plist .who small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.on { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.on.off { background: var(--line); }
.tag { font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor; }
.tag.hunter { color: var(--hunter); } .tag.hunted { color: var(--hunted); } .tag.spectator { color: var(--muted); }
.x { background: none; border: 0; color: var(--muted); font-size: 1.1rem; padding: 6px 4px; }

.seg { display: inline-flex; background: var(--raised); border: 1px solid var(--line); border-radius: 999px; padding: 3px; flex: none; }
.seg button { background: none; border: 0; border-radius: 999px; padding: 6px 12px; font-size: .85rem; font-weight: 650; color: var(--muted); }
.seg button.sel { background: var(--text); color: var(--bg); }
.seg.roles button.sel[data-v="hunter"] { background: var(--hunter); color: #fff; }
.seg.roles button.sel[data-v="hunted"] { background: var(--hunted); color: #04121f; }
.seg button:disabled { cursor: default; }

.stepper { display: inline-flex; align-items: center; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; }
.stepper button { background: none; border: 0; width: 42px; height: 44px; font-size: 1.3rem; }
.stepper output { min-width: 22px; text-align: center; font-weight: 700; }

.chipgroup { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.chipgroup > span { font-size: .85rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { background: var(--raised); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 650; font-size: .92rem; }
.chips button.sel { background: var(--accent); border-color: var(--accent); color: #1b1300; }
.chips button:disabled, .seg button:disabled { opacity: 1; }
body:not(.is-host) .chips button:not(.sel), body:not(.is-host) #seg-mode button:not(.sel) { opacity: .4; }

.opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.opt small { display: block; color: var(--muted); font-size: .82rem; font-weight: 400; }
.switch { appearance: none; width: 50px; height: 30px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); position: relative; flex: none; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch:checked { background: var(--accent); border-color: var(--accent); }
.switch:checked::after { transform: translateX(20px); background: #1b1300; }
.switch:disabled { opacity: .6; }

.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.results button { width: 100%; text-align: left; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: .9rem; }
.lobbyfoot { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.lobbyfoot .hint { text-align: center; }

/* ---------- Karte */
.map { background: #1a1f27; z-index: 0; }
.map.lobby { height: 46vh; min-height: 250px; border-radius: 12px; overflow: hidden; }
#gamemap { position: absolute; inset: 0; }
.map.dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.55); }
.leaflet-container { font: inherit; background: #1a1f27; }
.leaflet-control-attribution { font-size: 10px; background: rgba(14, 17, 22, .72) !important; color: #aab3c0; }
.leaflet-control-attribution a { color: #cfd6df; }
#gamemap .leaflet-bottom { bottom: calc(74px + var(--sab)); }

.pm { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.pm i { width: 16px; height: 16px; border-radius: 50%; background: var(--muted); border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.pm span { position: absolute; top: 19px; white-space: nowrap; font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(14, 17, 22, .82); padding: 1px 7px; border-radius: 999px; }
.pm.hunter i { background: var(--hunter); } .pm.hunted i { background: var(--hunted); } .pm.spectator i { background: var(--muted); }
.pm.me i { width: 20px; height: 20px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--role) 35%, transparent), 0 1px 6px rgba(0, 0, 0, .55); }
.pm.stale { opacity: .55; }
.pm.enemy i { animation: pulse 1.1s infinite; }
.pm.mark i { background: transparent; border: 3px dashed var(--hunted); width: 26px; height: 26px; box-shadow: none; animation: spin 8s linear infinite; }
.pm.mark span { top: 28px; background: var(--hunted); color: #04121f; }
.qm { position: absolute; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #10141a; border: 2.5px solid var(--muted); font-size: 19px; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.qm.hunter { border-color: var(--hunter); } .qm.hunted { border-color: var(--hunted); }
.qm:not(.own) { opacity: .7; transform: translate(-50%, -50%) scale(.82); }
.qm.done { animation: pulse .7s infinite; opacity: 1; }
@keyframes pulse { 50% { transform: translate(-50%, -50%) scale(1.25); } }
.pm.enemy i { transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Spiel-HUD */
.hud { position: absolute; left: 0; right: 0; z-index: 500; display: flex; align-items: center; }
.hud.top {
  top: 0; padding: calc(8px + var(--sat)) 10px 8px; gap: 10px; justify-content: space-between;
  background: linear-gradient(rgba(14, 17, 22, .96), rgba(14, 17, 22, .82));
  border-bottom: 3px solid var(--role);
}
.badge { background: var(--role); color: #fff; font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 9px; }
body[data-role="hunted"] .badge { color: #04121f; }
.clock { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.clock small { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.clock b { font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.clock b.soon { color: var(--accent); }

.radar, .fx, .banner { position: absolute; left: 10px; right: 10px; z-index: 500; }
.radar { top: calc(64px + var(--sat)); padding: 7px 12px; border-radius: 10px; font-weight: 700; font-size: .9rem; text-align: center; background: rgba(14, 17, 22, .88); border: 1px solid var(--line); }
.radar[data-l="0"] { color: var(--ok); }
.radar[data-l="1"] { color: var(--accent); border-color: var(--accent); }
.radar[data-l="2"] { background: #b85c00; color: #fff; border-color: #ff9d2e; animation: blink 1s infinite; }
.radar[data-l="3"] { background: var(--hunter); color: #fff; border-color: #fff; animation: blink .45s infinite; }
.radar[data-l="-1"] { color: var(--muted); }
@keyframes blink { 50% { opacity: .62; } }
.fx { top: calc(106px + var(--sat)); display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
body:not([data-role="hunted"]) .fx { top: calc(64px + var(--sat)); }
.fx span { background: rgba(14, 17, 22, .9); border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 700; }
.banner { top: 42%; transform: translateY(-50%); background: rgba(14, 17, 22, .94); border: 2px solid var(--accent); border-radius: 16px; padding: 14px 16px; text-align: center; font-weight: 700; font-size: 1.05rem; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.banner.alarm, .banner.slim { top: auto; right: 66px; bottom: calc(176px + var(--sab)); transform: none; font-size: .95rem; padding: 10px 14px; }
.banner.alarm { border-color: var(--hunter); background: rgba(120, 12, 12, .94); }

.mapbtns { position: absolute; right: 10px; bottom: calc(96px + var(--sab)); z-index: 500; display: flex; flex-direction: column; gap: 8px; }
.mapbtns button { width: 46px; height: 46px; border-radius: 50%; background: rgba(14, 17, 22, .92); border: 1px solid var(--line); font-size: 1.35rem; line-height: 1; }
.mapbtns button.on2 { color: var(--accent); border-color: var(--accent); }

.cap { position: absolute; left: 10px; right: 66px; bottom: calc(96px + var(--sab)); z-index: 500; background: rgba(14, 17, 22, .95); border: 2px solid var(--role); border-radius: 14px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; overflow: hidden; font-weight: 650; font-size: .92rem; }
.capbar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: color-mix(in srgb, var(--role) 32%, transparent); transition: width .5s linear; }
.cap > span, .cap > button { position: relative; }

.hud.bottom { bottom: 0; padding: 8px 8px calc(8px + var(--sab)); gap: 4px; justify-content: space-between; background: rgba(14, 17, 22, .96); border-top: 1px solid var(--line); }
.tab { flex: 1; background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: .68rem; color: var(--muted); padding: 4px 0; }
.tab i { font-style: normal; font-size: 1.25rem; line-height: 1.2; }
.main { flex: 1.9; height: 62px; margin-top: -22px; border-radius: 18px; border: 3px solid var(--bg); background: var(--role); color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: .05em; box-shadow: 0 4px 16px rgba(0, 0, 0, .5); }
body[data-role="hunted"] .main { color: #04121f; }
.main:disabled { background: var(--raised); color: var(--muted); }
.main:active:not(:disabled) { transform: scale(.97); }
.gps { position: absolute; left: 10px; bottom: calc(80px + var(--sab)); z-index: 499; font-size: .7rem; font-weight: 700; background: rgba(14, 17, 22, .8); padding: 2px 8px; border-radius: 999px; color: var(--muted); }
.gps.bad { color: #fff; background: var(--hunter); }
.cap:not([hidden]) ~ .gps { display: none; }

/* ---------- Bögen, Hinweise */
.sheet { position: fixed; inset: 0; z-index: 2000; }
.sheet-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.sheet-body { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; max-height: 82vh; display: flex; flex-direction: column; background: var(--surface); border-radius: 20px 20px 0 0; border: 1px solid var(--line); border-bottom: 0; animation: up .18s ease-out; }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
.sheet-body header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 8px; }
.sheet-body header button { background: none; border: 0; font-size: 1.2rem; color: var(--muted); padding: 6px; }
#sheet-content { overflow-y: auto; padding: 6px 16px calc(20px + var(--sab)); display: flex; flex-direction: column; gap: 10px; }
.qcard { background: var(--raised); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.qcard.hunter { border-left-color: var(--hunter); } .qcard.hunted { border-left-color: var(--hunted); }
.qcard.focus { outline: 2px solid var(--accent); }
.qcard header { padding: 0; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.qcard h3 { margin: 0; font-size: 1rem; }
.qcard .where { color: var(--muted); font-size: .85rem; }
.qcard p { font-size: .88rem; }
.qcard .pro::before { content: "＋ "; color: var(--ok); font-weight: 800; }
.qcard .con::before { content: "− "; color: var(--hunter); font-weight: 800; }
.grouphead { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-top: 6px; }
.logrow { display: flex; gap: 10px; font-size: .9rem; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.logrow time { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.menu { display: flex; flex-direction: column; gap: 8px; }
.menu .btn { justify-content: flex-start; }
.qr { background: #fff; border-radius: 14px; padding: 10px; align-self: center; width: min(72vw, 300px); }
.qr svg { display: block; width: 100%; height: auto; }
.center-text { text-align: center; }

.overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(14, 17, 22, .93); display: grid; place-items: center; padding: 20px; }
.overlay .card { max-width: 420px; }
.offline { position: fixed; left: 0; right: 0; top: 0; z-index: 3500; background: var(--hunter); color: #fff; text-align: center; font-weight: 700; font-size: .85rem; padding: calc(4px + var(--sat)) 8px 4px; }
#toasts { position: fixed; left: 10px; right: 10px; top: calc(70px + var(--sat)); z-index: 2500; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
body[data-view="game"] #toasts { top: calc(150px + var(--sat)); }
.toast { max-width: 520px; background: #f3f5f8; color: #10141a; border-radius: 12px; padding: 10px 14px; font-weight: 650; font-size: .93rem; box-shadow: 0 6px 22px rgba(0, 0, 0, .5); animation: drop .2s ease-out; border-left: 5px solid var(--muted); }
.toast.ping { border-left-color: var(--hunted); } .toast.catch, .toast.warn { border-left-color: var(--hunter); }
.toast.quest, .toast.start, .toast.end { border-left-color: var(--accent); } .toast.ok { border-left-color: var(--ok); }
.toast.bye { opacity: 0; transition: opacity .3s; }
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } }

.tablewrap { overflow-x: auto; }
.stats { width: 100%; border-collapse: collapse; font-size: .9rem; white-space: nowrap; table-layout: fixed; }
.stats th:nth-child(2) { width: 44px; } .stats th:nth-child(3) { width: 50px; }
.stats th:nth-child(4) { width: 78px; } .stats th:nth-child(5) { width: 60px; }
.stats th { text-align: right; color: var(--muted); font-weight: 600; font-size: .7rem; padding: 4px 5px; }
.stats td { text-align: right; padding: 8px 5px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.stats th:first-child, .stats td:first-child { text-align: left; padding-left: 0; }
.stats td:first-child { font-weight: 650; white-space: normal; overflow-wrap: anywhere; }
.stats td:first-child::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; background: var(--hunted); }
.stats tr.hunter td:first-child::before { background: var(--hunter); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }