/* ============================================================
 * ui.css — デザイン改善用の追加スタイル（Phase 1〜）
 *
 * 旧 style.css（本番未読込の休眠ファイル）は Phase 6 で削除済み。
 * 追加スタイルはこのファイルに集約し、index.tsx / shared-sim.tsx /
 * pages.tsx（layout）から明示的に読み込む（?v= は src/lib/asset-version.ts で一元管理）。
 * 既存の見た目・レイアウトを変えるルールは置かないこと。
 * ============================================================ */

/* ---------- D案「ネオンホール・ライト」デザイントークン（Phase 3） ----------
 * 確定仕様は提案書 §09b・モック v3.2 が正。
 * Tailwind の意味名トークン（index.tsx / shared-sim.tsx の tailwind.config）と
 * 同じ値を CSS 変数としても公開し、素の CSS からも参照できるようにする。
 * 既存クラスの置換は行わず、新規・改修コードから使い始める並走方式 */
:root {
  --pk-bg: #EEF1F7;            /* 地（現グラデ背景の後継） */
  --pk-card: #FFFFFF;          /* 面: カード・パネル */
  --pk-ink: #1B2130;           /* インク: 本文 */
  --pk-ink-2: #5A6478;         /* インク: 補助 */
  --pk-ink-3: #8E97AB;         /* インク: 弱（gray-400 の後継） */
  --pk-line: #E2E6EF;          /* 罫線 */
  --pk-navy: #141927;          /* 夜ゾーン: ヘッダー・結果パネル・フッター */
  --pk-navy-2: #1C2337;        /* 夜ゾーン: 面 */
  --pk-navy-line: #28314D;     /* 夜ゾーン: 罫線 */
  --pk-brand-red: #FF3D5A;     /* ブランドレッド（単色使用時・グラデ始点） */
  --pk-brand-orange: #FF9838;  /* ブランドオレンジ（単色使用時。RUSHバーのティント等） */
  /* primary・アクティブタブ下線。90% 地点を #FF7A3D で止めて赤寄りに見せるのは
   * モック v3.2 準拠の意図的な指定（--pk-brand-orange との不一致ではない） */
  --pk-grad: linear-gradient(120deg, #FF3D5A 10%, #FF7A3D 90%);
  --pk-gold: #F5B71E;          /* お気に入り★ */
  --pk-plus: #0FA45E;          /* 意味色: プラス収支（維持） */
  --pk-minus: #D93444;         /* 意味色: マイナス収支（維持） */
  --pk-amber: #FFB454;         /* 発光: KPIカウンター */
  --pk-link: #E0244D;          /* 本文リンク（brand-red の濃色バリアント。白地でのコントラスト確保） */
  --pk-link-hover: #B81C3E;    /* 本文リンク hover */
  --pk-shadow-1: 0 1px 2px rgba(27, 33, 48, .05), 0 4px 16px rgba(27, 33, 48, .07);
  --pk-shadow-2: 0 2px 4px rgba(27, 33, 48, .07), 0 14px 34px rgba(27, 33, 48, .13);
  --pk-font-num: 'Barlow Semi Condensed', 'Avenir Next Condensed', 'Arial Narrow', 'Yu Gothic UI', sans-serif;
}

/* ---------- 地色: #EEF1F7 ＋ 極薄ドットグリッド ----------
 * body に付与（整列するパチンコ玉の暗喩）。従来の bg-gradient-to-br from-blue-50
 * to-indigo-100 を置き換える。ドットは装飾のみでレイアウト・操作に影響しない */
.page-bg {
  background-color: var(--pk-bg);
  background-image: radial-gradient(circle, rgba(27, 33, 48, .05) 1px, transparent 1.2px);
  background-size: 24px 24px;
}

/* ---------- 数字用書体: Barlow Semi Condensed ----------
 * 「1/319.7」「+24,800」等の数値表示に使う。tabular-nums で桁幅を固定 */
.num {
  font-family: var(--pk-font-num);
  font-variant-numeric: tabular-nums;
}

/* ---------- トースト通知 ----------
 * 成功系の通知に使う（alert と違い操作をブロックせず自動で消える） */
#toast-zone {
  position: fixed;
  bottom: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
  max-width: 92vw;
}
.app-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1e293b;
  color: #f1f5f9;
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .35);
  animation: toast-in .28s cubic-bezier(.21, 1.02, .55, 1) both;
  pointer-events: auto;
}
.app-toast .toast-icon { color: #4ade80; font-weight: 700; flex: none; }
.app-toast.toast-gold .toast-icon { color: #fbbf24; }
.app-toast.toast-muted { color: #cbd5e1; }
.app-toast.toast-muted .toast-icon { color: #94a3b8; }
.app-toast.toast-out { animation: toast-out .25s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

/* ---------- キーボード操作時のフォーカスリング ----------
 * :focus-visible なのでマウスクリックでは表示されない。
 * Phase 6 で indigo → ブランドレッドへ統一（モック v3.2 準拠） */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--pk-brand-red);
  outline-offset: 2px;
}

/* ---------- ボタン押下のマイクロインタラクション ----------
 * transform のみでレイアウトには影響しない */
button:active {
  transform: scale(.97);
}

/* ---------- ★お気に入りのポップアニメーション ---------- */
.star-pop {
  display: inline-block;
  animation: star-pop .35s cubic-bezier(.5, 1.8, .5, 1);
}
@keyframes star-pop {
  0% { transform: scale(.6) rotate(-15deg); }
  60% { transform: scale(1.35) rotate(5deg); }
  100% { transform: scale(1); }
}

/* ---------- KPIカードの数値 ----------
 * 等幅数字（tabular-nums）でカウントアップ中の桁幅の揺れを止める。
 * 静止時の見た目には桁が揃う以外の影響なし */
.kpi-value {
  font-variant-numeric: tabular-nums;
}

/* ---------- スケルトンローディング（機種一覧） ----------
 * ロード中に実カードと同寸のプレースホルダを見せ、体感待ち時間とCLSを抑える */
.skeleton-line {
  border-radius: 6px;
  background: linear-gradient(90deg, #eef0f5 25%, #e2e6ef 50%, #eef0f5 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
}
@keyframes skeleton-shimmer {
  to { background-position: -200% 0; }
}

/* ---------- 不確定型プログレスバー（多重実行） ----------
 * 実行はサーバー側の単一バッチのため件数進捗は取れない。処理中であることを可視化する */
.indeterminate-bar {
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  position: relative;
}
.indeterminate-bar > i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  animation: indet-sweep 1.2s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes indet-sweep {
  0% { left: -40%; }
  100% { left: 100%; }
}

/* ---------- ランキングのスタッガー（順次）表示 ----------
 * #ranking-body に .rank-stagger が付いている間だけ再生される（絞り込み入力では再生しない）。
 * opacity/transform のみでレイアウトは動かさない（マーキーの実寸測定にも影響しない） */
.rank-stagger .rank-row {
  animation: rank-in .3s ease both;
  animation-delay: calc(var(--stagger-i, 0) * 45ms);
}
@keyframes rank-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
 * Phase 4: D案コンポーネント（ヘッダー・タブ・ボタン階層・機種カード）
 * 実装の正はモック v3.2。tab-button / #tab-* / #auth-area 等の
 * JS フック（ID・クラス）は既存のまま、見た目クラスのみ追加する
 * ============================================================ */

/* ---------- ヘッダー: 夜のホール ---------- */
.pk-header {
  background: rgba(20, 25, 39, .97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 24px rgba(10, 14, 26, .35);
}
.pk-logo-mark {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  flex: none;
  background: radial-gradient(circle at 32% 28%, #fff 0%, #d4d8df 40%, #8a919d 76%, #585f6b 100%);
}
.pk-logo-mark::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 110, .55) 0%, transparent 70%);
  animation: pk-pulse 2.6s ease-in-out infinite;
}
@keyframes pk-pulse {
  0%, 100% { opacity: .4; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.15); }
}
.pk-hd-link { color: #b6bfd4; transition: color .15s; }
@media (hover: hover) { .pk-hd-link:hover { color: #fff; } }

/* ---------- タブ: 発光下線 ----------
 * .tab-button は showTab() が querySelectorAll で参照する既存フック。
 * アクティブ状態は .pk-tab-active の付け外しのみで表現する
 * （スマホのスティッキー :hover 対策として hover は hover:hover 環境に限定） */
.pk-tabs { overflow-x: auto; scrollbar-width: none; }
.pk-tabs::-webkit-scrollbar { display: none; }
.pk-tab {
  position: relative;
  color: #99a3ba;
  font-weight: 700;
  white-space: nowrap;
  transition: color .15s;
}
@media (hover: hover) { .pk-tab:not(.pk-tab-active):hover { color: #d6dbe7; } }
.pk-tab-active {
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 90, 110, .45);
}
.pk-tab-active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--pk-grad);
  box-shadow: 0 0 12px rgba(255, 80, 80, .6);
}

/* ---------- ボタン階層 ----------
 * primary はブランドグラデ1つ、機能色（編集=青・共有=紫・実行=グラデ等）は
 * 彩度600のベタ塗り → ソフトティント（淡色地＋濃色文字）へ。意味体系は不変 */
.btn-grad {
  background-image: var(--pk-grad);
  color: #fff;
  box-shadow: 0 3px 12px rgba(255, 70, 80, .35);
  transition: filter .15s, box-shadow .2s;
}
@media (hover: hover) {
  .btn-grad:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 5px 18px rgba(255, 70, 80, .5); }
}
.btn-grad:disabled { filter: grayscale(.45) brightness(1.05); box-shadow: none; }
.btn-soft-blue { background: #E9F1FE; color: #1D5FCC; transition: background .15s; }
.btn-soft-purple { background: #F3EDFE; color: #7434D6; transition: background .15s; }
.btn-soft-green { background: #E7F6EE; color: #0E7A48; transition: background .15s; }
.btn-soft-red { background: #FEE6EA; color: #C22343; transition: background .15s; }
.btn-soft-gray { background: #EBEDF2; color: #5A6478; transition: background .15s; }
@media (hover: hover) {
  .btn-soft-blue:hover { background: #d9e8fd; }
  .btn-soft-purple:hover { background: #eae0fd; }
  .btn-soft-green:hover { background: #d8f0e3; }
  .btn-soft-red:hover { background: #fdd6dd; }
  .btn-soft-gray:hover { background: #e0e3ea; }
}
.btn-ghost {
  background: #fff;
  color: var(--pk-ink-2);
  border: 1.5px solid var(--pk-line);
  transition: border-color .15s, color .15s;
}
@media (hover: hover) { .btn-ghost:hover { border-color: var(--pk-ink-3); color: var(--pk-ink); } }

/* ---------- セグメント切替（実行モード・ランキング） ----------
 * setSimMode / setMultiMode / switchRanking が .pk-seg-on を toggle する */
.pk-seg { border-color: var(--pk-line); background: #fff; color: var(--pk-ink-2); }
/* 夜ゾーン内のセグメント（非アクティブ）。アクティブ表現は共通の .pk-seg-on を使うため
 * .pk-seg-on より前に定義する（後に置くと同一詳細度の後勝ちでアクティブ色を潰す） */
.pk-seg-night { border-color: var(--pk-navy-line); background-color: rgba(255, 255, 255, .06); color: #B6BFD4; }
.pk-seg-on {
  border-color: #FF3D5A;
  background-image: var(--pk-grad);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 70, 80, .3);
}

/* ---------- 機種カード: 初当たり確率・RUSH行＋継続率バー ---------- */
.pk-prob {
  font-family: var(--pk-font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.pk-rush-row {
  position: relative;
  background: #F5F7FB;
  border-radius: 7px;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.pk-rush-row > * { position: relative; }
.pk-rush-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(255, 152, 56, .16), rgba(255, 61, 90, .14));
}
.pk-rush-row.lt { background: #FFF0F3; }
.pk-rush-row.lt .pk-rush-bar { background: linear-gradient(90deg, rgba(255, 61, 90, .22), rgba(255, 152, 56, .25)); }
.pk-lt-chip {
  background-image: var(--pk-grad);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ---------- ヘッダー内の認証エリア（濃紺地用） ---------- */
.pk-auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(126, 224, 163, .12);
  border: 1px solid rgba(126, 224, 163, .35);
  color: #8ee6b0;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  max-width: 230px;
}
.pk-btn-logout {
  background: rgba(255, 255, 255, .1);
  color: #b6bfd4;
  border: 1px solid var(--pk-navy-line);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
@media (hover: hover) { .pk-btn-logout:hover { color: #fff; background: rgba(255, 255, 255, .16); } }

/* ============================================================
 * Phase 5: 結果画面「夜のホール」（濃紺パネル・データカウンター・
 * 出玉連動発光・強化版スランプチャート）。実装の正はモック v3.2。
 * displaySimulationResults / playSlumpIntro（app.js）から使う
 * ============================================================ */

/* ---------- 結果パネル: 夜ゾーン ---------- */
.pk-night {
  background: linear-gradient(180deg, #161B2B 0%, #141927 100%);
  border: 1px solid var(--pk-navy-line);
  border-radius: 16px;
  color: #E8ECF5;
  box-shadow: 0 10px 40px rgba(15, 20, 36, .35);
  position: relative;
  overflow: hidden;
}
.pk-night::before {
  content: "";
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 150px;
  background: radial-gradient(ellipse, rgba(255, 80, 100, .18) 0%, transparent 70%);
  pointer-events: none;
}
.pk-night > * { position: relative; }
.pk-night-title {
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pk-night-title::before {
  content: "";
  width: 5px;
  height: 19px;
  border-radius: 3px;
  background: var(--pk-grad);
  box-shadow: 0 0 10px rgba(255, 70, 90, .7);
  flex: none;
}

/* ---------- KPI データカウンター帯 ---------- */
.pk-counter-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 2px;
  background: rgba(10, 14, 26, .55);
  border: 1px solid var(--pk-navy-line);
  border-radius: 12px;
  padding: 16px 6px;
}
.pk-cc {
  text-align: center;
  padding: 6px 8px;
  border-right: 1px solid var(--pk-navy-line);
}
.pk-cc:last-child { border-right: 0; }
.pk-cv {
  font-family: var(--pk-font-num);
  font-size: 27px;
  font-weight: 800;
  color: #E8ECF5;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.pk-ck {
  font-size: 9.5px;
  font-weight: 700;
  color: #7D879F;
  letter-spacing: .12em;
  margin-top: 4px;
}

/* 出玉連動発光（app.js の ballGlowClass が付け外しする）:
 * 〜4,999=白 / 5,000〜=青 / 15,000〜=金 / 30,000〜=虹
 * v18.16: 旧「朱(15,000〜)」は収支のマイナス赤と紛らわしいため青→金→虹の階段へ変更。
 * 金は accent のアンバー(#FFB454)だとオレンジに見えるため、純金寄りの #FFD75E を使う */
.pk-cv-blue { color: #6DB3FF; text-shadow: 0 0 14px rgba(109, 179, 255, .5); }
.pk-cv-gold { color: #FFD75E; text-shadow: 0 0 16px rgba(255, 215, 94, .55); }
.pk-cv-green { color: #7EE0A3; text-shadow: 0 0 14px rgba(126, 224, 163, .45); }
.pk-cv-rainbow {
  background: linear-gradient(90deg, #FF6D6D, #FFB454, #FFE66D, #7EE0A3, #6DB3FF, #C58AFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(255, 180, 84, .5));
  background-size: 200% 100%;
  animation: pk-rb-shift 2.4s linear infinite;
}
@keyframes pk-rb-shift { to { background-position: 200% 0; } }

/* ---------- チャート枠と導入アニメ用オーバーレイ ---------- */
.pk-chart-wrap {
  background: rgba(10, 14, 26, .55);
  border: 1px solid var(--pk-navy-line);
  border-radius: 12px;
  padding: 12px;
  position: relative;
}
.pk-chart-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* ---------- 夜ゾーン内のボタン ---------- */
.btn-night {
  background: rgba(255, 255, 255, .08);
  color: #D6DBE7;
  border: 1px solid var(--pk-navy-line);
  transition: background .15s, color .15s;
}
@media (hover: hover) { .btn-night:hover { background: rgba(255, 255, 255, .15); color: #fff; } }

/* 旧 .pk-sheet / .pk-sheet-title（多重実行結果の白パネル）は夜ゾーン統一（.pk-night 化）に
 * 伴い参照ゼロとなったため削除済み */

@media (max-width: 640px) {
  .pk-counter-strip { grid-template-columns: repeat(3, 1fr); }
  .pk-cc { border-right: 0; }
  .pk-cc:nth-child(3n+1), .pk-cc:nth-child(3n+2) { border-right: 1px solid var(--pk-navy-line); }
  .pk-cv { font-size: 21px; }
}

/* ============================================================
 * 多重実行 結果の夜ゾーン化（displayMultiResults / renderOneshotRanking /
 * renderBalanceRanking / renderMiniSlump / toggleRankDetail から使う）。
 * 単体シミュ結果（.pk-night）と同じ「夜のホール」トーンに統一する
 * ============================================================ */

/* ランキング行（白カード → 夜の行） */
.pk-rank-row { background: rgba(255, 255, 255, .04); border: 1px solid var(--pk-navy-line); }
@media (hover: hover) { .pk-rank-row > button:hover { background: rgba(255, 255, 255, .07); } }
/* 展開した台詳細 */
.pk-rank-detail { border-top: 1px solid var(--pk-navy-line); background: rgba(10, 14, 26, .45); }
/* 台番号チップ */
.pk-chip-night { background: rgba(255, 255, 255, .10); color: #B6BFD4; }
/* 夜ゾーンの入力欄（機種名フィルタ） */
.pk-input-night { background: rgba(255, 255, 255, .06); border: 1px solid var(--pk-navy-line); color: #E8ECF5; }
.pk-input-night::placeholder { color: #8B94AB; }
.pk-input-night:focus { outline: none; border-color: rgba(255, 95, 122, .6); box-shadow: 0 0 0 2px rgba(255, 95, 122, .25); }

/* ---------- 台詳細の展開演出 ----------
 * パネルのフェードイン。ミニスランプの描画アニメは canvas 版（app.js の playMiniSlump）が
 * 担い、reduced-motion 判定も JS 側で行う。
 * .rank-detail-in の translateY(-4px) は親 .rank-row の overflow:hidden 内で
 * 完結するため、行の角丸やレイアウト実寸（marquee 測定）に影響しない */
.rank-detail-in { animation: rank-detail-in .28s ease both; }
@keyframes rank-detail-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- ミニスランプ（canvas 版・タップで再生） ---------- */
.pk-mini-slump {
  position: relative;
  height: 56px;
  background: rgba(10, 14, 26, .55);
  border: 1px solid var(--pk-navy-line);
  cursor: pointer;
  overflow: hidden;
}
.pk-mini-slump canvas { width: 100%; height: 100%; display: block; }
.pk-mini-lbl {
  position: absolute;
  left: 2px;
  font-size: 9px;
  line-height: 1;
  color: #8B94AB;
  background: rgba(13, 18, 32, .75);
  padding: 0 2px;
  border-radius: 2px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
/* タップで再生できることを示す控えめなリプレイアイコン */
.pk-mini-replay {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 9px;
  color: #7D879F;
  opacity: .85;
  pointer-events: none;
}
/* タップ時の視覚フィードバック */
.pk-mini-slump:active .pk-mini-replay { color: #FFB454; opacity: 1; }

/* ---------- アニメーション抑制設定の尊重 ---------- */
@media (prefers-reduced-motion: reduce) {
  .app-toast, .app-toast.toast-out { animation: none; }
  button:active { transform: none; }
  .star-pop { animation: none; }
  .fade-in { animation: none !important; }
  .skeleton-line { animation: none; }
  .indeterminate-bar > i { animation: none; left: 0; width: 100%; }
  .rank-stagger .rank-row { animation: none; }
  .pk-logo-mark::after { animation: none; }
  .pk-cv-rainbow { animation: none; }
  .rank-detail-in { animation: none; }
  /* 描画アニメ無効時（playMiniSlump は即時描画）は再生アイコンとタップカーソルを出さない */
  .pk-mini-replay { display: none; }
  .pk-mini-slump { cursor: default; }
}