@charset "UTF-8";
:root{
  --bg:#f4f2ec; --card:#ffffff; --ink:#1d2320; --sub:#6b726e; --line:#e3e0d8;
  --turf:#1f5f3f; --turf-soft:#e3efe7; --gold:#b8862b; --gold-soft:#fbf1dc;
  --hit:#1f7a4a; --miss:#a7aca9; --wait:#3b4a6b; --warn:#a2452f;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#121614; --card:#1b201d; --ink:#e7ebe8; --sub:#9aa39e; --line:#2c332f;
    --turf:#5fbf8c; --turf-soft:#1f2d25; --gold:#e0b25a; --gold-soft:#2e2715;
    --hit:#6fd39b; --miss:#5d6461; --wait:#9fb2d8; --warn:#e48a72;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  -webkit-text-size-adjust:100%}
a{color:var(--turf)}
header.top{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;
  background:var(--turf);color:#fff}
@media (prefers-color-scheme: dark){header.top{background:#16382a}}
.brand{font-weight:800;letter-spacing:.06em;font-size:17px}
.me{font-size:13px}.me a{color:#fff;opacity:.8;margin-left:8px}
nav.tabs{display:flex;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
nav.tabs a{flex:1;text-align:center;padding:11px 4px;font-size:13px;text-decoration:none;color:var(--sub);
  border-bottom:3px solid transparent}
nav.tabs a.on{color:var(--turf);border-color:var(--turf);font-weight:700}
main{max-width:760px;margin:0 auto;padding:12px 16px 40px}
footer{text-align:center;color:var(--sub);font-size:12px;padding:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 14px 16px;margin:12px 0}
h2{font-size:16px;margin:0 0 10px}h2 small{color:var(--sub);font-weight:400;font-size:12px;margin-left:6px}
h3{font-size:14px;margin:14px 0 6px}
.hint{color:var(--sub);font-size:13px;margin:0 0 10px}
.flash{background:var(--turf-soft);color:var(--turf);border-radius:10px;padding:10px 12px;font-size:14px;margin:6px 0}
.warn{color:var(--warn);font-size:13px}
.empty{color:var(--sub);font-size:14px}
label{display:block;font-size:13px;color:var(--sub);margin:8px 0}
input,select,textarea,button{font:inherit;color:var(--ink)}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
label input,label select{margin-top:4px}
textarea{resize:vertical;margin:6px 0}
button{width:100%;padding:12px;border:0;border-radius:10px;background:var(--turf);color:#fff;font-weight:700;margin-top:8px;cursor:pointer}
@media (prefers-color-scheme: dark){button{color:#0f1a14}}
button.go{background:var(--gold)}
.row{display:flex;gap:8px;margin:6px 0}.row>*{flex:1;min-width:0}
.login{max-width:380px;margin:40px auto}
.pick{margin:8px 0}.filters{display:flex;gap:8px}
/* ランキング */
.rank{list-style:none;margin:0;padding:0}
.rank li{display:grid;grid-template-columns:28px 1fr auto;grid-template-areas:"pos who big" "pos sub sub";
  align-items:center;gap:0 10px;padding:10px 4px;border-top:1px solid var(--line)}
.rank li:first-child{border-top:0}
.rank .pos{grid-area:pos;font-weight:800;color:var(--sub);font-size:18px;text-align:center}
.rank .who{grid-area:who;font-weight:700}
.rank .who em{font-style:normal;font-size:11px;color:var(--turf);background:var(--turf-soft);padding:1px 6px;border-radius:8px;margin-left:4px}
.rank .big{grid-area:big;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.rank .sub{grid-area:sub;color:var(--sub);font-size:12px;line-height:1.4}
.rank li.top{background:var(--gold-soft);border-radius:10px}
.rank li.top .pos,.rank li.top .big{color:var(--gold)}
/* レース一覧 */
.races{display:grid;gap:8px}
.race{border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.rname{font-weight:700;font-size:13px;margin-bottom:2px}
.bet{display:flex;gap:8px;font-size:13px;align-items:baseline}
.bet .u{width:56px;color:var(--sub);flex:none}
.hit{color:var(--hit);font-weight:700}.hit b{margin-left:6px;background:var(--hit);color:var(--card);padding:0 6px;border-radius:6px}
.miss{color:var(--miss);text-decoration:line-through}
.wait{color:var(--wait)}.none{color:var(--miss)}
/* 自分の予想 */
.mine{list-style:none;padding:0;margin:0}
.mine li{display:flex;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.mine li:first-child{border-top:0}
.mine .rname{margin:0;width:64px;flex:none}
.mine small{color:var(--sub);margin-left:auto}
.mine form.del{margin:0}.mine .del button{width:32px;padding:4px;margin:0;background:transparent;color:var(--warn);font-size:18px}
.preview table{width:100%;border-collapse:collapse;font-size:14px}
.preview td,.preview th{padding:6px;border-bottom:1px solid var(--line);text-align:left}
/* 結果 */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;padding:4px 8px;border-radius:8px;border:1px solid var(--line);color:var(--sub)}
.chip.ok{background:var(--turf-soft);color:var(--turf);border-color:transparent}
/* 成績 */
.scroll{overflow-x:auto}
table.stats{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
table.stats th,table.stats td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
table.stats td:first-child{text-align:left;color:var(--sub)}
table.stats td small{color:var(--sub)}
table.stats .big{font-size:18px;font-weight:800;color:var(--gold)}
table.stats .win{background:var(--gold-soft);font-weight:700;color:var(--gold)}
.dim{color:var(--miss)}
.champs,.tops{list-style:none;margin:0;padding:0}
.champs li,.tops li{padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.champs li:first-child,.tops li:first-child{border-top:0}
.champs .when{display:block;color:var(--sub);font-size:12px}
.champs .who{font-weight:700}.champs b,.tops b{color:var(--gold)}
.champs small,.tops small{display:block;color:var(--sub);font-size:12px}
.tops{counter-reset:t}.tops li::before{counter-increment:t;content:counter(t) ".";color:var(--sub);margin-right:6px}

.center{text-align:center;margin-top:12px}
.login h2{text-align:center}