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

:root {
  --gold: #ffd23f;
  --gold2: #ffb400;
  --ink: #0a0e1a;
  --panel: rgba(10, 16, 32, 0.92);
  --red: #ff5a4e;
  --blue: #3fa9ff;
  --green: #5aff7a;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(1200px 800px at 50% 30%, #1b2540 0%, #0a0e1a 60%, #05070e 100%);
  font-family: 'Russo One', 'Arial Black', sans-serif;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}

#app { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }

#game {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  background: #000;
  border-radius: 6px;
  box-shadow: 0 0 80px rgba(0,0,0,0.7), 0 0 30px rgba(63,169,255,0.12);
  image-rendering: auto;
}

.hidden { display: none !important; }

/* ---------------- HUD ---------------- */
#hud {
  position: absolute;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  pointer-events: none;
  z-index: 5;
}
.hud-p1, .hud-p2 { position: absolute; bottom: 12px; width: 300px; }
.hud-p1 { left: 16px; }
.hud-p2 { right: 16px; text-align: right; }
.hud-name {
  font-size: 13px; letter-spacing: 1px; color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,0.8);
  margin-bottom: 3px;
}
.hud-p2 .hud-name { direction: rtl; }
.bar {
  height: 13px; border-radius: 7px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.25);
  overflow: hidden;
}
.bar.mp { height: 7px; margin-top: 4px; border-color: rgba(63,169,255,0.5); }
.bar .fill { height: 100%; width: 100%; transition: width 80ms linear; }
.bar.hp .fill { background: linear-gradient(180deg, #ff8d6a, #e23b2e); }
.hud-p2 .bar.hp .fill { background: linear-gradient(180deg, #8affb0, #2ec46e); }
.bar.mp .fill { background: linear-gradient(180deg, #7ad0ff, #2380e6); }
.hud-mid { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); text-align: center; }
#hudStage {
  font-size: 16px; letter-spacing: 4px; color: var(--gold);
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(255,180,0,0.4);
}
#hudScore { font-size: 11px; letter-spacing: 2px; color: #cdd6ff; text-shadow: 0 1px 0 #000; }

/* ---------------- Screens / Menus ---------------- */
.screen {
  position: absolute;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  top: 0; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
  background: linear-gradient(180deg, rgba(5,8,18,0.35), rgba(5,8,18,0.85));
  backdrop-filter: blur(2px);
}
.menu-inner { text-align: center; padding: 30px; }

.logo { margin-bottom: 34px; }
.logo-l1 {
  font-family: 'Black Ops One', 'Russo One', sans-serif;
  font-size: 58px; letter-spacing: 3px; color: #fff;
  text-shadow: 0 4px 0 var(--red), 0 8px 0 rgba(0,0,0,0.6), 0 0 30px rgba(255,90,78,0.5);
}
.logo-l2 {
  font-size: 42px; letter-spacing: 14px; color: var(--gold);
  text-shadow: 0 3px 0 var(--gold2), 0 6px 0 rgba(0,0,0,0.6);
  margin-top: -6px;
}
.logo-tag { margin-top: 10px; letter-spacing: 6px; font-size: 12px; color: #9fb2e6; }

.mbtn {
  display: block; width: 320px; margin: 9px auto;
  padding: 13px 20px; cursor: pointer;
  font-family: inherit; font-size: 18px; letter-spacing: 2px;
  color: #fff; background: linear-gradient(180deg, #2b3a63, #18233f);
  border: 2px solid #3f6fd4; border-radius: 8px;
  box-shadow: 0 4px 0 #0d1428, inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 80ms, background 120ms, box-shadow 120ms;
}
.mbtn:hover { background: linear-gradient(180deg, #3b4f82, #223054); border-color: var(--gold); }
.mbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0d1428; }
.mbtn span { display: block; font-size: 11px; letter-spacing: 1px; color: #9fb2e6; margin-top: 2px; }
.mbtn.small { width: 190px; display: inline-block; margin: 10px; font-size: 15px; padding: 10px; }

.menu-foot { margin-top: 22px; font-size: 12px; color: #7d8db8; letter-spacing: 1px; }

/* ---------------- Character select ---------------- */
.sel-inner { text-align: center; padding: 20px; }
.sel-title { font-size: 22px; letter-spacing: 5px; color: var(--gold); text-shadow: 0 2px 0 #000; margin-bottom: 16px; }
.sel-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; max-width: 760px; margin: 0 auto 14px; }
.sel-card {
  width: 82px; height: 92px; cursor: pointer; border-radius: 8px;
  background: linear-gradient(180deg, #202b4a, #121a30);
  border: 2px solid #2c3a63; position: relative; overflow: hidden;
  transition: transform 90ms, border-color 120ms, box-shadow 120ms;
}
.sel-card:hover { transform: translateY(-3px); border-color: #6d8ff0; }
.sel-card.active { border-color: var(--gold); box-shadow: 0 0 18px rgba(255,210,63,0.6); transform: translateY(-3px); }
.sel-card .mini { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); }
.sel-card .nm { position: absolute; bottom: 3px; width: 100%; text-align: center; font-size: 10px; letter-spacing: 1px; color: #cdd6ff; }
.sel-card.pick-n .nm { color: var(--gold); }
.sel-info { max-width: 560px; margin: 0 auto 10px; padding: 12px 18px; background: var(--panel); border: 1px solid #2c3a63; border-radius: 10px; }
.sel-name { font-size: 20px; letter-spacing: 3px; color: #fff; }
.sel-desc { font-size: 12px; color: #9fb2e6; margin: 5px 0 10px; }
.sel-stats { display: flex; gap: 14px; justify-content: center; }
.stat { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #cdd6ff; }
.statbar { width: 60px; height: 8px; background: #0d1428; border-radius: 4px; overflow: hidden; }
.statbar i { display: block; height: 100%; background: linear-gradient(180deg, var(--gold), var(--gold2)); }
.sel-hint { font-size: 12px; color: #7d8db8; letter-spacing: 1px; }

/* ---------------- Banner ---------------- */
#banner {
  position: absolute; width: 100%; height: 100%; z-index: 15;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.banner-text {
  font-family: 'Black Ops One', sans-serif;
  font-size: 64px; letter-spacing: 8px; color: #fff;
  text-shadow: 0 5px 0 var(--red), 0 10px 0 rgba(0,0,0,0.7), 0 0 40px rgba(255,90,78,0.6);
  animation: bannerPop 1.4s ease-out;
}
@keyframes bannerPop {
  0% { transform: scale(2.6); opacity: 0; }
  25% { transform: scale(1); opacity: 1; }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.05); opacity: 0; }
}

/* ---------------- Pause / Game over ---------------- */
.pause-title { font-size: 40px; color: var(--gold); text-shadow: 0 3px 0 var(--gold2), 0 6px 0 rgba(0,0,0,0.6); }
.go-title { color: var(--red); text-shadow: 0 4px 0 #8f1d12, 0 8px 0 rgba(0,0,0,0.6); }
.go-sub { font-size: 14px; color: #cdd6ff; margin: 6px 0 16px; letter-spacing: 2px; }

/* ---------------- Help ---------------- */
#helpScreen { overflow-y: auto; }
.help-inner { text-align: center; padding: 16px 30px; max-width: 900px; margin: auto; }
.help-body { display: flex; gap: 18px; margin: 18px 0; text-align: left; }
.help-col { flex: 1; background: var(--panel); border: 1px solid #2c3a63; border-radius: 10px; padding: 14px; }
.help-col h3 { font-size: 13px; letter-spacing: 2px; color: var(--gold); margin: 4px 0 8px; }
.help-col h3:first-child { margin-top: 0; }
.help-col ul { list-style: none; }
.help-col li { font-size: 12px; color: #cdd6ff; margin-bottom: 7px; line-height: 1.45; }
.help-col li ul { margin-top: 6px; padding-left: 10px; }
.help-col li ul li { font-size: 11px; color: #b9c4ec; margin-bottom: 5px; }
.help-col b { color: #fff; }

/* keyboard vs touch hints */
body.t-active .kbd-only { display: none !important; }
body:not(.t-active) .touch-only { display: none !important; }

/* ---------------- Touch ---------------- */
#touch {
  position: absolute;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  z-index: 40; display: none; pointer-events: none;
}
@media (max-width: 760px) { #touch { display: block; } }
body.t-active #touch { display: block; }
#touch.hide { display: none !important; }

/* virtual joystick (bottom-left) */
.tjoystick {
  position: absolute; left: 4px; bottom: 4px;
  width: 150px; height: 150px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto; touch-action: none;
  padding: env(safe-area-inset-bottom) env(safe-area-inset-left) 0 0;
}
.joy-base {
  width: 104px; height: 104px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30,44,80,0.35) 0%, rgba(10,16,32,0.55) 70%);
  border: 2px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.5), 0 0 20px rgba(63,169,255,0.15);
  position: relative;
}
.joy-knob {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7aa5ff, #2b4d9e 70%);
  border: 2px solid rgba(255,255,255,0.75);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  will-change: transform;
}

.tbtn {
  border-radius: 12px; border: 2px solid rgba(255,255,255,0.4);
  background: rgba(20,30,55,0.55); color: #fff; font-size: 15px;
  font-family: inherit; display: flex; align-items: center; justify-content: center;
  pointer-events: auto; touch-action: none;
  -webkit-user-select: none; user-select: none;
}

/* action buttons (bottom-right) */
.tbtns { position: absolute; right: calc(10px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; gap: 10px; pointer-events: auto; }
.tbtn.act { width: 64px; height: 64px; border-radius: 50%; font-size: 15px; font-weight: bold; letter-spacing: 1px; }
.tbtn.act[data-t="attack"] { border-color: rgba(255,120,90,0.85); background: rgba(90,24,14,0.55); }
.tbtn.act[data-t="jump"] { border-color: rgba(120,255,170,0.7); background: rgba(14,80,40,0.5); }
.tbtn.act[data-t="defend"] { border-color: rgba(120,190,255,0.7); background: rgba(14,40,90,0.55); }
.tbtn.pressed { background: rgba(255,210,63,0.5); border-color: var(--gold); transform: scale(0.94); }

/* one-touch specials: 2x2 grid above the action buttons */
.tspecials {
  position: absolute; right: calc(10px + env(safe-area-inset-right)); bottom: calc(104px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(2, 66px); gap: 6px;
  pointer-events: auto; justify-items: stretch;
}
.tbtn.special {
  width: 66px; height: 40px; font-size: 10px; letter-spacing: 0.5px; line-height: 1.1;
  border-radius: 9px; background: rgba(42,22,88,0.6);
  border-color: rgba(190,150,255,0.65);
}
/* colour-coded by move type */
.tbtn.special.k-proj { border-color: rgba(120,200,255,0.8); background: rgba(16,48,96,0.62); }
.tbtn.special.k-dash { border-color: rgba(255,200,120,0.8); background: rgba(96,64,14,0.62); }
.tbtn.special.k-melee { border-color: rgba(255,120,110,0.8); background: rgba(100,24,18,0.62); }
.tbtn.special.k-shockwave { border-color: rgba(170,150,255,0.8); background: rgba(52,30,110,0.62); }
.tbtn.special.k-heal { border-color: rgba(120,255,170,0.8); background: rgba(14,84,44,0.62); }
.tbtn.special.off { opacity: 0.4; border-color: rgba(255,255,255,0.25); }

/* utility: pause / team switch */
.tutil { position: absolute; top: calc(6px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); display: flex; gap: 8px; pointer-events: auto; }
.tbtn.util { width: auto; min-width: 58px; height: 34px; font-size: 11px; padding: 0 12px; border-radius: 9px; }

/* rotate hint for portrait phones */
#rotateHint {
  display: none;
  position: absolute;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  top: 0; left: 50%; transform: translateX(-50%);
  z-index: 45; pointer-events: none;
  align-items: flex-start; justify-content: center;
}
.rh-inner {
  margin-top: 12px; padding: 7px 16px; border-radius: 20px;
  background: rgba(10,16,32,0.78); border: 1px solid rgba(255,210,63,0.5);
  font-size: 12px; letter-spacing: 2px; color: var(--gold);
  text-shadow: 0 1px 0 #000; animation: rhPulse 2s ease-in-out infinite;
}
@keyframes rhPulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@media (orientation: portrait) and (max-width: 820px) {
  body.t-active #rotateHint { display: flex; }
}

/* on touch devices move the health bars to the top so the controls stay clear */
body.t-active .hud-p1, body.t-active .hud-p2 { top: calc(6px + env(safe-area-inset-top)); bottom: auto; width: 38vw; }
body.t-active .hud-name { font-size: 11px; }
body.t-active .bar { height: 10px; }
body.t-active .bar.mp { height: 5px; }
body.t-active .hud-mid { top: calc(6px + env(safe-area-inset-top)); }
body.t-active .hud-mid #hudStage { font-size: 12px; letter-spacing: 3px; }
body.t-active #hudStage { font-size: 12px; }
body.t-active .tutil { top: calc(44px + env(safe-area-inset-top)); }

@media (max-width: 760px) {
  .logo-l1 { font-size: 40px; }
  .logo-l2 { font-size: 28px; letter-spacing: 8px; }
  .mbtn { width: 260px; }
  .sel-grid { grid-template-columns: repeat(4, 1fr); }
  .menu-foot { font-size: 11px; line-height: 1.6; }
  .help-inner { padding: 12px 14px; }
  .help-body { flex-direction: column; gap: 10px; margin: 10px 0; }
  .help-col { padding: 12px 14px; }
  .help-col h3 { font-size: 15px; }
  .help-col li { font-size: 14px; line-height: 1.55; }
  .help-col li ul li { font-size: 13px; }
  .sel-title { font-size: 18px; }
  .sel-card { width: 70px; height: 82px; }
}