/* Doppelkopf-Kasse - dunkler Kartentisch. Gebaut fuer abends, fuer Daumen,
   fuer eine Hand am Bierglas. Grosse Ziele, hoher Kontrast, kein Geflacker. */

:root {
  --bg:        #0b1310;
  --bg-2:      #0e1814;
  --karte:     #16221d;
  --karte-2:   #1b2a23;
  --rand:      #24382f;
  --rand-hell: #2f4a3d;

  --gruen:     #34d399;
  --gruen-tief:#10b981;
  --gruen-glut:rgba(52, 211, 153, .16);

  --gold:      #fbbf24;
  --gold-glut: rgba(251, 191, 36, .14);
  --rot:       #f87171;
  --rot-glut:  rgba(248, 113, 113, .12);

  --text:      #eaf2ee;
  --text-2:    #93a89e;
  --text-3:    #64796f;

  --r:         14px;
  --r-gross:   20px;
  --schatten:  0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --federn:    cubic-bezier(.34, 1.4, .5, 1);
  --weich:     cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { background: var(--bg); }

body {
  margin: 0 auto;
  padding: 0 16px calc(120px + env(safe-area-inset-bottom));
  max-width: 640px;
  min-height: 100vh;
  background:
    radial-gradient(120% 60% at 50% -10%, #16302400 0%, transparent 60%),
    radial-gradient(90% 50% at 100% 0%, rgba(52,211,153,.07), transparent 55%),
    var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- Kopf ---------------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0 14px; margin-bottom: 18px;
  background: linear-gradient(var(--bg) 70%, transparent);
  backdrop-filter: blur(12px);
}
.kopf strong {
  font-size: 17px; font-weight: 650; letter-spacing: -.01em;
  background: linear-gradient(96deg, var(--text) 30%, var(--gruen));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kopf nav a {
  display: inline-block; padding: 7px 14px; margin-left: 8px;
  border: 1px solid var(--rand); border-radius: 999px;
  color: var(--gruen); text-decoration: none; font-size: 14px; font-weight: 550;
  transition: all .18s var(--weich);
}
.kopf nav a:active { transform: scale(.95); background: var(--gruen-glut); }

h2 { font-size: 18px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 12px; }
.klein { font-size: 13px; color: var(--text-2); font-weight: 400; letter-spacing: 0; }
.warnung { color: var(--gold); }

/* --- Flaechen ------------------------------------------------------------ */

.karte {
  background: linear-gradient(168deg, var(--karte-2), var(--karte));
  border: 1px solid var(--rand);
  border-radius: var(--r-gross);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--schatten);
  animation: auf .45s var(--federn) both;
}

@keyframes auf {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.karte:nth-of-type(2) { animation-delay: .06s; }
.karte:nth-of-type(3) { animation-delay: .12s; }

/* --- Statusleiste -------------------------------------------------------- */

.statuszeile {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; margin-bottom: 16px;
  border: 1px solid var(--rand-hell); border-radius: var(--r-gross);
  background: linear-gradient(120deg, #17372a, #12241d 60%);
  box-shadow: var(--schatten);
  font-size: 15px;
  animation: auf .45s var(--federn) both;
}
.statuszeile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.07) 45%, transparent 60%);
  transform: translateX(-100%);
  animation: streifen 5.5s ease-in-out 1s infinite;
}
@keyframes streifen { 0%,72% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.statuszeile strong { font-size: 19px; font-weight: 700; }
.statuszeile .kurs { color: var(--text-2); font-variant-numeric: tabular-nums; }
.statuszeile .bock {
  padding: 5px 13px; border-radius: 999px;
  background: var(--gold-glut); color: var(--gold);
  border: 1px solid rgba(251,191,36,.35);
  font-size: 13px; font-weight: 650; white-space: nowrap;
  animation: puls 2.1s ease-in-out infinite;
}
@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,.28); }
  50%      { box-shadow: 0 0 0 9px rgba(251,191,36,0); }
}

/* --- Schritte ------------------------------------------------------------ */

.schritt {
  margin-bottom: 22px;
  transition: opacity .3s var(--weich);
}
.schritt.versteckt { display: none; }
/* Erledigt heisst: die Frage tritt zurueck - die Antwort bleibt voll sichtbar.
   Den ganzen Schritt zu dimmen wuerde genau den Kontrast fressen, den man
   zum Gegenlesen braucht. */
.schritt.fertig .label { opacity: .5; }
.schritt.fertig .label, .label { transition: opacity .3s var(--weich); }

.label {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2); margin: 0 0 11px;
}
.label i {
  display: grid; place-items: center;
  width: 21px; height: 21px; flex: none;
  border-radius: 50%; border: 1px solid var(--rand-hell);
  font-style: normal; font-size: 11px; font-weight: 700;
  color: var(--text-3); transition: all .3s var(--federn);
}
.schritt.fertig .label i {
  background: var(--gruen-tief); border-color: var(--gruen-tief);
  color: #04150e; transform: scale(1.06);
}
.label .klein { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* --- Tischzeile ---------------------------------------------------------- */
/* Wer am Tisch sitzt, rechnet die App selbst aus. Das braucht keinen eigenen
   Schritt - nur eine Zeile zum Gegenlesen und einen Weg, sie zu korrigieren. */

.tischzeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 20px;
  border: 1px solid var(--rand); border-radius: var(--r);
  background: var(--bg-2);
  transition: border-color .2s var(--weich);
}
.tischlabel {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3);
}
.tischzeile strong {
  flex: 1 1 auto; min-width: 120px;
  font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.35;
}
.mini {
  margin-left: auto; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--rand-hell); background: transparent;
  color: var(--gruen); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: transform .16s var(--federn), background .2s;
}
.mini:active { transform: scale(.94); background: var(--gruen-glut); }
/* Zusatzzeilen: wer pausiert (heute da) und wer fehlt (gar nicht gekommen).
   Zwei verschiedene Dinge, deshalb zwei verschiedene Formulierungen. */
.nebenbei {
  flex-basis: 100%; font-size: 13px; color: var(--text-3);
}
.nebenbei:empty { display: none; }
.nebenbei.fehlend { color: var(--gold); opacity: .85; }
.tischzeile.offen { border-color: var(--gruen-tief); }
.tischzeile.fehlt { border-color: var(--gold); }

/* --- Kacheln ------------------------------------------------------------- */

.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }

.kachel {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 58px; padding: 8px 6px;
  border: 1px solid var(--rand); border-radius: var(--r);
  background: linear-gradient(170deg, #1d2c25, #16221d);
  color: var(--text-2); font: inherit; font-size: 15px; font-weight: 550;
  text-align: center; cursor: pointer; user-select: none;
  transition: transform .16s var(--federn), border-color .2s, color .2s, background .25s;
}
.kachel input { display: none; }
.kachel:active { transform: scale(.94); }

/* Gewaehlt = aufgedeckt: gefuellt, weisse Kante, leichter Glanz.
   Der Sprung zwischen an und aus muss auch bei Kneipenlicht sofort lesbar sein. */
/* Der Glanz gehoert IN den Hintergrund - als Overlay darueber wuerde er den
   Text auswaschen und genau den Kontrast fressen, um den es hier geht. */
.kachel.an, .wahl.an, .zahl.an, .soloart.an {
  background:
    linear-gradient(146deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 32%, rgba(255,255,255,0) 56%),
    linear-gradient(168deg, #7df8cd 0%, #45e2ae 50%, #23cf98 100%);
  border-color: #ffffff;
  color: #01251a; font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.6),
    0 0 32px rgba(69,226,174,.5),
    0 8px 20px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* --- Umschalter ---------------------------------------------------------- */

.zeile { display: flex; gap: 9px; }
.wahl {
  position: relative; overflow: hidden;
  flex: 1; min-height: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--rand); border-radius: var(--r);
  background: linear-gradient(170deg, #1d2c25, #16221d);
  color: var(--text-2); font: inherit; font-size: 15px; font-weight: 550; cursor: pointer;
  transition: transform .16s var(--federn), border-color .2s, color .2s, background .25s;
}
.wahl:active { transform: scale(.96); }
.wahl.warn.an {
  background:
    linear-gradient(146deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.06) 34%, rgba(255,255,255,0) 58%),
    linear-gradient(168deg, #fde68a 0%, #fbbf24 55%, #e09b08 100%);
  border-color: #ffffff; color: #2a1c02;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.55),
    0 0 30px rgba(251,191,36,.45),
    0 8px 20px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -14px 24px rgba(42,28,2,.16);
}
.wahl.warn.an .farbe { color: #b00d18; }

/* --- Zahlen -------------------------------------------------------------- */

.zahlen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.zahl {
  position: relative; overflow: hidden;
  min-height: 54px;
  border: 1px solid var(--rand); border-radius: var(--r);
  background: linear-gradient(170deg, #1d2c25, #16221d);
  color: var(--text); font: inherit; font-size: 19px; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: transform .16s var(--federn), border-color .2s, color .2s, background .25s;
}
.zahl:active { transform: scale(.9); }
.zahl.an { transform: scale(1.05); }
.zahlfrei {
  grid-column: span 2; min-height: 54px; text-align: center;
  border: 1px dashed var(--rand-hell); border-radius: var(--r);
  background: transparent; color: var(--text); font-size: 17px;
}

/* --- Formularfelder ------------------------------------------------------ */

button, input, select { font-family: inherit; }
input[type=tel], input[type=text], input[type=number], input[type=password], select {
  width: 100%; min-height: 52px; padding: 0 16px; margin-bottom: 12px;
  border: 1px solid var(--rand); border-radius: var(--r);
  background: var(--bg-2); color: var(--text); font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus {
  outline: none; border-color: var(--gruen-tief);
  box-shadow: 0 0 0 4px var(--gruen-glut);
}
.schmal { width: auto; flex: 1; margin-bottom: 0; }

/* --- Knoepfe ------------------------------------------------------------- */

/* Aktionsleiste: klebt am unteren Bildschirmrand, immer in Daumenreichweite.
   ACHTUNG: Sie muss direkt im <body> haengen. Steht sie in einem Element mit
   transform, animation, filter oder backdrop-filter - etwa in .karte - dann
   bezieht sich "fixed" auf dieses Element statt auf den Bildschirm, und die
   Leiste landet mitten im Formular und verdeckt die Schritte darunter.
   Genau das ist am 08.09.2026 auf dem Handy passiert. Der Knopf gehoert
   ueber form="spielForm" trotzdem zum Formular. */
.aktionsleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(11,19,16,0) 0%, var(--bg) 42%);
  backdrop-filter: blur(14px);
  pointer-events: none;
}
.aktionsleiste > * {
  display: block; width: 100%; max-width: 608px; margin: 0 auto;
  pointer-events: auto;
}
.aktionsleiste .haupt { margin-top: 0; }

.haupt {
  width: 100%; min-height: 58px; margin-top: 14px;
  border: 0; border-radius: 16px;
  background: linear-gradient(100deg, var(--gruen-tief), var(--gruen));
  color: #04150e; font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(16,185,129,.32), 0 1px 0 rgba(255,255,255,.18) inset;
  transition: transform .16s var(--federn), opacity .2s, box-shadow .25s;
}
.haupt:active { transform: scale(.97); }
.haupt:disabled {
  background: var(--karte-2); color: var(--text-3);
  box-shadow: none; cursor: not-allowed;
}
.haupt.bereit { animation: bereit .5s var(--federn); }
@keyframes bereit {
  0% { transform: scale(1); } 45% { transform: scale(1.03); } 100% { transform: scale(1); }
}

.zweit {
  min-height: 48px; padding: 0 20px;
  border: 1px solid var(--rand-hell); border-radius: var(--r);
  background: transparent; color: var(--gruen);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform .16s var(--federn), background .2s;
}
.zweit:active { transform: scale(.96); background: var(--gruen-glut); }
.leise {
  background: none; border: 0; color: var(--text-3);
  font-size: 14px; padding: 10px 0; cursor: pointer;
}
.leise:active { color: var(--rot); }
.untenlinks { margin: -4px 0 16px; text-align: center; }

/* --- Tabellen ------------------------------------------------------------ */

.bilanz { width: 100%; border-collapse: collapse; font-size: 15px; }
.bilanz th {
  text-align: left; padding-bottom: 9px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3);
}
.bilanz th:not(:first-child), .bilanz td:not(:first-child) { text-align: right; }
.bilanz td {
  padding: 11px 0; border-top: 1px solid var(--rand);
  font-variant-numeric: tabular-nums;
}
.bilanz tr td:first-child { font-weight: 550; }
.plus  { color: var(--gruen); font-weight: 600; }
.minus { color: var(--rot);   font-weight: 600; }

/* Balken unter den Ranglistenzeilen - reines CSS, keine Diagrammbibliothek. */
.balkenzeile td { padding: 0 0 10px; border-top: 0; }
.balken {
  display: block; height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, var(--gruen-tief), var(--gruen));
  animation: balkenauf .6s var(--weich) both;
}
.balken.neg { background: linear-gradient(90deg, #b04141, var(--rot)); }
@keyframes balkenauf { from { transform: scaleX(0); transform-origin: left; } }

.summe {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rand);
  color: var(--text-2); font-size: 14px;
}
.summe strong {
  font-size: 22px; font-weight: 700; color: var(--gruen);
  font-variant-numeric: tabular-nums;
}

/* --- Kennzahlen ---------------------------------------------------------- */

.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.kz {
  padding: 15px 12px; text-align: center;
  border: 1px solid var(--rand); border-radius: var(--r);
  background: linear-gradient(168deg, var(--karte-2), var(--karte));
  box-shadow: var(--schatten);
  animation: auf .45s var(--federn) both;
}
.kz:nth-child(2) { animation-delay: .07s; }
.kz:nth-child(3) { animation-delay: .14s; }
.kz span {
  display: block; margin-bottom: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3);
}
.kz strong { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kz:first-child strong { color: var(--gruen); }

/* --- Kasse --------------------------------------------------------------- */

.posten { padding: 16px 0; border-top: 1px solid var(--rand); }
.posten:first-of-type { border-top: 0; padding-top: 0; }
.postenkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.postenkopf strong { font-size: 16px; font-weight: 600; }
.faellig {
  color: var(--rot); font-weight: 650; font-variant-numeric: tabular-nums;
  padding: 4px 12px; border-radius: 999px;
  background: var(--rot-glut); border: 1px solid rgba(248,113,113,.3);
  font-size: 14px;
}
.wartet { color: var(--text-3); font-size: 14px; font-variant-numeric: tabular-nums; }

/* Der QR liegt nicht offen herum, sondern klappt einzeln auf - und der Name
   steht gross darueber. Das ist der Schutz gegen "falschen Code gescannt",
   ohne dass jemand etwas eintippen muss. */
.qr-block {
  margin-top: 14px; padding: 16px 14px;
  border: 1px solid var(--rand-hell); border-radius: var(--r);
  background: var(--bg-2);
  animation: auf .35s var(--federn) both;
}
.qr-block.versteckt { display: none; }
.qr-wer {
  margin: 0 0 4px; text-align: center; font-size: 15px; color: var(--text-2);
}
.qr-wer strong {
  display: block; font-size: 26px; font-weight: 700; color: var(--gruen);
  letter-spacing: -.01em; margin-bottom: 2px;
}
.qr-auf.an { border-color: var(--gruen-tief); background: var(--gruen-glut); }

.qr { margin: 16px 0 8px; display: flex; justify-content: center; }
.qr img, .qr canvas {
  padding: 12px; background: #fff; border-radius: var(--r);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  animation: auf .5s var(--federn) both;
}
.zahlzeile { display: flex; gap: 9px; margin-top: 12px; }
.kopierbar {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.75;
  background: var(--bg-2); border: 1px solid var(--rand);
  padding: 12px 14px; border-radius: var(--r); user-select: all; color: var(--text-2);
}
details summary { cursor: pointer; padding: 8px 0; color: var(--text-2); }
details[open] summary { color: var(--gruen); }

/* --- Meldungen ----------------------------------------------------------- */

.fehler, .hinweis {
  padding: 14px 16px; border-radius: var(--r); font-size: 15px;
  animation: auf .35s var(--federn) both;
}
.fehler  { background: var(--rot-glut);  color: var(--rot);  border: 1px solid rgba(248,113,113,.3); }
.hinweis { background: var(--gold-glut); color: var(--gold); border: 1px solid rgba(251,191,36,.3); }
.fehler a, .hinweis a { color: inherit; }
code {
  background: var(--bg-2); border: 1px solid var(--rand);
  padding: 2px 7px; border-radius: 6px; font-size: 13px; color: var(--gruen);
}

/* --- Franzoesisches Blatt ------------------------------------------------ */
/* Symbole nur dort, wo sie etwas bedeuten. Kein Dekor um des Dekors willen. */

.farbe { font-style: normal; line-height: 1; }
.farbe.rot     { color: #e5484d; }
.farbe.schwarz { color: var(--text); }

.signet {
  display: flex; gap: 5px; margin-top: 3px;
  font-size: 11px; line-height: 1; opacity: .75;
}

/* Sehr blasses Blatt im Hintergrund - gerade eben zu ahnen. */
body::before {
  content: "\2660\2665\2666\2663";
  position: fixed; top: -22px; right: -26px; z-index: -1;
  font-size: 170px; letter-spacing: -40px; line-height: 1;
  color: var(--gruen); opacity: .028; pointer-events: none;
  transform: rotate(-12deg);
}

.soloarten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 12px; }
.soloart {
  position: relative; overflow: hidden;
  min-height: 52px; padding: 6px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid var(--rand); border-radius: var(--r);
  background: linear-gradient(170deg, #1d2c25, #16221d);
  color: var(--text-2); font: inherit; font-size: 12px; font-weight: 550; cursor: pointer;
  transition: transform .16s var(--federn), border-color .2s, color .2s, background .25s;
}
.soloart .farbe { font-size: 20px; }
.soloart:active { transform: scale(.94); }
.soloart.an .farbe.rot     { color: #b00d18; }
.soloart.an .farbe.schwarz { color: #04150e; }

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