/* ============================================================
   হাতেখড়ি (Hatekhori) public stylesheet
   Toy-block UI for children aged 3 to 7 and their parents.
   Tokens first (DESIGN.md section 2, verbatim), then the crayon
   hook, base, shared components, landing, in-app screens, motion.
   Every custom property carries the --hkr- prefix.
   ============================================================ */

:root {
  /* PRIMARY: sky. Buttons, links, focus, active tab, the brand mark. */
  --hkr-sky-50:  #F2F8FF;
  --hkr-sky-100: #E3F1FE;
  --hkr-sky-300: #7CC0F8;
  --hkr-sky-400: #3FA3F5;
  --hkr-sky-500: #198CF0;
  --hkr-sky-600: #1272CC;
  --hkr-sky-700: #0C58A0;
  --hkr-sky-900: #06407A;

  /* SECONDARY: sun. Stars, the today card, the H1 crayon underline, the hero sun. Never a button. */
  --hkr-sun-100: #FFF6CC;
  --hkr-sun-300: #FFE566;
  --hkr-sun-400: #FFDD33;
  --hkr-sun-500: #FFD60A;
  --hkr-sun-600: #E6B800;
  --hkr-sun-700: #B38F00;

  /* CRAYONS: one per module. Block faces, edges, tints, slot fills. Never a button, never a link. */
  --hkr-tang-100: #FFE9D9;
  --hkr-tang-400: #FF9440;
  --hkr-tang-500: #FF7A1A;
  --hkr-tang-700: #B84E05;

  --hkr-leaf-100: #E4F7E1;
  --hkr-leaf-200: #C6EFC0;
  --hkr-leaf-400: #6BD65F;
  --hkr-leaf-500: #46C83A;
  --hkr-leaf-600: #2FA824;
  --hkr-leaf-700: #237F1B;

  --hkr-orchid-100: #F7E4F9;
  --hkr-orchid-400: #D25EDD;
  --hkr-orchid-500: #C43FD1;
  --hkr-orchid-600: #A42FB0;
  --hkr-orchid-700: #7E2288;

  /* The fourth module owns a stripe, not a hue: four hard stops, no blend. */
  --hkr-rainbow: linear-gradient(90deg,
      var(--hkr-tang-500) 0 25%, var(--hkr-sun-500) 25% 50%,
      var(--hkr-leaf-500) 50% 75%, var(--hkr-sky-500) 75% 100%);

  /* INK: blue-black, so text and shadows sit in the sky family. */
  --hkr-ink-900: #1D2433;
  --hkr-ink-700: #3B4457;
  --hkr-ink-600: #525B6E;
  --hkr-ink-500: #6B7486;
  --hkr-ink-300: #B9C0CD;
  --hkr-ink-200: #D6DBE4;
  --hkr-ink-100: #ECEFF4;
  --hkr-shadow-rgb: 29, 36, 51;

  /* PAPER and SURFACE: cream ground, white objects. */
  --hkr-paper:    #FBF6EA;
  --hkr-surface:  #FFFFFF;
  --hkr-sand-100: #F3EEE2;
  --hkr-sand-300: #D9D0BC;
  --hkr-sand-700: #8A7B5E;

  /* SEMANTIC */
  --hkr-success:     var(--hkr-leaf-700);
  --hkr-success-100: var(--hkr-leaf-100);
  --hkr-warn-100:    #FFF3DF;
  --hkr-warn-500:    #F5A524;
  --hkr-warn-700:    #7A4D00;
  --hkr-danger-100:  #FDE4E4;
  --hkr-danger-500:  #F23D3D;
  --hkr-danger-700:  #B01C1C;
  --hkr-danger-900:  #7A1010;

  /* Per-object crayon locals. Components read these; [data-cr] sets them (section 4.0). */
  --hkr-cr-100: var(--hkr-sky-100);
  --hkr-cr-400: var(--hkr-sky-400);
  --hkr-cr-500: var(--hkr-sky-500);
  --hkr-cr-700: var(--hkr-sky-700);
  --hkr-cr-ink: var(--hkr-ink-900);
  --hkr-edge-color: var(--hkr-sky-900);

  /* RADIUS: five steps. 50% is allowed on the speaker button and star badges only. */
  --hkr-r-1: 6px;
  --hkr-r-2: 14px;
  --hkr-r-3: 20px;
  --hkr-r-4: 28px;
  --hkr-r-5: 40px;

  /* SHADOWS: the toy-block silhouette. A solid vertical bottom face plus an ink-tinted soft ground. Offsets are vertical only. */
  --hkr-edge:         0 6px 0 var(--hkr-edge-color);
  --hkr-edge-sm:      0 4px 0 var(--hkr-edge-color);
  --hkr-edge-pressed: 0 2px 0 var(--hkr-edge-color);
  --hkr-ground:       0 10px 18px -8px rgba(29, 36, 51, 0.28);
  --hkr-ground-lg:    0 16px 28px -14px rgba(29, 36, 51, 0.22);
  --hkr-ground-sm:    0 4px 8px -6px rgba(29, 36, 51, 0.20);
  --hkr-gloss:        inset 0 2px 0 rgba(255, 255, 255, 0.45);
  --hkr-gloss-hover:  inset 0 2px 0 rgba(255, 255, 255, 0.62);
  --hkr-ledge-card:   0 4px 0 var(--hkr-ink-200);
  --hkr-focus:        0 0 0 3px var(--hkr-surface), 0 0 0 6px var(--hkr-sky-700);
  --hkr-sun-rings:    0 0 0 10px var(--hkr-sun-100), 0 0 0 20px rgba(255, 214, 10, 0.18);

  /* MOTION */
  --hkr-t-press: 90ms;
  --hkr-t-fast:  160ms;
  --hkr-t-base:  240ms;
  --hkr-t-slow:  420ms;
  --hkr-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --hkr-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hkr-press-y:  4px;

  /* Z-INDEX */
  --hkr-z-base:   0;
  --hkr-z-raised: 10;
  --hkr-z-top:    50;
  --hkr-z-tabbar: 60;
  --hkr-z-sheet:  100;
  --hkr-z-toast:  110;

  /* SPACING */
  --hkr-s-1: 4px;
  --hkr-s-2: 8px;
  --hkr-s-3: 12px;
  --hkr-s-4: 16px;
  --hkr-s-5: 24px;
  --hkr-s-6: 32px;
  --hkr-s-7: 48px;
  --hkr-s-8: 64px;
  --hkr-s-9: 96px;
  --hkr-wrap: 1120px;
  --hkr-gutter: 20px;

  /* TYPE FACES */
  --hkr-font-display: "Atma", "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif;
  --hkr-font-body:    "Anek Bangla", "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif;
  --hkr-font-glyph:   "Anek Bangla", "Noto Sans Bengali", "Hind Siliguri", system-ui, sans-serif;

  /* TYPE SIZES at 375px (overridden at 900px below) */
  --hkr-fs-h1:       34px;
  --hkr-fs-h2:       26px;
  --hkr-fs-h3:       20px;
  --hkr-fs-body:     16px;
  --hkr-fs-kid:      17px;
  --hkr-fs-small:    14px;
  --hkr-fs-btn:      20px;
  --hkr-fs-kid-btn:  24px;
  --hkr-fs-figure:   40px;
  --hkr-fs-specimen: 48px;
  --hkr-fs-tile:     64px;
  --hkr-fs-flash:    160px;
  --hkr-fs-word:     28px;
  --hkr-lh-h1:    1.25;
  --hkr-lh-head:  1.3;
  --hkr-lh-body:  1.6;
  --hkr-lh-kid:   1.55;
  --hkr-lh-tight: 1;

  /* SIZES */
  --hkr-tap:       44px;
  --hkr-tap-kid:   64px;
  --hkr-speaker:   72px;
  --hkr-input-h:   56px;
  --hkr-topbar-h:  64px;
  --hkr-tabbar-h:  64px;
  --hkr-slot:      28px;
  --hkr-slot-kid:  36px;
  --hkr-fig:       64px; /* swatch and shape size; contexts (.hkr-prompt, .hkr-flash__glyph, .hkr-block__face, .hkr-game__spec) override and it inherits */
}

@media (min-width: 900px) {
  :root {
    --hkr-fs-h1:       52px;
    --hkr-fs-h2:       36px;
    --hkr-fs-h3:       22px;
    --hkr-fs-body:     17px;
    --hkr-fs-kid:      18px;
    --hkr-fs-figure:   44px;
    --hkr-fs-specimen: 56px;
    --hkr-fs-tile:     72px;
    --hkr-fs-flash:    220px;
    --hkr-fs-word:     32px;
    --hkr-lh-h1:       1.15;
    --hkr-gutter:      32px;
  }
}

/* ------------------------------------------------------------
   4.0 The crayon hook. One selector per crayon sets the locals.
   ------------------------------------------------------------ */
[data-cr="tang"]   { --hkr-cr-100: var(--hkr-tang-100);   --hkr-cr-400: var(--hkr-tang-400);   --hkr-cr-500: var(--hkr-tang-500);   --hkr-cr-700: var(--hkr-tang-700);   --hkr-cr-ink: var(--hkr-ink-900); --hkr-edge-color: var(--hkr-tang-700); }
[data-cr="leaf"]   { --hkr-cr-100: var(--hkr-leaf-100);   --hkr-cr-400: var(--hkr-leaf-400);   --hkr-cr-500: var(--hkr-leaf-500);   --hkr-cr-700: var(--hkr-leaf-700);   --hkr-cr-ink: var(--hkr-ink-900); --hkr-edge-color: var(--hkr-leaf-700); }
[data-cr="orchid"] { --hkr-cr-100: var(--hkr-orchid-100); --hkr-cr-400: var(--hkr-orchid-400); --hkr-cr-500: var(--hkr-orchid-500); --hkr-cr-700: var(--hkr-orchid-700); --hkr-cr-ink: var(--hkr-ink-900); --hkr-edge-color: var(--hkr-orchid-700); }
[data-cr="sky"]    { --hkr-cr-100: var(--hkr-sky-100);    --hkr-cr-400: var(--hkr-sky-400);    --hkr-cr-500: var(--hkr-sky-500);    --hkr-cr-700: var(--hkr-sky-700);    --hkr-cr-ink: var(--hkr-ink-900); --hkr-edge-color: var(--hkr-sky-700); }
[data-cr="sun"]    { --hkr-cr-100: var(--hkr-sun-100);    --hkr-cr-400: var(--hkr-sun-400);    --hkr-cr-500: var(--hkr-sun-500);    --hkr-cr-700: var(--hkr-sun-700);    --hkr-cr-ink: var(--hkr-ink-900); --hkr-edge-color: var(--hkr-sun-700); }
[data-cr="rainbow"]{ --hkr-cr-100: var(--hkr-sky-100);    --hkr-cr-400: var(--hkr-sky-400);    --hkr-cr-500: var(--hkr-sky-500);    --hkr-cr-700: var(--hkr-sky-700);    --hkr-cr-ink: var(--hkr-ink-900); --hkr-edge-color: var(--hkr-sky-700); }

/* --hkr-edge* must be substituted on the element that OWNS --hkr-edge-color: a var()
   inside a custom property resolves where that property is declared, so the :root
   copies otherwise carry sky-900 into every component. */
.hkr-btn, .hkr-block, .hkr-speak, .hkr-mute {
  --hkr-edge:         0 6px 0 var(--hkr-edge-color);
  --hkr-edge-sm:      0 4px 0 var(--hkr-edge-color);
  --hkr-edge-pressed: 0 2px 0 var(--hkr-edge-color);
}

/* ------------------------------------------------------------
   Base. Scoped to the shell body and the landing wrapper.
   overflow-x: hidden lives on html and body only (contract 6b).
   ------------------------------------------------------------ */
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body.hkr-shell { overflow-x: hidden; margin: 0; background: var(--hkr-paper); color: var(--hkr-ink-900); font: 400 var(--hkr-fs-body)/var(--hkr-lh-body) var(--hkr-font-body); -webkit-font-smoothing: antialiased; }

.hkr-shell *, .hkr-shell *::before, .hkr-shell *::after,
.hkr-landing *, .hkr-landing *::before, .hkr-landing *::after { box-sizing: border-box; }

.hkr-shell img, .hkr-shell svg, .hkr-landing img, .hkr-landing svg { max-width: 100%; }
.hkr-shell svg, .hkr-landing svg { display: inline-block; vertical-align: middle; flex: none; }
.hkr-shell [hidden], .hkr-landing [hidden] { display: none !important; }

.hkr-shell h1, .hkr-shell h2, .hkr-shell h3,
.hkr-landing h1, .hkr-landing h2, .hkr-landing h3 { margin: 0; font-family: var(--hkr-font-display); font-weight: 700; color: var(--hkr-ink-900); line-height: var(--hkr-lh-head); overflow-wrap: anywhere; }
.hkr-shell h1, .hkr-landing h1 { font-size: var(--hkr-fs-h1); line-height: var(--hkr-lh-h1); }
.hkr-shell h2, .hkr-landing h2 { font-size: var(--hkr-fs-h2); }
.hkr-shell h3, .hkr-landing h3 { font-size: var(--hkr-fs-h3); font-weight: 600; }
.hkr-shell p, .hkr-landing p { margin: 0; }
.hkr-shell p + p, .hkr-landing p + p { margin-top: var(--hkr-s-3); }
.hkr-shell ul, .hkr-shell ol, .hkr-landing ul, .hkr-landing ol { margin: 0; padding: 0; }
.hkr-shell li, .hkr-landing li { list-style: none; }
.hkr-shell strong, .hkr-landing strong { font-weight: 700; }
.hkr-shell button, .hkr-shell input, .hkr-landing button, .hkr-landing input { font-family: inherit; margin: 0; }
.hkr-shell button, .hkr-landing button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.hkr-shell a, .hkr-landing a { -webkit-tap-highlight-color: transparent; }
.hkr-shell code, .hkr-landing code { font: 600 1em/1 var(--hkr-font-body); padding: 2px 6px; border-radius: var(--hkr-r-1); background: var(--hkr-ink-100); color: var(--hkr-ink-900); }

/* Text links. Sky-700 on paper, sky-600 inside white objects, paper on the footer band.
   Only <p> links: every li > a in the templates is a block-shaped object (.hkr-block, .hkr-set, .hkr-weak__item). */
.hkr-shell p a:not(.hkr-btn), .hkr-link {
  color: var(--hkr-sky-700);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  padding-block: .8em;
  transition: color var(--hkr-t-fast) var(--hkr-ease-out), text-decoration-color var(--hkr-t-fast) var(--hkr-ease-out);
}
.hkr-card p a:not(.hkr-btn), .hkr-login p a:not(.hkr-btn), .hkr-play p a:not(.hkr-btn), .hkr-faq p a:not(.hkr-btn), .hkr-gate p a:not(.hkr-btn) { color: var(--hkr-sky-600); }
.hkr-foot p a:not(.hkr-btn), .hkr-foot li a:not(.hkr-btn) { color: var(--hkr-paper); }
.hkr-link { display: inline-flex; align-items: center; min-height: var(--hkr-tap); padding-block: 0; font-weight: 600; }
@media (hover: hover) {
  .hkr-shell p a:not(.hkr-btn):hover, .hkr-link:hover { text-decoration-color: var(--hkr-sun-500); }
}

/* Focus. Every control shows the white-gap ring; buttons carry it inside box-shadow. */
.hkr-shell :focus-visible, .hkr-landing :focus-visible { outline: 3px solid var(--hkr-sky-700); outline-offset: 3px; }
.hkr-shell .hkr-btn:focus-visible, .hkr-shell .hkr-tile:focus-visible, .hkr-shell .hkr-speak:focus-visible, .hkr-shell .hkr-input:focus-visible, .hkr-shell a.hkr-block:focus-visible, .hkr-shell a.hkr-set:focus-visible,
.hkr-landing .hkr-btn:focus-visible, .hkr-landing .hkr-tile:focus-visible, .hkr-landing .hkr-speak:focus-visible, .hkr-landing .hkr-input:focus-visible { outline: 0; }

/* Layout helpers */
.hkr-wrap { max-width: var(--hkr-wrap); margin-inline: auto; padding-inline: var(--hkr-gutter); }
.hkr-wrap--narrow { max-width: 720px; }
.hkr-emoji { display: inline-block; line-height: 1; font-style: normal; }
/* If a host ever re-enables wp-emoji, its <img> must still take the emoji's font size, not collapse. */
.hkr-shell img.emoji, .hkr-landing img.emoji { display: inline-block; width: 1em; height: 1em; margin: 0; vertical-align: -.1em; }
.hkr-glyph { font-family: var(--hkr-font-glyph); font-weight: 800; line-height: 1; }
.hkr-hit, .hkr-word__hit { display: inline-block; padding: 0 .12em; border-radius: var(--hkr-r-1); background: var(--hkr-sun-300); color: var(--hkr-ink-900); font-weight: 700; line-height: 1.2; }
.hkr-fineprint { font: 500 var(--hkr-fs-small)/1.5 var(--hkr-font-body); color: var(--hkr-ink-600); }

/* ============================================================
   4. Shared components
   ============================================================ */

/* 4.1 Button: a block that presses down 4px and springs back. */
.hkr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hkr-s-2);
  min-height: 48px; padding: 0 var(--hkr-s-5); border: 0; border-radius: var(--hkr-r-2);
  font: 700 var(--hkr-fs-btn)/1 var(--hkr-font-display); color: #fff;
  cursor: pointer; text-decoration: none; position: relative; -webkit-appearance: none; appearance: none;
  background: linear-gradient(180deg, var(--hkr-sky-600) 0%, var(--hkr-sky-700) 100%);
  --hkr-edge-color: var(--hkr-sky-900);
  box-shadow: var(--hkr-edge), var(--hkr-ground), var(--hkr-gloss);
  transition: transform var(--hkr-t-base) var(--hkr-ease-pop), box-shadow var(--hkr-t-base) var(--hkr-ease-pop), background var(--hkr-t-fast) var(--hkr-ease-out), color var(--hkr-t-fast) var(--hkr-ease-out);
}
/* The button reset above (font-family: inherit) outranks .hkr-btn; every button label is Atma, every tile glyph Baloo. */
.hkr-shell .hkr-btn, .hkr-landing .hkr-btn { font-family: var(--hkr-font-display); }
.hkr-shell .hkr-tile, .hkr-landing .hkr-tile { font-family: var(--hkr-font-glyph); }
.hkr-btn svg { width: 24px; height: 24px; }
.hkr-btn--primary { background: linear-gradient(180deg, var(--hkr-sky-600) 0%, var(--hkr-sky-700) 100%); --hkr-edge-color: var(--hkr-sky-900); box-shadow: var(--hkr-edge), var(--hkr-ground), var(--hkr-gloss); color: #fff; }
.hkr-btn--ghost { background: var(--hkr-surface); color: var(--hkr-sky-700); --hkr-edge-color: var(--hkr-sky-700); box-shadow: var(--hkr-edge), var(--hkr-ground); }
.hkr-btn--inverse { background: linear-gradient(180deg, var(--hkr-surface) 0%, var(--hkr-paper) 100%); color: var(--hkr-sky-700); --hkr-edge-color: var(--hkr-sky-900); box-shadow: var(--hkr-edge), var(--hkr-ground), var(--hkr-gloss); }
.hkr-btn--stop { background: var(--hkr-danger-700); color: #fff; --hkr-edge-color: var(--hkr-danger-900); box-shadow: var(--hkr-edge), var(--hkr-ground); }
.hkr-btn--sm { min-height: 44px; padding: 0 16px; font-size: 18px; }
.hkr-btn--lg { min-height: 56px; }
.hkr-btn--kid { min-height: 64px; padding: 0 32px; font-size: var(--hkr-fs-kid-btn); border-radius: var(--hkr-r-3); }
.hkr-btn--kid svg { width: 28px; height: 28px; }
.hkr-btn--block { width: 100%; }

@media (hover: hover) {
  .hkr-btn--primary:hover, .hkr-btn:not([class*="hkr-btn--"]):hover { background: var(--hkr-sky-600); box-shadow: var(--hkr-edge), var(--hkr-ground), var(--hkr-gloss-hover); }
  .hkr-btn--ghost:hover { background: var(--hkr-sky-50); }
  .hkr-btn--inverse:hover { background: var(--hkr-sky-50); box-shadow: var(--hkr-edge), var(--hkr-ground), var(--hkr-gloss-hover); }
  .hkr-btn--stop:hover { background: var(--hkr-danger-900); }
}
.hkr-btn:active, .hkr-btn.is-pressed {
  transform: translateY(var(--hkr-press-y));
  box-shadow: var(--hkr-edge-pressed), var(--hkr-ground-sm), var(--hkr-gloss);
  transition-duration: var(--hkr-t-press); transition-timing-function: var(--hkr-ease-out);
}
.hkr-btn--ghost:active, .hkr-btn--ghost.is-pressed, .hkr-btn--stop:active, .hkr-btn--stop.is-pressed { box-shadow: var(--hkr-edge-pressed), var(--hkr-ground-sm); }
.hkr-btn:focus-visible { box-shadow: var(--hkr-focus), var(--hkr-edge), var(--hkr-ground); }
.hkr-btn[disabled], .hkr-btn[aria-disabled="true"], .hkr-btn.is-disabled {
  background: var(--hkr-ink-100); color: var(--hkr-ink-500); --hkr-edge-color: var(--hkr-ink-300);
  box-shadow: var(--hkr-edge-sm); cursor: default; transform: none; pointer-events: none;
}

/* 4.2 Card: a white object on a ledge. Never presses. */
.hkr-card { background: var(--hkr-surface); border-radius: var(--hkr-r-3); padding: var(--hkr-s-5); box-shadow: var(--hkr-ledge-card), var(--hkr-ground); }
.hkr-card--lg { border-radius: var(--hkr-r-4); box-shadow: var(--hkr-ledge-card), var(--hkr-ground-lg); }
.hkr-card--sun { background: linear-gradient(180deg, var(--hkr-sun-100) 0%, var(--hkr-sun-300) 100%); box-shadow: 0 6px 0 var(--hkr-sun-700), var(--hkr-ground); color: var(--hkr-ink-900); }
.hkr-card > h2:first-child, .hkr-card > h3:first-child { margin-bottom: var(--hkr-s-3); }
.hkr-card + .hkr-card { margin-top: var(--hkr-s-4); }

/* 4.3 Module block: the figure and the feature in one object. */
.hkr-blocks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hkr-s-3); padding: 0; margin: 0; list-style: none;
  background-image: repeating-linear-gradient(90deg, var(--hkr-ink-300) 0 6px, transparent 6px 12px);
  background-size: 100% 2px; background-position: center; background-repeat: no-repeat; padding-block: var(--hkr-s-3);
}
.hkr-block {
  position: relative; display: flex; flex-direction: column; min-height: 200px; overflow: hidden; list-style: none;
  border-radius: var(--hkr-r-4);
  background: linear-gradient(180deg, var(--hkr-cr-400) 0%, var(--hkr-cr-500) 100%);
  box-shadow: var(--hkr-edge), var(--hkr-ground), var(--hkr-gloss);
  color: var(--hkr-ink-900); text-decoration: none;
  transition: transform var(--hkr-t-base) var(--hkr-ease-pop), box-shadow var(--hkr-t-base) var(--hkr-ease-pop);
}
.hkr-block[data-cr="rainbow"], [data-cr="rainbow"] .hkr-block { background: var(--hkr-rainbow); }
.hkr-block__face { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--hkr-s-3); flex: 1 0 112px; min-height: 112px; padding: var(--hkr-s-3) var(--hkr-s-3) 0; color: var(--hkr-cr-ink); --hkr-fig: 40px; }
.hkr-block__face .hkr-glyph { font-size: var(--hkr-fs-specimen); color: var(--hkr-cr-ink); }
.hkr-block__emoji, .hkr-block__face .hkr-emoji { font-size: 40px; line-height: 1; }
/* Under 600 a 162px block cannot hold glyph + three emoji on one line; the emoji sit as a 2+1 cluster beside the glyph. */
@media (max-width: 599px) {
  .hkr-block__face .hkr-block__emoji { font-size: 28px; line-height: 1.15; max-width: 84px; text-align: center; }
}
/* On the rainbow face the fourth stripe is sky-500, the shape's own fill; a white toy shape reads on every stripe. */
[data-cr="rainbow"] .hkr-block__face .hkr-shape { background: var(--hkr-surface); filter: drop-shadow(0 4px 0 rgba(29, 36, 51, .45)); }
[data-cr="rainbow"] .hkr-block__face .hkr-shape--heart::before, [data-cr="rainbow"] .hkr-block__face .hkr-shape--heart::after { background: var(--hkr-surface); }
.hkr-block__plate { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 var(--hkr-s-4); background: var(--hkr-surface); border-radius: var(--hkr-r-2); margin: 0 var(--hkr-s-3) var(--hkr-s-3); padding: var(--hkr-s-3); box-shadow: var(--hkr-ground-sm); transition: box-shadow var(--hkr-t-base) var(--hkr-ease-out); }
a.hkr-block:active .hkr-block__plate, a.hkr-block.is-pressed .hkr-block__plate { box-shadow: none; }
.hkr-block__plate.hkr-block__pair { flex-wrap: nowrap; align-items: flex-end; gap: var(--hkr-s-4); }
.hkr-block__fig, .hkr-block__pair > span { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.hkr-block__n { display: block; width: 100%; font: 700 var(--hkr-fs-figure)/1 var(--hkr-font-display); color: var(--hkr-ink-900); }
.hkr-block__label { display: block; width: 100%; margin-top: var(--hkr-s-1); font: 600 16px/1.3 var(--hkr-font-body); color: var(--hkr-ink-900); }
.hkr-block__sub { display: block; width: 100%; margin-top: 2px; font: 500 14px/1.4 var(--hkr-font-body); color: var(--hkr-ink-600); }
.hkr-block .hkr-blockrow { display: grid; grid-template-columns: repeat(5, var(--hkr-slot)); gap: 4px; width: 100%; margin-top: var(--hkr-s-2); --hkr-slot: 14px; }
a.hkr-block { cursor: pointer; }
a.hkr-block:active, a.hkr-block.is-pressed { transform: translateY(var(--hkr-press-y)); box-shadow: var(--hkr-edge-pressed), var(--hkr-ground-sm), var(--hkr-gloss); transition-duration: var(--hkr-t-press); transition-timing-function: var(--hkr-ease-out); }
a.hkr-block:focus-visible { box-shadow: var(--hkr-focus), var(--hkr-edge), var(--hkr-ground); }
@media (hover: hover) { a.hkr-block:hover { box-shadow: var(--hkr-edge), var(--hkr-ground), var(--hkr-gloss-hover); } }
@media (min-width: 900px) {
  .hkr-landing .hkr-blocks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hkr-s-4); background-position: center bottom; }
}

/* 4.4 Tile: the game option. White face, the module's 700 as the edge. */
.hkr-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hkr-s-3); overflow: visible; }
.hkr-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hkr-tile {
  display: flex; align-items: center; justify-content: center; position: relative;
  min-height: 96px; min-width: 64px; padding: var(--hkr-s-2); border: 0; border-radius: var(--hkr-r-2);
  background: var(--hkr-surface); color: var(--hkr-ink-900); cursor: pointer; -webkit-appearance: none; appearance: none;
  box-shadow: 0 6px 0 var(--hkr-cr-700);
  font: 800 var(--hkr-fs-tile)/1 var(--hkr-font-glyph);
  transition: transform var(--hkr-t-base) var(--hkr-ease-pop), box-shadow var(--hkr-t-base) var(--hkr-ease-pop), background var(--hkr-t-fast) var(--hkr-ease-out), color var(--hkr-t-fast) var(--hkr-ease-out);
}
.hkr-tile .hkr-glyph { font-size: inherit; }
.hkr-tile .hkr-emoji { font-size: 56px; }
.hkr-tile__word { font: 600 24px/1.2 var(--hkr-font-display); color: var(--hkr-ink-900); }
.hkr-tile .hkr-swatch, .hkr-tile .hkr-shape { --hkr-fig: 64px; }
.hkr-round .hkr-tile { min-height: 128px; }
.hkr-round .hkr-tiles--3 .hkr-tile { min-height: 120px; }
.hkr-play .hkr-tile { min-height: 96px; }
.hkr-landing .hkr-tile { box-shadow: 0 6px 0 var(--hkr-cr-700), var(--hkr-ground); }
@media (hover: hover) { .hkr-tile:not(.is-locked):hover { background: var(--hkr-cr-100); } }
.hkr-tile:active, .hkr-tile.is-pressed { transform: translateY(var(--hkr-press-y)); box-shadow: 0 2px 0 var(--hkr-cr-700); transition-duration: var(--hkr-t-press); transition-timing-function: var(--hkr-ease-out); }
.hkr-tile.is-right { background: linear-gradient(180deg, var(--hkr-leaf-100) 0%, var(--hkr-leaf-200) 100%); color: var(--hkr-leaf-700); box-shadow: 0 6px 0 var(--hkr-leaf-600), var(--hkr-gloss); animation: hkr-pop var(--hkr-t-slow) var(--hkr-ease-pop) 1; }
.hkr-tile.is-right .hkr-tile__word { color: var(--hkr-leaf-700); }
.hkr-tile__badge { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--hkr-r-1); background: var(--hkr-leaf-500); color: #fff; box-shadow: 0 4px 0 var(--hkr-leaf-700); }
.hkr-tile__badge svg { width: 18px; height: 18px; }
.hkr-tile.is-miss { background: var(--hkr-sand-100); color: var(--hkr-ink-700); box-shadow: 0 6px 0 var(--hkr-sand-300); animation: hkr-shake 360ms linear 1; }
.hkr-tile.is-locked { pointer-events: none; transform: none; }
.hkr-tile.is-locked:not(.is-right):not(.is-miss) { opacity: .75; }
.hkr-tile:focus-visible { box-shadow: var(--hkr-focus), 0 6px 0 var(--hkr-cr-700); }
.hkr-tile.is-right:focus-visible { box-shadow: var(--hkr-focus), 0 6px 0 var(--hkr-leaf-600); }

/* 4.5 Block row: progress as a row of small toy blocks. */
.hkr-blockrow { display: flex; gap: var(--hkr-s-2); padding: 0; margin: 0; list-style: none; }
.hkr-blockrow__slot {
  width: var(--hkr-slot); height: var(--hkr-slot); flex: none; position: relative; list-style: none;
  border-radius: var(--hkr-r-1); background: var(--hkr-surface); border: 2px dashed var(--hkr-ink-500);
  transition: background var(--hkr-t-fast) var(--hkr-ease-out), box-shadow var(--hkr-t-fast) var(--hkr-ease-out), border-color var(--hkr-t-fast) var(--hkr-ease-out);
}
.hkr-blockrow__slot.is-now { border: 2px solid var(--hkr-sky-500); animation: hkr-pulse 1s ease-in-out infinite; }
.hkr-blockrow__slot.is-right, .hkr-blockrow__slot.is-done { border: 0; background: linear-gradient(180deg, var(--hkr-cr-400) 0%, var(--hkr-cr-500) 100%); box-shadow: 0 4px 0 var(--hkr-cr-700), var(--hkr-gloss); animation: hkr-drop var(--hkr-t-slow) var(--hkr-ease-pop) 1; }
.hkr-blockrow__slot.is-miss { border: 0; background: var(--hkr-sand-300); box-shadow: 0 4px 0 var(--hkr-sand-700); animation: hkr-drop var(--hkr-t-slow) var(--hkr-ease-pop) 1; }
.hkr-blockrow__slot.is-miss::after { content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: var(--hkr-r-1); background: var(--hkr-ink-500); }
.hkr-round .hkr-blockrow { gap: 6px; }
/* The 8-slot rows are tuned to fit exactly at the 375px reference (DESIGN.md 4.5).
   Below it they wrap and the row stops reading as one round, so step them down. */
@media (max-width: 374px) {
  .hkr-intro .hkr-blockrow,
  .hkr-today .hkr-blockrow { --hkr-slot: 20px; gap: 6px; }
  .hkr-round .hkr-blockrow { --hkr-slot-kid: 30px; gap: 4px; }
}
@media (max-width: 319px) {
  .hkr-round .hkr-blockrow { --hkr-slot-kid: 26px; }
}
.hkr-round .hkr-blockrow__slot { width: var(--hkr-slot-kid); height: var(--hkr-slot-kid); }

/* 4.6 Chip: an r-1 square label. No pill anywhere. */
.hkr-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: var(--hkr-r-1); background: var(--hkr-sun-100); color: var(--hkr-ink-900); font: 600 var(--hkr-fs-small)/1.5 var(--hkr-font-body); white-space: nowrap; box-shadow: 0 2px 0 var(--hkr-sun-300); transition: background var(--hkr-t-fast) var(--hkr-ease-out), color var(--hkr-t-fast) var(--hkr-ease-out); }
.hkr-chip--sky { background: var(--hkr-sky-100); color: var(--hkr-sky-700); box-shadow: 0 2px 0 var(--hkr-sky-300); }
.hkr-chip--warn { background: var(--hkr-warn-100); color: var(--hkr-warn-700); box-shadow: 0 2px 0 var(--hkr-warn-500); }
.hkr-chip--quiet { background: var(--hkr-ink-100); color: var(--hkr-ink-700); box-shadow: 0 2px 0 var(--hkr-ink-300); }
.hkr-chip svg { width: 18px; height: 18px; }

/* 4.7 Field, input, message */
.hkr-field { display: block; }
.hkr-field + .hkr-field { margin-top: var(--hkr-s-4); }
.hkr-field__label { display: block; margin-bottom: var(--hkr-s-2); font: 600 var(--hkr-fs-small)/1.5 var(--hkr-font-body); color: var(--hkr-ink-700); }
.hkr-input {
  display: block; height: var(--hkr-input-h); width: 100%; padding: 0 var(--hkr-s-4);
  border: 2px solid var(--hkr-ink-500); border-radius: var(--hkr-r-2); background: var(--hkr-surface); color: var(--hkr-ink-900);
  font: 500 18px/1 var(--hkr-font-body); -webkit-appearance: none; appearance: none;
  transition: border-color var(--hkr-t-fast) var(--hkr-ease-out), box-shadow var(--hkr-t-fast) var(--hkr-ease-out);
}
.hkr-input::placeholder { color: var(--hkr-ink-500); opacity: 1; }
.hkr-input:focus { border-color: var(--hkr-sky-600); box-shadow: var(--hkr-focus); outline: 0; }
.hkr-input--sm { height: 48px; }
.hkr-input.is-error, .hkr-field.is-error .hkr-input { border-color: var(--hkr-danger-700); }
.hkr-msg { min-height: 1.5em; margin-top: var(--hkr-s-3); font: 500 15px/1.5 var(--hkr-font-body); color: var(--hkr-ink-700); overflow-wrap: anywhere; transition: color var(--hkr-t-fast) var(--hkr-ease-out); }
.hkr-msg:empty { margin-top: 0; min-height: 0; }
.hkr-msg-detail { margin: var(--hkr-s-2) 0 0; font: 400 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--hkr-ink-500); overflow-wrap: anywhere; }
.hkr-msg[data-ok="0"], .hkr-msg.is-error { color: var(--hkr-danger-700); font-weight: 600; }
.hkr-msg[data-ok="1"], .hkr-msg.is-ok, .hkr-msg.is-success { color: var(--hkr-leaf-700); font-weight: 600; }
.hkr-demo-banner { margin: 0 0 var(--hkr-s-3); padding: var(--hkr-s-3) var(--hkr-s-4); border-radius: var(--hkr-r-1); background: var(--hkr-warn-100); color: var(--hkr-warn-700); font: 500 var(--hkr-fs-small)/1.5 var(--hkr-font-body); box-shadow: 0 3px 0 var(--hkr-warn-500); }

/* 4.8 Topbars: not sticky. */
.hkr-top, .hkr-topbar { position: static; min-height: var(--hkr-topbar-h); background: var(--hkr-paper); box-shadow: 0 4px 0 var(--hkr-sky-100); }
.hkr-brand, .hkr-topbar__brand { display: inline-flex; align-items: center; gap: var(--hkr-s-2); min-height: var(--hkr-tap); color: var(--hkr-ink-900); text-decoration: none; }
.hkr-brand__mark { width: 28px; height: 28px; }
.hkr-brand__name, .hkr-topbar__brand span { font: 700 22px/1 var(--hkr-font-display); color: inherit; }

/* 4.9 Bottom tab bar: fixed, with safe-area padding. */
.hkr-tabbar {
  position: fixed; inset: auto 0 0 0; height: calc(var(--hkr-tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: flex; background: var(--hkr-surface); z-index: var(--hkr-z-tabbar);
  box-shadow: 0 -4px 0 var(--hkr-ink-200), 0 -10px 18px -8px rgba(29, 36, 51, .18);
}
.hkr-tabbar__item {
  flex: 1 1 0; min-width: 72px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--hkr-ink-600); font: 600 var(--hkr-fs-small)/1.2 var(--hkr-font-body); text-decoration: none;
  transition: transform var(--hkr-t-press) var(--hkr-ease-out), color var(--hkr-t-fast) var(--hkr-ease-out);
}
.hkr-tabbar__ico { width: 56px; height: 36px; display: grid; place-items: center; border-radius: var(--hkr-r-2); transition: background var(--hkr-t-base) var(--hkr-ease-out), box-shadow var(--hkr-t-base) var(--hkr-ease-out); }
.hkr-tabbar__item svg { width: 24px; height: 24px; }
.hkr-tabbar__item.is-active { color: var(--hkr-sky-700); }
.hkr-tabbar__item.is-active .hkr-tabbar__ico { background: var(--hkr-sky-100); box-shadow: 0 3px 0 var(--hkr-sky-300); }
.hkr-tabbar__item:active, .hkr-tabbar__item.is-pressed { transform: translateY(2px); }
@media (hover: hover) { .hkr-tabbar__item:hover .hkr-tabbar__ico { background: var(--hkr-sky-50); } }

/* 4.10 Login card: the door, the one card with a sky edge. */
.hkr-login { display: flex; flex-direction: column; gap: var(--hkr-s-4); background: var(--hkr-surface); border-radius: var(--hkr-r-3); padding: var(--hkr-s-5); box-shadow: 0 6px 0 var(--hkr-sky-700), var(--hkr-ground-lg); }
.hkr-login__h { font-size: var(--hkr-fs-h2); }
/* The charge disclosure inside the login card. Small, centred, muted, no panel:
   the approved app (APP_137435) prints it as fine print under the button, and a
   highlighted box reads as a warning rather than a term of the service. The
   in-app and gate copies keep the panel treatment (.hkr-card .hkr-price-note). */
.hkr-price-note { display: block; margin: var(--hkr-s-3) 0 0; padding: 0; background: none; box-shadow: none; color: var(--hkr-ink-600); font: 500 var(--hkr-fs-small)/1.55 var(--hkr-font-body); text-align: center; }
.hkr-card .hkr-price-note, .hkr-gate .hkr-price-note { padding: var(--hkr-s-3) var(--hkr-s-4); border-radius: var(--hkr-r-1); background: var(--hkr-sun-100); color: var(--hkr-ink-900); font: 600 16px/1.55 var(--hkr-font-body); box-shadow: 0 3px 0 var(--hkr-sun-300); text-align: start; }
.hkr-login .hkr-field + .hkr-btn { margin-top: var(--hkr-s-3); }
.hkr-login .hkr-btn + .hkr-btn { margin-top: var(--hkr-s-3); }
.hkr-login .hkr-msg { margin-top: 0; }
.hkr-login__ops { font: 500 var(--hkr-fs-small)/1.5 var(--hkr-font-body); color: var(--hkr-ink-600); }
.hkr-login__foot { font: 500 var(--hkr-fs-small)/1.5 var(--hkr-font-body); color: var(--hkr-ink-700); }
.hkr-login__foot span { display: inline; }
@media (min-width: 900px) { .hkr-login__h { font-size: 30px; } }

/* 4.11 FAQ: details and summary, a rotating plus in a mini block. No JS. */
.hkr-faq__item { background: var(--hkr-surface); border-radius: var(--hkr-r-3); box-shadow: var(--hkr-ledge-card), var(--hkr-ground); margin-bottom: var(--hkr-s-3); transition: box-shadow var(--hkr-t-base) var(--hkr-ease-out); }
.hkr-faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--hkr-s-3); min-height: 56px; padding: var(--hkr-s-3) var(--hkr-s-5); border-radius: var(--hkr-r-3); font: 600 var(--hkr-fs-h3)/1.3 var(--hkr-font-display); color: var(--hkr-ink-900); cursor: pointer; transition: transform var(--hkr-t-press) var(--hkr-ease-out); }
.hkr-faq__item summary::-webkit-details-marker { display: none; }
.hkr-faq__item summary::marker { content: ""; }
.hkr-faq__item summary:active { transform: translateY(2px); }
.hkr-faq__chev { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--hkr-r-1); background: var(--hkr-sky-100); color: var(--hkr-sky-700); box-shadow: 0 3px 0 var(--hkr-sky-300); }
.hkr-faq__chev svg { width: 18px; height: 18px; transition: transform var(--hkr-t-base) var(--hkr-ease-out); }
.hkr-faq__item[open] .hkr-faq__chev svg { transform: rotate(45deg); }
.hkr-faq__item[open] { box-shadow: 0 4px 0 var(--hkr-sky-300), var(--hkr-ground); }
.hkr-faq__item p { padding: 0 var(--hkr-s-5) var(--hkr-s-5); max-width: 60ch; font: 400 16px/1.6 var(--hkr-font-body); color: var(--hkr-ink-700); }

/* 4.12 Speaker button: the one round control. */
.hkr-speak {
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--hkr-speaker); height: var(--hkr-speaker); padding: 0; border: 0; border-radius: 50%;
  background: linear-gradient(180deg, var(--hkr-sky-600), var(--hkr-sky-700)); --hkr-edge-color: var(--hkr-sky-900);
  box-shadow: var(--hkr-edge), var(--hkr-ground), var(--hkr-gloss); color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: transform var(--hkr-t-base) var(--hkr-ease-pop), box-shadow var(--hkr-t-base) var(--hkr-ease-pop), background var(--hkr-t-fast) var(--hkr-ease-out);
}
.hkr-speak svg { width: 32px; height: 32px; }
.hkr-speak--sm { width: 64px; height: 64px; }
.hkr-speak--sm svg { width: 28px; height: 28px; }
@media (hover: hover) { .hkr-speak:hover { background: var(--hkr-sky-600); box-shadow: var(--hkr-edge), var(--hkr-ground), var(--hkr-gloss-hover); } }
.hkr-speak:active, .hkr-speak.is-pressed { transform: translateY(var(--hkr-press-y)); box-shadow: var(--hkr-edge-pressed), var(--hkr-ground-sm), var(--hkr-gloss); transition-duration: var(--hkr-t-press); transition-timing-function: var(--hkr-ease-out); }
.hkr-speak:focus-visible { box-shadow: var(--hkr-focus), var(--hkr-edge), var(--hkr-ground); }
.hkr-speak[disabled] { background: var(--hkr-ink-100); color: var(--hkr-ink-500); --hkr-edge-color: var(--hkr-ink-300); box-shadow: var(--hkr-edge-sm); cursor: default; transform: none; }
.hkr-speak.is-speaking svg { animation: hkr-pulse 1s ease-in-out infinite; }
/* Silent (muted, or no voice for the language): the sky face stays, only the slash is added. Never a grey disc. */
.hkr-speak.is-mute::after { content: ""; position: absolute; inset: 0; margin: auto; width: 4px; height: 58%; border-radius: var(--hkr-r-1); background: #fff; box-shadow: 0 0 0 2px var(--hkr-sky-700); transform: rotate(45deg); }

/* 4.13 Sticker: the reward for a completed set. */
.hkr-sticker { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin: 0; border-radius: var(--hkr-r-5); background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .85) 0%, var(--hkr-cr-100) 60%); box-shadow: 0 0 0 3px var(--hkr-surface), var(--hkr-ground); transform: rotate(-6deg); transition: transform var(--hkr-t-base) var(--hkr-ease-pop); }
.hkr-sticker__pic { font-size: 56px; line-height: 1; --hkr-fig: 48px; }
.hkr-sticker figcaption { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) rotate(6deg); margin-top: var(--hkr-s-2); white-space: nowrap; font: 600 var(--hkr-fs-small)/1.5 var(--hkr-font-body); color: var(--hkr-ink-700); }
.hkr-sticker.is-new, .hkr-result .hkr-sticker { animation: hkr-slap var(--hkr-t-slow) var(--hkr-ease-pop) 1; }
.hkr-sticker--sm { width: 48px; height: 48px; border-radius: var(--hkr-r-3); transform: rotate(-4deg); }
.hkr-sticker--sm .hkr-sticker__pic { font-size: 28px; --hkr-fig: 24px; }
.hkr-sticker--sm figcaption { display: none; }
ul.hkr-album { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 52px var(--hkr-s-3); justify-items: center; padding: 0 0 48px; }
.hkr-album__slot, .hkr-album li { position: relative; display: grid; place-items: center; width: 100%; max-width: 72px; min-height: 56px; aspect-ratio: 1 / 1; border-radius: var(--hkr-r-5); border: 2px dashed var(--hkr-ink-500); background: var(--hkr-surface); }
.hkr-album__slot.is-earned, .hkr-album__slot.is-on, .hkr-album li.is-earned, .hkr-album li.is-on { border: 0; }
.hkr-album__name { position: absolute; top: 100%; left: 50%; width: 84px; margin-top: 6px; transform: translateX(-50%); text-align: center; font: 600 var(--hkr-fs-small)/1.2 var(--hkr-font-body); color: var(--hkr-ink-600); }
.hkr-album .hkr-sticker { width: 100%; max-width: 72px; height: auto; min-height: 56px; aspect-ratio: 1 / 1; border-radius: var(--hkr-r-4); transform: rotate(-4deg); }
.hkr-album .hkr-sticker__pic { font-size: 40px; --hkr-fig: 36px; }
.hkr-album .hkr-sticker figcaption { width: 84px; margin-top: 6px; white-space: normal; text-align: center; line-height: 1.2; transform: translateX(-50%) rotate(4deg); }

/* 4.14 Result stars */
.hkr-stars { display: inline-flex; align-items: center; justify-content: center; gap: var(--hkr-s-2); }
.hkr-star { display: inline-grid; place-items: center; width: 48px; height: 48px; }
.hkr-star svg { width: 100%; height: 100%; fill: var(--hkr-surface); stroke: var(--hkr-ink-300); stroke-width: 2; transition: fill var(--hkr-t-fast) var(--hkr-ease-out), stroke var(--hkr-t-fast) var(--hkr-ease-out); }
.hkr-star.is-on svg { fill: var(--hkr-sun-500); stroke: var(--hkr-sun-700); filter: drop-shadow(0 3px 0 var(--hkr-sun-700)); animation: hkr-pop var(--hkr-t-slow) var(--hkr-ease-pop) 1 both; }
.hkr-star.is-on:nth-child(2) svg { animation-delay: 120ms; }
.hkr-star.is-on:nth-child(3) svg { animation-delay: 240ms; }
.hkr-topbar .hkr-stars, .hkr-topbar__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--hkr-r-1); background: var(--hkr-sun-100); color: var(--hkr-ink-900); font: 700 20px/1 var(--hkr-font-display); box-shadow: 0 3px 0 var(--hkr-sun-300); }
.hkr-topbar .hkr-stars svg, .hkr-topbar__chip svg { width: 20px; height: 20px; fill: var(--hkr-sun-500); stroke: var(--hkr-sun-700); stroke-width: 2; }
.hkr-topbar .hkr-star { width: 20px; height: 20px; }

/* 4.15 Result tower: static, one block per correct answer. */
.hkr-tower { display: flex; flex-direction: column; align-items: center; margin-inline: auto; } /* DOM is top to bottom: blocks, then the base (public.js tower()) */
.hkr-tower__base { width: 140px; height: 16px; border-radius: var(--hkr-r-5); background: var(--hkr-sand-100); box-shadow: 0 4px 0 var(--hkr-sand-300); margin-top: 4px; }
.hkr-tower__b { display: block; width: 44px; height: 22px; margin-bottom: 4px; border-radius: var(--hkr-r-1); background: linear-gradient(180deg, var(--hkr-cr-400), var(--hkr-cr-500)); box-shadow: 0 4px 0 var(--hkr-cr-700), var(--hkr-gloss); animation: hkr-drop var(--hkr-t-slow) var(--hkr-ease-pop) 1 both; }
.hkr-tower__b:nth-child(2) { animation-delay: 120ms; }
.hkr-tower__b:nth-child(3) { animation-delay: 240ms; }
.hkr-tower__b:nth-child(4) { animation-delay: 360ms; }
.hkr-tower__b:nth-child(5) { animation-delay: 480ms; }
.hkr-tower__b:nth-child(6) { animation-delay: 600ms; }
.hkr-tower__b:nth-child(7) { animation-delay: 720ms; }
.hkr-tower__b:nth-child(8) { animation-delay: 840ms; }
.hkr-tower__b:nth-child(n+9) { animation-delay: 960ms; }

/* 4.16 Hero scene pieces: solid sun rings, a soft hill. Inside overflow:hidden sections only. */
.hkr-sun { position: absolute; top: -32px; right: -28px; width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--hkr-sun-300), var(--hkr-sun-500) 70%); box-shadow: var(--hkr-sun-rings); pointer-events: none; }
.hkr-hill { position: absolute; bottom: -2px; left: -20%; width: 140%; height: 88px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: linear-gradient(180deg, var(--hkr-leaf-200), var(--hkr-leaf-100)); pointer-events: none; }
.hkr-hill--paper { top: -2px; bottom: auto; background: var(--hkr-paper); border-radius: 0 0 50% 50% / 0 0 100% 100%; }

/* Swatch and the eight CSS shapes. Sized by --hkr-fig; no images. */
.hkr-swatch, .hkr-shape { display: inline-block; flex: none; width: var(--hkr-fig); height: var(--hkr-fig); vertical-align: middle; }
.hkr-swatch { border-radius: 50%; background: var(--hkr-swatch, var(--hkr-cr-500)); box-shadow: 0 0 0 2px rgba(29, 36, 51, .14), 0 4px 0 rgba(29, 36, 51, .28), var(--hkr-gloss); }
.hkr-shape { position: relative; background: var(--hkr-cr-500); }
.hkr-shape--circle { border-radius: 50%; box-shadow: 0 4px 0 var(--hkr-cr-700), var(--hkr-gloss); }
.hkr-shape--square { border-radius: var(--hkr-r-1); box-shadow: 0 4px 0 var(--hkr-cr-700), var(--hkr-gloss); }
.hkr-shape--rectangle { height: calc(var(--hkr-fig) * .62); border-radius: var(--hkr-r-1); box-shadow: 0 4px 0 var(--hkr-cr-700), var(--hkr-gloss); }
.hkr-shape--oval { height: calc(var(--hkr-fig) * .68); border-radius: 50%; box-shadow: 0 4px 0 var(--hkr-cr-700), var(--hkr-gloss); }
.hkr-shape--triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 4px 0 var(--hkr-cr-700)); }
.hkr-shape--diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: drop-shadow(0 4px 0 var(--hkr-cr-700)); }
.hkr-shape--star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 4px 0 var(--hkr-cr-700)); }
.hkr-shape--heart { background: none; height: calc(var(--hkr-fig) * .9); filter: drop-shadow(0 4px 0 var(--hkr-cr-700)); }
.hkr-shape--heart::before, .hkr-shape--heart::after { content: ""; position: absolute; top: 0; left: calc(var(--hkr-fig) / 2); width: calc(var(--hkr-fig) / 2); height: calc(var(--hkr-fig) * .8); border-radius: calc(var(--hkr-fig) / 2) calc(var(--hkr-fig) / 2) 0 0; background: var(--hkr-cr-500); transform: rotate(-45deg); transform-origin: 0 100%; }
.hkr-shape--heart::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
.hkr-shape--sm, .hkr-swatch--sm { --hkr-fig: 32px; }
.hkr-shape--lg, .hkr-swatch--lg { --hkr-fig: 160px; }

/* ============================================================
   5. Landing. Eight sections, mobile-first, 600 and 900 breakpoints.
   ============================================================ */
.hkr-landing { background: var(--hkr-paper); color: var(--hkr-ink-900); font: 400 var(--hkr-fs-body)/var(--hkr-lh-body) var(--hkr-font-body); }
.hkr-section { padding-block: var(--hkr-s-7); }
.hkr-section--alt { background: var(--hkr-surface); }
.hkr-section__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hkr-s-3); margin-bottom: var(--hkr-s-5); }
.hkr-section__head p, .hkr-section > .hkr-wrap > h2 + p { max-width: 60ch; color: var(--hkr-ink-700); }
.hkr-section > .hkr-wrap > h2 { margin-bottom: var(--hkr-s-5); }
.hkr-section > .hkr-wrap > .hkr-chip + h2 { margin-top: var(--hkr-s-3); }
.hkr-section > .hkr-wrap > h2 + p { margin-top: calc(-1 * var(--hkr-s-4)); margin-bottom: var(--hkr-s-5); }
@media (min-width: 900px) { .hkr-section { padding-block: 80px; } }

/* 5.0 Landing topbar */
.hkr-top__inner { display: flex; align-items: center; gap: var(--hkr-s-4); min-height: var(--hkr-topbar-h); }
.hkr-top__nav { display: none; margin-left: auto; align-items: center; gap: var(--hkr-s-1); }
.hkr-top__nav a { display: inline-flex; align-items: center; min-height: var(--hkr-tap); padding: 0 12px; border-radius: var(--hkr-r-1); font: 600 16px/1 var(--hkr-font-body); color: var(--hkr-sky-700); text-decoration: none; transition: background var(--hkr-t-fast) var(--hkr-ease-out), color var(--hkr-t-fast) var(--hkr-ease-out); }
@media (hover: hover) { .hkr-top__nav a:hover { background: var(--hkr-sky-100); } }
.hkr-top__nav a:active { background: var(--hkr-sky-100); }
.hkr-top__inner > .hkr-btn { margin-left: auto; }
@media (min-width: 600px) { .hkr-top__nav { display: flex; } .hkr-top__inner > .hkr-btn { margin-left: var(--hkr-s-3); } }

/* 5.1 Hero: the sky field, the sun, the hill, the playable board. */
.hkr-hero { position: relative; overflow: hidden; padding-block: var(--hkr-s-6) var(--hkr-s-7); background: linear-gradient(180deg, var(--hkr-sky-100) 0%, var(--hkr-paper) 100%); }
.hkr-hero__grid { position: relative; z-index: var(--hkr-z-raised); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hkr-s-6); }
.hkr-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hkr-s-4); }
.hkr-hero__copy h1 { max-width: 14ch; }
.hkr-crayon { box-shadow: inset 0 -0.35em 0 var(--hkr-sun-300); padding: 0 .1em; border-radius: var(--hkr-r-1); }
.hkr-hero__sub { max-width: 40ch; font: 400 18px/1.55 var(--hkr-font-body); color: var(--hkr-ink-700); }
.hkr-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hkr-s-3) var(--hkr-s-5); }
.hkr-hero__price { font: 500 16px/1.55 var(--hkr-font-body); color: var(--hkr-ink-700); }
@media (min-width: 600px) { .hkr-hero { padding-block: var(--hkr-s-7); } .hkr-sun { top: 24px; right: 10%; width: 120px; height: 120px; } }
@media (min-width: 900px) {
  .hkr-hero { padding-block: 80px 112px; }
  .hkr-hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--hkr-s-8); align-items: center; }
  .hkr-hero__copy { gap: var(--hkr-s-5); }
  .hkr-sun { top: 40px; right: 46%; width: 128px; height: 128px; }
  .hkr-hill { height: 120px; }
}

/* The playable board */
.hkr-play { position: relative; display: flex; flex-direction: column; gap: var(--hkr-s-4); background: var(--hkr-surface); border-radius: var(--hkr-r-4); padding: var(--hkr-s-4); box-shadow: 0 8px 0 var(--hkr-sky-700), var(--hkr-ground-lg); }
.hkr-play__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hkr-s-2) var(--hkr-s-3); }
.hkr-play__head h2 { flex: 1 1 100%; order: 2; font-size: 22px; line-height: 1.3; }
.hkr-play__head .hkr-chip--quiet { order: 1; }
.hkr-play__head .hkr-chip:not(.hkr-chip--quiet) { order: 1; margin-left: auto; }
.hkr-play > .hkr-blockrow { justify-content: flex-start; }
.hkr-q { display: flex; flex-direction: column; gap: var(--hkr-s-3); }
.hkr-q + .hkr-q { padding-top: var(--hkr-s-4); border-top: 2px dashed var(--hkr-ink-200); }
.hkr-q__prompt, .hkr-try__prompt { display: flex; align-items: center; gap: var(--hkr-s-3); min-height: 64px; }
.hkr-q__emoji, .hkr-q__prompt .hkr-emoji { flex: none; font-size: 48px; line-height: 1; width: 56px; text-align: center; }
.hkr-q__text { flex: 1 1 auto; min-width: 0; font: 600 20px/1.3 var(--hkr-font-display); color: var(--hkr-ink-900); }
.hkr-q__prompt .hkr-word { font: 600 var(--hkr-fs-word)/1.3 var(--hkr-font-display); }
.hkr-q__prompt .hkr-speak { margin-left: auto; }
.hkr-q__say, .hkr-try__msg { min-height: 1.6em; font: 500 16px/1.6 var(--hkr-font-body); color: var(--hkr-ink-700); transition: color var(--hkr-t-fast) var(--hkr-ease-out); }
.hkr-q__say:empty, .hkr-try__msg:empty { min-height: 0; }
.hkr-q__say.is-right, .hkr-try__msg.is-right { color: var(--hkr-leaf-700); font-weight: 600; }
.hkr-q__reveal summary { display: inline-flex; align-items: center; min-height: var(--hkr-tap); list-style: none; cursor: pointer; font: 600 16px/1.3 var(--hkr-font-body); color: var(--hkr-sky-600); text-decoration: underline; text-underline-offset: 3px; transition: color var(--hkr-t-fast) var(--hkr-ease-out); }
.hkr-q__reveal[open] summary { color: var(--hkr-ink-700); }
.hkr-q__reveal summary::-webkit-details-marker { display: none; }
.hkr-q__reveal summary::marker { content: ""; }
.hkr-q__reveal p { font: 400 16px/1.6 var(--hkr-font-body); color: var(--hkr-ink-700); }
.hkr-play [data-next] { align-self: flex-start; }
.hkr-play__door { padding-top: var(--hkr-s-3); border-top: 2px dashed var(--hkr-ink-200); font: 500 16px/1.6 var(--hkr-font-body); color: var(--hkr-ink-700); }
@media (min-width: 600px) { .hkr-play { padding: var(--hkr-s-5); } .hkr-play__head h2 { font-size: 26px; } }
@media (min-width: 900px) { .hkr-play { border-radius: var(--hkr-r-5); } }

/* 5.2 Module blocks section: layout lives in 4.3; the head is chip plus h2. */
#khela .hkr-blocks, .hkr-landing .hkr-blocks { margin-top: 0; }

/* 5.3 Login and billing */
.hkr-start__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hkr-s-5); align-items: start; }
.hkr-gets h3 { margin-bottom: var(--hkr-s-4); }
.hkr-checklist { display: flex; flex-direction: column; gap: var(--hkr-s-3); }
.hkr-checklist li { display: flex; align-items: flex-start; gap: var(--hkr-s-3); font: 400 16px/1.6 var(--hkr-font-body); color: var(--hkr-ink-700); }
.hkr-check { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: .2em; border-radius: var(--hkr-r-1); background: var(--hkr-leaf-500); color: #fff; box-shadow: 0 3px 0 var(--hkr-leaf-700); }
.hkr-check svg { width: 14px; height: 14px; stroke-width: 2.6; }
@media (min-width: 900px) { .hkr-start__grid { grid-template-columns: 1fr 1fr; gap: var(--hkr-s-7); } }

/* 5.4 Game-type cards: a name and one data specimen each. Single column on
   phones so a specimen row (three options, or 5 6 7 blank) is never split;
   the row itself never wraps, the card wraps chip-over-specimen at 320px. */
.hkr-games {
  display: grid; grid-template-columns: 1fr; gap: var(--hkr-s-3); padding: 0 0 var(--hkr-s-4); margin: 0; list-style: none;
  background-image: repeating-linear-gradient(90deg, var(--hkr-ink-300) 0 6px, transparent 6px 12px);
  background-size: 100% 2px; background-position: center bottom; background-repeat: no-repeat;
}
.hkr-game { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hkr-s-3); list-style: none; background: var(--hkr-surface); border-radius: var(--hkr-r-3); padding: var(--hkr-s-4); box-shadow: 0 4px 0 var(--hkr-cr-700), var(--hkr-ground); transition: box-shadow var(--hkr-t-base) var(--hkr-ease-out); }
.hkr-game > .hkr-chip { background: var(--hkr-cr-100); color: var(--hkr-ink-900); box-shadow: 0 2px 0 var(--hkr-cr-400); }
.hkr-game__spec { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--hkr-s-2); min-height: 40px; --hkr-fig: 32px; }
.hkr-game__spec .hkr-emoji { font-size: 28px; }
.hkr-game__spec .hkr-glyph, .hkr-game__g { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: var(--hkr-r-1); background: var(--hkr-cr-100); color: var(--hkr-ink-900); font-size: 20px; box-shadow: 0 2px 0 var(--hkr-cr-700); }
.hkr-game__op, .hkr-game__spec .hkr-op { font: 700 20px/1 var(--hkr-font-body); color: var(--hkr-ink-600); }
.hkr-game__word, .hkr-game__spec .hkr-word { font: 600 20px/1 var(--hkr-font-display); color: var(--hkr-ink-900); }
.hkr-blank, .hkr-game__blank { display: inline-block; width: 32px; height: 32px; border-radius: var(--hkr-r-1); border: 2px dashed var(--hkr-ink-500); background: var(--hkr-surface); }
@media (min-width: 600px) {
  .hkr-games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hkr-s-4); }
  .hkr-game { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 900px) { .hkr-games { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 5.5 Parent card with the zero-state specimen */
.hkr-parent { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hkr-s-5); }
.hkr-parent__copy h2 { margin-bottom: var(--hkr-s-4); }
.hkr-notes { display: flex; flex-direction: column; gap: var(--hkr-s-3); }
.hkr-notes li { position: relative; padding-left: 24px; font: 400 16px/1.6 var(--hkr-font-body); color: var(--hkr-ink-700); }
.hkr-notes li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: var(--hkr-r-1); background: linear-gradient(180deg, var(--hkr-sky-400), var(--hkr-sky-500)); box-shadow: 0 2px 0 var(--hkr-sky-700); }
.hkr-spec { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hkr-s-3); padding: var(--hkr-s-4); border-radius: var(--hkr-r-3); background: var(--hkr-paper); box-shadow: 0 4px 0 var(--hkr-sand-300); }
.hkr-spec .hkr-mastery { width: 100%; }
.hkr-spec > p { font: 500 var(--hkr-fs-small)/1.5 var(--hkr-font-body); color: var(--hkr-ink-600); }
@media (min-width: 900px) { .hkr-parent { grid-template-columns: 1fr 1fr; gap: var(--hkr-s-7); align-items: center; } }

/* Mastery rows (parent card specimen and the account page) */
.hkr-mastery { display: flex; flex-direction: column; gap: var(--hkr-s-3); padding: var(--hkr-s-3); border-radius: var(--hkr-r-2); background: linear-gradient(180deg, var(--hkr-sky-100), var(--hkr-surface) 56px); box-shadow: var(--hkr-ground-sm); }
.hkr-mastery li, .hkr-mastery__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label n" "row row"; align-items: center; gap: var(--hkr-s-2) var(--hkr-s-3); }
.hkr-mastery__label, .hkr-mastery li > span:first-child { grid-area: label; font: 600 var(--hkr-fs-small)/1.5 var(--hkr-font-body); color: var(--hkr-ink-700); }
.hkr-mastery .hkr-blockrow { grid-area: row; --hkr-slot: 22px; gap: 5px; }
.hkr-mastery .hkr-bar { grid-area: row; display: flex; min-width: 0; }
.hkr-mastery__n, .hkr-mastery li > span:last-child { grid-area: n; min-width: 44px; text-align: right; font: 600 var(--hkr-fs-small)/1.5 var(--hkr-font-body); color: var(--hkr-ink-600); white-space: nowrap; }
.hkr-mastery progress { grid-area: row; width: 100%; height: 12px; border: 0; border-radius: var(--hkr-r-1); background: var(--hkr-surface); box-shadow: inset 0 0 0 2px var(--hkr-ink-300); overflow: hidden; -webkit-appearance: none; appearance: none; }
.hkr-mastery progress::-webkit-progress-bar { background: var(--hkr-surface); border-radius: var(--hkr-r-1); }
.hkr-mastery progress::-webkit-progress-value { background: linear-gradient(180deg, var(--hkr-cr-400), var(--hkr-cr-500)); border-radius: var(--hkr-r-1); }
.hkr-mastery progress::-moz-progress-bar { background: var(--hkr-cr-500); border-radius: var(--hkr-r-1); }
@media (min-width: 600px) {
  .hkr-mastery li, .hkr-mastery__row { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "label row n"; }
}

/* 5.6 FAQ */
#khoroch h2, .hkr-faq-h { margin-bottom: var(--hkr-s-5); }

/* 5.7 Footer: the sky band under the inverted paper hill. */
.hkr-foot { position: relative; padding: 96px 0 calc(var(--hkr-s-7) + env(safe-area-inset-bottom)); background: linear-gradient(180deg, var(--hkr-sky-700) 0%, var(--hkr-sky-900) 100%); color: var(--hkr-paper); overflow: hidden; }
.hkr-foot .hkr-wrap { position: relative; z-index: var(--hkr-z-raised); display: flex; flex-direction: column; align-items: flex-start; gap: var(--hkr-s-3); }
.hkr-foot .hkr-brand, .hkr-foot .hkr-brand__name { color: var(--hkr-paper); }
.hkr-foot p { max-width: 60ch; font: 400 16px/1.6 var(--hkr-font-body); color: var(--hkr-paper); }
.hkr-foot .hkr-btn { margin-top: var(--hkr-s-3); }
.hkr-foot .hkr-btn--inverse:focus-visible { box-shadow: 0 0 0 3px var(--hkr-sky-900), 0 0 0 6px var(--hkr-paper), var(--hkr-edge), var(--hkr-ground); }
@media (min-width: 900px) { .hkr-foot { padding-top: 128px; } }

/* ============================================================
   6. In-app shell and screens
   ============================================================ */

/* Shell chrome: topbar, main offset, tab bar. */
.hkr-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--hkr-s-3); padding: 0 var(--hkr-gutter); }
.hkr-topbar__brand svg { width: 28px; height: 28px; }
.hkr-app-main { display: block; max-width: 600px; margin-inline: auto; padding: var(--hkr-s-4) var(--hkr-gutter) calc(var(--hkr-tabbar-h) + 24px); }
.hkr-app-main--nav { padding-bottom: calc(var(--hkr-tabbar-h) + 24px + env(safe-area-inset-bottom)); }
.hkr-app-main--landing { max-width: none; padding: 0; }
.hkr-app-main:not(.hkr-app-main--landing) .hkr-wrap { max-width: none; padding-inline: 0; }
.hkr-shell__home { display: flex; align-items: center; justify-content: center; min-height: var(--hkr-tap); padding: var(--hkr-s-3) var(--hkr-gutter); font: 500 var(--hkr-fs-small)/1.5 var(--hkr-font-body); color: var(--hkr-ink-600); text-decoration: underline; text-underline-offset: 3px; transition: color var(--hkr-t-fast) var(--hkr-ease-out); }
@media (hover: hover) { .hkr-shell__home:hover { color: var(--hkr-sky-700); } }
@media (min-width: 640px) { .hkr-topbar { padding-inline: calc((100% - 600px) / 2 + var(--hkr-gutter)); } }

/* Kid-screen type: the child reads only prompts, status and buttons. */
.hkr-home, .hkr-learn, .hkr-round-page, .hkr-account { display: flex; flex-direction: column; gap: var(--hkr-s-5); font: 500 var(--hkr-fs-kid)/var(--hkr-lh-kid) var(--hkr-font-body); }
.hkr-account { font: 400 var(--hkr-fs-body)/var(--hkr-lh-body) var(--hkr-font-body); gap: var(--hkr-s-4); }
.hkr-page-title { font: 700 28px/1.25 var(--hkr-font-display); color: var(--hkr-ink-900); }
.hkr-home h2, .hkr-learn h2, .hkr-round-page h2, .hkr-account h2 { font: 700 22px/1.3 var(--hkr-font-display); }
.hkr-app-main .hkr-card + .hkr-card, .hkr-account > .hkr-card + .hkr-card { margin-top: 0; }

/* 6.2 Home */
.hkr-today { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hkr-s-4); border-radius: var(--hkr-r-4); }
.hkr-today > p { font: 500 var(--hkr-fs-kid)/var(--hkr-lh-kid) var(--hkr-font-body); color: var(--hkr-ink-900); }
.hkr-today__score { font: 700 24px/1.25 var(--hkr-font-display); color: var(--hkr-ink-900); }
.hkr-today .hkr-btn { align-self: stretch; }
.hkr-today .hkr-blockrow { flex-wrap: wrap; }
a.hkr-today { color: inherit; text-decoration: none; cursor: pointer; transition: transform var(--hkr-t-base) var(--hkr-ease-pop), box-shadow var(--hkr-t-base) var(--hkr-ease-pop); }
a.hkr-today:active, a.hkr-today.is-pressed { transform: translateY(var(--hkr-press-y)); box-shadow: 0 2px 0 var(--hkr-sun-700), var(--hkr-ground-sm); transition-duration: var(--hkr-t-press); transition-timing-function: var(--hkr-ease-out); }
a.hkr-today:focus-visible { box-shadow: var(--hkr-focus), 0 6px 0 var(--hkr-sun-700), var(--hkr-ground); }
.hkr-streak { display: flex; flex-direction: column; gap: var(--hkr-s-3); }
.hkr-streak p { color: var(--hkr-ink-700); }
.hkr-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hkr-s-3); }
.hkr-totals li, .hkr-totals__item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--hkr-s-3) var(--hkr-s-2); border-radius: var(--hkr-r-2); background: var(--hkr-surface); box-shadow: var(--hkr-ledge-card), var(--hkr-ground-sm); text-align: center; }
.hkr-totals__n, .hkr-totals strong { font: 700 28px/1 var(--hkr-font-display); color: var(--hkr-ink-900); }
.hkr-totals__label, .hkr-totals span { font: 600 var(--hkr-fs-small)/1.4 var(--hkr-font-body); color: var(--hkr-ink-600); }
.hkr-totals svg { width: 22px; height: 22px; fill: var(--hkr-sun-500); stroke: var(--hkr-sun-700); stroke-width: 2; }
.hkr-weak__list { display: flex; flex-wrap: wrap; gap: var(--hkr-s-2); margin-top: var(--hkr-s-3); }
.hkr-weak__item, .hkr-weak__list a { --hkr-fig: 36px; display: inline-grid; grid-auto-flow: column; place-items: center; gap: 6px; min-width: 64px; height: 64px; overflow: hidden; padding: 0 10px; border-radius: var(--hkr-r-2); background: var(--hkr-cr-100); color: var(--hkr-ink-900); font: 800 28px/1 var(--hkr-font-glyph); text-decoration: none; box-shadow: 0 4px 0 var(--hkr-cr-700); transition: transform var(--hkr-t-press) var(--hkr-ease-out), box-shadow var(--hkr-t-press) var(--hkr-ease-out); }
.hkr-weak__item .hkr-emoji { font-size: 24px; line-height: 1; }
.hkr-weak__list a:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--hkr-cr-700); }

/* 6.3 Learn: module tabs, set cards, the flashcard deck. */
.hkr-tabs { display: flex; flex-wrap: wrap; gap: var(--hkr-s-2); }
.hkr-tab, .hkr-tabs__item { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--hkr-s-4); border-radius: var(--hkr-r-2); background: var(--hkr-surface); color: var(--hkr-ink-900); font: 700 18px/1 var(--hkr-font-display); text-decoration: none; box-shadow: 0 4px 0 var(--hkr-cr-700), var(--hkr-ground-sm); transition: transform var(--hkr-t-press) var(--hkr-ease-out), box-shadow var(--hkr-t-press) var(--hkr-ease-out), background var(--hkr-t-fast) var(--hkr-ease-out); }
.hkr-tab.is-active, .hkr-tabs__item.is-active { background: linear-gradient(180deg, var(--hkr-cr-400), var(--hkr-cr-500)); color: var(--hkr-cr-ink); box-shadow: 0 4px 0 var(--hkr-cr-700), var(--hkr-gloss); }
.hkr-tab:active, .hkr-tabs__item:active, .hkr-tabs__item.is-pressed { transform: translateY(2px); box-shadow: 0 2px 0 var(--hkr-cr-700); }
.hkr-tabs__item:focus-visible { box-shadow: var(--hkr-focus), 0 4px 0 var(--hkr-cr-700); outline: 0; }
.hkr-sets { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hkr-s-3); }
.hkr-set { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title pic" "sub pic" "row row" "stars act"; align-items: center; gap: var(--hkr-s-1) var(--hkr-s-3); min-height: 88px; padding: var(--hkr-s-4); color: var(--hkr-ink-900); text-decoration: none; box-shadow: 0 4px 0 var(--hkr-cr-700), var(--hkr-ground); transition: transform var(--hkr-t-base) var(--hkr-ease-pop), box-shadow var(--hkr-t-base) var(--hkr-ease-pop); }
.hkr-set h2, .hkr-set__title { grid-area: title; font: 600 22px/1.3 var(--hkr-font-display); }
.hkr-set p, .hkr-set__sub { grid-area: sub; font: 500 16px/1.5 var(--hkr-font-body); color: var(--hkr-ink-600); }
.hkr-set .hkr-blockrow { grid-area: row; margin-top: var(--hkr-s-2); --hkr-slot: 22px; gap: 5px; flex-wrap: wrap; }
.hkr-set .hkr-sticker { grid-area: pic; width: 48px; height: 48px; border-radius: var(--hkr-r-3); transform: rotate(-4deg); }
.hkr-set .hkr-sticker__pic { font-size: 28px; --hkr-fig: 24px; }
.hkr-set .hkr-sticker figcaption { display: none; }
.hkr-set .hkr-stars { grid-area: stars; justify-self: start; margin-top: var(--hkr-s-1); }
.hkr-set .hkr-star { width: 24px; height: 24px; }
.hkr-set .hkr-btn { grid-area: act; justify-self: end; margin-top: var(--hkr-s-1); }
a.hkr-set:active, a.hkr-set.is-pressed { transform: translateY(var(--hkr-press-y)); box-shadow: 0 2px 0 var(--hkr-cr-700), var(--hkr-ground-sm); transition-duration: var(--hkr-t-press); transition-timing-function: var(--hkr-ease-out); }
a.hkr-set:focus-visible { box-shadow: var(--hkr-focus), 0 4px 0 var(--hkr-cr-700); }
@media (hover: hover) { a.hkr-set:hover { background: var(--hkr-cr-100); } }
@media (min-width: 600px) { .hkr-sets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hkr-flash { display: flex; flex-direction: column; align-items: center; gap: var(--hkr-s-4); text-align: center; }
.hkr-flash__head, .hkr-learn__head, .hkr-deck__head, .hkr-round__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hkr-s-3); width: 100%; min-height: 64px; }
.hkr-flash__head .hkr-blockrow, .hkr-learn__head .hkr-blockrow, .hkr-deck__head .hkr-blockrow, .hkr-round__head .hkr-blockrow { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; }
.hkr-flash__head .hkr-blockrow, .hkr-learn__head .hkr-blockrow { --hkr-slot: 14px; gap: 4px; }
.hkr-deck__head .hkr-blockrow { --hkr-slot: 22px; gap: 5px; }
.hkr-round__head .hkr-speak { margin-left: auto; }
.hkr-flash__set { order: 2; margin-left: auto; font: 600 var(--hkr-fs-small)/1.5 var(--hkr-font-body); color: var(--hkr-ink-600); }
/* Outline-only text (the flashcard H1 duplicates the header label): present to assistive tech, no pixels. */
.hkr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hkr-back { width: 64px; height: 64px; min-height: 64px; padding: 0; flex: none; border-radius: var(--hkr-r-2); }
.hkr-back svg { width: 28px; height: 28px; }
.hkr-flash__glyph { display: grid; place-items: center; width: 100%; min-height: 200px; padding: var(--hkr-s-4) var(--hkr-s-5); border-radius: var(--hkr-r-4); background: var(--hkr-surface); color: var(--hkr-cr-700); font: 800 var(--hkr-fs-flash)/1 var(--hkr-font-glyph); box-shadow: var(--hkr-ledge-card), var(--hkr-ground-lg); --hkr-fig: 160px; overflow-wrap: anywhere; }
.hkr-flash .hkr-emoji { font-size: 88px; }
.hkr-flash__word, .hkr-flash .hkr-word { font: 600 var(--hkr-fs-word)/1.3 var(--hkr-font-display); color: var(--hkr-ink-900); }
.hkr-flash__gloss, .hkr-flash__sub { font: 500 18px/1.5 var(--hkr-font-body); color: var(--hkr-ink-600); }
.hkr-flash__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hkr-s-3); width: 100%; }
.hkr-deck__nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--hkr-s-3); width: 100%; }
.hkr-deck__nav .hkr-btn { padding: 0 var(--hkr-s-4); min-width: 0; }
.hkr-deck__prev { justify-self: stretch; }
.hkr-deck__next, .hkr-deck__play { justify-self: stretch; }
.hkr-deck { display: flex; flex-direction: column; gap: var(--hkr-s-4); }
.hkr-deck__count, .hkr-deck__counter { text-align: center; font: 600 var(--hkr-fs-small)/1.5 var(--hkr-font-body); color: var(--hkr-ink-600); white-space: nowrap; }
.hkr-learn__play, .hkr-learn__foot { margin-top: var(--hkr-s-2); }
@media (min-width: 600px) {
  .hkr-flash__head .hkr-blockrow, .hkr-learn__head .hkr-blockrow, .hkr-deck__head .hkr-blockrow, .hkr-round__head .hkr-blockrow { order: 2; width: auto; flex: 1 1 auto; }
  .hkr-flash__set { order: 3; }
  .hkr-flash__glyph { min-height: 260px; }
}

/* 6.4 Play: intro, the round, the prompt card, the status line. */
.hkr-round-page > div + div { margin-top: 0; }
#hkr-play-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hkr-s-4); padding: var(--hkr-s-5); border-radius: var(--hkr-r-3); background: var(--hkr-surface); box-shadow: var(--hkr-ledge-card), var(--hkr-ground); }
#hkr-play-intro noscript { font: 500 var(--hkr-fs-kid)/var(--hkr-lh-kid) var(--hkr-font-body); color: var(--hkr-ink-700); }
.hkr-intro__games { display: flex; flex-wrap: wrap; gap: var(--hkr-s-2); }
.hkr-round { display: flex; flex-direction: column; gap: var(--hkr-s-4); }
.hkr-round__body { display: flex; flex-direction: column; gap: var(--hkr-s-4); }
.hkr-round__head .hkr-speak { order: 2; }
.hkr-round__head .hkr-mute, .hkr-round__head #hkr-mute { order: 4; }
@media (min-width: 600px) {
  .hkr-round__head { flex-wrap: nowrap; }
  .hkr-round__head .hkr-blockrow { flex: 1 1 auto; min-width: 0; }
}
/* The mute toggle: a square ghost block (the speaker is the one round control), a slash when muted. */
.hkr-mute {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 64px; height: 64px; padding: 0; border: 0; border-radius: var(--hkr-r-2);
  background: var(--hkr-surface); color: var(--hkr-sky-700); --hkr-edge-color: var(--hkr-sky-700);
  box-shadow: var(--hkr-edge), var(--hkr-ground); cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: transform var(--hkr-t-base) var(--hkr-ease-pop), box-shadow var(--hkr-t-base) var(--hkr-ease-pop), background var(--hkr-t-fast) var(--hkr-ease-out), color var(--hkr-t-fast) var(--hkr-ease-out);
}
.hkr-mute svg { width: 28px; height: 28px; }
@media (hover: hover) { .hkr-mute:hover { background: var(--hkr-sky-50); } }
.hkr-mute:active, .hkr-mute.is-pressed { transform: translateY(var(--hkr-press-y)); box-shadow: var(--hkr-edge-pressed), var(--hkr-ground-sm); transition-duration: var(--hkr-t-press); transition-timing-function: var(--hkr-ease-out); }
.hkr-mute:focus-visible { box-shadow: var(--hkr-focus), var(--hkr-edge), var(--hkr-ground); }
.hkr-mute.is-mute { background: var(--hkr-ink-100); color: var(--hkr-ink-600); --hkr-edge-color: var(--hkr-ink-300); }
.hkr-mute.is-mute::after { content: ""; position: absolute; inset: 0; margin: auto; width: 4px; height: 58%; border-radius: var(--hkr-r-1); background: var(--hkr-ink-600); box-shadow: 0 0 0 2px var(--hkr-ink-100); transform: rotate(45deg); }
.hkr-prompt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--hkr-s-3); min-height: 140px; text-align: center; border-radius: var(--hkr-r-3); --hkr-fig: 120px; }
.hkr-prompt .hkr-emoji { font-size: 96px; }
.hkr-prompt__text { font: 600 28px/1.3 var(--hkr-font-display); color: var(--hkr-ink-900); overflow-wrap: anywhere; }
.hkr-prompt__glyph, .hkr-prompt .hkr-glyph { font-size: 96px; color: var(--hkr-cr-700); }
.hkr-prompt .hkr-word { font: 600 var(--hkr-fs-word)/1.3 var(--hkr-font-display); }
.hkr-prompt__pics, .hkr-prompt__pile { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hkr-s-2); max-width: 100%; }
.hkr-prompt__pics .hkr-emoji, .hkr-prompt__pile .hkr-emoji { font-size: 40px; }
.hkr-prompt__sum, .hkr-prompt__seq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--hkr-s-3); }
.hkr-prompt__group { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--hkr-s-1); max-width: 40%; }
.hkr-prompt__group .hkr-emoji { font-size: 40px; }
.hkr-prompt__op { font: 700 40px/1 var(--hkr-font-display); color: var(--hkr-ink-600); }
.hkr-prompt__seq .hkr-glyph { display: inline-grid; place-items: center; min-width: 56px; height: 56px; padding: 0 var(--hkr-s-2); border-radius: var(--hkr-r-2); background: var(--hkr-cr-100); color: var(--hkr-ink-900); font-size: 36px; box-shadow: 0 4px 0 var(--hkr-cr-700); }
.hkr-prompt__seq .hkr-swatch, .hkr-prompt__seq .hkr-shape { --hkr-fig: 48px; }
.hkr-prompt__blank, .hkr-prompt__slot { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--hkr-r-2); border: 3px dashed var(--hkr-ink-500); background: var(--hkr-surface); font: 700 32px/1 var(--hkr-font-display); color: var(--hkr-ink-600); }
.hkr-prompt__pic { display: grid; place-items: center; }
.hkr-round__say { min-height: 1.55em; text-align: center; font: 500 18px/1.55 var(--hkr-font-body); color: var(--hkr-ink-700); transition: color var(--hkr-t-fast) var(--hkr-ease-out); }
.hkr-round__say.is-right { color: var(--hkr-leaf-700); font-weight: 700; }
.hkr-round [data-next] { align-self: stretch; }

/* 6.5 Result */
.hkr-result { display: flex; flex-direction: column; align-items: center; gap: var(--hkr-s-4); text-align: center; }
.hkr-result h1 { font: 700 32px/1.25 var(--hkr-font-display); }
.hkr-result__score { font: 700 24px/1.3 var(--hkr-font-display); color: var(--hkr-ink-900); }
.hkr-result .hkr-tower { margin-block: var(--hkr-s-2); }
.hkr-result .hkr-sticker { margin-bottom: var(--hkr-s-6); }
.hkr-result__new { font: 600 22px/1.3 var(--hkr-font-display); color: var(--hkr-ink-900); }
.hkr-result__ctas, .hkr-result__actions { display: flex; flex-direction: column; gap: var(--hkr-s-3); width: 100%; margin-top: var(--hkr-s-2); }
.hkr-result__save { display: flex; justify-content: center; width: 100%; margin-top: var(--hkr-s-2); }
.hkr-result .hkr-msg { text-align: center; }

/* 6.6 Account (আপনি) */
.hkr-account .hkr-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hkr-s-3); }
.hkr-account .hkr-card > h2 { margin-bottom: 0; }
.hkr-account .hkr-field { width: 100%; }
.hkr-account .hkr-field + .hkr-field { margin-top: 0; }
.hkr-account .hkr-mastery, .hkr-account .hkr-album, .hkr-account .hkr-price-note, .hkr-account .hkr-btn--block { width: 100%; }
.hkr-account .hkr-msg { margin-top: 0; }
.hkr-confirm, #hkr-unsub-confirm { display: flex; flex-direction: column; gap: var(--hkr-s-3); width: 100%; margin-top: var(--hkr-s-2); padding: var(--hkr-s-4); border-radius: var(--hkr-r-2); background: var(--hkr-paper); box-shadow: 0 4px 0 var(--hkr-sand-300), var(--hkr-ground-sm); }
.hkr-confirm p, #hkr-unsub-confirm p { color: var(--hkr-ink-900); }
.hkr-account #hkr-logout { margin-top: var(--hkr-s-2); }

/* Subscribe gate: server-rendered, sky edge like the door. */
.hkr-gate { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hkr-s-4); box-shadow: 0 6px 0 var(--hkr-sky-700), var(--hkr-ground-lg); }
.hkr-gate p { color: var(--hkr-ink-700); }
.hkr-gate .hkr-price-note { width: 100%; }

/* ============================================================
   7. Motion. Transform, opacity, box-shadow, background, colour only.
   ============================================================ */
@keyframes hkr-pop { 0% { transform: scale(1); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes hkr-drop { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes hkr-shake { 0% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } 100% { transform: translateX(0); } }
@keyframes hkr-slap { from { transform: scale(1.15) rotate(-3deg); opacity: 0; } 70% { transform: scale(1) rotate(-7deg); opacity: 1; } to { transform: scale(1) rotate(-6deg); } }
@keyframes hkr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Reduced motion: the OS setting, or the JS flag on <html>. Everything appears in its final state at once. */
@media (prefers-reduced-motion: reduce) {
  .hkr-shell *, .hkr-shell *::before, .hkr-shell *::after,
  .hkr-landing *, .hkr-landing *::before, .hkr-landing *::after { animation: none !important; transition-duration: 1ms !important; }
  .hkr-btn:active, .hkr-btn.is-pressed, .hkr-tile:active, .hkr-tile.is-pressed, .hkr-speak:active, .hkr-speak.is-pressed,
  a.hkr-block:active, a.hkr-block.is-pressed, a.hkr-set:active, a.hkr-set.is-pressed, .hkr-tab:active, .hkr-tabs__item:active, .hkr-tabs__item.is-pressed, .hkr-weak__list a:active,
  .hkr-mute:active, .hkr-mute.is-pressed, a.hkr-today:active, a.hkr-today.is-pressed,
  .hkr-tabbar__item:active, .hkr-tabbar__item.is-pressed, .hkr-faq__item summary:active { transform: none; }
  .hkr-tile.is-right, .hkr-tile.is-miss, .hkr-blockrow__slot, .hkr-star.is-on svg, .hkr-tower__b, .hkr-sticker { animation: none !important; }
}
html.hkr-no-motion .hkr-shell *, html.hkr-no-motion .hkr-shell *::before, html.hkr-no-motion .hkr-shell *::after,
html.hkr-no-motion .hkr-landing *, html.hkr-no-motion .hkr-landing *::before, html.hkr-no-motion .hkr-landing *::after { animation: none !important; transition-duration: 1ms !important; }
html.hkr-no-motion .hkr-btn:active, html.hkr-no-motion .hkr-btn.is-pressed, html.hkr-no-motion .hkr-tile:active, html.hkr-no-motion .hkr-tile.is-pressed,
html.hkr-no-motion .hkr-speak:active, html.hkr-no-motion .hkr-speak.is-pressed, html.hkr-no-motion a.hkr-block:active, html.hkr-no-motion a.hkr-set:active,
html.hkr-no-motion .hkr-mute:active, html.hkr-no-motion .hkr-mute.is-pressed, html.hkr-no-motion a.hkr-today:active, html.hkr-no-motion .hkr-tabs__item:active,
html.hkr-no-motion .hkr-tabbar__item:active, html.hkr-no-motion .hkr-faq__item summary:active { transform: none; }