/* ============================================================
   WordClimb — in-app mock screen styles (rendered inside .phone)
   Screens always render in their own light/dark app theme,
   independent of the site theme.
   ============================================================ */
.scr-body { font-family: var(--body); font-size: 13px; color: #11121A; }
.scr { height: 100%; display: flex; flex-direction: column; background: #F2F2F7; }
.scr-scroll { flex: 1; overflow: hidden; padding: 0 16px 18px; }
.scr-pad { padding: 0 16px; }

/* gradient header */
.scr-hero { background: linear-gradient(135deg, #0A84FF, #5856D6 55%, #AF52DE); color: #fff; padding: 6px 18px 22px; }
.scr-hero.round { border-radius: 0 0 26px 26px; }
.scr-hello { font-size: 12px; opacity: .85; font-weight: 500; }
.scr-hi-row { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.scr-hi-row h3 { color: #fff; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.scr-streak { display: flex; align-items: center; gap: 5px; background: #ffffff26; padding: 6px 11px; border-radius: 999px; font-weight: 700; font-size: 13px; }

/* generic app card */
.a-card { background: #fff; border-radius: 18px; padding: 15px; box-shadow: 0 4px 14px #1c1c2e0d; margin-top: 13px; }
.a-card.tight { padding: 13px; }
.a-row { display: flex; align-items: center; gap: 12px; }
.a-title { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.a-sub { color: #8a8a8f; font-size: 11.5px; font-weight: 500; }
.a-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8f; }

.sectionlabel { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8f; margin: 16px 2px 4px; }

/* progress ring */
.ring { --p: 65; --c: #5856D6; width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--c) calc(var(--p)*1%), #E5E5EA 0); display: grid; place-items: center; }
.ring::after { content: ''; width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.ring span { position: absolute; font-weight: 800; font-size: 12px; color: #11121A; }
.ring-wrap { position: relative; display: grid; place-items: center; }

/* progress bar */
.bar { height: 8px; border-radius: 99px; background: #E5E5EA; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg,#0A84FF,#5856D6,#AF52DE); }

/* pill button */
.a-btn { display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 14px; font-weight: 700; font-size: 14px; padding: 13px; }
.a-btn.grad { background: linear-gradient(120deg,#0A84FF,#5856D6,#AF52DE); color: #fff; }
.a-btn.soft { background: #fff; color: #5856D6; box-shadow: 0 2px 8px #1c1c2e0d; }
.a-btn.dark { background: #11121A; color: #fff; }

/* chips */
.a-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; background: #5856D614; color: #5856D6; }

/* tab bar */
.scr-tabs { display: flex; justify-content: space-around; align-items: center; padding: 9px 10px 16px; background: #ffffffe6; backdrop-filter: blur(12px); border-top: 1px solid #00000010; }
.scr-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #b0b0b5; font-size: 9.5px; font-weight: 600; }
.scr-tab svg { width: 22px; height: 22px; }
.scr-tab.on { color: #5856D6; }

/* ---- phases map ---- */
.map { position: relative; padding: 8px 0 4px; }
.map-node { display: flex; align-items: center; gap: 13px; padding: 9px 0; position: relative; }
.map-dot { width: 46px; height: 46px; border-radius: 16px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #fff; box-shadow: 0 4px 12px #5856d633; }
.map-dot.done { background: linear-gradient(135deg,#34C759,#30B0C7); }
.map-dot.cur { background: linear-gradient(135deg,#0A84FF,#5856D6,#AF52DE); box-shadow: 0 6px 18px #5856d655; }
.map-dot.lock { background: #E5E5EA; color: #b0b0b5; box-shadow: none; }
.map-line { position: absolute; left: 22px; top: 46px; bottom: -9px; width: 3px; background: #E5E5EA; z-index: 0; }
.map-line.done { background: linear-gradient(#34C759,#30B0C7); }

/* ---- pronunciation ---- */
.mic { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg,#0A84FF,#5856D6,#AF52DE); display: grid; place-items: center; color: #fff; margin: 0 auto; box-shadow: 0 14px 36px #5856d655; position: relative; }
.mic::before, .mic::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #5856d655; animation: pulse 2.4s ease-out infinite; }
.mic::after { animation-delay: 1.2s; }
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
.wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 34px; }
.wave i { width: 3px; border-radius: 99px; background: #5856D6; }
.score-ring { --p: 92; width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(#34C759 calc(var(--p)*1%), #E5E5EA 0); display: grid; place-items: center; margin: 0 auto; }
.score-ring::after { content: ''; position: absolute; width: 96px; height: 96px; border-radius: 50%; background: #fff; }
.score-ring b { position: relative; z-index: 2; font-size: 30px; font-weight: 800; }

/* ---- league ---- */
.lg-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 14px; background: #fff; margin-top: 7px; box-shadow: 0 2px 8px #1c1c2e08; }
.lg-row.me { background: linear-gradient(120deg,#0A84FF14,#5856D614,#AF52DE14); box-shadow: inset 0 0 0 1.5px #5856D6; }
.lg-rank { width: 22px; text-align: center; font-weight: 800; color: #8a8a8f; }
.lg-rank.top { color: #FF9500; }
.lg-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; }
.lg-xp { margin-left: auto; font-weight: 800; color: #5856D6; font-size: 13px; }
.lg-zone { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #34C759; text-align: center; margin: 9px 0 2px; }
.lg-zone.demote { color: #FF3B30; }

/* word flashcard */
.fc-word { font-family: var(--display); font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.fc-phon { color: #8a8a8f; font-size: 15px; font-weight: 500; }
.accent { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-radius: 13px; background: #fff; box-shadow: 0 2px 8px #1c1c2e0a; margin-top: 8px; }
.accent .flag { font-size: 18px; }
.accent .play { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: #5856D614; color: #5856D6; display: grid; place-items: center; }

/* daily challenge banner */
.dc { background: linear-gradient(120deg,#FF9500,#FF375F); color: #fff; border-radius: 18px; padding: 15px; margin-top: 13px; box-shadow: 0 8px 20px #ff375f33; }

/* dark variant for app screen (used in some carousel slides) */
.scr.dark { background: #0E0E11; color: #F5F5F7; }
.scr.dark .a-card { background: #1C1C1E; box-shadow: none; }
.scr.dark .a-sub, .scr.dark .a-label, .scr.dark .sectionlabel { color: #98989f; }
.scr.dark .a-title, .scr.dark .fc-word { color: #F5F5F7; }
.scr.dark .scr-tabs { background: #1c1c1ee6; border-color: #ffffff14; }
.scr.dark .bar, .scr.dark .ring { --c: #5856D6; }
.scr.dark .accent { background: #1C1C1E; }
.scr.dark .lg-row { background: #1C1C1E; }
.scr.dark .map-dot.lock, .scr.dark .bar { background: #2C2C2E; }
.scr.dark .ring::after, .scr.dark .score-ring::after { background: #1C1C1E; }
.scr.dark .ring span, .scr.dark .score-ring b { color: #F5F5F7; }

/* carousel */
.carousel { position: relative; display: flex; align-items: center; justify-content: center; min-height: 700px; perspective: 1600px; }
.car-track { position: relative; width: 300px; height: 652px; }
.car-track > * { position: absolute; inset: 0; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .55s; }
.car-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; }
.car-nav.prev { left: 4%; } .car-nav.next { right: 4%; }
.car-dots { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.car-dot { width: 8px; height: 8px; border-radius: 99px; border: none; background: var(--line-2); cursor: pointer; transition: .25s; }
.car-dot.active { width: 26px; background: var(--grad); }