:root {
  --bg1:#5ec9ff;
  --bg2:#dff6ff;
  --panel:rgba(14,25,46,.82);
  --text:#eef6ff;
  --muted:#a9bdd6;
  --accent:#ffd24a;
  --accent2:#ff8f4a;
  --ok:#64e8a8;
  --danger:#ff6d7a;
  font-family: Inter, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:linear-gradient(180deg,var(--bg1),var(--bg2));}
body{user-select:none}
.game{position:relative;width:100%;height:100%}
canvas{display:block;width:100%;height:100%}
.ui,.overlay{position:absolute;inset:0;pointer-events:none}
.hud{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;gap:12px}
.panel{background:var(--panel);color:var(--text);border:1px solid rgba(255,255,255,.08);border-radius:16px;backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.pad{padding:12px 14px}
.small{font-size:12px;color:var(--muted)}
.hearts{display:flex;gap:6px;margin-top:6px}.heart{width:16px;height:16px;border-radius:999px;background:linear-gradient(180deg,#ffb4be,#ff5f77)}.heart.off{opacity:.22}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.tag{padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.09);font-size:12px}
.tag.good{background:linear-gradient(180deg,#a0ffd0,#59dd98);color:#042014}
.center{pointer-events:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(820px,calc(100% - 32px));padding:26px}
.title{font-size:clamp(42px,7vw,88px);line-height:.92;margin:0 0 10px;font-weight:900;letter-spacing:-.05em}
.subtitle{font-size:16px;line-height:1.5;color:var(--muted);margin:0 0 18px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
button{pointer-events:auto;border:0;border-radius:12px;padding:12px 16px;background:linear-gradient(180deg,#ffd34d,#ff9d3f);color:#241300;font-weight:900;cursor:pointer}
button.secondary{background:rgba(255,255,255,.1);color:var(--text)}
.levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px}
.levelBtn{aspect-ratio:1/.8;border-radius:14px;font-weight:900}.locked{opacity:.35}
.banner{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:10px 14px;border-radius:14px;background:rgba(14,25,46,.9);color:#fff;border:1px solid rgba(255,255,255,.08)}
.toast{position:absolute;left:50%;top:16px;transform:translateX(-50%);padding:10px 14px;border-radius:999px;background:rgba(14,25,46,.92);color:#fff;border:1px solid rgba(255,255,255,.08);font-weight:800}
.progress{margin-top:8px;height:8px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}.fill{height:100%;background:linear-gradient(90deg,#6ee7ff,#7dffba)}