/* Layout: one centered column. Header (title, install on Android, night/day, settings), score panel, a notebook-ruled
   card with the big syllable, two answer buttons with their caption, then the table of syllables.
   One typeface (Andika, drawn for early readers), self-hosted so the app works offline.
   Consonants blue, vowels red, like a school silabario; pencil yellow marks progress.
   Spacing: 16px between blocks and inside boxes, 12px inside groups, 8px between small items (12px and 8px on a computer
   screen too short for the answer buttons, at the end).
   Every control shares one corner radius and every box shares another. Night is the default; day is chosen with the header button.
   Every animation plays even when the device asks for reduced motion: the game is meant to look the same on every phone. */
@font-face{font-family:'Andika';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/andika-400.woff2) format('woff2')}
@font-face{font-family:'Andika';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/andika-700.woff2) format('woff2')}

:root{
  --ground:#0E1433;
  --paper:#19214F;
  --line:#2E3A7C;
  --track:#262F6B;
  --ink:#EEF2FF;
  --ink-soft:#A8B5E6;
  --consonant:#8DB4FF;
  --vowel:#FF8FA3;
  --rule:#3A4A98;
  --rule-strong:#5670CF;
  --margin:#C2566B;
  --ok:#3DD08A;
  --on-ok:#062414;
  --ok-edge:#1E8F5A;
  --edge:#0A0F29;
  --focus:#FFC635;
  --pencil:#FFC635;
  /* The outline of yellow tiles, chips and the points bar: invisible at night, darker by day (see below). */
  --pencil-edge:#FFC635;
  --pencil-shade:rgba(27,37,87,.16);
  --on-pencil:#1B2557;
  --scrim:rgba(14,20,51,.62);
  --font:'Andika','Verdana','Segoe UI',system-ui,sans-serif;
  --r-ctl:14px;
  --r-box:22px;
  --gap:16px;
  --gap-m:12px;
  --gap-s:8px;
  --lift:6px;
  color-scheme:dark;
}
/* Day: a school notebook. Warm white boxes on a cream page with tan outlines, ruled in light blue with a red margin.
   Pencil yellow is as light as the page and the boxes, so yellow things get a darker pencil edge (3.4:1 on the boxes).
   Red text holds 4.5:1 on the page, and outlines are firm enough to find each control and each empty tile in the table. */
:root[data-mode="day"]{
  --ground:#F4EAD5;
  --paper:#FFFDF7;
  --line:#C2B08C;
  --track:#EDE3CE;
  --ink:#1B2557;
  --ink-soft:#5A5468;
  --consonant:#1C48BE;
  --vowel:#C0223C;
  --rule:#A9C3EB;
  --rule-strong:#7B9FDB;
  --margin:#E8778A;
  --ok:#0E8450;
  --on-ok:#FFFFFF;
  --ok-edge:#095E38;
  --edge:#D9C9A8;
  --focus:#1B2557;
  --pencil-edge:#B98000;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ground);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.45;
  padding-top:calc(var(--gap) + env(safe-area-inset-top,0px));
  padding-bottom:calc(48px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  -webkit-user-select:none;user-select:none;
}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:560px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--gap)}
.wrap>*{min-width:0}

/* header */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gap-m)}
.top-actions{display:flex;align-items:center;gap:var(--gap-s);margin-left:auto}
h1{margin:0;font-weight:700;font-size:clamp(1.3rem,6vw,1.9rem);line-height:1;color:var(--consonant)}
h1 .v{color:var(--vowel)}
.icon-btn{width:44px;min-height:44px;display:grid;place-items:center;padding:0;border-radius:var(--r-ctl);border:2px solid var(--line);background:var(--paper);cursor:pointer}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn[aria-expanded="true"]{background:var(--pencil);border-color:var(--pencil-edge);color:var(--on-pencil)}
/* The install button, on Android only (install.js): the game's own icon, the one it gets on the home screen, with a +
   on its corner. A hairline keeps the navy icon apart from the night button. */
.app-ico{position:relative;display:block;width:26px;height:26px}
.app-ico img{display:block;width:100%;height:100%;border-radius:6px;box-shadow:0 0 0 1px var(--line)}
.app-ico .add{position:absolute;right:-6px;bottom:-6px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--ink);color:var(--paper);box-shadow:0 0 0 2px var(--paper)}
.icon-btn .app-ico svg{width:10px;height:10px;stroke-width:3.2}

/* score */
.panel{display:grid;gap:var(--gap-m);padding:var(--gap);border:2px solid var(--line);border-radius:var(--r-box);background:var(--paper)}
.score-row{position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:var(--gap-m)}
.score-num{margin:0;flex:none;display:flex;align-items:baseline;gap:var(--gap-s);white-space:nowrap;color:var(--ink-soft)}
.score-num strong{font-weight:700;font-size:2.4rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.mini{min-height:44px;flex:none;margin-left:auto;padding:0 14px;border-radius:var(--r-ctl);border:2px solid var(--line);background:transparent;font-size:.9rem;font-weight:700;cursor:pointer}
.mini:disabled{opacity:.45;cursor:default}
@media (max-width:359px){.mini .wide{display:none}}
.plus{position:absolute;left:3.4rem;top:-4px;opacity:0;pointer-events:none;font-weight:700;font-size:1.7rem;color:var(--ok)}
.plus.go{animation:rise .8s ease-out}
@keyframes rise{0%{opacity:0;transform:translateY(10px) scale(.8)}20%{opacity:1}100%{opacity:0;transform:translateY(-20px) scale(1.15)}}
.bar{position:relative;height:24px;border-radius:999px;background:var(--track);overflow:hidden}
.fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:999px;overflow:hidden;background:var(--pencil);box-shadow:inset 0 0 0 2px var(--pencil-edge),inset 0 -6px 0 var(--pencil-shade);transition:width .35s ease}
/* A point lights up (app.js: lightUp): the piece of the bar just earned flashes white, a gleam runs along the filled part
   and the number glows pencil yellow, all within a second. Nothing moves from its place, only the light changes.
   The piece is --at, from 0, and a goal's share of the bar wide. */
.fill::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%) no-repeat;background-size:50% 100%;background-position:-100% 0}
.fill.go::after{animation:shine .8s cubic-bezier(.35,0,.25,1) .18s}
@keyframes shine{from{opacity:1;background-position:-100% 0}to{opacity:1;background-position:200% 0}}
.spark{position:absolute;inset-block:0;left:calc(100% * var(--at,0) / var(--goal,30));width:calc(100% / var(--goal,30));opacity:0;background:#FFFFFF;pointer-events:none}
.spark.go{animation:spark .7s ease-out .12s}
@keyframes spark{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}
.score-num strong.go{animation:glow .8s ease-out}
@keyframes glow{0%,25%{color:var(--pencil-edge);text-shadow:0 0 .35em rgba(255,198,53,.7)}100%{text-shadow:0 0 .35em transparent}}

/* goal reached: yellow pop up over a dimmed page, with confetti behind the card */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;overflow-y:auto;overscroll-behavior:contain;background:var(--scrim);
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;opacity:0;animation:fall linear forwards}
@keyframes fall{0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}100%{opacity:1;transform:translate3d(var(--dx),115vh,0) rotate(var(--rot))}}
.win{position:relative;z-index:1;width:min(100%,380px);display:grid;justify-items:center;gap:var(--gap-s);padding:24px;text-align:center;border-radius:var(--r-box);border:4px solid var(--on-pencil);background:var(--pencil);color:var(--on-pencil);box-shadow:0 9px 0 var(--on-pencil);animation:win-in .45s cubic-bezier(.2,1.2,.4,1)}
@keyframes win-in{0%{opacity:0;transform:scale(.6) translateY(24px)}100%{opacity:1;transform:none}}
.trophy{width:124px;height:124px;animation:bob 1.2s ease-in-out .45s 2}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-10px) rotate(-5deg)}60%{transform:translateY(0) rotate(4deg)}}
.win h2{margin:0;font-weight:700;font-size:clamp(2rem,9vw,2.5rem);line-height:1;text-wrap:balance}
.win-sub{margin:0;font-size:1.2rem;font-weight:700}
.win-count{margin:0;padding:2px 14px;border-radius:var(--r-ctl);background:var(--on-pencil);color:var(--pencil);font-weight:700}
/* When the prize moves the game up a level, or brings the gold cup (app.js: renderReward), a star for each level done
   sits under the title: white on the yellow card, gold on the navy one. The title is longer there, so it is smaller. */
.level-stars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,104px);justify-content:center;gap:4px;width:100%;margin:2px 0 4px;padding:0;list-style:none}
.level-stars li{display:grid;justify-items:center;gap:2px;font-weight:700;font-size:.95rem}
.level-stars svg{width:44px;height:44px}
.level-stars polygon{fill:#FFFFFF;stroke:var(--on-pencil);stroke-width:1.7;stroke-linejoin:round}
.next-level .win h2,.champ .win h2{font-size:clamp(1.6rem,7.4vw,2.2rem)}
.redeem{margin-top:var(--gap-s);min-height:56px;padding:8px 24px;line-height:1.2;text-wrap:balance;border-radius:var(--r-ctl);border:2px solid var(--on-pencil);background:var(--on-pencil);color:var(--pencil);font-weight:700;font-size:1.25rem;cursor:pointer;box-shadow:0 5px 0 var(--pencil-shade)}
.redeem:active{transform:translateY(4px);box-shadow:0 1px 0 var(--pencil-shade)}
.redeem:focus-visible{outline-color:var(--on-pencil)}
/* The first goal of Oraciones (app.js: renderReward) brings the gold cup: the card turns navy with a gold border that
   glows, and the cup and the three stars go gold. */
.champ .win{background:var(--on-pencil);color:var(--pencil);border-color:var(--pencil);box-shadow:0 9px 0 #B98000,0 0 0 7px rgba(255,198,53,.16),0 0 52px 10px rgba(255,198,53,.32)}
.champ .trophy{color:#FFF3C4}
.champ .trophy path:first-child,.champ .trophy rect{fill:var(--pencil)}
.champ .level-stars polygon{fill:var(--pencil);stroke:#FFF3C4}
.champ .win-count{background:var(--pencil);color:var(--on-pencil)}
.champ .redeem{background:var(--pencil);color:var(--on-pencil);border-color:var(--pencil);box-shadow:0 5px 0 #B98000}
.champ .redeem:focus-visible{outline-color:var(--pencil)}

/* syllable card */
.card{position:relative;display:grid;gap:var(--gap-m);justify-items:center;margin-bottom:var(--lift);padding:var(--gap);border:2px solid var(--line);border-radius:var(--r-box);background:var(--paper);box-shadow:0 var(--lift) 0 var(--edge)}
.cap{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.sheet{--fs:clamp(5.2rem,30vw,9.5rem);--fs-long:clamp(4.2rem,23vw,7.4rem);position:relative;width:100%;height:calc(var(--fs) * 1.3);display:grid;align-content:center;overflow:hidden}
.sheet.long .syl{font-size:var(--fs-long)}
.sheet::before{content:"";position:absolute;inset-block:0;left:14px;width:2px;background:var(--margin);opacity:.75;z-index:2;pointer-events:none}
.syl{display:block;position:relative;isolation:isolate;width:100%;margin:0;text-align:center;font-size:var(--fs);font-weight:700;line-height:1;letter-spacing:.04em}
.syl .c{color:var(--consonant)}
.syl .v{color:var(--vowel)}
.syl.pop{animation:pop .3s ease-out}
@keyframes pop{0%{transform:scale(.84);opacity:.2}60%{transform:scale(1.05);opacity:1}100%{transform:scale(1)}}
@supports (text-box: trim-both cap alphabetic){
  /* The trimmed line is the capitals plus the two rules: .8em instead of 1em (the word card's height uses it). */
  .sheet{--cap:.8}
  .syl{text-box:trim-both cap alphabetic;border-block:.04em solid var(--rule-strong)}
  .syl.upper::before{content:"";position:absolute;inset-inline:0;top:50%;border-top:.025em dashed var(--rule);z-index:-1}
}
/* While the child reads (app.js: think). 2 seconds after a syllable shows, the card breathes once every 4 seconds until
   the adult answers: a soft light rises around the card and its lift, fades out again and rests for the last fifth of the
   breath. Only the light changes: nothing moves, speeds up or grows, so it never looks like a countdown. Under the prize
   (main is inert) the card rests, and when the prize closes the breath starts over, with its 2 quiet seconds.
   The light is the yellow of the chosen level, by night and by day. */
.card::after{content:"";position:absolute;inset:-2px -2px calc(-2px - var(--lift));border-radius:var(--r-box);box-shadow:0 0 0 2px var(--pencil),0 0 22px 5px rgba(255,198,53,.45);opacity:0;pointer-events:none}
.card.think::after{animation:breathe 4s ease-in-out 2s infinite}
main[inert] .card::after{animation:none}
@keyframes breathe{0%,80%,100%{opacity:0}40%{opacity:1}}
.listen{display:inline-flex;align-items:center;gap:var(--gap-s);min-height:44px;padding:0 14px;border-radius:var(--r-ctl);border:2px solid var(--line);background:transparent;font-weight:700;cursor:pointer}
.listen svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* answers and their caption share one left edge with every other block */
.answer-block{display:grid;gap:var(--gap-s)}
.answers{display:grid;grid-template-columns:1fr 1.45fr;gap:var(--gap-m);margin-bottom:var(--lift)}
.btn{min-height:68px;padding:0 var(--gap-m);border-radius:var(--r-ctl);border:2px solid var(--ink);font-weight:700;font-size:clamp(1.1rem,5vw,1.3rem);cursor:pointer;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(5px)}
.btn-miss{background:var(--paper);color:var(--ink);border-color:var(--rule-strong);box-shadow:0 var(--lift) 0 var(--rule-strong)}
.btn-miss:active{box-shadow:0 1px 0 var(--rule-strong)}
.btn-ok{background:var(--ok);color:var(--on-ok);border-color:var(--ok-edge);box-shadow:0 var(--lift) 0 var(--ok-edge)}
.btn-ok:active{box-shadow:0 1px 0 var(--ok-edge)}
.note{margin:0;font-size:.9rem;color:var(--ink-soft)}
@media (max-width:340px){.answers{grid-template-columns:1fr}}

/* table of syllables */
.book{display:grid;gap:var(--gap-m)}
.book-top{display:grid;gap:4px}
.book-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px var(--gap-m)}
.book h2{margin:0;font-weight:700;font-size:1.4rem}
.book-count{margin:0;font-size:.95rem;color:var(--ink-soft)}
.book-hint{margin:0;font-size:.9rem;color:var(--ink-soft)}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap-s)}
.tile{display:grid;place-items:center;min-height:44px;border-radius:var(--r-ctl);border:2px dashed var(--line);font-weight:700;font-size:clamp(1rem,4.6vw,1.25rem);color:var(--ink-soft)}
.tile.on{border:2px solid var(--pencil-edge);background:var(--pencil);color:var(--on-pencil)}
.tile.off{opacity:.45}
button.tile{appearance:none;padding:0;background:transparent;cursor:pointer}
@media (hover:hover){button.tile:not(:disabled):hover{border-style:solid;border-color:var(--rule-strong);color:var(--ink)}}
.tile.now{border:2px solid var(--vowel);color:var(--vowel);cursor:default}

/* settings: a title, then groups split by a rule. Each group is named small and spaced out, each setting by name
   in bold above its control, with soft help text below. The save button closes the box at the bottom right. */
.settings{display:grid;gap:var(--gap);padding:var(--gap);border:2px dashed var(--line);border-radius:var(--r-box);background:var(--paper)}
/* While the settings are open they are all the page shows below the header: the gear stays to close them. */
.only-settings>:not(.top):not(.settings){display:none}
.settings-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px var(--gap-m)}
.settings h2{margin:0;font-weight:700;font-size:1.4rem}
.settings-for{margin:0;font-size:.95rem;color:var(--ink-soft)}
.group,.settings-foot{padding-top:var(--gap);border-top:2px solid var(--line)}
.group{display:grid;gap:var(--gap)}
.group-h{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.field{display:grid;gap:var(--gap-s);min-width:0}
.lbl{font-weight:700}
.help{margin:0;font-size:.9rem;color:var(--ink-soft)}
/* The link to the landing's "Cómo funciona" sits left of the save button, small, for the adult. */
.settings-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-m)}
.how-link{font-weight:700;font-size:.95rem;color:var(--ink-soft);text-underline-offset:.2em}
.how-link:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.save{min-height:48px;padding:0 28px;border-radius:var(--r-ctl);border:2px solid var(--ok-edge);background:var(--ok);color:var(--on-ok);font-weight:700;font-size:1.05rem;cursor:pointer;box-shadow:0 4px 0 var(--ok-edge);transition:transform .08s,box-shadow .08s}
.save:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ok-edge)}
.step{display:flex;align-items:center;gap:var(--gap-m)}
.round{width:44px;height:44px;border-radius:var(--r-ctl);border:2px solid var(--line);background:transparent;font-size:1.5rem;font-weight:700;line-height:1;cursor:pointer}
.round:disabled{opacity:.45;cursor:default}
.stepval{min-width:3ch;text-align:center;font-weight:700;font-size:1.8rem;font-variant-numeric:tabular-nums}
/* One stepper per level, its name to the left, all lined up. */
.goals{display:grid;grid-template-columns:max-content max-content;align-items:center;gap:var(--gap-s) var(--gap)}
.goal-lv{font-weight:700;color:var(--ink-soft)}
.goals .stepval{font-size:1.6rem}
.chips{display:flex;flex-wrap:wrap;gap:var(--gap-s)}
.chips-break{flex-basis:100%}
.chip{min-width:44px;min-height:44px;padding:0 10px;border-radius:var(--r-ctl);border:2px solid var(--line);background:transparent;font-weight:700;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--pencil);border-color:var(--pencil-edge);color:var(--on-pencil)}
.seg{display:inline-grid;grid-auto-flow:column;width:max-content;max-width:100%;border:2px solid var(--line);border-radius:var(--r-ctl);overflow:hidden}
.seg button{min-height:40px;padding:0 var(--gap);border:0;background:transparent;font-weight:700;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--pencil);color:var(--on-pencil)}
/* On the narrowest phones a little less room around each word keeps the four music buttons inside the box. */
@media (max-width:340px){.seg button{padding:0 var(--gap-m)}}
.levels{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;background:var(--paper)}
.levels button{position:relative;min-height:48px;font-size:1.05rem}
/* The level just reached lights up once its prize is redeemed (app.js: gleam): the gleam of the points bar runs across its
   button twice. */
.levels button::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%) no-repeat;background-size:50% 100%;background-position:-100% 0}
.levels button.gleam::after{animation:shine 1s cubic-bezier(.35,0,.25,1) 2}
/* Under 375 px a little less room around each level keeps the three in one row: Oraciones is the longest, and its
   column never gets narrower than the word. */
@media (max-width:374px){.levels button{padding:0 6px}}
/* Every word card is as tall as the biggest a word gets (--n is never below 4), so the answer buttons
   stay in place from one word to the next. --fw is that biggest size and --arcs the room below it for the arcs:
   they reach .36em under the letters, and .46em in lowercase, where they sit lower (see .syl:not(.upper)). Without
   "Separar sílabas" the arc of the syllable that sounds still shows, so the room is kept. */
.sheet.word{--fw:min(6.2rem,calc((min(560px,100vw - 32px) - 56px) / 4 / .8));--arcs:.4;height:calc(var(--fw) * (var(--cap,1) + var(--arcs)) + 20px);padding-block:20px calc(var(--fw) * var(--arcs))}
.sheet.word.low-arcs{--arcs:.5}
.sheet.word .syl{font-size:min(6.2rem,calc((min(560px,100vw - 32px) - 56px) / var(--n,4) / .8))}
/* A tap anywhere on the sheet says a syllable (app.js: tapSheet). */
.sheet{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.part{position:relative;display:inline-block;transition:opacity .35s,transform .3s ease-out}
.part:focus{outline:0}
.part:focus-visible{outline:3px solid var(--focus);outline-offset:.06em;border-radius:.08em}
.split .part+.part{margin-left:.22em}
/* Every syllable has an arc; it shows with "Separar sílabas" and, without it, only while the syllable sounds. */
.part::after{content:"";position:absolute;left:10%;right:10%;bottom:-.3em;height:.16em;border:.045em solid var(--ink-soft);border-top:0;border-radius:0 0 999px 999px;opacity:0;transition:opacity .35s,border-color .35s}
.split .part::after{opacity:.8}
/* Lowercase g, j, p, q and y hang about .24em below the line, so in lowercase the arcs go .1em lower to clear them. */
.syl:not(.upper) .part::after{bottom:-.4em}
/* A lone syllable sits in the middle of its sheet, with room for an arc just under the capitals and none under a
   lowercase p, g, q or y: it has no arc there. */
.sheet:not(.word):not(.sent) .part::after{bottom:-.18em}
.sheet:not(.word):not(.sent) .syl:not(.upper) .part::after{display:none}
/* While a syllable sounds (app.js: light) it grows, its arc turns the yellow of the chosen level and the rest of the
   word fades. When Escuchar reads the whole word (.all) every arc lights, and nothing grows, so the word stays inside
   the card. */
.syl .part.lit::after{opacity:1;border-color:var(--pencil);border-width:.07em;transition-duration:.1s}
.syl:not(.all) .part.lit{transform:translateY(-.05em) scale(1.14);transition-duration:.12s}
.syl.speaking .part:not(.lit){opacity:.22;transition-duration:.12s}
/* A sentence is written on the lines of the card, up to three, in the colors of the table (app.js: writeSentence). Its
   size comes from the card's width, a little smaller for the long ones, and the card is always three lines tall (two on
   a short computer screen, at the end), so the answer buttons stay put. Each word keeps its letters together, and the space between words is a little wider than
   the font's, so where one word ends is clear. The syllables of a word touch, with their arcs below them.
   A rule runs under each line, across the margin, on the baseline of the letters: Andika's ascent is 1.22em and its
   descent .39em, so in a line 1.85em tall the baseline is 1.34em from the top (--base). */
.sheet.sent{--ss:clamp(1.7rem,8.2vw,2.45rem);--lh:1.85;--base:1.34;height:calc(var(--ss) * var(--lh) * 3 + 16px);padding:8px 10px 8px 30px}
.sheet.sent.long .syl{font-size:calc(var(--ss) * .88)}
.sheet.sent .syl{width:auto;margin-inline:-30px -10px;padding-inline:30px 10px;font-size:var(--ss);line-height:var(--lh);letter-spacing:.03em;word-spacing:.12em;text-wrap:balance;text-box:normal;border-block:0;
  background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--base) * 1em - 1px),var(--rule-strong) calc(var(--base) * 1em - 1px) calc(var(--base) * 1em + 1px),transparent calc(var(--base) * 1em + 1px) calc(var(--lh) * 1em))}
.sheet.sent .syl::before{content:none}
.sent .keep{white-space:nowrap}
.sent .word{display:inline-block;position:relative;white-space:nowrap;transition:opacity .35s,transform .3s ease-out}
.sent .part{line-height:1}
.sent .syl.split .part+.part{margin-left:0}
.sent .part::after{bottom:-.2em}
.sent .syl:not(.upper) .part::after{bottom:-.3em}
.sent .punct{color:var(--ink)}
/* While a word sounds it grows a little, the arcs of its syllables turn yellow and the rest of the sentence fades. */
.sent .syl:not(.all) .part.lit{transform:none}
.sent .syl:not(.all) .word.lit{transform:translateY(-.04em) scale(1.08);transition-duration:.12s}
.sent .syl.speaking .word:not(.lit) .punct{opacity:.22;transition-duration:.12s}
/* --k is the widest word of the set in ems of the bold capitals, plus a little room: MUCHO is 3.8, CUCHILLO 5.2
   and CUCURUCHO 6.4 (the mix has all three). Each pill sizes its text from its own width so that word fits,
   and pills are never so narrow that the text drops below about 13.5px: there are fewer per row instead. */
.grid.words{--k:6.6;grid-template-columns:repeat(auto-fill,minmax(calc(var(--k) * 13.5px + 22px),1fr))}
.grid.words[data-len="2"]{--k:4}
.grid.words[data-len="3"]{--k:5.4}
.grid.words .tile{container-type:inline-size;padding:0 8px}
.grid.words .tile span{font-size:.875rem;font-size:min(1.05rem,calc(100cqi / var(--k)));white-space:nowrap}
/* One sentence per row, read left to right like on the card. */
.grid.sents{grid-template-columns:1fr}
.grid.sents .tile{place-items:center start;padding:9px 14px;text-align:left;font-size:clamp(1rem,4.4vw,1.15rem);line-height:1.3}

/* Short computer screens. With a mouse or a trackpad and the column at its full width, a window under 729px tall left
   the answer buttons below its edge: Oraciones needs 728px down to their lift, Sílabas 692px and Palabras 634px. A
   1366×768 laptop shows some 633px in Chrome, a 1280×720 one 585px, and the browser's zoom shortens any screen. Only
   there the gaps get a little tighter, a sentence gets two lines instead of three (at this width none uses a third:
   measured on all 301, the fullest second line leaves 76px, and one that needed a third would make the card taller, not
   lose it), and the letters take the room left down to 12px under the buttons, never bigger than on a taller screen nor
   smaller than on the narrowest phone. --room is the window less the 459px the rest takes: the header (44px), the
   levels (52px), the points (104px), the card without its sheet but with its lift (112.6px), the buttons with theirs
   (74px), and six gaps: the top of the page, four between blocks and one under the buttons. Phones, tablets and every
   taller screen keep their layout. */
@media (hover:hover) and (pointer:fine) and (min-width:592px) and (max-height:728px){
  :root{--gap:12px;--gap-m:8px}
  .sheet{--room:calc(100vh - 459px);--fs:max(5.2rem,min(9.5rem,var(--room) / 1.3));--fs-long:min(7.4rem,var(--fs) * .78)}
  .sheet.word{--fw:max(4.5rem,min(6.2rem,(var(--room) - 20px) / (var(--cap,1) + var(--arcs))))}
  .sheet.word .syl{font-size:min(var(--fw),calc((min(560px,100vw - 32px) - 56px) / var(--n,4) / .8))}
  .sheet.sent{--ss:max(1.7rem,min(2.45rem,(var(--room) - 16px) / var(--lh) / 2));height:auto;min-height:calc(var(--ss) * var(--lh) * 2 + 16px)}
}
/* Under 564px even the smallest letters leave the buttons below the edge (a 1366×768 laptop with a 125% zoom shows some
   506px). There the buttons stay at the bottom of the window, over the end of the card, which fades out under them, and
   the line under them goes. */
@media (hover:hover) and (pointer:fine) and (min-width:592px) and (max-height:563px){
  .answer-block{position:sticky;bottom:0;z-index:3;padding-bottom:var(--gap-s);background:var(--ground)}
  .answer-block::before{content:"";position:absolute;inset-inline:0;bottom:100%;height:28px;background:linear-gradient(transparent,var(--ground));pointer-events:none}
  .note{display:none}
}