/* Learn tab: the path of lessons and the lesson player (js/learn.js). Uses the colours and fonts set in style.css. */

.learnpage, .lrn-play { max-width: 560px; margin: 0 auto; }
.greek { font-family: var(--greek); font-weight: 400; }

.lrn-ico { display: inline-flex; width: 18px; height: 18px; flex: none; }
.lrn-ico svg { width: 100%; height: 100%; }
.lrn-ico.big { width: 34px; height: 34px; color: var(--sun); }
.lrn-kicker { font-size: 13px; letter-spacing: .08em; color: var(--muted); font-weight: 800; }
.lrn-round { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; background: var(--panel); border: 2px solid var(--rule); box-shadow: none; color: var(--violet); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lrn-round .lrn-ico { width: 22px; height: 22px; }
.lrn-round.light { background: rgba(255,255,255,.18); border: 0; color: #fff; }

.lrn-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.lrn-stat { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 2px solid var(--rule); border-radius: 999px; padding: 4px 12px; font-weight: 800; white-space: nowrap; }
.lrn-fire.lit { border-color: var(--orange); }

.lrn-goal { background: var(--panel); border: 2px solid var(--rule); border-radius: 16px; padding: 10px 14px; margin: 12px 0; }
.lrn-goal-txt { font-weight: 800; margin-bottom: 6px; }
.lrn-track { height: 12px; background: var(--lilac); border-radius: 999px; overflow: hidden; flex: 1; }
.lrn-track.big { height: 16px; }
.lrn-fill { height: 100%; width: 0; background: var(--teal); border-radius: 999px; transition: width .35s ease; }
.lrn-fill.sun { background: var(--sun); }
.lrn-nudge { background: var(--target); border-radius: 14px; padding: 8px 14px; font-weight: 800; }
.lrn-continue { display: flex; align-items: center; justify-content: center; min-height: 54px; box-sizing: border-box; text-align: center; margin: 14px 0 4px; }

/* the map */
.lrn-maphead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.lrn-maphead h1 { margin: 0; font: 600 30px/1.1 var(--display); }
.lrn-map { position: relative; width: 100%; aspect-ratio: 1200 / 1194; border-radius: 22px; overflow: hidden; border: 3px solid var(--rule); }
.lrn-mapart { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lrn-stop { position: absolute; display: flex; align-items: center; gap: 6px; transform: translateY(-50%); }
.lrn-stop.l { flex-direction: row-reverse; }
.lrn-dot { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font: 600 24px var(--display); flex: none;
  background: var(--panel); color: var(--faint); border: 3px solid var(--edge); box-shadow: 0 5px 0 var(--edge); text-decoration: none !important; }
.lrn-dot .lrn-ico { width: 24px; height: 24px; }
a.lrn-dot:hover { filter: brightness(1.05); }
.lrn-dot.done { background: var(--sun); color: var(--on-bright); border-color: var(--sun-edge); box-shadow: 0 5px 0 var(--sun-edge); }
.lrn-dot.here { background: var(--teal); color: #fff; border-color: var(--teal-edge); box-shadow: 0 5px 0 var(--teal-edge); animation: lrn-bob 1.6s ease-in-out infinite; }
.lrn-me { position: absolute; height: 15%; width: auto; transform: translate(-50%, calc(-100% - 20px)); pointer-events: none; z-index: 1; filter: drop-shadow(0 3px 2px rgba(0,0,0,.25)); transition: left 1.8s ease-in-out, top 1.8s ease-in-out; animation: lrn-step 1.2s ease-in-out infinite; }
.lrn-me.side { transform: translate(calc(-100% - 34px), -60%); }
.lrn-me.walking { animation-duration: .35s; }
.lrn-me.flip { transform: translate(-50%, calc(-100% - 20px)) scaleX(-1); }
@keyframes lrn-step { 0%, 100% { margin-top: 0; } 50% { margin-top: -4px; } }
.lrn-stoplabel { background: #fff; color: #2b2457; border-radius: 10px; padding: 3px 8px; box-shadow: 0 2px 0 #dad5ff; white-space: nowrap; font-size: 14px; line-height: 1.2; }
.lrn-stopsub { font-size: 11px; color: #5e5990; }
.lrn-homer { position: absolute; right: 1%; top: 1%; width: 15%; }
.lrn-homer img { width: 100%; height: auto; }
@keyframes lrn-bob { 50% { transform: translateY(-4px); } }
.lrn-maprow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lrn-maprow .btn { display: inline-flex; align-items: center; gap: 6px; }
.lrn-foot { text-align: center; margin: 24px 0 10px; }
.lrn-source { color: var(--faint); font-size: 13px; font-weight: 600; margin: 10px 0 0; }

/* the story intro */
.lrn-intro { background: #1d4f7a; color: #fff; border-radius: 22px; overflow: hidden; }
.lrn-introart svg { display: block; width: 100%; height: auto; max-height: 300px; }
.lrn-introart.pic { overflow: hidden; aspect-ratio: 1 / 1; max-height: 520px; }
.lrn-introart.pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; animation: lrn-dawn 24s ease-in-out infinite alternate; }
@keyframes lrn-dawn { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .lrn-introart.pic img { animation: none; } }
.lrn-introtxt { padding: 18px 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.lrn-introtxt .lrn-kicker { color: var(--sun); }
.lrn-introtxt h1 { margin: 0; font: 600 32px/1.1 var(--display); }
.lrn-introtxt p { margin: 0; font-size: 17px; line-height: 1.5; color: #e6f2fb; }
.lrn-introtxt .lrn-source { color: #b9d7ec; text-align: center; }
button.lrn-sail { background: var(--sun); color: var(--on-bright); box-shadow: 0 4px 0 var(--sun-edge); width: 100%; }

/* a character speaking */
.lrn-says { display: flex; gap: 10px; align-items: flex-end; }
.lrn-saysface { width: 64px; flex: none; }
.lrn-saysface img, .lrn-arriveface img { width: 100%; height: auto; }
.lrn-personpic { width: 96px; height: 120px; object-fit: contain; object-position: bottom; flex: none; animation: lrn-personin .5s ease-out both; }
@keyframes lrn-personin { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lrn-personpic { animation: none; } }
.lrn-bubble-say { background: var(--panel); color: var(--ink); border: 2px solid var(--rule); border-radius: 16px 16px 16px 4px; padding: 9px 13px; font-size: 15px; line-height: 1.45; }
.lrn-says.dark .lrn-bubble-say { background: #fff; color: #2b2457; border: 0; }

/* a chapter */
.lrn-chapter { max-width: 640px; margin: 0 auto; }
.lrn-chhead { background: #2f78ad; color: #fff; border-radius: 22px; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.lrn-chhead.has-art { padding: 0 18px 18px; overflow: hidden; gap: 6px; }
.lrn-chart { margin: 0 -18px 4px; aspect-ratio: 16 / 9; background-size: 102% auto; background-position: 50% 50%; background-repeat: no-repeat; background-color: #9ccbe8; padding: 14px 18px; box-sizing: border-box; animation: lrn-zoom 30s ease-in-out infinite alternate; }
.lrn-chart .lrn-round.light { background: rgba(43,36,87,.4); }
@keyframes lrn-zoom { from { background-size: 102% auto; } to { background-size: 112% auto; } }
@media (prefers-reduced-motion: reduce) { .lrn-chart { animation: none; } }
.lrn-chtop { display: flex; align-items: center; gap: 10px; }
.lrn-chhead .lrn-kicker { color: var(--sun); }
.lrn-chhead h1 { margin: 0; font: 600 28px/1.1 var(--display); }
.lrn-chprog { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.lrn-chprog .lrn-track { background: rgba(255,255,255,.25); }
.lrn-chapter > .lrn-says { margin: 14px 0 6px; }
.lrn-tasks { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lrn-task { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 2px solid var(--rule); border-radius: 14px; padding: 8px 12px; color: var(--ink); text-decoration: none !important; }
.lrn-task.done { background: #fffbea; border-color: #ffe08a; color: #2b2457; }
.lrn-task.here { border: 3px solid var(--teal); box-shadow: 0 4px 0 var(--teal-edge); padding: 10px 12px; }
.lrn-task.locked { color: var(--faint); }
.lrn-tasknum { width: 36px; height: 36px; border-radius: 50%; background: var(--lilac); display: grid; place-items: center; font: 600 17px var(--display); flex: none; }
.lrn-task.done .lrn-tasknum { background: var(--sun); color: var(--on-bright); }
.lrn-task.here .lrn-tasknum { background: var(--teal); color: #fff; }
.lrn-tasktxt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lrn-tasktitle { font-size: 16px; }
.lrn-tasksub { font-size: 13px; color: var(--muted); font-weight: 600; }
.lrn-task.done .lrn-tasksub { color: #5e5990; }
.lrn-start { background: var(--teal); color: #fff; border-radius: 10px; padding: 6px 10px; font-size: 13px; }
.lrn-reward { display: flex; align-items: center; gap: 12px; background: #2b2457; color: #fff; border-radius: 16px; padding: 12px 14px; margin: 14px 0; text-decoration: none !important; }
.lrn-rewardsub { font-size: 13px; color: #c8c3f2; font-weight: 600; }

/* Greek life scrolls */
.lrn-scroll { background: #fff6e6; color: #2b2457; border: 3px solid #e0b46a; border-radius: 18px; padding: 14px 16px; box-shadow: 0 5px 0 #e0b46a; margin: 10px 0 16px; }
.lrn-scroll.locked { background: var(--panel); color: var(--faint); border: 2px dashed var(--edge); box-shadow: none; display: flex; align-items: center; gap: 10px; }
.lrn-scrolltop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lrn-scroll h2 { margin: 0; font: 600 21px var(--display); }
.lrn-scrolln { font-size: 12px; color: #8a5a2b; }
.lrn-scrollword { margin: 6px 0; font-size: 14px; color: #5e5990; }
.lrn-scrollword .greek { font-size: 24px; color: #2b2457; }
.lrn-scroll ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.45; font-weight: 600; }
.lrn-scroll li + li { margin-top: 4px; }

/* the end of a chapter */
.lrn-arrive { max-width: 560px; margin: 0 auto; }
.lrn-arrivetop { background: var(--violet); color: #fff; border-radius: 22px; padding: 20px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 14px; }
.lrn-arrivetop .lrn-kicker { color: var(--sun); }
.lrn-arrivetop h1 { margin: 0; font: 600 30px/1.1 var(--display); }
.lrn-arrivetop p { margin: 0; color: #e6e3ff; line-height: 1.45; }
.lrn-arriveface { width: 96px; }
.lrn-arrivetop.has-art { padding-top: 0; overflow: hidden; }
.lrn-arriveart { display: block; width: calc(100% + 36px); margin: 0 -18px; aspect-ratio: 16 / 9; object-fit: cover; animation: lrn-arrivein .9s ease-out both; }
.lrn-arrivetop.has-art .lrn-arriveface { margin-top: -52px; position: relative; }
@keyframes lrn-arrivein { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lrn-arriveart { animation: none; } }
.lrn-kicker.dark { color: var(--muted); }

/* the task card at the start of a lesson */
.lrn-story h2 { margin: 0; font: 600 26px var(--display); }
.lrn-storysub { margin: 0; color: var(--muted); }

/* the player */
.lrn-top { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.lrn-quit { font-size: 22px; color: var(--muted); text-decoration: none !important; padding: 0 4px; }
.lrn-stage { min-height: 46vh; }
.lrn-ex { display: flex; flex-direction: column; gap: 14px; }
.lrn-q { font: 600 22px var(--display); margin: 0; }
.lrn-retry { color: var(--orange-edge); margin: 0; }
.lrn-show { font-size: 22px; background: var(--panel); border: 2px solid var(--rule); border-radius: 16px; padding: 14px 16px; }
.lrn-show.big { font-size: 40px; text-align: center; }
.lrn-en { color: var(--muted); font-size: 18px; margin: 0; }
.lrn-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lrn-opt { background: var(--panel); color: var(--ink); border: 2px solid var(--rule); box-shadow: 0 4px 0 var(--edge); border-radius: 14px; min-height: 54px; padding: 8px 12px; font-size: 18px; }
.lrn-opt.greek { font-size: 24px; }
.lrn-opt.sel { border-color: var(--violet); background: var(--lilac); box-shadow: 0 4px 0 var(--violet); }
.lrn-opt.matched { opacity: .35; }
.lrn-opt.shake { border-color: var(--red); animation: lrn-shake .35s; }
@keyframes lrn-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.lrn-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lrn-col { display: flex; flex-direction: column; gap: 10px; }
.lrn-gap { display: inline-block; min-width: 80px; border-bottom: 3px solid var(--violet); text-align: center; }
.lrn-gap.filled { color: var(--violet); }

.lrn-answer { min-height: 62px; border-bottom: 2px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0; align-content: flex-start; }
.lrn-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-top: 6px; }
.lrn-tile { background: var(--panel); color: var(--ink); border: 2px solid var(--rule); box-shadow: 0 3px 0 var(--edge); border-radius: 12px; min-height: 44px; padding: 4px 12px; font-size: 18px; }
.greek .lrn-tile { font-family: var(--greek); font-weight: 400; font-size: 22px; }

.lrn-tip { flex-direction: row; align-items: flex-start; }
.lrn-tipmascot { width: 92px; flex: none; }
.lrn-tipmascot img, .lrn-fbmascot img { width: 100%; height: auto; }
.lrn-tipcard { background: var(--panel); border: 2px solid var(--rule); border-radius: 18px; padding: 14px 18px; flex: 1; }
.lrn-tipcard h2 { margin: 0 0 6px; font: 600 22px var(--display); }
.lrn-tipcard p { margin: 0 0 8px; font-weight: 600; }
.lrn-table { border-collapse: collapse; margin-top: 4px; }
.lrn-table td { padding: 3px 14px 3px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.lrn-table td.greek { font-size: 22px; white-space: nowrap; }

.lrn-iliad { font-size: 28px; line-height: 1.6; }
.lrn-word { background: none; box-shadow: none; color: var(--ink); padding: 0 2px; min-height: 0; font: inherit; border-radius: 6px; border-bottom: 2px dotted var(--faint); }
.lrn-word.known { color: var(--violet); border-bottom-color: var(--violet); }
.lrn-word.sel { background: var(--hl); }
.lrn-bubble { background: var(--lilac); border-radius: 14px; padding: 10px 14px; min-height: 44px; font-weight: 700; }
.lrn-bubble .greek { font-size: 22px; }
.lrn-lemma { color: var(--muted); }

.lrn-footbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; margin: 20px -16px 0; padding: 14px 16px; background: var(--bg); border-top: 2px solid var(--rule); }
.lrn-footbar > button { margin-left: auto; }
.lrn-footbar.good { background: #d7f8ec; border-color: var(--teal); color: #0c5e50; }
.lrn-footbar.bad { background: #ffe1e2; border-color: var(--red); color: #8a1f24; }
@media (prefers-color-scheme: dark) {
  .lrn-footbar.good { background: #0f4d43; color: #d7f8ec; }
  .lrn-footbar.bad { background: #5c1d22; color: #ffe1e2; }
}
.lrn-check { width: 100%; }
.lrn-fbmascot { width: 64px; flex: none; }
.lrn-fb { flex: 1; }
.lrn-fb strong { font: 600 22px var(--display); }
.lrn-fbans, .lrn-fbwhy { font-weight: 700; }
.lrn-fbans { font-family: var(--greek), var(--ui); font-size: 18px; }

.lrn-done .mascot { width: 140px; }
.lrn-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 6px 0 12px; }
.lrn-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 2px solid var(--rule); border-radius: 999px; padding: 6px 14px; font-weight: 800; color: var(--ink); }
.lrn-chip.xp { border-color: var(--sun-edge); }
.lrn-chip.fire { border-color: var(--orange); }
.lrn-donebtns { margin-top: 10px; }

@media (max-width: 520px) {
  .lrn-opts { grid-template-columns: 1fr; }
  .lrn-tip { flex-direction: column; align-items: center; }
  .lrn-dot { width: 48px; height: 48px; font-size: 20px; }
  .lrn-stoplabel { font-size: 12px; }
  .lrn-show.big { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .lrn-dot.here, .lrn-opt.shake, .lrn-me { animation: none; transition: none; }
  .lrn-fill { transition: none; }
}

.lrn-type { width: 100%; box-sizing: border-box; margin-top: 14px; padding: 14px 16px; font: 700 18px/1.3 inherit; font-family: inherit; color: var(--ink, inherit); background: #fff; border: 2px solid #dad5ff; border-radius: 14px; box-shadow: 0 4px 0 #dad5ff; }
.lrn-type:focus { outline: none; border-color: #5b4df0; box-shadow: 0 4px 0 #5b4df0; }
.lrn-type:disabled { opacity: .8; }

.lrn-added { margin: 4px 0 0; color: var(--muted); font-weight: 700; }

/* TEST ONLY: skip buttons in lessons. Delete before going live. */
.lrn-testskip { flex: none; font: 700 13px/1 var(--body, inherit); padding: 6px 9px; border-radius: 999px; border: 2px dashed #e5484d; background: #fff; color: #b4232a; cursor: pointer; }

/* Test mode (local and staging only): the jump-to-any-lesson box on the map */
.lrn-testjump { margin: 14px 0; padding: 12px; border: 2px dashed #e5484d; border-radius: 14px; background: #fff7f7; display: grid; gap: 10px; }
.lrn-testtag { font: 800 12px/1.2 var(--body, inherit); letter-spacing: .04em; color: #b4232a; }
.lrn-testjump select { width: 100%; font-size: 16px; padding: 8px; border-radius: 10px; }
.lrn-testlinks { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- curriculum upgrade 2026-10-23: tap tasks, warm-ups, Greek keyboard, checkpoints, grammar shelf */
.lrn-warm { color: var(--teal-edge, #0c7a66); }
.lrn-testout { background: var(--sun); color: var(--on-bright); border-radius: 10px; padding: 6px 10px; font-size: 13px; font-weight: 800; }
.lrn-type.greek { font-family: var(--greek); font-weight: 400; font-size: 24px; }
.lrn-kbd { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.lrn-kbrow { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.lrn-key { min-width: 36px; min-height: 42px; padding: 2px 8px; border-radius: 10px; background: var(--panel); color: var(--ink); border: 2px solid var(--rule); box-shadow: 0 3px 0 var(--edge); font-size: 20px; }
.lrn-key.greek { font-family: var(--greek); font-weight: 400; font-size: 22px; }
.lrn-key.mark { background: var(--lilac); border-color: var(--violet); color: var(--violet); }
.lrn-key.wide { min-width: 72px; font-size: 15px; font-weight: 800; }
.lrn-key:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }

/* the grammar shelf: a row of books per chapter, in the scroll-case colours */
.lrn-shelfpage { max-width: 640px; }
.lrn-shelfintro { color: var(--muted); font-weight: 700; margin: 4px 0 10px; }
.lrn-shelfsearch { width: 100%; box-sizing: border-box; padding: 12px 14px; font: 700 16px/1.3 inherit; color: var(--ink); background: var(--panel); border: 2px solid var(--rule); border-radius: 14px; margin-bottom: 14px; }
.lrn-shelfsearch:focus { outline: none; border-color: var(--violet); }
.lrn-shelf { margin: 0 0 18px; }
.lrn-shelfhead { margin: 0 0 8px; font: 600 20px var(--display); color: var(--ink); }
.lrn-shelfrow { display: flex; flex-direction: column; gap: 8px; padding: 0 0 12px; border-bottom: 10px solid #c58b4e; border-radius: 0 0 6px 6px; box-shadow: 0 6px 0 #8a5a2b; }
.lrn-book { background: #fff6e6; color: #2b2457; border: 3px solid #e0b46a; border-left: 12px solid #e0b46a; border-radius: 12px; box-shadow: 0 4px 0 #e0b46a; }
.lrn-book.locked { background: var(--panel); color: var(--faint); border-color: var(--edge); box-shadow: none; }
.lrn-book summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-weight: 800; }
.lrn-book summary::-webkit-details-marker { display: none; }
.lrn-spine { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.lrn-spinenum { width: 30px; height: 30px; border-radius: 50%; background: #e0b46a; color: #2b2457; display: grid; place-items: center; font: 600 14px var(--display); flex: none; }
.lrn-book.locked .lrn-spinenum { background: var(--lilac); color: var(--faint); }
.lrn-spinetitle { font: 600 18px var(--display); }
.lrn-spineok { color: #0c7a66; } .lrn-spinelock { color: var(--faint); }
.lrn-bookbody { padding: 0 14px 14px; }
.lrn-bookbody h3 { margin: 10px 0 4px; font: 600 18px var(--display); }
.lrn-bookbody p { margin: 0 0 6px; font-weight: 600; font-size: 15px; line-height: 1.45; }
.lrn-bookbody .lrn-table { margin-bottom: 10px; }
.lrn-bookbody .lrn-table td { border-bottom-color: #e0b46a; }
.lrn-lockednote { color: var(--muted); }

/* ------------------------------------------------------------------ streak and XP outside Learn (streakui.js) */
/* the header badge takes the Account button's place for someone signed in; the Account link moves into its panel and the menu */
#top.xp-on .bar .signbtn { display: none; }
.xpbadge {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 14px; border-radius: 16px; border: 0;
  background: #4a3cdb; color: #fff; box-shadow: 0 4px 0 #3226a8; font: 700 17px var(--display); white-space: nowrap; cursor: pointer;
}
.xpbadge .lrn-ico { width: 22px; height: 22px; filter: grayscale(.7) opacity(.75); }
.xpbadge.lit .lrn-ico { filter: none; }
.xpbadge .xb-xp { font-weight: 600; opacity: .85; font-size: 15px; }
.xpbadge:active { transform: translateY(3px); box-shadow: 0 1px 0 #3226a8; }
.xppanel {
  position: absolute; right: max(20px, calc((100% - 1100px) / 2 + 20px)); top: calc(100% + 8px); width: min(340px, calc(100% - 32px));
  background: var(--panel); color: var(--ink); border: 2px solid var(--rule); border-radius: 20px; box-shadow: 0 6px 0 var(--edge);
  padding: 14px 16px 16px; z-index: 40;
}
.xp-head { display: flex; align-items: center; gap: 8px; font: 700 21px var(--display); }
.xp-head .lrn-ico { width: 26px; height: 26px; }
.xp-line { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.xppanel .lrn-goal { margin: 10px 0 8px; }
.xppanel .lrn-stats { margin: 0 0 12px; }
.xp-next { display: flex; width: 100%; }
.xp-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 15px; }
@media (max-width: 640px) {
  .xpbadge { padding: 0 10px; }
  .xpbadge .xb-xp { display: none; }
  .xppanel { right: 16px; }
}
/* the Review page and finish screen */
.revgame { margin: 4px 0 14px; }
.revgame .lrn-stats { margin-bottom: 6px; }
.revgame .xp-line { margin: 0 0 4px; }
.revbar .xpgain { font-weight: 800; color: var(--teal-edge); }
.revdone-xp { font-weight: 800; }
.revdone-goal { max-width: 360px; margin: 10px auto; text-align: left; }
/* the Progress page */
.xpdays { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end; height: 120px; }
.xpdays li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 3px; min-width: 0; }
.xpdays .xd-bar { width: 100%; background: var(--violet); border-radius: 6px 6px 2px 2px; min-height: 2px; }
.xpdays .xd-bar.zero { background: var(--rule); }
.xpdays .xd-day { font-size: 11px; color: var(--muted); }
.xpdays .xd-n { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.streakset { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; }
.streakset select { min-height: 40px; }
/* the Home "Today" card */
.pu-sub { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--muted); }
.pickup.today .pu-btn { background: var(--orange); color: var(--on-bright); box-shadow: 0 3px 0 var(--orange-edge); }