:root{
  --bg:#eef0ec; --surface:#ffffff; --ink:#13242a; --ink2:#4a5a61; --muted:#7c8a90;
  --line:#e2e5e0; --line2:#d3d8d2; --water:#0f2a33; --accent:#0e7c66; --accent-soft:#dff0ea;
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#10171a; --surface:#182226; --ink:#eef3f2; --ink2:#aebcc0; --muted:#7e8d92;
    --line:#243136; --line2:#2e3d43; --water:#0a1b20; --accent:#3bbf9e; --accent-soft:#16302a; }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic UI","Yu Gothic",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.6;}
.wrap{max-width:680px; margin:0 auto; padding:0 14px 40px;}
.nums{font-variant-numeric:tabular-nums lining-nums;}

.topbar{background:var(--water); color:#eaf3f0; border-radius:0 0 var(--radius) var(--radius);
  padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:relative; overflow:hidden;}
.topbar::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, transparent 0 17px, rgba(255,255,255,.05) 17px 18px);}
.brand{display:flex; align-items:center; gap:11px; position:relative; z-index:1;}
.lanes{display:grid; grid-template-rows:repeat(6,1fr); gap:2px; width:16px; height:34px;}
.lanes i{display:block; border-radius:2px;}
.brand h1{font-size:18px; font-weight:600; margin:0; letter-spacing:.04em;}
.brand p{font-size:11.5px; margin:1px 0 0; color:#9fc3ba; letter-spacing:.02em;}
.datepill{position:relative; z-index:1; font-size:12.5px; color:#cfe6df; white-space:nowrap;
  border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:4px 11px;}
.datameta{font-size:11px; color:var(--muted); text-align:right; margin:6px 4px 0;}
.stale-warn{background:#fdf3e0; border:1px solid #e8c468; color:#7a5a13; border-radius:var(--radius);
  padding:10px 14px; margin:8px 0 0; font-size:12.5px; line-height:1.6;}
.stale-warn a{color:inherit; text-decoration:underline; font-weight:600;}
@media (prefers-color-scheme: dark){
  .stale-warn{background:#3a2f12; border-color:#6b5620; color:#e8c468;}
}

.feat{display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--accent); border-radius:var(--radius);
  margin-top:16px; padding:15px 18px; transition:opacity .12s;}
.feat:active{opacity:.75;}
.feat-eyebrow{font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.05em;}
.feat-catch{font-size:19px; font-weight:800; color:var(--ink); margin-top:6px; line-height:1.4;}
.feat-basis{font-size:12px; color:var(--ink2); margin-top:4px; line-height:1.55;}
.feat-meta{font-size:12px; color:var(--ink2); margin-top:9px; padding-top:9px; border-top:1px dashed var(--line2);}
.feat-meta b{color:var(--ink); font-weight:600;}
.feat-k{font-size:10.5px; font-weight:600; color:var(--ink2); border:1px solid var(--line2);
  border-radius:5px; padding:1px 6px; margin-left:3px;}

.seg{margin-top:18px;}
.seg-label{font-size:11.5px; color:var(--muted); letter-spacing:.08em; margin:0 0 7px 2px;}
.chips{display:flex; gap:7px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:thin;}
.chips::-webkit-scrollbar{height:5px} .chips::-webkit-scrollbar-thumb{background:var(--line2); border-radius:3px}
.chip{flex:0 0 auto; border:1px solid var(--line2); background:var(--surface); color:var(--ink2);
  font:inherit; font-size:13.5px; padding:7px 13px; border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;}
.chip:hover{border-color:var(--accent)}
.chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.chip[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;}
.chips.races .chip{min-width:46px; text-align:center; padding:7px 10px;}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  margin-top:18px; overflow:hidden;}
.card-head{padding:14px 18px; border-bottom:1px solid var(--line); display:flex;
  align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap;}
.card-head .ttl{font-size:16px; font-weight:600;}
.card-head .ttl span{font-weight:400; color:var(--ink2); font-size:13.5px; margin-left:6px;}
.card-head .dl{font-size:12.5px; color:var(--muted);}

.boat{display:grid; grid-template-columns:40px 1fr auto; gap:13px; align-items:center;
  padding:13px 18px; border-bottom:1px solid var(--line);}
.boat:last-child{border-bottom:none}
.badge{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:700; border:1px solid rgba(125,125,125,.3);}
.bname{font-size:15px; font-weight:600;}
.bname a{color:inherit; text-decoration:underline; text-decoration-color:var(--line2);
  text-decoration-thickness:1.5px; text-underline-offset:3px; display:inline-block; padding:3px 0;}
.bname a:active{opacity:.6;}
.bname a::after{content:"›"; display:inline-block; margin-left:2px; color:var(--accent); font-weight:700;}
.bk{font-size:11px; font-weight:600; color:var(--ink2); border:1px solid var(--line2);
  border-radius:5px; padding:1px 6px; margin-left:5px;}
.fbadge{font-size:11px; font-weight:700; background:#fde7e7; color:#b32b2b; border:1px solid #f3c9c9;
  border-radius:5px; padding:1px 6px; margin-left:5px; cursor:help;}
@media (prefers-color-scheme: dark){
  .fbadge{background:#3a1d1d; color:#f3a3a3; border-color:#542a2a;}
}
.bmeta{font-size:12.5px; color:var(--ink2); margin-top:2px;}
.kon{font-size:12px; color:var(--ink2); margin-top:3px;}
.kon b{color:var(--ink); font-weight:600;}
.kon.thin{color:var(--muted); font-style:italic;}
.st-tag{display:inline-block; font-size:11px; font-weight:600; border-radius:5px; padding:1px 6px; margin-left:6px; border:1px solid transparent; vertical-align:1px;}
.st-tag .stl{font-weight:400; margin-left:3px; opacity:.85;}
.st-a{background:#fde7e7; color:#b32b2b; border-color:#f3c9c9;}
.st-n{background:#eceef0; color:#54616a; border-color:#dde1e4;}
.st-c{background:#e3eef0; color:#2b6b78; border-color:#cfe1e4;}
@media (prefers-color-scheme: dark){
  .st-a{background:#3a1d1d; color:#f3a3a3; border-color:#542a2a;}
  .st-n{background:#222d32; color:#9fb0b6; border-color:#33424a;}
  .st-c{background:#16323a; color:#7fcdd9; border-color:#234a54;}
}
.stats{display:flex; gap:15px; align-items:flex-start;}
.stat{text-align:right;}
.stat .l{font-size:10.5px; color:var(--muted);}
.stat .v{font-size:15px; font-weight:600;}
.stat .v.lwthin{color:var(--muted); font-weight:400; font-style:italic;}
.stat.mo{min-width:62px;}
.bar{height:4px; background:var(--bg); border-radius:2px; margin-top:4px; overflow:hidden;}
.bar i{display:block; height:100%; background:var(--accent);}
.mprev{font-size:10px; color:var(--ink2); margin-top:4px; white-space:nowrap;}
.mprev.thin{color:var(--muted); font-style:italic;}
.mprev a{color:inherit; text-decoration:underline; text-decoration-color:var(--line2); text-underline-offset:2px;}

.trend{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-top:14px; padding:14px 18px;}
.trend-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.trend-ttl{font-size:14px; font-weight:600; display:flex; align-items:center; gap:6px;}
.trend-ttl .pin{width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block;}
.trend-sub{font-size:11.5px; color:var(--muted);}
.trow{display:grid; grid-template-columns:74px 1fr 58px; align-items:center; gap:10px; padding:4px 0;}
.trow.tthin{opacity:.55;}
.tcourse{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink2);}
.tdot{width:10px; height:10px; border-radius:3px; border:1px solid rgba(125,125,125,.4); flex:0 0 auto;}
.tbar{height:8px; background:var(--bg); border-radius:4px; overflow:hidden; position:relative;}
.tbar i{display:block; height:100%; position:absolute; left:0; top:0; border-radius:4px;}
.tbar i.p3{background:var(--accent); opacity:.32;}
.tbar i.win{background:var(--accent);}
.tval-wrap{display:flex; flex-direction:column; align-items:flex-end; line-height:1.3;}
.tval{font-size:13px; font-weight:600; text-align:right;}
.tval-sub{font-size:10.5px; font-weight:400; color:var(--muted);}
.tlegend{font-size:11px; color:var(--muted); margin:0 0 8px; display:flex; flex-wrap:wrap; gap:4px 14px;}
.tlegend span{display:inline-flex; align-items:center; gap:5px;}
.tlegend b{width:10px; height:10px; border-radius:3px; display:inline-block; background:var(--accent);}
.tlegend b.p3{opacity:.32;}
.thint{font-size:12px; color:var(--ink2); margin-top:10px; padding-top:10px; border-top:1px dashed var(--line2); line-height:1.55;}
.tna{font-size:12.5px; color:var(--muted); padding:4px 0;}

.wsec{margin-top:12px; padding-top:12px; border-top:1px dashed var(--line2);}
.wsec-head{font-size:13px; font-weight:600; display:flex; align-items:baseline; gap:8px; margin-bottom:9px;}
.wsec-head span{font-size:11px; color:var(--muted); font-weight:400;}
.wgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.wcell{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 6px 7px; text-align:center;}
.wcell.wtop{border-color:var(--accent); background:var(--accent-soft);}
.wemo{font-size:12px; color:var(--ink2);}
.wwin{font-size:19px; font-weight:700; margin-top:2px;}
.wn{font-size:10.5px; color:var(--muted); margin-top:1px;}
.wcell.wthin{opacity:.5;}
.whint{font-size:12px; color:var(--ink); margin-top:10px; line-height:1.55;}
.whint b{color:var(--accent);}
.wnote{font-size:11px; color:var(--muted); margin-top:6px;}

.krow{display:grid; grid-template-columns:74px 1fr 44px; align-items:center; gap:10px; padding:3px 0;}
.krow.kthin{opacity:.55;}
.kname{font-size:12.5px; color:var(--ink2);}
.kbar{height:8px; background:var(--bg); border-radius:4px; overflow:hidden;}
.kbar i{display:block; height:100%; background:var(--line2);}
.krow.ktop .kbar i{background:var(--accent);}
.krow.ktop .kname{color:var(--ink); font-weight:600;}
.kval{font-size:13px; font-weight:600; text-align:right;}
.krow.kthin .kval{font-weight:400;}

.legend{font-size:11.5px; color:var(--muted); margin:12px 4px 0; display:flex; flex-wrap:wrap; gap:4px 12px;}
.legend span{display:inline-flex; align-items:center; gap:5px;}
.legend b{width:11px; height:11px; border-radius:3px; border:1px solid rgba(125,125,125,.3); display:inline-block;}

.glossary{margin-top:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:0 18px;}
.glossary summary{cursor:pointer; padding:13px 0; font-size:13px; font-weight:600; color:var(--ink2); list-style:none; position:relative;}
.glossary summary::-webkit-details-marker{display:none;}
.glossary summary::after{content:"もっと見る ▾"; position:absolute; right:0; top:13px; font-size:11.5px; font-weight:400; color:var(--muted);}
.glossary[open] summary::after{content:"閉じる ▴";}
.glossary-body{margin:0; padding:2px 0 14px; font-size:12.5px; color:var(--ink2); line-height:1.6;}
.glossary-body dt{font-weight:600; color:var(--ink); margin-top:11px;}
.glossary-body dt:first-child{margin-top:0;}
.glossary-body dd{margin:2px 0 0;}
.glossary-sub{margin:4px 0 0; padding-left:18px; list-style:disc;}
.glossary-sub li{margin-top:2px;}
.term{cursor:help;}
.foot{margin-top:20px; padding:14px 4px 0; border-top:1px solid var(--line); color:var(--muted); font-size:12px;}
.foot b{color:var(--ink2); font-weight:600;}
.foot a{color:var(--accent); text-decoration:underline; text-decoration-color:var(--line2);}
.seg-row{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.guide-link{font-size:12px; color:var(--ink2); text-decoration:none; white-space:nowrap; margin:0 2px 7px 0;}
.guide-link:hover{color:var(--accent)}
.racelink{padding:6px 14px 2px; font-size:11.5px;}
.racelink a{color:var(--accent); text-decoration:underline; text-decoration-color:var(--line2);}
@media (max-width:460px){
  /* スマホ幅だけ：バッジ+選手情報を上段、勝率・モーター欄は下段に全幅で並べ替える。
     PC側のルール(.boat/.stats等の基本定義)は一切変更せず、ここで上書きするだけ。 */
  .boat{
    grid-template-columns:36px 1fr;
    grid-auto-rows:auto;
    gap:10px;
    padding:12px 14px;
  }
  .bname{font-size:14px}
  .stats{
    grid-column:1 / -1;
    justify-content:space-between;
    gap:8px;
    margin-top:2px;
    padding-top:10px;
    border-top:1px dashed var(--line2);
  }
  .stat{flex:1; text-align:center;}
  .stat .v{font-size:14px}
  .stat.mo{min-width:0;}
  .mprev{white-space:normal; text-align:center;}
}
@media (min-width:461px){
  /* PC幅だけ：成績ブロック(全国勝率/当地勝率/モーター2率)の列幅を固定し、
     選手名やプロフィールの文字数・前回使用者名の長さで横位置がズレないようにする。
     さらに各列自身も固定幅にし、「全国3着内」「前回：〜」等の付随テキストの
     長さで当地勝率・モーター2率の数字が個別にズレないようにする。
     スマホ側(上のmax-width:460pxブロック)には一切触れない。 */
  .boat{grid-template-columns:40px 1fr 276px;}
  .stat.nw{width:46px; flex:0 0 auto;}
  .stat.lw{width:82px; flex:0 0 auto;}
  .stat.mo{width:112px; min-width:0; flex:0 0 auto;}
}

.back{margin:0 4px 14px; font-size:13px;}
.back a{color:var(--accent); text-decoration:underline;}
.topbar .brand h1{white-space:nowrap;}