/* David Libre (SIL OFL, see fonts/OFL.txt) is the free revival of David, one of
   the two faces the Ministry of Education actually embeds in its child-facing
   vocalized materials, with nikud repositioned for legibility.  It is used for
   the letters themselves; Rubik merges its nikud dots even at 64 px, so it is
   kept only for interface chrome.  There is no published legibility research on
   Hebrew typefaces at all -- this is the best-sourced choice available. */
@font-face {
  font-family: "David Libre"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("./fonts/DavidLibre-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "David Libre"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("./fonts/DavidLibre-Bold.ttf") format("truetype");
}

/* Visual language for 4-7 year olds.
 *
 * Bright and warm rather than dark: this is used in daylight, by children, and a
 * dark UI reads as "grown-up software".  One big thing to look at, one big thing
 * to press, and nothing on screen that is not either the letter, the character,
 * or the reward.
 *
 * Every interactive target is >=72 px.  Colour never carries meaning alone --
 * the character's face and the words change too -- so it survives colour
 * blindness and a child who cannot read yet.
 */

:root {
  --cream: #FFF4E0;
  --paper: #FFFFFF;
  --ink: #33305C;
  --muted: #8E88B4;
  --coral: #FF6F5E;
  --coral-d: #D9503F;
  --teal: #19C2A6;
  --teal-d: #109680;
  --sun: #FFC53D;
  --sun-d: #D79E1E;
  --grape: #8B6BFF;
  --grape-d: #6A48E0;
  --sky: #5AC8FF;
  --r: 30px;
  --font: "Rubik", "Assistant", "Heebo", "Arial Hebrew", -apple-system, system-ui, sans-serif;
  /* anything showing nikud uses this; never below 40 px */
  --font-letters: "David Libre", "David", "Times New Roman", serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; min-height: 100%; background: var(--cream); color: var(--ink);
  font-family: var(--font); overscroll-behavior: none; user-select: none;
  -webkit-user-select: none;
}

/* soft background shapes, purely decorative */
.blob { position: fixed; border-radius: 50%; filter: blur(2px); z-index: 0;
        pointer-events: none; opacity: .5; }
.blob.b1 { width: 260px; height: 260px; background: #FFE0A3; top: -90px;
           inset-inline-start: -70px; }
.blob.b2 { width: 320px; height: 320px; background: #CDEFFF; bottom: -120px;
           inset-inline-end: -110px; }

.screen {
  position: relative; z-index: 1;
  display: none; flex-direction: column; align-items: center;
  /* content centres in the viewport instead of piling up at the top */
  justify-content: center;
  min-height: 100dvh; padding: max(12px, env(safe-area-inset-top)) 16px
             max(16px, env(safe-area-inset-bottom));
  gap: 14px;
}
.screen.active { display: flex; }
/* the who-screen list can be taller than the viewport, so it scrolls from the top */
#screen-who { justify-content: flex-start; overflow-y: auto; }
/* topbar pins to the top of screens that centre their content */
.screen > .topbar { position: absolute; top: max(12px, env(safe-area-inset-top));
                    inset-inline: 16px; }

/* ---------------- buttons ---------------- */
.btn {
  border: 0; border-radius: 999px; font-family: var(--font); font-weight: 800;
  color: #fff; background: var(--teal); box-shadow: 0 7px 0 var(--teal-d);
  padding: 20px 34px; font-size: 1.4rem; min-height: 72px; cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--teal-d); }
.btn.giant { font-size: 1.75rem; width: min(400px, 92%); min-height: 84px; }
.btn.flat { background: transparent; color: var(--muted); box-shadow: none;
            font-size: 1.05rem; min-height: 56px; font-weight: 700;
            text-decoration: underline; text-decoration-thickness: 2px;
            text-underline-offset: 5px; border-radius: 12px; }
.btn.pulse { animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.035); } }

.ghost-round {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff8; color: var(--ink); font-size: 1.5rem;
  box-shadow: 0 3px 0 #E8DCC4;
}

.topbar { width: 100%; display: flex; align-items: center;
          justify-content: space-between; gap: 10px; }
.pips { display: flex; gap: 5px; flex: 1; justify-content: center;
        flex-wrap: nowrap; overflow: hidden; }
.pips i { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%; background: #EADFC6;
          display: block; transition: transform .2s, background .2s; }
.pips i.done { background: var(--teal); }
.pips i.now { background: var(--sun); transform: scale(1.5); }

.coin {
  background: var(--sun); color: #6A4A00; border-radius: 999px;
  padding: 10px 20px; font-weight: 900; font-size: 1.2rem; min-width: 84px;
  text-align: center; box-shadow: 0 4px 0 var(--sun-d); transition: transform .18s;
}
.coin::before { content: "⭐ "; }

/* ---------------- who screen ---------------- */
.logo { font-size: clamp(1.9rem, 8vw, 2.5rem); margin: 14px 0 0; font-weight: 800; }
.speak-hint {
  border: 0; background: #fff; color: var(--ink); font-family: var(--font);
  font-size: 1.15rem; font-weight: 700; border-radius: 999px; padding: 12px 22px;
  box-shadow: 0 4px 0 #E8DCC4; cursor: pointer; margin-bottom: 4px;
}
.avatar-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 14px; width: 100%; max-width: 430px; padding-bottom: 20px;
}
.avatar-card {
  border: 0; background: var(--paper); border-radius: 26px; cursor: pointer;
  padding: 14px 8px 12px; display: flex; flex-direction: column; align-items: center;
  gap: 4px; font-family: var(--font); box-shadow: 0 6px 0 #EBDFC6;
  min-height: 132px; justify-content: center; transition: transform .1s;
}
.avatar-card:active { transform: translateY(4px); box-shadow: 0 2px 0 #EBDFC6; }
.avatar-card .face { font-size: 3.2rem; line-height: 1; }
.avatar-card .nm { font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.avatar-card .pts { font-size: .85rem; color: var(--sun-d); font-weight: 800; }
.avatar-card.fresh { background: #FFFDF7; border: 3px dashed #E6D6B4;
                     box-shadow: none; }
.avatar-card.fresh .nm { color: var(--muted); }

/* ---------------- home ---------------- */
.buddy {
  font-size: clamp(4.5rem, 22vw, 7rem); line-height: 1;
  animation: bob 3s ease-in-out infinite; margin-top: 4px;
}
.buddy.small { font-size: 3.2rem; animation: none; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-3deg); } }

.stickerboard {
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
  max-width: 420px; margin: 2px 0;
}
.sticker {
  width: 74px; height: 74px; border-radius: 20px; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-letters); font-size: 2.6rem; font-weight: 700;
  line-height: 1.1; box-shadow: 0 4px 0 #EBDFC6; position: relative;
  color: #8A83B0;
}
.sticker.seen { color: #241F45; }
.sticker.done { background: var(--teal); color: #fff; box-shadow: 0 4px 0 var(--teal-d); }
.sticker .pip { position: absolute; bottom: 5px; font-size: .5rem; letter-spacing: 1px; }

.streak-chip { color: var(--coral-d); font-weight: 800; min-height: 26px;
               font-size: 1.05rem; }

/* ---------------- play ---------------- */
.screen.play { justify-content: space-between; padding-top: 76px; }
.card-stack { position: relative; width: 100%; display: flex;
              flex-direction: column; align-items: center; flex: 1;
              justify-content: center; gap: 6px; }
.glyph-card {
  background: var(--paper); border-radius: 40px; width: min(380px, 92%);
  aspect-ratio: 1 / .95; display: flex; align-items: center; justify-content: center;
  position: relative; box-shadow: 0 10px 0 #EBDFC6;
  border: 6px solid transparent; transition: border-color .2s, transform .2s;
}
.glyph { font-family: var(--font-letters); font-size: clamp(7.5rem, 40vw, 13rem);
         line-height: 1.15; font-weight: 700; color: #241F45; }
.glyph-card.good { border-color: var(--teal); }
.glyph-card.almost { border-color: var(--sun); }
.glyph-card.miss { border-color: var(--coral); }
.glyph-card.pop { transform: scale(1.06) rotate(-1deg); }

.listen {
  position: absolute; inset-inline-start: 16px; bottom: 16px;
  width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--sky); color: #fff; font-size: 1.9rem;
  box-shadow: 0 5px 0 #33A6DC;
}
.listen:active { transform: translateY(3px); box-shadow: 0 2px 0 #33A6DC; }

.feedback { min-height: 60px; text-align: center; display: flex;
            flex-direction: column; gap: 2px; justify-content: center; }
.fb-main { font-size: 1.6rem; font-weight: 900; }
.fb-why { font-size: 1rem; color: var(--muted); font-weight: 600; }
.feedback.good .fb-main { color: var(--teal-d); }
.feedback.almost .fb-main { color: var(--sun-d); }
.feedback.miss .fb-main { color: var(--coral-d); }

.mic-area { width: 100%; display: flex; flex-direction: column; align-items: center;
            gap: 10px; }
.mic {
  width: min(320px, 86%); min-height: 104px; border: 0; border-radius: 999px;
  background: var(--coral); color: #fff; font-family: var(--font); font-weight: 900;
  font-size: 1.25rem; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0;
  box-shadow: 0 8px 0 var(--coral-d);
}
.mic .mic-icon { font-size: 2.1rem; }
.mic:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--coral-d); }
.mic.recording { background: var(--teal); box-shadow: 0 8px 0 var(--teal-d);
                 animation: listen 1.1s ease-in-out infinite; }
.mic[disabled] { opacity: .55; }
@keyframes listen { 50% { transform: scale(1.04); } }

.level { width: min(320px, 86%); height: 10px; background: #EADFC6;
         border-radius: 99px; overflow: hidden; }
.level div { height: 100%; width: 0; background: var(--teal); transition: width .07s; }

/* ---------------- summary ---------------- */
.stars { font-size: 2.6rem; letter-spacing: 8px; min-height: 48px; }
.tally { display: flex; gap: 12px; }
.tile {
  border-radius: 24px; padding: 14px 20px; min-width: 92px; color: #fff;
  display: flex; flex-direction: column; align-items: center;
}
.tile b { font-size: 1.9rem; }
.tile span { font-size: .85rem; opacity: .9; }
.tile.teal { background: var(--teal); box-shadow: 0 5px 0 var(--teal-d); }
.tile.sun { background: var(--sun); color: #6A4A00; box-shadow: 0 5px 0 var(--sun-d); }
.tile.grape { background: var(--grape); box-shadow: 0 5px 0 var(--grape-d); }
h2 { font-size: 2rem; margin: 4px 0; }

.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; width: 11px; height: 11px; border-radius: 3px;
  animation: fall linear forwards;
}
@keyframes fall {
  from { transform: translateY(-12vh) rotate(0); opacity: 1; }
  to { transform: translateY(105vh) rotate(540deg); opacity: .9; }
}

.toast {
  position: fixed; inset-inline: 0; bottom: 26px; margin: auto; width: fit-content;
  max-width: 88%; background: var(--ink); color: #fff; padding: 13px 22px;
  border-radius: 999px; opacity: 0; transition: opacity .25s; pointer-events: none;
  font-size: 1.05rem; font-weight: 600; z-index: 5;
}
.toast.show { opacity: 1; }

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

.greet { font-size: 1.15rem; font-weight: 700; color: var(--muted); margin-top: -6px; }

.collect { font-size: 2.4rem; letter-spacing: 6px; min-height: 46px; }

/* first-run guidance */
.dl-bar { width: min(420px, 90%); height: 16px; background: #EADFC6;
          border-radius: 99px; overflow: hidden; }
.dl-bar div { height: 100%; width: 0; background: var(--teal); transition: width .2s; }
.steps { text-align: start; max-width: 420px; color: var(--ink); font-size: 1.1rem;
         line-height: 1.9; padding-inline-start: 1.4em; }
.steps b { color: var(--teal-d); }
.ios-share { color: var(--sky); }

/* add-to-home-screen walkthrough: icons a child's parent can match against what
   Safari actually shows, plus an arrow at the toolbar the button lives in */
.guide { width: min(430px, 94%); display: flex; flex-direction: column; gap: 10px; }
.guide-row { display: flex; align-items: center; gap: 12px; background: var(--paper);
             border-radius: 20px; padding: 14px 16px; box-shadow: 0 4px 0 #EBDFC6; }
.guide-text { flex: 1; font-size: 1.05rem; line-height: 1.4; }
.guide-text b { color: var(--teal-d); }
.num { width: 30px; height: 30px; border-radius: 50%; background: var(--teal);
       color: #fff; font-weight: 800; display: grid; place-items: center;
       flex: 0 0 auto; }
.icon-box { width: 46px; height: 46px; border-radius: 14px; background: #EAF3FF;
            color: #2F6FD0; display: grid; place-items: center; flex: 0 0 auto; }
.app-chip { background: var(--sun); color: #6A4A00; font-family: var(--font-letters);
            font-size: 1.5rem; font-weight: 700; }
.sheet-mock { display: flex; align-items: center; justify-content: space-between;
              background: #F1EEE6; border-radius: 14px; padding: 13px 16px;
              color: #3A3660; font-size: 1rem; margin: 0 6px; }

.icon-pair { display: flex; gap: 6px; flex: 0 0 auto; }
.icon-pair .icon-box { width: 42px; height: 42px; }
.guide-text .sub { color: var(--muted); font-size: .85rem; font-weight: 600; }

.build { position: fixed; bottom: 4px; inset-inline-start: 8px; z-index: 9;
         color: #C9BFA6; font-size: .7rem; pointer-events: none; }

/* the pointer belongs at the very bottom of the page, aimed past our own UI at
   Safari's toolbar -- above the fold it just points at whatever we drew last */