/* Reset & base */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #2a0a00 0%, #0a0500 70%, #000000 100%);
  color: #ffcc00;
  font-family: "Impact", "Arial Black", "Segoe UI", sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

#game-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0.5rem;
}

/* HUD */
.hud {
  width: 100%;
  text-align: center;
  margin-bottom: 0.5rem;
}

.hud h1 {
  margin: 0;
  font-size: 1.6rem;
  color: #ff7b00;
  text-shadow: 0 0 8px #ff3300, 0 0 2px #ffcc00;
  letter-spacing: 1px;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
  font-size: 0.95rem;
}

#enemy-score-display {
  color: #d946ef;
}

#form-display {
  font-weight: bold;
}

.form-base { color: #ff7b00; }
.form-ssj { color: #ffe135; text-shadow: 0 0 4px #ffe135; }
.form-ssj2 { color: #ffdd00; text-shadow: 0 0 6px #ffdd00; }
.form-ssj3 { color: #ffcc00; text-shadow: 0 0 8px #ffcc00; }
.form-god { color: #ff3333; text-shadow: 0 0 10px #ff3333; }

.instructions {
  font-size: 0.8rem;
  color: #ffccaa;
  margin-top: 0.2rem;
}

/* Board */
.board-wrap {
  position: relative;
  width: 100%;
  max-width: 640px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
}

#game-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  max-width: 100%;
  background: radial-gradient(ellipse at center, #1a0a00 0%, #000000 100%);
  border: 3px solid #ff7b00;
  border-radius: 4px;
  box-shadow: 0 0 16px rgba(255, 123, 0, 0.4), inset 0 0 40px rgba(80, 20, 0, 0.4);
  image-rendering: pixelated;
  touch-action: none;
}

/* Overlay */
.overlay {
  position: absolute;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(20, 5, 0, 0.85);
  border-radius: 4px;
  z-index: 10;
}

.overlay.active {
  display: flex;
}

.overlay-box {
  text-align: center;
  padding: 1.5rem;
  border: 2px solid #ff7b00;
  border-radius: 6px;
  background: linear-gradient(180deg, #1a0a00 0%, #0a0300 100%);
  box-shadow: 0 0 18px rgba(255, 123, 0, 0.35);
  max-width: 90%;
}

.overlay-box h2 {
  margin: 0 0 0.5rem;
  font-size: 1.8rem;
  color: #ff7b00;
  text-shadow: 0 0 6px #ff3300;
}

.overlay-box p {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: #ffccaa;
}

/* Buttons */
.btn {
  background: #1a0a00;
  color: #ffcc00;
  border: 2px solid #ff7b00;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  text-shadow: 0 0 4px rgba(255, 123, 0, 0.6);
}

.btn:active {
  background: #ff7b00;
  color: #000;
}

/* Touch controls */
.touch-controls {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  margin-bottom: 0.4rem;
}

.dpad {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dpad-mid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
}

.dpad-center {
  width: 56px;
  height: 56px;
  margin: 0.15rem;
}

.ctrl-btn {
  width: 56px;
  height: 56px;
  margin: 0.15rem;
  font-size: 1.4rem;
  background: #1a0a00;
  color: #ffcc00;
  border: 2px solid #ff7b00;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ctrl-btn:active {
  background: #ff7b00;
  color: #000;
}

.action-btn {
  width: 120px;
}

.kame-btn {
  background: linear-gradient(180deg, #001a33 0%, #003366 100%);
  color: #aaddff;
  border-color: #66ccff;
  text-shadow: 0 0 6px #66ccff;
}

.kame-btn:active {
  background: #66ccff;
  color: #000;
}

.kame-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#kame-display {
  font-weight: bold;
  color: #66ccff;
  text-shadow: 0 0 4px #0099ff;
}

#kame-display.charging {
  color: #ffaa00;
  text-shadow: 0 0 4px #ff6600;
}

.spirit-btn {
  background: linear-gradient(180deg, #1a0033 0%, #4b0082 100%);
  color: #e0ccff;
  border-color: #9966ff;
  text-shadow: 0 0 6px #9966ff;
}

.spirit-btn:active {
  background: #9966ff;
  color: #000;
}

.spirit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#spirit-display {
  font-weight: bold;
  color: #cc99ff;
  text-shadow: 0 0 4px #9966ff;
}

#spirit-display.charging {
  color: #ffaa00;
  text-shadow: 0 0 4px #ff6600;
}

/* Level select in overlay */
.level-select {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.8rem 0;
}

.level-btn {
  background: #1a0a00;
  color: #ffccaa;
  border: 2px solid #663300;
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.level-btn.active {
  background: #ff7b00;
  color: #000;
  border-color: #ffcc00;
}

.transform-flash {
  animation: flash 0.2s ease-in-out 3;
}

@keyframes flash {
  0%, 100% { color: #ffffff; text-shadow: 0 0 12px #ffffff; }
  50% { color: #ff7b00; text-shadow: 0 0 8px #ffcc00; }
}

.cutscene {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
}

.cutscene.hidden {
  display: none;
}

.cutscene.base .cutscene-bg {
  background: radial-gradient(circle at center, #ffffff 0%, #ffcc00 30%, #ff6600 70%, #000 100%);
}

.cutscene.ssj .cutscene-bg {
  background: radial-gradient(circle at center, #ffffff 0%, #fff066 25%, #ffcc00 60%, #000 100%);
}

.cutscene-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, #ffffff 0%, #ffd700 30%, #ff6600 70%, #000 100%);
  opacity: 0;
  animation: cutsceneFlash 1.6s ease-out forwards;
}

.cutscene.god .cutscene-bg {
  background: radial-gradient(circle at center, #ffffff 0%, #ff3333 25%, #990000 60%, #000 100%);
}

.cutscene.ssj3 .cutscene-bg {
  background: radial-gradient(circle at center, #ffffff 0%, #ffdd00 30%, #ff9900 70%, #000 100%);
}

@keyframes cutsceneFlash {
  0% { opacity: 0; transform: scale(0.8); }
  20% { opacity: 1; transform: scale(1.2); }
  50% { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

.speed-lines {
  position: absolute;
  inset: -50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(0,0,0,0) 0deg,
    rgba(0,0,0,0) 8deg,
    rgba(255,255,255,0.12) 8deg,
    rgba(255,255,255,0.12) 10deg
  );
  animation: spinLines 1.2s linear infinite;
}

@keyframes spinLines {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.aura-rings {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aura-rings::before,
.aura-rings::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 4px solid rgba(255, 215, 0, 0.7);
  opacity: 0;
}

.aura-rings::before {
  width: 120px;
  height: 120px;
  animation: ringBurst 1.4s ease-out forwards;
}

.aura-rings::after {
  width: 80px;
  height: 80px;
  border-color: rgba(255, 255, 255, 0.9);
  animation: ringBurst 1.4s ease-out 0.2s forwards;
}

@keyframes ringBurst {
  0% { transform: scale(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(5); opacity: 0; }
}

.lightning {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 48%, rgba(255,255,255,0.8) 49%, rgba(255,255,255,0.8) 51%, transparent 52%),
    linear-gradient(60deg, transparent 48%, rgba(255,255,255,0.6) 49%, rgba(255,255,255,0.6) 51%, transparent 52%);
  background-size: 200% 200%;
  opacity: 0;
  animation: lightningStrike 1.6s steps(8) forwards;
  mix-blend-mode: screen;
}

@keyframes lightningStrike {
  0%, 100% { opacity: 0; }
  10% { opacity: 0.7; }
  20% { opacity: 0; }
  30% { opacity: 0.5; }
  40% { opacity: 0; }
  50% { opacity: 0.8; }
  60% { opacity: 0; }
  70% { opacity: 0.4; }
  80% { opacity: 0; }
}

.cutscene-content {
  position: relative;
  z-index: 21;
  text-align: center;
  animation: cutsceneShake 1.4s ease-in-out;
}

@keyframes cutsceneShake {
  0%, 100% { transform: translate(0, 0) scale(1); }
  10% { transform: translate(-4px, 4px) scale(1.02); }
  20% { transform: translate(4px, -4px) scale(1.02); }
  30% { transform: translate(-4px, 4px) scale(1.02); }
  40% { transform: translate(4px, -4px) scale(1.02); }
  50% { transform: translate(0, 0) scale(1.05); }
  60% { transform: translate(-2px, 2px) scale(1.03); }
  70% { transform: translate(2px, -2px) scale(1.03); }
  80% { transform: translate(0, 0) scale(1.01); }
}

.cutscene-label {
  font-size: 1.2rem;
  letter-spacing: 0.3em;
  color: #fff;
  text-shadow: 0 0 8px #ff6600;
  text-transform: uppercase;
  animation: labelGlow 1.4s ease-in-out infinite alternate;
}

@keyframes labelGlow {
  from { text-shadow: 0 0 8px #ff6600, 0 0 12px #ffcc00; }
  to { text-shadow: 0 0 16px #ff6600, 0 0 28px #ffcc00; }
}

.cutscene-title {
  margin: 0.2rem 0 0.3rem;
  font-size: 2.8rem;
  color: #ffe135;
  text-shadow:
    0 0 8px #ff6600,
    0 0 16px #ff3300,
    0 0 32px #ff0000;
  animation: titleZoom 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes titleZoom {
  0% { transform: scale(0.2) rotate(-10deg); opacity: 0; }
  40% { transform: scale(1.15) rotate(2deg); opacity: 1; }
  60% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.cutscene.god .cutscene-title {
  color: #ff3333;
  text-shadow:
    0 0 8px #ff0000,
    0 0 16px #990000,
    0 0 32px #660000;
}

.cutscene.ssj2 .cutscene-title,
.cutscene.ssj3 .cutscene-title {
  color: #ffdd00;
}

.cutscene-sub {
  font-size: 0.9rem;
  color: #ffccaa;
  text-shadow: 0 0 6px #000;
  animation: fadeInUp 1s ease-out 0.4s both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 400px) {
  .cutscene-title { font-size: 2rem; }
  .cutscene-label { font-size: 0.9rem; }
  .death-cause { font-size: 2.2rem; }
}

/* Death impact effect */
.death-effect {
  position: absolute;
  inset: 0;
  z-index: 22;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
}

.death-effect.hidden {
  display: none;
}

.death-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 40, 40, 0.9) 0%, rgba(80, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.9) 100%);
  opacity: 0;
  animation: deathFlash 1.6s ease-out forwards;
}

@keyframes deathFlash {
  0% { opacity: 0; transform: scale(1.1); }
  15% { opacity: 1; transform: scale(1); }
  40% { opacity: 0.85; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.3); }
}

.death-radial {
  position: absolute;
  inset: -50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(0,0,0,0) 0deg,
    rgba(0,0,0,0) 6deg,
    rgba(255,0,0,0.14) 6deg,
    rgba(255,0,0,0.14) 8deg
  );
  opacity: 0;
  animation: deathSpin 1.2s ease-out forwards;
}

@keyframes deathSpin {
  0% { opacity: 0; transform: rotate(0deg) scale(1.2); }
  30% { opacity: 1; transform: rotate(-45deg) scale(1); }
  100% { opacity: 0; transform: rotate(-90deg) scale(1.4); }
}

.death-cracks {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 48%, rgba(255,255,255,0.7) 49%, rgba(255,255,255,0.7) 51%, transparent 52%),
    linear-gradient(75deg, transparent 48%, rgba(200,200,200,0.5) 49%, rgba(200,200,200,0.5) 51%, transparent 52%),
    linear-gradient(25deg, transparent 48%, rgba(255,255,255,0.4) 49%, rgba(255,255,255,0.4) 51%, transparent 52%);
  background-size: 200% 200%;
  opacity: 0;
  animation: deathCracks 1.5s steps(10) forwards;
  mix-blend-mode: screen;
}

@keyframes deathCracks {
  0%, 100% { opacity: 0; }
  10% { opacity: 0.8; }
  20% { opacity: 0; }
  30% { opacity: 0.6; }
  40% { opacity: 0; }
  50% { opacity: 0.9; }
  60% { opacity: 0; }
  70% { opacity: 0.5; }
  80% { opacity: 0; }
}

.death-content {
  position: relative;
  z-index: 23;
  text-align: center;
  animation: deathShake 1.2s ease-in-out;
}

@keyframes deathShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-8px, 8px); }
  20% { transform: translate(8px, -8px); }
  30% { transform: translate(-8px, 8px); }
  40% { transform: translate(8px, -8px); }
  50% { transform: translate(0, 0) scale(1.05); }
  60% { transform: translate(-4px, 4px); }
  70% { transform: translate(4px, -4px); }
  80% { transform: translate(0, 0); }
}

.death-label {
  font-size: 1.1rem;
  letter-spacing: 0.4em;
  color: #ff4444;
  text-transform: uppercase;
  text-shadow: 0 0 12px #ff0000;
  animation: deathLabelPulse 1.2s ease-in-out infinite alternate;
}

@keyframes deathLabelPulse {
  from { opacity: 0.6; }
  to { opacity: 1; text-shadow: 0 0 20px #ff0000, 0 0 30px #990000; }
}

.death-cause {
  margin: 0.2rem 0 0.3rem;
  font-size: 2.6rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow:
    0 0 8px #ff0000,
    0 0 16px #990000,
    0 0 32px #330000;
  animation: deathCauseZoom 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes deathCauseZoom {
  0% { transform: scale(0.3) rotate(-12deg); opacity: 0; }
  40% { transform: scale(1.15) rotate(3deg); opacity: 1; }
  60% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.death-sub {
  font-size: 0.95rem;
  color: #ffaaaa;
  text-shadow: 0 0 6px #000;
  animation: fadeInUp 1s ease-out 0.3s both;
}

/* Landscape / desktop tweaks */
@media (min-width: 700px) {
  .hud h1 {
    font-size: 1.8rem;
  }

  .stats {
    font-size: 1.1rem;
  }

  .touch-controls {
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    max-width: 640px;
    gap: 1.5rem;
  }

  .ctrl-btn,
  .dpad-center {
    width: 48px;
    height: 48px;
  }
}