:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;color:#17466d;background:#eaf3fa}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;background:linear-gradient(180deg,#e3eff7,#f2f8fb);color:#214d70}
.shell{width:min(900px,calc(100% - 20px),max(750px,calc((100dvh - 285px)*2.07)));margin:0 auto;padding:10px 0 18px}
.header{background:#fff;border-radius:17px;min-height:76px;box-shadow:0 2px 12px #3d67821c;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 12px;gap:8px}
.brand{display:flex;align-items:center;gap:7px;min-width:0}.brand a{display:flex;flex:none}.brand img{width:50px;height:50px;object-fit:contain}.brand strong{font-size:14px;color:#11507e;display:block}.brand small{font-size:11px;color:#557996;white-space:nowrap}
.headline{text-align:center}.headline h1{font-weight:600;font-size:clamp(22px,2.6vw,27px);margin:0 0 2px;color:#10476f}.headline p{font-size:12px;margin:0;color:#536e85}
.header-actions{justify-self:end;display:flex;gap:6px;align-items:center}
button{cursor:pointer;font:inherit;border:1px solid #a5cce5;background:#eef7fc;color:#15527b;border-radius:10px;padding:9px 12px;font-weight:600}button:hover{background:#dceefc}button:focus-visible,a:focus-visible{outline:3px solid #ffb52f;outline-offset:2px}button:disabled{opacity:.56;cursor:default}
.header-actions button{min-width:42px;min-height:40px;padding:6px 9px;font-size:20px}
.training{margin-top:10px;background:#fff;border:1px solid #c5dfef;border-radius:16px;padding:10px 12px;box-shadow:0 1px 6px #b4d0e226}
.task-card{border:2px solid #d9ebf7;border-radius:14px;min-height:163px;padding:9px 8px 9px;text-align:center}
.sample{font-size:11px;color:#6b8aa1;margin-bottom:6px}
.letter-choices,.letter-result{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:10px}
.letter{font-family:Georgia,'Times New Roman',serif;font-size:clamp(32px,4vw,46px);min-width:65px;min-height:54px;padding:3px 7px;background:linear-gradient(#fffaf1,#fff2d8);border:1px solid #e9cfa5;color:#423016;border-radius:9px;box-shadow:0 3px 0 #f1d7b3;display:flex;align-items:center;justify-content:center}
.letter-choices .letter{cursor:pointer;transition:transform .14s,background .14s}.letter-choices .letter:hover:not(:disabled){transform:translateY(-2px);background:#fff0ce}.letter.used{opacity:.28;cursor:default}.letter.good{background:#d8f4df;border-color:#8cccaa}
.letter-result{margin-top:7px}.answer-slot{width:66px;height:54px;border:2px dashed #b1d5e7;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#e8f4fd;font:700 32px Georgia,serif;color:#12507d}
.answer-slot.filled{background:#e4f2fc;border-style:solid}.answer-slot.correct{border-color:#63ad84;background:#daf5e5}.answer-slot.wrong{border-color:#cf806b;background:#fbe7e0}
.feedback{height:15px;line-height:15px;font-size:11px;margin:4px 0 0;color:#406c8a}
.game-art{margin-top:10px;border:2px solid #fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px #c0d9e8;background:#163958}
.orloj-scene{position:relative;width:100%;aspect-ratio:900/435;overflow:hidden;isolation:isolate}
.orloj-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}
/* Front metal casing fully hides the painted, static four gears in the decorative artwork. */
.machine-panel{position:absolute;inset:44% 0 0;background:radial-gradient(ellipse at 50% 20%,#466483 0%,#203a56 54%,#102940 100%);border-top:8px ridge #cba36a;box-shadow:inset 0 8px 25px #071d36,inset 0 -6px 0 #b89057;overflow:hidden}
.machine-panel:after{content:"";position:absolute;inset:8% 2%;border:2px solid #e3ba76;border-radius:13px;pointer-events:none;opacity:.72;box-shadow:inset 0 0 17px #071d32}
.machine-rivets{position:absolute;inset:47% 0 5%;background-image:radial-gradient(circle,#e9c582 1.5px,transparent 2px);background-size:7.7% 8%;pointer-events:none;opacity:.35}
.gear-wrap{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);z-index:3;pointer-events:none}
.gear-mount{position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle at 40% 30%,#ac8150,#162e47 48%,#060d17 74%);border:5px solid #cb9f65;box-shadow:0 0 0 4px #243b51,0 10px 18px #071b2bd9}
.gear-rotor{position:absolute;inset:0;transform:rotate(var(--angle,0deg));transition:transform .64s cubic-bezier(.25,.78,.23,1);will-change:transform}
.gear-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 5px rgba(2,8,16,.75))}
.gem{position:absolute;left:var(--gx);top:var(--gy);width:9%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.2);opacity:0;background:radial-gradient(circle at 37% 28%,#fff 0 9%,#fff2af 22%,var(--gem) 49%,#aa6b28 75%,#86551c 86%);box-shadow:0 0 13px 5px var(--gem),inset 0 0 3px 2px white;transition:opacity .25s,transform .4s ease;z-index:4}
.gem.lit{opacity:1;transform:translate(-50%,-50%) scale(1)}
.gear-wrap.burst .gear-img{filter:drop-shadow(0 0 12px rgba(255,216,111,.68)) drop-shadow(0 7px 5px #041624)}
.stage-clock{position:absolute;left:50%;top:4%;transform:translateX(-50%);width:13%;aspect-ratio:1;border:2px solid #f5d296;border-radius:50%;pointer-events:none;opacity:0;/* The illustrated clock is already part of the artwork. */}
.orloj-scene.finished .gear-rotor{transition:none;animation:clockTurn 18s linear infinite}
.orloj-scene.finished .gear-wrap:nth-of-type(even) .gear-rotor{animation-direction:reverse}
@keyframes clockTurn{to{transform:rotate(360deg)}}
.progress{margin-top:6px;display:grid;grid-template-columns:minmax(160px,1fr) repeat(4,minmax(0,1fr));gap:6px}
.progress .total,.progress .sub{background:#f7fbff;border:1px solid #c6ddec;border-radius:9px;padding:6px 8px;font-size:11px;font-weight:700;min-height:45px}.progress .total{display:flex;align-items:center}
.progress .sub.active{border-color:#76b3d6;box-shadow:0 0 0 1px #76b3d6}
.progress .top{display:flex;justify-content:space-between;gap:4px}.progress .dots{display:flex;gap:3px;margin-top:5px}
.progress .dot{height:8px;flex:1;border-radius:9px;background:#dae8f2;border:1px solid #bfd2df}.progress .dot.on{background:#ffd376;border-color:#d6a443}
.page-footer{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:6px 3px 0;color:#648198;font-size:10px}
.dialog-overlay[hidden]{display:none!important}.dialog-overlay{position:fixed;inset:0;z-index:100;background:#122c4885;display:grid;place-items:center;padding:15px}
.result-dialog{width:min(450px,100%);background:#fff;border-radius:18px;padding:24px;border:2px solid #d5e8f4;box-shadow:0 16px 65px #142d4780;text-align:center;color:#174b70;outline:none}
.result-dialog h2{margin:0 0 9px;font-size:26px}.result-dialog p{margin:0 0 14px;line-height:1.45}
.result-stats{display:grid;gap:7px;text-align:left}.result-stats div{display:flex;justify-content:space-between;align-items:center;background:#edf6fc;padding:9px 12px;border-radius:8px;font-size:13px}.result-stats strong{font-size:20px}
.result-actions{display:flex;gap:9px;justify-content:center;margin-top:16px}.result-actions .primary{background:#ddf6e7;border-color:#8ec9a2;color:#19583b}
@media(max-width:760px){.shell{width:calc(100% - 12px);padding:6px 0 16px}.header{grid-template-columns:1fr auto;min-height:0;padding:7px 9px;gap:6px}.brand img{width:41px;height:41px}.brand strong{font-size:12px}.brand small{font-size:10px}.header-actions{grid-column:2;grid-row:1}.headline{grid-column:1/-1;grid-row:2}.headline h1{font-size:21px}.headline p{font-size:11px}.training{padding:7px;margin-top:8px}.task-card{padding:8px 5px;min-height:139px}.letter-choices,.letter-result{gap:5px}.letter{min-height:45px;min-width:49px;font-size:30px}.answer-slot{width:49px;height:45px;font-size:28px}.orloj-scene{aspect-ratio:900/465}.progress{grid-template-columns:repeat(4,minmax(0,1fr))}.progress .total{grid-column:1/-1;min-height:28px}.progress .sub{font-size:10px;padding:6px 5px}.page-footer{font-size:9px}}
@media(max-width:360px){.letter{min-width:44px}.answer-slot{width:44px;height:44px;font-size:26px}.headline h1{font-size:20px}}
@media(prefers-reduced-motion:reduce){.gear-rotor{transition:none!important;animation:none!important}.gem{transition:none!important}}