/* ArgedeGaming public look: tokens + components.
   Copied by BE-Web (Razor: wwwroot/css/argede-public.css, loaded after AdminLTE/Bootstrap 4.6 in _Styles.cshtml)
   and FE-Account (Angular: src/account + src/profile, add to angular.json styles or import in the component).
   Everything is scoped under .ag-site (put it on <body> in Razor, on the account/profile root element in Angular),
   so the admin panel (AdminLTE) is never affected.
   Breakpoints are Bootstrap 4.6's: sm 576, md 768, lg 992, xl 1200. The grid itself is Bootstrap's .container/.row/.col-*.
   Single theme: the public site ships no dark mode. Dark surfaces (header, hero, footer) use the --ag-ink tokens. */

:root {
    /* Surfaces and text (light page) */
    --ag-bg: #f6f4f0;            /* page ground: warm grey with a slight wood bias */
    --ag-surface: #ffffff;       /* cards, inputs */
    --ag-surface-2: #efebe4;     /* chips, table header, skeletons */
    --ag-text: #1d1e20;
    --ag-muted: #5f5a53;         /* 6.2:1 on --ag-bg */
    --ag-line: #e2dcd2;          /* hairlines, card borders */
    --ag-line-strong: #c9c0b3;   /* input borders */

    /* Dark surfaces (header, hero, footer). Matches the logo's shield */
    --ag-ink: #1b1c1e;
    --ag-ink-2: #26282b;         /* raised: phone menu, dropdown on ink, stat strip */
    --ag-ink-line: #3a3c40;
    --ag-on-ink: #f2eee7;
    --ag-on-ink-muted: #aaa49b;  /* 6.9:1 on --ag-ink */

    /* Wood: the action colour. Taken from the 'ahsap-dokulu' board */
    --ag-wood: #8b5a33;          /* primary buttons; white text 5.8:1 */
    --ag-wood-hover: #744a29;
    --ag-wood-on: #ffffff;
    --ag-wood-tint: #f1e2c4;     /* light square of ahsap-dokulu; selected chips, avatar */
    --ag-wood-deep: #47352b;     /* dark square of ahsap-dokulu; board frame */
    --ag-wood-on-ink: #d9a873;   /* wood text/links on --ag-ink (8.0:1) */

    /* Brand: the logo's cyan. Used only on --ag-ink: the live dot, the hint ring, focus on dark */
    --ag-brand: #3ee8f2;

    /* Board (hero and variant diagrams) */
    --ag-sq-dark: #7d5d4b;
    --ag-sq-light: #c2af97;
    --ag-grain: rgba(0, 0, 0, .05);       /* wood grain stripes */
    --ag-grain-light: rgba(0, 0, 0, .035);
    --ag-piece-dark: #1f1f1f;
    --ag-piece-dark-ring: #4a4a4a;
    --ag-piece-light: #c4c2bd;
    --ag-piece-light-ring: #8e8c88;

    /* States (semantic, separate from the accent) */
    --ag-win: #2a7046;   --ag-win-tint: #e3f1e8;
    --ag-loss: #a8332b;  --ag-loss-tint: #f8e4e1;
    --ag-draw: #5f5d59;  --ag-draw-tint: #ebe9e5;
    --ag-cancel: #7a5c0e; --ag-cancel-tint: #f6eed6;
    --ag-danger: #a8332b; --ag-danger-tint: #f8e4e1;
    --ag-success: #2a7046; --ag-success-tint: #e3f1e8;
    --ag-info-tint: #f1e2c4;

    --ag-focus: #8b5a33;
    --ag-shadow-color: rgba(27, 28, 30, .08);
    --ag-overlay: rgba(27, 28, 30, .5);

    /* Type: Poppins is already loaded by _Styles.cshtml and the Angular account page */
    --ag-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --ag-fs-xs: .75rem;    /* 12 */
    --ag-fs-sm: .875rem;   /* 14 */
    --ag-fs-base: 1rem;    /* 16 */
    --ag-fs-lg: 1.125rem;  /* 18 */
    --ag-fs-xl: 1.375rem;  /* 22 */
    --ag-fs-2xl: 1.75rem;  /* 28 */
    --ag-fs-3xl: 2.25rem;  /* 36 */
    --ag-fs-4xl: 3rem;     /* 48 */

    /* Shape and spacing */
    --ag-radius-sm: 6px;
    --ag-radius: 10px;
    --ag-radius-lg: 16px;
    --ag-radius-pill: 999px;
    --ag-space-1: 4px; --ag-space-2: 8px; --ag-space-3: 12px; --ag-space-4: 16px;
    --ag-space-5: 24px; --ag-space-6: 32px; --ag-space-7: 48px; --ag-space-8: 64px;
    --ag-header-h: 56px;
    --ag-tap: 44px;
    --ag-shadow: 0 1px 2px var(--ag-shadow-color), 0 6px 20px var(--ag-shadow-color);
}

/* ---------- Base ---------- */
.ag-site {
    font-family: var(--ag-font);
    font-size: var(--ag-fs-base);
    line-height: 1.55;
    color: var(--ag-text);
    background: var(--ag-bg);
    -webkit-font-smoothing: antialiased;
}
.ag-site :where(h1, h2, h3) { font-family: var(--ag-font); font-weight: 600; line-height: 1.2; text-wrap: balance; margin: 0; color: inherit; }
.ag-site :where(p) { margin: 0; }
.ag-site a { color: var(--ag-wood); text-decoration: underline; text-underline-offset: 2px; }
.ag-site a:hover { color: var(--ag-wood-hover); }
.ag-site :focus-visible { outline: 2px solid var(--ag-focus); outline-offset: 2px; }
.ag-num { font-variant-numeric: tabular-nums; }
.ag-main { display: block; }

/* ---------- Buttons ---------- */
.ag-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ag-space-2);
    min-height: var(--ag-tap); padding: 0 var(--ag-space-5);
    border: 1px solid transparent; border-radius: var(--ag-radius-sm);
    font: 600 var(--ag-fs-base)/1 var(--ag-font); text-decoration: none !important; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.ag-btn--primary { background: var(--ag-wood); color: var(--ag-wood-on) !important; }
.ag-btn--primary:hover { background: var(--ag-wood-hover); }
.ag-btn--secondary { background: transparent; border-color: var(--ag-line-strong); color: var(--ag-text) !important; }
.ag-btn--secondary:hover { border-color: var(--ag-wood); }
.ag-btn--on-ink { background: transparent; border-color: var(--ag-ink-line); color: var(--ag-on-ink) !important; }
.ag-btn--on-ink:hover { border-color: var(--ag-on-ink-muted); }
.ag-btn--lg { min-height: 52px; padding: 0 var(--ag-space-6); font-size: var(--ag-fs-lg); }
.ag-btn--block { display: flex; width: 100%; }
.ag-btn[disabled], .ag-btn.is-busy { opacity: .7; cursor: default; }
.ag-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ag-spin .8s linear infinite; }
@keyframes ag-spin { to { transform: rotate(360deg); } }

/* ---------- Header (Razor Header3 replacement; the Angular profile reuses it) ---------- */
.ag-header { position: sticky; top: 0; z-index: 1030; background: var(--ag-ink); color: var(--ag-on-ink); border-bottom: 1px solid var(--ag-ink-line); }
.ag-header__inner { display: flex; align-items: center; gap: var(--ag-space-4); height: var(--ag-header-h); }
.ag-logo { display: inline-flex; align-items: center; flex: none; }
.ag-logo img { height: 34px; width: auto; display: block; }
.ag-nav { display: none; align-items: center; gap: var(--ag-space-1); margin-left: var(--ag-space-4); }
.ag-nav__link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--ag-space-3); border-radius: var(--ag-radius-sm); color: var(--ag-on-ink-muted) !important; text-decoration: none !important; font-weight: 500; font-size: var(--ag-fs-sm); }
.ag-nav__link:hover { color: var(--ag-on-ink) !important; }
.ag-nav__link.is-active { color: var(--ag-on-ink) !important; box-shadow: inset 0 -2px 0 var(--ag-wood-on-ink); border-radius: 0; }
.ag-header__spacer { flex: 1; }
.ag-header__actions { display: none; align-items: center; gap: var(--ag-space-3); }
.ag-header__actions .ag-btn { min-height: 40px; padding: 0 var(--ag-space-4); font-size: var(--ag-fs-sm); }
.ag-link-on-ink { color: var(--ag-on-ink) !important; text-decoration: none !important; font-weight: 500; font-size: var(--ag-fs-sm); padding: 0 var(--ag-space-2); min-height: 40px; display: inline-flex; align-items: center; }
.ag-link-on-ink:hover { color: var(--ag-wood-on-ink) !important; }
.ag-site .ag-header :focus-visible, .ag-site .ag-footer :focus-visible, .ag-site .ag-hero :focus-visible { outline-color: var(--ag-brand); }

.ag-lang { display: inline-flex; border: 1px solid var(--ag-ink-line); border-radius: var(--ag-radius-pill); padding: 2px; }
.ag-lang a { min-width: 36px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ag-radius-pill); font-size: var(--ag-fs-xs); font-weight: 600; letter-spacing: .06em; color: var(--ag-on-ink-muted) !important; text-decoration: none !important; }
.ag-lang a[aria-current="true"] { background: var(--ag-on-ink); color: var(--ag-ink) !important; }

.ag-user { position: relative; }
.ag-user__btn { display: inline-flex; align-items: center; gap: var(--ag-space-2); min-height: 40px; padding: 0 var(--ag-space-3) 0 4px; background: var(--ag-ink-2); border: 1px solid var(--ag-ink-line); border-radius: var(--ag-radius-pill); color: var(--ag-on-ink); font: 500 var(--ag-fs-sm)/1 var(--ag-font); cursor: pointer; max-width: 220px; }
.ag-user__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ag-wood-tint); color: var(--ag-wood-deep); font-weight: 700; font-size: var(--ag-fs-sm); text-transform: uppercase; }
.ag-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: var(--ag-surface); color: var(--ag-text); border: 1px solid var(--ag-line); border-radius: var(--ag-radius); box-shadow: var(--ag-shadow); padding: var(--ag-space-2); z-index: 1040; }
.ag-dropdown__head { padding: var(--ag-space-2) var(--ag-space-3); border-bottom: 1px solid var(--ag-line); margin-bottom: var(--ag-space-1); font-size: var(--ag-fs-xs); color: var(--ag-muted); }
.ag-dropdown__head strong { display: block; color: var(--ag-text); font-size: var(--ag-fs-sm); }
.ag-dropdown a { display: flex; align-items: center; gap: var(--ag-space-2); min-height: 40px; padding: 0 var(--ag-space-3); border-radius: var(--ag-radius-sm); color: var(--ag-text) !important; text-decoration: none !important; font-size: var(--ag-fs-sm); }
.ag-dropdown a:hover { background: var(--ag-surface-2); }

.ag-skel { display: inline-block; height: 32px; width: 140px; border-radius: var(--ag-radius-pill); background: var(--ag-ink-2); }
.ag-skel--light { background: var(--ag-surface-2); border-radius: var(--ag-radius-sm); }

.ag-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--ag-tap); height: var(--ag-tap); margin-right: -8px; background: transparent; border: 0; color: var(--ag-on-ink); border-radius: var(--ag-radius-sm); cursor: pointer; }
.ag-menu-btn svg { width: 24px; height: 24px; }

.ag-mobile-menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--ag-ink-2); border-bottom: 1px solid var(--ag-ink-line); padding: var(--ag-space-2) 0 var(--ag-space-5); box-shadow: 0 0 0 100vmax var(--ag-overlay); } /* the spread dims the page under the menu */
.ag-mobile-menu__user { display: flex; align-items: center; gap: var(--ag-space-3); padding: var(--ag-space-3) 0 var(--ag-space-4); border-bottom: 1px solid var(--ag-ink-line); margin-bottom: var(--ag-space-2); }
.ag-mobile-menu__user small { display: block; color: var(--ag-on-ink-muted); font-size: var(--ag-fs-xs); }
.ag-mobile-menu a.ag-mobile-menu__item { display: flex; align-items: center; justify-content: space-between; min-height: 52px; color: var(--ag-on-ink) !important; text-decoration: none !important; font-weight: 500; border-bottom: 1px solid var(--ag-ink-line); }
.ag-mobile-menu__actions { display: flex; flex-direction: column; gap: var(--ag-space-3); margin-top: var(--ag-space-5); }
.ag-mobile-menu__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--ag-space-5); color: var(--ag-on-ink-muted); font-size: var(--ag-fs-sm); }

@media (min-width: 992px) {
    .ag-site { --ag-header-h: 64px; }
    .ag-logo img { height: 38px; }
    .ag-nav, .ag-header__actions { display: flex; }
    .ag-menu-btn, .ag-mobile-menu { display: none; }
}

/* ---------- Footer (_Footer2 replacement) ---------- */
.ag-footer { background: var(--ag-ink); color: var(--ag-on-ink-muted); padding: var(--ag-space-7) 0 var(--ag-space-5); font-size: var(--ag-fs-sm); }
.ag-footer__brand img { height: 32px; width: auto; }
.ag-footer__brand p { margin-top: var(--ag-space-3); max-width: 28ch; }
.ag-footer__title { color: var(--ag-on-ink); font-weight: 600; font-size: var(--ag-fs-xs); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--ag-space-3); }
.ag-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ag-space-1); }
.ag-footer ul a { color: var(--ag-on-ink-muted) !important; text-decoration: none !important; display: inline-flex; min-height: 32px; align-items: center; }
.ag-footer ul a:hover { color: var(--ag-on-ink) !important; }
.ag-footer__cols { row-gap: var(--ag-space-6); }
.ag-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ag-space-3); margin-top: var(--ag-space-6); padding-top: var(--ag-space-5); border-top: 1px solid var(--ag-ink-line); font-size: var(--ag-fs-xs); }
.ag-footer__bottom img { height: 17px; width: auto; display: block; }

/* ---------- Landing ---------- */
.ag-hero { background: var(--ag-ink); color: var(--ag-on-ink); padding: var(--ag-space-6) 0 var(--ag-space-6); overflow: hidden; }
.ag-hero__row { align-items: center; row-gap: var(--ag-space-6); }
.ag-eyebrow { font-size: var(--ag-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ag-wood-on-ink); }
.ag-hero__title { font-size: 1.875rem; font-weight: 700; letter-spacing: -.01em; margin-top: var(--ag-space-3); max-width: 16ch; }
.ag-hero__lead { margin-top: var(--ag-space-4); color: var(--ag-on-ink-muted); font-size: var(--ag-fs-base); max-width: 46ch; }
.ag-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ag-space-3) var(--ag-space-5); margin-top: var(--ag-space-5); }
.ag-hero__actions .ag-btn--primary { flex: 1 1 100%; }
.ag-hero__note { color: var(--ag-on-ink-muted); font-size: var(--ag-fs-sm); }
.ag-hero__note a { color: var(--ag-wood-on-ink) !important; font-weight: 600; }

.ag-board { position: relative; width: 100%; max-width: 320px; margin: 0 auto; padding: 10px; border-radius: var(--ag-radius-lg); background: var(--ag-wood-deep); box-shadow: 0 24px 48px var(--ag-overlay); }
.ag-mini { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; width: 100%; max-width: 100%; border-radius: 4px; overflow: hidden; }
.ag-mini > i { position: relative; display: block; }
.ag-mini > i.d { background: var(--ag-sq-dark) repeating-linear-gradient(95deg, var(--ag-grain) 0 2px, transparent 2px 6px); }
.ag-mini > i.l { background: var(--ag-sq-light) repeating-linear-gradient(95deg, var(--ag-grain-light) 0 2px, transparent 2px 7px); }
.ag-mini > i.p1::after, .ag-mini > i.p2::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; }
.ag-mini > i.p1::after { background: var(--ag-piece-dark); box-shadow: inset 0 0 0 3px var(--ag-piece-dark-ring), 0 2px 3px var(--ag-overlay); }
.ag-mini > i.p2::after { background: var(--ag-piece-light); box-shadow: inset 0 0 0 3px var(--ag-piece-light-ring), 0 2px 3px var(--ag-overlay); }
.ag-mini > i.hint::before { content: ""; position: absolute; inset: 6%; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--ag-brand); animation: ag-hint 2.4s ease-in-out infinite; }
@keyframes ag-hint { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.ag-stats-wrap { margin-top: var(--ag-space-6); display: flex; flex-direction: column; gap: var(--ag-space-3); }
.ag-stats { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--ag-ink-line); border: 1px solid var(--ag-ink-line); border-radius: var(--ag-radius); overflow: hidden; }
.ag-stats__item { background: var(--ag-ink-2); padding: var(--ag-space-3) var(--ag-space-4); display: flex; align-items: baseline; gap: var(--ag-space-3); }
.ag-stats__num { font-size: var(--ag-fs-xl); font-weight: 700; color: var(--ag-on-ink); font-variant-numeric: tabular-nums; min-width: 2.5ch; }
.ag-stats__label { color: var(--ag-on-ink-muted); font-size: var(--ag-fs-sm); }
.ag-stats__live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ag-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ag-on-ink); }
.ag-stats__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ag-brand); }

.ag-section { padding: var(--ag-space-7) 0; }
.ag-section + .ag-section { padding-top: 0; }
.ag-section__head { margin-bottom: var(--ag-space-5); max-width: 60ch; }
.ag-section__head h2 { font-size: var(--ag-fs-2xl); }
.ag-section__head p { margin-top: var(--ag-space-2); color: var(--ag-muted); }
.ag-cards { row-gap: var(--ag-space-4); }

.ag-variant { height: 100%; display: flex; flex-direction: column; background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-radius); padding: var(--ag-space-4); }
.ag-variant__top { display: flex; align-items: center; gap: var(--ag-space-4); }
.ag-variant__top .ag-mini { width: 88px; flex: none; border: 3px solid var(--ag-wood-deep); border-radius: var(--ag-radius-sm); }
.ag-variant h3 { font-size: var(--ag-fs-xl); }
.ag-variant__en { display: block; font-size: var(--ag-fs-xs); color: var(--ag-muted); font-weight: 500; margin-top: 2px; }
.ag-variant ul { margin: var(--ag-space-4) 0 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--ag-space-2); font-size: var(--ag-fs-sm); }
.ag-variant ul li::marker { color: var(--ag-wood); }
.ag-variant__link { margin-top: auto; padding-top: var(--ag-space-4); font-weight: 600; font-size: var(--ag-fs-sm); }

.ag-about { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-radius); padding: var(--ag-space-5); }
.ag-about__row { row-gap: var(--ag-space-5); align-items: start; }
.ag-about h2 { font-size: var(--ag-fs-2xl); }
.ag-about p { margin-top: var(--ag-space-3); max-width: 62ch; }
.ag-about__links { display: flex; flex-wrap: wrap; gap: var(--ag-space-2) var(--ag-space-5); margin-top: var(--ag-space-4); font-weight: 600; font-size: var(--ag-fs-sm); }
.ag-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ag-space-3); }
.ag-facts li { background: var(--ag-bg); border-radius: var(--ag-radius-sm); padding: var(--ag-space-3); }
.ag-facts strong { display: block; font-size: var(--ag-fs-xl); font-weight: 700; }
.ag-facts span { font-size: var(--ag-fs-xs); color: var(--ag-muted); }

@media (min-width: 576px) {
    .ag-hero__actions .ag-btn--primary { flex: 0 0 auto; }
    .ag-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ag-stats__item { flex-direction: column; gap: 2px; }
}
@media (min-width: 768px) {
    .ag-hero__title { font-size: var(--ag-fs-3xl); }
    .ag-about { padding: var(--ag-space-6); }
}
@media (min-width: 992px) {
    .ag-hero { padding: var(--ag-space-8) 0 var(--ag-space-7); }
    .ag-hero__title { font-size: var(--ag-fs-4xl); }
    .ag-hero__lead { font-size: var(--ag-fs-lg); }
    .ag-board { max-width: 420px; margin-right: 0; padding: 14px; }
    .ag-section { padding: var(--ag-space-8) 0; }
}
/* Landscape phone (844x390): keep the hero short */
@media (orientation: landscape) and (max-height: 500px) {
    .ag-hero { padding-top: var(--ag-space-4); }
    .ag-hero__title { font-size: var(--ag-fs-2xl); }
    .ag-hero__lead { margin-top: var(--ag-space-2); font-size: var(--ag-fs-sm); }
    .ag-hero__actions { margin-top: var(--ag-space-4); }
    .ag-board { max-width: 240px; }
}

/* ---------- Browse ---------- */
.ag-page-head { padding: var(--ag-space-6) 0 var(--ag-space-5); }
.ag-page-head h1 { font-size: var(--ag-fs-2xl); }
.ag-page-head p { margin-top: var(--ag-space-2); color: var(--ag-muted); }
.ag-game-card { height: 100%; display: flex; flex-direction: column; background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-radius); overflow: hidden; }
.ag-game-card__media { aspect-ratio: 16 / 10; max-width: 100%; background: var(--ag-surface-2); display: flex; align-items: center; justify-content: center; }
.ag-game-card__media img { width: 62%; max-width: 180px; height: auto; aspect-ratio: 1; object-fit: contain; }
.ag-game-card__body { flex: 1; display: flex; flex-direction: column; gap: var(--ag-space-3); padding: var(--ag-space-4); }
.ag-game-card__title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ag-space-3); }
.ag-game-card h2 { font-size: var(--ag-fs-xl); }
.ag-game-card__meta { font-size: var(--ag-fs-xs); color: var(--ag-muted); white-space: nowrap; }
.ag-game-card__desc { font-size: var(--ag-fs-sm); color: var(--ag-muted); }
.ag-game-card .ag-btn { margin-top: auto; }
.ag-chips { display: flex; flex-wrap: wrap; gap: var(--ag-space-2); list-style: none; margin: 0; padding: 0; }
.ag-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--ag-radius-pill); background: var(--ag-surface-2); font-size: var(--ag-fs-xs); font-weight: 500; color: var(--ag-text); }
/* One game: a wide card instead of a lone grid cell */
@media (min-width: 768px) {
    .ag-game-card--wide { flex-direction: row; }
    .ag-game-card--wide .ag-game-card__media { aspect-ratio: auto; flex: 0 0 42%; min-height: 260px; }
    .ag-game-card--wide .ag-game-card__body { padding: var(--ag-space-6); justify-content: center; }
    .ag-game-card--wide .ag-btn { margin-top: var(--ag-space-3); align-self: flex-start; }
}

.ag-empty { text-align: center; padding: var(--ag-space-7) var(--ag-space-4); background: var(--ag-surface); border: 1px dashed var(--ag-line-strong); border-radius: var(--ag-radius); }
.ag-empty h2, .ag-empty h3 { font-size: var(--ag-fs-lg); }
.ag-empty p { margin-top: var(--ag-space-2); color: var(--ag-muted); font-size: var(--ag-fs-sm); max-width: 44ch; margin-inline: auto; }
.ag-empty .ag-btn { margin-top: var(--ag-space-4); }

/* ---------- Account (Angular /account, inside AdminLTE's .login-page) ---------- */
.ag-account { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: var(--ag-space-3) var(--ag-space-4) var(--ag-space-6); background: var(--ag-bg); }
.ag-account__top { width: 100%; max-width: 420px; display: flex; align-items: center; justify-content: space-between; min-height: var(--ag-tap); font-size: var(--ag-fs-sm); }
.ag-account__top > a { color: var(--ag-muted) !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; min-height: var(--ag-tap); }
.ag-account__top .ag-lang { border-color: var(--ag-line-strong); }
.ag-account__top .ag-lang a { color: var(--ag-muted) !important; }
.ag-account__top .ag-lang a[aria-current="true"] { background: var(--ag-text); color: var(--ag-surface) !important; }
.ag-account__logo { display: flex; justify-content: center; margin: var(--ag-space-3) 0 var(--ag-space-5); }
.ag-account__logo img { height: 52px; width: auto; }
.ag-card { width: 100%; max-width: 420px; background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-radius); box-shadow: var(--ag-shadow); padding: var(--ag-space-5) var(--ag-space-4); }
.ag-card h1 { font-size: var(--ag-fs-xl); }
.ag-card__intro { margin-top: var(--ag-space-2); color: var(--ag-muted); font-size: var(--ag-fs-sm); }
.ag-form { display: flex; flex-direction: column; gap: var(--ag-space-4); margin-top: var(--ag-space-5); }
.ag-field { display: flex; flex-direction: column; gap: 6px; }
.ag-label { font-size: var(--ag-fs-sm); font-weight: 500; color: var(--ag-text); margin: 0; }
/* AdminLTE bolds every label with (0,2,1) specificity; these match it and win by load order (load this file after adminlte.min.css) */
.ag-site label.ag-label { font-weight: 500; margin-bottom: 0; }
.ag-site label.ag-check { font-weight: 400; margin-bottom: 0; }
.ag-input { width: 100%; min-height: var(--ag-tap); padding: 0 var(--ag-space-3); border: 1px solid var(--ag-line-strong); border-radius: var(--ag-radius-sm); background: var(--ag-surface); color: var(--ag-text); font: 400 var(--ag-fs-base) var(--ag-font); }
.ag-input:focus { outline: none; border-color: var(--ag-wood); box-shadow: 0 0 0 3px var(--ag-wood-tint); }
.ag-input.is-invalid { border-color: var(--ag-danger); }
.ag-input-wrap { position: relative; }
.ag-input-wrap .ag-input { padding-right: 48px; }
.ag-eye { position: absolute; right: 0; top: 0; width: var(--ag-tap); height: var(--ag-tap); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--ag-muted); cursor: pointer; }
.ag-eye svg { width: 20px; height: 20px; }
.ag-hint { font-size: var(--ag-fs-xs); color: var(--ag-muted); }
.ag-error { font-size: var(--ag-fs-xs); color: var(--ag-danger); font-weight: 500; }
.ag-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--ag-space-3); flex-wrap: wrap; font-size: var(--ag-fs-sm); }
.ag-check { display: flex; align-items: flex-start; gap: var(--ag-space-3); font-size: var(--ag-fs-sm); cursor: pointer; }
.ag-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ag-wood); }
.ag-check small { display: block; color: var(--ag-muted); font-size: var(--ag-fs-xs); }
.ag-consents { display: flex; flex-direction: column; gap: var(--ag-space-3); padding: var(--ag-space-3); border-radius: var(--ag-radius-sm); background: var(--ag-bg); }
.ag-alert { display: flex; gap: var(--ag-space-3); padding: var(--ag-space-3); border-radius: var(--ag-radius-sm); font-size: var(--ag-fs-sm); }
.ag-alert--danger { background: var(--ag-danger-tint); color: var(--ag-danger); }
.ag-alert--info { background: var(--ag-info-tint); color: var(--ag-wood-deep); }
.ag-alert--success { background: var(--ag-success-tint); color: var(--ag-success); }
.ag-alert a { color: inherit !important; font-weight: 600; }
.ag-card__foot { margin-top: var(--ag-space-5); padding-top: var(--ag-space-4); border-top: 1px solid var(--ag-line); text-align: center; font-size: var(--ag-fs-sm); color: var(--ag-muted); }
.ag-card__foot a { font-weight: 600; }
.ag-status { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ag-space-3); padding: var(--ag-space-3) 0; }
.ag-status__icon { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ag-status__icon svg { width: 28px; height: 28px; }
.ag-status__icon--ok { background: var(--ag-success-tint); color: var(--ag-success); }
.ag-status__icon--fail { background: var(--ag-danger-tint); color: var(--ag-danger); }
.ag-status__icon--mail, .ag-status__icon--busy { background: var(--ag-wood-tint); color: var(--ag-wood-deep); }
.ag-status p { color: var(--ag-muted); font-size: var(--ag-fs-sm); max-width: 34ch; }
.ag-status .ag-form { width: 100%; text-align: left; margin-top: var(--ag-space-2); }
.ag-account__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ag-space-1) var(--ag-space-4); margin-top: var(--ag-space-5); font-size: var(--ag-fs-xs); }
.ag-account__legal a { color: var(--ag-muted) !important; }
@media (min-width: 576px) {
    .ag-account { justify-content: flex-start; padding-top: var(--ag-space-5); }
    .ag-card { padding: var(--ag-space-6); }
}

/* ---------- Profile (Angular /profile) ---------- */
.ag-profile { padding: var(--ag-space-5) 0 var(--ag-space-7); }
.ag-profile__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ag-space-4); }
.ag-profile__head .ag-avatar { width: 56px; height: 56px; font-size: var(--ag-fs-xl); }
.ag-profile__who { flex: 1; min-width: 0; }
.ag-profile__who h1 { font-size: var(--ag-fs-2xl); overflow-wrap: anywhere; }
.ag-profile__who p { color: var(--ag-muted); font-size: var(--ag-fs-sm); overflow-wrap: anywhere; }
.ag-profile__head .ag-btn { flex: 1 1 100%; }
.ag-block { margin-top: var(--ag-space-6); }
.ag-block > h2 { font-size: var(--ag-fs-lg); margin-bottom: var(--ag-space-3); }
.ag-block__note { font-size: var(--ag-fs-xs); color: var(--ag-muted); margin-top: var(--ag-space-2); }
.ag-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ag-space-3); }
.ag-tile { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-radius); padding: var(--ag-space-3) var(--ag-space-4); }
.ag-tile__label { font-size: var(--ag-fs-xs); color: var(--ag-muted); }
.ag-tile__value { font-size: var(--ag-fs-2xl); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ag-tile__value small { font-size: var(--ag-fs-sm); font-weight: 500; color: var(--ag-muted); margin-left: 4px; }
.ag-vcards { display: grid; grid-template-columns: 1fr; gap: var(--ag-space-3); }
.ag-vcard { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-radius); padding: var(--ag-space-4); }
.ag-vcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ag-space-3); }
.ag-vcard h3 { font-size: var(--ag-fs-lg); }
.ag-vcard__rate { font-size: var(--ag-fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-vcard__rate small { display: block; text-align: right; font-size: var(--ag-fs-xs); font-weight: 500; color: var(--ag-muted); }
.ag-wld { display: flex; height: 8px; border-radius: var(--ag-radius-pill); overflow: hidden; margin: var(--ag-space-3) 0 var(--ag-space-2); background: var(--ag-surface-2); gap: 2px; }
.ag-wld > span { display: block; }
.ag-wld .w { background: var(--ag-win); }
.ag-wld .l { background: var(--ag-loss); }
.ag-wld .d { background: var(--ag-draw); }
.ag-wld-legend { display: flex; flex-wrap: wrap; gap: var(--ag-space-1) var(--ag-space-4); font-size: var(--ag-fs-sm); font-variant-numeric: tabular-nums; }
.ag-wld-legend b { font-weight: 600; }
.ag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.ag-dot.w { background: var(--ag-win); } .ag-dot.l { background: var(--ag-loss); } .ag-dot.d { background: var(--ag-draw); }
.ag-dl { margin: var(--ag-space-3) 0 0; padding-top: var(--ag-space-3); border-top: 1px solid var(--ag-line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--ag-space-3); font-size: var(--ag-fs-sm); }
.ag-dl dt { font-weight: 400; color: var(--ag-muted); }
.ag-dl dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.ag-games { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-radius); overflow: hidden; }
.ag-games__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "res opp date" "res meta date"; column-gap: var(--ag-space-3); row-gap: 2px; align-items: center; padding: var(--ag-space-3) var(--ag-space-4); border-top: 1px solid var(--ag-line); font-size: var(--ag-fs-sm); }
.ag-games__row:first-child { border-top: 0; }
.ag-games__head { display: none; }
.ag-games__res { grid-area: res; }
.ag-games__opp { grid-area: opp; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-games__mode, .ag-games__how { grid-area: meta; color: var(--ag-muted); font-size: var(--ag-fs-xs); }
.ag-games__how { display: none; }
.ag-games__date { grid-area: date; color: var(--ag-muted); font-size: var(--ag-fs-xs); text-align: right; white-space: nowrap; }
.ag-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 84px; min-height: 26px; padding: 0 10px; border-radius: var(--ag-radius-pill); font-size: var(--ag-fs-xs); font-weight: 600; }
.ag-pill--win { background: var(--ag-win-tint); color: var(--ag-win); }
.ag-pill--loss { background: var(--ag-loss-tint); color: var(--ag-loss); }
.ag-pill--draw { background: var(--ag-draw-tint); color: var(--ag-draw); }
.ag-pill--canceled { background: var(--ag-cancel-tint); color: var(--ag-cancel); }

.ag-account-box { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-radius); padding: var(--ag-space-4); }
.ag-account-box__row { row-gap: var(--ag-space-5); }
.ag-account-box h3 { font-size: var(--ag-fs-base); margin-bottom: var(--ag-space-3); }
.ag-account-box .ag-form { margin-top: 0; }
.ag-kv { display: grid; grid-template-columns: 1fr; gap: var(--ag-space-3); margin: 0; font-size: var(--ag-fs-sm); }
.ag-kv dt { color: var(--ag-muted); font-weight: 400; font-size: var(--ag-fs-xs); }
.ag-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.ag-toast { display: flex; align-items: center; gap: var(--ag-space-3); padding: var(--ag-space-3) var(--ag-space-4); border-radius: var(--ag-radius); background: var(--ag-success-tint); color: var(--ag-success); font-size: var(--ag-fs-sm); font-weight: 500; margin-bottom: var(--ag-space-4); }
.ag-toast button { margin-left: auto; margin-right: -8px; background: transparent; border: 0; color: inherit; width: var(--ag-tap); height: var(--ag-tap); cursor: pointer; flex: none; }

.ag-guest { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-radius); padding: var(--ag-space-5) var(--ag-space-4); }
.ag-guest h1 { font-size: var(--ag-fs-xl); }
.ag-guest p { margin-top: var(--ag-space-3); color: var(--ag-muted); max-width: 52ch; }
.ag-guest ul { margin: var(--ag-space-4) 0 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; font-size: var(--ag-fs-sm); }
.ag-guest ul li::marker { color: var(--ag-wood); }
.ag-guest__actions { display: flex; flex-wrap: wrap; gap: var(--ag-space-3); margin-top: var(--ag-space-5); }
.ag-guest__actions .ag-btn { flex: 1 1 160px; }
.ag-sample { position: relative; margin-top: var(--ag-space-5); opacity: .55; pointer-events: none; }
.ag-sample__tag { position: absolute; top: -10px; right: 8px; z-index: 1; background: var(--ag-text); color: var(--ag-surface); font-size: var(--ag-fs-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--ag-radius-pill); }

.ag-skel-block { display: block; background: var(--ag-surface-2); border-radius: var(--ag-radius); animation: ag-pulse 1.4s ease-in-out infinite; }
@keyframes ag-pulse { 50% { opacity: .55; } }

@media (min-width: 576px) {
    .ag-profile__head .ag-btn { flex: 0 0 auto; }
    .ag-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .ag-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ag-vcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ag-games__head { display: grid; background: var(--ag-surface-2); font-size: var(--ag-fs-xs); font-weight: 600; color: var(--ag-muted); text-transform: uppercase; letter-spacing: .06em; }
    .ag-games__row { grid-template-columns: 110px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 150px; grid-template-areas: "res opp mode how date"; }
    .ag-games__mode { grid-area: mode; color: var(--ag-text); font-size: var(--ag-fs-sm); }
    .ag-games__how { display: block; grid-area: how; font-size: var(--ag-fs-sm); }
    .ag-games__date { font-size: var(--ag-fs-sm); }
    .ag-account-box { padding: var(--ag-space-5); }
    .ag-guest { padding: var(--ag-space-6); }
}
@media (min-width: 992px) {
    .ag-profile { padding-top: var(--ag-space-6); }
}

@media (prefers-reduced-motion: reduce) {
    .ag-mini > i.hint::before, .ag-skel-block, .ag-spinner { animation: none; }
    .ag-btn { transition: none; }
}