:root{
  --bg:#080a10;--bg1:#0d1017;--bg2:#12161f;--bg3:#181d29;--bg4:#1e2436;
  --line:rgba(255,255,255,0.06);--line2:rgba(255,255,255,0.11);
  --text:#f0f2f8;--text2:#8892aa;--text3:#434d66;
  --blue:#2563eb;--blue2:#4589ff;--blue3:#1e4fd8;--blue-dim:rgba(37,99,235,0.1);
  --gold:#e0b35a;--gold-dim:rgba(224,179,90,0.1);
  --red:#f04040;--green:#21c95a;
  --r:8px;--r2:12px;--r3:16px;--nav-h:48px;--ad-w:170px;
  --ease:cubic-bezier(.22,1,.36,1);--ease-back:cubic-bezier(.34,1.56,.64,1);--t:.2s;
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 4px 20px rgba(0,0,0,.45);
  --shadow-lg:0 8px 40px rgba(0,0,0,.55);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;line-height:1.5;font-feature-settings:'cv02','cv03','cv04','cv11';-webkit-font-smoothing:antialiased}
a{color:var(--blue2);text-decoration:none}
button{cursor:pointer;font-family:'Inter',sans-serif;border:none}
input,select,textarea{font-family:'Inter',sans-serif}
img,.nav-brand,.nav-brand *{-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none}

/* ── AD STRIPS ── full-height fixed columns either side ── */
.ad-col{position:fixed;top:0;width:var(--ad-w);height:100vh;background:var(--bg);z-index:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:8px}
.ad-col-left{left:0;border-right:none}
.ad-col-right{right:0;border-left:none}
.ad-label{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);font-family:'Geist Mono',monospace}
.ad-slot{background:var(--bg2);border:1px dashed var(--line2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ad-tall{width:160px;height:600px}
.ad-mid{width:160px;height:250px}

/* ── NAV ── sits in the center column only ── */
.nav{position:fixed;top:0;left:var(--ad-w);right:var(--ad-w);height:var(--nav-h);z-index:900;background:rgba(8,10,16,.96);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 20px;gap:3px}
.nav-brand{font-family:'Syne',sans-serif;font-weight:800;font-size:15px;color:var(--text);margin-right:10px;cursor:pointer;flex-shrink:0;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.nav-brand span{color:var(--blue2)}
.nav-links{display:flex;align-items:center;gap:1px;flex:1}
.nav-a{background:transparent;color:var(--text2);font-size:12px;font-weight:500;padding:5px 9px;border-radius:var(--r);transition:background var(--t) var(--ease),color var(--t) var(--ease);white-space:nowrap;letter-spacing:.1px}
.nav-a:hover{background:var(--bg3);color:var(--text)}
.nav-a.active{color:var(--blue2);background:var(--blue-dim)}
.dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 4px);right:0;left:auto;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r2);min-width:220px;box-shadow:0 8px 28px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--t),transform var(--t),visibility var(--t);z-index:200;overflow:hidden}
.dd:hover .dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dd-item{display:block;width:100%;padding:8px 12px;background:transparent;color:var(--text2);font-size:12px;text-align:left;transition:background var(--t),color var(--t)}
.dd-item:hover{background:var(--bg3);color:var(--text)}
.nav-right{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto}
.credits-chip{display:flex;align-items:center;gap:5px;background:var(--bg3);border:1px solid var(--line2);border-radius:var(--r);padding:3px 8px;cursor:pointer;transition:border-color var(--t)}
.credits-chip:hover{border-color:var(--gold)}
.credits-chip-val{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:12px;color:var(--gold)}
.credits-chip-lbl{font-size:9px;color:var(--text3);letter-spacing:.4px}
.nav-credit-chip{cursor:pointer;gap:4px;padding:3px 7px}
#nav-credits{cursor:pointer}
.icon-btn{background:transparent;width:28px;height:28px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--text2);transition:background var(--t),color var(--t);position:relative}
.icon-btn:hover{background:var(--bg3);color:var(--text)}
.nbadge{position:absolute;top:2px;right:2px;background:var(--red);color:#fff;font-size:8px;font-weight:700;width:13px;height:13px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.btn-nav-auth{font-size:11px;font-weight:600;padding:4px 10px;border-radius:var(--r);transition:all var(--t)}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--line2)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue2)}
.btn-solid{background:var(--blue);color:#fff;border:none}
.btn-solid:hover{background:var(--blue2)}
.btn-find{background:var(--blue);color:#fff;font-size:11px;font-weight:700;padding:4px 11px;border-radius:var(--r);font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:.3px;transition:background var(--t);border:none;flex-shrink:0}
.btn-find:hover{background:var(--blue2)}

/* ── CONTENT AREA ── */
.root{display:block;padding-top:var(--nav-h);margin-left:var(--ad-w);margin-right:var(--ad-w);min-height:100vh}
.content{width:100%}

/* PAGES */
.page{display:none;padding:22px 20px 60px;animation:pgIn .3s var(--ease)}
.page.active{display:block}
@keyframes pgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* TYPE HELPERS */
.h1{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:28px;line-height:1.15;letter-spacing:-.5px}
.h2{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.3px}
.h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;letter-spacing:-.2px}
.mono{font-family:'Geist Mono',monospace}
.muted{color:var(--text2)}
.caption{font-size:11px;color:var(--text3);letter-spacing:.5px;text-transform:uppercase}

/* CARD */
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);transition:border-color var(--t) var(--ease)}
.card-pad{padding:20px}
.card:hover{border-color:var(--line2);}
.card-hover{transition:all var(--t) var(--ease),box-shadow var(--t) var(--ease);cursor:pointer}
.card-hover:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;padding:8px 18px;border-radius:var(--r);transition:all var(--t) var(--ease);border:1px solid transparent;letter-spacing:.1px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue2);box-shadow:0 4px 16px rgba(37,99,235,.35)}
.btn-secondary{background:var(--bg3);color:var(--text);border-color:var(--line2)}
.btn-secondary:hover{border-color:var(--blue);color:var(--blue2)}
.btn-danger{background:transparent;color:var(--red);border-color:rgba(232,64,64,.25)}
.btn-danger:hover{background:rgba(232,64,64,.08)}
.btn-success{background:rgba(34,197,94,.1);color:var(--green);border-color:rgba(34,197,94,.25)}
.btn-sm{font-size:12px;padding:6px 12px}
.btn-lg{font-size:14px;padding:11px 22px}
.btn-full{width:100%}

/* FORMS */
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:5px;letter-spacing:.3px}
.form-input{width:100%;background:var(--bg3);border:1px solid var(--line2);border-radius:var(--r);padding:10px 13px;color:var(--text);font-size:13px;outline:none;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.form-input:focus{border-color:var(--blue2);box-shadow:0 0 0 3px rgba(69,137,255,.14)}
.form-input::placeholder{color:var(--text3)}
.form-input[readonly]{color:var(--text2);cursor:default}
select.form-input{cursor:pointer}
textarea.form-input{resize:vertical;min-height:80px}
.form-error{font-size:11px;color:var(--red);margin-top:4px;display:none}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* RANK BADGES */
.rank{display:inline-flex;align-items:center;gap:4px;font-family:'Geist Mono',monospace;font-size:10px;font-weight:500;padding:2px 8px;border-radius:4px;letter-spacing:.5px;text-transform:uppercase}
.r-copper{background:rgba(180,100,40,.15);color:#c87941;border:1px solid rgba(180,100,40,.25)}
.r-silver{background:rgba(140,150,165,.15);color:#9aa3b8;border:1px solid rgba(140,150,165,.25)}
.r-gold{background:rgba(212,168,83,.15);color:var(--gold);border:1px solid rgba(212,168,83,.25)}
.r-diamond{background:rgba(37,99,235,.15);color:#60a5fa;border:1px solid rgba(37,99,235,.3)}
.r-emerald{background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(34,197,94,.25)}
.r-elite{background:rgba(168,85,247,.15);color:#c084fc;border:1px solid rgba(168,85,247,.25)}
.r-champion{background:rgba(232,64,64,.15);color:#f87171;border:1px solid rgba(232,64,64,.25)}
.r-global{background:linear-gradient(135deg,rgba(37,99,235,.2),rgba(212,168,83,.2));color:var(--gold);border:1px solid rgba(212,168,83,.4)}

/* FLARES */
.flare-wrap{position:relative;display:inline-flex}
.flare-wrap .av-inner{position:relative;z-index:1}
.flare-gold::before,.flare-purple::before,.flare-red::before,.flare-rainbow::before{content:'';position:absolute;inset:-3px;border-radius:50%;z-index:0;animation:flareSpin 3s linear infinite}
.flare-gold::before{background:conic-gradient(var(--gold),#f97316,var(--gold))}
.flare-purple::before{background:conic-gradient(#a855f7,#7c3aed,#a855f7)}
.flare-red::before{background:conic-gradient(#ef4444,#dc2626,#ef4444)}
.flare-rainbow::before{background:conic-gradient(#ef4444,#f97316,#eab308,#22c55e,#3b82f6,#8b5cf6,#ef4444);animation-duration:2s}
@keyframes flareSpin{to{transform:rotate(360deg)}}

/* AVATAR */
.avatar{border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border:1px solid var(--line2)}
.av-sm{width:32px;height:32px;font-size:12px}
.av-md{width:42px;height:42px;font-size:16px}
.av-lg{width:64px;height:64px;font-size:24px}
.av-xl{width:88px;height:88px;font-size:32px}
.av-txt{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;background:var(--bg4);color:var(--text2)}

/* MODAL */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);z-index:1000;display:none;align-items:center;justify-content:center}
.overlay.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r2);width:92%;max-width:800px;max-height:90vh;position:relative;display:flex;flex-direction:column;overflow:hidden;animation:modalIn .22s var(--ease)}
.modal-sm{max-width:440px}
.modal-md{max-width:560px}
@keyframes modalIn{from{transform:scale(.97) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.modal-hd{padding:20px 20px 16px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-shrink:0}
.modal-close-btn{background:rgba(26,31,46,0.9);backdrop-filter:blur(4px);border:1px solid var(--line2);color:var(--text2);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;transition:all var(--t) var(--ease);position:absolute;top:12px;right:12px;z-index:100;flex-shrink:0;cursor:pointer}
.modal-close-btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.modal-scroll{overflow-y:auto;flex:1}
.modal-body{padding:20px;overflow-y:auto;flex:1}

/* TABS */
.tabs{display:flex;gap:2px;background:var(--bg3);border-radius:var(--r);padding:3px;width:fit-content;margin-bottom:20px}
.tab{background:transparent;color:var(--text2);font-size:12px;font-weight:600;padding:6px 14px;border-radius:5px;transition:all var(--t) var(--ease)}
.tab.on{background:var(--bg2);color:var(--text);box-shadow:0 1px 6px rgba(0,0,0,.4);font-weight:700}
.tab:hover:not(.on){color:var(--text)}

/* TABLE */
.tbl{width:100%;border-collapse:collapse}
.tbl th{padding:10px 16px;text-align:left;font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
.tbl tbody tr{transition:background var(--t) var(--ease)}
.tbl tbody tr:hover td{background:var(--bg3)}
.tbl tbody tr:last-child td{border-bottom:none}

/* STATS */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);padding:16px 18px}
.stat-lbl{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);margin-bottom:6px}
.stat-val{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:26px;color:var(--text)}
.stat-sub{font-size:11px;color:var(--text2);margin-top:3px}
.xp-track{background:var(--bg3);border-radius:3px;height:4px;overflow:hidden;margin-top:5px}
.xp-fill{height:100%;border-radius:3px;background:var(--blue);transition:width .6s var(--ease)}

/* SECTION HEADER */
.sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sec-action{font-size:12px;color:var(--blue2);cursor:pointer;font-weight:500}
.sec-action:hover{color:var(--text)}

/* PROFILE */
.profile-banner{height:160px;border-radius:var(--r2) var(--r2) 0 0;background:var(--bg3);overflow:hidden;position:relative}
.profile-header-card{background:var(--bg2);border:1px solid var(--line);border-radius:0 0 var(--r2) var(--r2);padding:0 24px 24px;margin-bottom:18px}
.profile-av-wrap{margin-top:-44px;margin-bottom:12px}
.profile-meta-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.profile-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.3px}
.profile-tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.profile-bio{font-size:13px;color:var(--text2);line-height:1.6;margin-top:10px;max-width:560px}
.profile-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.profile-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.profile-row:last-child{border:none}
.profile-row-lbl{color:var(--text2)}
.profile-row-val{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;color:var(--text)}

/* MATCH CARDS */
.match-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.match-type-card{background:var(--bg2);border:2px solid var(--line);border-radius:var(--r2);padding:20px;cursor:pointer;transition:all var(--t) var(--ease);position:relative;overflow:hidden}
.match-type-card.can:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 4px 20px rgba(37,99,235,.2)}
.match-type-card.sel{border-color:var(--blue);background:var(--blue-dim)}
.match-type-card.lock{opacity:.4;cursor:not-allowed;pointer-events:none}
.mtc-icon{font-size:26px;margin-bottom:10px}
.mtc-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;margin-bottom:4px}
.mtc-desc{font-size:11px;color:var(--text2);line-height:1.5}
.lock-tag{position:absolute;top:10px;right:10px;background:var(--bg3);border:1px solid var(--line2);border-radius:4px;padding:2px 7px;font-size:10px;color:var(--text3);font-family:'Geist Mono',monospace}

/* PLAYERCARD */
.playercard{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;display:flex;align-items:center;gap:10px;margin-bottom:5px}
.pc-info{flex:1;min-width:0}
.pc-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-sub{font-size:10px;color:var(--text3);margin-bottom:3px}
.pc-meta{display:flex;gap:5px;align-items:center}

/* LOBBY */
.lobby-layout{display:grid;grid-template-columns:1fr 200px 1fr;gap:14px;align-items:start;margin-bottom:16px}
.lobby-center-panel{display:flex;flex-direction:column;gap:10px;padding-top:22px}
.map-box{background:var(--bg3);border:1px solid var(--line2);border-radius:var(--r);padding:12px;text-align:center}
.map-name-big{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:18px;color:var(--blue2);margin-top:4px}
.code-box{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);padding:8px;text-align:center;font-family:'Geist Mono',monospace;font-weight:700;font-size:16px;color:var(--gold);letter-spacing:2px}
.veto-row{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.veto-map{background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);padding:6px 10px;font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;transition:all var(--t) var(--ease)}
.veto-map:hover{border-color:var(--blue);color:var(--text)}
.veto-map.banned{opacity:.35;background:rgba(232,64,64,.08);border-color:var(--red);text-decoration:line-through;cursor:not-allowed}
.veto-map.picked{background:var(--blue-dim);border-color:var(--blue);color:var(--blue2)}

/* SEARCH ANIM */
.searching{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px 20px;text-align:center}
.spin{width:56px;height:56px;border:2px solid var(--bg3);border-top:2px solid var(--blue);border-radius:50%;animation:spn .9s linear infinite}
@keyframes spn{to{transform:rotate(360deg)}}
.player-dots{display:flex;gap:7px;justify-content:center}
.player-dot{width:10px;height:10px;border-radius:50%;background:var(--bg4);border:1px solid var(--line2);transition:all .2s}
.player-dot.on{background:var(--blue);border-color:var(--blue);box-shadow:0 0 6px rgba(37,99,235,.5)}
.player-dot.real{background:var(--green);border-color:var(--green);box-shadow:0 0 6px rgba(34,197,94,.5)}

/* VOTE */
.vote-options{display:flex;gap:12px;justify-content:center;margin:16px 0}
.vote-btn{background:var(--bg3);border:2px solid var(--line2);border-radius:var(--r2);padding:14px 28px;font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;cursor:pointer;transition:all var(--t) var(--ease);text-align:center}
.vote-btn:hover{transform:scale(1.03)}
.vote-btn.ta:hover{border-color:var(--blue)}
.vote-btn.tb:hover{border-color:var(--red)}
.vote-btn.voted{border-color:var(--blue)}

/* NOTIFICATIONS */
.notif-panel{position:fixed;top:calc(var(--nav-h) + 6px);right:calc(var(--ad-w) + 8px);width:320px;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r2);box-shadow:0 8px 32px rgba(0,0,0,.5);z-index:850;display:none;overflow:hidden;animation:pgIn .18s var(--ease)}
.notif-panel.open{display:block}
.notif-hd{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.notif-list{max-height:360px;overflow-y:auto}
.notif-item{padding:10px 16px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:flex-start;cursor:pointer;transition:background var(--t) var(--ease)}
.notif-item:hover{background:var(--bg3)}
.notif-item.unread{background:rgba(37,99,235,.04)}
.notif-item:last-child{border:none}
.notif-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:5px}
.notif-dot.read{background:transparent}
.notif-body{flex:1;font-size:12px;line-height:1.5}
.notif-time{font-size:10px;color:var(--text3);margin-top:2px}

/* MESSAGES */
.msg-panel{position:fixed;bottom:0;right:calc(var(--ad-w) + 8px);width:320px;height:440px;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r2) var(--r2) 0 0;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:850;display:none;flex-direction:column;animation:pgIn .2s var(--ease)}
.msg-panel.open{display:flex}
.msg-hd{padding:11px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.msg-body{flex:1;display:flex;overflow:hidden}
.contact-list{width:110px;border-right:1px solid var(--line);overflow-y:auto;flex-shrink:0}
.contact-item{padding:9px 10px;cursor:pointer;transition:background var(--t) var(--ease);border-bottom:1px solid var(--line)}
.contact-item:hover,.contact-item.on{background:var(--bg3)}
.contact-name{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-last{font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.chat-pane{flex:1;display:flex;flex-direction:column;overflow:hidden}
.chat-msgs{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px}
.bubble{max-width:80%;padding:7px 10px;border-radius:10px;font-size:12px;line-height:1.4;word-break:break-word}
.bubble.mine{background:var(--blue);color:#fff;align-self:flex-end;border-radius:10px 10px 2px 10px}
.bubble.theirs{background:var(--bg4);color:var(--text);align-self:flex-start;border-radius:10px 10px 10px 2px}
.chat-foot{padding:8px;border-top:1px solid var(--line);display:flex;gap:6px;flex-shrink:0}
.chat-inp{flex:1;background:var(--bg3);border:1px solid var(--line2);border-radius:20px;padding:6px 11px;color:var(--text);font-size:12px;outline:none}
.chat-inp:focus{border-color:var(--blue)}
.chat-send{background:var(--blue);color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:all var(--t) var(--ease)}
.chat-send:hover{background:var(--blue2)}
.char-ctr{font-size:9px;color:var(--text3);padding:0 8px 3px;text-align:right;flex-shrink:0}

/* STORE */
.store-grid{margin-bottom:28px}
.store-balance-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.store-bal-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);padding:16px;text-align:center}
.store-bal-icon{font-size:18px;margin-bottom:5px}
.store-bal-label{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin-bottom:3px}
.store-bal-val{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:24px;line-height:1;margin-bottom:4px}
.store-bal-sub{font-size:11px;color:var(--text3)}
.store-promo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);padding:10px 14px;margin-bottom:20px}
.store-cw-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px}
.store-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);padding:10px 8px;text-align:center;transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.store-card:hover{border-color:var(--line2);transform:translateY(-1px)}
.store-card.featured{border-color:rgba(212,168,83,.35)}
.best-tag{display:inline-block;background:var(--gold);color:#000;font-size:8px;font-weight:800;padding:1px 5px;border-radius:3px;font-family:'Geist Mono',monospace;letter-spacing:.5px;margin-bottom:4px}
.store-credits-num{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:22px;color:var(--gold);line-height:1;margin:4px 0 2px}
.store-price{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13px;margin-bottom:8px;color:var(--text)}
.btn-buy{background:var(--blue);color:#fff;border:none;width:100%;padding:5px;border-radius:var(--r);font-family:'Inter',sans-serif;font-weight:600;font-size:11px;cursor:pointer;transition:background var(--t)}
.btn-buy:hover{background:var(--blue3)}
.store-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}

/* INFO BOXES */
.info-box{border-radius:var(--r);padding:10px 14px;font-size:12px;line-height:1.6;display:flex;gap:8px;align-items:flex-start;margin-bottom:10px}
.info-warn{background:rgba(212,168,83,.08);border:1px solid rgba(212,168,83,.2);color:var(--gold)}
.info-info{background:var(--blue-dim);border:1px solid rgba(37,99,235,.2);color:var(--blue2)}
.info-error{background:rgba(232,64,64,.08);border:1px solid rgba(232,64,64,.2);color:var(--red)}
.info-success{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);color:var(--green)}

/* GATE */
.gate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:80px 20px;text-align:center}
.gate-icon{font-size:40px;margin-bottom:4px;opacity:.4}

/* 2FA QR */
.qr-container{display:flex;justify-content:center;margin:16px 0}
.qr-container canvas,.qr-container img{border-radius:var(--r);border:3px solid #fff}
.totp-secret-box{background:var(--bg3);border:1px solid var(--line2);border-radius:var(--r);padding:12px;text-align:center;margin:12px 0;word-break:break-all}
.totp-steps{counter-reset:step;list-style:none;padding:0;margin:12px 0}
.totp-steps li{counter-increment:step;padding:6px 0 6px 28px;font-size:12px;color:var(--text2);position:relative}
.totp-steps li::before{content:counter(step);position:absolute;left:0;top:6px;width:18px;height:18px;background:var(--blue-dim);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--blue2)}

/* LOGIN 2FA step */
.li-step{display:none}
.li-step.active{display:block}

/* TOAST */
.toast-wrap{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:7px;pointer-events:none;align-items:center}
.toast{background:var(--bg3);border:1px solid var(--line2);border-radius:var(--r2);padding:10px 16px;font-size:13px;pointer-events:all;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:8px;min-width:240px;max-width:380px;animation:tIn .3s var(--ease-back);font-weight:500}
.toast.s{border-color:rgba(34,197,94,.3);color:var(--green)}
.toast.e{border-color:rgba(232,64,64,.3);color:var(--red)}
.toast.i{border-color:rgba(37,99,235,.3);color:var(--blue2)}
@keyframes tIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes tOut{to{opacity:0;transform:translateY(6px)}}

/* EMPTY */
.empty{text-align:center;padding:48px 20px;color:var(--text3)}
.empty-icon{font-size:36px;margin-bottom:10px;opacity:.3}

/* QUEUE STATUS */
.queue-status{background:var(--bg3);border:1px solid var(--line2);border-radius:var(--r);padding:10px 14px;font-size:12px;display:flex;align-items:center;gap:8px;margin-top:8px}
.queue-live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;animation:pulse 1.5s ease infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
/* ADMIN PANEL */
.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.admin-field{display:flex;flex-direction:column;gap:5px}
.admin-field label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.admin-select{width:100%;background:var(--bg3);border:1px solid var(--line2);border-radius:var(--r);padding:8px 10px;color:var(--text);font-size:13px;outline:none}
.admin-select:focus{border-color:var(--blue)}

/* SCROLLBAR */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* RESPONSIVE */
/* ═══════════════════════════════════════════
   RESPONSIVE — tablet + mobile
═══════════════════════════════════════════ */

/* Tablet: shrink ad columns */
@media(max-width:1100px){:root{--ad-w:140px}}

/* ── Tablet / small desktop (≤860px) ─────── */
@media(max-width:860px){
  :root{--ad-w:0px;--nav-h:44px}
  .ad-col{display:none}
  .root{margin-left:0;margin-right:0}
  .nav{left:0;right:0;padding:0 10px}
  .store-balance-row{grid-template-columns:1fr 1fr}
  .store-cw-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .match-grid{grid-template-columns:1fr 1fr}
  .lobby-layout{grid-template-columns:1fr;gap:10px}
  .profile-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .admin-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── Mobile (≤560px) — full reflow ─────────── */
@media(max-width:560px){
  :root{--nav-h:50px}

  /* Nav: brand + icons only, links hidden — bottom tab bar handles nav */
  .nav{padding:0 10px;gap:6px}
  .nav-links{display:none}           /* hidden — use bottom tab bar */
  .nav-brand{font-size:16px;margin-right:0}
  .btn-find{display:none !important} /* bottom bar handles this */
  #nav-credits{gap:3px}
  .nav-credit-chip{padding:2px 5px}
  .credits-chip-val{font-size:11px}
  .credits-chip-lbl{display:none}    /* too cramped on mobile */

  /* Pages */
  .page{padding:12px 10px 80px}     /* bottom padding for tab bar */

  /* Cards */
  .card-pad{padding:14px}

  /* Grids → single column */
  .match-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .store-balance-row{grid-template-columns:1fr 1fr}
  .store-cw-grid{grid-template-columns:1fr}
  .admin-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .lobby-layout{grid-template-columns:1fr}
  .profile-grid{grid-template-columns:1fr}
  .store-cards-grid{grid-template-columns:1fr 1fr}

  /* Tables: allow horizontal scroll */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl{min-width:500px}
  .tbl th,.tbl td{padding:8px 10px;font-size:11px}

  /* Modals: full-screen bottom sheet on mobile */
  .overlay{align-items:flex-end}
  .modal{width:100%;max-width:100%;border-radius:var(--r2) var(--r2) 0 0;max-height:92vh;margin:0}
  .modal-sm,.modal-md{max-width:100%}

  /* Profile banner shorter */
  .profile-banner{height:100px}
  .profile-av-wrap{margin-top:-32px}
  .av-xl{width:64px;height:64px;font-size:22px}
  .profile-name{font-size:18px}

  /* Lobby */
  .lobby-center-panel{padding-top:0}
  .map-name-big{font-size:16px}
  .veto-row{gap:5px}
  .veto-map{font-size:10px;padding:5px 8px}

  /* Searching */
  .player-dots{gap:5px}
  .player-dot{width:8px;height:8px}

  /* Vote buttons */
  .vote-options{flex-direction:column;gap:8px}
  .vote-btn{padding:12px 20px;font-size:15px}

  /* Forum */
  .forum-tabs{gap:5px}
  .forum-tab{padding:8px 12px;font-size:12px}
  .forum-header{flex-direction:column;gap:8px;align-items:flex-start}

  /* Store */
  .store-promo-row{flex-direction:column;align-items:flex-start;gap:8px}
  .store-promo-row input{width:100%}

  /* Home hero */
  .h1{font-size:26px}
  .h2{font-size:17px}

  /* Toasts — full width */
  .toast-wrap{left:10px;right:10px;transform:none;width:auto}
  .toast{min-width:0;width:100%}

  /* Message panel — full width */
  .msg-panel{right:0;left:0;width:100%;border-radius:var(--r2) var(--r2) 0 0}

  /* Notification panel */
  .notif-panel{left:8px;right:8px;width:auto}
}

/* ── Bottom tab bar ── mobile only ─────────── */
.mobile-tabbar{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  height:56px;
  background:rgba(11,13,18,.97);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  z-index:950;
  align-items:stretch;
}
.mobile-tab{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  background:transparent;
  border:none;
  color:var(--text3);
  font-size:9px;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
  cursor:pointer;
  transition:color var(--t),background var(--t);
  padding:6px 0;
  position:relative;
}
.mobile-tab svg{flex-shrink:0}
.mobile-tab:hover,.mobile-tab.active{color:var(--blue2)}
.mobile-tab.active::after{
  content:'';
  position:absolute;
  top:0;left:20%;right:20%;
  height:2px;
  background:var(--blue2);
  border-radius:0 0 2px 2px;
}
.mobile-tab-find{color:var(--blue);font-weight:700}
.mobile-tab-find.active,.mobile-tab-find:hover{color:var(--blue2)}

@media(max-width:560px){
  .mobile-tabbar{display:flex}
}

/* Loading screen animation */
@keyframes ldot{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}

/* ── FORUMS ─────────────────────────────────────────────────────────── */
.forum-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.forum-tab{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r2);background:var(--bg2);border:1px solid var(--line);cursor:pointer;transition:all var(--t) var(--ease);color:var(--text2);font-size:13px;font-weight:500;position:relative}
.forum-tab:hover{background:var(--bg3);color:var(--text);border-color:var(--line2)}
.forum-tab.active{background:var(--blue-dim);border-color:var(--blue2);color:var(--blue2)}
.forum-tab-sub{font-size:11px;color:var(--text3);font-weight:400}
.forum-tab.active .forum-tab-sub{color:var(--blue2);opacity:.7}
.forum-tab-count{background:var(--bg4);border-radius:20px;padding:1px 7px;font-size:11px;color:var(--text3);min-width:22px;text-align:center}
.forum-tab.active .forum-tab-count{background:var(--blue-dim);color:var(--blue2)}

.forum-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}

.forum-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);margin-bottom:12px;transition:border-color var(--t) var(--ease)}
.forum-card:hover{border-color:var(--line2)}
.forum-card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 0}
.forum-card-author{display:flex;align-items:center;gap:10px}
.forum-card-body{padding:12px 16px}
.forum-card-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.3}
.forum-card-sub{font-size:12px;color:var(--blue2);margin-bottom:8px;font-style:italic}
.forum-card-content{font-size:13px;color:var(--text2);line-height:1.65;white-space:pre-wrap;word-break:break-word}
.forum-group-link{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:4px 12px;border-radius:20px;background:var(--bg3);border:1px solid var(--line2);font-size:12px;color:var(--blue2);text-decoration:none;transition:all var(--t)}
.forum-group-link:hover{background:var(--blue-dim);border-color:var(--blue2)}
.forum-card-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--line)}
.forum-expand-btn{background:transparent;border:none;font-size:12px;color:var(--text3);cursor:pointer;padding:2px 6px;border-radius:var(--r);transition:color var(--t)}
.forum-expand-btn:hover{color:var(--blue2)}

.forum-comments{padding:14px 16px;border-top:1px solid var(--line);background:var(--bg1);border-radius:0 0 var(--r2) var(--r2)}
.forum-comment{padding:10px 0;border-bottom:1px solid var(--line)}
.forum-comment:last-of-type{border-bottom:none}
.forum-comment-meta{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.forum-comment-author{font-size:12px;font-weight:600;color:var(--text)}
.forum-comment-text{font-size:13px;color:var(--text2);line-height:1.55;white-space:pre-wrap;word-break:break-word}
.forum-comment-input{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

.av-xs{width:22px;height:22px;font-size:9px;border-radius:4px}

/* ── STORE TABS ─────────────────────────────────────────────────────── */
.store-tab-btn{padding:8px 16px;border-radius:var(--r);border:1px solid var(--line2);background:var(--bg2);color:var(--text2);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--t) var(--ease)}
.store-tab-btn:hover{background:var(--bg3);color:var(--text)}
.store-tab-btn.active{background:var(--blue-dim);border-color:var(--blue2);color:var(--blue2)}
.store-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS & TRANSITIONS — smooth motion layer
   ═══════════════════════════════════════════════════════════════ */

/* ── Timing tokens ───────────────────────────────────────────── */
:root {
  --spring: cubic-bezier(.34,1.56,.64,1);  /* bouncy */
  --smooth: cubic-bezier(.4,0,.2,1);       /* material */
  --out:    cubic-bezier(0,0,.2,1);        /* decelerate */
  --in:     cubic-bezier(.4,0,1,1);        /* accelerate */
  --t-fast: .12s;
  --t-mid:  .22s;
  --t-slow: .38s;
}

/* ── Page transitions ────────────────────────────────────────── */
.page { animation: pgIn var(--t-mid) var(--smooth) both; }
@keyframes pgIn {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Staggered children entrance on page load */
.page.active > * { animation: fadeUp var(--t-slow) var(--out) both; }
.page.active > *:nth-child(1) { animation-delay:.04s }
.page.active > *:nth-child(2) { animation-delay:.09s }
.page.active > *:nth-child(3) { animation-delay:.14s }
.page.active > *:nth-child(4) { animation-delay:.18s }
.page.active > *:nth-child(5) { animation-delay:.22s }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Modal ───────────────────────────────────────────────────── */
.overlay { transition: opacity var(--t-mid) var(--smooth); }
.overlay:not(.open) { pointer-events:none; }
@keyframes modalIn {
  from { transform:scale(.94) translateY(12px); opacity:0; }
  to   { transform:scale(1)   translateY(0);    opacity:1; }
}
.modal { animation: modalIn var(--t-mid) var(--spring) both; }
.modal-close-btn {
  transition: background var(--t-fast), color var(--t-fast),
              transform var(--t-fast) var(--spring);
}
.modal-close-btn:hover { transform: rotate(90deg) scale(1.1); }

/* ── Nav ─────────────────────────────────────────────────────── */
.nav-a        { transition: background var(--t-fast), color var(--t-fast); }
.credits-chip { transition: border-color var(--t-fast), transform var(--t-mid) var(--spring), box-shadow var(--t-mid); }
.credits-chip:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(212,168,83,.2); }
.icon-btn     { transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease); }
.icon-btn:hover { transform:scale(1.06); }
.btn-find     { transition: background var(--t-fast), transform var(--t-mid) var(--spring), box-shadow var(--t-mid); }
.btn-find:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(37,99,235,.35); }

/* Dropdown */
.dd-menu {
  transition: opacity var(--t-mid) var(--smooth),
              transform var(--t-mid) var(--smooth),
              visibility var(--t-mid);
}
.dd-item { transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-mid) var(--smooth); }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  transition: border-color var(--t-fast), box-shadow var(--t-mid) var(--smooth);
}
.card:hover { box-shadow: 0 2px 16px rgba(0,0,0,.25); }
.card-hover {
  transition: border-color var(--t-fast), transform var(--t-mid) var(--spring),
              box-shadow var(--t-mid) var(--smooth);
}
.card-hover:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.3); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-mid) var(--spring),
              box-shadow var(--t-mid);
}
.btn:active { transform:scale(.97) !important; }
.btn-primary:hover  { transform:translateY(-1px); box-shadow:0 4px 14px rgba(37,99,235,.35); }
.btn-secondary:hover{ transform:translateY(-1px); }
.btn-danger:hover   { transform:translateY(-1px); }
.btn-buy {
  transition: background var(--t-fast), transform var(--t-mid) var(--spring),
              box-shadow var(--t-mid);
}
.btn-buy:hover  { transform:translateY(-2px); box-shadow:0 4px 14px rgba(37,99,235,.3); }
.btn-buy:active { transform:scale(.97); }

/* ── Forms ───────────────────────────────────────────────────── */
.form-input {
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* ── Match type cards ────────────────────────────────────────── */
.match-type-card {
  transition: border-color var(--t-fast), transform var(--t-mid) var(--spring),
              box-shadow var(--t-mid), background var(--t-fast);
}
.match-type-card.can:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(37,99,235,.2);
}
.match-type-card.can:active { transform:translateY(-1px); }

/* ── Store cards ─────────────────────────────────────────────── */
.store-card {
  transition: border-color var(--t-fast), transform var(--t-mid) var(--spring),
              box-shadow var(--t-mid);
}
.store-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.store-card:active { transform:translateY(-1px); }

.store-bal-card {
  transition: border-color var(--t-fast), transform var(--t-mid) var(--spring);
}
.store-bal-card:hover { border-color:var(--line2); transform:translateY(-1px); }

/* ── Forum cards ─────────────────────────────────────────────── */
.forum-card {
  transition: border-color var(--t-fast), transform var(--t-mid) var(--smooth),
              box-shadow var(--t-mid);
}
.forum-card:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,.2); }
.forum-tab {
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-mid) var(--spring);
}
.forum-tab:hover { transform:translateY(-1px); }
.forum-expand-btn { transition: color var(--t-fast), transform var(--t-mid) var(--spring); }
.forum-expand-btn:hover { transform:scale(1.1); }
.forum-group-link {
  transition: background var(--t-fast), border-color var(--t-fast),
              transform var(--t-mid) var(--spring);
}
.forum-group-link:hover { transform:translateY(-1px); }

/* ── Lobby veto maps ─────────────────────────────────────────── */
.veto-map {
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-mid) var(--spring),
              opacity var(--t-mid);
}
.veto-map:not(.banned):hover { transform:translateY(-1px); }
.veto-map.banned { transition: all var(--t-mid) var(--smooth); }

/* ── Vote buttons ────────────────────────────────────────────── */
.vote-btn {
  transition: border-color var(--t-fast), transform var(--t-mid) var(--spring),
              box-shadow var(--t-mid), background var(--t-fast);
}
.vote-btn:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.vote-btn:active { transform:scale(.97); }
.vote-btn.voted {
  animation: votePulse .4s var(--spring);
}
@keyframes votePulse {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.07); }
  100% { transform:scale(1); }
}

/* ── Player dots ─────────────────────────────────────────────── */
.player-dot {
  transition: background .3s var(--spring), border-color .3s var(--spring),
              box-shadow .3s, transform .3s var(--spring);
}
.player-dot.real {
  animation: dotPop .4s var(--spring);
}
@keyframes dotPop {
  0%   { transform:scale(0); opacity:0; }
  60%  { transform:scale(1.3); }
  100% { transform:scale(1); opacity:1; }
}

/* Spinning search indicator */
.spin { animation: spn .8s linear infinite; }
@keyframes spn { to { transform:rotate(360deg); } }

/* ── Toasts ──────────────────────────────────────────────────── */
@keyframes tIn {
  from { opacity:0; transform:translateY(12px) scale(.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes tOut {
  to { opacity:0; transform:translateY(8px) scale(.95); }
}
.toast { animation: tIn .22s var(--spring) both; }

/* ── Notifications panel ─────────────────────────────────────── */
.notif-panel {
  transform-origin: top right;
  animation: popIn var(--t-mid) var(--spring) both;
}
@keyframes popIn {
  from { opacity:0; transform:scale(.95) translateY(-8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.notif-item { transition: background var(--t-fast); }

/* ── Message panel ───────────────────────────────────────────── */
.msg-panel {
  animation: slideUp var(--t-mid) var(--spring) both;
}
@keyframes slideUp {
  from { transform:translateY(100%); opacity:0; }
  to   { transform:translateY(0); opacity:1; }
}
.contact-item  { transition: background var(--t-fast); }
.chat-send     { transition: background var(--t-fast), transform var(--t-mid) var(--spring); }
.chat-send:hover { transform:scale(1.1); }

/* ── Table rows ──────────────────────────────────────────────── */
.tbl tbody tr { transition: background var(--t-fast); }

/* ── XP bar ──────────────────────────────────────────────────── */
.xp-fill { transition: width .7s var(--out); }

/* ── Rank badges ─────────────────────────────────────────────── */
.rank {
  transition: transform var(--t-mid) var(--spring), box-shadow var(--t-mid);
}
.rank:hover { transform:scale(1.05); }

/* ── Queue live dot ──────────────────────────────────────────── */
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.4; transform:scale(.75); }
}

/* ── Flare spin ──────────────────────────────────────────────── */
@keyframes flareSpin { to { transform:rotate(360deg); } }

/* ── Loading dots ────────────────────────────────────────────── */
@keyframes ldot {
  0%,100% { opacity:.2; transform:scale(.7); }
  50%     { opacity:1;  transform:scale(1); }
}

/* ── Credits chip count change ───────────────────────────────── */
@keyframes countPop {
  0%   { transform:scale(1); }
  35%  { transform:scale(1.25); color:var(--green); }
  100% { transform:scale(1); }
}
.credits-chip-val.pop { animation: countPop .4s var(--spring); }

/* ── Smooth focus ring on everything interactive ─────────────── */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--blue2);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) { outline:none; }

/* ── Reduced motion: respect user preference ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Match info tabs ────────────────────────────────────────────────── */
.match-info-tabs{display:flex;gap:4px;margin-top:14px;margin-bottom:8px;background:var(--bg3);border-radius:var(--r);padding:3px;width:fit-content}
.match-info-tab{background:transparent;color:var(--text2);font-size:12px;font-weight:600;padding:5px 13px;border-radius:5px;border:none;cursor:pointer;transition:all var(--t-fast) var(--smooth)}
.match-info-tab.on{background:var(--bg2);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.match-info-tab:hover:not(.on){color:var(--text)}
.match-info-panel{margin-top:0}

/* ── Message bubble times ───────────────────────────────────── */
.bubble{display:flex;flex-direction:column;gap:2px}
.bubble-time{font-size:9px;opacity:.55;align-self:flex-end;letter-spacing:.2px}

/* ── Groups ─────────────────────────────────────────────────── */
#group-chat-body{scrollbar-width:thin;scrollbar-color:var(--bg4) transparent}

/* ── Support Chat ── */
.sup-msg { padding:9px 12px; border-radius:12px; font-size:12px; line-height:1.5; max-width:85%; word-break:break-word; }
.sup-msg-bot { background:var(--bg3); color:var(--text); border-radius:4px 12px 12px 12px; align-self:flex-start; }
.sup-msg-user { background:var(--blue); color:#fff; border-radius:12px 4px 12px 12px; align-self:flex-end; text-align:right; }
.sup-msg-typing { background:var(--bg3); padding:10px 14px; border-radius:4px 12px 12px 12px; align-self:flex-start; }
.sup-chip { font-size:11px; padding:4px 10px; border-radius:20px; border:1px solid var(--line2); background:var(--bg3); color:var(--text2); cursor:pointer; transition:background var(--t); white-space:nowrap; }
.sup-chip:hover { background:var(--bg4); color:var(--text); }

@keyframes blink { 0%,100%{opacity:.2} 50%{opacity:1} }


/* ── Global Search ── */
.gs-tab { padding:8px 14px; font-size:12px; font-weight:600; background:none; border:none; border-bottom:2px solid transparent; color:var(--text3); cursor:pointer; transition:color var(--t),border-color var(--t); }
.gs-tab:hover { color:var(--text); }
.gs-tab.active { color:var(--blue2); border-bottom-color:var(--blue2); }
.gs-result { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); cursor:pointer; transition:background var(--t); }
.gs-result:hover { background:var(--bg3); border-radius:var(--r); padding-left:6px; padding-right:6px; margin:0 -6px; }
.gs-result:last-child { border:none; }
.gs-section-label { font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text3); margin:12px 0 6px; }

/* ── Status Dots ── */
.status-dot { display:inline-block; width:10px; height:10px; border-radius:50%; border:2px solid var(--bg2); flex-shrink:0; }
.status-online   { background:var(--green); }
.status-offline  { background:var(--bg4); }
.status-dnd      { background:var(--red); }
.status-inactive { background:#f59e0b; }

/* Avatar with status overlay */
.av-with-status { position:relative; display:inline-flex; }
.av-with-status .status-dot { position:absolute; bottom:0; right:0; width:11px; height:11px; border:2px solid var(--bg2); }

/* ── POLISH PASS ── */

/* Subtle noise texture on body for depth */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  opacity:.4;
}
/* Don't override existing z-index values — noise sits below everything */

/* Crisper type hierarchy */
.h1{font-size:30px;line-height:1.1;letter-spacing:-.6px}
.h2{font-size:21px;line-height:1.2;letter-spacing:-.35px}
.h3{font-size:15px;line-height:1.3;letter-spacing:-.2px}
body{font-size:13.5px}

/* Section headers more breathing room */
.sec-hd{margin-bottom:18px;gap:12px}

/* Better card padding */
.card-pad{padding:22px}

/* Smoother profile banner */
.profile-banner{height:180px;border-radius:var(--r2) var(--r2) 0 0}
.profile-header-card{border-radius:0 0 var(--r2) var(--r2);padding:0 26px 26px}

/* Avatar border thickness */
.avatar{border-width:1.5px}

/* Better rank badge legibility */
.rank{font-size:9.5px;padding:2px 9px;border-radius:5px;letter-spacing:.6px}

/* Notification dot cleaner */
.notif-dot{width:6px;height:6px;margin-top:6px}
.notif-item.unread{background:rgba(69,137,255,.05);border-left:2px solid var(--blue2)}
.notif-item{padding:11px 14px;border-left:2px solid transparent}

/* Better tab hover */
.tab{padding:6px 16px;border-radius:6px;font-size:12px}
.tab:hover:not(.on){color:var(--text);background:rgba(255,255,255,.04)}

/* Smoother match cards */
.match-type-card{border-radius:var(--r2);padding:22px}

/* Cleaner form labels */
.form-label{font-size:11.5px;font-weight:600;letter-spacing:.2px;margin-bottom:6px}

/* Veto maps rounder */
.veto-map{border-radius:var(--r);padding:6px 12px;font-size:11px}

/* Better stat cards */
.stat-card{border-radius:var(--r2);padding:18px 20px}
.stat-val{font-size:28px;line-height:1.1}
.stat-lbl{font-size:10px;letter-spacing:.9px;margin-bottom:4px}

/* Better player card */
.playercard{border-radius:var(--r);padding:10px 14px}

/* Search panel */
.gs-result{transition:background var(--t) var(--ease);border-radius:var(--r)}

/* Subtle glow on focused modals */
.modal{box-shadow:0 0 0 1px var(--line),var(--shadow-lg)}

/* Hide ad labels and placeholder boxes */
.ad-label{display:none!important}
.ad-tall,.ad-mid,.ad-slot{display:none!important}