* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
    }
    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    body {
        background:
            radial-gradient(circle at 50% 20%, rgba(30, 110, 255, .12), transparent 35%),
            #070a0f;

        color: #fff;
        font-family: 'Rajdhani', sans-serif;
    }
    button {
        font-family: inherit;
    }
    /* =========================================
       APP
    ========================================= */
    .app {
        width: 100%;
        max-width: 600px;
        height: 100dvh;
        margin: auto;
        position: relative;
        overflow: hidden;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.015),
                rgba(255,255,255,0)
            );
    }
    /* =========================================
       HEADER
    ========================================= */
    .header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;

        height: 65px;

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

        padding: 0 18px;

        z-index: 100;

        background: rgba(7,10,15,.88);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);

        border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .logo {
        display: flex;
        align-items: center;
        gap: 9px;

        font-size: 23px;
        font-weight: 700;
        letter-spacing: 1px;
    }
    .logo i {
        color: #00e5ff;
        font-size: 22px;
    }
    .logo span {
        color: #fff;
    }
    .logo strong {
        color: #00e5ff;
    }
    /* =========================================
       LANGUAGE
    ========================================= */
    .language {
        position: relative;
    }

    .language-button {
        height: 38px;
        padding: 0 11px;
        display: flex;
        align-items: center;
        gap: 7px;
        color: #fff;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 10px;
        font-size: 14px;
        cursor: pointer;
    }
    .language-menu {
        display: none;
        position: absolute;
        right: 0;
        top: 46px;
        width: 140px;
        padding: 6px;
        background: #11161e;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 12px;
        box-shadow: 0 15px 40px rgba(0,0,0,.5);
        z-index: 999;
    }
    .language-menu.show {
        display: block;
    }
.language-menu a {
    display: block;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    transition: background .18s ease;
}

.language-menu a:hover {
    background: rgba(0,229,255,.1);
}
    /* =========================================
       CONTENT
    ========================================= */
    .content {
        position: absolute;
        top: 0px;
        bottom: 78px;
        left: 0;
        right: 0;
        overflow-y: auto;
        padding: 18px;
        scrollbar-width: none;
    }
    .content::-webkit-scrollbar {
        display: none;
    }
    /* =========================================
       PLAYER TOP
    ========================================= */
    .player-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }
    .level {
        display: flex;
        align-items: center;
        gap: 9px;
    }
    .level-icon {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(
            145deg,
            #00e5ff,
            #0077ff
        );
        border-radius: 12px;
        font-weight: 700;
        font-size: 17px;
        box-shadow: 0 0 20px rgba(0,229,255,.18);
    }
    .level-info small {
        display: block;
        color: #77818f;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .level-info b {
        font-size: 18px;
    }
    .money {
        display: flex;
        align-items: center;
        gap: 7px;

        color: #ffd84a;

        font-size: 19px;
        font-weight: 700;
    }
    .money i {
        font-size: 16px;
    }
    /* =========================================
       PLAYER CARD
    ========================================= */
    .player-card {
        position: relative;
        min-height: 372px;
        border-radius: 20px;
        overflow: hidden;
        background:
            radial-gradient(
                circle at 50% 25%,
                rgba(0,229,255,.13),
                transparent 34%
            ),
            linear-gradient(
                145deg,
                #111821,
                #090d13
            );
        border: 1px solid rgba(255,255,255,.07);
        box-shadow:
            0 15px 40px rgba(0,0,0,.35);
        margin-bottom: 14px;
    }
    /* =========================================
       DECORATIVE CIRCLES
    ========================================= */
    .player-card::before {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        left: 50%;
        top: 12px;
        transform: translateX(-50%);
        border-radius: 50%;
        border: 1px solid rgba(0,229,255,.08);
        pointer-events: none;
        z-index: 0;
    }
    .player-card::after {
        content: "";
        position: absolute;
        width: 170px;
        height: 170px;
        left: 50%;
        top: 37px;
        transform: translateX(-50%);
        border-radius: 50%;
        border: 1px dashed rgba(0,229,255,.08);
        pointer-events: none;
        z-index: 0;
    }
    /* =========================================
       PERSON
    ========================================= */
    .character {
        position: absolute;
        top: 27px;
        left: 50%;
        transform: translateX(-50%);
        width: 145px;
        height: 165px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;
    }
    .character i {
        font-size: 118px;
        color: #c8d0da;
        filter:
            drop-shadow(0 0 12px rgba(0,229,255,.15));
    }
    /* =========================================
       HEALTH RING
    ========================================= */
    .health-ring {
        position: absolute;
        width: 165px;
        height: 165px;
        top: 27px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        background:
            conic-gradient(
                #00e676 0deg,
                #00e676 var(--health-deg),
                rgba(255,255,255,.07) var(--health-deg),
                rgba(255,255,255,.07) 360deg
            );
        -webkit-mask:
            radial-gradient(
                farthest-side,
                transparent calc(100% - 6px),
                #000 0
            );
        mask:
            radial-gradient(
                farthest-side,
                transparent calc(100% - 6px),
                #000 0
            );
        z-index: 2;
        pointer-events: none;
    }
    .health-label {
        position: absolute;
        top: 181px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 5;
        font-size: 11px;
        font-weight: 700;
        color: #00e676;
        letter-spacing: 1px;
    }
    /* =========================================
       MOTOR SECTION
       OVO JE SADA ČISTO ODVOJENO OD KRUGA
    ========================================= */
    .bike-section {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 13px 15px 14px;
        z-index: 10;
        background:
            linear-gradient(
                180deg,
                rgba(14,19,26,.92),
                rgba(9,13,19,.98)
            );
        border-top: 1px solid rgba(255,255,255,.07);
        box-shadow:
            0 -10px 30px rgba(0,0,0,.18);
    }
    /* =========================================
       MOTOR NAME
    ========================================= */
    .bike-name {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 34px;
    }
    .bike-name small {
        display: block;
        color: #707b89;
        text-transform: uppercase;
        font-size: 9px;
        letter-spacing: 1px;
        margin-bottom: 2px;
    }
    .bike-name h2 {
        font-size: 20px;
        line-height: 1;
        font-weight: 700;
    }
    .bike-name .status {
        color: #00e676;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }
    /* =========================================
       MOTOR STATS
    ========================================= */
    .bike-stats {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        margin-top: 9px;
        gap: 7px;
    }
    .bike-stat {
        min-height: 54px;
        padding: 7px 5px;
        background:
            rgba(0,0,0,.22);
        border-radius: 9px;
        text-align: center;
        border: 1px solid rgba(255,255,255,.025);
    }
    .bike-stat i {
        display: block;
        color: #00e5ff;
        font-size: 11px;
        margin-bottom: 1px;
    }
    .bike-stat b {
        display: block;
        font-size: 13px;
        line-height: 1.1;
        margin-top: 1px;
    }
    .bike-stat span {
        display: block;
        color: #6f7a87;
        font-size: 8px;
        text-transform: uppercase;
        margin-top: 2px;
    }
    /* =========================================
       BUTTON
    ========================================= */
    .ride-button {
        width: 100%;
        height: 39px;
        margin-top: 8px;
        border: none;
        border-radius: 9px;
        color: #061016;
        background: #00e5ff;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .7px;
        cursor: pointer;
        box-shadow:
            0 5px 20px rgba(0,229,255,.16);
        transition: .2s;
    }
    .ride-button:active {
        transform: scale(.97);
    }
    /* =========================================
       STATUS CARDS
    ========================================= */
    .status-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 14px;
    }
    .status-card {
        padding: 13px;
        background: #11161e;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 15px;
    }
    .status-head {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    .status-head span {
        color: #8993a0;
        font-size: 12px;
    }
    .status-head b {
        font-size: 12px;
    }
    .bar {
        height: 7px;
        overflow: hidden;
        border-radius: 20px;
        background: rgba(255,255,255,.07);
    }
    .bar div {
        height: 100%;
        border-radius: 20px;
        background: #00e5ff;
    }
    .energy .bar div {
        width: 72%;
    }
    .armor .bar div {
        width: 61%;
        background: #8b5cf6;
    }
    /* =========================================
       QUICK ACTIONS
    ========================================= */
    .section-title {
        margin: 5px 0 10px;
        font-size: 13px;
        color: #737e8b;
        text-transform: uppercase;
        letter-spacing: 1.5px;
    }
    .quick-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 9px;
        padding-bottom: 15px;
    }
    .quick {
        padding: 15px 5px;
        text-align: center;
        background: #11161e;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 13px;
        cursor: pointer;
    }
    .quick i {
        display: block;
        color: #00e5ff;
        font-size: 20px;
        margin-bottom: 7px;
    }
    .quick span {
        font-size: 11px;
        color: #a5adb8;
    }
/* =========================================
   BOTTOM NAV
========================================= */
.bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 78px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 6px 7px 8px;
    z-index: 300;
    background: rgba(8,11,16,.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255,255,255,.07);
}
/* =========================================
   NAV LINK
========================================= */
.bottom-nav .nav-link {
    width: 100%;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
/* =========================================
   NAV ITEM
========================================= */
.nav-item {
    width: 100%;
    height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #697481;
    font-size: 10px;
    cursor: pointer;
    border-radius: 13px;
    transition:
        background .2s ease,
        color .2s ease,
        transform .12s ease;
}
/* =========================================
   NAV ICON
========================================= */
.nav-item i {
    font-size: 19px;
    transition:
        filter .2s ease,
        transform .2s ease;
}
/* =========================================
   ACTIVE NAV
========================================= */
.nav-link.active .nav-item {
    color: #00e5ff;
    background: rgba(0,229,255,.07);
}
.nav-link.active .nav-item i {
    filter:
        drop-shadow(0 0 8px rgba(0,229,255,.6));
    transform: translateY(-1px);
}
/* =========================================
   PRESS / CLICK EFFECT
========================================= */
.nav-link:active .nav-item {
    transform: scale(.92);
    background: rgba(255,255,255,.06);
}
/* =========================================
   DESKTOP HOVER
========================================= */
@media (hover: hover) {
    .nav-link:hover .nav-item {
        color: #00e5ff;
        background: rgba(0,229,255,.05);
    }
}
/* =========================================
   SUBMENU PANEL
========================================= */
.submenu-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 78px;
    z-index: 250;
    max-height: calc(100% - 78px);
    overflow: hidden;
    background: rgba(8,11,16,.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0,229,255,.10);
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition:
        transform .28s cubic-bezier(.22,.61,.36,1),
        opacity .2s ease;
}
/* =========================================
   SUBMENU OPEN
========================================= */
.submenu-panel.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
/* =========================================
   SUBMENU INNER
========================================= */
.submenu-inner {
    width: 100%;
    padding: 12px 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
/* =========================================
   SUBMENU BUTTON
========================================= */
.submenu-button {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 13px;
    background: rgba(255,255,255,.035);
    color: #dce5ec;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .12s ease,
        color .18s ease;
}
/* =========================================
   SUBMENU ICON
========================================= */
.submenu-button i {
    width: 28px;
    text-align: center;
    font-size: 17px;
    color: #00e5ff;
    filter:
        drop-shadow(0 0 6px rgba(0,229,255,.35));
}
/* =========================================
   SUBMENU ARROW
========================================= */
.submenu-button .submenu-arrow {
    margin-left: auto;
    font-size: 11px;
    color: #697481;
    filter: none;
}
/* =========================================
   SUBMENU HOVER
========================================= */
@media (hover: hover) {
    .submenu-button:hover {
        background: rgba(0,229,255,.07);
        border-color: rgba(0,229,255,.16);
        color: #00e5ff;
    }
}
/* =========================================
   SUBMENU PRESS
========================================= */
.submenu-button:active {
    transform: scale(.97);
    background: rgba(0,229,255,.10);
}
/* =========================================
   SMALL PHONES
========================================= */
@media (max-height: 650px) {
    .submenu-inner {
        padding: 8px 9px 10px;
        gap: 5px;
    }
    .submenu-button {
        min-height: 48px;
    }
}
/* =========================================
   MOBILE SAFE AREA
========================================= */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav {
        padding-bottom:
            calc(8px + env(safe-area-inset-bottom));
        height:
            calc(78px + env(safe-area-inset-bottom));
    }
    .submenu-panel {
        bottom:
            calc(78px + env(safe-area-inset-bottom));
    }
}
/* =========================================
   SUBMENU ACTIVE
========================================= */
.submenu-button.active {
    color: #00e5ff;
    background: rgba(0,229,255,.09);
    border-color: rgba(0,229,255,.22);
    box-shadow:
        inset 0 0 15px rgba(0,229,255,.04),
        0 0 12px rgba(0,229,255,.06);
}
.submenu-button.active i {
    color: #00e5ff;
    filter:
        drop-shadow(0 0 7px rgba(0,229,255,.55));
}
.submenu-button.active .submenu-arrow {
    color: #00e5ff;
    transform: translateX(2px);
}
.submenu-button .submenu-arrow {
    margin-left: auto;
    font-size: 11px;
    color: #697481;
    filter: none;
    transition:
        color .2s ease,
        transform .2s ease;
}
    /* =========================================
       DESKTOP PREVIEW
    ========================================= */
    @media (min-width: 601px) {
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            background:
                radial-gradient(
                    circle,
                    #17202b,
                    #030507 70%
                );
        }
        .app {
            height: 850px;
            border-radius: 25px;
            border: 1px solid rgba(255,255,255,.08);
            box-shadow:
                0 30px 100px rgba(0,0,0,.7);
        }
    }
	
.game-description {
    max-width: 700px;
    margin: 60px auto;
    padding: 35px 25px;
    color: #dce5ec;
    font-family: 'Rajdhani', sans-serif;
}

.game-description .section-label {
    color: #00e5ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 10px;
}

.game-description h1 {
    margin: 0 0 20px;
    color: #fff;
    font-size: 42px;
    line-height: 1;
    text-transform: uppercase;
}

.game-description h2 {
    margin: 35px 0 15px;
    color: #fff;
    font-size: 28px;
    text-transform: uppercase;
}

.game-description p {
    margin: 0 0 18px;
    color: #8d99a6;
    font-size: 17px;
    line-height: 1.6;
}

.game-description p strong {
    color: #00e5ff;
}

.game-slogan {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 35px;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.game-slogan strong {
    color: #fff;
    font-size: 19px;
}

.game-slogan strong::after {
    content: " /";
    color: #00e5ff;
    margin-left: 18px;
}

.game-slogan strong:last-child::after {
    display: none;
}

.game-logo-text {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    margin-top: 35px;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1px;
}

.game-logo-text span {
    color: #fff;
}

.game-logo-text strong {
    color: #00e5ff;
    margin-left: 4px;
}

.game-logo-text small {
    flex-basis: 100%;
    margin-top: 5px;
    color: #52606d;
    font-size: 10px;
    letter-spacing: 4px;
}

@media (max-width: 600px) {

    .game-description {
        margin: 30px auto;
        padding: 25px 18px;
    }

    .game-description h1 {
        font-size: 34px;
    }

    .game-description h2 {
        font-size: 24px;
    }

    .game-description p {
        font-size: 15px;
    }

    .game-slogan {
        gap: 6px;
    }

    .game-slogan strong {
        font-size: 16px;
    }

    .game-slogan strong::after {
        margin-left: 10px;
    }
}
	


/* =========================================================
   PREMIUM THEME
   MotoPhantom - Purple / Gold
========================================================= */

html,
body {
    background: #0b0612;
    color: #ffffff;
}

body {
    background:
        radial-gradient(circle at 50% 18%, rgba(124,58,237,.18), transparent 36%),
        #0b0612;
}

.app {
    background:
        linear-gradient(
            180deg,
            rgba(42,10,65,.28),
            rgba(9,5,16,0)
        );
    border-color: rgba(255,216,74,.10);
}

.header {
    background: rgba(31,8,48,.94);
    border-bottom-color: rgba(255,216,74,.12);
    box-shadow: 0 8px 30px rgba(0,0,0,.20);
}

.logo i,
.logo strong {
    color: #ffd84a;
}

.logo span {
    color: #ffffff;
}

.language-button {
    color: #ffffff;
    background: rgba(255,255,255,.07);
    border-color: rgba(255,216,74,.18);
}

.language-menu {
    background: #241034;
    border-color: rgba(255,216,74,.18);
    box-shadow: 0 15px 40px rgba(0,0,0,.55);
}

.language-menu a {
    color: #ffffff;
}

.language-menu a:hover {
    background: rgba(255,216,74,.10);
}

.player-card {
    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(124,58,237,.18),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #241034,
            #100817
        );
    border-color: rgba(255,216,74,.10);
    box-shadow: 0 15px 40px rgba(0,0,0,.45);
}

.player-card::before {
    border-color: rgba(255,216,74,.10);
}

.player-card::after {
    border-color: rgba(255,216,74,.10);
}

.character i {
    color: #d9d0e3;
    filter: drop-shadow(0 0 14px rgba(255,216,74,.13));
}

.level-icon {
    background: linear-gradient(145deg, #ffd84a, #f59e0b);
    color: #211108;
    box-shadow: 0 0 20px rgba(255,216,74,.18);
}

.money {
    color: #ffd84a;
}

.bike-section {
    background:
        linear-gradient(
            180deg,
            rgba(38,14,54,.96),
            rgba(17,7,25,.99)
        );
    border-top-color: rgba(255,216,74,.12);
    box-shadow: 0 -10px 30px rgba(0,0,0,.24);
}

.bike-name small {
    color: #a58db7;
}

.bike-name .status {
    color: #ffd84a;
}

.bike-stat {
    background: rgba(0,0,0,.24);
    border-color: rgba(255,216,74,.07);
}

.bike-stat i,
.quick i {
    color: #ffd84a;
}

.bike-stat span {
    color: #8f7b9f;
}

.ride-button {
    color: #241205;
    background: #ffd84a;
    box-shadow: 0 5px 20px rgba(255,216,74,.18);
}

.status-card,
.quick {
    background: #1b0c27;
    border-color: rgba(255,216,74,.08);
}

.status-head span {
    color: #a58db7;
}

.bar {
    background: rgba(255,255,255,.08);
}

.bar div {
    background: #ffd84a;
}

.armor .bar div {
    background: #9b5de5;
}

.section-title {
    color: #a58db7;
}

.quick span {
    color: #c4b5cf;
}

.bottom-nav {
    background: rgba(31,8,48,.97);
    border-top-color: rgba(255,216,74,.13);
    box-shadow: 0 -10px 35px rgba(0,0,0,.28);
}

.nav-item {
    color: #8d789d;
}

.nav-link.active .nav-item {
    color: #ffd84a;
    background: rgba(255,216,74,.08);
}

.nav-link.active .nav-item i {
    filter: drop-shadow(0 0 8px rgba(255,216,74,.55));
}

.nav-link:active .nav-item {
    background: rgba(255,216,74,.07);
}

.submenu-panel {
    background: rgba(25,8,39,.98);
    border-top-color: rgba(255,216,74,.14);
    box-shadow: 0 -15px 40px rgba(0,0,0,.40);
}

.submenu-button {
    border-color: rgba(255,216,74,.08);
    background: rgba(255,255,255,.035);
    color: #eadff0;
}

.submenu-button i {
    color: #ffd84a;
    filter: drop-shadow(0 0 6px rgba(255,216,74,.30));
}

.submenu-button .submenu-arrow {
    color: #8d789d;
}

.submenu-button:hover {
    background: rgba(255,216,74,.07);
    border-color: rgba(255,216,74,.18);
    color: #ffd84a;
}

.submenu-button:active {
    background: rgba(255,216,74,.10);
}

.submenu-button.active {
    color: #ffd84a;
    background: rgba(255,216,74,.09);
    border-color: rgba(255,216,74,.22);
    box-shadow:
        inset 0 0 15px rgba(255,216,74,.04),
        0 0 12px rgba(255,216,74,.06);
}

.submenu-button.active i,
.submenu-button.active .submenu-arrow {
    color: #ffd84a;
}

.game-description {
    color: #e7dfee;
}

.game-description h1,
.game-description h2 {
    color: #ffffff;
}

.game-description p {
    color: #ad9cba;
}

.game-description p strong {
    color: #ffd84a;
}

.game-slogan {
    border-top-color: rgba(255,216,74,.12);
    border-bottom-color: rgba(255,216,74,.12);
}

.game-slogan strong {
    color: #ffffff;
}

.game-slogan strong::after {
    color: #ffd84a;
}

.game-logo-text {
    color: #ffffff;
}

.game-logo-text span {
    color: #ffffff;
}

.game-logo-text strong {
    color: #ffd84a;
}

.game-logo-text small {
    color: #806b91;
}

@media (hover: hover) {
    .nav-link:hover .nav-item {
        color: #ffd84a;
        background: rgba(255,216,74,.06);
    }
}

@media (min-width: 601px) {
    body {
        background:
            radial-gradient(
                circle,
                #32134a,
                #09040d 70%
            );
    }

    .app {
        border-color: rgba(255,216,74,.12);
        box-shadow: 0 30px 100px rgba(0,0,0,.75);
    }
}