/* Fonts are served by the site itself (no call to Google Fonts: visitors' IP addresses are not sent to Google). SIL Open Font License. */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/barlow-condensed-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/barlow-condensed-latin-ext-800-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/figtree-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/figtree-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/figtree-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/figtree-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/figtree-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/figtree-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/figtree-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/figtree-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/jetbrains-mono-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
:root{
  --ground:#F2F1FA; --surface:rgba(255,255,255,.92); --surface-2:#F4F2FD; --line:#E0DCF2;
  --ink:#12162B; --muted:#5A6080; --faint:#8A90AB;
  --accent:#5B3FFF; --accent-ink:#FFFFFF; --accent-soft:#ECE8FF; --accent-2:#0891B2;
  --grad:linear-gradient(120deg,#5B3FFF 0%,#8B3FFF 45%,#0EA5C6 100%);
  --bg-grad:radial-gradient(1100px 520px at 12% -8%,rgba(91,63,255,.16),transparent 60%),radial-gradient(900px 480px at 100% 0%,rgba(14,165,198,.14),transparent 60%),radial-gradient(800px 600px at 50% 110%,rgba(168,85,247,.10),transparent 60%);
  --grid-line:rgba(40,30,120,.05);
  --blue:#1F6FEB; --blue-soft:#DCE9FD; --red:#E0434B; --red-soft:#FCE1E2;
  --good:#12805C; --good-soft:#DDF3EA; --bad:#C23A41; --bad-soft:#FBE3E4; --warn:#A8650B; --warn-soft:#FDF0DA;
  --shadow:0 1px 2px rgba(18,22,43,.06),0 8px 24px -12px rgba(18,22,43,.18);
  --solid:#FFFFFF;
  --gold:#A86A00; --gold-hi:#FFC24A; --gold-soft:#FFF3D6; --gold-line:#F0CF86;
  --spring:cubic-bezier(.34,1.56,.64,1); --out:cubic-bezier(.2,.8,.2,1);
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#07081A; --surface:rgba(20,21,44,.86); --surface-2:rgba(34,34,70,.62); --line:rgba(139,123,255,.18);
    --ink:#ECEEF8; --muted:#A3A9C6; --faint:#737A9A;
    --accent:#8B7BFF; --accent-ink:#0A0B1A; --accent-soft:#261F55; --accent-2:#22D3EE;
    --grad:linear-gradient(120deg,#6D5BFF 0%,#A855F7 45%,#22D3EE 100%);
    --bg-grad:radial-gradient(1100px 560px at 10% -10%,rgba(109,91,255,.30),transparent 60%),radial-gradient(900px 520px at 105% -5%,rgba(34,211,238,.18),transparent 60%),radial-gradient(900px 700px at 50% 115%,rgba(168,85,247,.16),transparent 60%);
    --grid-line:rgba(139,123,255,.07);
    --blue:#5C9BFF; --blue-soft:#18284A; --red:#FF6B72; --red-soft:#3E1C25;
    --good:#4CCB98; --good-soft:#123328; --bad:#FF7C82; --bad-soft:#3B1A22; --warn:#F2B35A; --warn-soft:#3A2A12;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
    --gold:#FFC24A; --gold-hi:#FFD983; --gold-soft:rgba(255,194,74,.12); --gold-line:rgba(255,194,74,.42); --solid:#15162F;
  }}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#07081A; --surface:rgba(20,21,44,.86); --surface-2:rgba(34,34,70,.62); --line:rgba(139,123,255,.18);
  --ink:#ECEEF8; --muted:#A3A9C6; --faint:#737A9A;
  --accent:#8B7BFF; --accent-ink:#0A0B1A; --accent-soft:#261F55; --accent-2:#22D3EE;
    --grad:linear-gradient(120deg,#6D5BFF 0%,#A855F7 45%,#22D3EE 100%);
    --bg-grad:radial-gradient(1100px 560px at 10% -10%,rgba(109,91,255,.30),transparent 60%),radial-gradient(900px 520px at 105% -5%,rgba(34,211,238,.18),transparent 60%),radial-gradient(900px 700px at 50% 115%,rgba(168,85,247,.16),transparent 60%);
    --grid-line:rgba(139,123,255,.07);
  --blue:#5C9BFF; --blue-soft:#18284A; --red:#FF6B72; --red-soft:#3E1C25;
  --good:#4CCB98; --good-soft:#123328; --bad:#FF7C82; --bad-soft:#3B1A22; --warn:#F2B35A; --warn-soft:#3A2A12;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
  --gold:#FFC24A; --gold-hi:#FFD983; --gold-soft:rgba(255,194,74,.12); --gold-line:rgba(255,194,74,.42); --solid:#15162F;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;padding-inline:16px;padding-block:0 120px}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto}
/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--ground);padding-block:14px 0;margin-inline:-16px;padding-inline:16px;border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.brand{display:flex;align-items:baseline;gap:8px}
.brand b{font-family:var(--display);font-weight:800;font-size:36px;letter-spacing:.02em;line-height:1;text-transform:uppercase}
.brand b i{font-style:normal;color:var(--accent)}
.brand span{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.th{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;padding:0}
.th:hover{border-color:var(--faint)}
.th svg{width:18px;height:18px;grid-area:1/1}
.th .i-moon{fill:currentColor}
.th .i-sun{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.th[data-cur="light"] .i-sun,.th[data-cur="dark"] .i-moon{display:none}
.me{display:flex;align-items:center;gap:10px}
.wallet{display:flex;align-items:center;gap:8px;background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:999px;padding:5px 14px 5px 7px;min-height:40px;transition:box-shadow .3s,transform .3s var(--spring)}
.wallet:has(.avatar:not([hidden])){padding-right:6px}
.wallet .amt{font-family:var(--mono);font-weight:800;font-size:18px;color:var(--gold);font-variant-numeric:tabular-nums;display:inline-block}
.wallet .cur{font-size:12px;color:var(--gold);opacity:.8;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.coin{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:13px;color:#5A3A00;
  background:radial-gradient(circle at 35% 30%,#FFE9A8 0,#FFC24A 45%,#E09A12 100%);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 0 0 1px rgba(160,100,0,.25)}
.avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--surface-2)}
.tabs{position:relative;display:flex;gap:4px;margin-top:12px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;position:relative;overflow:hidden;border:0;background:none;padding:10px 14px 12px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;border-radius:10px 10px 0 0;transition:color .2s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab-ind{position:absolute;left:0;bottom:0;height:3px;width:0;border-radius:3px 3px 0 0;background:var(--accent);box-shadow:0 0 12px var(--accent);transition:transform .38s var(--spring),width .38s var(--spring);pointer-events:none}
.tab .n{font-family:var(--mono);font-size:11px;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:1px 6px;margin-left:6px;vertical-align:2px}
.status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-block:16px 4px;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.dot.live{background:var(--good);box-shadow:0 0 0 3px var(--good-soft)}
.demo-note{font-size:12px;color:var(--faint)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;margin-top:12px}
@media (max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}}
h2.sec{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:.02em;text-transform:uppercase;margin:0;text-wrap:balance}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.day{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:20px 0 8px}
.day:first-child{margin-top:4px}
/* match row */
.match{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:10px;margin-bottom:8px}
.m-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.game{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
.m-meta .time{font-family:var(--mono);font-weight:700;color:var(--ink)}
.m-meta .sp{flex:1}
.pill{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;letter-spacing:.02em}
.pill.open{background:var(--accent-soft);color:var(--accent)}
.pill.done{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.pill.won{background:var(--good-soft);color:var(--good)}
.pill.lost{background:var(--bad-soft);color:var(--bad)}
.pill.pending{background:var(--warn-soft);color:var(--warn)}
.duel{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch}
.side{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--line);background:var(--surface-2);border-radius:10px;padding:9px 12px;text-align:left;min-width:0;transition:border-color .15s,background .15s,transform .1s}
.side.b{flex-direction:row-reverse;text-align:right}
.side:hover:not(:disabled){border-color:var(--faint)}
.side:active:not(:disabled){transform:scale(.99)}
.side:disabled{cursor:default}
.side .t{display:flex;align-items:center;gap:9px;min-width:0}
.side.b .t{flex-direction:row-reverse}
.tag{flex:none;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:-.02em;color:#fff;overflow:hidden;white-space:nowrap}
.side.a .tag{background:var(--blue)}
.side.b .tag{background:var(--red)}
.tname{font-weight:700;font-size:14.5px;line-height:1.2;overflow-wrap:anywhere}
.odds{font-family:var(--mono);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.side.sel.a{border-color:var(--blue);background:var(--blue-soft)}
.side.sel.b{border-color:var(--red);background:var(--red-soft)}
.side.win{border-color:var(--good)}
.side.win .tname::after{content:" ✓";color:var(--good)}
.side.lose{opacity:.55}
.vs{display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:15px;color:var(--faint);min-width:34px}
.vs .score{font-family:var(--mono);font-size:15px;color:var(--ink);white-space:nowrap}
@media (max-width:560px){.duel{grid-template-columns:1fr;gap:6px}
.side.b{flex-direction:row;text-align:left}
.side.b .t{flex-direction:row}
.vs{min-height:0;justify-content:start;padding-left:4px;font-size:12px}}
.split{display:grid;gap:4px}
.bar{display:flex;height:6px;border-radius:999px;overflow:hidden;background:var(--surface-2)}
.bar i{display:block;height:100%}
.bar .ba{background:var(--blue)}
.bar .bb{background:var(--red)}
.split-l{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.mybet{font-size:12.5px;color:var(--muted)}
.mybet b{color:var(--ink)}
.regie{display:flex;gap:6px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:10px;align-items:center}
.regie small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--warn);margin-right:4px}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 11px;font-size:13px;font-weight:600}
.btn:hover{border-color:var(--faint)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:disabled{opacity:.45;cursor:not-allowed}
.btn.big{width:100%;padding:12px;font-size:15px;border-radius:10px;font-weight:700}
/* slip */
.slip{position:sticky;top:130px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px;display:grid;gap:12px}
.slip h3{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.04em;text-transform:uppercase;margin:0;display:flex;justify-content:space-between;align-items:center}
.slip .x{border:0;background:none;font-size:20px;color:var(--muted);line-height:1;padding:2px 6px}
.slip-pick{background:var(--surface-2);border-radius:10px;padding:10px 12px;display:grid;gap:2px}
.slip-pick .l{font-size:12px;color:var(--muted)}
.slip-pick .p{display:flex;justify-content:space-between;font-weight:700}
.stake-row{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;background:var(--surface-2);padding-inline:12px}
.stake-row:focus-within{border-color:var(--accent)}
.stake-row input{flex:1;border:0;background:none;padding:10px 0;font-family:var(--mono);font-weight:700;font-size:18px;min-width:0;outline:none}
.stake-row span{color:var(--muted);font-size:13px}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.gain{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted)}
.gain b{font-family:var(--mono);font-size:20px;color:var(--gold);text-shadow:0 0 16px color-mix(in srgb,var(--gold) 35%,transparent)}
.err{font-size:12.5px;color:var(--bad);min-height:1em}
.slip-empty{color:var(--muted);font-size:14px}
.slip-empty b{display:block;font-family:var(--display);font-size:20px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);margin-bottom:4px}
.rules{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;display:grid;gap:4px}
@media (max-width:900px){.slip{position:fixed;left:0;right:0;bottom:0;top:auto;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));z-index:30;max-width:640px;margin:0 auto}
.slip.idle{display:none}}
/* my bets */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stat .k{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stat .v{font-family:var(--mono);font-weight:700;font-size:22px;font-variant-numeric:tabular-nums}
.pos{color:var(--good)}
.neg{color:var(--bad)}
.betrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.betrow .what{font-weight:700}
.betrow .sub{font-size:12.5px;color:var(--muted);grid-column:1}
.betrow .res{grid-row:1 / span 2;grid-column:2;text-align:right;display:grid;gap:4px;justify-items:end;align-content:center}
.betrow .res .money{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:12px;padding:24px;text-align:center;color:var(--muted)}
.pseudo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.pseudo label{font-size:13px;color:var(--muted);font-weight:600}
.pseudo input{flex:1;min-width:140px;border:1.5px solid var(--line);background:var(--surface-2);border-radius:8px;padding:7px 10px}
/* leaderboard */
.board-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px}
table.board{width:100%;border-collapse:collapse;min-width:520px;font-variant-numeric:tabular-nums}
.board th{text-align:left;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line)}
.board td{padding:10px 14px;border-bottom:1px solid var(--line)}
.board tr:last-child td{border-bottom:0}
.board .num{text-align:right;font-family:var(--mono);font-weight:700}
.board th.num{font-family:var(--body)}
.rank{font-family:var(--display);font-weight:800;font-size:20px;width:44px;color:var(--faint)}
.r1 .rank{color:#C9A227}
.r2 .rank{color:#8E9AAE}
.r3 .rank{color:#B7773F}
.who{display:flex;align-items:center;gap:10px;font-weight:600}
.who .avatar{width:28px;height:28px}
.badge{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:1px 6px;background:var(--surface-2);color:var(--faint);border:1px solid var(--line)}
.badge.you{background:var(--accent-soft);color:var(--accent);border-color:transparent}
tr.meRow td{background:var(--accent-soft)}
.wr{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.wr .mini{width:52px;height:5px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.wr .mini i{display:block;height:100%;background:var(--accent)}
/* news */
.news{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:720px){.news{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:grid;gap:8px;align-content:start}
.card.feature{grid-column:1 / -1}
.card .kicker{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card h3{font-family:var(--display);font-weight:800;font-size:23px;line-height:1.1;margin:0;text-wrap:balance}
.card p{margin:0;color:var(--muted);max-width:65ch}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:4px}
@media (max-width:560px){.kv{grid-template-columns:minmax(0,1fr)}}
.kv div{background:var(--surface-2);border-radius:10px;padding:10px 12px}
.kv .k{font-size:12px;color:var(--muted)}
.kv .v{font-weight:700}
.links{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.links a{color:var(--accent);font-weight:600;text-decoration:none}
.links a:hover{text-decoration:underline}
.links span{color:var(--muted);font-size:13px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--ground);padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:50;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* onboarding */
.ob{max-width:760px;margin:8px auto 0;display:grid;gap:14px}
.ob-step{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ob-title{font-family:var(--display);font-weight:800;font-size:clamp(30px,5vw,42px);line-height:1;text-transform:uppercase;margin:0;text-wrap:balance}
.ob-lead{margin:0;color:var(--muted);max-width:60ch}
.box{flex:none;width:20px;height:20px;border-radius:6px;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center}
[aria-pressed="true"] .box{background:var(--accent);border-color:var(--accent)}
[aria-pressed="true"] .box::after{content:"";width:9px;height:5px;border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:rotate(-45deg) translate(1px,-1px)}
.ob-all{display:flex;align-items:center;gap:10px;border:1.5px dashed var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;font-weight:700;text-align:left}
.ob-all[aria-pressed="true"]{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}
.ob-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:640px){.ob-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ob-card{position:relative;display:grid;gap:6px;justify-items:start;text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:14px;padding:14px}
.ob-card .box{position:absolute;top:12px;right:12px}
.ob-card b{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.05;text-transform:uppercase}
.ob-card small{color:var(--muted);font-size:12.5px}
.ob-card[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ob-group .day{margin:6px 0 8px}
.ob-teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.ob-team{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 10px;text-align:left}
.ob-team .tag{width:34px;height:30px;font-size:12px;background:var(--ink);color:var(--ground)}
.ob-team .tn{flex:1;font-weight:700;font-size:14px;min-width:0;overflow-wrap:anywhere}
.ob-team[aria-pressed="true"]{border-color:var(--accent)}
.ob-team:disabled{cursor:default;opacity:.7}
.ob-foot{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;justify-content:flex-end;background:var(--ground);padding-block:12px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.ob-foot .btn{padding:10px 18px;font-size:15px}
.ob-count{margin-right:auto;color:var(--muted);font-size:13.5px}
.ob-foot .btn:first-child + .ob-count{margin-left:4px}
.follow-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:-4px 0 8px}
.linkbtn{border:0;background:none;padding:0;color:var(--accent);font-weight:700;font-size:13px}
.linkbtn:hover{text-decoration:underline}
.follow-sum{flex:1;min-width:160px;font-size:13.5px}
/* my position */
.mypos{display:flex;gap:16px;align-items:stretch;margin-top:12px;background:var(--surface);border:1.5px solid var(--accent);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.mypos-rank{display:grid;justify-items:center;align-content:center;min-width:84px;padding-right:16px;border-right:1px solid var(--line)}
.mypos-rank .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mypos-rank .v{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;color:var(--accent)}
.mypos-rank sup{font-size:18px}
.mypos-body{display:grid;gap:4px;align-content:center;min-width:0}
.mypos-name{font-weight:700;font-size:16px}
.mypos-stats{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.mypos-stats b{font-family:var(--mono);color:var(--ink)}
.mypos-stats b.pos{color:var(--good)}
.mypos-stats b.neg{color:var(--bad)}
.mypos-msg{font-size:13.5px}
/* cups (Fortnite / Warzone) */
.cup-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cup-title{font-family:var(--display);font-weight:800;font-size:21px;line-height:1.1;text-transform:uppercase;letter-spacing:.02em}
.cup-sub{font-size:12.5px;color:var(--muted)}
.psearch{display:grid;gap:8px;background:var(--surface-2);border-radius:10px;padding:10px 12px}
.psearch label{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.psearch input{width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 10px}
.psearch input:focus{border-color:var(--accent);outline:none}
.duos{display:grid;gap:6px}
.duo{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 10px;text-align:left;width:100%}
.duo:hover{border-color:var(--faint)}
.duo .pp{flex:1;min-width:0;font-weight:700;font-size:14px;overflow-wrap:anywhere}
.duo .pp mark{background:var(--accent-soft);color:var(--accent);border-radius:3px;padding:0 1px}
.duo .seed{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.duo .go{font-size:12.5px;font-weight:700;color:var(--accent)}
.hint{font-size:12.5px;color:var(--muted)}
.mine{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1.5px solid var(--accent);background:var(--accent-soft);border-radius:10px;padding:9px 12px}
.mine .who2{flex:1;min-width:160px}
.mine .who2 small{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.mine .who2 b{font-size:15px}
.cupbets{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cupbet{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--surface-2);border-radius:10px;padding:9px 12px;font-weight:700;font-size:14px;text-align:left}
.cupbet:hover:not(:disabled){border-color:var(--faint)}
.cupbet.sel{border-color:var(--accent);background:var(--accent-soft)}
.cupbet:disabled{cursor:default;opacity:.6}
.popular{font-size:12.5px;color:var(--muted)}
.popular b{color:var(--ink)}
.ob-search{width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px}
.ob-search:focus{border-color:var(--accent);outline:none}
.ob-region{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:10px 0 6px}
.ob-note{font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ob-card .kind{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
/* markets carousel */
.teams-head{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.th-team{display:flex;align-items:center;gap:10px;min-width:0}
.th-team.b{flex-direction:row-reverse;text-align:right}
.th-team .tag{width:36px;height:36px}
.th-team.a .tag{background:var(--blue)}
.th-team.b .tag{background:var(--red)}
.th-team .nm{font-weight:800;font-size:16px;line-height:1.15;overflow-wrap:anywhere}
.th-team.win .nm::after{content:" ✓";color:var(--good)}
.th-mid{font-family:var(--mono);font-weight:700;font-size:17px;text-align:center;color:var(--faint)}
.th-mid.done{color:var(--ink)}
.mk-row{display:flex;align-items:center;gap:6px}
.mk-scroll{display:flex;gap:6px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;flex:1;min-width:0;padding-block:2px}
.mk-scroll::-webkit-scrollbar{display:none}
.mk{flex:none;border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.mk[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.mk.has::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:5px;vertical-align:1px}
.mk[aria-pressed="true"].has::before{background:var(--ground)}
.arr{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;font-size:15px;line-height:1;color:var(--ink);padding:0}
.arr:hover{border-color:var(--faint)}
.sels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.sels.two{grid-template-columns:1fr 1fr}
.selb{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--surface-2);border-radius:10px;padding:8px 11px;text-align:left;min-width:0;font-weight:700;font-size:13.5px}
.selb:hover:not(:disabled){border-color:var(--faint)}
.selb:disabled{cursor:default}
.selb .l{min-width:0;overflow-wrap:anywhere}
.selb .l small{display:block;font-weight:500;font-size:11.5px;color:var(--muted)}
.selb.sel{border-color:var(--accent);background:var(--accent-soft)}
.selb.won{border-color:var(--good)}
.selb.lost{opacity:.5}
.selb .o{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}
.tr{font-size:10px}
.tr.up{color:var(--good)}
.tr.down{color:var(--bad)}
.sels .team-a{border-left:3px solid var(--blue)}
.sels .team-b{border-left:3px solid var(--red)}
.mk-note{font-size:12px;color:var(--muted)}
@media (pointer:coarse){.mk{min-height:34px}
.arr{width:34px;height:34px}
.linkbtn.sm{min-height:30px;display:inline-flex;align-items:center}
.foot .linkbtn.sm,.rules .linkbtn.sm,.demo-note .linkbtn.sm,#footLinks .linkbtn.sm{padding:6px 4px}
.tagcopy{min-height:32px}
a.twitch{min-height:32px;display:inline-flex;align-items:center}}
.mail-res{margin-top:8px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.45}
.mail-res.ok{background:var(--good-soft);color:var(--good)}
.mail-res.ko{background:var(--bad-soft);color:var(--bad)}
.mail-res small{display:block;margin-top:4px;opacity:.8;word-break:break-word}
.pwbox{position:relative}
.pwbox input{width:100%;padding-right:46px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:10px}
.pw-eye:hover,.pw-eye[aria-pressed="true"]{color:var(--accent)}
.pw-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pw-eye .off{display:none}
.pw-eye[aria-pressed="true"] .on{display:none}
.pw-eye[aria-pressed="true"] .off{display:block}
/* Indice Clutch: team levels from results */
.idx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:10px;align-items:center;margin:10px 0 2px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.idx-side{display:flex;flex-direction:column;gap:4px;min-width:0}
.idx-side.b{align-items:flex-end;text-align:right}
.idx-side b{font:700 17px/1 var(--display);letter-spacing:.02em}
.idx-side small{font-size:10.5px;color:var(--faint)}
.idx-form{display:flex;gap:3px}
.idx-form i{width:15px;height:15px;border-radius:4px;display:grid;place-items:center;font:700 9px/1 var(--body);font-style:normal;color:#fff}
.idx-form i.W{background:var(--good)}
.idx-form i.L{background:var(--bad)}
.idx-form i.n{background:transparent;border:1px dashed var(--line)}
.idx-mid{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.idx-mid small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700;white-space:nowrap}
.idx-bar{display:flex;width:100%;height:7px;border-radius:99px;overflow:hidden;background:var(--line)}
.idx-bar i{display:block;height:100%}
.idx-bar i.a{background:var(--accent)}
.idx-bar i.b{background:var(--accent-2)}
.idx-pct{display:flex;justify-content:space-between;width:100%;font:700 13px/1 var(--display);letter-spacing:.02em}
.idx-pct span{color:var(--muted);white-space:nowrap;flex:none}
.idx-pct span.idx-hi{color:var(--ink)}
.idx-mid{max-width:420px;justify-self:center;width:100%}
@media (max-width:560px){.idx{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);padding:8px 10px;gap:8px}
.idx-form i{width:12px;height:12px;font-size:8px}
.idx-side b{font-size:15px}}
.lockline{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.pill.live{background:var(--bad-soft);color:var(--bad)}
.pill.void{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.srcline{font-size:11.5px;color:var(--faint)}
.srcline a{color:inherit}
.nomatch{background:var(--surface);border:1px dashed var(--line);border-radius:12px;padding:14px 16px;color:var(--muted);font-size:13.5px;margin-bottom:8px}
.nomatch b{color:var(--ink)}
/* segmented */
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:none;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
/* account */
.acc{display:grid;gap:14px;max-width:760px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:grid;gap:10px}
.panel h3{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.03em;text-transform:uppercase;margin:0}
.panel p{margin:0;color:var(--muted);font-size:13.5px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row input{flex:1;min-width:160px;border:1.5px solid var(--line);background:var(--surface-2);border-radius:8px;padding:8px 10px}
.row input:focus{border-color:var(--accent);outline:none}
.idtag{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface-2);border-radius:10px;padding:10px 12px}
.idtag code{font-family:var(--mono);font-weight:700;font-size:16px}
.idtag code span{color:var(--accent)}
.idtag small{color:var(--muted);font-size:12px;flex-basis:100%}
.flist{display:grid;gap:6px}
.fitem{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.fitem .avatar{width:30px;height:30px}
.fitem .nm{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.fitem .nm small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.sub-h{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.msg-ok{font-size:12.5px;color:var(--good)}
.msg-err{font-size:12.5px;color:var(--bad)}
/* chat */
.chat{display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px;min-height:520px}
@media (max-width:760px){.chat{grid-template-columns:minmax(0,1fr)}
.chat.open .clist{display:none}
.chat:not(.open) .cconv{display:none}}
.clist{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:6px;align-content:start}
.citem{display:flex;align-items:center;gap:10px;border:0;background:none;border-radius:10px;padding:8px;text-align:left;width:100%}
.citem:hover{background:var(--surface-2)}
.citem[aria-current="true"]{background:var(--accent-soft)}
.citem .ic{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:14px;background:var(--ink);color:var(--ground)}
.citem .ic img{width:32px;height:32px;border-radius:50%}
.citem .nm{flex:1;min-width:0;font-weight:700;font-size:14px;overflow-wrap:anywhere}
.citem .nm small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.udot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.cconv{background:var(--surface);border:1px solid var(--line);border-radius:14px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:520px;max-height:72vh}
.chead{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.chead b{font-family:var(--display);font-size:20px;text-transform:uppercase;letter-spacing:.03em}
.chead small{color:var(--muted);font-size:12.5px}
.chead .sp{flex:1}
.back{display:none}
@media (max-width:760px){.back{display:inline-flex}}
.cmsgs{overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.m{display:flex;gap:8px;align-items:flex-end;max-width:85%}
.m .mb{display:grid;gap:2px;min-width:0}
.m.mymsg{align-self:flex-end;text-align:right}
.m .who{font-size:12px;color:var(--muted);font-weight:600;display:block}
.m .who .avatar{display:none}
.m .bub{background:var(--surface-2);border-radius:12px;padding:8px 12px;font-size:14px;overflow-wrap:anywhere;white-space:pre-wrap;text-align:left}
.m.mymsg .bub{background:var(--accent);color:var(--accent-ink)}
.cform{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.cform input{flex:1;min-width:0;border:1.5px solid var(--line);background:var(--surface-2);border-radius:10px;padding:10px 12px}
.cform input:focus{border-color:var(--accent);outline:none}
.cempty{margin:auto;color:var(--muted);text-align:center;font-size:14px;max-width:36ch}
.newsrv{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.newsrv input{border:1.5px solid var(--line);background:var(--surface-2);border-radius:8px;padding:8px 10px;width:100%}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.match{grid-template-columns:minmax(0,1fr)}
.layout>section{min-width:0}
@media (max-width:480px){.brand{flex-direction:column;align-items:flex-start;gap:1px}
.brand b{font-size:24px!important}
.brand span{font-size:9.5px;letter-spacing:.18em}
.top-row{flex-wrap:nowrap;gap:8px}
.wallet{gap:6px;padding-left:5px!important}
.coin{width:20px;height:20px;font-size:11px}
.wallet .amt{font-size:15px}}
@media (max-width:370px){.brand b{font-size:21px!important}
.me{gap:4px!important}
.th{width:32px!important;height:32px!important}}
@media (max-width:560px){.teams-head{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.th-team .nm{font-size:14px}
.th-team .tag{width:30px;height:30px;font-size:11px}}
.th-team img.logo{width:36px;height:36px;object-fit:contain;border-radius:8px;background:var(--surface-2)}
/* auth */
.auth{min-height:calc(100vh - 40px);display:grid;place-items:center;padding-block:32px}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;display:grid;gap:14px;box-shadow:var(--shadow)}
.auth-card .brand{justify-content:center}
.auth-card h1{font-family:var(--display);font-weight:800;font-size:30px;text-transform:uppercase;margin:0;text-align:center;line-height:1.05;text-wrap:balance}
.auth-card p{margin:0;color:var(--muted);text-align:center;font-size:14px}
.field{display:grid;gap:5px}
.field label{font-size:13px;font-weight:600;color:var(--muted)}
.field input{border:1.5px solid var(--line);background:var(--surface-2);border-radius:10px;padding:11px 12px;font-size:15px}
.field input:focus{border-color:var(--accent);outline:none}
.switch{display:flex;background:var(--surface-2);border-radius:999px;padding:3px}
.switch button{flex:1;border:0;background:none;border-radius:999px;padding:8px;font-weight:700;color:var(--muted)}
.switch button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.fine{font-size:12px;color:var(--faint);text-align:center}
.lblrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.linkbtn{border:0;background:none;color:var(--accent);font-weight:600;font-size:14px;padding:4px;justify-self:center;cursor:pointer}
.linkbtn.sm{font-size:13px;padding:0}
.linkbtn:hover{text-decoration:underline}
.remember{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);cursor:pointer;user-select:none}
.remember input{width:20px;height:20px;accent-color:var(--accent);margin:0;flex:none}
.me-menu{display:flex;align-items:center;gap:8px}
.avatar-txt{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:13px}
/* admin */
.regie-panel{border:1.5px dashed var(--warn);border-radius:12px;padding:12px;display:grid;gap:10px;background:var(--warn-soft)}
.regie-panel h4{margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--warn)}
.regie-panel .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.regie-panel input,.regie-panel select,.regie-panel textarea{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 8px;width:100%}
.regie-panel textarea{min-height:120px;font-family:var(--mono);font-size:12.5px}
.maprow{display:grid;grid-template-columns:1fr 60px 60px;gap:6px;align-items:center}
.maprow span{font-size:12.5px;color:var(--muted)}
.skeleton{height:120px;border-radius:14px;background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);background-size:200% 100%;animation:sk 1.2s infinite;margin-bottom:8px;border:1px solid var(--line)}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}
.load-more{display:block;margin:0 auto 6px}
.bell{position:relative}
.bell svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bdg{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid var(--ground)}
.npanel{position:absolute;right:16px;top:calc(100% + 6px);width:min(380px,calc(100vw - 32px));max-height:min(520px,70vh);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);z-index:40;display:grid;align-content:start}
.npanel h4{margin:0;padding:12px 14px;font-family:var(--display);font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--surface)}
.nitem{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:11px 14px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;width:100%}
.nitem:hover{background:var(--surface-2)}
.nitem.unread{background:var(--accent-soft)}
.nitem .ico{grid-row:1 / span 2;font-size:18px;line-height:1.2}
.nitem b{font-size:14px}
.nitem span.b{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.nitem time{grid-column:2;font-size:11.5px;color:var(--faint)}
.nempty{padding:24px 14px;color:var(--muted);font-size:14px;text-align:center}
.top-row{position:relative}
.toggles{display:grid;gap:8px}
.tgl{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px}
.tgl small{display:block;color:var(--muted);font-size:12.5px}
.tgl input{width:40px;height:22px;appearance:none;-webkit-appearance:none;background:var(--line);border-radius:11px;position:relative;cursor:pointer;flex:none;transition:background .15s}
.tgl input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.tgl input:checked{background:var(--accent)}
.tgl input:checked::after{left:21px}
@media (max-width:480px){.me{gap:6px}
.th{width:34px;height:34px}
.th svg{width:16px;height:16px}
.wallet{padding:4px 10px;min-height:34px}
.wallet .cur{display:none}
.wallet .avatar-txt{display:none}
.brand b{font-size:26px}}
.devnote{font-size:13px;color:var(--muted);background:var(--surface-2);border-radius:10px;padding:10px 12px}
/* ================= THEME v6 : dégradé + touche geek ================= */
body{background:var(--ground);background-image:var(--bg-grad);background-attachment:fixed;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 80%)}
.top{background:color-mix(in srgb,var(--ground) 72%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
.brand b{background:linear-gradient(180deg,var(--ink) 30%,color-mix(in srgb,var(--ink) 70%,var(--accent)));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand b i{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 60%,transparent))}
.brand span{font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.2em;color:var(--accent);opacity:.95}
.brand span::before{content:"<";opacity:.5}
.brand span::after{content:"/>";opacity:.5}
.btn.primary,.btn.primary:disabled{background:var(--grad);border-color:transparent;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.2)}
.tab-ind{background:var(--grad)}
h2.sec{display:flex;align-items:baseline;gap:10px}
h2.sec::before{content:"//";font-family:var(--mono);font-size:15px;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.day{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;display:flex;align-items:center;gap:10px;color:var(--muted)}
.day::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.match,.betrow,.panel,.card,.stat,.board-wrap,.clist,.cconv,.slip,.empty,.nomatch,.auth-card,.mypos{border-color:var(--line)}
.match{position:relative;overflow:hidden}
.match::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--g,var(--accent));box-shadow:0 0 14px var(--g,var(--accent))}
.stat .v,.board .num,.odds,.selb .o{letter-spacing:-.01em}
.dot.live{background:var(--good);box-shadow:0 0 0 3px var(--good-soft),0 0 10px var(--good);animation:livepulse 2s infinite}
@keyframes livepulse{50%{box-shadow:0 0 0 6px transparent,0 0 14px var(--good)}}
.pill.live{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red);animation:livepill 1.6s ease-in-out infinite}
@keyframes livepill{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 18%,transparent)}}
.skeleton{background:linear-gradient(90deg,var(--surface) 25%,color-mix(in srgb,var(--accent) 10%,var(--surface-2)) 50%,var(--surface) 75%);background-size:200% 100%}
.foot-note{text-align:center;font-size:11.5px;color:var(--faint);margin:28px 0 8px;font-family:var(--mono);letter-spacing:.02em}
/* ---------- game colors ---------- */
.game{background:color-mix(in srgb,var(--g) 18%,transparent);color:var(--g);border-color:color-mix(in srgb,var(--g) 45%,transparent)}
:root:not([data-theme="dark"]) .game{color:color-mix(in srgb,var(--g) 75%,#000)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .game{color:var(--g)}}
.chip[data-filter]{display:inline-flex;align-items:center;gap:6px}
.chip[data-filter]:not([data-filter="all"])::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 8px var(--g)}
.chip[data-filter][aria-pressed="true"]:not([data-filter="all"]){background:color-mix(in srgb,var(--g) 22%,var(--surface));color:var(--ink);border-color:var(--g)}
.chip[data-filter][aria-pressed="true"]{background:var(--ink);color:var(--ground)}
/* ---------- avatars ---------- */
.av{flex:none;position:relative;display:inline-grid;place-items:center;border-radius:50%;font-family:var(--display);font-weight:800;color:#fff;background:var(--avbg,var(--grad));width:var(--s,32px);height:var(--s,32px);font-size:calc(var(--s,32px)*.45);line-height:1;text-transform:uppercase;box-shadow:0 0 0 2px var(--surface)}
.av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.av.preset{font-size:calc(var(--s,32px)*.55);text-transform:none}
.me-btn{border:0;padding:0;background:none;border-radius:50%;position:relative;display:grid}
.me-btn .av{--s:40px;box-shadow:0 0 0 2px var(--ground),0 0 0 4px transparent;transition:box-shadow .25s,transform .2s var(--spring)}
.me-btn .av{background-image:none;background:var(--avbg,var(--grad))}
.me-btn::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--grad);z-index:-1;opacity:.9}
.me-btn:active .av{transform:scale(.92)}
.wallet .avatar-txt{display:none}
@media (max-width:480px){.me-btn .av{--s:34px}}
/* ---------- sheet (profile menu) ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(5,6,20,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:70;display:grid;place-items:center;animation:fadeIn .2s}
.sheet{width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 40px);overflow:auto;background:var(--surface);background-color:color-mix(in srgb,var(--ground) 40%,var(--surface));border:1px solid var(--line);border-radius:20px;padding:20px;display:grid;gap:14px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);animation:sheetIn .38s var(--spring)}
@media (max-width:760px){.sheet-bg{place-items:end center}
.sheet{width:100%;border-radius:22px 22px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));animation:sheetUp .38s var(--spring)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes sheetIn{from{opacity:0;transform:scale(.94) translateY(10px)}}
@keyframes sheetUp{from{transform:translateY(100%)}}
.sheet.leave{animation:sheetOut .2s ease-in forwards}
@keyframes sheetOut{to{opacity:0;transform:translateY(30px)}}
.sheet-head{display:flex;align-items:center;gap:14px}
.sheet-head .av{--s:72px;box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent),0 0 24px color-mix(in srgb,var(--accent) 60%,transparent)}
.sheet-head b{font-family:var(--display);font-size:24px;text-transform:uppercase;letter-spacing:.02em;display:block;line-height:1.1}
.sheet-head small{font-family:var(--mono);color:var(--muted);font-size:12.5px}
.sheet h4{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sheet .x{margin-left:auto;align-self:start;border:0;background:var(--surface-2);width:34px;height:34px;border-radius:50%;font-size:18px;color:var(--muted)}
.photo-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.photo-btns .btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;font-size:14px;border-radius:12px}
.photo-btns svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.presets{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.presets button{border:0;padding:0;background:none;border-radius:50%;display:grid;place-items:center;aspect-ratio:1}
.presets .av{--s:100%;width:100%;height:auto;aspect-ratio:1;font-size:22px}
.presets button[aria-pressed="true"] .av{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.sheet-links{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.sheet-links button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:10px 8px;border-radius:10px;font-weight:600;text-align:left}
.sheet-links button:hover{background:var(--surface-2)}
.sheet-links svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--accent)}
.sheet-links .danger{color:var(--bad)}
.sheet-links .danger svg{color:var(--bad)}
.uploading .av{opacity:.5}
/* ---------- bottom navigation (phone) ---------- */
.bnav{display:none}
@media (max-width:760px){.tabs{display:none!important}
.top{padding-bottom:12px}
.bnav{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:35;
    background:color-mix(in srgb,var(--ground) 78%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
    border:1px solid var(--line);border-radius:22px;padding:6px 4px;box-shadow:0 12px 40px -12px rgba(0,0,0,.55)}
.bnav button{position:relative;border:0;background:none;display:grid;justify-items:center;gap:2px;padding:6px 0 4px;color:var(--faint);font-size:10px;font-weight:700;letter-spacing:.02em;border-radius:14px;-webkit-tap-highlight-color:transparent;transition:color .2s}
.bnav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--spring)}
.bnav button[aria-current="page"]{color:var(--ink)}
.bnav button[aria-current="page"] svg{transform:translateY(-2px) scale(1.12);stroke:url(#gradStroke);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 70%,transparent))}
.bnav button:active svg{transform:scale(.85)}
.bnav .bn{position:absolute;top:0;left:calc(50% + 5px);min-width:17px;height:17px;border-radius:9px;background:var(--red);color:#fff;font-family:var(--mono);font-size:10px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--ground)}
.bnav-ind{position:absolute;top:3px;height:calc(100% - 6px);border-radius:16px;background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);transition:transform .4s var(--spring),width .4s var(--spring);pointer-events:none}
body{padding-bottom:110px}
body.has-combo{padding-bottom:190px}
.slip{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;border-radius:18px!important;left:8px!important;right:8px!important;padding-bottom:16px!important}
.toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
body:has(.slip:not(.idle)) .toast{bottom:calc(400px + env(safe-area-inset-bottom,0px))}
.ob-foot{bottom:0}}
/* ---------- compact matches ---------- */
.viewtog{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700;color:var(--muted)}
.viewtog svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.crow{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 10px 8px 13px;margin-bottom:6px}
.crow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--g,var(--accent));box-shadow:0 0 12px var(--g)}
.crow .ct{display:grid;justify-items:center;gap:2px;min-width:44px}
.crow .ct b{font-family:var(--mono);font-size:13px}
.crow .ct .game{font-size:9.5px;padding:1px 5px}
.crow .cteams{display:grid;gap:3px;min-width:0;border:0;background:none;padding:0;text-align:left}
.crow .cteam{display:flex;align-items:center;gap:7px;min-width:0;font-weight:700;font-size:13.5px}
.crow .cteam span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .cteam .mini-logo{width:18px;height:18px;border-radius:5px;flex:none;display:grid;place-items:center;font-size:8px;font-family:var(--display);font-weight:800;color:#fff;overflow:hidden}
.crow .cteam .mini-logo img{width:100%;height:100%;object-fit:contain;background:var(--surface-2)}
.crow .cteam.win{color:var(--good)}
.crow .codds{display:grid;grid-template-columns:repeat(2,54px);gap:5px}
.crow .codds .selb{padding:6px 8px;justify-content:center;font-size:13px}
.crow .codds .selb .l{display:none}
.crow .cmeta{grid-column:2 / -1;font-size:11.5px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.crow .cstate{font-family:var(--mono);font-size:12px;font-weight:700;text-align:right}
.crow.cupc .cteams b{font-family:var(--display);font-size:16px;text-transform:uppercase}
.match .collapse{margin-left:4px;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;width:28px;height:24px;display:grid;place-items:center;padding:0;color:var(--muted)}
.match .collapse svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
/* ---------- full-width desktop ---------- */
@media (min-width:1024px){body{padding-inline:32px}
.wrap{max-width:none}
.top{margin-inline:-32px;padding-inline:32px}
.layout{grid-template-columns:minmax(0,1fr) 360px;gap:28px}
.acc{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.acc>.sec-head{grid-column:1 / -1}
.news{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
.chat{grid-template-columns:320px minmax(0,1fr);min-height:calc(100vh - 260px)}
.cconv{max-height:calc(100vh - 230px);min-height:calc(100vh - 260px)}}
@media (min-width:1280px){.mlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(520px,1fr));gap:10px;align-items:start}
.mlist.compact{grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:8px}
.mlist>.day{grid-column:1 / -1;margin-bottom:0}
.mlist .match,.mlist .crow{margin-bottom:0}
.board-wrap{max-width:1100px;margin-inline:auto}
.mypos{max-width:1100px;margin-inline:auto}}
/* ---------- welcome guide ---------- */
.tuto-bg{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(5,6,20,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .25s}
.tuto{position:relative;width:min(460px,100%);max-height:calc(100dvh - 32px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:color-mix(in srgb,var(--ground) 35%,var(--surface));border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent);animation:sheetIn .45s var(--spring)}
.tuto::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.tuto-top{display:flex;align-items:center;gap:10px;padding:16px 16px 0;min-width:0}
.tuto{min-width:0;max-width:100%}
.tuto.legal .seg{flex:1 1 0;min-width:0;overflow-x:auto;scrollbar-width:none}
.tuto.legal .seg::-webkit-scrollbar{display:none}
.tuto.legal .seg button{white-space:nowrap;flex:none}
@media (max-width:420px){.tuto.legal .seg button{padding:6px 9px;font-size:12px}
.legal-body h2{font-size:22px}}
.tuto-step{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
.tuto-skip{margin-left:auto;border:0;background:none;color:var(--muted);font-weight:700;font-size:13px;padding:6px 8px;border-radius:8px}
.tuto-skip:hover{color:var(--ink);background:var(--surface-2)}
.tuto-x{border:0;background:var(--surface-2);width:32px;height:32px;border-radius:50%;font-size:18px;color:var(--muted);display:grid;place-items:center;padding:0}
.tuto-body{overflow-y:auto;padding:8px 22px 4px;touch-action:pan-y}
.tuto-page{display:grid;gap:12px}
.tuto-page.in-r{animation:inR .35s var(--out)}
.tuto-page.in-l{animation:inL .35s var(--out)}
.tuto-art{height:150px;border-radius:18px;display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 70%),var(--surface-2);border:1px solid var(--line)}
.tuto h2{font-family:var(--display);font-weight:800;font-size:28px;line-height:1.05;text-transform:uppercase;margin:4px 0 0;text-wrap:balance}
.tuto h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tuto p.lead{margin:0;color:var(--muted);font-size:14.5px}
.tuto ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.tuto li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;font-size:14px;line-height:1.45}
.tuto li .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:color-mix(in srgb,var(--accent) 16%,var(--surface-2));border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.tuto li b{color:var(--ink)}
.tuto .calc{font-family:var(--mono);font-weight:700;background:var(--surface-2);border:1px dashed var(--line);border-radius:10px;padding:8px 10px;font-size:13px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.tuto .calc .g{color:var(--good)}
.tuto-foot{display:flex;align-items:center;gap:10px;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.tuto-dots{display:flex;gap:6px;margin-right:auto}
.tuto-dots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:var(--line);transition:width .35s var(--spring),background .3s}
.tuto-dots button[aria-current="true"]{width:26px;background:var(--grad)}
.tuto-foot .btn{padding:11px 18px;font-size:14.5px;border-radius:12px}
/* art: mini match */
.art-match{width:78%;display:grid;gap:8px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);transform:rotate(-2deg)}
.art-match .r{display:flex;gap:6px}
.art-match .t{flex:1;display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:9px;border:1.5px solid var(--line);background:var(--surface-2);font-weight:700;font-size:13px}
.art-match .t b{font-family:var(--mono)}
.art-match .t.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent);animation:pop 1.8s var(--spring) infinite}
.art-match .h{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--muted)}
.art-finger{position:absolute;right:22%;bottom:18px;font-size:30px;animation:tap 1.8s ease-in-out infinite}
@keyframes tap{0%,100%{transform:translate(10px,10px)}40%,60%{transform:translate(0,0) scale(.9)}}
/* art: coins */
.art-coins{display:flex;align-items:center;gap:14px}
.art-coins .big{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:40px;color:#5A3A00;background:radial-gradient(circle at 35% 30%,#FFE9A8 0,#FFC24A 45%,#E09A12 100%);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),0 0 40px rgba(255,194,74,.55);animation:coinSpin 3s ease-in-out infinite}
.art-coins .amt{font-family:var(--mono);font-weight:800;font-size:30px;color:var(--gold);text-shadow:0 0 18px color-mix(in srgb,var(--gold) 50%,transparent)}
.art-coins .amt small{display:block;font-size:12px;color:var(--muted);text-shadow:none;letter-spacing:.08em}
/* art: podium */
.art-pod{display:flex;align-items:flex-end;gap:8px;height:110px}
.art-pod i{width:54px;border-radius:10px 10px 4px 4px;display:grid;place-items:center;font-style:normal;font-family:var(--display);font-weight:800;font-size:24px;color:#fff;background:linear-gradient(180deg,var(--m),color-mix(in srgb,var(--m) 45%,#000));animation:podUp .8s var(--spring) both}
.art-pod i:nth-child(1){--m:#A7B4C8;height:66%;animation-delay:.1s}
.art-pod i:nth-child(2){--m:#F5B83D;height:100%;animation-delay:.25s}
.art-pod i:nth-child(3){--m:#D08A4E;height:48%;animation-delay:.4s}
.art-pod-crown{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-size:26px;animation:float 2.6s ease-in-out infinite}
@media (max-width:560px){.tuto-bg{padding:0;place-items:end center}
.tuto{width:100%;border-radius:24px 24px 0 0;max-height:94dvh;animation:sheetUp .45s var(--spring)}
.tuto-art{height:130px}
.tuto h2{font-size:25px}}
/* ---------- rank & level ---------- */
.emb{flex:none;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--tc,#888) 55%,transparent))}
.rtag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--tc);vertical-align:middle;white-space:nowrap}
.rtag i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:0 5px}
.who .rtag{margin-left:6px}
.pod .rtag{justify-content:center}
.lvl-bub{position:absolute;right:-4px;bottom:-4px;min-width:19px;height:19px;padding:0 4px;border-radius:10px;display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;font-weight:800;color:#0A0B1A;background:var(--tc);border:2px solid var(--ground);box-shadow:0 0 10px color-mix(in srgb,var(--tc) 70%,transparent)}
.rrd,.xpd{font-family:var(--mono);font-size:11.5px;font-weight:700}
.xpd{color:var(--accent)}
.sheet-head .rtag{margin-top:4px}
/* promotion */
.promo{position:relative;width:min(380px,calc(100vw - 32px));display:grid;justify-items:center;gap:8px;text-align:center;padding:30px 24px 22px;border-radius:26px;background:color-mix(in srgb,var(--ground) 30%,var(--surface));border:1px solid color-mix(in srgb,var(--tc) 55%,transparent);box-shadow:0 0 80px -10px color-mix(in srgb,var(--tc) 55%,transparent);overflow:hidden;animation:sheetIn .5s var(--spring)}
.promo-rays{position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--tc) 22%,transparent) 0 10deg,transparent 10deg 20deg);animation:spinr 18s linear infinite;-webkit-mask-image:radial-gradient(circle,#000 20%,transparent 60%);mask-image:radial-gradient(circle,#000 20%,transparent 60%)}
.promo.down .promo-rays{display:none}
@keyframes spinr{to{transform:rotate(360deg)}}
.promo>*{position:relative}
.promo-emb{animation:embIn .9s var(--spring)}
@keyframes embIn{0%{transform:scale(.2) rotate(-30deg);opacity:0}100%{transform:none;opacity:1}}
.promo small{font-family:var(--mono);font-weight:800;letter-spacing:.3em;color:var(--tc);font-size:12px}
.promo h2{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;margin:0;text-transform:uppercase;color:var(--tc);text-shadow:0 0 24px color-mix(in srgb,var(--tc) 60%,transparent)}
.promo p{margin:0 0 8px;color:var(--muted);font-size:14px}
/* account v2 */
.acc2{display:grid;gap:14px}
.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:16px 24px;align-items:center;padding:20px;border-radius:20px;border:1px solid color-mix(in srgb,var(--tc) 40%,var(--line));
  background:radial-gradient(600px 220px at 0% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),radial-gradient(500px 220px at 100% 0%,color-mix(in srgb,var(--tc) 22%,transparent),transparent 70%),var(--surface)}
.hero::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--accent),var(--tc))}
.hero-id{display:flex;align-items:center;gap:14px;min-width:0}
.hero-av{position:relative;border:0;background:none;padding:0;border-radius:50%}
.hero-av .av{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent),0 0 26px color-mix(in srgb,var(--accent) 50%,transparent)}
.hero-edit{position:absolute;right:0;bottom:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:13px;border:2px solid var(--surface)}
.hero-name{display:grid;gap:4px;min-width:0}
.hero-name b{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;text-transform:uppercase;overflow-wrap:anywhere}
.hero-name small{color:var(--faint);font-size:12px;overflow-wrap:anywhere}
.tagcopy{justify-self:start;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:3px 8px;font-size:12px;font-weight:700;color:var(--muted)}
.tagcopy code{font-family:var(--mono);color:var(--accent);font-size:13px}
.hero-rank,.hero-level{display:flex;align-items:center;gap:14px;min-width:0}
.hr-emb{animation:float 3.2s ease-in-out infinite}
.hr-body{display:grid;gap:4px;flex:1;min-width:0}
.hr-body small{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hr-body b{font-family:var(--display);font-weight:800;font-size:24px;line-height:1;text-transform:uppercase}
.hr-body .bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.hr-body .bar i{display:block;height:100%;border-radius:99px;box-shadow:0 0 12px var(--tc)}
.hr-sub{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.ring{--p:0;flex:none;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#A855F7 calc(var(--p)*1%),var(--surface-2) 0);box-shadow:0 0 20px -4px #A855F7}
.ring span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--surface);font-family:var(--display);font-weight:800;font-size:28px}
.hero-fav{grid-column:1 / -1;display:flex;align-items:center;gap:16px;padding:12px;border-radius:16px;border:1px solid color-mix(in srgb,var(--c1,#FFB800) 45%,var(--line));background:linear-gradient(120deg,color-mix(in srgb,var(--c1,#FFB800) 14%,transparent),transparent 70%)}
.hero-fav .hf-card{width:120px;flex:none;cursor:pointer}
.hero-fav .hf-card .kw-big{width:100%;margin:0}
.hf-txt{display:grid;gap:4px;min-width:0}
.hf-txt small{font:800 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#FFB800}
.hf-txt b{font-family:var(--display);font-size:24px;text-transform:uppercase;line-height:1}
.hf-txt span{font-size:13px;color:var(--muted)}
.hf-txt .btn{justify-self:start;margin-top:4px}
.hero-fav.none{flex-wrap:wrap;justify-content:space-between}
.hero-fav .btn{white-space:nowrap}
.hero-fav.none .hf-txt{flex:1 1 220px}
.hf-txt b{overflow-wrap:normal;font-size:clamp(17px,5.4vw,24px)}
.hero-stats{grid-column:1 / -1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.hero-stats div{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:9px 12px;display:grid;gap:2px}
.hero-stats span{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero-stats b{font-family:var(--mono);font-size:16px;white-space:nowrap}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.col{display:grid;gap:14px;align-content:start}
.panel h3 .count{font-family:var(--mono);font-size:13px;color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:1px 8px;vertical-align:3px}
.credit-big{display:flex;align-items:center;gap:10px}
.credit-big .coin{width:34px;height:34px;font-size:17px}
.credit-big b{font-family:var(--mono);font-size:30px;color:var(--gold)}
.credit-big span:last-child{color:var(--gold);font-weight:700}
.tiers{display:flex;flex-wrap:wrap;gap:6px}
.tier-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--tc);background:color-mix(in srgb,var(--tc) 10%,transparent);border:1px solid color-mix(in srgb,var(--tc) 35%,transparent);border-radius:99px;padding:3px 10px 3px 4px}
.rules2{margin:0;padding-left:18px;display:grid;gap:6px;font-size:13px;color:var(--muted)}
.rules2 b{color:var(--ink)}
@media (max-width:1100px){.hero{grid-template-columns:1fr 1fr}
.hero-id{grid-column:1 / -1}
.hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.cols{grid-template-columns:minmax(0,1fr)}
.hero{grid-template-columns:minmax(0,1fr);padding:16px}
.hero-name b{font-size:26px}}
@media (max-width:420px){.hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* feed */
.flist2{display:grid;gap:10px}
@media (min-width:1280px){.flist2{grid-template-columns:repeat(auto-fill,minmax(440px,1fr));align-items:start}}
.fcard{position:relative;overflow:hidden;display:grid;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 14px 12px 17px}
.fcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--g,var(--accent));box-shadow:0 0 12px var(--g)}
.fcard.won{border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.fhead{display:flex;align-items:center;gap:10px}
.fwho{display:grid;gap:2px;min-width:0;flex:1}
.fwho b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fago{font-size:12px;color:var(--faint);white-space:nowrap;align-self:start}
.fev{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:13px;color:var(--muted);min-width:0}
.fev .ft{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0;max-width:100%}
@media (max-width:560px){.fev .ft{flex-basis:calc(100% - 70px)}
.fev .fwhen{margin-left:0}}
.fev .fwhen{margin-left:auto;flex:none;font-family:var(--mono);font-size:11.5px;white-space:nowrap}
.fpick{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.fpick .fl{font-weight:700;min-width:0;overflow-wrap:anywhere}
.fpick .fo{font-family:var(--mono);font-weight:800;font-size:17px;color:var(--accent)}
.ffoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.ffoot .sp{flex:1}
.ffoot b{color:var(--ink)}
.btn.sm{padding:6px 11px;font-size:12.5px}
/* ---------- live score ---------- */
.livesc{color:var(--red);text-shadow:0 0 12px color-mix(in srgb,var(--red) 55%,transparent);animation:livepill 1.6s ease-in-out infinite}
.mdots{display:flex;gap:4px;justify-content:center;margin-top:4px}
.mdots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.mdots i.ta{background:var(--blue);box-shadow:0 0 6px var(--blue)}
.mdots i.tb{background:var(--red);box-shadow:0 0 6px var(--red)}
.mdots i.now{background:transparent;border:1.5px solid var(--red);animation:livepill 1.2s infinite}
.th-mid{display:grid;justify-items:center}
/* ---------- Mes paris : tickets ---------- */
.bets2{display:grid;gap:14px}
.bsum{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.bsum div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:grid;gap:2px}
.bsum span{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bsum b{font-family:var(--mono);font-size:17px;white-space:nowrap}
.gold{color:var(--gold)}
@media (max-width:760px){.bsum{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.bsum div{grid-column:span 2;padding:8px 10px;border-radius:12px}
.bsum div:nth-child(n+4){grid-column:span 3}
.bsum b{font-size:14.5px}
.bsum span{font-size:9.5px;letter-spacing:.06em}}
.btabs{display:flex;gap:6px;border-bottom:1px solid var(--line)}
.btabs button{position:relative;border:0;background:none;padding:10px 16px 12px;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.btabs button span{font-family:var(--mono);font-size:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:0 7px;color:var(--muted)}
.btabs button[aria-selected="true"]{color:var(--ink)}
.btabs button[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--grad)}
.btabs button[aria-selected="true"] span{background:var(--accent-soft);color:var(--accent);border-color:transparent}
@media (max-width:560px){.btabs button{font-size:15px;padding:9px 10px 11px;white-space:nowrap;flex:1;justify-content:center}}
.livedot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:livepill 1.2s infinite}
.tks{display:grid;gap:12px}
@media (min-width:900px){.tks{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));align-items:start}}
.tk{--st:var(--accent);position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:grid}
.tk::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--st);box-shadow:0 0 14px var(--st)}
.tk.st-live{--st:var(--red)}
.tk.st-won{--st:var(--good);border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.tk.st-lost{--st:var(--bad)}
.tk.st-void{--st:var(--faint)}
.tk.st-lost{opacity:.85}
.tk-top{display:flex;align-items:center;gap:8px;padding:12px 14px 0;font-size:12px;color:var(--muted);min-width:0}
.tk-lg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-top .sp{flex:1}
.tk-when{font-family:var(--mono);font-size:11.5px;white-space:nowrap}
.tk-top .pill{white-space:nowrap;flex:none}
.tk-match{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:12px 14px 4px}
.tk-match.cup{grid-template-columns:1fr}
.tk-match.cup b{font-family:var(--display);font-size:20px;text-transform:uppercase}
.tk-team{display:grid;justify-items:center;gap:6px;text-align:center;font-weight:700;font-size:13.5px;min-width:0}
.tk-team span{overflow-wrap:anywhere;line-height:1.2}
.tk-logo{width:44px;height:44px;border-radius:12px;object-fit:contain;background:var(--surface-2);padding:4px;border:1px solid var(--line)}
.tk-logo.tag{display:grid;place-items:center;padding:0;border:0;font-family:var(--display);font-weight:800;font-size:14px;color:#fff}
.tk-score{display:grid;justify-items:center;gap:2px;min-width:74px}
.tk-score b{font-family:var(--mono);font-size:26px;line-height:1;display:flex;gap:6px}
.tk-score b i{font-style:normal;color:var(--faint)}
.tk-score b.vs{font-family:var(--display);font-size:20px;color:var(--faint)}
.tk-score small{font-family:var(--mono);font-size:11px;color:var(--faint)}
.tk-pick{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 14px 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--st) 10%,var(--surface-2));border:1px solid color-mix(in srgb,var(--st) 30%,var(--line))}
.tk-pick small{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tk-pick b{font-size:15.5px}
.tk-odds{font-family:var(--mono);font-weight:800;font-size:18px;color:var(--accent);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px 10px}
.tk-sep{position:relative;height:22px;margin:4px 0}
.tk-sep::before{content:"";position:absolute;left:18px;right:18px;top:50%;border-top:2px dashed var(--line)}
.tk-sep::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 0 50%,var(--ground) 10px,transparent 11px),radial-gradient(circle at 100% 50%,var(--ground) 10px,transparent 11px)}
.tk-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0 14px}
.tk-bottom div{display:grid;gap:2px;text-align:center}
.tk-bottom div+div{border-left:1px solid var(--line)}
.tk-bottom span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tk-bottom b{font-family:var(--mono);font-size:16px;white-space:nowrap}
.tk-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;margin-top:10px;background:color-mix(in srgb,var(--st) 8%,transparent);border-top:1px solid var(--line);font-size:12px}
.tk-foot .sp{flex:1}
.tk-st{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--st)}
.tk.st-open .tk-st{color:var(--accent)}
.tk-proj{font-size:11px;font-weight:700;border-radius:99px;padding:1px 8px}
.tk-proj.up{background:var(--good-soft);color:var(--good)}
.tk-proj.down{background:var(--bad-soft);color:var(--bad)}
.tk-date{color:var(--faint)}
#view.stg .tk{animation:rise .5s var(--out) both}
/* ---------- news ---------- */
.nupd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:12px}
.nupd .linkbtn{font-size:12px}
.npill{border:0;background:var(--grad);color:#fff;font-weight:800;font-size:12.5px;border-radius:99px;padding:6px 12px;box-shadow:0 6px 18px -6px var(--accent);animation:pop .5s var(--spring)}
.nlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:start}
.ncard{position:relative;display:grid;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;color:inherit;text-decoration:none;transition:transform .25s var(--spring),box-shadow .25s,border-color .25s}
.ncard::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--g,var(--accent));box-shadow:0 0 12px var(--g);z-index:1}
@media (hover:hover){.ncard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--g,var(--accent)) 45%,var(--line));box-shadow:0 14px 30px -14px var(--g,var(--accent))}
.ncard:hover .nimg img{transform:scale(1.05)}
.ncard:hover .nread{color:var(--accent)}}
.ncard:active{transform:scale(.98)}
.nimg{aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.nimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--out)}
.nbody{display:grid;gap:8px;padding:12px 14px 12px}
.nmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nmeta .sp{flex:1}
.nk{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:5px;padding:1px 6px}
.nk.esport{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.nk.patch{background:var(--warn-soft);color:var(--warn)}
.nsrc{font-size:11.5px;font-weight:700;color:var(--muted)}
.nsrc i{font-style:normal;font-family:var(--mono);font-size:10px;border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:2px}
.ncard h3{margin:0;font-size:16px;line-height:1.3;font-weight:800;text-wrap:pretty}
.ncard p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.45}
.nfoot{display:flex;justify-content:space-between;font-size:12px;color:var(--faint)}
.nread{font-weight:700;transition:color .2s}
.ncard.big{grid-column:1 / -1}
@media (min-width:760px){.ncard.big{grid-template-columns:1.25fr 1fr;align-items:stretch}
.ncard.big .nimg{aspect-ratio:auto;min-height:260px}
.ncard.big .nbody{padding:22px;align-content:center;gap:12px}
.ncard.big h3{font-family:var(--display);font-size:32px;line-height:1.05;text-transform:uppercase;font-weight:800}}
.ncard.big.noimg{grid-template-columns:1fr}
#view.stg .ncard{animation:rise .5s var(--out) both}
/* ---------- twitch ---------- */
.twitch{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:12px;font-weight:800;color:#fff;background:#9146FF;border-radius:99px;padding:4px 11px 4px 8px;box-shadow:0 4px 14px -6px #9146FF;transition:transform .2s var(--spring),box-shadow .2s;white-space:nowrap}
.twitch svg{width:15px;height:15px;fill:currentColor;flex:none}
.twitch:hover{transform:translateY(-1px);box-shadow:0 8px 20px -6px #9146FF}
.twitch:active{transform:scale(.94)}
.twitch.on{animation:twlive 2s ease-in-out infinite}
@keyframes twlive{50%{box-shadow:0 0 0 5px rgba(145,70,255,.25),0 4px 14px -6px #9146FF}}
.twitch.sm{padding:4px;border-radius:8px}
.crow .ct .twitch.sm{margin-top:2px}
.tk-top .twitch.sm{padding:3px 5px}
.ntog{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.ntog input{width:16px;height:16px;accent-color:var(--accent);margin:0}
.nwhen{margin-left:auto}
@media (max-width:560px){.m-meta .twitch span{display:none}
.m-meta .twitch{padding:4px 6px}}
/* solid backgrounds for everything that floats over content */
.slip,.npanel,.sheet,.tuto,.promo{background-color:var(--solid)!important}
/* ---------- game picker ---------- */
.sec-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gpick{position:relative}
.gsel{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 10px 6px 12px;font-weight:700;font-size:13px}
.gsel svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;transition:transform .25s var(--spring)}
.gpick.open .gsel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.gpick.open .gsel svg{transform:rotate(180deg)}
.gdot{width:9px;height:9px;border-radius:50%;background:var(--g);box-shadow:0 0 8px var(--g);flex:none}
.gdot.all{background:var(--grad);box-shadow:none}
.gmenu{position:absolute;z-index:45;top:calc(100% + 6px);left:0;min-width:210px;display:grid;gap:2px;padding:6px;border-radius:14px;background:var(--solid);border:1px solid var(--line);box-shadow:0 20px 50px -16px rgba(0,0,0,.6);animation:menuIn .22s var(--spring);transform-origin:top left}
@media (min-width:761px){.sec-tools .gmenu{left:auto;right:0;transform-origin:top right}}
.sec-head>.gpick .gmenu{left:auto;right:0;transform-origin:top right;max-width:calc(100vw - 32px)}
@keyframes menuIn{from{opacity:0;transform:scale(.92) translateY(-4px)}}
.gmenu button{display:flex;align-items:center;gap:10px;border:0;background:none;border-radius:9px;padding:9px 10px;font-weight:600;font-size:14px;text-align:left}
.gmenu button:hover,.gmenu button[aria-selected="true"]{background:var(--surface-2)}
.gmenu button b{margin-left:auto;color:var(--accent)}
/* ---------- edit / cancel bets ---------- */
.slip.editing{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.slip-old{font-size:13px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:10px;padding:9px 11px}
.slip-old small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.slip-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;max-height:190px;overflow:auto}
@media (max-width:900px){.slip.editing{max-height:calc(100dvh - 150px);overflow:auto}}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.btn.danger:hover{background:var(--bad-soft)}
.linkbtn.danger{color:var(--bad)}
.selb.mine:not(.sel){border-style:dashed;border-color:var(--accent)}
.tk-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px 0}
.tk-actions .btn{padding:9px;font-size:13.5px;border-radius:10px}
/* ---------- legal / feedback / deletion ---------- */
.legal .tuto-top .seg{flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none}
.legal .tuto-top .seg button{white-space:nowrap;padding-inline:10px;font-size:13px}
.legal .tuto-top .sp{display:none}
.legal-body h2{font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;margin:6px 0 4px}
.legal-body h3{font-size:14px;margin:16px 0 4px;color:var(--ink)}
.legal-body p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.legal-body p b{color:var(--ink)}
.legal-body a{color:var(--accent)}
.legal-body .upd{font-family:var(--mono);font-size:11.5px}
.legal-body{padding-bottom:22px}
.fb textarea{width:100%;border:1.5px solid var(--line);background:var(--surface-2);border-radius:12px;padding:12px;font:inherit;font-size:14.5px;color:var(--ink);resize:vertical;min-height:120px}
.fb textarea:focus{outline:none;border-color:var(--accent)}
.fbkind{align-self:start}
.delbox{display:grid;gap:8px;border:1px solid color-mix(in srgb,var(--bad) 40%,var(--line));background:var(--bad-soft);border-radius:12px;padding:12px}
.delbox b{color:var(--bad)}
.delbox p{margin:0;font-size:13px}
a.btn{text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.fbl{display:grid;gap:8px;max-height:420px;overflow:auto}
.fbi{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:4px;background:var(--surface-2)}
.fbi.done{opacity:.55}
.fbh{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
.fbh span{color:var(--faint)}
.fbi p{margin:0;font-size:13.5px;white-space:pre-wrap;color:var(--ink)}
.foot-note .linkbtn{font-size:11.5px;font-family:var(--body)}
.auth-card .fine .linkbtn{font-size:12px}
.remember .linkbtn.sm{padding:0;font-size:inherit;display:inline}
#themeBtn{display:none!important}
/* ---------- simple match rows ---------- */
.mi{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 12px 11px 15px;margin-bottom:8px;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:border-color .2s,transform .18s var(--spring)}
.mi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--g,var(--accent))}
.mi:active{transform:scale(.985)}
@media (hover:hover){.mi:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}}
.mi:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mi-when{display:grid;justify-items:start;gap:5px}
.mi-when b{font-family:var(--mono);font-size:14px;font-weight:800}
.mi-when .game{font-size:9.5px;padding:1px 5px}
.mi-live{font-family:var(--mono);font-weight:800;font-size:11px;color:#fff;background:var(--red);border-radius:5px;padding:2px 6px;animation:livepill 1.6s infinite}
.mi-done{font-family:var(--mono);font-weight:800;font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.mi-teams{display:grid;gap:6px;min-width:0}
.mi-t{display:flex;align-items:center;gap:9px;min-width:0;font-weight:700;font-size:15px}
.mi-t>span:not(.mi-logo){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.mi-t .mi-logo{flex:none;width:22px;height:22px;border-radius:6px}
.mi-t.win span{color:var(--good)}
.mi-t.cup span{font-family:var(--display);font-weight:800;font-size:18px;text-transform:uppercase}
.mi-sub{font-size:12px;color:var(--muted)}
.mi-logo{flex:none;width:22px;height:22px;border-radius:6px;object-fit:contain;background:var(--surface-2)}
.mi-logo.tag{display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:9px;color:#fff}
.mi-sc{font-family:var(--mono);font-size:16px;font-weight:800;min-width:18px;text-align:right}
.mi-sc.live{color:var(--red)}
.mi-end{display:flex;align-items:center;gap:6px}
.mi-nb{font-family:var(--mono);font-size:11px;font-weight:800;color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:1px 7px}
.mi-chev{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--muted);transition:transform .3s var(--spring)}
.mi-chev svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mi-chev.up{transform:rotate(180deg);margin-left:2px}
.fav{flex:none;border:0;background:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--faint);padding:0;transition:transform .25s var(--spring),color .2s}
.fav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.fav.on{color:var(--gold)}
.fav.on svg{fill:currentColor}
.fav:active{transform:scale(.8)}
.fav.on{animation:pop .45s var(--spring)}
.match.open{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));animation:swapIn .3s var(--out)}
.match.open .m-meta,.match.open .teams-head{cursor:pointer}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.setrow>span{font-weight:700;display:grid}
.setrow small{font-weight:500;font-size:12px;color:var(--muted)}
/* ---------- Actus › Préférences ---------- */
.nprefs{margin-bottom:14px}
.nphead{display:flex;justify-content:space-between;align-items:baseline}
.nphead b{font-family:var(--display);font-size:19px;text-transform:uppercase;letter-spacing:.03em}
.nphead small{font-family:var(--mono);color:var(--faint)}
.npchips{display:flex;flex-wrap:wrap;gap:6px}
.npchip{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;border-radius:99px;padding:5px 6px 5px 11px;background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);animation:pop .35s var(--spring)}
.npchip.players{background:var(--gold-soft);color:var(--gold);border-color:var(--gold-line)}
.npchip button{border:0;background:color-mix(in srgb,currentColor 18%,transparent);color:inherit;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;padding:0;font-size:14px;line-height:1}
.npadd{position:relative}
.npadd input{width:100%;border:1.5px solid var(--line);background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:14.5px}
.npadd input:focus{outline:none;border-color:var(--accent)}
.npsugs{display:grid;gap:4px;margin-top:6px;max-height:320px;overflow:auto}
.npsug{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:8px 10px;text-align:left;font-size:14px}
.npsug b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.npsug b mark{background:var(--accent-soft);color:var(--accent);border-radius:3px}
.npsug small{color:var(--muted);font-size:12px;white-space:nowrap}
.npsug.free{color:var(--accent);font-weight:700;border-style:dashed}
/* ---------- leagues ---------- */
.lbtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.lbmode button{font-size:14px;padding:7px 16px}
@media (max-width:480px){.lbmode{width:100%;display:flex}
.lbmode button{flex:1;font-size:13px;padding:7px 6px;white-space:nowrap}
.lbmode .n{margin-left:2px;padding:0 4px}}
.lbmode .n{font-family:var(--mono);font-size:11px;background:var(--accent-soft);color:var(--accent);border-radius:99px;padding:0 6px;margin-left:4px}
.lgs{display:grid;gap:14px}
.lgl{display:grid;gap:8px}
@media (min-width:900px){.lgl{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}
.lgc{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 14px;text-align:left;width:100%}
.lgc-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:18px;color:#fff;background:var(--grad);flex:none}
.lgc-b{flex:1;min-width:0;display:grid;gap:2px}
.lgc-b b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgc-b small{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgc-r{display:grid;justify-items:end}
.lgc-r b{font-family:var(--display);font-weight:800;font-size:26px;line-height:1;color:var(--accent)}
.lgc-r small{font-size:10.5px;color:var(--faint)}
.lgf{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:760px}
@media (max-width:760px){.lgf{grid-template-columns:1fr}}
.lgf-r{display:flex;gap:6px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px 6px 6px 10px}
.lgf-r input{flex:1;min-width:0;border:0;background:none;padding:6px 2px;font-size:14px;color:var(--ink)}
.lgf-r input:focus{outline:none}
.lgf-q{font-family:var(--mono);font-size:11px;color:var(--muted);padding:0 4px}
.lgf-full span{font-size:12.5px;color:var(--muted);padding:6px 2px;line-height:1.35}
.lgf-r:focus-within{border-color:var(--accent)}
.lgf-r input.code{text-transform:uppercase;font-family:var(--mono);letter-spacing:.15em}
.lgf-r input.code::placeholder{text-transform:none;letter-spacing:0;font-family:var(--body)}
.lg1{display:grid;gap:12px;max-width:1000px}
@media (min-width:1024px){.lg1{margin-inline:auto;width:100%}}
.lg-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lg-invite{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px dashed color-mix(in srgb,var(--accent) 50%,var(--line));background:var(--accent-soft);border-radius:14px;padding:12px 14px}
.lg-invite div{display:grid;flex:1;min-width:140px}
.lg-invite small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lg-invite b{font-family:var(--mono);font-size:26px;letter-spacing:.25em;color:var(--accent)}
.lg-sub{font-size:13px;color:var(--muted);font-weight:600}
.lgml{display:grid;gap:6px}
.lgm{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.lgm.me{border-color:var(--accent);background:var(--accent-soft)}
.lgm-rk{font-family:var(--display);font-weight:800;font-size:20px;width:26px;text-align:center;color:var(--faint)}
.lgm-n{flex:1;min-width:0;display:grid;gap:2px}
.lgm-n b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgm-s{display:grid;justify-items:end;gap:1px}
.lgm-s b{font-family:var(--mono)}
.lgm-s small{font-size:11.5px;color:var(--muted)}
.lg-actions{display:flex;gap:8px;flex-wrap:wrap}
/* ---------- podium ---------- */
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:10px;margin:8px auto 16px;padding-top:18px;max-width:560px}
.pod{display:grid;justify-items:center;gap:6px;text-align:center;min-width:0}
.pod .av{--s:58px;box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--medal),0 0 22px var(--medal)}
.pod.p1 .av{--s:78px}
.pod .crown{font-size:24px;line-height:1;margin-bottom:-6px;filter:drop-shadow(0 0 8px rgba(255,194,74,.8));animation:float 2.6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-4px)}}
.pod .pn{font-weight:800;font-size:17px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .pp{font-family:var(--mono);font-weight:700;font-size:13px}
.pod .step{width:100%;border-radius:14px 14px 6px 6px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:38px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.2);
  background:linear-gradient(180deg,var(--medal),color-mix(in srgb,var(--medal) 45%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 30px -12px var(--medal);position:relative;overflow:hidden}
.pod .step::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%);transform:translateX(-100%);animation:shine 3.5s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(100%)}}
.pod.p1{--medal:#F5B83D}
.pod.p1 .step{height:120px}
.pod.p2{--medal:#A7B4C8}
.pod.p2 .step{height:88px}
.pod.p3{--medal:#D08A4E}
.pod.p3 .step{height:66px}
.pod.empty .av{opacity:.35}
.pod.empty .step{opacity:.35}
.pod .you{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--accent);text-transform:uppercase}
#view.stg .pod{animation:podUp .7s var(--spring) both}
#view.stg .pod.p1{animation-delay:.25s}
#view.stg .pod.p2{animation-delay:.1s}
#view.stg .pod.p3{animation-delay:.4s}
@keyframes podUp{from{opacity:0;transform:translateY(40px)}}
/* ================= EFFECTS ================= */
/* press feedback on everything clickable */
.btn,.chip,.mk,.seg button,.selb,.side,.cupbet,.duo,.citem,.ob-card,.ob-team,.ob-all,.arr,.th,.switch button,.linkbtn,.tab{-webkit-tap-highlight-color:transparent;transition:transform .18s var(--spring),border-color .15s,background-color .2s,color .2s,box-shadow .2s}
.btn:active:not(:disabled),.chip:active,.mk:active,.seg button:active,.cupbet:active:not(:disabled),.duo:active,.citem:active,.ob-card:active,.ob-team:active:not(:disabled),.ob-all:active,.arr:active,.th:active,.switch button:active{transform:scale(.94);transition-duration:.06s}
.selb:active:not(:disabled),.side:active:not(:disabled){transform:scale(.96);transition-duration:.06s}
.btn,.chip,.mk,.selb,.side,.cupbet,.duo,.citem,.ob-card,.ob-team,.switch button,.seg button{position:relative;overflow:hidden;isolation:isolate}
.rip{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:rip .55s var(--out) forwards;z-index:-1}
@keyframes rip{to{transform:scale(1);opacity:0}}
@media (hover:hover){.selb:hover:not(:disabled),.side:hover:not(:disabled),.cupbet:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px -8px var(--accent)}
.match{transition:box-shadow .25s,border-color .25s}
.match:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:var(--shadow)}
.btn.primary:hover:not(:disabled){box-shadow:0 6px 18px -6px var(--accent);transform:translateY(-1px)}}
/* odds picked */
.selb.sel,.side.sel,.cupbet.sel{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent),0 8px 22px -10px var(--accent)}
.side.sel.a{box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 30%,transparent),0 8px 22px -10px var(--blue)}
.side.sel.b{box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 30%,transparent),0 8px 22px -10px var(--red)}
.just{animation:pop .5s var(--spring),ringS .75s var(--out)}
@keyframes ringS{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}to{box-shadow:0 0 0 14px transparent}}
.just .odds,.just .o{animation:oddsGlow .7s ease-out}
@keyframes pop{0%{transform:scale(.92)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.18)}}
@keyframes oddsGlow{0%{text-shadow:0 0 0 transparent}35%{text-shadow:0 0 14px var(--accent);transform:scale(1.15)}100%{text-shadow:0 0 0 transparent}}
/* markets switch */
.swap{animation:swapIn .32s var(--out)}
@keyframes swapIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* bet slip */
.slip.enter{animation:slipIn .42s var(--spring)}
.slip.leave{animation:slipOut .2s ease-in forwards}
@keyframes slipIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes slipOut{to{opacity:0;transform:translateY(16px) scale(.97)}}
@media (max-width:900px){@keyframes slipIn{from{transform:translateY(105%)}to{transform:none}}
@keyframes slipOut{to{transform:translateY(105%)}}
.slip{box-shadow:0 -12px 40px -12px rgba(0,0,0,.45)}}
.slip .gain b{display:inline-block;transition:transform .2s var(--spring)}
.slip .gain b.bump{animation:bump .35s var(--spring)}
@keyframes bump{50%{transform:scale(1.18)}}
#placeBtn{position:relative}
#placeBtn.loading{color:transparent}
#placeBtn.loading::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:2.5px solid var(--accent-ink);border-right-color:transparent;animation:spin .7s linear infinite}
#placeBtn.ok{background:var(--good);border-color:var(--good);color:#fff;animation:pop .45s var(--spring)}
@keyframes spin{to{transform:rotate(360deg)}}
.betflash{animation:betflash 1.2s var(--out)}
@keyframes betflash{0%{box-shadow:0 0 0 0 var(--good)}30%{box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 55%,transparent),0 0 30px -4px var(--good);border-color:var(--good)}100%{box-shadow:0 0 0 0 transparent}}
/* balance */
.wallet.up{animation:walletUp .9s var(--out)}
.wallet.down{animation:walletDown .6s var(--out)}
@keyframes walletUp{0%{box-shadow:0 0 0 0 var(--gold)}30%{transform:scale(1.1);box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 35%,transparent),0 0 28px var(--gold)}100%{transform:none;box-shadow:0 0 0 0 transparent}}
@keyframes walletDown{30%{transform:scale(.93)}100%{transform:none}}
.wallet.hit .coin{animation:coinSpin .6s var(--out)}
@keyframes coinSpin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.fxlayer{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.fxp{position:absolute;left:0;top:0;will-change:transform,opacity}
.fxcoin{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A8 0,#FFC24A 45%,#E09A12 100%);box-shadow:0 0 10px rgba(255,194,74,.7)}
/* tab / screen transitions */
#view.in-r{animation:inR .34s var(--out)}
#view.in-l{animation:inL .34s var(--out)}
@keyframes inR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes inL{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
#view.in-r .day,#view.in-r .match,#view.in-r .betrow,#view.in-r .panel,#view.in-r .card,#view.in-r .stat,
#view.in-l .day,#view.in-l .match,#view.in-l .betrow,#view.in-l .panel,#view.in-l .card,#view.in-l .stat,#view.stg .crow,#view.stg .fcard,#view.stg .hero{animation:rise .5s var(--out) both;animation-delay:calc(var(--i,0) * 40ms)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.chip[aria-pressed="true"],.mk[aria-pressed="true"],.seg button[aria-pressed="true"]{animation:pop .35s var(--spring)}
/* toast */
.toast{display:flex;align-items:center;gap:10px;width:max-content;transition:opacity .25s,transform .45s var(--spring)}
body:has(.slip:not(.idle)) .toast{bottom:calc(330px + env(safe-area-inset-bottom,0px))}
@media (min-width:901px){body:has(.slip:not(.idle)) .toast{bottom:calc(24px + env(safe-area-inset-bottom,0px))}}
.toast.show{transform:translateX(-50%) translateY(0) scale(1)}
.toast .ti{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--good);color:#fff}
/* win */
.won-burst{animation:pop .6s var(--spring)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
.fxlayer{display:none}}
/* ===== v19 polish ===== */
.status{display:none}
.status.off{display:flex}
.brand b i{transition:filter .4s}
.brand.live b i{background:var(--good);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px var(--good));animation:brandlive 2.4s ease-in-out infinite}
@keyframes brandlive{50%{filter:drop-shadow(0 0 1px var(--good))}}
#view{padding-top:14px}
@media (max-width:640px){h2.sec{font-size:22px}}
.mi-teams{max-width:460px}
.mi-t .mi-logo,.mi-logo{width:26px;height:26px;border-radius:7px}
.mi-logo.tag{font-size:9.5px;letter-spacing:-.02em}
.mi-t.win span{color:var(--ink)}
.mi-t.win .mi-sc{color:var(--good)}
.mi-t.lose{opacity:.55}
.mi-nb{display:inline-flex;align-items:center;gap:2px;padding:1px 6px 1px 4px}
.mi-end{gap:4px}
@media (max-width:480px){.mi{gap:9px;grid-template-columns:48px minmax(0,1fr) auto}
.mi-t{font-size:14.5px;gap:8px}
.mi-nb svg{width:11px;height:11px}}
.mi-nb svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){table.board{min-width:0;table-layout:fixed}
.board th:first-child,.board td:first-child{width:34px}
.board th:nth-child(3),.board td:nth-child(3){width:84px}
.board .who{flex-wrap:wrap;row-gap:2px;min-width:0}
.board .who .rtag{margin-left:0;flex-basis:100%;padding-left:38px}
.board th:nth-child(n+4),.board td:nth-child(n+4){display:none}
.board th,.board td{padding:10px 10px}}
/* ===== v19 : menu compte façon Discord, profils, succès, parrainage, fil, paris compacts ===== */
.sheet.sp-in .sp-body,.sheet.sp-in>.sp-cards{animation:spIn .28s var(--spring)}
@keyframes spIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.sheet{gap:12px}
.sheet-head>div{display:grid;gap:3px;justify-items:start;min-width:0}
.panel.daily h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.home{display:grid;gap:26px;padding-bottom:20px}
.hm-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:center;padding:26px 0 6px}
.hm-kick{display:inline-block;font:800 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);padding:5px 10px;border-radius:99px;background:var(--accent-soft)}
.hm-copy h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,5.4vw,62px);line-height:.95;margin:14px 0 12px;letter-spacing:-.01em}
.hm-copy h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-copy p{font-size:16px;color:var(--muted);max-width:56ch;margin:0}
.hm-cta{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 10px}
.hm-cta .btn{width:auto;flex:1 1 180px;max-width:260px}
.hm-final .btn.big{width:auto;min-width:min(320px,100%)}
.hm-gift{color:var(--faint);font-size:12.5px}
.hm-fan{position:relative;height:clamp(250px,32vw,380px)}
.hm-fan>div{position:absolute;top:50%;left:50%;width:clamp(140px,17vw,210px)}
.hm-fan .kw-big{width:100%;margin:0}
.hm-fan .f1{transform:translate(-112%,-46%) rotate(-12deg)}
.hm-fan .f3{transform:translate(12%,-46%) rotate(12deg)}
.hm-fan .f2{transform:translate(-50%,-54%);z-index:2;filter:drop-shadow(0 20px 40px rgba(0,0,0,.45))}
@media (prefers-reduced-motion:no-preference){.hm-fan .f2{animation:hmFloat 4s ease-in-out infinite}}
@keyframes hmFloat{50%{transform:translate(-50%,-58%)}}
.hm-games{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hm-game{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:13px}
.hm-game i{width:8px;height:8px;border-radius:50%;background:var(--g)}
.hm-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hm-stats div{display:grid;justify-items:center;text-align:center;padding:14px 8px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.hm-stats b{font-family:var(--display);font-size:34px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-stats span{font-size:12.5px;color:var(--muted)}
.hm-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hm-f{padding:18px;border-radius:20px;border:1px solid var(--line);background:var(--surface);display:grid;gap:8px;align-content:start}
.hm-f h3{margin:4px 0 0;font-family:var(--display);text-transform:uppercase;font-size:22px;line-height:1}
.hm-f p{margin:0;color:var(--muted);font-size:14px}
.hm-vis{height:120px;border-radius:14px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;position:relative}
.hm-vis.hm-odds{flex-wrap:nowrap;padding:0 14px}
.hm-vis.hm-odds span{display:grid;gap:2px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);flex:1 1 0;min-width:0;max-width:170px}
.hm-vis.hm-odds b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-vis.hm-odds span.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.hm-vis.hm-odds b{font-size:13px}
.hm-vis.hm-odds em{font:800 18px var(--mono);font-style:normal;color:var(--accent)}
.hm-vis.packs .pk{--W:70px;flex:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))}
.hm-vis.friends span{font-size:38px;width:64px;height:64px;display:grid;place-items:center;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.hm-next{display:grid;gap:8px}
.hm-next h2,.hm-steps h2,.hm-final h2{margin:0 0 4px;font-family:var(--display);text-transform:uppercase;font-size:28px}
.hm-m{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px;padding:11px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-size:14px}
.hm-ts{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;min-width:0}
.hm-t{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.hm-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-m em{font:800 13px var(--mono);font-style:normal;color:var(--accent);padding:3px 7px;border-radius:8px;background:var(--accent-soft);flex:none}
.hm-when{font:600 11.5px var(--mono);color:var(--faint);white-space:nowrap}
.hm-next .btn{justify-self:start}
.hm-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hm-steps h2{grid-column:1/-1}
.hm-steps div{padding:16px;border-radius:18px;border:1px solid var(--line);background:var(--surface);display:grid;gap:4px}
.hm-steps span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff;background:var(--grad)}
.hm-steps b{font-size:16px}
.hm-steps p{margin:0;font-size:13.5px;color:var(--muted)}
.hm-final{display:grid;justify-items:center;gap:10px;text-align:center;padding:28px 16px;border-radius:24px;border:1px solid var(--line);background:radial-gradient(120% 140% at 50% 0%,color-mix(in srgb,var(--accent) 22%,var(--surface)),var(--surface))}
@media (max-width:760px){.hm-hero{grid-template-columns:1fr;padding-top:14px}
.hm-fan{height:250px;order:-1}
.hm-fan>div{width:140px}
.hm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.hm-feats,.hm-steps{grid-template-columns:1fr}
.hm-m{grid-template-columns:auto minmax(0,1fr);font-size:13.5px;padding:10px 12px}
.hm-m .hm-when{display:none}
.hm-ts{grid-template-columns:1fr}}
body.guest .top .brand{cursor:pointer}
.tn-form{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.tn-form>input:first-child,.tn-form textarea,.tn-form .btn{grid-column:1/-1}
.tn-form label{display:grid;gap:4px;font-size:12px;color:var(--muted)}
.tns{display:grid;gap:10px;margin:0 0 16px}
.tns .subsec{margin:0}
.tn{position:relative;display:grid;gap:10px;padding:14px;border-radius:18px;border:1px solid color-mix(in srgb,var(--g,var(--accent)) 45%,var(--line));background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--g,var(--accent)) 16%,var(--surface)),var(--surface) 60%);overflow:hidden}
.tn-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0}
.tn-t{display:grid;min-width:0;flex:1 1 160px}
.tn-t b{font-family:var(--display);font-size:20px;text-transform:uppercase;line-height:1.05}
.tn-head .sp{display:none}
.tn-t small{font-size:12px;color:var(--muted)}
.tn-clock{font:700 11.5px var(--mono);color:var(--gold);white-space:nowrap}
.tn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:6px}
.tn-team{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);text-align:left;min-width:0;font-size:14px}
.tn-team img,.tn-tag{width:26px;height:26px;border-radius:7px;flex:none;object-fit:contain}
.tn-tag{display:grid;place-items:center;font:800 9px var(--mono);background:var(--surface);border:1px solid var(--line)}
.tn-n{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-o{font:800 14px var(--mono);color:var(--accent)}
.tn-team.sel{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.tn-team.mine{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--surface-2))}
.tn-team.won{border-color:var(--good);background:color-mix(in srgb,var(--good) 16%,var(--surface-2))}
.tn-team:disabled{cursor:default;opacity:.85}
.tn-team:not(:disabled):hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.tn-mine{font-size:13px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--gold) 10%,transparent);border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line))}
.tn-more{justify-self:start}
.tn-note{margin:0;font-size:12px;color:var(--faint)}
.chals h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chal-reset{margin-left:auto;font:600 11.5px var(--mono);color:var(--faint);text-transform:none;letter-spacing:0}
.chal{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);margin-top:8px}
.chal-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:21px;background:var(--surface);border:1px solid var(--line)}
.chal-b{display:grid;gap:3px;min-width:0}
.chal-b b{font-size:14.5px}
.chal-b small{font-size:12.5px;color:var(--muted);line-height:1.35}
.chal-b .bar{height:6px;margin-top:3px}
.chal-b .bar i{background:var(--grad)}
.chal-v{font:700 11px var(--mono);color:var(--faint)}
.chal-r{display:grid;justify-items:end;gap:5px;text-align:right}
.chal-rw{font:800 11px var(--mono);color:var(--gold);white-space:nowrap}
.chal-ok{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--good);color:#04130a;font-weight:900}
.chal.ready{border-color:color-mix(in srgb,var(--gold) 60%,var(--line));background:linear-gradient(110deg,color-mix(in srgb,var(--gold) 14%,var(--surface-2)),var(--surface-2) 60%);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 25%,transparent)}
.chal.ready .chal-ic{animation:chalPop 1.6s ease-in-out infinite}
@keyframes chalPop{50%{transform:scale(1.12) rotate(-6deg)}}
.chal.claimed{opacity:.6}
.chal.claimed .chal-b small{text-decoration:line-through}
.chal-bonus{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin-top:10px;padding:10px 12px;border-radius:12px;border:1px dashed var(--line);font-size:13px;color:var(--muted)}
.chal-bonus.on{border-style:solid;border-color:color-mix(in srgb,var(--good) 50%,var(--line))}
.chal-bst{display:flex;align-items:center;gap:6px}
.chal-bst .dots{display:inline-flex;gap:3px}
.chal-bst .dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.chal-bst .dots i.on{background:var(--gold)}
.chal-strip{display:flex;align-items:center;gap:10px;width:100%;text-align:left;margin:0 0 12px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:13px;cursor:pointer}
.chal-strip span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.chal-strip b{color:var(--ink)}
.chal-strip em{font-style:normal;color:var(--gold);font-weight:800}
.chal-strip.ready{border-color:color-mix(in srgb,var(--gold) 60%,var(--line));box-shadow:0 0 18px -6px var(--gold)}
.cs-ic{font-size:18px}
.cs-go{font-size:20px;color:var(--faint)}
.panel.daily h3 .count{white-space:nowrap}
.sheet .ptitle,.hero-name .ptitle,.pf-top .ptitle{display:block;font-style:italic;font-weight:600;font-size:13px;color:var(--accent);letter-spacing:.01em}
.sp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sp-card{display:grid;justify-items:start;gap:2px;text-align:left;border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:12px 11px;transition:transform .15s,border-color .15s}
.sp-card:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));transform:translateY(-1px)}
.sp-card b{font-size:13.5px;line-height:1.15}
.sp-card small{font-size:11.5px;color:var(--muted);line-height:1.25}
.sp-big{font-size:22px;line-height:1;margin-bottom:4px}
.sp-group{display:grid;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface-2)}
.sp-item{display:flex;align-items:center;gap:12px;border:0;background:none;padding:11px 12px;text-align:left;width:100%;color:var(--ink)}
.sp-item+.sp-item{border-top:1px solid var(--line)}
.sp-item:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.sp-ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent)}
.sp-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-l{flex:1;min-width:0;display:grid}
.sp-l b{font-size:14.5px;font-weight:700}
.sp-l small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-chev{color:var(--faint);font-size:22px;line-height:1}
.sp-out{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid color-mix(in srgb,var(--bad) 40%,var(--line));background:none;color:var(--bad);border-radius:12px;padding:11px;font-weight:700}
.sp-out svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-legal{margin:0;text-align:center;font-size:12px;color:var(--muted)}
.sp-head{display:flex;align-items:center;gap:10px}
.sp-head b{font-family:var(--display);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.03em;flex:1}
.sp-back{border:0;background:var(--surface-2);width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;color:var(--ink);padding-bottom:3px}
.sp-body{display:grid;gap:14px}
.sp-sec{display:grid;gap:8px}
.sp-lbl{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sp-note{margin:0;font-size:13px;color:var(--muted)}
.sp-val{margin:0;font-weight:600}
.sp-code{font-family:var(--mono);font-size:15px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;flex:1}
.sp-body input:not([type=checkbox]):not([type=radio]){width:100%}
.sp-photo{display:grid;place-items:center;padding:4px 0}
.sp-photo .av{box-shadow:0 0 0 3px var(--solid),0 0 0 5px var(--accent),0 0 30px color-mix(in srgb,var(--accent) 50%,transparent)}
.sheet .panel{border:0;padding:0;background:none!important}
.sheet .panel h3{display:none}
/* succès */
.achs{display:grid;gap:8px}
.ach{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--surface-2)}
.ach-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;font-size:26px;background:var(--surface);filter:grayscale(1);opacity:.45}
.ach.on{border-color:color-mix(in srgb,var(--gold) 55%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 12%,var(--surface-2)),var(--surface-2))}
.ach.on .ach-ic{filter:none;opacity:1;background:var(--gold-soft);box-shadow:0 0 18px -4px var(--gold)}
.ach-b{flex:1;min-width:0;display:grid;gap:3px}
.ach-b b{font-size:15px}
.ach-b small{font-size:12.5px;color:var(--muted)}
.ach-b .bar{height:6px;margin-top:3px}
.ach-date{font-family:var(--mono);font-size:11px;color:var(--faint)}
.ach-lock{font-size:16px;opacity:.6}
/* parrainage */
.ref-hero{display:grid;justify-items:center;text-align:center;gap:4px;padding:14px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--gold) 14%,transparent));border:1px solid var(--line)}
.ref-hero>b{font-family:var(--display);font-size:22px;text-transform:uppercase}
.ref-hero p b{color:var(--gold)}
.ref-hero p{margin:0;font-size:13.5px;color:var(--muted)}
.ref-link{border:1px dashed var(--accent);border-radius:12px;padding:10px 12px;text-align:center;overflow-wrap:anywhere}
.ref-link code{font-family:var(--mono);font-size:13.5px}
.ref-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ref-stats div{display:grid;gap:2px;text-align:center;border:1px solid var(--line);border-radius:12px;padding:10px 6px;background:var(--surface-2)}
.ref-stats span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.ref-stats b{font-family:var(--mono);font-size:17px}
.ref-banner{border-radius:12px;padding:10px 12px;background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 22%,transparent),color-mix(in srgb,var(--accent) 18%,transparent));border:1px solid var(--gold-line);font-size:14px}
/* profil public */
.sheet.prof{gap:14px}
.sheet.prof>.x{position:absolute;right:14px;top:14px;margin:0}
.sheet.prof{position:relative}
.pf-top{display:grid;justify-items:center;gap:4px;text-align:center;padding-top:6px}
.pf-av{position:relative;margin-bottom:6px}
.pf-av .av{box-shadow:0 0 0 3px var(--solid),0 0 0 5px var(--tc),0 0 34px color-mix(in srgb,var(--tc) 55%,transparent)}
.pf-av .lvl-bub{position:absolute;right:-2px;bottom:-2px;min-width:28px;height:28px;font-size:13px}
.pf-name{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;text-transform:uppercase}
.pf-chips{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:4px}
.pf-since{font-size:12px;color:var(--faint)}
.pf-rank{display:flex;align-items:center;gap:12px;border:1px solid color-mix(in srgb,var(--tc) 40%,var(--line));border-radius:16px;padding:12px 14px;background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 12%,transparent),transparent)}
.pf-rank>div{display:grid;gap:1px}
.pf-rank small,.pf-lv small{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.pf-rank b{font-family:var(--display);font-weight:800;font-size:22px;text-transform:uppercase;line-height:1.05}
.pf-rank span{font-size:12px;color:var(--muted)}
.pf-lv{margin-left:auto;text-align:center}
.pf-lv b{font-family:var(--mono);font-size:26px;color:var(--ink)}
.pf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pf-stats div{display:grid;gap:2px;border:1px solid var(--line);border-radius:12px;padding:9px 10px;background:var(--surface-2)}
.pf-stats span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.pf-stats b{font-family:var(--mono);font-size:15.5px;overflow-wrap:anywhere}
.pf-achs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pf-ach{display:grid;justify-items:center;gap:4px;text-align:center;border:1px solid var(--line);border-radius:12px;padding:10px 6px;opacity:.5}
.pf-ach span{font-size:24px;filter:grayscale(1)}
.pf-ach small{font-size:11px;color:var(--muted);line-height:1.2}
.pf-ach.on{opacity:1;border-color:var(--gold-line);background:var(--gold-soft)}
.pf-ach.on span{filter:none}
.sheet h4 .count{font-family:var(--mono);color:var(--accent);margin-left:4px;letter-spacing:0}
[data-prof]{cursor:pointer}
.plink{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border-radius:10px}
.fitem .plink:hover .nm,.fhead.plink:hover b,.lgm[data-prof]:hover b,.board tr[data-prof]:hover .who span{color:var(--accent)}
.pod[data-prof]{transition:transform .15s}
.pod[data-prof]:hover{transform:translateY(-3px)}
/* cloche */
.npanel h4{display:flex;align-items:center;gap:8px}
.nh-act{margin-left:auto;display:flex;align-items:center;gap:10px}
.nclear{border:1px solid var(--line);background:var(--surface-2);color:var(--muted);border-radius:99px;padding:3px 10px;font-size:11.5px;font-family:var(--body);font-weight:700;text-transform:none;letter-spacing:0}
.nclear:hover{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
/* bonus de connexion */
.dlys{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.dly{position:relative;display:grid;justify-items:center;gap:2px;padding:8px 2px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2)}
.dly small{font-size:10px;color:var(--muted);font-family:var(--mono)}
.dly b{font-family:var(--mono);font-size:12.5px}
.dly i{position:absolute;top:-6px;right:-5px;width:16px;height:16px;border-radius:50%;background:var(--good);color:#fff;font-size:10px;font-style:normal;display:grid;place-items:center}
.dly.done{border-color:color-mix(in srgb,var(--good) 45%,var(--line));background:color-mix(in srgb,var(--good) 10%,var(--surface-2))}
.dly.now{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 16px -4px var(--gold);animation:dlyPulse 1.8s ease-in-out infinite}
.dly.now b{color:var(--gold)}
@keyframes dlyPulse{50%{box-shadow:0 0 22px -2px var(--gold)}}
@media (max-width:420px){.dlys{gap:4px}
.dly b{font-size:11.5px}
.dly small{font-size:9px}}
.rules-d summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.rules-d summary::-webkit-details-marker{display:none}
.rules-d summary::after{content:"›";font-size:22px;color:var(--muted);transition:transform .2s}
.rules-d[open] summary::after{transform:rotate(90deg)}
.acc2 .sec-head .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-right:6px;vertical-align:-3px}
/* fil : tendances */
.subsec{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.04em;text-transform:uppercase;margin:18px 0 10px}
.subsec small{font-family:var(--body);font-weight:500;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--muted)}
.empty.sm{padding:16px;font-size:14px}
.trs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:10px}
.trc{position:relative;display:grid;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;overflow:hidden;transition:transform .15s,border-color .15s}
.trc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--g,var(--accent))}
.trc:hover{border-color:color-mix(in srgb,var(--g,var(--accent)) 50%,var(--line));transform:translateY(-1px)}
.tr-top{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.tr-top .game{font-size:9.5px;padding:1px 5px}
.tr-lg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-when{font-family:var(--mono);font-size:11.5px}
.tr-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.tr-t{display:flex;align-items:center;gap:8px;min-width:0;font-size:14.5px}
.tr-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-t.b{justify-content:flex-end;text-align:right}
.tr-t.lead b{color:var(--ink)}
.tr-t:not(.lead) b{color:var(--muted);font-weight:600}
.tr-logo{flex:none;width:26px;height:26px;border-radius:7px;object-fit:contain;background:var(--surface-2)}
.tr-logo.tag{display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:9.5px;color:#fff}
.tr-vs{font-family:var(--display);font-weight:800;color:var(--faint);font-size:13px}
.tr-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;gap:3px;background:var(--surface-2)}
.tr-bar i{display:block;height:100%;min-width:6px;transition:width .6s var(--spring)}
.tr-bar i:only-child{border-radius:99px}
.tr-bar .a{background:linear-gradient(90deg,var(--blue),color-mix(in srgb,var(--blue) 70%,#fff));border-radius:99px 0 0 99px}
.tr-bar .b{background:linear-gradient(90deg,color-mix(in srgb,var(--red) 70%,#fff),var(--red));border-radius:0 99px 99px 0}
.tr-nums{display:flex;justify-content:space-between;gap:6px;font-size:12px;color:var(--muted)}
.tr-nums b{font-family:var(--mono);font-size:13.5px;color:var(--ink)}
.tr-nums span:first-child b{color:var(--blue)}
.tr-nums span:last-child b{color:var(--red)}
.tr-tot{font-size:11.5px;color:var(--faint);align-self:center;white-space:nowrap}
.tr-nums span{white-space:nowrap}
.tr-nums small{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
/* paris compacts */
.bis{display:grid;gap:8px}
.bi{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) auto 26px;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 10px 10px 15px;cursor:pointer;overflow:hidden;transition:border-color .15s}
.bi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--g,var(--accent))}
.bi:active{transform:scale(.985)}
.bi:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bi.open{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.bi.open .mi-chev{transform:rotate(180deg)}
.bi .mi-when small{font-size:10.5px;color:var(--muted);margin-top:-4px}
.bi-mid{display:grid;gap:4px;min-width:0}
.bi-match{display:flex;align-items:center;gap:6px;min-width:0;font-weight:700;font-size:14px}
.bi-match span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bi-match i{font-style:normal;color:var(--faint);font-size:11px;font-weight:600;flex:none}
.bi-match .mi-logo{width:20px;height:20px;border-radius:5px}
.bi-match .mi-sc{margin-left:auto;font-size:14px}
.bi-pick{display:flex;align-items:baseline;gap:6px;min-width:0;font-size:12.5px;color:var(--muted)}
.bi-pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bi-pick em{font-style:normal;font-family:var(--mono);font-weight:800;color:var(--accent);flex:none}
.bi-end{display:grid;justify-items:end;gap:1px}
.bi-end small{font-family:var(--mono);font-size:11px;color:var(--muted)}
.bi-end b{font-family:var(--mono);font-size:15px}
.bi-st{font-family:var(--mono);font-weight:800;font-size:10px;border-radius:5px;padding:2px 5px;border:1px solid var(--line);color:var(--muted)}
.bi-st.won{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent);background:color-mix(in srgb,var(--good) 10%,transparent)}
.bi-st.lost{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.bi.st-lost{opacity:.8}
.bi-wrap{display:grid;gap:0}
.bi-wrap .bi{border-radius:14px 14px 0 0;border-bottom-color:transparent}
.bi-wrap .tk{border-radius:0 0 14px 14px;margin-top:-1px;animation:tkDown .3s var(--spring)}
@keyframes tkDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* pop-ups gros gain / grosse perte */
.promo.big .big-ic{font-size:78px;line-height:1;animation:embIn .9s var(--spring)}
.promo.big h2{font-size:46px}
.promo.big .big-line{font-size:17px;font-weight:700;color:var(--ink);margin:0}
.big-amt{font-family:var(--mono);font-weight:800;font-size:34px;letter-spacing:-.02em}
.big-amt.pos{color:var(--gold);text-shadow:0 0 24px color-mix(in srgb,var(--gold) 55%,transparent)}
.big-amt.neg{color:var(--bad)}
.promo.big .big-sub{font-size:12.5px;margin:0 0 10px}
.promo.big.lose{background:linear-gradient(180deg,color-mix(in srgb,#FF4D6D 12%,var(--solid)),var(--solid))!important}
.promo.shake{animation:sheetIn .5s var(--spring),bigShake .5s .45s ease-in-out}
@keyframes bigShake{15%,55%{transform:translateX(-10px) rotate(-1.5deg)}35%,75%{transform:translateX(10px) rotate(1.5deg)}}
@media (max-width:760px){.sp-cards{grid-template-columns:repeat(3,1fr)}
.sp-card{padding:10px 9px}
.sp-card b{font-size:12.5px}
.bi{grid-template-columns:50px minmax(0,1fr) auto 22px;gap:8px}
.pf-stats{grid-template-columns:repeat(3,1fr)}}
/* ===== v20b : plus de vie ===== */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@media (prefers-reduced-motion: no-preference){/* entrée en cascade des listes à chaque changement de page */
#view.stg :is(.sec-head,.day,.mi,.bi,.bi-wrap,.trc,.subsec,.fcard,.lgc,.lgm,.lgf,.bsum>div,.btabs,.panel,.tk,.mypos,.nupd){animation:rise .5s var(--out) both;animation-delay:calc(var(--i,0) * 38ms)}
#view.stg .board tbody tr{animation:rowIn .45s var(--out) both;animation-delay:calc(var(--i,0) * 38ms)}
@keyframes rowIn{from{opacity:0;transform:translateX(-14px)}}
/* barres qui se remplissent */
#view.stg .bar i,#view.stg .tr-bar i,.sheet.sp-in .bar i,.sheet .sp-player .bar i{animation:barGrow .9s var(--out) both;transform-origin:left center}
.tr-bar .b{transform-origin:right center}
@keyframes barGrow{from{transform:scaleX(0)}}
#view.stg .ring{animation:ringIn 1s var(--out) both}
@keyframes ringIn{from{opacity:.2;transform:rotate(-90deg) scale(.85)}}
/* matchs en direct : liseré qui respire */
.mi.is-live{border-color:color-mix(in srgb,var(--red) 45%,var(--line));animation:liveCard 2.4s ease-in-out infinite}
.mi.is-live::before{background:var(--red)!important;box-shadow:0 0 12px var(--red)}
@keyframes liveCard{50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--red) 30%,transparent),0 0 22px -8px var(--red)}}
.mi-sc.live{animation:scorePulse 1.6s ease-in-out infinite}
@keyframes scorePulse{50%{text-shadow:0 0 10px var(--red)}}
/* cartes qui réagissent au survol (PC) et au toucher */
@media (hover:hover){.mi,.bi,.trc,.fcard,.lgc,.tk,.sp-card,.ach{transition:transform .2s var(--spring),box-shadow .2s,border-color .2s}
.mi:hover,.bi:hover,.trc:hover,.fcard:hover,.lgc:hover{transform:translateY(-2px);box-shadow:0 10px 28px -14px color-mix(in srgb,var(--g,var(--accent)) 70%,transparent);border-color:color-mix(in srgb,var(--g,var(--accent)) 40%,var(--line))}}
.fcard:active,.trc:active,.lgc:active,.sp-card:active,.sp-item:active{transform:scale(.98)}
/* cloche qui sonne à chaque nouvelle notification */
#bellBtn.ringing svg{animation:bellRing .9s ease-in-out;transform-origin:50% 10%}
@keyframes bellRing{10%,30%,50%{transform:rotate(16deg)}20%,40%,60%{transform:rotate(-16deg)}75%{transform:rotate(6deg)}100%{transform:none}}
/* gains potentiels qui brillent */
.bi-end b.gold,.tk-bottom .gold,.gain b{background:linear-gradient(100deg,var(--gold) 40%,#FFF3C4 50%,var(--gold) 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:goldShine 3.2s ease-in-out infinite}
@keyframes goldShine{0%{background-position:100% 0}60%,100%{background-position:-20% 0}}
/* pastille « nouveau » et bonus du jour */
.sp-daily:not(.done) span:first-child,.dly.now b{display:inline-block;animation:giftBob 1.8s ease-in-out infinite}
@keyframes giftBob{50%{transform:translateY(-3px) rotate(-6deg)}}
/* ouverture d'un match / d'un pari */
.mi[aria-expanded="true"]+*,.match.swap{animation:swapIn .35s var(--out)}
/* onglets du bas : l'icône saute quand on change */
.bnav button[aria-current="page"] svg{animation:navHop .45s var(--spring)}
@keyframes navHop{40%{transform:translateY(-5px) scale(1.12)}}
/* avatar de la bulle : halo animé */
.me-btn::after{background:conic-gradient(from var(--ang,0deg),#7C5CFF,#22D3EE,#FF4D9D,#7C5CFF);animation:haloSpin 6s linear infinite}
@keyframes haloSpin{to{--ang:360deg}}
/* titres de page */
#view.stg h2.sec::before{display:inline-block;animation:slashIn .6s var(--spring) both}
@keyframes slashIn{from{opacity:0;transform:translateX(-10px)}}}
.gain b.gold{color:var(--gold)}
/* ===== v20c : visiteur, gain sous le pari, couleurs adoucies ===== */
.guest-only{display:none}
body.guest .guest-only{display:inline-flex}
body.guest #wallet,body.guest #bellBtn,body.guest #meBtn{display:none!important}
@media (max-width:420px){body.guest #guestLogin{display:none}}
.guest-cta{display:grid;justify-items:center;text-align:center;gap:10px;max-width:520px;margin:28px auto;padding:30px 22px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface))}
.guest-cta .gc-ic{font-size:52px;line-height:1;animation:giftBob 2s ease-in-out infinite}
.guest-cta h2{font-family:var(--display);font-weight:800;font-size:28px;text-transform:uppercase;margin:0}
.guest-cta p{margin:0;color:var(--muted)}
.promo.gate{--tc:var(--accent)}
.promo.gate h2{font-size:28px;color:var(--ink);text-shadow:none}
.promo.gate p b.gold{color:var(--gold)}
.auth-back{justify-self:start;margin-bottom:-6px}
/* gain potentiel sous un pari */
.mybet{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.mybet.st-pending{border-color:var(--gold-line);background:linear-gradient(90deg,var(--surface-2),color-mix(in srgb,var(--gold) 9%,var(--surface-2)))}
.mb-l,.mb-r{display:grid;gap:2px;min-width:0}
.mb-r{justify-items:end;text-align:right}
.mb-k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mb-l b{font-family:var(--mono);font-size:14px;color:var(--ink)}
.mb-l b em{font-style:normal;color:var(--accent);font-weight:700}
.mb-v{font-family:var(--mono);font-size:22px;font-weight:800;line-height:1.1;color:var(--ink)}
.mb-v.gold{color:var(--gold);text-shadow:0 0 18px color-mix(in srgb,var(--gold) 35%,transparent)}
.mb-act{font-size:12px}
/* couleurs adoucies */
.game{background:transparent!important;color:var(--muted)!important;border-color:var(--line)!important;display:inline-flex;align-items:center;gap:5px}
.game::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g,var(--accent));flex:none}
.tag,.mi-logo.tag,.tk-logo.tag,.tr-logo.tag{background:color-mix(in srgb,var(--ink) 9%,var(--surface-2))!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--line)}
.tr-bar .a{background:var(--accent)}
.tr-bar .b{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.tr-nums span:first-child b{color:var(--accent)}
.tr-nums span:last-child b{color:var(--ink)}
.mi::before,.trc::before,.bi::before,.fcard::before,.tk::before{opacity:.7}
.mi.is-live::before{opacity:1}
/* ===== v21 : combinés + Discord ===== */
.combo-add{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent)}
.combo-add .cnt{font-family:var(--mono);font-size:11px;background:var(--accent);color:#fff;border-radius:99px;padding:1px 7px;margin-left:6px}
.selb.incombo{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 70%,transparent)}
.selb.incombo::after{content:"C";position:absolute;top:4px;right:6px;font-family:var(--mono);font-size:9px;font-weight:800;color:#fff;background:var(--accent);border-radius:4px;padding:0 3px}
.selb{position:relative}
#comboBar{position:fixed;z-index:34;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));width:min(420px,calc(100vw - 24px));pointer-events:none}
@media (min-width:761px){#comboBar{left:auto;right:24px;transform:none;bottom:24px;width:340px}}
.combo-bar{pointer-events:auto;width:100%;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));background:var(--solid);color:var(--ink);box-shadow:0 14px 40px -12px rgba(0,0,0,.6),0 0 24px -8px var(--accent);animation:slipIn .35s var(--spring)}
.combo-bar.pop{animation:pop .45s var(--spring)}
.cb-n{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--grad);color:#fff;font-family:var(--mono);font-weight:800}
.cb-t{flex:1;display:grid;text-align:left}
.cb-t b{font-size:14px}
.cb-t small{font-size:11.5px;color:var(--muted)}
.cb-o{font-family:var(--mono);font-weight:800;font-size:18px;color:var(--gold)}
.sheet.combo{gap:12px}
.cbl{display:grid;gap:6px}
.cbl-i{position:relative;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:9px 10px 9px 14px;background:var(--surface-2);overflow:hidden}
.cbl-i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--g,var(--accent))}
.cbl-i.bad{border-color:color-mix(in srgb,var(--bad) 55%,var(--line))}
.cbl-b{flex:1;min-width:0;display:grid;gap:2px}
.cbl-b small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbl-b small .game{font-size:9px;padding:0 4px;margin-right:4px}
.cbl-b b{font-size:13.5px}
.cbl-b em{font-style:normal;font-size:11.5px;color:var(--bad)}
.cbl-o{font-family:var(--mono);font-weight:800;color:var(--accent);font-size:14px}
.cbl-x{border:0;background:none;color:var(--muted);font-size:20px;padding:0 4px}
.cb-tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed var(--line);padding-top:10px}
.cb-tot span{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.cb-tot b{font-family:var(--mono);font-size:22px}
.sheet.combo .gain b{font-size:26px}
.combo-tag{font-size:9.5px!important}
.combo-tag::before{background:var(--grad)!important}
.combo-row .bi-match span{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em}
.cb-prog{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--good);margin-left:auto}
.cbd{border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;background:var(--surface);padding:8px 12px 12px;display:grid;gap:6px;animation:tkDown .3s var(--spring)}
.cbd-i{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.cbd-i:last-of-type{border-bottom:0}
.cbd-i>div{flex:1;min-width:0;display:grid}
.cbd-i small{font-size:11.5px;color:var(--muted)}
.cbd-i b{font-size:13.5px}
.cbd-s{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:800;background:var(--surface-2);color:var(--muted)}
.ls-won .cbd-s{background:color-mix(in srgb,var(--good) 20%,transparent);color:var(--good)}
.ls-lost .cbd-s{background:color-mix(in srgb,var(--bad) 20%,transparent);color:var(--bad)}
.bi-wrap>.combo-row{border-radius:14px 14px 0 0}
/* Discord */
.discord-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#5865F2!important;color:#fff!important;border-color:#5865F2!important;text-decoration:none;font-weight:700}
.discord-btn:hover{background:#4752C4!important}
.discord-btn svg{width:22px;height:22px}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:2px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.dc-linked{display:flex;align-items:center;gap:12px;border:1px solid color-mix(in srgb,#5865F2 45%,var(--line));background:color-mix(in srgb,#5865F2 10%,var(--surface-2));border-radius:12px;padding:10px 12px}
.dc-linked svg{width:26px;height:26px;color:#5865F2;flex:none}
.dc-linked div{flex:1;display:grid}
.dc-linked small{font-size:12px;color:var(--muted)}
.promo.gate .discord-btn{width:100%}
.sp-sec input:not([type=checkbox]),.sp-body .delbox input{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;color:var(--ink);font:inherit;font-size:15px}
.sp-sec input:focus,.sp-body .delbox input:focus{outline:none;border-color:var(--accent)}
.cb-prog{white-space:nowrap}
/* ===== v22 : paris groupés par match ===== */
.grp-n{flex:none;font-family:var(--mono);font-size:10.5px;font-weight:800;color:#fff;background:var(--accent);border-radius:99px;padding:1px 7px}
.bi.grp .bi-pick span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bi-pick .bcard,.bi.grp .bi-pick .bcard{flex:none;overflow:visible;max-width:none}
@media (max-width:560px){.bi-pick .bcard i{display:none}}
.bcard i{font-style:normal}
.bi-wrap>.bi.grp{border-radius:14px 14px 0 0}
.cbd-i>b{font-family:var(--mono);font-size:13.5px;white-space:nowrap}
.cbd-i small .linkbtn{font-size:12px}
.mb-all{display:flex;align-items:center;gap:10px;width:100%;margin-top:8px;border:1px dashed var(--line);background:none;border-radius:12px;padding:9px 12px;color:var(--muted);font-size:12.5px;text-align:left}
.mb-all span:first-child{flex:1}
.mb-all b.gold{font-family:var(--mono);font-size:15px}
.mb-all:hover{border-color:var(--accent);color:var(--ink)}
.bi-match .mi-sc{white-space:nowrap;flex:none}
/* ===== v23 : classement des rangs, top 50, Légende #N ===== */
.topb{position:absolute;left:-6px;top:-6px;z-index:2;font-family:var(--mono);font-weight:800;font-size:10.5px;line-height:1;padding:4px 6px;border-radius:99px;color:#1a1300;background:linear-gradient(135deg,#FFE08A,#FFC53D 55%,#E7A21C);box-shadow:0 0 0 2px var(--solid),0 4px 14px -4px #FFC53D;white-space:nowrap}
.topb.big{font-size:13px;padding:5px 9px;left:-10px;top:-4px}
.topb.leg{color:#fff;background:linear-gradient(135deg,#FF4D6D,#B06CFF);box-shadow:0 0 0 2px var(--solid),0 0 18px -2px #FF4D6D;animation:legGlow 2.4s ease-in-out infinite}
@keyframes legGlow{50%{box-shadow:0 0 0 2px var(--solid),0 0 26px 2px #FF4D6D}}
.hero-av,.sh-av{position:relative;display:inline-grid}
.rkl{display:grid;gap:6px;margin-top:10px}
.rkr{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 12px;cursor:pointer}
.rkr:hover{border-color:color-mix(in srgb,var(--tc,var(--accent)) 50%,var(--line))}
.rkr.me{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.rkr.leg{background:linear-gradient(90deg,color-mix(in srgb,#FF4D6D 12%,var(--surface)),var(--surface))}
.rkr.sticky{position:sticky;bottom:96px;margin-top:8px;box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
.rkr-n{width:28px;text-align:center;font-family:var(--mono);font-weight:800;color:var(--muted)}
.rkr-b{flex:1;min-width:0;display:grid}
.lgm-n b{font-size:16px}
.rkr-b b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rkr-b small{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap;row-gap:2px;min-width:0}
.rkr-rr{flex:none}
.rkr-b .lvl,.rkr .lvl{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:0 5px}
.rkr-rr b small{font-size:10px;color:var(--muted)}
.crwon{font-family:var(--mono);font-weight:800;font-size:12px;color:var(--gold)}
.crwon.neg{color:var(--muted)}
.pod .crwon{font-size:13px}
.pod .rtag{font-size:13px}
.pod .rtag svg{width:26px;height:26px}
.pod .rtag i{font-size:12.5px;padding:1px 6px}
.board .who>span:not(.rtag){font-size:15px;font-weight:700}
.board .rtag{font-size:12.5px}
.board .rtag svg{width:22px;height:22px}
.board .rtag i{font-size:12px}
.rkr-rr{display:grid;justify-items:end}
.rkr-rr b{font-family:var(--mono);font-size:16px}
.rkr-rr small{font-size:10px;color:var(--muted)}
.popular.wait{border-style:dashed;color:var(--muted)}
/* emblèmes prestige */
.emb-legende .emb-rays{transform-origin:20px 20px;animation:raySpin 14s linear infinite}
@keyframes raySpin{to{transform:rotate(360deg)}}
.emb-legende .emb-aura{animation:auraPulse 2.6s ease-in-out infinite}
@keyframes auraPulse{50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){.emb-legende .emb-rays,.emb-legende .emb-aura{animation:none}}
/* ---------- Collection ---------- */
.col-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.col-prog{font-family:var(--mono);font-weight:800;font-size:13px;color:var(--muted)}
.col-prog b{color:var(--ink)}
.col-bar{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:6px}
.col-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#FF2D95,#FF8A00,#2BFF88,#00B2FF)}
.col-tools{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.col-tools label{display:grid;gap:3px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);flex:1 1 160px}
.col-tools select{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:9px 12px;font:inherit;font-size:14px;font-weight:700;width:100%}
.col-active{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--c1,var(--accent)) 45%,var(--line));background:linear-gradient(120deg,color-mix(in srgb,var(--c1,var(--accent)) 16%,var(--surface)),var(--surface));margin:12px 0 6px}
.col-active .kw{width:78px;flex:none}
.col-active>div>small{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c1,var(--muted))}
.col-active>div>b{font-size:17px}
.col-active>div>p{margin:2px 0 0;color:var(--muted);font-size:13px}
.bst{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.bst span{font-family:var(--mono);font-weight:800;font-size:11px;padding:2px 8px;transform:skewX(-12deg);background:linear-gradient(90deg,var(--c1),var(--c2));color:#0b0618}
.col-rsec{margin-top:18px}
.col-rsec h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.col-rsec h3 i{width:10px;height:10px;border-radius:3px;transform:skewX(-12deg);background:linear-gradient(90deg,var(--c1),var(--c2))}
.col-rsec h3 small{font-family:var(--mono);color:var(--faint);font-size:12px}
.col-rsec .hint{font-size:12px;color:var(--faint);margin:-4px 0 10px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
@media (max-width:420px){.tgrid{grid-template-columns:repeat(2,1fr);gap:12px}}
/* the card is drawn at 290 × 420 and scales with its box */
/* empty slot, ready to be filled */
.cd-stars{display:grid;gap:8px;padding:12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.cd-stars .row1{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
.cd-stars .row1 b{color:var(--ink)}
.cd-sbar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cd-sbar div{display:grid;justify-items:center;gap:2px;padding:7px 4px;border-radius:10px;border:1px solid var(--line);font-size:11px;color:var(--faint)}
.cd-sbar div b{font:800 13px var(--mono);color:var(--muted)}
.cd-sbar div.on{border-color:#FFE14D;background:rgba(255,225,77,.1)}
.cd-sbar div.on b{color:#FFE14D}
.cd-boost{display:grid;gap:6px}
.cd-boost div{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--c1) 12%,var(--surface-2));border:1px solid color-mix(in srgb,var(--c1) 40%,var(--line))}
.cd-boost b{font:800 18px var(--mono);color:var(--c1);min-width:62px}
.cd-boost span{font-size:13px;color:var(--muted)}
.cd-note{font-size:12px;color:var(--faint);text-align:center;margin:0}
.bcard{display:inline-flex;align-items:center;gap:4px;font:800 10px var(--mono);padding:1px 6px;border-radius:99px;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);background:color-mix(in srgb,var(--c) 12%,transparent);margin-left:6px;white-space:nowrap}
/* ---------- Boosters ---------- */
/* header button: a mini pack with the count */
.th.boBtn{position:relative;width:34px;border-radius:10px;background:none;border:0}
.boBtn .mini{width:24px;height:34px;display:block;filter:drop-shadow(0 3px 6px rgba(255,45,149,.45))}
.boBtn.none .mini{filter:grayscale(1) opacity(.45)}
.boBtn .bdg{background:linear-gradient(90deg,#FF2D95,#FF8A00);top:-5px;right:-7px}
.boBtn.has .mini{animation:boWiggle 3.5s ease-in-out infinite}
@keyframes boWiggle{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-9deg)}92%{transform:rotate(8deg)}95%{transform:rotate(-5deg)}}
body.guest .boBtn{display:none!important}
/* the TCG pack */
/* overlay */
body.bo-open .fxlayer{z-index:95}
@keyframes quake{0%,100%{transform:none}10%{transform:translate(-8px,4px)}20%{transform:translate(7px,-6px)}30%{transform:translate(-6px,-3px)}40%{transform:translate(6px,6px)}50%{transform:translate(-4px,2px)}60%{transform:translate(4px,-4px)}70%{transform:translate(-3px,3px)}80%{transform:translate(2px,-2px)}}
.btn.pop{background:linear-gradient(90deg,#FF2D95,#FF8A00);color:#fff;border:0;font-weight:800;box-shadow:0 6px 18px -6px #FF2D95}
/* ---------- card back ---------- */
/* aura of the card back while it comes out (depends on the rarity) */
@keyframes aura{50%{box-shadow:0 0 calc(var(--u)*60) calc(var(--u)*14) var(--c1),0 0 calc(var(--u)*120) calc(var(--u)*30) color-mix(in srgb,var(--c2) 60%,transparent)}}
@keyframes boRing{to{transform:scale(22);opacity:0;border-width:1px}}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
.odds{display:grid;gap:6px}
.odds div{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:12px;background:var(--surface-2);border-left:5px solid var(--c1)}
.odds b{font:800 15px var(--mono)}
@media (prefers-reduced-motion:reduce){.boBtn .mini{animation:none!important}}
/* ---------- Rank up / rank down (full screen, like Valorant / Fortnite) ---------- */
body.ru-open .fxlayer{z-index:99}
.ru{position:fixed;inset:0;z-index:98;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--tc) 22%,#0b0718),#030208 70%);animation:fadeIn .3s;color:#fff;text-align:center}
.ru.down{background:radial-gradient(circle at 50% 42%,#1a1626,#030208 70%)}
.ru.quake{animation:quake .45s linear}
.ru-pillar{position:absolute;left:50%;top:-10%;bottom:-10%;width:0;margin-left:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tc) 80%,#fff),#fff,color-mix(in srgb,var(--tc) 80%,#fff),transparent);filter:blur(6px);opacity:0}
.ru-pillar.on{animation:pillar 1.1s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes pillar{0%{width:0;margin-left:0;opacity:1}30%{width:180px;margin-left:-90px;opacity:1}100%{width:46px;margin-left:-23px;opacity:.35}}
.ru-rays{position:absolute;left:50%;top:40%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--tc) 40%,transparent) 0 4deg,transparent 4deg 13deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 40%);mask:radial-gradient(circle,#000 0,transparent 40%);opacity:0;transition:opacity .6s}
.ru-rays.on{opacity:1;animation:spin 16s linear infinite}
.ru-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,#fff,color-mix(in srgb,var(--tc) 60%,#fff) 25%,transparent 65%);opacity:0;pointer-events:none}
.ru-flash.go{animation:flash .9s ease-out forwards}
.ru-ring{position:absolute;left:50%;top:40%;width:60px;height:60px;margin:-30px;border-radius:50%;border:6px solid var(--tc);box-shadow:0 0 30px var(--tc),inset 0 0 20px var(--tc);animation:boRing 1s ease-out forwards}
.ru-box{position:relative;z-index:3;display:grid;justify-items:center;gap:10px;width:min(420px,calc(100vw - 32px));margin-top:-6vh}
.ru-kick{font:800 13px var(--mono);letter-spacing:.42em;color:var(--tc);opacity:0}
.ru-title{font:italic 900 clamp(44px,15vw,78px)/.95 var(--body);letter-spacing:-.01em;text-transform:uppercase;transform:skewX(-8deg);opacity:0;background:linear-gradient(180deg,#fff 20%,color-mix(in srgb,var(--tc) 85%,#fff) 60%,var(--tc2));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(0,0,0,.6)) drop-shadow(0 0 24px color-mix(in srgb,var(--tc) 60%,transparent))}
.ru.down .ru-title{background:linear-gradient(180deg,#e9e6f5,#8d88a8);-webkit-background-clip:text;background-clip:text}
.ru-emb{position:relative;width:190px;height:190px;display:grid;place-items:center;margin:8px 0}
.ru-emb>div{position:absolute;inset:0;display:grid;place-items:center}
.ru-emb .old{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--tco) 60%,transparent))}
.ru-emb .new{opacity:0;filter:drop-shadow(0 0 30px var(--tc)) drop-shadow(0 0 60px color-mix(in srgb,var(--tc) 60%,transparent))}
.ru.down .ru-emb .new{filter:drop-shadow(0 0 14px rgba(255,255,255,.2)) saturate(.6)}
.ru-name{font:italic 900 clamp(28px,9vw,40px)/1 var(--body);text-transform:uppercase;transform:skewX(-6deg);color:#fff;text-shadow:3px 3px 0 var(--tc2),0 0 18px color-mix(in srgb,var(--tc) 70%,transparent);min-height:1em}
.ru-name span{display:inline-block;opacity:0}
.ru-bar{width:min(300px,78vw);display:grid;gap:6px;opacity:0}
.ru-bar .tr{height:10px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ru-bar .tr i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--tco),#fff);box-shadow:0 0 12px var(--tco)}
.ru-bar small{font:800 12px var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.75);display:flex;justify-content:space-between}
.ru-msg{font-size:14px;color:rgba(255,255,255,.75);max-width:320px;opacity:0;transition:opacity .5s}
.ru-go{opacity:0;transition:opacity .4s;margin-top:8px}
.ru .on{opacity:1}
.ru-shard{position:absolute;left:50%;top:40%;width:14px;height:22px;margin:-11px -7px;background:linear-gradient(160deg,#fff,var(--tco));clip-path:polygon(50% 0,100% 40%,70% 100%,0 70%);pointer-events:none}
@media (prefers-reduced-motion:reduce){.ru-rays.on{animation:none}}
/* ---------- Décorations de profil (cadres autour de l'avatar) ---------- */
.av.fr::after{content:"";position:absolute;inset:calc(var(--s,32px)*-.11);border-radius:50%;pointer-events:none;z-index:1;
  --w:calc(var(--s,32px)*.1);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--w) - .5px),#000 calc(100% - var(--w)));mask:radial-gradient(farthest-side,transparent calc(100% - var(--w) - .5px),#000 calc(100% - var(--w)))}
.av.fr{isolation:isolate}
.av.fr::before{content:"";position:absolute;inset:calc(var(--s,32px)*-.18);border-radius:50%;pointer-events:none;z-index:-1;opacity:.55;filter:blur(calc(var(--s,32px)*.09))}
.av.fr-neon::after{background:#A855F7}
.av.fr-neon::before{background:#A855F7;animation:frPulse 1.6s ease-in-out infinite}
.av.fr-glace::after{background:conic-gradient(#8BE9FF,#fff,#5AC8FA,#D6F6FF,#8BE9FF);animation:frSpin 7s linear infinite}
.av.fr-glace::before{background:#7DD3FC}
.av.fr-ombre::after{background:conic-gradient(#0B0220,#7C3AED,#0B0220,#4C1D95,#0B0220);animation:frSpin 3s linear infinite reverse}
.av.fr-ombre::before{background:#6D28D9;animation:frPulse 2.4s ease-in-out infinite}
.av.fr-flamme::after{background:conic-gradient(#FDE047,#F97316,#DC2626,#F97316,#FDE047,#EF4444,#FDE047);animation:frSpin 1.4s linear infinite}
.av.fr-flamme::before{background:#F97316;animation:frPulse .8s ease-in-out infinite}
.av.fr-arc::after{background:conic-gradient(#FF4D4D,#FFB400,#2EE59D,#38BDF8,#A855F7,#FF4D8D,#FF4D4D);animation:frSpin 2.8s linear infinite}
.av.fr-arc::before{background:conic-gradient(#FF4D4D,#FFB400,#2EE59D,#38BDF8,#A855F7,#FF4D4D)}
.av.fr-holo::after{background:conic-gradient(from 90deg,#fff,#C7F9FF,#FFC7F3,#FFF7B0,#C7F9FF,#fff);animation:frSpin 4s linear infinite}
.av.fr-holo::before{background:linear-gradient(135deg,#C7F9FF,#FFC7F3)}
.av.fr-pote::after{background:repeating-conic-gradient(#FF4D8D 0 20deg,#FFD166 20deg 40deg);animation:frSpin 9s linear infinite}
.av.fr-pote::before{background:#FF4D8D}
.av.fr-fidele::after{background:conic-gradient(#10B981,#A7F3D0,#10B981,#047857,#10B981);animation:frSpin 5s linear infinite}
.av.fr-fidele::before{background:#10B981;animation:frPulse 2s ease-in-out infinite}
.av.fr-or::after{background:conic-gradient(#8A5A00,#FFD700,#FFF4B8,#FFD700,#8A5A00,#FFD700,#8A5A00);animation:frSpin 6s linear infinite}
.av.fr-or::before{background:#FFD700}
.av.fr-legende::after{background:conic-gradient(#FF5468,#FFD700,#FF5468,#7F1D1D,#FFD700,#FF5468);animation:frSpin 2s linear infinite}
.av.fr-legende::before{background:#FF5468;animation:frPulse 1s ease-in-out infinite}
.av.fr-maitre::after{background:conic-gradient(#FFD700,#fff,#FFB400,#FFF4B8,#FFD700);animation:frSpin 3.5s linear infinite}
.av.fr-maitre::before{background:#FFC107;animation:frPulse 1.4s ease-in-out infinite}
/* stickers (one per achievement + event ones): pinned at the bottom-left corner, overflowing the photo like Discord decorations */
.av.fr-sticker{outline:2px solid var(--stc,var(--accent));outline-offset:1px;overflow:visible}
.av.fr-sticker::before{background:radial-gradient(circle,var(--stc,var(--accent)),transparent 70%);animation:frPulse 2s ease-in-out infinite;inset:calc(var(--s,32px)*-.14);opacity:.45}
.av.fr-sticker::after{content:attr(data-st);-webkit-mask:none;mask:none;background:none;inset:auto;left:calc(var(--s,32px)*-.2);bottom:calc(var(--s,32px)*-.14);font-size:calc(var(--s,32px)*.5);line-height:1;z-index:3;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)) drop-shadow(0 0 6px var(--stc,var(--accent)));transform-origin:50% 90%;animation:hwPump 2.4s ease-in-out infinite}
.av.fr-citrouille{--stc:#FF7A1A}
.av.fr-st_fou,.av.fr-st_serie5{--stc:#F97316}
.av.fr-st_jackpot,.av.fr-st_complete,.av.fr-st_legende,.av.fr-st_etoiles{--stc:#FFC24A}
.av.fr-st_copain,.av.fr-st_recruteur{--stc:#FF4D8D}
.av.fr-st_centurion,.av.fr-st_defis,.av.fr-st_fidele,.av.fr-st_assidu{--stc:#2EE59D}
.av.fr-st_risque,.av.fr-st_combo,.av.fr-st_collection,.av.fr-st_duelliste{--stc:#A78BFA}
/* season rewards: Champion (gold trophy ring with sparkles) and Podium (silver ring); top 10 / top 100 are stickers */
.av.fr-s_champion::after{background:conic-gradient(#FFD700,#FFF7C2,#FFB400,#fff,#FFD700,#FF9A00,#FFD700);animation:frSpin 2.2s linear infinite;--w:calc(var(--s,32px)*.13)}
.av.fr-s_champion::before{background:#FFD700;animation:frPulse 1.2s ease-in-out infinite;opacity:.75}
.av.fr-s_champion{outline:2px solid #FFD700;outline-offset:1px}
.av.fr-s_podium::after{background:conic-gradient(#9CA3AF,#F9FAFB,#C0C7D1,#fff,#9CA3AF,#6B7280,#9CA3AF);animation:frSpin 4s linear infinite}
.av.fr-s_podium::before{background:#D1D5DB;animation:frPulse 2s ease-in-out infinite}
.av.fr-s_top10{--stc:#FFC24A}
.av.fr-s_top100{--stc:#A78BFA}
.fr-ev.gold{background:linear-gradient(90deg,#FFD700,#FF9A00);color:#2a1700}
@keyframes frSpin{to{transform:rotate(360deg)}}
@keyframes frPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.8;transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.av.fr::after,.av.fr::before{animation:none!important}}
.lvl-bub,.topb,.crown{z-index:2}
.more-matches{width:100%;margin-top:6px;justify-content:center}
.more-matches small{color:var(--muted);margin-left:6px}
.frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.frame{display:grid;justify-items:center;gap:8px;padding:14px 10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);text-align:center}
.frame .av{--s:56px;margin:6px 0 4px}
.frame b{font-size:13px}
.frame small{color:var(--muted);font-size:11px;line-height:1.3}
.frame.off{opacity:.55}
.frame.off .av{filter:grayscale(1)}
.frame.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 10px 24px -14px var(--accent)}
.frame .btn{margin-top:4px}
.fr-lock{font-size:11px;color:var(--muted)}
.fr-h{margin:14px 0 8px;font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:16px;display:flex;align-items:baseline;gap:8px}
.fr-h small{font-family:var(--body);text-transform:none;letter-spacing:0;color:var(--muted);font-weight:500}
.frame.ev{border-color:rgba(255,122,26,.55);background:linear-gradient(160deg,rgba(255,122,26,.12),var(--surface-2))}
.frame.ev.off{opacity:.9}
.frame.ev.off .av{filter:none}
.fr-ev{font-size:10px;font-family:var(--mono);font-weight:800;letter-spacing:.08em;color:#FF7A1A;text-transform:uppercase}
/* ---------- Série (streak), duels, rivalité, écran GG ---------- */
.streak{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 8px}
.streak .fl{font-size:22px;filter:drop-shadow(0 0 8px #F97316);animation:flameWob 1.1s ease-in-out infinite}
@keyframes flameWob{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.12) rotate(3deg)}}
.streak b{font-family:var(--display);font-size:18px}
.streak small{color:var(--muted)}
.joker{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2)}
.joker.on{border-color:color-mix(in srgb,var(--good) 50%,var(--line));color:var(--good)}
.joker.used{opacity:.6;text-decoration:line-through}
.mstones{display:flex;gap:6px;margin:8px 0 2px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.mstones::-webkit-scrollbar{display:none}
.ms{flex:none;display:grid;justify-items:center;gap:1px;min-width:66px;padding:6px 8px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);font-size:11px;color:var(--muted)}
.ms b{font-family:var(--mono);font-size:12px;color:var(--ink)}
.ms.done{border-color:color-mix(in srgb,var(--good) 45%,var(--line));color:var(--good)}
.ms.next{border-color:var(--gold);box-shadow:0 0 14px -4px var(--gold)}
.ms.next b{color:var(--gold)}
.sbar{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin:6px 0 2px}
.sbar i{display:block;height:100%;background:linear-gradient(90deg,#F97316,#FFC53D);border-radius:3px;transition:width .6s var(--spring)}
.duels{display:grid;gap:8px;margin-bottom:12px}
.duel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.duel.in{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 0 18px -8px var(--accent);animation:reqPulse 2.2s ease-in-out infinite}
.duel.won{border-color:color-mix(in srgb,var(--good) 55%,var(--line))}
.duel.lost{opacity:.75}
.duel .dvs{display:grid;gap:2px;min-width:0}
.duel .dvs b{font-size:13px}
.duel .dvs small{color:var(--muted);font-size:11.5px}
.duel .dvs .sides{display:flex;align-items:center;gap:6px;font-size:12px;flex-wrap:wrap}
.duel .dvs .sides .me{color:var(--good);font-weight:700}
.duel .dvs .sides .them{color:var(--bad);font-weight:700}
.duel .pot{font-family:var(--mono);font-weight:800;color:var(--gold);white-space:nowrap}
.duel .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.duel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 6px}
.duel-head h3{margin:0}
.drec{font-family:var(--mono);font-size:12px;color:var(--muted)}
.duelbtn{display:inline-flex;align-items:center;gap:6px;margin-top:6px}
.dl-sheet .dl-teams{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.dl-sheet .dl-team{display:grid;justify-items:center;gap:6px;padding:12px 8px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);font-weight:700;font-size:13px;text-align:center}
.dl-sheet .dl-team[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface-2));box-shadow:0 0 0 1px var(--accent)}
.dl-sheet .dl-stakes{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.dl-sheet .dl-stakes button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.dl-sheet input[type=number]{width:100%}
.dl-sheet .dl-match{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);width:100%;text-align:left}
.dl-sheet .dl-match[aria-pressed="true"]{border-color:var(--accent)}
.dl-sheet .dl-list{display:grid;gap:6px;max-height:40vh;overflow:auto}
.dl-sum{margin:10px 0;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:13px}
.fb{display:grid;gap:8px}
.fb-banner{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface))}
.fb-banner .ic{font-size:24px}
.fb-banner b{display:block;font-size:14px}
.fb-banner small{color:var(--muted)}
.fbr{display:grid;grid-template-columns:28px auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.fbr.me{border-color:color-mix(in srgb,var(--gold) 55%,var(--line));background:color-mix(in srgb,var(--gold) 7%,var(--surface))}
.fbr .n{font-family:var(--mono);font-weight:800;color:var(--muted)}
.fbr .who{display:grid;gap:2px;min-width:0}
.fbr .who b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbr .who small{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:11.5px}
.fbr .rr{font-family:var(--mono);font-weight:800;text-align:right;white-space:nowrap}
.fbr .rr small{display:block;font-weight:600;font-size:11px}
.fbr .vs{font-family:var(--mono);font-size:11px;color:var(--muted)}
.gg{--tc:#FFC53D}
.gg .gg-word{font-family:var(--display);font-size:72px;line-height:.9;font-weight:900;letter-spacing:-.03em;background:linear-gradient(180deg,#fff,#FFC53D 60%,#F97316);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 24px rgba(255,197,61,.45));animation:ggPop .7s var(--spring) both}
@keyframes ggPop{0%{transform:scale(.3) rotate(-8deg);opacity:0}60%{transform:scale(1.15) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.gg .big-amt{font-size:40px;animation:ggPop .6s .25s var(--spring) both}
.gg .gg-list{display:grid;gap:4px;width:100%;max-height:120px;overflow:auto;font-size:12.5px;color:var(--muted)}
.gg .gg-list div{display:flex;justify-content:space-between;gap:8px}
.gg .gg-list b{color:var(--ink)}
.gg .gg-acts{display:grid;gap:8px;width:100%;margin-top:6px}
.gg .gg-streak{font-size:12px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.gg .gg-word,.gg .big-amt,.streak .fl{animation:none!important}}
/* ---------- Événement : Halloween (15 oct. → 2 nov., réglable dans Apparence) ---------- */
html[data-event="halloween"]{
  --accent:#FF7A1A; --accent-ink:#1A0A00; --accent-soft:#FFE6D1; --accent-2:#7C3AED;
  --grad:linear-gradient(120deg,#FF7A1A 0%,#FF3D7F 45%,#7C3AED 100%);
  --gold:#C76A00; --gold-hi:#FFB347; --gold-soft:#FFF0DE; --gold-line:#FFCB8A;
  --ground:#F7EFE3; --surface:rgba(255,251,245,.94); --surface-2:#FBF2E6; --line:#EBD6BE; --grid-line:rgba(120,60,0,.06);
  --bg-grad:radial-gradient(1100px 520px at 12% -8%,rgba(255,122,26,.22),transparent 60%),radial-gradient(900px 480px at 100% 0%,rgba(124,58,237,.16),transparent 60%),radial-gradient(800px 600px at 50% 110%,rgba(255,61,127,.10),transparent 60%);
}
@media (prefers-color-scheme: dark){html[data-event="halloween"]:not([data-theme="light"]){
  --accent:#FF8A2A; --accent-ink:#1A0A00; --accent-soft:#3A1A08; --accent-2:#A78BFA;
  --ground:#0B0615; --surface:rgba(26,16,40,.88); --surface-2:rgba(44,26,64,.62); --line:rgba(255,138,42,.16); --grid-line:rgba(255,138,42,.06);
  --gold:#FFB347; --gold-hi:#FFD08A; --gold-soft:rgba(255,179,71,.12); --gold-line:rgba(255,179,71,.42); --solid:#1A1028;
  --bg-grad:radial-gradient(1100px 560px at 10% -10%,rgba(255,122,26,.30),transparent 60%),radial-gradient(900px 520px at 105% -5%,rgba(124,58,237,.30),transparent 60%),radial-gradient(900px 700px at 50% 110%,rgba(163,230,53,.10),transparent 60%);
}}
html[data-event="halloween"][data-theme="dark"]{
  --accent:#FF8A2A; --accent-ink:#1A0A00; --accent-soft:#3A1A08; --accent-2:#A78BFA;
  --ground:#0B0615; --surface:rgba(26,16,40,.88); --surface-2:rgba(44,26,64,.62); --line:rgba(255,138,42,.16); --grid-line:rgba(255,138,42,.06);
  --gold:#FFB347; --gold-hi:#FFD08A; --gold-soft:rgba(255,179,71,.12); --gold-line:rgba(255,179,71,.42); --solid:#1A1028;
  --bg-grad:radial-gradient(1100px 560px at 10% -10%,rgba(255,122,26,.30),transparent 60%),radial-gradient(900px 520px at 105% -5%,rgba(124,58,237,.30),transparent 60%),radial-gradient(900px 700px at 50% 110%,rgba(163,230,53,.10),transparent 60%);
}
html[data-event="halloween"] .brand b{background:linear-gradient(180deg,#FFB347 20%,#FF7A1A 60%,#FF3D7F);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(255,122,26,.45))}
html[data-event="halloween"] .brand b i{background:none;color:transparent;position:relative;width:.75em;display:inline-block}
html[data-event="halloween"] .brand b i::after{content:"🎃";position:absolute;left:0;bottom:-.05em;font-size:.7em;filter:drop-shadow(0 0 8px rgba(255,122,26,.8));animation:hwPump 2.4s ease-in-out infinite}
@keyframes hwPump{0%,100%{transform:scale(1) rotate(-6deg)}50%{transform:scale(1.12) rotate(6deg)}}
html[data-event="halloween"] .brand span{color:#A78BFA}
@media (min-width:600px){html[data-event="halloween"] .brand span::after{content:" · HALLOWEEN";color:var(--accent)}}
/* cobwebs in the header corners */
html[data-event="halloween"] .top{position:sticky;overflow:hidden}
html[data-event="halloween"] .top::before,html[data-event="halloween"] .top::after{content:"";position:absolute;top:0;width:150px;height:150px;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FFB347' stroke-width='.8' stroke-linecap='round'><path d='M0 0L100.0 0.0M0 0L96.6 25.9M0 0L86.6 50.0M0 0L70.7 70.7M0 0L50.0 86.6M0 0L25.9 96.6M0 0L0.0 100.0'/><path d='M18 0Q16.6 2.2 17.4 4.7Q15.5 6.4 15.6 9.0Q13.3 10.2 12.7 12.7Q10.2 13.3 9.0 15.6Q6.4 15.5 4.7 17.4Q2.2 16.6 0.0 18.0M36 0Q33.2 4.4 34.8 9.3Q30.9 12.8 31.2 18.0Q26.6 20.4 25.5 25.5Q20.4 26.6 18.0 31.2Q12.8 30.9 9.3 34.8Q4.4 33.2 0.0 36.0M54 0Q49.8 6.6 52.2 14.0Q46.4 19.2 46.8 27.0Q39.8 30.6 38.2 38.2Q30.6 39.8 27.0 46.8Q19.2 46.4 14.0 52.2Q6.6 49.8 0.0 54.0M72 0Q66.4 8.7 69.5 18.6Q61.9 25.6 62.4 36.0Q53.1 40.8 50.9 50.9Q40.8 53.1 36.0 62.4Q25.6 61.9 18.6 69.5Q8.7 66.4 0.0 72.0M90 0Q83.0 10.9 86.9 23.3Q77.3 32.0 77.9 45.0Q66.4 51.0 63.6 63.6Q51.0 66.4 45.0 77.9Q32.0 77.3 23.3 86.9Q10.9 83.0 0.0 90.0'/><circle cx='0' cy='0' r='2' fill='%23FFB347' stroke='none'/></svg>") no-repeat;background-size:contain}
html[data-event="halloween"] .top::before{left:0}
html[data-event="halloween"] .top::after{right:0;transform:scaleX(-1)}
@media (max-width:900px){html[data-event="halloween"] .top::before,html[data-event="halloween"] .top::after{width:84px;height:84px;opacity:.4}}
html[data-event="halloween"] .top>*:not(.sr-only){position:relative;z-index:1}
/* fog + bats layer */
#hwfx,#hwbats{position:fixed;inset:0;pointer-events:none;overflow:hidden;display:none}
#hwfx{z-index:-1}
#hwbats{z-index:1}
html[data-event="halloween"] #hwfx,html[data-event="halloween"] #hwbats{display:block}
#hwfx .fog{position:absolute;left:-20%;right:-20%;bottom:-10%;height:45%;background:radial-gradient(60% 80% at 30% 100%,rgba(167,139,250,.20),transparent 70%),radial-gradient(50% 70% at 75% 100%,rgba(255,122,26,.14),transparent 70%);animation:hwFog 14s ease-in-out infinite alternate;will-change:transform}
@keyframes hwFog{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
#hwbats .bat{position:absolute;top:var(--y);left:0;width:1px;height:1px;animation:hwFly var(--d) linear infinite;animation-delay:var(--dl);will-change:transform}
#hwbats .bat b{position:absolute;left:0;top:0;display:block;animation:hwBob calc(var(--d) / 5) ease-in-out infinite alternate}
#hwbats .bat i{display:block;font-style:normal;font-size:var(--s);line-height:1;transform-origin:50% 60%;animation:hwFlap .28s ease-in-out infinite alternate;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
@keyframes hwFly{from{transform:translateX(-12vw)}to{transform:translateX(112vw)}}
@keyframes hwBob{from{transform:translateY(-3vh) rotate(-6deg)}to{transform:translateY(3vh) rotate(6deg)}}
@keyframes hwFlap{from{transform:scaleY(.55) scaleX(1.05)}to{transform:scaleY(1) scaleX(.95)}}
#hwfx .moon{position:absolute;top:auto;bottom:22%;right:-28px;width:110px;height:110px;opacity:.55;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF1D6,#FFB347 70%,#C76A00);box-shadow:0 0 60px 20px rgba(255,179,71,.35);opacity:.9;display:none}
@media (prefers-color-scheme: dark){html[data-event="halloween"]:not([data-theme="light"]) #hwfx .moon{display:block}}
html[data-event="halloween"][data-theme="dark"] #hwfx .moon{display:block}
html[data-event="halloween"][data-theme="light"] #hwfx .moon{display:none}
@media (prefers-reduced-motion:reduce){#hwbats .bat,#hwbats .bat b,#hwbats .bat i,#hwfx .fog,html[data-event="halloween"] .brand b i::after{animation:none!important}}
/* touches on the UI */
html[data-event="halloween"] .hero{border-color:rgba(255,122,26,.45);box-shadow:0 0 0 1px rgba(255,122,26,.25),0 20px 60px -30px rgba(255,122,26,.6)}
html[data-event="halloween"] #bnav [aria-current="true"],html[data-event="halloween"] #bnav .on{color:var(--accent)}
html[data-event="halloween"] .btn.primary{background:linear-gradient(120deg,#FF7A1A,#FF3D7F);color:#1A0A00;border-color:transparent}
html[data-event="halloween"] .wallet{border-color:rgba(255,179,71,.6)}
html[data-event="halloween"] .sec::before{content:"🕸️ "}
html[data-event="halloween"] .panel.daily h3::after{content:" 👻"}
html[data-event="halloween"] .gg .gg-word{background:linear-gradient(180deg,#fff,#FFB347 50%,#FF3D7F);-webkit-background-clip:text;background-clip:text}
.hw-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;margin:0 0 12px;border:1px solid rgba(255,122,26,.45);background:linear-gradient(120deg,rgba(255,122,26,.18),rgba(124,58,237,.18));font-size:13px}
.hw-banner b{font-family:var(--display);letter-spacing:.04em}
.hw-banner .ic{font-size:22px;animation:hwPump 2.4s ease-in-out infinite}
.hw-banner small{color:var(--muted);display:block}
/* Halloween : dos de carte et ouverture de booster */
/* ---------- Échanges ---------- */
.trp{margin:12px 0 4px;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:grid;gap:10px}
.trp-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.trp-h b{font-size:15px}
.trp-h small{color:var(--faint);font-size:12px}
.tro{display:grid;gap:8px;padding:10px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.tro.in{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.tro-who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.tro-who b{color:var(--ink)}
.tro-sw{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.tro-sw>div{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.tro-sw .arr{font-size:18px;color:var(--faint)}
.tro-sw small{flex-basis:100%;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.tchip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:8px;font:800 12px var(--body);color:#0b0618;background:linear-gradient(90deg,var(--c1),var(--c2));transform:skewX(-8deg)}
.tchip span{transform:skewX(8deg)}
.tchip.cr{background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold-line)}
.tro-act{display:flex;gap:8px;justify-content:flex-end}
/* composer */
.trcomp{width:min(560px,calc(100vw - 20px))!important}
.trcomp h3{margin:0;font-size:17px}
.trc-fr{display:grid;gap:6px}
.trc-fr button{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-weight:700;text-align:left}
.trc-sec{display:grid;gap:8px}
.trc-sec h4{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:flex;justify-content:space-between}
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.tr-pick{position:relative;border:0;background:none;padding:0;cursor:pointer;border-radius:10px;transition:transform .15s}
.tr-pick .kw-big{width:100%;margin:0}
.tr-pick.on{transform:translateY(-3px)}
.tr-pick.on::after{content:"";position:absolute;inset:-3px;border-radius:12px;border:3px solid var(--accent);pointer-events:none}
.tr-pick .n{position:absolute;top:-7px;right:-7px;z-index:3;min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;background:var(--accent);color:#fff;font:800 12px var(--mono);padding:0 5px}
.tr-pick .have{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);z-index:3;font:800 10px var(--mono);background:rgba(0,0,0,.6);color:#fff;border-radius:99px;padding:0 6px}
.trc-cr{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.trc-cr input{width:130px}
.trc-sum{padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:13px;color:var(--muted)}
.trc-empty{font-size:13px;color:var(--faint)}
/* ---------- Ouverture v2 : sortie commune, révélation par rareté ---------- */
/* ---------- Cartes objets ---------- */
/* ---------- Carte S ---------- */
/* ---------- Ouverture 5 cartes ---------- */
.col-tools label.ty{flex:0 1 120px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pf-fav{display:grid;justify-items:center;margin:2px 0 8px}
.pf-fav>small{font:800 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#FFB800}
.pf-fav .kw-big{width:min(120px,32vw);margin:0}
.pf-card{display:flex;align-items:center;gap:8px;justify-content:center;font-size:13px;color:var(--muted)}
/* ===== v52 : encore plus de vie (néon) ===== */
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
@media (prefers-reduced-motion: no-preference){/* fond : halos violets qui dérivent lentement */
body::before{content:"";position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
    background:radial-gradient(40vmax 30vmax at 20% 25%,rgba(139,63,255,.16),transparent 60%),radial-gradient(36vmax 28vmax at 80% 70%,rgba(34,211,238,.10),transparent 60%),radial-gradient(30vmax 24vmax at 60% 10%,rgba(255,45,149,.07),transparent 60%);
    animation:aurora 26s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(4vmax,-3vmax,0) rotate(8deg)}100%{transform:translate3d(-3vmax,3vmax,0) rotate(-6deg)}}
/* le point du logo s'allume comme un néon */
.brand b i{display:inline-block;animation:neonDot 3.2s ease-in-out infinite}
@keyframes neonDot{0%,100%{text-shadow:0 0 6px var(--accent),0 0 14px var(--accent)}45%{text-shadow:0 0 2px var(--accent)}50%{text-shadow:none;opacity:.55}55%{text-shadow:0 0 8px var(--accent),0 0 22px var(--accent)}}
/* onglet actif (barre du bas) : icône qui brille */
#bnav button[aria-current="page"] svg{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 80%,transparent));animation:navGlow 2.6s ease-in-out infinite}
@keyframes navGlow{50%{filter:drop-shadow(0 0 12px var(--accent))}}
/* cote choisie : liseré néon qui respire */
.selb.sel,.tn-team.sel,.cupbet.sel{animation:selGlow 1.8s ease-in-out infinite}
@keyframes selGlow{0%,100%{box-shadow:0 0 0 0 transparent,0 0 0 1px var(--accent)}50%{box-shadow:0 0 18px -2px color-mix(in srgb,var(--accent) 70%,transparent),0 0 0 1px var(--accent)}}
/* cotes qui bougent : flash vert si la cote monte, rouge si elle baisse */
.oup,.odn{animation:oddsMove 1.4s var(--out)}
.oup{--oc:var(--good)}
.odn{--oc:var(--bad)}
@keyframes oddsMove{0%{box-shadow:0 0 0 2px var(--oc),0 0 22px -2px var(--oc);transform:scale(1.04)}100%{box-shadow:0 0 0 0 transparent}}
.oup :is(.o,.odds,.tn-o),.odn :is(.o,.odds,.tn-o){animation:oddsTxt 1.4s var(--out)}
@keyframes oddsTxt{0%,40%{color:var(--oc)}}
/* carte du profil (Mon compte) : contour néon qui tourne */
.hero::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
    background:conic-gradient(from var(--spin),transparent 0 70%,color-mix(in srgb,var(--tc) 90%,#fff) 82%,var(--accent) 90%,transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinB 5s linear infinite}
@keyframes spinB{to{--spin:360deg}}
/* défi prêt à récupérer : même contour + reflet */
.chal.ready{position:relative;overflow:hidden}
.chal.ready::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);transform:translateX(-100%);animation:chalSheen 2.8s ease-in-out infinite;pointer-events:none}
@keyframes chalSheen{60%,100%{transform:translateX(100%)}}
/* collection : la carte suit le doigt / la souris en 3D */
.tgrid{perspective:900px}
/* gros boutons principaux : reflet qui passe */
.btn.primary.big{position:relative;overflow:hidden}
.btn.primary.big::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);animation:btnSheen 3.6s ease-in-out infinite;pointer-events:none}
@keyframes btnSheen{70%,100%{transform:translateX(120%)}}
/* nouvelle demande d'ami : pastille qui pulse */
.sp-badge{animation:reqPulse 1.6s ease-in-out infinite}
@keyframes reqPulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--red) 25%,transparent)}}}
.sp-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--red);color:#fff;font:700 11px/1 var(--body);margin-left:auto}
.sp-card .sp-badge{position:absolute;top:8px;right:8px;margin:0}
.sp-card{position:relative}
.btn .sp-badge{margin-left:6px;min-width:18px;height:18px}
.sp-amis .row{flex-wrap:nowrap}
.sp-amis .row input{flex:1 1 0;width:auto;min-width:0}
.sp-amis .row .btn{flex:none}
.sp-amis .fitem{min-width:0}
/* ===== v53 : publicités ===== */
.adwrap{display:none;margin:14px 0;padding:8px 10px 10px;border:1px dashed var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.adwrap:has(ins[data-ad-status="filled"]){display:block}
.ad-lbl{display:block;font:700 9.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.adrw-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.adrw-b{display:grid;justify-items:center;gap:3px;padding:14px 10px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 16%,var(--surface)),var(--surface));color:var(--ink);cursor:pointer;font:inherit;transition:transform .15s var(--spring)}
.adrw-b:active:not(:disabled){transform:scale(.96)}
.adrw-b:disabled{opacity:.5;cursor:default}
.adrw-b b{font-family:var(--display);font-size:19px;letter-spacing:.02em}
.adrw-b small{color:var(--muted);font-size:11.5px}
.adrw-ic{font-size:26px}
.adrw-slip{margin-top:8px}
.bo-adbtn{margin-top:8px;width:100%;background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.25)}
.adx-bg{z-index:1200}
.adx{position:relative;width:min(92vw,380px);display:grid;justify-items:center;gap:14px;padding:18px 20px 22px;border-radius:24px;background:radial-gradient(120% 80% at 50% 0%,#2A1066,#12062E 60%,#07021A);color:#fff;border:1px solid rgba(177,77,255,.45);box-shadow:0 0 60px -10px rgba(139,63,255,.6);animation:sheetIn .4s var(--spring)}
.adx-top{display:flex;justify-content:space-between;align-items:center;width:100%}
.adx-top .ad-lbl{margin:0;color:#B9A8FF}
.adx-x{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:18px;cursor:pointer}
.adx-body{text-align:center;display:grid;gap:6px}
.adx-body b{font-family:var(--display);font-size:26px;letter-spacing:.03em;text-transform:uppercase}
.adx-body p{margin:0;color:#D8CCFF;font-size:14px;line-height:1.45}
.adx-ic{font-size:54px;filter:drop-shadow(0 0 18px rgba(177,77,255,.8))}
.adx-ring{position:relative;width:64px;height:64px}
.adx-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.adx-ring circle{fill:none;stroke:rgba(255,255,255,.12);stroke-width:4}
.adx-ring circle.p{stroke:#22D3EE;stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:119.4;animation:adRing var(--d) linear forwards;filter:drop-shadow(0 0 6px #22D3EE)}
@keyframes adRing{to{stroke-dashoffset:0}}
.adx-ring span{position:absolute;inset:0;display:grid;place-items:center;font:800 20px/1 var(--display)}
.adx-reward{font-size:14px;color:#D8CCFF}
.adx .btn.primary{width:100%}
.adx.ready .adx-ring{animation:pop .4s var(--spring)}
/* ===== Season board ===== */
.sb-banner{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;background:linear-gradient(120deg,rgba(255,215,0,.16),rgba(255,154,0,.06) 60%,transparent);border:1px solid rgba(255,195,74,.35);margin-bottom:12px}
.sb-banner .ic{font-size:34px;line-height:1}
.sb-banner b{font-family:var(--display);font-size:22px;letter-spacing:.02em;display:block}
.sb-banner small{color:var(--muted);display:block;margin-top:2px}
.sb-left{text-align:right}
.sb-left b{font-family:var(--mono);font-size:26px;color:#FFC24A;display:block;line-height:1}
.sb-left small{color:var(--muted)}
.sb-rew{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.sb-rew span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:12.5px}
.sb-rew span b{color:#FFC24A}
.rw{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:6px;margin-left:6px;vertical-align:middle;background:rgba(255,194,74,.18);color:#FFC24A}
.rw.champion{background:linear-gradient(90deg,#FFD700,#FF9A00);color:#2a1700}
.rw.podium{background:rgba(209,213,219,.22);color:#E5E7EB}
.rw.top100{background:rgba(167,139,250,.2);color:#C4B5FD}
.sb-prev{margin-top:18px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.sb-prev h3{margin:0 0 8px;font-family:var(--display);font-size:18px;letter-spacing:.02em}
.sb-prev .row{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.sb-prev .row:first-of-type{border-top:0}
.sb-prev .row b{flex:1}
.sb-prev .row .n{font-family:var(--mono);color:var(--muted);width:22px}
@media (max-width:600px){.sb-banner{grid-template-columns:auto 1fr}
.sb-left{grid-column:1/-1;text-align:left;display:flex;gap:8px;align-items:baseline}}
/* ===== Card sets + pity ===== */
.sets-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:16px 0 0}
.sets-h h3{margin:0;font-size:18px}
.sets-h small{color:var(--muted);font-size:12px}
.sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:14px 0 4px}
.set{padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center}
.set .ic{font-size:28px;grid-row:span 2;line-height:1}
.set b{font-family:var(--display);font-size:17px;letter-spacing:.02em}
.set small{color:var(--muted);font-size:12px}
.set .bar{grid-column:1/-1;margin-top:6px}
.set.done{border-color:rgba(255,194,74,.5);background:linear-gradient(120deg,rgba(255,215,0,.12),transparent 70%)}
.set .names{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.set .names span{font-size:11px;padding:2px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.set .names span.on{color:var(--ink);border-color:var(--accent);background:rgba(255,255,255,.04)}
.pity{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);margin-top:12px}
.pity .ic{font-size:26px;grid-row:span 2;line-height:1}
.pity b{font-size:14px}
.pity small{color:var(--muted);display:block;font-size:12px}
.pity .bar{grid-column:2/-1;margin-top:4px}
.pity .cnt{font-family:var(--mono);font-size:22px;color:#FFC24A;text-align:right;grid-row:span 2}
/* ===== Cookie consent ===== */
#cmp{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px;display:flex;justify-content:center;pointer-events:none}
.cmp-box{pointer-events:auto;max-width:720px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.cmp-box b{font-family:var(--display);font-size:20px;letter-spacing:.02em}
.cmp-box p{margin:6px 0 12px;color:var(--muted);font-size:13.5px;line-height:1.45}
.cmp-btns{display:flex;gap:8px;justify-content:flex-end}
@media (max-width:480px){.cmp-btns{flex-direction:column-reverse}
.cmp-btns .btn{width:100%}
#cmp{padding:8px;padding-bottom:calc(76px + env(safe-area-inset-bottom))}}
.legal-t{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 10px}
.legal-t th,.legal-t td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.legal-t th{background:var(--surface-2)}
.legal-t code{font-family:var(--mono);font-size:12px}
.legal-body ul{padding-left:18px}
.legal-body li{margin:4px 0}
@media (min-width:700px){.tuto.legal{max-width:760px;width:min(760px,92vw)}}
@media (pointer:coarse){.tuto-dots button{position:relative}
.tuto-dots button::after{content:"";position:absolute;inset:-12px -6px}
a.twitch{min-width:34px;min-height:34px;display:inline-grid;place-items:center}}
a.linkbtn{text-decoration:none}
/* ===================== Cartes (v62) =====================
   Each card shows a crest (initials in a hexagon, rating on a ribbon), or for illustrated cards a drawn shadow of the person in a scene.
   Rarity is a finish: t1 Standard, t2 Chrome, t3 Holo, t4 Or, t5 Obsidienne. Sizes are in cqw of the .kw box. */
.tgrid{gap:18px 14px}
.kw{container-type:inline-size;position:relative;display:block;width:100%;border:0;padding:0;background:none;cursor:pointer;font:inherit;color:#fff;text-align:left;perspective:900px;-webkit-tap-highlight-color:transparent;transition:transform .25s var(--spring)}
button.kw:hover{transform:translateY(-4px)}
.kw:focus-visible{outline:none}.kw:focus-visible .mc{outline:3px solid var(--accent);outline-offset:3px}
.kw-big{width:min(270px,66vw);margin:4px auto 0;cursor:default}
.mc{--frame:#444;position:relative;display:block;aspect-ratio:5/7;border-radius:5.5cqw;padding:2.8cqw;isolation:isolate;background:var(--frame);
  box-shadow:0 1.4cqw 5cqw rgba(0,0,0,.5),inset 0 0 0 .35cqw rgba(255,255,255,.12);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s var(--spring)}
.kw.tilt .mc{transition:transform .06s linear}
.mc-field{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;height:100%;border-radius:3.4cqw;overflow:hidden;
  background:radial-gradient(circle at 1.5cqw 1.5cqw,rgba(255,255,255,.07) .45cqw,transparent .6cqw) 0 0/3cqw 3cqw,
    linear-gradient(115deg,transparent 40%,color-mix(in srgb,var(--c2) 24%,transparent) 40% 54%,transparent 54%),
    radial-gradient(110% 75% at 50% 32%,color-mix(in srgb,var(--c1) 52%,#0D0F2A),#0D0F2A 72%);
  box-shadow:inset 0 0 0 .45cqw rgba(0,0,0,.4)}
.mc-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2cqw;padding:3.4cqw 3.8cqw 0}.mc-top>.mc-game{justify-self:start}.mc-top>.mc-stars{justify-self:end}
.mc-game{font:700 max(4.8cqw,8px)/1 var(--display);letter-spacing:.06em;padding:1.2cqw 2.6cqw;border-radius:9cqw;background:rgba(0,0,0,.38);border:.35cqw solid color-mix(in srgb,var(--c1) 65%,transparent);white-space:nowrap}
.mc-stars{display:flex;gap:.6cqw}.mc-stars i{font-style:normal;font-size:6.4cqw;line-height:1;color:rgba(255,255,255,.2)}
.mc-stars i.on{color:#FFD447;text-shadow:0 0 2.4cqw rgba(255,212,71,.75)}
.mc-art{display:grid;place-items:center;min-height:0;padding:2cqw 12cqw 0}
.mc-art .crest{display:block;width:100%;height:100%;max-height:100%;filter:drop-shadow(0 2.2cqw 2.4cqw rgba(0,0,0,.5))}
.crest-num{font:800 22px "Barlow Condensed",var(--display),sans-serif;letter-spacing:.5px}
.crest-txt{font:800 80px "Barlow Condensed",var(--display),sans-serif;stroke-width:3;paint-order:stroke;stroke-linejoin:round}
.mc-plate{display:grid;gap:.8cqw;padding:2.4cqw 4.4cqw 1.6cqw;background:linear-gradient(180deg,transparent,rgba(5,6,20,.62) 32%)}
.mc-name{font:800 12.5cqw/.92 var(--display);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 .8cqw 0 rgba(0,0,0,.3)}
.mc-role{font:500 max(4.3cqw,8.5px)/1.25 var(--body);color:rgba(255,255,255,.74);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-boost{display:flex;gap:1.4cqw;margin-top:1.4cqw}
.mc-boost i{flex:1;min-width:0;display:grid;justify-items:center;gap:.6cqw;padding:1.5cqw 0 1.3cqw;border-radius:2.2cqw;font:600 max(3.8cqw,7.5px)/1 var(--body);font-style:normal;color:rgba(255,255,255,.72);background:rgba(255,255,255,.08);border:.3cqw solid rgba(255,255,255,.14)}
.mc-boost b{font:800 6.6cqw/1 var(--display);color:#fff}
.mc-foot{display:flex;justify-content:space-between;gap:2cqw;padding:1.4cqw 4.4cqw 2.8cqw;font:600 max(3.7cqw,7.5px)/1 var(--body);color:rgba(255,255,255,.56);font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-foot>span{overflow:hidden;text-overflow:ellipsis}
@container (max-width:200px){.mc-set{display:none}}
@container (max-width:118px){.mc-role,.mc-boost,.mc-foot,.mc-game{display:none}.mc-name{font-size:15cqw}.mc-top{justify-content:center}}
/* finishes */
.mc.t1{--frame:linear-gradient(135deg,#3C4A72,#1B2340 26%,#6F80B0 46%,#222B4A 64%,#4E5E8C 84%,#161C33)}
.mc.t2{--frame:linear-gradient(135deg,#F7F8FA,#8E97A8 22%,#FFFFFF 40%,#5F6878 58%,#E6E9EF 78%,#9AA3B3)}
.mc.t3{--frame:linear-gradient(var(--hang,125deg),#FF9AD5,#9AD7FF 25%,#B4FFCF 45%,#FFF3A6 65%,#FFB38A 85%,#FF9AD5)}
.mc.t4{--frame:linear-gradient(135deg,#7A5200,#FFD76A 22%,#FFF4C2 34%,#C99010 52%,#FFE08A 70%,#8A5D00)}
.mc.t4 .mc-field{box-shadow:inset 0 0 0 .45cqw rgba(0,0,0,.45),inset 0 0 0 1cqw rgba(255,215,106,.35)}
.mc.t5{--frame:linear-gradient(135deg,#1A1626,#4A3D6E 28%,#0D0B14 50%,#3B3155 72%,#14111E)}
.mc.t5 .mc-field{box-shadow:inset 0 0 0 .5cqw #E8C25A,inset 0 0 0 1.1cqw rgba(0,0,0,.5);
  background:radial-gradient(circle at 1.5cqw 1.5cqw,rgba(232,194,90,.09) .45cqw,transparent .6cqw) 0 0/3cqw 3cqw,radial-gradient(110% 75% at 50% 32%,color-mix(in srgb,var(--c1) 40%,#120E1C),#07060C 72%)}
.mc.t6{--frame:linear-gradient(var(--hang,135deg),#3A1658,#FF7A1A 22%,#FFD9A8 34%,#7C3AED 52%,#FF7A1A 70%,#1A0B24)}
.mc.t6 .mc-field{box-shadow:inset 0 0 0 .5cqw #FF7A1A,inset 0 0 0 1.1cqw rgba(0,0,0,.5),inset 0 0 6cqw rgba(255,122,26,.35)}
.mc.t6 .mc-name{background:linear-gradient(#FFE2B8,#FF7A1A);-webkit-background-clip:text;background-clip:text;color:transparent}
.mc.t6 .mc-holo{opacity:.55;mix-blend-mode:screen;background:linear-gradient(115deg,transparent 20%,rgba(255,122,26,.55) 38%,rgba(124,58,237,.5) 52%,rgba(255,217,168,.45) 64%,transparent 80%) var(--mx,50%) var(--my,50%)/300% 300%}
.slot.t6{border-color:rgba(255,122,26,.6);background:radial-gradient(80% 60% at 50% 40%,rgba(124,58,237,.18),transparent),color-mix(in srgb,#FF7A1A 6%,var(--surface))}
.tgrid.limited{margin-top:10px}
.mc.t5 .mc-name{color:#F6DD92}
.mc-holo{position:absolute;inset:2.8cqw;border-radius:3.4cqw;pointer-events:none;mix-blend-mode:color-dodge;opacity:.42;z-index:1;
  background:linear-gradient(115deg,transparent 18%,rgba(255,80,200,.55) 32%,rgba(80,220,255,.55) 44%,rgba(255,255,120,.5) 56%,rgba(120,255,170,.45) 66%,transparent 80%) var(--mx,50%) var(--my,50%)/300% 300%}
.mc.t4 .mc-holo{mix-blend-mode:overlay;opacity:.6;background:radial-gradient(circle at 20% 30%,#fff .3cqw,transparent .8cqw) 0 0/9cqw 11cqw,linear-gradient(115deg,transparent 25%,rgba(255,236,170,.75) 45%,transparent 65%) var(--mx,50%) var(--my,50%)/300% 300%}
.mc.t5 .mc-holo{opacity:.5;background:linear-gradient(115deg,transparent 15%,rgba(255,60,120,.5) 30%,rgba(140,90,255,.55) 45%,rgba(60,200,255,.5) 60%,rgba(255,215,106,.5) 72%,transparent 85%) var(--mx,50%) var(--my,50%)/300% 300%}
.mc-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .25s;mix-blend-mode:overlay;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.55),transparent 48%)}
.kw.tilt .mc-glare{opacity:1}
.kw-act{position:absolute;left:50%;top:-10px;transform:translateX(-50%);z-index:3;font:700 12px/1 var(--display);letter-spacing:.06em;padding:5px 11px;border-radius:99px;background:#fff;color:#14163A;box-shadow:0 4px 12px rgba(0,0,0,.35);white-space:nowrap}
.kw.active .mc{box-shadow:0 0 0 3px #fff,0 0 24px var(--glow),0 1.4cqw 5cqw rgba(0,0,0,.5)}
.kw-fav{position:absolute;right:-6px;top:-8px;z-index:3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:14px;color:#14163A;background:#FFD447;box-shadow:0 0 0 2px #0D0F2A}
.kw-copies{position:absolute;right:-7px;top:38%;z-index:3;font:800 13px/1 var(--display);background:#0D0F2A;color:#fff;border:2px solid var(--glow);padding:3px 7px;border-radius:99px}
.col-active .kw{width:78px}
/* a card not owned yet */
.slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;aspect-ratio:5/7;padding-bottom:11%;border-radius:12px;
  border:2px dashed color-mix(in srgb,var(--glow) 45%,transparent);background:color-mix(in srgb,var(--c1) 7%,var(--surface));color:color-mix(in srgb,var(--glow) 55%,var(--muted))}
.slot .crest{position:absolute;left:22%;top:12%;width:56%;opacity:.55}
.slot b{font:800 28px/1 var(--display);color:var(--ink);opacity:.85}
.slot small{font:600 11px/1.2 var(--body);color:var(--muted);text-align:center}
/* card back: the arena of the fronts, emblem in the middle, neutral steel frame */
.mcbw{container-type:inline-size;width:100%}
.mcb{position:relative;aspect-ratio:5/7;border-radius:5.5cqw;overflow:hidden;color:#F3F1FF;padding:3cqw;
  background:linear-gradient(135deg,#59647E,#20263A 24%,#9AA6C2 44%,#262D44 62%,#6C7894 82%,#1A1F30);box-shadow:0 1.4cqw 5cqw rgba(0,0,0,.5)}
.mcb::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 calc(var(--charge,0)*12cqw) calc(var(--charge,0)*2.5cqw) var(--glow,#fff);opacity:calc(var(--charge,0)*.85)}
.mcb-field{position:relative;display:grid;justify-items:center;align-content:center;gap:2.6cqw;height:100%;border-radius:3.2cqw;overflow:hidden;isolation:isolate;
  background:radial-gradient(42% 30% at 50% 44%,rgba(157,182,242,.34),transparent 70%),
    radial-gradient(60% 18% at 50% 92%,rgba(111,134,201,.14),transparent 70%),
    radial-gradient(70% 40% at 50% 40%,rgba(28,42,85,.0),rgba(7,9,20,.55)),repeating-linear-gradient(90deg,transparent 0,rgba(44,64,122,.26) 5.5cqw,transparent 11cqw),
    linear-gradient(#0E1226,#070914 88%);
  box-shadow:inset 0 0 0 .35cqw rgba(230,190,114,.55),inset 0 0 0 1.3cqw rgba(0,0,0,.35)}
.mcb-field::before{content:"";position:absolute;z-index:-1;left:50%;top:0;width:60%;height:78%;transform:translateX(-50%);
  background:linear-gradient(rgba(191,211,255,.22),transparent 85%);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);filter:blur(2cqw)}
.mcb-lights{position:absolute;left:10%;right:10%;top:12%;height:3cqw;
  background:radial-gradient(circle,#FFF1DC 0 .55cqw,rgba(143,168,232,.35) .9cqw,transparent 2.2cqw) 0 50%/calc(100%/7) 100% repeat-x;
  border-bottom:.3cqw solid rgba(0,0,0,.45)}
.mcb-emblem{width:44cqw;margin-top:6cqw;filter:drop-shadow(0 0 3cqw rgba(230,190,114,.28)) drop-shadow(0 1.6cqw 2.4cqw rgba(0,0,0,.6))}
.mcb-emblem svg{display:block;width:100%}
.mcb-emblem g{stroke:url(#mcbG)}.mcb-emblem .dot{fill:#FFF6DF}
.mcb-word{font:800 11.5cqw/1 var(--display);letter-spacing:.22em;margin-right:-.22em;text-transform:uppercase;
  background:linear-gradient(#FFF6DF,#E6BE72 60%,#B48A45);-webkit-background-clip:text;background-clip:text;color:transparent}
.mcb-sub::after{content:"Série 1 · Les pros de l’esport";font:600 4cqw/1 var(--body);letter-spacing:.04em;color:rgba(243,241,255,.6)}
.mcb-corner,.mcb-corner::before{position:absolute;inset:4.5cqw;pointer-events:none;
  background:linear-gradient(rgba(230,190,114,.7),rgba(230,190,114,.7)) 0 0/5cqw .35cqw,linear-gradient(rgba(230,190,114,.7),rgba(230,190,114,.7)) 0 0/.35cqw 5cqw,
    linear-gradient(rgba(230,190,114,.7),rgba(230,190,114,.7)) 100% 0/5cqw .35cqw,linear-gradient(rgba(230,190,114,.7),rgba(230,190,114,.7)) 100% 0/.35cqw 5cqw,
    linear-gradient(rgba(230,190,114,.7),rgba(230,190,114,.7)) 0 100%/5cqw .35cqw,linear-gradient(rgba(230,190,114,.7),rgba(230,190,114,.7)) 0 100%/.35cqw 5cqw,
    linear-gradient(rgba(230,190,114,.7),rgba(230,190,114,.7)) 100% 100%/5cqw .35cqw,linear-gradient(rgba(230,190,114,.7),rgba(230,190,114,.7)) 100% 100%/.35cqw 5cqw;background-repeat:no-repeat}
.mcb-corner::before{content:none}
html[data-event="halloween"] .mcb{background:linear-gradient(135deg,#5A2A10,#1A0B06 24%,#C2611E 44%,#1F0D16 62%,#7C3AED 82%,#140A1E)}
html[data-event="halloween"] .mcb-field{background:radial-gradient(42% 30% at 50% 44%,rgba(255,122,26,.30),transparent 70%),repeating-linear-gradient(90deg,transparent 0,rgba(124,58,237,.2) 5.5cqw,transparent 11cqw),linear-gradient(#1A0B24,#0A0510 88%);box-shadow:inset 0 0 0 .35cqw rgba(255,122,26,.6),inset 0 0 0 1.3cqw rgba(0,0,0,.35)}
html[data-event="halloween"] .mcb-emblem g{stroke:#FF7A1A}html[data-event="halloween"] .mcb-emblem .dot{fill:#FFD9A8}
html[data-event="halloween"] .mcb-word{background:linear-gradient(#FFD9A8,#FF7A1A 60%,#B4440E);-webkit-background-clip:text;background-clip:text}
html[data-event="halloween"] .mcb-sub::after{content:"Édition Halloween"}
/* booster pack */
/* booster: foil sachet in the arena look (crimped edges, holographic strip to tear off) */
.pk{--W:240px;--tear:0;position:relative;flex:none;width:var(--W);aspect-ratio:5/8;filter:drop-shadow(0 calc(var(--W)*.1) calc(var(--W)*.12) rgba(0,0,0,.55))}
.pk-p{position:absolute;inset:0;overflow:hidden}
.pk-body{clip-path:var(--clipBody);z-index:1}
.pk-top{clip-path:var(--clipTop);z-index:2;transform-origin:100% 15%;transform:translateY(calc(var(--tear)*-4%)) rotate(calc(var(--tear)*-9deg))}
.pk.rtl .pk-top{transform-origin:0 15%;transform:translateY(calc(var(--tear)*-4%)) rotate(calc(var(--tear)*9deg))}
.pk-foil{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(0,0,0,.4),transparent 7%,transparent 93%,rgba(0,0,0,.4)),
  linear-gradient(118deg,transparent 28%,rgba(255,255,255,.10) 40%,transparent 50%,transparent 64%,rgba(255,255,255,.05) 72%,transparent 80%),
  radial-gradient(60% 34% at 50% 50%,rgba(157,182,242,.28),transparent 70%),
  repeating-linear-gradient(90deg,transparent 0,rgba(44,64,122,.22) calc(var(--W)*.06),transparent calc(var(--W)*.12)),
  linear-gradient(#141831,#05060D 92%)}
.pk-foil::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.5%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 2px,transparent 2px 6px)}
.pk-cone{position:absolute;left:50%;top:15%;width:76%;height:60%;transform:translateX(-50%);background:linear-gradient(rgba(191,211,255,.24),transparent 85%);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);filter:blur(calc(var(--W)*.025))}
.pk-lights{position:absolute;left:12%;right:12%;top:21%;height:calc(var(--W)*.04);background:radial-gradient(circle,#FFF1DC 0 calc(var(--W)*.009),rgba(143,168,232,.35) calc(var(--W)*.016),transparent calc(var(--W)*.034)) 0 50%/calc(100%/7) 100% repeat-x;border-bottom:1px solid rgba(0,0,0,.5)}
.pk-frame{position:absolute;inset:calc(15% + var(--W)*.04) calc(var(--W)*.05) calc(var(--W)*.07);border:1px solid rgba(230,190,114,.45);border-radius:calc(var(--W)*.02)}
.pk-glow{position:absolute;left:0;right:0;top:15%;height:34%;pointer-events:none;background:radial-gradient(60% 100% at 50% 0,rgba(255,250,235,.95),transparent 70%);opacity:var(--tear)}
.pk-in{position:absolute;inset:15% 0 0;display:flex;flex-direction:column;align-items:center;gap:calc(var(--W)*.03);padding-top:22%}
.pk-emb{width:46%;filter:drop-shadow(0 0 calc(var(--W)*.03) rgba(230,190,114,.3))}.pk-emb svg{display:block;width:100%}
.pk-emb g{stroke:url(#mcbG)}.pk-emb .dot{fill:#FFF6DF}
.pk-word{font:800 calc(var(--W)*.115)/1 var(--display);letter-spacing:.24em;margin-right:-.24em;text-transform:uppercase;background:linear-gradient(#FFF6DF,#E6BE72 60%,#B48A45);-webkit-background-clip:text;background-clip:text;color:transparent}
.pk-sub{font:600 calc(var(--W)*.04)/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62);text-align:center;padding:0 8%}
.pk-n{margin-top:auto;margin-bottom:12%;font:700 calc(var(--W)*.05)/1 var(--body);padding:.45em 1em;border-radius:99px;border:1px solid rgba(230,190,114,.6);color:#FFF6DF;background:rgba(0,0,0,.35)}
.pk-strip{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.4),transparent 7%,transparent 93%,rgba(0,0,0,.4)),linear-gradient(118deg,transparent 30%,rgba(255,255,255,.07) 45%,transparent 58%),linear-gradient(#1C2244,#10142A)}
.pk-strip::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 2px,transparent 2px 6px)}
.pk-perf{position:absolute;left:4%;right:4%;top:15%;margin-top:-1px;border-top:2px dashed rgba(230,190,114,.85)}
.pk-perf::after{content:"Déchire ici";position:absolute;left:3%;bottom:calc(var(--W)*.03);font:700 calc(var(--W)*.04)/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,246,223,.8)}
.pk-rip{position:absolute;left:0;top:15%;z-index:3;width:calc(var(--tear)*100%);height:3px;margin-top:-1.5px;background:#fff;box-shadow:0 0 10px 3px rgba(255,255,255,.9),0 0 26px 8px rgba(230,190,114,.7);pointer-events:none}
.pk.rtl .pk-rip{left:auto;right:0}
.pk-riser{position:absolute;left:11%;width:78%;top:17%;z-index:0}
.pk-leak{position:absolute;left:4%;right:4%;top:13%;height:6px;z-index:6;border-radius:99px;pointer-events:none;background:#fff;
  box-shadow:0 0 14px 6px rgba(255,255,255,.85),0 0 46px 18px rgba(230,190,114,.6);animation:pkLeak .4s ease-out both}
@keyframes pkLeak{from{transform:scaleX(.1);opacity:0}to{transform:none;opacity:1}}
.pk.hw .pk-foil{background:linear-gradient(90deg,rgba(0,0,0,.4),transparent 7%,transparent 93%,rgba(0,0,0,.4)),linear-gradient(118deg,transparent 28%,rgba(255,255,255,.08) 40%,transparent 50%),radial-gradient(60% 34% at 50% 50%,rgba(255,122,26,.26),transparent 70%),repeating-linear-gradient(90deg,transparent 0,rgba(124,58,237,.2) calc(var(--W)*.06),transparent calc(var(--W)*.12)),linear-gradient(#1A0B24,#0A0510 92%)}
.pk.hw .pk-strip{background:linear-gradient(90deg,rgba(0,0,0,.4),transparent 7%,transparent 93%,rgba(0,0,0,.4)),linear-gradient(#2C1242,#1A0B24)}
.pk.hw .pk-frame{border-color:rgba(255,122,26,.55)}.pk.hw .pk-perf{border-top-color:rgba(255,122,26,.9)}.pk.hw .pk-perf::after{color:#fff}
.pk.hw .pk-emb g{stroke:#FF7A1A}.pk.hw .pk-emb .dot{fill:#FFD9A8}
.pk.hw .pk-word{background:linear-gradient(#FFD9A8,#FF7A1A 60%,#B4440E);-webkit-background-clip:text;background-clip:text}
.pk.hw .pk-body::after{content:"🦇";position:absolute;right:9%;top:24%;font-size:calc(var(--W)*.08);transform:rotate(-12deg)}
.boBtn .mini{filter:drop-shadow(0 3px 6px rgba(230,190,114,.35))}
.mini .mp-b{fill:#10142A;stroke:#E6BE72;stroke-width:.9}.mini .mp-s{fill:#1E2448}.mini .mp-j{stroke:#E6BE72}.mini .mp-p{stroke:#E6BE72;stroke-opacity:.85;stroke-dasharray:1.5 1.2}
html[data-event="halloween"] .mini .mp-b{fill:#120A1E;stroke:#FF7A1A}html[data-event="halloween"] .mini .mp-s{fill:#2C1242}html[data-event="halloween"] .mini .mp-j{stroke:#FF7A1A}html[data-event="halloween"] .mini .mp-p{stroke:#7C3AED}
/* ---------- opening a booster ---------- */
.po{--glow:#E2E8F0;--charge:0;position:fixed;inset:0;z-index:90;overflow:hidden;color:#fff;user-select:none;-webkit-user-select:none;background:radial-gradient(70% 55% at 50% 40%,#1E1A50,#07081A 72%)}
.po.hw{background:radial-gradient(70% 55% at 50% 40%,#2C1242,#0A0612 72%)}
.po::before{content:"";position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none;transition:opacity .35s}
.po.dim::before{opacity:.82}
.po-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(42% 38% at 50% 48%,var(--glow),transparent 70%);opacity:calc(var(--charge)*.6)}
.po-rays{position:absolute;left:50%;top:48%;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;pointer-events:none;opacity:0;transition:opacity .6s;
  background:repeating-conic-gradient(color-mix(in srgb,var(--glow) 30%,transparent) 0 5deg,transparent 5deg 16deg);-webkit-mask:radial-gradient(circle,#000,transparent 42%);mask:radial-gradient(circle,#000,transparent 42%)}
.po.rays .po-rays{opacity:1;animation:spin 22s linear infinite}
.po-fx{position:absolute;inset:0;z-index:4;pointer-events:none}
.po-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,#fff,color-mix(in srgb,var(--glow) 70%,transparent) 30%,transparent 68%)}
.po-ring{position:absolute;width:60px;height:60px;border-radius:50%;border:3px solid var(--glow);box-shadow:0 0 18px var(--glow)}
.po-bat{position:absolute;pointer-events:none}
.po.quake{animation:quake .45s linear 2}
.po-x{position:absolute;right:14px;top:calc(14px + env(safe-area-inset-top,0px));z-index:9;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.po-main{position:absolute;inset:0;z-index:3;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;justify-items:center;gap:10px;padding:calc(66px + env(safe-area-inset-top,0px)) 16px calc(22px + env(safe-area-inset-bottom,0px))}
.po-head{display:grid;justify-items:center;gap:7px;min-height:98px;text-align:center;opacity:0;transition:opacity .25s}
.po-head.on{opacity:1}
.po-head small{font:600 14px/1.3 var(--body);color:rgba(255,255,255,.74)}
.po-head b{font:800 clamp(34px,10vw,58px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.po-head .let{display:inline-block;font-style:normal}
.po[data-tier="4"] .po-head .let,.po[data-tier="5"] .po-head .let{background:linear-gradient(180deg,#fff 15%,var(--glow) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--glow) 60%,transparent))}
.po-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.po-chip{font:700 14px/1 var(--display);letter-spacing:.03em;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22)}
.po-chip.fin{border-color:var(--glow);color:var(--glow)}
.po-chip.star{background:#FFD447;color:#14163A;border-color:#FFD447}
.po-stage{position:relative;display:grid;place-items:center;align-self:center}
.po-pack{position:relative;z-index:2;cursor:grab;touch-action:none;outline:none;border-radius:6px}
.po-pack.grab{cursor:grabbing}
.po-pack:focus-visible{outline:3px solid #fff;outline-offset:10px}
.po-pack .pk{--W:min(250px,60vw)}
.po-pack:not(.none):not(.grab) .pk{animation:poFloat 3.2s ease-in-out infinite}
.po-pack.none{cursor:default}.po-pack.none .pk{filter:grayscale(.85) brightness(.5)}
.po-hint{margin:0;max-width:330px;min-height:2.8em;text-align:center;font:500 14px/1.4 var(--body);color:rgba(255,255,255,.8)}
.po-side{display:grid;justify-items:center;gap:8px;width:min(360px,100%);transition:opacity .2s}
.po-side.gone{opacity:0;pointer-events:none}
.po-side .row,.po-actions .row,.po-sum .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.po-side small{color:rgba(255,255,255,.6)}
.po-center{align-self:center;width:min(250px,60vw)}
.po-card{position:relative;width:100%;aspect-ratio:5/7;perspective:1400px;cursor:pointer;outline:none;touch-action:none;-webkit-touch-callout:none}
.po-card:focus-visible{outline:3px solid #fff;outline-offset:10px;border-radius:16px}
.po-card.rev{cursor:default}
.po-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.po-face{position:absolute;inset:0}
.po-front{visibility:hidden}
.po-front .kw-big{width:100%;margin:0}
.po-card .mcb{box-shadow:0 0 calc(var(--charge)*80px) calc(var(--charge)*14px) var(--glow),0 1.4cqw 5cqw rgba(0,0,0,.5)}
.po-card:not(.rev) .po-face.po-back{animation:poBob 2.6s ease-in-out infinite}
.po-card.held .po-face.po-back{animation:poShake .1s linear infinite}
.po-charge{display:grid;justify-items:center;gap:8px;width:min(280px,80vw)}
.po-lamps{display:flex;gap:min(5vw,22px);padding:6px 10px;border-bottom:2px solid rgba(0,0,0,.45)}
.po-lamps i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:background .15s,box-shadow .15s,transform .15s}
.po-lamps i.on{background:#FFF6E6;transform:scale(1.15);box-shadow:0 0 6px 2px var(--glow),0 0 18px 6px color-mix(in srgb,var(--glow) 55%,transparent)}
.po-spark{position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px var(--glow)}
.po-spark.gold{width:4px;height:9px;border-radius:2px;box-shadow:0 0 8px 1px #FFE7A8}
.po-beam{position:absolute;top:0;width:min(280px,64vw);transform-origin:50% 0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(color-mix(in srgb,var(--bc) 10%,transparent),color-mix(in srgb,var(--bc) 42%,transparent) 85%,transparent);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);filter:blur(6px)}
.po-burst{position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--glow) 70%,transparent) 0 5deg,transparent 5deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 8%,rgba(0,0,0,.6) 35%,transparent 68%);mask:radial-gradient(circle,#000 8%,rgba(0,0,0,.6) 35%,transparent 68%)}
.po-ring.land{border-width:2px;height:18px;width:120px;border-radius:50%;border-color:color-mix(in srgb,var(--glow) 60%,#fff)}
.po-shine{position:absolute;inset:0;z-index:5;border-radius:5.5%/3.9%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 47%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.55) 53%,transparent 65%) 130% 0/250% 100% no-repeat}
.po-tap{margin:2px 0 0;font:600 12.5px/1 var(--body);letter-spacing:.04em;color:rgba(255,255,255,.62);animation:poTap 1.6s ease-in-out infinite}
@keyframes poTap{50%{opacity:.35}}
.po-dust{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:radial-gradient(circle,rgba(226,232,240,.45),transparent 70%)}
.po-shard{position:absolute;left:0;top:0;width:6px;height:16px;margin:-8px 0 0 -3px;clip-path:polygon(50% 0,100% 40%,60% 100%,0 60%);background:linear-gradient(135deg,#fff,#8E97A8 50%,#F7F8FA);box-shadow:0 0 6px #fff}
.po-coin{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF4C2,#FFD76A 40%,#C99010 75%,#7A5200);box-shadow:inset 0 0 0 2px rgba(122,82,0,.6),0 0 10px rgba(255,215,106,.6)}
.po-bolt{position:absolute;inset:0;background:radial-gradient(90% 70% at 40% 20%,#F3E8FF,rgba(124,58,237,.55) 40%,rgba(26,11,36,.2) 80%);mix-blend-mode:screen}
.po.prism .po-rays{filter:hue-rotate(0deg);animation:spin 22s linear infinite,prism 3s linear infinite}
@keyframes prism{to{filter:hue-rotate(360deg)}}
.po.night{background:radial-gradient(70% 55% at 50% 40%,#2C1242,#05030A 72%)}
.po.night::before{background:#0A0510}
.po[data-tier="6"] .po-head .let{background:linear-gradient(180deg,#FFE2B8 15%,#FF7A1A 85%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(255,122,26,.6))}
.po-count{position:absolute;left:0;right:0;top:calc(26px + env(safe-area-inset-top,0px));text-align:center;font:700 15px/1 var(--display);letter-spacing:.06em;color:rgba(255,255,255,.75);pointer-events:none}
.po-skip{position:absolute;left:14px;top:calc(14px + env(safe-area-inset-top,0px));z-index:9;padding:10px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:600 13px var(--body);cursor:pointer}
.po-actions{display:grid;justify-items:center;gap:10px;min-height:48px;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}
.po-actions.on{opacity:1;transform:none}
.po-note{margin:0;font:500 13px var(--body);color:rgba(255,255,255,.75)}
.po-sum{grid-row:1/-1;align-self:center;display:grid;justify-items:center;gap:18px}
.po-sum h3{margin:0;font:800 30px/1 var(--display);text-transform:uppercase}
.po-sum .grid{display:grid;grid-template-columns:repeat(3,minmax(0,110px));gap:18px 10px;justify-content:center}
.po-sum .grid>div{position:relative}.po-sum .kw-big{width:100%;margin:0}
.po-tag{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);z-index:4;font:700 12px/1 var(--display);padding:4px 9px;border-radius:99px;background:#FFD447;color:#14163A;white-space:nowrap}
@keyframes poFloat{50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes poBob{50%{transform:translateY(-8px)}}
@keyframes poShake{0%,100%{transform:none}25%{transform:translate(calc(var(--charge)*-5px),calc(var(--charge)*2px)) rotate(calc(var(--charge)*-1.6deg))}75%{transform:translate(calc(var(--charge)*5px),calc(var(--charge)*-2px)) rotate(calc(var(--charge)*1.6deg))}}
@media (max-height:720px){.po-pack .pk{--W:min(200px,50vw)}.po-center{width:min(205px,54vw)}.po-head{min-height:80px}}
@media (prefers-reduced-motion:reduce){.po-pack .pk,.po-card .po-face,.po.rays .po-rays{animation:none!important}.mc{transition:none}}
/* illustrated card: the picture fills the field, the texts sit on top */
.mc-photo{position:absolute;inset:0;z-index:0;background:#0D0F2A center 30%/cover no-repeat}
.mc.photo .mc-top,.mc.photo .mc-art,.mc.photo .mc-plate,.mc.photo .mc-foot{position:relative;z-index:1}
.mc.photo .mc-plate{background:linear-gradient(180deg,transparent,rgba(5,4,14,.78) 38%)}
.mc.photo .mc-foot{background:rgba(5,4,14,.78)}
.mc.photo .mc-game{display:inline-flex;align-items:center;gap:1.6cqw;background:rgba(5,4,14,.55);backdrop-filter:blur(2px)}
.mc-ovr{font:800 6.4cqw/1 var(--display);color:#FFD447}
.mc-logo{display:block;width:9cqw;height:9cqw;border-radius:2.2cqw;box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.5)}
.mc-nrow{display:flex;align-items:center;justify-content:space-between;gap:2cqw;min-width:0}
.mc-nrow .mc-name{min-width:0}
.mc-stamp{flex:none;width:12cqw;height:12cqw;filter:drop-shadow(0 .4cqw .8cqw rgba(0,0,0,.4))}
.stamp-n{font:700 44px/1 Georgia,"Times New Roman",serif}.stamp-ed{font:800 15px "Barlow Condensed",var(--display),sans-serif;letter-spacing:.6px}
@container (max-width:118px){.mc-logo{display:none}.mc-stamp{width:16cqw;height:16cqw}}