/* Kumoclaw · thème « soie et toile » */
:root{
  --bg:#f7f5f9; --fg:#221d2b; --muted:#6f6879; --card:#ffffffd9; --line:#e5e0ea;
  --accent:#c8283c; --accent-soft:#c8283c14; --silk:#ffffff; --web:#4a3a5c26;
  --win:#2a8f63; --loss:#b4566a; --dq:#8e8798;
  --up-bg:#e2f3ea; --down-bg:#f7e4e8; --eq-bg:#eeebf1;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#13101a; --fg:#eeeaf3; --muted:#9e96aa; --card:#1d1926d9; --line:#2f2939;
  --accent:#ff4d63; --accent-soft:#ff4d6317; --silk:#f4f1f8; --web:#ffffff1c;
  --win:#5ccb95; --loss:#e88a9a; --dq:#8e8798;
  --up-bg:#183428; --down-bg:#3a1c25; --eq-bg:#282331;
}}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--fg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;position:relative;min-height:100vh;overflow-x:hidden}
/* toiles de fond : grande en haut à droite, plus petite en bas à gauche */
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:-1;background:var(--web);
  -webkit-mask:url(/img/toile.svg) no-repeat center/contain;mask:url(/img/toile.svg) no-repeat center/contain}
body::before{top:0;right:0;width:min(560px,75vw);aspect-ratio:1}
body::after{bottom:0;left:0;width:min(320px,50vw);aspect-ratio:1;transform:rotate(180deg);opacity:.7}
main{max-width:960px;margin:0 auto;padding:2.5rem 1.25rem 4rem}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}
::selection{background:var(--accent);color:#fff}
nav{margin-bottom:1.5rem;font-size:.95rem}
h1{font-size:2.1rem;line-height:1.15;margin:0 0 .4rem;letter-spacing:-.015em}
h2{font-size:1.1rem;margin:2.5rem 0 .9rem;display:flex;align-items:center;gap:.6rem}
/* fil de soie après les titres de section */
h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.sub{color:var(--muted);margin:0 0 2rem}
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:2rem}
.summary>div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;color:var(--muted);backdrop-filter:blur(6px)}
.big{display:block;font-size:1.9rem;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;
  backdrop-filter:blur(6px);transition:border-color .2s,transform .2s}
.card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-2px)}
/* petite toile dans le coin de chaque carte */
.card::after{content:"";position:absolute;top:0;right:0;width:64px;height:64px;pointer-events:none;background:var(--web);
  border-top-right-radius:14px;-webkit-mask:url(/img/toile-mini.svg) no-repeat center/contain;mask:url(/img/toile-mini.svg) no-repeat center/contain}
.card header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;position:relative;z-index:1}
.card h3{margin:0;font-size:1.1rem}
.badge{font-size:.75rem;font-weight:600;padding:.15rem .55rem;border-radius:99px;white-space:nowrap}
.badge.up{background:var(--up-bg);color:var(--win)}.badge.down{background:var(--down-bg);color:var(--loss)}
.badge.eq{background:var(--eq-bg);color:var(--muted)}
.stats{display:flex;gap:1.5rem;margin:.8rem 0}.stats div{display:flex;flex-direction:column}
.stats dt{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.stats dd{margin:0;font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums}
.stats small{font-size:.8rem;color:var(--muted);font-weight:400}
.sets{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sets li{display:grid;grid-template-columns:7.5rem 1fr auto;gap:.5rem;align-items:center;padding:.45rem 0 .45rem .6rem;
  border-bottom:1px solid var(--line);font-size:.9rem;border-left:2px solid transparent}
.sets li.win{border-left-color:var(--win)}.sets li.loss{border-left-color:var(--loss)}.sets li.dq{border-left-color:var(--dq);color:var(--muted)}
.round{color:var(--muted);font-size:.82rem}.seed{color:var(--muted);font-size:.78rem}
.score{font-weight:600;font-variant-numeric:tabular-nums}
.note{font-size:.88rem;color:var(--muted);margin:.7rem 0 0}
.foot{color:var(--muted);font-size:.82rem;margin-top:2.5rem}
.who{display:flex;align-items:center;gap:.6rem;min-width:0}
.mains{display:flex}.mains .main{width:40px;height:40px;margin-right:-6px;background:var(--eq-bg);border-radius:50%;padding:3px;border:1px solid var(--line)}
.mains .main:last-child{margin-right:0}
.chars{display:block;font-size:.8rem;color:var(--muted)}
.ico{width:22px;height:22px;vertical-align:-6px;margin-right:.3rem}
/* accueil */
.hero{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.hero h1{font-size:2.6rem;margin-top:1.2rem}
.hero h1 span{color:var(--accent)}
.intro{font-size:1.1rem;max-width:36rem;color:var(--muted)}
.spider{flex:none;width:96px;height:200px;margin-top:-2.5rem;transform-origin:50% 0;animation:swing 6s ease-in-out infinite}
.spider .thread{stroke:var(--muted);stroke-width:1;opacity:.6}
.spider .body{fill:var(--silk);stroke:var(--fg);stroke-width:1.6}
.spider .legs{stroke:var(--fg);stroke-width:2;fill:none;stroke-linecap:round}
.spider .eye{fill:var(--accent)}.spider .shine{fill:#fff}
@keyframes swing{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){.spider{animation:none}.card{transition:none}}
.list{list-style:none;padding:0;margin:0}
.list li{margin-bottom:.6rem}
.list a{display:block;padding:.9rem 1.2rem;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(6px);transition:border-color .2s}
.list a:hover{text-decoration:none;border-color:var(--accent)}
.list .meta{display:block;color:var(--muted);font-size:.85rem}
@media (max-width:560px){.hero h1{font-size:2rem}.spider{width:70px;height:150px}}