/* Number keys and drawing paths share the same quiet, tactile play surface. */
.activity-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.activity-card{grid-column:span 2}
.activity-card.new-activity{grid-column:span 3;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.new-activity .activity-art{height:100%;aspect-ratio:auto;min-height:240px}
.new-activity .activity-art img{object-fit:cover}
.new-activity .activity-copy{justify-content:center}
.new-activity .activity-mark{font-size:2rem}
.tracing-card-preview{position:absolute;left:38%;top:38%;height:54%;width:27%;border:0;background:transparent}
.tracing-card-preview path{fill:none;stroke:#2d7b64;stroke-width:28;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 25}
.tracing-card-preview circle{fill:#ffc747;stroke:#214b3e;stroke-width:5}
[data-mode=delivery] .play-scene{background-position:center top;padding-top:175px;min-height:650px}
.delivery-play{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.8fr);gap:24px;align-items:center;width:100%;max-width:840px}
.delivery-tray{padding:20px;background:#fff9e9f7;border:4px solid #d2a56a;box-shadow:0 8px 0 #98734350;border-radius:24px}
.delivery-apples{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:20px 0;min-height:100px;align-content:center}
.delivery-apple{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;min-height:0;padding:0;background:#fff;border:1px solid #ddc89f;border-radius:12px}
.delivery-apple>.vocab-picture{width:100%;height:auto;aspect-ratio:1}
.delivery-apple.counted{border:2px solid #2c7658;background:#edf6d9}
.delivery-count{position:absolute;right:0;bottom:-4px;border-radius:50%;background:#245747;color:white;width:24px;height:24px;display:grid;place-items:center;font:800 .9rem Nunito}
#delivery-tally{font-size:.94rem;line-height:1.5;min-height:2.7em}
.number-station{min-width:0;max-width:100%;padding:20px;border:3px solid #183e32;background:#245747;color:#fff9e8;border-radius:25px;box-shadow:0 8px 0 #153e30}
.number-station-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}
#number-display{min-width:100px;min-height:65px;border:3px solid #b1c3a5;background:#fbf8e9;border-radius:13px;display:grid;place-items:center;color:var(--ink);font:600 2.7rem Fredoka;letter-spacing:.08em}
.number-layouts{display:flex;gap:6px;margin-bottom:16px}
.number-layouts button{flex:1;min-height:44px;font-size:.9rem;padding:8px;background:transparent;color:white;border:1px solid #8daa96;border-radius:11px}
.number-layouts button[aria-pressed=true]{background:#dfeecb;color:#204b3e;border-color:#dfeecb}
.number-keys{display:grid;gap:9px;min-width:0}
.number-key-row{display:flex;gap:9px;justify-content:center}
.number-key-row button{flex:1;min-width:0;min-height:55px;font:600 1.9rem Fredoka;background:#fff2c8;color:#204b3e;border-radius:11px;border:1px solid #cbbc92;padding:8px;box-shadow:0 4px 0 #aaa27c}
.number-key-row button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #aaa27c}
.number-pad .number-key-row:last-child{justify-content:flex-start}
.number-pad .number-key-row:last-child button{max-width:calc((100% - 9px)*2/3)}
.number-row .number-key-row{flex-wrap:wrap}
.number-row .number-key-row button{flex:0 1 calc((100% - 36px)/5)}
.number-actions{display:flex;gap:10px;margin-top:17px}
.number-actions button{flex:1;min-width:0;border-radius:11px;font-size:1rem;padding:10px 8px}
#number-check{background:#ffd267;border-color:#ffd267;color:#204b3e}
#number-erase{background:#fcfaeb;color:#204b3e}
.number-actions button:disabled{opacity:.5}
.number-station .keyboard-note{font-size:.88rem;line-height:1.5;margin-top:14px}
[data-mode=delivery] .play-scene:has(.number-row) .delivery-play{max-width:100%;grid-template-columns:minmax(230px,.65fr) minmax(0,1.35fr)}
[data-mode=delivery] .number-row .number-key-row{flex-wrap:nowrap}
[data-mode=delivery] .number-row .number-key-row button{flex:1;font-size:clamp(1.25rem,2vw,1.8rem);padding-inline:0}
[data-mode=tracing] .play-scene{padding:190px 25px 25px;background-position:center top;background-size:100% auto;background-repeat:no-repeat;background-color:#dceac4;min-height:620px}
.trace-play{width:100%;max-width:540px;margin:auto}
.trace-paper{border:7px solid #cfa76a;border-radius:25px;background:#fffdf2;box-shadow:0 10px 0 #815f394d;padding:18px 20px}
.trace-paper-top{display:flex;align-items:center;gap:12px;text-align:left}
#trace-letter-label{font:600 2.5rem Fredoka;color:#245747}
.trace-paper-top .eyebrow{font-size:.7rem;letter-spacing:.09em}
#trace-strokes{font-size:.94rem;margin-top:3px}
.trace-choose{font-size:.8rem;margin-left:auto;max-width:105px}
.trace-choose select{padding:5px 10px;min-height:44px;margin-top:3px}
#trace-board{display:block;width:100%;max-height:410px;aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;margin:8px auto}
.trace-rule{fill:none;stroke:#dbdfcb;stroke-width:2;stroke-dasharray:5 6;pointer-events:none}
.trace-track{fill:none;stroke:#e2e9d6;stroke-width:42;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.trace-dashes{fill:none;stroke:#869c78;stroke-width:3;stroke-dasharray:3 9;stroke-linecap:round;pointer-events:none}
.trace-track.traced,.trace-progress{fill:none;stroke:#418b70;stroke-width:32;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}
#trace-dot{pointer-events:none}
#trace-dot circle{fill:#ffcf59;stroke:#245747;stroke-width:3}
#trace-dot text{font:800 21px Nunito;fill:#204b3e}
#trace-demo{fill:#e77735;stroke:#fff;stroke-width:4;pointer-events:none}
#trace-instruction{font-weight:800;min-height:2.6em;line-height:1.45;font-size:1rem}
.trace-actions{display:flex;gap:10px;justify-content:center;margin-top:10px}
.trace-actions button{font-size:.9rem;min-height:46px;padding:9px 12px}
.trace-actions button:first-child{background:#245747;color:#fffdf2;border-color:#245747}
@media(max-width:1000px){.activity-card.new-activity{display:block}.new-activity .activity-art{height:auto;aspect-ratio:1.6;min-height:0}.delivery-play{gap:15px}.number-station{padding:15px}.delivery-tray{padding:15px}.delivery-apples{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
 .activity-grid{grid-template-columns:1fr}.activity-card,.activity-card.new-activity{grid-column:auto}.new-activity .activity-art{aspect-ratio:1.5}
 [data-mode=delivery] .play-scene{padding:150px 12px 24px;background-size:auto 300px;background-repeat:no-repeat;background-color:#dfedbf}
 .delivery-play,[data-mode=delivery] .play-scene:has(.number-row) .delivery-play{grid-template-columns:1fr;max-width:400px;gap:20px}
 .delivery-apples{grid-template-columns:repeat(5,minmax(0,1fr));min-height:60px;margin:14px 0}
 .delivery-tray{padding:15px 10px}#delivery-tally{min-height:0}
 .number-station{padding:17px}.number-key-row button{min-height:56px}
 [data-mode=delivery] .number-row .number-key-row{gap:4px}
 [data-mode=delivery] .number-row{overflow-x:auto;padding:0 0 8px}
 [data-mode=delivery] .number-row .number-key-row{min-width:470px}
 [data-mode=delivery] .number-row .number-key-row button{font-size:1.35rem;border-radius:6px;min-height:48px}
 [data-mode=tracing] .play-scene{padding:145px 6px 18px;min-height:0;background-size:100% auto}
 .trace-paper{padding:14px 8px;border-width:5px;border-radius:20px}.trace-paper-top{gap:8px;padding:0 3px}
 .trace-paper-top .eyebrow{font-size:.65rem;max-width:115px}
 #trace-board{max-height:none;margin:5px auto}
 .trace-choose{font-size:.75rem;max-width:88px}
 .trace-actions{gap:6px}.trace-actions button{font-size:.82rem;padding:8px;flex:1}
 #trace-instruction{font-size:.94rem}
}