/* =====================================================
   SPIN 2 WIN FULL CSS FROM SCRATCH
   File: public/css/spinner.css
   For 15.6 inch fullscreen layout
===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Russo+One&display=swap');
:root {
    --gold: #ffd45a;
    --gold-light: #fff3a6;
    --brown-dark: #241006;
    --brown: #5b220d;
    --orange: #f59b25;
    --red: #d93524;
    --green: #28d72d;
    --cyan: #39d8ff;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #120703;
    font-family: Arial, Helvetica, sans-serif;
}

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

button {
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.game-body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #120703;
    color: #fff5c8;
}

/* =====================================================
   MAIN CABINET
===================================================== */

.spinwin-shell {
    --top-h: 31px;
    --history-h: 52px;
    --outer-pad: 4px;
    width: 100vw;
    height: 100vh;
    min-width: 1050px;
    min-height: 610px;
    padding: var(--outer-pad);
    overflow: hidden;
    color: #fff5c8;
    text-transform: uppercase;
    background:
        radial-gradient(circle at 25% 42%, rgba(255, 238, 97, .38), transparent 25%),
        radial-gradient(circle at 75% 38%, rgba(255, 130, 35, .35), transparent 30%),
        linear-gradient(180deg, #4d1b0b 0%, #bc5a16 45%, #551b0b 100%);
    position: relative;
}

.spinwin-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.05) 0 2px,
            transparent 2px 15px
        ),
        radial-gradient(circle at 50% -15%, rgba(255,255,255,.28), transparent 28%);
    mix-blend-mode: screen;
    opacity: .55;
    z-index: 0;
}

.spinwin-shell > * {
    position: relative;
    z-index: 1;
}

/* =====================================================
   TOP BAR
===================================================== */

.spinwin-topbar,
.game-header {
    height: var(--top-h);
    display: grid;
    grid-template-columns:
        70px
        185px
        105px
        minmax(260px, 1fr)
        70px
        95px
        max-content
        205px
        55px;
    gap: 5px;
    align-items: center;
    padding: 2px 5px;
    border: 2px solid #6d3213;
    background: linear-gradient(#211008, #54240f 58%, #130906);
    box-shadow:
        inset 0 0 0 1px rgba(255, 216, 100, .36),
        0 2px 6px rgba(0,0,0,.72);
    font-size: 12px;
    line-height: 1;
}

.lobby-tab,
.game-tab,
.top-action,
.ticket-input,
.top-balance,
.top-icons button {
    height: 23px;
    border: 2px solid #733715;
    border-radius: 3px;
    background: linear-gradient(#6c3a1b, #1f130d);
    color: #f9d36b;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 228, 131, .45);
}

.lobby-tab {
    color: #ffde80;
    text-shadow: 0 1px #000;
}

.game-tab {
    justify-content: space-between;
    padding: 0 6px;
    color: #251006;
    background: linear-gradient(#e9a848, #61250f 72%, #24110a);
    text-shadow: 0 1px #ffd37d;
    overflow: hidden;
    white-space: nowrap;
}

.game-tab span {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #28120b;
    color: #f9d36b;
    text-shadow: none;
}

.top-print {
    height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ffd889;
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: 900;
    text-transform: none;
    white-space: nowrap;
}

.top-print i {
    color: #21e71a;
    font-size: 23px;
    filter: drop-shadow(0 0 4px rgba(50, 255, 40, .65));
}

.ticket-input {
    width: 100%;
    padding: 0 8px;
    background: linear-gradient(#fff8d9, #b8f7f4);
    color: #111;
    outline: none;
}

.top-action {
    background: linear-gradient(#74ff32, #159100);
    border-color: #084f00;
    color: #8a1b12;
    font-size: 11px;
    text-shadow: 0 1px rgba(255, 255, 255, .55);
}

.operator-name {
    max-width: 90px;
    overflow: hidden;
    color: #f59339;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none;
}

.top-balance {
    justify-content: flex-start;
    gap: 7px;
    padding: 0 8px;
    white-space: nowrap;
    font-size: 13px;
}

.top-balance strong {
    color: #ffd781;
    font-size: 14px;
}

.top-icons {
    display: flex;
    gap: 2px;
}

.top-icons button {
    width: 22px;
    padding: 0;
    font-size: 11px;
}

#screenLockButton.active,
.screen-close-locked #screenLockButton {
    border-color: #00ff57;
    background: linear-gradient(#78ff35, #137c00);
    color: #231000;
    box-shadow: 0 0 10px rgba(84, 255, 75, .75), inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* =====================================================
   MAIN SCREEN SPLIT
===================================================== */

.spinwin-main,
.game-grid {
    width: 100%;
    height: calc(100vh - var(--top-h) - var(--history-h) - 12px);
    min-height: 505px;
    display: grid;
    grid-template-columns: 46.5% 53.5%;
    gap: 0;
    margin-top: 4px;
    overflow: hidden;
    border: 3px solid #5c2410;
    border-bottom: 0;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.045) 0 3px,
            transparent 3px 18px
        ),
        linear-gradient(
            90deg,
            #f2a331 0%,
            #f2a331 46.5%,
            #a3451e 46.5%,
            #873216 100%
        );
    box-shadow:
        inset 0 0 24px rgba(255, 220, 96, .42),
        inset 0 -16px 28px rgba(0, 0, 0, .36);
}

.wheel-column,
.play-column {
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* =====================================================
   LEFT WHEEL SECTION BACKGROUND + CURVE
===================================================== */

.wheel-column {
    isolation: isolate;
}

.wheel-column::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(circle at 38% 42%,
            rgba(255, 245, 95, .55) 0%,
            rgba(255, 185, 42, .42) 35%,
            transparent 62%
        ),
        linear-gradient(90deg,
            #ffe45c 0%,
            #ffb43a 48%,
            #ee8b20 100%
        );
}

.wheel-column::after {
    content: "";
    position: absolute;
    top: -12%;
    right: -25%;
    width: 53%;
    height: 124%;
    z-index: -2;
    border-radius: 55% 0 0 55% / 50% 0 0 50%;
    background:
        radial-gradient(ellipse at 0% 50%,
            rgba(255, 242, 120, .95) 0%,
            rgba(255, 195, 54, .92) 38%,
            rgba(225, 117, 24, .72) 68%,
            rgba(94, 35, 12, .96) 100%
        );
    box-shadow:
        -18px 0 28px rgba(255, 233, 84, .34),
        inset 16px 0 22px rgba(255, 245, 128, .45),
        inset -14px 0 24px rgba(72, 25, 9, .65);
}

.wheel-card {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* .wheel-card::after {
    content: "";
    position: absolute;
    top: -8%;
    right: -5px;
    width: 40px;
    height: 118%;
    z-index: 0;
    background: linear-gradient(
        180deg,
        rgba(80, 25, 8, .95),
        rgba(45, 16, 7, .98),
        rgba(98, 36, 10, .95)
    );
    transform: skewX(-24deg);
    transform-origin: top right;
    box-shadow:
        -8px 0 18px rgba(255, 205, 65, .28),
        8px 0 18px rgba(0, 0, 0, .35);
} */

/* =====================================================
   LOGO + MIN MAX
===================================================== */

.spinwin-logo {
    position: absolute;
    top: 22px;
    left: 24px;
    z-index: 8;
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: #9df441;
    font-family: Georgia, serif;
    font-size: 43px;
    font-style: italic;
    font-weight: 900;
    line-height: .9;
    letter-spacing: -1px;
    white-space: nowrap;
    text-transform: none;
    text-shadow:
        0 4px 0 #5f240c,
        0 0 10px rgba(255, 255, 130, .8);
}

.spinwin-logo b {
    display: grid;
    width: .95em;
    height: .95em;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, #36d8ff, #5124bf 70%);
    color: #ffef5d;
    font-size: .8em;
    transform: rotate(-12deg);
}

.spinwin-logo em {
    align-self: flex-end;
    color: #fff4af;
    font-size: .22em;
    font-style: normal;
    margin-left: -7px;
    margin-bottom: 4px;
}

.minmax-board {
    position: absolute;
    top: 84px;
    right: 14px;
    z-index: 8;
    min-width: 158px;
    padding: 6px 14px;
    color: #5b230d;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.25;
    text-shadow: 0 1px rgba(255, 255, 255, .45);
    background: linear-gradient(90deg, rgba(255, 227, 95, .98), rgba(255, 152, 32, .9));
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0% 100%);
}

.minmax-board strong {
    letter-spacing: 1px;
}

/* =====================================================
   SPINNER WHEEL
===================================================== */

.wheel-wrap {
    width: min(66vh, 34vw, 452px);
    min-width: 350px;
    aspect-ratio: 1 / 1;
    position: relative;
    z-index: 5;
    margin: 98px auto 0;
    transform: translateX(-24px);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .72));
}

.wheel-wrap::before {
    content: "";
    position: absolute;
    inset: -10px;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 231, 93, .55) 0%,
        rgba(255, 185, 48, .24) 48%,
        transparent 72%
    );
}

.wheel-wrap::after {
    content: "";
    position: absolute;
    left: 19%;
    right: 19%;
    bottom: -8%;
    height: 22%;
    z-index: 2;
    border-radius: 0 0 999px 999px;
    background:
        radial-gradient(ellipse at 50% 0%,
            rgba(120, 75, 28, .95) 0%,
            rgba(45, 30, 15, .98) 45%,
            rgba(8, 7, 5, 1) 82%
        );
    box-shadow:
        inset 0 8px 12px rgba(255, 188, 55, .18),
        0 12px 22px rgba(0, 0, 0, .65);
}

#spinnerWheel {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    filter: saturate(1.24) contrast(1.08) brightness(1.03);
}

.wheel-pointer {
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 56px solid #ffcf55;
    filter:
        drop-shadow(0 0 9px rgba(255, 240, 130, .9))
        drop-shadow(0 5px 7px rgba(0, 0, 0, .7));
}

.wheel-pointer::after {
    content: "";
    position: absolute;
    top: -60px;
    left: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff06a;
    border: 2px solid #fff7b8;
    box-shadow: 0 0 14px rgba(255, 232, 78, .95);
}

.wheel-center {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 12;
    width: 24%;
    height: 24%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 42% 34%,
        #fff7a6 0%,
        #ffd654 38%,
        #d98308 72%,
        #9f4300 100%
    );
    border: 6px solid rgba(255, 232, 112, .9);
    box-shadow:
        inset 0 5px 10px rgba(255, 255, 255, .42),
        0 0 18px rgba(255, 217, 92, .82),
        0 8px 20px rgba(0, 0, 0, .45);
}

.wheel-center.show-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #7b120a;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 900;
    line-height: .86;
    text-align: center;
    text-shadow:
        0 3px #fff3a0,
        0 0 16px rgba(255, 255, 255, .8);
}

.wheel-center .center-bonus {
    color: #0d7a1e;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(20px, 2.4vw, 34px);
    font-weight: 1000;
    line-height: 1;
    margin-bottom: 1px;
    text-transform: uppercase;
}

.wheel-center .center-number {
    font-size: clamp(38px, 5.1vw, 64px);
    line-height: .82;
}

/* .round-meta {
    position: absolute;
    left: 26px;
    right: 16px;
    bottom: 8px;
    z-index: 8;
    display: flex;
    justify-content: space-between;
    color: rgba(255, 239, 170, .82);
    font-size: 9px;
    text-transform: none;
} */

.status-pill {
    border: 1px solid rgba(255, 213, 90, .6);
    border-radius: 3px;
    padding: 2px 6px;
}

/* =====================================================
   RIGHT PANEL
===================================================== */

.play-column {
    z-index: 3;
    padding: 19px 18px 0 16px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.04) 0 3px,
            transparent 3px 18px
        ),
        linear-gradient(90deg, #a84620 0%, #883318 100%);
}

.screen-icons {
    position: absolute;
    top: 8px;
    right: 16px;
    z-index: 7;
    display: flex;
    gap: 8px;
}

.screen-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.62);
    color: #105414;
    font-size: 24px;
    font-weight: 900;
    box-shadow:
        inset 0 5px 10px rgba(255,255,255,.36),
        0 4px 8px rgba(0,0,0,.42);
}

.info-icon {
    background: radial-gradient(circle, #c6ff79 0 36%, #38e824 70%, #11910b 100%);
}

.sound-icon {
    color: #fff4d8;
    background: radial-gradient(circle, #ffb4b2 0 35%, #df3c36 70%, #8c1110 100%);
}

/* =====================================================
   PLAY STRIP
===================================================== */

.play-strip {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) 118px;
    gap: 18px;
    align-items: center;
    margin: 0 88px 14px 0;
}

.play-total {
    display: grid;
    grid-template-columns: auto minmax(210px, 1fr);
    gap: 14px;
    align-items: center;
}

.play-total span {
    color: #653017;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
    text-shadow: 0 2px rgba(255, 209, 104, .85);
}

.play-total strong {
    min-height: 45px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border: 3px solid #793215;
    border-radius: 8px;
    background: linear-gradient(#45200f, #1a110b);
    color: #ffc632;
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    overflow: hidden;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, .55);
}

.buy-btn {
    height: 46px;
    min-height: 0;
    border: 4px solid #b96920;
    border-radius: 4px;
    background: linear-gradient(#4e2c15, #17100b);
    color: rgba(255, 219, 137, .48);
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow:
        0 0 0 2px rgba(255, 218, 74, .23),
        inset 0 0 16px rgba(0,0,0,.74);
}

.buy-btn:not(:disabled) {
    background: linear-gradient(#ff5a35, #b51a12);
    color: #fff5c0;
}

/* =====================================================
   NUMBER GRID
===================================================== */

.number-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 13px 18px;
    padding: 0 0 12px;
}

.number-card {
    width: 100%;
    min-width: 0;
    min-height: 108px;
    max-height: 122px;
    aspect-ratio: 1.06 / 1;
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    align-items: center;
    border: 4px solid rgba(97, 41, 19, .68);
    border-radius: 12px;
    padding: 6px 7px 6px;
    color: #fff;
    box-shadow:
        inset 0 10px 16px rgba(255, 255, 255, .24),
        inset 0 -14px 18px rgba(0, 0, 0, .25),
        0 8px 12px rgba(0, 0, 0, .42);
    position: relative;
}

.number-card strong {
    color: #fff;
    font-family: Georgia, serif;
    font-size: 53px;
    font-weight: 900;
    line-height: .88;
    -webkit-text-stroke: 2px rgba(74, 62, 55, .5);
    text-shadow:
        3px 4px 0 rgba(0, 0, 0, .38),
        0 0 7px rgba(255, 255, 255, .55);
}

.number-card span {
    width: 100%;
    min-height: 21px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .75);
    border-radius: 999px;
    background: linear-gradient(#f9ffff, #b9f8ff);
    color: #3c342d;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28);
}

.color-0,
.color-7 {
    background: linear-gradient(#36e6ff, #037fc5);
}

.color-1 {
    background: linear-gradient(#ff5d48, #b92820);
}

.color-2,
.color-4 {
    background: linear-gradient(#bdf64c, #1f9b2e);
}

.color-3 {
    background: linear-gradient(#ff5ddb, #bb28ab);
}

.color-5,
.color-8 {
    background: linear-gradient(#ffe65c, #d59422);
}

.color-6 {
    background: linear-gradient(#38b7ff, #075faf);
}

.color-9 {
    background: linear-gradient(#c682ff, #7130c2);
}

.winner {
    outline: 4px solid #fff063;
    filter: brightness(1.12);
}

.winner::after {
    content: "WINNER";
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 5px;
    border-radius: 4px;
    background: #fff4a8;
    color: #4d2200;
    font-size: 8px;
    font-weight: 900;
}

.bet-flash {
    animation: betFlash .38s ease-in-out 4;
}

@keyframes betFlash {
    50% {
        transform: scale(1.05);
        box-shadow:
            0 0 0 5px #fff4a8,
            0 18px 26px rgba(0, 0, 0, .35);
    }
}

/* =====================================================
   CHIPS
===================================================== */

.coin-card {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.chip-row {
    display: flex;
    justify-content: center;
    gap: 44px;
    margin: 9px 0 17px;
    padding: 0 65px 0 0;
}

.chip-btn {
    width: 60px;
    height: 60px;
    min-height: 0;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 6px dashed rgba(255, 255, 255, .78);
    color: #313234;
    font-size: 19px;
    font-weight: 900;
    box-shadow:
        inset 0 0 0 6px rgba(255, 255, 255, .16),
        inset 0 8px 10px rgba(255, 255, 255, .35),
        0 8px 12px rgba(0, 0, 0, .45);
}

.chip-5 {
    background: radial-gradient(circle, #f5ffe4 0 30%, #44f736 31% 63%, #0aa115 64%);
}

.chip-10 {
    background: radial-gradient(circle, #fff7ec 0 30%, #a35cff 31% 63%, #5a2bd2 64%);
}

.chip-50 {
    background: radial-gradient(circle, #fff6dc 0 30%, #f5a347 31% 63%, #aa5418 64%);
}

.chip-100 {
    background: radial-gradient(circle, #eaffff 0 30%, #ef533f 31% 63%, #b51c17 64%);
}

.chip-500 {
    background: radial-gradient(circle, #f9f4ff 0 30%, #b56bff 31% 63%, #7130c2 64%);
}

.chip-btn.active {
    outline: 5px solid #fff063;
    filter: brightness(1.15);
}

/* =====================================================
   ODD EVEN TIMER ROW
===================================================== */

.odd-even-row {
    position: relative;
    display: grid;
    grid-template-columns: 128px 128px minmax(40px, 1fr) 72px;
    justify-content: stretch;
    gap: 24px;
    align-items: center;
    min-height: 70px;
    margin: 0 0 12px;
    padding: 8px 10px 8px 88px;
    border-radius: 999px;
    background: linear-gradient(90deg, #382b18 0%, #21190f 100%);
    box-shadow:
        inset 0 5px 18px rgba(0,0,0,.65),
        0 7px 12px rgba(0,0,0,.32);
}

.odd-even-row button,
.action-rail button {
    min-height: 42px;
    border: 4px solid #f3a82e;
    border-radius: 4px;
    background: linear-gradient(#56300f, #19110b);
    color: #ffd66d;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 2px #3b1707;
    box-shadow:
        inset 0 0 0 2px rgba(255, 236, 119, .22),
        0 4px 7px rgba(0, 0, 0, .4);
}

.spin-round-status {
    min-height: 28px;
    display: grid;
    place-items: center;
    color: #54ff45;
    font-size: 10px;
    font-weight: 900;
}

.round-clock {
    justify-self: end;
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 6px solid #ffc548;
    background: radial-gradient(circle, #ff5b49 0 40%, #ba1515 68%, #5c160d 100%);
    box-shadow:
        inset 0 0 12px rgba(255,255,255,.45),
        0 0 0 5px rgba(69,39,18,.65),
        0 6px 13px rgba(0,0,0,.52);
}

.round-clock strong {
    color: #ffe6e2;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-shadow:
        0 3px #66110d,
        0 0 8px rgba(255,255,255,.5);
}

/* =====================================================
   ACTION RAIL
===================================================== */

.action-rail {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) 95px 95px 95px;
    gap: 10px;
    align-items: center;
    margin-top: 0;
    padding: 8px 10px;
    border-top: 6px solid rgba(222, 240, 245, .78);
    border-bottom: 5px solid rgba(20,31,30,.55);
    background: linear-gradient(#473119, #1a1510);
    box-shadow: inset 0 4px 12px rgba(255, 230, 112, .2);
}

.chip-console {
    min-height: 42px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 9px;
    align-items: center;
    padding: 0 12px;
    border: 5px solid #f1a12a;
    background: linear-gradient(#59351a, #25140c);
    color: #ffdb7c;
    font-family: Georgia, serif;
    font-size: 17px;
    font-style: italic;
    font-weight: 900;
    text-transform: none;
    overflow: hidden;
}

.chip-console span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chip-console small {
    color: #ffe9a5;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-style: normal;
    text-transform: uppercase;
    white-space: nowrap;
}

.chip-console strong {
    color: #fff2a4;
    font-family: Arial, sans-serif;
    font-size: 21px;
    font-style: normal;
}

.action-rail button {
    min-height: 40px;
    font-size: 14px;
}

/* =====================================================
   BET QUEUE / FLASH
===================================================== */

.bet-queue {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 72px;
    z-index: 9;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 30px;
    overflow: hidden;
    margin: 0;
}

.bet-pill {
    border: 1px solid rgba(255, 218, 90, .8);
    border-radius: 999px;
    padding: 3px 8px;
    background: #2b1b10;
    color: #ffe494;
    font-size: 12px;
    font-weight: 800;
}

.last-bet-flash {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 72px;
    z-index: 10;
    max-height: 0;
    overflow: hidden;
    border-radius: 7px;
    background: #fff4a8;
    color: #4d2200;
    font-weight: 900;
    text-align: center;
    transition: max-height .2s ease, padding .2s ease;
}

.last-bet-flash.show {
    max-height: 48px;
    padding: 8px;
}

/* =====================================================
   HISTORY BAR
===================================================== */

.machine-history {
    height: var(--history-h);
    display: grid;
    grid-template-columns: 185px 1fr;
    gap: 9px;
    align-items: center;
    padding: 0 22px 0 40px;
    border: 3px solid #4f1e0c;
    border-top: 0;
    overflow: hidden;
    background: linear-gradient(#54200f, #30130c);
    box-shadow: inset 0 10px 18px rgba(255, 199, 80, .12);
}

.machine-history strong {
    color: #f4d96e;
    font-size: 39px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 3px #5a1e0e;
}

.result-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 50px;
    gap: 6px;
    align-items: center;
    justify-content: start;
    min-width: 0;
    overflow: hidden;
}

.result-chip {
    height: 46px;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 18px;
    place-items: center;
    border-radius: 4px;
    border: 2px solid #963818;
    background: linear-gradient(#f7b24a 0 8%, #3b2721 8% 62%, #d83522 62%);
    color: #fff0db;
    font-size: 24px;
    font-weight: 900;
    text-shadow: 0 2px #000;
    position: relative;
}

.result-chip small {
    position: absolute;
    top: -5px;
    right: -4px;
    min-width: 25px;
    border: 1px solid #fff4a8;
    border-radius: 999px;
    background: #ffd84d;
    color: #511600;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    padding: 2px 3px;
    text-shadow: none;
    z-index: 2;
}

.result-chip::after {
    content: attr(data-label);
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    align-self: stretch;
    justify-self: stretch;
    color: #161111;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px rgba(255, 255, 255, .25);
}

.result-chip:not([data-label])::after {
    content: "N";
}

.muted {
    color: #ffd777;
}

/* =====================================================
   RESULT POPUP / TABLE BASIC
===================================================== */

.result-screen {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    padding: 2rem;
}

.result-screen.open {
    display: flex;
}

.result-window {
    width: min(980px, 96vw);
    min-height: min(620px, 86vh);
    max-height: min(720px, 92vh);
    background: #f5f5f5;
    border: 16px solid #d22a25;
    border-radius: 8px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
}

.result-title {
    background: #d22a25;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 1rem;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 900;
}

.result-title button,
.result-actions button {
    border: 1px solid #fff6d6;
    border-radius: 4px;
    background: #a41412;
    color: #fff;
    font-weight: 800;
    padding: .35rem .8rem;
}

#claimAllResultScreen {
    background: #168038;
}

.result-table-wrap {
    overflow: auto;
    min-height: 0;
    padding: .75rem;
    background: #fff;
}

.claim-ticket-form {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto;
    gap: .6rem;
    align-items: center;
    margin: -.75rem -.75rem .75rem;
    padding: .65rem .75rem;
    border-bottom: 1px solid #e1b6b4;
    background: #fff;
    color: #222;
}

.claim-ticket-form label {
    color: #a41412;
    font-size: .85rem;
    font-weight: 900;
    white-space: nowrap;
}

.claim-ticket-form input {
    min-height: 36px;
    min-width: 0;
    border: 1px solid #d22a25;
    border-radius: 4px;
    padding: .25rem .5rem;
    color: #111;
}

.claim-ticket-form button {
    min-height: 36px;
    border: 0;
    border-radius: 4px;
    background: #d22a25;
    color: #fff;
    font-weight: 900;
    padding: 0 .9rem;
}

#claimBetMessage {
    grid-column: 1 / -1;
    min-height: 1.1rem;
    font-size: .85rem;
    font-weight: 900;
    text-transform: none;
}

#claimBetMessage.text-success {
    color: #0f8f3d;
}

#claimBetMessage.text-danger {
    color: #d22a25;
}

.result-table {
    width: 100%;
    border-collapse: collapse;
    color: #222;
    font-size: .95rem;
}

.result-table th {
    position: sticky;
    top: 55px;
    background: #ffe0df;
    color: #9b1411;
    text-transform: uppercase;
    z-index: 2;
}

.result-table th,
.result-table td {
    border: 1px solid #e1b6b4;
    padding: .5rem .65rem;
}

.row-claim-btn {
    min-height: 28px;
    border: 0;
    border-radius: 4px;
    background: #168038;
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
    padding: .25rem .6rem;
    white-space: nowrap;
}

.row-claim-btn:disabled {
    opacity: .7;
}

.claim-status {
    color: #6c4d3c;
    font-size: .8rem;
    font-weight: 900;
    white-space: nowrap;
}

.claim-status.claimed {
    color: #0f8f3d;
}

.claim-status.muted {
    color: #888;
}

.result-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    background: #d22a25;
    padding: .75rem 1rem;
}

/* =====================================================
   FULLSCREEN FINE TUNE FOR 1366 x 768
===================================================== */

@media (max-width: 1500px) and (max-height: 820px) {
    .spinwin-shell {
        --top-h: 30px;
        --history-h: 50px;
        --outer-pad: 4px;
    }

    .spinwin-main,
    .game-grid {
        min-height: 470px;
    }
}

/* If screen is too small, allow scroll instead of breaking */
@media (max-width: 1050px), (max-height: 610px) {
    html,
    body,
    .game-body {
        overflow: auto;
    }

    .spinwin-shell {
        min-width: 1050px;
        min-height: 610px;
    }
}


/* =====================================================
   MACHINE TOP PLAY HEADER LIKE REFERENCE IMAGE
===================================================== */

.spinwin-main {
    position: relative;
}

/* Header strip inside machine screen */
.machine-play-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 62px;
    z-index: 30;

    display: grid;
    grid-template-columns: 260px 1fr 135px 110px;
    align-items: center;
    gap: 14px;

    padding: 5px 18px 5px 18px;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .08) 0 2px,
            transparent 2px 13px
        ),
        linear-gradient(
            90deg,
            #8e3517 0%,
            #f28b25 18%,
            #dc6b1c 42%,
            #a7411d 70%,
            #6e2a12 100%
        );

    border-bottom: 3px solid rgba(87, 31, 10, .85);

    box-shadow:
        inset 0 -8px 16px rgba(0, 0, 0, .28),
        inset 0 4px 10px rgba(255, 225, 90, .25),
        0 5px 12px rgba(0, 0, 0, .35);
}

/* Logo text close to image */
.machine-logo {
    display: flex;
    align-items: center;
    gap: 2px;

    color: #9af03b;
    font-family: "Lobster", "Cooper Black", Georgia, cursive;
    font-size: 46px;
    line-height: .85;
    font-style: italic;
    text-transform: none;
    white-space: nowrap;

    text-shadow:
        0 3px 0 #69300d,
        0 0 8px rgba(255, 255, 120, .85),
        2px 2px 0 #2e1407;
}

.machine-logo b {
    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    margin: 0 -2px;

    border-radius: 50%;

    color: #ffee58;
    font-size: 34px;
    font-family: "Russo One", Arial Black, sans-serif;
    font-style: normal;

    background:
        radial-gradient(circle at 35% 30%,
            #65f2ff 0%,
            #1f9bd9 35%,
            #2521b9 70%,
            #34107a 100%
        );

    border: 2px solid rgba(255, 240, 95, .85);

    box-shadow:
        inset 0 3px 8px rgba(255, 255, 255, .5),
        0 2px 5px rgba(0, 0, 0, .55);

    transform: rotate(-12deg);
}

.machine-logo em {
    align-self: flex-end;
    margin-left: -8px;
    margin-bottom: 2px;

    color: #fff0a6;
    font-family: "Russo One", Arial Black, sans-serif;
    font-size: 10px;
    font-style: normal;
    letter-spacing: .5px;

    text-shadow:
        0 1px 0 #000,
        0 0 5px rgba(255, 255, 180, .8);
}

/* PLAY + black amount box */
.machine-play-box {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr);
    align-items: center;
    gap: 14px;

    justify-self: center;
    width: min(430px, 100%);
}

.machine-play-box span {
    color: #5f2a12;
    font-family: "Russo One", Arial Black, sans-serif;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: .5px;

    text-shadow:
        0 2px 0 rgba(255, 200, 90, .9),
        1px 1px 0 rgba(0, 0, 0, .35);
}

.machine-play-box strong {
    height: 42px;

    display: flex;
    align-items: center;

    padding: 0 16px;

    border-radius: 6px;
    border: 3px solid #713016;

    background:
        linear-gradient(#42200f, #160c07);

    color: #ffc635;
    font-family: "Russo One", Arial Black, sans-serif;
    font-size: 35px;
    font-weight: 900;
    line-height: 1;

    box-shadow:
        inset 0 4px 8px rgba(0, 0, 0, .7),
        inset 0 -2px 3px rgba(255, 198, 53, .12);
}

/* Black empty box near right side, like screenshot */
.machine-buy-display {
    width: 130px;
    height: 37px;

    justify-self: center;

    border-radius: 3px;
    border: 3px solid #8a4a18;

    background:
        linear-gradient(#302016, #100b08);

    box-shadow:
        inset 0 4px 8px rgba(0, 0, 0, .8),
        0 0 0 1px rgba(255, 217, 77, .25);
}

/* Right circular icons */
.machine-header-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.machine-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .65);

    font-family: "Russo One", Arial Black, sans-serif;
    font-size: 24px;
    font-weight: 900;

    box-shadow:
        inset 0 5px 10px rgba(255, 255, 255, .36),
        0 4px 8px rgba(0, 0, 0, .42);
}

.machine-icon.info-icon {
    color: #0b6313;
    background:
        radial-gradient(circle,
            #d6ff82 0%,
            #42ee28 58%,
            #11920c 100%
        );
}

.machine-icon.sound-icon {
    color: #fff6e0;
    background:
        radial-gradient(circle,
            #ffbab8 0%,
            #df4037 58%,
            #8b1110 100%
        );
}

/* Hide old right icon/play strip if still present */
.screen-icons,
.play-strip {
    display: none !important;
}

/* JS button still works but visually hidden */
.hidden-buy-btn {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Push content down because new header is absolute */
.wheel-card {
    padding-top: 62px;
}

.play-column {
    padding-top: 78px !important;
}

/* Min max should start below header */
.minmax-board {
    top: 88px;
}

/* Wheel should move slightly down after header */
.wheel-wrap {
    margin-top: 74px;
}

/* For 1366 x 768 laptop fullscreen */
@media (max-width: 1500px) and (max-height: 820px) {
    .machine-play-header {
        height: 56px;
        grid-template-columns: 235px 1fr 120px 96px;
        padding: 4px 14px;
        gap: 12px;
    }

    .machine-logo {
        font-size: 40px;
    }

    .machine-logo b {
        width: 39px;
        height: 39px;
        font-size: 29px;
    }

    .machine-logo em {
        font-size: 9px;
    }

    .machine-play-box {
        grid-template-columns: auto minmax(170px, 1fr);
        width: 385px;
    }

    .machine-play-box span {
        font-size: 31px;
    }

    .machine-play-box strong {
        height: 38px;
        font-size: 31px;
    }

    .machine-buy-display {
        width: 116px;
        height: 34px;
    }

    .machine-icon {
        width: 37px;
        height: 37px;
        font-size: 21px;
    }

    .wheel-card {
        padding-top: 56px;
    }

    .play-column {
        padding-top: 70px !important;
    }

    .minmax-board {
        top: 84px;
    }

    .wheel-wrap {
        margin-top: 70px;
    }
}

/* =====================================================
   FONT MATCHING FOR SPIN 2 WIN SCREEN
===================================================== */

/* Logo font like Spin 2 Win image */
.machine-logo,
.spinwin-logo {
    font-family: "Lobster", "Cooper Black", Georgia, cursive !important;
    font-style: italic;
    font-weight: 900;
    text-transform: none !important;
    letter-spacing: -1px;
}

/* Logo green glossy style */
.machine-logo span,
.spinwin-logo span {
    color: #8df02f;
    text-shadow:
        0 2px 0 #184b08,
        0 4px 0 #6a250b,
        2px 2px 0 #fff38b,
        0 0 9px rgba(255, 255, 120, .85);
}

/* Logo number 2 circle */
.machine-logo b,
.spinwin-logo b {
    font-family: "Russo One", Arial Black, sans-serif !important;
    color: #ffee46;
    text-shadow:
        0 2px 0 #14226b,
        0 0 6px rgba(255, 255, 120, .9);
}

/* PRO text */
.machine-logo em,
.spinwin-logo em {
    font-family: "Russo One", Arial Black, sans-serif !important;
    color: #fff4a8;
    font-style: normal;
    letter-spacing: .5px;
}

/* Machine UI font */
.lobby-tab,
.game-tab,
.top-action,
.top-balance,
.operator-name,
.machine-play-box span,
.machine-play-box strong,
.play-total span,
.play-total strong,
.buy-btn,
.odd-even-row button,
.action-rail button,
.chip-console small,
.chip-console strong,
.machine-history strong {
    font-family: "Russo One", Arial Black, Impact, sans-serif !important;
}

/* Number card font like game */
.number-card strong {
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 900;
    color: #fff;
    -webkit-text-stroke: 2px rgba(70, 70, 70, .55);
    text-shadow:
        2px 2px 0 #4d4d4d,
        3px 4px 0 rgba(0, 0, 0, .55),
        0 0 7px rgba(255, 255, 255, .85);
}

/* Small 0 box font */
.number-card span {
    font-family: "Russo One", Arial Black, sans-serif !important;
}

/* Chip font */
.chip-btn {
    font-family: "Russo One", Arial Black, sans-serif !important;
}

/* Timer font */
.round-clock strong,
#countdown {
    font-family: "Russo One", Arial Black, Impact, sans-serif !important;
}

/* =====================================================
   MOVE HISTORY BELOW RIGHT PLAY CHIPS SECTION
===================================================== */

/* Since history is no longer outside main */
.spinwin-main,
.game-grid {
    height: calc(100vh - var(--top-h) - 8px) !important;
}

/* Right side should allow history inside it */
.play-column {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Keep top/play/number/chip sections compact */
.bet-card,
.coin-card {
    flex: 0 0 auto;
}

/* History only on right side */
.right-machine-history {
    width: 100%;
    height: 52px;
    flex: 0 0 52px;

    display: grid;
    grid-template-columns: 175px 1fr;
    align-items: center;
    gap: 8px;

    margin-top: 10px;
    padding: 0 12px 0 18px;

    border: 3px solid #4f1e0c;
    background: linear-gradient(#54200f, #30130c);

    box-shadow:
        inset 0 10px 18px rgba(255, 199, 80, .12),
        0 5px 12px rgba(0, 0, 0, .35);

    overflow: hidden;
}

.right-machine-history strong {
    color: #f4d96e;
    font-family: "Russo One", Arial Black, Impact, sans-serif;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 3px #5a1e0e;
}

.right-machine-history .result-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 48px;
    gap: 6px;
    align-items: center;
    justify-content: start;
    min-width: 0;
    overflow: hidden;
}

.right-machine-history .result-chip {
    height: 44px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 18px;
    place-items: center;

    border-radius: 4px;
    border: 2px solid #963818;

    background: linear-gradient(
        #f7b24a 0 8%,
        #3b2721 8% 62%,
        #d83522 62%
    );

    color: #fff0db;
    font-size: 23px;
    font-weight: 900;
    text-shadow: 0 2px #000;
}

.right-machine-history .result-chip::after {
    content: attr(data-label);
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    align-self: stretch;
    justify-self: stretch;
    color: #161111;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
}

/* Remove old full-width bottom spacing if any remains */
.game-shell > .machine-history:not(.right-machine-history) {
    display: none !important;
}

/* 1366x768 adjustment */
@media (max-width: 1500px) and (max-height: 820px) {
    .right-machine-history {
        height: 48px;
        flex-basis: 48px;
        grid-template-columns: 155px 1fr;
        margin-top: 7px;
    }

    .right-machine-history strong {
        font-size: 30px;
    }

    .right-machine-history .result-strip {
        grid-auto-columns: 44px;
        gap: 5px;
    }

    .right-machine-history .result-chip {
        height: 40px;
        grid-template-rows: minmax(0, 1fr) 16px;
        font-size: 21px;
    }

    .right-machine-history .result-chip::after {
        font-size: 13px;
    }
}

/* =====================================================
   FIX: SHOW BUY BUTTON PROPERLY
===================================================== */

.machine-buy-display {
    display: none !important;
}

.machine-buy-btn {
    width: 125px;
    height: 38px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    border: 4px solid #b96a20;
    border-radius: 4px;

    background: linear-gradient(#ff5135, #b81410);
    color: #fff5c8;

    font-family: "Russo One", Arial Black, Impact, sans-serif;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;

    text-shadow: 0 2px 0 rgba(0, 0, 0, .55);

    box-shadow:
        inset 0 4px 8px rgba(255, 255, 255, .22),
        inset 0 -8px 12px rgba(0, 0, 0, .35),
        0 0 0 2px rgba(255, 218, 74, .25),
        0 4px 8px rgba(0, 0, 0, .45);

    cursor: pointer;
}

.machine-buy-btn:hover {
    filter: brightness(1.12);
}

.machine-buy-btn:active {
    transform: translateY(1px);
}

.machine-buy-btn:disabled {
    background: linear-gradient(#403123, #15110d);
    color: rgba(255, 223, 146, .45);
    cursor: not-allowed;
    filter: none;
}

/* Remove old hidden style if it exists */
.hidden-buy-btn {
    display: none !important;
}