/* Layout: one-screen battle stage. Turn timeline across the top, enemies above
   a floor line, party below it, classic blue command windows docked at the
   bottom. Single dark look by design (a night arena), so no light theme. */
:root {
  --night: #0a0f1f;
  --floor: #141b34;
  --window-hi: #24439a;
  --window-lo: #0d1b52;
  --rim: #d7defc;
  --ink: #eef1ff;
  --muted: #9ba6d0;
  --gold: #ffcf5a;
  --hp: #5fe39a;
  --hp-low: #ff6b6b;
  --energy: #6ccaff;
  --toughness: #f4f4f8;
  --danger: #ff5a6e;
  --heal: #7dffb2;
  --shadow: rgb(2 4 14 / 0.6);

  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-ui: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  --font-num: 'Silkscreen', ui-monospace, 'Courier New', monospace;

  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(120% 60% at 50% 42%, rgb(70 92 180 / 0.25), transparent 60%),
    radial-gradient(80% 40% at 50% 100%, rgb(255 160 80 / 0.08), transparent 70%),
    var(--night);
  color: var(--ink);
  font: 500 16px/1.4 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block: 12px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  max-width: 1180px;
  margin: 0 auto;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand h1 {
  margin: 0;
  font: 800 1.35rem/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 0 #6b4a00;
}
.wave {
  font: 0.8rem var(--font-num);
  color: var(--muted);
  letter-spacing: 0.05em;
}
.timeline {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.timeline li {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.08);
  font-size: 0.85rem;
  white-space: nowrap;
}
.timeline li.enemy { background: rgb(255 90 110 / 0.12); border-color: rgb(255 90 110 / 0.25); }
.timeline li.now { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.timeline .av { font: 0.7rem var(--font-num); color: var(--muted); }
.timeline .tl-sprite { font-size: 1.05rem; }
/* Tied entries share an action value: they will choose together and the coin may order them. */
.timeline li.tied { border-style: dashed; }
.timeline li.tied .av { color: var(--gold); }
.timeline li.chosen { opacity: 0.75; }
.timeline .coin { font-size: 0.9rem; }

/* ---------- PvP HUD: each team's standing and the clock against the time limit ---------- */
.hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 18px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgb(10 15 31 / 0.75);
  border: 1px solid rgb(255 255 255 / 0.1);
  font-size: 0.85rem;
}
.hud-team { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hud-team.mine .hud-name { color: var(--gold); }
.hud-team.out { opacity: 0.55; }
.hud-name { font-weight: 800; }
.hud-name small { font-weight: 500; color: var(--muted); }
.hud-standing { font: 0.8rem var(--font-num); letter-spacing: 0.05em; color: var(--hp); }
.hud-team.out .hud-standing { color: var(--hp-low); }
.hud-share { font: 0.75rem var(--font-num); color: var(--muted); }
.hud-clock { display: grid; gap: 3px; min-width: 140px; font: 0.75rem var(--font-num); color: var(--muted); text-align: center; }
.bar.clock { height: 5px; }
.bar.clock > i { background: var(--energy); }
.bar.clock.late > i { background: var(--danger); }

.toggles { display: flex; gap: 6px; }
.toggle {
  border: 1px solid rgb(215 222 252 / 0.35);
  background: rgb(255 255 255 / 0.05);
  border-radius: 6px;
  padding: 4px 12px;
  font-weight: 700;
  cursor: pointer;
}
.toggle[aria-pressed='true'] { background: var(--gold); color: #2a1d00; border-color: var(--gold); }

/* ---------- stage ---------- */
.stage {
  flex: 1;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 14px;
  align-content: center;
  min-height: 0;
}
.enemies, .party {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.enemies { align-items: flex-end; padding-top: 8px; }

.unit {
  position: relative;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  cursor: default;
  transition: transform 0.25s ease, opacity 0.5s ease, filter 0.3s;
}
.unit.down { opacity: 0; transform: translateY(12px) scale(0.92); filter: grayscale(1); }

/* enemy */
.foe {
  width: 172px;
  display: grid;
  justify-items: center;
  gap: 6px;
}
.foe .sprite {
  font-size: 4.2rem;
  line-height: 1.1;
  filter: drop-shadow(0 10px 6px var(--shadow));
  transition: transform 0.2s;
}
.foe.boss { width: 260px; }
.foe.boss .sprite { font-size: 7rem; }
.foe .plate {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgb(10 15 31 / 0.75);
  border: 1px solid rgb(255 255 255 / 0.1);
}
.foe.targetable { cursor: pointer; }
.foe.targetable:hover .plate { border-color: rgb(255 207 90 / 0.6); }
.foe.targeted .plate, .ally.targeted { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgb(255 207 90 / 0.3); }
.foe.splash .plate { border-color: rgb(255 207 90 / 0.45); border-style: dashed; }
.foe.targeted::before {
  content: '▼';
  position: absolute;
  top: -14px;
  left: 50%;
  translate: -50% 0;
  color: var(--gold);
  font-size: 0.9rem;
  animation: bob 0.9s ease-in-out infinite;
}
.foe.charging .sprite { animation: charge 0.8s ease-in-out infinite; }
.foe.broken .sprite { filter: grayscale(0.6) drop-shadow(0 10px 6px var(--shadow)); transform: rotate(-6deg); }
.foe.acting .sprite { transform: translateY(16px) scale(1.06); }

.name-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.name { font-weight: 800; letter-spacing: 0.01em; }
.weak { display: flex; gap: 2px; font-size: 0.85rem; }
.weak span { padding: 0 2px; border-radius: 4px; background: rgb(255 255 255 / 0.08); }

.bar { position: relative; height: 8px; border-radius: 4px; background: rgb(255 255 255 / 0.1); overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; transition: width 0.35s ease; }
.bar.hp > i { background: var(--hp); }
.bar.hp.low > i { background: var(--hp-low); }
.bar.tough { height: 5px; }
.bar.tough > i { background: var(--toughness); }
.bar.tough.empty { background: rgb(255 207 90 / 0.25); }
.bar.energy { height: 5px; }
.bar.energy > i { background: var(--energy); }
.bar.energy.full > i { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.hp-text { font: 0.7rem var(--font-num); color: var(--muted); display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }

.statuses { display: flex; flex-wrap: wrap; gap: 3px; min-height: 18px; }
.status {
  font-size: 0.72rem;
  padding: 0 5px;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.08);
  white-space: nowrap;
}
.status.debuff, .status.dot, .status.cc { background: rgb(255 90 110 / 0.18); }
.status.buff { background: rgb(108 202 255 / 0.16); }

/* banner (skill callout) */
.banner {
  justify-self: center;
  min-height: 2.2rem;
  font: 600 1.15rem/2.2rem var(--font-display);
  letter-spacing: 0.06em;
  padding: 0 28px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.2s;
  text-align: center;
}
.banner.show {
  opacity: 1;
  background: linear-gradient(var(--window-hi), var(--window-lo));
  border: 2px solid var(--rim);
  box-shadow: 0 6px 18px var(--shadow);
}
.banner.enemy-banner { background: linear-gradient(#8a2436, #3d0b17); }
.banner.wave-banner { font-size: 1.5rem; color: var(--gold); }
.banner.tie-banner { color: var(--gold); border-style: dashed; }

/* party */
.party { border-top: 1px solid rgb(215 222 252 / 0.12); padding-top: 14px; }
.ally {
  width: 214px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgb(20 27 52 / 0.92);
  border: 1px solid rgb(255 255 255 / 0.1);
}
.ally .sprite { grid-row: span 2; font-size: 2.3rem; line-height: 1; align-self: center; }
.hero-art { grid-row: span 2; display: flex; align-items: center; gap: 3px; }
.hero-gear { display: grid; grid-template-columns: repeat(2, 1em); font-size: 0.8rem; gap: 2px; }
.ally .meta { display: grid; gap: 1px; min-width: 0; }
.ally .role { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.hero-level { display: inline-block; color: var(--gold); font-size: 0.75rem; white-space: nowrap; }
.hero-xp { display: block; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ally.level-up { animation: level-glow 0.5s ease-out; }
.ally .bars { grid-column: 1 / -1; display: grid; gap: 4px; }
.ally .statuses { grid-column: 1 / -1; }
.ally.active { border-color: var(--gold); transform: translateY(-8px); box-shadow: 0 10px 24px rgb(255 207 90 / 0.18); }
.ally.targetable { cursor: pointer; }
.ally.targetable:hover { border-color: rgb(255 207 90 / 0.6); }
.ally.down { opacity: 0.35; transform: none; filter: grayscale(1); }
.ally.hit, .foe.hit .sprite { animation: shake 0.3s; }
/* Units in the tie in progress: waiting to choose, or chosen and waiting for the rest. */
.ally.tied, .foe.tied .plate { border-style: dashed; border-color: rgb(255 207 90 / 0.7); }
.ally.chosen, .foe.chosen .plate { border-style: dashed; }
.tie-tag { font-size: 0.75rem; margin-left: 4px; white-space: nowrap; }
.foe.champion .sprite { font-size: 3.2rem; }
.foe.champion .plate { gap: 3px; }
.ult-ready {
  font: 0.6rem var(--font-num);
  color: var(--gold);
  margin-left: 4px;
  animation: pulse 1.2s ease-in-out infinite;
}
.shield-tag { font: 0.7rem var(--font-num); color: var(--energy); }

/* ---------- dock ---------- */
.dock {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 12px;
}
.window {
  background: linear-gradient(var(--window-hi), var(--window-lo));
  border: 2px solid var(--rim);
  border-radius: 8px;
  box-shadow: 0 0 0 2px #0a1238, 0 10px 30px var(--shadow);
  padding: 12px 14px;
}
.command { display: grid; gap: 10px; }
.sp { display: flex; align-items: center; gap: 6px; font: 0.75rem var(--font-num); color: var(--muted); }
.sp .pip { width: 14px; height: 14px; rotate: 45deg; border: 1px solid var(--gold); background: transparent; }
.sp .pip.on { background: var(--gold); box-shadow: 0 0 8px rgb(255 207 90 / 0.6); }
.commands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cmd {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgb(215 222 252 / 0.4);
  background: rgb(5 10 40 / 0.35);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.cmd:hover:not(:disabled) { background: rgb(255 255 255 / 0.08); }
.cmd.selected { border-color: var(--gold); background: rgb(255 207 90 / 0.14); }
.cmd.selected .cmd-name::before { content: '▶ '; color: var(--gold); }
.cmd:disabled { opacity: 0.45; cursor: not-allowed; }
.cmd.ult:not(:disabled) { border-color: var(--gold); animation: pulse 1.6s ease-in-out infinite; }
.cmd-name { font-weight: 800; }
.cmd-meta { display: flex; justify-content: space-between; font: 0.68rem var(--font-num); color: var(--muted); }
.cmd-meta kbd { font: inherit; padding: 0 4px; border: 1px solid rgb(215 222 252 / 0.4); border-radius: 3px; }
.skill-info { min-height: 3.4rem; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.skill-info p { margin: 0; flex: 1 1 260px; color: var(--ink); max-width: 62ch; }
.skill-info .hint { color: var(--muted); }
.skill-info .tie-note { color: var(--gold); font-size: 0.9rem; }
.primary {
  border: 2px solid var(--gold);
  background: var(--gold);
  color: #2a1d00;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
}
.primary:disabled { opacity: 0.5; cursor: not-allowed; }

.log-window { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.log-window h2 { margin: 0 0 6px; font: 600 0.8rem var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.log {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 150px;
  overflow-y: auto;
  font-size: 0.9rem;
  display: grid;
  align-content: start;
  gap: 2px;
}
.log li { color: var(--muted); }
.log li:first-child { color: var(--ink); }
.log .em { color: var(--gold); font-weight: 700; }
.log .bad { color: var(--danger); font-weight: 700; }
.log .tie-step { font: 0.7rem var(--font-num); color: var(--gold); margin-right: 4px; }
.log .why { color: var(--muted); }

/* ---------- effects ---------- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.pop {
  position: absolute;
  translate: -50% -50%;
  font: 1.25rem var(--font-num);
  color: var(--ink);
  text-shadow: 0 2px 0 #000, 0 0 6px #000;
  white-space: nowrap;
  animation: rise 1s ease-out forwards;
}
.pop.weak { color: #ffe7a3; }
.pop.crit { font-size: 1.7rem; color: var(--gold); }
.pop.heal { color: var(--heal); }
.pop.level-up { color: var(--gold); font: 800 1rem var(--font-ui); white-space: nowrap; }
.pop.shielded { color: var(--energy); }
.pop.dot { font-size: 1rem; color: #ffb38a; }
.pop.label { font: 800 0.95rem var(--font-ui); letter-spacing: 0.04em; }
.pop.break {
  font: 800 2.2rem var(--font-display);
  color: var(--gold);
  letter-spacing: 0.1em;
  animation: slam 0.9s ease-out forwards;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: rgb(5 8 20 / 0.7);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.result { text-align: center; width: 100%; max-width: 420px; max-height: 100dvh; overflow-y: auto; min-width: 0; display: grid; gap: 10px; justify-items: center; padding: 24px 28px; }
.result h2 { margin: 0; font: 800 2rem var(--font-display); letter-spacing: 0.1em; color: var(--gold); text-wrap: balance; }
.result p { margin: 0; color: var(--ink); }
.result-detail { display: grid; gap: 10px; width: 100%; }
.result-detail:empty { display: none; }
.result-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; text-align: left; }
.result-table caption { padding: 0 0 4px; text-align: left; color: var(--muted); caption-side: top; }
.result-table.mine caption strong { color: var(--gold); }
.result-table td { padding: 2px 6px; border-top: 1px solid rgb(215 222 252 / 0.12); }
.result-table td.num { font: 0.78rem var(--font-num); text-align: right; white-space: nowrap; }
.result-table tr.down { color: var(--muted); }

@keyframes rise { 0% { opacity: 0; transform: translateY(8px) scale(0.8); } 15% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(-46px) scale(1); } }
@keyframes slam { 0% { opacity: 0; transform: scale(2.4); } 20% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }
@keyframes shake { 0%, 100% { translate: 0; } 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes pulse { 50% { box-shadow: 0 0 14px rgb(255 207 90 / 0.45); opacity: 0.85; } }
@keyframes charge { 50% { filter: drop-shadow(0 0 18px var(--danger)) brightness(1.3); transform: scale(1.04); } }
@keyframes level-glow { 40% { box-shadow: 0 0 24px var(--gold); border-color: var(--gold); } }

@media (prefers-reduced-motion: reduce) {
  .ally.level-up { animation: none; }
  *, *::before { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- narrow screens ---------- */
@media (max-width: 760px) {
  .brand { flex: 1; }
  .timeline { order: 3; flex-basis: 100%; }
  .dock { grid-template-columns: minmax(0, 1fr); }
  .log { max-height: 96px; }
  .foe { width: 112px; }
  .foe .sprite { font-size: 3rem; }
  .foe.boss { width: 220px; }
  .foe.boss .sprite { font-size: 5rem; }
  .foe.champion .sprite { font-size: 2.4rem; }
  .hud { gap: 6px 12px; padding: 6px 8px; font-size: 0.8rem; }
  .hud-clock { min-width: 110px; }
  .foe .plate { padding: 6px 7px; }
  .name { font-size: 0.85rem; }
  .party { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ally { width: auto; padding: 8px; }
  .ally .sprite { font-size: 1.8rem; }
  .ally.active { transform: translateY(-4px); }
  .enemies { gap: 8px; }
  .cmd { padding: 6px 8px; }
  .cmd-name { font-size: 0.9rem; }
}

/* ---------- mode menu ---------- */
/* Nothing runs until a mode is picked, so the battle screen stays out of the way. */
.app.menu-open > .stage,
.app.menu-open > .dock,
.app.menu-open .timeline,
.app.menu-open #speed,
.app.menu-open #auto,
.app.menu-open #menu-button { display: none; }
.mode-menu { display: grid; gap: 12px; width: 100%; max-width: 640px; margin: 24px auto 0; }
.mode-menu h2 { margin: 0; text-align: center; font: 800 1.4rem var(--font-display); letter-spacing: 0.1em; color: var(--gold); }
.mode-list { display: grid; gap: 10px; }
.mode-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid rgb(215 222 252 / 0.4);
  background: rgb(5 10 40 / 0.35);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mode-card .mode-icon { grid-row: span 2; font-size: 2rem; }
.mode-card strong { font-size: 1.05rem; }
.mode-card > span:last-child { color: var(--muted); }
.mode-card:hover:not(:disabled), .mode-card:focus-visible { border-color: var(--gold); background: rgb(255 207 90 / 0.14); }
.mode-card:disabled { opacity: 0.55; cursor: not-allowed; }
.mode-card .soon { font: 0.7rem var(--font-num); color: var(--gold); white-space: nowrap; }
.mode-menu .hint { margin: 0; text-align: center; font-size: 0.85rem; color: var(--muted); }

/* ---------- tuning panel ---------- */
.tuner {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 40;
  width: min(440px, 100%);
  display: grid;
  grid-template-rows: auto auto 1fr;
  background: linear-gradient(var(--window-lo), #08113a);
  border-left: 2px solid var(--rim);
  box-shadow: -12px 0 30px var(--shadow);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  font-size: 0.92rem;
}
@media (min-width: 1200px) {
  body.tuner-open .app { margin-right: 440px; }
}
.tuner-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 6px;
}
.tuner-head h2 {
  margin: 0;
  font: 800 1.1rem var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.tuner-bar {
  display: grid;
  gap: 6px;
  padding: 6px 16px 10px;
  border-bottom: 1px solid rgb(215 222 252 / 0.2);
}
.tuner-status { margin: 0; color: var(--muted); }
.tuner-status strong { color: var(--ink); }
.tuner-status .pending { color: var(--gold); font-weight: 700; }
.tuner-actions, .button-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; }
.tuner-msg { margin: 0; min-height: 1.2em; font-size: 0.85rem; color: var(--muted); }
.tuner-msg.ok { color: var(--hp); }
.tuner-msg.warn { color: var(--danger); }
.tuner .primary.pulse { animation: pulse 1.6s ease-in-out infinite; }

.tuner-body {
  overflow-y: auto;
  padding: 4px 16px 24px;
  display: grid;
  align-content: start;
  gap: 4px;
  overscroll-behavior: contain;
}
.tuner details { border-bottom: 1px solid rgb(215 222 252 / 0.12); padding-block: 6px; }
.tuner details > summary {
  cursor: pointer;
  font-weight: 800;
  padding-block: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style-position: inside;
}
.tuner details > summary::marker { color: var(--gold); }
.tuner details details { border: 0; padding-left: 4px; }
.tuner h4 {
  margin: 10px 0 4px;
  font: 600 0.72rem var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.tuner .muted { color: var(--muted); margin: 6px 0; }
.tuner .small { font-size: 0.82rem; }
.tuner code { font: 0.8rem ui-monospace, monospace; color: var(--ink); }

.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px 8px; }
.field { display: grid; gap: 2px; min-width: 0; }
.field-label { font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field-label small { font-size: 0.7rem; opacity: 0.8; }
.field-input { display: flex; align-items: center; gap: 4px; }
.field-input i { font-style: normal; color: var(--muted); font-size: 0.8rem; }
.field.check { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; }
.field.inline { display: flex; align-items: center; gap: 6px; }
.field.inline .field-label { overflow: visible; }
.tuner input[type='number'], .tuner select, .tuner textarea {
  width: 100%;
  min-width: 0;
  background: rgb(5 10 40 / 0.6);
  color: var(--ink);
  border: 1px solid rgb(215 222 252 / 0.3);
  border-radius: 4px;
  padding: 4px 6px;
  font: 0.85rem var(--font-num);
  font-variant-numeric: tabular-nums;
}
.tuner select { font-family: var(--font-ui); }
.tuner textarea { font: 0.78rem ui-monospace, 'Courier New', monospace; resize: vertical; }
.field.changed .field-label { color: var(--gold); }
.field.changed input, .field.changed select { border-color: var(--gold); box-shadow: 0 0 0 1px rgb(255 207 90 / 0.3); }
.weak-picker { border: 1px solid rgb(215 222 252 / 0.2); border-radius: 6px; margin: 8px 0 0; padding: 4px 8px 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.weak-picker legend { font-size: 0.78rem; color: var(--muted); padding: 0 4px; }
.weak-picker.changed { border-color: var(--gold); }
.weak-picker.changed legend { color: var(--gold); }
.weak-picker label { display: flex; gap: 4px; align-items: center; font-size: 0.85rem; }

.dirty-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.skill { margin-top: 10px; padding: 8px; border-radius: 6px; background: rgb(255 255 255 / 0.04); display: grid; gap: 6px; }
.skill-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.skill-head span { font-size: 0.75rem; color: var(--muted); text-transform: capitalize; }
.effect { display: grid; gap: 4px; }
.effect-title { font-size: 0.78rem; font-weight: 700; color: var(--energy); }

.lineup.changed h4 { color: var(--gold); }
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.wave-row { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)) auto; gap: 4px; align-items: center; margin-bottom: 6px; }
.wave-label { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.wave-row select { padding: 3px 2px; font-size: 0.78rem; }

.mini, .ghost, .danger {
  border: 1px solid rgb(215 222 252 / 0.35);
  background: rgb(255 255 255 / 0.05);
  border-radius: 5px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.mini { padding: 2px 8px; }
.ghost:hover, .mini:hover { background: rgb(255 255 255 / 0.12); }
.danger { border-color: rgb(255 90 110 / 0.6); color: #ffd0d6; }
.danger:hover { background: rgb(255 90 110 / 0.15); }
.mini:disabled, .ghost:disabled { opacity: 0.4; cursor: not-allowed; }

.tuner .table-wrap { overflow-x: auto; }
.tuner table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.tuner th { text-align: left; font-weight: 600; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid rgb(215 222 252 / 0.2); white-space: nowrap; }
.tuner td { padding: 4px 6px; border-bottom: 1px solid rgb(215 222 252 / 0.08); }
.tuner td.num { font: 0.78rem var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tuner td.num strong { color: var(--gold); font-weight: 400; }

.result-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }