* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background: #0b0a12;
  overflow: hidden;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: #f4e9d8;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #1b1830 0%, #0b0a12 70%);
}

canvas#game {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #0b0a12;
  box-shadow: 0 0 0 2px #241f3a, 0 24px 60px rgba(0, 0, 0, .7);
  border-radius: 2px;
  touch-action: none;
}

#boot {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 20%, #241f3a 0%, #0b0a12 75%);
  z-index: 20;
  transition: opacity .5s ease;
  text-align: center;
}
#boot.hidden { opacity: 0; pointer-events: none; }

.boot-inner h1 {
  font-size: clamp(22px, 6vw, 54px);
  letter-spacing: .18em;
  font-weight: 800;
  color: #ffd166;
  text-shadow: 0 3px 0 #7a4a12, 0 6px 18px rgba(0,0,0,.6);
}
.boot-inner .sub {
  margin-top: .4em;
  letter-spacing: .5em;
  text-transform: uppercase;
  font-size: clamp(10px, 2.2vw, 15px);
  color: #9be7c4;
}
.boot-inner .hint {
  margin-top: 2.2em;
  font-size: clamp(11px, 2.4vw, 15px);
  color: #b9b3d6;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.45} 50%{opacity:1} }

#touch {
  position: fixed;
  inset: auto 0 0 0;
  height: 0;
  z-index: 15;
  display: none;
  pointer-events: none;
}
#touch.on { display: block; height: 100%; }

.tbtn {
  position: fixed;
  bottom: 22px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
  color: #f4e9d8;
  font-size: 26px;
  font-weight: 800;
  backdrop-filter: blur(2px);
  pointer-events: auto;
}
.tbtn:active { background: rgba(255,255,255,.28); }
#tLeft  { left: 18px; }
#tRight { left: 104px; }
#tDown  { left: 61px; bottom: 104px; }
.tbtn-a { right: 24px; bottom: 40px; width: 92px; height: 92px; font-size: 30px; background: rgba(255,209,102,.18); border-color: rgba(255,209,102,.5); }