/* Playful layer (2026-09-28): chunky buttons, gamified path, pop-in motion.
   Loaded after type-system.css. Remove this file and playful.js to go back. */
:root{
  --pl-forest:#173f2d;--pl-forest-edge:#0b2619;
  --pl-green:#2f8a57;--pl-green-edge:#1f6440;
  --pl-sun:#e8b04b;--pl-sun-edge:#b98526;
  --pl-sky:#173f2d;--pl-sky-edge:#0b2619;
  --pl-coral:#ff7a59;--pl-coral-edge:#d9543a;
  --pl-line:#e2e7df;--pl-line-edge:#d3dacf;
  --pl-spring:cubic-bezier(.22,1.2,.36,1);
}

/* ---------- Chunky 3D buttons ---------- */
#website .button,#website .pv-cta,#website header .button.small{border-radius:14px!important;font-weight:700!important;letter-spacing:.01em;box-shadow:0 3px 0 var(--pl-forest-edge)!important;transform:translateY(0);transition:transform .12s ease,box-shadow .12s ease,background .2s!important}
#website .button:hover,#website .pv-cta:hover{transform:translateY(-1px)!important;box-shadow:0 4px 0 var(--pl-forest-edge)!important}
#website .button:active,#website .pv-cta:active{transform:translateY(3px)!important;box-shadow:0 0 0 var(--pl-forest-edge)!important}
#website .button span,#website .pv-cta span{display:inline-block;transition:transform .25s var(--pl-spring)}
#website .button:hover span,#website .pv-cta:hover span{transform:translate(2px,-2px)}
#website .button span,#website .pv-cta span{font-size:1em!important;line-height:1}
#website .featured .pv-cta{box-shadow:0 3px 0 #c99a3f!important}
#website .featured .pv-cta:hover{box-shadow:0 4px 0 #c99a3f!important}
#website .featured .pv-cta:active{box-shadow:0 0 0 #c99a3f!important}

/* Secondary pills and tabs get the same pressable feel */
#website .ls-tabs button,#website .ls-controls button,#website .wc-picker button,#website .pv-toggle button,#website .profile-tag,#website .platform-button{border-width:2px!important;border-style:solid;border-color:var(--pl-line)!important;box-shadow:0 3px 0 var(--pl-line-edge);transition:transform .12s ease,box-shadow .12s ease,background .2s,color .2s,border-color .2s}
#website .ls-tabs button:hover,#website .ls-controls button:hover,#website .profile-tag:hover,#website .platform-button:not([disabled]):hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--pl-line-edge)}
#website .ls-tabs button:active,#website .ls-controls button:active,#website .profile-tag:active,#website .platform-button:active{transform:translateY(3px);box-shadow:none}
#website .ls-tabs button[aria-selected="true"]{border-color:var(--pl-forest)!important;box-shadow:0 3px 0 var(--pl-forest-edge)}
#website .pv-toggle{padding:6px;background:#eef1ea}
#website .pv-toggle button{border:0!important;box-shadow:none}
#website .pv-toggle button[aria-pressed="true"]{box-shadow:0 3px 0 var(--pl-forest-edge)}

/* ---------- Chunky cards ---------- */
#website .pa-points li,#website .wc-pillars div,#website .pv-plan:not(.featured),#website .ls-rail,#website .journey-detail,#website .faq-item,#website .pv-compare{border:2px solid var(--pl-line)!important;box-shadow:0 3px 0 var(--pl-line-edge)}
#website .pv-plan:not(.featured):hover{box-shadow:0 8px 0 var(--pl-line-edge),0 24px 50px rgba(23,63,45,.08)}
#website .pv-plan.featured{box-shadow:0 6px 0 var(--pl-forest-edge),0 28px 60px rgba(16,47,34,.25)}
#website .wc-pillars div{background:#fff}

/* FAQ as tappable cards */
#website .faq-list{display:grid;gap:12px}
#website .faq-item{border-radius:18px;background:#fff;padding:0 20px;transition:transform .15s ease,border-color .2s}
#website .faq-item:last-child{border-bottom:2px solid var(--pl-line)!important}
#website .faq-item:hover{transform:translateY(-2px)}
#website .faq-item[open]{border-color:#9fb39f!important;box-shadow:0 3px 0 #c9d6c7}
#website .faq-item summary::after{display:grid;place-items:center;width:30px;height:30px;top:14px;border-radius:50%;background:#eef1ea;font-size:20px}
#website .faq-item[open] summary::after{background:var(--pl-forest);color:#fff}

/* ---------- Profile tags ---------- */
#website .profile-tag{border-radius:16px!important;background:#fff;font-weight:600}
#website .profile-tag.picked{background:var(--pl-sun)!important;border-color:var(--pl-sun-edge)!important;box-shadow:0 3px 0 var(--pl-sun-edge);color:#3d2a00!important;animation:plPop .45s var(--pl-spring)}

/* ---------- Learning path (journey) ---------- */
#website .journey-path{display:flex!important;justify-content:space-between;align-items:flex-start;gap:0;padding:70px 0 20px;position:relative}
#website .journey-path .level{flex:0 0 150px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;cursor:pointer;position:relative}
#website .journey-path .level:nth-child(3),#website .journey-path .level:nth-child(7){margin-top:64px}
#website .journey-path .level-disc{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;font-size:34px;font-weight:700;transition:transform .15s ease,box-shadow .15s ease}
#website .journey-path .level.completed .level-disc{background:var(--pl-green)!important;color:#fff!important;box-shadow:0 7px 0 var(--pl-green-edge)!important}
#website .journey-path .level.current .level-disc{background:var(--pl-sun)!important;color:#2f1f05!important;box-shadow:0 7px 0 var(--pl-sun-edge)!important;animation:plPulse 2.2s ease-out infinite}
#website .journey-path .level.locked .level-disc{background:#e6eae3!important;color:#8f988a!important;box-shadow:0 7px 0 #cdd4c9!important}
#website .journey-path .level:hover .level-disc{transform:translateY(-3px)}
#website .journey-path .level:active .level-disc{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.15)!important}
#website .journey-path .level small{font-size:11px;letter-spacing:.1em;color:#565e50}
#website .journey-path .level strong{font:700 17px/1.3 var(--font-head,Inter,sans-serif);color:#1f2a22}
#website .journey-path .level.locked{opacity:1!important}
#website .journey-path .level.locked strong{color:#5c6456}
#website .journey-path .level.locked small{color:#5c6456}
#website .journey-path .level.current::before{content:'START';position:absolute;top:-52px;left:50%;padding:7px 14px;border-radius:12px;background:#fff;border:2px solid var(--pl-line);box-shadow:0 3px 0 var(--pl-line-edge);color:#8a5f12;font:800 13px/1 Inter,sans-serif;letter-spacing:.08em;transform:translateX(-50%);animation:plBobX 1.8s ease-in-out infinite}
#website .journey-path .level.current::after{content:'';position:absolute;top:-19px;left:50%;width:12px;height:12px;background:#fff;border-right:2px solid var(--pl-line);border-bottom:2px solid var(--pl-line);transform:translateX(-50%) rotate(45deg);animation:plBobX 1.8s ease-in-out infinite}
#website .journey-path .path-line{display:block!important;flex:1 1 auto;min-width:40px;height:0!important;margin-top:40px;border:0!important;border-top:6px dotted #b9c7b5!important;background:none!important;transform-origin:center}
#website .journey-path .path-line:nth-child(2),#website .journey-path .path-line:nth-child(6){transform:translateY(32px) rotate(20deg)}
#website .journey-path .path-line:nth-child(4){transform:translateY(32px) rotate(-20deg)}
#website .journey-path .path-line:not(.muted){border-top-color:var(--pl-green)!important}
#website .journey-path .level.bounce .level-disc{animation:plPop .5s var(--pl-spring)}

/* ---------- Pop-in on scroll ---------- */
.pl-hide{opacity:0;transform:translateY(16px)}
.pl-show{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);transition-delay:var(--pl-delay,0s)}

/* ---------- Lumi session: XP + reactions ---------- */
#website .ls-xp{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;background:#fff6dc;border:2px solid #f3dc9c;color:#6b4a00;font:800 13px Inter,sans-serif;font-variant-numeric:tabular-nums}
#website .ls-xp.gain{animation:plPop .5s var(--pl-spring)}
#website .ls-xp-pop{position:absolute;right:24px;bottom:66px;padding:6px 12px;border-radius:12px;background:var(--pl-sun);color:#3d2a00;font:800 15px Inter,sans-serif;box-shadow:0 3px 0 var(--pl-sun-edge);pointer-events:none;animation:plXp 1.2s ease-out forwards;z-index:5}
#website .ls-msg.wrong{border-color:#f3b4a4!important;background:#fff4f1!important;animation:lsIn .45s cubic-bezier(.16,1,.3,1) both,plShake .45s .45s ease}
#website .ls-msg.right{border-color:#9fd9b3!important;background:#f0faf3!important}
#website .ls-msg.right .ls-msg-head::after{content:'Correct';margin-left:auto;padding:2px 8px;border-radius:99px;background:var(--pl-green);color:#fff;font-size:11px;font-weight:700}
#website .ls-msg.wrong .ls-msg-head::after{content:'Not quite';margin-left:auto;padding:2px 8px;border-radius:99px;background:var(--pl-coral);color:#fff;font-size:11px;font-weight:700}
#website .ls-summary{box-shadow:0 5px 0 var(--pl-forest-edge)}
#website .ls-summary-head strong::before{content:'Lesson complete · ';color:var(--pl-sun)}
#website .ls-stage{position:relative}

/* ---------- Mascot ---------- */
#website .guide-lantern{animation:plFloat 4s ease-in-out infinite}
#website .guide-lantern:hover{animation:plWiggle .6s ease}

/* confetti canvas */
.pl-confetti{position:fixed;inset:0;pointer-events:none;z-index:9999}

@keyframes plIn{from{opacity:0;transform:scale(.6) translateY(16px)}to{opacity:1;transform:none}}
@keyframes plFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes plBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes plBobX{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes plPop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes plPulse{0%{box-shadow:0 7px 0 var(--pl-sun-edge),0 0 0 0 rgba(232,176,75,.5)}70%{box-shadow:0 7px 0 var(--pl-sun-edge),0 0 0 18px rgba(232,176,75,0)}100%{box-shadow:0 7px 0 var(--pl-sun-edge),0 0 0 0 rgba(232,176,75,0)}}
@keyframes plShake{0%,100%{translate:0}20%{translate:-6px}40%{translate:6px}60%{translate:-4px}80%{translate:3px}}
@keyframes plWiggle{0%,100%{rotate:0deg}25%{rotate:-8deg}75%{rotate:8deg}}
@keyframes plXp{0%{opacity:0;transform:translateY(8px) scale(.7)}20%{opacity:1;transform:translateY(0) scale(1.1)}70%{opacity:1;transform:translateY(-24px) scale(1)}100%{opacity:0;transform:translateY(-40px)}}

@media(max-width:760px){
  #website .journey-path{flex-direction:column;align-items:center;padding:60px 0 10px}
  #website .journey-path .level{flex:none;margin:0!important}
  #website .journey-path .level:nth-child(1),#website .journey-path .level:nth-child(5){transform:translateX(-60px)}
  #website .journey-path .level:nth-child(3),#website .journey-path .level:nth-child(7){transform:translateX(60px)}
  #website .journey-path .path-line{flex:none;width:0;min-width:0;height:60px!important;margin:10px 0;border-top:0!important;border-left:6px dotted #b9c7b5!important;transform:none!important}
  #website .journey-path .path-line:not(.muted){border-left-color:var(--pl-green)!important}
}
@media(prefers-reduced-motion:reduce){
  .pl-hide{opacity:1;transform:none}
}

/* keep hidden elements hidden (e.g. app store buttons until live) */
#website [hidden]{display:none!important}

/* ---------- Consistency and polish (item 6) ---------- */
#website .platform-section{margin-top:24px!important}
#website .guide-lantern:hover{animation:none}
/* Intro hint */
.intro-hint{margin:18px 0 0;color:#e8d5a6;font:600 15px/1.4 Inter,sans-serif;letter-spacing:.02em;animation:plHint 2.4s ease-in-out infinite}
.intro-hint small{display:block;margin-top:4px;font-weight:400;font-size:13px;color:#a79a7c}
.intro.exploding .intro-hint,.intro.world-open .intro-hint{opacity:0;animation:none;transition:opacity .3s}
@keyframes plHint{0%,100%{opacity:.75}50%{opacity:1}}
/* Lumi session: board placeholder until Lumi draws */
#website .ls-board{position:relative}
#website .ls-board:not(:has(.lb-lines li)):not(:has(.show)):not(:has(.go))::after{content:'Lumi will sketch the idea here as you talk.';position:absolute;inset:48px 22px 22px;display:grid;place-items:center;text-align:center;color:#8a927f;font:italic 500 14px/1.5 Inter,sans-serif}
@media(max-width:760px){
  #website .ls-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible!important}
  #website .ls-tabs button{padding:10px 10px!important;font-size:13px!important;line-height:1.25}
  #website .ls-tabs button small{font-size:9px!important;letter-spacing:.08em!important}
  #website .ls-board{min-height:210px!important}
}
@media(prefers-reduced-motion:reduce){.intro-hint{animation:none}}
#website .journey-detail{padding:20px 24px!important;gap:24px}