/* =========================================================
   CSI 101 OKEY ONLINE V1
   ========================================================= */

.csi-okey101-wrapper {
    display: none;

    width: 100%;
    min-height: 610px;

    box-sizing: border-box;

    color: #fff;
}

.tetris-placeholder.csi-active-okey101 {
    display: block !important;

    padding: 0 !important;

    min-height: 650px;
}

.tetris-placeholder.csi-active-okey101
> *:not(.csi-okey101-wrapper) {
    display: none !important;
}

.tetris-placeholder.csi-active-okey101
> .csi-okey101-wrapper {
    display: block !important;
}

.mini-games-view.csi-okey101-mode
.mini-games-leaderboard {
    display: none !important;
}

.mini-games-view.csi-okey101-mode
.mini-games-layout {
    grid-template-columns:
        205px
        minmax(0, 1fr) !important;
}


/* =========================================================
   LOBBY
   ========================================================= */

.okey101-lobby {
    padding: 22px;
}

.okey101-lobby-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}

.okey101-kicker {
    display: block;

    margin-bottom: 5px;

    color: #e2b800;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.2px;
}

.okey101-lobby-head h2 {
    margin: 0;

    color: #fff;

    font-size: 26px;
}

.okey101-lobby-head h2 i {
    margin-right: 7px;

    color: #e2b800;
}

.okey101-lobby-head p {
    margin:
        7px 0
        0;

    color:
        rgba(
            255,
            255,
            255,
            .45
        );

    font-size: 11px;
}

.okey101-icon-btn {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    border-radius: 10px;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    color:
        rgba(
            255,
            255,
            255,
            .70
        );

    cursor: pointer;
}

.okey101-lobby-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(260px, .75fr);

    gap: 16px;
}

.okey101-panel {
    min-width: 0;

    padding: 16px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius: 14px;

    background:
        rgba(
            255,
            255,
            255,
            .022
        );
}

.okey101-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;
}

.okey101-panel-title span {
    display: block;

    color:
        rgba(
            224,
            184,
            0,
            .75
        );

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1px;
}

.okey101-panel-title strong {
    display: block;

    margin-top: 3px;

    color: #fff;

    font-size: 14px;
}

.okey101-panel-title small {
    color:
        rgba(
            255,
            255,
            255,
            .35
        );

    font-size: 9px;
}


/* =========================================================
   ROOM LIST
   ========================================================= */

.okey101-room-list {
    max-height: 430px;

    overflow-y: auto;

    display: grid;

    gap: 9px;

    padding-right: 3px;
}

.okey101-room-list::-webkit-scrollbar {
    width: 5px;
}

.okey101-room-list::-webkit-scrollbar-thumb {
    border-radius: 10px;

    background:
        rgba(
            224,
            184,
            0,
            .45
        );
}

.okey101-room-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 12px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .07
        );

    border-radius: 11px;

    background:
        rgba(
            0,
            0,
            0,
            .18
        );
}

.okey101-room-main {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 10px;
}

.okey101-room-icon {
    flex:
        0 0
        36px;

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        rgba(
            224,
            184,
            0,
            .09
        );

    color: #e2b800;
}

.okey101-room-main strong {
    display: block;

    overflow: hidden;

    color: #fff;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 12px;
}

.okey101-room-main span {
    display: block;

    margin-top: 4px;

    color:
        rgba(
            255,
            255,
            255,
            .38
        );

    font-size: 9px;
}

.okey101-room-side {
    display: flex;
    align-items: center;

    gap: 9px;
}

.okey101-room-side > span {
    white-space: nowrap;

    color:
        rgba(
            255,
            255,
            255,
            .45
        );

    font-size: 9px;
}

.okey101-join-btn {
    padding:
        7px
        10px;

    border:
        1px solid
        rgba(
            224,
            184,
            0,
            .25
        );

    border-radius: 8px;

    background:
        rgba(
            224,
            184,
            0,
            .08
        );

    color: #e8c51e;

    cursor: pointer;

    font-size: 9px;
    font-weight: 900;
}

.okey101-join-btn:disabled {
    opacity: .35;

    cursor: not-allowed;
}


/* =========================================================
   CREATE FORM
   ========================================================= */

.okey101-create-form {
    display: grid;

    gap: 12px;
}

.okey101-create-form label {
    display: grid;

    gap: 6px;
}

.okey101-create-form label > span {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color:
        rgba(
            255,
            255,
            255,
            .63
        );

    font-size: 9px;
    font-weight: 800;
}

.okey101-create-form label small {
    color:
        rgba(
            255,
            255,
            255,
            .27
        );

    font-size: 8px;
}

.okey101-create-form input,
.okey101-modal-box input {
    width: 100%;

    min-height: 40px;

    box-sizing: border-box;

    padding:
        0
        11px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    border-radius: 9px;

    outline: 0;

    background:
        rgba(
            0,
            0,
            0,
            .24
        );

    color: #fff;

    font: inherit;
}

.okey101-create-form input:focus,
.okey101-modal-box input:focus {
    border-color:
        rgba(
            224,
            184,
            0,
            .42
        );
}

.okey101-primary-btn,
.okey101-secondary-btn {
    min-height: 40px;

    border-radius: 9px;

    cursor: pointer;

    font-size: 9px;
    font-weight: 900;
}

.okey101-primary-btn {
    border: 0;

    background:
        linear-gradient(
            135deg,
            #ebc700,
            #cfa900
        );

    color: #090909;
}

.okey101-secondary-btn {
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    background:
        rgba(
            255,
            255,
            255,
            .04
        );

    color: #fff;
}


/* =========================================================
   EMPTY
   ========================================================= */

.okey101-empty {
    min-height: 190px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color:
        rgba(
            255,
            255,
            255,
            .32
        );

    text-align: center;

    font-size: 10px;
}

.okey101-empty i {
    color:
        rgba(
            224,
            184,
            0,
            .55
        );

    font-size: 24px;
}

.okey101-empty strong {
    color:
        rgba(
            255,
            255,
            255,
            .70
        );
}


/* =========================================================
   TABLE TOOLBAR
   ========================================================= */

.okey101-table-view {
    padding: 18px;
}

.okey101-table-view[hidden],
.okey101-lobby[hidden],
.okey101-hand-area[hidden],
.okey101-indicator-area[hidden] {
    display: none !important;
}

.okey101-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 13px;

    padding:
        12px
        14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius: 12px;

    background:
        rgba(
            255,
            255,
            255,
            .025
        );
}

.okey101-table-toolbar > div:first-child span,
.okey101-table-toolbar > div:first-child strong,
.okey101-table-toolbar > div:first-child small {
    display: block;
}

.okey101-table-toolbar > div:first-child span {
    color: #e0b800;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .8px;
}

.okey101-table-toolbar > div:first-child strong {
    margin-top: 3px;

    color: #fff;

    font-size: 14px;
}

.okey101-table-toolbar > div:first-child small {
    margin-top: 3px;

    color:
        rgba(
            255,
            255,
            255,
            .35
        );

    font-size: 8px;
}

.okey101-table-actions {
    display: flex;

    gap: 7px;
}

.okey101-ready-btn,
.okey101-leave-btn {
    min-height: 34px;

    padding:
        0
        11px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 8px;
    font-weight: 900;
}

.okey101-ready-btn {
    border:
        1px solid
        rgba(
            46,
            204,
            113,
            .25
        );

    background:
        rgba(
            46,
            204,
            113,
            .08
        );

    color: #71e39d;
}

.okey101-ready-btn.is-ready {
    border-color:
        rgba(
            241,
            196,
            15,
            .25
        );

    background:
        rgba(
            241,
            196,
            15,
            .08
        );

    color: #f0cf50;
}

.okey101-leave-btn {
    border:
        1px solid
        rgba(
            231,
            76,
            60,
            .22
        );

    background:
        rgba(
            231,
            76,
            60,
            .07
        );

    color: #ef8176;
}


/* =========================================================
   BOARD
   ========================================================= */

.okey101-board {
    position: relative;

    min-height: 420px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .075
        );

    border-radius: 18px;

    background:
        radial-gradient(
            circle at center,
            rgba(
                24,
                110,
                73,
                .88
            ),
            rgba(
                8,
                45,
                31,
                .98
            )
        );

    box-shadow:
        inset
        0 0 80px
        rgba(
            0,
            0,
            0,
            .30
        );
}

.okey101-center {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 13px;

    text-align: center;
}

.okey101-logo strong {
    display: block;

    color:
        rgba(
            255,
            255,
            255,
            .18
        );

    font-size: 64px;

    line-height: .8;
}

.okey101-logo span {
    display: block;

    margin-top: 6px;

    color:
        rgba(
            255,
            255,
            255,
            .16
        );

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 5px;
}

.okey101-waiting-text {
    max-width: 230px;

    color:
        rgba(
            255,
            255,
            255,
            .48
        );

    font-size: 9px;

    line-height: 1.5;
}

.okey101-seat {
    position: absolute;

    min-width: 155px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        8px
        10px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius: 10px;

    background:
        rgba(
            0,
            0,
            0,
            .24
        );
}

.okey101-seat-top {
    top: 15px;
    left: 50%;

    transform:
        translateX(-50%);
}

.okey101-seat-bottom {
    bottom: 15px;
    left: 50%;

    transform:
        translateX(-50%);
}

.okey101-seat-left {
    left: 15px;
    top: 50%;

    transform:
        translateY(-50%);
}

.okey101-seat-right {
    right: 15px;
    top: 50%;

    transform:
        translateY(-50%);
}

.okey101-empty-seat {
    width: 100%;

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

    gap: 6px;

    color:
        rgba(
            255,
            255,
            255,
            .27
        );

    font-size: 8px;
}

.okey101-player-avatar {
    flex:
        0 0
        30px;

    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(
            224,
            184,
            0,
            .13
        );

    color: #f0cf33;

    font-size: 11px;
    font-weight: 900;
}

.okey101-player-info {
    min-width: 0;

    flex: 1;
}

.okey101-player-info strong {
    display: block;

    overflow: hidden;

    color: #fff;

    font-size: 9px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.okey101-player-info strong small {
    margin-left: 4px;

    color: #e4be1c;

    font-size: 6px;
}

.okey101-player-info span {
    display: block;

    margin-top: 3px;

    color:
        rgba(
            255,
            255,
            255,
            .37
        );

    font-size: 7px;
}

.okey101-player-info span.ready {
    color: #66dc91;
}

.okey101-player-info span.offline {
    color: #eb7770;
}

.okey101-host-badge {
    position: absolute;

    top: -7px;
    right: 8px;

    padding:
        2px
        5px;

    border-radius: 4px;

    background: #d8b000;

    color: #080808;

    font-size: 5px;
    font-weight: 900;
}

.okey101-tile-count {
    width: 20px;
    height: 20px;

    display: grid;

    place-items: center;

    border-radius: 6px;

    background:
        rgba(
            255,
            255,
            255,
            .07
        );

    color:
        rgba(
            255,
            255,
            255,
            .72
        );

    font-size: 7px;
}


/* =========================================================
   INDICATOR
   ========================================================= */

.okey101-indicator-area {
    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        7px
        9px;

    border-radius: 9px;

    background:
        rgba(
            0,
            0,
            0,
            .23
        );
}

.okey101-indicator-area > span {
    color:
        rgba(
            255,
            255,
            255,
            .36
        );

    font-size: 6px;
    font-weight: 900;
}

.okey101-indicator-area small {
    color:
        rgba(
            255,
            255,
            255,
            .55
        );

    font-size: 7px;
}


/* =========================================================
   HAND
   ========================================================= */

.okey101-hand-area {
    margin-top: 13px;

    padding:
        12px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius: 12px;

    background:
        rgba(
            255,
            255,
            255,
            .022
        );
}

.okey101-hand-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 9px;
}

.okey101-hand-head span,
.okey101-hand-head strong {
    display: block;
}

.okey101-hand-head span {
    color: #d9b300;

    font-size: 7px;
    font-weight: 900;
}

.okey101-hand-head strong {
    margin-top: 2px;

    color: #fff;

    font-size: 10px;
}

.okey101-hand-head small {
    color:
        rgba(
            255,
            255,
            255,
            .27
        );

    font-size: 7px;
}

.okey101-hand {
    display: flex;
    flex-wrap: wrap;

    gap: 4px;

    min-height: 54px;

    padding:
        8px;

    border-radius: 9px;

    background:
        linear-gradient(
            180deg,
            #5d351d,
            #3c2213
        );

    box-shadow:
        inset
        0 2px 7px
        rgba(
            0,
            0,
            0,
            .38
        );
}


/* =========================================================
   TILES
   ========================================================= */

.okey101-tile {
    position: relative;

    width: 34px;
    height: 47px;

    flex:
        0 0
        34px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 3px;

    padding: 0;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            .18
        );

    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            #fffef4,
            #dedbc7
        );

    box-shadow:
        0 2px 4px
        rgba(
            0,
            0,
            0,
            .35
        );

    font-family:
        Arial,
        sans-serif;

    cursor: default;
}

.okey101-tile span {
    font-size: 17px;
    font-weight: 900;

    line-height: 1;
}

.okey101-tile i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        currentColor;
}

.okey101-tile.red {
    color: #cf2727;
}

.okey101-tile.blue {
    color: #2459ca;
}

.okey101-tile.black {
    color: #171717;
}

.okey101-tile.yellow {
    color: #cf9b00;
}

.okey101-tile.false-joker {
    color: #3c3129;
}

.okey101-tile.false-joker small {
    font-size: 5px;
}


/* =========================================================
   TOAST
   ========================================================= */

.okey101-toast {
    position: fixed;

    z-index: 999999;

    right: 22px;
    bottom: 22px;

    max-width: 330px;

    padding:
        10px
        13px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius: 9px;

    background:
        rgba(
            16,
            16,
            16,
            .96
        );

    box-shadow:
        0 15px 45px
        rgba(
            0,
            0,
            0,
            .40
        );

    color: #fff;

    font-size: 9px;
}

.okey101-toast.success {
    border-color:
        rgba(
            46,
            204,
            113,
            .28
        );

    color: #78e6a4;
}

.okey101-toast.error {
    border-color:
        rgba(
            231,
            76,
            60,
            .28
        );

    color: #ef8e84;
}


/* =========================================================
   PASSWORD MODAL
   ========================================================= */

.okey101-modal {
    position: fixed;

    inset: 0;

    z-index: 999998;

    display: grid;

    place-items: center;

    padding: 20px;
}

.okey101-modal[hidden] {
    display: none !important;
}

.okey101-modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(
            0,
            0,
            0,
            .78
        );

    backdrop-filter:
        blur(6px);
}

.okey101-modal-box {
    position: relative;

    z-index: 2;

    width:
        min(
            360px,
            100%
        );

    box-sizing: border-box;

    padding: 20px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .11
        );

    border-radius: 14px;

    background: #121212;

    box-shadow:
        0 25px 80px
        rgba(
            0,
            0,
            0,
            .50
        );
}

.okey101-modal-box > span {
    color: #dbb500;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1px;
}

.okey101-modal-box h3 {
    margin:
        5px 0
        5px;

    color: #fff;
}

.okey101-modal-box p {
    margin:
        0 0
        13px;

    color:
        rgba(
            255,
            255,
            255,
            .40
        );

    font-size: 9px;
}

.okey101-modal-box > div:last-child {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 8px;

    margin-top: 11px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
    max-width: 950px
) {

    .mini-games-view.csi-okey101-mode
    .mini-games-layout {
        grid-template-columns:
            1fr !important;
    }

    .okey101-lobby-grid {
        grid-template-columns:
            1fr;
    }

}


@media (
    max-width: 650px
) {

    .okey101-lobby,
    .okey101-table-view {
        padding: 10px;
    }

    .okey101-table-toolbar {
        align-items: flex-start;

        flex-direction: column;
    }

    .okey101-board {
        min-height: 470px;
    }

    .okey101-seat {
        min-width: 125px;

        max-width: 145px;
    }

    .okey101-seat-left,
    .okey101-seat-right {
        top: 44%;
    }

    .okey101-room-card {
        align-items: flex-start;

        flex-direction: column;
    }

    .okey101-room-side {
        width: 100%;

        justify-content: space-between;
    }

    .okey101-hand {
        justify-content: center;
    }

}


/* =========================================================
   CSI 101 OKEY - TUR SISTEMI V2
   ========================================================= */

.okey101-turn-controls {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 4px;
}

.okey101-turn-controls[hidden] {
    display: none !important;
}

.okey101-turn-status,
.okey101-last-discard {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 4px;
}

.okey101-turn-status > span,
.okey101-last-discard > span {
    color:
        rgba(
            255,
            255,
            255,
            .35
        );

    font-size: 6px;
    font-weight: 900;

    letter-spacing: .7px;
}

.okey101-turn-status strong {
    max-width: 135px;

    color: #fff;

    font-size: 8px;

    text-align: center;
}

.okey101-draw-btn {
    min-width: 82px;
    min-height: 54px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 2px;

    border:
        1px solid
        rgba(
            255,
            212,
            40,
            .30
        );

    border-radius: 9px;

    background:
        rgba(
            0,
            0,
            0,
            .24
        );

    color: #f0cb26;

    cursor: pointer;

    transition:
        transform .14s ease,
        border-color .14s ease,
        background .14s ease;
}

.okey101-draw-btn:hover:not(:disabled) {
    transform:
        translateY(-2px);

    border-color:
        rgba(
            255,
            212,
            40,
            .65
        );

    background:
        rgba(
            255,
            212,
            40,
            .10
        );
}

.okey101-draw-btn:disabled {
    opacity: .35;

    cursor: not-allowed;
}

.okey101-draw-btn i {
    font-size: 15px;
}

.okey101-draw-btn span {
    font-size: 7px;
    font-weight: 900;
}

.okey101-draw-btn small {
    color:
        rgba(
            255,
            255,
            255,
            .50
        );

    font-size: 6px;
}

.okey101-last-discard-slot {
    min-width: 42px;
    min-height: 52px;

    display: grid;

    place-items: center;

    border:
        1px dashed
        rgba(
            255,
            255,
            255,
            .16
        );

    border-radius: 7px;

    color:
        rgba(
            255,
            255,
            255,
            .28
        );
}

.okey101-last-discard-slot
.okey101-tile {
    transform:
        scale(.86);
}

.okey101-hand
.okey101-tile.selectable {
    cursor: pointer;

    transition:
        transform .12s ease,
        box-shadow .12s ease;
}

.okey101-hand
.okey101-tile.selectable:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 8px 12px
        rgba(
            0,
            0,
            0,
            .45
        );
}

.okey101-hand
.okey101-tile.selectable:active {
    transform:
        translateY(-4px);
}

@media (
    max-width: 650px
) {

    .okey101-turn-controls {
        flex-wrap: wrap;
    }

    .okey101-turn-status {
        width: 100%;
    }

}


/* =========================================================
   CSI 101 OKEY - GERCEK 2 KATLI ISTAKA V2.1
   ========================================================= */

.okey101-hand-area {
    padding:
        14px
        14px
        16px;

    background:
        linear-gradient(
            180deg,
            rgba(18, 18, 18, .98),
            rgba(12, 12, 12, .98)
        );
}

.okey101-hand {
    position: relative;

    display: grid !important;

    grid-template-columns:
        repeat(
            11,
            minmax(42px, 1fr)
        );

    grid-template-rows:
        repeat(
            2,
            58px
        );

    gap:
        7px
        6px;

    min-height: 142px;

    padding:
        12px
        16px
        14px;

    overflow-x: auto;

    border:
        1px solid
        rgba(
            125,
            66,
            28,
            .80
        );

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            #75401f 0%,
            #5b2f17 48%,
            #4b2511 52%,
            #67351a 100%
        );

    box-shadow:
        inset
        0 3px 8px
        rgba(
            0,
            0,
            0,
            .50
        ),
        inset
        0 -4px 8px
        rgba(
            0,
            0,
            0,
            .35
        ),
        0 8px 25px
        rgba(
            0,
            0,
            0,
            .24
        );
}

/*
    İki ıstaka çizgisini ayıran orta ahşap çizgi.
*/
.okey101-hand::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 2px;

    background:
        rgba(
            37,
            16,
            6,
            .55
        );

    box-shadow:
        0 1px 0
        rgba(
            255,
            255,
            255,
            .04
        );

    pointer-events: none;
}

.okey101-hand
.okey101-tile {
    width: 100% !important;
    height: 58px !important;

    min-width: 42px;

    flex: none !important;

    z-index: 2;

    border-radius: 6px;

    background:
        linear-gradient(
            145deg,
            #fffef2,
            #e5e0cb
        );

    box-shadow:
        0 3px 5px
        rgba(
            0,
            0,
            0,
            .35
        );

    cursor: default;
}

.okey101-hand
.okey101-tile span {
    font-size: 21px;
}

.okey101-hand
.okey101-tile i {
    width: 7px;
    height: 7px;
}

.okey101-hand
.okey101-tile.selectable {
    cursor: pointer;

    transition:
        transform .12s ease,
        box-shadow .12s ease,
        filter .12s ease;
}

.okey101-hand
.okey101-tile.selectable:hover {
    z-index: 5;

    transform:
        translateY(-9px);

    filter:
        brightness(1.06);

    box-shadow:
        0 11px 16px
        rgba(
            0,
            0,
            0,
            .48
        );
}

.okey101-hand
.okey101-tile.selectable:active {
    transform:
        translateY(-5px)
        scale(.98);
}


/* =========================================================
   TUR BUTONU
   ========================================================= */

.okey101-draw-btn {
    min-width: 100px;

    padding:
        7px
        12px;

    box-sizing: border-box;
}

.okey101-draw-btn:not(:disabled) {
    border-color:
        rgba(
            77,
            220,
            55,
            .60
        );

    background:
        rgba(
            36,
            130,
            34,
            .22
        );

    color:
        #69ef50;

    box-shadow:
        0 0 18px
        rgba(
            54,
            220,
            48,
            .10
        );
}

.okey101-draw-btn.must-discard {
    border-color:
        rgba(
            240,
            185,
            25,
            .38
        );

    background:
        rgba(
            200,
            145,
            0,
            .10
        );

    color:
        #e4be27;
}

.okey101-turn-status strong {
    max-width: 190px;

    font-size: 8px;

    line-height: 1.45;
}


/* =========================================================
   BUYUK EKRAN - ISTAKA BOYUTU
   ========================================================= */

@media (
    min-width: 1000px
) {

    .okey101-hand-area {
        padding:
            14px
            18px
            18px;
    }

    .okey101-hand {
        grid-template-columns:
            repeat(
                11,
                minmax(47px, 1fr)
            );

        grid-template-rows:
            repeat(
                2,
                62px
            );

        min-height: 151px;
    }

    .okey101-hand
    .okey101-tile {
        min-width: 47px;

        height: 62px !important;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (
    max-width: 850px
) {

    .okey101-hand {
        grid-template-columns:
            repeat(
                11,
                44px
            );

        grid-template-rows:
            repeat(
                2,
                57px
            );

        justify-content: start;
    }

}


/* =========================================================
   MOBIL
   ========================================================= */

@media (
    max-width: 600px
) {

    .okey101-hand {
        grid-template-columns:
            repeat(
                11,
                39px
            );

        grid-template-rows:
            repeat(
                2,
                52px
            );

        gap: 5px;

        padding:
            9px
            10px
            11px;
    }

    .okey101-hand
    .okey101-tile {
        min-width: 39px;

        height: 52px !important;
    }

    .okey101-hand
    .okey101-tile span {
        font-size: 18px;
    }

}


/* =========================================================
   CSI 101 OKEY - GERCEK ISTAKA V3
   2 x 20 SLOT + DRAG DROP
   ========================================================= */

.okey101-hand-area {
    overflow: hidden;
}

.okey101-hand.okey101-rack-v3 {
    position: relative;

    display: grid !important;

    grid-template-columns:
        repeat(
            20,
            48px
        ) !important;

    grid-template-rows:
        repeat(
            2,
            64px
        ) !important;

    gap:
        8px
        4px !important;

    width: max-content;

    min-width:
        calc(
            20 * 48px +
            19 * 4px
        );

    min-height: 154px !important;

    box-sizing: border-box;

    justify-content: start !important;
    align-content: center;

    padding:
        12px
        18px
        14px !important;

    overflow: visible;

    border:
        1px solid
        rgba(
            146,
            78,
            35,
            .95
        );

    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            #7b4524 0%,
            #68371b 43%,
            #47200e 48%,
            #3a190a 52%,
            #633318 58%,
            #794321 100%
        );

    box-shadow:
        inset
        0 4px 10px
        rgba(
            255,
            190,
            105,
            .07
        ),
        inset
        0 -8px 14px
        rgba(
            0,
            0,
            0,
            .38
        ),
        0 12px 28px
        rgba(
            0,
            0,
            0,
            .28
        );
}


/*
    Eski orta çizgiyi yeni ıstakada daha belirgin yap.
*/
.okey101-hand.okey101-rack-v3::after {
    content: "";

    position: absolute;

    left: 10px;
    right: 10px;

    top: 50%;

    height: 4px;

    transform:
        translateY(-2px);

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(39, 16, 6, .35),
            rgba(32, 12, 4, .90),
            rgba(39, 16, 6, .35)
        );

    box-shadow:
        0 1px 0
        rgba(
            255,
            255,
            255,
            .08
        );

    pointer-events: none;

    z-index: 1;
}


/* =========================================================
   SLOT
   ========================================================= */

.okey101-rack-slot {
    position: relative;

    width: 48px;
    height: 64px;

    box-sizing: border-box;

    border-radius: 7px;

    z-index: 2;

    transition:
        background .12s ease,
        box-shadow .12s ease,
        transform .12s ease;
}


.okey101-rack-slot.empty {
    border:
        1px dashed
        rgba(
            255,
            222,
            173,
            .10
        );

    background:
        rgba(
            25,
            9,
            3,
            .08
        );
}


.okey101-rack-slot.empty:hover {
    border-color:
        rgba(
            255,
            219,
            158,
            .22
        );

    background:
        rgba(
            255,
            219,
            158,
            .035
        );
}


.okey101-rack-slot.drag-over {
    transform:
        translateY(-3px);

    background:
        rgba(
            255,
            211,
            72,
            .13
        );

    box-shadow:
        inset
        0 0 0 2px
        rgba(
            255,
            211,
            72,
            .72
        ),
        0 0 16px
        rgba(
            255,
            200,
            40,
            .22
        );
}


/* =========================================================
   ISTAKA TASLARI
   ========================================================= */

.okey101-hand.okey101-rack-v3
.okey101-rack-slot
.okey101-tile {
    width: 48px !important;
    height: 64px !important;

    min-width: 48px !important;

    margin: 0 !important;

    padding: 0 !important;

    border-radius: 7px;

    cursor: grab !important;

    user-select: none;

    touch-action: none;

    transition:
        transform .12s ease,
        box-shadow .12s ease,
        filter .12s ease,
        outline .12s ease;
}


.okey101-hand.okey101-rack-v3
.okey101-rack-slot
.okey101-tile:hover {
    z-index: 10;

    transform:
        translateY(-6px);

    filter:
        brightness(1.06);

    box-shadow:
        0 10px 16px
        rgba(
            0,
            0,
            0,
            .45
        );
}


.okey101-hand.okey101-rack-v3
.okey101-tile.dragging {
    opacity: .42;

    cursor: grabbing !important;

    transform:
        scale(.92);
}


.okey101-hand.okey101-rack-v3
.okey101-tile.selected {
    z-index: 12;

    transform:
        translateY(-8px);

    outline:
        3px solid
        rgba(
            255,
            207,
            48,
            .88
        );

    outline-offset: 2px;

    box-shadow:
        0 0 0 2px
        rgba(
            86,
            52,
            8,
            .70
        ),
        0 12px 20px
        rgba(
            0,
            0,
            0,
            .52
        ),
        0 0 18px
        rgba(
            255,
            200,
            35,
            .28
        );
}


.okey101-hand.okey101-rack-v3
.okey101-tile.can-discard.selected::after {
    content: "2x AT";

    position: absolute;

    top: -17px;
    left: 50%;

    transform:
        translateX(-50%);

    padding:
        2px
        5px;

    border-radius: 4px;

    white-space: nowrap;

    background:
        rgba(
            165,
            40,
            30,
            .94
        );

    color: #fff;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .3px;

    pointer-events: none;
}


/*
    Yatay taşma yalnızca dış kapsayıcıda olsun.
*/
.okey101-hand-area {
    overflow-x: auto;
    overflow-y: visible;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(
            180,
            110,
            55,
            .72
        )
        rgba(
            0,
            0,
            0,
            .18
        );
}


.okey101-hand-area::-webkit-scrollbar {
    height: 8px;
}


.okey101-hand-area::-webkit-scrollbar-track {
    background:
        rgba(
            0,
            0,
            0,
            .18
        );

    border-radius: 999px;
}


.okey101-hand-area::-webkit-scrollbar-thumb {
    background:
        rgba(
            180,
            110,
            55,
            .72
        );

    border-radius: 999px;
}


/* =========================================================
   BUYUK EKRAN
   ========================================================= */

@media (
    min-width: 1200px
) {

    .okey101-hand.okey101-rack-v3 {
        grid-template-columns:
            repeat(
                20,
                51px
            ) !important;

        grid-template-rows:
            repeat(
                2,
                67px
            ) !important;

        min-width:
            calc(
                20 * 51px +
                19 * 4px
            );

        min-height:
            160px !important;
    }


    .okey101-hand.okey101-rack-v3
    .okey101-rack-slot {
        width: 51px;
        height: 67px;
    }


    .okey101-hand.okey101-rack-v3
    .okey101-rack-slot
    .okey101-tile {
        width: 51px !important;
        height: 67px !important;
        min-width: 51px !important;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (
    max-width: 850px
) {

    .okey101-hand.okey101-rack-v3 {
        grid-template-columns:
            repeat(
                20,
                44px
            ) !important;

        grid-template-rows:
            repeat(
                2,
                59px
            ) !important;

        min-width:
            calc(
                20 * 44px +
                19 * 4px
            );

        min-height:
            145px !important;
    }


    .okey101-hand.okey101-rack-v3
    .okey101-rack-slot {
        width: 44px;
        height: 59px;
    }


    .okey101-hand.okey101-rack-v3
    .okey101-rack-slot
    .okey101-tile {
        width: 44px !important;
        height: 59px !important;
        min-width: 44px !important;
    }

}


/* =========================================================
   MOBIL
   ========================================================= */

@media (
    max-width: 600px
) {

    .okey101-hand.okey101-rack-v3 {
        grid-template-columns:
            repeat(
                20,
                40px
            ) !important;

        grid-template-rows:
            repeat(
                2,
                54px
            ) !important;

        gap:
            6px
            3px !important;

        min-width:
            calc(
                20 * 40px +
                19 * 3px
            );

        min-height:
            134px !important;

        padding:
            10px
            12px
            12px !important;
    }


    .okey101-hand.okey101-rack-v3
    .okey101-rack-slot {
        width: 40px;
        height: 54px;
    }


    .okey101-hand.okey101-rack-v3
    .okey101-rack-slot
    .okey101-tile {
        width: 40px !important;
        height: 54px !important;
        min-width: 40px !important;
    }


    .okey101-hand.okey101-rack-v3
    .okey101-rack-slot
    .okey101-tile span {
        font-size: 18px;
    }

}



/* =========================================================
   CSI 101 OKEY - TAS ATMA DROP ALANI V3.1
   ========================================================= */

.okey101-last-discard-slot {
    position: relative;

    transition:
        transform .14s ease,
        border-color .14s ease,
        background .14s ease,
        box-shadow .14s ease;
}


.okey101-last-discard-slot::after {
    content: "TAŞI BURAYA BIRAK";

    position: absolute;

    left: 50%;
    bottom: -19px;

    transform:
        translateX(-50%);

    width: max-content;

    opacity: 0;

    padding:
        3px
        6px;

    border-radius: 5px;

    background:
        rgba(
            10,
            10,
            10,
            .92
        );

    color:
        rgba(
            255,
            255,
            255,
            .70
        );

    font-size: 6px;
    font-weight: 900;

    letter-spacing: .4px;

    pointer-events: none;

    transition:
        opacity .14s ease;
}


.okey101-last-discard-slot.discard-drop-active {
    transform:
        scale(1.12);

    border-color:
        rgba(
            255,
            197,
            36,
            .95
        ) !important;

    background:
        rgba(
            198,
            110,
            21,
            .28
        );

    box-shadow:
        0 0 0 3px
        rgba(
            255,
            190,
            35,
            .14
        ),
        0 0 26px
        rgba(
            255,
            169,
            20,
            .30
        );
}


.okey101-last-discard-slot.discard-drop-active::after {
    opacity: 1;
}


.okey101-last-discard-slot.discard-drop-denied {
    border-color:
        rgba(
            230,
            72,
            62,
            .75
        ) !important;

    background:
        rgba(
            150,
            35,
            28,
            .18
        );

    box-shadow:
        0 0 18px
        rgba(
            220,
            50,
            40,
            .15
        );
}


.okey101-last-discard-slot.discard-drop-denied::after {
    content: "SIRA SENDE DEĞİL";

    opacity: 1;

    color:
        #ef8176;
}



/* ============================================================
   101 OKEY V4 - SON TASI AL
   ============================================================ */

.okey101-turn-action-buttons {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.okey101-turn-action-buttons
.okey101-draw-btn,
.okey101-turn-action-buttons
.okey101-take-discard-btn {
    min-width: 145px;
}

.okey101-take-discard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 11px 15px;

    border-radius: 12px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.14
        );

    background:
        rgba(
            255,
            255,
            255,
            0.075
        );

    color: #f5f7fb;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        opacity 0.18s ease;
}

.okey101-take-discard-btn:not(:disabled):hover {
    transform:
        translateY(-2px);

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );
}

.okey101-take-discard-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}