:root{--blue-deep:#07155f;--blue-mid:#0f2d99;--blue-light:#1f56d8;--panel:rgba(255,255,255,.10);--border:rgba(255,255,255,.14);--text:#ffffff;--muted:rgba(255,255,255,.78);--done:#34d399;--current:#fcd34d;--locked:rgba(255,255,255,.35);--danger:#fecaca;--danger-text:#7f1d1d;--ok:#dcfce7;--ok-text:#14532d}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at top, rgba(255,255,255,.12), transparent 25%),linear-gradient(180deg, var(--blue-deep), var(--blue-mid) 55%, #123fb8 100%);min-height:100vh}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 24px;backdrop-filter:blur(10px);background:rgba(7,21,95,.72);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:14px}.brand.small h1{font-size:22px}.logo-circle{width:54px;height:54px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.10);border:1px solid var(--border);font-size:26px}.brand h1{margin:0;font-size:28px}.brand p{margin:4px 0 0;color:var(--muted);font-size:14px}
.stats{display:flex;gap:10px;flex-wrap:wrap}.stat{padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid var(--border)}.back-link{color:#fff;text-decoration:none;font-weight:700}
.page{max-width:1280px;margin:0 auto;padding:24px;display:grid;grid-template-columns:280px 1fr;gap:24px}
.side-panel,.map-shell,.unit-header,.lesson-card{background:var(--panel);border:1px solid var(--border);border-radius:28px;backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.side-panel{padding:20px;height:fit-content}.panel-block + .panel-block{margin-top:18px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:#bfe2ff}.side-panel h2,.destination h3,.unit-header h2,.lesson-card h2{margin:8px 0 0}.side-panel p,.destination p,.legend,.mini,.unit-header p,#finishSummary{color:var(--muted);line-height:1.5}
.progress-big{font-size:38px;font-weight:800;margin:10px 0}.progress-bar{height:14px;background:rgba(255,255,255,.14);border-radius:999px;overflow:hidden;margin-top:10px}.progress-fill{height:100%;width:0;background:linear-gradient(90deg, var(--done), #10b981)}
.action-btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:16px;padding:12px 16px;background:#fff;color:#08225e;font-weight:700;text-decoration:none;cursor:pointer}.action-btn.alt{background:rgba(255,255,255,.10);color:#fff;border:1px solid var(--border)}
.legend{display:flex;align-items:center;gap:10px;margin-top:10px}.dot{width:14px;height:14px;border-radius:999px;display:inline-block}.dot.done{background:var(--done)} .dot.current{background:var(--current)} .dot.locked{background:var(--locked)}
.map-shell{position:relative;min-height:2600px;overflow:visible;background:radial-gradient(circle at 30% 15%, rgba(255,255,255,.12), transparent 20%),linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}
.path-line{position:absolute;inset:0;width:100%;height:100%}.boat{position:absolute;z-index:12;font-size:42px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));transition:all .4s ease}
.unit{position:absolute;z-index:10;transform:translate(-50%,-50%);text-align:center;width:120px}.unit-btn{width:84px;height:84px;border-radius:999px;border:4px solid rgba(255,255,255,.85);margin:0 auto;display:grid;place-items:center;font-size:24px;font-weight:800;color:#08225e;box-shadow:0 12px 26px rgba(0,0,0,.22);cursor:pointer;transition:transform .18s ease;position:relative;background:#38bdf8}.unit-btn:hover{transform:translateY(-4px)}.unit-btn.done{background:var(--done)}.unit-btn.current{background:var(--current)}.unit-btn.locked{background:#8ca2c8;color:#eaf1ff;border-color:rgba(255,255,255,.3);cursor:not-allowed}.ring{position:absolute;inset:-8px;border-radius:999px;border:4px solid #ffd84d}.unit-label{margin-top:8px;font-size:14px;font-weight:700}.unit-sub{font-size:11px;color:var(--muted)}.stars{margin-top:4px;color:#ffd84d;font-size:14px;letter-spacing:1px}
.destination{position:absolute;right:20px;bottom:40px;max-width:260px;padding:18px;border-radius:24px;background:rgba(255,255,255,.10);border:1px solid var(--border);z-index:11}
.unit-page,.lesson-page{max-width:980px;margin:0 auto;padding:24px}.unit-header{padding:22px}.lesson-list{display:grid;gap:16px;margin-top:20px}
.lesson-row{background:var(--panel);border:1px solid var(--border);border-radius:22px;padding:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;box-shadow:0 18px 50px rgba(0,0,0,.18)}.lesson-left{display:flex;gap:14px;align-items:center}.lesson-num{width:56px;height:56px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.14);font-weight:800}.lesson-num.done{background:var(--done);color:#083a2f}.lesson-num.current{background:var(--current);color:#6a5200}.lesson-num.locked{background:#8ca2c8;color:#eaf1ff}
.lesson-card{padding:22px}.lesson-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.lesson-meta{display:flex;gap:10px;align-items:center}.hearts{font-size:22px}.xp-badge{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.12);font-weight:700}
.exercise-box{margin-top:16px;padding:18px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid var(--border)}.exercise-box input,.exercise-box select,.choice-btn,.token-btn{width:100%;padding:13px 14px;border-radius:14px;border:1px solid rgba(7,21,95,.12);font:inherit}.exercise-box input,.exercise-box select,.choice-btn,.token-btn,.selected-answer,.match-item{background:#fff;color:#08225e}
.choice-list,.token-bank,.match-grid{display:grid;gap:10px}.choice-btn,.token-btn{cursor:pointer;text-align:left}.token-bank{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.selected-answer{min-height:54px;padding:10px;border:2px dashed #94a3b8;border-radius:14px;margin-bottom:12px}.match-grid{grid-template-columns:1fr 1fr}.match-item{padding:12px;border-radius:12px}.feedback-box{margin-top:16px;padding:12px 14px;border-radius:16px;font-weight:700}.feedback-box.ok{background:var(--ok);color:var(--ok-text)}.feedback-box.bad{background:var(--danger);color:var(--danger-text)}.hidden{display:none}
.finish-grid{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.finish-box{min-width:130px;background:rgba(255,255,255,.12);border:1px solid var(--border);border-radius:18px;padding:16px;text-align:center}.finish-box strong{display:block;font-size:30px;color:#fff}
@media (max-width:960px){.page{grid-template-columns:1fr}.map-shell{min-height:2800px}}@media (max-width:700px){.topbar{flex-direction:column;align-items:flex-start}.lesson-row{flex-direction:column;align-items:flex-start}.match-grid{grid-template-columns:1fr}}

.map-shell::before,.map-shell::after{content:"";position:absolute;left:0;right:0;height:140px;pointer-events:none}


.map-shell{
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.16), transparent 18%),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.10), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.map-shell::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:260px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), transparent);
  pointer-events:none;
}
.map-shell::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:380px;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.08), transparent 62%),
    linear-gradient(180deg, transparent 0%, rgba(7,21,95,.12) 20%, rgba(18,63,184,.42) 100%);
  pointer-events:none;
}
.wave-band{
  position:absolute;
  left:0; right:0;
  height:120px;
  opacity:.55;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.14), transparent 65%);
}
.wave-band.w1{top:520px}
.wave-band.w2{top:1120px}
.wave-band.w3{top:1720px}
.section-title{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  z-index:11;
  padding:12px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid var(--border);
  backdrop-filter:blur(8px);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#d9efff;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.section-title.s1{top:120px}
.section-title.s2{top:760px}
.section-title.s3{top:1360px}
.section-title.s4{top:1980px}
.midpoint-badge{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:1490px;
  z-index:12;
  width:140px;
  height:140px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#ffe08a,#f4b942);
  color:#5b4300;
  font-weight:900;
  text-align:center;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
  border:6px solid rgba(255,255,255,.8);
}
.midpoint-badge span{
  display:block;
  font-size:12px;
  line-height:1.2;
  max-width:90px;
}
.boat{
  font-size:48px;
}
.lighthouse-scene{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:140px;
  width:320px;
  height:320px;
  z-index:12;
  pointer-events:none;
}
.lighthouse-glow{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:20px;
  width:240px;
  height:240px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,238,170,.45), transparent 62%);
  filter:blur(8px);
}
.lighthouse{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  width:110px;
  height:220px;
}
.lighthouse-base{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:88px;
  height:150px;
  background:linear-gradient(180deg,#f4f7ff,#dfe9ff);
  clip-path:polygon(18% 100%, 0 0, 100% 0, 82% 100%);
  border:3px solid rgba(255,255,255,.85);
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}
.lighthouse-red-1,.lighthouse-red-2{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:78px;
  height:18px;
  background:#d94b54;
  opacity:.95;
}
.lighthouse-red-1{bottom:96px}
.lighthouse-red-2{bottom:44px}
.lighthouse-top{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:138px;
  width:64px;
  height:34px;
  background:#203a8f;
  border-radius:10px 10px 4px 4px;
  border:3px solid rgba(255,255,255,.85);
}
.lighthouse-roof{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:166px;
  width:84px;
  height:34px;
  background:#0b1d5a;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.lighthouse-light{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:148px;
  width:18px;
  height:18px;
  background:#fff7bf;
  border-radius:999px;
  box-shadow:0 0 22px 10px rgba(255,240,170,.55);
}
.light-beam{
  position:absolute;
  left:50%;
  transform-origin:left center;
  bottom:150px;
  width:240px;
  height:90px;
  background:linear-gradient(90deg, rgba(255,243,182,.48), rgba(255,243,182,0));
  clip-path:polygon(0 40%, 100% 0, 100% 100%, 0 60%);
  animation:sweep 6s ease-in-out infinite;
  opacity:.85;
}
@keyframes sweep{
  0%{transform:translateX(0) rotate(-10deg)}
  50%{transform:translateX(0) rotate(10deg)}
  100%{transform:translateX(0) rotate(-10deg)}
}
.final-caption{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:36px;
  z-index:13;
  text-align:center;
  color:#fff6cf;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.final-caption strong{
  display:block;
  font-size:28px;
}
.final-caption span{
  font-size:14px;
  color:#dcecff;
}