/* MONDAGOR Browser-Spiel - Erscheinungsbild wie fivestorms.ch:
   Flat Design, klare Trennung schwarz (#111) / weiss, keine Rahmen- oder Rasterlinien,
   Dosis (Titel, Versalien, gesperrt) + Open Sans (Text). Farbe nur als Bedeutung (Akzent #e41919). */
/* Schriften werden in index.html geladen (Google Fonts, wie auf der Website). */

:root {
  --dark: #111;
  --dark2: #1b1b1b;
  --dark3: #252525;
  --white: #fff;
  --light: #f4f4f4;
  --light2: #f8f8f8;
  --line: #e5e5e5;
  --text: #111;
  --muted: #777;
  --faint: #aaa;
  --accent: #e41919;
  --ok: #3f8f5a;
  --bad: #e41919;
  --warn: #c98a12;
  --mag: #5b5fc7;
  --font: "Open Sans", Arial, Helvetica, sans-serif;
  --alt: Dosis, "Open Sans", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--dark); color: var(--white); font-family: var(--font); font-size: 14px; font-weight: 300; line-height: 1.6; overflow: hidden; -webkit-font-smoothing: antialiased; }
body { display: flex; flex-direction: column; align-items: center; }
.hidden { display: none !important; }
#loading { margin-top: 30vh; color: rgba(255,255,255,.6); font-family: var(--alt); text-transform: uppercase; letter-spacing: .3em; font-size: 14px; }
.error { margin: 20vh auto; max-width: 620px; padding: 30px; background: var(--white); color: var(--text); font-weight: 300; }
.error code { color: var(--text); font-weight: 600; }

/* Titel-Typografie (wie .section-title / .hs-line-4 der Website) */
.alt, h1, h2, h3, h4 { font-family: var(--alt); text-transform: uppercase; font-weight: 400; }

/* ---------- Grundgeruest: volle Fenstergroesse ---------- */
#game { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--dark); }
#header { display: flex; justify-content: space-between; align-items: center; height: 56px; padding: 0 24px; background: var(--dark); }
#header .brand { display: flex; align-items: center; }
#header .brand img { height: 26px; width: auto; display: block; }
#header-info { font-family: var(--alt); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: rgba(255,255,255,.85); }
#header-info .phase { color: rgba(255,255,255,.5); }

main { display: flex; flex: 1 1 auto; min-height: 0; }
#map-wrap { position: relative; flex: 1 1 auto; min-width: 0; background: var(--dark); overflow: hidden; }
#side, #log { border: 0; }
canvas#map { position: absolute; left: 0; top: 0; display: block; image-rendering: pixelated; image-rendering: crisp-edges; cursor: pointer; }

/* Seitenleiste: dunkle Flaeche (wie die dunklen Sektionen der Website); die Karte ist die helle "Karte" im Rahmen */
#side { flex: 0 0 300px; width: 300px; padding: 26px 26px 20px 30px; background: var(--dark); color: var(--white); overflow: auto; }
#side h2 { margin: 0; font-size: 20px; letter-spacing: .15em; color: var(--white); line-height: 1.3; }
#side .sub { color: rgba(255,255,255,.5); font-size: 11px; text-transform: uppercase; letter-spacing: .25em; margin-bottom: 20px; }
.bar-label { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: rgba(255,255,255,.55); margin-top: 12px; }
.bar { height: 4px; background: rgba(255,255,255,.14); margin-top: 5px; }
.bar .fill { height: 100%; background: var(--white); transition: width .3s; }
.bar .fill.warn { background: var(--warn); }
.bar .fill.crit { background: var(--bad); }
.bar .fill.mag { background: #9a9de6; }
.bar.small { height: 3px; }
table.kv { width: 100%; margin-top: 22px; border-collapse: collapse; font-size: 13px; }
table.kv td { padding: 4px 0; vertical-align: top; color: rgba(255,255,255,.9); }
table.kv td:first-child { color: rgba(255,255,255,.5); width: 42%; text-transform: uppercase; letter-spacing: .15em; font-size: 10px; padding-top: 7px; font-family: var(--alt); }
table.kv .warn { color: #e8b04a; }
.keys { margin-top: 26px; font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.9; }
.keys b { color: rgba(255,255,255,.9); font-weight: 600; }

/* Protokoll: dunkle Flaeche, etwas heller als der Rahmen, keine Linien */
#log { flex: 0 0 150px; height: 150px; overflow-y: auto; padding: 12px 24px; background: var(--dark2); color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.6; }
#log .msg { padding: 1px 0; }
#log .msg b { color: var(--white); font-weight: 600; }
#log .msg.good { color: #7fc99a; }
#log .msg.bad { color: #ff6b6b; }
#log .msg.dim { color: rgba(255,255,255,.4); }
#log .msg.journal { color: var(--white); font-style: italic; }

/* Aktionsleiste: schwarze Leiste, Buttons wie .btn-mod.btn-border-w */
#actions { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; padding: 12px 24px; background: var(--dark); }
button { font-family: var(--alt); text-transform: uppercase; letter-spacing: 2px; font-size: 11px; font-weight: 400; cursor: pointer; border-radius: 0; transition: background .15s, color .15s, border-color .15s; }
#actions button, #touch button { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.75); padding: 6px 14px; }
#actions button:hover, #touch button:hover { background: var(--white); color: var(--dark); border-color: var(--white); }
#touch { display: none; position: absolute; right: 12px; bottom: 12px; flex-direction: column; align-items: center; opacity: .85; }
#touch button { width: 40px; height: 40px; padding: 0; font-size: 14px; }
#touch div { display: flex; }

/* ---------- Overlay / Dialoge: weisse Karte auf abgedunkelter Welt ---------- */
#overlay { position: fixed; inset: 0; background: rgba(17,17,17,.82); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 16px; }
.panel { background: var(--white); color: var(--text); padding: 34px 40px 30px; width: 640px; max-width: 100%; max-height: 94vh; overflow-y: auto; }
.panel.wide { width: 980px; }
.panel h2 { margin: 0 0 18px; font-size: 22px; letter-spacing: .2em; line-height: 1.4; text-align: center; color: var(--text); }
.panel h3 { margin: 18px 0 6px; font-size: 13px; letter-spacing: .25em; color: var(--text); }
.panel h4 { margin: 12px 0 4px; font-size: 11px; letter-spacing: .2em; color: var(--muted); }
.panel .text { line-height: 1.7; font-size: 15px; font-weight: 300; color: #444; }
.panel .text p { margin: 0 0 12px; }
.panel .text.small, .small { font-size: 12px; }
.dim { color: var(--muted); }
.ok { color: var(--ok); }
.fail, .bad { color: var(--bad); }
.warn { color: var(--warn); }
.learn { color: var(--text); font-weight: 600; }
.n { text-align: right; white-space: nowrap; }
code { background: var(--light); padding: 1px 5px; color: var(--text); font-size: 12px; }

/* Titelbild: dunkle Karte wie der Hero der Website */
.panel.title { background: var(--dark); color: var(--white); text-align: center; padding: 50px 56px 44px; }
.panel.title h2 { font-size: 44px; letter-spacing: .5em; font-weight: 300; color: var(--white); margin-bottom: 6px; }
.panel.title .title-sub { color: rgba(255,255,255,.85); font-family: var(--alt); text-transform: uppercase; letter-spacing: .3em; font-size: 12px; font-style: normal; margin-bottom: 26px; }
.panel.title .text { color: rgba(255,255,255,.75); }
.panel.title .dim { color: rgba(255,255,255,.5); }
.panel.title button.choice { background: transparent; color: var(--white); border-color: rgba(255,255,255,.75); }
.panel.title button.choice:hover:not([disabled]), .panel.title button.choice:focus { background: var(--white); color: var(--dark); border-color: var(--white); }
.panel.title button.choice .num, .panel.title button.choice .hint { color: rgba(255,255,255,.5); }
.panel.title button.choice:hover:not([disabled]) .num, .panel.title button.choice:hover:not([disabled]) .hint, .panel.title button.choice:focus .num, .panel.title button.choice:focus .hint { color: rgba(17,17,17,.6); }
.title-sub { color: var(--muted); font-style: italic; }

/* Auswahl-Buttons wie die Akkordeon-Zeilen der Website (1 px helle Kontur, Versalien gesperrt) */
.choices { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.creation-cols .choices { flex-direction: row; }
button.choice { display: flex; align-items: center; gap: 14px; text-align: left; background: var(--white); color: var(--text); border: 1px solid var(--line); padding: 10px 16px; line-height: 1.5; }
button.choice:hover:not([disabled]), button.choice:focus { background: var(--dark); color: var(--white); border-color: var(--dark); outline: none; }
button.choice[disabled] { opacity: .4; cursor: default; }
button.choice .num { min-width: 14px; color: var(--muted); font-size: 11px; }
button.choice.esc .num { font-size: 9px; letter-spacing: 1px; }   /* "ESC" statt Ziffer bei Schliessen-Knoepfen */
button.choice:hover:not([disabled]) .num, button.choice:focus .num { color: rgba(255,255,255,.6); }
button.choice .hint { margin-left: auto; color: var(--muted); font-size: 10px; letter-spacing: 1px; white-space: nowrap; text-align: right; }
button.choice:hover:not([disabled]) .hint, button.choice:focus .hint { color: rgba(255,255,255,.6); }

/* Proben */
.probe { margin: 10px 0; padding: 10px 14px; background: var(--light); font-size: 13px; color: #444; }
.probe b { font-weight: 600; }
.die { display: inline-block; width: 20px; height: 20px; line-height: 18px; text-align: center; margin: 0 1px; background: var(--white); border: 1px solid #ccc; font-size: 12px; color: var(--text); }
.die.hit { background: var(--dark); color: var(--white); border-color: var(--dark); font-weight: 600; }

/* Charakterblatt */
.sheet { display: flex; gap: 32px; }
.sheet .col { flex: 1; min-width: 0; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid td { padding: 3px 6px; }
table.grid tr:nth-child(even) td { background: var(--light2); }
table.grid.small td { padding: 2px 6px; font-size: 12px; }
.box { display: inline-block; width: 8px; height: 8px; background: var(--line); margin-right: 2px; }
.box.on { background: var(--dark); }

/* Erschaffung */
.creation-cols { display: flex; gap: 32px; }
.creation-cols > div { flex: 1; min-width: 0; }
.creation-cols.three > div { flex: 1; }
.voelker .gruppe { margin-bottom: 10px; }
button.volk { background: var(--white); color: var(--text); border: 1px solid var(--line); padding: 5px 10px; margin: 2px; letter-spacing: 1px; }
button.volk:hover { border-color: var(--dark); }
button.volk.sel { background: var(--dark); color: var(--white); border-color: var(--dark); }
img.wanderer { image-rendering: pixelated; image-rendering: crisp-edges; display: block; background: #f2f2f2; }
.volk-info img.wanderer { margin: 0 0 12px; }
#side .side-wanderer { margin: 0 0 12px; }
#side img.wanderer { background: transparent; }
.sheet img.wanderer { margin: 0 0 12px; }
.volk-info h3 { font-size: 20px; letter-spacing: .15em; color: var(--text); margin-top: 0; }
.volk-info .maxtab { margin: 10px 0; font-size: 13px; color: #444; }
.volk-info .attr { display: inline-block; margin-right: 10px; }
.volk-info input { width: 100%; margin-top: 6px; padding: 9px 12px; background: var(--white); color: var(--text); border: 1px solid var(--line); font-size: 15px; font-family: var(--font); font-weight: 300; outline: none; }
.volk-info input:focus { border-color: var(--dark); }
table.alloc { width: 100%; border-collapse: collapse; font-size: 13px; }
table.alloc td, table.alloc th { padding: 5px 6px; text-align: left; }
table.alloc th { color: var(--muted); font-weight: 400; font-size: 10px; text-transform: uppercase; letter-spacing: .15em; }
table.alloc tr:nth-child(even) td { background: var(--light2); }
table.alloc tr.sel td { background: var(--dark); color: var(--white); }
table.alloc tr.sel td .dim { color: rgba(255,255,255,.6); }
table.alloc.small td { font-size: 12px; padding: 3px 6px; }
button.pm { width: 26px; height: 24px; background: var(--white); color: var(--text); border: 1px solid #ccc; font-size: 14px; padding: 0; letter-spacing: 0; font-family: var(--font); }
button.pm:hover:not([disabled]) { background: var(--dark); color: var(--white); border-color: var(--dark); }
button.pm[disabled] { opacity: .25; cursor: default; }
td.n button.pm { width: auto; padding: 0 8px; font-size: 11px; }
.summary { margin-top: 14px; padding: 10px 14px; background: var(--light); font-size: 13px; color: #444; }
.summary b { font-weight: 600; color: var(--text); }

/* Kampf */
.combat .enemies { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.combat .enemy { flex: 1 1 200px; padding: 10px 14px; background: var(--light); }
.combat .enemy.dead { opacity: .35; }
.combat .enemy .bar.hp { height: 6px; background: #dedede; margin-top: 6px; }
.combat .enemy .bar.hp .fill { transition: width .3s, background-color .3s; }
.combat .ename { font-weight: 600; font-family: var(--alt); text-transform: uppercase; letter-spacing: .1em; }
.combat .you { padding: 10px 14px; background: var(--dark); color: var(--white); }
.combat .you .dim { color: rgba(255,255,255,.6); }
.combat .you .mag { color: #9db8ff; }
.combat .timeline { margin: 8px 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.combat .clog { height: 190px; overflow-y: auto; padding: 10px 14px; background: var(--light2); font-size: 13px; line-height: 1.6; color: #444; }
.combat .clog .intro { color: var(--text); font-style: italic; }
.combat .clog .good { color: var(--ok); }
.combat .clog .bad { color: var(--bad); }
.combat .clog div { padding: 1px 0; }

#minimap { display: block; margin: 0 auto; max-width: 100%; }

/* Pixelart eines Wesens (128x200, 4 Graustufen) - harte Pixel, doppelt so gross */
.panel.bild-panel { width: 420px; }
.wesen-bild { text-align: center; margin: 0 0 14px; }
.wesen-bild img { image-rendering: pixelated; image-rendering: crisp-edges; width: 256px; max-width: 100%; height: auto; aspect-ratio: 128 / 200; background: var(--white); border: 1px solid #e5e5e5; }
.wesen-text { margin: 0 0 6px; font-size: 14px; color: #444; text-align: center; }
ol.journal { padding-left: 20px; line-height: 1.7; color: #444; }

/* Scrollbalken schlicht */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc; }
#log::-webkit-scrollbar-thumb, #side::-webkit-scrollbar-thumb { background: #3a3a3a; }

@media (max-width: 800px) {
  #game { position: static; height: 100vh; }
  #header { height: 44px; padding: 0 14px; }
  main { flex-direction: column; }
  #map-wrap { flex: 1 1 auto; min-height: 45vh; }
  #side { flex: 0 0 auto; width: auto; max-height: 30vh; padding: 14px 16px; }
  #log { flex: 0 0 110px; height: 110px; padding: 8px 14px; }
  #actions { padding: 8px 14px; }
  #touch { display: flex; }
  .panel { padding: 22px 20px; }
  .panel.title { padding: 30px 22px; }
  .sheet, .creation-cols { flex-direction: column; }
  .panel.title h2 { font-size: 28px; letter-spacing: .3em; }
}

.dialog ul.funde, #overlay ul.funde { margin: 10px 0 0 1.2em; padding: 0; color: #444; }