:root {
  --ink: #04060d;
  --cyan: #42e8ff;
  --pink: #ff3f8d;
  --cream: #f2fbff;
  --muted: #8ba8ba;
  --panel: rgba(7, 12, 22, 0.86);
  --line: rgba(125, 218, 255, 0.28);
  --font-cn: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --font-mono: "Consolas", "SFMono-Regular", "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #020309;
  overflow: hidden;
  color: var(--cream);
  font-family: var(--font-cn);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  overscroll-behavior: none;
  touch-action: manipulation;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 40%, #0a1020 0%, #05070e 52%, #010207 100%);
}

#stage-wrap {
  position: relative;
  width: min(100vw, calc(100vh * 1672 / 941));
  aspect-ratio: 1672 / 941;
  max-height: 100vh;
  overflow: hidden;
  background: #020309;
  box-shadow:
    0 0 0 1px rgba(105, 210, 255, 0.12),
    0 0 70px rgba(28, 175, 255, 0.13),
    0 0 180px rgba(255, 47, 135, 0.06);
}

#stage {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

.crt,
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.crt {
  z-index: 8;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.022) 0px,
      rgba(255, 255, 255, 0.022) 1px,
      rgba(0, 0, 0, 0.07) 2px,
      rgba(0, 0, 0, 0.07) 3px
    );
  opacity: 0.55;
  mix-blend-mode: soft-light;
}

.vignette {
  z-index: 9;
  background:
    radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.54) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.12), transparent 16%, transparent 82%, rgba(0, 0, 0, 0.25));
}

#scene-tag {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid rgba(104, 207, 255, 0.17);
  background: rgba(4, 8, 15, 0.55);
  backdrop-filter: blur(4px);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(202, 238, 255, 0.72);
  white-space: nowrap;
  pointer-events: none;
}

#scene-tag .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 8px var(--pink);
  animation: blink 1.8s infinite;
}

#scene-tag em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.28);
}

@keyframes blink {
  0%, 70%, 100% { opacity: 1; }
  75%, 90% { opacity: 0.25; }
}

#top-actions {
  position: absolute;
  z-index: 22;
  top: 84px;
  right: 14px;
  display: flex;
  gap: 6px;
  opacity: 0.54;
  transition: opacity 0.2s;
}

#top-actions:hover { opacity: 1; }

.icon-btn {
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(120, 210, 245, 0.2);
  background: rgba(3, 7, 14, 0.66);
  color: rgba(205, 240, 255, 0.72);
  font: 700 11px var(--font-cn);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.icon-btn:hover {
  color: #fff;
  border-color: rgba(80, 230, 255, 0.6);
  background: rgba(9, 24, 39, 0.85);
}

#rotate-hint {
  display: none;
  position: absolute;
  z-index: 24;
  top: calc(env(safe-area-inset-top) + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  border: 1px solid rgba(255, 209, 102, 0.25);
  background: rgba(12, 9, 4, 0.7);
  color: #ffd166;
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  pointer-events: none;
}

#rotate-hint span {
  display: inline-block;
  margin-right: 4px;
  animation: rotate 2.4s ease-in-out infinite;
}

@keyframes rotate {
  0%, 60%, 100% { transform: rotate(0deg); }
  75%, 90% { transform: rotate(90deg); }
}

/* ---------------------------------------------------------- touch */

.touch-ui {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

body.touch.gameplay .touch-ui { display: block; }
body.touch #scene-tag { display: none; }
body.touch.gameplay #top-actions { opacity: 0.34; }
body.touch .crt { opacity: 0.3; }

.stick {
  position: absolute;
  left: calc(18px + env(safe-area-inset-left));
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 132px;
  height: 132px;
  pointer-events: auto;
  touch-action: none;
}

.stick-ring {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(110, 225, 255, 0.28);
  background:
    radial-gradient(circle at 50% 50%, rgba(12, 28, 44, 0.55), rgba(3, 8, 15, 0.24) 70%);
  box-shadow: inset 0 0 25px rgba(50, 200, 255, 0.06), 0 0 18px rgba(0, 0, 0, 0.2);
}

.stick-cross::before,
.stick-cross::after {
  content: "";
  position: absolute;
  background: rgba(135, 225, 255, 0.1);
}

.stick-cross::before {
  left: 24px;
  right: 24px;
  top: 50%;
  height: 1px;
}

.stick-cross::after {
  top: 24px;
  bottom: 24px;
  left: 50%;
  width: 1px;
}

.stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(135, 239, 255, 0.7);
  background:
    radial-gradient(circle at 38% 32%, rgba(180, 250, 255, 0.38), rgba(11, 43, 61, 0.88) 55%, rgba(5, 15, 25, 0.95));
  box-shadow: 0 0 18px rgba(44, 219, 255, 0.2), inset 0 0 12px rgba(100, 240, 255, 0.15);
  transition: transform 0.05s linear;
}

.stick-label {
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  font: 700 7px var(--font-mono);
  letter-spacing: 0.22em;
  color: rgba(157, 224, 255, 0.42);
}

.action-pad {
  position: absolute;
  right: calc(18px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(2, 68px);
  grid-template-rows: repeat(2, 68px);
  gap: 12px;
  transform: rotate(-7deg);
  pointer-events: none;
}

.pad-btn {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(110, 225, 255, 0.35);
  background:
    radial-gradient(circle at 40% 30%, rgba(30, 62, 86, 0.8), rgba(5, 13, 22, 0.92) 68%);
  color: #dffaff;
  font-family: var(--font-cn);
  box-shadow: inset 0 0 15px rgba(58, 211, 255, 0.06), 0 0 12px rgba(0, 0, 0, 0.35);
  touch-action: none;
  transition: transform 0.06s, box-shadow 0.06s, border-color 0.06s;
}

.pad-btn b {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pad-btn small {
  font: 700 7px var(--font-mono);
  color: rgba(175, 230, 255, 0.45);
}

.pad-btn .cd-mask {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--cd-ratio, 0) * 100%);
  background: rgba(2, 6, 12, 0.72);
  pointer-events: none;
  transition: height 0.08s linear;
}

.pad-btn .cd-num {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 15px var(--font-mono);
  color: #effcff;
  text-shadow: 0 0 6px rgba(90, 230, 255, 0.75), 0 1px 2px #000;
  pointer-events: none;
}

.pad-btn.cooling {
  filter: saturate(0.45);
  border-color: rgba(130, 160, 180, 0.25);
}

.pad-btn.cooling b,
.pad-btn.cooling small { opacity: 0.42; }

.pad-btn.cooling .cd-num { opacity: 1; }

.pad-btn.attack {
  grid-column: 2;
  grid-row: 2;
  border-color: rgba(90, 236, 255, 0.65);
  background:
    radial-gradient(circle at 40% 30%, rgba(40, 86, 112, 0.9), rgba(5, 15, 24, 0.94) 68%);
}

.pad-btn.attack b {
  font-size: 16px;
  color: #b9fbff;
}

.pad-btn.skill1 {
  grid-column: 2;
  grid-row: 1;
  border-color: rgba(255, 80, 170, 0.55);
}

.pad-btn.skill2 {
  grid-column: 1;
  grid-row: 2;
  border-color: rgba(255, 150, 95, 0.55);
}

.pad-btn.ultimate {
  grid-column: 1;
  grid-row: 1;
  border-color: rgba(255, 209, 102, 0.62);
  background:
    radial-gradient(circle at 40% 30%, rgba(88, 66, 28, 0.7), rgba(18, 12, 6, 0.95) 68%);
}

.pad-btn.ultimate b {
  color: #ffe19a;
  font-size: 14px;
}

.pad-btn.ultimate small { color: rgba(255, 215, 130, 0.55); }

.pad-btn.down {
  transform: scale(0.92);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 24px rgba(120, 240, 255, 0.28), 0 0 22px rgba(70, 220, 255, 0.35);
}

/* ---------------------------------------------------------- toast / boot */

#toast {
  position: absolute;
  z-index: 35;
  left: 50%;
  bottom: 86px;
  transform: translate(-50%, 8px);
  padding: 7px 14px;
  border: 1px solid rgba(100, 215, 255, 0.25);
  background: rgba(4, 9, 17, 0.9);
  color: #d9f7ff;
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

#boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background:
    radial-gradient(ellipse at center, #101a2d 0%, #05070e 55%, #010207 100%);
  transition: opacity 0.55s ease, visibility 0.55s;
}

#boot.hide {
  opacity: 0;
  visibility: hidden;
}

.boot-logo {
  font: 900 clamp(34px, 7vw, 68px) var(--font-cn);
  letter-spacing: 0.04em;
  color: #eaffff;
  text-shadow: 0 0 24px rgba(60, 220, 255, 0.4);
}

.boot-logo span {
  color: var(--pink);
  margin-left: 0.08em;
  text-shadow: 0 0 24px rgba(255, 50, 130, 0.5);
}

.boot-line {
  width: min(260px, 54vw);
  height: 2px;
  background: rgba(130, 220, 255, 0.12);
  overflow: hidden;
}

.boot-line i {
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--pink));
  animation: bootline 1.1s ease-in-out infinite;
}

@keyframes bootline {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

.boot-text {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(170, 220, 245, 0.5);
}

/* ---------------------------------------------------------- responsive */

@media (orientation: portrait) and (max-width: 1000px) {
  #app {
    align-items: flex-start;
    padding-top: calc(env(safe-area-inset-top) + 10px);
  }

  #stage-wrap {
    width: 100vw;
  }

  #rotate-hint {
    display: block;
  }

  #scene-tag {
    bottom: auto;
    top: calc(env(safe-area-inset-top) + 38px);
    font-size: 8px;
  }

  .crt { opacity: 0.35; }
}

@media (max-height: 430px) and (pointer: coarse) {
  .stick {
    width: 112px;
    height: 112px;
    left: calc(12px + env(safe-area-inset-left));
    bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .stick-knob {
    width: 46px;
    height: 46px;
  }

  .action-pad {
    grid-template-columns: repeat(2, 58px);
    grid-template-rows: repeat(2, 58px);
    gap: 9px;
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .pad-btn b { font-size: 12px; }
  .pad-btn.attack b { font-size: 14px; }
  .pad-btn.ultimate b { font-size: 12px; }
}

@media (hover: hover) and (pointer: fine) {
  body:not(.touch) .touch-ui { display: none; }
}

/* ============================================================
   menus / lobby / results
   ============================================================ */

#screens {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.screen.active { display: flex; }

.screen-bg {
  position: absolute;
  inset: 0;
}

.title-bg {
  background:
    linear-gradient(90deg, rgba(4, 9, 18, 0.92) 0%, rgba(4, 9, 18, 0.66) 34%, rgba(4, 9, 18, 0.12) 63%, rgba(4, 9, 18, 0.02) 100%),
    linear-gradient(to top, rgba(2, 4, 8, 0.64), transparent 55%);
}

.panel-bg {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(9, 16, 30, 0.92), rgba(3, 6, 12, 0.96) 70%),
    linear-gradient(to bottom, rgba(2, 4, 8, 0.6), rgba(2, 4, 8, 0.95));
  backdrop-filter: blur(4px);
}

.result-bg {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(4, 8, 15, 0.35), rgba(2, 4, 8, 0.88) 75%);
  backdrop-filter: blur(2px);
}

.pause-bg {
  background: rgba(2, 4, 9, 0.72);
  backdrop-filter: blur(6px);
}

.title-inner {
  position: relative;
  z-index: 2;
  width: min(1100px, 92vw);
  padding: 4vh 0 3vh;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 10px var(--font-mono);
  letter-spacing: 0.26em;
  color: rgba(150, 220, 250, 0.62);
}

.kicker i {
  width: 22px;
  height: 1px;
  background: var(--pink);
  box-shadow: 0 0 8px var(--pink);
}

.hero-logo {
  margin: 10px 0 0;
  font: 900 clamp(48px, 8vw, 112px)/0.98 var(--font-cn);
  letter-spacing: 0.02em;
  color: #f2fdff;
  text-shadow:
    0 0 18px rgba(100, 235, 255, 0.28),
    0 0 70px rgba(22, 170, 255, 0.14);
}

.hero-logo span {
  margin-left: 0.08em;
  color: var(--pink);
  text-shadow:
    0 0 18px rgba(255, 47, 135, 0.4),
    0 0 80px rgba(255, 47, 135, 0.18);
}

.hero-cn {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.6vw, 18px);
  font-weight: 700;
  letter-spacing: 0.42em;
  color: rgba(208, 244, 255, 0.78);
}

.hero-tag {
  margin: 16px 0 0;
  font-size: clamp(12px, 1.3vw, 15px);
  line-height: 1.8;
  color: rgba(168, 205, 225, 0.6);
}

.hero-tag em {
  font-style: normal;
  color: rgba(255, 94, 155, 0.9);
}

.main-menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(20px, 4vh, 42px);
  max-width: 880px;
}

.menu-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 13px 14px;
  border: 1px solid rgba(104, 200, 240, 0.22);
  background:
    linear-gradient(135deg, rgba(12, 25, 42, 0.9), rgba(4, 9, 17, 0.72));
  color: #e9fbff;
  text-align: left;
  font-family: var(--font-cn);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: transform 0.16s, border-color 0.16s, background 0.16s;
}

.menu-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: rgba(80, 220, 255, 0.35);
  transition: background 0.16s, box-shadow 0.16s;
}

.menu-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(88, 232, 255, 0.62);
  background: linear-gradient(135deg, rgba(16, 44, 66, 0.95), rgba(5, 11, 20, 0.8));
}

.menu-btn.hot::before { background: var(--pink); box-shadow: 0 0 12px var(--pink); }

.mb-index {
  font: 700 9px var(--font-mono);
  color: rgba(155, 218, 245, 0.38);
  align-self: flex-start;
  margin-top: 2px;
}

.mb-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.mb-copy b {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.mb-copy small {
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(158, 202, 224, 0.55);
  white-space: nowrap;
}

.mb-arrow {
  margin-left: auto;
  color: rgba(110, 224, 255, 0.42);
  font: 400 18px var(--font-mono);
  transition: transform 0.16s, color 0.16s;
}

.menu-btn:hover .mb-arrow {
  transform: translateX(4px);
  color: var(--cyan);
}

.title-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 24px;
  font: 600 9px var(--font-mono);
  letter-spacing: 0.06em;
  color: rgba(145, 190, 215, 0.48);
}

.title-foot b {
  color: rgba(219, 248, 255, 0.82);
  font-weight: 700;
}

/* ---------------------------------------------------------- panels */

.panel {
  position: relative;
  z-index: 2;
  width: min(1120px, 94vw);
  max-height: 94vh;
  overflow: auto;
  padding: clamp(16px, 3vh, 32px) clamp(18px, 3vw, 42px);
  border: 1px solid rgba(96, 192, 235, 0.2);
  background:
    linear-gradient(160deg, rgba(10, 20, 34, 0.94), rgba(4, 8, 15, 0.94));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 30px 90px rgba(0, 0, 0, 0.55),
    0 0 90px rgba(30, 190, 255, 0.05);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 200, 245, 0.3) transparent;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(110, 205, 245, 0.12);
}

.head-copy { flex: 1; }

.head-copy h2 {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: 0.06em;
}

.head-copy p {
  margin: 4px 0 0;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(160, 205, 225, 0.55);
}

.mode-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(100, 220, 255, 0.18);
  background: rgba(4, 10, 18, 0.55);
  font: 700 9px var(--font-mono);
  letter-spacing: 0.14em;
  color: rgba(137, 225, 255, 0.7);
  white-space: nowrap;
}

.status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff5a80;
  box-shadow: 0 0 7px #ff5a80;
}

.mode-chip.online .status-dot {
  background: #5fffc2;
  box-shadow: 0 0 7px #5fffc2;
}

.ghost-btn {
  padding: 8px 12px;
  border: 1px solid rgba(120, 200, 235, 0.22);
  background: rgba(3, 8, 15, 0.5);
  color: rgba(199, 236, 252, 0.72);
  font: 700 11px var(--font-cn);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}

.ghost-btn:hover {
  border-color: rgba(80, 230, 255, 0.6);
  color: #fff;
  background: rgba(8, 22, 36, 0.8);
}

.ghost-btn.small { padding: 5px 8px; font-size: 9px; }

.primary-btn {
  padding: 11px 22px;
  border: 1px solid rgba(106, 238, 255, 0.55);
  background:
    linear-gradient(110deg, rgba(18, 92, 118, 0.9), rgba(12, 38, 55, 0.86));
  color: #e9feff;
  font: 800 13px var(--font-cn);
  letter-spacing: 0.08em;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.primary-btn span { margin-left: 10px; color: var(--pink); }

.primary-btn:hover {
  transform: translateY(-1px);
  border-color: #9cf7ff;
  box-shadow: 0 0 24px rgba(54, 220, 255, 0.18);
}

.primary-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.primary-btn.ready {
  border-color: rgba(95, 255, 195, 0.7);
  background: linear-gradient(110deg, rgba(13, 96, 72, 0.9), rgba(8, 40, 31, 0.9));
}

/* ---------------------------------------------------------- select */

.select-panel { width: min(1060px, 95vw); }

.select-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 16px 0 10px;
}

.side-panel {
  padding: 12px;
  border: 1px solid rgba(100, 195, 235, 0.12);
  background: rgba(3, 8, 15, 0.4);
}

.side-panel[data-side="0"] { border-color: rgba(58, 220, 255, 0.2); }
.side-panel[data-side="1"] { border-color: rgba(255, 65, 140, 0.18); }

.side-panel.disabled { opacity: 0.64; }

.side-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11px;
  color: rgba(190, 230, 248, 0.62);
}

.side-tag {
  padding: 2px 6px;
  font: 800 9px var(--font-mono);
  letter-spacing: 0.1em;
}

.side-tag.p1 {
  color: #05131a;
  background: #47e7ff;
}

.side-tag.p2 {
  color: #1a0510;
  background: #ff4f9b;
}

.vs-mark {
  font: 900 italic 20px var(--font-mono);
  text-align: center;
  color: rgba(255, 82, 150, 0.62);
  text-shadow: 0 0 14px rgba(255, 50, 130, 0.35);
}

.fighter-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.fcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px;
  border: 1px solid rgba(110, 195, 230, 0.16);
  background: linear-gradient(160deg, rgba(11, 24, 38, 0.92), rgba(3, 7, 13, 0.94));
  text-align: left;
  color: #e9fbff;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
  font-family: var(--font-cn);
}

.fcard:hover {
  transform: translateY(-2px);
  border-color: rgba(100, 232, 255, 0.55);
}

.fcard.selected {
  border-color: rgba(100, 245, 255, 0.9);
  box-shadow: 0 0 22px rgba(40, 210, 255, 0.16), inset 0 0 18px rgba(40, 210, 255, 0.05);
}

.side-panel[data-side="1"] .fcard.selected {
  border-color: rgba(255, 90, 160, 0.9);
  box-shadow: 0 0 22px rgba(255, 50, 130, 0.15), inset 0 0 18px rgba(255, 50, 130, 0.05);
}

.fcard canvas {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3.4;
  image-rendering: pixelated;
  background: #050a13;
}

.fcard-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}

.fcard-name b { font-size: 14px; letter-spacing: 0.05em; white-space: nowrap; }
.select-panel .fcard-name small { display: none; }

.fcard-name small {
  font: 700 7px var(--font-mono);
  letter-spacing: 0.12em;
  color: rgba(145, 205, 230, 0.45);
}

.fcard-title {
  font-size: 8px;
  letter-spacing: 0.06em;
  color: rgba(255, 130, 175, 0.7);
}

.fcard-skills {
  display: none;
  margin-top: 2px;
  font: 600 7px var(--font-mono);
  color: rgba(160, 205, 225, 0.48);
}

.fcard .pick-mark {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transform: rotate(45deg);
}

.fcard.selected .pick-mark {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

.side-panel[data-side="1"] .fcard.selected .pick-mark {
  background: var(--pink);
  border-color: var(--pink);
  box-shadow: 0 0 10px var(--pink);
}

.fcard .cpu-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 5px;
  font: 800 7px var(--font-mono);
  letter-spacing: 0.08em;
  color: #05131a;
  background: rgba(255, 79, 155, 0.9);
}

.select-bottom {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(110, 205, 245, 0.1);
}

.select-note {
  flex: 1;
  font-size: 10px;
  line-height: 1.6;
  color: rgba(150, 200, 225, 0.55);
}

/* ---------------------------------------------------------- online */

.online-panel { width: min(760px, 95vw); }

#online-entry { padding-top: 16px; }

.online-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.tab {
  flex: 1;
  padding: 9px;
  border: 1px solid rgba(110, 195, 230, 0.14);
  background: rgba(4, 9, 17, 0.55);
  color: rgba(170, 215, 238, 0.55);
  font: 700 11px var(--font-cn);
  cursor: pointer;
}

.tab.active {
  border-color: rgba(80, 225, 255, 0.5);
  background: rgba(11, 53, 70, 0.55);
  color: #e9fdff;
}

.entry-box { display: none; }
.entry-box.active { display: block; }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 13px;
}

.field span {
  font: 700 9px var(--font-mono);
  letter-spacing: 0.14em;
  color: rgba(150, 210, 235, 0.55);
}

.field input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(105, 195, 235, 0.24);
  background: rgba(2, 7, 13, 0.85);
  color: #eaffff;
  font: 700 16px var(--font-cn);
  letter-spacing: 0.12em;
  outline: none;
}

.field input:focus {
  border-color: rgba(80, 235, 255, 0.7);
  box-shadow: 0 0 18px rgba(50, 220, 255, 0.1);
}

#room-code {
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: 0.28em;
  text-align: center;
}

.entry-box .primary-btn { width: 100%; margin-top: 2px; }

.hint {
  margin: 10px 0 0;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(145, 190, 215, 0.42);
  text-align: center;
}

.room-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(110, 205, 245, 0.1);
}

.mini-label {
  font: 700 8px var(--font-mono);
  letter-spacing: 0.16em;
  color: rgba(145, 198, 225, 0.45);
}

.room-line b {
  font: 900 24px var(--font-mono);
  letter-spacing: 0.24em;
  color: #8ff4ff;
  text-shadow: 0 0 16px rgba(50, 220, 255, 0.35);
}

.room-line .ghost-btn { margin-left: auto; }

.lobby-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0;
}

.lslot {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid rgba(105, 195, 235, 0.13);
  background: rgba(3, 8, 15, 0.55);
}

.lslot.empty { border-style: dashed; opacity: 0.5; }

.lslot .avatar {
  width: 34px;
  height: 40px;
  object-fit: cover;
  image-rendering: pixelated;
  border: 1px solid rgba(100, 200, 240, 0.28);
  background: #07101d;
}

.lslot .ls-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lslot .ls-copy b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lslot .ls-copy small { font: 600 8px var(--font-mono); color: rgba(150, 200, 225, 0.5); }
.lslot .ls-ready {
  margin-left: auto;
  font: 800 8px var(--font-mono);
  letter-spacing: 0.08em;
  color: #5fffc2;
}
.lslot .ls-ready.wait { color: rgba(160, 195, 215, 0.4); }

.lobby-pick { margin-top: 4px; }
.lobby-cards { margin-top: 7px; max-width: 480px; }

.lobby-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(110, 205, 245, 0.1);
}

#lobby-status {
  flex: 1;
  font-size: 10px;
  color: rgba(155, 205, 228, 0.55);
}

/* ---------------------------------------------------------- result / pause */

.result-panel,
.pause-panel {
  position: relative;
  z-index: 2;
  width: min(560px, 92vw);
  padding: clamp(24px, 4vh, 42px) clamp(22px, 4vw, 48px);
  border: 1px solid rgba(105, 205, 245, 0.2);
  background: linear-gradient(160deg, rgba(10, 21, 36, 0.9), rgba(3, 7, 14, 0.95));
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.65);
}

.result-kicker {
  font: 700 10px var(--font-mono);
  letter-spacing: 0.3em;
  color: rgba(150, 220, 248, 0.5);
}

.result-title {
  margin: 8px 0 0;
  font: 900 italic clamp(42px, 8vw, 78px)/0.95 var(--font-mono);
  letter-spacing: -0.05em;
  color: #eaffff;
  text-shadow: 0 0 26px rgba(65, 230, 255, 0.35);
}

.result-title.lose { color: #ff6b9d; text-shadow: 0 0 26px rgba(255, 50, 125, 0.35); }
.result-title.draw { color: #ffd166; text-shadow: 0 0 26px rgba(255, 200, 80, 0.25); }

.result-sub {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(165, 205, 225, 0.6);
}

.result-score {
  margin-top: 16px;
  font: 800 20px var(--font-mono);
  letter-spacing: 0.24em;
  color: rgba(215, 248, 255, 0.82);
}

.result-actions,
.pause-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.result-status {
  min-height: 15px;
  margin-top: 12px;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(150, 210, 235, 0.55);
}

.pause-panel { width: min(400px, 90vw); }
.pause-title { margin: 6px 0 4px; font-size: 38px; font-weight: 900; letter-spacing: 0.14em; }

/* ---------------------------------------------------------- states */

#scene-tag,
#top-actions {
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

body.gameplay #scene-tag,
body.gameplay #top-actions {
  opacity: 1;
  pointer-events: auto;
}

body.gameplay #scene-tag { opacity: 0.9; }

body.gameplay #top-actions { opacity: 0.54; }

body.touch .touch-ui { display: none; }
body.touch.gameplay .touch-ui { display: block; }

@media (max-width: 920px) {
  .main-menu { grid-template-columns: 1fr; max-width: 440px; }
  .menu-btn { min-height: 58px; }
  .mb-copy small { white-space: normal; }
  .title-inner { padding-top: 3vh; }
  .title-foot { display: none; }
  .select-grid { grid-template-columns: 1fr; gap: 6px; }
  .vs-mark { display: none; }
  .select-panel .fighter-cards { grid-template-columns: repeat(3, 1fr); }
  .fcard canvas { aspect-ratio: 4 / 2.7; }
  .fcard-name b { font-size: 12px; }
  .fcard-title { font-size: 7px; }
  .panel-head { gap: 8px; }
  .head-copy p { display: none; }
  .lobby-slots { grid-template-columns: 1fr; }
  .result-actions, .pause-actions { flex-direction: column; }
}

@media (max-height: 540px) {
  .hero-logo { font-size: clamp(38px, 11vh, 66px); }
  .hero-tag { display: none; }
  .hero-cn { margin-top: 4px; font-size: 11px; }
  .main-menu { margin-top: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 860px; }
  .menu-btn { min-height: 54px; padding: 9px 10px; }
  .mb-copy b { font-size: 13px; }
  .mb-copy small { display: none; }
  .title-inner { padding-top: 1vh; }
  .panel { padding: 12px 16px; }
  .panel-head { padding-bottom: 8px; }
  .select-grid { padding: 8px 0 4px; }
  .fcard canvas { aspect-ratio: 4 / 2.5; }
  .fcard-title, .fcard-skills { display: none; }
  .select-bottom { padding-top: 8px; }
  .result-panel, .pause-panel { padding: 18px 24px; }
  .result-title { font-size: 48px; }
}

@media (max-width: 700px) and (orientation: portrait) {
  .title-inner { width: 90vw; }
  .hero-logo { font-size: 18vw; }
  .hero-cn { font-size: 11px; letter-spacing: 0.42em; }
  .hero-tag { font-size: 11px; }
  .main-menu { gap: 7px; margin-top: 18px; }
  .menu-btn { min-height: 56px; }
  .select-panel, .online-panel { width: 94vw; max-height: 86vh; }
  .panel { padding: 14px; }
  .select-panel .side-panel { padding: 8px; }
  .fcard { padding: 5px; }
  .fcard canvas { aspect-ratio: 1 / 0.72; }
  .fcard-skills { display: none; }
  .select-bottom { flex-direction: column; gap: 8px; align-items: stretch; }
  .select-note { text-align: center; }
  .primary-btn { width: 100%; }
  .room-line { flex-wrap: wrap; }
  .room-line b { font-size: 20px; }
  .online-panel { max-height: 88vh; overflow: auto; }
}

/* landscape phones: keep select side-by-side and compact */
@media (orientation: landscape) and (max-height: 600px) {
  .select-grid {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    gap: 5px;
    padding: 6px 0 4px;
  }

  .vs-mark { display: block; font-size: 15px; }
  .select-panel .fighter-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .select-panel .fcard { padding: 5px; }
  .select-panel .fcard canvas { aspect-ratio: 4 / 3.1; }
  .select-panel .fcard-title,
  .select-panel .fcard-skills { display: none; }
  .select-panel .fcard-name b { font-size: 11px; }
  .select-panel .fcard-name small { font-size: 6px; }
  .select-panel .side-panel { padding: 6px; }
  .select-panel .side-head { margin-bottom: 5px; font-size: 9px; }
  .select-panel .side-tag { font-size: 8px; }
  .select-bottom { padding-top: 6px; gap: 8px; }
  .select-note { font-size: 8px; }
  .select-panel .primary-btn { padding: 8px 15px; font-size: 11px; }
  .select-panel .panel-head { padding-bottom: 7px; }
  .select-panel .head-copy h2 { font-size: 18px; }
  .select-panel .head-copy p { display: none; }
  .select-panel .mode-chip { padding: 5px 7px; font-size: 8px; }
  .select-panel .ghost-btn { padding: 6px 8px; font-size: 9px; }

  .hero-logo { font-size: clamp(42px, 13vh, 64px); }
}

/* compact lobby for landscape phones */
@media (orientation: landscape) and (max-height: 600px) {
  .online-panel { max-height: 94vh; }
  .lobby-slots { grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
  .lslot { min-height: 42px; padding: 5px 7px; gap: 6px; }
  .lslot .avatar { width: 26px; height: 32px; }
  .lslot .ls-copy b { font-size: 10px; }
  .lslot .ls-copy small { font-size: 7px; }
  .lslot .ls-ready { font-size: 7px; }
  .lobby-pick .mini-label { font-size: 7px; }
  .lobby-cards { grid-template-columns: repeat(3, 112px); max-width: none; gap: 6px; }
  .lobby-cards .fcard { padding: 4px; }
  .lobby-cards .fcard canvas { height: 86px; aspect-ratio: auto; }
  .lobby-cards .fcard-title, .lobby-cards .fcard-skills { display: none; }
  .lobby-cards .fcard-name b { font-size: 10px; }
  .lobby-cards .fcard-name small { display: none; }
  .lobby-actions { margin-top: 8px; padding-top: 8px; }
  .lobby-actions .primary-btn { padding: 7px 14px; font-size: 10px; }
  #lobby-status { font-size: 8px; }
}

.awaken-btn {
  display: none;
  position: fixed;
  z-index: 32;
  right: calc(116px + env(safe-area-inset-right));
  bottom: calc(178px + env(safe-area-inset-bottom));
  width: 74px;
  height: 74px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 50%;
  border: 1px solid rgba(255, 218, 120, 0.9);
  background: radial-gradient(circle at 40% 30%, rgba(122, 88, 24, 0.95), rgba(24, 15, 4, 0.96) 70%);
  color: #fff4c2;
  font-family: var(--font-cn);
  box-shadow: 0 0 28px rgba(255, 200, 70, 0.38), inset 0 0 18px rgba(255, 230, 150, 0.16);
  pointer-events: auto;
  touch-action: none;
  animation: awakenPulse 1.1s ease-in-out infinite;
}

body.touch.gameplay .awaken-btn.ready { display: flex; }

.awaken-btn b {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(255, 220, 120, 0.8);
}

.awaken-btn small {
  font: 700 7px var(--font-mono);
  letter-spacing: 0.12em;
  color: rgba(255, 230, 170, 0.65);
}

.awaken-btn.down {
  transform: scale(0.92);
  box-shadow: 0 0 36px rgba(255, 235, 150, 0.7), inset 0 0 24px rgba(255, 245, 200, 0.3);
}

@keyframes awakenPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 22px rgba(255, 200, 70, 0.3), inset 0 0 16px rgba(255, 230, 150, 0.12); }
  50% { transform: scale(1.06); box-shadow: 0 0 40px rgba(255, 215, 90, 0.62), inset 0 0 24px rgba(255, 240, 180, 0.25); }
}

@media (max-height: 430px) and (pointer: coarse) {
  .awaken-btn {
    width: 62px;
    height: 62px;
    right: calc(102px + env(safe-area-inset-right));
    bottom: calc(150px + env(safe-area-inset-bottom));
  }
  .awaken-btn b { font-size: 12px; }
  .awaken-btn small { display: none; }
}


.extra-skills {
  display: none;
  position: fixed;
  z-index: 31;
  right: calc(178px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
}

body.touch.gameplay .extra-skills.has-skills { display: flex; }

.pad-btn.extra {
  width: 54px;
  height: 54px;
  border-color: rgba(130, 230, 255, 0.4);
  border-radius: 14px;
  pointer-events: auto;
}

.pad-btn.extra b {
  font-size: 11px;
  max-width: 48px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pad-btn.extra small { font-size: 6px; }

@media (max-height: 430px) and (pointer: coarse) {
  .extra-skills {
    right: calc(158px + env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
    gap: 5px;
  }
  .pad-btn.extra { width: 48px; height: 48px; }
  .pad-btn.extra b { font-size: 10px; max-width: 42px; }
}

.stage-picker {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0 0;
}

.stage-picker .mini-label { margin-right: 3px; }

.stage-btn {
  padding: 6px 12px;
  border: 1px solid rgba(110, 195, 235, 0.2);
  background: rgba(4, 9, 17, 0.6);
  color: rgba(175, 215, 235, 0.6);
  font: 700 10px var(--font-cn);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.stage-btn:hover { color: #fff; border-color: rgba(100, 225, 255, 0.5); }

.stage-btn.active {
  color: #fff;
  border-color: rgba(255, 209, 102, 0.65);
  background: rgba(90, 65, 20, 0.4);
}

@media (orientation: landscape) and (max-height: 600px) {
  .stage-picker { padding-top: 5px; }
  .stage-btn { padding: 4px 8px; font-size: 8px; }
}

.dpad {
  position: absolute;
  left: calc(18px + env(safe-area-inset-left));
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(2, 64px);
  grid-template-rows: repeat(2, 64px);
  gap: 8px;
  pointer-events: none;
}

body.touch.gameplay .dpad { display: grid; }

.dir-btn {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid rgba(110, 225, 255, 0.45);
  border-radius: 16px;
  background:
    radial-gradient(circle at 40% 30%, rgba(28, 62, 82, 0.78), rgba(5, 13, 22, 0.92) 70%);
  color: #dffaff;
  font-family: var(--font-cn);
  box-shadow: inset 0 0 12px rgba(60, 215, 255, 0.06), 0 0 12px rgba(0, 0, 0, 0.35);
  touch-action: none;
  transition: transform 0.06s, border-color 0.06s, box-shadow 0.06s;
}

.dir-btn b { font-size: 18px; font-weight: 800; }
.dir-btn small { font: 700 6px var(--font-mono); letter-spacing: 0.08em; color: rgba(175, 230, 255, 0.45); }

.dir-btn.down {
  transform: scale(0.93);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 20px rgba(120, 240, 255, 0.25), 0 0 18px rgba(70, 220, 255, 0.3);
}

.block-btn {
  position: absolute;
  left: calc(18px + env(safe-area-inset-left));
  bottom: calc(162px + env(safe-area-inset-bottom));
  width: 136px;
  height: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid rgba(190, 220, 240, 0.4);
  border-radius: 14px;
  background: rgba(8, 18, 28, 0.82);
  color: rgba(225, 245, 255, 0.8);
  font-family: var(--font-cn);
  pointer-events: auto;
  touch-action: none;
  transition: transform 0.06s, border-color 0.06s, background 0.06s;
}

.block-btn b { font-size: 13px; font-weight: 800; }
.block-btn small { font: 700 6px var(--font-mono); color: rgba(170, 210, 230, 0.4); }
.block-btn.down {
  transform: scale(0.96);
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(20, 47, 63, 0.9);
}

@media (max-height: 430px) and (pointer: coarse) {
  .dpad {
    grid-template-columns: repeat(2, 56px);
    grid-template-rows: repeat(2, 56px);
    gap: 6px;
    left: calc(12px + env(safe-area-inset-left));
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .dir-btn b { font-size: 16px; }
  .dir-btn small { display: none; }
  .block-btn {
    left: calc(12px + env(safe-area-inset-left));
    bottom: calc(136px + env(safe-area-inset-bottom));
    width: 118px;
    height: 32px;
  }
  .block-btn b { font-size: 11px; }
  .block-btn small { display: none; }
}

/* ---------------------------------------------------------- character guide */

.main-menu {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1100px;
}

.guide-panel {
  width: min(1160px, 94vw);
}

.guide-layout {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  gap: 18px;
  padding-top: 14px;
}

.guide-side {
  min-width: 0;
}

.guide-roster {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.guide-card {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 58px;
  padding: 5px 8px 5px 5px;
  border: 1px solid rgba(96, 192, 235, 0.18);
  background: rgba(4, 10, 18, 0.66);
  color: #e6f9ff;
  text-align: left;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

.guide-card:hover, .guide-card.active {
  border-color: rgba(90, 230, 255, 0.58);
  background: rgba(10, 30, 45, 0.8);
}

.guide-card.active { box-shadow: inset 2px 0 0 var(--cyan); }

.guide-card canvas {
  width: 56px;
  height: 50px;
  object-fit: cover;
  background: #050b13;
  flex: 0 0 auto;
}

.guide-card-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.guide-card-copy b { font-size: 14px; font-weight: 800; }
.guide-card-copy small { font: 700 8px var(--font-mono); color: rgba(150, 205, 230, 0.5); }
.guide-card-copy em { font-style: normal; font-size: 8px; color: rgba(255, 209, 102, 0.75); }

.guide-forms {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.guide-forms[hidden] { display: none; }

.guide-form-btn {
  flex: 1;
  min-width: 64px;
  padding: 6px 4px;
  border: 1px solid rgba(255, 209, 102, 0.2);
  background: rgba(30, 22, 8, 0.4);
  color: rgba(240, 220, 180, 0.65);
  font: 700 10px var(--font-cn);
  cursor: pointer;
}

.guide-form-btn.active {
  color: #fff2c4;
  border-color: rgba(255, 209, 102, 0.7);
  background: rgba(100, 70, 20, 0.45);
}

.guide-detail {
  min-width: 0;
  max-height: 66vh;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 200, 245, 0.3) transparent;
}

.guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: end;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(110, 205, 245, 0.12);
}

.guide-hero h3 {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: 0.05em;
}

.guide-hero h3 small {
  font: 700 11px var(--font-mono);
  color: rgba(150, 210, 235, 0.55);
  margin-left: 8px;
  letter-spacing: 0.12em;
}

.guide-hero p {
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: rgba(180, 215, 230, 0.72);
}

.guide-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.guide-stat {
  padding: 3px 7px;
  border: 1px solid rgba(90, 200, 240, 0.15);
  background: rgba(4, 10, 18, 0.55);
  font: 700 8px var(--font-mono);
  color: rgba(200, 235, 250, 0.72);
}

.guide-stat b { color: #fff; }

.guide-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(110, 205, 245, 0.1);
}

.guide-control {
  padding: 7px 8px;
  border-left: 2px solid rgba(80, 220, 255, 0.3);
  background: rgba(4, 10, 18, 0.42);
}

.guide-control b { display: block; font-size: 11px; color: #effcff; }
.guide-control span { display: block; margin-top: 2px; font: 700 8px var(--font-mono); color: rgba(150, 210, 235, 0.6); }

.guide-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 13px 0 7px;
  font: 800 11px var(--font-cn);
  color: rgba(225, 250, 255, 0.88);
}

.guide-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(90, 220, 255, 0.22), transparent);
}

.guide-skill {
  margin-bottom: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(90, 190, 235, 0.14);
  background: linear-gradient(120deg, rgba(8, 18, 30, 0.8), rgba(4, 8, 14, 0.55));
}

.guide-skill.ultimate {
  border-color: rgba(255, 209, 102, 0.28);
  background: linear-gradient(120deg, rgba(40, 28, 8, 0.5), rgba(8, 8, 10, 0.6));
}

.gs-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gs-key {
  min-width: 34px;
  padding: 3px 5px;
  border: 1px solid rgba(90, 220, 255, 0.3);
  font: 800 9px var(--font-mono);
  color: #9df5ff;
  text-align: center;
}

.guide-skill.ultimate .gs-key { border-color: rgba(255, 209, 102, 0.5); color: #ffe6a6; }

.gs-name { flex: 1; min-width: 0; }
.gs-name b { font-size: 13px; color: #f0fdff; }
.gs-name small { margin-left: 5px; font: 700 7px var(--font-mono); color: rgba(150, 205, 230, 0.48); }

.gs-tag {
  padding: 2px 5px;
  border: 1px solid rgba(255, 209, 102, 0.25);
  font: 800 8px var(--font-cn);
  color: rgba(255, 230, 170, 0.9);
}

.gs-desc {
  margin: 6px 0 0;
  font-size: 10px;
  line-height: 1.65;
  color: rgba(180, 215, 230, 0.78);
}

.gs-meta {
  margin-top: 5px;
  font: 700 8px var(--font-mono);
  color: rgba(145, 195, 220, 0.55);
}

.gs-variant {
  margin-top: 5px;
  padding: 4px 7px;
  border-left: 2px solid rgba(255, 209, 102, 0.38);
  background: rgba(255, 209, 102, 0.035);
  font-size: 9px;
  line-height: 1.55;
  color: rgba(235, 225, 195, 0.75);
}

.gs-variant b { color: #ffe6a6; }

.guide-empty {
  padding: 20px;
  text-align: center;
  font-size: 11px;
  color: rgba(170, 210, 230, 0.5);
}

@media (max-width: 920px) {
  .main-menu { grid-template-columns: 1fr; max-width: 440px; }
  .guide-layout { grid-template-columns: 1fr; gap: 10px; }
  .guide-roster { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .guide-card { min-width: 160px; }
  .guide-forms { margin-top: 4px; }
  .guide-detail { max-height: 50vh; }
  .guide-hero { grid-template-columns: 1fr; }
  .guide-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-height: 540px) {
  .main-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 900px; }
  .guide-panel { padding: 10px 14px; }
  .guide-layout { padding-top: 8px; }
  .guide-detail { max-height: 58vh; }
  .guide-hero h3 { font-size: 22px; }
  .guide-hero p { font-size: 10px; }
  .guide-controls { padding: 6px 0; }
  .guide-skill { padding: 7px 8px; }
  .guide-skill .gs-desc { font-size: 9px; }
}

@media (max-width: 700px) and (orientation: portrait) {
  .guide-panel { width: 94vw; max-height: 88vh; }
  .guide-roster { flex-direction: column; }
  .guide-card { min-width: 0; }
  .guide-card canvas { width: 48px; height: 42px; }
  .guide-controls { grid-template-columns: 1fr; }
}

.training-panel {
  display: none;
  margin: 14px 0 4px;
  padding: 10px;
  border: 1px solid rgba(90, 200, 240, 0.16);
  background: rgba(3, 9, 16, 0.55);
}

.training-panel.on { display: block; }

.training-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  font: 800 11px var(--font-cn);
  color: rgba(225, 250, 255, 0.85);
}

.training-head span {
  font: 700 8px var(--font-mono);
  color: rgba(150, 205, 230, 0.45);
}

.training-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.training-row + .training-row { margin-top: 5px; }

.training-row .stage-btn { flex: 1; min-width: 62px; }

.guide-systems {
  margin: 10px 0 4px;
  border: 1px solid rgba(90, 210, 245, 0.18);
  background: rgba(3, 10, 18, 0.52);
}

.guide-systems summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
  font: 800 11px var(--font-cn);
  color: rgba(225, 250, 255, 0.9);
}

.guide-systems summary::-webkit-details-marker { display: none; }

.guide-systems summary::before {
  content: "＋";
  color: var(--cyan);
  font: 700 12px var(--font-mono);
}

.guide-systems[open] summary::before { content: "－"; }

.guide-systems summary small {
  margin-left: auto;
  font: 700 8px var(--font-mono);
  color: rgba(150, 205, 230, 0.48);
}

.system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 0 8px 8px;
}

.system-card {
  padding: 7px 8px;
  border-left: 2px solid rgba(80, 220, 255, 0.28);
  background: rgba(5, 14, 24, 0.55);
}

.system-card b {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  color: #e9fdff;
}

.system-card span {
  display: block;
  font-size: 9px;
  line-height: 1.55;
  color: rgba(175, 215, 235, 0.7);
}

@media (max-width: 920px) {
  .system-grid { grid-template-columns: 1fr; }
}

@media (max-height: 540px) {
  .guide-systems { margin-top: 6px; }
  .guide-systems summary { padding: 5px 8px; }
  .system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-card { padding: 5px 6px; }
  .system-card span { font-size: 8px; }
}

.guide-sheet-link {
  display: inline-flex;
  align-items: center;
  margin: 10px 0 0;
  padding: 6px 10px;
  border: 1px solid rgba(255, 209, 102, 0.35);
  background: rgba(50, 35, 10, 0.35);
  color: #ffe6a6;
  font: 700 10px var(--font-cn);
  text-decoration: none;
}

.guide-sheet-link:hover {
  border-color: rgba(255, 225, 150, 0.8);
  background: rgba(80, 55, 16, 0.5);
}

.settings-panel {
  margin: 12px 0 2px;
  padding: 9px 10px;
  border: 1px solid rgba(105, 205, 245, 0.14);
  background: rgba(3, 9, 16, 0.55);
  text-align: left;
}

.settings-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  font: 800 11px var(--font-cn);
  color: rgba(225, 250, 255, 0.88);
}

.settings-head span {
  font: 700 8px var(--font-mono);
  color: rgba(150, 205, 230, 0.42);
}

.setting-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  font: 700 9px var(--font-cn);
  color: rgba(190, 225, 240, 0.7);
}

.setting-row + .setting-row { margin-top: 4px; }

.setting-row input[type="range"] {
  width: 100%;
  height: 3px;
  accent-color: #42e6ff;
  cursor: pointer;
}

.setting-row output {
  text-align: right;
  font: 700 9px var(--font-mono);
  color: rgba(160, 235, 255, 0.75);
}

.setting-row select {
  width: 100%;
  padding: 3px 5px;
  border: 1px solid rgba(100, 200, 235, 0.25);
  background: #06111d;
  color: #dff9ff;
  font: 700 9px var(--font-cn);
}

.setting-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.setting-actions .stage-btn { padding: 5px 10px; }

.pause-panel {
  max-height: 92vh;
  overflow-y: auto;
}

.ai-difficulty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 0 0;
}

.ai-difficulty[hidden] { display: none; }
.ai-difficulty .mini-label { margin-right: 3px; }
.ai-difficulty .stage-btn { padding: 5px 12px; }

@media (max-height: 540px) {
  .ai-difficulty { padding-top: 5px; }
  .ai-difficulty .stage-btn { padding: 4px 9px; }
}

.setting-toggle {
  grid-column: 2 / 4;
  justify-self: start;
  padding: 4px 10px;
}

.tutorial-hud {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
  width: min(780px, 86%);
  padding: 15px 20px 14px;
  border: 1px solid rgba(110, 225, 255, 0.3);
  background: linear-gradient(160deg, rgba(7, 19, 33, 0.9), rgba(3, 8, 15, 0.84));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 0 24px rgba(45, 190, 235, 0.05);
  backdrop-filter: blur(4px);
  text-align: center;
  pointer-events: none;
}

.tutorial-hud[hidden] { display: none; }

.tut-kicker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(120, 225, 255, 0.65);
  font: 800 10px var(--font-mono);
  letter-spacing: 0.18em;
}

.tut-kicker small { color: rgba(170, 220, 240, 0.45); }

.tut-title {
  margin-top: 5px;
  color: #f2fdff;
  font: 900 26px var(--font-cn);
  letter-spacing: 0.06em;
}

.tut-desc {
  margin-top: 5px;
  color: rgba(205, 235, 245, 0.78);
  font: 700 13px/1.65 var(--font-cn);
}

.tut-extra {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.tut-extra[hidden] { display: none; }

.tut-card {
  padding: 6px 8px 7px;
  border: 1px solid rgba(110, 225, 255, 0.18);
  background: rgba(4, 12, 20, 0.72);
}

.tut-card b {
  display: block;
  color: #ffd166;
  font: 800 12px var(--font-cn);
  letter-spacing: 0.04em;
}

.tut-card span {
  display: block;
  margin-top: 4px;
  color: rgba(205, 235, 245, 0.8);
  font: 700 10px/1.5 var(--font-cn);
}

.tut-next {
  margin-top: 8px;
  pointer-events: auto;
}

.tut-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
}

.tut-dots i {
  width: 17px;
  height: 2px;
  background: rgba(130, 185, 205, 0.22);
}

.tut-dots i.done { background: rgba(90, 230, 255, 0.45); }
.tut-dots i.now { background: #ffd166; box-shadow: 0 0 7px rgba(255, 209, 102, 0.7); }

.tut-done {
  margin-top: 10px;
  pointer-events: auto;
}

@media (max-height: 540px) {
  .tutorial-hud { top: 9%; width: min(680px, 92%); padding: 9px 13px 8px; }
  .tut-title { font-size: 18px; }
  .tut-desc { font-size: 10.5px; }
  .tut-card { padding: 5px 6px; }
  .tut-card b { font-size: 10px; }
  .tut-card span { font-size: 9px; line-height: 1.35; }
  .tut-dots { margin-top: 5px; }
}

.main-menu {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 1320px;
}

@media (max-width: 700px) and (orientation: portrait) {
  .main-menu { grid-template-columns: 1fr; max-width: 440px; }
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 12px;
  padding: 7px;
  border: 1px solid rgba(100, 215, 245, 0.18);
  background: rgba(4, 12, 20, 0.55);
}

.result-stats[hidden] { display: none; }

.result-stat {
  min-width: 0;
  padding: 6px 4px;
  background: rgba(3, 8, 15, 0.55);
  border-top: 2px solid rgba(80, 220, 255, 0.28);
}

.result-stat small {
  display: block;
  margin-bottom: 3px;
  color: rgba(145, 205, 225, 0.5);
  font: 700 8px var(--font-cn);
}

.result-stat b {
  display: block;
  overflow: hidden;
  color: #eafdff;
  font: 800 12px var(--font-cn);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.result-stat.highlight {
  border-top-color: #ffd166;
  background: rgba(55, 40, 10, 0.45);
}

.result-stat.highlight b { color: #ffe6a0; }

@media (max-width: 520px) {
  .result-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stage-picker { flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------- touch layout v2 */
/* left: back / crouch / forward on the bottom, jump above crouch, block upper-left */
#touch-ui .dpad {
  grid-template-columns: repeat(3, 58px);
  grid-template-rows: repeat(2, 58px);
  gap: 7px;
  left: calc(14px + env(safe-area-inset-left));
  bottom: calc(12px + env(safe-area-inset-bottom));
}

#touch-ui .dir-btn {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  border-radius: 15px;
}

#touch-ui .dir-btn.left { grid-area: 2 / 1; }
#touch-ui .dir-btn.crouch { grid-area: 2 / 2; }
#touch-ui .dir-btn.right { grid-area: 2 / 3; }
#touch-ui .dir-btn.up { grid-area: 1 / 2; }

#touch-ui #block-btn {
  position: static;
  grid-area: 1 / 1;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  border-radius: 15px;
  background:
    radial-gradient(circle at 40% 30%, rgba(40, 52, 62, 0.9), rgba(8, 15, 23, 0.94) 72%);
}

#touch-ui #block-btn b { font-size: 12px; }
#touch-ui #block-btn small { display: none; }

#touch-ui .action-pad {
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(3, 58px);
  grid-template-rows: repeat(2, 58px);
  gap: 7px;
  transform: rotate(-3deg);
  background: rgba(7, 15, 23, 0.22);
  border-radius: 24px;
  padding: 5px;
}

#touch-ui .pad-btn b { font-size: 12px; }
#touch-ui .pad-btn.attack b { font-size: 15px; }
#touch-ui .pad-btn.ultimate b { font-size: 12px; }
#touch-ui .pad-btn small { font-size: 6px; }

/* 4 skills: ultimate top-left, 3 / 4 top row, 1 / 2 bottom, attack bottom-right */
#touch-ui .action-pad .ultimate { grid-area: 1 / 1; }
#touch-ui .action-pad .skill3 { grid-area: 1 / 2; }
#touch-ui .action-pad .skill4 { grid-area: 1 / 3; }
#touch-ui .action-pad .skill1 { grid-area: 2 / 1; }
#touch-ui .action-pad .skill2 { grid-area: 2 / 2; }
#touch-ui .action-pad .attack { grid-area: 2 / 3; }

/* 3 skills: 3 above 2, attack bottom-right */
#touch-ui[data-skills="3"] .action-pad { grid-template-columns: repeat(3, 58px); }
#touch-ui[data-skills="3"] .action-pad .skill3 { grid-area: 1 / 2; }
#touch-ui[data-skills="3"] .action-pad .skill4 { display: none !important; }

/* 2 skills: clean 2x2 diamond, larger targets */
#touch-ui[data-skills="2"] .action-pad {
  grid-template-columns: repeat(2, 64px);
  grid-template-rows: repeat(2, 64px);
}
#touch-ui[data-skills="2"] .action-pad .ultimate { grid-area: 1 / 1; }
#touch-ui[data-skills="2"] .action-pad .skill1 { grid-area: 1 / 2; }
#touch-ui[data-skills="2"] .action-pad .skill2 { grid-area: 2 / 1; }
#touch-ui[data-skills="2"] .action-pad .attack { grid-area: 2 / 2; }
#touch-ui[data-skills="2"] .action-pad .skill3,
#touch-ui[data-skills="2"] .action-pad .skill4 { display: none !important; }

/* 1 skill fallback */
#touch-ui[data-skills="1"] .action-pad {
  grid-template-columns: repeat(2, 64px);
  grid-template-rows: repeat(2, 64px);
}
#touch-ui[data-skills="1"] .action-pad .ultimate { grid-area: 1 / 1; }
#touch-ui[data-skills="1"] .action-pad .skill1 { grid-area: 1 / 2; }
#touch-ui[data-skills="1"] .action-pad .attack { grid-area: 2 / 2; }
#touch-ui[data-skills="1"] .action-pad .skill2,
#touch-ui[data-skills="1"] .action-pad .skill3,
#touch-ui[data-skills="1"] .action-pad .skill4 { display: none !important; }

#touch-ui .awaken-btn {
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(148px + env(safe-area-inset-bottom));
  width: 62px;
  height: 62px;
}

@media (max-height: 430px) and (pointer: coarse) {
  #touch-ui .dpad {
    grid-template-columns: repeat(3, 50px);
    grid-template-rows: repeat(2, 50px);
    gap: 5px;
    left: calc(10px + env(safe-area-inset-left));
    bottom: calc(7px + env(safe-area-inset-bottom));
  }
  #touch-ui .action-pad {
    grid-template-columns: repeat(3, 50px) !important;
    grid-template-rows: repeat(2, 50px);
    gap: 5px;
    right: calc(10px + env(safe-area-inset-right));
    bottom: calc(7px + env(safe-area-inset-bottom));
  }
  #touch-ui[data-skills="2"] .action-pad,
  #touch-ui[data-skills="1"] .action-pad {
    grid-template-columns: repeat(2, 55px) !important;
    grid-template-rows: repeat(2, 55px);
  }
  #touch-ui .pad-btn b { font-size: 10px; }
  #touch-ui .pad-btn.attack b { font-size: 13px; }
  #touch-ui .dir-btn b { font-size: 15px; }
  #touch-ui .dir-btn small { display: none; }
  #touch-ui #block-btn b { font-size: 10px; }
  #touch-ui .awaken-btn {
    width: 54px;
    height: 54px;
    right: calc(11px + env(safe-area-inset-right));
    bottom: calc(122px + env(safe-area-inset-bottom));
  }
  #touch-ui .awaken-btn b { font-size: 11px; }
}
#touch-ui .awaken-btn {
  bottom: calc(162px + env(safe-area-inset-bottom));
}

@media (max-height: 430px) and (pointer: coarse) {
  #touch-ui .awaken-btn {
    bottom: calc(132px + env(safe-area-inset-bottom));
  }
}

.training-quick { padding-top: 3px; }
.training-quick .stage-btn.active {
  color: #ffe6a0;
  border-color: rgba(255, 209, 102, 0.55);
  background: rgba(60, 44, 12, 0.55);
}