/* ═══════════════════════════════════════════════════════════════
   edge-theme.css — BOATRACE EDGE v2 デザインシステム（home.html 基準）
   v16-6.html の <style> の後に読み込まれ、全クラスを新UI水準へ上書きする。
   ルール:
   - クラス名・DOM構造には依存変更なし（v16-6 の既存クラスをそのまま再着色）
   - palette / 角丸 / フォント / グロー表現は home.html と完全に同じトークン
   - データの可読性を上げる装飾のみ（極小フォント是正・コントラスト改善）
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. デザイントークン（home.html と同一パレット）── */
:root{
  /* 背景・面 */
  --bg:#070d18; --bg2:#111e33; --bg3:#16263f;
  --sf:rgba(125,170,255,.06); --sf2:rgba(125,170,255,.10); --sf3:rgba(125,170,255,.15);
  /* 罫線 */
  --bd:rgba(120,170,255,.13); --bd2:rgba(120,170,255,.28);
  /* テキスト階調（コントラスト改善: 旧tx3/tx4より一段明るく）*/
  --tx:#eaf2ff; --tx2:#9fb3d4; --tx3:#8499bb; --tx4:#5d7195;
  /* アクセント（ブルー→パープルのグラデ言語）*/
  --ac:#3d7bff; --ac2:#2f63d8; --ac-s:rgba(61,123,255,.14); --ac-t:#8fb3ff;
  --acg:linear-gradient(135deg,#3d7bff,#7c5cff);
  /* ゴールド（EV・妙味・マネーの色）*/
  --gold:#ffc94d; --gold-s:rgba(255,201,77,.14);
  --goldg:linear-gradient(135deg,#ffd866,#ff9d3c);
  /* 状態色 */
  --ok:#2fd47a; --ok-s:rgba(47,212,122,.12);
  --warn:#ffac42; --warn-s:rgba(255,172,66,.12);
  --err:#ff5a6e; --err-s:rgba(255,90,110,.12);
  /* 角丸（home: 16-22px基調）*/
  --r-xs:5px; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-full:9999px;
  /* 影 */
  --sh1:0 1px 3px rgba(0,0,0,.35);
  --sh2:0 8px 30px rgba(0,0,0,.4);
  --sh3:0 14px 44px rgba(0,0,0,.5);
  --sh:0 8px 30px rgba(0,0,0,.4);
  color-scheme:dark;
}

/* ── 2. ベース・タイポグラフィ ── */
html{ background:var(--bg); }
body{
  background:var(--bg);
  color:var(--tx);
  font-family:'Noto Sans JP',-apple-system,'Hiragino Sans',sans-serif;
  font-variant-numeric:tabular-nums; /* 数字の桁揃え（Manrope tnum相当を全体継承）*/
}
/* 背景アンビエンス（home .bgfx 相当）*/
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(110% 60% at 50% -10%, rgba(61,123,255,.16), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, rgba(124,92,255,.10), transparent 55%),
    var(--bg);
}
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(120,170,255,.025) 1px, transparent 1px);
  background-size:100% 38px;
  -webkit-mask:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.jm{ font-family:'Manrope','Noto Sans JP',monospace; font-feature-settings:"tnum"; }
::-webkit-scrollbar-thumb{ background:rgba(120,170,255,.18); border-radius:2px; }

/* ── 3. ヘッダー ── */
.hdr{
  background:linear-gradient(180deg, rgba(7,13,24,.93), rgba(7,13,24,.6));
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--bd);
  /* 左54pxは edge-nav.js の🏠ボタン（fixed: top12/left10/38px）の定位置。重なり回避 */
  padding:10px 14px 10px 54px;
  min-height:56px;
}
.hdr-icon{
  width:30px; height:30px; border-radius:9px;
  background:var(--acg);
  box-shadow:0 4px 14px rgba(61,123,255,.45);
}
.hdr-icon svg{ width:16px; height:16px; }
.hdr-title{ font-family:'Manrope','Noto Sans JP',sans-serif; font-weight:800; font-size:15px; letter-spacing:.5px; }
.hdr-ver{ color:var(--tx4); letter-spacing:.4px; }
.hdr-btn-primary{ background:var(--acg); box-shadow:0 3px 12px rgba(61,123,255,.35); }
.hdr-btn-primary:active{ background:var(--acg); transform:scale(.96); filter:brightness(.92); }
.hdr-btn-ghost{ background:var(--sf2); border:1px solid var(--bd); color:var(--tx2); }
.hdr-date span{ font-family:'Manrope','Noto Sans JP',monospace; font-weight:700; color:var(--tx2); }
.hdr-date button{ background:var(--sf); border:1px solid var(--bd); color:var(--tx3); }
/* 読み込み/更新状態をピルで明確に */
.data-status{
  font-size:11px; font-weight:700; color:var(--tx3);
  background:var(--sf); border:1px solid var(--bd);
  border-radius:99px; padding:3px 9px;
}
.fresh-live{ background:var(--ok); box-shadow:0 0 6px rgba(47,212,122,.6); }

/* ── 4. フッターナビ（現在地をピル表示で明確化）── */
.fnav{
  background:rgba(10,18,32,.92);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-top:1px solid var(--bd);
}
.fnav button{ color:var(--tx4); font-size:10.5px; font-weight:700; transition:color .15s, transform .1s; }
.fnav button:active{ transform:scale(.94); opacity:1; }
.fnav button.active{ color:var(--ac-t); }
.fnav button.active::after{
  top:auto; bottom:2px; left:50%; right:auto;
  width:24px; height:3px; margin-left:-12px;
  background:var(--acg); border-radius:99px;
  box-shadow:0 0 10px rgba(61,123,255,.6);
}

/* ── 5. カード ── */
.card{
  background:var(--bg2);
  border:1px solid var(--bd);
  border-radius:var(--r-lg);
  box-shadow:var(--sh1);
}
.card-accent{
  border-color:var(--bd2);
  background:linear-gradient(135deg, rgba(61,123,255,.07), rgba(124,92,255,.04)), var(--bg2);
}
@media (hover:hover){
  .card[onclick]:hover, .rec:hover, .vcard:not(.off):hover{ border-color:var(--bd2); }
}

/* ── 6. セクション見出し（home .sec-t と同じ視覚言語）── */
.sec-t{
  font-size:12px; font-weight:700; color:var(--tx3);
  letter-spacing:.8px; margin:18px 2px 8px;
  display:flex; align-items:center; gap:8px;
}
.sec-t::before{ content:''; width:3px; height:13px; border-radius:2px; background:var(--acg); }
.section-title{ font-size:13px; font-weight:700; color:var(--tx2); letter-spacing:.3px; }

/* ── 7. NEXT RACE ヒーロー（home .hero 相当）── */
.hero-next{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl) !important;
  border:1px solid var(--bd2) !important;
  background:linear-gradient(135deg,#10243f,#0b1a30) !important;
  box-shadow:var(--sh2) !important;
  padding:16px !important;
}
.hero-next::before{
  content:''; position:absolute; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,201,77,.20), transparent 70%);
  top:-60px; right:-40px; pointer-events:none;
}
.hero-pill{
  font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:99px;
  background:var(--gold-s); color:var(--gold); letter-spacing:.6px;
  display:inline-flex; align-items:center; gap:5px;
}
.hero-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); animation:blink 1s steps(2) infinite; }
.hero-next .hero-rno{ font-family:'Manrope','Noto Sans JP',sans-serif; font-weight:800; font-size:22px; line-height:1.15; }

/* ── 8. ランクバッジ（home .rank と同一言語: S=ゴールド/A=ブルー）── */
.rank{
  width:28px; height:28px; border-radius:9px;
  font-family:'Manrope','Noto Sans JP',sans-serif; font-weight:800; font-size:14px;
}
.rank-S{ background:var(--goldg); color:#3a2400; box-shadow:0 3px 12px rgba(255,170,60,.5); }
.rank-A{ background:linear-gradient(135deg,#6fe0ff,#3d7bff); color:#04203a; }
.rank-B{ background:var(--sf2); color:var(--tx2); border:1px solid var(--bd2); }
.rank-C{ background:var(--sf); color:var(--tx3); border:1px solid var(--bd); }
.rank-D{ background:var(--sf); color:var(--tx4); }

/* ── 9. おすすめレースカード（home .rcard 相当）── */
.rec{
  background:var(--bg2); border:1px solid var(--bd);
  border-radius:var(--r-lg);
  transition:border-color .15s, transform .1s;
}
.rec:active{ background:var(--bg3); border-color:var(--bd2); transform:scale(.99); }
.rec-venue{ font-family:'Manrope','Noto Sans JP',sans-serif; font-weight:800; font-size:14.5px; letter-spacing:.2px; }
.rec-time{ font-family:'Manrope','Noto Sans JP',monospace; font-weight:700; }
.rec-pat{ background:var(--sf); color:var(--tx2); border:1px solid var(--bd); font-size:12px; }
.rec-pat:first-child{ background:var(--ac-s); color:var(--ac-t); border-color:rgba(61,123,255,.25); }
.rec-invest{ font-family:'Manrope','Noto Sans JP',monospace; font-weight:800; color:var(--gold); }

/* ── 10. 枠番バッジ（home LANE 公式カラーに統一）── */
.bn{ border-radius:6px !important; font-family:'Manrope','Noto Sans JP',sans-serif; }
.bn-1{ background:#f4f7ff; color:#0a0e16; border:1.5px solid rgba(255,255,255,.55); }
.bn-2{ background:#1a1a1f; color:#f4f7ff; border:1.5px solid rgba(255,255,255,.25); }
.bn-3{ background:#ff4d4d; color:#fff; border:1.5px solid rgba(255,255,255,.2); }
.bn-4{ background:#3d7bff; color:#fff; border:1.5px solid rgba(255,255,255,.2); }
.bn-5{ background:#ffd23d; color:#0a0e16; border:1.5px solid rgba(255,255,255,.25); }
.bn-6{ background:#39c46e; color:#fff; border:1.5px solid rgba(255,255,255,.2); }

/* ── 11. チップ・タブ ── */
.chip{ background:var(--sf2); color:var(--tx2); border:1px solid var(--bd); }
.chip.on{
  background:linear-gradient(135deg, rgba(61,123,255,.22), rgba(124,92,255,.16));
  color:#fff; border-color:rgba(120,170,255,.4);
  box-shadow:0 2px 10px rgba(61,123,255,.25);
}
.tabs, .vis-tabs{ background:var(--sf); border:1px solid var(--bd); border-radius:var(--r); padding:3px; }
.tab, .vis-tab{ color:var(--tx3); border-radius:9px; }
.tab.on, .vis-tab.on{
  background:linear-gradient(135deg, rgba(61,123,255,.28), rgba(124,92,255,.2));
  color:#fff; box-shadow:0 2px 8px rgba(61,123,255,.3);
}

/* ── 12. 開催場グリッド・レース番号 ── */
.vcard{
  background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r-lg);
  transition:border-color .15s, transform .1s;
}
.vcard:active{ background:var(--bg3); border-color:var(--bd2); transform:scale(.97); }
.vcard-name{ font-family:'Manrope','Noto Sans JP',sans-serif; font-weight:800; letter-spacing:.4px; }
.vcard-sub{ color:var(--tx3); }
.rbtn{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r); transition:all .15s; }
.rbtn.on{
  border-color:rgba(120,170,255,.45);
  background:linear-gradient(135deg, rgba(61,123,255,.18), rgba(124,92,255,.12));
  box-shadow:0 2px 12px rgba(61,123,255,.25);
}
.rbtn-no{ font-family:'Manrope','Noto Sans JP',sans-serif; font-weight:800; }
.rbtn-time{ font-family:'Manrope','Noto Sans JP',monospace; }

/* ── 13. KPI・統計 ── */
.kpi{ background:var(--sf); border:1px solid var(--bd); border-radius:var(--r-sm); padding:9px 4px; }
.kpi-val{ font-family:'Manrope','Noto Sans JP',monospace; font-weight:800; font-size:16px; }
.kpi-label{ font-size:11px; color:var(--tx3); }

/* ── 14. ボタン ── */
.btn-primary{
  background:var(--acg); border-radius:var(--r);
  box-shadow:0 4px 16px rgba(61,123,255,.35);
  font-weight:700;
}
.btn-primary:active{ background:var(--acg); filter:brightness(.92); transform:scale(.97); }
.btn-ghost{ background:var(--sf); color:var(--tx2); border:1px solid var(--bd); border-radius:var(--r); }

/* ── 15. EVバッジ・オッズ（home .ev-chip と同じ視覚言語: 高EV=ゴールド）── */
.bet-ev{ font-family:'Manrope','Noto Sans JP',monospace; font-weight:800; border-radius:7px; padding:2px 7px; }
.bet-ev-pos{ background:var(--gold-s); color:var(--gold); }
.bet-ev-neg{ background:var(--sf2); color:var(--tx4); }
.bet-row{ background:var(--sf); border:1px solid var(--bd); border-radius:var(--r-sm); }
.bet-odds{ font-family:'Manrope','Noto Sans JP',monospace; }
.bet-amount{ font-family:'Manrope','Noto Sans JP',monospace; color:var(--gold); }
.odds-ev{ font-family:'Manrope','Noto Sans JP',monospace; font-weight:800; }
.odds-alert{
  background:linear-gradient(135deg, rgba(255,201,77,.08), rgba(255,201,77,.02));
  border:1px solid rgba(255,201,77,.22); border-radius:var(--r);
}
.odds-alert-hot{
  border-color:rgba(255,157,60,.45);
  background:linear-gradient(135deg, rgba(255,201,77,.14), rgba(255,90,110,.05));
}

/* ── 16. 出走表・選手カード ── */
.ent-card{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r-lg); }
.ent-name{ color:var(--ac-t); }
.ent-stat, .ent-cell{ background:var(--sf); border:1px solid var(--bd); }
.course-seg{ border-radius:4px; }

/* ── 17. 展開予想・分析 ── */
.vis-svg{
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,#0b1a30 0%,#10243f 55%,#132a4a 100%);
  border:1px solid var(--bd);
}
.vis-fill, .factor-fill, .prof-bar-fill{ border-radius:3px; }
.reason-card{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r); }
.story{
  background:linear-gradient(145deg, rgba(61,123,255,.05), rgba(124,92,255,.07));
  border:1px solid rgba(124,92,255,.18); border-radius:var(--r-lg);
}
.story::before{ background:linear-gradient(90deg,#3d7bff,#7c5cff,#ffc94d); }
.review{
  background:linear-gradient(135deg, rgba(124,92,255,.08), rgba(61,123,255,.06));
  border:1px solid rgba(124,92,255,.16); border-radius:var(--r-lg);
}
.review-icon{ background:var(--acg); }
.prof-highlight{ background:var(--ac-s); border:1px solid rgba(61,123,255,.2); color:var(--ac-t); }

/* ── 18. モーダル・チャット ── */
.modal{
  background:linear-gradient(180deg, var(--bg2), var(--bg));
  border-top:1px solid var(--bd2);
  border-top-left-radius:var(--r-xl); border-top-right-radius:var(--r-xl);
  box-shadow:0 -10px 40px rgba(0,0,0,.5);
}
.modal-close{ background:var(--sf2); border:1px solid var(--bd); }
.chat-fab{ background:var(--acg); box-shadow:0 4px 20px rgba(61,123,255,.4); }
.chat-msg.ai .chat-bubble{ background:var(--bg2); border:1px solid var(--bd); }
.chat-msg.user .chat-bubble{ background:var(--acg); }
.chat-input{ background:var(--sf); border:1px solid var(--bd); }
.chat-input:focus{ border-color:var(--ac); box-shadow:0 0 0 2px var(--ac-s); }
.chat-send{ background:var(--acg); }
.chat-suggest button{ background:var(--sf2); color:var(--tx2); border:1px solid var(--bd); }

/* ── 19. スケルトン（ブルーのきらめき）── */
.skel{
  background:linear-gradient(90deg, var(--sf) 25%, rgba(125,170,255,.14) 50%, var(--sf) 75%);
  background-size:200% 100%;
}
.skel-card{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r-lg); }

/* ── 20. バナー・アラート ── */
.onboard-banner{
  background:linear-gradient(135deg, rgba(61,123,255,.1), rgba(124,92,255,.06));
  border:1px solid rgba(120,170,255,.22); border-radius:var(--r);
}
.onboard-banner b{ color:var(--ac-t); }
.streak-alert{ border-radius:var(--r); }
.streak-alert.light{ background:var(--warn-s); border:1px solid rgba(255,172,66,.25); }
.streak-alert.heavy{ background:var(--err-s); border:1px solid rgba(255,90,110,.25); }

/* ── 21. ツールチップ ── */
[data-tip]::after{
  background:var(--bg2); color:var(--tx2);
  border:1px solid var(--bd2); border-radius:10px;
  box-shadow:var(--sh2);
  font-size:11.5px;
}

/* ── 22. 極小フォント是正（9-10px → 11px、密な表は10.5px）── */
.fs9{ font-size:10.5px; }
.fs10{ font-size:11px; }
.sub-label{ font-size:11px; color:var(--tx4); }
.board-pill{ font-size:11px; border:1px solid var(--bd); }
.board-pill.on{ background:var(--ac-s); color:var(--ac-t); border-color:rgba(61,123,255,.3); }
.ex-tag{ font-size:10px; }
.ex-tag.ok{ background:var(--ok-s); color:var(--ok); }
.ex-tag.wait{ background:var(--warn-s); color:var(--warn); }
.empty-desc{ font-size:12.5px; }
.cgd{ color:var(--gold); }

/* ── 23. マイクロ演出 ── */
.fade-up{ animation:fadeUp .28s ease-out both; }
.rec, .vcard, .rbtn, .chip, .tab, .btn-primary, .btn-ghost{ -webkit-tap-highlight-color:transparent; }
@media (prefers-reduced-motion:reduce){
  .fade-up, .skel{ animation:none; }
}