:root {
  --bg: #12141c;
  --bg-2: #1a1e2b;
  --panel: #212739;
  --line: #313a55;
  --text: #e9ecf6;
  --muted: #9aa4c0;
  --accent: #f2c14e;
  --accent-2: #6ea8fe;
  --danger: #ff6b6b;
  --ok: #4ecb8f;
  --radius: 12px;
  --fire: #ff7a59;
  --water: #4fa8ff;
  --wind: #62d6a8;
  --thunder: #ffd94a;
  --ice: #8fe3ff;
  --earth: #c79a5b;
  --light: #fdf3c6;
  --dark: #a98bd6;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: linear-gradient(135deg, #1a1f3a 0%, #0d1117 50%, #1a1f3a 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  color: var(--text);
  font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Noto Sans JP', 'Meiryo', system-ui, sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(16, 18, 26, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}

.brand-mark {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 7px;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--accent), #b8791f);
  color: #1b1408;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.brand-text {
  font-size: 15px;
  letter-spacing: 0.04em;
}

.topbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
}

/* 受信箱への入口（プロフィールと同じ帯に出す小さな目印） */
.chip-mail-gift {
  border-color: var(--accent);
  color: var(--accent);
}

.mail-badge {
  min-width: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #06101f;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.chip-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-2);
  color: #06101f;
  font-size: 11px;
  font-weight: 700;
}

.app {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 14px 40px;
}

/* 対戦画面だけ幅を広げる。2対2は1行に2席並ぶため980pxではカードが100px前後に潰れて読めない。 */
.app:has(.battle-layout) {
  max-width: 1280px;
}

h1 {
  font-size: 22px;
  margin: 8px 0 4px;
}

h2 {
  font-size: 17px;
  margin: 22px 0 10px;
  color: var(--accent);
}

p.lead {
  color: var(--muted);
  margin: 0 0 18px;
  font-size: 14px;
}

.menu-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* 1列に積む使い方の list（ロビーの席一覧・運営の試合席など） */
.menu-grid.list {
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-grid.list > li {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  font-size: 13px;
}

.menu-item {
  display: block;
  text-align: left;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--panel), var(--bg-2));
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.16s, transform 0.16s;
}

.menu-item:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.menu-item strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.menu-item span {
  font-size: 13px;
  color: var(--muted);
}

.menu-item.is-soon {
  opacity: 0.55;
}

.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.btn:hover {
  border-color: var(--accent-2);
}

.btn.primary {
  background: linear-gradient(160deg, var(--accent), #c98a1e);
  color: #1b1408;
  border-color: transparent;
  font-weight: 700;
}

.btn.ghost {
  background: transparent;
}

.btn.danger {
  background: #43171f;
  border-color: #c05a6b;
  color: #ffd2dc;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.field label {
  font-size: 13px;
  color: var(--muted);
}

input[type='text'] {
  width: 100%;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text);
  font: inherit;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 8px;
  max-width: 420px;
}

.icon-choice {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
}

.icon-choice[aria-pressed='true'] {
  border-color: var(--accent);
  background: #2f2a17;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 14px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

th {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.row-winner td {
  color: #f2c94c;
  background: rgba(242, 201, 76, 0.07);
}

.board {
  display: grid;
  gap: 8px;
  /* 席の高さは行で揃えるが、盤面自身は上詰め。ここを伸ばすと仲間席のカードだけ縦長に伸びる。 */
  align-content: start;
  /* 手札の並びを「席の実幅」で決めるための基準（カード枚数の割付は @container で分ける） */
  container-type: inline-size;
}

.slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

/* 2v2横並びの場合、カードが小さくなりすぎないように */
.battle-main.is-my-turn .slots,
.battle-main .slots {
  grid-template-columns: repeat(3, minmax(140px, 1fr));
}

.back-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-width: 46%;
}

.side-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}

.side-head b {
  color: var(--text);
  font-size: 13px;
}

.card {
  position: relative;
  border: 1px solid var(--line);
  border-left: 4px solid var(--attr, var(--line));
  border-radius: 10px;
  background: linear-gradient(165deg, var(--panel), #171b28);
  padding: 6px;
  min-height: 96px;
  /* 幅の床は枠（grid のトラック）側が持つ。ここで 130px を持つと、
     2対2の狭い席では隣の席にはみ出して敵と味方がくっついて見えた。 */
  min-width: 0;
  display: grid;
  gap: 3px;
  align-content: start;
  font-size: 11px;
}

.card.you {
  cursor: pointer;
}

.card.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.card.is-target {
  outline: 2px dashed var(--danger);
  cursor: crosshair;
}

.card.is-ally-target {
  outline: 2px dashed var(--ok);
  cursor: pointer;
}

.card.is-dim {
  opacity: 0.45;
}

.card.defeated {
  filter: grayscale(1);
  opacity: 0.5;
}

/* --- カードのイラスト ---------------------------------------------------
   public/img/cards/<カードID>.png に置いたときだけ出る。絵のないカードは
   img 自体が onerror で消えるので、下のHPバーや名前がずれることもない。 */
.card-art {
  display: block;
  width: 100%;
  height: 64px;
  object-fit: cover;
  object-position: 50% 28%;
  border: 1px solid var(--attr, var(--line));
  border-radius: 8px;
  background: #0d1018;
  /* タイルクリック（枠を選ぶ操作）を絵に奪わせない */
  pointer-events: none;
}

.art-name {
  display: flex;
  gap: 8px;
  align-items: center;
}

.card-art-mini {
  display: block;
  width: 38px;
  height: 38px;
  flex: none;
  object-fit: cover;
  object-position: 50% 28%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d1018;
}

/* --- ガチャ開封の演出 -----------------------------------------------------
   裏向きの枠を1枚ずつめくる。めくり終わるまで開封結果の表は出さない。
   光は上級枠だけ。SSRの虹は枠の回りに、限定の白銀は内側から吹き出す形にしている。 */
.reveal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
  margin: 12px 0 4px;
}

.flip {
  position: relative;
  min-height: 150px;
  perspective: 640px;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 150px;
  transform-style: preserve-3d;
  transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.25, 1);
}

.flip.is-open .flip-inner {
  transform: rotateY(180deg);
}

/* 一気に開いた（まとめて開ける）ときはめくり動作を挟まず、表のまますえる */
.flip.instant .flip-inner {
  transition: none;
}

.flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  padding: 6px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-back {
  background-image: repeating-linear-gradient(135deg, #2a3350 0 8px, #222a42 8px 16px);
  color: var(--muted);
  letter-spacing: 2px;
  font-size: 12px;
}

.flip-front {
  transform: rotateY(180deg);
  gap: 2px;
}

.flip-front .card-art-mini {
  width: 44px;
  height: 44px;
  margin-bottom: 2px;
}

.flip-name {
  font-size: 12px;
  line-height: 1.25;
}

.flip-rarity {
  font-size: 11px;
  color: var(--accent);
}

.flip-state {
  font-size: 10px;
  color: var(--muted);
}

/* 枠ごとの光。めくれた瞬間に1回だけ弾けて、あとは枠縁に残る */
.flip.glow-sr .flip-front {
  border-color: var(--accent);
}

.flip.glow-sr.is-open .flip-front {
  box-shadow: 0 0 14px rgba(242, 193, 78, 0.55);
}

.flip.glow-ssr .flip-front {
  border-color: var(--accent-2);
}

.flip.glow-ssr.is-open .flip-front {
  box-shadow: 0 0 16px rgba(110, 168, 254, 0.6);
}

.flip.glow-limited .flip-front {
  border-color: #f4f7ff;
}

.flip.glow-limited.is-open .flip-front {
  box-shadow: 0 0 18px rgba(244, 247, 255, 0.7);
}

.flip.is-open.glow-sr::after,
.flip.is-open.glow-ssr::after,
.flip.is-open.glow-limited::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 16px;
  pointer-events: none;
  animation: reveal-flash 0.72s ease-out forwards;
}

.flip.is-open.glow-sr::after {
  background: radial-gradient(circle, rgba(242, 193, 78, 0.75), transparent 68%);
}

.flip.is-open.glow-ssr::after {
  background: conic-gradient(#ff6b6b, #f2c14e, #4ecb8f, #6ea8fe, #a98bd6, #ff6b6b);
  opacity: 0.75;
}

.flip.is-open.glow-limited::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(143, 227, 255, 0.5) 45%, transparent 72%);
}

@keyframes reveal-flash {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.card-face {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
}

.attr {
  display: inline-grid;
  place-items: center;
  /* 「🔥 火」のように絵と文字を並べるので、22pxの箱だと中身が箱から前に飛び出す。
     床だけ保って後は内容に合わせて横へ広げる。 */
  min-width: 22px;
  padding: 0 5px;
  height: 22px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #10131c;
  background: var(--attr, var(--muted));
}

.cost {
  font-size: 11px;
  color: var(--accent-2);
  white-space: nowrap;
}

.card-name {
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.3;
}

.card-kind {
  font-size: 10.5px;
  color: var(--muted);
}

.stats {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}

.bar {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: #0e1119;
  border: 1px solid var(--line);
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3fa06b, #6ee7a8);
}

.bar.low i {
  background: linear-gradient(90deg, #b3464b, #ff8a8a);
}

.bar b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

.badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 10px;
}

.badge {
  padding: 1px 5px;
  border-radius: 5px;
  background: #3a2340;
  color: #ffd9f4;
}

.badge.seal {
  background: #23303f;
  color: #b8d6ff;
}

.badge.badge-winner {
  background: #4a3b12;
  color: #f2c94c;
}

/* 常時効果で溜まっている分（追撃・形態）。攻撃が当たるまで消えないので色で分ける */
.badge.badge-bonus {
  background: #4a2a12;
  color: #ffc46b;
}

.badge.badge-stance {
  background: #16333a;
  color: #92e3ff;
}

.preview {
  font-size: 11px;
  color: var(--accent);
}

.facedown {
  display: grid;
  place-items: center;
  min-height: 116px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: repeating-linear-gradient(135deg, #1b2030 0 8px, #171b28 8px 16px);
  color: var(--muted);
  font-size: 11px;
}

.facedown.is-trap {
  border-color: #f2c94c;
  color: #f2c94c;
}

.stage-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  font-size: 13px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
}

.stage-strip .map {
  color: var(--accent);
  font-weight: 700;
}

/* 自分のターンを強調表示（アニメーションなし） */
.stage-strip span[style*="font-weight:bold"] {
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

/* 自分のターンのとき、stage-strip全体の背景を変える */
.stage-strip.is-my-turn {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 215, 0, 0.03));
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.15);
}

/* 自分のターンのとき、盤面全体の背景も金色に */
.battle-main.is-my-turn {
  background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.06) 0%, transparent 70%);
  border-radius: 12px;
}

.pill-2x {
  padding: 1px 7px;
  border-radius: 999px;
  background: #4a1f1f;
  color: #ffb4b4;
  font-weight: 700;
}

.log {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #101320;
  padding: 8px 10px;
  height: 122px;
  overflow-y: auto;
  font-size: 12px;
  display: grid;
  gap: 2px;
  align-content: end;
}

.log .line {
  color: var(--muted);
}

.log .line.latest {
  color: var(--text);
}

.log .line.error {
  color: var(--danger);
}

.actionbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0 0;
}

.mp {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--accent-2);
  font-weight: 700;
}

.hint {
  font-size: 12px;
  color: var(--muted);
}

.vs {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 16, 0.86);
  z-index: 40;
  padding: 20px;
}

.overlay .panel {
  max-width: 380px;
  text-align: center;
}

.overlay h3 {
  font-size: 26px;
  margin: 0 0 6px;
  color: var(--accent);
}

/* リザルト画面。数字を並べるので 380px の通常オーバーレイより広くする。 */
.overlay .panel.result-panel {
  max-width: 560px;
  width: 100%;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 10px 0;
}

.result-grid > div {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 4px;
}

.result-grid b {
  display: block;
  font-size: 18px;
}

.result-counters {
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.result-table {
  width: 100%;
  font-size: 12px;
  text-align: left;
}

.result-table th:last-child,
.result-table td:last-child {
  text-align: right;
}

.stack {
  display: grid;
  gap: 10px;
}

@media (max-width: 560px) {
  .card {
    min-height: 104px;
    padding: 6px;
  }
  .card-name {
    font-size: 11.5px;
  }
  .back-row {
    max-width: 60%;
  }
  .log {
    height: 96px;
  }
}

/* --- サブカードの手札・WINNERゲージ -------------------------------------- */
.hand-row {
  display: grid;
  /* 2枚まで（罠ゾーンはここ）は普通の大きさ。 */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
  margin-top: 4px;
}

/* 3枚以上になったときだけ4等分の小さい枠へ切り替える。
   枚数で枠の幅を変えないので、4枚目に飛び出さない。 */
.hand-row.is-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 効果文は拡大表示で読む前提なので3行まで。枚数が変わってもカードの高さが揃う。 */
.hand-row .sub-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 「大きく」は右下に浮かぶので、効果文がボタンに隠れない分だけ余白を空ける。 */
.hand-row .card.you {
  padding-bottom: 22px;
}

/* 席が狭い（2対2）と4等分は75px前後になる。文字を詰め、効果文は2行で切って
   カード同士が重ならない幅に収める。全文は「大きく」で読む。 */
@container (max-width: 520px) {
  .hand-row.is-compact .card {
    padding: 4px;
    padding-bottom: 20px;
    font-size: 10px;
    min-height: 84px;
  }
  .hand-row.is-compact .card-face {
    gap: 2px;
  }
  .hand-row.is-compact .attr {
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    font-size: 10px;
  }
  .hand-row.is-compact .cost,
  .hand-row.is-compact .card-kind {
    font-size: 9.5px;
  }
  .hand-row.is-compact .card-name {
    font-size: 10.5px;
    overflow-wrap: anywhere;
  }
  .hand-row.is-compact .sub-text {
    -webkit-line-clamp: 2;
    font-size: 9.5px;
    line-height: 1.35;
  }
  .hand-row.is-compact .facedown {
    min-height: 76px;
    font-size: 10px;
  }
  .hand-row.is-compact .zoom-btn {
    right: 4px;
    bottom: 4px;
    padding: 3px 5px;
  }
}

.sub-text {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 4px;
}

.card.is-winner {
  border-color: #f2c94c;
  box-shadow: 0 0 0 1px rgba(242, 201, 76, 0.35), 0 6px 18px rgba(0, 0, 0, 0.4);
}

.gauge {
  display: inline-flex;
  gap: 2px;
  margin-left: 6px;
}

.gauge-letter {
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
}

.gauge-letter.on {
  color: #1a1405;
  background: #f2c94c;
  border-color: #f2c94c;
}

/* --- M3: アカウント・運営ダッシュボード -------------------------------------- */
.account-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chip-icon.icon-img {
  background: none;
  object-fit: cover;
}

.chip-icon-sm {
  width: 16px;
  height: 16px;
  font-size: 10px;
}

.icon-big {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--accent-2);
  color: #06101f;
  font-size: 24px;
  font-weight: 700;
  object-fit: cover;
}

.chip-sub {
  color: var(--muted);
  font-size: 11px;
}

.chip-login {
  border-color: var(--accent);
  color: var(--text);
}

.chip-admin {
  background: #4a3b12;
  border-color: #f2c94c;
  color: #f7e7b5;
}

.notice-bar {
  margin: 0 auto;
  max-width: 1180px;
  padding: 10px 16px;
  border: 1px solid #f2c94c;
  border-radius: 10px;
  background: rgba(242, 201, 76, 0.12);
  color: #f7e7b5;
  font-size: 13px;
}

/* メンテナンス中の帯だけ色を変えて「止まっている」ことが分かるようにする。 */
.notice-bar.notice-warn {
  border-color: var(--danger);
  background: rgba(255, 107, 107, 0.14);
  color: #ffdcdc;
}

/* 運営が出す画面中央の告知。背景をクリックしても閉じられないように、ボタンだけで消す。 */
.popup-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(6, 8, 14, 0.72);
}

/* [hidden] 属性が position: fixed と競合するのを防ぐ */
.popup-layer[hidden] {
  display: none !important;
}

.popup-card {
  width: min(460px, 100%);
  padding: 18px;
  border: 1px solid #f2c94c;
  border-radius: 14px;
  background: var(--panel, #1b1f2a);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

.popup-card h2 {
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: 0.04em;
}

.popup-card p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* 図鑑とデッキ編成で同じ稀有度のかたちで見せる。色は枠ごと。 */
.rarity {
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 11px;
  white-space: nowrap;
  background: #2b2f3a;
  color: #cfd6e4;
}

.rarity-SR {
  background: #173a3a;
  color: #7ce8e0;
}

.rarity-SSR {
  background: #4a3b12;
  color: #f2c94c;
}

.rarity-limited {
  background: #4a1d3a;
  color: #ff9be6;
}

.badge-ban {
  background: rgba(255, 107, 107, 0.18);
  border-color: var(--danger);
  color: #ffdcdc;
}

.row-banned td {
  opacity: 0.55;
}

/* ランキングで自分の行だけ目立たせる（他人の行と同じ形のまま色だけ変える） */
.row-me td {
  background: rgba(242, 201, 76, 0.1);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.tab {
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.tab[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: #06101f;
  font-weight: 700;
}

/* 上限に達したタブ（新しいデッキなど）は触れないと分かるようにする */
.tab:disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 招待コード・デッキ共有コード。押すとコピー、なめる（長押し）と端末のコピーに入る */
.tap-copy,
.share-code {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent);
  cursor: pointer;
  user-select: all;
}

.row-pick td {
  background: rgba(96, 165, 250, 0.14);
}

/* 図鑑で「まだ持っていない」行は薄くして、所持と見分けがつくようにする */
.row-locked td {
  opacity: 0.45;
}

tr[data-user] {
  cursor: pointer;
}

textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  resize: vertical;
}

/* --- 名前タグ（運営・上級・称号） ----------------------------------------- */
.badge.badge-admin {
  background: var(--accent);
  color: #241b06;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 上級アカウント（スーパーアカウント）は運営の一歩下。金色ではなく銀緑で区別する。 */
.badge.badge-senior {
  background: #7fd6c0;
  color: #04231d;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 運営アイコンの金色の縁。枠の太さでレイアウトが動かないように影で描く。 */
.chip-icon.icon-gold,
.icon-big.icon-gold {
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 10px rgba(242, 193, 78, 0.45);
}

.badge.badge-title {
  background: #2b3550;
  color: #cfe0ff;
}

/* ランキングで「今この瞬間1位」の人だけに出る印。紫の背景＋紫の縁。
   縁は box-shadow で描く（border を足すとチップの幅が動いて行の並びがずれる）。 */
.badge.badge-rank1 {
  background: #4a2170;
  color: #e8d4ff;
  box-shadow: inset 0 0 0 1px var(--dark);
}

/* 達成するまで一覧に出ない称号の目印（運営ダッシュボードと所持称号の両方で使う） */
.badge.badge-hidden {
  background: #3a2b4d;
  color: #e0cfff;
}

/* 運営ダッシュボードの称号チップに付ける、剥奪／装備の小さなボタン */
.chip-x {
  margin-left: 4px;
  padding: 0 4px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  font: inherit;
  font-size: 10px;
  line-height: 1.4;
  cursor: pointer;
}

.chip-x:hover {
  background: var(--danger);
  color: #fff;
}

/* --- 対戦開始のVSイントロ ------------------------------------------------ */
.vs-intro {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-content: center;
  gap: 14px;
  justify-items: center;
  background: radial-gradient(700px 420px at 50% 40%, rgba(50, 62, 96, 0.96) 0%, rgba(10, 12, 20, 0.97) 70%);
  cursor: pointer;
}

.vs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

.vs-team {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(33, 39, 57, 0.8);
}

.vs-team.vs-mine {
  border-color: var(--accent);
}

.vs-fighter {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
}

.vs-fighter .chip-icon {
  width: 84px;
  height: 84px;
  font-size: 40px;
}

.vs-who {
  display: grid;
  gap: 3px;
  justify-items: center;
  font-size: 17px;
  font-weight: 700;
}

.vs-mark {
  font-size: 44px;
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(242, 193, 78, 0.45);
  letter-spacing: 0.06em;
}

.vs-label {
  font-size: 12px;
  color: var(--muted);
}

/* --- 運営パネル・チャレンジ・プロフィール ------------------------------- */
.admin-panel {
  margin-top: 14px;
  border: 1px solid var(--accent);
  background: rgba(74, 59, 18, 0.22);
}

.gauge-bar {
  position: relative;
  height: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  overflow: hidden;
}

.gauge-bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

.challenge-row {
  display: grid;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.challenge-row:last-child {
  border-bottom: none;
}

.challenge-row.done {
  color: var(--ok);
}

/* 受信箱の1通。課題の行と同じ形（区切り線つきのかたまり）を使う */
.mail-row {
  display: grid;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.mail-row:last-child {
  border-bottom: none;
}

.mail-row.done {
  opacity: 0.62;
}

.mail-gift {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: rgba(242, 193, 78, 0.1);
  font-size: 12px;
  color: var(--accent);
}

.profile-card {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.friend-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

/* --- 状態異常アイコンとダメージ演出 -------------------------------------- */
/* アイコンの1文字と名称は src/core/config.js の STATUS_META から来る。
   色だけここで面倒、というのが今回の分担。 */
.st-icon {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 16px;
  line-height: 1.5;
  cursor: help;
}

.st-icon b {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
}

.st-poison {
  background: #4a1f5c;
  color: #e8b4f8;
  border-color: #6b2d7e;
}

.st-burn {
  background: #4d2418;
  color: #ffb08a;
  border-color: #7a3a24;
}

.st-paralysis {
  background: #3d3a1c;
  color: #ffe9a3;
  border-color: #6a6330;
}

.st-stun {
  background: #34314a;
  color: #d8c6ff;
  border-color: #4b4668;
}

.st-seal {
  background: #23303f;
  color: #b8d6ff;
  border-color: #35506b;
}

.st-freeze {
  background: #1c3d44;
  color: #b6f0ff;
  border-color: #2c6a76;
}

.st-flash {
  background: #45401f;
  color: #fff6c8;
  border-color: #75693a;
}

/* 属性相性早見表（図鑑）。得意と苦手だけ色を付けて、等倍の空欄と区別する。 */
.aff-good {
  color: #ffd27a;
  font-weight: 700;
}

.aff-bad {
  color: #9fb4c8;
}

/* 被弾したカードの上に数字を舞い上げる。playFx() が .card に差し込む。 */
.fx {
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 6;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 700;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
  animation: fx-rise 820ms ease-out forwards;
}

.fx-dmg {
  /* 属性の分かる一撃（--burst を playFx が置く）は、そのカードの色で数字を出す。 */
  color: var(--burst, var(--danger));
}

.fx-heal {
  color: var(--ok);
}

.fx.is-big {
  font-size: 25px;
}

@keyframes fx-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.7);
  }

  20% {
    opacity: 1;
    transform: translate(-50%, -4px) scale(1.14);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -34px) scale(1);
  }
}

.card.is-hit {
  animation: hit-shake 320ms ease-out;
}

.card.is-hit-big {
  animation: hit-shake 480ms ease-in-out;
  box-shadow: 0 0 0 2px var(--danger);
}

/* 攻撃時の光るエフェクト */
.card.is-attacking {
  animation: attackGlow 0.6s ease-out;
}

@keyframes attackGlow {
  0% {
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    filter: brightness(1);
  }
  30% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    filter: brightness(1.5);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    filter: brightness(1);
  }
}

@keyframes hit-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-5px);
  }

  40% {
    transform: translateX(4px);
  }

  60% {
    transform: translateX(-3px);
  }

  80% {
    transform: translateX(2px);
  }
}

/* メニュー上部のヒーロー。専用のタイトル画面は作らず、ここで顔を見せる。 */
.hero {
  position: relative;
  overflow: hidden;
  margin: 4px 0 14px;
  padding: 26px 20px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(520px 220px at 10% 0%, rgba(255, 122, 89, 0.22), transparent 70%),
    radial-gradient(520px 220px at 38% 0%, rgba(79, 168, 255, 0.2), transparent 70%),
    radial-gradient(520px 220px at 64% 0%, rgba(255, 217, 74, 0.15), transparent 70%),
    radial-gradient(520px 220px at 92% 0%, rgba(169, 139, 214, 0.24), transparent 70%),
    linear-gradient(165deg, var(--bg-2), #12141c);
}

/* 属性8色の帯。このゲームが八つ属性の戦いだと一目で伝える。 */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--fire), var(--water), var(--wind), var(--thunder), var(--ice), var(--earth), var(--light), var(--dark));
}

.hero-mark {
  display: inline-grid;
  place-items: center;
  padding: 5px 14px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--accent), #b8791f);
  color: #1b1408;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.hero-title {
  margin: 14px 0 2px;
  font-size: clamp(26px, 6vw, 42px);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.hero-sub {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.06em;
}

@media (max-width: 560px) {
  .hero {
    padding: 20px 14px 22px;
  }
}

/* --- 対戦画面の降参ドックと手札の拡大表示 -------------------------------- */
/* 降参は「いつも同じ場所にあるほど危ない操作」なので、右下に固定して2回押しで確定させる。 */
.surrender-dock {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.surrender-dock .btn {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: 0 10px 24px rgba(5, 7, 14, 0.55);
}

.surrender-dock .badge {
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(5, 7, 14, 0.55);
}

/* 固定ドックが操作列の末尾に重ならない分だけ余白をあける。
   確認中は「本当に降参」「やめる」が縦に並ぶので、幅は1ボタンのまま変わらない。 */
.actionbar {
  padding-right: 112px;
}

@media (max-width: 560px) {
  .surrender-dock {
    right: 10px;
    bottom: 10px;
  }
  .actionbar {
    padding-right: 96px;
  }
}

.zoom-btn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 15, 24, 0.82);
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}

.zoom-btn:hover {
  color: var(--text);
  border-color: var(--accent-2);
}

/* 手札だけ大きく読むレイヤー。盤面を触らずに閉じられるよう、背景ごと閉じる扱いにする。 */
.zoom-layer {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  gap: 10px;
  background: rgba(8, 10, 16, 0.84);
  padding: 20px;
}

.zoom-card {
  width: min(340px, 88vw);
  min-height: 0;
  padding: 18px;
  gap: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.zoom-card .card-name {
  font-size: 21px;
}

.zoom-card .card-face .attr,
.zoom-card .card-face .cost {
  font-size: 13px;
}

.zoom-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
}

/* 効果文の下に添える「エンジンが実際にしている事」の要約 */
.zoom-traits {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #ffc46b;
}

.zoom-card .btn {
  justify-self: center;
}

@media (hover: hover) {
  .hand-row .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
  }
}

/* 初期アイコンの画像化（public/img/icons/*.svg） */
img.chip-icon {
  border-radius: 6px;
}

.icon-choice {
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
}

.icon-choice-img {
  display: block;
  width: 80%;
  height: 80%;
  border-radius: 9px;
  object-fit: cover;
}

/* 設定画面のチェック項目（配信者モード・メインカード表示オフ） */
.switch {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 15px;
  cursor: pointer;
}

.switch input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* 対戦画面の2カラムレイアウト */
.battle-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
  margin-top: 12px;
}
.battle-main {
  min-width: 0;
}

/* 対戦盤面の行ラッパ。敵1行・自分たち（自分＋仲間）1行を作り、行の中で横に並べる。
   （盤面を .battle-main の直接の子にして nth-child で幅を決めていたと、
     ステージ帯や手番強調が入るたびに位置がズレて崩れた） */
.board-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

/* 1席1箱。枠を付ければ「敵2席」「自分と仲間2席」の区別がつき、
   見出しの行数違いで段がズレても席の中身は揃って見える。 */
.board-row > .board.side {
  flex: 1 1 300px;
  min-width: 0;
  /* 1対1で幅を使い切らない床。2対2の席（約460px）には影響しない。 */
  max-width: 720px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

/* 手番の席だけ枠を金色に起こす（背景の金色グラデと同じ合図） */
.battle-main.is-my-turn .board-row > .board.side.your-board {
  border-color: rgba(255, 215, 0, 0.45);
}

.battle-main.is-2v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.battle-main.is-2v2 > .board-row,
.battle-main.is-2v2 > .stage-strip,
.battle-main.is-2v2 > .actionbar {
  flex: 1 1 100%;
}

/* 2対2は1行に2席並ぶので幅を等分し、席と席の間にがっぽり余白を取る。
   幅が足りないときは無理に詰めず、行を畳んで縦に積む（席の最小幅が床）。 */
.battle-main.is-2v2 .board-row {
  gap: 24px;
  align-items: flex-start;
}

.battle-main.is-2v2 .board-row > .board.side {
  flex: 1 1 0;
  min-width: 288px;
  /* 席が半分ずつの代わりに余白を詰めて、1対1と同等の読みやすさにする */
  padding: 8px;
}

.battle-main.is-2v2 .board-row .card {
  padding: 5px;
  gap: 2px;
  font-size: 10.5px;
  min-height: 92px;
}

/* 席の最小幅を枠の床にして、カードが隣の席へはみ出さないようにする */
.battle-main.is-2v2 .board-row .slots {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 席見出しの高さを揃えると、2列の盤面の段がそろって見える */
.board-row .side-head {
  min-height: 34px;
}

.battle-log {
  position: sticky;
  top: 60px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.battle-log .log {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  font-size: 11px;
  line-height: 1.5;
  height: auto;
  max-height: none;
}

.battle-log .log .line {
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.battle-log .log .line:last-child {
  border-bottom: none;
}

/* 幅が足りないときはログを下へ回し、盤面に横幅を渡す。
   2対2は1行に2席並ぶため、ログを横に置いたままだとカードが100px前后に潰れる。 */
@media (max-width: 1120px) {
  .battle-layout {
    grid-template-columns: 1fr;
  }
  .battle-log {
    position: static;
    max-height: none;
  }
}

/* --- スマホ縦画面 ---------------------------------------------------------
   ヘッダを1行に詰め、盤面は縦に積んで読む画面にする。
   席を横に並べたままだとカードが50px前後になって押したい枠が押せない。 */
@media (max-width: 700px) {
  .app {
    padding: 10px 8px 26px;
  }

  /* ヘッダが折れて縦に伸びると、そのぶん盤面が下へ押される。
     Lvと残りXPはアカウント画面で読めるので、狭い画面では1行に収まるように詰める。 */
  .topbar {
    gap: 6px;
    padding: 8px 10px;
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-left: calc(10px + env(safe-area-inset-left));
    padding-right: calc(10px + env(safe-area-inset-right));
  }
  .brand-text {
    display: none;
  }
  .topbar-right {
    flex-wrap: nowrap;
    min-width: 0;
    gap: 6px;
  }
  .topbar .chip {
    padding: 4px 8px;
    font-size: 11px;
    white-space: nowrap;
  }
  .topbar .chip-sub {
    display: none;
  }
  .topbar .chip-profile {
    min-width: 0;
  }
  .topbar .chip-profile > span:not([class]) {
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 接続人数は対戦中に必要な情報ではないので、狭い画面では表示しない */
  #player-count {
    display: none;
  }
  .account-box {
    min-width: 0;
  }

  .battle-layout {
    gap: 10px;
    margin-top: 8px;
  }
  .battle-main.is-2v2 {
    gap: 8px;
  }
  .board-row,
  .battle-main.is-2v2 .board-row {
    gap: 8px;
  }

  /* 席は1列に積む。2対2の席が持つ床（min-width:288px）と最大幅を外して、
     幅を席のぶんだけ確保する */
  .board-row > .board.side,
  .battle-main.is-2v2 .board-row > .board.side {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
    padding: 8px;
  }
  .board-row .side-head {
    min-height: 0;
  }

  /* 席幅が340px前後でもメイン3枚が枠から押し出されない（140pxの床を外す）。
     手番中は床を140pxに保つ行が別にあって上書きするので、そちらも並べて潰す。 */
  .battle-main .slots,
  .battle-main.is-my-turn .slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 敵・仲間席は「攻撃先／支援先を選ぶ席」。絵とLvの行を省いて、
     名前・攻守・HPバーだけに畳んで縦を短くする */
  .battle-main .board.side.foe-seat .card,
  .battle-main .board.side.ally-seat .card {
    padding: 4px;
    gap: 2px;
    min-height: 0;
    font-size: 10px;
  }
  .battle-main .board.side.foe-seat .card-art,
  .battle-main .board.side.ally-seat .card-art,
  .battle-main .board.side.foe-seat .card-kind,
  .battle-main .board.side.ally-seat .card-kind {
    display: none;
  }
  /* 敵の伏せ札は枚数が見出しに既に出ているので、席から伏せ札の行を外して縦を節約する */
  .battle-main .board.side.foe-seat .hand-row,
  .battle-main .board.side.foe-seat .hint {
    display: none;
  }

  /* 操作するのは自分の席なので、狭い画面でも通常の大きさ（絵込み）を残す */
  .battle-main .board.side.your-board .card {
    padding: 6px;
    gap: 3px;
    min-height: 96px;
    font-size: 11px;
  }
  /* 「大きく」がHPバーの文字に重なるので、ボタンのぶんだけ下を空ける。
     席が狭いほどバーの文字がボタンの方へはみ出すため、狭い画面で広めに取る。 */
  .battle-main .board.side.your-board .card,
  .battle-main .hand-row .card.you {
    padding-bottom: 30px;
  }

  /* ログは盤面の下の短い帯。指でスクロールして全文を追う */
  .battle-log .log {
    max-height: 150px;
    overflow-y: auto;
  }
}

/* 称号選択モーダル */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay .panel {
  max-height: 80vh;
  overflow-y: auto;
}

/* --- ガチャ開封の演出（当たった瞬間だけ画面いっぱい光る） ------------------
   開ける前の予告はしない。hit-~ を付けた回だけ全屏が閃き、
   ダブルスーパーレアと限定では虹の筋・紙吹雪・弾ける環・枠名とカード名の帯・画面の揺れがまとめて走る。
   hit-sr / hit-ssr / hit-limited が当たり種別、is-rolling は開封中のうすい光だけ。
   オーバーレイは --fx-bleed ぶん画面外へ伸びるので、揺れても端に隙間ができない
   ＝中の部品は「画面の位置 + --fx-bleed」で置く。
   部品は `.gacha-fx > div` の inset:0 に負けないよう、必ず .gacha-fx を付けたセレクタで書く。 */
.gacha-fx {
  --fx-bleed: 64px;
  position: fixed;
  inset: calc(-1 * var(--fx-bleed));
  z-index: 900;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gacha-fx.is-rolling {
  opacity: 1;
}

.gacha-fx > div {
  position: absolute;
  inset: 0;
}

/* 当たり種別ごとに変数（光・筋・環・文字の色）だけ差し替えて、下の部品に継がせる */
.gacha-fx.hit-sr {
  --fx-text: var(--accent);
  --fx-lamp: var(--accent);
  --fx-ray: rgba(242, 193, 78, 0.6);
  --fx-hit: rgba(242, 193, 78, 0.88);
  --fx-ring: rgba(242, 193, 78, 0.8);
}
.gacha-fx.hit-ssr {
  --fx-text: #ffffff;
  --fx-lamp: var(--ice);
  --fx-ray: rgba(143, 227, 255, 0.85);
  --fx-hit: rgba(170, 235, 255, 0.96);
  --fx-ring: rgba(143, 227, 255, 0.95);
}
.gacha-fx.hit-limited {
  --fx-text: #ffffff;
  --fx-lamp: #ffffff;
  --fx-ray: rgba(255, 255, 255, 0.95);
  --fx-hit: rgba(255, 255, 255, 0.98);
  --fx-ring: rgba(255, 255, 255, 1);
}

/* 盤面を落とす膜。開封中はうっすら、当たった瞬間だけ暗転して光を引き立てる。
   暗転は1回きりのアニメで、あとは開封が続く明るさまで戻って残る。 */
.fx-dim {
  background: radial-gradient(circle at 50% 42%, rgba(10, 13, 30, 0.88), rgba(4, 6, 16, 0.96));
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gacha-fx.is-rolling .fx-dim {
  opacity: 0.12;
}
.gacha-fx.hit-sr .fx-dim {
  animation: fx-storm-soft 1s ease-out forwards;
}
.gacha-fx.hit-ssr .fx-dim {
  animation: fx-storm 1.7s ease-out forwards;
}
.gacha-fx.hit-limited .fx-dim {
  animation: fx-storm 2.1s ease-out forwards;
}
@keyframes fx-storm-soft {
  0% {
    opacity: 0;
  }
  16% {
    opacity: 0.36;
  }
  100% {
    opacity: 0.08;
  }
}
@keyframes fx-storm {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 0.82;
  }
  52% {
    opacity: 0.56;
  }
  100% {
    opacity: 0.12;
  }
}

/* 中心から放射して走る光の筋。当たりでは速く回って色も流す */
.fx-rays {
  background: repeating-conic-gradient(from 0deg at 50% 42%, var(--fx-ray, rgba(242, 193, 78, 0.45)) 0deg 3deg, transparent 3deg 13deg);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
  transform-origin: 50% 42%;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gacha-fx.is-rolling .fx-rays {
  opacity: 0.14;
  animation: fx-spin 12s linear infinite;
}
.gacha-fx.hit-sr .fx-rays {
  animation: fx-spin 3s linear infinite, fx-blaze 1s ease-out forwards;
}
.gacha-fx.hit-ssr .fx-rays {
  animation: fx-spin 1.1s linear infinite, fx-hue 1.4s linear infinite, fx-blaze-big 1.7s ease-out forwards;
}
.gacha-fx.hit-limited .fx-rays {
  animation: fx-spin 0.6s linear infinite, fx-hue 1s linear infinite, fx-blaze-big 2.1s ease-out forwards;
}

@keyframes fx-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fx-hue {
  to {
    filter: hue-rotate(360deg);
  }
}
@keyframes fx-blaze {
  0% {
    opacity: 0;
  }
  14% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.1;
  }
}
@keyframes fx-blaze-big {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  58% {
    opacity: 0.88;
  }
  100% {
    opacity: 0.16;
  }
}

/* 上部のランプ列。当たった瞬間だけ速く点滅する（開封中は伏せる）。
   画面左から右へ流れる列を2枚重ねて、上下の縁を囲む。 */
.gacha-fx .fx-lamps {
  inset: auto 0 auto 0;
  top: calc(var(--fx-bleed) + 6px);
  display: flex;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gacha-fx .fx-lamps + .fx-lamps {
  inset: auto 0 0 0;
  top: auto;
  bottom: calc(var(--fx-bleed) + 6px);
}
.fx-lamps i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fx-lamp, #46506f);
  box-shadow: 0 0 16px var(--fx-lamp, #46506f);
  animation: fx-blink 0.16s steps(2, end) infinite;
}
.fx-lamps i:nth-child(2) {
  animation-delay: 0.02s;
}
.fx-lamps i:nth-child(3) {
  animation-delay: 0.04s;
}
.fx-lamps i:nth-child(4) {
  animation-delay: 0.06s;
}
.fx-lamps i:nth-child(5) {
  animation-delay: 0.08s;
}
.fx-lamps i:nth-child(6) {
  animation-delay: 0.1s;
}
.fx-lamps i:nth-child(7) {
  animation-delay: 0.12s;
}
.fx-lamps i:nth-child(8) {
  animation-delay: 0.14s;
}
.gacha-fx.hit-sr .fx-lamps {
  animation: fx-blaze 1s ease-out forwards;
}
.gacha-fx.hit-ssr .fx-lamps {
  animation: fx-blaze-big 1.7s ease-out forwards;
}
.gacha-fx.hit-limited .fx-lamps {
  animation: fx-blaze-big 2.1s ease-out forwards;
}
@keyframes fx-blink {
  50% {
    opacity: 0.15;
    transform: scale(0.82);
  }
}

/* 上から降りてくる帯。当たり中に走り続ける */
.fx-shutter {
  background: linear-gradient(to bottom, transparent 0 38%, rgba(255, 255, 255, 0.26) 50%, transparent 62% 100%);
  transform: translateY(-100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gacha-fx.hit-sr .fx-shutter {
  animation: fx-sweep 1s ease-in-out infinite, fx-blaze 1s ease-out forwards;
}
.gacha-fx.hit-ssr .fx-shutter {
  animation: fx-sweep 0.85s ease-in-out infinite, fx-blaze-big 1.7s ease-out forwards;
}
.gacha-fx.hit-limited .fx-shutter {
  animation: fx-sweep 0.45s linear infinite, fx-blaze-big 2.1s ease-out forwards;
}
@keyframes fx-sweep {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

/* 降り注ぐ紙吹雪。強い枠ほど速く大量に降る */
.fx-sparks {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.5px, transparent 2.2px),
    radial-gradient(circle, rgba(242, 193, 78, 0.9) 0 2px, transparent 2.8px),
    radial-gradient(circle, rgba(143, 227, 255, 0.9) 0 1.5px, transparent 2.2px),
    radial-gradient(circle, rgba(255, 107, 107, 0.85) 0 2px, transparent 2.8px);
  background-size: 137px 190px, 211px 240px, 173px 210px, 251px 270px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gacha-fx.hit-sr .fx-sparks {
  animation: fx-fall 2.4s linear infinite, fx-blaze 1s ease-out forwards;
}
.gacha-fx.hit-ssr .fx-sparks {
  animation: fx-fall 1.15s linear infinite, fx-blaze-big 1.7s ease-out forwards;
}
.gacha-fx.hit-limited .fx-sparks {
  animation: fx-fall 0.7s linear infinite, fx-blaze-big 2.1s ease-out forwards;
}
@keyframes fx-fall {
  to {
    background-position: 0 190px, 0 240px, 0 210px, 0 270px;
  }
}

/* 中心から弾けて広がる環。3枚をずらして出す（当たった衝撃の伝わり方） */
.fx-rings {
  display: grid;
  place-items: center;
}
.fx-rings i {
  grid-area: 1 / 1;
  width: 34vmax;
  height: 34vmax;
  border-radius: 50%;
  border: 3px solid var(--fx-ring, #ffffff);
  opacity: 0;
}
.fx-rings i:nth-child(2) {
  border-width: 2px;
  animation-delay: 0.14s;
}
.fx-rings i:nth-child(3) {
  border-width: 1px;
  animation-delay: 0.28s;
}
.gacha-fx.hit-sr .fx-rings i {
  animation: fx-ring 0.8s ease-out;
}
.gacha-fx.hit-ssr .fx-rings i {
  animation: fx-ring 1.2s ease-out;
}
.gacha-fx.hit-limited .fx-rings i {
  box-shadow: 0 0 34px var(--fx-ring, #ffffff);
  animation: fx-ring 1.6s ease-out;
}
@keyframes fx-ring {
  0% {
    transform: scale(0.04);
    opacity: 0.95;
  }
  68% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

/* 枠名とカード名を画面いっぱいに大きく見せる帯。当たり種別ぶんだけ残る */
.gacha-fx .fx-plate {
  inset: auto 0 auto 0;
  top: calc(var(--fx-bleed) + 17vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 0 16px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.fx-plate b {
  font-size: clamp(32px, 11vw, 92px);
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: var(--fx-text, var(--text));
  text-shadow: 0 0 26px var(--fx-lamp, transparent), 0 0 60px var(--fx-lamp, transparent), 0 2px 0 rgba(0, 0, 0, 0.7);
}
.fx-plate span {
  font-size: clamp(15px, 4.6vw, 28px);
  color: var(--text);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}
.gacha-fx.hit-sr .fx-plate {
  animation: fx-banner 1s ease-out forwards;
}
.gacha-fx.hit-ssr .fx-plate {
  animation: fx-banner 1.7s ease-out forwards;
}
.gacha-fx.hit-limited .fx-plate {
  animation: fx-banner 2.1s ease-out forwards;
}
@keyframes fx-banner {
  0% {
    opacity: 0;
    transform: scale(2.6);
    filter: blur(10px);
  }
  16% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  74% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 0.96;
    transform: scale(1);
  }
}

/* めくれた瞬間の全屏フラッシュ。強い枠は画面の端まで白く塗りつぶす */
.fx-flash {
  background: radial-gradient(circle at 50% 42%, var(--fx-hit, rgba(255, 255, 255, 0.9)), transparent var(--fx-hit-stop, 58%));
  opacity: 0;
}
.gacha-fx.hit-ssr,
.gacha-fx.hit-limited {
  --fx-hit-stop: 118%;
}
.gacha-fx.hit-sr .fx-flash {
  animation: fx-flash 0.5s ease-out;
}
.gacha-fx.hit-ssr .fx-flash {
  animation: fx-flash-big 1s ease-out;
}
.gacha-fx.hit-limited .fx-flash {
  animation: fx-flash-hold 1.5s ease-out;
}
@keyframes fx-flash {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fx-flash-big {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  40% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fx-flash-hold {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  26% {
    opacity: 0.94;
  }
  62% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
  }
}

/* 当たった時の揺れ。膜ごと震わせるので、強い枠ほど大きく長く揺れる */
@keyframes fx-shake {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  20% {
    transform: translate3d(-7px, 3px, 0);
  }
  40% {
    transform: translate3d(6px, -4px, 0);
  }
  60% {
    transform: translate3d(-5px, 2px, 0);
  }
  80% {
    transform: translate3d(4px, -2px, 0);
  }
}
@keyframes fx-quake {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  12% {
    transform: translate3d(-16px, 9px, 0) scale(1.03);
  }
  28% {
    transform: translate3d(14px, -11px, 0) scale(1.02);
  }
  46% {
    transform: translate3d(-11px, 6px, 0) scale(1.015);
  }
  66% {
    transform: translate3d(8px, -5px, 0) scale(1.01);
  }
  84% {
    transform: translate3d(-4px, 3px, 0) scale(1);
  }
}
.reveal-grid.is-shaken {
  animation: fx-shake 0.42s ease-in-out;
}
.gacha-fx.hit-ssr {
  animation: fx-quake 0.55s ease-in-out;
}
.gacha-fx.hit-limited {
  animation: fx-quake 0.9s ease-in-out;
}

/* めくる直前に、その枠だけが脈打つ。「何も出る」を1枚ごとに見せる */
.flip.is-warn {
  animation: fx-warn 0.3s ease-in-out infinite;
  --warn: var(--accent);
}
.flip.glow-ssr.is-warn {
  --warn: var(--ice);
}
.flip.glow-limited.is-warn {
  --warn: #ffffff;
}
@keyframes fx-warn {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    transform: scale(1.07);
    box-shadow: 0 0 24px var(--warn, var(--accent));
  }
}

/* 上級枠ほどめくり自体をゆっくり回す */
.flip.glow-ssr .flip-inner {
  transition-duration: 0.6s;
}
.flip.glow-limited .flip-inner {
  transition-duration: 0.78s;
}

/* 開け切った締め。上級枠だけを順に光らせる */
.reveal-rush {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.rush-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  opacity: 0;
  animation: fx-rush 0.8s ease-out forwards;
  --rush: var(--muted);
}
.rush-item b {
  font-size: 13px;
}
.rush-item em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
}
.rush-item .card-art-mini {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.rush-item.glow-sr {
  --rush: var(--accent);
  border-color: var(--accent);
}
.rush-item.glow-ssr {
  --rush: var(--accent-2);
  border-color: var(--accent-2);
}
.rush-item.glow-limited {
  --rush: #f4f7ff;
  border-color: #f4f7ff;
}
@keyframes fx-rush {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  55% {
    opacity: 1;
    transform: translateY(0) scale(1.08);
    box-shadow: 0 0 24px var(--rush);
  }
  100% {
    opacity: 1;
    transform: none;
    box-shadow: 0 0 10px var(--rush);
  }
}

/* 動きを抑えたい人は、回る光・降る紙吹雪・揺れだけ止める（閃きと枠名の帯はそのまま） */
@media (prefers-reduced-motion: reduce) {
  .fx-rays,
  .fx-lamps i,
  .fx-rings i,
  .fx-shutter,
  .fx-sparks,
  .reveal-grid.is-shaken,
  .gacha-fx.hit-ssr,
  .gacha-fx.hit-limited,
  .flip.is-warn {
    animation: none !important;
  }
  .gacha-fx.is-rolling .fx-rays {
    opacity: 0.1;
  }
  .gacha-fx.hit-ssr .fx-rays,
  .gacha-fx.hit-limited .fx-rays {
    opacity: 0.55;
  }
  .gacha-fx.hit-ssr .fx-dim,
  .gacha-fx.hit-limited .fx-dim {
    opacity: 0.4;
  }
  .gacha-fx .fx-plate {
    animation: fx-banner-soft 0.5s ease-out forwards !important;
  }
}
@keyframes fx-banner-soft {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.96;
  }
}

/* ===== 対戦演出（WINNER決着・属性別の閃光・観戦） ===== */

/* 強い一撃（1000以上）のときだけ枠の外へ広がる閃光。色はカードの属性（--burst）。
   伏せた相手のサブカード由来の一撃は属性が分からないので、そもそもこの箱が作られない。 */
.fx-burst {
  position: absolute;
  inset: -14%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}

.burst-flare {
  background: radial-gradient(circle, var(--burst) 0%, transparent 62%);
  animation: burst-flare 900ms ease-out forwards;
}

@keyframes burst-flare {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }

  18% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

.burst-bolt {
  background: conic-gradient(from 0deg, transparent 0 12%, var(--burst) 14% 16%, transparent 18% 40%, var(--burst) 42% 45%, transparent 47% 70%, var(--burst) 72% 74%, transparent 76%);
  animation: burst-bolt 760ms ease-out forwards;
}

@keyframes burst-bolt {
  0% {
    opacity: 0;
    transform: scale(0.6) rotate(-8deg);
  }

  15% {
    opacity: 1;
  }

  32% {
    opacity: 0.25;
  }

  48% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.35) rotate(6deg);
  }
}

.burst-ray {
  background: repeating-conic-gradient(from 0deg, var(--burst) 0deg 6deg, transparent 6deg 22deg);
  animation: burst-ray 900ms ease-out forwards;
}

@keyframes burst-ray {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.5);
  }

  20% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: rotate(40deg) scale(1.4);
  }
}

.burst-wave {
  background: radial-gradient(ellipse at 50% 50%, transparent 28%, var(--burst) 45%, transparent 62%);
  animation: burst-wave 900ms ease-out forwards;
}

@keyframes burst-wave {
  0% {
    opacity: 0;
    transform: scaleX(0.3);
  }

  25% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: scaleX(1.6);
  }
}

.burst-shard {
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  background: conic-gradient(from 45deg, var(--burst), transparent 25%, var(--burst) 50%, transparent 75%, var(--burst));
  animation: burst-shard 850ms ease-out forwards;
}

@keyframes burst-shard {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-20deg);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.3) rotate(10deg);
  }
}

.burst-void {
  background: radial-gradient(circle, #04030a 0%, var(--burst) 42%, transparent 70%);
  animation: burst-void 950ms ease-out forwards;
}

@keyframes burst-void {
  0% {
    opacity: 0;
    transform: scale(1.4);
  }

  25% {
    opacity: 0.95;
    transform: scale(0.8);
  }

  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}

/* WINNERゲージが埋まった合図の金色大字。6文字だけを見せ、残り文字数は出さない。
   結果パネル（.overlay の z-index 40）より上に出すので、決着の瞬間が隠れない。 */
.winner-banner {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 1.2vw, 16px);
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 210, 0, 0.2), transparent 62%);
  animation: winner-fade 2200ms ease-out forwards;
}

.winner-banner span {
  font-size: clamp(42px, 11vw, 132px);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #ffd700;
  text-shadow: 0 0 18px rgba(255, 200, 0, 0.85), 0 4px 0 #8a5a00;
  animation: winner-pop 900ms cubic-bezier(0.2, 0.9, 0.2, 1) backwards;
}

.winner-banner span:nth-child(2) {
  animation-delay: 70ms;
}

.winner-banner span:nth-child(3) {
  animation-delay: 140ms;
}

.winner-banner span:nth-child(4) {
  animation-delay: 210ms;
}

.winner-banner span:nth-child(5) {
  animation-delay: 280ms;
}

.winner-banner span:nth-child(6) {
  animation-delay: 350ms;
}

@keyframes winner-pop {
  0% {
    opacity: 0;
    transform: scale(2.4) rotate(-8deg);
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes winner-fade {
  0% {
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* 観戦画面。敵味方すべての席を横に並べる広さだけ確保し、操作口（actionbar・降参）は無い。
   席の広げ方は2対2と同じ規則（幅が足りないとき縦に積む）。 */
.battle-main.is-watch {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.battle-main.is-watch > .board-row,
.battle-main.is-watch > .stage-strip,
.battle-main.is-watch > .vs-mark,
.battle-main.is-watch > .watch-result {
  flex: 1 1 100%;
}

.battle-main.is-watch .board-row {
  gap: 24px;
  align-items: flex-start;
}

.battle-main.is-watch .board-row > .board.side {
  flex: 1 1 0;
  min-width: 288px;
  padding: 8px;
}

.battle-main.is-watch .board-row .card {
  padding: 5px;
  gap: 2px;
  font-size: 10.5px;
  min-height: 92px;
}

.battle-main.is-watch .board-row .slots {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.battle-main.is-watch > .vs-mark {
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.2em;
  opacity: 0.75;
}

.watch-result {
  text-align: center;
}

/* ===== 低スペック用設定 ====================================================
   設定画面のスイッチで <html data-low="1"> がつく。止めるのは「見ていて重いだけの
   やつめき」（背景の回転・属性の閃光・全屏の光・揺れ・脉打ち）だけで、
   対戦の進行・盤面の数字・HPバー・ダメージのふわっとした数字・音はそのまま残す。
   display:none は装飾の層にだけ使う（レイアウトを組む箱には触らない）。 */
html[data-low='1'] body {
  animation: none;
  background-size: 100% 100%;
}

html[data-low='1'] .fx-burst,
html[data-low='1'] .gacha-fx {
  display: none;
}

html[data-low='1'] .card.is-hit,
html[data-low='1'] .card.is-hit-big,
html[data-low='1'] .card.is-attacking,
html[data-low='1'] .reveal-grid.is-shaken,
html[data-low='1'] .flip.is-warn,
html[data-low='1'] .winner-banner,
html[data-low='1'] .winner-banner span,
html[data-low='1'] .fx-rays,
html[data-low='1'] .fx-lamps i,
html[data-low='1'] .fx-rings i,
html[data-low='1'] .fx-shutter,
html[data-low='1'] .fx-sparks {
  animation: none !important;
}