:root{--ink:#243047;--cream:#fff5e8;--coral:#ff7a59;--mint:#b9ecd5;--sun:#ffd85c;--blue:#8cc8ed}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;background:var(--cream);color:var(--ink);font-family:DM Mono,monospace}button{font:inherit;color:inherit}h1,h2{font-family:Fraunces,Georgia,serif}.hub{max-width:1100px;margin:auto;padding:22px 18px 60px}header{position:relative;padding:30px 4px 40px}h1{font-size:clamp(62px,13vw,132px);line-height:.72;letter-spacing:-.09em;margin:16px 0 28px}h1 i{color:var(--coral)}header p{max-width:430px;line-height:1.6;font-size:13px}.eyebrow{background:var(--sun);padding:6px 10px;border-radius:99px;font-size:10px}.sound{position:absolute;right:0;top:28px;width:38px;height:38px;border:2px solid var(--ink);border-radius:50%;background:var(--mint);font-size:19px}section{margin:22px 0 42px}h2{font-size:28px;letter-spacing:-.04em;margin:0 0 15px}h2 em{display:block;font:11px DM Mono;font-style:normal;letter-spacing:0;color:#677080;margin-top:5px}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{min-height:176px;border:2px solid var(--ink);box-shadow:4px 5px 0 var(--ink);border-radius:13px;padding:13px;position:relative;overflow:hidden;color:var(--ink);text-decoration:none;background:var(--mint);transition:transform .15s}.card:active{transform:translate(3px,3px);box-shadow:1px 2px 0 var(--ink)}.card:nth-child(3n+2){background:var(--sun)}.card:nth-child(3n){background:var(--blue)}.card.soon{background:#f4e9dc;opacity:.72;box-shadow:none;border-style:dashed}.card h3{font:800 22px/1 Fraunces,serif;letter-spacing:-.04em;position:relative;margin:0}.card p{font-size:10px;line-height:1.45;position:absolute;bottom:7px;max-width:85%;margin:0}.art{position:absolute;right:12px;bottom:30px;width:72px;height:72px}.art.clock{border:3px solid;border-radius:50%}.art.clock:after{content:"";position:absolute;height:23px;border-left:3px solid;left:34px;top:12px;transform:rotate(-25deg);transform-origin:bottom}.art.orbit:before,.art.orbit:after{content:"";position:absolute;border:2px solid;border-radius:50%;top:15px;right:-6px;bottom:15px;left:-6px;transform:rotate(35deg)}.art.orbit:after{transform:rotate(-35deg)}.art.spark:before{content:"✦";font-size:72px;color:var(--coral)}.art.bloom{background:radial-gradient(circle,var(--coral) 0 17%,transparent 18%),conic-gradient(var(--coral) 0 10%,transparent 10% 20%,var(--coral) 20% 30%,transparent 30% 40%,var(--coral) 40% 50%,transparent 50% 60%,var(--coral) 60% 70%,transparent 70% 80%,var(--coral) 80% 90%,transparent 90%);border-radius:50%}.art.rope{height:12px;background:var(--coral);transform:rotate(-12deg);top:36px;border-radius:99px}.art.puck{border:4px solid;border-radius:50%;width:45px;height:45px;box-shadow:15px 10px 0 var(--coral)}.art.links:before{content:"✦ ✦";font-size:35px}@media(min-width:700px){.cards{grid-template-columns:repeat(3,1fr)}.card{min-height:205px}.hub{padding:34px}}.game{min-height:100vh;display:flex;flex-direction:column;background:var(--cream);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.bar{height:52px;display:flex;align-items:center;justify-content:space-between;padding:8px 15px;background:var(--cream);z-index:5}.back{color:var(--ink);font-size:11px;text-decoration:none;border:1px solid;padding:7px 9px;border-radius:99px}.title{font:700 18px Fraunces,serif}.game .sound{position:static}.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:14px;position:relative}.info{font-size:12px;text-align:center;line-height:1.55;max-width:320px}.bigbtn{border:2px solid var(--ink);box-shadow:3px 4px 0 var(--ink);border-radius:99px;background:var(--sun);padding:13px 22px;font-weight:700;margin-top:13px}.best{font-size:10px;color:#687080;margin-top:12px}.two .stage{padding:0}.two-ui{height:100%;width:100%;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,var(--mint) 50%,var(--blue) 50%)}.player{position:absolute;width:100%;text-align:center;font-size:12px;font-weight:700}.player.top{top:12px;transform:rotate(180deg)}.player.bottom{bottom:12px}.center{background:var(--cream);border:2px solid;border-radius:18px;padding:18px;text-align:center;z-index:2}.tapzone{position:absolute;top:0;right:0;bottom:0;left:0}.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;width:min(85vw,380px);transform:rotate(90deg)}.cell{aspect-ratio:1;border:2px solid var(--ink);border-radius:10px;background:#fff5e8}.cell.a{background:var(--coral)}.cell.b{background:var(--sun)}canvas{max-width:100%;max-height:100%}
