/* === NINJA DASH === game-specific styles (base defaults come from ../_base.css) */
.game-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 100vh;
  padding: 10px;
  background: #0b0616;
  box-sizing: border-box;
}
.screen-holder {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 256 / 240;
  image-rendering: pixelated;
}
#mcv {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #0b0616;
  border: 3px solid #2c1e4a;
  border-radius: 4px;
}
#scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.22) 0px,
    rgba(0, 0, 0, 0.22) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
}
#scanlines.off { display: none; }

.touch-pad {
  width: 100%;
  max-width: 640px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.tp-left, .tp-right { display: flex; gap: 10px; align-items: center; }
.tbtn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid #4d3a78;
  background: rgba(58, 42, 96, 0.55);
  color: #f5e9c8;
  font-size: 20px;
  font-weight: 700;
  font-family: monospace;
  touch-action: manipulation;
}
.tbtn:active { background: rgba(120, 90, 200, 0.75); }
.t-jump { background: rgba(34, 110, 70, 0.6); }
.t-attack { background: rgba(160, 60, 40, 0.6); }
.t-dash { background: rgba(50, 90, 160, 0.6); }
.t-jump:active { background: rgba(60, 190, 120, 0.8); }
.t-attack:active { background: rgba(230, 100, 70, 0.8); }
.t-dash:active { background: rgba(80, 140, 230, 0.8); }

@media (min-width: 900px) {
  .touch-pad { display: none; }
}

.back-link {
  color: #9a86c8;
  font-family: monospace;
  font-size: 13px;
  text-decoration: none;
  padding-bottom: 10px;
}
.back-link:hover { color: #f5e9c8; }