/* A little theater in the city. One picture, one action. */
.practice{display:grid;grid-template-columns:auto auto;gap:9px 12px;align-items:center;justify-items:center}
#project-preview{grid-column:1;grid-row:2}.answer-card{grid-column:2;grid-row:2}
#show-trick{grid-column:1/-1;grid-row:3;border:2px solid #fff9e9;border-radius:18px;padding:8px 20px;min-height:44px;font-size:18px;font-weight:800;color:#51351f;background:#ffe9a8;box-shadow:0 4px 0 #bf862d;cursor:pointer}
#show-trick:disabled{opacity:.65;cursor:default}#show-trick span{margin-right:5px}
#trick-panel{grid-column:1/-1;grid-row:1;width:min(520px,calc(100vw - 24px));border:3px solid #fff8df;border-radius:27px;overflow:hidden;background:#fff4d8;box-shadow:0 6px 0 #bb7c2f,0 13px 30px #2f49743b;position:relative;color:#51351f}
#trick-panel[hidden]{display:none}
.trick-heading{display:flex;align-items:center;justify-content:space-between;padding:5px 9px 5px 19px;background:#ffdf8c;border-bottom:2px solid #e8b158;gap:6px}
.trick-heading h2{font-size:21px;line-height:1.2;margin:0;font-weight:900}
.trick-explanation{padding:9px 14px 7px;text-align:center;background:#fff4d8}
.trick-explanation p{margin:0;font-size:16px;line-height:1.3;font-weight:700}
.trick-recipe{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 8px;margin:7px 0}
.trick-recipe span{border:2px solid #e8b158;border-radius:12px;padding:4px 9px;background:#fffdf3;color:#087c89;font-size:19px;font-weight:900}
.trick-explanation #trick-hint{font-size:14px;font-weight:600}
#trick-panel{max-height:calc(var(--play-height,100dvh) - 155px);overflow-y:auto;overscroll-behavior:contain}
#trick-panel button{font-family:inherit;font-weight:800;cursor:pointer;min-height:44px;touch-action:manipulation}
.trick-close{width:44px;border:0;border-radius:50%;background:#fff1c9;color:#71512d;font-size:30px;flex-shrink:0}
.trick-scene{height:260px;background:url('assets/tricks/stage.png') center center/cover no-repeat;position:relative;overflow:hidden}
#trick-art{height:100%;padding:10px 33px 11px;position:relative}
.trick-drawing{height:100%;width:100%;overflow:visible;font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif}
.trick-caption{min-height:33px;padding:3px 15px 5px;text-align:center;font-size:23px;font-weight:900;line-height:1.2;background:#fff4d8}
.trick-caption.rhyme{font-size:17px;line-height:1.3}
.memory-scene .trick-scene{height:340px;background:#c7eff0}
.memory-scene #trick-art{padding:0}
.memory-scene .trick-drawing{overflow:hidden}
.trick-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:5px 10px;padding:5px 10px 12px}
.trick-controls button{border:0;border-radius:14px;background:#ffe3a0;color:#62431d;padding:8px 13px;font-size:16px}
.trick-controls #trick-primary{background:#087f86;color:white;box-shadow:0 3px 0 #075b61;padding:8px 21px;font-size:18px}
#trick-panel button:focus-visible,#show-trick:focus-visible{outline:3px solid #6d43b7;outline-offset:2px}
.bounce-once{animation:trick-bounce .55s ease-out;transform-box:fill-box;transform-origin:center bottom}
@keyframes trick-bounce{0%{transform:translateY(7px) scale(1.08,.92)}40%{transform:translateY(-19px) rotate(-8deg)}75%{transform:translateY(0) scale(.96,1.04)}100%{transform:none}}
.motion-off .bounce-once{animation:none}
.has-trick #show-trick{display:none}.has-trick #project-preview{display:none}.has-trick .answer-card{grid-column:1/-1}
@media(min-width:701px){.practice.has-trick{bottom:19px;gap:10px}.has-trick .answer-card{padding:10px 16px}.has-trick #answer{height:58px}.has-trick .question{font-size:38px}}
@media(max-width:700px){
 .practice{gap:6px;max-width:100%;width:auto;padding-bottom:5px}
 #project-preview{position:relative;bottom:auto;left:auto;transform:none}
 #trick-panel{width:min(460px,calc(100vw - 20px));border-radius:20px;border-width:2px;max-height:calc(var(--play-height,100dvh) - 134px);overflow-y:auto;overscroll-behavior:contain}
 .trick-heading{padding:2px 5px 2px 13px;position:sticky;top:0;z-index:2}.trick-heading h2{font-size:19px}
 .trick-scene{height:clamp(174px,48vw,240px)}#trick-art{padding:4px 12px 9px}
 .memory-scene .trick-scene{height:300px}
 .trick-caption{font-size:21px;min-height:29px}.trick-caption.rhyme{font-size:16px}
 .trick-controls{padding:3px 8px 9px;gap:4px}.trick-controls button{font-size:15px;padding:6px 11px}.trick-controls #trick-primary{font-size:17px;padding:7px 16px}
 #show-trick{font-size:17px;padding:6px 18px}.practice.has-trick{gap:7px}.has-trick .answer-card{padding:7px 10px}
}
@media(prefers-reduced-motion:reduce){.bounce-once{animation:none}}