/* Layout: one centered column. Header (title, 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.
   Every control shares one corner radius and every box shares another. Night is the default; day is chosen with the header button. */
@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;
  --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;
}
:root[data-mode="day"]{
  --ground:#DCE7FA;
  --paper:#FBFDFF;
  --line:#BCCDEE;
  --track:#CFDBF3;
  --ink:#1B2557;
  --ink-soft:#505C8C;
  --consonant:#1D45C2;
  --vowel:#D2304D;
  --rule:#9FB8E8;
  --rule-strong:#7C9DE2;
  --margin:#EE7C90;
  --ok:#0E8450;
  --on-ok:#FFFFFF;
  --ok-edge:#095E38;
  --edge:#A9BDE6;
  --focus:#1B2557;
  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)}
.tool,.icon-btn{min-height:44px;border-radius:var(--r-ctl);border:2px solid var(--line);background:var(--paper);font-weight:700;cursor:pointer}
.tool{padding:0 14px}
.icon-btn{width:44px;display:grid;place-items:center;padding:0}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 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}}
.mini.armed,.danger.armed{border-color:var(--vowel);background:var(--vowel);color:var(--paper)}
.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;background:var(--pencil);box-shadow:inset 0 -6px 0 var(--pencil-shade);transition:width .35s ease}
.ticks{position:absolute;inset:0;--seg:calc(100% / var(--goal,30));background:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--seg) - 2px),var(--paper) calc(var(--seg) - 2px),var(--paper) var(--seg))}
.bar.plain .ticks{display:none}

/* 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}
.redeem{margin-top:var(--gap-s);min-height:56px;padding:0 28px;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)}

/* syllable card */
.card{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);scroll-margin-top:var(--gap)}
.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){
  .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}
}
.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);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 */
.settings{display:grid;gap:var(--gap);padding:var(--gap);border:2px dashed var(--line);border-radius:var(--r-box);background:var(--paper)}
.field{display:grid;gap:var(--gap-s);min-width:0}
.lbl{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.help{margin:0;font-size:.9rem;color:var(--ink-soft)}
.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}
.chips{display:flex;flex-wrap:wrap;gap:var(--gap-s)}
.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);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)}
.levels{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%}
.levels button{min-height:48px;font-size:1.05rem}
.sheet.word{height:auto;padding-block:20px 34px}
.sheet.word .syl{font-size:min(6.2rem,calc((min(560px,100vw - 32px) - 56px) / var(--n,4) / .8))}
.part{position:relative;display:inline-block}
.split .part+.part{margin-left:.22em}
.split .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:.8}
/* --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}
.book-hint.warn{color:var(--vowel)}
.danger{justify-self:start;min-height:44px;padding:0 14px;border-radius:var(--r-ctl);border:2px solid var(--vowel);background:transparent;color:var(--vowel);font-weight:700;cursor:pointer}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}