/* DamnBruh-grade UI: dark near-black, hex texture, gold + green accents. Clean surfaces, 1px borders, soft real shadows, no neon glow. */ :root { --bg: #0a0d12; --bg-2: #0e1117; --surface: #161b24; /* cards / panels */ --surface-2: #1b212c; /* insets, ghost buttons */ --surface-3: #232b39; /* hover */ --border: #232a36; --border-strong: #2f3848; --text: #e7ebf2; --muted: #8a93a6; --muted-2: #6b7488; --gold: #f5b73c; /* primary / JOIN / selected wager */ --gold-hover: #ffc752; --gold-press: #e0a52e; --gold-ink: #1a1305; /* text on gold */ --green: #2ad17e; /* deposit / add funds / live */ --green-hover: #36e08a; --danger: #f0506e; --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 16px 40px rgba(0,0,0,0.45); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 6px 18px rgba(0,0,0,0.35); --radius: 16px; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; } #game { position: fixed; inset: 0; display: block; z-index: 0; } /* hidden YouTube lobby-music host: inaudible-invisible to the user but the IFrame API can still play its audio. */ #yt-music { position: fixed; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; } /* Home (login + lobby) base texture lives on the body so the animated agar canvas can sit ABOVE it but BELOW the screen cards. */ body { background-color: var(--bg); background-image: radial-gradient(circle at 50% 0%, rgba(245,183,60,0.05), transparent 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.025' stroke-width='1.4'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16z'/%3E%3Cpath d='M28 64l28 16v32L28 128 0 112V80z'/%3E%3C/g%3E%3C/svg%3E"); background-size: auto, 56px 100px; } body.theme-light { background-image: radial-gradient(circle at 50% 0%, rgba(245,183,60,0.06), transparent 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='0.03' stroke-width='1.4'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16z'/%3E%3Cpath d='M28 64l28 16v32L28 128 0 112V80z'/%3E%3C/g%3E%3C/svg%3E"); } /* animated agar cells behind the home cards (above body texture, below .screen) */ #home-bg { position: fixed; inset: 0; z-index: 20; display: none; pointer-events: none; } #home-bg.active { display: block; } /* ===== Screens / overlays ===== */ .screen { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; background: transparent; /* texture is on , agar canvas is #home-bg */ overflow: auto; } .screen.active { display: flex; } /* ===== Wordmark ===== */ .wordmark { font-style: italic; font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: -1px; text-align: center; } .wordmark .wm-1 { color: #ffffff; } .wordmark .wm-2 { color: var(--gold); margin-left: 10px; } .wordmark-sm { font-size: 38px; } /* ===== Generic card (login + dead) ===== */ .card { position: relative; width: min(420px, 92vw); padding: 34px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); text-align: center; animation: pop 0.22s ease; } @keyframes pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ===== Login ===== */ .login-card { position: relative; width: min(440px, 92vw); padding: 40px 34px 30px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); text-align: center; animation: pop 0.22s ease; } .login-tagline { margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: 3px; color: var(--gold); } .login-sub { margin: 8px 0 26px; color: var(--muted); font-size: 14px; } .fineprint { margin-top: 16px; font-size: 12px; color: var(--muted); } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0; border-radius: 11px; padding: 11px 18px; cursor: pointer; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease, opacity 0.12s ease, color 0.12s ease; } .btn:hover { background: var(--surface-3); border-color: #3a465a; } .btn:active { transform: translateY(1px); } .btn-lg { width: 100%; padding: 14px; font-size: 15px; margin-top: 6px; } .btn-full { width: 100%; } .btn .ico { display: block; } /* gold (primary) */ .btn-gold { background: var(--gold); color: var(--gold-ink); border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, var(--shadow-sm); } .btn-gold:hover { background: var(--gold-hover); border-color: transparent; } .btn-gold:active { background: var(--gold-press); } .btn-gold:disabled { background: var(--surface-2); color: var(--muted); border-color: var(--border); box-shadow: none; cursor: not-allowed; transform: none; } /* green outline (add funds) */ .btn-green-out { background: transparent; color: var(--green); border-color: rgba(42,209,126,0.5); } .btn-green-out:hover { background: rgba(42,209,126,0.10); border-color: var(--green); } /* neutral outline (cash out) */ .btn-outline { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-outline:hover { background: var(--surface-2); border-color: #3a465a; } .btn-cashout { background: var(--gold); color: var(--gold-ink); border: 1px solid transparent; font-size: 14px; font-weight: 700; padding: 11px 22px; border-radius: 11px; cursor: pointer; } .btn-cashout:hover { background: var(--gold-hover); } .btn-cashout:active { transform: translateY(1px); } /* ===== Inputs ===== */ .input { font-family: inherit; font-size: 14px; color: var(--text); background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 11px; padding: 12px 13px; outline: none; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .input::placeholder { color: var(--muted); } .input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,183,60,0.15); } .input-full { width: 100%; } /* ===== Lobby / dashboard ===== */ .lobby-screen { align-items: flex-start; } .lobby-wrap { width: min(1160px, 96vw); margin: auto; padding: 34px 0 24px; animation: pop 0.24s ease; } .lobby-head { text-align: center; margin-bottom: 28px; } .lobby-head .wordmark { font-size: 52px; } .lobby-tagline { margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: 3px; color: var(--gold); } .lobby-foot { text-align: center; margin-top: 22px; } .dash { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 20px; align-items: start; } .dash-col { display: flex; flex-direction: column; gap: 20px; } .dcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; } .dcard-primary { background: linear-gradient(180deg, #19202b, #161b24); border-color: var(--border-strong); box-shadow: var(--shadow); padding: 24px; } .dcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .dcard-title { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--text); } .dcard-title svg { color: var(--gold); } /* pills */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.3px; } .pill-live { color: var(--green); background: rgba(42,209,126,0.12); border: 1px solid rgba(42,209,126,0.35); } .pill-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(42,209,126,0.6); animation: livePulse 1.6s ease-out infinite; } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(42,209,126,0.55); } 70% { box-shadow: 0 0 0 6px rgba(42,209,126,0); } 100% { box-shadow: 0 0 0 0 rgba(42,209,126,0); } } /* leaderboard list (lobby) */ .lb-list { list-style: none; display: flex; flex-direction: column; gap: 2px; } .lb-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 7px 8px; border-radius: 9px; color: var(--text); } .lb-list li:nth-child(odd) { background: rgba(255,255,255,0.018); } .lb-list .lb-rank { width: 22px; height: 22px; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 800; border-radius: 7px; background: var(--surface-2); color: var(--muted); } .lb-list li:nth-child(1) .lb-rank { background: rgba(245,183,60,0.18); color: var(--gold); } .lb-list .lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .lb-list .lb-val { color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums; } .lb-list li.me { background: rgba(245,183,60,0.10); } .lb-list li.me .lb-name { color: var(--gold); } .lb-empty { color: var(--muted); font-style: italic; } /* how it works */ .howto { list-style: none; display: flex; flex-direction: column; gap: 12px; } .howto li { display: flex; gap: 10px; font-size: 13px; color: var(--muted); line-height: 1.4; } .howto li > span:last-child { flex: 1; } .howto li b { color: var(--text); font-weight: 700; } .howto-n { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: rgba(245,183,60,0.14); color: var(--gold); font-size: 11px; font-weight: 800; } .howto-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); line-height: 1.35; } .howto-note .net-badge { margin-left: 0; flex: none; } /* center primary card */ .field { margin-bottom: 18px; } .field-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; } .wager-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .wager-btn { padding: 14px 6px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text); font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; text-align: center; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.06s ease; } .wager-btn .wager-sub { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 3px; } .wager-btn:hover { background: var(--surface-3); } .wager-btn:active { transform: translateY(1px); } .wager-btn.selected { background: var(--gold); color: var(--gold-ink); border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset; } .wager-btn.selected .wager-sub { color: rgba(26,19,5,0.7); } /* custom wager amount */ .custom-wager { margin-top: 10px; } .custom-wager-row { position: relative; display: flex; align-items: center; } .custom-wager-row .input { width: 100%; padding-right: 48px; } .custom-wager-unit { position: absolute; right: 13px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: var(--muted); pointer-events: none; } .custom-wager-usd { min-height: 14px; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; } .custom-wager-usd.bad { color: var(--danger); } .btn-join { width: 100%; padding: 16px; font-size: 16px; letter-spacing: 0.4px; margin-top: 2px; } .join-hint { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; } .stat-row { display: flex; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .stat { flex: 1; text-align: center; } .stat-val { font-size: 19px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .stat-lbl { font-size: 11px; color: var(--muted); margin-top: 3px; } .stat-div { width: 1px; align-self: stretch; background: var(--border); } /* wallet card */ .net-badge { display: inline-flex; align-items: center; margin-left: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--green); background: rgba(42,209,126,0.12); border: 1px solid rgba(42,209,126,0.35); padding: 2px 7px; border-radius: 999px; } .devnet-hint { font-size: 11px; color: var(--muted); text-align: center; margin-top: 2px; } .devnet-hint b { color: var(--green); font-weight: 700; } .wallet-addr { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 12px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: 3px 9px; border-radius: 7px; } .bal-block { padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; } .bal-sol { font-size: 26px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; } .bal-usd { font-size: 13px; color: var(--green); font-weight: 700; margin-top: 2px; } .wallet-actions { display: flex; flex-direction: column; gap: 10px; } .deposit-row { display: flex; gap: 8px; } .deposit-row .input { flex: 1; min-width: 0; } .deposit-row .btn { flex: none; white-space: nowrap; } .quick-tiers { display: flex; gap: 6px; } .quick-tier { flex: 1; padding: 7px 4px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .quick-tier:hover { background: var(--surface-3); color: var(--text); } /* customize / skins */ .skin-preview-wrap { background: radial-gradient(circle at 50% 50%, #11161f, #0c0f15); border: 1px solid var(--border); border-radius: 12px; padding: 6px; margin-bottom: 14px; display: flex; justify-content: center; } #skin-preview { display: block; width: 220px; height: 84px; } .swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; justify-items: center; } .swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255,255,255,0.12); box-shadow: inset 0 -3px 6px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4); transition: transform 0.1s ease, border-color 0.12s ease; position: relative; } .swatch:hover { transform: scale(1.1); } .swatch.selected { border-color: #ffffff; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(255,255,255,0.85), inset 0 -3px 6px rgba(0,0,0,0.3); } /* ===== Dead screen ===== */ .dead-card { width: min(400px, 92vw); } .dead-title { font-size: 34px; font-weight: 900; font-style: italic; letter-spacing: -0.5px; color: var(--danger); margin-bottom: 12px; } .dead-detail { color: var(--muted); font-size: 14px; margin-bottom: 6px; } .dead-loss { color: var(--danger); font-weight: 700; font-size: 18px; margin-bottom: 22px; } /* ===== HUD ===== */ .hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; display: none; } .hud.active { display: block; } .hud > div { position: absolute; } .hud .btn, .hud button { pointer-events: auto; } .hud-topleft { top: 16px; left: 16px; } .hud-balance { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px; box-shadow: var(--shadow-sm); } .hud-balance-label { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: var(--muted); text-transform: uppercase; } .hud-balance-value { font-size: 22px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; } .hud-stats { margin-top: 6px; display: flex; gap: 14px; font-size: 12px; color: var(--muted); } .hud-stats b { color: var(--text); font-weight: 700; } .hud-topright { top: 16px; right: 16px; } .leaderboard { width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-sm); } .leaderboard-title { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .leaderboard ol { list-style: none; } .leaderboard li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; color: var(--text); } .leaderboard li .lb-rank { color: var(--muted); width: 18px; background: none; } .leaderboard li .lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leaderboard li .lb-val { color: var(--green); font-variant-numeric: tabular-nums; } .leaderboard li.me .lb-name, .leaderboard li.me .lb-rank { color: var(--gold); } .leaderboard li.me .lb-val { color: var(--gold); } .hud-bottomleft { bottom: 16px; left: 16px; } #minimap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); display: block; } .hud-bottomright { bottom: 16px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .hud-hint { font-size: 12px; color: var(--muted); background: var(--surface); padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); } .hud-hint b { color: var(--text); font-weight: 700; } /* ===== Toasts ===== */ .toasts { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 18px; color: var(--text); font-size: 13px; font-weight: 500; box-shadow: var(--shadow); animation: toastIn 0.2s ease, toastOut 0.3s ease 3.2s forwards; } .toast.good { border-color: var(--green); } .toast.bad { border-color: var(--danger); } @keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; } } @keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } } /* ===== Theme toggle ===== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 8px 12px; cursor: pointer; box-shadow: var(--shadow-sm); transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease; } .theme-toggle:hover { background: var(--surface-3); border-color: #3a465a; } .theme-toggle:active { transform: translateY(1px); } .theme-toggle .theme-ico { font-size: 16px; line-height: 1; } .theme-toggle[aria-pressed="true"] { color: var(--gold); border-color: rgba(245,183,60,0.5); } /* HUD toggle: small, square-ish, sits above the leaderboard (top-right) */ .hud-topright { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } #theme-toggle-hud { pointer-events: auto; padding: 8px 11px; } /* Lobby toggle: pinned to the top-right of the header */ .lobby-head { position: relative; } .theme-toggle-lobby { position: absolute; top: 0; right: 0; } @media (max-width: 920px) { .theme-toggle-lobby .theme-label { display: none; } } /* ===== Mini button (edit / save inline) ===== */ .btn-mini { padding: 6px 11px; font-size: 12px; border-radius: 9px; flex: none; white-space: nowrap; } /* ===== Profile card ===== */ .profile-name-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .profile-name { font-size: 19px; font-weight: 800; color: var(--gold); letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .username-editor { margin-bottom: 14px; } .username-edit-row { display: flex; gap: 8px; align-items: center; } .username-edit-row .input { flex: 1; min-width: 0; padding: 9px 11px; } .username-msg { min-height: 14px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--muted); } .username-msg.bad { color: var(--danger); } .username-msg.good { color: var(--green); } .profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pstat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; text-align: center; } .pstat-wide { grid-column: 1 / -1; } .pstat-val { font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.2px; } .pstat-wide .pstat-val { color: var(--green); font-size: 18px; } .pstat-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--muted); margin-top: 3px; } /* ===== Friends card ===== */ .friend-count { font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .friend-requests { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .req-row { display: flex; align-items: center; gap: 8px; font-size: 13px; } .req-name { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .req-name::before { content: "wants to be friends"; display: block; font-size: 10px; font-weight: 600; color: var(--muted); text-transform: none; } .req-actions { display: flex; gap: 6px; flex: none; } .req-btn { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 13px; font-weight: 800; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .req-btn.accept { color: var(--green); border-color: rgba(42,209,126,0.45); } .req-btn.accept:hover { background: rgba(42,209,126,0.14); border-color: var(--green); } .req-btn.decline { color: var(--danger); border-color: rgba(240,80,110,0.4); } .req-btn.decline:hover { background: rgba(240,80,110,0.12); border-color: var(--danger); } .friends-list { list-style: none; display: flex; flex-direction: column; gap: 2px; } .friends-list li { display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 7px 8px; border-radius: 9px; color: var(--text); } .friends-list li:nth-child(odd) { background: rgba(127,127,127,0.04); } .friends-empty { color: var(--muted); font-style: italic; } .fr-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--muted-2); box-shadow: 0 0 0 2px rgba(127,127,127,0.12); } .fr-dot.playing { background: var(--green); box-shadow: 0 0 0 2px rgba(42,209,126,0.25); } .fr-dot.online { background: var(--gold); box-shadow: 0 0 0 2px rgba(245,183,60,0.25); } .fr-dot.offline { background: var(--muted-2); } .fr-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fr-status { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--muted); } .fr-remove { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; transition: color 0.12s ease, background 0.12s ease; } .fr-remove:hover { color: var(--danger); background: rgba(240,80,110,0.1); } .add-friend-row { display: flex; gap: 8px; margin-top: 12px; } .add-friend-row .input { flex: 1; min-width: 0; padding: 9px 11px; } /* ===== Global leaderboard tabs ===== */ .gtab-row { display: flex; gap: 6px; margin-bottom: 10px; } .gtab { flex: 1; padding: 7px 4px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .gtab:hover { background: var(--surface-3); color: var(--text); } .gtab.selected { background: var(--gold); color: var(--gold-ink); border-color: transparent; } /* ===== HUD: mute button + kill feed + eat popups ===== */ .hud-tr-btns { display: flex; gap: 8px; } .hud-iconbtn { display: inline-flex; align-items: center; justify-content: center; font-family: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 8px 11px; cursor: pointer; box-shadow: var(--shadow-sm); pointer-events: auto; transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease, opacity 0.12s ease; } .hud-iconbtn:hover { background: var(--surface-3); border-color: #3a465a; } .hud-iconbtn:active { transform: translateY(1px); } .hud-iconbtn .mute-ico { font-size: 15px; line-height: 1; } .hud-iconbtn[aria-pressed="true"] { opacity: 0.6; } .kill-feed { width: 220px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; pointer-events: none; } .kill-row { max-width: 100%; font-size: 12px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; box-shadow: var(--shadow-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: killIn 0.18s ease, killOut 0.6s ease 3.4s forwards; } .kill-row .kf-by { color: var(--gold); font-weight: 800; } .kill-row .kf-victim { color: var(--danger); font-weight: 800; } .kill-row .kf-verb { color: var(--muted); } @keyframes killIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; } } @keyframes killOut { to { opacity: 0; transform: translateX(12px); } } .eat-popups { position: fixed; inset: 0; z-index: 11; pointer-events: none; overflow: hidden; display: none; } .eat-popups.active { display: block; } .eat-pop { position: absolute; transform: translate(-50%, -50%); font-size: 18px; font-weight: 900; color: var(--green); text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 10px rgba(42,209,126,0.4); white-space: nowrap; font-variant-numeric: tabular-nums; animation: eatPop 1.05s ease-out forwards; } .eat-pop.big { font-size: 26px; color: var(--gold); text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 14px rgba(245,183,60,0.5); } @keyframes eatPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -150%) scale(1); } } /* ===== Lobby header actions (Friends / Settings / Theme) ===== */ .lobby-head-actions { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 8px; z-index: 5; } /* the existing absolute positioning on the lobby theme toggle is now handled by the flex row above — neutralize it so it flows inside the action group. */ .lobby-head-actions .theme-toggle-lobby { position: static; top: auto; right: auto; } .head-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 8px 12px; cursor: pointer; box-shadow: var(--shadow-sm); transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease; } .head-btn:hover { background: var(--surface-3); border-color: #3a465a; } .head-btn:active { transform: translateY(1px); } .head-btn svg { color: var(--gold); } .head-gear { font-size: 15px; line-height: 1; color: var(--gold); } .head-badge { display: none; min-width: 17px; height: 17px; padding: 0 5px; align-items: center; justify-content: center; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font-size: 10px; font-weight: 800; line-height: 1; } .head-badge:not(:empty) { display: inline-flex; } @media (max-width: 920px) { .head-btn-label { display: none; } } /* ===== Slide-out side panel (Friends) ===== */ .panel-backdrop { position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,0.45); backdrop-filter: blur(1.5px); opacity: 0; transition: opacity 0.22s ease; } .panel-backdrop.open { opacity: 1; } .panel-backdrop[hidden] { display: none; } .side-panel { position: fixed; top: 0; right: 0; height: 100%; width: min(360px, 90vw); z-index: 45; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border-strong); box-shadow: -18px 0 50px rgba(0,0,0,0.5); transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .side-panel.open { transform: translateX(0); } .side-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid var(--border); } .side-panel-title { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; color: var(--text); } .side-panel-title svg { color: var(--gold); } .side-panel-body { flex: 1; overflow-y: auto; padding: 16px 18px; } .side-panel-foot { padding: 14px 18px 18px; border-top: 1px solid var(--border); } .side-panel-foot .add-friend-row { margin-top: 0; } .panel-x { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .panel-x:hover { color: var(--text); background: var(--surface-3); border-color: #3a465a; } /* ===== Settings modal ===== */ .modal-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0.5); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.18s ease; } .modal-backdrop.open { opacity: 1; } .modal-backdrop[hidden] { display: none; } .settings-modal { width: min(420px, 94vw); max-height: 88vh; overflow-y: auto; background: linear-gradient(180deg, rgba(25,32,43,0.96), rgba(22,27,36,0.98)); border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: var(--shadow); transform: translateY(8px) scale(0.98); transition: transform 0.18s ease; } .modal-backdrop.open .settings-modal { transform: none; } .settings-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); } .settings-title { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; color: var(--text); } .settings-body { padding: 16px 20px 22px; } .set-section-label { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); margin: 6px 0 10px; } .set-section-label + .set-row { margin-top: 0; } .set-section-label:not(:first-child) { margin-top: 20px; } .set-row { margin-top: 16px; } .set-row-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .set-row label { font-size: 13px; font-weight: 700; color: var(--text); } .set-val { font-size: 12px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; } .set-row-toggle { display: flex; align-items: center; justify-content: space-between; } /* range slider */ .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--surface-3); outline: none; cursor: pointer; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.5); cursor: pointer; } .slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.5); cursor: pointer; } .slider:disabled { opacity: 0.45; cursor: not-allowed; } /* on/off switch */ .switch { position: relative; width: 46px; height: 26px; flex: none; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-2); cursor: pointer; padding: 0; transition: background 0.16s ease, border-color 0.16s ease; } .switch .switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform 0.16s ease, background 0.16s ease; } .switch[aria-checked="true"], .switch[aria-pressed="true"] { background: var(--gold); border-color: transparent; } .switch[aria-checked="true"] .switch-knob, .switch[aria-pressed="true"] .switch-knob { transform: translateX(20px); background: var(--gold-ink); } .switch:active { transform: translateY(1px); } /* HUD settings gear icon */ .hud-iconbtn .gear-ico { font-size: 15px; line-height: 1; } /* ===== Responsive ===== */ @media (max-width: 920px) { .dash { grid-template-columns: 1fr; } .dash-center { order: -1; } .lobby-head .wordmark { font-size: 40px; } .profile-stats { grid-template-columns: 1fr 1fr; } }