/* ============================================================ TARC — Liquid Glass UI / Frosted Ice Blue ============================================================ */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} :root{ /* Frosted ice palette */ --ice-bg-1:#d8edff; --ice-bg-2:#cfe6ff; --ice-bg-3:#e8f1ff; --ice-bg-4:#f5fbff; --accent:#1f8fff; --accent-deep:#0a6dff; --accent-soft:#56b4ff; --mint:#43e3c8; --peri:#7c9cff; --flame-1:#46e6ff; --flame-2:#26b6ff; --gem:#5ad1ff; --ink:#0b2a4a; --ink-2:#274a6e; --ink-3:#5b7896; --ink-faint:#9fb6cc; /* Glass tokens — cards use higher fill opacity instead of backdrop blur (perf); backdrop-filter is reserved for the floating nav + toast only */ --glass-fill: linear-gradient(150deg, rgba(255,255,255,.74), rgba(255,255,255,.42)); --glass-fill-strong: linear-gradient(150deg, rgba(255,255,255,.88), rgba(255,255,255,.56)); --glass-border: rgba(255,255,255,.72); --glass-blur: blur(16px) saturate(160%); --shadow-soft: 0 10px 28px -12px rgba(20,86,160,.26), inset 0 1px 1px rgba(255,255,255,.95); --shadow-float: 0 24px 52px -20px rgba(16,78,150,.38), inset 0 1.5px 1px rgba(255,255,255,1); --r-lg:32px; --r-md:24px; --r-sm:18px; --safe: 22px; } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{height:100%} body{ font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background: radial-gradient(1200px 900px at 12% -8%, #d4f3ff 0%, rgba(212,243,255,0) 55%), radial-gradient(1000px 800px at 110% 8%, #dfe6ff 0%, rgba(223,230,255,0) 50%), linear-gradient(160deg, var(--ice-bg-1), var(--ice-bg-2) 32%, var(--ice-bg-3) 68%, var(--ice-bg-4)); /* BUG #3 FIX: removed `background-attachment:fixed`. The has overflow:hidden and never scrolls (the scroller is .app), so fixed vs the default scroll attachment is visually IDENTICAL here — but fixed-attachment forces this multi-layer radial-gradient background onto the browser's slow fixed-background paint path, a well-documented cause of heavy/stuttery desktop scrolling. Dropping it removes that per-frame cost with no visual change. */ min-height:100vh; overflow:hidden; letter-spacing:-0.01em; } /* drifting background atmosphere — pre-softened gradients instead of an animated filter:blur(70px) layer (huge GPU re-rasterization cost); transform-only motion */ .bg-atmo{position:fixed;inset:-10%;z-index:0;opacity:.55;pointer-events:none} .bg-atmo span{position:absolute;border-radius:50%;animation:drift 26s ease-in-out infinite;will-change:transform} .bg-atmo .b1{width:46vw;height:46vw;left:-6vw;top:6vw;background:radial-gradient(circle,rgba(123,232,255,.85) 0%,rgba(123,232,255,.35) 36%,transparent 70%);animation-delay:-2s} .bg-atmo .b2{width:42vw;height:42vw;right:-8vw;top:-4vw;background:radial-gradient(circle,rgba(157,184,255,.80) 0%,rgba(157,184,255,.32) 36%,transparent 70%);animation-delay:-9s} .bg-atmo .b3{width:40vw;height:40vw;left:30vw;bottom:-14vw;background:radial-gradient(circle,rgba(98,242,214,.75) 0%,rgba(98,242,214,.30) 36%,transparent 70%);animation-delay:-15s} @keyframes drift{ /* PERF: translate-only. Animating scale() on a 46vw radial-gradient layer forces continuous GPU re-rasterization that competes with scrolling; the ±6% breathing is imperceptible on a soft, .55-opacity blob, so only the (cheap, composite-only) drift translate is kept. */ 0%,100%{transform:translate(0,0)} 33%{transform:translate(4vw,-3vw)} 66%{transform:translate(-3vw,3vw)} } /* fine grain overlay */ body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ============================ APP SHELL (frameless) ============================ */ .app-shell{position:fixed;inset:0;z-index:2} /* ============================ APP SCROLL ============================ */ .app{position:fixed;inset:0;z-index:2;overflow-y:auto;overflow-x:hidden; scrollbar-width:none;-webkit-overflow-scrolling:touch} .app::-webkit-scrollbar{display:none} .screen{display:none;padding:calc(14px + env(safe-area-inset-top)) var(--safe) calc(118px + env(safe-area-inset-bottom)); max-width:560px;margin:0 auto} .screen.active{display:block} /* layout wrappers: invisible on mobile/tablet (display:contents keeps the original single-column flow), become grid columns on desktop */ .lay,.lay-side,.lay-main{display:contents} /* page-load stagger */ .reveal{opacity:0} .screen.active .reveal{animation:rise .7s cubic-bezier(.2,.8,.2,1) forwards} .screen.active .reveal:nth-child(1){animation-delay:.02s} .screen.active .reveal:nth-child(2){animation-delay:.08s} .screen.active .reveal:nth-child(3){animation-delay:.15s} .screen.active .reveal:nth-child(4){animation-delay:.22s} .screen.active .reveal:nth-child(5){animation-delay:.29s} .screen.active .reveal:nth-child(6){animation-delay:.36s} .screen.active .reveal:nth-child(7){animation-delay:.43s} @keyframes rise{from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)}} /* Lesson-screen-only transition (discovery/concept/new-word/completion) — a smaller, faster lift than the shared "rise" used elsewhere in the app, so moving between lesson screens feels quick rather than a slide-in. */ @keyframes lessonRise{from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)}} /* ============================ GLASS PRIMITIVE ============================ */ .glass{ position:relative; background:var(--glass-fill); border:1px solid var(--glass-border); border-radius:var(--r-md); box-shadow:var(--shadow-soft); overflow:hidden; } .glass.strong{background:var(--glass-fill-strong);box-shadow:var(--shadow-float)} /* specular top sheen */ .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 38%)} /* ============================ HEADER ============================ */ .topbar{display:flex;align-items:center;justify-content:space-between;margin:6px 0 16px} .hi{font-size:14px;color:var(--ink-3);font-weight:500} .hi b{display:block;font-family:"Sora";font-weight:700;font-size:23px;color:var(--ink);letter-spacing:-.02em;margin-top:1px} /* ROOT CAUSE FIX: .avatar used to carry a permanent box-shadow (and a ".ring" span was always appended in JS) regardless of whether a frame was equipped, so a bare/no-frame avatar still showed a visible glow + outline. Decoration now comes ONLY from an actual equipped frame's own .av-frame-wrap.frame-X box-shadow — a frameless avatar has zero shadow, border, or ring, matching the uploaded photo exactly. */ .avatar{width:46px;height:46px;border-radius:16px;flex:none;position:relative; background:linear-gradient(140deg,#8fe9ff,#6c8dff); display:grid;place-items:center;color:#fff;font-weight:700;font-size:18px;font-family:"Sora"} /* stat pills row */ .pills{display:flex;gap:10px;margin-bottom:18px} .pill{flex:1;display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:var(--r-sm)} .pill .ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none} .pill .v{font-family:"Sora";font-weight:700;font-size:17px;line-height:1;color:var(--ink)} .pill .l{font-size:10.5px;color:var(--ink-3);font-weight:500;margin-top:2px} .ic.flame{background:radial-gradient(circle at 50% 30%,#bff6ff,#34c6ff);box-shadow:0 0 16px rgba(60,210,255,.8),0 0 4px rgba(60,210,255,.6)} .ic.gem{background:radial-gradient(circle at 50% 30%,#cdeeff,#37b6ff)} .ic.heart{background:radial-gradient(circle at 50% 30%,#ffd5e6,#ff6fa3)} /* flame glow pulse — static drop-shadow + opacity-only animation (no per-frame filter) */ @keyframes flameGlow{0%,100%{opacity:.82}50%{opacity:1}} .flame svg{filter:drop-shadow(0 0 6px rgba(70,215,255,.95));animation:flameGlow 2.4s ease-in-out infinite} /* The progress ring styles are gone with the two cards that used them: the Learn screen's daily-goal card first, then the Progress screen's. The #ringGrad gradient itself stays in index.html — the achievements overview ring (#achOvRing) references it with an inline stroke. */ /* week strip */ .weekstrip{display:flex;justify-content:space-between;padding:14px 16px;margin-bottom:18px} .day{display:flex;flex-direction:column;align-items:center;gap:7px} .day .dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.5);border:1.5px solid rgba(150,190,240,.45);color:var(--ink-faint)} .day .lab{font-size:11px;font-weight:600;color:var(--ink-3)} .day.done .dot{background:radial-gradient(circle at 50% 30%,#9beaff,#2fb4ff);border-color:transparent;color:#fff; box-shadow:0 0 12px rgba(50,190,255,.75),inset 0 1px 2px rgba(255,255,255,.8)} .day.today .dot{background:rgba(255,255,255,.85);border:2px solid var(--accent);color:var(--accent-deep); box-shadow:0 0 0 4px rgba(40,160,255,.18)} .day.today .lab{color:var(--accent-deep)} /* ==================== COURSE BAR + START BUTTON ==================== */ /* These two replace four blocks that used to sit above the learning path: the daily-goal ring, the "Continue learning" heading, its "All courses" icon pill, and the continue card. The card repeated the unit badge printed directly beneath it, and the pill was a 14px icon in a section heading — the two things learners most need on this screen (which course am I on, and start today's lesson) were the least visible things on it. */ .section-h{display:flex;align-items:center;justify-content:space-between;margin:24px 2px 13px} .section-h h2{font-family:"Sora";font-size:17px;font-weight:700;letter-spacing:-.02em} .section-h a{font-size:13px;font-weight:600;color:var(--accent);text-decoration:none} .flag{width:58px;height:58px;border-radius:18px;flex:none;display:grid;place-items:center;font-size:30px; background:linear-gradient(150deg,rgba(255,255,255,.85),rgba(255,255,255,.4)); border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 2px rgba(255,255,255,.9),0 6px 14px -6px rgba(30,110,200,.4)} .bar{height:9px;border-radius:6px;background:rgba(120,170,230,.22);overflow:hidden;position:relative} .bar i{position:absolute;inset:0 auto 0 0;border-radius:6px;background:linear-gradient(90deg,#3fd0ff,#1f8fff); box-shadow:0 0 10px rgba(40,170,255,.7)} .coursebar{padding:14px 16px 15px;margin-bottom:12px} .cb-top{display:flex;align-items:center;gap:14px} .coursebar .flag{width:52px;height:52px;border-radius:16px;font-size:27px} .cb-meta{flex:1;min-width:0} .cb-meta h4{font-family:"Sora";font-size:16.5px;font-weight:700;letter-spacing:-.02em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cb-sub{font-size:12.5px;color:var(--ink-3);font-weight:600;margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .coursebar .bar{margin-top:12px} /* Full-width and labelled, not a 14px glyph in a section heading: the learners who most need to switch course are the ones least likely to read a bare icon as "change my language", and least able to hit a small target. Secondary styling keeps the blue start button below it as the one obvious next step. */ .cb-switch{display:flex;align-items:center;justify-content:center;gap:8px;width:100%; margin-top:12px;cursor:pointer;font-family:"Outfit";font-size:14px;font-weight:700; color:var(--accent-deep);padding:12px;border-radius:14px; background:rgba(255,255,255,.6);border:1.5px solid rgba(120,170,230,.45); box-shadow:inset 0 1px 2px rgba(255,255,255,.85); transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s} .cb-switch:active{transform:scale(.97);background:rgba(255,255,255,.85)} @media (hover:hover) and (pointer:fine){ .cb-switch:hover{transform:translateY(-1px)} } @media (max-width:360px){ .coursebar{padding:13px 13px 14px} .cb-top{gap:11px} .coursebar .flag{width:46px;height:46px;font-size:24px} .cb-switch{font-size:13px} } /* Mobile/tablet order. The learning path has to be reachable without scrolling, so it follows the course bar directly and nothing else is allowed between them. The streak pill and week strip stay at the top — they are what the learner glances at, and pushing them below a 7000px learning path would be deleting them, not reordering them. `.lay` is display:contents here, which makes .pills/.coursebar/#curriculum flex items of .lay once it is a flex column. Scoped to the learn screen so the other three screens keep their plain block flow. */ @media (max-width:1200px){ #screen-learn>.lay{display:flex;flex-direction:column} #screen-learn .pills{order:1} #screen-learn #weekstrip{order:2} #screen-learn .coursebar{order:3} #screen-learn #curriculum{order:4} /* Tighter than the standalone strip: it is now one of three stacked cards above the path, so every pixel it gives back is path the learner sees. */ #screen-learn #weekstrip{padding:10px 16px;margin-bottom:12px} #screen-learn #weekstrip .day{gap:5px} #screen-learn #weekstrip .day .dot{width:26px;height:26px} } /* ============================ LEARNING PATH ============================ */ .path{position:relative;padding:18px 0 6px;margin-top:4px} /* TASK 5: let the browser skip rendering work for off-screen path nodes (45-row learning path is the longest scroll surface). contain-intrinsic-size keeps the scrollbar stable; visual output is identical. */ .node-row{position:relative;display:flex;justify-content:center;margin:14px 0 20px; content-visibility:auto;contain-intrinsic-size:auto 160px} /* the active node's pulsing ring (.node.active::before) and "start" tag overflow this row's box; content-visibility:auto's implicit paint containment clips that overflow, so the current row opts out of it here. Lesson titles (.cap) are normal in-flow content (not absolutely-positioned overflow) specifically so every row's title still paints correctly even with containment active. */ .node-row--current{content-visibility:visible} .node{position:relative;width:104px;display:flex;flex-direction:column;align-items:center;cursor:pointer; flex-shrink:0;transition:transform .25s cubic-bezier(.2,.8,.2,1)} .node:active{transform:scale(.92)} .node .core{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font-size:28px;position:relative; flex-shrink:0;aspect-ratio:1;border:1px solid rgba(255,255,255,.85)} .node.done .core{background:radial-gradient(circle at 50% 28%,#8fe7ff,#23a9ff);color:#fff; box-shadow:0 10px 22px -8px rgba(20,140,240,.8),inset 0 2px 3px rgba(255,255,255,.8),0 0 18px rgba(50,180,255,.45)} .node.locked .core{background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(225,238,252,.46));color:var(--ink-faint); box-shadow:inset 0 1px 2px rgba(255,255,255,.7)} .node.active .core{background:linear-gradient(150deg,rgba(255,255,255,.94),rgba(255,255,255,.72));color:var(--accent-deep); box-shadow:0 14px 28px -8px rgba(20,120,230,.55),inset 0 1.5px 2px #fff;z-index:2} .node.active .core::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:3px solid var(--accent); animation:pulseRing 2s ease-out infinite} @keyframes pulseRing{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.28);opacity:0}} .node .tag{position:absolute;top:-26px;left:50%;transform:translateX(-50%);white-space:nowrap; font-size:10px;font-weight:800;letter-spacing:.08em;color:#fff;padding:4px 10px;border-radius:9px; background:linear-gradient(145deg,#39b6ff,#0a6dff);box-shadow:0 6px 12px -4px rgba(20,110,220,.7)} .node .tag::after{content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:#0a6dff} .node .cap{margin-top:10px;width:104px;white-space:normal;text-align:center;line-height:1.3; font-size:11px;font-weight:600;color:var(--ink-2)} .node .check{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:#fff; display:grid;place-items:center;box-shadow:0 3px 8px rgba(20,120,220,.4)} .unit-badge{display:flex;align-items:center;gap:12px;padding:14px 16px;margin:8px 0 4px;border-radius:var(--r-sm)} .unit-badge .n{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--accent-deep);text-transform:uppercase} .unit-badge h4{font-family:"Sora";font-size:15px;font-weight:700;margin-top:2px} .unit-badge .lv{margin-left:auto;font-size:12px;font-weight:700;color:var(--ink-3)} /* ============================ PRACTICE ============================ */ .hero-quiz{padding:24px;margin-bottom:18px;position:relative;overflow:hidden} .hero-quiz::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-40px;top:-50px; background:radial-gradient(circle,rgba(70,220,255,.55),transparent 65%)} .hero-quiz .eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--accent-deep);text-transform:uppercase} .hero-quiz h2{font-family:"Sora";font-size:25px;font-weight:800;letter-spacing:-.02em;margin:8px 0 6px;max-width:200px;line-height:1.1} .hero-quiz p{font-size:13px;color:var(--ink-3);max-width:210px;line-height:1.5} .btn{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:12px 20px;border-radius:15px;border:none;cursor:pointer; font-family:"Outfit";font-weight:700;font-size:14px;color:#fff; background:linear-gradient(145deg,#3bb7ff,#0a6dff);box-shadow:0 12px 24px -8px rgba(20,110,220,.7),inset 0 1px 2px rgba(255,255,255,.5)} .btn:active{transform:translateY(1px)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px} .tile{padding:18px;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1)} .tile:active{transform:scale(.96)} .tile .ti{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin-bottom:13px;color:#fff} .tile h4{font-family:"Sora";font-size:15px;font-weight:700} .tile p{font-size:11.5px;color:var(--ink-3);margin-top:3px;font-weight:500} .tile .pc{margin-top:11px;font-size:11px;font-weight:700;color:var(--accent-deep)} .ti.c1{background:linear-gradient(145deg,#43c4ff,#0a6dff)} .ti.c2{background:linear-gradient(145deg,#46e3c8,#11a7e0)} .ti.c3{background:linear-gradient(145deg,#7c9cff,#4a6dff)} .ti.c4{background:linear-gradient(145deg,#5ad1ff,#2f8bff)} .word{display:flex;align-items:center;gap:15px;padding:18px;margin-top:14px} .word .jp{font-family:"Noto Naskh Arabic",serif;font-size:30px;font-weight:700;color:var(--accent-deep)} .word .wmeta h4{font-size:15px;font-weight:700;font-family:"Sora"} .word .wmeta .romaji{font-size:12px;color:var(--ink-3);margin-top:2px} .word .wmeta .en{font-size:13px;color:var(--ink-2);margin-top:6px;font-weight:500} .word .play{margin-left:auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none; background:linear-gradient(145deg,#3bb7ff,#0a6dff);box-shadow:0 8px 16px -6px rgba(20,110,220,.6)} /* ============================ LEADERBOARD ============================ */ .league-head{text-align:center;padding:26px 20px 22px;margin-bottom:16px;position:relative;overflow:hidden} .league-head::after{content:"";position:absolute;width:220px;height:220px;left:50%;top:-120px;transform:translateX(-50%); background:radial-gradient(circle,rgba(70,220,255,.45),transparent 60%)} .league-badge{width:86px;height:86px;margin:0 auto 12px;position:relative;display:grid;place-items:center;color:#fff; border-radius:26px;background:linear-gradient(150deg,#5ad7ff,#0a6dff); box-shadow:0 16px 30px -10px rgba(20,120,220,.7),inset 0 2px 3px rgba(255,255,255,.7),0 0 28px rgba(60,200,255,.5); animation:floaty 4.5s ease-in-out infinite} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .league-head h2{font-family:"Sora";font-size:22px;font-weight:800;letter-spacing:-.01em} .league-head p{font-size:12.5px;color:var(--ink-3);margin-top:5px} .timer{display:inline-flex;align-items:center;gap:7px;margin-top:13px;font-size:12px;font-weight:700;color:var(--accent-deep); background:rgba(255,255,255,.6);padding:7px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.8)} .promo-line{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:12px;font-size:11px;font-weight:700;color:#10a36e;letter-spacing:.04em;text-transform:uppercase} .promo-line .ln{height:1px;flex:1;max-width:60px;background:linear-gradient(90deg,transparent,#7fe0c0)} .lb-row{display:flex;align-items:center;gap:13px;padding:13px 15px;margin-bottom:9px;border-radius:var(--r-sm);content-visibility:auto;contain-intrinsic-size:auto 64px} .lb-row.me{background:var(--glass-fill-strong);box-shadow:var(--shadow-float),0 0 0 1.5px rgba(40,160,255,.35);border-color:rgba(120,200,255,.9)} .rank{width:26px;text-align:center;font-family:"Sora";font-weight:800;font-size:16px;color:var(--ink-3);flex:none} .rank.top{color:#fff;border-radius:9px;line-height:26px;height:26px} .rank.g1{background:linear-gradient(145deg,#ffd86b,#f5a623);box-shadow:0 4px 10px -3px rgba(245,166,35,.7)} .rank.g2{background:linear-gradient(145deg,#d8e6f2,#9fb6cc);box-shadow:0 4px 10px -3px rgba(150,170,200,.6)} .rank.g3{background:linear-gradient(145deg,#f3b98a,#cf8552);box-shadow:0 4px 10px -3px rgba(200,130,80,.6)} .lb-av{width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-family:"Sora";font-size:16px} .lb-row .nm{flex:1;min-width:0} .lb-row .nm h4{font-size:14.5px;font-weight:700} .lb-row .nm span{font-size:11.5px;color:var(--ink-3)} .lb-row .xp{font-family:"Sora";font-weight:700;font-size:14px;color:var(--accent-deep);flex:none} /* ============================ PROFILE ============================ */ .profile-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 20px 24px;margin-bottom:16px} .big-av{width:96px;height:96px;border-radius:30px;display:grid;place-items:center;color:#fff;font-family:"Sora";font-weight:800;font-size:38px;position:relative; background:linear-gradient(140deg,#8fe9ff,#6c8dff)} .big-av .edit{position:absolute;right:-4px;bottom:-4px;width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center; color:var(--accent);box-shadow:0 5px 12px rgba(20,120,220,.4);z-index:2} .profile-head h2{font-family:"Sora";font-size:23px;font-weight:800;margin-top:14px;letter-spacing:-.02em} .profile-head .handle{font-size:13px;color:var(--ink-3);margin-top:3px} .profile-head .joined{font-size:12px;color:var(--ink-faint);margin-top:8px;display:inline-flex;align-items:center;gap:6px} .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:8px} .stat{padding:17px 18px;display:flex;align-items:center;gap:13px} .stat .si{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none} .stat .sv{font-family:"Sora";font-weight:800;font-size:20px;line-height:1;color:var(--ink)} .stat .sl{font-size:11px;color:var(--ink-3);font-weight:500;margin-top:3px} .si.s1{background:linear-gradient(145deg,#46e6ff,#1f8fff)} .si.s2{background:linear-gradient(145deg,#ffd56b,#f5a623)} .si.s3{background:linear-gradient(145deg,#7c9cff,#4a6dff)} .si.s4{background:linear-gradient(145deg,#46e3c8,#11a7e0)} .ach-grid{display:flex;gap:13px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none} .ach-grid::-webkit-scrollbar{display:none} .ach{flex:none;width:88px;text-align:center} .ach .badge{width:72px;height:72px;border-radius:24px;margin:0 auto 8px;display:grid;place-items:center;font-size:30px; border:1px solid rgba(255,255,255,.8)} .ach.earned .badge{background:linear-gradient(150deg,#9be7ff,#2f9bff);color:#fff; box-shadow:0 12px 24px -8px rgba(20,130,230,.7),inset 0 2px 3px rgba(255,255,255,.7),0 0 18px rgba(60,200,255,.45)} .ach.locked .badge{background:linear-gradient(150deg,rgba(255,255,255,.6),rgba(225,238,252,.45)); filter:grayscale(.4);opacity:.7} .ach .an{font-size:11px;font-weight:600;color:var(--ink-2);line-height:1.25} /* weekly bars */ .bars{display:flex;align-items:flex-end;justify-content:space-between;gap:9px;height:120px;padding:18px 18px 14px} .barcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end} .barcol .col{width:100%;max-width:24px;border-radius:8px 8px 4px 4px; background:linear-gradient(180deg,#46d2ff,#1f8fff);box-shadow:0 0 10px rgba(40,170,255,.5),inset 0 1px 2px rgba(255,255,255,.5); transform-origin:bottom;animation:grow .9s cubic-bezier(.2,.85,.25,1) backwards} @keyframes grow{from{transform:scaleY(0)}} .barcol .bl{font-size:10.5px;font-weight:600;color:var(--ink-3)} /* ============================ TAB BAR ============================ */ .tabbar{position:fixed;left:14px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:50;height:68px;border-radius:26px; display:flex;align-items:center;justify-content:space-around;padding:0 6px; max-width:520px;margin:0 auto; background:linear-gradient(150deg,rgba(255,255,255,.78),rgba(255,255,255,.55)); /* PERF: blur 18px→14px. backdrop-filter is re-sampled on every scroll frame because content scrolls under the fixed nav; blur cost scales ~radius², so this is a large per-frame saving with a near-identical frosted look. */ -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%); border:1px solid rgba(255,255,255,.8); box-shadow:0 18px 36px -14px rgba(16,78,150,.4),inset 0 1.5px 1px rgba(255,255,255,1)} .tab-ind{position:absolute;top:0;left:0;height:52px;width:72px;border-radius:18px;z-index:0; background:linear-gradient(150deg,rgba(70,200,255,.28),rgba(40,140,255,.18)); border:1px solid rgba(120,200,255,.5);box-shadow:0 6px 16px -6px rgba(30,140,240,.5),inset 0 1px 2px rgba(255,255,255,.8); transition:transform .42s cubic-bezier(.3,1.2,.4,1);will-change:transform} .tab{position:relative;z-index:1;flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; cursor:pointer;color:var(--ink-faint);transition:color .3s;touch-action:manipulation;-webkit-tap-highlight-color:transparent} .tab span{font-size:10px;font-weight:700;letter-spacing:.01em} .tab svg{width:24px;height:24px;transition:transform .42s cubic-bezier(.3,1.2,.4,1)} .tab.active{color:var(--accent-deep)} .tab.active svg{transform:translateY(-1px) scale(1.08)} /* (device home indicator removed with the frame) */ /* ripple */ .rp{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);pointer-events:none; animation:rip .6s ease-out forwards} @keyframes rip{to{transform:scale(2.4);opacity:0}} /* ============================ LESSON / QUIZ PLAYER ============================ */ .lesson{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;overflow:hidden; background:linear-gradient(170deg,#eef7ff,#e2efff 45%,#eaf2ff); transform:translateY(103%);transition:transform .5s cubic-bezier(.3,.9,.25,1);visibility:hidden; will-change:transform} .lesson.open{transform:translateY(0);visibility:visible} .l-top{padding:calc(16px + env(safe-area-inset-top)) max(20px, calc((100vw - 820px)/2)) 10px;display:flex;align-items:center;gap:10px} .l-close{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;cursor:pointer;color:var(--ink-3); background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 1px #fff} .l-bar{flex:1;height:14px;border-radius:8px;background:rgba(120,170,230,.25);overflow:hidden;border:1px solid rgba(255,255,255,.6)} .l-bar i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#3fd0ff,#1f8fff); box-shadow:0 0 10px rgba(40,170,255,.7);transition:width .4s cubic-bezier(.2,.8,.2,1)} .l-hearts{display:flex;align-items:center;gap:4px;font-family:"Sora";font-weight:700;color:#ff6fa3;font-size:15px;flex:none} .l-stage{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:6px max(22px, calc((100vw - 820px)/2)) 18px;scrollbar-width:none} .l-stage::-webkit-scrollbar{display:none} .l-foot{padding:14px max(20px, calc((100vw - 820px)/2)) calc(18px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.55)} .teach{animation:lessonRise .35s cubic-bezier(.2,.8,.2,1)} /* Lesson cards only — the shared --shadow-float (used app-wide on every "glass strong" surface) stays untouched; just these two cards get a ~18% lighter drop shadow, kept slightly grounded via the inset highlight. */ .glyph-card.glass.strong,.vocab-card.glass.strong{box-shadow:0 20px 43px -20px rgba(16,78,150,.31),inset 0 1.5px 1px rgba(255,255,255,1)} .kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin:6px 2px 14px} .glyph-card{padding:30px 24px;text-align:center;margin-bottom:15px} .glyph-card .glyph{font-size:100px;line-height:1;color:var(--accent-deep);text-shadow:0 8px 24px rgba(30,140,255,.22)} .glyph-card .gname{font-family:"Sora";font-weight:700;font-size:22px;margin-top:12px;letter-spacing:-.01em} .glyph-card .gtrans{font-size:14px;color:var(--ink-3);margin-top:3px} .glyph-card .gsound{display:inline-block;margin-top:14px;font-weight:700;font-size:14px;color:var(--accent-deep); background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);padding:8px 16px;border-radius:13px} .ex-card{padding:15px 18px;display:flex;align-items:center;gap:14px;margin-bottom:11px} .ex-card .exw{font-size:30px;font-weight:700;color:var(--ink);min-width:54px;text-align:center} .ex-card .exm h5{font-size:15px;font-weight:700;font-family:"Sora"} .ex-card .exm span{font-size:12px;color:var(--ink-3)} .note{font-size:13.5px;line-height:1.65;color:var(--ink-2);padding:6px 4px 0} .vocab-card{padding:32px 24px 28px;text-align:center;margin-bottom:14px} .vocab-icon{font-size:34px;line-height:1;margin-bottom:8px;opacity:.88} .vocab-word{font-family:"Sora";font-weight:800;font-size:44px;letter-spacing:-.02em;color:var(--accent-deep);margin-bottom:0;line-height:1.12;overflow-wrap:break-word} .vocab-meaning{font-size:16px;font-weight:500;color:var(--ink-2);margin-bottom:18px} /* Romanisation under the hero word (pinyin today). Deliberately a long way down from .vocab-word's 44px: it is a temporary crutch that gets withdrawn level by level (helpers.js translitMode), so it must never compete with the characters for the eye. Tone marks sit above the letters, hence the roomier line-height. */ .vocab-pinyin{font-size:17px;font-weight:600;color:var(--ink-2);opacity:.72;line-height:1.5;margin-top:6px;letter-spacing:.01em} /* Furigana (Japanese F0.2) — the kana reading `` sits above a kanji spelling via the native / elements (helpers.js furiganaHtml). No course gate needed here: `kana:` is only ever authored on Japanese vocab_items, so markup simply never appears for any other course. Sized relative to whichever parent it lands in (44px hero word, a running -text token, or the peek card's 21px title) rather than one fixed size. */ ruby{ruby-position:over} rt{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; font-weight:500;color:var(--ink-2);opacity:.75;user-select:none} .vocab-word rt{font-size:16px} /* Pronounced form (Korean `say:`, e.g. "[조아요]") — a phonological fact about THIS word, not a beginner crutch, so unlike .vocab-pinyin it never fades by level (helpers.js translitMode). Sits between pinyin and forms: quieter than pinyin (it is exception content, most words never show it) but still visually distinct from the plain grey forms caption below it. */ .vocab-say{font-size:14.5px;font-weight:600;color:var(--ink-2);opacity:.68;line-height:1.4;margin-top:4px} /* Grammatical forms (noun plural, verb principal parts, adjective degrees) — unlike .vocab-pinyin this is part of the word, not a crutch, so it never fades by level; kept visually quieter and permanent, a small grey caption. */ .vocab-forms{font-size:13.5px;font-weight:500;color:var(--ink-2);opacity:.6;line-height:1.4;margin-top:4px} /* In-card audio — tinted to match the word's accent colour and pulled close underneath it, so it reads as part of the same object, not a separate control sitting on top of the card. */ .vocab-audio,.card-audio{margin-top:7px} .vocab-audio .speak-btn,.card-audio .speak-btn{background:rgba(30,143,255,.08);border-color:rgba(30,143,255,.16);box-shadow:none;min-height:38px;padding:7px 14px} .vocab-audio .speak-btn:active,.card-audio .speak-btn:active{background:rgba(30,143,255,.16)} /* Below-card explanation — one calm, secondary line shared by new-word AND discovery/concept screens so every lesson type reads with the same rhythm. Sized up from 15px for comfortable reading while staying clearly secondary to the 40px word above it. */ .vocab-explain,.disc-note{font-size:15px;font-weight:500;color:var(--ink-2);text-align:center;line-height:1.5;max-width:360px;margin:16px auto 0;padding:0 10px} /* Step 2 — the discovery moment's body, under its one-line title. Lighter and smaller than the title so the insight reads as elaboration, not a heading. */ .disc-body{font-size:13.5px;font-weight:400;color:var(--ink-3);text-align:center;line-height:1.55;max-width:360px;margin:10px auto 0;padding:0 10px} /* Explain feature — a small secondary control below the existing lesson content. Reuses .speak-btn (no new button style) and the existing .glass surface (no new colours/shadows) for the expandable panel. */ .explain-row{text-align:center;margin-top:16px} .explain-panel{text-align:left;max-width:360px;margin:14px auto 0;padding:16px 18px;font-size:15px;line-height:1.65;color:var(--ink-2)} .explain-panel .el{margin:0} .explain-panel .sp{height:10px} /* Frozen vertical position: the learning block sits in the upper third of the screen, a short fixed distance below the progress bar, instead of being centred or anchored to the footer. The rest of the screen stays empty below it. Same rule, same offset, for every lesson screen type (discovery, concept, new-word, completion) so they all position identically. */ .lcenter{padding-top:28px} /* On wide screens the flashcard stays a focused object (not a full-width banner). */ .lcenter .glyph-card,.lcenter .vocab-card{width:100%;max-width:460px;margin-left:auto;margin-right:auto} .q{animation:rise .45s cubic-bezier(.2,.8,.2,1)} .qprompt{font-family:"Sora";font-size:19px;font-weight:700;letter-spacing:-.01em;margin:6px 2px 4px;line-height:1.35} .qbig{text-align:center;color:var(--accent-deep);margin:16px 0;line-height:1.1} .qbig.lg{font-size:90px} .qbig.md{font-size:62px} .qbig.sm{font-size:32px;line-height:1.5;font-weight:600} .qhint{text-align:center;font-size:12.5px;color:var(--ink-3);margin:-6px 0 16px} .opts{display:grid;gap:11px} .opts.two{grid-template-columns:1fr 1fr} .opt{padding:17px 16px;border-radius:var(--r-sm);cursor:pointer;font-family:"Sora";font-weight:600;font-size:16px;text-align:center; background:var(--glass-fill); border:1px solid var(--glass-border);box-shadow:var(--shadow-soft);transition:transform .14s,box-shadow .2s,background .2s;user-select:none;position:relative;overflow:hidden} .opt .oa{font-size:40px;line-height:1;color:var(--accent-deep);display:block} .opt:active{transform:scale(.97)} /* Arabic-specific font and direction rules — scoped to [data-course="arabic"] so they never apply to Latin-script courses (Latvian etc.). */ .lesson[data-course="arabic"] .glyph-card .glyph{font-family:"Noto Naskh Arabic",serif} .lesson[data-course="arabic"] .ex-card .exw{font-family:"Noto Naskh Arabic",serif;direction:rtl} .lesson[data-course="arabic"] .qbig{font-family:"Noto Naskh Arabic",serif} .lesson[data-course="arabic"] .qbig.md, .lesson[data-course="arabic"] .qbig.sm{direction:rtl} .lesson[data-course="arabic"] .opt .oa{font-family:"Noto Naskh Arabic",serif} .opt.correct{box-shadow:var(--shadow-float),inset 0 0 0 2px #18c08a;background:linear-gradient(150deg,rgba(214,255,240,.92),rgba(214,255,240,.5))} .opt.correct .oa{color:#0e9a6c} .opt.wrong{box-shadow:var(--shadow-float),inset 0 0 0 2px #ff5f7a;background:linear-gradient(150deg,rgba(255,224,231,.92),rgba(255,224,231,.5))} .opt.wrong .oa{color:#e23a59} .opt.dim{opacity:.45} /* Phase 2: build (word-bank) exercise — tap tiles to arrange a sentence */ .build-answer{min-height:54px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;padding:12px;margin-bottom:14px;border-radius:var(--r-sm);border:1.5px dashed var(--glass-border);background:rgba(255,255,255,.35);transition:box-shadow .2s,background .2s} .build-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .build-tile{padding:11px 15px;border-radius:var(--r-sm);cursor:pointer;font-family:"Sora";font-weight:600;font-size:16px;background:var(--glass-fill);border:1px solid var(--glass-border);box-shadow:var(--shadow-soft);transition:transform .14s;user-select:none} .build-tile:active{transform:scale(.95)} .build-answer.correct{box-shadow:inset 0 0 0 2px #18c08a;background:linear-gradient(150deg,rgba(214,255,240,.92),rgba(214,255,240,.5))} .build-answer.wrong{box-shadow:inset 0 0 0 2px #ff5f7a;background:linear-gradient(150deg,rgba(255,224,231,.92),rgba(255,224,231,.5))} /* ── Faza 1: matn ishlab chiqarish mashqlari ─────────────────────────── Uchala yangi mashq (build_sentence / dictation / error_hunt) mavjud .q, .opt va .build-* uslublarini qayta ishlatadi — quyida faqat ular bermaydigan narsa bor. Yangi rang yo'q: to'g'ri #18c08a, xato #ff5f7a, ya'ni o'quvchi allaqachon o'rgangan signal. */ .build-answer.rtl{direction:rtl} /* Xato POZITSIYASI — qizil emas, sariq. Qizil "javob noto'g'ri" degani, bu esa "so'z to'g'ri, joyi noto'g'ri" — boshqa xabar, boshqa rang. */ .build-tile.wrongpos{box-shadow:inset 0 0 0 2px #f0a500;background:linear-gradient(150deg,rgba(255,244,214,.95),rgba(255,244,214,.6))} /* Kiritish maydoni — .opt bilan bir xil o'lcham va soya, shunda yozish maydoni "boshqa ilovadan kelgan" bo'lib ko'rinmaydi. */ .tc-input{width:100%;padding:17px 16px;border-radius:var(--r-sm);font-family:"Sora";font-weight:600;font-size:17px;text-align:center;color:var(--ink); background:var(--glass-fill);border:1px solid var(--glass-border);box-shadow:var(--shadow-soft);outline:none;transition:box-shadow .2s,background .2s} .tc-input::placeholder{color:var(--ink-faint);font-weight:500} .tc-input:focus{box-shadow:var(--shadow-float),inset 0 0 0 2px var(--accent-soft)} .tc-input.correct{box-shadow:inset 0 0 0 2px #18c08a;background:linear-gradient(150deg,rgba(214,255,240,.92),rgba(214,255,240,.5))} .tc-input.wrong{box-shadow:inset 0 0 0 2px #ff5f7a;background:linear-gradient(150deg,rgba(255,224,231,.92),rgba(255,224,231,.5))} .lesson[data-course="arabic"] .tc-input{font-family:"Noto Naskh Arabic",serif;font-size:22px} /* Ikkinchi urinish eslatmasi. Sariq — bu xato emas, bu "yana urinib ko'ring". */ .tc-note{min-height:20px;margin-top:10px;text-align:center;font-size:13px;font-weight:600;color:var(--ink-3)} .tc-note.retry{color:#b57900} /* Diktant audio qatori: katta asosiy tugma + kichik "sekinroq". */ .dict-audio{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 18px} .dict-audio.one{margin:2px 0 12px} .dict-play{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;border:none;flex:none; background:linear-gradient(150deg,#5ad7ff,#0a6dff);box-shadow:0 14px 26px -10px rgba(20,120,220,.65);transition:transform .14s} .dict-play:active{transform:scale(.94)} .dict-play svg{width:26px;height:26px} .dict-slow{font-size:13px} /* Xatoni top — jumla bosiladigan so'zlarga bo'linadi. */ .eh-words{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0 4px} .eh-words.rtl{direction:rtl} .eh-word{padding:11px 14px;border-radius:var(--r-sm);cursor:pointer;font-family:"Sora";font-weight:600;font-size:17px;color:var(--ink); background:var(--glass-fill);border:1px solid var(--glass-border);box-shadow:var(--shadow-soft);transition:transform .14s,box-shadow .2s;user-select:none} .eh-word:active{transform:scale(.95)} .eh-word:disabled{cursor:default} .lesson[data-course="arabic"] .eh-word{font-family:"Noto Naskh Arabic",serif;font-size:21px} /* `found` — haqiqiy xato joyi (o'quvchi topdimi yoki bizmi, farqi yo'q: ko'z shu yerga tushishi kerak). `miss` — o'quvchining noto'g'ri tanlovi. */ .eh-word.found{box-shadow:inset 0 0 0 2px #f0a500;background:linear-gradient(150deg,rgba(255,244,214,.95),rgba(255,244,214,.6))} .eh-word.miss{box-shadow:inset 0 0 0 2px #ff5f7a;background:linear-gradient(150deg,rgba(255,224,231,.92),rgba(255,224,231,.5));opacity:.75} .eh-word.bad{text-decoration:line-through;opacity:.6} .eh-fix{margin-top:20px;animation:rise .3s} .eh-fix-label{text-align:center;font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:10px} .eh-fixopts{display:flex;flex-wrap:wrap;gap:9px;justify-content:center} .eh-fixopt{padding:13px 17px;border-radius:var(--r-sm);cursor:pointer;font-family:"Sora";font-weight:600;font-size:16px;color:var(--ink); background:var(--glass-fill);border:1px solid var(--glass-border);box-shadow:var(--shadow-soft);transition:transform .14s} .eh-fixopt:active{transform:scale(.96)} .eh-fixopt.sel{box-shadow:var(--shadow-float),inset 0 0 0 2px var(--accent-soft)} .lesson[data-course="arabic"] .eh-fixopt{font-family:"Noto Naskh Arabic",serif;font-size:20px} /* Tuzatish variantlari jumla bilan bir yo'nalishda o'qilsin — ustidagi so'zlar o'ngdan chapga bo'lib, variantlar chapdan o'ngga qolsa, ko'z ikki marta yo'nalish almashtiradi. */ .lesson[data-course="arabic"] .eh-fixopts{direction:rtl} /* ── Faza 2: tez javob + shadowing ─────────────────────────────────── */ .speed-intro,.speed-result{text-align:center} .speed-badge{font-size:52px;line-height:1;margin:18px 0 4px} .speed-title{font-family:"Sora";font-size:23px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px} .speed-note{max-width:340px;margin:0 auto} .speed-best{margin-top:14px;font-size:13.5px;font-weight:700;color:var(--ink-3)} .speed-best.new{color:#0e9a6c;font-size:15px} /* Taymer HUD — savol ustida, chalg'itmaydigan darajada kichik. */ .speed-hud{display:flex;align-items:center;gap:12px;margin:2px 0 18px} .speed-bar{flex:1;height:8px;border-radius:6px;background:rgba(150,190,240,.25);overflow:hidden} .speed-bar i{display:block;height:100%;width:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent-soft),var(--accent-deep)); /* Chiziqli — taymer bilan bir xil tezlikda, sakramasdan kamayadi. */ transition:width .1s linear} .speed-count{display:flex;align-items:baseline;gap:5px;font-family:"Sora";flex:none} .speed-count b{font-size:19px;font-weight:800;color:var(--accent-deep);min-width:24px;text-align:right} .speed-count span{font-size:11.5px;font-weight:600;color:var(--ink-3)} .speed-count.hits b{color:#0e9a6c} .speed-result{padding-top:34px} .speed-score{font-family:"Sora";font-size:76px;font-weight:800;line-height:1;color:var(--accent-deep)} .speed-scorel{margin-top:8px;font-size:14px;color:var(--ink-2);font-weight:600} .shadow-card{padding:26px 20px;text-align:center;margin:16px auto 20px;max-width:460px} .shadow-text{font-family:"Sora";font-size:28px;font-weight:700;line-height:1.35;color:var(--ink)} .lesson[data-course="arabic"] .shadow-text{font-family:"Noto Naskh Arabic",serif;font-size:34px} .shadow-tr{margin-top:8px;font-size:14px;color:var(--ink-3)} .shadow-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap} /* Faza 4.1: flashcards — the card itself is the tap target (flip), and the footer's two self-rating buttons only appear once flipped (renderFoot in flashcards.js). Reuses .vocab-card/.vocab-word/.vocab-explain as-is. */ .flash-card{cursor:pointer;user-select:none} .flash-hint{margin-top:16px;font-size:13px;color:var(--ink-3)} .flash-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap} .flash-actions .btn{flex:1;min-width:140px} .shadow-rec.on{background:linear-gradient(150deg,#ff7a90,#e23a59);color:#fff;border-color:transparent} .shadow-rec .sh-mic{font-size:15px} /* Talaffuz bahosi rozetkasi (Faza 7). Yashil = o'tdi (≥60%), sariq = past. */ .shadow-score{margin:14px auto 2px;max-width:360px;text-align:center;font-family:"Sora";font-weight:700;font-size:16px;padding:11px 16px;border-radius:var(--r-sm)} .shadow-score.good{color:#0e9a6c;background:linear-gradient(150deg,rgba(214,255,240,.9),rgba(214,255,240,.45));box-shadow:inset 0 0 0 1.5px rgba(24,192,138,.5)} .shadow-score.low{color:#c9852b;background:linear-gradient(150deg,rgba(255,244,214,.9),rgba(255,244,214,.45));box-shadow:inset 0 0 0 1.5px rgba(230,170,40,.45)} .shadow-hint{min-height:20px;margin-top:14px;text-align:center;font-size:12.5px;color:var(--ink-3)} /* Faza 4.3 — live word-by-word coaching row (Chinese only, see shadowing.js liveCoach). Sits under the target card; each word lights up as the learner's speech is recognised as having reached it. */ .shadow-live{margin:2px auto 0;max-width:460px;text-align:center;font-family:"Sora";font-size:22px;font-weight:700;line-height:1.7} .sw-tok{display:inline-block;padding:1px 3px;margin:0 1px;border-radius:6px;color:var(--ink-4,var(--ink-3));transition:background .15s,color .15s} .sw-tok.punct{color:var(--ink-3);padding:0;margin:0} .sw-tok.said{color:#0e9a6c;background:rgba(24,192,138,.14)} .sw-tok.current{color:var(--accent-deep);background:rgba(31,143,255,.16);box-shadow:inset 0 0 0 1.5px rgba(31,143,255,.4)} /* Moslashtirish o'yini (Faza 7, dizayn Faza 7.1 da yangilandi — foydalanuvchi yubоrgan referens ekranidagi tuzilma: sarlavha+link belgisi, kichik tushuntirish qatori, ikki tilni nomlab turgan ustun sarlavhalari, o'ng ustunning tanlanmagan holatidagi punktir chegara, va mos kelgan juftda to'liq rangli fon + check belgisi — hammasi bizning shishasimon (glass) uslub va rang tizimimizga moslab qayta qurilgan.) */ .match-q .qprompt{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center} .match-link-ic{font-size:18px} .match-sub{text-align:center;font-size:13px;color:var(--ink-3);margin:2px 0 16px} .match-heads{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:540px;margin:0 auto 10px} .match-head{display:flex;align-items:center;justify-content:center;gap:6px;font-family:"Sora";font-weight:700;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);padding:6px 4px} .match-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 auto 4px;max-width:540px} .match-col{display:grid;gap:10px;align-content:start} .match-item{position:relative;padding:15px 34px 15px 12px;border-radius:var(--r-sm);cursor:pointer;font-family:"Sora";font-weight:600;font-size:15px;line-height:1.3;text-align:center;color:var(--ink);border:0;background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(255,255,255,.55));box-shadow:var(--shadow-float);transition:transform .12s,box-shadow .12s,background .15s,color .15s} .match-txt{word-break:break-word} /* O'ng ustun (ma'no) — tanlanmagan holatda punktir chegara, referensdagi kabi: bu ustun "hali juftlanmagan nishon" ekanini ko'rsatadi. :not(.sel):not(.matched) — #mR ID selektori ikkita klassdan (.match-item.sel/ .matched) specifiklik jihatidan kuchliroq edi, shuning uchun mos kelgan juft OQ TO'LIQ rangga bo'yalishi kerak bo'lsa ham punktir/shaffof holatda qolib ketardi. Endi bu qoida faqat HALI TANLANMAGAN holatga tegadi. */ #mR .match-item:not(.sel):not(.matched){background:transparent;box-shadow:none;border:2px dashed rgba(120,150,190,.4)} .lesson[data-course="arabic"] #mL .match-item{font-family:"Noto Naskh Arabic",serif;font-size:23px} .match-item:active{transform:scale(.97)} .match-item .match-check{position:absolute;right:12px;top:50%;transform:translateY(-50%) scale(.4);opacity:0;font-size:17px;font-weight:800;transition:transform .18s,opacity .18s} .match-item.sel{border-style:solid;box-shadow:var(--shadow-float),inset 0 0 0 2px #1f8fff;background:linear-gradient(150deg,rgba(224,240,255,.96),rgba(224,240,255,.6))} /* Mos kelgan juft — referensdagi kabi TO'LIQ rangli fon (xira bo'lib ketmaydi, o'quvchi qilgan ishini ko'rib turadi), oq matn + check belgisi. */ .match-item.matched{pointer-events:none;border-style:solid;color:#fff;background:linear-gradient(150deg,#3fd6a8,#0e9a6c);box-shadow:0 10px 20px -8px rgba(14,154,108,.55)} .match-item.matched .match-check{opacity:1;transform:translateY(-50%) scale(1)} .match-item.miss{border-style:solid;box-shadow:var(--shadow-float),inset 0 0 0 2px #ff5f7a;background:linear-gradient(150deg,rgba(255,224,231,.95),rgba(255,224,231,.6))} /* Tinglash tushunish (Faza 7) — katta ijro tugmasi, keyin variantlar. */ .lc-audio{display:flex;flex-direction:column;align-items:center;gap:10px;margin:18px 0 20px} .lc-play{width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(150deg,#46d2ff,#1f8fff);box-shadow:0 14px 26px -10px rgba(31,143,255,.7);transition:transform .12s} .lc-play:active{transform:scale(.94)} .lc-play svg{width:30px;height:30px} .lc-hint{font-size:12.5px;color:var(--ink-3)} .shadow-rate-l{text-align:center;font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:9px} /* Uchta baho teng kenglikda: biri kattaroq bo'lsa, u "to'g'ri javob" bo'lib ko'rinadi — o'z-o'zini baholashda to'g'ri javob yo'q. */ .shadow-rate{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px} .shadow-rate .btn{justify-content:center;padding:15px 8px;font-size:15px} /* C2: Code Key panel (Progress tab) — derived knowledge map */ .codekey{padding:16px;border-radius:18px;margin-bottom:14px} .ck-levels{display:flex;flex-direction:column;gap:10px;margin-bottom:6px} .ck-lvl-top{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:4px} .ck-lvl-num{color:var(--ink-3)} .ck-bar{height:8px;border-radius:6px;background:rgba(150,190,240,.25);overflow:hidden} .ck-bar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent-soft),var(--accent-deep));transition:width .4s} .ck-sec{margin-top:16px} .ck-sec h4{font-family:"Sora";font-size:14px;font-weight:700;color:var(--ink);margin-bottom:9px;display:flex;align-items:center;gap:7px} .ck-count{font-size:11px;font-weight:700;color:var(--accent-deep);background:rgba(31,143,255,.12);border-radius:20px;padding:2px 8px} .ck-chips{display:flex;flex-wrap:wrap;gap:8px} .ck-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;font-size:15px;font-weight:600;border-radius:var(--r-sm);cursor:pointer;background:var(--glass-fill);border:1px solid var(--glass-border);box-shadow:var(--shadow-soft);color:var(--ink)} .ck-cards{display:flex;flex-wrap:wrap;gap:9px} .ck-card{display:flex;flex-direction:column;gap:4px;padding:11px 13px;border-radius:var(--r-sm);min-width:120px;flex:1 1 140px} .ck-card-glyph{font-size:20px;line-height:1.1} .ck-card-title{font-size:12.5px;font-weight:600;color:var(--ink-2);line-height:1.3} .ck-caps{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px} .ck-caps li{font-size:13.5px;color:var(--ink-2);line-height:1.4} .ck-empty{font-size:13px;color:var(--ink-faint);font-style:italic} .fb{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:0 2px;font-family:"Sora";font-weight:700;font-size:15px;animation:rise .3s} .fb.ok{color:#0e9a6c} .fb.no{color:#e23a59} .fb .fic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none} .fb.ok .fic{background:linear-gradient(145deg,#34d9a0,#0e9a6c)} .fb.no .fic{background:linear-gradient(145deg,#ff7a90,#e23a59)} .fb small{display:block;font-weight:500;font-size:12px;color:var(--ink-3);margin-top:1px;font-family:"Outfit"} /* Sprint 1 — the "why your answer was wrong" line. Sits under "Answer: X", set apart by a rule so it reads as explanation rather than a second answer. */ .fb small.fb-why{margin-top:6px;padding-top:6px;border-top:1px solid rgba(226,58,89,.18);line-height:1.45} /* Faza 1 — the same line on a CORRECT answer (near-miss note). Green rule, because here it is a refinement, not a correction. */ .fb.ok small.fb-why{border-top-color:rgba(14,154,108,.22)} .btn.wide{width:100%;justify-content:center;padding:18px 16px;font-size:16px;border-radius:16px} .btn.ghost{background:rgba(255,255,255,.6);color:var(--accent-deep);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 1px #fff} .btn.grey{background:linear-gradient(145deg,#b6c8de,#8ea5bf)} .complete{text-align:center;padding:26px 8px;animation:lessonRise .35s cubic-bezier(.2,.8,.2,1)} .complete .seal{width:118px;height:118px;border-radius:38px;margin:8px auto 6px;display:grid;place-items:center;color:#fff; background:linear-gradient(150deg,#5ad7ff,#0a6dff); box-shadow:0 20px 40px -12px rgba(20,120,220,.7),inset 0 2px 3px rgba(255,255,255,.7),0 0 34px rgba(60,200,255,.55); animation:floaty 4s ease-in-out infinite} .complete h2{font-family:"Sora";font-size:28px;font-weight:800;margin-top:10px;letter-spacing:-.02em} .complete .csub{font-size:16px;color:var(--ink-3);margin-top:6px} .complete .cap-line{color:var(--accent-deep);font-weight:700;max-width:320px;margin-left:auto;margin-right:auto} .complete .next-line{font-size:12.5px;color:var(--ink-faint);margin-top:16px} /* Comparison glyphs (e.g. "a → ā") shrink so they never overflow the card. */ .glyph-card .glyph.sm{font-size:50px;font-weight:700} /* Small-screen safety: keep the hero glyph/word inside the card, no overflow. */ @media (max-width:400px){ .glyph-card{padding:26px 18px} .glyph-card .glyph{font-size:78px} .glyph-card .glyph.sm{font-size:42px} .vocab-card{padding:26px 18px} .vocab-word{font-size:37px} .vocab-icon{font-size:30px} } /* Step 3 — Placement test. Runs in the lesson shell, so it only needs the two pieces the lesson flow has no equivalent of: a title on the intro card and the unobtrusive question counter where the feedback bar normally sits. */ /* Centred explicitly: .gname is styled for use INSIDE a glyph card, and this title sits below one, where the card's centring no longer applies. */ .pl-title{font-family:"Sora";font-size:20px;font-weight:800;margin-top:16px;text-align:center} .pl-count{text-align:center;font-size:12.5px;color:var(--ink-faint);padding:14px 0 2px;font-weight:600} /* Step 2 — Unit Story Arc. One continuous screen: the whole point is that the learner reads connected Arabic, so the lines stay together and only scroll. */ .teach.story .st-title{font-family:"Sora";font-size:20px;font-weight:800;text-align:center;margin:2px 0 4px;letter-spacing:-.01em} .teach.story .st-intro{text-align:center;margin-bottom:14px} .st-lines{display:flex;flex-direction:column;gap:9px} .st-line{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:16px; background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);box-shadow:0 2px 8px -4px rgba(30,80,150,.18)} .st-line.b{background:rgba(226,240,255,.6)} .st-line .st-sp{font-size:12px;font-weight:800;color:var(--accent-deep);flex:none;min-width:46px;padding-top:3px} .st-line .st-body{flex:1;min-width:0} .st-line .st-text{font-size:21px;line-height:1.75;font-weight:600} .st-line .st-tr{font-size:13px;color:var(--ink-3);margin-top:3px;line-height:1.4} .st-lines.no-tr .st-tr{display:none} .st-line .st-audio{flex:none;padding:6px 9px;font-size:12px;align-self:center} /* Faza 3 — bosiladigan so'zlar. Ko'rinishi matnning O'ZI bo'lib qolishi kerak: tugmaga o'xshasa, hikoya matn bo'lishdan to'xtaydi va o'quvchi uni o'qimay, bosib chiqadi. Shuning uchun fon yo'q, faqat bosilganda. */ .st-w{font:inherit;color:inherit;background:none;border:0;padding:1px 2px;margin:0; border-radius:6px;cursor:pointer;line-height:inherit} .st-w:active{background:rgba(31,143,255,.14)} /* Furigana riding on a tappable running-text token (renderPeekWords) needs to stay small enough that it does not blow up the line height of an entire story/dialog line. */ .st-w rt,.pk-w rt{font-size:10px;opacity:.7} .st-w.on{background:rgba(31,143,255,.16);box-shadow:inset 0 0 0 1.5px rgba(31,143,255,.5)} /* Qidiruv kartochkasi — bitta, qayta ishlatiladigan. Popover emas: popover o'qilayotgan matnni yopib qo'yardi. */ .st-look{margin-top:14px;padding:14px 16px;border-radius:16px; background:linear-gradient(150deg,rgba(226,240,255,.95),rgba(240,248,255,.8)); border:1px solid var(--glass-border);box-shadow:var(--shadow-soft);animation:rise .25s} .st-look-w{font-family:"Sora";font-size:21px;font-weight:700;color:var(--ink)} .lesson[data-course="arabic"] .st-look-w{font-family:"Noto Naskh Arabic",serif;font-size:26px} .st-look-w rt{font-size:11px} /* Romanisation inside the tap-to-peek card, between the word and its gloss. Sits closer to the word than the gloss does, because it belongs to the word rather than to the explanation. */ .st-look-p{margin-top:2px;font-size:13.5px;font-weight:600;color:var(--ink-2);opacity:.75;line-height:1.4} /* Pronounced-form line (Korean `say:`) inside the peek card — shown at every level like .st-look-p, since a dictionary lookup should never withhold how a word is actually said. */ .st-look-s{margin-top:2px;font-size:12.5px;font-weight:600;color:var(--ink-2);opacity:.7;line-height:1.4} /* Forms line (plural/principal parts/degrees) inside the peek card — quieter than .st-look-p since it's a grammatical fact, not a pronunciation aid. */ .st-look-f{margin-top:2px;font-size:12.5px;font-weight:500;color:var(--ink-2);opacity:.65;line-height:1.4} .st-look-m{margin-top:3px;font-size:14px;color:var(--ink-2);line-height:1.4} .st-look-a{display:flex;align-items:center;gap:9px;margin-top:11px} .st-look-a .st-add{padding:9px 14px;font-size:13.5px} .st-look-a .st-add:disabled{opacity:.55;cursor:default} /* ── Faza 3: dialog roli ───────────────────────────────────────────── */ .dlg-scene{padding:14px 16px;border-radius:16px;margin-bottom:16px} .dlg-scene-t{font-size:14.5px;color:var(--ink-2);line-height:1.5} .dlg-goal{margin-top:8px;font-size:13px;font-weight:700;color:var(--accent-deep)} .dlg-thread{display:flex;flex-direction:column;gap:10px} .dlg-line{display:flex;align-items:flex-start;gap:9px} /* O'quvchining o'z gapi o'ngda va boshqa rangda — suhbat yozuvi o'qilganda kim nima aytgani bir qarashda ko'rinsin. */ .dlg-line.mine{justify-content:flex-end} .dlg-sp{font-size:11.5px;font-weight:800;color:var(--accent-deep);flex:none;min-width:52px;padding-top:9px} .dlg-bubble{max-width:78%;padding:11px 14px;border-radius:16px;background:var(--glass-fill); border:1px solid var(--glass-border);box-shadow:var(--shadow-soft);animation:rise .28s} .dlg-bubble.mine{background:linear-gradient(150deg,#5ad7ff,#0a6dff);border-color:transparent;box-shadow:0 10px 20px -10px rgba(20,120,220,.55)} .dlg-text{font-size:17px;font-weight:600;line-height:1.45} .lesson[data-course="arabic"] .dlg-text{font-family:"Noto Naskh Arabic",serif;font-size:20px} .dlg-bubble.mine .dlg-text{color:#fff} .dlg-tr{margin-top:3px;font-size:12.5px;color:var(--ink-3);line-height:1.35} .dlg-bubble.mine .dlg-tr{color:rgba(255,255,255,.82)} .dlg-replies{display:flex;flex-direction:column;gap:9px} .dlg-reply{display:flex;flex-direction:column;gap:3px;text-align:left;padding:13px 15px;border-radius:14px;cursor:pointer; background:var(--glass-fill);border:1px solid var(--glass-border);box-shadow:var(--shadow-soft);transition:transform .14s} .dlg-reply:active{transform:scale(.98)} .dlg-reply-t{font-family:"Sora";font-size:15.5px;font-weight:600;color:var(--ink)} .lesson[data-course="arabic"] .dlg-reply-t{font-family:"Noto Naskh Arabic",serif;font-size:18px} .dlg-reply-tr{font-size:12.5px;color:var(--ink-3)} /* Yakun — ball emas, vazifa natijasi. */ .dlg-outcome{margin-top:16px;padding:16px;border-radius:16px;text-align:center;animation:rise .3s} .dlg-outcome.ok{background:linear-gradient(150deg,rgba(214,255,240,.95),rgba(214,255,240,.55));box-shadow:inset 0 0 0 2px #18c08a} .dlg-outcome.no{background:linear-gradient(150deg,rgba(255,244,214,.95),rgba(255,244,214,.6));box-shadow:inset 0 0 0 2px #f0a500} .dlg-outcome-q{font-size:13.5px;color:var(--ink-2)} .dlg-outcome-a{font-family:"Sora";font-size:19px;font-weight:800;margin-top:5px} .dlg-outcome.ok .dlg-outcome-a{color:#0e9a6c} .dlg-outcome.no .dlg-outcome-a{color:#b57900} .dlg-outcome-w{margin-top:9px;font-size:13.5px;color:var(--ink-2);line-height:1.5} .teach.story .st-toggle{margin-top:16px} /* Faza 4.0 — word status: the green/yellow/grey a word carries in running text (story words, word-family members). A left tint-bar rather than a full fill, so it colours the word without fighting the text for legibility. New words get no bar — grey would read as "greyed out / disabled" here. */ .ws-known{box-shadow:inset 2px 0 0 #18c08a} .ws-learning{box-shadow:inset 2px 0 0 #f0a500} .st-w.ws-known{border-radius:3px;background:rgba(24,192,138,.10)} .st-w.ws-learning{border-radius:3px;background:rgba(240,165,0,.12)} /* Faza 4.2 — same tap-to-peek word, now inside a dialog bubble (Chinese only, see exercises/dialog.js). Shares .st-w's "look like plain text until touched" rule; .mine gets a lighter overlay since its bubble is already a solid blue and the story's dark-on-light tint would vanish. */ .dlg-w{font:inherit;color:inherit;background:none;border:0;padding:1px 2px;margin:0; border-radius:6px;cursor:pointer;line-height:inherit} .dlg-w:active{background:rgba(31,143,255,.14)} .dlg-w.on{background:rgba(31,143,255,.16);box-shadow:inset 0 0 0 1.5px rgba(31,143,255,.5)} .dlg-w.ws-known{border-radius:3px;background:rgba(24,192,138,.10)} .dlg-w.ws-learning{border-radius:3px;background:rgba(240,165,0,.12)} .dlg-bubble.mine .dlg-w:active{background:rgba(255,255,255,.22)} .dlg-bubble.mine .dlg-w.on{background:rgba(255,255,255,.28);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)} .dlg-bubble.mine .dlg-w.ws-known,.dlg-bubble.mine .dlg-w.ws-learning{background:rgba(255,255,255,.16)} /* ── Faza 4.5 — AI roleplay chat ────────────────────────────────────── Reuses .dlg-line/.dlg-bubble so an AI conversation looks like the authored dialog exercise rather than a second, unrelated chat UI. Only the chrome around the thread is new. */ .ai-sheet{display:flex;flex-direction:column;max-height:92vh;max-height:92dvh} .ai-empty{padding:26px 8px;text-align:center;font-size:14px;color:var(--ink-3);line-height:1.55} /* The privacy line is deliberately ABOVE the scenario list, not tucked in a footer: the learner should read it before they pick a scene, not after they have typed into one. */ .ai-privacy{margin:0 0 14px;padding:11px 13px;border-radius:12px;font-size:11.5px;line-height:1.5; color:#8a6d1f;background:rgba(255,244,214,.72);box-shadow:inset 0 0 0 1px rgba(230,170,40,.3)} .ai-picker{display:flex;flex-direction:column;gap:9px;padding-bottom:6px} .ai-scn{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:14px 15px;border-radius:16px;cursor:pointer; background:var(--glass-fill);border:1.5px solid var(--glass-border);box-shadow:var(--shadow-soft);transition:transform .16s} .ai-scn:active{transform:scale(.98)} .ai-scn-ic{font-size:24px;flex:none;line-height:1} .ai-scn-tx{display:flex;flex-direction:column;gap:3px;min-width:0} .ai-scn-t{font-family:"Sora";font-size:15.5px;font-weight:700;color:var(--ink)} .ai-scn-g{font-size:12.5px;color:var(--ink-3);line-height:1.4} .ai-head{display:flex;align-items:center;gap:8px;margin-bottom:12px} .ai-back{flex:none;width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;font-size:22px;line-height:1; color:var(--accent-deep);background:rgba(31,143,255,.1)} /* flex:1 so a trailing button (the voice toggle) lands at the far right instead of hugging the title. */ .ai-head-t{flex:1;font-family:"Sora";font-size:17px;font-weight:800} .ai-scene{padding:12px 14px;border-radius:14px;margin-bottom:12px} .ai-scene-s{font-size:13.5px;color:var(--ink-2);line-height:1.5} .ai-scene-g{margin-top:6px;font-size:12.5px;font-weight:700;color:var(--accent-deep)} /* Fixed height + its own scroll: the compose row must stay reachable as the transcript grows, otherwise the input walks off the bottom of the sheet. */ .ai-thread{flex:1;min-height:180px;max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:9px; padding:2px;scrollbar-width:none} .ai-thread::-webkit-scrollbar{display:none} .ai-compose{display:flex;gap:8px;margin-top:12px} .ai-input{flex:1;min-width:0;padding:13px 15px;border-radius:14px;font-family:inherit;font-size:15px;color:var(--ink); background:rgba(255,255,255,.75);border:1.5px solid var(--glass-border);outline:none} .ai-input:focus{border-color:var(--accent)} .ai-input:disabled{opacity:.55} .ai-send{flex:none;padding:13px 18px} .ai-status{min-height:18px;margin-top:9px;text-align:center;font-size:12.5px;color:var(--ink-3)} .ai-status.warn{color:#b57900;font-weight:600} /* ── F6 — finish the scene early, and the report that closes it ─────── The error list borrows .ai-privacy's amber, not the red of a wrong answer: this is unscored practice, and the block is "here is what to work on", not a grade. It sits OUTSIDE .dlg-bubble on purpose — see _aiRenderErrors in ai-chat.js: a correction is the app speaking, not the character the learner was just talking to. */ .ai-finish{flex:none;padding:7px 12px;border:0;border-radius:999px;cursor:pointer;font-family:inherit; font-size:12.5px;font-weight:700;color:var(--accent-deep);background:rgba(31,143,255,.1)} .ai-finish:disabled{opacity:.4;cursor:default} .ai-errors{padding:12px 14px;border-radius:14px; background:rgba(255,244,214,.72);box-shadow:inset 0 0 0 1px rgba(230,170,40,.3)} .ai-errors-t{font-family:"Sora";font-size:13px;font-weight:800;color:#8a6d1f;margin-bottom:6px} .ai-errors-l{margin:0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--ink-2)} .ai-errors-l li{margin-top:2px} /* ── Faza 4.6 — voice (mic input, spoken output) ────────────────────── Silent-by-default, opt-in controls (see ai-chat.js header) — the CSS mirrors that: no button here is styled "on" until the learner taps it. */ .ai-voice-toggle{flex:none;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;font-size:17px;line-height:1; background:rgba(31,143,255,.1);transition:background .16s} .ai-voice-toggle.on{background:rgba(31,143,255,.22)} /* Mirrors .shadow-rec's "off = ghost button, on = red recording state" language (shadowing.js, Faza 2.2/7) rather than inventing a new one — a mic means the same thing everywhere in this app. */ .ai-mic{flex:none;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center; background:var(--glass-fill);border:1.5px solid var(--glass-border)} .ai-mic .ai-mic-ic{font-size:17px} .ai-mic.on{background:linear-gradient(150deg,#ff7a90,#e23a59);border-color:transparent} .ai-mic:disabled{opacity:.45;cursor:default} /* Per-bubble listen button — small and quiet, sits under the gloss line so it never competes with the Chinese text for attention. */ .ai-listen{margin-top:7px;width:26px;height:26px;border-radius:50%;border:0;cursor:pointer; display:flex;align-items:center;justify-content:center;color:var(--accent-deep);background:rgba(31,143,255,.1)} .dlg-bubble.mine .ai-listen{color:#fff;background:rgba(255,255,255,.22)} /* Tap-to-peek inside an AI bubble — same rule as .dlg-w (Faza 4.2). */ .ai-w{font:inherit;color:inherit;background:none;border:0;padding:1px 2px;margin:0; border-radius:6px;cursor:pointer;line-height:inherit} .ai-w:active{background:rgba(31,143,255,.14)} .ai-w.on{background:rgba(31,143,255,.16);box-shadow:inset 0 0 0 1.5px rgba(31,143,255,.5)} .ai-w.ws-known{border-radius:3px;background:rgba(24,192,138,.10)} .ai-w.ws-learning{border-radius:3px;background:rgba(240,165,0,.12)} /* ── Faza 4.4 — whiteboard (the roleplay word wall) ─────────────────── Prefixed `rwb-`, NOT `wb-`: the Word Bank screen already owns wb-head, wb-w, wb-p and wb-m further down this file. Reusing that prefix silently restyled the Word Bank (caught in review) — the two features are unrelated and must not share a namespace. A horizontal strip, not a grid: the sheet already carries a scene card, the transcript and the compose row, and a grid would push the input off the screen exactly when the learner wants to type. Scrolls sideways, so a long conversation hides nothing — it just gets wider. */ .rwb{margin-top:12px;padding-top:11px;border-top:1px solid rgba(120,170,230,.22)} .rwb-head{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--accent-deep);margin-bottom:8px} /* Deliberately NOT scroll-behavior:smooth. The strip is rebuilt wholesale on every new card, so a smooth scroll would be animating a brand-new element from a position it never occupied — in practice the browser cancels the animation and the jump is silently dropped (observed: scrollLeft stayed 0 while scrollWidth was 1136). An instant jump is both what works and what the interaction actually means: new content appeared, here it is. */ .rwb-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px; scrollbar-width:none;-webkit-overflow-scrolling:touch} .rwb-strip::-webkit-scrollbar{display:none} .rwb-card{position:relative;flex:none;width:96px;display:flex;flex-direction:column;align-items:center;gap:2px; padding:10px 7px;border-radius:14px;cursor:pointer;text-align:center; background:var(--glass-fill);border:1.5px solid var(--glass-border); box-shadow:var(--shadow-soft);transition:transform .16s} .rwb-card:active{transform:scale(.95)} .rwb-ic{font-size:22px;line-height:1.15} .rwb-w{font-family:"Sora";font-size:17px;font-weight:800;color:var(--ink);line-height:1.2} .rwb-p{font-size:10.5px;color:var(--accent-deep);font-weight:600} .rwb-m{font-size:10.5px;color:var(--ink-3);line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* Status uses the same green/amber the rest of the vocabulary graph uses (word-status.js); a card with no bar is a word the learner has not met. */ .rwb-card.ws-known{box-shadow:var(--shadow-soft),inset 3px 0 0 #18c08a} .rwb-card.ws-learning{box-shadow:var(--shadow-soft),inset 3px 0 0 #f0a500} /* Tapped-and-kept: a quiet tick, not a colour change — the status bar records what the word WAS when the conversation raised it. */ .rwb-card.kept{border-color:rgba(24,192,138,.55)} .rwb-card.kept::after{content:'✓';position:absolute;top:5px;right:7px;font-size:10px;color:#0e9a6c} /* Faza 4.1 — word family. Members are a responsive grid of tap-to-hear cards; the two root-choice rows appear one after the other as each stage opens. */ .q.wf .kicker{margin-bottom:4px} .wf-members{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:9px;margin:14px 0 6px} .wf-members.rtl{direction:rtl} .wf-member{display:flex;flex-direction:column;gap:2px;text-align:left;padding:11px 13px;border-radius:14px;cursor:pointer; background:var(--card-2,rgba(0,0,0,.03));border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)} .wf-members.rtl .wf-member{text-align:right} .wf-member:active{transform:scale(.98)} .wf-member-w{font-family:"Sora";font-size:18px;font-weight:700;color:var(--ink)} .lesson[data-course="arabic"] .wf-member-w{font-family:"Noto Naskh Arabic",serif;font-size:23px} /* Romanisation on a word-family member. In a phonetic (声旁) family this column IS the lesson — 请 qǐng · 清 qīng · 情 qíng read as one sound — so it is weighted above the gloss rather than below it. */ .wf-member-p{font-size:12.5px;font-weight:600;color:var(--ink-2);opacity:.8;line-height:1.35} .wf-member-m{font-size:12.5px;color:var(--ink-3);line-height:1.35} .wf-stage{margin-top:12px} .wf-roots{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} /* Faza 6 fix: this used to hardcode the Arabic serif font on every course's root chips and probe word — harmless while word_family only shipped for Arabic, wrong the moment Russian roots (дом, стар, пять) render through the same exercise. Scoped to [data-course="arabic"] exactly like .wf-member-w above; every other course keeps the regular type. */ .wf-root{font-family:"Sora";font-size:19px;font-weight:700;color:var(--ink);letter-spacing:.01em; padding:12px 20px;border-radius:14px;cursor:pointer;background:var(--card-2,rgba(0,0,0,.03)); border:0;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.1)} .lesson[data-course="arabic"] .wf-root{font-family:"Noto Naskh Arabic",serif;font-size:22px;letter-spacing:.02em} .wf-root:active{transform:scale(.97)} .wf-root.ok{background:rgba(24,192,138,.16);box-shadow:inset 0 0 0 2px #18c08a;color:#0e9a6c} .wf-root.miss{background:rgba(240,90,90,.14);box-shadow:inset 0 0 0 2px #e05a5a;color:#c23b3b} .wf-root:disabled{cursor:default} .wf-probe{margin-top:20px;animation:rise .3s} .wf-probe-w{display:block;margin:8px auto 0;font-family:"Sora";font-size:26px;font-weight:700; color:var(--ink);background:none;border:0;cursor:pointer;padding:4px 10px;border-radius:10px} .lesson[data-course="arabic"] .wf-probe-w{font-family:"Noto Naskh Arabic",serif;font-size:30px} .wf-probe-w:active{background:rgba(31,143,255,.14)} /* Faza 4.2 — immersion / sentence mining. Entry button on the Word Bank head. */ .wb-immerse{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:12px 14px;border-radius:14px;cursor:pointer; text-align:left;background:linear-gradient(150deg,rgba(226,240,255,.9),rgba(240,248,255,.7)); border:1px solid var(--glass-border);box-shadow:var(--shadow-soft)} .wb-immerse:active{transform:scale(.99)} .wb-immerse-ic{font-size:22px;flex:none} .wb-immerse b{display:block;font-family:"Sora";font-size:14.5px;font-weight:700;color:var(--ink)} .wb-immerse em{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:1px} .wb-immerse-go{margin-left:auto;font-size:18px;color:var(--accent-deep);flex:none} [dir="rtl"] .wb-immerse-go{margin-left:0;margin-right:auto;transform:scaleX(-1)} /* The screen itself. */ .im-wrap{padding:0 16px 40px} .im-input textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:110px;padding:13px 15px;border-radius:16px; font:inherit;font-size:16px;line-height:1.5;color:var(--ink);background:var(--card,#fff); border:1px solid var(--glass-border);box-shadow:var(--shadow-soft)} .im-input textarea:focus{outline:none;box-shadow:inset 0 0 0 2px rgba(31,143,255,.4)} .im-input .btn{margin-top:11px} .im-legend{margin-top:16px;font-size:13.5px;color:var(--ink-2)} .im-legend-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px} .im-lk{font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.04)} .im-lk.ws-known{color:#0e9a6c;box-shadow:inset 0 0 0 1.5px rgba(24,192,138,.5)} .im-lk.ws-learning{color:#b57900;box-shadow:inset 0 0 0 1.5px rgba(240,165,0,.5)} .im-lk.ws-new{color:#2b7cd6;box-shadow:inset 0 0 0 1.5px rgba(43,124,214,.45)} .im-lk.im-out{color:var(--ink-3);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12)} /* The reading pane preserves the learner's own spacing and line breaks. */ .im-text{margin-top:18px;padding:16px 18px;border-radius:16px;white-space:pre-wrap;line-height:2; font-size:19px;color:var(--ink);background:var(--card,#fff);border:1px solid var(--glass-border);box-shadow:var(--shadow-soft)} .im-text[dir="rtl"]{font-family:"Noto Naskh Arabic",serif;font-size:23px;line-height:2.1} .im-w{font:inherit;color:inherit;background:none;border:0;padding:1px 3px;margin:0 1px;border-radius:5px;cursor:pointer} .im-w:active{transform:scale(.96)} .im-w.ws-known{background:rgba(24,192,138,.14);box-shadow:inset 0 -2px 0 rgba(24,192,138,.55)} .im-w.ws-learning{background:rgba(240,165,0,.16);box-shadow:inset 0 -2px 0 rgba(240,165,0,.6)} .im-w.ws-new{background:rgba(43,124,214,.12);box-shadow:inset 0 -2px 0 rgba(43,124,214,.5)} .im-w.im-out{color:var(--ink-3);cursor:default} .im-w.on{box-shadow:inset 0 0 0 1.5px rgba(31,143,255,.6)} .im-look{margin-top:16px;padding:14px 16px;border-radius:16px; background:linear-gradient(150deg,rgba(226,240,255,.95),rgba(240,248,255,.8)); border:1px solid var(--glass-border);box-shadow:var(--shadow-soft);animation:rise .25s} .im-look-w{font-family:"Sora";font-size:21px;font-weight:700;color:var(--ink)} .im-look-w[dir="rtl"]{font-family:"Noto Naskh Arabic",serif;font-size:26px} .im-look-p{margin-top:2px;font-size:13.5px;font-weight:600;color:var(--ink-2);opacity:.75;line-height:1.4} .im-look-m{margin-top:3px;font-size:14px;color:var(--ink-2);line-height:1.4} .im-look-a{display:flex;align-items:center;gap:9px;margin-top:11px} .im-look-a .im-add{padding:9px 14px;font-size:13.5px} .im-look-a .im-add:disabled{opacity:.55;cursor:default} /* Faza 5.1 — weekly Real Task card (Learn side column). Not a lesson, not a score: a real-world act, and a badge for doing it. */ .realtask{position:relative;padding:16px 17px;border-radius:18px;margin-top:14px;overflow:hidden} .realtask .rt-top{display:flex;align-items:center;gap:8px} .realtask .rt-ic{font-size:16px} .realtask .rt-kicker{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep)} .realtask .rt-badge{margin-left:auto;font-size:19px;filter:grayscale(1);opacity:.5;transition:all .5s cubic-bezier(.2,.9,.3,1.2)} .realtask .rt-badge.on{filter:none;opacity:1;transform:scale(1.12)} .realtask .rt-title{margin-top:11px;font-family:"Sora";font-size:16px;font-weight:800;line-height:1.35;color:var(--ink)} .realtask .rt-how{margin-top:7px;font-size:12.5px;color:var(--ink-3);font-weight:600} .realtask .rt-btn{margin-top:14px} .realtask .rt-btn.done{background:linear-gradient(150deg,#34d9a0,#0e9a6c);opacity:1} .realtask .rt-note{margin-top:10px;text-align:center;font-size:11px;color:var(--ink-faint);font-weight:600} .realtask.done{box-shadow:inset 0 0 0 1.5px rgba(24,192,138,.5)} /* Step 2 — Capability card on the reward completion screen. The reward row above it reports what the lesson paid out; this reports what the learner can now actually DO. Left-aligned text under a small check, so it reads as a statement rather than another score tile. */ .complete .cap-card{display:flex;align-items:flex-start;gap:11px;text-align:left; max-width:360px;margin:20px auto 2px;padding:15px 17px;border-radius:16px} .complete .cap-card .cap-ic{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center; background:linear-gradient(145deg,#34d9a0,#0e9a6c);margin-top:1px} .complete .cap-card .cap-tx{font-size:15.5px;line-height:1.5;color:var(--ink);font-weight:700} .complete .cap-card .cap-kicker{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--accent-deep);margin-bottom:3px} .reward-row{display:flex;gap:11px;justify-content:center;margin:22px 0 4px} /* Faza 5 (og'riq #1): once a capability leads the screen, the reward becomes a receipt — smaller tiles, muted, less air above it. It is proof the lesson paid out, not the reason the lesson mattered. */ .reward-row.secondary{margin:14px 0 2px;gap:8px;opacity:.85;transform:scale(.9)} .reward-row.secondary .reward{padding:10px 10px;min-width:74px} .reward-row.secondary .reward .rv{font-size:18px} .reward{padding:15px 12px;min-width:88px;text-align:center} .reward .rv{font-family:"Sora";font-weight:800;font-size:22px} .reward .rl{font-size:11px;color:var(--ink-3);font-weight:600;margin-top:3px;letter-spacing:.02em} .reward .rv.gold{color:#f5a623} .reward .rv.cyan{color:var(--accent-deep)} .reward .rv.green{color:#0e9a6c} .toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);z-index:215; padding:13px 18px;border-radius:16px;max-width:300px;text-align:center;font-size:13px;font-weight:600;color:var(--ink); background:var(--glass-fill-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border);box-shadow:var(--shadow-float);opacity:0;pointer-events:none;transition:.35s} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .toast b{color:var(--accent-deep)} .conf{position:absolute;width:9px;height:9px;border-radius:2px;top:-14px;z-index:205;animation:fall linear forwards} @keyframes fall{to{transform:translateY(110vh) rotate(560deg);opacity:0}} .unit-badge .lv.done{color:#0e9a6c} /* Redeem-code success celebration (floating hearts/flowers + light sparkle burst). transform/opacity-only keyframe so it runs on the compositor — smooth regardless of element count — and pointer-events:none so it can never block interaction with the page underneath it. */ .redeem-celebrate-piece{position:fixed;bottom:-5vh;z-index:399;pointer-events:none;will-change:transform,opacity;animation-name:redeemFloatUp;animation-timing-function:ease-out;animation-fill-mode:forwards} .redeem-celebrate-emoji{font-size:22px;line-height:1} .redeem-celebrate-spark{width:8px;height:8px;border-radius:50%} @keyframes redeemFloatUp{ 0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:0} 12%{opacity:1} 100%{transform:translateY(-115vh) translateX(var(--drift,20px)) rotate(180deg);opacity:0} } /* ── profile editor inputs ───────────────────────────── */ .edit-input{display:block;width:100%;background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.85);border-radius:14px;padding:13px 15px;font-family:"Outfit";font-size:15px;color:var(--ink);outline:none;margin-bottom:12px;-webkit-appearance:none} .edit-input:focus{border-color:rgba(40,160,255,.5);box-shadow:0 0 0 3px rgba(40,160,255,.14)} /* ROOT CAUSE FIX (BUG 1): this preview swatch is never wrapped in .av-frame-wrap (it has no frame support at all — it's just the small "your current photo" thumbnail in Edit Profile), yet it carried its own permanent box-shadow plus a leftover hardcoded teal/blue gradient from before the avatar-colour system was removed. That shadow is exactly the "gray ring" visible with no frame equipped. Neutral flat fill now matches DEFAULT_AV_BG (overridden inline by _refreshEditAvPreview when there's no photo); zero shadow, matching every other frameless avatar. */ .edit-av-preview{width:56px;height:56px;border-radius:18px;flex:none;display:grid;place-items:center;color:#fff; font-family:"Sora";font-weight:800;font-size:22px;overflow:hidden;position:relative; background:var(--ink-3)} .edit-av-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit} /* ── speak button ────────────────────────────────────── */ .speak-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:12px;border:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--accent-deep);background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 1px #fff;transition:.15s;font-family:"Outfit"} .speak-btn:active{transform:scale(.95);background:rgba(255,255,255,.85)} .speak-btn.lg{padding:14px 22px;font-size:15px;border-radius:16px} /* ── listen qbig ─────────────────────────────────────── */ .qbig.listen{font-size:unset;direction:unset;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0 6px} /* ── writing canvas ──────────────────────────────────── */ .write-container{position:relative;border-radius:22px;overflow:hidden;margin:0 auto 12px;max-width:460px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.8)} /* Step 4 (O4): the guide is a canvas painted in the same 600×600 space as the drawing surface, so what the learner traces is exactly what the scorer compares against. Sizing is handled in canvas coordinates (see _paintWriteGuide), which is why the old responsive font-size rules for this element are gone. */ .write-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;z-index:0} .write-verdict{text-align:center;font-size:12.5px;font-weight:600;min-height:18px;margin-top:8px} .write-verdict.ok{color:#0f9d58} .write-verdict.bad{color:#d9534f} #writeCanvas{display:block;width:100%;aspect-ratio:1;touch-action:none;cursor:crosshair;position:relative;z-index:1;background:transparent} /* ── unit progress bars ──────────────────────────────── */ .unit-prog{padding:14px 18px;margin-bottom:10px} .unit-prog .up-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .unit-prog .up-n{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--accent-deep);text-transform:uppercase} .unit-prog h4{font-family:"Sora";font-size:14px;font-weight:700;margin-top:2px;letter-spacing:-.01em} .unit-prog .up-pct{font-family:"Sora";font-weight:700;font-size:13px;color:var(--ink-3)} .unit-prog .bar{height:10px;border-radius:6px;background:rgba(120,170,230,.22);overflow:hidden} .unit-prog .bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#3fd0ff,#1f8fff);box-shadow:0 0 10px rgba(40,170,255,.5);transition:width .9s cubic-bezier(.2,.8,.2,1)} /* ============================================================ RESPONSIVE LAYOUTS (frameless) ============================================================ */ /* pointer-device hover affordances — transform/opacity only */ @media (hover:hover) and (pointer:fine){ .coursebar,.word,.stat,.pill{transition:transform .2s cubic-bezier(.2,.8,.2,1)} .node .core{transition:transform .2s cubic-bezier(.2,.8,.2,1)} .tile:hover,.coursebar:hover,.word:hover,.stat:hover,.pill:hover,.opt:hover{transform:translateY(-2px)} .btn:hover{transform:translateY(-1px)} .node:not(.locked):hover .core{transform:scale(1.05)} } /* ---------- Tablet: 768px – 1200px (responsive scaling, single column) ---------- */ @media (min-width:768px){ :root{--safe:32px} .screen{max-width:760px;padding-top:28px} .tabbar{max-width:560px} .grid2{gap:16px} .hero-quiz h2{max-width:none} .hero-quiz p{max-width:420px} .qbig.lg{font-size:106px} .qbig.md{font-size:70px} .glyph-card .glyph{font-size:108px} .write-container{max-width:500px} } /* ---------- Desktop: >1200px (true desktop layout) ---------- */ @media (min-width:1201px){ .app{left:108px} /* room for the vertical nav rail */ .screen{max-width:1320px;padding:36px 44px 64px} /* side panels (goal ring, stats, continue card…) sit beside the main lesson content */ .lay{display:grid;grid-template-columns:400px minmax(0,1fr);gap:32px;align-items:start} .lay.main-first{grid-template-columns:minmax(0,1fr) 400px} .lay-side{display:block;position:sticky;top:32px} .lay-main{display:block;min-width:0} .topbar{margin:0 0 26px} .hi b{font-size:27px} .node-row{margin:20px 0} .ach-grid{flex-wrap:wrap;overflow:visible} /* nav becomes a vertical liquid-glass rail */ .tabbar{left:20px;right:auto;top:50%;bottom:auto;transform:translateY(-50%); width:78px;height:auto;max-width:none;margin:0; flex-direction:column;justify-content:center;gap:4px;padding:14px 0;border-radius:28px} .tab{flex:0 0 auto;width:100%;height:66px} .tab-ind{height:58px;width:58px;border-radius:19px} /* Lesson player on desktop. The scale here used to be set purely by "there is room for it" — a 124px hero and 21px-tall option buttons — which read as shouting rather than as a lesson, especially once a hero held a whole sentence. Moderated: still comfortably larger than mobile, no longer filling the screen. Long heroes additionally drop a tier (bigSizeClass). */ .qprompt{font-size:21px} .qbig.lg{font-size:100px} .qbig.md{font-size:66px} .qbig.sm{font-size:32px} .qhint{font-size:14px} .glyph-card{padding:38px 28px} .glyph-card .glyph{font-size:128px} .glyph-card .gname{font-size:26px} .opt{padding:16px 18px;font-size:16px} .opt .oa{font-size:44px} .ex-card .exw{font-size:36px} .note{font-size:15px} .write-container{max-width:540px} .complete .seal{width:134px;height:134px} .toast{bottom:48px} } @media (min-width:1500px){ .screen{max-width:1440px} .lay{grid-template-columns:430px minmax(0,1fr)} .lay.main-first{grid-template-columns:minmax(0,1fr) 430px} } /* respect user motion preferences */ @media (prefers-reduced-motion:reduce){ .bg-atmo span,.league-badge,.complete .seal,.flame svg{animation:none} .node.active::before{animation:none;opacity:.5;transform:scale(1.05)} .reveal{opacity:1;transform:none} .screen.active .reveal{animation:none} .lesson{transition:none} } /* ============================================================ PHASE 2A — Profile picture upload, bio, public profiles, leaderboard, user profile modal ============================================================ */ /* ── avatar upload ─────────────────────────────────────────── */ .big-av{cursor:pointer} .big-av img{width:100%;height:100%;object-fit:cover;border-radius:inherit} .big-av .upload-ring{position:absolute;inset:-4px;border-radius:34px;border:2.5px dashed rgba(40,160,255,.4);pointer-events:none;opacity:0;transition:opacity .2s} .big-av:hover .upload-ring{opacity:1} .upload-loading{position:absolute;inset:0;border-radius:inherit;background:rgba(0,0,0,.35);display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;font-family:"Outfit"} #avatarUploadInput{display:none} /* ── bio field ─────────────────────────────────────────────── */ textarea.edit-input{resize:vertical;min-height:70px;line-height:1.5} .char-count{font-size:11px;color:var(--ink-faint);text-align:right;margin:-8px 2px 12px} /* ── username availability inline ─────────────────────────── */ .username-status{font-size:11.5px;min-height:14px;margin:-6px 2px 10px;padding:0 2px;transition:color .2s} .username-status.ok{color:#0e9a6c} .username-status.err{color:#e23a59} .username-status.checking{color:var(--ink-3)} /* ── toggle row (public profile switch) ────────────────────── */ .toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0 16px;border-top:1px solid rgba(120,170,230,.15);margin-top:2px} .toggle-row .tl{font-size:13.5px;font-weight:600;color:var(--ink-2)} .toggle-row .ts{font-size:11px;color:var(--ink-3);margin-top:2px} .toggle{position:relative;width:44px;height:26px;flex:none} .toggle input{opacity:0;width:0;height:0;position:absolute} .toggle-track{position:absolute;inset:0;border-radius:13px;background:rgba(120,170,230,.3);transition:.25s;cursor:pointer} .toggle input:checked + .toggle-track{background:linear-gradient(90deg,#3fd0ff,#1f8fff)} .toggle-track::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:.25s} .toggle input:checked + .toggle-track::before{transform:translateX(18px)} /* ── global leaderboard ────────────────────────────────────── */ .lb-top-msg{text-align:center;padding:14px 20px 6px;font-size:13px;color:var(--ink-3);font-weight:500;line-height:1.5} .lb-top-msg b{color:var(--accent-deep);font-family:"Sora"} .lb-loading{text-align:center;padding:32px;color:var(--ink-faint);font-size:13px} .lb-row{cursor:pointer;transition:transform .18s cubic-bezier(.2,.8,.2,1)} .lb-row:active{transform:scale(.98)} @media (hover:hover) and (pointer:fine){.lb-row:hover{transform:translateY(-1px)}} .lb-av img{width:100%;height:100%;object-fit:cover;border-radius:inherit} /* ── public profile modal ──────────────────────────────────── */ /* ── Course catalog overlay (Part 6) ─────────────────────────── */ .catalog-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center; background:rgba(20,50,100,.28);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); opacity:0;pointer-events:none;transition:opacity .3s} .catalog-overlay.open{opacity:1;pointer-events:auto} .catalog-sheet{position:relative;width:100%;max-width:560px;max-height:90vh;max-height:90dvh;overflow-y:auto; background:linear-gradient(160deg,var(--ice-bg-1),var(--ice-bg-3)); border-radius:28px 28px 0 0;padding:8px 20px calc(32px + env(safe-area-inset-bottom)); transform:translateY(40px);transition:transform .35s cubic-bezier(.2,.8,.2,1);scrollbar-width:none} .catalog-sheet::-webkit-scrollbar{display:none} .catalog-overlay.open .catalog-sheet{transform:translateY(0)} .catalog-handle{width:36px;height:4px;background:rgba(120,170,230,.4);border-radius:2px;margin:12px auto 16px} .catalog-title{font-family:"Sora";font-size:18px;font-weight:800;text-align:center;margin-bottom:16px} .catalog-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-bottom:8px} .course-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px; border-radius:20px;cursor:pointer;position:relative;transition:transform .18s,box-shadow .18s; background:var(--glass-fill);border:1.5px solid var(--glass-border); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)} .course-tile:active{transform:scale(.96)} .course-tile.active-course{border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,143,255,.22)} .course-tile.coming-soon{opacity:.52;cursor:default} .course-tile .ct-flag{font-size:32px;line-height:1} .course-tile .ct-name{font-family:"Sora";font-size:13px;font-weight:700;letter-spacing:-.01em} .course-tile .ct-native{font-size:11px;color:var(--ink-3);font-weight:500} .course-tile .ct-badge{position:absolute;top:8px;right:8px;font-size:9px;font-weight:700; background:rgba(120,170,230,.22);border-radius:6px;padding:2px 6px;color:var(--ink-3);letter-spacing:.04em} .course-tile.active-course .ct-badge{background:var(--accent);color:#fff} /* ── Level selection modal (Part 7) ──────────────────────────── */ .level-overlay{position:fixed;inset:0;z-index:310;display:flex;align-items:flex-end;justify-content:center; background:rgba(20,50,100,.32);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); opacity:0;pointer-events:none;transition:opacity .25s} .level-overlay.open{opacity:1;pointer-events:auto} .level-sheet{position:relative;width:100%;max-width:560px;max-height:90vh;max-height:90dvh;overflow-y:auto; background:linear-gradient(160deg,var(--ice-bg-1),var(--ice-bg-3)); border-radius:28px 28px 0 0;padding:8px 20px calc(28px + env(safe-area-inset-bottom)); transform:translateY(40px);transition:transform .35s cubic-bezier(.2,.8,.2,1);scrollbar-width:none} .level-sheet::-webkit-scrollbar{display:none} .level-overlay.open .level-sheet{transform:translateY(0)} .level-handle{width:36px;height:4px;background:rgba(120,170,230,.4);border-radius:2px;margin:12px auto 16px} .level-title{font-family:"Sora";font-size:17px;font-weight:800;text-align:center;margin-bottom:4px;position:relative} .links-back{position:absolute;left:0;top:50%;transform:translateY(-50%);background:none;border:none; color:var(--ink-3);cursor:pointer;padding:4px;display:grid;place-items:center} .level-sub{font-size:12.5px;color:var(--ink-3);text-align:center;margin-bottom:16px} /* F3.5: CEFR / By profession segmented control above the level list. */ .level-tabs{display:flex;gap:6px;padding:4px;margin-bottom:14px;border-radius:14px; background:var(--glass-fill);border:1.5px solid var(--glass-border)} .level-tab{flex:1;padding:9px 10px;border:none;border-radius:10px;background:none;cursor:pointer; font-family:"Sora",system-ui,sans-serif;font-size:12.5px;font-weight:700;color:var(--ink-3); transition:background .15s,color .15s} .level-tab.selected{background:var(--accent);color:#fff} .level-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px} .level-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:16px;cursor:pointer; background:var(--glass-fill);border:1.5px solid var(--glass-border); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:border-color .15s} .level-row:active{transform:scale(.98)} .level-row.selected{border-color:var(--accent);background:rgba(31,143,255,.08)} .level-row.locked{opacity:.45;cursor:default} .level-badge{width:40px;height:40px;border-radius:12px;display:grid;place-items:center; font-family:"Sora";font-size:12px;font-weight:800;flex:none;color:#fff} .level-info{flex:1;min-width:0} .level-info b{font-family:"Sora";font-size:14px;font-weight:700;display:block} .level-info span{font-size:11.5px;color:var(--ink-3);display:block} /* Step 4: the honest CEFR vocabulary line under a level, plus the small "growing"/"Soon" chips beside its name. */ .level-info .level-cov{font-size:10.5px;color:var(--ink-3);opacity:.75;margin-top:2px} .level-tag,.level-soon{font-family:"Inter",system-ui,sans-serif;font-style:normal;font-size:9.5px; font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 6px;border-radius:6px; margin-left:6px;vertical-align:middle} .level-tag{color:var(--accent-deep);background:rgba(31,143,255,.12)} .level-soon{color:var(--ink-3);background:rgba(120,140,170,.16)} .level-check{width:20px;height:20px;border-radius:50%;border:2px solid rgba(120,170,230,.4);flex:none} .level-row.selected .level-check{background:var(--accent);border-color:var(--accent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-size:12px;background-repeat:no-repeat;background-position:center} .placement-link{text-align:center;font-size:13px;color:var(--accent);font-weight:600; padding:12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .pprofile-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center; background:rgba(20,50,100,.28);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); opacity:0;pointer-events:none;transition:opacity .3s} .pprofile-overlay.open{opacity:1;pointer-events:auto} .pprofile-sheet{position:relative;width:100%;max-width:560px;max-height:88vh;max-height:88dvh;overflow-y:auto; background:linear-gradient(160deg,var(--ice-bg-1),var(--ice-bg-3)); border-radius:28px 28px 0 0;padding:8px 20px calc(32px + env(safe-area-inset-bottom)); transform:translateY(40px);transition:transform .35s cubic-bezier(.2,.8,.2,1); scrollbar-width:none} .pprofile-sheet::-webkit-scrollbar{display:none} .pprofile-overlay.open .pprofile-sheet{transform:translateY(0)} .pprofile-handle{width:36px;height:4px;background:rgba(120,170,230,.4);border-radius:2px;margin:12px auto 20px} .pprofile-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 0 20px} .pprofile-av{width:84px;height:84px;border-radius:26px;display:grid;place-items:center;color:#fff;font-family:"Sora";font-weight:800;font-size:32px; box-shadow:0 14px 28px -8px rgba(40,120,220,.6),inset 0 1.5px 2px rgba(255,255,255,.8)} .pprofile-av img{width:100%;height:100%;object-fit:cover;border-radius:inherit} .pprofile-head h3{font-family:"Sora";font-size:21px;font-weight:800;margin-top:12px;letter-spacing:-.02em} .pprofile-head .ph{font-size:13px;color:var(--ink-3);margin-top:3px} .pprofile-head .pjoin{font-size:12px;color:var(--ink-faint);margin-top:7px;display:inline-flex;align-items:center;gap:5px} .pprofile-bio{font-size:13.5px;line-height:1.6;color:var(--ink-2);text-align:center;padding:0 10px 16px;max-width:340px;margin:0 auto} .pprofile-stats{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:4px} .pprofile-stat{padding:15px 16px;display:flex;align-items:center;gap:11px;border-radius:18px} .pprofile-stat .si{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none} .pprofile-stat .sv{font-family:"Sora";font-weight:800;font-size:17px;line-height:1;color:var(--ink)} .pprofile-stat .sl{font-size:10.5px;color:var(--ink-3);font-weight:500;margin-top:2px} .pprofile-close{position:absolute;top:14px;right:16px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.85);cursor:pointer;color:var(--ink-3)} .pprofile-title-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--accent-deep); background:rgba(40,160,255,.1);border:1px solid rgba(40,160,255,.25);border-radius:20px;padding:3px 10px;margin-top:6px} .pprofile-course{font-size:12px;color:var(--ink-3);margin-top:6px} .pprofile-achievements{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--glass-border)} .pprofile-ach-icon{font-size:22px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))} /* ── avatar crop modal ─────────────────────────────────────── */ .crop-overlay{position:fixed;inset:0;z-index:500;display:flex;align-items:flex-end;justify-content:center; background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(8px)} .crop-overlay.open{opacity:1;pointer-events:auto} .crop-sheet{width:100%;max-width:420px;background:var(--card-bg,#1a2230);border-radius:28px 28px 0 0; padding:0 24px 36px;transform:translateY(60px);transition:transform .3s cubic-bezier(.2,.8,.2,1)} .crop-overlay.open .crop-sheet{transform:translateY(0)} .crop-handle{width:36px;height:4px;background:rgba(120,170,230,.35);border-radius:2px;margin:12px auto 18px} .crop-canvas-wrap{position:relative;width:280px;height:280px;margin:0 auto;border-radius:16px;overflow:hidden; background:#0d1520;cursor:grab;touch-action:none} .crop-canvas-wrap:active{cursor:grabbing} #cropCanvas{display:block;width:280px;height:280px} /* ROOT CAUSE FIX (crop tool showed a circular guide but avatars are rounded-square containers, not circles): was a radial-gradient with a circular transparent hole. Now a rounded-square hole — via a big box-shadow spread clipped by the wrap's own overflow:hidden — sized and positioned to exactly match what confirmCropUpload() actually exports (inset 10px = _CROP_OFFSET, i.e. the tight _CROP_OUT_SIZE square), so the guide the user pans/zooms against matches the real output shape. */ .crop-square-mask{position:absolute;inset:10px;pointer-events:none;border-radius:44px; box-shadow:0 0 0 9999px rgba(0,0,0,.6)} .crop-hint{font-size:11.5px;color:var(--ink-3,#7090a8);text-align:center;margin:8px 0 16px} .crop-actions{display:flex;gap:8px} .crop-actions .btn,.crop-actions button{flex:1;justify-content:center;padding:13px;font-size:14px} /* ============================================================ PHASE 2B — Quests · Login Reward · Hearts · Shop · Achievements ============================================================ */ /* ── daily quests ──────────────────────────────────────────── */ .quest-card{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:10px;cursor:default} .quest-icon{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:22px; background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(220,238,255,.6)); border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 1px #fff} .quest-icon.done{background:linear-gradient(145deg,#34d9a0,#0e9a6c);box-shadow:0 6px 14px -4px rgba(14,154,108,.55)} .quest-body{flex:1;min-width:0} .quest-body h4{font-size:14px;font-weight:700;font-family:"Sora";letter-spacing:-.01em} .quest-body .qb{font-size:11.5px;color:var(--ink-3);margin-top:2px;font-weight:500} .quest-prog{height:6px;border-radius:4px;background:rgba(120,170,230,.22);margin-top:7px;overflow:hidden} .quest-prog i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#3fd0ff,#1f8fff); box-shadow:0 0 6px rgba(40,170,255,.5);transition:width .6s cubic-bezier(.2,.8,.2,1)} .quest-xp{font-family:"Sora";font-weight:800;font-size:13px;color:var(--accent-deep);flex:none; background:rgba(255,255,255,.55);padding:5px 9px;border-radius:9px;border:1px solid rgba(255,255,255,.8)} .quest-xp.done{color:#0e9a6c;background:rgba(214,255,240,.5);border-color:rgba(14,154,108,.2)} .quest-card.completed .quest-icon{background:linear-gradient(145deg,#34d9a0,#0e9a6c)} .quest-card.completed .quest-body h4{color:var(--ink-3);text-decoration:line-through} /* ── login reward calendar ─────────────────────────────────── */ .reward-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:16px 14px 14px} .cal-day{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;border-radius:14px; background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.7);transition:.2s;cursor:default} .cal-day .cd-n{font-size:10px;font-weight:700;color:var(--ink-3);letter-spacing:.03em} .cal-day .cd-icon{font-size:20px;line-height:1} .cal-day .cd-v{font-size:10px;font-weight:700;color:var(--accent-deep);margin-top:1px} .cal-day.past{background:linear-gradient(145deg,rgba(60,200,255,.15),rgba(40,140,255,.08));border-color:rgba(40,160,255,.3)} .cal-day.past .cd-n{color:var(--accent-deep)} .cal-day.today{background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,255,255,.7)); border-color:var(--accent);box-shadow:0 0 0 2px rgba(40,160,255,.25),var(--shadow-soft)} .cal-day.today .cd-n{color:var(--accent-deep)} .cal-day.future{opacity:.55} .cal-day.claimed{background:linear-gradient(145deg,#34d9a0,#0e9a6c);border-color:transparent} .cal-day.claimed .cd-n,.cal-day.claimed .cd-v{color:#fff} .cal-claim{display:flex;justify-content:center;padding:0 14px 16px} .cal-claim .btn{padding:13px 28px;font-size:15px} /* ── Progress tab expandable cards (Part 4) ─────────────────── */ .prog-card{margin-bottom:12px;overflow:hidden;padding:0} .prog-card-hd{width:100%;display:flex;align-items:center;justify-content:space-between;padding:15px 18px;background:none;border:none;cursor:pointer;font-family:"Sora";font-size:15px;font-weight:700;color:var(--ink-1);text-align:left;gap:8px} .prog-card-hd:hover{background:rgba(255,255,255,.06)} .prog-card-chevron{transition:transform .25s ease;flex:none} .prog-card.collapsed .prog-card-chevron{transform:rotate(-90deg)} .prog-card-body{transition:max-height .3s ease,opacity .3s ease;max-height:600px;opacity:1;overflow:hidden} .prog-card.collapsed .prog-card-body{max-height:0;opacity:0} /* ── hearts system ─────────────────────────────────────────── */ .heart-row{display:flex;align-items:center;gap:6px} .heart-pip{font-size:18px;transition:transform .2s cubic-bezier(.2,.8,.2,1)} .heart-pip.lost{filter:grayscale(1);opacity:.35;transform:scale(.85)} @keyframes heartLose{0%{transform:scale(1.3)}50%{transform:scale(.7)}100%{transform:scale(.85)}} .heart-pip.losing{animation:heartLose .35s ease-out forwards} .heart-timer{font-size:11px;color:var(--ink-3);font-weight:600;margin-left:4px} /* ── shield indicator ──────────────────────────────────────── */ .streak-shield{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700; color:#0e9a6c;background:rgba(214,255,240,.6);padding:5px 10px;border-radius:10px; border:1px solid rgba(14,154,108,.2);margin-top:8px} /* ── achievement grid (expanded) ──────────────────────────── */ .ach-grid-full{display:grid;grid-template-columns:repeat(3,1fr);gap:11px} @media (min-width:480px){.ach-grid-full{grid-template-columns:repeat(4,1fr)}} @media (min-width:768px){.ach-grid-full{grid-template-columns:repeat(5,1fr)}} .ach-full{text-align:center;padding:4px 2px} .ach-full .badge{width:64px;height:64px;border-radius:20px;margin:0 auto 7px;display:grid;place-items:center;font-size:26px; border:1px solid rgba(255,255,255,.8);transition:transform .2s cubic-bezier(.2,.8,.2,1)} .ach-full.earned .badge{background:linear-gradient(150deg,#9be7ff,#2f9bff);color:#fff; box-shadow:0 10px 22px -6px rgba(20,130,230,.65),inset 0 2px 3px rgba(255,255,255,.7),0 0 16px rgba(60,200,255,.4)} .ach-full.locked .badge{background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(220,235,252,.4)); filter:grayscale(.45);opacity:.65} .ach-full .an{font-size:10.5px;font-weight:600;color:var(--ink-2);line-height:1.3} .ach-full .at{font-size:9.5px;color:var(--ink-faint);font-weight:500;margin-top:1px} .ach-count{font-size:13px;font-weight:700;color:var(--accent-deep)} /* ── Achievements: profile summary row + dedicated screen (Task 4) ── */ .ach-summary{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer} .ach-summary-ic{width:48px;height:48px;border-radius:15px;flex:none;display:grid;place-items:center;font-size:24px; background:linear-gradient(150deg,#9be7ff,#2f9bff); box-shadow:0 10px 22px -8px rgba(20,130,230,.6),inset 0 2px 3px rgba(255,255,255,.7)} .ach-summary-body{flex:1;min-width:0} .ach-summary-body h4{font-family:"Sora";font-size:16px;font-weight:700;letter-spacing:-.01em} .ach-summary-sub{font-size:12.5px;color:var(--ink-3);margin:2px 0 8px;font-weight:500} .ach-summary-sub span{color:var(--accent-deep);font-weight:700} .ach-summary-bar{height:8px;border-radius:6px;background:rgba(120,170,230,.22);overflow:hidden} .ach-summary-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#3fd0ff,#1f8fff); box-shadow:0 0 8px rgba(40,170,255,.5);transition:width .8s cubic-bezier(.2,.8,.2,1)} .ach-summary-arrow{flex:none;color:var(--ink-faint)} @media (hover:hover) and (pointer:fine){.ach-summary:hover{transform:translateY(-2px);transition:transform .2s cubic-bezier(.2,.8,.2,1)}} .ach-summary:active{transform:scale(.98)} .ach-back{width:38px;height:38px;border-radius:13px;flex:none;display:grid;place-items:center;cursor:pointer;color:var(--ink-2); background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 1px #fff} .ach-back:active{transform:scale(.92)} .ach-overview{display:flex;align-items:center;gap:18px;padding:20px;margin-bottom:18px} .ach-ov-ring{position:relative;width:96px;height:96px;flex:none} .ach-ov-ring #achOvRing{transition:stroke-dashoffset 1.2s cubic-bezier(.22,.85,.25,1);filter:drop-shadow(0 0 6px rgba(40,170,255,.6))} .ach-ov-pct{position:absolute;inset:0;display:grid;place-content:center;font-family:"Sora";font-weight:800;font-size:22px;color:var(--ink)} .ach-ov-info{flex:1;min-width:0} .ach-ov-info h3{font-family:"Sora";font-size:18px;font-weight:800;letter-spacing:-.02em} .ach-ov-info p{font-size:12.5px;color:var(--ink-3);margin-top:4px;line-height:1.45} .ach-ov-reward{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px;color:var(--accent-deep); background:rgba(255,255,255,.55);padding:6px 11px;border-radius:11px;border:1px solid rgba(255,255,255,.8)} .ach-cat-h{display:flex;align-items:center;gap:10px;margin:22px 2px 12px} .ach-cat-h h3{font-family:"Sora";font-size:15px;font-weight:700;letter-spacing:-.01em} .ach-cat-h .ach-cat-count{margin-left:auto;font-size:12px;font-weight:700;color:var(--ink-3)} .ach-cat-h .ach-cat-line{height:1px;flex:1;max-width:40px;background:linear-gradient(90deg,var(--accent-soft),transparent)} .ach-row{display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:9px;content-visibility:auto;contain-intrinsic-size:auto 66px} .ach-row .ach-row-badge{width:50px;height:50px;border-radius:16px;flex:none;display:grid;place-items:center;font-size:24px; border:1px solid rgba(255,255,255,.8)} .ach-row.earned .ach-row-badge{background:linear-gradient(150deg,#9be7ff,#2f9bff);color:#fff; box-shadow:0 10px 22px -8px rgba(20,130,230,.6),inset 0 2px 3px rgba(255,255,255,.7),0 0 14px rgba(60,200,255,.4)} .ach-row.locked .ach-row-badge{background:linear-gradient(150deg,rgba(255,255,255,.6),rgba(225,238,252,.45)); filter:grayscale(.4);opacity:.7} .ach-row-body{flex:1;min-width:0} .ach-row-body h4{font-family:"Sora";font-size:14.5px;font-weight:700;letter-spacing:-.01em} .ach-row-body p{font-size:12px;color:var(--ink-3);margin-top:2px;font-weight:500} .ach-row-status{flex:none;font-size:11.5px;font-weight:800;padding:6px 11px;border-radius:11px} .ach-row.earned .ach-row-status{color:#0e9a6c;background:rgba(214,255,240,.6);border:1px solid rgba(14,154,108,.2)} .ach-row.locked .ach-row-status{color:var(--ink-3);background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.8)} .ach-row-reward{font-size:10.5px;font-weight:700;color:var(--accent-deep);margin-top:3px;display:inline-flex;align-items:center;gap:3px} /* ── shop confirm modal ────────────────────────────────────── */ .shop-modal-overlay{position:fixed;inset:0;z-index:310;display:flex;align-items:center;justify-content:center; padding:24px;background:rgba(20,50,100,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:0;pointer-events:none;transition:opacity .25s} .shop-modal-overlay.open{opacity:1;pointer-events:auto} .shop-modal{background:linear-gradient(150deg,rgba(255,255,255,.94),rgba(255,255,255,.72)); border:1px solid rgba(255,255,255,.9);border-radius:28px;padding:28px 24px 22px; max-width:320px;width:100%;text-align:center; box-shadow:0 28px 56px -18px rgba(16,78,150,.42),inset 0 1.5px 1px rgba(255,255,255,1); transform:scale(.92);transition:transform .25s cubic-bezier(.2,.8,.2,1)} .shop-modal-overlay.open .shop-modal{transform:scale(1)} .shop-modal .sm-icon{font-size:44px;margin-bottom:12px} .shop-modal h3{font-family:"Sora";font-weight:800;font-size:19px;letter-spacing:-.02em;margin-bottom:6px} .shop-modal p{font-size:13px;color:var(--ink-3);line-height:1.5;margin-bottom:20px} .shop-modal .sm-btns{display:flex;gap:10px} .shop-modal .sm-btns .btn{flex:1;justify-content:center;padding:13px;font-size:14px} /* ── reward toast (full-screen pop) ───────────────────────── */ .reward-pop{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:10px;pointer-events:none;opacity:0;transition:opacity .3s} .reward-pop.show{opacity:1} .reward-pop .rp-badge{font-size:64px;animation:rpBounce .5s cubic-bezier(.2,.8,.2,1) both} .reward-pop .rp-title{font-family:"Sora";font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-.02em} .reward-pop .rp-sub{font-size:14px;color:var(--ink-3);font-weight:500} @keyframes rpBounce{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}} /* ============================================================ PHASE 2D — XP Boost · Hearts Upgrade · Avatar Frames ============================================================ */ /* ── XP boost ───────────────────────────────────────────── */ .xp-boost-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800; font-family:"Sora";color:#fff;padding:5px 11px;border-radius:10px; background:linear-gradient(135deg,#ff9f43,#ff6b35); box-shadow:0 4px 12px -3px rgba(255,110,50,.55)} .xp-boost-badge.b50{background:linear-gradient(135deg,#f9ca24,#f0932b); box-shadow:0 4px 12px -3px rgba(249,202,36,.6)} .boost-active-row{display:flex;align-items:center;gap:8px;padding:10px 14px;margin:0 0 12px; border-radius:14px;background:linear-gradient(135deg,rgba(255,159,67,.14),rgba(255,107,53,.08)); border:1px solid rgba(255,140,60,.25)} .boost-active-row .bat{font-size:13px;font-weight:700;color:#c94f00} .boost-active-row .bac{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-left:auto} /* ── hearts upgrade ─────────────────────────────────────── */ .hearts-preview-row{display:flex;align-items:center;gap:4px;padding:4px 0 12px;flex-wrap:wrap} .hearts-preview-row span{font-size:17px;line-height:1} .hearts-preview-row span.empty{filter:grayscale(1);opacity:.3} .upgrade-max-badge{font-size:11.5px;font-weight:700;color:#0e9a6c; background:rgba(214,255,240,.55);padding:4px 10px;border-radius:8px; border:1px solid rgba(14,154,108,.2);white-space:nowrap} /* ── avatar frames ──────────────────────────────────────── */ /* All frame effects live on a wrapper div .av-frame-wrap */ /* The --fr CSS var controls the border-radius offset for each size */ .av-frame-wrap{position:relative;display:inline-grid;place-items:center;flex:none} .av-frame-wrap::after{content:'';position:absolute;inset:-3px;pointer-events:none; border:2.5px solid transparent;border-radius:inherit} .av-frame-wrap.frame-bronze::after{border-color:#cd7f32;border-radius:calc(var(--frame-r,14px) + 3px); box-shadow:0 0 0 1px rgba(205,127,50,.25),0 0 8px rgba(205,127,50,.4)} .av-frame-wrap.frame-silver::after{border-color:#c0c0c0;border-radius:calc(var(--frame-r,14px) + 3px); box-shadow:0 0 0 1px rgba(192,192,192,.3),0 0 10px rgba(192,192,192,.45)} /* ROOT CAUSE FIX (avatar invisible under gold/diamond/fire frames at small sizes): these three frames used to paint their ring via ::after with a two-layer `background: transparent padding-box, gradient border-box` trick, relying on the browser rasterizing a razor-thin transparent "hole" over the padding-box region so the real avatar underneath would show through. That hole is precise sub-pixel geometry — at large sizes (the 96px profile avatar) it rasterizes fine, but at the small sizes used everywhere else (46px nav avatars, leaderboard rows, ~13px --frame-r) the browser collapses it and the border-box gradient paints solid across the whole box, hiding the photo entirely and leaving only the frame colour. Confirmed by live reproduction: identical CSS math, only the pixel size differed. Fix: stop faking a hole. Put the gradient directly on the WRAPPER's own background with real `padding`, so the avatar's own opaque content simply covers everything except the padding ring — no clip-precision edge case possible at any size. Bronze/silver are untouched: they only ever set a solid border-color (no gradient layer trick), so they never had this bug. */ .av-frame-wrap.frame-gold{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px); background:linear-gradient(135deg,#f9ca24,#f0932b,#f9ca24); box-shadow:0 0 0 1px rgba(249,202,36,.25),0 0 12px rgba(249,202,36,.5)} .av-frame-wrap.frame-diamond{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px); background:linear-gradient(135deg,#a8edea,#8ec5fc,#e0c3fc,#a8edea); box-shadow:0 0 0 1px rgba(140,197,252,.25),0 0 14px rgba(140,197,252,.45)} @keyframes fireFlicker{ 0%,100%{background:linear-gradient(135deg,#ff4500,#ff8c00,#ffd700,#ff4500)} 50%{background:linear-gradient(135deg,#ffd700,#ff4500,#ff8c00,#ffd700)}} .av-frame-wrap.frame-fire{padding:2.5px;border-radius:calc(var(--frame-r,14px) + 3px); background:linear-gradient(135deg,#ff4500,#ff8c00,#ffd700,#ff4500); box-shadow:0 0 0 1px rgba(255,69,0,.3),0 0 16px rgba(255,100,0,.55); animation:fireFlicker 1.8s ease-in-out infinite} /* Frame swatch in shop */ .frame-swatch{width:48px;height:48px;border-radius:14px;display:grid;place-items:center; font-size:22px;background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(220,235,252,.55)); border:2.5px solid transparent;box-sizing:border-box} .frame-swatch.frame-bronze{border-color:#cd7f32;box-shadow:0 0 7px rgba(205,127,50,.4)} .frame-swatch.frame-silver{border-color:#c0c0c0;box-shadow:0 0 7px rgba(192,192,192,.45)} .frame-swatch.frame-gold {border-color:transparent; background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(255,250,220,.6)) padding-box, linear-gradient(135deg,#f9ca24,#f0932b) border-box; box-shadow:0 0 9px rgba(249,202,36,.5)} .frame-swatch.frame-diamond{border-color:transparent; background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(220,245,255,.6)) padding-box, linear-gradient(135deg,#a8edea,#8ec5fc,#e0c3fc) border-box; box-shadow:0 0 9px rgba(140,197,252,.5)} .frame-swatch.frame-fire {border-color:transparent; background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(255,240,220,.6)) padding-box, linear-gradient(135deg,#ff4500,#ff8c00,#ffd700) border-box; box-shadow:0 0 11px rgba(255,100,0,.5)} /* ============================================================ TARC SOUQ — Sands of Oman × Aladdin's Cave Premium shop redesign. ============================================================ */ /* ── Souq CSS variables ─────────────────────────────────── */ :root{ --sand-1:#faf6ef; --sand-2:#f5ede0; --sand-3:#ede0cc; --terracotta:#c4622a; --terra-2:#e07840; --terra-3:#9a3e18; --gold-1:#ffd700; --gold-2:#f0a020; --gold-3:#c87800; --cave-bg:#06080f; --cave-2:#0d1020; --cave-3:#14182a; --cave-glow-amber:rgba(255,200,80,.18); --cave-glow-crimson:rgba(200,50,80,.18); --cave-glow-teal:rgba(50,200,180,.18); --cave-glow-violet:rgba(140,80,255,.18); --legend-gold:linear-gradient(135deg,#ffd700,#ff9500,#ffd700); --legend-diamond:linear-gradient(135deg,#a8edea,#8ec5fc,#e0c3fc,#a8edea); --legend-fire:linear-gradient(135deg,#ff4500,#ff8c00,#ffd700); --epic-purple:linear-gradient(135deg,#b8a9ff,#7a5cff,#b8a9ff); --rare-teal:linear-gradient(135deg,#46e3c8,#1f8fff); } /* ── Screen override: Souq uses sand bg instead of ice ─── */ #screen-shop{ background:linear-gradient(175deg,var(--sand-1) 0%,var(--sand-2) 60%,var(--sand-3) 100%); min-height:100%; } /* Woven fabric texture overlay */ #screen-shop::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='4' height='4' fill='%238a5c20'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%238a5c20'/%3E%3C/svg%3E"); } #screen-shop>*{position:relative;z-index:1} /* ── Souq topbar ────────────────────────────────────────── */ .souq-topbar{display:flex;align-items:center;justify-content:space-between; padding:0 0 0;margin-bottom:0;gap:14px} .souq-title-block{margin-left:10px} .souq-title-block .eyebrow{font-size:11px;color:rgba(150,90,20,.55);font-weight:700; letter-spacing:.16em;text-transform:uppercase;font-family:'Noto Naskh Arabic',serif} .souq-title-block .title{font-family:'Sora',sans-serif;font-size:23px;font-weight:800; color:#2c1a0a;letter-spacing:-.02em;margin-top:2px} /* ── Gold ornament divider ──────────────────────────────── */ .souq-divider{display:flex;align-items:center;gap:8px;margin:12px 0} .souq-divider .line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(180,130,30,.4),transparent)} .souq-divider .gem-node{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,var(--gold-1),var(--gold-2)); box-shadow:0 0 6px rgba(255,215,0,.5);flex:none} .souq-divider .hex{flex:none} /* ── Gem balance bar ────────────────────────────────────── */ .souq-gem-bar{display:flex;align-items:center;gap:12px; background:rgba(252,248,240,.94);/* TASK 5: blur removed for 60fps scroll */ border:1px solid rgba(196,98,42,.18);border-radius:20px; padding:13px 18px;box-shadow:0 6px 20px rgba(100,50,0,.1),inset 0 1px 1px rgba(255,255,255,.9)} .souq-gem-bar .gem-orb{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center; background:radial-gradient(circle at 40% 30%,#cdeeff,#37b6ff); box-shadow:0 4px 12px rgba(40,140,255,.35)} .souq-gem-bar .gem-count{font-family:'Sora',sans-serif;font-size:26px;font-weight:800;color:#2c1a0a} .souq-gem-bar .gem-label{font-size:13px;color:rgba(44,26,10,.45);font-weight:600} .souq-gem-bar .boost-pill{margin-left:auto;font-size:11px;font-weight:800;color:#c94f00; background:rgba(255,149,0,.14);border:1px solid rgba(255,149,0,.28); padding:5px 10px;border-radius:9px;white-space:nowrap;display:none} .souq-gem-bar .boost-pill.visible{display:block} /* ── Featured banner ────────────────────────────────────── */ .souq-featured{position:relative;overflow:hidden;border-radius:22px; background:rgba(252,248,240,.95);/* TASK 5: blur removed for 60fps scroll */ border:1px solid rgba(196,98,42,.25); box-shadow:0 12px 32px -10px rgba(100,50,0,.18),inset 0 1px 1px rgba(255,255,255,.9)} .souq-featured-inner{padding:18px} .souq-featured .feat-badge{font-size:10px;font-weight:800;letter-spacing:.16em; color:rgba(150,90,20,.7);text-transform:uppercase; display:flex;align-items:center;gap:6px;margin-bottom:12px} .souq-featured .feat-badge .fb-dot{ width:6px;height:6px;border-radius:50%; background:var(--terracotta);flex:none} .souq-featured .feat-badge .fb-timer{margin-left:auto;color:rgba(200,60,60,.75); background:rgba(200,60,60,.1);border:1px solid rgba(200,60,60,.2); padding:2px 8px;border-radius:6px;font-size:10px} .souq-featured .feat-icon-wrap{width:62px;height:62px;border-radius:18px;flex:none; display:grid;place-items:center;font-size:30px; box-shadow:0 8px 20px -6px rgba(100,50,0,.3)} .souq-featured .feat-name{font-family:'Sora',sans-serif;font-size:17px;font-weight:800; color:#2c1a0a;letter-spacing:-.01em} .souq-featured .feat-sub{font-size:12px;color:rgba(44,26,10,.5);margin-top:3px} .souq-featured .feat-price-row{display:flex;align-items:baseline;gap:8px;margin-top:10px} .souq-featured .orig-price{font-size:12px;color:rgba(44,26,10,.35);text-decoration:line-through} .souq-featured .sale-price{font-family:'Sora',sans-serif;font-size:21px;font-weight:800;color:#c44820} .souq-featured .sale-tag{font-size:10px;font-weight:800;color:#c44820; background:rgba(196,68,32,.12);border:1px solid rgba(196,68,32,.22); padding:3px 7px;border-radius:6px} .souq-featured .feat-buy-btn{margin-top:14px;width:100%;padding:13px; background:linear-gradient(135deg,var(--terracotta),var(--terra-3)); color:#fff;border:none;border-radius:14px;font-family:'Sora',sans-serif; font-size:14px;font-weight:800;cursor:pointer; box-shadow:0 8px 20px -6px rgba(150,60,20,.5); transition:transform .18s cubic-bezier(.2,.8,.2,1)} .souq-featured .feat-buy-btn:active{transform:scale(.97)} /* specular sheen on featured */ .souq-featured::after{content:'';position:absolute;top:0;left:0;right:0;height:45%; background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0)); border-radius:22px 22px 0 0;pointer-events:none} /* ── Gold corner ornament ───────────────────────────────── */ .souq-corner-orn{position:absolute;top:0;right:0;width:64px;height:64px;overflow:hidden;pointer-events:none} .souq-corner-orn::before{content:'';position:absolute;top:0;right:0;width:0;height:0; border-left:64px solid transparent;border-top:64px solid rgba(180,130,30,.1)} /* ── Category tabs ──────────────────────────────────────── */ .souq-tabs{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none; padding:2px 0 4px} .souq-tabs::-webkit-scrollbar{display:none} .souq-tab{white-space:nowrap;padding:9px 15px;border-radius:50px;font-size:12px;font-weight:700; cursor:pointer;transition:all .2s;border:1px solid rgba(196,98,42,.18); background:rgba(255,252,245,.7);color:rgba(44,26,10,.55);flex:none} .souq-tab.active{background:var(--terracotta);color:#fff; border-color:transparent;box-shadow:0 4px 14px rgba(150,60,20,.4)} /* ── Section header (Sands style) ──────────────────────── */ .souq-section{display:flex;align-items:center;gap:8px;margin:22px 0 12px} .souq-section .ss-hex{width:16px;height:16px;flex:none} .souq-section .ss-label{font-size:11px;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:rgba(44,26,10,.5)} .souq-section .ss-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(180,130,30,.3),transparent)} /* Rarity tier version (Cave style) */ .cave-section{display:flex;align-items:center;gap:10px;margin:24px 0 12px;padding:10px 14px; border-radius:14px} .cave-section.legendary{background:linear-gradient(135deg,rgba(255,200,50,.1),rgba(255,130,30,.06)); border:1px solid rgba(255,200,50,.2)} .cave-section.epic{background:linear-gradient(135deg,rgba(180,100,255,.1),rgba(100,60,200,.06)); border:1px solid rgba(180,100,255,.2)} .cave-section.rare{background:linear-gradient(135deg,rgba(50,200,200,.08),rgba(40,140,255,.05)); border:1px solid rgba(50,200,200,.18)} .cave-section .cs-icon{font-size:20px;flex:none} .cave-section .cs-text{flex:1} .cave-section .cs-name{font-family:'Sora',sans-serif;font-size:13px;font-weight:800} .cave-section.legendary .cs-name{color:rgba(255,200,50,.9)} .cave-section.epic .cs-name{color:rgba(200,160,255,.9)} .cave-section.rare .cs-name{color:rgba(80,220,200,.9)} .cave-section .cs-sub{font-size:10.5px;margin-top:1px;opacity:.55;color:#fff} .cave-section .cs-glow-tag{font-size:10px;font-weight:800;padding:3px 9px;border-radius:8px; letter-spacing:.08em;text-transform:uppercase} .cave-section.legendary .cs-glow-tag{background:rgba(255,200,50,.18);color:rgba(255,200,50,.9);border:1px solid rgba(255,200,50,.25)} .cave-section.epic .cs-glow-tag{background:rgba(180,100,255,.18);color:rgba(200,160,255,.9);border:1px solid rgba(180,100,255,.25)} .cave-section.rare .cs-glow-tag{background:rgba(50,200,200,.14);color:rgba(80,220,200,.9);border:1px solid rgba(50,200,200,.22)} /* ── Sand-style item card ────────────────────────────────── */ .souq-item{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:9px; cursor:pointer;border-radius:18px;transition:transform .18s cubic-bezier(.2,.8,.2,1); background:rgba(251,247,239,.95);/* TASK 5: blur removed for 60fps scroll */ border:1px solid rgba(196,98,42,.15); box-shadow:0 6px 16px rgba(100,50,0,.08),inset 0 1px rgba(255,255,255,.9)} .souq-item:active{transform:scale(.97)} @media(hover:hover) and (pointer:fine){.souq-item:hover{transform:translateY(-2px)}} .souq-item.owned{opacity:.62;cursor:default} .souq-item.locked-item{opacity:.5;cursor:default} .souq-ic{width:50px;height:50px;border-radius:16px;flex:none;display:grid;place-items:center;font-size:24px} .souq-item-body{flex:1;min-width:0} .souq-item-body h4{font-family:'Sora',sans-serif;font-size:14.5px;font-weight:700; color:#2c1a0a;letter-spacing:-.01em;line-height:1.2} .souq-item-body p{font-size:11.5px;color:rgba(44,26,10,.5);margin-top:2px;font-weight:500;line-height:1.4} .souq-item-body .tier-row{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap} .tier-tag{font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;letter-spacing:.06em;text-transform:uppercase} .tier-tag.legendary{background:rgba(255,200,50,.2);color:#9a6800;border:1px solid rgba(255,200,50,.3)} .tier-tag.epic{background:rgba(150,80,255,.15);color:#6030c0;border:1px solid rgba(150,80,255,.25)} .tier-tag.rare{background:rgba(40,180,200,.12);color:#006880;border:1px solid rgba(40,180,200,.2)} .tier-tag.common{background:rgba(100,100,120,.1);color:rgba(44,26,10,.5);border:1px solid rgba(100,100,120,.15)} .tier-tag.seasonal{background:rgba(255,80,120,.14);color:#900040;border:1px solid rgba(255,80,120,.22)} .tier-tag.new{background:rgba(50,200,100,.16);color:#005030;border:1px solid rgba(50,200,100,.25)} .souq-price{display:flex;align-items:center;gap:5px;font-family:'Sora',sans-serif;font-weight:800; font-size:14px;color:#8a5c10;flex:none;padding:7px 11px;border-radius:12px; background:rgba(255,215,0,.12);border:1px solid rgba(200,150,30,.25);white-space:nowrap} .souq-price.owned-tag{color:#0e7a50;background:rgba(14,154,108,.1);border-color:rgba(14,154,108,.2);font-size:12px} .souq-price.locked-price{color:rgba(44,26,10,.3);background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)} /* ── Cave-style item card (for Legendary/Epic sections) ─── */ .cave-item{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:9px; cursor:pointer;border-radius:18px;transition:transform .2s cubic-bezier(.2,.8,.2,1); position:relative;overflow:hidden;contain:paint/* TASK 5: isolate glow repaint */} .cave-item:active{transform:scale(.97)} @media(hover:hover) and (pointer:fine){.cave-item:hover{transform:translateY(-2px)}} .cave-item.owned{opacity:.62;cursor:default} .cave-item.legendary-card{ background:linear-gradient(135deg,rgba(255,200,50,.12),rgba(200,120,20,.06)); border:1px solid rgba(255,200,50,.28); box-shadow:0 0 24px rgba(255,200,50,.12),0 8px 20px rgba(100,50,0,.12)} .cave-item.epic-card{ background:linear-gradient(135deg,rgba(160,80,255,.1),rgba(80,40,160,.06)); border:1px solid rgba(160,80,255,.25); box-shadow:0 0 20px rgba(160,80,255,.12),0 8px 20px rgba(60,20,100,.1)} .cave-item.rare-card{ background:linear-gradient(135deg,rgba(40,200,200,.1),rgba(20,120,200,.06)); border:1px solid rgba(40,200,200,.22); box-shadow:0 0 16px rgba(40,200,200,.1),0 6px 16px rgba(0,80,100,.08)} /* inner glow pulse */ @keyframes caveGlow{0%,100%{opacity:.8}50%{opacity:1}} .cave-item::before{content:'';position:absolute;inset:0;border-radius:inherit; pointer-events:none;animation:caveGlow 3s ease-in-out infinite} .cave-item.legendary-card::before{background:radial-gradient(ellipse at 10% 50%,rgba(255,200,50,.08),transparent 60%)} .cave-item.epic-card::before{background:radial-gradient(ellipse at 10% 50%,rgba(160,80,255,.08),transparent 60%)} .cave-item.rare-card::before{background:radial-gradient(ellipse at 10% 50%,rgba(40,200,200,.07),transparent 60%)} .cave-ic{width:52px;height:52px;border-radius:16px;flex:none;display:grid;place-items:center;font-size:26px; position:relative} .cave-ic.legendary{background:linear-gradient(135deg,rgba(255,200,50,.25),rgba(200,120,20,.15)); border:1px solid rgba(255,200,50,.35);box-shadow:0 0 12px rgba(255,200,50,.35)} .cave-ic.epic{background:linear-gradient(135deg,rgba(180,100,255,.22),rgba(80,40,200,.12)); border:1px solid rgba(180,100,255,.35);box-shadow:0 0 12px rgba(180,100,255,.3)} .cave-ic.rare{background:linear-gradient(135deg,rgba(50,200,200,.2),rgba(30,120,200,.1)); border:1px solid rgba(50,200,200,.3);box-shadow:0 0 10px rgba(50,200,200,.25)} .cave-item-body{flex:1;min-width:0;position:relative} .cave-item-body h4{font-family:'Sora',sans-serif;font-size:14.5px;font-weight:800;line-height:1.2} .cave-item.legendary-card .cave-item-body h4{color:rgba(255,220,120,.95)} .cave-item.epic-card .cave-item-body h4{color:rgba(210,180,255,.95)} .cave-item.rare-card .cave-item-body h4{color:rgba(160,240,230,.95)} .cave-item-body p{font-size:11.5px;margin-top:3px;font-weight:500;line-height:1.4;opacity:.65;color:#fff} .cave-price{display:flex;align-items:center;gap:5px;font-family:'Sora',sans-serif;font-weight:800; font-size:14px;flex:none;padding:8px 12px;border-radius:12px;white-space:nowrap} .cave-item.legendary-card .cave-price{color:rgba(255,220,100,.95); background:rgba(255,200,50,.14);border:1px solid rgba(255,200,50,.25)} .cave-item.epic-card .cave-price{color:rgba(210,180,255,.95); background:rgba(160,80,255,.14);border:1px solid rgba(160,80,255,.25)} .cave-item.rare-card .cave-price{color:rgba(160,240,230,.95); background:rgba(40,200,200,.12);border:1px solid rgba(40,200,200,.22)} .cave-price.owned-cave{font-size:12px;color:rgba(80,255,180,.8); background:rgba(20,200,100,.1);border:1px solid rgba(20,200,100,.2)} /* ── Daily deals carousel ────────────────────────────────── */ .souq-deals-row{display:flex;gap:11px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px} .souq-deals-row::-webkit-scrollbar{display:none} .deal-card{flex:none;width:150px;border-radius:18px;padding:14px;cursor:pointer; transition:transform .18s cubic-bezier(.2,.8,.2,1); background:rgba(251,247,239,.95);/* TASK 5: blur removed for 60fps scroll */ border:1px solid rgba(196,98,42,.18); box-shadow:0 6px 16px rgba(100,50,0,.1)} .deal-card:active{transform:scale(.96)} @media(hover:hover) and (pointer:fine){.deal-card:hover{transform:translateY(-2px)}} .deal-card .dc-badge{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:rgba(200,60,60,.75);margin-bottom:8px;display:flex;align-items:center;gap:4px} .deal-card .dc-icon{font-size:28px;margin-bottom:8px} .deal-card .dc-name{font-family:'Sora',sans-serif;font-size:12.5px;font-weight:700; color:#2c1a0a;margin-bottom:4px;line-height:1.25} .deal-card .dc-prices{display:flex;align-items:baseline;gap:5px} .deal-card .dc-orig{font-size:11px;color:rgba(44,26,10,.3);text-decoration:line-through} .deal-card .dc-sale{font-family:'Sora',sans-serif;font-size:14px;font-weight:800;color:#c44820} .deal-card .dc-pct{font-size:10px;font-weight:800;color:#c44820; background:rgba(196,68,32,.1);border:1px solid rgba(196,68,32,.18); padding:2px 5px;border-radius:5px;margin-left:2px} /* ── Profile titles horizontal scroll ───────────────────── */ .title-scroll{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px} .title-scroll::-webkit-scrollbar{display:none} .title-card{flex:none;width:130px;border-radius:16px;padding:14px 12px;text-align:center;cursor:pointer; transition:transform .18s cubic-bezier(.2,.8,.2,1)} .title-card:active{transform:scale(.96)} .title-card .tc-badge{font-size:20px;margin-bottom:8px} .title-card .tc-name{font-size:13px;font-weight:800;margin-bottom:3px;font-family:'Sora',sans-serif} .title-card .tc-title{font-size:11px;opacity:.7;line-height:1.3;margin-bottom:8px} .title-card .tc-price{font-size:12px;font-weight:800;padding:5px 9px;border-radius:8px;display:inline-block} .title-card.owned-title .tc-price{font-size:11px} /* Rarity variants */ .title-card.tc-common{background:rgba(255,252,245,.8);border:1px solid rgba(196,98,42,.18)} .title-card.tc-common .tc-name{color:#2c1a0a} .title-card.tc-common .tc-price{background:rgba(255,215,0,.15);border:1px solid rgba(200,150,30,.25);color:#8a5c10} .title-card.tc-rare{background:linear-gradient(135deg,rgba(40,200,200,.1),rgba(20,120,200,.06)); border:1px solid rgba(40,200,200,.22);box-shadow:0 0 12px rgba(40,200,200,.08)} .title-card.tc-rare .tc-name{color:rgba(80,220,200,.9)} .title-card.tc-rare .tc-price{background:rgba(40,200,200,.12);border:1px solid rgba(40,200,200,.22);color:rgba(40,180,180,.9)} .title-card.tc-epic{background:linear-gradient(135deg,rgba(160,80,255,.12),rgba(80,40,200,.07)); border:1px solid rgba(160,80,255,.25)} .title-card.tc-epic .tc-name{color:rgba(200,160,255,.95)} .title-card.tc-epic .tc-price{background:rgba(160,80,255,.15);border:1px solid rgba(160,80,255,.25);color:rgba(200,160,255,.9)} .title-card.tc-legendary{background:linear-gradient(135deg,rgba(255,200,50,.14),rgba(200,120,20,.08)); border:1px solid rgba(255,200,50,.28)} .title-card.tc-legendary .tc-name{color:rgba(255,220,100,.95)} .title-card.tc-legendary .tc-price{background:rgba(255,200,50,.18);border:1px solid rgba(255,200,50,.28);color:rgba(240,180,60,.95)} /* ── Profile badges grid ─────────────────────────────────── */ .badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .badge-card{border-radius:16px;padding:14px;text-align:center;cursor:pointer; transition:transform .2s cubic-bezier(.2,.8,.2,1)} .badge-card:active{transform:scale(.95)} .badge-card .bc-icon{font-size:28px;margin-bottom:7px;display:block} .badge-card .bc-name{font-size:11px;font-weight:700;margin-bottom:4px;line-height:1.25} .badge-card .bc-price{font-size:11px;font-weight:800;padding:4px 8px;border-radius:7px;display:inline-block} .badge-card.bc-sand{background:rgba(255,252,245,.8);border:1px solid rgba(196,98,42,.18)} .badge-card.bc-sand .bc-name{color:#2c1a0a} .badge-card.bc-sand .bc-price{background:rgba(255,215,0,.14);color:#8a5c10;border:1px solid rgba(200,150,30,.2)} .badge-card.bc-cave{border:1px solid rgba(255,200,50,.25); background:linear-gradient(135deg,rgba(255,200,50,.1),rgba(200,120,20,.05))} .badge-card.bc-cave .bc-name{color:rgba(255,220,120,.9)} .badge-card.bc-cave .bc-price{background:rgba(255,200,50,.15);color:rgba(240,180,60,.9);border:1px solid rgba(255,200,50,.22)} .badge-card.bc-epic{border:1px solid rgba(160,80,255,.25); background:linear-gradient(135deg,rgba(160,80,255,.1),rgba(80,40,200,.05))} .badge-card.bc-epic .bc-name{color:rgba(210,180,255,.95)} .badge-card.bc-epic .bc-price{background:rgba(160,80,255,.15);color:rgba(200,160,255,.9);border:1px solid rgba(160,80,255,.22)} /* ── Seasonal event card ─────────────────────────────────── */ .seasonal-banner{border-radius:22px;padding:18px;margin-bottom:14px;position:relative;overflow:hidden; background:linear-gradient(135deg,rgba(255,120,80,.12),rgba(200,60,80,.07)); border:1px solid rgba(255,120,80,.25); box-shadow:0 8px 24px rgba(200,60,40,.12)} .seasonal-banner::before{content:'';position:absolute;top:-40px;right:-40px;width:120px;height:120px; border-radius:50%;background:radial-gradient(circle,rgba(255,120,80,.2),transparent 65%);pointer-events:none} .seasonal-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800; letter-spacing:.12em;text-transform:uppercase;color:rgba(255,120,80,.8);margin-bottom:10px} .seasonal-name{font-family:'Sora',sans-serif;font-size:16px;font-weight:800;color:rgba(255,200,160,.95);margin-bottom:4px} .seasonal-desc{font-size:12px;color:rgba(255,200,160,.55);line-height:1.5;margin-bottom:12px} .seasonal-items{display:flex;gap:8px} .si-pill{background:rgba(255,120,80,.12);border:1px solid rgba(255,120,80,.22); border-radius:10px;padding:5px 10px;font-size:11px;font-weight:700;color:rgba(255,180,140,.85)} /* ── Merchant recommendation ─────────────────────────────── */ .merchant-rec{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:16px; background:rgba(255,252,245,.72);border:1px solid rgba(196,98,42,.18); margin-bottom:10px} .merchant-rec .mr-lamp{font-size:22px;flex:none} .merchant-rec .mr-body{flex:1} .merchant-rec .mr-title{font-size:13px;font-weight:700;color:#2c1a0a} .merchant-rec .mr-sub{font-size:11px;color:rgba(44,26,10,.5);margin-top:2px;line-height:1.4} .merchant-rec .mr-action{font-size:11px;font-weight:800;color:var(--terracotta); background:rgba(196,98,42,.1);border:1px solid rgba(196,98,42,.2); padding:5px 10px;border-radius:9px;white-space:nowrap;cursor:pointer;flex:none} /* ── Frame display (enhanced with tent-label) ────────────── */ .frame-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px} .frame-row::-webkit-scrollbar{display:none} .frame-card{flex:none;width:90px;border-radius:16px;padding:12px 8px;text-align:center;cursor:pointer; transition:transform .18s cubic-bezier(.2,.8,.2,1);border:1px solid transparent} .frame-card:active{transform:scale(.94)} .frame-card.fc-owned{border-color:rgba(14,154,108,.3);background:rgba(214,255,240,.3)} .frame-card .fc-preview{width:54px;height:54px;border-radius:16px;margin:0 auto 8px; background:linear-gradient(140deg,#8fe9ff,#6c8dff);display:grid;place-items:center; font-size:18px;font-family:'Sora',sans-serif;font-weight:800;color:#fff;position:relative} .frame-card .fc-name{font-size:11px;font-weight:700;margin-bottom:4px;line-height:1.2} .frame-card .fc-price{font-size:11px;font-weight:800;padding:4px 8px;border-radius:8px;display:inline-block} .frame-card.fc-sand{background:rgba(255,252,245,.75);border-color:rgba(196,98,42,.18)} .frame-card.fc-sand .fc-name{color:#2c1a0a} .frame-card.fc-sand .fc-price{background:rgba(255,215,0,.14);color:#8a5c10;border:1px solid rgba(200,150,30,.22)} .frame-card.fc-cave{background:linear-gradient(135deg,rgba(255,200,50,.1),rgba(200,120,20,.05)); border-color:rgba(255,200,50,.25)} .frame-card.fc-cave .fc-name{color:rgba(255,220,100,.9)} .frame-card.fc-cave .fc-price{background:rgba(255,200,50,.15);color:rgba(240,180,60,.9);border:1px solid rgba(255,200,50,.22)} .frame-card.fc-epic{background:linear-gradient(135deg,rgba(160,80,255,.1),rgba(80,40,200,.05)); border-color:rgba(160,80,255,.22)} .frame-card.fc-epic .fc-name{color:rgba(210,180,255,.9)} .frame-card.fc-epic .fc-price{background:rgba(160,80,255,.14);color:rgba(200,160,255,.9);border:1px solid rgba(160,80,255,.22)} .frame-card.fc-fire{background:linear-gradient(135deg,rgba(255,80,0,.1),rgba(200,60,0,.05)); border-color:rgba(255,100,30,.22)} .frame-card.fc-fire .fc-name{color:rgba(255,180,100,.9)} .frame-card.fc-fire .fc-price{background:rgba(255,80,0,.14);color:rgba(255,150,80,.9);border:1px solid rgba(255,80,0,.22)} /* ── Bottom safe padding (extra for souq) ────────────────── */ #screen-shop .souq-bottom-pad{height:24px} /* ── Cave background atmosphere (for Premium sections) ────── */ .cave-atmosphere{border-radius:22px;padding:16px;margin-bottom:8px;position:relative;overflow:hidden; background:linear-gradient(175deg,#0a0e1c 0%,#0f1428 100%)} .cave-atmosphere::before{content:'';position:absolute;inset:0;pointer-events:none} /* ambient glow spots */ .cave-atmosphere .ca-glow-left{position:absolute;width:160px;height:160px;border-radius:50%; top:-40px;left:-40px;background:radial-gradient(circle,rgba(255,200,50,.14),transparent 65%);pointer-events:none} .cave-atmosphere .ca-glow-right{position:absolute;width:120px;height:120px;border-radius:50%; bottom:-30px;right:-20px;background:radial-gradient(circle,rgba(160,80,255,.18),transparent 65%);pointer-events:none} .cave-atmosphere .ca-content{position:relative;z-index:1} /* ── Collectibles: horizontal shelf ─────────────────────── */ .collect-shelf{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:4px 0 8px} .collect-shelf::-webkit-scrollbar{display:none} .collect-item{flex:none;width:100px;border-radius:16px;padding:14px 10px;text-align:center;cursor:pointer; transition:transform .2s cubic-bezier(.2,.8,.2,1)} .collect-item:active{transform:scale(.92)} @keyframes collectFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} .collect-item .ci-icon{font-size:32px;margin-bottom:8px;display:block; animation:collectFloat 4s ease-in-out infinite} .collect-item.ci-legend{background:linear-gradient(135deg,rgba(255,200,50,.16),rgba(200,120,20,.08)); border:1px solid rgba(255,200,50,.3)} .collect-item.ci-legend .ci-name{font-size:11px;font-weight:700;color:rgba(255,220,120,.9)} .collect-item.ci-legend .ci-price{font-size:11px;font-weight:800;color:rgba(240,180,60,.9); background:rgba(255,200,50,.15);border:1px solid rgba(255,200,50,.22); padding:4px 8px;border-radius:7px;display:inline-block;margin-top:5px} .collect-item.ci-epic{background:linear-gradient(135deg,rgba(160,80,255,.14),rgba(80,40,200,.07)); border:1px solid rgba(160,80,255,.28)} .collect-item.ci-epic .ci-name{font-size:11px;font-weight:700;color:rgba(210,180,255,.9)} .collect-item.ci-epic .ci-price{font-size:11px;font-weight:800;color:rgba(200,160,255,.9); background:rgba(160,80,255,.15);border:1px solid rgba(160,80,255,.22); padding:4px 8px;border-radius:7px;display:inline-block;margin-top:5px} /* ── XP boost row (active indicator, souq style) ─────────── */ .souq-boost-active{display:flex;align-items:center;gap:10px;padding:11px 14px;margin-bottom:12px; border-radius:14px;background:rgba(196,98,42,.09);border:1px solid rgba(196,98,42,.2)} .souq-boost-active .sba-icon{font-size:20px;flex:none} .souq-boost-active .sba-text{flex:1;font-size:13px;font-weight:700;color:#8a3010} .souq-boost-active .sba-timer{font-size:11.5px;color:rgba(138,48,16,.6);font-weight:600} /* ── Redeem Code button + modal (Task 2) ─────────────────── */ .souq-redeem-btn{display:flex;align-items:center;gap:12px;width:100%;cursor:pointer; padding:14px 18px;border-radius:18px;font-family:'Sora',sans-serif; background:linear-gradient(135deg,rgba(196,98,42,.14),rgba(255,215,0,.1)); border:1px solid rgba(196,98,42,.28); box-shadow:0 6px 18px rgba(100,50,0,.1),inset 0 1px 1px rgba(255,255,255,.7); transition:transform .18s cubic-bezier(.2,.8,.2,1)} .souq-redeem-btn:active{transform:scale(.98)} @media(hover:hover) and (pointer:fine){.souq-redeem-btn:hover{transform:translateY(-2px)}} .souq-redeem-btn .srb-icon{font-size:22px;flex:none} .souq-redeem-btn .srb-text{flex:1;text-align:left;font-size:14.5px;font-weight:800;color:#2c1a0a;letter-spacing:-.01em} .souq-redeem-btn .srb-arrow{font-size:16px;font-weight:800;color:var(--terracotta);flex:none} .redeem-overlay{position:fixed;inset:0;z-index:340;display:flex;align-items:center;justify-content:center; padding:24px;background:rgba(20,12,4,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:0;pointer-events:none;transition:opacity .25s} .redeem-overlay.open{opacity:1;pointer-events:auto} .redeem-modal{position:relative;max-width:340px;width:100%;text-align:center;overflow:hidden; background:linear-gradient(170deg,var(--sand-1) 0%,var(--sand-2) 60%,var(--sand-3) 100%); border:1px solid rgba(196,98,42,.3);border-radius:28px;padding:30px 24px 24px; box-shadow:0 28px 60px -18px rgba(60,30,0,.5),inset 0 1.5px 1px rgba(255,255,255,.85); transform:scale(.92) translateY(8px);transition:transform .28s cubic-bezier(.2,.8,.2,1)} .redeem-overlay.open .redeem-modal{transform:scale(1) translateY(0)} .redeem-modal::after{content:'';position:absolute;top:0;left:0;right:0;height:40%;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0));border-radius:28px 28px 0 0} .redeem-corner-orn{position:absolute;top:0;right:0;width:60px;height:60px;overflow:hidden;pointer-events:none} .redeem-corner-orn::before{content:'';position:absolute;top:0;right:0;width:0;height:0; border-left:60px solid transparent;border-top:60px solid rgba(180,130,30,.12)} .redeem-close{position:absolute;top:14px;left:16px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.6);border:1px solid rgba(196,98,42,.2);cursor:pointer;color:rgba(44,26,10,.55);z-index:2} .redeem-lamp{font-size:42px;margin-bottom:8px;position:relative;z-index:1} .redeem-eyebrow{font-family:'Noto Naskh Arabic',serif;font-size:13px;color:rgba(150,90,20,.7); letter-spacing:.1em;margin-bottom:2px;position:relative;z-index:1} .redeem-title{font-family:'Sora',sans-serif;font-weight:800;font-size:20px;color:#2c1a0a;letter-spacing:-.02em;position:relative;z-index:1} .redeem-sub{font-size:12.5px;color:rgba(44,26,10,.55);line-height:1.5;margin:6px 0 0;position:relative;z-index:1} .redeem-divider{display:flex;align-items:center;gap:8px;margin:16px 0;position:relative;z-index:1} .redeem-divider .rd-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(180,130,30,.4),transparent)} .redeem-divider .rd-gem{width:9px;height:9px;border-radius:50%;flex:none; background:radial-gradient(circle,var(--gold-1),var(--gold-2));box-shadow:0 0 6px rgba(255,215,0,.5)} .redeem-input{display:block;width:100%;box-sizing:border-box;text-align:center; background:rgba(255,255,255,.7);border:1px solid rgba(196,98,42,.25);border-radius:14px; padding:14px 16px;font-family:'Sora',sans-serif;font-size:16px;font-weight:700;letter-spacing:.04em; color:#2c1a0a;outline:none;-webkit-appearance:none;position:relative;z-index:1;transition:border-color .2s,box-shadow .2s} .redeem-input::placeholder{color:rgba(44,26,10,.32);font-weight:500;letter-spacing:0} .redeem-input:focus{border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(196,98,42,.14)} .redeem-status{min-height:16px;font-size:12.5px;font-weight:700;margin:9px 2px 2px;position:relative;z-index:1} .redeem-status.ok{color:#0e7a50} .redeem-status.err{color:#c0392b} .redeem-btn{width:100%;margin-top:14px;padding:15px;border:none;cursor:pointer;border-radius:16px; font-family:'Sora',sans-serif;font-size:15px;font-weight:800;color:#fff;position:relative;z-index:1; background:linear-gradient(135deg,var(--terracotta),var(--terra-3)); box-shadow:0 10px 24px -8px rgba(150,60,20,.55),inset 0 1px 2px rgba(255,255,255,.3); transition:transform .15s} .redeem-btn:active{transform:translateY(1px) scale(.99)} /* ============================================================ i18n — Language Picker Overlay ============================================================ */ .lang-overlay{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column; align-items:center;justify-content:center;padding:24px; background:linear-gradient(160deg,#d8edff,#cfe6ff 32%,#e8f1ff 68%,#f5fbff)} .lang-card{background:linear-gradient(150deg,rgba(255,255,255,.88),rgba(255,255,255,.56)); border:1px solid rgba(255,255,255,.72);border-radius:32px; box-shadow:0 24px 52px -20px rgba(16,78,150,.38),inset 0 1.5px 1px rgba(255,255,255,1); padding:36px 28px 28px;max-width:360px;width:100%;text-align:center} .lang-title{font-family:'Sora',sans-serif;font-weight:800;font-size:22px; letter-spacing:-.02em;color:#0b2a4a;margin-bottom:6px} .lang-sub{font-family:'Outfit',sans-serif;font-size:13.5px;color:#5b7896; margin-bottom:22px;line-height:1.5} .lang-opts{display:flex;flex-direction:column;gap:9px;margin-bottom:18px} .lang-opt{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:16px; border:1.5px solid rgba(255,255,255,.7);cursor:pointer;transition:.18s; background:rgba(255,255,255,.55);text-align:left} .lang-opt:hover,.lang-opt:focus{border-color:rgba(40,160,255,.4); background:rgba(255,255,255,.85);outline:none} .lang-opt.sel{border-color:var(--accent);background:rgba(220,238,255,.8); box-shadow:0 0 0 3px rgba(40,160,255,.15)} .lang-opt .lo-flag{font-size:26px;flex:none;width:36px;text-align:center} .lang-opt .lo-name{font-family:'Sora',sans-serif;font-size:15px;font-weight:700; color:var(--ink)} .lang-opt .lo-native{font-size:11.5px;color:var(--ink-3);margin-top:1px} .lang-continue-btn{width:100%;padding:15px;border:none;border-radius:18px; font-family:'Outfit',sans-serif;font-weight:700;font-size:16px;color:#fff; background:linear-gradient(145deg,#39b6ff,#0a6dff); box-shadow:0 8px 20px -6px rgba(20,110,220,.6),inset 0 1px 2px rgba(255,255,255,.5); opacity:.45;transition:opacity .2s;cursor:not-allowed;pointer-events:none} .lang-continue-btn.ready{opacity:1;cursor:pointer;pointer-events:auto} /* ============================================================ Settings section inside Profile tab ============================================================ */ .settings-row{display:flex;align-items:center;gap:13px;padding:15px 18px;cursor:pointer; transition:transform .18s cubic-bezier(.2,.8,.2,1);border-radius:var(--r-md)} .settings-row:active{transform:scale(.98)} @media(hover:hover) and (pointer:fine){.settings-row:hover{transform:translateY(-2px)}} .settings-row .sr-ic{width:40px;height:40px;border-radius:12px;flex:none;display:grid; place-items:center;color:#fff} .settings-row .sr-body{flex:1;min-width:0} .settings-row .sr-label{font-size:14px;font-weight:700;font-family:'Sora',sans-serif; color:var(--ink);letter-spacing:-.01em} .settings-row .sr-value{font-size:12px;color:var(--ink-3);margin-top:2px;font-weight:500} .settings-row .sr-arrow{color:var(--ink-faint);flex:none} /* ── Word Bank / My Words (Step 4) ──────────────────────────────────── The collection screen: one row per studied word, strength shown as SRS boxes filled rather than an invented percentage. */ .wb-head{padding:14px 16px;margin:0 0 12px;display:flex;flex-direction:column;gap:10px} .wb-count{font-size:12.5px;color:var(--ink-3);font-weight:600} .wb-search{width:100%;border:1px solid rgba(120,170,230,.28);background:rgba(255,255,255,.6); border-radius:12px;padding:10px 12px;font-size:13.5px;font-family:inherit;color:var(--ink-1);outline:none} .wb-search:focus{border-color:var(--accent)} .wb-filters{display:flex;gap:7px;flex-wrap:wrap} .wb-filter{border:1px solid rgba(120,170,230,.3);background:transparent;color:var(--ink-3); border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:700;font-family:inherit;cursor:pointer} .wb-filter.active{background:var(--accent);border-color:var(--accent);color:#fff} .wb-list{display:flex;flex-direction:column;gap:8px;padding-bottom:20px} .wb-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:15px; background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.75)} .wb-row.due{border-color:rgba(31,143,255,.4);background:rgba(31,143,255,.06)} .wb-word{font-family:"Noto Naskh Arabic",serif;font-size:21px;font-weight:600;flex:none; min-width:76px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wb-body{flex:1;min-width:0} .wb-mean{font-size:13.5px;font-weight:600;color:var(--ink-1)} .wb-meta{font-size:10.5px;color:var(--ink-3);margin-top:2px} .wb-pips{display:flex;gap:3px;flex:none} .wb-pips i{width:6px;height:14px;border-radius:3px;background:rgba(120,150,190,.25)} .wb-pips i.on{background:var(--accent)} .wb-empty{text-align:center;color:var(--ink-3);font-size:13px;padding:36px 20px} .wb-more{width:100%;justify-content:center;padding:12px;margin-top:4px}