/* Tamara's alphabet game — warm, rounded, toddler-friendly, RTL. */
:root {
  --cream: #fdf3e3;
  --cream2: #ffe9c7;
  --ink: #4a3b2f;
  --pink: #ff8fab;
  --green: #6bcb77;
  --blue: #4d96ff;
  --c: #7ad1c4; /* per-letter accent, set inline */
  --shadow: 0 10px 0 rgba(0,0,0,.08), 0 16px 30px rgba(0,0,0,.12);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overscroll-behavior: none; }
body {
  font-family: 'Varela Round', 'Arial Hebrew', system-ui, sans-serif;
  color: var(--ink);
  background: radial-gradient(120% 120% at 50% 0%, var(--cream2), var(--cream) 60%);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

.screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px 16px; }
.fade { animation: fade .4s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } }

/* mascot */
.mascot { width: clamp(120px, 26vmin, 220px); height: auto; filter: drop-shadow(0 12px 14px rgba(0,0,0,.16)); }
.float { animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px) rotate(-2deg); } }

/* cards & text */
.card { background: #fff; border-radius: 36px; padding: 30px 28px; box-shadow: var(--shadow); max-width: 560px; width: 100%; }
.center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
h1 { font-size: clamp(26px, 5.5vmin, 44px); margin: 6px 0; color: var(--ink); }

/* buttons */
.btn { border: none; border-radius: 999px; padding: 18px 30px; font-family: inherit; font-size: clamp(18px, 3.4vmin, 26px); font-weight: 700; background: #fff; color: var(--ink); box-shadow: var(--shadow); cursor: pointer; transition: transform .08s; }
.btn:active { transform: translateY(4px) scale(.98); }
.btn.primary { background: linear-gradient(180deg, #ffd36b, #ffb13d); color: #5a3b12; }
.btn.huge { padding: 22px 40px; font-size: clamp(20px, 4vmin, 30px); }
.row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hidden { display: none; }

.profile-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pill { border: none; background: #fff; border-radius: 999px; padding: 14px 22px; font-family: inherit; font-size: 22px; font-weight: 700; box-shadow: var(--shadow); cursor: pointer; }
.mini-stars { color: #f0a200; font-size: 18px; }
.name-input { font-family: inherit; font-size: 30px; text-align: center; padding: 14px 18px; border: 4px solid var(--cream2); border-radius: 20px; width: 80%; max-width: 320px; }
.name-input:focus { outline: none; border-color: var(--blue); }

/* top bar */
.top-bar { position: fixed; top: 0; inset-inline: 0; display: flex; justify-content: space-between; align-items: center; padding: max(10px, env(safe-area-inset-top)) 18px 10px; z-index: 10; }
.icon-btn { border: none; background: #fff; width: 56px; height: 56px; border-radius: 50%; font-size: 26px; box-shadow: var(--shadow); cursor: pointer; }
.icon-btn.back { position: fixed; top: max(10px, env(safe-area-inset-top)); inset-inline-start: 18px; z-index: 10; }
.stars { background: #fff; border-radius: 999px; padding: 10px 18px; font-size: 22px; font-weight: 700; color: #f0a200; box-shadow: var(--shadow); }

/* home */
.home { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.bubble { background: #fff; border-radius: 26px; padding: 16px 24px; font-size: clamp(18px, 3.4vmin, 26px); box-shadow: var(--shadow); max-width: 720px; text-align: center; position: relative; }
.bubble.big { font-size: clamp(22px, 4.4vmin, 32px); }
.letter-grid { display: flex; gap: clamp(16px, 4vmin, 36px); flex-wrap: wrap; justify-content: center; }
.letter-card { position: relative; border: none; cursor: pointer; background: #fff; border-radius: 34px; padding: 16px; gap: 8px; width: clamp(150px, 34vmin, 230px); height: clamp(190px, 42vmin, 270px); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 10px solid var(--c); transition: transform .1s; }
.letter-card:active { transform: translateY(4px) scale(.98); }
.big-letter { font-size: clamp(54px, 13vmin, 94px); font-weight: 700; color: var(--c); line-height: 1; }
.peek { width: 42%; max-height: 42%; object-fit: contain; position: static; }
.badge { position: absolute; top: 10px; inset-inline-start: 10px; font-size: 28px; }

/* album */
.album { margin-top: 18px; background: #ffffffcc; border-radius: 24px; padding: 12px 18px; box-shadow: var(--shadow); }
.album-title { text-align: center; font-weight: 700; margin-bottom: 6px; }
.stickers { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.stickers img { width: 64px; height: 64px; border-radius: 16px; background: #fff; }

/* lesson */
.lesson { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 3vmin, 28px); width: 100%; }
.lesson-bg { background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--c) 22%, #fff), var(--cream) 70%); }
.meet { display: flex; align-items: center; gap: clamp(20px, 5vmin, 60px); flex-wrap: wrap; justify-content: center; }
.hero-letter { font-size: clamp(120px, 34vmin, 300px); font-weight: 700; color: var(--c); line-height: .9; text-shadow: 0 8px 0 rgba(0,0,0,.08); }
.hero-animal { width: clamp(150px, 32vmin, 280px); }
.pop { animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pop { from { transform: scale(0); } }
.slide { animation: slidein .6s ease both .2s; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }

/* draw */
.canvas-wrap { position: relative; width: min(64vmin, 380px); height: min(64vmin, 380px); background: #fff; border-radius: 30px; box-shadow: var(--shadow); overflow: hidden; }
.guide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: min(52vmin, 300px); font-weight: 700; color: color-mix(in srgb, var(--c) 22%, #fff); }
#pad { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

/* test */
.options { display: flex; gap: clamp(20px, 6vmin, 60px); }
.opt { border: none; cursor: pointer; background: #fff; border-radius: 34px; width: clamp(130px, 30vmin, 210px); height: clamp(150px, 34vmin, 230px); font-size: clamp(80px, 20vmin, 150px); font-weight: 700; color: var(--ink); box-shadow: var(--shadow); border-bottom: 10px solid var(--c); transition: transform .1s; }
.opt:active { transform: translateY(4px) scale(.97); }
.opt.right { background: var(--green); color: #fff; animation: bounce .5s; }
.opt.wrong { background: #ffd9d9; opacity: .5; }
@keyframes bounce { 50% { transform: scale(1.12); } }

/* reward */
.reward { gap: 22px; }
.reward-bg { background: radial-gradient(120% 120% at 50% 0%, #fff0c2, var(--cream) 70%); }
.reward-pop { display: flex; flex-direction: column; align-items: center; gap: 12px; animation: pop .6s cubic-bezier(.2,1.5,.4,1) both; }
.sticker-win { width: clamp(170px, 40vmin, 320px); filter: drop-shadow(0 14px 18px rgba(0,0,0,.2)); }
.got { font-size: clamp(24px, 5vmin, 40px); font-weight: 700; }

/* feed-the-animal */
.feed { gap: clamp(14px, 3vmin, 26px); }
.feed-stage { display: flex; justify-content: center; align-items: center; min-height: 36vh; }
.feed-animal { width: clamp(180px, 42vmin, 320px); height: auto; filter: drop-shadow(0 12px 16px rgba(0,0,0,.18)); }
.feed-animal.chomp { animation: chomp .45s ease; }
@keyframes chomp { 30% { transform: scale(1.13) rotate(-3deg); } 60% { transform: scale(.95); } }
.feed-tray { display: flex; gap: clamp(22px, 7vmin, 56px); justify-content: center; align-items: flex-end; }
.food { width: clamp(78px, 18vmin, 128px); height: auto; cursor: grab; touch-action: none; -webkit-user-drag: none; user-select: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.15)); animation: wiggle 1.6s ease-in-out infinite; }
.food:active { cursor: grabbing; }
@keyframes wiggle { 50% { transform: translateY(-9px) rotate(3deg); } }

/* playful interactions: tickle / peekaboo / dance */
.heart { position: fixed; z-index: 40; font-size: clamp(26px, 6vmin, 44px); pointer-events: none; animation: heartup 1.1s ease-out forwards; }
@keyframes heartup { from { opacity: 1; transform: translateY(0) scale(.6); } 70% { opacity: 1; } to { opacity: 0; transform: translateY(-130px) scale(1.3); } }
.feed-stage { position: relative; }
.feed-animal.sleeping { opacity: .6; filter: grayscale(.5); transform: rotate(-4deg); transition: opacity .3s, filter .3s; }
.zzz { position: absolute; top: 6%; inset-inline-end: 22%; font-size: clamp(30px, 7vmin, 56px); animation: float 2.4s ease-in-out infinite; }
.wakepop { animation: pop .6s cubic-bezier(.2,1.5,.4,1) both; }
.dancing { animation: dance .55s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes dance { 0%,100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(9deg) translateY(-14px); } }

/* review quiz */
.quiz-btn { margin: 2px auto 4px; }
.quiz { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.6vmin, 22px); padding-top: 64px; }
.quiz .mascot { width: clamp(80px, 16vmin, 130px); }
.quiz-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 3vmin, 26px); max-width: 760px; }
.qopt { border: none; cursor: pointer; background: #fff; border-radius: 26px; width: clamp(84px, 19vmin, 150px); height: clamp(96px, 21vmin, 162px); font-size: clamp(46px, 11vmin, 88px); font-weight: 700; color: var(--c); box-shadow: var(--shadow); border-bottom: 8px solid var(--c); transition: transform .1s; }
.qopt:active { transform: translateY(3px) scale(.97); }
.qopt.right { background: var(--green); color: #fff; animation: bounce .5s; }
.qopt.wrong { background: #ffd9d9; opacity: .5; }
.qopt.hint { animation: hintpulse 1s ease-in-out infinite; }
@keyframes hintpulse { 50% { box-shadow: 0 0 0 7px rgba(107,203,119,.55), var(--shadow); } }

/* iPad + desktop: fit the whole alef-bet (all 22 letters) on one screen — no scroll,
   as a balanced 6-per-row block (6+6+6+4) with the short last row centered (never a
   lopsided 10+10+2). Percentage-width cards => always exactly 6 across, so no orphan
   row appears at any width. Phones (narrow OR short) keep the big scrollable layout. */
@media (min-width: 768px) and (min-height: 600px) {
  .home { gap: clamp(4px, 1vmin, 10px); }
  .home .mascot { width: clamp(48px, 7vmin, 76px); }
  .home .bubble { font-size: clamp(13px, 2vmin, 19px); padding: 6px 16px; }
  .quiz-btn { padding: 6px 20px; font-size: clamp(13px, 1.9vmin, 18px); }
  .letter-grid {
    --g: clamp(6px, 1vmin, 12px); --cols: 6;
    display: flex; flex-wrap: wrap; justify-content: center; align-content: center;
    gap: var(--g); width: 100%; max-width: min(94vw, 820px); margin: 0 auto;
  }
  .letter-card {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols)); width: auto;
    height: clamp(84px, 13vmin, 130px); border-radius: 20px; padding: 5px; gap: 1px; border-bottom-width: 5px;
  }
  .big-letter { font-size: clamp(32px, 6vmin, 54px); }
  .peek { width: 46%; max-height: 44%; }
  .badge { font-size: 16px; top: 5px; inset-inline-start: 5px; }
  .album { margin-top: clamp(5px, 1vmin, 10px); padding: 4px 12px; }
  .album-title { font-size: 12px; margin-bottom: 2px; }
  .stickers { gap: 5px; }
  .stickers img { width: 34px; height: 34px; }
}