* { margin: 0; padding: 0; box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; overflow: hidden; background: #fdf3e3; }
#app { position: relative; font-family: sans-serif; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.hud { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; gap: 10px; align-items: center; pointer-events: none; }
.score { font-size: 22px; font-weight: bold; color: #7a4b12; background: rgba(255,255,255,.75); padding: 6px 14px; border-radius: 12px; }
.powerWrap { flex: 1; max-width: 200px; height: 16px; background: rgba(0,0,0,.12); border-radius: 8px; overflow: hidden; }
.powerFill { height: 100%; width: 0%; background: linear-gradient(90deg,#ffb84d,#ff6b3d); transition: width .15s; }
.powerBtn { pointer-events: auto; border: 0; border-radius: 12px; padding: 8px 14px; font-weight: bold; background: #ccc; color: #666; }
.powerBtn.ready { background: #ff6b3d; color: #fff; cursor: pointer; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(60,30,0,.55); color: #fff; }
.overlay h1 { font-size: 34px; }
.overlay button { border: 0; border-radius: 12px; padding: 12px 26px; font-size: 18px; font-weight: bold; background: #ffb84d; color: #5a3200; cursor: pointer; }
.hidden { display: none; }