@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap');


:root{

--accent:#0088cc;
--accent-rgb:0,136,204;

--accent-dark:color-mix(in srgb, var(--accent) 80%, black);
--accent-light:color-mix(in srgb, var(--accent) 15%, white);

--main-accent-color:var(--accent);
--main-accent-rgb:var(--accent-rgb);

--blue:var(--accent);
--blue-d:var(--accent-dark);
--blue-t:var(--accent);
--orange:var(--accent);
--cyan:var(--accent);
--red:var(--accent);
--red-t:var(--accent);
--green:var(--accent);

--bg:#eef6fb;
--bg-card:#ffffff;
--bg-sec:#f8fafc;
--bg-ter:#f1f5f9;

--txt:#1a2b3c;
--txt-sec:#5c6b7a;
--txt-ter:#94a3b8;

--border:#e2e8f0;
--border-d:#cbd5e1;

--shadow: 0 8px 30px rgba(0,0,0,0.04);
--shadow-sm: 0 2px 10px rgba(0,0,0,0.03);
--shadow-md: 0 12px 32px rgba(0,0,0,0.06);
--shadow-lg: 0 24px 48px rgba(0,0,0,0.08);

--radius-lg:24px;
--radius-md:16px;

--inp-bg:rgba(0,0,0,0.03);
--header-bg:rgba(238,246,251,0.8);
}


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

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--txt);
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-top: 70px;
    transition: padding-top 0.3s ease;
}

body.in-game {
    padding-top: 52px;
}

button {
    cursor: pointer;
    border: none;
    font-family: inherit;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s ease;
}

img, video, svg, canvas {
    max-width: 100%;
}


/* Global styles continue... */

/* --- SEO & ACCESSIBILITY --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}