*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#122a37;font-family:Georgia,serif;color:#27180e}body{display:grid;place-items:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#game{position:relative;width:360px;height:640px;isolation:isolate}#screen{position:absolute;width:360px;height:640px;transform:scale(var(--scale,1));transform-origin:top left;background-size:100% 100%;overflow:hidden}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #02f7ff;outline-offset:3px}button:disabled{cursor:default;opacity:.55}.art{position:absolute;object-fit:contain;pointer-events:none}.image-button{position:absolute;border:0;padding:0;background:none;display:block;min-height:28px;z-index:8;transition:filter .15s,scale .15s}.image-button img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.image-button:active{scale:.96}.image-button:not(:disabled):hover{filter:brightness(1.1)}.nav-home{position:absolute;z-index:20;top:7px;right:8px;border:1px solid #e8bc5f;border-radius:16px;background:#59130de8;color:#fff7cf;padding:5px 9px;font:12px Arial,sans-serif}.bottom-next{left:66%;top:91%;width:30%;height:7%}.bottom-back{left:4%;top:91%;width:30%;height:7%}.primary{left:20%;top:89%;width:60%;height:9%}.load-area{position:absolute;left:15%;top:84%;width:70%;text-align:center;background:#fff1d5e8;border:2px solid #d4a348;border-radius:15px;padding:10px;font:bold 13px Arial}.load-area progress{width:100%;accent-color:#9c1b17}.load-area button{margin-top:5px}.home-challenge{left:9%;top:61%;width:82%;height:10%}.home-practice{left:9%;top:73%;width:82%;height:10%}.home-demo{left:10%;top:85%;width:38%;height:8%}.home-learn{left:52%;top:85%;width:38%;height:8%}.timer{position:absolute;top:3px;left:8px;padding:3px 7px;border-radius:10px;background:#fff1d2;font:bold 10px Arial;z-index:10}.sequence{position:absolute;top:12.8%;left:11%;width:78%;height:77%;display:flex;flex-direction:column;gap:3px;margin:0;padding:0;list-style:none}.step{position:relative;flex:1;min-height:0;display:flex;align-items:center;padding:5px 27px 6px 29px;gap:6px;background:url('../ab-express-assets/page-9/question%20panel.webp') center/100% 100% no-repeat;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}.step img{width:30px;height:30px;object-fit:contain;pointer-events:none}.step span{font:bold 11px/1.12 Arial,sans-serif;pointer-events:none}.step.selected{filter:drop-shadow(0 0 4px #00ffff);outline:2px dashed #ffe23f;outline-offset:-10px}.step.dragging{opacity:.3}.drag-ghost{position:absolute!important;z-index:40;pointer-events:none;filter:drop-shadow(0 5px 4px #0008);height:58px;flex:none;width:281px}.train-title{left:5%;top:4%;width:90%;height:11%;z-index:12;animation:pop .65s both}.train-track{position:absolute;left:40%;top:25%;width:20%;display:flex;flex-direction:column;align-items:center;will-change:transform}.engine{width:88%;display:block;margin-bottom:-3px}.carriage{position:relative;width:100%;height:73px;flex:none}.carriage>.body{width:100%;height:100%;object-fit:contain}.carriage>.icon{position:absolute;left:23%;top:28%;width:54%;height:42%;object-fit:contain}.tunnel{left:29%;top:13%;width:42%;height:21%;z-index:5}.check-mark{position:absolute;left:73%;top:38%;width:22%;height:12%;object-fit:contain;animation:pop .5s both;z-index:8}.feedback-panel{left:8%;top:68%;width:84%;height:18%;z-index:8}.crashed .train-track{animation:shake .65s both}.smoke{position:absolute;left:35%;top:30%;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,#d0c5bcee,#635c55aa 45%,transparent 70%);animation:smoke 1.4s ease-out both;z-index:9}.comparison{position:absolute;left:5.5%;top:22.9%;width:89%;height:64.8%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(8,1fr);column-gap:9px;row-gap:1px}.compare-cell{padding:3px 9px;display:flex;align-items:center;gap:3px;font:bold 9px/1.06 Arial}.compare-cell img{width:19px;height:21px;object-fit:contain}.compare-cell.is-wrong{color:#941c12}.compare-cell.is-correct{color:#235320}.streaks{position:absolute;left:5%;top:34%;width:90%;display:flex;gap:6px;align-items:flex-end}.streak-node{width:20%;position:relative;opacity:.52;filter:grayscale(1)}.streak-node>img{width:100%;display:block}.streak-node>span{position:absolute;left:50.2%;top:19%;width:27%;height:34%;transform:translate(-50%,-50%);display:grid;place-items:center;font:bold 12px/1 Arial;color:#fff;text-align:center}.streak-node.completed{opacity:1;filter:none;animation:pop .6s both}.streak-node.current{opacity:1;filter:drop-shadow(0 0 4px #ffe757);animation:glow 1.8s infinite}.streak-node .tick{position:absolute;left:27%;top:50%;width:47%;height:47%;object-fit:contain}.timer-copy{position:absolute;left:13%;top:64.7%;width:74%;height:13%;background:#ffefc7;border:3px solid #bd8b39;border-radius:9px;display:grid;place-content:center;text-align:center;font:bold 17px/1.25 Georgia;padding:7px}.timer-copy small{font-size:13px}.reward-star{left:30%;top:23%;width:40%;height:24%;z-index:3;animation:star 3s ease-in-out infinite}.rays{position:absolute;left:20%;top:19%;width:60%;height:34%;background:repeating-conic-gradient(from 0deg,transparent 0deg 15deg,#ffdb5b80 15deg 25deg,transparent 25deg 40deg);border-radius:50%;animation:spin 15s linear infinite;opacity:.65}.enter{animation:enter .4s both}.learn-caption{position:absolute;left:10%;top:89%;width:80%;text-align:center;font:bold 12px Arial;color:#fff;text-shadow:0 1px 3px #000}.demo-caption{position:absolute;left:40%;top:94%;font:bold 11px Arial;color:#fff;text-shadow:0 1px 3px #000}#notice{position:absolute;left:3%;bottom:2%;width:94%;z-index:70;background:#fff4d8;color:#571c12;border-radius:8px;padding:8px;font:13px Arial;text-align:center;display:none}#notice.visible{display:block}#particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:30}.confetti{position:absolute;width:7px;height:11px;animation:fall 1.8s ease-out both}#rotate{display:none;position:fixed;inset:0;z-index:100;background:#142f41;color:#fff4cb;text-align:center;place-content:center;font:20px/1.5 Arial}#rotate span{font-size:70px}body.needs-portrait #rotate{display:grid}.save-error{position:absolute;inset:25% 8%;z-index:60;background:#fff2d4;border:3px solid #a73519;border-radius:15px;padding:24px;text-align:center;font:16px/1.5 Arial}.save-error button{padding:10px 20px;margin-top:20px}.pause-overlay{position:absolute;inset:0;z-index:50;background:#183449df;display:grid;place-content:center;text-align:center;color:white;font:bold 20px Arial}.pause-overlay button{padding:12px;border-radius:12px;margin:18px;border:2px solid #d9aa48;background:#fff0cd}.step:focus-visible{outline:3px solid cyan;outline-offset:-8px}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{opacity:0;transform:scale(.6)}65%{opacity:1;transform:scale(1.1)}100%{transform:scale(1)}}@keyframes star{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-9px) rotate(5deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes glow{50%{filter:drop-shadow(0 0 9px #fff157)}}@keyframes shake{20%,60%{translate:-5px 0;rotate:-3deg}40%,80%{translate:5px 0;rotate:3deg}}@keyframes smoke{from{transform:scale(.3);opacity:1}to{transform:translateY(-100px) scale(2);opacity:0}}@keyframes fall{0%{opacity:0;transform:translateY(-20px) rotate(0)}10%{opacity:1}100%{transform:translateY(300px) rotate(540deg);opacity:0}}
.landing-next{left:25%;top:84%;width:50%;height:12%}.train-window{position:absolute;inset:0;clip-path:inset(25% 0 0);-webkit-clip-path:inset(25% 0 0)}
#outgoing{position:absolute;width:360px;height:640px;transform:scale(var(--scale,1));transform-origin:top left;background-size:100% 100%;overflow:hidden}.nav-home{top:auto;bottom:4px;left:5px;right:auto}[data-page="learn"] .nav-home,[data-page="demo"] .nav-home{left:42%}.step{padding-left:29px;padding-right:39px}.step span{font-size:10.5px}.compare-cell:nth-child(even){color:#23491c}
.timer{top:10.8%;left:12%;font-size:10px;padding:1px 5px}.timer-copy{left:43%;top:66.8%;width:44%;height:8.3%;border:0;border-radius:10px;background:linear-gradient(100deg,#fcf8e5,#faf5df 65%,#f9efd8);box-shadow:0 0 8px 5px #faf5df;color:#10374a;font-size:16px}.timer-copy small{font-size:13px}
.reward-star{left:34%;top:24%;width:32%;height:20%}.rays{left:32%;top:24%;width:36%;height:20.25%}.reward-copy{position:absolute;left:20%;top:17.4%;width:60%;height:3.5%;background:#fff0c6;text-align:center;font:bold 19px Georgia;color:#12374a;z-index:4}.streak-node.completed{animation:none}.streak-node.gained{animation:pop .8s both}.streak-node.gained .tick{animation:pop .65s .45s both}
.reward-copy{top:16.3%;height:4.6%;display:flex;align-items:center;justify-content:center;background:#fff3d0}
body{height:100dvh}

.timeout-note{object-fit:contain}
.demo-footer{position:absolute;left:0;right:0;bottom:0;height:10%;background-size:360px 640px;background-position:center bottom;pointer-events:none}
.nav-home.image-button{width:64px;height:40px;bottom:0;padding:0;border:0;background:none;border-radius:0}
[data-page="learn"] .nav-home,[data-page="demo"] .nav-home{left:39%;width:22%;height:7%;bottom:2%}
#screen[aria-busy="true"] *,#game[data-transitioning="true"] #particles *{animation-play-state:paused!important}
.check-mark.success-mark{left:40%;top:27%;width:20%;height:12%}
.check-mark{transition:left .4s ease,top .4s ease,width .4s ease}
.bottom-next,.bottom-back,.nav-home.image-button{min-height:50px}
#game.edge-to-edge{background-size:cover;background-position:center}
.step{background:none;padding:5px 30px 6px 23px;isolation:isolate;gap:7px}
.compartment-frame{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.compartment-frame img{position:absolute;left:-6.142%;top:-16.586%;width:107.627%;height:116.586%;max-width:none;object-fit:fill}
.step>img{width:30px;height:30px;flex:0 0 30px}
.step span{font-size:11px;line-height:1.12}
#game.edge-to-edge [data-page="arrange"] .sequence{left:7%;width:86%;top:13%;height:75%;gap:8px}
#game.edge-to-edge [data-page="arrange"] .step span{font-size:12px}

.compartment-frame img{left:-6.556%;top:-31.501%;width:113.059%;height:153.066%}.step>img,.step>span{position:relative;top:-8%}.step{padding-right:35px}#game.edge-to-edge [data-page="arrange"] .step span{font-size:var(--step-font,11px)}
#game.edge-to-edge{background-image:none!important;overflow:hidden}


.demo-footer{background-size:360px var(--scene-height,640px)}
body.portrait-viewport{background-image:none;background-color:#122a37}
/* Learning footer: one aligned row, with Home as the central primary control. */
[data-page="learn"] .nav-home.image-button{left:32.5%;top:91%;bottom:auto;width:35%;height:7%;min-height:50px}
[data-page="learn"] .bottom-back{left:1%;width:29%}
[data-page="learn"] .bottom-next{left:70%;width:29%}
:is([data-page="practiceIntro"],[data-page="challengeIntro"],[data-page="reward"]) .primary{top:84%;height:7%}
:is([data-page="practiceIntro"],[data-page="challengeIntro"],[data-page="reward"]) .nav-home.image-button{left:30%;width:40%;top:92%;bottom:auto;height:6%;min-height:50px}
:is([data-page="arrange"],[data-page="compare"]) .nav-home.image-button{left:3%;width:35%;top:90%;bottom:auto;height:8%;min-height:50px}
:is([data-page="arrange"],[data-page="compare"]) .primary{left:42%;width:55%;top:90%;height:8%;min-height:50px}
[data-page="demo"] .nav-home.image-button{left:32.5%;top:91%;bottom:auto;width:35%;height:7%;min-height:50px}
[data-page="demo"] .bottom-back{left:1%;width:29%}
[data-page="demo"] .bottom-next{left:70%;width:29%}
/* Crop empty source margins so the primary action is visibly larger than Home. */
[data-page="practiceIntro"] .primary{left:50%;transform:translateX(-50%);width:min(68%,calc(var(--scene-height,640px)*.329645));height:auto;aspect-ratio:2124/451;overflow:hidden}
[data-page="practiceIntro"] .primary img{position:absolute;left:-1.5066%;top:-27.051%;width:103.0132%;height:159.202%;max-width:none;object-fit:fill}
/* Wider arranging compartments preserve eight rows and one centered action. */
[data-page="arrange"] .sequence,#game.edge-to-edge [data-page="arrange"] .sequence{left:6%;width:88%;top:11.3%;height:79.6%;gap:2px}
[data-page="arrange"] .step{padding-left:22px;padding-right:25px;gap:5px}
[data-page="arrange"] .step span,#game.edge-to-edge [data-page="arrange"] .step span{font-size:12px;line-height:1.12;min-width:0}
[data-page="arrange"] .primary{left:20%;width:60%;top:92%;height:7%;min-height:44px}
[data-page="arrange"] .timer{left:auto;right:3%;top:10.5%;font-size:9px}
[data-page="arrange"] .timer{left:2%;right:auto;top:93%;padding:3px 4px;font-size:11px}
[data-page="arrange"] .primary{left:50%;transform:translateX(-50%);width:min(60%,calc(var(--scene-height,640px)*.277666));height:auto;min-height:0;aspect-ratio:2142/540;overflow:hidden}
[data-page="arrange"] .primary img{position:absolute;left:-.0467%;top:-12.963%;width:100.187%;height:135.741%;object-fit:fill}
/* Crash choreography: the pausable game clock drives camera and particles. */
#screen.crashed{transform:scale(var(--scale,1)) translate(var(--impact-x,0px),var(--impact-y,0px)) rotate(var(--impact-roll,0deg))}
.crashed .train-track{animation:none}
.impact-scrim,.impact-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.impact-scrim{background:#071522;z-index:6;opacity:0}
.impact-canvas{z-index:7}
.impact-fallback{background:radial-gradient(circle at 50% var(--impact-y,30%),#fff1a0 0,#ff8d23 8%,transparent 30%)}
/* Keep arrangement content inside the cream panel and clear of its frame. */
[data-page="arrange"] .step{padding-left:32px;padding-right:36px;gap:7px}
[data-page="arrange"] .step>img{width:24px;height:24px;flex:0 0 24px}
/* Page 14 artwork supplies every border and compartment. */
.comparison{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.comparison .compare-cell{position:absolute;width:41%;height:6.8%;padding:0;border:0;background:none;display:block;color:#27180e;font:9px/1.12 Arial,sans-serif}
.comparison .compare-cell>img{position:absolute;left:4%;top:23%;width:16%;height:54%;object-fit:contain}
.comparison .compare-cell>span{position:absolute;left:24%;top:21%;width:70%;height:61%;display:flex;align-items:center;overflow-wrap:break-word}


/* All eight compartments must remain visible, including compact portrait screens. */
[data-page="arrange"] .sequence,#game.edge-to-edge [data-page="arrange"] .sequence{left:6%;width:88%;top:8.8%;height:82.1%;gap:2px;overflow:visible;touch-action:none}
[data-page="arrange"] .step{flex:1;min-height:0;height:auto;padding:0 36px 9px 32px;gap:7px;touch-action:none}
[data-page="arrange"] .step>img{width:clamp(28px,calc(var(--scene-height,640px)*.043),36px);height:clamp(28px,calc(var(--scene-height,640px)*.043),36px);flex:0 0 clamp(28px,calc(var(--scene-height,640px)*.043),36px);top:0;pointer-events:auto}
[data-page="arrange"] .step span,#game.edge-to-edge [data-page="arrange"] .step span{font-size:clamp(12.5px,calc(var(--scene-height,640px)*.0175),14px);line-height:1.08;top:0;min-width:0}
/* Crop source padding so challenge/reward primary actions retain reference prominence. */
:is([data-page="challengeIntro"],[data-page="reward"]) .primary{left:20%;top:82.5%;width:60%;height:auto;aspect-ratio:2112/551;overflow:hidden}
:is([data-page="challengeIntro"],[data-page="reward"]) .primary img{position:absolute;left:-1.42%;top:-15.06%;width:102.75%;height:131.58%;max-width:none;object-fit:fill}


/* Concise comparison labels: two deliberate lines inside the original cream insets. */
.comparison .compare-cell{font:600 11.5px/1.12 Arial,sans-serif;color:#182329}
.comparison .compare-cell>span{left:23.5%;width:71%;top:20%;height:64%;white-space:normal;letter-spacing:0}
.comparison .compare-cell.misplaced>span{color:#79201b}
.comparison .compare-cell.misplaced::after{content:'\00d7';position:absolute;left:1%;top:1%;width:12px;height:12px;border-radius:50%;background:#fff8e7;color:#9b2118;text-align:center;font:bold 12px/12px Arial;box-shadow:0 0 0 1px #b63729}

/* Dedicated challenge footer: time badge on the left, Start on the right. */
[data-page="arrange"].challenge-arrange .primary{left:36%;top:91.5%;width:58%;transform:none}
[data-page="arrange"].challenge-arrange .timer{left:3%;right:auto;top:92%;width:27%;height:6.8%;padding:2px 5px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid #deb955;border-radius:10px;background:linear-gradient(#fff8db,#f8d98e);box-shadow:0 2px 4px #24100070;color:#3e2415;overflow:hidden;font:700 10px/1 Arial,sans-serif;font-variant-numeric:tabular-nums;transform-origin:center}
.challenge-arrange .timer strong{font-size:22px;line-height:1.05;letter-spacing:.5px}
.challenge-arrange .timer::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:3px;background:#876022;transform:scaleX(var(--time-left,1));transform-origin:left}
[data-page="arrange"].challenge-arrange .timer.urgent{color:#fff8e7;border-color:#ffbd71;background:linear-gradient(#a42522,#651513);animation:timer-urgency 1s ease-in-out infinite}
[data-page="arrange"].challenge-arrange .timer.critical{animation-duration:.5s}
.challenge-arrange .timer.urgent::after{background:#ffe5a0}
@keyframes timer-urgency{0%,100%{transform:scale(1);box-shadow:0 0 3px #f43b2940}50%{transform:scale(1.045);box-shadow:0 0 12px #ff623caa}}
[data-page="arrange"].challenge-arrange .step span{font-weight:700}
[data-page="arrange"].challenge-arrange .step span,#game.edge-to-edge [data-page="arrange"].challenge-arrange .step span{font-size:14px;line-height:1.1;font-weight:700}

/* Baked artwork is revealed in fixed aligned sections; no moving rectangular cutouts. */
#screen.animated-challenge{background-image:none!important;background-color:#4388a5}
.challenge-art-section{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;animation:challenge-reveal .65s var(--reveal-delay) both}
.challenge-art-title{animation:challenge-reveal .65s both,challenge-title-glow 4s 1.2s ease-in-out infinite}
.challenge-art-star{animation:challenge-reveal .65s .55s both}
.animated-challenge .streaks{z-index:2}
.streak-slot{width:20%;min-width:0;animation:challenge-tunnel-enter .65s var(--reveal-delay) both}
.streak-slot .streak-node{width:100%}
.animated-challenge .timer-copy{animation:challenge-reveal .65s .75s both}
.challenge-star-halo{position:absolute;left:32%;top:46%;width:36%;height:16%;border-radius:50%;background:radial-gradient(ellipse,#fff3b060,transparent 68%);pointer-events:none;mix-blend-mode:screen;animation:challenge-halo 3s 1.2s ease-in-out infinite;opacity:0}
.challenge-sparkles{position:absolute;inset:0;pointer-events:none}
.challenge-sparkles i{position:absolute;width:7px;height:7px;background:#fff7bd;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;animation:challenge-twinkle 2.8s ease-in-out infinite}
@keyframes challenge-reveal{from{opacity:0}to{opacity:1}}
@keyframes challenge-tunnel-enter{0%{opacity:0;transform:translateY(12px) scale(.92)}70%{opacity:1;transform:translateY(-2px) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes challenge-title-glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.10)}}
@keyframes challenge-star-glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.17) saturate(1.08)}}
@keyframes challenge-halo{0%,100%{opacity:.15;transform:scale(.95)}50%{opacity:.65;transform:scale(1.12)}}
@keyframes challenge-twinkle{0%,25%,100%{opacity:0;transform:scale(.5) rotate(0deg)}45%{opacity:1;transform:scale(1.2) rotate(45deg)}65%{opacity:0;transform:scale(.7) rotate(90deg)}}

/* Client wording is immutable; use the same full-copy sizing as practice. */
[data-page="arrange"].challenge-arrange .step span,#game.edge-to-edge [data-page="arrange"].challenge-arrange .step span{font-size:clamp(12.5px,calc(var(--scene-height,640px)*.0175),14px);line-height:1.08;font-weight:700}

/* Shared footer geometry; visible artwork is fitted using its actual alpha bounds. */
#screen .game-footer{position:absolute;left:4%;right:4%;bottom:1.5%;height:8%;display:flex;align-items:center;justify-content:center;gap:10px;z-index:20}
#screen .game-footer .image-button{position:relative;inset:auto;flex:1;max-width:62%;width:auto;height:100%;min-height:0;aspect-ratio:auto;padding:0;transform:none;overflow:visible;display:flex;align-items:center;justify-content:center}
#screen .game-footer .image-button:only-child{flex:0 1 62%}
#screen .game-footer .button-face{position:relative;display:block;overflow:hidden;pointer-events:none;flex:none}
#screen .game-footer.stacked{bottom:1.8%;height:16.5%;flex-direction:column;gap:5px}
#screen .game-footer.stacked .primary{flex:1.15;width:70%;max-width:70%}
#screen .game-footer.stacked .nav-home{flex:1;width:42%;max-width:42%}
#screen[data-page="compare"] .game-footer .primary{flex:1.5}
#screen[data-page="compare"] .game-footer .nav-home{flex:1}
#screen.challenge-arrange .game-footer .timer{position:relative;inset:auto;width:29%;height:88%;flex:0 0 29%;order:0}
#screen.challenge-arrange .game-footer .primary{max-width:none;flex:1}
#screen .game-footer .image-button{min-width:0}

/* Arrangement motion: no idle carriage movement; copy stays still while reading. */
.arrange-start[hidden]{display:none!important}
[data-page="arrange"] .step.selected{outline:0;filter:drop-shadow(0 0 3px #ffe18a) drop-shadow(0 5px 3px #46200888);translate:0 -3px;z-index:3}
[data-page="arrange"] .step{transition:filter .18s,translate .18s}
.arrange-start:not([hidden]) .button-face:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#fff4b9a6 49%,transparent 63%);transform:translateX(-130%);animation:arrange-shimmer 4s ease-in-out infinite;pointer-events:none}
@keyframes arrange-shimmer{0%,65%{transform:translateX(-130%)}90%,100%{transform:translateX(130%)}}
.arrange-clouds{position:absolute;inset:12% 0 40%;overflow:hidden;pointer-events:none}
.arrange-clouds img{position:absolute;left:-60%;top:7%;width:60%;height:auto;object-fit:contain;opacity:.38;pointer-events:none;animation:arrange-cloud 42s linear infinite;animation-delay:-10s;will-change:transform}
.arrange-clouds img:nth-child(2){top:35%;width:75%;animation-duration:56s;animation-delay:-29s;opacity:.3}
.arrange-clouds img:nth-child(3){top:66%;width:55%;animation-duration:48s;animation-delay:-39s;opacity:.34}
@keyframes arrange-cloud{to{transform:translateX(340%)}}
.departure-steam{position:absolute;inset:0;pointer-events:none;z-index:9}
.departure-steam i{position:absolute;left:calc(5% + var(--puff)*3%);bottom:calc(12% + var(--puff)*9%);width:35px;height:30px;border-radius:50%;background:radial-gradient(ellipse,#fff9,#eee5 45%,transparent 72%);animation:departure-puff .95s ease-out both}
@keyframes departure-puff{from{opacity:0;transform:scale(.3)}25%{opacity:.8}to{opacity:0;transform:translate(-14px,-35px) scale(2.2)}}
.departure-wheels{position:absolute;left:22%;right:22%;bottom:2%;height:9px;display:flex;justify-content:space-between;pointer-events:none}
.departure-wheels i{width:10px;height:10px;border:2px solid #25303a;border-radius:50%;background:repeating-conic-gradient(#657078 0 15deg,#20292b 15deg 90deg);animation:departure-wheel .22s linear infinite}
@keyframes departure-wheel{to{transform:rotate(360deg)}}

/* Scene-space steam stays attached to the moving chimney at emission. */
.engine-steam{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:hidden}

.victory-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:10}
.victory-confetti i{position:absolute;width:6px;height:10px;opacity:0;animation:victory-burst 3s cubic-bezier(.18,.6,.45,1) both;will-change:transform,opacity}
@keyframes victory-burst{0%{opacity:0;transform:translate(0,0) rotate(0)}8%{opacity:1}40%{opacity:1;transform:translate(calc(var(--dx)*.65),var(--rise)) rotate(calc(var(--turn)*.45))}80%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--drop)) rotate(var(--turn))}}

.victory-confetti .confetti-star{clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 96%,50% 72%,21% 96%,32% 57%,2% 35%,39% 35%);filter:drop-shadow(0 0 2px #fff6)}
.victory-confetti .ribbon{border-radius:2px;background-image:linear-gradient(90deg,#fff7,transparent 45%,#0002)}
.victory-confetti .confetti-shower{animation-name:victory-shower;animation-timing-function:linear}
@keyframes victory-shower{0%{opacity:0;transform:translate(0,0) rotate(0)}5%,85%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--drop)) rotate(var(--turn))}}
.victory-glow{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(ellipse at 50% 33%,#ffe28455,transparent 55%),linear-gradient(#12203822,#12203855);animation:victory-light 5.5s ease-out both}
@keyframes victory-light{0%{opacity:0}12%{opacity:1}30%{opacity:.65}50%{opacity:1}80%{opacity:.7}100%{opacity:0}}

/* Three-round challenge: generated copy and tunnels match the challenge target. */
.animated-challenge .streaks{left:17%;width:66%;gap:12px;background:none;box-shadow:none;justify-content:center}
.animated-challenge .streak-slot{width:30%;flex:0 1 30%}
.streak-node>img,.failed-tunnels div>img:first-child{clip-path:polygon(2% 97%,2% 70%,9% 65%,11% 49%,17% 35%,25% 23%,36% 14%,39% 3%,60% 3%,64% 14%,75% 23%,83% 35%,89% 49%,91% 65%,98% 70%,98% 97%)}
.dynamic-failure{position:absolute;background-size:100% 100%;pointer-events:none}
.failure-content{position:absolute;inset:11% 5% 7%;background:radial-gradient(ellipse,#fff3d0,#f6dfaa);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#351408;font:bold 15px/1.08 Georgia;text-align:center}
.failure-content>strong{font-size:17px}
.failed-tunnels{display:flex;justify-content:center;gap:12px;width:72%;height:44%;margin:2px 0 3px}
.failed-tunnels>div{position:relative;height:100%;width:27%}
.failed-tunnels img{width:100%;height:100%;object-fit:contain}
.failed-tunnels .failed-cross{position:absolute;left:28%;top:52%;width:44%;height:50%}
body{background-image:none;background-color:#122a37;overscroll-behavior:none}

.comparison-timeout-title{position:absolute;left:20%;top:5.3%;width:60%;height:8%;background:linear-gradient(180deg,#fee9c5,#feedd0 65%,#fff3d7);box-shadow:0 0 5px 4px #feedd0;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;color:#103c51;font:bold 12px/1.12 Arial;padding:1px;z-index:5}.comparison-timeout-title strong{font-size:19px;color:#981f19}

.timeout-order-panel{position:absolute;left:1%;top:16%;width:98%;height:73%;background:linear-gradient(#fff8e7,#ffefce);border:3px solid #bd801c;border-radius:18px;box-shadow:inset 0 0 0 2px #ffe19a;overflow:hidden}
.timeout-order-panel h2{position:absolute;left:12%;top:1%;width:76%;height:6%;margin:0;display:grid;place-items:center;border:2px solid #e8b94b;border-radius:14px;background:linear-gradient(#b62017,#780700);color:#fff8df;font:bold 17px Arial}
.timeout-correct-list{position:absolute;left:3%;top:8%;width:94%;height:91%;display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.timeout-correct-list .step{flex:1;min-height:0;padding:0 30px 7px 29px;gap:7px;cursor:default;touch-action:auto}
.timeout-correct-list .step>img{width:27px;height:27px;flex:0 0 27px}
.timeout-correct-list .step>span{font:700 12px/1.1 Arial;color:#27180e}

/* Safe-area gutters must never render a second copy of demo artwork/buttons. */
html{overscroll-behavior:none;background:#122a37}
#screen,#outgoing,.demo-footer{background-repeat:no-repeat}
#game{overflow:hidden}

.comparison-timeout-title .timeout-review-art{display:block;width:100%;height:72%;min-height:0;object-fit:contain}