/* =========================================================
   Likkle Coders — Mockup "Learning Path" screen  (v411)
   A faithful recreation of the concept-mockup track screen:
   gradient hero + 3D character, a numbered learning path with
   done / in-progress / locked states, and a Next-Up card.
   Reachable at #/path/:track. Reversible: delete link + SW entry.
   ========================================================= */
.mp-wrap{ max-width: 460px; margin: 0 auto; padding: 0 0 40px; }

.mp-topbar{ display:flex; align-items:center; justify-content:space-between; padding: 4px 4px 14px; }
.mp-back{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:#fff; box-shadow:0 3px 10px rgba(11,37,69,.14); text-decoration:none; font-size:1.2rem; color:#0B2545; border:0; cursor:pointer; }
.mp-coin{ display:inline-flex; align-items:center; gap:6px; background:#fff; border-radius:999px;
  padding:7px 14px; font-weight:800; color:#0B2545; box-shadow:0 3px 10px rgba(11,37,69,.14); }
.mp-coin b{ color:#F5A623; }

/* ---- gradient hero ---- */
.mp-hero{ position:relative; overflow:hidden; border-radius:28px; padding:22px 22px 26px; color:#fff;
  box-shadow:0 18px 40px rgba(11,37,69,.24); }
.mp-hero-eyebrow{ font-weight:900; letter-spacing:.1em; font-size:.72rem; text-transform:uppercase; opacity:.85; }
.mp-hero h1{ font-size:2rem; font-weight:900; margin:.2rem 0 .4rem; line-height:1.05; max-width:62%; }
.mp-hero p{ font-size:.95rem; opacity:.92; margin:0; max-width:60%; }
.mp-hero-char{ position:absolute; right:-6px; bottom:-8px; width:190px; height:auto;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.28)); pointer-events:none; }
.mp-hero::after{ content:""; position:absolute; right:-40px; top:-50px; width:150px; height:150px;
  border-radius:50%; background:rgba(255,255,255,.14); }

/* ---- learning path ---- */
.mp-path-h{ font-size:1.15rem; font-weight:800; color:#0B2545; margin:22px 4px 12px; }
.mp-path{ position:relative; display:flex; flex-direction:column; gap:12px; }
.mp-node{ display:flex; align-items:center; gap:14px; background:#fff; border-radius:20px; padding:14px 16px;
  box-shadow:0 6px 18px rgba(11,37,69,.09); text-decoration:none; position:relative; }
.mp-node.locked{ opacity:.6; }
.mp-num{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  font-weight:900; font-size:1.1rem; color:#fff; background:var(--mp-accent,#7C3AED); box-shadow:0 4px 10px rgba(0,0,0,.16); }
.mp-node.done .mp-num{ background:#22C55E; }
.mp-node.locked .mp-num{ background:#94A3B8; }
.mp-node-body{ flex:1 1 auto; min-width:0; }
.mp-node-body strong{ display:block; font-weight:800; color:#0B2545; font-size:1rem; line-height:1.2; }
.mp-node-status{ font-size:.8rem; font-weight:700; color:#8A97A8; margin-top:3px; }
.mp-node.done .mp-node-status{ color:#22C55E; }
.mp-check{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:#22C55E; color:#fff;
  display:grid; place-items:center; font-size:.9rem; font-weight:900; }
.mp-lock{ flex:0 0 auto; font-size:1.1rem; }
/* in-progress mini bar */
.mp-bar{ height:7px; border-radius:5px; background:#EEF1F6; overflow:hidden; margin-top:6px; }
.mp-bar > span{ display:block; height:100%; border-radius:5px; background:var(--mp-accent,#7C3AED); }
.mp-pct{ flex:0 0 auto; font-weight:800; font-size:.82rem; color:var(--mp-accent,#7C3AED); }

/* ---- Next Up card ---- */
.mp-nextup{ margin-top:20px; background:linear-gradient(135deg,#0B2545,#1b3a63); color:#fff; border-radius:24px;
  padding:18px 18px; display:flex; align-items:center; gap:14px; box-shadow:0 14px 30px rgba(11,37,69,.28); }
.mp-nextup-ico{ flex:0 0 auto; width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  font-size:1.7rem; background:rgba(255,255,255,.14); }
.mp-nextup-body{ flex:1 1 auto; min-width:0; }
.mp-nextup-tag{ font-size:.7rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
.mp-nextup-body strong{ display:block; font-weight:800; font-size:1.02rem; margin:2px 0; }
.mp-nextup-body span{ font-size:.82rem; opacity:.8; }
.mp-start{ flex:0 0 auto; background:var(--mp-accent,#7C3AED); color:#fff; border:0; cursor:pointer;
  font-weight:800; border-radius:999px; padding:11px 22px; box-shadow:0 4px 0 rgba(0,0,0,.25); text-decoration:none; }
.mp-start:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.25); }

@media (max-width:480px){
  .mp-hero h1{ font-size:1.6rem; max-width:64%; }
  .mp-hero-char{ width:150px; }
}

/* =========================================================
   CHESS ACADEMY (mockup style) — orange hero, rank card,
   big-icon action rows. Reuses .mp-* framing above.
   ========================================================= */
.ca-hero{ background:linear-gradient(135deg,#FB923C 0%,#EA580C 55%,#C2410C 100%); }
.ca-hero h1{ max-width:64%; }
.ca-hero-char{ width:170px; right:-4px; bottom:-6px; }

/* rank card */
.ca-rank{
  display:flex; flex-direction:column; gap:2px; margin-top:-18px; position:relative; z-index:2;
  background:#fff; border-radius:22px; padding:16px 20px; box-shadow:0 10px 26px rgba(11,37,69,.14);
  border:2px solid #FFE3CC;
}
.ca-rank-label{ font-size:.72rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:#8A97A8; }
.ca-rank-name{ font-size:1.3rem; font-weight:900; color:#0B2545; line-height:1.1; }
.ca-rank-stars{ font-size:1.15rem; color:#F59E0B; letter-spacing:2px; }
.ca-rank-stars .dim{ color:#E2E6EC; }
.ca-rank-meta{ font-size:.8rem; font-weight:700; color:#8A97A8; margin-top:2px; }

/* big-icon action rows */
.ca-rows{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.ca-row{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background:#fff; border-radius:20px; padding:14px 16px;
  border-left:6px solid var(--c,#7C3AED);
  box-shadow:0 6px 18px rgba(11,37,69,.09);
  transition:transform .15s ease, box-shadow .15s ease;
}
.ca-row:hover{ transform:translateY(-3px); box-shadow:0 14px 28px color-mix(in oklab, var(--c,#7C3AED) 26%, transparent); }
.ca-row-ico{
  flex:0 0 auto; width:58px; height:58px; border-radius:18px; display:grid; place-items:center;
  font-size:2rem; line-height:1;
  background:color-mix(in oklab, var(--c,#7C3AED) 15%, #fff);
  box-shadow:inset 0 0 0 2px color-mix(in oklab, var(--c,#7C3AED) 30%, #fff);
}
.ca-row-ico .lc-e3d{ width:1.35em; height:1.35em; }   /* BIG 3D icons */
.ca-row-body{ flex:1 1 auto; min-width:0; }
.ca-row-body strong{ display:block; font-weight:800; color:#0B2545; font-size:1.05rem; line-height:1.2; }
.ca-row-body span{ font-size:.84rem; color:#8A97A8; font-weight:600; }
.ca-row-go{ flex:0 0 auto; font-size:1.6rem; color:var(--c,#7C3AED); font-weight:900; line-height:1; }

@media (max-width:480px){
  .ca-hero h1{ max-width:66%; font-size:1.5rem; }
  .ca-hero-char{ width:132px; }
  .ca-row-ico{ width:52px; height:52px; font-size:1.7rem; }
}
@media (prefers-reduced-motion:reduce){ .ca-row{ transition:none; } .ca-row:hover{ transform:none; } }

/* =========================================================
   HUB SCREENS — Games / Rewards / Profile / PEP (mockup style)
   ========================================================= */
.hub-hero--games   { background:linear-gradient(135deg,#F472B6 0%,#DB2777 55%,#9D174D 100%); }
.hub-hero--rewards { background:linear-gradient(135deg,#FBBF24 0%,#F59E0B 55%,#B45309 100%); }
.hub-hero--profile { background:linear-gradient(135deg,#2DD4BF 0%,#0D9488 55%,#115E59 100%); }
.hub-hero--pep     { background:linear-gradient(135deg,#60A5FA 0%,#2563EB 55%,#1E3A8A 100%); }
.hub-hero h1{ max-width:66%; }
.hub-hero-emoji{
  position:absolute; right:16px; bottom:10px; font-size:5.2rem; line-height:1;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.3)); pointer-events:none;
}
.hub-hero-emoji .lc-e3d{ width:1em; height:1em; }

/* badge grid (Rewards) */
.hub-badges{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.hub-badge{
  background:#fff; border-radius:18px; padding:12px 6px; text-align:center;
  box-shadow:0 5px 14px rgba(11,37,69,.09); opacity:.45; filter:grayscale(1);
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.hub-badge.got{ opacity:1; filter:none; box-shadow:0 8px 20px rgba(245,158,11,.26); }
.hub-badge-ico{ font-size:1.9rem; line-height:1; }
.hub-badge-ico .lc-e3d{ width:1em; height:1em; }
.hub-badge-t{ font-size:.68rem; font-weight:800; color:#0B2545; line-height:1.15; }

/* stat tiles (Profile) */
.hub-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:-18px; position:relative; z-index:2; }
.hub-stat{
  background:#fff; border-radius:20px; padding:16px; text-align:center;
  box-shadow:0 8px 22px rgba(11,37,69,.12);
}
.hub-stat strong{ display:block; font-size:1.9rem; font-weight:900; color:#0D9488; line-height:1; }
.hub-stat span{ font-size:.78rem; font-weight:700; color:#8A97A8; }

/* subject grid (PEP) */
.hub-subjects{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.hub-subject{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none;
  background:#fff; border-radius:20px; padding:18px 10px;
  border-bottom:5px solid var(--c,#2563EB); box-shadow:0 6px 18px rgba(11,37,69,.09);
  font-weight:800; color:#0B2545; font-size:.92rem; transition:transform .15s ease;
}
.hub-subject:hover{ transform:translateY(-3px); }
.hub-subject-ico{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:1.8rem;
  background:color-mix(in oklab, var(--c,#2563EB) 15%, #fff);
}
.hub-subject-ico .lc-e3d{ width:1.25em; height:1.25em; }

@media (max-width:480px){
  .hub-hero h1{ max-width:68%; font-size:1.5rem; }
  .hub-hero-emoji{ font-size:4rem; }
  .hub-badges{ grid-template-columns:repeat(3,1fr); }
}
@media (prefers-reduced-motion:reduce){ .hub-subject{ transition:none; } .hub-subject:hover{ transform:none; } }