/*! Khelo Design System v1.0.0 — Mela + Raat
 *  MIT. Fonts are SIL OFL-1.1; ship fonts/OFL-*.txt alongside them.
 *  Generated by tools/build.mjs — edit src/, not this file. */

/* ===== fonts/khelo.css ===== */
/* Khelo webfonts — self-hosted, SIL Open Font License 1.1.
   License texts travel with the binaries: fonts/OFL-*.txt.
   Latin and Devanagari subsets, split by unicode-range so a page that
   never sets Hindi never downloads it. No network requests, ever.

   Rozha One   — the Bollywood poster: a high-contrast Devanagari-first
                 display serif (Indian Type Foundry).
   Yatra One   — the truck panel: lettering with a sign-painter's brush.
   Baloo 2     — the reading voice: rounded, warm, Devanagari-native
                 (Ek Type). Variable, 400–800.

   Paths assume fonts/ sits at the site root. Rewrite these urls if not. */

@font-face {
  font-family: "Rozha One";
  src: url("fonts/RozhaOne-Latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; 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: "Rozha One";
  src: url("fonts/RozhaOne-Devanagari.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
@font-face {
  font-family: "Yatra One";
  src: url("fonts/YatraOne-Latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; 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: "Yatra One";
  src: url("fonts/YatraOne-Devanagari.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
@font-face {
  font-family: "Baloo 2";
  src: url("fonts/Baloo2-Latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; 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: "Baloo 2";
  src: url("fonts/Baloo2-Devanagari.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

/* ===== tokens/shared.css ===== */
/* Khelo — geometry, type and time. Shared by Mela and Raat, so switching
   aesthetic never moves the grid. */

:root, .khelo-mela, .khelo-raat {
  /* Space — a 4px step, generous at the top end. Play needs room. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  /* Corners — round and soft, like a painted panel's rounded frame.
     Never sharp: an inherited Ahimsa law. */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 26px;
  --radius-pill: 999px;

  /* Strokes — chunky, like a sign painter's outline. */
  --stroke: 2px;
  --stroke-bold: 3px;

  /* Faces */
  --font-display: "Rozha One", "Tiro Devanagari Hindi", Georgia, serif;
  --font-sign: "Yatra One", "Rozha One", Georgia, serif;
  --font-body: "Baloo 2", "Nirmala UI", system-ui, sans-serif;

  /* Scale — rem, never px, so text follows the person's own setting. */
  --size-caption: 0.875rem;
  --size-body: 1.125rem;
  --size-lead: 1.3125rem;
  --size-h3: 1.625rem;
  --size-h2: clamp(2rem, 1.4rem + 2.4vw, 2.875rem);
  --size-h1: clamp(2.75rem, 1.6rem + 5vw, 5.25rem);
  --size-poster: clamp(3.25rem, 1.5rem + 8vw, 8rem);

  --leading-tight: 1.05;
  --leading-body: 1.55;

  /* Time. Motion answers a touch and is over before you notice it.
     Every easing ends at exactly 1.0 — no overshoot, no bounce, no wobble.
     Squish is felt in the press, not performed afterwards. */
  --ease-squish: cubic-bezier(0.25, 0.8, 0.3, 1);
  --ease-settle: cubic-bezier(0.2, 0, 0, 1);
  --dur-press: 110ms;
  --dur-settle: 220ms;

  --measure: 64ch;
  --hit: 44px;
}

/* ===== tokens/mela/palette.css ===== */
/* Khelo Mela — raw palette.
   Truck-art color on a warm paper ground: a sunlit fair. Components never
   reach for these directly; they go through semantic.css.
   Each hue: 100 a pale wash, 300 a soft tint, 500 the painted color as it
   appears on a truck panel, 700 a deep shade that holds text on paper. */

.khelo-mela {
  /* Paper and kajal. The ink is aubergine, not black; the paper is cream,
     not white. Khelo inherits Ahimsa's refusal of both extremes. */
  --paper-50:  #fff9ee;
  --paper-100: #fbf0d9;
  --paper-200: #f4e4c4;
  --paper-300: #e8d2a8;
  --kajal-300: #a796ab;
  --kajal-500: #75637f;
  --kajal-700: #4a3a5c;
  --kajal-900: #2a1840;

  /* Genda · marigold */
  --marigold-100: #fae2b2;
  --marigold-300: #f8c662;
  --marigold-500: #f5a300;
  --marigold-700: #a36b10;

  /* Rani · hot pink */
  --rani-100: #f5cac9;
  --rani-300: #e87ba8;
  --rani-500: #d81b7f;
  --rani-700: #91165f;

  /* Firozi · turquoise */
  --firozi-100: #d1e3cf;
  --firozi-300: #7ac8bc;
  --firozi-500: #11a8a4;
  --firozi-700: #156e76;

  /* Tota · parrot green */
  --tota-100: #dce3ba;
  --tota-300: #9cc879;
  --tota-500: #4fa82a;
  --tota-700: #3c6e2a;

  /* Kesar · saffron orange */
  --kesar-100: #f9d8b7;
  --kesar-300: #f5a671;
  --kesar-500: #f06a1c;
  --kesar-700: #9f4721;

  /* Mor · peacock blue */
  --mor-100: #d2d6d2;
  --mor-300: #7da1c2;
  --mor-500: #1660b0;
  --mor-700: #18417d;

  /* Haldi · turmeric yellow */
  --haldi-100: #faeab7;
  --haldi-300: #f9de72;
  --haldi-500: #f7cf1d;
  --haldi-700: #a48622;
}

/* ===== tokens/mela/gradients.css ===== */
/* Khelo Mela — gradients. Each poster band ships with ink measured to
   read on every one of its stops (tools/check-contrast.mjs). Bands are
   duotones, one hue deepening like a screen-printed poster, never a
   rainbow. A band is a large static surface; it never animates. */

.khelo-mela {
  /* The page: noon sun pooling top-left on cream paper. */
  --gradient-canvas: radial-gradient(70% 60% at 10% -10%, #fde9a8 0%, #fde9a800 70%),
                     linear-gradient(170deg, #fdf3df 0%, #fbf0d9 55%, #f7e6c8 100%);

  --band-genda:      linear-gradient(120deg, #f7cf1d 0%, #f5a300 55%, #f08a1c 100%);
  --band-genda-ink:  #2a1840;
  --band-rani:       linear-gradient(120deg, #a6146a 0%, #91165f 100%);
  --band-rani-ink:   #fff9ee;
  --band-firozi:     linear-gradient(120deg, #4fc0b8 0%, #11a8a4 100%);
  --band-firozi-ink: #2a1840;
  --band-mor:        linear-gradient(120deg, #18417d 0%, #1660b0 100%);
  --band-mor-ink:    #fff9ee;
}

/* ===== tokens/mela/semantic.css ===== */
/* Khelo Mela — semantic tokens. The only layer components read.
   Contrast figures are produced by tools/check-contrast.mjs; run it with
   --report to see every pair. */

.khelo-mela {
  color-scheme: light;

  --surface-canvas-flat: var(--paper-100);
  --surface-elevated:    var(--paper-50);
  --surface-sunk:        var(--paper-200);

  --text-heading:   var(--kajal-900);
  --text-body:      var(--kajal-900);
  --text-secondary: var(--kajal-700);
  --text-muted:     var(--kajal-500);   /* non-text: rules, dots, idle glyphs */
  --text-inverse:   var(--paper-50);

  --border-control: var(--kajal-900);   /* the painter's outline */
  --border-soft:    var(--paper-300);   /* decorative separator */
  --focus-ring:     var(--mor-500);

  /* The primary action is a marigold sticker with an ink outline. */
  --accent-primary:    var(--marigold-500);
  --on-primary:        var(--kajal-900);
  /* A second loud voice for "let's go" moments. */
  --accent-play:       var(--rani-700);
  --on-play:           var(--paper-50);
  --accent-secondary:  var(--mor-500);  /* links */
  --accent-calm:       var(--firozi-700);
  --accent-done:       var(--tota-700); /* finished, not "winning" */
  --accent-note:       var(--kesar-700);/* needs a look — never red */

  /* Soft washes for tiles and chips. */
  --wash-genda:  var(--marigold-100);
  --wash-rani:   var(--rani-100);
  --wash-firozi: var(--firozi-100);
  --wash-tota:   var(--tota-100);
  --wash-mor:    var(--mor-100);
  --wash-haldi:  var(--haldi-100);

  --selected-fill: var(--haldi-500);
  --on-selected:   var(--kajal-900);
}

.khelo-mela {
  /* Icon fills. */
  --icon-genda:  var(--marigold-500);
  --icon-kesar:  var(--kesar-500);
  --icon-rani:   var(--rani-500);
  --icon-firozi: var(--firozi-500);
  --icon-tota:   var(--tota-500);
  --icon-mor:    var(--mor-500);
}

/* ===== tokens/mela/elevation.css ===== */
/* Khelo Mela — elevation. Hard offset, zero blur: the shadow of a sticker
   on a truck panel, or a block-printed poster misregistered on purpose.
   Never a blurred drop shadow — those read as "floating", and floating
   things ask to be looked at. */

.khelo-mela {
  --sticker-ink: var(--kajal-900);
  --shadow-sticker-s: 2px 2px 0 var(--sticker-ink);
  --shadow-sticker:   4px 4px 0 var(--sticker-ink);
  --shadow-sticker-l: 6px 6px 0 var(--sticker-ink);
  --shadow-pressed:   1px 1px 0 var(--sticker-ink);

  /* Block lettering for big titles. Kajal letters, a marigold side and
     a burnt-saffron base: hand-painted signboard lettering, as on a
     dhaba or a cinema hoarding.
     The letter face is solid; the extrusion runs down and right, 0.08em
     deep: present, not towering. */
  --block-face: var(--kajal-900);
  --block-side: var(--marigold-500);
  --block-base: var(--kesar-700);
  --shadow-block:
    0.01em 0.01em 0 var(--block-side),
    0.02em 0.02em 0 var(--block-side),
    0.03em 0.03em 0 var(--block-side),
    0.04em 0.04em 0 var(--block-side),
    0.05em 0.05em 0 var(--block-side),
    0.06em 0.06em 0 var(--block-base),
    0.07em 0.07em 0 var(--block-base),
    0.08em 0.08em 0 var(--block-base);
  /* The same block in the ink's own color at low strength, for titles
     set on a poster band, which already carries the color. */
  --shadow-block-quiet:
    0.01em 0.01em 0 color-mix(in srgb, currentColor 14%, transparent),
    0.02em 0.02em 0 color-mix(in srgb, currentColor 14%, transparent),
    0.03em 0.03em 0 color-mix(in srgb, currentColor 14%, transparent),
    0.04em 0.04em 0 color-mix(in srgb, currentColor 14%, transparent),
    0.05em 0.05em 0 color-mix(in srgb, currentColor 14%, transparent);
}

/* ===== tokens/raat/palette.css ===== */
/* Khelo Raat — raw palette.
   The fair after dark: the same truck-art hues, lit from inside like
   strings of bulbs, on a deep neel (indigo) sky. In Raat the ramp reads
   the other way: 100 is a dim wash for a surface, 500 is the glow. */

.khelo-raat {
  /* Night sky and lamplight. Not black; not white. */
  --sky-950: #0c0928;
  --sky-900: #14103a;
  --sky-800: #1e1950;
  --sky-700: #2b2566;
  --lamp-500: #8e86b8;
  --lamp-300: #c9c0e2;
  --lamp-100: #e9e2f4;
  --lamp-50:  #fbefd6;

  /* Genda · marigold */
  --marigold-100: #3e2f3b;
  --marigold-300: #95703c;
  --marigold-500: #ffbe3d;
  --marigold-700: #785a2d;

  /* Rani · hot pink */
  --rani-100: #3e1e4f;
  --rani-300: #953b7b;
  --rani-500: #ff5fb0;
  --rani-700: #782f61;

  /* Firozi · turquoise */
  --firozi-100: #1c3555;
  --firozi-300: #2c828d;
  --firozi-500: #3fe0d0;
  --firozi-700: #22696f;

  /* Tota · parrot green */
  --tota-100: #2b3541;
  --tota-300: #5a824f;
  --tota-500: #93e060;
  --tota-700: #48693d;

  /* Kesar · saffron orange */
  --kesar-100: #3e263d;
  --kesar-300: #955344;
  --kesar-500: #ff8a4c;
  --kesar-700: #784334;

  /* Mor · peacock blue */
  --mor-100: #252d5d;
  --mor-300: #4869a6;
  --mor-500: #72b2ff;
  --mor-700: #395484;

  /* Haldi · turmeric yellow */
  --haldi-100: #3e3643;
  --haldi-300: #958354;
  --haldi-500: #ffe16a;
  --haldi-700: #786a41;
}

/* ===== tokens/raat/gradients.css ===== */
/* Khelo Raat — gradients. Lit posters on a night wall: duotones, never a
   rainbow, each with measured ink. */

.khelo-raat {
  /* The page: deep neel overhead, a warm glow on the horizon where the
     fair is still lit. */
  --gradient-canvas: radial-gradient(90% 45% at 50% 115%, #5a2a6e99 0%, #5a2a6e00 70%),
                     linear-gradient(180deg, #0c0928 0%, #14103a 45%, #1e1950 100%);

  --band-genda:      linear-gradient(120deg, #ffe16a 0%, #ffbe3d 55%, #ff8a4c 100%);
  --band-genda-ink:  #14103a;
  --band-rani:       linear-gradient(120deg, #ff6fb8 0%, #ff5fb0 100%);
  --band-rani-ink:   #14103a;
  --band-firozi:     linear-gradient(120deg, #5ae6d8 0%, #3fe0d0 100%);
  --band-firozi-ink: #14103a;
  --band-mor:        linear-gradient(120deg, #8cc0ff 0%, #72b2ff 100%);
  --band-mor-ink:    #14103a;
}

/* ===== tokens/raat/semantic.css ===== */
/* Khelo Raat — semantic tokens. Same names as Mela, so markup moves
   between the two without a single class changing. */

.khelo-raat {
  color-scheme: dark;

  --surface-canvas-flat: var(--sky-900);
  --surface-elevated:    var(--sky-800);
  --surface-sunk:        var(--sky-950);

  --text-heading:   var(--lamp-50);
  --text-body:      var(--lamp-50);
  --text-secondary: var(--lamp-300);
  --text-muted:     var(--lamp-500);
  --text-inverse:   var(--sky-900);

  --border-control: var(--lamp-300);
  --border-soft:    var(--sky-700);
  --focus-ring:     var(--firozi-500);

  /* Lit from inside: the fills glow and the ink goes dark. */
  --accent-primary:    var(--marigold-500);
  --on-primary:        var(--sky-900);
  --accent-play:       var(--rani-500);
  --on-play:           var(--sky-900);
  --accent-secondary:  var(--mor-500);
  --accent-calm:       var(--firozi-500);
  --accent-done:       var(--tota-500);
  --accent-note:       var(--kesar-500);

  --wash-genda:  var(--marigold-100);
  --wash-rani:   var(--rani-100);
  --wash-firozi: var(--firozi-100);
  --wash-tota:   var(--tota-100);
  --wash-mor:    var(--mor-100);
  --wash-haldi:  var(--haldi-100);

  --selected-fill: var(--haldi-500);
  --on-selected:   var(--sky-900);
}

.khelo-raat {
  /* Icon fills. */
  --icon-genda:  var(--marigold-500);
  --icon-kesar:  var(--kesar-500);
  --icon-rani:   var(--rani-500);
  --icon-firozi: var(--firozi-500);
  --icon-tota:   var(--tota-500);
  --icon-mor:    var(--mor-500);
}

/* ===== tokens/raat/elevation.css ===== */
/* Khelo Raat — elevation. A dark shadow vanishes on a dark sky, so Raat's
   offset is colored: the pink echo of a neon sign on the wall behind it. */

.khelo-raat {
  --sticker-ink: var(--rani-300);
  --shadow-sticker-s: 2px 2px 0 var(--sticker-ink);
  --shadow-sticker:   4px 4px 0 var(--sticker-ink);
  --shadow-sticker-l: 6px 6px 0 var(--sticker-ink);
  --shadow-pressed:   1px 1px 0 var(--sticker-ink);

  /* Block lettering for big titles. Lamplit letters with a pink side:
     the same block, as a lit sign.
     The letter face is solid; the extrusion runs down and right, 0.08em
     deep: present, not towering. */
  --block-face: var(--lamp-50);
  --block-side: var(--rani-500);
  --block-base: var(--rani-700);
  --shadow-block:
    0.01em 0.01em 0 var(--block-side),
    0.02em 0.02em 0 var(--block-side),
    0.03em 0.03em 0 var(--block-side),
    0.04em 0.04em 0 var(--block-side),
    0.05em 0.05em 0 var(--block-side),
    0.06em 0.06em 0 var(--block-base),
    0.07em 0.07em 0 var(--block-base),
    0.08em 0.08em 0 var(--block-base);
  /* The same block in the ink's own color at low strength, for titles
     set on a poster band, which already carries the color. */
  --shadow-block-quiet:
    0.01em 0.01em 0 color-mix(in srgb, currentColor 14%, transparent),
    0.02em 0.02em 0 color-mix(in srgb, currentColor 14%, transparent),
    0.03em 0.03em 0 color-mix(in srgb, currentColor 14%, transparent),
    0.04em 0.04em 0 color-mix(in srgb, currentColor 14%, transparent),
    0.05em 0.05em 0 color-mix(in srgb, currentColor 14%, transparent);
}

/* ===== base.css ===== */
/* Khelo — base. The smallest reset plus the accessibility floor every
   component inherits. Inherited, nearly unchanged, from Ahimsa. */

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

/* Never a px font-size on :root: the scale is rem so a person's own
   browser setting still works. */
html { -webkit-text-size-adjust: 100%; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--surface-canvas-flat);
}

body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input, textarea, select { font: inherit; color: inherit; }
/* hidden means hidden, whatever display a component sets. */
[hidden] { display: none !important; }
strong { font-weight: 700; }
button, [role="button"], [role="checkbox"], [role="switch"] { touch-action: manipulation; }

/* Focus: visible, always, on every focusable thing. Thick, because
   everything else here is thick. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
:where(a, button, input, textarea, select, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

.kh-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The page ground: sun on paper in Mela, a lit horizon in Raat. */
.kh-canvas {
  background-color: var(--surface-canvas-flat);
  background-image: var(--gradient-canvas);
  background-attachment: fixed;
}

/* Reduced motion removes the squish outright. Nothing in Khelo is
   load-bearing on movement, so nothing is lost but the wiggle. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Forced colors: hand the surface to the person's own palette. Sticker
   shadows become real borders; poster bands become Canvas. */
@media (forced-colors: active) {
  .kh-btn, .kh-card, .kh-tile, .kh-sticker, .kh-notice, .kh-band, .kh-panel {
    background: Canvas !important;
    color: CanvasText !important;
    border: 2px solid CanvasText !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .kh-btn { background: ButtonFace !important; color: ButtonText !important; border-color: ButtonText !important; }
  .kh-tile[aria-pressed="true"], .kh-chip[aria-pressed="true"] { background: Highlight !important; color: HighlightText !important; }
  .kh-poster, .kh-block { text-shadow: none !important; }
  :focus-visible { outline: 3px solid Highlight !important; }
}

/* ===== type.css ===== */
/* Khelo — type. One set of faces for both aesthetics.

   The poster voice (Rozha One) is for a few words at a time, large, in
   block lettering: a solid face with a painted extrusion. The
   sign voice (Yatra One) is for labels that want a painted hand. Everything
   you actually read is Baloo 2. A face that shouts is a face you read
   three words of; that is the deal. */

.kh-poster {
  font-family: var(--font-display);
  font-size: var(--size-poster);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--block-face);
  text-shadow: var(--shadow-block);
  margin: 0;
  /* Room for the extrusion, so it never collides with the next line. */
  padding-bottom: 0.08em;
  text-wrap: balance;
}
.kh-h1, .kh-h2, .kh-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text-heading);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}
.kh-h1 { font-size: var(--size-h1); }
/* Any heading can take the block. Keep it to one per view. */
.kh-block { color: var(--block-face); text-shadow: var(--shadow-block); padding-bottom: 0.08em; }
.kh-h2 { font-size: var(--size-h2); }
.kh-h3 { font-size: var(--size-h3); line-height: 1.15; }

.kh-sign {
  font-family: var(--font-sign);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.kh-lead {
  font-size: var(--size-lead);
  line-height: 1.45;
  color: var(--text-body);
  max-width: var(--measure);
}
.kh-body { font-size: var(--size-body); max-width: var(--measure); }
.kh-secondary { color: var(--text-secondary); }
.kh-caption { font-size: var(--size-caption); color: var(--text-secondary); }
.kh-caps {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.kh-poster:lang(hi), .kh-h1:lang(hi), .kh-h2:lang(hi) { line-height: 1.15; }

/* ===== patterns/patterns.css ===== */
/* Khelo — patterns. Borders from Indian ornament, not from a party shop:

   kangura  the stepped temple border woven along a Kanjeevaram sari's
            edge and painted along a truck's roofline
   bel      the flowering vine that climbs the side panels of a truck
   toran    mango leaves and marigolds strung over a doorway
   lights   bulbs on a wire, for Raat
   dots     the grid a rangoli is drawn on

   All of them are static SVG, inlined so nothing loads over a network.
   They decorate edges and empty grounds. They never sit behind body text
   and they never move. A pattern that twinkles is asking for attention. */

.khelo-mela {
  --pattern-kangura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Crect y='12' width='32' height='4' fill='%2391165f'/%3E%3Cpath d='M4 12V9h4V6h4V3h8v3h4v3h4v3z' fill='%23f5a300' stroke='%232a1840' stroke-width='1'/%3E%3Ccircle cx='16' cy='7.5' r='1.6' fill='%2391165f'/%3E%3C/svg%3E");
  --pattern-bel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='20' viewBox='0 0 48 20'%3E%3Cpath d='M0 10C12 0 12 0 24 10S36 20 48 10' fill='none' stroke='%233c6e2a' stroke-width='1.6'/%3E%3Cellipse cx='15' cy='9' rx='4' ry='1.8' transform='rotate(35 15 9)' fill='%234fa82a'/%3E%3Cellipse cx='8' cy='8.5' rx='3.4' ry='1.6' transform='rotate(-35 8 8.5)' fill='%234fa82a'/%3E%3Cg fill='%23d81b7f'%3E%3Ccircle cx='36' cy='7' r='1.7'/%3E%3Ccircle cx='38.4' cy='9.4' r='1.7'/%3E%3Ccircle cx='36' cy='11.8' r='1.7'/%3E%3Ccircle cx='33.6' cy='9.4' r='1.7'/%3E%3C/g%3E%3Ccircle cx='36' cy='9.4' r='1.3' fill='%23f5a300'/%3E%3C/svg%3E");
  --pattern-toran: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='28' viewBox='0 0 32 28'%3E%3Cpath d='M0 2H32' stroke='%234a3a5c' stroke-width='1.5'/%3E%3Cpath d='M8 2C3 9 4 18 8 25C12 18 13 9 8 2Z' fill='%234fa82a' stroke='%233c6e2a'/%3E%3Cpath d='M8 4V22' stroke='%233c6e2a' stroke-width='.8'/%3E%3Ccircle cx='24' cy='8.5' r='5.5' fill='%23f5a300' stroke='%239f4721'/%3E%3Ccircle cx='24' cy='8.5' r='2.2' fill='%23f06a1c'/%3E%3Ccircle cx='24' cy='17' r='1.6' fill='%23d81b7f'/%3E%3C/svg%3E");
  --pattern-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='1.6' fill='%23e8d2a8'/%3E%3C/svg%3E");
  --pattern-lights: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='24' viewBox='0 0 44 24'%3E%3Cpath d='M0 3 Q22 14 44 3' fill='none' stroke='%234a3a5c' stroke-width='1.2'/%3E%3Ccircle cx='22' cy='14' r='4' fill='%23f7cf1d' stroke='%232a1840' stroke-width='1'/%3E%3C/svg%3E");
}

.khelo-raat {
  --pattern-kangura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Crect y='12' width='32' height='4' fill='%23ff5fb0'/%3E%3Cpath d='M4 12V9h4V6h4V3h8v3h4v3h4v3z' fill='%23ffbe3d' stroke='%230c0928' stroke-width='1'/%3E%3Ccircle cx='16' cy='7.5' r='1.6' fill='%23782f61'/%3E%3C/svg%3E");
  --pattern-bel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='20' viewBox='0 0 48 20'%3E%3Cpath d='M0 10C12 0 12 0 24 10S36 20 48 10' fill='none' stroke='%235a824f' stroke-width='1.6'/%3E%3Cellipse cx='15' cy='9' rx='4' ry='1.8' transform='rotate(35 15 9)' fill='%2393e060'/%3E%3Cellipse cx='8' cy='8.5' rx='3.4' ry='1.6' transform='rotate(-35 8 8.5)' fill='%2393e060'/%3E%3Cg fill='%23ff5fb0'%3E%3Ccircle cx='36' cy='7' r='1.7'/%3E%3Ccircle cx='38.4' cy='9.4' r='1.7'/%3E%3Ccircle cx='36' cy='11.8' r='1.7'/%3E%3Ccircle cx='33.6' cy='9.4' r='1.7'/%3E%3C/g%3E%3Ccircle cx='36' cy='9.4' r='1.3' fill='%23ffbe3d'/%3E%3C/svg%3E");
  --pattern-toran: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='28' viewBox='0 0 32 28'%3E%3Cpath d='M0 2H32' stroke='%238e86b8' stroke-width='1.5'/%3E%3Cpath d='M8 2C3 9 4 18 8 25C12 18 13 9 8 2Z' fill='%2393e060' stroke='%2348693d'/%3E%3Cpath d='M8 4V22' stroke='%2348693d' stroke-width='.8'/%3E%3Ccircle cx='24' cy='8.5' r='5.5' fill='%23ffbe3d' stroke='%23784334'/%3E%3Ccircle cx='24' cy='8.5' r='2.2' fill='%23ff8a4c'/%3E%3Ccircle cx='24' cy='17' r='1.6' fill='%23ff5fb0'/%3E%3C/svg%3E");
  --pattern-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='1.4' fill='%232b2566'/%3E%3C/svg%3E");
  /* Bulbs on a wire. The glow is painted, not animated. */
  --pattern-lights: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='24' viewBox='0 0 44 24'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23ffe16a' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ffe16a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 3 Q22 14 44 3' fill='none' stroke='%238e86b8' stroke-width='1.2'/%3E%3Ccircle cx='22' cy='14' r='10' fill='url(%23g)'/%3E%3Ccircle cx='22' cy='14' r='3.6' fill='%23ffe16a'/%3E%3C/svg%3E");
}

/* Strips. Decorative: aria-hidden in markup, gone in forced colors. */
.kh-kangura, .kh-bel, .kh-toran, .kh-lights {
  display: block;
  background-repeat: repeat-x;
  background-position: left top;
}
.kh-kangura { height: 22px; background-image: var(--pattern-kangura); background-size: 44px 22px; }
.kh-kangura--down { transform: scaleY(-1); }
.kh-bel     { height: 20px; background-image: var(--pattern-bel); }
.kh-toran   { height: 28px; background-image: var(--pattern-toran); }
.kh-lights  { height: 24px; background-image: var(--pattern-lights); }
.kh-dots    { background-image: var(--pattern-dots); }

@media (forced-colors: active) {
  .kh-kangura, .kh-bel, .kh-toran, .kh-lights { display: none; }
  .kh-dots { background-image: none; }
}

/* ===== components/actions.css ===== */
/* Khelo — actions.

   A button is a sticker: an ink outline and a hard shadow. Pressing it
   pushes the sticker into the shadow — the squish. That is the only
   motion, it lasts a tenth of a second, and it ends at rest. */

.kh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--hit);
  padding: 0.55rem 1.35rem 0.5rem;
  border: var(--stroke-bold) solid var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--accent-primary);
  color: var(--on-primary);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sticker);
  transition: transform var(--dur-press) var(--ease-squish),
              box-shadow var(--dur-press) var(--ease-squish);
}
.kh-btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-sticker-l); }
.kh-btn:active { transform: translate(3px, 3px); box-shadow: var(--shadow-pressed); }
.kh-btn:disabled, .kh-btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--surface-sunk);
  color: var(--text-secondary);
  box-shadow: none;
  transform: none;
  border-style: dashed;
}

.kh-btn--play  { background: var(--accent-play); color: var(--on-play); }
.kh-btn--ghost { background: var(--surface-elevated); color: var(--text-body); }
.kh-btn--sm { min-height: 36px; padding: 0.3rem 0.9rem 0.25rem; font-size: 0.9375rem; box-shadow: var(--shadow-sticker-s); }
.kh-btn--sm:hover { box-shadow: var(--shadow-sticker); }
.kh-btn--lg { min-height: 56px; padding: 0.75rem 1.9rem 0.7rem; font-size: 1.25rem; box-shadow: var(--shadow-sticker-l); }

/* A small control's painted size may be under 44px; its hit area is not. */
.kh-btn--sm { position: relative; }
.kh-btn--sm::after { content: ''; position: absolute; inset: -5px -2px; }

.kh-link {
  color: var(--accent-secondary);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.kh-link:hover { text-decoration-style: wavy; }
.kh-link--quiet { color: inherit; text-decoration: none; }
.kh-link--quiet:hover, .kh-link--quiet[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-style: wavy; text-underline-offset: 0.25em; }

/* A chip: a choice among a few. aria-pressed carries the state; color
   alone never does — the selected chip also gains its outline weight. */
.kh-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 36px;
  padding: 0.25rem 0.95rem 0.2rem;
  border: var(--stroke) solid var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--surface-elevated);
  color: var(--text-body);
  font-weight: 700;
  cursor: pointer;
  position: relative;
  transition: transform var(--dur-press) var(--ease-squish);
}
.kh-chip::after { content: ''; position: absolute; inset: -5px -2px; }
.kh-chip:active { transform: translate(1px, 1px); }
.kh-chip[aria-pressed="true"] {
  background: var(--selected-fill);
  color: var(--on-selected);
  border-width: var(--stroke-bold);
  box-shadow: var(--shadow-sticker-s);
}

/* ===== components/surfaces.css ===== */
/* Khelo — surfaces. */

.kh-card {
  background: var(--surface-elevated);
  color: var(--text-body);
  border: var(--stroke-bold) solid var(--border-control);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sticker);
  padding: var(--space-5);
}
.kh-card--flat { box-shadow: none; border-width: var(--stroke); }

/* Poster bands: a large static field of color carrying its own measured
   ink. Put a headline on one; never a paragraph you expect people to read
   for long. */
.kh-band {
  border-radius: var(--radius-l);
  border: var(--stroke-bold) solid var(--border-control);
  padding: var(--space-6);
  box-shadow: var(--shadow-sticker-l);
}
.kh-band--genda  { background: var(--band-genda);  color: var(--band-genda-ink);  --text-heading: var(--band-genda-ink);  --text-body: var(--band-genda-ink);  --text-secondary: var(--band-genda-ink); }
.kh-band--rani   { background: var(--band-rani);   color: var(--band-rani-ink);   --text-heading: var(--band-rani-ink);   --text-body: var(--band-rani-ink);   --text-secondary: var(--band-rani-ink); }
.kh-band--firozi { background: var(--band-firozi); color: var(--band-firozi-ink); --text-heading: var(--band-firozi-ink); --text-body: var(--band-firozi-ink); --text-secondary: var(--band-firozi-ink); }
.kh-band--mor    { background: var(--band-mor);    color: var(--band-mor-ink);    --text-heading: var(--band-mor-ink);    --text-body: var(--band-mor-ink);    --text-secondary: var(--band-mor-ink); }
/* The block's colors are tuned for the page ground. On a band the
   letters take the band's ink and a quiet block in the same ink. */
.kh-band .kh-poster, .kh-band .kh-block { color: inherit; text-shadow: var(--shadow-block-quiet); }

/* A truck panel: a card framed top and bottom in the kangura border. */
.kh-panel {
  position: relative;
  background: var(--surface-elevated);
  border: var(--stroke-bold) solid var(--border-control);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-sticker);
}
.kh-panel::before, .kh-panel::after {
  content: ''; display: block; height: 16px; flex: none;
  background-image: var(--pattern-kangura); background-repeat: repeat-x;
  background-size: 32px 16px;
}
.kh-panel::after { transform: scaleY(-1); }
.kh-panel { display: flex; flex-direction: column; }
.kh-panel__body { padding: var(--space-5); flex: 1 1 auto; }

/* A sticker: a label slapped on at an angle. The tilt is static. */
.kh-sticker {
  display: inline-block;
  padding: 0.2rem 0.75rem 0.1rem;
  border: var(--stroke) solid var(--border-control);
  border-radius: var(--radius-s);
  background: var(--wash-haldi);
  color: var(--text-body);
  font-family: var(--font-sign);
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: var(--shadow-sticker-s);
  transform: rotate(-1.5deg);
}
.kh-sticker--rani   { background: var(--wash-rani); }
.kh-sticker--firozi { background: var(--wash-firozi); transform: rotate(1deg); }
.kh-sticker--tota   { background: var(--wash-tota); transform: rotate(-1deg); }
.kh-sticker--mor    { background: var(--wash-mor); transform: rotate(1deg); }

/* A tile: one big choice. Toggle with aria-pressed. */
.kh-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  min-height: 7.5rem;
  padding: var(--space-4);
  text-align: left;
  border: var(--stroke-bold) solid var(--border-control);
  border-radius: var(--radius-m);
  background: var(--tile-wash, var(--wash-genda));
  color: var(--text-body);
  cursor: pointer;
  box-shadow: var(--shadow-sticker-s);
  transition: transform var(--dur-press) var(--ease-squish),
              box-shadow var(--dur-press) var(--ease-squish);
}
.kh-tile:hover { box-shadow: var(--shadow-sticker); transform: translate(-1px, -1px); }
.kh-tile:active { transform: translate(2px, 2px); box-shadow: var(--shadow-pressed); }
.kh-tile[aria-pressed="true"] {
  background: var(--selected-fill);
  color: var(--on-selected);
  box-shadow: var(--shadow-sticker);
}
.kh-tile[aria-pressed="true"] .kh-tile__mark::before {
  /* A drawn check, so the state reads without color. */
  content: ''; display: inline-block; width: 0.95em; height: 0.95em;
  margin-right: 0.3em; vertical-align: -0.12em;
  background: currentColor;
  -webkit-mask: var(--mask-check) center / contain no-repeat;
  mask: var(--mask-check) center / contain no-repeat;
}
.kh-tile__glyph { --icon-size: 2.75rem; line-height: 0; }
.kh-tile__title { font-family: var(--font-sign); font-size: 1.25rem; line-height: 1.2; }
.kh-tile__mark { font-size: var(--size-caption); font-weight: 700; }
.kh-tile--rani   { --tile-wash: var(--wash-rani); }
.kh-tile--firozi { --tile-wash: var(--wash-firozi); }
.kh-tile--tota   { --tile-wash: var(--wash-tota); }
.kh-tile--mor    { --tile-wash: var(--wash-mor); }

/* ===== components/forms.css ===== */
/* Khelo — forms. Thick edges, big targets, warm words. */

.kh-field { display: grid; gap: var(--space-2); }
.kh-label { font-weight: 800; color: var(--text-body); }
.kh-hint  { font-size: var(--size-caption); color: var(--text-secondary); }

.kh-input {
  min-height: 48px;
  width: 100%;
  padding: 0.6rem 0.95rem;
  border: var(--stroke-bold) solid var(--border-control);
  border-radius: var(--radius-m);
  background: var(--surface-elevated);
  color: var(--text-body);
  box-shadow: inset 3px 3px 0 var(--surface-sunk);
}
.kh-input::placeholder { color: var(--text-secondary); opacity: 0.8; }
/* Something to look at, never an accusation: no red, no shaking. */
.kh-input[aria-invalid="true"] { border-style: dashed; border-color: var(--accent-note); }

/* A switch. A real checkbox underneath, so it is a checkbox to everyone. */
.kh-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-weight: 700; min-height: var(--hit); }
.kh-switch input {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 3.25rem; height: 1.85rem; flex: none;
  border: var(--stroke-bold) solid var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--surface-sunk);
  position: relative; cursor: pointer;
  transition: background-color var(--dur-settle) var(--ease-settle);
}
.kh-switch input::before {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--border-control);
  transition: transform var(--dur-settle) var(--ease-settle);
}
.kh-switch input:checked { background: var(--accent-done); }
.kh-switch input:checked::before { transform: translateX(1.4rem); background: var(--surface-elevated); }

/* ===== components/feedback.css ===== */
/* Khelo — feedback, and the shape of an ending.

   There is no toast, no popup, no confetti. A notice sits in the flow
   where the person caused it. A finite activity says so up front and
   says so again at the end — "that's all" is a feature. */

.kh-notice {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4);
  border: var(--stroke) solid var(--border-control);
  border-radius: var(--radius-m);
  background: var(--wash-mor);
  color: var(--text-body);
}
.kh-notice--done { background: var(--wash-tota); }
.kh-notice--note { background: var(--wash-genda); border-style: dashed; }
.kh-notice__glyph { --icon-size: 2rem; line-height: 0; flex: none; }
.kh-notice__actions { margin-left: auto; display: flex; gap: var(--space-2); flex: none; }

/* Progress through a FINITE set: "3 of 8". Never a streak, never a
   meter that refills. Each step is a dot; the total is always visible. */
.kh-steps { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.kh-steps li {
  width: 0.95rem; height: 0.95rem; border-radius: 50%;
  border: var(--stroke) solid var(--border-control);
  background: transparent;
}
.kh-steps li[data-done] { background: var(--accent-done); }
.kh-steps li[aria-current="step"] { background: var(--selected-fill); transform: scale(1.2); }
.kh-steps__label { margin-left: var(--space-2); font-weight: 700; color: var(--text-secondary); }

/* The ending. Offered as rest, not loss: no "come back tomorrow", no
   "don't lose your progress". */
.kh-end {
  text-align: center;
  padding: var(--space-7) var(--space-5);
  border: var(--stroke-bold) dashed var(--border-control);
  border-radius: var(--radius-l);
  background: var(--surface-sunk);
}
.kh-end__mark { line-height: 0; margin: 0 0 var(--space-3); }

/* ===== components/icons.css ===== */
/* Khelo — icons and illustration.

   Draw it; never use an emoji. An emoji is drawn by someone else's
   platform, looks different on every device, and brings that platform's
   visual voice into yours. Khelo's art is drawn in one hand:

   - a 48-unit grid, an ink outline at 2.5 units, round joins and caps;
   - flat fills from the seven hues, never a gradient inside an icon;
   - motifs from everyday Indian play and life: kite, top, kulhad,
     marigold, lotus, peacock feather, dhol, rangoli;
   - decorative art is aria-hidden; meaning lives in the text beside it.

   The outline is currentColor, so it follows the ink. The fills follow the
   aesthetic: painted colors by day, lamplit ones by night. Files are in
   src/icons/, and are inlined, never loaded as images, so these classes
   reach them. */

:root, .khelo-mela, .khelo-raat {
  --mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M10 25 L20 34 L38 14' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.kh-icon {
  width: var(--icon-size, 1.5em);
  height: var(--icon-size, 1.5em);
  flex: none;
  vertical-align: middle;
  overflow: visible;
}
.kh-icon--s  { --icon-size: 1.15em; }
.kh-icon--l  { --icon-size: 3rem; }
.kh-icon--xl { --icon-size: 5rem; }

.kh-icon .kh-f-genda  { fill: var(--icon-genda); }
.kh-icon .kh-f-kesar  { fill: var(--icon-kesar); }
.kh-icon .kh-f-rani   { fill: var(--icon-rani); }
.kh-icon .kh-f-firozi { fill: var(--icon-firozi); }
.kh-icon .kh-f-tota   { fill: var(--icon-tota); }
.kh-icon .kh-f-mor    { fill: var(--icon-mor); }

/* In forced colors the fills drop away and the line drawing remains. */
@media (forced-colors: active) {
  .kh-icon [class^="kh-f-"] { fill: Canvas; }
}