/* LW /play — geteiltes Design-System (Hub + alle Spiel-UIs) */
:root {
    --bg: #0b0e14;
    --panel: rgba(255, 255, 255, .045);
    --panel-border: rgba(255, 255, 255, .09);
    --text: #e8ecf3;
    --muted: #97a0b3;
    --accent: #4f8cff;
    --accent-2: #9a6bff;
    --gold: #f2c14e;
    --red: #e5484d;
    --green: #3fbf6f;
    --radius: 14px;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
/* S15: iOS bläht sonst Text in Querlage auf */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    /* Etappe 33 (#9), v2 nach Betreiber-Feedback (2026-07-17): große
       520er-Kachel mit verstreuten, gedrehten Glyphen in drei Größen —
       kein sichtbares Raster/Loop mehr, nichts berührt die Kachelkante
       (keine Naht-Linie). Grüner Mittel-Verlauf raus (Banding).
       Issue #2 (2026-07-19): background-repeat erbte für ALLE Layer den
       Default `repeat` — die beiden Radial-Verläufe kachelten damit
       vertikal (Naht/harte Kante bei jeder Viewport-Höhe beim Scrollen,
       auch mobil). Fix: nur die Glyphen-Kachel wiederholt; die Verläufe
       liegen `no-repeat` und `fixed` am Viewport (nahtlos; auf iOS, wo
       `fixed` ggf. ignoriert wird, verhindert `no-repeat` die Naht). */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.028' stroke-width='1.5'%3E%3Cg transform='translate(70 64) rotate(-14)'%3E%3Cpath d='M0-13c-8 10-16 15-16 24a9 9 0 0 0 14 7c-1 5-3 8-6 10h16c-3-2-5-5-6-10a9 9 0 0 0 14-7c0-9-8-14-16-24z'/%3E%3C/g%3E%3Cg transform='translate(404 92) rotate(16)'%3E%3Crect x='-18' y='-18' width='36' height='36' rx='8'/%3E%3Ccircle cx='-8' cy='-8' r='2.6'/%3E%3Ccircle cx='8' cy='0' r='2.6'/%3E%3Ccircle cx='-8' cy='8' r='2.6'/%3E%3C/g%3E%3Cg transform='translate(258 170) rotate(9) scale(.9)'%3E%3Cpath d='M0 0c-5-6-12-8-18-4s-8 12-3 18l21 20 21-20c5-6 3-14-3-18s-13-2-18 4z'/%3E%3C/g%3E%3Cg transform='translate(112 330) rotate(-8)'%3E%3Cpath d='M-17-18v10h8v-6h8v6h8v-6h8v10M-13-8l4 26h24l4-26M-11 18h28v8H-11z'/%3E%3C/g%3E%3Cg transform='translate(338 306) rotate(-18)'%3E%3Ccircle cx='0' cy='-10' r='7'/%3E%3Ccircle cx='-8' cy='2' r='7'/%3E%3Ccircle cx='8' cy='2' r='7'/%3E%3Cpath d='M0 4l-5 15h10z'/%3E%3C/g%3E%3Cg transform='translate(464 238) rotate(12)'%3E%3Cpath d='M0-14L10 0 0 14-10 0z'/%3E%3C/g%3E%3Cg transform='translate(204 452) rotate(-22) scale(.8)'%3E%3Crect x='-18' y='-18' width='36' height='36' rx='8'/%3E%3Ccircle cx='0' cy='0' r='2.8'/%3E%3C/g%3E%3Cg transform='translate(430 428) rotate(8) scale(.85)'%3E%3Cpath d='M0-13c-8 10-16 15-16 24a9 9 0 0 0 14 7c-1 5-3 8-6 10h16c-3-2-5-5-6-10a9 9 0 0 0 14-7c0-9-8-14-16-24z'/%3E%3C/g%3E%3Cg transform='translate(40 210) rotate(-20) scale(.75)'%3E%3Cpath d='M0 0c-5-6-12-8-18-4s-8 12-3 18l21 20 21-20c5-6 3-14-3-18s-13-2-18 4z'/%3E%3C/g%3E%3Cg transform='translate(300 40) rotate(10) scale(.8)'%3E%3Ccircle cx='0' cy='-10' r='7'/%3E%3Ccircle cx='-8' cy='2' r='7'/%3E%3Ccircle cx='8' cy='2' r='7'/%3E%3Cpath d='M0 4l-5 15h10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(1100px 500px at 80% -10%, rgba(79, 140, 255, .16), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(154, 107, 255, .12), transparent 60%),
        var(--bg);
    background-repeat: repeat, no-repeat, no-repeat;
    background-attachment: scroll, fixed, fixed;
    color: var(--text);
    font: 16px/1.5 Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* S15: kein 300ms-Delay / Doppeltipp-Zoom auf interaktiven Elementen (Karten
   und Brettzellen sind <button>, damit ebenfalls abgedeckt) */
button, a, input, select, summary, label { touch-action: manipulation; }

.brand-gradient {
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.panel {
    width: min(440px, 100%); padding: 22px;
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: var(--radius); backdrop-filter: blur(14px);
}
.panel.center { text-align: center; }

.field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
input, select {
    width: 100%; padding: 12px 14px; border-radius: 10px; font: inherit; color: var(--text);
    background: rgba(255, 255, 255, .06); border: 1px solid var(--panel-border); outline: none;
}
input:focus, select:focus { border-color: var(--accent); }

.btn {
    padding: 12px 18px; border-radius: 10px; border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, .07); color: var(--text); font: inherit; font-weight: 600;
    cursor: pointer; transition: transform .06s, background .15s;
}
/* E55B: Ein Link-Button ist ein Button. `<a>` ist von Haus aus `inline` — dort
   greift `width` nicht und vertikale Margins werden ignoriert, weshalb
   „🎲 Crew-Lobby betreten" den Absatz darüber überlappte. Der Hub hatte dafür
   längst einen lokalen Flicken (`.hub-entry .btn.big`); hier ist die Wurzel. */
a.btn { display: inline-block; text-align: center; text-decoration: none; }
.btn:hover { background: rgba(255, 255, 255, .12); }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(120deg, var(--accent), var(--accent-2)); border: 0; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.big { width: 100%; padding: 14px; font-size: 17px; margin-top: 14px; }
.btn:disabled { opacity: .45; cursor: default; }

.error { color: var(--red); margin-top: 12px; font-size: 14px; }
.hint { color: var(--muted); font-size: 14px; margin-top: 12px; }
.link { color: var(--accent); font-size: 14px; display: inline-block; margin-top: 12px; }

.overlay {
    position: fixed; inset: 0; display: grid; place-items: center; z-index: 30;
    background: rgba(5, 8, 14, .72); backdrop-filter: blur(6px); padding: 16px;
}
/* „leichtes" Overlay (Etappe 14): verdeckt das Spiel nicht — z.B. Wunschfarbe */
.overlay.light { background: rgba(5, 8, 14, .35); backdrop-filter: none; align-items: start; padding-top: 12vh; display: grid; place-items: start center; }
/* MUSS nach allen .overlay-Varianten stehen: hidden gewinnt immer (B4) */
.overlay[hidden], .overlay.light[hidden] { display: none; }

.toast {
    position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    max-width: 94vw;
    background: rgba(20, 26, 40, .95); border: 1px solid var(--panel-border);
    padding: 10px 18px; border-radius: 999px; font-size: 14.5px; z-index: 40;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

/* ── Hub (/play/) ─────────────────────────────────────── */
.hub { max-width: 860px; margin: 0 auto; padding: 40px 18px 60px; }
.hub-head { text-align: center; margin-bottom: 34px; }
.hub-head h1 { font-size: clamp(40px, 9vw, 60px); font-weight: 800; letter-spacing: -.03em; }
.hub-head p { color: var(--muted); font-size: 17px; margin-top: 4px; }

/* Etappe 36 (Hub v2): Kategorien + Rejoin-Banner */
.hub-sec { margin-top: 26px; }
.hub-cat { font-size: 17px; font-weight: 800; letter-spacing: .01em; color: var(--muted);
    margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--panel-border); }
.hub-rejoin {
    display: block; text-decoration: none; color: var(--text);
    margin: 0 0 6px; padding: 14px 18px; border-radius: var(--radius); font-size: 15px;
    background: rgba(63, 191, 111, .12); border: 1px solid rgba(63, 191, 111, .45);
}
.hub-rejoin:hover { background: rgba(63, 191, 111, .2); }
.hub-rejoin[hidden] { display: none; }

/* E54C: „Dein Stand" — der Einstieg in die eigene Statistik gehört nach oben,
   nicht als Textlink in den Fußbereich. */
.hub-me {
    display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text);
    margin: 0 0 10px; padding: 12px 16px; border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(88, 101, 242, .16), rgba(88, 101, 242, .05));
    border: 1px solid rgba(88, 101, 242, .38);
}
.hub-me:hover { border-color: var(--accent); background: linear-gradient(135deg, rgba(88, 101, 242, .24), rgba(88, 101, 242, .08)); }
.hub-me[hidden] { display: none; }
.hm-face {
    flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center; font-size: 22px;
    background: rgba(255, 255, 255, .08); border: 1px solid var(--panel-border);
}
.hm-face img { width: 100%; height: 100%; object-fit: cover; }
.hm-txt { display: grid; gap: 1px; min-width: 0; }
.hm-txt b { font-size: 15.5px; }
.hm-sub { font-size: 12.5px; color: var(--muted); }
.hm-nums { display: flex; gap: 16px; margin-left: auto; flex: none; }
.hm-num { display: grid; justify-items: center; font-size: 11px; color: var(--muted); line-height: 1.2; }
.hm-num b { font-size: 19px; color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 430px) {
    .hm-nums { gap: 11px; }
    .hm-num b { font-size: 16px; }
    .hub-me { gap: 10px; padding: 10px 12px; }
}

/* S4 v2 (Etappe 39): Crew-Chips auf dem Hub */
.hub-crews { margin: 4px 0 2px; font-size: 14px; color: var(--muted); }
.hub-crews a {
    display: inline-block; margin: 3px 4px; padding: 6px 13px; border-radius: 999px;
    color: var(--text); text-decoration: none;
    background: rgba(88, 101, 242, .15); border: 1px solid rgba(88, 101, 242, .4);
}
.hub-crews a:hover { background: rgba(88, 101, 242, .28); }
.hub-crews[hidden] { display: none; }
/* Etappe 48C: Crew-Chip = Name (→ Crew-Seite) + „rein" (→ Crew-Lobby) */
.hub-crew { display: inline-flex; align-items: center; margin: 3px 2px; }
.hub-crew a { margin: 0; }
.hub-crew a:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.hub-crew .hub-crew-go {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
    padding: 6px 11px; font-size: 13px;
    background: rgba(88, 101, 242, .3); border-color: rgba(88, 101, 242, .55);
}
.hub-crew .hub-crew-go:hover { background: rgba(88, 101, 242, .45); }

/* Etappe 48C: die Spiele-Wand ist bewusst der ZWEITE Weg */
.hub-or { text-align: center; color: var(--muted); font-size: 13.5px; margin: 18px 0 2px; }

.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
a.game-card { text-decoration: none; color: inherit; }
.game-card {
    display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
    background: var(--panel); border: 1px solid var(--panel-border);
    transition: transform .12s, border-color .15s;
}
a.game-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.game-card.soon { opacity: .62; }

.banner { height: 120px; position: relative; display: grid; place-items: center; overflow: hidden; }
.banner-mau { background: linear-gradient(135deg, #1d2c54, #3a2a68); }
.banner-see { background: linear-gradient(135deg, #0d2b3d, #123a56); }
.banner-rom { background: linear-gradient(135deg, #3d2c14, #56411a); }
.banner-mig { background: linear-gradient(135deg, #232a36, #2c3444); }
.banner-imp { background: linear-gradient(135deg, #3a1f2b, #1f2b47); }
.banner-bj { background: linear-gradient(135deg, #123526, #1c4a35); }
.banner-bunt { background: linear-gradient(135deg, #40202f, #1f3a24); }
.banner-spite { background: linear-gradient(135deg, #1d2440, #3a2340); }
.fan .mini-card.c-red { background: #d94848; color: #fff; }
.fan .mini-card.c-blue { background: #3f7ad9; color: #fff; }
.fan .mini-card.c-green { background: #3fae5f; color: #fff; }
.banner-poker { background: linear-gradient(135deg, #2b1230, #12303f); }
.banner-tarn { background: linear-gradient(135deg, #14243d, #3d1a22); }
.tarn-tiles { display: flex; gap: 8px; }
.tarn-tiles span {
    display: grid; place-items: center; width: 58px; height: 42px; border-radius: 8px;
    background: #e9e2cc; color: #1c2230; font-weight: 800; font-size: 13px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
}
.tarn-tiles .b { background: #3f7ad9; color: #fff; }
.tarn-tiles .r { background: #d94848; color: #fff; }
.tarn-tiles .k { background: #23262e; font-size: 20px; }
.banner-blvd { background: linear-gradient(135deg, #33230f, #14324a); }
.banner-maex { background: linear-gradient(135deg, #2d1b10, #3b1020); }
/* E62 Fünferpasch — fünf Würfel, leicht gefächert wie in der Hand */
.banner-pasch { background: linear-gradient(135deg, #10241c, #1a1030); }
/* E64 Klecks — drei Farbkleckse auf Papier */
.banner-klecks { background: linear-gradient(135deg, #2a1830, #10202e); }
/* E70 */
.banner-romme { background: linear-gradient(135deg, #16233a, #2a1c2e); }
.romme-cards { display: flex; gap: 5px; align-items: center; justify-content: center; height: 100%; }
.romme-cards span {
    display: grid; place-items: center; width: 26px; height: 36px; border-radius: 6px;
    font-weight: 800; font-size: 14px; color: #10131a; transform: rotate(-6deg);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}
.romme-cards span:nth-child(1) { background: #ff8787; transform: rotate(-9deg); }
.romme-cards span:nth-child(2) { background: #8ce99a; transform: rotate(-3deg); }
.romme-cards span:nth-child(3) { background: #74c0fc; transform: rotate(3deg); }
.romme-cards span:nth-child(4) { background: linear-gradient(135deg, #ffd43b, #ff8787); transform: rotate(9deg); }
/* E71 Steinreich — Steine liegen flach nebeneinander, nicht gefächert:
   Sie gehören dem Tisch, nicht einer Hand. */
.banner-stein { background: linear-gradient(135deg, #12261f, #221a33); }
/* E83 Blindgänger — vier Patronen, zwei scharf: das Bild IST die Frage. */
.banner-bg { background: linear-gradient(135deg, #2a1418, #16181f); }
.bg-shells { display: flex; gap: 8px; align-items: center; justify-content: center; height: 100%; }
.bg-shells i {
    display: block; width: 13px; height: 32px; border-radius: 3px 3px 5px 5px;
    background: linear-gradient(180deg, #b9bec9 0 38%, #d8b46a 38% 100%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}
.bg-shells i.live { background: linear-gradient(180deg, #e2564f 0 38%, #d8b46a 38% 100%); }
.bg-shells i:nth-child(2) { transform: rotate(-8deg); }
.bg-shells i:nth-child(4) { transform: rotate(7deg); }
.banner-wg { background: linear-gradient(135deg, #1b2033, #33261a); }
.wg-tiles { display: flex; gap: 4px; align-items: center; justify-content: center; height: 100%; }
.wg-tiles span {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px;
    background: #e8dcc0; color: #2a2118; font-weight: 800; font-size: 17px;
}
.wg-tiles span:nth-child(2) { transform: rotate(-7deg); }
.wg-tiles span:nth-child(4) { transform: rotate(6deg); }
.stein-tiles { display: flex; gap: 4px; align-items: center; justify-content: center; height: 100%; }
.stein-tiles span {
    display: grid; place-items: center; width: 26px; height: 34px; border-radius: 6px;
    font-weight: 800; font-size: 15px; color: #10131a;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}
.stein-tiles span:nth-child(1) { background: #ff8787; }
.stein-tiles span:nth-child(2) { background: #8ce99a; }
.stein-tiles span:nth-child(3) { background: #74c0fc; }
.stein-tiles span:nth-child(4) { background: linear-gradient(135deg, #ffd43b, #ff8787); }
.banner-post { background: linear-gradient(135deg, #1d2740, #2c1b33); }
.post-chain { display: flex; align-items: center; gap: 6px; font-size: 22px; }
.post-chain span:nth-child(even) { font-size: 15px; opacity: .55; }
.post-chain span:nth-child(3) { transform: scale(1.15); }
.klecks-blobs { display: flex; gap: 9px; }
.klecks-blobs span { width: 30px; height: 30px; border-radius: 50% 60% 55% 45%;
    box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.klecks-blobs span:nth-child(1) { background: #e5484d; transform: rotate(-12deg); }
.klecks-blobs span:nth-child(2) { background: #f2c14e; transform: rotate(8deg) scale(1.15); }
.klecks-blobs span:nth-child(3) { background: #4f8cff; transform: rotate(-4deg); }
/* E63 Stadt Land Fluss — drei Buchstabenkarten */
.banner-slf { background: linear-gradient(135deg, #241026, #101f30); }
.slf-letters { display: flex; gap: 7px; }
.slf-letters span { width: 40px; height: 50px; border-radius: 8px; display: grid; place-items: center;
    font-size: 26px; font-weight: 800; color: #1c2230; background: #fdfdfa; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.slf-letters span:nth-child(1) { transform: rotate(-7deg); }
.slf-letters span:nth-child(3) { transform: rotate(7deg); }
.pasch-dice { font-size: 34px; letter-spacing: 1px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.banner-flag { background: linear-gradient(135deg, #16233c, #1c3327); }
.flag-icons { display: flex; gap: 7px; }
.flag-icons span {
    width: 42px; height: 52px; border-radius: 8px; display: grid; place-items: center;
    font-weight: 800; font-size: 19px; color: #fff;
    background: linear-gradient(150deg, #4f6fb5, #33487c); box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.flag-icons span:nth-child(2) { background: linear-gradient(150deg, #a04448, #6e2b2e); transform: rotate(5deg); }
.flag-icons span:nth-child(3) { background: linear-gradient(150deg, #3f8f5f, #2a6242); transform: rotate(-5deg); }
.maex-dice { font-size: 44px; letter-spacing: 4px; transform: rotate(-6deg); }
.poker-icons, .blvd-icons { font-size: 32px; letter-spacing: 6px; }

.banner-raus { background: linear-gradient(135deg, #1c3327, #33230f); }
.raus-icons { display: flex; align-items: center; gap: 8px; font-size: 34px; }
.raus-icons i { width: 20px; height: 20px; border-radius: 50% 50% 45% 45%; }
.raus-icons .r0 { background: #4f8cff; }
.raus-icons .r1 { background: #e5484d; transform: translateY(4px); }
.raus-icons .r2 { background: #f2c14e; }
.raus-icons .r3 { background: #3fbf6f; transform: translateY(3px); }

.banner-schach { background: linear-gradient(135deg, #232a36, #3a2a68); }
.schach-icons { display: flex; gap: 4px; font-size: 40px; line-height: 1; }
.schach-icons span:nth-child(1) { color: #cfd6e4; }
.schach-icons span:nth-child(2) { color: #4f8cff; transform: rotate(-7deg); }
.schach-icons span:nth-child(3) { color: var(--gold); }
.schach-icons span:nth-child(4) { color: #e5484d; transform: rotate(7deg); }

/* Servietten-Welle (Etappe 30) */
.banner-ttt { background: linear-gradient(135deg, #1c2f4a, #3a2340); }
.ttt-icons { display: flex; gap: 12px; font-size: 36px; font-weight: 800; }
.ttt-icons span:nth-child(odd) { color: #4f8cff; }
.ttt-icons span:nth-child(even) { color: #e5484d; }
.banner-nim { background: linear-gradient(135deg, #33230f, #14243d); }
.nim-icons { display: flex; gap: 10px; }
.nim-icons i { width: 7px; height: 52px; border-radius: 3px; background: #d9b98c; position: relative; }
.nim-icons i::after { content: ''; position: absolute; top: -6px; left: -2px; width: 11px; height: 13px; border-radius: 50%; background: #e5484d; }
.nim-icons i:nth-child(2) { transform: rotate(7deg); }
.nim-icons i:nth-child(4) { transform: rotate(-9deg); }
.banner-galgen { background: linear-gradient(135deg, #1d2440, #2d1b10); }
.galgen-icon { font-size: 24px; font-weight: 800; letter-spacing: .16em; color: var(--gold); }

.imp-icons { display: flex; gap: 10px; font-size: 32px; }
.imp-icons .spy { transform: translateY(-6px) scale(1.15); filter: drop-shadow(0 0 12px rgba(229, 72, 77, .7)); }

.fan { display: flex; }
.fan .mini-card {
    width: 46px; height: 66px; border-radius: 8px; background: #fdfdfa; color: #1c2230;
    font-weight: 800; display: grid; place-items: center; font-size: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45); margin: 0 -7px;
}
.fan .mini-card.red { color: var(--red); }
.fan .mini-card:nth-child(1) { transform: rotate(-12deg) translateY(7px); }
.fan .mini-card:nth-child(3) { transform: rotate(12deg) translateY(7px); }

.sea-grid {
    width: 150px; height: 90px; border-radius: 6px;
    background:
        radial-gradient(circle at 30% 40%, rgba(229, 72, 77, .9) 5px, transparent 6px),
        radial-gradient(circle at 65% 65%, rgba(255, 255, 255, .55) 4px, transparent 5px),
        linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 18px 18px, 18px 18px;
}

.seq { display: flex; }
.seq .mini-card { width: 40px; height: 58px; margin: 0 -5px; font-size: 14px; border-radius: 7px;
    background: #fdfdfa; color: #1c2230; font-weight: 800; display: grid; place-items: center;
    box-shadow: 0 5px 14px rgba(0,0,0,.4); }
.seq .mini-card:nth-child(even) { transform: translateY(6px); }
.seq .mini-card.red { color: var(--red); }

.mig-icons { font-size: 34px; letter-spacing: 8px; }

.game-body { padding: 14px 16px 16px; }
.game-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; }
.badge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; margin-left: auto; }
.badge.live { background: rgba(63, 191, 111, .18); color: var(--green); }
.badge.soon { background: rgba(151, 160, 179, .15); color: var(--muted); }
.game-sub { color: var(--muted); font-size: 14px; margin-top: 3px; }
.game-meta { color: var(--muted); font-size: 12.5px; margin-top: 7px; opacity: .85; }

.hub-foot { text-align: center; margin-top: 36px; color: var(--muted); font-size: 13.5px; }
.hub-foot a { color: var(--accent); }

/* ── Game-Chrome — gemeinsamer Rahmen ALLER Spiel-UIs ──────
   (Screens, Home-Panel, Raum-Leiste, Roster, Endscreen; hierher
   hochgezogen aus maumau/style.css bei der Imposter-Migration) */
.screen { display: none; min-height: 100vh; min-height: 100dvh; flex-direction: column; align-items: center; padding: 24px 16px calc(20px + env(safe-area-inset-bottom)); }
.screen.active { display: flex; }

.hero { text-align: center; margin: 6vh 0 26px; }
.hero h1 { font-size: clamp(52px, 12vw, 84px); font-weight: 800; letter-spacing: -.03em; }
.tagline { color: var(--muted); font-size: 17px; }

.home-actions { display: grid; gap: 10px; margin-top: 16px; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
#in-code { text-transform: uppercase; letter-spacing: .2em; text-align: center; }

/* Etappe 48A: Identitäts-Chip (Name einmal gesetzt → ein Klick zum Spielen) */
.ident-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 12px;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--panel-border);
}
.ident-chip[hidden] { display: none; }
.ident-chip .av { flex: none; }
.ident-chip .ic-name { font-size: 15px; }
.ident-chip .ic-name b { font-weight: 700; }
.ident-chip .ic-edit { margin-left: auto; padding: 6px 12px; font-size: 13px; min-height: 40px; }

.rules, .crew-box { margin-top: 16px; }
.rules summary, .crew-box summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.rules-grid { display: grid; gap: 9px; margin-top: 12px; font-size: 14.5px; }
.rules-grid label { display: flex; align-items: center; gap: 9px; }
.rules-grid input[type="checkbox"] { width: auto; accent-color: var(--accent); }
.rules-inline { justify-content: space-between; }
.rules-inline input, .rules-inline select { width: 110px; padding: 7px 10px; }
.crew-grid { display: grid; gap: 9px; margin-top: 12px; }
.crew-note { font-size: 13px; color: var(--muted); }

.back-link {
    align-self: flex-start; margin-bottom: 4px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 999px; font-size: 14px; text-decoration: none;
    color: var(--muted); background: var(--panel); border: 1px solid var(--panel-border);
}
.back-link:hover { color: var(--text); border-color: var(--accent); }

#screen-room { justify-content: flex-start; }
.room-bar { width: min(760px, 100%); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
/* Schmale Screens: rechte Ecke gehört Shell-Uhr + ☰ (Etappe 35 — die Uhr
   lag sonst ÜBER den Leisten-Chips); Inhalte wrappen stattdessen früher.
   Auf breiten Screens liegt die zentrierte Leiste ohnehin weit weg davon. */
@media (max-width: 900px) { .room-bar { padding-right: 118px; } }
/* E59: Unter 560 px reichen 118 px nicht — die fixe Reihe ist 152 px breit und
   die Uhr saß mittendrin. Statt weiter seitlich zu quetschen rückt die Leiste
   KOMPLETT unter das fixe Chrome (Unterkante 61 px). Das kostet nichts: ohne
   den 118-px-Rand passt „Code + Link" wieder in EINE Zeile, die Leiste wird
   also flacher, statt zu wrappen. */
@media (max-width: 560px) {
    .room-bar { padding-right: 0; margin-top: 40px; }
}
.room-brand { font-weight: 800; letter-spacing: -.02em; font-size: 18px; text-decoration: none; }
/* Code-Chip: NUR der Code, groß und klickbar (Klick = kopieren) */
.code-chip {
    font: inherit; font-size: 15px; font-weight: 800; letter-spacing: .18em;
    color: var(--text); cursor: pointer;
    background: var(--panel); border: 1px solid var(--panel-border); border-radius: 999px; padding: 7px 14px;
}
.code-chip:hover { border-color: var(--accent); }
.crew-chip {
    font: inherit; font-size: 13px; cursor: pointer; color: var(--text);
    background: rgba(88, 101, 242, .22); border: 1px solid rgba(88, 101, 242, .5);
    border-radius: 999px; padding: 6px 12px;
}
/* Etappe 35 (#5): Countdown gibt es EINMAL — die Shell-Uhr (neben ☰).
   Das spielinterne #timer-hint ist damit redundant und zentral aus
   (Code-Ausbau der 11 Intervalle folgt mit Shell-v2). */
.timer-hint { display: none !important; }

/* Etappe 33 (#14): „Alles ok" braucht keinen Punkt — der DAU sieht ihn nur,
   wenn die Verbindung WEG ist (rot, pulsierend). */
.conn-dot { display: none; width: 10px; height: 10px; border-radius: 50%; margin-left: auto; }
.conn-dot.off { display: block; background: var(--red); animation: conn-pulse 1.1s infinite; }
@keyframes conn-pulse { 50% { opacity: .35; } }

/* Etappe 33 (#7): In der Lobby teilt das Lobby-Panel — die Raum-Leiste
   zeigt ihren Teilen-Knopf dann nicht auch noch (Klasse setzt die Shell). */
body.shell-lobby .room-bar #btn-share { display: none; }

.view { display: none; width: min(760px, 100%); flex: 1; flex-direction: column; }
.view.active { display: flex; }

.roster { list-style: none; padding: 0; margin: 16px 0 4px; display: grid; gap: 8px; }
.roster li {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px;
    background: rgba(255, 255, 255, .05); border-radius: 10px; text-align: left;
}
.roster .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.roster .dot.off { background: var(--red); }
.roster .tag { margin-left: auto; font-size: 12px; color: var(--gold); border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; }
.roster .tag.host { color: var(--accent); }
.mod-btns { margin-left: auto; display: flex; gap: 6px; }
.roster .tag + .mod-btns, .mod-btns:only-child { margin-left: auto; }
.mod-btn {
    font: inherit; font-size: 12px; cursor: pointer; color: var(--muted);
    background: rgba(255, 255, 255, .06); border: 1px solid var(--panel-border);
    border-radius: 8px; padding: 4px 9px;
}
.mod-btn:hover { color: var(--red); border-color: var(--red); }

.turn-hint { text-align: center; color: var(--muted); min-height: 24px; margin: 12px 0 0; font-size: 15px; }
/* §4.15 Fokus-Hierarchie: „Du bist dran" ist ein Banner, kein Nebensatz */
.turn-hint.me {
    display: block; width: fit-content; margin: 12px auto 0;
    color: var(--gold); font-weight: 800; font-size: 20px;
    padding: 8px 22px; border-radius: 999px;
    background: rgba(242, 193, 78, .12); border: 1px solid rgba(242, 193, 78, .5);
    animation: focus-pulse 1.6s infinite;
}

/* §4.15: die Box, in der DEINE Entscheidung fällig ist, pulsiert golden */
.action-box.focus {
    border-color: rgba(242, 193, 78, .55);
    box-shadow: 0 0 0 1px rgba(242, 193, 78, .25), 0 0 30px rgba(242, 193, 78, .18);
    animation: focus-pulse 1.6s infinite;
}
@keyframes focus-pulse { 50% { box-shadow: 0 0 0 1px rgba(242, 193, 78, .35), 0 0 40px rgba(242, 193, 78, .32); } }
.timer-hint { text-align: center; color: var(--muted); min-height: 20px; margin: 2px 0 4px; font-size: 13.5px; }
.timer-hint.urgent { color: var(--red); font-weight: 700; }

.trophy { font-size: 52px; }
.scores { margin: 14px auto 4px; border-collapse: collapse; }
.scores td { padding: 5px 14px; }
.scores td:last-child { text-align: right; color: var(--muted); }
.scores tr.w td { color: var(--gold); font-weight: 700; }

@media (max-width: 480px) {
    .hero { margin-top: 3vh; }
}

/* ── Spielkarten (geteilt: Mau+, Blackjack, künftig Rommé …) ──
   Größe steuert jedes Spiel über --card-w in seinem :root. */
.card {
    width: var(--card-w, 70px); height: var(--card-h, calc(var(--card-w, 70px) * 1.45));
    border-radius: 10px; background: #fdfdfa; color: #1c2230; position: relative;
    user-select: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); font-weight: 800;
}
.card.red { color: var(--red); }
.card .pip { position: absolute; font-size: calc(var(--card-w, 70px) * .22); line-height: 1.05; text-align: center; }
.card .pip.tl { top: 6px; left: 7px; }
.card .pip.br { bottom: 6px; right: 7px; transform: rotate(180deg); }
.card .big { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--card-w, 70px) * .5); }
.card.back {
    background: linear-gradient(135deg, #24335c, #3a2a68);
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .12), 0 8px 22px rgba(0, 0, 0, .45);
}
.card.pop { animation: discard-in .28s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes discard-in {
    from { transform: scale(.55) rotate(-14deg); opacity: .3; }
    to { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── Etappe 14/16: Desktop füllt den Platz (§4.16, „wie Codenames") ── */
@media (min-width: 1100px) {
    .view, .room-bar { width: min(1240px, 100%); }
    .seats { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .turn-hint.me { font-size: 23px; }
}
.scores .rk { font-size: 17px; text-align: center; }

/* Etappe 45: globaler Einstieg im Hub + Lobby-Hero */
.hub-entry { margin: 0 0 26px; display: flex; flex-direction: column; gap: 10px; }
.hub-entry .btn.big { margin-top: 0; display: block; text-align: center; text-decoration: none; }
.hub-join { display: flex; gap: 8px; }
.hub-join input { flex: 1; min-width: 0; }
.hub-join-err { color: var(--red); font-size: 13px; margin: 2px 0 0; }
.hub-join-err[hidden] { display: none; }
.hero-lobby { font-size: clamp(34px, 10vw, 48px); letter-spacing: 6px; margin-bottom: 6px; }