/* Keypad Sprint: the whole screen is a pocket calculator. */
:root{--body:#2a4fc7;--deep:#1b3795;--lcd:#c8d0b6;--ghost:#b4bda2;--ink:#1a2214;--key:#f4f1e8;--key-lip:#c7c2b0;--key-ink:#1c2338;--sun:#f5c842;--sun-lip:#c4971a;--sky:#a9bbf7;--sky-lip:#7389d8}
*{box-sizing:border-box}
html{height:100%;background:var(--body);overscroll-behavior:none}
body{height:100%;margin:0;display:grid;place-items:center;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;font-family:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,sans-serif;color:var(--key)}
.calc{width:100%;max-width:440px;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:14px;background:var(--body);padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.top{display:flex;flex-direction:column;gap:12px}
.brand{display:flex;align-items:center;gap:8px;min-height:36px}
/* The button back to all games */
.back{position:relative;flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:inherit}
.back::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:.16}
.back:active::before{opacity:.3}
.back svg{position:relative;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.back:focus-visible{outline:3px solid #fff;outline-offset:2px}
h1{margin:0;font-size:16px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
/* The best score so far is always on the calculator's body; Start over begins the round again. */
.best{margin:0 0 0 auto;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.over{-webkit-appearance:none;appearance:none;flex:none;margin:0;padding:0 10px;min-height:36px;border:0;border-radius:10px;background:var(--deep);color:var(--key);font-family:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.over:active{transform:translateY(1px)}
.over:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* On the narrowest phones the name gives its place to the score; the page title still carries it. */
@media(max-width:349px){h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}

/* The display */
.lcd{margin:5px;background:var(--lcd);color:var(--ink);border-radius:12px;padding:10px 14px;box-shadow:0 0 0 5px var(--deep),inset 0 3px 8px #0000002e}
.status{display:flex;justify-content:space-between;gap:10px;min-height:18px;font-size:14px;font-weight:700;line-height:18px;font-variant-numeric:tabular-nums}
.status span:nth-child(2){flex:1;text-align:center}
.bar{display:grid;grid-template-columns:repeat(30,1fr);gap:2px;height:6px;margin:6px 0 12px}
.bar i{border-radius:1px;background:var(--ghost)}
.bar i.on{background:var(--ink)}
.row{display:flex;justify-content:flex-end;gap:.13em;line-height:1}
.row svg{flex:none;width:.6em;height:1em;overflow:visible;transform:skewX(-5deg)}
.row polygon{fill:var(--ghost)}
.row polygon.on,.row .op polygon,.row .op circle{fill:var(--ink)}
.row .op{margin:0 .12em}
.row .op path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.problem{font-size:min(16vw,68px)}
.answer{margin-top:10px;font-size:min(11.5vw,48px)}
.answer .op{margin-right:auto}
.note{margin:8px 0 0;min-height:19px;font-size:14px;font-weight:700;line-height:19px}
.lcd[data-state=over] .answer{visibility:hidden}
.lcd.bad .answer{animation:shake .32s}
.lcd.good .answer{animation:blink .16s}
@keyframes shake{20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-4px)}}
@keyframes blink{50%{opacity:.25}}

/* The keys */
.keys{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:10px;padding-bottom:6px}
.keys button{-webkit-appearance:none;appearance:none;display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:16px;background:var(--key);color:var(--key-ink);box-shadow:0 6px 0 var(--key-lip);font-family:inherit;font-size:min(8vw,34px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;cursor:pointer;touch-action:manipulation}
.keys .del{background:var(--sky);box-shadow:0 6px 0 var(--sky-lip)}
.keys .del svg{width:36px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.keys .go{background:var(--sun);box-shadow:0 6px 0 var(--sun-lip);font-size:min(5.6vw,22px)}
.keys button.down,.keys button:active{transform:translateY(5px);box-shadow:0 1px 0 var(--key-lip)}
.keys .del.down,.keys .del:active{box-shadow:0 1px 0 var(--sky-lip)}
.keys .go.down,.keys .go:active{box-shadow:0 1px 0 var(--sun-lip)}
.keys button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* On a computer the calculator sits on a desk; on a phone held sideways the keys move beside the display. */
@media(min-width:441px) and (min-height:520px){html{background:#131b33}.calc{height:min(100dvh - 32px,820px);padding:22px;border-radius:30px;box-shadow:0 0 0 1px #ffffff14,0 40px 70px -30px #000c}}
@media(orientation:landscape) and (max-height:519px){.calc{max-width:none;flex-direction:row;gap:16px}.top{flex:1;min-width:0;justify-content:center}.keys{flex:1;gap:8px}.problem{font-size:min(7.5vw,15vh,60px)}.answer{font-size:min(5.5vw,11vh,44px)}.keys button{font-size:min(8vh,30px)}.keys .go{font-size:min(6vh,20px)}}
@media(prefers-reduced-motion:reduce){.lcd.bad .answer,.lcd.good .answer{animation:none}}