/* ==========================================================================
   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;
}