@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,600;9..144,800&display=swap";:root{color:#fff7db;font-synthesis:none;background:#174b4f;font-family:DM Mono,monospace}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}.shell{min-height:100dvh;padding:32px 24px calc(32px + env(safe-area-inset-bottom));text-align:center;background:radial-gradient(circle at 20% 18%,#ee7165 0 6%,#0000 6.2%),radial-gradient(circle at 84% 72%,#f7b733 0 11%,#0000 11.2%),linear-gradient(145deg,#174b4f,#21646a);flex-direction:column;justify-content:center;align-items:center;display:flex;overflow:hidden}.menu{padding-top:max(54px, env(safe-area-inset-top));justify-content:flex-start}.brand-mark{color:#174b4f;background:#f7b733;border:5px solid #fff7db;border-radius:50%;width:58px;height:58px;padding-top:13px;font-size:1rem;font-weight:700;transform:rotate(-8deg)}.eyebrow{color:#f7b733;letter-spacing:.14em;margin:24px 0 6px;font-size:.72rem;font-weight:700}h1{color:#fff7db;letter-spacing:-.07em;margin:0;font-family:Fraunces,Georgia,serif;font-size:clamp(3rem,15vw,6rem);font-weight:800;line-height:.84}.intro,.tutorial>p,.paused>p{color:#c7e5dc;line-height:1.65}.intro{margin:25px 0 32px}button{border:0;border-radius:999px;min-height:54px;transition:transform .15s,filter .15s}button:active{transform:scale(.96)}.primary{color:#174b4f;background:#f7b733;width:min(100%,330px);padding:0 20px;font-weight:700;box-shadow:0 5px #bc7d08}.secondary{color:#fff7db;background:0 0;border:2px solid #7dd3c7;width:min(100%,330px);margin-top:17px;padding:0 20px}.text-button{color:#c7e5dc;text-underline-offset:4px;background:0 0;min-height:42px;margin-top:14px;padding:0 20px;text-decoration:underline}.high-score{color:#7dd3c7;margin-top:auto;padding-top:32px;font-size:.75rem}.tutorial h1,.settings h1,.paused h1,.result h1{font-size:clamp(2.6rem,12vw,4.5rem)}.tutorial-beat{align-items:end;gap:10px;margin:40px 0 24px;display:flex}.tutorial-beat>*{color:#174b4f;background:#c7e5dc;border-radius:50%;place-items:center;width:82px;height:82px;font-size:.7rem;display:grid}.tutorial-beat strong{color:#174b4f;background:#f7b733;transform:translateY(-16px)}.settings{gap:18px}.settings label{text-align:left;background:#123b40;border-radius:15px;justify-content:space-between;align-items:center;width:min(100%,350px);padding:18px 20px;display:flex}.settings input{appearance:none;background:#4d7877;border-radius:99px;width:44px;height:26px}.settings input:checked{background:#f7b733}.settings input:before{content:"";background:#fff7db;border-radius:50%;width:20px;height:20px;margin:3px;transition:transform .15s;display:block}.settings input:checked:before{transform:translate(18px)}.play-screen{-webkit-user-select:none;user-select:none;touch-action:manipulation;background:#174b4f;flex-direction:column;min-height:100dvh;display:flex;overflow:hidden}.hud{z-index:1;padding:max(18px, env(safe-area-inset-top)) 18px 12px;color:#fff7db;grid-template-columns:1fr 1fr auto;align-items:center;gap:8px;font-size:clamp(.7rem,3vw,.9rem);font-weight:700;display:grid}.hud span:nth-child(2){color:#f7b733;text-align:center}.hud button{color:#fff7db;background:#21646a;border-radius:10px;width:42px;min-height:38px}.game-canvas{object-fit:contain;flex:1;width:100%;min-height:0}.tap-prompt{padding:18px 18px calc(23px + env(safe-area-inset-bottom));color:#c7e5dc;text-align:center;margin:0;font-size:.72rem}.rank{color:#f7b733;text-shadow:5px 5px #ee7165;margin:10px 0 5px;font-family:Fraunces,Georgia,serif;font-size:clamp(8rem,35vw,13rem);font-weight:800;line-height:.85}.result p{color:#c7e5dc;margin:14px 0 24px}.judgement-summary{color:#fff7db;justify-content:center;gap:13px;margin-bottom:32px;font-size:.72rem;display:flex}@media (width>=700px){.shell{min-height:100vh}.play-screen{border-left:1px solid #2a686c;border-right:1px solid #2a686c;width:min(100%,700px);min-height:100vh;margin:auto}}
