/* ==========================================================================
   Tischlein — theme.css
   Design-Tokens + gemeinsame Formensprache für Host- UND Spieler-App:
   Karten (.tcard…), Pill-Buttons, Papier-Modals mit Holz-Akzent,
   Bottom-Sheets, Toasts, Spielerfarben-Palette.
   ========================================================================== */

/* Fredoka wird in den HTML-Dateien per <link> geladen (preconnect + stylesheet) —
   ein @import hier wäre render-blockierend und doppelt. */

/* --------------------------------------------------------------------------
   Design-Tokens
   -------------------------------------------------------------------------- */
:root{
  --wood:#6f4a26; --wood-dark:#4e3115; --wood-light:#8a6136;
  --felt:#1e6b52; --felt-glow:#2a8a68; --felt-dark:#11432f;
  --gold:#f2b544; --cream:#faf3e3; --paper:#fffdf6;
  --ink:#26313b; --red:#d5484a; --black:#2e2e38; --muted:#8b93a1;
  --bg:#171412;
  --ok:#2ba14f;          /* Online-Grün (dunkler Hintergrund, Spieler-App) */
  --ok-glow:#58e08a;     /* Online-Grün mit Leuchten (auf Filz, Host-App)  */
  --danger-deep:#7a2b2b; /* tiefes Warn-Rot (Netz-Banner)                  */
  --grad-gold:linear-gradient(180deg,#ffd077 0%,var(--gold) 55%,#e0a02e 100%);
  --radius:16px; --radius-s:10px;
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --card-w:76px;               /* Host-Tisch; Spieler-Hand nutzt eigene Größe */
  --font:'Fredoka',system-ui,sans-serif;

  /* Spielerfarben (12): kräftig, auf Filz UND Creme lesbar */
  --pc0:#e0453c;   /* Kirschrot   */
  --pc1:#ef7d22;   /* Orange      */
  --pc2:#d9a520;   /* Goldocker   */
  --pc3:#7db520;   /* Limette     */
  --pc4:#2ba14f;   /* Wiesengrün  */
  --pc5:#17a3a3;   /* Türkis      */
  --pc6:#2e8fdd;   /* Himmelblau  */
  --pc7:#4a5fd7;   /* Kornblume   */
  --pc8:#7c53d6;   /* Veilchen    */
  --pc9:#b44bc9;   /* Flieder     */
  --pc10:#e04a9b;  /* Pink        */
  --pc11:#a8672d;  /* Kupfer      */
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{ font-family:inherit; }

:focus-visible{ outline:3px solid rgba(242,181,68,.65); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important; /* Endlos-Animationen wirklich stoppen */
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* --------------------------------------------------------------------------
   Pill-Buttons — Gold/Creme, identisch in beiden Apps
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45em;
  font:inherit; font-weight:600; font-size:1rem; line-height:1.15;
  border:none; border-radius:999px;
  padding:.62em 1.35em;
  background:var(--cream); color:var(--ink);
  box-shadow:0 2px 10px rgba(0,0,0,.28), inset 0 -2px 0 rgba(0,0,0,.08);
  cursor:pointer; user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform:translateY(1px) scale(.97); box-shadow:0 1px 4px rgba(0,0,0,.3); }
.btn:disabled{ opacity:.45; cursor:default; transform:none; filter:none; }

.btn--gold{
  background:var(--grad-gold);
  color:#4a3208;
  box-shadow:0 2px 12px rgba(242,181,68,.35), inset 0 -2px 0 rgba(0,0,0,.14);
}
.btn--ghost{
  background:rgba(250,243,227,.1); color:var(--cream);
  box-shadow:inset 0 0 0 1.5px rgba(250,243,227,.4);
}
.btn--danger{ background:var(--red); color:#fff; }
.btn--small{ font-size:.85rem; padding:.42em 1em; min-height:44px; } /* Touch-Target ≥ 44px */
.btn--big{ font-size:1.12rem; padding:.72em 1.6em; }
.btn--round{ width:2.9em; height:2.9em; padding:0; border-radius:50%; }

/* Kleine Pill-Badges (z. B. Kartenanzahl, Raumcode) */
.pill{
  display:inline-flex; align-items:center; gap:.35em;
  border-radius:999px; padding:.25em .75em;
  font-weight:600; font-size:.85em;
  background:rgba(250,243,227,.14); color:var(--cream);
}

/* Text-Eingaben in Pill-Form (Join-Screen u. a.) */
.input{
  font:inherit; font-weight:500; font-size:1rem;
  border:2px solid rgba(38,49,59,.18); border-radius:999px;
  padding:.6em 1.1em;
  background:var(--paper); color:var(--ink);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(242,181,68,.3); }
.input::placeholder{ color:var(--muted); }

/* Modals: die Host-App nutzt .modal-box/.modal-kopf/… aus table.css —
   ein zweites, ungenutztes Modal-System lebte früher hier und wurde entfernt. */

/* --------------------------------------------------------------------------
   Bottom-Sheets (z. B. „📖 Regeln" in der Spieler-App)
   -------------------------------------------------------------------------- */
.sheet-backdrop{
  position:fixed; inset:0; z-index:110;
  background:rgba(12,10,8,.5);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  animation:t-fade-in .18s ease;
}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  /* Zwei Hintergrund-Ebenen: Holz-Akzent oben + Grab-Griff darunter —
     beide kleben am Element (scrollen nicht mit) und folgen dem Radius */
  background:
    linear-gradient(90deg,
      var(--wood-dark), var(--wood-light) 30%, var(--wood) 65%, var(--wood-dark))
      top center / 100% 8px no-repeat,
    linear-gradient(rgba(38,49,59,.22), rgba(38,49,59,.22))
      top 16px center / 46px 5px no-repeat,
    var(--paper);
  color:var(--ink);
  border-radius:var(--radius) var(--radius) 0 0;
  box-shadow:0 -10px 34px rgba(0,0,0,.45);
  max-height:80vh;
  overflow-y:auto; overscroll-behavior:contain;
  padding:34px 20px calc(20px + env(safe-area-inset-bottom,0px));
  animation:t-sheet-up .26s cubic-bezier(.3,1.25,.4,1);
}
.sheet-title{ margin:0 0 .55em; font-size:1.25rem; font-weight:600; }
.sheet p{ line-height:1.55; }

/* --------------------------------------------------------------------------
   Toasts — oben mittig, Pill-Form mit Goldrand
   -------------------------------------------------------------------------- */
.toasts{
  position:fixed; top:calc(14px + env(safe-area-inset-top,0px));
  left:50%; transform:translateX(-50%);
  z-index:200;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
  width:max-content; max-width:92vw;
}
.toast{
  background:rgba(23,20,18,.93); color:var(--cream);
  border:1.5px solid rgba(242,181,68,.55);
  border-radius:999px;
  padding:.55em 1.25em;
  font-weight:500; font-size:.95rem; text-align:center;
  max-width:min(92vw,440px);
  box-shadow:var(--shadow);
  animation:t-toast-in .28s cubic-bezier(.3,1.35,.4,1);
}
.toast--out{ animation:t-toast-out .25s ease forwards; }

/* --------------------------------------------------------------------------
   Animationen
   -------------------------------------------------------------------------- */
@keyframes t-fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes t-pop-in{
  from{ opacity:0; transform:scale(.9) translateY(14px); }
  to{ opacity:1; transform:none; }
}
@keyframes t-sheet-up{
  from{ transform:translateY(100%); }
  to{ transform:none; }
}
@keyframes t-toast-in{
  from{ opacity:0; transform:translateY(-14px) scale(.92); }
  to{ opacity:1; transform:none; }
}
@keyframes t-toast-out{
  from{ opacity:1; transform:none; }
  to{ opacity:0; transform:translateY(-10px) scale(.94); }
}

/* ==========================================================================
   .tcard — der Karten-Renderer (public/js/cards.js)
   Seitenverhältnis 5:7, Größe über --card-w (oder opts.w).
   Alles Innere skaliert über font-size in em.
   ========================================================================== */
.tcard{
  position:relative; flex:none;
  width:var(--card-w,76px);
  aspect-ratio:5/7;
  font-size:calc(var(--card-w,76px)/10);
  font-family:var(--font);
  background:var(--paper); color:var(--ink);
  border-radius:.9em;
  box-shadow:0 .2em .55em rgba(0,0,0,.32), inset 0 0 0 1px rgba(38,49,59,.08);
  overflow:hidden;
  user-select:none; -webkit-user-select:none;
}
/* Innenleben soll Drag & Drop nie stören */
.tcard *{ pointer-events:none; }

/* ---- Ecken-Indizes (unten rechts um 180° gedreht) ---- */
.tcard-corner{
  position:absolute;
  display:flex; flex-direction:column; align-items:center;
  gap:.08em; line-height:1; font-weight:600;
}
.tcard-corner--tl{ top:.55em; left:.5em; }
.tcard-corner--br{ bottom:.55em; right:.5em; transform:rotate(180deg); }
.tcard-corner-rank{ font-size:1.5em; letter-spacing:-.03em; }
.tcard-corner-suit{ font-size:1.1em; }

/* ---- Zentrumssymbol ---- */
.tcard-center{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
  font-size:3.4em;
}
.tcard-center--ace{ font-size:4.3em; filter:drop-shadow(0 .02em .05em rgba(0,0,0,.22)); }
.tcard-center--emoji{ font-size:3.1em; }
.tcard-center--lift{ transform:translateY(-11%); }

/* ---- Französisches Blatt: Rot/Schwarz ---- */
.tcard--red{ --suitcol:var(--red); }
.tcard--black{ --suitcol:var(--black); }
.tcard--franz .tcard-corner,
.tcard--franz .tcard-center{ color:var(--suitcol,var(--black)); }

/* Hofkarten J/Q/K: Zierrahmen, goldenes Krönchen, stilisierter Buchstabe */
.tcard-court{
  position:absolute; inset:23% 19%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.08em; line-height:1;
  color:var(--suitcol,var(--black));
  border:.18em double currentColor;
  border-radius:.7em;
  background:linear-gradient(165deg, rgba(242,181,68,.18), rgba(242,181,68,.03) 65%);
}
.tcard-court-crown{
  font-size:1.75em; color:var(--gold);
  filter:drop-shadow(0 .04em .04em rgba(0,0,0,.3));
}
.tcard-court-letter{ font-size:2.9em; font-weight:600; }
.tcard-court-suit{ font-size:1.15em; }

/* Joker */
.tcard--joker .tcard-corner{ color:var(--gold); }
.tcard-joker{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35em; line-height:1;
}
.tcard-joker-face{ font-size:3.3em; filter:drop-shadow(0 .04em .08em rgba(0,0,0,.25)); }
.tcard-joker-word{
  font-size:.95em; font-weight:600;
  letter-spacing:.32em; text-indent:.32em; /* optisch zentriert */
  color:var(--red);
}

/* ---- Deutsches Blatt ---- */
.tcard--deutsch .tcard-corner{ color:var(--ink); }
.tcard--deutsch .tcard-corner-suit{ font-size:1em; }
.tcard-deutsch-rank{
  position:absolute; left:0; right:0; bottom:15%;
  text-align:center; line-height:1;
  font-size:1.7em; font-weight:600; color:var(--ink);
}

/* ---- Farbklassen für Uno + Elfer raus (--cc Fläche, --cc-deep Glyphen) ---- */
.tcard--col-r{ --cc:#e2423d; --cc-deep:#bf2823; }
.tcard--col-g{ --cc:#48a94c; --cc-deep:#2e8a33; }
.tcard--col-b{ --cc:#2079d4; --cc-deep:#155fa8; }
.tcard--col-y{ --cc:#f2c018; --cc-deep:#c28d00; }
.tcard--col-w{ --cc:#2b2b33; --cc-deep:#141419; }

/* ---- Uno: farbige Fläche mit weißem Rand + weiße Ellipse ---- */
.tcard--uno{
  background:var(--cc); /* Fallback ohne color-mix() */
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--cc) 82%, #fff) 0%, var(--cc) 45%, var(--cc-deep) 100%);
  border:.42em solid #fff;
  background-clip:padding-box;
}
.tcard--uno .tcard-corner{ color:#fff; text-shadow:0 .06em .1em rgba(0,0,0,.3); }
.tcard--uno.tcard--col-y .tcard-corner{ color:#6b4d00; text-shadow:none; }
.tcard-oval{
  position:absolute; inset:11% 15%;
  background:#fff;
  border-radius:50%;
  transform:rotate(-24deg);
  box-shadow:0 .12em .35em rgba(0,0,0,.22), inset 0 0 0 .1em rgba(0,0,0,.05);
}
.tcard-oval--wild{
  background:conic-gradient(#e2423d 0 25%, #2079d4 0 50%, #f2c018 0 75%, #48a94c 0);
  box-shadow:0 .12em .35em rgba(0,0,0,.3), inset 0 0 0 .16em #fff;
}
.tcard-center--uno{
  font-size:3.1em; font-weight:600;
  color:var(--cc-deep);
  text-shadow:.035em .05em 0 rgba(0,0,0,.16);
}
.tcard-center--wild4{
  color:#fff;
  -webkit-text-stroke:.045em rgba(0,0,0,.55);
  text-shadow:0 .06em .12em rgba(0,0,0,.4);
}

/* ---- Elfer raus: farbige Fläche, große Zahl, die 11 mit Medaillon ---- */
.tcard--elfer{
  background:var(--cc); /* Fallback ohne color-mix() */
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--cc) 80%, #fff) 0%, var(--cc) 42%, var(--cc-deep) 100%);
  border:.42em solid #fff;
  background-clip:padding-box;
}
.tcard--elfer .tcard-corner{ color:#fff; text-shadow:0 .06em .1em rgba(0,0,0,.3); }
.tcard--elfer.tcard--col-y .tcard-corner{ color:#6b4d00; text-shadow:none; }
.tcard-center--elfer{
  font-size:4em; font-weight:600;
  color:#fff;
  text-shadow:0 .05em .14em rgba(0,0,0,.35);
}
.tcard-elfer-disc{
  position:absolute; left:50%; top:50%;
  width:62%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 38% 30%, #fffdf6, var(--cream) 70%);
  border-radius:50%;
  box-shadow:
    0 0 0 .16em var(--gold),
    0 0 0 .34em rgba(255,255,255,.9),
    0 .18em .5em rgba(0,0,0,.28);
}
.tcard--elfer-11 .tcard-center--elfer{
  font-size:3.6em;
  color:var(--cc-deep);
  text-shadow:none;
}

/* ---- Rückseite: dunkles Rautenmuster + goldenes „T"-Ornament ---- */
.tcard--back{
  background:
    repeating-linear-gradient(45deg,
      rgba(242,181,68,.11) 0 .11em, transparent .11em 1.05em),
    repeating-linear-gradient(-45deg,
      rgba(242,181,68,.11) 0 .11em, transparent .11em 1.05em),
    radial-gradient(circle at 50% 32%, #24503e, var(--felt-dark) 62%, #0b2c1f 100%);
  box-shadow:
    0 .2em .55em rgba(0,0,0,.32),
    inset 0 0 0 .3em var(--paper),
    inset 0 0 0 .44em rgba(242,181,68,.6);
}
.tcard-back-orn{
  position:absolute; left:50%; top:50%;
  width:42%; aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(45deg);
  display:flex; align-items:center; justify-content:center;
  border:.14em solid var(--gold);
  border-radius:.45em;
  background:rgba(0,0,0,.28);
  box-shadow:0 0 0 .3em rgba(242,181,68,.2), inset 0 0 .6em rgba(0,0,0,.4);
}
.tcard-back-t{
  transform:rotate(-45deg);
  font-size:2.5em; font-weight:600; line-height:1;
  color:var(--gold);
  text-shadow:0 .05em .12em rgba(0,0,0,.55);
}