/* V06 Georgian alphabet, hub and letters.
   Loaded AFTER niko/styles.css, so it may override the base without !important.
   Owned by the V06 build; the JS that renders these surfaces is niko/alpha.js.
   Design law: docs/design/NIKOLEARN_DESIGN_CONSTITUTION.md (§2 principles, §8 case registry,
   §8.1 imagery baseline, §8.3 mobile geometry 320/375/390/430, 2 columns on phone). */

/* ══ THE LETTER'S WORLD ═════════════════════════════════════════════════════════════════════════
   The hub is ONE screen. The letters are ~180. So the picture had to be something the app can draw
   33 times without 33 files: a small illustrated world per letter, built in niko/alpha.js from
   [hue, scene, object]. The scene is inline SVG in the journey.js grammar, the hue is the letter's
   own, and the object is drawn. Nothing here loads a bitmap, so a letter costs bytes, not assets.
   .ka-lw is the FRAME that world lives in, and it is the same component on every surface below the
   hub: the flashcard, ანბანთქმა, the quiz prompt, the reading card, the writing screen. One frame,
   one aspect language, five placements. */
.ka-lw{position:relative;width:100%;aspect-ratio:300/158;overflow:hidden;border-radius:18px;
  background:var(--kw-sky,linear-gradient(180deg,#CFE6FA,#F3FAFF));
  /* the sky is painted by the DIV and the land by the SVG, so a scene that does not reach the top of
     its box still shows air rather than the card behind it */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),inset 0 -18px 30px -22px rgba(20,14,8,.55);
  isolation:isolate}
.ka-lw-svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* The object stands at x=224 of a 300-wide scene. The letter therefore gets everything left of 66%,
   so the two can never collide, at 320 or at 430, without either of them being measured at runtime. */
.ka-lw-letter{position:absolute;left:0;top:0;bottom:0;right:34%;display:grid;place-items:center;padding:0 3%}

/* ── the letter itself ──
   On a white card a coloured glyph only had to beat the card. Standing in a landscape it has to beat
   grass, water and sky at once, and a flat fill cannot: it reads as a sticker laid on a photograph.
   So the glyph is built like an object in the same world instead. A light face, a dark edge in the
   world's OWN deep tone, and a short extrusion in its mid tone. The stroke is what guarantees the
   contrast (the face is never asked to survive on its own against an unknown backdrop), the
   extrusion is what makes it belong to the picture rather than sit on top of it.
   paint-order puts the stroke UNDER the fill so the letter keeps its drawn weight; where a browser
   ignores it the glyph is thinner but still light-on-dark, so the fallback is a style loss, never a
   legibility loss. */
.alpha-letter.ka-3d{
  color:#FFFDF6;
  font-size:clamp(3.2rem,17vw,5.4rem);
  -webkit-text-stroke:3.5px var(--kw-deep,#2A1C12);
  paint-order:stroke fill;
  text-shadow:0 2px 0 var(--kw-mid,#8894A0),0 4px 0 var(--kw-deep,#2A1C12),0 8px 14px rgba(20,14,8,.42)}
/* English carries a case PAIR on one line, so it gets a smaller size and a lighter edge; the lowercase
   partner keeps its quieter reading by opacity now that both are the same ink. */
.alpha-letter.ka-3d.en{font-size:clamp(2.4rem,11.5vw,3.9rem);-webkit-text-stroke-width:3px}
.alpha-letter.ka-3d .lc{color:#FFFDF6;opacity:.82}

/* the word's own picture is drawn whenever the library knows it. Where it does not, the dataset's
   emoji stays as a MEANING CUE inside the frame, a sticker in a scene and deliberately not the
   picture: it is small, it is bounded, and the world behind it is what the card is actually showing. */
.ka-lw-emoji{font-size:clamp(1.7rem,7vw,2.4rem);line-height:1;
  background:rgba(255,253,246,.82);border-radius:999px;padding:.14em .26em;
  box-shadow:0 3px 9px rgba(20,14,8,.22)}

/* ══ THE FLASHCARD ══════════════════════════════════════════════════════════════════════════════
   .alpha-card used to be a padded white box with a glyph and an emoji stacked in it. The world is now
   the card's face, so the padding goes and the text moves to a plaque beneath it. The card keeps its
   border, its radius, its shadow and its tap behaviour; only the anatomy changed. */
.alpha-card.ka-card{padding:0;gap:0;overflow:hidden}
.alpha-card.ka-card .ka-lw{border-radius:0}
.ka-plaque{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 16px 18px}
/* ანბანთქმა carries two lines of tongue twister under a shorter world, so it keeps its own rhythm */
.alpha-card.anb .ka-plaque{gap:10px;padding:16px 16px 20px}
.ka-lw.short{aspect-ratio:300/124}

/* ══ THE OTHER FOUR PLACEMENTS ══════════════════════════════════════════════════════════════════ */
/* the quiz prompt: the world sits at the top of the paper, the question under it */
.prompt .ka-lw{aspect-ratio:300/134;margin-bottom:10px;border-radius:14px}
.prompt .ka-lw.thin{aspect-ratio:300/96}
.prompt.spell .ka-lw{margin-bottom:8px}
/* reading and sentence learn screens centre their content, so the frame states its own width */
.read-stage .ka-lw{width:min(88vw,340px);aspect-ratio:300/142}
/* the writing screen: a band above the tracing canvas, aligned to the canvas edges so the two read as
   one column. The canvas itself is untouched. */
.ka-lw.strip{width:min(80vw,300px);margin:10px auto 0;aspect-ratio:300/78;border-radius:16px}

/* ══ THE PICTURE CHIP ═══════════════════════════════════════════════════════════════════════════
   The sentence quiz asks a child to pick a PICTURE, and it used to lay four bare emoji on four
   buttons. Same four meanings, drawn from the same library the worlds are drawn from, so the answer
   tiles now speak the app's own hand. A meaning the library does not know keeps its emoji rather than
   losing the question. */
.opt.ka-optpic{padding:8px 10px;min-height:clamp(88px,17vh,112px);min-width:56px}
.ka-chip{display:block;width:auto;height:clamp(58px,14vw,80px);overflow:visible;
  filter:drop-shadow(0 4px 5px rgba(60,40,10,.24))}
.ka-chip-e{font-size:clamp(2rem,8.5vw,2.7rem);line-height:1}

/* ══ THE HUB ════════════════════════════════════════════════════════════════════════════════════
   Nine tiles, and every one of them wore an OS emoji in front of its scene. An emoji is the one
   picture in the app that is not ours: it is drawn by the phone, it changes between phones, and it
   carries a different hand on every one. The tile keeps the scene it already has (niko/tilescene.js,
   another agent's file, untouched) and swaps only the glyph for the same drawn object the letters
   use, standing on that scene's ground line at y=54 of 72. */
.mode.has-art .m-ground .ka-tobj{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);
  height:62%;width:auto;overflow:visible;
  filter:drop-shadow(0 5px 5px rgba(60,40,10,.30)) drop-shadow(0 1px 0 rgba(255,255,255,.45))}

/* ══ SMALL SCREENS ══════════════════════════════════════════════════════════════════════════════
   Every width above is a percentage, a vw clamp or an aspect ratio, so 320 needs no separate layout.
   It needs one thing the ratios cannot give: at 320 the letter's stroke is thicker relative to the
   glyph than it is at 430, which closes the counters of ე, ფ and ღ. The edge thins with the screen. */
@media (max-width:359px){
  .alpha-letter.ka-3d{-webkit-text-stroke-width:2.6px;
    text-shadow:0 2px 0 var(--kw-mid,#8894A0),0 3px 0 var(--kw-deep,#2A1C12),0 6px 11px rgba(20,14,8,.42)}
  .alpha-letter.ka-3d.en{-webkit-text-stroke-width:2.2px}
  .ka-plaque{padding:12px 12px 16px}
}
/* the tap floor for 3-5: the two controls this case adds to a screen are the picture answer tile and
   the listen button, and both are sized past 56 above. This line is the guarantee, not the mechanism. */
.alpha-stage .speakbtn.big,.read-stage .speakbtn.big{min-height:56px}