:root {
  --stage-w: 1280;
  --stage-h: 720;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #05070c;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 120% at 50% 20%, #101a2b 0%, #05070c 70%);
}

/* 16:9 letterboxed stage */
#game {
  position: absolute;
  width: min(100vw, calc(100dvh * 1.77777778));
  height: min(100dvh, calc(100vw * 0.5625));
  max-width: 100vw;
  max-height: 100dvh;
  background: #000;
  image-rendering: auto;
  touch-action: none;
  display: block;
}

/* Overlays (title / result) */
.overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 24px;
  z-index: 30;
  background: linear-gradient(180deg, rgba(5,7,12,0.78), rgba(5,7,12,0.92));
}
.overlay.show { display: flex; }

.title-box, .result-box {
  max-width: 720px;
  width: 100%;
  padding: 28px 26px 34px;
  background: linear-gradient(160deg, rgba(20,28,46,0.9), rgba(9,13,22,0.95));
  border: 2px solid rgba(255,140,0,0.55);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55), inset 0 0 40px rgba(255,120,0,0.06);
}
.result-box { background: linear-gradient(160deg, rgba(46,20,26,0.92), rgba(12,12,20,0.96)); border-color: rgba(255,70,70,0.55); }

.title { margin: 0; font-size: clamp(2rem, 6.5vw, 4.2rem); letter-spacing: 0.04em; line-height: 1.05; font-weight: 900; text-shadow: 0 3px 0 #7a1f00; }
.title .vs { color: #ffb000; font-size: 0.7em; text-shadow: 0 2px 0 #7a1f00; }
.subtitle { margin: 8px 0 24px; font-size: clamp(0.9rem, 2.4vw, 1.3rem); color: #ffcf8a; letter-spacing: 0.34em; text-transform: uppercase; }

.mode-buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 10px; }
.mode-btn {
  cursor: pointer;
  border: none;
  border-radius: 10px;
  padding: 14px 22px;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #1a0b00;
  background: linear-gradient(180deg, #ffb020, #ff7800);
  box-shadow: 0 5px 0 #a33f00, 0 8px 18px rgba(0,0,0,0.4);
  transition: transform 0.05s ease, box-shadow 0.05s ease, filter 0.1s ease;
}
.mode-btn:hover { filter: brightness(1.08); }
.mode-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #a33f00; }

.controls-note { margin-top: 22px; font-size: clamp(0.78rem, 1.9vw, 0.95rem); color: #cfe0ff; line-height: 1.7; opacity: 0.95; }

#resultTitle { margin: 0; font-size: clamp(2.4rem, 8vw, 5rem); font-weight: 900; color: #ffd24a; text-shadow: 0 4px 0 #7a1f00; letter-spacing: 0.06em; }
#resultSub { margin: 10px 0 6px; font-size: clamp(1.05rem, 2.6vw, 1.5rem); color: #ffe9c4; }

/* Touch UI — hidden until a touch device is detected */
#touchUi {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  z-index: 20;
}
#stage.touch #touchUi { display: block; }

#dpad {
  position: absolute;
  left: 18px;
  bottom: 20px;
  width: 168px;
  height: 168px;
  pointer-events: none;
}
#dpad .dbtn {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(12,18,30,0.72);
  border: 2px solid rgba(255,160,40,0.5);
  color: #ffd27a;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: none;
}
#dpad [data-key="left"]  { left: 0; top: 56px; }
#dpad [data-key="right"] { left: 112px; top: 56px; }
#dpad [data-key="up"]    { left: 56px; top: 0; }
#dpad [data-key="down"]  { left: 56px; top: 112px; }

#actionPad {
  position: absolute;
  right: 18px;
  bottom: 22px;
  display: grid;
  grid-template-columns: repeat(3, 64px);
  grid-template-rows: repeat(2, 64px);
  gap: 10px;
  pointer-events: none;
}
.abtn {
  pointer-events: auto;
  border: none;
  border-radius: 50%;
  font-weight: 900;
  color: #1a0b00;
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 0 rgba(0,0,0,0.45);
  touch-action: none;
}
.abtn.light  { background: radial-gradient(circle at 35% 30%, #ffe9a8, #ffb020); }
.abtn.heavy  { background: radial-gradient(circle at 35% 30%, #ffb9a0, #ff6a2a); }
.abtn.kick   { background: radial-gradient(circle at 35% 30%, #b6f2ff, #22a6c9); }
.abtn.sp1 { background: radial-gradient(circle at 35% 30%, #b9a6ff, #5a2fe0); grid-column: 1; grid-row: 1; }
.abtn.sp2 { background: radial-gradient(circle at 35% 30%, #b9a6ff, #5a2fe0); grid-column: 2; grid-row: 1; }
.abtn.sp3 { background: radial-gradient(circle at 35% 30%, #ff9ad2, #d0208f); grid-column: 3; grid-row: 1; }
.abtn.sp4 { background: radial-gradient(circle at 35% 30%, #ff9ad2, #d0208f); grid-column: 3; grid-row: 2; }
.abtn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.45); }
.abtn.light, .abtn.heavy { grid-column: auto; grid-row: 2; }

/* When a real touch device (coarse pointer) exists, show the D-pad/buttons by default */
@media (pointer: coarse) {
  #touchUi { display: none; }
  #stage.touch #touchUi { display: block; }
}