*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#0d0f14;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif}
#game-wrap{position:fixed;inset:0;display:grid;place-items:center}
#game{width:100vw;height:100vh;image-rendering:auto;background:#0a0c10}
#play{
  position:absolute;inset:auto;
  display:block;border:0;cursor:pointer;background:transparent;
  width:min(70vw,460px);
  aspect-ratio: 388 / 98; /* match your image */
  height:auto;padding:0;margin:0;
  transform:translateY(0) scale(.98);transition:transform .18s ease, filter .25s ease, opacity .25s ease;
  will-change: transform, opacity; -webkit-tap-highlight-color: transparent;
  opacity:0; animation: playPop .35s cubic-bezier(.22,1,.36,1) .05s forwards;
}
#play img{width:24px;height:24px;image-rendering:auto}
#play span{font-weight:800;letter-spacing:.5px;text-transform:uppercase}
#play::before{
  content:"";position:absolute;inset:0;border-radius:12px;
  background: url('./assets/ui/start_button.png') center/contain no-repeat; background-repeat:no-repeat; border-radius:18px;
  filter:drop-shadow(0 6px 0 #0007);
}
#play:hover{ transform:translateY(-1px) scale(1.02); filter:brightness(1.05); }
#play:active{transform:translateY(2px)}
.hud{position:absolute;left:0;right:0;top:0;padding:10px;display:flex;justify-content:space-between;pointer-events:none;font-weight:700;transition:opacity .25s ease}
.hud .chip{background:rgba(0,0,0,.35);padding:.4rem .6rem;border-radius:8px;backdrop-filter:blur(2px)}
@media (prefers-reduced-motion: reduce){.shake{transform:none!important}}
@keyframes kshake { 0%{transform:translate(2px,1px)} 25%{transform:translate(-2px,-1px)} 50%{transform:translate(1px,-2px)} 75%{transform:translate(-1px,2px)} 100%{transform:translate(0,0)} }
#game.shake{ animation:kshake .12s linear 1; }
.countdown{ position:absolute; inset:0; display:grid; place-items:center; font:900 64px/1 system-ui,sans-serif; color:#fff; opacity:0; transition:opacity .25s ease; pointer-events:none; }

/* Custom Play button image */
#play{
  width:min(60vw, 420px);
  height:calc(min(60vw, 420px) * 0.37);
}
#play::before{
  background-image:url('./assets/ui/start_button.png') !important;
  background-size:contain;
}

@keyframes playPop { from{opacity:0; transform:translateY(6px) scale(.94)} to{opacity:1; transform:translateY(0) scale(1)} }
#play:hover{ transform:translateY(-1px) scale(1.02); filter:brightness(1.06) saturate(1.05) drop-shadow(0 8px 14px rgba(0,0,0,.25)); }
#play:active{ transform:translateY(2px) scale(.98) }
.hud{ opacity:0; } /* hidden on start; JS fades in */