/* OPERATOR main menu overlay (sits over the Unity lobby) */ #menu-overlay{ position:fixed; inset:0; z-index:40; display:none; font-family:'Rajdhani',system-ui,sans-serif; color:#e8eaed; opacity:1; transition:opacity .5s ease; } #menu-overlay.show{ display:block; } #menu-overlay.hide{ opacity:0; pointer-events:none; } #menu-overlay .m-bg{ position:absolute; inset:0; z-index:0; background:url('menu-bg.png') center center/cover no-repeat; background-color:#0a0b0d; } #menu-overlay .m-scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(8,9,11,.92) 0%, rgba(8,9,11,.55) 34%, rgba(8,9,11,.10) 60%, rgba(8,9,11,.55) 100%), linear-gradient(180deg, rgba(8,9,11,.30) 0%, rgba(8,9,11,0) 30%, rgba(8,9,11,.55) 100%); } /* ---------- top bar ---------- */ #menu-overlay .topbar{ position:absolute; top:0; left:0; right:0; height:54px; z-index:3; display:flex; align-items:stretch; justify-content:space-between; background:rgba(7,8,10,.92); border-bottom:1px solid rgba(255,255,255,.06); } #menu-overlay .tabs{ display:flex; align-items:stretch; } #menu-overlay .tab{ display:flex; align-items:center; padding:0 26px; cursor:pointer; font-weight:700; font-size:14px; letter-spacing:2px; color:#9097a0; border-bottom:2px solid transparent; } #menu-overlay .tab:hover{ color:#cfd3d8; } #menu-overlay .tab.active{ color:#f0a83c; border-bottom-color:#f0a83c; background:rgba(240,168,60,.06); } #menu-overlay .top-right{ display:flex; align-items:center; gap:10px; padding:0 14px; } #menu-overlay .rank{ display:flex; align-items:center; gap:9px; height:34px; padding:0 12px 0 5px; background:rgba(255,255,255,.04); border:1px solid rgba(240,168,60,.25); border-radius:4px; } #menu-overlay .rank-lvl{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#1c1304; background:linear-gradient(180deg,#f4b34c,#e08f25); border-radius:3px; } #menu-overlay .rank-meta{ display:flex; flex-direction:column; gap:3px; min-width:96px; } #menu-overlay .rank-name{ font-size:10.5px; font-weight:700; letter-spacing:1.5px; color:#f0a83c; line-height:1; } #menu-overlay .rank-bar{ width:100%; height:4px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden; } #menu-overlay .rank-fill{ height:100%; width:0%; background:linear-gradient(90deg,#e08f25,#f4b34c); transition:width .4s ease; } #menu-overlay .name-pill{ display:flex; align-items:center; padding:0 16px; height:32px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:4px; font-weight:600; font-size:14px; letter-spacing:1px; min-width:150px; justify-content:flex-start; } #menu-overlay .coin{ display:flex; align-items:center; gap:7px; height:32px; padding:0 12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:4px; font-weight:700; font-size:13px; } #menu-overlay .coin .dot{ width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#1a1206; } #menu-overlay .coin .y{ background:#f0c83c; } #menu-overlay .coin .o{ background:#d9d9d9; } #menu-overlay .coin.sol{ gap:7px; border-color:rgba(153,69,255,.45); } #menu-overlay .coin.sol .sol-ico{ font-size:15px; font-weight:900; line-height:1; background:linear-gradient(90deg,#14f195,#9945ff); -webkit-background-clip:text; background-clip:text; color:transparent; } #menu-overlay .coin.sol #sol-bal{ color:#fff; } #menu-overlay .coin.opr{ gap:5px; border-color:rgba(240,168,60,.5); color:#f0a83c; } #menu-overlay .coin.opr #opr-bal{ color:#fff; font-weight:800; } #menu-overlay .ico-btn{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.10); border-radius:4px; cursor:pointer; color:#c7ccd2; } #menu-overlay .ico-btn.amber{ border-color:#f0a83c; color:#f0a83c; } /* ---------- left panel ---------- */ #menu-overlay .left{ position:absolute; left:46px; top:84px; z-index:3; width:430px; max-width:46vw; } #menu-overlay .m-logo{ width:330px; max-width:100%; height:auto; display:block; filter:drop-shadow(0 4px 14px rgba(0,0,0,.6)); } #menu-overlay .m-tagline{ margin:6px 0 30px; color:#e7a13e; font-weight:600; font-size:13px; letter-spacing:5px; } #menu-overlay .play{ position:relative; width:330px; height:62px; margin-bottom:26px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:0 26px; background:linear-gradient(180deg, rgba(20,16,8,.85), rgba(12,10,6,.9)); border:2px solid #f0a83c; color:#ffce7a; clip-path:polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); box-shadow:0 0 26px rgba(240,168,60,.32), inset 0 0 24px rgba(240,168,60,.10); font-weight:800; font-size:24px; letter-spacing:5px; transition:box-shadow .2s ease, transform .06s ease; } #menu-overlay .play:hover{ box-shadow:0 0 38px rgba(240,168,60,.55), inset 0 0 30px rgba(240,168,60,.18); color:#fff0d6; } #menu-overlay .play:active{ transform:translateY(1px); } #menu-overlay .play .chev{ color:#f0a83c; font-size:22px; } #menu-overlay .mitem{ display:flex; align-items:center; gap:16px; height:46px; cursor:pointer; color:#cdd2d8; font-weight:700; font-size:18px; letter-spacing:2px; } #menu-overlay .mitem:hover{ color:#fff; } #menu-overlay .mitem svg{ opacity:.85; } #menu-overlay .mitem .chev{ margin-left:auto; opacity:.35; } #menu-overlay .loadout-label{ margin:34px 0 10px; color:#e7a13e; font-weight:700; font-size:14px; letter-spacing:3px; } #menu-overlay .loadout{ display:flex; align-items:center; gap:16px; width:300px; height:84px; padding:0 16px; cursor:pointer; background:rgba(12,14,18,.8); border:1px solid rgba(240,168,60,.5); border-radius:4px; } #menu-overlay .loadout .gun{ width:96px; height:54px; object-fit:contain; opacity:.95; } #menu-overlay .loadout .meta{ display:flex; flex-direction:column; } #menu-overlay .loadout .meta b{ font-size:17px; letter-spacing:2px; } #menu-overlay .loadout .meta span{ font-size:11px; color:#8b9098; letter-spacing:1px; } #menu-overlay .loadout .chev{ margin-left:auto; color:#9aa0a8; } /* ---------- bottom bar ---------- */ #menu-overlay .bottombar{ position:absolute; left:0; right:0; bottom:0; height:44px; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:0 18px; background:rgba(7,8,10,.94); border-top:1px solid rgba(255,255,255,.06); font-size:13px; letter-spacing:1px; } #menu-overlay .stats{ display:flex; align-items:center; gap:26px; } #menu-overlay .stat{ display:flex; align-items:center; gap:8px; color:#aab0b8; font-weight:700; } #menu-overlay .stat::before{ content:"›"; color:#f0a83c; font-weight:800; } #menu-overlay .stat b{ color:#fff; } #menu-overlay .bottom-right{ display:flex; align-items:center; gap:16px; color:#aab0b8; font-weight:700; } #menu-overlay .region{ display:flex; align-items:center; gap:8px; padding:4px 12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:3px; } #menu-overlay .ping{ display:flex; align-items:center; gap:6px; } #menu-overlay .ping .bars{ color:#46d06a; letter-spacing:-1px; } /* ---------- matchmaking popup (over the menu) ---------- */ #menu-overlay .mm-popup{ position:absolute; inset:0; z-index:6; display:none; align-items:center; justify-content:center; background:rgba(6,7,9,.74); } #menu-overlay.matchmaking .mm-popup{ display:flex; } #menu-overlay .mm-card{ width:360px; max-width:80vw; padding:36px 30px 30px; text-align:center; background:rgba(14,16,20,.96); border:1px solid rgba(240,168,60,.35); border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,.7), inset 0 0 30px rgba(240,168,60,.05); } #menu-overlay .mm-spinner{ width:56px; height:56px; margin:0 auto 22px; border-radius:50%; border:4px solid rgba(240,168,60,.18); border-top-color:#f0a83c; animation:mmspin .9s linear infinite; } @keyframes mmspin{ to{ transform:rotate(360deg); } } #menu-overlay .mm-title{ color:#f0a83c; font-weight:800; font-size:22px; letter-spacing:5px; } #menu-overlay .mm-sub{ color:#aeb4bc; font-size:13px; letter-spacing:2px; margin-top:10px; } #menu-overlay .mm-cancel{ margin-top:24px; display:inline-block; padding:9px 26px; cursor:pointer; border:1px solid rgba(255,255,255,.2); border-radius:4px; color:#cdd2d8; font-weight:700; letter-spacing:2px; font-size:13px; } #menu-overlay .mm-cancel:hover{ border-color:#f0a83c; color:#f0a83c; } /* ---------- options panel (over the menu) ---------- */ #menu-overlay .opt-popup{ position:absolute; inset:0; z-index:7; display:none; align-items:center; justify-content:center; background:rgba(6,7,9,.78); } #menu-overlay.options .opt-popup{ display:flex; } #menu-overlay .opt-card{ width:560px; max-width:88vw; max-height:84vh; overflow:auto; background:rgba(13,15,19,.97); border:1px solid rgba(240,168,60,.3); border-radius:8px; box-shadow:0 28px 80px rgba(0,0,0,.7); } #menu-overlay .opt-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid rgba(255,255,255,.07); } #menu-overlay .opt-head .t{ color:#f0a83c; font-weight:800; font-size:20px; letter-spacing:4px; } #menu-overlay .opt-close{ cursor:pointer; color:#9aa0a8; font-size:22px; line-height:1; padding:2px 8px; } #menu-overlay .opt-close:hover{ color:#fff; } #menu-overlay .opt-body{ padding:18px 24px 8px; } #menu-overlay .opt-row{ display:flex; align-items:center; gap:16px; padding:11px 0; } #menu-overlay .opt-row .lbl{ width:160px; color:#c7ccd2; font-weight:600; font-size:14px; letter-spacing:1px; } #menu-overlay .opt-row .val{ width:46px; text-align:right; color:#f0a83c; font-weight:700; font-size:13px; } #menu-overlay input[type=range]{ -webkit-appearance:none; appearance:none; flex:1; height:4px; border-radius:2px; background:linear-gradient(90deg,#f0a83c var(--p,50%), rgba(255,255,255,.12) var(--p,50%)); outline:none; } #menu-overlay input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#f0a83c; box-shadow:0 0 8px rgba(240,168,60,.6); cursor:pointer; } #menu-overlay .seg{ display:flex; gap:6px; flex:1; } #menu-overlay .seg button{ flex:1; padding:7px 0; cursor:pointer; font-family:inherit; font-weight:700; font-size:12px; letter-spacing:1px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:4px; color:#aab0b8; } #menu-overlay .seg button.on{ background:rgba(240,168,60,.16); border-color:#f0a83c; color:#f0a83c; } #menu-overlay .tgl{ width:46px; height:24px; border-radius:13px; background:rgba(255,255,255,.12); position:relative; cursor:pointer; flex:0 0 auto; } #menu-overlay .tgl::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#c7ccd2; transition:.15s; } #menu-overlay .tgl.on{ background:rgba(240,168,60,.5); } #menu-overlay .tgl.on::after{ left:25px; background:#f0a83c; } #menu-overlay .opt-foot{ padding:16px 24px; display:flex; justify-content:flex-end; gap:10px; border-top:1px solid rgba(255,255,255,.07); } #menu-overlay .opt-btn{ padding:10px 26px; cursor:pointer; font-weight:700; letter-spacing:2px; font-size:13px; border-radius:4px; } #menu-overlay .opt-btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,.2); color:#cdd2d8; } #menu-overlay .opt-btn.primary{ background:linear-gradient(180deg,#f4b34c,#e08f25); border:0; color:#1c1304; } /* ---------- full panels (SERVERS / HOST / BARRACKS) ---------- */ #menu-overlay .panel{ position:absolute; left:46px; right:46px; top:74px; bottom:58px; z-index:6; display:none; flex-direction:column; background:rgba(10,12,15,.94); border:1px solid rgba(255,255,255,.08); border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,.55); } #menu-overlay.servers #panel-servers, #menu-overlay.host #panel-host, #menu-overlay.profile #panel-profile, #menu-overlay.admin #panel-admin, #menu-overlay.challenges #panel-challenges, #menu-overlay.barracks #panel-barracks{ display:flex; } /* ---------- PROFILE panel ---------- */ #menu-overlay .pf{ padding:20px 26px; overflow:auto; } #menu-overlay .pf-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; } #menu-overlay .pf-id{ display:flex; gap:16px; align-items:center; } #menu-overlay .pf-avatar{ width:76px; height:76px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:38px; color:#1c1304; background:linear-gradient(150deg,#f4b34c,#e08f25); box-shadow:0 8px 22px rgba(224,143,37,.3); } #menu-overlay .pf-name-row{ display:flex; align-items:center; gap:12px; } #menu-overlay .pf-name{ font-weight:800; font-size:26px; letter-spacing:2px; color:#fff; } #menu-overlay .pf-edit{ cursor:pointer; font-size:11px; font-weight:700; letter-spacing:1.5px; color:#f0a83c; border:1px solid rgba(240,168,60,.45); border-radius:5px; padding:5px 10px; } #menu-overlay .pf-edit:hover{ background:rgba(240,168,60,.12); } #menu-overlay .pf-rank{ margin-top:6px; color:#aab0b8; font-size:12px; font-weight:700; letter-spacing:2px; } #menu-overlay .pf-xpbar{ margin-top:8px; width:300px; max-width:46vw; height:7px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden; } #menu-overlay .pf-xpfill{ height:100%; background:linear-gradient(90deg,#f4b34c,#e08f25); } #menu-overlay .pf-wallet{ margin-top:9px; font-size:11px; color:#7d838b; letter-spacing:1px; font-family:monospace; } #menu-overlay .pf-sol{ font-weight:800; font-size:17px; color:#f0a83c; white-space:nowrap; } #menu-overlay .pf-sol .sol-ico{ opacity:.8; margin-right:3px; } #menu-overlay .pf-rename{ margin-top:18px; padding:16px; border:1px solid rgba(240,168,60,.3); border-radius:8px; background:rgba(240,168,60,.05); } #menu-overlay .pf-rename-h{ font-weight:800; letter-spacing:2px; font-size:13px; color:#e8eaed; margin-bottom:12px; } #menu-overlay .pf-fee{ float:right; color:#f0a83c; } #menu-overlay .pf-rename .field{ display:flex; align-items:center; gap:10px; height:46px; padding:0 14px; margin-bottom:12px; background:#0c0e12; border:1px solid rgba(255,255,255,.1); border-radius:8px; transition:border-color .15s ease, box-shadow .15s ease; } #menu-overlay .pf-rename .field:focus-within{ border-color:rgba(240,168,60,.6); box-shadow:0 0 0 3px rgba(240,168,60,.1); } #menu-overlay .pf-rename .field svg{ flex:0 0 auto; opacity:.55; } #menu-overlay .pf-rename .field input{ flex:1; background:transparent; border:0; outline:0; color:#e8eaed; font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:600; letter-spacing:1px; } #menu-overlay .pf-rename .field input::placeholder{ color:#6b7178; letter-spacing:2px; } #menu-overlay .pf-rename-act{ display:flex; gap:10px; } #menu-overlay .pf-rename-msg{ margin-top:10px; font-size:11px; font-weight:600; letter-spacing:1px; color:#d6912f; min-height:14px; } #menu-overlay .pf-stats{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; margin-top:22px; } /* play-to-earn ($OPR) card */ #menu-overlay .pf-earn{ display:flex; align-items:center; gap:18px; margin-top:14px; padding:16px 20px; border-radius:9px; background:linear-gradient(135deg,rgba(240,168,60,.12),rgba(20,16,8,.6)); border:1px solid rgba(240,168,60,.35); } #menu-overlay .pf-earn-l{ flex:1; min-width:0; } #menu-overlay .pf-earn-lbl{ font-size:10px; font-weight:800; letter-spacing:2px; color:#f0a83c; } #menu-overlay .pf-earn-bal{ font-weight:800; font-size:34px; color:#fff; line-height:1; margin-top:4px; } #menu-overlay .pf-earn-sym{ font-size:16px; color:#f0a83c; font-weight:700; } #menu-overlay .pf-earn-claimed{ font-size:10px; color:#8b9098; letter-spacing:1px; margin-top:6px; } #menu-overlay .pf-earn-r{ text-align:center; } #menu-overlay .pf-earn-go{ cursor:pointer; padding:13px 30px; border-radius:7px; font-weight:800; font-size:14px; letter-spacing:2px; color:#1c1304; background:linear-gradient(180deg,#f4b34c,#e08f25); box-shadow:0 8px 20px rgba(224,143,37,.35); } #menu-overlay .pf-earn-go:hover{ filter:brightness(1.06); } #menu-overlay .pf-earn-go.busy{ opacity:.5; pointer-events:none; } #menu-overlay .pf-earn-msg{ font-size:10.5px; font-weight:600; letter-spacing:.5px; color:#d6912f; margin-top:8px; max-width:160px; } #menu-overlay .pf-stat{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:7px; padding:13px 6px; text-align:center; } #menu-overlay .pf-stat-v{ font-weight:800; font-size:22px; color:#fff; } #menu-overlay .pf-stat-k{ margin-top:4px; font-size:9.5px; font-weight:700; letter-spacing:1.5px; color:#7d838b; } #menu-overlay .pf-cols{ display:grid; grid-template-columns:1fr 1.3fr; gap:18px; margin-top:24px; } #menu-overlay .pf-col-h{ font-size:11px; font-weight:800; letter-spacing:2px; color:#f0a83c; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:8px; } #menu-overlay .pf-list{ display:flex; flex-direction:column; gap:6px; } #menu-overlay .pf-game{ display:flex; align-items:center; gap:12px; padding:9px 12px; background:rgba(255,255,255,.03); border-radius:6px; } #menu-overlay .pf-game-l{ flex:1; min-width:0; } #menu-overlay .pf-game-map{ font-weight:700; font-size:13px; color:#e8eaed; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #menu-overlay .pf-game-mode{ font-size:10px; color:#7d838b; letter-spacing:1px; } #menu-overlay .pf-game-kd{ font-weight:700; font-size:13px; color:#cdd2d8; font-variant-numeric:tabular-nums; } #menu-overlay .pf-res{ font-weight:800; font-size:11px; letter-spacing:1px; padding:3px 8px; border-radius:4px; min-width:46px; text-align:center; } #menu-overlay .pf-res.win{ color:#06210b; background:#5fcf6a; } #menu-overlay .pf-res.loss{ color:#2a0707; background:#d9534f; } #menu-overlay .pf-res.place{ color:#1c1304; background:#f0a83c; } #menu-overlay .pf-friend{ display:flex; align-items:center; gap:9px; padding:8px 12px; background:rgba(255,255,255,.03); border-radius:6px; font-weight:600; font-size:13px; color:#e8eaed; } #menu-overlay .pf-friend .fdot{ width:8px; height:8px; border-radius:50%; background:#5fcf6a; } #menu-overlay .pf-empty{ color:#7d838b; font-size:12px; padding:14px 4px; letter-spacing:.5px; } #menu-overlay .panel-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid rgba(255,255,255,.07); } #menu-overlay .panel-head .t{ color:#f0a83c; font-weight:800; font-size:18px; letter-spacing:4px; } #menu-overlay .panel-head .acts{ display:flex; gap:10px; } #menu-overlay .pbtn{ padding:8px 18px; cursor:pointer; font-weight:700; letter-spacing:1.5px; font-size:12px; border-radius:4px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#cdd2d8; } #menu-overlay .pbtn:hover{ border-color:#f0a83c; color:#f0a83c; } #menu-overlay .pbtn.primary{ background:linear-gradient(180deg,#f4b34c,#e08f25); border:0; color:#1c1304; } #menu-overlay .panel-body{ flex:1; overflow:auto; padding:8px 0; } /* server list */ #menu-overlay .srv-cols, #menu-overlay .srv-row{ display:grid; grid-template-columns:2fr 1.4fr 1.1fr .8fr .8fr 90px; align-items:center; gap:12px; padding:11px 22px; } #menu-overlay .srv-cols{ color:#7d838b; font-size:11px; font-weight:700; letter-spacing:2px; border-bottom:1px solid rgba(255,255,255,.06); } #menu-overlay .srv-row{ border-bottom:1px solid rgba(255,255,255,.04); font-size:14px; color:#d3d7dc; } #menu-overlay .srv-row:hover{ background:rgba(240,168,60,.05); } #menu-overlay .srv-row .nm{ font-weight:700; color:#fff; } #menu-overlay .srv-row .lock{ color:#f0a83c; margin-left:6px; } #menu-overlay .srv-join{ padding:7px 0; text-align:center; cursor:pointer; border-radius:4px; background:rgba(240,168,60,.14); border:1px solid #f0a83c; color:#f0a83c; font-weight:700; font-size:12px; letter-spacing:1px; } #menu-overlay .srv-join:hover{ background:#f0a83c; color:#1c1304; } #menu-overlay .srv-empty{ text-align:center; color:#8b9098; padding:60px 20px; font-size:15px; letter-spacing:1px; } #menu-overlay .srv-empty b{ color:#f0a83c; } /* host form */ /* ---------- restyled HOST A MATCH form (2-column, no scroll) ---------- */ #menu-overlay .host-form{ max-width:640px; margin:0 auto; padding:8px 34px 20px; display:grid; grid-template-columns:1fr 1fr; gap:4px 26px; align-content:start; } #menu-overlay #panel-host .opt-row{ padding:8px 0; gap:14px; border-bottom:none; } #menu-overlay #panel-host .opt-row:hover{ background:transparent; } #menu-overlay #panel-host .opt-row .lbl{ flex:0 0 auto; min-width:96px; width:auto; font-size:11px; font-weight:700; letter-spacing:1.2px; color:#aab0b8; text-transform:uppercase; } /* full-width rows: match name, map preview, password, entry, create button */ #menu-overlay #panel-host .opt-row:first-child, #menu-overlay #panel-host .opt-row:has(.map-preview), #menu-overlay #panel-host #h-pw-row, #menu-overlay #panel-host #h-entry-row, #menu-overlay #panel-host .host-create{ grid-column:1 / -1; } #menu-overlay .hsel, #menu-overlay .hinput{ flex:1; min-width:0; height:40px; padding:0 13px; background:#0c0e12; border:1px solid rgba(255,255,255,.12); border-radius:8px; color:#e8eaed; font-family:inherit; font-size:13.5px; font-weight:700; letter-spacing:.5px; outline:none; transition:border-color .12s ease, box-shadow .12s ease; } #menu-overlay .hsel{ cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 14px center; padding-right:34px; } #menu-overlay .hsel:focus, #menu-overlay .hinput:focus{ border-color:#f0a83c; box-shadow:0 0 0 3px rgba(240,168,60,.12); } #menu-overlay .hinput::placeholder{ color:#6b7178; } /* prominent map preview */ #menu-overlay #panel-host .opt-row:has(.map-preview){ border-bottom:none; justify-content:center; padding-top:4px; } #menu-overlay .map-preview{ display:block; width:100%; max-width:100%; height:118px; object-fit:cover; border-radius:9px; border:1px solid rgba(240,168,60,.3); box-shadow:0 10px 26px rgba(0,0,0,.45); } #menu-overlay .map-preview:not([src]), #menu-overlay .map-preview[src=""]{ display:none; } /* full-width CREATE button */ #menu-overlay .host-create{ text-align:center; margin-top:14px; } #menu-overlay #h-create{ display:block !important; width:100%; height:50px; line-height:26px; padding:12px 0; font-size:15px; font-weight:800; letter-spacing:3px; border-radius:9px; background:linear-gradient(180deg,#f4b34c,#e08f25); color:#1c1304; box-shadow:0 10px 26px rgba(224,143,37,.4); } #menu-overlay #h-create:hover{ filter:brightness(1.06); } /* inline wager entry amount (sits next to the toggle) */ #menu-overlay .h-entry-inline{ flex:0 0 auto; width:80px; height:34px; margin-left:12px; text-align:right; } #menu-overlay .h-entry-sol{ font-size:12px; font-weight:800; letter-spacing:1px; color:#f0a83c; margin-left:7px; } /* friends popup */ #menu-overlay .fr-popup{ position:absolute; inset:0; z-index:8; display:none; align-items:center; justify-content:center; background:rgba(6,7,9,.78); } #menu-overlay.friends .fr-popup{ display:flex; } #menu-overlay .fr-card{ width:420px; max-width:88vw; background:rgba(13,15,19,.97); border:1px solid rgba(240,168,60,.3); border-radius:8px; box-shadow:0 28px 80px rgba(0,0,0,.7); } #menu-overlay .fr-add{ display:flex; gap:10px; padding:18px 22px; border-bottom:1px solid rgba(255,255,255,.07); } #menu-overlay .fr-add input{ flex:1; height:40px; padding:0 12px; background:#0c0e12; border:1px solid rgba(255,255,255,.1); border-radius:6px; color:#e8eaed; font-family:inherit; font-weight:600; outline:none; } #menu-overlay .fr-add input:focus{ border-color:#f0a83c; } #menu-overlay .fr-list{ max-height:300px; overflow:auto; padding:6px 0 10px; } #menu-overlay .fr-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 22px; border-bottom:1px solid rgba(255,255,255,.04); } #menu-overlay .fr-row .fn{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px; color:#e8eaed; } #menu-overlay .fr-row .fdot{ width:8px; height:8px; border-radius:50%; background:#5a626c; } #menu-overlay .fr-rm{ cursor:pointer; color:#8b9098; font-size:12px; font-weight:700; letter-spacing:1px; } #menu-overlay .fr-rm:hover{ color:#ff6a5a; } #menu-overlay .fr-empty{ text-align:center; color:#8b9098; padding:34px 20px; } /* barracks loadout editor */ #menu-overlay .brk{ display:flex; height:100%; } #menu-overlay .brk-classes{ width:140px; border-right:1px solid rgba(255,255,255,.07); padding:10px; display:flex; flex-direction:column; gap:5px; } #menu-overlay .brk-class{ padding:11px 12px; cursor:pointer; font-weight:700; letter-spacing:1.5px; font-size:13px; color:#aab0b8; border-radius:5px; border:1px solid transparent; } #menu-overlay .brk-class:hover{ color:#e8eaed; } #menu-overlay .brk-class.on{ color:#f0a83c; background:rgba(240,168,60,.1); border-color:rgba(240,168,60,.4); } #menu-overlay .brk-class{ display:flex; align-items:center; justify-content:space-between; gap:6px; } #menu-overlay .brk-defbadge{ font-size:8px; font-weight:800; letter-spacing:1px; color:#06210b; background:#5fcf6a; padding:2px 5px; border-radius:3px; } /* class header: rename + set-as-default */ #menu-overlay .brk-classbar{ display:flex; gap:10px; align-items:center; margin-bottom:14px; } #menu-overlay .brk-cname{ flex:1; height:40px; padding:0 14px; background:#0c0e12; border:1px solid rgba(255,255,255,.1); border-radius:7px; color:#fff; font-family:'Rajdhani',sans-serif; font-weight:800; font-size:17px; letter-spacing:2px; outline:0; } #menu-overlay .brk-cname:focus{ border-color:rgba(240,168,60,.6); box-shadow:0 0 0 3px rgba(240,168,60,.1); } #menu-overlay .brk-setdef{ flex:0 0 auto; cursor:pointer; padding:0 16px; height:40px; display:flex; align-items:center; font-weight:700; font-size:12px; letter-spacing:1.5px; border-radius:7px; color:#f0a83c; border:1px solid rgba(240,168,60,.45); background:rgba(240,168,60,.06); } #menu-overlay .brk-setdef:hover{ background:rgba(240,168,60,.16); } #menu-overlay .brk-setdef.on{ cursor:default; color:#06210b; background:#5fcf6a; border-color:#5fcf6a; } #menu-overlay .brk-slots{ flex:1; overflow:auto; padding:14px 18px; } #menu-overlay .brk-slot{ margin-bottom:14px; } #menu-overlay .brk-slot .sh{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; border-bottom:1px solid rgba(255,255,255,.06); padding-bottom:6px; } #menu-overlay .brk-slot .sl{ color:#7d838b; font-size:11px; font-weight:700; letter-spacing:2px; } #menu-overlay .brk-slot .cur{ color:#f0a83c; font-weight:700; font-size:15px; letter-spacing:1px; } #menu-overlay .brk-chips{ display:flex; flex-wrap:wrap; gap:8px; } #menu-overlay .brk-chip{ display:flex; align-items:center; gap:9px; padding:9px 14px; cursor:pointer; font-weight:600; font-size:13px; border-radius:5px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:#c7ccd2; } #menu-overlay .brk-chip:hover{ border-color:rgba(240,168,60,.6); color:#fff; } #menu-overlay .brk-chip.on{ background:rgba(240,168,60,.16); border-color:#f0a83c; color:#f0a83c; } #menu-overlay .brk-chip img{ width:38px; height:22px; object-fit:contain; opacity:.92; } #menu-overlay .brk-slot .sh{ align-items:center; } #menu-overlay .brk-slot .cur img{ width:46px; height:26px; object-fit:contain; vertical-align:middle; margin-left:8px; } /* weapon customization (attachments + camo) */ #menu-overlay .brk-custom{ width:700px; flex:0 0 700px; border-left:1px solid rgba(255,255,255,.07); padding:0; overflow:auto; } #menu-overlay .cz-stick{ position:sticky; top:0; z-index:3; background:#0d1014; padding:18px 26px 14px; border-bottom:1px solid rgba(255,255,255,.06); } #menu-overlay .cz-prev-stage{ position:relative; width:100%; height:310px; border:1px solid rgba(255,255,255,.06); border-radius:6px; overflow:hidden; cursor:grab; touch-action:none; pointer-events:auto; user-select:none; -webkit-user-select:none; background:radial-gradient(ellipse at 50% 58%, rgba(240,168,60,.14), rgba(255,255,255,.02) 54%, transparent 72%); } #menu-overlay .cz-prev-stage.grabbing{ cursor:grabbing; } #menu-overlay .cz-prev-img{ position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); object-fit:contain; -webkit-user-drag:none; user-select:none; filter:drop-shadow(0 10px 12px rgba(0,0,0,.5)); } #menu-overlay .cz-prev-tint{ position:absolute; inset:6px; -webkit-mask-size:contain; mask-size:contain; mix-blend-mode:multiply; opacity:.62; pointer-events:none; } #menu-overlay .cz-badges{ position:absolute; left:10px; top:10px; right:10px; display:flex; flex-wrap:wrap; gap:5px; pointer-events:none; } #menu-overlay .cz-badges span{ font-size:9px; font-weight:700; letter-spacing:1px; color:#f0a83c; background:rgba(12,14,18,.82); border:1px solid rgba(240,168,60,.4); padding:3px 7px; border-radius:3px; } #menu-overlay .cz-spin-hint{ position:absolute; bottom:7px; left:0; right:0; text-align:center; font-size:9px; letter-spacing:2px; color:#7d838b; pointer-events:none; } #menu-overlay .cz-prev-name{ text-align:center; color:#f0a83c; font-weight:700; letter-spacing:2px; font-size:14px; margin-top:10px; } #menu-overlay .cz-tabs{ display:flex; margin-top:12px; } #menu-overlay .cz-tab{ flex:1; text-align:center; padding:10px 0; cursor:pointer; font-weight:700; font-size:12px; letter-spacing:2px; color:#aab0b8; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); } #menu-overlay .cz-tab + .cz-tab{ border-left:0; } #menu-overlay .cz-tab:hover{ color:#e8eaed; } #menu-overlay .cz-tab.on{ color:#0c0e12; background:#f0a83c; border-color:#f0a83c; } #menu-overlay .cz-pane{ padding:16px 20px; } #menu-overlay .brk-custom:empty{ display:none; } #menu-overlay .cz-head{ color:#7d838b; font-size:11px; font-weight:700; letter-spacing:2px; margin:4px 0 10px; display:flex; justify-content:space-between; align-items:baseline; } #menu-overlay .cz-head:not(:first-child){ margin-top:22px; } #menu-overlay .cz-head span{ color:#f0a83c; font-size:13px; letter-spacing:1px; } #menu-overlay .cz-row{ margin-bottom:14px; } #menu-overlay .cz-label{ color:#aab0b8; font-size:10px; font-weight:700; letter-spacing:2px; margin-bottom:7px; } #menu-overlay .cz-chips{ display:flex; flex-wrap:wrap; gap:6px; } #menu-overlay .cz-chip{ cursor:pointer; padding:7px 11px; font-weight:600; font-size:12px; border-radius:5px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:#c7ccd2; line-height:1.25; } #menu-overlay .cz-chip i{ display:block; font-style:normal; font-size:9px; letter-spacing:.5px; color:#7d838b; margin-top:2px; } #menu-overlay .cz-chip:hover{ border-color:rgba(240,168,60,.6); color:#fff; } #menu-overlay .cz-chip.on{ background:rgba(240,168,60,.16); border-color:#f0a83c; color:#f0a83c; } #menu-overlay .cz-chip.on i{ color:#cf8f33; } #menu-overlay .cz-camos{ display:flex; flex-wrap:wrap; gap:8px; } #menu-overlay .cz-camo{ width:98px; cursor:pointer; display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:5px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); } #menu-overlay .cz-camo b{ font-weight:600; font-size:11px; letter-spacing:.5px; color:#c7ccd2; } #menu-overlay .cz-camo:hover{ border-color:rgba(240,168,60,.6); } #menu-overlay .cz-camo.on{ border-color:#f0a83c; background:rgba(240,168,60,.12); } #menu-overlay .cz-camo.on b{ color:#f0a83c; } #menu-overlay .cz-sw{ width:20px; height:20px; border-radius:3px; flex:0 0 auto; border:1px solid rgba(0,0,0,.4); box-shadow:inset 0 0 4px rgba(0,0,0,.5); } #menu-overlay .cz-camo.buyable{ position:relative; } #menu-overlay .cz-camo.buyable b{ opacity:.75; } #menu-overlay .cz-camo .cz-lock{ margin-left:auto; padding:1px 5px; border-radius:3px; background:linear-gradient(180deg,#f4b34c,#e08f25); color:#1c1304; font-size:8.5px; font-weight:800; letter-spacing:.3px; } /* ============ GAME LOBBY (waiting room) ============ */ #menu-overlay.lobby .left .play, #menu-overlay.lobby .left .mitem, #menu-overlay.lobby .left .loadout-label, #menu-overlay.lobby .left .loadout{ display:none; } /* wager match indicators */ #menu-overlay .srv-wager{ margin-left:9px; font-size:9px; font-weight:800; letter-spacing:1px; color:#06210b; background:#5fcf6a; padding:2px 6px; border-radius:3px; vertical-align:middle; } #menu-overlay .lb-wager{ margin-bottom:14px; padding:11px 16px; border-radius:7px; text-align:center; font-size:12px; font-weight:700; letter-spacing:1px; color:#e8eaed; background:linear-gradient(135deg,rgba(95,207,106,.16),rgba(8,20,10,.6)); border:1px solid rgba(95,207,106,.4); } #menu-overlay .lb-wager b{ color:#5fcf6a; } #menu-overlay .lbw-tag{ font-weight:800; letter-spacing:2px; color:#5fcf6a; margin-right:8px; } /* hourly showdown / prize pool widget — bottom-right of the home menu */ #menu-overlay .showdown{ position:absolute; right:46px; bottom:64px; z-index:4; width:300px; padding:16px 20px; border-radius:9px; overflow:hidden; background:linear-gradient(135deg,rgba(240,168,60,.16),rgba(20,16,8,.78)); border:1px solid rgba(240,168,60,.45); box-shadow:0 16px 40px rgba(0,0,0,.5); backdrop-filter:blur(4px); } /* home-only: hide whenever a panel / lobby is open */ #menu-overlay.lobby .showdown, #menu-overlay.servers .showdown, #menu-overlay.host .showdown, #menu-overlay.barracks .showdown, #menu-overlay.profile .showdown, #menu-overlay.options .showdown, #menu-overlay.friends .showdown, #menu-overlay.admin .showdown, #menu-overlay.challenges .showdown{ display:none; } #menu-overlay .sd-top{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:2px; color:#f0a83c; } #menu-overlay .sd-live{ color:#ff5a4d; font-size:8px; letter-spacing:1px; animation:cbpulse 1.4s infinite; } #menu-overlay .sd-pot{ font-weight:800; font-size:38px; color:#fff; line-height:1; margin-top:8px; text-shadow:0 3px 16px rgba(240,168,60,.35); } #menu-overlay .sd-sol{ font-size:18px; color:#f0a83c; font-weight:700; } #menu-overlay .sd-pot-lbl{ font-size:9.5px; font-weight:700; letter-spacing:2px; color:#8b9098; margin-top:2px; } #menu-overlay .sd-next{ margin-top:12px; font-size:13px; font-weight:800; letter-spacing:1.5px; color:#e8eaed; } #menu-overlay .sd-next span{ color:#f0a83c; font-variant-numeric:tabular-nums; } #menu-overlay .sd-split{ margin-top:5px; font-size:9.5px; font-weight:600; letter-spacing:1px; color:#7d838b; } /* main-menu loadout + challenges cards (mirror the game-lobby cards) */ #menu-overlay .left .menu-card{ max-width:360px; margin-top:18px; margin-bottom:0; } #menu-overlay.lobby .left .menu-card{ display:none; } /* home-only — lobby has its own */ #menu-overlay .lobby-view{ display:none; } #menu-overlay.lobby .lobby-view{ display:block; } /* ---------- right-side LEVEL / EMBLEM / CALLING CARD showcase (home only) ---------- */ #menu-overlay .right{ position:absolute; right:46px; top:84px; z-index:3; width:340px; max-width:40vw; } #menu-overlay.servers .right, #menu-overlay.host .right, #menu-overlay.barracks .right, #menu-overlay.profile .right, #menu-overlay.options .right, #menu-overlay.friends .right, #menu-overlay.admin .right, #menu-overlay.challenges .right{ display:none; } /* in the game lobby, show the same showcase (right), with loadout + challenges stacked below */ #menu-overlay.lobby .right{ display:block; width:300px; } /* challenges card lives in the right column (under the showcase), both menu + lobby */ #menu-overlay .right .mr-card{ margin-top:16px; margin-bottom:0; } /* top row: emblem + name/level/rank/progress, then a 3:1 calling-card strip below */ #menu-overlay .sc{ background:linear-gradient(180deg,rgba(15,17,21,.72),rgba(10,12,15,.6)); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:16px; backdrop-filter:blur(4px); } #menu-overlay .sc-head{ display:flex; align-items:center; gap:16px; } #menu-overlay .sc-emblem{ width:72px; height:72px; flex:0 0 auto; border-radius:10px; overflow:hidden; background:#0c0e12; border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; } #menu-overlay .sc-emblem img{ width:100%; height:100%; object-fit:cover; } #menu-overlay .sc-emblem .emb-default{ color:#3a4049; } #menu-overlay .sc-emblem .emb-default svg{ width:54%; height:54%; } #menu-overlay .sc-meta{ flex:1; min-width:0; } #menu-overlay .sc-name{ font-weight:800; font-size:23px; letter-spacing:2px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #menu-overlay .sc-rankline{ display:flex; align-items:baseline; gap:8px; margin-top:1px; } #menu-overlay .sc-lvl{ font-weight:800; font-size:15px; color:#f0a83c; } #menu-overlay .sc-lvl::before{ content:'LVL '; font-size:10px; letter-spacing:1px; color:#8b9098; } #menu-overlay .sc-rank{ font-size:12px; font-weight:700; letter-spacing:2px; color:#cdd2d8; } #menu-overlay .sc-xprow{ display:flex; align-items:center; gap:10px; margin-top:9px; } #menu-overlay .sc-xpbar{ flex:1; height:7px; background:rgba(255,255,255,.08); border-radius:5px; overflow:hidden; } #menu-overlay .sc-xpfill{ height:100%; background:linear-gradient(90deg,#f4b34c,#e08f25); } #menu-overlay .sc-xptext{ font-size:11px; font-weight:700; color:#aab0b8; letter-spacing:.5px; } #menu-overlay .sc-card{ width:100%; aspect-ratio:3/1; margin-top:14px; border-radius:9px; overflow:hidden; position:relative; background-size:cover !important; background-position:center !important; border:1px solid rgba(255,255,255,.12); box-shadow:0 8px 22px rgba(0,0,0,.4); display:flex; align-items:flex-end; } #menu-overlay .sc-card-name{ position:relative; z-index:2; padding:8px 12px; font-weight:800; font-size:13px; letter-spacing:2px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.85); } /* ---------- profile: emblem UPLOAD + calling-card picker (unlock by level) ---------- */ #menu-overlay .pf-customize{ margin-top:24px; } #menu-overlay .pf-embupload{ display:flex; gap:16px; align-items:center; } #menu-overlay .pf-emb-preview{ width:84px; height:84px; flex:0 0 auto; border-radius:10px; overflow:hidden; cursor:pointer; background:#0c0e12; border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; position:relative; transition:border-color .15s ease; } #menu-overlay .pf-emb-preview:hover{ border-color:rgba(240,168,60,.6); } #menu-overlay .pf-emb-preview img{ width:100%; height:100%; object-fit:cover; } #menu-overlay .pf-emb-preview .emb-default{ color:#3a4049; } #menu-overlay .pf-emb-preview .emb-default svg{ width:50%; height:50%; } #menu-overlay .pf-emb-ov{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; background:rgba(6,7,10,.6); color:#f0a83c; font-size:10px; font-weight:800; letter-spacing:1.5px; opacity:0; transition:opacity .15s ease; } #menu-overlay .pf-emb-preview:hover .pf-emb-ov{ opacity:1; } #menu-overlay .pf-emb-up{ flex:1; min-width:0; } #menu-overlay .pf-emb-up-t{ font-weight:800; font-size:14px; letter-spacing:1.5px; color:#e8eaed; } #menu-overlay .pf-emb-hint{ font-size:10px; color:#7d838b; letter-spacing:.5px; margin-top:6px; } #menu-overlay .pf-emb-msg{ font-size:11px; font-weight:600; letter-spacing:.5px; margin-top:6px; min-height:14px; color:#d6912f; } /* calling-card category tabs */ #menu-overlay .pf-card-tabs{ display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; } #menu-overlay .pf-card-tab{ padding:6px 13px; cursor:pointer; border-radius:5px; font-size:10.5px; font-weight:700; letter-spacing:1.5px; color:#8b9098; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); } #menu-overlay .pf-card-tab:hover{ color:#cdd2d8; } #menu-overlay .pf-card-tab.on{ color:#1c1304; background:linear-gradient(180deg,#f4b34c,#e08f25); border-color:transparent; } #menu-overlay .pf-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } #menu-overlay .pf-card{ aspect-ratio:3/1; border-radius:7px; cursor:pointer; border:1px solid rgba(255,255,255,.1); position:relative; overflow:hidden; background-size:cover !important; background-position:center !important; display:flex; align-items:flex-end; } #menu-overlay .pf-card-nm{ position:relative; z-index:2; padding:4px 8px; font-size:9.5px; font-weight:700; letter-spacing:1px; color:#fff; text-shadow:0 1px 3px #000; } #menu-overlay .pf-card:hover{ border-color:rgba(240,168,60,.6); } #menu-overlay .pf-card.on{ border-color:#f0a83c; box-shadow:0 0 0 2px rgba(240,168,60,.4); } #menu-overlay .pf-card.on::after{ content:'\2713'; position:absolute; top:3px; right:5px; z-index:3; color:#fff; font-weight:800; font-size:12px; text-shadow:0 1px 3px #000; } #menu-overlay .pf-card.locked{ cursor:not-allowed; } #menu-overlay .pf-card.locked::before{ content:''; position:absolute; inset:0; z-index:2; background:rgba(6,7,10,.72); } #menu-overlay .pf-card-lock{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; letter-spacing:1px; color:#cdd2d8; } /* buyable (not yet owned) cards: subtle dim + amber price pill */ #menu-overlay .pf-card.buyable::before{ content:''; position:absolute; inset:0; z-index:1; background:rgba(6,7,10,.42); } #menu-overlay .pf-card.buyable:hover::before{ background:rgba(6,7,10,.18); } #menu-overlay .pf-card-price{ position:absolute; top:4px; right:4px; z-index:3; padding:2px 6px; border-radius:4px; background:linear-gradient(180deg,#f4b34c,#e08f25); color:#1c1304; font-size:9px; font-weight:800; letter-spacing:.5px; box-shadow:0 1px 4px rgba(0,0,0,.4); } #menu-overlay .pf-card-msg{ min-height:14px; margin-bottom:8px; font-size:10.5px; font-weight:700; letter-spacing:.8px; color:#d6912f; } #menu-overlay .pf-card-msg:empty{ display:none; } /* SHOWDOWNS tab list */ #menu-overlay .sdl-empty{ text-align:center; color:#7d838b; font-size:13px; line-height:1.8; padding:54px 20px; letter-spacing:.5px; } #menu-overlay .sdl-row{ display:flex; align-items:center; gap:16px; padding:14px 18px; margin-bottom:10px; border-radius:8px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); } #menu-overlay .sdl-row:hover{ border-color:rgba(240,168,60,.35); } #menu-overlay .sdl-main{ flex:1; min-width:0; } #menu-overlay .sdl-name{ font-size:15px; font-weight:800; letter-spacing:1px; color:#fff; } #menu-overlay .sdl-live{ margin-left:8px; padding:1px 7px; border-radius:4px; background:#c0392b; color:#fff; font-size:9px; font-weight:800; letter-spacing:1px; vertical-align:2px; } #menu-overlay .sdl-meta{ margin-top:4px; font-size:12px; color:#8b939c; letter-spacing:.5px; } #menu-overlay .sdl-pot{ text-align:right; min-width:118px; } #menu-overlay .sdl-pot-v{ font-size:15px; font-weight:800; color:#f0a83c; letter-spacing:.5px; } #menu-overlay .sdl-pot-usd{ margin-top:2px; font-size:11px; font-weight:700; color:#9aa3ad; } #menu-overlay .sdl-join{ padding:10px 20px; border-radius:6px; cursor:pointer; font-size:12px; font-weight:800; letter-spacing:1px; background:linear-gradient(180deg,#f4b34c,#e08f25); color:#1c1304; box-shadow:0 4px 14px rgba(240,168,60,.3); white-space:nowrap; transition:filter .15s; } #menu-overlay .sdl-join:hover{ filter:brightness(1.08); } #menu-overlay .sdl-joined{ padding:10px 18px; border-radius:6px; font-size:12px; font-weight:800; letter-spacing:1px; color:#5fcf6a; border:1px solid rgba(95,207,106,.4); white-space:nowrap; } /* WAGER locked coming-soon panel + locked nav tab */ #menu-overlay .wager-soon{ display:flex; align-items:center; justify-content:center; } #menu-overlay .ws-box{ text-align:center; max-width:460px; padding:40px 24px; } #menu-overlay .ws-ico{ font-size:44px; opacity:.85; } #menu-overlay .ws-t{ margin-top:14px; font-size:22px; font-weight:800; letter-spacing:4px; color:#f0a83c; } #menu-overlay .ws-s{ margin-top:14px; font-size:14px; line-height:1.8; color:#aeb4bc; letter-spacing:.4px; } #menu-overlay .ws-s b{ color:#fff; } #menu-overlay .tab-locked{ opacity:.72; } #menu-overlay .tab-lock{ font-size:9px; vertical-align:1px; margin-left:1px; opacity:.85; } /* calling-card purchase confirmation modal */ .card-buy-modal{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; background:rgba(4,5,8,.74); backdrop-filter:blur(3px); font-family:'Rajdhani',system-ui,sans-serif; } .card-buy-modal *{ font-family:inherit; } .card-buy-modal.on{ display:flex; } .card-buy-modal .cbm-box{ width:340px; max-width:90vw; padding:22px 22px 20px; border-radius:12px; text-align:center; background:linear-gradient(180deg,#14171d,#0b0d11); border:1px solid rgba(240,168,60,.35); box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4); animation:cbmIn .16s ease-out; } @keyframes cbmIn{ from{ transform:translateY(10px) scale(.97); opacity:0 } to{ transform:none; opacity:1 } } .card-buy-modal .cbm-h{ font-size:11px; font-weight:800; letter-spacing:2.5px; color:#f0a83c; margin-bottom:14px; } .card-buy-modal .cbm-card{ aspect-ratio:3/1; border-radius:9px; border:1px solid rgba(255,255,255,.14); position:relative; overflow:hidden; display:flex; align-items:flex-end; box-shadow:0 8px 24px rgba(0,0,0,.5); } .card-buy-modal .cbm-card-nm{ padding:5px 9px; font-size:11px; font-weight:800; letter-spacing:1px; color:#fff; text-shadow:0 1px 3px #000; } .card-buy-modal .cbm-name{ margin-top:13px; font-size:16px; font-weight:800; letter-spacing:1.5px; color:#fff; } .card-buy-modal .cbm-sub{ margin-top:8px; font-size:11px; letter-spacing:.5px; color:#8b939c; } .card-buy-modal .cbm-price{ margin-top:2px; font-size:24px; font-weight:800; letter-spacing:1px; background:linear-gradient(180deg,#f6bd5c,#e0902a); -webkit-background-clip:text; background-clip:text; color:transparent; } .card-buy-modal .cbm-ops{ margin-top:3px; font-size:12px; font-weight:700; letter-spacing:.6px; color:#8b939c; } .card-buy-modal .cbm-msg{ min-height:15px; margin-top:10px; font-size:11px; font-weight:700; letter-spacing:.6px; color:#d6912f; } .card-buy-modal .cbm-btns{ display:flex; gap:10px; margin-top:16px; } .card-buy-modal .cbm-btn{ flex:1; padding:11px 0; border-radius:7px; cursor:pointer; font-size:12px; font-weight:800; letter-spacing:1px; transition:filter .15s, transform .1s; user-select:none; } .card-buy-modal .cbm-btn:active{ transform:translateY(1px); } .card-buy-modal .cbm-btn.cancel{ background:rgba(255,255,255,.06); color:#c2c8cf; border:1px solid rgba(255,255,255,.12); } .card-buy-modal .cbm-btn.cancel:hover{ background:rgba(255,255,255,.1); } .card-buy-modal .cbm-btn.yes{ background:linear-gradient(180deg,#f4b34c,#e08f25); color:#1c1304; border:1px solid #f0a83c; box-shadow:0 4px 14px rgba(240,168,60,.3); } .card-buy-modal .cbm-btn.yes:hover{ filter:brightness(1.08); } .card-buy-modal .cbm-btn.busy{ pointer-events:none; } .card-buy-modal.working .cbm-ops{ opacity:.4; } /* freeze the live price hint mid-purchase */ .card-buy-modal .cbm-spin{ display:inline-block; width:12px; height:12px; margin-right:8px; vertical-align:-2px; border:2px solid rgba(28,19,4,.35); border-top-color:#1c1304; border-radius:50%; animation:cbmSpin .7s linear infinite; } @keyframes cbmSpin{ to{ transform:rotate(360deg); } } /* animated dots after the status line so it never looks frozen */ .card-buy-modal.working .cbm-msg::after{ content:''; animation:cbmDots 1.2s steps(4,end) infinite; } @keyframes cbmDots{ 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} 100%{content:''} } #menu-overlay .lb-card{ background:rgba(11,13,17,.86); border:1px solid rgba(255,255,255,.08); border-radius:6px; margin-bottom:18px; } #menu-overlay .lb-card-h{ padding:13px 18px; color:#f0a83c; font-weight:800; font-size:13px; letter-spacing:2px; border-bottom:1px solid rgba(255,255,255,.07); } /* left column */ #menu-overlay .lb-left{ position:absolute; left:46px; top:200px; width:300px; z-index:3; max-height:calc(100vh - 230px); overflow:auto; } #menu-overlay .lb-match .lb-mode{ padding:12px 18px 10px; font-weight:800; font-size:17px; letter-spacing:1px; color:#fff; } #menu-overlay .lb-map{ display:block; width:calc(100% - 36px); margin:0 18px; border-radius:5px; } #menu-overlay .lb-stats2{ display:flex; padding:14px 18px; gap:18px; } #menu-overlay .lb-stats2 div{ display:flex; flex-direction:column; gap:4px; } #menu-overlay .lb-stats2 span{ color:#7d838b; font-size:10px; font-weight:700; letter-spacing:1px; } #menu-overlay .lb-stats2 b{ color:#fff; font-size:15px; } #menu-overlay .lb-settings{ display:flex; justify-content:space-between; padding:0 18px 16px; color:#9aa0a8; font-size:12px; font-weight:600; } #menu-overlay .lb-settings b{ color:#f0a83c; } #menu-overlay .lb-barracks{ position:relative; height:78px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding-left:20px; cursor:pointer; background:linear-gradient(90deg, rgba(11,13,17,.9), rgba(11,13,17,.4)), url('intro-bg2.png') right center/cover; } #menu-overlay .lb-barracks-t{ font-weight:800; letter-spacing:2px; color:#cfd3d8; font-size:18px; } #menu-overlay .lb-barracks-s{ color:#f0a83c; font-weight:700; letter-spacing:2px; font-size:12px; } /* center column */ #menu-overlay .lb-center{ position:absolute; left:50%; transform:translateX(-50%); top:70px; width:600px; max-width:46vw; z-index:3; } #menu-overlay .lb-waiting{ text-align:center; color:#cfd3d8; font-weight:800; font-size:22px; letter-spacing:3px; } #menu-overlay .lb-count{ text-align:center; color:#9aa0a8; font-weight:700; font-size:14px; letter-spacing:1px; margin:6px 0 22px; } #menu-overlay .lb-count b{ color:#f0a83c; } #menu-overlay .lb-team{ margin-bottom:18px; border:1px solid rgba(255,255,255,.07); border-radius:6px; background:rgba(11,13,17,.78); overflow:hidden; } #menu-overlay .lb-team-h{ display:flex; justify-content:space-between; align-items:center; padding:13px 18px; border-bottom:1px solid rgba(255,255,255,.06); } #menu-overlay .lb-team-name{ font-weight:800; font-size:17px; letter-spacing:2px; color:#4a9eff; } #menu-overlay.ffa #lb-team-1 .lb-team-name, #menu-overlay.ffa #lb-team-1 .lb-team-ready{ color:#f0a83c; } #menu-overlay .lb-team.recon .lb-team-name{ color:#f0a83c; } #menu-overlay .lb-team-ready{ font-weight:700; font-size:13px; letter-spacing:1px; color:#4a9eff; } #menu-overlay .lb-team.recon .lb-team-ready{ color:#f0a83c; } #menu-overlay .lb-cols{ display:grid; grid-template-columns:90px 1fr 130px; padding:8px 18px; color:#6b7178; font-size:10px; font-weight:700; letter-spacing:2px; } #menu-overlay .lb-row{ display:grid; grid-template-columns:90px 1fr 130px; align-items:center; padding:11px 18px; border-top:1px solid rgba(255,255,255,.04); } #menu-overlay .lb-row.you{ border:1px solid #f0a83c; border-radius:4px; margin:2px 8px; background:rgba(240,168,60,.06); } #menu-overlay .lb-lvl{ display:flex; align-items:center; gap:8px; color:#fff; font-weight:700; } #menu-overlay .lb-lvl .chev{ color:#9aa0a8; font-size:13px; letter-spacing:-2px; } #menu-overlay .lb-pname{ font-weight:700; color:#e8eaed; } #menu-overlay .lb-you{ background:#f0a83c; color:#1c1304; font-size:10px; font-weight:800; padding:2px 7px; border-radius:3px; margin-left:8px; letter-spacing:1px; } #menu-overlay .lb-status{ text-align:right; font-weight:700; font-size:13px; letter-spacing:1px; } #menu-overlay .lb-status.ready{ color:#5fcf6a; } #menu-overlay .lb-status.notready{ color:#8b9098; } #menu-overlay .lb-team.recon .lb-status.notready{ color:#e0683a; } /* right column */ #menu-overlay .lb-right{ position:absolute; right:46px; top:340px; width:300px; z-index:3; } #menu-overlay .lb-loadout{ padding:16px 18px; } #menu-overlay .lb-lo-class{ font-weight:800; font-size:16px; letter-spacing:1px; color:#fff; } #menu-overlay .lb-lo-gun{ display:block; width:80%; margin:14px auto; } #menu-overlay .lb-lo-name{ display:flex; justify-content:space-between; color:#9aa0a8; font-size:12px; font-weight:600; letter-spacing:1px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); } #menu-overlay .lb-chals{ padding:8px 18px 4px; } #menu-overlay .lb-chal{ margin-bottom:14px; } #menu-overlay .lb-chal-h{ display:flex; align-items:center; gap:8px; margin-bottom:6px; } #menu-overlay .lb-chal-name{ flex:1; color:#cdd2d8; font-size:12px; font-weight:700; letter-spacing:1px; } #menu-overlay .lb-chal-p{ color:#9aa0a8; font-size:12px; font-weight:700; } #menu-overlay .lb-chal-xp{ background:#f0a83c; color:#1c1304; font-size:9px; font-weight:800; padding:2px 6px; border-radius:3px; letter-spacing:1px; } #menu-overlay .lb-chal-bar{ height:4px; border-radius:2px; background:rgba(255,255,255,.1); overflow:hidden; } #menu-overlay .lb-chal-fill{ height:100%; background:linear-gradient(90deg,#e08f25,#f4b34c); } #menu-overlay .lb-viewall{ padding:12px 18px; border-top:1px solid rgba(255,255,255,.06); color:#9aa0a8; font-size:11px; font-weight:700; letter-spacing:1px; display:flex; justify-content:space-between; cursor:pointer; } /* bottom actions */ #menu-overlay .lb-actions-l{ position:absolute; left:46px; bottom:54px; display:flex; gap:0; z-index:3; } #menu-overlay .lb-leave{ padding:14px 30px; cursor:pointer; font-weight:700; letter-spacing:2px; color:#e8eaed; background:rgba(12,14,18,.9); border:1px solid rgba(255,255,255,.15); } #menu-overlay .lb-spec{ padding:14px 30px; cursor:pointer; font-weight:700; letter-spacing:2px; color:#aab0b8; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-left:0; } #menu-overlay .lb-leave:hover,#menu-overlay .lb-spec:hover{ color:#f0a83c; } #menu-overlay .lb-start{ padding:14px 30px; cursor:pointer; font-weight:800; letter-spacing:2px; color:#0c0e12; background:#f0a83c; border:1px solid #f0a83c; border-left:0; } #menu-overlay .lb-start:hover{ background:#ffbe54; } #menu-overlay .lb-confirm{ display:none; position:absolute; inset:0; z-index:20; background:rgba(6,8,11,.72); backdrop-filter:blur(3px); align-items:center; justify-content:center; } #menu-overlay .lb-confirm.on{ display:flex; animation:lbFade .18s ease; } @keyframes lbFade{ from{ opacity:0 } to{ opacity:1 } } #menu-overlay .lb-confirm-box{ width:440px; max-width:90%; background:#0d1014; border:1px solid rgba(240,168,60,.35); padding:34px 36px 30px; box-shadow:0 24px 70px rgba(0,0,0,.6); } #menu-overlay .lb-confirm-t{ font-weight:800; font-size:24px; letter-spacing:3px; color:#f0a83c; } #menu-overlay .lb-confirm-s{ margin-top:12px; color:#aab0b8; font-size:14px; line-height:1.5; } #menu-overlay .lb-confirm-btns{ margin-top:26px; display:flex; gap:0; } #menu-overlay .lb-confirm-cancel,#menu-overlay .lb-confirm-ok{ flex:1; text-align:center; padding:14px 0; cursor:pointer; font-weight:800; letter-spacing:2px; } #menu-overlay .lb-confirm-cancel{ color:#e8eaed; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); } #menu-overlay .lb-confirm-cancel:hover{ color:#f0a83c; } #menu-overlay .lb-confirm-ok{ color:#0c0e12; background:#f0a83c; border:1px solid #f0a83c; border-left:0; } #menu-overlay .lb-confirm-ok:hover{ background:#ff7a59; border-color:#ff7a59; } #menu-overlay .lb-ready{ position:absolute; right:46px; bottom:46px; width:330px; padding:18px 24px; text-align:center; cursor:pointer; z-index:3; background:linear-gradient(180deg, rgba(20,16,8,.85), rgba(12,10,6,.9)); border:2px solid #f0a83c; clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); box-shadow:0 0 26px rgba(240,168,60,.3), inset 0 0 24px rgba(240,168,60,.08); } #menu-overlay .lb-ready:hover{ box-shadow:0 0 38px rgba(240,168,60,.5); } #menu-overlay .lb-ready.on{ border-color:#5fcf6a; box-shadow:0 0 30px rgba(95,207,106,.4); } #menu-overlay .lb-ready-t{ color:#ffce7a; font-weight:800; font-size:22px; letter-spacing:3px; } #menu-overlay .lb-ready.on .lb-ready-t{ color:#8fe89a; } #menu-overlay .lb-ready-s{ color:#9aa0a8; font-size:11px; font-weight:600; letter-spacing:1px; margin-top:5px; } /* ============ MATCH LOADER (deploying to ) ============ */ #match-loader{ position:fixed; inset:0; z-index:60; display:none; opacity:0; transition:opacity .5s ease; background:#06070a; font-family:'Rajdhani',system-ui,sans-serif; color:#e8eaed; } #match-loader.on{ display:block; opacity:1; } #match-loader .ml-bg{ position:absolute; inset:0; background-size:cover; background-position:center; background-color:#0a0c10; filter:blur(2px) brightness(.5) saturate(1.1); transform:scale(1.06); } #match-loader .ml-scrim{ position:absolute; inset:0; background:radial-gradient(ellipse at 50% 45%, rgba(8,9,12,.30), rgba(6,7,10,.93) 80%); } #match-loader .ml-grid{ position:absolute; inset:0; opacity:.12; background-image:linear-gradient(rgba(240,168,60,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(240,168,60,.4) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 25%, transparent 72%); mask-image:radial-gradient(ellipse at 50% 50%, #000 25%, transparent 72%); } #match-loader .ml-inner{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } #match-loader .ml-logo{ height:60px; margin-bottom:30px; filter:drop-shadow(0 4px 18px rgba(0,0,0,.7)); } #match-loader .ml-deploy{ color:#e7a13e; font-weight:700; letter-spacing:7px; font-size:14px; margin-bottom:10px; opacity:.92; } #match-loader .ml-map{ font-weight:800; letter-spacing:6px; font-size:52px; color:#fff; text-align:center; padding:0 20px; text-shadow:0 4px 30px rgba(240,168,60,.4); } #match-loader .ml-bar{ width:340px; max-width:70vw; height:5px; margin:36px 0 14px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden; } #match-loader .ml-bar-fill{ height:100%; width:30%; background:linear-gradient(90deg,#e08f25,#f4b34c); border-radius:3px; animation:mlbar 1.4s ease-in-out infinite; } @keyframes mlbar{ 0%{ margin-left:-30% } 60%{ margin-left:100% } 100%{ margin-left:100% } } #match-loader .ml-status{ color:#9097a0; font-weight:600; letter-spacing:3px; font-size:12px; } /* ============ IN-GAME HUD (custom OPERATOR) ============ */ #game-hud{ position:fixed; inset:0; z-index:45; display:none; pointer-events:none; font-family:'Rajdhani',system-ui,sans-serif; color:#e8eaed; } #game-hud.on{ display:block; } /* compass */ #game-hud .hud-compass{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:680px; max-width:62vw; height:24px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); } #game-hud .hud-compass-strip{ position:absolute; top:2px; left:0; height:18px; } #game-hud .hud-compass-strip b{ position:absolute; transform:translateX(-50%); font-size:13px; font-weight:600; color:#aeb4bc; letter-spacing:.5px; } #game-hud .hud-compass-strip b.card{ color:#fff; font-weight:700; font-size:14px; } #game-hud .hud-compass-strip b.north{ color:#f0a83c; } #game-hud .hud-compass-tick{ position:absolute; top:23px; left:50%; transform:translateX(-50%); width:2px; height:8px; background:#f0a83c; } /* map / mode */ #game-hud .hud-mapinfo{ position:absolute; top:16px; left:24px; } #game-hud .hud-map{ font-weight:800; font-size:17px; letter-spacing:3px; color:#fff; } #game-hud .hud-mode{ font-weight:600; font-size:12px; letter-spacing:2px; color:#aeb4bc; border-left:3px solid #f0a83c; padding-left:7px; margin-top:4px; } /* minimap */ #game-hud .hud-minimap{ position:absolute; top:70px; left:24px; width:240px; height:240px; border:1px solid rgba(255,255,255,.14); border-radius:6px; overflow:hidden; background:#0a0d12; box-shadow:0 8px 30px rgba(0,0,0,.5); } #game-hud .hud-minimap canvas{ width:100%; height:100%; display:block; } /* scoreboard widget */ #game-hud .hud-score{ position:absolute; top:84px; left:50%; transform:translateX(-50%); display:flex; align-items:stretch; height:60px; filter:drop-shadow(0 8px 22px rgba(0,0,0,.5)); } #game-hud .hud-team{ display:flex; align-items:center; gap:11px; padding:0 22px; background:rgba(10,14,20,.86); } #game-hud .hud-team.t1{ border-top:2px solid #2f6fb0; clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px)); padding-left:26px; } #game-hud .hud-team.t2{ border-top:2px solid #b07f2f; clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%); padding-right:26px; } #game-hud .hud-emblem{ width:30px; height:30px; flex:0 0 auto; } #game-hud .hud-team-txt{ line-height:1; } #game-hud .hud-team-txt.rt{ text-align:right; } #game-hud .hud-team-name{ font-size:13px; font-weight:700; letter-spacing:2px; } #game-hud .hud-team.t1 .hud-team-name{ color:#5fb0ff; } #game-hud .hud-team.t2 .hud-team-name{ color:#cdd2d8; } #game-hud .hud-team-score{ font-size:30px; font-weight:800; margin-top:2px; } #game-hud .hud-team.t1 .hud-team-score{ color:#5fb0ff; } #game-hud .hud-team.t2 .hud-team-score{ color:#fff; } #game-hud .hud-mid{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 18px; background:rgba(6,9,13,.92); min-width:92px; } #game-hud .hud-timer{ font-size:22px; font-weight:800; color:#fff; letter-spacing:1px; } #game-hud .hud-kills{ font-size:10px; font-weight:600; letter-spacing:1.5px; color:#8b9098; margin-top:2px; } /* live $OPR earned this match (top-center, under the score widget) */ #game-hud .hud-opr{ position:absolute; top:154px; left:50%; transform:translateX(-50%); z-index:2; text-align:center; padding:6px 20px; border-radius:8px; background:linear-gradient(135deg,rgba(240,168,60,.18),rgba(12,10,6,.85)); border:1px solid rgba(240,168,60,.4); box-shadow:0 6px 18px rgba(0,0,0,.4); } #game-hud .hud-opr-bal{ font-weight:800; font-size:20px; color:#fff; letter-spacing:1px; } #game-hud .hud-opr-sym{ font-size:12px; color:#f0a83c; font-weight:800; } #game-hud .hud-opr-lbl{ font-size:8px; font-weight:700; letter-spacing:2px; color:#8b9098; margin-top:1px; } #game-hud .hud-opr.flash{ animation:opr-flash .55s ease; } @keyframes opr-flash{ 0%{ transform:translateX(-50%) scale(1) } 38%{ transform:translateX(-50%) scale(1.14); box-shadow:0 0 24px rgba(240,168,60,.65) } 100%{ transform:translateX(-50%) scale(1) } } /* FFA: no teams — just the timer/kills in the middle */ #game-hud.ffa .hud-score .hud-team{ display:none; } #game-hud.ffa .hud-score .hud-mid{ border-radius:6px; } /* top-3 leaderboard under the minimap (live) */ #game-hud .hud-lead{ position:absolute; top:318px; left:24px; width:240px; display:flex; flex-direction:column; gap:3px; } #game-hud .hl-row{ display:flex; align-items:center; gap:9px; padding:6px 10px; background:rgba(10,14,20,.78); border-left:2px solid rgba(255,255,255,.12); border-radius:3px; } #game-hud .hl-row.me{ border-left-color:#f0a83c; background:rgba(240,168,60,.14); } #game-hud .hl-rank{ font-size:11px; font-weight:800; color:#f0a83c; width:12px; } #game-hud .hl-name{ flex:1; font-size:12px; font-weight:700; letter-spacing:.5px; color:#e8eaed; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #game-hud .hl-row.me .hl-name{ color:#ffce7a; } #game-hud .hl-k{ font-size:13px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; } /* health */ #game-hud .hud-health{ position:absolute; left:30px; bottom:34px; display:flex; align-items:center; gap:15px; } #game-hud .hud-badge{ width:54px; height:60px; display:flex; align-items:center; justify-content:center; background:rgba(10,14,20,.8); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); } #game-hud .hud-badge svg{ width:28px; height:28px; } #game-hud .hud-hp{ font-size:40px; font-weight:800; color:#fff; line-height:.85; } #game-hud .hud-hp-bar{ width:232px; height:9px; margin-top:8px; display:flex; gap:3px; } #game-hud .hud-hp-bar i{ flex:1; background:#fff; opacity:.92; } #game-hud .hud-hp-bar i.off{ background:rgba(255,255,255,.16); } #game-hud .hud-name-row{ display:flex; align-items:center; gap:7px; margin-top:9px; } #game-hud .hud-star{ color:#f0a83c; font-size:12px; } #game-hud .hud-pname{ font-size:13px; font-weight:700; letter-spacing:2px; color:#dfe3e8; } #game-hud .hud-you{ font-size:10px; font-weight:700; letter-spacing:1px; color:#fff; background:#2f6fb0; padding:1px 6px; border-radius:2px; } /* weapon */ #game-hud .hud-weapon{ position:absolute; right:30px; bottom:34px; display:flex; align-items:center; gap:16px; padding:13px 20px; background:rgba(10,14,20,.82); border:1px solid rgba(255,255,255,.08); border-radius:6px; box-shadow:0 8px 26px rgba(0,0,0,.45); } #game-hud .hud-wicon{ width:92px; height:42px; object-fit:contain; opacity:.95; } #game-hud .hud-ammo{ display:flex; flex-direction:column; align-items:center; line-height:.95; } #game-hud .hud-clip{ font-size:36px; font-weight:800; color:#fff; } #game-hud .hud-reserve{ font-size:15px; font-weight:600; color:#8b9098; margin-top:2px; } #game-hud .hud-fire{ font-size:12px; font-weight:700; letter-spacing:2px; color:#aeb4bc; border-left:1px solid rgba(255,255,255,.16); padding-left:16px; align-self:stretch; display:flex; align-items:center; } /* ============ IN-GAME SCOREBOARD (Tab) ============ */ #game-scoreboard{ position:fixed; inset:0; z-index:48; display:none; pointer-events:none; font-family:'Rajdhani',system-ui,sans-serif; background:rgba(6,8,11,.80); } #game-scoreboard.on{ display:flex; align-items:center; justify-content:center; } .gsb-card{ width:1040px; max-width:92vw; background:rgba(12,15,20,.97); border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 80px rgba(0,0,0,.6); } .gsb-head{ display:flex; align-items:center; gap:18px; padding:16px 26px; border-bottom:1px solid rgba(255,255,255,.08); } .gsb-logo{ height:32px; } .gsb-meta{ flex:1; } .gsb-map{ font-weight:800; font-size:20px; letter-spacing:3px; color:#fff; } .gsb-mode{ font-weight:600; font-size:12px; letter-spacing:2px; color:#e7a13e; margin-top:2px; } .gsb-timer{ font-weight:800; font-size:26px; letter-spacing:1px; color:#fff; } .gsb-teams{ display:flex; } .gsb-team{ flex:1; padding:16px 22px 22px; } .gsb-team.t1{ border-right:1px solid rgba(255,255,255,.06); } .gsb-team-h{ display:flex; justify-content:space-between; align-items:baseline; padding-bottom:9px; margin-bottom:4px; border-bottom:2px solid; } .gsb-team.t1 .gsb-team-h{ border-color:#2f6fb0; } .gsb-team.t2 .gsb-team-h{ border-color:#b07f2f; } .gsb-tn{ font-weight:800; font-size:17px; letter-spacing:3px; } .gsb-team.t1 .gsb-tn{ color:#5fb0ff; } .gsb-team.t2 .gsb-tn{ color:#f0a83c; } .gsb-ts{ font-weight:800; font-size:24px; color:#fff; } .gsb-cols{ display:grid; grid-template-columns:1fr 44px 44px 72px; gap:6px; padding:5px 10px; font-size:10px; font-weight:700; letter-spacing:1.5px; color:#7d838b; } .gsb-cols span:not(:first-child){ text-align:center; } .gsb-row{ display:grid; grid-template-columns:1fr 44px 44px 72px; gap:6px; padding:9px 10px; align-items:center; border-bottom:1px solid rgba(255,255,255,.04); } .gsb-row span:not(.gsb-name){ text-align:center; font-weight:700; color:#cdd2d8; font-size:14px; } .gsb-name{ font-weight:700; font-size:14px; letter-spacing:1px; color:#e8eaed; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gsb-bot{ font-size:8.5px; font-weight:800; letter-spacing:1px; color:#8b9098; background:rgba(255,255,255,.08); padding:1px 5px; border-radius:3px; margin-left:7px; vertical-align:middle; } .gsb-score{ color:#f0a83c !important; } .gsb-row.me{ background:rgba(240,168,60,.1); box-shadow:inset 3px 0 0 #f0a83c; } .gsb-row.me .gsb-name{ color:#ffce7a; } .gsb-empty{ text-align:center; color:#7d838b; font-size:13px; padding:20px; letter-spacing:1px; } /* ---- Free For All: single full-width ranked board ---- */ .gsb-teams.ffa{ display:block; } .gsb-teams.ffa .gsb-team.t2{ display:none !important; } .gsb-teams.ffa .gsb-team.t1{ border-right:none; } .gsb-teams.ffa .gsb-team.t1 .gsb-team-h{ border-color:#f0a83c; } .gsb-teams.ffa .gsb-team.t1 .gsb-tn{ color:#f0a83c; } .gsb-teams.ffa .gsb-ts{ font-size:13px; font-weight:700; letter-spacing:1.5px; color:#7d838b; } .gsb-teams.ffa .gsb-cols, .gsb-teams.ffa .gsb-row{ grid-template-columns:36px 1fr 44px 44px 72px; } .gsb-rank{ text-align:center; font-weight:800; font-size:13px; color:#7d838b; } .gsb-teams.ffa .gsb-row.lead{ background:rgba(240,168,60,.07); } .gsb-teams.ffa .gsb-row.lead .gsb-rank{ color:#f0a83c; } .gsb-teams.ffa .gsb-row.lead .gsb-name{ color:#ffce7a; } /* ============ PAUSE MENU (ESC) ============ */ /* ---------- connection lost / reconnect banner ---------- */ #conn-banner{ position:fixed; top:0; left:50%; transform:translateX(-50%) translateY(-120%); z-index:120; display:flex; align-items:center; gap:12px; padding:11px 20px; background:rgba(24,8,8,.97); border:1px solid #d9534f; border-top:none; border-radius:0 0 8px 8px; box-shadow:0 14px 40px rgba(0,0,0,.6); font-family:'Rajdhani',system-ui,sans-serif; color:#ffd9d6; font-weight:700; letter-spacing:1.5px; font-size:13px; transition:transform .35s cubic-bezier(.2,.9,.3,1.2); } #conn-banner.on{ transform:translateX(-50%) translateY(0); } #conn-banner.ok{ background:rgba(8,24,10,.97); border-color:#5fcf6a; color:#d6f5da; } #conn-banner .cb-dot{ width:9px; height:9px; border-radius:50%; background:#ff5a4d; box-shadow:0 0 8px #ff5a4d; animation:cbpulse 1s infinite; } #conn-banner.ok .cb-dot{ background:#5fcf6a; box-shadow:0 0 8px #5fcf6a; animation:none; } @keyframes cbpulse{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } } #conn-banner .cb-retry{ margin-left:6px; padding:5px 14px; cursor:pointer; border-radius:4px; background:#d9534f; color:#1a0606; font-weight:800; letter-spacing:1px; font-size:12px; } #conn-banner .cb-retry:hover{ background:#ff6b66; } #conn-banner.ok .cb-retry{ display:none; } /* in-game LOADOUT (opened from the ESC menu): reuse the barracks editor over the game. All .brk* styles are #menu-overlay-scoped, so we keep the panel in place and just force the overlay visible, hide the home chrome, and float it above the pause. */ #menu-overlay.ig-loadout{ display:block !important; opacity:1 !important; pointer-events:auto; z-index:60; background:rgba(6,8,11,.92); } #menu-overlay.ig-loadout > *:not(#panel-barracks){ display:none !important; } #menu-overlay.ig-loadout #panel-barracks{ display:flex; left:40px; right:40px; top:40px; bottom:40px; } #menu-overlay.ig-loadout #panel-barracks .panel-head .t::after{ content:' \2014 DEPLOYS ON NEXT RESPAWN'; color:#7d838b; font-size:11px; letter-spacing:1.5px; font-weight:600; } /* ---------- in-game RANK UP banner ---------- */ #game-rankup{ position:fixed; left:50%; top:20%; transform:translateX(-50%); z-index:58; display:none; pointer-events:none; font-family:'Rajdhani',system-ui,sans-serif; text-align:center; } #game-rankup.on{ display:block; animation:ru-pop .5s cubic-bezier(.2,.9,.3,1.3); } #game-rankup.out{ animation:ru-out .5s ease forwards; } @keyframes ru-pop{ 0%{ opacity:0; transform:translateX(-50%) translateY(14px) scale(.92) } 100%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1) } } @keyframes ru-out{ to{ opacity:0; transform:translateX(-50%) translateY(-12px) } } #game-rankup .ru-inner{ position:relative; padding:18px 46px; background:linear-gradient(180deg,rgba(20,16,8,.96),rgba(12,10,6,.96)); border:1px solid rgba(240,168,60,.5); border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.6), 0 0 40px rgba(240,168,60,.2); } #game-rankup .ru-glow{ position:absolute; inset:-1px; border-radius:12px; pointer-events:none; background:radial-gradient(ellipse at 50% 0%, rgba(240,168,60,.35), transparent 70%); } #game-rankup .ru-label{ position:relative; font-weight:800; font-size:14px; letter-spacing:8px; color:#f0a83c; } #game-rankup .ru-lvl{ position:relative; font-weight:800; font-size:40px; letter-spacing:2px; color:#fff; margin-top:4px; text-shadow:0 3px 16px rgba(240,168,60,.4); } #game-rankup .ru-lvl span{ color:#f0a83c; } #game-rankup .ru-rank{ position:relative; font-weight:700; font-size:16px; letter-spacing:4px; color:#e8eaed; margin-top:2px; } /* ---------- OPERATOR death screen (killcam) ---------- */ #game-killcam{ position:fixed; inset:0; z-index:55; display:none; pointer-events:none; font-family:'Rajdhani',system-ui,sans-serif; background:radial-gradient(ellipse at 50% 42%, rgba(40,6,6,.55), rgba(4,5,8,.82) 75%); } #game-killcam.on{ display:flex; align-items:center; justify-content:center; animation:kc-in .25s ease; } @keyframes kc-in{ from{ opacity:0 } to{ opacity:1 } } #game-killcam .kc-inner{ text-align:center; transform:translateY(-4%); } #game-killcam .kc-elim{ font-weight:800; font-size:44px; letter-spacing:7px; color:#ff4d42; text-shadow:0 0 30px rgba(255,77,66,.5), 0 4px 18px rgba(0,0,0,.7); } /* killer's player card (their calling card = background, emblem + name + rank) */ #game-killcam .kc-killer-card{ position:relative; width:380px; max-width:80vw; margin:18px auto 0; padding:16px 20px; display:flex; align-items:center; gap:16px; border-radius:11px; overflow:hidden; background-size:cover !important; background-position:center !important; border:1px solid rgba(255,255,255,.18); box-shadow:0 16px 40px rgba(0,0,0,.6); } #game-killcam .kc-kc-scrim{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,7,10,.78),rgba(6,7,10,.4)); } #game-killcam .kc-emblem{ position:relative; z-index:2; width:62px; height:62px; flex:0 0 auto; border-radius:9px; overflow:hidden; background:rgba(6,7,10,.5); border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; } #game-killcam .kc-emblem img{ width:100%; height:100%; object-fit:cover; } #game-killcam .kc-emblem .emb-default{ color:#6a7078; } #game-killcam .kc-emblem .emb-default svg{ width:52%; height:52%; } #game-killcam .kc-kc-meta{ position:relative; z-index:2; text-align:left; min-width:0; } #game-killcam .kc-killer{ font-weight:800; font-size:24px; letter-spacing:2px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #game-killcam .kc-killer-rank{ font-size:12px; font-weight:700; letter-spacing:2px; color:#f0a83c; margin-top:3px; text-shadow:0 1px 4px rgba(0,0,0,.8); } #game-killcam .kc-respawn{ margin-top:24px; font-size:13px; font-weight:700; letter-spacing:3px; color:#f0a83c; } #game-killcam .kc-respawn span{ font-size:16px; } #game-killcam .kc-bar{ width:220px; height:5px; margin:12px auto 0; background:rgba(255,255,255,.12); border-radius:4px; overflow:hidden; } #game-killcam .kc-bar-fill{ height:100%; width:0%; background:linear-gradient(90deg,#f4b34c,#e08f25); transition:width .25s linear; } #game-pause{ position:fixed; inset:0; z-index:50; display:none; pointer-events:none; font-family:'Rajdhani',system-ui,sans-serif; color:#e8eaed; background:radial-gradient(ellipse at 50% 40%, rgba(8,10,14,.78), rgba(5,6,9,.92) 80%); } #game-pause.on{ display:flex; align-items:center; justify-content:center; pointer-events:auto; } #game-pause .gp-card{ width:420px; max-width:90vw; padding:36px 38px 30px; text-align:center; background:rgba(12,15,20,.96); border:1px solid rgba(240,168,60,.28); box-shadow:0 30px 80px rgba(0,0,0,.65), inset 0 0 40px rgba(240,168,60,.04); } #game-pause .gp-logo{ height:46px; margin-bottom:14px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.6)); } #game-pause .gp-title{ font-weight:800; font-size:24px; letter-spacing:5px; color:#fff; } #game-pause .gp-sub{ font-weight:600; font-size:12px; letter-spacing:2px; color:#e7a13e; margin-top:6px; } #game-pause .gp-btns{ display:flex; flex-direction:column; gap:9px; margin:26px 0 16px; } #game-pause .gp-btn{ padding:14px; cursor:pointer; font-weight:700; font-size:15px; letter-spacing:3px; color:#cdd2d8; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); transition:all .12s ease; } #game-pause .gp-btn:hover{ border-color:#f0a83c; color:#fff; background:rgba(240,168,60,.1); } #game-pause .gp-btn.primary{ background:linear-gradient(180deg,#f4b34c,#e08f25); border:0; color:#1c1304; } #game-pause .gp-btn.primary:hover{ background:linear-gradient(180deg,#ffc769,#f0a83c); color:#1c1304; } #game-pause .gp-btn.danger{ color:#e89a9a; } #game-pause .gp-btn.danger:hover{ border-color:#d9534f; color:#fff; background:rgba(217,83,79,.14); } #game-pause .gp-spec{ font-size:11px; font-weight:600; letter-spacing:2px; color:#7d838b; } /* ---- pause panel (tabbed) ---- */ #game-pause .gp-panel{ width:1080px; max-width:94vw; max-height:88vh; display:flex; flex-direction:column; background:rgba(12,15,20,.97); border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 80px rgba(0,0,0,.65); } #game-pause .gp-top{ display:flex; align-items:center; gap:18px; padding:16px 26px; border-bottom:1px solid rgba(255,255,255,.08); } #game-pause .gp-logo{ height:32px; margin:0; filter:none; } #game-pause .gp-meta{ flex:1; } #game-pause .gp-map{ font-weight:800; font-size:19px; letter-spacing:3px; color:#fff; } #game-pause .gp-mode{ font-weight:600; font-size:11px; letter-spacing:2px; color:#e7a13e; margin-top:2px; } #game-pause .gp-timer{ font-weight:800; font-size:24px; color:#fff; letter-spacing:1px; } #game-pause .gp-resume{ cursor:pointer; padding:11px 20px; font-weight:800; font-size:12px; letter-spacing:2px; color:#0c0e12; background:linear-gradient(180deg,#f4b34c,#e08f25); } #game-pause .gp-resume:hover{ background:linear-gradient(180deg,#ffc769,#f0a83c); } #game-pause .gp-resume span{ margin-left:6px; opacity:.8; } #game-pause .gp-tabs{ display:flex; border-bottom:1px solid rgba(255,255,255,.08); } #game-pause .gp-tab{ padding:13px 30px; cursor:pointer; font-weight:700; font-size:13px; letter-spacing:2px; color:#8b9098; border-bottom:2px solid transparent; } #game-pause .gp-tab:hover{ color:#cdd2d8; } #game-pause .gp-tab.on{ color:#f0a83c; border-bottom-color:#f0a83c; background:rgba(240,168,60,.06); } #game-pause .gp-tab[data-t="leave"]{ margin-left:auto; color:#e89a9a; } #game-pause .gp-tab[data-t="leave"].on{ color:#ff6b66; border-bottom-color:#d9534f; background:rgba(217,83,79,.08); } #game-pause .gp-body{ overflow:auto; } #game-pause .gp-set{ max-width:580px; margin:0 auto; padding:24px 30px; } #game-pause .gp-set-row{ display:flex; align-items:center; gap:16px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.05); } #game-pause .gp-set-row label{ width:200px; font-weight:600; font-size:13px; letter-spacing:1px; color:#c7ccd2; } #game-pause .gp-set-row input[type=range]{ flex:1; accent-color:#f0a83c; height:4px; } #game-pause .gp-set-v{ width:48px; text-align:right; color:#f0a83c; font-weight:700; font-size:13px; } #game-pause .gp-sel{ flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:#e8eaed; padding:8px 10px; font-family:inherit; font-weight:600; } #game-pause .gp-leave{ max-width:440px; margin:0 auto; padding:44px 30px; text-align:center; } #game-pause .gp-leave-q{ font-weight:800; font-size:22px; letter-spacing:3px; color:#fff; } #game-pause .gp-leave-s{ color:#9aa0a8; font-size:13px; margin:10px 0 26px; } #game-pause .gp-leave-btns{ display:flex; gap:0; } #game-pause .gp-leave-btns .gp-btn{ flex:1; } #game-pause .gp-leave-or{ color:#7d838b; font-size:11px; letter-spacing:2px; margin:18px 0; } #game-pause .gp-btn.redeploy{ color:#ffce7a; border-color:rgba(240,168,60,.4); } #game-pause .gp-btn.redeploy:hover{ background:rgba(240,168,60,.12); color:#fff; border-color:#f0a83c; } #game-pause .tgl{ width:46px; height:24px; border-radius:13px; background:rgba(255,255,255,.12); position:relative; cursor:pointer; flex:0 0 auto; } #game-pause .tgl::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#c7ccd2; transition:.15s; } #game-pause .tgl.on{ background:rgba(240,168,60,.5); } #game-pause .tgl.on::after{ left:25px; background:#f0a83c; } #game-pause .gp-set-row .tgl{ margin-left:auto; } /* ===================== ADMIN PANEL + showdown join ===================== */ /* nav tab (amber, stands out as the owner-only tab) */ #menu-overlay .tab.tab-admin{ color:#f0a83c; } #menu-overlay .tab.tab-admin.active{ color:#0b0d10; background:#f0a83c; } /* showdown JOIN block in the home widget */ #menu-overlay .sd-join{ margin-top:12px; padding-top:11px; border-top:1px solid rgba(240,168,60,.25); } #menu-overlay .sd-meta{ font-size:10px; font-weight:700; letter-spacing:.6px; color:#aeb4bd; margin-bottom:8px; } #menu-overlay .sd-join-btn{ display:block; text-align:center; padding:9px 12px; border-radius:6px; cursor:pointer; font-size:12px; font-weight:800; letter-spacing:1.4px; color:#0b0d10; background:#f0a83c; box-shadow:0 6px 18px rgba(240,168,60,.35); transition:filter .15s, transform .1s; } #menu-overlay .sd-join-btn:hover{ filter:brightness(1.1); } #menu-overlay .sd-join-btn:active{ transform:translateY(1px); } #menu-overlay .sd-joined{ text-align:center; padding:9px 12px; border-radius:6px; font-size:12px; font-weight:800; letter-spacing:1.4px; color:#3ad17a; border:1px solid rgba(58,209,122,.5); background:rgba(58,209,122,.08); } /* admin panel head + sub-tabs */ #menu-overlay #panel-admin .panel-head{ display:flex; align-items:center; justify-content:space-between; } #menu-overlay .adm-tabs{ display:flex; gap:6px; } #menu-overlay .adm-tab{ padding:6px 14px; border-radius:5px; cursor:pointer; font-size:11px; font-weight:800; letter-spacing:1.4px; color:#9098a2; border:1px solid rgba(255,255,255,.08); } #menu-overlay .adm-tab.on{ color:#0b0d10; background:#f0a83c; border-color:#f0a83c; } #menu-overlay #adm-body{ flex:1; overflow-y:auto; padding:18px 22px; } #menu-overlay .adm-load{ color:#8b9098; font-size:13px; padding:20px 0; } #menu-overlay .adm-err{ color:#ff6a5a; font-size:12px; font-weight:700; margin-top:8px; min-height:14px; } #menu-overlay .adm-empty{ color:#7d838b; font-size:12px; text-align:center; padding:18px; } #menu-overlay .adm-hint{ font-size:11px; color:#c69a4a; background:rgba(240,168,60,.08); border:1px solid rgba(240,168,60,.25); border-radius:5px; padding:8px 11px; margin-top:10px; } #menu-overlay .adm-sub{ font-size:11px; font-weight:800; letter-spacing:1.6px; color:#f0a83c; margin:22px 0 10px; } /* key gate */ #menu-overlay .adm-gate{ max-width:360px; margin:6vh auto 0; text-align:center; } #menu-overlay .adm-gate-t{ font-size:18px; font-weight:800; letter-spacing:2px; color:#fff; } #menu-overlay .adm-gate-s{ font-size:12px; color:#9098a2; margin:8px 0 18px; line-height:1.5; } #menu-overlay .adm-gate .hinput{ width:100%; margin-bottom:12px; } #menu-overlay .adm-gate .opt-btn{ width:100%; } /* dashboard cards */ #menu-overlay .adm-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; } #menu-overlay .adm-card{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:7px; padding:14px 16px; } #menu-overlay .adm-card-v{ font-size:24px; font-weight:800; color:#fff; line-height:1; } #menu-overlay .adm-card-l{ font-size:9.5px; font-weight:700; letter-spacing:1.4px; color:#8b9098; margin-top:7px; } #menu-overlay .adm-card.pool{ border-color:rgba(240,168,60,.5); background:linear-gradient(135deg,rgba(240,168,60,.14),rgba(255,255,255,.02)); } #menu-overlay .adm-card.pool .adm-card-v{ color:#f0a83c; } #menu-overlay .adm-card.in .adm-card-v{ color:#3ad17a; } #menu-overlay .adm-card.out .adm-card-v{ color:#ff8a6a; } /* fee row */ #menu-overlay .adm-fee-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } #menu-overlay .adm-fee-row .hinput{ flex:1; min-width:90px; } #menu-overlay .adm-fee-row #adm-fee-note{ flex:2; } /* ledger table */ #menu-overlay .adm-tablewrap{ border:1px solid rgba(255,255,255,.07); border-radius:7px; overflow:hidden; } #menu-overlay .adm-table{ width:100%; border-collapse:collapse; font-size:12px; } #menu-overlay .adm-table th{ text-align:left; padding:9px 12px; font-size:9.5px; letter-spacing:1px; color:#8b9098; background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.07); } #menu-overlay .adm-table td{ padding:9px 12px; color:#cfd3d8; border-bottom:1px solid rgba(255,255,255,.04); } #menu-overlay .adm-table .adm-note{ color:#7d838b; font-size:11px; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #menu-overlay .adm-table td.k-fee_in,#menu-overlay .adm-table td.k-showdown_entry,#menu-overlay .adm-table td.k-wager_entry{ color:#3ad17a; font-weight:700; } #menu-overlay .adm-table td.k-showdown_payout,#menu-overlay .adm-table td.k-wager_payout,#menu-overlay .adm-table td.k-claim{ color:#ff8a6a; font-weight:700; } /* showdown list */ #menu-overlay .adm-new{ display:inline-block; margin-bottom:14px; } #menu-overlay .adm-list{ display:flex; flex-direction:column; gap:10px; } #menu-overlay .adm-sd{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:7px; padding:13px 15px; } #menu-overlay .adm-sd-top{ font-size:14px; color:#e8eaed; display:flex; align-items:center; gap:9px; } #menu-overlay .adm-sd-top b{ color:#fff; } #menu-overlay .adm-sd-meta{ font-size:11px; color:#8b9098; margin-top:6px; } #menu-overlay .adm-sd-win{ font-size:11px; color:#3ad17a; margin-top:6px; } #menu-overlay .adm-st{ font-size:9px; font-weight:800; letter-spacing:1px; padding:3px 7px; border-radius:4px; } #menu-overlay .adm-st-scheduled{ color:#f0a83c; background:rgba(240,168,60,.15); } #menu-overlay .adm-st-live{ color:#ff5a4d; background:rgba(255,90,77,.15); } #menu-overlay .adm-st-ended{ color:#7da4ff; background:rgba(125,164,255,.15); } #menu-overlay .adm-st-settled{ color:#3ad17a; background:rgba(58,209,122,.15); } #menu-overlay .adm-st-cancelled{ color:#9098a2; background:rgba(255,255,255,.06); } #menu-overlay .adm-sd-acts{ display:flex; gap:8px; margin-top:11px; } #menu-overlay .adm-mini{ font-size:10px; font-weight:800; letter-spacing:1px; color:#cfd3d8; padding:5px 11px; border-radius:4px; border:1px solid rgba(255,255,255,.14); cursor:pointer; } #menu-overlay .adm-mini:hover{ border-color:#f0a83c; color:#f0a83c; } #menu-overlay .adm-mini.danger:hover{ border-color:#ff6a5a; color:#ff6a5a; } /* form + settle inline */ #menu-overlay .adm-formbox,#menu-overlay .adm-sd-inline{ background:rgba(0,0,0,.25); border:1px solid rgba(240,168,60,.22); border-radius:7px; padding:14px 16px; margin:0 0 14px; } #menu-overlay .adm-sd-inline{ margin-top:11px; margin-bottom:0; } #menu-overlay .adm-form-t{ font-size:11px; font-weight:800; letter-spacing:1.6px; color:#f0a83c; margin-bottom:12px; } #menu-overlay .adm-fg{ display:flex; align-items:center; gap:10px; margin-bottom:10px; } #menu-overlay .adm-fg label{ width:110px; font-size:11px; font-weight:700; letter-spacing:.6px; color:#9098a2; } #menu-overlay .adm-fg .hinput,#menu-overlay .adm-fg .hsel{ flex:1; } #menu-overlay .adm-fg .hinput.tiny{ flex:0 0 60px; } #menu-overlay .adm-seg{ display:flex; gap:6px; } #menu-overlay .adm-segb{ padding:7px 16px; border-radius:5px; font-size:11px; font-weight:800; letter-spacing:1px; cursor:pointer; color:#9098a2; border:1px solid rgba(255,255,255,.12); } #menu-overlay .adm-segb.on{ color:#0b0d10; background:#f0a83c; border-color:#f0a83c; } #menu-overlay .adm-form-acts{ display:flex; gap:10px; margin-top:6px; } #menu-overlay .adm-win-row{ display:flex; gap:8px; margin-bottom:8px; } #menu-overlay .adm-win-row .hinput{ flex:1; } #menu-overlay .adm-win-row .hinput.tiny2{ flex:0 0 90px; } /* showdown widget hidden until an admin creates one */ #menu-overlay .showdown.sd-hidden{ display:none !important; } /* admin showdown form — 2-column grid like the host screen */ #menu-overlay .adm-formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 24px; align-content:start; } #menu-overlay .adm-formgrid .adm-fg{ margin-bottom:6px; } #menu-overlay .adm-fg.adm-wide{ grid-column:1 / -1; } #menu-overlay .adm-fg label{ flex:0 0 96px; width:96px; } #menu-overlay .adm-entry{ flex:1; display:flex; gap:10px; align-items:center; flex-wrap:wrap; } #menu-overlay .adm-entry .adm-paid{ display:flex; gap:8px; } #menu-overlay .adm-entry .adm-paid .hinput{ width:96px; } #menu-overlay .adm-fg.adm-mapwrap{ padding-top:2px; } #menu-overlay .adm-mapwrap .map-preview{ height:130px; } /* polished payout split — medal-coloured buckets + live total */ #menu-overlay .adm-split{ flex:1; display:flex; gap:9px; align-items:stretch; flex-wrap:wrap; } #menu-overlay .adm-split-cell{ flex:1 1 78px; min-width:74px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-top-width:3px; border-radius:7px; padding:8px 6px 9px; text-align:center; } #menu-overlay .adm-split-cell.gold{ border-top-color:#f0c040; } #menu-overlay .adm-split-cell.silver{ border-top-color:#cfd3d8; } #menu-overlay .adm-split-cell.bronze{ border-top-color:#cd8a4b; } #menu-overlay .adm-split-cell.rest{ border-top-color:#6b7178; } #menu-overlay .adm-split-place{ display:block; font-size:9.5px; font-weight:800; letter-spacing:1.2px; color:#aab0b8; margin-bottom:6px; } #menu-overlay .adm-split-in{ display:flex; align-items:baseline; justify-content:center; gap:2px; } #menu-overlay .adm-split-in input{ width:46px; background:transparent; border:none; color:#fff; font-size:22px; font-weight:800; text-align:right; -moz-appearance:textfield; padding:0; } #menu-overlay .adm-split-in input::-webkit-outer-spin-button,#menu-overlay .adm-split-in input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } #menu-overlay .adm-split-in input:focus{ outline:none; } #menu-overlay .adm-split-in i{ font-style:normal; font-size:14px; font-weight:700; color:#8b9098; } #menu-overlay .adm-split-total{ flex:0 0 auto; align-self:center; font-size:13px; font-weight:800; letter-spacing:.5px; padding:0 4px; } #menu-overlay .adm-split-total.ok{ color:#3ad17a; } #menu-overlay .adm-split-total.bad{ color:#f0a83c; } #menu-overlay .adm-fg.adm-splitnote{ display:block; font-size:10.5px; color:#7d838b; line-height:1.5; margin-top:2px; } #menu-overlay .adm-addrow{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.6px; color:#f0a83c; cursor:pointer; padding:5px 0 9px; } #menu-overlay .adm-addrow:hover{ text-decoration:underline; } /* in-game showdown prize panel (top-centre, under the live $OPR box) */ #game-hud #hud-showdown{ position:absolute; top:206px; left:50%; transform:translateX(-50%); z-index:2; text-align:center; padding:7px 18px 8px; border-radius:9px; min-width:184px; background:linear-gradient(135deg,rgba(240,168,60,.18),rgba(18,14,7,.84)); border:1px solid rgba(240,168,60,.55); box-shadow:0 10px 26px rgba(0,0,0,.5); backdrop-filter:blur(3px); } #game-hud .hud-sd-lbl{ font-size:8px; font-weight:800; letter-spacing:2.4px; color:#f0a83c; } #game-hud .hud-sd-pot{ font-size:23px; font-weight:800; color:#fff; line-height:1.05; margin-top:3px; text-shadow:0 2px 12px rgba(240,168,60,.35); } #game-hud .hud-sd-sol{ font-size:13px; color:#f0a83c; font-weight:700; } #game-hud .hud-sd-split{ font-size:8.5px; font-weight:700; letter-spacing:1px; color:#aeb4bc; margin-top:4px; } /* challenges locked / coming-soon card */ #menu-overlay .chal-locked{ text-align:center; padding:22px 16px 24px; opacity:.92; } #menu-overlay .chal-locked-ico{ font-size:26px; line-height:1; filter:grayscale(.2); } #menu-overlay .chal-locked-t{ margin-top:9px; font-size:13px; font-weight:800; letter-spacing:2.4px; color:#f0a83c; } #menu-overlay .chal-locked-s{ margin-top:5px; font-size:10.5px; font-weight:600; letter-spacing:.4px; color:#8b9098; } /* showdown prize-pool card in the lobby right column (above CHALLENGES) */ #menu-overlay .lb-sd-card{ text-align:center; margin-bottom:14px; border-color:rgba(240,168,60,.5) !important; background:linear-gradient(135deg,rgba(240,168,60,.16),rgba(20,16,8,.6)) !important; } #menu-overlay .lb-sd-card .lb-card-h{ color:#f0a83c; } #menu-overlay .lb-sd-pot{ font-size:26px; font-weight:800; color:#fff; line-height:1.05; margin-top:6px; text-shadow:0 2px 12px rgba(240,168,60,.35); } #menu-overlay .lb-sd-pot span{ color:#fff; } #menu-overlay .lb-sd-sol{ font-size:14px; color:#f0a83c; font-weight:700; font-style:normal; } #menu-overlay .lb-sd-split{ font-size:9px; font-weight:700; letter-spacing:1px; color:#aeb4bc; margin-top:7px; padding-bottom:2px; } /* per-kill $OPR HUD removed (prize pot is the in-game reward) */ #game-hud #hud-opr{ display:none !important; } /* scoreboard prize column (only when in a showdown match -> .gsb-teams.sd) */ .gsb-teams.sd .gsb-cols, .gsb-teams.sd .gsb-row{ grid-template-columns:1fr 40px 40px 58px 76px; } .gsb-teams.sd.ffa .gsb-cols, .gsb-teams.sd.ffa .gsb-row{ grid-template-columns:30px 1fr 40px 40px 56px 74px; } .gsb-pay{ color:#f0a83c !important; font-weight:800 !important; text-align:center; font-variant-numeric:tabular-nums; } /* match-over banner on the final scoreboard (auto-returns to menu, no resume button) */ #game-scoreboard #gsb-final{ display:none; } #game-scoreboard.final #gsb-final{ display:block; text-align:center; padding:13px 16px; margin:0 0 4px; background:linear-gradient(135deg,rgba(240,168,60,.22),rgba(20,16,8,.45)); border-bottom:1px solid rgba(240,168,60,.45); } #game-scoreboard.final #gsb-final b{ font-size:18px; font-weight:800; letter-spacing:3px; color:#f0a83c; margin-right:12px; } #game-scoreboard.final #gsb-final span{ font-size:12px; font-weight:700; letter-spacing:1.5px; color:#aeb4bc; } /* bottom links: X account + report a bug */ #menu-overlay .bottom-links{ display:flex; align-items:center; gap:20px; } #menu-overlay .bl-x, #menu-overlay .bl-bug{ display:flex; align-items:center; gap:7px; cursor:pointer; font-size:11px; font-weight:700; letter-spacing:1.2px; color:#aab0b8; text-decoration:none; transition:color .15s; } #menu-overlay .bl-x:hover{ color:#fff; } #menu-overlay .bl-bug:hover{ color:#f0a83c; } /* report-a-bug modal */ #menu-overlay .bug-modal{ position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; background:rgba(4,6,9,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } #menu-overlay .bug-modal.on{ display:flex; } #menu-overlay .bug-box{ width:440px; max-width:92vw; background:rgba(12,14,18,.98); border:1px solid rgba(240,168,60,.3); border-radius:10px; padding:22px 24px; box-shadow:0 24px 70px rgba(0,0,0,.6); } #menu-overlay .bug-h{ font-size:16px; font-weight:800; letter-spacing:2px; color:#f0a83c; } #menu-overlay .bug-sub{ font-size:12px; color:#9098a2; margin:7px 0 14px; line-height:1.5; } #menu-overlay .bug-box textarea{ width:100%; height:120px; resize:vertical; box-sizing:border-box; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); border-radius:7px; padding:11px 13px; color:#e8eaed; font-family:inherit; font-size:13px; } #menu-overlay .bug-box textarea:focus{ outline:none; border-color:#f0a83c; box-shadow:0 0 0 3px rgba(240,168,60,.12); } #menu-overlay .bug-acts{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; } #menu-overlay .bug-msg{ font-size:12px; font-weight:700; color:#3ad17a; margin-top:10px; min-height:15px; text-align:right; } /* admin: bug reports list */ #menu-overlay .adm-bugs{ display:flex; flex-direction:column; gap:8px; } #menu-overlay .adm-bug{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:7px; padding:10px 13px; } #menu-overlay .adm-bug-meta{ font-size:10px; font-weight:700; letter-spacing:.6px; color:#8b9098; margin-bottom:5px; } #menu-overlay .adm-bug-text{ font-size:12.5px; color:#cfd3d8; line-height:1.5; white-space:pre-wrap; word-break:break-word; } /* challenges moved to a locked nav tab — hide the old right-column challenges card */ #menu-overlay .lb-card.mr-card{ display:none !important; } /* locked CHALLENGES nav tab */ #menu-overlay .tab.tab-locked{ color:#8b9098; } #menu-overlay .tab.tab-locked .tab-lock{ font-size:9px; opacity:.85; margin-left:2px; vertical-align:middle; } #menu-overlay .tab.tab-locked.active{ color:#0b0d10; background:#f0a83c; } #menu-overlay .tab.tab-locked.active .tab-lock{ filter:grayscale(1) brightness(.4); } /* CHALLENGES coming-soon panel screen */ #menu-overlay #panel-challenges .panel-body{ display:flex; align-items:center; justify-content:center; } #menu-overlay .chal-soon-screen{ text-align:center; padding:30px; } #menu-overlay .chal-soon-ico{ font-size:44px; line-height:1; filter:grayscale(.15); } #menu-overlay .chal-soon-t{ margin-top:16px; font-size:24px; font-weight:800; letter-spacing:4px; color:#f0a83c; } #menu-overlay .chal-soon-s{ margin-top:12px; font-size:13px; font-weight:600; letter-spacing:.4px; color:#9098a2; line-height:1.7; } /* admin: payout / launch readiness check */ #menu-overlay .adm-checkrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } #menu-overlay .adm-checkrow .opt-btn{ flex:0 0 auto; } #menu-overlay .adm-check-note{ font-size:11px; color:#8b9098; } #menu-overlay .adm-check-out{ display:flex; flex-direction:column; gap:6px; margin-top:10px; } #menu-overlay .adm-chk{ font-size:12px; font-weight:700; letter-spacing:.3px; padding:8px 12px; border-radius:6px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); } #menu-overlay .adm-chk.ok{ color:#3ad17a; border-color:rgba(58,209,122,.35); } #menu-overlay .adm-chk.no{ color:#ff8a6a; border-color:rgba(255,138,106,.35); } /* SOL pill removed from menus — we track $OPS winnings + CLAIM instead */ #menu-overlay #sol-pill{ display:none !important; } #menu-overlay .coin-claim{ display:flex; align-items:center; height:32px; padding:0 14px; margin-left:-2px; cursor:pointer; background:#f0a83c; color:#0b0d10; border:1px solid #f0a83c; border-radius:4px; font-weight:800; font-size:12px; letter-spacing:1.2px; transition:filter .15s, transform .1s; box-shadow:0 4px 14px rgba(240,168,60,.3); } #menu-overlay .coin-claim:hover{ filter:brightness(1.08); } #menu-overlay .coin-claim:active{ transform:translateY(1px); } #menu-overlay .coin-claim.busy{ opacity:.6; pointer-events:none; } /* USD-value hints next to $OPS amounts */ #menu-overlay .opr-usd{ margin-left:6px; font-size:11px; font-weight:700; color:#7d8794; letter-spacing:.4px; } #menu-overlay .opr-usd:empty{ display:none; } #menu-overlay .sd-usd{ margin-top:2px; font-size:12px; font-weight:700; color:#9aa3ad; letter-spacing:.5px; } #menu-overlay .lb-sd-usd{ margin-top:3px; font-size:12px; font-weight:700; color:#9aa3ad; letter-spacing:.5px; } #game-hud .hud-sd-usd{ margin-top:1px; font-size:11px; font-weight:700; color:#cdd4dc; letter-spacing:.5px; } /* settle: finisher rows with computed share */ #menu-overlay .adm-win-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } #menu-overlay .adm-win-row .w-place{ flex:0 0 42px; font-size:11px; font-weight:800; letter-spacing:1px; color:#f0a83c; } #menu-overlay .adm-win-row .w-n{ flex:1; } #menu-overlay .adm-win-row .w-amt{ flex:0 0 130px; font-size:12px; font-weight:700; color:#3ad17a; text-align:right; }