.okey-demo {
    --okey-felt: #0d4a38;
    --okey-felt-edge: #083226;
    --okey-wood: #c9a15b;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    height: 100%;
    min-height: 420px;
    padding: 10px;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 50% 40%, #14684f 0%, var(--okey-felt) 58%, var(--okey-felt-edge) 100%);
    color: #f4efe4;
    overflow: hidden;
    position: relative;
    box-shadow:
        inset 0 0 0 2px rgba(240, 201, 107, 0.45),
        inset 0 0 40px rgba(0, 0, 0, 0.35);
}

.okey-demo *,
.okey-demo *::before,
.okey-demo *::after {
    box-sizing: border-box;
}

.okey-demo__banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.okey-demo__rule {
    opacity: 0.8;
    font-weight: 500;
}

.okey-demo__table {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.okey-demo__mid {
    display: grid;
    grid-template-columns: minmax(52px, 18%) 1fr minmax(52px, 18%);
    gap: 8px;
    min-height: 150px;
    align-items: center;
}

.okey-demo__seat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.okey-demo__seat.is-turn .okey-demo__seat-name {
    color: #f0c96b;
}

.okey-demo__seat-name {
    font-size: 11px;
    opacity: 0.85;
    white-space: nowrap;
}

.okey-demo__center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.okey-demo__okey {
    width: 100%;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.04em;
}

.okey-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 4px 1px;
    border-radius: 50%;
    vertical-align: middle;
}

.okey-dot--c0 { background: #f0c020; }
.okey-dot--c1 { background: #d43a3a; }
.okey-dot--c2 { background: #1c1c22; box-shadow: 0 0 0 1px #fff3; }
.okey-dot--c3 { background: #2b6fe0; }

.okey-demo__rack {
    display: flex;
    justify-content: center;
    gap: 2px;
    max-width: 100%;
    overflow: hidden;
}

.okey-demo__rack--npc .okey-tile--back {
    width: 16px;
    height: 22px;
    border-radius: 3px;
}

.okey-demo__rack--v {
    flex-wrap: wrap;
    max-height: 72px;
}

.okey-demo__status {
    margin: 0;
    min-height: 18px;
    text-align: center;
    font-size: 13px;
}

.okey-demo__hand {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 4px;
    padding: 6px 2px 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.okey-demo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.okey-btn {
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 8px 12px;
    background: #f0c96b;
    color: #2a1d04;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.okey-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.okey-btn--ghost {
    background: rgba(255, 255, 255, 0.12);
    color: #f4efe4;
}

.okey-btn--accent {
    background: #3ad09a;
    color: #06281c;
}

.okey-tile {
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 50px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    background: linear-gradient(180deg, #fffdf6, #efe6cf);
    box-shadow: 0 1px 0 #fff8, 0 2px 4px rgba(0, 0, 0, 0.28);
    color: inherit;
    cursor: pointer;
}

.okey-tile__num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.okey-tile--c0 { color: #c49200; }
.okey-tile--c1 { color: #c42828; }
.okey-tile--c2 { color: #16161c; }
.okey-tile--c3 { color: #1d57c7; }

.okey-tile--joker {
    background: linear-gradient(180deg, #fff4c2, #f0c96b);
    color: #7a3b00;
}

.okey-tile--fake {
    background: linear-gradient(180deg, #fff, #e8e4d8);
    color: #7a3b00;
}

.okey-tile--back,
.okey-pile .okey-tile--back {
    background:
        repeating-linear-gradient(45deg, #8b1d2c 0 4px, #6d1320 4px 8px);
    border-color: #4a0d16;
    cursor: inherit;
}

.okey-tile--empty {
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.25);
    box-shadow: none;
    cursor: default;
}

.okey-tile--indicator {
    cursor: default;
    outline: 2px solid var(--okey-wood);
}

.okey-tile.is-selected,
.okey-tile.is-hot {
    transform: translateY(-6px);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.35);
}

.okey-tile--discard.is-hot {
    box-shadow: 0 0 0 2px #f0c96b, 0 8px 14px rgba(0, 0, 0, 0.35);
}

.okey-pile {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.okey-pile:disabled {
    cursor: default;
    opacity: 0.7;
}

.okey-pile.is-hot .okey-tile--back {
    box-shadow: 0 0 0 2px #f0c96b;
}

.okey-pile__label {
    font-size: 10px;
    opacity: 0.85;
}

@media (min-width: 1024px) {
    .okey-demo {
        min-height: 480px;
        padding: 14px;
    }

    .okey-tile {
        width: 42px;
        height: 58px;
    }

    .okey-tile__num {
        font-size: 18px;
    }

    .okey-demo__hand {
        justify-content: center;
    }
}

@media (max-width: 1023.98px) {
    .okey-demo {
        min-height: 460px;
        max-height: none;
    }

    .okey-demo__rack--npc .okey-tile--back {
        width: 12px;
        height: 18px;
    }

    .okey-tile {
        width: 34px;
        height: 48px;
    }
}

.play-game_root-nuFq5.is-demo-on .play-game_gameControls-nuFq5 {
    min-height: 0;
}

.play-game_root-nuFq5.is-demo-on .play-game_gameCoverImageWrapper-nuFq5,
.play-game_root-nuFq5.is-demo-on .play-game_playCard-nuFq5 {
    display: none !important;
}

.play-game_root-nuFq5.is-demo-on .play-game_gameWrapper-nuFq5 {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 460px;
    height: auto;
    flex: 1;
}

.play-game_root-nuFq5.is-demo-on .play-game_game-nuFq5 {
    position: relative;
    height: auto;
    min-height: 460px;
}

.play-game_root-nuFq5.is-demo-on .play-game_game-nuFq5 > div,
.play-game_root-nuFq5.is-demo-on .play-game_game-nuFq5 > div > div {
    height: auto;
}

.play-game_root-nuFq5:fullscreen,
.play-game_root-nuFq5:-webkit-full-screen,
.play-game_root-nuFq5.is-pseudo-fullscreen,
.play-game_root-nuFq5.is-game-fs {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    gap: 0;
    background: #071c16;
    overflow: hidden;
    box-sizing: border-box;
}

.play-game_root-nuFq5.is-pseudo-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 200;
}

.play-game_root-nuFq5.is-game-fs .play-game_header-nuFq5 {
    flex: 0 0 auto;
    padding: 8px 12px;
    background: rgba(6, 16, 14, 0.9);
    z-index: 3;
}

.play-game_root-nuFq5.is-game-fs .play-game_gameControls-nuFq5,
.play-game_root-nuFq5.is-game-fs.is-demo-on .play-game_gameControls-nuFq5,
.play-game_root-nuFq5.is-game-fs.is-demo-on .play-game_gameWrapper-nuFq5,
.play-game_root-nuFq5.is-game-fs.is-demo-on .play-game_game-nuFq5,
.play-game_root-nuFq5.is-game-fs.is-demo-on #okey-demo-mount {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    max-height: none;
    position: relative;
    overflow: hidden;
}

.play-game_root-nuFq5.is-game-fs.is-demo-on .okey-demo {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
}

.play-game_root-nuFq5.is-game-fs.is-demo-on .play-game_game-nuFq5 > .okey-demo {
    height: 100%;
}

.play-game_root-nuFq5.is-game-fs.is-demo-on .okey-demo > div {
    height: auto;
}

.play-game_root-nuFq5.is-game-fs.is-demo-on .okey-demo__table {
    flex: 1 1 auto;
    min-height: 0;
}

.play-game_root-nuFq5.is-game-fs.is-demo-on .okey-demo__hand,
.play-game_root-nuFq5.is-game-fs.is-demo-on .okey-demo__status,
.play-game_root-nuFq5.is-game-fs.is-demo-on .okey-demo__banner {
    flex-shrink: 0;
}

.play-game_root-nuFq5.is-game-fs .okey-demo__rack--npc .okey-tile--back {
    width: 14px;
    height: 20px;
}

.play-game_root-nuFq5.is-game-fs .okey-demo__hand .okey-tile,
.play-game_root-nuFq5.is-game-fs .okey-demo__wells .okey-tile,
.play-game_root-nuFq5.is-game-fs .okey-pile .okey-tile {
    width: 42px;
    height: 58px;
}

.play-game_root-nuFq5.is-game-fs .okey-demo__hand .okey-tile__num,
.play-game_root-nuFq5.is-game-fs .okey-demo__wells .okey-tile__num {
    font-size: 18px;
}

.play-game_root-nuFq5.is-game-fs .okey-demo__card {
    width: 104px;
    height: 104px;
}

@media (min-width: 1024px) {
    .play-game_root-nuFq5.is-game-fs .okey-demo__hand .okey-tile,
    .play-game_root-nuFq5.is-game-fs .okey-demo__wells .okey-tile,
    .play-game_root-nuFq5.is-game-fs .okey-pile .okey-tile {
        width: 52px;
        height: 72px;
    }

    .play-game_root-nuFq5.is-game-fs .okey-demo__hand .okey-tile__num,
    .play-game_root-nuFq5.is-game-fs .okey-demo__wells .okey-tile__num {
        font-size: 22px;
    }

    .play-game_root-nuFq5.is-game-fs .okey-demo__rack--npc .okey-tile--back {
        width: 18px;
        height: 26px;
    }
}

.play-game-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(20, 24, 32, 0.92);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
}

.play-game-toast[hidden] {
    display: none;
}

@media (max-width: 1023.98px) {
    .play-game_root-nuFq5.is-demo-on .play-game_gameControls-nuFq5 {
        overflow: visible;
    }
}

.okey-demo [data-drag] {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.okey-demo__hand {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: hidden;
}

.okey-tile.is-dragging {
    opacity: 0.3;
}

.okey-tile-ghost {
    position: fixed;
    z-index: 120;
    pointer-events: none;
    margin: 0;
    transform: translate(-50%, -60%) scale(1.06);
}

.okey-demo__hand.is-drop,
.okey-tile.is-drop {
    box-shadow: 0 0 0 2px #f0c96b;
}

.okey-demo__felt {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.4;
    filter: saturate(1.15);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 78%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 78%);
}

.okey-demo__banner,
.okey-demo__table,
.okey-demo__status,
.okey-demo__hand {
    position: relative;
    z-index: 1;
}

.okey-demo__banner {
    align-items: center;
    gap: 8px;
}

.okey-demo__room {
    color: #f6d57a;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.okey-demo__chip {
    border-radius: 999px;
    padding: 2px 8px;
    background: linear-gradient(180deg, #f0c96b, #c9922a);
    color: #2a1d04;
    font-size: 10px;
    font-weight: 800;
}

.okey-demo__center {
    flex-direction: column;
    gap: 8px;
}

.okey-demo__mascot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: -4px;
}

.okey-demo__mascot::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: 108px;
    height: 108px;
    margin-left: -54px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 40%, rgba(240, 201, 107, 0.35), transparent 62%);
    box-shadow: 0 0 28px rgba(240, 201, 107, 0.35);
    pointer-events: none;
}

.okey-demo__card {
    position: relative;
    width: 88px;
    height: 88px;
    object-fit: cover;
    object-position: center 22%;
    border-radius: 50%;
    border: 2px solid #f0c96b;
    box-shadow:
        0 0 0 3px rgba(12, 40, 28, 0.65),
        0 0 18px rgba(240, 201, 107, 0.55);
    background: #1a1208;
}

.okey-demo__card-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f6d57a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.okey-demo__wells {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.okey-demo__okey {
    width: 100%;
    padding: 3px 0 0;
    color: #f6d57a;
    font-weight: 800;
}

.okey-demo {
    background:
        radial-gradient(ellipse at 50% 8%, rgba(255, 230, 150, 0.28), transparent 42%),
        radial-gradient(ellipse at 50% 40%, #1a7a5c 0%, var(--okey-felt) 55%, #05261c 100%);
    box-shadow:
        inset 0 0 0 3px #e8c36a,
        inset 0 0 0 7px #8a5a18,
        inset 0 0 0 9px #f6d57a,
        inset 0 0 50px rgba(0, 0, 0, 0.4);
}

.okey-demo__grain,
.okey-demo__rim,
.okey-demo__spark {
    pointer-events: none;
    position: absolute;
    inset: 0;
}

.okey-demo__grain {
    opacity: 0.18;
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 4px);
    mix-blend-mode: overlay;
}

.okey-demo__rim {
    border-radius: inherit;
    box-shadow:
        inset 0 0 40px rgba(240, 201, 107, 0.12),
        inset 0 0 120px rgba(0, 0, 0, 0.35);
    animation: okey-rim 4.8s ease-in-out infinite;
}

.okey-demo__spark {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 230, 150, 0.55) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 18%, rgba(255, 230, 150, 0.45) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 62%, rgba(255, 230, 150, 0.35) 0 1px, transparent 2px),
        radial-gradient(circle at 12% 70%, rgba(255, 230, 150, 0.3) 0 1px, transparent 2px);
    animation: okey-spark 2.8s ease-in-out infinite;
}

.okey-demo__center {
    position: relative;
}

.okey-demo__plate {
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 42%;
    width: min(280px, 90%);
    height: 128px;
    transform: translate(-50%, -40%);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(240, 201, 107, 0.28), transparent 68%);
    box-shadow:
        0 0 0 1px rgba(240, 201, 107, 0.25),
        0 0 28px rgba(240, 201, 107, 0.2);
    animation: okey-plate 3.2s ease-in-out infinite;
}

.okey-demo__felt {
    opacity: 0.46;
    filter: saturate(1.25) contrast(1.05);
}

.okey-demo__seat.is-turn .okey-demo__seat-name {
    text-shadow: 0 0 10px rgba(240, 201, 107, 0.85);
    animation: okey-turn 1.2s ease-in-out infinite;
}

.okey-tile {
    border: 1px solid rgba(90, 70, 30, 0.45);
    border-radius: 6px;
    background:
        linear-gradient(165deg, #fffef8 0%, #f7eed6 42%, #e6d5a4 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -10px 12px rgba(150, 120, 50, 0.16),
        inset 0 0 0 1px rgba(240, 201, 107, 0.28),
        0 1px 0 #d9c48a,
        0 2px 0 #c4aa6a,
        0 3px 0 #9a7a38,
        0 6px 10px rgba(0, 0, 0, 0.42);
    transform: perspective(420px) rotateX(14deg);
    transform-style: preserve-3d;
}

.okey-tile__face {
    pointer-events: none;
    position: absolute;
    inset: 1px;
    border-radius: 5px;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.55), transparent 46%);
}

.okey-tile__pip {
    pointer-events: none;
    position: absolute;
    top: 4px;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.okey-tile--c0 .okey-tile__pip { background: #f0c020; }
.okey-tile--c1 .okey-tile__pip { background: #d43a3a; }
.okey-tile--c2 .okey-tile__pip { background: #1c1c22; }
.okey-tile--c3 .okey-tile__pip { background: #2b6fe0; }

.okey-tile__num {
    top: 6px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.okey-tile--joker {
    background: linear-gradient(165deg, #fff6c8, #f0c96b 60%, #c9922a);
    animation: okey-joker 1.6s ease-in-out infinite;
}

.okey-tile--joker .okey-tile__pip {
    background: #f6d57a;
    box-shadow: 0 0 8px rgba(240, 201, 107, 0.9);
}

.okey-tile--fake {
    background: linear-gradient(165deg, #fff, #efe8d6 55%, #d8c9a0);
}

.okey-tile--back,
.okey-pile .okey-tile--back {
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.12), transparent 40%),
        repeating-linear-gradient(45deg, #9a2233 0 4px, #6d1320 4px 8px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 1px 0 #5a1018,
        0 2px 0 #3d0b12,
        0 5px 8px rgba(0, 0, 0, 0.4);
}

.okey-pile .okey-tile--back {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        2px 2px 0 #5a1018,
        4px 4px 0 #3d0b12,
        6px 8px 10px rgba(0, 0, 0, 0.45);
}

.okey-tile--empty {
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.28);
    box-shadow: none;
    transform: none;
}

.okey-tile--indicator {
    outline: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 2px #f0c96b,
        0 0 14px rgba(240, 201, 107, 0.55),
        0 3px 0 #9a7a38,
        0 6px 10px rgba(0, 0, 0, 0.42);
}

.okey-demo__hand {
    gap: 6px;
    padding-top: 10px;
    perspective: 520px;
}

.okey-demo__hand .okey-tile {
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.okey-demo__hand .okey-tile.is-throwable:hover,
.okey-demo__hand .okey-tile.is-hot,
.okey-demo__hand .okey-tile.is-selected {
    transform: perspective(420px) rotateX(8deg) translateY(-10px) scale(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 10px 16px rgba(0, 0, 0, 0.4),
        0 0 0 2px rgba(240, 201, 107, 0.55);
}

.okey-tile--deal {
    animation: okey-deal 0.46s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--okey-i, 0) * 28ms);
}

.okey-tile--discard.is-land {
    animation: okey-land 0.38s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.okey-tile.is-dragging {
    opacity: 0.22;
    transform: perspective(420px) rotateX(14deg) scale(0.96);
}

.okey-tile-ghost {
    transform: translate(-50%, -68%) perspective(420px) rotateX(22deg) rotateZ(-10deg) scale(1.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 14px 22px rgba(0, 0, 0, 0.5),
        0 0 0 2px rgba(240, 201, 107, 0.45);
}

.okey-pile.is-hot .okey-tile--back,
.okey-tile--discard.is-hot {
    animation: okey-hot 1s ease-in-out infinite;
}

.okey-demo__card {
    animation: okey-card 3.4s ease-in-out infinite;
}

.okey-demo__mascot::before {
    animation: okey-glow 2.6s ease-in-out infinite;
}

@keyframes okey-deal {
    from {
        opacity: 0;
        transform: perspective(420px) rotateX(40deg) translateY(18px) scale(0.82);
    }
    to {
        opacity: 1;
        transform: perspective(420px) rotateX(14deg);
    }
}

@keyframes okey-land {
    0% { transform: perspective(420px) rotateX(40deg) translateY(-22px) scale(1.12); }
    70% { transform: perspective(420px) rotateX(10deg) translateY(3px) scale(0.98); }
    100% { transform: perspective(420px) rotateX(14deg); }
}

@keyframes okey-joker {
    50% { filter: drop-shadow(0 0 8px rgba(240, 201, 107, 0.8)); }
}

@keyframes okey-hot {
    50% { filter: drop-shadow(0 0 8px rgba(240, 201, 107, 0.9)); }
}

@keyframes okey-turn {
    50% { opacity: 1; }
}

@keyframes okey-rim {
    50% { box-shadow: inset 0 0 55px rgba(240, 201, 107, 0.22), inset 0 0 120px rgba(0, 0, 0, 0.3); }
}

@keyframes okey-spark {
    50% { opacity: 0.45; }
}

@keyframes okey-plate {
    50% { opacity: 0.7; transform: translate(-50%, -40%) scale(1.06); }
}

@keyframes okey-card {
    50% { box-shadow: 0 0 0 3px rgba(12, 40, 28, 0.65), 0 0 26px rgba(240, 201, 107, 0.85); }
}

@keyframes okey-glow {
    50% { opacity: 0.55; }
}

.okey-tile.is-hot,
.okey-tile.is-selected,
.okey-tile--discard.is-hot {
    transform: perspective(420px) rotateX(10deg) translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
    .okey-tile--deal,
    .okey-tile--discard.is-land,
    .okey-tile--joker,
    .okey-pile.is-hot .okey-tile--back,
    .okey-demo__rim,
    .okey-demo__spark,
    .okey-demo__plate,
    .okey-demo__card,
    .okey-demo__mascot::before,
    .okey-demo__seat.is-turn .okey-demo__seat-name {
        animation: none;
    }
}

@media (min-width: 1024px) {
    .okey-demo__card {
        width: 96px;
        height: 96px;
    }
}

.okey-help {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(4, 16, 12, 0.62);
}

.okey-help__card {
    width: min(360px, 100%);
    max-height: 100%;
    overflow: auto;
    padding: 16px 16px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #163d2f, #0c261d);
    border: 1px solid rgba(240, 201, 107, 0.45);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    color: #f4efe4;
}

.okey-help__photo {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 8px;
    object-fit: cover;
    object-position: center 22%;
    border-radius: 50%;
    border: 2px solid #f0c96b;
}

.okey-help__hint {
    margin: 0 0 4px;
    color: #f6d57a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
}

.okey-help__card h3 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
}

.okey-help__card p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.45;
}

.okey-help__note {
    opacity: 0.88;
    font-size: 13px !important;
}

.okey-help__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 12px;
}

.okey-help__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
}

.okey-help__dot.is-on {
    background: #f0c96b;
}

.okey-help__row {
    display: flex;
    gap: 8px;
}

.okey-help__btn {
    appearance: none;
    flex: 1;
    border: 0;
    border-radius: 10px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #f0c96b, #c9922a);
    color: #2a1d04;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.okey-help__btn--ghost {
    background: rgba(255, 255, 255, 0.1);
    color: #f4efe4;
}

.okey-help__fab {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(240, 201, 107, 0.55);
    border-radius: 50%;
    background: rgba(8, 28, 22, 0.82);
    color: #f6d57a;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.okey-demo.is-help .okey-help__fab {
    display: none;
}