/* Doodle Minds · Lesson 2 uses the same classroom format as Lesson 1:
   cream page, Georgia headings, thin-line cards, story world on the left,
   teacher-operated panel on the right. Motion lives in party-classroom.css. */
:root{--cream:#fff7e8;--ink:#294f45;--sage:#dbe5c6;--coral:#da8065;--gold:#f2ca72;--line:#cbd4b8;--paper:#fffcf4;--muted:#5f7765}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Trebuchet MS','Avenir Next',sans-serif}
p{margin:0}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:11px 16px;cursor:pointer;font-weight:700;transition:transform .18s,box-shadow .18s}
button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 0 #294f4512}
button:disabled{cursor:default;opacity:.48}
button:focus-visible,a:focus-visible{outline:4px solid #568baf;outline-offset:4px}
.primary{background:var(--ink);color:var(--cream);border-color:var(--ink);padding:14px 22px;border-radius:16px;font-size:18px;box-shadow:0 5px 0 #193c3320}
.primary.wide{width:100%}
.eyebrow{font-size:12px;font-weight:bold;letter-spacing:2px;margin:0 0 8px}
em{color:var(--coral);font-weight:400}

/* Header */
header{height:80px;display:flex;justify-content:space-between;align-items:center;padding:0 4vw;border-bottom:1px solid #d8dcc6;gap:20px}
.brand{display:flex;align-items:center;gap:15px;text-decoration:none;color:var(--ink)}
.brand-logo{width:94px;height:62px;object-fit:contain;display:block}
.brand-tagline{font:700 10px/1.5 'Trebuchet MS',sans-serif;letter-spacing:1.4px}
.header-tools{display:flex;align-items:center;gap:8px}
.header-tools button{font-size:13px;padding:10px 12px}
.series{font-size:10px;letter-spacing:1.5px;margin-right:14px}

/* Lesson frame: everything fits one projector screen */
main{height:calc(100dvh - 80px);max-width:1600px;margin:auto;padding:12px 4vw 14px;display:flex;flex-direction:column}
nav{display:flex;gap:4px;flex-wrap:wrap;padding-bottom:8px;flex:none}
nav button{font-size:12px;padding:7px 10px;border:0;background:transparent;border-radius:999px}
nav button:hover:not(:disabled){box-shadow:none;transform:none;background:#f1ecd8}
nav button.active{background:var(--ink);color:var(--paper)}
nav button:before{content:attr(data-mark);font-size:10px;margin-right:7px;color:var(--coral)}
nav button.active:before{color:var(--gold)}
nav button.complete:not(.active):after{content:' ✓';color:#86a764}
nav button:disabled{opacity:.55}
.heading{flex:none;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin:2px 0 14px}
.heading .eyebrow{margin-bottom:8px}
.heading h1{font:400 clamp(32px,3.2vw,50px)/1.08 Georgia,serif;margin:0;letter-spacing:-1.3px}
.review-mission{padding:3px 5px;border:0;background:transparent;font-size:13px;text-decoration:underline;font-weight:normal;flex:none}
.review-mission:hover:not(:disabled){box-shadow:none}
.layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(335px,1fr);gap:22px}

/* Story world */
.theatre{background:#f4f1df;border:1px solid #d9ddc5;border-radius:30px;position:relative;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column}
.scene-top{flex:none;display:flex;justify-content:space-between;gap:10px;padding:16px 22px 0;font-size:10px;font-weight:bold;letter-spacing:1.5px}
.scene-top span:last-child{color:#976447}
.scene{flex:1;min-height:0;position:relative;padding:0 8px}
.scene>.story-art{position:absolute;inset:0 8px;width:calc(100% - 16px);height:100%;display:block}
.caption{flex:none;min-height:60px;padding:12px 24px;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff9e8;border-top:1px solid #d9ddc5}
.caption p{font-size:21px;line-height:1.35;font-weight:bold}
.mission-goal-frame{display:none}
.scene.narrating:after{content:'Watch & listen';position:absolute;top:8px;left:50%;transform:translateX(-50%);background:#e5efcf;border:1px solid #b6c89c;border-radius:20px;padding:7px 15px;font-size:13px;font-weight:bold;letter-spacing:.5px;animation:job-badge .35s ease-out both}
.theatre:has(.celebrating){box-shadow:0 0 0 3px #d7c274}
.success-ribbon{animation:ribbon-pop .45s ease-out both}
@keyframes ribbon-pop{from{opacity:0;scale:.75}to{opacity:1;scale:1}}
.deco-sway{transform-box:fill-box;transform-origin:50% 0;animation:deco-sway 3.4s ease-in-out infinite}
.deco-spider{animation:deco-spider 4.6s ease-in-out infinite}
.deco-drift{animation:deco-drift 6s ease-in-out infinite}
@keyframes deco-sway{0%,100%{rotate:-4deg}50%{rotate:4deg}}
@keyframes deco-spider{0%,100%{translate:0 0}50%{translate:0 -22px}}
@keyframes deco-drift{0%,100%{translate:0 0}50%{translate:12px -8px}}
.story-art:not(.phase-idle):is(.scene-table,.scene-pie,.scene-invite,.scene-costume,.scene-game) :is(.deco-sway,.deco-spider,.deco-drift){animation:none}

/* Right-hand teacher panel */
.bench,.story-copy{min-width:0;min-height:0;padding:20px 24px;background:var(--paper);border:1px solid var(--line);border-radius:26px;display:flex;flex-direction:column;overflow:hidden}
.story-copy{justify-content:center;gap:14px}
.story-copy h2{font:400 clamp(26px,2.5vw,36px)/1.15 Georgia,serif;margin:0}
.story-copy p{font-size:18px;line-height:1.5}
.story-copy .reveal{background:#f0ead8;border-left:5px solid #dca578;border-radius:15px;padding:12px 16px;font-size:17px}
.story-copy .small{font-size:15px;color:var(--muted)}
.story-copy>button:not(.primary){align-self:flex-start}

.goal-preview{flex:none;display:flex;align-items:center;gap:13px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.goal-preview svg{flex-shrink:0;width:56px;height:54px}
.goal-preview small{display:block;letter-spacing:1.5px;font-size:10px;margin-bottom:5px}
.goal-preview strong{font-size:15px;line-height:1.35;display:block}
.strip-label{flex:none;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;font-weight:bold;margin:11px 0 8px}
.jobmap{flex:1;min-height:0;position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 54px minmax(0,1fr);gap:8px 12px}
.map-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.map-lines path{stroke:#c9bfa3;stroke-width:2;stroke-dasharray:3 5;fill:none}
.job{position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 8px;text-align:center;border:2px dashed #cad6b8;border-radius:18px;background:#fffaf0}
.job:nth-of-type(1){grid-area:1/1}.job:nth-of-type(2){grid-area:1/2}.job:nth-of-type(3){grid-area:3/1}.job:nth-of-type(4){grid-area:3/2}
.job svg{width:clamp(48px,min(5.4vw,10vh),110px);height:clamp(48px,min(5.4vw,10vh),110px);flex:none}
.job .job-label{font-size:clamp(13px,min(1.15vw,2.2vh),20px);font-weight:bold;line-height:1.2}
.job.done{border:2px solid #9fb889;background:#e7efd6}
.job.done:after{content:'✓';position:absolute;top:6px;right:10px;color:#477461;font-weight:bold}
.job.active{border:3px solid #477461;background:#fff2d4}
.is-narrating .job.active{background:#e7efd6}
.is-narrating .job.active:after{content:'♫';position:absolute;top:6px;right:10px;color:#477461;font-weight:bold}
.map-center{grid-area:2/1/3/3;justify-self:center;align-self:center;z-index:1;display:flex;align-items:center;gap:8px;padding:3px 16px 3px 5px;background:var(--ink);color:var(--paper);border-radius:999px;font-size:15px;white-space:nowrap}
.map-center svg{width:44px;height:42px;background:var(--paper);border-radius:50%;padding:2px}
.map-waiting{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;border:2px dashed #cad6b8;border-radius:20px;background:#fffaf0;padding:12px}
.map-waiting svg{width:min(150px,55%);height:auto;max-height:45%;background:#fff1d0;border-radius:50%;padding:8px}
.map-waiting h2{font:400 30px/1.15 Georgia,serif;margin:4px 0 0}
.map-waiting p{font-size:16px;color:var(--muted);max-width:260px}
.controls{flex:none;margin-top:12px}
.controls .primary{font-size:18px;padding:12px 16px;border-radius:14px}
.actions{display:flex;gap:8px;margin-top:8px}
.actions button{flex:1;font-size:13px;padding:8px 10px}
.micro{flex:none;font-size:13px;color:var(--muted);text-align:center;margin-top:8px}

/* How to play (same as Lesson 1) */
.game-rules{justify-content:flex-start;gap:14px;background:#fffdf5}
.rules-header{flex:none;border-bottom:1px solid #dce1ca;padding-bottom:14px}
.rules-header .eyebrow{font-size:11px;letter-spacing:2px;margin:0 0 10px}
.rules-header h2{font:400 clamp(25px,2.4vw,36px)/1.12 Georgia,serif;margin:0}
.rules-steps{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly;gap:12px}
.rule-row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center}
.rule-icon{display:grid;place-items:center;width:52px;height:52px;background:#edf2df;border-radius:17px;font-size:25px;color:#496754}
.rule-row:nth-child(2) .rule-icon{background:#fff0cb;color:#99783f}
.rule-row:nth-child(3) .rule-icon{background:#f8e3d7;color:#ad7659}
.rule-row h3{font-size:18px;line-height:1.2;margin:0 0 5px}
.rule-row p{font-size:14px!important;line-height:1.45!important;color:#617563}
.game-rules .primary{flex:none;font-size:17px;padding:14px;border-radius:15px}

/* Mission card (same as Lesson 1) */
.mission{justify-content:flex-start}
.mission-card{flex:1;min-height:0;max-height:560px;width:100%;max-width:1060px;margin:6px auto 0;position:relative;display:grid;grid-template-columns:.8fr 1.4fr;background:#fffcf4;border:2px solid #cbd4b8;border-radius:32px;overflow:hidden;box-shadow:0 10px 0 #d7dbc44d;animation:mission-arrive .45s ease-out both}
@keyframes mission-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mission-art{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#e9efd9;padding:40px 28px 28px;text-align:center;border-right:1px solid #cbd4b8;min-height:0}
.mission-sticker{position:absolute;left:22px;top:22px;font-size:11px;font-weight:bold;letter-spacing:1.4px;background:var(--gold);padding:9px 13px;border-radius:10px;transform:rotate(-4deg)}
.mission-goal-art{display:grid;place-items:center;width:min(230px,100%);aspect-ratio:1;border-radius:50%;background:#fff6de;margin:8px 0 14px;flex:none}
.mission-goal-art svg{width:82%;height:auto}
.mission-art small{letter-spacing:2px;font-size:11px;font-weight:bold;margin:4px 0 6px}
.mission-art strong{font:400 22px/1.3 Georgia,serif;max-width:290px}
.mission-pip{position:absolute;top:20px;right:18px;width:58px;opacity:.95}
.mission-pip svg{width:100%;display:block}
.mission-star{position:absolute;right:26px;bottom:90px;font:42px Georgia;color:#dca578}
.mission-star.second{right:40px;bottom:58px;font-size:22px}
.mission-copy{padding:30px 38px;display:flex;flex-direction:column;justify-content:center;min-height:0;overflow:auto}
.mission-copy .eyebrow{font-size:11px;margin-bottom:9px}
.mission-copy h1{font:400 34px/1.1 Georgia,serif;letter-spacing:-1px;margin:0 0 12px}
.mission-context{font-size:17px;line-height:1.4;margin:0 0 16px!important}
.mission-start{border-left:4px solid #a1b98b;padding:7px 14px;background:#f0f3e6;border-radius:0 12px 12px 0}
.mission-start b,.mission-rules>b{font-size:12px;letter-spacing:.7px}
.mission-start p{font-size:16px;line-height:1.4;margin:5px 0}
.mission-rules{margin-top:14px}
.mission-rules p{display:flex;gap:10px;font-size:16px;line-height:1.45;margin:7px 0}
.mission-rules p span{color:#b97c5c;flex-shrink:0}
.mission-question{font-size:20px;line-height:1.35;font-weight:bold;margin:16px 0 14px}
.mission-copy .primary{align-self:flex-start;font-size:17px;padding:13px 20px}
.mission footer{margin-top:auto}

/* Footer */
footer{flex:none;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:12px}
footer p{font-size:15px;line-height:1.5;max-width:65%}
footer>div{display:flex;gap:8px}
footer button{padding:10px 16px;font-size:16px}
footer .primary{padding:11px 20px;font-size:17px}

/* Welcome (same as Lesson 1) */
main.welcome{display:grid;grid-template-columns:43% 57%;grid-template-rows:minmax(0,1fr) auto;align-items:center;padding:20px 5vw 0;overflow:hidden}
.welcome-copy .eyebrow{margin-bottom:14px}
.welcome-copy h1{font-family:Georgia,serif;font-size:clamp(46px,6vw,90px);font-weight:400;line-height:1.03;letter-spacing:-3px;margin:16px 0 22px}
.lead{font-size:21px;line-height:1.55;margin-bottom:26px!important}
.welcome-copy .primary{padding:16px 24px;font-size:19px}
.welcome-copy .primary span{margin-left:34px}
.welcome-note{font-size:13px;margin-top:22px!important}
.welcome-art{position:relative;align-self:center;min-height:0}
.welcome-art svg{width:100%;height:auto;max-height:calc(100dvh - 290px);display:block;overflow:visible}
.sticker{position:absolute;top:-6px;right:40px;font:italic 23px Georgia;background:var(--gold);border-radius:50%;padding:20px;transform:rotate(8deg);z-index:1}
.art-caption{display:block;text-align:center;font-size:11px;letter-spacing:3px;margin-top:-6px}
.welcome-bottom{grid-column:1/-1;display:flex;justify-content:space-around;padding:22px 0;margin-top:20px;border-top:1px solid var(--line);font-size:13px;font-weight:bold;letter-spacing:2px}

/* Short projector screens */
@media(min-width:801px) and (max-height:720px){
  header{height:62px}.brand-logo{width:76px;height:48px}.brand-tagline{font-size:9px}.header-tools button{font-size:12px;padding:8px 10px}
  main{height:calc(100dvh - 62px);padding-top:8px;padding-bottom:10px}
  nav{padding-bottom:4px}nav button{padding:6px 8px;font-size:11px}
  .heading{margin:0 0 9px}.heading .eyebrow{font-size:10px;margin-bottom:5px}.heading h1{font-size:30px}
  .scene-top{padding-top:11px;font-size:9px}.caption{min-height:46px;padding:8px 16px}.caption p{font-size:17px}
  .bench,.story-copy{padding:13px 16px}
  .goal-preview{padding-bottom:6px}.goal-preview svg{width:44px;height:42px}.goal-preview strong{font-size:13px}
  .strip-label{margin:7px 0 5px}.jobmap{grid-template-rows:minmax(0,1fr) 44px minmax(0,1fr);gap:5px 8px}
  .job{padding:5px;gap:3px}.map-center{font-size:13px}.map-center svg{width:36px;height:34px}
  .controls{margin-top:8px}.controls .primary{font-size:15px;padding:9px}.actions{margin-top:6px}.actions button{padding:6px}
  .micro{font-size:11px;margin-top:5px}
  .story-copy h2{font-size:26px}.story-copy p{font-size:16px}
  .hello-avatar svg,.pip-avatar{width:66px;height:66px}.hello-turn{grid-template-columns:66px minmax(0,1fr)}.hello-turn.pip-turn{grid-template-columns:minmax(0,1fr) 66px}
  .hello-bubble{padding:10px 14px}.hello-bubble h2,.hello-bubble strong{font-size:26px}.pip-turn .hello-bubble{min-height:62px}.hello-card-bottom #hello{padding:10px;font-size:15px}
  .rules-header{padding-bottom:9px}.rules-header h2{font-size:25px}.rule-row{grid-template-columns:42px minmax(0,1fr)}.rule-icon{width:42px;height:42px;font-size:21px}.rule-row h3{font-size:16px}.rule-row p{font-size:13px!important}.game-rules .primary{padding:10px;font-size:15px}
  .mission-art{padding:30px 20px 18px}.mission-goal-art{width:min(170px,100%);margin:4px 0 8px}.mission-art strong{font-size:18px}
  .mission-copy{padding:18px 26px}.mission-copy h1{font-size:28px;margin-bottom:8px}.mission-context{font-size:15px;margin-bottom:10px!important}
  .mission-start p,.mission-rules p{font-size:14px}.mission-rules{margin-top:9px}.mission-question{font-size:17px;margin:10px 0}.mission-copy .primary{padding:10px 16px;font-size:15px}
  footer{margin-top:8px}footer p{font-size:13px}footer button{padding:7px 13px;font-size:14px}footer .primary{padding:8px 15px;font-size:15px}
  .welcome-copy h1{font-size:50px;margin:10px 0 14px}.lead{font-size:17px;margin-bottom:16px!important}.welcome-copy .primary{padding:12px 20px;font-size:17px}
  .welcome-art svg{max-height:calc(100dvh - 210px)}.sticker{font-size:17px;padding:14px}.welcome-bottom{padding:12px 0;margin-top:8px;font-size:11px}
}
@media(min-width:1500px) and (min-height:950px){
  nav button{font-size:14px}.scene-top{font-size:13px}.caption p{font-size:26px}
  .heading h1{font-size:54px}.story-copy p{font-size:21px}.goal-preview strong{font-size:18px}.goal-preview svg{width:70px;height:68px}
  .map-center{font-size:19px}.map-center svg{width:56px;height:54px}.jobmap{grid-template-rows:minmax(0,1fr) 68px minmax(0,1fr)}
  .mission-card{max-height:700px}.mission-copy h1{font-size:42px}.mission-context,.mission-start p,.mission-rules p{font-size:19px}.mission-question{font-size:24px}
}
@media(max-width:1050px){header{padding:0 3vw}.series{display:none}.header-tools button{font-size:11px;padding:9px}.layout{grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);gap:15px}}

/* Phones: stack and allow scrolling */
@media(max-width:800px){
  header{height:auto;flex-wrap:wrap;padding:12px 16px;gap:10px}.header-tools{flex-wrap:wrap}
  main,main.welcome{height:auto;display:block;padding:14px 16px 20px}
  .layout{display:flex;flex-direction:column}
  .scene{aspect-ratio:1000/585;flex:none}
  .heading{display:block}.heading h1{font-size:30px}.review-mission{margin-top:6px}
  .bench{min-height:480px}
  .mission-card{grid-template-columns:1fr;max-height:none}.mission-art{border-right:0;border-bottom:1px solid #cbd4b8}
  .welcome-copy h1{font-size:52px}.welcome-art{margin-top:28px}.welcome-art svg{max-height:none}.welcome-bottom{flex-wrap:wrap;gap:10px;font-size:10px}
  footer{flex-direction:column;align-items:flex-start}footer p{max-width:100%}
}
@media(prefers-reduced-motion:reduce){button{transition:none}.deco-sway,.deco-spider,.deco-drift,.success-ribbon,.hello-wave-hand,.has-reply,.mission-card{animation:none}}

/* refinements */
.story-copy .eyebrow{font-size:12px;line-height:1.4;margin:0}
.mission-card{flex:none;margin:auto;max-height:none}
.mission footer{margin-top:12px}
.job{flex-direction:row;justify-content:flex-start;text-align:left;gap:10px;padding:8px 12px;overflow:hidden}
.job svg{width:clamp(40px,min(4.2vw,9vh),96px);height:clamp(40px,min(4.2vw,9vh),96px)}
.job .job-label{font-size:clamp(13px,min(1.2vw,2.3vh),21px)}
@media(max-width:800px){.job{flex-direction:column;text-align:center;justify-content:center}}
.job .job-label{font-size:clamp(12.5px,min(1.05vw,2.1vh),20px);line-height:1.15}
.job svg{width:clamp(36px,min(3.8vw,8.5vh),92px);height:clamp(36px,min(3.8vw,8.5vh),92px)}
.jobmap{grid-template-rows:minmax(0,1fr) 46px minmax(0,1fr)}
@media(min-width:1500px) and (min-height:950px){.jobmap{grid-template-rows:minmax(0,1fr) 64px minmax(0,1fr)}}
.mission-star{top:96px;bottom:auto;right:24px}.mission-star.second{top:146px;bottom:auto;right:40px}

/* ---------- Lesson 2 polish: simpler where it teaches, livelier where it celebrates ---------- */
/* one quiet label on the story world */
.scene-top{color:#7b8a72}
/* soft hover lift on every card-like thing */
.job,.idea-row span,.welcome-bottom span,.rule-row{transition:transform .2s ease,box-shadow .2s ease}
.welcome-bottom span:hover,.idea-row span:hover{transform:translateY(-3px) rotate(-1deg)}
/* colour-coded small jobs */
.job{border-left:6px solid var(--tint,#cad6b8);border-style:dashed dashed dashed solid}
.job.done{border:2px solid var(--tint);border-left-width:6px;background:#fbfdf4}
.job.done:after{content:'✓';display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tint);color:#fff;top:6px;right:8px;font-size:14px}
.job.active{border:3px solid var(--tint);border-left-width:6px;background:#fff6dc;box-shadow:0 0 0 0 var(--tint);animation:job-pulse 1.4s ease-out infinite}
@keyframes job-pulse{0%{box-shadow:0 0 0 0 #f2ca7299}100%{box-shadow:0 0 0 10px #f2ca7200}}
.is-narrating .job.active{animation:none;background:#fbfdf4}
.map-center{box-shadow:0 4px 0 #193c3326}
/* waiting state: thinking question marks float around the goal */
.map-waiting{position:relative;overflow:hidden}
.think-dot{position:absolute;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 18px Georgia,serif;color:#fffcf4;animation:think-float 3s ease-in-out infinite}
.think-dot.a{background:#9fb889;left:14%;top:14%}
.think-dot.b{background:#e7b75b;right:14%;top:18%;animation-delay:.6s}
.think-dot.c{background:#da8065;left:18%;bottom:30%;animation-delay:1.2s}
.think-dot.d{background:#8fb3b0;right:17%;bottom:34%;animation-delay:1.8s}
@keyframes think-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
.map-waiting svg{position:relative}
/* confetti when a whole goal is ready */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.confetti i{position:absolute;top:-16px;width:10px;height:14px;border-radius:3px;animation:confetti-fall 2.4s cubic-bezier(.25,.6,.4,1) forwards}
.confetti i:nth-child(3n){border-radius:50%;width:11px;height:11px}
.confetti i:nth-child(5n){width:15px;height:15px;clip-path:polygon(50% 0,62% 35%,100% 50%,62% 65%,50% 100%,38% 65%,0 50%,38% 35%)}
@keyframes confetti-fall{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--drift),110vh) rotate(var(--spin));opacity:.9}}
.theatre:has(.celebrating) .caption{background:#fdf0c9}
.theatre:has(.celebrating) .caption p:before{content:'★ ';color:#e0a32a}
.theatre:has(.celebrating) .caption p:after{content:' ★';color:#e0a32a}
/* friendly motion on welcome and mission */
.sticker{animation:sticker-wiggle 4s ease-in-out infinite}
@keyframes sticker-wiggle{0%,100%{transform:rotate(8deg)}50%{transform:rotate(3deg) translateY(-3px)}}
.mission-pip{animation:pip-bob 2.6s ease-in-out infinite}
@keyframes pip-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.mission-goal-art{box-shadow:0 0 0 10px #fff6de66,0 0 0 20px #fff6de33}
.mission-sticker{box-shadow:0 3px 0 #c9a24e55}
/* welcome strip with little goal pictures */
.welcome-bottom{gap:12px;padding:16px 0}
.welcome-bottom span{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px 16px 5px 6px;letter-spacing:.5px;font-size:14px}
.welcome-bottom span i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff1d0}
.welcome-bottom span i svg{width:38px;height:36px}
.welcome-bottom span b{color:var(--coral);font-size:12px}
/* how-to-play rows: tinted step chips */
.rule-row{padding:8px 10px;border-radius:16px}
.rule-row:hover{background:#f6f2e2}
/* reflection: picture-led thinking path */
.think-card,.idea-card{justify-content:center;gap:14px}
.think-path{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.think-path li{display:flex;align-items:center;gap:14px;font-size:18px;font-weight:bold;background:#fffaf0;border:1px solid #e7dfc7;border-radius:16px;padding:10px 14px}
.think-path li span{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font-size:20px;background:#edf2df;color:#496754}
.think-path li:nth-child(2) span{background:#fff0cb;color:#99783f}
.think-path li:nth-child(3) span{background:#f8e3d7;color:#ad7659}
.think-card h2{display:none}
.soft{align-self:flex-start;background:transparent;border:1px dashed #c3b48f;color:#7a6447}
.idea-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.idea-row span{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:#fffaf0;border:1px solid #e7dfc7;border-radius:18px;padding:12px 6px}
.idea-row span svg{width:58px;height:58px;background:#fff1d0;border-radius:50%;padding:6px}
.idea-row b{font-size:14px;line-height:1.25}
.story-copy .reveal{border-left-color:#e0a32a;background:#fdf3d8;font-weight:bold}
@media(min-width:801px) and (max-height:720px){
  .think-path li{font-size:15px;padding:7px 10px}.think-path li span{width:32px;height:32px;font-size:16px}
  .idea-row span{padding:8px 4px}.idea-row span svg{width:44px;height:44px}.idea-row b{font-size:12px}
  .welcome-bottom{padding:8px 0}.welcome-bottom span{font-size:12px}.welcome-bottom span i{width:32px;height:32px}.welcome-bottom span i svg{width:28px;height:27px}
  .think-dot{width:26px;height:26px;font-size:14px}
}
@media(max-width:800px){.welcome-bottom{justify-content:center}.idea-row{grid-template-columns:1fr 1fr 1fr}}
@media(prefers-reduced-motion:reduce){.confetti{display:none}.job.active,.think-dot,.sticker,.mission-pip{animation:none}}

/* ---------- Lesson 2 polish: a lively story world on the left, a calm panel on the right ---------- */
/* LEFT · story world */
.theatre{background:linear-gradient(180deg,#f6f2df,#f1ecd4)}
.scene-top{align-items:center;min-height:30px}
.scene-mark{color:#d9a06b;letter-spacing:4px;font-size:11px}
.job-trail{display:flex;gap:6px}
.job-trail i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fffcf4;border:2px dashed #d3c9ad;opacity:.55;transition:opacity .3s,transform .3s}
.job-trail i svg{width:24px;height:24px}
.job-trail i.on{opacity:1;border:2px solid #9fb889;background:#eef4dd}
.job-trail i.now{opacity:1;border:2px solid #e0a32a;background:#fff2d4;animation:trail-now 1s ease-in-out infinite}
@keyframes trail-now{50%{transform:translateY(-3px)}}
.caption{justify-content:flex-start;gap:14px;text-align:left;padding:10px 22px 10px 14px}
.caption-pip{flex:none;width:46px;height:46px;border-radius:50%;background:#e1ebca;border:3px solid #f4f6e9;box-shadow:0 0 0 1px #cfdbb9;overflow:hidden;display:grid;place-items:center}
.caption-pip svg{width:46px;height:44px;margin-top:6px}
.caption p{position:relative}
.theatre:has(.narrating) .caption-pip,.theatre:has(.celebrating) .caption-pip{animation:pip-talk .5s ease-in-out 3}
@keyframes pip-talk{50%{transform:translateY(-3px) rotate(-4deg)}}
.theatre:has(.celebrating) .caption{background:#fdf0c9}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.confetti i{position:absolute;top:-16px;width:10px;height:14px;border-radius:3px;animation:confetti-fall 2.4s cubic-bezier(.25,.6,.4,1) forwards}
.confetti i:nth-child(3n){border-radius:50%;width:11px;height:11px}
.confetti i:nth-child(5n){width:15px;height:15px;clip-path:polygon(50% 0,62% 35%,100% 50%,62% 65%,50% 100%,38% 65%,0 50%,38% 35%)}
@keyframes confetti-fall{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--drift),720px) rotate(var(--spin));opacity:.9}}
.sticker{animation:sticker-wiggle 4s ease-in-out infinite}
@keyframes sticker-wiggle{0%,100%{transform:rotate(8deg)}50%{transform:rotate(3deg) translateY(-3px)}}
.mission-pip{animation:pip-bob 2.6s ease-in-out infinite}
@keyframes pip-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.mission-goal-art{box-shadow:0 0 0 12px #fff6de77,0 0 0 24px #fff6de33}
.welcome-bottom{gap:12px;padding:16px 0}
.welcome-bottom span{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px 16px 5px 6px;letter-spacing:.5px;font-size:14px;transition:transform .2s}
.welcome-bottom span:hover{transform:translateY(-3px) rotate(-1deg)}
.welcome-bottom span i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff1d0}
.welcome-bottom span i svg{width:38px;height:36px}
.welcome-bottom span b{color:var(--coral);font-size:12px}

/* RIGHT · calm, generous panel */
.bench,.story-copy{background:#fffdf7;padding:24px 26px}
.story-copy{gap:18px;padding:30px 34px}
.story-copy h2{font-size:clamp(28px,2.7vw,40px)}
.story-copy p{font-size:19px;color:#3f5f55}
.story-copy .reveal{background:transparent;border:0;border-left:3px solid #e0a32a;border-radius:0;padding:4px 0 4px 16px;font-family:Georgia,serif;font-size:20px;font-weight:400}
.soft{align-self:flex-start;background:transparent;border:1px dashed #c3b48f;color:#7a6447;font-weight:bold}
.bench-label{flex:none;margin:0 0 12px;font-size:11px;font-weight:bold;letter-spacing:2px;color:#7b8a72;text-align:center}
.jobmap{gap:12px 14px;grid-template-rows:minmax(0,1fr) 54px minmax(0,1fr)}
.map-lines path{stroke:#ddd3b9}
.job{border:1px solid #e4dcc4;border-radius:18px;background:#fffcf4;flex-direction:column;justify-content:center;text-align:center;gap:6px;padding:10px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.job svg{width:clamp(44px,min(4.6vw,9.5vh),100px);height:clamp(44px,min(4.6vw,9.5vh),100px)}
.job .job-label{font-size:clamp(13px,min(1.1vw,2.2vh),20px);line-height:1.2}
.job:not(.done):not(.active) svg{opacity:.75}
.job.done{border:1px solid #b7caa0;background:#f1f6e6}
.job.done:after{content:'✓';display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#86a764;color:#fff;top:8px;right:8px;font-size:13px}
.job.active{border:2px solid #e0a32a;background:#fff6dc;transform:translateY(-2px);box-shadow:0 6px 0 #e0a32a33}
.is-narrating .job.active{border-color:#86a764;background:#f1f6e6;box-shadow:none}
.map-center{padding:4px 18px 4px 5px;font-family:Georgia,serif;font-size:17px;box-shadow:0 4px 0 #193c3322}
.map-center svg{width:42px;height:40px}
.map-waiting{border:1px dashed #d9cfb2;background:#fffcf4;gap:10px}
.map-waiting svg{background:#fff1d0}
.map-waiting h2{font-size:34px}
.controls{display:flex;gap:8px;margin-top:16px}
.controls .primary{flex:1;width:auto}
.icon-btn{flex:none;width:50px;padding:0;font-size:18px;border-radius:14px;background:transparent}
@media(min-width:801px) and (max-height:720px){
  .bench,.story-copy{padding:14px 18px}.story-copy{gap:11px}.story-copy p{font-size:16px}.story-copy .reveal{font-size:17px}
  .bench-label{margin-bottom:7px;font-size:10px}.jobmap{gap:7px 10px;grid-template-rows:minmax(0,1fr) 42px minmax(0,1fr)}
  .job{padding:6px;gap:3px}.map-center{font-size:14px}.map-center svg{width:32px;height:30px}
  .controls{margin-top:9px}.icon-btn{width:42px}
  .job-trail i{width:28px;height:28px}.job-trail i svg{width:19px;height:19px}.scene-top{min-height:24px}
  .caption-pip{width:38px;height:38px}.caption-pip svg{width:38px;height:36px}
  .welcome-bottom{padding:8px 0}.welcome-bottom span{font-size:12px}.welcome-bottom span i{width:32px;height:32px}.welcome-bottom span i svg{width:28px;height:27px}
}
@media(max-width:800px){.welcome-bottom{justify-content:center}}
@media(prefers-reduced-motion:reduce){.confetti{display:none}.job-trail i.now,.sticker,.mission-pip,.caption-pip{animation:none!important}}
.caption-pip svg{width:44px;height:44px;margin:0}
@media(min-width:801px) and (max-height:720px){.caption-pip svg{width:36px;height:36px}}
.game-rules{padding:26px 30px;gap:12px}
.game-rules .rules-header h2{font-size:clamp(25px,2.2vw,34px)}
.game-rules .rule-row h3{font-size:17px}
.hello-invitation{padding:22px 26px}
@media(min-width:801px) and (max-height:720px){.game-rules,.hello-invitation{padding:14px 18px}.game-rules .rules-header h2{font-size:24px}}

/* An open greeting, with one child-facing invitation and one reply. */
.hello-invitation{border:0;background:transparent;box-shadow:none;align-items:center;text-align:center;justify-content:center;gap:18px;padding:24px!important;position:relative}
.hello-invitation>.eyebrow{font-size:11px;letter-spacing:2.4px;color:var(--muted);margin:0}
.hello-moment{display:flex;flex-direction:column;align-items:center;position:relative}
.hello-wave{position:relative;width:clamp(90px,10vw,140px);margin:0 0 12px;transform:rotate(-8deg)}
.hello-wave svg{display:block;width:100%;height:auto}
.hello-wave>span{position:absolute;right:-22px;top:9px;font:32px Georgia;color:var(--coral)}
.hello-invitation .hello-cue{font-size:11px;letter-spacing:2px;font-weight:bold;color:var(--muted);margin:0 0 10px}
.hello-invitation h2{font:400 clamp(44px,4.2vw,64px)/1.08 Georgia,serif;letter-spacing:-1.8px;margin:0;position:relative;z-index:0;white-space:nowrap}
.hello-invitation h2:after{content:'';position:absolute;left:8%;right:6%;bottom:0;height:14px;border-radius:60% 35% 55% 40%;background:var(--gold);opacity:.55;z-index:-1;transform:rotate(-2deg)}
.hello-invitation .hello-subtitle{font-size:15px;line-height:1.5;color:var(--muted);margin:15px 0 0}
.hello-response{display:flex;align-items:center;gap:9px;min-height:36px;color:var(--muted)}
.hello-response p{font-size:14px;line-height:1.4;margin:0}
.hello-response strong{font:400 27px Georgia,serif;color:var(--ink);margin-left:5px}
.hello-response-dot{width:8px;height:8px;border-radius:50%;background:#9caf71;box-shadow:0 0 0 5px #dbe5c640;flex:none}
.hello-invitation #hello{width:auto;max-width:100%;border-radius:999px;padding:13px 26px;font-size:16px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 0 #294f4512}
.hello-answered .hello-response{animation:hello-reply .4s ease-out both}
.hello-wave-hand{transform-origin:58px 98px;animation:hello-hand-wave 1.8s ease-in-out 2}
@keyframes hello-hand-wave{0%,100%{transform:rotate(0)}35%{transform:rotate(-9deg)}65%{transform:rotate(7deg)}}
@keyframes hello-reply{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:801px) and (max-height:720px){.hello-invitation{gap:12px;padding:12px!important}.hello-wave{width:92px;margin-bottom:6px}.hello-invitation h2{font-size:40px}.hello-invitation .hello-subtitle{margin-top:10px;font-size:14px}.hello-invitation #hello{padding:11px 23px}.hello-invitation .hello-cue{margin-bottom:6px}}
@media(max-width:800px){.hello-invitation{padding:30px 12px!important;gap:18px}.hello-wave{width:105px}.hello-invitation h2{font-size:45px}}
@media(prefers-reduced-motion:reduce){.hello-answered .hello-response{animation:none}}

/* Caption portraits keep their own space at every projector size. */
.caption-pip{flex:0 0 46px;width:46px;height:46px;min-width:46px;overflow:visible}
.caption-pip svg{display:block;width:100%;height:100%;margin:0;border-radius:50%}
.caption p{flex:1;min-width:0;margin:0;line-height:1.4}
.controls:has(>#replay:only-child){justify-content:center}
.controls #replay.soft{flex:none;font-size:13px;padding:8px 12px;white-space:nowrap;background:transparent;box-shadow:none}
@media(min-width:801px) and (max-height:720px){.caption-pip{flex-basis:38px;width:38px;min-width:38px;height:38px}.caption-pip svg{width:100%;height:100%}.caption{gap:12px}}