/* =========================================
   MOUSA HUB - GAME ENHANCEMENTS
   Results, social sharing and compact controls
========================================= */

.gb-overlay[hidden],
.gb-best[hidden] {
    display: none !important;
}

html.gb-modal-open,
html.gb-modal-open body {
    overflow: hidden !important;
}

/* =========================================
   RESULT OVERLAY
========================================= */

.gb-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;

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

    padding:
        max(8px, env(safe-area-inset-top))
        max(10px, env(safe-area-inset-right))
        max(8px, env(safe-area-inset-bottom))
        max(10px, env(safe-area-inset-left));

    box-sizing: border-box;

    background: rgba(2, 9, 21, .88);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

/* Keep the dialog visible inside fullscreen. */

.game-stage:fullscreen .gb-overlay,
.game-stage:-webkit-full-screen .gb-overlay {
    position: absolute;
    inset: 0;
}

/* =========================================
   COMPACT RESULT PANEL
========================================= */

.gb-panel {
    flex: 0 1 490px;

    width: min(490px, 100%);
    max-height: calc(100dvh - 18px);
    min-height: 0;

    margin: auto;
    padding: 16px;

    border: 1px solid rgba(103, 172, 234, .36);
    border-radius: 19px;

    box-sizing: border-box;

    background: linear-gradient(
        145deg,
        rgba(11, 27, 51, .99),
        rgba(13, 23, 49, .99)
    );

    color: #edf6ff;
    text-align: center;

    box-shadow: 0 18px 80px rgba(0, 0, 0, .47);

    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;

    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;

    font-family: inherit;
}

.gb-medal {
    width: 38px;
    height: 38px;

    margin: 0 auto 7px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    font-size: 25px;
    color: #fff;

    background: linear-gradient(
        125deg,
        #19c4c6,
        #7663fc
    );
}

.gb-panel h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(17px, 2.2vw, 23px);
    line-height: 1.4;
}

.gb-sub {
    margin: 4px auto 11px;

    color: #a9bddb;

    font-size: 11px;
    line-height: 1.55;
}

/* =========================================
   GAME STATISTICS
========================================= */

.gb-stat-grid {
    display: grid;

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

    gap: 6px;
}

.gb-stat {
    min-width: 0;
    padding: 9px 3px;

    background: rgba(115, 151, 224, .09);

    border: 1px solid rgba(150, 185, 231, .2);
    border-radius: 10px;
}

.gb-stat strong {
    display: block;

    color: #fff;

    font-size: clamp(12px, 1.8vw, 19px);
    font-variant-numeric: tabular-nums;

    white-space: nowrap;
}

.gb-stat small {
    display: block;

    margin-top: 3px;

    color: #9eb9df;
    font-size: 10px;
}

.gb-best {
    margin: 8px 0 0;

    color: #ffd47d;

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

/* =========================================
   MAIN ACTION BUTTONS
========================================= */

.gb-main-actions {
    display: grid;
    grid-template-columns: 1.3fr 1fr;

    gap: 7px;
    margin-top: 11px;
}

.gb-share-title {
    margin: 12px 0 7px;

    color: #80dfff;

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

.gb-social-actions {
    display: grid;

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

    gap: 7px;
}

.gb-more-actions {
    display: grid;

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

    gap: 7px;
    margin-top: 7px;
}

.gb-panel button,
.gb-toolbar-actions button,
.gb-fullscreen-actions button {
    min-width: 0;
    min-height: 37px;

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

    gap: 6px;
    padding: 9px 5px;

    border: 1px solid rgba(159, 192, 235, .24);
    border-radius: 10px;

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

    color: #f3f8ff;

    font-family: inherit;
    font-size: 11px;
    font-weight: 750;

    cursor: pointer;

    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.gb-panel button:active,
.gb-toolbar-actions button:active,
.gb-fullscreen-actions button:active {
    transform: scale(.96);
}

.gb-panel button:focus-visible,
.gb-toolbar-actions button:focus-visible,
.gb-fullscreen-actions button:focus-visible {
    outline: 2px solid #76dbff;
    outline-offset: 2px;
}

.gb-panel svg,
.gb-toolbar-actions svg,
.gb-fullscreen-actions svg {
    flex: 0 0 auto;

    display: block;

    width: 16px;
    height: 16px;
}

.gb-main-actions .gb-primary {
    border: 0;

    background: linear-gradient(
        105deg,
        #1ebdbf,
        #5580f9
    );

    color: #fff;
}

/* =========================================
   SOCIAL BRAND COLORS
========================================= */

.gb-social-actions .gb-wa {
    background: rgba(37, 211, 102, .19);
    color: #9dffc4;
}

.gb-social-actions .gb-fb {
    background: rgba(24, 119, 242, .23);
    color: #bdd8ff;
}

.gb-social-actions .gb-ig {
    background: linear-gradient(
        120deg,
        rgba(138, 64, 223, .2),
        rgba(237, 64, 129, .23)
    );

    color: #ffc9e2;
}

.gb-message {
    min-height: 15px;
    margin-top: 8px;

    color: #acc4e1;

    font-size: 10px;
    line-height: 1.4;
}

/* =========================================
   QUICK GAME TOOLS
========================================= */

.game-toolbar {
    flex-wrap: wrap;
}

.game-toolbar .gb-toolbar-actions {
    display: flex !important;
    flex-direction: row !important;

    gap: 6px;
    align-items: center;

    margin-inline-start: auto;
}

.gb-toolbar-actions button {
    width: 37px;
    height: 37px;

    padding: 7px;
}

/* Tools inside fullscreen */

.gb-fullscreen-actions {
    display: none;

    position: absolute;

    top: 8px;
    left: 8px;

    z-index: 45;

    gap: 5px;
}

.gb-fullscreen-actions button {
    width: 35px;
    height: 35px;

    padding: 5px;

    background: rgba(5, 17, 35, .64);
}

.game-stage:fullscreen > .gb-fullscreen-actions,
.game-stage:-webkit-full-screen > .gb-fullscreen-actions {
    display: flex;
}

/* =========================================
   MOBILE TOUCH CONTROLS
   Smaller, transparent, reliable buttons
========================================= */

@media (pointer: coarse) {

    /* Hide fallback buttons below the game */

    .game-page .mobile-controls {
        display: none !important;
    }

    .game-page .game-touch-ui {
        display: block !important;
        opacity: 1 !important;
    }

    /* Left / Right */

    .game-page .game-touch-move {
        position: absolute;

        left: 3%;
        bottom: 3%;

        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        width: 114px !important;
        height: 42px !important;

        border: 1px solid rgba(170, 205, 245, .18);
        border-radius: 12px;

        background: rgba(4, 15, 31, .3);

        box-shadow: none;

        opacity: .45;

        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .game-page .game-touch-move.active {
        opacity: .78;
    }

    .game-page .touch-move-center {
        display: none !important;
    }

    .game-page .touch-move-arrow {
        font-size: 27px !important;
        line-height: 1;
    }

    /* Jump */

    .game-page .game-touch-jump {
        position: absolute;

        right: 3%;
        bottom: 3%;

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

        width: 44px !important;
        height: 44px !important;

        min-width: 0;
        min-height: 0;

        padding: 0;

        border: 1px solid rgba(170, 205, 245, .18);
        border-radius: 12px;

        background: rgba(4, 15, 31, .3);

        box-shadow: none;

        opacity: .45;
    }

    .game-page .game-touch-jump.active {
        opacity: .85;
    }

    .game-page .game-touch-jump .jump-arrow {
        font-size: 25px !important;
    }

    .game-page .game-touch-jump small {
        display: none !important;
    }

    /* Use the new compact pause control */

    .game-page #touchPause {
        display: none !important;
    }
}

/* =========================================
   SMALL SCREENS
========================================= */

@media (max-width: 700px) {

    .gb-panel {
        width: min(460px, 100%);
        padding: 11px;

        border-radius: 13px;
    }

    .gb-medal {
        width: 30px;
        height: 30px;

        margin-bottom: 4px;

        font-size: 19px;
    }

    .gb-stat {
        padding: 6px 2px;
    }

    .gb-stat small {
        font-size: 9px;
    }

    .gb-main-actions {
        margin-top: 8px;
    }

    .gb-share-title {
        margin: 8px 0 5px;
    }

    .gb-panel button {
        min-height: 31px;

        padding: 6px 3px;

        font-size: 10px;
        gap: 3px;
    }

    .gb-panel svg {
        width: 14px;
        height: 14px;
    }
}

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

@media (max-height: 460px) and (orientation: landscape) {

    .gb-overlay {
        padding: 4px 7px;
    }

    .gb-panel {
        width: min(570px, 100%);

        max-height: calc(100dvh - 8px);

        padding: 8px 10px;
    }

    .gb-medal {
        display: none;
    }

    .gb-sub {
        margin: 0 0 5px;
        font-size: 9px;
    }

    .gb-stat {
        padding: 3px 2px;
    }

    .gb-stat strong {
        font-size: 13px;
    }

    .gb-stat small {
        margin: 0;
        font-size: 9px;
    }

    .gb-main-actions {
        margin-top: 5px;
    }

    .gb-share-title {
        margin: 5px 0 4px;
    }

    .gb-social-actions,
    .gb-more-actions,
    .gb-main-actions {
        gap: 5px;
    }

    .gb-panel button {
        min-height: 29px;
        padding: 4px 3px;
    }

    .gb-message {
        margin-top: 3px;
        font-size: 9px;
    }
}