*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Baloo 2',sans-serif;
  background:linear-gradient(160deg,#1a0b2e 0%,#3b1a6e 50%,#0d2818 100%);
  color:#fff;min-height:100vh;overflow-x:hidden;
}
h1,h2,.game-title,.btn-play,.btn-buy{font-family:'Luckiest Guy',cursive;letter-spacing:.5px;}

.game-app{max-width:720px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column;justify-content:center;}
.screen{width:100%;}
.hidden{display:none;}

.game-panel{
  background:rgba(0,0,0,.55);border:4px solid #ffd23f;border-radius:26px;
  padding:30px;text-align:center;box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.game-logo{font-size:64px;}
.game-title{font-size:clamp(40px,9vw,64px);color:#ffd23f;text-shadow:4px 4px 0 rgba(0,0,0,.4);}
.game-sub{font-size:20px;color:#ffe8c2;margin-top:6px;}
.how-to{margin:18px auto 6px;max-width:420px;text-align:left;font-size:17px;}
.how-to p{margin:8px 0;}
.tiny{font-size:13px;color:#9a9ac4;margin-top:14px;}

.btn-play{
  display:inline-block;margin-top:22px;padding:14px 34px;border-radius:999px;
  font-size:24px;color:#fff;background:#f5a623;border:none;cursor:pointer;
  box-shadow:0 7px 0 #b87a0d;transition:transform .12s, box-shadow .12s;
}
.btn-play:hover{transform:translateY(-2px);}
.btn-play:active{transform:translateY(3px);box-shadow:0 3px 0 #b87a0d;}
.btn-home{background:#7b2ff5;box-shadow:0 7px 0 #5a1fb8;}
.btn-shop{background:#2ecc71;box-shadow:0 7px 0 #1f9d57;}
.win-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}

/* HUD + canvas */
.hud{display:flex;justify-content:space-between;padding:10px 16px;font-size:22px;font-weight:800;background:rgba(0,0,0,.4);border-radius:16px;margin-bottom:10px;}
.hud-item{display:flex;align-items:center;gap:6px;}
#gameCanvas{width:100%;border:4px solid #7b2ff5;border-radius:16px;background:#0d2818;display:block;touch-action:none;}

/* SHOP */
.shop-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:20px 0;}
.shop-item{background:rgba(255,255,255,.08);border:3px solid #2ecc71;border-radius:16px;padding:16px;}
.shop-emoji{font-size:44px;}
.shop-price{color:#ffd23f;font-weight:800;font-size:20px;}
.btn-buy{display:inline-block;margin-top:10px;padding:8px 22px;border-radius:999px;font-size:18px;color:#fff;background:#2ecc71;border:none;cursor:pointer;box-shadow:0 5px 0 #1f9d57;}
.btn-buy:active{transform:translateY(2px);box-shadow:0 2px 0 #1f9d57;}