/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : Jun 16, 2026, 4:16:58 PM
    Author     : etoile
*/

        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html,
        body {
            width: 100%;
            
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: Arial, Helvetica, sans-serif;
            color: #fff;
            background: #040816;
            touch-action: none;
            min-height:100vh;
overflow-y:auto;
        }

        body {
            background:
                linear-gradient(rgba(5, 10, 20, .28), rgba(5, 10, 20, .55)),
                url("images/background-main.webp") center center / cover no-repeat fixed;
        }

        button,
        select {
            font: inherit;
        }

        .gm-app {
            position: relative;
            width: 100vw;
            
            overflow: hidden;
            min-height:100vh;
overflow-y:auto;
        }

        .gm-bg {
            position: fixed;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 14% 20%, rgba(255, 214, 109, .16), transparent 24%),
                radial-gradient(circle at 84% 72%, rgba(125, 255, 107, .12), transparent 28%),
                linear-gradient(180deg, rgba(1, 8, 12, .08), rgba(1, 8, 12, .28));
        }

        .gm-bg::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 18% 70%, rgba(255, 230, 120, .22) 0 2px, transparent 3px),
                radial-gradient(circle at 80% 42%, rgba(255, 230, 120, .20) 0 2px, transparent 3px),
                radial-gradient(circle at 72% 78%, rgba(255, 230, 120, .18) 0 2px, transparent 3px),
                radial-gradient(circle at 34% 88%, rgba(255, 230, 120, .16) 0 2px, transparent 3px);
            filter: blur(.2px);
            opacity: .8;
        }

        .glass {
            border: 1px solid rgba(152, 210, 255, .35);
            background: linear-gradient(180deg, rgba(16, 30, 55, .78), rgba(9, 16, 34, .74));
            box-shadow: 0 22px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10);
            backdrop-filter: blur(16px);
        }

        .screen {
            position: absolute;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
            z-index: 50;
        }

        .screen.is-active {
            display: flex;
        }

        .menu-card {
            width: min(430px, 94vw);
            min-height: min(760px, 94vh);
            padding: 18px 20px 20px;
            border-radius: 28px;
            text-align: center;
            position: relative;
        }

        .menu-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .icon-btn,
        .top-btn,
        .small-btn {
            border: 1px solid rgba(185, 210, 255, .38);
            color: #fff;
            background: linear-gradient(180deg, rgba(34, 42, 76, .9), rgba(23, 25, 51, .9));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 25px rgba(0,0,0,.25);
            cursor: pointer;
        }

        .icon-btn {
            width: 58px;
            height: 52px;
            border-radius: 18px;
            font-size: 22px;
        }

        .lang-btn {
            min-width: 104px;
            height: 52px;
            border-radius: 18px;
            font-weight: 800;
            letter-spacing: .4px;
        }

        .linm-mark {
            margin: 0 auto 8px;
            display: grid;
            place-items: center;
            width: 76px;
            height: 76px;
            border-radius: 50%;
            background: linear-gradient(145deg, #8f5cff, #3a2b92 52%, #24d4b7);
            box-shadow: 0 0 32px rgba(136, 87, 255, .55), inset 0 2px 0 rgba(255,255,255,.28);
            font-size: 42px;
            font-weight: 1000;
        }

        .linm-text {
            margin: -2px 0 4px;
            font-size: 18px;
            font-weight: 900;
            letter-spacing: 1px;
        }

        .game-title {
            margin: 0 0 20px;
            line-height: .92;
            text-transform: uppercase;
            font-size: clamp(52px, 12vw, 76px);
            font-weight: 1000;
            letter-spacing: -2px;
            color: #a8ff3c;
            text-shadow: 0 3px 0 #365d15, 0 8px 0 rgba(0,0,0,.35), 0 0 24px rgba(130,255,70,.42);
        }

        .game-title span {
            display: block;
            color: #f7f2ff;
            text-shadow: 0 3px 0 #45335f, 0 8px 0 rgba(0,0,0,.35), 0 0 24px rgba(177,119,255,.42);
        }

        .game-title small {
            display: block;
            margin-top: 8px;
            color: #9f52ff;
            font-size: 34px;
            letter-spacing: 1px;
            text-shadow: 0 0 20px rgba(157, 74, 255, .75);
        }

        .menu-buttons {
            display: grid;
            gap: 10px;
            width: min(300px, 88%);
            margin: 0 auto 18px;
        }

        .main-btn {
            border: 1px solid rgba(196, 219, 255, .46);
            border-radius: 18px;
            min-height: 56px;
            color: #fff;
            background: linear-gradient(180deg, #6c8dff 0%, #872bdf 100%);
            box-shadow: 0 0 24px rgba(129, 72, 255, .38), inset 0 1px 0 rgba(255,255,255,.3);
            font-weight: 900;
            font-size: 18px;
            letter-spacing: .3px;
            cursor: pointer;
        }

        .main-btn.secondary {
            background: linear-gradient(180deg, rgba(31, 48, 81, .88), rgba(17, 25, 47, .92));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px rgba(0,0,0,.22);
        }

    

        .game-shell {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 114px 14px 96px;
            z-index: 5;
            opacity: 0;
            pointer-events: none;
            transition: opacity .25s ease;
        }

        .game-shell.is-active {
            opacity: 1;
            pointer-events: auto;
        }

        /* ===== 2027 IMAGE HUD ===== */
        .hud {
            position: absolute;
            top: 12px;
            left: 50%;
            transform: translateX(-50%);
            width: min(1040px, calc(100vw - 20px));
            height: 92px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 12px 26px;
            background: url("images/topbar.png") center center / 100% 100% no-repeat;
            border: none;
            box-shadow: none;
            z-index: 30;
        }

        .hud-left,
        .hud-right,
        .hud-stats {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .hud-stats {
            flex: 1;
            justify-content: center;
        }

        .hud-icon-btn,
        .hud-stat {
            border: none;
            outline: none;
            background: transparent;
            color: #fff;
        }

        .hud-icon-btn {
            width: 64px;
            height: 64px;
            padding: 0;
            cursor: pointer;
            display: grid;
            place-items: center;
            filter: drop-shadow(0 4px 9px rgba(0,0,0,.28));
        }

        .hud-icon-btn img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .hud-icon-btn.is-muted {
            opacity: .55;
            filter: grayscale(.45) drop-shadow(0 4px 9px rgba(0,0,0,.28));
        }

        .hud-stat {
            min-width: 148px;
            height: 64px;
            padding: 0 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border-radius: 20px;
            background: rgba(0, 0, 0, .10);
        }

        .hud-stat img {
            width: 42px;
            height: 42px;
            object-fit: contain;
        }

        .hud-stat small {
            display: block;
            margin-bottom: 1px;
            font-size: 11px;
            color: rgba(255,255,255,.72);
            letter-spacing: .8px;
            text-transform: uppercase;
            font-weight: 900;
        }

        .hud-stat span {
            display: block;
            font-size: 23px;
            line-height: 1;
            font-weight: 1000;
            color: #ffffff;
            text-shadow: 0 2px 8px rgba(0,0,0,.45);
        }

        /* ===== GAME FRAME IMAGE ===== */
        .game-frame {
            position: relative;
            width: min(1040px, calc(100vw - 20px));
            height: min(660px, calc(100vh - 214px));
            min-height: 390px;
            filter: drop-shadow(0 26px 55px rgba(0,0,0,.48));
        }

        #game-stage {
            position: absolute;
            inset: 32px 34px 34px;
            border-radius: 18px;
            overflow: hidden;
            background: #020807;
            box-shadow: inset 0 0 36px rgba(0,0,0,.35);
        }

        #game-stage canvas {
            display: block;
            width: 100% !important;
            height: 100% !important;
        }

        .game-frame::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 15;
            background: url("images/frame.png") center center / 100% 100% no-repeat;
        }

      
      

        .ctrl-btn {
            position: absolute;
            width: 52px;
            height: 52px;
            border: 1px solid rgba(219, 207, 255, .50);
            border-radius: 50%;
            color: #fff;
            background: linear-gradient(180deg, rgba(130, 73, 255, .86), rgba(61, 31, 117, .86));
            box-shadow: 0 0 22px rgba(137, 72, 255, .32), inset 0 1px 0 rgba(255,255,255,.24);
            font-size: 24px;
            font-weight: 1000;
            touch-action: none;
        }

        .ctrl-up { top: 0; left: 43px; }
        .ctrl-down { bottom: 0; left: 43px; }
        .ctrl-left { left: 0; top: 43px; }
        .ctrl-right { right: 0; top: 43px; }

        .modal-screen {
            position: absolute;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
            z-index: 80;
            background: rgba(2, 5, 14, .58);
            backdrop-filter: blur(8px);
        }

        .modal-screen.is-active {
            display: flex;
        }

        .modal-card {
            width: min(460px, 94vw);
            max-height: 88vh;
            overflow: auto;
            border-radius: 24px;
            padding: 18px;
            text-align: center;
        }

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

        .modal-title {
            flex: 1;
            margin: 0;
            font-size: 22px;
            font-weight: 1000;
            letter-spacing: .4px;
        }

        .close-btn,
        .back-btn {
            width: 42px;
            height: 42px;
            border-radius: 14px;
        }

        .top-btn {
            width: 46px;
            height: 46px;
            border-radius: 15px;
            font-size: 20px;
            font-weight: 900;
        }

        .settings-list,
        .stats-list {
            display: grid;
            gap: 10px;
        }

        .setting-row,
        .stats-row {
            min-height: 48px;
            padding: 8px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            border-radius: 14px;
            background: rgba(3, 9, 24, .36);
            border: 1px solid rgba(255,255,255,.08);
            font-weight: 800;
        }

        .setting-row select,
        .setting-row button {
            min-width: 108px;
            min-height: 34px;
            border-radius: 12px;
            color: #fff;
            border: 1px solid rgba(255,255,255,.18);
            background: rgba(9, 17, 36, .75);
            text-align: center;
        }

        .switch-btn.is-on {
            background: linear-gradient(180deg, #20c878, #117545);
        }

        .result-card.win h2 {
            color: #ffd95a;
            text-shadow: 0 0 22px rgba(255,217,90,.65);
        }

        .result-card.lose h2 {
            color: #ff626e;
            text-shadow: 0 0 22px rgba(255,98,110,.55);
        }

        .result-card h2 {
            margin: 8px 0 12px;
            font-size: 38px;
            font-weight: 1000;
        }

        .result-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin: 16px 0;
        }

        .result-actions {
            display: grid;
            gap: 10px;
        }

       

        [dir="rtl"] .game-title {
            letter-spacing: 0;
        }

        #winFlash {
            position: absolute;
            inset: 32px 34px 34px;
            pointer-events: none;
            background: radial-gradient(circle, rgba(255, 245, 170, .75), rgba(255, 210, 80, .25), transparent 70%);
            opacity: 0;
            z-index: 22;
            border-radius: 18px;
            transition: opacity .25s ease;
        }

        #winFlash.is-active {
            opacity: 1;
        }

        
        
        .mobile-controls {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    display: block;
    z-index: 40;
    pointer-events: none;
}

.dpad {
    position: relative;
    width: 150px;
    height: 150px;
    pointer-events: auto;
}

.arrows {
    display: none !important;
}

.ctrl-btn {
    position: absolute;
    width: 54px;
    height: 54px;
}

.ctrl-up {
    top: 0;
    left: 48px;
}

.ctrl-down {
    bottom: 0;
    left: 48px;
}

.ctrl-left {
    left: 0;
    top: 48px;
}

.ctrl-right {
    right: 0;
    top: 48px;
}
        @media (max-width: 700px) {
              body {
            background:
                linear-gradient(rgba(5, 10, 20, .28), rgba(5, 10, 20, .55)),
                url("images/background-main-mob.webp") center center / cover no-repeat fixed;
        }
            .screen {
                padding: 10px;
            }

            .menu-card {
                min-height: 96vh;
                padding: 12px 14px 14px;
                border-radius: 24px;
            }

            .linm-mark {
                width: 60px;
                height: 60px;
                font-size: 34px;
            }

            .linm-text {
                font-size: 15px;
            }

            .game-title {
                font-size: 52px;
                margin-bottom: 16px;
            }

            .game-title small {
                font-size: 28px;
            }

            .main-btn {
                min-height: 52px;
                font-size: 16px;
            }

            .game-shell {
                padding-top: 100px;
                padding-bottom: 150px;
            }

            .hud {
                top: 8px;
                width: calc(100vw - 12px);
                height: 76px;
                padding: 8px 12px;
                gap: 4px;
            }

            .hud-left,
            .hud-right,
            .hud-stats {
                gap: 4px;
            }

            .hud-icon-btn {
                width: 44px;
                height: 44px;
            }

            .hud-stat {
                min-width: 66px;
                height: 44px;
                padding: 0 4px;
                gap: 2px;
            }

            .hud-stat img {
                width: 24px;
                height: 24px;
            }

            .hud-stat small {
                display: none;
            }

            .hud-stat span {
                font-size: 14px;
            }

            .game-frame {
                width: calc(100vw - 8px);
                height: min(58vh, 520px);
                min-height: 320px;
            }

            #game-stage {
                inset: 22px 22px 24px;
                border-radius: 14px;
            }

            #winFlash {
                inset: 22px 22px 24px;
                border-radius: 14px;
            }

          .mobile-controls{
    left:50%;
    transform:translateX(-50%);
    justify-content:center;
}

            .dpad,
            .arrows {
                width: 126px;
                height: 126px;
            }

            .ctrl-btn {
                width: 48px;
                height: 48px;
            }

            .ctrl-up { left: 39px; }
            .ctrl-down { left: 39px; }
            .ctrl-left { top: 39px; }
            .ctrl-right { top: 39px; }
        }

        @media (max-width: 380px) {
            .game-title { font-size: 46px; }
            .menu-buttons { width: 94%; }
            .hud-stat { min-width: 58px; }
            .hud-stat img { width: 22px; height: 22px; }
            .hud-stat span { font-size: 12px; }
        }
        
        /* ===== MAIN MENU 2027 ===== */

.menu-screen-2027 {
    align-items: flex-start;
    overflow-y: auto;
    padding: 28px 16px 110px;
}

.menu-card-2027 {
    position: relative;
    width: min(430px, 94vw);
    min-height: auto;
    padding: 76px 24px 26px;
    text-align: center;
    border-radius: 34px;
    background:
        linear-gradient(rgba(5, 20, 18, .22), rgba(5, 20, 18, .34));
    border: 2px solid rgba(255, 215, 95, .45);
    box-shadow:
        0 0 28px rgba(255, 215, 95, .28),
        0 24px 70px rgba(0,0,0,.45),
        inset 0 0 28px rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
}

.menu-top-2027 {
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: min(430px, 94vw);
    z-index: 90;
}

.menu-top-img-btn {
    min-width: 82px;
    height: 48px;
    border: 1px solid rgba(255, 218, 110, .65);
    border-radius: 17px;
    color: #fff8d8;
    background: rgba(13, 42, 34, .78);
    box-shadow:
        0 0 18px rgba(255, 214, 85, .25),
        inset 0 1px 0 rgba(255,255,255,.18);
    font-weight: 900;
    cursor: pointer;
}

.menu-title-img {
    width: min(330px, 88vw);
    height: auto;
    display: block;
    margin: 0 auto 18px;
    filter: drop-shadow(0 16px 18px rgba(0,0,0,.38));
}

.menu-buttons-2027 {
    width: min(330px, 90%);
    margin: 0 auto 18px;
    display: grid;
    gap: 11px;
}

.menu-img-btn {
    width: 100%;
    height: 66px;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.32));
    transition: transform .18s ease, filter .18s ease;
}

.menu-img-btn:active {
    transform: scale(.96);
}

.btn-play { background-image: url("images/btn-play.png"); }
.btn-settings { background-image: url("images/btn-settings.png"); }
.btn-about { background-image: url("images/btn-about.png"); }
.btn-statistics { background-image: url("images/btn-statistics.png"); }
.btn-more-games { background-image: url("images/btn-more-games.png"); }

@media (max-width: 700px) {
    .menu-screen-2027 {
        padding-top: 18px;
        padding-bottom: 100px;
    }

    .menu-card-2027 {
        width: min(390px, 94vw);
        padding: 68px 18px 22px;
    }

    .menu-title-img {
        width: min(300px, 84vw);
        margin-bottom: 14px;
    }

    .menu-img-btn {
        height: 58px;
    }
}
    /* ===== MAIN MENU 2027 ===== */

.menu-screen-2027 {
    align-items: flex-start;
    overflow-y: auto;
    padding: 28px 16px 110px;
}

.menu-card-2027 {
    position: relative;
    width: min(430px, 94vw);
    min-height: auto;
    padding: 76px 24px 26px;
    text-align: center;
    border-radius: 34px;
    background:
        linear-gradient(rgba(5, 20, 18, .22), rgba(5, 20, 18, .34));
    border: 2px solid rgba(255, 215, 95, .45);
    box-shadow:
        0 0 28px rgba(255, 215, 95, .28),
        0 24px 70px rgba(0,0,0,.45),
        inset 0 0 28px rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
}

.menu-top-2027 {
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: min(430px, 94vw);
    z-index: 90;
}

.menu-top-img-btn {
    min-width: 82px;
    height: 48px;
    border: 1px solid rgba(255, 218, 110, .65);
    border-radius: 17px;
    color: #fff8d8;
    background: rgba(13, 42, 34, .78);
    box-shadow:
        0 0 18px rgba(255, 214, 85, .25),
        inset 0 1px 0 rgba(255,255,255,.18);
    font-weight: 900;
    cursor: pointer;
}

.menu-title-img {
    width: min(330px, 88vw);
    height: auto;
    display: block;
    margin: 0 auto 18px;
    filter: drop-shadow(0 16px 18px rgba(0,0,0,.38));
}

.menu-buttons-2027 {
    width: min(330px, 90%);
    margin: 0 auto 18px;
    display: grid;
    gap: 11px;
}

.menu-img-btn {
    width: 100%;
    height: 66px;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.32));
    transition: transform .18s ease, filter .18s ease;
}

.menu-img-btn:active {
    transform: scale(.96);
}

.btn-play { background-image: url("images/btn-play.png"); }
.btn-settings { background-image: url("images/btn-settings.png"); }
.btn-about { background-image: url("images/btn-about.png"); }
.btn-statistics { background-image: url("images/btn-statistics.png"); }
.btn-more-games { background-image: url("images/btn-more-games.png"); }



@media (max-width: 700px) {
    .menu-screen-2027 {
        padding-top: 18px;
        padding-bottom: 100px;
    }

    .menu-card-2027 {
        width: min(390px, 94vw);
        padding: 68px 18px 22px;
    }

    .menu-title-img {
        width: min(300px, 84vw);
        margin-bottom: 14px;
    }

    .menu-img-btn {
        height: 58px;
    }
}

.menu-img-btn{
    color: transparent;
    font-size: 0;
    text-indent: -9999px;
}
.menu-logo{
    display:flex;
    justify-content:center;
    margin-bottom:10px;
}

.menu-logo img{
    width:60px;
    height:auto;
}

.menu-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -6px auto 8px;
    width: 100%;
}

.menu-logo-img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));
}
.menu-title-img{
    display:block;
    margin:0 auto 25px;
}
.screen{
    overflow-y:auto;
}
body{
    overflow-y:auto;
}