/* Jerry's English, part 2: XP, levels, streak, modals, lessons and exercises */
.lvbadge { position: relative; width: var(--s, 54px); height: var(--s, 54px); flex: none; display: inline-grid; place-items: center }
.lvbadge svg { position: absolute; inset: 0; width: 100%; height: 100% }
.lvbadge b { position: relative; color: #fff; font-stretch: 125%; font-weight: 900; font-size: calc(var(--s, 54px) * .36); font-variant-numeric: tabular-nums }
.xpcard { display: flex; gap: 16px; align-items: center }
.xprow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 2px 0 8px }
.xpnum { font-stretch: 118%; font-weight: 900; font-size: 26px; font-variant-numeric: tabular-nums }
.stk-card { display: flex; flex-direction: column; gap: 12px }
.bigflame { width: 52px; height: 52px; border-radius: 16px; background: var(--card-2); display: grid; place-items: center; filter: grayscale(1); opacity: .55; flex: none }
.bigflame.lit { filter: none; opacity: 1; background: var(--or-soft) }
.bigflame svg { width: 30px; height: 34px; transform-origin: 50% 90%; animation: flick .9s ease-in-out infinite alternate }
.sdots { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px }
.sdot { display: flex; flex-direction: column; align-items: center; gap: 4px }
.sdot i { width: 100%; max-width: 40px; aspect-ratio: 1; border-radius: 12px; background: var(--card-2); border: 1.5px solid var(--line); display: grid; place-items: center; font-style: normal; color: #5ac8fa }
.sdot.on i { background: var(--or); border-color: var(--or) }
.sdot.frz i { background: rgba(90, 200, 250, .15); border-color: #5ac8fa }
.sdot small { font-size: 11px; color: var(--muted); font-weight: 700 }
.xpwin { font-family: var(--fun); font-size: 26px; color: #ffe14d; font-weight: 700; min-height: 34px }
.xpwin .xpnum { font-size: 34px; color: #ffe14d }
.chip.sm { font-size: 12px; padding: 4px 10px }
.qmark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; display: inline-grid; place-items: center; font-size: 12px; font-weight: 900 }

/* modals: level up, homework finished, tour */
.modal-back { position: fixed; inset: 0; z-index: 70; background: rgba(17, 14, 24, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; animation: fadein .25s var(--ease-out) both }
.modal { background: var(--bg); color: var(--fg); border-radius: 30px; padding: 30px 26px; width: min(100%, 440px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); animation: popin .45s var(--ease-out) both }
.modal.levelup h1 { font-size: 36px }
.tourpic { width: 100%; max-width: 280px; aspect-ratio: 200 / 110; background: var(--or-soft); border-radius: 22px; display: grid; place-items: center; padding: 10px }
.tourpic svg { width: 100%; height: 100% }
.dots { display: flex; gap: 6px }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line) }
.dots i.on { background: var(--or); width: 22px; border-radius: 6px }
@keyframes fadein { from { opacity: 0 } }
@keyframes popin { from { opacity: 0; transform: translateY(16px) scale(.96) } }

/* lessons */
.ulink { color: inherit; text-decoration: none; border-bottom: 2px solid var(--or-soft) }
@media (hover: hover) and (pointer: fine) { .ulink:hover { border-color: var(--or) } }
.cando { font-size: 18px; font-weight: 600; max-width: 60ch }
.remember { background: var(--or-soft) }
.remember ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 17px }
.bookpage { margin: 0; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); max-width: 820px; width: 100%; align-self: center }
.bookpage img { display: block; width: 100%; height: auto }
.reading p { font-size: 18px; line-height: 1.65; max-width: 68ch }
.reading p.pre { white-space: pre-line }
.gloss { display: flex; flex-wrap: wrap; gap: 8px 16px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 14px }
.sec { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 80px }
.sec.dimmed { opacity: .55 }
.excard { background: var(--card); border-radius: 24px; padding: clamp(16px, 2.4vw, 26px); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; min-width: 0; scroll-margin-top: 80px }
.exhead { display: flex; gap: 12px; align-items: flex-start }
.exn { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; font-weight: 900; font-stretch: 112%; font-size: 14px }
.exi { flex: 1; font-weight: 800; font-size: 17px; padding-top: 4px }
.wbox { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 2px dashed var(--line); border-radius: 16px }
.wbox span { background: var(--card-2); border-radius: 10px; padding: 4px 10px; font-weight: 700 }
.passage { background: var(--card-2); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; line-height: 1.8; font-size: 17px }
.dlg { display: flex; flex-direction: column; gap: 10px; line-height: 1.9; font-size: 17px }
.exex { color: var(--muted) }
.exitems { margin: 0; padding-left: 26px; display: flex; flex-direction: column; gap: 14px; line-height: 2; font-size: 17px }
.exitems li::marker { font-weight: 900; color: var(--or-d) }
.filled { color: var(--or-ink); text-decoration: underline; text-underline-offset: 3px }
.gapw { display: inline-flex; flex-direction: column; vertical-align: baseline; position: relative }
input.gap { display: inline-block; min-height: 36px; padding: 4px 8px; border-radius: 10px; font-size: 17px; text-align: center; border: 1.5px solid var(--line); background: var(--card-2); max-width: 100% }
.gapw.ok input.gap { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); font-weight: 800 }
.gapw.no input.gap { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); text-decoration: line-through }
.fix { font-style: normal; font-size: 13px; font-weight: 800; color: var(--ok); line-height: 1.2 }
.chs { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle }
.ch { border: 1.5px solid var(--line); background: var(--card-2); border-radius: 12px; min-height: 38px; padding: 2px 12px; font-weight: 700; font-size: 16px; transition: background-color .15s ease, border-color .15s ease, transform .12s var(--ease-out) }
.ch:not(:disabled):active { transform: scale(.96) }
.ch.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink) }
.chs.no .ch.on { background: var(--bad); border-color: var(--bad); color: #fff }
.chs.ok .ch.on, .ch.right { background: var(--ok); border-color: var(--ok); color: #fff }
.match-ex li, .sort-ex li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; line-height: 1.4 }
.ml { font-weight: 700; min-width: 8ch }
select.msel { width: auto; min-width: 12ch; max-width: 100%; min-height: 42px; padding: 6px 10px }
select.msel.num { min-width: 64px }
select.msel.ok { border-color: var(--ok); background: var(--ok-soft) }
select.msel.no { border-color: var(--bad); background: var(--bad-soft) }
.seq-ex li { line-height: 1.5 }
.oline { min-height: 50px; border: 2px dashed var(--line); border-radius: 14px; padding: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.oline.ok { border-color: var(--ok); background: var(--ok-soft) }
.oline.no { border-color: var(--bad); background: var(--bad-soft) }
.opool { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.chip-o { border: 0; background: var(--or-soft); color: var(--or-ink); border-radius: 10px; padding: 6px 12px; font-weight: 800; font-size: 16px; min-height: 38px; transition: transform .12s var(--ease-out) }
.chip-o:active { transform: scale(.95) }
.chip-o.on { background: var(--ink); color: var(--on-ink) }
.oend { font-weight: 900; font-size: 20px }
.extable { border-collapse: collapse; width: 100%; min-width: 480px }
.extable th { text-align: left; font-size: 13px; color: var(--muted); padding: 8px; border-bottom: 2px solid var(--line) }
.extable td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.8 }
textarea.rw { min-height: 46px; resize: none; overflow: hidden; line-height: 1.5; font-size: 17px }
textarea.rw.big { min-height: 140px; resize: vertical; overflow: auto }
textarea.rw.ok { border-color: var(--ok); background: var(--ok-soft) }
textarea.rw.no { border-color: var(--bad); background: var(--bad-soft) }
textarea.rw.ask { border-color: var(--warn); background: var(--warn-soft) }
.modelans { background: var(--card-2); border-radius: 14px; padding: 10px 14px; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; line-height: 1.5 }
details.modelans summary { cursor: pointer; font-weight: 800; color: var(--or-d) }
.exfoot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px }
.exfoot .score { font-stretch: 125%; font-weight: 900; font-size: 26px; color: var(--or); font-variant-numeric: tabular-nums; margin-right: auto }
.exfoot .score.full { color: var(--ok) }
.todo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.todo a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card-2); text-decoration: none; color: inherit; border: 1.5px solid var(--line); transition: border-color .15s ease, transform .12s var(--ease-out) }
.todo a:active { transform: scale(.98) }
@media (hover: hover) and (pointer: fine) { .todo a:hover { border-color: var(--or) } }
.block { display: block }
pre.report { white-space: pre-wrap; font-family: var(--font); font-size: 15px; line-height: 1.6; background: var(--card-2); border-radius: 16px; padding: 16px; margin: 0 }
@media (max-width: 640px) { .exitems { padding-left: 22px; font-size: 16px } .xpnum { font-size: 22px } }