@import url('legacy.css');
/* One clipped portrait canvas. Text and controls reserve space; scenery flexes. */
body{min-width:280px;min-height:100svh;overflow-x:clip}
header{max-width:464px;min-height:46px;padding:7px 13px 3px}
.tools{gap:4px}.tools button{min-height:38px;padding:6px 9px;font-size:11px}
#game{width:min(440px,calc(100% - 24px),calc((100svh - 100px)*.5625));max-width:440px;container-type:inline-size;margin:5px auto 0}
#game>.card{height:calc(100cqi*16/9);min-height:0!important;max-height:calc(100cqi*16/9);padding:clamp(12px,4cqi,18px);display:flex;flex-direction:column;overflow:clip!important;border-radius:28px!important;contain:paint}
#game>.card>*{flex-shrink:0}#game>.card>.frame-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-1;pointer-events:none;opacity:.48;animation:frame-sway 11s ease-in-out infinite alternate}
.frame-art{mask-image:linear-gradient(#000c,transparent 42%,transparent 63%,#000b)}
#game>.card .stage{height:auto!important;min-height:0!important;max-height:none;flex:1 1 0;margin:6px -16px 3px;position:relative;overflow:clip;pointer-events:none}
.stage .scene{inset:0;width:100%;height:100%;top:0}.stage .native-ambient{opacity:.2}
.target{display:flex!important;align-items:center;justify-content:center;width:100%!important;height:100%!important;min-height:0;max-height:100%;transform:none!important;z-index:2;position:relative;padding:6px 20px}
.target img{display:block!important;max-height:100%!important;height:130px;width:130px;max-width:80%;object-fit:contain;transform:rotate(var(--target-rotation,0deg)) scale(var(--target-scale,1));filter:drop-shadow(0 7px 5px #0005)}
.target-outline img{filter:drop-shadow(0 0 3px #d9faff) saturate(.3);opacity:.85}
.target .expression{font-size:clamp(25px,8cqi,35px)!important;line-height:1.15;max-width:85%;padding:8px 16px;text-align:center;border-radius:18px;background:#07242d90;box-shadow:0 0 28px #11293899}
.target .word{font-size:clamp(29px,9cqi,42px)}
.clock-face{height:100%;width:auto;max-width:94%;max-height:260px;filter:drop-shadow(0 12px 8px #0005)}
.intro>.stage>.clock-face{display:block;margin:auto}
#game>.intro h1{font-size:clamp(27px,9cqi,39px)!important;line-height:1.04;margin:12px 0;text-wrap:balance;max-width:100%}
#game>.intro .rule{font-size:clamp(20px,6.2cqi,24px)!important;line-height:1.3;min-height:0!important;margin:12px 0 4px;max-width:100%;color:#eff8ff;text-shadow:0 2px 8px var(--ink)}
.intro-settings{display:grid;gap:7px}.level-pills,.mode-pills{display:flex;gap:5px}.intro-settings button{min-height:39px;flex:1 1 0;padding:7px 5px;font-size:13px;border-radius:11px;border:1px solid var(--edge);background:color-mix(in srgb,var(--ink) 77%,var(--mint));color:var(--text)}
.intro-settings button[aria-pressed=true]{color:var(--ink);background:var(--accent);border-color:var(--accent);box-shadow:0 2px 0 #0003}
#game>.intro .hint{margin:5px 0 8px;padding:0;font-size:12px;line-height:1.3;color:#d8e3ed}#game>.intro .primary{margin:0;min-height:53px;font-size:19px;padding:12px}
.demo{height:auto;max-height:100%;min-height:0}.demo img{height:80px;width:80px;max-height:100%}.demo-symbol{display:grid;place-items:center;width:100%;height:100%;font-size:100px;color:var(--accent);text-shadow:0 0 38px color-mix(in srgb,var(--accent) 35%,transparent)}
.mosaic-demo{font-size:75px;line-height:.85;text-align:center;color:var(--accent);text-shadow:6px 8px 0 #062d3a55}
#game>.play .progress{font-size:12px;align-items:center;gap:8px;color:#e4edfa}
#game>.play .game-name{font-size:12px;margin:0!important;color:var(--accent);font-weight:700}
#game>.play .progress strong{font-size:12px;white-space:nowrap}
#game>.play .timer{margin:8px 0 8px!important}.timer-line{min-height:32px;display:flex;align-items:center;justify-content:space-between;font-size:11px}
.timer-line strong{display:grid;place-items:center;width:35px;height:35px;font-size:25px;border:1px solid var(--edge);border-radius:50%;color:var(--accent);font-variant-numeric:tabular-nums}
.track{height:13px;margin-top:5px;background:#ffffff15;border:1px solid #d1e9ff30;box-shadow:0 0 16px #c0e7ff09}
.track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--mint),var(--accent));transform-origin:left;border-radius:20px;will-change:transform}
.timer.urgent .track{height:13px;border-color:#ffdc9c88;box-shadow:0 0 20px #ffbc663d}
.timer.urgent .timer-line strong{color:#ffe7b1;border-color:#ffd597;background:#ffbd5718;animation:countdown-emphasis .9s ease-in-out infinite}
#game>.play .question{font-size:clamp(22px,7cqi,29px)!important;line-height:1.18;min-height:0!important;letter-spacing:-.025em;margin:4px 0 3px;padding:0;border:0;background:none;flex:0 0 auto;color:#f2f9ff;text-shadow:0 2px 9px var(--ink);text-wrap:pretty}
#game>.play .answers{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:8px 0 4px!important;flex:0 0 auto}
#game>.play .answers.count-3,#game>.play .answers.count-6{grid-template-columns:repeat(3,minmax(0,1fr))}
#game>.play .answer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:79px!important;padding:9px 5px;border-radius:17px;font-size:18px;line-height:1.15;text-align:center;overflow:hidden;border-width:1px}
#game>.play .answer img{width:51px;height:51px;max-width:100%;object-fit:contain}
#game>.play .answer .label{font-size:clamp(13px,4.4cqi,17px)!important;line-height:1.15;text-align:center;overflow-wrap:break-word}
#game>.play .answer.word-only{min-height:64px!important}#game>.play .answer.word-only .label{font-size:clamp(21px,6.5cqi,27px)!important}
.option-scene{width:100%;height:53px;max-width:120px;flex:0 0 auto}
.adult #game>.play .answer{min-height:62px!important;flex-direction:row;padding:12px 7px}
.adult #game>.play .answer .label{font-size:clamp(16px,5.3cqi,21px)!important}
.adult #game>.play .answers.count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.adult #game>.play .answers.count-3 .answer .label{font-size:clamp(17px,6cqi,25px)!important}
.answer.correct{border-color:#b0ffca!important;background:#267855aa!important}.answer.correct:after{content:'✓';font-size:20px;position:absolute;right:5px;top:3px}
.near-leaves{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:clip;border-radius:inherit}.near-leaves i{position:absolute;width:80px;height:34px;left:-24px;top:38%;background:linear-gradient(25deg,#226f67,#9fe8bb);border-radius:90% 10% 90% 10%;box-shadow:0 5px 13px #001d2e66;transform-origin:left;animation:leaf-bow 8s ease-in-out infinite alternate;opacity:.72}.near-leaves i:nth-child(2){left:auto;right:-27px;top:56%;animation-delay:-3s;rotate:150deg}.near-leaves i:nth-child(3){top:70%;width:57px;height:23px;animation-delay:-5s;opacity:.5}
.moving-shape img{animation:shape-travel 5s ease-in-out infinite alternate}
.moving-animal img{animation:animal-trot 7s ease-in-out infinite alternate}
.puzzle-wrap{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:auto;position:relative;z-index:4;padding:5px 18px;min-height:0}
.puzzle-board{display:grid;grid-template-columns:repeat(var(--size),1fr);gap:4px;width:min(100%,290px);aspect-ratio:1;max-height:100%;padding:6px;background:#0b213b88;border:1px solid var(--edge);border-radius:15px;box-shadow:0 13px 25px #0004}
.puzzle-tile{display:grid;place-items:center;min-width:0;min-height:0;border-radius:7px;color:#122e45;font-size:20px;font-weight:700;background-image:url(mosaic-art.svg);background-size:calc(var(--size)*100%) calc(var(--size)*100%);background-position:calc(var(--tx)*100%/(var(--size) - 1)) calc(var(--ty)*100%/(var(--size) - 1));box-shadow:inset 0 1px 0 #fff8,0 3px 0 #050c2780;touch-action:none;transition:filter .15s,transform .15s}
.puzzle-tile span{display:grid;place-items:center;min-width:25px;min-height:25px;padding:2px;border-radius:7px;background:#fff9;font-size:16px;box-shadow:0 1px 3px #0003}.puzzle-tile:active{transform:scale(.95)}.puzzle-blank{border:1px dashed #d2ebff44;border-radius:7px}.puzzle-note{font-size:13px;text-align:center;line-height:1.2;margin:2px 0 0;color:#e1ecff}
#flow-layer[hidden]{display:none!important}.flow-layer{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;background:color-mix(in srgb,var(--ink) 86%,transparent);backdrop-filter:blur(13px);overflow:clip}
.flow-panel{width:min(100%,410px);padding:28px 22px;text-align:center;border-radius:28px;border:1px solid var(--edge);background:radial-gradient(at 15% 0,color-mix(in srgb,var(--mint) 19%,transparent),transparent 65%),var(--ink);box-shadow:0 26px 90px #0009;color:var(--text)}
.solution-mark{display:grid;place-items:center;width:65px;height:65px;margin:0 auto 18px;border:1px solid var(--accent);border-radius:50%;font-size:39px;color:var(--accent);box-shadow:0 0 40px color-mix(in srgb,var(--accent) 18%,transparent)}
.flow-panel .eyebrow{font-size:15px;font-weight:700;color:var(--mint);margin:0 0 12px}.flow-panel h2{font-size:clamp(26px,7vw,36px);line-height:1.1;letter-spacing:-.02em;margin:0 0 17px;text-wrap:balance}.solution-explanation{font-size:20px;line-height:1.35;margin:10px 0 24px}.hold-track{height:5px;background:#ffffff12;border-radius:9px;overflow:hidden}.hold-track i{display:block;height:100%;background:var(--mint);transform-origin:left}
.bridge-panel{background:linear-gradient(135deg,color-mix(in srgb,var(--panel) 85%,var(--mint)),var(--ink))}.bridge-panel h2{font-size:25px;line-height:1.25}.bridge-number{display:block;font-size:140px;line-height:1.1;color:var(--accent);font-variant-numeric:tabular-nums;text-shadow:0 0 55px color-mix(in srgb,var(--accent) 35%,transparent)}.bridge-panel p{font-size:14px;color:#dce5f5;margin:15px 0 0}
#game>.ending{padding:15px}.ending .end-score h1{font-size:29px!important;margin:4px 0 8px}.ending .end-score p{margin:0 0 6px;font-size:16px}.ending .meme{display:flex;flex-direction:column;flex:1 1 0;min-height:0!important;margin:10px 0 14px;overflow:hidden;border-radius:18px;background:#0a233c88}.ending .meme img{width:100%;height:100%;min-height:0;flex:1 1 0;object-fit:contain}.ending .meme figcaption{flex-shrink:0;font-size:17px;line-height:1.2;padding:10px 8px;text-align:center}.ending .end-actions{display:flex;flex-direction:column;gap:10px}.ending .end-actions button{min-height:48px;padding:10px;font-size:17px}.ending .end-actions a{font-size:13px;text-align:center;color:#d9e8ff;min-height:24px}.loading,.error{justify-content:center}.error h1{font-size:29px}
footer{font-size:10px;padding:12px 8px;text-align:center;color:#c7d5e199}footer button{font-size:10px;color:inherit;background:none;text-decoration:underline}
[data-theme="chrono-atelier"] .card{background:linear-gradient(145deg,#173e42,#09232a)}[data-theme="quiz-garden"] .card{background:radial-gradient(at 50% 45%,#42704b55,transparent 62%),linear-gradient(135deg,#19483e,#0d2b2d)}[data-theme="quiz-harbor"] .card{background:radial-gradient(at 40% 50%,#13658c55,transparent 65%),linear-gradient(150deg,#15384f,#06273a)}[data-theme="quiz-stars"] .card{background:radial-gradient(at 80% 30%,#ba507d33,transparent 55%),linear-gradient(160deg,#41234d,#1b183f)}[data-theme="quiz-express"] .card{background:linear-gradient(135deg,#45332c,#241c24)}[data-theme="quiz-studio"] .card{background:linear-gradient(145deg,#353263,#181d3b)}[data-theme="quiz-archive"] .card{background:linear-gradient(135deg,#1f4850,#0d2630)}[data-theme="mosaic-workshop"] .card{background:radial-gradient(at 20% 30%,#925c7433,transparent 65%),linear-gradient(155deg,#423353,#1b2543)}
[data-theme="quiz-express"] .answer{border-radius:7px!important;background:linear-gradient(105deg,#75533d99,#3b293199)}[data-theme="quiz-studio"] .answer{border-radius:22px!important;background:linear-gradient(150deg,#6f67a277,#283258aa)}[data-theme="quiz-archive"] .answer{border-radius:7px!important;border-left:4px solid var(--accent);background:linear-gradient(105deg,#34676477,#102e3d)}[data-theme="quiz-stars"] .answer{border-radius:26px 11px 26px 11px!important}
@keyframes frame-sway{to{transform:translateY(-3px) scale(1.012)}}@keyframes leaf-bow{to{transform:rotate(8deg) translate(4px,3px)}}@keyframes shape-travel{from{translate:-24px -5px;rotate:-7deg}to{translate:24px 7px;rotate:7deg}}@keyframes animal-trot{0%{translate:-45px 0;scale:1}25%{translate:-20px -6px}50%{translate:0 0}75%{translate:20px -6px}100%{translate:45px 0;scale:1}}@keyframes countdown-emphasis{50%{transform:scale(1.1);box-shadow:0 0 25px #ffce7155}}
@container(max-width:320px){#game>.card{padding:12px}#game>.intro h1{font-size:28px!important;margin:9px 0}.intro-settings button{min-height:35px;font-size:12px;padding:5px}#game>.intro .rule{font-size:20px!important;margin-top:9px}.meta{font-size:9px}#game>.play .question{font-size:22px!important}.timer-line strong{width:30px;height:30px;font-size:23px}#game>.play .answer{min-height:70px!important;padding:7px 3px}#game>.play .answer img{height:43px;width:43px}.option-scene{height:45px}.adult #game>.play .answer{min-height:58px!important;padding:8px 5px}.puzzle-note{font-size:12px}.ending .meme figcaption{font-size:15px}.ending .end-score h1{font-size:25px!important}.ending .end-actions{gap:7px}.flow-panel h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.still *,.still *:before,.still *:after{animation-play-state:paused!important;transition:none!important}
/* The private renderer uses the same360×640 composition at3× output scale. */
body[data-film="true"]{width:1080px;height:1920px;overflow:hidden;min-height:0}
body[data-film="true"]>header,body[data-film="true"]>footer,body[data-film="true"]>dialog{display:none}
body[data-film="true"] #game{position:absolute;left:0;top:0;width:360px;max-width:none;margin:0;transform:scale(3);transform-origin:0 0}
body[data-film="true"] #game>.card{height:640px;max-height:640px;border-radius:0!important;border:0;padding:18px}
body[data-film="true"] #flow-layer{position:absolute;width:360px;height:640px;inset:0;transform:scale(3);transform-origin:0 0;padding:18px}
body[data-film="true"] .flow-panel{padding:25px 18px}body[data-film="true"] .flow-panel h2{font-size:32px}body[data-film="true"] .bridge-panel h2{font-size:25px}body[data-film="true"] .bridge-number{font-size:130px}
body[data-film="true"] .intro-settings{display:none}body[data-film="true"] .intro .primary{display:none}body[data-film="true"] .film-ending>h1{font-size:28px;text-align:center}body[data-film="true"] .film-ending>p{text-align:center;font-size:13px;margin:2px 0 8px}

.gear{animation:rotor-turn 28s linear infinite}.bubble-rise{animation:bubble-drift 7s ease-in-out infinite alternate}.star-drift{animation:star-flow 10s ease-in-out infinite alternate}.rail-travel{animation:rail-flow 7s ease-in-out infinite alternate}.ticket-drift{animation:ticket-sway 9s ease-in-out infinite alternate}.studio-pan{animation:studio-float 8s ease-in-out infinite alternate}.archive-rise{animation:archive-float 9s ease-in-out infinite alternate}@keyframes bubble-drift{to{translate:3px -18px}}@keyframes star-flow{to{translate:-8px 7px;opacity:.6}}@keyframes rail-flow{to{translate:0 10px}}@keyframes ticket-sway{to{translate:6px -8px;rotate:2deg}}@keyframes studio-float{to{translate:-6px 8px;rotate:-2deg}}@keyframes archive-float{to{translate:0 -9px}}

/* Illustration motion follows the task; controls and reading remain still. */
.motion-run img{animation:animal-trot 7s ease-in-out infinite alternate}.motion-fly img{animation:bird-flight 7s ease-in-out infinite alternate}.motion-float img{animation:illustration-float 6s ease-in-out infinite alternate}@keyframes bird-flight{0%{translate:-36px 8px;rotate:-4deg}50%{translate:0 -10px;rotate:1deg}100%{translate:36px 5px;rotate:4deg}}@keyframes illustration-float{to{translate:0 -6px;rotate:2deg}}

.solution-icon img{height:72px;width:72px;object-fit:contain}.solved-mosaic{display:block;width:140px;height:140px;border-radius:14px;margin:0 auto 12px}.solution-panel .option-scene{height:90px;width:120px}.solution-panel{max-height:calc(100svh - 32px)}

.intro-settings button:disabled{opacity:.7;cursor:default}