/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;

    background:
        #f4f6f8;

    color:
        #222;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

button,
input {
    font: inherit;
}


/* =========================================================
   APP
========================================================= */

.rtp-app {
    min-height: 100vh;
}


/* =========================================================
   HEADER
========================================================= */

.rtp-header {
    background:
        linear-gradient(
            135deg,
            #15191f,
            #232a33
        );

    color:
        #fff;

    box-shadow:
        0 3px 14px
        rgba(0, 0, 0, 0.14);
}

.rtp-header__inner {
    width: 100%;
    max-width: 1200px;

    margin:
        0 auto;

    padding:
        18px 16px;
}

.rtp-brand {
    display: flex;

    align-items: center;

    gap: 12px;
}

.rtp-brand__icon {
    display: flex;

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

    width: 46px;
    height: 46px;

    border-radius: 12px;

    background:
        #fff;

    color:
        #1f242b;

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

    letter-spacing:
        0.5px;
}

.rtp-brand h1 {
    margin:
        0;

    font-size:
        20px;

    line-height:
        1.2;
}

.rtp-brand p {
    margin:
        3px 0 0;

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

    font-size:
        12px;
}


/* =========================================================
   MAIN
========================================================= */

.rtp-main {
    width: 100%;
    max-width: 1200px;

    margin:
        0 auto;

    padding:
        16px;
}


/* =========================================================
   PROVIDER
========================================================= */

.provider-section {
    position: sticky;

    top: 0;

    z-index: 20;

    margin-bottom:
        18px;

    padding:
        12px;

    background:
        rgba(
            244,
            246,
            248,
            0.94
        );

    backdrop-filter:
        blur(10px);
}


/* =========================================================
   PROVIDER TAB
========================================================= */

.provider-tabs {
    display: grid;

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

    gap:
        7px;

    padding:
        4px;

    background:
        #e7e9ec;

    border-radius:
        12px;
}

.provider-tab {
    min-height:
        42px;

    padding:
        8px 10px;

    border:
        0;

    border-radius:
        9px;

    background:
        transparent;

    color:
        #60656d;

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

    cursor:
        pointer;

    transition:
        0.18s ease;
}

.provider-tab.is-active {
    background:
        #fff;

    color:
        #181b20;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.09);
}


/* =========================================================
   SEARCH
========================================================= */

.game-search {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    margin-top:
        10px;
}

.game-search__icon {
    position:
        absolute;

    left:
        13px;

    pointer-events:
        none;

    font-size:
        14px;
}

.game-search input {
    width:
        100%;

    height:
        44px;

    padding:
        0 42px;

    border:
        1px solid #d9dde2;

    border-radius:
        12px;

    outline:
        none;

    background:
        #fff;

    color:
        #20242a;

    font-size:
        14px;

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

.game-search input:focus {
    border-color:
        #8b929c;

    box-shadow:
        0 0 0 3px
        rgba(70, 77, 87, 0.08);
}

.game-search__clear {
    position:
        absolute;

    right:
        8px;

    width:
        30px;
    height:
        30px;

    border:
        0;

    border-radius:
        50%;

    background:
        transparent;

    color:
        #777;

    font-size:
        20px;

    cursor:
        pointer;
}


/* =========================================================
   STATUS
========================================================= */

.game-status {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        13px;
}

.game-status h2 {
    margin:
        0;

    font-size:
        18px;

    color:
        #24272c;
}

.game-status p {
    margin:
        3px 0 0;

    color:
        #7a7e85;

    font-size:
        12px;
}


/* =========================================================
   GRID
========================================================= */

.game-grid {
    display: grid;

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

    gap:
        8px;
}


/* =========================================================
   CARD
========================================================= */

.game-card {
    display:
        block;

    width:
        100%;

    padding:
        0;

    overflow:
        hidden;

    border:
        0;

    border-radius:
        13px;

    background:
        #fff;

    text-align:
        left;

    cursor:
        pointer;

    box-shadow:
        0 2px 9px
        rgba(0, 0, 0, 0.08);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.game-card:active {
    transform:
        scale(0.985);
}


/* =========================================================
   IMAGE
========================================================= */

.game-card__image {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    background:
        #eceef1;
}

.game-card__image img {
    display:
        block;

    width:
        100%;
    height:
        100%;

    object-fit:
        cover;
}


/* =========================================================
   CARD BODY
========================================================= */

.game-card__body {
    padding:
        7px 7px 9px;
}

.game-card__title {
    min-height:
        30px;

    margin-bottom:
        6px;

    overflow:
        hidden;

    color:
        #25292f;

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        15px;

    display:
        -webkit-box;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;
}


/* =========================================================
   RTP
========================================================= */

.game-rtp {
    width:
        100%;
}

.game-rtp__info {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        5px;

    font-size:
        10px;

    font-weight:
        700;
}

.game-rtp__label {
    color:
        #626870;
}

.game-rtp__value {
    font-size:
        11px;

    font-weight:
        800;

    font-variant-numeric:
        tabular-nums;
}

.game-rtp__track {
    position:
        relative;

    width:
        100%;

    height:
        6px;

    overflow:
        hidden;

    background:
        #e4e7eb;

    border-radius:
        999px;
}

.game-rtp__fill {
    display:
        block;

    width:
        0;

    height:
        100%;

    border-radius:
        inherit;

    transition:
        width 0.4s ease;
}


/* LOW */

.game-rtp--low
.game-rtp__value {
    color:
        #b63f3f;
}

.game-rtp--low
.game-rtp__fill {
    background:
        #c94949;
}


/* MEDIUM */

.game-rtp--medium
.game-rtp__value {
    color:
        #9c7804;
}

.game-rtp--medium
.game-rtp__fill {
    background:
        #c59a18;
}


/* HIGH */

.game-rtp--high
.game-rtp__value {
    color:
        #247845;
}

.game-rtp--high
.game-rtp__fill {
    background:
        #32935a;
}


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

.game-loading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        180px;

    color:
        #737880;

    font-size:
        13px;
}

.spinner {
    width:
        22px;

    height:
        22px;

    border:
        3px solid #d8dbe0;

    border-top-color:
        #555c65;

    border-radius:
        50%;

    animation:
        spin 0.7s linear infinite;
}

@keyframes spin {

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   ERROR
========================================================= */

.game-error {
    padding:
        22px;

    border-radius:
        12px;

    background:
        #fff;

    text-align:
        center;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.06);
}

.game-error strong {
    display:
        block;

    margin-bottom:
        12px;

    font-size:
        13px;
}

.game-error button {
    padding:
        9px 15px;

    border:
        0;

    border-radius:
        8px;

    background:
        #262a30;

    color:
        #fff;

    cursor:
        pointer;
}


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

.empty-search {
    padding:
        40px 20px;

    color:
        #777;

    text-align:
        center;

    font-size:
        13px;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.rtp-disclaimer {
    margin:
        24px 0 12px;

    padding:
        12px 14px;

    border-radius:
        10px;

    background:
        #eceff2;

    color:
        #747980;

    font-size:
        10px;

    line-height:
        1.5;

    text-align:
        center;
}


/* TABLET */
@media (min-width: 600px) {

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

        gap:
            12px;
    }

}


/* DESKTOP */
@media (min-width: 900px) {

    .game-grid {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap:
            16px;
    }

}


/* LARGE DESKTOP */
@media (min-width: 1200px) {

    .game-grid {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));
    }

}

/* =========================================================
   HIDDEN ELEMENT FIX
========================================================= */

#gameLoading[hidden],
#gameError[hidden],
#emptySearch[hidden] {
    display: none !important;
}