@font-face{font-family:Bagel Fat One;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/bagel-fat-one-latin-400-normal-CB1T13M1.woff2)format("woff2"),url(/assets/bagel-fat-one-latin-400-normal-BFAfIXLM.woff)format("woff")}@font-face{font-family:Fredoka Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(/assets/fredoka-hebrew-wght-normal-DdnsCkLr.woff2)format("woff2-variations");unicode-range:U+307-308,U+590-5FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}@font-face{font-family:Fredoka Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(/assets/fredoka-latin-ext-wght-normal-CYrqKuxd.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fredoka Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(/assets/fredoka-latin-wght-normal-DM6njrJ3.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--ink:#3b1f4a;--paper:#fffaf3;--lilac:#eee3ff;--lilac-dots:#dfcefb;--pink:#ff6b9d;--blue:#4cc3ff;--yellow:#ffd23f;--mint:#c9f5e6;--border:3px solid var(--ink);--radius:24px;--display:"Bagel Fat One", system-ui, sans-serif;--body:"Fredoka Variable", system-ui, sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100vh;color:var(--ink);font-family:var(--body);background-color:var(--lilac);background-image:radial-gradient(var(--lilac-dots) 2.5px, transparent 3px);background-size:28px 28px;margin:0;font-size:1.125rem;line-height:1.5}img{max-width:100%;height:auto;display:block}h1,h2,h3{font-family:var(--display);margin:0;font-weight:400;line-height:1.05}:focus-visible{outline:4px solid var(--pink);outline-offset:3px}.topbar,main,.footer{width:min(1120px,100% - 2.5rem);margin-inline:auto}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.5rem;display:flex}.logo{color:inherit;font-family:var(--display);align-items:center;gap:.5rem;font-size:1.6rem;text-decoration:none;display:inline-flex}.logo-mark{border:var(--border);background:var(--pink);border-radius:50%;place-items:center;width:2.6rem;height:2.6rem;font-size:1.1rem;display:inline-grid;transform:rotate(-8deg)}.pill{border:var(--border);background:var(--paper);white-space:nowrap;border-radius:999px;padding:.25rem .9rem;font-size:1rem;font-weight:500}.hero{grid-template-columns:5fr 6fr;align-items:center;gap:clamp(2rem,5vw,4rem);padding-block:clamp(1.5rem,5vw,3.5rem);display:grid}.hero h1{font-size:clamp(2.8rem,6.2vw,4.6rem)}.hero-text p{max-width:30rem;margin:1.25rem 0 1.75rem;font-size:1.25rem}.button{border:var(--border);background:var(--yellow);box-shadow:4px 5px 0 var(--ink);color:inherit;border-radius:999px;padding:.7rem 1.6rem;font-weight:600;text-decoration:none;transition:transform .12s,box-shadow .12s;display:inline-block}.button:hover{box-shadow:5px 7px 0 var(--ink);transform:translate(-1px,-2px)}.button:active{box-shadow:0 0 0 var(--ink);transform:translate(4px,5px)}.hero-stage{min-width:0}.stage{aspect-ratio:8/5;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;filter:drop-shadow(6px 8px 0 var(--ink));border-radius:44px;transition:transform .2s;transform:rotate(1.5deg)}.stage:focus{transform:none}.stage canvas,.stage img{width:100%;height:auto;display:block}.stage-hint{text-align:center;margin:1.25rem 0 0;font-size:1rem;font-weight:500}.section{padding-block:clamp(2rem,5vw,3.5rem);scroll-margin-top:1rem}.section h2{margin-bottom:1.5rem;font-size:clamp(2rem,4vw,2.75rem)}.games{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.game-card{border:var(--border);border-radius:var(--radius);background:var(--paper);box-shadow:5px 6px 0 var(--ink);overflow:hidden}.game-card>img{width:100%;padding:1rem 1rem 0}.game-body{padding:1rem 1.25rem 1.25rem}.game-body h3{font-size:1.9rem}.game-body p{margin:.4rem 0 .9rem}.players{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}.player{border:var(--border);border-radius:var(--radius);box-shadow:5px 6px 0 var(--ink);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem;display:flex}.player.is-p1{background:var(--pink)}.player.is-p2{background:var(--blue)}.player-text{flex:10rem}.player-text p{margin:.4rem 0 0}.player h3{font-size:1.6rem}.half{aspect-ratio:8/5;border:var(--border);background:var(--paper);border-radius:14px;flex:none;width:5.5rem;position:relative;overflow:hidden}.half:before{content:"";background:var(--yellow);width:50%;position:absolute;inset-block:0}.half:after{content:"";border:var(--border);background:var(--paper);border-radius:50%;width:1rem;height:1rem;position:absolute;top:50%;transform:translate(-50%,-50%)}.is-p1 .half:before{left:0}.is-p1 .half:after{left:25%}.is-p2 .half:before{right:0}.is-p2 .half:after{left:75%}.keyboard-note{margin:1.25rem 0 0;font-size:1rem;font-weight:500}.player small{font-family:var(--body);margin-top:.25rem;font-size:1.1rem;font-weight:500;display:block}.keys{flex:none;grid-template-rows:repeat(2,3rem);grid-template-columns:repeat(3,3rem);gap:.35rem;display:grid}kbd{border:var(--border);background:var(--paper);box-shadow:0 4px 0 var(--ink);font-family:var(--body);border-radius:12px;place-items:center;font-size:1.25rem;font-weight:600;transition:transform 60ms,box-shadow 60ms,background-color 60ms;display:grid}kbd.is-down{background:var(--yellow);box-shadow:0 0 0 var(--ink);transform:translateY(4px)}.key-up{grid-area:1/2}.key-left{grid-area:2/1}.key-down{grid-area:2/2}.key-right{grid-area:2/3}.footer{text-align:center;padding-block:1.5rem 2.5rem;font-weight:500}@media (width<=860px){.hero,.players,.games{grid-template-columns:1fr}}@media (hover:none){.keys,.keyboard-note{display:none}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.stage,kbd{transition:none}}
