:root{
  color-scheme:dark;
  --bg:#000;--glow1:rgba(120,140,255,.16);--glow2:rgba(255,255,255,.07);
  --text:#f2f2f2;--text-strong:#fff;--text-soft:rgba(255,255,255,.8);--text-stat:rgba(255,255,255,.82);
  --muted:rgba(255,255,255,.62);--muted2:rgba(255,255,255,.5);--faint:rgba(255,255,255,.38);
  --panel:rgba(255,255,255,.055);--border:rgba(255,255,255,.13);--border-strong:rgba(255,255,255,.2);
  --control-bg:rgba(255,255,255,.08);--control-hover:rgba(255,255,255,.14);--thumb-bg:rgba(255,255,255,.06);--menu-bg:#1d2130;
  --accent:#9fb0ff;--on-accent:#000;--bar1:#7c8cff;--bar2:#b6c0ff;--gold:#ffd76a;--rank:rgba(255,255,255,.7);
  --badge-border:rgba(255,255,255,.25);--badge-text:rgba(255,255,255,.75);
  --notice-bg:rgba(255,190,90,.12);--notice-border:rgba(255,190,90,.4);--notice-text:#ffe0b0;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#f2f4f8;--glow1:rgba(120,140,255,.2);--glow2:rgba(255,255,255,.8);
    --text:#1c1e28;--text-strong:#11131a;--text-soft:rgba(28,30,40,.82);--text-stat:rgba(28,30,40,.85);
    --muted:rgba(28,30,40,.64);--muted2:rgba(28,30,40,.56);--faint:rgba(28,30,40,.45);
    --panel:rgba(255,255,255,.85);--border:rgba(28,30,40,.12);--border-strong:rgba(28,30,40,.24);
    --control-bg:rgba(28,30,40,.05);--control-hover:rgba(28,30,40,.1);--thumb-bg:rgba(28,30,40,.07);--menu-bg:#ffffff;
    --accent:#4a5bd8;--on-accent:#fff;--bar1:#5b6cf0;--bar2:#8e9bff;--gold:#c98a00;--rank:rgba(28,30,40,.55);
    --badge-border:rgba(28,30,40,.26);--badge-text:rgba(28,30,40,.72);
    --notice-bg:rgba(255,170,60,.16);--notice-border:rgba(200,120,0,.45);--notice-text:#6b4300;
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f2f4f8;--glow1:rgba(120,140,255,.2);--glow2:rgba(255,255,255,.8);
  --text:#1c1e28;--text-strong:#11131a;--text-soft:rgba(28,30,40,.82);--text-stat:rgba(28,30,40,.85);
  --muted:rgba(28,30,40,.64);--muted2:rgba(28,30,40,.56);--faint:rgba(28,30,40,.45);
  --panel:rgba(255,255,255,.85);--border:rgba(28,30,40,.12);--border-strong:rgba(28,30,40,.24);
  --control-bg:rgba(28,30,40,.05);--control-hover:rgba(28,30,40,.1);--thumb-bg:rgba(28,30,40,.07);--menu-bg:#ffffff;
  --accent:#4a5bd8;--on-accent:#fff;--bar1:#5b6cf0;--bar2:#8e9bff;--gold:#c98a00;--rank:rgba(28,30,40,.55);
  --badge-border:rgba(28,30,40,.26);--badge-text:rgba(28,30,40,.72);
  --notice-bg:rgba(255,170,60,.16);--notice-border:rgba(200,120,0,.45);--notice-text:#6b4300;
}
*{box-sizing:border-box;margin:0}
html{background:var(--bg)}
body{
  min-height:100vh;
  color:var(--text);
  font-family:var(--font,system-ui,-apple-system,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif);
  line-height:1.5;
  background:
    radial-gradient(60vmax 40vmax at 15% -5%,var(--glow1),transparent 60%),
    radial-gradient(50vmax 40vmax at 100% 30%,var(--glow2),transparent 60%),
    var(--bg);
  background-attachment:fixed;
  padding:max(32px,env(safe-area-inset-top)) 16px max(40px,env(safe-area-inset-bottom));
}
main{max-width:920px;margin:0 auto}
header{margin-bottom:20px}
.tagline{margin:2px 0 0;font-size:13px;color:var(--text-soft)}
.tagline a{color:inherit;text-decoration:underline;text-decoration-color:var(--border-strong)}
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
h1{font-size:clamp(24px,5.5vw,34px);font-weight:700;letter-spacing:.04em}
#status{margin-top:6px;color:var(--muted);font-size:13px}
.ev{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ev{position:relative}
.ev button.off{position:absolute;top:7px;right:9px;font:inherit;font-size:13px;border:1px solid var(--line);background:var(--ctl);color:var(--muted);border-radius:8px;width:26px;height:24px;padding:0;cursor:pointer;line-height:1}
.ev button.off:hover{color:var(--text)}
.ev h2{padding-right:2.4em;margin:0 0 2px;font-size:14px;line-height:1.4}
.ev .kind{display:inline-block;font-size:11px;font-weight:700;line-height:1.5;padding:0 7px;margin-right:6px;border-radius:999px;vertical-align:1px;color:#fff;background:#d6336c}
.ev .kind.ad{background:#2f7de1}
.ev.done{outline:1px dashed color-mix(in srgb,var(--muted) 55%,transparent);outline-offset:-1px;background:transparent} /* 大きさが変わらないよう、枠でなく外線で点線にする */
.ev.done h2,.ev.done .meta{color:var(--muted)}
.ev .until{margin:6px 0 0;text-align:right;font-size:12px;color:var(--muted)}
.cols .ev{display:flex;flex-direction:column}
.cols .ev .until{margin-top:auto;padding-top:6px}
.ev .kind.end{background:#4b5563;letter-spacing:.05em}
.ev h2 a{color:inherit;text-decoration:none} .ev h2 a:hover{text-decoration:underline}
.ev .meta{margin:0 0 6px;color:var(--muted);font-size:12px}
.ev ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.ev li{display:flex;align-items:center;gap:6px;min-width:0}
/* 名前は長さに合わせて詰め、縦に並べるときはポイントの位置をそろえる */
.ev .ph{display:inline-block;width:24px;height:24px}
.ev .sc{text-align:right;flex:none}
.ev ol.col{display:grid;grid-template-columns:auto auto auto auto;justify-content:start;align-items:center;gap:4px 8px} /* 縦に並べるときは、名前の列を一番長い名前に合わせ、ポイントの位置をそろえる */
.ev ol.col li{display:contents}

.ev ol.col .nm{max-width:16em}
.ev .rk{font-weight:700;min-width:2.2em;color:var(--muted)}
.ev li.r1 .rk{color:#c28a00}
.ev img{width:24px;height:24px;border-radius:50%;object-fit:cover;background:var(--line)}
.ev .nm{max-width:11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;text-decoration:none}
.ev .nm:hover{text-decoration:underline}
.ev li[hidden]{display:none!important}
select,button.act{
  font:inherit;font-size:13px;color:var(--text);
  background:var(--control-bg);border:1px solid var(--border-strong);
  border-radius:8px;padding:5px 10px;
}
button.act{cursor:pointer;white-space:nowrap}
footer{margin-top:28px;font-size:12px;color:var(--faint)}
footer a{color:inherit}
.cols{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 14px;scroll-snap-type:x proximity;align-items:stretch} /* 並べたカードは、一番高いものに高さをそろえる */
.cols .ev{flex:0 0 min(88vw,380px);scroll-snap-align:start}
/* 題名は3行分、日時の行は2行分の場所を空け、順位の始まる位置をそろえる(長い題名は3行で切る) */
.cols .ev h2{height:4.6em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cols .ev .meta{min-height:3em}
.cols .ev ol.col{justify-content:stretch;grid-template-columns:auto auto minmax(0,1fr) auto}
.cols .ev ol.col .nm{max-width:none}
.ev .empty{color:var(--muted);font-size:13px}
.tools{display:flex;flex-wrap:wrap;gap:8px 8px;align-items:center;margin:0 0 12px}
.tools button.act[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tools #st{color:var(--muted);font-size:13px;margin:0 0 0 6px}
main.wide{max-width:none}

/* スマホ(700px以下)は、PCと同じカードを、横にスライドせず縦に並べる */
@media (max-width:700px){
  .cols.stack{display:grid;overflow:visible;gap:12px;grid-template-columns:minmax(0,1fr)}
  .cols.stack .ev{flex:none}
  .cols.stack .ev h2{height:auto}
  .cols.stack .ev .meta{min-height:0}
}

.ev button.mo{font:inherit;font-size:12px;margin-top:8px;border:1px solid var(--border-strong);background:var(--control-bg);color:var(--text);border-radius:8px;padding:2px 10px;cursor:pointer}

/* 「もっと見る」のポップアップ(100位ずつ) */
.evpop{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:12px}
.evbox2,.evbox2.ev{background:var(--bg);padding:0;color:var(--text);border:1px solid var(--border-strong);border-radius:14px;width:min(640px,100%);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.evph{display:flex;align-items:flex-start;gap:10px;padding:12px 14px 6px}
.evph h3{flex:1;margin:0;font-size:14px;line-height:1.4}
.evpages{display:flex;flex-wrap:wrap;gap:6px;padding:4px 14px 8px}
.evpages button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.evpbody{overflow:auto;padding:4px 14px 14px;min-height:0}
.evpbody ol.col{grid-template-columns:auto auto minmax(0,1fr) auto}
.evpbody ol.col .nm{max-width:none}
body.evpopon{overflow:hidden}

/* 広い画面の「もっと見る」: 横に大きく開き、50位ずつ左右の2列に分ける */
.evbox2.wide{width:min(1000px,100%)}
.evpbody.cards .evsec+.evsec{margin-top:14px}
.evpbody.cards h4{margin:0 0 6px;font-size:12px;color:var(--muted)}
.evcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px}
.evcd{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);min-width:0}
.evcd .rk{font-size:13px;min-width:2.4em;white-space:nowrap;font-weight:700;color:var(--muted)}
.evcd.r1 .rk{color:#c28a00}
.evcd img,.evcd .ph{width:28px;height:28px;border-radius:50%;flex:none;object-fit:cover;background:var(--line)}
.evcd .tx{display:flex;flex-direction:row;align-items:baseline;gap:8px;min-width:0;flex:1}
.evcd .nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evcd .nm{max-width:none;font-size:15px;font-weight:700;color:inherit}
.evcd .sc{font-size:13px;font-weight:700;color:var(--text);flex:none;margin-left:auto;white-space:nowrap}