/* ============================================================
   ポーカー・コロシアム — Dark Fantasy Arena Styles
   ============================================================ */

/* ===== 1. :root VARIABLES (from ui-tokens.css) ===== */
:root {
  color-scheme: dark;
  /* palette: 黒・赤・紫・金・くすんだ銀 */
  --color-bg-deep: #0c0a12;
  --color-bg-arena: #141020;
  --color-panel: #1a1526;
  --color-panel-edge: #3a2f52;
  --color-stone: #221d2e;
  --color-gold: #c9a14d;
  --color-gold-bright: #e8c878;
  --color-silver: #8e8a99;
  --color-blood: #8b1e2d;
  --color-danger: #e34a42;
  --color-arcane: #7b4fd0;
  --color-heal: #3fae6a;
  --color-text: #ece7f2;
  --color-text-dim: #a59fb3;
  /* card */
  --card-w: 62px;
  --card-h: 86px;
  --card-gap: 6px;
  --card-face: #f7f3e8;
  --card-red: #c91f2d;
  --card-black: #1c1c1f;
  /* chip rack */
  --chip-rack-w: 184px;
  /* layout */
  --field-h: 232px;
  --center-h: 118px;
  --actions-h: 52px;
  --portrait-w: 120px;
  --app-max-w: 760px;
  /* fx */
  --glow-gold: 0 0 10px rgba(201, 161, 77, 0.55);
  --glow-arcane: 0 0 12px rgba(123, 79, 208, 0.6);
  --transition-fast: 0.2s ease;
}

/* ===== 2. RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--color-text);
  background:
    radial-gradient(ellipse 140% 60% at 50% 0%, #2a1a3e 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 100%, #1a0e20 0%, transparent 60%),
    var(--color-bg-deep);
  background-attachment: fixed;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

h1, h2, h3, p { margin: 0; }

/* ===== 3. LAYOUT ===== */

/* .app */
.app {
  width: min(var(--app-max-w), 100%);
  margin: auto;
  padding: 8px 10px;
  display: grid;
  gap: 6px;
}

/* ===== 4. COMPONENTS ===== */

/* --- .topbar --- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 14px;
  background: var(--color-panel);
  border: 1px solid var(--color-panel-edge);
  border-radius: 10px;
}

.title-block {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.topbar h1 {
  font-size: 1.02rem;
  margin: 0;
  color: var(--color-gold-bright);
  letter-spacing: 0.06em;
}

#stage-round {
  color: var(--color-text-dim);
  font-size: 0.88rem;
}

.coin-badge {
  display: inline-grid;
  place-items: center;
  height: 26px;
  border: 1px solid var(--color-gold);
  border-radius: 6px;
  padding: 0 9px;
  background: #1e1830;
  color: var(--color-gold-bright);
  font-weight: 700;
  font-size: 0.88rem;
}

.top-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-btn {
  border: 1px solid var(--color-gold);
  background: #3a2b18;
  border-radius: 6px;
  padding: 5px 11px;
  color: var(--color-gold-bright);
  font-weight: 600;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.icon-btn:hover {
  background: #52401e;
  box-shadow: var(--glow-gold);
}

.text-btn {
  min-width: 68px;
}

/* --- .field --- */
.field {
  height: var(--field-h);
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr);
  gap: 6px;
  padding: 8px 10px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.02), transparent 40%),
    var(--color-stone);
  border: 1px solid var(--color-panel-edge);
  border-radius: 10px;
  overflow: visible;
}

[data-field="enemy"] {
  border-left: 3px solid var(--color-blood);
}

[data-field="player"] {
  border-left: 3px solid var(--color-gold);
}

/* --- .field-head --- */
.field-head {
  display: grid;
  grid-template-columns: 38px minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.field-name {
  color: var(--color-gold-bright);
  font-size: 0.95rem;
  white-space: nowrap;
}

.hp-block {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.hp-bar {
  height: 12px;
  border-radius: 999px;
  background: #2a1218;
  border: 1px solid rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.hp-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-heal), #d9c45a);
  transition: width 0.45s ease;
}

.hp-bar i.danger {
  background: var(--color-danger);
  animation: hpPulse 0.75s infinite alternate;
}

.hp-text {
  font-size: 0.85rem;
  font-weight: 700;
  min-width: 76px;
  text-align: right;
  color: var(--color-text);
}

.chip-rack {
  display: flex;
  gap: 8px;
  align-items: center;
}

.rack-label {
  font-size: 0.78rem;
  color: var(--color-text-dim);
  white-space: nowrap;
}

.chips {
  display: flex;
  align-items: center;
  width: var(--chip-rack-w);
  flex: none;
  overflow: visible;
}
.chips .chip { flex: none; }
.chips .chip + .chip { margin-left: 6px; }

/* 6枚以上: オーバーラップで固定幅に収める（敵・プレイヤー共通） */
.chips[data-count="6"]  .chip + .chip { margin-left: calc((var(--chip-rack-w) - 32px * 6)  / 5); }
.chips[data-count="7"]  .chip + .chip { margin-left: calc((var(--chip-rack-w) - 32px * 7)  / 6); }
.chips[data-count="8"]  .chip + .chip { margin-left: calc((var(--chip-rack-w) - 32px * 8)  / 7); }
.chips[data-count="9"]  .chip + .chip { margin-left: calc((var(--chip-rack-w) - 32px * 9)  / 8); }
.chips[data-count="10"] .chip + .chip { margin-left: calc((var(--chip-rack-w) - 32px * 10) / 9); }
.chips[data-count="11"] .chip + .chip { margin-left: calc((var(--chip-rack-w) - 32px * 11) / 10); }
.chips[data-count="12"] .chip + .chip { margin-left: calc((var(--chip-rack-w) - 32px * 12) / 11); }

/* --- .field-body --- */
.field-body {
  display: grid;
  grid-template-columns: auto auto var(--portrait-w);
  gap: 14px;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
}

/* --- .zone --- */
.zone {
  display: grid;
  grid-template-rows: 22px var(--card-h);
  gap: 5px;
  padding: 6px 8px 8px;
  border-radius: 8px;
  min-height: 0;
}

.zone-attack {
  background:
    radial-gradient(ellipse at center, rgba(139, 30, 45, 0.28), rgba(139, 30, 45, 0.06) 70%),
    rgba(20, 10, 14, 0.5);
  border: 1px solid rgba(139, 30, 45, 0.55);
}

.zone-character {
  background:
    radial-gradient(ellipse at center, rgba(201, 161, 77, 0.16), rgba(201, 161, 77, 0.04) 70%),
    rgba(18, 14, 8, 0.45);
  border: 1px solid rgba(201, 161, 77, 0.45);
}

.zone-title {
  margin: 0;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  line-height: 22px;
}

.zone-attack .zone-title {
  color: #e08585;
}

.zone-character .zone-title {
  color: var(--color-gold-bright);
}

.zone-title .hand-name {
  color: var(--color-text);
  font-weight: 400;
  font-size: 0.78rem;
  margin-left: 4px;
}

/* --- .slots --- */
.slots {
  display: grid;
  gap: var(--card-gap);
  height: var(--card-h);
}

.slots-2 {
  grid-template-columns: repeat(2, var(--card-w));
}

.slots-5 {
  grid-template-columns: repeat(5, var(--card-w));
}

.card-slot.empty {
  width: var(--card-w);
  height: var(--card-h);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 7px;
}

/* --- .portrait --- */
.portrait {
  position: relative;
  width: var(--portrait-w);
  height: 100%;
  border: 1px solid var(--color-panel-edge);
  border-radius: 10px;
  overflow: hidden;
  background: #15101e;
  display: grid;
  place-items: end center;
  color: var(--color-gold-bright);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* シルエット表現 — 胴体 */
.portrait::before {
  content: "";
  position: absolute;
  inset: 18% 18% 18%;
  border-radius: 48% 48% 16% 16%;
  background: linear-gradient(180deg, #68745c, #2a3326);
  box-shadow: inset 0 0 0 2px rgba(245, 241, 232, 0.08);
}

/* シルエット表現 — 頭部 */
.portrait::after {
  content: "";
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  top: 18%;
  border-radius: 50%;
  background: #c9b47a;
  box-shadow: 0 36px 0 18px rgba(201, 180, 122, 0.18);
}

/* 敵 — 赤系シルエット */
[data-field="enemy"] .portrait::before,
.portrait#enemy-portrait::before {
  background: linear-gradient(180deg, #78514f, #332224);
}

[data-field="enemy"] .portrait::after,
.portrait#enemy-portrait::after {
  background: #d07663;
  box-shadow: 0 36px 0 18px rgba(208, 118, 99, 0.18);
}

.portrait span {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 6px 8px;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
}

/* portrait data-state */
.portrait[data-state="danger"] {
  box-shadow: inset 0 0 0 2px var(--color-danger);
  animation: hpPulse 0.9s infinite alternate;
}

.portrait[data-state="victory"] {
  box-shadow: inset 0 0 0 2px var(--color-gold), var(--glow-gold);
  animation: victoryGlow 0.8s ease;
}

.portrait[data-state="defeat"] {
  filter: grayscale(0.85) brightness(0.6);
}

/* --- CARD --- */
.card {
  display: grid;
  align-content: space-between;
  padding: 7px 6px;
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  background-color: var(--card-face);
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: box-shadow var(--transition-fast);
}

.card-rank {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  justify-self: start;
}

.card-suit {
  align-self: flex-end;
  justify-self: flex-end;
  font-size: 0.95rem;
  line-height: 1;
}

.card.hearts,
.card.diamonds {
  color: var(--card-red);
}

.card.spades,
.card.clubs {
  color: var(--card-black);
}

button.card {
  cursor: pointer;
  font: inherit;
}

div.card {
  cursor: default;
}

button.card.face {
  cursor: pointer;
}

.card.selected {
  box-shadow: inset 0 0 0 3px var(--color-gold), var(--glow-gold);
}

button.card:hover:not(.selected) {
  box-shadow: inset 0 0 0 2px var(--color-gold-bright);
}

/* カード裏面 — 現行styles.css の実装を流用、色を var(--color-blood) 系に統一 */
.card.back {
  position: relative;
  border-color: #e8dfc8;
  background: #f2eadb;
  overflow: hidden;
  cursor: default;
  pointer-events: none;
}

.card.back::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid var(--color-blood);
  border-radius: 5px;
  background:
    radial-gradient(circle at 25% 25%, var(--color-blood) 0 4px, transparent 5px),
    radial-gradient(circle at 75% 25%, var(--color-blood) 0 4px, transparent 5px),
    radial-gradient(circle at 25% 75%, var(--color-blood) 0 4px, transparent 5px),
    radial-gradient(circle at 75% 75%, var(--color-blood) 0 4px, transparent 5px),
    repeating-linear-gradient(45deg, rgba(139, 30, 45, 0.22) 0 4px, transparent 4px 8px),
    #efe4cf;
}

.card.back::after {
  content: "";
  position: absolute;
  inset: 19px 15px;
  border: 1px solid rgba(139, 30, 45, 0.75);
  border-radius: 50%;
}

.card.back i {
  position: absolute;
  inset: 32% 30%;
  border: 2px solid var(--color-blood);
  transform: rotate(45deg);
  pointer-events: none;
}

/* --- CHIP --- */
/* カジノチップ: クレイ材質・エッジスポット・中央インレイ */
.chip {
  display: inline-grid;
  place-items: center;
  position: relative;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  font-weight: 900;
  font-size: 0.92rem;
  line-height: 1;
  border: 1px solid rgba(10, 8, 14, 0.6);
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.32), transparent 45%),
    radial-gradient(circle at center, #f3e9d4 0 53%, transparent 54%),
    radial-gradient(circle at center, transparent 0 56%, rgba(0, 0, 0, 0.28) 58% 62%, transparent 64%),
    repeating-conic-gradient(from -8deg, #f3e9d4 0deg 16deg, var(--chip-accent) 16deg 45deg),
    var(--chip-accent);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35),
    0 2px 0 rgba(0, 0, 0, 0.5),
    0 3px 5px rgba(0, 0, 0, 0.45);
}

.chips .chip:hover,
.chips .chip:focus-visible { z-index: 5; transform: translateY(-4px); }
.chips .chip.queued { z-index: 4; transform: translateY(-4px); }

.chip.spades   { --chip-accent: #3d4a8c; color: #20242e; }
.chip.clubs    { --chip-accent: #2e7d4f; color: #20242e; }
.chip.diamonds { --chip-accent: #b3382c; color: #c2242e; }
.chip.hearts   { --chip-accent: #b3446c; color: #c2242e; }

.chip.queued {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 161, 77, 0.45), var(--glow-gold), 0 2px 0 rgba(0, 0, 0, 0.5);
}

button.chip.selectable {
  cursor: pointer;
}

.chip.none {
  color: var(--color-text-dim);
}

/* チップ ツールチップ — チップの下側に表示 (上側だとヘッダーと重なる) */
.chip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  z-index: 30;
  width: max-content;
  max-width: 230px;
  transform: translate(-50%, -4px);
  opacity: 0;
  pointer-events: none;
  border: 1px solid var(--color-gold);
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--color-panel);
  color: var(--color-text);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25;
  white-space: normal;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.chip:hover::after,
.chip:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- .center-band --- */
.center-band {
  height: var(--center-h);
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
  padding: 8px 10px;
  background: var(--color-panel);
  border: 1px solid var(--color-panel-edge);
  border-radius: 10px;
  overflow: hidden;
}

.discard-row {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  min-height: 0;
}

.discard-box {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 3px 8px;
  overflow: hidden;
}

.discard-label {
  display: block;
  font-size: 0.72rem;
  color: var(--color-text-dim);
  margin-bottom: 2px;
}

.mini-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mini-card {
  font-style: normal;
  background: var(--card-face);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--card-black);
}

.mini-card.hearts,
.mini-card.diamonds {
  color: var(--card-red);
}

.mini-card.spades,
.mini-card.clubs {
  color: var(--card-black);
}

.message-lines {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid rgba(201, 161, 77, 0.25);
  padding-left: 12px;
}

/* 行数が少ないときは中央寄せ、溢れたら先頭からスクロール可能（safe centering） */
.msg-line:first-child { margin-top: auto; }
.msg-line:last-child { margin-bottom: auto; }

.msg-line {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--color-text);
}

.msg-line.msg-strong {
  color: var(--color-gold-bright);
  font-weight: 700;
}

.msg-line.msg-danger {
  color: var(--color-danger);
  font-weight: 700;
}

/* --- .actions --- */
.actions {
  height: var(--actions-h);
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-panel);
  border: 1px solid var(--color-panel-edge);
  border-radius: 10px;
}

.actions button {
  min-width: 200px;
  padding: 9px 18px;
  border: 1px solid var(--color-gold);
  background: #3a2b18;
  color: var(--color-gold-bright);
  font-weight: 700;
  border-radius: 8px;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.actions button:hover {
  background: #52401e;
  box-shadow: 0 0 8px rgba(201, 161, 77, 0.35);
}

/* --- MODAL --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(5, 3, 10, 0.66);
  padding: 18px;
}

.shop-modal {
  width: min(640px, 100%);
  max-height: min(88vh, 820px);
  overflow: auto;
  border: 1px solid var(--color-gold);
  border-radius: 10px;
  background: var(--color-panel);
  padding: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.info-modal {
  width: min(560px, 100%);
  max-height: min(82vh, 720px);
  overflow: auto;
  border: 1px solid var(--color-gold);
  border-radius: 10px;
  background: var(--color-panel);
  padding: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.modal-head h2 {
  margin: 0;
}

h2 {
  margin: 8px 0 12px;
  font-size: 1.1rem;
  color: var(--color-gold-bright);
}

.pay-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
}

.pay-table td {
  border-bottom: 1px solid var(--color-panel-edge);
  padding: 7px 4px;
  color: var(--color-text);
}

.pay-table td:last-child {
  text-align: right;
  color: var(--color-gold-bright);
  font-weight: 700;
}

.rule-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  border: 1px solid var(--color-panel-edge);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 14px;
}

.rule-grid span {
  color: var(--color-text-dim);
}

.rule-grid strong {
  color: var(--color-text);
}

/* ショップ 2カラムレイアウト */
.shop-head {
  margin-bottom: 10px;
}

.shop-head h2 {
  margin: 0 0 4px;
}

.shop-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}

.shop-left,
.shop-right {
  min-width: 0;
}

.shop-section-title {
  margin: 0 0 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-gold-bright);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* offer-list: 縦並び */
.offer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 旧 offer-grid は残す（後方互換用・未使用になる） */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.offer {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 4px;
  text-align: left;
  background: #221a30;
  border: 1px solid var(--color-gold);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.offer:hover:not(:disabled) {
  background: #2e2240;
  box-shadow: var(--glow-gold);
}

.offer strong {
  font-size: 0.9rem;
  color: var(--color-text);
}

.offer-desc {
  font-size: 0.78rem;
  color: var(--color-text-dim);
  font-weight: 400;
  white-space: normal;
  line-height: 1.3;
}

.offer-cost {
  font-size: 0.82rem;
  color: var(--color-gold-bright);
  font-weight: 600;
}

.offer-purchased {
  color: var(--color-silver);
  font-weight: 400;
  font-style: italic;
}

.offer-done {
  border-color: var(--color-panel-edge);
  background: #1a1520;
}

.offer:disabled {
  opacity: 0.5;
  cursor: default;
}

.clear-bonus {
  color: var(--color-gold-bright);
  font-weight: 700;
  margin: 0 0 10px;
}

.shop-coins {
  color: var(--color-gold-bright);
  font-weight: 700;
  margin: 0 0 10px;
}

/* ペイテーブル強化アニメーション */
@keyframes payBump {
  0%   { color: var(--color-gold-bright); transform: scale(1); text-shadow: none; }
  35%  { color: var(--color-gold-bright); transform: scale(1.25);
         text-shadow: 0 0 8px rgba(232, 200, 120, 0.9), 0 0 18px rgba(201, 161, 77, 0.6); }
  100% { color: var(--color-gold-bright); transform: scale(1); text-shadow: none; }
}

.pay-value.pay-bump {
  animation: payBump 0.8s ease-out both;
  display: inline-block;
}

.modal-next {
  width: 100%;
  min-width: 200px;
  padding: 9px 18px;
  border: 1px solid var(--color-gold);
  background: #3a2b18;
  color: var(--color-gold-bright);
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.modal-next:hover {
  background: #52401e;
  box-shadow: 0 0 8px rgba(201, 161, 77, 0.35);
}

/* --- .defeat-modal --- */
@keyframes defeatFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.defeat-modal {
  width: min(480px, 100%);
  border: 2px solid var(--color-blood);
  border-radius: 10px;
  background: var(--color-panel);
  padding: 28px 24px 24px;
  box-shadow: 0 0 40px rgba(139, 30, 45, 0.35), 0 24px 80px rgba(0, 0, 0, 0.6);
  animation: defeatFadeIn 0.25s ease both;
}

.defeat-modal h2 {
  color: var(--color-blood);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  text-shadow: 0 0 12px rgba(139, 30, 45, 0.6);
}

.defeat-info {
  color: var(--color-text-dim);
  font-size: 0.9rem;
  margin: 0 0 20px;
}

.defeat-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.defeat-actions .modal-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-color: var(--color-gold);
}

.defeat-actions .modal-next small {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-dim);
}

.modal-sub {
  width: 100%;
  min-width: 200px;
  padding: 9px 18px;
  border: 1px solid var(--color-panel-edge);
  background: #221a2e;
  color: var(--color-silver);
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.modal-sub:hover {
  background: #2e2240;
  box-shadow: 0 0 6px rgba(142, 138, 153, 0.2);
}

.modal-sub small {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-dim);
}

/* ===== 5. KEYFRAMES (from ui-tokens.css) ===== */

@keyframes hpPulse {
  from { opacity: 1; }
  to   { opacity: 0.45; }
}

@keyframes cardReveal {
  from {
    opacity: 0;
    filter: brightness(2);
  }
  to {
    opacity: 1;
    filter: brightness(1);
  }
}

@keyframes chipFlash {
  0%   { filter: brightness(1); }
  35%  { filter: brightness(1.9); }
  100% { filter: brightness(1); }
}

@keyframes strongHand {
  0%   { box-shadow: 0 0 0 0 rgba(201, 161, 77, 0); }
  40%  { box-shadow: var(--glow-gold), 0 0 24px rgba(232, 200, 120, 0.5); }
  100% { box-shadow: none; }
}

@keyframes victoryGlow {
  from { filter: brightness(1.6); }
  to   { filter: brightness(1); }
}

@keyframes impactFlash {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(1.7) saturate(1.4); }
  100% { filter: brightness(1); }
}

/* ===== 6. ANIMATION APPLICATION CLASSES ===== */

.card.anim-reveal {
  animation: cardReveal 0.35s ease;
}

.chip.anim-fired {
  animation: chipFlash 0.5s ease;
}

.zone-character.anim-strong {
  animation: strongHand 0.8s ease;
}

.hp-bar.anim-impact {
  animation: impactFlash 0.45s ease;
}

.field.anim-upset {
  animation: victoryGlow 1s ease;
}

/* ===== 7. RESPONSIVE ===== */

@media (max-width: 700px) {
  .app {
    padding: 6px 6px;
  }

  /* center-band 高さ固定解除 */
  .center-band {
    height: auto;
    grid-template-columns: 1fr;
  }

  /* fieldの高さ固定解除・縦積み */
  .field {
    height: auto;
  }

  .field-head {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }

  .chip-rack {
    grid-column: 1 / -1;
  }

  /* field-body 縦積み、portrait 縮小 */
  .field-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-content: start;
  }

  .portrait {
    display: none;
  }

  .slots-5 {
    grid-template-columns: repeat(5, var(--card-w));
  }

  .offer-grid {
    grid-template-columns: 1fr;
  }

  .discard-row {
    grid-template-rows: auto auto;
  }

  .topbar {
    flex-wrap: wrap;
    gap: 6px;
  }

  .title-block {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* === Battle FX === */

/* .app に position:relative を付与（FXレイヤーの基点） */
.app {
  position: relative;
}

/* FXレイヤー本体 — モーダル(z-index:20)より下の 19 */
#fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 19;
  overflow: hidden;
}

/* HPバードレイン演出用 transition */
#enemy-hp-fill,
#player-hp-fill {
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ── シェイク ──────────────────────────────────────────────── */
@keyframes fxShake {
  0%   { transform: translateX(0); }
  12%  { transform: translateX(-5px); }
  25%  { transform: translateX(4px); }
  37%  { transform: translateX(-4px); }
  50%  { transform: translateX(3px); }
  62%  { transform: translateX(-3px); }
  75%  { transform: translateX(2px); }
  87%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

.fx-shake {
  animation: fxShake 350ms ease-out 1;
}

/* ── ダメージポップ ───────────────────────────────────────── */
@keyframes dmgPop {
  0%   { opacity: 1;   transform: translate(-50%, 0); }
  70%  { opacity: 0.8; transform: translate(-50%, -28px); }
  100% { opacity: 0;   transform: translate(-50%, -44px); }
}

.dmg-pop {
  position: absolute;
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1;
  white-space: nowrap;
  animation: dmgPop 900ms ease-out forwards;
  transform: translate(-50%, 0);
}

.dmg-pop.dmg {
  color: var(--color-danger);
  text-shadow: 0 0 8px rgba(227, 74, 66, 0.7), 0 0 20px rgba(227, 74, 66, 0.4);
}

.dmg-pop.heal {
  color: var(--color-heal);
  text-shadow: 0 0 8px rgba(63, 174, 106, 0.7), 0 0 20px rgba(63, 174, 106, 0.4);
}

/* ── 結果バナー ──────────────────────────────────────────── */
@keyframes bannerSlamIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
  55%  { opacity: 1; transform: translate(-50%, -50%) scale(0.96); }
  75%  { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes bannerSlamInHeavy {
  0%   { opacity: 0; transform: translate(-50%, -44%) scale(2.4); }
  55%  { opacity: 1; transform: translate(-50%, -52%) scale(0.95); }
  75%  { opacity: 1; transform: translate(-50%, -49%) scale(1.03); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes bannerFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

.result-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 36px 16px;
  border-radius: 12px;
  white-space: nowrap;
  animation:
    bannerSlamIn 360ms cubic-bezier(0.18, 1.4, 0.4, 1) forwards,
    bannerFadeOut 300ms ease 1.1s forwards;
}

.result-banner.lose,
.result-banner.defeat {
  animation:
    bannerSlamInHeavy 380ms cubic-bezier(0.18, 1.4, 0.4, 1) forwards,
    bannerFadeOut 300ms ease 1.1s forwards;
}

/* バナー共通テキスト */
.banner-main {
  display: block;
  font-size: 3.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
}

.banner-sub {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.4em;
  color: var(--color-text-dim);
}

/* win — ゴールド */
.result-banner.win {
  background: rgba(12, 10, 18, 0.72);
  border: 1px solid rgba(201, 161, 77, 0.55);
  box-shadow: 0 0 40px rgba(201, 161, 77, 0.25);
}

.result-banner.win .banner-main {
  background: linear-gradient(160deg, var(--color-gold-bright) 0%, var(--color-gold) 60%, #b8860b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(232, 200, 120, 0.7)) drop-shadow(0 0 18px rgba(201, 161, 77, 0.5));
}

/* victory — ゴールド + 放射光 */
.result-banner.victory {
  background: rgba(12, 10, 18, 0.72);
  border: 1px solid rgba(201, 161, 77, 0.65);
  box-shadow: 0 0 60px rgba(201, 161, 77, 0.3);
  overflow: visible;
}

.result-banner.victory .banner-main {
  background: linear-gradient(160deg, #fff8d0 0%, var(--color-gold-bright) 40%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(255, 240, 160, 0.8)) drop-shadow(0 0 22px rgba(201, 161, 77, 0.6));
}

@keyframes radialRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.result-banner.victory::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 30%, rgba(201, 161, 77, 0.08) 50%, transparent 70%),
    conic-gradient(
      rgba(232, 200, 120, 0.18) 0deg,
      transparent 30deg,
      rgba(201, 161, 77, 0.12) 60deg,
      transparent 90deg,
      rgba(232, 200, 120, 0.18) 120deg,
      transparent 150deg,
      rgba(201, 161, 77, 0.12) 180deg,
      transparent 210deg,
      rgba(232, 200, 120, 0.18) 240deg,
      transparent 270deg,
      rgba(201, 161, 77, 0.12) 300deg,
      transparent 330deg,
      rgba(232, 200, 120, 0.18) 360deg
    );
  animation: radialRotate 4s linear infinite;
  z-index: -1;
  pointer-events: none;
}

/* lose — 深紅 */
.result-banner.lose {
  background: rgba(10, 5, 8, 0.76);
  border: 1px solid rgba(139, 30, 45, 0.55);
  box-shadow: 0 0 40px rgba(139, 30, 45, 0.25);
}

.result-banner.lose .banner-main {
  color: var(--color-danger);
  text-shadow:
    0 0 8px rgba(227, 74, 66, 0.6),
    0 0 20px rgba(139, 30, 45, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.8);
}

/* defeat — 深紅・重め */
.result-banner.defeat {
  background: rgba(10, 5, 8, 0.82);
  border: 1px solid rgba(139, 30, 45, 0.6);
  box-shadow: 0 0 50px rgba(100, 10, 20, 0.35);
}

.result-banner.defeat .banner-main {
  color: #c73a34;
  text-shadow:
    0 0 10px rgba(199, 58, 52, 0.5),
    0 0 24px rgba(100, 10, 20, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.9);
}

/* draw — くすんだ銀 */
.result-banner.draw {
  background: rgba(12, 10, 18, 0.72);
  border: 1px solid rgba(142, 138, 153, 0.4);
  box-shadow: 0 0 24px rgba(100, 95, 112, 0.2);
}

.result-banner.draw .banner-main {
  color: var(--color-silver);
  text-shadow:
    0 0 8px rgba(142, 138, 153, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.7);
}

/* ── 火花 ────────────────────────────────────────────────── */
@keyframes sparkFly {
  0%   { opacity: 1;   transform: translate(0, 0) scale(1); }
  60%  { opacity: 0.8; transform: translate(calc(var(--dx) * 0.7), calc(var(--dy) * 0.7)) scale(0.8); }
  100% { opacity: 0;   transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

.spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-gold-bright);
  box-shadow: 0 0 4px 2px rgba(232, 200, 120, 0.6);
  margin: -2px 0 0 -2px;
  font-style: normal;
  animation: sparkFly 600ms ease-out var(--sd, 0ms) forwards;
}

/* ── メッセージ行の段階開示 ──────────────────────────────── */
.msg-line {
  transition: opacity 0.25s ease;
}

.msg-line.msg-hidden {
  opacity: 0;
}

/* ── 第1幕バナー（stage1）: フェードアウト開始を 0.75s に短縮 ── */
.result-banner.stage1 {
  animation:
    bannerSlamIn 360ms cubic-bezier(0.18, 1.4, 0.4, 1) forwards,
    bannerFadeOut 300ms ease 0.75s forwards;
}

.result-banner.stage1.lose,
.result-banner.stage1.defeat {
  animation:
    bannerSlamInHeavy 380ms cubic-bezier(0.18, 1.4, 0.4, 1) forwards,
    bannerFadeOut 300ms ease 0.75s forwards;
}

/* ── 攻撃札ランジ ─────────────────────────────────────────── */
@keyframes cardAttackUp {
  0%   { transform: translateY(0)      scale(1);    box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
  35%  { transform: translateY(-22px)  scale(1.08); box-shadow: 0 0 14px rgba(227,74,66,0.9), 0 0 28px rgba(201,161,77,0.6); filter: brightness(1.25); }
  55%  { transform: translateY(-16px)  scale(1.05); box-shadow: 0 0 10px rgba(227,74,66,0.7), 0 0 20px rgba(201,161,77,0.45); }
  100% { transform: translateY(0)      scale(1);    box-shadow: 0 4px 8px rgba(0,0,0,0.3); filter: brightness(1); }
}
@keyframes cardAttackDown {
  0%   { transform: translateY(0)     scale(1);    box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
  35%  { transform: translateY(22px)  scale(1.08); box-shadow: 0 0 14px rgba(227,74,66,0.9), 0 0 28px rgba(139,30,45,0.7); filter: brightness(1.25); }
  55%  { transform: translateY(16px)  scale(1.05); box-shadow: 0 0 10px rgba(227,74,66,0.7), 0 0 20px rgba(139,30,45,0.5); }
  100% { transform: translateY(0)     scale(1);    box-shadow: 0 4px 8px rgba(0,0,0,0.3); filter: brightness(1); }
}
.card.anim-attack-up   { animation: cardAttackUp   480ms cubic-bezier(0.3, 0, 0.4, 1) both; z-index: 6; }
.card.anim-attack-down { animation: cardAttackDown 480ms cubic-bezier(0.3, 0, 0.4, 1) both; z-index: 6; }

/* 攻撃側ゾーンの瞬間発光 */
@keyframes zoneAttackFlash {
  0%   { box-shadow: none; }
  35%  { box-shadow: 0 0 18px rgba(227, 74, 66, 0.55), inset 0 0 12px rgba(227, 74, 66, 0.25); }
  100% { box-shadow: none; }
}
.zone-attack.anim-attacking { animation: zoneAttackFlash 520ms ease-out both; }

/* ── 敵カード順次フリップ ─────────────────────────────────── */
.slots { perspective: 700px; }

/* ── 裏面化されたフェイスカード（.flip-cover / .face-down 共用） ── */
/* .card.back と完全同一の見た目 */
.card.face.flip-cover:not(.unmask),
.card.face.face-down:not(.unmask) {
  border-color: #e8dfc8;
  background: #f2eadb;
  overflow: hidden;
}

/* ランク/スートの文字を透明化 */
.card.face.flip-cover:not(.unmask) .card-rank,
.card.face.flip-cover:not(.unmask) .card-suit,
.card.face.face-down:not(.unmask) .card-rank,
.card.face.face-down:not(.unmask) .card-suit {
  color: transparent;
}

/* 内枠線 + 四隅ドット + 斜線パターン（.card.back::before と同一） */
.card.face.flip-cover:not(.unmask)::before,
.card.face.face-down:not(.unmask)::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid var(--color-blood);
  border-radius: 5px;
  background:
    radial-gradient(circle at 25% 25%, var(--color-blood) 0 4px, transparent 5px),
    radial-gradient(circle at 75% 25%, var(--color-blood) 0 4px, transparent 5px),
    radial-gradient(circle at 25% 75%, var(--color-blood) 0 4px, transparent 5px),
    radial-gradient(circle at 75% 75%, var(--color-blood) 0 4px, transparent 5px),
    repeating-linear-gradient(45deg, rgba(139, 30, 45, 0.22) 0 4px, transparent 4px 8px),
    #efe4cf;
  z-index: 1;
  pointer-events: none;
}

/* 中央楕円（.card.back::after と同一） */
.card.face.flip-cover:not(.unmask)::after,
.card.face.face-down:not(.unmask)::after {
  content: "";
  position: absolute;
  inset: 19px 15px;
  border: 1px solid rgba(139, 30, 45, 0.75);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}

/* 中央菱形（.card.back i と同一。card-suit::after で実現） */
.card.face.flip-cover:not(.unmask) .card-suit::after,
.card.face.face-down:not(.unmask) .card-suit::after {
  content: "";
  position: absolute;
  inset: 32% 30%;
  border: 2px solid var(--color-blood);
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 3;
}

/* hand-core の金リングが裏面に出ないように抑制 */
.card.face.flip-cover.hand-core:not(.unmask),
.card.face.face-down.hand-core:not(.unmask) {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 裏面カードのクリック可能ヒント（交換選択時） */
button.card.face.face-down:not(.unmask):hover {
  box-shadow: inset 0 0 0 2px var(--color-gold-bright);
}

/* ── フリップ回転アニメーション ─────────────────────────────── */
@keyframes cardFlip {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(88deg); }
  100% { transform: rotateY(0deg); }
}
.card.face.flipping           { animation: cardFlip 600ms ease-in-out both; }
/* 高速フリップ（380ms）: ディール・交換・トグル用 */
.card.face.flipping.flip-fast { animation: cardFlip 380ms ease-in-out both; }

/* 役名の一時隠し（めくり完了まで） */
.hand-name-hidden { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .card.face.flipping      { animation: none; }
  .card.face.flipping.flip-fast { animation: none; }
}

/* ── 役構成カード (hand-core / hand-fwd) ─────────────────── */

/* 役構成カード: 開示中は常時ゴールドリングで識別 */
.card.hand-core {
  box-shadow: inset 0 0 0 2px var(--color-gold), 0 0 10px rgba(201, 161, 77, 0.35), 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* 第1幕: 前出し状態（fx.jsが付け外し） */
.card.hand-core { transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2), filter 0.3s ease; }
[data-field="player"] .card.hand-core.hand-fwd { transform: translateY(-22px); }
[data-field="enemy"]  .card.hand-core.hand-fwd { transform: translateY(22px); }
.card.hand-core.hand-fwd {
  z-index: 6;
  filter: brightness(1.12) saturate(1.15);
  box-shadow: inset 0 0 0 2px var(--color-gold-bright), 0 0 16px rgba(232, 200, 120, 0.7), 0 0 30px rgba(201, 161, 77, 0.4);
}

/* ── reduced-motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fx-shake {
    animation: none;
  }

  .spark {
    animation: none;
    opacity: 0;
  }

  .card.anim-attack-up, .card.anim-attack-down, .zone-attack.anim-attacking {
    animation: none;
  }

  .card.hand-core { transition: none; }

  .result-banner,
  .result-banner.lose,
  .result-banner.defeat {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ── チップ効果対象カード: 魔法陣＋火炎 ──────────────────── */
.card.face.chip-target:not(.flip-cover):not(.face-down) {
  position: relative;
  z-index: 3;
  animation: chipTargetGlow 1.4s ease-in-out infinite;
}
.card.face.chip-target.spades   { --flame-glow: rgba(123, 79, 208, 0.85); --flame-glow-soft: rgba(123, 79, 208, 0.40); }
.card.face.chip-target.diamonds { --flame-glow: rgba(227, 108, 66, 0.85); --flame-glow-soft: rgba(227, 108, 66, 0.40); }
.card.face.chip-target.hearts   { --flame-glow: rgba(63, 174, 106, 0.85); --flame-glow-soft: rgba(63, 174, 106, 0.40); }
.card.face.chip-target.clubs    { --flame-glow: rgba(201, 161, 77, 0.85); --flame-glow-soft: rgba(201, 161, 77, 0.40); }

@keyframes chipTargetGlow {
  0%, 100% { box-shadow: 0 0 10px var(--flame-glow-soft), 0 4px 8px rgba(0, 0, 0, 0.3); }
  50%      { box-shadow: 0 0 20px var(--flame-glow), 0 0 34px var(--flame-glow-soft), 0 4px 8px rgba(0, 0, 0, 0.3); }
}

/* 魔法陣: カード中央で回転する六芒星 */
.card.face.chip-target:not(.flip-cover):not(.face-down)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  background: var(--flame-glow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='white' stroke-width='4'%3E%3Ccircle cx='50' cy='50' r='46'/%3E%3Cpolygon points='50,8 86.4,71 13.6,71'/%3E%3Cpolygon points='50,92 13.6,29 86.4,29'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='white' stroke-width='4'%3E%3Ccircle cx='50' cy='50' r='46'/%3E%3Cpolygon points='50,8 86.4,71 13.6,71'/%3E%3Cpolygon points='50,92 13.6,29 86.4,29'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 4px var(--flame-glow));
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
  animation: hexSpin 8s linear infinite;
}
@keyframes hexSpin {
  to { transform: rotate(360deg); }
}

/* 中央魔法陣の上でも四隅のテキストが読めるように */
.card.face.chip-target .card-rank,
.card.face.chip-target .card-suit {
  position: relative;
  z-index: 1;
}

/* 火炎: カード縁でメラメラ揺れる */
.card.face.chip-target:not(.flip-cover):not(.face-down)::after {
  content: "";
  position: absolute;
  inset: -8px -5px -3px;
  border-radius: 10px;
  pointer-events: none;
  background:
    radial-gradient(9px 18px at 18% 100%, var(--flame-glow) 0%, transparent 70%),
    radial-gradient(12px 24px at 42% 103%, var(--flame-glow-soft) 0%, transparent 72%),
    radial-gradient(9px 20px at 66% 100%, var(--flame-glow) 0%, transparent 70%),
    radial-gradient(7px 15px at 88% 101%, var(--flame-glow-soft) 0%, transparent 70%),
    radial-gradient(6px 12px at 5% 80%, var(--flame-glow-soft) 0%, transparent 75%),
    radial-gradient(6px 12px at 97% 78%, var(--flame-glow-soft) 0%, transparent 75%);
  filter: blur(1px);
  opacity: 0.85;
  animation: flameFlicker 0.65s ease-in-out infinite alternate;
}
@keyframes flameFlicker {
  from { transform: scaleY(1) translateY(0); opacity: 0.65; }
  to   { transform: scaleY(1.28) translateY(-3px); opacity: 1; }
}

/* 攻撃ランジ中: 六芒星が高速回転＋強発光 */
.card.anim-attack-up.chip-target:not(.flip-cover)::before,
.card.anim-attack-down.chip-target:not(.flip-cover)::before {
  animation: hexSpin 0.6s linear infinite, hexFlare 480ms ease-out both;
}
@keyframes hexFlare {
  0%   { opacity: 0.9;  filter: drop-shadow(0 0 4px var(--flame-glow)); }
  40%  { opacity: 1;    filter: drop-shadow(0 0 12px var(--flame-glow)) brightness(1.4); }
  100% { opacity: 0.95; filter: drop-shadow(0 0 6px var(--flame-glow)); }
}

/* ── ♦先制ストライク（別名キーフレーム: 同一要素がメイン攻撃と連続しても再生される） */
@keyframes cardChipStrikeUp {
  0%   { transform: translateY(0)      scale(1);    box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
  35%  { transform: translateY(-22px)  scale(1.08); box-shadow: 0 0 14px rgba(227,74,66,0.9), 0 0 28px rgba(201,161,77,0.6); filter: brightness(1.25); }
  55%  { transform: translateY(-16px)  scale(1.05); box-shadow: 0 0 10px rgba(227,74,66,0.7), 0 0 20px rgba(201,161,77,0.45); }
  100% { transform: translateY(0)      scale(1);    box-shadow: 0 4px 8px rgba(0,0,0,0.3); filter: brightness(1); }
}
@keyframes cardChipStrikeDown {
  0%   { transform: translateY(0)     scale(1);    box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
  35%  { transform: translateY(22px)  scale(1.08); box-shadow: 0 0 14px rgba(227,74,66,0.9), 0 0 28px rgba(139,30,45,0.7); filter: brightness(1.25); }
  55%  { transform: translateY(16px)  scale(1.05); box-shadow: 0 0 10px rgba(227,74,66,0.7), 0 0 20px rgba(139,30,45,0.5); }
  100% { transform: translateY(0)     scale(1);    box-shadow: 0 4px 8px rgba(0,0,0,0.3); filter: brightness(1); }
}
.card.anim-chip-strike-up   { animation: cardChipStrikeUp   480ms cubic-bezier(0.3, 0, 0.4, 1) both; z-index: 6; }
.card.anim-chip-strike-down { animation: cardChipStrikeDown 480ms cubic-bezier(0.3, 0, 0.4, 1) both; z-index: 6; }

/* ── ♥回復アクション: 浮き上がり＋緑グロー */
@keyframes cardHealPulse {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-12px) scale(1.04); box-shadow: 0 0 18px rgba(63, 174, 106, 0.9), 0 0 32px rgba(63, 174, 106, 0.5); filter: brightness(1.2); }
  100% { transform: translateY(0); filter: brightness(1); }
}
.card.anim-heal { animation: cardHealPulse 560ms ease-out both; z-index: 6; }

/* チップアクション中も六芒星が高速回転＋強発光 */
.card.anim-chip-strike-up.chip-target:not(.flip-cover)::before,
.card.anim-chip-strike-down.chip-target:not(.flip-cover)::before,
.card.anim-heal.chip-target:not(.flip-cover)::before {
  animation: hexSpin 0.6s linear infinite, hexFlare 480ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .card.face.chip-target,
  .card.face.chip-target:not(.flip-cover):not(.face-down)::before,
  .card.face.chip-target:not(.flip-cover):not(.face-down)::after { animation: none; }
  .card.anim-attack-up.chip-target:not(.flip-cover)::before,
  .card.anim-attack-down.chip-target:not(.flip-cover)::before    { animation: none; }
  .card.anim-chip-strike-up, .card.anim-chip-strike-down, .card.anim-heal { animation: none; }
  .card.anim-chip-strike-up.chip-target:not(.flip-cover)::before,
  .card.anim-chip-strike-down.chip-target:not(.flip-cover)::before,
  .card.anim-heal.chip-target:not(.flip-cover)::before           { animation: none; }
}

/* ── スタート画面 ─────────────────────────────────────────── */
#start-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, #1e1438 0%, transparent 70%),
    radial-gradient(ellipse 140% 60% at 50% 0%, #2a1a3e 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 100%, #1a0e20 0%, transparent 60%),
    var(--color-bg-deep);
  cursor: pointer;
  user-select: none;
}

#start-screen h1 {
  font-size: 2.6rem;
  letter-spacing: 0.08em;
  background: linear-gradient(160deg, #fff8d0 0%, var(--color-gold-bright) 40%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(201, 161, 77, 0.55)) drop-shadow(0 0 28px rgba(201, 161, 77, 0.3));
  margin: 0;
}

.start-hint {
  color: var(--color-text-dim);
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  animation: startHintBlink 2s ease-in-out infinite alternate;
}

@keyframes startHintBlink {
  from { opacity: 0.4; }
  to   { opacity: 1.0; }
}

@keyframes startScreenFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

#start-screen.closing {
  animation: startScreenFadeOut 0.35s ease forwards;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .start-hint { animation: none; opacity: 0.8; }
  #start-screen.closing { animation: none; opacity: 0; }
}

/* ── ガチャボタン ──────────────────────────────────────────── */
.gacha-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  border: 2px dashed var(--color-gold);
  background: rgba(201, 161, 77, 0.10);
  color: var(--color-gold-bright);
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  /* visibility:hidden でも幅を占有して盤面を固定 */
  visibility: hidden;
  margin-left: 6px;
}

.gacha-btn i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gacha-btn i::before,
.gacha-btn i::after {
  content: "";
  position: absolute;
  background: var(--color-gold);
  border-radius: 1px;
}

.gacha-btn i::before { top: 50%; left: 0; width: 12px; height: 2px; margin-top: -1px; }
.gacha-btn i::after  { left: 50%; top: 0; width: 2px; height: 12px; margin-left: -1px; }

.gacha-btn:hover:not(:disabled) {
  background: rgba(201, 161, 77, 0.25);
  box-shadow: var(--glow-gold);
}

.gacha-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ガチャボタン ツールチップ（チップと同様の実装） */
.gacha-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  z-index: 30;
  width: max-content;
  max-width: 230px;
  transform: translate(-50%, -4px);
  opacity: 0;
  pointer-events: none;
  border: 1px solid var(--color-gold);
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--color-panel);
  color: var(--color-text);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25;
  white-space: normal;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.gacha-btn:hover:not(:disabled)::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.paytable-note { font-size: 0.75rem; color: var(--color-text-muted, #999); margin: 0 0 0.5rem; }