/* ================================================================
   myShutubahyo style.css  v4
   Shiny Colors: Song for Prism aesthetic
   White × Purple(#615f90) × Cyan(#5ee2ff)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Jost:wght@400;600&display=swap');

:root {
  --purple:      #615f90;
  --purple-dark: #3d3b6a;
  --purple-light:#9e9cc4;
  --purple-pale: #e6e6f0;
  --cyan:        #5ee2ff;
  --cyan2:       #00b4f0;
  --cyan3:       #1fe0d7;
  --bg:          #f4f4fb;
  --bg-white:    #ffffff;
  --bg-card:     #ffffff;
  --c-text:      #24130d;
  --c-sub:       #615f90;
  --c-muted:     #a2a2c0;
  --c-border:    rgba(97,95,144,0.18);
  --c-border2:   rgba(97,95,144,0.10);
  --grad-main:   linear-gradient(180deg, #615f90 0%, #a2a2c0 100%);
  --grad-cyan:   linear-gradient(90deg, #00b4f0 0%, #1fe0d7 100%);
  --grad-header: linear-gradient(135deg, #615f90 0%, #3b91c4 60%, #1fe0d7 100%);
  --grad-btn:    linear-gradient(90deg, #615f90 0%, #3b91c4 100%);
  --radius:      8px;
  --shadow:      0 4px 20px rgba(97,95,144,0.15);
  --shadow2:     drop-shadow(0 4px 8px rgba(71,68,150,0.2));
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Noto Sans JP", "Meiryo", sans-serif;
  background: var(--bg);
  color: var(--c-text);
  font-size: 14px;
  min-height: 100vh;
}

/* ── ヘッダ ── */
.site-header {
  background: var(--grad-header);
  padding: 0 24px;
  height: 54px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 16px rgba(97,95,144,0.3);
}
.header-inner { width:100%; display:flex; align-items:center; justify-content:space-between; }
.site-title {
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-size: 18px; font-weight: 600; letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.2);
}
.header-nav { display:flex; align-items:center; gap:20px; }
.header-nav a { color: rgba(255,255,255,0.8); text-decoration:none; font-size:13px; transition:color .2s; }
.header-nav a:hover { color: #fff; }
.username { font-size:12px; color: rgba(255,255,255,0.65); }

/* ── メイン ── */
.main-content { max-width:1700px; margin:0 auto; padding:20px 16px; }

/* ================================================================
   ログインページ
   ================================================================ */
.login-page {
  background: linear-gradient(180deg, #615f90 0%, #a2a2c0 100%);
  min-height:100vh; display:flex; align-items:center; justify-content:center;
}
.login-container { width:100%; max-width:380px; padding:16px; }
.login-card {
  background: rgba(255,255,255,0.95);
  border-radius: 14px;
  padding: 40px 32px;
  box-shadow: 0 8px 40px rgba(97,95,144,0.35);
}
.login-title {
  text-align:center; font-size:20px; color:var(--purple); margin-bottom:28px;
  font-weight:700;
}
.login-error {
  background: #fde8e8; color: #c0392b;
  border-radius: var(--radius); padding:8px 12px; margin-bottom:16px; font-size:13px;
}
.login-form .form-group { margin-bottom:16px; }
.login-form label { display:block; font-size:12px; color:var(--c-sub); margin-bottom:6px; font-weight:500; }
.login-form input {
  width:100%; padding:10px 14px;
  background:#fff; border:1px solid var(--c-border);
  border-radius: var(--radius); color:var(--c-text); font-size:14px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.login-form input:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(97,95,144,0.15); }
.btn-login {
  width:100%; padding:12px; background:var(--grad-btn); color:#fff;
  border:none; border-radius:var(--radius); font-size:15px; font-weight:700;
  cursor:pointer; margin-top:8px;
  transition:opacity .2s, box-shadow .2s;
  box-shadow: 0 3px 14px rgba(97,95,144,0.4);
}
.btn-login:hover { opacity:.9; }

/* ================================================================
   レース選択ページ
   ================================================================ */
.selector-page { padding:4px 0; }
.page-title { font-size:18px; color:var(--purple); margin-bottom:16px; font-weight:700; }

.selector-form {
  background: var(--bg-card); border:1px solid var(--c-border);
  border-radius: var(--radius); padding:16px 20px; box-shadow:var(--shadow);
}
.selector-row { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.selector-group { display:flex; flex-direction:column; gap:4px; }
.selector-group label { font-size:11px; color:var(--c-muted); font-weight:500; }
.selector-group select {
  padding:8px 12px; background:#fff; border:1px solid var(--c-border);
  border-radius: var(--radius); color:var(--c-text); font-size:14px;
  min-width:120px; cursor:pointer; outline:none;
  transition:border-color .2s;
}
.selector-group select:focus { border-color:var(--purple); }
.btn-go {
  padding:9px 28px; background:var(--grad-btn); color:#fff;
  border:none; border-radius:var(--radius); font-size:14px; font-weight:700;
  cursor:pointer; box-shadow:0 2px 10px rgba(97,95,144,0.3);
  transition:opacity .2s;
}
.btn-go:hover { opacity:.9; }

.quick-links { margin-top:20px; }
.quick-links p { font-size:12px; color:var(--c-muted); margin-bottom:10px; }
.venue-tabs { display:flex; gap:10px; flex-wrap:wrap; }
.venue-tab {
  background: var(--bg-card); border:1px solid var(--c-border);
  border-radius: var(--radius); padding:10px 14px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  box-shadow: var(--shadow);
}
.venue-label { font-weight:700; color:var(--purple); margin-right:4px; font-size:13px; }
.race-link {
  display:inline-block; padding:3px 9px;
  background: var(--purple-pale); border-radius:4px;
  color:var(--purple); text-decoration:none; font-size:12px; font-weight:500;
  transition:background .15s, color .15s;
}
.race-link:hover { background: var(--purple); color:#fff; }
.race-link.active { background: var(--grad-btn); color:#fff; }

/* ================================================================
   出馬表ページ
   ================================================================ */
.race-page { padding:4px 0; }

.race-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.race-nav-arrows { display:flex; gap:8px; }
.btn-back, .btn-nav {
  display:inline-block; padding:6px 16px;
  background: var(--bg-card); border:1px solid var(--c-border);
  border-radius: var(--radius); color:var(--purple);
  text-decoration:none; font-size:13px; font-weight:500;
  transition:background .15s;
}
.btn-back:hover, .btn-nav:hover { background: var(--purple-pale); }

/* レースヘッダ */
.race-header {
  background: var(--bg-card); border:1px solid var(--c-border);
  border-radius: var(--radius); padding:14px 20px;
  box-shadow: var(--shadow); margin-bottom:14px;
  border-left: 4px solid var(--purple);
}
.race-title-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.race-title { font-size:20px; color:var(--purple-dark); font-weight:700; }
.race-name { font-size:14px; color:var(--c-muted); margin-left:8px; }

/* 自信度スコア */
.score-wrap { display:flex; align-items:center; gap:10px; margin-left:auto; }
.score-label { font-size:11px; color:var(--c-muted); white-space:nowrap; }
.score-badge {
  display:flex; align-items:center; gap:6px;
  padding:5px 16px; border-radius:20px; font-weight:700; border:2px solid;
}
/* ★★★(80+)=赤, ★★(70+)=黄, ★(60+)=緑, 59以下=青 */
.score-high  { background:#fff0f0; color:#c0392b; border-color:#e74c3c; }   /* ★★★ 赤 */
.score-mid   { background:#fffbf0; color:#b7791f; border-color:#f6ad55; }   /* ★★  黄 */
.score-low   { background:#f0fff4; color:#276749; border-color:#68d391; }   /* ★   緑 */
.score-none  { background:#ebf8ff; color:#2b6cb0; border-color:#90cdf4; }   /* —   青 */
.score-stars { font-size:14px; letter-spacing:2px; }
.score-num   { font-size:16px; font-weight:700; }

/* ================================================================
   出馬表テーブル
   ================================================================ */
.shutuba-wrap { overflow-x:auto; }
.shutuba-table {
  width:100%; border-collapse:collapse;
  background: var(--bg-card);
  border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid var(--c-border);
  table-layout: fixed;
}
.shutuba-table thead th {
  background: var(--grad-main);
  color: rgba(255,255,255,0.9);
  padding: 10px 8px; text-align:center;
  font-size:12px; white-space:nowrap;
  font-weight:500; letter-spacing:1px;
}
.shutuba-table tbody tr { border-bottom:1px solid var(--c-border2); transition:background .1s; }
.shutuba-table tbody tr:hover { background: var(--purple-pale); }
.shutuba-table td { padding:7px 8px; vertical-align:middle; }

/* 列幅 */
.col-waku   { width:34px;  text-align:center; }
.col-num    { width:34px;  text-align:center; font-size:14px; font-weight:700; color:var(--c-text); }
.col-mark   { width:34px;  text-align:center; }
.col-name   { width:140px; font-weight:700; font-size:13px; color:var(--c-text);
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.col-jockey { width:84px;  font-size:12px; color:var(--c-text);
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.col-weight { width:48px;  text-align:center; font-size:13px; color:var(--c-text); }
.col-past   { min-width: 260px; }

/* 枠番 */
.waku-num {
  display:inline-block; width:22px; height:22px;
  text-align:center; line-height:22px;
  font-size:12px; font-weight:700; border-radius:3px;
}
.waku-num.waku-1 { background:#f0f0f0; color:#333; border:1px solid #ccc; box-sizing:border-box; }
.waku-num.waku-2 { background:#222;    color:#fff; }
.waku-num.waku-3 { background:#c0392b; color:#fff; }
.waku-num.waku-4 { background:#2980b9; color:#fff; }
.waku-num.waku-5 { background:#e6b800; color:#333; }
.waku-num.waku-6 { background:#27ae60; color:#fff; }
.waku-num.waku-7 { background:#e8630a; color:#fff; }
.waku-num.waku-8 { background:#c45200; color:#fff; }

/* 印 */
.mark { display:inline-block; font-size:18px; font-weight:700; line-height:1; }
.mark-◎ { color:#e53e3e; }
.mark-○ { color:#3182ce; }
.mark-▲ { color:#38a169; }
.mark-△ { color:#805ad5; }
.mark-☆ { color:#d69e2e; }
.mark-× { color:#a0aec0; }
.mark-調 { color:#0d9488; font-size:14px; }

/* ================================================================
   馬柱 (過去5走) ― netkeiba風スタイル
   ================================================================ */
.banbashira-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
}

/* 各走1カラム — 固定幅で必ず5つ並ぶ */
.bb-col {
  flex: 0 0 20%;
  width: 20%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid var(--c-border2);
  box-sizing: border-box;
}
.bb-col:last-child { border-right: none; }

/* 空カラム */
.bb-col-empty { background: #fafafa; min-height: 120px; }
.bb-col-empty .bb-run-label { opacity: 0.4; }

/* 初出走 */
.bb-col-debut .bb-run-label { opacity: 1; }
.bb-debut {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  color: var(--purple-light);
  letter-spacing: 2px;
}

/* 走ラベル */
.bb-run-label {
  text-align: center;
  padding: 3px 2px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--purple);
  letter-spacing: 0.5px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(97,95,144,0.3);
}

/* 行1: 日付・会場・R番号・グレード */
.bb-row1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px 3px;
  background: var(--purple-pale);
  border-bottom: 1px solid var(--c-border2);
}
.bb-date {
  font-size: 10px;
  color: var(--c-muted);
  white-space: nowrap;
}
.bb-venue-r {
  font-size: 10px;
  font-weight: 700;
  color: var(--purple-dark);
  white-space: nowrap;
}
.bb-grade {
  font-size: 9px;
  font-weight: 700;
  color: #c0392b;
  white-space: nowrap;
}

/* 行2: レース名 */
.bb-race-name {
  text-align: center;
  padding: 2px 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border2);
  background: #fafaff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 18px;
}

/* 行3: サーフェス+距離 / タイム */
.bb-row3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 3px;
  border-bottom: 1px solid var(--c-border2);
}
.bb-surface {
  font-size: 10px;
  font-weight: 700;
  color: #27ae60;
  white-space: nowrap;
}
.bb-surface.surf-dirt { color: #9a6e2a; }
.bb-time {
  font-size: 10px;
  color: var(--c-sub);
  white-space: nowrap;
}

/* 行4: 枠・頭数・馬番・着順・着差・人気 */
.bb-chaku-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 2px 3px;
  font-weight: 700;
  line-height: 1;
  border-bottom: 1px solid var(--c-border2);
}
.bb-waku {
  display: inline-block;
  width: 16px; height: 16px;
  text-align: center; line-height: 16px;
  font-size: 9px; font-weight: 700; border-radius: 2px;
}
.bb-waku.waku-1 { background:#f0f0f0; color:#333; border:1px solid #ccc; box-sizing:border-box; }
.bb-waku.waku-2 { background:#222; color:#fff; }
.bb-waku.waku-3 { background:#c0392b; color:#fff; }
.bb-waku.waku-4 { background:#2980b9; color:#fff; }
.bb-waku.waku-5 { background:#e6b800; color:#333; }
.bb-waku.waku-6 { background:#27ae60; color:#fff; }
.bb-waku.waku-7 { background:#e8630a; color:#fff; }
.bb-waku.waku-8 { background:#c45200; color:#fff; }
.bb-headcount { font-size: 10px; color: var(--c-muted); }
.bb-banum-inline { font-size: 10px; color: var(--c-muted); }
.bb-chaku-inline { font-size: 14px; }
.bb-chakusa { font-size: 10px; color: var(--c-muted); }
.bb-popularity { font-size: 10px; color: var(--c-sub); }
.chaku-1     { color: #b7791f; background: #fffdf0; }
.chaku-2     { color: #4a5568; background: #f7fafc; }
.chaku-3     { color: #9c4221; background: #fff5f0; }
.chaku-other { color: var(--c-muted); background: #fff; }

/* 行5: 騎手・斤量・馬体重 */
.bb-jockey-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px 3px;
  border-bottom: 1px solid var(--c-border2);
  font-size: 10px;
  color: var(--c-text);
}
.bb-jockey { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }
.bb-kinryo  { font-size: 10px; color: var(--c-muted); white-space: nowrap; }
.bb-horse-weight { font-size: 10px; color: var(--c-muted); white-space: nowrap; }

/* 行6: コメント */
.bb-comment {
  padding: 4px 4px;
  font-size: 10px;
  color: var(--c-text);
  line-height: 1.5;
  background: #fff;
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  flex: 1;
}
.bb-comment.no-comment { color: #ccc; }

.no-data { color: #ccc; font-size:12px; }

/* ================================================================
   凡例
   ================================================================ */
.legend {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:14px; padding:10px 16px;
  background: var(--bg-card); border:1px solid var(--c-border);
  border-radius: var(--radius);
  font-size:12px; color:var(--c-muted);
}
.legend .mark { font-size:15px; margin-right:2px; }

/* エラー */
.error-box {
  background: #fde8e8; color:#c0392b;
  border-radius: var(--radius); padding:16px; margin-top:14px;
}

/* ================================================================
   レスポンシブ
   ================================================================ */
@media (max-width: 900px) {
  .race-title { font-size:16px; }
  .bb-chaku { font-size:20px; }
  .bb-comment { height:70px; }
}