/* ==========================================================
   RTP RNG SIMULATOR - CLEAN STYLE.CSS
   Versi bersih: mobile-first, biru/cyan, tombol LOGIN pulse,
   footer action buttons rapi, kompatibel Android/iPhone.
========================================================== */

/* ==========================================================
   1. RESET + ROOT
========================================================== */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

:root {
    --bg: #010713;
    --bg-soft: #020d1c;
    --card: #04182d;
    --card-dark: #021020;

    --blue: #2085ff;
    --blue-2: #276cff;
    --cyan: #16d8ed;
    --cyan-light: #62edff;

    --green: #25e9bd;
    --text: #ffffff;
    --text-soft: #7f98b4;
    --text-dim: #536d88;

    --border: rgba(37, 138, 236, .36);
    --border-strong: rgba(22, 161, 255, .72);

    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;

    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);

    background:
        radial-gradient(circle at top, #07315e 0%, #020c1b 35%, #010713 75%);

    overflow-x: hidden;
}

button,
input,
select,
a {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================
   2. MAIN APP
========================================================== */

.app-shell {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;

    padding:
        max(15px, env(safe-area-inset-top))
        14px
        max(30px, env(safe-area-inset-bottom));
}


/* ==========================================================
   3. HEADER + LOGO
========================================================== */

.site-header {
    width: 100%;
    min-height: 62px;

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

    gap: 14px;
    margin-bottom: 10px;
}

.site-logo {
    display: inline-flex;
    align-items: center;

    min-width: 0;
    text-decoration: none;
}

.site-logo img {
    display: block;

    width: 185px;
    max-width: 100%;
    height: auto;

    object-fit: contain;
}

.online-status {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    flex-shrink: 0;

    padding: 9px 14px;

    border: 1px solid rgba(0, 233, 187, .45);
    border-radius: 999px;

    color: #2eeec3;
    background: rgba(0, 103, 92, .08);

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

.online-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #26edc1;
    box-shadow: 0 0 10px #26edc1;
}


/* ==========================================================
   4. HERO BANNER 3:1
========================================================== */

.hero-banner {
    width: 100%;

    overflow: hidden;

    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);

    background: #03162a;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .30),
        0 0 24px rgba(0, 140, 255, .08);
}

.hero-banner img {
    display: block;

    width: 100%;
    aspect-ratio: 3 / 1;

    object-fit: cover;
    object-position: center;
}


/* ==========================================================
   5. AI CONSOLE
========================================================== */

.console-card {
    margin-top: 14px;
    padding: 22px;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(5, 30, 58, .97),
            rgba(2, 13, 29, .98)
        );

    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

.console-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 18px;
}

.console-heading > div,
.console-title-wrap {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    min-width: 0;
}

.console-icon {
    font-size: 27px;
}

.console-heading h1,
.console-heading h2 {
    margin: 0;

    font-size: 21px;
    line-height: 1.1;
}

.console-heading p {
    margin: 5px 0 0;

    color: #8298b2;

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

.version {
    flex-shrink: 0;

    padding: 7px 10px;

    border: 1px solid rgba(32, 136, 255, .55);
    border-radius: 999px;

    color: #58baff;

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


/* ==========================================================
   6. FORM
========================================================== */

.form-group {
    margin-top: 14px;
}

.form-group label {
    display: block;

    margin-bottom: 6px;

    color: #7992ae;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .4px;
}

input,
select {
    width: 100%;
    height: 52px;

    padding: 0 15px;

    border: 1px solid rgba(39, 134, 236, .42);
    border-radius: 15px;

    outline: none;

    color: #ffffff;
    background: #020c1b;

    font-size: 15px;

    appearance: none;
    -webkit-appearance: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

input:focus,
select:focus {
    border-color: var(--cyan);

    box-shadow:
        0 0 0 3px rgba(22, 216, 237, .08);
}

.money-input {
    height: 52px;

    display: flex;
    align-items: center;

    overflow: hidden;

    border: 1px solid rgba(39, 134, 236, .42);
    border-radius: 15px;

    background: #020c1b;
}

.money-input span {
    padding-left: 15px;

    color: #68aaff;

    font-weight: 900;
}

.money-input input {
    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
}


/* ==========================================================
   7. GENERATE BUTTON
========================================================== */

.generate-button {
    appearance: none;
    -webkit-appearance: none;

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

    margin-top: 20px;
    padding: 0 18px;

    border: 0;
    border-radius: var(--radius-md);

    cursor: pointer;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #2875ff 0%,
            #149eff 52%,
            #12d3e5 100%
        );

    box-shadow:
        0 8px 28px rgba(0, 156, 255, .20);

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

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

.generate-button:hover {
    filter: brightness(1.08);
}

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

.console-note {
    margin: 13px 0 0;

    color: #607a95;

    text-align: center;

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


/* ==========================================================
   8. LOADING SCREEN
========================================================== */

.loading-screen {
    position: fixed;
    z-index: 9998;

    inset: 0;

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

    padding: 25px;

    background: rgba(1, 7, 16, .97);

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

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .25s ease;
}

.loading-screen.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.loading-box {
    width: 100%;
    max-width: 450px;

    text-align: center;
}

.loading-icon,
.loading-robot {
    width: 90px;
    height: 90px;

    margin: 0 auto;

    display: grid;
    place-items: center;

    border: 2px solid var(--cyan);
    border-radius: 50%;

    color: var(--cyan);

    font-size: 42px;

    animation:
        loadingPulse
        1s
        ease-in-out
        infinite;
}

@keyframes loadingPulse {
    0%,
    100% {
        transform: scale(1);

        box-shadow:
            0 0 10px rgba(0, 220, 255, .20);
    }

    50% {
        transform: scale(1.08);

        box-shadow:
            0 0 35px rgba(0, 220, 255, .55);
    }
}

.loading-box h2 {
    margin: 22px 0 7px;
}

.loading-box p {
    color: #7891aa;
}

.loading-progress {
    height: 11px;

    margin-top: 22px;

    overflow: hidden;

    border-radius: 999px;

    background: #10233c;
}

.loading-progress-bar {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #2379ff,
            #13dbea
        );

    box-shadow:
        0 0 16px rgba(0, 197, 255, .45);

    transition: width .12s linear;
}

#loadingPercent {
    display: block;

    margin-top: 10px;

    color: var(--cyan);

    font-size: 22px;
}


/* ==========================================================
   9. RESULT FULLSCREEN
========================================================== */

.result-screen {
    position: fixed;
    z-index: 9999;

    inset: 0;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at top,
            #05345f,
            #020d1c 38%,
            #010713
        );

    opacity: 0;
    visibility: hidden;

    transform: translateY(25px);

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.result-screen.active {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

body.result-open {
    overflow: hidden;
}

/*
   Kompatibel dengan dua nama wrapper:
   .result-layout = HTML terbaru
   .result-container = HTML versi sebelumnya
*/
.result-layout,
.result-container {
    width: 100%;
    max-width: 760px;
    height: 100vh;
    height: 100dvh;
    min-height: 0;

    margin: 0 auto;

    display: grid;

    grid-template-rows:
        auto
        auto
        minmax(0, 1fr)
        auto;

    gap: 7px;

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

    overflow: hidden;
}


/* ==========================================================
   10. RESULT HEADER
========================================================== */

/*
   Kompatibel:
   .result-header = terbaru
   .result-top = versi sebelumnya
*/
.result-header,
.result-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;

    margin: 0;
}

.live-label {
    color: #29eec2;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .5px;
}

.result-header h2,
.result-top h2 {
    margin: 3px 0;

    font-size: 21px;
    line-height: 1.1;
}

.result-header p,
.result-top p {
    margin: 0;

    color: #7891ad;

    font-size: 10px;
}

.update-box {
    flex-shrink: 0;

    padding: 7px 10px;

    border: 1px solid rgba(28, 230, 186, .45);
    border-radius: 999px;

    color: #2aeabd;

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


/* ==========================================================
   11. SUMMARY
========================================================== */

.result-summary {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 6px;

    margin: 0;
}

.result-summary > div {
    padding: 7px 10px;

    border: 1px solid rgba(40, 127, 216, .28);
    border-radius: 11px;

    background: rgba(4, 24, 45, .82);
}

.result-summary small {
    display: block;

    margin-bottom: 2px;

    color: #607994;

    font-size: 8px;
}

.result-summary strong {
    display: block;

    overflow: hidden;

    color: #dceeff;

    font-size: 11px;

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


/* ==========================================================
   12. RESULT GAME LIST
========================================================== */

.result-list {
    min-height: 0;

    display: grid;

    /*
       Default untuk 5 hasil.
       JavaScript sebelumnya menghasilkan 5 game.
    */
    grid-template-rows:
        repeat(5, minmax(0, 1fr));

    gap: 6px;

    overflow: hidden;
}

.game-result {
    min-height: 0;

    padding: 7px 10px;

    display: grid;

    grid-template-rows:
        auto
        auto;

    align-content: center;

    gap: 6px;

    border: 1px solid rgba(37, 125, 218, .33);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(5, 29, 55, .96),
            rgba(2, 13, 27, .97)
        );
}

.game-result-top {
    min-width: 0;

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

    gap: 8px;

    margin: 0;
}

.game-info {
    min-width: 0;
    flex: 1 1 auto;
}

.game-info strong {
    display: block;

    overflow: hidden;

    color: #ffffff;

    font-size: 12px;
    line-height: 1.15;

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

.game-info small {
    display: block;

    margin-top: 2px;

    overflow: hidden;

    color: #637c98;

    font-size: 7px;

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

.game-value {
    display: flex;
    align-items: center;

    flex-shrink: 0;

    gap: 7px;
}

.rtp-value {
    min-width: 49px;

    color: #55dff3;

    text-align: right;

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


/* ==========================================================
   13. LOGIN BUTTON
   Menggantikan HOT / GACOR / NORMAL / STABIL
========================================================== */

.game-login {
    appearance: none;
    -webkit-appearance: none;

    min-width: 66px;
    height: 28px;

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

    padding: 0 12px;

    border: 1px solid rgba(42, 238, 204, .9);
    border-radius: 999px;

    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            #087cd9,
            #08bfc9
        );

    text-decoration: none !important;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .7px;

    box-shadow:
        0 0 12px rgba(0, 211, 212, .22);

    transform-origin: center;

    animation:
        loginPulse
        1.15s
        ease-in-out
        infinite;

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

.game-login:hover {
    filter: brightness(1.17);

    box-shadow:
        0 0 22px rgba(0, 218, 221, .45);
}

.game-login:active {
    animation: none;

    transform: scale(.94);
}

@keyframes loginPulse {
    0%,
    100% {
        transform: scale(1);

        box-shadow:
            0 0 10px rgba(0, 212, 210, .20);
    }

    50% {
        transform: scale(1.08);

        box-shadow:
            0 0 22px rgba(0, 218, 215, .46);
    }
}


/* ==========================================================
   14. REMOVE OLD STATUS BADGES IF STILL PRESENT
========================================================== */

.status,
.status.gacor,
.status.hot,
.status.stabil,
.status.normal {
    display: none !important;
}


/* ==========================================================
   15. RTP BAR
========================================================== */

.rtp-bar {
    width: 100%;
    height: 6px;

    overflow: hidden;

    border-radius: 999px;

    background: #13253d;
}

.rtp-bar-fill {
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #287dff,
            #10d7e7
        );

    box-shadow:
        0 0 12px rgba(0, 204, 255, .20);

    transition: width .7s ease;
}


/* ==========================================================
   16. RESULT FOOTER
========================================================== */

.result-footer {
    min-height: 0;

    display: grid;

    gap: 6px;

    margin: 0;
}

.last-update {
    margin: 0;

    color: #647d97;

    text-align: center;

    font-size: 8px;
    line-height: 1.2;
}


/* ==========================================================
   17. ACTION BUTTONS
   Mendukung dua versi HTML:
   - .result-actions + .action-btn
   - .footer-button + .main-play/.regenerate/.back-button
========================================================== */

.result-actions {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr;

    gap: 6px;

    margin: 0;
}

.action-btn,
.footer-button {
    appearance: none;
    -webkit-appearance: none;

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

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

    gap: 7px;

    margin: 0;
    padding: 0 14px;

    border-radius: 11px;

    cursor: pointer;

    text-decoration: none !important;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .2px;

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

.action-btn:active,
.footer-button:active {
    transform: scale(.98);
}

.action-icon {
    font-size: 12px;
}


/* ==========================================================
   18. LANGSUNG MAINKAN
========================================================== */

.action-play,
.main-play {
    border: 0;

    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            #246bff 0%,
            #149ef8 52%,
            #11d6e2 100%
        );

    box-shadow:
        0 6px 20px rgba(13, 167, 255, .24);
}

.action-play:hover,
.main-play:hover {
    filter: brightness(1.10);
}


/* ==========================================================
   19. GENERATE ULANG
========================================================== */

.action-generate,
.regenerate,
.generate-again {
    appearance: none;
    -webkit-appearance: none;

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

    margin: 0;
    padding: 0 14px;

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

    gap: 7px;

    border: 1px solid rgba(31, 145, 255, .65);
    border-radius: 11px;

    color: #d9efff;

    background:
        linear-gradient(
            180deg,
            #082441,
            #04182d
        );

    box-shadow:
        inset 0 0 15px rgba(0, 145, 255, .06);

    cursor: pointer;

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

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

.action-generate:hover,
.regenerate:hover,
.generate-again:hover {
    background:
        linear-gradient(
            180deg,
            #0b2d50,
            #051d36
        );
}


/* ==========================================================
   20. KEMBALI
========================================================== */

.action-back,
.back-button,
.close-result {
    appearance: none;
    -webkit-appearance: none;

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

    margin: 0;
    padding: 0 14px;

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

    border: 1px solid rgba(77, 115, 154, .40);
    border-radius: 11px;

    color: #8fa8c3;

    background: #020d1b;

    cursor: pointer;

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

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

.action-back:hover,
.back-button:hover,
.close-result:hover {
    color: #d7e8f8;

    border-color:
        rgba(68, 157, 235, .55);
}


/* ==========================================================
   21. NOTE / DISCLAIMER
========================================================== */

.result-note {
    margin: 0;

    color: #536d88;

    text-align: center;

    font-size: 7px;
    line-height: 1.3;
}

.result-disclaimer {
    display: none;
}


/* ==========================================================
   22. MOBILE <= 600px
========================================================== */

@media (max-width: 600px) {

    .app-shell {
        padding-left: 10px;
        padding-right: 10px;
    }

    .site-header {
        min-height: 52px;
    }

    .site-logo img {
        width: 140px;
    }

    .online-status {
        padding: 7px 10px;

        font-size: 9px;
    }

    .hero-banner {
        border-radius: 16px;
    }

    .console-card {
        padding: 17px;

        border-radius: 18px;
    }

    .console-heading {
        flex-direction: column;
    }

    .version {
        align-self: flex-start;
    }

    .result-layout,
    .result-container {
        padding-left: 9px;
        padding-right: 9px;

        gap: 5px;
    }

    .result-header h2,
    .result-top h2 {
        font-size: 19px;
    }

    .game-result {
        padding: 6px 9px;

        border-radius: 11px;
    }

    .game-info strong {
        font-size: 11px;
    }

    .game-info small {
        font-size: 7px;
    }

    .rtp-value {
        min-width: 46px;

        font-size: 13px;
    }

    .game-login {
        min-width: 60px;
        height: 26px;

        padding: 0 9px;

        font-size: 7px;
    }

    .rtp-bar {
        height: 5px;
    }

    .action-btn,
    .footer-button,
    .generate-again {
        min-height: 36px;

        font-size: 9px;
    }

    .close-result,
    .back-button {
        min-height: 34px;

        font-size: 9px;
    }
}


/* ==========================================================
   23. SMALL PHONES <= 390px
========================================================== */

@media (max-width: 390px) {

    .site-logo img {
        width: 125px;
    }

    .online-status {
        font-size: 8px;
    }

    .result-header,
    .result-top {
        gap: 6px;
    }

    .update-box {
        padding: 6px 8px;

        font-size: 8px;
    }

    .game-value {
        gap: 5px;
    }

    .rtp-value {
        min-width: 43px;

        font-size: 12px;
    }

    .game-login {
        min-width: 56px;

        padding: 0 8px;
    }
}


/* ==========================================================
   24. SHORT SCREENS
   Supaya 5 game + 3 tombol lebih mungkin muat tanpa scroll.
========================================================== */

@media (max-height: 760px) {

    .result-summary {
        display: none;
    }

    .result-layout,
    .result-container {
        grid-template-rows:
            auto
            minmax(0, 1fr)
            auto;
    }

    .result-header h2,
    .result-top h2 {
        margin: 2px 0;

        font-size: 18px;
    }

    .game-result {
        padding: 5px 8px;

        gap: 4px;
    }

    .game-info strong {
        font-size: 10px;
    }

    .game-info small {
        font-size: 6px;
    }

    .rtp-value {
        font-size: 12px;
    }

    .game-login {
        height: 24px;

        font-size: 7px;
    }

    .rtp-bar {
        height: 4px;
    }

    .action-btn,
    .footer-button,
    .generate-again {
        min-height: 33px;
    }

    .close-result,
    .back-button {
        min-height: 31px;
    }

    .result-note {
        display: none;
    }
}


/* ==========================================================
   25. EXTRA-SHORT SCREENS
========================================================== */

@media (max-height: 650px) {

    .live-label,
    .result-header p,
    .result-top p,
    .last-update {
        display: none;
    }

    .result-layout,
    .result-container {
        gap: 4px;
    }

    .game-result {
        padding: 4px 7px;
    }

    .game-login {
        min-width: 54px;
        height: 22px;
    }

    .action-btn,
    .footer-button,
    .generate-again {
        min-height: 30px;
    }

    .close-result,
    .back-button {
        min-height: 29px;
    }
}


/* ==========================================================
   26. ACCESSIBILITY
   Kalau user mematikan animasi sistem,
   pulse juga dihentikan.
========================================================== */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}