/* ==========================================================================
   EL3AB tokens: Night Arcade.

   A modern, stylized, minimal mobile-game UI. The ground is a deep, quiet
   ink; nothing on it is textured. Lists and panels are flat ink surfaces a
   step lighter. Things that are game objects (game cards, bots, results,
   rewards, your player card) are crisp white cards with a coloured lip.
   Buttons are flat colour with a solid lip under them that the finger
   pushes down. Colour is rationed: each game owns one hue, gold is coins
   and rewards, green is "play".

   Variable names from earlier passes are kept and remapped, so every screen
   moves at once. Values can be overridden from /admin/branding.php; theme.js
   maps the stored keys.
   ========================================================================== */
@font-face {
  font-family: 'Rubik';
  src: url('/public/assets/fonts/rubik-arabic.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Rubik';
  src: url('/public/assets/fonts/rubik-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  src: url('/public/assets/fonts/rubik-latin-ext.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* The display face is the same variable font pinned to ExtraBold: anything set
   in var(--font-display) shouts, whatever weight the rule asks for. */
@font-face {
  font-family: 'El3ab Display';
  src: url('/public/assets/fonts/rubik-arabic.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'El3ab Display';
  src: url('/public/assets/fonts/rubik-latin.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'El3ab Display';
  src: url('/public/assets/fonts/rubik-latin-ext.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── The stage ────────────────────────────────────────────────────────── */
  --stage: #14121A;
  --stage-glow: rgba(140, 92, 250, 0.16);
  --stage-glow-2: rgba(255, 138, 52, 0.07);
  /* An eight-point star lattice, barely there: the only ornament. */
  --stage-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.035' stroke-width='1.2'%3E%3Cpath d='M28 12l4.7 11.3L44 28l-11.3 4.7L28 44l-4.7-11.3L12 28l11.3-4.7z'/%3E%3Cpath d='M16.7 16.7h22.6v22.6H16.7z'/%3E%3C/g%3E%3C/svg%3E");
  --felt-1: #22A57E;
  --felt-2: #17836A;

  /* ── Ink surfaces: lists, panels, inputs, neutral buttons ────────────────
     (named "back" for history) */
  --back-950: #0D0C12;
  --back-900: #14121A;
  --back-800: #1D1A25;
  --back-700: #262230;
  --back-600: #302B3C;
  --back-500: #3D3749;
  --back-line: rgba(255, 255, 255, 0.07);
  --back-line-strong: rgba(255, 255, 255, 0.14);
  --back-ink: #FFC531;

  /* ── White game cards and the ink printed on them ───────────────────── */
  --card: #FFFFFF;
  --card-2: #F4F2F8;
  --card-3: #E8E5EF;
  --card-line: #E3DFEA;
  --card-edge: #CFC9DA;      /* the lip under a white card */
  --ink: #1A1722;
  --ink-2: #4B4558;
  --ink-3: #7D768C;
  --red-ink: #F0384B;
  --red-ink-deep: #C21F33;

  /* ── Signals ───────────────────────────────────────────────────────── */
  --gold: #FFC531;
  --gold-soft: #FFD866;
  --gold-dark: #D18D08;
  --gold-ink: #7A4E00;
  --red: #FF4D5E;
  --win: #2ED47A;
  --win-ink: #13924E;
  --loss: #FF4D5E;
  --draw: #C8C3D4;
  --sky: #4DA3FF;
  --rar-common: #A7A1B6;
  --rar-common-edge: #77718A;
  --silver: #D9D5E3;
  --silver-edge: #9B94AE;
  --bronze: #F08A4B;
  --bronze-edge: #B5592A;

  /* ── Buttons: a flat face (-1/-2 kept as names; they are the same colour
        where contrast is tight) and the lip under it ─────────────────── */
  --btn-green-1: #20A85D;  --btn-green-2: #20A85D;  --btn-green-edge: #12753F;   /* white text 3.1:1 */
  --btn-green-deep: #147F45; --btn-green-deep-edge: #0D5C31;                     /* small keys: 5:1 */
  --btn-gold-1: #FFCD40;   --btn-gold-2: #FFC229;   --btn-gold-edge: #CC8A05;
  --btn-red-1: #FF5A6A;    --btn-red-2: #FF4458;    --btn-red-edge: #C2203A;
  --btn-blue-1: #4C95FF;   --btn-blue-2: #3B86FF;   --btn-blue-edge: #1F5BC4;
  --btn-purple-1: #9C6DFF; --btn-purple-2: #8C5CFA; --btn-purple-edge: #5F33C2;
  --btn-orange-1: #E06A16; --btn-orange-2: #E06A16; --btn-orange-edge: #A84E0C;   /* white text 3.4:1 */
  --btn-wood-1: #3B3547;   --btn-wood-2: #363042;   --btn-wood-edge: #201C28;   /* neutral */
  --btn-white-1: #FFFFFF;  --btn-white-2: #FFFFFF;  --btn-white-edge: #CFC9DA;
  --outline: #0D0C12;

  /* ── Text on the stage ─────────────────────────────────────────────── */
  --text-primary: #FFFFFF;
  --text-secondary: #C8C3D4;
  --text-muted: #8E889E;
  --text-dim: #6B6579;
  --text-light: #FFFFFF;
  --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  /* No outlines: display text on colour gets one soft drop, nothing more. */
  --text-outline: 0 2px 0 rgba(0, 0, 0, 0.16);

  /* ── Ludo's four players ───────────────────────────────────────────── */
  --ludo-red: #FF4D5E;
  --ludo-blue: #3B86FF;
  --ludo-green: #2BCF76;
  --ludo-yellow: #FFC531;

  /* ── Each game owns one hue ────────────────────────────────────────── */
  --chess-primary: #20A85D;
  --chess-secondary: #12753F;
  --ludo-primary: #E06A16;
  --ludo-secondary: #A84E0C;
  --domino-primary: #8C5CFA;
  --domino-secondary: #5F33C2;
  --backgammon-primary: #FF4458;
  --backgammon-secondary: #C2203A;

  /* ── Legacy names, remapped ────────────────────────────────────────── */
  --bg-deep: var(--back-950);
  --bg-base: var(--back-900);
  --bg-panel: var(--back-800);
  --bg-card: var(--back-800);
  --bg-surface: var(--back-800);
  --bg-elevated: var(--back-700);
  --bg-hover: var(--back-600);
  --bg-inset: var(--back-950);
  --bg-dark: var(--back-950);
  --blue: var(--sky);
  --cyan: #3CD6E6;
  --info: var(--sky);
  --purple: #A77BFF;
  --purple-light: #C4A6FF;
  --violet: #8C5CFA;
  --emerald: var(--win);
  --green: var(--win);
  --green-light: #6BE6A3;
  --success: var(--win);
  --orange: #FF8A34;
  --amber: var(--gold);
  --warning: var(--gold);
  --pink: #FF6FB1;
  --red-light: var(--red);
  --red-soft: #FFB3BB;
  --error: var(--red);

  /* ── Boards: flat, modern colours ──────────────────────────────────── */
  --board-light: #E9E6F1;
  --board-dark: #8B80AC;
  --board-highlight-light: #F6E58C;
  --board-highlight-dark: #D3C060;
  --board-check: #FF4D5E;
  --board-frame: #1D1A25;

  --bg-board-border: #14121A;
  /* Tawla: field, points and tray all sit in one mid-tone band, so white and
     ink checkers both hold 3:1 or more on every surface they stand on. */
  --bg-board-light: #177F68;
  --bg-board-dark: #157862;
  --bg-bar-dark: #14121A;
  --bg-bar-light: #1D1A25;
  --bg-bearoff: #6B6585;
  --bg-point-dark: #F03E52;
  --bg-point-dark-tip: #F03E52;
  --bg-point-light: #8A84A3;
  --bg-point-light-tip: #8A84A3;
  --bg-checker-white: #FFFFFF;
  --bg-checker-black: #1A1722;
  --bg-highlight: #2ED47A;
  --bg-selected: #FFC531;

  --border: var(--back-line);
  --border-hover: var(--back-line-strong);
  --border-active: rgba(255, 197, 49, 0.75);

  /* ── Shape: big, soft, confident radii ─────────────────────────────── */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: 9999px;
  --r-card: 22px;
  --r-btn: 18px;
  --r-btn-secondary: var(--r-btn);
  --r-input: 16px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px;
  --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-16: 64px;
  --gutter: 16px;

  /* ── Type: Rubik. Display is pinned to ExtraBold (see the faces above). ─ */
  --font-display: 'El3ab Display', 'Rubik', system-ui, sans-serif;
  --font-ar: 'Rubik', system-ui, sans-serif;
  --font-lat: var(--font-ar);
  --font-mono: var(--font-ar);
  --fs-xs:   clamp(12px, 3.2vw, 13px);
  --fs-sm:   clamp(13px, 3.6vw, 14px);
  --fs-base: clamp(15px, 4.1vw, 16px);
  --fs-md:   clamp(16px, 4.5vw, 18px);
  --fs-lg:   clamp(19px, 5.2vw, 22px);
  --fs-xl:   clamp(22px, 6.2vw, 26px);
  --fs-2xl:  clamp(26px, 7.6vw, 32px);
  --fs-3xl:  clamp(34px, 10vw, 44px);

  /* ── Controls: game-sized ──────────────────────────────────────────── */
  --tap-min: 44px;
  --tap-comfortable: 52px;
  --btn-min-height: 54px;
  --btn-weight: 800;
  --btn-press-scale: 0.97;
  --btn-lip: 5px;
  --btn-shadow: 0 var(--btn-lip) 0 var(--btn-green-edge);
  --card-border-width: 0px;

  /* ── Motion: El3ab is a game. Things pop, snap and settle. ─────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-deal: cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap: cubic-bezier(0.5, 1.8, 0.6, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-normal: 240ms;
  --dur-slow: 420ms;

  /* ── Depth: soft and short; the lip does the work ─────────────────── */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 5px 0 var(--card-edge), 0 14px 28px -10px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 3px rgba(255, 197, 49, 0.55), 0 0 26px rgba(255, 197, 49, 0.35);

  /* Card backs: violet with a white lattice. */
  --back-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 2l7 7-7 7-7-7z' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='1.2'/%3E%3C/svg%3E");
  --back-pattern-dense: var(--back-pattern);

  /* ── Chrome sizes ──────────────────────────────────────────────────── */
  --hud-height: 64px;
  --tab-height: 84px;          /* the floating dock and the gap under it */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --hud-avatar-size: 46px;
  --hud-avatar-border: 0px;
  --hud-icon-size: 28px;
  --hud-bell-size: 26px;
  --hud-stat-font: 16px;
  --hud-stat-gap: 8px;
  --hud-btn-size: 44px;
  --hud-badge-size: 20px;
  --hud-badge-font: 12px;
  --hud-padding-x: 12px;

  --tab-icon-size: 32px;
  --tab-label-font: 12px;
  --tab-item-gap: 2px;
  --tab-item-padding-x: 4px;
  --tab-item-padding-y: 4px;
  --tab-item-min-size: 52px;

  /* ── Legacy layout tokens, still read by a few scenes ───────────────── */
  --home-padding: 16px;
  --home-max-width: 560px;
  --home-greeting-font: 16px;
  --home-greeting-margin: 12px;
  --quick-btn-icon-size: 52px;
  --quick-btn-icon-radius: 16px;
  --quick-btn-icon-font: 22px;
  --quick-btn-label-font: var(--fs-xs);
  --quick-btn-gap: 8px;
  --quick-btn-padding: 6px;
  --quick-row-gap: 8px;
  --quick-row-margin: 16px;
  --game-tile-radius: var(--r-card);
  --game-tile-gap: 12px;
  --game-tile-aspect: 1.1;
  --game-tile-icon-size: 56px;
  --game-tile-icon-font: 46px;
  --game-tile-name-font: var(--fs-md);
  --game-tile-content-gap: 8px;
  --sheet-radius: 28px;
  --sheet-padding-x: 20px;
  --sheet-padding-top: 24px;
  --sheet-max-height: 82vh;
  --sheet-bg: var(--back-800);
  --gm-btn-padding-y: 16px;
  --gm-btn-padding-x: 16px;
  --gm-btn-gap: 14px;
  --gm-btn-radius: var(--r-lg);
  --gm-btn-margin-bottom: 10px;
  --gm-btn-icon-size: 52px;
  --gm-btn-icon-radius: var(--r-md);
  --gm-btn-icon-font: 24px;
  --gm-btn-title-font: 18px;
  --gm-btn-sub-font: 13px;
  --gm-btn-arrow-font: 22px;
  --gm-chip-padding-y: 12px;
  --gm-chip-padding-x: 8px;
  --gm-chip-gap: 6px;
  --gm-chip-radius: var(--r-md);
  --gm-chip-font: 13px;
  --gm-chip-icon-font: 18px;
  --gm-chips-grid-gap: 8px;
  --gm-chips-margin-top: 14px;
  --menu-close-size: 44px;
  --menu-close-font: 20px;
  --menu-header-icon-size: 48px;
  --menu-header-icon-radius: var(--r-md);
  --menu-header-icon-font: 22px;
  --menu-header-title-font: 24px;
  --menu-header-gap: 12px;
  --menu-header-margin: 20px;
  --bot-card-avatar-size: 60px;
  --bot-card-avatar-border: 3px;
  --bot-card-name-font: var(--fs-sm);
  --bot-card-sub-font: var(--fs-xs);
  --bot-card-accent-height: 3px;
  --bot-grid-gap: 12px;
  --bot-back-btn-size: 46px;
  --bot-back-btn-font: 18px;
  --bot-title-font: 20px;
}

/* ── Org hues: an organisation picks one of the eleven sticker colour
      families (tools/build-gicons.mjs), never a free hex. Face, lip, and the
      ink printed on the face (white only where it holds 3:1). ──────────── */
:root {
  --hue-gold: #FFC531;   --hue-gold-edge: #D18D08;   --hue-gold-ink: #7A4E00;
  --hue-silver: #E9E6F1; --hue-silver-edge: #9B94AE; --hue-silver-ink: #1A1722;
  --hue-red: #FF4D5E;    --hue-red-edge: #C2203A;    --hue-red-ink: #FFFFFF;
  --hue-green: #2ED47A;  --hue-green-edge: #169150;  --hue-green-ink: #0D4A2A;
  --hue-blue: #3B86FF;   --hue-blue-edge: #1F5BC4;   --hue-blue-ink: #FFFFFF;
  --hue-purple: #9C6DFF; --hue-purple-edge: #5F33C2; --hue-purple-ink: #FFFFFF;
  --hue-orange: #FF8A34; --hue-orange-edge: #C75E14; --hue-orange-ink: #5C2A05;
  --hue-cream: #FFFFFF;  --hue-cream-edge: #BFB8CE;  --hue-cream-ink: #1A1722;
  --hue-teal: #2BD4C4;   --hue-teal-edge: #14968A;   --hue-teal-ink: #0B4B46;
  --hue-wood: #FF7A59;   --hue-wood-edge: #C24A2E;   --hue-wood-ink: #5E1F0F;
  --hue-pink: #FF6FB1;   --hue-pink-edge: #C23A7C;   --hue-pink-ink: #5E1235;
}

/* ── Game hues: every game's one colour, in four parts, so anything that
      takes a game's colour (the hand's glow, sparks, the VS halves, a
      result's tint) reads it from tokens and a new game inherits all of it.
        --hue-<key>        the face (the game's one colour)
        --hue-<key>-edge   the lip under the face
        --hue-<key>-ink    text printed on the face (3:1 or more, display size)
        --hue-<key>-glow   the face as a soft rgba, for glows and light pools
      Inside [data-game="<key>"] they are also --hue, --hue-edge, --hue-ink and
      --hue-glow, so components read one name whatever the game.
      A new game: claim a spare below (or add four tokens of its own) and add
      one [data-game] line. An unknown key already falls back to spare 1.
      The --<key>-primary / -secondary tokens above stay as they are. ───── */
:root {
  --hue-chess: var(--chess-primary);           --hue-chess-edge: var(--chess-secondary);
  --hue-chess-ink: #FFFFFF;                    --hue-chess-glow: rgba(32, 168, 93, 0.38);
  --hue-ludo: var(--ludo-primary);             --hue-ludo-edge: var(--ludo-secondary);
  --hue-ludo-ink: #FFFFFF;                     --hue-ludo-glow: rgba(224, 106, 22, 0.38);
  --hue-domino: var(--domino-primary);         --hue-domino-edge: var(--domino-secondary);
  --hue-domino-ink: #FFFFFF;                   --hue-domino-glow: rgba(140, 92, 250, 0.38);
  --hue-backgammon: var(--backgammon-primary); --hue-backgammon-edge: var(--backgammon-secondary);
  --hue-backgammon-ink: #FFFFFF;               --hue-backgammon-glow: rgba(255, 68, 88, 0.38);

  /* Four spares for the next games. None is a signal colour (gold is coins,
     the bright green is "win"), and each stands apart from the four above. */
  --hue-spare-1: #3B86FF;      --hue-spare-1-edge: #1F5BC4;   /* blue */
  --hue-spare-1-ink: #FFFFFF;  --hue-spare-1-glow: rgba(59, 134, 255, 0.38);
  --hue-spare-2: #12A594;      --hue-spare-2-edge: #0B7568;   /* teal */
  --hue-spare-2-ink: #FFFFFF;  --hue-spare-2-glow: rgba(18, 165, 148, 0.38);
  --hue-spare-3: #F2559A;      --hue-spare-3-edge: #B8306F;   /* pink */
  --hue-spare-3-ink: #FFFFFF;  --hue-spare-3-glow: rgba(242, 85, 154, 0.38);
  --hue-spare-4: #7CC530;      --hue-spare-4-edge: #4E8A16;   /* lime: dark ink */
  --hue-spare-4-ink: #1E3A06;  --hue-spare-4-glow: rgba(124, 197, 48, 0.38);
}
[data-game] { --hue: var(--hue-spare-1); --hue-edge: var(--hue-spare-1-edge); --hue-ink: var(--hue-spare-1-ink); --hue-glow: var(--hue-spare-1-glow); }
[data-game="chess"] { --hue: var(--hue-chess); --hue-edge: var(--hue-chess-edge); --hue-ink: var(--hue-chess-ink); --hue-glow: var(--hue-chess-glow); }
[data-game="ludo"] { --hue: var(--hue-ludo); --hue-edge: var(--hue-ludo-edge); --hue-ink: var(--hue-ludo-ink); --hue-glow: var(--hue-ludo-glow); }
[data-game="domino"] { --hue: var(--hue-domino); --hue-edge: var(--hue-domino-edge); --hue-ink: var(--hue-domino-ink); --hue-glow: var(--hue-domino-glow); }
[data-game="backgammon"] { --hue: var(--hue-backgammon); --hue-edge: var(--hue-backgammon-edge); --hue-ink: var(--hue-backgammon-ink); --hue-glow: var(--hue-backgammon-glow); }