@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{--ink:#111713;--muted:#6f7972;--line:#dfe4df;--soft:#f3f5f1;--white:#fff;--green:#075d3b;--grass:#0b744a;--lime:#d8ff48;--yellow:#f3d42f;--red:#e84444;--shadow:0 18px 50px rgba(19,42,30,.09)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;max-width:100%;overflow-x:hidden}
body{margin:0;max-width:100%;overflow-x:hidden;background:#f7f8f5;color:var(--ink);font-family:"DM Sans",sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
.boot{min-height:100vh;display:grid;place-content:center;gap:16px;text-align:center;color:var(--green)}
.boot span{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:auto;background:var(--lime)}
.boot b{font:700 20px "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.08em}
.site-header{height:88px;padding:0 clamp(20px,5vw,76px);display:flex;align-items:center;justify-content:space-between;gap:30px;background:#0d1912;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:50}
.site-header .brand-logo{filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.site-header .nav-ext{color:#9fb0a6}
.site-header .nav-ext:hover{color:#fff}
.site-header .nav-sep{background:rgba(255,255,255,.12)}
.site-header .mobile-menu-btn{color:#fff}
.site-header .login-link{color:#fff}
.site-header .login-link:hover{color:var(--lime)}
.site-header .account-trigger{border-color:rgba(255,255,255,.18);color:#fff}
.site-header .account-trigger:hover{border-color:var(--lime)}
.site-header .account-copy strong{color:#fff}
.site-header .account-copy small{color:#9fb0a6}
.site-header .chevron{color:#9fb0a6}
.brand{border:0;background:transparent;display:flex;align-items:center;gap:10px;color:var(--ink);padding:0;font:800 21px/1 "Barlow Condensed",sans-serif;letter-spacing:-.02em}
.site-header .brand{color:var(--ink);font:800 21px/1 "Barlow Condensed",sans-serif}
.brand>span:last-child{display:grid;grid-template-columns:auto auto;align-items:end;text-align:left}.brand>span>span{color:var(--green)}.brand small{grid-column:1/3;color:#7d8780;font:600 8px "DM Sans";letter-spacing:.26em;margin-top:3px}
.brand-ball{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--green)}
.brand-logo{height:64px;width:auto;display:block}
footer .brand-logo{height:54px}
.site-header nav{display:flex;align-self:stretch}
.site-header nav button{position:relative;border:0;background:transparent;padding:0 18px;color:#9fb0a6;font-size:12px;font-weight:600}
.site-header nav button:after{content:"";position:absolute;inset:auto 18px -1px;height:3px;background:var(--lime);transform:scaleX(0);transition:.2s}
.site-header nav button:hover,.site-header nav button.active{color:#fff}.site-header nav button.active:after{transform:scaleX(1)}
.nav-sep{width:1px;background:var(--line);margin:18px 6px;flex-shrink:0}
.nav-ext{position:relative;display:flex;align-items:center;gap:6px;padding:0 18px;color:#768078;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.nav-ext svg{flex-shrink:0}
.nav-ext:after{content:"";position:absolute;inset:auto 18px -1px;height:3px;background:var(--green);transform:scaleX(0);transition:.2s}
.nav-ext:hover{color:var(--ink)}
.live-chip{display:flex;align-items:center;gap:7px;border:1px solid var(--line);padding:7px 10px;border-radius:50px;font:700 9px "DM Sans";letter-spacing:.09em}
.live-chip i,.source-line i{width:7px;height:7px;border-radius:50%;background:#e7a72d}.live-chip i.on,.source-line i.on{background:#1bbd6a;box-shadow:0 0 0 4px rgba(27,189,106,.12)}

.hero{min-height:570px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:8vw;padding:75px clamp(24px,7vw,110px);background:#fff;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.pitch-lines{position:absolute;right:-9%;top:-27%;width:62vw;height:145%;border:1px solid #e0e6e0;border-radius:50%;transform:rotate(-12deg)}
.pitch-lines:before{content:"";position:absolute;inset:20%;border:1px solid #e0e6e0;border-radius:50%}.pitch-lines:after{content:"";position:absolute;left:50%;top:-10%;height:120%;border-left:1px solid #e0e6e0}
.hero-copy,.hero-card{position:relative;z-index:2;min-width:0}
.overline,.page-head>span{display:block;color:var(--green);font:700 10px "DM Sans";letter-spacing:.2em;margin-bottom:15px}
.hero h1,.page-head h1{font:800 clamp(60px,7vw,104px)/.82 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:-.045em;margin:0}
.hero h1 em{color:var(--green);font-style:normal;position:relative}.hero h1 em:after{content:"";position:absolute;left:2%;right:0;bottom:3px;height:8px;background:var(--lime);z-index:-1;transform:rotate(-2deg)}
.hero-copy>p{max-width:570px;color:var(--muted);font-size:16px;line-height:1.75;margin:32px 0}
.hero-actions{display:flex;align-items:center;gap:13px}
.primary,.secondary{min-height:51px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:2px;border:1px solid var(--green);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;transition:.2s}
.primary{background:var(--green);color:#fff}.primary:hover{background:#06472e;transform:translateY(-2px)}.secondary{background:#fff;color:var(--green)}.secondary:hover{background:var(--soft)}
.hero-card{background:#fff;border:1px solid var(--line);padding:25px;box-shadow:var(--shadow);transform:rotate(1.5deg);max-width:510px}
.hero-card:before{content:"";position:absolute;left:22px;right:22px;top:-8px;height:8px;background:var(--lime)}
.card-label{font:700 9px "DM Sans";letter-spacing:.18em;color:#859087}
.hero-card .match{border:0;padding:7px 0 0;box-shadow:none}.hero-card .match:hover{transform:none}
.source-line{border-top:1px solid var(--line);padding-top:14px;margin-top:6px;display:flex;align-items:flex-start;gap:9px;color:#808a83;font-size:9px;line-height:1.5}
.source-line i{margin-top:3px;flex:0 0 auto}

.content{max-width:1320px;margin:auto;padding-left:clamp(18px,4vw,58px);padding-right:clamp(18px,4vw,58px)}
.overview{padding-bottom:100px}.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-top:0;background:#fff}
.stat{min-height:125px;display:flex;align-items:center;gap:15px;padding:22px 25px;border-right:1px solid var(--line)}.stat:last-child{border:0}
.stat>span{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#edf4ef;color:var(--green)}
.stat>div{display:grid}.stat strong{font:800 29px/1 "Barlow Condensed",sans-serif;letter-spacing:-.02em}.stat b{font-size:9px;letter-spacing:.12em;margin-top:5px}.stat small{font-size:9px;color:#9aa29c;margin-top:5px}
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 365px;gap:55px;margin-top:76px}
.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:23px}
.section-title span{color:var(--green);font-size:9px;font-weight:700;letter-spacing:.16em}.section-title h2{font:800 34px/1 "Barlow Condensed",sans-serif;text-transform:uppercase;margin:7px 0 0}
.section-title button{border:0;background:transparent;display:flex;align-items:center;gap:7px;color:var(--green);font-size:10px;font-weight:700}
.match-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.match-grid.full{grid-template-columns:repeat(3,1fr)}
.match{background:#fff;border:1px solid var(--line);padding:18px;box-shadow:0 5px 20px rgba(15,34,23,.035);transition:.2s;min-width:0}.match:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.match.live{border-top:3px solid #1bbd6a}
.match-top{display:flex;justify-content:space-between;align-items:center;color:#8b958e;font-size:8px;letter-spacing:.09em;text-transform:uppercase}.match-top>span{color:var(--green);font-weight:700}.match.live .match-top time{color:#0b9c58;font-weight:700}
.match-main{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;gap:5px;padding:23px 0}
.match-team{text-align:center;display:flex;flex-direction:column;align-items:center;min-width:0}.match-team strong{font:700 13px/1.2 "Barlow Condensed",sans-serif;text-transform:uppercase;margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.match-team small{color:#9aa39d;font-size:8px;letter-spacing:.1em;margin-top:3px}
.team-badge{display:inline-flex;align-items:center;justify-content:center;width:43px;height:43px;min-width:43px;max-width:43px;min-height:43px;max-height:43px;border-radius:50%;overflow:hidden;background:#eff2ed;border:1px solid #e4e8e3;flex:0 0 43px;align-self:center;box-sizing:content-box}.team-badge img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.team-badge.crest img{object-fit:contain;padding:6px}.team-badge.lg{width:72px;height:72px;min-width:72px;max-width:72px;min-height:72px;max-height:72px;flex-basis:72px}.team-badge.sm{width:34px;height:34px;min-width:34px;max-width:34px;min-height:34px;max-height:34px;flex-basis:34px}.team-badge.xs{width:25px;height:25px;min-width:25px;max-width:25px;min-height:25px;max-height:25px;flex-basis:25px}.team-badge.xxs{width:16px;height:16px;min-width:16px;max-width:16px;min-height:16px;max-height:16px;flex-basis:16px}.team-badge b{font:700 11px "Barlow Condensed",sans-serif;color:var(--green)}
.match-score{text-align:center;display:flex;flex-direction:column;align-items:center}.match-score b{font:800 26px "Barlow Condensed",sans-serif;white-space:nowrap}.match-score b i{font-style:normal;color:#aab1ac;margin:0 5px}.match-score b.time{font-size:20px}.match-score span{font-size:7px;color:#9aa39d;text-transform:uppercase;line-height:1.3;margin-top:5px;max-width:76px}
.match.compact .match-main{padding-bottom:12px}.match.compact .probability,.match.compact .analysis-link{display:none}
.probability{background:#f3f6f1;padding:13px;margin-top:4px}.prob-head{display:flex;justify-content:space-between;color:#7c867f;font-size:7px;letter-spacing:.1em}.prob-head b{color:var(--green)}
.prob-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:9px}.prob-bars div{position:relative;display:flex;justify-content:space-between;overflow:hidden;background:#fff;padding:7px 6px;font-size:8px}.prob-bars div:after{content:"";position:absolute;left:0;bottom:0;width:var(--p);height:3px;background:var(--green)}.prob-bars span{color:#7e8881}.prob-bars b{font-size:9px}
.probability p{margin:9px 0 0;text-align:center;color:#7d8780;font-size:8px}.probability p strong{color:var(--ink);margin-left:3px}
.analysis-link{width:100%;border:0;border-top:1px solid var(--line);background:transparent;padding:14px 0 0;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--green);font-size:9px;font-weight:700}
.mini-scorers{min-width:0}.scorer-row{display:grid;grid-template-columns:36px 40px minmax(0,1fr) 55px 55px;align-items:center;gap:9px;padding:13px 5px;border-bottom:1px solid var(--line)}
.rank{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#eef1ed;color:#7d8780;font:700 11px "Barlow Condensed",sans-serif}.rank.r1{background:var(--yellow);color:#473d00}.rank.r2{background:#dfe4e1}.rank.r3{background:#e8c39e}
.player-photo{width:34px;height:34px;border-radius:50%;overflow:hidden;background:#edf1ec}.player-photo>img{width:100%;height:100%;object-fit:cover}
.scorer-row>div:nth-child(3){display:flex;flex-direction:column;min-width:0}.scorer-row>div:nth-child(3)>strong{font:700 13px "Barlow Condensed",sans-serif;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scorer-row small{display:flex;align-items:center;gap:5px;color:#929b95;font-size:8px;margin-top:4px}
.goal-count,.assist-count{text-align:center;display:flex;flex-direction:column}.goal-count b,.assist-count b{font:800 20px/1 "Barlow Condensed",sans-serif}.goal-count span,.assist-count span{font-size:6px;color:#939c96;letter-spacing:.09em;margin-top:3px}

.page-section{min-height:calc(100vh - 190px);padding-top:62px;padding-bottom:100px}.page-head{margin-bottom:38px}.page-head h1{font-size:clamp(54px,6vw,86px)}.page-head p{max-width:620px;color:var(--muted);line-height:1.65;font-size:13px}
.filters{display:flex;gap:5px;margin-bottom:22px}.filters button{border:1px solid var(--line);background:#fff;color:#78827b;padding:9px 15px;font-size:9px;font-weight:700;text-transform:uppercase}.filters button.active{background:var(--green);color:#fff;border-color:var(--green)}
.groups-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.group-card{background:#fff;border:1px solid var(--line)}.group-card header{display:flex;align-items:center;gap:9px;padding:15px 17px;border-bottom:1px solid var(--line)}.group-card header span{font-size:8px;letter-spacing:.14em;color:#7e8881}.group-card header b{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font:700 15px "Barlow Condensed",sans-serif}
.group-card table{width:100%;border-collapse:collapse}.group-card th{font-size:7px;color:#98a19a;letter-spacing:.08em;padding:10px 7px;text-align:center}.group-card th:first-child{text-align:left;padding-left:15px}.group-card td{padding:10px 7px;border-top:1px solid #edf0ec;text-align:center;font-size:9px}.group-card td:first-child{text-align:left;display:flex;align-items:center;gap:7px}.group-card td i{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-style:normal;color:#9aa29c;font-size:7px}.group-card td i.qualified{background:#e2f4ba;color:#355e13}.group-card td strong{font:600 11px "Barlow Condensed",sans-serif;text-transform:uppercase}
.narrow{max-width:950px}.scorers-card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}.scorer-header{display:grid;grid-template-columns:85px 1fr 64px 64px;padding:13px 20px;background:var(--green);color:#fff;font-size:7px;letter-spacing:.14em}.scorer-header span:nth-child(n+3){text-align:center}.scorers-card .scorer-row{padding:16px 20px;grid-template-columns:36px 40px minmax(0,1fr) 55px 55px}.scorers-card .scorer-row>div:nth-child(3)>strong{font-size:15px}
.empty{padding:50px 20px;text-align:center;color:#9aa29c}.empty svg{color:#bdc5bf}.empty p{font-size:11px}

.predict-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:22px;align-items:start}.fixture-list{background:#fff;border:1px solid var(--line);max-height:650px;overflow:auto}.fixture-list button{width:100%;display:grid;grid-template-columns:80px 1fr 20px;align-items:center;text-align:left;gap:10px;border:0;border-bottom:1px solid var(--line);background:#fff;padding:13px 15px}.fixture-list button:hover,.fixture-list button.active{background:#eef5f0}.fixture-list button.active{box-shadow:inset 4px 0 var(--green)}.fixture-list span{font-size:8px;color:#7f8982;text-transform:uppercase}.fixture-list span small{display:block;color:var(--green);font-weight:700;margin-top:3px}.fixture-list b{font:700 13px "Barlow Condensed",sans-serif;text-align:center}.fixture-list b i{font-style:normal;color:#a4aca7;font-size:9px;margin:0 7px}.fixture-list em{color:var(--green);font-style:normal}
.predict-workbench{background:#fff;border:1px solid var(--line);padding:28px;box-shadow:var(--shadow)}.workbench-top{display:flex;justify-content:space-between;align-items:center;color:#7f8982;font-size:8px;letter-spacing:.12em}.workbench-top b{display:flex;align-items:center;gap:6px;color:var(--green);letter-spacing:0}.workbench-top b.locked{color:var(--red)}
.score-editor{display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;margin:30px 0}.score-editor label{display:flex;flex-direction:column;align-items:center;gap:10px}.score-editor label strong{font:700 18px "Barlow Condensed",sans-serif;text-transform:uppercase}.score-editor>span{text-align:center;color:#a9b0ab;font:600 25px "Barlow Condensed",sans-serif}.score-editor input{width:75px;height:60px;text-align:center;border:1px solid var(--line);font:800 31px "Barlow Condensed",sans-serif;outline:none}.score-editor input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(7,93,59,.09)}.score-editor input:disabled{background:#f0f2ef;color:#9aa29d}
.full-button{width:100%;margin-top:18px}.save-note{text-align:center;color:#89938c;font-size:8px;margin:10px 0 0}
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(8,20,13,.67);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}.prediction-modal{position:relative;width:min(590px,100%);background:#fff;padding:36px;box-shadow:0 30px 100px rgba(0,0,0,.3)}.modal-close{position:absolute;right:15px;top:10px;border:0;background:transparent;font-size:27px;color:#7e8881}.modal-teams{display:grid;grid-template-columns:1fr 50px 1fr;align-items:center;text-align:center;margin:27px 0}.modal-teams>div{display:flex;align-items:center;flex-direction:column;gap:10px}.modal-teams strong{font:700 17px "Barlow Condensed",sans-serif;text-transform:uppercase}.modal-teams>span{color:#a4ada6;font:700 12px "Barlow Condensed",sans-serif}.model-factors{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:20px 0}.model-factors span{background:#edf3ee;color:var(--green);padding:6px 8px;font-size:8px;text-transform:uppercase}.disclaimer{color:#909992;text-align:center;font-size:8px;line-height:1.5;margin:15px 0 0}.advice{text-align:center;color:var(--green);font-weight:700;font-size:12px}.loading{padding:50px;text-align:center;color:var(--green);font-size:12px}

footer{min-height:110px;background:#0d1912;color:#87938b;padding:25px clamp(20px,6vw,90px);display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:8px}.brand.compact{color:#fff}.brand.compact .brand-ball{background:var(--lime);color:var(--green);width:33px;height:33px}footer p{text-align:center}
footer .brand{color:#fff}
footer .brand-bars i{background:#fff}

@media(max-width:1050px){.site-header nav{display:none}.hero{grid-template-columns:1fr;padding-top:65px}.pitch-lines{width:110vw}.hero-card{max-width:650px}.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}.home-grid{grid-template-columns:1fr}.match-grid.full,.groups-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.site-header{height:65px;padding:0 16px}.live-chip{display:none}.hero{width:100%;padding:55px 20px;gap:50px}.hero-copy,.hero-card{width:calc(100vw - 40px);max-width:calc(100vw - 40px)}.hero h1{font-size:55px}.hero-actions{width:100%;align-items:stretch;flex-direction:column}.hero-card{padding:17px;transform:none}.hero-card .match{width:100%;overflow:hidden}.match-main{grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr)}.stats{margin:0 -1px}.stat{padding:15px 12px;min-height:105px}.stat>span{display:none}.stat strong{font-size:24px}.home-grid{margin-top:55px}.match-grid,.match-grid.full,.groups-grid{grid-template-columns:1fr}.page-section{padding-top:45px}.page-head h1{font-size:55px}.predict-layout{grid-template-columns:1fr}.fixture-list{display:flex;overflow:auto}.fixture-list button{min-width:180px;grid-template-columns:65px 1fr 15px;border-right:1px solid var(--line)}.prediction-modal{padding:28px 18px}.scorer-header{display:none}.scorers-card .scorer-row{padding:14px 10px;grid-template-columns:28px 34px minmax(0,1fr) 42px}.scorers-card .assist-count{display:none}.score-editor{grid-template-columns:1fr 25px 1fr}.team-badge.lg{width:57px;height:57px}footer{flex-direction:column;text-align:center;padding:32px 20px}}

/* ── Mobile nav ────────────────────────────────────────────────────────── */
.header-right{display:flex;align-items:center;gap:12px}
.mobile-menu-btn{display:none;border:0;background:transparent;font-size:22px;color:var(--ink);padding:4px 8px}
.mobile-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:2px solid var(--line);z-index:60;flex-direction:column}
.mobile-nav button{border:0;background:transparent;padding:14px 24px;text-align:left;font-size:13px;font-weight:600;border-bottom:1px solid var(--line)}
.mobile-nav button.active{color:var(--green);background:var(--soft)}
.mobile-nav-ext{display:flex;align-items:center;gap:8px;padding:14px 24px;font-size:13px;font-weight:600;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.mobile-nav-ext svg{flex-shrink:0}
.mobile-nav-ext:hover{color:var(--green);background:var(--soft)}
@media(max-width:1050px){.mobile-menu-btn{display:block}.mobile-nav{display:flex}}

/* ── Match actions row ──────────────────────────────────────────────────── */
.match-actions{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.match-actions .analysis-link{flex:1;border:0;padding:0}
.share-btn{display:flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;color:var(--muted);padding:8px 12px;font-size:9px;font-weight:700;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:.2s}
.share-btn:hover{border-color:var(--green);color:var(--green)}

/* ── Community vote ─────────────────────────────────────────────────────── */
.community-vote{background:#f8faf6;border:1px solid #e6ece5;padding:12px;margin-top:8px}
.vote-label{font:700 8px "DM Sans";letter-spacing:.14em;color:#7d8780;display:flex;align-items:center;gap:5px;margin-bottom:10px}
.vote-buttons{display:flex;gap:6px}
.vote-buttons button{flex:1;border:1px solid var(--line);background:#fff;padding:9px 6px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:.2s}
.vote-buttons button:hover{border-color:var(--green);color:var(--green);background:#edf5ef}
.vote-results{display:flex;flex-direction:column;gap:5px}
.vote-bar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:7px 9px;background:#fff;border:1px solid var(--line);overflow:hidden;font-size:9px;font-weight:700}
.vote-bar.mine{border-color:var(--green);color:var(--green)}
.vote-bar-fill{position:absolute;left:0;top:0;bottom:0;background:rgba(11,116,74,.08);pointer-events:none}
.vote-bar span{position:relative;z-index:1}
.vote-bar b{position:relative;z-index:1;margin-left:auto}
.vote-bar em{position:relative;z-index:1;color:var(--green);font-style:normal;margin-left:6px}

/* ── Bracket ─────────────────────────────────────────────────────────────── */
.bracket-empty{padding:70px 20px;text-align:center;color:#9aa29c;display:flex;flex-direction:column;align-items:center;gap:15px}
.bracket-empty p{font-size:14px;color:var(--muted)}
.bracket-empty small{font-size:11px;color:#b0b9b2}
.bracket-grid{display:flex;gap:16px;overflow-x:auto;padding-bottom:20px;align-items:flex-start}
.bracket-round{display:flex;flex-direction:column;gap:14px;min-width:200px}
.bracket-round-label{font:700 9px "DM Sans";letter-spacing:.18em;color:var(--green);background:var(--soft);padding:8px 12px;text-align:center;border:1px solid var(--line)}
.bracket-match{background:#fff;border:1px solid var(--line);overflow:hidden;box-shadow:0 3px 12px rgba(15,34,23,.05)}
.bracket-team{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:11px}
.bracket-team:last-child{border-bottom:0}
.bracket-team span{flex:1;font:600 12px "Barlow Condensed",sans-serif;text-transform:uppercase}
.bracket-team b{font:800 16px "Barlow Condensed",sans-serif;min-width:20px;text-align:right}
.bracket-team.winner{background:#edf6f0;color:var(--green)}
.bracket-team.winner b{color:var(--green)}

/* ── Team modal ──────────────────────────────────────────────────────────── */
.team-modal{position:relative;width:min(560px,100%);background:#fff;padding:32px;box-shadow:0 30px 100px rgba(0,0,0,.3);max-height:90vh;overflow-y:auto}
.team-modal-header{display:flex;align-items:center;gap:18px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.team-modal-header h2{font:800 30px/1 "Barlow Condensed",sans-serif;text-transform:uppercase;margin:0}
.team-modal-header span{font:700 9px "DM Sans";letter-spacing:.15em;color:var(--muted);margin-top:5px;display:block}
.team-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:16px}
.team-stats-grid>div{background:#fff;padding:14px 10px;text-align:center;display:flex;flex-direction:column}
.team-stats-grid b{font:800 24px/1 "Barlow Condensed",sans-serif;color:var(--ink)}
.team-stats-grid span{font:700 7px "DM Sans";letter-spacing:.12em;color:var(--muted);margin-top:4px}
.team-standing-info{background:var(--soft);padding:10px 14px;font:700 11px "DM Sans";color:var(--green);margin-bottom:16px;text-align:center}
.team-section-label{font:700 8px "DM Sans";letter-spacing:.18em;color:var(--muted);margin:16px 0 8px}
.team-matches-section{margin-top:4px}
.team-match-row{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--line);font-size:11px}
.team-match-row span{flex:1;font:600 12px "Barlow Condensed",sans-serif;text-transform:uppercase}
.team-match-row small{color:var(--muted);font-size:9px;white-space:nowrap}
.mini-predict-btn{border:1px solid var(--green);background:transparent;color:var(--green);padding:5px 10px;font-size:9px;font-weight:700;cursor:pointer;white-space:nowrap}
.mini-predict-btn:hover{background:var(--green);color:#fff}
.clickable{cursor:pointer}.clickable:hover .team-badge{box-shadow:0 0 0 3px var(--lime)}
.clickable-row{cursor:pointer}.clickable-row:hover{background:#f6faf5}

/* ── Compare ─────────────────────────────────────────────────────────────── */
.compare-selectors{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;gap:16px;margin-bottom:36px;background:#fff;border:1px solid var(--line);padding:28px;box-shadow:var(--shadow)}
.compare-team-selector{display:flex;flex-direction:column;align-items:center;gap:12px}
.compare-team-selector select{width:100%;max-width:280px;border:1px solid var(--line);padding:10px 12px;font:600 13px "Barlow Condensed",sans-serif;text-transform:uppercase;background:#fff;cursor:pointer;outline:none}
.compare-team-selector select:focus{border-color:var(--green)}
.vs-badge{width:50px;height:50px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font:800 14px "Barlow Condensed",sans-serif;margin:auto}
.compare-body{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.compare-panel{background:#fff;border:1px solid var(--line);padding:24px;box-shadow:0 3px 14px rgba(15,34,23,.04)}
.compare-panel-title{font:700 9px "DM Sans";letter-spacing:.18em;color:var(--green);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.compare-stats-header{display:grid;grid-template-columns:50px 1fr 50px;gap:8px;text-align:center;font:700 9px "DM Sans";letter-spacing:.1em;color:var(--green);margin-bottom:10px}
.compare-stat-row{display:grid;grid-template-columns:50px 1fr 50px;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #f0f2ef;position:relative}
.compare-stat-row b{font:800 18px/1 "Barlow Condensed",sans-serif;text-align:center}
.compare-stat-row b.highlight{color:var(--green)}
.compare-stat-label{position:absolute;left:50%;transform:translateX(-50%);font:700 8px "DM Sans";letter-spacing:.08em;color:var(--muted);white-space:nowrap}
.compare-bar{height:6px;display:flex;border-radius:3px;overflow:hidden;background:var(--line)}
.compare-bar-a{background:var(--green);transition:.4s}
.compare-bar-b{background:#c8d5cb;transition:.4s}
.compare-no-stats{color:var(--muted);font-size:11px;text-align:center;padding:20px 0}
.compare-score-pred{display:flex;align-items:center;gap:12px;background:var(--soft);padding:12px 16px;margin-top:12px}
.compare-score-pred span{font:700 8px "DM Sans";letter-spacing:.12em;color:var(--muted)}
.compare-score-pred b{font:800 24px/1 "Barlow Condensed",sans-serif;color:var(--ink)}
.h2h-section{margin-top:16px}
.h2h-match{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px;background:var(--soft);margin-top:6px;font:700 14px "Barlow Condensed",sans-serif}
.h2h-match b{font-size:20px}

/* ── Modal footer actions ────────────────────────────────────────────────── */
.modal-footer-actions{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap}
.modal-footer-actions .share-btn{flex:0 0 auto}
.modal-footer-actions .community-vote{flex:1}

/* ── Predict bottom actions ──────────────────────────────────────────────── */
.predict-bottom-actions{display:flex;gap:10px;margin-top:18px;align-items:center}
.predict-bottom-actions .full-button{flex:1;margin-top:0}

/* ── Responsive additions ────────────────────────────────────────────────── */
@media(max-width:900px){
  .compare-body{grid-template-columns:1fr}
  .compare-selectors{grid-template-columns:1fr 50px 1fr;padding:18px}
}
@media(max-width:720px){
  .bracket-grid{flex-direction:column}
  .bracket-round{min-width:unset;width:100%}
  .team-stats-grid{grid-template-columns:repeat(3,1fr)}
  .compare-selectors{grid-template-columns:1fr;text-align:center;gap:8px}
  .vs-badge{margin:0 auto}
  .match-actions{flex-wrap:wrap}
  .modal-footer-actions{flex-direction:column}
  .predict-bottom-actions{flex-direction:column}
  .predict-bottom-actions .full-button{width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRACK//ID — Topbar, Auth pages, Index public
   Ces styles couvrent partials/header.php, index.php, login.php, register.php
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Noise overlay ──────────────────────────────────────────────────────── */
.noise{pointer-events:none;position:fixed;inset:0;z-index:9999;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar{height:64px;padding:0 clamp(20px,5vw,76px);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}

/* Brand bars (three stacked lines) */
.brand-bars{display:flex;flex-direction:column;gap:4px;width:22px;flex-shrink:0}
.brand-bars i{display:block;height:2px;background:var(--ink)}
.brand-bars i:nth-child(2){width:70%}
.brand-bars i:nth-child(3){width:50%}

/* Main nav */
.main-nav{display:flex;align-self:stretch;gap:2px}
.main-nav a{display:flex;align-items:center;gap:6px;padding:0 16px;color:var(--muted);font-size:12px;font-weight:600;text-decoration:none;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.main-nav a svg{flex-shrink:0}
.main-nav a:hover{color:var(--ink)}
.main-nav a.active{color:var(--ink);border-bottom-color:var(--green)}

/* Top-right actions */
.top-actions{display:flex;align-items:center;gap:10px}
.login-link{font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;padding:0 8px}
.login-link:hover{color:var(--green)}
.small-primary{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--green);color:#fff;font-size:12px;font-weight:700;text-decoration:none;border-radius:2px;transition:background .15s}
.small-primary:hover{background:var(--grass)}

/* Account menu */
.account-menu{position:relative}
.account-trigger{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--line);padding:6px 10px 6px 14px;cursor:pointer;transition:border-color .15s}
.account-trigger:hover{border-color:var(--green)}
.account-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.account-copy strong{font-size:13px;font-weight:700;color:var(--ink)}
.account-copy small{font-size:10px;color:var(--muted);font-weight:600}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--avatar,var(--green));color:#fff;font:700 13px "DM Sans",sans-serif;display:grid;place-items:center;flex-shrink:0}
.avatar-img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}
.chevron{font-size:14px;color:var(--muted);transition:transform .2s}
.account-trigger[aria-expanded="true"] .chevron{transform:rotate(180deg)}
.account-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:160px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.10);z-index:200;padding:6px}
.account-dropdown.open{display:block}
.account-dropdown a{display:block;padding:8px 12px;font-size:13px;font-weight:500;color:var(--ink);text-decoration:none;transition:background .12s}
.account-dropdown a:hover{background:var(--soft)}
.account-dropdown span{display:block;height:1px;background:var(--line);margin:6px 0}
.logout-link{color:var(--red) !important}

/* Banner (for account-menu with banner) */
.account-menu.has-banner .account-trigger{background-image:var(--banner-url);background-size:cover;background-position:center}

/* Config banner & flash */
.config-banner{background:#fff3cd;border-bottom:1px solid #ffe08a;padding:10px clamp(20px,5vw,76px);font-size:13px;color:#7a5a00}
.flash{padding:12px clamp(20px,5vw,76px);font-size:13px;font-weight:600}
.flash.success{background:#d1fae5;color:#065f46}
.flash.error{background:#fee2e2;color:#991b1b}
.flash.info{background:#dbeafe;color:#1e40af}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.primary-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;background:var(--green);color:#fff;font-size:14px;font-weight:700;text-decoration:none;border:none;cursor:pointer;transition:background .15s;line-height:1}
.primary-btn:hover{background:var(--grass)}
.primary-btn.full{width:100%;justify-content:center}
.ghost-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;background:transparent;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;border:1px solid var(--line);cursor:pointer;transition:border-color .15s}
.ghost-btn:hover{border-color:var(--ink)}
.text-link{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-size:14px;font-weight:600;text-decoration:none}
.text-link:hover{text-decoration:underline}

/* ── Eyebrow / labels ───────────────────────────────────────────────────── */
.eyebrow{font:700 10px "DM Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin:0 0 16px}
.eyebrow.dark{color:var(--muted)}

/* ── Index hero ─────────────────────────────────────────────────────────── */
.hero{min-height:540px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6vw;padding:80px clamp(24px,7vw,110px);background:#fff;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-image{position:absolute;inset:0;background:#0a0f0c url('home/cdm26-hero.png') center right/cover no-repeat;z-index:0}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to right,rgba(255,255,255,1) 40%,rgba(255,255,255,0) 75%);z-index:1}
.hero-copy{position:relative;z-index:2}
.hero-copy h1{font:800 clamp(52px,6.5vw,96px)/.86 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:-.04em;margin:0 0 8px;color:var(--ink)}
.hero-copy h1 em{color:var(--green);font-style:normal;position:relative}
.hero-copy h1 em:after{content:"";position:absolute;left:2%;right:0;bottom:3px;height:7px;background:var(--lime);z-index:-1;transform:rotate(-2deg)}
.hero-copy>p{max-width:520px;color:var(--muted);font-size:16px;line-height:1.75;margin:24px 0}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero-note{position:relative;z-index:2;display:flex;align-items:center;gap:14px;justify-self:end}
.hero-note>div small{display:block;font:700 9px "DM Sans",sans-serif;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-bottom:3px}
.hero-note>div strong{font-size:15px;font-weight:700;color:var(--ink)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#1bbd6a;box-shadow:0 0 0 4px rgba(27,189,106,.15);flex-shrink:0;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(27,189,106,.15)}50%{box-shadow:0 0 0 7px rgba(27,189,106,.06)}}

/* ── Feature band ───────────────────────────────────────────────────────── */
.feature-band{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.feature-band article{padding:48px clamp(20px,4vw,64px);border-right:1px solid var(--line)}
.feature-band article:last-child{border-right:none}
.feature-band span{display:block;font:800 11px "DM Sans",sans-serif;letter-spacing:.14em;color:var(--muted);margin-bottom:12px}
.feature-band h2{font:700 22px/1.15 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.02em;margin:0 0 10px;color:var(--ink)}
.feature-band p{font-size:14px;color:var(--muted);line-height:1.7;margin:0}

/* ── Ranked promo ───────────────────────────────────────────────────────── */
.ranked-promo{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;padding:72px clamp(24px,7vw,110px);background:var(--soft);border-top:1px solid var(--line)}
.ranked-promo h2{font:800 clamp(36px,4vw,58px)/1.05 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:-.03em;margin:0;color:var(--ink)}
.promo-copy p{color:var(--muted);font-size:15px;line-height:1.75;margin:0 0 20px}

/* ── Auth pages ─────────────────────────────────────────────────────────── */
.auth-layout{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 64px)}
.auth-visual{display:flex;align-items:flex-end;padding:60px clamp(32px,5vw,72px);min-height:420px;position:relative;overflow:hidden}
.login-visual{background:url('auth/login-bg.jpg') center/cover no-repeat}
.register-visual{background:url('auth/register-bg.jpg') center/cover no-repeat}
.auth-visual>div{position:relative;z-index:2}
.auth-visual .eyebrow{color:var(--lime)}
.auth-visual h1{font:800 clamp(42px,5vw,68px)/.9 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:-.03em;color:#fff;margin:0}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:48px 32px;background:#fff}
.auth-box{width:100%;max-width:400px}
.auth-box h2{font:800 32px/1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.auth-intro{font-size:14px;color:var(--muted);margin:0 0 28px;line-height:1.6}
.auth-form{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}
.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.auth-form input,.auth-form select{padding:11px 14px;border:1px solid var(--line);background:#fff;font-size:14px;color:var(--ink);outline:none;transition:border-color .15s}
.auth-form input:focus,.auth-form select:focus{border-color:var(--green)}
.auth-form select{cursor:pointer}
.form-error{padding:10px 14px;background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;font-size:13px;font-weight:600;margin-bottom:4px}
.auth-switch{font-size:13px;color:var(--muted);margin:0}
.auth-switch a{color:var(--green);font-weight:600;text-decoration:none}
.auth-switch a:hover{text-decoration:underline}

/* ── OAuth (Discord) ────────────────────────────────────────────────────── */
.auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--muted);font:700 10px "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase}
.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--line)}
.oauth-form{margin-bottom:20px}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px 24px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;transition:border-color .15s,background .15s}
.oauth-btn:hover{border-color:#5865f2;background:#f5f6ff}
.oauth-btn svg{flex-shrink:0}
.oauth-btn.discord{color:#3a3f9e}

/* ── CDM 2026 branding accents ─────────────────────────────────────────── */
.cdm-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;background:var(--soft);border:1px solid var(--line);border-radius:999px;font:700 10px "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:0 0 18px}
.cdm-pill .ball{font-size:13px;line-height:1}
.auth-visual .cdm-pill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:var(--lime)}
.auth-visual .cdm-tag{position:relative;z-index:2;display:flex;align-items:center;gap:10px;margin-top:18px;color:#cfe9da;font:600 12px "DM Sans",sans-serif}
.auth-visual .cdm-tag img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.25)}
.hero-note .cdm-flags{display:flex;margin-right:-6px}
.hero-note .cdm-flags img{width:22px;height:22px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-6px;box-shadow:0 1px 4px rgba(0,0,0,.15)}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .auth-layout{grid-template-columns:1fr}
  .auth-visual{display:none}
  .hero{grid-template-columns:1fr;padding-top:60px}
  .hero-note{justify-self:start;margin-top:8px}
  .hero-note .cdm-flags{display:none}
  .ranked-promo{grid-template-columns:1fr;gap:32px}
  .feature-band{grid-template-columns:1fr}
  .feature-band article{border-right:none;border-bottom:1px solid var(--line)}
  .feature-band article:last-child{border-bottom:none}
}
@media(max-width:640px){
  .topbar{padding:0 20px;height:58px}
  .main-nav{display:none}
  .hero{padding:48px 20px;gap:36px}
  .hero-copy h1{font-size:52px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions a{justify-content:center}
  .ranked-promo{padding:48px 20px}
  .auth-panel{padding:36px 20px}
}

/* ── Account dropdown JS toggle ─────────────────────────────────────────── */

/* ── TRACK//ID — Footer & Brand ─────────────────────────────────────────── */
/* Override footer pour les pages TRACK//ID (non-CDM) */
body:not(.cdm-app) footer {
  min-height: auto;
  background: #0d1912;
  color: #87938b;
  padding: 28px clamp(20px,6vw,90px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 12px;
  border-top: none;
}

/* Brand TRACK//ID (text avec brand-bars) */
.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font: 700 15px "DM Sans", sans-serif;
  letter-spacing: .01em;
}
.topbar .brand span:last-child span { color: var(--green); }

/* Space Grotesk font pour home.php */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   TRACK//ID — profil.php
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ───────────────────────────────────────────────────────── */
.profile-page {
  max-width: 860px;
  margin: 48px auto;
  padding: 0 clamp(20px,5vw,40px);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Banner + identity ──────────────────────────────────────────────────── */
.profile-banner {
  position: relative;
  min-height: 220px;
  border-radius: 4px 4px 0 0;
  /* overflow:visible permet au cadre avatar de déborder sans être coupé.
     Le border-radius reste visible car le background est sur le conteneur lui-même. */
  overflow: visible;
  background: linear-gradient(135deg, #0b2e1c 0%, #0a3d27 100%);
  padding: 32px 36px;
  display: flex;
  align-items: flex-end;
  gap: 28px;
}
.profile-banner.has-banner {
  background-image: var(--banner-url);
  background-size: cover;
  background-position: center;
}
.profile-banner.has-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
}
.profile-banner > * { position: relative; z-index: 2; }

/* Avatar large */
.profile-avatar-large {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  flex-shrink: 0;
  background: var(--avatar, var(--green));
  color: #fff;
  font: 700 36px "DM Sans", sans-serif;
  display: grid;
  place-items: center;
  object-fit: cover;
}

/* Identity text */
.profile-identity { flex: 1; min-width: 0; }
.profile-identity .eyebrow { color: var(--lime); margin-bottom: 6px; }
.profile-identity h1 {
  font: 700 clamp(28px,4vw,42px)/1 "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 8px;
}
.profile-identity p { color: rgba(255,255,255,.6); font-size: 14px; margin: 0; }

/* Edit button in banner */
.profile-banner .ghost-btn {
  align-self: flex-end;
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
  color: #fff;
  font-size: 12px;
  padding: 9px 16px;
  white-space: nowrap;
}
.profile-banner .ghost-btn:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.profile-banner .banner-actions {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-banner .banner-actions .ghost-btn { align-self: stretch; justify-content: center; }
@media (max-width: 720px) {
  .profile-banner .banner-actions { align-self: stretch; flex-direction: row; flex-wrap: wrap; }
  .profile-banner .banner-actions .ghost-btn { flex: 1; }
}

/* ── Stats bar ──────────────────────────────────────────────────────────── */
.profile-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line);
  border-top: none;
  background: #fff;
}
.profile-stats > div {
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-stats > div:last-child { border-right: none; }
.profile-stats span {
  font: 700 9px "DM Sans", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.profile-stats strong {
  font: 700 26px/1 "Barlow Condensed", sans-serif;
  color: var(--ink);
  letter-spacing: -.02em;
}

/* ── Details panels ─────────────────────────────────────────────────────── */
.profile-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-top: none;
  background: #fff;
}
.profile-details > div {
  padding: 28px 28px 32px;
  border-right: 1px solid var(--line);
}
.profile-details > div:last-child { border-right: none; }
.panel-label {
  font: 700 9px "DM Sans", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 10px;
}
.profile-details h2 {
  font: 700 22px/1.1 "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 8px;
  color: var(--ink);
}
.profile-details p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.6; }

/* ── Record (V/D) ───────────────────────────────────────────────────────── */
.record {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.record span {
  font: 700 10px "DM Sans", sans-serif;
  letter-spacing: .12em;
  color: var(--muted);
}
.record strong {
  font: 700 36px/1 "Barlow Condensed", sans-serif;
  color: var(--ink);
  letter-spacing: -.02em;
}
.record strong:first-of-type { color: var(--green); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media(max-width:700px) {
  .profile-banner { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .profile-stats { grid-template-columns: repeat(3,1fr); }
  .profile-stats > div:nth-child(3) { border-right: none; }
  .profile-stats > div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .profile-details { grid-template-columns: 1fr; }
  .profile-details > div { border-right: none; border-top: 1px solid var(--line); }
  .profile-details > div:first-child { border-top: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRACK//ID — parametres.php
   ═══════════════════════════════════════════════════════════════════════════ */

.settings-page { max-width: 960px; margin: 0 auto; padding: 48px clamp(20px,5vw,40px) 80px; }

/* Page heading */
.page-heading { margin-bottom: 40px; }
.page-heading h1 { font: 700 clamp(32px,4vw,48px)/1 "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:-.02em; margin:0 0 8px; color:var(--ink); }
.page-heading p { font-size:14px; color:var(--muted); margin:0; }

/* Layout sidebar + main */
.settings-layout { display:grid; grid-template-columns:180px 1fr; gap:40px; align-items:start; }

/* Sidebar nav */
.settings-layout aside { display:flex; flex-direction:column; gap:2px; position:sticky; top:84px; }
.settings-layout aside a { display:block; padding:9px 14px; font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; border-left:2px solid transparent; transition:color .15s,border-color .15s; }
.settings-layout aside a:hover { color:var(--ink); }
.settings-layout aside a.active { color:var(--ink); border-left-color:var(--green); }
.settings-layout aside a.danger { color:var(--red); margin-top:12px; }
.settings-layout aside a.danger:hover { color:#c0392b; }

/* Blocks */
.settings-main { display:flex; flex-direction:column; gap:32px; }
.settings-block { background:#fff; border:1px solid var(--line); padding:28px 32px; }
.settings-form { background:#fff; border:1px solid var(--line); padding:28px 32px; display:flex; flex-direction:column; gap:18px; }
.settings-title { margin-bottom:20px; }
.settings-title h2 { font:700 20px/1 "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.02em; margin:0 0 6px; color:var(--ink); }
.settings-title p { font-size:13px; color:var(--muted); margin:0; }
.settings-form h3 { font:700 15px/1 "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.04em; margin:0 0 4px; color:var(--ink); }
.settings-hint { font-size:12px; color:var(--muted); margin:0 0 12px; }
.settings-divider { border:none; border-top:1px solid var(--line); margin:24px 0; }

/* Form labels & inputs */
.settings-form label { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.settings-form input[type="text"],
.settings-form input[type="email"],
.settings-form input[type="password"],
.settings-form textarea,
.settings-form select { padding:10px 13px; border:1px solid var(--line); font-size:14px; color:var(--ink); background:#fff; outline:none; transition:border-color .15s; font-family:inherit; resize:vertical; }
.settings-form input:focus,.settings-form textarea:focus,.settings-form select:focus { border-color:var(--green); }
.settings-form fieldset { border:1px solid var(--line); padding:16px 18px; }
.settings-form legend { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:0 6px; }
.form-actions { display:flex; align-items:center; gap:14px; padding-top:4px; }

/* Color picker */
.color-options { display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
.color-choice input { display:none; }
.color-choice span { display:block; width:32px; height:32px; border-radius:50%; background:var(--choice); cursor:pointer; border:3px solid transparent; transition:border-color .15s,transform .15s; }
.color-choice input:checked + span { border-color:var(--ink); transform:scale(1.15); }
.color-choice span:hover { transform:scale(1.1); }

/* Avatar upload */
.avatar-upload-form { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.avatar-preview-wrap { width:72px; height:72px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid var(--line); }
.avatar-preview-img { width:100%; height:100%; object-fit:cover; display:block; }
.avatar-preview-fallback { width:100%; height:100%; background:var(--avatar,var(--green)); color:#fff; font:700 28px "DM Sans",sans-serif; display:grid; place-items:center; }
.file-label { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--line); font-size:13px; font-weight:600; cursor:pointer; color:var(--ink); transition:border-color .15s; }
.file-label:hover { border-color:var(--ink); }
.file-label input[type="file"] { display:none; }
.danger-link { color:var(--red) !important; font-size:13px; }
.danger-link:hover { text-decoration:underline; }

/* Banner grid */
.banner-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.banner-card { border:2px solid var(--line); overflow:hidden; position:relative; transition:border-color .15s; }
.banner-card.active { border-color:var(--green); }
.banner-card.locked { opacity:.55; }
.banner-thumb { height:90px; background-size:cover; background-position:center; background-color:var(--soft); }
.banner-info { padding:10px 12px 4px; }
.banner-info strong { display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.banner-tag { display:inline-block; font:700 9px "DM Sans",sans-serif; letter-spacing:.1em; text-transform:uppercase; padding:3px 6px; border-radius:2px; }
.banner-tag.free { background:#d1fae5; color:#065f46; }
.banner-tag.locked-tag { background:var(--soft); color:var(--muted); }
.banner-tag.unlocked-tag { background:#eff6ff; color:#1e40af; }
.banner-select-btn { display:block; width:100%; padding:8px; background:var(--green); color:#fff; font-size:12px; font-weight:700; border:none; cursor:pointer; transition:background .15s; }
.banner-select-btn:hover { background:var(--grass); }
.banner-active-label { display:block; padding:8px; text-align:center; font-size:11px; font-weight:700; color:var(--green); letter-spacing:.08em; text-transform:uppercase; }
.banner-locked-icon { display:block; padding:8px; text-align:center; font-size:14px; }

/* Security sub-forms */
.security-form { border:none; padding:0; background:transparent; }

/* Responsive */
@media(max-width:720px) {
  .settings-layout { grid-template-columns:1fr; }
  .settings-layout aside { position:static; flex-direction:row; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--line); margin-bottom:8px; }
  .settings-layout aside a { border-left:none; border-bottom:2px solid transparent; }
  .settings-layout aside a.active { border-bottom-color:var(--green); border-left-color:transparent; }
  .avatar-upload-form { flex-direction:column; align-items:flex-start; }
  .banner-grid { grid-template-columns:repeat(2,1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRACK//ID — classement.php
   ═══════════════════════════════════════════════════════════════════════════ */

.ranking-page { max-width: 860px; margin: 0 auto; padding: 48px clamp(20px,5vw,40px) 80px; }

/* Page heading row */
.ranking-page .page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px; flex-wrap:wrap; }
.ranking-page .page-heading h1 { font:700 clamp(32px,4vw,48px)/1 "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:-.02em; margin:0 0 8px; color:var(--ink); }
.ranking-page .page-heading p { font-size:14px; color:var(--muted); margin:0; }

/* Scope tabs */
.scope-tabs { display:flex; gap:4px; }
.scope-tabs a { padding:7px 16px; font-size:12px; font-weight:700; text-decoration:none; color:var(--muted); border:1px solid var(--line); transition:all .15s; }
.scope-tabs a:hover { color:var(--ink); border-color:var(--ink); }
.scope-tabs a.active { background:var(--green); color:#fff; border-color:var(--green); }

/* Ranking card */
.ranking-card { border:1px solid var(--line); background:#fff; overflow:hidden; }

/* Header row */
.ranking-head { display:grid; grid-template-columns:48px 1fr 80px 90px 90px 90px; align-items:center; padding:10px 20px; background:var(--soft); border-bottom:1px solid var(--line); }
.ranking-head span { font:700 9px "DM Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* Data rows */
.ranking-row { display:grid; grid-template-columns:48px 1fr 80px 90px 90px 90px; align-items:center; padding:12px 20px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); transition:background .12s; }
.ranking-row:last-child { border-bottom:none; }
.ranking-row:hover { background:var(--soft); }
.ranking-row.me { background:#f0fdf4; }
.ranking-row.me:hover { background:#dcfce7; }
.ranking-row > span { font-size:13px; color:var(--muted); }
.ranking-row > span:first-child { font:700 15px "Barlow Condensed",sans-serif; color:var(--ink); }
.ranking-row:nth-child(1) > span:first-child { color:#d4af37; }
.ranking-row:nth-child(2) > span:first-child { color:#9e9e9e; }
.ranking-row:nth-child(3) > span:first-child { color:#a0522d; }
.ranking-row > strong { font:700 18px/1 "Barlow Condensed",sans-serif; color:var(--ink); letter-spacing:-.01em; }

/* Player cell */
.rank-player { display:flex; align-items:center; gap:10px; min-width:0; }
.rank-player strong { font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-player small { font-size:11px; color:var(--muted); margin-left:4px; }
.rank-avatar-img { width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.rank-player b { width:32px; height:32px; border-radius:50%; background:var(--avatar,var(--green)); color:#fff; font:700 13px "DM Sans",sans-serif; display:grid; place-items:center; flex-shrink:0; }

/* Empty state */
.empty-state { padding:48px 24px; text-align:center; display:flex; flex-direction:column; gap:8px; align-items:center; }
.empty-state strong { font-size:16px; font-weight:700; color:var(--ink); }
.empty-state span { font-size:13px; color:var(--muted); }

/* Responsive */
@media(max-width:700px) {
  .ranking-head { grid-template-columns:36px 1fr 60px 70px; }
  .ranking-head span:nth-child(3),.ranking-head span:nth-child(5) { display:none; }
  .ranking-row { grid-template-columns:36px 1fr 60px 70px; }
  .ranking-row > span:nth-child(3),.ranking-row > span:nth-child(5) { display:none; }
  .scope-tabs { width:100%; }
  .scope-tabs a { flex:1; text-align:center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRACK//ID — quick.php (Partie rapide)
   ═══════════════════════════════════════════════════════════════════════════ */

.queue-page { max-width: 760px; margin: 0 auto; padding: 48px clamp(20px,5vw,40px) 80px; }

/* Heading */
.queue-heading { margin-bottom: 36px; }
.queue-heading h1 { font:700 clamp(36px,4vw,52px)/1 "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:-.02em; margin:0 0 10px; color:var(--ink); }
.queue-heading p { font-size:15px; color:var(--muted); margin:0; max-width:540px; line-height:1.65; }

/* Two-column grid */
.opponent-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:28px; }
.opponent-grid article { border:1px solid var(--line); background:#fff; padding:32px 28px; display:flex; flex-direction:column; gap:20px; }

/* Icon */
.opponent-icon { font-size:28px; line-height:1; display:block; color:var(--green); font-style:normal; }

/* Mode tag */
.mode-tag { font:700 9px "DM Sans",sans-serif; letter-spacing:.18em; text-transform:uppercase; margin:0 0 8px; display:inline-block; }
.mode-tag.cyan { color:#0891b2; }
.mode-tag.red  { color:var(--red); }

.opponent-grid h2 { font:700 24px/1 "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.01em; margin:0 0 8px; color:var(--ink); }
.opponent-grid p  { font-size:13px; color:var(--muted); margin:0; line-height:1.6; }

/* Difficulty picker */
.difficulty-picker { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.diff-btn { display:flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--line); background:#fff; cursor:pointer; font-family:inherit; transition:border-color .15s,background .15s; }
.diff-btn strong { font-size:13px; font-weight:700; color:var(--ink); }
.diff-btn small   { font-size:11px; color:var(--muted); }
.diff-btn .diff-icon { font-size:12px; }
.diff-btn:hover   { border-color:var(--ink); }
.diff-btn.active  { border-color:var(--green); background:#f0fdf4; }
.diff-btn.active strong { color:var(--green); }

/* Dark btn (bot start) */
.dark-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 22px; background:var(--ink); color:#fff; font-size:13px; font-weight:700; text-decoration:none; border:none; cursor:pointer; margin-top:auto; transition:background .15s; align-self:flex-start; }
.dark-btn:hover { background:#2a2e2c; }

/* Queue status (searching state) */
.queue-status { display:flex; align-items:center; gap:20px; padding:20px 24px; border:1px solid var(--line); background:#fff; margin-top:8px; }
.queue-status strong { font-size:15px; font-weight:700; color:var(--ink); display:block; margin-bottom:3px; }
.queue-count-label { font-size:13px; color:var(--muted); margin:0; }
.queue-spinner { width:28px; height:28px; border:3px solid var(--line); border-top-color:var(--green); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }
.cancel-queue { margin-left:auto; font-size:13px; color:var(--red); font-weight:600; background:none; border:none; cursor:pointer; text-decoration:underline; padding:0; }

/* Responsive */
@media(max-width:640px) {
  .opponent-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRACK//ID — training.php (Entraînement bot)
   ═══════════════════════════════════════════════════════════════════════════ */

.training-page { max-width: 900px; margin: 0 auto; padding: 32px clamp(20px,5vw,40px) 80px; display:flex; flex-direction:column; gap:28px; }

/* Header row */
.training-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.training-head h1 { font:700 clamp(28px,3.5vw,40px)/1 "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:-.02em; margin:0 0 4px; color:var(--ink); }

/* Score block */
.training-score { display:flex; align-items:baseline; gap:8px; background:var(--soft); border:1px solid var(--line); padding:12px 20px; flex-shrink:0; }
.training-score span { font:700 10px "DM Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.training-score strong { font:700 36px/1 "Barlow Condensed",sans-serif; color:var(--ink); letter-spacing:-.02em; }
.training-score small { font:700 9px "DM Sans",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* Layout: question left, rules right */
.training-layout { display:grid; grid-template-columns:1fr 220px; gap:24px; align-items:start; }

/* Timer bar */
.timer-line { height:4px; background:var(--line); margin-bottom:20px; overflow:hidden; }
.timer-line i { display:block; height:100%; background:var(--green); width:100%; transform-origin:left; transition:width linear; }

/* Cover art */
.cover-art { width:160px; height:160px; margin:0 auto 20px; background:var(--soft); border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; }
.cover-art img { width:100%; height:100%; object-fit:cover; display:block; }
.cover-art span { font:700 48px/1 "Barlow Condensed",sans-serif; color:var(--muted); }

/* Question */
.question-zone { background:#fff; border:1px solid var(--line); padding:28px 28px 24px; }
.question-zone [data-question-label] { font:700 9px "DM Sans",sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; }
.question-zone h2 { font:700 clamp(20px,2.5vw,28px)/1.1 "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:-.01em; color:var(--ink); margin:0 0 20px; }

/* Answer grid */
.answer-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.answer-grid button { padding:12px 16px; background:#fff; border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; text-align:left; transition:border-color .12s,background .12s; line-height:1.4; }
.answer-grid button:hover { border-color:var(--ink); }
.answer-grid button.correct { background:#d1fae5; border-color:#34d399; color:#065f46; }
.answer-grid button.wrong   { background:#fee2e2; border-color:#f87171; color:#991b1b; }
.answer-grid button:disabled { cursor:default; }

/* Feedback */
.answer-feedback { margin-top:16px; min-height:28px; font-size:14px; font-weight:600; color:var(--ink); }
.answer-feedback.ok  { color:var(--green); }
.answer-feedback.err { color:var(--red); }

/* Aside rules */
.training-layout aside { background:#fff; border:1px solid var(--line); padding:20px 22px; display:flex; flex-direction:column; gap:14px; }
.training-layout aside ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.training-layout aside li { display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:6px 0; border-bottom:1px solid var(--line); }
.training-layout aside li:last-child { border-bottom:none; }
.training-layout aside li b { font-weight:700; color:var(--ink); }
.training-layout aside li span { color:var(--muted); font-size:12px; }
.training-layout aside p { font-size:12px; color:var(--muted); margin:0; line-height:1.55; }
.wrong-rule b,.wrong-rule span { color:var(--red) !important; }

/* Difficulty badge */
.diff-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; font:700 11px "DM Sans",sans-serif; border:1px solid var(--line); letter-spacing:.04em; }
.diff-badge.diff-easy   { background:#f0fdf4; border-color:#34d399; color:#065f46; }
.diff-badge.diff-normal { background:#fefce8; border-color:#fbbf24; color:#92400e; }
.diff-badge.diff-hard   { background:#fff1f2; border-color:#f87171; color:#991b1b; }

/* Results screen */
.training-results { text-align:center; padding:60px 24px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.training-results h2 { font:700 clamp(32px,4vw,52px)/1 "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:-.02em; margin:0; color:var(--ink); }
.training-results strong { font:700 72px/1 "Barlow Condensed",sans-serif; color:var(--green); letter-spacing:-.03em; }
.training-results span { font-size:14px; color:var(--muted); }
.training-results > div { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px; }

/* Responsive */
@media(max-width:640px) {
  .training-layout { grid-template-columns:1fr; }
  .training-layout aside { order:-1; }
  .answer-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRACK//ID — ranked.php (Matchmaking compétitif)
   ═══════════════════════════════════════════════════════════════════════════ */

.ranked-queue-page {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: 1fr 340px;
  align-items: center;
  gap: 60px;
  padding: 60px clamp(24px,7vw,110px);
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
/* Subtle grid texture */
.ranked-queue-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(255,255,255,.03) 47px, rgba(255,255,255,.03) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(255,255,255,.03) 47px, rgba(255,255,255,.03) 48px);
  pointer-events: none;
}

/* Copy block */
.ranked-queue-copy { position:relative; z-index:2; }
.ranked-queue-copy .eyebrow { color:var(--lime); margin-bottom:16px; }
.ranked-queue-copy h1 {
  font: 700 clamp(52px,6vw,80px)/.88 "Barlow Condensed",sans-serif;
  text-transform: uppercase;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 20px;
}
.ranked-queue-copy > p { font-size:15px; color:rgba(255,255,255,.55); line-height:1.7; margin:0 0 28px; max-width:480px; }

/* Rules row */
.ranked-rules { display:flex; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.ranked-rules span { font-size:13px; color:rgba(255,255,255,.5); }
.ranked-rules span b { font-size:18px; font-weight:700; color:#fff; margin-right:4px; }
.ranked-rules span b:first-child { color:var(--lime); }

/* ELO orbit widget */
.elo-orbit {
  position: relative;
  z-index: 2;
  width: 260px;
  height: 260px;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.elo-orbit span { font:700 9px "DM Sans",sans-serif; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.elo-orbit strong { font:700 64px/1 "Barlow Condensed",sans-serif; color:#fff; letter-spacing:-.03em; }
.elo-orbit small { font-size:11px; color:rgba(255,255,255,.35); letter-spacing:.06em; }

/* Orbit rings */
.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  animation: orbit-spin linear infinite;
}
.orbit-ring::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
}
.orbit-ring.one { width:220px; height:220px; top:50%; left:50%; transform:translate(-50%,-50%); animation-duration:8s; }
.orbit-ring.two { width:300px; height:300px; top:50%; left:50%; transform:translate(-50%,-50%); animation-duration:14s; animation-direction:reverse; border-color:rgba(255,255,255,.04); }
.orbit-ring.two::after { background:rgba(255,255,255,.25); width:6px; height:6px; }
@keyframes orbit-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* Queue status — dark variant */
.dark-status {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: rgba(10,11,11,.92);
  border-top: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  padding: 16px clamp(24px,7vw,110px);
  display: flex;
  align-items: center;
  gap: 20px;
}
.dark-status strong { color:#fff; }
.dark-status .queue-count-label { color:rgba(255,255,255,.5); }
.dark-status .cancel-queue { color:rgba(255,255,255,.45); }
.dark-status .cancel-queue:hover { color:#fff; }

/* Responsive */
@media(max-width:800px) {
  .ranked-queue-page { grid-template-columns:1fr; min-height:auto; padding:60px 24px 80px; gap:40px; }
  .elo-orbit { justify-self:start; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MISSING STYLES — Bracket builder, Daily pronos, Leaderboard, Trophy banner
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── CDM Trophy Banner (home page) ──────────────────────────────────────── */
.cdm-trophy-banner{position:relative;overflow:hidden;background:linear-gradient(135deg,#07130f 0%,#0f2a1c 60%,#1a4a2e 100%);border:1px solid rgba(100,200,120,.18);cursor:pointer;display:flex;align-items:center;gap:24px;padding:28px 32px;transition:transform .15s,box-shadow .15s}
.cdm-trophy-banner:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.cdm-trophy-glow{position:absolute;right:120px;top:50%;transform:translateY(-50%);width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(90,200,100,.15) 0%,transparent 70%);pointer-events:none}
.cdm-trophy-img{width:100px;height:auto;flex-shrink:0;filter:drop-shadow(0 0 20px rgba(90,210,100,.4));z-index:1}
.cdm-trophy-text{display:flex;flex-direction:column;gap:6px;z-index:1}
.cdm-trophy-label{font-size:9px;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.55);text-transform:uppercase}
.cdm-trophy-prize{font-size:20px;font-weight:800;color:#fff;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;line-height:1.1}
.cdm-trophy-prize em{color:#7ae87a;font-style:normal}
.cdm-trophy-cta{font-size:11px;font-weight:600;color:rgba(255,255,255,.6);margin-top:2px}

/* ─── Bracket view switch ─────────────────────────────────────────────────── */
.bracket-view-switch{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.bracket-view-switch button{display:flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--line);background:#fff;font-size:11px;font-weight:600;cursor:pointer;color:var(--muted);transition:all .12s}
.bracket-view-switch button:hover{border-color:var(--green);color:var(--green)}
.bracket-view-switch button.active{background:var(--green);border-color:var(--green);color:#fff}

/* ─── Bracket builder layout ──────────────────────────────────────────────── */
.bracket-builder{display:flex;flex-direction:column;gap:0}
.bracket-builder-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.bracket-round-tabs{display:flex;gap:4px;flex-wrap:wrap}
.bracket-round-tabs button{display:flex;flex-direction:column;align-items:center;padding:8px 14px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:all .12s;min-width:90px}
.bracket-round-tabs button span{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bracket-round-tabs button b{font:800 18px "Barlow Condensed",sans-serif;color:#1a2e22}
.bracket-round-tabs button.active{background:var(--green);border-color:var(--green)}
.bracket-round-tabs button.active span,.bracket-round-tabs button.active b{color:#fff}
.bracket-reset{border:1px solid var(--line);background:#fff;padding:8px 14px;font-size:10px;font-weight:700;color:#c44;cursor:pointer;letter-spacing:.08em;text-transform:uppercase;transition:all .12s}
.bracket-reset:hover{background:#c44;color:#fff;border-color:#c44}
.bracket-save-note{font-size:10px;color:var(--muted);margin-top:8px;text-align:center}

.bracket-builder-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;align-items:start}
.team-bank{background:#fff;border:1px solid var(--line);position:sticky;top:80px;max-height:calc(100vh - 120px);display:flex;flex-direction:column;overflow:hidden}
.team-bank-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px}
.team-bank-head span{font-size:8px;font-weight:700;letter-spacing:.15em;color:var(--muted);text-transform:uppercase}
.team-bank-head strong{display:block;font-size:12px;color:#1a2e22;margin-top:2px}
.team-bank-head button{border:0;background:transparent;font-size:20px;color:var(--muted);cursor:pointer;padding:0 4px;line-height:1}
.team-search{border:0;border-bottom:1px solid var(--line);padding:10px 14px;font-size:12px;width:100%;outline:none;background:#fafcfb}
.team-bank-list{overflow-y:auto;flex:1}
.team-bank-list button{width:100%;display:flex;align-items:center;gap:10px;padding:9px 14px;border:0;border-bottom:1px solid var(--line);background:#fff;cursor:pointer;text-align:left;transition:background .1s}
.team-bank-list button:hover,.team-bank-list button.active{background:#edf6f0}
.team-bank-list button.active{box-shadow:inset 3px 0 var(--green)}
.team-bank-list button span{flex:1;font-size:12px;font-weight:600;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase}
.team-bank-list button small{font-size:8px;color:var(--muted);font-weight:700;letter-spacing:.1em}

.bracket-stage-card{background:#fff;border:1px solid var(--line)}
.bracket-stage-card header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.bracket-stage-card header span{font-size:8px;font-weight:700;letter-spacing:.18em;color:var(--green);text-transform:uppercase}
.bracket-stage-card header h2{font-size:22px;font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;margin-top:2px}

.bracket-slot-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:20px}
.bracket-drop-slot{width:100%;border:2px dashed var(--line);background:#fff;padding:0;cursor:pointer;transition:border-color .12s,background .12s;text-align:left;min-height:54px;display:flex;align-items:center}
.bracket-drop-slot.ready{border-color:var(--green);background:#f5fbf6}
.bracket-drop-slot.filled{border:1px solid rgba(60,160,80,.25);background:#edf6f0}
.bracket-drop-slot:not(.filled):hover{border-color:var(--green);background:#f0faf2}
.bracket-slot-number{font-size:8px;font-weight:700;letter-spacing:.15em;color:var(--muted);text-transform:uppercase;margin-bottom:6px}
.bracket-picked-team{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#edf6f0;cursor:pointer;transition:background .1s;width:100%;min-width:0}
.bracket-picked-team:hover{background:#dff0e5}
.bracket-picked-team span{flex:1;font:600 13px "Barlow Condensed",sans-serif;text-transform:uppercase}
.bracket-picked-team small{font-size:8px;color:var(--muted);letter-spacing:.1em}
.bracket-remove{border:0;background:transparent;color:#c44;font-size:16px;cursor:pointer;padding:0 4px;margin-left:auto;opacity:.6;transition:opacity .1s}
.bracket-remove:hover{opacity:1}

/* Slot vacante */
.bracket-slot-empty{display:flex;align-items:center;justify-content:center;padding:14px;border:2px dashed var(--line);color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .12s;min-height:48px}
.bracket-slot-empty:hover,.bracket-slot-empty.armed{border-color:var(--green);color:var(--green);background:#f0faf2}

/* Round blueprint (32e de finale) */
.round-blueprint-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:16px}
.round-blueprint-card{background:#fff;border:1px solid var(--line);overflow:hidden}
.round-blueprint-card header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--soft);border-bottom:1px solid var(--line)}
.round-blueprint-card header span{font-size:9px;font-weight:800;letter-spacing:.12em;color:#1a2e22;text-transform:uppercase}
.round-blueprint-card header small{font-size:8px;color:var(--muted)}
.round-blueprint-head{padding:6px 12px 0;font-size:8px;color:var(--muted);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.round-blueprint-team{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line)}
.round-blueprint-team:last-child{border-bottom:0}
.round-blueprint-team span{font:600 12px "Barlow Condensed",sans-serif;text-transform:uppercase;flex:1;color:#1a2e22}
.round-blueprint-team .muted{color:var(--muted);font-style:italic}
.round-blueprint-cta{display:flex;align-items:center;gap:6px;padding:10px 12px;font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--green);text-transform:uppercase;cursor:pointer;border-top:1px solid var(--line)}

/* ─── Daily pronos (dj-*) ────────────────────────────────────────────────── */
.dj-page{max-width:760px;margin:0 auto}
.dj-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.dj-hero-text h1{font-size:52px;font-family:"Barlow Condensed",sans-serif;font-weight:900;text-transform:uppercase;line-height:1;color:#1a2e22}
.dj-hero-text h1 em{color:var(--green);font-style:normal}
.dj-hero-text p{font-size:13px;color:var(--muted);margin-top:8px;max-width:420px}
.dj-hero-counter{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.dj-hero-pill{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid var(--line)}
.dj-hero-pill strong{font-size:28px;font-family:"Barlow Condensed",sans-serif;font-weight:900;color:var(--green)}
.dj-hero-pill span{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.dj-hero-pill.dj-hero-pill--pronos{background:var(--green)}
.dj-hero-pill.dj-hero-pill--pronos strong,.dj-hero-pill.dj-hero-pill--pronos span{color:#fff}
.dj-guest{padding:48px 24px;text-align:center;background:#fff;border:1px solid var(--line)}
.dj-guest p{font-size:14px;color:var(--muted);margin-bottom:16px}
.dj-error{padding:32px;text-align:center;color:#c44;font-size:12px}

.dj-grid{display:flex;flex-direction:column;gap:16px}
.dj-day-separator{display:flex;align-items:center;gap:12px;margin:8px 0 0;color:var(--muted);font:700 10px "Barlow Condensed",sans-serif;letter-spacing:.12em;text-transform:uppercase}.dj-day-separator::before,.dj-day-separator::after{content:"";flex:1;height:1px;background:var(--line)}
.dj-card{background:#fff;border:1px solid var(--line);overflow:hidden;transition:box-shadow .15s}
.dj-card:hover{box-shadow:0 4px 20px rgba(15,34,23,.08)}
.dj-card header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--soft);border-bottom:1px solid var(--line)}
.dj-card header span{font-size:8px;font-weight:700;letter-spacing:.15em;color:var(--muted);text-transform:uppercase}
.dj-card header small{font-size:8px;color:var(--muted)}
.dj-card header time{font-size:9px;font-weight:700;color:var(--green)}
.dj-card.dj-card--locked{opacity:.8}
.dj-card.dj-card--locked header{background:#f7faf8}
.dj-card.dj-card--filled{border-color:rgba(60,160,80,.35)}
.dj-card.dj-card--filled header{background:#edf6f0}

.dj-duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:20px 24px}
.dj-team{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.dj-team--home{align-items:flex-start;text-align:left}
.dj-team--away{align-items:flex-end;text-align:right}
.dj-team strong{font:800 15px "Barlow Condensed",sans-serif;text-transform:uppercase;color:#1a2e22}
.dj-team small{font-size:8px;font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}

.dj-inputs{display:flex;flex-direction:column;align-items:center;gap:6px}
.dj-input-row{display:flex;align-items:center;gap:8px}
.dj-input-row input{width:56px;height:52px;text-align:center;font-size:24px;font-weight:800;font-family:"Barlow Condensed",sans-serif;border:2px solid var(--line);background:#fff;outline:none;transition:border-color .12s;-moz-appearance:textfield;appearance:textfield}
.dj-input-row input::-webkit-inner-spin-button,.dj-input-row input::-webkit-outer-spin-button{-webkit-appearance:none}
.dj-input-row input:focus{border-color:var(--green)}
.dj-input-row input.dj-input--locked{background:#f5f7f6;color:var(--muted);border-color:var(--line)}
.dj-input-row input.dj-input--active{border-color:var(--green);background:#f0faf2}
.dj-colon{font-size:22px;font-weight:800;color:var(--muted);font-family:"Barlow Condensed",sans-serif;line-height:1}

.dj-odds{padding:0 24px 14px}
.dj-odds-track{display:flex;height:20px;overflow:hidden;border-radius:2px;background:var(--line)}
.dj-odds-h{background:var(--green);display:flex;align-items:center;justify-content:flex-start;padding:0 6px;min-width:0;overflow:hidden;transition:width .4s}
.dj-odds-h span{font-size:8px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dj-odds-d{background:#a4b5ab;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:width .4s}
.dj-odds-d span{font-size:8px;font-weight:700;color:#fff;white-space:nowrap}
.dj-odds-a{background:#3a6b4e;display:flex;align-items:center;justify-content:flex-end;padding:0 6px;overflow:hidden;transition:width .4s}
.dj-odds-a span{font-size:8px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.dj-save-row{display:flex;align-items:center;justify-content:space-between;padding:12px 24px 16px;border-top:1px solid var(--line);gap:12px;flex-wrap:wrap}
.dj-save-row small{font-size:10px;color:var(--muted)}
.predict-global-save-note{text-align:center;font-size:10px;color:var(--muted);margin-top:12px;padding:10px}

/* ─── Leaderboard ─────────────────────────────────────────────────────────── */
.leaderboard-page{max-width:860px;margin:0 auto}
.leaderboard-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.leaderboard-hero h1{font-size:52px;font-family:"Barlow Condensed",sans-serif;font-weight:900;text-transform:uppercase;line-height:1;color:#1a2e22}
.leaderboard-hero h1 em{color:var(--green);font-style:normal}
.leaderboard-hero p{font-size:13px;color:var(--muted);margin-top:8px;max-width:460px}
.leaderboard-my-rank{background:#fff;border:1px solid var(--line);padding:16px 20px;text-align:center;flex-shrink:0;min-width:140px}
.leaderboard-my-rank span{display:block;font-size:8px;font-weight:700;letter-spacing:.15em;color:var(--muted);text-transform:uppercase;margin-bottom:4px}
.leaderboard-my-rank strong{display:block;font-size:36px;font-family:"Barlow Condensed",sans-serif;font-weight:900;color:var(--green);line-height:1}
.leaderboard-my-rank small{font-size:9px;color:var(--muted);margin-top:3px}

.leaderboard-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.leaderboard-tabs button{display:flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid var(--line);background:#fff;cursor:pointer;text-align:left;transition:all .12s;flex:1;min-width:180px}
.leaderboard-tabs button:hover{border-color:var(--green)}
.leaderboard-tabs button.active{border-color:var(--green);background:#edf6f0}
.leaderboard-tabs button svg{color:var(--green);flex-shrink:0}
.leaderboard-tabs button span{display:flex;flex-direction:column;gap:2px}
.leaderboard-tabs button strong{font-size:13px;font-weight:700;color:#1a2e22}
.leaderboard-tabs button small{font-size:10px;color:var(--muted)}

.leaderboard-status{padding:40px;text-align:center;color:var(--muted);font-size:13px}
.leaderboard-status.error{color:#c44}
.leaderboard-note{font-size:10px;color:var(--muted);text-align:center;margin-top:12px;padding:8px}

.leaderboard-table{background:#fff;border:1px solid var(--line);overflow:hidden}
.leaderboard-head{display:grid;padding:10px 16px;background:var(--soft);border-bottom:1px solid var(--line);font-size:8px;font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.leaderboard-head.daily{grid-template-columns:36px minmax(0,1fr) 60px 60px 70px 60px}
.leaderboard-head.bracket{grid-template-columns:36px minmax(0,1fr) 90px 60px 60px}
/* leaderboard-row = la vraie ligne de données */
.leaderboard-row{display:grid;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);transition:background .1s}
.leaderboard-row.daily{grid-template-columns:36px minmax(0,1fr) 60px 60px 70px 60px}
.leaderboard-row.bracket{grid-template-columns:36px minmax(0,1fr) 90px 60px 60px}
.leaderboard-row:last-child{border-bottom:0}
.leaderboard-row:hover{background:#fafcfb}
.leaderboard-row.me{background:#edf6f0}
.leaderboard-row>span{font-size:12px;font-weight:600;text-align:center;color:#1a2e22}
.leaderboard-rank{font:800 14px "Barlow Condensed",sans-serif;color:var(--muted);text-align:center}
.leaderboard-rank.r1{color:#f0b429}
.leaderboard-rank.r2{color:#a0a4a8}
.leaderboard-rank.r3{color:#c07240}
/* leaderboard-player = la cellule joueur (avatar + nom) */
.leaderboard-player{display:flex;align-items:center;gap:10px;overflow:hidden;text-decoration:none;color:inherit;border-radius:6px;transition:background .12s}
.leaderboard-player:hover{background:rgba(7,93,59,.06)}
.leaderboard-player:hover strong{color:var(--green);text-decoration:underline}
.leaderboard-player img{width:30px;height:30px;min-width:30px;max-width:30px;min-height:30px;max-height:30px;border-radius:50%;object-fit:cover;flex:0 0 30px}
.leaderboard-player b{width:30px;height:30px;min-width:30px;max-width:30px;border-radius:50%;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:0 0 30px}
.leaderboard-player>span{display:flex;flex-direction:column;gap:1px;overflow:hidden}
.leaderboard-player strong{font-size:12px;font-weight:700;color:#1a2e22;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leaderboard-player small{font-size:8px;font-weight:800;letter-spacing:.12em;color:var(--green);text-transform:uppercase}
.leaderboard-points{font:800 15px "Barlow Condensed",sans-serif !important;color:var(--green) !important}
.leaderboard-champion{font-size:11px;font-weight:600;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;color:#1a2e22;text-align:center}

/* Player cell inside table row */


/* ─── Predict page (pronos complets) ─────────────────────────────────────── */
.predict-page-head{margin-bottom:28px}
.predict-progress-card{background:#fff;border:1px solid var(--line);padding:20px 24px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.predict-progress-card strong{font-size:22px;font-family:"Barlow Condensed",sans-serif;font-weight:800}
.predict-progress-card span{font-size:11px;color:var(--muted)}
.prediction-group-filters{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.prediction-group-filters button{padding:6px 12px;border:1px solid var(--line);background:#fff;font-size:10px;font-weight:700;cursor:pointer;letter-spacing:.08em;transition:all .12s}
.prediction-group-filters button.active{background:var(--green);border-color:var(--green);color:#fff}
.prediction-phase-tabs{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.prediction-phase-tabs button{padding:7px 14px;border:1px solid var(--line);background:#fff;font-size:10px;font-weight:700;cursor:pointer;transition:all .12s}
.prediction-phase-tabs button.active{border-color:var(--green);color:var(--green)}
.prediction-phase-empty{padding:40px;text-align:center;color:var(--muted);font-size:13px}
.prediction-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.prediction-score-line{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:12px;font-weight:700;border-top:1px solid var(--line);color:var(--muted)}
.prediction-score-line strong{color:var(--green)}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:760px){
  .bracket-builder-layout{grid-template-columns:1fr}
  .team-bank{position:static;max-height:280px}
  .dj-duel{padding:14px 16px;gap:10px}
  .dj-input-row input{width:48px;height:44px;font-size:20px}
  .dj-save-row{padding:10px 16px}
  .leaderboard-hero{flex-direction:column}
  .leaderboard-tabs{flex-direction:column}
  .leaderboard-tabs button{min-width:unset}
  .leaderboard-head.daily,.leaderboard-row.daily{grid-template-columns:32px minmax(0,1fr) 50px 50px 60px 50px}
  .leaderboard-head.bracket,.leaderboard-row.bracket{grid-template-columns:32px minmax(0,1fr) 70px 50px 50px}
  .dj-hero-text h1,.leaderboard-hero h1{font-size:38px}
  .cdm-trophy-banner{padding:18px 20px;gap:14px}
  .cdm-trophy-img{width:70px}
  .cdm-trophy-prize{font-size:16px}
  .round-blueprint-grid{grid-template-columns:1fr}
}

/* Match status badges */
.match-status-done{display:inline-block;font-size:8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#888;background:#f0f2f0;padding:3px 7px;border-radius:2px}
.match-status-live{display:inline-block;font-size:8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:#e03030;padding:3px 7px;border-radius:2px;animation:pulse-live 1.2s infinite}
@keyframes pulse-live{0%,100%{opacity:1}50%{opacity:.6}}

/* Question cover (quick/ranked) — visuel vinyle générique */
.question-cover { display:grid; place-items:center; overflow:hidden; border-radius:8px; }
.question-cover .cover-vinyl, .cover-art .cover-vinyl { width:100%; height:100%; object-fit:cover; display:block; }

/* ─── Actualités (Actualités CDM 2026 - articles auto-générés) ──────────────── */
.news-list{display:flex;flex-direction:column;gap:20px}
.news-card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:22px 24px;border-radius:2px}
.news-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.news-tag{font:700 9px "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--green);background:var(--soft);padding:4px 9px;border-radius:2px}
.news-card-top time{font-size:11px;color:var(--muted)}
.news-card-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin-bottom:14px}
.news-team{display:flex;align-items:center;gap:10px;min-width:0}
.news-team strong{font:700 14px "Barlow Condensed",sans-serif;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.news-team:last-child{justify-content:flex-end;text-align:right}
.news-score-box{display:flex;align-items:center;justify-content:center;font:900 26px "Barlow Condensed",sans-serif;color:var(--ink);background:var(--soft);border-radius:2px;padding:6px 16px;min-width:78px}
.news-score-box i{opacity:.4;font-style:normal;margin:0 4px}
.news-scorers{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.news-scorer-chip{font-size:11px;font-weight:700;color:var(--green);background:#eaf6ef;border:1px solid rgba(7,93,59,.15);border-radius:50px;padding:4px 12px}
.news-text{font-size:13.5px;line-height:1.7;color:var(--ink);margin:0 0 10px}

/* ─── Notifications en direct (toasts) ──────────────────────────────────────── */
.notif-stack{position:fixed;top:18px;right:18px;z-index:1000;display:flex;flex-direction:column;gap:10px;max-width:340px;width:calc(100vw - 36px)}
.notif-toast{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);box-shadow:var(--shadow);border-radius:4px;padding:14px 16px;animation:notif-in .35s ease-out}
.notif-toast.goal{border-left-color:var(--lime)}
.notif-toast.finished{border-left-color:var(--green)}
.notif-icon{font-size:22px;line-height:1;flex-shrink:0}
.notif-body{flex:1;min-width:0}
.notif-body strong{display:block;font:800 11px "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:4px}
.notif-body p{margin:0;font:700 14px "Barlow Condensed",sans-serif;text-transform:uppercase;color:var(--ink)}
.notif-body small{display:block;margin-top:4px;font-size:11px;color:var(--muted)}
.notif-close{flex-shrink:0;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.notif-close:hover{color:var(--ink)}
@keyframes notif-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}

@media(max-width:720px){
  .notif-stack{top:auto;bottom:18px;right:12px;left:12px;max-width:none;width:auto}
  .news-card-score{grid-template-columns:1fr;text-align:center;gap:8px}
  .news-team:last-child{justify-content:center;text-align:center}
  .news-score-box{justify-self:center}
}

/* ── Footer — Crédits & Contact ─────────────────────────────────────────── */
footer .footer-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
footer .footer-center p { margin: 0; }
footer .footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.footer-copy  { white-space: nowrap; }
.footer-credit { font-size: 10px; color: #6b7a70; }
.footer-credit strong { color: #9fb0a6; font-weight: 700; }
.footer-ntng  { color: #9fb0a6; font-weight: 600; }
.footer-contact { font-size: 10px; color: #6b7a70; text-align: right; }
footer a,
footer .footer-credit a,
footer .footer-contact a {
  color: #9fb0a6;
  text-decoration: none;
  transition: color .2s;
}
footer a:hover,
footer .footer-credit a:hover,
footer .footer-contact a:hover {
  color: #c8dfc0;
  text-decoration: underline;
}
@media (max-width: 720px) {
  footer .footer-right { align-items: center; }
  .footer-contact, .footer-credit { text-align: center; }
}