/* Old browser fallback for UC Browser / legacy WebKit.
   This file is loaded after the modern theme and only activates when
   script/uc-compat.js marks the document as .old-browser or .uc-browser. */

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

.old-browser body.koko-login-page,
.old-browser body.koko-dashboard-page {
    background-color: #101222 !important;
    background-image: url("../img/home/new.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-attachment: scroll !important;
    color: #f5f6ff !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

.old-browser body:before,
.old-browser body:after {
    display: none !important;
}

.old-browser .navbar {
    display: block !important;
    height: auto !important;
    min-height: 68px !important;
    padding: 10px 18px !important;
    background: #1f1d30 !important;
    border-bottom: 1px solid #3a4058 !important;
    filter: none !important;
}

.old-browser .navbar-left {
    float: left !important;
    display: block !important;
}

.old-browser .nav-right {
    float: right !important;
    display: block !important;
    padding-top: 7px !important;
}

.old-browser .navbar:after,
.old-browser .navbar-left:after,
.old-browser .nav-right:after,
.old-browser .hero-section:after,
.old-browser .top-row:after,
.old-browser .content-grid:after,
.old-browser .form-row:after,
.old-browser .koko-quick-actions:after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

.old-browser .logo {
    float: left !important;
    display: block !important;
    width: 96px !important;
    height: 58px !important;
    margin-right: 20px !important;
}

.old-browser .logo img {
    width: 92px !important;
    max-height: 58px !important;
}

.old-browser .nav-links,
.old-browser .nav-right {
    white-space: nowrap !important;
}

.old-browser .nav-links a,
.old-browser .nav-right a,
.old-browser .quick-link,
.old-browser .btn-primary,
.old-browser .btn-register,
.old-browser .discord-btn,
.old-browser .nav-btn,
.old-browser .dl-btn {
    display: inline-block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 11px 15px !important;
    margin: 3px !important;
    border-radius: 8px !important;
    text-align: center !important;
    vertical-align: middle !important;
    color: #ffffff !important;
    text-decoration: none !important;
    background: #5e4bf5 !important;
    border: 1px solid #8794ff !important;
    box-shadow: none !important;
    transform: none !important;
}

.old-browser .nav-links a.koko-event-link,
.old-browser .btn-primary,
.old-browser .btn-register {
    background: #ff970b !important;
    border-color: #ffc166 !important;
}

.old-browser .page-wrapper {
    display: block !important;
    width: 1180px !important;
    max-width: 96% !important;
    margin: 0 auto !important;
    padding: 100px 18px 50px !important;
}

.old-browser.koko-login-page .page-wrapper,
.old-browser .koko-login-page .page-wrapper {
    width: 1120px !important;
}

.old-browser .hero-section {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #111827 !important;
    border: 1px solid #3b455f !important;
    border-radius: 18px !important;
}

.old-browser .login-promo-panel {
    float: left !important;
    display: block !important;
    width: 43% !important;
    min-height: 610px !important;
    padding: 48px 36px !important;
    background: #4f338f !important;
}

.old-browser .left-column {
    float: right !important;
    display: block !important;
    width: 57% !important;
    max-width: none !important;
}

.old-browser .login-card {
    display: block !important;
    min-height: 610px !important;
    height: auto !important;
    padding: 50px 44px !important;
    background: #111827 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.old-browser .login-card:before,
.old-browser .welcome-banner:before,
.old-browser .rank-card:before,
.old-browser .btn-play:after {
    display: none !important;
}

.old-browser .login-card h2,
.old-browser .welcome-info h1,
.old-browser .card-header h3,
.old-browser .section-header h3 {
    color: #ffffff !important;
}

.old-browser .login-card .subtitle,
.old-browser .register-link p,
.old-browser .site-footer,
.old-browser .site-footer p {
    color: #aeb4cb !important;
}

.old-browser .form-row {
    display: block !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
}

.old-browser .form-row .form-group {
    float: left !important;
    width: 50% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.old-browser .form-group input,
.old-browser .form-group select,
.old-browser .modal-form input {
    width: 100% !important;
    height: 48px !important;
    padding: 12px 14px !important;
    color: #ffffff !important;
    background: #161e2f !important;
    border: 1px solid #536079 !important;
    border-radius: 8px !important;
}

.old-browser .captcha-wrapper {
    clear: both !important;
    overflow: hidden !important;
}

.old-browser .welcome-banner,
.old-browser .glass-card,
.old-browser .rank-card,
.old-browser .mail-card,
.old-browser .download-section,
.old-browser .ofya-card,
.old-browser .character-card {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 0 18px !important;
    padding: 20px !important;
    background: #111827 !important;
    border: 1px solid #3b455f !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.old-browser .welcome-banner {
    background: #e06416 !important;
}

.old-browser .welcome-info,
.old-browser .welcome-actions {
    display: block !important;
}

.old-browser .welcome-actions {
    margin-top: 14px !important;
}

.old-browser .top-row,
.old-browser .content-grid,
.old-browser .download-grid,
.old-browser .koko-weekly-layout,
.old-browser .koko-mail-columns {
    display: block !important;
}

.old-browser .top-row > *,
.old-browser .content-grid > *,
.old-browser .download-grid > *,
.old-browser .koko-mail-columns > * {
    display: block !important;
    width: auto !important;
    margin-bottom: 18px !important;
}

.old-browser .koko-quick-actions {
    display: block !important;
}

.old-browser .koko-quick-actions .quick-link {
    float: left !important;
    width: 31% !important;
    min-height: 54px !important;
}

.old-browser .card-header,
.old-browser .section-header,
.old-browser .mail-header,
.old-browser .static-item,
.old-browser .rehber-item,
.old-browser .friend-item,
.old-browser .mail-item {
    display: block !important;
}

.old-browser .tag {
    display: inline-block !important;
    margin-right: 8px !important;
}

.old-browser .rank-table,
.old-browser .rank-table th,
.old-browser .rank-table td {
    color: #f5f6ff !important;
    border-color: #3b455f !important;
}

.old-browser .modal-overlay.active,
.old-browser .bag-modal.active,
.old-browser .friend-modal.active,
.old-browser .mail-modal.active,
.old-browser .game-loading-overlay.active {
    display: block !important;
}

.old-browser .modal-box,
.old-browser .bag-modal-content,
.old-browser .friend-modal-content,
.old-browser .mail-modal-content {
    position: relative !important;
    margin: 80px auto !important;
    background: #111827 !important;
    border: 1px solid #536079 !important;
}

.old-browser .bag-grid {
    display: block !important;
}

.old-browser .bag-item {
    float: left !important;
    width: 92px !important;
    height: 112px !important;
    margin: 6px !important;
}

.old-browser .bag-item-image,
.old-browser .character-image,
.old-browser .login-promo-logo,
.old-browser img {
    max-width: 100% !important;
    height: auto !important;
}

@media (max-width: 900px) {
    .old-browser .navbar-left,
    .old-browser .nav-right,
    .old-browser .logo,
    .old-browser .login-promo-panel,
    .old-browser .left-column,
    .old-browser .form-row .form-group,
    .old-browser .koko-quick-actions .quick-link {
        float: none !important;
        width: auto !important;
    }

    .old-browser .page-wrapper {
        padding-top: 130px !important;
    }

    .old-browser .login-promo-panel,
    .old-browser .login-card {
        min-height: 0 !important;
    }
}

/* Dashboard-specific UC Browser layout.
   Keep the modern homepage shell visible and stop the legacy dashboard blocks
   from reappearing as full-width rows. */
.old-browser body.koko-dashboard-page > .character-card,
.old-browser body.koko-dashboard-page > .page-wrapper,
.old-browser body.koko-dashboard-page > .launcher-home-panel,
.old-browser body.koko-dashboard-page > .site-footer {
    display: none !important;
}

.old-browser body.koko-dashboard-page > .koko-home-shell {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    width: 1210px !important;
    max-width: 96% !important;
    min-width: 980px !important;
    margin: 112px auto 45px !important;
    padding: 0 !important;
}

.old-browser body.koko-dashboard-page > .koko-home-shell:after,
.old-browser body.koko-dashboard-page .koko-podium:after,
.old-browser body.koko-dashboard-page .koko-profile-stats:after,
.old-browser body.koko-dashboard-page .koko-mail-preview:after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

.old-browser body.koko-dashboard-page .koko-home-left,
.old-browser body.koko-dashboard-page .koko-home-center,
.old-browser body.koko-dashboard-page .koko-profile-card-new {
    display: block !important;
    box-sizing: border-box !important;
}

.old-browser body.koko-dashboard-page .koko-home-left {
    float: left !important;
    width: 300px !important;
}

.old-browser body.koko-dashboard-page .koko-home-center {
    float: left !important;
    width: 560px !important;
    margin-left: 28px !important;
}

.old-browser body.koko-dashboard-page .koko-profile-card-new {
    float: right !important;
    position: static !important;
    width: 280px !important;
    margin: 0 !important;
    padding: 0 22px 22px !important;
    text-align: center !important;
    background: #161126 !important;
    border: 1px solid #7446ff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

.old-browser body.koko-dashboard-page .koko-play-big,
.old-browser body.koko-dashboard-page .koko-side-action,
.old-browser body.koko-dashboard-page .koko-side-download,
.old-browser body.koko-dashboard-page .koko-profile-btn {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 16px !important;
    padding: 16px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    background: #152234 !important;
    border: 1px solid #2f816d !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.old-browser body.koko-dashboard-page .koko-play-big {
    background: #e06416 !important;
    border-color: #ffb44a !important;
}

.old-browser body.koko-dashboard-page .koko-play-big strong {
    display: block !important;
    font-size: 26px !important;
    line-height: 1.1 !important;
}

.old-browser body.koko-dashboard-page .koko-play-big em,
.old-browser body.koko-dashboard-page .koko-side-action em {
    display: block !important;
    margin-top: 7px !important;
    color: #d7e3f1 !important;
    font-size: 11px !important;
    font-style: normal !important;
}

.old-browser body.koko-dashboard-page .koko-play-big i,
.old-browser body.koko-dashboard-page .koko-side-action b,
.old-browser body.koko-dashboard-page .koko-side-action small {
    float: right !important;
}

.old-browser body.koko-dashboard-page .koko-action-icon {
    float: left !important;
    width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    margin-right: 12px !important;
    text-align: center !important;
    background: #22324a !important;
    border-radius: 9px !important;
}

.old-browser body.koko-dashboard-page .koko-friends-box,
.old-browser body.koko-dashboard-page .koko-honor-card,
.old-browser body.koko-dashboard-page .koko-weekly-card {
    display: block !important;
    margin: 0 0 24px !important;
    background: #101a2b !important;
    border: 1px solid #3b455f !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.old-browser body.koko-dashboard-page .koko-friends-box {
    height: 360px !important;
    margin-top: 10px !important;
}

.old-browser body.koko-dashboard-page .koko-card-title,
.old-browser body.koko-dashboard-page .koko-friends-head {
    display: block !important;
    min-height: 0 !important;
    padding: 16px 18px !important;
    color: #ffffff !important;
    background: #0d1321 !important;
    border-bottom: 1px solid #30384d !important;
}

.old-browser body.koko-dashboard-page .koko-card-title span {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    margin-right: 8px !important;
    background: #21d66b !important;
    border-radius: 50% !important;
}

.old-browser body.koko-dashboard-page .koko-podium {
    display: block !important;
    min-height: 0 !important;
    padding: 22px !important;
    background: #192138 !important;
}

.old-browser body.koko-dashboard-page .koko-podium-slot {
    float: left !important;
    display: block !important;
    width: 31.5% !important;
    min-height: 210px !important;
    margin-right: 2.7% !important;
    padding: 14px 10px !important;
    text-align: center !important;
    background: #0d1321 !important;
    border: 1px solid #475169 !important;
    border-radius: 12px !important;
    transform: none !important;
}

.old-browser body.koko-dashboard-page .koko-podium-slot:last-child {
    margin-right: 0 !important;
}

.old-browser body.koko-dashboard-page .koko-rank-medal,
.old-browser body.koko-dashboard-page .koko-rank-avatar {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.old-browser body.koko-dashboard-page .koko-rank-avatar {
    width: 92px !important;
    height: 92px !important;
    padding: 8px !important;
    background: #202a3e !important;
}

.old-browser body.koko-dashboard-page .koko-weekly-stage,
.old-browser body.koko-dashboard-page .koko-weekly-stage-mail {
    display: block !important;
    min-height: 0 !important;
    padding: 18px !important;
    background: #13233a !important;
}

.old-browser body.koko-dashboard-page .koko-mail-preview,
.old-browser body.koko-dashboard-page .koko-profile-stats,
.old-browser body.koko-dashboard-page .koko-profile-money {
    display: block !important;
}

.old-browser body.koko-dashboard-page .koko-mail-preview-col {
    float: left !important;
    width: 48.5% !important;
    margin-right: 3% !important;
}

.old-browser body.koko-dashboard-page .koko-mail-preview-col:last-child {
    margin-right: 0 !important;
}

.old-browser body.koko-dashboard-page .koko-profile-glow {
    display: none !important;
}

.old-browser body.koko-dashboard-page .koko-profile-avatar {
    display: block !important;
    width: 128px !important;
    height: 128px !important;
    margin: 22px auto 16px !important;
    padding: 8px !important;
    background: #201a38 !important;
    border: 1px solid #5b4aa0 !important;
    border-radius: 14px !important;
}

.old-browser body.koko-dashboard-page .koko-profile-avatar img {
    max-width: 112px !important;
    max-height: 112px !important;
}

.old-browser body.koko-dashboard-page .koko-profile-stats div,
.old-browser body.koko-dashboard-page .koko-profile-money div,
.old-browser body.koko-dashboard-page .koko-profile-discord-code {
    display: block !important;
    margin: 8px 0 !important;
    padding: 10px !important;
    text-align: left !important;
    background: #211a35 !important;
    border: 1px solid #3d3659 !important;
    border-radius: 8px !important;
}

.old-browser body.koko-dashboard-page .koko-profile-stats span,
.old-browser body.koko-dashboard-page .koko-profile-money span {
    display: block !important;
    color: #aeb4cb !important;
    font-size: 10px !important;
}

.old-browser body.koko-dashboard-page .koko-profile-stats strong,
.old-browser body.koko-dashboard-page .koko-profile-money strong {
    display: block !important;
    margin-top: 4px !important;
    color: #ffffff !important;
}

.old-browser body.koko-dashboard-page > .koko-global-footer {
    display: block !important;
    clear: both !important;
    width: 1210px !important;
    max-width: 96% !important;
    margin: 0 auto 35px !important;
    padding: 18px !important;
    color: #aeb4cb !important;
    text-align: center !important;
}

@media (max-width: 1100px) {
    .old-browser body.koko-dashboard-page > .koko-home-shell {
        min-width: 0 !important;
        width: 94% !important;
    }

    .old-browser body.koko-dashboard-page .koko-home-left,
    .old-browser body.koko-dashboard-page .koko-home-center,
    .old-browser body.koko-dashboard-page .koko-profile-card-new {
        float: none !important;
        width: auto !important;
        margin: 0 0 20px !important;
    }
}