:root {
  color-scheme: dark;
  --ink: #f3ead5;
  --muted: #a59f91;
  --panel: #151616;
  --line: #3c3a35;
  --red: #e72b2b;
  --blue: #287de0;
  --gold: #f2c14e;
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 50% 0, #28241d 0, #111 38rem),
    #0a0a0a;
  color: var(--ink);
  font-family: "Courier New", ui-monospace, monospace;
}

body { padding: clamp(12px, 2.5vw, 34px); }

button, input { font: inherit; }

button {
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid #5b574e;
  background: #242422;
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 -3px #111;
}

button:hover:not(:disabled) { border-color: var(--gold); }
button:disabled { cursor: not-allowed; opacity: .42; }
button.primary { background: #8f1d1d; border-color: var(--red); }
button.danger { color: #ff8e8e; }

.app-shell { width: min(1440px, 100%); margin: 0 auto; }
.title-row, .section-heading, .control-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.title-row { margin-bottom: 14px; }
[hidden] { display: none !important; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.35rem, 4vw, 2.4rem); letter-spacing: .06em; }
h2 { margin-bottom: 0; font-size: clamp(1.05rem, 2.5vw, 1.5rem); }
.eyebrow { margin-bottom: 4px; color: var(--gold); font-size: .75rem; letter-spacing: .14em; }
.version { color: var(--muted); white-space: nowrap; }

.experience-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 3px solid #48443b;
  background: #000;
  box-shadow: 0 18px 70px #000b;
}

.experience-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.experience-layer[data-active="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.battle-screen, .game-stage { width: 100%; height: 100%; }
.game-stage { position: relative; overflow: hidden; }

canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.portrait-notice {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: #000d;
  color: var(--gold);
  font-size: 1.1rem;
  text-align: center;
}

.control-panel, .simulation-panel {
  margin-top: 16px;
  padding: 16px;
  border: 2px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
}

.seed-control { display: grid; gap: 5px; color: var(--muted); }
.seed-control strong { color: var(--gold); }
.seed-control input {
  width: 180px;
  padding: 9px 10px;
  border: 2px solid #514d45;
  background: #090909;
  color: var(--gold);
}

.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.simulation-panel { display: grid; gap: 14px; }
.progress-track { height: 14px; border: 2px solid #46433d; background: #080808; }
#progress-bar { width: 0; height: 100%; background: linear-gradient(90deg, var(--red), var(--gold)); }
.status-line { margin: 0; color: var(--muted); }
.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.metric { padding: 12px; border-left: 4px solid var(--blue); background: #0c0d0e; }
.metric strong { display: block; margin-top: 4px; color: var(--gold); font-size: 1.2rem; }
.result-json { max-height: 300px; overflow: auto; margin: 0; padding: 12px; background: #090909; color: #b8d6ba; white-space: pre-wrap; }

.setup-screen {
  display: grid;
  grid-template-areas: "fighter opponent";
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 18px;
  overflow: auto;
  padding: 18px;
  background: #090a0a;
}

.setup-column { display: grid; min-width: 0; align-content: start; gap: 18px; }
.setup-column:first-child { grid-area: fighter; }
.setup-column:last-child { grid-area: opponent; }
.setup-card {
  padding: 20px;
  border: 3px solid #59564e;
  background: #0b0c0ce8;
  box-shadow: inset 0 0 0 2px #171716;
}
.setup-card h2, .setup-card h3 { margin: 0; letter-spacing: .04em; }
.red-text { color: var(--red); }
.blue-text { color: var(--blue); }

.budget-box {
  display: grid;
  place-items: center;
  padding-bottom: 14px;
  border-bottom: 3px solid #49463f;
  font-size: 1.15rem;
}
.budget-box strong { color: var(--gold); font-size: clamp(3rem, 7vw, 5rem); line-height: .95; }
.fighter-stat-header, .opponent-profile {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 16px 0;
}
.fighter-stat-header p { margin: 5px 0 0; color: var(--muted); }
.setup-sprite {
  flex: 0 0 auto;
  width: 112px;
  height: 150px;
  border: 4px solid currentColor;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 400% 100%;
  image-rendering: pixelated;
}
.red-sprite { color: var(--red); background-image: url("./asset/player_sprite/red_comet_sheet.png"); }
.blue-sprite { color: var(--blue); background-image: url("./asset/player_sprite/blue_bull_sheet.png"); }
.stat-controls { display: grid; gap: 7px; }
.stat-row {
  display: grid;
  grid-template-columns: minmax(115px, 1fr) 44px 54px 44px;
  align-items: center;
  gap: 8px;
}
.stat-row button { min-height: 38px; padding: 4px; font-size: 1.35rem; font-weight: bold; }
.stat-row .decrease { border-color: var(--red); }
.stat-row .increase { border-color: #78a623; }
.stat-value { color: #fff; font-size: 1.35rem; font-weight: bold; text-align: center; }
.stat-unused { color: var(--muted); }
.stat-unused small { display: block; font-size: .65rem; }
.setup-note, .power-note { margin: 14px 0 0; color: var(--gold); font-size: .8rem; }

.preview-card h2, .opponent-card > h2, .power-card > h2 { margin-bottom: 15px; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.preview-item, .opponent-stat {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed #45423c;
}
.preview-item strong { color: var(--gold); }
.opponent-profile .setup-sprite { width: 132px; height: 176px; }
.opponent-profile p { max-width: 38ch; margin: 12px 0 0; line-height: 1.5; }
.opponent-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.opponent-stat { display: grid; justify-items: center; border: 2px solid #333; padding: 12px 6px; }
.opponent-stat strong { color: var(--blue); font-size: 1.3rem; }

.power-versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.power-versus div { display: grid; gap: 8px; }
.power-versus strong { font-size: clamp(2.2rem, 5vw, 4rem); }
.power-versus b { color: var(--muted); font-size: 2rem; }
.setup-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.setup-actions button { min-height: 64px; font-size: 1.15rem; font-weight: bold; }

@media (max-width: 760px) {
  body { padding: 8px; }
  .title-row, .control-panel, .section-heading { align-items: stretch; flex-direction: column; }
  .seed-control input { width: 100%; }
  button { flex: 1 1 130px; }
  .experience-frame { aspect-ratio: auto; min-height: max(680px, 82vh); }
  .setup-screen {
    grid-template-areas:
      "fighter"
      "opponent";
    grid-template-columns: 1fr;
  }
  .battle-screen { aspect-ratio: 16 / 9; height: auto; top: 50%; transform: translateY(-50%); }
  .battle-screen[data-active="true"] { transform: translateY(-50%); }
  .preview-grid { grid-template-columns: 1fr; }
  .opponent-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (orientation: portrait) and (max-width: 700px) {
  .portrait-notice { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .experience-layer { transition: none; }
}