/* self-hosted fonts (copied from @fontsource by tools/build.ts): no request to Google, works offline */
@font-face{font-family:"Andika";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/andika-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Andika";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/andika-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Playpen Sans";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/playpen-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Edu VIC WA NT Beginner";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/edu-vic-wa-nt-beginner-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Lexend";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/lexend-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2")}

:root{
  --wmax:150px; --smax:80px; --cmax:16px;
  --bg:#E4EFF7; --ink:#1D2B45; --soft:#5A6B86;
  --go:#1F7A63; --go-ink:#FFFFFF;
  --panel:#FFFFFF; --line:#C9D7E6; --hi:#FF7A59;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15202E; --ink:#EAF1FA; --soft:#9DB0C8;
    --go:#2FA487; --go-ink:#0E1A16;
    --panel:#1C2A3D; --line:#34485F; --hi:#FF8F73;
  }
}
:root[data-theme="dark"]{
  --bg:#15202E; --ink:#EAF1FA; --soft:#9DB0C8;
  --go:#2FA487; --go-ink:#0E1A16;
  --panel:#1C2A3D; --line:#34485F; --hi:#FF8F73;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
/* root size grows gently with the screen, capped at 18px; --wmax/--smax cap the reading text everywhere */
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);font-size:clamp(15px, calc(.55vmin + 9px), 18px)}
body{
  margin:0;min-height:100%;min-height:100dvh;background:var(--bg);color:var(--ink);
  font-family:"Andika","Trebuchet MS",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;display:flex;flex-direction:column;
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);
}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:.2rem solid var(--hi);outline-offset:.2rem}

header{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.1rem;gap:.75rem}
.brand{font-weight:700;font-size:1.25rem}
.modes{display:flex;background:var(--panel);border-radius:999px;box-shadow:0 0 0 .125rem var(--line);padding:.25rem}
.mode{display:flex;align-items:center;gap:.5rem;border:none;background:transparent;border-radius:999px;padding:.5rem 1rem;font-size:1.05rem;color:var(--soft);white-space:nowrap}
.mico{width:2.1rem;height:.9rem;fill:currentColor;flex:none}
.mode[aria-pressed="true"]{background:var(--go);color:var(--go-ink)}
.parent-btn{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;
  border:.125rem solid var(--line);border-radius:999px;padding:.5rem .9rem;font-size:.95rem;color:var(--soft);
  font-family:system-ui,sans-serif;white-space:nowrap;
  background:linear-gradient(90deg,var(--line) calc(var(--p,0)*100%),transparent 0);
}

main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1rem,4vh,2.5rem);padding:.75rem 1rem 1.5rem;min-height:0}
.stage{display:flex;flex-direction:column;align-items:center;gap:.6rem;max-width:100%}

.card{
  background:var(--panel);border-radius:1.5rem;box-shadow:0 0 0 .125rem var(--line);
  padding:clamp(.8rem,3vmin,2.5rem) clamp(1.1rem,4vmin,3.5rem);
  display:flex;justify-content:center;
  min-width:min(88vw,26rem);max-width:94vw;
}
.word{
  font-family:var(--read-font,"Andika"),"Trebuchet MS",system-ui,sans-serif;
  position:relative;display:inline-block;white-space:nowrap;
  font-size:min(clamp(3.5rem, min(20vw, 28vh), 60vh), var(--wmax));line-height:1.15;padding:0 0 .18em;
}
.word.sentence{font-size:min(clamp(2rem, min(10vw, 16vh), 40vh), var(--smax))}
.word::after{
  content:"";position:absolute;left:0;bottom:.04em;height:.07em;min-height:4px;
  border-radius:.25em;background:var(--hi);width:0;opacity:0;
}
.word.zoem::after{opacity:1;width:100%;transition:width var(--dur,1.5s) linear}
.word.track::after{opacity:1;width:var(--w,0px);transition:none}

.controls{display:flex;gap:.9em;justify-content:center;font-size:min(1rem, var(--cmax))}
.ctl{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  border:none;background:var(--panel);border-radius:1.4em;padding:.9em 1.25em;min-width:6.5em;
  box-shadow:0 0 0 .125rem var(--line);font-size:1em;color:var(--soft);white-space:nowrap;
}
.ctl .ico{font-size:2.2em;line-height:1}
.ctl.main{background:var(--go);color:var(--go-ink);box-shadow:none}
.ctl:active{transform:scale(.96)}
.count{color:var(--soft);font-size:.95rem;margin:0;font-family:system-ui,sans-serif}
.status{min-height:1.4em;color:var(--hi);font-family:system-ui,sans-serif;font-size:.9rem;text-align:center;margin:0;max-width:40ch}

dialog{border:none;border-radius:1.25rem;background:var(--panel);color:var(--ink);width:min(38rem,calc(100% - 1.5rem));max-height:calc(100% - 1.5rem);padding:0;overflow:auto;overscroll-behavior:contain}
dialog::backdrop{background:rgba(10,20,35,.45)}
.pbody{padding:1.4rem 1.4rem .5rem;font-family:system-ui,sans-serif}
.pbody h2{margin:0 0 .25rem;font-size:1.15rem}
.pbody p{margin:0 0 .9rem;color:var(--soft);font-size:.92rem;line-height:1.45}
.sounds{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.snd{font-family:"Andika",system-ui,sans-serif;font-size:1.5rem;min-width:3.6rem;min-height:2.75rem;padding:.35rem .75rem;border-radius:.75rem;border:.125rem solid var(--line);background:transparent}
.snd[aria-pressed="true"]{background:var(--go);color:var(--go-ink);border-color:var(--go)}
.opt{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;font-size:.95rem}
.opt input{width:1.25rem;height:1.25rem}
.list{font-family:"Andika",system-ui,sans-serif;font-size:1.05rem;line-height:1.7;margin-bottom:1rem}
.list .off{opacity:.35;text-decoration:line-through}
.test{border:.125rem solid var(--line);background:transparent;border-radius:.75rem;padding:.5rem .9rem;margin-bottom:.75rem;font-size:.95rem}
.fonts{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.5rem;margin-bottom:1.1rem}
.font{border:.125rem solid var(--line);background:transparent;border-radius:.75rem;padding:.5rem .6rem;text-align:left}
.font[aria-pressed="true"]{border-color:var(--go);box-shadow:inset 0 0 0 .125rem var(--go)}
.font .sample{display:block;font-size:1.7rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.font .name{display:block;font-family:system-ui,sans-serif;font-size:.78rem;color:var(--soft)}
.pfoot{display:flex;justify-content:flex-end;padding:.75rem 1.4rem 1.25rem;position:sticky;bottom:0;background:var(--panel)}
.close{border:none;background:var(--go);color:var(--go-ink);border-radius:.75rem;padding:.65rem 1.25rem;font-family:system-ui,sans-serif}

/* large landscape screens (PC): keep the word comfortable, not giant */
@media (orientation:landscape) and (min-width:1024px) and (min-height:541px){
  .word{font-size:clamp(3.5rem, 14vh, var(--wmax))}
  .word.sentence{font-size:clamp(2.2rem, 7.5vh, var(--smax))}
}
/* tablets in portrait: use the height, bigger word and buttons */
@media (orientation:portrait) and (min-width:600px){
  .word{font-size:min(26vw, 24vh, var(--wmax))}
  .word.sentence{font-size:min(11vw, 14vh, var(--smax))}
}
/* phones in portrait */
@media (max-width:520px){
  header{padding:.6rem .7rem;gap:.4rem}
  .brand{display:none}
  .modes{flex:1;min-width:0}
  .mode{flex:1;justify-content:center;padding:.5rem .4rem;font-size:.95rem;gap:.35rem}
  .mico{width:1.6rem}
  .controls{width:100%;gap:.5rem}
  .ctl{flex:1;min-width:0;padding:.75em .3em;font-size:.9rem}
  .ctl .ico{font-size:2.1em}
}
@media (max-width:360px){
  .mico{display:none}
}
/* phones in landscape: short screen -> word left, buttons right */
@media (orientation:landscape) and (max-height:540px){
  header{padding:.35rem .9rem}
  main{flex-direction:row;gap:1.25rem;padding:.25rem 1rem .75rem}
  .card{min-width:0;max-width:calc(100vw - 12rem);padding:.6rem 1.4rem}
  .word{font-size:min(clamp(2.5rem, 34vh, 9rem), var(--wmax))}
  .word.sentence{font-size:min(clamp(1.6rem, 15vh, 5rem), var(--smax))}
  .controls{flex-direction:column;gap:.45rem}
  .ctl{flex-direction:row;gap:.5em;padding:.45em .9em;min-width:9em;justify-content:flex-start}
  .ctl .ico{font-size:1.5em}
  .stage{gap:.3rem}
  .count{font-size:.8rem}
}
@media (prefers-reduced-motion: reduce){.word::after{transition:none !important}}