*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#cfe9dc;font-family:"Trebuchet MS",system-ui,sans-serif;color:#2f3a45;touch-action:none;user-select:none;-webkit-user-select:none}
#app{position:fixed;inset:0}
canvas#game{width:100%;height:100%;display:block}
#tilt{position:absolute;inset:0;pointer-events:none;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
 -webkit-mask-image:linear-gradient(#000 0%,transparent 22%,transparent 80%,#000 100%);mask-image:linear-gradient(#000 0%,transparent 22%,transparent 80%,#000 100%)}
#hud{position:absolute;top:max(8px,env(safe-area-inset-top));left:8px;right:8px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;z-index:5}
.chip{background:#fffaf0;border:3px solid #2f3a45;border-radius:14px;padding:6px 12px;font-weight:900;box-shadow:0 4px 0 #2f3a45}
.hidden{display:none!important}
.btn{background:#f2c14e;border:3px solid #2f3a45;border-radius:14px;padding:10px 18px;font:900 17px inherit;font-family:inherit;color:#2f3a45;cursor:pointer;box-shadow:0 4px 0 #2f3a45;text-decoration:none;display:inline-block}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #2f3a45}
.btn.small{padding:6px 12px;font-size:15px}
.btn.on{background:#d9534f;color:#fff}
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(207,233,220,.55);z-index:10;padding:12px}
.screen.active,#pause.show{display:flex}
.card{background:#fffaf0;border:4px solid #2f3a45;border-radius:22px;padding:18px 20px;max-width:440px;width:100%;text-align:center;box-shadow:0 8px 0 #2f3a45;max-height:94vh;overflow:auto}
h1{font-size:44px;color:#c0463b;letter-spacing:1px;text-shadow:0 3px 0 #2f3a45}
h2{font-size:30px;color:#c0463b}
.badge{display:inline-block;background:#7cc6a4;border:2px solid #2f3a45;border-radius:10px;padding:2px 10px;font-weight:900;font-size:12px}
.tag{margin:6px 0;font-weight:700}
.howto{text-align:left;margin:6px 0 10px 22px;font-size:14px}
#levels{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:8px 0}
#levels button{aspect-ratio:1;border:2px solid #2f3a45;border-radius:10px;background:#e8f4ee;font:900 14px inherit;font-family:inherit;cursor:pointer;color:#2f3a45;line-height:1.05}
#levels button small{display:block;font-size:9px;color:#c99a1a}
#levels button:disabled{opacity:.35;cursor:default}
.row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.stars{font-size:40px;color:#f2c14e;text-shadow:0 3px 0 #2f3a45;margin:6px}
.ver{font-size:11px;opacity:.6;margin-top:6px}
#toast{position:absolute;top:70px;left:50%;transform:translateX(-50%);background:#2f3a45;color:#fffaf0;padding:8px 16px;border-radius:12px;font-weight:900;z-index:6;white-space:nowrap}
#coach{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#fffaf0;border:3px solid #2f3a45;border-radius:14px;padding:8px 14px;font-weight:800;z-index:6;max-width:92vw;text-align:center}