/* A single mobile stage and button component for every activity. */
:root{--paper:#0d1513}
.site-header{padding-top:max(4px,env(safe-area-inset-top));padding-bottom:4px;min-height:46px}
.intro h1{font-size:18px}.routine-bar{margin-bottom:3px}
.activity-card{padding:9px 14px 10px;background:#17251f;border-radius:27px}
.card-top{padding:0 1px;gap:8px;min-height:36px}.card-actions{display:flex;align-items:center;gap:9px}
#step{font-size:9px;letter-spacing:1px;opacity:.65}
#reset-button{border:0;background:transparent;color:#a7b59e;min-height:40px;padding:6px 0 6px 7px;font-size:10px;display:flex;align-items:center;gap:4px}
#reset-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#reset-button:disabled{opacity:.24}
.illustration.story-root{height:auto;display:block;max-width:360px;margin:auto}
.scene-visual{position:relative;width:min(100%,305px);aspect-ratio:1;margin:0 auto 3px;isolation:isolate}
.story-root[data-phase-count="7"] .scene-visual,.story-root[data-phase-count="6"] .scene-visual,.story-root[data-phase-count="4"] .scene-visual{width:min(100%,265px)}
.character-sprite{position:absolute;inset:0;margin:auto;object-fit:contain;max-width:100%;max-height:100%;transform-origin:50% 78%;filter:saturate(.8) brightness(.84);user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}
.sprite-current{z-index:2}.sprite-previous{z-index:1}
.story-controls{display:grid;grid-template-columns:repeat(var(--columns,3),minmax(0,1fr));gap:8px;max-width:320px;margin:0 auto}
.story-controls[data-count="1"]{max-width:112px}.story-controls[data-count="2"]{max-width:240px}
.story-choice{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:83px;padding:5px 3px 6px;border:1px solid #b8c5a91f;border-radius:17px;background:#c5d5b109;touch-action:none;transition:background .2s,opacity .2s}
.story-choice:not(:disabled){cursor:grab}.story-choice:not(:disabled):active{background:#c5d5b11b}
.story-choice.is-locked{opacity:.34}.story-choice.is-done{opacity:.72;background:#8fa9750b;border-color:#b8c5a920}
.story-choice.is-done .prop-picture{opacity:.6}.story-choice[data-state="playing"]{opacity:.95;background:#c5d5b11c}
.prop-picture{display:block;flex:none;width:56px;height:56px;background-repeat:no-repeat;background-position:center;background-size:contain;filter:saturate(.8) brightness(.87)}
.choice-label{font-size:10px;line-height:1.25;min-height:13px;color:#b7c2ac;text-align:center;white-space:normal}
.choice-tick{position:absolute;right:5px;top:4px;display:grid;place-items:center;background:#31482e;color:#c6d4b3;border-radius:50%;width:20px;height:20px;font-size:12px}
.story-cue{font-size:11px;line-height:1.4;margin:8px 0;color:#a7b29e;text-align:center;min-height:16px;font-weight:400}
.story-cue:focus{outline:none}
.activity-copy .time-range{font-size:9px;letter-spacing:.8px;margin:0 0 4px}.activity-copy h2{font-size:24px;line-height:1.15}
.countdown{grid-template-columns:65px auto;column-gap:10px;max-width:fit-content;margin:6px auto 0;min-height:78px;align-items:center}
.sand-clock{width:65px;height:84.5px;grid-row:1/3}
.sand-clock canvas{display:block;width:100%;height:100%}
.sand-clock{border:0;padding:0;background:transparent;color:inherit;touch-action:manipulation}
.sand-clock:disabled{opacity:1;cursor:default}.sand-clock:not(:disabled){cursor:pointer}
.sand-clock:focus-visible{outline:2px solid #adc397;outline-offset:3px;border-radius:12px}
.timer-caption{max-width:155px;line-height:1.5}
.timer-caption{font-size:7px;letter-spacing:1px;align-self:end;padding-bottom:3px}.timer{font-size:24px;margin:0;line-height:1.1;align-self:start}
.countdown.resting{margin-top:8px;min-height:0;display:block}.countdown.resting .timer-caption{display:none}.countdown.resting .timer{font-size:18px;margin-bottom:4px}
.next-card{min-height:96px;padding:6px 14px;gap:12px;margin-top:9px;background:#182723;border-radius:22px}
.next-card{position:relative}.next-card-button{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit;background:transparent;touch-action:manipulation;cursor:pointer}.next-card-button:disabled{cursor:default}.next-card-button:focus-visible{outline:2px solid #adc397;outline-offset:3px}
.next-art{width:84px;height:84px}.character-thumbnail{display:block;width:100%;height:100%;background-repeat:no-repeat;filter:saturate(.75) brightness(.8)}
.next-card h2{font-size:20px}.next-card .eyebrow{font-size:7px}.steps{margin:0}.steps button{height:40px}
.overview-item .character-thumbnail{width:74px;height:74px;flex:none}
.character-picker{border:0;padding:0;margin:12px 0 20px;min-width:0}.character-picker legend{font-size:11px;color:#a7b29e;margin-bottom:8px}
#character-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.character-option{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;border:1px solid #b8c5a926;border-radius:16px;cursor:pointer;background:#c5d5b108;font-size:12px}
.character-option:has(input:checked){border-color:#a6b790;background:#c5d5b11a}.character-option:has(input:focus-visible){outline:2px solid #adbe9b;outline-offset:3px}
.character-option input{position:absolute;opacity:0;width:1px;height:1px}.character-option img{object-fit:contain;filter:saturate(.8) brightness(.84)}
#character-storage-note{font-size:10px;color:#b7ac91;line-height:1.5}
.story-choice,.prop-picture{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.story-choice.gesture-pressed{background:#c5d5b116}.story-choice.is-drag-source .prop-picture{opacity:.2}
.scene-visual::after{content:"";position:absolute;inset:4%;border:1px solid transparent;border-radius:45%;pointer-events:none;transition:border-color .2s,background .2s;z-index:4}
.scene-visual.is-drop-target::after{border-color:#b7cda449;background:#b7cda409}
.dragged-prop,.object-flight{position:fixed;z-index:1000;pointer-events:none;opacity:.95;background-size:contain!important;will-change:transform}
.sprite-current[data-ambient="breathe"]{animation:quiet-breathe 6s ease-in-out infinite}
@keyframes quiet-breathe{50%{transform:scale(1.016) translateY(-2px)}}
#undo-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 28px);padding:5px 9px 5px 15px;background:#25372a;border:1px solid #c5d5b133;border-radius:17px;box-shadow:0 4px 25px #0005;font-size:12px;white-space:nowrap}
#undo-button{border:0;border-radius:12px;min-height:44px;padding:9px;background:#adc39718;color:#d0ddbf;font-size:12px}
#app-error{padding:14px;border-radius:16px;border:1px solid #bd9c7133;color:#cbbb9b;font-size:13px}
@media(max-width:360px){
 .scene-visual{width:min(100%,280px)}.story-choice{min-height:77px}.prop-picture{width:51px;height:51px}.choice-label{font-size:9px}
 .story-controls{gap:7px}.story-cue{font-size:10px}.next-card h2{font-size:18px}.card-actions{gap:6px}
}
@media(max-height:740px) and (max-width:520px){
 .site-header{min-height:40px}.intro h1{font-size:16px}.activity-card{padding:7px 11px 8px}
 .scene-visual{width:min(100%,245px)}.story-root[data-phase-count="7"] .scene-visual,.story-root[data-phase-count="6"] .scene-visual,.story-root[data-phase-count="4"] .scene-visual{width:min(100%,205px)}
 .story-choice{min-height:70px;padding:3px 2px 5px;border-radius:14px}.prop-picture{width:46px;height:46px}
 .story-controls{gap:6px}.story-cue{margin:6px 0;font-size:10px}.activity-copy h2{font-size:21px}
 .countdown{grid-template-columns:54px auto;min-height:64px;margin-top:3px}.sand-clock{width:54px;height:70.2px}.timer{font-size:22px}
 .next-card{min-height:85px}.next-art{width:72px;height:72px}.next-card h2{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.sprite-current[data-ambient]{animation:none!important}.story-choice,.scene-visual::after{transition:none}}

.story-controls[data-count="7"]{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.story-controls[data-count="7"] .story-choice{grid-column:span 2}
.story-controls[data-count="7"] .story-choice:nth-child(5){grid-column:2/span 2}
#character-choices{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}

/* Leave room for the next activity on short phones without shrinking the artwork. */
@media(max-height:740px) and (max-width:360px){.intro{display:none}}