:root{
  --bg:#000;
  --panel:#040404;
  --panel-2:#080808;
  --panel-3:#0b0b0d;
  --line:#19191d;
  --line-2:#28242e;
  --text:#f7f7fb;
  --muted:#7e7e8a;
  --muted-2:#52525b;
  --purple:#9b5cff;
  --purple-2:#7c3aed;
  --purple-3:#c084fc;
  --green:#39e58c;
  --red:#ff5f75;
  --amber:#f5b942;
  --mx:50vw;
  --my:25vh;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#000}
body{margin:0;background:#000;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh;overflow-x:hidden}
button,input,select{font:inherit}
button{color:inherit}
a{color:inherit;text-decoration:none}
::selection{background:#7c3aed;color:#fff}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(155,92,255,.09),transparent 62%),linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px;mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.72) 78%,transparent 100%)}
.hidden{display:none!important}
.app{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:248px;padding:18px 14px 16px;border-right:1px solid var(--line);background:#000;display:flex;flex-direction:column;z-index:40}
.brand{display:flex;align-items:center;gap:11px;padding:2px 6px 20px;font-weight:950;letter-spacing:-.035em}
.brand img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 22px rgba(155,92,255,.28)}
.brand-title{font-size:17px}.brand-sub{display:block;margin-top:2px;color:#666673;font-size:9px;letter-spacing:.15em;text-transform:uppercase;font-weight:800}
.nav-section{margin:4px 0 17px}.nav-label{padding:0 10px 7px;color:#45454d;font-size:9px;text-transform:uppercase;letter-spacing:.16em;font-weight:900}
.nav-item{width:100%;height:42px;border:0;background:transparent;border-radius:10px;color:#92929d;display:flex;align-items:center;gap:10px;padding:0 11px;margin:2px 0;font-size:13px;font-weight:800;cursor:pointer;transition:.18s}
.nav-item:hover{background:#070707;color:#fff}.nav-item.active{background:linear-gradient(90deg,rgba(155,92,255,.14),transparent);box-shadow:inset 2px 0 var(--purple);color:#fff}
.nav-icon{width:18px;text-align:center;opacity:.9}.sidebar-bottom{margin-top:auto;border-top:1px solid #121214;padding-top:10px}.fineprint{margin:8px 7px 0;color:#5f5f6a;font-size:9px;line-height:1.5}
.main{grid-column:2;min-width:0}.topbar{position:sticky;top:0;z-index:30;height:68px;display:flex;align-items:center;gap:12px;padding:0 22px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.9);backdrop-filter:blur(18px)}
.mobile-menu{display:none;width:40px;height:40px;border:1px solid #202024;border-radius:11px;background:#050505;cursor:pointer}.search-wrap{position:relative;width:min(390px,38vw)}.search{width:100%;height:40px;border:1px solid #1c1c20;border-radius:999px;background:#040404;color:#ddd;padding:0 14px 0 38px;outline:none;transition:.18s}.search:focus{border-color:#553181;box-shadow:0 0 0 3px rgba(155,92,255,.08)}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#4f4f58;font-size:13px}.spacer{flex:1}
.status-pill{height:38px;border:1px solid #21172f;border-radius:999px;background:#060409;display:flex;align-items:center;gap:8px;padding:0 12px;font-size:11px;font-weight:850;color:#c9b2ec}.status-dot{width:7px;height:7px;border-radius:50%;background:#38e58d;box-shadow:0 0 10px rgba(56,229,141,.55)}
.balance{height:40px;border:1px solid #261a36;border-radius:999px;background:#07050a;display:flex;align-items:center;gap:8px;padding:0 13px;font-weight:900;font-size:12px}.coin{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#c084fc,#6d28d9);font-size:9px;font-weight:950;box-shadow:0 0 12px rgba(155,92,255,.3)}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid #37244d;background:linear-gradient(145deg,#1a0e25,#7c3aed);font-size:12px;font-weight:950;cursor:pointer}
.page{display:none;padding:23px;animation:pageIn .22s ease}.page.active{display:block}@keyframes pageIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}.eyebrow{font-size:9px;text-transform:uppercase;letter-spacing:.17em;color:#77638f;font-weight:900}h1{margin:4px 0 0;font-size:clamp(31px,4vw,50px);line-height:.95;letter-spacing:-.055em}.sub{margin-top:8px;color:#75757f;font-size:12px}.head-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{min-height:42px;border:1px solid #222228;background:#070707;border-radius:11px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:900;cursor:pointer;transition:.17s}.btn:hover:not(:disabled){transform:translateY(-1px);border-color:#3a3540;background:#0a0a0c}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{border-color:#9f69e8;background:linear-gradient(135deg,#a855f7,#6d28d9);box-shadow:0 8px 26px rgba(124,58,237,.16);color:#fff}.btn.primary:hover:not(:disabled){box-shadow:0 10px 32px rgba(124,58,237,.26)}.btn.danger{border-color:#5a2430;color:#ff8193;background:#120608}.btn.success{border-color:#184a31;color:#58eda3;background:#061109}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.chip{height:35px;border:1px solid #1e1e22;border-radius:10px;background:#040404;color:#85858f;padding:0 12px;font-size:10px;font-weight:850;cursor:pointer;transition:.15s}.chip:hover,.chip.active{color:#fff;border-color:#4a2f68;background:#0a0610}.chip b{margin-left:5px;color:#cab3ec}.chip:disabled{opacity:.38;cursor:not-allowed}
.shell-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px}.section-card{border:1px solid #18181c;background:#020202;border-radius:16px;overflow:hidden}.section-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px;border-bottom:1px solid #151519}.section-card-head h3{margin:0;font-size:13px}.section-card-head span{color:#595962;font-size:10px}
.matches-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.match-card{position:relative;overflow:hidden;min-height:260px;border:1px solid #1a1a1f;background:#020202;border-radius:16px;padding:15px;display:flex;flex-direction:column;--cx:50%;--cy:50%;transition:.18s}.match-card::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--cx) var(--cy),rgba(155,92,255,.13),transparent 60%);opacity:0;pointer-events:none;transition:.18s}.match-card:hover{transform:translateY(-3px);border-color:#39254f;box-shadow:0 18px 46px rgba(0,0,0,.5)}.match-card:hover::before{opacity:1}.match-card>*{position:relative;z-index:1}.match-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.match-title{font-size:15px;font-weight:950;letter-spacing:-.02em}.match-host{color:#686872;font-size:10px;margin-top:3px}.live-dot{width:9px;height:9px;border-radius:50%;background:#a855f7;box-shadow:0 0 13px rgba(168,85,247,.8)}.match-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.tag{border:1px solid #2d1d40;border-radius:999px;background:#08050c;color:#c7a8ef;padding:4px 7px;font-size:8px;letter-spacing:.05em;font-weight:900;text-transform:uppercase}.tag.dim{color:#7e7e87;border-color:#1e1e22;background:#050505}.match-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px}.stat{border:1px solid #111115;background:#050505;border-radius:10px;padding:11px}.stat label{display:block;color:#5e5e67;font-size:8px;text-transform:uppercase;letter-spacing:.11em;margin-bottom:6px;font-weight:900}.stat strong{font-size:13px}.match-status{margin-top:11px;padding:10px 11px;border-radius:10px;border:1px solid #20162c;background:#07050a;color:#9e86bd;font-size:10px;line-height:1.4}.match-actions{display:flex;gap:7px;margin-top:auto;padding-top:13px}.match-actions .btn{flex:1}
.empty{min-height:310px;border:1px dashed #202025;border-radius:16px;background:#010101;display:grid;place-items:center;text-align:center;padding:28px}.empty-icon{width:52px;height:52px;margin:0 auto 13px;border:1px solid #2c203b;border-radius:15px;background:#08050b;display:grid;place-items:center;color:#b590e5;font-size:21px}.empty h3{margin:0;font-size:16px}.empty p{margin:7px auto 0;max-width:330px;color:#666670;font-size:11px;line-height:1.55}
.my-match-list{padding:10px;display:grid;gap:8px}.my-match{border:1px solid #18181d;background:#040404;border-radius:12px;padding:12px}.my-match-top{display:flex;justify-content:space-between;gap:10px}.my-match-title{font-size:12px;font-weight:900}.my-match-status{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#af8fd5}.my-match-meta{margin-top:5px;color:#5f5f68;font-size:9px}.my-match-actions{display:flex;gap:7px;margin-top:10px}.my-match-actions .btn{min-height:36px;padding:0 10px;flex:1}
.leader-hero{min-height:278px;border:1px solid #251733;border-radius:19px;background:radial-gradient(620px circle at 50% 0%,rgba(155,92,255,.14),transparent 62%),#020202;padding:24px 18px;display:flex;align-items:end;justify-content:center;overflow:hidden;margin-bottom:12px}.podium{display:flex;align-items:end;gap:14px;width:min(740px,100%);justify-content:center}.pod{width:30%;min-width:120px;text-align:center}.pod .pfp{width:72px;height:72px;margin:0 auto 7px;border-radius:50%;display:grid;place-items:center;border:2px solid #3b2850;background:linear-gradient(145deg,#170b20,#6d28d9);font-weight:950;font-size:21px;box-shadow:0 0 28px rgba(155,92,255,.16)}.pod.first .pfp{width:94px;height:94px;border-color:#a855f7;box-shadow:0 0 34px rgba(168,85,247,.26)}.pod-name{font-size:12px;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pod-score{margin:4px 0 9px;color:#bd9aec;font-size:10px;font-weight:900}.pedestal{height:62px;border:1px solid #251833;border-radius:10px 10px 0 0;background:linear-gradient(180deg,#13091d,#060409);display:grid;place-items:center;color:#d5c0f1;font-size:19px;font-weight:950}.pod.first .pedestal{height:102px;background:linear-gradient(180deg,#25103a,#0d0613)}.pod.third .pedestal{height:44px}.leader-list{display:grid;gap:8px}.leader-row{display:grid;grid-template-columns:46px minmax(0,1fr) auto auto auto;gap:12px;align-items:center;border:1px solid #17171b;background:#020202;border-radius:12px;padding:11px 13px}.rank-num{color:#74747e;font-size:11px;font-weight:950}.player{display:flex;align-items:center;gap:9px;min-width:0;font-size:12px;font-weight:900}.mini-pfp{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:#150b20;border:1px solid #30203e;color:#c5a0f0;font-size:10px;font-weight:950}.player-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.metric{min-width:70px;text-align:right}.metric label{display:block;color:#4e4e57;font-size:7px;text-transform:uppercase;letter-spacing:.09em}.metric strong{font-size:11px;color:#c8aaf0}.record strong{color:#d7d7de}
.profile-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:13px}.panel{border:1px solid #19191d;background:#020202;border-radius:16px;padding:17px}.panel h3{margin:0;font-size:13px}.panel p{margin:5px 0 0;color:#62626b;font-size:10px;line-height:1.5}.big-balance{margin:18px 0 4px;font-size:44px;font-weight:950;letter-spacing:-.06em}.big-balance span{font-size:13px;color:#776985;letter-spacing:0}.info-list{margin-top:14px;display:grid}.info-row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid #151519;font-size:11px}.info-row span:first-child{color:#686872}.input{width:100%;height:42px;border:1px solid #202025;border-radius:10px;background:#050505;color:#fff;padding:0 12px;outline:none}.input:focus{border-color:#55327a;box-shadow:0 0 0 3px rgba(155,92,255,.08)}.field{display:grid;gap:6px;margin-top:12px}.field label{color:#72727c;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.notice{margin-top:14px;border:1px solid #2b1d3c;background:#08050c;border-radius:11px;padding:12px;color:#8e7ca4;font-size:10px;line-height:1.5}
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.82);backdrop-filter:blur(9px);display:none;align-items:center;justify-content:center;padding:18px}.modal-backdrop.show{display:flex}.modal{width:min(610px,100%);max-height:min(780px,94vh);overflow:auto;border:1px solid #28202f;border-radius:18px;background:#010101;box-shadow:0 30px 100px #000,0 0 55px rgba(155,92,255,.07)}.modal-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:18px 19px;border-bottom:1px solid #16161a;background:#010101}.modal-head h2{margin:0;font-size:18px}.modal-head p{margin:5px 0 0;color:#65656f;font-size:10px}.close{border:0;background:transparent;color:#777781;font-size:20px;cursor:pointer}.modal-body{padding:18px 19px}.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.choice{min-height:49px;border:1px solid #202025;border-radius:10px;background:#050505;text-align:left;padding:9px 11px;cursor:pointer;font-size:11px;font-weight:900}.choice small{display:block;color:#5e5e68;font-size:9px;font-weight:650;margin-top:3px}.choice.active{border-color:#7545ad;background:#0d0712;color:#dbc4fa}.modal-foot{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:8px;padding:12px 19px;border-top:1px solid #16161a;background:#010101}.auth-card{width:min(440px,100%);border:1px solid #2b2035;border-radius:19px;background:#010101;padding:22px;box-shadow:0 30px 100px #000,0 0 60px rgba(155,92,255,.08)}.auth-brand{display:flex;align-items:center;gap:11px;margin-bottom:18px}.auth-brand img{width:52px;height:52px;border-radius:50%;box-shadow:0 0 26px rgba(155,92,255,.26)}.auth-brand h2{margin:0;font-size:20px}.auth-brand p{margin:3px 0 0;color:#686872;font-size:10px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border:1px solid #18181d;background:#050505;border-radius:11px;margin-bottom:15px}.auth-tab{height:36px;border:0;border-radius:8px;background:transparent;color:#696974;font-size:10px;font-weight:900;cursor:pointer}.auth-tab.active{background:#100819;color:#fff}.auth-error{min-height:18px;margin-top:9px;color:#ff7d8f;font-size:10px}.auth-note{margin-top:13px;color:#555560;font-size:9px;line-height:1.5}.toast{position:fixed;right:18px;bottom:18px;z-index:160;min-width:250px;max-width:360px;border:1px solid #352449;border-radius:12px;background:#07050a;padding:12px 13px;color:#ddd;font-size:10px;box-shadow:0 16px 55px #000;opacity:0;transform:translateY(18px);pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:none}.toast.error{border-color:#55232c;color:#ff9baa}.toast.success{border-color:#1c4c32;color:#80efb5}
.loading{min-height:240px;display:grid;place-items:center;color:#5d5d66;font-size:11px}.spinner{width:24px;height:24px;border-radius:50%;border:2px solid #1d1528;border-top-color:#a855f7;animation:spin .8s linear infinite;margin:0 auto 9px}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1220px){.shell-grid{grid-template-columns:1fr}.matches-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-grid{grid-template-columns:1fr}.side-match-card{order:-1}}
@media(max-width:860px){.app{display:block}.sidebar{width:258px;transform:translateX(-105%);transition:.2s;box-shadow:20px 0 60px rgba(0,0,0,.72)}.sidebar.open{transform:none}.main{grid-column:auto}.mobile-menu{display:block}.topbar{height:62px;padding:0 12px}.search-wrap{flex:1;width:auto;min-width:0}.status-pill{display:none}.balance{padding:0 10px}.balance-label{display:none}.page{padding:15px}.page-head{align-items:flex-start;flex-direction:column}.head-actions{width:100%}.head-actions .btn{flex:1}.matches-grid{grid-template-columns:1fr}.leader-row{grid-template-columns:38px minmax(0,1fr) auto}.leader-row .metric:nth-last-child(-n+2){display:none}.leader-hero{padding:18px 9px;min-height:235px}.podium{gap:7px}.pod{min-width:0}.pod .pfp{width:55px;height:55px}.pod.first .pfp{width:70px;height:70px}}
@media(max-width:560px){.topbar{gap:8px}.avatar{display:none}.page{padding:11px}.search{height:38px}.filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}.chip{flex:0 0 auto}.match-card{min-height:250px;border-radius:14px}.match-stats{grid-template-columns:1fr 1fr}.page-head{margin-bottom:14px}.leader-hero{min-height:205px;border-radius:15px}.pod .pfp{width:44px;height:44px;font-size:15px}.pod.first .pfp{width:56px;height:56px}.pod-name{font-size:9px}.pod-score{font-size:8px}.pedestal{height:46px}.pod.first .pedestal{height:75px}.pod.third .pedestal{height:34px}.leader-row{padding:10px 9px}.modal-backdrop{padding:7px}.modal{max-height:97vh;border-radius:14px}.modal-body{padding:14px}.modal-foot{padding:10px 14px}.modal-foot .btn{flex:1}.choice-grid{grid-template-columns:1fr}.auth-card{padding:17px;border-radius:15px}.big-balance{font-size:38px}}
@media(hover:none),(pointer:coarse){body::before{background:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:48px 48px}.match-card:hover{transform:none}.match-card::before{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* v0.3 live-account polish */
.build-pill{height:30px;display:flex;align-items:center;border:1px solid #23182f;border-radius:999px;padding:0 9px;color:#806c97;background:#050307;font-size:8px;font-weight:950;letter-spacing:.08em;white-space:nowrap}
.avatar.has-image{background-size:cover;background-position:center;background-repeat:no-repeat}
.discord-login{width:100%;height:46px;border-color:#514a95;background:linear-gradient(135deg,#6d5dfc,#5948d8);box-shadow:0 10px 32px rgba(88,76,220,.16);font-size:12px}
.discord-login:hover:not(:disabled){border-color:#7a70d6;background:linear-gradient(135deg,#7568ff,#6351e8);box-shadow:0 12px 38px rgba(88,76,220,.25)}
.discord-mark{width:21px;height:21px;border-radius:7px;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:10px}
.auth-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:#4f4f58;font-size:8px;text-transform:uppercase;letter-spacing:.12em;font-weight:900}.auth-divider::before,.auth-divider::after{content:"";height:1px;background:#17171b;flex:1}
.discord-profile{display:flex;align-items:center;gap:11px;margin-top:16px;padding:11px;border:1px solid #19131f;border-radius:12px;background:#050307}.discord-profile strong{display:block;font-size:11px}.discord-profile span{display:block;margin-top:3px;color:#70657b;font-size:9px}.profile-avatar{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#160b20,#6d28d9);border:1px solid #3c2751;font-size:12px;font-weight:950}.profile-avatar img,.pfp.image img,.mini-pfp.image img{width:100%;height:100%;object-fit:cover;display:block}.pfp.image,.mini-pfp.image{overflow:hidden;padding:0}
.panel-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.ledger-live{border:1px solid #203b2b;background:#051008;color:#5ee89c;border-radius:999px;padding:4px 7px;font-size:7px;font-weight:950;letter-spacing:.12em}.credit-ledger{margin-top:14px;display:grid}.ledger-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid #151519}.ledger-row:first-child{border-top:0}.ledger-row strong{display:block;font-size:10px;text-transform:capitalize}.ledger-row span{display:block;margin-top:3px;color:#565660;font-size:8px}.ledger-value{text-align:right;font-size:11px;font-weight:950;color:#bba3dc}.ledger-value.positive{color:#68e9a5}.ledger-value.negative{color:#ff8193}.ledger-value small{display:block;margin-top:3px;color:#555560;font-size:7px;font-weight:750}.mini-empty{margin-top:14px;border:1px dashed #1c1c21;border-radius:11px;padding:22px;text-align:center;color:#565660;font-size:9px}
.podium.count-1 .pod{width:min(250px,62%)}.podium.count-2 .pod{width:min(250px,43%)}

@media(max-width:980px){.build-pill{display:none}}
@media(max-width:560px){.discord-login{height:48px}.discord-profile{padding:10px}.profile-avatar{width:38px;height:38px;flex-basis:38px}.ledger-row{padding:11px 0}.podium.count-1 .pod{width:65%}.podium.count-2 .pod{width:45%}}

/* v0.4 interaction + room polish */
.inline-actions{display:flex;gap:8px;flex-wrap:wrap}.inline-actions .btn{flex:0 1 auto}
.choice-grid.single{grid-template-columns:1fr}
.history-list{display:grid;gap:8px}.history-row{width:100%;display:grid;grid-template-columns:72px minmax(0,1fr) 120px 24px;align-items:center;gap:12px;text-align:left;border:1px solid #18181d;background:#020202;border-radius:13px;padding:12px 14px;cursor:pointer;transition:.16s}.history-row:hover{border-color:#37244c;background:#050307;transform:translateY(-1px)}.history-result{height:32px;display:grid;place-items:center;border:1px solid #28202f;border-radius:9px;background:#07050a;color:#a990c7;font-size:9px;font-weight:950;letter-spacing:.1em}.history-result.win{border-color:#17442d;background:#041008;color:#5ee89c}.history-result.loss{border-color:#4c2029;background:#100507;color:#ff8193}.history-main{min-width:0}.history-main strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-main span,.history-meta span{display:block;margin-top:4px;color:#5c5c66;font-size:9px}.history-meta{text-align:right}.history-meta strong{font-size:10px;color:#b79ad9}.history-arrow{color:#5d4c70;font-size:21px;text-align:right}
.rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.rule-card{min-height:170px;position:relative;overflow:hidden}.rule-card::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-80px;top:-80px;background:radial-gradient(circle,rgba(155,92,255,.09),transparent 68%);pointer-events:none}.rule-num{display:block;color:#79569a;font-size:9px;font-weight:950;letter-spacing:.14em;margin-bottom:28px}.rule-card h3{font-size:15px}.rule-card p{font-size:10px;max-width:380px}
.room-status{display:inline-flex;align-items:center;gap:8px;border:1px solid #26202b;border-radius:999px;padding:7px 10px;background:#050307;color:#a38eb9;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.room-status span{width:7px;height:7px;border-radius:50%;background:#8f5bd1;box-shadow:0 0 10px rgba(155,92,255,.45)}.room-status.active span{background:#42e58d;box-shadow:0 0 10px rgba(66,229,141,.4)}.room-status.completed span{background:#c084fc}.room-status.cancelled span{background:#777}
.room-vs{display:grid;grid-template-columns:1fr 54px 1fr;align-items:center;gap:10px;margin-top:17px}.room-player{min-width:0;display:flex;align-items:center;gap:11px;border:1px solid #19191e;border-radius:14px;background:#030303;padding:13px}.room-player.waiting{border-style:dashed}.room-player>div:last-child{min-width:0}.room-player span{display:block;color:#5d5d67;font-size:8px;text-transform:uppercase;letter-spacing:.09em;font-weight:900}.room-player strong{display:block;margin-top:3px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-player small{display:block;margin-top:4px;color:#565660;font-size:8px}.room-avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;overflow:hidden;border:1px solid #3b2750;background:linear-gradient(145deg,#120919,#6d28d9);font-weight:950}.room-avatar.image img{width:100%;height:100%;object-fit:cover}.room-vs-mark{text-align:center;color:#5f4a77;font-size:10px;font-weight:950;letter-spacing:.12em}.room-details{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:11px}.room-details>div{border:1px solid #16161a;border-radius:10px;background:#040404;padding:10px}.room-details span{display:block;color:#565660;font-size:7px;text-transform:uppercase;letter-spacing:.09em;font-weight:900}.room-details strong{display:block;margin-top:5px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-banner{margin-top:11px;border:1px solid #342247;border-radius:11px;background:linear-gradient(90deg,#09050d,#050307);padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.result-banner span{color:#6f5b82;font-size:8px;text-transform:uppercase;letter-spacing:.1em;font-weight:900}.result-banner strong{font-size:12px;color:#d6bcf5}
.stats-player{display:flex;align-items:center;gap:12px}.stats-avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;overflow:hidden;border:1px solid #553678;background:linear-gradient(145deg,#12091a,#6d28d9);font-weight:950}.stats-avatar.image img{width:100%;height:100%;object-fit:cover}.stats-player span{display:block;color:#686872;font-size:8px;text-transform:uppercase;letter-spacing:.1em;font-weight:900}.stats-player strong{display:block;margin-top:4px;font-size:17px}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:15px}.stats-grid>div{border:1px solid #18181d;border-radius:11px;background:#040404;padding:12px}.stats-grid span{display:block;color:#5d5d67;font-size:8px;text-transform:uppercase;letter-spacing:.08em}.stats-grid strong{display:block;margin-top:6px;font-size:16px}
.mobile-dock{display:none}
@media(max-width:860px){body{padding-bottom:72px}.mobile-dock{position:fixed;z-index:70;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));height:58px;border:1px solid #211729;border-radius:16px;background:rgba(2,2,3,.94);backdrop-filter:blur(18px);box-shadow:0 12px 50px rgba(0,0,0,.7);display:grid;grid-template-columns:repeat(4,1fr);padding:5px}.dock-item{border:0;border-radius:11px;background:transparent;color:#666671;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:8px;font-weight:900;cursor:pointer}.dock-item span{font-size:14px}.dock-item.active{color:#fff;background:linear-gradient(180deg,rgba(155,92,255,.14),rgba(155,92,255,.04));box-shadow:inset 0 0 0 1px rgba(155,92,255,.12)}.history-row{grid-template-columns:62px minmax(0,1fr) 86px 18px}.leader-row{grid-template-columns:38px minmax(0,1fr) auto auto}.leader-row .stat-open{min-height:34px;padding:0 10px}.room-details{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rules-grid{grid-template-columns:1fr}.history-row{grid-template-columns:56px minmax(0,1fr) 18px;padding:10px}.history-meta{display:none}.room-vs{grid-template-columns:1fr;gap:8px}.room-vs-mark{padding:1px 0}.room-details{grid-template-columns:repeat(2,1fr)}.inline-actions .btn{flex:1}.leader-row{grid-template-columns:32px minmax(0,1fr) auto}.leader-row .metric{display:none!important}.leader-row .stat-open{min-width:58px}}

/* v0.5 verified credit checkout */
.credits-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);gap:13px}.credit-activity-panel{grid-column:1/-1}.secure-pill{border:1px solid #24352d;background:#061009;color:#65e6a0;border-radius:999px;padding:4px 7px;font-size:7px;font-weight:950;letter-spacing:.12em;white-space:nowrap}.credit-pack-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:16px}.credit-pack{min-height:92px;border:1px solid #211829;border-radius:13px;background:linear-gradient(180deg,#070509,#030304);cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:13px;transition:.16s;position:relative;overflow:hidden;text-align:left}.credit-pack::after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-50px;top:-50px;background:radial-gradient(circle,rgba(155,92,255,.13),transparent 68%);pointer-events:none}.credit-pack:hover:not(:disabled){border-color:#553879;background:#08050c;transform:translateY(-1px);box-shadow:0 10px 30px rgba(84,42,116,.15)}.credit-pack:disabled{opacity:.55;cursor:wait}.credit-pack span{font-size:22px;font-weight:950;letter-spacing:-.04em}.credit-pack small{margin-top:1px;color:#66606d;font-size:8px;text-transform:uppercase;letter-spacing:.08em;font-weight:900}.credit-pack strong{margin-top:8px;color:#bda1db;font-size:10px}.credit-pack.featured{border-color:#4b2f68;background:linear-gradient(180deg,#0b0610,#040305);grid-column:span 2}.purchase-note{margin-top:12px;color:#62596b;font-size:9px;line-height:1.5}.purchase-note.loading{color:#b59dcb}.purchase-note.error{color:#ff8193}.purchase-note.success{color:#68e9a5}
@media(max-width:980px){.credits-grid{grid-template-columns:1fr}.credit-activity-panel{grid-column:auto}.credit-pack-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){.credit-pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.credit-pack.featured{grid-column:span 2}.credit-pack{min-height:86px}}

/* ============================================================
   v0.8 Premium UI pass — compact, animated, comfortable
   ============================================================ */
:root{
  --sidebar-w:214px;
  --topbar-h:58px;
  --surface:rgba(8,8,12,.76);
  --surface-strong:rgba(6,6,9,.94);
  --hairline:rgba(255,255,255,.075);
  --soft-shadow:0 18px 54px rgba(0,0,0,.34);
}
body{background:#020204;color:#f8f7fb}
body::before{
  background:
    radial-gradient(620px circle at var(--mx) var(--my),rgba(157,88,255,.075),transparent 64%),
    linear-gradient(rgba(255,255,255,.010) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.010) 1px,transparent 1px);
  background-size:auto,56px 56px,56px 56px;
  opacity:.72;
}
.app{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
.sidebar{
  width:var(--sidebar-w);
  padding:13px 10px 12px;
  border-right:1px solid rgba(255,255,255,.065);
  background:linear-gradient(180deg,rgba(5,5,8,.985),rgba(2,2,4,.99));
  box-shadow:10px 0 35px rgba(0,0,0,.22);
}
.brand{gap:9px;padding:3px 7px 15px}
.brand img{width:36px;height:36px;box-shadow:0 0 20px rgba(155,92,255,.22)}
.brand-title{font-size:15px}.brand-sub{font-size:7px;letter-spacing:.14em;margin-top:1px}
.nav-section{margin:3px 0 13px}.nav-label{padding:0 9px 5px;font-size:7px;color:#4d4a56;letter-spacing:.18em}
.nav-item{
  --nav-accent:#9b5cff;
  position:relative;height:38px;border-radius:9px;gap:8px;padding:0 7px;margin:1px 0;
  color:#8b8993;font-size:11px;font-weight:780;overflow:hidden;
}
.nav-item::after{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:5px;background:var(--nav-accent);opacity:0;box-shadow:0 0 12px var(--nav-accent);transition:.18s}
.nav-item:hover{background:rgba(255,255,255,.035);color:#fff;transform:translateX(1px)}
.nav-item.active{background:linear-gradient(90deg,color-mix(in srgb,var(--nav-accent) 14%,transparent),rgba(255,255,255,.012));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nav-accent) 18%,transparent);color:#fff}
.nav-item.active::after{opacity:1}
.nav-item[data-page="matches"]{--nav-accent:#a873ff}.nav-item[data-page="leaderboard"]{--nav-accent:#f4c75d}.nav-item[data-page="history"]{--nav-accent:#58c9ff}.nav-item[data-page="profile"]{--nav-accent:#8ca8ff}.nav-item[data-page="credits"]{--nav-accent:#58e6a6}.nav-item[data-page="rules"]{--nav-accent:#ff9f6b}.signout-item{--nav-accent:#ff6f84}
.nav-icon{width:27px;height:27px;flex:0 0 27px;border:1px solid color-mix(in srgb,var(--nav-accent) 19%,rgba(255,255,255,.04));border-radius:8px;display:grid;place-items:center;color:color-mix(in srgb,var(--nav-accent) 80%,#fff);background:color-mix(in srgb,var(--nav-accent) 7%,transparent);transition:.18s}
.nav-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-item:hover .nav-icon,.nav-item.active .nav-icon{border-color:color-mix(in srgb,var(--nav-accent) 35%,transparent);background:color-mix(in srgb,var(--nav-accent) 12%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--nav-accent) 13%,transparent)}
.sidebar-bottom{padding-top:7px;border-top-color:rgba(255,255,255,.055)}.fineprint{font-size:7.5px;line-height:1.45;color:#514f59;margin:7px 8px 0}
.main{grid-column:2;background:linear-gradient(180deg,rgba(255,255,255,.008),transparent 170px)}
.topbar{height:var(--topbar-h);padding:0 17px;gap:9px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(3,3,5,.78);backdrop-filter:blur(22px) saturate(130%)}
.search-wrap{width:min(340px,34vw)}.search{height:36px;background:rgba(4,4,7,.72);border-color:rgba(255,255,255,.075);font-size:10px}.search:focus{border-color:rgba(160,104,255,.52);box-shadow:0 0 0 3px rgba(155,92,255,.06),0 0 24px rgba(155,92,255,.06)}
.status-pill{height:33px;padding:0 10px;border-color:rgba(73,225,148,.13);background:rgba(7,17,12,.55);font-size:9px;color:#9bdabb}.status-dot{width:6px;height:6px}
.build-pill{height:28px!important;padding:0 8px!important;border:1px solid rgba(168,115,255,.13)!important;background:rgba(12,7,18,.55)!important;color:#87779b!important;font-size:7px!important;letter-spacing:.12em!important}
.balance{height:34px;padding:0 10px;font-size:10px;border-color:rgba(164,108,255,.16);background:rgba(10,6,15,.65);transition:.18s}.balance:hover{border-color:rgba(164,108,255,.34);box-shadow:0 0 24px rgba(135,74,215,.08)}.coin{width:17px;height:17px;font-size:8px}.avatar{width:34px;height:34px}
.page{padding:18px clamp(16px,2.2vw,30px) 30px;max-width:1680px;margin:0 auto}
.page-head{margin-bottom:14px;align-items:center}.eyebrow{font-size:7.5px;color:#8a70a8}h1{font-size:clamp(27px,3.1vw,39px);letter-spacing:-.045em;line-height:1}.sub{margin-top:6px;font-size:10px;color:#777481}
.btn{min-height:36px;border-radius:9px;padding:0 12px;font-size:9px;border-color:rgba(255,255,255,.085);background:rgba(8,8,11,.78);box-shadow:inset 0 1px rgba(255,255,255,.02)}
.btn:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(255,255,255,.16);background:rgba(14,13,18,.9)}
.btn.primary{border-color:rgba(177,122,255,.68);background:linear-gradient(135deg,#aa62ff 0%,#7340e5 62%,#5830c5 100%);box-shadow:0 8px 24px rgba(111,55,207,.16),inset 0 1px rgba(255,255,255,.18)}
.filters{gap:6px;margin-bottom:11px}.chip{height:31px;border-radius:8px;padding:0 10px;font-size:8.5px;background:rgba(6,6,9,.7);border-color:rgba(255,255,255,.07)}.chip:hover,.chip.active{border-color:rgba(160,103,255,.32);background:linear-gradient(180deg,rgba(155,92,255,.105),rgba(155,92,255,.045));box-shadow:inset 0 1px rgba(255,255,255,.03)}
.shell-grid{grid-template-columns:minmax(0,1fr) 292px;gap:11px}.section-card,.panel{border-color:var(--hairline);background:linear-gradient(180deg,rgba(8,8,11,.80),rgba(4,4,7,.88));box-shadow:inset 0 1px rgba(255,255,255,.025),var(--soft-shadow);backdrop-filter:blur(10px)}
.section-card{border-radius:13px}.section-card-head{padding:12px 13px;border-bottom-color:rgba(255,255,255,.055)}.section-card-head h3{font-size:11px}.section-card-head span{font-size:8px}

/* Match page: image-free animated backdrop */
#page-matches{position:relative;isolation:isolate;min-height:calc(100vh - var(--topbar-h));overflow:hidden}
#page-matches::before,#page-matches::after{content:"";position:absolute;pointer-events:none;z-index:-1}
#page-matches::before{inset:-120px -80px -40px;background:
  radial-gradient(520px 330px at 16% 15%,rgba(139,84,255,.14),transparent 72%),
  radial-gradient(430px 300px at 84% 34%,rgba(45,170,255,.085),transparent 74%),
  radial-gradient(480px 300px at 56% 92%,rgba(73,230,160,.055),transparent 76%),
  linear-gradient(120deg,transparent 0 46%,rgba(255,255,255,.018) 49%,transparent 52%);
  background-size:auto,auto,auto,240% 240%;filter:saturate(115%);animation:matchAura 18s ease-in-out infinite alternate}
#page-matches::after{inset:0;background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 78%);opacity:.48;animation:gridDrift 20s linear infinite}
@keyframes matchAura{0%{transform:translate3d(-1.5%,0,0) scale(1)}50%{transform:translate3d(1.5%,1%,0) scale(1.025)}100%{transform:translate3d(0,-1%,0) scale(1.01)}}
@keyframes gridDrift{to{background-position:44px 44px}}

.matches-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.match-card{
  --card-accent:#a86fff;--card-accent-rgb:168,111,255;
  min-height:208px;border-radius:13px;padding:13px;border-color:rgba(255,255,255,.075);
  background:linear-gradient(145deg,rgba(10,9,14,.91),rgba(4,4,7,.94));
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 12px 36px rgba(0,0,0,.22);
  transform-origin:center;transition:transform .21s cubic-bezier(.2,.75,.25,1),border-color .2s,box-shadow .2s,background .2s;
}
.match-card.region-nae{--card-accent:#a76fff;--card-accent-rgb:167,111,255}.match-card.region-nac{--card-accent:#58c9ff;--card-accent-rgb:88,201,255}.match-card.region-naw{--card-accent:#ff9d68;--card-accent-rgb:255,157,104}.match-card.region-eu{--card-accent:#58e6a6;--card-accent-rgb:88,230,166}
.match-card::before{background:radial-gradient(240px circle at var(--cx) var(--cy),rgba(var(--card-accent-rgb),.16),transparent 62%);opacity:.18}
.match-card::after{content:"";position:absolute;inset:-100% -35%;pointer-events:none;background:linear-gradient(110deg,transparent 44%,rgba(255,255,255,.055) 50%,transparent 56%);transform:translateX(-45%) rotate(2deg);transition:transform .55s ease;opacity:.6}
.match-card:hover{z-index:4;transform:translateY(-4px) scale(1.018);border-color:rgba(var(--card-accent-rgb),.35);background:linear-gradient(145deg,rgba(var(--card-accent-rgb),.055),rgba(6,5,9,.96));box-shadow:0 22px 58px rgba(0,0,0,.42),0 0 34px rgba(var(--card-accent-rgb),.055),inset 0 1px rgba(255,255,255,.045)}
.match-card:hover::before{opacity:1}.match-card:hover::after{transform:translateX(42%) rotate(2deg)}
.match-title{font-size:13px}.match-host{font-size:8.5px;color:#77737f}.live-dot{width:7px;height:7px;background:var(--card-accent);box-shadow:0 0 12px rgba(var(--card-accent-rgb),.78)}
.match-tags{gap:5px;margin-top:8px}.tag{padding:3px 6px;font-size:7px;color:color-mix(in srgb,var(--card-accent) 72%,#fff);border-color:rgba(var(--card-accent-rgb),.20);background:rgba(var(--card-accent-rgb),.055)}.tag.dim{color:#77747e;background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.07)}
.match-stats{gap:6px;margin-top:10px}.stat{border-color:rgba(255,255,255,.055);background:rgba(255,255,255,.018);border-radius:8px;padding:8px 9px}.stat label{font-size:6.5px;margin-bottom:4px;color:#65616d}.stat strong{font-size:11px}
.match-status{margin-top:8px;padding:7px 9px;border-radius:8px;border-color:rgba(var(--card-accent-rgb),.13);background:rgba(var(--card-accent-rgb),.035);color:#91889e;font-size:8.5px}.match-actions{padding-top:9px}.match-actions .btn{min-height:33px}
.my-match-list{padding:8px;gap:6px}.my-match{padding:9px;border-radius:9px;background:rgba(255,255,255,.014);border-color:rgba(255,255,255,.06)}.my-match-title{font-size:10px}.my-match-status,.my-match-meta{font-size:7.5px}.my-match-actions{margin-top:7px}.my-match-actions .btn{min-height:31px}
.empty{min-height:260px;border-radius:13px;background:rgba(5,5,8,.55);border-color:rgba(255,255,255,.09);backdrop-filter:blur(8px)}
.empty-icon{width:44px;height:44px;border-radius:12px}.empty h3{font-size:14px}.empty p{font-size:9.5px}

/* Everything else gets the same slimmer visual language */
.panel{border-radius:13px;padding:14px}.panel h3{font-size:11px}.panel p{font-size:8.5px}.profile-grid{gap:10px}.big-balance{font-size:38px;margin:14px 0 2px}.info-row{padding:9px 0;font-size:9px;border-top-color:rgba(255,255,255,.055)}.input{height:38px;border-radius:8px;background:rgba(5,5,8,.78);border-color:rgba(255,255,255,.08);font-size:10px}.notice{border-radius:9px;padding:10px;font-size:8.5px}
.history-list,.leader-list{gap:6px}.history-row,.leader-row{border-color:rgba(255,255,255,.07);background:rgba(7,7,10,.76);box-shadow:inset 0 1px rgba(255,255,255,.018);backdrop-filter:blur(8px)}.history-row{border-radius:10px;padding:10px 11px}.history-row:hover,.leader-row:hover{border-color:rgba(164,106,255,.24);background:rgba(12,9,16,.82);transform:translateY(-1px);box-shadow:0 12px 34px rgba(0,0,0,.24)}.leader-row{border-radius:10px;padding:9px 11px;transition:.17s}.leader-hero{min-height:230px;border-radius:14px;border-color:rgba(168,111,255,.16);background:radial-gradient(560px circle at 50% 0%,rgba(155,92,255,.12),transparent 62%),rgba(5,5,8,.78);box-shadow:inset 0 1px rgba(255,255,255,.025)}
.credit-pack{min-height:78px;border-radius:10px;padding:11px;background:linear-gradient(180deg,rgba(9,7,12,.82),rgba(4,4,6,.9));border-color:rgba(255,255,255,.07)}.credit-pack:hover:not(:disabled){transform:translateY(-2px) scale(1.01);border-color:rgba(159,100,255,.28);box-shadow:0 13px 30px rgba(0,0,0,.24),0 0 28px rgba(135,77,220,.055)}.credit-pack span{font-size:19px}.credit-pack strong{margin-top:6px}
.modal,.auth-card{border-color:rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(10,10,14,.98),rgba(4,4,7,.99));box-shadow:0 32px 100px rgba(0,0,0,.72),inset 0 1px rgba(255,255,255,.04)}

.dock-icon{display:grid;place-items:center}.dock-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:1480px){.matches-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.shell-grid{grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:1220px){.shell-grid{grid-template-columns:1fr}.side-match-card{order:-1}.side-match-card .my-match-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){:root{--sidebar-w:258px}.sidebar{width:258px}.page{padding:14px 13px 86px}.side-match-card .my-match-list{grid-template-columns:1fr}.topbar{height:56px;padding:0 11px}.page-head{margin-bottom:12px}h1{font-size:30px}.matches-grid{grid-template-columns:1fr}.match-card{min-height:198px}.mobile-dock{background:rgba(5,5,8,.91)!important;border-color:rgba(255,255,255,.09)!important;backdrop-filter:blur(24px) saturate(130%)!important}}
@media(max-width:560px){.page{padding:11px 10px 80px}.match-card{min-height:190px;padding:11px}.match-card:hover{transform:none}.filters{margin-bottom:9px}.credit-pack{min-height:72px}}
@media(hover:none),(pointer:coarse){.match-card:hover{transform:none}.match-card::after{display:none}}
@media(prefers-reduced-motion:reduce){#page-matches::before,#page-matches::after{animation:none!important}}
@media(max-width:860px){.app{display:block}.main{grid-column:auto}}


/* =========================================================
   ELITES v0.9 — full match workspace + profile navigation
   ========================================================= */

/* Full-width live browser (active matches moved out of this page) */
.match-browser-shell{width:100%}.match-browser-shell .matches-grid{width:100%}
@media(min-width:1360px){.match-browser-shell .matches-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1780px){.match-browser-shell .matches-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ongoing-quick{border-color:rgba(72,223,157,.20)!important;color:#9ee7c6!important}.ongoing-quick b{color:#57e6a4!important}

/* Sidebar ongoing matches */
.ongoing-section{margin-top:0;margin-bottom:11px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.055)}
.ongoing-label{display:flex;align-items:center;justify-content:space-between}.ongoing-pulse{width:6px;height:6px;border-radius:50%;background:#55e7a3;box-shadow:0 0 12px rgba(85,231,163,.5)}
.ongoing-nav{display:grid;gap:5px}.ongoing-match-link{position:relative;width:100%;min-height:47px;border:1px solid rgba(255,255,255,.065);border-radius:9px;background:rgba(255,255,255,.018);color:#d9d7df;display:grid;grid-template-columns:28px minmax(0,1fr) 8px;align-items:center;gap:8px;padding:6px 8px;text-align:left;cursor:pointer;transition:.17s}
.ongoing-match-link:hover,.ongoing-match-link.active{border-color:rgba(169,110,255,.3);background:linear-gradient(90deg,rgba(151,89,255,.11),rgba(255,255,255,.015));transform:translateX(1px)}
.ongoing-match-icon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;border:1px solid rgba(255,204,60,.17);background:rgba(255,194,35,.055);color:#ffd449}.ongoing-match-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ongoing-match-copy{min-width:0}.ongoing-match-copy strong,.ongoing-match-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ongoing-match-copy strong{font-size:9.5px;color:#f5f3f8}.ongoing-match-copy small{margin-top:2px;font-size:7px;color:#67646e}.ongoing-match-state{width:6px;height:6px;border-radius:50%;background:#ffc93d;box-shadow:0 0 8px rgba(255,201,61,.35)}.ongoing-match-state.active{background:#55e7a3;box-shadow:0 0 8px rgba(85,231,163,.4)}

/* Profile dropdown in top bar */
.profile-menu-wrap{position:relative}.profile-trigger{height:38px;border:1px solid rgba(255,255,255,.075);border-radius:999px;background:rgba(8,8,11,.72);display:flex;align-items:center;gap:7px;padding:2px 9px 2px 3px;cursor:pointer;transition:.17s}.profile-trigger:hover,.profile-trigger[aria-expanded="true"]{border-color:rgba(170,111,255,.25);background:rgba(15,11,20,.9)}
.profile-trigger .avatar{width:31px;height:31px;pointer-events:none}.profile-trigger-name{max-width:115px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9.5px;font-weight:850}.profile-chevron{font-size:11px;color:#67626f;transform:translateY(-1px)}
.profile-menu{position:absolute;right:0;top:calc(100% + 9px);width:250px;padding:7px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(5,5,8,.97);backdrop-filter:blur(22px) saturate(135%);box-shadow:0 24px 70px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.035);opacity:0;visibility:hidden;transform:translateY(-5px) scale(.985);transform-origin:top right;transition:.15s;z-index:95}.profile-menu.show{opacity:1;visibility:visible;transform:none}
.profile-menu-head{display:flex;align-items:center;gap:10px;padding:8px 8px 10px;border-bottom:1px solid rgba(255,255,255,.065);margin-bottom:4px}.profile-menu-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#1b1027,#733be2);border:1px solid rgba(174,114,255,.28);font-size:10px;font-weight:950;background-position:center;background-size:cover}.profile-menu-head div{min-width:0}.profile-menu-head strong,.profile-menu-head small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-menu-head strong{font-size:10px}.profile-menu-head small{margin-top:2px;color:#6a6770;font-size:7.5px}
.profile-menu-item{width:100%;border:0;border-radius:8px;background:transparent;display:grid;grid-template-columns:26px minmax(0,1fr);gap:7px;align-items:center;padding:8px;color:#d1ced7;text-align:left;cursor:pointer;transition:.14s}.profile-menu-item:hover{background:rgba(255,255,255,.045);color:#fff}.profile-menu-item>span{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:rgba(255,255,255,.035);font-size:11px}.profile-menu-item strong,.profile-menu-item small{display:block}.profile-menu-item strong{font-size:9px}.profile-menu-item small{margin-top:2px;color:#66636c;font-size:7px}.profile-menu-sep{height:1px;background:rgba(255,255,255,.06);margin:4px 2px}.danger-menu{color:#ff7d90}.danger-menu:hover{background:rgba(255,91,115,.07)}

/* Account/profile tabs */
.account-page-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:11px}.account-page-head h1{font-size:clamp(25px,2.6vw,34px)}
.profile-tabs{display:flex;gap:2px;border-bottom:1px solid rgba(255,255,255,.075);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}.profile-tabs::-webkit-scrollbar{display:none}.profile-tabs button{position:relative;height:39px;border:0;background:transparent;color:#77737e;padding:0 13px;font-size:8.5px;font-weight:800;white-space:nowrap;cursor:pointer}.profile-tabs button:hover{color:#fff}.profile-tabs button.active{color:#fff}.profile-tabs button.active::after{content:"";position:absolute;left:9px;right:9px;bottom:-1px;height:2px;border-radius:3px;background:#a868ff;box-shadow:0 0 12px rgba(168,104,255,.35)}
.history-heading-row{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:4px 0 11px}.history-heading-row h2{margin:0;font-size:17px;letter-spacing:-.025em}.history-heading-row p{margin:4px 0 0;color:#69656f;font-size:8.5px}
.history-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}.history-summary-card{min-height:72px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(7,7,10,.76);padding:11px 13px;display:flex;flex-direction:column;justify-content:space-between}.history-summary-card span{font-size:7.5px;text-transform:uppercase;letter-spacing:.09em;color:#696670;font-weight:850}.history-summary-card strong{font-size:22px;letter-spacing:-.04em}.history-summary-card.wins{border-color:rgba(71,225,150,.18);background:linear-gradient(145deg,rgba(38,161,104,.06),rgba(7,7,10,.76))}.history-summary-card.wins strong{color:#58e6a6}.history-summary-card.losses{border-color:rgba(255,95,117,.18);background:linear-gradient(145deg,rgba(169,42,61,.06),rgba(7,7,10,.76))}.history-summary-card.losses strong{color:#ff7186}.history-summary-card.total{border-color:rgba(167,111,255,.18)}.history-summary-card.total strong{color:#c6a3f5}

/* Full-page match room */
#page-room{position:relative;isolation:isolate;max-width:none;padding-top:15px;min-height:calc(100vh - var(--topbar-h));overflow:hidden}
#page-room::before{content:"";position:absolute;inset:-120px -100px;z-index:-2;pointer-events:none;background:radial-gradient(520px 300px at 50% 10%,rgba(255,191,38,.065),transparent 72%),radial-gradient(480px 360px at 25% 58%,rgba(141,82,255,.10),transparent 75%),radial-gradient(440px 340px at 78% 50%,rgba(54,193,255,.055),transparent 75%);animation:roomAura 20s ease-in-out infinite alternate}
#page-room::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,#000,transparent 92%);opacity:.45}
@keyframes roomAura{from{transform:translate3d(-1%,0,0) scale(1)}to{transform:translate3d(1.5%,-1%,0) scale(1.03)}}
#roomPageContent{width:min(1260px,100%);margin:0 auto}.room-page-loading{min-height:420px;display:grid;place-items:center;color:#77717d;font-size:9px;gap:9px}
.room-page-hero{text-align:center;padding:0 4px}.room-hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.room-back-link{border:0;background:transparent;color:#77737d;font-size:8.5px;font-weight:850;cursor:pointer;padding:5px}.room-back-link:hover{color:#fff}.room-status-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.085);border-radius:999px;background:rgba(8,8,11,.66);padding:6px 9px;color:#a49fab;font-size:7.5px;font-weight:850;text-transform:uppercase;letter-spacing:.07em}.room-status-pill span{width:6px;height:6px;border-radius:50%;background:#ffcc40;box-shadow:0 0 10px rgba(255,204,64,.4)}.room-status-pill.active span{background:#56e6a4;box-shadow:0 0 10px rgba(86,230,164,.4)}.room-status-pill.completed span{background:#aa70ff}.room-status-pill.cancelled span{background:#777}
.room-title-block{margin-top:7px}.room-title-block h1{font-size:clamp(30px,4vw,46px);letter-spacing:-.055em}.room-title-tags{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:9px}.room-title-tags span{border:1px solid rgba(178,115,255,.18);background:rgba(157,92,255,.055);color:#c6a8eb;border-radius:999px;padding:4px 8px;font-size:7px;text-transform:uppercase;font-weight:900}
.room-meta-strip{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:14px}.room-meta-strip>div{min-width:112px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(7,7,10,.74);padding:8px 10px;text-align:left;box-shadow:inset 0 1px rgba(255,255,255,.02)}.room-meta-strip span,.room-meta-strip strong{display:block}.room-meta-strip span{font-size:6.5px;color:#625e69;text-transform:uppercase;letter-spacing:.08em;font-weight:850}.room-meta-strip strong{margin-top:3px;font-size:9px;color:#eeeaf2}
.room-progress{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:28px 0 22px}.room-progress::before{content:"";position:absolute;left:8%;right:8%;top:13px;height:1px;background:rgba(255,255,255,.085)}.room-progress-step{position:relative;z-index:1;display:grid;justify-items:center;gap:6px;color:#56535c;text-align:center}.room-progress-step>span{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.10);background:#07070a;font-size:7px;font-weight:900}.room-progress-step strong{font-size:7.5px}.room-progress-step.done>span{border-color:rgba(99,231,171,.25);background:#07110c;color:#64e7ad}.room-progress-step.current>span{border-color:rgba(255,203,61,.46);background:#171005;color:#ffd146;color:#ffd146;box-shadow:0 0 20px rgba(255,201,61,.12)}.room-progress-step.current strong{color:#ded8e4}
.room-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:11px;align-items:start}.room-stage,.room-rules-card{border:1px solid rgba(255,255,255,.075);border-radius:13px;background:linear-gradient(180deg,rgba(8,8,11,.84),rgba(4,4,7,.92));box-shadow:inset 0 1px rgba(255,255,255,.025),0 18px 52px rgba(0,0,0,.24);backdrop-filter:blur(10px)}.room-stage{min-height:270px;padding:13px}.room-stage-title{display:flex;align-items:end;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.06);padding:1px 1px 10px}.room-stage-title span{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#a76eff;font-weight:900}.room-stage-title small{font-size:7px;color:#5f5b64}
.room-team-grid{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:center;gap:9px;padding:33px 5px 26px}.room-player-card{min-width:0;display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.017);padding:12px;transition:.17s}.room-player-card.you{border-color:rgba(103,61,146,.48);background:linear-gradient(100deg,rgba(70,35,105,.11),rgba(255,255,255,.012));box-shadow:inset 2px 0 rgba(116,67,166,.88),0 0 22px rgba(74,39,112,.07)}.room-player-card.waiting{border-style:dashed;color:#75717a}.room-player-copy{min-width:0}.room-player-copy span,.room-player-copy strong,.room-player-copy small{display:block}.room-player-copy span{color:#79747f;font-size:6.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:900}.room-player-copy strong{margin-top:4px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-player-copy small{margin-top:4px;color:#68636d;font-size:7.5px}.room-avatar.large{width:48px;height:48px;flex:0 0 48px}.room-vs-mark{text-align:center;color:#ffd13d;font-size:10px;font-weight:950}.room-result-card{margin:0 4px 4px;border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.018)}.room-result-card span{font-size:7px;text-transform:uppercase;letter-spacing:.09em;font-weight:900}.room-result-card strong{font-size:9px}.room-result-card.win{border-color:rgba(78,229,163,.2);color:#5ce6a9}.room-result-card.loss{border-color:rgba(255,94,116,.2);color:#ff788b}.room-result-card.cancelled{color:#9a959f}
.room-rules-card{padding:12px}.room-rules-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:1px 1px 10px;border-bottom:1px solid rgba(255,255,255,.06)}.room-rules-head div span,.room-rules-head div strong{display:block}.room-rules-head div span{font-size:6.5px;color:#66626b;text-transform:uppercase;letter-spacing:.08em}.room-rules-head div strong{margin-top:3px;font-size:10px}.rule-live-dot{width:7px;height:7px;border-radius:50%;background:#ffc93c;box-shadow:0 0 12px rgba(255,201,60,.32)}.room-rule-detail{display:flex;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid rgba(255,255,255,.055);font-size:8px}.room-rule-detail span{color:#66616b}.room-rule-detail strong{text-align:right}.room-rules-copy{padding:11px 2px 1px}.room-rules-copy h3{margin:0 0 8px;font-size:8px;color:#ffd13e;text-transform:uppercase;letter-spacing:.07em}.room-rules-copy ol{margin:0;padding-left:17px;color:#77727c;font-size:7.5px;line-height:1.55}.room-rules-copy li+li{margin-top:6px}.room-rules-copy li::marker{color:#ffd13e;font-weight:900}
.room-action-bar{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:13px;padding-bottom:7px}.room-action-bar .btn{min-width:150px}.room-missing{min-height:460px;display:grid;place-items:center;align-content:center;text-align:center;gap:8px}.room-missing h2,.room-missing p{margin:0}.room-missing p{color:#716d76;font-size:9px}

@media(max-width:1040px){.room-layout{grid-template-columns:1fr}.room-rules-card{order:2}.room-meta-strip>div{min-width:96px}.profile-trigger-name{display:none}}
@media(max-width:860px){.profile-menu-wrap{display:none}.room-progress{margin:21px 0 17px}.room-layout{gap:8px}.room-team-grid{padding:24px 2px 18px}.history-summary{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.room-hero-top{align-items:flex-start}.room-meta-strip{display:grid;grid-template-columns:repeat(2,1fr)}.room-meta-strip>div{min-width:0}.room-progress{grid-template-columns:repeat(4,minmax(0,1fr))}.room-progress-step strong{font-size:6.5px}.room-team-grid{grid-template-columns:1fr;gap:7px}.room-vs-mark{padding:2px}.room-player-card{padding:10px}.room-action-bar .btn{min-width:0;flex:1}.history-summary{grid-template-columns:1fr}.history-summary-card{min-height:61px}.history-row{grid-template-columns:65px minmax(0,1fr) 18px}.history-meta{display:none}}
@media(prefers-reduced-motion:reduce){#page-room::before{animation:none!important}}

.profile-menu-avatar.has-image{background-size:cover;background-position:center;background-repeat:no-repeat}


/* ============================================================
   ELITES v0.10 — slim shell + centered credits + purple ongoing
   ============================================================ */
:root{
  --sidebar-w:188px;
  --topbar-h:50px;
}

/* Slimmer desktop shell, closer to a compact competitive client */
.sidebar{
  width:var(--sidebar-w);
  padding:8px 8px 10px;
  box-shadow:8px 0 28px rgba(0,0,0,.18);
}
.brand{
  min-height:50px;
  padding:4px 8px 8px;
  gap:0;
  justify-content:flex-start;
}
.brand img{
  width:34px;
  height:34px;
  border-radius:50%;
  box-shadow:0 0 18px rgba(139,78,226,.22);
}
.brand-title,.brand-sub{display:none!important}
.nav-section{margin:2px 0 10px}
.nav-label{padding:0 8px 4px;font-size:6.5px;letter-spacing:.17em}
.nav-item{
  height:34px;
  border-radius:8px;
  gap:7px;
  padding:0 6px;
  font-size:10px;
  margin:1px 0;
}
.nav-item::after{top:6px;bottom:6px}
.nav-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:7px;
}
.nav-icon svg{width:13px;height:13px}
.sidebar-bottom{padding-top:5px}.fineprint{font-size:6.5px;margin:5px 7px 0}

/* Thin top bar with a true centered credits control */
.topbar{
  position:sticky;
  height:var(--topbar-h);
  padding:0 14px;
  gap:7px;
  background:rgba(3,3,5,.84);
  border-bottom-color:rgba(255,255,255,.055);
  overflow:visible;
}
.search-wrap{width:min(300px,31vw)}
.search{height:31px;padding-left:34px;font-size:9px}
.search-icon{left:12px;font-size:11px}
.status-pill{height:29px;padding:0 9px;font-size:8px}
.status-dot{width:5px;height:5px}
.build-pill{height:25px!important;padding:0 7px!important;font-size:6.5px!important}
.balance{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  height:30px;
  padding:0 10px;
  gap:6px;
  font-size:9px;
  border-color:rgba(148,91,234,.18);
  background:linear-gradient(180deg,rgba(20,11,31,.72),rgba(8,5,12,.78));
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 0 20px rgba(92,48,148,.04);
  z-index:2;
}
.balance:hover{
  transform:translate(-50%,-50%);
  border-color:rgba(164,103,255,.34);
  box-shadow:0 0 24px rgba(115,65,183,.08),inset 0 1px rgba(255,255,255,.035);
}
.balance .coin{width:15px;height:15px;font-size:7px}
.balance-label{color:#b4a9c2;font-size:7px;letter-spacing:.04em;text-transform:uppercase}
.profile-trigger{height:32px;padding:2px 8px 2px 3px;gap:6px}
.profile-trigger .avatar{width:26px;height:26px}
.profile-trigger-name{font-size:8.5px;max-width:105px}
.profile-chevron{font-size:9px}

/* The reference has no secondary token/target stat. ELITES intentionally keeps only Credits. */

/* Ongoing matches: dark translucent purple instead of yellow/green */
.ongoing-section{
  margin-bottom:9px;
  padding-bottom:9px;
  border-bottom-color:rgba(127,75,190,.13);
}
.ongoing-label{color:#5d4a72}
.ongoing-pulse{
  background:#7e4fbd;
  box-shadow:0 0 10px rgba(117,69,180,.34);
}
.ongoing-nav{gap:4px}
.ongoing-match-link{
  min-height:40px;
  grid-template-columns:24px minmax(0,1fr) 7px;
  gap:7px;
  padding:5px 7px;
  border-radius:8px;
  border-color:rgba(115,67,171,.23);
  background:linear-gradient(90deg,rgba(69,33,101,.105),rgba(27,17,37,.035));
  box-shadow:inset 0 1px rgba(255,255,255,.016);
}
.ongoing-match-link:hover,.ongoing-match-link.active{
  border-color:rgba(139,83,210,.42);
  background:linear-gradient(90deg,rgba(92,45,137,.17),rgba(43,24,61,.07));
  box-shadow:inset 2px 0 rgba(139,83,210,.48),0 0 18px rgba(81,41,122,.055);
  transform:translateX(1px);
}
.ongoing-match-icon{
  width:24px;
  height:24px;
  border-radius:7px;
  border-color:rgba(128,73,193,.24);
  background:rgba(75,37,111,.12);
  color:#9a67d6;
}
.ongoing-match-icon svg{width:12px;height:12px}
.ongoing-match-copy strong{
  color:#d8c9e9;
  font-size:8.8px;
  text-shadow:0 0 12px rgba(135,78,199,.07);
}
.ongoing-match-copy small{font-size:6.5px;color:#63586f}
.ongoing-match-state,
.ongoing-match-state.active{
  background:#7f4fbd;
  box-shadow:0 0 8px rgba(116,67,177,.34);
}
.ongoing-quick{
  border-color:rgba(126,72,188,.24)!important;
  color:#b49acb!important;
  background:rgba(59,31,82,.10)!important;
}
.ongoing-quick b{color:#ad7be3!important}

/* Keep pages visually tight under the thinner shell */
.page{padding-top:15px}
#page-room{padding-top:12px}

@media(max-width:1180px){
  .status-pill{display:none}
  .search-wrap{width:min(270px,30vw)}
}
@media(max-width:980px){
  .build-pill{display:none!important}
  .profile-trigger-name{display:none}
}
@media(max-width:860px){
  :root{--sidebar-w:224px;--topbar-h:50px}
  .sidebar{width:224px;padding:9px 9px 12px}
  .topbar{height:var(--topbar-h);padding:0 10px}
  .balance{position:static;transform:none;height:30px;margin-left:auto}
  .balance:hover{transform:none}
  .spacer{display:none}
  .search-wrap{width:min(300px,55vw)}
  .brand{min-height:47px}
}
@media(max-width:560px){
  .topbar{gap:6px}
  .search-wrap{flex:1;width:auto}
  .balance-label{display:none}
  .balance{padding:0 8px}
}

/* ============================================================
   ELITES v0.11 — animated purple Create Match wizard
   ============================================================ */
.create-backdrop{
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(14px) saturate(125%);
}
.create-wizard{
  position:relative;
  width:min(520px,calc(100vw - 24px));
  max-height:min(760px,94vh);
  overflow:hidden;
  border:1px solid rgba(151,91,226,.23);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(7,5,10,.985),rgba(2,2,4,.995));
  box-shadow:0 34px 110px rgba(0,0,0,.78),0 0 52px rgba(101,54,157,.10),inset 0 1px rgba(255,255,255,.04);
  isolation:isolate;
}
.create-wizard::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(390px 250px at 15% 3%,rgba(133,72,213,.13),transparent 68%),
    radial-gradient(340px 270px at 95% 58%,rgba(90,42,150,.09),transparent 72%),
    linear-gradient(rgba(255,255,255,.011) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.011) 1px,transparent 1px);
  background-size:auto,auto,34px 34px,34px 34px;
  animation:createAmbient 13s ease-in-out infinite alternate;
}
.create-wizard::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 22%,rgba(165,105,240,.028) 42%,transparent 62%);
  transform:translateX(-80%);
  animation:createSweep 9s ease-in-out infinite;
}
@keyframes createAmbient{from{filter:hue-rotate(-3deg);transform:scale(1)}to{filter:hue-rotate(7deg);transform:scale(1.018)}}
@keyframes createSweep{0%,38%{transform:translateX(-80%)}72%,100%{transform:translateX(80%)}}

.create-head{
  position:relative;
  min-height:72px;
  padding:15px 18px 13px;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,.065);
  background:linear-gradient(180deg,rgba(8,6,12,.96),rgba(5,4,8,.91));
}
.create-head-copy h2{font-size:18px;letter-spacing:-.035em}
.create-head-copy p{margin-top:5px;font-size:9px;color:#77717f}
.create-head .close{position:absolute;right:13px;top:11px;color:#76707d;font-size:18px}
.create-head .close:hover{color:#d9cce7}

.create-summary{
  min-height:31px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 12px;
  padding:6px 14px;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:rgba(0,0,0,.30);
  color:#696471;
  font-size:7.2px;
}
.create-summary b{color:#ad79e5;font-weight:900}

.create-tabs{
  height:47px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(2,2,4,.52);
}
.create-tab{
  position:relative;
  border:0;
  background:transparent;
  color:#68636f;
  font-size:9px;
  font-weight:850;
  cursor:pointer;
  transition:color .18s,background .18s;
}
.create-tab:hover{color:#c9bfd4;background:rgba(113,63,164,.035)}
.create-tab.active{color:#fff}
.create-tab.active::after{
  content:"";
  position:absolute;
  left:22%;right:22%;bottom:-1px;
  height:2px;border-radius:4px;
  background:linear-gradient(90deg,rgba(133,78,199,.35),#a66bea,rgba(133,78,199,.35));
  box-shadow:0 0 14px rgba(150,89,222,.32);
}

.create-stage-wrap{
  position:relative;
  min-height:390px;
  max-height:calc(94vh - 210px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#33203f transparent;
}
.create-stage-wrap::-webkit-scrollbar{width:6px}.create-stage-wrap::-webkit-scrollbar-track{background:transparent}.create-stage-wrap::-webkit-scrollbar-thumb{background:#33203f;border-radius:8px}
.create-step{display:none;padding:16px 17px 18px;animation:createStepIn .22s ease both}
.create-step.active{display:block}
@keyframes createStepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.create-game-panel{display:none;animation:createStepIn .2s ease both}.create-game-panel.active{display:block}

.create-field{margin-bottom:13px}.create-field:last-child{margin-bottom:0}
.create-label,.create-label-row{margin:0 2px 6px;color:#817a88;font-size:8px;font-weight:700}
.create-label.strong{color:#e5dfeb;font-size:9px;font-weight:900}
.create-label-row{display:flex;align-items:center;justify-content:space-between}.create-label-row small{font-size:7px;color:#5d5664}
.create-split-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.create-category-card{
  width:100%;min-height:55px;
  display:flex;align-items:center;justify-content:space-between;
  border:1px solid rgba(151,89,222,.42);
  border-radius:10px;
  padding:9px 12px;
  background:linear-gradient(110deg,rgba(89,44,128,.17),rgba(24,14,34,.08));
  text-align:left;cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 0 20px rgba(97,49,144,.035);
  transition:.18s ease;
}
.create-category-card:hover{transform:translateY(-1px);border-color:rgba(176,111,250,.61);background:linear-gradient(110deg,rgba(105,53,151,.23),rgba(29,16,41,.10));box-shadow:0 8px 22px rgba(42,17,64,.16),inset 0 1px rgba(255,255,255,.04)}
.create-category-card strong,.create-category-card small{display:block}.create-category-card strong{font-size:10px;color:#d9bdf6}.create-category-card small{font-size:7px;color:#8a6da4;margin-top:2px}.create-category-card>span{font-size:19px;color:#72548e}

.create-segment-grid{display:grid;gap:7px}.create-segment-grid.one{grid-template-columns:1fr}.create-segment-grid.two{grid-template-columns:repeat(2,1fr)}.create-segment-grid.four{grid-template-columns:repeat(4,1fr)}.create-segment-grid.five{grid-template-columns:repeat(5,1fr)}
.create-option,.create-loadout,.create-credit{
  position:relative;
  min-height:39px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  background:rgba(5,5,8,.72);
  color:#bbb6c1;
  font-size:9px;
  font-weight:850;
  cursor:pointer;
  transition:border-color .16s,background .16s,color .16s,transform .16s,box-shadow .16s;
  overflow:hidden;
}
.create-option::before,.create-loadout::before,.create-credit::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent,rgba(177,117,246,.055),transparent);
  transform:translateX(-120%);transition:transform .45s ease;
}
.create-option:hover::before,.create-loadout:hover::before,.create-credit:hover::before{transform:translateX(120%)}
.create-option:hover,.create-loadout:hover,.create-credit:hover{border-color:rgba(131,80,186,.38);color:#eee7f4;transform:translateY(-1px);background:rgba(29,17,39,.50)}
.create-option.active,.create-loadout.active,.create-credit.active{
  border-color:rgba(162,95,231,.72);
  background:linear-gradient(135deg,rgba(93,45,137,.28),rgba(41,23,58,.18));
  color:#d9bdf7;
  box-shadow:0 0 19px rgba(106,54,157,.08),inset 0 0 16px rgba(141,75,206,.04);
}
.create-option.locked{cursor:pointer;color:#5b5661;border-style:dashed;background:rgba(3,3,5,.45)}
.create-option.locked:hover{transform:none;color:#716978;border-color:rgba(117,81,151,.25)}
.create-option.locked span{position:absolute;right:5px;top:4px;border:1px solid rgba(118,73,160,.18);border-radius:999px;padding:1px 4px;font-size:5px;color:#765b8c;background:rgba(61,35,82,.12)}

.create-inline-back{border:0;background:transparent;color:#716b77;padding:0 0 12px;font-size:8.5px;cursor:pointer}.create-inline-back:hover{color:#cdbede}
.create-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.create-mode-grid .create-option{min-height:43px;text-align:left;padding:0 11px}
.create-loadout-list{display:grid;gap:5px;max-height:190px;overflow:auto;padding-right:2px;scrollbar-width:thin;scrollbar-color:#34203f transparent}
.create-loadout{min-height:36px;text-align:left;padding:0 10px}
.create-toggle-row{width:100%;min-height:56px;border:1px solid rgba(255,255,255,.075);border-radius:10px;background:rgba(5,5,8,.60);padding:9px 10px;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;cursor:pointer;transition:.18s}.create-toggle-row:hover{border-color:rgba(128,76,181,.30);background:rgba(24,15,32,.52)}.create-toggle-row strong,.create-toggle-row small{display:block}.create-toggle-row strong{font-size:9px}.create-toggle-row small{margin-top:3px;color:#67616d;font-size:7px;line-height:1.35}.create-switch{width:34px;height:19px;border-radius:999px;border:1px solid rgba(255,255,255,.09);background:#111014;padding:2px;transition:.18s;flex:0 0 auto}.create-switch i{display:block;width:13px;height:13px;border-radius:50%;background:#4b4850;transition:.18s}.create-toggle-row.active .create-switch{border-color:rgba(155,92,225,.42);background:rgba(91,42,132,.33);box-shadow:0 0 14px rgba(112,55,163,.08)}.create-toggle-row.active .create-switch i{transform:translateX(15px);background:#b882ec;box-shadow:0 0 8px rgba(177,117,235,.28)}

.create-credit-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.create-credit{display:flex;align-items:center;justify-content:center;gap:5px;min-height:39px}.create-credit span{font-size:8px;color:#a66de0}.create-sandbox-note{margin-top:9px;border:1px solid rgba(134,83,183,.15);border-radius:8px;background:rgba(66,38,88,.075);padding:8px 9px;color:#756b7e;font-size:7px;line-height:1.45}
.create-match-summary{margin-top:18px;border:1px solid rgba(141,86,198,.20);border-radius:11px;background:linear-gradient(145deg,rgba(42,23,57,.15),rgba(5,5,8,.66));padding:12px;box-shadow:inset 0 1px rgba(255,255,255,.018)}.create-summary-title{font-size:10px;font-weight:900;margin-bottom:10px}.create-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.create-summary-grid>div,.create-summary-loadout{border:1px solid rgba(255,255,255,.065);border-radius:8px;background:rgba(2,2,4,.48);padding:9px}.create-summary-grid span,.create-summary-loadout span{display:block;color:#66606c;font-size:6.5px;text-transform:uppercase;letter-spacing:.07em}.create-summary-grid strong,.create-summary-loadout strong{display:block;margin-top:4px;color:#d2c6dd;font-size:9px}.create-summary-loadout{margin-top:7px}

.create-foot{
  min-height:58px;
  padding:9px 12px;
  justify-content:stretch;
  gap:8px;
  border-top:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(4,3,6,.94),rgba(2,2,3,.99));
}
.create-foot .btn{min-height:40px;border-radius:8px;font-size:9px}
.create-cancel{width:90px;flex:0 0 90px}.create-next,.create-submit{flex:1}
.create-next{
  border-color:rgba(150,89,217,.48)!important;
  background:linear-gradient(135deg,rgba(103,50,151,.82),rgba(65,33,96,.88))!important;
  color:#f4ebfb!important;
  box-shadow:0 8px 24px rgba(83,39,123,.16),inset 0 1px rgba(255,255,255,.07)!important;
}
.create-next:hover{border-color:rgba(178,111,246,.66)!important;background:linear-gradient(135deg,rgba(119,59,171,.91),rgba(73,37,108,.94))!important;box-shadow:0 10px 30px rgba(93,43,138,.23)!important}
.create-submit{border-color:rgba(160,98,225,.58)!important;background:linear-gradient(135deg,#7f45b8,#5a327f)!important;box-shadow:0 8px 27px rgba(89,42,131,.18),inset 0 1px rgba(255,255,255,.11)!important}
.create-foot .btn span{font-size:12px;transition:transform .17s}.create-foot .btn:hover span{transform:translateX(2px)}

@media(max-width:560px){
  .create-wizard{width:calc(100vw - 12px);max-height:97vh;border-radius:13px}
  .create-head{min-height:66px;padding:13px 14px 11px}.create-summary{gap:5px 8px;padding:6px 8px}.create-tabs{height:43px}.create-stage-wrap{max-height:calc(97vh - 195px);min-height:360px}.create-step{padding:13px 12px 15px}.create-split-fields{grid-template-columns:1fr}.create-segment-grid.four{grid-template-columns:repeat(2,1fr)}.create-credit-grid{grid-template-columns:repeat(3,1fr)}.create-summary-grid{grid-template-columns:1fr}.create-foot{padding:8px}.create-cancel{width:76px;flex-basis:76px}.create-mode-grid{gap:6px}.create-option,.create-loadout,.create-credit{min-height:38px}
}
@media(prefers-reduced-motion:reduce){.create-wizard::before,.create-wizard::after{animation:none!important}.create-step,.create-game-panel{animation:none!important}.create-option::before,.create-loadout::before,.create-credit::before{display:none}}

/* v0.12 mode-aware rules */
.room-rule-detail.conditional-rule{margin-top:5px;border:1px solid rgba(157,94,255,.18);border-radius:8px;background:linear-gradient(90deg,rgba(116,45,211,.105),rgba(77,28,142,.035));padding:9px 8px}.room-rule-detail.conditional-rule span{color:#a87adb}.room-rule-detail.conditional-rule strong{color:#d8c0ff}.room-rules-copy h3{color:#b77cff}.room-rules-copy li::marker{color:#9f64f5}.room-rules-copy ol{color:#a29ba8}.room-see-rules{margin-top:11px;padding:0;border:0;background:none;color:#ad78ff;font:inherit;font-size:7.5px;font-weight:850;cursor:pointer;letter-spacing:.015em;transition:color .16s ease,transform .16s ease}.room-see-rules span{display:inline-block;margin-left:3px;transition:transform .16s ease}.room-see-rules:hover{color:#d1b5ff;transform:translateX(1px)}.room-see-rules:hover span{transform:translateX(2px)}.rule-live-dot{background:#9d63f5;box-shadow:0 0 14px rgba(157,99,245,.34)}
.rules-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.mode-rules-card{position:relative;overflow:hidden;padding:17px;background:linear-gradient(145deg,rgba(11,8,17,.94),rgba(5,4,9,.96));border-color:rgba(151,92,240,.15)}.mode-rules-card::before{content:"";position:absolute;inset:-55% 25% 60% -20%;background:radial-gradient(circle,rgba(138,72,230,.13),transparent 64%);pointer-events:none;transition:opacity .2s ease,transform .35s ease}.mode-rules-card:hover::before{transform:translate(7%,7%);opacity:1.3}.mode-rules-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.055)}.mode-rules-head span{font-size:7px;color:#7f7787;text-transform:uppercase;letter-spacing:.09em}.mode-rules-head h2{margin:3px 0 0;font-size:15px;letter-spacing:-.025em}.mode-rules-count{border:1px solid rgba(153,92,245,.2);background:rgba(112,47,205,.08);border-radius:999px;padding:5px 7px!important;color:#ad7bea!important;white-space:nowrap}.mode-rules-card ol{margin:13px 0 0;padding-left:21px;color:#aaa3b0;font-size:8.5px;line-height:1.62}.mode-rules-card li+li{margin-top:8px}.mode-rules-card li::marker{color:#9f63f4;font-weight:900}.conditional-rules-panel{margin-top:11px;display:flex;gap:13px;align-items:flex-start;padding:15px 17px;border-color:rgba(151,92,240,.18);background:linear-gradient(105deg,rgba(103,42,181,.08),rgba(6,5,10,.94) 42%)}.conditional-rules-icon{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border-radius:9px;border:1px solid rgba(160,99,246,.25);background:rgba(126,58,217,.09);color:#b780ff;box-shadow:0 0 24px rgba(126,58,217,.08)}.conditional-rules-panel span{display:block;font-size:6.5px;color:#9b70d8;text-transform:uppercase;letter-spacing:.1em;font-weight:900}.conditional-rules-panel h3{margin:3px 0 5px;font-size:11px}.conditional-rules-panel p{margin:0;color:#817a87;font-size:8px;line-height:1.55}.conditional-rules-panel p strong{color:#bca8d1}@media(max-width:780px){.rules-mode-grid{grid-template-columns:1fr}}


/* ============================================================
   ELITES v0.13 — compact match browser + glass dropdowns + wallet
   ============================================================ */

/* Live Matches: cleaner proportions and a reference-style control bar */
#page-matches{
  --available-accent:#a66cff;
  --ongoing-accent:#ff6b46;
}
#page-matches .page-head{
  align-items:center;
  margin-bottom:11px;
}
#page-matches .page-head h1{
  font-size:clamp(29px,3vw,39px);
  line-height:1;
}
#page-matches .sub{margin-top:5px;font-size:9px;color:#686372}
#page-matches .head-actions .btn{
  min-height:34px;
  border-radius:9px;
  padding:0 12px;
  font-size:8.5px;
}
#page-matches .head-actions .btn.primary{
  border-color:rgba(172,105,255,.56);
  background:linear-gradient(135deg,rgba(142,79,225,.92),rgba(92,48,147,.94));
  box-shadow:0 8px 25px rgba(111,57,175,.18),inset 0 1px rgba(255,255,255,.09);
}

.match-toolbar{
  position:relative;
  z-index:18;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.match-view-tabs{
  display:flex;
  align-items:center;
  gap:4px;
  min-height:36px;
  padding:3px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:rgba(6,5,9,.46);
  backdrop-filter:blur(18px) saturate(125%);
  box-shadow:inset 0 1px rgba(255,255,255,.02);
}
.match-view-tab{
  height:29px;
  min-width:91px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:#77717f;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:8px;
  font-weight:900;
  cursor:pointer;
  transition:.17s ease;
}
.match-view-tab b{
  min-width:17px;
  height:17px;
  padding:0 5px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:7px;
  background:rgba(255,255,255,.05);
  color:#9b95a2;
}
.match-view-tab:hover{color:#ddd3e7;background:rgba(255,255,255,.025)}
.match-view-tab.available.active{
  color:#f3eaff;
  border-color:rgba(169,107,255,.38);
  background:linear-gradient(135deg,rgba(124,66,192,.42),rgba(72,37,113,.28));
  box-shadow:0 0 20px rgba(125,66,194,.10),inset 0 1px rgba(255,255,255,.05);
}
.match-view-tab.available.active b{background:rgba(181,125,255,.17);color:#d8bcff}
.match-view-tab.ongoing.active{
  color:#ffe7dd;
  border-color:rgba(255,103,70,.40);
  background:linear-gradient(135deg,rgba(182,63,43,.38),rgba(96,32,28,.28));
  box-shadow:0 0 21px rgba(255,91,57,.10),inset 0 1px rgba(255,255,255,.045);
}
.match-view-tab.ongoing.active b{background:rgba(255,108,72,.16);color:#ffab93}

.match-filter-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  flex-wrap:wrap;
}
.filter-dropdown{position:relative}
.filter-trigger{
  height:33px;
  min-width:116px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:9px;
  background:rgba(7,6,10,.50);
  backdrop-filter:blur(18px) saturate(125%);
  color:#aaa4b2;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:8px;
  font-weight:850;
  cursor:pointer;
  transition:.16s ease;
  box-shadow:inset 0 1px rgba(255,255,255,.018);
}
.filter-trigger:hover,.filter-dropdown.open .filter-trigger{
  border-color:rgba(155,95,235,.31);
  background:rgba(35,20,50,.42);
  color:#eee7f4;
}
.filter-symbol{color:#9d6bd1;font-size:9px}
.filter-chevron{margin-left:auto;color:#62596d;font-size:9px;transition:transform .16s ease}
.filter-dropdown.open .filter-chevron{transform:rotate(180deg)}
.sort-dropdown .filter-trigger{min-width:101px}
.filter-menu{
  position:absolute;
  z-index:150;
  top:calc(100% + 6px);
  left:0;
  min-width:175px;
  padding:5px;
  border:1px solid rgba(167,105,246,.20);
  border-radius:10px;
  background:linear-gradient(160deg,rgba(20,12,29,.83),rgba(6,5,9,.79));
  backdrop-filter:blur(28px) saturate(145%);
  box-shadow:0 22px 60px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.035);
  opacity:0;
  visibility:hidden;
  transform:translateY(-5px) scale(.985);
  transform-origin:top left;
  transition:.14s ease;
}
.filter-menu.align-right{left:auto;right:0;transform-origin:top right}
.filter-dropdown.open .filter-menu{
  opacity:1;
  visibility:visible;
  transform:none;
}
.filter-option{
  width:100%;
  min-height:31px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:#8f8798;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 9px;
  text-align:left;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
  transition:.14s ease;
}
.filter-option span{opacity:0;color:#bf93f3}
.filter-option:hover{
  color:#eee8f3;
  background:rgba(120,64,177,.10);
  border-color:rgba(144,82,207,.11);
}
.filter-option.active{
  color:#d8c4ef;
  background:linear-gradient(90deg,rgba(108,53,166,.19),rgba(64,36,89,.06));
  border-color:rgba(149,88,218,.17);
}
.filter-option.active span{opacity:1}
.filter-group-label{
  padding:7px 9px 4px;
  color:#544b5c;
  font-size:6px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
}

.match-browser-shell{position:relative;z-index:1}
.match-card.browse-available{
  border-color:rgba(143,88,211,.15);
}
.match-card.browse-available .live-dot{
  background:#a56bff;
  box-shadow:0 0 13px rgba(165,107,255,.60);
}
.match-card.browse-ongoing{
  border-color:rgba(255,104,70,.15);
}
.match-card.browse-ongoing:hover{
  border-color:rgba(255,105,70,.33);
  box-shadow:0 18px 46px rgba(0,0,0,.50),0 0 28px rgba(211,67,42,.055);
}
.match-card.browse-ongoing::before{
  background:radial-gradient(260px circle at var(--cx) var(--cy),rgba(255,103,70,.095),transparent 62%);
}
.match-card.browse-ongoing .live-dot{
  background:#ff704d;
  box-shadow:0 0 13px rgba(255,112,77,.56);
}
.match-card.browse-ongoing .match-status{
  border-color:rgba(255,105,70,.12);
  background:rgba(82,27,20,.07);
  color:#ad8175;
}
.match-card .view-live{
  border-color:rgba(255,105,70,.25);
  background:linear-gradient(135deg,rgba(125,41,30,.34),rgba(66,25,23,.32));
  color:#ffd7cb;
}
.match-card .view-live:hover{border-color:rgba(255,116,82,.42);background:rgba(105,36,28,.42)}

.balance{cursor:pointer}
.balance:focus-visible,.filter-trigger:focus-visible,.match-view-tab:focus-visible,.wallet-pack-row:focus-visible,.wallet-purchase-btn:focus-visible{
  outline:2px solid rgba(174,111,255,.50);
  outline-offset:2px;
}

/* Wallet: small glass HUD opened from the centered credits pill */
.wallet-backdrop{
  align-items:flex-start;
  justify-content:center;
  padding:62px 14px 18px;
  background:rgba(0,0,0,.34);
  backdrop-filter:blur(5px);
}
.wallet-modal{
  width:min(382px,calc(100vw - 22px));
  max-height:calc(100vh - 78px);
  overflow:auto;
  border:1px solid rgba(168,106,245,.23);
  border-radius:14px;
  background:
    radial-gradient(280px circle at 18% 0%,rgba(137,70,215,.14),transparent 62%),
    linear-gradient(160deg,rgba(18,11,27,.86),rgba(6,5,9,.82));
  backdrop-filter:blur(32px) saturate(145%);
  box-shadow:0 30px 90px rgba(0,0,0,.68),0 0 42px rgba(104,55,163,.08),inset 0 1px rgba(255,255,255,.045);
  animation:walletIn .17s ease both;
}
@keyframes walletIn{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
.wallet-head{
  min-height:56px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.065);
  background:rgba(8,5,12,.22);
}
.wallet-title-wrap{display:flex;align-items:center;gap:9px}
.wallet-icon{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  border:1px solid rgba(167,103,244,.22);
  background:rgba(111,55,170,.12);
  color:#ba88ef;
  font-size:12px;
}
.wallet-head h2{margin:0;font-size:13px;letter-spacing:-.02em}
.wallet-head p{margin:2px 0 0;color:#655d6e;font-size:7px}
.wallet-close{width:29px;height:29px;border-radius:8px;background:rgba(255,255,255,.018)}
.wallet-balance-block{padding:12px 13px 10px}
.wallet-balance-block>span,.wallet-section-label{
  display:block;color:#6f6778;font-size:7px;text-transform:uppercase;letter-spacing:.10em;font-weight:900
}
.wallet-balance-block strong{
  margin-top:6px;display:flex;align-items:center;gap:7px;font-size:18px;letter-spacing:-.025em
}
.wallet-balance-block small{display:block;margin-top:5px;color:#5f5866;font-size:7px}
.wallet-coin,.wallet-mini-coin{
  font-style:normal;border-radius:50%;display:grid;place-items:center;font-weight:950;
  color:#f0dfff;background:linear-gradient(145deg,#b16cf0,#6c32aa);box-shadow:0 0 14px rgba(153,88,214,.15)
}
.wallet-coin{width:20px;height:20px;font-size:8px}
.wallet-mini-coin{width:17px;height:17px;font-size:6px;flex:0 0 auto}
.wallet-section-label{padding:3px 13px 7px}
.wallet-pack-list{
  margin:0 10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:rgba(2,2,4,.20);
}
.wallet-pack-row{
  width:100%;
  min-height:43px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:rgba(5,4,8,.18);
  color:#b9b2c0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 11px;
  cursor:pointer;
  transition:.15s ease;
}
.wallet-pack-row:last-child{border-bottom:0}
.wallet-pack-row>span{display:flex;align-items:center;gap:8px;min-width:0}
.wallet-pack-row strong{font-size:9px;color:#d7d1dc}
.wallet-pack-row b{font-size:9px;color:#d9d3df}
.wallet-pack-row em{
  font-style:normal;
  border:1px solid rgba(178,111,250,.25);
  border-radius:999px;
  padding:2px 5px;
  color:#b984ef;
  background:rgba(117,58,173,.10);
  font-size:5.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.wallet-pack-row:hover{
  background:rgba(89,45,130,.10);
}
.wallet-pack-row.active{
  background:linear-gradient(90deg,rgba(113,55,173,.22),rgba(61,32,88,.07));
  box-shadow:inset 2px 0 #a76eff;
}
.wallet-pack-row.active strong,.wallet-pack-row.active b{color:#f1e8f8}
.wallet-purchase-note{
  margin:9px 12px 0;
  min-height:18px;
  color:#6f6678;
  font-size:7px;
  line-height:1.4;
}
.wallet-purchase-btn{
  width:calc(100% - 20px);
  min-height:42px;
  margin:5px 10px 0;
  border:1px solid rgba(169,104,246,.46);
  border-radius:9px;
  background:linear-gradient(135deg,rgba(127,65,194,.92),rgba(77,40,119,.94));
  color:#f5edfb;
  font-size:9px;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(92,43,142,.18),inset 0 1px rgba(255,255,255,.08);
  transition:.16s ease;
}
.wallet-purchase-btn:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(188,126,255,.65);box-shadow:0 12px 32px rgba(100,47,151,.24)}
.wallet-purchase-btn:disabled{opacity:.50;cursor:wait}
.wallet-purchase-btn span{margin-left:6px}
.wallet-transactions-link{
  width:100%;
  min-height:36px;
  border:0;
  background:transparent;
  color:#756a80;
  font-size:7px;
  font-weight:800;
  cursor:pointer;
}
.wallet-transactions-link:hover{color:#c2add6}

/* Create Match: real glass transparency rather than an opaque dark box */
.create-backdrop{
  background:rgba(0,0,0,.37)!important;
  backdrop-filter:blur(7px) saturate(120%)!important;
}
.create-wizard{
  border-color:rgba(166,103,244,.22)!important;
  background:
    radial-gradient(420px circle at 10% 0%,rgba(145,76,222,.12),transparent 64%),
    linear-gradient(160deg,rgba(18,10,27,.83),rgba(5,4,8,.76))!important;
  backdrop-filter:blur(34px) saturate(145%)!important;
  box-shadow:0 34px 110px rgba(0,0,0,.67),0 0 48px rgba(102,50,158,.065),inset 0 1px rgba(255,255,255,.045)!important;
}
.create-head{
  background:rgba(7,5,10,.20)!important;
  border-bottom-color:rgba(255,255,255,.065)!important;
}
.create-summary{
  background:rgba(6,4,9,.18)!important;
}
.create-tabs{
  background:rgba(5,4,8,.17)!important;
}
.create-stage-wrap{
  background:rgba(3,2,5,.06)!important;
}
.create-foot{
  background:linear-gradient(180deg,rgba(12,7,17,.47),rgba(5,4,8,.66))!important;
  backdrop-filter:blur(18px)!important;
}
.create-category-card,
.create-option,.create-loadout,.create-credit,
.create-toggle-row,.create-match-summary,
.create-summary-grid>div,.create-summary-loadout{
  background-color:rgba(7,5,10,.38)!important;
}
.create-category-card.active,
.create-option.active,.create-loadout.active,.create-credit.active{
  background:linear-gradient(135deg,rgba(92,45,138,.28),rgba(40,22,57,.13))!important;
}
.create-toggle-row:hover,.create-option:hover,.create-loadout:hover,.create-credit:hover{
  background-color:rgba(45,24,61,.34)!important;
}

/* Sidebar wallet icon keeps the green account accent out of the current wallet UI */
#walletNavBtn{--nav-accent:#a56bff}
#walletDockBtn{cursor:pointer}

@media(max-width:1120px){
  .match-toolbar{align-items:flex-start;flex-direction:column}
  .match-filter-row{width:100%;justify-content:flex-start}
}
@media(max-width:720px){
  #page-matches .page-head{align-items:flex-start}
  .match-view-tabs{width:100%}
  .match-view-tab{flex:1}
  .match-filter-row{display:grid;grid-template-columns:1fr 1fr}
  .filter-trigger{width:100%;min-width:0}
  .filter-menu{min-width:100%;width:max-content;max-width:calc(100vw - 30px)}
  .sort-dropdown .filter-trigger{min-width:0}
  .wallet-backdrop{padding-top:56px}
}
@media(max-width:480px){
  .match-filter-row{grid-template-columns:1fr}
  .filter-menu{width:100%}
  .wallet-modal{max-height:calc(100vh - 66px)}
}
@media(prefers-reduced-motion:reduce){
  .wallet-modal{animation:none!important}
}


/* v0.15 — confirmed result flow */
.room-submit-win{border-color:rgba(144,85,214,.72)!important;color:#e4ccff!important;background:linear-gradient(135deg,rgba(60,24,91,.84),rgba(31,13,50,.88))!important;box-shadow:inset 0 1px rgba(255,255,255,.06),0 8px 26px rgba(101,49,159,.12)!important}
.room-submit-win:hover:not(:disabled){border-color:rgba(184,121,255,.9)!important;background:linear-gradient(135deg,rgba(76,31,113,.92),rgba(40,17,62,.94))!important;box-shadow:0 10px 30px rgba(112,55,173,.2)!important}
.room-confirm-win{border-color:rgba(147,86,218,.75)!important;color:#ead9ff!important;background:rgba(50,21,76,.72)!important;box-shadow:inset 0 0 0 1px rgba(187,129,255,.06)}
.room-win-pending{border-color:rgba(111,68,151,.46)!important;color:#a88aba!important;background:rgba(31,19,43,.64)!important}
.room-claim-banner{margin-top:12px;border:1px solid rgba(126,77,173,.38);border-radius:12px;background:linear-gradient(135deg,rgba(48,24,69,.58),rgba(12,8,17,.72));padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:inset 0 1px rgba(255,255,255,.025)}
.room-claim-banner span{font-size:8px;letter-spacing:.1em;text-transform:uppercase;font-weight:950;color:#a978db}.room-claim-banner strong{font-size:9px;color:#cfc3d8;text-align:right}.room-claim-banner.opponent{border-color:rgba(181,95,68,.35);background:linear-gradient(135deg,rgba(67,25,18,.38),rgba(13,8,10,.72))}.room-claim-banner.opponent span{color:#d88b72}
.win-notice{border-color:rgba(131,78,181,.38)!important;background:rgba(47,22,69,.38)!important;color:#cbb8dc!important}
@media(max-width:620px){.room-claim-banner{align-items:flex-start;flex-direction:column}.room-claim-banner strong{text-align:left}}

/* ============================================================
   v0.16 — player-only home search + slightly roomier match cards
   ============================================================ */
.search-wrap.hidden{display:none!important}
.search-wrap{overflow:visible}
.player-search-results{
  position:absolute;
  z-index:220;
  top:calc(100% + 7px);
  left:0;
  width:min(390px,76vw);
  max-height:min(460px,62vh);
  overflow:auto;
  padding:5px;
  border:1px solid rgba(158,96,236,.22);
  border-radius:12px;
  background:
    radial-gradient(260px circle at 18% 0%,rgba(132,67,206,.13),transparent 65%),
    linear-gradient(160deg,rgba(20,12,29,.90),rgba(5,5,9,.86));
  backdrop-filter:blur(28px) saturate(145%);
  box-shadow:0 24px 70px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.04);
  opacity:0;
  visibility:hidden;
  transform:translateY(-5px) scale(.99);
  transform-origin:top left;
  transition:.14s ease;
}
.player-search-results.show{opacity:1;visibility:visible;transform:none}
.player-search-result{
  width:100%;min-height:48px;border:1px solid transparent;border-radius:9px;
  background:transparent;color:#eee9f4;display:grid;grid-template-columns:34px minmax(0,1fr) 14px;
  gap:9px;align-items:center;padding:6px 8px;text-align:left;cursor:pointer;transition:.14s ease;
}
.player-search-result:hover,.player-search-result:focus-visible{
  outline:none;border-color:rgba(159,98,236,.18);
  background:linear-gradient(90deg,rgba(108,53,166,.18),rgba(64,36,89,.045));
  transform:translateX(2px);
}
.player-search-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(170,108,246,.24);background:#100818;color:#d8c3ee;font-size:9px;font-weight:950}
.player-search-avatar.image img{width:100%;height:100%;object-fit:cover}
.player-search-copy{min-width:0;display:block}.player-search-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.player-search-copy small{display:block;margin-top:2px;color:#756d7d;font-size:7.5px}
.player-search-open{color:#805aa3;font-size:16px}.player-search-empty{padding:16px 12px;color:#71697a;text-align:center;font-size:9px}

/* A small size bump only — keep the compact v0.8/v0.13 proportions. */
.matches-grid{gap:11px}
.match-card{min-height:224px;padding:14px;border-radius:14px}
.match-title{font-size:13.5px}.match-host{font-size:8.8px}.match-tags{margin-top:9px}.match-stats{margin-top:11px}.stat{padding:9px 10px}.match-status{margin-top:9px;padding:8px 10px}.match-actions{padding-top:10px}.match-actions .btn{min-height:35px}
@media(max-width:860px){.match-card{min-height:210px}.player-search-results{width:min(390px,calc(100vw - 28px))}}
@media(max-width:560px){.match-card{min-height:202px;padding:12px}.player-search-result{min-height:46px}}


/* ============================================================
   v0.17 — dedicated ELITES public player profiles
   ============================================================ */
.public-player-page{padding-top:18px!important}
.public-profile-shell{width:min(1120px,100%);margin:0 auto;padding-bottom:42px}
.public-profile-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.public-back-btn,.public-favorite-btn{border:1px solid rgba(255,255,255,.08);background:rgba(6,5,9,.54);backdrop-filter:blur(16px);color:#9b909f;border-radius:10px;min-height:36px;padding:0 12px;font-size:9px;font-weight:900;cursor:pointer;transition:.15s ease}
.public-back-btn:hover,.public-favorite-btn:hover{color:#eee6f5;border-color:rgba(158,96,230,.28);background:rgba(73,37,104,.17)}
.public-profile-toolbar-actions{display:flex;align-items:center;gap:8px}.public-favorite-btn{width:38px;padding:0;font-size:17px}.public-favorite-btn.active{color:#c590ff;border-color:rgba(172,108,240,.35);background:rgba(84,41,126,.20)}
.public-mode-select{height:36px;display:flex;align-items:center;gap:8px;padding:0 5px 0 10px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(6,5,9,.54);backdrop-filter:blur(16px)}.public-mode-select span{color:#625a68;font-size:7px;text-transform:uppercase;letter-spacing:.09em;font-weight:900}.public-mode-select select{height:28px;border:0;outline:0;background:#0a0710;color:#cfc5d7;border-radius:7px;padding:0 22px 0 8px;font-size:8px;font-weight:900;cursor:pointer}
.public-profile-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:14px}.public-profile-title h1{font-size:31px;letter-spacing:-.045em;margin:3px 0 0}.public-profile-title p{margin:5px 0 0;color:#625b69;font-size:9px}
.public-profile-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid rgba(157,93,226,.20);border-radius:16px;background:radial-gradient(380px circle at 10% 10%,rgba(133,67,198,.15),transparent 68%),linear-gradient(145deg,rgba(15,9,22,.72),rgba(5,4,8,.64));backdrop-filter:blur(24px);padding:18px 20px;box-shadow:inset 0 1px rgba(255,255,255,.035),0 18px 55px rgba(0,0,0,.20)}
.public-profile-hero::after{content:"";position:absolute;width:250px;height:250px;border-radius:50%;right:-110px;top:-130px;background:radial-gradient(circle,rgba(168,94,242,.10),transparent 68%);pointer-events:none}
.public-player-identity{display:flex;align-items:center;gap:14px;min-width:0}.public-profile-avatar{width:66px;height:66px;flex:0 0 66px;border-radius:50%;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(182,116,246,.38);background:linear-gradient(145deg,#170c21,#5d2b8f);box-shadow:0 0 26px rgba(121,61,177,.16);font-size:15px;font-weight:950}.public-profile-avatar.image img{width:100%;height:100%;object-fit:cover}.public-player-identity>div:last-child{min-width:0}.public-player-identity span{color:#776b81;font-size:7px;text-transform:uppercase;letter-spacing:.12em;font-weight:950}.public-player-identity h2{margin:4px 0 7px;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.public-player-badges{display:flex;gap:6px;flex-wrap:wrap}.public-player-badges b,.public-player-badges em{font-style:normal;border-radius:999px;padding:5px 8px;font-size:7px;font-weight:950}.public-player-badges b{border:1px solid rgba(166,102,238,.30);background:rgba(91,45,136,.18);color:#c99bef}.public-player-badges em{border:1px solid rgba(255,255,255,.07);background:rgba(4,4,7,.45);color:#8e8496}
.public-player-meta{text-align:right;position:relative;z-index:1}.public-player-meta span,.public-player-meta small{display:block;color:#615968;font-size:7px}.public-player-meta strong{display:block;margin:5px 0;font-size:11px;color:#d9d0df}
.public-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:11px}.public-stat-card{min-height:170px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:linear-gradient(145deg,rgba(8,7,11,.66),rgba(4,4,7,.58));backdrop-filter:blur(20px);padding:15px;box-shadow:inset 0 1px rgba(255,255,255,.025);transition:.18s ease}.public-stat-card:hover{border-color:rgba(148,87,210,.20);transform:translateY(-1px);background:linear-gradient(145deg,rgba(16,10,22,.72),rgba(5,4,8,.60))}.public-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.055)}.public-card-head h3{margin:0;font-size:11px}.public-card-head h3 span{color:#a269d5;margin-right:6px}.public-card-head small{color:#554f5a;font-size:7px}
.performance-main{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:16px}.performance-main span,.public-metric-grid span,.versus-record span{display:block;color:#615968;font-size:7px;text-transform:uppercase;letter-spacing:.08em}.performance-main strong{display:block;margin-top:5px;font-size:22px;color:#c694f1}.performance-main>div:last-child{text-align:right}.performance-main strong i,.versus-record strong i{font-style:normal;color:#57e49a}.performance-main strong em,.versus-record strong em{font-style:normal;color:#ff788b}.record-bar{height:8px;display:flex;overflow:hidden;border-radius:999px;background:#121016;margin-top:18px}.record-bar i{background:linear-gradient(90deg,#2dd884,#61eea4)}.record-bar em{background:linear-gradient(90deg,#e94960,#ff6a7d)}
.public-metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:3px}.public-metric-grid>div{padding:13px 8px 10px;border-bottom:1px solid rgba(255,255,255,.045)}.public-metric-grid>div:nth-last-child(-n+2){border-bottom:0}.public-metric-grid strong{display:block;margin-top:5px;font-size:14px;color:#d6c9df}.public-info-rows{margin-top:6px}.public-info-rows>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}.public-info-rows>div:last-child{border-bottom:0}.public-info-rows span{color:#615968;font-size:8px}.public-info-rows strong{font-size:9px;color:#d2c8d8}.versus-record{display:flex;align-items:end;justify-content:space-between;padding:18px 0 15px}.versus-record strong{font-size:19px}.versus-copy{border-top:1px solid rgba(255,255,255,.05);padding-top:12px;color:#5f5866;font-size:8px;line-height:1.55}
.public-matches-panel{margin-top:11px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:linear-gradient(145deg,rgba(7,6,10,.66),rgba(4,4,7,.58));backdrop-filter:blur(20px);padding:15px}.public-matches-head{display:flex;align-items:end;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.055)}.public-matches-head span{color:#8d5db8;font-size:7px;text-transform:uppercase;letter-spacing:.1em;font-weight:950}.public-matches-head h3{margin:3px 0 0;font-size:13px}.public-matches-head small{color:#554f5b;font-size:7px}.public-player-matches-list{display:grid;gap:6px;margin-top:10px}.public-match-row{width:100%;min-height:52px;border:1px solid rgba(255,255,255,.055);border-radius:10px;background:rgba(3,3,6,.34);color:#ddd6e2;display:grid;grid-template-columns:64px minmax(0,1fr) 72px 14px;align-items:center;gap:10px;padding:7px 10px;text-align:left;cursor:pointer;transition:.14s ease}.public-match-row:hover{border-color:rgba(153,91,220,.22);background:rgba(65,33,91,.11);transform:translateX(2px)}.public-match-result{height:28px;border-radius:7px;display:grid;place-items:center;font-size:6.5px;font-weight:950;letter-spacing:.09em;border:1px solid rgba(255,255,255,.07)}.public-match-result.win{color:#62e99f;border-color:rgba(51,180,111,.25);background:rgba(21,91,57,.14)}.public-match-result.loss{color:#ff8191;border-color:rgba(201,70,90,.23);background:rgba(91,26,37,.13)}.public-match-result.cancelled{color:#968b9e;background:rgba(255,255,255,.025)}.public-match-main{min-width:0}.public-match-main strong{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.public-match-main small{display:block;margin-top:3px;color:#615969;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.public-match-time{text-align:right;color:#62596a;font-size:7px}.public-match-arrow{color:#8058a2;font-size:15px}.public-view-matches{width:100%;min-height:37px;margin-top:9px;border:1px solid rgba(156,95,226,.18);border-radius:9px;background:linear-gradient(90deg,rgba(83,40,123,.13),rgba(32,19,44,.07));color:#b995d7;font-size:8px;font-weight:950;cursor:pointer;transition:.14s}.public-view-matches:hover{border-color:rgba(171,107,240,.32);color:#e3cdf5;background:rgba(78,37,117,.18)}.public-profile-empty{padding:22px;text-align:center;color:#655d6c;font-size:8px}.public-profile-loading,.public-profile-empty-page{min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#756b7e;font-size:9px;text-align:center}.public-profile-empty-page h2{margin:0;color:#ece7ef}.public-profile-empty-page p{margin:0;color:#665f6c}.room-player-card.public-player-link{cursor:pointer}.room-player-card.public-player-link:hover{border-color:rgba(151,88,215,.30)!important;background:linear-gradient(135deg,rgba(66,31,96,.14),rgba(5,4,8,.58))!important;transform:translateY(-1px)}
@media(max-width:760px){.public-profile-shell{padding-bottom:70px}.public-profile-title h1{font-size:26px}.public-profile-hero{align-items:flex-start;flex-direction:column}.public-player-meta{text-align:left}.public-stats-grid{grid-template-columns:1fr}.public-match-row{grid-template-columns:58px minmax(0,1fr) 14px}.public-match-time{display:none}.public-matches-head{align-items:flex-start;flex-direction:column}.public-profile-toolbar{align-items:flex-start}.public-mode-select span{display:none}}
@media(max-width:480px){.public-profile-avatar{width:56px;height:56px;flex-basis:56px}.public-player-identity h2{font-size:16px}.public-profile-toolbar-actions{gap:5px}.public-mode-select{padding-left:5px}.public-mode-select select{max-width:120px}.public-stat-card{min-height:155px}.performance-main strong{font-size:19px}}

.public-profile-open.player,.public-profile-open.pod{border:0;color:inherit;font:inherit;cursor:pointer}.public-profile-open.player{background:transparent;text-align:left;padding:0}.public-profile-open.pod{background:transparent}.public-profile-open.player:hover .player-name,.public-profile-open.pod:hover .pod-name{color:#cda2f4}

.room-result-card.spectator{border-color:rgba(139,83,194,.30)!important;background:linear-gradient(135deg,rgba(50,24,72,.28),rgba(7,5,10,.7))!important}.room-result-card.spectator span{color:#a878d2!important}


/* ============================================================
   v0.18 — compact public profile layout
   ============================================================ */
.public-player-page{padding-top:10px!important}
.public-profile-shell{
  width:min(620px,calc(100% - 22px));
  margin:10px auto 34px;
  padding:13px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(7,5,10,.78),rgba(3,3,6,.72));
  backdrop-filter:blur(24px);
  box-shadow:0 24px 70px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.028);
}
.public-profile-toolbar{margin-bottom:8px;gap:8px}
.public-back-btn,.public-favorite-btn{min-height:31px;border-radius:8px;font-size:8px;padding:0 10px}
.public-favorite-btn{width:32px;font-size:15px}
.public-mode-select{height:31px;border-radius:8px;padding:0 4px 0 8px;gap:6px}
.public-mode-select select{height:23px;border-radius:6px;font-size:7.5px;max-width:130px}
.public-mode-select span{font-size:6.5px}
.public-profile-title{margin:4px 0 10px}
.public-profile-title h1{font-size:15px;letter-spacing:-.025em;margin:0}
.public-profile-title p{margin:4px 0 0;font-size:8px;color:#716978}
.public-profile-hero{
  min-height:92px;
  padding:11px 12px;
  border-radius:11px;
  gap:11px;
  background:radial-gradient(240px circle at 8% 8%,rgba(119,54,176,.13),transparent 70%),linear-gradient(145deg,rgba(13,8,19,.68),rgba(5,4,8,.58));
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.public-profile-hero::after{width:160px;height:160px;right:-78px;top:-90px}
.public-player-identity{gap:10px}
.public-profile-avatar{width:52px;height:52px;flex:0 0 52px;font-size:12px;box-shadow:0 0 18px rgba(121,61,177,.12)}
.public-player-identity span{font-size:6px}
.public-player-identity h2{margin:3px 0 5px;font-size:15px}
.public-player-badges{gap:4px}
.public-player-badges b,.public-player-badges em{padding:4px 6px;font-size:6.3px}
.public-player-meta span,.public-player-meta small{font-size:6.3px}
.public-player-meta strong{font-size:9px;margin:3px 0}
.public-stats-grid{gap:8px;margin-top:8px}
.public-stat-card{
  min-height:128px;
  border-radius:10px;
  padding:10px;
  background:linear-gradient(145deg,rgba(8,7,11,.58),rgba(4,4,7,.50));
}
.public-stat-card:hover{transform:none}
.public-card-head{padding-bottom:8px}
.public-card-head h3{font-size:9.5px}
.public-card-head h3 span{margin-right:5px}
.public-card-head small{font-size:6.3px}
.performance-main{gap:8px;padding-top:10px}
.performance-main span,.public-metric-grid span,.versus-record span{font-size:6.2px}
.performance-main strong{margin-top:3px;font-size:17px}
.record-bar{height:6px;margin-top:11px}
.public-metric-grid>div{padding:8px 5px 7px}
.public-metric-grid strong{margin-top:3px;font-size:11px}
.public-info-rows{margin-top:3px}
.public-info-rows>div{padding:7px 0}
.public-info-rows span{font-size:6.8px}
.public-info-rows strong{font-size:7.5px}
.versus-record{padding:11px 0 9px}
.versus-record strong{font-size:15px}
.versus-copy{padding-top:8px;font-size:6.8px;line-height:1.42}
.public-matches-panel{margin-top:8px;border-radius:10px;padding:10px}
.public-matches-head{padding-bottom:8px}
.public-matches-head span{font-size:6px}
.public-matches-head h3{font-size:10px;margin-top:2px}
.public-matches-head small{font-size:6px}
.public-player-matches-list{gap:5px;margin-top:7px}
.public-match-row{
  min-height:43px;
  grid-template-columns:52px minmax(0,1fr) 58px 10px;
  gap:7px;
  padding:5px 7px;
  border-radius:8px;
}
.public-match-result{height:24px;border-radius:6px;font-size:5.8px}
.public-match-main strong{font-size:7.8px}
.public-match-main small{margin-top:2px;font-size:6.2px}
.public-match-time{font-size:6px}
.public-match-arrow{font-size:12px}
.public-view-matches{min-height:31px;margin-top:7px;border-radius:7px;font-size:7.3px}
.public-profile-empty{padding:15px;font-size:7px}

@media(max-width:760px){
  .public-profile-shell{width:min(620px,calc(100% - 16px));padding:10px;margin-top:7px}
  .public-profile-hero{flex-direction:row;align-items:center}
  .public-player-meta{text-align:right}
  .public-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .public-matches-head{flex-direction:row;align-items:end}
  .public-profile-toolbar{align-items:center}
}
@media(max-width:560px){
  .public-profile-shell{width:calc(100% - 10px);padding:8px;border-radius:12px}
  .public-profile-hero{align-items:flex-start;flex-direction:column}
  .public-player-meta{text-align:left}
  .public-stats-grid{grid-template-columns:1fr}
  .public-stat-card{min-height:auto}
  .public-match-row{grid-template-columns:48px minmax(0,1fr) 10px}
  .public-match-time{display:none}
  .public-matches-head{align-items:flex-start;flex-direction:column}
  .public-profile-title h1{font-size:14px}
}

/* ============================================================
   v0.19 — live match readability pass
   Make match information easier to scan without returning to bulky cards.
   ============================================================ */
#page-matches .matches-grid{
  gap:12px;
}
#page-matches .match-card{
  min-height:240px;
  padding:15px 15px 14px;
  border-radius:14px;
}
#page-matches .match-title{
  font-size:15px;
  line-height:1.18;
  letter-spacing:-.018em;
}
#page-matches .match-host{
  margin-top:4px;
  font-size:9.5px;
  line-height:1.35;
  color:#8c8794;
}
#page-matches .live-dot{
  width:8px;
  height:8px;
}
#page-matches .match-tags{
  gap:6px;
  margin-top:10px;
}
#page-matches .tag{
  padding:4px 7px;
  font-size:8.2px;
  line-height:1;
  letter-spacing:.035em;
}
#page-matches .match-stats{
  gap:8px;
  margin-top:13px;
}
#page-matches .stat{
  min-height:60px;
  padding:10px 11px;
  border-radius:9px;
  background:rgba(255,255,255,.023);
}
#page-matches .stat label{
  margin-bottom:6px;
  font-size:7.8px;
  line-height:1.15;
  letter-spacing:.095em;
  color:#85808d;
}
#page-matches .stat strong{
  font-size:13.5px;
  line-height:1.15;
  color:#f3eef7;
}
#page-matches .match-status{
  margin-top:10px;
  padding:9px 10px;
  font-size:9.5px;
  line-height:1.45;
}
#page-matches .match-actions{
  padding-top:11px;
}
#page-matches .match-actions .btn{
  min-height:38px;
  font-size:9.6px;
  letter-spacing:.015em;
}

/* Give the money/status numbers a little extra visual weight. */
#page-matches .match-card .stat strong,
#page-matches .match-card .match-status b{
  font-weight:950;
}

@media(max-width:860px){
  #page-matches .match-card{min-height:232px;padding:14px}
  #page-matches .match-title{font-size:14.5px}
  #page-matches .stat strong{font-size:13px}
}
@media(max-width:560px){
  #page-matches .match-card{min-height:226px;padding:13px}
  #page-matches .match-title{font-size:14px}
  #page-matches .match-host{font-size:9px}
  #page-matches .tag{font-size:7.8px}
  #page-matches .stat label{font-size:7.4px}
  #page-matches .stat strong{font-size:12.7px}
}

/* ============================================================
   v0.20 — larger readable controls pass
   Address feedback that cards and buttons still feel too small.
   Keep things sleek, but make primary actions and key values easier to read.
   ============================================================ */

/* Global button bump */
.btn{
  min-height:40px;
  padding:0 14px;
  font-size:10.4px;
  letter-spacing:.012em;
  border-radius:10px;
}
.head-actions .btn,
.room-action-bar .btn,
.create-foot .btn,
.modal-foot .btn,
.inline-actions .btn{
  min-height:42px;
  font-size:10.8px;
}
.my-match-actions .btn{
  min-height:36px;
  font-size:10px;
}

/* Live matches readability + action size */
#page-matches .matches-grid{
  gap:14px;
}
#page-matches .match-card{
  min-height:254px;
  padding:16px 16px 15px;
  border-radius:15px;
}
#page-matches .match-title{
  font-size:16px;
  line-height:1.16;
}
#page-matches .match-host{
  margin-top:4px;
  font-size:10.2px;
}
#page-matches .tag{
  padding:4px 8px;
  font-size:8.8px;
}
#page-matches .stat{
  min-height:64px;
  padding:11px 12px;
}
#page-matches .stat label{
  font-size:8.4px;
  margin-bottom:7px;
}
#page-matches .stat strong{
  font-size:14.6px;
}
#page-matches .match-status{
  padding:10px 11px;
  font-size:10.2px;
}
#page-matches .match-actions{
  gap:8px;
  padding-top:12px;
}
#page-matches .match-actions .btn{
  min-height:44px;
  font-size:11.2px;
  letter-spacing:.02em;
}

/* Top utility controls slightly larger too */
#page-matches .filters .chip,
#page-matches .filters button,
#page-matches .filters .dropdown-trigger,
#page-matches .head-actions .btn{
  min-height:40px;
  font-size:10.5px;
}

/* Create-match wizard buttons and choices */
.create-step,
.create-choice,
.choice,
.segmented-option,
.token-choice{
  min-height:42px;
}
.create-foot .btn,
.modal-foot .btn{
  min-height:44px;
  font-size:11px;
}

@media(max-width:860px){
  .btn{min-height:39px;font-size:10.1px}
  #page-matches .match-card{min-height:244px;padding:15px}
  #page-matches .match-title{font-size:15.2px}
  #page-matches .stat strong{font-size:14px}
  #page-matches .match-actions .btn{min-height:42px;font-size:10.9px}
}
@media(max-width:560px){
  .btn{min-height:38px;font-size:10px}
  #page-matches .matches-grid{gap:12px}
  #page-matches .match-card{min-height:238px;padding:14px}
  #page-matches .match-title{font-size:14.8px}
  #page-matches .match-host{font-size:9.8px}
  #page-matches .tag{font-size:8.2px}
  #page-matches .stat label{font-size:8px}
  #page-matches .stat strong{font-size:13.8px}
  #page-matches .match-status{font-size:9.8px}
  #page-matches .match-actions .btn{min-height:41px;font-size:10.6px}
}

/* ============================================================
   v0.21 — ELITES motion / atmosphere pass
   More visual energy without turning the interface into noisy RGB UI.
   ============================================================ */
:root{
  --violet-glow:rgba(151,84,255,.20);
  --violet-soft:rgba(119,62,183,.11);
  --glass-edge:rgba(190,137,255,.16);
}

/* Slow ambient aurora behind the app */
body::after{
  content:"";
  position:fixed;
  inset:-22vh -16vw;
  z-index:0;
  pointer-events:none;
  opacity:.72;
  background:
    radial-gradient(36vw 34vw at 18% 16%,rgba(111,47,186,.13),transparent 68%),
    radial-gradient(32vw 30vw at 83% 28%,rgba(68,49,172,.09),transparent 70%),
    radial-gradient(28vw 26vw at 62% 86%,rgba(151,67,227,.08),transparent 72%);
  filter:blur(22px);
  transform:translate3d(0,0,0);
  animation:elitesAurora 18s ease-in-out infinite alternate;
}
@keyframes elitesAurora{
  0%{transform:translate3d(-1.5%,0,0) scale(1);opacity:.55}
  50%{transform:translate3d(1.5%,-1.2%,0) scale(1.035);opacity:.78}
  100%{transform:translate3d(0,1.2%,0) scale(1.015);opacity:.64}
}

/* Sidebar feels less static */
.sidebar{
  background:
    linear-gradient(180deg,rgba(7,4,11,.96),rgba(1,1,2,.98) 36%,#000 100%);
  box-shadow:18px 0 70px rgba(0,0,0,.20),inset -1px 0 rgba(177,109,255,.025);
}
.sidebar::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:170px;
  pointer-events:none;
  background:radial-gradient(180px 120px at 18% 0%,rgba(156,91,255,.13),transparent 72%);
  animation:sidebarGlow 8s ease-in-out infinite alternate;
}
@keyframes sidebarGlow{from{opacity:.48;transform:translateY(-4px)}to{opacity:.9;transform:translateY(5px)}}
.brand img{animation:brandFloat 5.4s ease-in-out infinite;will-change:transform}
@keyframes brandFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.nav-item{position:relative;overflow:hidden}
.nav-item::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 12%,rgba(255,255,255,.045) 46%,transparent 74%);
  transform:translateX(-125%);transition:transform .48s ease;
}
.nav-item:hover::before{transform:translateX(125%)}
.nav-item .nav-icon,.nav-item .nav-icon svg{transition:transform .18s ease,filter .18s ease}
.nav-item:hover .nav-icon{transform:translateX(1px) scale(1.06)}
.nav-item:hover .nav-icon svg{transform:rotate(-3deg)}
.nav-item.active .nav-icon{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--nav-accent) 42%,transparent))}

/* Topbar gets a soft scanning highlight */
.topbar{overflow:visible;box-shadow:0 7px 30px rgba(0,0,0,.20)}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(157,96,236,.26),rgba(107,78,211,.10),transparent);
  background-size:220% 100%;animation:topbarScan 8s linear infinite;
}
@keyframes topbarScan{to{background-position:-220% 0}}
.status-dot,.ongoing-pulse{animation:livePulse 1.85s ease-in-out infinite}
@keyframes livePulse{0%,100%{transform:scale(.9);opacity:.72}50%{transform:scale(1.18);opacity:1;box-shadow:0 0 15px currentColor}}
.balance{position:relative;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.balance::after{
  content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;
  background:linear-gradient(110deg,transparent 27%,rgba(222,189,255,.14) 49%,transparent 68%);
  transform:translateX(-130%);animation:tokenSweep 6.4s ease-in-out infinite;
}
@keyframes tokenSweep{0%,66%{transform:translateX(-130%)}82%,100%{transform:translateX(130%)}}
.balance:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 8px 28px rgba(94,48,143,.16),0 0 26px rgba(145,79,225,.10)}
.coin,.wallet-coin,.wallet-mini-coin{animation:tokenGlow 3.8s ease-in-out infinite alternate}
@keyframes tokenGlow{from{box-shadow:0 0 8px rgba(153,88,214,.12)}to{box-shadow:0 0 19px rgba(173,106,239,.32)}}

/* Page changes arrive with more intentional motion */
.page{animation:pageIn .34s cubic-bezier(.2,.78,.23,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(9px) scale(.996);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.page.active .page-head{animation:headlineIn .42s cubic-bezier(.2,.75,.2,1) both}
@keyframes headlineIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.page.active .section-card,.page.active .panel,.page.active .rules-mode-grid,.page.active .history-list,.page.active .leader-list{
  animation:surfaceIn .42s .045s cubic-bezier(.2,.76,.2,1) both;
}
@keyframes surfaceIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Buttons feel premium rather than flat */
.btn,.wallet-purchase-btn,.filter-trigger,.match-view-tab,.profile-trigger{
  position:relative;overflow:hidden;isolation:isolate;
}
.btn::after,.wallet-purchase-btn::after{
  content:"";position:absolute;inset:-50% -30%;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);
  transform:translateX(-65%) rotate(4deg);transition:transform .5s ease;
}
.btn:hover::after,.wallet-purchase-btn:hover::after{transform:translateX(65%) rotate(4deg)}
.btn:hover:not(:disabled){transform:translateY(-2px)}
.btn.primary{background-size:160% 160%;animation:primaryDrift 5.5s ease infinite}
@keyframes primaryDrift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}

/* Live cards enter in a wave and get more depth on interaction */
#page-matches .match-card{animation:matchPop .40s cubic-bezier(.16,.8,.2,1) both;will-change:transform}
#page-matches .match-card:nth-child(2){animation-delay:.035s}
#page-matches .match-card:nth-child(3){animation-delay:.07s}
#page-matches .match-card:nth-child(4){animation-delay:.105s}
#page-matches .match-card:nth-child(5){animation-delay:.14s}
#page-matches .match-card:nth-child(6){animation-delay:.175s}
#page-matches .match-card:nth-child(7){animation-delay:.21s}
#page-matches .match-card:nth-child(8){animation-delay:.245s}
#page-matches .match-card:nth-child(n+9){animation-delay:.27s}
@keyframes matchPop{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
#page-matches .match-card:hover{transform:translateY(-5px) scale(1.012)}
#page-matches .match-card .match-title{transition:transform .18s ease,color .18s ease,text-shadow .18s ease}
#page-matches .match-card:hover .match-title{transform:translateX(2px);color:#fff;text-shadow:0 0 18px rgba(var(--card-accent-rgb),.18)}
#page-matches .stat{transition:transform .18s ease,border-color .18s ease,background .18s ease}
#page-matches .match-card:hover .stat{border-color:rgba(var(--card-accent-rgb),.12);background:rgba(var(--card-accent-rgb),.025)}
#page-matches .match-card:hover .stat:nth-child(1){transform:translateY(-1px)}
#page-matches .match-card:hover .stat:nth-child(2){transform:translateY(-1px)}
.live-dot{animation:matchDot 2.1s ease-in-out infinite}
@keyframes matchDot{0%,100%{transform:scale(.88);opacity:.72}50%{transform:scale(1.12);opacity:1}}

/* Tabs + filters: quick but noticeable interaction */
.match-view-tab,.filter-trigger{transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.match-view-tab:hover,.filter-trigger:hover{transform:translateY(-1px)}
.match-view-tab.active{box-shadow:0 8px 24px rgba(86,42,128,.12),inset 0 1px rgba(255,255,255,.04)}
.filter-dropdown.open .filter-trigger{transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,0,0,.26),0 0 22px rgba(121,69,180,.07)}
.filter-menu{backdrop-filter:blur(28px) saturate(145%);box-shadow:0 22px 55px rgba(0,0,0,.55),0 0 25px rgba(108,56,157,.065)}
.filter-dropdown.open .filter-menu{animation:menuDrop .18s cubic-bezier(.18,.75,.2,1) both}
@keyframes menuDrop{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:none}}
.filter-option{transition:transform .14s ease,background .14s ease,color .14s ease}
.filter-option:hover{transform:translateX(2px)}

/* Glass surfaces get a subtle breathing edge, not a loud neon border */
.panel,.section-card,.wallet-modal,.create-wizard,.public-profile-card,.mode-rules-card,.room-rules-panel{
  box-shadow:inset 0 1px rgba(255,255,255,.028),0 20px 55px rgba(0,0,0,.16);
}
.panel:hover,.section-card:hover,.mode-rules-card:hover{
  border-color:rgba(161,101,224,.16);
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 22px 60px rgba(0,0,0,.21),0 0 28px rgba(91,46,137,.035);
}

/* Wallet feels like a HUD opening, with pack rows that glide */
.modal-backdrop.show{animation:backdropIn .18s ease both}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
.modal-backdrop.show .modal,.modal-backdrop.show .wallet-modal,.modal-backdrop.show .create-wizard{
  animation:modalBloom .24s cubic-bezier(.16,.82,.2,1) both;
}
@keyframes modalBloom{from{opacity:0;transform:translateY(10px) scale(.975)}to{opacity:1;transform:none}}
.wallet-pack-row{position:relative;overflow:hidden}
.wallet-pack-row::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(180,115,245,.065),transparent);
  transform:translateX(-120%);transition:transform .42s ease;
}
.wallet-pack-row:hover::after{transform:translateX(120%)}
.wallet-pack-row:hover{padding-left:14px}
.wallet-pack-row.active{box-shadow:inset 2px 0 #a76eff,0 0 25px rgba(121,65,183,.055)}

/* Create Match progression is visually rewarding */
.create-tab{transition:color .18s ease,background .18s ease,transform .18s ease}
.create-tab:hover{transform:translateY(-1px)}
.create-option.active,.create-loadout.active,.create-credit.active,.create-category-card.active{
  animation:selectedGlow 2.8s ease-in-out infinite alternate;
}
@keyframes selectedGlow{from{box-shadow:0 0 12px rgba(106,54,157,.055),inset 0 0 12px rgba(141,75,206,.025)}to{box-shadow:0 0 23px rgba(119,61,180,.13),inset 0 0 20px rgba(155,87,220,.055)}}
.create-switch i{will-change:transform}

/* Profile/search/leaderboard micro interactions */
.profile-menu.show{animation:profileMenuIn .18s cubic-bezier(.18,.78,.2,1) both}
@keyframes profileMenuIn{from{opacity:0;transform:translateY(-7px) scale(.98)}to{opacity:1;transform:none}}
.player-search-result,.leader-row,.history-row,.public-match-row{transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.player-search-result:hover,.leader-row:hover,.history-row:hover,.public-match-row:hover{transform:translateY(-1px) translateX(2px)}
.player-search-results:not(:empty){animation:searchResultsIn .18s ease both}
@keyframes searchResultsIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* Empty pages should still feel intentional/alive */
.empty-icon{animation:emptyFloat 4.2s ease-in-out infinite}
@keyframes emptyFloat{0%,100%{transform:translateY(0);box-shadow:0 0 0 rgba(145,79,224,0)}50%{transform:translateY(-4px);box-shadow:0 10px 28px rgba(105,55,158,.10)}}

/* Accessible escape hatch for anyone who prefers less movement */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* v0.21 extra room / leaderboard / profile motion */
.btn::after,.wallet-purchase-btn::after{z-index:0;opacity:.68}
.btn>span,.wallet-purchase-btn>span{position:relative;z-index:1}

#page-room.active .room-page-hero{animation:roomHeroIn .42s cubic-bezier(.18,.78,.2,1) both}
#page-room.active .room-meta-strip{animation:roomBlockIn .42s .06s cubic-bezier(.18,.78,.2,1) both}
#page-room.active .room-progress{animation:roomBlockIn .42s .11s cubic-bezier(.18,.78,.2,1) both}
#page-room.active .room-main-grid{animation:roomBlockIn .42s .16s cubic-bezier(.18,.78,.2,1) both}
@keyframes roomHeroIn{from{opacity:0;transform:translateY(-7px) scale(.993)}to{opacity:1;transform:none}}
@keyframes roomBlockIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.room-status-pill span{animation:matchDot 2.1s ease-in-out infinite}
.room-player-card,.room-meta-strip>div,.room-rules-panel,.room-progress-step{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}
.room-player-card:hover{transform:translateY(-2px);border-color:rgba(155,93,224,.24);box-shadow:0 14px 34px rgba(0,0,0,.22),0 0 26px rgba(103,52,158,.045)}
.room-meta-strip>div:hover{transform:translateY(-1px);border-color:rgba(153,94,220,.16);background:rgba(42,24,57,.08)}
.room-rules-panel:hover{border-color:rgba(156,93,224,.20);box-shadow:0 20px 50px rgba(0,0,0,.22),0 0 28px rgba(111,57,166,.04)}
.room-progress-step.current strong{color:#c799f6;text-shadow:0 0 15px rgba(160,99,231,.18)}

.leader-hero{position:relative}
.leader-hero::after{
  content:"";position:absolute;inset:-35% -15%;pointer-events:none;
  background:linear-gradient(110deg,transparent 42%,rgba(185,128,255,.055) 50%,transparent 58%);
  transform:translateX(-55%) rotate(4deg);animation:leaderSweep 9s ease-in-out infinite;
}
@keyframes leaderSweep{0%,58%{transform:translateX(-55%) rotate(4deg)}82%,100%{transform:translateX(55%) rotate(4deg)}}
.pod{position:relative;z-index:1;transition:transform .18s ease}
.pod:hover{transform:translateY(-3px)}
.pod .pfp{transition:transform .2s ease,box-shadow .2s ease}
.pod:hover .pfp{transform:scale(1.035);box-shadow:0 0 38px rgba(160,93,236,.25)}
.pod.first .pfp{animation:firstPlaceGlow 3.8s ease-in-out infinite alternate}
@keyframes firstPlaceGlow{from{box-shadow:0 0 24px rgba(168,85,247,.18)}to{box-shadow:0 0 42px rgba(168,85,247,.34)}}

.public-profile-shell{animation:profileShellIn .38s cubic-bezier(.18,.78,.2,1) both}
@keyframes profileShellIn{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}
.public-profile-avatar{transition:transform .2s ease,box-shadow .2s ease}
.public-profile-hero:hover .public-profile-avatar{transform:scale(1.035);box-shadow:0 0 28px rgba(144,77,211,.22)}
.public-stat-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.public-stat-card:hover{transform:translateY(-2px);border-color:rgba(154,93,220,.17);box-shadow:0 14px 34px rgba(0,0,0,.18)}

/* Keep animations decorative; never make controls harder to click. */
button:active:not(:disabled){transform:translateY(0) scale(.985)!important;transition-duration:.06s!important}


/* ============================================================
   v0.22 — typography, ready check, privacy + sound settings
   ============================================================ */
:root{
  --font-ui:'Sora',Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Oxanium','Sora',ui-sans-serif,system-ui,sans-serif;
}
html,body,button,input,select,textarea{font-family:var(--font-ui)}
h1,h2,h3,.match-title,.public-profile-title h1,.room-title-block h1,.big-balance,.wallet-balance-block strong,.stat strong,.history-summary-card strong,.leader-row strong{font-family:var(--font-display)}
.eyebrow,.nav-label,.tag,.build-pill,.status-pill,.room-status-pill,.room-progress-step,.settings-toggle,.ready-check-panel{font-family:var(--font-display)}

.brand{appearance:none;border:0;cursor:pointer;color:inherit;text-align:inherit}
.brand:focus-visible{outline:2px solid rgba(171,103,242,.7);outline-offset:-4px}
.brand.refreshing img{animation:brandRefreshSpin .38s cubic-bezier(.2,.8,.2,1)}
@keyframes brandRefreshSpin{50%{transform:scale(.86) rotate(-12deg);filter:drop-shadow(0 0 20px rgba(176,101,255,.55))}100%{transform:scale(1) rotate(0)}}

/* Keep the Token wallet centered in the desktop topbar. */
@media(min-width:861px){
  .topbar{position:sticky}
  .topbar .balance{position:absolute!important;left:50%;top:50%;margin:0!important;transform:translate(-50%,-50%)!important;z-index:4;min-width:108px;justify-content:center}
  .topbar .balance:hover{transform:translate(-50%,calc(-50% - 1px)) scale(1.025)!important}
}

.settings-shell{width:min(760px,100%);display:grid;gap:10px}
.settings-panel{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:13px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:linear-gradient(145deg,rgba(11,8,15,.82),rgba(4,4,7,.72));padding:15px;box-shadow:0 18px 50px rgba(0,0,0,.22)}
.settings-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(163,96,229,.18);background:rgba(93,43,135,.11);color:#c391ef;font:700 18px var(--font-display)}
.settings-copy strong,.settings-copy span{display:block}.settings-copy strong{font:700 13px var(--font-display);color:#f2edf6}.settings-copy span{margin-top:4px;color:#77707e;font-size:9px}
.settings-toggle{min-width:94px;height:38px;border:1px solid rgba(255,255,255,.085);border-radius:999px;background:rgba(4,4,7,.8);color:#716a78;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 10px;cursor:pointer;font-size:8px;font-weight:700;transition:.18s}
.settings-toggle span{width:19px;height:19px;border-radius:50%;background:#3f3a44;box-shadow:inset 0 1px rgba(255,255,255,.08);transition:.18s}
.settings-toggle.on{border-color:rgba(150,87,217,.34);background:rgba(62,28,91,.2);color:#d8b8f0}.settings-toggle.on span{background:linear-gradient(145deg,#bb73f4,#7137b0);box-shadow:0 0 18px rgba(163,85,226,.25)}
.settings-note{border:1px solid rgba(255,255,255,.05);border-radius:11px;background:rgba(255,255,255,.012);padding:12px 14px}.settings-note span{font:700 7px var(--font-display);color:#8c60af;text-transform:uppercase;letter-spacing:.09em}.settings-note p{margin:4px 0 0;color:#625c68;font-size:8px;line-height:1.5}

.room-player-card.private-player{position:relative;border-color:rgba(120,76,151,.19);background:linear-gradient(120deg,rgba(50,28,68,.09),rgba(5,5,8,.42));box-shadow:inset 2px 0 rgba(83,49,111,.45)}
.private-avatar{font-family:var(--font-display);color:#9a72b8;background:radial-gradient(circle at 50% 35%,rgba(134,80,177,.24),rgba(20,12,28,.66))!important;border-color:rgba(130,77,169,.22)!important}
.private-lock{margin-left:auto;align-self:flex-start;border:1px solid rgba(143,88,180,.17);border-radius:999px;background:rgba(72,36,96,.1);color:#8e6ca6;padding:4px 7px;font:700 6px var(--font-display);letter-spacing:.08em}

.ready-check-panel{margin:0 5px 7px;border:1px solid rgba(153,91,219,.18);border-radius:11px;background:linear-gradient(100deg,rgba(69,33,97,.12),rgba(6,5,9,.56));padding:12px;animation:readyPanelIn .28s ease both}
@keyframes readyPanelIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.ready-check-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.ready-check-title span{color:#a97bd0;font-size:8px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}.ready-check-title strong{font-size:8px;color:#8e8199}
.ready-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.ready-check-grid>div{border:1px solid rgba(255,255,255,.055);border-radius:9px;background:rgba(255,255,255,.016);padding:9px 10px;transition:.2s}.ready-check-grid span,.ready-check-grid strong{display:block}.ready-check-grid span{color:#655d6c;font-size:6.5px;text-transform:uppercase;letter-spacing:.08em}.ready-check-grid strong{margin-top:3px;color:#8d8493;font-size:10px}.ready-check-grid>div.is-ready{border-color:rgba(76,220,154,.24);background:rgba(31,111,74,.1);box-shadow:0 0 24px rgba(52,201,133,.05)}.ready-check-grid>div.is-ready strong{color:#67e6a9}.ready-check-panel>small{display:block;margin-top:8px;color:#645c6a;font-size:7.5px}
.room-ready-btn{position:relative;overflow:hidden}.room-ready-btn::after{content:'';position:absolute;inset:-80% -25%;background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%);animation:readyBtnSweep 2.5s ease-in-out infinite}@keyframes readyBtnSweep{0%,45%{transform:translateX(-70%)}80%,100%{transform:translateX(70%)}}
.room-ready-done{border-color:rgba(68,191,127,.25)!important;color:#69dda7!important;background:rgba(25,86,58,.12)!important}

/* Match browser never exposes live participant names. */
#page-matches .match-host{letter-spacing:.01em}

@media(max-width:620px){
  .settings-panel{grid-template-columns:40px 1fr;gap:10px}.settings-icon{width:40px;height:40px}.settings-toggle{grid-column:1/-1;width:100%;justify-content:center}
  .ready-check-grid{grid-template-columns:1fr 1fr}.private-lock{display:none}
}

/* v0.22.1 hotfix — sidebar logo refresh button must never inherit browser button chrome */
button.brand,
button.brand:hover,
button.brand:focus,
button.brand:focus-visible,
button.brand:active{
  -webkit-appearance:none!important;
  appearance:none!important;
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
button.brand:focus-visible{outline:0!important}
button.brand:focus-visible img{
  outline:2px solid rgba(171,103,242,.72);
  outline-offset:3px;
}

/* ============================================================
   v0.23 — cleaner ready check + linked identity polish
   ============================================================ */
.ready-check-panel{
  margin:2px 5px 9px;
  padding:11px 13px 10px;
  border-color:rgba(151,88,214,.14);
  background:linear-gradient(100deg,rgba(55,27,78,.08),rgba(5,5,8,.44));
  box-shadow:inset 0 1px rgba(255,255,255,.018);
}
.ready-check-title strong{
  min-width:34px;
  border:1px solid rgba(159,94,224,.16);
  border-radius:999px;
  padding:4px 7px;
  text-align:center;
  color:#c79ee7;
  background:rgba(91,43,126,.11);
}
.ready-check-grid{display:none!important}
.ready-check-track{
  display:grid;
  grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);
  align-items:center;
  gap:8px;
  margin-top:10px;
}
.ready-player-status{
  display:grid;
  grid-template-columns:9px minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  min-width:0;
  padding:5px 2px;
}
.ready-player-status i{
  width:8px;height:8px;border-radius:50%;
  background:#4b4551;
  box-shadow:0 0 0 3px rgba(255,255,255,.025);
  transition:.2s ease;
}
.ready-player-status span{
  color:#746c7b;
  font:600 7px var(--font-display);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.ready-player-status strong{
  color:#8e8595;
  font:700 9px var(--font-display);
}
.ready-player-status.is-ready i{
  background:#58e0a0;
  box-shadow:0 0 0 3px rgba(67,211,145,.07),0 0 15px rgba(67,211,145,.24);
}
.ready-player-status.is-ready strong{color:#65e4a6}
.ready-connector{height:1px;background:rgba(255,255,255,.055);position:relative;overflow:visible}
.ready-connector span{position:absolute;left:0;top:0;width:0;height:100%;background:linear-gradient(90deg,#8f55c7,#64e1a5);box-shadow:0 0 10px rgba(125,83,185,.18);transition:width .32s ease}
.ready-connector.complete span{width:100%}
.ready-check-panel>small{margin-top:7px;font-size:7.4px;color:#68606f}

.room-player-card{
  min-height:86px;
}
.room-player-copy small{
  line-height:1.45;
}
.room-player-card.private-player{
  border-style:dashed;
  background:linear-gradient(120deg,rgba(47,26,65,.07),rgba(5,5,8,.34));
}
.room-player-card.private-player .room-player-copy strong{color:#c8b8d3}
.room-player-card.public-player-link:hover .room-player-copy small{color:#b49bc8}

.profile-link-actions{align-items:center}
.epic-link-btn{
  border-color:rgba(255,255,255,.14)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.02))!important;
}
.epic-link-btn:hover:not(:disabled){border-color:rgba(255,255,255,.27)!important;background:rgba(255,255,255,.07)!important}
.epic-link-btn:disabled{color:#8adfb5;border-color:rgba(74,192,133,.18)!important;background:rgba(31,91,61,.08)!important}

@media(max-width:620px){
  .ready-check-track{grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:5px}
  .ready-player-status{grid-template-columns:8px 1fr;gap:6px}
  .ready-player-status strong{grid-column:2;font-size:8px;margin-top:-2px}
  .profile-link-actions .btn{flex:1 1 46%}
}

/* ============================================================
   v0.24 — connections, copyable identities + match-start audio UI
   ============================================================ */
.connections-page{padding-bottom:38px}
.connections-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:2px 0 14px}
.connections-head h2{margin:0;font:700 17px var(--font-display);letter-spacing:-.02em}
.connections-head p{margin:5px 0 0;color:#716a77;font-size:9px;line-height:1.5}
.connections-live-pill{flex:0 0 auto;border:1px solid rgba(106,224,162,.16);border-radius:999px;background:rgba(31,102,66,.08);color:#6de2a8;padding:6px 9px;font:700 6.5px var(--font-display);letter-spacing:.09em}
.connections-grid{display:grid;gap:9px}
.connection-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:13px;min-height:112px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:linear-gradient(145deg,rgba(10,8,13,.88),rgba(3,3,5,.82));padding:14px 15px;box-shadow:0 16px 46px rgba(0,0,0,.18);transition:border-color .18s ease,transform .18s ease,background .18s ease}
.connection-card:hover{transform:translateY(-1px);border-color:rgba(157,94,222,.15);background:linear-gradient(145deg,rgba(15,10,20,.9),rgba(4,4,7,.84))}
.connection-provider-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#d7c4e5;font:700 16px var(--font-display)}
.discord-provider-icon{border-color:rgba(103,114,238,.2);background:rgba(88,101,242,.09);color:#aeb5ff}
.epic-provider-icon{border-color:rgba(255,255,255,.14);background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.018));color:#fff}
.connection-main{min-width:0}
.connection-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.connection-title-row>div{min-width:0}
.connection-title-row span,.connection-title-row strong{display:block}
.connection-title-row>div>span{color:#706977;font:650 6.5px var(--font-display);text-transform:uppercase;letter-spacing:.09em}
.connection-title-row>div>strong{margin-top:3px;color:#f0e9f5;font:700 10px var(--font-display)}
.connection-state{flex:0 0 auto;border:1px solid rgba(255,255,255,.07);border-radius:999px;background:rgba(255,255,255,.018);color:#756e7a;padding:4px 7px;font:700 6px var(--font-display);text-transform:uppercase;letter-spacing:.06em}
.connection-state.connected{border-color:rgba(82,218,151,.17);background:rgba(38,119,79,.08);color:#69dea6}
.connection-value-row{display:flex;align-items:center;gap:7px;min-width:0;margin-top:8px}
.connection-value-row>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cfc4d6;font:600 10px var(--font-ui);user-select:text}
.connection-main>small{display:block;margin-top:7px;color:#655f69;font-size:7.7px;line-height:1.48}
.connection-action{min-width:128px}
.connections-note{margin-top:10px;border:1px solid rgba(150,91,209,.1);border-radius:10px;background:rgba(62,29,86,.045);padding:10px 12px}
.connections-note span{font:700 6.5px var(--font-display);color:#9b6fbb;letter-spacing:.09em}
.connections-note p{margin:4px 0 0;color:#645e68;font-size:7.8px;line-height:1.5}

.identity-copy-btn{appearance:none;-webkit-appearance:none;display:inline-grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.022);color:#8d8293;cursor:pointer;transition:.15s ease}
.identity-copy-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.identity-copy-btn:hover:not(:disabled){color:#d9b8f5;border-color:rgba(170,104,231,.27);background:rgba(100,49,139,.11);transform:translateY(-1px)}
.identity-copy-btn:active:not(:disabled){transform:scale(.94)!important}
.identity-copy-btn:disabled{opacity:.28;cursor:default}
.identity-copy-btn.compact{width:23px;height:23px;flex-basis:23px;border-radius:6px}
.identity-copy-btn.compact svg{width:11px;height:11px}

.room-player-copy{flex:1;min-width:0}
.room-player-name-row{display:flex;align-items:center;gap:6px;min-width:0;margin-top:4px}
.room-player-name-row>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0!important;font-size:13px!important;user-select:text}
.room-linked-identities{display:grid;gap:3px;margin-top:6px;min-width:0}
.room-linked-identity{display:grid;grid-template-columns:42px minmax(0,1fr) 23px;align-items:center;gap:5px;min-width:0;border:1px solid rgba(88,101,242,.10);border-radius:6px;background:rgba(88,101,242,.035);padding:3px 4px 3px 6px}
.room-linked-identity.epic{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.018)}
.room-linked-identity em{font-style:normal;color:#777082;font:650 5.7px var(--font-display);text-transform:uppercase;letter-spacing:.06em}
.room-linked-identity b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#bdb2c5;font:600 7.3px var(--font-ui);user-select:text}
.room-linked-identities.muted{display:block;color:#68616d;font-size:6.8px}
.room-player-stats{display:block!important;margin-top:5px!important;color:#655f69!important;font-size:6.6px!important}
.room-player-card.public-player-link:hover .room-linked-identity b{color:#d4c4df}

@media(max-width:760px){
  .connections-head{align-items:flex-start;flex-direction:column;gap:8px}
  .connection-card{grid-template-columns:42px minmax(0,1fr);padding:12px;gap:10px}
  .connection-provider-icon{width:40px;height:40px}
  .connection-action{grid-column:1/-1;width:100%;min-width:0}
}
@media(max-width:520px){
  .connection-title-row{align-items:flex-start}
  .connection-state{font-size:5.6px}
  .room-linked-identity{grid-template-columns:36px minmax(0,1fr) 23px}
  .room-linked-identity em{font-size:5.2px}
  .room-linked-identity b{font-size:6.8px}
}

/* ============================================================
   v0.25.1 — Connections readability pass
   Scale the Connections/Profile Settings view up on desktop so
   linked identities and account actions are easy to scan.
   ============================================================ */
#page-connections .account-page-head{
  margin-bottom:14px;
}
#page-connections .account-page-head h1{
  font-size:clamp(31px,3vw,42px);
}
#page-connections .eyebrow{
  font-size:9px;
}
#page-connections .profile-tabs{
  gap:5px;
  margin-bottom:24px;
}
#page-connections .profile-tabs button{
  height:46px;
  padding:0 17px;
  font-size:11.5px;
}
#page-connections .profile-tabs button.active::after{
  left:12px;
  right:12px;
  height:2px;
}
.connections-page{
  padding-bottom:48px;
}
.connections-head{
  gap:22px;
  margin:4px 0 18px;
}
.connections-head h2{
  font-size:23px;
  line-height:1.15;
}
.connections-head p{
  margin-top:7px;
  max-width:760px;
  font-size:12px;
  line-height:1.55;
}
.connections-live-pill{
  padding:8px 12px;
  font-size:8.5px;
  letter-spacing:.085em;
}
.connections-grid{
  gap:12px;
}
.connection-card{
  grid-template-columns:58px minmax(0,1fr) auto;
  gap:18px;
  min-height:138px;
  border-radius:16px;
  padding:18px 20px;
}
.connection-provider-icon{
  width:54px;
  height:54px;
  border-radius:14px;
  font-size:20px;
}
.connection-title-row{
  gap:15px;
}
.connection-title-row>div>span{
  font-size:8.5px;
}
.connection-title-row>div>strong{
  margin-top:4px;
  font-size:13px;
}
.connection-state{
  padding:5px 9px;
  font-size:7.5px;
}
.connection-value-row{
  gap:9px;
  margin-top:10px;
}
.connection-value-row>strong{
  font-size:14px;
  line-height:1.3;
}
.connection-main>small{
  max-width:860px;
  margin-top:9px;
  font-size:10.5px;
  line-height:1.55;
}
.connection-action{
  min-width:154px;
  min-height:44px;
  padding:0 17px;
  font-size:11px;
}
.connections-note{
  margin-top:13px;
  border-radius:12px;
  padding:13px 15px;
}
.connections-note span{
  font-size:8px;
}
.connections-note p{
  margin-top:5px;
  font-size:10.5px;
  line-height:1.55;
}
.identity-copy-btn{
  width:34px;
  height:34px;
  flex-basis:34px;
  border-radius:9px;
}
.identity-copy-btn svg{
  width:15px;
  height:15px;
}

@media(max-width:760px){
  #page-connections .profile-tabs button{height:43px;padding:0 12px;font-size:10.5px}
  .connections-head{gap:10px;margin-bottom:15px}
  .connections-head h2{font-size:20px}
  .connections-head p{font-size:11px}
  .connection-card{grid-template-columns:50px minmax(0,1fr);min-height:0;padding:15px;gap:12px}
  .connection-provider-icon{width:48px;height:48px;font-size:18px}
  .connection-title-row>div>strong{font-size:12px}
  .connection-value-row>strong{font-size:13px}
  .connection-main>small{font-size:10px}
  .connection-action{grid-column:1/-1;width:100%;min-width:0;min-height:43px;font-size:10.8px}
}
@media(max-width:520px){
  #page-connections .account-page-head h1{font-size:30px}
  #page-connections .profile-tabs{margin-bottom:18px}
  #page-connections .profile-tabs button{font-size:9.8px;padding:0 10px}
  .connection-state{font-size:7px}
  .connections-note p{font-size:10px}
}



/* ============================================================
   v0.25.3 working — match-room scale + identity copy cleanup
   Pending package: preserve v0.25.1 readability + v0.25.2 embeds.
   ============================================================ */

/* Only Epic identity rows reserve space for the clipboard control. */
.room-linked-identity{
  grid-template-columns:52px minmax(0,1fr);
  min-height:32px;
  padding:5px 7px;
}
.room-linked-identity.epic{
  grid-template-columns:52px minmax(0,1fr) 29px;
}
.room-linked-identity em{font-size:6.7px}
.room-linked-identity b{font-size:9px}
.room-linked-identity.epic .identity-copy-btn.compact{
  width:27px;
  height:27px;
  flex-basis:27px;
}

/* Make the 1v1 room feel like the primary surface rather than a tiny inset. */
#roomPageContent{
  width:min(1480px,100%);
}
.room-layout{
  grid-template-columns:minmax(0,1fr) 340px;
  gap:16px;
}
.room-stage{
  min-height:390px;
  padding:20px;
  border-radius:16px;
}
.room-rules-card{
  border-radius:16px;
}
.room-stage-title{
  padding:3px 2px 15px;
}
.room-stage-title span{
  font-size:11px;
  letter-spacing:.09em;
}
.room-stage-title small{
  max-width:680px;
  font-size:9.5px;
  line-height:1.45;
  text-align:right;
}
.room-team-grid{
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
  gap:14px;
  padding:46px 8px 36px;
}
.room-player-card{
  min-height:150px;
  gap:17px;
  border-radius:14px;
  padding:19px;
}
.room-player-card.you{
  box-shadow:inset 3px 0 rgba(116,67,166,.92),0 0 28px rgba(74,39,112,.09);
}
.room-avatar.large{
  width:68px;
  height:68px;
  flex:0 0 68px;
}
.room-player-copy>span{
  font-size:8.5px;
}
.room-player-name-row{
  margin-top:6px;
}
.room-player-name-row>strong{
  font-size:19px!important;
  line-height:1.15;
}
.room-linked-identities{
  gap:5px;
  margin-top:9px;
}
.room-player-stats{
  margin-top:8px!important;
  font-size:8.5px!important;
}
.room-vs-mark{
  color:#a35cff;
  font-size:18px;
  letter-spacing:.07em;
  text-shadow:0 0 18px rgba(155,82,236,.34);
}
.ready-check-panel{
  margin:0 8px 10px;
  padding:16px 17px;
  border-radius:13px;
}
.ready-check-title span,.ready-check-title strong{
  font-size:10px;
}
.ready-check-panel>small{
  font-size:9px;
}
.room-action-bar{
  gap:10px;
  margin-top:17px;
}
.room-action-bar .btn{
  min-width:174px;
  min-height:46px;
  font-size:11.5px;
}

/* More fluid room behavior through common desktop/tablet widths. */
@media(max-width:1240px){
  .room-layout{grid-template-columns:minmax(0,1fr) 300px;gap:12px}
  .room-team-grid{grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);gap:10px;padding:36px 3px 30px}
  .room-player-card{min-height:136px;padding:16px;gap:13px}
  .room-avatar.large{width:60px;height:60px;flex-basis:60px}
  .room-player-name-row>strong{font-size:17px!important}
}
@media(max-width:1040px){
  .room-layout{grid-template-columns:1fr}
  .room-stage{min-height:360px}
  .room-rules-card{order:2}
}
@media(max-width:760px){
  .room-stage{padding:15px;min-height:0}
  .room-stage-title{align-items:flex-start;flex-direction:column;gap:6px}
  .room-stage-title small{text-align:left;font-size:9px}
  .room-team-grid{grid-template-columns:1fr;gap:10px;padding:22px 0 18px}
  .room-vs-mark{padding:2px 0;font-size:15px}
  .room-player-card{min-height:112px;padding:15px}
  .room-avatar.large{width:56px;height:56px;flex-basis:56px}
  .room-player-name-row>strong{font-size:16px!important}
  .room-linked-identity{grid-template-columns:46px minmax(0,1fr)}
  .room-linked-identity.epic{grid-template-columns:46px minmax(0,1fr) 29px}
  .room-action-bar{display:grid;grid-template-columns:1fr 1fr}
  .room-action-bar .btn{width:100%;min-width:0}
}
@media(max-width:520px){
  .room-player-card{align-items:flex-start;gap:12px}
  .room-avatar.large{width:50px;height:50px;flex-basis:50px}
  .room-player-name-row>strong{font-size:15px!important}
  .room-linked-identity b{font-size:8.4px}
  .room-action-bar{grid-template-columns:1fr}
}


/* v0.25.4 working — simplified match identity presentation.
   Match cards mirror a game-lobby identity row: You + Playing as <Epic> [copy]. */
.room-linked-identities,
.room-linked-identity{display:none!important}
.room-playing-as{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  margin-top:7px;
  color:#8d8693;
  font-size:9px;
  line-height:1.2;
}
.room-playing-as>span{
  display:inline!important;
  flex:0 0 auto;
  color:#77717d!important;
  font:500 9px var(--font-ui)!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
.room-playing-as>b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#b879ff;
  font:650 10px var(--font-ui);
  user-select:text;
}
.room-playing-as.muted>span{
  color:#655f69!important;
}
.room-playing-as .identity-copy-btn.compact{
  width:17px;
  height:17px;
  flex:0 0 17px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#7f7985;
  padding:0;
}
.room-playing-as .identity-copy-btn.compact svg{
  width:10px;
  height:10px;
}
.room-playing-as .identity-copy-btn.compact:hover:not(:disabled){
  color:#d5b5ef;
  background:rgba(157,91,220,.08);
  transform:none;
}
/* The Epic copy affordance on Connections is intentionally subtle too. */
.connection-value-row .identity-copy-btn{
  width:22px;
  height:22px;
  flex-basis:22px;
  border:0;
  background:transparent;
  border-radius:5px;
  color:#7f7885;
}
.connection-value-row .identity-copy-btn svg{width:11px;height:11px}
.connection-value-row .identity-copy-btn:hover:not(:disabled){
  transform:none;
  background:rgba(157,91,220,.08);
}

/* v0.25.5 custom sandbox token preview */
.entry-token-input-wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;min-height:52px;margin-top:10px;padding:0 15px;border:1px solid rgba(161,91,231,.30);border-radius:12px;background:linear-gradient(110deg,rgba(73,33,109,.16),rgba(7,5,10,.70));box-shadow:inset 0 0 24px rgba(92,46,134,.05);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.entry-token-input-wrap:focus-within{border-color:rgba(177,100,255,.62);box-shadow:0 0 0 3px rgba(153,83,220,.08),inset 0 0 28px rgba(111,54,163,.08);transform:translateY(-1px)}.entry-token-gem{color:#a55be7;font-size:13px;text-shadow:0 0 14px rgba(164,91,231,.45)}.entry-token-input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#f3edf7;font:800 17px/1.2 inherit;padding:15px 0}.entry-token-input::-webkit-inner-spin-button,.entry-token-input::-webkit-outer-spin-button{opacity:.35}.entry-token-suffix{color:#817789;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.entry-token-range{display:flex;justify-content:space-between;gap:12px;margin:7px 2px 0;color:#625a68;font-size:8px;font-weight:750}.entry-token-input:invalid{color:#ff91a2}@media(max-width:700px){.entry-token-input-wrap{min-height:58px}.entry-token-input{font-size:19px}.entry-token-range{font-size:9px}}

/* ============================================================
   ELITES v0.25.6 working — flat competitive shell + streamer mode
   Reference direction: dense esports dashboard, purple accents,
   flat charcoal surfaces, real data only. Existing animated page
   background layers are intentionally left intact.
   ============================================================ */
:root{
  --shell-purple:#8b45ff;
  --shell-purple-2:#6f2de0;
  --shell-purple-soft:rgba(139,69,255,.16);
  --shell-line:#242329;
  --shell-panel:#0a0a0c;
  --shell-panel-2:#0d0d10;
}

.app{grid-template-columns:210px minmax(0,1fr)}
.sidebar{
  width:210px;
  padding:16px 14px 14px;
  border-right:1px solid #1a191e;
  background:#050506;
  overflow-y:auto;
  scrollbar-width:none;
}
.sidebar::-webkit-scrollbar{display:none}
.brand.brand-wordmark{
  width:100%;
  min-height:44px;
  padding:0 8px 12px;
  gap:10px;
  border:0;
  background:transparent;
  color:#f7f5fb;
  cursor:pointer;
  font:800 17px/1 var(--font-display,Oxanium,Sora,sans-serif);
  letter-spacing:.015em;
}
.brand.brand-wordmark img{
  width:34px;
  height:34px;
  border-radius:8px;
  box-shadow:0 0 18px rgba(139,69,255,.18);
}
.brand.brand-wordmark:hover{color:#cfaeff}
.game-switcher{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 14px;
  align-items:center;
  gap:8px;
  min-height:50px;
  margin:0 0 15px;
  padding:8px 10px;
  border:1px solid #201f25;
  border-radius:8px;
  background:#09090b;
}
.game-switcher-icon{
  width:27px;height:27px;border-radius:6px;display:grid;place-items:center;
  background:linear-gradient(145deg,#7b35ed,#4d1da4);color:#fff;font-size:8px;font-weight:900;
}
.game-switcher-copy{min-width:0}.game-switcher-copy strong,.game-switcher-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-switcher-copy strong{font-size:10px}.game-switcher-copy small{margin-top:2px;color:#5f5d67;font-size:6.5px}.game-switcher-chevron{color:#67636d;font-size:10px}
.nav-section{margin:0 0 13px;padding:0 0 10px;border-bottom:1px solid #111114}
.nav-section.profile-nav-section{border-bottom:0}
.nav-label{padding:0 8px 6px;color:#55515d;font-size:7px;letter-spacing:.14em}
.nav-item{
  height:36px;
  margin:1px 0;
  padding:0 9px;
  border-radius:6px;
  color:#8a8792;
  font-size:9.5px;
  font-weight:700;
}
.nav-item:hover{background:#0c0b0f;color:#e7e2ed}
.nav-item.active{
  color:#e8ddf7;
  background:linear-gradient(90deg,rgba(133,62,240,.20),rgba(80,34,137,.08));
  box-shadow:inset 2px 0 #9f5aff;
}
.nav-icon{width:17px;display:grid;place-items:center;color:#8d65c5}.nav-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-soon{margin-left:auto;border:1px solid rgba(139,69,255,.18);border-radius:999px;padding:2px 5px;color:#77579b;font-size:5.5px;text-transform:uppercase;letter-spacing:.04em}
.ongoing-section{padding-top:2px}
.ongoing-nav,.recent-matches-nav{display:grid;gap:2px}
.ongoing-match-link,.recent-match-link{
  width:100%;min-height:36px;border:0;border-radius:5px;background:transparent;color:#8d8994;
  display:grid;align-items:center;text-align:left;cursor:pointer;transition:.16s ease;
}
.ongoing-match-link{grid-template-columns:24px minmax(0,1fr) 7px;padding:4px 6px;gap:6px}
.ongoing-match-link:hover,.ongoing-match-link.active,.recent-match-link:hover{background:#0d0a12;color:#eee7f6;transform:translateX(1px)}
.ongoing-match-icon{width:24px;height:24px;border-radius:5px;background:rgba(132,64,225,.08);border-color:rgba(139,69,255,.17);color:#9c63e8}
.ongoing-match-copy strong{font-size:7.5px}.ongoing-match-copy small{font-size:5.8px;color:#68636e}.ongoing-match-state,.ongoing-match-state.active{background:#8f49f4;box-shadow:0 0 8px rgba(143,73,244,.45)}
.recent-match-link{grid-template-columns:20px minmax(0,1fr);gap:5px;padding:4px 6px}
.recent-match-clock{color:#716b78;font-size:11px}.recent-match-copy{min-width:0}.recent-match-copy strong,.recent-match-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-match-copy strong{font-size:7.8px;color:#a7a2ad}.recent-match-copy small{margin-top:2px;font-size:5.8px;color:#625e68}.recent-match-copy b{margin-right:2px}.recent-match-copy b.win{color:#61d99c}.recent-match-copy b.loss{color:#ff7587}
.sidebar-bottom{padding-top:9px;border-top:1px solid #151419}
.battle-pass-card{
  width:100%;min-height:54px;margin-bottom:7px;border:1px solid rgba(139,69,255,.22);border-radius:8px;
  background:linear-gradient(110deg,rgba(76,30,127,.22),rgba(10,8,13,.82));
  display:grid;grid-template-columns:29px minmax(0,1fr) 16px;align-items:center;gap:8px;padding:8px;color:#d7c8e8;text-align:left;cursor:pointer;transition:.16s ease;
}
.battle-pass-card:hover{border-color:rgba(155,82,255,.45);transform:translateY(-1px);box-shadow:0 8px 24px rgba(70,27,116,.15)}
.battle-pass-icon{width:27px;height:27px;border-radius:6px;background:rgba(129,53,220,.20);display:grid;place-items:center;color:#a664ff}.battle-pass-card strong,.battle-pass-card small{display:block}.battle-pass-card strong{font-size:8px}.battle-pass-card small{margin-top:2px;color:#745596;font-size:5.8px;text-transform:uppercase}.battle-pass-card>span:last-child{color:#9f67e4}
.purchase-tokens-nav{border:1px solid #222126;background:#08080a;color:#c8c3ce}.purchase-tokens-nav:hover{border-color:#3d2a55;background:#0e0a12}
.signout-item{margin-top:5px}.fineprint{font-size:6.2px;color:#48454e;line-height:1.45}

.main{grid-column:2}
.topbar{
  height:72px;
  padding:0 24px;
  gap:11px;
  border-bottom:1px solid #17161b;
  background:rgba(3,3,4,.96);
  backdrop-filter:none;
}
.search-wrap{width:min(300px,29vw)}
.search{height:36px;border-color:#1d1c21;background:#070708;border-radius:8px;font-size:9px;padding-left:35px}
.search:focus{border-color:#5b328c;box-shadow:0 0 0 2px rgba(139,69,255,.08)}
.search-icon{font-size:12px;color:#504d56}
.topbar-balance{
  position:absolute;left:50%;transform:translateX(-50%);
  height:34px;min-width:90px;padding:0 10px;border-color:#21162f;border-radius:999px;background:#070509;
  justify-content:center;color:#f0e8f8;font-size:10px;z-index:2;
}
.topbar-balance:hover{transform:translateX(-50%) translateY(-1px)!important}
.token-coin-mark,.coin{
  position:relative;width:18px;height:18px;flex:0 0 18px;border-radius:50%;display:grid;place-items:center;
  border:2px solid #9b5cff;background:radial-gradient(circle at 40% 35%,#b784ff 0 17%,#6e2fd0 18% 55%,#32135f 56% 100%);
  color:#f5eaff;font-size:6px;font-weight:950;box-shadow:0 0 10px rgba(139,69,255,.22),inset 0 0 0 2px rgba(10,4,18,.45);
}
.token-coin-mark::after,.coin::after{content:"";position:absolute;inset:3px;border:1px solid rgba(255,255,255,.34);border-radius:50%;pointer-events:none}
.balance-plus{color:#9c67df;font-size:12px;margin-left:1px}.topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.streamer-mode-btn{
  height:34px;border:1px solid rgba(137,68,225,.34);border-radius:999px;background:#08060b;color:#a879e4;
  display:flex;align-items:center;gap:7px;padding:0 11px;font-size:7.5px;font-weight:750;cursor:pointer;transition:.16s ease;
}
.streamer-mode-btn:hover,.streamer-mode-btn.active{border-color:rgba(160,91,248,.58);background:#100a17;color:#d8b9ff;box-shadow:0 0 18px rgba(126,57,210,.08)}
.streamer-mode-btn.active{box-shadow:inset 0 0 0 1px rgba(155,82,240,.12),0 0 18px rgba(126,57,210,.10)}
.streamer-icon{font-size:9px}.topbar-icon-btn{width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:#9a64de;display:grid;place-items:center;cursor:pointer;transition:.15s}.topbar-icon-btn:hover{background:#0d0912;color:#c99dfc}.topbar-icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.compact-live{height:32px;padding:0 9px;border-radius:8px;background:#070808;font-size:7px;color:#8e9c94}.compact-live .status-dot{width:5px;height:5px}
.profile-trigger{height:38px;border-radius:8px;background:#070708;border-color:#1e1d22;padding:2px 7px 2px 3px}.profile-trigger:hover{background:#0d0c0f;border-color:#312a38}.profile-trigger-name{font-size:8.5px}.avatar{width:31px;height:31px;font-size:8px}

.page{padding:26px 30px}
.page-head{margin-bottom:17px;align-items:center}.page-head h1{font-size:34px;letter-spacing:-.045em}.eyebrow{color:#a05cff;font-size:7px}.sub{font-size:8px;color:#69656f}
.head-actions .btn{min-height:36px;border-radius:7px;padding:0 13px;font-size:8px}.head-actions .btn.primary{background:linear-gradient(135deg,#8e46f5,#6123bd);border-color:#9a5af0;box-shadow:0 5px 17px rgba(102,39,184,.15)}
.match-toolbar{border-radius:8px!important;background:#070708!important;border-color:#1b1a1f!important;padding:5px!important;box-shadow:none!important}
.match-view-tabs{border:0!important;background:transparent!important;border-radius:6px!important;padding:0!important;gap:2px!important}.match-view-tab{min-height:34px!important;border-radius:6px!important;font-size:8px!important}.match-view-tab.available.active,.match-view-tab.ongoing.active{background:linear-gradient(135deg,#7f37e4,#5620a8)!important;border-color:#8c4ee6!important;color:#fff!important;box-shadow:none!important}.match-view-tab b{font-size:6px!important}
.match-filter-row{gap:5px!important}.filter-trigger{height:34px!important;min-width:108px!important;border-radius:6px!important;border-color:#1f1e23!important;background:#09090a!important;font-size:7px!important}.filter-trigger:hover{border-color:#3a2850!important;background:#0d0a11!important}.filter-menu{border-radius:7px!important;background:#09090b!important;border-color:#24222a!important;backdrop-filter:none!important}.filter-option{font-size:7px!important}
.match-browser-shell{margin-top:13px}.matches-grid{gap:10px}.match-card{min-height:220px;border-radius:8px;background:#080809!important;border-color:#1d1c21!important;box-shadow:none!important}.match-card:hover{transform:translateY(-2px)!important;border-color:#4b2d70!important;box-shadow:0 14px 34px rgba(0,0,0,.38)!important}.match-card::before{opacity:.10!important}.match-card::after{display:none!important}.match-title{font-size:13px}.match-host{font-size:7.5px}.match-status{border-radius:6px;background:#09070c;border-color:#24172f;font-size:7.5px}.stat{border-radius:6px!important}.match-actions .btn{border-radius:6px!important;min-height:38px;font-size:8px}

/* Flat Create Match modal — purposely overrides the older glass pass. */
.create-backdrop{background:rgba(0,0,0,.78)!important;backdrop-filter:none!important;padding:18px!important}
.create-wizard{
  width:min(548px,calc(100vw - 28px))!important;
  max-height:min(780px,96vh)!important;
  border:1px solid #2b2930!important;
  border-radius:8px!important;
  background:#0b0b0d!important;
  backdrop-filter:none!important;
  box-shadow:0 26px 75px rgba(0,0,0,.72)!important;
}
.create-wizard::before,.create-wizard::after,.create-wizard-glow{display:none!important}
.create-head{min-height:92px;padding:22px 20px 17px!important;background:#0b0b0d!important;border-bottom:1px solid #28272c!important}
.create-head-copy h2{font:800 21px/1.1 var(--font-ui,Sora,sans-serif);letter-spacing:-.035em}.create-head-copy p{margin-top:7px;color:#8a878f;font-size:9px}.create-head .close{right:15px;top:13px;color:#918d96;font-size:17px}
.create-summary{min-height:38px;padding:7px 14px;background:#09090a!important;border-bottom:1px solid #242329!important;color:#8d8992;font-size:7.5px;gap:5px 13px}.create-summary b{color:#a65eff}
.create-tabs{height:58px;background:#0b0b0d!important;border-bottom:1px solid #28272c!important}.create-tab{font-size:9.5px;color:#77747c}.create-tab:hover{background:#0e0d10;color:#c8c1cf}.create-tab.active{color:#fff}.create-tab.active::after{left:20%;right:20%;height:2px;background:#9a52f7;box-shadow:none}
.create-stage-wrap{min-height:392px;max-height:calc(96vh - 250px);background:#0b0b0d!important}.create-step{padding:22px 22px 20px}.create-field{margin-bottom:16px}.create-label,.create-label-row{margin:0 0 7px;color:#a09ca5;font-size:8px}.create-label.strong{font-size:9px;color:#eeeaf2}.create-label-row small{color:#77727b;font-size:6.8px}.create-split-fields{gap:10px}
.create-category-card{min-height:64px;border:1px solid #8d48e8!important;border-radius:7px!important;padding:11px 12px;background:#101012!important;box-shadow:none!important}.create-category-card:hover{transform:translateY(-1px);border-color:#ad6fff!important;background:#141017!important;box-shadow:0 7px 18px rgba(0,0,0,.24)!important}.create-category-card strong{font-size:11px;color:#fff}.create-category-card small{font-size:7.5px;color:#88838e}.create-category-card>span{color:#aaa5af}
.create-segment-grid{gap:7px}.create-option,.create-loadout{min-height:38px;border:1px solid #343238!important;border-radius:6px!important;background:#0d0d0f!important;color:#d3d0d6;font-size:8.5px;box-shadow:none!important}.create-option::before,.create-loadout::before{display:none}.create-option:hover,.create-loadout:hover{transform:translateY(-1px);border-color:#70419f!important;background:#121014!important;color:#fff}.create-option.active,.create-loadout.active{border-color:#9450ef!important;background:linear-gradient(180deg,#2c1744,#211132)!important;color:#fff;box-shadow:inset 0 0 0 1px rgba(181,116,255,.05)!important}.create-option.locked{color:#67636b;border-style:solid!important}.create-option.locked span{top:3px;right:4px}
.create-inline-back{font-size:8px}.create-mode-grid{gap:7px}.create-loadout-list{gap:5px;max-height:190px}.create-loadout{min-height:36px;padding:0 11px}.create-toggle-row{min-height:54px;border:1px solid #29282d!important;border-radius:6px!important;background:#0d0d0f!important;padding:8px 10px}.create-toggle-row:hover{background:#111014!important;border-color:#463252!important}.create-toggle-row strong{font-size:8.5px}.create-toggle-row small{font-size:6.5px}.create-switch{width:34px;height:19px;background:#242328}.create-toggle-row.active .create-switch{background:#54258a}.create-toggle-row.active .create-switch i{background:#b177ff}
.token-entry-field{margin-bottom:18px}.entry-token-input-wrap{min-height:48px;margin-top:0;border:1px solid #39363e!important;border-radius:6px!important;background:#0d0d0f!important;box-shadow:none!important;padding:0 12px;gap:9px}.entry-token-input-wrap:focus-within{transform:none;border-color:#9551ef!important;box-shadow:0 0 0 2px rgba(146,75,238,.08)!important}.token-input-mark{width:20px;height:20px;flex-basis:20px}.entry-token-input{font-size:14px;padding:13px 0;color:#fff}.entry-token-suffix{font-size:7px;color:#85808a}.entry-token-range{font-size:6.5px;color:#68636c;margin-top:6px}.create-sandbox-note{margin-top:10px;border:1px solid #231a2d;border-radius:6px;background:#0c090f;color:#7d7186;font-size:6.6px;padding:8px 9px}
.create-match-summary{margin-top:0;border:1px solid #2e2c32!important;border-radius:7px!important;background:#0d0d0f!important;padding:13px;box-shadow:none!important}.create-summary-title{font-size:10px;margin-bottom:10px}.create-summary-grid{gap:7px}.create-summary-grid>div,.create-summary-loadout{border:1px solid #29282d!important;border-radius:6px!important;background:#09090b!important;padding:9px}.create-summary-grid span,.create-summary-loadout span{font-size:6.2px;color:#77727b}.create-summary-grid strong,.create-summary-loadout strong{font-size:9px;color:#f0edf2}.create-summary-loadout{margin-top:7px}#finalSummaryEntry{display:flex;align-items:center;gap:5px}#finalSummaryEntry::before{content:"E";width:15px;height:15px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #9b5cff;background:#522096;color:#fff;font-size:4.5px;box-shadow:inset 0 0 0 2px #2b0f50}
.create-foot{min-height:70px;padding:12px 20px;background:#0b0b0d!important;border-top:1px solid #28272c!important;gap:9px}.create-foot .btn{min-height:42px;border-radius:6px;font-size:9px}.create-cancel{width:112px;flex-basis:112px;background:#09090a!important;border-color:#343238!important}.create-next,.create-submit{background:linear-gradient(135deg,#8f47f5,#6526c5)!important;border-color:#9c5af1!important;color:#fff!important;box-shadow:0 6px 18px rgba(101,37,190,.22)!important}.create-next:hover,.create-submit:hover{background:linear-gradient(135deg,#a25bff,#7431d9)!important;border-color:#b174ff!important;box-shadow:0 8px 23px rgba(106,39,199,.30)!important}

/* Streamer mode is visual privacy for live capture. Fortnite/Epic display names
   remain visible where they are explicitly labeled as the game identity. */
body.streamer-mode .profile-trigger-name,
body.streamer-mode #profileMenuEmail{letter-spacing:.01em}
body.streamer-mode #usernameInput:disabled{color:#b8b3bd;background:#0b0b0d;opacity:1}

@media(max-width:1180px){
  .app{grid-template-columns:190px minmax(0,1fr)}.sidebar{width:190px}.topbar{padding:0 16px}.search-wrap{width:240px}.compact-live{display:none}.page{padding:22px}.matches-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:930px){
  .app{display:block}.sidebar{width:224px;transform:translateX(-105%);transition:transform .2s ease;box-shadow:16px 0 48px rgba(0,0,0,.6)}.sidebar.open{transform:none}.main{grid-column:auto}.mobile-menu{display:grid;place-items:center;width:35px;height:35px;border-radius:7px}.topbar{height:64px}.search-wrap{width:min(250px,34vw)}.streamer-mode-btn span:last-child{display:none}.streamer-mode-btn{width:35px;padding:0;justify-content:center;border-radius:8px}.topbar-balance{position:static;transform:none;margin-left:auto}.topbar-balance:hover{transform:translateY(-1px)!important}.topbar-actions{margin-left:0}.matches-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .topbar{padding:0 10px;gap:6px}.search-wrap{width:min(190px,42vw)}.topbar-icon-btn{display:none}.profile-trigger-name{display:none}.profile-trigger{padding-right:3px}.page{padding:16px 12px}.page-head{align-items:flex-start;flex-direction:column}.head-actions{width:100%}.head-actions .btn{flex:1}.match-filter-row{grid-template-columns:1fr 1fr!important}.create-backdrop{padding:7px!important}.create-wizard{width:100%!important;max-height:calc(100vh - 14px)!important}.create-head{min-height:80px;padding-top:17px!important}.create-stage-wrap{max-height:calc(100vh - 225px)}.create-step{padding:17px 14px}.create-split-fields{grid-template-columns:1fr}.create-segment-grid.four{grid-template-columns:repeat(2,1fr)}.create-foot{padding:9px 12px}.create-cancel{width:88px;flex-basis:88px}
}
@media(max-width:430px){
  .search-wrap{display:none!important}.topbar-balance{margin-left:auto}.match-filter-row{grid-template-columns:1fr!important}.create-summary{font-size:6.7px;gap:4px 8px}.create-summary-grid{grid-template-columns:1fr}.create-foot{display:grid;grid-template-columns:92px 1fr}.create-foot .btn{width:100%}.create-submit,.create-next{grid-column:2}.entry-token-input{font-size:16px}
}

/* ============================================================
   ELITES v0.25.7 — compact reference-proportion Create Match
   Keep the site's existing animated ELITES background untouched.
   The modal overlay only dims the page; it never blurs it.
   ============================================================ */
.create-backdrop{
  background:rgba(0,0,0,.46)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:12px!important;
}
.create-wizard{
  width:min(492px,calc(100vw - 24px))!important;
  max-height:min(690px,calc(100vh - 24px))!important;
  border:1px solid #2a2930!important;
  border-radius:7px!important;
  background:#0a0a0c!important;
  box-shadow:0 18px 52px rgba(0,0,0,.58)!important;
}
.create-head{
  min-height:74px!important;
  padding:15px 18px 12px!important;
  background:#0a0a0c!important;
}
.create-head-copy{width:100%;text-align:center}
.create-head-copy h2{font-size:18px!important;line-height:1.05!important;letter-spacing:-.035em!important}
.create-head-copy p{margin-top:6px!important;font-size:8px!important;color:#85818a!important}
.create-head .close{right:13px!important;top:10px!important;font-size:15px!important}
.create-summary{
  min-height:33px!important;
  padding:6px 12px!important;
  justify-content:center!important;
  gap:4px 11px!important;
  font-size:6.9px!important;
  background:#09090a!important;
}
.create-tabs{height:46px!important;background:#0a0a0c!important}
.create-tab{font-size:8.3px!important}
.create-tab.active::after{left:23%!important;right:23%!important;height:1.5px!important}
.create-stage-wrap{
  min-height:310px!important;
  max-height:calc(min(690px,100vh - 24px) - 211px)!important;
  background:#0a0a0c!important;
}
.create-step{padding:16px 18px 14px!important}
.create-field{margin-bottom:12px!important}
.create-label,.create-label-row{margin-bottom:6px!important;font-size:7.3px!important}
.create-label.strong{font-size:8.2px!important}
.create-split-fields{gap:8px!important}
.create-category-card{
  min-height:53px!important;
  padding:8px 10px!important;
  border-radius:6px!important;
}
.create-category-card strong{font-size:9.7px!important}
.create-category-card small{font-size:6.6px!important;margin-top:2px!important}
.create-segment-grid{gap:6px!important}
.create-option,.create-loadout{
  min-height:33px!important;
  border-radius:5px!important;
  font-size:7.6px!important;
}
.create-option:hover,.create-loadout:hover,.create-category-card:hover{transform:translateY(-1px)!important}
.create-option.active,.create-loadout.active{
  background:linear-gradient(180deg,#32194d,#241238)!important;
  border-color:#9654ef!important;
}
.create-loadout-list{gap:4px!important;max-height:157px!important}
.create-loadout{min-height:31px!important;padding:0 9px!important}
.create-inline-back{font-size:7px!important;margin-bottom:8px!important}
.create-toggle-row{
  min-height:46px!important;
  padding:7px 9px!important;
  border-radius:5px!important;
}
.create-toggle-row strong{font-size:7.7px!important}
.create-toggle-row small{font-size:5.9px!important;line-height:1.35!important}
.create-switch{width:31px!important;height:17px!important}
.create-switch i{width:13px!important;height:13px!important}
.create-toggle-row.active .create-switch i{transform:translateX(14px)!important}
.token-entry-field{margin-bottom:13px!important}
.entry-token-input-wrap{
  min-height:41px!important;
  border-radius:5px!important;
  padding:0 10px!important;
  gap:8px!important;
}
.token-input-mark{width:18px!important;height:18px!important;flex-basis:18px!important}
.entry-token-input{font-size:12px!important;padding:10px 0!important}
.entry-token-suffix{font-size:6.4px!important}
.entry-token-range{font-size:5.9px!important;margin-top:5px!important}
.create-sandbox-note{margin-top:8px!important;padding:6px 8px!important;font-size:5.8px!important;border-radius:5px!important}
.create-match-summary{padding:10px!important;border-radius:6px!important}
.create-summary-title{font-size:8.7px!important;margin-bottom:8px!important}
.create-summary-grid{gap:6px!important}
.create-summary-grid>div,.create-summary-loadout{padding:7px!important;border-radius:5px!important}
.create-summary-grid span,.create-summary-loadout span{font-size:5.7px!important}
.create-summary-grid strong,.create-summary-loadout strong{font-size:8.2px!important;margin-top:3px!important}
.create-summary-loadout{margin-top:6px!important}
#finalSummaryEntry::before{width:13px!important;height:13px!important;font-size:4px!important}
.create-foot{
  min-height:58px!important;
  padding:8px 18px!important;
  gap:8px!important;
  background:#0a0a0c!important;
}
.create-foot .btn{min-height:36px!important;border-radius:5px!important;font-size:8px!important}
.create-cancel{width:96px!important;flex-basis:96px!important}
.create-next,.create-submit{box-shadow:0 5px 15px rgba(101,37,190,.18)!important}

/* At phone/tablet widths keep it comfortably inset rather than full-screen. */
@media(max-width:650px){
  .create-backdrop{padding:10px!important;align-items:center!important}
  .create-wizard{width:min(492px,calc(100vw - 20px))!important;max-height:calc(100vh - 20px)!important;border-radius:7px!important}
  .create-head{min-height:68px!important;padding:13px 15px 10px!important}
  .create-stage-wrap{max-height:calc(100vh - 199px)!important}
  .create-step{padding:14px 13px 12px!important}
  .create-foot{padding:8px 13px!important}
  .create-cancel{width:82px!important;flex-basis:82px!important}
}
@media(max-width:430px){
  .create-summary{font-size:6px!important;gap:3px 7px!important}
  .create-step{padding:13px 11px 11px!important}
  .create-foot{grid-template-columns:82px 1fr!important}
}

/* ============================================================
   ELITES v0.25.8 — reference-locked competitive shell
   Geometry and surface styling are matched to the supplied
   desktop reference. Existing animated ELITES background layers
   are intentionally untouched. Functional/data behavior remains real.
   ============================================================ */
:root{
  --ref-sidebar:210px;
  --ref-topbar:72px;
  --ref-purple:#8f48f6;
  --ref-purple-hi:#a25cff;
  --ref-purple-deep:#5e24b8;
  --ref-bg:#050506;
  --ref-panel:#09090b;
  --ref-panel-2:#0c0c0e;
  --ref-line:#242329;
  --ref-muted:#77727d;
}

/* Main shell */
.app{grid-template-columns:var(--ref-sidebar) minmax(0,1fr)!important}
.sidebar{
  width:var(--ref-sidebar)!important;
  padding:18px 16px 16px!important;
  background:#050506!important;
  border-right:1px solid #18171c!important;
}
.brand.brand-wordmark{
  min-height:46px!important;
  padding:0 10px 14px!important;
  gap:11px!important;
  font-size:18px!important;
  font-weight:800!important;
}
.brand.brand-wordmark img{width:33px!important;height:33px!important;border-radius:7px!important}
.game-switcher{
  min-height:42px!important;
  grid-template-columns:28px minmax(0,1fr) 13px!important;
  margin:0 0 19px!important;
  padding:6px 9px!important;
  border-radius:7px!important;
  border-color:#222126!important;
  background:#08080a!important;
}
.game-switcher-icon{width:24px!important;height:24px!important;border-radius:5px!important;font-size:8px!important}
.game-switcher-copy strong{font-size:12px!important;font-weight:750!important}
.game-switcher-copy small{display:none!important}
.game-switcher-chevron{font-size:13px!important}
.nav-section{margin-bottom:15px!important;padding-bottom:11px!important;border-bottom-color:#151419!important}
.nav-label{padding:0 8px 7px!important;font-size:9px!important;letter-spacing:.12em!important;color:#5d5964!important}
.nav-item{
  min-height:39px!important;height:39px!important;
  padding:0 10px!important;
  margin:1px 0!important;
  gap:9px!important;
  border-radius:6px!important;
  font-size:12.5px!important;
  font-weight:650!important;
  color:#98949f!important;
}
.nav-item:hover{background:#0c0b0e!important;color:#f0ebf4!important;transform:translateX(1px)}
.nav-item.active{
  color:#e9dcfa!important;
  background:linear-gradient(90deg,rgba(131,58,229,.25),rgba(79,31,128,.15))!important;
  box-shadow:inset 2px 0 var(--ref-purple)!important;
}
.nav-icon{width:19px!important;color:#9b67dc!important}.nav-icon svg{width:17px!important;height:17px!important}
.ongoing-match-link,.recent-match-link{min-height:39px!important}
.ongoing-match-copy strong,.recent-match-copy strong{font-size:10px!important}
.ongoing-match-copy small,.recent-match-copy small{font-size:7.5px!important;line-height:1.25!important}
.recent-match-clock{font-size:14px!important}
.sidebar-bottom{padding-top:10px!important}
.battle-pass-card{
  min-height:57px!important;margin-bottom:9px!important;padding:9px!important;
  border-radius:8px!important;grid-template-columns:30px minmax(0,1fr) 16px!important;
}
.battle-pass-card strong{font-size:10px!important}.battle-pass-card small{font-size:7px!important}
.battle-pass-icon{width:29px!important;height:29px!important}
.purchase-tokens-nav{border-color:#26242a!important;background:#070708!important;color:#d0cbd4!important}

.main{grid-column:2!important;min-width:0!important}
.topbar{
  height:var(--ref-topbar)!important;
  padding:0 27px!important;
  gap:12px!important;
  background:rgba(3,3,4,.94)!important;
  border-bottom:1px solid #17161b!important;
  backdrop-filter:none!important;
}
.search-wrap{width:282px!important}.search{height:36px!important;border-radius:9px!important;font-size:12px!important;padding-left:38px!important}
.search-icon{left:13px!important;font-size:14px!important}
.topbar-balance{height:36px!important;min-width:104px!important;padding:0 12px!important;font-size:13px!important}
.token-coin-mark,.coin{width:19px!important;height:19px!important;flex-basis:19px!important;font-size:6px!important}
.balance-plus{font-size:14px!important}
.topbar-actions{gap:8px!important}
.streamer-mode-btn{height:36px!important;padding:0 13px!important;gap:8px!important;font-size:10.5px!important}
.streamer-icon{font-size:11px!important}
.topbar-icon-btn{width:36px!important;height:36px!important}.topbar-icon-btn svg{width:19px!important;height:19px!important}
.compact-live{display:none!important}
.profile-trigger{height:38px!important;padding:2px 5px 2px 2px!important;border:0!important;background:transparent!important;gap:5px!important}
.profile-trigger:hover{background:#0b0a0d!important}.profile-trigger .avatar,.avatar{width:34px!important;height:34px!important;font-size:10px!important}
.profile-trigger-name{display:none!important}.profile-chevron{font-size:11px!important}

/* Live Matches page geometry */
#page-matches{padding:25px 30px 40px!important}
.matches-page-head{min-height:76px!important;margin:0 0 11px!important;display:flex!important;align-items:center!important}
.page-title-lockup{display:flex!important;align-items:center!important;gap:15px!important;position:relative!important}
.page-title-lockup::before{content:"";width:2px;height:48px;border-radius:2px;background:linear-gradient(#a761ff,#6b2bd0);box-shadow:0 0 14px rgba(143,72,246,.32)}
.page-title-icon{width:33px;height:33px;display:grid;place-items:center;color:#9b54f7}
.page-title-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
#page-matches .eyebrow{font-size:10px!important;letter-spacing:.15em!important;color:#aa65ff!important;margin-bottom:4px!important}
#page-matches .page-head h1{font-size:32px!important;line-height:1!important;letter-spacing:-.04em!important}
#page-matches .sub{display:none!important}
.head-actions{gap:9px!important}.head-actions .btn{height:42px!important;min-height:42px!important;border-radius:8px!important;padding:0 17px!important;font-size:11px!important}
.head-actions .btn.primary{min-width:178px!important;background:linear-gradient(135deg,#9149f5,#6123bf)!important;border-color:#9454e8!important;box-shadow:0 8px 22px rgba(104,38,193,.18)!important}
.requeue-style{min-width:116px!important;background:#09090a!important;border-color:#242329!important;color:#bbb7c0!important}

.match-toolbar{margin:0 0 17px!important;gap:13px!important;align-items:center!important}
.match-view-tabs{min-height:46px!important;padding:4px!important;gap:3px!important;border:1px solid #1e1d22!important;border-radius:10px!important;background:#08080a!important;box-shadow:none!important}
.match-view-tab{height:37px!important;min-width:118px!important;padding:0 15px!important;border-radius:7px!important;font-size:11.5px!important;font-weight:750!important;gap:8px!important}
.match-view-tab b{min-width:19px!important;height:19px!important;font-size:9px!important;padding:0 5px!important}
.match-view-tab.available.active,.match-view-tab.ongoing.active{background:linear-gradient(135deg,#8140e7,#5620aa)!important;border-color:#8c50e8!important;color:#fff!important;box-shadow:0 0 18px rgba(114,45,206,.12)!important}
.match-filter-row{gap:6px!important}.filter-trigger{height:37px!important;min-width:116px!important;padding:0 10px!important;border-radius:8px!important;font-size:10px!important;gap:7px!important}.sort-dropdown .filter-trigger{min-width:105px!important}.filter-symbol{font-size:11px!important}.filter-chevron{font-size:11px!important}
.filter-menu{min-width:182px!important;border-radius:8px!important;background:#0a0a0c!important;border-color:#29272f!important;backdrop-filter:none!important}.filter-option{min-height:34px!important;border-radius:6px!important;font-size:10px!important}.filter-group-label{font-size:8px!important}
.match-browser-shell{margin-top:0!important}.matches-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
.match-card{
  min-height:286px!important;padding:18px!important;border-radius:10px!important;
  background:#080809!important;border:1px solid #201f24!important;box-shadow:none!important;
}
.match-card:hover{transform:translateY(-2px)!important;border-color:#4c2c71!important;box-shadow:0 14px 36px rgba(0,0,0,.38)!important}
.match-title{font-size:16px!important;letter-spacing:.01em!important}.match-host{margin-top:4px!important;font-size:9px!important;color:#716d77!important}
.live-dot{width:8px!important;height:8px!important}
.match-tags{margin-top:14px!important;gap:6px!important}.tag{min-height:25px!important;padding:0 9px!important;border-radius:999px!important;font-size:8.5px!important}
.match-stats{margin-top:17px!important;gap:9px!important}.stat{padding:11px 12px!important;border-radius:7px!important;background:#09090b!important;border-color:#242329!important}.stat label{font-size:8px!important;margin-bottom:6px!important}.stat strong{font-size:14px!important}
.match-status{margin-top:11px!important;padding:10px 11px!important;border-radius:7px!important;font-size:9.5px!important;line-height:1.45!important}
.match-actions{padding-top:15px!important}.match-actions .btn{min-height:43px!important;border-radius:7px!important;font-size:11px!important;font-weight:750!important}
.empty{border-radius:10px!important;background:#080809!important;border-color:#201f24!important}

/* Common site surfaces: same flat, thin-border visual language as the reference. */
.panel,.section-card,.settings-panel,.connection-card,.history-summary-card,.credit-activity-panel,.purchase-panel,.leader-row,.leader-hero,.public-profile-card,.mode-rules-card,.conditional-rules-panel,.room-rules-panel{
  border-radius:10px!important;
  background:#09090b!important;
  border-color:#242329!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.input{border-radius:7px!important;background:#0b0b0d!important;border-color:#2a2930!important}
.btn{border-radius:7px!important}

/* Create Match — exact reference proportions, without blur. */
.create-backdrop{
  background:rgba(0,0,0,.38)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  padding:14px!important;
}
.create-wizard{
  width:min(540px,calc(100vw - 28px))!important;
  max-height:min(690px,calc(100vh - 28px))!important;
  border-radius:8px!important;
  border:1px solid #2d2c31!important;
  background:#0b0b0d!important;
  box-shadow:0 24px 70px rgba(0,0,0,.58)!important;
}
.create-head{min-height:105px!important;padding:23px 22px 17px!important;background:#0b0b0d!important;border-bottom:1px solid #2b2a2f!important}
.create-head-copy h2{font-size:24px!important;line-height:1.05!important;font-weight:800!important}.create-head-copy p{margin-top:8px!important;font-size:13px!important;color:#8b8790!important}
.create-head .close{right:17px!important;top:14px!important;font-size:19px!important}
.create-summary{min-height:44px!important;padding:8px 14px!important;gap:6px 15px!important;font-size:11px!important;background:#09090a!important;border-bottom:1px solid #29282d!important}.create-summary b{color:#a35cff!important}
.create-tabs{height:53px!important;background:#0b0b0d!important;border-bottom:1px solid #2a292e!important}.create-tab{font-size:13px!important;font-weight:600!important}.create-tab.active::after{left:20%!important;right:20%!important;height:2px!important;background:#a05af8!important}
.create-stage-wrap{min-height:365px!important;max-height:calc(min(690px,100vh - 28px) - 269px)!important;background:#0b0b0d!important}
.create-step{padding:26px 24px 22px!important}.create-field{margin-bottom:20px!important}.create-label,.create-label-row{margin-bottom:9px!important;font-size:12px!important;color:#aaa5ae!important}.create-label.strong{font-size:13px!important;color:#f1edf4!important}.create-label-row small{font-size:10px!important}
.create-category-card{min-height:79px!important;padding:14px 15px!important;border-radius:8px!important;background:#101012!important}.create-category-card strong{font-size:16px!important}.create-category-card small{font-size:12px!important;margin-top:3px!important}.create-category-card>span{font-size:23px!important}
.create-segment-grid{gap:8px!important}.create-option,.create-loadout{min-height:46px!important;border-radius:7px!important;font-size:13px!important;font-weight:700!important;background:#0e0e10!important;border-color:#35343a!important}.create-option.active,.create-loadout.active{background:#151019!important;border-color:#9d55f7!important;box-shadow:inset 0 0 0 1px rgba(164,90,248,.05)!important}.create-option.locked{opacity:.72!important}.create-option.locked span{display:none!important}
.create-split-fields{gap:12px!important}.create-loadout-list{gap:6px!important;max-height:210px!important}.create-loadout{min-height:42px!important;padding:0 13px!important}.create-inline-back{font-size:11px!important}
.create-toggle-row{min-height:62px!important;padding:10px 12px!important;border-radius:7px!important}.create-toggle-row strong{font-size:12px!important}.create-toggle-row small{font-size:9px!important}.create-switch{width:38px!important;height:21px!important}.create-switch i{width:15px!important;height:15px!important}.create-toggle-row.active .create-switch i{transform:translateX(16px)!important}
.entry-token-input-wrap{min-height:50px!important;padding:0 13px!important;border-radius:7px!important}.token-input-mark{width:21px!important;height:21px!important;flex-basis:21px!important}.entry-token-input{font-size:15px!important;padding:14px 0!important}.entry-token-suffix{font-size:10px!important}.entry-token-range{font-size:8px!important}.create-sandbox-note{font-size:8.5px!important;line-height:1.45!important;padding:8px 10px!important}
.create-match-summary{padding:13px!important;border-radius:8px!important}.create-summary-title{font-size:13px!important}.create-summary-grid>div,.create-summary-loadout{padding:10px!important;border-radius:7px!important}.create-summary-grid span,.create-summary-loadout span{font-size:8px!important}.create-summary-grid strong,.create-summary-loadout strong{font-size:11px!important}
.create-foot{min-height:84px!important;padding:14px 20px!important;background:#0b0b0d!important;border-top:1px solid #2a292e!important}.create-foot .btn{min-height:48px!important;border-radius:7px!important;font-size:13px!important}.create-cancel{width:138px!important;flex-basis:138px!important}.create-next,.create-submit{background:linear-gradient(135deg,#9149f5,#6526c6)!important;border-color:#9c5cf1!important;box-shadow:0 7px 19px rgba(102,37,190,.22)!important}

@media(max-width:1100px){
  .app{grid-template-columns:190px minmax(0,1fr)!important}.sidebar{width:190px!important;padding-left:12px!important;padding-right:12px!important}.nav-item{font-size:11.5px!important}.search-wrap{width:230px!important}.matches-grid{grid-template-columns:1fr 1fr!important}#page-matches{padding-left:22px!important;padding-right:22px!important}
}
@media(max-width:930px){
  .app{display:block!important}.sidebar{width:224px!important}.topbar{height:64px!important;padding:0 12px!important}.search-wrap{width:min(260px,36vw)!important}.topbar-balance{position:static!important;transform:none!important;margin-left:auto!important}.topbar-actions{margin-left:0!important}.matches-grid{grid-template-columns:1fr!important}.matches-page-head{align-items:flex-start!important}.head-actions .btn.primary{min-width:0!important}
}
@media(max-width:650px){
  #page-matches{padding:16px 12px 28px!important}.matches-page-head{flex-direction:column!important;gap:14px!important}.page-title-lockup::before{height:41px!important}.head-actions{width:100%!important}.head-actions .btn{flex:1!important}.match-toolbar{align-items:stretch!important;flex-direction:column!important}.match-view-tabs{width:max-content!important}.match-filter-row{display:grid!important;grid-template-columns:1fr 1fr!important}.filter-trigger{width:100%!important}.create-backdrop{padding:9px!important}.create-wizard{width:min(540px,calc(100vw - 18px))!important;max-height:calc(100vh - 18px)!important}.create-head{min-height:84px!important;padding:17px 16px 13px!important}.create-head-copy h2{font-size:20px!important}.create-head-copy p{font-size:11px!important}.create-summary{font-size:9px!important;gap:4px 9px!important}.create-tabs{height:48px!important}.create-stage-wrap{max-height:calc(100vh - 227px)!important}.create-step{padding:18px 15px!important}.create-category-card{min-height:64px!important}.create-option,.create-loadout{min-height:40px!important;font-size:11px!important}.create-foot{min-height:67px!important;padding:9px 13px!important}.create-foot .btn{min-height:42px!important}.create-cancel{width:96px!important;flex-basis:96px!important}
}
@media(max-width:430px){
  .search-wrap{display:none!important}.streamer-mode-btn span:last-child{display:none!important}.streamer-mode-btn{width:36px!important;padding:0!important;justify-content:center!important}.match-filter-row{grid-template-columns:1fr!important}.create-segment-grid.four{grid-template-columns:repeat(2,1fr)!important}.create-split-fields{grid-template-columns:1fr!important}.create-summary-grid{grid-template-columns:1fr!important}.create-foot{display:grid!important;grid-template-columns:92px 1fr!important}.create-cancel{width:92px!important;flex-basis:auto!important}
}

/* ============================================================
   ELITES v0.25.9 — full-page reference lock
   Matches the supplied dark competitive dashboard across the
   background shell, cards and controls. Existing ELITES animated
   background layers remain untouched; this block only reshapes UI.
   ============================================================ */
:root{
  --ref99-bg:#030406;
  --ref99-side:#060708;
  --ref99-top:#040506;
  --ref99-panel:#0f1012;
  --ref99-card:#050608;
  --ref99-card2:#090a0c;
  --ref99-line:#1a1b20;
  --ref99-line-hi:#2c2d33;
  --ref99-muted:#78757f;
  --ref99-text:#f4f2f7;
  --ref99-purple:#9149f5;
  --ref99-purple-hi:#a45cff;
  --ref99-purple-deep:#5d28b7;
}

html,body{background:var(--ref99-bg)!important}
body{color:var(--ref99-text)!important}

/* Reference shell: dead-flat surfaces, thin rules, no glass treatment. */
.sidebar{
  background:var(--ref99-side)!important;
  border-right:1px solid #17181c!important;
  box-shadow:none!important;
}
.topbar{
  background:rgba(4,5,6,.97)!important;
  border-bottom:1px solid #15161a!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.topbar::after{opacity:.18!important}
.search{
  background:#050608!important;
  border:1px solid #16171b!important;
  color:#d9d6dd!important;
  box-shadow:none!important;
}
.search:hover{border-color:#22232a!important}
.search:focus{border-color:#4a2b6e!important;box-shadow:0 0 0 2px rgba(145,73,245,.07)!important}
.search::placeholder{color:#4f4e56!important}

/* Brand + sidebar geometry from the reference. */
.brand.brand-wordmark{color:#f5f3f7!important}
.brand.brand-wordmark:hover{color:#fff!important;transform:none!important}
.brand.brand-wordmark img{box-shadow:0 0 18px rgba(145,73,245,.18)!important}
.game-switcher{
  background:#08090b!important;
  border-color:#1c1d22!important;
  box-shadow:none!important;
}
.nav-section{border-bottom-color:#131418!important}
.nav-label{color:#55545c!important}
.nav-item{
  background:transparent!important;
  color:#92909a!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  transition:background .14s ease,color .14s ease,border-color .14s ease,transform .14s ease!important;
}
.nav-item:hover{
  background:#0b0c0f!important;
  border-color:#14151a!important;
  color:#e7e3eb!important;
  transform:translateX(1px)!important;
}
.nav-item.active{
  background:linear-gradient(90deg,rgba(145,73,245,.24),rgba(99,44,166,.13))!important;
  border-color:rgba(145,73,245,.08)!important;
  box-shadow:inset 2px 0 var(--ref99-purple)!important;
  color:#efe5fb!important;
}
.nav-icon{color:#9d65e3!important}
.ongoing-match-link,.recent-match-link{
  border:1px solid transparent!important;
  background:transparent!important;
  border-radius:6px!important;
  box-shadow:none!important;
}
.ongoing-match-link:hover,.ongoing-match-link.active,.recent-match-link:hover{
  background:#0b0c0f!important;
  border-color:#17181d!important;
  transform:translateX(1px)!important;
}
.battle-pass-card{
  background:#09070d!important;
  border:1px solid #29193b!important;
  box-shadow:none!important;
}
.battle-pass-card:hover{background:#0d0913!important;border-color:#472569!important;transform:translateY(-1px)!important}
.purchase-tokens-nav{background:#07080a!important;border:1px solid #222329!important}
.purchase-tokens-nav:hover{background:#0c0d10!important;border-color:#32333a!important}

/* Top bar controls: same compact, squared-off button language. */
.topbar-balance,.streamer-mode-btn,.profile-trigger,.topbar-icon-btn{
  box-shadow:none!important;
}
.topbar-balance{
  background:#07070a!important;
  border:1px solid #1d1529!important;
  border-radius:10px!important;
}
.streamer-mode-btn{
  background:#07070a!important;
  border:1px solid #31194a!important;
  border-radius:10px!important;
  color:#b17aef!important;
}
.streamer-mode-btn:hover,.streamer-mode-btn.active{
  background:#0d0913!important;
  border-color:#5b2d88!important;
  color:#c997ff!important;
  transform:translateY(-1px)!important;
}
.topbar-icon-btn{
  border:1px solid transparent!important;
  border-radius:8px!important;
  background:transparent!important;
}
.topbar-icon-btn:hover{background:#0b0b0e!important;border-color:#18191e!important;color:#c18af7!important;transform:none!important}
.profile-trigger{border-radius:9px!important}

/* Main page sits directly on the preserved animated ELITES background. */
#page-matches{
  background:transparent!important;
}
#page-matches::before,#page-matches::after{
  /* keep the existing animated ELITES layers but make the controls readable */
  opacity:.78;
}
.matches-page-head{position:relative;z-index:3}
.page-title-lockup::before{width:2px!important;box-shadow:0 0 12px rgba(145,73,245,.28)!important}
.page-title-icon{color:#9a50f4!important}
#page-matches .eyebrow{color:#a05df5!important}
#page-matches .page-head h1{color:#f1eff4!important;text-shadow:none!important}

/* All ordinary dashboard buttons use the reference's 7–9px geometry. */
.btn,
.chip,
.filter-trigger,
.filter-option,
.match-view-tab,
.profile-tabs button,
.auth-tab,
.connection-action,
.wallet-purchase-btn,
.credit-pack,
.settings-toggle,
.room-see-rules,
.create-option,
.create-loadout,
.create-inline-back{
  border-radius:8px!important;
  box-shadow:none!important;
}
.btn{
  background:#08090a!important;
  border-color:#24252a!important;
  color:#e9e6ed!important;
  font-weight:750!important;
  transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease!important;
}
.btn:hover:not(:disabled){
  background:#0d0e11!important;
  border-color:#373840!important;
  transform:translateY(-1px)!important;
  box-shadow:none!important;
}
.btn.primary,.create-next,.create-submit{
  background:linear-gradient(135deg,#954cf6 0%,#6d2bd0 72%,#5c24b4 100%)!important;
  border-color:#9654e8!important;
  color:#fff!important;
  box-shadow:0 7px 20px rgba(103,41,188,.18)!important;
}
.btn.primary:hover:not(:disabled),.create-next:hover,.create-submit:hover{
  background:linear-gradient(135deg,#a25cff 0%,#7732dd 72%,#6526c2 100%)!important;
  border-color:#a568f0!important;
  box-shadow:0 9px 25px rgba(103,41,188,.24)!important;
}

/* Live browser bar — exact flat grouped-tabs / compact filter treatment. */
.match-toolbar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:0!important;
  margin:0 0 17px!important;
}
.match-view-tabs{
  flex:0 0 auto!important;
  min-height:44px!important;
  padding:3px!important;
  gap:3px!important;
  background:#07080a!important;
  border:1px solid #17181d!important;
  border-radius:10px!important;
  backdrop-filter:none!important;
}
.match-view-tab{
  min-width:120px!important;
  height:37px!important;
  background:transparent!important;
  border:1px solid transparent!important;
  color:#6e6c75!important;
  font-size:11px!important;
  font-weight:700!important;
}
.match-view-tab:hover{background:#0b0c0f!important;color:#c8c4cc!important}
.match-view-tab.active{
  background:linear-gradient(135deg,#8240e9,#5721aa)!important;
  border-color:#8e50e8!important;
  color:#fff!important;
  box-shadow:0 0 14px rgba(120,50,215,.12)!important;
}
.match-view-tab b{
  min-width:19px!important;height:19px!important;
  background:#121216!important;color:#aaa4b0!important;
  border:1px solid #1e1e24!important;
}
.match-view-tab.active b{background:#25123d!important;color:#fff!important;border-color:#321653!important}
.match-filter-row{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}
.filter-trigger{
  height:37px!important;
  background:#07080a!important;
  border:1px solid #18191e!important;
  color:#77747e!important;
  font-size:10.5px!important;
  font-weight:650!important;
}
.filter-trigger:hover,.filter-dropdown.open .filter-trigger{
  background:#0b0c0f!important;
  border-color:#292a31!important;
  color:#d5d1d9!important;
  transform:none!important;
}
.filter-menu{
  padding:5px!important;
  background:#090a0c!important;
  border:1px solid #25262c!important;
  border-radius:8px!important;
  box-shadow:0 18px 50px rgba(0,0,0,.52)!important;
}
.filter-option{background:transparent!important;border:1px solid transparent!important;color:#94919a!important}
.filter-option:hover{background:#0f1013!important;border-color:#1d1e23!important;color:#eeeaf1!important}
.filter-option.active{background:rgba(145,73,245,.10)!important;border-color:rgba(145,73,245,.18)!important;color:#c99cff!important}

/* Reference uses three live cards across at full desktop width. */
.matches-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
}
.match-card{
  min-height:350px!important;
  padding:19px 19px 17px!important;
  border-radius:9px!important;
  background:rgba(4,5,7,.93)!important;
  border:1px solid #15161b!important;
  box-shadow:none!important;
}
.match-card::before{
  background:radial-gradient(290px circle at var(--cx) var(--cy),rgba(145,73,245,.08),transparent 64%)!important;
  opacity:.15!important;
}
.match-card::after{opacity:.18!important}
.match-card:hover{
  transform:translateY(-2px)!important;
  background:rgba(6,7,9,.97)!important;
  border-color:#342041!important;
  box-shadow:0 18px 48px rgba(0,0,0,.36)!important;
}
.reference-match-top{min-height:46px!important}
.reference-match-heading{min-width:0!important}
.match-title{
  color:#d5d1d9!important;
  font-size:18px!important;
  line-height:1.15!important;
  font-weight:800!important;
  letter-spacing:.005em!important;
  text-transform:uppercase!important;
}
.match-host{margin-top:5px!important;font-size:8px!important;color:#51505a!important}
.live-dot{
  position:relative!important;
  width:12px!important;height:12px!important;
  flex:0 0 12px!important;
  border-radius:50%!important;
  background:#8f48f6!important;
  border:3px solid #25163a!important;
  box-shadow:0 0 0 2px #8f48f6,0 0 16px rgba(145,73,245,.22)!important;
}
.reference-match-tags{margin-top:14px!important;gap:6px!important;align-items:center!important}
.tag{
  min-height:27px!important;
  padding:0 10px!important;
  display:inline-flex!important;align-items:center!important;
  background:#08090b!important;
  border:1px solid #222329!important;
  border-radius:999px!important;
  color:#85818b!important;
  font-size:8px!important;
  letter-spacing:.055em!important;
}
.tag.simple-edit-tag{border-color:#3d234f!important;color:#ab72d0!important;background:#0d0810!important}
.tag.dim{color:#73558e!important;border-color:#2b1939!important;background:#0b0710!important}
.reference-match-metrics{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  margin-top:34px!important;
  border-top:1px solid #111216!important;
  border-bottom:1px solid #111216!important;
}
.reference-match-metric{
  min-height:77px!important;
  padding:15px 14px!important;
  background:transparent!important;
}
.reference-match-metric+ .reference-match-metric{border-left:1px solid #111216!important}
.reference-match-metric label{
  display:block!important;
  margin-bottom:8px!important;
  color:#5f5d66!important;
  font-size:8px!important;
  font-weight:750!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}
.reference-match-metric strong{
  display:flex!important;align-items:center!important;gap:7px!important;
  color:#aaa6af!important;
  font-size:16px!important;
  font-weight:800!important;
}
.metric-symbol{color:#9f5af1!important;font-size:15px!important}
.metric-live-dot{width:7px;height:7px;border-radius:50%;background:#8f48f6;box-shadow:0 0 9px rgba(145,73,245,.45)}
.reference-match-note{
  margin-top:15px!important;
  min-height:34px!important;
  color:#595761!important;
  font-size:9px!important;
  line-height:1.45!important;
}
.reference-match-actions{margin-top:auto!important;padding-top:13px!important}
.reference-match-actions .btn{
  min-height:47px!important;
  border-radius:7px!important;
  font-size:11px!important;
  text-transform:uppercase!important;
  letter-spacing:.075em!important;
}
.reference-match-actions .btn.primary{
  background:linear-gradient(90deg,#4e208c,#7b35dd,#56219e)!important;
  border-color:#6f32c1!important;
}
.reference-match-actions .btn.primary:hover:not(:disabled){background:linear-gradient(90deg,#5b249f,#8a40ed,#6526b7)!important}
.reference-match-actions .view-live{border-color:#332040!important;color:#c6a5ea!important;background:#0b0810!important}

/* Empty/loading states should look like part of the same page, not a separate bubble. */
.empty,.loading{
  background:rgba(4,5,7,.86)!important;
  border-color:#15161b!important;
  border-radius:9px!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.empty-icon{border-radius:9px!important;background:#090a0c!important;border-color:#23242a!important;color:#9960dc!important}

/* The rest of the site follows the same thin-border charcoal hierarchy. */
.page:not(#page-matches):not(#page-room){padding:25px 30px 40px!important}
.panel,.section-card,.settings-panel,.connection-card,.history-summary-card,.credit-activity-panel,.purchase-panel,.leader-row,.leader-hero,.public-profile-card,.mode-rules-card,.conditional-rules-panel,.room-rules-panel,.connections-note{
  background:rgba(8,9,11,.94)!important;
  border:1px solid #1b1c21!important;
  border-radius:9px!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.panel:hover,.connection-card:hover,.leader-row:hover{border-color:#2a2930!important}
.profile-tabs{
  border-bottom:1px solid #1a1b20!important;
  gap:22px!important;
}
.profile-tabs button{
  min-height:43px!important;
  padding:0 3px!important;
  background:transparent!important;
  border:0!important;
  border-bottom:2px solid transparent!important;
  color:#6d6a74!important;
  font-size:10px!important;
}
.profile-tabs button:hover{color:#d8d3dc!important;background:transparent!important}
.profile-tabs button.active{color:#eee9f1!important;border-bottom-color:#9a54f5!important;background:transparent!important}
.input{
  background:#090a0c!important;
  border:1px solid #26272d!important;
  border-radius:7px!important;
  box-shadow:none!important;
}
.input:focus{border-color:#633595!important;box-shadow:0 0 0 2px rgba(145,73,245,.07)!important}
.connection-action{min-height:42px!important}
.connection-card{transition:border-color .14s ease,transform .14s ease!important}
.connection-card:hover{transform:translateY(-1px)!important}
.credit-pack{background:#090a0c!important;border-color:#202126!important}
.credit-pack:hover:not(:disabled){background:#0d0e11!important;border-color:#3b244c!important;transform:translateY(-1px)!important}
.settings-toggle{background:#0b0c0f!important;border-color:#26272d!important}
.settings-toggle:hover{border-color:#3b294c!important;background:#0e0f12!important}

/* Create Match stays compact and lets the page behind remain visible. */
.create-backdrop{background:rgba(0,0,0,.31)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.create-wizard{box-shadow:0 25px 70px rgba(0,0,0,.50)!important}

@media(min-width:1450px){
  #page-matches{padding-left:30px!important;padding-right:30px!important}
}
@media(max-width:1320px){
  .matches-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .match-filter-row{gap:5px!important}
  .filter-trigger{min-width:104px!important}
}
@media(max-width:1040px){
  .match-toolbar{align-items:stretch!important;flex-direction:column!important}
  .match-filter-row{justify-content:flex-start!important;margin-left:0!important}
}
@media(max-width:760px){
  .matches-grid{grid-template-columns:1fr!important}
  .match-view-tabs{width:100%!important}
  .match-view-tab{min-width:0!important;flex:1!important}
  .match-filter-row{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  .filter-trigger{width:100%!important}
  .match-card{min-height:320px!important}
}
@media(max-width:460px){
  .match-filter-row{grid-template-columns:1fr!important}
  .reference-match-metrics{grid-template-columns:1fr 1fr!important}
}
/* Earlier identity rule preserved: only Epic display names get a clipboard control. */
.email-connection .identity-copy-btn,
.discord-connection .identity-copy-btn{display:none!important}