/* Reviewed responsive geometry. Phone layout follows the available content area;
   mat screens keep their established arrangement and replay position. */
.fullscreen-control,.fullscreen-guidance{display:none}
/* Narrow artwork protection; inputs, certificate canvas and photo crop stay native. */
.scene img,.scene .food,.scene .pim,.scene .map-board,.scene .map-progress,.scene .glass,.scene .check,.scene .block-button{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.scene img{-webkit-user-drag:none}
/* The fullscreen element owns its dimensions, rather than the emulated page. */
.scene:fullscreen{width:100%!important;height:100%!important;min-width:0;min-height:0;margin:0;background:#ddf2ed}
.scene:fullscreen .fullscreen-control{display:flex;align-items:center;justify-content:center;position:absolute;width:44px;height:44px;padding:9px;z-index:14}
.fullscreen-control svg{width:26px;height:26px;stroke-width:3}
/* Compact, consistently cropped checkpoints leave each plaza clear for PIM. */
.map-board .checkpoint{width:12%;transform:translate(-50%,-100%)}
.map-board .checkpoint-platform{height:16cqh}
.map-board .checkpoint-platform>img{width:100%;height:100%;object-fit:contain;object-position:bottom}
.map-board .checkpoint-number{left:50%;bottom:3%;width:24%;height:auto;aspect-ratio:1;font-size:clamp(14px,2cqw,24px);border-radius:50%}
.map-board .checkpoint-label{left:50%;transform:translateX(-50%);margin:3px 0 0;font-size:clamp(13px,1.5cqw,18px);padding:3px 6px}
.map-board .map-truck{width:12%}
@media(min-height:501px) and (orientation:landscape){
 #activity-screen .pim{--pose-scale:1;--foot:.995;width:calc(36cqh * var(--pose-scale));height:calc(54cqh * var(--pose-scale));left:calc(13cqw - 18cqh * var(--pose-scale));top:calc(83cqh - 54cqh * var(--pose-scale) * var(--foot));object-fit:fill}
 #activity-screen .pim[src*=point-food]{--pose-scale:1.013;--foot:.988}#activity-screen .pim[src*=point-mat]{--pose-scale:1.016;--foot:.984}#activity-screen .pim[src*=retry]{--pose-scale:1.032;--foot:.970}#activity-screen .pim[src*=success]{--foot:1}
 .scene[data-activity=F1] #activity-screen .food{left:26%;width:54%;top:44%;height:37%;gap:0}
 .scene[data-activity=F1] #activity-screen .count-apple{max-width:33.333%;width:auto;height:100%;aspect-ratio:369/420}
 .scene[data-activity=F1] #activity-screen .food[data-count="1"]>.count-apple{max-width:100%}
 .scene[data-activity=F1] #activity-screen .food[data-count="2"]>.count-apple{max-width:50%}
}
@media(max-height:500px) and (orientation:landscape){
 .scene{--phone-unit:min(calc(100cqw / 76.7),calc((100cqh - env(safe-area-inset-bottom)) / 35.5));--dock-bottom:max(8px,env(safe-area-inset-bottom));--safe-left:max(8px,env(safe-area-inset-left));--safe-right:max(8px,env(safe-area-inset-right))}
 .scene[data-screen=activity],.scene[data-screen=map]{min-height:calc(293px + env(safe-area-inset-bottom))}
 .scene[data-screen=activity]:not([data-step=C]) .phone-tabletop{top:calc(50cqh - var(--table-pixel) * 519)}
 .scene[data-screen=activity] .map-progress{left:39%;top:6px;width:25%;height:auto;aspect-ratio:500/80;max-width:190px}
 .scene[data-screen=activity] .pickup{height:50%;bottom:65%}.scene[data-screen=activity] .rounds b{font-size:10px}
 .scene[data-screen=activity] .group-dots{top:calc(100% + 3px);gap:6px;height:8px;min-height:8px;align-items:center}.scene[data-screen=activity] .group-dot{width:8px;height:8px;border:1.5px solid #16636c;background:#e9f8f3}.scene[data-screen=activity] .group-dot.earned{background:#eac058;border-color:#956c22}.scene[data-screen=activity] .group-dot.current{background:#fff;border:2px solid #005d66;outline:none}
 .scene[data-screen=activity] .progress-art circle[stroke="#057a86"]{display:none}
 .scene[data-screen=activity] .back{left:var(--safe-left);top:6px;width:16%;height:44px;min-height:44px;font-size:18px}
 .scene[data-screen=activity] .gear{right:var(--safe-right);top:6px;width:44px;height:44px;min-height:44px}
 #activity-screen .instruction-group{left:28%;width:50%;top:max(54px,calc(6 * var(--phone-unit)))}
 #activity-screen .instruction{height:calc(4.2 * var(--phone-unit));min-height:34px;display:flex;flex-direction:column;justify-content:center;font-size:clamp(16px,1.8 * var(--phone-unit),20px);line-height:1;padding:0 6px;white-space:normal}
 #activity-screen .instruction br{display:block}
 #activity-screen .instruction-actions{position:absolute;left:calc(100% + 10px);top:0;width:36%;margin:0!important}
 #activity-screen .hear{width:100%;height:44px;min-width:0!important;min-height:44px;padding:3px 4px;font-size:clamp(12px,1.4 * var(--phone-unit),15px);background:none;border-color:transparent;box-shadow:none;isolation:isolate;gap:3px}
 #activity-screen .hear::before{content:'';position:absolute;inset:5px 0;z-index:-1;border:1px solid #8cd4cb;border-radius:8px;background:linear-gradient(#f9fff8,#cbece5)}
 #activity-screen .hear svg{width:18px;height:18px;min-width:18px;min-height:18px}
 .scene:not([data-step=C]) #activity-screen .food{left:28%;width:50%;top:calc(10.9 * var(--phone-unit));height:calc(11.6 * var(--phone-unit));gap:calc(.8 * var(--phone-unit));align-items:flex-end}
 .scene:not([data-step=C]) #activity-screen .food>img{width:auto;height:100%;max-width:none;flex:0 0 auto;object-fit:contain;object-position:bottom}
 /* No-mat screens reserve a separate row for the smaller replay control. */
 .scene:not([data-step=B]) #activity-screen .instruction-group{top:54px}
 .scene:not([data-step=B]) #activity-screen .instruction-actions{left:0;top:100%;width:100%;display:flex;justify-content:center}
 .scene:not([data-step=B]) #activity-screen .hear{width:120px;height:44px}
 .scene:not([data-step=B]) #activity-screen .food{--food-start:calc(54px + 4.2 * var(--phone-unit) + 44px);left:28%;width:50%;top:var(--food-start);height:min(calc(15 * var(--phone-unit)),calc(100cqh - var(--food-start) - clamp(16px,calc(100cqh - 300px),36px) - max(44px,5.5 * var(--phone-unit)) - 8px));gap:0}
 .scene:not([data-step=B]) #activity-screen .food>img{max-width:none}
 .scene:not([data-step=B]) #activity-screen .food[data-count="3"]>img{max-width:33.333%}
 .scene[data-activity=F1] #activity-screen .food{height:calc(15 * var(--phone-unit));gap:0}
 .scene[data-activity=F1] #activity-screen .count-apple{max-width:33.333%;width:auto;height:100%;aspect-ratio:369/420}
 #activity-screen .choices{left:29%;width:49%;top:auto;bottom:clamp(16px,calc(100cqh - 300px),36px);height:calc(5.5 * var(--phone-unit));justify-content:center;gap:9%}
 #activity-screen .tile{width:16%;height:100%;min-width:44px;min-height:44px;font-size:clamp(30px,3.8 * var(--phone-unit),44px)}
 #activity-screen .hint{left:29%;width:49%;top:calc(22.6 * var(--phone-unit));height:calc(1.7 * var(--phone-unit));font-size:clamp(14px,1.5 * var(--phone-unit),17px);padding:0;line-height:1.05}
 #activity-screen .mat{left:29%;width:49%;top:calc(24.5 * var(--phone-unit));height:calc(5.3 * var(--phone-unit));min-height:44px;border-width:3px}
 #activity-screen .mat::after{inset:4px}#activity-screen .mat.correct::before,#activity-screen .mat.wrong::before{inset:-3px}
 #activity-screen .tray{left:33%;width:40%;padding:1px 8px}
 #activity-screen .tray,#activity-screen .check,#activity-screen .next{top:auto;bottom:var(--dock-bottom);height:44px;min-height:44px}
 #activity-screen .check,#activity-screen .next{right:var(--safe-right);width:19%}
 #activity-screen .matched{left:calc(78% - 20px);top:calc(29.8 * var(--phone-unit) - 40px);width:40px;height:40px;font-size:28px;border-radius:9px}
 #activity-screen .pim{--pose-scale:1;--foot:.995;object-fit:fill;width:calc(15 * var(--phone-unit) * var(--pose-scale));height:calc(22.5 * var(--phone-unit) * var(--pose-scale));left:calc(13% - 7.5 * var(--phone-unit) * var(--pose-scale));top:calc(32 * var(--phone-unit) - 22.5 * var(--phone-unit) * var(--pose-scale) * var(--foot))}
 #activity-screen .pim[src*=point-food]{--pose-scale:1.013;--foot:.988}#activity-screen .pim[src*=point-mat]{--pose-scale:1.016;--foot:.984}#activity-screen .pim[src*=retry]{--pose-scale:1.032;--foot:.970}#activity-screen .pim[src*=success]{--pose-scale:1;--foot:1}
 #activity-screen .feedback{left:1.5%;top:max(54px,calc(6.6 * var(--phone-unit)));width:24%;min-height:38px;padding:5px;font-size:clamp(14px,1.6 * var(--phone-unit),18px);line-height:1.04}
 #activity-screen .message-icon{width:22px;height:22px;min-width:22px;min-height:22px}
 #activity-screen .count-mark{min-width:26px;min-height:26px;font-size:21px}
 .map-board{width:100%;height:100%}.map-board .map-art{object-fit:cover}
 .map-board .map-compact{left:37%;width:26%;top:1%}.map-board .map-compact small{font-size:12px;line-height:1.05;margin-top:2px}
 .map-board .checkpoint{width:clamp(80px,12cqw,100px);transform:translate(-50%,-100%);font-size:14px}
 .map-board .checkpoint-platform{height:calc(6.5 * var(--phone-unit));filter:drop-shadow(0 2px 2px #24697655)}.map-board .checkpoint-platform>img{width:100%;height:100%;object-fit:contain;object-position:bottom}
 .map-board .checkpoint-number{left:49%;bottom:5%;width:24%;height:auto;aspect-ratio:1;border-radius:50%;font-size:clamp(12px,2.5cqh,16px)}
 .map-board .checkpoint-label{margin:3px 0 0;position:relative;left:50%;transform:translateX(-50%);width:max-content;max-width:none;padding:3px 6px;font-size:14px;line-height:1.05}.map-board .checkpoint-label>span{font-size:12px}
 .map-board .map-truck{width:10%}.map-board .map-continue{bottom:max(2%,env(safe-area-inset-bottom));min-height:44px;height:44px;padding:3px 6px;font-size:19px;line-height:1.05;width:36%;left:32%}
 .map-board>.back{font-size:18px;width:20%;height:44px;top:3%;left:max(3%,env(safe-area-inset-left))}.map-board>.gear{width:44px;height:44px;top:3%;right:max(3%,env(safe-area-inset-right))}
 .fullscreen-control{display:flex;align-items:center;justify-content:center;position:absolute;right:calc(var(--safe-right) + 54px);top:6px;width:44px;height:44px;min-height:44px;z-index:14;border-radius:10px;padding:9px}.fullscreen-control svg{width:26px;height:26px;stroke-width:3}
 .fullscreen-guidance:not(:empty){display:block;position:absolute;right:var(--safe-right);top:54px;max-width:210px;font-size:13px;line-height:1.1;padding:6px;border-radius:8px;background:#fffdf0;color:#073f47;z-index:16;box-shadow:0 2px 6px #134a4a33}
 /* Keep all completion actions visible, including with browser bars present. */
 .completion-screen{padding:56px 3% 8px}
 .completion-grid{grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:3%;height:100%;align-items:center}
 .completion-controls{display:grid;grid-template-columns:1fr 1fr;gap:4px 6px;padding:7px 10px;margin:0;overflow:auto;max-height:100%}
 .completion-controls>p,.completion-controls>label,.completion-controls>input,.completion-controls>.photo-action-row,.completion-controls>small{grid-column:1/-1}
 .completion-controls p{font-size:12px;line-height:1.1}.completion-controls label{font-size:14px;line-height:1.1}
 .completion-controls input{height:44px;min-height:44px;font-size:16px;padding:4px 8px}
 .completion-controls .completion-action{height:44px;min-height:44px;padding:4px;font-size:16px}
 .completion-controls small{font-size:11px;grid-row:7}
 #certificate-canvas{width:min(100%,calc((100cqh - 64px) * 1426 / 1103));height:auto;max-height:calc(100cqh - 64px)}
}
@media(max-height:320px) and (orientation:landscape){.scene[data-screen=activity]{--dock-bottom:max(1px,env(safe-area-inset-bottom))}}
@media(max-height:320px) and (orientation:landscape){
 .map-board .checkpoint-platform{height:35px}
 .map-board .checkpoint-label{font-size:12px;padding:2px 5px}.map-board .checkpoint-label>span{font-size:11px}
}