/* =============================================================
   GEA · Base layer — modern reset, root typography, focus.
   ============================================================= */

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

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
    font-family: var(--gea-font-sans);
    font-size: var(--gea-text-md);
    line-height: var(--gea-leading-normal);
    color: var(--gea-text);
    background: var(--gea-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    accent-color: var(--gea-brand);
    /* Force long unbroken strings (urls, asdasdasd...) to wrap inside their
       container so user-generated text never blows out of cards. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Global default for inline SVG icons. Specific contexts (buttons, badges,
   icon-tiles, etc.) override these. flex:none prevents stretching inside flex
   parents — without this, an SVG with no intrinsic size can blow up. */
.gea-icon {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
}

/* Icon size modifiers — use these instead of inline `style="width/height"`
   so size changes always come from the design system, never magic numbers. */
.gea-icon--2xs { width: 10px; height: 10px; }
.gea-icon--xs  { width: 12px; height: 12px; }
.gea-icon--sm  { width: 14px; height: 14px; }
.gea-icon--md  { width: 20px; height: 20px; }
.gea-icon--lg  { width: 24px; height: 24px; }
.gea-icon--xl  { width: 32px; height: 32px; }
.gea-icon--2xl { width: 40px; height: 40px; }
.gea-icon--3xl { width: 48px; height: 48px; }

/* GAME LOGO — raster game-logo image used inline next to a game name.
   Sized to slot into the same visual position as a .gea-icon, with
   modifiers matching .gea-icon's typical sizes across the design system. */
.gea-game-logo {
    flex: none;
    object-fit: contain;
    border-radius: var(--gea-radius-xs);
    display: inline-block;
}
.gea-game-logo--xs { width: 14px; height: 14px; }
.gea-game-logo--sm { width: 16px; height: 16px; }
.gea-game-logo--md { width: 20px; height: 20px; }
.gea-game-logo--lg { width: 28px; height: 28px; }
.gea-game-logo--xl { width: 40px; height: 40px; }

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

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

button {
    background: none;
    border: 0;
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}

/* ---------- Typography presets ---------- */

.gea-display-2xl,
.gea-display-xl,
.gea-display-lg,
.gea-display-md,
.gea-display-sm {
    font-family: var(--gea-font-display);
    font-weight: var(--gea-weight-bold);
    letter-spacing: var(--gea-tracking-tight);
    line-height: var(--gea-leading-tight);
    color: var(--gea-text);
}

/* Display presets fluidly scale between mobile and desktop using clamp().
   Min values keep headlines from getting too tiny on phones; max values
   are the original desktop sizes. */
.gea-display-2xl { font-size: clamp(40px, 7vw, var(--gea-text-7xl)); letter-spacing: var(--gea-tracking-tighter); }
.gea-display-xl  { font-size: clamp(36px, 6vw, var(--gea-text-6xl)); letter-spacing: var(--gea-tracking-tighter); }
.gea-display-lg  { font-size: clamp(30px, 5vw, var(--gea-text-5xl)); }
.gea-display-md  { font-size: clamp(26px, 4vw, var(--gea-text-4xl)); }
.gea-display-sm  { font-size: clamp(22px, 3.4vw, var(--gea-text-3xl)); }

.gea-heading-xl,
.gea-heading-lg,
.gea-heading-md,
.gea-heading-sm,
.gea-heading-xs {
    font-family: var(--gea-font-display);
    font-weight: var(--gea-weight-semibold);
    letter-spacing: var(--gea-tracking-tight);
    color: var(--gea-text);
}

.gea-heading-xl { font-size: var(--gea-text-3xl); line-height: var(--gea-leading-tight); }
.gea-heading-lg { font-size: var(--gea-text-2xl); line-height: var(--gea-leading-snug); }
.gea-heading-md { font-size: var(--gea-text-xl);  line-height: var(--gea-leading-snug); }
.gea-heading-sm { font-size: var(--gea-text-lg);  line-height: var(--gea-leading-snug); }
.gea-heading-xs { font-size: var(--gea-text-md);  line-height: var(--gea-leading-snug); font-weight: var(--gea-weight-semibold); }

.gea-body-lg { font-size: var(--gea-text-lg); line-height: var(--gea-leading-relaxed); color: var(--gea-text); }
.gea-body    { font-size: var(--gea-text-md); line-height: var(--gea-leading-normal);  color: var(--gea-text); }
.gea-body-sm { font-size: var(--gea-text-sm); line-height: var(--gea-leading-normal);  color: var(--gea-text-muted); }

.gea-caption {
    font-size: var(--gea-text-xs);
    line-height: var(--gea-leading-normal);
    color: var(--gea-text-subtle);
}

.gea-overline {
    font-size: var(--gea-text-xs);
    line-height: var(--gea-leading-none);
    text-transform: uppercase;
    letter-spacing: var(--gea-tracking-widest);
    font-weight: var(--gea-weight-semibold);
    color: var(--gea-text-muted);
}

.gea-mono {
    font-family: var(--gea-font-mono);
    font-feature-settings: 'liga' 0, 'calt' 0;
}

/* ---------- Inline link ---------- */
.gea-link {
    color: var(--gea-text-link);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size var(--gea-duration-base) var(--gea-ease-out);
}
.gea-link:hover { background-size: 100% 1px; }

/* ---------- Selection + scrollbar ---------- */
::selection {
    background: var(--gea-brand-500);
    color: var(--gea-text-on-brand);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--gea-neutral-700) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--gea-neutral-700);
    border-radius: var(--gea-radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--gea-neutral-600); background-clip: content-box; }

/* ---------- Focus visible ---------- */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--gea-brand-500);
    outline-offset: 2px;
    border-radius: var(--gea-radius-xs);
}

/* ---------- Utility helpers used by showcase ---------- */
.gea-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.gea-stack { display: flex; flex-direction: column; }
.gea-row   { display: flex; align-items: center; }
.gea-wrap  { flex-wrap: wrap; }

/* gap helpers */
.gea-gap-1  { gap: var(--gea-space-1); }
.gea-gap-2  { gap: var(--gea-space-2); }
.gea-gap-3  { gap: var(--gea-space-3); }
.gea-gap-4  { gap: var(--gea-space-4); }
.gea-gap-6  { gap: var(--gea-space-6); }
.gea-gap-8  { gap: var(--gea-space-8); }

/* text color helpers */
.gea-text-muted    { color: var(--gea-text-muted); }
.gea-text-subtle   { color: var(--gea-text-subtle); }
.gea-text-brand    { color: var(--gea-brand-500); }
.gea-text-success  { color: var(--gea-success); }
.gea-text-warning  { color: var(--gea-warning); }
.gea-text-danger   { color: var(--gea-danger); }