*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#f3e9d7;font-family:"Trebuchet MS",system-ui,sans-serif;color:#2b2a33;touch-action:none;user-select:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
#hud{position:fixed;top:0;left:0;right:0;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));font-weight:700;z-index:3}
#hud span{background:#fffaf0;padding:4px 10px;border-radius:4px;box-shadow:2px 3px 0 rgba(43,42,51,.25);transform:rotate(-1deg)}
#hud i{font-style:normal;color:#e8604c}
.ib{border:0;background:#2b2a33;color:#f3e9d7;width:38px;height:38px;border-radius:6px;font-weight:900;font-size:16px;cursor:pointer}
.panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-.6deg);width:min(92vw,420px);max-height:92vh;overflow:auto;background:#fffaf0;padding:22px 18px;border-radius:6px;box-shadow:6px 8px 0 rgba(43,42,51,.22),0 0 0 2px #2b2a33;text-align:center;z-index:5}
h1{margin:0;font-size:40px;line-height:.95;color:#e8604c;letter-spacing:2px;text-shadow:3px 3px 0 #8fae8b}
h2{margin:0 0 8px;color:#e8604c}
.ver{margin:4px 0;font-size:12px;opacity:.6}
.small{font-size:13px;opacity:.85}
button{font:inherit}
.panel button{display:block;width:100%;margin:8px 0;padding:11px;border:2px solid #2b2a33;background:#f3e9d7;border-radius:6px;font-weight:800;cursor:pointer;box-shadow:3px 3px 0 #2b2a33}
.panel button.big{background:#e8604c;color:#fffaf0;font-size:18px}
.panel button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #2b2a33}
.row{display:flex;gap:6px}.row button{flex:1}
.lang.on{background:#8fae8b!important;color:#fff}
#songs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
#songs button{margin:0;padding:8px 2px;font-size:12px;line-height:1.2}
#songs button.lock{opacity:.4}
.stars{font-size:34px;color:#e9b44c;margin:4px}
#coach{position:fixed;left:50%;top:22%;transform:translateX(-50%) rotate(1deg);background:#2b2a33;color:#fffaf0;padding:10px 14px;border-radius:4px;font-weight:700;z-index:4;max-width:88vw;text-align:center}
#toast{position:fixed;left:50%;bottom:12%;transform:translateX(-50%);background:#8fae8b;color:#fff;padding:8px 14px;border-radius:4px;z-index:6;font-weight:700}
a{color:#e8604c}