/* =========================================================
   X1 PREMIADO
   ========================================================= */

:root {
    --bg: #0e202d;
    --bg-dark: #091721;
    --bg-header: #102735;

    --surface: #132b3a;
    --surface-2: #173444;
    --surface-3: #1c3d4f;

    --border: rgba(255, 255, 255, .08);
    --border-light: rgba(255, 255, 255, .13);

    --text: #ffffff;
    --muted: #9db3c1;

    --primary: #1688f8;
    --primary-hover: #2998ff;

    --green: #26e35f;
    --gold: #ffc72c;

    --header-height: 64px;
    --sidebar-width: 240px;
    --sidebar-collapsed: 64px;
    --mobile-bottom-height: 70px;
    --promo-bar-height: 44px;

    --radius: 10px;
    --radius-lg: 14px;

    --transition: .25s ease;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

button,
input {
    font: inherit;
}

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

button {
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

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

.top-header {
    position: fixed;
    z-index: 1000;
    top: var(--promo-bar-height);
    left: 0;
    right: 0;

    height: var(--header-height);

    display: flex;
    align-items: center;

    background: var(--bg-header);
    border-bottom: 1px solid var(--border);

    padding: 0 22px;
}

.header-inner {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
}

.sidebar-toggle {
    width: 42px;
    height: 42px;

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

    background: transparent;
    color: #b8ceda;

    border-radius: 8px;

    cursor: pointer;
    font-size: 18px;

    transition: var(--transition);
}

.sidebar-toggle:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.brand {
    position: absolute;
    left: 0%;
    top: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;

    margin-left: 120px;

    height: 50px;
}

.brand img {
    max-height: 48px;
    width: auto;
    object-fit: contain;
}

/*
  Caso ainda não tenha colocado logo.png,
  o texto abaixo funciona como fallback.
*/

.brand-name {
    font-size: 25px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -1.5px;
}

.brand-name strong {
    color: var(--gold);
}

.header-actions {
    margin-left: auto;

    display: flex;
    align-items: center;
    gap: 10px;
}

.btn {
    min-height: 42px;
    padding: 0 22px;

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

    border-radius: 8px;

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

    cursor: pointer;

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

.btn:hover {
    transform: translateY(-1px);
}

.btn-login {
    background: #34556a;
    color: #fff;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-hover);
}


/* LANGUAGE / COUNTRY SELECTOR */
.language-selector { position:relative; flex:0 0 auto; }
.language-trigger { width:44px; height:42px; display:flex; align-items:center; justify-content:center; gap:5px; padding:0 8px; border:1px solid var(--border-light); border-radius:9px; background:#173444; color:#fff; cursor:pointer; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.language-trigger:hover { background:#1c3d4f; border-color:rgba(255,255,255,.22); transform:translateY(-1px); }
.language-flag { font-size:21px; line-height:1; }
.language-chevron { font-size:9px; color:#9db3c1; transition:transform .18s ease; }
.language-selector.is-open .language-chevron { transform:rotate(180deg); }
.language-menu { position:absolute; top:calc(100% + 9px); right:0; z-index:3000; width:190px; padding:7px; border:1px solid var(--border-light); border-radius:11px; background:#102735; box-shadow:0 18px 45px rgba(0,0,0,.38); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px); transition:opacity .16s ease,visibility .16s ease,transform .16s ease; }
.language-selector.is-open .language-menu { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.language-option { width:100%; min-height:40px; display:flex; align-items:center; gap:10px; padding:0 10px; border-radius:7px; background:transparent; color:#c8d8e1; cursor:pointer; text-align:left; font-size:12px; font-weight:650; }
.language-option:hover,.language-option.is-active { background:#17394d; color:#fff; }
.language-option .language-flag { width:25px; text-align:center; font-size:19px; }
.language-option-check { margin-left:auto; color:#62b5ff; font-size:11px; opacity:0; }
.language-option.is-active .language-option-check { opacity:1; }
@media (max-width:768px) { .language-trigger {margin-right: 15px; width:38px; height:38px; padding:0 6px; } .language-trigger .language-flag { font-size:14px; } .language-menu { position:fixed; top:calc(var(--promo-bar-height) + 70px); right:10px; width:185px; } }
@media (max-width:430px) { .header-actions { gap:5px; } .header-actions .btn { padding-left:10px; padding-right:10px; } .language-trigger {margin-right: 15px; width:36px; min-width:36px; padding:0 5px; } .language-chevron { display:none; } }

/* USUARIO AUTENTICADO */
.wallet-pill { height:42px; display:inline-flex; align-items:center; gap:8px; padding:0 14px; border:1px solid rgba(38,227,95,.28); border-radius:9px; background:rgba(38,227,95,.08); color:#fff; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; transition:background .18s ease,transform .18s ease; }
.wallet-pill i { color:var(--green); font-size:14px; }
.wallet-pill:hover { background:rgba(38,227,95,.14); transform:translateY(-1px); }
.user-menu { position:relative; flex:0 0 auto; }
.user-trigger { height:42px; display:flex; align-items:center; gap:9px; padding:0 10px 0 4px; border:1px solid var(--border-light); border-radius:10px; background:#173444; color:#fff; cursor:pointer; transition:background .18s ease,border-color .18s ease; }
.user-trigger:hover { background:#1c3d4f; border-color:rgba(255,255,255,.22); }
.user-avatar { width:32px; height:32px; flex:0 0 32px; display:flex; align-items:center; justify-content:center; border-radius:8px; object-fit:cover; background:hsl(var(--avatar-hue, 210) 55% 42%); color:#fff; font-size:12px; font-weight:800; letter-spacing:.3px; }
.user-name { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:700; }
.user-chevron { font-size:9px; color:#9db3c1; transition:transform .18s ease; }
.user-menu.is-open .user-chevron { transform:rotate(180deg); }
.user-dropdown { position:absolute; top:calc(100% + 9px); right:0; z-index:3000; width:250px; padding:7px; border:1px solid var(--border-light); border-radius:12px; background:#102735; box-shadow:0 18px 45px rgba(0,0,0,.38); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px); transition:opacity .16s ease,visibility .16s ease,transform .16s ease; }
.user-menu.is-open .user-dropdown { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.user-dropdown-head { padding:9px 10px 11px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.user-dropdown-head strong { display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-dropdown-head span { display:block; margin-top:3px; color:#8fa9b8; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-dropdown-balance { display:none; align-items:center; justify-content:space-between; padding:9px 10px; margin-bottom:6px; border-radius:8px; background:rgba(38,227,95,.08); font-size:12px; }
.user-dropdown-balance span { color:#9db3c1; }
.user-dropdown-balance strong { color:var(--green); font-variant-numeric:tabular-nums; }
.user-dropdown-item { width:100%; min-height:40px; display:flex; align-items:center; gap:10px; padding:0 10px; border-radius:7px; background:transparent; color:#c8d8e1; cursor:pointer; text-align:left; font-size:12px; font-weight:650; }
.user-dropdown-item i { width:16px; text-align:center; color:#8fb1c4; }
.user-dropdown-item:hover { background:#17394d; color:#fff; }
.user-dropdown-item.is-danger:hover, .user-dropdown-item.is-danger:hover i { color:#ff9c9c; }
@media (max-width:768px) {
    .wallet-pill { height:38px; padding:0 10px; gap:6px; font-size:12px; }
    .user-trigger { height:38px; padding:0 3px; gap:0; }
    .user-name, .user-chevron { display:none; }
    .user-dropdown { position:fixed; top:calc(var(--promo-bar-height) + 70px); right:10px; }
}
@media (max-width:380px) {
    .wallet-pill i { display:none; }
    .user-dropdown-balance { display:flex; }
}

/* Mensagens dos formularios de autenticacao */
.auth-notice { margin:-3px 0 14px; padding:9px 11px; border-radius:7px; background:rgba(38,227,95,.1); color:#9ff0b8; font-size:12px; line-height:1.45; }
.auth-notice[hidden] { display:none; }
.auth-hint { color:#7f9aaa; font-size:11px; margin-top:6px; }
.auth-field input[aria-invalid="true"] { border-color:#d65c5c; }
.auth-submit[disabled] { opacity:.65; cursor:wait; transform:none; }

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    position: fixed;

    z-index: 900;

    left: 0;
    top: calc(var(--promo-bar-height) + var(--header-height));
    bottom: 0;

    width: var(--sidebar-width);

    background: #0b1d28;

    border-right: 1px solid var(--border);

    padding: 14px 10px;

    overflow-y: auto;
    overflow-x: hidden;

    transition: width var(--transition);
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed);
}

/* Cabecalho e fundo do menu lateral mobile (ocultos no desktop) */
.sidebar-drawer-head {
    display: none;
    position: sticky;
    top: 0;
    z-index: 1;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    margin: 0 -12px 12px;
    padding: 0 12px 0 16px;
    background: #0b1d28;
    border-bottom: 1px solid var(--border);
}

.sidebar-drawer-head img {
    max-height: 40px;
    width: auto;
}

.sidebar-drawer-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    color: #c1d2dc;
    font-size: 18px;
    cursor: pointer;
}

.sidebar-drawer-close:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 4150;
    background: rgba(2, 10, 16, .62);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nav-item {
    min-height: 46px;

    display: flex;
    align-items: center;

    padding: 0 13px;

    border-radius: 8px;

    color: #c1d2dc;

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

    white-space: nowrap;

    transition:
        background var(--transition),
        color var(--transition);
}

.nav-item:hover,
.nav-item.active {
    background: #173244;
    color: #fff;
}

.nav-icon {
    width: 25px;
    min-width: 25px;

    display: flex;
    justify-content: center;

    font-size: 16px;

    margin-right: 11px;
}

.nav-label {
    transition:
        opacity .15s ease,
        visibility .15s ease;
}

.sidebar.collapsed .nav-label {
    opacity: 0;
    visibility: hidden;
}

.sidebar.collapsed {
    padding-left: 9px;
    padding-right: 9px;
}

.sidebar.collapsed .nav-item {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    justify-content: center;
    padding: 0;
}

.sidebar.collapsed .nav-icon {
    width: 46px;
    min-width: 46px;
    height: 46px;
    margin-right: 0;
    align-items: center;
    justify-content: center;
}

.sidebar.collapsed .nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

.nav-divider {
    height: 1px;

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

    margin: 12px 6px;
}

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

.page {
    min-height: 100vh;

    margin-left: var(--sidebar-width);

    padding-top: calc(var(--promo-bar-height) + var(--header-height));

    transition: margin-left var(--transition);
}

body.sidebar-is-collapsed .page {
    margin-left: var(--sidebar-collapsed);
}

.content {
    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;

    padding:
        24px
        0
        60px;
}

/* =========================================================
   HERO / BANNER
   ========================================================= */

.hero {
    position: relative;

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

    overflow: hidden;

    border-radius: var(--radius-lg);

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(24, 136, 248, .38),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 50%,
            rgba(0, 109, 209, .35),
            transparent 35%
        ),
        #102b3b;

    border: 1px solid var(--border);
}

.hero-picture,
.hero-picture img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

.hero-picture img {
    object-fit: cover;
}

.hero-overlay {
    position: absolute;

    inset: 0;

    
}

.hero-content {
    position: relative;
    z-index: 2;

    min-height: 150px;

    width: min(460px, 90%);

    margin: 0 auto;

    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    padding: 35px 20px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 12px;

    border-radius: 100px;

    background: rgba(0, 0, 0, .30);

    border: 1px solid rgba(255, 255, 255, .12);

    color: #d8e8f0;

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

    margin-bottom: 14px;
}

.hero h1 {
    max-width: 500px;

    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.13;

    letter-spacing: -1.3px;

    font-weight: 850;

    text-shadow:
        0 3px 15px rgba(0, 0, 0, .55);
}

.hero p {
    max-width: 390px;

    margin-top: 12px;

    color: #c9dae4;

    line-height: 1.55;

    font-size: 14px;
}

.hero-cta {
    width: min(330px, 100%);

    margin-top: 20px;

    height: 44px;
}

/* =========================================================
   QUICK CARDS
   ========================================================= */

.quick-grid {
    display: grid;

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

    gap: 14px;

    margin-top: 18px;
}

.quick-card {
    min-height: 52px;

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

    background: var(--surface);

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

    border-radius: var(--radius);

    padding: 0 16px;
}

.quick-card-title {
    display: flex;
    align-items: center;
    gap: 9px;

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

.quick-card-title i {
    color: #a9c5d5;
}

.quick-number {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #d9e6ed;

    font-size: 13px;
}

.status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 8px rgba(38, 227, 95, .35);
}

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

.search-wrap {
    margin-top: 20px;
}

.search-box {
    height: 52px;

    display: flex;
    align-items: center;

    background: #091923;

    border: 1px solid #345267;

    border-radius: 9px;

    padding: 0 14px;

    transition: border-color var(--transition);
}

.search-box:focus-within {
    border-color: var(--primary);
}

.search-box i {
    color: #8fb1c4;

    font-size: 17px;

    margin-right: 12px;
}

.search-box input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #fff;

    font-size: 14px;
}

.search-box input::placeholder {
    color: #9ab2c0;
}

.shortcut {
    padding: 4px 7px;

    border-radius: 5px;

    background: #48677a;

    color: #fff;

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

    white-space: nowrap;
}

/* =========================================================
   SECTION
   ========================================================= */

.section {
    margin-top: 24px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 14px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 9px;

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

.section-title i {
    color: #9fc4d9;
}

.view-all {
    color: #a8bfcc;

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

/* =========================================================
   GAME CARDS
   ========================================================= */

.games-grid {
    display: grid;

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

    gap: 12px;
}

.game-card {
    min-width: 0;

    cursor: pointer;
}

.game-image {
    position: relative;

    aspect-ratio: .78;

    overflow: hidden;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #24506a,
            #132936
        );

    border: 1px solid rgba(255,255,255,.07);

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

.game-card:hover .game-image {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.18);
}

.game-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.game-placeholder {
    position: absolute;

    inset: 0;

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

    text-align: center;

    padding: 12px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(22, 136, 248, .35),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #193d51,
            #0b1e2a
        );
}

.game-placeholder i {
    font-size: 38px;

    margin-bottom: 12px;

    color: #fff;
}

.game-placeholder strong {
    font-size: 14px;
}

.game-placeholder span {
    margin-top: 5px;

    color: #aac0cc;

    font-size: 10px;
}

.game-info {
    margin-top: 7px;
}

.game-name {
    overflow: hidden;

    color: #fff;

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

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

.game-status {
    margin-top: 4px;

    display: flex;
    align-items: center;
    gap: 5px;

    color: #91aab8;

    font-size: 10px;
}

.game-status .status-dot {
    width: 5px;
    height: 5px;
}

/* =========================================================
   CHALLENGES
   ========================================================= */

.challenge-grid {
    display: grid;

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

    gap: 12px;
}

.challenge-card {
    position: relative;

    min-height: 130px;

    overflow: hidden;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #16394d,
            #0a202d
        );

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

    padding: 18px;
}

.challenge-card::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -25px;
    bottom: -35px;

    border-radius: 50%;

    background: rgba(22, 136, 248, .12);
}

.challenge-icon {
    width: 36px;
    height: 36px;

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

    border-radius: 9px;

    background: rgba(22, 136, 248, .15);

    color: #57adff;

    margin-bottom: 12px;
}

.challenge-card h3 {
    font-size: 14px;
}

.challenge-card p {
    max-width: 90%;

    margin-top: 5px;

    color: #93aebb;

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

/* =========================================================
   FOOTER DESKTOP
   ========================================================= */

.desktop-footer {
    margin-top: 48px;
    padding: 42px 0 18px;
    border-top: 1px solid var(--border);
    color: #8fa8b7;
    font-size: 12px;
    text-align: left;
}

.footer-grid { display:grid; grid-template-columns:1.35fr repeat(4,1fr); gap:34px; }
.footer-brand img { max-height:46px; width:auto; margin-bottom:16px; }
.footer-brand p { max-width:270px; color:#839daa; line-height:1.65; }
.footer-column h4 { color:#fff; font-size:13px; margin-bottom:15px; }
.footer-column a { display:block; width:max-content; max-width:100%; color:#8fa8b7; margin:10px 0; transition:color .18s ease; }
.footer-column a:hover { color:#fff; }
.footer-social { display:flex; justify-content:center; gap:10px; padding:30px 0 24px; }
.footer-social a { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:9px; background:#132b3a; border:1px solid var(--border); color:#b9ccd7; font-size:15px; transition:var(--transition); }
.footer-social a:hover { background:#17394d; color:#fff; transform:translateY(-2px); }
.footer-bottom { border-top:1px solid var(--border); padding-top:18px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-bottom-links { display:flex; flex-wrap:wrap; gap:18px; }
.footer-bottom-links a:hover { color:#fff; }

/* AUTH MODAL */
body.auth-modal-open { overflow:hidden; }
.auth-overlay { position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center; padding:22px; background:rgba(2,10,16,.78); backdrop-filter:blur(7px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility .2s ease; }
.auth-overlay.is-open { opacity:1; visibility:visible; pointer-events:auto; }
.auth-modal { position:relative; width:min(440px,100%); max-height:calc(100vh - 44px); overflow-y:auto; background:#102735; border:1px solid rgba(255,255,255,.11); border-radius:16px; box-shadow:0 28px 80px rgba(0,0,0,.48); padding:28px; transform:translateY(12px) scale(.985); transition:transform .2s ease; }
.auth-overlay.is-open .auth-modal { transform:none; }
.auth-close { position:absolute; top:14px; right:14px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:rgba(255,255,255,.055); color:#9fb5c2; cursor:pointer; font-size:17px; }
.auth-close:hover { color:#fff; background:rgba(255,255,255,.09); }
.auth-logo { height:48px; width:auto; margin:0 auto 18px; }
.auth-view { display:none; }
.auth-view.is-active { display:block; }
.auth-title { text-align:center; font-size:23px; font-weight:800; letter-spacing:-.5px; }
.auth-subtitle { text-align:center; color:#8fa9b8; font-size:13px; line-height:1.5; margin:7px 0 22px; }
.auth-google { width:100%; height:46px; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:10px; border-radius:8px; background:#fff; color:#1f2937; font-weight:700; cursor:pointer; }
.auth-google:hover { background:#f1f4f6; }
.auth-divider { display:flex; align-items:center; gap:12px; color:#718d9d; font-size:11px; margin:20px 0; }
.auth-divider::before,.auth-divider::after { content:""; height:1px; flex:1; background:var(--border); }
.auth-field { margin-bottom:14px; }
.auth-field label { display:block; color:#c8d8e1; font-size:12px; font-weight:650; margin-bottom:7px; }
.auth-input-wrap { position:relative; }
.auth-field input { width:100%; height:46px; border:1px solid #345267; outline:0; border-radius:8px; background:#091923; color:#fff; padding:0 13px; font-size:13px; transition:border-color .18s ease, box-shadow .18s ease; }
.auth-field input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(22,136,248,.10); }
.auth-input-wrap input { padding-right:45px; }
.auth-password-toggle { position:absolute; top:0; right:0; width:44px; height:46px; background:transparent; color:#809dac; cursor:pointer; }
.auth-password-toggle:hover { color:#fff; }
.auth-row { display:flex; justify-content:flex-end; margin:-2px 0 16px; }
.auth-link { color:#62b5ff; background:transparent; cursor:pointer; font-size:12px; font-weight:650; }
.auth-link:hover { color:#91cbff; }
.auth-submit { width:100%; height:46px; }
.auth-switch { text-align:center; color:#91a9b7; font-size:12px; margin-top:20px; }
.auth-switch .auth-link { margin-left:4px; }
.auth-error { display:none; margin:-3px 0 12px; padding:9px 11px; border-radius:7px; background:rgba(255,80,80,.1); color:#ffaaaa; font-size:11px; }
.auth-error.is-visible { display:block; }

@media (max-width:1050px) { .footer-grid { grid-template-columns:repeat(3,1fr); } .footer-brand { grid-column:1/-1; } }
@media (max-width:768px) { .auth-overlay { padding:12px;} .auth-modal { width:100%; max-height:calc(100dvh - 24px); border-radius:16px 16px 12px 12px; padding:25px 20px calc(22px + env(safe-area-inset-bottom)); } .auth-title { font-size:21px; } }

/* =========================================================
   MOBILE BOTTOM NAV
   Uma unica implementacao. Sem JS, visualViewport ou top calculado.
   ========================================================= */

.mobile-bottom-nav {
    display: none;
}

/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 1050px) {

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

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

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    :root {
        --header-height: 62px;
    }

    body {
        padding-bottom:
            calc(
                var(--mobile-bottom-height)
                + env(safe-area-inset-bottom)
            );
    }

    /* HEADER FIXO */

    .top-header {
        height: var(--header-height);

        padding:
            0
            12px;
    }

    .sidebar-toggle {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        margin-left: -4px;
        margin-right: 6px;
        color: #fff;
        font-size: 19px;
    }

    .brand {
        position: static;

        transform: none;

        margin-right: auto;

        height: 46px;

        margin-left: 0px;

    }

    .brand img {
        max-height: 42px;
    }

    .brand-name {
        font-size: 20px;
    }

    .header-actions {
        gap: 7px;
    }

    .header-actions .btn {
        min-height: 38px;

        padding: 0 13px;

        font-size: 12px;
    }

    /* SIDEBAR VIRA MENU LATERAL (GAVETA) */

    .sidebar,
    .sidebar.collapsed {
        top: 0;
        bottom: 0;
        z-index: 4200; /* acima da barra mobile (4000), abaixo do modal (5000) */
        width: min(300px, 84vw);
        display: flex;
        flex-direction: column;
        padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px));
        border-right: 1px solid var(--border-light);
        box-shadow: 18px 0 50px rgba(0, 0, 0, .45);
        transform: translateX(-102%);
        visibility: hidden;
        transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility .28s;
    }

    body.mobile-menu-open .sidebar {
        transform: none;
        visibility: visible;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    /* No mobile o menu sempre abre completo, mesmo se recolhido no desktop. */
    .sidebar.collapsed .nav-item {
        width: auto;
        min-width: 0;
        height: auto;
        min-height: 48px;
        justify-content: flex-start;
        padding: 0 13px;
    }

    .sidebar.collapsed .nav-icon {
        width: 25px;
        min-width: 25px;
        height: auto;
        margin-right: 11px;
    }

    .sidebar.collapsed .nav-label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        opacity: 1;
        visibility: visible;
    }

    .sidebar-drawer-head {
        display: flex;
    }

    .sidebar-backdrop {
        display: block;
    }

    body.mobile-menu-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .page,
    body.sidebar-is-collapsed .page {
        margin-left: 0;
    }

    .content {
        width: calc(100% - 24px);

        padding:
            12px
            0
            30px;
    }

    /* HERO */

    .hero {
        min-height: 220px;

        border-radius: 9px;
    }

    .hero-content {
        min-height: 510px;

        width: 100%;

        justify-content: flex-end;
        display: flex;

        padding:
            30px
            18px
            34px;
    }

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5, 18, 28, .03) 15%,
                rgba(5, 18, 28, .25) 45%,
                rgba(5, 18, 28, .92) 78%,
                rgba(5, 18, 28, .98) 100%
            );
    }

    .hero-badge {
        display: none;
    }

    .hero h1 {
        max-width: 340px;

        font-size: 25px;
        line-height: 1.22;

        letter-spacing: -.7px;
    }

    .hero p {
        max-width: 330px;

        margin-top: 9px;

        font-size: 12px;
    }

    .hero-cta {
        width: 100%;

        height: 45px;

        margin-top: 18px;
    }

    /* QUICK */

    .quick-grid {
        gap: 8px;

        margin-top: 12px;
    }

    .quick-card {
        min-height: 48px;

        padding: 0 11px;
    }

    .quick-card-title {
        font-size: 11px;
        gap: 6px;
    }

    .quick-number {
        font-size: 10px;
        gap: 5px;
    }

    /* SEARCH */

    .search-wrap {
        margin-top: 15px;
    }

    .search-box {
        height: 49px;
    }

    .shortcut {
        display: none;
    }

    /* SECTIONS */

    .section {
        margin-top: 20px;
    }

    .section-title {
        font-size: 15px;
    }

    /* GAMES HORIZONTAL */

    .games-grid {
        display: flex;

        gap: 10px;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        padding-bottom: 8px;

        scrollbar-width: none;
    }

    .games-grid::-webkit-scrollbar {
        display: none;
    }

    .game-card {
        flex:
            0
            0
            125px;

        scroll-snap-align: start;
    }

    /* CHALLENGES */

    .challenge-grid {
        grid-template-columns: 1fr;
    }

    .challenge-card {
        min-height: 105px;
    }

    .desktop-footer {
        display: none;
    }

}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .header-actions .btn-login {
        padding: 0 12px;
    }

    .header-actions .btn-primary {
        padding: 0 12px;
    }

    .hero {
        min-height: 220px;
    }

    .hero-content {
        min-height: 500px;
    }

    .quick-card {
        flex-direction: column;

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

        gap: 5px;

        min-height: 58px;
    }
}

/* =========================================================
   MOBILE BOTTOM NAV - REGRA UNICA E FINAL
   ========================================================= */
@media screen and (max-width: 768px) {
    body {
        padding-bottom: calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom, 0px)) !important;
    }

    .mobile-bottom-nav {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom, 0px)) !important;
        min-height: var(--mobile-bottom-height) !important;
        margin: 0 !important;
        padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
        box-sizing: border-box !important;
        background: #102735 !important;
        border-top: 1px solid rgba(255,255,255,.08) !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 4000 !important; /* abaixo do menu lateral (4200) e do modal (5000) */
        transform: none !important;
        -webkit-transform: none !important;
    }

    .mobile-bottom-nav .mobile-nav-item {
        position: relative;
        min-width: 0;
        min-height: var(--mobile-bottom-height);
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 9px 4px 7px;
        color: #9eb8c7;
        font-size: 10px;
        font-weight: 650;
        line-height: 1;
    }

    .mobile-bottom-nav .mobile-nav-item i {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
    }

    .mobile-bottom-nav .mobile-nav-item span {
        display: block;
        font-size: 10px;
        line-height: 1.15;
        white-space: nowrap;
    }

    .mobile-bottom-nav .mobile-nav-item.active { color: #fff; }
    .mobile-bottom-nav .mobile-nav-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 38px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: transparent;
        transform: translateX(-50%);
    }
    .mobile-bottom-nav .mobile-nav-item.active::before { background: #fff; }
}

@media screen and (min-width: 769px) {
    .mobile-bottom-nav { display: none !important; }
}

    
/* =========================================================
   FIRST LOADING / SPLASH SCREEN
   ========================================================= */
body.first-loading-active { overflow: hidden; }

.first-loading {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #102735;
    opacity: 1;
    visibility: visible;
    transition: opacity .48s ease, visibility .48s ease;
    will-change: opacity;
}

.first-loading.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.first-loading-logo {
    width: clamp(150px, 22vw, 230px);
    height: auto;
    opacity: 0;
    transform: translateY(8px) scale(.94);
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.18));
    animation: firstLoadingLogoIn .58s cubic-bezier(.22,.8,.28,1) .06s forwards,
               firstLoadingLogoPulse 1.15s ease-in-out .64s infinite alternate;
    will-change: transform, opacity;
}

@keyframes firstLoadingLogoIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes firstLoadingLogoPulse {
    from { transform: scale(1); }
    to { transform: scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
    .first-loading { transition-duration: .2s; }
    .first-loading-logo { animation: none; opacity: 1; transform: none; }
}

/* =========================================================
   FAIXA DE INDICACAO (fixa acima do header)
   ========================================================= */
html.promo-closed { --promo-bar-height: 0px; }

.promo-bar { position:fixed; top:0; left:0; right:0; z-index:1001; height:var(--promo-bar-height); display:flex; align-items:center; justify-content:center; gap:14px; padding:0 52px 0 16px; overflow:hidden; background:linear-gradient(90deg,#ff5400 0%,#ff7300 55%,#ff9416 100%); color:#fff; box-shadow:inset 0 -1px 0 rgba(0,0,0,.08); }
html.promo-closed .promo-bar { display:none; }
.promo-bar-icon { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:26px; height:26px; color:#ffe45c; font-size:19px; filter:drop-shadow(0 1px 2px rgba(120,30,0,.35)); }
.promo-bar-text { font-size:13px; font-weight:600; line-height:1.25; text-shadow:0 1px 1px rgba(120,30,0,.18); }
.promo-bar-text .promo-short { display:none; }
.promo-bar-cta { flex:0 0 auto; height:30px; display:inline-flex; align-items:center; justify-content:center; padding:0 15px; border-radius:7px; background:#fff; color:#e65100; font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap; transition:transform .18s ease, box-shadow .18s ease; }
.promo-bar-cta:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(120,30,0,.25); }
.promo-bar-close { position:absolute; top:50%; right:8px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:transparent; color:rgba(255,255,255,.92); font-size:18px; cursor:pointer; transform:translateY(-50%); transition:background .18s ease; }
.promo-bar-close:hover { background:rgba(255,255,255,.16); color:#fff; }

@media (max-width:768px) {
    :root { --promo-bar-height: 52px; }
    .promo-bar { justify-content:flex-start; gap:10px; padding:0 46px 0 12px; }
    .promo-bar-text { flex:1 1 auto; min-width:0; font-size:12px; }
    .promo-bar-text .promo-full { display:none; }
    .promo-bar-text .promo-short { display:inline; }
    .promo-bar-cta { height:30px; padding:0 12px; }
    .promo-bar-close { right:6px; }
}