/* Activity first: modest controls, generous manipulatives, one illustration. */
:root{--blue:#285edf;--dark:#172f56;--muted:#546b8a;--line:#d8e5f5;background:#eef5ff;color:var(--dark)}
body{background:radial-gradient(ellipse at 10% 0,#dcecff 0,transparent 45%),#f3f7ff}
.header nav{scrollbar-width:none}.header nav::-webkit-scrollbar{display:none}
button{min-height:44px;padding:8px 14px;border-radius:12px;font-size:14px;line-height:1.4}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #bf6900;outline-offset:4px}
.header{max-width:1360px;padding:12px 30px;gap:22px;background:#ffffffc9;border-bottom:1px solid #d9e6f5}
.brand{font-size:22px;gap:9px;letter-spacing:-.8px}.brand-clock{width:38px;height:38px;font-size:31px;line-height:36px;border-radius:12px;background:#285edf;box-shadow:0 3px 0 #bfd3ff}.brand small{font-size:11px;letter-spacing:1px}.header nav{gap:2px}.header nav button{padding:8px 12px;font-size:14px;min-height:44px}.header nav button.active{background:#e8efff;color:#1f54c5}.sound{font-size:13px;padding:8px 12px;border:0;background:transparent;color:#546b8a}
main{max-width:1280px;padding:20px 30px 22px}.page-head{margin-bottom:18px}.page-head h1{font-size:27px}.badge{padding:6px 12px;font-size:13px;background:#fff1c0;color:#765411}.eyebrow{font-size:12px;letter-spacing:.8px}.panel,.lesson-body{border-color:#d5e3f6;box-shadow:0 8px 28px #2457a207}.play-topline{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px}.play-topline h1{font-size:22px;letter-spacing:-.6px}.play-tabs{display:flex;gap:7px;margin-bottom:15px}.play-tabs button{flex:0 1 auto;min-height:44px;padding:8px 14px;font-size:14px;gap:8px;border:1px solid transparent;box-shadow:none;background:transparent;color:#546b8a}.play-tabs button span{font-size:12px;background:#e4ecf9;color:#637b9b;border-radius:7px;padding:3px 6px}.play-tabs button.selected{color:#1f54c5;background:white;border-color:#bbcef0;box-shadow:0 2px 0 #d3e0f6}.play-tabs .selected span{background:#285edf;color:white}
.play-board{border:1px solid #c7daf4;border-radius:26px;background:white;box-shadow:0 12px 36px #28528c09;overflow:hidden}.play-heading{padding:16px 24px;gap:15px;min-height:88px;background:white;border-bottom:1px solid #e2ebf8}.play-heading h2{font-size:25px;line-height:1.35;letter-spacing:-.7px;margin:4px 0 0}.play-heading .quiet-button{border:0;background:#f0f5fc;color:#546b8a;font-size:13px;padding:8px 13px;min-height:44px}.play-heading h2:focus{outline:none}
.play-workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr)}.play-clock-zone{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:16px 24px 19px;background:radial-gradient(#b8d1f0 1px,transparent 1px) 0 0/24px 24px,linear-gradient(145deg,#f1f8ff,#e8f2ff);border-right:1px solid #dce7f6}.clock-invitation{font-size:14px;font-weight:700;color:#456487;display:flex;align-items:center;gap:8px;margin:0 0 6px}.gesture-dot{display:inline-block;width:7px;height:18px;background:#285edf;border-radius:6px;transform:rotate(28deg)}#play-clock-wrap{width:100%;max-width:500px;position:relative}.play-clock-zone .clock{max-width:500px;width:100%;filter:drop-shadow(0 10px 6px #4275af0c)}.play-readout{font-size:32px;font-weight:900;letter-spacing:-.8px;margin:0 0 2px}.play-clock-zone .clock-labels{margin:8px 0 10px;font-size:12px;gap:17px}.play-moves{gap:7px}.play-moves button{min-width:56px;min-height:44px;font-size:14px;padding:8px 11px;border-color:#c9daf2;box-shadow:0 2px 0 #d6e3f5}.play-moves button[data-play-shift="5"]{background:#e7efff;color:#2058ce}.play-coach{padding:20px 26px;align-items:stretch;justify-content:center;gap:0}.buddy-guide{display:flex;align-items:center;gap:2px;margin:0 -10px 21px}.clock-buddy{display:block;object-fit:contain;width:144px;height:144px;flex-shrink:0;user-select:none;pointer-events:none}.buddy-words{flex:1}.play-tag{font-size:12px;font-weight:700;color:#4770a8}.play-coach h3{font-size:22px;line-height:1.45;letter-spacing:-.7px;margin:6px 0 7px}.play-coach .buddy-words p{font-size:15px;line-height:1.7;margin:0;color:#536984}.time-bridge{margin:0;padding:17px 17px 8px;background:#f7faff;border:2px solid #d9e6f8;border-radius:19px;transition:background .15s,border-color .15s,transform .15s}.bridge-labels{font-size:14px;gap:6px;margin:0 0 12px;color:#546b8a}.destination{color:#2057c7;font-weight:800}.bridge-pieces{gap:9px;margin:0 0 5px;min-height:82px}.bridge-pieces span{display:flex;justify-content:center;align-items:center;gap:7px;border:2px dashed #d4b661;border-radius:13px;background:linear-gradient(to right,#ffcf50 var(--fill),#fff9e9 var(--fill));color:#7c621b;font-size:22px;padding:16px 8px;min-height:80px}.bridge-pieces span b{font-size:22px;font-weight:600}.bridge-pieces span.filled{border-style:solid;border-color:#edb42a;color:#584208;box-shadow:0 4px 0 #e9ba44}.time-bridge input{height:36px;margin:3px 0;accent-color:#285edf}.play-coach .remaining{font-size:17px;font-weight:800;margin:0 0 5px;text-align:center;color:#2655ad}.time-bridge.drop-ready{background:#fff4c6;border-color:#e7ae16;transform:scale(1.025)}.piece-tray{display:flex;align-items:center;gap:16px;padding:20px 8px 6px}.time-piece{display:flex;align-items:baseline;justify-content:center;gap:3px;width:90px;min-width:90px;height:68px;min-height:68px;border:1px solid #eeb835;background:#ffce50;color:#513d07;border-radius:15px;box-shadow:0 5px 0 #dcaa2b;padding:12px 8px;position:relative;touch-action:none;cursor:grab;user-select:none}.time-piece:hover:not(:disabled){background:#ffda72}.time-piece strong{font-size:28px;line-height:1}.time-piece span{font-size:18px;font-weight:800}.time-piece i{font-style:normal;font-size:15px;position:absolute;right:8px;bottom:3px;color:#896310}.time-piece:active{cursor:grabbing}.time-piece.being-dragged{opacity:.35}.piece-tray p{font-size:15px;font-weight:700;line-height:1.5;color:#4e6384;margin:0}.piece-tray small{display:block;font-size:13px;font-weight:400;margin-top:4px}.piece-ghost{position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,-50%) rotate(-6deg);width:90px;height:68px;display:grid;place-items:center;border-radius:15px;background:#ffce50;border:2px solid #dfad28;box-shadow:0 8px 18px #593f1433;color:#513d07;font-size:27px;font-weight:900}.play-listen{align-self:flex-end;font-size:13px;padding:7px 10px;min-height:44px;margin:8px 0 0;color:#596c87}.play-bottom{background:#fcfdff;padding:15px 24px;min-height:75px;border-top:1px solid #e2eaf6;gap:15px}.play-feedback{font-size:16px;font-weight:600;line-height:1.7;color:#546b8a}.play-feedback.won{color:#126a4c}.play-feedback.won:before{content:'✓';display:inline-grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#def3e8;margin-right:8px;font-weight:900}.play-bottom button{min-height:44px;font-size:14px;padding:8px 16px}.play-note{font-size:12px;text-align:center;margin:12px 0 0;color:#657994}.target-card{background:#fff7dc;border:2px solid #efdb9c;border-radius:19px;padding:22px;margin:0 0 20px}.target-card span{font-size:14px}.target-card strong{display:block;font-size:32px;letter-spacing:-.8px;color:#604913}.target-card small{display:block;font-size:14px;margin-top:13px;color:#856e35}.mission-actions{display:flex;gap:15px;align-items:center}.mission-actions .primary{font-size:15px;padding:10px 21px;min-height:44px}.mission-actions .help-button{padding:10px;color:#617592}.mission-won .clock{filter:drop-shadow(0 0 12px #54ba8930)}
.match-intro{display:flex;align-items:center;justify-content:center;gap:13px;padding:6px 28px 0;max-width:910px;margin:auto;text-align:left}.match-intro .clock-buddy{width:102px;height:102px}.match-intro p{font-size:16px;line-height:1.6;color:#546b8a;flex:1;margin:0}.match-intro strong{display:block;color:#243f66;font-size:18px}.match-intro .match-count{font-size:14px;background:#edf4ff;padding:8px 12px;border-radius:20px;white-space:nowrap;margin:0}.match-grid{max-width:920px;gap:28px;padding:0 28px 22px}.match-grid h3{font-size:14px;font-weight:700;margin:5px 0 12px}.match-card{min-height:112px;border:2px solid #c9dcf4;border-radius:19px;background:#f7faff;font-size:27px;font-weight:850;letter-spacing:-.7px;padding:20px 12px;margin-bottom:14px;box-shadow:0 5px 0 #dce8f8}.match-grid>div:nth-child(2) .match-card{border-color:#efdcab;background:#fffbef;box-shadow:0 5px 0 #f2e6c5}.match-card span{font-size:13px;font-weight:500;letter-spacing:0;margin-top:8px}.match-card.picked,.match-grid>div:nth-child(2) .match-card.picked{background:#e7f0ff;border-color:#326be7;box-shadow:0 5px 0 #aec9fa;transform:translateY(-2px)}.match-card.matched,.match-grid>div:nth-child(2) .match-card.matched{background:#e8f7ef;border-color:#8ac7a8;box-shadow:0 3px 0 #d0eadc;color:#186749;opacity:1}
.workspace{grid-template-columns:195px minmax(0,1fr)}.lesson{font-size:14px;padding:9px 8px;gap:9px}.lesson-num{width:28px;height:28px;font-size:12px;border-radius:9px}.lesson small{font-size:11px}.lesson-body .clock{max-width:400px}.activity-title{padding:15px 22px}.coach{padding:26px}.coach h2{font-size:25px}.clock-controls button{font-size:13px;padding:8px 11px}.help-button{min-height:44px}.underbar{padding:12px 22px}.page-head .badge{font-size:13px}.answer-grid button{font-size:20px;min-height:68px}.answer-fields select{font-size:20px;min-height:48px}.setting strong{font-size:16px}footer{font-size:11px;max-width:1220px;padding:0 0 18px}
@media(min-width:1000px) and (max-height:820px){#play-clock-wrap,.play-clock-zone .clock{max-width:410px}.play-heading{min-height:76px;padding:11px 22px}.play-heading h2{font-size:23px}.play-clock-zone{padding-top:12px;padding-bottom:14px}.play-readout{font-size:28px}main{padding-top:15px}.buddy-guide{margin-bottom:15px}.play-topline{margin-bottom:8px}.play-tabs{margin-bottom:11px}}
@media(max-width:1000px){.header{padding:10px 22px;gap:5px 16px}.header nav{order:3;flex-basis:100%;justify-content:flex-start;overflow:auto}.header nav button{font-size:13px;padding:8px 11px}.sound{margin-left:auto}.play-workspace{grid-template-columns:minmax(0,1.12fr) minmax(300px,1fr)}.play-coach{padding:18px}.clock-buddy{width:115px;height:130px}.play-coach h3{font-size:20px}.play-coach .buddy-words p{font-size:14px}.play-clock-zone{padding:18px 14px}.play-clock-zone .clock{max-width:440px}.play-heading h2{font-size:23px}.activity{grid-template-columns:1fr}.workspace{grid-template-columns:160px minmax(0,1fr)}footer{padding:0 22px 18px}}
@media(max-width:740px){main{padding:14px 16px 20px}.header{padding:8px 16px;gap:4px 12px}.brand{font-size:20px}.brand-clock{width:33px;height:33px;font-size:28px;line-height:32px}.brand small{display:none}.header nav{gap:0}.header nav button{font-size:12px;padding:8px 10px}.play-topline h1{font-size:20px}.play-topline{margin:0 0 8px}.play-tabs{gap:3px;margin-bottom:11px}.play-tabs button{font-size:13px;flex:1;padding:7px 6px;gap:5px;justify-content:center;white-space:nowrap}.play-tabs button span{font-size:11px;padding:2px 4px}.play-board{border-radius:21px}.play-heading{padding:13px 17px;min-height:76px}.play-heading h2{font-size:21px}.play-heading .eyebrow{font-size:11px}.play-workspace{grid-template-columns:1fr}.play-clock-zone{padding:12px 17px 16px;border-right:0;border-bottom:1px solid #dce7f6}.play-clock-zone .clock,#play-clock-wrap{max-width:330px}.clock-invitation{font-size:13px;margin-bottom:5px}.play-readout{font-size:28px}.play-clock-zone .clock-labels{font-size:11px;margin:6px 0 9px}.play-coach{padding:15px 22px 18px}.buddy-guide{margin:-2px 0 12px;justify-content:center;gap:5px}.clock-buddy{width:95px;height:105px}.buddy-words{flex:0 1 auto}.play-coach h3{font-size:21px;margin:4px 0}.play-coach .buddy-words p{font-size:14px}.time-bridge{padding:13px 14px 8px}.bridge-pieces{min-height:70px}.bridge-pieces span{min-height:70px}.piece-tray{justify-content:center;padding-top:16px}.play-listen{margin:4px 0 -7px}.play-bottom{padding:14px 18px;align-items:center;flex-direction:row;flex-wrap:wrap;min-height:73px}.play-feedback{font-size:15px}.play-note{font-size:11px;text-align:left;line-height:1.7}.target-card{margin-bottom:13px;text-align:center;padding:18px}.target-card strong{font-size:29px}.mission-actions{justify-content:center}.match-intro{padding:10px 17px 7px;gap:4px}.match-intro .clock-buddy{width:78px;height:87px}.match-intro p{font-size:13px}.match-intro strong{font-size:15px}.match-intro .match-count{font-size:12px;padding:6px 9px}.match-grid{padding:0 17px 14px;gap:16px}.match-card{font-size:23px;min-height:108px;padding:19px 7px}.match-grid h3{font-size:13px}.match-card span{font-size:12px}.workspace{display:block}.lessons{display:flex;flex-direction:row;overflow:auto;margin-bottom:12px}.lesson{flex-shrink:0;white-space:nowrap;font-size:13px}.lesson small,.side-note{display:none}.lesson-body .clock{max-width:330px}.coach{padding:22px}.page-head h1{font-size:24px}.stats .stat{padding:14px 10px}.answer-grid button{font-size:18px}footer{font-size:11px;display:block;line-height:1.8}footer span{display:block}}
@media(max-width:420px){main{padding:11px 12px 18px}.header{padding:7px 12px}.header nav button{font-size:12px;padding:8px}.play-topline h1{font-size:18px}.play-tabs button{font-size:12px;padding:6px 4px;gap:4px}.play-tabs button span{display:none}.play-heading{padding:12px 14px;min-height:73px}.play-heading h2{font-size:19px}.play-heading .quiet-button{font-size:12px;padding:7px 10px}.play-clock-zone .clock,#play-clock-wrap{max-width:292px}.play-clock-zone{padding:11px 13px 14px}.play-readout{font-size:27px}.play-coach{padding:13px 16px 17px}.play-coach h3{font-size:20px}.clock-buddy{width:92px;height:100px}.match-grid{gap:12px;padding:0 13px 10px}.match-card{font-size:20px;min-height:107px}.match-card span{font-size:11px}.match-intro .clock-buddy{width:65px;height:80px}.match-intro strong{font-size:14px}.match-intro{padding:7px 12px}.match-intro .match-count{padding:5px 7px}.bridge-labels{font-size:13px}.play-moves button{min-width:55px}.badge{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{body{background:white}.header,.play-tabs,.play-note{display:none}.play-board{box-shadow:none}main{max-width:none}.clock-buddy{max-width:90px}}