/* =========================================================
   site.css — 全ページ共通の骨格スタイル
   - 色はすべて theme.css のトークン（var）経由でテーマ追従
   - ページ固有の要素（順位表・試合カード等）は各HTMLの <style> に置く
   - ページ別の差分は次の変数で調整:
       --wrap      : コンテンツ最大幅（既定 1100px）
       --title-fs  : 見出しサイズ
       --accent    : 見出し/強調色（未指定時は --red）
       --glow-1/2  : 背景グローの色
   ========================================================= */

*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }

body{
  font-family:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  color:var(--paper);
  min-height:100vh;
  line-height:1.6;
  padding:0 18px 64px;
  background:
    radial-gradient(1000px 540px at 18% -8%, var(--glow-1), transparent 60%),
    radial-gradient(900px 700px at 100% 1%, var(--glow-2), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg) 62%);
  background-attachment:fixed;
}
/* フィルムグレイン */
body::after{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ position:relative; z-index:1; max-width:var(--wrap,1100px); margin:0 auto }

/* ---- 上部バー ---- */
.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted2); padding:18px 2px 0;
}
.topbar a{ color:var(--gold); text-decoration:none }
.topbar .host{ color:var(--gold) }

/* ---- ヘッダー ---- */
header{ position:relative; text-align:center; padding:52px 0 36px; overflow:hidden }
.watermark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-46%);
  font-family:Anton,sans-serif; font-size:clamp(160px,33vw,360px); line-height:.8;
  letter-spacing:-.01em; color:rgba(255,255,255,.024);
  pointer-events:none; user-select:none; white-space:nowrap; z-index:-1;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px;
}
.eyebrow::before,.eyebrow::after{ content:''; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)) }
.eyebrow::after{ background:linear-gradient(90deg,var(--gold),transparent) }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(232,18,59,.55); animation:pulse 2.2s infinite }

h1,.title{
  font-family:Anton,sans-serif; font-weight:400;
  font-size:var(--title-fs,clamp(46px,10vw,104px)); line-height:.92;
  letter-spacing:.01em; text-transform:uppercase; text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.title span,.title .f,h1 span{ color:var(--accent,var(--red)); text-shadow:0 0 38px var(--red-soft) }

.subtitle{ font-weight:700; font-size:clamp(15px,3.6vw,18px); letter-spacing:.04em; margin-top:14px; color:var(--paper) }
.lead{ margin-top:14px; color:var(--muted); font-size:14px }
.meta-line{
  display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
  margin-top:14px; font-size:12px; letter-spacing:.06em; color:var(--muted);
}
.meta-line .sep,.sep{ width:4px; height:4px; border-radius:50%; background:var(--accent,var(--red)) }

/* ---- セクション見出し ---- */
.section-title{
  display:flex; align-items:center; gap:14px;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin:0 2px 16px;
}
.section-title::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--line2),transparent) }
.section-title b{ color:var(--paper); font-weight:700 }

/* ---- 節（マッチデー）見出し ---- */
.round{ display:flex; align-items:center; gap:16px; margin:30px 2px 16px }
.round:first-of-type{ margin-top:0 }
.round-no{
  font-family:Anton,sans-serif; font-size:34px; line-height:1;
  background:linear-gradient(180deg,#fff,#7d869b);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.round-info{ display:flex; flex-direction:column }
.round-name{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:700 }
.round-date{ font-size:14px; font-weight:700; color:var(--paper) }
.round-tag{ font-size:10px; letter-spacing:.12em; color:var(--muted2); border:1px solid var(--line2); border-radius:999px; padding:3px 9px; white-space:nowrap }
.round-line{ flex:1; height:1px; background:linear-gradient(90deg,var(--line2),transparent) }

/* ---- 注記ボックス ---- */
.notice{
  background:linear-gradient(180deg,var(--red-soft),rgba(127,127,127,.03));
  border:1px solid var(--red-line); border-radius:16px;
  padding:16px 18px; margin-bottom:24px; color:var(--muted); font-size:13px; line-height:1.8;
}
.notice b{ color:var(--paper) }
.notice a{ color:var(--gold); text-decoration:none; font-weight:700 }
.notice a:hover{ text-decoration:underline }

/* ---- リンクピル（関連ページ）---- */
.links,.page-links,.quick-links{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:30px }
.quick-links{ margin:-8px 0 34px }
.links a,.page-links a,.quick-links a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border:1px solid var(--line2); border-radius:999px;
  background:rgba(127,127,127,.06); color:var(--paper); text-decoration:none;
  font-size:13px; font-weight:700; transition:border-color .18s ease, background .18s ease;
}
.quick-links a{ padding:9px 12px; font-size:12px }
.links a:hover,.page-links a:hover,.quick-links a:hover{ border-color:var(--gold) }
.links a.primary,.page-links a.primary,.quick-links a.primary{ border-color:var(--red-line); background:var(--red-soft) }

/* ---- チームガイド（リード文）---- */
.team-intro{
  position:relative;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px 28px 26px 34px;
  margin-bottom:28px;
  box-shadow:0 22px 50px -32px rgba(0,0,0,.9);
}
.team-intro::before{
  content:''; position:absolute; left:0; top:14px; bottom:14px;
  width:4px; border-radius:0 4px 4px 0;
  background:var(--accent,var(--red));
}
.team-intro .intro-lede{
  font-size:15.5px; font-weight:700; color:var(--paper); line-height:1.82; margin-bottom:1.25em;
}
.team-intro p{
  color:#cfd3dc; font-size:14px; line-height:1.95; margin-bottom:1.15em;
}
.team-intro p:last-child{ margin-bottom:0 }
.team-intro .intro-cta{ color:var(--paper); font-weight:700 }
.team-intro strong{ color:var(--paper) }
:root[data-theme="light"] .team-intro p{ color:#3a4557 }
:root[data-theme="light"] .team-intro strong,.team-intro .intro-cta{ color:var(--paper) }

/* PC: 2段組レイアウト */
@media (min-width: 721px) {
  .team-intro{
    columns: 2;
    column-gap: 32px;
    column-rule: 1px solid var(--line);
  }
  .team-intro .intro-lede{
    column-span: all;          /* リードは全幅スパン */
    margin-bottom: 1.1em;
    padding-bottom: 1.1em;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width:640px){
  .team-intro{ padding:18px 18px 18px 24px }
  .team-intro .intro-lede{ font-size:14px }
  .team-intro p{ font-size:13.5px; line-height:1.85 }
}

/* ---- フッター ---- */
footer{ text-align:center; margin-top:46px; padding-top:24px; border-top:1px solid var(--line); font-size:11px; letter-spacing:.1em; color:var(--muted2) }
footer .mark{ color:var(--gold); font-weight:700 }
.sources{ margin-top:14px; font-size:10.5px; letter-spacing:.04em; color:var(--muted2); line-height:1.9 }
.sources a{ color:var(--muted); text-decoration:none }
.sources a:hover{ color:var(--gold) }

/* ---- ロード時のリビール ---- */
.reveal{ opacity:0; transform:translateY(18px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:var(--d,0s) }
@keyframes rise{ to{ opacity:1; transform:none } }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(232,18,59,.5) } 70%{ box-shadow:0 0 0 8px rgba(232,18,59,0) } 100%{ box-shadow:0 0 0 0 rgba(232,18,59,0) } }
@media (prefers-reduced-motion:reduce){
  .reveal{ animation:none; opacity:1; transform:none }
  .eyebrow .dot{ animation:none }
}

@media (max-width:640px){
  body{ padding:0 14px 54px }
  header{ padding:40px 0 28px }
  .topbar{ font-size:10px; letter-spacing:.12em }
}