:root {
  color-scheme: dark;
  --black: #030309;
  --ink: #090917;
  --blue-0: #05056b;
  --blue-1: #0a0795;
  --blue-2: #1010bd;
  --blue-3: #2325ef;
  --white: #f6f3ff;
  --gray: #a8aac4;
  --yellow: #ffe55e;
  --cyan: #73f0ff;
  --green: #4eff84;
  --red: #ff4f68;
  --shadow: #000;
  --pixel: 2px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--black); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--white);
  background:
    radial-gradient(circle at 50% -20%, #20204d 0, #0b0b1d 34%, #030309 72%);
  font-family: "Courier New", "Noto Sans Mono CJK JP", "MS Gothic", monospace;
  font-weight: 700;
  letter-spacing: .02em;
  image-rendering: pixelated;
}

button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.crt-overlay {
  position: fixed;
  z-index: 999;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.035) 0,
      rgba(255,255,255,.035) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode: screen;
}

.game-shell {
  width: min(1100px, calc(100% - 24px));
  margin: 0 auto;
  padding: 28px 0 34px;
}

.game-header {
  text-align: center;
  margin-bottom: 22px;
  text-shadow: 3px 3px 0 #000;
}
.system-label {
  margin: 0 0 4px;
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: .18em;
}
h1 {
  margin: 0;
  font-size: clamp(34px, 7vw, 72px);
  line-height: 1;
  letter-spacing: -.06em;
}
h1 span { color: var(--yellow); }
.subtitle {
  margin: 10px 0 0;
  color: #c6c6df;
  font-size: 12px;
}

.retro-window {
  position: relative;
  border: 4px solid var(--white);
  outline: 2px solid #62627e;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 22%),
    linear-gradient(135deg, var(--blue-2), var(--blue-0) 72%);
  box-shadow:
    0 0 0 2px #03030b inset,
    6px 6px 0 rgba(0,0,0,.72);
}

.setup-window { padding: 18px; }
.window-title {
  margin: -2px 0 16px;
  color: var(--yellow);
  text-align: center;
  font-size: 15px;
}
.setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.fighter-input {
  min-width: 0;
  padding: 14px;
  border: 2px solid rgba(255,255,255,.42);
  background: rgba(0,0,45,.36);
}
.fighter-slot-label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 8px;
  border: 2px solid var(--white);
  background: #060620;
  font-size: 12px;
}
.fighter-input[data-side="A"] .fighter-slot-label { color: var(--cyan); }
.fighter-input[data-side="B"] .fighter-slot-label { color: var(--yellow); }
label {
  display: block;
  margin-bottom: 6px;
  color: #d6d6e6;
  font-size: 10px;
}
.url-row { display: flex; gap: 8px; }
input {
  min-width: 0;
  width: 100%;
  border: 3px solid #d9d9ec;
  border-radius: 0;
  outline: 0;
  padding: 9px 10px;
  background: #030311;
  color: var(--white);
  caret-color: var(--yellow);
  font-size: 12px;
  box-shadow: 2px 2px 0 #000 inset;
}
input:focus { border-color: var(--yellow); }
.retro-button,
.small-button,
.start-button {
  border: 3px solid var(--white);
  border-radius: 0;
  color: var(--white);
  background: #090923;
  box-shadow: 3px 3px 0 #000;
  text-shadow: 2px 2px 0 #000;
}
.retro-button {
  flex: 0 0 auto;
  padding: 7px 10px;
  font-size: 11px;
}
.retro-button:hover,
.small-button:hover,
.start-button:not(:disabled):hover {
  color: var(--yellow);
  border-color: var(--yellow);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #000;
}
.retro-button:active,
.small-button:active,
.start-button:not(:disabled):active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #000;
}
.preview {
  position: relative;
  margin-top: 12px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 3px solid #aeb0ca;
  background: #000;
}
.preview.empty { display: grid; place-items: center; }
.preview-placeholder {
  color: #6f718f;
  font-size: 12px;
  letter-spacing: .12em;
}
.preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  filter: saturate(.9) contrast(1.1);
}
.preview-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 9px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.92));
  text-shadow: 2px 2px 0 #000;
}
.preview-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 11px;
  line-height: 1.3;
}
.preview-channel {
  margin-top: 4px;
  color: #babbd0;
  font-size: 9px;
}
.setup-vs {
  color: var(--yellow);
  text-align: center;
  font-size: 34px;
  text-shadow: 4px 4px 0 #000;
  transform: rotate(-4deg);
}
.setup-footer {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 18px;
}
.status {
  min-height: 18px;
  margin: 0;
  color: #d7d7e9;
  font-size: 11px;
}
.status.error { color: #ff9aac; }
.start-button {
  min-width: 260px;
  padding: 10px 20px;
  font-size: 15px;
}
.start-button:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.cursor-mark {
  display: inline-block;
  margin-right: 4px;
  color: var(--yellow);
  animation: cursorBlink .8s steps(2, end) infinite;
}
@keyframes cursorBlink { 50% { opacity: 0; } }

.battle-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.match-label {
  color: var(--yellow);
  font-size: 11px;
  text-shadow: 2px 2px 0 #000;
}
.small-button {
  padding: 7px 10px;
  font-size: 10px;
}

.console-frame {
  overflow: hidden;
  border: 5px solid #0b0b10;
  outline: 3px solid #6b6d82;
  background: #000;
  box-shadow:
    0 0 0 2px #d8d8e7,
    9px 12px 0 rgba(0,0,0,.68);
}

.battlefield {
  position: relative;
  height: clamp(320px, 51vw, 520px);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(#010207 0 18%, #0b1021 18% 20%, #02030b 20% 100%);
}
.far-wall {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 16%;
  height: 26%;
  opacity: .7;
  background:
    linear-gradient(90deg, transparent 0 5%, #151a2e 5% 6%, transparent 6% 17%, #151a2e 17% 18%, transparent 18% 29%, #151a2e 29% 30%, transparent 30% 41%, #151a2e 41% 42%, transparent 42% 53%, #151a2e 53% 54%, transparent 54% 65%, #151a2e 65% 66%, transparent 66% 77%, #151a2e 77% 78%, transparent 78% 89%, #151a2e 89% 90%, transparent 90%),
    linear-gradient(#080a16, #11172c 45%, #070914);
  border-top: 3px solid #363e5c;
  border-bottom: 3px solid #202740;
}
.far-wall::before {
  content: "";
  position: absolute;
  inset: 8% 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(135,171,255,.5) 0 2px,
    transparent 2px 15px
  );
}
.horizon-glow {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 39%;
  height: 4px;
  background: #8197d2;
  box-shadow: 0 0 18px #657bc1;
}
.floor-grid {
  position: absolute;
  z-index: 0;
  left: -18%;
  right: -18%;
  top: 40%;
  bottom: -24%;
  transform: perspective(390px) rotateX(58deg);
  transform-origin: center top;
  background-color: #071127;
  background-image:
    linear-gradient(rgba(130,171,255,.62) 2px, transparent 2px),
    linear-gradient(90deg, rgba(130,171,255,.62) 2px, transparent 2px),
    linear-gradient(45deg, rgba(65,80,133,.38) 25%, transparent 25%, transparent 75%, rgba(65,80,133,.38) 75%);
  background-size: 42px 31px, 42px 31px, 42px 31px;
  filter: contrast(1.18);
}
.floor-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 28%, rgba(0,0,0,.22));
}

.sprite-zone {
  position: absolute;
  z-index: 3;
  top: 38%;
  bottom: 8%;
  width: 43%;
  display: flex;
  align-items: center;
}
.sprite-zone-left { left: 4%; justify-content: flex-start; }
.sprite-zone-right { right: 4%; justify-content: flex-end; }
.video-sprite {
  position: relative;
  width: clamp(94px, 15vw, 165px);
  transform-origin: 50% 100%;
  filter: drop-shadow(5px 7px 0 rgba(0,0,0,.78));
}
.video-sprite.right { transform: scaleX(-1); }
.sprite-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 4px solid #e9e9fb;
  outline: 3px solid #11132b;
  background: #05050d;
  clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 10%);
}
.video-sprite.right .sprite-frame { transform: scaleX(-1); }
.sprite-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 2px, transparent 2px 5px),
    linear-gradient(to bottom, transparent 62%, rgba(9,18,47,.45));
}
.sprite-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  filter: contrast(1.18) saturate(.88) brightness(.96);
}
.sprite-shadow {
  position: absolute;
  z-index: -1;
  left: 14%;
  right: 14%;
  bottom: -8%;
  height: 14%;
  border-radius: 50%;
  background: rgba(0,0,0,.66);
  transform: scaleY(.45);
  filter: blur(1px);
}
.sprite-nameplate {
  max-width: 100%;
  margin-top: 9px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--white);
  text-align: center;
  font-size: 9px;
  text-shadow: 2px 2px 0 #000;
}
.video-sprite.right .sprite-nameplate { transform: scaleX(-1); }

.battle-effect {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  color: var(--yellow);
  font-size: clamp(34px, 7vw, 72px);
  text-shadow: 4px 4px 0 #000, 0 0 22px rgba(255,229,94,.24);
  pointer-events: none;
}
.damage-number {
  position: absolute;
  z-index: 10;
  top: 36%;
  left: 50%;
  color: #fff;
  font-size: clamp(28px, 6vw, 58px);
  text-shadow: 4px 4px 0 #000;
  animation: damagePop .62s steps(6, end) forwards;
}
.damage-number.critical { color: var(--yellow); }
@keyframes damagePop {
  0% { transform: translate(-50%, 24px) scale(.5); opacity: 0; }
  18% { transform: translate(-50%, 0) scale(1.35); opacity: 1; }
  70% { transform: translate(-50%, -30px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -52px) scale(.9); opacity: 0; }
}

.video-sprite.attack-left { animation: attackLeft .38s steps(5, end); }
.video-sprite.attack-right { animation: attackRight .38s steps(5, end); }
.video-sprite.hit { animation: hitShake .42s steps(6, end); }
.video-sprite.hit .sprite-frame { animation: hitFlash .42s steps(3, end); }
.video-sprite.ko { animation: koFall .75s steps(8, end) forwards; }
.video-sprite.special { animation: specialPulse .55s steps(6, end); }
@keyframes attackLeft {
  0%,100% { transform: translateX(0); }
  45% { transform: translateX(42px) scale(1.06); }
}
@keyframes attackRight {
  0%,100% { transform: scaleX(-1) translateX(0); }
  45% { transform: scaleX(-1) translateX(42px) scale(1.06); }
}
@keyframes hitShake {
  0%,100% { translate: 0; }
  20% { translate: -10px 2px; }
  40% { translate: 8px -2px; }
  60% { translate: -6px 1px; }
  80% { translate: 5px 0; }
}
@keyframes hitFlash {
  0%,100% { filter: none; }
  33% { filter: brightness(3) saturate(0); }
  66% { filter: brightness(.35) saturate(2); }
}
@keyframes koFall {
  0% { opacity: 1; rotate: 0deg; translate: 0 0; }
  45% { opacity: 1; rotate: 7deg; translate: 0 12px; }
  100% { opacity: 0; rotate: 16deg; translate: 0 70px; }
}
@keyframes specialPulse {
  0%,100% { filter: drop-shadow(5px 7px 0 rgba(0,0,0,.78)); }
  50% { filter: drop-shadow(0 0 18px var(--yellow)) brightness(1.55); }
}
.battlefield.screen-flash::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 0;
  background: white;
  animation: screenFlash .24s steps(2, end) forwards;
  pointer-events: none;
}
@keyframes screenFlash { to { opacity: 0; } }

.battle-ui {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(260px, 1.35fr) minmax(0, .92fr);
  gap: 7px;
  padding: 7px;
  background: #030309;
}
.status-window,
.message-window {
  min-width: 0;
  min-height: 126px;
  padding: 11px 12px;
}
.status-name {
  min-height: 32px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--cyan);
  font-size: 12px;
  line-height: 1.25;
  text-shadow: 2px 2px 0 #000;
}
.status-name.enemy { color: var(--yellow); }
.hp-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  color: var(--white);
  font-size: 12px;
}
.hp-label { color: var(--yellow); }
.hp-value { font-variant-numeric: tabular-nums; }
.hp-meter {
  height: 10px;
  margin-top: 5px;
  padding: 2px;
  border: 2px solid #e3e3f5;
  background: #03030a;
}
.hp-fill {
  height: 100%;
  width: 100%;
  background: var(--green);
  transition: width .42s steps(8, end), background .18s;
}
.hp-fill.warning { background: var(--yellow); }
.hp-fill.danger { background: var(--red); }
.mini-stats {
  margin-top: 8px;
  color: #bcc0d8;
  font-size: 9px;
  line-height: 1.55;
}
.message-window {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.message-line {
  min-height: 42px;
  color: var(--white);
  font-size: clamp(12px, 2vw, 16px);
  line-height: 1.45;
  text-shadow: 2px 2px 0 #000;
}
.message-line::before {
  content: "▶";
  margin-right: 8px;
  color: var(--yellow);
}
.message-sub {
  min-height: 26px;
  margin-top: 8px;
  color: #b7b9d2;
  font-size: 10px;
  line-height: 1.35;
}

.battle-log-wrap {
  margin-top: 16px;
  padding: 10px 12px 12px;
}
.log-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  color: var(--yellow);
  font-size: 10px;
}
.battle-log {
  height: 150px;
  overflow-y: auto;
  border-top: 2px solid rgba(255,255,255,.3);
  padding-top: 7px;
  scrollbar-color: #b7b7d7 #05055d;
}
.log-entry {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  padding: 4px 0;
  color: #e5e5f4;
  font-size: 10px;
  line-height: 1.45;
}
.log-turn { color: #8f92b1; }
.log-entry strong { color: var(--yellow); }
.log-entry.finish { color: white; font-size: 11px; }

.result-panel {
  margin: 18px auto 0;
  width: min(620px, 100%);
  padding: 16px;
  border: 4px double var(--yellow);
  background: #05051a;
  text-align: center;
  box-shadow: 5px 5px 0 #000;
}
.result-label {
  color: var(--yellow);
  font-size: 12px;
  letter-spacing: .12em;
}
.result-name {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.4;
}
.result-reason {
  margin-top: 8px;
  color: #c2c4d9;
  font-size: 10px;
  line-height: 1.6;
}
.battle-actions {
  margin-top: 16px;
  text-align: center;
}

footer {
  margin-top: 30px;
  color: #6f718b;
  text-align: center;
  font-size: 9px;
  line-height: 1.7;
}

@media (max-width: 820px) {
  .game-shell { width: min(100% - 14px, 660px); padding-top: 18px; }
  .setup-grid { grid-template-columns: 1fr; }
  .setup-vs { font-size: 24px; }
  .battlefield { height: 370px; }
  .battle-ui { grid-template-columns: 1fr 1fr; }
  .message-window { grid-column: 1 / -1; grid-row: 1; min-height: 105px; }
  .status-window { min-height: 112px; }
  .sprite-zone { top: 40%; width: 47%; }
  .video-sprite { width: clamp(88px, 26vw, 125px); }
}

@media (max-width: 520px) {
  .game-header .subtitle { font-size: 10px; }
  .setup-window { padding: 12px; }
  .url-row { flex-direction: column; }
  .retro-button { width: 100%; padding: 9px; }
  .battle-toolbar { align-items: flex-start; flex-direction: column; }
  .battlefield { height: 320px; }
  .battle-ui { grid-template-columns: 1fr; }
  .message-window { grid-column: auto; grid-row: auto; order: -1; }
  .status-name { min-height: 18px; -webkit-line-clamp: 1; }
  .status-window { min-height: 96px; }
  .mini-stats { display: none; }
  .log-entry { grid-template-columns: 44px 1fr; }
}

/* v0.3.0 : Fighter DB / Ranking */
.mode-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 auto 8px;
  max-width: 680px;
}
.mode-button {
  border: 3px solid #8e90aa;
  padding: 9px 12px;
  color: #d7d7e9;
  background: #05051b;
  box-shadow: 3px 3px 0 #000;
  text-align: left;
}
.mode-button span { display: block; font-size: 13px; }
.mode-button small { display: block; margin-top: 4px; color: #8f91ad; font-size: 9px; }
.mode-button.active {
  color: var(--yellow);
  border-color: var(--yellow);
  background: #10104b;
}
.mode-button.active small { color: #e4d984; }
.mode-note {
  margin: 0 0 17px;
  color: #b9bad1;
  text-align: center;
  font-size: 10px;
}
.preview-badge {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 7px;
  padding: 3px 6px;
  border: 2px solid var(--white);
  background: #030311;
  color: var(--cyan);
  font-size: 8px;
  box-shadow: 2px 2px 0 #000;
}
.preview-badge.new { color: var(--yellow); }
.preview-record {
  margin-top: 5px;
  color: var(--yellow);
  font-size: 9px;
}
.record-line {
  margin: 3px 0 5px;
  color: var(--yellow);
  font-size: 9px;
}
.ranking-window {
  margin-top: 18px;
  padding: 15px;
}
.ranking-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.ranking-head p {
  margin: -9px 0 0;
  color: #aeb0c9;
  font-size: 9px;
}
.ranking-title { text-align: left; }
.ranking-list {
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(0,0,25,.34);
}
.ranking-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 85px 90px;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 6px 9px;
  border-bottom: 1px solid rgba(255,255,255,.16);
  font-size: 10px;
}
.ranking-row:last-child { border-bottom: 0; }
.ranking-row.header {
  min-height: 27px;
  color: #9fa1bb;
  background: rgba(0,0,0,.24);
  font-size: 8px;
}
.ranking-rank { color: var(--yellow); }
.ranking-video-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ranking-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ranking-video-link {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--cyan);
  font-size: 7px;
  line-height: 1.25;
  text-decoration: none;
  opacity: .82;
}
.ranking-video-link:hover,
.ranking-video-link:focus-visible {
  color: var(--yellow);
  text-decoration: underline;
  opacity: 1;
}
.ranking-rate { color: var(--cyan); text-align: right; }
.ranking-record { text-align: right; color: #d7d7e9; }
.ranking-empty {
  padding: 20px 12px;
  color: #8f91ad;
  text-align: center;
  font-size: 10px;
}
.danger-button { color: #ff9aac; }
.result-rate {
  margin-top: 9px;
  color: var(--cyan);
  font-size: 11px;
}
.result-rate.no-rate { color: #a8aac4; }
.db-hit {
  color: var(--cyan);
}

@media (max-width: 720px) {
  .mode-selector { grid-template-columns: 1fr; }
  .ranking-row { grid-template-columns: 36px minmax(0, 1fr) 68px 70px; gap: 5px; }
  .ranking-head { align-items: center; }
}

/* v0.4.0 : Ultimate Gauge / Generic Retro Effects */
.status-window,
.message-window { min-height: 174px; }

.ult-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  font-size: 10px;
}
.ult-label { color: var(--cyan); }
.ult-value { color: #d8dbef; font-variant-numeric: tabular-nums; }
.ult-meter {
  height: 9px;
  margin-top: 4px;
  padding: 2px;
  border: 2px solid #cfd1e6;
  background: #03030a;
  overflow: hidden;
}
.ult-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #5fdfff, #916cff);
  transition: width .32s steps(8, end);
}
.ult-fill.ready {
  background: linear-gradient(90deg, #fff06a, #ffffff, #fff06a);
  background-size: 220% 100%;
  animation: ultReadyBar .55s steps(5, end) infinite;
  box-shadow: 0 0 10px rgba(255,240,106,.85);
}
.ult-name {
  margin-top: 5px;
  min-height: 13px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #9094b2;
  font-size: 8px;
}
.ult-name.ready {
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255,229,94,.72), 2px 2px 0 #000;
  animation: ultNameBlink .7s steps(2, end) infinite;
}
@keyframes ultReadyBar { 50% { background-position: 100% 0; } }
@keyframes ultNameBlink { 50% { opacity: .55; } }

.ultimate-overlay {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 28px;
  text-align: center;
  background:
    linear-gradient(90deg, transparent, rgba(5,5,38,.92) 14% 86%, transparent),
    rgba(0,0,0,.72);
  opacity: 0;
  transform: scaleY(.02);
  pointer-events: none;
}
.ultimate-overlay.show {
  animation: ultimateOpen .82s steps(8, end) both;
}
.ultimate-kicker {
  color: var(--cyan);
  font-size: clamp(13px, 2.4vw, 22px);
  letter-spacing: .42em;
  text-shadow: 3px 3px 0 #000;
}
.ultimate-fighter {
  margin-top: 12px;
  color: #d2d5ef;
  font-size: clamp(10px, 1.7vw, 15px);
}
.ultimate-skill {
  margin-top: 10px;
  color: var(--yellow);
  font-size: clamp(20px, 4vw, 42px);
  line-height: 1.3;
  text-shadow: 4px 4px 0 #000, 0 0 18px rgba(255,229,94,.54);
}
@keyframes ultimateOpen {
  0% { opacity: 0; transform: scaleY(.02); filter: brightness(4); }
  12% { opacity: 1; transform: scaleY(1); filter: brightness(2.2); }
  30%,78% { opacity: 1; transform: scaleY(1); filter: brightness(1); }
  100% { opacity: 0; transform: scaleY(1); filter: brightness(2); }
}

.effect-layer {
  position: absolute;
  z-index: 14;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.fx {
  --sx: 30%;
  --tx: 70%;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fx.source-a { --sx: 29%; }
.fx.source-b { --sx: 71%; }
.fx.target-a { --tx: 29%; }
.fx.target-b { --tx: 71%; }
.fx i { position: absolute; display: block; }

/* Slash */
.fx-slash i {
  left: calc(var(--tx) - 55px + var(--step22));
  top: calc(47% - 78px + var(--step18));
  width: 8px;
  height: 156px;
  background: #f7f8ff;
  box-shadow: 0 0 7px #7feaff, 0 0 15px #7feaff;
  transform: rotate(52deg) scaleY(0);
  transform-origin: center;
  animation: fxSlash .46s steps(5,end) forwards;
  animation-delay: var(--delay);
}
@keyframes fxSlash {
  0% { opacity: 0; transform: rotate(52deg) scaleY(0); }
  30% { opacity: 1; transform: rotate(52deg) scaleY(1); }
  100% { opacity: 0; transform: rotate(52deg) translateX(28px) scaleY(.72); }
}

/* Impact */
.fx-impact i {
  left: var(--tx);
  top: 48%;
  width: var(--size28);
  aspect-ratio: 1;
  border: 5px solid #fff36b;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(.05);
  box-shadow: 0 0 12px #fff36b;
  animation: fxImpact .5s steps(6,end) forwards;
  animation-delay: var(--delay);
}
@keyframes fxImpact {
  0% { opacity: 1; transform: translate(-50%,-50%) scale(.05); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5); }
}

/* Fire */
.fx-fire i {
  left: calc(var(--tx) - 48px + var(--col4x31));
  top: calc(54% - var(--row3y18));
  width: var(--fireW);
  height: var(--fireH);
  border-radius: 55% 45% 55% 45%;
  background: #ffef5d;
  box-shadow: 0 0 0 5px #ff743c inset, 0 0 16px #ff5535;
  transform: translate(-50%,-50%) rotate(45deg) scale(.2);
  animation: fxFire .65s steps(6,end) forwards;
  animation-delay: var(--delay);
}
@keyframes fxFire {
  0% { opacity: 0; translate: 0 45px; scale: .2; }
  28% { opacity: 1; scale: 1.15; }
  100% { opacity: 0; translate: 0 -90px; scale: .55; }
}

/* Ice */
.fx-ice i {
  left: calc(var(--tx) - 68px + var(--col4x42));
  top: calc(47% - 40px + var(--row2y42));
  width: 24px;
  height: 72px;
  background: linear-gradient(90deg, #baf7ff, #eaffff 50%, #65cfff 51%);
  clip-path: polygon(50% 0,100% 72%,62% 100%,0 70%);
  transform: translate(-50%,-50%) scaleY(.05) rotate(var(--rot7));
  filter: drop-shadow(0 0 5px #87eeff);
  animation: fxIce .62s steps(6,end) forwards;
  animation-delay: var(--delay);
}
@keyframes fxIce {
  0% { opacity: 0; scale: 1 .05; }
  32% { opacity: 1; scale: 1 1; }
  100% { opacity: 0; translate: 0 30px; scale: .6 .8; }
}

/* Thunder */
.fx-thunder i {
  left: calc(var(--tx) - 42px + var(--step28));
  top: 18%;
  width: 22px;
  height: 62%;
  background: #fff56f;
  clip-path: polygon(45% 0,100% 0,63% 36%,100% 36%,18% 100%,39% 54%,0 54%);
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 13px #8deaff);
  transform: scaleY(.1);
  transform-origin: top;
  animation: fxThunder .46s steps(4,end) forwards;
  animation-delay: var(--delay);
}
@keyframes fxThunder {
  0%,100% { opacity: 0; transform: scaleY(.1); }
  22%,68% { opacity: 1; transform: scaleY(1); }
}

/* Dark */
.fx-dark i {
  left: var(--tx);
  top: 47%;
  width: var(--size14);
  aspect-ratio: 1;
  border: 5px solid rgba(197,90,255,.84);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotate(var(--rot21)) scale(.15);
  box-shadow: 0 0 12px #8b2fff inset, 0 0 12px #8b2fff;
  animation: fxDark .7s steps(7,end) forwards;
}
@keyframes fxDark {
  0% { opacity: 0; scale: .1; }
  42% { opacity: 1; scale: 1; }
  100% { opacity: 0; rotate: 120deg; scale: .4; }
}

/* Light / Heal */
.fx-light i,
.fx-heal i {
  left: calc(var(--tx) - 54px + var(--col4x36));
  top: calc(53% - var(--row3y36));
  width: 5px;
  height: 54px;
  background: #fff;
  box-shadow: 0 0 8px #fff9a7, 0 0 16px #9ef8ff;
  transform: translate(-50%,-50%) rotate(var(--rot23)) scaleY(.1);
  animation: fxLight .66s steps(6,end) forwards;
  animation-delay: var(--delay);
}
.fx-heal i::after {
  content: "+";
  position: absolute;
  left: -10px;
  top: -18px;
  color: #76ff9b;
  font-size: 24px;
  text-shadow: 0 0 8px #76ff9b;
}
@keyframes fxLight {
  0% { opacity: 0; translate: 0 50px; scale: 1 .1; }
  35% { opacity: 1; scale: 1 1; }
  100% { opacity: 0; translate: 0 -80px; scale: .6 .8; }
}

/* Beam */
.fx-beam i {
  left: 29%;
  top: calc(48% - 8px + var(--step8));
  width: 42%;
  height: var(--beamH);
  background: #fbfbff;
  box-shadow: 0 0 8px #75eaff, 0 0 18px #75eaff;
  transform: scaleX(0);
  transform-origin: var(--sx) center;
  animation: fxBeam .48s steps(5,end) forwards;
  animation-delay: var(--delay);
}
.fx.source-b.fx-beam i { transform-origin: right center; }
@keyframes fxBeam {
  0% { opacity: 0; transform: scaleX(0); }
  32% { opacity: 1; transform: scaleX(1); }
  75% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(.85); }
}

/* Burst */
.fx-burst i {
  left: var(--tx);
  top: 48%;
  width: 8px;
  height: 100px;
  background: #fff7a4;
  box-shadow: 0 0 7px #ffbf5d;
  transform-origin: 50% 0;
  transform: translate(-50%,0) rotate(var(--rot36)) scaleY(.08);
  animation: fxBurst .58s steps(6,end) forwards;
}
@keyframes fxBurst {
  0% { opacity: 0; scale: 1 .08; }
  35% { opacity: 1; scale: 1 1; }
  100% { opacity: 0; scale: .35 1.35; }
}

/* Chaos */
.fx-chaos i {
  left: calc(var(--tx) - 72px + var(--col5x36));
  top: calc(48% - 70px + var(--row4y42));
  width: 30px;
  aspect-ratio: 1;
  border: 4px solid hsl(var(--hue), 100%, 70%);
  transform: translate(-50%,-50%) rotate(var(--rot28)) scale(.1);
  box-shadow: 0 0 10px currentColor;
  animation: fxChaos .72s steps(7,end) forwards;
  animation-delay: var(--delay);
}
@keyframes fxChaos {
  0% { opacity: 0; scale: .1; }
  35% { opacity: 1; scale: 1.3; }
  100% { opacity: 0; rotate: 180deg; translate: 0 -45px; scale: .35; }
}

/* Barrier */
.fx-barrier i {
  left: var(--tx);
  top: 48%;
  width: var(--size18);
  aspect-ratio: 1;
  border: 5px solid rgba(121,235,255,.9);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(.1);
  box-shadow: 0 0 12px #80edff inset, 0 0 12px #80edff;
  animation: fxBarrier .72s steps(7,end) forwards;
  animation-delay: var(--delay);
}
@keyframes fxBarrier {
  0% { opacity: 0; scale: .1; }
  28%,72% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1.18; }
}

/* Drain */
.fx-drain i {
  left: var(--sx);
  top: calc(45% + var(--row3y20));
  width: 18px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d85cff;
  box-shadow: 0 0 11px #a32bff;
  animation: fxDrain .62s steps(7,end) forwards;
  animation-delay: var(--delay);
}
.fx.source-a.fx-drain i { --drain-x: 42vw; }
.fx.source-b.fx-drain i { --drain-x: -42vw; }
@keyframes fxDrain {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
  25% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--drain-x)), -50%) scale(.35); }
}

.damage-number.heal { color: #74ff9c; }
.damage-number.guard { color: #7beeff; font-size: clamp(20px, 4vw, 38px); }

@media (max-width: 820px) {
  .status-window, .message-window { min-height: 158px; }
}
@media (max-width: 520px) {
  .status-window { min-height: 130px; }
  .ult-name { font-size: 7px; }
}

/* v0.5 AI Fighter Generator */
.ai-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 10px;
  border: 2px solid rgba(255,255,255,.8);
  background: #10142f;
  font-size: 11px;
  letter-spacing: .04em;
  box-shadow: 2px 2px 0 #000;
}

.ai-status.online {
  background: #103522;
}

.ai-status.offline {
  background: #4a1717;
}

.preview-fighter-name {
  margin-bottom: 3px;
  color: #fff7a8;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.35;
}

.preview-ai-summary {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,.35);
  color: #c9dcff;
  font-size: 10px;
  line-height: 1.55;
}

.preview-badge.fallback {
  background: #5b2626;
  color: #ffe1a8;
}