/*
 * Lossboard: gemeinsames CSS für Website und Web-App.
 * Design „Spielbrett“ (IMPLEMENTIERUNGSPLAN.md 0.5c, brand/spielbrett/tokens.md).
 * Immer hell: Spieltisch-Creme als Grund, weiße Bretter und Karten, leichte 3D-Unterkanten,
 * keine Verläufe, kein Glow.
 *
 * Inhalt:
 *   1. Schriften (Fredoka und Nunito, statische Schnitte vom eigenen Server)
 *   2. Tokens
 *   3. Grundstil
 *   4. Komponenten: Logo, Karte, Button, Platz-Marke (.badge), Spielerreihe, Formular, Hinweis, Chip,
 *      Spielfigur, Banderole, Waage
 *
 * Seiten-Layout der Website liegt in site.css, die Web-App ergänzt app.css.
 */

/* 1. Schriften: statische Schnitte (Latin und Latin Extended soweit vorhanden, OFL; Lizenz in
   /assets/fonts/OFL-*.txt). Bewusst keine variablen Dateien (Glyphen-Artefakte in Chrome). Fredoka hat
   kaum Latin Extended, darum steht Nunito als Ersatz direkt dahinter. */
@font-face { font-family: "Fredoka"; src: url("/assets/fonts/Fredoka-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("/assets/fonts/Fredoka-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("/assets/fonts/Fredoka-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/Nunito-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/Nunito-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/Nunito-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/Nunito-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* 2. Tokens (tokens.md „Code-Vorlagen“) */
:root {
  color-scheme: light;
  --table: #fff3e0;
  --table-hi: #fff8ee;
  --board: #ffffff;
  --rim: #f2d9b5;
  --rim-dark: #e3c08f;
  --track: #fcebd3;
  --line: #efe2cf;
  --text: #2b2118;
  --muted: #7a6a5a;
  --on-accent: #ffffff;
  --tomato: #f2545b;
  --tomato-dark: #c73e46;
  --tomato-soft: #fde4e3;
  --sky: #2f9bea;
  --sky-dark: #1f7bc2;
  --sky-soft: #e3f1fc;
  --meadow: #4db86a;
  --meadow-dark: #36924f;
  --meadow-soft: #e2f4e6;
  --gold: #e8b027;
  --gold-dark: #b8860f;
  --gold-soft: #fcf0cf;
  --silver: #a9b4c2;
  --bronze: #c9814a;
  --lilac: #8e5be8;
  --lilac-dark: #6e3fc4;
  --lilac-soft: #efe7fc;
  --orange: #f59e2b;
  --pink: #e46fb1;
  /* Truhe am Brett-Ziel (Gruppenziel); Grundton = Figurenfarbe Kakao */
  --cocoa: #a86f4c;
  --cocoa-dark: #8a5737;
  --cocoa-hi: #b97c55;
  --fig-01: #f2545b; --fig-02: #8e5be8; --fig-03: #2f9bea; --fig-04: #f59e2b; --fig-05: #22b3a6; --fig-06: #e46fb1;
  --fig-07: #4db86a; --fig-08: #8dbf3a; --fig-09: #5466d9; --fig-10: #a86f4c; --fig-11: #1f7f95; --fig-12: #6b7a8c;
  --team-a: #f2545b;
  --team-b: #8e5be8;

  --font-head: "Fredoka", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font: var(--font-text);
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-xl: 20px;
  --r-card: 22px;
  --r-board: 26px;
  --r-sheet: 28px;
  --r-full: 999px;
  --shadow-1: 0 3px 0 rgb(43 33 24 / .10), 0 6px 12px rgb(43 33 24 / .06);
  --shadow-2: 0 5px 0 rgb(43 33 24 / .16), 0 12px 20px rgb(43 33 24 / .12);
  --shadow-primary: 0 4px 0 var(--tomato-dark), 0 10px 18px rgb(43 33 24 / .12);
  --shadow-rim: 0 4px 0 var(--rim), 0 8px 16px rgb(43 33 24 / .06);
  --shadow-sheet: 0 -6px 28px rgb(43 33 24 / .12);

  /* Namen, die ältere Bausteine noch lesen */
  --bg: var(--table);
  --surface: var(--board);
  --surface-hi: var(--table-hi);
  --accent: var(--sky);
  --accent-text: var(--sky-dark);
  --accent-soft: var(--sky-soft);
  --highlight: var(--gold);
  --card: var(--board);
  --self-bg: var(--sky-soft);
  --self-text: var(--sky-dark);
  --focus: var(--sky);
  --danger: var(--tomato-dark);
  --radius-s: var(--r-s);
  --radius: var(--r-m);
  --radius-l: var(--r-l);

  /* Kritisch gedämpfte Feder (Dämpfung 1,0, Response 0,35 s) als Kurve über 0,5 s; Fallback ohne linear() */
  --ease-spring: cubic-bezier(.25, .9, .3, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, .075, .227, .39, .536, .656, .75, .821, .873, .911, .938, .957, .971, .98, .986, .991, .994, .996, .997, .998, 1);
  }
}

/* 3. Grundstil */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--table); }
body {
  margin: 0;
  background: var(--table);
  color: var(--text);
  font: 400 15px/1.5 var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0 0 .5em; font-family: var(--font-head); font-weight: 600; line-height: 1.2; text-wrap: balance; }
h1 { letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--sky-dark); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--sky-soft); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.overline { font: 800 13px/17px var(--font-text); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0; }
.accent-text { color: var(--tomato); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 4. Komponenten */

/* Logo: Lockup aus brand/svg/lockup.svg (nur auf hellem Grund) */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.logo-lockup { display: block; height: 30px; width: auto; flex: none; }
.logo img { display: block; height: 30px; width: auto; }
@media (max-width: 380px) { .logo-lockup, .logo img { height: 26px; } }

/* Karte: weiß, Rand 2 Brettrand, Radius 22, Unterkante */
.card {
  background: var(--board);
  border: 2px solid var(--rim);
  border-radius: var(--r-card);
  padding: 16px;
  box-shadow: var(--shadow-rim);
}
.card-accent { border-color: var(--sky); background: var(--sky-soft); box-shadow: 0 4px 0 rgb(47 155 234 / .35); }
.card-accent .card-sub { color: var(--muted); }
.card-sunken { background: var(--table-hi); box-shadow: none; }
.card-title { font: 600 17px/22px var(--font-head); margin: 0 0 4px; }
.card-sub { color: var(--muted); font: 600 13px/18px var(--font-text); margin: 0; }

/* Button: Pille, Höhe 52, Fredoka 17. Primär Tomate mit Unterkante (einer pro Screen), Sekundär weiß mit Rand,
   Text-Button Himmel dunkel. Drücken: 0,97 und Oberseite tiefer. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 26px;
  border: 2px solid transparent; border-radius: var(--r-full);
  font: 600 17px/1.2 var(--font-head);
  text-decoration: none; text-align: center; cursor: pointer;
  background: transparent; color: var(--text);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .5s var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97) translateY(2px); transition-duration: .15s, .15s, .1s, 0s; }
.btn-primary, .btn-highlight { background: var(--tomato); color: var(--on-accent); box-shadow: var(--shadow-primary); }
.btn-primary:hover, .btn-highlight:hover { background: #f4646b; }
.btn-primary:active, .btn-highlight:active { box-shadow: 0 2px 0 var(--tomato-dark), 0 6px 12px rgb(43 33 24 / .1); }
.btn-secondary { background: var(--board); border-color: var(--rim); color: var(--text); box-shadow: 0 4px 0 var(--rim); }
.btn-secondary:hover { border-color: var(--rim-dark); }
.btn-secondary:active { box-shadow: 0 2px 0 var(--rim); }
.btn-ghost { color: var(--sky-dark); padding-inline: 12px; }
.btn-ghost:hover { background: var(--sky-soft); }
.btn-small { min-height: 42px; padding: 8px 18px; font-size: 15px; }
.btn-block { display: flex; width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; cursor: default; transform: none; }

/* Platz-Marke Ø 26 (Klasse .badge): 1 Gold, 2 Silber, 3 Bronze mit harter Unterkante, ab 4 weiß mit Brettrand */
.badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--rim); background: var(--board); color: var(--muted);
  font: 500 13px/1 var(--font-head); font-variant-numeric: tabular-nums;
}
.badge-1, .badge-gold { background: var(--gold); border-color: var(--gold); color: var(--on-accent); box-shadow: 0 2px 0 var(--gold-dark); }
.badge-2, .badge-silver { background: var(--silver); border-color: var(--silver); color: var(--on-accent); box-shadow: 0 2px 0 #8792a1; }
.badge-3, .badge-bronze { background: var(--bronze); border-color: var(--bronze); color: var(--on-accent); box-shadow: 0 2px 0 #a3632f; }
.badge-cyan, .badge-sky { background: var(--sky); border-color: var(--sky); color: var(--on-accent); box-shadow: 0 2px 0 var(--sky-dark); }
.badge-lavender, .badge-lilac { background: var(--lilac); border-color: var(--lilac); color: var(--on-accent); box-shadow: 0 2px 0 var(--lilac-dark); }
.badge-m { width: 40px; height: 40px; font-size: 16px; }
.badge-lg { width: 56px; height: 56px; font-size: 20px; }
.badge-xl { width: 64px; height: 64px; font-size: 22px; }
.badge svg { width: 50%; height: 50%; fill: currentColor; }

/* Spielerreihe: Platz-Marke, Mini-Figur, Name, Bewegung (36), Wert (58). Du: Fläche Himmel hell, Wert Himmel dunkel. */
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rank-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; min-height: 46px;
}
.rank-row .rank-main { flex: 1; min-width: 0; }
.rank-row .rank-name { font: 700 15px/20px var(--font-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.rank-row .rank-sub { color: var(--muted); font: 600 13px/18px var(--font-text); display: block; }
.rank-row .rank-move { width: 36px; text-align: right; font: 500 13px/16px var(--font-head); color: var(--muted); white-space: nowrap; flex: none; }
.rank-row .rank-move.up { color: var(--meadow-dark); }
.rank-row .rank-value { min-width: 58px; text-align: right; font: 600 16px/20px var(--font-head); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.rank-row.is-self { background: var(--sky-soft); }
.rank-row.is-self .rank-value { color: var(--sky-dark); }
.tri { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; vertical-align: 0; margin-right: 4px; }
.tri-up { border-bottom: 8px solid currentColor; }
.tri-down { border-top: 8px solid currentColor; }
.flat { display: inline-block; width: 7px; height: 5px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; vertical-align: middle; }

/* Formularfelder */
.field { display: grid; gap: 6px; min-width: 0; }
.field-label { font: 700 13px/18px var(--font-text); color: var(--muted); }
.field-hint { color: var(--muted); font: 600 13px/18px var(--font-text); margin: 0; }
.field-error { color: var(--tomato-dark); font: 700 13px/18px var(--font-text); margin: 0; }
.input {
  width: 100%; min-height: 50px; padding: 10px 16px;
  border: 2px solid var(--rim); border-radius: var(--r-l);
  background: var(--board); color: var(--text);
  font: 600 16px/1.3 var(--font-text);
  appearance: none; -webkit-appearance: none;
}
select.input {
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.input::placeholder { color: var(--muted); opacity: .75; }
.input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-soft); }
.input[aria-invalid="true"] { border-color: var(--tomato); }
.input-num { font-variant-numeric: tabular-nums; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--sky); flex: none; }

/* Hinweis und Chip (Höhe 26, Pille; neutral weiß mit Rand, sonst Fläche Soft und Text Dark) */
.note {
  background: var(--board); border: 2px solid var(--rim); color: var(--text);
  border-radius: var(--r-l); padding: 12px 14px; font: 600 14px/20px var(--font-text);
}
.note a { color: var(--sky-dark); font-weight: 700; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 26px; padding: 4px 12px; border-radius: var(--r-full);
  background: var(--board); border: 2px solid var(--rim); color: var(--text);
  font: 600 13px/17px var(--font-text); white-space: nowrap;
}
.chip-mint, .chip-meadow { background: var(--meadow-soft); border-color: transparent; color: var(--meadow-dark); }
.chip-lavender, .chip-lilac { background: var(--lilac-soft); border-color: transparent; color: var(--lilac-dark); }
.chip-cyan, .chip-sky { background: var(--sky-soft); border-color: transparent; color: var(--sky-dark); }
.chip-tomato { background: var(--tomato-soft); border-color: transparent; color: var(--tomato-dark); }
.chip-gold { background: var(--gold-soft); border-color: transparent; color: var(--gold-dark); }
.chip-active { background: var(--sky); border-color: var(--sky); color: var(--on-accent); }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--meadow); }

/* Spielfigur (figur.svg inline, Farbe über currentColor); Initiale als Text darüber */
.figur { position: relative; display: inline-block; width: 28px; height: 36px; color: var(--fig-03); flex: none; line-height: 0; }
.figur > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.figur-ini {
  position: absolute; left: 0; right: 0; top: 60%; text-align: center;
  font: 600 9px/1 var(--font-head); color: #fff; pointer-events: none;
}
.figur-mini { width: 18px; height: 23px; }
.figur-mini .figur-ini { display: none; }
.figur-l { width: 40px; height: 52px; }
.figur-l .figur-ini { font-size: 12px; }

/* Banderole: Band mit eingeschlagenen Enden in …Dark */
.banderole { position: relative; display: block; width: fit-content; margin: 4px auto 12px; max-width: calc(100% - 44px); text-decoration: none; }
.banderole-band {
  position: relative; z-index: 1; display: block;
  padding: 7px 20px; border-radius: 6px; text-align: center;
  background: var(--tomato); color: var(--on-accent); box-shadow: 0 4px 0 rgb(43 33 24 / .08);
}
.banderole::before, .banderole::after {
  content: ""; position: absolute; z-index: 0; top: 14px; bottom: -8px; width: 34px; background: var(--tomato-dark);
}
.banderole::before { left: -18px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%); }
.banderole::after { right: -18px; clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%); }
.banderole-title { display: block; font: 600 19px/24px var(--font-head); }
.banderole-sub { display: block; font: 700 14px/19px var(--font-text); opacity: .95; }
.banderole-sky .banderole-band { background: var(--sky); }
.banderole-sky::before, .banderole-sky::after { background: var(--sky-dark); }
.banderole-gold .banderole-band { background: var(--gold); }
.banderole-gold::before, .banderole-gold::after { background: var(--gold-dark); }
.banderole-lilac .banderole-band { background: var(--lilac); }
.banderole-lilac::before, .banderole-lilac::after { background: var(--lilac-dark); }

/* Waage (waage.svg inline, Plan 0.7 statt Würfel, Farbe über currentColor) */
.waage { display: inline-block; width: 64px; height: 64px; color: var(--tomato); line-height: 0; }
.waage > svg { width: 100%; height: 100%; display: block; overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01s !important; animation-duration: .01s !important; scroll-behavior: auto !important; }
}