@import "https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Shantell+Sans:wght@500;700;800&display=swap";:root{--ink:#141414;--cream:#fff6e0;--yellow:#ffd23f;--pink:#ff5fa2;--sky:#4cc9f0;--orange:#ff8c1a;--lime:#8cff3f;--red:#ff3b30;--line:3px solid var(--ink);--shadow:4px 4px 0 var(--ink);--display:"Bagel Fat One", system-ui, sans-serif;color:var(--ink);background:var(--cream);font-family:Shantell Sans,system-ui,sans-serif}*{box-sizing:border-box;margin:0}html,body,#root{overscroll-behavior:none;background:var(--cream);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;height:100%;overflow:hidden}.app{height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr);display:grid;position:relative}.hinge{background-color:var(--ink);background-image:radial-gradient(circle, var(--cream) 2px, transparent 2.5px);background-size:10px 12px}.pane{--paper:var(--yellow);--pop:var(--pink);--tilt:-4deg;background:var(--paper);flex-direction:column;min-width:0;min-height:0;display:flex}.pane-right{--paper:var(--sky);--pop:var(--orange);--tilt:4deg}.pane-head{border-bottom:var(--line);justify-content:space-between;align-items:center;gap:8px;padding:66px 12px 12px;display:flex}.pane-label{letter-spacing:.04em;white-space:nowrap;transform:rotate(var(--tilt));font-size:13px;font-weight:800}.pane-target{background:var(--pop);border:var(--line);box-shadow:var(--shadow);transform:rotate(calc(var(--tilt) * -.5));border-radius:14px;align-items:center;gap:6px;padding:4px 12px 6px;display:flex}.pane-target small{font-size:13px;font-weight:800}.pane-target b{font:400 36px/1 var(--display);animation:.3s cubic-bezier(.3,1.8,.6,1) pop}.pane-body{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.pane-view{touch-action:none;cursor:grab;flex:1;min-height:0;position:relative;overflow:hidden}.pane-view:active{cursor:grabbing}.pane-list{will-change:transform;list-style:none}.item{justify-content:center;align-items:center;padding:5px 14px 7px 10px;display:flex}.item span{border:var(--line);width:100%;height:100%;box-shadow:var(--shadow);font:400 28px/1 var(--display);background:#fff;border-radius:16px;place-items:center;display:grid}.item:nth-child(10n) span{background:var(--pop)}.item.hit span{animation:.5s ease-out hit}.item.miss span{animation:.4s ease-out miss}@keyframes hit{0%{background:var(--lime);transform:scale(1.08)rotate(-2deg)}60%{background:var(--lime)}to{transform:none}}@keyframes miss{0%,to{transform:translate(0)}20%{background:var(--red);color:#fff;transform:translate(-9px)rotate(-3deg)}40%{background:var(--red);color:#fff;transform:translate(8px)rotate(2deg)}60%{transform:translate(-5px)}80%{transform:translate(3px)}}@keyframes pop{0%{transform:scale(1.7)rotate(-12deg)}to{transform:none}}.ad{z-index:3;border:var(--line);box-shadow:6px 6px 0 var(--ink);text-align:center;touch-action:none;transform:rotate(var(--tilt));border-radius:16px;padding:16px 12px 12px;animation:.35s cubic-bezier(.3,1.6,.6,1) ad-in;position:absolute;left:8%;right:10%}.ad-kicker{letter-spacing:.06em;color:var(--red);font-size:11px;font-weight:800}.ad[data-bg=\#ff5fa2] .ad-kicker,.ad[data-bg=\#ff8c1a] .ad-kicker{color:var(--ink)}.ad-title{font:400 21px/1.05 var(--display);margin:4px 0}.ad-body{font-size:13px;font-weight:700;line-height:1.25}.ad-cta{background:var(--yellow);width:auto;box-shadow:3px 3px 0 var(--ink);border-radius:999px;margin-top:10px;padding:6px 14px 8px;font-size:15px;animation:.7s infinite alternate cta-pulse}.ad-x{color:#fff;background:var(--ink);width:30px;height:30px;box-shadow:none;border:2px solid #fff;border-radius:50%;place-items:center;padding:0;font:800 14px/1 Shantell Sans,sans-serif;display:grid;position:absolute;top:-12px;right:-12px}.ad-x:active{box-shadow:none;transform:scale(.9)}.ad-tag{opacity:.55;font-size:9px;font-weight:800;position:absolute;bottom:4px;left:8px}@keyframes ad-in{0%{transform:scale(.3) rotate(calc(var(--tilt) * 4));opacity:0}to{transform:rotate(var(--tilt));opacity:1}}@keyframes cta-pulse{to{transform:scale(1.08)}}.hud{top:calc(env(safe-area-inset-top) + 8px);z-index:5;border:var(--line);box-shadow:var(--shadow);pointer-events:none;background:#fff;border-radius:16px;flex-direction:column;align-items:center;padding:6px 16px 7px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.timer{font:400 26px/1 var(--display);font-variant-numeric:tabular-nums;text-align:center;min-width:3.2ch}.hud-score{margin-top:2px;font-size:12px;font-weight:800}.hud.urgent{background:var(--red);color:#fff;animation:.5s infinite alternate wobble}@keyframes wobble{0%{transform:translate(-50%)rotate(-3deg)}to{transform:translate(-50%)rotate(3deg)scale(1.06)}}.toast{z-index:6;font:400 34px/1 var(--display);white-space:nowrap;background:var(--lime);border:var(--line);box-shadow:6px 6px 0 var(--ink);pointer-events:none;text-align:center;border-radius:16px;padding:8px 18px 12px;animation:.9s ease-out forwards toast;position:absolute;top:42%;left:50%}.toast small{margin-top:4px;font-size:22px;display:block}.toast:has(small){animation-duration:1.2s}@keyframes toast{0%{opacity:0;transform:translate(-50%)scale(.4)rotate(-10deg)}20%{opacity:1;transform:translate(-50%)scale(1.1)rotate(-4deg)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-40px)scale(1)rotate(-4deg)}}.overlay{z-index:10;background:#14141473;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.card{background:var(--cream);border:var(--line);width:min(440px,100%);max-height:100%;box-shadow:8px 8px 0 var(--ink);text-align:center;border-radius:24px;padding:26px 22px 22px;overflow:auto}.eyebrow{background:var(--yellow);border:2px solid var(--ink);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800;display:inline-block;transform:rotate(-2deg)}h1{font:400 clamp(44px, 12vw, 68px)/.95 var(--display);color:var(--pink);-webkit-text-stroke:1.5px var(--ink);text-shadow:4px 4px 0 var(--ink);margin:4px 0 14px}h1 span{color:var(--sky);display:block}h2{font:400 34px/1.05 var(--display);color:var(--pink);text-shadow:3px 3px 0 var(--ink);margin:14px 0 8px}.lede{font-weight:500;line-height:1.45}.lede.big{font-size:20px;font-weight:700;line-height:1.3}.signoff{width:fit-content;color:var(--pink);margin:4px 28px 0 auto;font-size:24px;font-weight:800;line-height:1;transform:rotate(-6deg)}.rules{gap:6px;margin:14px 0 20px;padding:0;font-size:14px;font-weight:500;list-style:none;display:grid}.rules b{background:var(--lime);border-radius:4px;padding:0 5px}button{appearance:none;border:var(--line);width:100%;font:400 22px var(--display);color:var(--ink);background:var(--pink);box-shadow:var(--shadow);cursor:pointer;border-radius:16px;padding:14px 16px 16px}button:active{box-shadow:none;transform:translate(4px,4px)}.stats{grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0 12px;display:grid}.stats div{border:var(--line);background:#fff;border-radius:14px;flex-direction:column;padding:8px 0;display:flex}.stats b{font:400 26px var(--display)}.stats div:first-child{background:var(--yellow)}.stats div:nth-child(2){background:var(--sky)}.stats div:nth-child(3){background:var(--lime)}.stats div:nth-child(4){background:var(--red);color:#fff}.stats small{font-size:12px;font-weight:800}h2.final{margin:10px 0 4px;font-size:72px;line-height:1}.best{font-size:16px;font-weight:800}.best.new{background:var(--lime);border:2px solid var(--ink);border-radius:999px;padding:2px 12px 4px;animation:.4s cubic-bezier(.3,1.8,.6,1) pop;display:inline-block;transform:rotate(-2deg)}.ads-closed{margin:2px 0 16px;font-size:13px;font-weight:700}@media (height<=520px){.card{padding:16px 20px}h1{margin-bottom:8px;font-size:40px}h1 span{display:inline}.lede.big{font-size:17px}.signoff{margin-top:0;font-size:20px}.rules{gap:2px;margin:8px 0 12px;font-size:13px}button{padding:10px 16px 12px;font-size:19px}.stats{margin:10px 0 6px}h2.final{margin-top:6px;font-size:52px}.ads-closed{margin-bottom:10px}}
