/* The Challenge Path (docs/challenge-path.md): the path page, the level result, the strip on a
   part's game page and the hand-over card between parts. Builds on play.css and site.css tokens. */

.cp { --cp-a: #1b4d2e; --cp-b: #14532d; --cp-soft: #e4efe7; --cp-gold: #e8b64c; }
.cp--kids { --cp-a: #6d28d9; --cp-b: #4c1d95; --cp-soft: #ede9fe; --cp-gold: #f59e0b; }

/* hero */
.cphero { position: relative; overflow: hidden; margin-top: 10px; padding: 26px 22px 22px; border-radius: 22px; color: #fff;
    background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.14), transparent 40%), linear-gradient(135deg, var(--cp-a), var(--cp-b)); display: grid; gap: 10px; }
.cphero__flag { position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%;
    background: conic-gradient(#1f7a45 0 33%, #fff 0 66%, #ce2b37 0); opacity: .16; }
.cphero__t { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 6vw, 44px); margin: 0; position: relative; }
.cphero__p { margin: 0; max-width: 640px; color: rgba(255,255,255,.86); position: relative; }
.cphero__score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; position: relative; }
.cphero__lbl { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.cphero__score b { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; color: var(--cp-gold); font-variant-numeric: tabular-nums; }
.cphero__of { color: rgba(255,255,255,.75); }
.cphero__rank { justify-self: start; position: relative; color: #fff; font-weight: 700; background: rgba(255,255,255,.14); border-radius: 999px; padding: 6px 14px; }
.cphero__rank:hover { color: #fff; background: rgba(255,255,255,.22); }

/* parts */
.cpparts { margin-top: 16px; }
.cpparts__list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: part; }
.cpparts__list li { counter-increment: part; display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 14px 4px 4px; font-weight: 700; }
.cpparts__ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cp-soft); color: var(--cp-a); font-size: 13px; font-weight: 900; }

/* the 10 levels: a winding trail */
.cplevels { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; position: relative; }
.cplevels::before { content: ""; position: absolute; left: 31px; top: 20px; bottom: 20px; border-left: 4px dashed var(--line-strong); }
.cplevel { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 12px 14px 12px 0; }
.cplevel__n { justify-self: center; position: relative; z-index: 1; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 20px;
    background: #fff; color: var(--cp-a); border: 3px solid var(--cp-a); box-shadow: 0 4px 0 var(--cp-b); }
.cplevel.is-locked { background: #faf9f6; }
.cplevel.is-locked .cplevel__n { color: var(--ink-muted); border-color: var(--line-strong); box-shadow: 0 4px 0 var(--line-strong); font-size: 18px; }
.cplevel.is-passed .cplevel__n { background: var(--cp-a); color: #fff; }
.cplevel.is-next { border-color: var(--cp-a); box-shadow: 0 0 0 3px var(--cp-soft); }
.cplevel.is-next .cplevel__n { animation: cppulse 1.6s ease-in-out infinite; }
.cplevel__t { font-weight: 800; font-size: 17px; }
.cplevel__max { font-weight: 600; color: var(--ink-muted); font-size: 14px; }
.cplevel__best { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-soft); }
.cplevel__stars i { font-style: normal; color: var(--line-strong); }
.cplevel__stars i.is-on { color: #e8b64c; }
.cplevel__note { font-size: 14px; color: var(--ink-muted); }
.cplevel__act form { margin: 0; }
@media (max-width: 560px) {
    .cplevel { grid-template-columns: 58px minmax(0, 1fr); padding-bottom: 14px; }
    .cplevels::before { left: 27px; }
    .cplevel__act { grid-column: 2; }
}

.cphow { margin-top: 26px; background: var(--cp-soft); border-radius: 18px; padding: 16px 18px; }
.cphow h2 { font-size: 20px; margin: 0 0 6px; }
.cphow ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.cphow p { margin: 10px 0 0; }

/* result */
.cpres { margin-top: 12px; max-width: 720px; }
.cpres .gres__score small { font-family: var(--sans); font-size: 20px; color: var(--ink-muted); }
.cpres__parts { margin-top: 16px; text-align: left; }
.cpres__parts ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.cpres__parts li { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(60px, 140px) 110px; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: #f8f7f3; font-variant-numeric: tabular-nums; }
.cpres__game { font-weight: 700; }
.cpres__right { font-weight: 800; text-align: right; }
.cpres__bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.cpres__bar i { display: block; height: 100%; background: var(--cp-a, #1b4d2e); }
.cpres__pts { text-align: right; color: var(--ink-soft); font-size: 14px; }
.cpres .gres__actions form { margin: 0; }
@media (max-width: 560px) { .cpres__parts li { grid-template-columns: minmax(0, 1fr) 46px 90px; } .cpres__bar { display: none; } }

/* the strip on a part's game page */
.cpstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: #10261a; color: #f5efe0; }
.cpstrip__lvl { color: #e8b64c; font-weight: 900; }
.cpstrip__lvl:hover { color: #fff; }
.cpstrip__part b { color: #fff; }
.cpstrip__dots { display: flex; gap: 4px; margin-left: auto; }
.cpstrip__dots i { width: 22px; height: 6px; border-radius: 3px; background: rgba(245,239,224,.25); }
.cpstrip__dots i.is-done { background: #4ade80; }
.cpstrip__dots i.is-now { background: #e8b64c; }

/* the hand-over card between parts */
.cpdone { background: #fff; border-radius: 22px; padding: 26px 20px 20px; text-align: center; box-shadow: 0 2px 0 var(--line-strong), 0 12px 30px rgba(18,53,33,.14); animation: gin .35s ease-out; display: grid; gap: 10px; }
.cpdone__h { font-family: var(--serif); font-size: clamp(26px, 6vw, 34px); }
.cpdone__s { font-size: 19px; font-weight: 700; color: var(--ink-soft); }
.cpdone__dots { display: flex; justify-content: center; gap: 6px; }
.cpdone__dots i { width: 28px; height: 8px; border-radius: 4px; background: var(--line); }
.cpdone__dots i.is-done { background: #1f9d55; }
.cpdone__next { position: relative; overflow: hidden; }
.cpdone__next::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: rgba(255,255,255,.6); transform-origin: left; animation: gdrain var(--wait, 2s) linear forwards; }

@keyframes cppulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .cp *, .cpdone, .cpdone * { animation: none !important; } }

/* ── the landing page for ads (play/landing.blade.php) ───────────────── */
.lp-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 80% 10%, rgba(232,182,76,.25), transparent 40%), linear-gradient(160deg, #1b4d2e 0%, #10261a 75%); }
.lp-hero__in { position: relative; z-index: 1; padding-block: 44px 52px; display: grid; gap: 14px; max-width: 820px; }
.lp-hero__ribbon { position: absolute; right: -80px; bottom: -40px; width: 380px; height: 120px; transform: rotate(-18deg);
    background: linear-gradient(90deg, #1f7a45 0 33.3%, #fff 33.3% 66.6%, #ce2b37 66.6%); opacity: .9; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.lp-kicker { justify-self: start; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 700; color: #e8f2ea; }
.lp-hero__t { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 8vw, 62px); line-height: 1.05; margin: 0; text-wrap: balance; }
.lp-hero__p { margin: 0; font-size: 18px; max-width: 620px; color: rgba(255,255,255,.88); }
.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.lp-cta--center { justify-content: center; }
.lp-cta__main { box-shadow: 0 6px 0 var(--red-dark); font-size: 20px; }
.lp-cta__kids { background: #7c3aed; color: #fff; border-color: #7c3aed; box-shadow: 0 6px 0 #4c1d95; }
.lp-cta__kids:hover { color: #fff; filter: brightness(1.08); }
.lp-dates { margin: 0; color: #e8b64c; font-weight: 700; }
.lp { display: grid; gap: 34px; padding-top: 30px; }
.lp h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 5vw, 34px); margin: 0 0 12px; text-wrap: balance; }
.lp-prizes__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .lp-prizes__list { grid-template-columns: minmax(0, 1fr); } }
.lp-prizes__list li { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: grid; gap: 2px; justify-items: center; text-align: center; }
.lp-medal { font-size: 40px; line-height: 1; }
.lp-prizes__list b { font-size: 18px; }
.lp-steps ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .lp-steps ol { grid-template-columns: minmax(0, 1fr); } }
.lp-steps li { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: grid; gap: 6px; align-content: start; }
.lp-steps__n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--green, #1b4d2e); color: #fff; font-weight: 900; }
.lp-steps li span:last-child { color: var(--ink-soft); }
.lp-levels ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-levels li { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 14px 4px 4px; font-weight: 700; }
.lp-levels .cpparts__ic { background: #e4efe7; color: #1b4d2e; }
.lp-board__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .lp-board__cols { grid-template-columns: minmax(0, 1fr); } }
.lp-board__col { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; }
.lp-board__col h3 { margin: 0 0 6px; font-size: 17px; }
.lp-board__col ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.lp-board__col li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; font-variant-numeric: tabular-nums; }
.lp-board__r { font-weight: 900; color: var(--ink-muted); }
.lp-board__s { font-weight: 800; color: #1b4d2e; }
.lp-faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin-bottom: 8px; }
.lp-faq summary { cursor: pointer; font-weight: 700; }
.lp-faq details p { margin: 8px 0 0; color: var(--ink-soft); }
.lp-final { text-align: center; background: #e4efe7; border-radius: 22px; padding: 26px 18px; }
.lp-final p { margin: 12px 0 0; }

/* Landing: what our students say — Facebook videos / reels (owner 2026-10-19). Swipe sideways on a phone. */
.lp-videos__row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.lp-video { flex: 0 0 min(280px, 78vw); margin: 0; scroll-snap-align: start; }
.lp-video__frame { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #10261a; box-shadow: 0 8px 24px rgba(16,38,26,.18); }
.lp-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lp-video figcaption { margin-top: 6px; font-weight: 700; font-size: 15px; text-align: center; }