/* ==========================================================================================================
   base.css - the storefront's base layer (hand-written, Oct 2026). The first stylesheet of every storefront page.
   No storefront page loads the old theme (Bootstrap CSS, the Alchemists theme, custom.css / custom.rtl.css, cls.css,
   list_product_themes, Swiper CSS, Font Awesome CSS); this file is what every element starts from: a small reset,
   fonts, headings, links, lists, images, form controls, tables and the page background. Every rule is wrapped in
   :where() (specificity 0), so any component rule wins over it without !important.
   Tokens: the old theme's custom properties the site still reads (--brand-color, --bg-color, --boxes_color …) live
   here; the Arena tokens (--g2-*) live in site.css.
   ========================================================================================================== */

:where(:root) {
    --dark-blue-color: #0b0d10;
    --brand-color: #95ab52;
    --brand-color-light: #bcd767;
    --brand-color-dark: #819546;
    --brand-color-darker: #49553f;
    --border-radius-defualt: 10px;
    --border-radius-small: 4px;
    --normal-font-weight: 400;
    --bold-font-weight: 500;
    --bg-color: #0b0d10;
    --boxes_color: #14171c;
    --border-color: #23272e;
    --input-bg-color: #1a1d22;
    --selected-bg-color: #1a1d22;
    --dark-color: #00000024;
    --light-darkblue: #14171c;
    --light-theme-color: #1a1d22;
    --light-color: #ffffff24;
    --lighter-dark-color: #0000001a;
    --base-font: "Poppins", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
    --base-font-ar: "Tajawal", system-ui, sans-serif;
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* While the page loads (the class is set by site-head.js and removed after "load"). */
html.g2-boot :not(.hs, .hs *), html.g2-boot :not(.hs, .hs *)::before, html.g2-boot :not(.hs, .hs *)::after { transition: none !important; }

/* ---------- reset ---------- */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(html) { background-color: var(--bg-color); }
:where(body) {
    margin: 0;
    min-height: 100%;
    background-color: transparent;
    color: #e6e8eb;
    font-family: var(--base-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
}
:where(html[dir="rtl"] body, html[dir="rtl"] :is(button, input, select, textarea)) { font-family: var(--base-font-ar); }
/* The page ground: a fixed glow layer behind the transparent body (lime top-left, gold top-right over a dark fall-off).
   A page that paints body hides it; Games2All recolours it (store-all.css). */
:where(body)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -100;
    pointer-events: none;
    background:
        radial-gradient(60vw 50vw at 12% 0, rgba(149, 171, 82, .16), rgba(149, 171, 82, 0) 70%),
        radial-gradient(45vw 40vw at 92% 4%, rgba(244, 182, 61, .09), rgba(244, 182, 61, 0) 70%),
        linear-gradient(180deg, #0f1217 0%, #0b0d10 55%);
}
@media (max-width: 575.98px) {
    :where(body)::before {
        background:
            radial-gradient(90vw 70vw at 0 0, rgba(149, 171, 82, .14), rgba(149, 171, 82, 0) 70%),
            radial-gradient(70vw 60vw at 100% 0, rgba(244, 182, 61, .08), rgba(244, 182, 61, 0) 70%),
            linear-gradient(180deg, #0f1217 0%, #0b0d10 55%);
    }
}
/* The hidden attribute always hides (a component's display rule must not show a hidden element). */
[hidden] { display: none !important; }

/* ---------- text ---------- */
:where(h1, h2, h3, h4, h5, h6) { margin: 0 0 .75em; color: #f3f3f3; font-weight: 600; line-height: 1.5; }
:where(h1) { font-size: 1.7rem; }
:where(h2) { font-size: 1.4rem; }
:where(h3) { font-size: 1.2rem; }
:where(h4) { font-size: 1rem; }
:where(h5) { font-size: 14px; font-weight: 500; }
:where(h6) { font-size: 12px; font-weight: 400; }
:where(p) { margin: 0 0 1em; color: #d5d5d5; font-size: 13px; line-height: 18px; }
:where(small) { font-size: .875em; }
:where(b, strong) { font-weight: 700; }
:where(hr) { margin: 1rem 0; border: 0; border-top: 1px solid var(--border-color); }
:where(a) { color: var(--brand-color); text-decoration: none; transition: color .2s ease; }
:where(a:hover) { color: var(--brand-color-light); }
:where(:focus-visible) { outline: 2px solid var(--brand-color); outline-offset: 2px; }
::selection { background: rgba(149, 171, 82, .35); color: #fff; }

/* ---------- lists, media, tables ---------- */
:where(ul, ol) { margin: 0 0 1rem; padding-inline-start: 2rem; }
:where(ul ul, ul ol, ol ol, ol ul) { margin-bottom: 0; }
:where(img, svg, video, canvas) { vertical-align: middle; }
:where(img) { max-width: 100%; height: auto; }
:where(figure) { margin: 0 0 1rem; }
:where(table) { border-collapse: collapse; caption-side: bottom; }
:where(th) { text-align: inherit; }
:where(iframe) { border: 0; }

/* ---------- form controls ---------- */
:where(button, input, select, textarea, optgroup) { margin: 0; font: inherit; color: inherit; }
:where(button, [type="button"], [type="submit"], [type="reset"]) { cursor: pointer; }
:where(button:disabled, [type="button"]:disabled, [type="submit"]:disabled) { cursor: default; }
:where(button) { border-radius: 0; }
:where(label) { display: inline-block; color: #e1e1e1; }
:where(textarea) { resize: vertical; }
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), select, textarea) {
    background-color: #171a20;
    border: 1px solid #2a2f37;
    border-radius: 8px;
    color: #eef0f3;
}
:where(input, textarea)::placeholder { color: #6f767f; opacity: 1; }
:where(input:not([type="checkbox"], [type="radio"]), select, textarea):focus { border-color: #95ab52; outline: 0; box-shadow: 0 0 0 3px rgba(149, 171, 82, .18); }
:where(input[type="checkbox"], input[type="radio"]) { accent-color: #95ab52; }
:where(select option) { background-color: #1a1d22; }
:where(fieldset) { min-width: 0; margin: 0; padding: 0; border: 0; }
:where(legend) { padding: 0; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    :where(*, *::before, *::after) { scroll-behavior: auto; }
}