:root {
    --accent: #7c5cff;
    --accent-2: #b19cff;
    --accent-rgb: 124, 92, 255;

    --primary: #7c5cff;
    --primary-hover: #b19cff;

    --radius: 32px;
    --design-card-radius: 32px;
    --design-button-radius: 999px;
    --design-spacing: 1.16;
    --design-font-scale: 1.08;
    --design-shadow: 0 18px 55px rgba(124,92,255,.18);
    --design-transition: .22s ease;
}

html {
    font-size: calc(16px * var(--design-font-scale));
}

body {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

/* =========================================================
   BACKGROUND THEMES
========================================================= */

body {
    background: #030405;
}

/* =========================================================
   GLOBAL SHAPE / SPACING
========================================================= */

.game-card,
.feature-card,
.sidebar-card,
.admin-card,
.sync-panel,
.admin-stat-card,
.game-player-card,
.game-information-card,
.game-recommendation-card,
.app-promo-section,
.auth-card {
    border-radius: var(--design-card-radius);
}

.button,
.category-pill,
.load-more-button,
.google-play-button,
.small-action,
.game-back-button,
.player-toolbar-actions button {
    border-radius: var(--design-button-radius);
}

.section-block,
.app-promo-section {
    --local-spacing: var(--design-spacing);
}

.game-card,
.feature-card,
.button,
.category-pill,
.load-more-button,
.google-play-button,
.small-action {
    transition: all var(--design-transition);
}

/* =========================================================
   SURFACE STYLE
========================================================= */

.game-card,
.feature-card,
.sidebar-card,
.admin-card,
.sync-panel,
.admin-stat-card,
.game-information-card,
.game-recommendation-card,
.auth-card {
    background:
        linear-gradient(145deg, rgba(var(--accent-rgb), .055), rgba(255,255,255,.015)),
        #10141c;
}

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

.topbar {
    top: 10px;
    margin: 0 18px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: rgba(10,13,18,.88);
    backdrop-filter: blur(20px);
}

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

.game-card,
.feature-card,
.game-recommendation-card {
    border-color: rgba(255,255,255,.06);
    box-shadow: var(--design-shadow);
}

/* =========================================================
   BUTTON STYLE
========================================================= */

.button-primary,
.load-more-button {
    color: #111;
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    border: 0;
    box-shadow: 0 12px 30px rgba(var(--accent-rgb), .18);
}

/* =========================================================
   ACCENT OVERRIDES
========================================================= */

.brand b,
.section-kicker,
.eyebrow,
.hero-stat span,
.feature-card-content > span,
.game-title-meta span:first-child,
.game-recommendation-info > div span:last-child,
.play-store-icon,
.app-slider-copy h2 em,
.app-promo-content h2 em,
.app-screen-balance strong,
.app-screen-reward strong {
    color: var(--accent);
}

.brand-mark,
.category-pill.active,
.category-pill:hover,
.hot-label,
.mini-play,
.hover-play span,
.game-recommendation-play,
.app-promo-badge,
.app-screen-logo,
.app-slider-dot.active {
    background: var(--accent);
}

.game-card:hover,
.feature-card:hover,
.game-recommendation-card:hover,
.google-play-button:hover {
    border-color: rgba(var(--accent-rgb), .42);
}

.game-card:hover,
.feature-card:hover,
.game-recommendation-card:hover,
.app-promo-section {
    box-shadow: var(--design-shadow);
}

/* =========================================================
   DENSITY
========================================================= */

.page-shell,
.game-page-shell,
.admin-shell {
    padding-top: 34px;
}
.games-grid {
    gap: 22px;
}
.game-card-body {
    padding: 17px 17px 18px;
}

/* =========================================================
   ANIMATIONS OFF
========================================================= */