html,body{-webkit-user-select:none;user-select:none;background:linear-gradient(#8ccff0 0%,#bfe4f3 35%,#fdf3dc 60%);overflow:hidden}#app{touch-action:none;position:fixed;inset:0}canvas{display:block}#hud{pointer-events:none;padding:max(10px, env(safe-area-inset-top)) 12px 0;position:absolute;inset:0}.hud-left{flex-direction:column;gap:4px;display:flex}.score{color:var(--yellow);-webkit-text-stroke:6px var(--wood-dark);paint-order:stroke fill;font-size:1.9rem;font-weight:700;line-height:1}.count{background:var(--paper);border:3px solid var(--wood-dark);border-radius:14px;align-items:center;gap:4px;width:max-content;padding:2px 10px 2px 6px;font-weight:700;display:inline-flex}.count .banana{width:34px;height:22px}.count em{color:var(--red-ink);font-style:normal}.lives{right:12px;top:max(12px, env(safe-area-inset-top));gap:4px;display:flex;position:absolute}.lives svg{width:30px;height:27px;filter:drop-shadow(2px 2px 0 var(--wood-dark));overflow:visible}.lives path{fill:#ff4f6d;stroke:var(--wood-dark);stroke-width:3px;stroke-linejoin:round}.lives svg.out{filter:none}.lives svg.out path{fill:#e6d6b8}.boost{left:12px;top:calc(max(10px, env(safe-area-inset-top)) + 72px);background:var(--paper);border:3px solid var(--wood-dark);border-radius:14px;align-items:center;gap:6px;padding:3px 10px 3px 4px;font-size:.85rem;font-weight:700;display:flex;position:absolute}.boost .bowl{object-fit:contain;width:30px;height:28px}#pops{pointer-events:none;position:absolute;inset:0;overflow:hidden}.pop{color:var(--red-ink);border:3px solid var(--ink);white-space:nowrap;background:#fff;border-radius:14px;padding:3px 12px;font-weight:700;animation:.9s ease-out forwards pop;position:absolute;transform:translate(-50%,-100%)}.pop.big{background:var(--yellow);color:var(--ink);font-size:1.2rem}@keyframes pop{0%{opacity:0;margin-top:10px}15%{opacity:1;margin-top:0}80%{opacity:1}to{opacity:0;margin-top:-24px}}.kicker{letter-spacing:1px;color:var(--red-ink);margin:0 0 2px;padding:0 14px;font-size:.78rem;font-weight:700}.sub{margin:0 0 8px;font-size:.88rem}.how{text-align:left;gap:3px;margin:0 0 10px;padding:0;font-size:.82rem;line-height:1.45;list-style:none;display:grid}.how li{background:var(--paper);border:2px solid var(--wood-dark);border-radius:6px;padding:3px 8px}.how b{color:var(--red-ink)}.big-score{color:var(--red-ink);margin:0;font-size:2.3rem;font-weight:700;line-height:1.1}.best{margin:0;font-size:.85rem;font-weight:700}.rank{background:var(--yellow);border:3px solid var(--wood-dark);border-radius:8px;margin:6px 0 8px;padding:2px 12px;font-weight:700;display:inline-block;transform:rotate(-2deg)}.facts{grid-template-columns:repeat(3,1fr);gap:5px;margin:0 0 6px;padding:0;list-style:none;display:grid}.facts li{background:var(--paper);border:2px solid var(--wood-dark);border-radius:6px;padding:3px;font-size:.76rem}.facts b{color:var(--red-ink);font-size:1rem;display:block}.board-title{text-align:left;margin:8px 0 0;font-size:.85rem;font-weight:700}.corner-art{filter:drop-shadow(2px 3px #2b160559);pointer-events:none;width:70px;position:absolute;top:-64px;right:-10px;transform:rotate(6deg)}.how li{overflow:hidden}.how li img{float:left;object-fit:contain;width:26px;height:26px;margin:-1px 6px -1px 0}.over-art{filter:drop-shadow(2px 3px #2b160559);width:74px;margin:-42px auto 0;display:block}.pop img{object-fit:contain;vertical-align:middle;width:34px;height:30px;margin-right:4px}@media (max-height:620px){.corner-art{width:54px;top:-40px}}.key rect{fill:var(--yellow);stroke:var(--wood-dark);stroke-width:3px}.key path{fill:var(--ink)}.key.right{transform:rotate(90deg)}.key.down{transform:rotate(180deg)}.key.left{transform:rotate(-90deg)}.keys-row{align-items:center;gap:8px;display:flex}.keys{flex:none;gap:3px;min-width:57px;display:inline-flex}.keys .key{width:26px;height:26px}.keys-note{color:#6b4a2a;text-align:right;font-size:.76rem;background:0 0!important;border:0!important;padding:0 8px!important}.combo{right:12px;top:calc(max(12px, env(safe-area-inset-top)) + 36px);text-align:center;background:var(--paper);border:3px solid var(--wood-dark);border-radius:12px;padding:2px 12px 6px;font-size:.85rem;font-weight:700;position:absolute}.combo b{color:var(--red-ink);font-size:1.25rem}.combo>i{background:#e6d6b8;border-radius:3px;height:5px;margin-top:2px;display:block;overflow:hidden}.combo>i>i{background:var(--yellow);border-right:2px solid var(--wood-dark);transform-origin:0;height:100%;display:block}.town-link{color:var(--red-ink);margin-top:8px;font-size:.85rem;font-weight:700;display:inline-block}