/* V05 Kings English + V08 talk & colors.
   Loaded AFTER niko/styles.css, so it may override the base without !important.
   Owned by the V05 build; the JS that renders these surfaces is niko/talk.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). */

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   V08 · CONVERSATION WORLD  —  the two destinations of openTalk() in niko/talk.js
   PI-211: „should feel like entering a CONVERSATION WORLD, not a settings menu", „avoid flat flags
   floating inside plain white cards", „one-column primary choice layout, do not compress into two
   columns". The card stops being a row of chrome and becomes a place: a painted band on top, the
   name and the count underneath, nothing floating. .talk-deck keeps its --tc/--tcd accent pair,
   its radius, its shadow and its :active, so the two decks still belong to the same component
   family as the rest of the app; only the anatomy changes.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.talk-pick.en-talkworld{gap:12px;padding:14px 16px 22px}
.en-talkworld .en-head{text-align:center;margin-top:4px}
.en-talkworld .en-head h2{margin:0;color:var(--ink);font-size:1.42rem;line-height:1.24}

/* one column, always. .talk-decks is already flex-direction:column; this states it as a rule of the
   case so a later two-column "optimisation" fails the file rather than the screen. */
.en-talkworld .talk-decks{flex-direction:column;gap:14px}

.talk-deck.en-deck{
  flex-direction:column;align-items:stretch;justify-content:flex-start;
  gap:0;padding:0;min-height:0;overflow:hidden;text-align:left;
  border-color:color-mix(in oklch,var(--tc) 52%,var(--line));
  box-shadow:0 6px 18px color-mix(in oklch,var(--tc) 20%,transparent),var(--shadow)}

/* the painted band. aspect-ratio, not a fixed height, so the picture keeps its crop from 320 to 430.
   The sky gradient sits on this box and not in the SVG, so the card is still a place with a horizon
   even in the fallback where journey.js's scene helpers are unavailable. */
.en-deck .en-scene{
  flex:0 0 auto;display:block;position:relative;width:100%;aspect-ratio:300/84;overflow:hidden;
  border-bottom:1.5px solid color-mix(in oklch,var(--tc) 32%,var(--line))}
/* the CHILD combinator is load-bearing: the flags are NESTED <svg> elements inside this one, and a
   descendant selector would stretch each of them to fill the whole scene. */
.en-deck .en-scene > svg{position:absolute;inset:0;display:block;width:100%;height:100%}

/* the name row. The tap floor is the whole card (~150px tall), so this row only has to stay legible;
   min-height keeps it above the 44px control floor even if a name ever wraps to nothing. */
.en-deck .en-row{
  display:flex;align-items:center;gap:12px;min-height:var(--tap,44px);padding:11px 13px 12px;
  background:linear-gradient(180deg,color-mix(in oklch,var(--tc) 10%,var(--card)),var(--card))}
.en-deck .td-name{font-size:1.1rem}
.en-deck .en-go{width:36px;height:36px;background:color-mix(in oklch,var(--tc) 20%,var(--card))}

/* the owl gets a job (PI-207 §8, applied here): it stops being decoration in the corner and says the
   one thing this screen needs said. Subordinate to the two destinations at 62px, not 104px. */
/* CORRECTED IN PLACE 2026-08-18: this was `margin-top:auto`, pinning the owl to the bottom of a
   `min-height:100%` column. This world has exactly two decks, so on a 390x880 phone that opened a
   measured 220px of empty page between the second card and the owl (`qa/_edges.mjs`), and a hole that
   size in the middle of a screen does not read as breathing room, it reads as content that failed to
   load. The owl now sits under the decks where it is speaking about them. Bottom-pinning is right when
   the content fills the screen; here it never does, so the pin was buying an emptiness. */
.en-talkworld .en-owl{
  margin-top:10px;padding-top:14px;width:100%;max-width:360px;
  display:flex;align-items:flex-start;gap:10px}
.en-talkworld .en-owl img{
  flex:0 0 auto;width:62px;height:62px;object-fit:contain;
  filter:drop-shadow(0 6px 9px color-mix(in oklch,var(--green) 28%,transparent))}
.en-talkworld .en-say{
  position:relative;flex:1 1 auto;min-width:0;margin:5px 0 0;padding:10px 13px;
  border:1.5px solid var(--line);border-radius:14px;background:var(--card);
  color:var(--muted);font-size:.94rem;line-height:1.45}
.en-talkworld .en-say::before,
.en-talkworld .en-say::after{content:"";position:absolute;top:15px;width:0;height:0;border:7px solid transparent}
.en-talkworld .en-say::before{left:-14px;border-right-color:var(--line)}
.en-talkworld .en-say::after{left:-11px;border-right-color:var(--card)}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   V05 · ONE ENGLISH WORLD
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── FV-08: the ფრაზები tile ─────────────────────────────────────────────────────────────────────
   .mode.stack exists exactly once in the app (screens-menu.js:79) and it is the one English tile
   with no picture at all: groundPlainTiles() skips .stack on purpose, because a full-bleed ground
   under overflow:hidden fights the card-deck shadow at styles.css:1974 that IS this tile's meaning.
   So the fix keeps the deck shape and replaces the 💬 — an OS glyph doing the job of a picture, which
   Constitution 8.1 forbids — with an authored object in the English world's own palette: a fan of
   phrase cards, which is what the deck shadow behind it already promises.
   The glyph is hidden with font-size/colour, never removed: groundPlainTiles reads .m-ico's
   innerHTML on the tiles it does treat, and the tile's accessible name comes from kt()/mlabel() on
   the tile itself, so nothing here is announced or lost.
   Colours are rgb() and not hex on purpose: a raw # inside a data URI would need percent-encoding
   and is the classic way one of these silently paints nothing. */
.mode.stack .m-ico{
  width:76px;height:57px;margin:0 auto 2px;
  font-size:0;line-height:0;color:transparent;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  filter:drop-shadow(0 3px 5px rgba(27,36,48,.18));
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'><ellipse cx='34' cy='45' rx='21' ry='2.4' fill='rgb(27,36,48)' opacity='.14'/><rect x='8' y='22' width='40' height='22' rx='5' fill='rgb(191,217,236)' transform='rotate(-8 28 33)'/><rect x='11' y='20' width='40' height='22' rx='5' fill='rgb(116,171,203)' transform='rotate(-4 31 31)'/><rect x='14' y='19' width='40' height='23' rx='5' fill='rgb(255,255,255)' stroke='rgb(37,94,128)' stroke-width='1.6'/><rect x='19' y='26' width='25' height='3.2' rx='1.6' fill='rgb(37,94,128)' opacity='.5'/><rect x='19' y='33' width='16' height='3.2' rx='1.6' fill='rgb(37,94,128)' opacity='.28'/><path d='M36 2h20a4 4 0 0 1 4 4v6a4 4 0 0 1-4 4h-9l-5 4v-4h-6a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z' fill='rgb(255,239,180)' stroke='rgb(37,94,128)' stroke-width='1.5' stroke-linejoin='round'/><circle cx='42' cy='9' r='1.4' fill='rgb(37,94,128)'/><circle cx='47.5' cy='9' r='1.4' fill='rgb(37,94,128)'/><circle cx='53' cy='9' r='1.4' fill='rgb(37,94,128)'/></svg>")}

/* ── V05: the Kings Test becomes a milestone ─────────────────────────────────────────────────────
   PI-207 §3 puts it BELOW the other activities in the hierarchy and §7 calls it desirable but a
   milestone, not the front door. Today it is the first, widest, loudest card on the grid: a
   full-bleed purple-primary banner sitting between the Continue CTA and the activities.

   ONE selector now. This file was written with a `:has(> .klevel-bar):has(.mode-grid:not(.art-wide))`
   twin beside every rule, because `data-subj` was a hook the spec ASKED FOR and screens-menu.js did
   not yet emit. screens-menu.js:200 emits it as of 2026-08-18, so the twin is an orphan created by
   that line and goes with it: a structural selector that is unique only by accident (it reads „a
   screen with a level bar over a non-wide grid") is a trap for the next grid that happens to match.

   The demotion is order + weight, never a new colour system (a PI-207 red line): the crown art is
   kept, the tokens are the app's own, and white-on-mid-tone becomes ink-on-cream, which moves the
   contrast the right way rather than reopening the AA defect styles.css:641 documents. */
.screen[data-subj="kings-eng"] .mode-grid > .mode{order:1}

.screen[data-subj="kings-eng"] .mode-grid > .mode.feature{
  order:2;padding:14px 16px;gap:13px;
  color:var(--ink);
  background:linear-gradient(180deg,color-mix(in oklch,var(--sun) 22%,var(--card)),var(--card));
  border:1.5px solid color-mix(in oklch,var(--sun-d) 40%,var(--line));
  box-shadow:var(--shadow)}

.screen[data-subj="kings-eng"] .mode-grid > .mode.feature .m-name{
  color:var(--ink);font-size:1.06rem}

.screen[data-subj="kings-eng"] .mode-grid > .mode.feature .m-sub{
  color:var(--sun-d);opacity:1;font-weight:600}

/* the crown keeps its painting and loses the white outline, which only ever read as an outline
   against the dark banner it was drawn for. */
.screen[data-subj="kings-eng"] .mode-grid > .mode.feature .m-ico.m-obj{
  width:74px;height:46px;
  outline-color:color-mix(in oklch,var(--sun) 60%,transparent);
  box-shadow:0 2px 7px rgba(40,30,20,.16)}

/* ── PI-207 §1: the child must see Level → Current Mission → Continue ────────────────────────────
   Today he sees them in the wrong order, and one heading is attached to the wrong thing. openMenu()
   (screens-menu.js:199) renders `topbar · journeyHub · acts-h · body`, and the level bar is the first
   line of `body`, so the DOM order on this screen is:

     .topbar → .jhub (world band) → .jsec-h „აირჩიე, რით ვითამაშოთ" → .klevel-bar → .en-mission → .mode-grid

   which means Starters/Movers/Flyers arrives AFTER the band it is supposed to scope, and the
   „choose what to play" heading introduces a level selector instead of the games. `.screen` is
   `display:flex;flex-direction:column` (styles.css:242), so the sequence he asked for is six `order`
   declarations and no markup move at all. Nothing moves on any other screen: every selector here is
   English-world only.

   The band leads, exactly as in the founder's reference: picture first, then the level chips, then
   the ONE thing to do now, then the eight choices under their own heading. The chips sit ABOVE the
   mission because they change it, and that is the only visible proof they do anything.

   NOT DONE HERE, on purpose: §1 also says the decorative environment must „earn its space", which
   reads as shrinking the world band. PI-210 is the later brief and it reprices exactly that — „the
   layouts were never the prize and the ART is", plus a red line against regressing illustration
   quality. Reordering costs the band nothing; shrinking it would spend the asset he named as the
   strongest one in the product. So the sequence is fixed and the painting is left alone. */
.screen[data-subj="kings-eng"] > .topbar{order:1}
.screen[data-subj="kings-eng"] > .jhub{order:2}
.screen[data-subj="kings-eng"] > .klevel-bar{order:3;margin:2px 0 10px}
.screen[data-subj="kings-eng"] > .en-mission{order:4}
.screen[data-subj="kings-eng"] > .jsec-h{order:5}
.screen[data-subj="kings-eng"] > .mode-grid{order:6}

/* ── PI-207 §1: the Current Mission itself ───────────────────────────────────────────────────────
   The screen had no „what now" at all: journeyHub() only draws its CTA when a placement path exists
   (journey.js:427) and placement.js:60 lists three subjects, kings-eng not among them. So eight equal
   tiles were the whole offer and the child had to invent the answer to „რა ვქნა ახლა".

   This is the one card that is allowed to shout on this screen, so the hierarchy is unambiguous:
   full width against a two-column grid, the app's purple against cream cards, one painting, one CTA.
   Ground is --purple/--purple-d pushed toward black by color-mix, NOT a new colour: the raw pair is
   about 4:1 behind white and the sub-line and the pill would sit under AA, which is the same defect
   styles.css:641 already documents on the old Kings banner. Darkening the token is how the card gets
   to shout without repeating it.
   The card IS the control — his own note on this grid says „do not repeat oversized floating play
   buttons, use one interaction model" — so .en-mgo is a span that looks like a button, never a second
   tap target, and the 44px floor is carried by it inside a card far taller than 44px. */
.en-mission{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  margin:2px 0 14px;padding:14px 14px 14px 16px;
  border:0;border-radius:var(--radius);color:#fff;cursor:pointer;
  background:linear-gradient(150deg,
    color-mix(in oklch,var(--purple) 74%,black),
    color-mix(in oklch,var(--purple-d) 84%,black));
  box-shadow:0 8px 20px color-mix(in oklch,var(--purple-d) 34%,transparent),var(--shadow)}
.en-mission:active{transform:translateY(1px)}

.en-mtx{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1 1 auto;min-width:0}
.en-mtag{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px 4px;border-radius:999px;
  background:rgba(255,255,255,.2);font-size:.78rem;font-weight:700;line-height:1.3}
.en-mname{font-size:1.32rem;line-height:1.2}
.en-msub{font-size:.92rem;line-height:1.3;opacity:.9}
.en-msub b{font-weight:700}
/* the CTA reads as the app's yellow action, matching the reference and the buttons everywhere else.
   Lit from the top and NOT darkened: the first cut ran --sun → --sun-d with a blackened ledge, and on
   this dark ground the whole pill went olive. On a dark card the yellow has to gain light, not lose it,
   or the one action on the screen is the dimmest thing on it. */
.en-mgo{
  margin-top:4px;display:inline-flex;align-items:center;gap:7px;
  min-height:var(--tap,44px);padding:0 17px;border-radius:999px;
  background:linear-gradient(180deg,color-mix(in oklch,var(--sun) 78%,white),var(--sun));
  color:var(--ink);font-weight:800;font-size:1.02rem;
  box-shadow:0 3px 0 var(--sun-d),0 4px 10px rgba(20,10,40,.3)}
.en-mgo i{font-style:normal;font-size:.8rem}

/* the painting. aspect-ratio, never a fixed height, so the crop survives 320 → 430 (§8.3). */
.en-mart{
  flex:0 0 auto;width:104px;aspect-ratio:1/1;border-radius:16px;
  background-size:cover;background-position:center;
  border:2px solid rgba(255,255,255,.34);box-shadow:0 5px 12px rgba(20,10,40,.28)}

@media (max-width:359px){
  .en-mission{gap:10px;padding:12px 12px 12px 13px}
  .en-mart{width:82px}
  .en-mname{font-size:1.18rem}
  .en-mgo{padding:0 14px;font-size:.96rem}}