/* =====================================================================
   games.css — Konsolidierte Game-Frame-Styles für Voozalis Spielekeller
   Sauber, responsiv, mit einheitlichem Gold-Theme
   ===================================================================== */

/* ---------------------------------------------------------------------
   GAME-FRAME (Gemeinsamer Wrapper für alle Spiele)
   --------------------------------------------------------------------- */
.game-frame {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-5);
}

.game-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: -8px;
    margin-bottom: var(--sp-3);
}

/* ---------------------------------------------------------------------
   GEMEINSAME BUTTONS (in Spielen)
   --------------------------------------------------------------------- */
.btn-primary {
    background: var(--accent);
    color: #0a0c10;
    border: none;
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-5);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background 0.15s, transform 0.1s;
}

.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-warn {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-5);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.15s;
}

.btn-warn:hover { border-color: var(--accent); color: var(--accent); }

/* Balance-Anzeige in Spielen */
[class$="-balance"] {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--sp-2);
}

[class$="-balance"] span {
    color: var(--accent);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 16px;
}

/* Banner für Status-Meldungen */
[class$="-banner"] {
    text-align: center;
    padding: var(--sp-3);
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 14px;
    min-height: 1.5em;
    background: rgba(0, 0, 0, 0.2);
    border: 1px dashed var(--border);
    color: var(--text-muted);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

[class$="-banner"].win {
    background: var(--success-dim);
    border-color: var(--success);
    color: var(--success);
}

[class$="-banner"].lose {
    background: var(--danger-dim);
    border-color: var(--danger);
    color: #fca5a5;
}

/* ---------------------------------------------------------------------
   COINFLIP — Münzwurf
   --------------------------------------------------------------------- */
.coinflip-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.coinflip-choice { display: flex; gap: var(--sp-3); }

.coin-btn {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-main);
    min-width: 100px;
}

.coin-btn:hover  { transform: translateY(-2px); border-color: var(--accent); }
.coin-btn.active { border-color: var(--accent); background: var(--accent-dim); }

.coin-emoji { font-size: 40px; }
.coin-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

.coin-display {
    width: 140px;
    height: 140px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.3, 1);
}

.coin-display.spinning { animation: coinSpin 0.4s linear infinite; }

@keyframes coinSpin {
    0%   { transform: rotateY(0); }
    100% { transform: rotateY(720deg); }
}

.coin-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    backface-visibility: hidden;
    background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
    border: 3px solid var(--border);
}

.coin-back { transform: rotateY(180deg); }

/* ---------------------------------------------------------------------
   DICE — Würfel-Duell
   --------------------------------------------------------------------- */
.dice-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.dice-modes {
    display: flex;
    gap: var(--sp-2);
    background: rgba(0, 0, 0, 0.2);
    padding: var(--sp-1);
    border-radius: var(--r-md);
}

.mode-btn {
    flex: 1;
    padding: var(--sp-2) var(--sp-3);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--r-sm);
    font-weight: 600;
    font-family: var(--font-sans);
    font-size: 13px;
    transition: all 0.15s;
}

.mode-btn.active {
    background: var(--accent);
    color: #0a0c10;
}

.dice-stage { width: 100%; }
.dice-roll-display { text-align: center; margin-bottom: var(--sp-4); }

.dice-number {
    font-size: 80px;
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.dice-number.rolling {
    animation: diceShake 0.2s infinite;
    color: var(--text-muted);
}

@keyframes diceShake {
    0%, 100% { transform: rotate(-5deg) scale(1); }
    50%      { transform: rotate(5deg) scale(1.1); }
}

.dice-label {
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: var(--sp-2);
}

#dice-roll-bar {
    position: relative;
    height: 16px;
    background: linear-gradient(90deg, var(--success) 0%, var(--success) 50%, var(--danger) 50%, var(--danger) 100%);
    border-radius: 8px;
    overflow: hidden;
    margin-top: var(--sp-3);
}

/* ---------------------------------------------------------------------
   PLINKO
   --------------------------------------------------------------------- */
.plinko-game-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 800px;
    gap: var(--sp-5);
    margin: 0 auto;
}

.plinko-canvas-wrap {
    background: var(--bg-card);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    padding: var(--sp-4);
    width: 100%;
}

.plinko-canvas-wrap canvas { display: block; margin: 0 auto; max-width: 100%; }

/* ---------------------------------------------------------------------
   SLOTS
   --------------------------------------------------------------------- */
.slots-wrapper { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); width: 100%; max-width: 600px; margin: 0 auto; }
.slots-machine { display: flex; gap: var(--sp-3); justify-content: center; padding: var(--sp-5); background: var(--bg-card); border-radius: var(--r-lg); border: 1px solid var(--border); }
.slots-reel    { width: 80px; height: 200px; overflow: hidden; background: var(--bg-input); border-radius: var(--r-md); position: relative; }
.slots-strip   { display: flex; flex-direction: column; transition: transform 0.5s; }
.slots-strip > div { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 60px; }

/* ---------------------------------------------------------------------
   BLACKJACK
   --------------------------------------------------------------------- */
.blackjack-wrapper { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); width: 100%; max-width: 800px; margin: 0 auto; }
.bj-stage        { width: 100%; display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-5); }
.bj-hand-zone    { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.bj-hand-label   { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
.bj-hand         { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.bj-hand-value   { color: var(--accent); font-weight: 700; font-family: var(--font-mono); }
.bj-controls     { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.bj-card         { width: 60px; height: 90px; border-radius: var(--r-sm); background: var(--bg-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; }
.bj-card.red     { color: var(--danger); }
.bj-card-back    { background: repeating-linear-gradient(45deg, var(--bg-input), var(--bg-input) 4px, var(--bg-card) 4px, var(--bg-card) 8px); }

/* ---------------------------------------------------------------------
   MINES
   --------------------------------------------------------------------- */
.mines-wrapper { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); width: 100%; max-width: 700px; margin: 0 auto; }
.mines-stage    { width: 100%; padding: var(--sp-5); }
.mines-grid     { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); max-width: 500px; margin: 0 auto; }
.mines-cell     { aspect-ratio: 1; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 32px; cursor: pointer; transition: background 0.15s; }
.mines-cell:hover        { background: var(--accent-dim); }
.mines-cell.revealed     { background: var(--success-dim); border-color: var(--success); cursor: default; }
.mines-cell.safe-revealed{ background: var(--success-dim); }
.mines-cell.mine-hit     { background: var(--danger-dim); border-color: var(--danger); }
.multiplier-display      { text-align: center; font-size: 24px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); padding: var(--sp-3); }

/* ---------------------------------------------------------------------
   ROULETTE
   --------------------------------------------------------------------- */
.rou-balance  { text-align: center; color: var(--text-muted); font-size: 12px; }
.rou-balance span { color: var(--accent); font-weight: 700; font-family: var(--font-mono); font-size: 16px; }
.rou-stage    { display: flex; flex-direction: column; gap: var(--sp-5); align-items: center; }
.rou-board    { display: flex; flex-direction: column; gap: 4px; max-width: 700px; margin: 0 auto; }
.rou-row      { display: flex; gap: 4px; }
.rou-cell     { padding: var(--sp-2) var(--sp-3); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; text-align: center; font-weight: 600; font-size: 13px; min-width: 50px; transition: background 0.15s; user-select: none; }
.rou-cell:hover { background: var(--accent-dim); }
.rou-cell.rou-zero { background: var(--success); color: white; }
.rou-cell.rou-num  { color: white; width: 50px; }
.rou-cell.rou-dozen, .rou-cell.rou-col, .rou-cell.rou-out { flex: 1; }
.rou-controls { display: flex; gap: var(--sp-3); justify-content: center; }
.rou-banner   { min-height: 1.5em; text-align: center; font-weight: 600; color: var(--text-muted); padding: var(--sp-3); }
.rou-banner.win  { color: var(--success); }
.rou-banner.lose { color: var(--danger); }
.rou-bets     { text-align: center; color: var(--text-muted); font-size: 13px; }
.rou-bets span { color: var(--accent); font-weight: 700; }
.rou-table    { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); background: var(--bg-card); border-radius: var(--r-md); }
.rou-wheel    { width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, var(--bg-elevated), var(--bg-input)); border: 4px solid var(--accent); margin: 0 auto; position: relative; }
.rou-ball     { width: 12px; height: 12px; background: white; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.rou-canvas   { width: 320px; height: 320px; max-width: 100%; border-radius: 50%; box-shadow: 0 0 24px rgba(220,38,38,.4), inset 0 0 18px rgba(0,0,0,.6); margin: 0 auto; display: block; }

/* ---------------------------------------------------------------------
   CRASH / LIMBO / STURZPILOT (Multiplier-Spiele)
   --------------------------------------------------------------------- */
.crash-stage, .limbo-stage, .sturz-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-5);
    background: var(--bg-card);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    min-height: 300px;
}

.crash-mult, .limbo-mult, .sturz-mult {
    font-size: 72px;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--font-mono);
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
    transition: color 0.3s;
}

.crash-mult.crashed, .limbo-mult.crashed { color: var(--danger); text-shadow: 0 0 30px rgba(239, 68, 68, 0.3); }

.crash-controls, .limbo-controls, .sturz-controls { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.crash-buttons, .limbo-buttons             { display: flex; gap: var(--sp-3); }
.sturz-players { color: var(--text-muted); font-size: 13px; text-align: center; }
.sturz-players span { color: var(--accent); font-weight: 700; }

/* ---------------------------------------------------------------------
   HILO
   --------------------------------------------------------------------- */
.hilo-board    { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); padding: var(--sp-5); background: var(--bg-card); border-radius: var(--r-lg); border: 1px solid var(--border); }
.hilo-slot     { display: flex; gap: var(--sp-3); align-items: center; }
.hilo-card, .hilo-card-placeholder {
    width: 80px;
    height: 120px;
    border-radius: var(--r-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
}
.hilo-card.red { color: var(--danger); }
.hilo-card .hilo-rank { font-size: 28px; line-height: 1; }
.hilo-card .hilo-suit { font-size: 36px; }
.hilo-streak   { color: var(--accent); font-weight: 700; font-family: var(--font-mono); font-size: 18px; text-align: center; }

/* ---------------------------------------------------------------------
   WHEEL OF FORTUNE
   --------------------------------------------------------------------- */
.wheel-stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); padding: var(--sp-5); background: var(--bg-card); border-radius: var(--r-lg); border: 1px solid var(--border); }
.wheel-canvas { width: 300px; height: 300px; }
.wheel-controls { display: flex; gap: var(--sp-3); justify-content: center; }
.wheel-banner  { text-align: center; font-weight: 700; font-size: 24px; color: var(--accent); min-height: 1.5em; }

/* ---------------------------------------------------------------------
   KENO
   --------------------------------------------------------------------- */
.keno-grid   { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--sp-2); max-width: 600px; margin: 0 auto; padding: var(--sp-2); }
.keno-cell   { aspect-ratio: 1; min-width: 40px; min-height: 40px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.keno-cell:hover       { background: var(--accent-dim); }
.keno-cell.picked,
.keno-cell.selected   { background: var(--accent); color: #0a0c10; border-color: var(--accent); }
.keno-cell.drawn,
.keno-cell.drawn-miss { background: var(--bg-elevated); border-color: var(--border); opacity: 0.5; }
.keno-cell.drawn-hit  { background: var(--success-dim); border-color: var(--success); color: var(--success); }
.keno-cell.hit        { background: var(--accent); color: #0a0c10; border-color: var(--accent); animation: kenoHit 0.3s; }
@keyframes kenoHit { 50% { transform: scale(1.2); } }
.keno-meta   { text-align: center; color: var(--text-muted); font-size: 13px; }
.keno-meta span { color: var(--accent); font-weight: 700; }

/* ---------------------------------------------------------------------
   BACCARAT
   --------------------------------------------------------------------- */
.bac-table   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.bac-side    { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-4); background: var(--bg-elevated); border-radius: var(--r-md); }
.bac-hand    { display: flex; gap: var(--sp-2); }
.bac-card    { width: 50px; height: 75px; border-radius: var(--r-sm); background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; }
.bac-card.red { color: var(--danger); }
.bac-total-badge { background: var(--accent); color: #0a0c10; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); font-weight: 700; font-family: var(--font-mono); }
.bac-total   { color: var(--text-muted); font-size: 13px; }

/* ---------------------------------------------------------------------
   GLÜCKSKEKS
   --------------------------------------------------------------------- */
.gk-stage    { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); padding: var(--sp-5); background: var(--bg-card); border-radius: var(--r-lg); border: 1px solid var(--border); min-height: 300px; }
.gk-cookie   { font-size: 120px; cursor: pointer; transition: transform 0.3s; user-select: none; }
.gk-cookie:hover  { transform: scale(1.05) rotate(-5deg); }
.gk-cookie.cracked { transform: scale(1.3) rotate(180deg); opacity: 0.3; }
.gk-predigten { background: rgba(212, 175, 55, 0.1); border: 1px solid var(--accent-border); border-radius: var(--r-md); padding: var(--sp-4); font-style: italic; text-align: center; color: var(--text-main); }

/* ---------------------------------------------------------------------
   WETTEN DASS
   --------------------------------------------------------------------- */
.wd-stage    { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); background: var(--bg-card); border-radius: var(--r-lg); border: 1px solid var(--border); }
.wd-bet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.wd-bet-option { padding: var(--sp-3); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; text-align: center; transition: all 0.15s; }
.wd-bet-option:hover  { background: var(--accent-dim); border-color: var(--accent); }
.wd-bet-option.active { background: var(--accent-dim); border-color: var(--accent); }
.wd-bet-option.win    { background: var(--success-dim); border-color: var(--success); }

/* ---------------------------------------------------------------------
   VIDEOPOKER
   --------------------------------------------------------------------- */
.vp-stage    { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); background: var(--bg-card); border-radius: var(--r-lg); border: 1px solid var(--border); }
.vp-hand     { display: flex; gap: var(--sp-2); justify-content: center; }
.vp-card     { width: 70px; height: 100px; border-radius: var(--r-sm); background: var(--bg-elevated); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.vp-card:hover        { transform: translateY(-4px); }
.vp-card.held         { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-border); }
.vp-card.red          { color: var(--danger); }
.vp-controls          { display: flex; gap: var(--sp-3); justify-content: center; }

/* ---------------------------------------------------------------------
   BIERPONG
   --------------------------------------------------------------------- */
.bp-stage    { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); padding: var(--sp-5); background: var(--bg-card); border-radius: var(--r-lg); border: 1px solid var(--border); }
.bp-board    { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
.bp-cup-row  { display: flex; gap: var(--sp-3); }
.bp-cup      { width: 40px; height: 50px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 0 0 var(--r-md) var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 20px; transition: all 0.15s; }
.bp-cup.alive { background: var(--success-dim); border-color: var(--success); }
.bp-cup.empty { background: var(--danger-dim); border-color: var(--danger); opacity: 0.4; }
.bp-controls { display: flex; gap: var(--sp-3); justify-content: center; }

/* ---------------------------------------------------------------------
   FLASCHENWERFEN
   --------------------------------------------------------------------- */
.flas-stage    { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); padding: var(--sp-5); background: var(--bg-card); border-radius: var(--r-lg); border: 1px solid var(--border); }
.flas-bottle-row { display: flex; gap: var(--sp-4); align-items: flex-end; height: 200px; }
.flas-bottle   { width: 50px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; transition: transform 0.3s; }
.flas-bottle.fallen { transform: rotate(75deg) translateY(20px); opacity: 0.5; }
.flas-bottle-neck { width: 16px; height: 40px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px 4px 0 0; }
.flas-bottle-body { width: 50px; height: 100px; background: linear-gradient(180deg, var(--success), #059669); border-radius: var(--r-sm); border: 1px solid var(--border); }
.flas-controls { display: flex; gap: var(--sp-3); justify-content: center; }

/* ---------------------------------------------------------------------
   SAUFKARTEN (wurde entfernt aus Frontend — Styles als Backup)
   --------------------------------------------------------------------- */
.sk-stage    { display: none; }
.sk-info, .sk-deck, .sk-controls { display: none; }
.sk-card     { display: none; }

/* ---------------------------------------------------------------------
   GAME-CONTAINER (in dem die Spiele gerendert werden)
   --------------------------------------------------------------------- */
.spiel-container {
    width: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
}

/* Game-Select im Plinko */
.plinko-risk-selector { display: flex; gap: var(--sp-2); align-items: center; }

/* ---------------------------------------------------------------------
   GENERISCHE GAME-WRAPPER (statt einzelne .game-wrapper Klassen)
   --------------------------------------------------------------------- */
.game-wrapper { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); width: 100%; max-width: 900px; margin: 0 auto; }

/* Standardmäßige Keller-Card in Spielen */
.keller-card[class$="-controls"],
.keller-card[class$="-stage"] { width: 100%; }

/* Controls-Wrapper in Spielen */
[class$="-controls"] { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
[class$="-stage"]    { width: 100%; }

/* Spezielle Klassen, die noch fehlen */
.dealer-zone, .player-zone { padding: var(--sp-3); border-radius: var(--r-md); }
.dealer-zone { background: rgba(239, 68, 68, 0.05); }
.player-zone { background: rgba(16, 185, 129, 0.05); }
.bj-actions  { display: flex; gap: var(--sp-2); justify-content: center; }
.result-banner { text-align: center; font-weight: 700; padding: var(--sp-3); }
.card-back   { background: repeating-linear-gradient(45deg, var(--bg-input), var(--bg-input) 4px, var(--bg-card) 4px, var(--bg-card) 8px); }
.coin-heads, .coin-tails { min-width: 100px; }
.coinflip-stage, .dice-stage, .mines-stage, .slots-stage, .bj-stage { width: 100%; }
.coin-front { backface-visibility: hidden; }
.crash-stage, .limbo-stage, .sturz-stage { min-height: 280px; }
.crash-players { color: var(--text-muted); text-align: center; font-size: 12px; margin-top: var(--sp-2); }
.crash-players span { color: var(--accent); font-weight: 700; }
.dice-controls, .mines-controls, .slots-controls, .coinflip-controls { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; align-items: center; padding: var(--sp-4); }
.dice-mode-group, .dice-target-group { gap: var(--sp-2); }
.multiplier-readout { text-align: center; font-size: 20px; color: var(--accent); font-weight: 700; font-family: var(--font-mono); padding: var(--sp-2); }
.dice-target-marker, .dice-result-marker { position: absolute; }
.win-zone { background: var(--success-dim); }
.flas-score { color: var(--accent); font-weight: 700; text-align: center; }
.hilo-buttons { display: flex; gap: var(--sp-3); justify-content: center; }
.hilo-controls { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.cell-content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.plinko-controls { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; padding: var(--sp-3); }
.rou-remove { background: var(--danger-dim); color: #fca5a5; }
.slots-paytable { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); background: var(--bg-input); border-radius: var(--r-sm); }
.vp-card-placeholder { width: 70px; height: 100px; border-radius: var(--r-sm); background: var(--bg-elevated); border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.vp-rank, .vp-suit { line-height: 1; }
.vp-board, .vp-slot { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
.vp-paytable { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); padding: var(--sp-3); background: var(--bg-input); border-radius: var(--r-sm); font-size: 12px; }
.wd-banner, .wd-balance { color: var(--text-muted); }
.wd-challenge-card { padding: var(--sp-4); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); text-align: center; }
.wd-challenge-text { font-size: 14px; color: var(--text-main); }
.wd-challenge-text-main { font-weight: 700; font-size: 16px; color: var(--accent); margin-top: var(--sp-2); }
.wd-pool { color: var(--accent); font-weight: 700; text-align: center; font-size: 18px; padding: var(--sp-3); }
.wd-controls { display: flex; gap: var(--sp-3); justify-content: center; }
.wd-vote { display: flex; gap: var(--sp-3); justify-content: center; }
.wheel-pointer { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 20px solid var(--accent); margin: 0 auto; }
.wheel-wheel { width: 280px; height: 280px; margin: 0 auto; position: relative; border-radius: 50%; overflow: hidden; box-shadow: 0 0 24px rgba(251,191,36,.4), inset 0 0 18px rgba(0,0,0,.6); transition: transform 4s cubic-bezier(0.17, 0.67, 0.21, 1); }
.wheel-label { position: absolute; top: 50%; left: 50%; transform-origin: 0 0; font-weight: 800; font-size: 14px; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,.8); pointer-events: none; white-space: nowrap; }
.wheel-balance { color: var(--text-muted); text-align: center; }
.bac-controls, .bac-targets { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.bp-controls { display: flex; gap: var(--sp-3); justify-content: center; }
.gk-controls { display: flex; gap: var(--sp-3); justify-content: center; }
.flas-controls { display: flex; gap: var(--sp-3); justify-content: center; }
.sturz-controls { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.crash-controls, .limbo-controls { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.keno-controls { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* Spezielle Mini-Korrekturen für die Game-Container */
.balance-box {
    padding: var(--sp-3) var(--sp-4);
    margin: var(--sp-3) 0;
    background: var(--bg-elevated);
    border: 1px solid var(--accent);
    text-align: center;
}

.balance-box small {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.balance-box .currency-amount {
    color: var(--accent);
    font-weight: 700;
    font-size: 20px;
    font-family: var(--font-mono);
}

[class$="-balance"] {
    padding: var(--sp-2);
    color: var(--text-muted);
    text-align: center;
    font-size: 13px;
}

[class$="-balance"] span {
    color: var(--accent);
    font-weight: 700;
    font-family: var(--font-mono);
}

[class$="-banner"] {
    margin: var(--sp-2) 0;
    padding: var(--sp-3);
    min-height: 32px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--text-main);
    border-radius: var(--r-sm);
}

[class$="-banner"].win,
[class$="-banner"].won {
    color: var(--success);
    background: var(--success-dim);
}

[class$="-banner"].lose,
[class$="-banner"].lost {
    color: var(--danger);
    background: var(--danger-dim);
}

[class$="-controls"] {
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    padding: var(--sp-3);
}

/* ---------------------------------------------------------------------
   FEHLENDE GAME-SPEZIFISCHE STYLES (Flo-Redesign v3.1)
   --------------------------------------------------------------------- */

/* Action-Button-Varianten (für Blackjack, Coinflip, Dice, Mines, Slots, Plinko) */
.btn-primary-action,
.btn-secondary-action,
.btn-cashout {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-main);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 90px;
}

.btn-primary-action {
    background: var(--accent);
    color: #0a0c10;
    border-color: var(--accent);
}

.btn-primary-action:hover {
    background: var(--accent-hover, var(--accent));
    filter: brightness(1.1);
}

.btn-secondary-action {
    background: var(--bg-elevated);
    color: var(--text-main);
}

.btn-secondary-action:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
}

.btn-cashout {
    background: var(--success);
    color: #0a0c10;
    border-color: var(--success);
    font-weight: 700;
}

.btn-cashout:hover {
    filter: brightness(1.1);
}

.btn-cashout:disabled,
.btn-primary-action:disabled,
.btn-secondary-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Form-Group Wrapper (für Blackjack, Coinflip, Dice, Mines, Slots) */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: center;
    padding: var(--sp-3);
    width: 100%;
}

.form-group label {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.form-group input,
.form-group select {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: var(--sp-2) var(--sp-3);
    font-size: 14px;
    min-width: 100px;
    font-family: var(--font-mono);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
}

/* Stage-Container (für alle Spiele die mit *-stage arbeiten) */
.crash-stage,
.limbo-stage,
.sturz-stage,
.wheel-stage,
.bac-stage,
.gk-stage,
.flas-stage,
.wd-stage,
.bp-stage,
.hilo-stage,
.vp-stage,
.rou-stage,
.crash-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-5);
    background: var(--bg-card);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

/* Bierpong-Spezifika (fehlte komplett) */
.bp-stage { min-height: 400px; }
.bp-board { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; padding: var(--sp-4); background: var(--bg-input); border-radius: var(--r-md); min-width: 300px; }
.bp-cup-row { display: flex; gap: var(--sp-2); }
.bp-cup { width: 36px; height: 36px; border-radius: 4px 4px 50% 50%; background: var(--bg-elevated); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.2s; }
.bp-cup.empty { opacity: 0.3; }
.bp-cup.alive { background: var(--success-dim); border-color: var(--success); }
.bp-cup.count::after { content: attr(data-count); position: absolute; font-size: 9px; color: var(--accent); }

/* Flaschenwerfen-Spezifika */
.flas-stage { min-height: 400px; }
.flas-bottle-row { display: flex; gap: var(--sp-3); align-items: flex-end; justify-content: center; padding: var(--sp-4); }
.flas-bottle { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: all 0.2s; }
.flas-bottle-neck { width: 14px; height: 30px; background: #6b4423; border-radius: 4px 4px 0 0; }
.flas-bottle-body { width: 40px; height: 80px; background: linear-gradient(180deg, #6b4423, #3a2515); border-radius: 6px 6px 12px 12px; }
.flas-bottle.fallen .flas-bottle-neck { transform: rotate(60deg); transform-origin: bottom; }
.flas-bottle.fallen .flas-bottle-body { transform: rotate(60deg); transform-origin: top; }
.flas-bottle.standing { transform: rotate(0); }
.flas-score { font-size: 24px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }

/* Baccarat */
.bac-table { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); width: 100%; padding: var(--sp-4); background: var(--success-dim); border-radius: var(--r-md); }
.bac-side { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3); background: var(--bg-input); border-radius: var(--r-sm); border: 2px solid transparent; }
.bac-side.winner { border-color: var(--success); background: var(--success-dim); }
.bac-hand { display: flex; gap: var(--sp-2); }
.bac-card { width: 50px; height: 70px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; }
.bac-total-badge { background: var(--accent); color: #0a0c10; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 700; }

/* HiLo */
.hilo-stage { min-height: 400px; }
.hilo-board { display: flex; align-items: center; gap: var(--sp-3); justify-content: center; padding: var(--sp-4); }
.hilo-card { width: 80px; height: 110px; background: var(--bg-elevated); border: 2px solid var(--accent); border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; }
.hilo-card-placeholder { width: 80px; height: 110px; border: 2px dashed var(--border); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 14px; }
.hilo-rank { font-size: 36px; font-weight: 700; }
.hilo-suit { font-size: 28px; }
.hilo-buttons { display: flex; gap: var(--sp-3); justify-content: center; }
.hilo-streak { text-align: center; color: var(--text-muted); font-size: 13px; padding: var(--sp-2); }

/* Crash */
.crash-stage { min-height: 400px; }
.crash-mult { font-size: 48px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
.crash-mult.crashed { color: var(--danger); }
.crash-players { display: flex; flex-direction: column; gap: var(--sp-1); width: 100%; padding: var(--sp-3); }
.crash-buttons { display: flex; gap: var(--sp-3); justify-content: center; }

/* Limbo */
.limbo-stage { min-height: 400px; }
.limbo-mult { font-size: 56px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
.limbo-buttons { display: flex; gap: var(--sp-3); justify-content: center; }

/* Sturzpilot (gleicher Aufbau wie Crash) */
.sturz-stage { min-height: 400px; }
.sturz-mult { font-size: 48px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
.sturz-players { display: flex; flex-direction: column; gap: var(--sp-1); width: 100%; padding: var(--sp-3); }

/* VideoPoker */
.vp-stage { min-height: 400px; }
.vp-board { display: flex; gap: var(--sp-3); justify-content: center; padding: var(--sp-4); }
.vp-card { width: 70px; height: 100px; background: var(--bg-elevated); border: 2px solid var(--accent); border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; }
.vp-card.selected { background: var(--accent-dim); border-color: var(--success); }
.vp-card-placeholder { width: 70px; height: 100px; border: 2px dashed var(--border); border-radius: var(--r-md); }
.vp-rank { font-size: 32px; font-weight: 700; }
.vp-suit { font-size: 24px; }
.vp-paytable { background: var(--bg-input); padding: var(--sp-3); border-radius: var(--r-sm); font-size: 12px; }

/* Roulette */
.rou-stage { min-height: 400px; }
.rou-board { padding: var(--sp-3); }
.rou-table { display: flex; flex-direction: column; gap: var(--sp-1); background: var(--success-dim); padding: var(--sp-3); border-radius: var(--r-md); }
.rou-row { display: flex; gap: 2px; }
.rou-num, .rou-out, .rou-cell { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--bg-elevated); border-radius: 3px; cursor: pointer; }
.rou-num.red { background: var(--danger); color: white; }
.rou-num.black { background: var(--bg-card); }
.rou-zero { background: var(--success); color: white; }
.rou-col, .rou-dozen { padding: var(--sp-2); font-size: 12px; font-weight: 700; background: var(--bg-elevated); border-radius: 3px; cursor: pointer; }
.rou-bets { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3); }

/* Wheel of Fortune */
.wheel-stage { min-height: 400px; }
.wheel-wheel { width: 280px; height: 280px; margin: 0 auto; position: relative; }

/* Glueckskeks */
.gk-stage { min-height: 300px; }
.gk-cookie { width: 200px; height: 200px; margin: 0 auto; background: radial-gradient(circle, #f4e4bc, #d4b896); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 60px; cursor: pointer; transition: all 0.2s; }
.gk-cookie:hover { transform: scale(1.05); }
.gk-cookie.cracked { animation: kenoHit 0.5s; }
.gk-predigten { padding: var(--sp-3); text-align: center; font-style: italic; color: var(--text-muted); }

/* Wetten dass */
.wd-stage { min-height: 400px; }
.wd-challenge-card { background: var(--bg-elevated); padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--accent); text-align: center; max-width: 500px; margin: 0 auto; }