*,:before,:after{box-sizing:border-box;touch-action:none}:root{--bg:#f7f1e4;--text:black;--fill:#9f9f9f;--highlight:white;--shadow:black;--perfect-rating:#e421e4;--excellent-rating:#00c8ff;--good-rating:#12d216;--okay-rating:#cba81b;--miss-rating:var(--text)}:root[data-theme=dark]{--bg:#121212;--text:#f7f1e4;--fill:#4b545d;--highlight:black;--shadow:#f7f1e4;--perfect-rating:#ff7ffe;--excellent-rating:#7fffff;--good-rating:#7eff80;--okay-rating:#feff7f;--miss-rating:var(--text)}html{background-color:var(--bg)}body{overscroll-behavior:none;margin:0;font-family:Times New Roman,Times,serif;font-size:24px;overflow:hidden}img{-webkit-touch-callout:none;-webkit-user-drag:none}.header{justify-content:space-between;display:flex}h1,.header-button{margin:0;font-size:clamp(1rem,4vh,2.5rem)}.header-buttons{justify-content:end;display:flex}.header-button{all:unset;aspect-ratio:1;aspect-ratio:1;text-align:center;height:100%}.header-button-icon{justify-content:center;align-items:center;width:100%;height:100%;font-weight:700;transition:all .1s;display:flex}.header-button:hover .header-button-icon{transform:scale(1.1)}.header-button:active .header-button-icon{transform:scale(.5)}.button{all:unset;box-shadow:3px 3px 0 var(--shadow);border-radius:3px}.button-inner{border:2px solid var(--text);background-color:var(--highlight);border-radius:3px;flex:none;padding:8px;transition:all .1s}.button-inner:active{transform:translate(3px,3px)}.app{color:var(--text);width:100%;min-height:100dvh;padding-inline:20px;padding-top:calc(env(safe-area-inset-top) + 20px);padding-bottom:calc(env(safe-area-inset-bottom) + 20px);background-color:#0000;flex-direction:column;margin:0;display:flex}.game{flex-direction:column;flex:auto;justify-content:space-between;align-items:center;gap:6px;padding-block:clamp(5px,2vh,200px);display:flex}.game-top{flex:none;grid-template-columns:1fr auto 1fr;gap:6px;width:100%;display:grid;overflow:hidden}.game-top .game-center{grid-column:2;justify-self:center;overflow:hidden}.fraction{flex-direction:column;align-items:center;display:flex}.fraction-top{margin:0}.fraction-bottom{border-top:2px solid var(--text);margin:0}.stats{grid-column:3;justify-self:end}.stats p{text-align:end;margin:0;font-size:clamp(10px,4vw,24px);line-height:1.2em}.result{text-align:center;min-height:3em;line-height:1.2em}.result p{min-height:1em;margin:0}.shape-area{flex:1 1 0;justify-content:center;align-items:center;width:100%;min-height:0;display:flex}.shape{border:3px solid var(--text);box-sizing:content-box;transition:all .3s cubic-bezier(.13,.25,.48,.89);position:relative;overflow:hidden}.guess-fill{background-color:var(--fill);transition:none;position:absolute;bottom:0}.answer-fill{position:absolute;bottom:0}