@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --seite: #e3e0e7;
  --seite-2: #d6d1dd;
  --tinte: #2a2140;
  --tinte-2: #5c5270;
  --knopf: #f4f2f6;
  --knopf-rand: #b6adc4;
  --knopf-druck: #e6e1ec;
  --kupfer: #a9522a;
  --kupfer-hell: #d97f45;
  --kupfer-text: #fff7ef;
  --raum: #161329;
  --raum-rand: #3a3152;
  --stick: rgb(42 33 64 / 0.34);
  --stick-zone: rgb(42 33 64 / 0.05);
  --fokus: #a9522a;
  --stick-r: 54px;
  --sicher-l: env(safe-area-inset-left, 0px);
  --sicher-r: env(safe-area-inset-right, 0px);
  --sicher-o: env(safe-area-inset-top, 0px);
  --sicher-u: env(safe-area-inset-bottom, 0px);
  --display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --text: 'Figtree', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --seite: #14111c;
    --seite-2: #1c1827;
    --tinte: #ece6f4;
    --tinte-2: #a69db6;
    --knopf: #221d2f;
    --knopf-rand: #3e3552;
    --knopf-druck: #2c2540;
    --kupfer: #d97f45;
    --kupfer-hell: #f0a46c;
    --kupfer-text: #1b1208;
    --raum: #100e1f;
    --raum-rand: #2c2540;
    --stick: rgb(236 230 244 / 0.3);
    --stick-zone: rgb(236 230 244 / 0.04);
    --fokus: #f0a46c;
  }
}

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

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "kopf" "leiste" "tisch" "fuss";
  height: 100dvh;
  padding: calc(6px + var(--sicher-o)) calc(12px + var(--sicher-r)) calc(2px + var(--sicher-u)) calc(12px + var(--sicher-l));
  background: var(--seite);
  color: var(--tinte);
  font: 400 15px/1.4 var(--text);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.kopf {
  grid-area: kopf;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 16px;
  width: 100%;
}

.titel {
  margin: 0;
  font: 800 30px/1.05 var(--display);
  letter-spacing: -0.02em;
  font-variation-settings: 'wdth' 85;
}

.status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  margin: 0;
  color: var(--tinte-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.wert { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.zahl { font: 800 24px/1 var(--display); color: var(--tinte); }
.zahl-klein { font: 800 16px/1 var(--display); color: var(--tinte); }

#leben { align-items: center; gap: 2px; align-self: center; }
#leben svg { width: 16px; height: 16px; display: block; }
#leben .flosse { fill: var(--kupfer); }
#leben .leer { opacity: 0.25; }

.leiste {
  grid-area: leiste;
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 8px 0;
}

.knopf {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--knopf-rand);
  border-radius: 999px;
  background: var(--knopf);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.knopf:active { background: var(--knopf-druck); }
.knopf[aria-pressed="true"] { background: var(--tinte); color: var(--seite); border-color: var(--tinte); }
.knopf-voll { background: var(--kupfer); border-color: var(--kupfer); color: var(--kupfer-text); }
.knopf-voll:active { background: var(--kupfer-hell); }

.tisch {
  grid-area: tisch;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "f";
  min-height: 0;
  gap: 8px;
}

.feld-platz {
  grid-area: f;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.feld {
  position: relative;
  width: 300px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--raum);
  box-shadow: 0 0 0 1px var(--raum-rand), 0 10px 28px -14px rgb(22 19 41 / 0.6);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#leinwand { display: block; width: 100%; height: 100%; }

.meldung {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  color: #f3eef8;
  background: rgb(16 14 31 / 0.62);
  backdrop-filter: blur(2px);
}
.meldung[hidden] { display: none; }
.meldung h2 { margin: 0; font: 800 40px/1 var(--display); letter-spacing: -0.02em; color: #f6d9b8; }
.meldung p { margin: 0; max-width: 32ch; }
.meldung .meldung-tipp { font-size: 13px; color: #c9bfd8; }
.meldung .knopf { margin-top: 10px; min-width: 150px; }

.bedien {
  display: none;
  position: relative;
  min-width: 0;
  min-height: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.bedien-a { grid-area: a; }
.bedien-b { grid-area: b; }

body.lage-hoch .bedien, body.lage-quer .bedien { display: block; }

body.lage-hoch .tisch {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 164px;
  grid-template-areas: "f f" "a b";
}
body.lage-hoch.tausch .tisch { grid-template-areas: "f f" "b a"; }

body.lage-quer {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "kopf leiste" "tisch tisch" "fuss fuss";
  padding-top: calc(4px + var(--sicher-o));
  column-gap: 12px;
}
body.lage-quer .kopf { justify-content: flex-start; align-items: center; margin: 0; flex-wrap: nowrap; }
body.lage-quer .titel { font-size: 21px; }
body.lage-quer .zahl { font-size: 19px; }
body.lage-quer .status { gap: 10px; font-size: 13px; }
body.lage-quer .leiste { padding: 4px 0; }
body.lage-quer .leiste .knopf { padding: 6px 12px; }
body.lage-quer .tisch {
  grid-template-columns: minmax(132px, 1fr) minmax(0, 3.6fr) minmax(132px, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "a f b";
  padding-top: 4px;
}
body.lage-quer.tausch .tisch { grid-template-areas: "b f a"; }

.stick-zone, .feuer-zone, .knopfpaar {
  position: absolute;
  inset: 0;
  border-radius: 18px;
}
.stick-zone, .feuer-zone, .knopfpaar { background: var(--stick-zone); touch-action: none; }

.stick-basis {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(2 * var(--stick-r));
  height: calc(2 * var(--stick-r));
  margin: calc(-1 * var(--stick-r)) 0 0 calc(-1 * var(--stick-r));
  border: 2px solid var(--stick);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.7;
}
.stick-schubring {
  position: absolute;
  inset: 50%;
  width: var(--stick-r);
  height: var(--stick-r);
  margin: calc(-0.5 * var(--stick-r)) 0 0 calc(-0.5 * var(--stick-r));
  border: 1.5px dashed var(--stick);
  border-radius: 50%;
}
.stick-knauf {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: var(--knopf);
  border: 2px solid var(--knopf-rand);
  box-shadow: 0 3px 8px -3px rgb(0 0 0 / 0.35);
}
.stick-zone.aktiv .stick-basis { opacity: 1; }
.stick-zone.aktiv .stick-knauf { background: var(--tinte-2); border-color: var(--tinte-2); }
.stick-zone.schub .stick-knauf { background: var(--kupfer); border-color: var(--kupfer); }
.stick-zone.schub .stick-basis { border-color: var(--kupfer); }

.knopfpaar, .feuer-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.halteknopf {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  padding: 0;
  border: 2px solid var(--knopf-rand);
  border-radius: 50%;
  background: var(--knopf);
  cursor: pointer;
  touch-action: none;
}
.halteknopf svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.halteknopf svg .voll { fill: currentColor; stroke: none; }
.halteknopf.feuer { width: 92px; height: 92px; border-color: var(--kupfer); color: var(--kupfer); }
.halteknopf.feuer svg { width: 40px; height: 40px; }
.halteknopf.gedrueckt { background: var(--tinte); color: var(--seite); border-color: var(--tinte); }
.halteknopf.feuer.gedrueckt, .feuer-zone.gedrueckt .feuer { background: var(--kupfer); color: var(--kupfer-text); border-color: var(--kupfer); }

body.modus-zielen .knopfpaar, body.modus-zielen #k-schub { display: none; }
body.modus-klassisch .stick-zone { display: none; }
body.lage-quer.modus-klassisch .knopfpaar, body.lage-quer.modus-klassisch .feuer-zone { flex-direction: column; }

.fuss {
  grid-area: fuss;
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 4px 0 2px;
  font-size: 12px;
  color: var(--tinte-2);
}
.teilen {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
body.lage-quer .fuss { padding: 2px 0 0; }

.wahl {
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 18px 20px;
  border: 1px solid var(--knopf-rand);
  border-radius: 16px;
  background: var(--seite);
  color: var(--tinte);
}
.wahl::backdrop { background: rgb(16 14 31 / 0.5); }
.wahl h2 { margin: 0 0 10px; font: 800 26px/1.1 var(--display); }
.wahl-gruppe { margin: 0 0 12px; padding: 0; border: 0; }
.wahl-gruppe legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.wahl-hinweis { margin: 6px 0 0; font-size: 13px; color: var(--tinte-2); }
.pillen { display: flex; flex-wrap: wrap; gap: 6px; }
.pille { position: relative; }
.pille input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pille span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--knopf-rand);
  border-radius: 999px;
  background: var(--knopf);
}
.pille input:checked + span { background: var(--tinte); color: var(--seite); border-color: var(--tinte); }
.pille input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 2px; }
.schalter { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-weight: 600; }
.schalter input { width: 22px; height: 22px; accent-color: var(--kupfer); }
.tasten { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 14px; font-size: 13px; color: var(--tinte-2); }
.tasten dt, .tasten dd { margin: 0; }
kbd {
  display: inline-block;
  min-width: 22px;
  padding: 0 5px;
  border: 1px solid var(--knopf-rand);
  border-radius: 5px;
  background: var(--knopf);
  font: 600 12px/20px var(--text);
  text-align: center;
  color: var(--tinte);
}
.wahl-aktionen { display: flex; justify-content: flex-end; }

.knopf-rund { flex: none; width: 40px; padding: 0 !important; font: 800 19px/1 var(--display); }

/* Anleitung: Kopf und Fuß stehen, der Text scrollt in sich. */
.anleitung {
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid var(--knopf-rand);
  border-radius: 16px;
  background: var(--seite);
  color: var(--tinte);
}
.anleitung[open] { display: flex; flex-direction: column; }
.anleitung::backdrop { background: rgb(16 14 31 / 0.55); }
.anleitung-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 10px 20px;
  border-bottom: 1px solid var(--knopf-rand);
}
.anleitung h2 { margin: 0; font: 800 26px/1.1 var(--display); letter-spacing: -0.01em; }
.anleitung-text {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 20px 14px;
  font-size: 15px;
}
.anleitung h3 { margin: 14px 0 4px; font: 800 19px/1.2 var(--display); color: var(--kupfer); }
.anleitung h4 { margin: 10px 0 2px; font-size: 15px; font-weight: 600; }
.anleitung p { margin: 4px 0; }
.anleitung ul { margin: 4px 0; padding-left: 20px; }
.anleitung li { margin: 3px 0; }
.anleitung li::marker { color: var(--kupfer); }
.anleitung strong { font-weight: 600; }
.anleitung .tasten { margin: 6px 0; font-size: 14px; }
.anleitung .ico {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.28em;
  fill: none;
  stroke: var(--kupfer);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.anleitung .ico .voll { fill: var(--kupfer); stroke: none; }
.stick-bild { margin: 6px 0 8px; }
.stick-bild svg { display: block; width: min(100%, 280px); margin: 0 auto; }
.stick-bild figcaption {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: min(100%, 300px);
  margin: 2px auto 0;
  font-size: 13px;
  color: var(--tinte-2);
  text-align: center;
}
.s-basis { fill: var(--stick-zone); stroke: var(--stick); stroke-width: 2; }
.s-basis.schub { stroke: var(--kupfer); }
.s-ring { fill: none; stroke: var(--stick); stroke-width: 1.5; stroke-dasharray: 4 4; }
.s-pfeil { stroke: var(--tinte-2); stroke-width: 2; stroke-linecap: round; }
.s-knauf { fill: var(--knopf); stroke: var(--knopf-rand); stroke-width: 2; }
.s-knauf.schub { fill: var(--kupfer); stroke: var(--kupfer); }
.anleitung-fuss {
  display: flex;
  justify-content: flex-end;
  padding: 10px 20px 14px;
  border-top: 1px solid var(--knopf-rand);
}

/* Meldung nach dem Teilen und Ersatzfeld, wenn nichts kopiert werden kann. */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(34px + var(--sicher-u));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 9px 16px;
  border-radius: 12px;
  background: var(--tinte);
  color: var(--seite);
  font-size: 14px;
  text-align: center;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms;
  z-index: 5;
}
.toast.zeigen { opacity: 1; }
.linkfeld {
  position: fixed;
  left: 50%;
  bottom: calc(30px + var(--sicher-u));
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  width: min(420px, calc(100vw - 24px));
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--knopf);
  border: 1px solid var(--knopf-rand);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.3);
  font-size: 13px;
  z-index: 5;
}
.linkfeld[hidden] { display: none; }
.linkfeld label { flex-basis: 100%; font-weight: 600; }
.linkfeld input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  font: inherit;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--knopf-rand);
  background: var(--seite);
  color: var(--tinte);
}
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
@media (max-height: 500px) {
  .anleitung-kopf { padding: 6px 12px 6px 20px; }
  .anleitung h2 { font-size: 21px; }
  .anleitung-fuss { padding: 6px 20px 8px; }
}

@media (max-width: 420px) {
  .titel { font-size: 26px; }
  .status { gap: 10px; font-size: 13px; }
  .zahl { font-size: 21px; }
  .leiste { padding: 6px 0; }
  .leiste .knopf { padding: 8px 10px; }
}
@media (max-width: 370px) {
  .leiste { gap: 6px; }
  .leiste .knopf { padding: 8px 8px; }
}

body.lage-hoch.modus-klassisch .feuer-zone, body.lage-hoch.modus-klassisch .knopfpaar { gap: 10px; }
body.lage-hoch.modus-klassisch .halteknopf.feuer { width: 80px; height: 80px; }