/* ============================================================
   styles.css — MARIANE beta
   Palette: Pompeiian fresco — deep umber wall, fresco red,
   ochre gold, parchment cream. The illustrated scenes are the
   bright panels on a dark wall, like panels in a triclinium.
   ============================================================ */

:root {
  --wall: #2b1c16;          /* deep umber background */
  --wall-soft: #3a2820;     /* raised surface */
  --fresco: #b33a2b;        /* Pompeiian red */
  --fresco-deep: #8e2c20;
  --ochre: #e0a93e;         /* gold accent */
  --cream: #f3e6d0;         /* main text */
  --cream-dim: #c9b69a;
  --green: #7fb069;         /* correct */
  --ink: #3a2417;
  --radius: 14px;
  --serif: "Palatino Linotype", Palatino, "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--wall);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(224, 169, 62, 0.06), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(179, 58, 43, 0.08), transparent 55%);
  color: var(--cream);
  font-family: var(--sans);
  min-height: 100vh;
  line-height: 1.45;
}

/* ---------- top bar ---------- */

/* ONE ROW, ALWAYS. Seven chips (back, home, map, streak, hearts, xp, ordo)
   used to wrap onto a second line at 360px, which pushed every screen down
   and looked broken. nowrap + a compact hearts form below 420px keeps the
   bar on one line at 360 with room to spare. */
#topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  justify-content: center;
  align-items: center;
  padding: 0.45rem 0.5rem;
  background: rgba(43, 28, 22, 0.92);
  border-bottom: 2px solid var(--fresco-deep);
}

#topbar:empty { display: none; }

.chip {
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--wall-soft);
  border: 1px solid rgba(224, 169, 62, 0.35);
  color: var(--cream);
  white-space: nowrap;          /* a chip never breaks inside itself */
  flex: 0 0 auto;
}

button.chip { cursor: pointer; font-size: 1.05rem; }
button.chip:active { transform: scale(0.94); }

.hearts { letter-spacing: -1px; }
.hearts-short { display: none; }

/* phones: tighter chips, and hearts as "❤️ 4/5" instead of five glyphs */
@media (max-width: 420px) {
  #topbar { gap: 0.25rem; padding: 0.4rem 0.35rem; }
  .chip { font-size: 0.85rem; padding: 0.28rem 0.45rem; }
  button.chip { font-size: 0.95rem; }
  .hearts-full { display: none; }
  .hearts-short { display: inline; letter-spacing: 0; }
}

/* the topbar back arrow sits leftmost: same chip styling, just a hint
   of a different accent so it reads as "navigation" rather than "stat". */
.chip.nav-back { border-color: var(--ochre); font-weight: bold; }

/* small SVG thumbnails inside option buttons (verba check, refill) and
   memory cards. The .scn-thumb wrapper enforces a consistent square box. */
.scn-thumb {
  display: inline-block;
  width: 64px;
  height: 64px;
  vertical-align: middle;
  overflow: hidden;
  border-radius: 6px;
}
.scn-thumb svg { display: block; width: 100%; height: 100%; }
.emoji-opt .scn-thumb { width: 72px; height: 72px; }
.mem-card.pic .scn-thumb { width: 56px; height: 56px; }

/* row that pairs the in-card RETRŌ button with the PERGE button in Fābula */
.nav-row {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.nav-row .btn.ghost.small:disabled { opacity: 0.35; cursor: default; }

/* ---------- shared layout ---------- */

.screen {
  max-width: 540px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

h1, h2, h3 { font-family: var(--serif); }

.btn {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  color: var(--cream);
  background: var(--fresco);
  border: 0;
  border-bottom: 4px solid var(--fresco-deep);
  border-radius: var(--radius);
  padding: 0.75rem 2rem;
  cursor: pointer;
  display: inline-block;
}
.btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.btn.primary { background: var(--fresco); }
.btn.ghost {
  background: transparent;
  border: 1px solid var(--cream-dim);
  color: var(--cream-dim);
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
}
.btn.small { font-size: 0.8rem; }

.btn:focus-visible, .opt:focus-visible, .node:focus-visible,
.word:focus-visible, .mem-card:focus-visible, .chip:focus-visible {
  outline: 3px solid var(--ochre);
  outline-offset: 2px;
}

/* ---------- splash ---------- */

.splash {
  text-align: center;
  padding-top: 2.5rem;
}
.splash h1 {
  font-size: 2.6rem;
  letter-spacing: 0.18em;
  margin: 0.4rem 0 0;
  color: var(--ochre);
}
.splash .tagline {
  font-family: var(--serif);
  font-style: italic;
  color: var(--cream-dim);
  margin: 0.2rem 0 1.6rem;
}
.mascot { margin: 0; }
.big-salve { font-family: var(--serif); font-size: 1.7rem; margin: 0.4rem 0 1rem; }
.splash label { display: block; margin-bottom: 0.5rem; color: var(--cream-dim); }
.splash input {
  font-family: var(--serif);
  font-size: 1.3rem;
  text-align: center;
  background: var(--wall-soft);
  color: var(--cream);
  border: 2px solid var(--ochre);
  border-radius: var(--radius);
  padding: 0.55rem 0.8rem;
  width: min(280px, 80%);
  margin-bottom: 1.2rem;
}

/* ---------- home: fable path ---------- */

.home-head h2 { font-size: 1.5rem; margin: 0.4rem 0 1rem; }

.fable-block {
  background: var(--wall-soft);
  border: 1px solid rgba(224, 169, 62, 0.25);
  border-left: 5px solid var(--fresco);
  border-radius: var(--radius);
  padding: 0.8rem 1rem 1rem;
  margin-bottom: 1.1rem;
}
.fable-block.locked { opacity: 0.55; border-left-color: var(--cream-dim); }
.fable-block h3 {
  margin: 0 0 0.7rem;
  font-size: 1.25rem;
  color: var(--ochre);
}
.fnum {
  display: inline-block;
  background: var(--fresco);
  color: var(--cream);
  border-radius: 6px;
  padding: 0 0.5rem;
  margin-right: 0.3rem;
  font-size: 1rem;
}
.ficon { font-size: 1rem; }
.crown { font-size: 1.1rem; }
.soon { font-family: var(--sans); font-size: 0.85rem; color: var(--cream-dim); font-style: italic; }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: 74px;
  padding: 0.5rem 0.2rem 0.4rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  background: var(--wall);
  color: var(--cream);
  cursor: pointer;
  font-family: var(--sans);
}
.node-icon { font-size: 1.5rem; }
.node-label { font-size: 0.7rem; letter-spacing: 0.03em; }
.node.open { border-color: var(--ochre); }
.node.open:active { transform: scale(0.95); }
.node.done { border-color: var(--green); opacity: 0.9; }
.node.done .node-icon { color: var(--green); }
.node.shut { opacity: 0.45; cursor: default; }

/* ---------- step screens ---------- */

.step-head { text-align: center; margin-bottom: 0.6rem; }
.step-head .step-ic { font-size: 1.6rem; }
.step-head h2 { margin: 0.1rem 0 0; font-size: 1.6rem; color: var(--ochre); }
.step-head .step-fab { margin: 0; font-family: var(--serif); font-style: italic; color: var(--cream-dim); }

.scene {
  margin: 0.6rem auto;
  max-width: 440px;
  border: 6px solid var(--fresco-deep);
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--ochre), 0 8px 22px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  background: #f6e8c9;
}
.scene svg { display: block; width: 100%; height: auto; }
.scene.small { max-width: 300px; }

.ask {
  text-align: center;
  color: var(--cream-dim);
  font-size: 0.95rem;
  margin: 0.3rem 0;
}

.card-progress, .refill-progress {
  text-align: center;
  color: var(--cream-dim);
  font-size: 0.85rem;
  margin: 0.7rem 0 0.4rem;
}

/* vocab */
.vocab-card { text-align: center; }
.vocab-emoji { font-size: 5rem; margin: 1rem 0 0.5rem; }
.vocab-word {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: bold;
  color: var(--ochre);
  margin: 0.3rem 0 0.6rem;
}
.quickcheck { text-align: center; }
.prompt-word {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: bold;
  color: var(--ochre);
  text-align: center;
  margin: 0.8rem 0;
}

/* story */
.story-page { text-align: center; }
.story-text {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.5;
  margin: 0.9rem 0.4rem 0.5rem;
}
/* GAUNTLET F5 — quoted hexameter. Each ' / '-separated segment is its own
   centred line; a verse too long for the width still wraps INSIDE its line,
   which is what a printed text does with the same problem. (No hanging
   indent: the page is centred, and an indent on a centred line only pushes
   the whole block sideways.) `.verse-many` is the >4-verse step-down: seven
   hexameters at the prose size pushed the play controls off a 375x812
   screen — the same fold the fix exists to clear. */
.story-text.verse { margin: 0.7rem 0.3rem 0.4rem; }
.story-text.verse .versus { display: block; }
.story-text.verse-many {
  font-size: 1.05rem;
  line-height: 1.42;
}
.margo {
  list-style: none;
  margin: 0.4rem auto 0.6rem;
  padding: 0.5rem 0.9rem;
  max-width: 380px;
  text-align: left;
  background: var(--wall-soft);
  border-left: 3px solid var(--ochre);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem;
}
.margo li { margin: 0.15rem 0; }
.margo strong { color: var(--ochre); font-family: var(--serif); }
.margo em { color: var(--cream-dim); }
.g-emoji { margin: 0 0.2rem; }

/* options */
.opt-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.8rem 0;
}
.opt {
  font-family: var(--serif);
  font-size: 1.25rem;
  background: var(--wall-soft);
  color: var(--cream);
  border: 2px solid var(--ochre);
  border-radius: var(--radius);
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  min-width: 72px;
}
.opt:active { transform: scale(0.95); }
.opt:disabled { opacity: 0.35; border-color: var(--cream-dim); cursor: default; }
.emoji-opt { font-size: 2.4rem; padding: 0.5rem 1rem; }

/* CLAR: a chip that draws a CROPPED ACTOR rather than a whole mini-scene.
   The sprite is transparent — the chip's own parchment face is the
   background — so it gets a little breathing room instead of the raster's
   edge-to-edge fill, and no clipping radius it does not need. */
.scn-thumb.crop { padding: 3px; box-sizing: border-box; }

/* PICTURE-CHOICE ROWS (verba quick check, sonus, boss quiz, refill).
   Above 480px the flex row is right; the grid below is the phone rule. */
.opt-row.picks .opt { min-height: 44px; }

/* NARROW PHONES: a SONUS question offers up to four picture tiles, and a
   picture tile is 72px of art + 32px of padding + 4px of border = 108px.
   Four of those need 460px and the content column is 343px at 375 and 388px
   at 420 — so the row wrapped and orphaned the last tile onto its own line,
   and a THIRD tile ended up within 7px of the right edge (any scrollbar or
   any slightly wider glyph pushed it over). The tiles now shrink with the
   viewport instead: 15vw is 54px at 360, 56px at 375 and 63px at 420, which
   puts four tiles plus their gaps at 305 / 314 / 341px inside content columns
   of 328 / 343 / 388px — a whole row, with room to spare, at every width the
   app supports. `max-width` caps the growth so nothing changes above 480px,
   where the fixed 72px box has always been right. (Deliberately not `min()`:
   this file stays plain CSS 2.1-shaped so it can be read at a glance, and
   width + max-width IS min().) */
@media (max-width: 480px) {
  .opt-row { gap: 0.45rem; }
  .emoji-opt { padding: 0.4rem 0.4rem; }
  .emoji-opt .scn-thumb {
    width: 15vw; height: 15vw;
    max-width: 72px; max-height: 72px;
  }
}

/* ---- CLAR: PHONE PICTURE CHIPS ARE A 2-COLUMN GRID ----
   The shrink-to-fit rule above solved the WRAPPING problem by making the
   art smaller, and at 375px that lands on a 56px picture: a whole
   mini-scene, or now a cropped actor, inside a square the size of a
   fingernail. The owner's students hold the phone at arm's length.

   Four tiles never belonged on one line of a 343px column. Two columns of
   ~160px do, and they give the art 96–140px — between 1.7x and 2.5x the
   old width, so four to six times the area — with no third tile squeezed
   against the right edge and no orphan on a line of its own. A set of
   three fills the first row and centres the last chip under it, which is
   the ordinary shape of a phone quiz.

   `width` + `max-width` + `min-width` is min()/max() spelled out, so this
   file stays readable as plain CSS (same reasoning as the block above).
   34vw is 109px at 320, 127px at 375, 143px (capped to 140) at 420. The
   button's own 44px minimum is stated in the base rule, so a chip is never
   below the touch-target floor even if the art ever shrinks. */
@media (max-width: 480px) {
  .opt-row.picks {
    display: -ms-grid;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 0.5rem;
    margin: 0.7rem 0;
  }
  /* an odd last chip centres itself across both columns instead of hugging
     the left edge — three options are the commonest set in the app. */
  .opt-row.picks .opt:last-child:nth-child(odd) {
    grid-column: 1 / span 2;
  }
  .opt-row.picks .emoji-opt { padding: 0.35rem; }
  .opt-row.picks .emoji-opt .scn-thumb {
    width: 34vw;  min-width: 96px;  max-width: 140px;
    height: 34vw; min-height: 96px; max-height: 140px;
  }
}

/* sentences */
.sentence {
  font-family: var(--serif);
  font-size: 1.45rem;
  text-align: center;
  margin: 0.8rem 0.3rem;
  /* a story line is Latin prose and wraps between words, but a compound like
     "Trōiānōrum-cum-Latīnīs" or a long proper noun on a 320px screen has no
     break opportunity at all, and one such word used to push the whole line
     past the right edge. break-word only splits a word that would otherwise
     overflow, so ordinary lines are untouched. */
  overflow-wrap: break-word;
  word-wrap: break-word;          /* older WebKit spelling; same behaviour */
}
.word {
  font-family: var(--serif);
  font-size: 1.35rem;
  background: transparent;
  color: var(--cream);
  border: 0;
  border-bottom: 2px dashed var(--cream-dim);
  padding: 0.1rem 0.25rem;
  cursor: pointer;
}
.word:disabled { opacity: 0.4; text-decoration: line-through; cursor: default; }
.word.found { color: var(--fresco); border-bottom: 2px solid var(--fresco); font-weight: bold; }
.word.fixed { color: var(--green); border-bottom: 2px solid var(--green); font-weight: bold; }
.blank {
  color: var(--ochre);
  border-bottom: 2px solid var(--ochre);
  padding: 0 0.4rem;
  margin: 0 0.2rem;
}
.blank.filled { color: var(--green); border-color: var(--green); font-weight: bold; }
/* GAUNTLET F4: a full stop that follows a blank belongs TO the sentence,
   not to the gap. The blank's trailing 0.2rem margin + 0.4rem padding is
   pulled back so 'Aegyptō ____.' reads as one clause instead of leaving the
   period stranded. `display:inline-block` is what makes the negative margin
   bite on an inline run in every engine. */
.post-blank {
  display: inline-block;
  margin-left: -0.55rem;
}

/* memory */
.mem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
  max-width: 420px;
  margin: 0.8rem auto;
}
.mem-card {
  aspect-ratio: 3 / 2.6;
  min-height: 64px;
  border-radius: 10px;
  border: 2px solid var(--ochre);
  background: var(--fresco);
  background-image: radial-gradient(circle at 50% 45%, rgba(243, 230, 208, 0.18) 0 30%, transparent 32%);
  cursor: pointer;
  color: var(--cream);
}
.mem-card.flip { background: var(--wall-soft); }
.mem-card.hit { border-color: var(--green); background: rgba(127, 176, 105, 0.18); cursor: default; }
.mem-card .face { font-size: 1.05rem; font-family: var(--serif); word-break: break-word; }
.mem-card.pic .face { font-size: 1.7rem; }

/* ---- AENIGMATA: THE MEMORY BOARD ON A PHONE ----
   Same complaint as the picture chips, one screen further on. Four fixed
   columns inside a 343px content column give a card of 79x68 CSS px with a
   56px picture in it; two cards showing a cropped fox and a cropped wolf at
   that size are two beige smudges, and the learner matches by memory of
   POSITION rather than of the word — which is the one thing this exercise is
   not supposed to teach.

   app.js writes mem-cols-2 or mem-cols-3 on the grid from the card count, and
   this is the other half of that: two columns for an eight-card board, three
   for a bigger one, both full-bleed to the content column instead of capped at
   420px. The numbers at the widths the app supports:

       320px screen (288px column)   3 cols → 90px card    2 cols → 139px
       375px screen (343px column)   3 cols → 108px card   2 cols → 165px
       420px screen (388px column)   3 cols → 123px card   2 cols → 189px

   — all above the 88px floor, and `min-height` states that floor outright so
   a future gap change cannot quietly drop below it. The card is its own touch
   target and is far past 44px in both axes at every one of those widths. */
@media (max-width: 480px) {
  .mem-grid { max-width: none; gap: 0.5rem; }
  .mem-grid.mem-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .mem-grid.mem-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .mem-card { min-height: 88px; }
  .mem-card .face { font-size: 1.2rem; }
  /* the picture grows with the card: a three-column card is 90–123px wide, a
     two-column one 139–189px, so the art gets 72px and 96px respectively
     instead of the 56px it had at every size. */
  .mem-card.pic .scn-thumb { width: 72px; height: 72px; }
  .mem-grid.mem-cols-2 .mem-card.pic .scn-thumb { width: 96px; height: 96px; }
}

/* scramble */
.built {
  font-family: var(--serif);
  font-size: 1.4rem;
  text-align: center;
  min-height: 2rem;
  color: var(--ochre);
  border-bottom: 2px solid var(--wall-soft);
  max-width: 420px;
  margin: 0.6rem auto;
  padding-bottom: 0.3rem;
}
.chip-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.6rem;
}

/* ludus */
.ludus-wrap { text-align: center; }
#game {
  width: 100%;
  max-width: 480px;
  border: 6px solid var(--fresco-deep);
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--ochre), 0 8px 22px rgba(0, 0, 0, 0.45);
  touch-action: none;
}

/* finis / refill */
.finis { text-align: center; padding-top: 2rem; }
.euge {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: bold;
  color: var(--ochre);
  margin: 0.5rem 0;
}
.bonus { font-size: 1.4rem; color: var(--green); font-family: var(--serif); }
/* the region's own closing line (boss.postWin), under the standard victory
   text: quieter than the "Vīcistī!" above it, because it is the story
   speaking rather than the game. */
.post-win {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--cream-dim);
  margin: 0.9rem auto 1.1rem;   /* space under it too: the map button follows */
  max-width: 22em;
  padding: 0 0.6rem;
  overflow-wrap: break-word;
}
.hearts-big { font-size: 2rem; letter-spacing: 0.2rem; }
.refill { text-align: center; }
.refill h2 { color: var(--fresco); font-size: 1.3rem; }

/* leaderboard */
.ordo h2 { text-align: center; color: var(--ochre); }
.board { list-style: none; margin: 1rem 0; padding: 0; }
.board li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--wall-soft);
  border: 1px solid rgba(224, 169, 62, 0.2);
  border-radius: var(--radius);
  padding: 0.55rem 0.9rem;
  margin-bottom: 0.5rem;
  font-family: var(--serif);
  font-size: 1.15rem;
}
.board li.me { border: 2px solid var(--ochre); background: rgba(224, 169, 62, 0.12); }
.board .rank { width: 2.2rem; text-align: center; }
.board .bname { flex: 1; }
.board .bxp { color: var(--ochre); }
.ordo { text-align: center; }

/* toast feedback */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: bold;
  padding: 0.55rem 1.5rem;
  border-radius: 999px;
  z-index: 10;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok { background: var(--green); color: var(--ink); }
.toast.bad { background: var(--fresco); color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
  .btn:active, .opt:active, .node.open:active, button.chip:active { transform: none; }
}

@media (max-width: 380px) {
  .steps { gap: 0.35rem; }
  .node { width: 64px; }
  .story-text, .sentence { font-size: 1.25rem; }
  /* the verse step-down travels with them: this is the width the >4-verse
     fold problem was measured at (GAUNTLET F5) */
  .story-text.verse-many { font-size: 0.98rem; }
}

/* speak button */
.speak {
  font-size: 1.1rem;
  background: var(--wall-soft);
  border: 1px solid var(--ochre);
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  cursor: pointer;
  vertical-align: middle;
}
.speak:active { transform: scale(0.9); }

/* ============================================================
   PRŌVINCIA (overworld map), BOSS, and MEMORY-METER styles
   ============================================================ */

/* --- map toggle chip --- */
.chip.nav-map { border-color: var(--green); }

/* --- the overworld screen --- */
.provincia { padding: 0.4rem 0 1.2rem; }
.prov-head { text-align: center; margin-bottom: 0.5rem; }
.prov-head h2 { margin: 0.2rem 0 0; color: var(--ochre); font-size: 1.5rem; }
.prov-sub { margin: 0.1rem 0 0; color: var(--cream-dim); font-size: 0.85rem; }

/* THE BOARD IS THE SCREEN on a phone: full-bleed to both edges, no frame.
   The old bright-orange rounded border made it look like a widget pasted
   onto the page instead of the thing you came to play. On a wide screen it
   becomes a centred panel with a dark bezel — still no orange. */
.map-screen { padding-left: 0; padding-right: 0; max-width: 720px; }
.map-screen .prov-head { padding: 0 1rem; }

.map-frame {
  margin: 0.5rem 0 0.7rem;
  overflow: hidden;
  background: #1d120c;
  line-height: 0;          /* kill inline-svg gap */
  box-shadow: inset 0 8px 16px -10px #000, inset 0 -8px 16px -10px #000;
}
@media (min-width: 720px) {
  .map-frame {
    border-radius: var(--radius);
    border: 1px solid rgba(224, 169, 62, 0.22);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(0, 0, 0, 0.45);
  }
}
/* the pannable viewport: native scroll gives touch momentum for free, and
   map.js adds mouse drag + parallax on top of it. */
.map-view {
  height: 68vh;
  min-height: 380px;
  max-height: 720px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none;          /* the board is the interface, not a scrollbar */
}
.map-view::-webkit-scrollbar { width: 0; height: 0; }
.map-view:focus-visible { outline: 3px solid var(--ochre); outline-offset: -3px; }
.map-frame svg.worldmap { width: 100%; height: auto; display: block; }

/* the pool of light under the tile the learner is standing on */
.mm-glow {
  animation: mm-pulse 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes mm-pulse {
  0%   { opacity: 0.55; transform: scale(0.92); }
  50%  { opacity: 1;    transform: scale(1.06); }
  100% { opacity: 0.55; transform: scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .mm-glow { animation: none; opacity: 0.9; }
}

/* nodes get a gentle hover/press lift; the fox "walks" via transition */
/* IMPORTANT: never put a CSS `transform` on these SVG <g> elements — a CSS
   transform overrides the SVG transform="translate(x,y)" ATTRIBUTE that
   positions them, which would teleport nodes to the top-left corner AND break
   clicks (the element moves out from under the pointer between mousedown and
   mouseup, so no click fires). Press feedback uses opacity, which is safe. */
.map-node[style*="pointer"] { cursor: pointer; }
.map-node[style*="pointer"]:active { opacity: 0.75; }
/* the fox avatar sits ON TOP of the node it stands on; let taps pass through
   to the node beneath it instead of being swallowed by the fox group. */
.map-fox { pointer-events: none; }

.map-screen .btn.primary, .provincia .btn.primary {
  display: block;
  margin: 0 auto;
}

/* ============================================================
   NAV — the continuous track board
   ------------------------------------------------------------
   The board shows every region of the track at once, so the screen
   grew two pieces of navigation: the track name is now a control
   that opens the REGION INDEX, and the index itself is a sheet over
   the board (never a new screen — losing the board you were reading
   is exactly the disorientation this fix exists to remove).
   ============================================================ */

.prov-title {
  cursor: pointer;
  display: inline-block;
  border-radius: 8px;
  padding: 0.1rem 0.5rem;
}
.prov-title:active { opacity: 0.75; }
.prov-title:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }
.prov-caret { font-size: 0.7em; opacity: 0.7; vertical-align: 0.12em; }

/* the region index sheet */
.regio-index {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(10, 6, 3, 0.62);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.regio-index[hidden] { display: none; }
.ri-panel {
  width: 100%;
  max-width: 560px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: #24160e;
  border: 1px solid rgba(224, 169, 62, 0.28);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.55);
}
@media (min-width: 720px) {
  .regio-index { align-items: center; }
  .ri-panel { border-bottom: 1px solid rgba(224, 169, 62, 0.28); border-radius: 16px; }
}
.ri-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem 0.5rem;
  border-bottom: 1px solid rgba(224, 169, 62, 0.18);
}
.ri-head h3 {
  margin: 0;
  color: var(--ochre);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}
.ri-close {
  background: none;
  border: 0;
  color: var(--cream-dim);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}
.ri-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.5rem 0.9rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ri-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 48px;          /* touch target, DESIGN §9 */
  padding: 0.45rem 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(224, 169, 62, 0.14);
  border-radius: 10px;
  margin: 0.28rem 0;
  color: var(--cream);
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}
.ri-row:active { opacity: 0.75; }
.ri-row:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }
.ri-row.is-here { border-color: var(--ochre); background: rgba(224, 169, 62, 0.12); }
.ri-row.is-shut { color: var(--cream-dim); opacity: 0.62; cursor: default; }
.ri-num {
  flex: 0 0 auto;
  min-width: 2.6em;
  color: var(--ochre);
  font-weight: bold;
  letter-spacing: 0.05em;
}
.ri-name { flex: 1 1 auto; }
.ri-prog { flex: 0 0 auto; color: var(--cream-dim); font-size: 0.85rem; }
.ri-mark { font-size: 0.95rem; }
/* a locked row answers the tap instead of ignoring it */
.ri-deny { animation: ri-shake 0.4s ease; }
@keyframes ri-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .ri-deny { animation: none; border-color: var(--fresco); }
}

/* the two lines the victory screen gained: where you are being sent next,
   and the one that says a whole track is finished */
.next-regio { color: var(--ochre); font-size: 1.05rem; margin: 0.2rem 0 0.6rem; }
.cursus-done {
  color: var(--ochre);
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin: 0.3rem 0 0.6rem;
}

/* --- boss intro --- */
.boss-intro { text-align: center; padding-top: 0.5rem; }
.boss-intro h2 { color: var(--fresco); margin: 0.4rem 0 0.2rem; font-size: 1.7rem; }
.boss-tag { color: var(--cream-dim); margin: 0 0 1rem; font-style: italic; }

/* --- boss fight canvas --- */
.boss-wrap { text-align: center; }
.boss-wrap .ask { color: var(--ochre); margin: 0.3rem 0 0.5rem; }
#bossgame {
  width: 100%;
  max-width: 480px;
  height: auto;
  border: 3px solid var(--fresco-deep);
  border-radius: var(--radius);
  box-shadow: 0 0 0 2px var(--ochre);
  touch-action: none;       /* let us own the touch-drag */
  background: #f6e8c9;
}

/* --- memory meters (counter + soft clock) --- */
.mem-meters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0.2rem 0 0.7rem;
}
.mem-meter {
  font-size: 1rem;
  color: var(--cream);
  background: var(--wall-soft);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  min-width: 3.2rem;
  text-align: center;
}
.mem-clock {
  display: inline-block;
  width: 120px;
  height: 12px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--wall-soft);
}
.mem-clock-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ochre);
  border-radius: 999px;
  transition: width 0.2s linear, background 0.3s ease;
}
.mem-clock-bar.low { background: var(--fresco); }

/* ============================================================
   M4 — LANDING (logged out) and the THREE DOORS (home)
   ============================================================ */

/* --- landing --- */
.landing { text-align: center; padding-top: 1.6rem; }
.landing-head h1 {
  font-size: 2.6rem;
  letter-spacing: 0.18em;
  margin: 0;
  color: var(--ochre);
}
.landing .tagline {
  font-family: var(--serif);
  font-style: italic;
  color: var(--cream-dim);
  margin: 0.2rem 0 1.2rem;
}

/* the triptych: fox scene | ark | ship. Flex so it never overflows 375px. */
.hero-band {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 auto 1.2rem;
  padding: 0.5rem;
  max-width: 480px;
  border: 4px solid var(--fresco-deep);
  border-radius: var(--radius);
  box-shadow: 0 0 0 3px var(--ochre), 0 8px 22px rgba(0, 0, 0, 0.45);
  background: linear-gradient(180deg, #f6e8c9 0%, #e9d4a6 100%);
  overflow: hidden;
}
.hero-panel { flex: 1 1 0; line-height: 0; min-width: 0; }
.hero-panel svg { display: block; width: 100%; height: auto; }
.hero-art { padding-bottom: 0.4rem; }

.pitch {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--cream);
  margin: 0.2rem 0 0.1rem;
}
.pitch-sub { color: var(--cream-dim); margin: 0 0 0.2rem; }
.pitch-three {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ochre);
  margin: 0 0 1.4rem;
  font-size: 0.95rem;
}
/* --- lesson preview band: what a capitulum actually looks like --- */
.preview { margin-top: 2rem; }
.preview-lead {
  font-family: var(--serif);
  font-style: italic;
  color: var(--cream-dim);
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
}
.preview-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: stretch;
}
.prev-card {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  background: var(--wall-soft);
  border: 1px solid rgba(224, 169, 62, 0.25);
  border-radius: 10px;
  padding: 0.35rem 0.35rem 0.3rem;
}
.prev-art {
  display: block;
  background: #f6e8c9;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
  aspect-ratio: 4 / 3;
}
.prev-art svg { display: block; width: 100%; height: 100%; }
.prev-card figcaption {
  font-family: var(--serif);
  font-size: 0.78rem;
  color: var(--ochre);
  letter-spacing: 0.06em;
  padding-top: 0.25rem;
}

.landing-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.landing-actions .btn.ghost { font-size: 1rem; padding: 0.7rem 1.4rem; }

/* --- the three doors --- */
.doors-head { text-align: center; margin: 0.4rem 0 1rem; }
.doors-head h2 { font-size: 1.5rem; margin: 0; }
.doors-sub { color: var(--cream-dim); margin: 0.1rem 0 0; font-family: var(--serif); font-style: italic; }

/* the portico and the landing are the two screens that earn extra width on a
   desktop; every other screen stays in the 540px reading column. */
.screen.doors-screen-wrap, .screen.landing-screen { max-width: 860px; }

.doors {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* wide screens: the three doors stand side by side like a portico */
@media (min-width: 620px) {
  .doors { flex-direction: row; align-items: stretch; }
  .doors .door { flex: 1 1 0; }
}

.door {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--wall-soft);
  border: 1px solid rgba(224, 169, 62, 0.3);
  border-left: 5px solid var(--fresco);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  color: var(--cream);
  text-align: left;
  width: 100%;
  min-height: 44px;
}
@media (min-width: 620px) {
  .door { flex-direction: column; text-align: center; border-left: 1px solid rgba(224,169,62,0.3); border-top: 5px solid var(--fresco); }
}
.door:active { transform: scale(0.985); }

/* the arch is an SVG behind the art; both live in one positioned box */
.door-frame {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 104px;
  height: 126px;
  line-height: 0;
}
@media (min-width: 620px) { .door-frame { width: 130px; height: 158px; } }
.door-svg { display: block; width: 100%; height: 100%; }
.door-art {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  line-height: 0;
}
.door-art svg { display: block; width: 66px; height: auto; }
@media (min-width: 620px) { .door-art svg { width: 84px; } }
/* Scenes.sprite() letterboxes a WIDE actor inside a SQUARE box, so the ark
   and the ship come out visually smaller than the (square) fox head at the
   same CSS width. Give those two a wider box — up to the width of the arch
   opening, never past it. */
.door-historia .door-art svg, .door-aeneis .door-art svg { width: 80px; }
@media (min-width: 620px) {
  .door-historia .door-art svg, .door-aeneis .door-art svg { width: 100px; }
}

.door-label { display: block; }
.door-titulus {
  display: block;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.15;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--ochre);
}
.door-sub {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  color: var(--cream-dim);
  font-size: 0.9rem;
}
/* PRŌVECTĪS: label flanked by two sprigs. Nothing overlaps anything — the
   wreath-behind-the-word version was unreadable at phone size. */
.laurel {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  padding: 0.1rem 0.4rem 0.1rem 0.35rem;
  border: 1px solid rgba(224, 169, 62, 0.45);
  border-radius: 999px;
  background: rgba(224, 169, 62, 0.08);
}
.laurel .sprig { display: block; flex: 0 0 auto; }
/* keep "HISTORIA SACRA" on one line on a narrow phone */
@media (max-width: 420px) {
  .door-titulus { font-size: 1.08rem; letter-spacing: 0.05em; }
  .door-sub { font-size: 0.82rem; }
}
.laurel-text {
  font-family: var(--serif);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--ochre);
  line-height: 1.2;
  white-space: nowrap;
}

/* ============================================================
   M4 — capitulum screen, COMPLĒ slots, real ōrdō, MOX screen
   ============================================================ */

/* buttons under a single capitulum's step row */
.cap-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

/* --- COMPLĒ: tappable blanks ---
   A blank is a BUTTON now (tap it to take the word back out), so it needs
   its own button reset on top of the .blank look. */
.blank.slot {
  font-family: var(--serif);
  font-size: 1.35rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ochre);
  color: var(--ochre);
  padding: 0.1rem 0.5rem;
  margin: 0 0.15rem;
  min-width: 3.4rem;
  cursor: pointer;
}
.blank.slot.taken { color: var(--cream); border-bottom-color: var(--cream-dim); }
.blank.slot.filled { color: var(--green); border-color: var(--green); font-weight: bold; cursor: default; }

/* --- ōrdō: gradus line + honest empty board --- */
.gradus-line {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--cream);
  margin: 0.2rem 0 1rem;
}
.gradus-name {
  color: var(--ochre);
  letter-spacing: 0.08em;
  font-weight: bold;
}
.gradus-next { color: var(--cream-dim); font-size: 0.85rem; }
.board-empty, .board-wait {
  justify-content: center;
  color: var(--cream-dim);
  font-style: italic;
}
.board li.exemplum { opacity: 0.7; }
.board .tag {
  font-size: 0.7rem;
  font-style: normal;
  color: var(--cream-dim);
  border: 1px solid var(--cream-dim);
  border-radius: 6px;
  padding: 0 0.3rem;
  margin-left: 0.35rem;
}

/* --- MOX: a track still in fabricā --- */
.mox { text-align: center; padding-top: 1.4rem; }
.mox-kicker {
  font-family: var(--serif);
  letter-spacing: 0.16em;
  color: var(--cream-dim);
  margin: 0;
  font-size: 0.9rem;
}
.mox h2 {
  font-size: 2.6rem;
  letter-spacing: 0.22em;
  color: var(--ochre);
  margin: 0.2rem 0 0;
}
.mox-sub {
  font-family: var(--serif);
  font-style: italic;
  color: var(--cream-dim);
  margin: 0 0 1.4rem;
}
.mox-lead { color: var(--cream-dim); font-size: 0.9rem; margin: 0 0 0.4rem; }
.mox-list {
  list-style: none;
  margin: 0 auto 1.5rem;
  padding: 0.6rem 0.8rem;
  max-width: 340px;
  text-align: left;
  background: var(--wall-soft);
  border: 1px solid rgba(224, 169, 62, 0.25);
  border-left: 5px solid var(--ochre);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--serif);
  columns: 2;
  column-gap: 1rem;
  font-size: 0.95rem;
}
@media (max-width: 420px) { .mox-list { columns: 1; } }
.mox-list li { color: var(--cream-dim); margin: 0.15rem 0; break-inside: avoid; }

/* ============================================================
   M4 — FĀBULA autoplay controls and the SONUS step
   ============================================================ */

/* pause/play + dwell bar + voice toggle, under the story text */
.auto-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.6rem auto 0.2rem;
  max-width: 380px;
}
.auto-row .chip {
  min-width: 44px;            /* touch target (DESIGN §9) */
  min-height: 36px;
  font-size: 1.1rem;
  cursor: pointer;
}
.auto-bar {
  flex: 1 1 auto;
  height: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--wall-soft);
  border-radius: 999px;
  overflow: hidden;
}
.auto-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ochre);
  border-radius: 999px;
  transition: width 0.12s linear;
}
@media (prefers-reduced-motion: reduce) { .auto-bar-fill { transition: none; } }

/* --- SONUS --- */
.sonus { text-align: center; }
.big-speak {
  font-size: 2.6rem;
  line-height: 1;
  background: var(--wall-soft);
  border: 3px solid var(--ochre);
  border-radius: 50%;
  width: 92px;
  height: 92px;
  color: var(--cream);
  cursor: pointer;
  margin: 0.6rem auto 0.2rem;
  display: block;
}
.big-speak:active { transform: scale(0.94); }

/* speech unavailable: say so plainly and let the learner move on */
.sine-sono { text-align: center; padding-top: 1.4rem; }
.mute-glyph { font-size: 3.4rem; margin: 0.4rem 0 0.2rem; opacity: 0.8; }
.notice {
  font-family: var(--serif);
  color: var(--cream-dim);
  max-width: 340px;
  margin: 0 auto 1.2rem;
}
.notice.small { font-size: 0.85rem; margin-bottom: 0.6rem; }

/* ============================================================
   AUTH screen (login / register)
   ============================================================ */
.auth { max-width: 380px; margin: 0 auto; padding: 1.2rem 0 2rem; }
.auth-head { text-align: center; margin-bottom: 1rem; }
.auth-logo { margin: 0 auto 0.3rem; line-height: 0; }
.auth-head h1 { margin: 0; color: var(--ochre); letter-spacing: 0.08em; font-size: 1.8rem; }
.auth-sub { margin: 0.1rem 0 0; color: var(--cream-dim); font-family: var(--serif); font-style: italic; }

.auth-form { display: flex; flex-direction: column; gap: 0.7rem; }
.auth-form h2 { margin: 0 0 0.2rem; color: var(--cream); font-size: 1.25rem; text-align: center; }
.auth-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--cream-dim); }
.auth-field input {
  font-size: 1rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 2px solid var(--wall-soft);
  background: var(--wall-soft);
  color: var(--cream);
}
.auth-field input:focus { outline: 3px solid var(--ochre); outline-offset: 1px; border-color: var(--ochre); }

.auth-check { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--cream-dim); }
.auth-check input { width: 18px; height: 18px; }

.avatar-row { border: 0; padding: 0; margin: 0.2rem 0; }
.avatar-row legend { font-size: 0.85rem; color: var(--cream-dim); padding: 0; margin-bottom: 0.3rem; }
.avatar-opt {
  background: var(--wall-soft);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 0.25rem;
  margin-right: 0.4rem;
  cursor: pointer;
  line-height: 0;
}
.avatar-opt.sel { border-color: var(--ochre); }

.auth-err { color: var(--fresco); min-height: 1.1em; margin: 0; font-size: 0.85rem; text-align: center; }
.auth-switch { text-align: center; font-size: 0.85rem; color: var(--cream-dim); margin: 0.3rem 0 0; }
.linklike {
  background: none; border: 0; color: var(--ochre);
  text-decoration: underline; cursor: pointer; font: inherit; padding: 0;
}
.ordo-actions { display: flex; justify-content: center; margin-top: 0.8rem; }

/* ---------- M9: PWA install chip (js/pwa.js) ----------
   A modest, dismissible offer that sits ABOVE the safe area at the bottom of
   a phone and never covers the topbar or the answer buttons. It is a panel in
   the same fresco language as the rest of the app: umber wall, ochre rule. */
.pwa-chip {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(140%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: calc(100% - 1.2rem);
  max-width: 460px;
  margin-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  padding: 0.55rem 0.7rem;
  background: var(--wall-soft);
  border: 1px solid rgba(224, 169, 62, 0.45);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
  opacity: 0;
}
.pwa-chip.show { transform: translateX(-50%) translateY(0); opacity: 1; }

.pwa-chip .pwa-fox { flex: 0 0 auto; line-height: 0; }
.pwa-chip .pwa-fox svg { display: block; }

.pwa-chip .pwa-text {
  flex: 1 1 auto;
  min-width: 0;                       /* let the sub-line ellipsize, not push */
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.pwa-chip .pwa-text b {
  font-family: var(--serif);
  letter-spacing: 0.06em;
  color: var(--ochre);
  font-size: 0.95rem;
}
.pwa-chip .pwa-text small {
  color: var(--cream-dim);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pwa-chip .pwa-yes { flex: 0 0 auto; margin: 0; }
.pwa-chip .pwa-no {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--cream-dim);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.2rem 0.35rem;
  cursor: pointer;
}
.pwa-chip .pwa-no:active { transform: scale(0.9); }

@media (max-width: 360px) {
  .pwa-chip .pwa-text small { display: none; }   /* title + buttons still fit */
}