/* Königrufen – Tarock-Tisch, responsiv (Querformat voll genutzt auf Desktop/Tablet). */

:root {
  --bg:       #0a0a14;
  --bg-2:     #10231a;
  --fg:       #f1ece1;
  --muted:    #b3a98f;
  --accent:   #c8a24a;     /* Gold */
  --accent-2: #d9c27a;
  --felt:     #14503a;     /* Tischgrün */
  --felt-2:   #0d3a2a;
  --card-bg:  #f7f3ea;
  --card-ink: #1a1410;
  --red:      #c1352f;
  --black:    #20242c;
  --trump-bg: #21304d;     /* Tarock dunkelblau */
  --trump-ink:#f2e6c2;
  --board-bg: rgba(255,255,255,0.05);
  --radius:   12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background: radial-gradient(1100px 600px at 50% -10%, var(--bg-2), var(--bg) 60%);
  color: var(--fg);
  font: 16px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; align-items: center;
  overscroll-behavior: none;
}
.bg-grid {
  position: fixed; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(200,162,74,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,162,74,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(900px 500px at 50% 0%, #000 30%, transparent 80%);
}

.top {
  width: 100%; max-width: 1120px; padding: 0.9rem 1.1rem 0.2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.back { color: var(--muted); text-decoration: none; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; }
.back:hover { color: var(--accent); }
.game-title {
  margin: 0; font-size: clamp(1.3rem, 3.2vw, 2rem); font-weight: 900; letter-spacing: 0.04em; text-align: center;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px rgba(200,162,74,0.35));
}
.btn {
  font: inherit; font-weight: 700; color: var(--fg); white-space: nowrap;
  background: var(--board-bg); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; padding: 0.5rem 1rem; cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn-primary { border-color: transparent; background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #2a210a; }

.wrap { width: 100%; max-width: 1120px; padding: 0.4rem 1.1rem 2.5rem; display: flex; flex-direction: column; align-items: stretch; }

/* --- Tisch (Grid) ------------------------------------------------------- */
.ktable {
  display: grid; gap: 0.5rem; align-items: stretch;
  grid-template-columns: minmax(120px, 1fr) 2.4fr minmax(120px, 1fr);
  grid-template-rows: auto minmax(210px, 38vh) auto;
  grid-template-areas:
    ".      seatT  .     "
    "seatL  felt   seatR "
    "mine   mine   mine  ";
}
.seat-top { grid-area: seatT; } .seat-left { grid-area: seatL; } .seat-right { grid-area: seatR; }
.felt { grid-area: felt; } .myseat { grid-area: mine; }

.seat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  padding: 0.4rem; border-radius: var(--radius); background: var(--board-bg);
  border: 1px solid rgba(255,255,255,0.07);
}
.seat-left, .seat-right { justify-content: center; }
.opp-name { font-size: 0.82rem; font-weight: 800; color: var(--muted); letter-spacing: 0.03em; }
.opp-meta { font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.opp-fan { display: flex; justify-content: center; max-width: 100%; overflow: hidden; }
.opp-fan .cback { margin-left: -1.1rem; }
.opp-fan .cback:first-child { margin-left: 0; }
.seat.is-turn { box-shadow: 0 0 0 1px var(--accent), 0 0 20px -6px var(--accent); }
.seat.is-turn .opp-name { color: var(--accent-2); }
.opp-bid { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; padding: 0.05rem 0.45rem; border-radius: 999px; }
.opp-bid.play { color: #2a210a; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.opp-bid.pass { color: var(--muted); border: 1px solid rgba(255,255,255,0.16); }

/* Filz / Stichmitte */
.felt {
  position: relative; border-radius: 16px;
  background: radial-gradient(circle at 50% 45%, var(--felt), var(--felt-2) 75%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 60px -10px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.trick {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: ".  t .  " "l  .  r" ".  b ."; place-items: center; padding: 1.7rem 0.5rem 1.6rem;
}
.tslot-top { grid-area: t; } .tslot-left { grid-area: l; } .tslot-right { grid-area: r; } .tslot-bottom { grid-area: b; }
.status {
  position: absolute; bottom: 0.5rem; left: 0; right: 0; margin: 0; text-align: center;
  font-size: 0.82rem; color: var(--accent-2); font-weight: 700; pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Eigene Seite */
.myseat { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.3rem; border-radius: var(--radius); transition: box-shadow 0.15s ease; }
.myseat.is-turn { box-shadow: 0 0 0 1px var(--accent), 0 -2px 26px -10px var(--accent); }
.myhead { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.2rem 0.2rem 0; }
.myname { font-weight: 800; color: var(--accent); }
.myinfo { font-size: 0.78rem; color: var(--muted); }
.myseat.is-turn .myinfo { color: var(--accent-2); font-weight: 700; }
.hand { display: flex; justify-content: center; flex-wrap: nowrap; padding: 0.3rem 0.2rem 0; min-height: 5rem; }
.hand .tcard { margin-left: -1.4rem; }
.hand .tcard:first-child { margin-left: 0; }

/* --- Karten ------------------------------------------------------------- */
.tcard {
  position: relative; flex: 0 0 auto;
  width: clamp(48px, 6.2vw, 74px); aspect-ratio: 2/3;
  background: var(--card-bg); color: var(--card-ink);
  border-radius: 8px; border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 2px 7px -2px rgba(0,0,0,0.7);
  user-select: none; overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.tcard .corner {
  position: absolute; top: 3px; left: 4px; line-height: 1; font-weight: 800;
  display: flex; flex-direction: column; align-items: center;
}
.tcard .c-rank { font-size: clamp(0.7rem, 1.5vw, 0.95rem); }
.tcard .c-suit { font-size: clamp(0.7rem, 1.5vw, 0.95rem); }
.tcard .center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.tcard .big { font-size: clamp(1.1rem, 2.6vw, 1.7rem); font-weight: 900; }
.tcard.red { color: var(--red); }
.tcard.black { color: var(--black); }

/* Tarock/Trumpf */
.tcard.trump { background: linear-gradient(165deg, #2a3b5c, var(--trump-bg)); color: var(--trump-ink); border-color: rgba(255,255,255,0.18); }
.tcard.trump .roman { font-size: clamp(1rem, 2.4vw, 1.55rem); font-weight: 900; letter-spacing: 0.02em; }
.tcard.trump .tar-tag { position: absolute; top: 3px; right: 4px; font-size: 0.55rem; font-weight: 800; color: var(--accent); letter-spacing: 0.08em; }
.tcard.trull { box-shadow: 0 0 0 2px var(--accent), 0 2px 7px -2px rgba(0,0,0,0.7); }
.tcard.trull .honor { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: 0.5rem; font-weight: 800; color: var(--accent); letter-spacing: 0.04em; }

/* Rückseite */
.cback {
  flex: 0 0 auto; width: clamp(34px, 4.6vw, 52px); aspect-ratio: 2/3; border-radius: 7px;
  background:
    repeating-linear-gradient(45deg, rgba(200,162,74,0.18) 0 5px, transparent 5px 10px),
    linear-gradient(160deg, #1c3a30, #0c241b);
  border: 1px solid rgba(200,162,74,0.3);
}

/* spielbare/auswählbare Handkarten */
.hand .tcard.ok { cursor: pointer; }
.hand .tcard.ok:hover { transform: translateY(-12px); box-shadow: 0 12px 22px -8px var(--accent); z-index: 2; }
/* beim eigenen Stich-Zug: spielbare Karten sichtbar angehoben (klare Affordance, leichter zu tippen) */
.hand.play-turn .tcard.ok { transform: translateY(-12px); z-index: 1; }
.hand.play-turn .tcard.ok:hover { transform: translateY(-20px); z-index: 2; }
.hand .tcard.sel { transform: translateY(-16px); box-shadow: 0 0 0 2px var(--accent), 0 14px 24px -8px var(--accent); z-index: 3; }
.hand .tcard.dim { opacity: 0.4; filter: saturate(0.6); }

.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { border-color: rgba(255,255,255,0.14); }

/* ausgerufener König */
.callinfo {
  position: absolute; top: 0.5rem; left: 0; right: 0; text-align: center; z-index: 4;
  font-size: 0.84rem; font-weight: 700; color: var(--fg); pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.callinfo .suit-red { color: #ff8a84; } .callinfo .suit-black { color: #e7eaf2; }
.callinfo .partner { color: var(--accent-2); }
.callinfo .estimate { display: inline-block; margin-top: 0.15rem; font-size: 0.76rem; font-weight: 600; color: var(--muted); }

/* Stich-Slots + Sieger-Hervorhebung */
.tslot .tcard { box-shadow: 0 3px 10px -3px rgba(0,0,0,0.8); }
.tslot .tcard.win { box-shadow: 0 0 0 2px var(--accent-2), 0 0 20px -4px var(--accent); transform: translateY(-2px); }

/* Talon-Auswahl (nur wenn Mensch Rufer ist) */
.talon-choice {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.6rem; padding: 0.6rem;
  background: rgba(8,18,14,0.82);
}
.talon-title { font-size: 0.86rem; font-weight: 800; color: var(--accent); letter-spacing: 0.02em; }
.talon-half {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px; padding: 0.5rem 0.8rem; cursor: pointer; font: inherit; color: var(--fg);
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.talon-half:hover { border-color: var(--accent); }
.talon-half:active { transform: translateY(1px); }
.talon-cards { display: flex; gap: 0.3rem; }
.talon-lbl { font-size: 0.78rem; font-weight: 700; color: var(--accent-2); }

/* König-Ruf-Buttons mit Farbsymbol */
.btn .suit-red { color: var(--red); } .btn .suit-black { color: var(--black); }
.btn-primary .suit-red, .btn-primary .suit-black { color: #2a210a; }

.actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin: 0.7rem 0 0; min-height: 1px; }

/* --- Bestenliste -------------------------------------------------------- */
.leaderboard { width: 100%; max-width: 1120px; margin: 1.4rem auto 0; }
.lb-title { margin: 0 0 0.2rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.lb-sub { margin: 0 0 0.7rem; font-size: 0.8rem; color: var(--muted); }
.lb-list { list-style: none; margin: 0; padding: 0; }
.lb-empty { color: var(--muted); font-size: 0.9rem; padding: 0.4rem 0; }
.lb-row {
  display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.7rem; margin-bottom: 0.35rem;
  border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; background: var(--board-bg);
}
.lb-rank { font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-score { font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-row--me { border-color: color-mix(in srgb, var(--accent) 65%, transparent); box-shadow: 0 0 22px -10px var(--accent); }

/* Sitzungs-Gulden im Kopf der eigenen Seite */
.myscore { font-size: 0.78rem; font-weight: 700; color: var(--accent-2); font-variant-numeric: tabular-nums; }

/* --- Ergebnis-Overlay --------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(8,8,16,0.78); backdrop-filter: blur(4px); animation: fade-in 0.2s ease;
}
.overlay[hidden] { display: none; }
.overlay-card {
  position: relative; width: 100%; max-width: 380px; text-align: center;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
  padding: 1.4rem 1.3rem; box-shadow: 0 24px 70px -20px #000, 0 0 50px -22px var(--accent);
}
.overlay-close {
  position: absolute; top: 0.6rem; right: 0.6rem; width: 1.9rem; height: 1.9rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05);
  color: var(--muted); font-size: 0.9rem; font-weight: 800; cursor: pointer; line-height: 1;
}
.overlay-close:hover { color: var(--fg); border-color: var(--accent); }
.overlay-title {
  margin: 0 0 0.3rem; font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 900;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.overlay-sub { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.9rem; }
.result { margin: 0.6rem 0 0.8rem; }
.res-row { display: flex; justify-content: space-between; padding: 0.32rem 0.7rem; border-radius: 8px; font-weight: 700; }
.res-row--me { background: rgba(200,162,74,0.16); color: var(--fg); }
.res-row span:last-child { font-variant-numeric: tabular-nums; }
.gulden { margin: 0.2rem 0 0.9rem; font-size: 0.9rem; color: var(--muted); }
.gulden b { color: var(--accent-2); }
.lb-form { margin: 0.3rem 0 1rem; }
.lb-form-label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--accent); margin-bottom: 0.4rem; }
.lb-form-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
#kr-name {
  flex: 1; min-width: 7rem; font: inherit; font-weight: 700; color: var(--fg);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; padding: 0.55rem 0.7rem;
}
#kr-name:focus { outline: none; border-color: var(--accent); }
.lb-result { margin: 0 0 1rem; font-weight: 800; color: var(--accent); }
.overlay-actions { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .overlay { animation: none; } }

/* --- Mobil / Hochformat: Gegner oben in eine Reihe ---------------------- */
@media (max-width: 760px) {
  .ktable {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto minmax(180px, 34vh) auto;
    grid-template-areas:
      "seatL seatT seatR"
      "felt  felt  felt "
      "mine  mine  mine ";
  }
  .seat { flex-direction: row; flex-wrap: wrap; gap: 0.2rem 0.5rem; padding: 0.35rem 0.5rem; }
  .opp-fan { display: none; }
  .hand .tcard { margin-left: -1.7rem; }
}
@media (max-width: 380px) { .hand .tcard { margin-left: -2rem; } }