:root { --bg:#f6f4ef; --card:#fff; --ink:#1f2328; --muted:#6b7280; --line:#e5e1d8; --accent:#8b5a2b; --ok:#2f7d4f; --warn:#b45309;
  --head:#2b2118; --head-ink:#f3e9d8; --code:#f0ece4; --tag:#eee; --ok-bg:#dcefe3; --warn-bg:#fdecd4; --sim-bg:#fffaf2; --err:#b91c1c; color-scheme: light; }
:root[data-theme="dark"] { --bg:#15171b; --card:#1e2127; --ink:#e6e3dc; --muted:#9aa0a6; --line:#2e3239; --accent:#c9955a; --ok:#5fbf7f; --warn:#e0a24a;
  --head:#0f1114; --head-ink:#e6e3dc; --code:#2a2e36; --tag:#2e3239; --ok-bg:#1f3a2a; --warn-bg:#40301a; --sim-bg:#23201a; --err:#f08080; color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#15171b; --card:#1e2127; --ink:#e6e3dc; --muted:#9aa0a6; --line:#2e3239; --accent:#c9955a; --ok:#5fbf7f; --warn:#e0a24a;
    --head:#0f1114; --head-ink:#e6e3dc; --code:#2a2e36; --tag:#2e3239; --ok-bg:#1f3a2a; --warn-bg:#40301a; --sim-bg:#23201a; --err:#f08080; color-scheme: dark; }
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--bg); }
header { background:var(--head); background:linear-gradient(180deg, var(--head) 0%, var(--head) 70%, color-mix(in srgb, var(--head) 85%, var(--accent)) 100%); color:var(--head-ink); padding:10px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; border-bottom:1px solid var(--line); border-bottom-color:color-mix(in srgb, var(--accent) 35%, transparent); position:sticky; top:0; z-index:10; }
header h1 { font-size:17px; margin:0; display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.02em; }
.brand { display:inline-flex; align-items:center; gap:9px; color:var(--head-ink); text-decoration:none; margin:0; }
.logo { width:30px; height:30px; flex:none; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.brand:hover .logo { transform:rotate(60deg); }
.wordmark { font-weight:800; letter-spacing:.12em; font-size:17px; }
.wordmark .bp { margin-left:5px; font-weight:400; letter-spacing:.2em; opacity:.85; font-family:Georgia,'Times New Roman',serif; font-style:italic; }
.subtitle { font-size:13px; opacity:.7; font-weight:400; letter-spacing:0; margin-left:4px; }
header a { color:var(--head-ink); opacity:.85; margin-left:14px; font-size:14px; }
header .muted { color:var(--head-ink); opacity:.75; }
.theme-btn { background:transparent; color:var(--head-ink); border:1px solid rgba(255,255,255,.25); padding:2px 8px; }
main { max-width:1100px; margin:0 auto; padding:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:14px; }
.card.sim { border-color:var(--warn); background:var(--sim-bg); }
h2 { font-size:16px; margin:0 0 10px; }
h3 { font-size:14px; margin:12px 0 6px; color:var(--muted); }
button, input, textarea, select { font:inherit; }
button { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:8px; padding:6px 12px; cursor:pointer; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.small { padding:2px 8px; font-size:13px; }
button:disabled { opacity:.5; cursor:default; }
input, textarea, select { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:8px; padding:6px 10px; width:100%; }
textarea { min-height:120px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { text-align:left; padding:4px 6px; border-bottom:1px solid var(--line); white-space:nowrap; }
.muted { color:var(--muted); font-size:13px; }
.tag { display:inline-block; font-size:12px; padding:0 6px; border-radius:6px; background:var(--tag); margin-left:4px; }
.tag.ok { background:var(--ok-bg); color:var(--ok); }
.tag.warn { background:var(--warn-bg); color:var(--warn); }
.match { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.match .vs { flex:1; min-width:160px; }
.match .win { font-weight:600; color:var(--ok); }
code { background:var(--code); padding:1px 5px; border-radius:4px; }
a { color:var(--accent); }
.error { color:var(--err); }
.hidden { display:none !important; }
.tabs { display:flex; gap:4px; margin-bottom:12px; border-bottom:1px solid var(--line); }
.tabs button { border:none; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--muted); padding:8px 14px; font-weight:600; }
.tabs button.on { color:var(--ink); border-bottom-color:var(--accent); }
/* faction chips: a tint, not a solid block, so status tags (待约/已约) stay the loudest thing in a row */
.fchip { --c:#666; display:inline-block; color:color-mix(in srgb, var(--c) 70%, var(--ink)); background:color-mix(in srgb, var(--c) 16%, transparent); border:1px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius:6px; padding:0 6px; font-size:12px; line-height:18px; }
.fsel { width:auto; padding:2px 4px; font-size:13px; }
.fsel.mine { border-color:var(--accent); }
.match.mine { background:var(--sim-bg); margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:6px; }
.mycard { border-color:var(--accent); }
.tasks { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.tasks li { display:flex; align-items:center; gap:8px; font-size:14px; }
.tasks li .text { flex:1; min-width:0; }
.tasks li .dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--muted); }
.tasks li.warn .dot { background:var(--warn); }
.tasks li.ok .dot { background:var(--ok); }
.tasks li.soft { color:var(--muted); }
.tasks li.soft .dot { background:var(--line); }
.tasks li button { flex:none; }
.me-strip { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; font-size:13px; padding:6px 8px; border:1px dashed var(--line); border-radius:8px; }
.admin-board { border-color:var(--line); }
.mycard .ranklink { color:var(--muted); text-decoration:none; font-size:13px; border-bottom:1px dotted var(--muted); }
.mycard .ranklink:hover { color:var(--ink); }
.mycard .idle { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; font-size:13px; }
/* 🔮 prediction toy */
.match .poll { width:100%; display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-left:40px; font-size:13px; }
.match .orb { font-size:12px; white-space:nowrap; }
.match button.orb { color:var(--muted); }
.match button.orb:hover { color:var(--ink); }
.match .poll.done { opacity:.85; }
.pbtn { border-radius:999px; padding:2px 10px; transition:transform .15s var(--ease), background-color .2s, border-color .2s; }
.pbtn:hover { transform:translateY(-1px); }
.pbtn.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.pbar { display:inline-block; width:70px; height:6px; border-radius:3px; background:var(--tag); overflow:hidden; }
.pbar i { display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .6s var(--ease); }
.mebar select { width:auto; padding:3px 8px; font-size:13px; }
.summary .head { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.summary .head h2 { margin:0; }
.summary .progress { margin-top:4px; }
details.rules { margin-top:8px; font-size:13px; }
details.rules summary { cursor:pointer; color:var(--muted); font-size:12px; user-select:none; }
details.rules > div { margin-top:6px; }
.tabs .cnt { font-weight:400; font-size:11px; color:var(--muted); margin-left:4px; }
.tabs button { white-space:nowrap; }
.tabs { overflow-x:auto; }
footer { text-align:center; padding:18px 16px 28px; font-size:12px; }
footer a { color:var(--muted); }
.progress { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.progress .bar { flex:0 0 140px; height:6px; border-radius:3px; background:var(--tag); overflow:hidden; }
.progress .bar span { display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .6s var(--ease); }
.timebox { border-left:2px solid var(--accent); padding-left:8px !important; margin-top:4px; }
.timebox input[type=datetime-local] { padding:2px 6px; font-size:13px; }
.match .mid { width:34px; }
.match .games { width:100%; display:flex; flex-direction:column; gap:2px; padding-left:40px; font-size:13px; }
.match .game { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.match .game .gwin { color:var(--ok); font-weight:600; margin-left:auto; }
.match .rec { width:100%; display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-left:40px; }
.match .videos { width:100%; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-left:40px; font-size:13px; }
.match .status { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; }
.match .rowend { margin-left:auto; }
.away { margin:6px 0 2px; }
/* writing down the agreed time: tap a slot */
.match .game.chips { gap:6px; }
.match .game.chips .chip { border-color:var(--accent); color:var(--accent); padding:4px 10px; font-size:13px; }
.match .game.chips .chip:hover { background:var(--accent); color:var(--card); }
.match .timebox { gap:6px; margin-top:4px; }
/* a match being played right now */
.tag.live { background:color-mix(in srgb, #e5484d 18%, transparent); color:#e5484d; font-weight:600; margin-left:0; white-space:nowrap; }
.livedot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#e5484d; margin-right:5px; vertical-align:1px; animation:livepulse 1.4s ease-in-out infinite; }
@keyframes livepulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.8); } }
@media (prefers-reduced-motion: reduce) { .livedot { animation:none; } }
.livetext { color:#e5484d; font-weight:600; }
.livenow { display:flex; flex-direction:column; gap:6px; margin-top:10px; padding:8px 10px; border:1px solid color-mix(in srgb, #e5484d 45%, transparent); border-radius:8px; background:color-mix(in srgb, #e5484d 7%, transparent); }
.livenow > div { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.livenow .who { color:var(--ink); font-weight:600; text-decoration:none; }
.livenow .watch, .match .watch { font-weight:600; white-space:nowrap; }
.match.live { border-left:2px solid #e5484d; padding-left:8px; }
.tabs .cnt.live { color:#e5484d; }
/* matches with a time, soonest first */
.upnext { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font-size:13px; margin-top:8px; }
.upnext a { color:var(--ink); text-decoration:none; white-space:nowrap; }
.upnext a b { color:var(--ok); font-weight:600; margin-right:2px; }
.upnext a:hover { text-decoration:underline; }
/* an undecided place: never looks like a player's name */
.slot { display:inline-flex; align-items:center; border:1px dashed var(--muted); border-radius:6px; font-size:12px; font-weight:400; color:var(--muted); vertical-align:1px; line-height:1.5; white-space:nowrap; max-width:100%; overflow:hidden; }
.slot i { font-style:normal; font-size:11px; background:var(--tag); padding:0 5px; letter-spacing:1px; }
.slot span { padding:0 6px; border-left:1px dashed var(--muted); overflow:hidden; text-overflow:ellipsis; }
.match.held { background:repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--muted) 6%, transparent) 8px 16px); }
.match.held .vs { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.match .tools { width:100%; display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-left:40px; font-size:13px; }
.match .score { padding:0 6px; }
.match .wintag { font-size:11px; color:var(--ok); margin-left:4px; border:1px solid var(--ok); border-radius:4px; padding:0 3px; vertical-align:1px; font-weight:500; }
.match.done .vs { color:var(--muted); }
.match.done .vs .win { color:var(--ok); }
.sub { font-size:12px; margin:10px 0 2px; }
.nowrap { white-space:nowrap; }
.loading { text-align:center; padding:28px 12px; }
.loading .spin { display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; margin-right:8px; vertical-align:-2px; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
/* ---------- stats ---------- */
.small { font-size:12px; margin-bottom:8px; }
.picker { float:right; font-weight:normal; font-size:13px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; margin:4px 0 10px; }
.kpi { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; display:flex; flex-direction:column; gap:2px; }
.kpi b { font-size:18px; line-height:1.2; }
.kpi span { font-size:12px; color:var(--muted); }
table.stats td, table.stats th { padding:5px 6px; }
table.stats tr.thin td { color:var(--muted); }
table.stats tr.thin .fchip { opacity:.7; }
.barcell { min-width:120px; }
.bar { display:inline-block; width:56px; height:8px; border-radius:4px; background:var(--tag); vertical-align:middle; margin-right:6px; overflow:hidden; }
.bar i { display:block; height:100%; background:var(--accent); border-radius:4px; transition:width .6s var(--ease); }
.bar.wr i { background:var(--ok); }
.ci { font-size:11px; margin-left:5px; }
.matrix td, .matrix th { text-align:center; }
.matrix th:first-child { text-align:left; }
.matrix td.up { color:var(--ok); font-weight:600; }
.matrix td.down { color:var(--err); }
.rank tr.grp td { background:var(--bg); font-size:12px; color:var(--muted); padding:6px 6px 3px; border-bottom:none; }
.rank tr.cut td { border-bottom:2px dashed var(--accent); font-size:11px; color:var(--accent); text-align:center; padding:2px; }
.rank tr.me td { background:var(--sim-bg); }
.rank tr.me td:nth-child(2) { font-weight:700; }
abbr { text-decoration:underline dotted; cursor:help; }
.feed .ev { display:flex; gap:10px; padding:5px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.45; }
.feed .ev .clock { flex:0 0 42px; font-variant-numeric:tabular-nums; font-size:13px; padding-top:1px; }
.feed .ev.mine { background:var(--sim-bg); margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:6px; }
.feed .ev .fchip { line-height:16px; font-size:11px; }
.pf { display:inline-flex; align-items:center; gap:3px; margin-right:6px; font-size:12px; }
.pf .ok { color:var(--ok); }
.ok { color:var(--ok); }
.match .vid { display:inline-flex; align-items:center; gap:4px; }
.vlink { color:var(--accent); text-decoration:none; }
.vlink:hover { text-decoration:underline; }
button.ghost { background:transparent; border-color:transparent; color:var(--muted); padding:0 4px; }
button.ghost:hover { color:var(--fg); border-color:var(--border); }
@media (max-width:600px) {
  body { font-size:14px; }
  main { padding:8px; }
  .card { padding:10px 12px; margin-bottom:10px; border-radius:8px; }
  header { padding:8px 12px; }
  header h1 { font-size:16px; }
  h2 { font-size:15px; margin-bottom:8px; }
  h3 { margin:10px 0 4px; }
  th, td { padding:3px 5px; font-size:13px; }
  .match { padding:4px 0; gap:6px; font-size:14px; }
  .match .vs { min-width:130px; }
  .match .mid { display:none; }
  .match .games, .match .rec, .match .tools, .match .videos, .match .poll { padding-left:0; }
  button.small { padding:2px 7px; font-size:12px; }
  .grid { grid-template-columns:1fr; }
  .tabs button { padding:8px 9px; }
}


/* ---------- motion ---------- */
:root { --ease:cubic-bezier(.2,.8,.2,1); }
.card { animation:rise .45s var(--ease) both; transition:border-color .25s, box-shadow .25s, background-color .3s; }
.card:nth-child(2) { animation-delay:.05s } .card:nth-child(3) { animation-delay:.1s } .card:nth-child(4) { animation-delay:.15s } .card:nth-child(n+5) { animation-delay:.2s }
@keyframes rise { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
#view.fade { animation:fade .25s var(--ease) both; }
@keyframes fade { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:none } }
button { transition:transform .12s var(--ease), background-color .2s, border-color .2s, box-shadow .2s, opacity .2s; }
button:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.12); }
button:not(:disabled):active { transform:translateY(0) scale(.97); box-shadow:none; }
button.primary:not(:disabled):hover { filter:brightness(1.08); }
.tabs button { transition:color .2s, border-color .2s; }
.tabs button.on { animation:none; }
.tag, .fchip, .chip { transition:transform .15s var(--ease); }
.match { transition:background-color .6s var(--ease); }
.match.changed { animation:flash 1.6s var(--ease) both; }
@keyframes flash { 0% { background-color:color-mix(in srgb, var(--accent) 35%, transparent) } 100% { background-color:transparent } }
.match.mine.changed { animation:flashmine 1.6s var(--ease) both; }
@keyframes flashmine { 0% { background-color:color-mix(in srgb, var(--accent) 45%, transparent) } 100% { background-color:var(--sim-bg) } }
#liveDot { animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.45 } }
.theme-btn { transition:transform .4s var(--ease), background-color .2s; }
.theme-btn:hover { transform:rotate(180deg); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(201,149,90,.25); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); transition:box-shadow .15s, border-color .15s; }
a { transition:opacity .15s; } a:hover { opacity:.8; }
.win { position:relative; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; } }