/* ============================================================
   TSCHAU SEPP — V2 Game Stylesheet
   Warmes Holztisch-Design, inspiriert von UNO Mobile
   ============================================================ */

:root {
    --card-w: 110px;
    --card-h: 165px;
    --card-radius: 10px;
    --card-overlap: -32px;

    --wood-light: #3d2214;
    --wood-dark: #1a0e08;
    --wood-mid: #2a1810;
    --bg-dark: #110a05;
    --surface: rgba(255,255,255,0.04);

    --gold: #d4a54a;
    --gold-dim: rgba(212,165,74,0.3);
    --swiss-red: #e63946;
    --green: #2ecc71;
    --yellow: #f1c40f;
    --blue: #3498db;

    --text: #f0e6d8;
    --text-dim: #a08d7a;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Page ---------- */
body { margin:0; background:var(--bg-dark); color:var(--text); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; overflow-x:hidden; min-height:100vh; }

/* ---------- Game Board (Holztisch) ---------- */
.game-board {
    display:grid; min-height:100vh; max-width:960px; margin:0 auto; padding:12px 16px 72px;
    background:radial-gradient(ellipse at 50% 45%, var(--wood-light) 0%, var(--wood-dark) 70%, var(--bg-dark) 100%);
    position:relative; gap:8px;
    /* Default: 2 Spieler — top / center / self */
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "top" "center" "self";
}
.game-board::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(90deg,transparent,transparent 80px,rgba(255,255,255,0.008) 80px,rgba(255,255,255,0.008) 81px);
}

/* 3 Spieler: top, center+right, self */
.game-board[data-players="3"] {
    grid-template-columns: 1fr auto;
    grid-template-areas: "top top" "center right" "self self";
}
/* 4 Spieler: top, left+center+right, self */
.game-board[data-players="4"] {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "top top top" "left center right" "self self self";
}

/* ═══════════════════════════════════════════════════════════════════
   Top-Spieler-Karten kompakter bei 3-4 Spielern
   Strategie: --card-w/h/overlap im Scope + harter !important-Override
   auf .card-item. Defense-in-Depth gegen Spezifitäts-Konflikte.
   ═══════════════════════════════════════════════════════════════════ */
.game-board[data-players="3"] .player-area-top,
.game-board[data-players="4"] .player-area-top {
    --card-w: 60px;
    --card-h: 90px;
    --card-overlap: -20px;
    --card-radius: 6px;
    padding: 4px 16px 0;
}
/* HARTER Override — ignoriert alle anderen .card-item-Regeln */
.game-board[data-players="3"] .player-area-top .card-item,
.game-board[data-players="4"] .player-area-top .card-item {
    width: 60px !important;
    height: 90px !important;
    margin-left: -20px !important;
    border-radius: 6px !important;
}
.game-board[data-players="3"] .player-area-top .card-item:first-child,
.game-board[data-players="4"] .player-area-top .card-item:first-child {
    margin-left: 0 !important;
}
.game-board[data-players="3"] .player-area-top .player-profile,
.game-board[data-players="4"] .player-area-top .player-profile {
    margin-bottom: 4px;
}
.game-board[data-players="3"] .player-area-top .hand,
.game-board[data-players="4"] .player-area-top .hand {
    min-height: 100px;
}

/* Bei "Gross"-Setting Top-Karten trotzdem kompakt halten */
body[data-card-size="large"] .game-board[data-players="3"] .player-area-top .card-item,
body[data-card-size="large"] .game-board[data-players="4"] .player-area-top .card-item {
    width: 70px !important;
    height: 105px !important;
}
/* Bei "Klein" noch kleiner */
body[data-card-size="small"] .game-board[data-players="3"] .player-area-top .card-item,
body[data-card-size="small"] .game-board[data-players="4"] .player-area-top .card-item {
    width: 52px !important;
    height: 78px !important;
}

/* Mobile-Anpassung */
@media (max-width: 768px) {
    .game-board[data-players="3"] .player-area-top .card-item,
    .game-board[data-players="4"] .player-area-top .card-item {
        width: 50px !important;
        height: 75px !important;
        margin-left: -16px !important;
    }
    .game-board[data-players="3"] .player-area-top .hand,
    .game-board[data-players="4"] .player-area-top .hand {
        min-height: 86px;
    }
}

/* Grid-Area-Zuweisungen */
.player-area-top   { grid-area: top; }
.player-area-self  { grid-area: self; }
.player-area-right { grid-area: right; }
.player-area-left  { grid-area: left; }
.table-center       { grid-area: center; }

/* ---------- Player Area ---------- */
.player-area { padding:12px 16px; border-radius:16px; background:transparent; position:relative; transition:all 0.4s var(--ease); }
.player-area.current-player { background:rgba(212,165,74,0.06); }

.player-profile { display:flex; align-items:center; gap:10px; margin-bottom:10px; }

.player-avatar {
    width:48px; height:48px; border-radius:50%; background:var(--wood-mid); border:3px solid var(--wood-light);
    display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:var(--gold);
    position:relative; flex-shrink:0;
}
.current-player .player-avatar { border-color:var(--gold); }

/* Timer ring */
.timer-ring {
    position:absolute; inset:-4px; border-radius:50%;
    background:conic-gradient(var(--green) calc(var(--timer-pct,100) * 1%), transparent 0%);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
    opacity:0; transition:opacity 0.3s;
}
.current-player .timer-ring { opacity:1; }
@keyframes timerPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.timer-ring.urgent { animation:timerPulse 0.8s ease infinite; }

.player-name { font-size:15px; font-weight:600; color:var(--text); margin:0; }
.player-card-count { margin-left:auto; color:var(--text-dim); font-size:13px; font-weight:600; }

/* ---------- Hand ---------- */
.hand { display:flex; justify-content:center; align-items:flex-end; min-height:calc(var(--card-h) + 30px); padding:0 10px; perspective:800px; position:relative; }
#player2-hand { align-items:flex-start; }

/* ---------- Seiten-Spieler (rechts/links bei 3-4 Spielern) ---------- */
.player-area-right, .player-area-left {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:10px 8px; min-width:120px;
}
.player-profile-side {
    flex-direction:column; align-items:center; text-align:center;
    margin-bottom:4px; gap:6px;
}
.player-side-info { text-align:center; }
.player-area-right .player-card-count,
.player-area-left  .player-card-count { margin-left:0; }

/* Vertikaler Karten-Stack für Seiten-Spieler — überlappt vertikal, nicht horizontal */
.hand-vertical {
    flex-direction:column; align-items:center; justify-content:flex-start;
    min-height:auto; padding:0;
}
.hand-vertical .card-item {
    width:calc(var(--card-w) * 0.55); height:calc(var(--card-h) * 0.55);
    margin-left:0; margin-top:-60px; transform:none;
    cursor:default;
}
.hand-vertical .card-item:first-child { margin-top:0; }

/* ---------- Cards ---------- */
.card-item {
    width:var(--card-w); height:var(--card-h); border-radius:var(--card-radius);
    border:2px solid rgba(0,0,0,0.4); background-color:white; margin-left:var(--card-overlap);
    cursor:pointer; user-select:none; position:relative; flex-shrink:0;
    transition:transform 0.2s var(--ease),box-shadow 0.2s var(--ease),border-color 0.2s;
    box-shadow:0 4px 12px rgba(0,0,0,0.4);
    transform:rotate(calc(var(--card-angle,0)*1deg));
}
.card-item:first-child { margin-left:0; }
.card-real-image { background-size:cover!important; background-repeat:no-repeat!important; background-position:center!important; }

.card-item.playable { border-color:var(--gold); box-shadow:0 4px 12px rgba(0,0,0,0.4),0 0 10px var(--gold-dim); }
.card-item.playable:hover { transform:translateY(-24px) rotate(calc(var(--card-angle,0)*1deg)) scale(1.08); box-shadow:0 16px 32px rgba(0,0,0,0.5),0 0 20px var(--gold-dim); z-index:50; }
.card-item.disabled { opacity:0.4; cursor:default; filter:grayscale(30%) brightness(0.85); }

.card-back-jass { background:url('/static/images/cardback.jpg') center/cover no-repeat; border:2px solid var(--gold); box-shadow:0 4px 12px rgba(0,0,0,0.4); }

@keyframes cardPlay { 0%{transform:scale(1);opacity:1} 40%{transform:scale(0.9) translateY(-20px);opacity:0.8} 100%{transform:scale(0.5) translateY(-60px);opacity:0} }
.card-item.playing { animation:cardPlay 0.35s var(--ease) forwards; pointer-events:none; }

/* ---------- Table Center ---------- */
.table-center { display:flex; align-items:center; justify-content:center; gap:32px; padding:20px 0; margin:4px 0; min-height:220px; position:relative; }
.table-center::before { content:''; position:absolute; width:90%; height:100%; border-radius:50%; background:radial-gradient(ellipse,rgba(255,255,255,0.03) 0%,transparent 70%); pointer-events:none; }

/* Deck */
.deck-stack { position:relative; width:var(--card-w); height:var(--card-h); cursor:pointer; transition:transform 0.15s var(--ease); }
.deck-stack:hover .deck-layer:nth-child(3) { transform:translateY(-4px); }
.deck-stack:active { transform:scale(0.95); }
.deck-stack .deck-layer { position:absolute; width:100%; height:100%; border-radius:var(--card-radius); background:url('/static/images/cardback.jpg') center/cover no-repeat; border:2px solid var(--gold); box-shadow:0 2px 8px rgba(0,0,0,0.4); transition:transform 0.2s var(--ease); }
.deck-stack .deck-layer:nth-child(1) { top:4px; left:3px; }
.deck-stack .deck-layer:nth-child(2) { top:2px; left:1.5px; }
.deck-stack .deck-layer:nth-child(3) { top:0; left:0; }
.deck-count { position:absolute; bottom:-6px; right:-6px; background:var(--wood-mid); color:var(--gold); font-size:11px; font-weight:700; padding:2px 7px; border-radius:8px; border:1px solid var(--gold-dim); z-index:5; }

@keyframes deckPulse { 0%,100%{box-shadow:0 2px 8px rgba(0,0,0,0.4)} 50%{box-shadow:0 2px 8px rgba(0,0,0,0.4),0 0 12px var(--gold-dim)} }
.deck-stack.pulse .deck-layer:nth-child(3) { animation:deckPulse 0.6s var(--ease) 1; }

/* Discard pile */
.discard-pile { position:relative; width:var(--card-w); height:var(--card-h); }
.discard-pile .card-item { position:absolute; top:0; left:0; margin-left:0; cursor:default; }

/* ═══════════════════════════════════════════════════════════════════
   Schweizer Jasskarten-Symbole als CSS-Sprite
   Quelle: jass_logo.png (500×500, 4 Symbole im 2×2-Grid)
   Top-Left: Eichel | Top-Right: Rosen
   Bot-Left: Schellen | Bot-Right: Schilten
   ═══════════════════════════════════════════════════════════════════ */
.jass-symbol {
    background-image: url('/static/images/jass_logo.png');
    background-size: 200% 200%;
    background-repeat: no-repeat;
    display: inline-block;
}
.jass-symbol[data-suit="eichel"]   { background-position: 0% 0%; }
.jass-symbol[data-suit="rosen"]    { background-position: 100% 0%; }
.jass-symbol[data-suit="schellen"] { background-position: 0% 100%; }
.jass-symbol[data-suit="schilten"] { background-position: 100% 100%; }

/* Color indicator — zeigt aktuell zu spielende Farbe mit echten Schweizer Symbolen */
.color-indicator { display:flex; flex-direction:column; align-items:center; gap:6px; }
.color-circle {
    width:78px; height:78px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.95);
    border:3px solid var(--gold);
    transition:transform 0.3s var(--ease);
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
    overflow:hidden;
}
.color-circle .jass-symbol {
    width:62px; height:62px;
}
.color-indicator .color-name { font-size:12px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:1.5px; }

/* Farbwahl-Modal: Symbol-Wrapper */
.color-symbol-wrap {
    width:60px; height:60px;
    display:flex; align-items:center; justify-content:center;
}
.color-symbol-wrap .jass-symbol {
    width:60px; height:60px;
}

/* ---------- Tschau/Sepp Call Buttons ---------- */
.call-button {
    width:64px; height:64px; border-radius:50%; border:none; cursor:pointer;
    font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    transition:transform 0.15s var(--ease),box-shadow 0.15s var(--ease);
    position:absolute; right:8px; z-index:100;
}
.call-button:hover { transform:scale(1.1); }
.call-button:active { transform:scale(0.93); }
.call-button i { font-size:18px; }

#tschau-button { background:linear-gradient(135deg,var(--gold),#b8860b); color:#1a0e08; box-shadow:0 4px 16px rgba(212,165,74,0.4); top:calc(50% - 36px); }
#sepp-button { background:linear-gradient(135deg,var(--green),#27ae60); color:white; box-shadow:0 4px 16px rgba(46,204,113,0.4); top:calc(50% - 36px); }

@keyframes callPulse { 0%,100%{box-shadow:0 4px 16px rgba(212,165,74,0.4),0 0 0 0 rgba(212,165,74,0.3)} 50%{box-shadow:0 4px 16px rgba(212,165,74,0.4),0 0 0 10px rgba(212,165,74,0)} }
#tschau-button:not([style*="none"]) { animation:callPulse 1.5s ease infinite; }
#sepp-button:not([style*="none"]) { animation:callPulse 1.5s ease infinite; }

/* ---------- Action Bar ---------- */
#game-action-bar {
    position:fixed; bottom:0; left:0; right:0; z-index:9000;
    background:rgba(17,10,5,0.95); backdrop-filter:blur(12px);
    border-top:1px solid rgba(212,165,74,0.15); padding:10px 16px;
    display:flex; align-items:center; justify-content:center; gap:12px;
}
#game-action-bar .status-text { font-size:14px; font-weight:600; margin-right:auto; padding-left:8px; color:var(--text-dim); }
#draw-card { padding:10px 20px; border:2px solid var(--gold); border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; background:transparent; color:var(--gold); transition:all 0.15s var(--ease); }
#draw-card:hover { background:var(--gold); color:var(--bg-dark); }

/* ---------- Emote Button & Picker ---------- */
.emote-btn {
    width:38px; height:38px; border-radius:50%;
    background:transparent; border:1px solid rgba(212,165,74,0.25);
    color:var(--gold); font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.15s var(--ease);
}
.emote-btn:hover { background:rgba(212,165,74,0.1); transform:scale(1.08); }
.emote-btn:active { transform:scale(0.94); }

.emote-picker {
    position:absolute; bottom:60px; right:16px;
    background:rgba(26,14,8,0.96); backdrop-filter:blur(12px);
    border:1px solid rgba(212,165,74,0.25);
    border-radius:14px; padding:10px;
    display:grid; grid-template-columns:repeat(5,1fr); gap:4px;
    box-shadow:0 8px 24px rgba(0,0,0,0.5);
    z-index:9001;
    animation:emotePopIn 0.2s var(--ease);
}
@keyframes emotePopIn {
    from { opacity:0; transform:translateY(8px) scale(0.9); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
.emote-option {
    width:40px; height:40px; border:none; background:transparent;
    font-size:22px; cursor:pointer; border-radius:8px;
    transition:background 0.15s, transform 0.15s;
    display:flex; align-items:center; justify-content:center;
}
.emote-option:hover { background:rgba(212,165,74,0.15); transform:scale(1.15); }

/* Floating Emote Bubble */
#emote-bubble-layer {
    position:fixed; inset:0; pointer-events:none; z-index:9500;
}
.emote-bubble {
    position:absolute;
    font-size:52px; line-height:1;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,0.6));
    animation:emoteFloat 2.5s ease-out forwards;
    pointer-events:none;
    user-select:none;
}
@keyframes emoteFloat {
    0%   { opacity:0; transform:translate(-50%,0) scale(0.4); }
    15%  { opacity:1; transform:translate(-50%,-20px) scale(1.2); }
    30%  { transform:translate(-50%,-30px) scale(1); }
    80%  { opacity:1; transform:translate(-50%,-60px) scale(1); }
    100% { opacity:0; transform:translate(-50%,-90px) scale(0.9); }
}

/* ---------- Color Selection ---------- */
#color-selection { position:fixed; top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,0.8); z-index:9999; display:flex; align-items:center; justify-content:center; }

/* ---------- Messages ---------- */
.message-log { max-height:60px; overflow-y:auto; font-size:12px; padding:6px 10px; background:rgba(0,0,0,0.25); border-radius:8px; color:var(--text-dim); margin-top:6px; }
.message-log p { margin:0 0 3px; }

/* ---------- Lobby (Holztisch-Theme) ---------- */
body {
    background:
        radial-gradient(ellipse at 50% 30%, #3d2214 0%, #1a0e08 60%, var(--bg-dark) 100%);
    min-height:100vh;
}
body::before {
    content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
    background:repeating-linear-gradient(90deg,transparent,transparent 90px,rgba(255,255,255,0.008) 90px,rgba(255,255,255,0.008) 91px);
}
.container-fluid { position:relative; z-index:1; }

/* Logo kleiner und eleganter */
.logo-image { max-width:180px; opacity:0.95; filter:drop-shadow(0 4px 12px rgba(212,165,74,0.2)); }
.jass-logo { margin-bottom:8px; }

/* Karten-Look für Lobby/Waiting-Room */
.modern-card, .card {
    background:linear-gradient(180deg, rgba(42,24,16,0.92), rgba(26,14,8,0.92))!important;
    backdrop-filter:blur(8px);
    border:1px solid rgba(212,165,74,0.2)!important;
    border-radius:16px!important;
    box-shadow:0 12px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(212,165,74,0.08);
}
.modern-header, .card-header {
    background:transparent!important;
    border-bottom:1px solid rgba(212,165,74,0.15)!important;
    padding:20px 24px!important;
}
.modern-header h4, .card-header h4, .card-header h5 {
    color:var(--gold)!important;
    font-weight:700;
    letter-spacing:0.3px;
}
.card-body { padding:24px!important; color:var(--text); }

/* Inputs im Holz-Stil */
.modern-input, .form-control {
    background:rgba(17,10,5,0.6)!important;
    color:var(--text)!important;
    border:1px solid rgba(212,165,74,0.2)!important;
    border-radius:10px!important;
    padding:12px 14px!important;
    font-size:15px!important;
    transition:border-color 0.2s, background 0.2s;
}
.modern-input:focus, .form-control:focus {
    border-color:var(--gold)!important;
    background:rgba(17,10,5,0.85)!important;
    box-shadow:0 0 0 3px rgba(212,165,74,0.15)!important;
    outline:none!important;
}
.modern-input::placeholder, .form-control::placeholder { color:var(--text-dim)!important; }
.modern-label, .form-label { color:var(--text-dim)!important; font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:0.6px; margin-bottom:8px; }

/* Buttons */
.btn-primary, .btn-success, .btn-warning {
    border:none!important; border-radius:10px!important;
    padding:12px 18px!important; font-weight:600!important;
    transition:transform 0.15s var(--ease), box-shadow 0.15s var(--ease)!important;
}
.btn-primary:hover:not(:disabled),
.btn-success:hover:not(:disabled),
.btn-warning:hover:not(:disabled) { transform:translateY(-1px); }
.btn-primary:active, .btn-success:active, .btn-warning:active { transform:scale(0.98); }

.btn-outline-light {
    border:2px solid rgba(212,165,74,0.4)!important;
    color:var(--gold)!important; background:transparent!important;
    border-radius:10px!important;
    padding:10px 18px!important; font-weight:600!important;
    transition:all 0.15s var(--ease)!important;
}
.btn-outline-light:hover { background:rgba(212,165,74,0.1)!important; border-color:var(--gold)!important; }

.btn-secondary {
    background:rgba(255,255,255,0.05)!important;
    color:var(--text-dim)!important;
    border:1px solid rgba(255,255,255,0.08)!important;
    border-radius:10px!important;
}
.btn-secondary:hover { background:rgba(255,255,255,0.08)!important; color:var(--text)!important; }

/* Divider */
.modern-divider { color:var(--text-dim)!important; font-size:12px; letter-spacing:1px; }

/* Warteraum */
.modern-alert, .alert-info {
    background:rgba(212,165,74,0.08)!important;
    border:1px solid rgba(212,165,74,0.25)!important;
    color:var(--text)!important;
    border-radius:12px!important;
    padding:18px!important;
}
.modern-alert h5 { margin-bottom:6px; font-size:15px; color:var(--text-dim)!important; font-weight:500; }
.modern-badge.bg-primary {
    background:var(--gold)!important; color:var(--bg-dark)!important;
    font-family:monospace; letter-spacing:3px; padding:6px 14px!important;
    border-radius:8px!important;
}

.modern-list .list-group-item {
    background:rgba(17,10,5,0.5)!important;
    border:1px solid rgba(212,165,74,0.15)!important;
    color:var(--text)!important;
    border-radius:10px!important;
    margin-bottom:6px;
    padding:12px 14px!important;
}
.modern-list .badge.bg-primary { background:var(--gold)!important; color:var(--bg-dark)!important; }
.modern-list .badge.bg-warning { background:rgba(212,165,74,0.2)!important; color:var(--gold)!important; border:1px solid rgba(212,165,74,0.3); }

.modern-subtitle { color:var(--text-dim)!important; font-size:13px; text-transform:uppercase; letter-spacing:0.8px; margin-bottom:10px; }
.modern-status { color:var(--text-dim)!important; font-size:14px; }
.text-success { color:var(--green)!important; }
.text-muted { color:var(--text-dim)!important; }

/* ---------- Responsive ---------- */
@media (max-width:768px) {
    :root { --card-w:80px; --card-h:120px; --card-overlap:-24px; }
    .table-center { gap:20px; min-height:170px; }
    .call-button { width:54px; height:54px; font-size:10px; }
    .call-button i { font-size:16px; }
    .color-circle { width:62px; height:62px; }
    .color-circle img { width:46px; height:46px; }
    /* Seiten-Spieler kompakter auf Mobile */
    .player-area-right, .player-area-left { min-width:80px; padding:6px 4px; }
    .hand-vertical .card-item { width:36px; height:54px; margin-top:-36px; }
    .player-profile-side .player-avatar { width:36px; height:36px; font-size:14px; }
    .player-profile-side .player-name { font-size:12px; }
    .player-profile-side .player-card-count { font-size:11px; }
}
@media (max-width:480px) {
    :root { --card-w:68px; --card-h:102px; --card-overlap:-20px; }
    .call-button { width:48px; height:48px; }
    /* Sehr schmale Handys: Seiten-Spieler auf Minimum */
    .player-area-right, .player-area-left { min-width:60px; }
    .hand-vertical .card-item { width:28px; height:42px; margin-top:-28px; }
}

/* ---------- Winner / Disconnect Screen ---------- */
.winner-overlay {
    position:fixed; inset:0; z-index:10000;
    background:rgba(0,0,0,0.85);
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(8px);
}

.winner-card {
    background:var(--wood-mid); border:1px solid rgba(212,165,74,0.2);
    border-radius:20px; padding:40px 32px; max-width:380px; width:90%;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
    animation:winnerAppear 0.4s var(--ease);
}

@keyframes winnerAppear {
    0% { transform:scale(0.8) translateY(20px); opacity:0; }
    100% { transform:scale(1) translateY(0); opacity:1; }
}

.winner-emoji { font-size:64px; margin-bottom:16px; }
.winner-title { font-size:24px; font-weight:700; color:var(--text); margin:0 0 8px; }
.winner-subtitle { font-size:15px; color:var(--text-dim); margin:0 0 28px; }

.winner-buttons { display:flex; flex-direction:column; gap:10px; }

.winner-btn {
    padding:14px 24px; border:none; border-radius:12px; font-size:16px; font-weight:600;
    cursor:pointer; transition:transform 0.15s var(--ease),box-shadow 0.15s var(--ease);
    display:flex; align-items:center; justify-content:center;
}
.winner-btn:hover { transform:translateY(-1px); }
.winner-btn:active { transform:scale(0.97); }
.winner-btn:disabled { opacity:0.6; cursor:default; transform:none; }

.winner-btn-primary { background:var(--gold); color:var(--bg-dark); box-shadow:0 4px 16px rgba(212,165,74,0.3); }
.winner-btn-primary:hover { box-shadow:0 6px 20px rgba(212,165,74,0.4); }

.winner-btn-secondary { background:transparent; color:var(--text-dim); border:1px solid rgba(255,255,255,0.1); }
.winner-btn-secondary:hover { background:rgba(255,255,255,0.05); }

.rematch-status { font-size:13px; color:var(--gold); margin-top:16px; }

/* ═══════════════════════════════════════════════════════════════════
   Settings-Card "Anpassen" (Kartengrösse + Tischhintergrund)
   ═══════════════════════════════════════════════════════════════════ */
.settings-toggle-btn {
    position: fixed; bottom: 16px; right: 16px; z-index: 510;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(26,14,8,0.85); backdrop-filter: blur(8px);
    border: 1px solid rgba(212,165,74,0.3);
    color: var(--gold);
    font-size: 16px; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}
.settings-toggle-btn:hover { transform: scale(1.06); background: rgba(26,14,8,0.95); }
.settings-toggle-btn:active { transform: scale(0.94); }
/* Während Spiel ist die action-bar unten — Toggle hochrücken damit's nicht überlappt */
body.in-game .settings-toggle-btn { bottom: 76px; }

.settings-card {
    position: fixed;
    bottom: 70px; right: 16px;
    z-index: 9000;
    width: 240px;
    background: linear-gradient(180deg, #1a0e08 0%, #2a1810 100%);
    border: 1px solid rgba(212,165,74,0.3);
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    color: var(--text);
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.settings-card.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.settings-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(212,165,74,0.15);
}
.settings-header h4 {
    margin: 0; color: var(--gold);
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
}
.settings-close {
    background: none; border: none; color: var(--text-dim);
    font-size: 22px; cursor: pointer; line-height: 1;
    padding: 0 4px;
}
.settings-close:hover { color: var(--text); }

.settings-section { margin-bottom: 14px; }
.settings-section:last-child { margin-bottom: 0; }
.settings-label {
    font-size: 11px; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.5px;
    font-weight: 700; margin-bottom: 8px;
}
.settings-btn-group {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.settings-btn {
    background: transparent;
    border: 1px solid rgba(212,165,74,0.2);
    color: var(--text-dim);
    padding: 7px 8px;
    font-size: 12px; font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s var(--ease);
}
.settings-btn:hover { background: rgba(212,165,74,0.08); color: var(--text); }
.settings-btn.active {
    background: var(--gold);
    color: var(--bg-dark);
    border-color: var(--gold);
    font-weight: 700;
}
.settings-btn.active:hover { background: var(--gold); color: var(--bg-dark); }

@media (max-width: 480px) {
    .settings-card { left: 12px; right: 12px; width: auto; bottom: 72px; }
    body.in-game .settings-card { bottom: 130px; }
}

/* ── Setting "Kartengrösse" — überschreibt CSS-Variablen ────────────── */
body[data-card-size="small"]  { --card-w: 92px;  --card-h: 138px; --card-overlap: -28px; }
body[data-card-size="normal"] { --card-w: 110px; --card-h: 165px; --card-overlap: -32px; }
body[data-card-size="large"]  { --card-w: 130px; --card-h: 195px; --card-overlap: -38px; }
@media (max-width: 768px) {
    body[data-card-size="small"]  { --card-w: 64px;  --card-h: 96px;  --card-overlap: -20px; }
    body[data-card-size="normal"] { --card-w: 80px;  --card-h: 120px; --card-overlap: -24px; }
    body[data-card-size="large"]  { --card-w: 96px;  --card-h: 144px; --card-overlap: -28px; }
}

/* ── Setting "Tischhintergrund" — drei Themes ──────────────────────── */
body[data-bg="wood"] .game-board {
    background: radial-gradient(ellipse at 50% 45%, var(--wood-light) 0%, var(--wood-dark) 70%, var(--bg-dark) 100%);
}
body[data-bg="night"] .game-board {
    background: radial-gradient(ellipse at 50% 45%, #1a2436 0%, #0d1420 70%, #050810 100%);
}
body[data-bg="felt"] .game-board {
    background: radial-gradient(ellipse at 50% 45%, #1d4a2e 0%, #0f2c1c 70%, #050d08 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   Back-zum-Menü-Button (Game-Screen oben links)
   ═══════════════════════════════════════════════════════════════════ */
.back-to-lobby-btn {
    position: fixed;
    top: 14px; left: 14px;
    z-index: 500;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(26,14,8,0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(212,165,74,0.3);
    color: var(--gold);
    font-size: 15px; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    transition: transform 0.15s var(--ease), background 0.15s var(--ease);
    display: flex; align-items: center; justify-content: center;
}
.back-to-lobby-btn:hover  { transform: translateX(-2px) scale(1.04); background: rgba(26,14,8,0.95); }
.back-to-lobby-btn:active { transform: scale(0.94); }

/* ═══════════════════════════════════════════════════════════════════
   Lobby Card-Fan-Hero (über dem Lobby-Panel)
   6 echte Jasskarten als Fächer, sanft schaukelnd. Reines CSS.
   ═══════════════════════════════════════════════════════════════════ */
.lb-fan {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 220px;
    margin: 0 auto;
    transform-origin: bottom center;
    animation: fanSway 7s ease-in-out infinite;
    pointer-events: none;
}
.lb-fan .fc {
    position: absolute;
    bottom: 0;
    left: calc(50% - 44px);   /* Mitte minus halbe Kartenbreite (88/2) */
    width: 88px;
    height: 132px;
    border-radius: 9px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    border: 1px solid rgba(0,0,0,0.25);
    transform-origin: bottom center;
    /* Backface-Hidden für smoothere Renderings */
    backface-visibility: hidden;
}
/* Karten 1-6: -30°, -18°, -6°, +6°, +18°, +30° */
.lb-fan .fc:nth-child(1) { transform: rotate(-30deg); z-index: 1; }
.lb-fan .fc:nth-child(2) { transform: rotate(-18deg); z-index: 2; }
.lb-fan .fc:nth-child(3) { transform: rotate(-6deg);  z-index: 3; }
.lb-fan .fc:nth-child(4) { transform: rotate(6deg);   z-index: 4; }
.lb-fan .fc:nth-child(5) { transform: rotate(18deg);  z-index: 5; }
.lb-fan .fc:nth-child(6) { transform: rotate(30deg);  z-index: 6; }

@keyframes fanSway {
    0%, 100% { transform: rotate(-1.5deg); }
    50%      { transform: rotate( 1.5deg); }
}

/* Mobile: Fan wird kleiner */
@media (max-width: 640px) {
    .lb-fan { max-width: 300px; height: 180px; }
    .lb-fan .fc { width: 76px; height: 114px; left: calc(50% - 38px); }
}
@media (max-width: 380px) {
    .lb-fan { max-width: 260px; height: 160px; }
    .lb-fan .fc { width: 68px; height: 102px; left: calc(50% - 34px); }
}

/* Reduced-Motion: Fan steht still (Karten bleiben sichtbar) */
@media (prefers-reduced-motion: reduce) {
    .lb-fan { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Lobby-Decor: schwebende Asse im Hintergrund
   ═══════════════════════════════════════════════════════════════════ */
#lobby-screen { position: relative; z-index: 1; }
.lobby-decor-cards {
    position: absolute; inset: -40px -20px;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.decor-card {
    position: absolute;
    width: 140px; height: 210px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.18;
    filter: brightness(0.85) contrast(0.95);
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
    will-change: transform;
}
/* Sechs Positionen mit unterschiedlichen Drehungen + langsamem Drift */
.decor-card-1 { top:  4%;  left: -3%;  transform: rotate(-22deg); animation: decor-drift-a 22s ease-in-out infinite; }
.decor-card-2 { top: 38%;  left:  2%;  transform: rotate( 18deg); animation: decor-drift-b 26s ease-in-out infinite; }
.decor-card-3 { top: 72%;  left: -1%;  transform: rotate( -8deg); animation: decor-drift-c 24s ease-in-out infinite; }
.decor-card-4 { top:  6%;  right:-2%;  transform: rotate( 24deg); animation: decor-drift-b 28s ease-in-out infinite reverse; }
.decor-card-5 { top: 44%;  right:-4%;  transform: rotate(-14deg); animation: decor-drift-a 30s ease-in-out infinite reverse; }
.decor-card-6 { top: 78%;  right: 1%;  transform: rotate( 12deg); animation: decor-drift-c 25s ease-in-out infinite reverse; }

@keyframes decor-drift-a {
    0%,100% { transform: translate(0,0)   rotate(var(--rot, -22deg)); }
    50%     { transform: translate(8px,-12px) rotate(calc(var(--rot, -22deg) + 3deg)); }
}
@keyframes decor-drift-b {
    0%,100% { transform: translate(0,0)   rotate(var(--rot, 18deg)); }
    50%     { transform: translate(-10px,8px) rotate(calc(var(--rot, 18deg) - 4deg)); }
}
@keyframes decor-drift-c {
    0%,100% { transform: translate(0,0)   rotate(var(--rot, -8deg)); }
    50%     { transform: translate(6px,10px) rotate(calc(var(--rot, -8deg) + 2deg)); }
}

/* Mobile: weniger Karten, dezenter */
@media (max-width: 768px) {
    .decor-card { width: 88px; height: 132px; opacity: 0.12; }
    .decor-card-2, .decor-card-5 { display: none; }
}
@media (max-width: 480px) {
    .decor-card-3, .decor-card-6 { display: none; }
}

/* Reduced-Motion: keine Drift-Animation */
@media (prefers-reduced-motion: reduce) {
    .decor-card { animation: none !important; }
}

/* ---------- Hide legacy ---------- */
.game-table,.direction-indicator,.game-timer,.turn-timer,.deck-area,.deck-label,.discard-label,#current-color,.floating-action-buttons,#emote-toggle,.game-actions,#start-game { display:none!important; }

/* ═══════════════════════════════════════════════════════════════════
   FX-Layer (animations.js)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fliegende Karte (Clone) ───────────────────────────────────────── */
.fx-flying-card {
    position:fixed; z-index:9500; pointer-events:none;
    border-radius:var(--card-radius); border:2px solid rgba(0,0,0,0.4);
    background:white; background-size:cover !important;
    box-shadow:0 12px 32px rgba(0,0,0,0.5);
    will-change:transform,opacity;
}
.fx-flying-card.fx-card-real { background-color:transparent; }

/* ── Sonderkarten-Text (+2, +4, SKIP) ──────────────────────────────── */
.fx-special-text {
    position:fixed; z-index:9600; pointer-events:none;
    font-weight:900; font-size:64px; line-height:1;
    transform:translate(-50%,-50%) scale(0.3);
    opacity:0;
    transition:transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
               opacity  0.3s ease;
    text-shadow:0 4px 16px rgba(0,0,0,0.6), 0 0 30px currentColor;
    letter-spacing:-2px;
    font-family:'Inter', sans-serif;
}
.fx-special-text.flying { opacity:1; }
.fx-special-text.fx-fade-out { opacity:0; transform:translate(-50%,-50%) scale(1.5); }
.fx-special-plus2 { color:#ffd166; }
.fx-special-plus4 { color:#ff6b6b; font-size:80px; }
.fx-special-skip  { color:#3498db; font-size:56px; letter-spacing:2px; }

/* ── Ziel-Zucken (Avatar-Hit) ──────────────────────────────────────── */
@keyframes fx-hit-shake {
    0%,100% { transform:translateX(0); }
    20%     { transform:translateX(-8px) rotate(-2deg); }
    40%     { transform:translateX(8px)  rotate(2deg); }
    60%     { transform:translateX(-6px) rotate(-1deg); }
    80%     { transform:translateX(6px)  rotate(1deg); }
}
.fx-target-hit { animation:fx-hit-shake 0.4s ease; }

/* ── Screenshake ────────────────────────────────────────────────────── */
@keyframes fx-screen-shake {
    0%,100% { transform:translate(0,0); }
    10% { transform:translate(calc(var(--fx-shake-amount,6px) * -1), 2px); }
    20% { transform:translate(var(--fx-shake-amount,6px), -2px); }
    30% { transform:translate(calc(var(--fx-shake-amount,6px) * -0.7), 3px); }
    40% { transform:translate(calc(var(--fx-shake-amount,6px) * 0.7), -1px); }
    50% { transform:translate(calc(var(--fx-shake-amount,6px) * -0.5), 1px); }
    60% { transform:translate(calc(var(--fx-shake-amount,6px) * 0.5), -2px); }
    70% { transform:translate(-2px, 1px); }
    80% { transform:translate(2px, -1px); }
    90% { transform:translate(-1px, 0); }
}
.fx-shake { animation:fx-screen-shake 0.3s ease; }

/* ── Color-Flash (Rand-Glow bei Events) ───────────────────────────── */
.fx-color-flash {
    position:fixed; inset:0; z-index:9700; pointer-events:none;
    opacity:0; transition:opacity 0.2s ease;
}
.fx-color-flash.show { opacity:1; }

/* ── Partikel ────────────────────────────────────────────────────────── */
.fx-particle {
    position:fixed; z-index:9600; pointer-events:none;
    width:8px; height:8px; border-radius:50%;
    transform:translate(0,0) scale(1);
    transition:transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease;
    box-shadow:0 0 6px currentColor;
}

/* ── Confetti (Winner-Screen) ─────────────────────────────────────── */
.fx-confetti-wrap {
    position:fixed; inset:0; z-index:9800; pointer-events:none; overflow:hidden;
}
.fx-confetti {
    position:absolute; top:-20px;
    width:10px; height:16px;
    animation:fx-confetti-fall linear forwards;
}
@keyframes fx-confetti-fall {
    0%   { transform:translateY(0)   rotate(0deg);   opacity:1; }
    100% { transform:translateY(110vh) rotate(720deg); opacity:0.8; }
}

/* ── Winner-Screen Upgrades ────────────────────────────────────────── */
.winner-card.celebrating { animation: winnerBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes winnerBounce {
    0% { transform:scale(0.3) rotate(-10deg); opacity:0; }
    60% { transform:scale(1.1) rotate(2deg); opacity:1; }
    100% { transform:scale(1) rotate(0deg); opacity:1; }
}
.winner-emoji { animation:emoji-pulse 1s ease-in-out infinite alternate; }
@keyframes emoji-pulse {
    from { transform:scale(1); }
    to   { transform:scale(1.1); }
}
.winner-stats {
    display:flex; gap:12px; margin:20px 0; justify-content:center;
    font-variant-numeric:tabular-nums;
}
.winner-stat {
    background:rgba(212,165,74,0.1);
    border:1px solid rgba(212,165,74,0.2);
    border-radius:10px; padding:10px 14px;
    flex:1; min-width:80px;
}
.winner-stat-value {
    font-size:22px; font-weight:800; color:var(--gold);
    line-height:1;
}
.winner-stat-label {
    font-size:10px; color:var(--text-dim); margin-top:4px;
    text-transform:uppercase; letter-spacing:0.5px;
}

/* ── Level-Up Cutscene ─────────────────────────────────────────────── */
.fx-level-up {
    position:fixed; inset:0; z-index:10500; pointer-events:none;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity 0.3s ease;
}
.fx-level-up.show { opacity:1; }
.fx-level-up-banner {
    background:linear-gradient(135deg, var(--gold), #c49340);
    color:var(--bg-dark); padding:20px 40px;
    border-radius:16px; font-size:24px; font-weight:900;
    text-transform:uppercase; letter-spacing:2px;
    box-shadow:0 20px 60px rgba(212,165,74,0.5);
    animation:level-up-banner 1.8s ease forwards;
}
@keyframes level-up-banner {
    0%   { transform:scale(0) rotate(-180deg); }
    20%  { transform:scale(1.2) rotate(10deg); }
    30%  { transform:scale(1) rotate(0); }
    80%  { transform:scale(1) rotate(0); }
    100% { transform:scale(0.8) translateY(-80px); opacity:0; }
}

/* ── Reduced motion Respekt ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fx-shake, .fx-target-hit, .winner-card.celebrating,
    .winner-emoji, .fx-level-up-banner, .fx-confetti {
        animation: none !important;
    }
    .fx-flying-card, .fx-special-text, .fx-particle {
        transition: opacity 0.2s ease !important;
    }
}

/* ============================================================
   AUTH-UX V2: Passwort-Stärke + Verification-Banner + Toasts
   ============================================================ */

/* Passwort-Stärke-Anzeige im Register-Panel */
.pw-strength { margin: 6px 2px 8px; }
.pw-strength-bar {
    width: 100%; height: 5px; background: rgba(255,255,255,0.08);
    border-radius: 3px; overflow: hidden;
}
.pw-strength-fill {
    height: 100%; width: 0%;
    background: #ef4444;
    transition: width 0.25s ease, background 0.25s ease;
    border-radius: 3px;
}
.pw-strength-fill[data-level="1"] { width: 25%;  background: #ef4444; }
.pw-strength-fill[data-level="2"] { width: 50%;  background: #f59e0b; }
.pw-strength-fill[data-level="3"] { width: 75%;  background: #eab308; }
.pw-strength-fill[data-level="4"] { width: 100%; background: #22c55e; }
.pw-strength-label {
    font-size: 11px; color: var(--text-dim);
    margin-top: 4px; min-height: 14px;
}

/* E-Mail-Verifikations-Banner */
.verify-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
    background: linear-gradient(90deg, #f59e0b, #d4a54a);
    color: #1a0e08; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.verify-banner-content {
    max-width: 1100px; margin: 0 auto; padding: 10px 16px;
    display: flex; align-items: center; gap: 12px;
    font-size: 14px; font-weight: 600;
}
.verify-banner-content i { font-size: 16px; }
.verify-banner-text { flex: 1; line-height: 1.4; }
.verify-banner-btn {
    background: #1a0e08; color: #d4a54a; border: none;
    padding: 7px 14px; border-radius: 8px; font-weight: 700; font-size: 13px;
    cursor: pointer; transition: background 0.15s;
}
.verify-banner-btn:hover { background: #2a1810; }
.verify-banner-btn:disabled { opacity: 0.6; cursor: default; }
.verify-banner-close {
    background: transparent; border: none; color: #1a0e08;
    font-size: 22px; line-height: 1; padding: 0 6px;
    cursor: pointer; opacity: 0.6;
}
.verify-banner-close:hover { opacity: 1; }
@media (max-width: 600px) {
    .verify-banner-content { font-size: 13px; gap: 8px; padding: 8px 12px; }
    .verify-banner-btn { padding: 6px 10px; font-size: 12px; }
}

/* Toast-Notifications (für bessere Fehlermeldungen) */
.toast-container {
    position: fixed; bottom: 24px; right: 24px; z-index: 10000;
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none; max-width: 90vw;
}
.toast {
    background: #151e30; color: #f1f5f9;
    border-left: 4px solid var(--gold);
    padding: 14px 18px; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    font-size: 14px; line-height: 1.45; max-width: 380px;
    pointer-events: auto;
    animation: toast-in 0.3s ease forwards;
}
.toast.toast-success { border-left-color: #22c55e; }
.toast.toast-error   { border-left-color: #ef4444; }
.toast.toast-warn    { border-left-color: #f59e0b; }
.toast.toast-leaving { animation: toast-out 0.25s ease forwards; }
@keyframes toast-in {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toast-out {
    to { transform: translateX(100%); opacity: 0; }
}
@media (max-width: 600px) {
    .toast-container { right: 12px; left: 12px; bottom: 12px; }
    .toast { max-width: none; }
}

/* ============================================================
   PHASE A: Hero-Logo, Tagline, Marken-Identität in der Lobby
   ============================================================ */

/* Wrapper rund um Card-Fan + Logo + Tagline */
.lobby-hero {
    text-align: center;
    margin: 8px auto 28px;
    padding: 0 16px;
    max-width: 720px;
}

/* Card-Fan kompakter wenn Logo darunter steht */
.lobby-hero .lb-fan {
    height: 180px;
    max-width: 320px;
    margin-bottom: 14px;
    opacity: 0.92;
}
.lobby-hero .lb-fan .fc {
    width: 78px;
    height: 117px;
    left: calc(50% - 39px);
}

/* Logo-Schriftzug (typografisches Logo) */
.hero-logo {
    margin: 0;
    font-family: 'Georgia', 'Cambria', 'Iowan Old Style', serif;
    font-size: clamp(40px, 7vw, 64px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: var(--gold, #d4a54a);
    text-shadow: 0 2px 24px rgba(212, 165, 74, 0.18),
                 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* Goldene Akzent-Linie unter dem Logo */
.hero-divider {
    width: 64px;
    height: 2px;
    margin: 14px auto 12px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--gold, #d4a54a) 50%,
        transparent 100%);
    border-radius: 2px;
}

/* Tagline */
.hero-tagline {
    margin: 0;
    font-size: clamp(13px, 1.6vw, 16px);
    color: rgba(240, 230, 216, 0.62);
    letter-spacing: 0.02em;
    font-weight: 400;
    line-height: 1.5;
}

/* Mobile-Anpassung */
@media (max-width: 640px) {
    .lobby-hero { margin: 4px auto 20px; }
    .lobby-hero .lb-fan {
        height: 140px;
        max-width: 240px;
        margin-bottom: 8px;
    }
    .lobby-hero .lb-fan .fc {
        width: 60px; height: 90px;
        left: calc(50% - 30px);
    }
    .hero-divider { margin: 10px auto 8px; }
}

/* Lobby-Section-Header (statt Em-Dash-Divider) */
.lobby-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 12px;
}
.lobby-section-header::before,
.lobby-section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(212, 165, 74, 0.18),
        transparent);
}
.lobby-section-label {
    color: rgba(240, 230, 216, 0.55);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Username-Input mit Shuffle-Button daneben */
.player-name-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.player-name-row input {
    flex: 1;
}
.player-name-shuffle {
    flex-shrink: 0;
    width: 44px;
    background: rgba(212, 165, 74, 0.1);
    border: 1px solid rgba(212, 165, 74, 0.3);
    color: var(--gold, #d4a54a);
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.15s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.player-name-shuffle:hover {
    background: rgba(212, 165, 74, 0.2);
    color: #f0e6d8;
}
.player-name-shuffle:active {
    transform: scale(0.94);
}
.player-name-shuffle.rolling i {
    animation: dice-roll 0.45s ease-out;
}
@keyframes dice-roll {
    0%   { transform: rotate(0deg)   scale(1); }
    50%  { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Reduced motion respektieren */
@media (prefers-reduced-motion: reduce) {
    .lb-fan { animation: none; }
    .player-name-shuffle.rolling i { animation: none; }
}

/* ============================================================
   PHASE B: Eigenes Design-System (Bootstrap-Ersatz)
   Präfix "ts-" = Tschau-Sepp. Klare Trennung von Frameworks.
   ============================================================ */

/* CSS-Variablen für konsistentes Spacing & Radien */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --gold-soft: rgba(212, 165, 74, 0.18);
    --gold-mid:  rgba(212, 165, 74, 0.35);
    --line:      rgba(212, 165, 74, 0.14);
}

/* Reset-Basis */
.ts-shell, .ts-shell *, .ts-shell *::before, .ts-shell *::after {
    box-sizing: border-box;
}

/* Page-Wrapper (ersetzt .container-fluid) */
.ts-shell {
    width: 100%;
    padding: 16px var(--space-4) 64px;
    margin: 0 auto;
    max-width: 100%;
}

/* ──── Panel (ersetzt .card) ──── */
.ts-panel {
    background: linear-gradient(180deg,
        rgba(58, 32, 18, 0.92) 0%,
        rgba(38, 20, 12, 0.95) 100%);
    border: 1px solid var(--gold-mid);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    color: var(--text, #f0e6d8);
    backdrop-filter: blur(2px);
}

/* Lobby-Wrapper: zentriertes Panel + optional weitere Elemente vertikal darunter */
.ts-lobby-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}
.ts-lobby-wrap .ts-panel {
    width: 100%;
    max-width: 420px;
}

/* ──── Form-Elemente ──── */
.ts-form-row {
    margin-bottom: var(--space-5);
}
.ts-form-row:last-child {
    margin-bottom: 0;
}

.ts-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(240, 230, 216, 0.7);
    margin-bottom: var(--space-2);
    letter-spacing: 0.02em;
}
.ts-form-label i {
    margin-right: 6px;
    opacity: 0.6;
    font-size: 12px;
}

.ts-input {
    width: 100%;
    padding: 11px 14px;
    background: rgba(11, 6, 3, 0.55);
    border: 1px solid rgba(212, 165, 74, 0.22);
    border-radius: var(--radius-md);
    color: #f0e6d8;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.ts-input::placeholder {
    color: rgba(240, 230, 216, 0.32);
}
.ts-input:focus {
    border-color: var(--gold, #d4a54a);
    background: rgba(11, 6, 3, 0.7);
    box-shadow: 0 0 0 3px rgba(212, 165, 74, 0.12);
}

/* Input mit angehängtem Button (Raum-Code + Beitreten) */
.ts-input-group {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}
.ts-input-group .ts-input {
    flex: 1;
    min-width: 0;
}

/* ──── Buttons ──── */
.ts-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 11px 18px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: #f0e6d8;
    background: transparent;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease,
                transform 0.1s ease, box-shadow 0.16s ease;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}
.ts-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.ts-btn:active {
    transform: translateY(1px);
}
.ts-btn i {
    font-size: 14px;
}

/* Primary - die EINE Hauptaktion */
.ts-btn-primary {
    background: linear-gradient(135deg, #e3b75a 0%, #c49340 100%);
    color: #1a0e08;
    box-shadow: 0 4px 14px rgba(212, 165, 74, 0.3);
    font-weight: 700;
}
.ts-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #ecc56e 0%, #d4a54a 100%);
    box-shadow: 0 6px 20px rgba(212, 165, 74, 0.42);
}

/* Ghost - alle Sekundär-Aktionen */
.ts-btn-ghost {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(212, 165, 74, 0.32);
    color: #e8d8b8;
}
.ts-btn-ghost:hover:not(:disabled) {
    background: rgba(212, 165, 74, 0.1);
    border-color: var(--gold, #d4a54a);
    color: #f5ead0;
}

/* Größen-Modifier */
.ts-btn-large {
    padding: 14px 22px;
    font-size: 16px;
    border-radius: var(--radius-lg);
}

/* Block (full width) */
.ts-btn-block {
    width: 100%;
}

/* Stack (vertikale Button-Liste mit Gap) */
.ts-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.ts-stack-tight { gap: var(--space-2); }

/* ──── Segmented Control (Bots-Anzahl + Schwierigkeit) ──── */
.ts-segmented {
    display: flex;
    background: rgba(11, 6, 3, 0.5);
    border: 1px solid rgba(212, 165, 74, 0.18);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 0;
}
.ts-segmented-btn {
    flex: 1;
    appearance: none;
    border: none;
    background: transparent;
    color: rgba(240, 230, 216, 0.6);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    padding: 7px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ts-segmented-btn:hover {
    color: #f0e6d8;
}
.ts-segmented-btn.active {
    background: rgba(212, 165, 74, 0.85);
    color: #1a0e08;
}

/* Inline-Optionen-Reihe (Label : Segmented-Control) */
.ts-option-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}
.ts-option-row-label {
    color: rgba(240, 230, 216, 0.6);
    font-size: 13px;
    font-weight: 600;
    min-width: 50px;
}
.ts-option-row .ts-segmented {
    flex: 1;
}

/* ──── Hinweis-Boxen (alert-Ersatz) ──── */
.ts-notice {
    background: rgba(212, 165, 74, 0.08);
    border: 1px solid rgba(212, 165, 74, 0.25);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
    color: #f0e6d8;
}
.ts-notice-title {
    font-size: 13px;
    color: rgba(240, 230, 216, 0.65);
    margin: 0 0 var(--space-2);
    font-weight: 500;
}
.ts-notice-code {
    display: inline-block;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 28px;
    font-weight: 700;
    color: var(--gold, #d4a54a);
    letter-spacing: 0.15em;
    background: rgba(0, 0, 0, 0.25);
    padding: 6px 16px;
    border-radius: var(--radius-sm);
}

/* ──── Spieler-Liste im Warteraum ──── */
.ts-player-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ts-player-list li {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 165, 74, 0.15);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: #f0e6d8;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ──── Util-Klassen (Bootstrap-Ersatz) ──── */
.ts-center      { text-align: center; }
.ts-muted       { color: rgba(240, 230, 216, 0.55); }
.ts-mb-2        { margin-bottom: var(--space-2); }
.ts-mb-3        { margin-bottom: var(--space-3); }
.ts-mb-4        { margin-bottom: var(--space-4); }
.ts-mb-5        { margin-bottom: var(--space-5); }
.ts-mt-3        { margin-top: var(--space-3); }
.ts-mt-4        { margin-top: var(--space-4); }
.ts-hidden      { display: none !important; }
.d-none         { display: none !important; }  /* Bootstrap-kompatibel - wird im JS verwendet */

/* ──── Eigenes Modal (Bootstrap-Modal-Ersatz für Spielregeln) ──── */
.ts-modal {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 9500;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.ts-modal.is-open { display: flex; }
.ts-modal-box {
    background: #1a0e08;
    border: 1px solid var(--gold-mid);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    color: #f0e6d8;
    box-shadow: var(--shadow-lg);
}
.ts-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
}
.ts-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--gold, #d4a54a);
}
.ts-modal-close {
    background: transparent;
    border: none;
    color: rgba(240, 230, 216, 0.5);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.ts-modal-close:hover { color: #f0e6d8; }
.ts-modal-body { padding: var(--space-5); }
.ts-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--line);
}

/* Bei kleinem Viewport Lobby-Panel ohne starres max-width */
@media (max-width: 480px) {
    .ts-shell { padding: 12px var(--space-3) 56px; }
    .ts-panel { padding: var(--space-5) var(--space-4); }
    .ts-lobby-wrap .ts-panel { max-width: 100%; }
}

/* ──── Fallback-Styles für die paar verbleibenden alert-Klassen
   (genutzt von error-recovery.js für persistente Connection-Banner) ──── */
.alert {
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    border: 1px solid transparent;
}
.alert-warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fcd34d;
}
.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}
.alert-info {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

/* Bootstrap-Position-Util-Ersatz (für die zwei verbleibenden Connection-Banner) */
.position-fixed             { position: fixed !important; }
.top-0                      { top: 0 !important; }
.bottom-0                   { bottom: 0 !important; }
.start-50                   { left: 50% !important; }
.translate-middle-x         { transform: translateX(-50%) !important; }
.mt-3                       { margin-top: var(--space-3) !important; }
.mb-3                       { margin-bottom: var(--space-3) !important; }

/* ──── Legacy-Status-Card (Game-Status, JS-gesteuert) ──── */
.legacy-status-card {
    margin-top: var(--space-4);
    background: rgba(26, 14, 8, 0.6);
    border: 1px solid rgba(212, 165, 74, 0.18);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.legacy-status-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(212, 165, 74, 0.15);
}
.legacy-status-body {
    padding: 12px 16px;
    color: rgba(240, 230, 216, 0.85);
    font-size: 13px;
}
.legacy-badge {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(212, 165, 74, 0.15);
    color: var(--gold, #d4a54a);
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
}

/* Restliche Bootstrap-Util-Reste die in JS auftauchen können */
.me-2 { margin-right: 8px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: 8px !important; }
.mt-4 { margin-top: 16px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.text-center { text-align: center !important; }
.text-muted  { color: rgba(240, 230, 216, 0.55) !important; }
.w-100 { width: 100% !important; }
.d-flex { display: flex !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center  { justify-content: center !important; }
.align-items-center      { align-items: center !important; }

/* ──── Pills (Badge-Ersatz für Spieler-Liste etc.) ──── */
.ts-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(240, 230, 216, 0.7);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    line-height: 1;
}
.ts-pill i { font-size: 10px; }
.ts-pill-gold {
    background: rgba(212, 165, 74, 0.18);
    color: var(--gold, #d4a54a);
}

/* ============================================================
   SEO-Erweiterungen: Screen-Reader-Only + Trust-Features-Liste
   ============================================================ */

/* Visually-hidden fuer Suchmaschinen + Screenreader, optisch unsichtbar */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Trust-Snippet-Liste unter dem Lobby-Panel.
   Liegt im ts-lobby-wrap (flex column), sitzt zentriert direkt unter dem Panel. */
.ts-features {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    width: 100%;
    max-width: 420px;
    display: grid;
    gap: 6px;
    color: rgba(240, 230, 216, 0.55);
    font-size: 12.5px;
    line-height: 1.4;
}
.ts-features li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 3px 4px;
}
.ts-features li i {
    color: var(--gold, #d4a54a);
    font-size: 10px;
    width: 12px;
    flex-shrink: 0;
    opacity: 0.7;
}

@media (max-width: 480px) {
    .ts-features { font-size: 12px; }
}

/* Lobby-Footer mit zwei Links: Modal-Schnell-Uebersicht + /regeln-Page */
.ts-lobby-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ts-footer-link {
    color: var(--gold, #d4a54a);
    background: transparent;
    font-weight: 500;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 4px;
    padding: 6px 4px;
}
.ts-footer-link:hover {
    color: #f5ead0;
    background: transparent;
}
.ts-footer-sep {
    color: rgba(212, 165, 74, 0.4);
    font-size: 14px;
    user-select: none;
}

/* ============================================================
   ARTICLE PAGES (Standalone-Content-Pages: /regeln, /strategie,
   /jassen-lernen, /blog/...). Kein invasiver Body-Override hier;
   die Pages setzen den Body-Background lokal in <style>, weil
   sie sonst die Game-Lobby-Styles erben wuerden.
   ============================================================ */
.article-shell {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) 64px;
}
.article-header {
    text-align: center;
    margin-bottom: var(--space-6);
    padding-top: var(--space-5);
}
.article-breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(240, 230, 216, 0.45);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.article-breadcrumb a {
    color: var(--gold, #d4a54a);
    text-decoration: none;
}
.article-breadcrumb a:hover { text-decoration: underline; }
.article-breadcrumb .sep { opacity: 0.5; }

.article-title {
    font-family: 'Georgia', 'Cambria', 'Iowan Old Style', serif;
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 700;
    color: var(--gold, #d4a54a);
    margin: 0 0 12px;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.article-subtitle {
    color: rgba(240, 230, 216, 0.65);
    font-size: 16px;
    margin: 0 auto;
    max-width: 560px;
}
.article-divider {
    width: 64px;
    height: 2px;
    margin: 18px auto;
    background: linear-gradient(90deg, transparent, var(--gold, #d4a54a), transparent);
    border-radius: 2px;
}

.article-content {
    background: rgba(58, 32, 18, 0.55);
    border: 1px solid rgba(212, 165, 74, 0.25);
    border-radius: 18px;
    padding: var(--space-6);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.article-content h2 {
    font-size: 22px;
    color: var(--gold, #d4a54a);
    margin: var(--space-6) 0 var(--space-3);
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(212, 165, 74, 0.18);
}
.article-content h2:first-child { margin-top: 0; }
.article-content h3 {
    font-size: 17px;
    color: #f0e6d8;
    margin: var(--space-4) 0 var(--space-2);
}
.article-content p {
    color: rgba(240, 230, 216, 0.85);
    margin: 0 0 var(--space-3);
}
.article-content ul, .article-content ol {
    color: rgba(240, 230, 216, 0.85);
    margin: 0 0 var(--space-4);
    padding-left: 22px;
    line-height: 1.7;
}
.article-content li { margin-bottom: 6px; }
.article-content strong { color: var(--gold, #d4a54a); font-weight: 600; }
/* Inline-Links nur in Text-Elementen unterstrichen, nicht auf Cards/CTAs/Buttons */
.article-content p a,
.article-content li a {
    color: var(--gold, #d4a54a);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.special-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0;
}
.special-card {
    background: rgba(11, 6, 3, 0.45);
    border: 1px solid rgba(212, 165, 74, 0.22);
    border-radius: 12px;
    padding: var(--space-4);
}
.special-card-name {
    font-weight: 700;
    color: var(--gold, #d4a54a);
    font-size: 15px;
    margin-bottom: 4px;
}
.special-card-desc {
    color: rgba(240, 230, 216, 0.78);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
}

.faq-item {
    background: rgba(11, 6, 3, 0.35);
    border: 1px solid rgba(212, 165, 74, 0.15);
    border-radius: 10px;
    margin-bottom: var(--space-2);
    overflow: hidden;
}
.faq-q {
    margin: 0;
    padding: 14px var(--space-4);
    color: var(--gold, #d4a54a);
    font-weight: 600;
    font-size: 15px;
    cursor: default;
}
.faq-a {
    margin: 0;
    padding: 0 var(--space-4) 14px;
    color: rgba(240, 230, 216, 0.8);
    font-size: 14px;
    line-height: 1.6;
}

.article-cta {
    display: block;
    text-align: center;
    margin: var(--space-6) auto 0;
    padding: 16px var(--space-5);
    background: linear-gradient(135deg, #e3b75a 0%, #c49340 100%);
    color: #1a0e08;
    font-weight: 700;
    font-size: 17px;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(212, 165, 74, 0.35);
    max-width: 360px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.article-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(212, 165, 74, 0.5);
    color: #1a0e08;
}

.article-footer {
    margin-top: var(--space-6);
    text-align: center;
    color: rgba(240, 230, 216, 0.4);
    font-size: 12px;
}
.article-footer a {
    color: rgba(240, 230, 216, 0.7);
    text-decoration: none;
}
.article-footer a:hover { color: var(--gold, #d4a54a); }

/* "Mehr erfahren"-Block (interne Querverlinkung am Ende jeder Article-Page) */
.article-more {
    margin: var(--space-6) auto 0;
    padding: var(--space-4) var(--space-5);
    background: rgba(11, 6, 3, 0.35);
    border: 1px solid rgba(212, 165, 74, 0.15);
    border-radius: 12px;
    max-width: 560px;
    text-align: center;
}
.article-more-label {
    color: rgba(240, 230, 216, 0.55);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.article-more-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    font-size: 14px;
}
.article-more-links a {
    color: var(--gold, #d4a54a);
    text-decoration: none;
}
.article-more-links a:hover { text-decoration: underline; }

/* Blog-Index: Karten-Liste */
.blog-list {
    display: grid;
    gap: var(--space-3);
}
.blog-card {
    display: block;
    padding: var(--space-4);
    background: rgba(11, 6, 3, 0.4);
    border: 1px solid rgba(212, 165, 74, 0.18);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.blog-card:hover {
    border-color: rgba(212, 165, 74, 0.4);
    transform: translateY(-2px);
}
/* Reset fuer h2/p innerhalb blog-card: ueberschreibt .article-content h2-Regel
   (die hat border-bottom + padding-bottom, was wie eine Underline aussieht). */
.blog-card h2,
.blog-card p {
    margin: 0;
    padding: 0;
    border: none;
}
.blog-card-title {
    color: var(--gold, #d4a54a);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
}
.blog-card-excerpt {
    color: rgba(240, 230, 216, 0.7);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 600px) {
    .article-shell { padding: var(--space-3) var(--space-3) 48px; }
    .article-content { padding: var(--space-4); }
    .article-more { padding: var(--space-4); }
}

/* Ass-Cover-Hinweis (nur sichtbar wenn ace_needs_cover & my_turn) */
.ace-cover-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px auto 0;
    padding: 8px 14px;
    background: rgba(212, 165, 74, 0.12);
    border: 1px solid rgba(212, 165, 74, 0.45);
    border-radius: 10px;
    color: var(--gold, #d4a54a);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    max-width: 480px;
    animation: ace-cover-pulse 2.4s ease-in-out infinite;
}
.ace-cover-hint i { font-size: 14px; opacity: 0.9; }
@keyframes ace-cover-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(212, 165, 74, 0); }
    50%      { box-shadow: 0 0 12px rgba(212, 165, 74, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
    .ace-cover-hint { animation: none; }
}

/* Invalid-Move-Hinweis: erscheint kurz wenn Spieler eine nicht-spielbare
   Karte anklickt. Auto-Hide nach 2.5s. Stilistik mirror'd .ace-cover-hint
   aber in Warn-Rot mit kurzem Shake statt Pulse. */
.invalid-move-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px auto 0;
    padding: 8px 14px;
    background: rgba(230, 57, 70, 0.12);
    border: 1px solid rgba(230, 57, 70, 0.55);
    border-radius: 10px;
    color: #e63946;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    max-width: 480px;
    animation: invalid-shake 0.45s ease-out;
}
.invalid-move-hint i { font-size: 14px; opacity: 0.9; }
@keyframes invalid-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .invalid-move-hint { animation: none; }
}