:root{--bg:#fff8e7;--ink:#1f2937;--hour:#2563eb;--min:#f97316;--ok:#16a34a;--bad:#dc2626;--card:#fff;--fs-body:28px;--fs-btn:26px;--fs-title:44px;--touch:72px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;height:100%;margin:0}body{font-family:Nunito,"Baloo 2",Arial Rounded MT Bold,system-ui,sans-serif;font-size:var(--fs-body);color:var(--ink);background:var(--bg)}#app{flex-direction:column;min-height:100%;display:flex}h1{font-size:var(--fs-title);text-align:center;margin:.2em 0}.screen{flex-direction:column;flex:1;align-items:center;gap:20px;width:100%;max-width:1200px;margin:0 auto;padding:20px 24px;display:flex}.row{flex-wrap:wrap;justify-content:center;align-items:center;gap:24px;width:100%;display:flex}.btn{min-height:var(--touch);min-width:var(--touch);font-family:inherit;font-weight:800;font-size:var(--fs-btn);color:var(--ink);cursor:pointer;background:#ffb703;border:0;border-radius:24px;padding:12px 28px;line-height:1;box-shadow:0 6px #c98a00}.btn:active{transform:translateY(4px);box-shadow:0 2px #c98a00}.btn.alt{background:#8ecae6;box-shadow:0 6px #4a93b8}.btn.good{background:#80ed99;box-shadow:0 6px #3fa957}.btn[disabled]{opacity:.45}.clock{touch-action:none;flex:none;width:min(60vmin,540px);height:auto}.digital{color:#7cfc98;font-variant-numeric:tabular-nums;letter-spacing:2px;background:#111827;border-radius:20px;padding:4px 28px;font-size:72px;font-weight:900}.bubble{background:var(--card);text-align:center;border:4px solid #ffb703;border-radius:28px;justify-content:center;align-items:center;width:100%;max-width:640px;min-height:calc(4.05em + 28px);padding:12px 26px;line-height:1.35;display:flex}.bubble.ok{border-color:var(--ok)}.bubble.bad{border-color:var(--bad)}.legend{gap:28px;font-weight:800;display:flex}.dot{vertical-align:middle;border-radius:50%;width:26px;height:26px;margin-right:8px;display:inline-block}.map{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;width:100%;display:grid}.world{background:var(--card);text-align:center;font:inherit;color:inherit;border:0;border-radius:32px;min-height:200px;padding:24px;box-shadow:0 8px #f0d9a8}.world[disabled]{opacity:.5}.world .big{font-size:80px}.stars{letter-spacing:6px;font-size:40px}.choices{grid-template-columns:1fr 1fr;gap:20px;display:grid}.choices .btn{background:#fff;border:4px solid #e5e7eb;min-width:200px;min-height:96px;font-size:44px;box-shadow:0 6px #d1d5db}.choices .btn.right{border-color:var(--ok);background:#bbf7d0}.choices .btn.wrong{border-color:var(--bad);background:#fecaca}.progress{font-weight:800}.hand-pulse line{animation:.8s ease-in-out infinite alternate pulse}@keyframes pulse{to{opacity:.35}}.pop{animation:.5s pop}@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}to{transform:scale(1)}}@media (aspect-ratio>=1){.screen .row{flex-wrap:nowrap}.clock{width:min(62vh,46vw,540px)}.panel{flex:1;min-width:0}}.panel{flex-direction:column;align-items:center;gap:20px;display:flex}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.btns{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}@media (aspect-ratio<=1){.screen{gap:12px}.clock{width:min(54vmin,540px)}}.topbar{align-items:center;gap:20px;width:100%;display:flex}.topbar h1{text-align:left;flex:1;margin:0}.topbar .progress{text-align:center}.topbar.grid3{grid-template-columns:1fr auto 1fr;display:grid}.topbar.grid3 .right{justify-self:end}.btn.icon{flex:none;padding:0;font-size:36px}.keypad{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;width:min(100%,560px);display:grid}.btn.key{min-height:84px;padding:0;font-size:40px}.btn.key.wide{grid-column:span 3}.digital.entry{align-items:center;gap:6px;padding:6px 20px;display:flex}.slot{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;border-bottom:6px solid #0000;min-width:2.1ch;padding:0 6px}.slot .ph{opacity:.35}.slot.on{border-bottom-color:#7cfc98;animation:1s steps(2,end) infinite blink}@keyframes blink{50%{border-bottom-color:#0000}}.entry-labels{color:#6b7280;gap:90px;margin-top:-14px;font-size:22px;font-weight:800;display:flex}.clock g:focus{outline:none}.clock g:focus-visible{filter:drop-shadow(0 0 6px #111)}.btn:focus-visible,.world:focus-visible,.slot:focus-visible{outline-offset:3px;outline:5px solid #1d4ed8}@media (width>=1500px) and (height>=900px){:root{--fs-body:32px;--fs-btn:30px;--fs-title:52px;--touch:80px}.screen{max-width:1500px}.clock{width:min(66vh,44vw,720px)}.btn.key{min-height:96px}}.bubble.slim{min-height:0}@media (height<=820px){.screen{gap:10px;padding:10px 24px}h1{font-size:36px}.topbar .btn.icon{min-width:60px;min-height:60px;font-size:30px}.bubble{min-height:calc(2.7em + 28px)}.panel{gap:12px}.digital{font-size:56px}.btn.key{min-height:68px;font-size:34px}.keypad{gap:10px}.entry-labels{margin-top:-8px;font-size:20px}.choices .btn{min-height:84px;font-size:40px}}@media (aspect-ratio<=1){.hide-portrait{display:none}.clock{width:min(46vmin,520px)}.screen{gap:8px;padding:10px 20px}.bubble{min-height:calc(2.7em + 24px);padding:8px 20px}.panel{gap:10px}.digital{font-size:60px}.btn.key{min-height:70px;font-size:36px}.keypad{gap:10px}.entry-labels{margin-top:-8px}}@media (aspect-ratio<=1) and (height<=900px){.clock{width:min(40vmin,520px)}}.bubble.lesson{max-width:720px;font-size:calc(var(--fs-body) - 2px);min-height:calc(6.75em + 28px)}.bubble .now{color:#c2410c;white-space:nowrap}.dots{gap:12px;display:flex}.dots i{background:#e5d9b8;border-radius:50%;width:16px;height:16px}.dots i.on{background:#ffb703;transform:scale(1.25)}.btn.small{min-height:56px;padding:8px 22px;font-size:22px}.btn.danger{background:#fca5a5;box-shadow:0 6px #dc2626}.reset-area{justify-content:center;width:100%;margin-top:auto;padding-top:16px;display:flex}.bubble.confirm{flex-direction:column;gap:14px;max-width:720px}.btn.ring-toggle{background:#fff;border:3px solid #e5e7eb;align-items:center;gap:12px;min-height:60px;padding:8px 18px;font-size:20px;display:flex;box-shadow:0 5px #d1d5db}.ring-toggle .sw{background:#cbd5e1;border-radius:15px;flex:none;width:54px;height:30px;transition:background .2s;position:relative}.ring-toggle .sw i{background:#fff;border-radius:50%;width:24px;height:24px;transition:left .2s;position:absolute;top:3px;left:3px}.ring-toggle.on .sw{background:#f97316}.ring-toggle.on .sw i{left:27px}@media (aspect-ratio<=1){.btn.ring-toggle{padding:6px 12px;font-size:17px}.btn.ring-toggle span:last-child{max-width:7em}}