:root {
  --felt: #1f6b3a;
  --felt-dark: #154d29;
  --ink: #1d2320;
  --muted: #6b736e;
  --paper: #f6f3ea;
  --panel: #ffffff;
  --accent: #c8322f;
  --accent-dark: #9a2522;
  --gold: #e8c870;
  --radius: 10px;
  --card-w: clamp(46px, 8.5vw, 84px);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); }
button {
  font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid #c9c4b6;
  background: #fff; padding: 0.45em 0.9em; color: var(--ink);
}
button:hover:not(:disabled) { background: #f1eee5; }
button:disabled { opacity: 0.5; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent-dark); color: #fff; font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--accent-dark); }
button.danger { background: #b3261e; border-color: #8c1d18; }
button.danger:hover:not(:disabled) { background: #8c1d18; }
button.big { font-size: 1.2rem; padding: 0.7em 2em; }
button.link { border: none; background: none; text-decoration: underline; color: var(--muted); }
input, select {
  font: inherit; padding: 0.45em 0.6em; border: 1px solid #c9c4b6; border-radius: 8px; background: #fff;
  min-width: 0;
}
code { background: #efe9d9; padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.95em; letter-spacing: 0.05em; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.strong { font-weight: 600; }
.error { color: var(--accent); }
.center-msg { display: grid; place-items: center; min-height: 60vh; color: var(--muted); }

/* ---------- Login ---------- */
.login {
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.8rem; padding: 1rem; text-align: center;
  background: radial-gradient(circle at 50% 40%, #2b8048, var(--felt-dark));
  color: #fff;
}
.login h1 { font-family: Georgia, serif; font-size: 3.2rem; margin: 0; letter-spacing: 0.04em; }
.login .hint { opacity: 0.8; font-size: 0.9rem; }

/* ---------- Lobby ---------- */
.lobby { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 14px 0; flex-wrap: wrap; }
.topbar h1 { font-family: Georgia, serif; margin: 0; color: var(--felt-dark); }
.user { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.me { cursor: pointer; font-weight: 600; }
.name-input { width: 12em; }
.panel { background: var(--panel); border-radius: var(--radius); padding: 14px 18px; margin: 14px 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.panel h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.panel.highlight { border-left: 5px solid var(--accent); }
.row { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0; flex-wrap: wrap; }
.row input { flex: 1 1 10em; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.6rem 0; border-bottom: 1px solid #eee8da; }
.list li:last-child { border-bottom: none; }
.badge { font-size: 0.75rem; padding: 0.1em 0.5em; border-radius: 999px; margin-left: 0.5em; background: #e6e1d3; vertical-align: middle; }
.badge.running { background: #cfe9d6; }
.badge.paused { background: #f7e1b5; }

/* ---------- Tisch ---------- */
.table-page {
  height: 100dvh; display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "banner side" "header side" "felt side" "my side";
  background: var(--felt-dark);
}
.conn-banner { grid-area: banner; background: #ffe9a8; padding: 6px 12px; text-align: center; font-size: 0.9rem; }
.conn-banner.warn { background: #f8c9c3; }
.table-page > .center-msg { grid-area: felt; color: #fff; }

.table-header {
  grid-area: header; display: flex; align-items: center; gap: 0.8rem; padding: 6px 12px;
  background: #123f22; color: #fff;
}
.table-header .back { color: #fff; text-decoration: none; font-size: 1.4rem; padding: 0 0.3rem; }
.scores { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; }
.score { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,.08); border-radius: 8px; padding: 2px 10px; min-width: 0; overflow: hidden; }
.score .tname { font-size: 0.72rem; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12em; }
.btn-short { display: none; }
.score .pts { font-size: 1.3rem; font-weight: 700; }
.score.us .pts { color: var(--gold); }
.target { font-size: 0.8rem; opacity: 0.7; }
.header-actions { display: flex; align-items: center; gap: 0.4rem; }
.header-actions button { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); padding: 0.3em 0.7em; }
.mode-badge { display: flex; align-items: center; gap: 0.35rem; background: #fff; color: var(--ink); border-radius: 999px; padding: 2px 10px 2px 4px; font-size: 0.85rem; font-weight: 600; }
.mode-icon { width: 22px; height: 22px; display: inline-grid; place-items: center; }
.mode-icon.text { font-size: 1.1rem; }
.side-toggle { display: none; }

.felt {
  grid-area: felt; position: relative; overflow: hidden; min-height: 280px;
  background: radial-gradient(ellipse at center, #2c8a4c 0%, var(--felt) 45%, var(--felt-dark) 100%);
}
.seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; }
.seat-top { top: 10px; left: 50%; transform: translateX(-50%); }
.seat-left { left: 10px; top: 45%; transform: translateY(-50%); }
.seat-right { right: 10px; top: 45%; transform: translateY(-50%); }
.seat-name {
  background: rgba(0,0,0,.35); padding: 3px 10px; border-radius: 999px; font-size: 0.85rem;
  display: flex; align-items: center; gap: 0.35rem; white-space: nowrap;
}
.seat.turn .seat-name { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 3px rgba(232,200,112,.4); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #c0392b; display: inline-block; }
.dot.on { background: #4cd07d; }
.tag { font-size: 0.68rem; background: rgba(255,255,255,.85); color: var(--ink); border-radius: 4px; padding: 0 4px; font-weight: 700; }
.tag.trumpf { background: var(--accent); color: #fff; }
.backs { display: flex; }
.backs .back { width: calc(var(--card-w) * 0.42); margin-left: calc(var(--card-w) * -0.28); }
.backs .back:first-child { margin-left: 0; }
.seat-left .backs, .seat-right .backs { display: none; }

.trick-area {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: calc(var(--card-w) * 3.4); height: calc(var(--card-w) * 3.2);
}
.trick { position: relative; width: 100%; height: 100%; }
.trick.last { opacity: 0.75; }
.played { position: absolute; width: var(--card-w); filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.played-me { bottom: 0; left: 50%; transform: translateX(-50%); }
.played-top { top: 0; left: 50%; transform: translateX(-50%); }
.played-left { left: 0; top: 50%; transform: translateY(-50%) rotate(-6deg); }
.played-right { right: 0; top: 50%; transform: translateY(-50%) rotate(6deg); }
.trick-caption { position: absolute; bottom: -1.6rem; width: 100%; text-align: center; color: #fff; font-size: 0.8rem; opacity: 0.85; }
.center-note { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.05rem; text-shadow: 0 1px 2px #000; }
.card-svg { display: block; width: 100%; height: auto; }

.round-info {
  position: absolute; left: 10px; bottom: 10px; max-width: 46%;
  background: rgba(0,0,0,.3); color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 0.85rem;
}
.round-info .muted { color: #cfe3d4; }

.chooser, .overlay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--panel); border-radius: 14px; padding: 16px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  width: min(92%, 420px); text-align: center; z-index: 5;
}
.chooser h3, .overlay h3 { margin: 0 0 0.6rem; }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.mode-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0.5rem 0.2rem; }
.mode-btn .mode-icon { width: 34px; height: 34px; }
.mode-btn .mode-icon.text { font-size: 1.6rem; }
.mode-btn .mult { font-size: 0.75rem; color: var(--muted); }
.push-btn { margin-top: 0.7rem; width: 100%; font-weight: 600; }
.ready-list { list-style: none; padding: 0; margin: 0.4rem 0 0.8rem; text-align: left; display: inline-block; }
.ready-list li::before { content: "○ "; color: var(--muted); }
.ready-list li.ok::before { content: "● "; color: #2e9b53; }
.big-score { font-size: 2rem; font-weight: 700; margin: 0.3rem 0 0.8rem; }

.my-area { grid-area: my; background: #123f22; padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); }
.my-area .seat { position: static; transform: none; margin-bottom: 4px; }
.hand-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hand { display: flex; justify-content: center; padding: 6px 0 2px; max-width: 100%; }
.hand-card {
  width: var(--card-w); padding: 0; border: none; background: none; margin-left: calc(var(--card-w) * -0.18);
  transition: transform .12s ease; border-radius: 8px;
}
.hand-card:first-child { margin-left: 0; }
.hand-card:disabled { opacity: 1; }
.hand.my-turn .hand-card.disabled { filter: brightness(0.6); }
.hand-card.playable:hover, .hand-card.playable:focus-visible { transform: translateY(-12px); background: none; }
.hand.my-turn .hand-card.playable { transform: translateY(-6px); }
.your-turn { color: var(--gold); font-weight: 600; font-size: 0.9rem; }
.weis-bar { color: #fff; font-size: 0.85rem; background: rgba(255,255,255,.1); padding: 3px 10px; border-radius: 999px; }

/* ---------- Seitenleiste ---------- */
.side {
  grid-area: side; background: var(--paper); display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid #d8d2c2; padding: 10px 12px;
}
.close-side { display: none; align-self: flex-end; }
.history { flex: 0 1 auto; overflow: auto; max-height: 40%; }
.history h3, .chat h3 { margin: 0.2rem 0 0.4rem; font-size: 1rem; }
.history table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.history td, .history th { padding: 3px 4px; border-bottom: 1px solid #e7e1d2; text-align: left; }
.num { text-align: right !important; }
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-top: 0.6rem; }
.messages { flex: 1; overflow-y: auto; font-size: 0.88rem; background: #fff; border-radius: 8px; padding: 6px 8px; min-height: 80px; }
.msg { margin: 2px 0; word-wrap: break-word; }
.chat .row input { flex: 1 1 6em; }
.emoji { padding: 0.3em 0.45em; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: #222; color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 50; max-width: 90vw;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

@media (max-width: 900px) {
  .table-page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "banner" "header" "felt" "my"; overflow-x: hidden; }
  .table-header { gap: 0.4rem; padding: 6px 8px; }
  .scores { gap: 0.3rem; }
  .score { padding: 2px 6px; }
  .score .tname { max-width: 6.5em; }
  .header-actions { gap: 0.25rem; flex-shrink: 0; }
  .header-actions button { padding: 0.3em 0.55em; }
  .header-actions .btn-long { display: none; }
  .header-actions .btn-short { display: inline; }
  .seat-name { font-size: 0.78rem; padding: 3px 8px; }
  .side {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 340px); z-index: 20;
    transform: translateX(100%); transition: transform .2s ease; box-shadow: -6px 0 20px rgba(0,0,0,.3);
  }
  .side.open { transform: none; }
  .close-side, .side-toggle { display: inline-block; }
  .mode-badge span { display: none; }
  .mode-badge { padding: 2px 4px; }
  .target { display: none; }
  .round-info { font-size: 0.75rem; max-width: 60%; }
  .hand-card { margin-left: calc(var(--card-w) * -0.3); }
  :root { --card-w: clamp(44px, 13vw, 72px); }
}

/* Spielart-Auswahl */
.seg { gap: 0; }
.seg button { border-radius: 0; }
.seg button:first-child { border-radius: 8px 0 0 8px; }
.seg button:last-child { border-radius: 0 8px 8px 0; }
.seg button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.coiffeur-setup .extras { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.3rem 0 0.5rem; }
.mult-table { border-collapse: collapse; font-size: 0.9rem; margin: 0.3rem 0; }
.mult-table td, .mult-table th { padding: 2px 8px 2px 0; text-align: left; }
.mult-input { width: 4.5em; }
.warn-text { color: #b0402a; }

/* Coiffeur-Tafel */
.board .mode-icon { width: 16px; height: 16px; vertical-align: -3px; }
.board .mode-icon.text { font-size: 0.95rem; display: inline-block; width: 16px; text-align: center; }
.board .prod { display: block; font-size: 0.72rem; color: var(--muted); }
.board td.open { color: #b9b2a0; }
.board tr.current td { background: #fff4cf; }
.board tfoot td { font-weight: 700; border-top: 2px solid #cfc6b0; }
.history.board { max-height: 55%; }
.board td:first-child { white-space: nowrap; }

/* Navigation und Unterseiten */
.mainnav { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.5rem; }
.mainnav a { background: var(--panel); padding: 0.45em 0.9em; border-radius: 999px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.08); font-size: 0.92rem; }
.mainnav a:hover { background: #f1eee5; }
.back-link { text-decoration: none; color: var(--muted); }
.page-title { font-size: 1.4rem; flex: 1; }
.row.center { justify-content: center; }
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 0.5rem 0; }
table.data th, table.data td { padding: 6px 6px; border-bottom: 1px solid #eee8da; text-align: left; }
table.data th.num, table.data td.num, .num { text-align: right; font-variant-numeric: tabular-nums; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: #faf6ea; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5em, 1fr)); gap: 0.6rem; margin: 0.8rem 0; }
.tile { background: #faf7ef; border-radius: 8px; padding: 0.6rem 0.7rem; }
.tile-value { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile-label { font-size: 0.8rem; color: var(--muted); }
.members-line a { color: inherit; }
.bars { display: grid; gap: 0.35rem; }
.bar-row { display: grid; grid-template-columns: 6.5em 1fr auto; gap: 0.6rem; align-items: center; font-size: 0.9rem; }
.bar { background: #efe9d9; border-radius: 4px; height: 0.8rem; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.bar-num { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.85rem; }
.badge.won { background: #cfe9d6; }
.badge.lost { background: #f3d2cc; }

/* Replay */
.lobby.replay { max-width: 980px; }
.nav-row { justify-content: center; gap: 1rem; }
.round-head { text-align: center; margin: 0.4rem 0 0.6rem; }
.replay-mode { font-weight: 600; }
.replay-mode .mode-icon { width: 20px; height: 20px; vertical-align: -4px; display: inline-block; }
.rp-table {
  display: grid; gap: 0.6rem; background: var(--felt); border-radius: var(--radius); padding: 0.8rem;
  grid-template-columns: 1fr minmax(160px, 1.1fr) 1fr;
  grid-template-areas: ". top ." "left center right" ". bottom .";
}
.rp-top { grid-area: top; } .rp-left { grid-area: left; } .rp-right { grid-area: right; } .rp-bottom { grid-area: bottom; }
.rp-center { grid-area: center; position: relative; min-height: 190px; }
.rp-seat { background: rgba(0,0,0,.18); border-radius: 8px; padding: 0.4rem; color: #fff; }
.rp-seat.winner { box-shadow: 0 0 0 2px #f2c94c; }
.rp-name { font-size: 0.85rem; margin-bottom: 0.3rem; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.rp-name .muted { color: #cfe3d4; }
.rp-hand { display: flex; flex-wrap: wrap; gap: 2px; min-height: 40px; }
.mini-card { width: 30px; }
.team-dot { width: 0.6em; height: 0.6em; border-radius: 50%; display: inline-block; }
.team-dot.t0 { background: #f2c94c; } .team-dot.t1 { background: #9ecbff; }
.rp-trick { position: relative; height: 160px; --card-w: 52px; }
.rp-trick .played.win { filter: drop-shadow(0 0 6px #f2c94c); }
.rp-caption { color: #fff; text-align: center; font-size: 0.85rem; margin-top: 0.3rem; }
@media (max-width: 700px) {
  .rp-table { grid-template-columns: 1fr 1fr; grid-template-areas: "top top" "left right" "center center" "bottom bottom"; }
  .mini-card { width: 26px; }
}