/* 機種ページ専用: シミュレーターUI */

.machine-header__name {
  font-size: 1.3rem;
  font-weight: 700;
}

.machine-header__maker {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-top: 2px;
}

.machine-header__release-date {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  margin-top: 2px;
}

.machine-highlights {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--color-text);
}

/* スペック・ゲームフロー: 初期状態は畳んでおき、押すと開くことが
   ひと目でわかるよう、ネイティブの開閉マーカーに加えてヒント文言も添える */
.rules-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.rules-summary__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rules-summary__hint {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-accent);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}

.rules-details[open] .rules-summary {
  margin-bottom: var(--space-3);
}

.rules-list li {
  position: relative;
  padding-left: 1.1em;
  font-size: 0.85rem;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.rules-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

/* データランプ（実機のデータランプを模した積み上げゲージ表現）
   「現在」列はライブ進行中の回転数に連動してゲージが伸びる。当たると
   その列がそのまま履歴側へスライドし、「現在」は空へ戻る。
   履歴の有無やバナーの有無で高さが変わるとボタン位置がずれてプレイしづらいため、
   空表示時とゲージ表示時で常に同じ高さを確保する */
#dataLamp {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-lamp__chart {
  width: 100%;
  display: grid;
  grid-template-rows: 18px 1fr;
  gap: 4px 2px;
  background: #0a0b0d;
  border: 3px solid #171310;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2) var(--space-2);
  overflow-x: auto;
  box-shadow: 0 8px 18px rgba(40, 30, 10, 0.16);
}

.data-lamp__banner {
  grid-row: 1;
  align-self: end;
  margin-bottom: 2px;
  padding: 2px 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff6b6b 0%, #c62828 100%);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(198, 40, 40, 0.4);
}

.data-lamp__col {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 30px;
}

.data-lamp__gauge {
  width: 16px;
  height: 90px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.data-lamp__segment {
  flex: 1;
  border-radius: 1px;
  background: #1c1f24;
}

.data-lamp__segment--green {
  background: linear-gradient(180deg, #d2ffdf 0%, #3ecf6a 55%, #1c6b39 100%);
}

.data-lamp__segment--yellow {
  background: linear-gradient(180deg, #fff3b0 0%, #f1c40f 55%, #a97e0a 100%);
}

.data-lamp__segment--red {
  background: linear-gradient(180deg, #ffc9c9 0%, #e94b4b 55%, #8a1f1f 100%);
}

.data-lamp__segment--blink {
  animation: data-lamp-blink 0.6s ease-in-out infinite;
}

@keyframes data-lamp-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.data-lamp__rounds {
  min-height: 1.1em;
  font-size: 0.68rem;
  font-weight: 800;
  color: #ffb648;
}

.data-lamp__game {
  font-size: 0.72rem;
  font-weight: 700;
  color: #f2f3f5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 回転数が1,000を超えてカンマ区切りの4桁になると、この列幅では折り返して
   見づらくなるため、桁数に応じて縮小して1行に収める（5桁以上はさらに縮小）。 */
.data-lamp__game--long {
  font-size: 0.6rem;
  letter-spacing: -0.02em;
}

.data-lamp__game--xlong {
  font-size: 0.52rem;
  letter-spacing: -0.03em;
}

.data-lamp__collabel {
  font-size: 0.6rem;
  color: var(--color-text-muted);
}

/* 本日の成績 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.stat-tile {
  background: var(--color-surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-tile__label {
  font-size: 0.68rem;
  color: var(--color-text-muted);
}

.stat-tile__value {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stat-tile--balance {
  grid-column: 1 / -1;
}

.stat-tile__value.is-plus {
  color: var(--color-plus);
}

.stat-tile__value.is-minus {
  color: var(--color-minus);
}

.investment-display .is-plus {
  color: var(--color-plus);
}

.investment-display .is-minus {
  color: var(--color-minus);
}

/* シミュレーション画面・投資目安・操作ボタンはひと続きのまとまりとして見せたいので、
   セクション間の標準の間隔（main > * + *）より詰める */
.investment-display,
.action-row {
  margin-top: var(--space-3);
}

/* 通常の.btnの約半分のサイズ（リセットボタンなど、控えめに置きたい操作用） */
.btn-small {
  padding: 6px 10px;
  font-size: 0.7rem;
}

/* シミュレーションエリア（状態表示・回転数・演出欄・保留欄をすべて内包する） */
/* シミュレーションエリアは「状態〜保留」までの本体と、下部の帯（演出欄）の
   2段構成にする。演出欄はカードの左右下端いっぱいまで伸びる帯として置く。 */
/* 実機の画面のように「意図してここだけ暗い」と伝わるよう、周りが白基調でも
   常に濃い筐体フレーム＋浮き上がるような影を付ける（フレームがないと、
   白いページに黒い箱がただ浮いているだけに見えてしまっていた）。 */
.simulation-area {
  position: relative;
  border-radius: var(--radius-lg);
  border: 5px solid #171310;
  box-shadow: 0 14px 30px rgba(40, 30, 10, 0.22), 0 3px 8px rgba(40, 30, 10, 0.16);
  display: flex;
  flex-direction: column;
  min-height: 220px;
  background: var(--theme-normal);
  transition: background 0.5s ease;
  overflow: hidden;
  min-width: 0;
}

.simulation-area[data-theme="chance"] {
  background: linear-gradient(180deg, var(--theme-chance) 0%, #241a10 100%);
}

.simulation-area[data-theme="rush"] {
  background: linear-gradient(180deg, var(--theme-rush) 0%, #240c14 100%);
}

.simulation-area__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  min-width: 0;
}

.sim-divider {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin: 0;
}

.sim-state {
  text-align: center;
}

.sim-state__label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
}

.sim-state__value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-accent-strong);
}

/* 今いる状態の当たり確率。状態名より一段落とす（主役は状態名の方）。
   状態名が長い機種（「ST（インパクトモード）」など）で横に並べると
   狭い画面で溢れるので、確率だけ次の行に置く */
.sim-state__prob {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

/* スタンプラリー型（stampCollection）の状態にいる間だけ出す、収集状況の簡易表示。
   対象外の機種・対象外の状態では常にhiddenのまま */
.stamp-progress {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin: 2px 0 0;
  font-size: 0.72rem;
  font-weight: 600;
}

.stamp-progress__item {
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.08);
}

.stamp-progress__item.is-collected {
  color: var(--color-accent-strong);
  background: rgba(255, 255, 255, 0.18);
}

.spin-counter {
  /* .simulation-area__bodyのalign-items:centerは各行（flexアイテムである
     このp自体）をブロック単位で中央寄せするだけで、pの中の複数行そのものを
     中央揃えにはしない。1行だけのときはpの横幅がその1行ぴったりになるため
     たまたま中央に見えていたが、.spin-counter__noteで2行目が増えると、
     幅は依然として長い方の行（「残り34回」）に合わせて決まり、短い2行目は
     その左端に揃ってしまい中央からずれて見えていた。text-align:centerを
     明示して行ごとに中央揃えする。 */
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-strong);
  /* bodyのline-height:1.6が比率として継承されると、この大きいフォントサイズでは
     行の高さが想定よりふくらみ、下に付ける.spin-counter__noteとの間が間延びして
     見える（.result-panel__titleと同じ原因）。ここで比率を締める。 */
  line-height: 1.15;
  /* .spin-counter__note（「（残保留込み）」注記）が付く状態と付かない状態を
     行き来する機種で、注記の1行ぶんだけ.spin-counter自体の高さが変わり、
     .simulation-areaの外側までふくらんでSTARTボタンの位置がずれてしまって
     いた（.simulation-areaのmin-heightを広げる対処は、他の要素の高さに
     引きずられて確実ではなかった）。注記込みの2行ぶん（2.4rem×1.15の本行＋
     0.15emの余白＋0.9rem×1.15の注記行 ＝ 約3.93rem）を注記の有無に関わらず
     常に確保しておくことで、.spin-counter自体の高さを固定する。 */
  min-height: 4rem;
}

.spin-counter__note {
  display: block;
  margin-top: 0.15em;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-text-muted);
}

.investment-display {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* 保留の土台（台座）を5つ常設し、その上を保留の玉が移動していく構成。
   一番左だけ大きい台＝「これから消化される」専用の台で、残り4つが待機列。
   台自体は常に表示されたまま動かず、玉だけが台の間をスライドする。
   拡大表現も、その場でscaleするのではなく「大きい台へ移す」ことで実現するため、
   隣の玉の位置に一切影響を与えない（marginで押しのける方式で起きていた
   「拡大時に隣が右へずれ、消化時に戻る」というバグを構造的に防げる）。 */
.hold-queue {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  min-height: 54px;
}

.hold-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* 大台は「今から消化する保留」を置く場所。実機と同じく、ここの玉だけ一回り
   大きくして光らせる。台の高さは玉に合わせるが、.hold-queueがalign-items:flex-end
   なので接地線（下端）は待機列と揃う。 */
.hold-slot--big {
  width: 46px;
  height: 38px;
  margin-right: var(--space-4);
}

.hold-slot--small {
  width: 30px;
  height: 30px;
}

.hold-base {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 85%;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 台座は玉より内側に収める。玉より広いと、玉の左右から台座がはみ出して見える。 */
.hold-slot--big .hold-base {
  width: 72%;
  height: 9px;
  background: rgba(255, 210, 130, 0.18);
}

.hold-ball {
  width: 30px;
  height: 30px;
  /* 台はflexコンテナなので、玉が一時的に2つ入ると（前の玉のバーストが
     終わりきる前に次の玉が乗る等）flexに押し潰されて小さくなってしまう。
     サイズは常にwidth/heightの指定どおりに保つ。 */
  flex: none;
  /* 玉は必ず台座より手前に描く。スライド中の玉はDOM上「移動先の台」の子に
     なっているが、台はどれもposition:relativeで、DOMで後ろにある台ほど手前に
     描かれる。そのため移動元の台の台座が、移動中の玉の上に被って
     「土台が透けて見える」状態になっていた。 */
  position: relative;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6df 0%, var(--color-accent) 60%, #8f6a35 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transform: translateY(0) scale(1);
  opacity: 1;
  /* 「速い」速度は1回転わずか160ms程度しかなく、これより長い遷移だと
     次の回転の演出が始まってもまだ前の保留の動きが終わっておらず、
     別々の動きなのに繋がって見えてしまう。どの速度でも1回転の中で
     収まるよう、短めのdurationにしている。 */
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.14s ease;
}

/* 大台に乗っている間は、玉自体を一回り大きくして光らせる
   （scaleで水増しするのではなく実サイズを変えるので、レイアウトは常に
   台の固定サイズのまま。玉の見た目の大きさだけが変わる）。
   差は30px→38pxの27%増。実機（エヴァ17）の保留も当該だけ他の約1.3倍で、
   それに寄せた数値。以前この差で不自然に見えていたのは大きさのせいではなく、
   台に玉が2つ入ってflexに潰れる不具合や、移動と拡大を2段階に分けた間延びが
   原因だったので、それらを直した今はこの比率で問題ない。
   光彩は隣の保留へ滲み出さない程度に抑える（滲むと、真横にいる保留1だけが
   小さく見えてしまう）。 */
.hold-slot--big .hold-ball {
  width: 38px;
  height: 38px;
  box-shadow: 0 0 11px rgba(255, 220, 150, 0.55), 0 4px 10px rgba(0, 0, 0, 0.4);
  /* 着いてから光がふわっと点くように、box-shadowにも遷移を持たせる */
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.14s ease,
    box-shadow 220ms ease;
}

/* 移動中の玉は光らせない。玉は移動を始める時点でDOM上は移動先の台の子に
   なっているため、これが無いと大台へ向かう玉が「保留1にいるうちから光り出す」
   ように見えてしまう（位置はtransformで戻せても、光彩は戻せない）。
   影の並びは点灯時と同じ2つのままにして、光彩の透明度だけを0にすること。
   数を減らすと、遷移でずれた影同士が補間されて濁った色を通り、
   足元の影まで動いてしまう。 */
.hold-slot--big .hold-ball--moving {
  box-shadow: 0 0 11px rgba(255, 220, 150, 0), 0 4px 10px rgba(0, 0, 0, 0.4);
}

.hold-ball--enter {
  transform: translateY(-32px) scale(0.6);
  opacity: 0;
}

/* 保留色予告（全機種共通の演出。抽選結果には影響しない） */
.hold-ball--color-red {
  background: radial-gradient(circle at 35% 30%, #ffe3e3 0%, #e94b4b 60%, #7a1f1f 100%);
  box-shadow: 0 4px 12px rgba(233, 75, 75, 0.55);
}

.hold-ball--color-green {
  background: radial-gradient(circle at 35% 30%, #e2ffe9 0%, #3ecf6a 60%, #1c6b39 100%);
  box-shadow: 0 4px 12px rgba(62, 207, 106, 0.55);
}

.hold-ball--color-blue {
  background: radial-gradient(circle at 35% 30%, #e2f0ff 0%, #4b8ee9 60%, #1f4a8a 100%);
  box-shadow: 0 4px 12px rgba(75, 142, 233, 0.55);
}

.hold-ball--burst {
  transform: scale(0.2);
  opacity: 0;
}

.hold-ball--burst-hit {
  transform: scale(1.9);
  opacity: 0;
  background: radial-gradient(circle at 35% 30%, #fff6df 0%, #ffdd7a 50%, #ff9a3d 100%);
  box-shadow: 0 0 24px rgba(255, 200, 100, 0.7);
}

/* 一撃（連チャン）が終わって通常へ戻る瞬間だけ、リール/保留の代わりに表示する結果表示。
   リール(68px)+隙間(12px)+保留欄(54px)の合計と同じ高さを確保し、切り替わっても
   シミュレーションエリア全体の高さ・下のボタン位置がずれないようにしている。 */
.result-panel {
  width: 100%;
  min-height: 134px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.result-panel__title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
  /* bodyのline-height:1.6は比率として継承されるため、指定なしだと
     このあと出てくる大きいspan(2.4rem等)の行の高さが想定よりずっと膨らみ、
     RESULT表示のときだけ枠の高さが変わってボタン位置がずれる原因になっていた。
     ここで比率を締めて、リール+保留欄と同じ高さに収まるようにする。 */
  line-height: 1.15;
}

.result-panel__renchan {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-accent-strong);
  line-height: 1.15;
}

.result-panel__renchan span {
  font-size: 2.4rem;
  font-weight: 800;
}

.result-panel__balls {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-accent-strong);
  line-height: 1.15;
}

.result-panel__balls span {
  font-size: 1.7rem;
  font-weight: 800;
}

/* リーチ演出（3つの数字リール）。機種共通の演出で、抽選結果には関与しない。 */
.reel-display {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
}

/* .reel-display/.hold-queueは自前でdisplayを指定しているため、それだけだと
   hidden属性のデフォルト(display:none)が上書きされてしまい効かない。
   RESULT表示に切り替える際、JS側でhidden属性を使って隠せるようにしておく。 */
.reel-display[hidden],
.hold-queue[hidden],
.result-panel[hidden] {
  display: none;
}

/* 数字が縦に流れる「窓」。枠のデザインは数字の色に関係なく常に統一する。 */
.reel-viewport {
  width: 68px;
  height: 68px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #0a0b0d;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.reel-idle {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-text-muted);
}

.reel-viewport.is-idle .reel-idle {
  display: flex;
}

.reel-viewport.is-idle .reel-strip {
  visibility: hidden;
}

/* 大当たり（数字が揃った）ときだけ、枠をレインボーに光らせる演出。
   filter:hue-rotateを使うと中の数字の色（青/緑/金）まで一緒に回ってしまうため、
   border-color/box-shadowだけをキーフレームでhsl色相を直接回す（数字の色には影響しない）。 */
.reel-viewport--hit-glow {
  animation: reel-rainbow-glow 1.4s linear infinite;
}

@keyframes reel-rainbow-glow {
  0% {
    border-color: hsl(0, 100%, 60%);
    box-shadow: 0 0 14px 4px hsla(0, 100%, 60%, 0.85), 0 0 4px 1px hsla(0, 100%, 60%, 0.6) inset;
  }
  16.6% {
    border-color: hsl(60, 100%, 55%);
    box-shadow: 0 0 14px 4px hsla(60, 100%, 55%, 0.85), 0 0 4px 1px hsla(60, 100%, 55%, 0.6) inset;
  }
  33.3% {
    border-color: hsl(120, 100%, 45%);
    box-shadow: 0 0 14px 4px hsla(120, 100%, 45%, 0.85), 0 0 4px 1px hsla(120, 100%, 45%, 0.6) inset;
  }
  50% {
    border-color: hsl(190, 100%, 55%);
    box-shadow: 0 0 14px 4px hsla(190, 100%, 55%, 0.85), 0 0 4px 1px hsla(190, 100%, 55%, 0.6) inset;
  }
  66.6% {
    border-color: hsl(250, 100%, 65%);
    box-shadow: 0 0 14px 4px hsla(250, 100%, 65%, 0.85), 0 0 4px 1px hsla(250, 100%, 65%, 0.6) inset;
  }
  83.3% {
    border-color: hsl(300, 100%, 60%);
    box-shadow: 0 0 14px 4px hsla(300, 100%, 60%, 0.85), 0 0 4px 1px hsla(300, 100%, 60%, 0.6) inset;
  }
  100% {
    border-color: hsl(360, 100%, 60%);
    box-shadow: 0 0 14px 4px hsla(360, 100%, 60%, 0.85), 0 0 4px 1px hsla(360, 100%, 60%, 0.6) inset;
  }
}

.reel-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

/* JSのITEM_HEIGHT(68px)と、下のkeyframesのtranslateY量(68px*9=612px)に必ず合わせること */
.reel-strip--spinning {
  animation: reel-spin-loop 0.35s linear infinite;
  filter: blur(1.5px);
}

/* 数字が上から下へ流れて見えるよう、translateYはプラス方向へ進める */
@keyframes reel-spin-loop {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(612px);
  }
}

.reel-item {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

/* 数字の色（枠の色は変えない） */
.reel-item.reel-digit--blue {
  color: #5ac8fa;
  text-shadow: 0 0 10px rgba(90, 200, 250, 0.6);
}

.reel-item.reel-digit--green {
  color: #3ecf6a;
  text-shadow: 0 0 10px rgba(62, 207, 106, 0.6);
}

.reel-item.reel-digit--gold {
  color: #ffd24a;
  text-shadow: 0 0 14px rgba(255, 210, 74, 0.8);
  animation: reel-gold-pulse 0.5s ease-in-out infinite;
}

@keyframes reel-gold-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

@keyframes reel-gold-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

/* 演出欄: シミュレーションエリア下端いっぱいに広がる帯として置く（角丸は付けない。
   simulation-area自体の角丸だけがカード全体の輪郭になる）。
   「抽選中」「大当たり＜○R獲得＞＋出玉＋次回：〜」の最大3行を常に確保して、
   表示内容が変わっても帯の高さが変わらないようにする */
.effect-area {
  width: 100%;
  /* min-heightではなくheight固定にする。bodyのline-height:1.6が
     中のテキストに継承されるため、内容の行数によって高さが変わり
     ボタンの位置がズレてしまう問題があった（テキストなし/1行/2行/3行を
     すべて同じ高さに強制する）。 */
  height: 80px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  text-align: center;
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.effect-area__idle {
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.effect-area__title {
  font-size: 0.92rem;
  line-height: 1.3;
  font-weight: 800;
  color: var(--color-accent-strong);
  animation: result-pop 0.32s ease;
}

.effect-area[data-kind="exhausted"] .effect-area__title {
  color: var(--color-text-muted);
}

/* その当たりで獲得した出玉数。「＋」を付けて増えたことがひと目でわかるようにし、
   投資収支の色（--color-plus）と揃えて緑にする */
.effect-area__balls {
  font-size: 0.88rem;
  line-height: 1.3;
  font-weight: 800;
  color: var(--color-plus);
  animation: result-pop 0.32s ease;
}

.effect-area__sub {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--color-text-muted);
}

/* 行き先がRUSH・STのときの「次回：〜」。通常・時短へ戻るときはただの案内だが、
   ここはこれから期待できる場所なので、黄色く・大きくして目に留まるようにする */
.effect-area[data-next-emphasis="on"] .effect-area__sub {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-highlight);
}

@keyframes result-pop {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.action-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

.action-button {
  width: 100%;
  max-width: 320px;
  padding: 20px;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212, 175, 122, 0.5);
  background: linear-gradient(180deg, #3a2f22 0%, #1a1512 100%);
  color: var(--color-accent-strong);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

.action-button:active:not(:disabled) {
  transform: scale(0.97);
}

.action-button:disabled {
  opacity: 0.55;
  cursor: default;
}

/* 抽選中はSTOP表示になり、押すと演出を早送りして結果を表示する */
.action-button[data-mode="stop"] {
  border-color: rgba(255, 120, 120, 0.6);
  background: linear-gradient(180deg, #4a2323 0%, #2a1414 100%);
  color: #ffbdbd;
}

/* 当たった数字を見せたまま一旦止めている間だけRESULT表示になる。
   次に進む先があると分かるよう、出玉表示と同じ緑系にする */
.action-button[data-mode="result"] {
  border-color: rgba(111, 217, 143, 0.7);
  background: linear-gradient(180deg, #1f3a28 0%, #12211a 100%);
  color: var(--color-plus);
}

/* 速度選択: 「普通/速い/当たりまで」を3つ並べ、選択中がひと目でわかるようにする。
   スマホでの連打切り替えは画面のピンチズーム操作と衝突しやすいため、
   トグル式ではなく直接選べる並列ボタンにしている。
   何を選ぶボタンなのか一見して分かりづらいという指摘があったため、
   左に「速度変更」の見出しを添える。 */
.speed-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 320px;
}

.speed-toggle-row__label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.speed-toggle {
  display: flex;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.speed-toggle__btn {
  flex: 1;
  padding: 9px 4px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.speed-toggle__btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.speed-toggle__btn.is-active {
  border-color: rgba(122, 86, 32, 0.5);
  background: linear-gradient(180deg, #f3dfb0 0%, #d9ae64 100%);
  color: #4a3417;
}

.machine-error {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

.machine-error[hidden] {
  display: none;
}

@media (min-width: 480px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}