/* ============================================
   SLOTS.CSS - Lucky 7 (Spielautomat, js/slots.js)
   Kopfleiste und Meldung kommen aus poker.css. Keine Knopfleiste: Walzen,
   Leiter und EINSATZ oben sind klickbar. js/slots.js skaliert den Automaten
   (#slots-cabinet) per zoom auf die freie Flaeche (#slots-stage).
   ============================================ */

#slots-screen {
    gap: 12px;
    padding: 12px 20px 16px;
}

/* Hinweiszeile nur auf Wunsch (Taste H), bei Game Over immer */
#slots-screen[data-hints="off"]:not([data-phase="gameover"]) #slots-msg:not(.note) {
    display: none;
}

.slots-stage {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* EINSATZ in der Kopfleiste: sieht aus wie die Anzeigen, ist aber klickbar */
.stat-btn {
    padding: 2px 6px;
    border: 1px dashed var(--separator);
    background: none;
    cursor: pointer;
}

.stat-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.stat-btn:disabled {
    cursor: default;
    border-color: transparent;
}

.stat-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Symbole: Theme-Farbe, im Apple-II-Theme bunt ---- */
.slot-cell,
.pt-icon {
    color: var(--text);
}

.sym-seven {
    color: var(--text-bright);
}

[data-theme="color"] .sym-C     { color: var(--apple-red); }
[data-theme="color"] .sym-L     { color: var(--apple-yellow); }
[data-theme="color"] .sym-P     { color: var(--apple-purple); }
[data-theme="color"] .sym-G     { color: var(--apple-orange); }
[data-theme="color"] .sym-B     { color: var(--apple-cyan); }
[data-theme="color"] .sym-seven { color: var(--apple-red); }

/* ---- Gewinntabelle: Symbole statt Namen (32 px = 16er Raster doppelt, pixelgenau) ---- */
.slots-paytable td {
    padding-top: 0;
    padding-bottom: 0;
}

.slots-paytable td.pt-icons {
    white-space: nowrap;
    padding-right: 20px;
}

.pt-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 4px;
    vertical-align: middle;
    text-align: center;
    line-height: 32px;
}

.pt-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

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

/* Gewinnzeile: Symbole in Hintergrundfarbe wie der Text */
.slots-paytable tr.pt-win .pt-icon {
    color: inherit;
}

/* ---- Automat ---- */
.slot-cabinet {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.slot-reels {
    --slot-row: 84px;
    --slot-width: 128px;
    position: relative;
    display: flex;
    gap: 14px;
    padding: 12px 30px;
    cursor: pointer;
}

.slot-reels[data-phase="gamble"] {
    cursor: default;
}

.slot-window {
    position: relative;
    width: var(--slot-width);
    height: calc(var(--slot-row) * 3);
    overflow: hidden;
    border: var(--hair, 1px) solid var(--separator);   /* --hair: 1 Bildschirmpixel trotz zoom (fitMachine) */
    background-color: var(--card-bg);
    cursor: pointer;
}

/* Walzenwoelbung: zu den Raendern hin kraeftig dunkler (Zylinder), die
   Gewinnzeile in der Mitte bleibt hell */
.slot-window::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.7) 12%,
        rgba(0, 0, 0, 0.35) 25%,
        transparent 38%,
        transparent 62%,
        rgba(0, 0, 0, 0.35) 75%,
        rgba(0, 0, 0, 0.7) 88%,
        rgba(0, 0, 0, 0.92) 100%);
    pointer-events: none;
}

.slot-strip {
    will-change: transform;
}

.slot-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--slot-row);
}

.slot-cell svg {
    width: 64px;
    height: 64px;
}

/* Tempo-Eindruck: Nachleuchten wie auf der Roehre (Spur nach oben, Walze laeuft nach unten) */
.slot-window.blur-1 .slot-strip {
    filter: drop-shadow(0 -10px 0 var(--glow-color-subtle));
}

.slot-window.blur-2 .slot-strip {
    filter: drop-shadow(0 -12px 0 var(--glow-color)) drop-shadow(0 -24px 0 var(--glow-color-subtle));
    opacity: 0.8;
}

/* Spannungs-Stopp: dritte Walze leuchtet, waehrend sie lange auslaeuft */
.slot-window.tease {
    border-color: var(--accent);
    animation: teaseGlow 0.5s ease-in-out infinite alternate;
}

@keyframes teaseGlow {
    from { box-shadow: 0 0 4px var(--glow-color-subtle); }
    to   { box-shadow: 0 0 18px var(--glow-color-strong), inset 0 0 12px var(--glow-color-subtle); }
}

/* Gewinnlinie ueber die mittlere Zeile, Pfeile im Rahmen */
.slot-payline {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: var(--slot-row);
    transform: translateY(-50%);
    border-top: var(--hair, 1px) solid var(--accent);
    border-bottom: var(--hair, 1px) solid var(--accent);
    box-shadow: 0 0 8px var(--glow-color-subtle);
    pointer-events: none;
    z-index: 2;
}

.slot-payline::before,
.slot-payline::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    font-size: 1rem;
    line-height: 1;
}

.slot-payline::before { content: '▶'; left: 0; }
.slot-payline::after  { content: '◀'; right: 0; }

.slot-reels.win .slot-payline {
    animation: paylineBlink 0.5s steps(2) 6;
    box-shadow: 0 0 16px var(--glow-color-strong);
}

@keyframes paylineBlink {
    50% { border-color: transparent; box-shadow: none; }
}

/* ---- Risikoleiter: Einblendung ueber den Walzen, nur nach einem Gewinn ----
   .open blendet ein, .closing / .lost blenden aus (js/slots.js, setRiskPanel).
   Die Walzen dunkeln derweil ab (.risk-open am Automaten). */
.slot-cabinet {
    position: relative;
}

.slot-reels {
    transition: filter 0.3s;
}

.slot-cabinet.risk-open .slot-reels {
    filter: brightness(0.3) blur(1px);
}

.slot-risk {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    display: none;
    flex-direction: column;
    gap: 8px;
    width: 272px;
    padding: 8px 10px 10px;
    border: 2px solid var(--accent);
    background-color: var(--bg);
    box-shadow: 0 0 24px var(--glow-color-strong), inset 0 0 12px var(--glow-color-subtle);
    transform: translate(-50%, -50%);
}

.slot-risk.open,
.slot-risk.shown,
.slot-risk.closing,
.slot-risk.lost {
    display: flex;
}

.slot-risk.open {
    animation: riskIn 0.35s steps(6) both;
}

.slot-risk.closing {
    animation: riskOut 0.25s ease-in both;
}

.slot-risk.lost {
    animation: riskLost 0.5s steps(5) both;
}

/* Einsprung mit Aufblitzen (stufig wie auf der Roehre) */
@keyframes riskIn {
    0%   { transform: translate(-50%, -50%) scale(0.2, 0.02); opacity: 0; }
    40%  { transform: translate(-50%, -50%) scale(1.06, 0.06); opacity: 1; box-shadow: 0 0 60px var(--glow-color-strong); }
    70%  { transform: translate(-50%, -50%) scale(1.04, 1.04); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes riskOut {
    to { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
}

/* Verloren: zittert, faellt zusammen */
@keyframes riskLost {
    0%   { transform: translate(-50%, -50%); }
    20%  { transform: translate(-53%, -50%); }
    40%  { transform: translate(-47%, -50%); border-color: var(--danger); }
    60%  { transform: translate(-50%, -50%) scale(1, 0.5); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.1, 0.02); opacity: 0; }
}

/* Gewonnene Stufe: Rahmen pulst einmal kraeftig */
.slot-risk.pulse {
    animation: riskPulse 0.45s ease-out;
}

@keyframes riskPulse {
    40% { box-shadow: 0 0 50px var(--glow-color-strong), inset 0 0 24px var(--glow-color); transform: translate(-50%, -50%) scale(1.04); }
}

.slot-ladder {
    display: flex;
    flex-direction: column;
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 1.3rem;
    text-align: center;
}

.ladder-head {
    padding-bottom: 4px;
    color: var(--accent);
    font-size: 1.4rem;
    letter-spacing: 4px;
}

.ladder-step {
    height: 23px;
    line-height: 23px;
    color: var(--text);
    transition: none;         /* globaler Farbuebergang wuerde beim Risiko zwei Zeilen halb leuchten lassen */
}

.ladder-zero {
    margin-top: 3px;
    border-top: 1px solid var(--separator);
}

.slot-ladder .ladder-step.passed {
    color: var(--text-dim);
}

/* Erreichte Stufe und springendes Licht: invertiert */
.slot-ladder .ladder-step.current,
.slot-ladder .ladder-step.flash {
    color: var(--bg);
    background-color: var(--accent);
    box-shadow: 0 0 12px var(--glow-color);
}

/* Gerade erreichte Stufe blinkt */
.slot-ladder .ladder-step.hit {
    animation: ladderHit 0.12s steps(2) 4;
}

@keyframes ladderHit {
    50% { background-color: transparent; color: var(--accent); }
}

/* Verlust: Stufen leuchten auf und gehen nacheinander aus (blackout), die 0 wird rot */
.slot-ladder .ladder-step.surge {
    color: var(--bg);
    background-color: var(--accent);
}

.slot-ladder .ladder-step.dead {
    color: var(--bg);
    background-color: var(--danger);
    box-shadow: 0 0 14px var(--danger);
}

/* Einrast-Blitz beim Stopp: hell aufblitzen, kurz nach unten rucken */
.slot-risk.snap {
    animation: riskSnap 0.2s steps(4);
}

@keyframes riskSnap {
    0%   { filter: brightness(2.2); transform: translate(-50%, calc(-50% + 4px)); box-shadow: 0 0 60px var(--glow-color-strong); }
    100% { filter: none; transform: translate(-50%, -50%); }
}

/* Lauflicht: Lampen rund um die Leiste (js/slots.js, buildLamps); --heat = Stufe */
.risk-lamps {
    position: absolute;
    left: -2px;
    top: -2px;
    pointer-events: none;
}

.risk-lamp {
    position: absolute;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    background-color: var(--separator);
    opacity: 0.5;
}

.risk-lamp.on {
    background-color: var(--accent);
    opacity: 1;
    box-shadow: 0 0 calc(3px + var(--heat, 0) * 3px) var(--glow-color-strong);
}

/* Funken aus der gewonnenen Stufe */
.risk-spark {
    position: absolute;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    background-color: var(--accent);
    box-shadow: 0 0 6px var(--glow-color-strong);
    pointer-events: none;
    animation: sparkFly 0.8s steps(10) both;
}

@keyframes sparkFly {
    0%   { transform: translate(0, 0); opacity: 1; }
    60%  { opacity: 1; }
    100% { transform: translate(var(--dx), calc(var(--dy) + 40px)); opacity: 0; }
}

.slot-risk-btns {
    display: flex;
    gap: 8px;
}

.slot-risk-btns .btn {
    flex: 1;
    padding: 6px 0;
    font-size: 1rem;
}

/* ---- Gewinntabelle im Overlay (INFO) ---- */
.slots-info-panel {
    max-width: 720px;
    gap: 14px;
}

.slots-paytable .pt-head td {
    padding-top: 2px;
    padding-bottom: 4px;
    color: var(--text-dim);
    font-size: 1rem;
    letter-spacing: 1px;
}

.slots-paytable td.pt-odds,
.slots-paytable td.pt-mine {
    padding-left: 18px;
    white-space: nowrap;
}

.slots-paytable td.pt-odds {
    color: var(--text);
}

.slots-odds {
    font-size: 1.1rem;
    line-height: 1.35;
    color: var(--text-dim);
}

#slots-own-note {
    color: var(--text);
}

.slots-keys {
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 1.1rem;
    text-align: left;
}

.slots-keys td {
    padding: 0 10px;
    color: var(--text-dim);
}

.slots-keys td:first-child {
    color: var(--text-bright);
    text-align: right;
    white-space: nowrap;
}

.slots-info-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.slots-info-panel .nowrap {
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .slot-risk.open,
    .slot-risk.closing,
    .slot-risk.lost,
    .slot-risk.pulse,
    .slot-risk.snap,
    .slot-ladder .ladder-step.hit {
        animation: none;
    }

    .slot-reels.win .slot-payline,
    .slot-window.tease {
        animation: none;
    }

    .slot-window.tease {
        box-shadow: 0 0 14px var(--glow-color-strong);
    }
}