/* Harcer screen kit — clean, correct re-creations of the real app screens for reels.
   One screen = .scr, 402×874 CSS px = iPhone 17 Pro points (footage is 3× this).
   Values come from constants/theme.ts and the screen files; see README.md here. */
@font-face { font-family: Ionicons; src: url(ionicons.woff2) format('woff2'); font-display: block; }
:root {
  --primary:#4F6D7B; --primaryDark:#3E5966; --primarySoft:#EAF0F2; --accent:#FFB347; --gold:#FEB100; --amber:#FFB216;
  --bg:#F8FAFC; --surface:#FFFFFF; --surfaceAlt:#F1F5F9; --border:#E2E8F0; --borderStrong:#CBD5E1;
  --text:#1A202C; --muted:#64748B; --faint:#94A3B8;
  --ok:#10B981; --okSoft:#F0FDF4; --okInk:#065F46; --qOk:#4CAF50;
  --no:#EF4444; --noSoft:#FEF2F2; --noInk:#991B1B;
  --warn:#F59E0B; --warnSoft:#FFFBEB; --warnInk:#B45309;
  --sel:#2196F3; --selSoft:#EBF8FF; --btn:#FFC107;
  --violet:#7C3AED; --violetSoft:#F3EEFF; --blue:#3182CE; --orange:#E8833A;
}
.scr { position:relative; width:402px; height:874px; overflow:hidden; background:var(--bg); color:var(--text);
  font-family:-apple-system,"SF Pro Text","SF Armenian",system-ui,sans-serif; -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.3; }
.scr * { box-sizing:border-box; }
.io { font-family:Ionicons; font-style:normal; font-weight:normal; line-height:1; display:inline-block; }
.m { font-style:italic; }
.f .m { font-family:"Times New Roman","STIX Two Math",serif; font-size:1.08em; }
.row { display:flex; align-items:center; }

/* status bar + home indicator */
.sb { position:absolute; left:0; right:0; top:0; height:54px; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:6px 30px 0 52px; font-size:17px; font-weight:600; letter-spacing:-.2px; }
.sb.dark { color:#fff; } .sb.light { color:#000; }
.sb .isl { position:absolute; left:50%; top:11px; width:124px; height:36px; margin-left:-62px; background:#000; border-radius:20px; }
.sb .ic { display:flex; align-items:center; gap:6px; }
.hi { position:absolute; left:50%; bottom:8px; width:140px; margin-left:-70px; height:5px; border-radius:3px; background:#000; z-index:50; }
.hi.dark { background:#fff; }

/* slate header (home, progress, words) */
.hdr { position:absolute; left:0; right:0; top:0; background:var(--primary); color:#fff; }
.sheet { position:absolute; left:0; right:0; bottom:0; background:var(--bg); border-radius:25px 25px 0 0; }

/* tab bar */
.tabs { position:absolute; left:0; right:0; bottom:0; height:88px; background:#fff; border-top:1px solid #EDF1F5; display:flex; padding:7px 4px 0; z-index:20; }
.tabs .t { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; color:#A3AFBD; font-size:10.5px; font-weight:600; }
.tabs .t.on { color:var(--primary); }

/* cards and lists */
.card { background:#fff; border-radius:14px; }
.feat { display:flex; align-items:center; gap:12px; background:#fff; border-radius:14px; padding:10px 12px; height:50px; box-shadow:0 1px 3px rgba(15,23,42,.05); }
.feat .d { width:32px; height:32px; border-radius:16px; background:var(--primarySoft); display:flex; align-items:center; justify-content:center; color:var(--primary); }
.feat .n { flex:1; font-size:14px; font-weight:600; }
.cnt { font-size:12px; font-weight:800; padding:2px 8px; border-radius:10px; }
.cnt.red { background:var(--noSoft); color:var(--noInk); } .cnt.amb { background:var(--warnSoft); color:var(--warnInk); } .cnt.grn { background:var(--okSoft); color:var(--okInk); }

/* books: values from app/(tabs)/MainPage.tsx (BOOK_W 100, BOOK_H 148, PAGE_EDGE 7, PAGE_INSET 3, COVER_RADIUS 7) */
.book { position:relative; width:100px; height:148px; flex:none; }
.book .ftsh { position:absolute; left:-12px; bottom:-10px; width:124px; height:14px; background:radial-gradient(closest-side,rgba(0,0,0,.34),rgba(0,0,0,0)); }
.book .pg { position:absolute; left:6px; top:3px; width:93.5px; height:142px; border-radius:0 7px 7px 0; background:linear-gradient(to bottom right,#EFE7D3,#F7F1E2); border:.8px solid #C9BC9C; box-shadow:2px 3px 8px rgba(15,23,42,.14); }
.book .ln { position:absolute; top:7px; height:134px; width:.7px; background:#B9AA84; }
.book .cv { position:absolute; left:0; top:0; width:93px; height:148px; border-radius:3px 7px 7px 3px; overflow:hidden; color:#F3EAD3; }
.book .sp { position:absolute; left:0; top:0; bottom:0; width:7px; background:rgba(0,0,0,.22); }
.book .hg { position:absolute; left:7px; top:0; bottom:0; width:1px; background:rgba(255,255,255,.16); }
.book .fr { position:absolute; left:13px; right:6px; top:6px; bottom:6px; border:1px solid rgba(243,234,211,.35); border-radius:2px; }
.book .bd { position:absolute; left:7px; right:0; top:0; bottom:0; padding:12px 8px 10px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
.book .ser { max-width:100%; font-size:9px; line-height:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(243,234,211,.8); text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.book .lb { display:flex; flex-direction:column; align-items:center; }
.book .ey { font-size:8px; line-height:10px; font-weight:700; letter-spacing:2px; color:rgba(243,234,211,.78); margin-bottom:1px; }
.book .rn { font-size:28px; line-height:32px; font-weight:800; letter-spacing:1px; }
.book .ft { height:20px; display:flex; align-items:center; justify-content:center; }
.book .pill { display:flex; align-items:center; gap:2px; padding:2px 5px 2px 8px; border-radius:999px; border:1px solid rgba(243,234,211,.6); background:rgba(255,255,255,.08); font-size:9px; line-height:13px; font-weight:700; letter-spacing:.4px; white-space:nowrap; }
.book .pill.gold { padding:3px 5px 3px 8px; border:none; background:var(--gold); color:#2A2A2A; font-size:8px; line-height:11px; font-weight:800; letter-spacing:.8px; }
.book .bt { position:absolute; top:5px; left:11px; width:16px; height:16px; border-radius:8px; background:rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; }
/* the shelf in three faces: top 12, lip 1, front 12, underside 1, the shadow it casts 18 */
.shelf { position:absolute; left:0; right:0; height:44px; }
.shelf .top { height:12px; background:linear-gradient(180deg,#DDD8CE,#F6F3EC); }
.shelf .lip { height:1px; background:#fff; }
.shelf .fr { height:12px; background:linear-gradient(180deg,#D3CCBE,#B3AA99); }
.shelf .un { height:1px; background:#8E8676; }
.shelf .cast { height:18px; background:linear-gradient(180deg,rgba(0,0,0,.26),rgba(0,0,0,0)); }

/* reader toolbar (quiz screens) */
.tb { position:absolute; left:16px; right:16px; top:64px; height:42px; display:flex; gap:8px; }
.tb .bar { flex:1; border:1px solid var(--border); border-radius:12px; background:#fff; display:flex; align-items:center; padding:0 6px; }
.tb .b36 { width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:var(--text); }
.tb .pin { border:1px solid var(--border); border-radius:12px; background:#fff; display:flex; align-items:center; gap:6px; padding:0 12px; font-size:12px; font-weight:700; }
.tb .pin.on { background:var(--btn); border-color:var(--btn); color:#fff; }

/* math */
.paper { position:absolute; left:0; right:0; background-color:#FCFCFA;
  background-image:linear-gradient(rgba(185,207,200,.42) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(185,207,200,.42) 1.5px,transparent 1.5px),
    linear-gradient(rgba(185,207,200,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(185,207,200,.28) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px; }
.seg { flex:1; height:38px; border-radius:10px; border:1px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:var(--muted); position:relative; }
.seg.cur { border:2px solid var(--btn); color:var(--text); }
.seg.cur::after { content:""; position:absolute; bottom:-9px; left:50%; width:30px; margin-left:-15px; height:3px; border-radius:2px; background:var(--btn); }
.seg.ok { background:var(--okSoft); border-color:#BBE5CF; color:var(--okInk); } .seg.no { background:var(--noSoft); border-color:#F6C9C9; color:var(--noInk); }
.qcard { background:#fff; border-radius:14px; padding:16px 16px; box-shadow:0 2px 10px rgba(15,23,42,.08); }
.ch { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:9px 10px; min-height:46px; font-size:16px; }
.ch .c { width:28px; height:28px; border-radius:14px; background:#F8FAFC; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--muted); flex:none; }
.ch.sel { border:1.5px solid var(--sel); background:var(--selSoft); color:var(--sel); } .ch.sel .c { background:var(--sel); color:#fff; }
.ch.ok { border:1.5px solid var(--qOk); background:var(--okSoft); color:var(--qOk); font-weight:600; } .ch.ok .c { background:var(--qOk); color:#fff; }
.ch.no { border:1.5px solid var(--no); background:var(--noSoft); color:var(--no); font-weight:600; } .ch.no .c { background:var(--no); color:#fff; }
.xpill { height:44px; border-radius:22px; background:var(--warnSoft); border:1.5px solid var(--warn); color:var(--warnInk); display:inline-flex; align-items:center; gap:8px; padding:0 18px; font-size:14px; font-weight:700; }
.dock { position:absolute; left:0; right:0; bottom:0; height:108px; background:#fff; border-top:1px solid var(--border); padding:12px 16px 0; display:flex; gap:12px; align-items:flex-start; z-index:10; }
.circ { width:44px; height:44px; border-radius:22px; border:1px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.ai { width:44px; height:44px; border-radius:22px; background:linear-gradient(135deg,var(--primary),var(--primaryDark)); display:flex; align-items:center; justify-content:center; color:#fff; flex:none; box-shadow:0 3px 8px rgba(62,89,102,.35); }
.prim { flex:1; height:48px; border-radius:24px; background:var(--btn); color:#fff; font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:6px; }
.prim.ghost { background:transparent; border:1.5px solid var(--btn); color:var(--warnInk); }

/* text-subject quiz (v_snippet) */
.ans { border:2px solid var(--border); border-radius:18px; background:#fff; display:flex; align-items:center; padding:13px 14px; font-size:14px; line-height:20px; }
.ans .c { width:30px; height:30px; border-radius:15px; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--muted); margin-right:12px; flex:none; }
.ans.ok { border-color:var(--qOk); background:var(--okSoft); color:var(--qOk); font-weight:500; } .ans.ok .c { background:var(--qOk); border-color:var(--qOk); color:#fff; }
.ans.no { border-color:var(--no); background:var(--noSoft); color:var(--no); font-weight:500; } .ans.no .c { background:var(--no); border-color:var(--no); color:#fff; }
.nav { position:absolute; left:0; right:0; bottom:0; padding:12px 24px 34px; background:var(--bg); border-top:1px solid var(--border); z-index:10; }
.nav .bar { height:4px; border-radius:2px; background:var(--border); margin-bottom:12px; overflow:hidden; } .nav .bar i { display:block; height:100%; background:var(--ok); border-radius:2px; }
.nb { display:flex; align-items:center; gap:6px; padding:12px 20px; border-radius:24px; background:var(--btn); color:#fff; font-weight:700; font-size:14px; box-shadow:0 2px 4px rgba(0,0,0,.1); }
.nb.off { opacity:.5; }

/* explanation sheet */
.dim { position:absolute; inset:0; background:rgba(15,23,42,.28); z-index:30; }
.xs { position:absolute; left:0; right:0; top:62px; bottom:0; background:var(--bg); border-radius:20px 20px 0 0; z-index:31; overflow:hidden; }
.xs .hd { background:#fff; border-bottom:1px solid var(--border); padding:18px 16px 12px; position:relative; }
.xs .hd::before { content:""; position:absolute; top:7px; left:50%; width:40px; margin-left:-20px; height:4px; border-radius:2px; background:var(--borderStrong); }
.xs .q { font-size:15px; font-weight:600; padding-right:44px; line-height:21px; }
.xs .x { position:absolute; right:14px; top:20px; width:32px; height:32px; border-radius:16px; background:var(--surfaceAlt); display:flex; align-items:center; justify-content:center; }
.xs .okrow { margin-top:12px; background:var(--okSoft); border-radius:10px; padding:8px 12px; display:flex; align-items:center; gap:8px; color:var(--okInk); font-size:13px; font-weight:600; }
.step { background:#fff; border:1px solid var(--border); border-radius:18px; padding:16px; }
.step .k { font-size:13px; font-weight:700; color:var(--muted); }
.step .t { font-size:17px; font-weight:700; margin-top:6px; line-height:23px; }
.step .b { font-size:15px; line-height:22px; margin-top:8px; color:#2D3748; }
.step .f { margin-top:12px; background:var(--surfaceAlt); border-radius:12px; padding:12px 10px; text-align:center; font-size:19px; }
.xnav { position:absolute; left:0; right:0; bottom:0; height:96px; padding:10px 12px 0; display:flex; align-items:flex-start; justify-content:space-between; background:var(--bg); }
.xnav .nb2 { height:44px; border-radius:12px; background:#fff; border:1px solid var(--border); display:flex; align-items:center; gap:6px; padding:0 14px; font-size:14px; font-weight:600; }
.xnav .nb2.off { color:var(--faint); background:#F1F5F9; }
.dots { display:flex; gap:6px; align-items:center; } .dots i { width:7px; height:7px; border-radius:4px; background:var(--borderStrong); display:block; } .dots i.on { width:18px; background:var(--primary); }
.play { width:40px; height:40px; border-radius:20px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; }

/* shelves (mistakes / saved / words) */
.chip { display:flex; align-items:center; gap:8px; height:40px; border-radius:20px; border:1.5px solid var(--border); background:#fff; padding:0 14px 0 6px; font-size:15px; font-weight:600; white-space:nowrap; flex:none; }
.chip.on { background:var(--primary); border-color:var(--primary); color:#fff; font-weight:700; }
.chip .mini { width:18px; height:26px; border-radius:2px 4px 4px 2px; color:#F3EAD3; font-size:8px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.chip .ico { width:28px; height:28px; border-radius:14px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; }
.chip .num { font-size:13px; font-weight:700; opacity:.75; }
.mcard { background:#fff; border:1.5px solid #E6EBF1; border-radius:18px; padding:16px 18px; position:relative; }
.mcard .ad { font-size:12px; font-weight:600; color:var(--faint); }
.mcard .pv { font-size:16px; font-weight:500; margin-top:6px; line-height:22px; padding-right:20px; }
.mcard .hr { height:1px; background:var(--border); margin:14px 0 12px; }
.mcard .wr { display:inline-flex; align-items:center; gap:6px; background:var(--noSoft); color:var(--noInk); border-radius:12px; padding:5px 10px; font-size:13px; font-weight:700; }
.mcard .cd { position:absolute; right:16px; bottom:14px; width:32px; height:32px; border-radius:16px; background:var(--surfaceAlt); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted); }
.mcard .xx { position:absolute; right:16px; top:14px; color:var(--faint); }

/* progress map */
.node { position:absolute; width:58px; height:58px; border-radius:14px; background:var(--primary); color:#fff; font-size:20px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(62,89,102,.3); }
.node .bd { position:absolute; right:-8px; top:-8px; min-width:22px; height:22px; border-radius:11px; background:var(--no); border:2px solid #fff; font-size:11px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.node .st { position:absolute; left:-2px; top:-20px; font-size:13px; letter-spacing:1px; color:var(--gold); white-space:nowrap; }
.node .st s { text-decoration:none; color:#CBD5E1; }
.nl { position:absolute; font-size:14.5px; font-weight:700; line-height:18px; }
.nl small { display:block; font-size:12px; font-weight:500; color:var(--faint); margin-top:3px; }

/* games */
.gbtn { height:58px; border-radius:16px; border:1.5px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; gap:10px; font-size:16px; font-weight:700; color:var(--text); }
.gbtn.good { border-color:var(--ok); background:var(--okSoft); color:var(--okInk); } .gbtn.bad { border-color:var(--no); background:var(--noSoft); color:var(--noInk); } .gbtn.dimb { opacity:.45; }
.gtile { display:flex; align-items:stretch; background:#fff; border-radius:16px; overflow:hidden; height:62px; box-shadow:0 1px 3px rgba(15,23,42,.06); }
.gtile .sq { width:52px; display:flex; align-items:center; justify-content:center; color:#fff; }
.gtile .tx { flex:1; padding:11px 14px; } .gtile .tx b { display:block; font-size:15px; } .gtile .tx span { font-size:12px; color:var(--muted); }

/* tutor chat */
.ts { position:absolute; left:0; right:0; bottom:0; height:82%; background:#fff; border-radius:24px 24px 0 0; z-index:31; overflow:hidden; display:flex; flex-direction:column; }
.bub { max-width:78%; padding:9px 13px; border-radius:18px; font-size:14.5px; line-height:20px; }
.bub.me { align-self:flex-end; background:var(--primary); color:#fff; border-bottom-right-radius:4px; }
.bub.bot { background:#fff; border:1px solid var(--border); border-bottom-left-radius:4px; }

/* translation popup */
.pop { position:absolute; width:252px; background:#fff; border-radius:12px; padding:12px 14px; box-shadow:0 10px 30px rgba(15,23,42,.22); z-index:40; }
.pop::after { content:""; position:absolute; left:var(--caret,40px); top:-7px; width:14px; height:14px; background:#fff; transform:rotate(45deg); border-radius:2px; }
.hl { background:rgba(79,109,123,.18); border-radius:4px; box-shadow:0 0 0 2px rgba(79,109,123,.18); }