/* =====================================
   AA TASKS PRO
   GLOBAL STYLE
   GOLD + BLUE INTERFACE
   ===================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

html{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
    background:#0f172a;
}

body{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    background:#0f172a;
    color:#ffffff;
    overflow-x:hidden;
}

.container{
    width:100%;
    max-width:500px;
    margin:0 auto;
    padding:10px 12px 8px;
}

.page-space{
    padding-bottom:8px;
}

h1,
h2,
h3{
    margin-bottom:12px;
}

p{
    margin-bottom:8px;
}


/* =====================================
   GLOBAL CARDS
   ===================================== */

.card{
    background:#172033;
    border-radius:22px;
    padding:18px;
    margin-top:12px;
    border:1px solid rgba(255,255,255,.07);
    box-shadow:0 5px 18px rgba(0,0,0,.28);
}

.gold-card{
    background:linear-gradient(135deg,#facc15,#eab308);
    color:#111827;
    border-radius:20px;
    padding:18px;
    text-align:center;
    margin-top:12px;
    box-shadow:0 5px 18px rgba(234,179,8,.22);
}


/* =====================================
   INPUTS
   ===================================== */

input,
select,
textarea{
    width:100%;
    padding:13px;
    margin-top:10px;
    margin-bottom:10px;
    border:none;
    border-radius:12px;
    font-size:16px;
    outline:none;
    background:#ffffff;
    color:#111827;
}

textarea{
    resize:vertical;
}

label{
    display:block;
    margin-top:10px;
    margin-bottom:3px;
    color:#cbd5e1;
    font-size:13px;
    font-weight:bold;
}


/* =====================================
   PASSWORD BOX
   EYE BUTTON
   SMALL ICON ON LEFT SIDE
   ===================================== */

.password-box{
    position:relative;
    width:100%;
}

.password-box input{
    width:100%;
    margin-top:10px;
    margin-bottom:10px;

    padding-left:13px;
    padding-right:42px;
}

.password-box button{
    position:absolute;

    right:8px;
    left:auto;
    top:50%;

    transform:translateY(-50%);

    width:28px;
    height:28px;

    min-width:28px;

    margin:0;
    padding:0;

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

    background:transparent !important;

    color:#64748b;

    border:none;
    border-radius:6px;

    font-size:16px;
    line-height:1;

    box-shadow:none;

    cursor:pointer;

    z-index:5;
}

.password-box button:hover{
    background:rgba(15,23,42,.08) !important;
    color:#2563eb;
}


/* =====================================
   GLOBAL BUTTONS
   ===================================== */

button{
    width:70%;
    padding:13px;
    margin:8px auto 0;
    display:block;

    border:none;
    border-radius:12px;

    background:#2563eb;
    color:#ffffff;

    font-size:15px;
    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

button:hover{
    background:#1d4ed8;
}

button:active{
    transform:scale(.98);
}

button:disabled{
    background:#16a34a;
    cursor:not-allowed;
}
/* =====================================
   STATS
   ===================================== */

.stats-card{
    background:#172033;
    border-radius:20px;
    padding:18px;
    margin-top:12px;
    border:1px solid rgba(255,255,255,.07);
}

.stats-row{
    display:flex;
    gap:8px;
    margin-top:12px;
}

.stat-box{
    flex:1;
    background:#1e293b;
    border-radius:15px;
    padding:13px;
    text-align:center;
}

.stat-box h2{
    color:#facc15;
    margin:8px 0;
}


/* =====================================
   OLD NAVIGATION
   ===================================== */

.bottom-nav:not(.dashboard-bottom-nav){
    display:none !important;
}


/* =====================================
   DASHBOARD
   ===================================== */

#dashboardPage{
    width:100%;

    /*
       The dashboard occupies the available
       screen height without creating a huge
       extra area underneath.
    */
    min-height:calc(100dvh - 18px);

    display:flex;
    flex-direction:column;

    overflow-x:hidden;
}


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

.dashboard-topbar{
    display:grid;

    grid-template-columns:42px 1fr 42px;

    align-items:center;

    gap:7px;

    width:100%;

    margin-top:0;
    margin-bottom:7px;

    flex-shrink:0;
}

.dashboard-top-icon{
    width:40px;
    height:40px;

    padding:0;
    margin:0;

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

    background:#172033;

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

    border-radius:50%;

    color:#ffffff;

    font-size:17px;

    box-shadow:0 4px 12px rgba(0,0,0,.25);
}

.dashboard-top-icon:hover{
    background:#1e293b;
}

.dashboard-welcome{
    text-align:center;
    min-width:0;
}

.dashboard-welcome p{
    color:#94a3b8;
    font-size:10px;
    margin-bottom:1px;
}

.dashboard-welcome h2{
    font-size:17px;
    margin:0;

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


/* =====================================
   WALLET CAROUSEL
   ===================================== */

.wallet-carousel{
    width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;

    border-radius:28px;

    flex-shrink:0;
}

.wallet-carousel::-webkit-scrollbar{
    display:none;
}

.wallet-track{
    display:flex;
    width:300%;
}

.wallet-slide{
    width:33.333333%;
    flex:0 0 33.333333%;

    min-height:165px;

    padding:18px;

    border-radius:28px;

    color:#ffffff;

    scroll-snap-align:start;
}


/* =====================================
   GOLD + BLUE WALLET COLORS
   ===================================== */

.gold-wallet{
    background:linear-gradient(
        135deg,
        #facc15,
        #eab308
    );

    color:#111827;
}

.blue-wallet{
    background:linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color:#ffffff;
}

.green-wallet{
    background:linear-gradient(
        135deg,
        #16a34a,
        #15803d
    );

    color:#ffffff;
}

.wallet-slide-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.wallet-slide p{
    font-size:12px;
    margin-bottom:5px;
    opacity:.82;
}

.wallet-slide h1{
    font-size:29px;
    margin:0;
    font-weight:800;
}

.wallet-symbol{
    width:45px;
    height:45px;

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

    border-radius:50%;

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

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

    font-size:21px;
    font-weight:bold;
}

.wallet-slide-footer{
    margin-top:15px;
    padding-top:8px;

    border-top:1px solid rgba(255,255,255,.2);

    font-size:10px;
    opacity:.7;
}


/* =====================================
   WALLET INDICATORS
   ===================================== */

.wallet-indicators{
    height:12px;

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

    gap:5px;

    flex-shrink:0;
}

.wallet-dot{
    width:6px;
    height:6px;

    background:#64748b;

    border-radius:50%;
}

.wallet-dot.active{
    width:15px;

    border-radius:5px;

    background:#facc15;
}


/* =====================================
   WALLET ACTIONS
   ===================================== */

.wallet-actions{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:8px;

    margin-top:5px;
    padding:0;

    flex-shrink:0;
}

.wallet-action{
    min-height:61px;

    padding:7px 4px;

    margin:0;

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

    gap:4px;

    background:#172033;

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

    border-radius:30px;

    color:#ffffff;
}

.wallet-action span{
    font-size:19px;
}

.wallet-action small{
    font-size:10px;
    color:#cbd5e1;
}

.wallet-action:hover{
    background:#1e293b;
}

.activation-action{
    border:1px solid rgba(250,204,21,.35);
}


/* =====================================
   SERVICES
   ===================================== */

.dashboard-services{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:0;

    margin-top:8px;

    padding:14px 4px;

    background:#172033;

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

    border-radius:28px;

    flex-shrink:0;
}

.service-card{
    position:relative;

    min-width:0;
    min-height:90px;

    padding:7px 3px;

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

    text-align:center;

    background:transparent;

    border:none;
    border-radius:0;
}

.service-card + .service-card{
    border-left:1px solid rgba(255,255,255,.07);
}

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

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

    border-radius:50%;

    font-size:18px;

    margin-bottom:7px;
}

.airtime-service{
    background:rgba(168,85,247,.16);
}

.data-service{
    background:rgba(245,158,11,.14);
}

.promotion-service{
    background:rgba(37,99,235,.16);
}

.daily-service-icon{
    background:rgba(34,197,94,.14);
}

.service-card strong{
    font-size:12px;
    line-height:1.2;
    color:#cbd5e1;
}

.service-card span{
    color:#64748b;
    font-size:8px;

    margin-top:3px;

    line-height:1.1;
}
.wallet-action{
    width:100%;
    display:block;
}

/* =====================================
   DAILY CHECK-IN
   ===================================== */

.daily-service #dailyBonusBtn{
    width:auto;

    padding:4px 7px;

    margin:4px 0 0;

    border-radius:7px;

    font-size:8px;

    background:#2563eb;
}


/* =====================================
   REFERRAL LINK
   ===================================== */

.dashboard-referral{
    min-height:63px;

    margin-top:8px;

    padding:8px 9px;

    display:flex;
    align-items:center;

    gap:9px;

    background:#172033;

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

    border-radius:25px;

    box-shadow:0 4px 12px rgba(0,0,0,.18);

    flex-shrink:0;
}

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

    min-width:42px;

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

    background:rgba(37,99,235,.14);

    border-radius:50%;

    font-size:18px;

    color:#60a5fa;
}

.referral-content{
    flex:1;
    min-width:0;
}

.referral-content small{
    display:block;

    color:#64748b;

    font-size:9px;

    margin-bottom:3px;
}

.referral-content strong{
    display:block;

    color:#e2e8f0;

    font-size:12px;

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

.dashboard-referral button{
    width:44px;
    height:44px;

    padding:0;
    margin:0;

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

    border-radius:50%;

    background:#2563eb;

    font-size:11px;

    box-shadow:0 4px 15px rgba(37,99,235,.25);
}


/* =====================================
   FINAL TASK + HISTORY HEIGHT FIX
   ===================================== */

#dashboardPage .dashboard-shortcuts{
    flex:1 1 0;
    min-height:150px;

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:10px;
    margin-top:8px;

    align-items:stretch;
}

#dashboardPage .dashboard-shortcut{
    height:auto;
    min-height:100%;

    display:flex;
    align-items:center;

    padding:12px;
}

/* =====================================
   TASK & HISTORY CARDS
   ===================================== */

#dashboardPage .dashboard-shortcut{

    /*
       No fixed height here.
       The grid stretches both cards.
    */
    height:100%;

    min-height:0;

    display:flex;

    align-items:center;

    gap:9px;

    padding:12px;

    background:#172033;

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

    border-radius:24px;

    overflow:hidden;
}

.shortcut-icon{
    width:40px;
    height:40px;

    min-width:40px;

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

    background:#1e293b;

    border-radius:50%;

    font-size:17px;

    color:#60a5fa;
}

.dashboard-shortcut strong{
    display:block;

    color:#facc15;

    font-size:16px;

    line-height:1;
}

.dashboard-shortcut small{
    display:block;

    color:#94a3b8;

    font-size:9px;

    margin-top:4px;
}


/* =====================================
   BOTTOM NAVIGATION
   ALWAYS PUSHED DOWN
   ===================================== */

#dashboardPage .dashboard-bottom-nav{

    flex:0 0 auto;

    width:100%;

    height:61px;

    margin-top:10px;

    margin-bottom:2px;

    padding:5px;

    background:#172033;

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

    border-radius:32px;

    box-shadow:0 6px 22px rgba(0,0,0,.35);

    display:flex;

    justify-content:space-around;

    align-items:center;

    gap:3px;

    z-index:1000;
}

.dashboard-bottom-nav a{

    flex:1;

    min-width:0;

    height:51px;

    margin:0;

    padding:4px 2px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:2px;

    border-radius:27px;

    color:#64748b;

    text-decoration:none;

    text-align:center;

    font-size:19px;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.dashboard-bottom-nav a small{
    display:block;

    font-size:10px;
    line-height:1;

    color:#64748b;
}

.dashboard-bottom-nav a.active{
    background:rgba(37,99,235,.18);

    color:#60a5fa;

    font-weight:bold;

    box-shadow:0 0 18px rgba(37,99,235,.10);
}

.dashboard-bottom-nav a.active small{
    color:#60a5fa;
}

.dashboard-bottom-nav a:hover{
    background:rgba(37,99,235,.12);

    color:#ffffff;

    transform:translateY(-1px);
}

.dashboard-bottom-nav a:hover small{
    color:#ffffff;
}


/* =====================================
   REMOVE UNWANTED SERVICES
   ===================================== */

.bulk-sms-service,
#bulkSmsBtn,
[data-service="bulk-sms"]{
    display:none !important;
}

.boost-service,
#boostService,
[data-service="boost"]{
    display:none !important;
}


/* =====================================
   LOADING SCREEN
   ===================================== */

#loadingScreen{
    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:#0f172a;

    display:flex;
    flex-direction:column;

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

    z-index:9999;

    color:#ffffff;
}

.loader{
    width:55px;
    height:55px;

    border:5px solid rgba(255,255,255,.15);

    border-top:5px solid #facc15;

    border-right:5px solid #2563eb;

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin-bottom:20px;
}

@keyframes spin{
    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }
}

body.loaded #loadingScreen{
    display:none;
}


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

#toastContainer{
    position:fixed;

    top:20px;
    left:50%;

    transform:translateX(-50%);

    width:calc(100% - 30px);
    max-width:420px;

    display:flex;
    flex-direction:column;

    gap:10px;

    z-index:10000;

    pointer-events:none;
}

.app-toast{
    position:relative;

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

    display:flex;
    align-items:center;

    gap:12px;

    padding:14px 42px 14px 16px;

    background:#172033;

    color:#ffffff;

    border-radius:15px;

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

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

    font-size:15px;
    line-height:1.4;

    overflow:hidden;

    pointer-events:auto;

    opacity:0;

    transform:
        translateY(-25px)
        scale(.96);

    animation:toastSlideIn .35s ease forwards;
}

.app-toast-icon{
    width:32px;
    height:32px;
    min-width:32px;

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

    border-radius:50%;

    font-size:17px;
    font-weight:bold;
}

.app-toast-message{
    flex:1;
    word-break:break-word;
}

.app-toast-close{
    position:absolute;

    top:50%;
    right:10px;

    transform:translateY(-50%);

    width:28px;
    height:28px;

    margin:0;
    padding:0;

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

    background:transparent;

    color:#94a3b8;

    border:none;
    border-radius:50%;

    font-size:20px;
    line-height:1;

    cursor:pointer;
}

.app-toast-close:hover{
    background:rgba(255,255,255,.08);
    color:#ffffff;
}


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

.app-toast.success{
    border-left:4px solid #22c55e;
}

.app-toast.success .app-toast-icon{
    background:rgba(34,197,94,.15);
    color:#22c55e;
}

.app-toast.error{
    border-left:4px solid #ef4444;
}

.app-toast.error .app-toast-icon{
    background:rgba(239,68,68,.15);
    color:#ef4444;
}

.app-toast.warning{
    border-left:4px solid #f59e0b;
}

.app-toast.warning .app-toast-icon{
    background:rgba(245,158,11,.15);
    color:#f59e0b;
}

.app-toast.info{
    border-left:4px solid #3b82f6;
}

.app-toast.info .app-toast-icon{
    background:rgba(59,130,246,.15);
    color:#3b82f6;
}


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

.app-toast.toast-hide{
    animation:toastSlideOut .3s ease forwards;
}

@keyframes toastSlideIn{
    0%{
        opacity:0;
        transform:
            translateY(-25px)
            scale(.96);
    }

    100%{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes toastSlideOut{
    0%{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }

    100%{
        opacity:0;
        transform:
            translateY(-20px)
            scale(.96);
    }
}


/* =====================================
   IN-APP NOTIFICATIONS
   ===================================== */

#appNotificationContainer{
    position:fixed;

    top:20px;
    left:50%;

    transform:translateX(-50%);

    width:calc(100% - 30px);
    max-width:420px;

    display:flex;
    flex-direction:column;

    gap:10px;

    z-index:10001;

    pointer-events:none;
}

.app-notification{
    position:relative;

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

    display:flex;
    align-items:center;

    gap:12px;

    padding:14px 45px 14px 14px;

    background:#172033;

    color:#ffffff;

    border-radius:15px;

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

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

    opacity:0;

    transform:
        translateY(-25px)
        scale(.96);

    transition:
        opacity .3s ease,
        transform .3s ease;

    pointer-events:auto;

    overflow:hidden;
}

.app-notification.show{
    opacity:1;

    transform:
        translateY(0)
        scale(1);
}

.notification-icon{
    width:38px;
    height:38px;
    min-width:38px;

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

    border-radius:50%;

    font-size:19px;
}

.notification-content{
    flex:1;
    min-width:0;
}

.notification-title{
    font-size:15px;
    font-weight:bold;
    margin-bottom:4px;
}

.notification-message{
    font-size:14px;
    line-height:1.4;
    color:#cbd5e1;
    word-break:break-word;
}

.notification-close{
    position:absolute;

    top:50%;
    right:10px;

    transform:translateY(-50%);

    width:30px;
    height:30px;

    margin:0;
    padding:0;

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

    background:transparent;

    color:#94a3b8;

    border:none;
    border-radius:50%;

    font-size:22px;
    line-height:1;

    cursor:pointer;
}

.notification-close:hover{
    background:rgba(255,255,255,.08);
    color:#ffffff;
}


/* =====================================
   NOTIFICATION TYPES
   ===================================== */

.app-notification.success{
    border-left:4px solid #22c55e;
}

.app-notification.success .notification-icon{
    background:rgba(34,197,94,.15);
    color:#22c55e;
}

.app-notification.error{
    border-left:4px solid #ef4444;
}

.app-notification.error .notification-icon{
    background:rgba(239,68,68,.15);
    color:#ef4444;
}

.app-notification.warning{
    border-left:4px solid #f59e0b;
}

.app-notification.warning .notification-icon{
    background:rgba(245,158,11,.15);
    color:#f59e0b;
}

.app-notification.info{
    border-left:4px solid #3b82f6;
}

.app-notification.info .notification-icon{
    background:rgba(59,130,246,.15);
    color:#3b82f6;
}


/* =====================================
   MOBILE
   ===================================== */

@media(max-width:480px){

    .container{
        width:100%;
        padding-left:10px;
        padding-right:10px;
    }

    /* Keep dashboard full height */
    #dashboardPage{
        min-height:calc(100dvh - 18px);
    }

    .dashboard-services{
        gap:0;
        padding-left:2px;
        padding-right:2px;
    }

    .service-card{
        padding-left:2px;
        padding-right:2px;
    }

    .wallet-action{
        padding-left:3px;
        padding-right:3px;
    }

    #toastContainer{
        top:14px;
        width:calc(100% - 24px);
    }

    .app-toast{
        min-height:56px;

        padding:
            13px
            40px
            13px
            14px;

        border-radius:13px;
        font-size:14px;
    }

    .app-toast-icon{
        width:30px;
        height:30px;
        min-width:30px;
        font-size:16px;
    }

    #appNotificationContainer{
        top:14px;
        width:calc(100% - 24px);
    }

    .app-notification{
        min-height:68px;

        padding:
            13px
            42px
            13px
            13px;

        border-radius:13px;
    }

    .notification-icon{
        width:34px;
        height:34px;
        min-width:34px;
        font-size:17px;
    }

    .notification-title{
        font-size:14px;
    }

    .notification-message{
        font-size:13px;
    }
}


/* =====================================
   SMALL PHONES
   ===================================== */

@media(max-width:380px){

    .container{
        padding-left:8px;
        padding-right:8px;
    }

    .dashboard-topbar{
        grid-template-columns:38px 1fr 38px;
        gap:5px;
    }

    .dashboard-top-icon{
        width:36px;
        height:36px;
        font-size:16px;
    }

    .dashboard-welcome h2{
        font-size:16px;
    }

    .wallet-slide{
        min-height:155px;
        padding:16px;
    }

    .wallet-slide h1{
        font-size:27px;
    }

    .wallet-symbol{
        width:42px;
        height:42px;
        font-size:19px;
    }

    .service-card{
        min-height:84px;
    }

    .service-icon{
        width:37px;
        height:37px;
        font-size:16px;
        margin-bottom:5px;
    }

    .service-card strong{
        font-size:10px;
    }

    .service-card span{
        font-size:7px;
    }

    .dashboard-referral{
        min-height:59px;
    }

    /*
       Still allow Task + History
       to stretch into remaining space.
    */
    #dashboardPage .dashboard-shortcuts{
        min-height:0;
        flex:1 1 auto;
    }

    #dashboardPage .dashboard-shortcut{
        min-height:0;
    }
}


/* =====================================
   SHORT SCREEN DEVICES
   ===================================== */

@media(max-height:720px){

    .container{
        padding-top:7px;
        padding-bottom:5px;
    }

    .dashboard-topbar{
        margin-bottom:5px;
    }

    .wallet-slide{
        min-height:145px;
        padding:15px;
    }

    .wallet-slide h1{
        font-size:27px;
    }

    .wallet-indicators{
        height:8px;
    }

    .wallet-actions{
        margin-top:4px;
    }

    .wallet-action{
        min-height:54px;
    }

    .dashboard-services{
        margin-top:6px;

        padding-top:8px;
        padding-bottom:8px;
    }

    .service-card{
        min-height:78px;
    }

    .dashboard-referral{
        margin-top:6px;
        min-height:57px;
    }

    /*
       IMPORTANT:
       Do NOT disable flex here.
       The Task + History cards must
       continue filling the free space.
    */
    #dashboardPage .dashboard-shortcuts{
        flex:1 1 auto;
        min-height:0;
        margin-top:6px;
    }

    #dashboardPage .dashboard-shortcut{
        min-height:0;
    }

    #dashboardPage .dashboard-bottom-nav{
        height:57px;
        margin-top:6px;
        margin-bottom:2px;
    }

    .dashboard-bottom-nav a{
        height:47px;
        font-size:17px;
    }
}


/* =====================================
   VERY SHORT SCREENS
   ===================================== */

@media(max-height:640px){

    .container{
        padding-top:5px;
        padding-bottom:3px;
    }

    .dashboard-topbar{
        margin-bottom:4px;
    }

    .dashboard-top-icon{
        width:35px;
        height:35px;
    }

    .dashboard-welcome h2{
        font-size:15px;
    }

    .wallet-slide{
        min-height:135px;
        padding:13px;
    }

    .wallet-slide h1{
        font-size:24px;
    }

    .wallet-symbol{
        width:38px;
        height:38px;
        font-size:17px;
    }

    .wallet-slide-footer{
        margin-top:8px;
        padding-top:5px;
    }

    .wallet-action{
        min-height:48px;
        border-radius:25px;
    }

    .wallet-action span{
        font-size:16px;
    }

    .wallet-action small{
        font-size:9px;
    }

    .dashboard-services{
        padding-top:5px;
        padding-bottom:5px;
    }

    .service-card{
        min-height:67px;
    }

    .service-icon{
        width:31px;
        height:31px;
        font-size:14px;
        margin-bottom:3px;
    }

    .service-card strong{
        font-size:9px;
    }

    .service-card span{
        display:none;
    }

    .dashboard-referral{
        min-height:51px;
        padding:5px 7px;
    }

    .referral-icon{
        width:35px;
        height:35px;
        min-width:35px;
    }

    .dashboard-referral button{
        width:36px;
        height:36px;
    }

    /*
       Task + History continue filling
       whatever space remains.
    */
    #dashboardPage .dashboard-shortcuts{
        flex:1 1 auto;
        min-height:0;
        gap:8px;
        margin-top:5px;
    }

    #dashboardPage .dashboard-shortcut{
        min-height:0;
        padding:7px;
    }

    .shortcut-icon{
        width:31px;
        height:31px;
        min-width:31px;
    }

    .dashboard-shortcut strong{
        font-size:13px;
    }

    #dashboardPage .dashboard-bottom-nav{
        height:53px;
        margin-top:5px;
        margin-bottom:1px;
        padding:4px;
    }

    .dashboard-bottom-nav a{
        height:45px;
        font-size:16px;
    }

    .dashboard-bottom-nav a small{
        font-size:8px;
    }
}


/* =====================================
   REDUCED MOTION
   ===================================== */

@media(prefers-reduced-motion:reduce){

    .app-toast{
        animation:none;
        opacity:1;
        transform:none;
    }

    .app-toast.toast-hide{
        animation:none;
        opacity:0;
    }

    .app-notification{
        transition:none;
        transform:none;
    }
}

.promotion-modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(10,40,50,.50);

    z-index:9999;

    align-items:center;

    justify-content:center;

    padding:20px;

}

.promotion-modal.show{

    display:flex;

}

.promotion-box{

    width:100%;

    max-width:380px;

    background:#fff;

    border-radius:22px;

    padding:28px 22px;

    text-align:center;

    position:relative;

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

    animation:promotionPop .25s ease;

}

.promotion-close{

    position:absolute;

    top:10px;

    right:16px;

    font-size:28px;

    cursor:pointer;

    color:#777;

}

.promotion-modal-icon{

    font-size:48px;

    margin-bottom:10px;

}

.promotion-box h3{

    margin:8px 0 12px;

    font-size:21px;

}

.promotion-box p{

    margin:8px 0;

    line-height:1.5;

    font-size:14px;

    color:#555;

}

.promotion-telegram{

    margin:18px 0;

    padding:12px;

    border-radius:12px;

    background:#f1f5f9;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.promotion-telegram span{

    color:#777;

}

.promotion-telegram strong{

    color:#168acd;

}

.promotion-contact-btn{

    width:100%;

    border:none;

    padding:13px;

    border-radius:12px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

}

@keyframes promotionPop{

    from{

        transform:scale(.9);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/* =====================================
   UNIVERSAL PAGE BACK BUTTON
===================================== */

.page-back-btn{
    position:fixed;
    top:12px;
    right:12px;
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    background:#1976d2;
    color:#fff;
    font-size:24px;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:9999;
    box-shadow:0 3px 10px rgba(0,0,0,.25);
    padding:0;
}

.page-back-btn:active{
    transform:scale(.92);
}

/* =====================================================
   AA TASKS PRO — WORDCROSS
   DARK • GOLD + BLUE • COMPACT
   TIMER LOGIC UNTOUCHED
===================================================== */

#boostPage{
 position:relative;width:100%;min-height:100%;color:#fff;
 background:radial-gradient(circle at 50% 0%,rgba(27,91,170,.2),transparent 42%),
 linear-gradient(180deg,#061329,#07172d 52%,#041126);
}

#boostPage .boost-header{
 display:flex;align-items:center;justify-content:center;text-align:center;
 margin:0 auto 18px;padding:8px 12px 4px;
}
#boostPage .boost-header>div{width:100%}
#boostPage .boost-header h2{
 margin:0;color:#fff;font-size:27px;line-height:1.15;font-weight:900;
}
#boostPage .boost-header p{
 margin:5px 0 0;color:rgba(255,255,255,.68);font-size:13px;font-weight:600;
}

/* CARD */
.wordcross-card{
 position:relative;width:100%;max-width:960px;margin:0 auto 22px;padding:14px;
 overflow:hidden;background:linear-gradient(145deg,rgba(20,39,70,.96),rgba(6,22,45,.98));
 border:1px solid rgba(116,160,218,.25);border-radius:20px;
 box-shadow:0 20px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);
}

/* HEADER */
.wordcross-card-header{
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 padding:2px 12px 13px;
}
.wordcross-card-header>div:first-child{
 display:flex;align-items:center;gap:12px;
}
.wordcross-card-header>div:first-child:before{
 content:"🧩";display:flex;align-items:center;justify-content:center;
 width:56px;height:56px;flex-shrink:0;border-radius:14px;
 background:linear-gradient(145deg,#7137e8,#8a36ff);
 font-size:29px;box-shadow:0 8px 20px rgba(103,45,220,.35);
}
.wordcross-card-header h3{
 margin:0;color:#fff;font-size:25px;line-height:1.1;font-weight:900;
}
.wordcross-card-header p{
 margin:5px 0 0;color:rgba(255,255,255,.68);font-size:13px;font-weight:600;
}

/* BADGE */
.wordcross-status-badge{
 flex-shrink:0;padding:7px 12px;border-radius:9px;
 background:linear-gradient(180deg,#29a934,#168b22);
 color:#fff;font-size:11px;font-weight:900;
 box-shadow:0 5px 13px rgba(19,152,37,.25);
}

/* STATS */
.wordcross-stats{
 display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 10px;
}
.wordcross-stat{
 min-height:68px;display:flex;flex-direction:column;align-items:center;
 justify-content:center;padding:8px;
 background:linear-gradient(145deg,rgba(30,52,86,.88),rgba(14,31,57,.92));
 border:1px solid rgba(113,154,211,.16);border-radius:14px;
}
.wordcross-stat span{margin-bottom:3px;color:#d3dbe8;font-size:11px;font-weight:600}
.wordcross-stat strong{color:#fff;font-size:20px;line-height:1;font-weight:900}

/* LIVES */
.wordcross-lives-box{
 display:flex;align-items:center;justify-content:space-between;gap:10px;
 margin:0 0 12px;padding:11px 14px;
 background:linear-gradient(145deg,rgba(29,50,83,.9),rgba(12,28,52,.95));
 border:1px solid rgba(113,154,211,.17);border-radius:14px;
}
.wordcross-lives-title{display:flex;align-items:center;gap:8px}
.wordcross-lives-title span{color:#d9e0eb;font-size:12px;font-weight:700}
.wordcross-lives-title strong{color:#fff;font-size:17px;letter-spacing:1px}
.wordcross-plan-text{
 padding:5px 9px;border-radius:8px;background:rgba(245,197,66,.14);
 border:1px solid rgba(245,197,66,.28);color:#f5c542;
 font-size:10px;font-weight:900;
}

/* GAME */
.wordcross-game-area{
 position:relative;margin:0;padding:0;overflow:hidden;
 background:linear-gradient(180deg,#081a35,#06162e);
 border:1px solid rgba(95,139,198,.2);border-radius:18px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.wordcross-screen{position:relative;padding:20px 15px 22px;text-align:center}

/* START */
#wordCrossStartScreen{padding:30px 18px 32px}
#wordCrossStartScreen .wordcross-game-icon,
#wordCrossCompleteScreen .wordcross-game-icon,
#wordCrossNoLivesScreen .wordcross-game-icon,
#wordCrossDisabledScreen .wordcross-game-icon{
 display:flex;align-items:center;justify-content:center;
 margin:0 auto 14px;border-radius:22px;font-size:38px;
}
#wordCrossStartScreen .wordcross-game-icon{
 width:76px;height:76px;background:linear-gradient(145deg,#7037e9,#9b43ff);
 box-shadow:0 10px 25px rgba(100,43,222,.35);
}
#wordCrossStartScreen h3{color:#fff;font-size:24px}
#wordCrossStartScreen p,#wordCrossCompleteScreen p{color:#9eacc0}

/* CURRENT WORD */
.wordcross-current-word{
 min-height:58px;display:flex;align-items:center;justify-content:center;
 width:min(92%,440px);margin:4px auto 16px;padding:8px 18px;
 border-radius:13px;background:linear-gradient(145deg,rgba(27,46,76,.98),rgba(12,27,51,.98));
 border:1px solid rgba(112,154,213,.25);color:#f5c542;
 font-size:25px;font-weight:900;letter-spacing:7px;
 box-shadow:0 8px 20px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.03);
}

/* TITLES */
.wordcross-section-title{
 margin:13px 0 9px;color:#cbd5e4;font-size:11px;font-weight:800;
}

/* REQUIRED WORDS */
.wordcross-required-area{margin-bottom:12px}
.wordcross-required-words{
 display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;
}
.wordcross-required-word{
 min-width:44px;padding:7px 10px;border-radius:8px;
 background:linear-gradient(145deg,#17283f,#101f35);
 border:1px solid rgba(108,146,196,.18);color:#65758d;
 font-size:11px;font-weight:900;letter-spacing:1px;
}
.wordcross-required-word.found{
 background:linear-gradient(145deg,#126b3b,#0d4f2d);
 border-color:rgba(39,204,104,.4);color:#71f0a4;
}

/* LETTER WHEEL */
.wordcross-letters{
 position:relative;width:270px;height:270px;display:block;margin:18px auto 20px;
 border-radius:50%;
 background:radial-gradient(circle,rgba(42,53,68,.96),rgba(25,35,49,.98) 56%,rgba(8,17,31,.98) 58%);
 border:7px solid #303c4d;
 box-shadow:0 0 0 2px #111d2d,0 12px 30px rgba(0,0,0,.45),
 inset 0 4px 15px rgba(255,255,255,.05);
}
.wordcross-letters:before{
 content:"";position:absolute;inset:24px;border-radius:50%;
 border:2px solid rgba(245,197,66,.12);pointer-events:none;
}

/* LETTERS */
.wordcross-letter-btn{
 position:absolute;left:50%;top:50%;width:64px;height:64px;
 margin:-32px 0 0 -32px;display:flex;align-items:center;justify-content:center;
 border:1px solid rgba(255,255,255,.12);border-radius:50%;
 background:linear-gradient(145deg,#273244,#161f2d);color:#f5c542;
 font-size:25px;font-weight:900;cursor:pointer;
 box-shadow:0 7px 15px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
 transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
 -webkit-tap-highlight-color:transparent;
}
.wordcross-letter-btn:nth-child(1){transform:translate(0,-88px)}
.wordcross-letter-btn:nth-child(2){transform:translate(76px,-38px)}
.wordcross-letter-btn:nth-child(3){transform:translate(76px,38px)}
.wordcross-letter-btn:nth-child(4){transform:translate(0,88px)}
.wordcross-letter-btn:nth-child(5){transform:translate(-76px,38px)}
.wordcross-letter-btn:nth-child(6){transform:translate(-76px,-38px)}
.wordcross-letter-btn:nth-child(7){transform:translate(-44px,-70px)}
.wordcross-letter-btn:nth-child(8){transform:translate(44px,-70px)}
.wordcross-letter-btn:active{transform:scale(.93)}
.wordcross-letter-btn.selected{
 background:linear-gradient(145deg,#f9d45c,#d99d19);color:#142238;
 border-color:#ffdc6b;box-shadow:0 0 0 4px rgba(245,197,66,.1),0 8px 20px rgba(245,197,66,.3);
}
.wordcross-letter-btn:disabled{opacity:.35;cursor:not-allowed}

/* CENTER WORD */
.wordcross-letters:after{
 content:"WORD";position:absolute;left:50%;top:50%;
 transform:translate(-50%,-50%);padding:6px 16px;border-radius:14px;
 background:linear-gradient(180deg,#239c42,#11762c);color:#fff;
 font-size:14px;font-weight:900;pointer-events:none;
}

/* CONTROLS */
.wordcross-controls{
 display:grid;grid-template-columns:1fr 1.4fr;gap:9px;width:min(100%,430px);margin:0 auto;
}
.wordcross-primary-btn,.wordcross-secondary-btn{
 width:100%;min-height:48px;padding:10px 15px;border-radius:13px;
 font-weight:900;cursor:pointer;
}
.wordcross-primary-btn{
 border:1px solid rgba(86,151,255,.45);
 background:linear-gradient(180deg,#1765ed,#0647c9);color:#fff;font-size:14px;
 box-shadow:0 7px 18px rgba(0,75,220,.3),inset 0 1px 0 rgba(255,255,255,.13);
}
.wordcross-primary-btn:hover{transform:translateY(-1px)}
.wordcross-primary-btn:active,.wordcross-secondary-btn:active{transform:scale(.97)}
.wordcross-primary-btn:disabled,.wordcross-secondary-btn:disabled,
.wordcross-ad-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.wordcross-secondary-btn{
 border:1px solid rgba(112,151,201,.23);
 background:linear-gradient(145deg,#1a2a41,#111f34);color:#dce5f1;font-size:13px;
}
.wordcross-secondary-btn:hover{background:#20334d}

/* MESSAGE */
.wordcross-message{
 min-height:20px;margin:10px auto 0;padding:0 6px;color:#91a1b7;
 font-size:12px;font-weight:700;line-height:1.4;
}
.wordcross-message.success{color:#55e88c}
.wordcross-message.error{color:#ff6969}

/* TIMER — VISUAL ONLY */
#wordCrossTimeLeft,#wordCrossTimer,#wordCrossTime{
 display:inline-flex;align-items:center;justify-content:center;min-width:92px;
 padding:8px 13px;border-radius:10px;background:linear-gradient(145deg,#49222a,#2c1720);
 border:1px solid rgba(244,77,77,.4);color:#ff7777;font-size:16px;font-weight:900;
}
#wordCrossTimeLeft.danger,#wordCrossTimer.danger,#wordCrossTime.danger{
 color:#ff5252;background:linear-gradient(145deg,#5a2027,#30141a);
 animation:wordcrossTimerPulse 1s infinite;
}
@keyframes wordcrossTimerPulse{50%{opacity:.65}}

/* REWARD */
.wordcross-reward-box{
 display:flex;align-items:center;justify-content:space-between;width:min(100%,300px);
 margin:17px auto;padding:14px 17px;border-radius:13px;
 background:linear-gradient(145deg,rgba(20,74,64,.95),rgba(11,48,42,.98));
 border:1px solid rgba(49,204,111,.2);
}
.wordcross-reward-box span{color:#d5e4df;font-size:12px;font-weight:800}
.wordcross-reward-box strong{color:#fff;font-size:23px;font-weight:900}

/* COMPLETE */
#wordCrossCompleteScreen{
 padding:28px 15px 30px;
 background:radial-gradient(circle at 50% 20%,rgba(28,176,83,.1),transparent 45%);
}
#wordCrossCompleteScreen .wordcross-game-icon{
 width:72px;height:72px;background:linear-gradient(145deg,#15923d,#08702c);
 box-shadow:0 9px 22px rgba(13,143,58,.3);
 animation:wordcrossCelebrate .7s ease;
}
#wordCrossCompleteScreen h3{color:#fff;font-size:23px}

/* NO LIVES */
#wordCrossNoLivesScreen{
 padding:28px 15px 30px;
 background:radial-gradient(circle at 50% 20%,rgba(133,41,211,.12),transparent 45%);
}
#wordCrossNoLivesScreen .wordcross-game-icon{
 width:72px;height:72px;background:linear-gradient(145deg,#7023c5,#49138d);
 box-shadow:0 9px 22px rgba(105,31,185,.3);
}
#wordCrossNoLivesScreen h3{color:#fff}

/* AD RECOVERY */
.wordcross-ad-box{
 width:min(100%,320px);margin:16px auto;padding:16px;border-radius:15px;
 background:linear-gradient(145deg,rgba(28,43,66,.96),rgba(14,27,47,.98));
 border:1px solid rgba(112,151,201,.18);
 box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.wordcross-ad-counter{
 margin-bottom:11px;color:#aab8c9;font-size:11px;font-weight:800;
}
.wordcross-ad-btn{
 width:100%;min-height:53px;padding:8px 14px;border:1px solid rgba(178,84,255,.4);
 border-radius:13px;background:linear-gradient(180deg,#7731d8,#5520aa);
 color:#fff;font-size:14px;font-weight:900;cursor:pointer;
 box-shadow:0 7px 18px rgba(89,30,177,.3);
}
.wordcross-ad-btn:hover{transform:translateY(-1px)}
.wordcross-ad-btn:active{transform:scale(.97)}
.wordcross-ad-btn small{font-size:10px;font-weight:800}
.wordcross-ad-message{
 min-height:18px;margin:9px 0 0!important;color:#aebbd0!important;
 font-size:11px!important;
}

/* DAILY LIMITS */
.wordcross-limit-info{
 display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 0 0;
}
.wordcross-limit-info>div{
 display:flex;align-items:center;justify-content:space-between;gap:7px;
 padding:12px 14px;border-radius:13px;
 background:linear-gradient(145deg,rgba(25,45,75,.92),rgba(11,27,50,.96));
 border:1px solid rgba(105,146,204,.16);
}
.wordcross-limit-info span{color:#aebbd0;font-size:10px;font-weight:700}
.wordcross-limit-info strong{color:#fff;font-size:11px;font-weight:900}

/* DISABLED */
#wordCrossDisabledScreen{padding:30px 15px}
#wordCrossDisabledScreen .wordcross-game-icon{
 width:72px;height:72px;background:linear-gradient(145deg,#39475a,#202d3e);
 color:#b8c3d0;box-shadow:none;
}
#wordCrossDisabledScreen h3{color:#fff}

/* CELEBRATE */
@keyframes wordcrossCelebrate{
 0%{transform:scale(.65) rotate(-8deg);opacity:.3}
 65%{transform:scale(1.08) rotate(3deg);opacity:1}
 100%{transform:scale(1) rotate(0)}
}

/* MOBILE */
@media(max-width:600px){
 #boostPage .boost-header{margin-bottom:13px;padding-top:4px}
 #boostPage .boost-header h2{font-size:24px}
 .wordcross-card{padding:10px;border-radius:18px}
 .wordcross-card-header{padding:3px 6px 12px}
 .wordcross-card-header>div:first-child{gap:9px}
 .wordcross-card-header>div:first-child:before{width:48px;height:48px;border-radius:13px;font-size:25px}
 .wordcross-card-header h3{font-size:21px}
 .wordcross-card-header p{font-size:11px}
 .wordcross-status-badge{padding:6px 9px;font-size:9px}
 .wordcross-stats{gap:7px}
 .wordcross-stat{min-height:62px;border-radius:12px}
 .wordcross-stat span{font-size:10px}
 .wordcross-stat strong{font-size:17px}
 .wordcross-lives-box{padding:9px 11px;border-radius:12px}
 .wordcross-game-area{border-radius:16px}
 .wordcross-screen{padding:17px 10px 20px}
 .wordcross-current-word{min-height:52px;width:94%;font-size:21px;letter-spacing:5px}
 .wordcross-letters{width:245px;height:245px;border-width:6px}
 .wordcross-letter-btn{width:58px;height:58px;margin:-29px 0 0 -29px;font-size:23px}
 .wordcross-letter-btn:nth-child(1){transform:translate(0,-79px)}
 .wordcross-letter-btn:nth-child(2){transform:translate(69px,-34px)}
 .wordcross-letter-btn:nth-child(3){transform:translate(69px,34px)}
 .wordcross-letter-btn:nth-child(4){transform:translate(0,79px)}
 .wordcross-letter-btn:nth-child(5){transform:translate(-69px,34px)}
 .wordcross-letter-btn:nth-child(6){transform:translate(-69px,-34px)}
 .wordcross-letter-btn:nth-child(7){transform:translate(-40px,-64px)}
 .wordcross-letter-btn:nth-child(8){transform:translate(40px,-64px)}
 .wordcross-controls{gap:7px}
 .wordcross-primary-btn,.wordcross-secondary-btn{min-height:46px}
 .wordcross-limit-info{gap:7px}
 .wordcross-limit-info>div{padding:10px}
}

/* SMALL */
@media(max-width:380px){
 .wordcross-card{padding:8px}
 .wordcross-card-header h3{font-size:19px}
 .wordcross-card-header p{font-size:10px}
 .wordcross-card-header>div:first-child:before{width:44px;height:44px;font-size:22px}
 .wordcross-status-badge{padding:5px 8px}
 .wordcross-stats{gap:5px}
 .wordcross-stat{min-height:58px;padding:6px 3px}
 .wordcross-stat strong{font-size:15px}
 .wordcross-letters{width:220px;height:220px}
 .wordcross-letter-btn{width:53px;height:53px;margin:-26.5px 0 0 -26.5px;font-size:21px}
 .wordcross-letter-btn:nth-child(1){transform:translate(0,-71px)}
 .wordcross-letter-btn:nth-child(2){transform:translate(62px,-30px)}
 .wordcross-letter-btn:nth-child(3){transform:translate(62px,30px)}
 .wordcross-letter-btn:nth-child(4){transform:translate(0,71px)}
 .wordcross-letter-btn:nth-child(5){transform:translate(-62px,30px)}
 .wordcross-letter-btn:nth-child(6){transform:translate(-62px,-30px)}
 .wordcross-letter-btn:nth-child(7){transform:translate(-35px,-57px)}
 .wordcross-letter-btn:nth-child(8){transform:translate(35px,-57px)}
 .wordcross-controls{grid-template-columns:1fr 1fr}
 .wordcross-limit-info{grid-template-columns:1fr}
}

/* VERY SMALL */
@media(max-width:320px){
 .wordcross-letters{width:200px;height:200px}
 .wordcross-letter-btn{width:48px;height:48px;margin:-24px 0 0 -24px;font-size:19px}
 .wordcross-letter-btn:nth-child(1){transform:translate(0,-63px)}
 .wordcross-letter-btn:nth-child(2){transform:translate(56px,-27px)}
 .wordcross-letter-btn:nth-child(3){transform:translate(56px,27px)}
 .wordcross-letter-btn:nth-child(4){transform:translate(0,63px)}
 .wordcross-letter-btn:nth-child(5){transform:translate(-56px,27px)}
 .wordcross-letter-btn:nth-child(6){transform:translate(-56px,-27px)}
 .wordcross-letter-btn:nth-child(7){transform:translate(-31px,-51px)}
 .wordcross-letter-btn:nth-child(8){transform:translate(31px,-51px)}
}

/* GAME SAFETY */
.wordcross-game-area,.wordcross-letter-btn,.wordcross-primary-btn,
.wordcross-secondary-btn,.wordcross-ad-btn{
 user-select:none;-webkit-user-select:none;
}
.wordcross-card,.wordcross-game-area,.wordcross-stat,.wordcross-lives-box,
.wordcross-current-word,.wordcross-letter-btn,.wordcross-secondary-btn,
.wordcross-ad-box,.wordcross-limit-info>div{color-scheme:dark}

/* =====================================
   WORDCROSS PUZZLE SCREEN — COMPACT FIT
   ===================================== */

/*
 * Only the actual puzzle screen is compacted.
 * Other WordCross screens remain unchanged.
 */

#wordCrossPuzzleScreen{
    padding:8px 8px 10px;
    overflow:hidden;
}

/* Keep puzzle contents tightly grouped */
#wordCrossPuzzleScreen .wordcross-section-title{
    margin:7px 0 5px;
}

#wordCrossPuzzleScreen .wordcross-current-word{
    min-height:44px;
    margin:3px auto 7px;
    padding:6px 12px;
    font-size:21px;
    letter-spacing:5px;
}

/* Required words */
#wordCrossPuzzleScreen .wordcross-required-area{
    margin-bottom:5px;
}

#wordCrossPuzzleScreen .wordcross-required-words{
    gap:5px;
}

#wordCrossPuzzleScreen .wordcross-required-word{
    padding:5px 8px;
    min-width:38px;
    font-size:10px;
}

/* Compact responsive wheel */
#wordCrossPuzzleScreen .wordcross-letters{
    width:min(58vw,220px);
    height:min(58vw,220px);
    margin:7px auto 8px;
    border-width:5px;
}

/* Compact letters */
#wordCrossPuzzleScreen .wordcross-letter-btn{
    width:52px;
    height:52px;
    margin:-26px 0 0 -26px;
    font-size:21px;
}

/* Wheel positions */
#wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(1){
    transform:translate(0,-70px);
}

#wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(2){
    transform:translate(61px,-30px);
}

#wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(3){
    transform:translate(61px,30px);
}

#wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(4){
    transform:translate(0,70px);
}

#wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(5){
    transform:translate(-61px,30px);
}

#wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(6){
    transform:translate(-61px,-30px);
}

#wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(7){
    transform:translate(-35px,-57px);
}

#wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(8){
    transform:translate(35px,-57px);
}

/* Keep swipe interaction smooth */
#wordCrossPuzzleScreen .wordcross-letters{
    touch-action:none;
}

/* Smaller controls */
#wordCrossPuzzleScreen .wordcross-controls{
    gap:6px;
}

#wordCrossPuzzleScreen .wordcross-primary-btn,
#wordCrossPuzzleScreen .wordcross-secondary-btn{
    min-height:42px;
    padding:7px 10px;
}

/* Message uses less vertical space */
#wordCrossPuzzleScreen .wordcross-message{
    min-height:16px;
    margin:5px auto 0;
    font-size:11px;
}


/* =====================================
   SHORT PHONE SCREENS
   ===================================== */

@media(max-width:600px) and (max-height:750px){

    #wordCrossPuzzleScreen{
        padding:6px 7px 8px;
    }

    #wordCrossPuzzleScreen .wordcross-current-word{
        min-height:40px;
        margin:2px auto 5px;
        font-size:19px;
    }

    #wordCrossPuzzleScreen .wordcross-required-area{
        margin-bottom:3px;
    }

    #wordCrossPuzzleScreen .wordcross-required-word{
        padding:4px 7px;
        font-size:9px;
    }

    #wordCrossPuzzleScreen .wordcross-letters{
        width:min(54vw,200px);
        height:min(54vw,200px);
        margin:5px auto 6px;
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn{
        width:48px;
        height:48px;
        margin:-24px 0 0 -24px;
        font-size:19px;
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(1){
        transform:translate(0,-63px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(2){
        transform:translate(55px,-27px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(3){
        transform:translate(55px,27px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(4){
        transform:translate(0,63px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(5){
        transform:translate(-55px,27px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(6){
        transform:translate(-55px,-27px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(7){
        transform:translate(-31px,-51px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(8){
        transform:translate(31px,-51px);
    }

    #wordCrossPuzzleScreen .wordcross-primary-btn,
    #wordCrossPuzzleScreen .wordcross-secondary-btn{
        min-height:39px;
        font-size:12px;
    }
}


/* =====================================
   VERY SHORT PHONE SCREENS
   ===================================== */

@media(max-width:600px) and (max-height:650px){

    #wordCrossPuzzleScreen{
        padding:4px 6px 6px;
    }

    #wordCrossPuzzleScreen .wordcross-current-word{
        min-height:36px;
        margin:1px auto 4px;
        font-size:17px;
        letter-spacing:4px;
    }

    #wordCrossPuzzleScreen .wordcross-section-title{
        margin:4px 0 3px;
    }

    #wordCrossPuzzleScreen .wordcross-required-word{
        padding:3px 6px;
    }

    #wordCrossPuzzleScreen .wordcross-letters{
        width:min(50vw,180px);
        height:min(50vw,180px);
        margin:4px auto 5px;
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn{
        width:44px;
        height:44px;
        margin:-22px 0 0 -22px;
        font-size:18px;
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(1){
        transform:translate(0,-57px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(2){
        transform:translate(50px,-25px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(3){
        transform:translate(50px,25px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(4){
        transform:translate(0,57px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(5){
        transform:translate(-50px,25px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(6){
        transform:translate(-50px,-25px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(7){
        transform:translate(-28px,-46px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(8){
        transform:translate(28px,-46px);
    }

    #wordCrossPuzzleScreen .wordcross-primary-btn,
    #wordCrossPuzzleScreen .wordcross-secondary-btn{
        min-height:36px;
        padding:5px 8px;
        font-size:11px;
    }

    #wordCrossPuzzleScreen .wordcross-message{
        min-height:13px;
        margin:3px auto 0;
        font-size:10px;
    }
}


/* =====================================
   EXTRA SMALL WIDTH
   ===================================== */

@media(max-width:320px){

    #wordCrossPuzzleScreen .wordcross-letters{
        width:175px;
        height:175px;
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn{
        width:42px;
        height:42px;
        margin:-21px 0 0 -21px;
        font-size:17px;
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(1){
        transform:translate(0,-55px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(2){
        transform:translate(48px,-24px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(3){
        transform:translate(48px,24px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(4){
        transform:translate(0,55px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(5){
        transform:translate(-48px,24px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(6){
        transform:translate(-48px,-24px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(7){
        transform:translate(-27px,-44px);
    }

    #wordCrossPuzzleScreen .wordcross-letter-btn:nth-child(8){
        transform:translate(27px,-44px);
    }
}