/* =====================================================================
   Couchspiele – ein gemeinsames Design-System für alle Spiele.
   Tablet-first, ohne externe Bibliotheken, ohne !important.
   Jedes Spiel hat ein eigenes Farbthema (theme-<slug>) mit Spieltisch-Filz.
   ===================================================================== */

:root {
  --bg: #f6efe6;
  --bg-2: #ece0d0;
  --surface: #fffdf9;
  --surface-2: #faf3ea;
  --ink: #2a2018;
  --ink-2: #6c5b4e;
  --line: #e6d8c6;
  --brand: #4a2f22;
  --brand-2: #7a4a2c;
  --accent: #f08a24;
  --accent-2: #ffb347;
  --ok: #188a52;
  --ok-bg: #e2f6ea;
  --warn: #9a5b00;
  --warn-bg: #fff1d6;
  --bad: #c62f25;
  --bad-bg: #fde8e6;
  --red: #e0352b;
  --blue: #2369d6;
  --green: #1d9a55;
  --yellow: #f2b315;
  --purple: #7c4dd8;

  /* Thema (wird pro Spiel überschrieben) */
  --theme: #7a4a2c;
  --felt: #2f7a52;
  --felt-2: #17462f;
  --back-1: #7a4a2c;
  --back-2: #5a3420;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(42, 32, 24, .06), 0 8px 24px rgba(42, 32, 24, .08);
  --tap: 44px;
  --card-w: clamp(54px, 7.4vw, 80px);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", "Segoe UI Variable Display", system-ui, sans-serif;
  --gutter: max(16px, env(safe-area-inset-left));
}

.theme-maumau        { --theme: #1d8a55; --felt: #24855a; --felt-2: #0f4d31; --back-1: #1d6b47; --back-2: #124a30; }
.theme-farbwechsel   { --theme: #d8342b; --felt: #b8322c; --felt-2: #5e1215; --back-1: #222; --back-2: #3a3a3a; }
.theme-stapelrennen  { --theme: #1f7fb0; --felt: #1f6f96; --felt-2: #0c3550; --back-1: #1f5f8a; --back-2: #154566; }
.theme-zehnetappen   { --theme: #7346c9; --felt: #6a43b0; --felt-2: #2c1a55; --back-1: #4b2e86; --back-2: #2f1b5c; }
.theme-romme         { --theme: #a3274f; --felt: #8f2347; --felt-2: #3d0c1f; --back-1: #8f2347; --back-2: #5e1430; }
.theme-schwimmen     { --theme: #0b8fa8; --felt: #0f8aa0; --felt-2: #08384a; --back-1: #0b6f86; --back-2: #074c5e; }
.theme-elferraus     { --theme: #b8860b; --felt: #b07d12; --felt-2: #4f3405; --back-1: #8a6000; --back-2: #5e4000; }
.theme-stadtlandfluss { --theme: #e07a1f; --felt: #e08a2c; --felt-2: #8a420f; --back-1: #c86a1a; --back-2: #8a420f; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.5 var(--font);
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(240,138,36,.14), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(124,77,216,.08), transparent 60%),
    var(--bg);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--brand-2); }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a, button, label, summary, select, input { touch-action: manipulation; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; font-family: var(--font-display); }
p { margin: 0 0 .75rem; }
code { background: var(--bg-2); padding: 0 .3em; border-radius: 4px; font-size: .9em; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.muted { color: var(--ink-2); }
.small { font-size: .85rem; }
.center { text-align: center; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 100; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Grundlayout ---------- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px var(--gutter);
  padding-top: max(10px, env(safe-area-inset-top));
  background: linear-gradient(100deg, #3b2419, #5a3524 55%, #7a3f22);
  color: #fff;
  box-shadow: 0 4px 18px rgba(42,32,24,.18);
}
.brand { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.15rem; display: flex; gap: 10px; align-items: center; font-family: var(--font-display); }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), #e0352b); box-shadow: 0 3px 10px rgba(0,0,0,.25); transform: rotate(-8deg); }
.topnav { margin-left: auto; display: flex; gap: 12px; }
.topnav a { color: #fff; text-decoration: none; opacity: .9; padding: 8px 4px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 16px var(--gutter) 40px; }
.narrow { max-width: 560px; margin: 0 auto; }
.foot { text-align: center; color: var(--ink-2); font-size: .85rem; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); }
.foot a { color: inherit; }
.section { margin-top: 28px; }
.section-title { font-size: 1.2rem; color: var(--ink); font-weight: 800; display: flex; align-items: center; gap: 10px; }
.section-title::before { content: ""; width: 6px; height: 1.1em; border-radius: 3px; background: linear-gradient(var(--accent), var(--red)); }
.stack { display: grid; gap: 10px; }

/* ---------- Bausteine ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.panel-h1 { font-size: 1.45rem; display: flex; gap: 10px; align-items: center; }
.panel-title { font-size: 1.08rem; font-weight: 800; display: flex; gap: 8px; align-items: center; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
details.panel > summary { cursor: pointer; list-style: none; font-weight: 800; min-height: 28px; display: flex; align-items: center; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::after { content: "▾"; margin-left: auto; color: var(--ink-2); transition: transform .2s; }
details.panel[open] > summary::after { transform: rotate(180deg); }
details.panel[open] > summary { margin-bottom: 12px; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 800; color: var(--ink-2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 8px 16px;
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  font-weight: 800; text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 0 rgba(42,32,24,.08);
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(180deg, #ff9d3d, var(--accent)); border-color: #d9741a; color: #fff; box-shadow: 0 3px 0 #c4661a, 0 6px 16px rgba(240,138,36,.3); text-shadow: 0 1px 1px rgba(0,0,0,.15); }
.btn-primary:hover { background: linear-gradient(180deg, #ffab55, #f5952f); }
.btn-primary:active { box-shadow: 0 1px 0 #c4661a; }
.btn-warn { background: var(--warn-bg); border-color: #f0cf8c; color: var(--warn); }
.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; box-shadow: 0 3px 0 #8e1f18; }
.btn-danger:hover { background: #d93b30; border-color: #d93b30; }
.btn-danger:active { box-shadow: 0 1px 0 #8e1f18; }
.btn-warn:hover { background: #ffe7b8; }
.btn-danger-ghost { color: var(--bad); }
.btn-danger-ghost:hover { background: var(--bad-bg); border-color: #f3c2bd; }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-big { min-height: 54px; font-size: 1.08rem; padding: 10px 22px; border-radius: 16px; }
.btn-small { min-height: 36px; padding: 4px 12px; font-size: .9rem; border-radius: 11px; }
.btn-block { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { background: var(--bg-2); color: var(--bad); }
form.inline { display: inline; margin: 0; }

.form { display: grid; gap: 14px; margin-top: 12px; }
.field { display: grid; gap: 6px; font-weight: 700; }
.field-label { font-weight: 700; display: block; margin-bottom: 6px; }
.input {
  width: 100%; min-height: var(--tap); padding: 8px 12px;
  border: 2px solid #e2d2bf; border-radius: 12px; background: #fff;
  font-size: 16px; /* verhindert Auto-Zoom in iOS */
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(240,138,36,.18); outline: 0; }
textarea.input { min-height: 84px; resize: vertical; }
.input-code { text-transform: uppercase; letter-spacing: .2em; font-weight: 800; text-align: center; max-width: 14ch; }
.input-num { max-width: 110px; }
.input-small { min-height: 38px; padding: 4px 8px; }
.input-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.input-row .input { flex: 1 1 140px; }

.notice { padding: 12px 14px; border-radius: 12px; background: var(--warn-bg); color: #5c3b00; margin-bottom: 12px; }
.notice-error { background: var(--bad-bg); color: #7a1610; }
.tag { display: inline-block; font-size: .72rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); vertical-align: 1px; }
.tag-me { background: var(--ok-bg); color: var(--ok); }
.tag-bot { background: #e7eefb; color: #2a4f8f; }
.badge { font-size: .76rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.count-pill { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 900; letter-spacing: 0; }

.avatar { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 900; font-size: .9rem; font-family: var(--font-display); box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.avatar .icon { width: 18px; height: 18px; }
.av-0 { background: #e0352b; } .av-1 { background: #2369d6; } .av-2 { background: #1d9a55; } .av-3 { background: #e38b0b; }
.av-4 { background: #7c4dd8; } .av-5 { background: #d63384; } .av-6 { background: #0f8b8d; } .av-7 { background: #8a5a2b; }
.av-bot { background: #5a6b85; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px 12px; }
table.grid { width: 100%; border-collapse: collapse; font-size: .95rem; }
.grid th, .grid td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.grid thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.grid tr.sum td, .grid tr.sum th { font-weight: 800; border-bottom: 0; }

.toasts { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; display: grid; gap: 8px; width: min(92vw, 520px); pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.25); animation: toast-in .25s cubic-bezier(.2,1.4,.4,1); }
.toast-error { background: var(--bad); }
.toast.is-leaving { opacity: 0; transition: opacity .3s; }
@keyframes toast-in { from { transform: translateY(14px) scale(.96); opacity: 0; } }

.back { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); text-decoration: none; font-weight: 700; min-height: var(--tap); }

/* ---------- Startseite ---------- */
.hero { display: grid; gap: 20px; align-items: end; grid-template-columns: 1fr; padding: 12px 0 4px; }
.hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -.02em; }
.hero h1::after { content: ""; display: block; width: 92px; height: 7px; margin-top: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--red) 0 25%, var(--yellow) 0 50%, var(--green) 0 75%, var(--blue) 0); }
.lead { color: var(--ink-2); font-size: 1.08rem; max-width: 52ch; }
.join-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.game-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.game-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 0 18px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.game-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(42,32,24,.06), 0 16px 34px rgba(42,32,24,.14); }
.game-card h3 { font-size: 1.4rem; margin-top: 14px; }
.game-card-top {
  position: relative; margin: 0 -18px; height: 118px; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 20%, var(--felt), var(--felt-2) 85%);
}
.game-card-top .badge { position: absolute; top: 12px; right: 12px; }
.game-fan { position: relative; width: 140px; height: 90px; }
.game-fan i {
  position: absolute; left: 50%; bottom: 0; width: 54px; height: 76px; margin-left: -27px;
  border-radius: 9px; background: #fff; border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 6px 14px rgba(0,0,0,.3); transform-origin: 50% 120%;
  transition: transform .3s cubic-bezier(.2,1.4,.4,1);
}
.game-fan i:first-child { transform: rotate(-16deg); background: repeating-linear-gradient(45deg, var(--back-1) 0 6px, var(--back-2) 6px 12px); }
.game-fan i:last-child { transform: rotate(16deg); background: repeating-linear-gradient(-45deg, var(--back-1) 0 6px, var(--back-2) 6px 12px); }
.game-fan .game-icon { display: grid; place-items: center; font-style: normal; font-size: 1.9rem; font-weight: 900; color: var(--theme); z-index: 1; }
.game-card:hover .game-fan i:first-child { transform: rotate(-24deg); }
.game-card:hover .game-fan i:last-child { transform: rotate(24deg); }
.game-card:hover .game-fan .game-icon { transform: translateY(-6px); }
.theme-farbwechsel .game-fan .game-icon { background: conic-gradient(var(--red) 0 25%, var(--blue) 0 50%, var(--green) 0 75%, var(--yellow) 0); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.game-sub { font-weight: 800; color: var(--theme); margin-bottom: 6px; }
.game-desc { color: var(--ink-2); flex: 1; }
.game-facts { font-size: .85rem; color: var(--ink-2); }
.game-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.game-actions .btn-primary { flex: 1; }
.my-games { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.my-game { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); min-height: 66px; box-shadow: var(--shadow); transition: transform .15s; }
.my-game:hover { transform: translateY(-2px); }
.my-game.is-live { border-color: #9ccfb1; box-shadow: inset 4px 0 0 var(--ok), var(--shadow); }
.my-game-icon { display: grid; place-items: center; font-size: 1.3rem; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--felt), var(--felt-2)); flex: none; }
.my-game-body { display: grid; flex: 1; min-width: 0; }
.my-game-body small { color: var(--ink-2); }
.chevron { font-size: 1.6rem; color: var(--ink-2); }

/* ---------- Spieltisch ---------- */
.table-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.table-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.table-title h1 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin: 0; }
.meta-line { color: var(--ink-2); font-size: .9rem; }
.invite { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px 4px 4px 12px; box-shadow: var(--shadow); }
.invite-label { font-size: .75rem; text-transform: uppercase; font-weight: 800; color: var(--ink-2); }
.invite-code { letter-spacing: .14em; font-weight: 900; }

.statusbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px; margin: 0 0 14px;
  background: rgba(255,253,249,.94); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 6px 16px rgba(42,32,24,.08);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #c9b8a5; flex: none; }
.statusbar.is-me { background: linear-gradient(90deg, #17a05e, #1d8a55); border-color: #137a48; color: #fff; }
.statusbar.is-me strong { color: #fff; font-size: 1.08rem; }
.statusbar.is-me .status-msg { color: rgba(255,255,255,.9); }
.statusbar.is-me .status-dot { background: #b8ffd8; animation: blink 1.4s ease-in-out infinite; }
.statusbar.is-bot .status-dot { background: #5a6b85; animation: blink .9s ease-in-out infinite; }
.statusbar.is-bot strong::after { content: " denkt nach …"; font-weight: 400; color: var(--ink-2); }
.statusbar.just-turned { animation: turn-pop .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes blink { 50% { opacity: .35; transform: scale(.8); } }
@keyframes turn-pop { 0% { transform: scale(.96); } 40% { transform: scale(1.025); } 100% { transform: none; } }
.status-msg { color: var(--ink-2); font-size: .92rem; min-width: 0; }

.table-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .table-grid { grid-template-columns: minmax(0, 1fr) 290px; align-items: start; }
  .table-side { position: sticky; top: 72px; }
}

.players { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.player { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); transition: background .2s; }
.player.is-turn { background: #fff1d6; box-shadow: inset 0 0 0 2px var(--accent); }
.player.is-turn .avatar { animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
.player-name { flex: 1 1 110px; min-width: 0; font-weight: 800; overflow-wrap: break-word; }
.player-meta { font-size: .85rem; color: var(--ink-2); margin-left: 40px; overflow-wrap: anywhere; }
.log { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .88rem; color: var(--ink-2); max-height: 220px; overflow: auto; }
.log time { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; margin-right: 4px; }

.lobby { background: linear-gradient(135deg, #fff, #fff6ea); }
.lobby .invite-code { font-size: 1.15rem; background: var(--ink); color: #fff; padding: 2px 10px; border-radius: 8px; }
.results { position: relative; overflow: hidden; }
.results .winner { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.results .winner .icon { width: 56px; height: 56px; color: var(--accent); animation: bob 1.6s ease-in-out infinite; }
.results .winner h2 { font-size: 1.7rem; }

/* ---------- Spieltisch-Filz ---------- */
.felt {
  position: relative;
  padding: 14px;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.16), transparent 60%),
    repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    linear-gradient(170deg, var(--felt), var(--felt-2));
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.08), inset 0 0 60px rgba(0,0,0,.25), 0 10px 30px rgba(42,32,24,.18);
}
.felt .pile, .felt .hand, .felt .laid, .felt .sr-build, .felt .sr-own, .felt .sr-other {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: none;
  color: #fff;
}
.felt .pile-label, .felt .pile-note, .felt .hand-title small, .felt .laid-label, .felt .laid-empty, .felt .muted:not(.pcard):not(.fcard) { color: rgba(255,255,255,.78); }
.felt .pile-note.warn { color: #ffd479; }
.felt .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.felt .btn-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.7); }
.felt .notice { color: #5c3b00; }
.felt .panel { color: var(--ink); }
.felt .panel .muted { color: var(--ink-2); }
.felt .count-pill { background: rgba(0,0,0,.4); }
.felt .empty { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.6); }

/* Stapel-Reihe */
.piles { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pile { flex: 1 1 140px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; align-items: center; box-shadow: var(--shadow); }
/* Knöpfe unter den Stapeln (Ziehen, Aufnehmen …) sitzen in allen Stapeln auf gleicher Höhe – unten */
.pile > form:last-child, .pile > .btn:last-child { margin-top: auto; }
.pile > * { max-width: 100%; }
.pile-wide { flex-basis: 200px; }
.pile-label { font-size: .78rem; font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; text-align: center; display: flex; gap: 6px; align-items: center; justify-content: center; }
.pile-note { font-size: .88rem; color: var(--ink-2); text-align: center; }
.pile-note.warn { color: var(--warn); font-weight: 700; }
.pile form, .pile .btn { width: 100%; }
.stage-big { font-size: 3rem; font-weight: 900; line-height: 1; font-family: var(--font-display); text-shadow: 0 3px 0 rgba(0,0,0,.2); }

/* Hand */
.hand { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); margin-bottom: 14px; }
.hand-title { font-size: 1.05rem; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.hand-title small { font-weight: 400; color: var(--ink-2); font-size: .85rem; font-family: var(--font); }
.hand-cards { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding-top: 6px; }
.card-form { margin: 0; }
.card-btn { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; }
.action-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- Karten (gemeinsame Form) ---------- */
.pcard, .fcard, .scard, .zcard {
  position: relative;
  width: var(--card-w); height: calc(var(--card-w) * 1.42);
  border-radius: calc(var(--card-w) * .13); background: #fff;
  border: 2px solid #fff;
  display: inline-grid; place-items: center; align-content: center; gap: 2px;
  font-weight: 900; font-family: var(--font-display); user-select: none; -webkit-user-select: none;
  box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.18);
  transition: transform .15s cubic-bezier(.2,1.4,.4,1), box-shadow .15s ease;
  overflow: hidden;
  vertical-align: bottom;
}
.pcard b, .fcard b, .scard b, .zcard b { position: relative; z-index: 1; font-size: calc(var(--card-w) * .44); line-height: 1; }
/* Eckzeichen wie bei echten Karten */
.pcard[data-c]::before, .zcard[data-c]::before, .scard[data-c]::before, .fcard[data-c]::after {
  content: attr(data-c);
  position: absolute; left: 7%; top: 4%;
  font-size: calc(var(--card-w) * .19); line-height: 1; font-weight: 900;
}
.pcard[data-c]::after, .zcard[data-c]::after, .scard[data-c]::after {
  content: attr(data-c);
  position: absolute; right: 7%; bottom: 4%;
  font-size: calc(var(--card-w) * .19); line-height: 1; font-weight: 900;
  transform: rotate(180deg);
}
.big { --card-w: clamp(66px, 9.4vw, 96px); }
.mini { --card-w: 40px; }
.mini b { font-size: 17px; }
.mini[data-c]::before, .mini[data-c]::after { content: none; }
.playable { box-shadow: 0 0 0 3px var(--accent-2), 0 0 18px rgba(255,179,71,.55), 0 4px 10px rgba(0,0,0,.2); }
.card-btn:hover .playable, .picker summary:hover .playable { transform: translateY(-8px) rotate(-2deg); }
.card-btn:active .playable { transform: translateY(-2px) scale(.97); }
.muted.pcard, .muted.fcard { filter: saturate(.55) brightness(.92); opacity: .82; }
.card-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0 18%, transparent 19%),
    repeating-linear-gradient(45deg, var(--back-1) 0 7px, var(--back-2) 7px 14px);
  border: 3px solid #fff; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.4);
}
.card-back b { font-size: calc(var(--card-w) * .32); }
.stacked { box-shadow: 2px 2px 0 -1px #fff, 2px 2px 0 0 rgba(0,0,0,.18), 4px 4px 0 -1px #fff, 4px 4px 0 0 rgba(0,0,0,.18), 0 8px 16px rgba(0,0,0,.25); overflow: visible; }
.empty { background: transparent; border: 2px dashed rgba(42,32,24,.25); box-shadow: none; color: var(--ink-2); }

/* Animationen: neue Karte auf dem Stapel, neue Handkarte, Austeilen */
.anim-in { animation: drop-in .45s cubic-bezier(.2,1.4,.4,1); }
.deal-in { animation: deal-in .45s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes drop-in { from { transform: translateY(-40px) rotate(-14deg) scale(1.15); opacity: 0; } }
@keyframes deal-in { from { transform: translateY(40px) rotate(8deg) scale(.8); opacity: 0; } }
.is-dealing .hand-cards > * { animation: deal-in .45s cubic-bezier(.2,1.3,.4,1) both; }
.is-dealing .hand-cards > :nth-child(2) { animation-delay: .05s; }
.is-dealing .hand-cards > :nth-child(3) { animation-delay: .1s; }
.is-dealing .hand-cards > :nth-child(4) { animation-delay: .15s; }
.is-dealing .hand-cards > :nth-child(5) { animation-delay: .2s; }
.is-dealing .hand-cards > :nth-child(6) { animation-delay: .25s; }
.is-dealing .hand-cards > :nth-child(7) { animation-delay: .3s; }
.is-dealing .hand-cards > :nth-child(8) { animation-delay: .35s; }
.is-dealing .hand-cards > :nth-child(9) { animation-delay: .4s; }
.is-dealing .hand-cards > :nth-child(n+10) { animation-delay: .45s; }

/* Konfetti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: confetti-fall var(--t, 2.4s) cubic-bezier(.3,.6,.5,1) forwards; }
@keyframes confetti-fall { to { transform: translate(var(--dx, 0), 110vh) rotate(var(--r, 540deg)); } }

/* Mau-Mau */
.pcard { border-color: #fff; background: linear-gradient(160deg, #fff, #f6f1ea); }
.pcard i { position: relative; z-index: 1; font-style: normal; font-size: calc(var(--card-w) * .42); line-height: 1; }
.suit-h, .suit-k { color: var(--red); }
.suit-p, .suit-x { color: #1b1b1b; }
.suit-chip, .color-chip { font-weight: 800; }
.felt .suit-chip { background: #fff; padding: 1px 8px; border-radius: 999px; }

/* Farbwechsel */
.col-r { --c: var(--red); } .col-b { --c: var(--blue); } .col-g { --c: var(--green); } .col-y { --c: var(--yellow); }
.fcard { background: var(--c, #222); border: 3px solid #fff; }
.fcard::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 18%; bottom: 18%;
  border-radius: 50%; background: #fff; transform: rotate(-28deg);
}
.fcard b { color: var(--c, #222); font-size: calc(var(--card-w) * .4); letter-spacing: -.03em; text-shadow: 1px 1px 0 rgba(0,0,0,.12); }
.fcard[data-c]::after { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.fcard.col-w { background: conic-gradient(from -30deg, var(--red) 0 25%, var(--blue) 0 50%, var(--green) 0 75%, var(--yellow) 0); }
.fcard.col-w::before { background: #1d1d1d; }
.fcard.col-w b { color: #fff; }
.fcard.card-back { background: radial-gradient(circle, var(--red) 0 30%, #1d1d1d 31%); }
.fcard.card-back::before { content: none; }
.fcard.card-back b { color: #ffd23f; text-shadow: 0 2px 0 #000; }
.color-chip.col-r, .color-chip.col-b, .color-chip.col-g, .color-chip.col-y { background: var(--c); color: #fff; padding: 1px 8px; border-radius: 999px; }

/* 10 Etappen – kräftige Farbkarten */
.zcard { color: #fff; background: var(--c, #555); border-color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.zcard.col-r { --c: linear-gradient(160deg, #f04a3f, #c6271e); }
.zcard.col-b { --c: linear-gradient(160deg, #3b82f0, #1c55b8); }
.zcard.col-g { --c: linear-gradient(160deg, #2bb36a, #157a42); }
.zcard.col-y { --c: linear-gradient(160deg, #ffc93a, #e09a00); color: #4a2f00; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.zcard.wild { background: linear-gradient(135deg, #8b5cf6, #5b2bb5); }
.zcard.skip { background: linear-gradient(160deg, #56657a, #2d3846); }
.pcard.card-back, .scard.card-back, .zcard.card-back { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0 18%, transparent 19%), repeating-linear-gradient(45deg, var(--back-1) 0 7px, var(--back-2) 7px 14px); }
.zcard.empty { background: transparent; }
.pick { position: relative; cursor: pointer; display: inline-block; }
.pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 2; }
.pick input:checked + .zcard, .pick input:checked + .scard, .pick input:checked + .pcard { transform: translateY(-14px); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--accent), 0 14px 22px rgba(0,0,0,.3); }
.pick input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.pick input:disabled { cursor: default; }
.pick.fresh::after { content: "neu"; position: absolute; top: -9px; right: -6px; z-index: 3; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 999px; box-shadow: 0 2px 4px rgba(0,0,0,.2); }

.laid { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
.laid-player { padding: 10px 0; border-top: 1px dashed rgba(255,255,255,.2); }
.laid-player:first-of-type { border-top: 0; }
.laid-name { font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.laid-name .avatar { width: 26px; height: 26px; font-size: .8rem; }
.laid-groups { display: flex; flex-wrap: wrap; gap: 12px; }
.laid-group { background: rgba(0,0,0,.18); border-radius: 14px; padding: 8px 12px 10px; display: grid; gap: 6px; }
.laid-label { font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.laid-empty { margin: 0; color: var(--ink-2); }
.fan { display: flex; align-items: center; padding-left: 4px; }
.fan > .zcard, .fan > .pcard { margin-left: -14px; place-items: start start; align-content: start; padding: 4px 0 0 5px; }
.fan > .zcard b, .fan > .pcard b { font-size: 16px; }
.fan > .pcard { gap: 0; justify-items: center; padding: 3px 0 0 3px; }
.fan > .pcard i { font-size: 14px; }
.fan > .zcard:first-child, .fan > .pcard:first-child { margin-left: 0; }
.fan > .zcard:nth-child(odd) { transform: rotate(-2deg); }
.fan > .zcard:nth-child(even) { transform: rotate(2deg); }
.fan-add {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 57px; margin-left: 10px;
  border-radius: 6px; border: 2px dashed rgba(255,255,255,.6); background: rgba(255,255,255,.08);
  color: #fff; cursor: pointer; transition: background .15s, transform .15s;
}
.fan-add:hover { background: rgba(255,255,255,.2); transform: scale(1.05); }
.fan-add .icon { width: 22px; height: 22px; }
.stage-list { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; columns: 2; }
.switch { display: inline-flex; gap: 6px; align-items: center; min-height: var(--tap); }
.switch input { width: 22px; height: 22px; }

/* Stapelrennen */
.scard { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.scard.tier-a { background: linear-gradient(160deg, #3b82f0, #1c55b8); }
.scard.tier-b { background: linear-gradient(160deg, #2bb36a, #157a42); }
.scard.tier-c { background: linear-gradient(160deg, #f04a3f, #c6271e); }
.scard.tier-j, .scard.as-joker { background: linear-gradient(135deg, #f7b500 0, #f08a24 35%, #d6336c 70%, #7c4dd8); }
.scard small { position: relative; z-index: 1; font-size: calc(var(--card-w) * .13); font-family: var(--font); font-weight: 800; opacity: .9; text-transform: uppercase; letter-spacing: .05em; }
.sr-board { display: grid; gap: 14px; margin-bottom: 14px; }
.sr-build { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; border-radius: var(--radius); padding: 12px 8px; }
.sr-slot { display: grid; gap: 8px; justify-items: center; }
.sr-target { border: 0; background: none; padding: 8px 6px; border-radius: 16px; cursor: pointer; color: inherit; transition: background .15s; }
.sr-target:disabled { cursor: default; }
.sr-target.fits { background: rgba(255,214,121,.22); box-shadow: 0 0 0 3px #ffd479; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px #ffd479, 0 0 0 10px rgba(255,212,121,.25); } }
/* Baustapel: oben liegende Karte, dahinter schaut die nächste benötigte Zahl hervor */
.sr-stack { position: relative; display: inline-block; padding-right: calc(var(--card-w) * .38); }
.sr-stack .ghost {
  position: absolute; right: 0; top: 0;
  background: rgba(255,255,255,.1); border: 2px dashed rgba(255,255,255,.55); box-shadow: none;
  color: rgba(255,255,255,.9); transform: rotate(7deg); transform-origin: 0 100%;
  justify-items: end; place-items: start end; padding: 6% 8%;
}
.sr-stack .ghost b { font-size: calc(var(--card-w) * .26); }
.sr-stack .sr-top { position: relative; z-index: 1; }
.sr-stack.is-empty { padding-right: 0; }
.sr-stack.is-empty .ghost { position: static; transform: none; place-items: center; padding: 0; }
.sr-stack.is-empty .ghost b { font-size: calc(var(--card-w) * .44); opacity: .7; }
.sr-target.fits .ghost { border-color: #ffd479; color: #ffd479; background: rgba(255,214,121,.15); }
.sr-progress { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; width: min(100%, 110px); }
.sr-progress i { height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); }
.sr-progress i.on { background: #ffd479; }
.sr-own { display: grid; gap: 12px; grid-template-columns: auto minmax(0, 1fr); border-radius: var(--radius); padding: 12px; }
.sr-stock { display: grid; gap: 8px; justify-items: center; padding-right: 6px; }
.sr-discards { display: grid; gap: 8px; }
.sr-discard-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sr-discard { display: grid; gap: 8px; justify-items: center; align-content: start; }
.sr-drop { width: 100%; padding: 4px 6px; gap: 4px; }
.sr-drop:disabled { opacity: .35; }
.sr-drop.is-off { opacity: .4; }
.sr-pick { position: relative; cursor: pointer; display: inline-block; }
.sr-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 2; }
.sr-pick input:checked + .scard { transform: translateY(-12px); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--accent), 0 14px 22px rgba(0,0,0,.3); }
.sr-pick input:focus-visible + .scard { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-others { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.sr-other { border-radius: 16px; padding: 10px 12px; transition: box-shadow .2s; }
.sr-other.is-turn { box-shadow: 0 0 0 2px #ffd479; }
.sr-other-name { display: flex; align-items: center; gap: 8px; font-weight: 800; margin-bottom: 8px; min-width: 0; }
.sr-other-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-other-name .avatar { width: 26px; height: 26px; font-size: .8rem; }
.sr-other-cards { display: flex; gap: 12px; align-items: center; }
.sr-other-stock { position: relative; padding-right: 6px; border-right: 1px solid rgba(255,255,255,.2); }
.sr-other-stock .count-pill { position: absolute; right: -2px; bottom: -6px; z-index: 2; background: #ffd479; color: #3b2a00; }
.sr-other-discards { display: flex; gap: 6px; }

/* Auswahl-Dialog (Bube / Farbwahl) – per Antippen, ohne Hover */
.picker { display: inline-block; position: relative; }
.picker > summary { list-style: none; cursor: pointer; }
.picker > summary::-webkit-details-marker { display: none; }
.picker[open] > summary .pcard, .picker[open] > summary .fcard { transform: translateY(-10px); }
.picker[open]::before { content: ""; position: fixed; inset: 0; background: rgba(20,12,6,.5); z-index: 60; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.picker-panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 61; width: min(380px, 92vw); background: var(--surface); color: var(--ink); border-radius: 22px; padding: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.4); animation: pop-in .25s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop-in { from { transform: translate(-50%, -46%) scale(.92); opacity: 0; } }
.picker-title { font-weight: 800; margin-bottom: 14px; text-align: center; font-family: var(--font-display); font-size: 1.05rem; }
.picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.suit-choice, .color-choice { min-height: 76px; border-radius: 16px; border: 2px solid var(--line); background: #fff; font-weight: 800; font-size: 1rem; cursor: pointer; display: grid; place-items: center; gap: 2px; transition: transform .12s; }
.suit-choice:hover, .color-choice:hover { transform: scale(1.04); }
.suit-choice:active, .color-choice:active { transform: scale(.97); }
.suit-choice span { font-size: 2rem; line-height: 1; }
.color-choice { background: var(--c); border-color: rgba(0,0,0,.12); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); grid-auto-flow: row; }
.color-choice .swatch { width: 26px; height: 36px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 5px var(--c), 0 0 0 2px #fff; }

/* Stadt-Land-Fluss */
.slf-hero { text-align: center; padding: 30px 10px; }
.slf-top { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.slf-letter { display: grid; place-items: center; width: clamp(88px, 14vw, 124px); aspect-ratio: 1; border-radius: 26px; background: #fff; color: var(--theme); font-family: var(--font-display); font-size: clamp(3.2rem, 7vw, 4.6rem); font-weight: 900; box-shadow: 0 6px 0 rgba(0,0,0,.18), 0 16px 30px rgba(0,0,0,.25); margin: 0 auto; transform: rotate(-4deg); }
.slf-top .slf-letter { margin: 0; }
.slf-letter.spinning { animation: wobble .35s ease-in-out infinite alternate; }
@keyframes wobble { from { transform: rotate(-6deg) scale(.98); } to { transform: rotate(6deg) scale(1.06); } }
.slf-timer { margin-left: auto; font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; font-family: var(--font-display); font-variant-numeric: tabular-nums; background: rgba(0,0,0,.22); color: #fff; border-radius: 18px; padding: 6px 18px; }
.slf-timer.is-warn { background: #ffd479; color: #5c3b00; }
.slf-timer.is-danger { color: #fff; background: var(--bad); animation: blink .6s ease-in-out infinite; }
.slf-fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin-bottom: 14px; }
.slf-answer { font-weight: 700; margin-bottom: 4px; overflow-wrap: anywhere; }
.slf-score td { min-width: 120px; }
.slf-score td.pts-0 .slf-answer { color: var(--ink-2); text-decoration: line-through; }
.slf-score td.pts-20 { background: #f0faf3; }
.felt .slf-hero .eyebrow { color: rgba(255,255,255,.8); }
.felt .panel:last-child { margin-bottom: 0; }

/* Verwaltung */
.admin-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.admin-head h1 { display: flex; gap: 10px; align-items: center; margin: 0; }
.stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.stat-title { font-weight: 800; }
.stat-num { font-size: 1.8rem; font-weight: 900; }
.stat-num small { font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.actions { white-space: nowrap; display: flex; gap: 6px; }

.prose h2 { font-size: 1.15rem; margin-top: 1.2rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .3rem; }
.big-icon .icon { width: 48px; height: 48px; margin: 0 auto 10px; color: var(--brand); }

/* ---------- Breiten ---------- */
@media (min-width: 760px) {
  .hero { grid-template-columns: 1fr minmax(300px, 360px); }
}
@media (max-width: 640px) {
  .felt { padding: 10px; margin: 0 calc(var(--gutter) * -1 + 6px); border-radius: 18px; }
  .sr-own { grid-template-columns: 1fr; }
  .sr-stack { padding-right: calc(var(--card-w) * .3); }
  .sr-build { gap: 4px; padding: 8px 4px; }
  .sr-target { padding: 6px 2px; }
  .stage-list { columns: 1; }
  .statusbar { border-radius: 0; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-left: 0; border-right: 0; }
}
@media (max-width: 420px) {
  :root { --card-w: 50px; }
  .sr-build .scard { --card-w: 46px; }
}
@media (pointer: coarse) {
  .btn-small { min-height: 40px; }
  .card-btn:hover .playable, .game-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none; transition: none; }
  .confetti { display: none; }
}
@media (max-width: 480px) {
  .sr-drop-text, .sr-dtext { display: none; }
}

/* Joker (Rommé) */
.pcard.joker { background: linear-gradient(135deg, #fff 0, #fff3d6 100%); color: #7c4dd8; }
.pcard.joker i { font-size: calc(var(--card-w) * .16); font-family: var(--font); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.mini.joker i { font-size: 8px; }
.stage-big small { font-size: 1.1rem; opacity: .75; }
.rm-pending { margin-top: 12px; padding: 10px; border-radius: 14px; border: 2px dashed rgba(255,255,255,.4); display: grid; gap: 8px; }

/* Schwimmen */
.sw-board { display: grid; gap: 14px; margin-bottom: 14px; }
.sw-middle { padding: 14px; }
.sw-cards { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hand .sw-cards { justify-content: flex-start; }
.sw-score { display: inline-grid; place-items: center; min-width: 54px; padding: 2px 12px; border-radius: 999px; background: #ffd479; color: #3b2a00; font-size: 1.05rem; font-weight: 900; }
.sw-lives { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.sw-life { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); }
.sw-life.is-turn { box-shadow: 0 0 0 2px #ffd479; }
.sw-life .avatar { width: 26px; height: 26px; font-size: .8rem; }
.sw-life-name { flex: 1; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-hearts { display: flex; align-items: center; gap: 2px; font-style: normal; }
.sw-hearts i { font-style: normal; color: rgba(255,255,255,.25); font-size: 1.1rem; }
.sw-hearts i.on { color: #ff5d6c; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.sw-hearts em { font-style: normal; font-size: .75rem; font-weight: 800; background: #7fd8ff; color: #06374a; padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.sw-reveal { display: grid; gap: 8px; }
.sw-reveal-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; border-radius: 12px; background: var(--surface-2); }
.sw-reveal-row.lost { background: var(--bad-bg); }
.sw-reveal-name { font-weight: 800; min-width: 90px; }
.sw-reveal-cards { display: flex; gap: 4px; }

/* Elfer raus */
.er-rows { display: grid; gap: 8px; margin-bottom: 14px; padding: 12px; border-radius: var(--radius); background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); }
.er-row { display: flex; align-items: center; gap: 10px; }
.er-ends { display: flex; gap: 4px; width: 88px; flex: none; }
.er-track { flex: 1; display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; min-width: 0; }
.er-track i { display: grid; place-items: center; height: 26px; border-radius: 6px; font-style: normal; font-size: .7rem; font-weight: 900; background: rgba(255,255,255,.1); color: rgba(255,255,255,.55); }
.er-track i.eleven { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.er-track.col-r i.on { background: #e0352b; color: #fff; }
.er-track.col-b i.on { background: #2369d6; color: #fff; }
.er-track.col-g i.on { background: #1d9a55; color: #fff; }
.er-track.col-y i.on { background: #f2b315; color: #4a2f00; }
.er-track i.next { background: transparent; box-shadow: inset 0 0 0 2px #ffd479; color: #ffd479; }
@media (max-width: 640px) {
  .er-ends { width: auto; }
  .er-ends .zcard:nth-child(2) { display: none; }
  .er-track { gap: 1px; }
  .er-track i { height: 22px; font-size: .55rem; border-radius: 4px; }
}
.pcard.empty { background: transparent; }

/* Stapelrennen: eigene Ablagen aufgefächert – die Zahlen darunter schauen oben hervor */
.sr-cascade { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.sr-cascade .sr-under { margin-bottom: calc(var(--card-w) * -1.14); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sr-cascade .sr-under::after { content: none; }
.sr-cascade .sr-under b { visibility: hidden; }
.sr-cascade .sr-under::before { font-size: calc(var(--card-w) * .22); }
.sr-cascade .sr-pick { position: relative; z-index: 1; }
.sr-dhead { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; font-size: .75rem; font-weight: 800; color: rgba(255,255,255,.8); white-space: nowrap; }
.felt .sr-dcount { background: #ffd479; color: #3b2a00; min-width: 22px; height: 20px; }
.sr-discard { display: flex; flex-direction: column; align-items: center; }
.sr-discard .sr-drop { margin-top: auto; }

/* Bestätigungs-Modal (ersetzt den Browser-Dialog) */
dialog.confirm { border: 0; padding: 0; background: transparent; border-radius: 22px; overflow: hidden; max-width: min(420px, 92vw); width: 100%; color: var(--ink); }
dialog.confirm::backdrop { background: rgba(20,12,6,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog.confirm[open] .confirm-inner { animation: pop-dialog .25s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop-dialog { from { transform: scale(.9) translateY(10px); opacity: 0; } }
.confirm-inner { margin: 0; background: var(--surface); border-radius: 22px; padding: 22px 20px 18px; box-shadow: 0 30px 80px rgba(0,0,0,.4); text-align: center; }
.confirm-icon { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font: 900 1.6rem/1 var(--font-display); color: #fff; background: linear-gradient(135deg, var(--accent), #e0352b); }
dialog.confirm.is-danger .confirm-icon { background: var(--bad); }
.confirm-text { font: 800 1.12rem/1.35 var(--font-display); margin: 0 0 18px; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.confirm-actions .btn { min-height: 48px; }
.sr-dhead.is-empty { opacity: .55; }

/* Chat (nur bei mindestens zwei Menschen) */
.chat .panel-title .icon { color: var(--accent); }
.chat-list { list-style: none; margin: 10px 0 0; padding: 4px 2px; display: flex; flex-direction: column; gap: 6px; max-height: 260px; min-height: 80px; overflow-y: auto; overscroll-behavior: contain; }
.chat-msg { align-self: flex-start; max-width: 88%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 6px 10px; font-size: .92rem; line-height: 1.35; overflow-wrap: anywhere; }
.chat-msg.is-me { align-self: flex-end; background: #fff1d6; border-color: #f2d49b; border-radius: 14px 14px 4px 14px; }
.chat-name { display: block; font-size: .75rem; font-weight: 800; color: var(--theme); }
.chat-time { display: block; font-size: .68rem; color: var(--ink-2); text-align: right; margin-top: 1px; }
.chat-empty { color: var(--ink-2); font-size: .9rem; text-align: center; padding: 14px 0; }
.chat-new { animation: chat-in .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes chat-in { from { transform: translateY(10px) scale(.95); opacity: 0; } }
.chat-form { display: flex; gap: 8px; margin: 0; }
.chat-form .input { flex: 1; min-width: 0; }
.chat-send { padding: 8px 12px; }

/* ---------- Würfel (gemeinsam für alle Würfelspiele) ---------- */
.die {
  --s: clamp(48px, 8vw, 68px);
  position: relative; display: inline-grid; width: var(--s); height: var(--s);
  grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: calc(var(--s) * .14);
  border-radius: calc(var(--s) * .2); background: linear-gradient(145deg, #fff, #ece4da);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.die i { width: 68%; height: 68%; place-self: center; border-radius: 50%; background: #2a2018; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); }
.die-1 i { grid-area: 2 / 2; background: #d1352b; }
.die-2 i:nth-child(1) { grid-area: 1 / 1; } .die-2 i:nth-child(2) { grid-area: 3 / 3; }
.die-3 i:nth-child(1) { grid-area: 1 / 1; } .die-3 i:nth-child(2) { grid-area: 2 / 2; } .die-3 i:nth-child(3) { grid-area: 3 / 3; }
.die-4 i:nth-child(1) { grid-area: 1 / 1; } .die-4 i:nth-child(2) { grid-area: 1 / 3; } .die-4 i:nth-child(3) { grid-area: 3 / 1; } .die-4 i:nth-child(4) { grid-area: 3 / 3; }
.die-5 i:nth-child(1) { grid-area: 1 / 1; } .die-5 i:nth-child(2) { grid-area: 1 / 3; } .die-5 i:nth-child(3) { grid-area: 2 / 2; } .die-5 i:nth-child(4) { grid-area: 3 / 1; } .die-5 i:nth-child(5) { grid-area: 3 / 3; }
.die-6 i:nth-child(1) { grid-area: 1 / 1; } .die-6 i:nth-child(2) { grid-area: 2 / 1; } .die-6 i:nth-child(3) { grid-area: 3 / 1; } .die-6 i:nth-child(4) { grid-area: 1 / 3; } .die-6 i:nth-child(5) { grid-area: 2 / 3; } .die-6 i:nth-child(6) { grid-area: 3 / 3; }
.die.is-ghost { opacity: .35; filter: grayscale(1); }
.die.anim-in { animation: die-roll .6s cubic-bezier(.2,1.2,.4,1); }
@keyframes die-roll { 0% { transform: translateY(-30px) rotate(-200deg) scale(.7); opacity: .2; } 60% { transform: translateY(4px) rotate(15deg); } }
.dice-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 6px 0; }
.dice-pick { position: relative; cursor: pointer; display: inline-grid; justify-items: center; gap: 4px; }
.dice-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.dice-pick input:disabled { cursor: default; }
.dice-pick input:checked + .die { transform: translateY(-8px); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--accent), 0 10px 18px rgba(0,0,0,.3); }
.dice-pick small { font-size: .7rem; font-weight: 800; color: rgba(255,255,255,.8); visibility: hidden; text-transform: uppercase; letter-spacing: .04em; }
.dice-pick input:checked ~ small { visibility: visible; }

/* Fünferpasch */
.theme-fuenferpasch  { --theme: #c2410c; --felt: #1f7a64; --felt-2: #0b3b30; --back-1: #c2410c; --back-2: #8a2d08; }
.fp-dice { margin-bottom: 14px; }
.fp-actions { align-items: center; justify-content: center; }
.fp-sheet { margin: 0; }
.fp-grid th, .fp-grid td { padding: 5px 8px; }
.fp-grid th small { font-weight: 400; }
.fp-grid thead th.is-turn { color: var(--theme); }
.fp-grid tr.fp-sub th, .fp-grid tr.fp-sub td { background: var(--surface-2); font-size: .85rem; }
.fp-zero { color: var(--ink-2); }
.fp-pick { min-width: 44px; min-height: 34px; border-radius: 10px; border: 2px dashed var(--accent); background: #fff6ea; color: var(--warn); font-weight: 900; cursor: pointer; transition: transform .1s; }
.fp-pick:hover { transform: scale(1.06); background: #ffe8c8; }
.fp-pick.is-zero { border-color: var(--line); background: transparent; color: var(--ink-2); font-weight: 600; }

/* Zehntausend */
.theme-zehntausend   { --theme: #7c3aed; --felt: #2d6a4f; --felt-2: #10301f; --back-1: #2d6a4f; --back-2: #1b4332; }
.zt-table { margin-bottom: 14px; padding: 16px; }
.zt-kept { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 6px 10px; border-radius: 12px; background: rgba(0,0,0,.18); }
.die.zt-small { --s: 34px; }
.zt-actions { justify-content: center; }
.zt-race { display: grid; gap: 8px; }
.zt-lane { display: grid; grid-template-columns: auto minmax(60px, 120px) 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); }
.zt-lane.is-turn { box-shadow: 0 0 0 2px #ffd479; }
.zt-lane .avatar { width: 26px; height: 26px; font-size: .8rem; }
.zt-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zt-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden; }
.zt-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffd479, #f08a24); }

.zt-bar i.w0 { width: 0%; }
.zt-bar i.w5 { width: 5%; }
.zt-bar i.w10 { width: 10%; }
.zt-bar i.w15 { width: 15%; }
.zt-bar i.w20 { width: 20%; }
.zt-bar i.w25 { width: 25%; }
.zt-bar i.w30 { width: 30%; }
.zt-bar i.w35 { width: 35%; }
.zt-bar i.w40 { width: 40%; }
.zt-bar i.w45 { width: 45%; }
.zt-bar i.w50 { width: 50%; }
.zt-bar i.w55 { width: 55%; }
.zt-bar i.w60 { width: 60%; }
.zt-bar i.w65 { width: 65%; }
.zt-bar i.w70 { width: 70%; }
.zt-bar i.w75 { width: 75%; }
.zt-bar i.w80 { width: 80%; }
.zt-bar i.w85 { width: 85%; }
.zt-bar i.w90 { width: 90%; }
.zt-bar i.w95 { width: 95%; }
.zt-bar i.w100 { width: 100%; }

/* Black Jack */
.theme-blackjack     { --theme: #0f7a3e; --felt: #13693a; --felt-2: #06301a; --back-1: #8b1a1a; --back-2: #5c0f0f; }
.bj-dealer { margin-bottom: 14px; }
.bj-cards { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 40px; }
.bj-seats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); margin-bottom: 14px; }
.bj-seat { border-radius: 16px; padding: 10px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); display: grid; gap: 8px; }
.bj-seat.is-me { grid-column: 1 / -1; }
.bj-seat.is-turn { box-shadow: 0 0 0 2px #ffd479; }
.bj-seat.st-bust { opacity: .7; }
.bj-seat-head { display: flex; align-items: center; gap: 8px; }
.bj-seat-head .avatar { width: 26px; height: 26px; font-size: .8rem; }
.bj-name { font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bj-total { text-align: center; color: rgba(255,255,255,.85); }
.bj-total strong { font-size: 1.3rem; color: #fff; }
.st-bj .bj-total { color: #ffd479; font-weight: 800; }
.bj-chip { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-weight: 900; font-size: .85rem; color: #fff; background: radial-gradient(circle, #d1352b 0 45%, #fff 46% 52%, #d1352b 53%); box-shadow: 0 2px 4px rgba(0,0,0,.35); text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.bj-chip-btn { width: 72px; height: 72px; font-size: 1.2rem; border: 0; cursor: pointer; transition: transform .12s; }
.bj-chip-btn:nth-of-type(2) { background: radial-gradient(circle, #2369d6 0 45%, #fff 46% 52%, #2369d6 53%); }
.bj-chip-btn:nth-of-type(3) { background: radial-gradient(circle, #1a1a1a 0 45%, #f2b315 46% 52%, #1a1a1a 53%); }
.bj-chip-btn:hover { transform: translateY(-4px) rotate(-8deg); }
.bj-actions .action-bar { justify-content: center; }

/* Hornochse */
.theme-hornochse     { --theme: #9a3412; --felt: #7a5a2b; --felt-2: #3a2810; --back-1: #9a3412; --back-2: #6b240c; }
.hcard {
  --card-w: clamp(44px, 6.2vw, 64px);
  position: relative; width: var(--card-w); height: calc(var(--card-w) * 1.42);
  display: inline-grid; place-items: center; align-content: center; gap: 0;
  border-radius: calc(var(--card-w) * .13); border: 2px solid #fff; color: #2a2018;
  background: linear-gradient(160deg, #fff, #f1ebe2); font-family: var(--font-display); font-weight: 900;
  box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.2); vertical-align: bottom;
  transition: transform .15s cubic-bezier(.2,1.4,.4,1);
}
.hcard b { font-size: calc(var(--card-w) * .42); line-height: 1; }
.hcard small { font-size: calc(var(--card-w) * .16); letter-spacing: -1px; color: #9a3412; line-height: 1; }
.hcard.b2 { background: linear-gradient(160deg, #e8f1ff, #bcd4ff); }
.hcard.b3 { background: linear-gradient(160deg, #fff6d6, #ffd979); }
.hcard.b5 { background: linear-gradient(160deg, #ffe0d6, #ff9f80); }
.hcard.b7 { background: linear-gradient(160deg, #f1ddff, #c38bff); }
.hcard.empty { background: transparent; border: 2px dashed rgba(255,255,255,.3); box-shadow: none; }
.hcard.ho-danger { border-color: rgba(255,212,121,.6); }
.hcard.ho-sixth { border-color: rgba(255,90,90,.6); }
.hcard.ho-sixth small { color: rgba(255,120,120,.9); font-size: .8rem; }
.hcard.is-picked { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--accent); transform: translateY(-10px); }
.hcard.muted { opacity: .55; }
.card-btn:hover .hcard.playable { transform: translateY(-8px); }
.ho-rows { display: grid; gap: 8px; margin-bottom: 12px; padding: 12px; border-radius: var(--radius); background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); }
.ho-row { display: flex; align-items: center; gap: 10px; }
.ho-row-bulls { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.25); font-weight: 900; flex: none; }
.ho-take { margin: 0; flex: none; }
.ho-cards { display: flex; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.ho-reveal { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ho-rev { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: .85rem; }
.ho-rev.took { background: rgba(255,90,90,.35); }
.ho-waiting { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ho-who { font-size: .8rem; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.2); color: rgba(255,255,255,.75); }
.ho-who.done { background: rgba(29,154,85,.55); color: #fff; }
@media (max-width: 520px) {
  .ho-rows .hcard { --card-w: 38px; }
  .ho-row { gap: 6px; }
  .ho-cards { gap: 3px; }
}

/* Arschloch */
.theme-arschloch     { --theme: #6d28d9; --felt: #3f3f8f; --felt-2: #17173d; --back-1: #4c1d95; --back-2: #2e1065; }
.ah-seats { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); margin-bottom: 12px; }
.ah-seat { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); min-width: 0; }
.ah-seat.is-turn { box-shadow: 0 0 0 2px #ffd479; }
.ah-seat.passed { opacity: .6; }
.ah-seat .avatar { width: 26px; height: 26px; font-size: .8rem; }
.ah-name { flex: 1; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-name small { font-weight: 600; opacity: .7; }
.ah-title { font-size: .75rem; font-weight: 900; padding: 2px 8px; border-radius: 999px; background: #ffd479; color: #3b2a00; }
.ah-pass { font-size: .72rem; opacity: .8; }
.ah-table { margin-bottom: 14px; }
.ah-stack { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ah-play { display: inline-flex; gap: 4px; }
.ah-play:not(.is-top) { opacity: .6; }

/* Memory */
.theme-memory        { --theme: #db2777; --felt: #3b82c4; --felt-2: #1e3a6e; --back-1: #db2777; --back-2: #9d174d; }
.mm-board { display: grid; gap: clamp(6px, 1.2vw, 12px); grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; margin: 0 auto 14px; }
.mm-board.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mm-board.cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.mm-form { margin: 0; display: contents; }
.mm-card {
  aspect-ratio: 1; width: 100%; display: grid; place-items: center; border: 3px solid #fff; border-radius: 14px; padding: 0; cursor: default;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.22) 0 22%, transparent 23%), repeating-linear-gradient(45deg, var(--back-1) 0 8px, var(--back-2) 8px 16px);
  box-shadow: 0 4px 10px rgba(0,0,0,.25); transition: transform .15s ease;
}
button.mm-card { cursor: pointer; }
button.mm-card:hover { transform: translateY(-3px) scale(1.03); }
.mm-card.is-open { background: linear-gradient(160deg, #fff, #f3ece2); }
/* nur die gerade umgedrehte Karte animieren (data-anim/data-key im Spielfeld) */
.mm-card.anim-in { animation: mm-flip .35s ease; }
.mm-card.is-done { opacity: .75; border-color: currentColor; background: #fff; }
.mm-card.is-done.av-0, .mm-card.is-done.av-1, .mm-card.is-done.av-2, .mm-card.is-done.av-3, .mm-card.is-done.av-4, .mm-card.is-done.av-5, .mm-card.is-done.av-6, .mm-card.is-done.av-7 { box-shadow: inset 0 0 0 4px rgba(0,0,0,.08); }
.mm-face { font-size: clamp(1.6rem, 5vw, 3rem); line-height: 1; }
.cols-8 .mm-face { font-size: clamp(1.2rem, 3.4vw, 2.2rem); }
@keyframes mm-flip { from { transform: rotateY(90deg); } }
.mm-score { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mm-player { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px; background: rgba(255,255,255,.12); font-weight: 700; }
.mm-player .avatar { width: 24px; height: 24px; font-size: .75rem; }
.mm-player.is-turn { box-shadow: 0 0 0 2px #ffd479; }
.mm-moves { padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.2); font-size: .85rem; }

/* Solitär */
.theme-solitaer      { --theme: #15803d; --felt: #1f7a4a; --felt-2: #0b3d24; --back-1: #1e40af; --back-2: #1e3a8a; }
.sol { --gap: clamp(4px, 1vw, 10px); }
.sol-top { display: flex; gap: calc(var(--gap) * 2); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.sol { --card-w: clamp(38px, 9vw, 86px); }
.sol.fam-spider, .sol.fam-freecell { --card-w: clamp(32px, 8.2vw, 80px); }
.sol .pcard:not(.mini) { --card-w: inherit; }
.sol-stock { padding: 0; border: 0; background: none; cursor: pointer; }
.sol-stock:disabled { cursor: default; }
.sol-recycle { font-size: 1.6rem; color: rgba(255,255,255,.7); }
.sol-waste { display: flex; min-width: calc(var(--card-w, 60px) * 1.6); }
.sol-waste > * + * { margin-left: calc(var(--card-w) * -.5); }
.sol-waste .sol-under { pointer-events: none; }
.sol-cells, .sol-found, .sol-done { display: flex; gap: var(--gap); }
.sol-done { align-items: center; }
.sol-done .pcard + .pcard { margin-left: -12px; }
.sol-slot { min-width: 0; }
.sol-ace { color: rgba(255,255,255,.45); font-size: 1.3rem; }
.sol-tableau { display: grid; gap: var(--gap); grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: start; }
.sol-tableau.cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.sol-tableau.cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.sol-col { display: flex; flex-direction: column; align-items: center; min-height: calc(var(--card-w, 60px) * 1.6); padding-bottom: 20px; border-radius: 10px; }
.sol-col > * + * { margin-top: calc(var(--card-w) * -1.08); }
.sol-col > .sol-down + * { margin-top: calc(var(--card-w) * -1.24); }
.sol-col .sol-down { box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.sol-pick { position: relative; display: block; cursor: pointer; }
.sol-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.sol-pick input:checked + .pcard { box-shadow: 0 0 0 3px #ffd479, 0 6px 14px rgba(0,0,0,.35); transform: translateY(-4px); }
/* ausgewählte Folge: auch die Karten darunter hervorheben */
.sol-pick:has(input:checked) ~ .sol-pick .pcard { box-shadow: 0 0 0 3px #ffd479; }
.sol:has(input[name="from"]:checked) .sol-col, .sol:has(input[name="from"]:checked) .sol-slot { outline: 2px dashed rgba(255,212,121,.35); outline-offset: 2px; }
.sol .pcard[data-c]::after { content: none; }
.sol .pcard i { font-size: calc(var(--card-w) * .34); }
.sol .pcard b { font-size: calc(var(--card-w) * .36); }
.sol-tools { justify-content: center; margin-top: 16px; }
.sol-moves { padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.22); font-weight: 800; }
.sol-help { text-align: center; font-size: .82rem; color: rgba(255,255,255,.7); margin: 10px 0 0; }
@media (max-width: 520px) {
  .sol-col > * + * { margin-top: calc(var(--card-w) * -1.12); }
  .sol .pcard b { font-size: calc(var(--card-w) * .38); }
}
/* Solitär-Karten: Wert und Farbe oben, damit sie auch im Stapel lesbar sind */
.sol .pcard:not(.card-back):not(.empty) { grid-template-columns: 1fr auto; place-items: start; align-content: start; padding: 2px calc(var(--card-w) * .07); gap: 0; }
.sol .pcard:not(.card-back):not(.empty)::before { content: none; }
.sol .pcard:not(.card-back):not(.empty) b { font-size: calc(var(--card-w) * .34); line-height: 1.05; }
.sol .pcard:not(.card-back):not(.empty) i { font-size: calc(var(--card-w) * .3); line-height: 1.1; justify-self: end; }
.sol .pcard.mini:not(.card-back):not(.empty) b, .sol .pcard.mini i { font-size: 13px; }
.felt .panel .muted:not(.pcard):not(.fcard), .felt .panel small.muted { color: var(--ink-2); }
.sol .pcard[data-s]:not(.mini)::after { content: attr(data-s); position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-size: calc(var(--card-w) * .62); line-height: 1; opacity: .9; transform: none; }

/* Filter auf der Startseite (ohne JavaScript, per :has) */
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 800; font-size: .92rem; box-shadow: 0 1px 2px rgba(42,32,24,.06); transition: background .15s, color .15s; }
.chip input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.games-section:has(#kind-karten:checked) .game-card:not(.tag-karten),
.games-section:has(#kind-wuerfel:checked) .game-card:not(.tag-wuerfel),
.games-section:has(#kind-brett:checked) .game-card:not(.tag-brett),
.games-section:has(#kind-raetsel:checked) .game-card:not(.tag-raetsel),
.games-section:has(#kind-allein:checked) .game-card:not(.tag-allein),
.games-section:has(#kind-gruppe:checked) .game-card:not(.tag-gruppe),
.games-section:has(#kind-kinder:checked) .game-card:not(.tag-kinder) { display: none; }

/* Himmelhoch */
.theme-himmelhoch    { --theme: #0284c7; --felt: #3a8fd0; --felt-2: #173f73; --back-1: #6aa9e0; --back-2: #3c7cc0; }
.skcard {
  --card-w: clamp(46px, 7vw, 70px);
  position: relative; display: inline-grid; place-items: center; width: var(--card-w); height: calc(var(--card-w) * 1.42);
  border-radius: calc(var(--card-w) * .14); border: 2px solid #fff; font-family: var(--font-display); font-weight: 900; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.2); box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.22); vertical-align: bottom;
  transition: transform .15s cubic-bezier(.2,1.4,.4,1);
}
.skcard b { font-size: calc(var(--card-w) * .46); line-height: 1; }
.skcard.t-neg { background: linear-gradient(160deg, #4f46e5, #312e81); }
.skcard.t-zero { background: linear-gradient(160deg, #7dd3fc, #38bdf8); color: #08304a; text-shadow: none; }
.skcard.t-low { background: linear-gradient(160deg, #4ade80, #16a34a); }
.skcard.t-mid { background: linear-gradient(160deg, #fde047, #eab308); color: #4a3200; text-shadow: none; }
.skcard.t-high { background: linear-gradient(160deg, #f87171, #dc2626); }
.skcard.card-back {
  background:
    radial-gradient(ellipse 30% 14% at 38% 46%, rgba(255,255,255,.95) 98%, transparent),
    radial-gradient(ellipse 22% 16% at 56% 40%, rgba(255,255,255,.95) 98%, transparent),
    radial-gradient(ellipse 26% 12% at 62% 50%, rgba(255,255,255,.95) 98%, transparent),
    linear-gradient(160deg, #7cc0f0, #2f73c0);
}
.skcard.gone { background: transparent; border: 2px dashed rgba(255,255,255,.25); box-shadow: none; }
.skcard.big { --card-w: clamp(60px, 9vw, 88px); }
.skcard.mini { --card-w: 30px; border-width: 1px; border-radius: 5px; }
.skcard.playable { box-shadow: 0 0 0 3px #ffd479, 0 0 14px rgba(255,212,121,.6); }
.card-btn:hover .skcard.playable { transform: translateY(-5px); }
.sk-piles .pile { align-content: start; }
.sk-grid { display: grid; grid-template-columns: repeat(4, max-content); gap: 8px; justify-content: center; }
.sk-grid.mini { gap: 3px; justify-content: start; }
.sk-grid .card-form { margin: 0; }
.sk-others { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.sk-other { padding: 10px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); display: grid; gap: 8px; }
.sk-other.is-turn { box-shadow: 0 0 0 2px #ffd479; }
.sk-other-name { display: flex; align-items: center; gap: 6px; font-weight: 800; min-width: 0; }
.sk-other-name > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-other-name .avatar { width: 24px; height: 24px; font-size: .75rem; }
.sk-reveal { display: flex; flex-wrap: wrap; gap: 14px; }
.sk-reveal-one { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: var(--surface-2); }
.sk-reveal-head { display: flex; gap: 8px; align-items: center; }
/* Aufgefächerte Karten (Ablage bei Klondike): Wert und Farbe untereinander im sichtbaren Streifen links */
.sol .pcard.sol-under:not(.card-back):not(.empty), .sol .sol-done .pcard:not(.card-back):not(.empty) { grid-template-columns: auto; justify-items: start; }
.sol .pcard.sol-under:not(.card-back):not(.empty) i, .sol .sol-done .pcard:not(.card-back):not(.empty) i { justify-self: start; }
.sol .pcard.sol-under:not(.card-back):not(.empty) b { font-size: calc(var(--card-w) * .3); letter-spacing: -.04em; }
.sol .pcard.sol-under[data-s]:not(.mini)::after { content: none; }
.sol-waste { align-items: flex-start; }

/* Karten ziehen */
label.sol-pick, label.sr-pick { touch-action: none; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; filter: drop-shadow(0 14px 18px rgba(0,0,0,.35)); }
.drag-ghost > * { transform: rotate(2deg); }
.drag-ghost.sol > * + * { margin-top: calc(var(--card-w) * -1.08); }
.is-drag-src { opacity: .25; }
body.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.is-dragging .drop-hover.drop-hover.drop-hover { outline: 3px solid #ffd479; outline-offset: 3px; border-radius: 12px; }

/* =====================================================================
   4.7 – Konto, Freunde, Einladungen, Einrichtung, App-Installation
   ===================================================================== */
/* Menü oben */
.topnav { align-items: center; gap: 6px; }
.topnav a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 10px; border-radius: 12px; font-weight: 700; transition: background .15s; }
.topnav a:hover { background: rgba(255,255,255,.12); opacity: 1; }
.topnav .avatar { width: 28px; height: 28px; font-size: .85rem; box-shadow: 0 0 0 2px rgba(255,255,255,.75); }
.nav-friends { position: relative; }
.nav-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 900; display: inline-grid; place-items: center; box-shadow: 0 0 0 2px #5a3524; animation: pop .35s cubic-bezier(.2,1.6,.4,1); }
.nav-badge[hidden] { display: none; }
.nav-login { background: rgba(255,255,255,.14); }
@keyframes pop { from { transform: scale(.4); } to { transform: scale(1); } }
@media (max-width: 560px) {
  .topnav .nav-text { display: none; }
  .topnav .nav-games { display: none; }
  .nav-friends .nav-badge { position: absolute; top: 0; right: -2px; }
  .brand { font-size: 1rem; }
}

/* Vorteile + Hinweis auf der Startseite */
.benefits { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.benefits li { display: flex; gap: 12px; align-items: flex-start; }
.benefit-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--red)); box-shadow: 0 3px 8px rgba(224,53,43,.25); }
.benefits li:nth-child(2) .benefit-icon { background: linear-gradient(135deg, #3f8cf0, var(--blue)); box-shadow: 0 3px 8px rgba(35,105,214,.25); }
.benefits li:nth-child(3) .benefit-icon { background: linear-gradient(135deg, #34b874, var(--green)); box-shadow: 0 3px 8px rgba(29,154,85,.25); }
.benefits.is-compact { margin-bottom: 6px; }
.benefits.is-compact .benefit-icon { width: 32px; height: 32px; border-radius: 10px; }
.account-teaser {
  display: grid; gap: 18px; align-items: center; padding: 20px; border-radius: 22px;
  background: radial-gradient(circle at 100% 0, rgba(240,138,36,.16), transparent 45%), var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.teaser-title { font-size: 1.25rem; margin: 0; }
.teaser-actions { display: grid; gap: 8px; justify-items: stretch; text-align: center; }
@media (min-width: 760px) {
  .account-teaser { grid-template-columns: 1fr auto; padding: 22px 26px; }
  .teaser-actions { min-width: 240px; }
}
.section-note { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; color: var(--ok); background: var(--ok-bg); padding: 2px 9px; border-radius: 999px; }

/* Anmelden / Registrieren */
.auth-panel { margin-top: 8px; }
.auth-aside { margin-top: 14px; }
.auth-switch { text-align: center; margin: 16px 0 0; color: var(--ink-2); }
.field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.field-row a { font-weight: 600; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; cursor: pointer; min-height: var(--tap); padding-top: 9px; }
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice-ok { background: var(--ok-bg); color: #0d5232; display: flex; gap: 8px; align-items: flex-start; }
.page-title { display: flex; align-items: center; gap: 10px; font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin: 4px 0 16px; }

/* Konto */
.account-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.account-head .panel-h1 { margin: 0; }
.account-head p { margin: 2px 0 0; overflow-wrap: anywhere; }
.account-head > div { flex: 1 1 180px; min-width: 0; }
.avatar-lg { width: 58px; height: 58px; font-size: 1.6rem; }
.account .panel { margin-top: 14px; }
.device-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.device-list li { padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.danger-zone summary { cursor: pointer; color: var(--bad); }

/* Freunde */
.friends-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .friends-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.panel-attn { box-shadow: inset 0 0 0 2px var(--accent), var(--shadow); }
.people { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.person { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); flex-wrap: wrap; }
.person-name { flex: 1 1 120px; min-width: 0; font-weight: 800; overflow-wrap: anywhere; }
.person-name small { font-weight: 600; }
.person-actions { display: flex; gap: 6px; align-items: center; }
.person-actions .tag { display: inline-flex; gap: 4px; align-items: center; padding: 3px 9px; }
.people-compact .person { padding: 6px 8px; }
.avatar-wrap { position: relative; display: inline-flex; }
.online-dot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: #2bc46d; box-shadow: 0 0 0 2px var(--surface-2); }
.username-chip { padding: 2px 8px; border-radius: 8px; background: var(--bg-2); font-family: var(--font-display); }

/* Offene Tische von Freunden + Einladungen */
.friend-table { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.friend-table .my-game-body { flex: 1 1 180px; }
.friend-table form { margin: 0; }
.invite-card { border-color: #f3c27e; box-shadow: inset 4px 0 0 var(--accent), var(--shadow); animation: invite-in .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes invite-in { from { transform: translateY(8px) scale(.98); opacity: 0; } }
.invite-panel .btn-small { min-height: 34px; }
.side-hint { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 16px; border: 1px dashed #d9c4ab; color: var(--ink-2); font-size: .92rem; }
.side-hint .icon { margin-top: 2px; color: var(--accent); }
.visibility { margin-top: 10px; }
.visibility .check { font-weight: 600; }

/* Meldungen mit Link (z. B. neue Einladung) */
.toast-invite { background: linear-gradient(135deg, #5a3524, #8a4524); pointer-events: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.toast-link { pointer-events: auto; color: #fff; font-weight: 800; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.18); text-decoration: none; margin-left: auto; }
.confirm.is-info [value=cancel] { display: none; }
.confirm.is-info .confirm-actions { grid-template-columns: 1fr; }
.confirm.is-info .confirm-icon { background: linear-gradient(135deg, #3f8cf0, var(--blue)); font-style: italic; }

/* Einrichtung + Verwaltung */
.install { max-width: 640px; }
.install-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.install-head img { border-radius: 16px; box-shadow: var(--shadow); }
.install-head .panel-h1 { margin: 0; }
.install .panel-title { margin-top: 20px; }
.checklist { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 6px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.checklist small { display: block; color: var(--ink-2); font-size: .82rem; margin-top: 2px; }
.check-mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-weight: 900; }
.check-mark .icon { width: 16px; height: 16px; }
.is-ok .check-mark { background: var(--ok); }
.is-bad .check-mark { background: var(--bad); }
.is-warn .check-mark { background: #e3a008; }
.fieldset { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px 16px; margin: 0; display: grid; gap: 12px; min-width: 0; }
.fieldset legend { font-weight: 800; padding: 0 6px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.field-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.field-grid .field-port { max-width: 130px; }
.field-grid:has(.field-port) { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 480px) { .field-grid { grid-template-columns: 1fr; } .field-grid:has(.field-port) { grid-template-columns: 1fr; } }
.smtp-fields { display: grid; gap: 12px; }
@supports selector(:has(*)) {
  .fieldset:not(:has(input[value=smtp]:checked)) .smtp-fields { display: none; }
}
.admin-settings { display: grid; gap: 16px; margin-top: 16px; align-items: start; }
@media (min-width: 900px) { .admin-settings { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }

/* App installieren + Offline-Seite */
.foot { display: grid; gap: 6px; justify-items: center; }
.install-btn[hidden] { display: none; }
.install-btn { color: var(--brand-2); }
.offline { margin-top: 10vh; }
.offline-icon { border-radius: 22px; box-shadow: var(--shadow); }
@media (display-mode: standalone) {
  .topbar { padding-top: max(14px, env(safe-area-inset-top)); }
}
.field small { font-weight: 500; }
.people-compact .person, .person { flex-wrap: nowrap; }
.person-name { flex: 1 1 0; }
.person-actions { flex: none; }
@media (max-width: 380px) { .person { flex-wrap: wrap; } }

/* Verwaltung: Spieleliste mit Mitspielern */
.admin-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.chip-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 800; font-size: .9rem; color: var(--ink); text-decoration: none; }
.chip-link.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip-link a { color: inherit; display: inline-flex; }
.who { min-width: 200px; }
.who-chip { display: inline-flex; align-items: center; gap: 4px; margin: 2px 4px 2px 0; padding: 2px 9px; border-radius: 999px; background: var(--bg-2); font-size: .85rem; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.who-chip .icon { width: 14px; height: 14px; }
.who-chip small { font-weight: 600; opacity: .75; }
.who-chip.is-account { background: var(--ok-bg); color: #0d5232; box-shadow: inset 0 0 0 1px #a8dcbd; }
.who-chip.is-account:hover { background: #cdeedb; }
.who-chip.is-bot { background: #e7eefb; color: #2a4f8f; }
.tag-lock { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--ok-bg); color: var(--ok); font-size: .8rem; }
.tag-lock .icon { width: 14px; height: 14px; }
.admin-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; font-size: .88rem; color: var(--ink-2); }
.admin-note .icon { color: var(--ok); margin-top: 2px; }

/* Rommé: Auswahl live zählen */
.rm-score .stage-big { transition: color .2s, transform .2s; }
.rm-score.is-preview .stage-big { color: #ffe08a; }
.rm-score.is-enough .stage-big { color: #8ff0b5; transform: scale(1.06); }
.rm-meter { position: relative; display: flex; width: min(220px, 90%); height: 8px; margin: 10px auto 6px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.rm-meter[hidden] { display: none; }
.rm-meter i { display: block; height: 100%; width: 0; transition: width .25s ease; }
.rm-meter-done { background: #fff; }
.rm-meter-sel { background: #ffd479; }
.rm-score.is-enough .rm-meter-sel { background: #6fe39f; }
.rm-score.is-enough [data-rm-note] { color: #b7f5cf; font-weight: 800; }
.rm-lay-pts { font-weight: 900; }
.rm-sel { align-self: center; font-weight: 700; font-size: .92rem; color: rgba(255,255,255,.85); }
.rm-sel.is-ok { color: #b7f5cf; }
.rm-sel.is-bad { color: #ffd479; }
.laid-group.is-full .laid-label { opacity: .7; }

/* =====================================================================
   Mahjongg
   ===================================================================== */
.theme-mahjongg { --theme: #0f7a5c; --felt: #1c7a5e; --felt-2: #0b3a2c; --back-1: #0f7a5c; --back-2: #0a5240; }
.mj-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; margin-bottom: 10px; color: rgba(255,255,255,.9); }
.mj-stat { padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.22); font-size: .9rem; }
.mj-stat.is-stuck { background: #ffd479; color: #5c3b00; font-weight: 800; }
.mj-toggle { display: inline-flex; gap: 6px; align-items: center; font-size: .9rem; cursor: pointer; min-height: 36px; }
.mj-toggle input { width: 18px; height: 18px; accent-color: #ffd479; }
.mj-wrap { container-type: inline-size; width: 100%; }
.mj-board {
  /* Steinbreite aus der verfügbaren Breite; halbe Einheiten -> Breite in Steinen = w/2 */
  --tw: min(64px, calc((100cqw - 12px) / (var(--w) / 2 + .35)));
  --th: calc(var(--tw) * 1.3);
  --dz: calc(var(--tw) * .17);
  position: relative; margin: 0 auto;
  width: calc(var(--w) / 2 * var(--tw) + var(--dz) * 2);
  height: calc(var(--h) / 2 * var(--th) + var(--dz) * 2);
}
.mj-tile {
  position: absolute; box-sizing: border-box;
  left: calc(var(--x) / 2 * var(--tw) - var(--z) * var(--dz) + var(--dz) * 2);
  top: calc(var(--y) / 2 * var(--th) - var(--z) * var(--dz) + var(--dz) * 2);
  width: var(--tw); height: var(--th);
  border-radius: calc(var(--tw) * .12);
  --face: #fffdf6;
  background: linear-gradient(150deg, var(--face) 0%, color-mix(in srgb, var(--face) 88%, #c9a86a) 100%);
  border: 1px solid #c9b48c;
  /* Dicke des Steins (rechts unten): heller Rand + grüner Rücken, dazu ein Schatten, der mit der Höhe wächst */
  box-shadow: 1px 1px 0 #e3d0a8, calc(var(--dz) * .5) calc(var(--dz) * .5) 0 #d8c39a, var(--dz) var(--dz) 0 #1d6b52,
    calc(var(--dz) + 2px) calc(var(--dz) + 4px) calc(4px + var(--z) * 3px) rgba(0,0,0,calc(.28 + var(--z) * .05));
  display: grid; place-items: center; user-select: none; -webkit-user-select: none;
  transition: transform .12s, filter .15s, opacity .2s;
}
label.mj-tile { cursor: pointer; }
label.mj-tile:hover { transform: translateY(-2px); }
.mj-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mj-tile:has(input:checked) { background: linear-gradient(150deg, #fff6c9, #ffe28a); border-color: #e0a100; transform: translateY(-3px); box-shadow: 0 0 0 3px #ffb627, calc(var(--dz) * .9) calc(var(--dz) * .9) 0 #1d6b52, 0 8px 16px rgba(0,0,0,.4); z-index: 2; }
.mj-tile:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 2px; }
.mj-tile.is-hint { animation: mj-hint 1s ease-in-out 3; box-shadow: 0 0 0 3px #6fe39f, calc(var(--dz) * .9) calc(var(--dz) * .9) 0 #1d6b52; z-index: 2; }
.mj-tile.is-wrong { animation: mj-wrong .3s; }
.mj-tile.is-going { opacity: .2; transform: scale(.9); }
.mj.show-free .mj-tile.is-blocked { filter: brightness(.62) saturate(.6); }
@keyframes mj-hint { 50% { transform: translateY(-5px); } }
@keyframes mj-wrong { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.mj-face { display: grid; justify-items: center; line-height: 1; font-family: "Noto Serif CJK SC", "Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", serif; pointer-events: none; }
.mj-face b { font-size: calc(var(--tw) * .5); font-weight: 900; }
.mj-face small { font-size: calc(var(--tw) * .2); font-weight: 800; margin-top: calc(var(--tw) * .04); letter-spacing: -.02em; }
.mj-s-k b { color: #1f5fbf; font-family: var(--font-display); }
.mj-s-k small { color: #1f5fbf; }
.mj-s-b b { color: #1b7d3a; font-family: var(--font-display); }
.mj-s-b small { color: #1b7d3a; font-family: var(--font); letter-spacing: -.1em; }
.mj-s-z b { color: #1d1d1d; }
.mj-s-z small { color: #c4231b; }
.mj-s-w b { color: #20304a; }
.mj-s-w small { color: #6c5b4e; font-family: var(--font); }
.mj-s-dR b { color: #c4231b; font-size: calc(var(--tw) * .62); }
.mj-s-dG b { color: #1b7d3a; font-size: calc(var(--tw) * .62); }
.mj-s-dW b { width: calc(var(--tw) * .5); height: calc(var(--tw) * .7); border: calc(var(--tw) * .06) solid #2a5bb8; border-radius: 4px; }
.mj-s-f b, .mj-s-s b { font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: calc(var(--tw) * .48); }
.mj-s-f small, .mj-s-s small { font-family: var(--font); font-size: calc(var(--tw) * .14); color: #8a3d6b; }
.mj-s-s small { color: #8a5a1f; }
.mj-actions { justify-content: center; }
@media (max-width: 560px) { .mj-face small { display: none; } .mj-s-f small, .mj-s-s small { display: none; } }
.mj-x0{--x:0}
.mj-x1{--x:1}
.mj-x2{--x:2}
.mj-x3{--x:3}
.mj-x4{--x:4}
.mj-x5{--x:5}
.mj-x6{--x:6}
.mj-x7{--x:7}
.mj-x8{--x:8}
.mj-x9{--x:9}
.mj-x10{--x:10}
.mj-x11{--x:11}
.mj-x12{--x:12}
.mj-x13{--x:13}
.mj-x14{--x:14}
.mj-x15{--x:15}
.mj-x16{--x:16}
.mj-x17{--x:17}
.mj-x18{--x:18}
.mj-x19{--x:19}
.mj-x20{--x:20}
.mj-x21{--x:21}
.mj-x22{--x:22}
.mj-x23{--x:23}
.mj-x24{--x:24}
.mj-x25{--x:25}
.mj-x26{--x:26}
.mj-x27{--x:27}
.mj-x28{--x:28}
.mj-x29{--x:29}
.mj-x30{--x:30}
.mj-y0{--y:0}
.mj-y1{--y:1}
.mj-y2{--y:2}
.mj-y3{--y:3}
.mj-y4{--y:4}
.mj-y5{--y:5}
.mj-y6{--y:6}
.mj-y7{--y:7}
.mj-y8{--y:8}
.mj-y9{--y:9}
.mj-y10{--y:10}
.mj-y11{--y:11}
.mj-y12{--y:12}
.mj-y13{--y:13}
.mj-y14{--y:14}
.mj-y15{--y:15}
.mj-y16{--y:16}
.mj-y17{--y:17}
.mj-y18{--y:18}
.mj-y19{--y:19}
.mj-y20{--y:20}
.mj-z0{--z:0;--face:#eadcc0}
.mj-z1{--z:1;--face:#f3e8d2}
.mj-z2{--z:2;--face:#f9f1e2}
.mj-z3{--z:3;--face:#fdf8ee}
.mj-z4{--z:4;--face:#fffdf8}
.mj-z5{--z:5}
.mj-w2{--w:2}
.mj-w3{--w:3}
.mj-w4{--w:4}
.mj-w5{--w:5}
.mj-w6{--w:6}
.mj-w7{--w:7}
.mj-w8{--w:8}
.mj-w9{--w:9}
.mj-w10{--w:10}
.mj-w11{--w:11}
.mj-w12{--w:12}
.mj-w13{--w:13}
.mj-w14{--w:14}
.mj-w15{--w:15}
.mj-w16{--w:16}
.mj-w17{--w:17}
.mj-w18{--w:18}
.mj-w19{--w:19}
.mj-w20{--w:20}
.mj-w21{--w:21}
.mj-w22{--w:22}
.mj-w23{--w:23}
.mj-w24{--w:24}
.mj-w25{--w:25}
.mj-w26{--w:26}
.mj-w27{--w:27}
.mj-w28{--w:28}
.mj-w29{--w:29}
.mj-w30{--w:30}
.mj-w31{--w:31}
.mj-w32{--w:32}
.mj-h2{--h:2}
.mj-h3{--h:3}
.mj-h4{--h:4}
.mj-h5{--h:5}
.mj-h6{--h:6}
.mj-h7{--h:7}
.mj-h8{--h:8}
.mj-h9{--h:9}
.mj-h10{--h:10}
.mj-h11{--h:11}
.mj-h12{--h:12}
.mj-h13{--h:13}
.mj-h14{--h:14}
.mj-h15{--h:15}
.mj-h16{--h:16}
.mj-h17{--h:17}
.mj-h18{--h:18}
.mj-h19{--h:19}
.mj-h20{--h:20}
.mj-h21{--h:21}
.mj-h22{--h:22}

/* Memory: Motivauswahl */
.motif-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); font-weight: 400; }
.motif { position: relative; cursor: pointer; }
.motif input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.motif-card { display: grid; gap: 6px; justify-items: center; padding: 10px 6px 8px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); transition: border-color .15s, box-shadow .15s, transform .15s; height: 100%; }
.motif-pics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; font-size: 1.35rem; line-height: 1.1; font-style: normal; }
.motif-pics i { font-style: normal; }
.motif-name { font-weight: 800; font-size: .82rem; text-align: center; line-height: 1.2; }
.motif input:checked + .motif-card { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,138,36,.25); transform: translateY(-2px); }
.motif input:focus-visible + .motif-card { outline: 3px solid var(--accent); outline-offset: 2px; }
.motif:hover .motif-card { border-color: #e9b98a; }

.admin-errors { margin-top: 16px; }
.error-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; }
.error-list li { padding: 8px 10px; border-radius: 10px; background: var(--bad-bg); overflow-wrap: anywhere; }
.error-list time { font-weight: 800; margin-right: 6px; }

/* Spielregeln (Hausregeln) */
.rules-box { border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; background: var(--surface-2); }
.rules-box summary, .rules-edit summary { cursor: pointer; font-weight: 800; display: flex; align-items: center; gap: 8px; min-height: var(--tap); flex-wrap: wrap; }
.rules-box summary small { font-weight: 600; }
.rules-box[open] { padding-bottom: 14px; }
.rule-fields { display: grid; gap: 12px; margin-top: 6px; }
.rule-help { display: block; font-weight: 500; font-size: .82rem; margin-top: 2px; }
.rule-field .check { padding-top: 0; }
.table-rules { margin-top: 16px; }
.table-rules .panel-title small { font-weight: 600; font-size: .85rem; }
.rule-list { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 4px; }
.rule-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); font-size: .92rem; }
.rule-list li strong { text-align: right; }
.rule-list li.is-changed { background: #fff1d6; box-shadow: inset 3px 0 0 var(--accent); }
.rules-edit summary { color: var(--brand-2); }
.rules-edit .form { margin-top: 4px; }
.fan-swap { display: grid; place-items: center; align-content: center; gap: 0; font-size: 1.3rem; font-weight: 900; color: #ffd479; border-color: rgba(255,212,121,.7); }
.fan-swap small { font-size: .62rem; font-weight: 800; letter-spacing: .02em; }

/* =====================================================================
   Ludo (Mensch ärgere dich nicht)
   ===================================================================== */
.theme-ludo { --theme: #c0392b; --felt: #e9c27a; --felt-2: #b8863b; --back-1: #c0392b; --back-2: #8e2a20; }
.lu-c-rot { --pc: #e0352b; --pc-2: #9e1d16; --pc-soft: #fbd3cf; }
.lu-c-blau { --pc: #2369d6; --pc-2: #143f86; --pc-soft: #cfe0fb; }
.lu-c-gruen { --pc: #1d9a55; --pc-2: #0f5c32; --pc-soft: #cdeedb; }
.lu-c-gelb { --pc: #f2b315; --pc-2: #a87805; --pc-soft: #fdeec4; }
.lu { display: grid; gap: 16px; align-items: start; }
@media (min-width: 860px) { .lu { grid-template-columns: 220px minmax(0, 1fr); } }
.lu-side { display: grid; gap: 12px; align-content: start; }
.lu-dicebox { display: grid; justify-items: center; gap: 10px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 3px var(--pc, rgba(255,255,255,.3)); }
.lu-dicebox .pile-label { color: #3b2410; font-weight: 900; }
.lu-die { width: 64px; height: 64px; }
.lu-roll { width: 100%; }
.lu-dicebox .pile-note { color: #3b2410; margin: 0; }
.lu-players { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lu-players li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.35); font-weight: 700; color: #2a2018; }
.lu-players li span { margin-left: auto; font-size: .85rem; }
.lu-players li.is-turn { background: #fff; box-shadow: inset 4px 0 0 var(--pc); }
.lu-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--pc); box-shadow: inset 0 -2px 0 var(--pc-2); }
@media (max-width: 859px) { .lu-side { grid-template-columns: auto 1fr; align-items: center; } .lu-dicebox { padding: 10px; } .lu-die { width: 52px; height: 52px; } }

.lu-board {
  position: relative; display: grid; grid-template-columns: repeat(11, 1fr); gap: clamp(2px, .7vw, 6px);
  width: 100%; max-width: 600px; aspect-ratio: 1; margin: 0 auto; padding: clamp(6px, 2vw, 16px);
  border-radius: 20px; background: radial-gradient(circle at 50% 45%, #fff6dc, #f3dca4 70%, #e5c27a);
  box-shadow: inset 0 0 0 3px rgba(120,80,20,.35), 0 10px 26px rgba(0,0,0,.3);
}
.lu-cell, .lu-empty { aspect-ratio: 1; display: grid; place-items: center; position: relative; }
.lu-cell { border-radius: 50%; background: #fffdf6; box-shadow: inset 0 0 0 2px rgba(80,50,20,.35), inset 0 -3px 0 rgba(0,0,0,.08); }
.lu-home, .lu-yard { background: var(--pc-soft); box-shadow: inset 0 0 0 2px var(--pc), inset 0 -3px 0 rgba(0,0,0,.08); }
.lu-start { background: var(--pc); box-shadow: inset 0 0 0 2px var(--pc-2); }
.lu-cell.is-target::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 3px dashed rgba(42,32,24,.45); }
.lu-cell.is-preview { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #2a2018; z-index: 2; }
.lu-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: clamp(1.4rem, 5vw, 2.4rem); opacity: .55; pointer-events: none; }
.lu-piece {
  width: 74%; height: 74%; border-radius: 50%; border: 0; padding: 0; position: relative; z-index: 1;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 55%, #fff) 0 18%, var(--pc) 45%, var(--pc-2) 100%);
  box-shadow: 0 3px 0 var(--pc-2), 0 5px 8px rgba(0,0,0,.35);
}
.lu-piece::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: rgba(255,255,255,.25); }
button.lu-piece { cursor: pointer; }
.lu-piece.is-movable { animation: lu-bob 1s ease-in-out infinite; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #2a2018, 0 6px 12px rgba(0,0,0,.4); }
.lu-piece.is-movable:hover, .lu-piece.is-movable:focus-visible { animation: none; transform: scale(1.12); outline: none; }
.lu-piece.is-moved { box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 3px 0 var(--pc-2), 0 5px 8px rgba(0,0,0,.35); }
@keyframes lu-bob { 50% { transform: translateY(-12%); } }
@media (prefers-reduced-motion: reduce) { .lu-piece.is-movable { animation: none; } }

/* =====================================================================
   Dame
   ===================================================================== */
.theme-dame { --theme: #6b3f22; --felt: #4a6b4f; --felt-2: #1f3324; --back-1: #6b3f22; --back-2: #3e2412; }
.dm { display: grid; gap: 12px; justify-items: center; }
.dm-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dm-who { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(0,0,0,.22); color: #fff; font-weight: 800; }
.dm-who small { font-weight: 600; opacity: .8; }
.dm-who .dm-piece { width: 22px; height: 22px; }
.dm-who.is-turn { background: #fff; color: var(--ink); box-shadow: 0 0 0 3px #ffd479; }
.dm-board {
  display: grid; grid-template-columns: repeat(8, 1fr); width: min(100%, 560px); aspect-ratio: 1;
  border: clamp(6px, 1.6vw, 12px) solid #4a2a14; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.15);
  background: #4a2a14;
}
.dm-sq { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 0; padding: 0; }
.dm-sq.is-light { background: #f0d9b5; }
.dm-sq.is-dark { background: #b07a4f; }
.dm-sq.is-last { background: #c99a52; }
.dm-sq.is-captured::after { content: "✕"; color: rgba(120,20,10,.55); font-weight: 900; font-size: clamp(.9rem, 4vw, 1.6rem); }
button.dm-target { cursor: pointer; }
button.dm-target::before { content: ""; width: 34%; height: 34%; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.dm:has(input[name=from]:checked) button.dm-target:not(.is-sel)::before { opacity: .25; }
button.dm-target.is-sel::before, button.dm-target.is-preview::before, button.dm-target.drop-hover::before { background: #ffd479; box-shadow: 0 0 0 4px rgba(255,212,121,.5); opacity: 1; }
.dm-pick { display: grid; place-items: center; width: 100%; height: 100%; cursor: pointer; position: relative; }
.dm-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dm-piece {
  width: 78%; height: 78%; border-radius: 50%; display: grid; place-items: center; position: relative;
  box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 6px 10px rgba(0,0,0,.35);
}
.dm-piece.dm-w { background: radial-gradient(circle at 50% 42%, #fffaf0 0 38%, #efe3cc 40% 58%, #fffaf0 60%, #e2d3b5 100%); }
.dm-piece.dm-b { background: radial-gradient(circle at 50% 42%, #4a3a33 0 38%, #2a1f1b 40% 58%, #463630 60%, #1a1210 100%); }
.dm-piece b { font-size: clamp(.9rem, 3.6vw, 1.7rem); line-height: 1; color: #c48a14; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.dm-piece.dm-b b { color: #ffd479; }
.dm-piece.is-king { box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 6px 0 rgba(0,0,0,.2), 0 9px 12px rgba(0,0,0,.35); }
.dm-pick .dm-piece { box-shadow: 0 0 0 3px rgba(255,212,121,.65), 0 3px 0 rgba(0,0,0,.35), 0 6px 10px rgba(0,0,0,.35); }
.dm-pick:hover .dm-piece { transform: scale(1.06); }
.dm-pick input:checked + .dm-piece { transform: translateY(-4px) scale(1.08); box-shadow: 0 0 0 4px #ffd479, 0 10px 16px rgba(0,0,0,.45); }
.dm-pick input:focus-visible + .dm-piece { outline: 3px solid #fff; outline-offset: 2px; }
.dm-actions { justify-content: center; align-items: center; color: #fff; }
.dm-actions .pile-note { color: rgba(255,255,255,.85); }
.drag-ghost .dm-piece { width: 100%; height: 100%; }

/* Handkarten sortieren */
.hand-title { flex-wrap: wrap; }
.hand-sort { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: .8rem; font-weight: 700; }
.hand-sort-label { opacity: .75; margin-right: 2px; }
.hand-sort-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.15); color: inherit; font: inherit; cursor: pointer; }
.hand-sort-btn .icon { width: 13px; height: 13px; }
span.hand-sort-btn { cursor: default; }
.hand-sort-btn.is-active { background: #fff; color: var(--ink); border-color: #fff; }
.hand-sort-form { display: none; }
[data-sortable] > label { touch-action: manipulation; }
[data-sortable] > label.is-sorting { z-index: 5; pointer-events: none; }
[data-sortable] > label.is-sorting > * { transform: rotate(-3deg) scale(1.06); box-shadow: 0 0 0 3px #ffd479, 0 16px 24px rgba(0,0,0,.4); transition: transform .12s; }
[data-sortable].is-sorting-box > label:not(.is-sorting) { transition: transform .15s; }
body:has(.is-sorting-box) { user-select: none; -webkit-user-select: none; }

/* Push-Nachrichten */
.push-state { margin: 8px 0 6px; }
.push-status { font-weight: 800; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.push-status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #c9b9a4; }
.push-status.is-on { color: var(--ok); }
.push-status.is-on::before { background: #2bc46d; box-shadow: 0 0 0 3px rgba(43,196,109,.2); }
.push-prefs { display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 6px; }
.push-prefs .sound-row { font-weight: 700; }
.push-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 12px 16px; border-radius: 18px; background: linear-gradient(120deg, #fff4dc, #ffe7c2); border: 1px solid #f3c27e; box-shadow: var(--shadow); }
.push-banner[hidden] { display: none; }
.push-banner-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: #fff; flex: none; }
.push-banner-icon .icon { animation: ring 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 85% { transform: rotate(-12deg); } 95% { transform: rotate(6deg); } }
.push-banner-text { flex: 1 1 220px; }

.admin-music { margin-top: 16px; }
.admin-music .button-row { margin-bottom: 10px; }
.music-upload input[type=file] { padding: 6px; }
.rule-list li form.inline { display: inline-flex; }

/* Musik & Geräusche (Menü oben) */
.sound-menu { position: relative; }
.sound-menu[hidden] { display: none; }
.sound-menu summary { list-style: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; cursor: pointer; color: #fff; opacity: .75; }
.sound-menu summary::-webkit-details-marker { display: none; }
.sound-menu summary:hover, .sound-menu[open] summary { background: rgba(255,255,255,.14); opacity: 1; }
.sound-menu.is-on summary { opacity: 1; color: #ffd479; }
.sound-menu.is-on summary .icon { animation: note-bob 2.4s ease-in-out infinite; }
@keyframes note-bob { 50% { transform: translateY(-2px) rotate(-6deg); } }
.sound-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 250px; padding: 12px; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 40px rgba(0,0,0,.28); display: grid; gap: 8px; }
.sound-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; font-weight: 800; cursor: pointer; }
.sound-row span { display: inline-flex; align-items: center; gap: 8px; }
.switch-input { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: #d9c9b4; position: relative; cursor: pointer; transition: background .2s; flex: none; margin: 0; }
.switch-input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.switch-input:checked { background: var(--ok); }
.switch-input:checked::after { transform: translateX(18px); }
.switch-input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sound-vol { display: grid; gap: 4px; font-size: .85rem; font-weight: 700; color: var(--ink-2); }
.sound-vol input { width: 100%; accent-color: var(--accent); }
.sound-track { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sound-track small { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sound-track:has(small:empty):has([hidden]) { display: none; }
.sound-hint { margin: 0; font-size: .75rem; color: var(--ink-2); }
@media (max-width: 560px) { .sound-panel { position: fixed; right: 12px; left: auto; top: 64px; } }
.benefits li:nth-child(4) .benefit-icon { background: linear-gradient(135deg, #a77bf0, var(--purple)); box-shadow: 0 3px 8px rgba(124,77,216,.25); }
.sfx-title { margin-top: 18px; font-size: 1rem; }

/* Seitenwechsel ohne Neuladen */
body.is-navigating .wrap { opacity: .55; transition: opacity .15s .1s; }
body.is-navigating .topbar::after { content: ""; position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 100; background: linear-gradient(90deg, transparent, var(--accent), #ffd479, transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: nav-bar 1s linear infinite; }
@keyframes nav-bar { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* ---------------------------------------------------------------- Schiffe versenken */
.theme-schiffe { --theme: #0b5e8a; --felt: #1d5f86; --felt-2: #0a2740; --back-1: #0b5e8a; --back-2: #083f5e; }
.sv { display: grid; gap: 12px; justify-items: center; color: #fff; }
.sv-boards { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: flex-start; width: 100%; }
.sv-panel { display: grid; gap: 8px; justify-items: center; }
.sv-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-weight: 800; }
.sv-fleet { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.sv-chip { display: inline-flex; gap: 2px; padding: 3px; border-radius: 5px; background: rgba(0,0,0,.25); }
.sv-chip i { width: 8px; height: 8px; border-radius: 2px; background: #cbd5e1; }
.sv-chip.is-sunk i { background: #ef4444; opacity: .55; }
.sv-chip.is-sunk { text-decoration: line-through; }
.sv-grid {
  display: grid; grid-template-columns: 1.1em repeat(10, 1fr); gap: 2px;
  width: min(92vw, 300px); padding: 8px; border-radius: 12px;
  background: linear-gradient(160deg, #1f78a8, #0d3f63); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), 0 8px 20px rgba(0,0,0,.3);
}
.sv-grid.sv-big { width: min(94vw, 440px); }
.sv-lab { display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.7); }
.sv-cell {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: 3px;
  background: rgba(255,255,255,.1); color: #fff; font: inherit;
}
.sv-cell.is-ship { background: linear-gradient(180deg, #9aa7b6, #5d6b7c); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.sv-cell.is-miss::after { content: ""; width: 28%; height: 28%; border-radius: 50%; background: rgba(255,255,255,.65); }
.sv-cell.is-hit { background: #f97316; }
.sv-cell.is-hit::after, .sv-cell.is-sunk::after { content: "✕"; font-weight: 900; font-size: clamp(.6rem, 2.6vw, 1rem); line-height: 1; }
.sv-cell.is-sunk { background: #991b1b; }
.sv-cell.is-ship.is-hit { background: #ea580c; }
.sv-cell.is-ship.is-sunk { background: #7f1d1d; }
.sv-cell.is-last { box-shadow: 0 0 0 2px #ffd479; z-index: 1; animation: sv-ping .9s ease-out 1; }
@keyframes sv-ping { from { transform: scale(1.5); } to { transform: scale(1); } }
button.sv-aim { cursor: crosshair; }
button.sv-aim:hover, button.sv-aim:focus-visible { background: rgba(255,212,121,.55); outline: none; }
.sv-own label.sv-cell { cursor: pointer; }
.sv-own label.sv-cell input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sv-own label.sv-cell:has(input:focus-visible) { outline: 2px solid #fff; }
.sv-own button.sv-drop { cursor: default; }
.sv.is-editing:has(input[name=ship]:checked) button.sv-drop { cursor: copy; }
.sv.is-editing:has(input[name=ship]:checked) button.sv-drop:hover { background: rgba(255,212,121,.45); }
.sv:not(:has(input[name=ship]:checked)) .sv-rotate { opacity: .5; }
.sv-own:has(.sv-s1 input:checked) .sv-s1, .sv-own:has(.sv-s2 input:checked) .sv-s2, .sv-own:has(.sv-s3 input:checked) .sv-s3,
.sv-own:has(.sv-s4 input:checked) .sv-s4, .sv-own:has(.sv-s5 input:checked) .sv-s5, .sv-own:has(.sv-s6 input:checked) .sv-s6,
.sv-own:has(.sv-s7 input:checked) .sv-s7, .sv-own:has(.sv-s8 input:checked) .sv-s8, .sv-own:has(.sv-s9 input:checked) .sv-s9,
.sv-own:has(.sv-s10 input:checked) .sv-s10 { background: linear-gradient(180deg, #ffe19a, #e0a63a); box-shadow: 0 0 0 2px #ffd479; }
.sv-actions { justify-content: center; align-items: center; flex-wrap: wrap; }
.sv-actions .pile-note { color: rgba(255,255,255,.85); }
.sv-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: .82rem; color: rgba(255,255,255,.85); }
.sv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sv-legend .sv-cell { width: 16px; }
.sv:not(.is-aiming) .sv-target-panel { opacity: .92; }
.sv.is-aiming .sv-target { box-shadow: 0 0 0 3px #ffd479, 0 8px 20px rgba(0,0,0,.3); }

/* ---------------------------------------------------------------- Tic Tac Toe */
.theme-tictactoe { --theme: #0f766e; --felt: #2a6f73; --felt-2: #10343a; --back-1: #0f766e; --back-2: #0b4f4a; }
.ttt { display: grid; gap: 12px; justify-items: center; }
.ttt-mini { font-size: 1.05rem; line-height: 1; }
.ttt-board {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(86vw, 330px); padding: 10px;
  border-radius: 18px; background: rgba(0,0,0,.25); box-shadow: 0 10px 24px rgba(0,0,0,.3);
}
.ttt-cell {
  display: grid; place-items: center; aspect-ratio: 1; border: 0; padding: 0; border-radius: 12px;
  background: #fffaf0; box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); font: inherit;
}
.ttt-cell b { font-size: clamp(2.4rem, 13vw, 4.2rem); line-height: 1; font-weight: 900; }
.ttt-x { color: #e11d48; }
.ttt-o { color: #2563eb; }
.ttt-cell.is-last b { animation: ttt-in .25s ease-out; }
@keyframes ttt-in { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ttt-cell.is-line { background: #fde68a; }
.ttt-cell.is-line b { animation: ttt-win .8s ease-in-out 3; }
@keyframes ttt-win { 50% { transform: scale(1.15); } }
.ttt-cell.is-vanish b { opacity: .35; }
button.ttt-free { cursor: pointer; }
button.ttt-free:hover, button.ttt-free:focus-visible { background: #fff1c9; outline: none; }
button.ttt-hover-x:hover::after { content: "✕"; color: rgba(225,29,72,.3); font-size: clamp(2.4rem, 13vw, 4.2rem); font-weight: 900; }
button.ttt-hover-o:hover::after { content: "◯"; color: rgba(37,99,235,.3); font-size: clamp(2.4rem, 13vw, 4.2rem); font-weight: 900; }
.ttt-note { color: rgba(255,255,255,.85); text-align: center; max-width: 330px; }

/* ---------------------------------------------------------------- Vier in einer Reihe */
.theme-vierreihe { --theme: #1d4ed8; --felt: #3b5b9a; --felt-2: #18264a; --back-1: #1d4ed8; --back-2: #1e3a8a; }
.vr { display: grid; gap: 12px; justify-items: center; }
.vr-board {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; width: min(94vw, 460px); padding: 8px;
  border-radius: 16px; background: linear-gradient(180deg, #2f6fe0, #1d4fb8); box-shadow: inset 0 -6px 0 rgba(0,0,0,.2), 0 12px 26px rgba(0,0,0,.35);
}
.vr-col { display: grid; gap: 0; padding: 0; border: 0; background: transparent; border-radius: 10px; font: inherit; }
button.vr-col { cursor: pointer; }
button.vr-col:hover, button.vr-col:focus-visible { background: rgba(255,255,255,.14); outline: none; }
.vr-hole { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 9%; overflow: hidden; }
.vr-hole::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: #0f1e3d; box-shadow: inset 0 3px 5px rgba(0,0,0,.55); }
.vr-disc { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; z-index: 1; }
.dm-who .vr-disc { width: 20px; }
.vr-r { background: radial-gradient(circle at 40% 35%, #ff8a8a, #e11d48 55%, #9f1239); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.vr-y { background: radial-gradient(circle at 40% 35%, #fff3a3, #facc15 55%, #b45309); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.vr-disc.is-last { animation: vr-drop calc(.12s + var(--d) * .06s) cubic-bezier(.5, 0, 1, 1); }
.vr-d1 { --d: 1; } .vr-d2 { --d: 2; } .vr-d3 { --d: 3; } .vr-d4 { --d: 4; } .vr-d5 { --d: 5; } .vr-d6 { --d: 6; } .vr-d7 { --d: 7; }
@keyframes vr-drop { from { transform: translateY(calc(var(--d) * -120%)); } }
.vr-hole.is-line .vr-disc { box-shadow: 0 0 0 3px #fff, 0 0 14px 4px rgba(255,255,255,.7); animation: ttt-win .8s ease-in-out 3; }
.vr-note { color: rgba(255,255,255,.85); }
@media (hover: hover) {
  .vr-me-r button.vr-col:hover .vr-hole:has(+ .vr-hole > .vr-disc)::before,
  .vr-me-y button.vr-col:hover .vr-hole:has(+ .vr-hole > .vr-disc)::before { box-shadow: inset 0 0 0 3px rgba(255,255,255,.5); }
}

/* ---------------------------------------------------------------- Farbcode */
.theme-farbcode { --theme: #9333ea; --felt: #5b4a7a; --felt-2: #241a36; --back-1: #9333ea; --back-2: #6b21a8; }
.fc { display: grid; gap: 12px; justify-items: center; color: #fff; }
.fc-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fc-peg {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
  font-style: normal; font-size: .82rem; color: rgba(0,0,0,.45); box-shadow: inset 0 -3px 0 rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.3);
}
.fc-c0 { background: #ef4444; } .fc-c1 { background: #3b82f6; } .fc-c2 { background: #22c55e; } .fc-c3 { background: #facc15; }
.fc-c4 { background: #f97316; } .fc-c5 { background: #a855f7; } .fc-c6 { background: #f9a8d4; } .fc-c7 { background: #2dd4bf; }
.fc-hole { background: rgba(0,0,0,.35); box-shadow: inset 0 2px 4px rgba(0,0,0,.5); width: 16px; height: 16px; margin: 7px; }
.fc-hidden { background: #3a2f4f; color: #fff; font-weight: 900; }
.fc-secret { display: flex; gap: 8px; padding: 8px 14px; border-radius: 12px; background: rgba(0,0,0,.35); }
.fc-secret.is-open .fc-peg { animation: ttt-in .3s ease-out; }
.fc-rows { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column-reverse; gap: 4px; border-radius: 14px; background: linear-gradient(180deg, #7a5a3a, #5a3f26); box-shadow: 0 10px 22px rgba(0,0,0,.35); }
.fc-row { display: flex; align-items: center; gap: 10px; padding: 3px 8px; border-radius: 8px; }
.fc-row.is-last { background: rgba(255,255,255,.12); }
.fc-row.is-empty { opacity: .7; }
.fc-num { width: 1.4em; text-align: right; font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.6); }
.fc-pegs { display: flex; gap: 6px; }
.fc-keys { display: grid; grid-template-columns: repeat(2, 10px); gap: 3px; }
.fc-keys-3, .fc-keys-5 { grid-template-columns: repeat(3, 10px); }
.fc-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,.35); }
.fc-key.is-black { background: #111; box-shadow: 0 0 0 1px rgba(255,255,255,.4); }
.fc-key.is-white { background: #fff; }
.fc-picker { display: flex; gap: 8px; padding: 8px; border-radius: 14px; background: rgba(0,0,0,.25); }
.fc-slot { display: grid; gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 10px; }
.fc-slot legend { padding: 0; margin: 0 auto 2px; font-size: .75rem; font-weight: 800; color: rgba(255,255,255,.7); }
.fc-slot:has(input:checked) { background: rgba(255,255,255,.1); }
.fc-choice { display: grid; place-items: center; cursor: pointer; position: relative; }
.fc-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fc-choice .fc-peg { opacity: .45; transform: scale(.82); transition: transform .12s, opacity .12s; }
.fc-choice:hover .fc-peg { opacity: .8; }
.fc-choice input:checked + .fc-peg { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 3px #fff, 0 4px 8px rgba(0,0,0,.4); }
.fc-choice input:focus-visible + .fc-peg { outline: 3px solid #ffd479; outline-offset: 2px; }
.fc-actions { justify-content: center; align-items: center; flex-wrap: wrap; }
.fc-actions .pile-note, .fc-note { color: rgba(255,255,255,.85); text-align: center; }
.fc-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: .8rem; color: rgba(255,255,255,.8); }
.fc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.felt-final { margin-bottom: 16px; } .felt-final form { pointer-events: none; }

/* ---------------------------------------------------------------- Verwaltung: Musik & Geräusche */
.music-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 10px 0 4px; }
.music-mode { position: relative; cursor: pointer; }
.music-mode input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.music-mode-box {
  display: grid; gap: 4px; height: 100%; padding: 12px 14px 12px 44px; border-radius: 14px;
  background: var(--surface); border: 2px solid var(--line); transition: border-color .15s, background .15s, box-shadow .15s;
}
.music-mode-box::before {
  content: ""; position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--surface);
}
.music-mode-box b { font-size: .98rem; }
.music-mode-box small { color: var(--ink-2); font-size: .85rem; line-height: 1.35; }
.music-mode:hover .music-mode-box { border-color: var(--accent); }
.music-mode input:checked + .music-mode-box { border-color: var(--accent); background: #fff6e8; box-shadow: 0 0 0 4px rgba(240,138,36,.14); }
.music-mode input:checked + .music-mode-box::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 45%, var(--surface) 50%); }
.music-mode input:focus-visible + .music-mode-box { outline: 3px solid var(--accent); outline-offset: 2px; }
.music-mode.is-disabled { cursor: not-allowed; }
.music-mode.is-disabled .music-mode-box { opacity: .55; }
.music-mode.is-disabled:hover .music-mode-box { border-color: var(--line); }
.upload-box {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 8px; padding: 12px;
  border: 2px dashed var(--line); border-radius: 14px; background: var(--surface-2);
}
.upload-box > p { flex-basis: 100%; margin: 0; }
.upload-kind { flex: 0 1 220px; }
.upload-pick { flex: 1 1 240px; min-width: 0; display: flex; align-items: center; }
.upload-pick input[type=file] {
  width: 100%; min-height: 44px; font: inherit; font-size: .92rem; color: var(--ink-2); cursor: pointer;
}
.upload-pick input[type=file]::file-selector-button {
  margin-right: 12px; min-height: 40px; padding: 6px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 800;
  box-shadow: 0 1px 2px rgba(42,32,24,.08); transition: border-color .15s;
}
.upload-pick input[type=file]:hover::file-selector-button { border-color: var(--accent); }
.upload-pick input[type=file]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 999px; }

/* ---------------------------------------------------------------- Startseite: Mitspieler & Spielanzahl */
.my-game-people { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.my-game-people .person {
  display: inline-flex; align-items: center; max-width: 100%; padding: 1px 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
  font-size: .76rem; font-weight: 700; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.my-game-people .person.is-me { background: var(--ok-bg); border-color: #b9e3c9; color: var(--ok); }
.my-game-people .person.is-bot { font-weight: 600; }
.games-title { flex-wrap: wrap; }
.game-count { margin-left: auto; font-size: .9rem; font-weight: 700; color: var(--ink-2); }
.game-count b { color: var(--ink); font-weight: 900; }
.game-count > span { display: none; }
.games-section:has(#kind-all:checked) .count-all,
.games-section:has(#kind-karten:checked) .count-karten,
.games-section:has(#kind-wuerfel:checked) .count-wuerfel,
.games-section:has(#kind-brett:checked) .count-brett,
.games-section:has(#kind-raetsel:checked) .count-raetsel,
.games-section:has(#kind-allein:checked) .count-allein,
.games-section:has(#kind-gruppe:checked) .count-gruppe,
.games-section:has(#kind-kinder:checked) .count-kinder { display: inline; }

/* ---------------------------------------------------------------- Sudoku */
.theme-sudoku { --theme: #0e7490; --felt: #3d6f7d; --felt-2: #173540; --back-1: #0e7490; --back-2: #155e75; }
.su { display: grid; gap: 12px; justify-items: center; }
.su-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.su-head .su-bad { background: rgba(198,47,37,.75); }
.su-grid {
  display: grid; grid-template-columns: repeat(9, 1fr); width: min(94vw, 470px); aspect-ratio: 1;
  background: #1f2937; border: 3px solid #1f2937; border-radius: 10px; gap: 1px; overflow: hidden; box-shadow: 0 12px 26px rgba(0,0,0,.35);
}
.su-cell {
  position: relative; display: grid; place-items: center; background: #fffdf8; color: #1d4ed8; cursor: default;
  font: 700 clamp(1.05rem, 5.2vw, 1.7rem)/1 var(--font-display, inherit); user-select: none;
}
.su-cell.c2, .su-cell.c5 { margin-right: 2px; }
.su-cell.r2, .su-cell.r5 { margin-bottom: 2px; }
label.su-cell { cursor: pointer; }
.su-cell input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.su-cell.is-given { color: #1f2937; background: #f3ede2; }
.su-cell.is-wrong { color: #c62f25; background: #fde8e6; }
.su-cell.is-peer { background: #e8f1fb; }
.su-cell.is-given.is-peer { background: #dde7f2; }
.su-cell.is-same { background: #cfe0f7; }
.su-cell.is-sel { background: #ffe29a; box-shadow: inset 0 0 0 2px #e0a52f; }
.su-cell:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: -3px; z-index: 1; }
.su-notes { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.su-notes i { display: grid; place-items: center; font-style: normal; font-size: clamp(.5rem, 2vw, .72rem); font-weight: 700; color: #64748b; }
.su-notes .m1 { grid-area: 1 / 1; } .su-notes .m2 { grid-area: 1 / 2; } .su-notes .m3 { grid-area: 1 / 3; }
.su-notes .m4 { grid-area: 2 / 1; } .su-notes .m5 { grid-area: 2 / 2; } .su-notes .m6 { grid-area: 2 / 3; }
.su-notes .m7 { grid-area: 3 / 1; } .su-notes .m8 { grid-area: 3 / 2; } .su-notes .m9 { grid-area: 3 / 3; }
.su-pad { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; width: min(94vw, 470px); }
.su-key {
  min-height: 48px; border: 0; border-radius: 12px; background: #fffdf8; color: #1d4ed8; cursor: pointer;
  font: 800 1.3rem/1 var(--font-display, inherit); box-shadow: 0 3px 0 rgba(0,0,0,.25);
}
.su-key:hover { background: #fff3d1; }
.su-key:active { transform: translateY(2px); box-shadow: none; }
.su-key.is-complete { opacity: .35; }
.su-erase { color: #c62f25; }
.su-actions { justify-content: center; align-items: center; flex-wrap: wrap; }
.su-toggle { display: inline-flex; align-items: center; cursor: pointer; position: relative; }
.su-toggle input { position: absolute; opacity: 0; }
.su-toggle span { padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.25); color: #fff; font-weight: 800; }
.su-toggle input:checked + span { background: #ffd479; color: #1f2937; }
.su-toggle input:focus-visible + span { outline: 3px solid #fff; }
.su:has(input[name=notes]:checked) .su-key:not(.su-erase) { font-size: .95rem; color: #64748b; }
.su-note { color: rgba(255,255,255,.85); text-align: center; max-width: 470px; }
@media (max-width: 420px) { .su-pad { grid-template-columns: repeat(5, 1fr); } }

/* ---------------------------------------------------------------- Mühle */
.theme-muehle { --theme: #8a5a2b; --felt: #6b5a3e; --felt-2: #2e2416; --back-1: #8a5a2b; --back-2: #5c3a1a; }
.mu { display: grid; gap: 12px; justify-items: center; }
.mu-board {
  position: relative; width: min(92vw, 440px); aspect-ratio: 1; border-radius: 18px;
  background: linear-gradient(145deg, #e9c98f, #d4a964); box-shadow: inset 0 0 0 6px #b8874a, 0 14px 28px rgba(0,0,0,.4);
}
.mu-lines { position: absolute; left: 10.571%; top: 10.571%; width: 78.857%; height: 78.857%; overflow: visible; pointer-events: none; }
.mu-lines rect, .mu-lines line { fill: none; stroke: #5a3a1a; stroke-width: .05; }
.mu-pt { position: absolute; z-index: 1; width: 13.14%; height: 13.14%; transform: translate(-50%, -50%); display: grid; place-items: center; padding: 0; border: 0; background: transparent; font: inherit; }
.mu-pt::before { content: ""; position: absolute; width: 22%; height: 22%; border-radius: 50%; background: #5a3a1a; }
.mu-r0 { top: 10.571%; } .mu-r1 { top: 23.714%; } .mu-r2 { top: 36.857%; } .mu-r3 { top: 50.000%; } .mu-r4 { top: 63.143%; } .mu-r5 { top: 76.286%; } .mu-r6 { top: 89.429%; }
.mu-c0 { left: 10.571%; } .mu-c1 { left: 23.714%; } .mu-c2 { left: 36.857%; } .mu-c3 { left: 50.000%; } .mu-c4 { left: 63.143%; } .mu-c5 { left: 76.286%; } .mu-c6 { left: 89.429%; }
.mu-stone {
  position: relative; z-index: 1; display: block; width: 78%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 6px 10px rgba(0,0,0,.3);
}
.dm-who .mu-stone { width: 22px; }
.mu-w { background: radial-gradient(circle at 50% 40%, #fffaf0 0 35%, #efe3cc 37% 55%, #fffaf0 57%, #dccdae 100%); }
.mu-b { background: radial-gradient(circle at 50% 40%, #4a3a33 0 35%, #2a1f1b 37% 55%, #463630 57%, #160f0c 100%); }
.mu-pt.is-last::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,212,121,.9); }
.mu-pt.is-taken::before { width: 40%; height: 40%; background: transparent; box-shadow: 0 0 0 3px rgba(198,47,37,.7); }
.mu-pt.is-mill .mu-stone { box-shadow: 0 0 0 3px #ffd479, 0 3px 0 rgba(0,0,0,.35), 0 6px 10px rgba(0,0,0,.3); }
button.mu-free, button.mu-pt.dm-target { cursor: pointer; }
button.mu-free::before, button.mu-pt.dm-target::before { width: 40%; height: 40%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 2px #5a3a1a; }
button.mu-free:hover::before, button.mu-free:focus-visible::before { background: #ffd479; }
.mu:has(input[name=from]:checked) button.mu-pt.dm-target:not(.is-sel)::before { opacity: .25; }
button.mu-pt.dm-target.is-sel::before, button.mu-pt.is-preview::before { background: #ffd479; }
.mu-pick { display: grid; place-items: center; width: 100%; height: 100%; cursor: pointer; position: relative; }
.mu-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mu-pick .mu-stone { box-shadow: 0 0 0 3px rgba(255,212,121,.7), 0 3px 0 rgba(0,0,0,.35); }
.mu-pick input:checked + .mu-stone { transform: translateY(-4px) scale(1.08); box-shadow: 0 0 0 4px #ffd479, 0 10px 16px rgba(0,0,0,.45); }
.mu-pick input:focus-visible + .mu-stone { outline: 3px solid #fff; outline-offset: 2px; }
button.mu-take { cursor: crosshair; }
button.mu-take .mu-stone { animation: mu-take 1s ease-in-out infinite; }
button.mu-take:hover .mu-stone { box-shadow: 0 0 0 4px #ef4444, 0 3px 0 rgba(0,0,0,.35); }
@keyframes mu-take { 50% { transform: scale(.9); box-shadow: 0 0 0 4px rgba(239,68,68,.8), 0 3px 0 rgba(0,0,0,.35); } }

/* ---------------------------------------------------------------- Wortsuche */
.theme-wortsuche { --theme: #b45309; --felt: #4f6b55; --felt-2: #1d3124; --back-1: #b45309; --back-2: #7c2d12; }
.ws { display: grid; gap: 12px; justify-items: center; }
.ws-wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: flex-start; width: 100%; }
.ws-board { position: relative; width: min(94vw, 520px); aspect-ratio: 1; border-radius: 14px; background: #fffdf6; box-shadow: 0 12px 26px rgba(0,0,0,.35); padding: 6px; }
.ws-lines { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); pointer-events: none; z-index: 2; }
.ws-line { stroke-width: .72; stroke-linecap: round; opacity: .38; }
.ws-line.is-new { animation: ws-new .6s ease-out; }
@keyframes ws-new { from { stroke-width: 1.1; opacity: .7; } }
.ws-preview { stroke: #f08a24; opacity: 0; }
.ws-preview.is-on { opacity: .45; }
.ws-line.p-1 { stroke: #94a3b8; } .ws-line.p0 { stroke: #22c55e; } .ws-line.p1 { stroke: #3b82f6; } .ws-line.p2 { stroke: #ef4444; }
.ws-line.p3 { stroke: #a855f7; } .ws-line.p4 { stroke: #eab308; } .ws-line.p5 { stroke: #14b8a6; }
.ws-grid { position: relative; display: grid; width: 100%; height: 100%; z-index: 1; }
.ws-n10 .ws-grid { grid-template-columns: repeat(10, 1fr); }
.ws-n12 .ws-grid { grid-template-columns: repeat(12, 1fr); }
.ws-n15 .ws-grid { grid-template-columns: repeat(15, 1fr); }
.ws-cell {
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #1f2937;
  font: 800 clamp(.8rem, 4.2vw, 1.4rem)/1 var(--font-display, inherit); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
}
.ws-n15 .ws-cell { font-size: clamp(.7rem, 3.4vw, 1.15rem); }
.ws-cell:disabled { cursor: default; color: #1f2937; }
.ws-cell.is-sel { background: #ffe29a; }
.ws-cell:focus-visible { outline: 3px solid var(--accent); }
.ws-list { min-width: 200px; max-width: 520px; color: #fff; }
.ws-list ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 14px; }
.ws-list li { display: flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 10px; background: rgba(0,0,0,.22); font-weight: 800; }
.ws-list li small { font-weight: 600; opacity: .8; font-size: .75rem; }
.ws-list li.is-found span { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .8; }
.ws-list li.p0 { box-shadow: inset 4px 0 0 #22c55e; } .ws-list li.p1 { box-shadow: inset 4px 0 0 #3b82f6; } .ws-list li.p2 { box-shadow: inset 4px 0 0 #ef4444; }
.ws-list li.p3 { box-shadow: inset 4px 0 0 #a855f7; } .ws-list li.p4 { box-shadow: inset 4px 0 0 #eab308; } .ws-list li.p5 { box-shadow: inset 4px 0 0 #14b8a6; }
@media (min-width: 1100px) { .ws-list { width: 240px; } .ws-list ul { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Wortlegen */
.theme-wortlegen { --theme: #9a3412; --felt: #5b6e5f; --felt-2: #1f2d24; --back-1: #9a3412; --back-2: #6b2109; }
.wl { display: grid; gap: 12px; justify-items: center; }
.wl-board {
  display: grid; grid-template-columns: repeat(15, 1fr); gap: 2px; width: min(100%, 600px); aspect-ratio: 1; padding: 6px;
  border-radius: 12px; background: #3f5a4a; box-shadow: 0 12px 26px rgba(0,0,0,.35);
}
.wl-sq { position: relative; display: grid; place-items: center; border-radius: 3px; background: #e9e3cf; overflow: hidden; }
.wl-sq small { font-size: clamp(.32rem, 1.25vw, .52rem); font-weight: 800; line-height: 1.05; text-align: center; color: rgba(0,0,0,.55); text-transform: uppercase; padding: 0 1px; }
.wl-dl { background: #bfe1f2; } .wl-tl { background: #4f9fd1; } .wl-dw { background: #f6c6c8; } .wl-tw { background: #df5a4f; }
.wl-tl small, .wl-tw small { color: rgba(255,255,255,.92); }
.wl-center small { font-size: clamp(.8rem, 3.4vw, 1.3rem); color: #9a3412; }
.wl-sq.is-over { box-shadow: inset 0 0 0 3px #f08a24; }
.wl.is-my-turn .wl-sq[data-free] { cursor: pointer; }
.wl-tile {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 4px;
  background: linear-gradient(180deg, #fbe7b5, #eccb83); color: #2a2018; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
  font: 900 clamp(.7rem, 3.2vw, 1.25rem)/1 var(--font-display, inherit); user-select: none; -webkit-user-select: none;
}
.wl-tile sub { position: absolute; right: 8%; bottom: 6%; font-size: .5em; font-weight: 800; line-height: 1; }
.wl-tile.is-blank { color: #7c2d12; background: linear-gradient(180deg, #fff6dc, #f1dcae); }
.wl-sq.is-last .wl-tile { box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 0 0 2px #f08a24; }
.wl-tile.is-staged { background: linear-gradient(180deg, #fff3c4, #ffd479); box-shadow: 0 0 0 2px #f08a24, 0 2px 4px rgba(0,0,0,.3); cursor: grab; touch-action: none; }
.wl-rack { display: flex; gap: 6px; justify-content: center; padding: 8px 10px; border-radius: 14px; background: #6b4423; box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 8px 18px rgba(0,0,0,.3); }
.wl-rtile { width: clamp(38px, 11vw, 54px); height: clamp(38px, 11vw, 54px); border: 0; padding: 0; cursor: grab; font-size: clamp(1.1rem, 5vw, 1.6rem); touch-action: none; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), 0 3px 0 rgba(0,0,0,.3); }
.wl-rtile.is-used { opacity: .25; }
.wl-rtile.is-sel { transform: translateY(-6px); box-shadow: 0 0 0 3px #ffd479, 0 8px 12px rgba(0,0,0,.4); }
.wl-rtile.is-dragging { opacity: .35; }
.wl.is-swapping .wl-rtile { cursor: pointer; }
.wl-rtile.is-x { transform: translateY(-6px); box-shadow: 0 0 0 3px #ef4444, 0 8px 12px rgba(0,0,0,.4); }
.wl-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -60%) scale(1.15); box-shadow: 0 10px 20px rgba(0,0,0,.4); }
.wl-actions { justify-content: center; align-items: center; flex-wrap: wrap; }
.wl-preview { padding: 4px 10px; border-radius: 999px; background: #ffd479; color: #2a2018; font-weight: 900; }
.wl-joker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.wl-joker-grid .wl-tile { height: 44px; border: 0; cursor: pointer; font-size: 1.2rem; }
.wl-joker-grid .wl-tile:hover { background: #ffd479; }
.btn[hidden] { display: none; }

/* Verwaltung: Wortlisten */
.admin-words { margin-top: 16px; }
.words-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 8px; }
.words-form .field { display: grid; gap: 6px; font-weight: 800; }
.words-area { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; resize: vertical; min-height: 140px; }
.words-actions { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- Höher oder tiefer */
.theme-hochtief { --theme: #0369a1; --felt: #2b6a7c; --felt-2: #0f3340; --back-1: #0369a1; --back-2: #075985; }
.ht { display: grid; gap: 12px; justify-items: center; }
.ht-piles { justify-content: center; }
.ht-choice { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ht-choice .btn { min-width: 150px; }
.ht-choice small { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.18); font-size: .85rem; }
.ht-result { margin: 0; padding: 6px 14px; border-radius: 999px; font-weight: 800; color: #fff; background: rgba(0,0,0,.25); }
.ht-result.ht-right { background: #188a52; }
.ht-result.ht-wrong { background: #b42318; }
.ht-result.ht-push { background: #9a5b00; }
.pcard.ht-right { box-shadow: 0 0 0 4px #4ade80, 0 8px 18px rgba(0,0,0,.35); }
.pcard.ht-wrong { box-shadow: 0 0 0 4px #f87171, 0 8px 18px rgba(0,0,0,.35); }
.ht-streak { color: #ffd479 !important; font-weight: 800; }
.ht-trail { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 560px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); opacity: .9; }
.ht-trail-label { flex-basis: 100%; text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 2px; }
.ht > .pile-note { margin: 0; }

/* ---------------------------------------------------------------- Spielfeld ans Fenster anpassen */
.felt-inner { zoom: var(--fit, 1); }
.fit-toggle {
  position: absolute; top: 8px; right: 8px; z-index: 5; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px;
  background: rgba(0,0,0,.22); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; opacity: .55; transition: opacity .15s;
}
.fit-toggle:hover, .fit-toggle:focus-visible { opacity: 1; outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.fit-toggle[hidden] { display: none; }

/* ---------------------------------------------------------------- Freunde: Freund hinzufügen */
.friend-add { container-type: inline-size; }
.friend-add-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; margin-top: 4px; }
.friend-add-form .input { min-height: 48px; margin: 0; }
.friend-add-form .btn { min-height: 48px; margin: 0; white-space: nowrap; }
@container (max-width: 400px) {
  .friend-add-form { grid-template-columns: 1fr; }
}
.my-handle { display: grid; gap: 6px; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px dashed var(--line); }
.my-handle-label { font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.my-handle-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.my-handle .username-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 1.05rem; }
.my-handle .username-chip .icon { width: 16px; height: 16px; opacity: .6; }
.my-handle .btn { min-height: 36px; }