:root{font-family:Tahoma,Verdana,Arial,sans-serif;color:#111;background:#f1f1f1;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased}button{font:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.magic-page{position:relative;display:grid;width:100vw;height:100vh;height:100dvh;min-height:480px;overflow:hidden;isolation:isolate;background:#f2f2f2 url(/images/background.jpg) center / cover no-repeat}.magic-stage{position:relative;display:grid;place-items:center;width:100%;height:100%}.magic-button{--button-width: min(453px, calc(100vw - 24px) );position:absolute;top:50%;left:50%;width:var(--button-width);aspect-ratio:453 / 230;padding:0;border:0;border-radius:14%;-webkit-appearance:none;-moz-appearance:none;appearance:none;transform:translate(-50%,-50%);background-image:url(/images/button.png);background-color:transparent;background-repeat:no-repeat;background-size:100% 300%;background-position:center top;cursor:pointer;transition:filter .18s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}.magic-button:hover:not(:disabled){filter:brightness(1.025)}.magic-button:focus-visible{outline:3px solid rgba(46,139,255,.85);outline-offset:5px}.magic-button:active:not(:disabled),.magic-button--pressing{background-position:center center}.magic-button--working,.magic-button--done{background-position:center bottom;cursor:default}.magic-button:disabled{opacity:1}.progress-card{--progress-width: min(453px, calc(100vw - 32px) );position:absolute;z-index:3;top:calc(50% - clamp(118px,19.25vh,180px));left:50%;width:var(--progress-width);aspect-ratio:453 / 96;transform:translate(-50%);background:url(/images/progress.png) center / 100% 100% no-repeat;animation:card-enter .18s ease-out both}.progress-fill{position:absolute;top:56.25%;left:11.7%;width:77.45%;height:10.42%;min-height:5px;overflow:hidden;transform:scaleX(0);transform-origin:left center;background:#2bcf18;animation:progress-run 8.6s .16s ease-in-out forwards}.answer-card{position:absolute;z-index:4;top:20%;left:50%;width:min(720px,calc(50vw + 20px),calc(100vw - 32px));min-height:190px;padding:8px 28px 12px;transform:translate(-50%);border:10px solid #808080;border-radius:25px;background:#ddd;box-shadow:#aaa 5px 5px 10px;text-align:center;cursor:pointer;animation:answer-enter .22s ease-out both}.answer-card h1{margin:0;padding:2px 0 8px;font-family:Verdana,Geneva,sans-serif;font-size:clamp(1.35rem,2.1vw,1.75rem);line-height:1.1;font-weight:700}.answer-card p{margin:0;font-family:Verdana,Geneva,sans-serif;font-size:clamp(.88rem,1.35vw,1rem);line-height:1.22}.answer-ok{min-width:110px;min-height:32px;margin-top:12px;padding:5px 38px;border:1px solid #777;border-radius:10px;background:#aaa;color:#111;font-family:Verdana,Geneva,sans-serif;font-size:1rem;font-weight:700;line-height:1;cursor:pointer}.answer-ok:hover,.answer-ok:focus-visible{background:#b7b7b7}.answer-ok:focus-visible{outline:3px solid rgba(46,139,255,.8);outline-offset:3px}.info-area{position:absolute;z-index:6;bottom:max(1px,env(safe-area-inset-bottom));left:50%;display:grid;justify-items:center;transform:translate(-50%)}.info-button{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:url(/images/info.png) center / 26px 26px no-repeat;cursor:help;opacity:.82}.info-button:hover,.info-button:focus-visible,.info-area.is-open .info-button{opacity:1}.info-button:focus-visible{outline:3px solid rgba(46,139,255,.8);outline-offset:1px}.info-panel{width:min(436px,calc(100vw - 20px));min-height:105px;margin-bottom:-2px;padding:16px 26px 24px;background:url(/images/info-panel.png) center bottom / 100% 100% no-repeat;color:#000;font-size:13px;line-height:1.18;text-align:center;opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .17s ease,transform .17s ease,visibility .17s;pointer-events:none}.info-area:hover .info-panel,.info-area:focus-within .info-panel,.info-area.is-open .info-panel{opacity:1;visibility:visible;transform:translateY(0)}@keyframes card-enter{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@keyframes progress-run{0%{transform:scaleX(0)}82%{transform:scaleX(.95)}to{transform:scaleX(1)}}@keyframes answer-enter{0%{opacity:0;transform:translate(-50%,-8px) scale(.985)}to{opacity:1;transform:translate(-50%) scale(1)}}@media(max-width:620px){.magic-page{min-height:420px}.answer-card{top:max(8%,46px);width:calc(100vw - 32px);min-height:0;padding:14px 16px 18px;border-width:7px;border-radius:20px}.answer-card h1{padding-bottom:10px}.answer-card p br{display:none}.info-panel{padding-inline:22px;font-size:12px}}@media(max-height:620px)and (orientation:landscape){.magic-page{min-height:320px}.progress-card{top:24px}.answer-card{top:18px}.info-area{right:8px;bottom:4px;left:auto;transform:none}.info-panel{position:absolute;right:0;bottom:40px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}