/* ---------- Design tokens ---------- */

/* Fredoka (SIL Open Font License, siehe fonts/OFL-Fredoka.txt) – selbst gehostet, nur Latin */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fredoka-latin.woff2") format("woff2");
}

/* Palette "Sommer": Minzgrün, Mango, Pink-Akzent auf Pfirsich */
:root {
  color-scheme: light;
  --bg: #fff6ee;
  --surface: #ffffff;
  --surface-2: #fbebdf;
  --text: #2a1a24;
  --muted: #7b6470;
  --border: #f0dccf;
  --border-strong: #c4a08f;
  --accent: #e5397a;
  --accent-text: #ffffff;
  --danger: #d0342c;

  --correct: #0ca678;
  --present: #ffb020;
  --absent: #9a8a93;
  --correct-text: #ffffff;
  --present-text: #2b1a00;
  --absent-text: #ffffff;
  --key: #f6e3d6;
  /* Tastatur: ausgeschlossene Buchstaben deutlich dunkler als unbenutzte Tasten */
  --key-absent: #6f6068;
  --key-absent-text: #ffffff;

  --radius: 12px;
  --tile-radius: 8px;
  --shadow: 0 1px 2px rgb(90 30 50 / 6%), 0 4px 16px rgb(90 30 50 / 7%);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Fredoka", ui-rounded, var(--font);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #1d1219;
    --surface: #281a23;
    --surface-2: #33222d;
    --text: #fbeef3;
    --muted: #b79fab;
    --border: #45303c;
    --border-strong: #6e5462;
    --accent: #ff5c97;
    --accent-text: #1d1219;
    --danger: #ff6b6b;

    --correct: #0fa577;
    --present: #f5a20a;
    --absent: #4d3c46;
    --present-text: #241500;
    --key: #553d4a;
    /* Dunkel: ausgeschlossene Tasten treten fast in den Hintergrund zurück */
    --key-absent: #22161d;
    --key-absent-text: #7d6873;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 16px rgb(0 0 0 / 30%);
  }
}

/* Zuschaltbar: "Kontrast" – Orange/Blau statt Grün/Gelb, auch bei Rot-Grün-Schwäche gut unterscheidbar */
:root[data-palette="contrast"] {
  --correct: #f5793a;
  --present: #3d8fe0;
  --correct-text: #ffffff;
  --present-text: #ffffff;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px))
           env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
}

h1, h2, h3 { margin: 0; line-height: 1.2; }

button, input { font: inherit; color: inherit; }

button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .5; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.muted { color: var(--muted); }
.small { font-size: .875rem; }

/* ---------- Buttons & inputs ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: .6em 1.2em;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
  transition: transform .08s ease, background-color .15s ease;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-success { background: var(--correct); border-color: var(--correct); color: var(--correct-text); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; min-height: 40px; padding: .4em .8em; }
.btn-block { width: 100%; }

.input {
  width: 100%;
  min-height: 48px;
  padding: .6em 1em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.input:focus { border-color: var(--accent); outline: none; }

.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: .9rem; }

.row { display: flex; gap: .5rem; flex-wrap: wrap; }
.row > .input { flex: 1 1 12rem; }

/* ---------- Layout ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 56px;
  border-bottom: 1px solid var(--border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 1.05rem;
  text-decoration: none;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}
.brand svg { width: 28px; height: 28px; }

.page {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding-block: 1.5rem 2rem;
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
}

.center { text-align: center; justify-items: center; }

.hero { padding-block: 2rem 1rem; display: grid; gap: .75rem; justify-items: center; text-align: center; }
.hero h1 { font-size: clamp(2rem, 8vw, 2.75rem); letter-spacing: .14em; text-transform: uppercase; }
.hero .logo { width: 72px; height: 72px; }

/* Segmented control for word length */
.segmented { display: grid; grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr)); gap: .4rem; }
.segmented button {
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 700;
}
.segmented button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

.rules { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.rules li { display: flex; gap: .75rem; align-items: center; }
.rules .tile { --tile: 2rem; font-size: 1rem; flex: none; }

/* ---------- Lobby / waiting room ---------- */

.players { display: grid; gap: .5rem; }
.player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.player.empty { border-style: dashed; background: transparent; color: var(--muted); }
.badge { font-size: .8rem; font-weight: 700; padding: .2em .7em; border-radius: 999px; background: var(--border); white-space: nowrap; }
.badge.ok { background: var(--correct); color: var(--correct-text); }

.spinner {
  width: 1.1em; height: 1.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin .8s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Game ---------- */

.game {
  flex: 1;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-top: .75rem;
  min-height: 0;
}

.scoreboard { display: grid; grid-template-columns: repeat(var(--players, 2), minmax(0, 1fr)); gap: .5rem; }
/* Ab 3 Spielern: schmale Karten, Mini-Raster unter Name und Punkten */
.scoreboard.compact { gap: .35rem; }
.scoreboard.compact .score { flex-direction: column; align-items: flex-start; gap: .25rem; padding: .4rem .5rem; }
.scoreboard.compact .score .points { font-size: 1.1rem; }
.scoreboard.compact .score .count { font-size: .7rem; }
.scoreboard.compact .score > div { width: 100%; }
.score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  min-width: 0;
}
.score .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score .count { font-size: .8rem; color: var(--muted); }
.score.winner { border-color: var(--correct); box-shadow: 0 0 0 1px var(--correct); }
.score .points { font-size: 1.4rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.score .points .unit { font-size: .75rem; font-weight: 600; color: var(--muted); }
.score.solved .points { color: var(--correct); }
.score.low .points { color: var(--danger); }
.score.failed .points { color: var(--muted); }

.status { text-align: center; font-weight: 600; min-height: 1.5em; margin: 0; }

.board-area {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  /* Das Raster richtet sich nach dem Platz, der neben Kopf, Punkten und Tastatur wirklich übrig ist */
  container-type: size;
}

.board {
  /* Tile size fits the width (word length) and the height (6 rows + keyboard) */
  --tile: min(3.6rem, calc((100vw - 2rem) / var(--len) - .4rem), calc((100dvh - 24rem) / var(--rows)));
  display: grid;
  gap: .35rem;
}
.board-row { display: grid; grid-template-columns: repeat(var(--len), var(--tile)); gap: .35rem; }
.board-area .board {
  --tile: min(3.6rem,
              calc((100cqw - (var(--len) - 1) * .35rem) / var(--len)),
              calc((100cqh - (var(--rows) - 1) * .35rem) / var(--rows)));
}

/* Eingabezeile: Felder lassen sich anklicken, das aktive Feld ist markiert */
.board-row.entry .tile { cursor: pointer; }
.board-row.entry .tile.cursor { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.tile {
  width: var(--tile);
  height: var(--tile);
  display: grid;
  place-items: center;
  border: 2px solid var(--border);
  font-weight: 800;
  font-size: calc(var(--tile) * .5);
  /* Kein text-transform: uppercase nötig – die Buchstaben kommen schon groß an. */
  user-select: none;
}
.tile.filled { border-color: var(--border-strong); animation: pop .1s ease; }
.tile.correct { background: var(--correct); border-color: var(--correct); color: var(--correct-text); }
.tile.present { background: var(--present); border-color: var(--present); color: var(--present-text); }
.tile.absent  { background: var(--absent);  border-color: var(--absent);  color: var(--absent-text); }
.tile.flip { animation: flip .5s ease both; }

.board-row.shake { animation: shake .4s ease; }

@keyframes pop { 50% { transform: scale(1.1); } }
@keyframes flip {
  0% { transform: rotateX(0); background: transparent; border-color: var(--border-strong); color: var(--text); }
  49% { background: transparent; border-color: var(--border-strong); color: var(--text); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}
@keyframes shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Opponent: tiny grid without letters */
.board.mini { --tile: 9px; gap: 2px; flex: none; }
.mini .board-row { gap: 2px; }
.mini .tile { border-width: 1px; font-size: 0; }
.mini .tile.new { animation: pop .3s ease; }

/* Final opponent board with letters */
.boards-final { display: flex; justify-content: center; gap: clamp(.75rem, 4vw, 2rem); }
.boards-final figure { margin: 0; display: grid; gap: .4rem; justify-items: center; }
.boards-final figcaption { font-weight: 700; font-size: .9rem; }
/* Two boards side by side, even on phones */
.boards-final .board { --tile: min(2.6rem, calc((100vw - 5rem) / (2 * var(--len)) - .35rem)); }

.result { text-align: center; }
.result h2 { font-size: 1.6rem; }
.result .word { display: flex; justify-content: center; gap: .3rem; }
.result .word .tile { --tile: 2.4rem; }

/* Keyboard */
.keyboard {
  display: grid;
  gap: .4rem;
  padding-bottom: .75rem;
  user-select: none;
}
.keyboard-row { display: flex; justify-content: center; gap: .3rem; }
.key {
  flex: 1 1 0;
  max-width: 2.9rem;
  min-height: 3.4rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--key);
  font-weight: 700;
  font-size: 1rem;
}
@media (max-height: 700px) {
  .key { min-height: 2.9rem; }
}
.key.wide { flex-grow: 1.6; max-width: 4.6rem; font-size: .75rem; text-transform: uppercase; }
.key.correct { background: var(--correct); color: var(--correct-text); }
.key.present { background: var(--present); color: var(--present-text); }
.key.absent  { background: var(--key-absent); color: var(--key-absent-text); }
.key:active:not(:disabled) { filter: brightness(.9); }

.banner {
  padding: .6rem 1rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.banner.warn { border-color: var(--present); }

/* Toast */
#toast {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 4.5rem);
  transform: translate(-50%, -1rem);
  max-width: calc(100vw - 32px);
  padding: .7rem 1.1rem;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  text-align: center;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 10;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 40rem) {
  .board { --tile: min(3.8rem, calc((100dvh - 23rem) / var(--rows))); }
  .key { min-height: 3.6rem; }
}

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

/* ---------- Blazor ---------- */

/* Startbildschirm, bis die WebAssembly-App geladen ist */
.boot { flex: 1; display: grid; place-content: center; justify-items: center; gap: 1rem; }
/* Das Logo dreht sich beim Laden wie eine Kachel, die aufgedeckt wird */
.boot .logo { width: 72px; height: 72px; animation: logo-flip 1.8s ease-in-out infinite; }
@keyframes logo-flip { 0%, 45% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }

/* Container der Spielansicht nimmt Tastatureingaben entgegen */
/* Die Spielansicht ist genau so hoch wie der sichtbare Bereich (100dvh, ohne Safaris Leisten).
   Mit nur einer Mindesthöhe wird die Seite länger als der Bildschirm, und auf iOS liegt die
   Browser-Navigation über der untersten Tastaturreihe. */
#app:has(.game-shell) { height: 100dvh; min-height: 0; overflow: hidden; }
html:has(.game-shell), html:has(.game-shell) body { overscroll-behavior: none; }
.game-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.game-shell:focus { outline: none; }

a.btn { text-decoration: none; color: inherit; }
a.btn-primary { color: var(--accent-text); }

#blazor-error-ui {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--danger);
  color: #fff;
  z-index: 20;
}
#blazor-error-ui a { color: inherit; font-weight: 700; margin-left: .5rem; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* ---------- Lobby: Freunde ---------- */
.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--border-strong); margin-right: .45rem; vertical-align: middle; }
.dot.online { background: var(--correct); }
.friend-picks { display: flex; flex-wrap: wrap; gap: .4rem; }
.friend-pick {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .3em .9em;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
}
.friend-pick[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.small { min-height: 36px; padding: .3em .8em; font-size: .875rem; }

/* ---------- Ergebnis: Rangliste ---------- */
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; width: 100%; max-width: 22rem; justify-self: center; text-align: left; }
.ranking li { display: grid; grid-template-columns: 2rem 1fr auto; gap: .5rem; align-items: baseline; padding: .4rem .7rem; border-radius: 8px; background: var(--surface-2); }
.ranking li.me { box-shadow: inset 0 0 0 2px var(--accent); }
.ranking .place { font-weight: 800; }
.ranking .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boards-final { flex-wrap: wrap; }

/* ---------- Turnier: Zwischenstand ---------- */
.standings-wrap { width: 100%; overflow-x: auto; }
.standings { width: 100%; border-collapse: separate; border-spacing: 0 .3rem; font-variant-numeric: tabular-nums; }
.standings th { font-size: .75rem; font-weight: 700; color: var(--muted); padding: 0 .4rem; text-align: right; white-space: nowrap; }
.standings th .word { display: block; font-weight: 600; letter-spacing: .03em; }
.standings td { padding: .4rem; text-align: right; background: var(--surface-2); white-space: nowrap; }
.standings td:first-child { border-radius: 8px 0 0 8px; }
.standings td:last-child { border-radius: 0 8px 8px 0; }
.standings .place { font-weight: 800; font-family: var(--display); text-align: left; width: 2rem; }
.standings .name { text-align: left; font-weight: 700; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }
.standings .total { font-weight: 800; }
.standings tr.me td { box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
.standings tr.me td:first-child { box-shadow: inset 2px 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
.standings tr.me td:last-child { box-shadow: inset -2px 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
.countdown { margin: 0; font-weight: 600; }
.score .total-points { font-size: .75rem; color: var(--muted); }

/* ---------- Impressum / Datenschutz ---------- */
.prose { display: block; line-height: 1.6; }
.prose h2 { margin-bottom: .5rem; }
.prose h3 { font-size: 1rem; margin: 1.25rem 0 .35rem; }
.prose p, .prose ul { margin: 0 0 .6rem; }
.prose ul { padding-left: 1.2rem; }
.legal-links { margin: 0; }

/* ---------- Runde Schrift ---------- */
/* Fredoka für Marke, Überschriften, Kacheln, Tasten, Knöpfe und Punkte; Fließtext bleibt Systemschrift */
.brand, h1, h2, .tile, .key, .btn, .segmented button, .friend-pick, .score .points, .ranking .place { font-family: var(--display); }
.tile { border-radius: var(--tile-radius); font-weight: 600; }
.board.mini .tile { border-radius: 2px; }
.key { font-weight: 600; font-size: 1.1rem; }

/* ---------- Statistik ---------- */
.stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.stat-tiles > div { display: grid; justify-items: center; gap: .1rem; padding: .6rem .3rem; border-radius: 10px; background: var(--surface-2); text-align: center; }
.stat-tiles strong { font-family: var(--display); font-size: 1.6rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-tiles span { font-size: .75rem; color: var(--muted); }
.histogram { display: grid; gap: .3rem; }
.bar-row { display: grid; grid-template-columns: 1.2rem 1fr; align-items: center; gap: .5rem; }
.bar-label { font-family: var(--display); font-weight: 600; text-align: right; }
.bar { display: block; min-width: 1.8rem; padding: .15rem .5rem; border-radius: 6px; background: var(--correct); color: var(--correct-text); font-family: var(--display); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.record { font-family: var(--display); font-weight: 600; font-size: 1.1rem; white-space: nowrap; }
.record .lead { color: var(--correct); }
.record .behind { color: var(--accent); }