*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;font-family:Tahoma,"Segoe UI",Arial,"Noto Sans",sans-serif;background:#f6efe0;color:#3a2208;overflow:hidden}
#app{position:fixed;inset:0;display:flex;flex-direction:column;max-width:560px;margin:0 auto}
button{font-family:inherit;cursor:pointer}
.top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,250,236,.95);border-bottom:2px solid #ead7ae;z-index:3}
.top .stat{display:flex;align-items:center;gap:4px;font-weight:800;font-size:18px}
.top .stat img{height:30px}
.top .course{margin-inline-start:auto;border:2px solid #d9b25a;background:#fff8e6;border-radius:14px;padding:6px 10px;font-weight:800;font-size:15px;color:#6a4310}
/* the path */
.path{flex:1;overflow-y:auto;position:relative;scroll-behavior:smooth}
.unit{position:relative;width:100%;aspect-ratio:1024/1536;background-size:cover;background-position:center}
.unit .banner{position:absolute;top:2.5%;left:6%;right:6%;background:linear-gradient(#3c9a3a,#2b7a2a);color:#fff;border-radius:18px;padding:10px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 6px 14px rgba(0,0,0,.25);font-weight:800}
.unit .banner .n{font-size:13px;opacity:.85;font-weight:700}
.unit .banner .t{font-size:19px}
.unit .banner .p{font-size:30px;margin-inline-start:auto}
.node{position:absolute;width:22%;transform:translate(-50%,-50%);border:none;background:none;padding:0}
.node img{width:100%;display:block;filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.node.now img{animation:bob 1.6s ease-in-out infinite}
.node.now::before{content:"";position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,rgba(80,230,110,.75),rgba(80,230,110,0) 70%);animation:glow 1.6s ease-in-out infinite}
.node .lbl{position:absolute;left:50%;transform:translateX(-50%);bottom:-18%;background:#fff;border-radius:10px;padding:2px 8px;font-size:13px;font-weight:800;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.start{position:absolute;left:50%;top:92%;transform:translateX(-50%);background:#fff;color:#2b7a2a;border:3px solid #3c9a3a;border-radius:14px;padding:4px 12px;font-weight:900;font-size:15px;white-space:nowrap;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{translate:0 -6px}}
@keyframes glow{50%{opacity:.4}}
/* a lesson */
.lesson{flex:1;display:flex;flex-direction:column;background:url(../assets/bg.webp) center/cover}
.lhead{display:flex;align-items:center;gap:10px;padding:12px 14px}
.lhead .x{border:none;background:none;font-size:28px;color:#8a6a3a}
.bar{flex:1;height:18px;background:rgba(0,0,0,.12);border-radius:10px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(#7fe07a,#3c9a3a);border-radius:10px;transition:width .4s}
.hearts{display:flex;align-items:center;gap:4px;font-weight:900;color:#c2272d;font-size:18px}
.hearts img{height:28px}
.card{flex:1;margin:4px 14px;background:rgba(255,252,242,.94);border-radius:24px;padding:16px;box-shadow:0 6px 18px rgba(60,30,0,.18);display:flex;flex-direction:column;overflow-y:auto}
.ask{font-size:21px;font-weight:900;margin:2px 0 12px}
.rico{display:flex;align-items:flex-end;gap:10px;margin-bottom:10px}
.rico img{height:110px}
.bubble{background:#fff;border:3px solid #e2c27a;border-radius:18px;padding:10px 14px;font-size:22px;font-weight:800;position:relative;flex:1}
.bubble .say{display:block;font-size:13px;color:#8a6a3a;font-weight:700;margin-top:4px;direction:ltr}
.speak{border:none;background:#2e8bd8;color:#fff;border-radius:14px;width:52px;height:52px;font-size:24px;flex:0 0 52px;box-shadow:0 4px 0 #1d6aa8}
.speak.small{width:40px;height:40px;font-size:18px;flex-basis:40px}
.opts{display:grid;gap:10px}
.opts.pics{grid-template-columns:1fr 1fr}
.opt{border:3px solid #e2cfa4;background:#fff;border-radius:18px;padding:14px 12px;font-size:20px;font-weight:800;color:#3a2208;box-shadow:0 4px 0 #e2cfa4;text-align:center}
.opt .em{display:block;font-size:56px;line-height:1.2}
.opt .tr{display:block;font-size:12px;color:#8a6a3a;font-weight:700;direction:ltr}
.opt.sel{border-color:#2e8bd8;background:#e8f3ff;box-shadow:0 4px 0 #2e8bd8}
.opt.ok{border-color:#3c9a3a;background:#e5f8e2;box-shadow:0 4px 0 #3c9a3a}
.opt.bad{border-color:#d9443a;background:#ffe7e4;box-shadow:0 4px 0 #d9443a;animation:shake .35s}
.opt.done{opacity:.25;pointer-events:none}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.line{min-height:64px;border-bottom:3px solid #e2cfa4;display:flex;flex-wrap:wrap;gap:8px;padding:6px 0;margin-bottom:14px}
.tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tile{border:3px solid #e2cfa4;background:#fff;border-radius:14px;padding:8px 12px;font-size:19px;font-weight:800;box-shadow:0 3px 0 #e2cfa4}
.tile .tr{display:block;font-size:11px;color:#8a6a3a;direction:ltr}
.tile.used{visibility:hidden}
.typein{width:100%;font-size:22px;padding:14px;border-radius:16px;border:3px solid #e2cfa4;font-family:inherit}
.foot{padding:12px 14px calc(18px + env(safe-area-inset-bottom, 0px));background:transparent;transition:background .2s}
.foot.ok{background:#d7f5d1}
.foot.bad{background:#ffdcd7}
.foot .msg{font-weight:900;font-size:20px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.foot .msg small{display:block;font-size:16px;font-weight:700}
.foot.ok .msg{color:#2b7a2a}
.foot.bad .msg{color:#b2281f}
.go{width:100%;border:none;border-radius:18px;padding:16px;font-size:20px;font-weight:900;color:#fff;background:#58c442;box-shadow:0 5px 0 #3c9a3a}
.go:disabled{background:#d8cdb5;box-shadow:0 5px 0 #c1b393;color:#fff}
.foot.bad .go{background:#e5533d;box-shadow:0 5px 0 #b2281f}
/* end of lesson and course choice */
.screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:url(../assets/bg.webp) center/cover}
.screen h1{margin:0;font-size:30px}
.screen .big{height:200px}
.screen .stats{display:flex;gap:12px}
.screen .stats div{background:#fff;border:3px solid #e2c27a;border-radius:18px;padding:10px 16px;font-weight:900;font-size:22px;display:flex;align-items:center;gap:6px}
.screen .stats img{height:34px}
.pick{width:100%;max-width:420px;border:3px solid #e2cfa4;background:#fff;border-radius:20px;padding:18px;font-size:22px;font-weight:900;display:flex;align-items:center;gap:12px;box-shadow:0 5px 0 #e2cfa4}
.pick span{font-size:40px}
[dir=rtl] .bubble .say,[dir=rtl] .opt .tr{text-align:right}
.mic{margin:18px auto 6px;display:block;width:100%;max-width:340px;border:none;border-radius:999px;padding:22px;font-size:22px;font-weight:900;color:#fff;background:linear-gradient(#4aa8ff,#2e8bd8);box-shadow:0 6px 0 #1d6aa8}
.mic.on{background:linear-gradient(#ff7a6a,#e5533d);box-shadow:0 6px 0 #b2281f;animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.04)}}
.heard{text-align:center;font-weight:800;color:#6a4310;min-height:26px}
.cant{margin:8px auto 0;display:block;border:none;background:none;color:#8a6a3a;font-weight:800;text-decoration:underline;font-size:16px}
.top .course{font-size:14px}

/* Language choice: many options - the list scrolls and stays clear of the page's bottom bar */
.screen{overflow-y:auto;justify-content:safe center;-webkit-overflow-scrolling:touch}
.screen.choose{justify-content:flex-start;gap:10px;padding:16px 16px 120px}
.screen.choose .big{height:110px;flex:none}
.screen.choose h1{font-size:24px}
.screen.choose .pick{padding:12px 16px;font-size:19px;flex:none}
.screen.choose .pick span{font-size:30px}
/* On short screens the question area scrolls and keeps the green button visible at the bottom */
.lesson{min-height:0}
.card{min-height:0}
.foot{flex:none}
/* Phones held sideways / unfolded: smaller pieces so every answer fits without scrolling */
@media (max-height:820px){.top{padding:6px 12px}.card{padding:12px;margin:2px 12px}.ask{font-size:18px;margin:0 0 8px}.rico{margin-bottom:6px}.rico img{height:70px}.bubble{font-size:19px;padding:8px 12px}.opts{gap:8px}.opt{padding:9px 10px;font-size:18px}.opt .em{font-size:40px}.foot{padding-top:8px}.foot .msg{font-size:17px;margin-bottom:4px}.go{padding:12px;font-size:18px}}
@media (max-height:700px){.opts:not(.pics){grid-template-columns:1fr 1fr}.rico img{height:56px}.opt .em{font-size:34px}}
.banner .skip{margin-top:6px;border:2px solid #fff;background:rgba(255,255,255,.18);color:#fff;border-radius:12px;padding:4px 10px;font-weight:800;font-size:13px;cursor:pointer}
.screen.choose h1,.screen>h1{background:rgba(255,250,236,.92);padding:4px 16px;border-radius:14px;box-shadow:0 2px 8px rgba(60,30,0,.15)}
/* Level 0 - letters */
.alpha-card{align-items:center;justify-content:center;text-align:center;gap:10px}
.alpha-card .big-letter{font-size:96px;font-weight:900;line-height:1.05;color:#2b7a2a}
.alpha-card .say{font-size:18px;color:#8a6a3a;font-weight:800;direction:ltr}
.alpha-card .ex{font-size:26px;font-weight:800}
.alpha-card .ex .em{font-size:44px;vertical-align:middle}
.alpha-card .ex small{display:block;font-size:14px;color:#8a6a3a}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0}
.sound{border:3px solid #2e8bd8;background:#e8f3ff;border-radius:16px;padding:8px 14px;font-size:18px;font-weight:800}
.sound.big{font-size:34px;padding:10px 26px}
.opt .em.letter{font-size:48px;font-weight:900;color:#2b7a2a}
.screen .letters{font-size:34px;font-weight:900;background:rgba(255,250,236,.92);padding:6px 16px;border-radius:14px;letter-spacing:4px}
@media (max-height:820px){.alpha-card .big-letter{font-size:70px}.alpha-card .ex{font-size:21px}.alpha-card .ex .em{font-size:34px}}

@font-face{font-family:"GveretLevin";src:url(../fonts/gveret-levin-hebrew-400-normal.woff2) format("woff2");font-display:swap}
.alpha-card .hand{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 14px;background:#fff7e6;border:2px dashed #e0b45a;border-radius:16px;padding:8px 14px}
.alpha-card .hand-note{flex-basis:100%;font-size:14px;font-weight:800;color:#8a6a3a}
.alpha-card .hand .hl{font-family:"GveretLevin",cursive;font-size:64px;line-height:1;color:#1f5fa8}
.alpha-card .hand .hw{font-family:"GveretLevin",cursive;font-size:34px;line-height:1;color:#1f5fa8}
@media (max-height:820px){.alpha-card .hand .hl{font-size:48px}.alpha-card .hand .hw{font-size:26px}}