:root {
    --bg-top: #08070a;
    --bg-bottom: #1b120a;
    --cabinet-top: #49311f;
    --cabinet-bottom: #1b130b;
    --panel-bg: rgba(24, 16, 10, 0.88);
    --panel-border: rgba(255, 215, 125, 0.28);
    --gold: #ffd45f;
    --gold-deep: #b97824;
    --highlight: #ff7b56;
    --accent-blue: #7ad9d2;
    --text-main: #fdf7e5;
    --text-soft: #cdbd9c;
    --danger: #ff8d63;
    --symbol-height: 33.3333%;
}

* {
    box-sizing: border-box;
}

html {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 28px;
    overflow-x: hidden;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    color: var(--text-main);
    background:
        radial-gradient(circle at top, rgba(255, 210, 122, 0.2), transparent 34%),
        radial-gradient(circle at 18% 12%, rgba(122, 217, 210, 0.08), transparent 24%),
        radial-gradient(circle at bottom, rgba(255, 123, 86, 0.12), transparent 30%),
        linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.2;
    background-image:
        repeating-linear-gradient(90deg, rgba(242, 205, 122, 0.05) 0 14px, transparent 14px 40px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 28px);
    background-size: 180px 28px, 28px 28px;
}

body::after {
    content: "";
    position: fixed;
    top: -18vh;
    left: 50%;
    width: min(72vw, 820px);
    height: min(72vw, 820px);
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0.38;
    background: radial-gradient(circle, rgba(255, 217, 114, 0.18) 0%, rgba(255, 217, 114, 0.08) 28%, transparent 66%);
    filter: blur(12px);
}

.game-container {
    width: min(980px, 100%);
    position: relative;
    padding: 28px;
    border-radius: 28px;
    border: 1px solid rgba(255, 224, 148, 0.38);
    background:
        linear-gradient(180deg, rgba(255, 249, 229, 0.04), transparent 16%),
        radial-gradient(circle at top, rgba(122, 217, 210, 0.08), transparent 26%),
        repeating-linear-gradient(90deg, rgba(255, 215, 125, 0.035) 0 28px, transparent 28px 56px),
        linear-gradient(180deg, var(--cabinet-top) 0%, var(--cabinet-bottom) 100%);
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -24px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
    touch-action: manipulation;
}

.game-container::before,
.game-container::after {
    content: "";
    position: absolute;
    inset-inline: 18px;
    height: 8px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, transparent, rgba(255, 220, 132, 0.82), transparent),
        repeating-linear-gradient(90deg, rgba(255, 220, 132, 0.16) 0 18px, transparent 18px 36px);
    opacity: 0.88;
}

.game-container::before {
    top: 10px;
}

.game-container::after {
    bottom: 10px;
}

.game-container.fs-mode {
    border-color: rgba(255, 95, 125, 0.72);
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.6),
        0 0 42px rgba(255, 91, 125, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-container.autoplay-mode {
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(87, 211, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-container.run-mode {
    border-color: rgba(255, 210, 116, 0.48);
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.56),
        0 0 24px rgba(255, 192, 81, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

header {
    display: grid;
    gap: 18px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
}

.header-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-width: 220px;
}

.title-cartouche {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    max-width: min(100%, 560px);
    padding: 16px 22px 18px;
    border-radius: 24px;
    border: 1px solid rgba(255, 221, 138, 0.36);
    background:
        linear-gradient(180deg, rgba(255, 248, 227, 0.09), rgba(255, 248, 227, 0.02) 22%, transparent 72%),
        radial-gradient(circle at 20% 18%, rgba(122, 217, 210, 0.13), transparent 42%),
        linear-gradient(180deg, rgba(73, 47, 24, 0.95) 0%, rgba(30, 18, 10, 0.96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        inset 0 -14px 28px rgba(0, 0, 0, 0.2),
        0 14px 32px rgba(0, 0, 0, 0.24),
        0 0 32px rgba(255, 214, 102, 0.06);
    transition: box-shadow 0.3s ease;
}

.title-cartouche::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 18px;
    border: 1px solid rgba(255, 214, 109, 0.12);
    pointer-events: none;
}

.title-cartouche::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 9px;
    height: 6px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, transparent, rgba(255, 214, 109, 0.9), transparent),
        repeating-linear-gradient(90deg, rgba(255, 214, 109, 0.18) 0 16px, transparent 16px 32px);
    opacity: 0.72;
    pointer-events: none;
}

.title-cartouche .eyebrow {
    margin-bottom: 8px;
}

.title-cartouche h1 {
    line-height: 0.96;
    text-wrap: balance;
}

.title-logo-lockup {
    display: inline-flex;
    align-items: flex-end;
    gap: 0.22em;
    max-width: 100%;
    white-space: nowrap;
}

.title-logo-word {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 5.6ch;
    transform: translateY(-0.02em);
}

.title-logo {
    display: block;
    width: clamp(68px, 8.8vw, 90px);
    height: auto;
    filter:
        drop-shadow(0 8px 20px rgba(0, 0, 0, 0.26))
        drop-shadow(0 0 14px rgba(255, 170, 68, 0.12));
    transform: scale(1.42);
    transform-origin: bottom center;
    transition: filter 0.3s ease;
}

.title-logo-suffix {
    display: inline-block;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    color: transparent;
    background: linear-gradient(180deg, #fffaf0 0%, #ffe391 48%, #d29a3f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 10px 30px rgba(255, 184, 72, 0.2);
}

.feature-tease {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    padding: 12px 16px 13px;
    border-radius: 18px;
    border: 1px solid rgba(255, 214, 109, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 248, 227, 0.06), transparent 34%),
        radial-gradient(circle at 78% 20%, rgba(122, 217, 210, 0.12), transparent 42%),
        linear-gradient(180deg, rgba(54, 34, 17, 0.92) 0%, rgba(23, 14, 9, 0.95) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 22px rgba(0, 0, 0, 0.18);
    text-align: right;
}

.feature-tease::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 7px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 214, 109, 0.82), transparent);
    opacity: 0.58;
    pointer-events: none;
}

.feature-tease-label {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    color: var(--accent-blue);
}

.feature-tease-value {
    font-size: clamp(0.5rem, 0.82vw, 0.62rem);
    font-weight: 800;
    letter-spacing: 0.045em;
    line-height: 1.04;
    color: var(--gold);
    text-shadow: 0 5px 14px rgba(255, 196, 79, 0.22);
}

.leaderboard-shortcut-btn {
    position: relative;
    min-width: 180px;
    padding: 11px 14px 12px;
    border: 1px solid rgba(255, 221, 138, 0.54);
    border-radius: 18px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    cursor: pointer;
    color: var(--text-main);
    text-align: right;
    background:
        linear-gradient(180deg, rgba(255, 248, 227, 0.15), transparent 34%),
        radial-gradient(circle at 78% 18%, rgba(255, 213, 102, 0.19), transparent 42%),
        radial-gradient(circle at 20% 16%, rgba(122, 217, 210, 0.13), transparent 38%),
        linear-gradient(180deg, rgba(72, 44, 18, 0.97) 0%, rgba(27, 16, 10, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        inset 0 0 0 1px rgba(255, 220, 126, 0.13),
        0 0 0 1px rgba(255, 208, 97, 0.2),
        0 12px 28px rgba(0, 0, 0, 0.26),
        0 0 24px rgba(255, 195, 78, 0.18);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.leaderboard-shortcut-btn::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 12px;
    border: 1px solid rgba(255, 223, 142, 0.18);
    pointer-events: none;
}

.leaderboard-shortcut-btn:hover,
.leaderboard-shortcut-btn:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 229, 154, 0.78);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(255, 220, 126, 0.16),
        0 0 0 1px rgba(255, 214, 109, 0.24),
        0 16px 30px rgba(0, 0, 0, 0.28),
        0 0 28px rgba(255, 206, 92, 0.24);
    filter: saturate(1.04);
}

.leaderboard-shortcut-btn:focus-visible {
    outline: none;
}

.leaderboard-shortcut-btn:active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(255, 220, 126, 0.12),
        0 0 0 1px rgba(255, 214, 109, 0.22),
        0 10px 20px rgba(0, 0, 0, 0.22),
        0 0 18px rgba(255, 206, 92, 0.16);
}

.leaderboard-shortcut-btn.active {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(255, 220, 126, 0.14),
        0 0 0 1px rgba(255, 214, 109, 0.34),
        0 12px 26px rgba(255, 212, 95, 0.2),
        0 0 30px rgba(255, 206, 92, 0.24);
}

.leaderboard-shortcut-icon {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    color: #fff0b8;
    text-shadow: 0 0 14px rgba(255, 210, 97, 0.24);
}

.leaderboard-shortcut-copy {
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #ffd45f;
    text-shadow: 0 5px 14px rgba(255, 196, 79, 0.24);
}

.eyebrow {
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.26em;
    font-size: 0.72rem;
    color: var(--accent-blue);
}

header h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.2rem);
    letter-spacing: 0.06em;
    color: transparent;
    background: linear-gradient(180deg, #fffaf0 0%, #ffe391 48%, #d29a3f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 10px 30px rgba(255, 184, 72, 0.2);
}

@media (max-width: 640px) {
    .title-logo-lockup {
        gap: 0.16em;
    }

    .title-logo-word {
        width: 6.75ch;
        min-width: 6.75ch;
    }

    .title-logo {
        width: 66px;
    }

    .feature-tease-inner {
        gap: 8px;
    }

    .feature-tease-icon-wrapper {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .feature-tease-icon {
        width: 16px;
        height: 16px;
    }
}

.fs-counter {
    min-width: 180px;
    padding: 12px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 97, 130, 0.42);
    background: rgba(37, 10, 19, 0.82);
    color: #ffdce6;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 24px rgba(255, 91, 125, 0.16);
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.stat-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 18px;
    border-radius: 18px;
    border: 1px solid var(--panel-border);
    background:
        linear-gradient(180deg, rgba(255, 249, 229, 0.045), transparent 40%),
        var(--panel-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.stat-label {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--text-soft);
}

.stat-value {
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    font-weight: 700;
    color: var(--gold);
}

.win-box {
    position: relative;
    overflow: hidden;
}

.win-box::after {
    content: "";
    position: absolute;
    inset: auto -20% -50% auto;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 213, 95, 0.24), transparent 70%);
    pointer-events: none;
}

.slot-machine {
    position: relative;
    margin-top: 24px;
    padding: 16px;
    height: clamp(320px, 48vw, 440px);
    border-radius: 24px;
    border: 1px solid rgba(255, 214, 102, 0.26);
    background:
        radial-gradient(circle at top, rgba(255, 210, 107, 0.13), transparent 24%),
        radial-gradient(circle at 50% 10%, rgba(122, 217, 210, 0.08), transparent 28%),
        linear-gradient(180deg, #17120d 0%, #08090d 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 24px 48px rgba(255, 255, 255, 0.04),
        inset 0 -30px 40px rgba(0, 0, 0, 0.48),
        0 18px 40px rgba(0, 0, 0, 0.34);
    transition: box-shadow 0.28s ease, filter 0.28s ease, transform 0.28s ease;
}

.slot-machine::before,
.slot-machine::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    height: 28px;
    pointer-events: none;
    z-index: 15;
}

.slot-machine::before {
    top: 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent);
}

.slot-machine::after {
    bottom: 16px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.96), transparent);
}

.slot-machine.anticipation-mode {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 24px 48px rgba(255, 255, 255, 0.05),
        inset 0 -30px 40px rgba(0, 0, 0, 0.48),
        0 18px 40px rgba(0, 0, 0, 0.34),
        0 0 34px rgba(91, 220, 255, 0.2);
}

.slot-machine.chakra-hunt-mode {
    filter: brightness(0.94) saturate(1.08);
    transform: scale(1.012);
    box-shadow:
        inset 0 0 0 1px rgba(185, 245, 255, 0.09),
        inset 0 24px 48px rgba(109, 225, 255, 0.04),
        inset 0 -30px 40px rgba(0, 0, 0, 0.56),
        0 20px 44px rgba(0, 0, 0, 0.38),
        0 0 34px rgba(91, 220, 255, 0.24);
}

.slot-machine.chakra-hunt-peak {
    transform: scale(1.018);
    box-shadow:
        inset 0 0 0 1px rgba(205, 252, 255, 0.13),
        inset 0 24px 50px rgba(109, 225, 255, 0.07),
        inset 0 -30px 44px rgba(0, 0, 0, 0.58),
        0 22px 48px rgba(0, 0, 0, 0.4),
        0 0 42px rgba(91, 220, 255, 0.32),
        0 0 24px rgba(255, 146, 57, 0.12);
}

.slot-machine.big-win-mode {
    animation: cabinetPulse 0.75s ease-in-out infinite alternate;
}

.reels-container {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    height: 100%;
    perspective: 1200px;
}

.reel {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 214, 102, 0.12);
    background:
        linear-gradient(135deg, rgba(255, 248, 228, 0.04), transparent 48%),
        linear-gradient(180deg, rgba(255, 248, 228, 0.04), transparent 28%),
        linear-gradient(180deg, #1b1713 0%, #0a0d12 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 12px 24px rgba(255, 255, 255, 0.03),
        inset 0 -16px 30px rgba(0, 0, 0, 0.45),
        inset -8px 0 16px rgba(0, 0, 0, 0.2),
        0 8px 20px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.28s ease;
}

.reel::before,
.reel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 12px;
    pointer-events: none;
    z-index: 4;
}

.reel::before {
    top: 0;
    background: linear-gradient(180deg, rgba(4, 7, 13, 0.68), transparent);
}

.reel::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(4, 7, 13, 0.68), transparent);
}

.reel-strip {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    will-change: transform;
    transform: translateZ(0);
}

.reel.spinning {
    filter: saturate(1.15);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.035),
        inset 0 22px 34px rgba(0, 0, 0, 0.48),
        inset 0 -22px 34px rgba(0, 0, 0, 0.5),
        0 10px 24px rgba(0, 0, 0, 0.34);
}

.reel.spinning::before {
    height: 34px;
    background:
        linear-gradient(180deg, rgba(5, 8, 14, 0.86), rgba(5, 8, 14, 0.18), transparent),
        linear-gradient(90deg, transparent, rgba(173, 216, 255, 0.12), transparent);
}

.reel.spinning::after {
    height: 34px;
    background:
        linear-gradient(0deg, rgba(5, 8, 14, 0.88), rgba(5, 8, 14, 0.16), transparent),
        linear-gradient(90deg, transparent, rgba(255, 214, 102, 0.1), transparent);
}

.reel.spinning .reel-strip {
    filter: blur(1.1px) brightness(1.08);
}

.reel.spinning .symbol:not(.sticky) {
    animation: reelFlicker 0.14s linear infinite alternate;
}

.reel.anticipation {
    box-shadow:
        inset 0 0 0 1px rgba(202, 250, 255, 0.12),
        inset 0 0 30px rgba(91, 220, 255, 0.18),
        0 0 22px rgba(91, 220, 255, 0.2);
}

.reel.anticipation .symbol:not(.sticky) {
    animation: anticipationGlow 0.28s ease-in-out infinite alternate;
}

.reel.chakra-hunt {
    border-color: rgba(188, 246, 255, 0.3);
    box-shadow:
        inset 0 0 0 1px rgba(210, 252, 255, 0.14),
        inset 0 0 34px rgba(83, 221, 255, 0.2),
        inset 0 -18px 30px rgba(8, 14, 42, 0.48),
        0 0 28px rgba(81, 218, 255, 0.22);
}

.reel.chakra-hunt::before {
    height: 42px;
    background:
        linear-gradient(180deg, rgba(3, 8, 19, 0.9), rgba(8, 38, 58, 0.26), transparent),
        linear-gradient(90deg, transparent, rgba(180, 247, 255, 0.22), transparent);
}

.reel.chakra-hunt::after {
    height: 42px;
    background:
        linear-gradient(0deg, rgba(3, 8, 19, 0.92), rgba(8, 38, 58, 0.24), transparent),
        linear-gradient(90deg, transparent, rgba(255, 146, 57, 0.13), transparent);
}

.reel.chakra-hunt-strong {
    box-shadow:
        inset 0 0 0 1px rgba(210, 252, 255, 0.2),
        inset 0 0 42px rgba(83, 221, 255, 0.26),
        inset 0 -18px 30px rgba(8, 14, 42, 0.5),
        0 0 34px rgba(81, 218, 255, 0.28),
        0 0 18px rgba(255, 146, 57, 0.1);
}

.reel.chakra-hunt-final {
    animation: chakraReelPulse 0.72s ease-in-out infinite alternate;
}

.reel.chakra-pass-flash {
    box-shadow:
        inset 0 0 0 1px rgba(232, 255, 255, 0.28),
        inset 0 0 46px rgba(119, 235, 255, 0.36),
        0 0 44px rgba(97, 223, 255, 0.38),
        0 0 22px rgba(255, 146, 57, 0.16);
}

.reel.chakra-hit {
    animation: chakraHitSettle 0.28s cubic-bezier(0.16, 0.92, 0.24, 1);
}

.reel.chakra-miss {
    animation: chakraMissSettle 0.22s cubic-bezier(0.16, 0.92, 0.24, 1);
}

.reel.chakra-hunt .chakra-pass-symbol {
    box-shadow:
        inset 0 0 0 1px rgba(230, 255, 255, 0.3),
        inset 0 0 24px rgba(93, 224, 255, 0.28),
        0 0 22px rgba(93, 224, 255, 0.22);
}

.reel.chakra-hunt .chakra-pass-symbol:not(.sticky) {
    animation: chakraPassGlow 0.22s ease-in-out infinite alternate;
    filter:
        brightness(1.34)
        saturate(1.18)
        drop-shadow(0 0 12px rgba(93, 224, 255, 0.28));
}

.chakra-particle {
    position: absolute;
    left: var(--particle-x);
    bottom: 7%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 7;
    background: rgba(207, 252, 255, 0.92);
    box-shadow: 0 0 10px rgba(107, 225, 255, 0.55);
    animation: chakraParticleRise var(--particle-duration) ease-out var(--particle-delay) infinite;
}

.reel.anticipation .reel-card-back {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 0 26px rgba(255, 91, 125, 0.18),
        0 0 20px rgba(255, 91, 125, 0.18);
}

.reel.settled {
    animation: reelSettle 0.2s cubic-bezier(0.16, 0.92, 0.24, 1);
    box-shadow:
        inset 0 0 0 1px rgba(173, 216, 255, 0.08),
        inset 0 0 24px rgba(173, 216, 255, 0.12),
        0 0 18px rgba(173, 216, 255, 0.1);
}

.reel-card-layer {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    perspective: 1400px;
}

.reel-card-slot {
    position: absolute;
    left: 5px;
    right: 5px;
    top: calc(var(--row-index) * (100% / 3));
    height: calc(100% / 3);
    padding: 4px 2px;
}

.reel-card {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform-style: preserve-3d;
    transform: translateY(24%) scale(0.84) rotateX(14deg) rotate(var(--card-tilt, 0deg));
    transition:
        transform 0.28s cubic-bezier(0.16, 0.9, 0.24, 1),
        opacity 0.2s ease,
        filter 0.22s ease;
    transition-delay: var(--deal-delay, 0ms);
    will-change: transform, opacity;
    filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.34));
}

.reel-card.is-resting {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg) rotate(var(--card-tilt, 0deg));
}

.reel-card.is-revealed {
    opacity: 0.18;
    transform: translateY(0) scale(1) rotateY(180deg) rotate(var(--card-tilt-inverse, 0deg));
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.12));
}

.reel-card-face {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.reel-card-back {
    border: 1px solid rgba(255, 223, 142, 0.46);
    background:
        linear-gradient(180deg, rgba(255, 248, 214, 0.16), rgba(34, 17, 6, 0.08)),
        linear-gradient(180deg, rgba(118, 76, 24, 0.36), rgba(24, 12, 6, 0.28));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 14px 28px rgba(0, 0, 0, 0.28);
}

.reel-card-back::before,
.reel-card-back::after,
.reel-card-front::before,
.reel-card-front::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.reel-card-back::before {
    inset: 5px;
    border-radius: 12px;
    border: 1px solid rgba(255, 219, 132, 0.22);
    box-shadow: inset 0 0 18px rgba(255, 210, 104, 0.08);
}

.reel-card-back::after {
    inset: 8px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 224, 140, 0.22), transparent 40%),
        linear-gradient(135deg, rgba(255, 224, 140, 0.14), rgba(24, 12, 6, 0.18));
}

.reel-card-front {
    transform: rotateY(180deg);
    border: 1px solid rgba(255, 219, 122, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 248, 225, 0.03), rgba(24, 14, 8, 0.008)),
        linear-gradient(180deg, rgba(30, 21, 12, 0.02), rgba(11, 9, 8, 0.002));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 10px 18px rgba(0, 0, 0, 0.08);
}

.reel-card-front::before {
    inset: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 220, 134, 0.14);
}

.reel-card-front::after {
    inset: 9px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 223, 133, 0.08), transparent 48%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 38%);
}

.symbol {
    position: relative;
    height: var(--reel-symbol-height, 120px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 11px 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 50%),
        linear-gradient(180deg, rgba(26, 35, 61, 0.98), rgba(11, 16, 30, 0.98));
    transition: opacity 0.22s ease, transform 0.22s ease, filter 0.22s ease;
}

.symbol-covered {
    opacity: 0;
    filter: none;
    transform: scale(0.98);
    transition: none;
}

.reel.preparing-card-reveal .symbol:not(.sticky) {
    opacity: 0;
    filter: none;
    transform: scale(0.98);
    transition: none;
}

.classic-sticky-overlay {
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
}

.classic-sticky-lock {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--row-index) * (100% / 3));
    height: calc(100% / 3);
}

.classic-sticky-lock .symbol {
    height: 100%;
    border-bottom: none;
}

.symbol:last-child {
    border-bottom: none;
}

.symbol::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

.slot-machine.naruto-rasengan-mode {
    filter: brightness(0.98) saturate(1.16);
}

.symbol.naruto-targeted {
    z-index: 5;
    animation: narutoTargetPulse 0.46s ease-in-out infinite alternate;
    box-shadow:
        inset 0 0 0 1px rgba(100, 226, 255, 0.22),
        0 0 22px rgba(80, 220, 255, 0.22),
        0 0 14px rgba(255, 151, 47, 0.1);
}

.symbol.naruto-targeted::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 14px;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(137, 236, 255, 0.22), transparent 44%),
        conic-gradient(from 70deg, transparent, rgba(129, 230, 255, 0.34), transparent, rgba(255, 159, 62, 0.22), transparent);
    opacity: 0.72;
    mix-blend-mode: screen;
    animation: rasenganMarkSpin 0.58s linear infinite;
}

.symbol.naruto-shred {
    z-index: 6;
    overflow: hidden;
    animation: narutoShred 0.56s cubic-bezier(0.14, 0.84, 0.18, 1) forwards;
}

.symbol.naruto-shred::after {
    content: "";
    position: absolute;
    inset: -18px;
    pointer-events: none;
    background:
        linear-gradient(112deg, transparent 0 31%, rgba(255, 255, 255, 0.86) 32% 34%, transparent 35% 100%),
        linear-gradient(72deg, transparent 0 43%, rgba(111, 229, 255, 0.68) 44% 47%, transparent 48% 100%),
        linear-gradient(148deg, transparent 0 56%, rgba(255, 151, 47, 0.42) 57% 59%, transparent 60% 100%);
    mix-blend-mode: screen;
    animation: narutoSlashBurst 0.32s ease-out forwards;
}

.symbol.naruto-spawn {
    z-index: 5;
    animation: narutoSpawn 0.6s cubic-bezier(0.16, 0.92, 0.24, 1) forwards;
}

.slot-machine.kakashi-raikiri-mode {
    filter: brightness(0.98) saturate(1.14) contrast(1.02);
}

.symbol.kakashi-source {
    z-index: 6;
    animation: kakashiSourcePulse 0.52s ease-in-out infinite alternate;
    box-shadow:
        inset 0 0 0 1px rgba(182, 238, 255, 0.28),
        0 0 22px rgba(112, 222, 255, 0.2),
        0 0 12px rgba(255, 255, 255, 0.12);
}

.symbol.kakashi-source::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 14px;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(217, 251, 255, 0.18), transparent 44%),
        conic-gradient(from 20deg, transparent, rgba(101, 218, 255, 0.36), transparent 34%, rgba(255, 255, 255, 0.22), transparent 62%, rgba(89, 190, 255, 0.28), transparent);
    mix-blend-mode: screen;
    animation: kakashiRaikiriRing 0.68s linear infinite;
}

.symbol.kakashi-target {
    z-index: 5;
    animation: kakashiTargetPulse 0.48s ease-in-out infinite alternate;
    box-shadow:
        inset 0 0 0 1px rgba(110, 223, 255, 0.22),
        inset 0 0 16px rgba(68, 194, 255, 0.14),
        0 0 16px rgba(80, 202, 255, 0.16);
}

.symbol.kakashi-target::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 13px;
    pointer-events: none;
    border: 1px solid rgba(168, 239, 255, 0.5);
    background:
        linear-gradient(90deg, transparent 0 47%, rgba(216, 250, 255, 0.54) 48% 52%, transparent 53% 100%),
        linear-gradient(0deg, transparent 0 47%, rgba(88, 214, 255, 0.42) 48% 52%, transparent 53% 100%);
    opacity: 0.76;
    mix-blend-mode: screen;
}

.symbol.kakashi-copying {
    z-index: 7;
    overflow: hidden;
    animation: kakashiCopyFlash 0.54s cubic-bezier(0.14, 0.84, 0.2, 1) forwards;
}

.symbol.kakashi-copying::after {
    content: "";
    position: absolute;
    inset: -20px;
    pointer-events: none;
    background:
        linear-gradient(116deg, transparent 0 26%, rgba(255, 255, 255, 0.9) 27% 29%, transparent 30% 100%),
        linear-gradient(64deg, transparent 0 43%, rgba(88, 218, 255, 0.78) 44% 47%, transparent 48% 100%),
        linear-gradient(146deg, transparent 0 55%, rgba(155, 235, 255, 0.58) 56% 58%, transparent 59% 100%);
    mix-blend-mode: screen;
    animation: kakashiLightningSweep 0.36s ease-out forwards;
}

.symbol.kakashi-copied {
    z-index: 6;
    animation: kakashiCopiedIn 0.68s cubic-bezier(0.16, 0.92, 0.24, 1) forwards;
}

.slot-machine.sasuke-chidori-mode {
    filter: brightness(0.97) saturate(1.2) contrast(1.03);
}

.slot-machine.itachi-sharingan-mode {
    filter: brightness(0.88) saturate(1.28) contrast(1.08);
    box-shadow:
        inset 0 0 0 1px rgba(255, 82, 82, 0.12),
        inset 0 24px 50px rgba(255, 34, 34, 0.06),
        inset 0 -30px 44px rgba(0, 0, 0, 0.64),
        0 22px 48px rgba(0, 0, 0, 0.42),
        0 0 34px rgba(255, 34, 34, 0.24),
        0 0 22px rgba(255, 214, 102, 0.1);
}

.reel.sasuke-wild-reel {
    border-color: rgba(178, 126, 255, 0.34);
    box-shadow:
        inset 0 0 0 1px rgba(215, 195, 255, 0.16),
        inset 0 0 36px rgba(96, 90, 255, 0.2),
        0 0 24px rgba(108, 126, 255, 0.16),
        0 0 18px rgba(255, 214, 102, 0.08);
    animation: sasukeWildReelPulse 0.64s ease-in-out infinite alternate;
}

.symbol.sasuke-target {
    z-index: 5;
    animation: sasukeTargetPulse 0.48s ease-in-out infinite alternate;
    box-shadow:
        inset 0 0 0 1px rgba(168, 146, 255, 0.28),
        inset 0 0 18px rgba(70, 112, 255, 0.16),
        0 0 18px rgba(103, 137, 255, 0.18);
}

.symbol.sasuke-reel-target {
    box-shadow:
        inset 0 0 0 1px rgba(255, 222, 118, 0.28),
        inset 0 0 20px rgba(111, 106, 255, 0.18),
        0 0 20px rgba(255, 214, 102, 0.12);
}

.symbol.sasuke-target::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 13px;
    pointer-events: none;
    border: 1px solid rgba(195, 179, 255, 0.48);
    background:
        linear-gradient(112deg, transparent 0 43%, rgba(236, 244, 255, 0.58) 44% 47%, transparent 48% 100%),
        radial-gradient(circle at 50% 50%, rgba(96, 128, 255, 0.22), transparent 58%);
    opacity: 0.78;
    mix-blend-mode: screen;
}

.symbol.sasuke-strike {
    z-index: 7;
    overflow: hidden;
    animation: sasukeChidoriStrike 0.58s cubic-bezier(0.14, 0.84, 0.2, 1) forwards;
}

.symbol.sasuke-strike::after {
    content: "";
    position: absolute;
    inset: -22px;
    pointer-events: none;
    background:
        linear-gradient(124deg, transparent 0 24%, rgba(255, 255, 255, 0.92) 25% 27%, transparent 28% 100%),
        linear-gradient(74deg, transparent 0 39%, rgba(96, 195, 255, 0.82) 40% 43%, transparent 44% 100%),
        linear-gradient(148deg, transparent 0 55%, rgba(144, 96, 255, 0.62) 56% 59%, transparent 60% 100%),
        radial-gradient(circle at 58% 42%, rgba(255, 228, 116, 0.32), transparent 34%);
    mix-blend-mode: screen;
    animation: sasukeLightningStrike 0.38s ease-out forwards;
}

.symbol.sasuke-wild-spawn {
    z-index: 7;
    animation: sasukeWildSpawn 0.7s cubic-bezier(0.16, 0.92, 0.24, 1) forwards;
}

.symbol .icon {
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}

.symbol .icon-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.symbol .name {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: rgba(255, 248, 230, 0.72);
    text-transform: uppercase;
    text-align: center;
    line-height: 1.05;
}

.symbol-mg {
    background:
        radial-gradient(circle at 50% 16%, rgba(187, 126, 255, 0.28), transparent 45%),
        radial-gradient(circle at 18% 78%, rgba(94, 218, 126, 0.16), transparent 42%),
        linear-gradient(135deg, rgba(136, 82, 255, 0.2), transparent 38%),
        linear-gradient(180deg, rgba(42, 20, 76, 0.99), rgba(10, 8, 24, 0.99));
    box-shadow:
        inset 0 0 0 1px rgba(199, 149, 255, 0.26),
        inset 0 0 22px rgba(148, 86, 255, 0.2),
        inset 0 -16px 20px rgba(42, 96, 58, 0.1);
}

.symbol-mg::before {
    border-color: rgba(208, 164, 255, 0.24);
    box-shadow:
        inset 0 0 16px rgba(154, 91, 255, 0.16),
        0 0 14px rgba(177, 112, 255, 0.14);
}

.symbol-jiraiya {
    background:
        radial-gradient(circle at 50% 10%, rgba(255, 235, 210, 0.13), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 50%),
        linear-gradient(180deg, rgba(49, 36, 28, 0.98), rgba(17, 14, 17, 0.98));
}

.symbol-pain {
    background:
        radial-gradient(circle at 48% 10%, rgba(255, 83, 58, 0.2), transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 50%),
        linear-gradient(180deg, rgba(52, 18, 18, 0.98), rgba(14, 10, 14, 0.98));
}

.symbol-hashirama {
    background:
        radial-gradient(circle at 50% 10%, rgba(79, 226, 198, 0.18), transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 50%),
        linear-gradient(180deg, rgba(21, 44, 39, 0.98), rgba(10, 16, 18, 0.98));
}

.symbol-madara {
    background:
        radial-gradient(circle at 50% 35%, rgba(5, 10, 20, 0.86), rgba(5, 10, 20, 0.58) 34%, transparent 58%),
        radial-gradient(circle at 50% -12%, rgba(207, 253, 255, 0.48), rgba(91, 205, 255, 0.2) 34%, transparent 60%),
        linear-gradient(135deg, rgba(186, 250, 255, 0.32), transparent 34%),
        linear-gradient(315deg, rgba(57, 151, 255, 0.24), rgba(255, 214, 102, 0.1) 56%, transparent 76%),
        linear-gradient(180deg, rgba(25, 76, 106, 0.99), rgba(7, 10, 22, 0.99));
    box-shadow:
        inset 0 0 0 1px rgba(205, 252, 255, 0.44),
        inset 0 0 24px rgba(118, 222, 255, 0.22),
        inset 0 -16px 24px rgba(22, 67, 150, 0.2),
        inset 0 0 38px rgba(255, 214, 102, 0.08);
}

.symbol-madara::before {
    inset: 4px;
    border: 1px solid rgba(214, 255, 255, 0.36);
    box-shadow:
        inset 0 0 0 1px rgba(255, 214, 102, 0.12),
        inset 0 0 20px rgba(148, 237, 255, 0.12),
        0 0 14px rgba(150, 237, 255, 0.12);
}

.symbol-dm .name,
.symbol-tw .name {
    font-size: 0.67rem;
    letter-spacing: 0.02em;
    line-height: 1.02;
}

.symbol-bewd .icon,
.symbol-dm .icon,
.symbol-wild .icon,
.symbol-scatter .icon {
    transform: scale(1.06);
}

body.visual-max .symbol-scatter.symbol-scatter-asset .icon,
.replay-machine.visual-max .symbol-scatter.symbol-scatter-asset .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(2.18rem, 4.36vw, 3.72rem);
    height: clamp(2.18rem, 4.36vw, 3.72rem);
    font-size: 0;
    isolation: isolate;
    overflow: visible;
}

body.visual-max .symbol-scatter.symbol-scatter-asset .icon-image,
.replay-machine.visual-max .symbol-scatter.symbol-scatter-asset .icon-image {
    width: 100%;
    height: 100%;
    transform: scale(1.1);
    transform-origin: center;
    opacity: 0.96;
    filter:
        brightness(1.22)
        saturate(1.22)
        contrast(1.12)
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.36))
        drop-shadow(0 0 16px rgba(255, 160, 58, 0.26))
        drop-shadow(0 0 10px rgba(255, 214, 102, 0.16));
}

body.visual-max .symbol-mg.symbol-mg-asset,
body.visual-max .symbol-jiraiya.symbol-jiraiya-asset,
body.visual-max .symbol-pain.symbol-pain-asset,
body.visual-max .symbol-hashirama.symbol-hashirama-asset,
body.visual-max .symbol-madara.symbol-madara-asset,
.replay-machine.visual-max .symbol-mg.symbol-mg-asset,
.replay-machine.visual-max .symbol-jiraiya.symbol-jiraiya-asset,
.replay-machine.visual-max .symbol-pain.symbol-pain-asset,
.replay-machine.visual-max .symbol-hashirama.symbol-hashirama-asset,
.replay-machine.visual-max .symbol-madara.symbol-madara-asset {
    gap: 4px;
}

body.visual-max .symbol-mg.symbol-mg-asset .icon,
body.visual-max .symbol-jiraiya.symbol-jiraiya-asset .icon,
body.visual-max .symbol-pain.symbol-pain-asset .icon,
body.visual-max .symbol-hashirama.symbol-hashirama-asset .icon,
body.visual-max .symbol-madara.symbol-madara-asset .icon,
.replay-machine.visual-max .symbol-mg.symbol-mg-asset .icon,
.replay-machine.visual-max .symbol-jiraiya.symbol-jiraiya-asset .icon,
.replay-machine.visual-max .symbol-pain.symbol-pain-asset .icon,
.replay-machine.visual-max .symbol-hashirama.symbol-hashirama-asset .icon,
.replay-machine.visual-max .symbol-madara.symbol-madara-asset .icon {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 0;
    isolation: isolate;
    overflow: visible;
}

body.visual-max .symbol-mg.symbol-mg-asset .icon,
.replay-machine.visual-max .symbol-mg.symbol-mg-asset .icon {
    width: clamp(2rem, 4vw, 3.36rem);
    height: clamp(2.58rem, 4.96vw, 4.08rem);
}

body.visual-max .symbol-jiraiya.symbol-jiraiya-asset .icon,
.replay-machine.visual-max .symbol-jiraiya.symbol-jiraiya-asset .icon {
    width: clamp(2.42rem, 4.9vw, 4.12rem);
    height: clamp(2.64rem, 5.12vw, 4.22rem);
}

body.visual-max .symbol-pain.symbol-pain-asset .icon,
.replay-machine.visual-max .symbol-pain.symbol-pain-asset .icon {
    width: clamp(2.18rem, 4.34vw, 3.64rem);
    height: clamp(2.64rem, 5.1vw, 4.22rem);
}

body.visual-max .symbol-hashirama.symbol-hashirama-asset .icon,
.replay-machine.visual-max .symbol-hashirama.symbol-hashirama-asset .icon {
    width: clamp(2.12rem, 4.2vw, 3.52rem);
    height: clamp(2.66rem, 5.16vw, 4.26rem);
}

body.visual-max .symbol-madara.symbol-madara-asset .icon,
.replay-machine.visual-max .symbol-madara.symbol-madara-asset .icon {
    width: clamp(2.42rem, 4.74vw, 3.96rem);
    height: clamp(2.8rem, 5.42vw, 4.48rem);
}

body.visual-max .symbol-mg.symbol-mg-asset .icon-image,
body.visual-max .symbol-jiraiya.symbol-jiraiya-asset .icon-image,
body.visual-max .symbol-pain.symbol-pain-asset .icon-image,
body.visual-max .symbol-hashirama.symbol-hashirama-asset .icon-image,
body.visual-max .symbol-madara.symbol-madara-asset .icon-image,
.replay-machine.visual-max .symbol-mg.symbol-mg-asset .icon-image,
.replay-machine.visual-max .symbol-jiraiya.symbol-jiraiya-asset .icon-image,
.replay-machine.visual-max .symbol-pain.symbol-pain-asset .icon-image,
.replay-machine.visual-max .symbol-hashirama.symbol-hashirama-asset .icon-image,
.replay-machine.visual-max .symbol-madara.symbol-madara-asset .icon-image {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform-origin: center bottom;
    filter:
        brightness(1.08)
        saturate(1.08)
        contrast(1.04)
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34));
}

body.visual-max .symbol-mg.symbol-mg-asset .icon-image,
.replay-machine.visual-max .symbol-mg.symbol-mg-asset .icon-image {
    transform: translateX(-50%) scale(1.04);
    filter:
        brightness(1.1)
        saturate(1.08)
        contrast(1.04)
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.32))
        drop-shadow(0 0 13px rgba(183, 120, 255, 0.18))
        drop-shadow(0 0 10px rgba(98, 206, 118, 0.1));
}

body.visual-max .symbol-jiraiya.symbol-jiraiya-asset .icon-image,
.replay-machine.visual-max .symbol-jiraiya.symbol-jiraiya-asset .icon-image {
    transform: translateX(-50%) scale(1.08);
    filter:
        brightness(1.08)
        saturate(1.08)
        contrast(1.05)
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 12px rgba(255, 214, 160, 0.14));
}

body.visual-max .symbol-pain.symbol-pain-asset .icon-image,
.replay-machine.visual-max .symbol-pain.symbol-pain-asset .icon-image {
    transform: translateX(-50%) scale(1.06);
    filter:
        brightness(1.1)
        saturate(1.14)
        contrast(1.06)
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.36))
        drop-shadow(0 0 14px rgba(255, 69, 51, 0.18));
}

body.visual-max .symbol-hashirama.symbol-hashirama-asset .icon-image,
.replay-machine.visual-max .symbol-hashirama.symbol-hashirama-asset .icon-image {
    border-radius: 7px;
    transform: translateX(-50%) scale(1.03);
    filter:
        brightness(1.09)
        saturate(1.08)
        contrast(1.05)
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35))
        drop-shadow(0 0 14px rgba(87, 224, 204, 0.16));
}

body.visual-max .symbol-madara.symbol-madara-asset .icon-image,
.replay-machine.visual-max .symbol-madara.symbol-madara-asset .icon-image {
    transform: translateX(-50%) scale(1.08) translateY(1%);
    filter:
        brightness(1.12)
        saturate(1.12)
        contrast(1.08)
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.38))
        drop-shadow(0 0 15px rgba(103, 255, 220, 0.18))
        drop-shadow(0 0 13px rgba(255, 214, 102, 0.14));
}

body.visual-max .symbol-bewd.symbol-bewd-asset,
.replay-machine.visual-max .symbol-bewd.symbol-bewd-asset {
    gap: 4px;
}

body.visual-max .symbol-bewd.symbol-bewd-asset .icon,
.replay-machine.visual-max .symbol-bewd.symbol-bewd-asset .icon {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: clamp(2.18rem, 4.36vw, 3.68rem);
    height: clamp(2.86rem, 5.44vw, 4.48rem);
    font-size: 0;
    isolation: isolate;
    overflow: visible;
}

body.visual-max .symbol-bewd.symbol-bewd-asset .icon-image,
.replay-machine.visual-max .symbol-bewd.symbol-bewd-asset .icon-image {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-50%) scale(1.06);
    transform-origin: center bottom;
    filter:
        brightness(1.09)
        saturate(1.1)
        contrast(1.05)
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.36))
        drop-shadow(0 0 14px rgba(97, 225, 255, 0.18))
        drop-shadow(0 0 12px rgba(132, 196, 255, 0.12));
}

body.visual-max .symbol-dm.symbol-dm-asset,
.replay-machine.visual-max .symbol-dm.symbol-dm-asset {
    gap: 4px;
}

body.visual-max .symbol-dm.symbol-dm-asset .icon,
.replay-machine.visual-max .symbol-dm.symbol-dm-asset .icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: clamp(2.08rem, 4.16vw, 3.5rem);
    height: clamp(2.56rem, 4.96vw, 4.08rem);
    font-size: 0;
    isolation: isolate;
    overflow: visible;
}

body.visual-max .symbol-dm.symbol-dm-asset .icon-image,
.replay-machine.visual-max .symbol-dm.symbol-dm-asset .icon-image {
    width: 100%;
    height: 100%;
    transform: scale(1.18) translateY(1%);
    transform-origin: center bottom;
    filter:
        brightness(1.08)
        saturate(1.08)
        contrast(1.04)
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 12px rgba(255, 182, 224, 0.12));
}

body.visual-max .symbol-tw.symbol-tw-asset,
.replay-machine.visual-max .symbol-tw.symbol-tw-asset {
    gap: 4px;
}

body.visual-max .symbol-tw.symbol-tw-asset .icon,
.replay-machine.visual-max .symbol-tw.symbol-tw-asset .icon {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: clamp(2.12rem, 4.22vw, 3.54rem);
    height: clamp(2.44rem, 4.72vw, 3.94rem);
    font-size: 0;
    isolation: isolate;
    overflow: visible;
}

body.visual-max .symbol-tw.symbol-tw-asset .icon-image,
.replay-machine.visual-max .symbol-tw.symbol-tw-asset .icon-image {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-50%) scale(1.06);
    transform-origin: center bottom;
    filter:
        brightness(1.08)
        saturate(1.08)
        contrast(1.04)
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 12px rgba(255, 197, 78, 0.16))
        drop-shadow(0 0 10px rgba(169, 106, 255, 0.12));
}

body.visual-max .symbol-jinzo.symbol-jinzo-asset,
.replay-machine.visual-max .symbol-jinzo.symbol-jinzo-asset {
    gap: 4px;
}

body.visual-max .symbol-jinzo.symbol-jinzo-asset .icon,
.replay-machine.visual-max .symbol-jinzo.symbol-jinzo-asset .icon {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: clamp(2.08rem, 4.16vw, 3.48rem);
    height: clamp(2.52rem, 4.88vw, 4.02rem);
    font-size: 0;
    isolation: isolate;
    overflow: visible;
}

body.visual-max .symbol-jinzo.symbol-jinzo-asset .icon-image,
.replay-machine.visual-max .symbol-jinzo.symbol-jinzo-asset .icon-image {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-50%) scale(1.08);
    transform-origin: center bottom;
    filter:
        brightness(1.08)
        saturate(1.08)
        contrast(1.04)
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.36))
        drop-shadow(0 0 12px rgba(132, 255, 232, 0.14))
        drop-shadow(0 0 10px rgba(255, 98, 166, 0.08));
}

body.visual-max .symbol-wild.symbol-wild-asset .icon,
.replay-machine.visual-max .symbol-wild.symbol-wild-asset .icon {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: clamp(2.16rem, 4.32vw, 3.64rem);
    height: clamp(2.7rem, 5.2vw, 4.3rem);
    font-size: 0;
    isolation: isolate;
    overflow: visible;
}

body.visual-max .symbol-wild.symbol-wild-asset .icon-image,
.replay-machine.visual-max .symbol-wild.symbol-wild-asset .icon-image {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-50%) scale(1.1) translateY(1%);
    transform-origin: center bottom;
    filter:
        brightness(1.09)
        saturate(1.12)
        contrast(1.06)
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.36))
        drop-shadow(0 0 15px rgba(255, 219, 112, 0.2))
        drop-shadow(0 0 12px rgba(255, 61, 180, 0.14));
}

.symbol-wild {
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 232, 136, 0.26), rgba(255, 185, 44, 0.1) 42%, transparent 66%),
        radial-gradient(circle at 50% 8%, rgba(255, 249, 192, 0.18), transparent 52%),
        linear-gradient(180deg, rgba(255, 214, 102, 0.24), rgba(116, 48, 14, 0.16)),
        linear-gradient(180deg, #3a2a12, #120d07);
    box-shadow:
        inset 0 0 0 1px rgba(255, 220, 120, 0.24),
        inset 0 0 19px rgba(255, 190, 55, 0.14),
        inset 0 -14px 18px rgba(77, 36, 7, 0.2);
}

.symbol-wild::before {
    border-color: rgba(255, 219, 112, 0.28);
    box-shadow:
        inset 0 0 16px rgba(255, 210, 88, 0.12),
        0 0 12px rgba(255, 204, 75, 0.1);
}

.symbol-scatter {
    background:
        radial-gradient(circle at 50% 47%, rgba(255, 128, 44, 0.24), rgba(255, 128, 44, 0.08) 34%, transparent 62%),
        radial-gradient(circle at 50% 7%, rgba(118, 194, 255, 0.16), transparent 48%),
        linear-gradient(180deg, rgba(255, 176, 76, 0.14), rgba(22, 16, 42, 0.12)),
        linear-gradient(180deg, rgba(24, 20, 48, 0.99), rgba(8, 8, 18, 0.99));
    box-shadow:
        inset 0 0 0 1px rgba(255, 170, 82, 0.18),
        inset 0 0 18px rgba(255, 128, 44, 0.12),
        inset 0 -14px 18px rgba(57, 92, 180, 0.08);
}

.symbol-scatter::before {
    border-color: rgba(255, 178, 92, 0.2);
    box-shadow:
        inset 0 0 14px rgba(255, 128, 44, 0.1),
        0 0 12px rgba(255, 128, 44, 0.1);
}

.sticky {
    box-shadow:
        inset 0 0 0 2px rgba(255, 214, 102, 0.78),
        inset 0 0 24px rgba(255, 214, 102, 0.18);
}

.winning-symbol {
    animation: winSymbol 0.58s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 12px rgba(255, 214, 102, 0.2));
    z-index: 3;
}

#win-lines-container {
    position: absolute;
    inset: 16px;
    pointer-events: none;
    z-index: 20;
}

#win-lines-container svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

#win-lines-container path {
    filter: drop-shadow(0 0 6px rgba(255, 238, 178, 0.42));
    animation: linePulse 0.34s ease-in-out alternate 2;
}

#win-lines-container.itachi-line-preview {
    z-index: 24;
}

#win-lines-container.itachi-line-preview svg.itachi-preview-line path {
    stroke: #ff3f4f;
    stroke-width: 5;
    opacity: 0;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    filter:
        drop-shadow(0 0 7px rgba(255, 48, 64, 0.52))
        drop-shadow(0 0 13px rgba(255, 214, 102, 0.2));
    animation:
        itachiLineOpen 0.62s cubic-bezier(0.16, 0.92, 0.24, 1) var(--line-delay, 0ms) forwards,
        itachiLinePulse 0.64s ease-in-out calc(var(--line-delay, 0ms) + 0.28s) 2 alternate;
}

#win-lines-container.itachi-line-preview svg.itachi-base-line path {
    stroke: #ffcf5f;
    stroke-width: 4;
    filter:
        drop-shadow(0 0 7px rgba(255, 214, 102, 0.44))
        drop-shadow(0 0 10px rgba(255, 49, 77, 0.18));
}

#win-lines-container.itachi-line-preview svg.itachi-extra-line path {
    stroke: #ff354f;
}

.status-strip {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--panel-border);
    background:
        linear-gradient(180deg, rgba(255, 249, 229, 0.045), transparent 50%),
        var(--panel-bg);
}

.msg-display {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--gold);
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.charge-display {
    min-height: 20px;
    margin-top: 6px;
    text-align: center;
    color: rgba(255, 240, 196, 0.88);
    font-size: clamp(0.8rem, 1.6vw, 0.96rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.charge-display.is-charged {
    color: #ffd45f;
    text-shadow: 0 0 10px rgba(255, 212, 95, 0.32);
}

.controls {
    margin-top: 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 18px;
}

.bet-controls,
.secondary-controls,
.sound-controls {
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 221, 138, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 249, 229, 0.055), transparent 55%),
        linear-gradient(180deg, rgba(73, 57, 44, 0.52), rgba(42, 32, 24, 0.48));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.14);
}

.bet-controls {
    position: relative;
    display: grid;
}

.sound-controls {
    position: relative;
    display: grid;
}

.bet-controls button,
.secondary-btn,
.sound-controls button,
.sound-slider {
    border: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease, background 0.14s ease;
}

.bet-selector-btn {
    width: 100%;
    min-height: 64px;
    padding: 12px 14px;
    border-radius: 16px;
    text-align: left;
    color: var(--text-main);
    background:
        linear-gradient(180deg, rgba(255, 249, 229, 0.05), transparent 55%),
        linear-gradient(180deg, #2b241b, #17110b);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 20px rgba(0, 0, 0, 0.18);
}

.run-end-btn {
    background:
        linear-gradient(180deg, rgba(255, 208, 198, 0.07), transparent 55%),
        linear-gradient(180deg, #3a1d1b, #1d0f0f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 22px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 123, 86, 0.18);
}

.run-end-btn .bet-selector-label {
    color: #f6c5b9;
}

.run-end-btn .bet-selector-value {
    color: #ffd08e;
}

.run-end-meta {
    display: block;
    margin-top: 5px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #f3c7b6;
    opacity: 0.92;
}

.bet-selector-btn[aria-expanded="true"] {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 212, 95, 0.3),
        0 10px 24px rgba(255, 212, 95, 0.14);
}

.sound-selector-btn {
    width: 100%;
    min-height: 64px;
    padding: 12px 14px;
    border-radius: 16px;
    text-align: left;
    color: var(--text-main);
    background:
        linear-gradient(180deg, rgba(255, 249, 229, 0.05), transparent 55%),
        linear-gradient(180deg, #2b241b, #17110b);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 20px rgba(0, 0, 0, 0.18);
}

.sound-selector-btn[aria-expanded="true"] {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 212, 95, 0.3),
        0 10px 24px rgba(255, 212, 95, 0.14);
}

.bet-selector-label,
.bet-selector-value {
    display: block;
}

.bet-selector-label {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: var(--text-soft);
}

.bet-selector-value {
    margin-top: 8px;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--gold);
}

.bet-menu {
    position: absolute;
    left: 0;
    right: auto;
    bottom: calc(100% + 14px);
    width: min(560px, calc(100vw - 40px));
    display: grid;
    gap: 10px;
    padding: 14px;
    max-height: min(78vh, 720px);
    overflow: auto;
    border-radius: 18px;
    border: 1px solid rgba(255, 219, 138, 0.32);
    background:
        linear-gradient(180deg, rgba(255, 249, 229, 0.05), transparent 32%),
        linear-gradient(180deg, rgba(39, 28, 16, 0.98), rgba(16, 11, 7, 0.98));
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(255, 212, 95, 0.1);
    z-index: 120;
}

.bet-menu-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.bet-menu-tab-btn {
    min-height: 40px;
    padding: 10px 10px 9px;
    border: none;
    border-radius: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-main);
    background: linear-gradient(180deg, #2d3650, #182033);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bet-menu-tab-btn.active {
    color: #1d1200;
    background: linear-gradient(180deg, #fff1af, #ffbf4f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0 0 1px rgba(255, 218, 126, 0.24);
}

.bet-menu-panel {
    display: grid;
    gap: 12px;
}

.bet-menu-section {
    display: grid;
    gap: 8px;
}

.bet-menu-section-inline {
    gap: 8px;
}

.sound-menu-section {
    display: grid;
    gap: 10px;
}

.mobile-sound-only {
    display: none;
}

.bet-menu-title {
    padding-inline: 4px;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: var(--accent-blue);
}

.bet-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.bet-option-btn {
    min-height: 46px;
    padding: 10px 8px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: var(--text-main);
    font-weight: 700;
    letter-spacing: 0.04em;
    background: linear-gradient(180deg, #2d3650, #182033);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bet-option-btn.active {
    color: #1d1200;
    background: linear-gradient(180deg, #fff1af, #ffbf4f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0 0 1px rgba(255, 218, 126, 0.24);
}

.run-input-label {
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    color: var(--text-soft);
}

.run-username-input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 219, 138, 0.2);
    border-radius: 16px;
    color: #fff3d0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
        rgba(12, 9, 7, 0.88);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.run-hint-copy,
.leaderboard-copy {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text-soft);
}

.run-start-btn {
    min-height: 48px;
    padding: 12px 14px;
    border: none;
    border-radius: 14px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #211400;
    background: linear-gradient(180deg, #fff0aa, #ffbf4f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 10px 20px rgba(0, 0, 0, 0.18);
}

.leaderboard-table-shell {
    border: 1px solid rgba(255, 219, 138, 0.18);
    border-radius: 16px;
    overflow: auto;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
        rgba(12, 9, 7, 0.82);
}

.leaderboard-table-shell.compact {
    max-height: 260px;
}

.leaderboard-table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
}

.leaderboard-table th,
.leaderboard-table td {
    padding: 10px 12px;
    text-align: left;
    white-space: nowrap;
}

.leaderboard-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--accent-blue);
    background:
        linear-gradient(180deg, rgba(35, 24, 14, 0.98), rgba(17, 11, 7, 0.98));
}

.leaderboard-table td {
    font-size: 0.84rem;
    color: #fff3d0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.leaderboard-empty-row td {
    text-align: center;
    color: var(--text-soft);
}

.sound-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 14px);
    width: min(340px, 76vw);
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 219, 138, 0.32);
    background:
        linear-gradient(180deg, rgba(255, 249, 229, 0.05), transparent 32%),
        linear-gradient(180deg, rgba(39, 28, 16, 0.98), rgba(16, 11, 7, 0.98));
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(255, 212, 95, 0.1);
    z-index: 120;
}

.sound-menu-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sound-tab-btn {
    min-height: 40px;
    padding: 10px 10px 9px;
    border: none;
    border-radius: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-main);
    background: linear-gradient(180deg, #2d3650, #182033);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.sound-tab-btn.active {
    color: #1d1200;
    background: linear-gradient(180deg, #fff1af, #ffbf4f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0 0 1px rgba(255, 218, 126, 0.24);
}

.sound-tab-badge {
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    border-radius: 999px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: normal;
    color: #fff7d8;
    background: linear-gradient(180deg, #ff7a88, #c53041);
    box-shadow: 0 0 0 1px rgba(255, 176, 170, 0.18);
}

.sound-menu-panel {
    display: grid;
    gap: 12px;
}

.sound-power-btn {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #1d1200;
    background: linear-gradient(180deg, #fff1af, #ffbf4f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0 0 1px rgba(255, 218, 126, 0.24);
}

.sound-power-btn.active {
    color: var(--text-main);
    background: linear-gradient(180deg, #2d3650, #182033);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sound-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.visual-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sound-toggle-btn {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #1d1200;
    background: linear-gradient(180deg, #fff1af, #ffbf4f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0 0 1px rgba(255, 218, 126, 0.24);
}

.sound-toggle-btn.active {
    color: var(--text-main);
    background: linear-gradient(180deg, #2d3650, #182033);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.extras-toggle-btn {
    width: 100%;
}

.extras-input-header {
    margin-top: 2px;
}

.extras-input-row {
    position: relative;
}

.extras-number-input {
    width: 100%;
    min-height: 48px;
    padding: 12px 42px 12px 14px;
    border: 1px solid rgba(255, 219, 138, 0.2);
    border-radius: 16px;
    color: #fff3d0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
        rgba(12, 9, 7, 0.88);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    font: inherit;
}

.extras-number-input:focus {
    outline: none;
    border-color: rgba(255, 219, 138, 0.42);
    box-shadow:
        inset 0 0 0 1px rgba(255, 219, 138, 0.18),
        0 0 0 3px rgba(255, 212, 95, 0.12);
}

.extras-input-suffix {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-weight: 800;
    color: #ffe4a3;
    pointer-events: none;
}

.extras-note {
    margin: 0;
}

.visual-mode-btn {
    min-height: 42px;
    padding: 10px 12px;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-main);
    background: linear-gradient(180deg, #2d3650, #182033);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.visual-mode-btn.active {
    color: #1d1200;
    background: linear-gradient(180deg, #fff1af, #ffbf4f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0 0 1px rgba(255, 218, 126, 0.24);
}

.sound-power-btn:disabled,
.sound-toggle-btn:disabled,
.visual-mode-btn:disabled,
.sound-slider:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sound-slider-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: var(--text-main);
}

.sound-slider-label {
    font-size: 0.92rem;
    color: #efe3bf;
}

.sound-slider-value {
    min-width: 48px;
    text-align: right;
    font-weight: 700;
    color: var(--gold);
}

.sound-slider {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 214, 102, 0.7), rgba(87, 211, 255, 0.76));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    appearance: none;
    -webkit-appearance: none;
}

.sound-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 214, 102, 0.76), rgba(87, 211, 255, 0.78));
}

.sound-slider::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border: 2px solid rgba(255, 248, 218, 0.9);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff7ce 0%, #ffd45f 58%, #be7a18 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
    appearance: none;
    -webkit-appearance: none;
}

.sound-slider::-moz-range-track {
    height: 6px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 214, 102, 0.76), rgba(87, 211, 255, 0.78));
}

.sound-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 248, 218, 0.9);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff7ce 0%, #ffd45f 58%, #be7a18 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}

.chat-menu-summary {
    padding: 12px 14px;
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
        rgba(15, 20, 31, 0.82);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.chat-menu-meta {
    display: grid;
    gap: 4px;
}

.chat-menu-label {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: var(--accent-blue);
}

.chat-menu-username {
    font-weight: 700;
    color: #fff0c1;
}

.chat-status-pill,
.chat-menu-unread {
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.chat-status-pill {
    color: #fff7df;
    background: linear-gradient(180deg, #48546d, #253249);
}

.chat-status-pill[data-state="connected"] {
    color: #0d2018;
    background: linear-gradient(180deg, #9cffd8, #47dca8);
}

.chat-status-pill[data-state="loading"] {
    color: #211100;
    background: linear-gradient(180deg, #ffe28c, #ffb03b);
}

.chat-status-pill[data-state="error"],
.chat-status-pill[data-state="disabled"] {
    color: #fff1e7;
    background: linear-gradient(180deg, #ff8e8b, #c54651);
}

.chat-menu-unread {
    color: #fff6e0;
    background: linear-gradient(180deg, #ff8c76, #b63746);
}

.chat-menu-copy {
    margin: 0;
    color: #efe2c0;
    line-height: 1.55;
}

.chat-open-btn {
    min-height: 44px;
    padding: 11px 14px;
    border: none;
    border-radius: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #1b0d00;
    background: linear-gradient(180deg, #ffe39a, #ffb44c);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 12px 24px rgba(255, 176, 59, 0.14);
}

body.mobile-sound-menu .mobile-sound-only {
    display: grid;
}

body.mobile-sound-menu .desktop-sound-only {
    display: none;
}

body.visual-classic .slot-machine {
    padding: 12px;
    border-radius: 20px;
    border-color: rgba(255, 214, 102, 0.22);
    background:
        radial-gradient(circle at 50% -6%, rgba(255, 210, 107, 0.09), transparent 24%),
        linear-gradient(180deg, #15110d 0%, #06080d 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.035),
        inset 0 18px 36px rgba(255, 255, 255, 0.035),
        inset 0 -24px 34px rgba(0, 0, 0, 0.5),
        0 18px 36px rgba(0, 0, 0, 0.32);
}

body.visual-classic .slot-machine::before,
body.visual-classic .slot-machine::after {
    left: 12px;
    right: 12px;
}

body.visual-classic .reels-container {
    gap: 8px;
}

body.visual-classic .reel {
    border-radius: 14px;
    border-color: rgba(255, 214, 102, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 248, 228, 0.035), transparent 22%),
        linear-gradient(180deg, #19140f 0%, #060910 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.025),
        inset 0 10px 22px rgba(255, 255, 255, 0.022),
        inset 0 -14px 26px rgba(0, 0, 0, 0.46);
}

body.visual-classic .reel::before,
body.visual-classic .reel::after {
    height: 28px;
}

body.visual-classic .reel-card-layer {
    display: none;
}

body.visual-classic .symbol-covered {
    opacity: 1;
    filter: inherit;
    transform: none;
}

.main-btn {
    width: clamp(120px, 18vw, 156px);
    height: clamp(120px, 18vw, 156px);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    color: #241500;
    font-weight: 800;
    font-size: clamp(1.25rem, 2vw, 1.85rem);
    letter-spacing: 0.08em;
    background:
        radial-gradient(circle at 35% 28%, #fff5c2 0%, #ffe28f 16%, #f6c24e 44%, #be7a18 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        0 12px 0 #7a4d0b,
        0 24px 40px rgba(0, 0, 0, 0.36);
    transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.2s ease;
}

.main-btn:active {
    transform: translateY(6px);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        0 6px 0 #7a4d0b,
        0 16px 28px rgba(0, 0, 0, 0.28);
}

.secondary-controls {
    display: grid;
    gap: 10px;
}

.secondary-btn {
    min-width: 116px;
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-main);
    background: linear-gradient(180deg, #2b3551, #141d2e);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.secondary-btn.active {
    color: #1d1200;
    background: linear-gradient(180deg, #ffe590, #ffb339);
}

button:hover:not(:disabled) {
    transform: translateY(-1px);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.44;
    filter: grayscale(0.3);
}

.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 22px;
    background: rgba(5, 8, 15, 0.78);
    backdrop-filter: blur(10px);
    z-index: 1000;
}

.hidden {
    display: none;
}

.overlay-content {
    width: min(460px, 100%);
    padding: 34px 32px;
    border-radius: 26px;
    text-align: center;
    touch-action: manipulation;
    border: 1px solid rgba(255, 111, 139, 0.44);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 35%),
        linear-gradient(180deg, #27121b 0%, #12090d 100%);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.34), 0 0 32px rgba(255, 91, 125, 0.16);
}

.super-spin-intro-card {
    width: min(620px, 100%);
    border-color: rgba(143, 231, 255, 0.38);
    background:
        radial-gradient(circle at 50% 0%, rgba(92, 220, 255, 0.16), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 38%),
        linear-gradient(180deg, #152033 0%, #080b13 100%);
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.44),
        0 0 36px rgba(91, 220, 255, 0.18),
        0 0 22px rgba(255, 146, 57, 0.08);
}

.super-spin-character-reveal {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 18px;
    min-height: 184px;
}

.super-spin-character-card {
    display: grid;
    grid-template-rows: minmax(108px, 1fr) auto auto;
    gap: 7px;
    min-width: 0;
    padding: 11px 9px 13px;
    border-radius: 18px;
    border: 1px solid rgba(198, 244, 255, 0.13);
    opacity: 0;
    transform: translateY(12px) scale(0.94);
    background:
        radial-gradient(circle at 50% 20%, rgba(95, 222, 255, 0.12), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
        rgba(8, 13, 25, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 24px rgba(0, 0, 0, 0.24);
    transition:
        opacity 0.34s ease,
        transform 0.34s cubic-bezier(0.16, 0.92, 0.24, 1),
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}

.super-spin-character-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.super-spin-character-card.tier-2 {
    border-color: rgba(116, 220, 255, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 16px 28px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(79, 207, 255, 0.12);
}

.super-spin-character-card.tier-3 {
    border-color: rgba(255, 211, 103, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 32px rgba(0, 0, 0, 0.32),
        0 0 24px rgba(255, 211, 103, 0.18),
        0 0 18px rgba(91, 220, 255, 0.12);
}

.super-spin-character-image {
    display: grid;
    place-items: end center;
    min-height: 108px;
    overflow: hidden;
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 18%, rgba(143, 231, 255, 0.16), transparent 56%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
}

.super-spin-character-image img {
    display: block;
    width: auto;
    max-width: 112%;
    max-height: 122px;
    object-fit: contain;
    filter:
        drop-shadow(0 11px 14px rgba(0, 0, 0, 0.32))
        drop-shadow(0 0 12px rgba(91, 220, 255, 0.1));
}

.super-spin-character-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff5d6;
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.super-spin-character-tier {
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.super-spin-character-tier.tier-1 {
    color: #9feaff;
    text-shadow: 0 0 12px rgba(95, 222, 255, 0.18);
}

.super-spin-character-tier.tier-2 {
    color: #ffd16e;
    text-shadow:
        0 0 13px rgba(255, 209, 110, 0.24),
        0 0 8px rgba(91, 220, 255, 0.12);
}

.super-spin-character-tier.tier-3 {
    color: #ffffff;
    text-shadow:
        0 0 16px rgba(255, 235, 166, 0.42),
        0 0 12px rgba(255, 146, 57, 0.24),
        0 0 14px rgba(91, 220, 255, 0.18);
}

.chat-card {
    width: min(760px, 100%);
    padding: 28px 28px 24px;
    text-align: left;
    border-color: rgba(255, 214, 109, 0.26);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%),
        linear-gradient(180deg, #1b140e 0%, #0f0b08 100%);
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.44),
        0 0 34px rgba(255, 212, 95, 0.14),
        0 0 22px rgba(87, 211, 255, 0.08);
}

.leaderboard-card {
    width: min(820px, 100%);
    padding: 28px 28px 24px;
    text-align: left;
    border-color: rgba(255, 214, 109, 0.26);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%),
        linear-gradient(180deg, #1b140e 0%, #0f0b08 100%);
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.44),
        0 0 34px rgba(255, 212, 95, 0.14);
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 12px;
}

.leaderboard-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.leaderboard-tab-btn {
    min-height: 42px;
    padding: 10px 12px;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--text-main);
    background: linear-gradient(180deg, #2d3650, #182033);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.leaderboard-tab-btn.active {
    color: #1d1200;
    background: linear-gradient(180deg, #fff1af, #ffbf4f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0 0 1px rgba(255, 218, 126, 0.24);
}

.leaderboard-replay-btn {
    min-height: 34px;
    padding: 8px 12px;
    border: none;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #1e1200;
    background: linear-gradient(180deg, #ffe7a6, #ffb94b);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 8px 16px rgba(255, 176, 59, 0.16);
}

.leaderboard-replay-btn:disabled {
    cursor: default;
    color: rgba(255, 243, 205, 0.62);
    background: linear-gradient(180deg, rgba(67, 74, 96, 0.92), rgba(31, 37, 56, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.replay-card {
    width: min(940px, 100%);
    padding: 28px 28px 24px;
    text-align: left;
    border-color: rgba(255, 214, 109, 0.26);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%),
        linear-gradient(180deg, #1b140e 0%, #0f0b08 100%);
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.44),
        0 0 34px rgba(255, 212, 95, 0.14),
        0 0 24px rgba(87, 211, 255, 0.1);
}

#free-spin-replay-overlay {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.replay-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.replay-summary-pill,
.replay-step-stat {
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 219, 138, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 100%),
        rgba(12, 9, 7, 0.88);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.replay-summary-label,
.replay-step-label,
.replay-head-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--accent-blue);
}

.replay-summary-value,
.replay-step-value,
.replay-head-value {
    color: #fff2c0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.replay-shell {
    display: grid;
    gap: 16px;
}

.replay-machine {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(255, 214, 109, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 36%),
        linear-gradient(180deg, #20160d 0%, #100b07 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 34px rgba(0, 0, 0, 0.3),
        0 0 26px rgba(255, 212, 95, 0.1);
}

.replay-machine-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.replay-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.replay-grid-viewport {
    min-width: 0;
}

.replay-grid-shell {
    position: relative;
}

.replay-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
}

.replay-lines svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.replay-lines path {
    filter: drop-shadow(0 0 6px rgba(255, 238, 178, 0.42));
    animation: linePulse 0.34s ease-in-out alternate 2;
}

.replay-reel {
    min-height: 348px;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 223, 142, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 26%),
        linear-gradient(180deg, rgba(11, 16, 30, 0.98), rgba(5, 8, 17, 0.98));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 0 18px rgba(255, 214, 102, 0.05);
}

.replay-reel-strip {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    height: 100%;
}

.replay-machine .symbol {
    height: 116px;
    padding: 10px 6px;
}

.replay-grid .winning-symbol {
    z-index: 3;
}

.replay-machine.replay-character-sequence {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 34px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(92, 220, 255, 0.14);
}

.replay-machine.naruto-rasengan-mode {
    filter: brightness(0.98) saturate(1.16);
}

.replay-machine.kakashi-raikiri-mode {
    filter: brightness(0.98) saturate(1.14) contrast(1.02);
}

.replay-machine.sasuke-chidori-mode {
    filter: brightness(0.97) saturate(1.2) contrast(1.03);
}

.replay-machine.itachi-sharingan-mode {
    filter: brightness(0.88) saturate(1.28) contrast(1.08);
    box-shadow:
        inset 0 0 0 1px rgba(255, 82, 82, 0.12),
        inset 0 24px 50px rgba(255, 34, 34, 0.06),
        inset 0 -30px 44px rgba(0, 0, 0, 0.64),
        0 22px 48px rgba(0, 0, 0, 0.42),
        0 0 34px rgba(255, 34, 34, 0.24),
        0 0 22px rgba(255, 214, 102, 0.1);
}

.replay-reel.sasuke-wild-reel {
    border-color: rgba(178, 126, 255, 0.34);
    box-shadow:
        inset 0 0 0 1px rgba(215, 195, 255, 0.16),
        inset 0 0 36px rgba(96, 90, 255, 0.2),
        0 0 24px rgba(108, 126, 255, 0.16),
        0 0 18px rgba(255, 214, 102, 0.08);
    animation: sasukeWildReelPulse 0.64s ease-in-out infinite alternate;
}

.replay-grid .replay-character-target {
    position: relative;
    z-index: 6;
    animation: replayCharacterTargetPulse 0.72s ease-out;
}

.replay-grid .replay-character-final {
    animation: replayCharacterFinalFlash 0.42s ease-out;
}

.replay-grid .replay-character-target::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 12px;
    pointer-events: none;
    border: 2px solid rgba(105, 235, 255, 0.82);
    box-shadow:
        0 0 14px rgba(105, 235, 255, 0.38),
        inset 0 0 16px rgba(105, 235, 255, 0.18);
}

.replay-grid .replay-character-target-naruto::after {
    border-color: rgba(255, 170, 54, 0.9);
    box-shadow:
        0 0 14px rgba(255, 170, 54, 0.42),
        inset 0 0 16px rgba(255, 170, 54, 0.18);
}

.replay-grid .replay-character-target-kakashi::after {
    border-color: rgba(126, 229, 255, 0.9);
    box-shadow:
        0 0 14px rgba(126, 229, 255, 0.42),
        inset 0 0 16px rgba(126, 229, 255, 0.18);
}

.replay-grid .replay-character-target-sasuke::after {
    border-color: rgba(157, 106, 255, 0.92);
    box-shadow:
        0 0 14px rgba(157, 106, 255, 0.44),
        inset 0 0 16px rgba(157, 106, 255, 0.18);
}

.replay-grid .replay-character-target-itachi::after {
    border-color: rgba(255, 72, 104, 0.92);
    box-shadow:
        0 0 16px rgba(255, 72, 104, 0.48),
        inset 0 0 18px rgba(255, 72, 104, 0.2);
}

.replay-lines.itachi-line-preview {
    z-index: 24;
}

.replay-lines.itachi-line-preview svg.itachi-preview-line path {
    stroke: #ff3f4f;
    stroke-width: 5;
    opacity: 0;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    filter:
        drop-shadow(0 0 7px rgba(255, 48, 64, 0.52))
        drop-shadow(0 0 13px rgba(255, 214, 102, 0.2));
    animation:
        itachiLineOpen 0.62s cubic-bezier(0.16, 0.92, 0.24, 1) var(--line-delay, 0ms) forwards,
        itachiLinePulse 0.64s ease-in-out calc(var(--line-delay, 0ms) + 0.28s) 2 alternate;
}

.replay-lines.itachi-line-preview svg.itachi-base-line path {
    stroke: #ffcf5f;
    stroke-width: 4;
    filter:
        drop-shadow(0 0 7px rgba(255, 214, 102, 0.44))
        drop-shadow(0 0 10px rgba(255, 49, 77, 0.18));
}

.replay-lines.itachi-line-preview svg.itachi-extra-line path {
    stroke: #ff354f;
}

@keyframes replayCharacterTargetPulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    48% {
        transform: scale(1.055);
        filter: brightness(1.3) saturate(1.18);
    }
    100% {
        transform: scale(1);
        filter: brightness(1.08);
    }
}

@keyframes replayCharacterFinalFlash {
    0% {
        filter: brightness(1.42) saturate(1.2);
    }
    100% {
        filter: brightness(1);
    }
}

.replay-step-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.replay-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.replay-controls .leaderboard-tab-btn {
    min-width: 150px;
}

.replay-controls .leaderboard-tab-btn:disabled {
    cursor: default;
    opacity: 0.52;
}

.replay-confetti {
    position: absolute;
    top: 0;
    width: 8px;
    height: 16px;
    border-radius: 999px;
    pointer-events: none;
    animation: confettiFall 1.9s ease-in forwards;
    z-index: 25;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 14px;
}

.chat-close-btn {
    min-height: 40px;
    padding: 10px 16px;
    border: none;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-main);
    background: linear-gradient(180deg, #2d3650, #182033);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.chat-profile-row {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.chat-profile-label {
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    color: var(--accent-blue);
}

.chat-profile-input,
.chat-input {
    width: 100%;
    border: 1px solid rgba(255, 219, 138, 0.2);
    border-radius: 16px;
    color: #fff3d0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
        rgba(12, 9, 7, 0.88);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.chat-profile-input {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 1rem;
}

.chat-connection-note {
    margin-bottom: 14px;
    padding: 11px 14px;
    border-radius: 14px;
    color: #efe3bf;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
        rgba(21, 18, 13, 0.92);
}

.chat-connection-note[data-state="connected"] {
    color: #dafde8;
}

.chat-connection-note[data-state="error"],
.chat-connection-note[data-state="disabled"] {
    color: #ffd8d1;
}

.chat-load-more-btn {
    width: 100%;
    margin-bottom: 12px;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 214, 102, 0.16);
    border-radius: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fff0c1;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
        rgba(20, 15, 10, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 18px rgba(0, 0, 0, 0.22);
}

.chat-load-more-btn.error {
    color: #ffe5db;
    border-color: rgba(255, 143, 139, 0.28);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
        linear-gradient(180deg, rgba(127, 31, 33, 0.86), rgba(56, 14, 17, 0.94));
}

.chat-load-more-btn:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.chat-messages {
    min-height: 280px;
    max-height: min(46vh, 420px);
    padding: 14px;
    border-radius: 20px;
    overflow-y: auto;
    display: grid;
    gap: 12px;
    background:
        radial-gradient(circle at top, rgba(255, 214, 102, 0.05), transparent 45%),
        rgba(8, 8, 9, 0.86);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.chat-empty-state {
    min-height: 180px;
    display: grid;
    place-items: center;
    text-align: center;
    color: #d8ccb5;
    line-height: 1.55;
}

.chat-message {
    padding: 12px 14px;
    border-radius: 18px;
    display: grid;
    gap: 6px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
        linear-gradient(180deg, #2a2130 0%, #151019 100%);
    border: 1px solid rgba(255, 171, 191, 0.14);
}

.chat-message.own {
    margin-left: 36px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 100%),
        linear-gradient(180deg, #2b2311 0%, #171108 100%);
    border-color: rgba(255, 214, 102, 0.18);
}

.chat-message-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.chat-message-name {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #fff0c1;
}

.chat-message-time {
    font-size: 0.72rem;
    color: #c7bec9;
}

.chat-message-body {
    margin: 0;
    color: #f0e4ca;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-form {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.chat-input {
    min-height: 96px;
    padding: 12px 14px;
    resize: vertical;
    font: inherit;
}

.chat-profile-input:focus,
.chat-input:focus {
    outline: none;
    border-color: rgba(255, 219, 138, 0.42);
    box-shadow:
        inset 0 0 0 1px rgba(255, 219, 138, 0.18),
        0 0 0 3px rgba(255, 212, 95, 0.12);
}

.chat-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.chat-char-count {
    font-size: 0.8rem;
    color: #d9cfb7;
}

.chat-send-btn {
    min-width: 132px;
    min-height: 44px;
    padding: 10px 18px;
    border: none;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #1b0d00;
    background: linear-gradient(180deg, #ffe49e, #ffb03b);
    box-shadow: 0 12px 26px rgba(255, 176, 59, 0.18);
}

.result-card {
    border-color: rgba(255, 215, 125, 0.38);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%),
        linear-gradient(180deg, #23170c 0%, #100c07 100%);
    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.38),
        0 0 34px rgba(255, 212, 95, 0.14);
}

.result-card.result-regular {
    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.38),
        0 0 38px rgba(255, 212, 95, 0.18);
}

.result-card.result-big {
    border-color: rgba(255, 230, 146, 0.56);
    box-shadow:
        0 26px 56px rgba(0, 0, 0, 0.42),
        0 0 46px rgba(255, 212, 95, 0.24),
        0 0 26px rgba(87, 211, 255, 0.14);
}

.result-card.result-jackpot {
    border-color: rgba(255, 244, 190, 0.74);
    box-shadow:
        0 28px 62px rgba(0, 0, 0, 0.44),
        0 0 56px rgba(255, 212, 95, 0.32),
        0 0 34px rgba(87, 211, 255, 0.24);
}

.result-label {
    margin: 0 0 10px;
    letter-spacing: 0.24em;
    font-size: 0.76rem;
    color: var(--accent-blue);
}

.overlay-content h2 {
    margin: 0 0 10px;
    font-size: clamp(2.1rem, 6vw, 3rem);
    letter-spacing: 0.08em;
    color: #fff2c0;
}

#fs-award-count {
    margin: 0;
    color: #ffb9c8;
    font-size: 1.4rem;
    font-weight: 700;
}

.overlay-copy {
    margin: 12px 0 24px;
    color: #e2d8dc;
    line-height: 1.5;
}

.result-amount {
    margin: 10px 0 14px;
    font-size: clamp(2.2rem, 8vw, 4.3rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff8df;
    text-shadow: 0 0 18px rgba(255, 212, 95, 0.24);
}

.result-card.result-big .result-amount {
    color: #fffbe8;
    text-shadow:
        0 0 22px rgba(255, 212, 95, 0.34),
        0 0 16px rgba(87, 211, 255, 0.16);
}

.result-card.result-jackpot .result-amount {
    color: #ffffff;
    text-shadow:
        0 0 30px rgba(255, 212, 95, 0.42),
        0 0 22px rgba(87, 211, 255, 0.28);
}

.result-copy {
    margin: 0 0 24px;
    color: #f0e3ca;
    line-height: 1.55;
}

.result-character {
    display: grid;
    place-items: end center;
    width: min(154px, 44vw);
    min-height: 164px;
    margin: 2px auto 18px;
    padding: 8px 8px 0;
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 218, 121, 0.18), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 24px rgba(0, 0, 0, 0.18);
}

.result-character img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 182px;
    height: auto;
    filter:
        drop-shadow(0 12px 18px rgba(0, 0, 0, 0.22))
        drop-shadow(0 0 16px rgba(255, 220, 132, 0.08));
}

.result-character[data-character="guy"] img,
.result-character[data-character="solomon"] img {
    max-width: 116%;
    max-height: 174px;
    transform: translateY(2px) scale(1.02);
}

.result-character[data-character="madara"] img,
.result-character[data-character="joe"] img {
    max-width: 118%;
    max-height: 190px;
    transform: translateY(4px) scale(1.04);
}

.result-character[data-character="deidara"] img,
.result-character[data-character="seto"] img,
.result-character[data-character="raikage"] img,
.result-character[data-character="marek"] img {
    max-width: 116%;
    max-height: 184px;
    border-radius: 16px;
    transform: translateY(2px) scale(1.02);
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.16),
        0 0 18px rgba(255, 212, 95, 0.08);
}

#fs-start-btn {
    border: none;
    border-radius: 999px;
    padding: 14px 28px;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #1b0e00;
    background: linear-gradient(180deg, #ffe28c, #ffb03b);
    box-shadow: 0 10px 24px rgba(255, 176, 59, 0.28);
}

#fs-result-btn {
    border: none;
    border-radius: 999px;
    padding: 14px 30px;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #1b0e00;
    background: linear-gradient(180deg, #fff0ae, #ffc34e);
    box-shadow: 0 12px 28px rgba(255, 195, 78, 0.26);
}

@media (max-width: 640px) {
    .super-spin-intro-card {
        padding: 28px 20px;
    }

    .super-spin-character-reveal {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        min-height: 0;
    }

    .super-spin-character-card {
        grid-template-rows: minmax(92px, 1fr) auto auto;
        padding: 9px 8px 11px;
        border-radius: 16px;
    }

    .super-spin-character-image {
        min-height: 92px;
    }

    .super-spin-character-image img {
        max-height: 104px;
    }

    .super-spin-character-name {
        font-size: 0.78rem;
    }

    .super-spin-character-tier {
        font-size: 0.7rem;
    }

    .result-copy {
        margin-bottom: 18px;
    }

    .result-character {
        width: min(128px, 42vw);
        min-height: 138px;
        margin-bottom: 16px;
        padding-top: 6px;
    }

    .result-character img {
        max-height: 152px;
    }

    .result-character[data-character="guy"] img,
    .result-character[data-character="solomon"] img {
        max-height: 146px;
    }

    .result-character[data-character="madara"] img,
    .result-character[data-character="joe"] img {
        max-height: 158px;
    }

    .result-character[data-character="deidara"] img,
    .result-character[data-character="seto"] img,
    .result-character[data-character="raikage"] img,
    .result-character[data-character="marek"] img {
        max-height: 154px;
        border-radius: 14px;
    }
}

.confetti {
    position: absolute;
    top: 0;
    width: 8px;
    height: 16px;
    border-radius: 999px;
    pointer-events: none;
    animation: confettiFall 1.9s ease-in forwards;
    z-index: 25;
}

.counting {
    animation: countingGlow 0.45s ease-in-out infinite alternate;
}

.win-meter-active {
    color: #fff3d2;
}

.win-small {
    color: #ffe08d;
}

.win-regular {
    color: #fff5cb;
    text-shadow: 0 0 12px rgba(255, 212, 95, 0.18);
}

.win-big {
    color: #fff7e0;
    text-shadow: 0 0 18px rgba(255, 212, 95, 0.28);
}

.win-jackpot {
    color: #ffffff;
    text-shadow: 0 0 24px rgba(87, 211, 255, 0.3), 0 0 18px rgba(255, 212, 95, 0.24);
}

@keyframes reelFlicker {
    from {
        filter: brightness(0.95) blur(1px);
    }
    to {
        filter: brightness(1.22) blur(2.6px);
    }
}

@keyframes reelSettle {
    0% {
        transform: translateY(-6px) scaleY(1.02);
    }
    60% {
        transform: translateY(4px) scaleY(0.99);
    }
    100% {
        transform: translateY(0) scaleY(1);
    }
}

@keyframes anticipationGlow {
    from {
        filter: brightness(1) drop-shadow(0 0 0 rgba(91, 220, 255, 0));
    }
    50% {
        filter: brightness(1.3) drop-shadow(0 0 10px rgba(91, 220, 255, 0.24));
    }
    to {
        filter: brightness(1.24) drop-shadow(0 0 16px rgba(91, 220, 255, 0.16));
    }
}

@keyframes chakraReelPulse {
    from {
        transform: translateY(0) scale(1);
        filter: saturate(1.08) brightness(1);
    }
    to {
        transform: translateY(-1px) scale(1.006);
        filter: saturate(1.18) brightness(1.06);
    }
}

@keyframes chakraPassGlow {
    from {
        filter:
            brightness(1.2)
            saturate(1.12)
            drop-shadow(0 0 8px rgba(93, 224, 255, 0.18));
    }
    to {
        filter:
            brightness(1.48)
            saturate(1.25)
            drop-shadow(0 0 18px rgba(93, 224, 255, 0.34))
            drop-shadow(0 0 8px rgba(255, 146, 57, 0.16));
    }
}

@keyframes chakraHitSettle {
    0% {
        transform: translateY(-8px) scaleY(1.025);
        filter: brightness(1.28);
    }
    62% {
        transform: translateY(4px) scaleY(0.99);
        filter: brightness(1.12);
    }
    100% {
        transform: translateY(0) scaleY(1);
        filter: brightness(1);
    }
}

@keyframes chakraMissSettle {
    0% {
        transform: translateY(-3px);
        filter: brightness(1.1) saturate(1.08);
    }
    45% {
        transform: translateY(3px);
        filter: brightness(0.92) saturate(0.96);
    }
    100% {
        transform: translateY(0);
        filter: brightness(1) saturate(1);
    }
}

@keyframes chakraParticleRise {
    0% {
        opacity: 0;
        transform: translate3d(-2px, 0, 0) scale(0.72);
    }
    18% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translate3d(5px, -96px, 0) scale(1.08);
    }
}

@keyframes narutoTargetPulse {
    from {
        transform: scale(1);
        filter:
            brightness(1.08)
            saturate(1.12)
            drop-shadow(0 0 8px rgba(91, 220, 255, 0.16));
    }
    to {
        transform: scale(1.035);
        filter:
            brightness(1.34)
            saturate(1.24)
            drop-shadow(0 0 18px rgba(91, 220, 255, 0.34))
            drop-shadow(0 0 10px rgba(255, 146, 57, 0.18));
    }
}

@keyframes rasenganMarkSpin {
    from {
        transform: rotate(0deg) scale(0.96);
        opacity: 0.56;
    }
    50% {
        opacity: 0.92;
    }
    to {
        transform: rotate(360deg) scale(1.04);
        opacity: 0.68;
    }
}

@keyframes narutoShred {
    0% {
        transform: scale(1.04);
        opacity: 1;
        filter: brightness(1.45) saturate(1.35);
    }
    36% {
        transform: translate3d(2px, -1px, 0) rotate(0.6deg) scale(1.08);
        opacity: 0.96;
        filter: brightness(1.8) saturate(1.45) blur(0.2px);
    }
    72% {
        transform: translate3d(-4px, 3px, 0) rotate(-1.2deg) scale(0.88);
        opacity: 0.34;
        filter: brightness(1.1) saturate(0.9) blur(1.6px);
    }
    100% {
        transform: translate3d(0, 8px, 0) rotate(1.6deg) scale(0.72);
        opacity: 0;
        filter: brightness(0.8) saturate(0.7) blur(2.8px);
    }
}

@keyframes narutoSlashBurst {
    0% {
        opacity: 0;
        transform: translate3d(-18px, 14px, 0) scale(0.82);
    }
    24% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(18px, -14px, 0) scale(1.08);
    }
}

@keyframes narutoSpawn {
    0% {
        transform: translateY(8px) scale(0.72);
        opacity: 0;
        filter:
            brightness(2)
            saturate(1.55)
            blur(2px)
            drop-shadow(0 0 22px rgba(91, 220, 255, 0.38));
    }
    56% {
        transform: translateY(-4px) scale(1.1);
        opacity: 1;
        filter:
            brightness(1.55)
            saturate(1.3)
            blur(0)
            drop-shadow(0 0 18px rgba(255, 146, 57, 0.22));
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: brightness(1) saturate(1);
    }
}

@keyframes kakashiSourcePulse {
    from {
        transform: scale(1);
        filter:
            brightness(1.08)
            saturate(1.12)
            drop-shadow(0 0 8px rgba(96, 219, 255, 0.16));
    }
    to {
        transform: scale(1.03);
        filter:
            brightness(1.36)
            saturate(1.22)
            drop-shadow(0 0 18px rgba(98, 219, 255, 0.32))
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
    }
}

@keyframes kakashiRaikiriRing {
    from {
        transform: rotate(0deg) scale(0.96);
        opacity: 0.54;
    }
    50% {
        opacity: 0.94;
    }
    to {
        transform: rotate(360deg) scale(1.03);
        opacity: 0.62;
    }
}

@keyframes kakashiTargetPulse {
    from {
        transform: scale(1);
        filter: brightness(1.04) saturate(1.06);
    }
    to {
        transform: scale(1.018);
        filter:
            brightness(1.24)
            saturate(1.16)
            drop-shadow(0 0 12px rgba(91, 221, 255, 0.2));
    }
}

@keyframes kakashiCopyFlash {
    0% {
        transform: scale(1);
        opacity: 1;
        filter: brightness(1.1) saturate(1.1);
    }
    42% {
        transform: translate3d(1px, -1px, 0) scale(1.08);
        opacity: 0.98;
        filter: brightness(1.9) saturate(1.38) blur(0.2px);
    }
    100% {
        transform: scale(0.92);
        opacity: 0.42;
        filter: brightness(1.36) saturate(1.1) blur(1.4px);
    }
}

@keyframes kakashiLightningSweep {
    0% {
        opacity: 0;
        transform: translate3d(-18px, 18px, 0) scale(0.82) rotate(-2deg);
    }
    22% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(20px, -18px, 0) scale(1.12) rotate(2deg);
    }
}

@keyframes kakashiCopiedIn {
    0% {
        transform: translateY(6px) scale(0.72);
        opacity: 0;
        filter:
            brightness(2.15)
            saturate(1.45)
            blur(2px)
            drop-shadow(0 0 24px rgba(104, 225, 255, 0.42));
    }
    52% {
        transform: translateY(-3px) scale(1.08);
        opacity: 1;
        filter:
            brightness(1.58)
            saturate(1.28)
            blur(0)
            drop-shadow(0 0 16px rgba(255, 255, 255, 0.2));
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: brightness(1) saturate(1);
    }
}

@keyframes sasukeWildReelPulse {
    from {
        filter: brightness(1.02) saturate(1.08);
    }
    to {
        filter:
            brightness(1.18)
            saturate(1.22)
            drop-shadow(0 0 14px rgba(112, 126, 255, 0.2));
    }
}

@keyframes sasukeTargetPulse {
    from {
        transform: scale(1);
        filter:
            brightness(1.04)
            saturate(1.1)
            drop-shadow(0 0 7px rgba(112, 126, 255, 0.14));
    }
    to {
        transform: scale(1.026);
        filter:
            brightness(1.32)
            saturate(1.24)
            drop-shadow(0 0 16px rgba(112, 126, 255, 0.3))
            drop-shadow(0 0 9px rgba(255, 214, 102, 0.16));
    }
}

@keyframes sasukeChidoriStrike {
    0% {
        transform: scale(1);
        opacity: 1;
        filter: brightness(1.1) saturate(1.1);
    }
    36% {
        transform: translate3d(2px, -1px, 0) scale(1.08);
        opacity: 0.98;
        filter: brightness(1.95) saturate(1.48) blur(0.2px);
    }
    100% {
        transform: scale(0.9);
        opacity: 0.38;
        filter: brightness(1.22) saturate(0.96) blur(1.6px);
    }
}

@keyframes sasukeLightningStrike {
    0% {
        opacity: 0;
        transform: translate3d(-22px, 18px, 0) scale(0.82) rotate(-3deg);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(22px, -20px, 0) scale(1.14) rotate(3deg);
    }
}

@keyframes sasukeWildSpawn {
    0% {
        transform: translateY(8px) scale(0.7);
        opacity: 0;
        filter:
            brightness(2.2)
            saturate(1.52)
            blur(2px)
            drop-shadow(0 0 24px rgba(112, 126, 255, 0.42))
            drop-shadow(0 0 18px rgba(255, 214, 102, 0.26));
    }
    50% {
        transform: translateY(-4px) scale(1.1);
        opacity: 1;
        filter:
            brightness(1.62)
            saturate(1.34)
            blur(0)
            drop-shadow(0 0 18px rgba(255, 214, 102, 0.28));
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: brightness(1) saturate(1);
    }
}

@keyframes itachiLineOpen {
    0% {
        opacity: 0;
        stroke-dashoffset: 1000;
        filter:
            drop-shadow(0 0 4px rgba(255, 48, 64, 0.22))
            drop-shadow(0 0 0 rgba(255, 214, 102, 0));
    }
    28% {
        opacity: 1;
    }
    100% {
        opacity: 0.86;
        stroke-dashoffset: 0;
        filter:
            drop-shadow(0 0 8px rgba(255, 48, 64, 0.54))
            drop-shadow(0 0 15px rgba(255, 214, 102, 0.22));
    }
}

@keyframes itachiLinePulse {
    from {
        opacity: 0.72;
        filter:
            drop-shadow(0 0 7px rgba(255, 48, 64, 0.42))
            drop-shadow(0 0 11px rgba(255, 214, 102, 0.16));
    }
    to {
        opacity: 1;
        filter:
            drop-shadow(0 0 12px rgba(255, 48, 64, 0.72))
            drop-shadow(0 0 18px rgba(255, 214, 102, 0.28));
    }
}

@keyframes winSymbol {
    0% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1) drop-shadow(0 0 0 rgba(255, 214, 102, 0));
    }
    50% {
        transform: scale(1.1) rotate(1deg);
        filter: brightness(1.4) drop-shadow(0 0 14px rgba(255, 214, 102, 0.3));
    }
    100% {
        transform: scale(1.08) rotate(0deg);
        filter: brightness(1.35) drop-shadow(0 0 20px rgba(255, 214, 102, 0.2));
    }
}

/* Animations */
@keyframes cabinetPulse {
    from {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-1px) scale(1.001);
    }
    to {
        transform: translateY(-1px) scale(1);
    }
    }
}

@keyframes countingGlow {
    from {
        text-shadow: 0 0 0 rgba(255, 214, 102, 0.1);
    }
    to {
        text-shadow: 0 0 18px rgba(255, 214, 102, 0.34);
    }
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift, 0), 420px, 0) rotate(480deg);
    }
}

@keyframes linePulse {
    from {
        stroke-width: 5;
        opacity: 0.76;
    }
    to {
        stroke-width: 7;
        opacity: 1;
    }
}

@media (max-width: 900px) {
    body {
        padding: 16px;
    }

    .game-container {
        padding: 20px;
    }

    .stats {
        grid-template-columns: 1fr;
    }

    .controls {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .main-btn {
        justify-self: center;
    }

    .secondary-controls,
    .sound-controls,
    .bet-controls {
        width: 100%;
    }

    .slot-machine {
        height: 360px;
    }

    .header-content {
        align-items: start;
        flex-direction: column;
    }

    .header-side {
        width: 100%;
        align-items: stretch;
        min-width: 0;
    }

    .feature-tease {
        align-items: flex-start;
        text-align: left;
    }

    .leaderboard-shortcut-btn {
        align-items: flex-start;
        text-align: left;
    }

    .chat-card,
    .leaderboard-card,
    .replay-card {
        padding: 24px 22px 20px;
    }

    .replay-summary-grid,
    .replay-step-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .replay-grid {
        gap: 8px;
    }

    .replay-reel {
        min-height: 312px;
    }

    .replay-machine .symbol {
        height: 104px;
    }
}

@media (max-width: 640px) {
    #free-spin-replay-overlay {
        position: fixed;
        inset: 0;
        align-items: flex-start;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding:
            max(12px, env(safe-area-inset-top))
            12px
            max(12px, env(safe-area-inset-bottom));
    }

    .game-container {
        padding: 16px;
        border-radius: 22px;
    }

    .slot-machine {
        padding: 12px;
        height: 320px;
    }

    .reels-container {
        gap: 6px;
    }

    .reel-card-slot {
        left: 3px;
        right: 3px;
        padding: 3px 1px;
    }

    .reel-card-face {
        border-radius: 14px;
    }

    .symbol .icon {
        font-size: clamp(1.55rem, 5vw, 2.3rem);
    }

    .symbol .name {
        font-size: 0.6rem;
    }

    .bet-controls {
        width: 100%;
    }

    .bet-menu {
        width: 100%;
        max-width: 100%;
    }

    .sound-menu {
        width: 100%;
    }

    .bet-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sound-menu-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .chat-card {
        padding: 22px 18px 18px;
    }

    .replay-card {
        padding: 22px 18px 18px;
        width: min(100%, 560px);
        margin: 0 auto;
    }

    .chat-header,
    .leaderboard-header {
        flex-direction: column;
    }

    .chat-close-btn,
    .chat-send-btn,
    .chat-open-btn,
    .leaderboard-shortcut-btn,
    .run-start-btn {
        width: 100%;
    }

    .replay-summary-grid,
    .replay-step-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .replay-machine {
        padding: 16px 14px;
    }

    .replay-machine-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .replay-grid-viewport {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }

    .replay-grid-shell {
        width: max-content;
        min-width: 100%;
    }

    .replay-grid {
        grid-template-columns: repeat(5, 74px);
        gap: 8px;
    }

    .replay-controls {
        flex-direction: column;
    }

    .replay-controls .leaderboard-tab-btn {
        width: 100%;
    }

    .replay-reel {
        min-height: 228px;
    }

    .replay-machine .symbol {
        height: 76px;
        padding: 8px 4px;
    }

    .chat-form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .chat-message.own {
        margin-left: 0;
    }
}

@media (max-width: 420px) {
    #free-spin-replay-overlay {
        padding:
            max(10px, env(safe-area-inset-top))
            10px
            max(10px, env(safe-area-inset-bottom));
    }

    .replay-card {
        padding: 20px 14px 16px;
    }

    .replay-grid {
        grid-template-columns: repeat(5, 68px);
        gap: 6px;
    }

    .replay-reel {
        min-height: 210px;
    }

    .replay-machine .symbol {
        height: 70px;
    }
}

/* Info Card / Slot Info Window */

.info-teaser-btn {
    position: relative;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.feature-tease-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.feature-tease-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 214, 102, 0.24), rgba(255, 214, 102, 0.08));
    border: 1px solid rgba(255, 214, 102, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.feature-tease-icon {
    width: 18px;
    height: 18px;
    color: var(--gold);
    filter: drop-shadow(0 2px 4px rgba(255, 196, 79, 0.24));
    animation: iconGlow 2.8s ease-in-out infinite;
}

.feature-tease-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
    min-width: 0;
}

.info-teaser-btn:hover,
.info-teaser-btn:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 229, 154, 0.88);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 214, 109, 0.24),
        0 14px 28px rgba(255, 212, 95, 0.14);
    filter: saturate(1.06);
}

.info-teaser-btn:hover .feature-tease-icon-wrapper {
    background: linear-gradient(135deg, rgba(255, 214, 102, 0.32), rgba(255, 214, 102, 0.16));
    border-color: rgba(255, 214, 102, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 12px rgba(255, 214, 102, 0.28);
}

.info-teaser-btn:focus-visible {
    outline: none;
}

.info-teaser-btn:active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(255, 214, 109, 0.22),
        0 10px 20px rgba(255, 212, 95, 0.1);
}

.info-teaser-btn:hover,
.info-teaser-btn:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 229, 154, 0.88);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 214, 109, 0.24),
        0 14px 28px rgba(255, 212, 95, 0.14);
    filter: saturate(1.06);
}

.info-teaser-btn:focus-visible {
    outline: none;
}

.info-teaser-btn:active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(255, 214, 109, 0.22),
        0 10px 20px rgba(255, 212, 95, 0.1);
}

.info-card {
    width: min(820px, 100%);
    padding: 28px 28px 24px;
    text-align: left;
    border-color: rgba(255, 214, 109, 0.26);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%),
        linear-gradient(180deg, #1b140e 0%, #0f0b08 100%);
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.44),
        0 0 34px rgba(255, 212, 95, 0.14);
}

.info-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.info-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}

.info-tab-btn {
    min-height: 42px;
    padding: 10px 12px;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--text-main);
    background: linear-gradient(180deg, #2d3650, #182033);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.2s ease;
}

.info-tab-btn.active {
    color: #1d1200;
    background: linear-gradient(180deg, #fff1af, #ffbf4f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0 0 1px rgba(255, 218, 126, 0.24);
}

.info-panel {
    display: none;
    gap: 14px;
    max-height: min(62vh, 680px);
    overflow-y: auto;
    padding-right: 8px;
    animation: fadeIn 0.24s ease-out;
}

.info-panel.active {
    display: grid;
}

@keyframes iconGlow {
    0%, 100% {
        filter: drop-shadow(0 2px 4px rgba(255, 196, 79, 0.24));
    }
    50% {
        filter: drop-shadow(0 2px 4px rgba(255, 196, 79, 0.24)) drop-shadow(0 0 8px rgba(255, 214, 102, 0.32));
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.paytable-shell {
    display: grid;
    gap: 0;
    border: 1px solid rgba(255, 219, 138, 0.18);
    border-radius: 14px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
        rgba(12, 9, 7, 0.82);
}

.paytable-grid {
    display: grid;
    gap: 0;
}

.paytable-group {
    border-bottom: 1px solid rgba(255, 219, 138, 0.12);
}

.paytable-group:last-child {
    border-bottom: none;
}

.paytable-group-label {
    padding: 12px 14px;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--accent-blue);
    background: rgba(20, 15, 10, 0.52);
    border-bottom: 1px solid rgba(255, 219, 138, 0.08);
}

.paytable-rows {
    display: grid;
    gap: 0;
}

.paytable-row {
    display: grid;
    grid-template-columns: 78px minmax(244px, auto);
    justify-content: center;
    align-items: center;
    column-gap: 24px;
    row-gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.paytable-row:last-child {
    border-bottom: none;
}

.paytable-row:has(.paytable-icon[alt="Madara"]),
.paytable-row:has(.paytable-icon[alt="Hashirama"]),
.paytable-row:has(.paytable-icon[alt="Pain"]) {
    background: linear-gradient(90deg, rgba(255, 214, 102, 0.07), transparent);
    border-left: 3px solid rgba(255, 214, 102, 0.3);
}

.paytable-row:has(.paytable-icon[alt="Madara"]) {
    background:
        linear-gradient(90deg, rgba(255, 64, 105, 0.12), transparent 68%),
        linear-gradient(90deg, rgba(255, 214, 102, 0.08), transparent);
    border-left-color: rgba(255, 214, 102, 0.48);
}

.paytable-symbol {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 64px;
    height: 56px;
    min-width: 0;
    padding: 5px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 248, 227, 0.08), transparent 40%),
        rgba(20, 18, 15, 0.92);
    border: 1px solid rgba(255, 219, 138, 0.14);
}

.paytable-symbol.low {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 0 4px 12px rgba(255, 196, 79, 0.24);
}

.paytable-symbol-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.paytable-icon {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter:
        brightness(1.08)
        saturate(1.1)
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28));
}

.paytable-low-icon {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    text-align: center;
    line-height: 1;
    background: rgba(255, 214, 102, 0.08);
    border: 1px solid rgba(255, 214, 102, 0.16);
}

.paytable-amounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(58px, 72px));
    justify-content: end;
    align-items: center;
    column-gap: 14px;
}

.paytable-amount {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    align-items: center;
    min-width: 0;
    height: 100%;
    padding: 5px 6px;
    background: transparent;
    border: none;
}

.paytable-match {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    color: var(--text-soft);
    text-transform: uppercase;
}

.paytable-payout {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 0 2px 6px rgba(255, 196, 79, 0.22);
}

.info-section {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
        rgba(20, 18, 15, 0.78);
    border: 1px solid rgba(255, 219, 138, 0.12);
}

.info-section-title {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--accent-blue);
    text-transform: uppercase;
}

.info-section-content {
    display: grid;
    gap: 10px;
}

.info-scatter-showcase {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px;
    border-radius: 10px;
    background:
        radial-gradient(circle at center, rgba(105, 235, 255, 0.2), transparent 58%),
        linear-gradient(180deg, rgba(83, 202, 255, 0.14), rgba(20, 46, 76, 0.12)),
        rgba(12, 26, 42, 0.88);
    border: 1px solid rgba(105, 235, 255, 0.28);
}

.info-banner {
    min-height: 142px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.info-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 50% 42%, rgba(105, 235, 255, 0.34), transparent 34%),
        radial-gradient(circle at 50% 84%, rgba(255, 176, 59, 0.12), transparent 42%);
}

.info-banner-chakra {
    min-height: 154px;
    background:
        radial-gradient(circle at 50% 47%, rgba(255, 128, 44, 0.24), rgba(255, 128, 44, 0.08) 34%, transparent 62%),
        radial-gradient(circle at 50% 7%, rgba(118, 194, 255, 0.16), transparent 48%),
        linear-gradient(180deg, rgba(255, 176, 76, 0.14), rgba(22, 16, 42, 0.12)),
        linear-gradient(180deg, rgba(24, 20, 48, 0.99), rgba(8, 8, 18, 0.99));
    border-color: rgba(255, 178, 92, 0.22);
    box-shadow:
        inset 0 0 0 1px rgba(255, 170, 82, 0.18),
        inset 0 0 22px rgba(255, 128, 44, 0.12),
        inset 0 -18px 22px rgba(57, 92, 180, 0.08),
        0 14px 24px rgba(0, 0, 0, 0.18);
}

.info-banner-chakra::before {
    inset: 9px;
    z-index: 0;
    border-radius: 14px;
    border: 1px solid rgba(255, 178, 92, 0.18);
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 128, 44, 0.12), transparent 58%),
        radial-gradient(circle at 50% 14%, rgba(118, 194, 255, 0.08), transparent 46%);
    box-shadow:
        inset 0 0 14px rgba(255, 128, 44, 0.1),
        0 0 12px rgba(255, 128, 44, 0.08);
}

.info-banner-chakra::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 136px;
    height: 136px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 47%, rgba(255, 128, 44, 0.24), rgba(255, 128, 44, 0.08) 34%, transparent 62%),
        radial-gradient(circle at 50% 7%, rgba(118, 194, 255, 0.16), transparent 48%),
        linear-gradient(180deg, rgba(255, 176, 76, 0.14), rgba(22, 16, 42, 0.12)),
        linear-gradient(180deg, rgba(24, 20, 48, 0.99), rgba(8, 8, 18, 0.99));
    border: 1px solid rgba(255, 178, 92, 0.22);
    box-shadow:
        inset 0 0 0 1px rgba(255, 170, 82, 0.18),
        inset 0 0 18px rgba(255, 128, 44, 0.12),
        inset 0 -14px 18px rgba(57, 92, 180, 0.08),
        0 14px 28px rgba(0, 0, 0, 0.28),
        0 0 20px rgba(255, 128, 44, 0.08);
}

.info-scatter-icon {
    position: relative;
    z-index: 2;
    display: block;
    width: 108px;
    height: 108px;
    object-fit: contain;
    filter:
        brightness(1.12)
        saturate(1.18)
        contrast(1.1)
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 16px rgba(255, 160, 58, 0.26))
        drop-shadow(0 0 10px rgba(255, 214, 102, 0.16));
}

.info-copy {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.58;
    color: var(--text-soft);
}

.info-copy strong {
    color: var(--gold);
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(255, 196, 79, 0.2);
}

.info-miss-note {
    padding: 9px 10px;
    border-radius: 10px;
    color: rgba(224, 247, 255, 0.88);
    background:
        linear-gradient(90deg, rgba(116, 232, 255, 0.12), rgba(255, 139, 46, 0.08), transparent),
        rgba(8, 18, 32, 0.62);
    border: 1px solid rgba(116, 232, 255, 0.2);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 8px 18px rgba(0, 0, 0, 0.12);
}

.info-miss-note strong {
    color: var(--chakra-cyan, var(--accent-blue));
    text-shadow: 0 0 10px rgba(116, 232, 255, 0.24);
}

.character-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.character-info-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    min-height: 142px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255, 219, 138, 0.13);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 100%),
        rgba(10, 14, 24, 0.78);
}

.character-info-banner {
    position: relative;
    display: grid;
    place-items: end center;
    min-height: 142px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 214, 102, 0.18), transparent 54%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%);
}

.character-info-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.12), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 62%);
}

.character-info-banner img {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    max-width: 112%;
    max-height: 138px;
    object-fit: contain;
    filter:
        drop-shadow(0 12px 16px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 14px rgba(255, 214, 102, 0.08));
}

.character-info-copy {
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 14px 14px 14px 12px;
}

.character-info-copy h3 {
    margin: 0;
    color: #fff2c0;
    font-size: 0.98rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.character-info-copy p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.8rem;
    line-height: 1.48;
}

.character-info-copy strong {
    color: var(--gold);
    font-weight: 800;
}

.character-info-naruto .character-info-banner {
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 180, 66, 0.26), transparent 52%),
        linear-gradient(180deg, rgba(78, 206, 255, 0.1), rgba(35, 19, 8, 0.82));
}

.character-info-kakashi .character-info-banner {
    background:
        radial-gradient(circle at 50% 30%, rgba(120, 226, 255, 0.3), transparent 54%),
        linear-gradient(180deg, rgba(198, 237, 255, 0.1), rgba(8, 22, 36, 0.84));
}

.character-info-sasuke .character-info-banner {
    background:
        radial-gradient(circle at 50% 30%, rgba(142, 108, 255, 0.28), transparent 54%),
        linear-gradient(180deg, rgba(98, 128, 255, 0.12), rgba(16, 12, 36, 0.86));
}

.character-info-itachi .character-info-banner {
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 69, 96, 0.3), transparent 54%),
        linear-gradient(180deg, rgba(255, 214, 102, 0.08), rgba(35, 8, 12, 0.88));
}

.info-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.info-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(15, 20, 31, 0.82);
    border: 1px solid rgba(255, 219, 138, 0.14);
}

.info-stat-label {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    color: var(--accent-blue);
}

.info-stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 0 3px 8px rgba(255, 196, 79, 0.22);
}

/* Scrollbar Styling für Info Panel */
.info-panel::-webkit-scrollbar {
    width: 6px;
}

.info-panel::-webkit-scrollbar-track {
    background: rgba(255, 219, 138, 0.06);
    border-radius: 3px;
}

.info-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 214, 109, 0.48);
    border-radius: 3px;
}

.info-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 214, 109, 0.72);
}

/* Responsive Info Card */
@media (max-width: 768px) {
    .info-card {
        width: min(90vw, 100%);
        padding: 22px 18px 18px;
    }

    .paytable-row {
        grid-template-columns: 66px minmax(192px, auto);
        column-gap: 16px;
        row-gap: 10px;
    }

    .paytable-symbol {
        width: 58px;
    }

    .paytable-amounts {
        grid-template-columns: repeat(3, minmax(48px, 56px));
        column-gap: 10px;
    }

    .paytable-amount {
        gap: 4px;
        padding: 6px 7px;
    }

    .paytable-match {
        font-size: 0.62rem;
    }

    .paytable-payout {
        font-size: 0.88rem;
    }

    .info-scatter-icon {
        width: 96px;
        height: 96px;
    }

    .info-banner-chakra::after {
        width: 122px;
        height: 122px;
    }

    .info-copy {
        font-size: 0.82rem;
    }

    .character-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .info-card {
        width: min(calc(100vw - 28px), 100%);
        padding: 18px 14px 14px;
    }

    .info-header {
        gap: 12px;
        margin-bottom: 14px;
    }

    .info-header h2 {
        font-size: 1.6rem;
    }

    .info-tabs {
        margin-bottom: 14px;
    }

    .info-tab-btn {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 0.82rem;
    }

    .paytable-symbol {
        width: 46px;
        gap: 0;
        height: 48px;
        padding: 4px;
    }

    .paytable-row {
        grid-template-columns: 50px minmax(138px, auto);
        column-gap: 8px;
        row-gap: 8px;
    }

    .paytable-amounts {
        grid-template-columns: repeat(3, minmax(38px, 42px));
        column-gap: 5px;
    }

    .paytable-row {
        padding: 10px 10px;
    }

    .paytable-icon {
        width: 40px;
        height: 40px;
    }

    .paytable-low-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .paytable-symbol-name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .paytable-amount {
        padding: 5px 4px;
    }

    .paytable-match {
        font-size: 0.58rem;
    }

    .paytable-payout {
        font-size: 0.78rem;
    }

    .info-section {
        padding: 10px 12px;
        gap: 8px;
    }

    .info-section-title {
        font-size: 0.68rem;
    }

    .info-scatter-showcase {
        padding: 10px;
    }

    .info-scatter-icon {
        width: 82px;
        height: 82px;
    }

    .info-banner-chakra {
        min-height: 134px;
    }

    .info-banner-chakra::after {
        width: 106px;
        height: 106px;
    }

    .info-copy {
        font-size: 0.78rem;
        line-height: 1.5;
    }

    .info-stat {
        padding: 8px 10px;
        gap: 4px;
    }

    .info-stat-label {
        font-size: 0.64rem;
    }

    .info-stat-value {
        font-size: 1rem;
    }

    .character-info-card {
        grid-template-columns: 88px minmax(0, 1fr);
        min-height: 128px;
    }

    .character-info-banner {
        min-height: 128px;
    }

    .character-info-banner img {
        max-height: 124px;
    }

    .character-info-copy {
        padding: 12px 12px 12px 10px;
    }

    .character-info-copy h3 {
        font-size: 0.86rem;
    }

    .character-info-copy p {
        font-size: 0.74rem;
        line-height: 1.42;
    }
}

/* Hotkeys Configuration Panel */
.hotkeys-info-text {
    font-size: 0.82rem;
    color: var(--text-soft);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.hotkeys-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.hotkeys-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(20, 18, 15, 0.5);
    border: 1px solid rgba(255, 219, 138, 0.1);
    transition: all 0.2s ease;
}

.hotkeys-row:hover {
    background: rgba(20, 18, 15, 0.7);
    border-color: rgba(255, 219, 138, 0.18);
}

.hotkeys-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-main);
    text-transform: uppercase;
}

.hotkeys-key-display {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent-blue);
    background: rgba(122, 217, 210, 0.12);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(122, 217, 210, 0.24);
    text-align: center;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Trebuchet MS", monospace;
}

.hotkey-edit-btn {
    min-height: 32px;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #1d1200;
    background: linear-gradient(180deg, #ffd45f, #ffbf4f);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hotkey-edit-btn:hover {
    background: linear-gradient(180deg, #fff1af, #ffc857);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 12px rgba(255, 212, 95, 0.2);
    transform: translateY(-1px);
}

.hotkey-edit-btn:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hotkey-reset-btn {
    width: 100%;
    min-height: 38px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-main);
    background: linear-gradient(180deg, rgba(255, 123, 86, 0.16), rgba(255, 123, 86, 0.08));
    border: 1px solid rgba(255, 123, 86, 0.28);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hotkey-reset-btn:hover {
    background: linear-gradient(180deg, rgba(255, 123, 86, 0.24), rgba(255, 123, 86, 0.12));
    border-color: rgba(255, 123, 86, 0.42);
    box-shadow: 0 0 12px rgba(255, 123, 86, 0.12);
}

.hotkey-reset-btn:active {
    transform: scale(0.98);
}

/* Hotkeys Listener Overlay */
.hotkey-listener-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.hotkey-listener-modal {
    background: linear-gradient(180deg, #1b140e 0%, #0f0b08 100%);
    border: 1px solid rgba(255, 214, 109, 0.26);
    border-radius: 16px;
    padding: 28px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.55);
}

.hotkey-listener-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 12px;
}

.hotkey-listener-label {
    font-size: 0.88rem;
    color: var(--accent-blue);
    margin-bottom: 16px;
    font-weight: 600;
}

.hotkey-listener-key {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
    font-family: "Trebuchet MS", monospace;
    margin: 16px 0;
    padding: 12px;
    background: rgba(255, 214, 102, 0.1);
    border-radius: 10px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hotkey-listener-hint {
    font-size: 0.72rem;
    color: var(--text-soft);
    margin-top: 16px;
    line-height: 1.4;
}

.hotkey-listener-cancel {
    margin-top: 16px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-main);
    background: rgba(255, 123, 86, 0.2);
    border: 1px solid rgba(255, 123, 86, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hotkey-listener-cancel:hover {
    background: rgba(255, 123, 86, 0.3);
    border-color: rgba(255, 123, 86, 0.5);
}

/* Mobile/Tablet adjustments for hotkeys */
@media (max-width: 768px) {
    .hotkeys-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

@media (max-width: 520px) {
    .hotkeys-row {
        padding: 10px 12px;
        gap: 8px;
    }

    .hotkeys-label {
        font-size: 0.72rem;
    }

    .hotkey-edit-btn {
        min-height: 30px;
        padding: 6px 10px;
        font-size: 0.68rem;
    }

    .hotkey-reset-btn {
        min-height: 36px;
        font-size: 0.72rem;
    }

    .hotkey-listener-modal {
        padding: 20px;
        max-width: 90vw;
    }

    .hotkey-listener-key {
        font-size: 1.6rem;
        min-height: 50px;
    }
}

/* Hotkey listener modal overlay */
.hotkey-listener-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.6);
}

.hotkey-listener-modal.hidden {
    display: none;
}

.hotkey-listener-modal:not(.hidden) {
    display: flex;
}

.hotkey-listener-content {
    background: linear-gradient(180deg, #1b140e 0%, #0f0b08 100%);
    border: 1px solid rgba(255, 214, 109, 0.26);
    border-radius: 16px;
    padding: 28px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.55);
}

.hotkey-listener-prompt {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: 16px;
    margin-top: 0;
}

.hotkey-listener-hint {
    font-size: 0.78rem;
    color: var(--text-soft);
    margin-top: 16px;
    margin-bottom: 0;
    line-height: 1.4;
}

/* Naruto / Shinobi visual theme layer */
:root {
    --bg-top: #050b16;
    --bg-bottom: #0b0711;
    --cabinet-top: #172235;
    --cabinet-bottom: #080b12;
    --panel-bg: rgba(7, 13, 24, 0.9);
    --panel-border: rgba(104, 228, 255, 0.26);
    --gold: #ffd36a;
    --gold-deep: #b87418;
    --highlight: #ff8b2e;
    --accent-blue: #74e8ff;
    --text-main: #f5fbff;
    --text-soft: #b7c8d8;
    --danger: #ff5f73;
    --chakra-cyan: #74e8ff;
    --chakra-cyan-soft: rgba(116, 232, 255, 0.16);
    --chakra-cyan-faint: rgba(116, 232, 255, 0.08);
    --ninja-orange: #ff8b2e;
    --ninja-orange-soft: rgba(255, 139, 46, 0.16);
    --shinobi-violet: #7c6dff;
    --sharingan-red: #ff465f;
    --ink-panel: rgba(5, 9, 17, 0.92);
    --steel-panel: rgba(19, 30, 47, 0.92);
}

body {
    color: var(--text-main);
    background:
        linear-gradient(125deg, rgba(116, 232, 255, 0.12) 0%, transparent 28%),
        linear-gradient(235deg, rgba(255, 139, 46, 0.13) 0%, transparent 34%),
        repeating-linear-gradient(135deg, rgba(116, 232, 255, 0.035) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 72px),
        linear-gradient(180deg, var(--bg-top) 0%, #0c1322 46%, var(--bg-bottom) 100%);
}

body::before {
    opacity: 0.26;
    background-image:
        repeating-linear-gradient(90deg, rgba(116, 232, 255, 0.055) 0 10px, transparent 10px 34px),
        repeating-linear-gradient(0deg, rgba(255, 139, 46, 0.04) 0 1px, transparent 1px 32px);
    background-size: 220px 32px, 32px 32px;
    mix-blend-mode: screen;
}

body::after {
    top: auto;
    bottom: -22vh;
    left: 0;
    width: 100%;
    height: 44vh;
    transform: none;
    opacity: 0.34;
    background:
        linear-gradient(90deg, transparent, rgba(116, 232, 255, 0.14), transparent),
        linear-gradient(0deg, rgba(255, 139, 46, 0.09), transparent);
    filter: blur(18px);
}

.game-container {
    border-color: rgba(116, 232, 255, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 18%),
        linear-gradient(120deg, rgba(116, 232, 255, 0.09), transparent 32%),
        linear-gradient(238deg, rgba(255, 139, 46, 0.08), transparent 38%),
        repeating-linear-gradient(90deg, rgba(116, 232, 255, 0.032) 0 26px, transparent 26px 52px),
        linear-gradient(180deg, var(--cabinet-top) 0%, var(--cabinet-bottom) 100%);
    box-shadow:
        0 30px 96px rgba(0, 0, 0, 0.62),
        0 0 46px rgba(65, 207, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -28px 62px rgba(0, 0, 0, 0.48);
}

.game-container::before,
.game-container::after {
    height: 6px;
    background:
        linear-gradient(90deg, transparent, rgba(116, 232, 255, 0.78), rgba(255, 139, 46, 0.5), transparent),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 12px, transparent 12px 30px);
    opacity: 0.84;
}

.game-container.fs-mode {
    border-color: rgba(255, 70, 95, 0.64);
    box-shadow:
        0 30px 96px rgba(0, 0, 0, 0.66),
        0 0 48px rgba(255, 70, 95, 0.22),
        0 0 34px rgba(116, 232, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-container.autoplay-mode,
.game-container.run-mode {
    border-color: rgba(116, 232, 255, 0.44);
    box-shadow:
        0 30px 96px rgba(0, 0, 0, 0.6),
        0 0 32px rgba(116, 232, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.title-cartouche {
    border-color: rgba(116, 232, 255, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 28%),
        linear-gradient(120deg, rgba(116, 232, 255, 0.12), transparent 48%),
        linear-gradient(180deg, rgba(18, 30, 50, 0.96) 0%, rgba(5, 8, 16, 0.97) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -18px 34px rgba(0, 0, 0, 0.28),
        0 14px 34px rgba(0, 0, 0, 0.34),
        0 0 28px rgba(116, 232, 255, 0.11);
}

.title-cartouche::before {
    border-color: rgba(116, 232, 255, 0.14);
}

.title-cartouche::after,
.feature-tease::after {
    background:
        linear-gradient(90deg, transparent, rgba(116, 232, 255, 0.78), rgba(255, 139, 46, 0.82), transparent),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 14px, transparent 14px 28px);
}

header h1,
.title-logo-suffix {
    background: linear-gradient(180deg, #ffffff 0%, #d8f8ff 34%, #ffd36a 72%, #ff8b2e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 10px 28px rgba(116, 232, 255, 0.16);
}

.title-logo {
    filter:
        drop-shadow(0 8px 20px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 16px rgba(255, 139, 46, 0.18))
        drop-shadow(0 0 12px rgba(116, 232, 255, 0.1));
}

.eyebrow,
.feature-tease-label,
.bet-menu-title,
.chat-menu-label,
.chat-profile-label,
.replay-summary-label,
.replay-step-label,
.replay-head-label,
.result-label,
.hotkey-listener-prompt {
    color: var(--chakra-cyan);
    text-shadow: 0 0 12px rgba(116, 232, 255, 0.16);
}

.feature-tease,
.leaderboard-shortcut-btn,
.stat-box,
.status-strip,
.bet-controls,
.secondary-controls,
.sound-controls {
    border-color: var(--panel-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 54%),
        linear-gradient(120deg, rgba(116, 232, 255, 0.08), transparent 62%),
        linear-gradient(180deg, rgba(19, 30, 47, 0.86), rgba(5, 9, 17, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.075),
        0 10px 24px rgba(0, 0, 0, 0.22);
}

.leaderboard-shortcut-btn {
    border-color: rgba(255, 211, 106, 0.36);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(125deg, rgba(255, 139, 46, 0.13), transparent 42%),
        linear-gradient(180deg, rgba(31, 40, 61, 0.96), rgba(8, 11, 18, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        inset 0 0 0 1px rgba(116, 232, 255, 0.08),
        0 12px 28px rgba(0, 0, 0, 0.3),
        0 0 24px rgba(255, 139, 46, 0.12);
}

.leaderboard-shortcut-btn:hover,
.leaderboard-shortcut-btn:focus-visible,
.info-teaser-btn:hover,
.info-teaser-btn:focus-visible {
    border-color: rgba(116, 232, 255, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 16px 32px rgba(0, 0, 0, 0.32),
        0 0 28px rgba(116, 232, 255, 0.18),
        0 0 20px rgba(255, 139, 46, 0.1);
}

.feature-tease-value,
.leaderboard-shortcut-copy,
.stat-value,
.bet-selector-value,
.sound-slider-value,
.msg-display,
.charge-display.is-charged {
    color: var(--gold);
    text-shadow:
        0 0 12px rgba(255, 211, 106, 0.22),
        0 0 10px rgba(116, 232, 255, 0.06);
}

.stat-label,
.bet-selector-label,
.run-input-label,
.leaderboard-copy,
.run-hint-copy,
.hotkey-listener-hint {
    color: var(--text-soft);
}

.win-box::after {
    background:
        linear-gradient(135deg, transparent, rgba(116, 232, 255, 0.18), rgba(255, 139, 46, 0.12), transparent);
}

.slot-machine,
.replay-machine {
    border-color: rgba(116, 232, 255, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 28%),
        linear-gradient(125deg, rgba(116, 232, 255, 0.08), transparent 48%),
        linear-gradient(235deg, rgba(124, 109, 255, 0.07), transparent 50%),
        linear-gradient(180deg, #0c1728 0%, #050810 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.045),
        inset 0 28px 52px rgba(116, 232, 255, 0.04),
        inset 0 -34px 46px rgba(0, 0, 0, 0.58),
        0 20px 44px rgba(0, 0, 0, 0.38),
        0 0 26px rgba(116, 232, 255, 0.08);
}

.slot-machine::before {
    height: 10px;
    opacity: 0.42;
    background:
        linear-gradient(180deg, rgba(2, 6, 12, 0.8), rgba(2, 11, 20, 0.18), transparent);
}

.slot-machine::after {
    height: 10px;
    opacity: 0.42;
    background:
        linear-gradient(0deg, rgba(2, 6, 12, 0.82), rgba(2, 11, 20, 0.16), transparent);
}

.reel,
.replay-reel {
    border-color: rgba(116, 232, 255, 0.16);
    background:
        linear-gradient(135deg, rgba(116, 232, 255, 0.05), transparent 45%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 28%),
        linear-gradient(180deg, #101a2b 0%, #050913 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 12px 24px rgba(116, 232, 255, 0.035),
        inset 0 -18px 32px rgba(0, 0, 0, 0.54),
        inset -8px 0 16px rgba(0, 0, 0, 0.24),
        0 8px 20px rgba(0, 0, 0, 0.34);
}

.reel::before,
.reel::after {
    height: 6px;
    opacity: 0.5;
}

.reel.spinning {
    filter: saturate(1.18) brightness(1.02);
    box-shadow:
        inset 0 0 0 1px rgba(116, 232, 255, 0.08),
        inset 0 22px 34px rgba(0, 0, 0, 0.52),
        inset 0 -22px 34px rgba(0, 0, 0, 0.56),
        0 10px 24px rgba(0, 0, 0, 0.38),
        0 0 20px rgba(116, 232, 255, 0.08);
}

#win-lines-container path,
.replay-lines path {
    filter:
        drop-shadow(0 0 7px rgba(116, 232, 255, 0.34))
        drop-shadow(0 0 9px rgba(255, 211, 106, 0.24));
}

#win-lines-container.itachi-line-preview svg.itachi-preview-line path,
.replay-lines.itachi-line-preview svg.itachi-preview-line path {
    filter:
        drop-shadow(0 0 8px rgba(255, 70, 95, 0.56))
        drop-shadow(0 0 14px rgba(116, 232, 255, 0.18));
}

.status-strip {
    border-color: rgba(116, 232, 255, 0.22);
    background:
        linear-gradient(90deg, rgba(116, 232, 255, 0.08), transparent 28%, rgba(255, 139, 46, 0.06)),
        var(--panel-bg);
}

.bet-selector-btn,
.sound-selector-btn,
.run-username-input,
.extras-number-input,
.chat-profile-input,
.chat-input {
    color: var(--text-main);
    border-color: rgba(116, 232, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 55%),
        linear-gradient(180deg, #101b2c, #070b13);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.075),
        0 10px 20px rgba(0, 0, 0, 0.22);
}

.bet-selector-btn[aria-expanded="true"],
.sound-selector-btn[aria-expanded="true"],
.chat-profile-input:focus,
.chat-input:focus,
.extras-number-input:focus {
    border-color: rgba(116, 232, 255, 0.46);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(116, 232, 255, 0.22),
        0 10px 24px rgba(116, 232, 255, 0.12);
}

.bet-menu,
.sound-menu,
.overlay-content,
.chat-card,
.leaderboard-card,
.replay-card,
.hotkey-listener-content {
    border-color: rgba(116, 232, 255, 0.28);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 34%),
        linear-gradient(125deg, rgba(116, 232, 255, 0.07), transparent 44%),
        linear-gradient(180deg, rgba(13, 24, 42, 0.98), rgba(5, 8, 15, 0.98));
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.48),
        0 0 34px rgba(116, 232, 255, 0.12),
        0 0 22px rgba(255, 139, 46, 0.06);
}

.super-spin-intro-card {
    border-color: rgba(116, 232, 255, 0.48);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 38%),
        linear-gradient(125deg, rgba(116, 232, 255, 0.16), transparent 48%),
        linear-gradient(235deg, rgba(255, 70, 95, 0.12), transparent 54%),
        linear-gradient(180deg, #101c30 0%, #050813 100%);
}

.result-card {
    border-color: rgba(255, 211, 106, 0.32);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.065), transparent 34%),
        linear-gradient(130deg, rgba(255, 139, 46, 0.09), transparent 48%),
        linear-gradient(180deg, #151b29 0%, #070a12 100%);
}

.result-card.result-big {
    border-color: rgba(116, 232, 255, 0.52);
    box-shadow:
        0 26px 56px rgba(0, 0, 0, 0.46),
        0 0 46px rgba(116, 232, 255, 0.2),
        0 0 28px rgba(255, 211, 106, 0.18);
}

.result-card.result-jackpot {
    border-color: rgba(255, 70, 95, 0.7);
    box-shadow:
        0 28px 62px rgba(0, 0, 0, 0.48),
        0 0 56px rgba(255, 70, 95, 0.26),
        0 0 34px rgba(116, 232, 255, 0.24),
        0 0 24px rgba(255, 211, 106, 0.16);
}

.overlay-content h2 {
    color: #effbff;
    text-shadow:
        0 0 20px rgba(116, 232, 255, 0.18),
        0 0 16px rgba(255, 139, 46, 0.1);
}

#fs-award-count {
    color: #ffd36a;
    text-shadow: 0 0 12px rgba(255, 139, 46, 0.18);
}

.overlay-copy,
.result-copy,
.chat-menu-copy,
.sound-slider-label,
.chat-message-body,
.chat-char-count,
.chat-empty-state,
.chat-connection-note {
    color: #d8e5ee;
}

.result-amount {
    color: #ffffff;
    text-shadow:
        0 0 22px rgba(116, 232, 255, 0.22),
        0 0 18px rgba(255, 211, 106, 0.22);
}

.result-card.result-big .result-amount {
    text-shadow:
        0 0 24px rgba(116, 232, 255, 0.32),
        0 0 18px rgba(255, 211, 106, 0.24);
}

.result-card.result-jackpot .result-amount {
    text-shadow:
        0 0 32px rgba(255, 70, 95, 0.36),
        0 0 24px rgba(116, 232, 255, 0.3),
        0 0 20px rgba(255, 211, 106, 0.22);
}

.main-btn {
    position: relative;
    color: #170d02;
    background:
        conic-gradient(from 28deg, #ff9a30, #ffd36a, #fff0b2, #ffc34d, #ff7a22, #ff9a30);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.48),
        inset 0 -12px 18px rgba(118, 57, 3, 0.24),
        0 12px 0 #80460c,
        0 24px 40px rgba(0, 0, 0, 0.38),
        0 0 28px rgba(255, 139, 46, 0.18);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26);
}

.main-btn::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: inherit;
    border: 1px solid rgba(7, 12, 20, 0.22);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.1),
        0 0 18px rgba(116, 232, 255, 0.12);
    pointer-events: none;
}

.main-btn::after {
    content: "";
    position: absolute;
    inset: 26px;
    border-radius: inherit;
    border: 2px solid rgba(23, 13, 2, 0.16);
    transform: rotate(45deg);
    pointer-events: none;
}

.main-btn:active {
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.44),
        inset 0 -8px 16px rgba(118, 57, 3, 0.22),
        0 6px 0 #80460c,
        0 16px 28px rgba(0, 0, 0, 0.3);
}

.secondary-btn,
.bet-menu-tab-btn,
.bet-option-btn,
.sound-tab-btn,
.visual-mode-btn,
.sound-power-btn.active,
.sound-toggle-btn.active,
.chat-close-btn,
.leaderboard-tab-btn {
    color: var(--text-main);
    background: linear-gradient(180deg, #1c2c45, #0a1221);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(116, 232, 255, 0.08);
}

.secondary-btn.active,
.bet-menu-tab-btn.active,
.bet-option-btn.active,
.sound-tab-btn.active,
.visual-mode-btn.active,
.sound-power-btn,
.sound-toggle-btn,
.run-start-btn,
.chat-open-btn,
.chat-send-btn,
.leaderboard-tab-btn.active,
.leaderboard-replay-btn,
#fs-start-btn,
#fs-result-btn {
    color: #160d03;
    background:
        linear-gradient(180deg, #fff2b8, #ffd36a 42%, #ff9a30 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        0 10px 22px rgba(255, 139, 46, 0.18),
        0 0 0 1px rgba(255, 211, 106, 0.2);
}

.sound-slider,
.sound-slider::-webkit-slider-runnable-track,
.sound-slider::-moz-range-track {
    background: linear-gradient(90deg, rgba(116, 232, 255, 0.78), rgba(124, 109, 255, 0.72), rgba(255, 139, 46, 0.78));
}

.sound-slider::-webkit-slider-thumb,
.sound-slider::-moz-range-thumb {
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #74e8ff 44%, #2d8fb6 100%);
    border-color: rgba(236, 252, 255, 0.92);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(116, 232, 255, 0.32);
}

.leaderboard-table-shell,
.replay-summary-pill,
.replay-step-stat,
.chat-menu-summary,
.chat-messages,
.chat-message,
.chat-message.own {
    border-color: rgba(116, 232, 255, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
        rgba(6, 11, 21, 0.88);
}

.leaderboard-table th {
    color: var(--chakra-cyan);
    background: linear-gradient(180deg, rgba(17, 31, 52, 0.98), rgba(5, 8, 15, 0.98));
}

.leaderboard-table td,
.replay-summary-value,
.replay-step-value,
.replay-head-value,
.chat-menu-username,
.chat-message-name {
    color: #fff3cc;
}

.chat-status-pill {
    background: linear-gradient(180deg, #31415f, #142238);
}

.chat-status-pill[data-state="connected"] {
    color: #061b1d;
    background: linear-gradient(180deg, #a8fbff, #55ddee);
}

.chat-status-pill[data-state="loading"] {
    color: #170d03;
    background: linear-gradient(180deg, #ffe6a1, #ff9a30);
}

.chat-status-pill[data-state="error"],
.chat-status-pill[data-state="disabled"],
.chat-menu-unread {
    color: #fff4f5;
    background: linear-gradient(180deg, #ff7d89, #c9324b);
}

.super-spin-character-card {
    border-color: rgba(116, 232, 255, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 100%),
        linear-gradient(130deg, rgba(116, 232, 255, 0.1), transparent 58%),
        rgba(5, 10, 21, 0.86);
}

.super-spin-character-card.tier-2 {
    border-color: rgba(255, 211, 106, 0.36);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 28px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 211, 106, 0.14);
}

.super-spin-character-card.tier-3 {
    border-color: rgba(255, 70, 95, 0.46);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 18px 32px rgba(0, 0, 0, 0.34),
        0 0 24px rgba(255, 70, 95, 0.18),
        0 0 20px rgba(116, 232, 255, 0.12);
}

.super-spin-character-image,
.result-character {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
        linear-gradient(135deg, rgba(116, 232, 255, 0.12), transparent 60%);
}

.super-spin-character-name {
    color: #f6fbff;
}

.super-spin-character-tier.tier-1 {
    color: #9ff3ff;
}

.super-spin-character-tier.tier-2 {
    color: #ffd36a;
}

.super-spin-character-tier.tier-3 {
    color: #ffd66d;
    text-shadow:
        0 0 4px rgba(255, 248, 204, 0.72),
        0 0 12px rgba(255, 198, 74, 0.58),
        0 0 18px rgba(255, 70, 95, 0.62),
        0 0 30px rgba(156, 22, 38, 0.42);
}

.confetti,
.replay-confetti {
    box-shadow:
        0 0 10px rgba(116, 232, 255, 0.22),
        0 0 8px rgba(255, 139, 46, 0.16);
}

.win-meter-active,
.win-regular,
.win-big {
    color: #f7fdff;
    text-shadow:
        0 0 16px rgba(116, 232, 255, 0.18),
        0 0 12px rgba(255, 211, 106, 0.18);
}

.win-small {
    color: #ffd36a;
}

.win-jackpot {
    color: #ffffff;
    text-shadow:
        0 0 26px rgba(255, 70, 95, 0.34),
        0 0 22px rgba(116, 232, 255, 0.28),
        0 0 18px rgba(255, 211, 106, 0.22);
}