/* Bloodscale: dieselben Farben und Schriften wie die Webseite, Klassen fuer Overlay und Team-Panel */
@font-face { font-family: "Big Shoulders Display"; font-weight: 800; src: url('/static/BigShoulders-800.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; font-weight: 900; src: url('/static/BigShoulders-900.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; src: url('/static/Schibsted-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; src: url('/static/Schibsted-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; src: url('/static/Schibsted-700.woff2') format('woff2'); font-display: swap; }
:root {
  --font: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --display: "Big Shoulders Display", Impact, sans-serif;
  --r: 9px; --r-lg: 14px;
  --ok: #8fbf5f; --warn: #f5a81c; --bad: #ef3a42;
  --blut: #d3121b; --blut-tief: #7c0a10;
  --bg: rgba(20,14,13,.86); --bg-2: #1f1614; --bg-3: #2a1e1b; --bg-4: #38291f;
  --line: rgba(248,241,226,.12); --line-strong: rgba(248,241,226,.24);
  --text: #f8f1e2; --text-2: #d8ccb2; --muted: #aa9d88;
  --accent: #f5a81c; --accent-2: #f8f1e2; --on-accent: #140e0d; --accent-tint: rgba(245,168,28,.14);
  --solid: #140e0d; --ease: cubic-bezier(.16,1,.3,1); --fast: 140ms;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--text); font-size: 15px; line-height: 1.42; -webkit-font-smoothing: antialiased; background: transparent; overflow: hidden; caret-color: var(--accent); }
body.im-browser { background: var(--solid) url('/static/flanke.jpg') center/cover no-repeat fixed; }
body.menue-offen { background-color: rgba(10,6,5,.5); }
body.im-browser.menue-offen { background-color: var(--solid); }
::selection { background: var(--accent); color: var(--on-accent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--blut-tief); border: 2px solid var(--bg-2); border-radius: 8px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; line-height: 1; }
h2 { font-size: 34px; margin-bottom: 8px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.muted { color: var(--muted); } .small { font-size: 13px; } .ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 6px 16px; border: 0; border-radius: var(--r); background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-strong); font: 900 18px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: background-color var(--fast), color var(--fast), transform var(--fast); }
a.btn { color: var(--text); text-decoration: none; }
.btn:hover { background: var(--bg-4); }
.btn:active { transform: scale(.97); }
.btn.primary, a.btn.primary { background: var(--accent); box-shadow: none; color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-2); }
.btn.danger { color: #ff7d82; box-shadow: inset 0 0 0 1px rgba(239,58,66,.55); }
.btn.klein { min-height: 28px; padding: 2px 10px; font-size: 15px; }
.feld { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r); background: rgba(0,0,0,.3); }
.feld:focus { border-color: var(--accent); outline: 0; }
input[type=range].feld { padding: 0; border: 0; background: none; accent-color: var(--accent); }
textarea.feld { min-height: 96px; resize: vertical; }
select.feld option { background: var(--bg-2); }
.label { display: block; margin: 12px 0 4px; color: var(--text-2); font-size: 13px; font-weight: 500; }
.karte { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-2); min-width: 0; }
.zeilen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.eyebrow { font: 900 22px/1.05 var(--display); text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }

/* HUD: liegt ueber dem Spiel, muss auf jedem Bild lesbar bleiben */
#hud { position: fixed; top: 16px; right: 16px; width: 280px; display: grid; gap: 7px; pointer-events: none; transform-origin: top right; }
#hud.links { right: auto; left: 16px; transform-origin: top left; }
.hud-box { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); box-shadow: 0 8px 22px -12px #000; }
.hud-kopf { display: flex; align-items: center; gap: 8px; }
.hud-marke { width: 24px; height: 24px; border-radius: 6px; display: block; flex: none; }
.punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); flex: none; }
.punkt.an { background: var(--ok); }
.hud-kopf strong { font: 900 19px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.hud-kopf .rechts { margin-left: auto; color: var(--text-2); font-size: 13px; }
.hud-tier { margin-bottom: 7px; }
.ereignis { border-color: rgba(245,168,28,.65); }
.ereignis h3 { font-size: 20px; color: var(--accent); }
.ereignis p { margin-top: 3px; font-size: 13px; color: var(--text); }
.alarm { background: var(--blut); border-color: var(--blut); color: #fff; font: 900 20px/1 var(--display); text-transform: uppercase; }
.leiste { display: grid; grid-template-columns: 62px 1fr 36px; gap: 8px; align-items: center; font-size: 13px; margin-top: 5px; color: var(--text-2); }
.leiste:first-child { margin-top: 0; }
.spur { height: 7px; border-radius: 4px; background: rgba(248,241,226,.13); overflow: hidden; }
.spur i { display: block; height: 100%; border-radius: 4px; background: var(--farbe, var(--accent)); transition: width .4s var(--ease); }
.leiste.wachstum { --farbe: #d8ccb2; } .leiste.leben { --farbe: #e5252d; } .leiste.ausdauer { --farbe: #9fc56e; }
.leiste.hunger { --farbe: #f5a81c; } .leiste.durst { --farbe: #57b3d6; }
.spur i.kritisch { animation: warnen 1s ease-in-out infinite alternate; }
@keyframes warnen { to { opacity: .35; } }
.leiste b { text-align: right; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.voice-pille { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pegel { width: 44px; height: 6px; border-radius: 3px; background: rgba(248,241,226,.13); overflow: hidden; margin-left: auto; flex: none; }
.pegel i { display: block; height: 100%; width: 0; background: var(--ok); }
.hud-bitte { font-size: 13px; }
.einladung { border-color: var(--blut); background: rgba(124,10,16,.92); }
.einladung h3 { font-size: 20px; }
.einladung p { margin-top: 3px; font-size: 13px; }
.hinweis { justify-self: end; padding: 5px 9px 6px; border-radius: 9px; background: var(--bg); font-size: 12px; color: var(--text); white-space: pre-wrap; }
#hud.links .hinweis { justify-self: start; }
kbd { padding: 1px 6px; border-radius: 4px; background: var(--text); color: var(--on-accent); font-family: var(--font); font-size: 11px; font-weight: 700; box-shadow: 0 2px 0 rgba(0,0,0,.5); }

body.menue-offen #hud { display: none; }

/* Ansagen */
#ansagen { z-index: 5; position: fixed; top: 16px; left: 50%; width: min(620px, calc(100vw - 32px)); transform: translateX(-50%); display: grid; gap: 8px; pointer-events: none; }
body.menue-offen #ansagen { top: auto; bottom: 16px; }
.ansage { padding: 11px 16px; border: 1px solid rgba(211,18,27,.75); border-radius: 12px; background: rgba(20,14,13,.94); font-weight: 700; text-align: center; box-shadow: 0 10px 26px -12px #000; animation: rein .3s var(--ease); }
@keyframes rein { from { opacity: 0; transform: translateY(-8px); } }

/* Menue */
#menue { position: fixed; left: 50%; top: 50%; width: min(1180px, calc(100vw - 32px)); height: min(760px, calc(100vh - 32px)); transform: translate(-50%,-50%); display: grid; grid-template: auto minmax(0,1fr) / 196px minmax(0,1fr); border: 1px solid var(--line-strong); border-radius: 18px; overflow: hidden; background: rgba(20,14,13,.985); box-shadow: 0 34px 90px rgba(0,0,0,.65); animation: menue-rein .22s var(--ease); }
@keyframes menue-rein { from { opacity: 0; transform: translate(-50%,-49%); } }
.kopf { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 0 14px; background: linear-gradient(90deg, rgba(20,14,13,.92) 30%, rgba(20,14,13,.55)), url('/static/flanke.jpg') 100% 42%/900px no-repeat; border-bottom: 2px solid var(--blut); }
.kopf .marke { width: 42px; height: 42px; border-radius: 9px; display: block; }
.kopf h1 { font-size: 30px; }
.kopf .notiz { color: var(--text-2); font-size: 13px; padding-left: 14px; border-left: 1px solid var(--line-strong); }
.kopf .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tabs { display: flex; flex-direction: column; gap: 3px; padding: 10px 8px; overflow-y: auto; background: #181110; border-right: 1px solid var(--line); }
.tab { min-height: 42px; padding: 0 12px; border: 0; border-radius: var(--r); background: none; color: var(--text); font: 900 20px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color var(--fast); }
.tab:hover { background: var(--bg-3); }
.tab.aktiv { background: var(--blut); color: #fff; }
.tab.neu::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 8px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }
.seite { padding: 18px; overflow: auto; min-height: 0; }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 12px; align-items: start; }
.liste li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.liste li:last-child { border-bottom: 0; }
.liste .zeit { flex: none; color: var(--muted); font-size: 13px; }
.liste .wert { margin-left: auto; color: var(--accent); font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.instinkt { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.instinkt.fertig { border-color: rgba(245,168,28,.7); background: linear-gradient(135deg, rgba(245,168,28,.16), var(--bg-2) 70%); }
.instinkt strong { display: block; font: 900 26px/1 var(--display); text-transform: uppercase; margin-bottom: 4px; }
.instinkt.fertig strong { color: var(--accent); }
.instinkt.offen { opacity: .72; }
.code { font: 900 38px/1.1 var(--display); letter-spacing: .1em; color: var(--accent); margin: 6px 0; }
canvas.weltkarte { display: block; width: 100%; height: 100%; border: 1px solid var(--line); border-radius: var(--r-lg); background: #120c0b; }
.karten-platz { height: min(560px, calc(100vh - 150px)); }
.regel { margin-bottom: 16px; }
.regel h3 { color: var(--accent); margin-bottom: 6px; font-size: 24px; }
.regel li { padding: 3px 0 3px 16px; position: relative; color: var(--text); }
.regel li::before { content: ""; position: absolute; left: 1px; top: 10px; width: 7px; height: 9px; background: var(--blut); border-radius: 2px 2px 50% 50%/2px 2px 62% 62%; }
.anmelden { display: grid; place-items: center; height: 100%; text-align: center; }
.anmelden img { width: min(440px, 80%); height: auto; display: block; margin: 0 auto 6px; }
.anmelden p { max-width: 460px; margin: 8px auto 18px; color: var(--text-2); }
.meldung { margin-top: 10px; font-size: 14px; }
.wahl { display: flex; gap: 6px; flex-wrap: wrap; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.block { display: block; }
.stapel { display: grid; gap: 12px; min-width: 0; align-content: start; }
.zeilen.eng { margin-top: 0; gap: 6px; flex-wrap: nowrap; }
.einladungen { border-color: var(--blut); }
.lappen-raster { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: 12px; align-items: start; }
.lappen-stand { font: 900 74px/.95 var(--display); color: var(--accent); }
.lappen-stand span { display: block; font-size: 22px; color: var(--text); text-transform: uppercase; }
.leiste.heute { --farbe: var(--accent); grid-template-columns: 44px 1fr 62px; margin-top: 12px; }
.lappen-chip { min-height: 40px; padding: 6px 12px; border: 0; border-radius: var(--r); background: var(--accent-tint); color: var(--accent); font: 900 18px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lappen-chip:hover { background: rgba(245,168,28,.28); }
.shop-gruppe { font-size: 19px; color: var(--text-2); margin: 16px 0 2px; }
.shop-zeile { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.shop-zeile:last-child { border-bottom: 0; }
.shop-zeile strong { display: block; font-weight: 700; }
.shop-tat { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.preis { font: 900 24px/1 var(--display); color: var(--accent); font-variant-numeric: tabular-nums; }

/* Team */
body.team { overflow: auto; background: var(--solid); }
.team-raster { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 12px; padding: 14px 18px; }
.team-raster .breit { grid-column: 1 / -1; }
@media (max-width: 1000px) { .team-raster { grid-template-columns: minmax(0,1fr); } }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--accent); font-size: 13px; font-weight: 700; padding: 6px 8px; border-bottom: 2px solid var(--blut); white-space: nowrap; }
td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabelle-rahmen { overflow-x: auto; }
.team-karte { height: 460px; }
.protokoll { max-height: 240px; overflow: auto; font-size: 13px; }
.protokoll .bekannt { display: flex; align-items: center; gap: 10px; }
.protokoll .bekannt .wert { margin-left: auto; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.protokoll li { padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--text-2); overflow-wrap: anywhere; }
dialog { border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--bg-2); color: var(--text); width: min(420px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0,0,0,.65); }

.abstand-oben { margin-top: 14px; }
.abstand-oben ~ .small { margin: 6px 0 12px; }

@media (max-width: 880px) { .lappen-raster { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 720px) {
  #menue { grid-template: auto auto minmax(0,1fr) / minmax(0,1fr); width: 100vw; height: 100vh; border-radius: 0; border: 0; }
  .tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .kopf .notiz { display: none; }
  .kopf h1 { font-size: 24px; }
  .spalten { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }