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

:root { --ink:#080a0e; --paper:#eef0ed; --muted:#959da6; --line:#27303a; --blue:#0878ff; --cyan:#16dbff; --yellow:#d8d37b; --white:#f5f7f5; --display:'Barlow Condensed', Impact, sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
/* Le HTML "hidden" doit toujours l'emporter, même sur un élément dont une
   classe (.admin-app, .login-panel, .btn…) déclare son propre "display".
   Sans cette règle, ces éléments restent visibles malgré l'attribut hidden. */
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--white); font-family:var(--mono); font-size:12px; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.noise { position:fixed; z-index:20; inset:0; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.cursor-glow { position:fixed; z-index:1; width:380px; height:380px; border-radius:50%; pointer-events:none; opacity:.11; background:radial-gradient(circle, #0878ff, transparent 65%); transform:translate(-50%,-50%); transition:opacity .3s; }
.site-header { position:absolute; z-index:10; top:0; left:0; right:0; height:94px; display:flex; align-items:center; gap:56px; padding:0 clamp(24px,5vw,80px); border-bottom:1px solid rgba(255,255,255,.12); }
.brand { display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand-logo { width:38px; height:38px; object-fit:contain; filter:grayscale(1) brightness(0) invert(1); mix-blend-mode:screen; }
.brand-name { font-family:var(--display); font-size:24px; font-weight:800; letter-spacing:2px; }
.brand-name span { color:var(--blue); font-family:var(--mono); font-size:8px; vertical-align:top; margin-left:3px; }
.main-nav { display:flex; align-items:center; gap:30px; color:#8f969d; font-size:10px; text-transform:uppercase; letter-spacing:.8px; }
.main-nav a { position:relative; padding:12px 0; transition:color .2s; }.main-nav a:hover,.main-nav a.active { color:var(--white); }.main-nav a.active:after { content:''; position:absolute; height:2px; background:var(--blue); left:0; right:0; bottom:0; }
.header-cta { margin-left:auto; border:1px solid #49515b; padding:14px 17px; font-size:10px; text-transform:uppercase; transition:background .2s,border .2s; }.header-cta:hover { background:var(--blue); border-color:var(--blue); }.header-cta span,.button span,.arrow-link span,.mail-link span { color:var(--blue); margin-left:13px; font-size:15px; }.header-cta:hover span { color:white; }
.menu-toggle { display:none; margin-left:auto; border:0; color:white; background:transparent; width:42px; height:42px; }.menu-toggle span { display:block; height:1px; width:21px; background:white; margin:6px auto; }
.section-pad { padding-left:clamp(24px,8vw,128px); padding-right:clamp(24px,8vw,128px); }
.hero { min-height:760px; height:100vh; max-height:1000px; position:relative; display:grid; grid-template-columns:47% 53%; align-items:center; padding-top:94px; overflow:hidden; background:radial-gradient(ellipse at 75% 47%,#0b2340 0%,#080a0e 45%,#080a0e 75%); }
.hero:after { content:''; position:absolute; inset:94px 0 0; opacity:.25; background:linear-gradient(115deg,transparent 50%,rgba(13,119,255,.2) 50.1%,transparent 50.3%), linear-gradient(70deg,transparent 54%,rgba(13,119,255,.12) 54.1%,transparent 54.25%); pointer-events:none; }
.hero-copy { position:relative; z-index:2; padding-bottom:27px; }.eyebrow,.section-kicker,.game-tag,.news-category,.visual-label,.side-rail { font-family:var(--mono); font-size:9px; letter-spacing:1.5px; text-transform:uppercase; }.eyebrow { display:flex; align-items:center; gap:11px; color:#c0c7ce; }.pulse-dot { width:6px; height:6px; background:var(--cyan); border-radius:50%; box-shadow:0 0 12px var(--cyan); }.eyebrow-line { display:inline-block; width:28px; border-top:1px solid #64707b; margin-left:4px; }
h1,h2,h3,p { margin-top:0; } h1 { margin:29px 0 27px; font-family:var(--display); font-size:clamp(88px,11.7vw,190px); line-height:.77; letter-spacing:2px; font-weight:800; }.hero h1 em,h2 em,h3 em { color:transparent; -webkit-text-stroke:1px currentColor; font-style:normal; }.hero h1 em { color:transparent; -webkit-text-stroke:1px var(--white); }.blue-dot { color:var(--blue); -webkit-text-stroke:0; }
.hero-intro { color:#a9b1b9; max-width:370px; line-height:1.8; font-size:11px; }.hero-actions { display:flex; align-items:center; gap:27px; margin-top:34px; }.button { display:inline-flex; align-items:center; padding:17px 22px; text-transform:uppercase; font-size:10px; letter-spacing:1px; cursor:pointer; border:0; font-family:var(--mono); }.button-primary { color:white; background:var(--blue); box-shadow:0 9px 30px rgba(0,101,255,.2); transition:transform .2s,background .2s; }.button-primary:hover { background:#2293ff; transform:translateY(-3px); }.button-primary span { color:white; }.text-link,.arrow-link { text-transform:uppercase; letter-spacing:1px; font-size:10px; }.text-link { color:#d2d7db; }.text-link span { color:var(--blue); font-size:16px; margin-left:10px; }
.hero-visual { position:relative; z-index:2; height:100%; min-height:580px; }
.hero-banner { position:absolute; z-index:-1; inset:15% 0 10% 5%; width:95%; height:75%; object-fit:cover; object-position:center; opacity:.26; mix-blend-mode:screen; filter:saturate(1.25) contrast(1.15) brightness(.8); mask-image:linear-gradient(to right,transparent,black 20%,black 80%,transparent); }.visual-grid { position:absolute; inset:10% 0 2% 5%; opacity:.3; background-image:linear-gradient(rgba(26,132,255,.23) 1px,transparent 1px),linear-gradient(90deg,rgba(26,132,255,.23) 1px,transparent 1px); background-size:55px 55px; transform:perspective(700px) rotateX(48deg) rotateZ(-8deg); transform-origin:center bottom; mask-image:linear-gradient(to bottom,transparent,black 34%,black 70%,transparent); }.orb { position:absolute; border-radius:50%; filter:blur(45px); }.orb-one { width:340px; height:340px; left:27%; top:26%; background:#006bff; opacity:.3; }.orb-two { width:140px; height:140px; left:52%; top:16%; background:#03d9ff; opacity:.45; filter:blur(28px); }.hero-v { position:absolute; left:18%; top:16%; color:transparent; font-family:var(--display); font-style:italic; font-weight:900; font-size:min(45vw,570px); line-height:.8; -webkit-text-stroke:2px rgba(26,144,255,.72); text-shadow:0 0 28px rgba(0,136,255,.55); transform:scaleX(.88); }.hero-v:before,.hero-v:after { content:''; position:absolute; background:var(--blue); filter:blur(2px); }.hero-v:before { width:3px; height:115%; left:53%; top:-7%; transform:rotate(21deg); box-shadow:0 0 18px 3px var(--cyan); }.visual-label { position:absolute; color:#b8d6fa; }.label-top { top:24%; right:7%; }.label-bottom { left:16%; bottom:17%; line-height:1.65; color:#91bfff; }.label-bottom strong { color:white; font-size:11px; }.side-rail { position:absolute; right:0; bottom:25%; writing-mode:vertical-rl; color:#657789; }.side-rail span { color:var(--blue); font-size:16px; margin-top:12px; }
.hero-bottom { position:absolute; z-index:3; left:clamp(24px,8vw,128px); right:clamp(24px,8vw,128px); bottom:32px; display:flex; align-items:center; gap:15px; color:#69737e; font-size:10px; }.hero-bottom strong { color:white; }.hero-progress { width:100px; height:1px; background:#36414d; }.hero-progress span { display:block; width:30%; height:2px; background:var(--blue); }.hero-bottom p { margin:0 0 0 auto; }
.ticker { height:72px; overflow:hidden; display:flex; align-items:center; background:var(--blue); color:#07101e; font-family:var(--display); font-size:23px; font-weight:800; letter-spacing:1px; white-space:nowrap; }.ticker-track { display:flex; align-items:center; gap:31px; animation:marquee 22s linear infinite; }.ticker b { font-family:var(--mono); color:white; font-size:14px; }@keyframes marquee { to { transform:translateX(-35%); } }
.manifesto { padding-top:150px; padding-bottom:140px; background:var(--paper); color:var(--ink); }.section-kicker { display:flex; align-items:center; gap:13px; color:#6f7780; }.section-kicker > span:first-child { color:var(--blue); }.kicker-rule { display:inline-block; width:31px; border-top:1px solid #b4bbc0; }.manifesto-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:8%; margin-top:65px; }.manifesto h2,.join-section h2,.contact h2 { font-family:var(--display); font-size:clamp(68px,9vw,140px); font-weight:800; line-height:.78; letter-spacing:1px; margin:0; }.manifesto h2 em,.contact h2 em { -webkit-text-stroke:1px var(--ink); }.manifesto-body { max-width:400px; padding-top:3px; }.large-copy { font-family:var(--display); font-size:31px; line-height:1; font-weight:500; max-width:390px; }.manifesto-body > p:not(.large-copy) { color:#6d747a; line-height:1.9; margin:27px 0 30px; }.arrow-link { display:inline-flex; align-items:center; font-weight:500; }.arrow-link span { font-size:18px; transition:transform .2s; }.arrow-link:hover span { transform:translate(4px,-4px); }.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:12%; border-top:1px solid #cbd0d0; margin-top:115px; padding-top:18px; }.principles div { display:grid; grid-template-columns:30px 1fr; column-gap:13px; }.principles span { grid-row:span 2; color:var(--blue); }.principles strong { font-family:var(--display); font-size:19px; text-transform:uppercase; }.principles p { grid-column:2; color:#81888c; margin:6px 0 0; font-size:10px; }
.dark-section { background:#0e1319; }.teams { padding-top:110px; padding-bottom:140px; }.section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:51px; }.light { color:#8291a1; }.light .kicker-rule { border-color:#3c4957; }.light-link { color:#e0e4e7; }
.team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:15px; }
.team-card { min-width:0; background:#12181f; border:1px solid #232c36; border-radius:14px; padding:24px 22px 20px; display:flex; flex-direction:column; align-items:center; text-align:center; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.tc-header { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tc-header:not(:empty) { margin-bottom:22px; }
.game-tag,.card-number { color:#a6c7eb; }
.game-tag { display:inline-flex; align-items:center; padding:4px 10px; border-radius:20px; background:rgba(255,255,255,.06); color:var(--cyan); font-size:8px; letter-spacing:1.2px; }
.tc-avatar-wrap { position:relative; margin-bottom:16px; }
.team-image { position:relative; width:92px; height:92px; border-radius:50%; overflow:hidden; border:2px solid #232c36; background:#1d2835; transition:border-color .25s ease,transform .3s ease; }
.image-rl { background:radial-gradient(circle at 40% 25%,#31a6ff,transparent 15%),linear-gradient(145deg,#162432,#102949 48%,#080c13); }
.team-symbol { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; color:transparent; font:italic 900 38px/1 var(--display); -webkit-text-stroke:1.5px rgba(71,182,255,.85); text-shadow:0 0 16px rgba(14,130,255,.6); }
.jersey-num { position:absolute; right:-4px; bottom:-4px; background:#0b0d10; border:1px solid #313a44; border-radius:8px; padding:2px 6px; font-family:var(--display); font-size:10px; font-weight:800; letter-spacing:.3px; color:#c7ced4; }
.tc-name { font:800 21px/1.1 var(--display); margin:0 0 4px; letter-spacing:.2px; color:var(--white); }
.tc-name em { color:var(--cyan); -webkit-text-stroke:0; }
.tc-role { margin:0 0 14px; color:#8a929b; font-size:9px; letter-spacing:1.2px; text-transform:uppercase; }
.tc-footer { width:100%; margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }
.card-arrow { display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; color:#69737e; font-size:9px; text-transform:uppercase; letter-spacing:1.2px; transition:color .2s; }
.card-arrow i { font-style:normal; display:inline-block; transition:transform .2s; }
.news { color:var(--ink); background:var(--paper); padding-top:120px; padding-bottom:140px; }.news-list { border-top:1px solid #c4c9c8; }.news-item { min-height:150px; display:grid; grid-template-columns:100px 1fr 2fr 48px; align-items:center; gap:16px; border-bottom:1px solid #c4c9c8; }.news-date span,.news-date strong { display:block; }.news-date span { color:#6e7880; font-size:9px; }.news-date strong { font:700 44px/1 var(--display); }.news-category { color:#747e84; }.news-category span { color:var(--blue); margin:0 8px; }.news-item h3 { margin:0; font:600 26px/.93 var(--display); }.news-item h3 em { -webkit-text-stroke:1px #0a0d11; }.round-arrow { display:grid; place-items:center; width:43px; height:43px; border:1px solid #c6ccca; border-radius:50%; color:var(--blue); font-size:18px; transition:background .2s,color .2s; }.round-arrow:hover { color:white; background:var(--blue); }
.join-section { position:relative; overflow:hidden; text-align:center; padding-top:130px; padding-bottom:150px; background:#101820; }.join-section:before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(0,108,255,.12),transparent); }.join-section > *:not(.join-shape) { position:relative; }.join-section .section-kicker { justify-content:center; }.join-section h2 { font-size:clamp(80px,14vw,210px); margin:74px 0 25px; }.join-section p { color:#87939f; margin-bottom:31px; }.join-shape { position:absolute; width:680px; height:680px; left:50%; top:15%; transform:translateX(-50%); opacity:.12; border:1px solid var(--blue); border-radius:46% 54% 43% 57%; }.join-shape span { position:absolute; inset:0; display:grid; place-items:center; font:italic 900 650px/.7 var(--display); color:transparent; -webkit-text-stroke:1px var(--blue); }
.contact { display:grid; grid-template-columns:1.2fr .8fr; gap:10%; padding-top:120px; padding-bottom:130px; background:var(--blue); }.contact .section-kicker { color:#b8ddff; }.contact .kicker-rule { border-color:#6cb8ff; }.contact h2 { color:white; font-size:clamp(75px,11vw,165px); margin-top:64px; }.contact h2 em { -webkit-text-stroke:1px white; }.contact-details { padding-top:63px; }.contact-details > p { line-height:1.8; color:#cae5ff; }.mail-link { display:inline-block; margin:30px 0 78px; padding-bottom:9px; color:white; border-bottom:1px solid rgba(255,255,255,.5); font-family:var(--display); font-size:27px; }.mail-link span { color:#07101e; }.socials { display:flex; gap:28px; padding-top:17px; border-top:1px solid rgba(255,255,255,.45); }.socials a { color:#d4ebff; font-size:10px; text-transform:uppercase; }.site-footer { min-height:91px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,8vw,128px); background:#080a0e; color:#65717d; font-size:9px; }.site-footer .brand-logo { width:32px; height:32px; }
.site-footer .brand-name { color:white; font-size:21px; }.back-top { color:#c2c9d0; text-transform:uppercase; }.back-top:hover { color:var(--blue); }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; }.reveal.visible { opacity:1; transform:none; }.reveal-delay { transition-delay:.12s; }.reveal-delay-2 { transition-delay:.22s; }
@media (max-width:850px) { .site-header { height:74px; padding:0 22px; }.main-nav { display:none; position:absolute; top:74px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; padding:17px 22px 20px; background:#080a0e; border-bottom:1px solid var(--line); }.main-nav.open { display:flex; }.main-nav a { width:100%; padding:13px 0; }.header-cta { display:none; }.menu-toggle { display:block; }.hero { height:auto; min-height:780px; display:block; padding-top:143px; }.hero-visual { height:385px; min-height:0; margin-top:12px; }.hero-v { left:18%; top:8%; font-size:340px; }.visual-grid { inset:0 0 0 0; }.side-rail { display:none; }.hero-bottom { left:22px; right:22px; bottom:20px; }.manifesto,.news,.teams,.join-section,.contact { padding-top:90px; padding-bottom:90px; }.manifesto-layout,.contact { grid-template-columns:1fr; gap:48px; }.manifesto h2,.contact h2 { font-size:80px; }.principles { gap:22px; margin-top:76px; }.principles div { display:block; }.principles span { display:block; margin-bottom:13px; }.principles p { margin-top:6px; }.team-grid { grid-template-columns:1fr; gap:44px; }.section-heading { align-items:flex-end; }.news-item { grid-template-columns:62px 1fr 43px; gap:11px; padding:24px 0; }.news-category { grid-column:2; grid-row:1; }.news-item h3 { grid-column:2; grid-row:2; font-size:25px; }.round-arrow { grid-column:3; grid-row:1 / span 2; }.contact-details { padding-top:0; }.mail-link { margin:22px 0 55px; font-size:24px; }.join-shape { width:410px; height:410px; top:29%; }.join-shape span { font-size:385px; }.site-footer { padding:27px 22px; min-height:140px; align-items:flex-start; flex-wrap:wrap; gap:22px; }.site-footer p { order:3; width:100%; margin:0; } }
@media (max-width:480px) { h1 { font-size:82px; }.hero-intro { font-size:10px; }.hero-actions { gap:17px; }.button { padding:15px 14px; font-size:9px; }.text-link { font-size:9px; }.manifesto h2,.contact h2 { font-size:66px; }.large-copy { font-size:28px; }.principles { grid-template-columns:1fr; gap:24px; }.principles div { display:grid; }.news-item h3 { font-size:21px; }.section-heading .arrow-link { font-size:8px; }.join-section h2 { font-size:75px; }.socials { gap:14px; } }

/* --- ajouts : indisponible, badges catégorie actu, empty states --- */
.team-card.hidden-slot { display:none; }
.news-category.cat-resultat span { color:#16dbff; }
.empty-state { padding:40px 0; color:#81888c; font-size:11px; }
.dark-section .empty-state { color:#63707d; }

/* --- ajouts : plusieurs groupes de roster, avatar, rang, tracker, bio --- */
.roster-group { margin-bottom:70px; }
.roster-group:last-child { margin-bottom:0; }
.roster-group-heading { display:flex; align-items:baseline; gap:16px; margin-bottom:28px; }
.roster-group-heading h3 { font-family:var(--display); font-size:26px; font-weight:800; letter-spacing:.5px; margin:0; }
.roster-group-heading span { color:#7c8894; font-size:10px; text-transform:uppercase; letter-spacing:1px; }

.team-avatar-img { width:100%; height:100%; object-fit:cover; display:block; }
.rank-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:20px; background:rgba(255,255,255,.06); font-size:8px; letter-spacing:1px; font-weight:700; text-transform:uppercase; color:var(--white); flex-shrink:0; }
.rank-badge .rank-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.team-desc { color:#8b939b; font-size:10px; line-height:1.7; margin:0 0 4px; max-width:230px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.team-desc-empty { color:#5c6570; font-style:italic; }
.tracker-link { display:inline-flex; align-items:center; gap:6px; color:var(--blue); font-size:9px; text-transform:uppercase; letter-spacing:1px; }
.tracker-link:hover { color:var(--cyan); }
.team-card.is-clickable { cursor:pointer; }
.team-card.is-clickable:hover { transform:translateY(-6px); border-color:var(--blue); box-shadow:0 20px 40px rgba(3,8,18,.5); }
.team-card.is-clickable:hover .team-image { border-color:var(--blue); transform:scale(1.05); }
.team-card.is-clickable:hover .card-arrow { color:var(--blue); }
.team-card.is-clickable:hover .card-arrow i { transform:translate(3px,-3px); }

/* --- vitrine des jeux (accueil) --- */
.games-intro { color:#8a929b; max-width:520px; margin:-10px 0 40px; font-size:11px; line-height:1.8; }
.game-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.game-card { position:relative; display:block; border-radius:10px; overflow:hidden; background:#12181f; border:1px solid #232c36; transition:transform .2s,border-color .2s; }
.game-card:hover { transform:translateY(-4px); border-color:var(--blue); }
.game-card-image { position:relative; height:220px; background:linear-gradient(150deg,#182634,#0c1119); display:flex; align-items:center; justify-content:center; }
.game-card-image img { width:100%; height:100%; object-fit:cover; }
.game-card-fallback { font-family:var(--display); font-size:80px; font-style:italic; font-weight:900; color:transparent; -webkit-text-stroke:2px rgba(71,182,255,.5); }
.soon-badge { position:absolute; top:14px; right:14px; background:var(--blue); color:white; font-size:9px; text-transform:uppercase; letter-spacing:1px; padding:5px 10px; border-radius:20px; font-weight:700; }
.game-card-info { padding:18px 20px 22px; }
.game-card-info h3 { font-family:var(--display); font-size:22px; font-weight:800; margin:0 0 6px; }
.game-card-info span { color:#7c8894; font-size:9px; text-transform:uppercase; letter-spacing:1px; }
.game-card.is-soon .game-card-image { opacity:.6; }

/* --- actus cliquables --- */
.news-item { cursor:pointer; transition:background .2s; }
.news-item:hover { background:rgba(8,120,255,.04); }
.news-item:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }

/* --- modale partagée (actu / joueur) --- */
.modal-overlay { position:fixed; inset:0; z-index:100; background:rgba(4,6,9,.78); display:flex; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(3px); }
.modal-overlay[hidden] { display:none; }
.modal-box { position:relative; width:100%; max-width:560px; max-height:88vh; overflow-y:auto; background:#0e1319; border:1px solid var(--line); border-radius:12px; }
.modal-close { position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(8,10,14,.6); color:white; font-size:14px; cursor:pointer; }
.modal-close:hover { background:var(--blue); border-color:var(--blue); }
.modal-banner { width:100%; height:220px; overflow:hidden; background:#182634; }
.modal-banner img { width:100%; height:100%; object-fit:cover; display:block; }
.modal-body { padding:32px; }
.modal-title { font-family:var(--display); font-size:32px; font-weight:800; line-height:1.02; margin:14px 0 18px; }
.modal-text { color:#c3cad0; line-height:1.8; font-size:12px; white-space:pre-line; margin:0 0 22px; }
.modal-player-head { display:flex; gap:18px; align-items:center; padding:32px 32px 0; }
.modal-avatar { width:88px; height:88px; border-radius:50%; border:2px solid var(--line); flex-shrink:0; overflow:hidden; background:#182634; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:32px; color:transparent; -webkit-text-stroke:1px rgba(71,182,255,.7); }
.modal-avatar img { width:100%; height:100%; object-fit:cover; }
.modal-player-name { font-family:var(--display); font-size:26px; font-weight:800; margin:0; }
.modal-player-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:8px; }
.modal-player-role { color:#8a929b; font-size:10px; text-transform:uppercase; letter-spacing:1px; margin:0; }
.modal-rank-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:20px; background:rgba(255,255,255,.08); color:var(--white); font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.modal-socials { display:flex; flex-wrap:wrap; gap:10px; padding:0 32px 32px; }
.modal-socials a { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border:1px solid #313a44; border-radius:20px; font-size:9px; text-transform:uppercase; letter-spacing:1px; color:#d2d7db; }
.modal-socials a:hover { border-color:var(--blue); color:white; }

/* --- page roster.html --- */
.roster-page-hero { padding:150px clamp(24px,8vw,128px) 50px; background:radial-gradient(ellipse at 75% 0%,#0b2340 0%,#080a0e 55%); }
.roster-page-hero h1 { font-family:var(--display); font-size:clamp(56px,8vw,110px); font-weight:800; line-height:.85; margin:0 0 16px; }
.roster-page-hero p { color:#a9b1b9; max-width:460px; font-size:11px; line-height:1.8; margin:0; }

.game-tabs { display:flex; gap:12px; flex-wrap:wrap; padding:0 clamp(24px,8vw,128px); margin-bottom:50px; }
.game-tab { display:flex; align-items:center; gap:10px; padding:12px 20px; border-radius:30px; border:1px solid #2a3440; background:transparent; color:#8a929b; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:1px; cursor:pointer; }
.game-tab img { width:22px; height:22px; border-radius:50%; object-fit:cover; }
.game-tab .tab-fallback { width:22px; height:22px; border-radius:50%; background:#232c36; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:11px; font-weight:800; }
.game-tab.active { border-color:var(--blue); color:white; background:rgba(8,120,255,.1); }
.game-tab .tab-soon { font-size:8px; background:var(--blue); color:white; padding:2px 7px; border-radius:10px; margin-left:2px; }

.roster-section-inner { padding:0 clamp(24px,8vw,128px) 130px; min-height:40vh; }

.roster-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin-bottom:10px; }
.roster-tile { display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border:1px solid #232c36; border-radius:10px; background:#12181f; cursor:pointer; transition:border-color .2s,background .2s; text-align:left; color:var(--white); font-family:var(--mono); }
.roster-tile:hover { border-color:var(--blue); }
.roster-tile.is-active { border-color:var(--blue); background:rgba(8,120,255,.08); }
.roster-tile h3 { font-family:var(--display); font-size:20px; font-weight:800; margin:0 0 4px; color:var(--white); }
.roster-tile span { color:#7c8894; font-size:9px; text-transform:uppercase; letter-spacing:1px; }
.roster-tile .rt-arrow { color:var(--blue); font-size:20px; transition:transform .2s; }
.roster-tile.is-active .rt-arrow { transform:rotate(90deg); }

.roster-detail { margin-top:36px; padding-top:36px; border-top:1px solid var(--line); }
.roster-detail-back { display:inline-flex; align-items:center; gap:8px; color:#8a929b; font-size:9px; text-transform:uppercase; letter-spacing:1px; margin-bottom:24px; cursor:pointer; background:none; border:0; font-family:var(--mono); }
.roster-detail-back:hover { color:white; }

.coming-soon-panel { text-align:center; padding:90px 24px; color:#6d747a; }
.coming-soon-panel .cs-badge { display:inline-block; background:var(--blue); color:white; font-size:9px; text-transform:uppercase; letter-spacing:1px; padding:6px 14px; border-radius:20px; margin-bottom:20px; }
.coming-soon-panel h2 { font-family:var(--display); font-size:40px; font-weight:800; color:white; margin:0 0 12px; }
.coming-soon-panel p { max-width:420px; margin:0 auto; font-size:11px; line-height:1.8; }