:root {
  --bg: #FFF6E5;
  --card: #FFFFFF;
  --ink: #2B2D42;
  --soft: #F3E6CC;
  --accent: #FF8A5B;
  --radius: 28px;
  font-family: "Rubik", "Heebo", "Arial Hebrew", "Noto Sans Hebrew", system-ui, Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body {
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
#app {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  max-width: 640px; margin: 0 auto;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }
img { -webkit-user-drag: none; pointer-events: none; }

/* ---------- home ---------- */
.home { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.home h1 { margin: 6px 0 2px; font-size: 2rem; text-align: center; font-weight: 700; }
.tiles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 14px; max-height: 760px; }
.tile {
  background: var(--card); border-radius: var(--radius);
  box-shadow: 0 6px 0 var(--soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 8px; min-height: 150px;
  transition: transform .12s ease;
}
.tile:active { transform: scale(.96); }
.tile img { width: 96px; height: 96px; }
.tile span { font-size: 1.6rem; font-weight: 700; text-align: center; line-height: 1.2; }
/* the first category (colors) is highlighted */
.tile.pinned { background: #FFE9EC; box-shadow: 0 6px 0 #F7CDD3; }
.about { text-align: center; font-size: .72rem; opacity: .55; margin: 4px 0 0; line-height: 1.5; }
.about a { color: inherit; }

/* ---------- word screen ---------- */
.word { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.iconbtn {
  width: 64px; height: 64px; border-radius: 20px; background: var(--card);
  box-shadow: 0 4px 0 var(--soft); display: grid; place-items: center;
}
.iconbtn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--soft); }
.iconbtn svg { width: 34px; height: 34px; }
.progress { flex: 1; margin: 0 18px; height: 10px; border-radius: 5px; background: var(--soft); overflow: hidden; }
.progress b { display: block; height: 100%; background: var(--accent); border-radius: 5px; transition: width .25s ease; }

.stage { flex: 1; display: flex; overflow: hidden; touch-action: pan-y; }
.card {
  flex: 1; background: var(--card); border-radius: var(--radius);
  box-shadow: 0 8px 0 var(--soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 20px 12px; min-height: 0;
}
.card.in-next { animation: in-next .28s ease both; }
.card.in-prev { animation: in-prev .28s ease both; }
/* RTL: "next" comes in from the left, like turning a Hebrew book page */
@keyframes in-next { from { transform: translateX(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes in-prev { from { transform: translateX(40%); opacity: 0; } to { transform: none; opacity: 1; } }

.pic {
  width: min(78vw, 46dvh, 420px); aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 24px;
}
.pic img, .pic svg { width: 100%; height: 100%; }
.pic.bounce { animation: bounce .45s ease; }
@keyframes bounce { 0%{transform:scale(1)} 35%{transform:scale(1.08)} 70%{transform:scale(.97)} 100%{transform:scale(1)} }
.say {
  font-size: clamp(3.4rem, 17vw, 6rem); font-weight: 700; line-height: 1.35;
  padding: 0 16px; border-radius: 20px;
}
.say.speaking { color: var(--accent); }

.nav { display: flex; gap: 16px; }
.arrow {
  flex: 1; height: 92px; border-radius: var(--radius); background: var(--card);
  box-shadow: 0 6px 0 var(--soft); display: grid; place-items: center;
}
.arrow:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--soft); }
.arrow svg { width: 56px; height: 56px; }
.arrow.next { background: #FFE0CF; box-shadow: 0 6px 0 #F5C2A8; }

@media (min-height: 900px) { .say { font-size: 6.5rem; } }
@media (prefers-reduced-motion: reduce) { .card, .pic { animation: none !important; } }