/* ============================================
   MAIN.CSS - Layout & Components
   17+4 Retro Kartenspiel
   ============================================ */

/* ---- CSS Reset ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
}

input, select, textarea {
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
}

img {
    max-width: 100%;
    display: block;
}

/* ---- Body ---- */
body {
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg);
    color: var(--text);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hide scrollbar everywhere */
::-webkit-scrollbar {
    display: none;
}

* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ---- Game Container ---- */
.game-container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 8px 12px;
}

/* ---- Screen System (Fullscreen Overlays) ---- */
.screen {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--bg);
    padding: 20px;
    overflow-y: auto;
}

.screen.active {
    display: flex;
}

/* ---- Setup Screen ---- */
/* Bei 5 Mitspielern hoeher als kleine Fenster: scrollen statt oben abschneiden */
#setup-screen {
    justify-content: safe center;
    overflow-y: auto;
}

.setup-screen {
    text-align: center;
    gap: 24px;
}

.setup-screen h1 {
    margin-bottom: 8px;
    color: var(--accent);
}

.setup-screen .subtitle {
    color: var(--text-dim);
    font-size: 1.3rem;
    margin-bottom: 16px;
}

.setup-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 400px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.form-group label {
    font-size: 1.2rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-group select,
.form-group input {
    width: 100%;
    padding: 10px 14px;
    background-color: var(--card-bg);
    border: 2px solid var(--card-border);
    color: var(--text);
    font-size: 1.3rem;
    appearance: none;
    -webkit-appearance: none;
}

.form-group select {
    cursor: pointer;
    background-image: none;
    position: relative;
}

.form-group select:focus,
.form-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--glow-color-subtle);
}

/* Custom select arrow */
.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: '>';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    color: var(--text-dim);
    pointer-events: none;
    font-size: 1.2rem;
}

.form-group input[type="text"] {
    caret-color: var(--accent);
}

/* Theme preview swatches */
.theme-preview {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 4px;
}

/* .theme-selector (weiter unten) stapelt untereinander, daher hoehere Spezifitaet */
.theme-selector.theme-swatches {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.theme-swatch {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px solid var(--card-border);
    cursor: pointer;
    transition: transform 0.15s;
}

.theme-swatch:hover {
    transform: scale(1.15);
}

.theme-swatch.active {
    border-width: 3px;
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--glow-color);
}

.theme-swatch-green {
    background-color: #33ff33;
}

.theme-swatch-amber {
    background-color: #ffb000;
}

.theme-swatch-color {
    background: linear-gradient(135deg, #DD0000, #FF6600, #14B81A, #0000FF);
}

.theme-swatch-c64 {
    background: linear-gradient(135deg, #a59fff 50%, #352879 50%);
}

.theme-swatch-gameboy {
    background: linear-gradient(135deg, #0f380f 50%, #9bbc0f 50%);
}

.theme-swatch-cga {
    background: linear-gradient(135deg, #55ffff 50%, #ff55ff 50%);
}

/* ---- Game Screen ---- */
.game-screen {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 6px 10px;
    gap: 0;
    overflow: hidden;
}

/* Spielfeld: wenig Rand, und bei zu niedrigem Fenster scrollen statt oben abschneiden */
#game-screen {
    padding: 8px 20px;
    justify-content: safe center;
    overflow-y: auto;
}

/* Feuerwerk (js/fireworks.js): hinter dem Inhalt, ueber dem Screen-Hintergrund.
   z-index -1 wirkt, weil .screen durch position + z-index einen eigenen
   Stacking-Kontext bildet. */
.fireworks-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    image-rendering: pixelated;
}

/* Top bar: round info, chips, theme toggle */
.top-bar {
    align-self: stretch;   /* volle Fensterbreite, Phase/Runde links, Knoepfe rechts */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--separator);
    flex-shrink: 0;
    min-height: 28px;
    margin-bottom: 4px;
}

.top-bar .round-info {
    margin-right: auto;
    font-size: 1.1rem;
    color: var(--text-dim);
}

.top-bar .theme-toggle {
    cursor: pointer;
    color: var(--text-dim);
    font-size: 1rem;
    padding: 2px 8px;
    border: 1px solid var(--separator);
}

.top-bar .theme-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* ---- Dealer Area ---- */
.dealer-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0;
    flex-shrink: 0;
}

.dealer-area .player-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.dealer-area .hand-value {
    font-size: 1.3rem;
    color: var(--accent);
    margin-top: 4px;
}

/* ---- AI Players Area ---- */
.ai-players-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 8px 0;
    flex-shrink: 0;
}

/* ---- Player Spot (each player) ---- */
.player-spot {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--separator);
    border-radius: 4px;
    background-color: var(--bg-light);
    min-width: 140px;
    max-width: 200px;
    flex: 0 1 auto;
    position: relative;
}

.player-spot.active-turn {
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--glow-color-subtle);
}

/* Bust: aus dem Spiel, grau, gedimmt, gestrichelter Rahmen */
.player-spot.busted {
    opacity: 0.45;
    filter: grayscale(1);
    border-style: dashed;
}

/* Blackjack: Rahmen leuchtet in der Gewinnfarbe und pulsiert langsam */
.player-spot.blackjack {
    border-color: var(--success);
    animation: spotGlow 1.6s ease-in-out infinite;
}

.player-spot.blackjack .player-label {
    color: var(--success);
    text-shadow: 0 0 6px var(--success);
}

@keyframes spotGlow {
    0%, 100% { box-shadow: 0 0 6px var(--success); }
    50%      { box-shadow: 0 0 20px var(--success), inset 0 0 6px var(--success); }
}

/* Rundenergebnis gegen den Dealer: gewonnen leuchtet auf, verloren gedimmt */
.player-spot.result-win {
    border-color: var(--success);
    box-shadow: 0 0 10px var(--success);
}

.player-spot.result-win:not(.blackjack) {
    animation: resultFlash 0.5s ease-out 2;
}

.player-spot.result-lose:not(.busted) {
    opacity: 0.6;
}

@keyframes resultFlash {
    0%   { box-shadow: 0 0 0 var(--success); }
    50%  { box-shadow: 0 0 24px var(--success); }
    100% { box-shadow: 0 0 10px var(--success); }
}

/* Badge mit der Rundenbilanz, unten rechts in der Box */
.player-result {
    position: absolute;
    right: 8px;
    bottom: 4px;
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 1.2rem;
    line-height: 1;
}

.result-win .player-result {
    color: var(--success);
    text-shadow: 0 0 6px var(--success);
}

.result-lose .player-result {
    color: var(--danger);
}

.result-push .player-result {
    color: var(--text-dim);
}

.player-label {
    font-size: 0.6rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.player-value {
    font-size: 1.2rem;
    color: var(--text);
    margin-top: 3px;
}

/* Wert-Zeilen reservieren ihre Hoehe schon ohne Karten (Wettphase),
   sonst wachsen die Boxen beim Austeilen */
.player-value,
.hand-value {
    min-height: 1em;  /* Fallback */
    min-height: 1lh;  /* exakt eine Zeilenhoehe */
}

.player-status {
    font-size: 1.1rem;
    color: var(--text-dim);
    margin-top: 2px;
    min-height: 1.3em;
}

.player-status.bust {
    color: var(--danger);
}

.player-status.blackjack {
    color: var(--success);
}

/* Dealer und Mensch: Box waechst mit der Hand mit (sonst ragen 4-5 Karten heraus) */
.dealer-spot,
.human-spot {
    max-width: none;
}

/* KI-Namen dezent in Terminal-Schrift (statt breiter Pixelschrift) */
.ai-players-area .player-label {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 1rem;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

/* Platz fuer Status und Ergebnis-Badge nebeneinander */
.human-spot {
    min-width: 250px;
}

/* ---- Human Player Area ---- */
.human-player-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 4px;
    border-top: 1px solid var(--separator);
    flex-shrink: 0;
}

.human-player-area .player-label {
    font-size: 0.7rem;
    color: var(--accent);
}

.human-player-area .hand-value {
    font-size: 1.5rem;
    color: var(--accent);
    margin-top: 4px;
}

/* ---- Chip Display ---- */
.chip-display {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.2rem;
}

.chip-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--chip-gold);
    background-color: transparent;
    flex-shrink: 0;
}

.chip-amount {
    color: var(--chip-gold);
}

.bet-amount {
    color: var(--accent);
}

/* ---- Controls Area ---- */
.controls-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 0 8px;
    flex-shrink: 0;
}

/* ---- Bet Controls ---- */
.bet-controls {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.bet-controls .bet-label {
    font-size: 1.1rem;
    color: var(--text-dim);
    margin-right: 4px;
    align-self: center;
}

/* ---- Action Buttons ---- */
.action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---- Button Styles ---- */
.btn {
    padding: 8px 18px;
    border: 2px solid var(--btn-border);
    background-color: var(--btn-bg);
    color: var(--btn-text);
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    transition: all 0.1s ease;
    white-space: nowrap;
}

.btn:hover:not(:disabled) {
    background-color: var(--btn-bg-hover);
    color: var(--btn-text-hover);
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--glow-color-subtle);
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Primary action button (Hit, Deal) */
.btn-primary {
    border-width: 3px;
    border-color: var(--accent);
    color: var(--accent);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--accent);
    color: var(--bg);
}

/* Danger button (Stand when high risk) */
.btn-danger {
    border-color: var(--danger);
    color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--danger);
    color: var(--bg);
}

/* Small button (chip bets) */
.btn-sm {
    padding: 5px 10px;
    font-size: 1.1rem;
    border-width: 1px;
}

/* Large button (start game) */
.btn-lg {
    padding: 12px 32px;
    font-size: 1.5rem;
    border-width: 3px;
}

/* Icon-only button */
.btn-icon {
    padding: 4px 8px;
    min-width: 30px;
    text-align: center;
}

/* ---- Message Area ---- */
.message-area {
    text-align: center;
    min-height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-size: 1.2rem;
    color: var(--text);
    flex-shrink: 0;
}

.message-area .message-text {
    max-width: 600px;
}

.message-area .ai-quote {
    color: var(--text-dim);
    font-style: italic;
}

.message-area .result-win {
    color: var(--success);
}

.message-area .result-lose {
    color: var(--danger);
}

.message-area .result-push {
    color: var(--text-dim);
}

/* ---- Game Over Screen ---- */
.gameover-screen {
    text-align: center;
    gap: 20px;
}

.gameover-screen h2 {
    color: var(--accent);
    margin-bottom: 8px;
}

.gameover-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 1.3rem;
}

.gameover-stats .stat-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--separator);
}

.gameover-stats .stat-label {
    color: var(--text-dim);
}

.gameover-stats .stat-value {
    color: var(--accent);
}

.final-ranking {
    margin-top: 12px;
}

.final-ranking ol {
    list-style: none;
    counter-reset: rank;
}

.final-ranking li {
    counter-increment: rank;
    padding: 4px 0;
    font-size: 1.2rem;
}

.final-ranking li::before {
    content: counter(rank) '. ';
    color: var(--text-dim);
}

/* ---- Setup Screen Sections ---- */
.setup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 680px;
    width: 100%;
}

.setup-section {
    width: 100%;
    text-align: center;
}

.setup-section h2 {
    color: var(--text-dim);
    margin-bottom: 8px;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

.subtitle {
    color: var(--text-dim);
    font-size: 0.7rem;
}

.theme-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 12px;
    border: 1px solid transparent;
    font-size: 1.2rem;
}

.theme-option:hover {
    border-color: var(--accent);
}

.theme-option input[type="radio"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.player-count-selector {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 8px;
}

.count-btn {
    width: 40px;
    height: 40px;
    border: 2px solid var(--btn-border) !important;
    background-color: var(--btn-bg) !important;
    color: var(--btn-text);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.count-btn:hover {
    border-color: var(--accent) !important;
    color: var(--accent);
}

.count-btn.active {
    background-color: var(--accent) !important;
    color: var(--bg);
    border-color: var(--accent) !important;
}

.mode-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.mode-btn {
    height: 40px;
    padding: 0 14px;
    border: 2px solid var(--btn-border) !important;
    background-color: var(--btn-bg) !important;
    color: var(--btn-text);
    font-size: 1.2rem;
}

.mode-btn:hover {
    border-color: var(--accent) !important;
    color: var(--accent);
}

.mode-btn.active {
    background-color: var(--accent) !important;
    color: var(--bg);
    border-color: var(--accent) !important;
}

/* Alle Knoepfe der Statusleiste gleich hoch, Inhalt mittig */
.top-bar .btn {
    height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.top-bar .settings-icon-btn {
    width: 44px;
    padding: 0;
}

/* Turbo-Schalter in der Statusleiste: aktiv = gefuellt */
.top-bar .turbo-toggle {
    font-size: 0.95rem;
    letter-spacing: 1px;
}

.top-bar .turbo-toggle.active {
    background-color: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}

/* Holz-Modus: Streichhoelzer statt Chip-Zahl */
.match-stick {
    display: inline-block;
    width: 0.7em;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--chip-gold, #ffd700);
    text-shadow: 0 0 4px var(--chip-gold, #ffd700);
}

.match-stick.match-lost {
    color: var(--text-dim);
    text-shadow: none;
    opacity: 0.35;
}

/* Holz geht verloren: Flamme zuendet an der Spitze, das Holz gluet, verkohlt und
   brennt von oben herunter, Funken und Rauch, der Rest kippt kurz (Endzustand = match-lost).
   Feuerfarben bewusst fest, auch im Monochrom-Theme (sonst liest es sich nicht als Feuer).
   Kein background-clip:text: Chrome maskiert damit auch ::before/::after (Flamme unsichtbar). */
.match-stick {
    position: relative;
    text-align: center; /* Holz mittig, damit die Flamme auf der Spitze sitzt */
    transform-origin: 50% 100%;
}

.match-wood {
    display: inline-block;
    transform-origin: 50% 100%;
}

.match-stick.match-burn {
    opacity: 1;
    animation: matchBurn 1.6s ease-in-out;
}

@keyframes matchBurn {
    0%, 70% { transform: none; opacity: 1; }
    85%     { transform: rotate(-30deg); opacity: 0.8; }
    100%    { transform: none; opacity: 0.35; }
}

.match-stick.match-burn .match-wood {
    animation: matchWood 1.6s ease-in forwards;
}

@keyframes matchWood {
    0%   { color: var(--chip-gold, #ffd700); text-shadow: 0 0 4px var(--chip-gold, #ffd700); transform: none; }
    15%  { color: #ffb347; text-shadow: 0 0 8px #ff8c1a, 0 0 2px #ffe066; }
    45%  { color: #c0561e; text-shadow: 0 0 6px #ff5a14; transform: scaleY(0.82); }
    70%  { color: #4a2c18; text-shadow: 0 0 2px #ff5a14; transform: scaleY(0.6); }
    100% { color: #3a2414; text-shadow: none; transform: scaleY(0.6); }
}

/* Flamme */
.match-stick.match-burn::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -0.35em;
    width: 0.42em;
    height: 0.75em;
    margin-left: -0.21em;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    background: radial-gradient(ellipse at 50% 78%,
        #fffbe0 0%, #ffe066 22%, #ff9a1f 50%, rgba(255, 70, 20, 0.85) 72%, transparent 80%);
    filter: blur(0.4px) drop-shadow(0 0 5px #ff8c1a) drop-shadow(0 0 10px rgba(255, 90, 20, 0.6));
    transform-origin: 50% 90%;
    pointer-events: none;
    animation: matchFlame 1.6s linear forwards;
}

@keyframes matchFlame {
    0%   { opacity: 0; transform: translateY(0) scale(0.2); }
    8%   { opacity: 1; transform: translateY(0) scale(1.35); }
    16%  { transform: translateY(0.1em) scale(0.95, 1.1) skewX(5deg); }
    26%  { transform: translateY(0.2em) scale(1.08, 0.92) skewX(-6deg); }
    36%  { transform: translateY(0.3em) scale(0.92, 1.15) skewX(4deg); }
    46%  { transform: translateY(0.4em) scale(1.05, 0.95) skewX(-4deg); }
    56%  { transform: translateY(0.5em) scale(0.95, 1.08) skewX(5deg); }
    66%  { opacity: 1; transform: translateY(0.55em) scale(0.85) skewX(-3deg); }
    76%  { opacity: 0; transform: translateY(0.6em) scale(0.2); }
    100% { opacity: 0; transform: translateY(0.6em) scale(0.2); }
}

/* Funken, danach Rauch */
.match-stick.match-burn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0.1em;
    width: 3px;
    height: 3px;
    margin-left: -1px;
    border-radius: 50%;
    background: #ffe066;
    box-shadow: 5px -3px 0 0 #ff9a1f, -4px -5px 0 0 #ffd23f, 2px -8px 0 0 #ff7a1a;
    pointer-events: none;
    animation: matchSmoke 1.6s ease-out forwards;
}

@keyframes matchSmoke {
    0%   { opacity: 0; transform: translateY(0); }
    12%  { opacity: 1; transform: translateY(-2px); }
    40%  { opacity: 0; transform: translateY(-18px) scale(1.3); }
    /* Rauch: grau, weich, steigt und waechst */
    60%  { opacity: 0; transform: translateY(0.5em) scale(1);
           width: 8px; height: 8px; margin-left: -4px;
           background: rgba(160, 160, 160, 0.6); box-shadow: 4px -4px 0 1px rgba(140, 140, 140, 0.45), -3px -7px 0 0 rgba(170, 170, 170, 0.35);
           filter: blur(2px); }
    72%  { opacity: 0.7; }
    100% { opacity: 0; transform: translateY(-1.6em) scale(2.4);
           width: 8px; height: 8px; margin-left: -4px;
           background: rgba(160, 160, 160, 0.6); box-shadow: 4px -4px 0 1px rgba(140, 140, 140, 0.45), -3px -7px 0 0 rgba(170, 170, 170, 0.35);
           filter: blur(3px); }
}

/* Holz kommt dazu: waechst von unten, leuchtet kurz auf */
.match-stick.match-gain {
    animation: matchGain 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

@keyframes matchGain {
    0%   { transform: scaleY(0); opacity: 0; }
    45%  { transform: scaleY(1.25); opacity: 1; color: var(--success); text-shadow: 0 0 16px var(--success), 0 0 4px var(--success); }
    100% { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .match-stick.match-burn,
    .match-stick.match-gain {
        animation: none;
    }

    .match-stick.match-burn::before,
    .match-stick.match-burn::after {
        display: none;
    }

    .match-stick.match-burn .match-wood {
        animation: none;
    }

    .match-stick.match-burn {
        opacity: 0.35;
    }
}

/* Vormerken waehrend die KI am Zug ist: gestrichelte Knoepfe, gewaehlter gefuellt
   (bewusst ohne Label davor, sonst verspringen die Knoepfe beim Wechsel) */
#action-controls.preselect .action-btn:not(:disabled) {
    border-style: dashed;
}

#action-controls .action-btn.queued {
    border-style: solid;
    background-color: var(--accent);
    color: var(--bg);
    animation: queuedPulse 1.2s ease-in-out infinite;
}

@keyframes queuedPulse {
    0%, 100% { box-shadow: 0 0 4px var(--glow-color); }
    50%      { box-shadow: 0 0 14px var(--glow-color-strong); }
}

@media (prefers-reduced-motion: reduce) {
    #action-controls .action-btn.queued {
        animation: none;
    }
}

/* Funkenflug: Zielauswahl */
.spark-targets {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 320px;
}

.spark-btn {
    text-align: left;
}

.spark-hint {
    font-size: 1rem;
}

/* Holz-Modus: Verdoppeln/Teilen gibt es nicht, Knoepfe ganz ausblenden */
[data-stake="matches"] #btn-double,
[data-stake="matches"] #btn-split {
    display: none;
}

.player-count-label {
    color: var(--text-dim);
    font-size: 1.1rem;
}

/* Beschreibung unter einer Knopfreihe (Modus): gleicher Abstand wie bei den Mitspielern */
.mode-selector + .player-count-label {
    margin-top: 8px;
}

.personality-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.personality-select-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.personality-select-wrapper label {
    color: var(--text-dim);
    font-size: 1.1rem;
    white-space: nowrap;
}

.personality-select {
    padding: 6px 10px;
    background-color: var(--card-bg) !important;
    border: 2px solid var(--card-border) !important;
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
}

.personality-select option {
    background-color: var(--bg);
    color: var(--text);
}

.credits {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-top: 12px;
    opacity: 0.6;
}

/* ---- Action Controls ---- */
.action-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.round-end-controls {
    display: flex;
    justify-content: center;
}

/* ---- Thinking Bubble ---- */
.thinking-bubble {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--card-bg);
    border: 1px solid var(--text-dim);
    color: var(--text);
    padding: 3px 8px;
    font-size: 0.9rem;
    white-space: nowrap;
    z-index: 20;
    font-style: italic;
}

.thinking-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--text-dim);
}

/* ---- Game Over Content ---- */
.gameover-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

/* ---- Utility Classes ---- */
.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-accent {
    color: var(--accent);
}

.text-dim {
    color: var(--text-dim);
}

.text-danger {
    color: var(--danger);
}

.text-success {
    color: var(--success);
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gap-sm { gap: 4px; }
.gap-md { gap: 8px; }
.gap-lg { gap: 16px; }

.mt-sm { margin-top: 4px; }
.mt-md { margin-top: 8px; }
.mt-lg { margin-top: 16px; }

.mb-sm { margin-bottom: 4px; }
.mb-md { margin-bottom: 8px; }
.mb-lg { margin-bottom: 16px; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .game-container {
        padding: 4px 6px;
    }

    .ai-players-area {
        gap: 6px;
    }

    .player-spot {
        min-width: 110px;
        padding: 4px 6px;
    }

    .btn {
        padding: 6px 12px;
        font-size: 1.1rem;
    }

    .btn-lg {
        padding: 10px 24px;
        font-size: 1.3rem;
    }

    .action-buttons {
        gap: 4px;
    }

    .bet-controls {
        gap: 4px;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 16px;
    }

    .player-spot {
        min-width: 90px;
        max-width: 150px;
    }

    .btn {
        padding: 5px 8px;
        font-size: 1rem;
    }

    .setup-form {
        max-width: 90vw;
    }

    h1 {
        font-size: 1.1rem;
    }

    h2 {
        font-size: 0.9rem;
    }
}

@media (max-height: 600px) {
    .dealer-area,
    .human-player-area {
        padding: 4px 0;
    }

    .ai-players-area {
        padding: 4px 0;
    }

    .controls-area {
        gap: 4px;
        padding: 4px 0;
    }

    .top-bar {
        min-height: 22px;
    }
}

/* ==========================================================================
   Tisch-Layout (Bogen): Dealer oben, KI-Mitspieler im Bogen, Mensch unten.
   Feste Flaeche 1280x800, Skalierung per zoom (UI.fitTable setzt
   --table-scale). Ohne .table-layout gilt der gestapelte Aufbau oben.
   ========================================================================== */
.table-stage {
    width: 100%;
}

.table-stage.table-layout {
    position: relative;
    width: 1280px;
    height: 800px;
    flex-shrink: 0;
    zoom: var(--table-scale, 1);
}

.table-layout .dealer-area,
.table-layout .message-area,
.table-layout .human-player-area,
.table-layout .controls-area {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.table-layout #chaos-info        { position: absolute; top: 4px; right: 30px; width: 320px; margin: 0; }
.table-layout .dealer-area       { top: 70px; }
.table-layout .message-area      { top: 318px; width: 560px; }
.table-layout .human-player-area { top: 384px; border-top: none; }
.table-layout .controls-area     { top: 708px; width: 900px; }

/* KI-Spots werden direkt auf dem Tisch platziert */
.table-layout .ai-players-area {
    display: contents;
}

.table-layout .ai-players-area .player-spot {
    position: absolute;
    width: 220px;
    max-width: none;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Sitzplaetze (max. 4 KI): L1/R1 aussen neben dem Dealer, L2/R2 tiefer und
   weiter innen auf Hoehe des Menschen = Bogen */
.table-layout .ai-players-area[data-count="3"] .player-spot:nth-child(1),
.table-layout .ai-players-area[data-count="4"] .player-spot:nth-child(1) {
    left: 40px; top: 116px;                                  /* L1 */
}

.table-layout .ai-players-area[data-count="1"] .player-spot:nth-child(1),
.table-layout .ai-players-area[data-count="2"] .player-spot:nth-child(1),
.table-layout .ai-players-area[data-count="3"] .player-spot:nth-child(2),
.table-layout .ai-players-area[data-count="4"] .player-spot:nth-child(2) {
    left: 170px; top: 382px;                                 /* L2 */
}

.table-layout .ai-players-area[data-count="2"] .player-spot:nth-child(2),
.table-layout .ai-players-area[data-count="3"] .player-spot:nth-child(3),
.table-layout .ai-players-area[data-count="4"] .player-spot:nth-child(3) {
    right: 170px; top: 382px;                                /* R2 */
}

.table-layout .ai-players-area[data-count="4"] .player-spot:nth-child(4) {
    right: 40px; top: 116px;                                 /* R1 */
}

/* Mauszeiger im Spiel ausgeblendet (main.js, bindCursorHide) */
html.cursor-hidden,
html.cursor-hidden * {
    cursor: none !important;
}

/* Touch (iPad/iPhone): schnelles Tippen auf Knoepfe soll nicht zoomen und keinen Text markieren */
html {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
}

button,
.btn,
.mode-btn,
.rl-cell,
.slot-reels,
.poker-slot,
.hilo-slot {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Statusleisten aufgeraeumt: Turbo und Erfolge sitzen im Einstellungsmenue (Zahnrad),
   der Rekord steht nicht mehr in der Leiste */
.poker-top .stat-record {
    display: none !important;
}

/* Touch-Geraete (js/touch.js setzt data-touch): groessere Ziele, mindestens 44 px */
html[data-touch="on"] .btn,
html[data-touch="on"] .mode-btn,
html[data-touch="on"] .count-btn,
html[data-touch="on"] .bet-btn,
html[data-touch="on"] .stat-btn {
    min-height: 44px;
    min-width: 44px;
}

html[data-touch="on"] .btn-small {
    min-height: 40px;
    min-width: 40px;
}

html[data-touch="on"] .mode-selector,
html[data-touch="on"] .poker-controls {
    gap: 10px;
}

/* =====================================================================
   Startbildschirm in zwei Schritten (data-step am #setup-screen):
   main = Spielauswahl (Online-Zeile, Spielkacheln, Leiste unten),
   options = Einstellungen des gewaehlten Spiels mit START / ZURUECK.
   Regeln stehen in der HILFE (js/help.js).
   ===================================================================== */
#setup-screen[data-step="main"] .setup-options,
#setup-screen[data-step="options"] .setup-main {
    display: none;
}

.setup-main,
.setup-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
}

/* Spielkacheln: grosse Flaechen, drei je Zeile (schmal zwei) */
.game-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: min(600px, 100%);
    margin: 0 auto;
}

.game-grid .game-btn {
    height: auto;
    min-height: 72px;
    padding: 10px 8px;
    font-size: 1.45rem;
    letter-spacing: 1px;
}

@media (max-width: 520px) {
    .game-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Leiste unten: nur Icons (Ton, Einstellungen, Erfolge, Rangliste, Hilfe) */
.setup-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.icon-btn {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--btn-text);
    cursor: pointer;
}

/* ohne Rahmen: Hover und Tastaturfokus durch Leuchten */
.icon-btn:hover,
.icon-btn:focus-visible {
    color: var(--accent);
    filter: drop-shadow(0 0 6px var(--glow-color));
    outline: none;
}

.icon-btn svg {
    display: block;
    width: 30px;
    height: 30px;
}

/* Ton: Lautsprecher mit Wellen bzw. durchgestrichen */
.icon-btn .icon-sound-off,
.icon-btn.muted .icon-sound-on {
    display: none;
}

.icon-btn.muted .icon-sound-off {
    display: block;
}

.icon-btn.muted {
    color: var(--text-dim);
}

/* Tische-Kachel: ueber die ganze Breite unter den Spielen */
.game-grid .tables-tile {
    grid-column: 1 / -1;
    min-height: 54px;
    font-size: 1.3rem;
}

/* Zweiter Schritt: Titel des Spiels, Knoepfe unten */
.setup-options-title {
    margin: 0;
    color: var(--accent);
    font-size: 1.1rem;
    letter-spacing: 3px;
}

.setup-options-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
}

/* HILFE */
.help-panel {
    max-width: 640px;
}

.help-tabs {
    margin-bottom: 8px;
}

.help-tabs .mode-btn {
    font-size: 1.05rem;
    padding: 0 10px;
}

.help-body {
    text-align: left;
    font-size: 1.3rem;
    line-height: 1.35;
    margin: 8px 0 16px;
}

.help-body h3 {
    margin: 14px 0 4px;
    color: var(--accent);
    font-size: 0.8rem;
    letter-spacing: 2px;
}

.help-body p {
    margin: 0;
}