/* Lowthal Bot Wars — First Bolt (kid-readable, offline) */
:root {
  --bg: #0f1220;
  --bg2: #1a1f35;
  --panel: #232a45;
  --ink: #f4f1ff;
  --muted: #a8b0d0;
  --glow: #7ef0ff;
  --care: #ff9ec8;
  --atlas: #b8f26a;
  --gold: #ffd56a;
  --fog: #9aa3c7;
  --danger: #ff7a8a;
  --ok: #6dffb0;
  --door1: #4ecdc4;
  --door2: #ff6b6b;
  --door3: #ffe66d;
  --door4: #a78bfa;
  --radius: 18px;
  --shadow: 0 12px 40px rgba(0,0,0,.45);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; min-height: 100%;
  background: radial-gradient(1200px 600px at 20% -10%, #2a1f55, transparent),
              radial-gradient(900px 500px at 100% 0%, #14384a, transparent),
              var(--bg);
  color: var(--ink);
}
body { padding: 16px; }

.app {
  max-width: 920px;
  margin: 0 auto;
}

.topbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between; margin-bottom: 14px;
}
.brand { display: flex; gap: 10px; align-items: center; }
.brand h1 {
  margin: 0; font-size: 1.25rem; letter-spacing: .02em;
}
.brand .tag {
  font-size: .75rem; color: var(--muted);
}
.theme-toggle, .ghost-btn, button.primary, button.secondary {
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 10px 16px; font-weight: 700; font-size: .95rem;
}
.theme-toggle, .ghost-btn {
  background: rgba(255,255,255,.08); color: var(--ink);
}
button.primary {
  background: linear-gradient(135deg, #6c5ce7, #00cec9);
  color: #fff; box-shadow: var(--shadow);
}
button.primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
button.secondary {
  background: rgba(255,255,255,.12); color: var(--ink);
}
button:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }

.progress {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.progress span {
  font-size: .72rem; padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.06); color: var(--muted);
  border: 1px solid transparent; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.progress span.on {
  background: rgba(126,240,255,.24); color: var(--glow); border-color: var(--glow);
  font-weight: 900; box-shadow: 0 0 0 3px rgba(126,240,255,.12), 0 0 18px rgba(126,240,255,.2);
  transform: translateY(-1px) scale(1.04);
}
.progress span.done {
  background: rgba(109,255,176,.15); color: var(--ok);
}
.progress-status {
  margin: -8px 0 14px; color: var(--glow); font-size: .84rem; font-weight: 900;
  letter-spacing: .02em;
}
.tip-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px;
}
.tip-chips span {
  padding: 5px 9px; border-radius: 999px;
  background: rgba(255,255,255,.07); color: var(--muted);
  font-size: .72rem; line-height: 1.2;
}
.tip-chips b { color: var(--ink); }

.panel {
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent), var(--panel);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.panel h2 { margin: 0 0 8px; font-size: 1.35rem; }
.panel p.lead { margin: 0 0 8px; color: var(--muted); line-height: 1.45; }
.panel p.screen-tip {
  margin: 0 0 14px; color: var(--muted); font-size: .84rem; line-height: 1.35;
  opacity: .92;
}
.panel p.screen-tip b { color: var(--gold); font-weight: 800; }

.hidden { display: none !important; }

/* Doors */
.doors {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.door {
  border: 2px solid transparent; border-radius: 16px; padding: 14px;
  background: rgba(0,0,0,.25); cursor: pointer; text-align: left;
  color: inherit; min-height: 150px;
  transition: transform .15s ease, border-color .15s ease;
}
.door:hover { transform: translateY(-3px); }
.door.selected { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,213,106,.25); }
.door .glyph {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 8px;
}
.door[data-id="tide"] .glyph { background: var(--door1); color: #062; }
.door[data-id="ember"] .glyph { background: var(--door2); color: #400; }
.door[data-id="root"] .glyph { background: var(--door3); color: #420; }
.door[data-id="sky"] .glyph { background: var(--door4); color: #208; }
.door strong { display: block; margin-bottom: 4px; }
.door small { color: var(--muted); line-height: 1.3; display: block; }

/* Blob bot card */
.bot-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.bot-card {
  position: relative;
  border-radius: 16px; padding: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), transparent 40%),
    linear-gradient(225deg, rgba(126,240,255,.15), rgba(255,158,200,.12)),
    rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(0,0,0,.35);
}
.bot-card.holo::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 48%, transparent 62%);
  mix-blend-mode: soft-light;
}
.bot-card.selected {
  outline: 2px solid var(--gold);
}
.bot-card .name { font-weight: 800; margin: 6px 0 4px; }
/* S4: Echo verb pill (Soft Glow — not Arena IP) */
.bot-card .ability,
.echo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #241d00;
  background: linear-gradient(135deg, var(--gold), #ffb4d4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 12px rgba(0,0,0,.2);
  text-align: center;
  line-height: 1.2;
}


/* S4: Chloe effect one-liner under Echo pill */
.effect-line {
  margin: 0 0 8px;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--muted);
}
.flip-face.flip-front span,
.flavor-line {
  font-style: italic;
}

/* S4: Twin soft-stat chips (shape + number + label) */
.stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  font-size: .78rem;
  font-weight: 800;
  color: var(--ink);
}
.stat-chip .chip-glyph {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .85rem;
  font-weight: 900;
  color: #0f1220;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
.stat-chip.glow .chip-glyph { background: var(--glow); border-radius: 50%; }
.stat-chip.care .chip-glyph { background: var(--care); border-radius: 40% 40% 45% 45%; }
.stat-chip.atlas .chip-glyph { background: var(--atlas); border-radius: 6px; }
.stat-chip .chip-num { min-width: 1.4em; }
.stat-chip .chip-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}

.stats { display: grid; gap: 4px; font-size: .8rem; }
.stat-row { display: grid; grid-template-columns: 52px 1fr 28px; gap: 6px; align-items: center; }
.bar {
  height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden;
}
.bar > i { display: block; height: 100%; border-radius: 99px; }
.bar.glow > i { background: var(--glow); }
.bar.care > i { background: var(--care); }
.bar.atlas > i { background: var(--atlas); }

.blob {
  width: 88px; height: 72px; margin: 4px auto 0;
  border-radius: 50% 50% 46% 46%;
  position: relative;
  box-shadow: inset -10px -14px 0 rgba(0,0,0,.12), 0 8px 0 rgba(0,0,0,.15);
}
/* S4: Cooper-simple taller bar eyes + door ink seals */
.blob .eye {
  position: absolute; top: 26%; width: 22px; height: 12px;
  background: #1a1430; border-radius: 3px;
}
.blob .eye.l { left: 18%; }
.blob .eye.r { right: 18%; }
.blob .shine {
  position: absolute; top: 12%; left: 18%; width: 18px; height: 10px;
  background: rgba(255,255,255,.45); border-radius: 50%;
}
.blob::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: .92;
}
.blob[data-door="tide"]::after {
  width: 16px; height: 8px;
  border: 2px solid #0f3d3a;
  border-top: 0;
  border-radius: 0 0 12px 12px;
}
.blob[data-door="ember"]::after {
  width: 8px; height: 8px;
  background: #3a1010;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.blob[data-door="root"]::after {
  width: 12px; height: 10px;
  border: 2px solid #3a2e08;
  border-radius: 2px 8px 2px 8px;
  background: transparent;
}
.blob[data-door="sky"]::after {
  width: 18px; height: 8px;
  border: 2px solid #2a1850;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
.line-bot .blob { width: 56px; height: 46px; margin: 0; }
.line-bot .blob .eye { width: 14px; height: 8px; top: 28%; }
.line-bot .blob[data-door]::after { transform: translateX(-50%) scale(.75); bottom: 14%; }

/* Mint sliders */
.mint-layout {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 720px) {
  .mint-layout { grid-template-columns: 220px 1fr; }
}
.pool-box {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(0,0,0,.25); border-radius: 12px; padding: 10px 12px;
  margin-bottom: 12px;
}
.pool-box.bad { outline: 2px solid var(--danger); }
.pool-box.good { outline: 2px solid var(--ok); }
.slider-block { margin-bottom: 12px; }
.slider-block label {
  display: flex; justify-content: space-between; margin-bottom: 4px; font-weight: 700;
}
input[type="range"] { width: 100%; accent-color: var(--glow); }

.mint-presets {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 0 0 10px;
}
.mint-preset {
  border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  padding: 10px 8px; cursor: pointer; text-align: left; color: inherit;
  background: rgba(0,0,0,.22);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mint-preset:hover { transform: translateY(-2px); border-color: rgba(126,240,255,.35); }
.mint-preset.on {
  border-color: var(--gold);
  background: rgba(255,213,106,.14);
  box-shadow: 0 0 0 3px rgba(255,213,106,.2), 0 0 18px rgba(126,240,255,.12);
}
.mint-preset strong { display: block; font-size: .9rem; margin-bottom: 2px; }
.mint-preset small { display: block; color: var(--muted); font-size: .72rem; margin-bottom: 6px; }
.mint-preset .preset-mix {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .02em;
}
.mint-preset .preset-mix .g { color: var(--glow); }
.mint-preset .preset-mix .c { color: var(--care); }
.mint-preset .preset-mix .a { color: var(--atlas); }
.mint-preset-tip {
  margin: 0 0 12px; padding: 8px 12px; border-radius: 12px;
  background: rgba(126,240,255,.1); border-left: 4px solid var(--glow);
  color: var(--ink); font-size: .84rem; line-height: 1.4; font-weight: 600;
  min-height: 2.6em;
}
@media (max-width: 560px) {
  .mint-presets { grid-template-columns: 1fr; }
}

.pick-list { display: grid; gap: 10px; }
.pick-row {
  display: flex; gap: 12px; align-items: stretch;
  background: rgba(0,0,0,.2); border-radius: 14px; padding: 8px;
  border: 2px solid transparent; cursor: pointer; text-align: left; color: inherit;
  width: 100%;
  opacity: .68; transition: opacity .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pick-row:hover, .pick-row:focus-visible { opacity: .9; }
.pick-row.selected {
  opacity: 1; border-color: var(--gold); background: rgba(255,213,106,.12);
  box-shadow: 0 0 0 3px rgba(255,213,106,.28), 0 0 22px rgba(255,213,106,.14);
  transform: translateY(-1px);
}
.pick-row .meta { flex: 1; min-width: 0; }
.pick-state {
  display: inline-block; margin-bottom: 4px; padding: 4px 8px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: var(--muted); font-size: .74rem; font-weight: 900;
}
.pick-row.selected .pick-state { background: var(--gold); color: #241d00; }
.flip-card {
  min-height: 78px; perspective: 700px; cursor: pointer;
  outline: none; margin: 2px 0 10px;
}
.flip-inner {
  min-height: 78px; position: relative; transform-style: preserve-3d;
  transition: transform .35s ease;
}
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; padding: 8px 10px; border-radius: 10px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  background: rgba(0,0,0,.2); backface-visibility: hidden;
  font-size: .84rem; line-height: 1.3;
}
.flip-face strong { color: var(--gold); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.flip-face small { color: var(--muted); font-size: .7rem; margin-top: 2px; }
.flip-back { transform: rotateY(180deg); }
.flip-card:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; justify-content: flex-end;
}

/* Lineup */
.lineup {
  display: grid; gap: 10px;
}
.lineup-cue {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 0 0 12px;
}
.lineup-cue .arena-day {
  grid-column: 1 / -1;
  padding: 8px 12px; border-radius: 12px;
  background: rgba(255,213,106,.1); border: 1px solid rgba(255,213,106,.22);
  color: var(--muted); font-size: .84rem; line-height: 1.35;
}
.lineup-cue .arena-day b { color: var(--gold); }
.lineup-cue span {
  padding: 8px 10px; border-radius: 10px;
  background: rgba(126,240,255,.1); color: var(--muted);
  font-size: .8rem; line-height: 1.3;
}
.lineup-cue b { color: var(--glow); }
.lineup-live-summary {
  grid-column: 1 / -1;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,.06); color: var(--muted);
  font-size: .82rem; line-height: 1.45;
}
.lineup-live-summary > b { color: var(--gold); }
.lineup-live-status {
  padding: 0; background: transparent; font-size: inherit; font-weight: 800;
}
.lineup-live-status.edge { color: var(--ok); }
.lineup-live-status.even { color: var(--gold); }
.lineup-live-status.behind { color: var(--fog); }
.line-slot {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center;
  background: rgba(0,0,0,.22); border-radius: 14px; padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.06);
}
.line-slot .ord {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800;
  background: rgba(255,255,255,.1);
}
.line-main { display: grid; gap: 6px; min-width: 0; }
.line-bot { display: flex; gap: 10px; align-items: center; }
.line-bot .blob { width: 56px; height: 46px; margin: 0; }
.edge-chip {
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline;
  padding: 7px 10px; border-radius: 10px; font-size: .88rem; line-height: 1.35;
  border: 1px solid transparent; opacity: 1; visibility: visible;
}
.edge-chip .edge-label {
  font-weight: 950; letter-spacing: .04em; text-transform: uppercase; font-size: .8rem;
  padding: 3px 8px; border-radius: 999px;
}
.edge-chip .edge-line { color: var(--muted); font-weight: 700; }
.edge-chip .edge-scores {
  flex-basis: 100%; color: var(--ink); font-size: .78rem; font-weight: 900;
  letter-spacing: .01em;
}
.lineup-even-tip {
  grid-column: 1 / -1;
  padding: 9px 11px; border-radius: 10px;
  background: rgba(255,213,106,.12); border: 1px solid rgba(255,213,106,.28);
  color: var(--ink); font-size: .84rem; line-height: 1.4; font-weight: 700;
}
.lineup-even-tip b { color: var(--gold); }
.edge-chip.edge {
  background: rgba(109,255,176,.12); border-color: rgba(109,255,176,.28);
}
.edge-chip.edge .edge-label { background: var(--ok); color: #062818; }
.edge-chip.even {
  background: rgba(255,213,106,.1); border-color: rgba(255,213,106,.25);
}
.edge-chip.even .edge-label { background: var(--gold); color: #241d00; }
.edge-chip.behind {
  background: rgba(154,163,199,.12); border-color: rgba(154,163,199,.3);
}
.edge-chip.behind .edge-label { background: var(--fog); color: #1a1f35; }
.move-btns { display: flex; gap: 6px; }
.move-btns button {
  border: 0; border-radius: 10px; padding: 8px 10px;
  background: rgba(255,255,255,.12); color: var(--ink); cursor: pointer;
}
.move-btns button:hover { background: rgba(126,240,255,.2); }

/* Arena */
.arena {
  display: grid; gap: 12px;
}
.vs-row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
}
.vs-row .vs {
  font-weight: 900; color: var(--fog); letter-spacing: .08em;
}
.battle-log {
  background: rgba(0,0,0,.35); border-radius: 14px; padding: 12px 14px;
  min-height: 140px; font-size: .92rem; line-height: 1.45;
  max-height: 280px; overflow: auto;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.battle-log .round {
  color: var(--gold); font-weight: 800; margin-top: 10px;
  letter-spacing: .04em; font-size: .8rem; text-transform: uppercase;
}
.battle-log .win, .battle-log .lose, .battle-log .tie {
  margin-top: 4px; padding: 8px 10px; border-radius: 10px;
}
.battle-log .win {
  color: var(--ok); background: rgba(109,255,176,.08);
  border-left: 3px solid var(--ok);
}
.battle-log .lose {
  color: #ffc0c8; background: rgba(255,122,138,.08);
  border-left: 3px solid var(--danger);
}
.battle-log .tie {
  color: var(--muted); background: rgba(255,255,255,.05);
  border-left: 3px solid var(--fog);
}
.battle-log .round-why {
  display: block; margin-top: 6px; padding: 7px 9px;
  border-left: 4px solid var(--gold); border-radius: 0 8px 8px 0;
  background: rgba(255,213,106,.12); color: var(--ink);
  font-weight: 700; font-size: .84rem;
}
.battle-log .round-why strong { color: var(--gold); }
.scoreboard {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-weight: 800;
}

/* Chronicle */
.chronicle-card {
  border-radius: 16px; padding: 16px;
  background:
    linear-gradient(180deg, rgba(255,213,106,.12), transparent),
    rgba(0,0,0,.28);
  border: 1px solid rgba(255,213,106,.35);
}
.chronicle-card .face {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gold); margin-bottom: 6px;
}
.chronicle-card h3 { margin: 0 0 8px; }
.chronicle-card p { margin: 0; color: var(--muted); line-height: 1.5; }

.footer-note {
  margin-top: 14px; font-size: .78rem; color: var(--muted); text-align: center;
}
.folio-save-confirmation {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(109,255,176,.14); border: 1px solid rgba(109,255,176,.42);
  color: var(--ok); font-weight: 950; font-size: 1.05rem;
}
.folio-tip-success {
  border-radius: 10px; padding: 8px 10px;
  background: rgba(109,255,176,.18); border: 1px solid var(--ok);
  color: var(--ok); font-weight: 950;
  animation: folio-save-flash 2s ease-out;
}

/* Light theme */
body.light {
  --bg: #f3f0ff;
  --bg2: #fff;
  --panel: #ffffff;
  --ink: #1c1a2e;
  --muted: #5a5678;
  --shadow: 0 12px 30px rgba(60,40,120,.12);
  background: radial-gradient(900px 500px at 10% 0%, #d9f7ff, transparent),
              radial-gradient(800px 400px at 100% 10%, #ffe3f1, transparent),
              var(--bg);
}
body.light .panel {
  border-color: rgba(40,30,80,.1);
}
body.light .bot-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,.8), transparent 40%),
    linear-gradient(225deg, rgba(126,240,255,.25), rgba(255,158,200,.2)),
    #fff;
}
body.light .door, body.light .pick-row, body.light .line-slot,
body.light .battle-log, body.light .pool-box, body.light .chronicle-card,
body.light .mint-preset {
  background: rgba(255,255,255,.85);
}
body.light .mint-preset.on { background: rgba(255,213,106,.28); }
body.light .mint-preset-tip { background: rgba(126,240,255,.18); }
body.light .ability,
body.light .echo-pill {
  color: #241d00;
  background: linear-gradient(135deg, #f0c44a, #ff9ec8);
}
body.light .stat-chip {
  background: rgba(40,30,80,.06);
  border-color: rgba(40,30,80,.12);
  color: var(--ink);
}
body.light .blob .eye { background: #1a1430; }

body.light .edge-chip.behind .edge-label { color: #fff; }

/* Motion — bounce, wiggle, spark */
@keyframes blob-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-10px) scale(1.05); }
  70% { transform: translateY(-4px) scale(1.02); }
}
@keyframes blob-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg) translateX(-2px); }
  75% { transform: rotate(6deg) translateX(2px); }
}
@keyframes blob-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes lineup-edge-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,213,106,0); }
  18% { transform: scale(1.08); box-shadow: 0 0 28px 8px rgba(255,213,106,.55); }
  45% { transform: scale(1.05); box-shadow: 0 0 22px 6px rgba(255,213,106,.42); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,213,106,0); }
}
@keyframes lineup-even-tip-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,213,106,0); }
  20% { transform: scale(1.04); box-shadow: 0 0 22px 5px rgba(255,213,106,.4); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,213,106,0); }
}
@keyframes lineup-status-flash {
  0% { transform: scale(1); background: transparent; box-shadow: 0 0 0 0 rgba(255,213,106,0); }
  15% { transform: scale(1.06); background: rgba(255,213,106,.22); box-shadow: 0 0 16px 4px rgba(255,213,106,.45); }
  40% { transform: scale(1.03); background: rgba(255,213,106,.14); box-shadow: 0 0 12px 3px rgba(255,213,106,.3); }
  100% { transform: scale(1); background: transparent; box-shadow: 0 0 0 0 rgba(255,213,106,0); }
}
@keyframes cheer-spark {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}
@keyframes cheer-hit {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,213,106,0); }
  25% { transform: scale(1.08); box-shadow: 0 0 24px 7px rgba(255,213,106,.52); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,213,106,0); }
}
@keyframes folio-save-flash {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(109,255,176,0); }
  20% { transform: scale(1.02); box-shadow: 0 0 24px 5px rgba(109,255,176,.55); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(109,255,176,0); }
}
@keyframes spark-flash {
  0% { box-shadow: 0 0 0 0 rgba(255,213,106,.0); }
  40% { box-shadow: 0 0 28px 8px rgba(255,213,106,.55); }
  100% { box-shadow: 0 0 0 0 rgba(255,213,106,.0); }
}
.blob-bounce { animation: blob-bounce 1.1s ease-in-out infinite; }
.blob-wiggle { animation: blob-wiggle .7s ease-in-out infinite; }
.blob-pop { animation: blob-pop .28s ease-out; }
.spark-flash { animation: spark-flash .45s ease-out; }
.lineup-edge-pulse { animation: lineup-edge-pulse 1.05s ease-out; }
.lineup-even-tip-pulse { animation: lineup-even-tip-pulse 1s ease-out; }
.lineup-status-flash { display: inline-block; padding: 2px 8px; border-radius: 8px; animation: lineup-status-flash 1.05s ease-out; }
.cheer-spark { animation: cheer-spark .9s ease-out; }
.skill-beat {
  margin: 10px auto 0; width: fit-content; padding: 7px 14px;
  border-radius: 999px; background: rgba(255,213,106,.16);
  color: var(--gold); font-weight: 900; letter-spacing: .05em;
  opacity: 0; transform: scale(.85);
}
.battle-controls {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
}
.battle-controls button { padding: 7px 12px; font-size: .82rem; }
#btn-battle-cheer {
  background: rgba(255,213,106,.18); border: 1px solid rgba(255,213,106,.35);
  color: var(--gold); font-weight: 900;
  min-height: 48px;
}
#btn-battle-cheer:hover { background: rgba(255,213,106,.28); }
#btn-battle-cheer.cheer-ready {
  background: rgba(255,213,106,.42);
  border: 2px solid rgba(255,213,106,.95);
  box-shadow: 0 0 22px 6px rgba(255,213,106,.45), 0 0 0 2px rgba(255,213,106,.25);
  animation: cheer-ready-pulse 1.1s ease-in-out infinite;
  min-height: 48px;
}
#btn-battle-cheer:disabled { opacity: .45; cursor: default; animation: none; }
#btn-battle-cheer.cheer-hit { animation: cheer-hit .9s ease-out; }
@keyframes cheer-ready-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 18px 4px rgba(255,213,106,.35), 0 0 0 2px rgba(255,213,106,.2); }
  50% { transform: scale(1.04); box-shadow: 0 0 28px 8px rgba(255,213,106,.6), 0 0 0 3px rgba(255,213,106,.35); }
}
.skill-beat.skill-pop { animation: skill-pop .7s ease-out forwards; }
@keyframes skill-pop {
  0% { opacity: 0; transform: scale(.8) translateY(4px); }
  25% { opacity: 1; transform: scale(1.08) translateY(0); }
  100% { opacity: .9; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .blob-bounce, .blob-wiggle, .blob-pop, .spark-flash, .lineup-edge-pulse, .lineup-even-tip-pulse, .lineup-status-flash, .cheer-spark, .cheer-hit, .cheer-ready-pulse, .folio-tip-success, .skill-beat.skill-pop { animation: none; }
  #btn-battle-cheer.cheer-ready { animation: none; }
  .skill-beat.skill-pop { opacity: .9; transform: none; }
}

.cheer-status {
  width: 100%; text-align: center; font-weight: 900; font-size: .95rem;
  color: var(--muted); margin: 0 0 6px;
}
.cheer-status-on {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255,213,106,.55);
}
#btn-battle-cheer.cheer-closed {
  opacity: .55; filter: grayscale(.3);
  animation: none !important;
}