/* ===== HORSE PAGE STYLES ===== */
/* 個別馬ページ専用 */

/* Navigation (sticky) */
.horse-nav {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0.8rem 1.5rem;
  background:rgba(12,11,10,0.95);
  border-bottom:1px solid rgba(196,154,60,0.15);
  backdrop-filter:blur(8px);
  font-family:var(--f-head);
}
.nav-back {
  color:var(--text-sub); text-decoration:none;
  font-size:0.8rem; letter-spacing:0.1em;
  transition:color .3s;
}
.nav-back:hover { color:var(--gold); }
.nav-gen {
  font-size:0.7rem; letter-spacing:0.25em;
  color:var(--text-muted); text-transform:uppercase;
}
.prev-next {
  display:flex; align-items:center; gap:1rem;
  font-size:0.8rem;
}
.prev-next a {
  color:var(--text-sub); text-decoration:none;
  transition:color .3s;
}
.prev-next a:hover { color:var(--gold); }
.nav-sep { color:var(--gold); opacity:0.4; font-size:0.5rem; }

/* Hero */
.horse-hero {
  padding:5rem 2rem 3rem;
  text-align:center; position:relative;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(196,154,60,0.06) 0%, transparent 50%),
    var(--bg);
  border-bottom:1px solid rgba(196,154,60,0.1);
}
.horse-era {
  display:inline-block;
  font-family:var(--f-jp); font-size:0.7rem; font-weight:400;
  letter-spacing:0.15em; padding:0.3rem 1rem;
  border:1px solid rgba(196,154,60,0.2);
  margin-bottom:1.2rem;
}
.horse-name {
  font-family:var(--f-display); font-size:clamp(2rem,5vw,3.5rem);
  font-weight:900; color:var(--gold); letter-spacing:0.12em;
  line-height:1.2; margin-bottom:0.4rem;
  text-shadow:0 0 40px rgba(196,154,60,0.2);
}
.horse-dates {
  font-family:var(--f-head); font-size:1rem;
  color:var(--text-sub); letter-spacing:0.2em; margin-bottom:1rem;
}
.horse-epithet {
  font-family:var(--f-jp); font-size:0.9rem; font-weight:300;
  color:var(--text-sub); letter-spacing:0.05em;
  max-width:500px; margin:0 auto;
}
.horse-hero-div {
  display:flex; align-items:center; gap:1rem;
  margin:1.5rem auto 0; width:min(60%,300px);
}
.horse-hero-div::before, .horse-hero-div::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0.3;
}
.horse-hero-div span { color:var(--gold); font-size:0.7rem; opacity:0.5; }

/* Main */
.horse-main {
  max-width:800px; margin:0 auto;
  padding:0 2rem 4rem;
}

/* Section titles */
.sec-title {
  font-family:var(--f-head); font-size:0.75rem;
  letter-spacing:0.3em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:1.5rem;
  padding-bottom:0.5rem; position:relative;
}
.sec-title::after {
  content:''; position:absolute; bottom:0; left:0;
  width:40px; height:1px; background:var(--gold); opacity:0.5;
}

/* Sections spacing */
.info-section, .bio-section, .race-section,
.pedigree-section, .offspring-section,
.lineage-section, .ref-section {
  padding-top:2.5rem;
}

/* Info grid */
.info-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; border:1px solid rgba(196,154,60,0.1);
}
.info-item {
  display:flex; flex-direction:column;
  padding:0.8rem 1.2rem;
  border-bottom:1px solid rgba(196,154,60,0.06);
}
.info-item:nth-child(odd) { border-right:1px solid rgba(196,154,60,0.06); }
.info-label {
  font-family:var(--f-jp); font-size:0.7rem; font-weight:400;
  color:var(--text-muted); letter-spacing:0.1em; margin-bottom:0.2rem;
}
.info-value {
  font-family:var(--f-body); font-size:0.9rem;
  color:var(--text);
}
.info-unknown { color:var(--text-muted); font-style:italic; }

.historical-note {
  font-family:var(--f-jp); font-size:0.75rem;
  color:var(--text-muted); margin-top:1rem;
  padding:0.6rem 1rem;
  border-left:2px solid rgba(196,154,60,0.2);
}

/* Biography */
.bio-text {
  font-family:var(--f-jp); font-size:0.9rem; font-weight:300;
  color:var(--text-sub); line-height:2; letter-spacing:0.02em;
}
.bio-text p + p { margin-top:1rem; }

/* Race record */
.race-summary {
  display:flex; gap:0; margin-bottom:1.5rem;
  border:1px solid rgba(196,154,60,0.1);
}
.race-stat {
  flex:1; display:flex; flex-direction:column;
  align-items:center; padding:1rem 0.5rem;
  border-right:1px solid rgba(196,154,60,0.06);
}
.race-stat:last-child { border-right:none; }
.race-stat-num {
  font-family:var(--f-head); font-size:1.5rem;
  font-weight:700; color:var(--text);
}
.race-stat-label {
  font-family:var(--f-jp); font-size:0.7rem;
  color:var(--text-muted); margin-top:0.2rem;
}
.race-narrative {
  font-family:var(--f-jp); font-size:0.9rem;
  color:var(--text-sub); line-height:1.9;
  padding:1rem 0; margin-bottom:1rem;
}
.subsec-title {
  font-family:var(--f-head); font-size:0.65rem;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:0.8rem;
}
.wins-list {
  list-style:none; font-family:var(--f-body);
  font-size:0.9rem; color:var(--text);
}
.wins-list li {
  padding:0.4rem 0;
  border-bottom:1px solid rgba(196,154,60,0.05);
}
.wins-list li::before {
  content:''; display:inline-block;
  width:4px; height:4px; border-radius:50%;
  background:var(--gold); margin-right:0.8rem;
  vertical-align:middle; opacity:0.6;
}

/* Pedigree table (5-generation) */
.pedigree-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ped-table {
  width:100%; min-width:900px;
  border-collapse:collapse; font-family:var(--f-body);
}
.ped-table td {
  border:1px solid rgba(196,154,60,0.12);
  padding:0.4rem 0.6rem;
  vertical-align:middle; font-size:0.82rem;
  color:var(--text); background:var(--bg-card);
  white-space:nowrap;
}
.ped-self {
  font-family:var(--f-head); font-weight:700;
  font-size:0.88rem; letter-spacing:0.05em;
  background:rgba(196,154,60,0.08);
  text-align:center; width:12%;
}
.ped-sire, .ped-dam {
  font-family:var(--f-head); font-weight:600;
  font-size:0.85rem; width:14%;
}
.ped-sire { border-left:2px solid var(--gold-dark); }
.ped-dam { border-left:2px solid var(--text-muted); }
.ped-g2 { width:16%; font-size:0.82rem; }
.ped-g3 { width:18%; font-size:0.8rem; color:var(--text-sub); }
.ped-g4 { width:18%; font-size:0.78rem; color:var(--text-sub); }
.ped-g5 { width:22%; font-size:0.76rem; color:var(--text-muted); }
.ped-sire-line { color:var(--gold-light); }
.ped-sire-line a { color:var(--gold-light); text-decoration:none; }
.ped-sire-line a:hover { border-bottom:1px solid var(--gold); }
.ped-unknown { color:var(--text-muted); font-style:italic; }

/* Offspring */
.offspring-list { list-style:none; }
.offspring-item {
  display:flex; align-items:baseline; gap:0.5rem;
  padding:0.5rem 0;
  border-bottom:1px solid rgba(196,154,60,0.05);
  flex-wrap:wrap;
}
.offspring-name {
  font-family:var(--f-head); font-size:0.9rem; color:var(--text);
}
.offspring-name a { color:var(--gold-light); text-decoration:none; }
.offspring-name a:hover { border-bottom:1px solid var(--gold); }
.offspring-year {
  font-family:var(--f-head); font-size:0.75rem; color:var(--text-muted);
}
.offspring-desc {
  font-family:var(--f-jp); font-size:0.8rem; color:var(--text-sub);
  flex-basis:100%;
}

/* Lineage chain */
.lineage-chain {
  display:flex; align-items:center; justify-content:center;
  gap:0.8rem; flex-wrap:wrap;
  padding:1rem 0;
}
.lineage-node {
  display:flex; flex-direction:column; align-items:center;
  padding:0.8rem 1.2rem;
  border:1px solid rgba(196,154,60,0.15);
  text-decoration:none; transition:all .3s ease;
  min-width:100px;
}
a.lineage-node:hover {
  border-color:rgba(196,154,60,0.3);
  background:var(--bg-card);
}
.lineage-current {
  border-color:var(--gold);
  background:rgba(196,154,60,0.08);
}
.lineage-node-name {
  font-family:var(--f-head); font-size:0.85rem;
  color:var(--text); letter-spacing:0.05em;
}
a.lineage-node .lineage-node-name { color:var(--text-sub); }
a.lineage-node:hover .lineage-node-name { color:var(--gold); }
.lineage-current .lineage-node-name { color:var(--gold); font-weight:700; }
.lineage-node-year {
  font-family:var(--f-head); font-size:0.7rem;
  color:var(--text-muted); margin-top:0.2rem;
}
.lineage-arrow {
  color:var(--gold); opacity:0.4; font-size:1.2rem;
}

/* References */
.ref-list {
  list-style:none; font-family:var(--f-body); font-size:0.88rem;
}
.ref-list li {
  padding:0.4rem 0;
  border-bottom:1px solid rgba(196,154,60,0.05);
}
.ref-list a {
  color:var(--text-sub); text-decoration:none;
  transition:color .3s;
}
.ref-list a:hover { color:var(--gold); }
.ref-list a::before {
  content:'→'; margin-right:0.5rem; color:var(--gold); opacity:0.4;
}

/* Era accent on horse pages */
.e1 .horse-era{color:var(--era1);border-color:rgba(201,169,110,.3)} .e1 .nav-gen{color:var(--era1)} .e1 .sec-title::after{background:var(--era1)}
.e2 .horse-era{color:var(--era2);border-color:rgba(126,168,126,.3)} .e2 .nav-gen{color:var(--era2)} .e2 .sec-title::after{background:var(--era2)}
.e3 .horse-era{color:var(--era3);border-color:rgba(110,143,175,.3)} .e3 .nav-gen{color:var(--era3)} .e3 .sec-title::after{background:var(--era3)}
.e4 .horse-era{color:var(--era4);border-color:rgba(212,148,58,.3)} .e4 .nav-gen{color:var(--era4)} .e4 .sec-title::after{background:var(--era4)}
.e5 .horse-era{color:var(--era5);border-color:rgba(184,92,111,.3)} .e5 .nav-gen{color:var(--era5)} .e5 .sec-title::after{background:var(--era5)}
.e6 .horse-era{color:var(--era6);border-color:rgba(138,132,190,.3)} .e6 .nav-gen{color:var(--era6)} .e6 .sec-title::after{background:var(--era6)}

/* Companion horse styles */
.horse-companion-badge {
  background: rgba(196,154,60,0.06);
  font-style: italic;
}
.nav-companion {
  font-style: italic;
  letter-spacing: 0.15em;
}

/* Responsive */
@media(max-width:768px){
  .horse-nav {
    flex-wrap:wrap; gap:0.5rem;
    justify-content:center; text-align:center;
  }
  .nav-back { order:1; width:auto; }
  .nav-gen { order:3; width:100%; font-size:0.6rem; }
  .prev-next { order:2; }
  .horse-hero { padding:4rem 1.5rem 2.5rem; }
  .horse-name { font-size:clamp(1.8rem,6vw,2.5rem); }
  .horse-main { padding:0 1.2rem 3rem; }
  .info-grid { grid-template-columns:1fr; }
  .info-item:nth-child(odd) { border-right:none; }
  .race-summary { flex-wrap:wrap; }
  .race-stat { min-width:50%; }
  .ped-table { min-width:700px; }
  .ped-table td { padding:0.3rem 0.4rem; font-size:0.72rem; }
  .lineage-chain { flex-direction:column; }
  .lineage-arrow { transform:rotate(90deg); }
}