:root {
  /**********************/
  /****** FONTS *********/
  /**********************/
  --font-playpen: "Playpen Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-georgia: Georgia, "Times New Roman", Times, serif;
  --font-courier: "Courier New", Courier, monospace;
  --font-lcd: "LCD", monospace;

  /**********************/
  /***** COLORS *********/
  /**********************/
  --globalGold: rgb(255, 226, 9);
  --globalGoldDark: rgb(140, 120, 77); /* Darker version of globalGold */
  --globalYellowPale: #fff8c6; /* Pale yellow highlights (name rows, soft fills) */
  --bronzeOutline: rgb(180, 160, 7); /* Darker version of globalGold */
  /* Scoring colors — green correct / red wrong */
  --globalGreen: #2e9c31;
  --globalGreenDark: #155017; /* Darker version of globalGreen */
  --globalRed: #dc1a1a;
  --globalRedDark: #8b1010; /* Darker version of globalRed */
  /* Bretts blue */
  --globalBlue: #2c66b6;
  --globalBlueDark: #213c72; /* Darker version of globalBlue */
  --globalBeige: #fff8e6; /* Pale yellow / beige fills (Hint, popups, etc.) */
  /* BACKUP */
  /* --globalGold: rgb(255, 214, 9); */

  /**********************/
  /****** POPUPS ********/
  /**********************/
  /* Shared popup overlay look (outer page + lessons) */
  --universal-popup-overlay-bg: rgba(0, 0, 0, 0.7);
  --universal-popup-content-radius: 12px;
}

/**********************/
/**** FONT FILES ******/
/**********************/
@font-face {
  font-family: "Playpen Sans";
  src: url("/res/fonts/PlaypenSans-Bold.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "LCD";
  src: url("/res/fonts/lcd.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/*
  Self-hosted Noto Sans Devanagari (OFL) — mobile only.
  Desktop keeps Segoe UI / system stack unchanged.
  unicode-range: Devanagari (+ related marks) only; Latin stays on the rest of the stack.
  Real 400/500/600/700 files so iOS does not faux-bold Indic text.
*/
@font-face {
  font-family: "Noto Sans Devanagari";
  font-weight: 400;
  font-display: swap;
  src: url("/res/fonts/NotoSansDevanagari-Regular.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
    U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
  font-family: "Noto Sans Devanagari";
  font-weight: 500;
  font-display: swap;
  src: url("/res/fonts/NotoSansDevanagari-Medium.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
    U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
  font-family: "Noto Sans Devanagari";
  font-weight: 600;
  font-display: swap;
  src: url("/res/fonts/NotoSansDevanagari-SemiBold.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
    U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
  font-family: "Noto Sans Devanagari";
  font-weight: 700;
  font-display: swap;
  src: url("/res/fonts/NotoSansDevanagari-Bold.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
    U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/**********************/
/**** DEFAULT TEXT ****/
/**********************/
html,
body {
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Mobile / touch: use Noto for Devanagari so glyphs center like desktop Segoe */
@media (hover: none), (pointer: coarse) {
  html,
  body {
    font-family: "Noto Sans Devanagari", "Segoe UI", "Helvetica Neue", Helvetica,
      Arial, sans-serif;
  }
}