/* ================================================================
   NoWayOut-Markenlook  ·  Schwarz · Signalrot #E50012 · #F7F5F9
   Schriften: MADE Outer Sans (MOS), Morganite (große Zahlen)
   hell = Standard, dunkel = html[data-theme="dark"] (pro Spiel wählbar)
   ================================================================ */
@font-face { font-family: 'MOS'; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/nwo/MOS-300.woff2) format('woff2'); }
@font-face { font-family: 'MOS'; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/nwo/MOS-400.woff2) format('woff2'); }
@font-face { font-family: 'MOS'; font-weight: 500 700; font-style: normal; font-display: swap; src: url(/fonts/nwo/MOS-500.woff2) format('woff2'); }
@font-face { font-family: 'Morganite'; font-weight: 900; font-style: normal; font-display: swap; src: url(/fonts/nwo/Morganite-900.woff2) format('woff2'); }

:root {
  --paper: #F7F5F9; --paper-2: #EEEBF2; --paper-3: #E2DEE7; --card: #FFFFFF;
  --ink: #121212; --ink-2: #3A383E; --ink-3: #747079; --ink-4: #A6A2AC;
  --line: rgba(18, 18, 18, .07); --line-2: rgba(18, 18, 18, .13); --shell: rgba(18, 18, 18, .035);
  --accent: #E50012; --accent-rgb: 229, 0, 18; --accent-ink: #fff;
  --on-ink: #F7F5F9; --glass: rgba(18, 18, 18, .9); --polaroid: #FFFFFF;
  --sans: 'MOS', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'MOS', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --disp: 'Morganite', 'MOS', 'Arial Narrow', sans-serif;
  --r-xl: 18px; --r-lg: 16px; --r-md: 12px; --r-sm: 8px; --r-xs: 6px; --bezel: 0px;
  --sh-1: 0 1px 1px rgba(18, 18, 18, .04), 0 2px 6px -2px rgba(18, 18, 18, .08);
  --sh-2: 0 1px 1px rgba(18, 18, 18, .03), 0 14px 34px -18px rgba(18, 18, 18, .22);
  --sh-3: 0 2px 4px rgba(18, 18, 18, .05), 0 24px 60px -20px rgba(18, 18, 18, .3);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .9);
}
html[data-theme="dark"] {
  --paper: #0C0C0E; --paper-2: #151518; --paper-3: #24242A; --card: #18181C;
  --ink: #F7F5F9; --ink-2: #D3D0D8; --ink-3: #928E98; --ink-4: #5E5A64;
  --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .13); --shell: rgba(255, 255, 255, .04);
  --ok-soft: rgba(47, 191, 113, .14); --warn-soft: rgba(245, 158, 11, .14); --bad-soft: rgba(229, 0, 18, .16);
  --ok: #3DD68C; --warn: #F5A623; --bad: #FF3B4A;
  --on-ink: #0C0C0E; --glass: rgba(24, 24, 28, .92); --polaroid: #1E1E23;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .5); --sh-2: 0 18px 40px -20px rgba(0, 0, 0, .8); --sh-3: 0 24px 60px -20px rgba(0, 0, 0, .9);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .04);
  color-scheme: dark;
}
body { font-size: 14.5px; letter-spacing: 0; line-height: 1.55; font-feature-settings: normal; }
html[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: .035; }

/* ---------- Schrift ---------- */
.display { font-family: var(--sans); font-weight: 500; font-size: clamp(36px, 10vw, 68px); line-height: 1.02; letter-spacing: -.035em; }
.h1 { font-family: var(--sans); font-weight: 500; font-size: clamp(27px, 7vw, 42px); line-height: 1.08; letter-spacing: -.03em; }
.h2 { font-family: var(--sans); font-weight: 500; font-size: clamp(21px, 5.2vw, 27px); line-height: 1.15; letter-spacing: -.02em; }
.h3 { font-weight: 500; letter-spacing: -.01em; }
.display em, .h1 em, .h2 em { font-style: normal; color: var(--accent); }
.story { font-family: var(--sans); font-weight: 300; font-size: 17.5px; line-height: 1.6; letter-spacing: 0; }
.story strong, .prose strong { font-weight: 500; }
.serif { font-family: var(--sans); font-weight: 300; letter-spacing: 0; }
.lead { font-weight: 300; font-size: 16px; }
.pz .q { font-size: 16px; font-weight: 300; line-height: 1.6; }
.mono { font-family: var(--mono); }
.big-num { font-family: var(--disp); font-weight: 900; letter-spacing: 0; line-height: .82; text-transform: uppercase; }

/* Pinselstrich wie im Logo */
.brush { display: block; height: 14px; width: 120px; background: var(--accent); -webkit-mask: url(/assets/brush.svg) center / 100% 100% no-repeat; mask: url(/assets/brush.svg) center / 100% 100% no-repeat; }

/* ---------- Flächen ---------- */
.bezel { padding: 0; background: none; box-shadow: none; border-radius: var(--r-xl); }
.bezel > .core, .core { border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--line), var(--sh-2); }
.card-flat { border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line), var(--sh-1); }
.eyebrow { background: none; box-shadow: none; padding: 0; gap: 8px; color: var(--accent); font-weight: 500; font-size: 10.5px; letter-spacing: .16em; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 1px; box-shadow: none; transform: rotate(45deg); }
.chip { border-radius: 6px; font-weight: 400; font-size: 12px; }

/* ---------- Knöpfe: kantig, rot ---------- */
.btn { border-radius: 6px; font-weight: 500; font-size: 14px; letter-spacing: 0; padding: 0 7px 0 22px; background: var(--ink); color: var(--on-ink); box-shadow: 0 10px 24px -14px rgba(18, 18, 18, .6); }
.btn .knob { border-radius: 4px; background: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .btn .knob { background: rgba(0, 0, 0, .12); }
.btn.accent { background: var(--accent); color: #fff; box-shadow: 0 12px 28px -14px rgba(var(--accent-rgb), .9);
  clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 14%, calc(100% - 4px) 30%, 100% 47%, calc(100% - 2px) 63%, 100% 80%, calc(100% - 4px) 100%, 0 100%); }
.btn.accent .knob { background: rgba(0, 0, 0, .18); }
.btn.soft { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2), var(--sh-1); }
.btn.soft .knob, .btn.ghost .knob { background: var(--paper-2); }
.btn.ghost { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.ok { background: var(--ok); color: #fff; } .btn.danger { background: var(--bad); color: #fff; }
.btn.no-knob { padding: 0 22px; }
html[data-theme="dark"] .btn:not(.soft):not(.ghost):not(.ok):not(.danger) { background: var(--accent); color: #fff; }
.iconbtn { border-radius: 8px; background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2), var(--sh-1); }
.hintbtn { border-radius: 6px; font-weight: 500; }
.linkbtn { font-weight: 400; }
.seg, .langsw { border-radius: 8px; } .seg button, .langsw button { border-radius: 6px; font-weight: 500; }
.input, .textarea, .select { border-radius: 8px; }
.input:focus, .textarea:focus, .select:focus { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(var(--accent-rgb), .12); }
.input.big { font-weight: 400; font-size: 20px; letter-spacing: .04em; }
.switch.on { background: var(--accent); }
.opt { border-radius: 10px; font-weight: 400; font-size: 15px; }
.opt.on { box-shadow: inset 0 0 0 1.5px var(--accent), var(--sh-1); }
.opt.on .mk { background: var(--accent); color: #fff; }
.opt .mk { border-radius: 3px; }
.stepper, .stepper button { border-radius: 8px; }
.otp .cell { border-radius: 8px; font-family: var(--disp); font-size: 38px; font-weight: 900; }
.otp .cell.cur { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px rgba(var(--accent-rgb), .12); }
.otp .cell.cur::after { background: var(--accent); }
.hold { border-radius: 8px; background: var(--ink); color: var(--on-ink); }
.hold .fill { clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0 round 8px); }
.hold .ring { border-radius: 6px; }
.toast { border-radius: 8px; background: rgba(18, 18, 18, .94); font-weight: 400; }
.sheet { border-radius: 18px 18px 0 0; }
@media (min-width: 760px) { .sheet { border-radius: 16px; } }
html[data-theme="dark"] .scrim { background: rgba(0, 0, 0, .6); }

/* Farbige Flächen, die im Dunkeln hell werden */
html[data-theme="dark"] .chip.ink, html[data-theme="dark"] .bubble.me, html[data-theme="dark"] .done-hero .seal,
html[data-theme="dark"] .mk.st.done, html[data-theme="dark"] .mk.team, html[data-theme="dark"] .notice .from .av,
html[data-theme="dark"] .log-item .li.acc { color: var(--on-ink); }
html[data-theme="dark"] .bubble.me { background: var(--accent); color: #fff; }
html[data-theme="dark"] .pin span { background: #F7F5F9; color: #0C0C0E; }

/* ---------- Kopf, Logo, Hintergrund ---------- */
.mark { gap: 12px; font-weight: 500; }
.mark .logo { display: none; }
.nwo-logo { display: block; height: 22px; width: auto; }
.nwo-logo.lt { display: none; }
html[data-theme="dark"] .nwo-logo.dk { display: none; }
html[data-theme="dark"] .nwo-logo.lt { display: block; }
.mark small { font-weight: 400; letter-spacing: .12em; text-transform: uppercase; font-size: 9.5px; margin-top: 3px; color: var(--ink-3); }
.aura::before { background: radial-gradient(circle, rgba(var(--accent-rgb), .13), transparent 62%); }
.aura::after { background: radial-gradient(circle, rgba(18, 18, 18, .10), transparent 65%); }
html[data-theme="dark"] .aura::after { background: radial-gradient(circle, rgba(var(--accent-rgb), .12), transparent 65%); }
.route-art .draw { stroke: var(--accent); stroke-width: 3; }
.cover { border-radius: var(--r-xl) var(--r-xl) 0 0; background: radial-gradient(120% 90% at 100% 0%, rgba(var(--accent-rgb), .95), rgba(var(--accent-rgb), .45) 40%, #121212 100%); }
.cover .h1 { font-size: clamp(26px, 7vw, 38px); }
.topfade { background: linear-gradient(180deg, var(--paper) 45%, transparent); }

/* HUD und Dock: immer schwarz wie der NoWayOut-Auftritt */
.hud { background: rgba(18, 18, 18, .92); color: #F7F5F9; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06); border-radius: 10px; }
.hud .ringp circle:first-child { stroke: rgba(255, 255, 255, .14); }
.hud .timer b { font-family: var(--disp); font-weight: 900; font-size: 28px; letter-spacing: .01em; line-height: .9; }
.hud .timer small { color: rgba(255, 255, 255, .5); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; }
.hud .sep { background: rgba(255, 255, 255, .14); }
.hud .team { font-weight: 500; }
.dock { border-radius: 12px; background: rgba(18, 18, 18, .94); }
.dock .pill { border-radius: 8px; background: var(--accent); box-shadow: 0 8px 18px -8px rgba(var(--accent-rgb), .9); }
.dock button { border-radius: 8px; font-weight: 500; letter-spacing: .02em; color: rgba(255, 255, 255, .6); }
.dock button.on { color: #fff; }
.dock button .badge { background: #fff; color: var(--accent); box-shadow: 0 0 0 2px #121212; }
.composer { border-radius: 10px; background: var(--glass); color: #fff; }
.composer input { color: #fff; }
.composer input::placeholder { color: rgba(255, 255, 255, .5); }
.map-legend .chip { background: var(--glass); color: #F7F5F9; box-shadow: none; }
.map-legend .chip.accent { background: var(--accent); color: #fff; }
.map-full .maplibregl-ctrl-attrib { background: var(--glass); color: rgba(255, 255, 255, .7); }
.map-full .maplibregl-ctrl-attrib a { color: rgba(255, 255, 255, .8); }
.mk.st { border-radius: 6px; font-family: var(--disp); font-weight: 900; font-size: 20px; background: var(--card); }
.mk.st.done { background: #121212; color: #fff; }

/* ---------- Station & Rätsel ---------- */
.progress-dots i { height: 3px; border-radius: 0; }
.progress-dots i.c { background: var(--accent); }
.progress-dots i.d { background: var(--ink); }
.dist { font-family: var(--disp); font-weight: 900; font-size: 48px; letter-spacing: .01em; }
.compass { border-radius: 10px; }
.pz-solved .ck { border-radius: 6px; }
.hint-item, .log-item .lb, .bubble.them, .quick button { border-radius: 10px; }
.hint-item .lv, .log-item .li { border-radius: 6px; }
.bubble { border-radius: 12px; }
.bubble.me { border-bottom-right-radius: 3px; } .bubble.them { border-bottom-left-radius: 3px; }
.ar-teaser { border-radius: 12px; background: linear-gradient(135deg, #121212, #2A0A0D); }
.lock { border-radius: 12px; }
.dial .win { border-radius: 8px; }
.dial .reel span { font-family: var(--disp); font-weight: 900; font-size: 48px; }
.check-anim { border-radius: 12px; transform: rotate(-4deg); }
.win-card .h1, .win-card .h2 { text-transform: uppercase; }
.done-hero .seal { border-radius: 14px; background: var(--accent); }
.bigtime { font-family: var(--disp); font-weight: 900; font-size: clamp(90px, 30vw, 170px); letter-spacing: .01em; }
.pin span { border-radius: 8px; font-family: var(--disp); font-weight: 900; font-size: 52px; background: #121212; }
.kv > div { border-radius: 10px; }
.kv b { font-family: var(--disp); font-weight: 900; font-size: 28px; }
.gear-row { border-radius: 10px; }
.gear-row .gi { border-radius: 8px; }
.gear-row .gs { border-radius: 4px; font-family: var(--sans); font-weight: 500; letter-spacing: .1em; font-size: 10px; }
.gear-ring b { font-family: var(--disp); font-size: 22px; font-weight: 900; }
.fm-play { border-radius: 14px; transform: rotate(-3deg); }
.fm-play i { border-radius: 14px; }
.fm-eyebrow, .ch-kicker, .ch-tap { font-family: var(--sans); font-weight: 500; }
.call .name, .call .avatar { font-family: var(--sans); font-weight: 500; letter-spacing: -.02em; }
.call .name { font-size: 30px; }
.call .transcript { font-family: var(--sans); font-weight: 300; font-size: 19px; line-height: 1.5; }
.notice .core { border-left: 4px solid var(--accent); }
.notice .body { font-family: var(--sans); font-weight: 300; font-size: 17px; line-height: 1.45; }
.fm-text { font-family: var(--sans); font-weight: 300; font-size: 18px; }

/* Kapitel-Vorspann: große Morganite-Zahl, roter Pinselstrich */
.chapter { background: var(--paper); }
.ch-num { font: 900 clamp(190px, 58vw, 330px) / .78 var(--disp); color: var(--ink); letter-spacing: 0; margin-top: 12px; }
.ch-title { font: 500 clamp(26px, 7.2vw, 44px) / 1.08 var(--sans); letter-spacing: -.03em; text-transform: uppercase; }
.ch-line { height: 16px; width: min(260px, 70%); background: var(--accent); -webkit-mask: url(/assets/brush.svg) center / 100% 100% no-repeat; mask: url(/assets/brush.svg) center / 100% 100% no-repeat; margin: 18px 0 20px; }
.ch-story { font: 300 17.5px / 1.6 var(--sans); }
@media (min-width: 760px) { .ch-num { font-size: 420px; } .ch-title { font-size: 56px; } .ch-story { font-size: 21px; } }
.ch-grain { background: radial-gradient(ellipse at 85% 10%, rgba(var(--accent-rgb), .12), transparent 55%); }

/* Beweisstücke */
.evcard { background: var(--polaroid); border-radius: 3px; }
.evcard b { font: 500 14px / 1.2 var(--sans); letter-spacing: -.01em; }
.ev-ic { border-radius: 6px; }
.flycard { background: var(--polaroid); font: 500 14px var(--sans); border-radius: 6px; border-left: 4px solid var(--accent); }
.flycard span { font-family: var(--sans); border-radius: 4px; }