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

:root {
    --bg: #070914;
    --panel: #111528;
    --panel2: #171b30;
    --text: #f6f7ff;
    --muted: #919ab6;
    --border: rgba(255, 255, 255, 0.09);

    --purple: #7b5cff;
    --cyan: #2ce5ff;
    --green: #52ef98;
    --red: #ff586f;
    --orange: #ff9955;
    --yellow: #ffd84b;
    --blue: #5495ff;
    --pink: #ff4fc7;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    color: var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at 50% -15%,
            #20234c 0,
            #0b0d19 40%,
            #05060c 100%
        );

    overflow-x: hidden;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
}

button:disabled {
    cursor: default;
    opacity: 0.55;
}

.hidden {
    display: none !important;
}


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

.bg-grid {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        );

    background-size: 44px 44px;
}

.glow {
    position: fixed;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(130px);

    opacity: 0.11;

    z-index: -2;

    pointer-events: none;
}

.glow-a {
    background: var(--purple);
    top: -250px;
    left: -150px;
}

.glow-b {
    background: var(--cyan);
    right: -260px;
    top: 250px;
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar {
    height: 76px;

    position: sticky;
    top: 0;

    z-index: 100;

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

    padding: 0 36px;

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

    background: rgba(5, 7, 14, 0.78);

    backdrop-filter: blur(18px);
}

.brand {
    display: flex;
    align-items: center;

    gap: 11px;

    color: white;

    background: transparent;

    cursor: pointer;
}

.brand-logo {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--cyan)
        );

    font-size: 21px;
    font-weight: 900;
}

.brand-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    line-height: 1;
}

.brand-name strong {
    font-size: 16px;
    letter-spacing: 1.2px;
}

.brand-name small {
    margin-top: 4px;

    color: var(--muted);

    font-size: 9px;
    letter-spacing: 2.4px;
}

.header-actions {
    display: flex;
    align-items: center;

    gap: 8px;
}

.icon-btn {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

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

    background: rgba(255, 255, 255, 0.045);

    color: white;

    cursor: pointer;

    transition:
        transform 0.2s,
        background 0.2s,
        border-color 0.2s;
}

.icon-btn:hover {
    transform: translateY(-2px);

    background: rgba(255, 255, 255, 0.09);
}

.icon-btn.danger:hover {
    background: rgba(255, 88, 111, 0.15);
}

.online-indicator {
    padding: 7px 10px;

    border-radius: 9px;

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

    color: var(--muted);

    font-size: 9px;
    font-weight: 900;
}

.online-indicator.online {
    color: #62f2a5;

    border-color: rgba(82, 239, 152, 0.25);

    background: rgba(82, 239, 152, 0.07);
}

.profile-chip {
    min-width: 145px;
    height: 48px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 5px 12px 5px 6px;

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

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.045);

    color: white;

    cursor: pointer;

    text-align: left;
}

.avatar {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(123, 92, 255, 0.22),
            rgba(44, 229, 255, 0.14)
        );
}

.profile-chip-text {
    display: flex;
    flex-direction: column;
}

.profile-chip-text strong {
    max-width: 90px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 12px;
}

.profile-chip-text small {
    margin-top: 2px;

    color: var(--muted);

    font-size: 9px;
}


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

main {
    width: min(
        1320px,
        calc(100% - 46px)
    );

    margin: auto;

    padding-bottom: 80px;
}


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

.hero {
    min-height: 470px;

    display: grid;

    grid-template-columns: 1.25fr 0.75fr;

    gap: 60px;

    align-items: center;

    padding: 78px 18px 55px;
}

.eyebrow {
    color: #9d8cff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}

.hero h1 {
    margin-top: 14px;

    font-size: clamp(
        50px,
        6vw,
        86px
    );

    line-height: 0.98;

    letter-spacing: -4px;
}

.hero h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #aa92ff,
            #38e6ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.hero-copy > p {
    max-width: 600px;

    margin-top: 23px;

    color: #a7b0c8;

    font-size: 17px;

    line-height: 1.65;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 11px;

    margin-top: 29px;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {
    min-height: 48px;

    padding: 0 20px;

    border-radius: 13px;

    font-size: 11px;

    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.2s,
        filter 0.2s;
}

.btn.primary {
    color: white;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            #5c43e8
        );

    box-shadow:
        0 10px 30px
        rgba(123, 92, 255, 0.25);
}

.btn.secondary {
    color: white;

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

    background: rgba(255, 255, 255, 0.05);
}

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

    filter: brightness(1.08);
}

.btn.wide {
    width: 100%;

    margin-top: 12px;
}

.btn.small {
    margin-left: auto;

    min-height: 38px;
}


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

.player-card {
    padding: 28px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(24, 28, 50, 0.96),
            rgba(10, 13, 25, 0.95)
        );

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.35);
}

.player-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.player-card-top small {
    color: var(--muted);

    font-size: 9px;
}

.player-card-top h2 {
    margin-top: 5px;

    font-size: 22px;
}

.level-badge {
    padding: 8px 11px;

    border-radius: 9px;

    border: 1px solid rgba(123, 92, 255, 0.3);

    background: rgba(123, 92, 255, 0.12);

    color: #b8aaff;

    font-size: 10px;

    font-weight: 900;
}

.xp-head {
    display: flex;
    justify-content: space-between;

    margin-top: 28px;
    margin-bottom: 8px;

    color: var(--muted);
}

.xp-track {
    height: 9px;

    border-radius: 99px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.06);
}

.xp-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--purple),
            var(--cyan)
        );

    transition: width 0.4s;
}

.mini-stats {
    display: grid;

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

    gap: 8px;

    margin-top: 25px;
}

.mini-stats > div {
    min-height: 78px;

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

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.025);
}

.mini-stats strong {
    font-size: 18px;
}

.mini-stats small {
    margin-top: 4px;

    color: var(--muted);

    font-size: 9px;
}


/* =========================================================
   SECTIONS
========================================================= */

.section {
    margin-top: 58px;
}

.section-title {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 15px;

    margin-bottom: 21px;
}

.section-title h2 {
    margin-top: 5px;

    font-size: 29px;

    letter-spacing: -1px;
}

.count-badge {
    padding: 7px 10px;

    border-radius: 8px;

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

    color: var(--muted);

    font-size: 9px;

    font-weight: 900;
}

.text-btn {
    color: #aa9cff;

    background: transparent;

    font-size: 10px;

    font-weight: 900;

    cursor: pointer;
}


/* =========================================================
   FEATURED GAMES
========================================================= */

.featured-grid {
    display: grid;

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

    gap: 15px;
}

.featured-card {
    position: relative;

    min-height: 210px;

    padding: 24px;

    overflow: hidden;

    text-align: left;

    color: white;

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

    border-radius: 21px;

    cursor: pointer;

    transition:
        transform 0.25s,
        border-color 0.25s;
}

.featured-card:hover {
    transform: translateY(-6px);

    border-color: rgba(255, 255, 255, 0.18);
}

.aim-bg {
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(44, 229, 255, 0.2),
            transparent 52%
        ),
        #111729;
}

.cps-bg {
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(255, 153, 85, 0.2),
            transparent 52%
        ),
        #181421;
}

.dino-bg {
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(82, 239, 152, 0.18),
            transparent 52%
        ),
        #0f191b;
}

.featured-icon {
    display: block;

    margin-bottom: 23px;

    font-size: 36px;
}

.featured-card small {
    color: var(--muted);

    font-size: 8px;

    font-weight: 900;
}

.featured-card h3 {
    margin-top: 4px;

    font-size: 21px;
}

.featured-card p {
    max-width: 270px;

    margin-top: 7px;

    color: #a7aec4;

    font-size: 12px;

    line-height: 1.5;
}

.arrow {
    position: absolute;

    right: 20px;
    bottom: 19px;

    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.07);
}


/* =========================================================
   GAME LIBRARY
========================================================= */

.games-grid {
    display: grid;

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

    gap: 12px;
}

.game-card {
    min-height: 136px;

    display: grid;

    grid-template-columns: auto 1fr auto;

    gap: 16px;

    align-items: center;

    padding: 16px;

    color: white;

    text-align: left;

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

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 24, 43, 0.9),
            rgba(13, 16, 29, 0.92)
        );

    cursor: pointer;

    transition:
        transform 0.2s,
        border-color 0.2s,
        background 0.2s;
}

.game-card:hover {
    transform: translateY(-4px);

    border-color: rgba(255, 255, 255, 0.16);

    background:
        linear-gradient(
            145deg,
            rgba(26, 31, 55, 0.95),
            rgba(15, 19, 34, 0.96)
        );
}

.game-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    font-size: 26px;
}

.game-icon.pink {
    background: rgba(255, 79, 199, 0.1);
}

.game-icon.orange {
    background: rgba(255, 153, 85, 0.1);
}

.game-icon.cyan {
    background: rgba(44, 229, 255, 0.1);
}

.game-icon.purple {
    background: rgba(123, 92, 255, 0.12);
}

.game-icon.yellow {
    background: rgba(255, 216, 75, 0.1);
}

.game-icon.green {
    background: rgba(82, 239, 152, 0.1);
}

.game-icon.lime {
    background: rgba(180, 255, 75, 0.1);
}

.game-icon.blue {
    background: rgba(79, 152, 255, 0.1);
}

.game-icon.red {
    background: rgba(255, 88, 111, 0.1);
}

.game-card small {
    color: var(--muted);

    font-size: 8px;

    font-weight: 900;
}

.game-card h3 {
    margin-top: 4px;

    font-size: 15px;
}

.game-card p {
    margin-top: 5px;

    color: var(--muted);

    font-size: 10px;
}

.game-card > strong {
    min-width: 70px;

    text-align: right;

    font-size: 11px;
}


/* =========================================================
   GLOBAL PLAYERS
========================================================= */

.global-status {
    padding: 18px;

    margin-bottom: 12px;

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

    border-radius: 14px;

    color: var(--muted);

    background: rgba(255, 255, 255, 0.025);

    font-size: 11px;
}

.global-grid {
    display: grid;

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

    gap: 10px;
}

.global-player {
    padding: 16px;

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

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.03);
}

.global-player strong {
    color: white;

    font-size: 11px;
}

.global-player small {
    color: var(--muted);

    font-size: 9px;

    line-height: 1.7;
}


/* =========================================================
   ACHIEVEMENTS
========================================================= */

.achievement-grid {
    display: grid;

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

    gap: 10px;
}

.achievement-item {
    min-height: 108px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px;

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

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.025);
}

.achievement-item.locked {
    opacity: 0.35;

    filter: grayscale(0.8);
}

.achievement-icon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    flex: none;

    border-radius: 12px;

    background: rgba(123, 92, 255, 0.13);

    font-size: 21px;
}

.achievement-item strong {
    display: block;

    font-size: 11px;
}

.achievement-item p {
    margin-top: 4px;

    color: var(--muted);

    font-size: 8px;
}


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

footer {
    min-height: 95px;

    display: flex;

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

    gap: 12px;

    padding: 20px;

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

    color: var(--muted);

    font-size: 10px;

    text-align: center;
}

footer strong {
    color: white;
}


/* =========================================================
   WELCOME
========================================================= */

.welcome-screen {
    position: fixed;

    inset: 0;

    z-index: 2000;

    display: grid;
    place-items: center;

    padding: 20px;

    background:
        radial-gradient(
            circle at 50% 0,
            #24214e,
            #070914 62%
        );
}

.welcome-box {
    width: min(
        430px,
        100%
    );

    padding: 40px;

    text-align: center;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #171b30,
            #0c0f1c
        );
}

.welcome-logo {
    width: 75px;
    height: 75px;

    display: grid;
    place-items: center;

    margin: 0 auto 20px;

    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--cyan)
        );

    font-size: 33px;

    font-weight: 900;
}

.welcome-box h1 {
    margin-top: 7px;

    font-size: 27px;
}

.welcome-box p {
    max-width: 330px;

    margin: 11px auto 23px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.6;
}

.welcome-box input {
    width: 100%;
    height: 54px;

    padding: 0 15px;

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

    border-radius: 13px;

    outline: none;

    background: rgba(255, 255, 255, 0.05);

    color: white;

    text-align: center;

    font-size: 15px;
}

.welcome-box input:focus {
    border-color: rgba(123, 92, 255, 0.65);

    box-shadow:
        0 0 0 3px
        rgba(123, 92, 255, 0.1);
}

.welcome-box small {
    display: block;

    margin-top: 17px;

    color: var(--muted);

    font-size: 9px;
}


/* =========================================================
   MODALS
========================================================= */

.modal {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: grid;
    place-items: center;

    padding: 18px;

    background: rgba(2, 3, 7, 0.86);

    backdrop-filter: blur(12px);
}

.game-modal,
.stats-modal {
    width: min(
        1050px,
        100%
    );

    max-height: calc(100vh - 36px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #13172a,
            #0b0e19
        );
}

.stats-modal {
    width: min(
        900px,
        100%
    );

    overflow-y: auto;
}

.modal-header {
    min-height: 75px;

    display: flex;

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

    gap: 15px;

    padding: 16px 22px;

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

.modal-header h2 {
    margin-top: 4px;

    font-size: 20px;
}

.modal-buttons {
    display: flex;

    gap: 7px;
}


/* =========================================================
   GAME MODES
========================================================= */

.mode-area {
    min-height: 62px;

    display: flex;

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

    flex-wrap: wrap;

    gap: 8px;

    padding: 10px;

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

.mode-area > span {
    margin-right: 5px;

    color: var(--muted);

    font-size: 9px;

    font-weight: 900;
}

.mode-buttons {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;
}

.mode-btn {
    padding: 8px 13px;

    border-radius: 10px;

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

    color: var(--muted);

    background: rgba(255, 255, 255, 0.03);

    font-size: 9px;

    font-weight: 900;

    cursor: pointer;
}

.mode-btn:hover {
    background: rgba(255, 255, 255, 0.07);
}

.mode-btn.active {
    color: white;

    border-color: rgba(123, 92, 255, 0.55);

    background: rgba(123, 92, 255, 0.2);
}

.mode-btn.mode-hidden {
    display: none !important;
}

.unlimited-btn.active {
    border-color: rgba(82, 239, 152, 0.55);

    background: rgba(82, 239, 152, 0.13);

    color: #7dffb5;
}

.end-run {
    border-color: rgba(255, 88, 111, 0.35);

    color: #ff8192;
}


/* =========================================================
   GAME AREA
========================================================= */

.game-area {
    position: relative;

    min-height: 450px;

    flex: 1;

    display: flex;

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

    padding: 22px;

    overflow: auto;
}

.game-help {
    min-height: 44px;

    display: flex;

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

    padding: 9px 18px;

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

    color: var(--muted);

    font-size: 9px;

    text-align: center;
}

.game-panel {
    width: min(
        800px,
        100%
    );

    text-align: center;
}

.game-info {
    display: grid;

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

    gap: 9px;

    margin-bottom: 16px;
}

.game-info > div {
    min-height: 68px;

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

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

    border-radius: 13px;

    background: rgba(255, 255, 255, 0.025);
}

.game-info small {
    color: var(--muted);

    font-size: 8px;
}

.game-info strong {
    margin-top: 4px;

    font-size: 18px;
}

.result-box {
    margin-top: 18px;

    padding: 22px;

    border: 1px solid rgba(123, 92, 255, 0.25);

    border-radius: 17px;

    background: rgba(123, 92, 255, 0.07);
}

.result-box h2 {
    font-size: 36px;
}

.result-box p {
    margin-top: 5px;

    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   COMMON GAME INPUTS
========================================================= */

.game-input {
    width: min(
        460px,
        100%
    );

    height: 60px;

    padding: 0 16px;

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

    border-radius: 13px;

    outline: none;

    background: rgba(255, 255, 255, 0.04);

    color: white;

    text-align: center;

    font-size: 20px;
}

.game-input:focus {
    border-color: rgba(123, 92, 255, 0.6);

    box-shadow:
        0 0 0 3px
        rgba(123, 92, 255, 0.08);
}

.big-game-value {
    min-height: 145px;

    display: grid;
    place-items: center;

    padding: 15px;

    font-size: clamp(
        34px,
        7vw,
        68px
    );

    font-weight: 900;

    letter-spacing: 2px;

    word-break: break-word;
}

.arcade-subtitle {
    margin: 7px 0 16px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.5;
}

.game-controls {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

    margin-top: 14px;
}

.game-control-btn {
    min-width: 58px;
    min-height: 45px;

    padding: 0 14px;

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

    border-radius: 11px;

    background: rgba(255, 255, 255, 0.05);

    color: white;

    font-size: 13px;

    font-weight: 900;

    cursor: pointer;
}

.game-control-btn:hover {
    background: rgba(123, 92, 255, 0.16);
}

.choice-grid {
    width: min(
        600px,
        100%
    );

    display: grid;

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

    gap: 9px;

    margin: 14px auto 0;
}

.choice-btn {
    min-height: 62px;

    padding: 10px 14px;

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

    border-radius: 13px;

    color: white;

    background: rgba(255, 255, 255, 0.04);

    font-weight: 900;

    cursor: pointer;
}

.choice-btn:hover {
    background: rgba(123, 92, 255, 0.15);
}


/* =========================================================
   WPM
========================================================= */

.typing-text {
    min-height: 115px;

    padding: 18px;

    text-align: left;

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

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.03);

    color: #c5cbdd;

    font-size: 17px;

    line-height: 1.7;
}

.typing-input {
    width: 100%;
    height: 115px;

    margin-top: 12px;

    padding: 16px;

    resize: none;

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

    border-radius: 15px;

    outline: none;

    background: rgba(0, 0, 0, 0.22);

    color: white;

    font-size: 16px;
}

.typing-input:focus {
    border-color: rgba(123, 92, 255, 0.55);
}


/* =========================================================
   CPS
========================================================= */

.cps-zone {
    width: min(
        620px,
        100%
    );

    height: 270px;

    display: flex;

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

    margin: auto;

    border: 2px solid rgba(123, 92, 255, 0.35);

    border-radius: 21px;

    color: white;

    background:
        radial-gradient(
            circle,
            rgba(123, 92, 255, 0.22),
            rgba(123, 92, 255, 0.05)
        );

    cursor: pointer;

    user-select: none;
}

.cps-zone:active {
    transform: scale(0.995);
}

.cps-zone strong {
    font-size: 56px;
}


/* =========================================================
   AIM
========================================================= */

.aim-arena {
    width: min(
        820px,
        100%
    );

    height: min(
        490px,
        55vh
    );

    position: relative;

    overflow: hidden;

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

    border-radius: 19px;

    background:
        radial-gradient(
            circle,
            #121a30,
            #080b14
        );

    cursor: crosshair;
}

.aim-target {
    position: absolute;

    width: 50px;
    height: 50px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            white 0 12%,
            var(--red) 13% 35%,
            white 36% 53%,
            var(--red) 54%
        );

    box-shadow:
        0 0 27px
        rgba(255, 88, 111, 0.45);

    cursor: crosshair;
}


/* =========================================================
   CANVAS
========================================================= */

.game-canvas {
    display: block;

    width: min(
        850px,
        100%
    );

    height: auto;

    max-height: 510px;

    margin: auto;

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

    border-radius: 19px;

    background: #090d16;
}

.circle-canvas {
    touch-action: none;
}


/* =========================================================
   PERFECT CIRCLE
========================================================= */

.circle-history {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 6px;

    margin-top: 12px;
}

.circle-score-pill {
    padding: 5px 8px;

    border-radius: 8px;

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

    font-size: 9px;
}

.circle-score-pill.negative {
    color: #ff7689;
}


/* =========================================================
   REACTION
========================================================= */

.reaction-zone {
    width: min(
        760px,
        100%
    );

    height: 340px;

    display: flex;

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

    border-radius: 21px;

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

    cursor: pointer;

    user-select: none;
}

.reaction-zone h2 {
    font-size: clamp(
        28px,
        6vw,
        55px
    );
}

.reaction-zone p {
    margin-top: 7px;

    color: rgba(255, 255, 255, 0.7);
}

.reaction-zone.wait {
    background:
        linear-gradient(
            145deg,
            #3b1730,
            #23101e
        );
}

.reaction-zone.ready {
    background:
        linear-gradient(
            145deg,
            #116a48,
            #0b432f
        );
}

.reaction-zone.bad {
    background:
        linear-gradient(
            145deg,
            #7a252f,
            #44151b
        );
}


/* =========================================================
   MEMORY
========================================================= */

.memory-grid {
    width: min(
        580px,
        100%
    );

    display: grid;

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

    gap: 9px;

    margin: auto;
}

.memory-card {
    aspect-ratio: 1;

    display: grid;
    place-items: center;

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

    border-radius: 14px;

    background: #1a1f36;

    color: white;

    font-size: 0;

    cursor: pointer;
}

.memory-card.flipped,
.memory-card.matched {
    font-size: clamp(
        22px,
        5vw,
        39px
    );

    background: rgba(123, 92, 255, 0.16);
}

.memory-card.matched {
    border-color: rgba(82, 239, 152, 0.4);

    background: rgba(82, 239, 152, 0.12);
}


/* =========================================================
   COLOR RUSH
========================================================= */

.color-word {
    margin: 20px;

    font-size: clamp(
        50px,
        9vw,
        88px
    );

    font-weight: 900;
}

.color-options {
    width: min(
        500px,
        100%
    );

    display: grid;

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

    gap: 9px;

    margin: auto;
}

.color-btn {
    min-height: 65px;

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

    border-radius: 13px;

    color: white;

    background: rgba(255, 255, 255, 0.04);

    font-weight: 900;

    cursor: pointer;
}

.color-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}


/* =========================================================
   CLICK RUSH
========================================================= */

.click-rush-zone {
    position: relative;

    width: min(
        760px,
        100%
    );

    height: 400px;

    overflow: hidden;

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

    border-radius: 19px;

    background: #090d16;
}

.rush-target {
    position: absolute;

    width: 65px;
    height: 65px;

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

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            #ff5d75
        );

    color: white;

    font-size: 24px;

    cursor: pointer;
}


/* =========================================================
   NUMBER MEMORY
========================================================= */

.number-display {
    min-height: 160px;

    display: grid;
    place-items: center;

    font-size: clamp(
        40px,
        8vw,
        72px
    );

    font-weight: 900;

    letter-spacing: 7px;

    word-break: break-all;
}

.number-input {
    width: min(
        450px,
        100%
    );

    height: 60px;

    padding: 0 16px;

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

    border-radius: 13px;

    outline: none;

    background: rgba(255, 255, 255, 0.04);

    color: white;

    text-align: center;

    font-size: 21px;
}


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

.reflex-grid {
    width: min(
        500px,
        100%
    );

    display: grid;

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

    gap: 9px;

    margin: auto;
}

.reflex-cell {
    aspect-ratio: 1;

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

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.035);

    cursor: pointer;
}

.reflex-cell.active {
    background:
        radial-gradient(
            circle,
            #69efff,
            #287be3
        );

    box-shadow:
        0 0 30px
        rgba(44, 229, 255, 0.3);
}


/* =========================================================
   PAUSE
========================================================= */

.pause-overlay {
    position: absolute;

    inset: 0;

    z-index: 50;

    display: flex;

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

    padding: 24px;

    text-align: center;

    background: rgba(4, 6, 13, 0.9);

    backdrop-filter: blur(7px);
}

.pause-overlay h2 {
    font-size: 38px;

    letter-spacing: -1px;
}

.pause-overlay p {
    margin-top: 7px;

    color: var(--muted);

    font-size: 11px;
}

.pause-actions {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 9px;

    margin-top: 24px;
}

.pause-actions button {
    min-width: 120px;
    min-height: 45px;

    padding: 0 17px;

    border-radius: 12px;

    color: white;

    font-size: 10px;

    font-weight: 900;

    cursor: pointer;
}

.pause-resume {
    background:
        linear-gradient(
            135deg,
            var(--purple),
            #5c43e8
        );
}

.pause-restart {
    background: #26304c;
}

.pause-exit {
    background: #812c3a;
}


/* =========================================================
   2048
========================================================= */

.board2048 {
    width: min(
        500px,
        100%
    );

    display: grid;

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

    gap: 8px;

    padding: 10px;

    margin: auto;

    border-radius: 18px;

    background: #11162a;

    touch-action: none;
}

.tile2048 {
    aspect-ratio: 1;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.055);

    font-size: clamp(
        18px,
        4vw,
        34px
    );

    font-weight: 900;

    transition:
        transform 0.12s,
        background 0.12s;
}

.tile2048.filled {
    background:
        linear-gradient(
            135deg,
            rgba(123, 92, 255, 0.8),
            rgba(44, 229, 255, 0.48)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.08);
}

.tile2048[data-value="128"],
.tile2048[data-value="256"],
.tile2048[data-value="512"],
.tile2048[data-value="1024"],
.tile2048[data-value="2048"] {
    background:
        linear-gradient(
            135deg,
            #ff9955,
            #ff586f
        );
}


/* =========================================================
   MINESWEEPER
========================================================= */

.mine-grid {
    width: min(
        560px,
        100%
    );

    display: grid;

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

    gap: 4px;

    margin: auto;
}

.mine-cell {
    aspect-ratio: 1;

    display: grid;
    place-items: center;

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

    border-radius: 7px;

    background: #1b2138;

    color: white;

    font-size: 13px;

    font-weight: 900;

    cursor: pointer;

    user-select: none;
}

.mine-cell:hover:not(.open) {
    background: #252e4f;
}

.mine-cell.open {
    background: #0b0f1c;

    cursor: default;
}

.mine-cell.flagged {
    color: var(--yellow);
}

.mine-cell.mine {
    background: #742632;
}


/* =========================================================
   TIC TAC TOE
========================================================= */

.tic-grid,
.online-tic-grid {
    width: min(
        420px,
        100%
    );

    display: grid;

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

    gap: 8px;

    margin: auto;
}

.tic-cell,
.online-tic-cell {
    aspect-ratio: 1;

    display: grid;
    place-items: center;

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

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.04);

    color: white;

    font-size: clamp(
        40px,
        8vw,
        72px
    );

    font-weight: 900;

    cursor: pointer;
}

.tic-cell:hover:not(:disabled),
.online-tic-cell:hover:not(:disabled) {
    background: rgba(123, 92, 255, 0.13);
}


/* =========================================================
   CONNECT FOUR
========================================================= */

.connect-board,
.online-connect-board {
    width: min(
        620px,
        100%
    );

    display: grid;

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

    gap: 6px;

    padding: 10px;

    margin: auto;

    border-radius: 17px;

    background: #17234e;
}

.connect-cell,
.online-connect-cell {
    aspect-ratio: 1;

    border-radius: 50%;

    background: #080b14;

    cursor: pointer;

    box-shadow:
        inset 0 0 0 2px
        rgba(255, 255, 255, 0.03);
}

.connect-cell:hover,
.online-connect-cell:hover:not(:disabled) {
    box-shadow:
        inset 0 0 0 3px
        rgba(255, 255, 255, 0.14);
}

.connect-cell.player,
.online-connect-cell.player {
    background: #ff586f;
}

.connect-cell.cpu,
.online-connect-cell.guest {
    background: #ffd84b;
}

.online-connect-cell.host {
    background: #2ce5ff;
}


/* =========================================================
   SIMON
========================================================= */

.simon-grid {
    width: min(
        450px,
        100%
    );

    display: grid;

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

    gap: 10px;

    margin: auto;
}

.simon-cell {
    aspect-ratio: 1;

    border-radius: 20px;

    opacity: 0.36;

    cursor: pointer;

    transition:
        transform 0.12s,
        opacity 0.12s,
        filter 0.12s;
}

.simon-cell.active {
    opacity: 1;

    transform: scale(0.97);

    filter: brightness(1.6);
}

.simon-cell[data-index="0"] {
    background: #ff586f;
}

.simon-cell[data-index="1"] {
    background: #52ef98;
}

.simon-cell[data-index="2"] {
    background: #5495ff;
}

.simon-cell[data-index="3"] {
    background: #ffd84b;
}


/* =========================================================
   WHACK A MOLE
========================================================= */

.whack-grid {
    width: min(
        560px,
        100%
    );

    display: grid;

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

    gap: 9px;

    margin: auto;
}

.whack-cell {
    aspect-ratio: 1;

    display: grid;
    place-items: center;

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

    border-radius: 18px;

    background: #11172a;

    font-size: clamp(
        28px,
        7vw,
        58px
    );

    cursor: pointer;

    user-select: none;
}

.whack-cell.active {
    background:
        radial-gradient(
            circle,
            rgba(255, 153, 85, 0.25),
            #11172a 68%
        );
}


/* =========================================================
   BUBBLE POP / TARGET FRENZY
========================================================= */

.bubble-arena,
.target-frenzy-arena {
    width: min(
        820px,
        100%
    );

    height: min(
        490px,
        55vh
    );

    position: relative;

    overflow: hidden;

    margin: auto;

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

    border-radius: 19px;

    background:
        radial-gradient(
            circle,
            #121a30,
            #080b14
        );
}

.bubble-pop {
    position: absolute;

    display: grid;
    place-items: center;

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

    border-radius: 50%;

    color: white;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fff,
            #2ce5ff 20%,
            #7b5cff
        );

    cursor: pointer;

    box-shadow:
        0 0 18px
        rgba(44, 229, 255, 0.3);
}

.frenzy-target {
    position: absolute;

    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #fff 0 10%,
            #ff586f 11% 34%,
            #fff 35% 52%,
            #7b5cff 53%
        );

    cursor: pointer;

    box-shadow:
        0 0 18px
        rgba(255, 88, 111, 0.3);
}


/* =========================================================
   LIGHTS OUT
========================================================= */

.lights-grid {
    width: min(
        480px,
        100%
    );

    display: grid;

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

    gap: 8px;

    margin: auto;
}

.light-cell {
    aspect-ratio: 1;

    border-radius: 14px;

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

    background: #151a2d;

    cursor: pointer;
}

.light-cell.on {
    background: #ffd84b;

    box-shadow:
        0 0 24px
        rgba(255, 216, 75, 0.35);
}


/* =========================================================
   SEQUENCE MEMORY
========================================================= */

.sequence-grid {
    width: min(
        500px,
        100%
    );

    display: grid;

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

    gap: 9px;

    margin: auto;
}

.sequence-cell {
    aspect-ratio: 1;

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

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.035);

    cursor: pointer;

    transition: 0.12s;
}

.sequence-cell.active {
    background:
        radial-gradient(
            circle,
            #fff,
            #2ce5ff 28%,
            #7b5cff
        );

    box-shadow:
        0 0 30px
        rgba(44, 229, 255, 0.32);
}


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

.reaction-grid {
    width: min(
        500px,
        100%
    );

    display: grid;

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

    gap: 9px;

    margin: auto;
}

.reaction-grid-cell {
    aspect-ratio: 1;

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

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.035);

    cursor: pointer;
}

.reaction-grid-cell.active {
    background: #52ef98;

    box-shadow:
        0 0 30px
        rgba(82, 239, 152, 0.3);
}


/* =========================================================
   STATS
========================================================= */

.stats-profile {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 22px;

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

.large-avatar {
    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    border-radius: 17px;

    background: rgba(123, 92, 255, 0.15);

    font-size: 30px;
}

.stats-boxes {
    display: grid;

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

    gap: 9px;

    padding: 22px;
}

.stats-boxes > div {
    min-height: 94px;

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

    padding: 14px;

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

    border-radius: 14px;
}

.stats-boxes small {
    color: var(--muted);

    font-size: 8px;
}

.stats-boxes strong {
    margin-top: 6px;

    font-size: 19px;
}

.stats-heading {
    padding: 4px 22px 11px;

    color: #9fa7c0;

    font-size: 9px;

    letter-spacing: 1px;
}

.best-grid {
    display: grid;

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

    gap: 8px;

    padding: 0 22px 22px;
}

.best-item {
    min-height: 52px;

    display: flex;

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

    gap: 10px;

    padding: 0 13px;

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

    border-radius: 11px;
}

.best-item span {
    color: var(--muted);

    font-size: 9px;
}

.best-item strong {
    font-size: 10px;
}

.stats-achievements {
    padding: 0 22px 22px;

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

.reset-area {
    padding: 19px 22px 26px;

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

.reset-btn {
    padding: 10px 14px;

    border: 1px solid rgba(255, 88, 111, 0.2);

    border-radius: 9px;

    color: #ff8998;

    background: rgba(255, 88, 111, 0.07);

    cursor: pointer;
}


/* =========================================================
   ONLINE DASHBOARD
========================================================= */

.online-dashboard {
    margin-top: 16px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;
}

.online-panel {
    padding: 17px;

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

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.025);
}

.online-panel h3 {
    margin-bottom: 5px;

    font-size: 14px;
}

.online-panel > p {
    margin-bottom: 12px;

    color: var(--muted);

    font-size: 9px;

    line-height: 1.5;
}

.online-toolbar {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 12px;
}

.online-select,
.online-input {
    min-height: 38px;

    padding: 0 10px;

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

    border-radius: 9px;

    outline: none;

    background: #11162a;

    color: white;

    font-size: 10px;
}

.online-action-btn {
    min-height: 38px;

    padding: 0 12px;

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

    border-radius: 9px;

    background: rgba(123, 92, 255, 0.13);

    color: white;

    font-size: 9px;

    font-weight: 900;

    cursor: pointer;
}

.online-action-btn:hover {
    background: rgba(123, 92, 255, 0.23);
}

.online-action-btn.primary {
    background:
        linear-gradient(
            135deg,
            var(--purple),
            #5c43e8
        );
}

.online-action-btn.danger {
    background: rgba(255, 88, 111, 0.12);

    color: #ff8b9a;
}

.leaderboard-list,
.room-list {
    display: flex;

    flex-direction: column;

    gap: 6px;
}

.leaderboard-row,
.room-row {
    min-height: 44px;

    display: grid;

    grid-template-columns: auto 1fr auto;

    gap: 10px;

    align-items: center;

    padding: 8px 10px;

    border: 1px solid rgba(255, 255, 255, 0.055);

    border-radius: 10px;

    background: rgba(0, 0, 0, 0.12);

    font-size: 10px;
}

.leaderboard-rank {
    width: 24px;

    color: #aa9cff;

    font-weight: 900;
}

.online-empty {
    padding: 15px;

    color: var(--muted);

    text-align: center;

    font-size: 10px;
}


/* =========================================================
   ONLINE ROOM
========================================================= */

.online-room-modal {
    width: min(
        760px,
        100%
    );

    max-height: calc(100vh - 36px);

    display: flex;
    flex-direction: column;

    overflow: auto;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #13172a,
            #0b0e19
        );
}

.online-room-content {
    padding: 20px;
}

.online-room-board {
    min-height: 320px;

    display: grid;

    place-items: center;
}

.online-room-status {
    margin-bottom: 15px;

    padding: 12px;

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

    border-radius: 11px;

    color: var(--muted);

    background: rgba(255, 255, 255, 0.025);

    font-size: 10px;

    text-align: center;
}

.online-badge {
    display: inline-block;

    padding: 4px 7px;

    border-radius: 7px;

    background: rgba(82, 239, 152, 0.1);

    color: #6ff5ad;

    font-size: 8px;

    font-weight: 900;
}


/* =========================================================
   TOAST
========================================================= */

.toast-wrap {
    position: fixed;

    right: 18px;
    bottom: 18px;

    z-index: 3000;

    display: flex;

    flex-direction: column;

    gap: 8px;

    pointer-events: none;
}

.toast {
    min-width: 250px;

    max-width: 330px;

    padding: 13px 15px;

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

    border-radius: 12px;

    background: rgba(20, 24, 42, 0.97);

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.35);

    font-size: 10px;
}

.toast strong {
    display: block;

    margin-bottom: 3px;

    color: #b7a9ff;
}


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

@media (max-width: 1050px) {

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

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

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

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

}

@media (max-width: 800px) {

    .topbar {
        height: 66px;

        padding: 0 14px;
    }

    .profile-chip {
        min-width: auto;

        width: 42px;

        padding: 3px;
    }

    .profile-chip-text,
    .online-indicator {
        display: none;
    }

    main {
        width: calc(100% - 26px);
    }

    .hero {
        padding-top: 50px;
    }

    .featured-grid,
    .games-grid {
        grid-template-columns: 1fr;
    }

    .stats-boxes {
        grid-template-columns: repeat(2, 1fr);
    }

    .online-dashboard {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 540px) {

    .brand-name {
        display: none;
    }

    .hero {
        min-height: auto;

        gap: 28px;

        padding:
            42px 4px
            25px;
    }

    .hero h1 {
        font-size: 48px;

        letter-spacing: -2px;
    }

    .hero-copy > p {
        font-size: 14px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .player-card {
        padding: 20px;
    }

    .mini-stats {
        grid-template-columns: 1fr;
    }

    .achievement-grid,
    .stats-achievements,
    .global-grid {
        grid-template-columns: 1fr;
    }

    .game-info {
        grid-template-columns: 1fr;
    }

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

    .game-area {
        min-height: 420px;

        padding: 12px;
    }

    .mode-area {
        align-items: flex-start;
    }

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

    .mine-cell {
        border-radius: 4px;

        font-size: 10px;
    }

    .online-toolbar > * {
        width: 100%;
    }

    .modal {
        padding: 7px;
    }

    .game-modal,
    .stats-modal,
    .online-room-modal {
        max-height: calc(100vh - 14px);

        border-radius: 16px;
    }

    .connect-board,
    .online-connect-board {
        gap: 3px;

        padding: 5px;
    }

}
/* =========================================================
   ARSHAN ARCADE PROFESSIONAL VISUAL + LEVEL UPGRADE
   KEEP ALL EXISTING CSS ABOVE THIS
========================================================= */


/* =========================================================
   REAL IMAGE ORIENTATION / SIZE FIX
========================================================= */

img,
picture img,
.game-card img,
.featured-card img,
.game-area img {

    image-orientation:
        from-image;

    transform:
        none !important;

    rotate:
        0deg !important;

    max-width:
        100%;

    height:
        auto;

    object-fit:
        cover;

    object-position:
        center;

    backface-visibility:
        hidden;

}


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

.game-card {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    min-height:
        154px;

    border-color:

        color-mix(
            in srgb,
            var(--game-a, #7b5cff) 20%,
            rgba(255,255,255,.08)
        );

    background:

        radial-gradient(
            circle at 0 0,
            color-mix(
                in srgb,
                var(--game-a, #7b5cff) 16%,
                transparent
            ),
            transparent 42%
        ),

        linear-gradient(
            145deg,
            rgba(20,24,43,.96),
            rgba(9,12,23,.98)
        );

    box-shadow:

        0 14px 34px
        rgba(0,0,0,.18);

}


.game-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    opacity:
        .32;

    background:

        linear-gradient(
            115deg,
            transparent 0 57%,
            color-mix(
                in srgb,
                var(--game-b, #2ce5ff) 9%,
                transparent
            ) 57% 58%,
            transparent 58% 100%
        ),

        repeating-linear-gradient(
            0deg,
            transparent 0 17px,
            rgba(255,255,255,.015) 18px
        );

    pointer-events:
        none;

}


.game-card::after {

    content:
        "";

    position:
        absolute;

    width:
        130px;

    height:
        130px;

    right:
        -74px;

    top:
        -74px;

    border-radius:
        50%;

    background:
        var(--game-a, #7b5cff);

    filter:
        blur(55px);

    opacity:
        .16;

    pointer-events:
        none;

}


.game-card:hover {

    transform:
        translateY(-6px)
        scale(1.008);

    border-color:

        color-mix(
            in srgb,
            var(--game-a, #7b5cff) 52%,
            white 6%
        );

    box-shadow:

        0 18px 44px
        rgba(0,0,0,.28),

        0 0 0 1px
        color-mix(
            in srgb,
            var(--game-a, #7b5cff) 18%,
            transparent
        );

}


.game-card
.game-icon.pro-image-fixed {

    width:
        72px;

    height:
        72px;

    padding:
        0;

    overflow:
        visible;

    border-radius:
        18px;

    background:
        transparent !important;

}


.game-card
> span:nth-child(2) {

    position:
        relative;

    z-index:
        2;

}


.game-card
> strong {

    align-self:
        end;

    margin-bottom:
        4px;

    color:
        #f3f6ff;

    font-variant-numeric:
        tabular-nums;

}


/* =========================================================
   GAME LEVEL CHIP
========================================================= */

.pro-level-chip {

    position:
        absolute;

    right:
        14px;

    top:
        12px;

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        5px 8px;

    border:

        1px solid
        color-mix(
            in srgb,
            var(--game-a, #7b5cff) 35%,
            rgba(255,255,255,.08)
        );

    border-radius:
        9px;

    background:
        rgba(4,7,14,.62);

    backdrop-filter:
        blur(10px);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.04);

}


.pro-level-chip b {

    color:
        white;

    font-size:
        8px;

    letter-spacing:
        .7px;

}


.pro-level-chip span {

    color:
        var(--muted);

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .9px;

}


/* =========================================================
   GENERATED OFFLINE GAME ART
========================================================= */

.pro-game-art {

    --game-a:
        #7b5cff;

    --game-b:
        #2ce5ff;

    width:
        72px;

    height:
        72px;

    position:
        relative;

    display:
        grid;

    place-items:
        center;

    flex:
        none;

    overflow:
        hidden;

    border-radius:
        18px;

    border:

        1px solid
        color-mix(
            in srgb,
            var(--game-a) 42%,
            rgba(255,255,255,.12)
        );

    background:

        radial-gradient(
            circle at 28% 20%,
            color-mix(
                in srgb,
                var(--game-b) 34%,
                white 4%
            ),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--game-a) 31%,
                #11162a
            ),
            #090d19 72%
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.11),

        inset 0 -18px 35px
        rgba(0,0,0,.22),

        0 10px 26px
        color-mix(
            in srgb,
            var(--game-a) 20%,
            transparent
        );

}


.pro-game-art.large {

    width:
        128px;

    height:
        128px;

    border-radius:
        28px;

}


.pro-game-art::before {

    content:
        "";

    position:
        absolute;

    width:
        85%;

    height:
        85%;

    left:
        -48%;

    bottom:
        -48%;

    border:

        1px solid
        color-mix(
            in srgb,
            var(--game-b) 42%,
            transparent
        );

    border-radius:
        50%;

    box-shadow:

        0 0 0 9px
        rgba(255,255,255,.015),

        0 0 0 18px
        rgba(255,255,255,.01);

}


.pro-game-art::after {

    content:
        "";

    position:
        absolute;

    right:
        10px;

    top:
        10px;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--game-b);

    box-shadow:

        0 0 16px
        var(--game-b);

}


.pro-game-art strong {

    position:
        relative;

    z-index:
        3;

    max-width:
        90%;

    color:
        white;

    font-size:
        15px;

    font-weight:
        1000;

    letter-spacing:
        -.5px;

    text-align:
        center;

    text-shadow:

        0 2px 12px
        rgba(0,0,0,.42);

}


.pro-game-art.large strong {

    font-size:
        23px;

}


.pro-game-art i {

    position:
        absolute;

    left:
        12px;

    right:
        12px;

    bottom:
        10px;

    height:
        2px;

    border-radius:
        99px;

    background:

        linear-gradient(
            90deg,
            var(--game-a),
            var(--game-b)
        );

    box-shadow:

        0 0 12px
        color-mix(
            in srgb,
            var(--game-b) 60%,
            transparent
        );

}


.pro-art-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .2;

    background-image:

        linear-gradient(
            rgba(255,255,255,.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size:
        13px 13px;

    transform:

        perspective(90px)
        rotateX(24deg)
        scale(1.3);

}


/* =========================================================
   FEATURED CARDS
========================================================= */

.featured-card {

    isolation:
        isolate;

    border-color:

        color-mix(
            in srgb,
            var(--game-a, #7b5cff) 24%,
            rgba(255,255,255,.08)
        );

}


.featured-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:

        radial-gradient(
            circle at 90% 10%,
            color-mix(
                in srgb,
                var(--game-a, #7b5cff) 18%,
                transparent
            ),
            transparent 42%
        ),

        repeating-linear-gradient(
            135deg,
            transparent 0 30px,
            rgba(255,255,255,.012) 31px
        );

}


.featured-icon.pro-image-fixed {

    width:
        92px;

    height:
        92px;

    margin-bottom:
        18px;

}


.featured-icon.pro-image-fixed
.pro-game-art {

    width:
        92px;

    height:
        92px;

    border-radius:
        22px;

}


/* =========================================================
   PROFESSIONAL PRE-GAME SCREEN
========================================================= */

.pro-briefing {

    width:
        min(900px,100%);

    display:
        grid;

    grid-template-columns:
        190px minmax(0,1fr);

    gap:
        28px;

    align-items:
        center;

    padding:
        30px;

    border:

        1px solid
        color-mix(
            in srgb,
            var(--game-a) 28%,
            rgba(255,255,255,.08)
        );

    border-radius:
        24px;

    background:

        radial-gradient(
            circle at 0 0,
            color-mix(
                in srgb,
                var(--game-a) 13%,
                transparent
            ),
            transparent 38%
        ),

        radial-gradient(
            circle at 100% 100%,
            color-mix(
                in srgb,
                var(--game-b) 10%,
                transparent
            ),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            rgba(17,22,40,.98),
            rgba(7,10,20,.99)
        );

    box-shadow:

        0 30px 75px
        rgba(0,0,0,.36);

}


.pro-brief-art {

    display:
        grid;

    place-items:
        center;

}


.pro-brief-art
.pro-game-art.large {

    width:
        150px;

    height:
        150px;

}


.pro-kicker {

    color:

        color-mix(
            in srgb,
            var(--game-a) 65%,
            white 20%
        );

    font-size:
        9px;

    font-weight:
        1000;

    letter-spacing:
        1.8px;

}


.pro-brief-copy h2 {

    margin-top:
        8px;

    font-size:

        clamp(
            30px,
            5vw,
            48px
        );

    letter-spacing:
        -2px;

}


.pro-brief-copy > p {

    max-width:
        620px;

    margin-top:
        10px;

    color:
        #aeb7cf;

    line-height:
        1.65;

    font-size:
        13px;

}


/* =========================================================
   RULE CARDS
========================================================= */

.pro-rules-grid {

    display:
        grid;

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

    gap:
        9px;

    margin-top:
        22px;

}


.pro-rules-grid > div {

    min-height:
        76px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        12px;

    border:

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

    border-radius:
        13px;

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

}


.pro-rules-grid small {

    color:
        var(--muted);

    font-size:
        7px;

    font-weight:
        1000;

    letter-spacing:
        1.2px;

}


.pro-rules-grid strong {

    margin-top:
        5px;

    color:
        #f6f8ff;

    font-size:
        10px;

    line-height:
        1.35;

}


/* =========================================================
   MASTERY LEVEL
========================================================= */

.pro-mastery-row {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    margin-top:
        22px;

    color:
        #aab3ca;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .7px;

}


.pro-mastery-track {

    height:
        7px;

    margin-top:
        7px;

    overflow:
        hidden;

    border-radius:
        99px;

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

}


.pro-mastery-track i {

    display:
        block;

    height:
        100%;

    border-radius:
        inherit;

    background:

        linear-gradient(
            90deg,
            var(--game-a),
            var(--game-b)
        );

    box-shadow:

        0 0 20px
        color-mix(
            in srgb,
            var(--game-b) 38%,
            transparent
        );

}


/* =========================================================
   START BUTTON
========================================================= */

.pro-start-game {

    min-width:
        190px;

    height:
        48px;

    margin-top:
        22px;

    padding:
        0 24px;

    border-radius:
        13px;

    color:
        white;

    background:

        linear-gradient(
            135deg,
            var(--game-a),
            var(--game-b)
        );

    box-shadow:

        0 14px 34px
        color-mix(
            in srgb,
            var(--game-a) 22%,
            transparent
        );

    font-size:
        10px;

    font-weight:
        1000;

    letter-spacing:
        1px;

    cursor:
        pointer;

    transition:
        .2s ease;

}


.pro-start-game:hover {

    transform:
        translateY(-2px);

    filter:
        brightness(1.08);

}


/* =========================================================
   COUNTDOWN
========================================================= */

.pro-countdown {

    width:
        min(600px,100%);

    min-height:
        330px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        24px;

    border:

        1px solid
        color-mix(
            in srgb,
            var(--game-a) 35%,
            rgba(255,255,255,.08)
        );

    background:

        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--game-a) 14%,
                transparent
            ),
            transparent 50%
        ),

        #080c16;

}


.pro-countdown span {

    color:
        white;

    font-size:

        clamp(
            60px,
            12vw,
            120px
        );

    font-weight:
        1000;

    letter-spacing:
        -5px;

    text-shadow:

        0 0 40px
        color-mix(
            in srgb,
            var(--game-a) 60%,
            transparent
        );

    animation:

        proCount
        .38s
        ease
        both;

}


@keyframes proCount {

    from {

        opacity:
            0;

        transform:
            scale(.65);

        filter:
            blur(7px);

    }


    to {

        opacity:
            1;

        transform:
            scale(1);

        filter:
            blur(0);

    }

}


/* =========================================================
   RUNNING GAME PANEL
========================================================= */

.pro-game-panel {

    position:
        relative;

    padding:
        18px;

    border:

        1px solid
        color-mix(
            in srgb,
            var(--game-a) 20%,
            rgba(255,255,255,.06)
        );

    border-radius:
        22px;

    background:

        radial-gradient(
            circle at 0 0,
            color-mix(
                in srgb,
                var(--game-a) 7%,
                transparent
            ),
            transparent 38%
        ),

        rgba(5,8,16,.38);

}


.pro-running-title {

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        13px;

    padding:
        10px 12px;

    border:

        1px solid
        rgba(255,255,255,.055);

    border-radius:
        15px;

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

    text-align:
        left;

}


.pro-running-title
.pro-game-art {

    width:
        48px;

    height:
        48px;

    border-radius:
        13px;

}


.pro-running-title
.pro-game-art strong {

    font-size:
        10px;

}


.pro-running-title small {

    display:
        block;

    color:
        var(--muted);

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        1px;

}


.pro-running-title
> div
> strong {

    display:
        block;

    margin-top:
        3px;

    color:
        white;

    font-size:
        13px;

}


.pro-mode-pill {

    padding:
        6px 9px;

    border:

        1px solid
        color-mix(
            in srgb,
            var(--game-a) 28%,
            rgba(255,255,255,.07)
        );

    border-radius:
        9px;

    color:

        color-mix(
            in srgb,
            var(--game-a) 68%,
            white 25%
        );

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

    font-size:
        8px;

    font-weight:
        1000;

}


/* =========================================================
   COMMON GAME SURFACES
========================================================= */

.game-info > div {

    min-height:
        72px;

    border-color:
        rgba(255,255,255,.065);

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.018)
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.025);

}


.game-info strong {

    font-variant-numeric:
        tabular-nums;

}


.game-canvas,
.aim-arena,
.reaction-zone,
.click-rush-zone,
.bubble-arena,
.target-frenzy-arena {

    box-shadow:

        inset 0 0 60px
        rgba(0,0,0,.24),

        0 18px 38px
        rgba(0,0,0,.16);

}


.game-canvas {

    image-rendering:
        auto;

}


/* =========================================================
   GAME BUTTONS
========================================================= */

.game-control-btn,
.choice-btn,
.color-btn {

    border:

        1px solid
        rgba(255,255,255,.08)
        !important;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        )
        !important;

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.04),

        0 8px 18px
        rgba(0,0,0,.15);

    transition:
        .16s ease;

}


.game-control-btn:hover,
.choice-btn:hover,
.color-btn:hover {

    transform:
        translateY(-2px);

    border-color:

        color-mix(
            in srgb,
            var(--game-a,#7b5cff) 38%,
            rgba(255,255,255,.1)
        )
        !important;

}


/* =========================================================
   INPUTS
========================================================= */

.game-input,
.number-input,
.typing-input {

    outline:
        none;

    transition:
        .2s ease;

}


.game-input:focus,
.number-input:focus,
.typing-input:focus {

    border-color:

        color-mix(
            in srgb,
            var(--game-a,#7b5cff) 55%,
            white 5%
        );

    box-shadow:

        0 0 0 3px
        color-mix(
            in srgb,
            var(--game-a,#7b5cff) 12%,
            transparent
        );

}


/* =========================================================
   RESULTS
========================================================= */

.result-box {

    border-color:

        color-mix(
            in srgb,
            var(--game-a,#7b5cff) 28%,
            rgba(255,255,255,.08)
        );

    background:

        radial-gradient(
            circle at 50% 0,
            color-mix(
                in srgb,
                var(--game-a,#7b5cff) 12%,
                transparent
            ),
            transparent 50%
        ),

        rgba(11,14,27,.88);

    box-shadow:

        0 22px 55px
        rgba(0,0,0,.25);

}


.pro-result-level {

    margin-bottom:
        8px;

    color:

        color-mix(
            in srgb,
            var(--game-a,#7b5cff) 68%,
            white 22%
        );

    font-size:
        8px;

    font-weight:
        1000;

    letter-spacing:
        1.1px;

}


.pro-result-actions {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        16px;

}


.pro-result-actions button {

    min-height:
        40px;

    padding:
        0 14px;

    border:

        1px solid
        rgba(255,255,255,.09);

    border-radius:
        10px;

    color:
        white;

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

    font-size:
        8px;

    font-weight:
        1000;

    cursor:
        pointer;

}


.pro-result-actions
button:first-child {

    background:

        linear-gradient(
            135deg,
            var(--game-a,#7b5cff),
            var(--game-b,#2ce5ff)
        );

}


/* =========================================================
   BOARD / TILE POLISH
========================================================= */

.memory-card,
.reflex-cell,
.whack-cell,
.sequence-cell,
.reaction-grid-cell,
.light-cell,
.tic-cell,
.connect-cell,
.mine-cell,
.tile2048,
.simon-cell {

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.035),

        0 8px 16px
        rgba(0,0,0,.12);

}


.memory-card:hover,
.reflex-cell:hover,
.whack-cell:hover,
.sequence-cell:hover,
.reaction-grid-cell:hover,
.light-cell:hover,
.tic-cell:hover,
.connect-cell:hover,
.mine-cell:hover {

    border-color:
        rgba(255,255,255,.17);

}


/* =========================================================
   PAUSE SCREEN
========================================================= */

.pause-overlay {

    backdrop-filter:
        blur(12px);

    background:
        rgba(4,7,14,.82)
        !important;

}


.pause-overlay h2 {

    letter-spacing:
        -1px;

    text-shadow:

        0 0 35px
        rgba(123,92,255,.35);

}


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

@media (
    max-width: 900px
) {

    .pro-briefing {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }


    .pro-rules-grid {

        grid-template-columns:
            1fr;

    }


    .pro-running-title {

        grid-template-columns:
            auto 1fr;

    }


    .pro-mode-pill {

        grid-column:
            1 / -1;

        justify-self:
            stretch;

        text-align:
            center;

    }

}


@media (
    max-width: 620px
) {

    .game-card {

        min-height:
            132px;

        grid-template-columns:
            58px 1fr;

        padding:
            13px;

    }


    .game-card
    .game-icon.pro-image-fixed,
    .game-card
    .pro-game-art {

        width:
            56px;

        height:
            56px;

        border-radius:
            14px;

    }


    .game-card > strong {

        grid-column:
            2;

        text-align:
            left;

        margin-top:
            -7px;

    }


    .pro-level-chip {

        right:
            9px;

        top:
            8px;

    }


    .pro-level-chip span {

        display:
            none;

    }


    .pro-briefing {

        padding:
            20px 14px;

    }


    .pro-brief-art
    .pro-game-art.large {

        width:
            110px;

        height:
            110px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .game-card,
    .pro-start-game,
    .game-control-btn,
    .choice-btn,
    .color-btn,
    .pro-countdown span {

        animation:
            none !important;

        transition:
            none !important;

    }

}
/* ============================================================
   PROFESSIONAL ORIGINAL-STYLE GAME VISUALS
   APPEND TO EXISTING style.css
============================================================ */

.game-card[data-game],
.featured-card[data-game] {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    border-color:
        color-mix(
            in srgb,
            var(--game-a, #7b5cff) 24%,
            rgba(255,255,255,.08)
        );
}


.game-card[data-game]::before,
.featured-card[data-game]::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:

        radial-gradient(
            circle at 90% 10%,
            color-mix(
                in srgb,
                var(--game-a, #7b5cff) 16%,
                transparent
            ),
            transparent 45%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.018),
            transparent 40%
        );

    pointer-events: none;
}


.game-card[data-game]::after {

    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    right: -75px;
    bottom: -75px;

    background:
        var(--game-b, #2ce5ff);

    filter:
        blur(48px);

    opacity: .1;

    pointer-events: none;
}


.game-card[data-game]:hover {

    border-color:

        color-mix(
            in srgb,
            var(--game-a, #7b5cff) 56%,
            white 5%
        );

    box-shadow:

        0 18px 44px rgba(0,0,0,.28),

        0 0 28px

        color-mix(
            in srgb,
            var(--game-a, #7b5cff) 10%,
            transparent
        );
}


/* ============================================================
   REAL OFFLINE SVG GAME ICONS
============================================================ */

.game-icon.pro-real-icon,
.featured-icon.pro-real-icon {

    display: grid;

    place-items: center;

    overflow: hidden;

    padding: 0;

    background:
        rgba(5,8,16,.62) !important;

    border:

        1px solid

        color-mix(
            in srgb,
            var(--game-a, #7b5cff) 35%,
            rgba(255,255,255,.09)
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.06),

        0 10px 24px
        rgba(0,0,0,.2);
}


.game-icon.pro-real-icon {

    width: 66px;
    height: 66px;

    border-radius: 17px;
}


.featured-icon.pro-real-icon {

    width: 84px;
    height: 84px;

    border-radius: 20px;

    margin-bottom: 16px;
}


.arcade-svg-icon {

    display: block;

    width: 86%;
    height: 86%;

    overflow: visible;

    filter:

        drop-shadow(
            0 5px 8px
            rgba(0,0,0,.2)
        );
}


/* ============================================================
   GAME LEVEL BADGE
============================================================ */

.pro-game-level {

    position: absolute;

    right: 11px;
    top: 10px;

    display: flex;

    gap: 5px;

    align-items: center;

    padding: 5px 7px;

    border:

        1px solid

        color-mix(
            in srgb,
            var(--game-a, #7b5cff) 30%,
            rgba(255,255,255,.08)
        );

    border-radius: 8px;

    background:
        rgba(4,7,14,.7);

    backdrop-filter:
        blur(10px);

    pointer-events: none;
}


.pro-game-level b {

    font-size: 8px;

    color: #fff;

    letter-spacing: .4px;
}


.pro-game-level small {

    font-size: 6px;

    color: var(--muted);

    letter-spacing: .7px;

    font-weight: 900;
}


/* ============================================================
   MODAL GAME LEVEL
============================================================ */

.pro-modal-level {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 5px;

    padding: 5px 9px;

    border:

        1px solid

        color-mix(
            in srgb,
            var(--game-a, #7b5cff) 30%,
            rgba(255,255,255,.08)
        );

    border-radius: 10px;

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

    vertical-align: middle;
}


.pro-modal-level
.arcade-svg-icon {

    width: 27px;
    height: 27px;
}


.pro-modal-level span {

    display: flex;

    flex-direction: column;

    gap: 1px;
}


.pro-modal-level b {

    font-size: 8px;

    letter-spacing: .7px;
}


.pro-modal-level small {

    font-size: 6px;

    color: var(--muted);

    letter-spacing: .45px;
}


/* ============================================================
   CANVAS POLISH
============================================================ */

.pro-pixel-canvas {

    image-rendering: pixelated;
    image-rendering: crisp-edges;
}


.game-canvas {

    box-shadow:

        inset 0 0 70px
        rgba(0,0,0,.2),

        0 18px 45px
        rgba(0,0,0,.2);
}


.pro-difficulty-note {

    margin:
        -4px auto 12px;

    padding:
        7px 11px;

    width: max-content;

    max-width: 100%;

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

    border-radius: 9px;

    color: #b9c3da;

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

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .8px;
}


/* ============================================================
   WHACK-A-MOLE
============================================================ */

.pro-whack-grid {

    perspective: 700px;
}


.pro-whack-cell {

    position: relative;

    overflow: hidden;

    background:

        linear-gradient(
            #66b75a 0 56%,
            #4f913f 56% 100%
        ) !important;

    border-color:

        rgba(
            255,
            255,
            255,
            .06
        ) !important;
}


.pro-hole {

    position: absolute;

    left: 14%;
    right: 14%;

    bottom: 10%;

    height: 25%;

    border-radius: 50%;

    background:
        #2a1712;

    box-shadow:

        inset 0 7px 10px
        #130b08,

        0 3px 0
        rgba(255,255,255,.07);
}


.pro-mole {

    position: absolute;

    left: 24%;
    right: 24%;

    bottom: -55%;

    height: 70%;

    border-radius:
        45% 45% 30% 30%;

    background:
        #9b633f;

    transition:
        bottom .12s ease;

    box-shadow:

        inset 7px 0
        rgba(255,255,255,.06),

        inset -7px 0
        rgba(0,0,0,.08);
}


.pro-whack-cell.active
.pro-mole {

    bottom: 10%;
}


.pro-mole::before,
.pro-mole::after {

    content: "";

    position: absolute;

    top: 27%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #111;
}


.pro-mole::before {
    left: 27%;
}


.pro-mole::after {
    right: 27%;
}


.pro-mole i {

    position: absolute;

    width: 12px;
    height: 8px;

    border-radius: 50%;

    left: 50%;
    top: 46%;

    transform:
        translateX(-50%);

    background:
        #533126;
}


.pro-mole b {

    position: absolute;

    left: 14%;
    right: 14%;

    bottom: 12%;

    height: 2px;

    background:
        #6f432f;

    box-shadow:

        0 4px
        #6f432f;

    opacity: .55;
}


.pro-whack-cell.bonk
.pro-mole {

    transform:
        scale(.9);

    filter:
        brightness(1.25);
}


/* ============================================================
   SIMON SAYS
============================================================ */

.pro-simon-wrap {

    display: grid;

    place-items: center;

    padding: 12px;
}


.pro-simon-grid {

    position:
        relative !important;

    width:

        min(
            420px,
            82vw
        ) !important;

    aspect-ratio:
        1 !important;

    display:
        grid !important;

    grid-template-columns:
        1fr 1fr !important;

    gap:
        10px !important;

    padding:
        18px !important;

    border-radius:
        50% !important;

    background:
        #111720 !important;

    box-shadow:

        0 25px 55px
        rgba(0,0,0,.32),

        inset 0 0 0 8px
        #252b38 !important;
}


.pro-simon-grid
.simon-cell {

    aspect-ratio: 1;

    border:
        0 !important;

    border-radius:
        0 !important;

    opacity:
        .72;

    transition:

        filter .08s,
        opacity .08s,
        transform .08s;

    box-shadow:

        inset 0 0 30px
        rgba(0,0,0,.25) !important;
}


.pro-simon-grid
.simon-0 {

    background:
        #2cbd58 !important;

    border-radius:
        100% 8px 8px 8px !important;
}


.pro-simon-grid
.simon-1 {

    background:
        #e24b4b !important;

    border-radius:
        8px 100% 8px 8px !important;
}


.pro-simon-grid
.simon-2 {

    background:
        #e8c83e !important;

    border-radius:
        8px 8px 8px 100% !important;
}


.pro-simon-grid
.simon-3 {

    background:
        #447ce2 !important;

    border-radius:
        8px 8px 100% 8px !important;
}


.pro-simon-grid
.simon-cell.active {

    opacity: 1;

    filter:

        brightness(1.7)
        saturate(1.2);

    transform:
        scale(.98);

    box-shadow:

        inset 0 0 12px white,

        0 0 34px
        currentColor !important;
}


.pro-simon-center {

    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 31%;

    aspect-ratio: 1;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        #151a24;

    border:
        7px solid
        #272e3c;

    color: white;

    font-size: 11px;

    font-weight: 1000;

    letter-spacing: 1px;

    pointer-events: none;

    box-shadow:

        0 8px 20px
        rgba(0,0,0,.35);
}


/* ============================================================
   MINESWEEPER
============================================================ */

.pro-mine-grid {

    width:

        min(
            620px,
            100%
        ) !important;

    gap:
        3px !important;
}


.pro-mine-grid
.mine-cell {

    min-width: 0;

    aspect-ratio: 1;

    font-size:
        12px !important;

    border-radius:
        5px !important;

    background:

        linear-gradient(
            145deg,
            #273149,
            #182033
        ) !important;

    border:

        1px solid
        #35405b !important;

    box-shadow:

        inset 1px 1px
        rgba(255,255,255,.08),

        inset -2px -2px
        rgba(0,0,0,.2) !important;
}


.pro-mine-grid
.mine-cell.open {

    background:
        #111827 !important;

    box-shadow:

        inset 0 0 0 1px
        rgba(255,255,255,.025) !important;
}


.pro-mine-grid
.mine-cell.mine {

    background:
        #4d2028 !important;
}


.pro-flag {

    color:
        #ff586f;

    font-size:
        16px;
}


.pro-mine-symbol {

    display:
        inline-grid;

    place-items:
        center;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    color:
        #f4f5f8;

    background:
        #687187;

    font-size:
        16px;

    line-height: 1;
}


.mine-n {

    font-size:
        13px;
}


.mine-n-1 {
    color: #5796ff;
}

.mine-n-2 {
    color: #52ef98;
}

.mine-n-3 {
    color: #ff586f;
}

.mine-n-4 {
    color: #aa92ff;
}

.mine-n-5 {
    color: #ff9955;
}

.mine-n-6 {
    color: #2ce5ff;
}

.mine-n-7 {
    color: #f5f6f8;
}

.mine-n-8 {
    color: #919ab6;
}


/* ============================================================
   OTHER GAME POLISH
============================================================ */

.aim-target {

    box-shadow:

        0 0 0 4px
        rgba(255,255,255,.08),

        0 0 28px
        rgba(255,88,111,.5) !important;
}


.frenzy-target {

    background:

        radial-gradient(
            circle,
            #fff 0 13%,
            #ff586f 14% 34%,
            #fff 35% 52%,
            #ff586f 53% 100%
        ) !important;

    box-shadow:

        0 0 20px
        rgba(255,88,111,.38) !important;
}


.rush-target {

    background:

        radial-gradient(
            circle,
            #fff 0 14%,
            #ff9955 15% 36%,
            #fff 37% 53%,
            #ff586f 54% 100%
        ) !important;
}


.reaction-grid-cell.active,
.reflex-cell.active {

    box-shadow:

        0 0 28px
        rgba(82,239,152,.48),

        inset 0 0 18px
        rgba(255,255,255,.2) !important;
}


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

@media (max-width: 700px) {

    .game-icon.pro-real-icon {

        width: 56px;
        height: 56px;
    }


    .pro-game-level small {

        display: none;
    }


    .pro-modal-level small {

        display: none;
    }


    .pro-simon-grid {

        width:

            min(
                340px,
                82vw
            ) !important;

        padding:
            14px !important;

        gap:
            7px !important;
    }


    .pro-simon-center {

        border-width:
            5px;

        font-size:
            9px;
    }

}
/* ============================================================
   ARSHAN ARCADE GRAPHICS / JUICE PACK
============================================================ */

:root {
    --fx-a: #7b5cff;
    --fx-b: #2ce5ff;
}


/* ============================================================
   GLOBAL AMBIENT CANVAS
============================================================ */

#arcadeAmbientCanvas {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: -1;

    pointer-events: none;

    opacity: .52;
}


/* ============================================================
   GAME MODAL GRAPHICS
============================================================ */

.game-modal {

    position: relative;

    isolation: isolate;

    overflow: hidden;
}


.game-modal::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 15% 5%,
            color-mix(
                in srgb,
                var(--fx-a) 15%,
                transparent
            ),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 95%,
            color-mix(
                in srgb,
                var(--fx-b) 12%,
                transparent
            ),
            transparent 33%
        );

    animation:
        arcadeAmbientPulse
        5s
        ease-in-out
        infinite alternate;
}


@keyframes arcadeAmbientPulse {

    from {
        opacity: .55;
        transform: scale(1);
    }

    to {
        opacity: .9;
        transform: scale(1.04);
    }

}


/* ============================================================
   SCANLINE / CRT TEXTURE
============================================================ */

.game-area {

    position: relative;

    isolation: isolate;
}


.game-area::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 40;

    pointer-events: none;

    opacity: .09;

    background:

        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            rgba(255,255,255,.08) 4px
        );

    mix-blend-mode: overlay;
}


/* ============================================================
   HUD CORNERS
============================================================ */

.arcade-hud-corner {

    position: absolute;

    width: 38px;
    height: 38px;

    z-index: 45;

    pointer-events: none;

    opacity: .55;
}


.arcade-hud-corner::before,
.arcade-hud-corner::after {

    content: "";

    position: absolute;

    background:
        var(--fx-a);

    box-shadow:

        0 0 12px
        color-mix(
            in srgb,
            var(--fx-a) 55%,
            transparent
        );
}


.arcade-hud-corner::before {

    width: 26px;
    height: 2px;
}


.arcade-hud-corner::after {

    width: 2px;
    height: 26px;
}


.arcade-hud-tl {

    left: 14px;
    top: 14px;
}


.arcade-hud-tl::before,
.arcade-hud-tl::after {

    left: 0;
    top: 0;
}


.arcade-hud-br {

    right: 14px;
    bottom: 14px;

    transform: rotate(180deg);
}


.arcade-hud-br::before,
.arcade-hud-br::after {

    left: 0;
    top: 0;
}


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

.arcade-card-shine {

    position: absolute;

    width: 120px;
    height: 220%;

    left: -180px;
    top: -60%;

    z-index: 8;

    pointer-events: none;

    opacity: 0;

    transform:
        rotate(22deg);

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.13),
            transparent
        );
}


.game-card:hover
.arcade-card-shine,

.featured-card:hover
.arcade-card-shine {

    opacity: 1;

    animation:
        arcadeCardSweep
        .7s
        ease-out;
}


@keyframes arcadeCardSweep {

    from {
        left: -180px;
    }

    to {
        left: 120%;
    }

}


/* ============================================================
   TARGET HIT FX
============================================================ */

.arcade-hit-ring {

    position: fixed;

    width: 18px;
    height: 18px;

    z-index: 4000;

    border:

        2px solid
        var(--ring-color, #2ce5ff);

    border-radius: 50%;

    pointer-events: none;

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

    box-shadow:

        0 0 18px
        var(--ring-color, #2ce5ff);
}


.arcade-fx-particle {

    position: fixed;

    width: 6px;
    height: 6px;

    z-index: 4000;

    border-radius: 50%;

    pointer-events: none;

    background:
        var(--particle-color, #2ce5ff);

    box-shadow:

        0 0 10px
        var(--particle-color, #2ce5ff);
}


/* ============================================================
   AIM TRAIL
============================================================ */

.arcade-pointer-trail {

    position: fixed;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    z-index: 3999;

    pointer-events: none;

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

    background:
        var(--trail-color, #2ce5ff);

    box-shadow:

        0 0 10px
        var(--trail-color, #2ce5ff);
}


/* ============================================================
   RESULT FLASH
============================================================ */

.arcade-result-flash {

    position: fixed;

    inset: 0;

    z-index: 3500;

    pointer-events: none;

    background:

        radial-gradient(
            circle at center,
            rgba(255,255,255,.15),
            transparent 45%
        );
}


/* ============================================================
   CONFETTI
============================================================ */

.arcade-confetti {

    position: fixed;

    top: -15px;

    width: 8px;
    height: 14px;

    z-index: 4001;

    pointer-events: none;

    border-radius: 2px;

    background:
        var(--confetti-color);
}


/* ============================================================
   GAME SPECIFIC BACKGROUNDS
============================================================ */


/* DINO */

.game-modal[data-arcade-game="dino"]
.game-area {

    background:

        linear-gradient(
            180deg,
            #f5f5f5 0 74%,
            #dedede 74% 75%,
            #f5f5f5 75%
        );
}


.game-modal[data-arcade-game="dino"]
.game-area::after {

    opacity: .025;
}


/* FLAPPY */

.game-modal[data-arcade-game="flappy"]
.game-area {

    background:

        linear-gradient(
            180deg,
            #5bc0df,
            #d0f0df
        );
}


/* SPACE DODGER */

.game-modal[data-arcade-game="dodger"]
.game-area {

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(123,92,255,.15),
            transparent 25%
        ),

        radial-gradient(
            circle at 80% 60%,
            rgba(44,229,255,.1),
            transparent 30%
        ),

        #030617;
}


/* RACER */

.game-modal[data-arcade-game="racer"]
.game-area {

    background:

        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.015) 0 2px,
            transparent 2px 90px
        ),

        #11171c;
}


/* SNAKE */

.game-modal[data-arcade-game="snake"]
.game-area {

    background:

        linear-gradient(
            rgba(82,239,152,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(82,239,152,.025) 1px,
            transparent 1px
        ),

        #06110b;

    background-size:
        22px 22px;
}


/* PONG */

.game-modal[data-arcade-game="pong"]
.game-area {

    background:
        #030303;
}


/* BREAKOUT */

.game-modal[data-arcade-game="breakout"]
.game-area {

    background:

        radial-gradient(
            circle at 50% 0,
            rgba(123,92,255,.14),
            transparent 40%
        ),

        #060b14;
}


/* SIMON */

.game-modal[data-arcade-game="simon"]
.game-area {

    background:

        radial-gradient(
            circle,
            rgba(255,255,255,.045),
            transparent 60%
        ),

        #070a10;
}


/* MINESWEEPER */

.game-modal[data-arcade-game="minesweeper"]
.game-area {

    background:

        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.012) 0 10px,
            transparent 10px 20px
        ),

        #080c14;
}


/* AIM GAMES */

.game-modal[data-arcade-game="aim"]
.game-area,

.game-modal[data-arcade-game="targetfrenzy"]
.game-area {

    background:

        radial-gradient(
            circle at center,
            rgba(44,229,255,.07),
            transparent 50%
        ),

        #060a12;
}


/* ============================================================
   ACTIVE SCORE POP
============================================================ */

.arcade-score-pop {

    animation:
        arcadeScorePop
        .24s
        ease;
}


@keyframes arcadeScorePop {

    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.35);
        color: var(--fx-b);
    }

    100% {
        transform: scale(1);
    }

}


/* ============================================================
   MODAL OPEN ANIMATION
============================================================ */

.game-modal {

    animation:
        arcadeModalEnter
        .26s
        cubic-bezier(.2,.9,.2,1);
}


@keyframes arcadeModalEnter {

    from {

        opacity: 0;

        transform:

            translateY(15px)
            scale(.985);

    }

    to {

        opacity: 1;

        transform:

            translateY(0)
            scale(1);

    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media
(prefers-reduced-motion: reduce) {

    #arcadeAmbientCanvas {

        display: none;
    }


    .game-modal::before,
    .game-modal,
    .arcade-card-shine {

        animation: none !important;
    }

}
/* ============================================================
   LOGICAL GAME MODES + MOBILE CONTROLS + DIFFICULTY UI
============================================================ */

.logical-mode-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid rgba(123,92,255,.28);
    border-radius: 11px;
    background: rgba(123,92,255,.08);
}

.logical-mode-chip b {
    color: #fff;
    font-size: 9px;
    letter-spacing: .8px;
}

.logical-mode-chip small {
    color: var(--muted);
    font-size: 8px;
}


.logical-difficulty-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    width: max-content;
    max-width: 100%;

    margin: 0 auto 12px;
    padding: 6px 10px;

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

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

    pointer-events: none;
}

.logical-difficulty-badge b {
    color: #fff;
    font-size: 8px;
    letter-spacing: .7px;
}

.logical-difficulty-badge span {
    color: #9d8cff;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}


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

.mobile-game-controls {
    display: none;

    position: sticky;
    bottom: 8px;

    z-index: 120;

    margin: 14px auto 0;

    width: max-content;
    max-width: 100%;

    gap: 9px;

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

    padding: 9px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;

    background: rgba(6,9,17,.82);

    backdrop-filter: blur(14px);

    box-shadow:
        0 14px 38px
        rgba(0,0,0,.32);

    touch-action: none;

    user-select: none;
    -webkit-user-select: none;
}


.mobile-control-btn {
    width: 58px;
    height: 52px;

    display: grid;
    place-items: center;

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

    color: #fff;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.035)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.08),
        0 5px 14px rgba(0,0,0,.2);

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

    touch-action: none;
}


.mobile-control-btn:active {
    transform:
        translateY(2px)
        scale(.97);

    background:
        rgba(123,92,255,.28);

    border-color:
        rgba(123,92,255,.55);
}


.mobile-dpad {
    display: none;

    grid-template-columns:
        repeat(3,58px);

    grid-template-rows:
        repeat(3,52px);
}


.mobile-control-spacer {
    width: 58px;
    height: 52px;
}


.mobile-action
.mobile-control-btn {
    width:
        min(
            240px,
            72vw
        );
}


/* ============================================================
   TOUCH SURFACES
============================================================ */

.game-area canvas,
.aim-arena,
.click-rush-zone,
.target-frenzy-arena,
.bubble-arena,
.reaction-zone,
.reflex-grid,
.reaction-grid,
.memory-grid,
.mine-grid,
.tic-grid,
.connect-board,
.sequence-grid,
.simon-grid,
.lights-grid,
.board2048 {
    touch-action: manipulation;
}


.game-area canvas {
    touch-action: none;
}


/* ============================================================
   MINESWEEPER MOBILE FLAG MODE
============================================================ */

.mobile-mine-tools {
    display: none;

    justify-content: center;

    margin:
        12px auto 4px;
}


.mobile-flag-btn {
    min-height: 44px;

    padding:
        0 16px;

    border:
        1px solid
        rgba(255,88,111,.24);

    border-radius: 12px;

    color:
        #ff9baa;

    background:
        rgba(255,88,111,.07);

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

    letter-spacing: .7px;

    touch-action: manipulation;
}


.mobile-flag-btn.active {
    color: white;

    background:
        rgba(255,88,111,.28);

    border-color:
        rgba(255,88,111,.62);

    box-shadow:
        0 0 18px
        rgba(255,88,111,.18);
}


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

@media
(max-width: 900px),
(pointer: coarse) {

    .mobile-game-controls {
        display: flex;
    }


    .mobile-game-controls.mobile-dpad {
        display: grid;
    }


    .mobile-mine-tools {
        display: flex;
    }


    .game-modal {
        width: 100%;

        max-height: 100dvh;

        border-radius: 18px;
    }


    .game-area {
        min-height: 0;

        padding: 12px;

        align-items: flex-start;
    }


    .game-panel {
        width: 100%;
    }


    .game-canvas {
        max-width: 100%;

        height: auto;
    }


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

        gap: 6px;
    }


    .game-info > div {
        min-height: 58px;

        padding: 6px;
    }


    .game-info strong {
        font-size: 15px;
    }


    .mode-area {
        min-height: 52px;

        padding: 8px;
    }


    .logical-mode-chip {
        width: 100%;

        justify-content: center;

        text-align: center;
    }


    .logical-mode-chip small {
        display: none;
    }


    .memory-card,
    .reflex-cell,
    .whack-cell,
    .sequence-cell,
    .reaction-grid-cell,
    .light-cell,
    .tic-cell,
    .connect-cell,
    .mine-cell,
    .color-btn,
    .choice-btn {

        min-width: 44px;
        min-height: 44px;

    }


    .typing-input,
    .game-input,
    .number-input {

        font-size: 16px;

    }

}


@media
(max-width: 520px) {

    .mobile-control-btn {
        width: 54px;
        height: 50px;
    }


    .mobile-dpad {
        grid-template-columns:
            repeat(3,54px);

        grid-template-rows:
            repeat(3,50px);
    }


    .mobile-control-spacer {
        width: 54px;
        height: 50px;
    }


    .game-info {
        grid-template-columns:
            1fr 1fr 1fr;
    }


    .game-info small {
        font-size: 7px;
    }


    .game-info strong {
        font-size: 13px;
    }

}


@media
(hover:hover)
and
(pointer:fine)
and
(min-width:901px) {

    .mobile-game-controls {
        display: none !important;
    }

}