/* Skat am Küchentisch — Filztisch, Turnierbild-Karten, wechselbare Umgebungen. */

:root {
  --filz: #1d6b45;
  --filz-dunkel: #134a30;
  --umgebung: linear-gradient(160deg, #0f3d2a, #0a2a1d);
  --text-hell: #f4f1e8;
  --text-leise: rgba(244, 241, 232, 0.72);
  --gold: #e0b03c;
  --gold-dunkel: #b58718;
  --papier: #fffdf8;
  --tinte: #1f2421;
  --tinte-leise: #5d655f;
  --rot: #c8102e;
  --kreuz: #141414;
  --pik: #157a3c;
  --herz: #c8102e;
  --karo: #d68a00;
  --kb: clamp(54px, min(12vw, 14vh), 112px);
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titel: Georgia, "Times New Roman", serif;
  color-scheme: light;
}

body.kb-klassisch { --pik: #141414; --karo: #c8102e; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--schrift);
  background: #1b120b;
  color: var(--text-hell);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; }
#app { min-height: 100dvh; display: flex; flex-direction: column; }
.laden { text-align: center; padding: 40vh 16px; }

/* ---------- Knöpfe ---------- */
.knopf {
  min-height: 44px; padding: 10px 16px; border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12); background: rgba(255, 255, 255, 0.94); color: var(--tinte);
  font-weight: 600; cursor: pointer; transition: transform 150ms, background 150ms, box-shadow 150ms;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.knopf:hover:not(:disabled) { transform: translateY(-1px); }
.knopf:active:not(:disabled) { transform: translateY(1px); }
.knopf:disabled { opacity: 0.45; cursor: default; }
.knopf.primaer { background: var(--gold); border-color: var(--gold-dunkel); color: #1d1606; }
.knopf.gross { width: 100%; padding: 16px; font-size: 1.1rem; }
.knopf.gross small { display: block; font-weight: 400; opacity: 0.75; }
.knopf.leise { background: rgba(0, 0, 0, 0.22); color: var(--text-hell); border-color: rgba(255, 255, 255, 0.25); box-shadow: none; }
.knopf.rund { width: 44px; padding: 0; font-size: 1.2rem; }
.knopf.klein { min-height: 32px; padding: 4px 10px; font-size: 0.85rem; }
.knopf.warn { color: var(--rot); }
.knopf.reizwert { background: rgba(255, 255, 255, 0.82); }
.dialog .knopf.leise { background: transparent; color: var(--tinte); border-color: #d6d0c2; }

/* ---------- Start ---------- */
.start { width: 100%; max-width: 640px; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 16px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.start-kopf { text-align: center; padding: 12px 0 4px; }
.start-kopf h1 { font-family: var(--titel); font-size: clamp(2rem, 6vw, 2.8rem); margin: 6px 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.start-kopf p { margin: 0; color: var(--text-leise); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }
.logo { display: inline-flex; gap: 6px; font-size: 1.6rem; background: var(--papier); padding: 6px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.logo .f-c { color: var(--kreuz); } .logo .f-s { color: var(--pik); } .logo .f-h { color: var(--herz); } .logo .f-d { color: var(--karo); }
.karte-box { background: var(--papier); color: var(--tinte); border-radius: 16px; padding: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.karte-box h2 { margin: 0; font-family: var(--titel); font-size: 1.25rem; }
.feld { display: grid; gap: 6px; }
.feld > span { font-size: 0.85rem; color: var(--tinte-leise); font-weight: 600; }
/* Lange Optionstexte dürfen die Seite nicht verbreitern (Handy). */
.feld select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.feld input, .feld select { min-height: 44px; border: 1px solid #d6d0c2; border-radius: 10px; padding: 8px 12px; font: inherit; background: #fff; color: var(--tinte); }
.umschalter { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.umschalter button { min-height: 52px; border-radius: 12px; border: 2px solid #ddd6c6; background: #fff; color: var(--tinte); font-weight: 700; cursor: pointer; transition: border-color 150ms, background 150ms; }
.umschalter button small { display: block; font-weight: 400; color: var(--tinte-leise); }
.umschalter button.aktiv { border-color: var(--gold-dunkel); background: #fff6dc; }
.umschalter.klein button { min-height: 44px; }
.spielerzeile { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: end; }
.fotowahl { cursor: pointer; }
.fotowahl .foto { width: 64px; height: 64px; }
.regelhinweis { margin: 0; font-size: 0.9rem; color: var(--tinte-leise); background: #f5f1e6; padding: 10px 12px; border-radius: 10px; }
.mehr summary { cursor: pointer; font-weight: 600; color: var(--tinte-leise); padding: 6px 0; }
.haken { display: flex; gap: 10px; align-items: center; min-height: 40px; cursor: pointer; }
.haken input { width: 20px; height: 20px; accent-color: var(--gold-dunkel); }
.tischwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.fuss { text-align: center; font-size: 0.85rem; color: var(--text-leise); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }

/* ---------- Fotos ---------- */
.foto { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #e7dfcc center / cover no-repeat; border: 3px solid #fffdf8; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); flex: none; }
.foto.initial { background: linear-gradient(145deg, #f4ead2, #d9c9a3); color: #4a3d22; font-weight: 800; font-size: 1.4rem; font-family: var(--titel); }
.foto.klein { width: 36px; height: 36px; font-size: 1rem; border-width: 2px; }
.foto.gross { width: 96px; height: 96px; font-size: 2.4rem; }

/* ---------- Kopfleiste ---------- */
.leiste {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px);
}
.spielnr { font-weight: 700; }
.spielnr .kurz { display: none; }
.stand { display: flex; gap: 14px; flex: 1; justify-content: center; flex-wrap: wrap; font-size: 0.95rem; }
.stand b { color: var(--gold); margin-left: 4px; }
.stand b.minus { color: #ff9b8f; }
.leiste-knoepfe { display: flex; gap: 6px; }

/* ---------- Karten ---------- */
.karte {
  position: relative; flex: none; width: var(--kb); height: calc(var(--kb) * 1.5);
  border-radius: calc(var(--kb) * 0.08); background: linear-gradient(160deg, #ffffff, #f5f0e3);
  border: 1px solid #cfc6b0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); user-select: none; overflow: hidden;
  font-family: var(--titel);
}
.karte.f-c { color: var(--kreuz); } .karte.f-s { color: var(--pik); } .karte.f-h { color: var(--herz); } .karte.f-d { color: var(--karo); }
.karte .ecke { position: absolute; display: grid; justify-items: center; line-height: 0.95; font-size: calc(var(--kb) * 0.2); }
.karte .ecke b { font-weight: 700; letter-spacing: -0.04em; }
.karte .ecke i { font-style: normal; font-size: 0.85em; }
.karte .ecke.oben { top: 4%; left: 5%; }
.karte .ecke.unten { bottom: 4%; right: 5%; transform: rotate(180deg); }
.karte .pip { position: absolute; font-style: normal; font-size: calc(var(--kb) * 0.22); transform: translate(-50%, -50%); line-height: 1; }
.karte .pip.kopf { transform: translate(-50%, -50%) rotate(180deg); }
.karte .ass { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: calc(var(--kb) * 0.62); }
.karte .bild {
  position: absolute; inset: 17% 18%; display: grid; grid-template-rows: 1fr auto 1fr; place-items: center;
  border: 1.5px solid currentColor; border-radius: calc(var(--kb) * 0.05);
  background: linear-gradient(180deg, color-mix(in srgb, currentColor 10%, #fff8e6), color-mix(in srgb, currentColor 22%, #fff8e6));
}
.karte .bild b { font-size: calc(var(--kb) * 0.3); line-height: 1; }
.karte .bild b.kopf { transform: rotate(180deg); }
.karte .bild i { font-style: normal; font-size: calc(var(--kb) * 0.26); line-height: 1; }
.karte.w-J .bild { background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 26%, #fff8e6), color-mix(in srgb, currentColor 18%, #fff8e6)); }
.karte.rueckseite {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.14) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.14) 0 3px, transparent 3px 9px),
    linear-gradient(160deg, #9b1c2c, #5e0f1b);
  border: calc(var(--kb) * 0.05) solid #fff8ec;
}
.karte.mini { --kb: 34px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.karte.mini .pip, .karte.mini .ass, .karte.mini .bild, .karte.mini .ecke.unten { display: none; }
.karte.mini .ecke.oben { inset: 0; place-content: center; font-size: 15px; gap: 1px; }
.karte.mini.w-J { background: linear-gradient(160deg, #fff6d8, #f3e2b0); }

/* ---------- Überlagerungen ---------- */
.overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(8, 18, 12, 0.6); backdrop-filter: blur(4px); animation: einblenden 200ms ease-out; }
.overlay.wechsel { background: #0b2017; animation: none; backdrop-filter: none; }
@keyframes einblenden { from { opacity: 0; } }
.dialog {
  width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--papier); color: var(--tinte);
  border-radius: 18px; padding: 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); display: grid; gap: 12px; justify-items: stretch;
}
.dialog.breit { width: min(880px, 100%); }
.dialog h2 { margin: 0; font-family: var(--titel); font-size: 1.4rem; }
.dialog h3 { margin: 8px 0 0; font-size: 1rem; color: var(--tinte-leise); text-transform: uppercase; letter-spacing: 0.04em; }
.dialog p { margin: 0; line-height: 1.5; }
.wechsel .dialog { justify-items: center; text-align: center; }
.knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.knopfreihe .knopf { flex: 1 1 180px; }
.menue { display: grid; gap: 8px; }
.grund { font-weight: 600; }
.rechnung { color: var(--tinte-leise); }
.skat-zeige, .karten-reihe { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.skat-zeige span { font-weight: 600; margin-right: 6px; }
.blattstaerke { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; }
.blattstaerke span { padding: 3px 10px; border-radius: 999px; background: #efe9da; }
.stufe-stark { color: #11713a; font-weight: 700; }
.stufe-schwach { color: #a3341f; }
.blattstaerke .stufe-stark { background: #dcf3e2; }
.blattstaerke .stufe-schwach { background: #f8e0d9; }
.pruefung { font-size: 0.9rem; padding: 8px 12px; border-radius: 10px; background: #f2efe6; }
.pruefung.ok { background: #e3f4e8; color: #11592f; }
.pruefung.fehler { background: #fbe1dc; color: #8b1d0c; font-weight: 700; }
.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabelle th, .tabelle td { padding: 7px 8px; border-bottom: 1px solid #ebe5d6; text-align: left; vertical-align: top; }
.tabelle th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tinte-leise); }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle.liste td small { display: block; color: var(--tinte-leise); font-size: 0.8rem; }
.tabelle tfoot td { border-top: 2px solid var(--tinte); border-bottom: 0; }
.tabelle tr.klickbar { cursor: pointer; }
.tabelle tr.klickbar:hover { background: #faf5e8; }
.tabelle tr.verlierer td { color: #a3341f; font-weight: 700; }
.tabelle td.gewinner { background: #fff1c9; font-weight: 700; }
.tabelle .leer { text-align: center; color: var(--tinte-leise); padding: 18px; }
.kk { font-weight: 800; font-family: var(--titel); }
.kk.f-c { color: var(--kreuz); } .kk.f-s { color: var(--pik); } .kk.f-h { color: var(--herz); } .kk.f-d { color: var(--karo); }
.hinweistext { font-size: 0.86rem; color: var(--tinte-leise); }
.technik { font-family: ui-monospace, monospace; font-size: 0.75rem; word-break: break-all; color: var(--tinte-leise); }
.verlauf-kopf { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; align-items: center; text-align: center; }
.verlauf-kopf h2 { font-size: 1.15rem; }
.verlauf-hand { display: grid; gap: 4px; }
.verlauf-hand small { color: var(--tinte-leise); }
.endstand { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.endstand li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: #f4efe2; font-size: 1.1rem; }
.endstand li.sieger { background: #fff1c9; box-shadow: 0 0 0 2px var(--gold); font-weight: 800; }
.hinweis { position: fixed; left: 50%; bottom: 24px; translate: -50% 20px; z-index: 30; background: #1f2421; color: #fff; padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity 200ms, translate 200ms; }
.hinweis.sichtbar { opacity: 1; translate: -50% 0; }

/* ---------- Handy hochkant ---------- */
@media (max-width: 760px) {
  .leiste { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .leiste .knopf.rund { width: 38px; min-height: 38px; }
  .spielnr { flex: 1; }
  .spielnr .lang { display: none; }
  .spielnr .kurz { display: inline; }
  .leiste-knoepfe .knopf { min-height: 38px; padding: 6px 9px; font-size: 0.85rem; }
  .stand { order: 3; flex-basis: 100%; gap: 10px; font-size: 0.88rem; }
}
@media (max-width: 520px) {
  .tabelle .neben { display: none; }
  .tabelle th, .tabelle td { padding: 6px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}