/* ============================================ VoltageDominance.io - Complete Stylesheet Dark crypto-themed battle royale UI ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* === DESIGN TOKENS (VoltageGPU x shadcn) === */ :root { /* Surfaces */ --background: #050508; --panel: #0a0a0f; --surface: #0f0f18; --elevated: #161620; /* Text */ --foreground: #f0f0f5; --muted-foreground: #a0a0b0; --tertiary: #606070; /* Brand */ --primary: #a78bfa; --primary-foreground: #050508; --primary-hover: #7c5cbf; --accent: #4ade80; --accent-dim: rgba(74,222,128,0.12); --accent-border: rgba(74,222,128,0.20); /* Status */ --destructive: #f87171; --warning: #fbbf24; /* Borders & ring */ --border: rgba(255,255,255,0.08); --border-subtle: rgba(255,255,255,0.05); --border-emphasis: rgba(255,255,255,0.14); --ring: rgba(167,139,250,0.40); /* Card */ --card: rgba(255,255,255,0.025); --card-hover: rgba(255,255,255,0.04); /* Radius */ --radius: 12px; --radius-sm: 7px; --radius-md: 10px; --radius-lg: 12px; --radius-pill: 9999px; } /* === RESET & GLOBAL === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; background: var(--background); color: var(--foreground); font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-feature-settings: "cv01", "ss03"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Grain texture overlay (canvas layer only) */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat; background-size: 200px 200px; opacity: 0.04; pointer-events: none; z-index: 0; mix-blend-mode: overlay; } /* Ensure menu content sits above the grain */ #menuScreen > * { position: relative; z-index: 1; } body.in-game { cursor: crosshair; } /* Hide the grain overlay during gameplay (it would interfere with the game canvas) */ body.in-game::before { display: none; } /* Hide ALL native scrollbars — custom JS scrollbars replace them */ *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } * { scrollbar-width: none !important; -ms-overflow-style: none !important; } /* Custom scrollbar (JS-driven) */ .cscroll-track { position: absolute; top: 8px; bottom: 8px; right: 4px; width: 5px; border-radius: 3px; background: rgba(255,255,255,0.04); z-index: 50; opacity: 0; transition: opacity 0.25s; pointer-events: none; } .cscroll-host:hover .cscroll-track, .cscroll-track.cscroll-active { opacity: 1; pointer-events: auto; } .cscroll-thumb { position: absolute; top: 0; left: 0; width: 100%; min-height: 24px; border-radius: 3px; cursor: pointer; transition: background 0.15s; } .cscroll-thumb:hover, .cscroll-thumb.dragging { filter: brightness(1.3); } ::selection { background: var(--ring); color: var(--foreground); } /* === CANVAS === */ #gameCanvas { position: fixed; top: 0; left: 0; /* 2026-05-22: dvh = dynamic viewport height — accounts for iOS Safari URL bar collapsing. svh = small viewport height fallback. iOS notch + home indicator handled via viewport-fit=cover in meta. */ width: 100vw; height: 100vh; height: 100dvh; /* dynamic viewport — bigger when URL bar hidden */ z-index: 1; display: block; } /* === OVERLAY UTILITIES === */ .overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(6px); } .overlay-hidden { display: none !important; } .overlay-visible { display: flex !important; } /* Death screen uses visibility so game canvas keeps rendering behind it */ #deathScreen.overlay-hidden { display: flex !important; visibility: hidden; pointer-events: none; opacity: 0; } #deathScreen:not(.overlay-hidden) { visibility: visible; pointer-events: auto; opacity: 1; animation: deathFadeIn 0.6s ease-out; } @keyframes deathFadeIn { 0% { opacity: 0; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } } /* Keybind button in rebinding state */ .keybind-btn.keybind-active { border-color: #f59e0b; background: rgba(245,158,11,0.15); color: #fbbf24; animation: keybindPulse 0.8s ease-in-out infinite; } /* Active preset */ .preset-btn.preset-active { border-color: #8b5cf6; background: rgba(139,92,246,0.25); color: #fff; box-shadow: 0 0 8px rgba(139,92,246,0.3); } .hud-hidden { display: none !important; } /* ============================================ CRYPTO PRICE TICKER ============================================ */ .ticker-bar { position: fixed; top: 0; left: 0; width: 100%; z-index: 200; background: var(--card); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); overflow: hidden; height: 34px; transition: opacity 0.3s ease; } .ticker-track { width: 100%; overflow: hidden; height: 100%; display: flex; align-items: center; } .ticker-content { display: flex; align-items: center; white-space: nowrap; animation: ticker-scroll 35s linear infinite; will-change: transform; } .ticker-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; margin: 0 4px; font-size: 12px; font-weight: 510; flex-shrink: 0; background: transparent; border-radius: var(--radius-pill); border: none; } .ticker-item-sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--border-emphasis); margin: 0 8px; flex-shrink: 0; } .ticker-sym { font-weight: 510; font-size: 12px; letter-spacing: normal; color: var(--muted-foreground); font-family: 'JetBrains Mono', ui-monospace, monospace; } .ticker-price { color: var(--foreground); font-size: 12px; font-weight: 500; font-family: 'JetBrains Mono', ui-monospace, monospace; } .ticker-change { font-size: 11px; font-weight: 510; padding: 1px 5px; border-radius: 4px; background: transparent; } .ticker-change.up { color: var(--accent); background: transparent; } .ticker-change.down { color: var(--destructive); background: transparent; } @keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } #menuBgCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* === MENU SCREEN === */ #menuScreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: flex; align-items: center; justify-content: center; background-color: var(--background); background-image: radial-gradient(ellipse 60% 40% at 20% 10%, rgba(167, 139, 250, 0.07) 0%, transparent 60%), radial-gradient(ellipse 50% 35% at 80% 85%, rgba(74, 222, 128, 0.05) 0%, transparent 60%); overflow-y: auto; overflow-x: hidden; } /* Particles + scanlines removed — replaced by ambient gradients above and grain on body::before */ .menu-container { position: relative; z-index: 2; max-width: 640px; width: 100%; padding: 36px 28px; padding-top: 48px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } /* === TITLE === */ .game-title { font-family: 'Inter Variable', 'Inter', sans-serif; font-size: 72px; font-weight: 510; letter-spacing: -1.584px; line-height: 1; margin-bottom: 0; color: var(--foreground); text-transform: none; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; text-shadow: none; filter: none; user-select: none; } .game-subtitle { font-size: 18px; color: var(--muted-foreground); margin: 8px 0 4px; font-weight: 400; letter-spacing: normal; } /* === NAME INPUT === */ #nameInput { width: 100%; max-width: 360px; padding: 14px 16px; font-size: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--foreground); outline: none; margin-top: 16px; font-family: inherit; font-weight: 400; transition: border-color 0.15s ease, box-shadow 0.15s ease; } #nameInput::placeholder { color: var(--tertiary); } #nameInput:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); } /* === FACTION SELECTOR === */ .faction-grid { display: flex; gap: 10px; margin: 14px 0; justify-content: center; flex-wrap: wrap; } .faction-btn { border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px; position: relative; overflow: visible; min-width: 76px; } .faction-btn .faction-color { /* Hidden — colored tints replaced by unified glass treatment. Per-faction identity preserved on .faction-icon ring + selected label color. */ display: none; } .faction-btn .faction-icon { position: relative; z-index: 1; font-size: 34px; line-height: 1; display: flex; align-items: center; justify-content: center; } .faction-icon img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 10px rgba(255,255,255,0.1); transition: transform 0.2s; } .faction-btn.selected .faction-icon img { transform: scale(1.15); } .faction-btn .faction-label { position: relative; z-index: 1; font-size: 12px; font-weight: 510; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); transition: color 0.15s ease; } /* Hide tagline inside button, shown in info bar below */ .faction-btn .faction-tagline { display: none; } .faction-btn .faction-desc { display: none; } .faction-btn.selected .faction-desc { max-height: 120px; opacity: 1; margin-top: 4px; } /* Faction colors — only the SELECTED label keeps the brand color (faction identity). Card backgrounds use the unified glass treatment. */ .faction-btn.btc.selected .faction-label { color: #f7931a; } .faction-btn.eth.selected .faction-label { color: #627eea; } .faction-btn.tao.selected .faction-label { color: #00d4ff; } .faction-btn.doge.selected .faction-label { color: #c2a633; } .faction-btn.sol.selected .faction-label { color: #9945ff; } .faction-btn.bnb.selected .faction-label { color: #F0B90B; } /* Hover — unified glass elevation */ .faction-btn:hover { background: var(--card-hover); border-color: var(--border-emphasis); transform: translateY(-1px); } /* Selected state — primary ring, no glow, no scale */ .faction-btn.selected { border-color: var(--primary); background: var(--card-hover); box-shadow: 0 0 0 3px var(--ring); transform: none; } .faction-btn.selected:hover { transform: translateY(-1px); } /* Faction locked: when a faction-specific skin is equipped the buttons are non-interactive; the selected one stays highlighted, the rest fade */ .faction-btn.faction-locked { cursor: not-allowed; opacity: 0.4; pointer-events: none; } .faction-btn.faction-locked.selected { opacity: 1; pointer-events: none; border-color: rgba(168, 85, 247, 0.8); box-shadow: 0 0 16px rgba(168, 85, 247, 0.4); } /* === FACTION SKIN POPUP === */ /* ============================================ FACTION SKIN POPUP (shop-style layout) ============================================ */ .fsp-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 300; background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: fspFadeIn 0.25s ease; } .fsp-hidden { display: none !important; } @keyframes fspFadeIn { from { opacity:0; transform: scale(0.97); } to { opacity:1; transform: scale(1); } } .fsp-box { position: relative; background: #050505; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 22px; width: 1280px; max-width: 96vw; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 120px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255,255,255,0.04); } /* Grain texture overlay — same recipe as .shop-container */ .fsp-box::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; opacity: 0.06; pointer-events: none; mix-blend-mode: overlay; border-radius: 22px; z-index: 0; } .fsp-box > * { position: relative; z-index: 1; } .fsp-header { display: flex; align-items: center; gap: 14px; padding: 24px 32px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); } .fsp-logo { width: 42px; height: 42px; border-radius: 50%; filter: drop-shadow(0 0 8px rgba(255,255,255,0.3)); } .fsp-title { flex: 1; font-size: 30px; font-weight: 900; letter-spacing: 3px; background: linear-gradient(135deg, #a78bfa 0%, #d946ef 45%, #f472b6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 12px rgba(167,139,250,0.3)); } .fsp-close { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: #7c7c9a; font-size: 22px; cursor: pointer; line-height: 1; transition: all 0.2s; } .fsp-close:hover { color: #fff; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); } .fsp-subtitle { text-align: center; font-size: 14px; color: #7a7a9a; padding: 0 32px 14px; margin-top: -2px; } .fsp-skins { overflow-y: auto; padding: 20px 28px 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; } /* ---- skin card (mirrors .skin-card) ---- */ .fsp-skin-row { background: linear-gradient(160deg, #141424 0%, #0e0e1c 100%); border: 1.5px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 20px 16px 18px; text-align: center; cursor: pointer; transition: all 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; min-width: 0; box-shadow: inset 0 0 0 rgba(139,92,246,0); } .fsp-skin-row::before { content: ''; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,0.03) 0%, transparent 60%); pointer-events: none; } .fsp-skin-row:hover { transform: translateY(-6px) scale(1.03); border-color: rgba(255,255,255,0.22); box-shadow: 0 12px 32px rgba(0,0,0,0.4), inset 0 0 20px rgba(139,92,246,0.06); } @keyframes fspLightStreak { 0% { left: -60%; opacity: 0; } 30% { opacity: 0.7; } 100% { left: 140%; opacity: 0; } } .fsp-skin-row:hover::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), rgba(255,255,255,0.10), transparent); transform: skewX(-20deg); pointer-events: none; animation: fspLightStreak 0.8s ease forwards; z-index: 3; } .fsp-skin-row.fsp-rarity-common { border-color: rgba(140,140,165,0.30); } .fsp-skin-row.fsp-rarity-common:hover { border-color: rgba(180,180,200,0.45); box-shadow: 0 6px 20px rgba(80,80,120,0.20); } .fsp-skin-row.fsp-rarity-premium { border-color: rgba(168,85,247,0.35); } .fsp-skin-row.fsp-rarity-premium:hover { box-shadow: 0 0 15px rgba(168,85,247,0.4); } .fsp-skin-row.fsp-rarity-ultra { border-color: rgba(255,215,0,0.35); } .fsp-skin-row.fsp-rarity-ultra:hover { box-shadow: 0 0 15px rgba(255,215,0,0.4); } .fsp-skin-row.fsp-rarity-legendary { border-color: #fbbf24; animation: fspLegBorder 2s ease-in-out infinite; } .fsp-skin-row.fsp-rarity-legendary:hover { box-shadow: 0 0 20px rgba(251,191,36,0.5); } @keyframes fspLegBorder { 0%,100% { border-color: #fbbf24; } 50% { border-color: #f59e0b; } } .fsp-skin-row.fsp-equipped { border-color: #8b5cf6 !important; box-shadow: 0 0 20px rgba(139,92,246,0.3), inset 0 0 20px rgba(139,92,246,0.05); } .fsp-skin-row.fsp-equipped::after { content: 'EQUIPPED'; position: absolute; top: 8px; right: -24px; background: #8b5cf6; color: #fff; font-size: 9px; font-weight: 800; padding: 2px 28px; transform: rotate(45deg); letter-spacing: 1px; } .fsp-skin-row.fsp-locked { opacity: 0.55; } .fsp-skin-row.fsp-locked:hover { opacity: 0.75; } /* ---- canvas preview (mirrors .skin-canvas-wrap) ---- */ .fsp-skin-preview { width: 140px; height: 115px; margin: 0 auto 10px; border-radius: 10px; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; } .fsp-skin-preview canvas { display: block; width: 140px; height: 115px; border-radius: 10px; image-rendering: auto; } .fsp-skin-row:hover .fsp-skin-preview { transform: scale(1.08); } .fsp-skin-row.fsp-rarity-common .fsp-skin-preview { box-shadow: 0 0 6px rgba(100,100,120,0.2); } .fsp-skin-row.fsp-rarity-premium .fsp-skin-preview { box-shadow: 0 0 10px rgba(168,85,247,0.35); animation: fspGlowPremium 2.5s ease-in-out infinite; } .fsp-skin-row.fsp-rarity-premium:hover .fsp-skin-preview { box-shadow: 0 0 22px rgba(168,85,247,0.6); } .fsp-skin-row.fsp-rarity-ultra .fsp-skin-preview { box-shadow: 0 0 12px rgba(239,68,68,0.35), 0 0 20px rgba(255,100,0,0.15); animation: fspGlowUltra 2s ease-in-out infinite; } .fsp-skin-row.fsp-rarity-ultra:hover .fsp-skin-preview { box-shadow: 0 0 24px rgba(239,68,68,0.6), 0 0 36px rgba(255,100,0,0.3); } .fsp-skin-row.fsp-rarity-legendary .fsp-skin-preview { box-shadow: 0 0 14px rgba(255,215,0,0.4), 0 0 25px rgba(255,180,0,0.15); animation: fspGlowLegendary 1.8s ease-in-out infinite; } .fsp-skin-row.fsp-rarity-legendary:hover .fsp-skin-preview { box-shadow: 0 0 28px rgba(255,215,0,0.7), 0 0 48px rgba(255,180,0,0.35); } @keyframes fspGlowPremium { 0%, 100% { box-shadow: 0 0 10px rgba(168,85,247,0.3); } 50% { box-shadow: 0 0 18px rgba(168,85,247,0.5), 0 0 28px rgba(168,85,247,0.15); } } @keyframes fspGlowUltra { 0%, 100% { box-shadow: 0 0 12px rgba(239,68,68,0.3), 0 0 20px rgba(255,100,0,0.1); } 50% { box-shadow: 0 0 20px rgba(239,68,68,0.5), 0 0 32px rgba(255,100,0,0.25); } } @keyframes fspGlowLegendary { 0%, 100% { box-shadow: 0 0 14px rgba(255,215,0,0.35), 0 0 25px rgba(255,180,0,0.1); } 50% { box-shadow: 0 0 24px rgba(255,215,0,0.6), 0 0 40px rgba(255,180,0,0.3); } } .fsp-skin-faction-dot { position: absolute; top: 6px; left: 6px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #12121a; z-index: 2; } /* ---- text info ---- */ .fsp-skin-name { font-size: 16px; font-weight: 800; color: #ededff; line-height: 1.2; margin-bottom: 4px; text-shadow: 0 0 8px rgba(167,139,250,0.25); } .fsp-skin-desc { font-size: 12px; color: #7a7a9a; line-height: 1.4; margin-bottom: 8px; word-wrap: break-word; overflow-wrap: break-word; min-height: 34px; } /* ---- rarity badge ---- */ .fsp-rarity-badge { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; padding: 4px 12px; border-radius: 6px; margin-bottom: 8px; } .fsp-rarity-badge.common { color: #aaa; background: rgba(170,170,170,0.1); } .fsp-rarity-badge.premium { color: #c084fc; background: rgba(168,85,247,0.15); box-shadow: 0 0 6px rgba(168,85,247,0.15); } .fsp-rarity-badge.ultra { color: #f87171; background: rgba(239,68,68,0.15); box-shadow: 0 0 6px rgba(239,68,68,0.15); } .fsp-rarity-badge.legendary { color: #fbbf24; background: rgba(251,191,36,0.15); box-shadow: 0 0 8px rgba(251,191,36,0.2); } /* ---- price / action area ---- */ .fsp-skin-price { margin-top: 6px; font-size: 14px; font-weight: 700; color: #8a8aaa; } .fsp-skin-price.fsp-free { color: #22c55e; } .fsp-skin-price.fsp-equip { color: #8b5cf6; cursor: pointer; } .fsp-skin-price.fsp-equipped-label { color: #8b5cf6; font-size: 15px; font-weight: 900; } .fsp-skin-price.fsp-coins { color: #ffd700; } /* Buy buttons (same style as shop) */ .fsp-buy-options { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 8px; } .fsp-btn-buy-card, .fsp-btn-buy-crypto { display: flex; flex-direction: row; align-items: center; gap: 0; width: 100%; background: rgba(20,20,30,0.85); color: #e2e8f0; border: none; border-radius: 8px; padding: 11px 14px; font-size: 14px; font-weight: 700; cursor: pointer; letter-spacing: 0.3px; transition: background 0.18s, box-shadow 0.18s, transform 0.18s; box-sizing: border-box; text-align: left; backdrop-filter: blur(4px); line-height: 1.2; font-family: inherit; } .fsp-btn-buy-card { border-left: 3px solid #4CAF50; } .fsp-btn-buy-card:hover { background: rgba(34,58,34,0.9); box-shadow: 0 0 14px rgba(76,175,80,0.4); transform: scale(1.03); } .fsp-btn-buy-crypto { border-left: 3px solid #f7931a; } .fsp-btn-buy-crypto:hover { background: rgba(60,40,10,0.9); box-shadow: 0 0 14px rgba(247,147,26,0.4); transform: scale(1.03); } .fsp-buy-icon { font-size: 16px; flex-shrink: 0; margin-right: 8px; line-height: 1; } .fsp-buy-label { flex: 1; font-size: 13px; color: #c4c4d8; } .fsp-buy-price { font-size: 16px; font-weight: 800; color: #fff; white-space: nowrap; text-shadow: 0 0 6px rgba(255,255,255,0.15); } .fsp-footer { padding: 14px 24px 16px; border-top: 1px solid rgba(255,255,255,0.04); font-size: 13px; color: #6a6a8a; text-align: center; } /* === INLINE SKIN PICKER === */ .skin-picker { margin: 10px 0 14px; position: relative; } .skin-picker-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; } /* native scrollbar removed */ .sp-card { flex-shrink: 0; width: 90px; border-radius: 8px; border: 2px solid rgba(255,255,255,0.08); background: rgba(20,20,30,0.8); cursor: pointer; transition: all 0.2s; padding: 8px 6px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; text-align: center; } .sp-card:hover { border-color: rgba(255,255,255,0.25); transform: translateY(-2px); background: rgba(30,30,45,0.9); } .sp-card.equipped { border-color: rgba(139,92,246,0.8); box-shadow: 0 0 12px rgba(139,92,246,0.3); background: rgba(139,92,246,0.12); } .sp-card.locked { opacity: 0.5; } .sp-card.locked:hover { opacity: 0.7; } .sp-card .sp-preview { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: rgba(0,0,0,0.3); } .sp-card .sp-preview canvas { width: 42px; height: 42px; } .sp-card .sp-name { font-size: 9px; font-weight: 700; color: #e0e0f0; line-height: 1.2; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-card .sp-rarity { font-size: 7px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; } .sp-rarity.common { color: #aaa; } .sp-rarity.premium { color: #88ddff; } .sp-rarity.ultra { color: #ffd700; } .sp-rarity.legendary { color: #ff6b6b; } .sp-card .sp-price { font-size: 8px; color: #7c7c9a; } .sp-card .sp-equipped-tag { font-size: 7px; color: #a855f7; font-weight: 700; letter-spacing: 0.5px; } .sp-card .sp-lock { position: absolute; top: 4px; right: 4px; font-size: 10px; opacity: 0.6; } /* === PLAY BUTTON === */ #playBtn { flex: 1 1 100%; width: 100%; max-width: 480px; height: 64px; display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; font-size: 18px; font-weight: 590; background: var(--primary); border: none; border-radius: var(--radius); color: var(--primary-foreground); cursor: pointer; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 0; font-family: inherit; position: relative; overflow: hidden; transition: background 0.15s ease, transform 0.15s ease; animation: none; box-shadow: none; } .play-icon { margin-right: 6px; font-size: 16px; } #playBtn::before { display: none; } #playBtn:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: none; } #playBtn:hover::before { left: 100%; } #playBtn:active { transform: translateY(0); box-shadow: none; } /* === INFO LINES (player count, dominance) === */ .info-line { font-size: 14px; color: #7c7c9a; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; } .green-dot { display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; animation: dotPulse 1.5s ease-in-out infinite; } @keyframes dotPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.20); } 50% { opacity: 0.6; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.30); } } .count-number { font-weight: 500; color: var(--accent); font-family: 'JetBrains Mono', ui-monospace, monospace; } .dom-value { font-weight: 500; color: var(--accent); font-family: 'JetBrains Mono', ui-monospace, monospace; } /* === HOW TO PLAY === */ .how-to-play { margin-top: 20px; text-align: left; } .htp-toggle { font-size: 16px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #7c7c9a; cursor: pointer; padding: 12px 0; text-align: center; transition: color 0.2s; user-select: none; display: flex; align-items: center; justify-content: center; gap: 8px; } .htp-toggle:hover { color: #a78bfa; } .htp-arrow { font-size: 13px; transition: transform 0.3s; display: inline-block; } .htp-toggle.open .htp-arrow { transform: rotate(180deg); } .htp-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .htp-content.open { max-height: 500px; background: rgba(10, 10, 15, 0.95); border-radius: 12px; padding: 6px 14px; margin-top: 6px; } .htp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0 14px; } .htp-item { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #94a3b8; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.02); } .htp-item kbd { font-family: inherit; font-size: 13px; font-weight: 700; color: #c8c8d8; background: rgba(139, 92, 246, 0.15); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 5px; padding: 3px 8px; min-width: 48px; text-align: center; white-space: nowrap; flex-shrink: 0; } /* === TOP SCORES === */ .top-scores { margin-top: 16px; padding: 12px; background: rgba(255, 255, 255, 0.02); border: 1px solid #1e1e2e; border-radius: 10px; } .ts-title { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #7c7c9a; margin-bottom: 8px; } .ts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .ts-item { text-align: center; } .ts-val { display: block; font-size: 18px; font-weight: 800; color: #a78bfa; font-variant-numeric: tabular-nums; } .ts-lbl { display: block; font-size: 9px; color: #5a5a7a; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; } /* === MENU FOOTER === */ .menu-footer { margin-top: 32px; font-size: 13px; color: var(--tertiary); } .menu-footer a { color: var(--primary); text-decoration: none; transition: color 0.15s ease; font-weight: 510; } .menu-footer a:hover { color: var(--foreground); } .social-links { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 14px; } .social-links a { color: #4a4a6a; transition: color 0.2s, transform 0.2s; display: flex; align-items: center; } .social-links a svg { width: 24px; height: 24px; } .social-links a:hover { color: #8b5cf6; transform: scale(1.15); } /* ============================================ DEATH SCREEN ============================================ */ #deathScreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 150; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 50%, rgba(239, 68, 68, 0.06) 0%, transparent 60%), rgba(10, 10, 15, 0.55); backdrop-filter: blur(4px); animation: fadeIn 0.3s ease-out; overflow-y: auto; } .death-container { text-align: center; max-width: 520px; width: 100%; padding: 48px 32px; animation: fadeIn 0.4s ease-out; } .death-title { font-size: 72px; font-weight: 900; letter-spacing: -2px; background: linear-gradient(135deg, #ef4444, #dc2626, #b91c1c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 40px rgba(239, 68, 68, 0.4)); animation: shake 0.5s ease-out; user-select: none; } /* Killed by info */ .death-killer { font-size: 16px; color: #94a3b8; margin-top: 8px; min-height: 24px; } .death-killer .killer-name { font-weight: 700; font-size: 18px; } .death-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 24px; } .death-stats.career { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; } .career-divider { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #4a4a6a; margin-top: 20px; padding: 8px 0 0; border-top: 1px solid #1e1e2e; } .stat-card { background: #12121a; border: 1px solid #1e1e2e; border-radius: 12px; padding: 16px 12px; transition: border-color 0.2s; } .stat-card:hover { border-color: #2a2a3a; } .stat-value { font-size: 24px; font-weight: 800; color: #ffffff; line-height: 1.2; font-variant-numeric: tabular-nums; } .stat-value.counting { transition: color 0.3s; } .stat-label { font-size: 10px; color: #7c7c9a; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; } /* Play Again button (green) */ .btn-play-again { width: 100%; padding: 18px; font-size: 20px; font-weight: 800; background: linear-gradient(135deg, #22c55e, #16a34a); border: none; border-radius: 14px; color: #ffffff; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; margin-top: 24px; font-family: inherit; transition: transform 0.15s, box-shadow 0.15s; } .btn-play-again:hover { transform: scale(1.03); box-shadow: 0 0 30px rgba(34, 197, 94, 0.4), 0 8px 32px rgba(0, 0, 0, 0.4); } .btn-play-again:active { transform: scale(0.98); } /* Tweet Death button */ .btn-tweet-death { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; font-size: 14px; font-weight: 600; background: transparent; border: 2px solid #2a2a3a; border-radius: 10px; color: #94a3b8; cursor: pointer; margin-top: 12px; font-family: inherit; transition: all 0.2s; } .btn-tweet-death:hover { border-color: #8b5cf6; color: #ffffff; box-shadow: 0 0 15px rgba(139, 92, 246, 0.2); } .btn-tweet-death svg { flex-shrink: 0; } /* Death actions row */ .death-actions-row { display: flex; gap: 12px; justify-content: center; margin-top: 12px; flex-wrap: wrap; } .death-actions-row .btn-tweet-death { margin-top: 0; } /* Invite Friend button */ .btn-invite-friend { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; font-size: 14px; font-weight: 700; background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.05)); border: 2px solid rgba(34,197,94,0.4); border-radius: 10px; color: #22c55e; cursor: pointer; font-family: inherit; transition: all 0.2s; letter-spacing: 1px; text-transform: uppercase; } .btn-invite-friend:hover { background: linear-gradient(135deg, rgba(34,197,94,0.25), rgba(34,197,94,0.1)); border-color: #22c55e; color: #4ade80; box-shadow: 0 0 20px rgba(34,197,94,0.25); transform: scale(1.02); } .btn-invite-friend.invite-copied { border-color: #22c55e; background: rgba(34,197,94,0.2); color: #4ade80; } .invite-icon { font-size: 16px; } /* HUD Invite Button (inside leaderboard) */ .hud-invite-btn { display: block; width: 100%; padding: 5px 8px; margin-top: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.15); border-radius: 6px; color: rgba(34,197,94,0.6); cursor: pointer; font-family: inherit; transition: all 0.2s; text-align: center; } .hud-invite-btn:hover { background: rgba(34,197,94,0.18); border-color: #22c55e; box-shadow: 0 0 12px rgba(34,197,94,0.2); } /* Return to Menu button */ .btn-return-menu { display: block; width: 100%; margin-top: 12px; padding: 12px 32px; font-size: 16px; font-weight: 700; color: #ffffff; background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); border: none; border-radius: 8px; cursor: pointer; letter-spacing: 0.5px; transition: background 0.15s, box-shadow 0.15s, transform 0.1s; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3); } .btn-return-menu:hover { background: linear-gradient(135deg, #8b5cf6 0%, #c084fc 100%); box-shadow: 0 6px 28px rgba(168, 85, 247, 0.5); transform: scale(1.02); } .btn-return-menu:active { transform: scale(0.98); } /* Death Settings Button */ .btn-death-settings { display: inline-flex; align-items: center; gap: 6px; padding: 12px 24px; font-size: 14px; font-weight: 700; background: rgba(100,116,139,0.1); border: 2px solid rgba(100,116,139,0.3); border-radius: 10px; color: #94a3b8; cursor: pointer; font-family: inherit; transition: all 0.2s; letter-spacing: 1px; text-transform: uppercase; } .btn-death-settings:hover { border-color: #8b5cf6; color: #c4b5fd; background: rgba(139,92,246,0.1); box-shadow: 0 0 15px rgba(139,92,246,0.2); } /* Death Screen Inline Settings */ .death-settings-panel { margin-top: 16px; padding: 16px 20px; background: rgba(15,15,25,0.9); border: 1px solid rgba(139,92,246,0.2); border-radius: 12px; text-align: left; } .ds-section { margin-bottom: 14px; } .ds-section:last-child { margin-bottom: 0; } .ds-title { font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 800; color: #8b5cf6; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 10px; } .ds-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ds-row label { flex: 0 0 50px; font-size: 12px; color: #cbd5e1; font-weight: 600; } .ds-slider { flex: 1; } .ds-val { flex: 0 0 36px; font-size: 11px; color: #94a3b8; text-align: right; } .ds-keybinds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 10px; } .ds-kb { display: flex; align-items: center; gap: 8px; } .ds-kb label { flex: 1; font-size: 11px; color: #cbd5e1; font-weight: 600; } .ds-kb-btn { flex: 0 0 60px; padding: 5px 8px; font-size: 12px; } .ds-presets { display: flex; gap: 6px; justify-content: center; } .ds-presets .ds-preset { padding: 5px 14px; font-size: 11px; } /* ============================================ IN-GAME PAUSE MENU ============================================ */ #pauseMenu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(8,10,18,0.78) 0%, rgba(2,3,8,0.92) 70%); backdrop-filter: blur(10px) saturate(0.9); -webkit-backdrop-filter: blur(10px) saturate(0.9); animation: pauseFadeIn 0.18s ease-out; } @keyframes pauseFadeIn { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; } } .pause-container { position: relative; width: 380px; max-width: 92vw; max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 60%, rgba(255,255,255,0) 100%), linear-gradient(155deg, rgba(14,16,24,0.96) 0%, rgba(10,11,18,0.98) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 26px 26px 22px; box-shadow: 0 24px 60px -12px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.02) inset, 0 1px 0 rgba(255,255,255,0.06) inset; animation: pauseSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes pauseSlideIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .pause-container::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 56px; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(74,222,128,0.6) 50%, transparent 100%); border-radius: 0 0 4px 4px; } .pause-title { font-family: 'Rajdhani', 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: rgba(226,232,240,0.55); text-transform: uppercase; letter-spacing: 6px; text-align: center; margin: 4px 0 22px; position: relative; } .pause-title::before, .pause-title::after { content: ''; display: inline-block; width: 18px; height: 1px; background: rgba(255,255,255,0.12); vertical-align: middle; margin: 0 12px; } .pause-section { margin-bottom: 16px; padding: 14px; background: rgba(255,255,255,0.03); border-radius: 10px; border: 1px solid rgba(255,255,255,0.05); } .pause-section-title { font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 800; color: #8b5cf6; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 10px; } .pause-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .pause-row label { flex: 0 0 55px; font-size: 13px; color: #cbd5e1; font-weight: 600; } .pause-val { flex: 0 0 38px; font-size: 11px; color: #94a3b8; text-align: right; } .pause-keybinds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-bottom: 10px; } .pause-kb { display: flex; align-items: center; gap: 8px; } .pause-kb label { flex: 1; font-size: 11px; color: #cbd5e1; font-weight: 600; } .pause-kb-btn { flex: 0 0 60px; padding: 5px 8px; font-size: 12px; } .pause-presets { display: flex; gap: 6px; justify-content: center; margin-top: 4px; } .pause-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; } .btn-pause-resume, .btn-pause-settings, .btn-pause-quit { width: 100%; padding: 13px 16px; font-family: 'Inter', 'Rajdhani', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 10px; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease; display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden; } .btn-pause-resume { background: linear-gradient(180deg, rgba(74,222,128,0.18) 0%, rgba(74,222,128,0.08) 100%); border: 1px solid rgba(74,222,128,0.35); color: #86efac; box-shadow: 0 0 0 1px rgba(74,222,128,0.05) inset, 0 6px 20px -8px rgba(74,222,128,0.25); } .btn-pause-resume::before { content: ''; display: inline-block; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; opacity: 0.9; } .btn-pause-resume:hover { background: linear-gradient(180deg, rgba(74,222,128,0.28) 0%, rgba(74,222,128,0.14) 100%); border-color: rgba(74,222,128,0.6); color: #bbf7d0; box-shadow: 0 0 0 1px rgba(74,222,128,0.1) inset, 0 10px 28px -8px rgba(74,222,128,0.4); } .btn-pause-resume:active { transform: translateY(1px); } .btn-pause-settings { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(226,232,240,0.85); } .btn-pause-settings:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); color: #e2e8f0; } .btn-pause-settings:active { transform: translateY(1px); } .btn-pause-quit { background: transparent; border: 1px solid rgba(255,255,255,0.06); color: rgba(148,163,184,0.7); font-weight: 500; letter-spacing: 1.2px; font-size: 12px; } .btn-pause-quit:hover { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.25); color: rgba(239,68,68,0.85); } .btn-pause-quit:active { transform: translateY(1px); } /* ============================================ EVENT POPUP ============================================ */ #eventPopup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 200; text-align: center; pointer-events: none; } .event-container { background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 48px 64px; border-radius: 20px; border: 1px solid rgba(139, 92, 246, 0.4); box-shadow: 0 0 60px rgba(139, 92, 246, 0.15), 0 0 120px rgba(0, 0, 0, 0.5); animation: eventIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .event-container.closing { animation: eventOut 0.3s ease-in forwards; } .event-name { font-size: 42px; font-weight: 900; letter-spacing: -1px; background: linear-gradient(135deg, #8b5cf6, #d946ef, #f59e0b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.3)); } .event-desc { font-size: 16px; color: #94a3b8; margin-top: 12px; line-height: 1.5; } @keyframes eventIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes eventOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.1); } } /* ============================================ HUD - DOMINANCE BAR (improved with gradient zones) ============================================ */ /* ============================================ HUD - DOMINANCE BAR (redesigned) ============================================ */ #dominanceBar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 560px; max-width: 96vw; z-index: 50; background: linear-gradient(180deg, rgba(8,8,16,0.95) 0%, rgba(12,10,22,0.92) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(139,92,246,0.15); border-top: none; border-radius: 0 0 16px 16px; padding: 8px 16px 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 30px rgba(139,92,246,0.08); } .dom-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .dom-title-group { display: flex; align-items: center; gap: 6px; } .dom-icon { font-size: 14px; filter: brightness(1.5); } .dom-label { font-size: 10px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: rgba(139,92,246,0.8); white-space: nowrap; } .dom-zone-badge { font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #ffd700; padding: 2px 10px; border-radius: 10px; background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.2); white-space: nowrap; } .dom-btc-pct { font-size: 13px; font-weight: 800; color: #f7931a; white-space: nowrap; font-family: 'Rajdhani', monospace; } .dom-track { width: 100%; height: 14px; background: rgba(255,255,255,0.04); border-radius: 7px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); } .dom-fill { display: none; } .dom-zone-markers { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .dom-marker { position: absolute; top: 0; width: 1px; height: 100%; background: rgba(255,255,255,0.12); } /* Faction icon row below bar */ .dom-faction-icons { display: flex; justify-content: space-between; margin-top: 6px; padding: 0 4px; } .dom-fi { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; min-width: 0; } .dom-fi img { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.1); transition: border-color 0.3s, transform 0.3s; } .dom-fi:hover img { transform: scale(1.15); border-color: rgba(255,255,255,0.4); } .dom-fi-pct { font-size: 9px; font-weight: 700; color: #94a3b8; font-family: 'Rajdhani', monospace; letter-spacing: 0.5px; } /* ============================================ HUD - FACTION SCOREBOARD (replaces individual leaderboard) ============================================ */ #leaderboard { position: fixed; top: 64px; right: 12px; z-index: 50; width: 200px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); padding: 8px 10px; } .lb-title { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #6b6b8a; letter-spacing: 2px; margin-bottom: 6px; } /* Faction row wrapper */ .lb-row { height: 28px; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 0; } .lb-row:last-child { border-bottom: none; } /* Top line: dot + name + spacer + stats */ .lb-row-top { display: flex; align-items: center; gap: 5px; line-height: 1; } .lb-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .lb-faction-name { font-size: 11px; font-weight: 700; flex-shrink: 0; letter-spacing: 0.5px; } .lb-miners { font-size: 10px; color: rgba(255,255,255,0.45); flex-shrink: 0; } .lb-spacer { flex: 1; } .lb-hashrate { font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; } /* Dominance % bar */ .lb-bar-track { width: 100%; height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; margin-top: 2px; overflow: hidden; } .lb-bar-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; } /* ============================================ HUD - PLAYER STATS PANEL (top-left) ============================================ */ #playerStats { position: fixed; top: 64px; left: 12px; bottom: auto; z-index: 50; width: 200px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .ps-row { display: flex; align-items: center; gap: 8px; } .ps-row.ps-inline { justify-content: space-between; } .ps-stat { display: flex; align-items: center; gap: 6px; } .ps-label { font-size: 10px; font-weight: 700; color: #7c7c9a; letter-spacing: 0.5px; text-transform: uppercase; min-width: 24px; flex-shrink: 0; } .ps-bar-track { flex: 1; height: 6px; background: #1e1e2e; border-radius: 3px; overflow: hidden; } .ps-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; } .ps-bar-fill.ps-hp { background: linear-gradient(90deg, #ef4444, #22c55e); } .ps-bar-fill.ps-hash { background: linear-gradient(90deg, #8b5cf6, #d946ef); } .ps-val { font-size: 12px; font-weight: 700; color: #c8c8d8; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; } .ps-combo { color: #f59e0b; font-size: 14px; } /* ============================================ HUD - HP BAR (above cooldowns, bottom center) ============================================ */ /* ============================================ HUD - HP BAR (above ability bar) ============================================ */ #hpBarHUD { position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%); z-index: 50; width: 420px; } #hpBarTrack { position: relative; width: 100%; height: 28px; background: linear-gradient(180deg, rgba(10,10,15,0.9), rgba(20,20,30,0.85)); border-radius: 14px; border: 2px solid rgba(255, 255, 255, 0.2); overflow: hidden; backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); } #hpBarFill { height: 100%; width: 100%; border-radius: 12px; background: linear-gradient(180deg, #4ade80, #22c55e); transition: width 0.2s ease, background 0.3s ease; box-shadow: 0 0 16px rgba(34, 197, 94, 0.5), inset 0 1px 0 rgba(255,255,255,0.25); } #hpBarFill.hp-mid { background: linear-gradient(180deg, #fbbf24, #f59e0b); box-shadow: 0 0 12px rgba(245, 158, 11, 0.5), inset 0 1px 0 rgba(255,255,255,0.2); } #hpBarFill.hp-low { background: linear-gradient(180deg, #f87171, #ef4444); box-shadow: 0 0 16px rgba(239, 68, 68, 0.6), inset 0 1px 0 rgba(255,255,255,0.15); animation: hpPulse 0.8s ease-in-out infinite; } @keyframes hpPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 16px rgba(239, 68, 68, 0.6); } 50% { opacity: 0.8; box-shadow: 0 0 24px rgba(239, 68, 68, 0.9); } } #hpBarTicks { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } #hpBarTicks .hp-tick { position: absolute; top: 0; width: 1px; height: 100%; background: rgba(0, 0, 0, 0.5); border-right: 1px solid rgba(255, 255, 255, 0.1); } #hpBarText { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.5); letter-spacing: 1px; z-index: 2; pointer-events: none; } /* T2-H: Heroicons in HUD — minimal, decorative, never interactive */ .hud-icon { display: inline-block; vertical-align: middle; pointer-events: none; user-select: none; /* white tint via filter — heroicons SVGs default to currentColor=black */ filter: brightness(0) invert(1); } .hud-icon-hp { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); width: 14px; height: 14px; z-index: 2; filter: brightness(0) saturate(100%) invert(36%) sepia(95%) saturate(2870%) hue-rotate(338deg) brightness(101%) contrast(101%); opacity: 0.95; } .hud-icon-cd { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; z-index: 3; opacity: 0.55; filter: brightness(0) invert(1); } /* ============================================ HUD - COOLDOWNS / ABILITY BAR (bottom center) ============================================ */ #cooldowns { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: row; gap: 8px; align-items: flex-end; background: linear-gradient(180deg, rgba(10,10,18,0.7), rgba(5,5,12,0.85)); border-radius: 16px; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); backdrop-filter: blur(12px); } .cd-item { width: 64px; height: 72px; border-radius: 12px; background: linear-gradient(180deg, rgba(30,30,45,0.9), rgba(15,15,25,0.95)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,0.1); position: relative; overflow: visible; display: flex; align-items: center; justify-content: center; transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s; flex-shrink: 0; cursor: default; } .cd-item:hover { transform: translateY(-2px); } .cd-item:hover .ability-tooltip { display: block; opacity: 1; } /* LoL-style ability tooltip */ .ability-tooltip { display: none; opacity: 0; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 10px; width: 260px; padding: 10px 12px; background: linear-gradient(180deg, rgba(10,10,25,0.97), rgba(5,5,15,0.98)); border: 1px solid rgba(200,170,80,0.35); border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 15px rgba(200,170,80,0.08); z-index: 9999; pointer-events: none; font-family: inherit; text-align: left; transition: opacity 0.15s; white-space: normal; word-wrap: break-word; } .ability-tooltip .tt-name { font-size: 13px; font-weight: 700; color: #f5c518; margin-bottom: 2px; } .ability-tooltip .tt-meta { font-size: 9px; color: rgba(255,255,255,0.35); margin-bottom: 6px; letter-spacing: 0.5px; } .ability-tooltip .tt-desc { font-size: 11px; color: rgba(255,255,255,0.75); line-height: 1.5; margin-bottom: 6px; } .ability-tooltip .tt-stats { font-size: 10px; color: rgba(100,220,140,0.8); line-height: 1.6; } .ability-tooltip .tt-stats span { color: #ffffff; font-weight: 600; } /* Per-key colored top+bottom accents */ .cd-item[data-ability="q"] { border-top: 3px solid #f5c518; border-bottom: 2px solid rgba(245,197,24,0.3); } .cd-item[data-ability="e"] { border-top: 3px solid #ff4444; border-bottom: 2px solid rgba(255,68,68,0.3); } .cd-item[data-ability="f"] { border-top: 3px solid #00b4d8; border-bottom: 2px solid rgba(0,180,216,0.3); } .cd-item[data-ability="t"] { border-top: 3px solid #22c55e; border-bottom: 2px solid rgba(34,197,94,0.3); } .cd-item[data-ability="r"] { border-top: 3px solid #a855f7; border-bottom: 2px solid rgba(168,85,247,0.3); } .cd-icon { font-size: 22px; position: relative; z-index: 2; line-height: 1; margin-bottom: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); } /* Cooldown overlay — hidden by default, JS uses canvas clock now */ .cd-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background: rgba(0, 0, 0, 0.72); transition: height 0.1s linear; z-index: 1; display: none; /* replaced by canvas clock */ } /* Canvas clock overlay for LoL-style cooldown */ .cd-clock { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; border-radius: 12px; overflow: hidden; } /* Cooldown timer text */ .cd-timer { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 800; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.7); z-index: 5; pointer-events: none; opacity: 0; transition: opacity 0.15s; } .cd-item.cd-on-cooldown .cd-timer { opacity: 1; } /* Charge counter badge */ .cd-charges { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; border-radius: 9px; background: linear-gradient(135deg, #f5c518, #e6a800); color: #000; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 6; box-shadow: 0 1px 4px rgba(0,0,0,0.6); line-height: 1; padding: 0 4px; } /* Two-line key label wrapper */ .cd-key-wrap { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; flex-direction: column; align-items: center; z-index: 3; padding-bottom: 5px; line-height: 1.2; } .cd-key-letter { font-size: 18px; font-weight: 800; color: #ffffff; letter-spacing: 0.5px; text-shadow: 0 1px 4px rgba(0,0,0,1); } .cd-key-label { font-size: 9px; font-weight: 600; color: rgba(200,200,220,0.9); letter-spacing: 0.5px; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,0.9); white-space: nowrap; } /* Legacy .cd-key fallback */ .cd-key { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); font-size: 14px; font-weight: 700; color: #ffffff; z-index: 3; letter-spacing: 0px; } /* Ready state — glowing border */ .cd-item.cd-ready { border-color: rgba(139, 92, 246, 0.6); box-shadow: 0 0 12px rgba(139, 92, 246, 0.3), inset 0 0 8px rgba(139, 92, 246, 0.1); } .cd-item.cd-ready[data-ability="q"] { border-color: rgba(245,197,24,0.6); box-shadow: 0 0 12px rgba(245,197,24,0.25); } .cd-item.cd-ready[data-ability="e"] { border-color: rgba(255,68,68,0.6); box-shadow: 0 0 12px rgba(255,68,68,0.25); } .cd-item.cd-ready[data-ability="f"] { border-color: rgba(0,180,216,0.6); box-shadow: 0 0 12px rgba(0,180,216,0.25); } .cd-item.cd-ready[data-ability="t"] { border-color: rgba(34,197,94,0.6); box-shadow: 0 0 12px rgba(34,197,94,0.25); } .cd-item.cd-ready[data-ability="r"] { border-color: rgba(168,85,247,0.6); box-shadow: 0 0 12px rgba(168,85,247,0.25); } /* On-cooldown darkened state */ .cd-item.cd-on-cooldown { background: linear-gradient(180deg, rgba(15,15,20,0.95), rgba(8,8,12,0.98)); } .cd-item.cd-on-cooldown .cd-key-letter, .cd-item.cd-on-cooldown .cd-key-label { opacity: 0.4; } /* Flash animation when ability becomes ready */ @keyframes cdReadyFlash { 0% { box-shadow: 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: 0 0 20px rgba(255,255,255,0.5), 0 0 40px rgba(139,92,246,0.4); } 100% { box-shadow: 0 0 12px rgba(139,92,246,0.3); } } .cd-item.cd-just-ready { animation: cdReadyFlash 0.5s ease-out; } /* ============================================ HUD - KILL FEED (middle right, clear of leaderboard & minimap) ============================================ */ #killFeed { position: fixed; top: 50%; transform: translateY(-50%); right: 12px; left: auto; z-index: 49; width: 180px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; max-height: 40vh; overflow: hidden; } .kill-entry { padding: 4px 8px; background: rgba(0, 0, 0, 0.45); border-radius: 5px; font-size: 10px; color: #94a3b8; animation: killSlideIn 0.3s ease-out; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; gap: 5px; border-left: 2px solid transparent; } .kill-entry .kill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .kill-entry .kill-dot.btc { background: #f7931a; } .kill-entry .kill-dot.eth { background: #627eea; } .kill-entry .kill-dot.tao { background: #00d4ff; } .kill-entry .kill-dot.doge { background: #c2a633; } .kill-entry .kill-dot.sol { background: #9945ff; } @keyframes killSlideIn { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .kill-entry.fading { animation: killFade 0.5s ease-out forwards; } @keyframes killFade { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(10px); } } /* Faction colored names in kill feed */ .kill-entry .name-btc { color: #f7931a; font-weight: 600; } .kill-entry .name-ai { color: #00d4aa; font-weight: 600; } .kill-entry .name-meme { color: #ff69b4; font-weight: 600; } .kill-entry .name-whale { color: #c0c0c0; font-weight: 600; } /* ============================================ HUD - MINIMAP (bottom right) ============================================ */ #minimapWrap { position: fixed; bottom: 80px; right: 14px; z-index: 50; width: 200px; height: 200px; border-radius: 12px; border: 1px solid rgba(100, 220, 140, 0.15); background: rgba(4, 4, 12, 0.75); overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #minimap { display: block; width: 100%; height: 100%; } /* ============================================ HUD - FPS / PING DISPLAY ============================================ */ #perfDisplay { position: fixed; bottom: 16px; left: 12px; top: auto; right: auto; z-index: 48; display: flex; gap: 8px; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.25); pointer-events: none; } #fpsCounter, #pingDisplay { background: rgba(10, 10, 15, 0.5); padding: 2px 6px; border-radius: 4px; } /* ============================================ CHAT BOX ============================================ */ #chatBox { position: fixed; bottom: 36px; left: 12px; width: 360px; z-index: 200; pointer-events: none; display: flex; flex-direction: column; } #chatBox:hover { pointer-events: auto; } #chatMessages { max-height: 320px; overflow-y: auto; padding: 8px 0; pointer-events: auto; } /* native scrollbar removed */ .chat-msg { display: flex; align-items: flex-start; gap: 6px; padding: 5px 10px; margin-bottom: 3px; background: rgba(10,10,20,0.8); border-radius: 8px; border-left: 3px solid rgba(139,92,246,0.3); font-size: 13px; color: #e2e8f0; animation: slideIn 0.25s ease-out; backdrop-filter: blur(6px); line-height: 1.4; } .chat-msg.chat-taunt { border-left-color: #ffd700; background: rgba(30,25,10,0.85); } .chat-msg.chat-bot-beef { border-left-color: #ff4444; background: rgba(30,10,10,0.85); } .chat-msg .chat-faction-logo { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; border: 1px solid rgba(255,255,255,0.15); } .chat-msg .chat-content { flex: 1; min-width: 0; } .chat-msg .chat-name { font-weight: 700; margin-right: 6px; } #chatInput { width: 100%; padding: 10px 14px; background: rgba(10,10,20,0.9); border: 1px solid rgba(139,92,246,0.3); border-radius: 10px; color: #e2e8f0; font-size: 13px; outline: none; pointer-events: auto; display: none; backdrop-filter: blur(8px); margin-top: 6px; } #chatInput:focus { border-color: #8b5cf6; box-shadow: 0 0 12px rgba(139,92,246,0.3); } /* ============================================ FRIENDS PANEL ============================================ */ #friendsToggleBtn { position: fixed; bottom: 240px; right: 12px; width: 44px; height: 44px; border-radius: 50%; background: rgba(10,10,20,0.85); border: 2px solid rgba(139,92,246,0.4); color: #fff; font-size: 20px; cursor: pointer; z-index: 201; backdrop-filter: blur(6px); transition: all 0.2s; } #friendsToggleBtn:hover { border-color: #8b5cf6; box-shadow: 0 0 16px rgba(139,92,246,0.4); transform: scale(1.1); } #friendsPanel { position: fixed; bottom: 292px; right: 12px; width: 280px; max-height: 420px; background: rgba(10,10,20,0.92); border: 1px solid rgba(139,92,246,0.3); border-radius: 12px; z-index: 202; pointer-events: auto; backdrop-filter: blur(10px); overflow: hidden; display: flex; flex-direction: column; } #friendsPanelHeader { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: rgba(139,92,246,0.15); border-bottom: 1px solid rgba(139,92,246,0.2); font-weight: 700; font-size: 14px; color: #e2e8f0; } #friendsPanelClose { background: none; border: none; color: #aaa; font-size: 20px; cursor: pointer; padding: 0 4px; } #friendsPanelClose:hover { color: #fff; } #friendsAuthStatus { padding: 8px 14px; font-size: 11px; color: #888; } #friendsAuthStatus.auth-ok { color: #22c55e; } #friendsAuthStatus.auth-fail { color: #ef4444; } #friendsAddSection { display: flex; gap: 6px; padding: 6px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); } #friendAddInput { flex: 1; padding: 6px 10px; background: rgba(30,30,50,0.8); border: 1px solid rgba(139,92,246,0.2); border-radius: 6px; color: #e2e8f0; font-size: 12px; outline: none; } #friendAddInput:focus { border-color: #8b5cf6; } #friendAddBtn { padding: 6px 12px; background: rgba(139,92,246,0.3); border: 1px solid rgba(139,92,246,0.4); border-radius: 6px; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; } #friendAddBtn:hover { background: rgba(139,92,246,0.5); } #friendsPendingSection { max-height: 100px; overflow-y: auto; } #friendsList { flex: 1; overflow-y: auto; padding: 4px 0; } .friend-item { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 13px; color: #e2e8f0; transition: background 0.15s; } .friend-item:hover { background: rgba(139,92,246,0.1); } .friend-item .friend-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(139,92,246,0.2); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .friend-item .friend-info { flex: 1; min-width: 0; } .friend-item .friend-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .friend-item .friend-status { font-size: 10px; color: #888; } .friend-item .friend-status.online { color: #22c55e; } .friend-item .friend-actions { display: flex; gap: 4px; } .friend-item .friend-actions button { padding: 3px 8px; border-radius: 4px; border: none; font-size: 10px; font-weight: 600; cursor: pointer; } .friend-invite-btn { background: rgba(34,197,94,0.3); color: #22c55e; border: 1px solid rgba(34,197,94,0.3) !important; } .friend-invite-btn:hover { background: rgba(34,197,94,0.5); } .friend-accept-btn { background: rgba(34,197,94,0.3); color: #22c55e; border: 1px solid rgba(34,197,94,0.3) !important; } .friend-reject-btn { background: rgba(239,68,68,0.3); color: #ef4444; border: 1px solid rgba(239,68,68,0.3) !important; } .friend-remove-btn { background: rgba(239,68,68,0.2); color: #ef4444; border: 1px solid rgba(239,68,68,0.2) !important; } .pending-label { padding: 4px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #fbbf24; letter-spacing: 0.5px; } /* ============================================ MOBILE TOUCH CONTROLS ============================================ */ .mobile-only { display: none !important; } body.is-mobile .mobile-only { display: block !important; } #mobileControls { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; } .touch-joystick-zone { position: absolute; bottom: 40px; left: 20px; width: 140px; height: 140px; pointer-events: auto; } .joystick-base { width: 100px; height: 100px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(255, 255, 255, 0.12); position: absolute; bottom: 20px; left: 20px; display: flex; align-items: center; justify-content: center; } .joystick-knob { width: 40px; height: 40px; border-radius: 50%; background: rgba(139, 92, 246, 0.5); border: 2px solid rgba(139, 92, 246, 0.7); transition: transform 0.05s; box-shadow: 0 0 12px rgba(139, 92, 246, 0.3); } .touch-buttons { position: absolute; bottom: 40px; right: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; justify-items: center; pointer-events: auto; } .touch-btn { width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.15); background: rgba(10, 10, 15, 0.7); color: #c8c8d8; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: transform 0.1s, background 0.1s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .touch-btn:active { transform: scale(0.9); background: rgba(139, 92, 246, 0.3); } .touch-shoot { grid-column: span 2; width: 76px; height: 76px; border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.15); color: #ef4444; font-size: 14px; } .touch-shoot:active { background: rgba(239, 68, 68, 0.4); } .touch-shield { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.1); color: #22c55e; } .touch-split { border-color: rgba(139, 92, 246, 0.4); background: rgba(139, 92, 246, 0.1); color: #8b5cf6; } .touch-allin { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.1); color: #f59e0b; } .touch-secondary { border-color: rgba(59, 130, 246, 0.4); background: rgba(59, 130, 246, 0.1); color: #3b82f6; } .touch-dash { border-color: rgba(34, 197, 94, 0.5); background: rgba(34, 197, 94, 0.15); color: #22c55e; font-size: 13px; } .touch-dash:active { background: rgba(34, 197, 94, 0.4); } .touch-overclock { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.1); color: #ef4444; } .touch-taunt { border-color: rgba(168, 85, 247, 0.4); background: rgba(168, 85, 247, 0.1); color: #a855f7; } /* ============================================ MOBILE PORTRAIT MODE 2026-05-21 — Wild Rift-style touch HUD. Left: bigger joystick with directional ring (hint that joystick = movement AND aim direction). Right: ability buttons get gradients, color-coded glows, proper hierarchy (FIRE = big primary, DASH = secondary, abilities = compact arc above). ============================================ */ @media (orientation: portrait) and (max-width: 768px) { /* Joystick — bigger, brighter, with directional ring to show it controls aim too (Wild Rift signature visual). 2026-05-22: safe-area-inset-bottom respects iPhone home indicator (~34px). */ .touch-joystick-zone { bottom: calc(110px + env(safe-area-inset-bottom, 0px)); left: calc(16px + env(safe-area-inset-left, 0px)); width: 140px; height: 140px; } .joystick-base { width: 110px; height: 110px; bottom: 14px; left: 14px; background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.04) 60%, transparent 100%), rgba(8, 8, 14, 0.45); border: 2px solid rgba(139, 92, 246, 0.30); box-shadow: 0 0 22px rgba(139, 92, 246, 0.18), inset 0 0 14px rgba(139, 92, 246, 0.10); } .joystick-knob { width: 42px; height: 42px; background: radial-gradient(circle at 35% 30%, #c4a8ff 0%, #8b5cf6 55%, #6d3fd6 100%); border: 2px solid rgba(255, 255, 255, 0.40); box-shadow: 0 0 20px rgba(139, 92, 246, 0.6), 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.35); } /* === MOBILE CONTROLS — 6 BUTTONS, 2-COL × 3-ROW, NO OVERLAP === 2026-05-22 — STOP removed. 6 buttons all visible, strict 8px gaps, each column center-aligned, total cluster 172×220px in thumb zone. Row 3 (top, smaller): [HONEYPOT 54] [DUMP 54] Row 2 (boosts, medium): [HOPIUM 60] [BUY DIP 60] Row 1 (primary, biggest): [DASH 76] [FIRE 88] ============================================================= */ .touch-buttons { /* safe-area-inset accounts for iPhone home indicator (~34px) so the FIRE button isn't under the gesture bar. */ bottom: calc(14px + env(safe-area-inset-bottom, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); width: 172px; height: 230px; display: block; grid-template-columns: none; gap: 0; pointer-events: auto; } .touch-btn { position: absolute; border-width: 2px; font-weight: 800; letter-spacing: 0.3px; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.55) 80%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease; } .touch-btn:active { transform: scale(0.88); } /* ===== Row 1 (bottom) — primary actions ===== */ /* FIRE — bottom-right corner, biggest (88×88). */ .touch-shoot { right: 0; bottom: 0; width: 88px; height: 88px; border-radius: 50%; font-size: 15px; border-color: rgba(239, 68, 68, 0.7); background: radial-gradient(circle at 50% 30%, rgba(255, 100, 100, 0.4) 0%, rgba(180, 30, 30, 0.6) 60%, rgba(80, 10, 10, 0.75) 100%); color: #fff; box-shadow: 0 0 32px rgba(239, 68, 68, 0.5), 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 200, 200, 0.20); } .touch-shoot:active { background: radial-gradient(circle at 50% 30%, rgba(255, 140, 140, 0.6) 0%, rgba(220, 50, 50, 0.75) 60%, rgba(100, 15, 15, 0.9) 100%); box-shadow: 0 0 44px rgba(239, 68, 68, 0.75), inset 0 2px 0 rgba(255, 220, 220, 0.28); } /* DASH — left of FIRE, 76×76. 8px horizontal gap (FIRE 88 + 8 = 96). */ .touch-dash { right: 96px; bottom: 6px; /* shifted up 6px so DASH center aligns with FIRE center */ width: 76px; height: 76px; border-radius: 50%; font-size: 13px; border-color: rgba(34, 197, 94, 0.7); background: radial-gradient(circle at 50% 30%, rgba(100, 255, 150, 0.32) 0%, rgba(20, 140, 60, 0.6) 60%, rgba(8, 60, 30, 0.75) 100%); color: #fff; box-shadow: 0 0 24px rgba(34, 197, 94, 0.45), 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(200, 255, 200, 0.20); } .touch-dash:active { background: radial-gradient(circle at 50% 30%, rgba(140, 255, 180, 0.6) 0%, rgba(40, 180, 90, 0.75) 60%, rgba(15, 90, 45, 0.9) 100%); box-shadow: 0 0 36px rgba(34, 197, 94, 0.7), inset 0 2px 0 rgba(220, 255, 220, 0.28); } /* ===== Row 2 (middle) — boosts (60×60), 8px vertical gap above row 1 ===== */ /* BUY DIP — above FIRE, centered on FIRE's 88px (right = (88-60)/2 = 14). */ .touch-overclock { right: 14px; bottom: 96px; /* FIRE bottom 0 + FIRE height 88 + 8 gap = 96 */ width: 60px; height: 60px; border-radius: 50%; font-size: 11px; border-color: rgba(139, 92, 246, 0.7); background: radial-gradient(circle at 50% 30%, rgba(180, 140, 255, 0.22) 0%, rgba(80, 40, 160, 0.6) 70%, rgba(30, 15, 60, 0.75) 100%); color: #d4c2ff; box-shadow: 0 0 18px rgba(139, 92, 246, 0.35), 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(200, 180, 255, 0.18); } /* HOPIUM — above DASH, centered on DASH's 76px (right = 96 + (76-60)/2 = 104). */ .touch-adrenaline { right: 104px; bottom: 90px; /* DASH bottom 6 + DASH height 76 + 8 gap = 90 */ width: 60px; height: 60px; border-radius: 50%; font-size: 11px; border-color: rgba(0, 220, 255, 0.65); background: radial-gradient(circle at 50% 30%, rgba(120, 240, 255, 0.20) 0%, rgba(0, 80, 110, 0.6) 70%, rgba(0, 30, 50, 0.75) 100%); color: #b8f0ff; box-shadow: 0 0 18px rgba(0, 220, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(180, 240, 255, 0.18); } /* ===== Row 3 (top) — situational (54×54), 8px vertical gap above row 2 ===== */ /* DUMP — above BUY DIP, centered on BUY DIP's 60px (right = 14 + (60-54)/2 = 17). */ .touch-secondary { right: 17px; bottom: 164px; /* BUY DIP bottom 96 + height 60 + 8 gap = 164 */ width: 54px; height: 54px; border-radius: 50%; font-size: 11px; border-color: rgba(59, 130, 246, 0.7); background: radial-gradient(circle at 50% 30%, rgba(120, 180, 255, 0.22) 0%, rgba(20, 80, 180, 0.6) 70%, rgba(8, 30, 70, 0.75) 100%); color: #b8d4ff; box-shadow: 0 0 18px rgba(59, 130, 246, 0.35), 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(180, 210, 255, 0.18); } /* HONEYPOT — above HOPIUM, centered (right = 104 + (60-54)/2 = 107). */ .touch-allin { right: 107px; bottom: 158px; /* HOPIUM bottom 90 + height 60 + 8 gap = 158 */ width: 54px; height: 54px; border-radius: 50%; font-size: 10px; border-color: rgba(245, 158, 11, 0.7); background: radial-gradient(circle at 50% 30%, rgba(255, 200, 100, 0.24) 0%, rgba(160, 80, 0, 0.6) 70%, rgba(60, 30, 0, 0.75) 100%); color: #ffdb8a; box-shadow: 0 0 18px rgba(245, 158, 11, 0.35), 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 220, 150, 0.18); } /* ============================================================ COOLDOWN OVERLAY (LoL Wild Rift style) — rev2 2026-05-22 Dark wedge that drains COUNTER-CLOCKWISE from 12 o'clock as the cooldown ticks. Pure CSS conic-gradient — no SVG, no canvas. JS sets `--cd` (0..1) where 1 = full cooldown, 0 = ready. Bug-fix from rev1: the wedge ORDER was reversed (drained wrong way) AND opacity = var(--cd) made it invisible (50% CD = 50% transparent). ============================================================ */ .touch-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; /* over the radial-gradient background, under the text */ /* Dark wedge from 12 o'clock spans (--cd * 360°), then transparent. --cd = 1 → full dark overlay (CD just started, full duration left) --cd = 0.5 → half-disc dark (half CD remaining) --cd = 0 → wedge of 0° = fully transparent (button ready) */ background: conic-gradient( from -90deg, rgba(0, 0, 0, 0.62) 0deg, rgba(0, 0, 0, 0.62) calc(var(--cd, 0) * 360deg), transparent calc(var(--cd, 0) * 360deg), transparent 360deg ); transition: background 0.05s linear; /* smooth tick */ } /* Text/icon span ABOVE the overlay so it stays readable during CD */ .touch-btn { position: absolute; } .touch-btn > * { position: relative; z-index: 3; } /* Label + CD-timer text inside each button. Default state: label visible, timer empty + hidden. On cooldown (--cd > 0): timer shows the seconds remaining, label fades. */ .touch-btn .ab-lbl { display: inline-block; transition: opacity 0.12s ease; } .touch-btn .ab-cd-num { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 22px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.12s ease; z-index: 4; /* over the conic overlay */ line-height: 1; } /* When on CD: hide label, show timer */ .touch-btn[style*="--cd"] .ab-lbl { opacity: 0.18; } .touch-btn[style*="--cd"] .ab-cd-num { opacity: 1; } /* FIRE/DASH primary buttons get slightly bigger timer text */ .touch-shoot .ab-cd-num { font-size: 28px; } .touch-dash .ab-cd-num { font-size: 24px; } /* Dim button slightly when on cooldown for clearer "not ready" signal */ .touch-btn[style*="--cd"] { filter: saturate(0.65); transition: filter 0.18s ease; } .touch-btn:not([style*="--cd"]) { filter: none; } /* Flash white pulse when cooldown finishes (JS adds .cd-ready briefly) */ @keyframes cdReady { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); } 50% { box-shadow: 0 0 24px 6px rgba(255,255,255,0.7); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); } } .touch-btn.cd-ready { animation: cdReady 0.5s ease-out; } /* Move minimap to top-left in portrait */ #minimapWrap { bottom: auto !important; right: auto !important; top: 8px !important; left: 8px !important; transform: scale(0.7); transform-origin: top left; } /* Shrink leaderboard */ #leaderboard { transform: scale(0.75); transform-origin: top right; } } /* ============================================ MOBILE LANDSCAPE (wider buttons) ============================================ */ @media (orientation: landscape) and (max-height: 500px) { .touch-buttons { bottom: 15px; right: 15px; gap: 6px; } .touch-btn { width: 54px; height: 54px; font-size: 10px; } } /* ============================================ ANIMATIONS ============================================ */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10% { transform: translateX(-6px); } 20% { transform: translateX(6px); } 30% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 50% { transform: translateX(-2px); } 60% { transform: translateX(2px); } } @keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes fadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.05); } } @keyframes slideIn { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ============================================ VGPU CORNER — top right (VoltageGPU + Stats) ============================================ */ .vgpu-corner { position: absolute; top: 40px; right: 20px; z-index: 10; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .vgpu-corner-top { display: flex; align-items: center; gap: 8px; } /* ── Airdrop Banner Corner ── */ .airdrop-banner-corner { display: flex; align-items: center; gap: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; backdrop-filter: blur(12px); box-shadow: none; transition: background 0.15s ease, border-color 0.15s ease; } .airdrop-banner-corner:hover { background: var(--card-hover); border-color: var(--border-emphasis); box-shadow: none; } .abc-stat { display: flex; align-items: center; gap: 6px; } .abc-icon { font-size: 16px; } .abc-val { font-size: 14px; font-weight: 510; letter-spacing: normal; font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--accent); } .abc-coins-val { color: var(--accent); text-shadow: none; } .abc-dom-val { color: var(--accent); text-shadow: none; } .abc-rank-val { color: var(--accent); text-shadow: none; transition: color 0.15s ease; } /* Top-3 deserves the gold treatment — earned distinction */ .abc-rank-val.rank-top3 { color: #ffd700; text-shadow: 0 0 12px rgba(255,215,0,0.5); } .abc-rank-val.rank-top10 { color: var(--primary); text-shadow: none; } .abc-multi-val { color: var(--destructive); text-shadow: none; animation: abcPulse 2s ease-in-out infinite; } @keyframes abcPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .abc-label { font-size: 10px; font-weight: 510; color: var(--muted-foreground); letter-spacing: 0.05em; text-transform: uppercase; } .abc-multi-timer { font-size: 8px; color: var(--tertiary); } .abc-divider { width: 1px; height: 24px; background: var(--border); margin: 0 12px; } .abc-info-btn { background: var(--accent-dim); border: 1px solid var(--accent-border); border-radius: var(--radius-pill); width: auto; height: auto; padding: 4px 10px; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--accent); font-size: 11px; font-weight: 510; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; margin-left: 12px; flex-shrink: 0; letter-spacing: normal; text-shadow: none; animation: none; } .abc-info-btn:hover { background: rgba(74,222,128,0.18); border-color: rgba(74,222,128,0.35); box-shadow: none; transform: none; color: var(--accent); } .abc-info-btn:active { transform: none; } .abc-multi-stat { /* hidden by default, shown via JS */ } .btn-voltage-corner { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px 12px; color: var(--foreground); font-size: 13px; font-weight: 510; cursor: pointer; font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; backdrop-filter: blur(8px); } .btn-voltage-corner:hover { background: var(--card-hover); border-color: var(--primary); color: var(--foreground); box-shadow: none; transform: translateY(-1px); } .btn-signup-corner { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px 12px; color: var(--muted-foreground); font-size: 13px; font-weight: 510; cursor: pointer; font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; backdrop-filter: blur(8px); } .btn-signup-corner:hover { background: var(--card-hover); border-color: var(--border-emphasis); color: var(--foreground); transform: translateY(-1px); } /* ============================================ AUTH POPUP ============================================ */ #authPopup { background: linear-gradient(145deg, rgba(15,12,30,0.98), rgba(20,16,35,0.98)); border: 1px solid rgba(139,92,246,0.3); border-radius: 20px; padding: 32px 36px 28px; width: 400px; max-width: 92vw; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 0 60px rgba(139,92,246,0.15), 0 25px 50px rgba(0,0,0,0.5); backdrop-filter: blur(20px); } .auth-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: #666; font-size: 24px; cursor: pointer; transition: color 0.2s; line-height: 1; z-index: 2; } .auth-close:hover { color: #fff; } .auth-logo { text-align: center; margin-bottom: 24px; } .auth-logo-img { height: 80px; width: auto; max-width: 200px; object-fit: contain; filter: brightness(1.1) drop-shadow(0 0 20px rgba(139,92,246,0.3)); } .auth-tabs { display: flex; gap: 0; margin-bottom: 24px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(139,92,246,0.2); } .auth-tab { flex: 1; padding: 10px 0; background: rgba(255,255,255,0.03); border: none; color: #666; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.2s; } .auth-tab:hover { color: #999; background: rgba(255,255,255,0.06); } .auth-tab-active { background: rgba(139,92,246,0.15) !important; color: #c4b5fd !important; } .auth-form { display: flex; flex-direction: column; gap: 14px; } .auth-field { display: flex; flex-direction: column; gap: 5px; } .auth-field label { font-size: 12px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.5px; } .auth-field input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 12px 14px; color: #e2e8f0; font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.2s; } .auth-field input:focus { border-color: rgba(139,92,246,0.5); box-shadow: 0 0 0 3px rgba(139,92,246,0.1); } .auth-field input::placeholder { color: #444; } .auth-optional { font-weight: 400; color: #22c55e; text-transform: none; font-size: 11px; } .auth-error { color: #ef4444; font-size: 12px; font-weight: 600; min-height: 0; transition: all 0.2s; } .auth-error:empty { display: none; } .auth-success { color: #22c55e; font-size: 12px; font-weight: 600; min-height: 0; transition: all 0.2s; } .auth-success:empty { display: none; } .auth-submit { background: linear-gradient(135deg, #8b5cf6, #7c3aed); border: none; border-radius: 12px; padding: 13px 0; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.25s; margin-top: 4px; } .auth-submit:hover { background: linear-gradient(135deg, #a78bfa, #8b5cf6); transform: translateY(-1px); box-shadow: 0 4px 15px rgba(139,92,246,0.3); } .auth-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .auth-submit-register { background: linear-gradient(135deg, #22c55e, #16a34a); } .auth-submit-register:hover { background: linear-gradient(135deg, #4ade80, #22c55e); box-shadow: 0 4px 15px rgba(34,197,94,0.3); } .auth-forgot { text-align: center; color: #666; font-size: 12px; text-decoration: none; transition: color 0.2s; } .auth-forgot:hover { color: #a78bfa; } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #444; font-size: 12px; font-weight: 600; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08); } .auth-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 0; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; color: #ccc; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; } .auth-google:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; } .auth-bonus-info { margin-top: 16px; text-align: center; font-size: 11px; color: #666; line-height: 1.5; } .auth-bonus-badge { display: inline-block; background: rgba(139,92,246,0.2); color: #a78bfa; padding: 2px 8px; border-radius: 6px; font-weight: 800; font-size: 11px; } /* Logged-in state for account button — green border signals the active session */ .btn-voltage-corner.logged-in { border-color: var(--accent-border); } .btn-voltage-corner.logged-in:hover { border-color: var(--accent); box-shadow: none; } .btn-friends-corner { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px 12px; color: var(--foreground); font-size: 13px; font-weight: 510; cursor: pointer; font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; backdrop-filter: blur(8px); } .btn-friends-corner:hover { background: var(--card-hover); border-color: var(--primary); color: var(--foreground); box-shadow: none; transform: translateY(-1px); } /* === FRIENDS MENU POPUP === */ #friendsMenuOverlay { z-index: 9000; } #friendsMenuPopup { position: relative; width: 420px; max-width: 92vw; max-height: 80vh; background: linear-gradient(165deg, rgba(15,12,30,0.98), rgba(8,6,18,0.98)); border: 1px solid rgba(139,92,246,0.3); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(139,92,246,0.15); backdrop-filter: blur(20px); } .fmp-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: linear-gradient(90deg, rgba(139,92,246,0.15), rgba(34,197,94,0.1)); border-bottom: 1px solid rgba(139,92,246,0.15); } .fmp-title { font-size: 18px; font-weight: 800; color: #e2e8f0; letter-spacing: 0.5px; } .fmp-close { background: none; border: none; color: #888; font-size: 24px; cursor: pointer; padding: 0 4px; transition: color 0.2s; } .fmp-close:hover { color: #fff; } .fmp-auth-status { padding: 8px 20px; font-size: 12px; color: #888; } .fmp-auth-status.auth-ok { color: #22c55e; } .fmp-auth-status.auth-fail { color: #ef4444; } .fmp-add-row { display: flex; gap: 8px; padding: 8px 20px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); } .fmp-add-row input { flex: 1; padding: 10px 14px; background: rgba(30,30,50,0.8); border: 1px solid rgba(139,92,246,0.2); border-radius: 10px; color: #e2e8f0; font-size: 13px; outline: none; font-family: inherit; } .fmp-add-row input:focus { border-color: #8b5cf6; box-shadow: 0 0 10px rgba(139,92,246,0.15); } .fmp-add-btn { padding: 10px 20px; background: linear-gradient(135deg, rgba(139,92,246,0.4), rgba(34,197,94,0.3)); border: 1px solid rgba(139,92,246,0.3); border-radius: 10px; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.2s; } .fmp-add-btn:hover { background: linear-gradient(135deg, rgba(139,92,246,0.6), rgba(34,197,94,0.5)); } .fmp-section { padding: 0; } .fmp-section-label { padding: 8px 20px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #666; letter-spacing: 1px; } .fmp-list { flex: 1; overflow-y: auto; max-height: 340px; padding-bottom: 8px; } .fmp-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; transition: background 0.15s; } .fmp-item:hover { background: rgba(139,92,246,0.06); } .fmp-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(139,92,246,0.15); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; position: relative; } .fmp-avatar .fmp-status-dot { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(15,12,30,0.95); } .fmp-status-dot.online { background: #22c55e; } .fmp-status-dot.offline { background: #555; } .fmp-status-dot.pending { background: #fbbf24; } .fmp-info { flex: 1; min-width: 0; } .fmp-name { font-weight: 700; font-size: 14px; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fmp-status-text { font-size: 11px; color: #666; margin-top: 1px; } .fmp-status-text.online { color: #22c55e; } .fmp-status-text.pending { color: #fbbf24; } .fmp-actions { display: flex; gap: 6px; flex-shrink: 0; } .fmp-actions button { padding: 6px 14px; border-radius: 8px; border: none; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.2s; } .fmp-btn-invite { background: rgba(34,197,94,0.2); color: #22c55e; border: 1px solid rgba(34,197,94,0.3) !important; } .fmp-btn-invite:hover { background: rgba(34,197,94,0.4); } .fmp-btn-accept { background: rgba(34,197,94,0.2); color: #22c55e; border: 1px solid rgba(34,197,94,0.3) !important; } .fmp-btn-accept:hover { background: rgba(34,197,94,0.4); } .fmp-btn-reject { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.2) !important; } .fmp-btn-reject:hover { background: rgba(239,68,68,0.3); } .fmp-btn-remove { background: none; color: #555; border: none !important; font-size: 16px; padding: 4px 8px; } .fmp-btn-remove:hover { color: #ef4444; } .fmp-empty { padding: 24px 20px; text-align: center; color: #555; font-size: 13px; } .fmp-pending-label { padding: 8px 20px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #fbbf24; letter-spacing: 1px; } /* Friends menu popup - friend items */ .fmp-friend-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; transition: background 0.15s; } .fmp-friend-item:hover { background: rgba(139,92,246,0.06); } .fmp-pending-item { border-left: 3px solid #fbbf24; } .fmp-avatar-online { background: rgba(34,197,94,0.2); color: #22c55e; font-weight: 700; } .fmp-avatar-offline { background: rgba(100,100,100,0.2); color: #666; font-weight: 700; } .fmp-avatar-pending { background: rgba(251,191,36,0.2); color: #fbbf24; font-weight: 700; } .fmp-friend-info { flex: 1; min-width: 0; } .fmp-friend-name { font-weight: 700; font-size: 14px; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fmp-friend-status { font-size: 11px; color: #666; margin-top: 2px; display: flex; align-items: center; gap: 5px; } .fmp-status-online { color: #22c55e; } .fmp-status-offline { color: #666; } .fmp-status-pending { color: #fbbf24; } .fmp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; } .fmp-dot-online { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.5); } .fmp-dot-offline { background: #555; } .fmp-friend-actions { display: flex; gap: 6px; flex-shrink: 0; } .fmp-friend-actions button { padding: 6px 14px; border-radius: 8px; border: none; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.2s; } .fmp-toast { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(34,197,94,0.9); color: #fff; padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; animation: fmpToastIn 0.3s ease; z-index: 100; pointer-events: none; } .fmp-toast-error { background: rgba(239,68,68,0.9); } @keyframes fmpToastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ============================================ BOTTOM PANEL — earn + volume ============================================ */ /* Earn buttons — bottom center */ .menu-earn-panel { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 10; opacity: 0.85; transition: opacity 0.3s; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; backdrop-filter: blur(12px); } .menu-earn-panel:hover { opacity: 1; } /* Bitcoin Runner — bottom right, stacked above the volume panel. Was bottom-left where it sat orphaned between earn column and ticker. */ .menu-runner-panel { position: absolute; bottom: 88px; right: 16px; left: auto; z-index: 10; opacity: 0.85; transition: opacity 0.3s; } .menu-runner-panel:hover { opacity: 1; } .btn-runner-corner { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; font-weight: 510; text-transform: uppercase; letter-spacing: 0.04em; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--foreground); cursor: pointer; font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; position: relative; overflow: hidden; backdrop-filter: blur(12px); } .btn-runner-corner:hover { background: var(--card-hover); border-color: var(--primary); box-shadow: none; transform: translateY(-1px); } .btn-runner-corner:active { transform: translateY(0); } .runner-corner-icon { width: 20px; height: 20px; border-radius: 50%; /* Native Bitcoin orange icon — brand-justified */ filter: none; } .runner-corner-label { white-space: nowrap; } /* Volume sliders — bottom right */ .menu-vol-panel { position: absolute; bottom: 18px; right: 16px; z-index: 10; opacity: 0.85; transition: opacity 0.3s; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; backdrop-filter: blur(12px); } .menu-vol-panel:hover { opacity: 1; } .earn-title { font-size: 11px; font-weight: 510; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); text-align: center; margin-bottom: 8px; } .mbp-earn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .mbp-vol-row { display: flex; align-items: center; gap: 8px; } .mbp-vol-row .vol-label { font-size: 12px; } .mbp-vol-row .vol-slider { width: 75px; } /* ============================================ RESPONSIVE ============================================ */ /* ============================================ TABLET — max 768px ============================================ */ @media (max-width: 768px) { .game-title { font-size: 36px; letter-spacing: -1px; } .game-subtitle { font-size: 12px; } .menu-container { padding: 24px 16px; padding-top: 100px; padding-bottom: 80px; max-width: 100%; } /* Top corner — full width centered, fixed on tablet */ .vgpu-corner { position: fixed; top: 28px; right: 0; left: 0; align-items: center; gap: 6px; padding: 0 8px; z-index: 20; } .vgpu-corner-top { gap: 6px; justify-content: center; } .btn-voltage-corner { font-size: 11px; padding: 6px 12px; } .airdrop-banner-corner { padding: 8px 14px; border-radius: 10px; width: auto; max-width: 100%; justify-content: center; } .abc-val { font-size: 16px; } .abc-icon { font-size: 16px; } .abc-label { font-size: 9px; } .abc-divider { margin: 0 8px; height: 20px; } .abc-info-btn { font-size: 11px; padding: 5px 10px; margin-left: 6px; } /* Logo smaller */ .vgpu-title-logo { width: 72px; height: 72px; } .vgpu-title-img { width: 38px; height: 38px; } /* BTC dom + players */ .btc-dom-inline { font-size: 13px; } .btc-dom-val { font-size: 14px; } .players-online-inline { font-size: 12px; } /* Bottom panels — fixed to viewport on mobile */ /* Row 1 (bottom): runner left + vol right */ .menu-runner-panel { position: fixed; bottom: 4px; left: 8px; } .menu-vol-panel { position: fixed; bottom: 4px; right: 8px; } .btn-runner-corner { padding: 6px 12px; font-size: 10px; } .runner-corner-icon { width: 16px; height: 16px; } /* Row 2 (above runner/vol): earn cards */ .menu-earn-panel { position: fixed; bottom: 36px; left: 50%; transform: translateX(-50%); width: auto; max-width: calc(100% - 24px); } /* Earn cards — single row, no wrap */ .earn-title { font-size: 8px; margin-bottom: 4px; } .mbp-earn-row { flex-wrap: nowrap; gap: 5px; } .btn-earn { padding: 5px 6px 4px; min-width: 0; flex: 0 0 auto; } .earn-icon svg { width: 14px; height: 14px; } .earn-label { font-size: 8px; } .earn-reward { font-size: 7px; } #nameInput { padding: 14px 20px; font-size: 16px; } .faction-section-title { font-size: 11px; } .faction-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .faction-btn { padding: 10px 12px 8px; min-width: auto; max-width: 90px; } .faction-icon img { width: 30px; height: 30px; } .faction-btn .faction-label { font-size: 10px; } .faction-btn .faction-desc { font-size: 9px; } .faction-btn.selected .faction-desc { max-height: 120px; } .faction-info-bar .fi-tagline { font-size: 12px; } /* Play row */ .menu-play-row { gap: 10px; } #playBtn { padding: 14px 40px; font-size: 18px; letter-spacing: 2px; } .btn-skins { padding: 14px 24px; font-size: 14px; } /* How to play */ .htp-toggle { font-size: 13px; } .htp-grid { grid-template-columns: 1fr; } .htp-item { font-size: 13px; } .htp-item kbd { font-size: 11px; } /* Footer — hide on mobile, fixed panels cover this area */ .menu-footer { display: none; } .ts-grid { grid-template-columns: repeat(2, 1fr); } .death-title { font-size: 52px; } .death-stats { grid-template-columns: 1fr 1fr; } .death-stats.career { grid-template-columns: 1fr 1fr; } .stat-value { font-size: 20px; } .event-name { font-size: 32px; } .event-container { padding: 32px 40px; margin: 0 16px; } #leaderboard { display: none; } #minimapWrap { width: 120px; height: 120px; bottom: 70px; right: 10px; } #killFeed { width: 160px; right: 10px; } .cd-item { width: 42px; height: 50px; } #playerStats { width: 175px; padding: 8px 10px; top: 64px; left: 10px; bottom: auto; } #perfDisplay { bottom: 16px; left: 10px; top: auto; font-size: 10px; } /* Adjust for mobile controls (touch) */ body.is-mobile #playerStats { display: none !important; } body.is-mobile #cooldowns { display: none !important; } body.is-mobile #chatBox { bottom: 160px; width: 220px; } body.is-mobile #minimapWrap { bottom: 150px; } body.is-mobile #killFeed { width: 140px; } /* Skin popup — 3 columns on tablet */ .fsp-skins { grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px 20px; } .fsp-box { max-width: 98vw; max-height: 92vh; } .fsp-title { font-size: 24px; } } /* ============================================ PHONE — max 480px ============================================ */ @media (max-width: 480px) { .game-title { font-size: 26px; letter-spacing: -1px; } .game-subtitle { font-size: 11px; margin: 2px 0 6px; } .menu-container { padding: 16px 10px; padding-top: 90px; padding-bottom: 70px; } /* Top corner — centered, compact on phone */ .vgpu-corner { top: 26px; gap: 4px; padding: 0 6px; } .vgpu-corner-top { gap: 5px; } .btn-voltage-corner { font-size: 10px; padding: 5px 10px; border-radius: 8px; } #authPopup { padding: 24px 20px 20px; width: 92vw; } .airdrop-banner-corner { padding: 6px 10px; border-radius: 8px; flex-wrap: wrap; justify-content: center; gap: 2px; } .abc-val { font-size: 14px; } .abc-icon { font-size: 14px; } .abc-label { font-size: 8px; } .abc-divider { margin: 0 6px; height: 18px; } .abc-info-btn { font-size: 10px; padding: 4px 8px; margin-left: 4px; } /* Logo even smaller */ .vgpu-title-logo { width: 56px; height: 56px; margin-bottom: 6px; } .vgpu-title-img { width: 30px; height: 30px; } /* BTC dom + players */ .btc-dom-inline { font-size: 11px; margin: 2px 0 4px; } .btc-dom-val { font-size: 12px; } .players-online-inline { font-size: 10px; margin: 2px 0 4px; } /* Name input */ #nameInput { padding: 12px 16px; font-size: 15px; margin-top: 16px; } /* Factions — compact flex on phone */ .faction-section-title { font-size: 10px; margin-top: 12px; } .faction-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; } .faction-btn { padding: 8px 10px 6px; min-width: auto; max-width: 80px; border-radius: 10px; } .faction-btn .faction-icon { font-size: 22px; } .faction-icon img { width: 26px; height: 26px; } .faction-btn .faction-label { font-size: 9px; } .faction-info-bar .fi-tagline { font-size: 11px; } /* Play row */ .menu-play-row { gap: 8px; } #playBtn { padding: 12px 32px; font-size: 16px; letter-spacing: 1px; border-radius: 12px; } .play-icon { font-size: 14px; } .btn-skins { padding: 12px 18px; font-size: 12px; letter-spacing: 1px; border-radius: 12px; } /* How to play */ .htp-toggle { font-size: 11px; padding: 8px 0; } .htp-grid { grid-template-columns: 1fr; gap: 4px; } .htp-item { font-size: 12px; padding: 4px 6px; gap: 6px; } .htp-item kbd { font-size: 10px; min-width: 38px; padding: 2px 4px; } .htp-content.open { padding: 4px 8px; max-height: 350px; } /* Footer — hidden on phone */ .menu-footer { display: none; } /* Bottom panels — reorganize for phone */ .menu-earn-panel { bottom: 38px; width: calc(100% - 16px); left: 50%; transform: translateX(-50%); } .mbp-earn-row { gap: 3px; flex-wrap: nowrap; } .btn-earn { padding: 4px 5px 3px; min-width: 0; border-radius: 8px; flex: 0 0 auto; } .earn-icon { font-size: 12px; } .earn-icon svg { width: 12px; height: 12px; } .earn-label { font-size: 7px; } .earn-reward { font-size: 6px; } .earn-title { font-size: 7px; margin-bottom: 3px; letter-spacing: 1px; } .menu-vol-panel { bottom: 4px; right: 6px; } .mbp-vol-row .vol-label { font-size: 8px; } .mbp-vol-row .vol-slider { width: 40px; } .menu-runner-panel { bottom: 4px; left: 6px; } .btn-runner-corner { padding: 5px 8px; font-size: 9px; gap: 5px; border-radius: 10px; } .runner-corner-icon { width: 14px; height: 14px; } .runner-corner-label { font-size: 8px; } /* Ticker */ .ticker-bar { height: 24px; } .ticker-item { font-size: 9px; } /* In-game HUD */ .death-title { font-size: 36px; } .death-stats { grid-template-columns: 1fr 1fr; gap: 6px; } .death-stats.career { grid-template-columns: 1fr 1fr; gap: 6px; } .stat-value { font-size: 16px; } .stat-card { padding: 10px 6px; } .event-container { padding: 20px 20px; margin: 0 8px; } .event-name { font-size: 24px; } #cooldowns { flex-wrap: wrap; justify-content: center; max-width: 240px; gap: 3px; padding: 4px; } .cd-item { width: 36px; height: 44px; border-radius: 6px; } #minimapWrap { width: 80px; height: 80px; bottom: 60px; right: 6px; } #killFeed { width: 130px; top: 50%; transform: translateY(-50%); right: 6px; left: auto; max-height: 30vh; } .kill-entry { font-size: 9px; padding: 2px 6px; } .btn-play-again { font-size: 14px; padding: 12px; } .btn-tweet-death { font-size: 11px; padding: 8px 14px; } .ts-val { font-size: 14px; } #playerStats { width: 140px; padding: 6px; gap: 4px; font-size: 10px; } #chatBox { width: 200px; font-size: 11px; } .shop-grid { grid-template-columns: 1fr 1fr !important; } /* Mobile touch — hide HUD clutter */ body.is-mobile #playerStats { display: none !important; } body.is-mobile #cooldowns { display: none !important; } body.is-mobile #perfDisplay { display: none !important; } body.is-mobile #chatBox { bottom: 120px; width: 180px; font-size: 10px; } body.is-mobile #minimapWrap { width: 70px; height: 70px; bottom: 120px; } body.is-mobile #killFeed { width: 110px; font-size: 9px; } /* Skin popup — 2 columns on phone */ .fsp-skins { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px 14px; } .fsp-box { max-width: 100vw; max-height: 95vh; border-radius: 16px; } .fsp-header { padding: 14px 16px; } .fsp-title { font-size: 20px; } .fsp-subtitle { font-size: 11px; } } /* ============================================ VERY SMALL PHONE — max 360px ============================================ */ @media (max-width: 360px) { .game-title { font-size: 22px; } .game-subtitle { font-size: 10px; } .menu-container { padding: 12px 8px; padding-top: 32px; } .vgpu-title-logo { width: 44px; height: 44px; } .vgpu-title-img { width: 24px; height: 24px; } .btn-voltage-corner { font-size: 7px; padding: 3px 5px; } .abc-val { font-size: 12px; } .abc-icon { font-size: 12px; } .abc-label { font-size: 7px; } .abc-divider { margin: 0 4px; height: 16px; } .abc-info-btn { font-size: 9px; padding: 3px 6px; } .faction-grid { gap: 4px; } .faction-btn { padding: 6px 8px 5px; max-width: 68px; } .faction-icon img { width: 22px; height: 22px; } .faction-btn .faction-label { font-size: 8px; } .menu-play-row { gap: 6px; flex-wrap: wrap; } #playBtn { padding: 10px 28px; font-size: 14px; } .btn-skins { padding: 10px 14px; font-size: 11px; } .btn-earn { padding: 3px 0 2px; } .earn-icon svg { width: 10px; height: 10px; } .earn-label { display: none; } .earn-reward { font-size: 6px; } .runner-corner-label { display: none; } .btn-runner-corner { padding: 5px 8px; font-size: 9px; } .runner-corner-icon { width: 14px; height: 14px; } /* Simplify vol on very small phones — hide labels */ .mbp-vol-row .vol-label { display: none; } .mbp-vol-row .vol-slider { width: 32px; } } /* ============================================ SKIN SHOP ============================================ */ .btn-skins { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; font-size: 14px; font-weight: 510; text-transform: uppercase; letter-spacing: 0.04em; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--foreground); cursor: pointer; margin-top: 0; font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; backdrop-filter: blur(8px); box-shadow: none; height: auto; } .btn-skins:hover { background: var(--card-hover); border-color: var(--border-emphasis); box-shadow: none; color: var(--foreground); transform: translateY(-1px); } .btn-skins:active { transform: translateY(0); } /* Settings Button */ .btn-settings { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; font-size: 14px; font-weight: 510; text-transform: uppercase; letter-spacing: 0.04em; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--foreground); cursor: pointer; font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; backdrop-filter: blur(8px); box-shadow: none; height: auto; } .btn-settings:hover { background: var(--card-hover); border-color: var(--border-emphasis); box-shadow: none; color: var(--foreground); transform: translateY(-1px); } .btn-settings:active { transform: translateY(0); } /* Settings Panel */ #settingsPanel { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); } .settings-container { position: relative; width: 480px; max-width: 95vw; max-height: 85vh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: linear-gradient(135deg, rgba(15,15,25,0.97), rgba(20,15,35,0.97)); border: 1px solid rgba(139,92,246,0.3); border-radius: 16px; padding: 28px; box-shadow: 0 0 40px rgba(139,92,246,0.15); } /* native scrollbar removed */ .settings-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #888; font-size: 28px; cursor: pointer; transition: color 0.2s; } .settings-close:hover { color: #fff; } .settings-title { font-family: 'Rajdhani', sans-serif; font-size: 24px; font-weight: 800; color: #e2e8f0; text-transform: uppercase; letter-spacing: 3px; text-align: center; margin: 0 0 20px; } .settings-section { margin-bottom: 20px; padding: 16px; background: rgba(255,255,255,0.03); border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); } .settings-section-title { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; color: #8b5cf6; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 12px; } .settings-hint { font-size: 11px; color: #666; margin: 0 0 10px; } .settings-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .settings-row label { flex: 0 0 130px; font-size: 13px; color: #cbd5e1; font-weight: 600; } .settings-slider { flex: 1; -webkit-appearance: none; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); outline: none; } .settings-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #8b5cf6; cursor: pointer; box-shadow: 0 0 8px rgba(139,92,246,0.5); } .settings-val { flex: 0 0 40px; font-size: 12px; color: #94a3b8; text-align: right; } .keybind-btn { flex: 1; padding: 8px 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: #e2e8f0; font-family: 'Rajdhani', monospace; font-size: 14px; font-weight: 700; text-align: center; cursor: pointer; transition: all 0.15s; text-transform: uppercase; } .keybind-btn:hover { border-color: #8b5cf6; background: rgba(139,92,246,0.1); } .keybind-btn.listening { border-color: #f59e0b; background: rgba(245,158,11,0.15); color: #fbbf24; animation: keybindPulse 0.8s ease-in-out infinite; } @keyframes keybindPulse { 0%, 100% { box-shadow: 0 0 4px rgba(245,158,11,0.3); } 50% { box-shadow: 0 0 12px rgba(245,158,11,0.6); } } .settings-presets { display: flex; gap: 8px; flex-wrap: wrap; } .preset-btn { padding: 8px 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: #cbd5e1; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .preset-btn:hover { border-color: #8b5cf6; background: rgba(139,92,246,0.15); color: #fff; } /* Mini-Game Button */ .btn-minigame { display: inline-block; padding: 10px 28px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; background: linear-gradient(135deg, rgba(247,147,26,0.15), rgba(247,147,26,0.05)); border: 2px solid #f7931a; border-radius: 12px; color: #f7931a; cursor: pointer; margin-top: 8px; margin-left: 8px; font-family: inherit; transition: all 0.2s ease; position: relative; overflow: hidden; } .btn-minigame-icon { width: 18px; height: 18px; vertical-align: middle; margin-right: 6px; border-radius: 50%; margin-top: -2px; } .btn-minigame:hover { background: linear-gradient(135deg, rgba(247,147,26,0.25), rgba(247,147,26,0.10)); box-shadow: 0 0 20px rgba(247,147,26,0.3); transform: scale(1.03); } .btn-minigame:active { transform: scale(0.97); } /* ============================================ VOLTAGEGPU CONNECT & SOCIAL BUTTONS ============================================ */ .menu-social-row { display: none; } .btn-voltage-connect { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #1a1a2e, #0f0f1e); border: 1px solid rgba(139,92,246,0.35); border-radius: 10px; padding: 8px 14px; color: #c4b5fd; font-size: 11px; font-weight: 800; cursor: pointer; font-family: inherit; letter-spacing: 0.5px; transition: all 0.25s; box-shadow: 0 0 20px rgba(139,92,246,0.08); } .btn-voltage-connect:hover { border-color: rgba(139,92,246,0.6); color: #fff; box-shadow: 0 0 30px rgba(139,92,246,0.15); transform: translateY(-1px); } .btn-vgpu-icon { width: 18px; height: 18px; border-radius: 4px; } .btn-vgpu-bonus { background: rgba(139,92,246,0.2); color: #a78bfa; font-size: 9px; font-weight: 900; letter-spacing: 1px; padding: 2px 8px; border-radius: 6px; margin-left: 4px; } .btn-voltage-signup { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 8px 12px; color: #7c7c9a; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.25s; } .btn-voltage-signup:hover { border-color: rgba(255,255,255,0.2); color: #aaa; transform: translateY(-1px); } .menu-share-row { display: flex; gap: 6px; justify-content: center; margin-top: 6px; flex-wrap: wrap; } /* === EARN CARD BUTTONS === */ .btn-earn { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; border-radius: var(--radius-md); padding: 8px 12px; min-width: 72px; font-weight: 510; cursor: pointer; font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; letter-spacing: normal; background: var(--card); border: 1px solid var(--border); color: var(--foreground); } .btn-earn:hover { background: var(--card-hover); border-color: var(--border-emphasis); transform: translateY(-1px); } .earn-icon { font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; } .earn-icon svg { width: 16px; height: 16px; } .earn-label { font-size: 12px; font-weight: 510; letter-spacing: normal; color: var(--foreground); } .earn-reward { font-size: 11px; font-weight: 510; color: var(--accent); font-family: 'JetBrains Mono', ui-monospace, monospace; opacity: 0.9; } .earn-reward.earn-done { color: var(--accent); opacity: 1; } /* All social variants share the unified ghost treatment. The icon (X, Twitter bird, Discord, etc.) keeps its native brand color. */ .btn-earn-x, .btn-earn-follow, .btn-earn-discord, .btn-earn-invite { background: var(--card); border: 1px solid var(--border); color: var(--foreground); text-decoration: none; } .btn-earn-x:hover, .btn-earn-follow:hover, .btn-earn-discord:hover, .btn-earn-invite:hover { background: var(--card-hover); border-color: var(--border-emphasis); color: var(--foreground); } /* Menu main actions */ .menu-main-actions { margin-top: 4px; width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; } /* PLAY dominates: SKINS + SETTINGS sit on a row above, PLAY full-width below */ .menu-play-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: stretch; margin-top: 12px; } .menu-play-row .btn-skins, .menu-play-row .btn-settings { flex: 1 1 calc(50% - 6px); max-width: 234px; } /* ============================================ VGPU TITLE LOGO — above title, animated ============================================ */ .vgpu-title-logo { position: relative; width: 48px; height: 48px; margin: 0 auto 8px; opacity: 0.6; animation: vgpuFloat 5s ease-in-out infinite; } .vgpu-title-img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 8px; filter: none; } /* Drop the orbiting rings — too busy per DESIGN.md */ .vgpu-logo-ring, .vgpu-logo-ring-2 { display: none; } /* BTC Dominance inline pill */ .btc-dom-inline { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--card); border: 1px solid var(--border); font-size: 12px; font-weight: 500; color: var(--muted-foreground); margin: 4px; font-family: inherit; letter-spacing: normal; } .btc-dom-val { color: var(--accent); font-weight: 500; font-size: 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; } .players-online-inline { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--card); border: 1px solid var(--border); font-size: 12px; font-weight: 500; color: var(--muted-foreground); margin: 4px; } @keyframes vgpuFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes vgpuRingSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ============================================ VOLUME CONTROLS ============================================ */ .menu-volume-row { display: none; } .vol-label { color: var(--muted-foreground); font-size: 11px; font-weight: 510; letter-spacing: normal; white-space: nowrap; } .vol-slider { -webkit-appearance: none; appearance: none; width: 55px; height: 4px; background: var(--border); border-radius: 2px; outline: none; cursor: pointer; } .vol-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); border: 2px solid var(--background); cursor: pointer; box-shadow: none; } .vol-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--primary); border: 2px solid var(--background); cursor: pointer; } /* Old .airdrop-banner removed — replaced by .airdrop-banner-corner in .vgpu-corner */ /* ============================================ AIRDROP INFO PANEL - PREMIUM DESIGN ============================================ */ .airdrop-panel { position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* 2026-05-18: bumped z-index 250→1500 + opaque backdrop so the .vgpu-corner rail tiles (top-right LIVE LEADERBOARD / $DOM AIRDROP / etc) are fully hidden when the airdrop popup is open. Was bleeding through the 0.92 alpha. */ z-index: 1500; background: rgba(5,5,8,0.985); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(24px); animation: apFadeIn 0.3s ease; } @keyframes apFadeIn { from { opacity: 0; } to { opacity: 1; } } .airdrop-panel-hidden { display: none !important; } .ap-box { position: relative; width: 920px; max-width: 96vw; max-height: 94vh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: linear-gradient(165deg, #0d0d1f 0%, #080816 40%, #0a0a18 100%); border: 1px solid rgba(255,215,0,0.15); border-radius: 24px; padding: 0 44px 44px; box-shadow: 0 0 80px rgba(255,215,0,0.06), 0 0 200px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04); } /* native scrollbar removed — custom JS scrollbar */ .ap-close { position: absolute; top: 16px; right: 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #7c7c9a; font-size: 22px; cursor: pointer; line-height: 1; transition: all 0.2s; z-index: 10; } .ap-close:hover { color: #fff; background: rgba(255,255,255,0.12); transform: scale(1.1); } /* Hero Section */ .ap-hero { position: relative; text-align: center; padding: 44px 0 28px; overflow: hidden; } .ap-hero-glow { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 300px; height: 200px; background: radial-gradient(ellipse, rgba(255,215,0,0.12) 0%, rgba(247,147,26,0.06) 40%, transparent 70%); pointer-events: none; } .ap-logo-ring { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; position: relative; } .ap-logo-ring canvas { display: block; } .ap-title { font-size: 42px; font-weight: 900; letter-spacing: 6px; color: #ffd700; text-shadow: 0 0 30px rgba(255,215,0,0.3); } .ap-title-accent { background: linear-gradient(135deg, #ffd700, #f7931a, #22c55e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ap-subtitle { font-size: 18px; color: #9a9ac0; margin-top: 12px; line-height: 1.6; letter-spacing: 0.4px; font-weight: 500; } .ap-chain-badges { display: flex; gap: 8px; justify-content: center; margin-top: 14px; } .ap-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 5px 14px; font-size: 11px; font-weight: 700; color: #aaa; letter-spacing: 0.5px; } .ap-badge-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } /* Stats */ .ap-stats { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; padding: 0; margin-bottom: 28px; } .ap-stat { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 20px 16px 18px; text-align: center; flex: 1; position: relative; overflow: hidden; transition: border-color 0.3s; } .ap-stat:hover { border-color: rgba(255,215,0,0.15); } .ap-stat-coins { border-color: rgba(255,215,0,0.12); } .ap-stat-tokens { border-color: rgba(34,197,94,0.12); } .ap-stat-rank { border-color: rgba(139,92,246,0.12); } .ap-stat-icon { font-size: 24px; margin-bottom: 8px; } .ap-stat-val { font-size: 28px; font-weight: 900; color: #ffd700; text-shadow: 0 0 14px rgba(255,215,0,0.25); line-height: 1.2; } .ap-stat-tokens .ap-stat-val { color: #22c55e; text-shadow: 0 0 14px rgba(34,197,94,0.25); } .ap-stat-rank .ap-stat-val { color: #8b5cf6; text-shadow: 0 0 14px rgba(139,92,246,0.25); } .ap-stat-label { font-size: 11px; color: #7a7a9a; margin-top: 8px; letter-spacing: 1.2px; font-weight: 700; text-transform: uppercase; } .ap-stat-sub { font-size: 8px; color: #555; margin-top: 2px; letter-spacing: 0.5px; } /* Section Title */ .ap-section-title { font-size: 13px; font-weight: 900; letter-spacing: 2.5px; color: #8c8caa; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; gap: 8px; } .ap-section-icon { font-size: 16px; } /* Fund Pool */ .ap-fund { padding: 0; margin-bottom: 28px; } .ap-fund-desc { font-size: 14px; color: #9a9abb; line-height: 1.6; margin-bottom: 16px; } .ap-fund-meter { margin-bottom: 14px; } .ap-fund-bar { position: relative; height: 28px; background: rgba(255,255,255,0.04); border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); } .ap-fund-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 14px; background: linear-gradient(90deg, #22c55e, #16a34a, #22c55e); background-size: 200% 100%; animation: apFundShimmer 2s ease infinite; transition: width 0.8s ease; min-width: 2px; } @keyframes apFundShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .ap-fund-shine { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); animation: apShine 3s ease infinite; } @keyframes apShine { 0% { left: -40%; } 100% { left: 140%; } } .ap-fund-amounts { display: flex; justify-content: space-between; margin-top: 8px; } .ap-fund-current, .ap-fund-target { display: flex; flex-direction: column; gap: 2px; } .ap-fund-target { text-align: right; } .ap-fund-label { font-size: 9px; color: #6a6a8a; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 700; } .ap-fund-val { font-size: 18px; font-weight: 900; color: #22c55e; text-shadow: 0 0 8px rgba(34,197,94,0.2); } .ap-fund-target .ap-fund-val { color: #6a6a8a; text-shadow: none; } .ap-fund-breakdown { display: flex; gap: 12px; } .ap-fund-bk-item { flex: 1; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.04); border-radius: 10px; padding: 8px 10px; font-size: 11px; color: #8a8aaa; } .ap-fund-bk-icon { font-weight: 900; font-size: 13px; min-width: 28px; } /* Tokenomics */ .ap-tokenomics { padding: 0; margin-bottom: 28px; } .ap-supply { font-size: 13px; color: #aaa; margin-bottom: 14px; text-align: center; } .ap-supply strong { color: #ffd700; } .ap-donut-row { display: flex; align-items: center; gap: 24px; justify-content: center; } .ap-donut-legend { display: flex; flex-direction: column; gap: 6px; } .ap-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #aaa; } .ap-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .ap-legend-label { flex: 1; } .ap-legend-pct { font-weight: 900; color: #ddd; min-width: 32px; text-align: right; } /* Vesting Cards */ .ap-vesting { padding: 0; margin-bottom: 28px; } .ap-vest-subtitle { font-size: 14px; color: #7a7a9a; margin-bottom: 14px; font-style: italic; } .ap-vest-cards { display: flex; gap: 10px; } .ap-vest-card { flex: 1; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 16px 12px; text-align: center; transition: transform 0.2s, border-color 0.3s; } .ap-vest-card:hover { transform: translateY(-2px); } .ap-vest-green { border-color: rgba(34,197,94,0.2); } .ap-vest-green:hover { border-color: rgba(34,197,94,0.4); } .ap-vest-orange { border-color: rgba(247,147,26,0.2); } .ap-vest-orange:hover { border-color: rgba(247,147,26,0.4); } .ap-vest-red { border-color: rgba(239,68,68,0.2); } .ap-vest-red:hover { border-color: rgba(239,68,68,0.4); } .ap-vest-card-pct { font-size: 28px; font-weight: 900; line-height: 1; } .ap-vest-green .ap-vest-card-pct { color: #22c55e; } .ap-vest-orange .ap-vest-card-pct { color: #f7931a; } .ap-vest-red .ap-vest-card-pct { color: #ef4444; } .ap-vest-card-label { font-size: 13px; font-weight: 800; color: #ccc; margin-top: 6px; letter-spacing: 0.3px; } .ap-vest-card-desc { font-size: 12px; color: #7a7a9a; margin-top: 4px; line-height: 1.4; } /* How to Earn */ .ap-how { padding: 0; margin-bottom: 28px; } .ap-how-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 8px; } .ap-how-card { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 14px 10px 12px; text-align: center; transition: transform 0.2s, border-color 0.3s; } .ap-how-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.12); } .ap-how-card-special { border-color: rgba(139,92,246,0.2); background: rgba(139,92,246,0.04); } .ap-how-card-special:hover { border-color: rgba(139,92,246,0.4); } .ap-how-reward { font-size: 22px; font-weight: 900; line-height: 1; } .ap-how-action { font-size: 11px; font-weight: 800; color: #ccc; margin-top: 6px; } .ap-how-desc { font-size: 9px; color: #6a6a8a; margin-top: 3px; line-height: 1.3; } /* Roadmap Timeline */ .ap-roadmap { padding: 0; margin-bottom: 28px; } .ap-timeline { position: relative; padding-left: 24px; } .ap-timeline::before { content: ''; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: rgba(255,255,255,0.06); border-radius: 1px; } .ap-tl-item { position: relative; padding-bottom: 18px; } .ap-tl-item:last-child { padding-bottom: 0; } .ap-tl-dot { position: absolute; left: -20px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #2a2a40; border: 2px solid #4a4a65; z-index: 2; transition: all 0.3s; } .ap-tl-done .ap-tl-dot { background: #22c55e; border-color: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,0.4); } .ap-tl-active .ap-tl-dot { background: #ffd700; border-color: #ffd700; box-shadow: 0 0 10px rgba(255,215,0,0.4); animation: apDotPulse 2s ease infinite; } @keyframes apDotPulse { 0%, 100% { box-shadow: 0 0 10px rgba(255,215,0,0.4); } 50% { box-shadow: 0 0 20px rgba(255,215,0,0.7); } } .ap-tl-content { padding-left: 4px; } .ap-tl-date { font-size: 12px; font-weight: 800; color: #6a6a8a; letter-spacing: 1px; text-transform: uppercase; } .ap-tl-active .ap-tl-date { color: #ffd700; } .ap-tl-done .ap-tl-date { color: #22c55e; } .ap-tl-title { font-size: 15px; font-weight: 800; color: #ddd; margin-top: 3px; } .ap-tl-desc { font-size: 13px; color: #7a7a9a; margin-top: 3px; line-height: 1.5; } /* Footer */ .ap-footer { padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,0.05); text-align: center; } .ap-footer-trust { display: flex; gap: 16px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; } .ap-trust-item { font-size: 10px; color: #6a6a8a; font-weight: 700; display: flex; align-items: center; gap: 4px; } .ap-footer-chain { font-size: 12px; color: #6a6a8a; display: flex; align-items: center; justify-content: center; gap: 6px; } .ap-footer-chain strong { color: #9945ff; } .ap-sol-logo { width: 18px; height: 18px; border-radius: 50%; } /* Shop Overlay */ #skinShop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .shop-container { position: relative; max-width: 1600px; width: 96%; max-height: 96vh; background: #050505; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 22px; padding: 28px 40px 40px; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 0 120px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255,255,255,0.04); } /* Grain texture overlay — noise + slight contrast */ .shop-container::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; opacity: 0.06; pointer-events: none; mix-blend-mode: overlay; border-radius: 22px; z-index: 0; } .shop-container > * { position: relative; z-index: 1; } /* native scrollbar removed — custom JS scrollbar */ /* Shop header area with coin display */ .shop-header-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 6px; flex-wrap: wrap; } .shop-coins-banner { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(251,191,36,0.06)); border: 1px solid rgba(251,191,36,0.30); border-radius: 20px; padding: 5px 16px 5px 12px; font-size: 16px; font-weight: 800; color: #fbbf24; letter-spacing: 0.5px; box-shadow: 0 0 12px rgba(251,191,36,0.12); position: absolute; top: 24px; left: 28px; } .shop-coins-banner .coin-icon { font-size: 16px; } .shop-title { font-size: 36px; font-weight: 900; letter-spacing: 4px; text-align: center; margin-bottom: 3px; background: linear-gradient(135deg, #a78bfa 0%, #d946ef 45%, #f472b6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 0 16px rgba(167,139,250,0.35)); } .shop-subtitle { font-size: 15px; color: #7a7a9a; text-align: center; margin-bottom: 16px; } .shop-close { position: absolute; top: 16px; right: 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: #7c7c9a; font-size: 22px; cursor: pointer; line-height: 1; transition: all 0.2s; } .shop-close:hover { color: #fff; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); } /* === TIER SECTION DIVIDERS — stacked: line / LABEL / meta / line === */ .shop-tier-header { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin: 48px 0 24px; padding: 20px 0 0; position: relative; text-align: center; } .shop-tier-header:first-child { margin-top: 16px; } /* Hide the line divs from the old DOM structure — we use ::before */ .shop-tier-header > .shop-tier-header-line { display: none !important; } /* Single thin separator line above */ .shop-tier-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.06); } .shop-tier-header-label { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 510; letter-spacing: 0.10em; text-transform: uppercase; color: var(--tier-hdr-color, #a0a0a0); display: inline-flex; align-items: center; gap: 8px; line-height: 1; } .shop-tier-header-label .sth-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tier-hdr-color, #a0a0a0); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tier-hdr-color, #a0a0a0) 20%, transparent); } /* Meta on its own line BELOW the label — small, muted, mono */ .shop-tier-header-badge { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.04em; color: #606060; background: transparent; border: none; padding: 0; text-transform: none; } .shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } .skin-card { background: linear-gradient(160deg, #141424 0%, #0e0e1c 100%); border: 1.5px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 22px 18px 20px; text-align: center; cursor: pointer; transition: all 0.22s ease; position: relative; overflow: hidden; min-width: 0; } .skin-card::before { content: ''; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,0.03) 0%, transparent 60%); pointer-events: none; } .skin-card:hover { transform: translateY(-5px) scale(1.025); border-color: rgba(255,255,255,0.18); } .skin-card.equipped { border-color: #8b5cf6 !important; box-shadow: 0 0 20px rgba(139, 92, 246, 0.3), inset 0 0 20px rgba(139, 92, 246, 0.05); } .skin-card.equipped::after { content: 'EQUIPPED'; position: absolute; top: 8px; right: -24px; background: #8b5cf6; color: #fff; font-size: 8px; font-weight: 800; padding: 2px 28px; transform: rotate(45deg); letter-spacing: 1px; } /* Rarity borders */ .skin-card.rarity-common { border-color: rgba(140,140,165,0.30); background: linear-gradient(160deg, #131320 0%, #0e0e1c 100%); } .skin-card.rarity-common:hover { border-color: rgba(180,180,200,0.45); box-shadow: 0 6px 20px rgba(80, 80, 120, 0.20), 0 0 8px rgba(100,100,140,0.12); } .skin-card.rarity-rare { border-color: #3b82f6; } .skin-card.rarity-rare:hover { box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); } .skin-card.rarity-epic { border-color: #a855f7; } .skin-card.rarity-epic:hover { box-shadow: 0 0 15px rgba(168, 85, 247, 0.4); } .skin-card.rarity-legendary { border-color: #fbbf24; animation: legendaryBorder 2s ease-in-out infinite; } .skin-card.rarity-legendary:hover { box-shadow: 0 0 20px rgba(251, 191, 36, 0.5); } @keyframes legendaryBorder { 0%, 100% { border-color: #fbbf24; } 50% { border-color: #f59e0b; } } /* Skin preview with real crypto logo */ .skin-preview-logo { width: 80px; height: 80px; margin: 0 auto 12px; position: relative; display: flex; align-items: center; justify-content: center; } .skin-logo-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; position: relative; z-index: 2; filter: drop-shadow(0 0 8px var(--glow-color, #888)); transition: transform 0.2s ease, filter 0.2s ease; } .skin-card:hover .skin-logo-img { transform: scale(1.15); filter: drop-shadow(0 0 14px var(--glow-color, #888)); } .skin-logo-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, var(--glow-color, #888) 0%, transparent 70%); opacity: 0.25; z-index: 1; animation: skinGlowPulse 2s ease-in-out infinite; } @keyframes skinGlowPulse { 0%, 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.15); } } .rarity-premium .skin-logo-glow { opacity: 0.3; width: 78px; height: 78px; } .rarity-ultra .skin-logo-glow { opacity: 0.4; width: 85px; height: 85px; animation: skinGlowPulseUltra 1.5s ease-in-out infinite; } @keyframes skinGlowPulseUltra { 0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.2); } } .rarity-legendary .skin-logo-glow { opacity: 0.5; width: 90px; height: 90px; background: radial-gradient(circle, #ffd700 0%, rgba(255,215,0,0.3) 40%, transparent 70%); animation: skinGlowPulseLegendary 1.2s ease-in-out infinite; } @keyframes skinGlowPulseLegendary { 0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.65; transform: translate(-50%, -50%) scale(1.25); } } .rarity-legendary .skin-logo-img { filter: drop-shadow(0 0 12px #ffd700) drop-shadow(0 0 4px #fff); } .rarity-ultra .skin-logo-img { filter: drop-shadow(0 0 10px var(--glow-color, #ef4444)) drop-shadow(0 0 3px #fff); } /* Legacy skin preview (hidden) */ .skin-preview { display: none; } .skin-preview-inner { display: none; } .skin-name { font-size: 18px; font-weight: 800; color: #e0e0f0; margin-bottom: 6px; letter-spacing: 0.3px; } .skin-desc { font-size: 13px; color: #7a7a9a; margin-bottom: 12px; line-height: 1.45; min-height: 38px; } .skin-rarity-badge { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 10px; } .skin-rarity-badge.common { color: #7a7a8a; } .skin-rarity-badge.rare { color: #3b82f6; } .skin-rarity-badge.epic { color: #a855f7; } .skin-rarity-badge.legendary { color: #fbbf24; } .skin-price { font-size: 16px; font-weight: 800; color: #fbbf24; } .skin-price.owned { color: #22c55e; font-size: 13px; } .skin-price.not-enough { color: #ef4444; } .shop-footer { margin-top: 32px; padding-top: 20px; border-top: 1px solid #1e1e30; text-align: center; font-size: 14px; color: #7c7c9a; } .shop-container--v3 .shop-footer-text { font-size: 13px; letter-spacing: 0.3px; color: #6b6b86; } .shop-coins-val { font-weight: 800; color: #fbbf24; font-size: 18px; } .shop-toast { position: fixed; bottom: clamp(24px, 8vh, 64px); left: 50%; transform: translateX(-50%); background: #1e1e30; color: #fff; padding: clamp(11px, 2.6vw, 14px) clamp(18px, 4vw, 26px); border-radius: 12px; font-size: clamp(13px, 3.2vw, 15px); font-weight: 600; letter-spacing: 0.01em; line-height: 1.35; max-width: min(92vw, 520px); text-align: center; z-index: 300; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); animation: toastIn 0.32s cubic-bezier(0.16, 1, 0.3, 1), toastOut 0.36s ease var(--toast-out-delay, 1.7s) forwards; pointer-events: none; -webkit-font-smoothing: antialiased; } .shop-toast__icon { font-size: 1.25em; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); } .shop-toast__msg { flex: 1 1 auto; min-width: 0; } /* Cap-reached variant — amber gradient with warm glow. Reads as "daily limit" not "error". */ .shop-toast--cap { background: linear-gradient(135deg, #2a1f0b 0%, #3a2810 55%, #2a1f0b 100%); border: 1px solid rgba(247, 147, 26, 0.55); color: #ffe5b4; box-shadow: 0 10px 32px rgba(247, 147, 26, 0.22), 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 220, 150, 0.10); font-weight: 700; } .shop-toast--cap .shop-toast__icon { font-size: 1.4em; filter: drop-shadow(0 0 6px rgba(247, 147, 26, 0.55)); } .shop-toast--success { background: linear-gradient(135deg, #0d2616 0%, #143821 55%, #0d2616 100%); border: 1px solid rgba(34, 197, 94, 0.55); color: #c8f5d8; } .shop-toast--error { background: linear-gradient(135deg, #2a0c0c 0%, #3a1212 55%, #2a0c0c 100%); border: 1px solid rgba(239, 68, 68, 0.55); color: #fbcaca; } .shop-toast--warning { background: linear-gradient(135deg, #2a1f0b 0%, #3a2810 55%, #2a1f0b 100%); border: 1px solid rgba(250, 204, 21, 0.55); color: #fff3c4; } @keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(24px) scale(0.96); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } @keyframes toastOut { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(-14px); } } /* Mobile: lift above the bottom control rail so the toast doesn't sit under the dpad/buttons. Also widen to fill (with margin) for readability. */ @media (max-width: 480px) { .shop-toast { bottom: clamp(70px, 14vh, 110px); width: calc(100vw - 24px); max-width: none; padding: 12px 16px; } } /* Faction tabs */ .shop-faction-tabs { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; } .faction-tab { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); color: #7c7c9a; padding: 5px 13px; border-radius: 9px; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; transition: all 0.18s; text-transform: uppercase; } .faction-tab:hover { border-color: var(--tab-color, #8b5cf6); color: var(--tab-color, #8b5cf6); background: rgba(255,255,255,0.07); } .faction-tab.active { background: var(--tab-color, #8b5cf6); border-color: var(--tab-color, #8b5cf6); color: #fff; } /* Shop tier info panel (replaces old earn-info) */ .shop-tier-info { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } .shop-tier-info-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #8a8aaa; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 5px 12px; } .sti-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .sti-label { font-weight: 800; font-size: 11px; letter-spacing: 0.5px; } .sti-desc { color: #7a7a9a; font-size: 11px; } /* Tier reward badge in shop headers */ .shop-tier-reward { font-size: 14px; color: #ffd700 !important; background: rgba(255,215,0,0.08) !important; border-color: rgba(255,215,0,0.15) !important; } /* Premium rarity (purple glow) */ .skin-card.rarity-premium { border-color: #a855f7; box-shadow: 0 0 8px rgba(168, 85, 247, 0.2), inset 0 0 15px rgba(168, 85, 247, 0.03); } .skin-card.rarity-premium:hover { box-shadow: 0 0 22px rgba(168, 85, 247, 0.5), 0 0 40px rgba(168, 85, 247, 0.15); } .skin-rarity-badge.premium { color: #a855f7; } /* Ultra rarity (red/orange glow) */ .skin-card.rarity-ultra { border-color: #ef4444; background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(15,15,30,0.95)); box-shadow: 0 0 10px rgba(239, 68, 68, 0.25), 0 0 20px rgba(255, 100, 0, 0.1); animation: ultraGlow 2s ease-in-out infinite; } .skin-card.rarity-ultra:hover { box-shadow: 0 0 25px rgba(239, 68, 68, 0.6), 0 0 45px rgba(255, 100, 0, 0.2); } .skin-rarity-badge.ultra { color: #ef4444; font-weight: 900; } @keyframes ultraGlow { 0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.25), 0 0 20px rgba(255, 100, 0, 0.1); } 50% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.35), 0 0 30px rgba(255, 100, 0, 0.18); } } /* Legendary rarity (golden glow with sparkle animation) */ .skin-card.rarity-legendary { border-color: #ffd700 !important; background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(15,15,30,0.95)) !important; box-shadow: 0 0 12px rgba(255, 215, 0, 0.3), 0 0 30px rgba(255, 180, 0, 0.1); animation: legendaryCardGlow 2s ease-in-out infinite, legendarySparkle 3s linear infinite; } .skin-card.rarity-legendary:hover { box-shadow: 0 0 30px rgba(255, 215, 0, 0.7), 0 0 60px rgba(255, 180, 0, 0.25) !important; } @keyframes legendaryCardGlow { 0%, 100% { box-shadow: 0 0 12px rgba(255, 215, 0, 0.3), 0 0 30px rgba(255, 180, 0, 0.1); border-color: #ffd700; } 50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 0 45px rgba(255, 180, 0, 0.2); border-color: #ffec80; } } @keyframes legendarySparkle { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Dollar price — wrapper */ .skin-price.dollar-price { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; width: 100%; padding: 0 2px; box-sizing: border-box; } /* Shared buy button base */ .skin-buy-options { display: flex; flex-direction: column; gap: 4px; width: 100%; } .btn-buy-card, .btn-buy-crypto { display: flex; flex-direction: row; align-items: center; gap: 0; width: 100%; background: rgba(20, 20, 30, 0.85); color: #e2e8f0; border: none; border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 600; cursor: pointer; letter-spacing: 0.3px; transition: background 0.18s, box-shadow 0.18s; box-sizing: border-box; text-align: left; backdrop-filter: blur(4px); line-height: 1.2; } /* Green left border for credit card */ .btn-buy-card { border-left: 3px solid #4CAF50; } .btn-buy-card:hover { background: rgba(34, 58, 34, 0.9); box-shadow: 0 0 10px rgba(76, 175, 80, 0.35); } /* Purple left border for crypto */ .btn-buy-crypto { border-left: 3px solid #7b3fe4; } .btn-buy-crypto:hover { background: rgba(40, 25, 70, 0.9); box-shadow: 0 0 10px rgba(123, 63, 228, 0.35); } .buy-icon { font-size: 14px; flex-shrink: 0; margin-right: 7px; line-height: 1; } .buy-label { flex: 1; font-size: 11px; color: #c4c4d8; } .buy-price { font-size: 12px; font-weight: 800; color: #fff; flex-shrink: 0; margin-left: 6px; } /* BTC P2P button — main shop */ .btn-buy-btcp2p { display: flex; flex-direction: row; align-items: center; gap: 0; width: 100%; background: linear-gradient(135deg, rgba(40,28,8,0.95), rgba(25,18,5,0.95)); color: #e2e8f0; border: none; border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 600; cursor: pointer; letter-spacing: 0.3px; transition: background 0.18s, box-shadow 0.18s, transform 0.15s; box-sizing: border-box; text-align: left; backdrop-filter: blur(4px); line-height: 1.2; border-left: 3px solid #f7931a; position: relative; overflow: hidden; } .btn-buy-btcp2p::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(247,147,26,0.08), transparent 60%); pointer-events: none; } .btn-buy-btcp2p:hover { background: linear-gradient(135deg, rgba(60,40,10,0.95), rgba(35,25,8,0.95)); box-shadow: 0 0 14px rgba(247,147,26,0.5), inset 0 0 20px rgba(247,147,26,0.08); transform: scale(1.02); } .btn-buy-btcp2p .buy-icon { color: #f7931a; } .btn-buy-btcp2p .buy-label { color: #f7931a; font-weight: 700; } .btn-buy-btcp2p .buy-price { color: #ffd700; text-shadow: 0 0 6px rgba(255,215,0,0.3); } /* BTC P2P button — faction skin popup */ .fsp-btn-buy-btcp2p { display: flex; flex-direction: row; align-items: center; gap: 0; width: 100%; background: linear-gradient(135deg, rgba(40,28,8,0.95), rgba(25,18,5,0.95)); color: #e2e8f0; border: none; border-radius: 8px; padding: 11px 14px; font-size: 14px; font-weight: 700; cursor: pointer; letter-spacing: 0.3px; transition: background 0.18s, box-shadow 0.18s, transform 0.18s; box-sizing: border-box; text-align: left; backdrop-filter: blur(4px); line-height: 1.2; font-family: inherit; border-left: 3px solid #f7931a; position: relative; overflow: hidden; } .fsp-btn-buy-btcp2p::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(247,147,26,0.08), transparent 60%); pointer-events: none; } .fsp-btn-buy-btcp2p:hover { background: linear-gradient(135deg, rgba(60,40,10,0.95), rgba(35,25,8,0.95)); box-shadow: 0 0 14px rgba(247,147,26,0.5), inset 0 0 20px rgba(247,147,26,0.08); transform: scale(1.03); } .fsp-btn-buy-btcp2p .fsp-buy-icon { color: #f7931a; } .fsp-btn-buy-btcp2p .fsp-buy-label { color: #f7931a; font-weight: 700; } .fsp-btn-buy-btcp2p .fsp-buy-price { color: #ffd700; text-shadow: 0 0 6px rgba(255,215,0,0.3); } /* ===== BTC P2P Payment Modal ===== */ /* ═══════════════════════════════════════ BTC P2P Payment — Cypherpunk Terminal ═══════════════════════════════════════ */ .btc-p2p-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.92); backdrop-filter: blur(8px); animation: btcFadeIn 0.3s ease; } @keyframes btcFadeIn { from { opacity: 0; } to { opacity: 1; } } .btc-p2p-modal { background: #050505; border: 2px solid #f7931a; max-width: 440px; width: 94%; max-height: 92vh; overflow-y: auto; color: #ccc; font-family: 'SF Mono','Fira Code','Cascadia Code','JetBrains Mono','Consolas',monospace; box-shadow: 0 0 0 1px rgba(247,147,26,0.15), 0 0 80px rgba(247,147,26,0.06), 0 40px 80px rgba(0,0,0,0.7); position: relative; } /* Scanlines */ .btc-p2p-modal::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px); pointer-events: none; z-index: 1; } /* Close */ .btc-close-btn { position: absolute; top: 10px; right: 12px; background: none; border: 1px solid #333; color: #666; font-size: 18px; cursor: pointer; line-height: 1; padding: 4px 7px; transition: all 0.15s; z-index: 5; } .btc-close-btn:hover { border-color: #ef4444; color: #ef4444; } /* Header */ .btc-header { text-align: center; padding: 1.25rem 1.5rem 1rem; background: linear-gradient(180deg, #0c0c0c, #060606); border-bottom: 1px solid #f7931a; } .btc-header-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .btc-logo-img { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; } .btc-header h2 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: #f7931a; letter-spacing: 0.12em; text-transform: uppercase; } .btc-skin-label { font-size: 0.8125rem; color: #888; } /* QR */ .btc-qr-wrap { text-align: center; padding: 1.25rem 1.5rem 0.75rem; background: #080808; border-bottom: 1px solid #111; } .btc-qr-wrap canvas { border: 3px solid #f7931a; box-shadow: 0 0 30px rgba(247,147,26,0.08); } .btc-qr-hint { font-size: 0.6875rem; color: #555; margin-top: 0.625rem; letter-spacing: 0.04em; text-transform: uppercase; } /* Steps */ .btc-step { display: flex; gap: 0.75rem; padding: 0.875rem 1.5rem; background: #080808; border-bottom: 1px solid #111; transition: background 0.15s; } .btc-step:hover { background: #0a0a0a; } .btc-step-num { width: 22px; height: 22px; background: #f7931a; color: #000; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.6875rem; flex-shrink: 0; margin-top: 2px; } .btc-step-content { flex: 1; min-width: 0; } .btc-step-label { font-size: 0.625rem; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.375rem; } .btc-copy-row { display: flex; border: 1px solid #1a1a1a; background: #0a0a0a; overflow: hidden; } .btc-copy-val { flex: 1; padding: 0.625rem 0.75rem; color: #f7931a; font-size: 0.75rem; font-family: inherit; word-break: break-all; cursor: pointer; transition: color 0.15s; line-height: 1.4; } .btc-copy-val:hover { color: #ffd700; } .btc-copy-btn { background: #f7931a; color: #000; border: none; border-left: 1px solid rgba(0,0,0,0.2); padding: 0.625rem 0.875rem; cursor: pointer; font-weight: 800; font-size: 0.625rem; font-family: inherit; text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0; transition: background 0.15s; } .btc-copy-btn:hover { background: #ffaa33; } /* Timer */ .btc-timer-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1.5rem; background: #060606; border-bottom: 1px solid #111; font-size: 0.6875rem; } .btc-timer-label { color: #555; text-transform: uppercase; letter-spacing: 0.08em; } .btc-timer-value { color: #f7931a; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.875rem; } .btc-timer-value.urgent { color: #ef4444; } .btc-timer-value.warning { color: #f59e0b; } /* Status */ .btc-status-box { padding: 1rem 1.5rem; background: #080808; border-bottom: 1px solid #111; } .btc-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.5rem; vertical-align: middle; } .btc-status-dot.waiting { background: #f7931a; animation: btcPulse 2s infinite; } .btc-status-dot.detected { background: #3b82f6; animation: btcPulse 1.5s infinite; } .btc-status-dot.completed { background: #22c55e; } .btc-status-dot.expired { background: #ef4444; } @keyframes btcPulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } } .btc-status-text { font-size: 0.75rem; font-weight: 700; color: #ccc; letter-spacing: 0.06em; text-transform: uppercase; } .btc-tx-hash { margin-top: 0.625rem; padding: 0.625rem; background: #0a0a0a; border: 1px solid #1a1a1a; font-size: 0.625rem; color: #f7931a; word-break: break-all; line-height: 1.6; } .btc-tx-hash a { color: #f7931a; text-decoration: none; } .btc-tx-hash a:hover { color: #ffd700; text-decoration: underline; } /* Bonus info */ .btc-bonus-info { padding: 0.875rem 1.5rem; background: rgba(247,147,26,0.04); border-bottom: 1px solid rgba(247,147,26,0.1); display: flex; align-items: center; gap: 0.75rem; } .btc-bonus-badge { background: #f7931a; color: #000; padding: 4px 10px; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.06em; flex-shrink: 0; } .btc-bonus-text { font-size: 0.6875rem; color: #f7931a; font-weight: 600; line-height: 1.5; } /* Email notice */ .btc-email-notice { padding: 0.875rem 1.5rem; background: #060606; border-bottom: 1px solid #0a0a0a; font-size: 0.6875rem; color: #555; line-height: 1.7; } .btc-email-notice strong { color: #888; font-weight: 700; } .btc-email-notice .btc-email-title { font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #666; margin-bottom: 0.375rem; } .btc-email-notice .btc-safe-msg { margin-top: 0.375rem; color: #444; font-size: 0.625rem; } /* Mempool link */ .btc-mempool-link { text-align: center; padding: 0.625rem; background: #050505; } .btc-mempool-link a { color: #444; font-size: 0.625rem; text-decoration: none; letter-spacing: 0.04em; transition: color 0.15s; } .btc-mempool-link a:hover { color: #f7931a; } /* Copy toast */ .btc-copy-toast { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #f7931a; color: #000; padding: 8px 20px; font-size: 0.75rem; font-weight: 800; pointer-events: none; z-index: 10; letter-spacing: 0.06em; animation: btcToastFade 1.5s ease forwards; } @keyframes btcToastFade { 0% { opacity:0; transform:translate(-50%,-50%) scale(0.8); } 15% { opacity:1; transform:translate(-50%,-50%) scale(1); } 70% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-60%); } } @media (max-width: 480px) { .btc-p2p-modal { max-width: 100%; border-width: 1px; } .btc-header { padding: 1rem; } .btc-step, .btc-status-box, .btc-bonus-info, .btc-email-notice { padding-left: 1rem; padding-right: 1rem; } } /* Tier tabs */ .shop-tier-tabs { display: flex; gap: 7px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; } .tier-tab { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); color: #8a8aaa; padding: 6px 14px; border-radius: 10px; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: 1px; transition: all 0.2s; text-transform: uppercase; } .tier-tab:hover { border-color: var(--tier-color, #888); color: var(--tier-color, #888); background: rgba(255,255,255,0.06); box-shadow: 0 0 10px rgba(255,255,255,0.05); } .tier-tab.active { background: var(--tier-color, #888); border-color: var(--tier-color, #888); color: #fff; box-shadow: 0 0 14px var(--tier-color, #888), 0 0 4px rgba(255,255,255,0.15); } /* Skin faction logo (legacy - now integrated into preview) */ .skin-faction-logo { display: none; } .skin-faction-logo img { display: none; } /* Legacy faction icon (hidden now) */ .skin-faction-icon { font-size: 18px; margin-bottom: 4px; } /* HUD coin display */ .hud-coins { position: fixed; top: 8px; right: 12px; color: #ffd700; font-size: 13px; font-weight: 700; font-family: Rajdhani, sans-serif; pointer-events: none; z-index: 50; text-shadow: 0 0 6px rgba(255,215,0,0.4); display: none; } .hud-coins.visible { display: block; } /* === LIVE CANVAS SKIN PREVIEWS === */ .skin-canvas-wrap { width: 100%; height: 140px; margin: 0 0 14px; border-radius: 0; overflow: hidden; position: relative; border: none; background: transparent; display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease; } .skin-preview-canvas { display: block; width: 150px; height: 125px; border-radius: 0; background: transparent; image-rendering: auto; /* 2026-05-18: clip aura/glow that bleeds past visible ring (in-game render is fine, only shop cards looked bad because the canvas is a rectangle that shows the aura's hard edge against the card bg). Ellipse fits the 150x125 canvas tightly so only outer corners are cut, preserving the artistic ring + aura halo within the safe radius. */ -webkit-mask-image: radial-gradient(ellipse at center, #000 60%, transparent 90%); mask-image: radial-gradient(ellipse at center, #000 60%, transparent 90%); } .skin-card:hover .skin-canvas-wrap { transform: scale(1.08); } /* Canvas glow matching rarity */ .rarity-common .skin-canvas-wrap { box-shadow: 0 0 6px rgba(100, 100, 120, 0.2); } .rarity-premium .skin-canvas-wrap { box-shadow: 0 0 10px rgba(168, 85, 247, 0.35); } .rarity-premium:hover .skin-canvas-wrap { box-shadow: 0 0 18px rgba(168, 85, 247, 0.55); } .rarity-ultra .skin-canvas-wrap { box-shadow: 0 0 12px rgba(239, 68, 68, 0.35), 0 0 20px rgba(255, 100, 0, 0.15); } .rarity-ultra:hover .skin-canvas-wrap { box-shadow: 0 0 20px rgba(239, 68, 68, 0.55), 0 0 30px rgba(255, 100, 0, 0.25); } .rarity-legendary .skin-canvas-wrap { box-shadow: 0 0 14px rgba(255, 215, 0, 0.4), 0 0 25px rgba(255, 180, 0, 0.15); } .rarity-legendary:hover .skin-canvas-wrap { box-shadow: 0 0 22px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 180, 0, 0.3); } /* === FACTION SECTION TITLE === */ .faction-section-title { font-size: 11px; font-weight: 510; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tertiary); text-align: center; margin-top: 22px; margin-bottom: 4px; } /* === FACTION INFO BAR (shows selected faction details) === */ .faction-info-bar { text-align: center; min-height: 32px; margin-top: 4px; margin-bottom: 4px; transition: opacity 0.25s ease; } .faction-info-bar .fi-tagline { font-size: 14px; color: var(--muted-foreground); font-style: normal; } .faction-info-bar .fi-ability { font-size: 11px; color: #9090b0; margin-top: 2px; } .faction-info-bar .fi-ability-name { font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; } .faction-info-bar.btc .fi-ability-name { color: #f7931a; } .faction-info-bar.eth .fi-ability-name { color: #627eea; } .faction-info-bar.tao .fi-ability-name { color: #00d4ff; } .faction-info-bar.doge .fi-ability-name { color: #c2a633; } .faction-info-bar.sol .fi-ability-name { color: #9945ff; } .faction-info-bar.bnb .fi-ability-name { color: #F0B90B; } /* === FACTION QUICK POPUP === */ .fqp-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 180; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; animation: fqpFadeIn 0.2s ease; } @keyframes fqpFadeIn { from { opacity: 0; } to { opacity: 1; } } .fqp-hidden { display: none !important; } .fqp-box { background: linear-gradient(165deg, #0d0d1f 0%, #080816 60%, #0a0a18 100%); border: 1.5px solid rgba(139,92,246,0.25); border-radius: 20px; padding: 28px 36px 24px; min-width: 320px; max-width: 420px; text-align: center; box-shadow: 0 0 60px rgba(139,92,246,0.08), 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04); animation: fqpSlideIn 0.25s ease; } @keyframes fqpSlideIn { from { transform: scale(0.9) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .fqp-header { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 16px; } .fqp-logo { width: 56px; height: 56px; border-radius: 50%; filter: drop-shadow(0 0 12px rgba(255,255,255,0.15)); } .fqp-title { font-size: 28px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; } .fqp-tagline { font-size: 13px; color: #8a8aaa; font-style: italic; } .fqp-skin-preview { margin: 12px 0 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .fqp-skin-preview canvas { border-radius: 12px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); } .fqp-skin-name { font-size: 12px; color: #6a6a8a; font-weight: 600; letter-spacing: 0.5px; } .fqp-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .fqp-btn { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; border: none; border-radius: var(--radius); font-size: 13px; font-weight: 510; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; min-width: 0; } .fqp-btn-icon { font-size: 16px; } .fqp-btn-play { background: var(--primary); color: var(--primary-foreground); height: 48px; font-weight: 590; font-size: 14px; box-shadow: none; } .fqp-btn-play:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: none; } .fqp-btn-play:active { transform: translateY(0); } .fqp-btn-skins { background: var(--card); border: 1px solid var(--border); color: var(--foreground); } .fqp-btn-skins:hover { background: var(--card-hover); border-color: var(--border-emphasis); transform: translateY(-1px); } .fqp-btn-skins:active { transform: translateY(0); } .fqp-btn-rules { background: var(--card); border: 1px solid var(--border); color: var(--foreground); } .fqp-btn-rules:hover { background: var(--card-hover); border-color: var(--border-emphasis); transform: translateY(-1px); } .fqp-btn-rules:active { transform: translateY(0); } /* CLASS button */ .fqp-btn-class { background: var(--card); border: 1px solid var(--border); color: var(--foreground); } .fqp-btn-class:hover { background: var(--card-hover); border-color: var(--border-emphasis); transform: translateY(-1px); } .fqp-btn-class:active { transform: translateY(0); } /* Class indicator in faction popup */ .fqp-class-indicator { text-align: center; margin-top: 10px; font-size: 13px; color: rgba(255,255,255,0.5); } .fqp-class-label { margin-right: 4px; } .fqp-class-value { color: #00d4ff; font-weight: 700; } /* Remove skin preview (hidden) */ .fqp-skin-preview { display: none !important; } /* === CLASS SELECTION POPUP === */ .class-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.88); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; animation: fqpFadeIn 0.25s ease; } .class-hidden { display: none !important; } .class-box { background: linear-gradient(165deg, #100e20 0%, #0a0814 100%); border: 2px solid rgba(0,200,255,0.25); border-radius: 20px; padding: 36px 32px 28px; max-width: 860px; width: 94vw; max-height: 88vh; overflow-y: auto; position: relative; text-align: center; box-shadow: 0 0 60px rgba(0,200,255,0.08), inset 0 1px 0 rgba(255,255,255,0.04); } .class-close { position: absolute; top: 14px; right: 18px; background: none; border: none; color: rgba(255,255,255,0.5); font-size: 32px; cursor: pointer; z-index: 5; transition: color 0.2s; } .class-close:hover { color: #fff; } .class-header { margin-bottom: 28px; } .class-title { font-size: 32px; font-weight: 900; color: #00d4ff; letter-spacing: 3px; margin: 0; text-shadow: 0 0 20px rgba(0,200,255,0.3); } .class-subtitle { font-size: 16px; color: rgba(255,255,255,0.5); margin: 8px 0 0; letter-spacing: 0.5px; } .class-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 24px; } @media (max-width: 600px) { .class-grid { grid-template-columns: 1fr; } } .class-card { background: rgba(255,255,255,0.03); border: 2px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px 20px; cursor: pointer; transition: all 0.25s ease; text-align: center; } .class-card:hover { border-color: rgba(0,200,255,0.45); background: rgba(0,200,255,0.06); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,200,255,0.1); } .class-card-selected { border-color: #00d4ff !important; background: rgba(0,200,255,0.12) !important; box-shadow: 0 0 30px rgba(0,200,255,0.2), inset 0 0 20px rgba(0,200,255,0.05) !important; } .class-card-locked { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .class-card-icon { font-size: 52px; margin-bottom: 10px; line-height: 1; } .class-card-name { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: 2.5px; margin-bottom: 2px; } .class-card-role { font-size: 15px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; font-weight: 600; } .class-card-desc { font-size: 15px; color: rgba(255,255,255,0.65); line-height: 1.5; margin-bottom: 16px; } .class-card-stats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; } .class-stat { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 6px 12px; font-size: 14px; } .stat-label { color: rgba(255,255,255,0.45); margin-right: 5px; font-weight: 600; } .stat-val { color: rgba(255,255,255,0.85); font-weight: 800; } .stat-buff { color: #44ff88; } .stat-nerf { color: #ff5555; } .class-card-abilities { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 14px; margin-top: 8px; } .class-ability { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; text-align: left; } .ability-key { background: rgba(0,200,255,0.15); border: 1.5px solid rgba(0,200,255,0.35); border-radius: 6px; padding: 4px 10px; color: #00d4ff; font-weight: 900; font-size: 16px; min-width: 28px; text-align: center; flex-shrink: 0; } .ability-name { color: #fff; font-weight: 800; min-width: 60px; font-size: 15px; flex-shrink: 0; } .ability-desc { color: rgba(255,255,255,0.55); font-size: 13px; line-height: 1.4; } .class-card-lock { margin-top: 16px; font-size: 18px; color: rgba(255,255,255,0.3); font-weight: 800; letter-spacing: 1px; } .class-confirm-btn { background: linear-gradient(135deg, #00b4d8, #0077b6); border: none; border-radius: 12px; color: #fff; font-weight: 900; font-size: 18px; letter-spacing: 3px; padding: 14px 48px; cursor: pointer; transition: all 0.25s ease; display: inline-block; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .class-confirm-btn:hover { background: linear-gradient(135deg, #00d4ff, #0096c7); transform: translateY(-3px); box-shadow: 0 6px 30px rgba(0,200,255,0.35); } /* === RULES POPUP === */ .rules-overlay { position: fixed; inset: 0; z-index: 200; /* 2026-05-23: 0.82 → 0.96. Previous 18% transparency let the #airdropStatusBadge (z-index 60) bleed through on mobile where the rules-box doesn't cover the full viewport. Mobile gets a fully opaque background below — desktop keeps a tiny hint of the game behind to preserve the floating-glass feel. */ background: rgba(5, 5, 8, 0.96); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; animation: fqpFadeIn 0.2s ease; } /* Hide every bottom/corner rail tile while the rules popup is open so nothing can bleed through behind the dim layer. Belt-and-suspenders for the rgba override above — both fixes apply, neither alone is enough on every device. */ .rules-overlay:not(.rules-hidden) ~ * #airdropStatusBadge, body:has(.rules-overlay:not(.rules-hidden)) #airdropStatusBadge, body:has(.rules-overlay:not(.rules-hidden)) .airdrop-banner-corner, body:has(.rules-overlay:not(.rules-hidden)) .vgpu-corner > .rail-toggle, body:has(.rules-overlay:not(.rules-hidden)) .vgpu-corner > .rail-body { visibility: hidden !important; } /* Mobile portrait: fully opaque so even rare browser quirks (sub-pixel render, GPU compositor) can't show anything behind the popup. */ @media (max-width: 768px) { .rules-overlay { background: #050508; backdrop-filter: none; } } .rules-hidden { display: none !important; } .rules-box { background: linear-gradient(165deg, #0d0d1f 0%, #080816 60%, #0a0a18 100%); border: 1.5px solid rgba(234,179,8,0.3); border-radius: 20px; padding: 32px 36px 28px; width: 90%; max-width: 480px; max-height: 85vh; overflow-y: scroll !important; -webkit-overflow-scrolling: touch; position: relative; text-align: center; box-shadow: 0 0 60px rgba(234,179,8,0.06), 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04); animation: fqpSlideIn 0.25s ease; } .rules-close { position: absolute; top: 16px; right: 18px; background: none; border: none; color: #555; font-size: 24px; cursor: pointer; transition: color 0.15s; line-height: 1; } .rules-close:hover { color: #ef4444; } .rules-header { text-align: center; margin-bottom: 24px; } .rules-icon { font-size: 36px; margin-bottom: 8px; } .rules-title { font-size: 26px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #facc15; margin: 0 0 6px; } .rules-subtitle { font-size: 14px; color: #8a8aaa; font-style: italic; margin: 0; } .rules-content { display: flex; flex-direction: column; gap: 18px; } .rules-section { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 16px 18px; text-align: left; } .rules-section-title { font-size: 14px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #c4b5fd; margin-bottom: 8px; } .rules-section p { font-size: 13px; color: #a0a0b8; line-height: 1.7; margin: 0 0 6px; } .rules-section p:last-child { margin-bottom: 0; } .rules-section strong { color: #e0e0f0; } .rules-list { list-style: none; padding: 0; margin: 6px 0; } .rules-list li { font-size: 13px; color: #ef4444; padding: 3px 0 3px 18px; position: relative; line-height: 1.6; } .rules-list li::before { content: '−'; position: absolute; left: 2px; font-weight: 700; } .rules-list li strong { color: #fca5a5; } .rules-list-green li { color: #4ade80; } .rules-list-green li::before { content: '+'; } .rules-list-green li strong { color: #86efac; } .rules-list-yellow li { color: #facc15; } .rules-list-yellow li::before { content: '~'; } .rules-list-yellow li strong { color: #fde68a; } .rules-got-it { display: inline-block; margin: 24px auto 0; padding: 14px 36px; border: none; border-radius: 14px; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; font-family: inherit; box-shadow: 0 4px 20px rgba(139,92,246,0.3); transition: all 0.2s ease; } .rules-got-it:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(139,92,246,0.45); } .rules-got-it:active { transform: scale(0.97); } /* Faction-specific border glow */ .fqp-box[data-faction="btc"] { border-color: rgba(247,147,26,0.35); } .fqp-box[data-faction="eth"] { border-color: rgba(98,126,234,0.35); } .fqp-box[data-faction="tao"] { border-color: rgba(0,212,255,0.35); } .fqp-box[data-faction="doge"] { border-color: rgba(194,166,51,0.35); } .fqp-box[data-faction="sol"] { border-color: rgba(153,69,255,0.35); } .fqp-box[data-faction="bnb"] { border-color: rgba(240,185,11,0.35); } .fqp-box[data-faction="btc"] .fqp-title { color: #f7931a; } .fqp-box[data-faction="eth"] .fqp-title { color: #627eea; } .fqp-box[data-faction="tao"] .fqp-title { color: #00d4ff; } .fqp-box[data-faction="doge"] .fqp-title { color: #c2a633; } .fqp-box[data-faction="sol"] .fqp-title { color: #9945ff; } .fqp-box[data-faction="bnb"] .fqp-title { color: #F0B90B; } /* === RANDOM FACTION BUTTON === */ .faction-random-btn { background: rgba(139, 92, 246, 0.15); border: 2px solid rgba(139, 92, 246, 0.3); border-radius: 12px; color: #8b5cf6; font-size: 13px; font-weight: 700; letter-spacing: 1px; cursor: pointer; padding: 10px 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all 0.2s; min-width: 76px; } .faction-random-btn:hover { background: rgba(139, 92, 246, 0.25); transform: scale(1.05); } .faction-random-btn .random-dice { font-size: 28px; line-height: 1; } /* Old .ab-multiplier removed — replaced by .abc-multi-* in corner banner */ /* Multiplier stat in airdrop panel */ .ap-stat-multi { background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(255,215,0,0.08)) !important; border-color: rgba(239,68,68,0.2) !important; } /* ========== Skin Tiers & Rewards section in airdrop popup ========== */ .ap-tiers { margin-bottom: 28px; } .ap-tier-subtitle { font-size: 14px; color: #8a8aaa; text-align: center; margin-bottom: 16px; } .ap-tier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .ap-tier-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px; text-align: center; } .ap-tier-name { font-size: 14px; font-weight: 900; letter-spacing: 1px; margin-bottom: 5px; } .ap-tier-price { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 8px; } .ap-tier-rewards { font-size: 13px; color: #8a8aaa; line-height: 1.5; } .ap-tier-free { border-color: rgba(170,170,204,0.15); } .ap-tier-premium { border-color: rgba(168,85,247,0.2); } .ap-tier-ultra { border-color: rgba(239,68,68,0.25); background: linear-gradient(135deg, rgba(239,68,68,0.06), rgba(255,100,0,0.04)); } .ap-tier-legendary { border-color: rgba(255,215,0,0.25); background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,165,0,0.04)); } @media (max-width: 500px) { .ap-tier-grid { grid-template-columns: 1fr; } .shop-tier-info { flex-direction: column; align-items: center; } .ap-stack-examples { grid-template-columns: 1fr; } } /* ========== Community Token Section ========== */ .ap-community { margin-bottom: 28px; } .ap-community-notice { font-size: 13px; color: #d0c090; text-align: center; line-height: 1.6; margin-bottom: 14px; padding: 10px 16px; background: rgba(247,147,26,0.08); border: 1px solid rgba(247,147,26,0.18); border-radius: 10px; } .ap-community-desc { font-size: 15px; color: #b0b0cc; text-align: center; line-height: 1.6; margin-bottom: 16px; } .ap-community-points { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .ap-community-point { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: #9a9abb; line-height: 1.6; padding: 8px 12px; background: rgba(255,255,255,0.02); border-radius: 8px; border: 1px solid rgba(255,255,255,0.04); } .ap-cp-icon { flex-shrink: 0; font-size: 15px; } .ap-community-quote { font-size: 14px; font-style: italic; color: #8a8aaa; text-align: center; padding: 12px 18px; background: rgba(255,255,255,0.02); border-left: 3px solid rgba(34,197,94,0.3); border-radius: 0 8px 8px 0; } /* ========== Multiplier Stacking Section ========== */ .ap-stack-info { margin-top: 16px; padding: 14px; background: linear-gradient(135deg, rgba(239,68,68,0.06), rgba(255,215,0,0.04)); border: 1px solid rgba(239,68,68,0.15); border-radius: 12px; } .ap-stack-title { font-size: 16px; font-weight: 900; color: #fff; text-align: center; margin-bottom: 8px; letter-spacing: 0.5px; } .ap-stack-desc { font-size: 13px; color: #9a9abb; text-align: center; margin-bottom: 14px; line-height: 1.6; } .ap-stack-examples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .ap-stack-ex { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #8a8aaa; padding: 8px 10px; background: rgba(0,0,0,0.2); border-radius: 8px; } .ap-stack-ex-label { font-weight: 700; color: #b0b0cc; min-width: 90px; } .ap-stack-ex-arrow { color: #5a5a7a; font-size: 12px; } .ap-stack-ex-val { font-weight: 900; font-size: 15px; } .ap-stack-ex-dur { font-size: 11px; color: #7a7a9a; } .ap-stack-note { font-size: 12px; color: #7a7a9a; text-align: center; margin-top: 12px; font-style: italic; } /* ============================================ ACCESSIBILITY — focus-visible + reduced motion ============================================ */ /* Visible focus ring for interactive elements (skip inputs which have a custom focus state) */ button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Kill explicit transforms that imply movement */ .btn-skins:hover, .btn-settings:hover, .btn-runner-corner:hover, .faction-btn:hover, .faction-btn.selected:hover, .btn-voltage-corner:hover, .btn-friends-corner:hover, .btn-signup-corner:hover, .btn-earn:hover, #playBtn:hover, .fqp-btn-play:hover, .fqp-btn-skins:hover, .fqp-btn-rules:hover, .fqp-btn-class:hover, .vgpu-title-logo { transform: none !important; } } /* ============================================================ === ACETERNITY/MAGIC UI EFFECTS (ported, CSS-only) === 3 subtle motion effects ported from Magic UI / Aceternity: 1. BorderBeam -> #playBtn (rotating conic highlight) 2. Ambient pulse -> .vgpu-title-logo (radial halo) 3. Animated shimmer -> .ticker-bar (slow gradient sweep) All token-driven. No external imports. Respect reduced-motion. ============================================================ */ /* Register an angle custom property so it can be animated. Falls back gracefully in browsers that don't support @property. */ @property --bb-angle { syntax: ''; inherits: false; initial-value: 0deg; } /* --- 1. BorderBeam on #playBtn ----------------------------- */ /* Re-enable a pseudo on #playBtn (the original rule sets ::before to display:none). We use ::after so we don't fight that base rule. */ #playBtn { isolation: isolate; } #playBtn::after { /* BorderBeam removed — user did not want the rotating conic shimmer */ display: none !important; content: none !important; animation: none !important; } /* --- 2. Ambient pulse halo on .vgpu-title-logo -------------- */ .vgpu-title-logo { isolation: isolate; } .vgpu-title-logo::before { content: ''; position: absolute; inset: -40%; z-index: -1; background: radial-gradient( closest-side, rgba(167, 139, 250, 0.28) 0%, rgba(167, 139, 250, 0.10) 40%, transparent 70% ); filter: blur(20px); opacity: 0.7; animation: vgpu-halo-pulse 4s ease-in-out infinite alternate; pointer-events: none; border-radius: 50%; } @keyframes vgpu-halo-pulse { 0% { opacity: 0.45; transform: scale(0.92); } 100% { opacity: 0.85; transform: scale(1.08); } } /* --- 3. Animated shimmer sweep on .ticker-bar -------------- */ .ticker-bar { position: fixed; /* preserve original */ } .ticker-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, transparent 35%, rgba(167, 139, 250, 0.07) 50%, transparent 65%, transparent 100% ); background-size: 200% 100%; background-position: -100% 0; animation: ticker-shimmer 8s linear infinite; pointer-events: none; mix-blend-mode: screen; } @keyframes ticker-shimmer { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } /* --- Reduced motion: disable all 3 effects ----------------- */ @media (prefers-reduced-motion: reduce) { #playBtn::after, .vgpu-title-logo::before, .ticker-bar::after { animation: none !important; } #playBtn::after { opacity: 0.4; } .vgpu-title-logo::before { opacity: 0.5; transform: none; } } /* ============================================================ === HOME LAYOUT FIX + MOBILE RESPONSIVE === Root cause: `#menuScreen > * { position: relative }` (line ~87) was overriding the absolute/fixed positioning of every direct child (corner widgets, ticker, panels), so they collapsed into the flex flow and got stacked next to .menu-container, pushing the hero off-center. Below we restore intended anchoring with higher specificity, then add proper tablet & mobile breakpoints. Inspired by Krunker.io / Diep.io / Bonk.io home layouts. ============================================================ */ /* ---------- 1. Re-anchor menu screen children ---------- */ /* Override the broad `#menuScreen > *` reset for positioned widgets. We keep the relative-fallback for content that genuinely needs it (canvas backgrounds, popups), but force corner widgets back to their declared anchor coordinates. */ #menuScreen > .vgpu-corner { position: absolute; top: 40px; right: 20px; left: auto; bottom: auto; z-index: 30; } /* Runner pairs with vol sliders on the right edge — single utility cluster */ #menuScreen > .menu-runner-panel { position: absolute; bottom: 86px; right: 16px; top: auto; left: auto; z-index: 25; } #menuScreen > .menu-vol-panel { position: absolute; bottom: 18px; right: 16px; top: auto; left: auto; z-index: 25; } /* EARN COINS — bottom-center, max-width clamped to feel anchored */ #menuScreen > .menu-earn-panel { position: absolute; bottom: 18px; left: 50%; right: auto; top: auto; transform: translateX(-50%); z-index: 25; max-width: min(440px, calc(100vw - 360px)); } #menuScreen > .ticker-bar { position: fixed; top: 0; left: 0; right: 0; bottom: auto; width: 100%; z-index: 200; } /* ---------- 2. Center the hero column ---------- */ /* Inside the flex container `#menuScreen` we want a single centered stack. Other absolute children no longer participate in the flex flow (since they're positioned), so flex centering of the hero works as intended. We keep margin:auto as belt-and-braces. */ #menuScreen > .menu-container { position: relative; margin: auto; /* DESIGN.md §7: public-page max-width 1200px, 24px side padding. We use 1100px here so the hero never feels stretched on 1440 monitors, but we still get a real bonus-row that can breathe horizontally. */ max-width: 1100px; width: 100%; padding-left: 24px; padding-right: 24px; /* Top padding clears the fixed ticker (34px) and the vgpu-corner. Bottom padding clears only the volume panel now that EARN+RUNNER are inline below PLAY. */ padding-top: 44px; padding-bottom: 56px; z-index: 5; } /* Hero column: PLAY anchors the column, secondary actions below get the full width — bonus row uses a true 2-col grid for breathing room. */ .menu-main-actions { width: 100%; max-width: 880px; /* wider than 720 so bonus row can split */ margin-left: auto; margin-right: auto; } .menu-play-row { justify-content: center; max-width: 520px; /* PLAY/SKINS/SETTINGS stay tight in center */ margin-left: auto; margin-right: auto; } /* === HOW TO PLAY pill — sits between play-row and EARN COINS card === */ .menu-rules-btn { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 520px; margin: 14px auto 0; padding: 12px 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 9999px; color: #c8c8d0; font-family: 'Inter', sans-serif; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; text-align: left; } .menu-rules-btn:hover { background: rgba(74,222,128,0.06); border-color: rgba(74,222,128,0.30); transform: translateY(-1px); } .menu-rules-btn:hover .mrb-arrow { transform: translateX(3px); } .mrb-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(74,222,128,0.10); border: 1px solid rgba(74,222,128,0.25); color: #4ade80; font-size: 14px; line-height: 1; flex: 0 0 auto; } .mrb-text { font-size: 14px; font-weight: 590; color: #fff; letter-spacing: 0; line-height: 1.2; } .mrb-meta { flex: 1; font-size: 12px; color: #6b6b86; font-weight: 400; letter-spacing: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mrb-arrow { font-family: 'Inter', sans-serif; font-size: 16px; color: #4ade80; opacity: 0.75; transition: transform 0.15s ease, opacity 0.15s ease; flex: 0 0 auto; } /* Mobile: hide the meta line, keep label + arrow */ @media (max-width: 600px) { .mrb-meta { display: none; } } /* ---------- 3. Subtle z-index discipline ---------- */ /* Background canvas under everything; popups above corner widgets. */ #menuScreen > #menuBgCanvas { z-index: 0; } .fqp-overlay, .class-overlay, #authPopup, #airdropPanel { z-index: 1000; } /* ============================================================ TABLET — 1023px and below: edge widgets shrink, hero stays ============================================================ */ @media (max-width: 1023px) { #menuScreen > .vgpu-corner { top: 44px; /* clear ticker */ right: 12px; } #menuScreen > .menu-earn-panel { bottom: 70px; max-width: calc(100vw - 32px); } #menuScreen > .menu-container { padding-top: 110px; padding-bottom: 160px; } /* Volume sliders compact */ .mbp-vol-row .vol-slider { width: 60px; } } /* ============================================================ MOBILE — 767px and below: full single-column scroll - Hide expensive grain animation for perf - Stack everything in document flow - Faction grid 3x2 - PLAY full width, 56px tall ============================================================ */ @media (max-width: 767px) { /* Perf: kill grain overlay on mobile (saves a full-screen blend) */ body::before { display: none; } /* Re-flow: switch the menu screen from centered flex to scrollable single column. All previously absolute widgets become flow items. */ #menuScreen { display: block; align-items: initial; justify-content: initial; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Background canvas stays fixed behind everything */ #menuScreen > #menuBgCanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; /* iOS Safari: 100vh includes URL bar → content cut off; dvh is dynamic */ z-index: 0; } /* Ticker bar — stays fixed at top, slim */ #menuScreen > .ticker-bar { position: fixed; height: 32px; } /* Top corner: stats badges become a horizontal scrollable strip pinned just under the ticker */ #menuScreen > .vgpu-corner { position: fixed; top: 36px; left: 8px; right: 8px; z-index: 30; flex-direction: column; align-items: stretch; gap: 6px; } .vgpu-corner-top { justify-content: space-between; width: 100%; } .airdrop-banner-corner { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; width: 100%; } /* Hero column — full width, top padding clears fixed top bar */ #menuScreen > .menu-container { position: relative; margin: 0 auto; max-width: 100%; width: 100%; padding: 0 16px 24px; padding-top: 140px; z-index: 5; } /* Title scale */ .game-title { font-size: clamp(28px, 9vw, 44px); letter-spacing: -1px; } /* Faction grid: 3 columns × 2 rows on phones */ .menu-container .faction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; } .menu-container .faction-btn { max-width: none; width: 100%; min-width: 0; } /* PLAY full-width with 16px side padding (already on container), 56px target tap height */ .menu-play-row { flex-direction: column; gap: 10px; width: 100%; } #playBtn { width: 100%; min-height: 56px; padding: 16px 20px; font-size: 18px; } .btn-skins, .btn-settings { width: 100%; min-height: 44px; } /* Bottom widgets — flow inline at the end of the hero column. Override the desktop `position: absolute`. */ #menuScreen > .menu-earn-panel, #menuScreen > .menu-runner-panel, #menuScreen > .menu-vol-panel { position: relative; bottom: auto; left: auto; right: auto; transform: none; margin: 8px auto 0; max-width: calc(100vw - 32px); z-index: 5; } /* Order them: runner → earn → vol after the hero */ #menuScreen > .menu-runner-panel { order: 10; } #menuScreen > .menu-earn-panel { order: 11; } #menuScreen > .menu-vol-panel { order: 12; } /* Each widget gets a centered glass card on mobile */ #menuScreen > .menu-runner-panel .btn-runner-corner { width: 100%; justify-content: center; min-height: 44px; font-size: 12px; } #menuScreen > .menu-vol-panel { width: calc(100vw - 32px); } #menuScreen > .menu-vol-panel .mbp-vol-row { flex-wrap: wrap; justify-content: center; gap: 10px; } .mbp-vol-row .vol-slider { width: 80px; } /* Earn cards: scrollable horizontal row on mobile */ #menuScreen > .menu-earn-panel { width: calc(100vw - 32px); } .menu-earn-panel .mbp-earn-row { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; justify-content: flex-start; gap: 8px; padding-bottom: 4px; } .menu-earn-panel .btn-earn { flex: 0 0 auto; } /* Footer (Powered by VoltageGPU) — show on mobile, centered */ .menu-footer { display: block !important; text-align: center; margin: 16px auto 0; font-size: 10px; opacity: 0.6; } } /* ============================================================ PHONE FINE-TUNING — 480px and below (target: iPhone 375px) ============================================================ */ @media (max-width: 480px) { .game-title { font-size: clamp(24px, 8vw, 32px); } .game-subtitle { font-size: 11px; } /* Hero padding tighter */ #menuScreen > .menu-container { padding-left: 12px; padding-right: 12px; padding-top: 132px; } /* Stats badges row: tighter spacing, smaller labels */ .airdrop-banner-corner { padding: 6px 8px; gap: 0; } .abc-divider { margin: 0 6px; height: 16px; } .abc-val { font-size: 13px; } .abc-label { font-size: 8px; } .abc-info-btn { font-size: 10px; padding: 4px 8px; margin-left: 6px; } /* Faction icons compact */ .menu-container .faction-grid { gap: 6px; } .menu-container .faction-btn { padding: 8px 6px; } .menu-container .faction-icon img { width: 24px; height: 24px; } .menu-container .faction-btn .faction-label { font-size: 9px; } /* PLAY still full width but a touch shorter */ #playBtn { min-height: 52px; padding: 14px 18px; font-size: 16px; letter-spacing: 1px; } /* Volume sliders: 3 in a row, very small */ .mbp-vol-row .vol-slider { width: 56px; } .mbp-vol-row .vol-label { font-size: 9px; } /* Bitcoin Runner button compact */ #menuScreen > .menu-runner-panel .btn-runner-corner { font-size: 11px; padding: 10px 12px; } /* Ticker even slimmer */ #menuScreen > .ticker-bar { height: 28px; } .ticker-item { font-size: 10px; padding: 2px 8px; } } /* ---------- 4. Landscape phone safety ---------- */ /* On short landscape phones, allow scrolling so the hero never gets clipped behind the fixed top bar. */ @media (max-height: 540px) and (orientation: landscape) { #menuScreen { display: block; overflow-y: auto; } #menuScreen > .menu-container { margin: 0 auto; padding-top: 80px; padding-bottom: 24px; } } /* === END HOME LAYOUT FIX + MOBILE RESPONSIVE === */ /* ============================================================ === HOME LAYOUT — AI DESIGNER ALIGNMENT (final pass) === Aligns the live DOM on _references/AI-DESIGNER-HOME.html: - Sign in / Friends → TOP-LEFT - Stats badges (COINS / $DOM / RANK / $DOM btn) → TOP-RIGHT - EARN COINS panel → LEFT EDGE, vertical, centered (lg+ only) - BITCOIN RUNNER → BOTTOM-LEFT (above ticker) - Volume sliders → BOTTOM-RIGHT (above ticker) - Ticker bar → fixed at BOTTOM (was top) - Faction grid → 6 cols on desktop (was flex 5+1) - Background candle/icon noise → very subtle (was overcrowded) ============================================================ */ /* ---------- Faction grid: force 6 columns on tablet+ ---------- */ @media (min-width: 768px) { .menu-container .faction-grid, #menuScreen .faction-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 8px !important; flex-wrap: nowrap !important; width: 100% !important; margin: 14px 0 !important; } .menu-container .faction-btn, #menuScreen .faction-btn { min-width: 0 !important; width: 100% !important; padding: 10px 6px !important; aspect-ratio: 1 / 1 !important; max-width: none !important; } } /* ---------- Ticker bar → bottom (override prior top:0) ---------- */ #menuScreen > .ticker-bar, #menuScreen .ticker-bar { position: fixed !important; bottom: 0 !important; top: auto !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 40px !important; z-index: 200 !important; border-top: 1px solid rgba(255,255,255,0.04); border-bottom: none; background: linear-gradient(90deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.025) 100%); background-size: 200% 100%; animation: ticker-shimmer-aid 8s linear infinite; } @keyframes ticker-shimmer-aid { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ---------- Sign-in / Friends → top-LEFT (split from .vgpu-corner) ---------- */ @media (min-width: 768px) { /* Pull the corner-top group out of the corner stack and pin it left */ #menuScreen .vgpu-corner .vgpu-corner-top { position: fixed !important; top: 16px !important; left: 16px !important; right: auto !important; z-index: 32 !important; display: flex !important; flex-direction: row !important; gap: 8px !important; align-items: center !important; } /* Stats badges stay top-RIGHT, but lifted out of the corner stack so the corner-top relocation above doesn't drag them along. */ #menuScreen .vgpu-corner #airdropBannerCorner { position: fixed !important; top: 16px !important; right: 16px !important; left: auto !important; z-index: 32 !important; } /* Neutralize the original .vgpu-corner box so it's just a marker for descendant pinning — children carry the layout now. */ #menuScreen > .vgpu-corner { position: static !important; width: 0 !important; height: 0 !important; overflow: visible !important; pointer-events: none; } /* Re-enable pointer events on the actual buttons */ #menuScreen .vgpu-corner .vgpu-corner-top, #menuScreen .vgpu-corner #airdropBannerCorner, #menuScreen .vgpu-corner .vgpu-corner-top * { pointer-events: auto; } } /* ---------- EARN COINS (lg+): keep bottom-center horizontal pill row PHASE R/S use a tight horizontal layout — the old left-edge vertical sidebar broke centering and clashed with the right-cluster runner+vol. On lg+ we just nudge bottom-anchors above the ticker. */ @media (min-width: 1024px) { #menuScreen > .menu-runner-panel { bottom: 96px !important; } #menuScreen > .menu-vol-panel { bottom: 28px !important; } #menuScreen > .menu-earn-panel { bottom: 28px !important; } } /* ---------- Tablet (768-1023): keep earn panel out of the way ---------- */ @media (min-width: 768px) and (max-width: 1023px) { /* Hide vertical earn panel on tablet (no room) — show only on lg+ */ #menuScreen > .menu-earn-panel { position: fixed !important; bottom: 56px !important; left: 50% !important; transform: translateX(-50%) !important; top: auto !important; right: auto !important; z-index: 25 !important; } #menuScreen > .menu-runner-panel { bottom: 56px !important; } #menuScreen > .menu-vol-panel { bottom: 56px !important; } } /* ---------- Hero column padding: clear bottom ticker (40px) ---------- */ @media (min-width: 768px) { #menuScreen > .menu-container { padding-top: 80px !important; /* was 96px — corner buttons are now top-corners only */ padding-bottom: 80px !important; /* clear ticker (40) + breathing room */ } } /* ---------- Mobile (<768): ticker stays bottom + corner becomes top bar ---------- */ @media (max-width: 767px) { #menuScreen > .ticker-bar { position: fixed !important; bottom: 0 !important; top: auto !important; height: 32px !important; } /* Top bar is now a fixed strip; sign-in left, stats right, wraps if needed */ #menuScreen > .vgpu-corner { position: fixed !important; top: 8px !important; left: 8px !important; right: 8px !important; width: auto !important; height: auto !important; z-index: 32 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; pointer-events: auto; } #menuScreen .vgpu-corner .vgpu-corner-top { position: static !important; display: flex !important; gap: 6px !important; align-items: center !important; } #menuScreen .vgpu-corner #airdropBannerCorner { position: static !important; width: 100% !important; overflow-x: auto !important; } /* Hero clears top bar (~80px) + bottom ticker (32px) */ #menuScreen > .menu-container { padding-top: 100px !important; padding-bottom: 48px !important; } } /* ---------- Background canvas: tone down crypto icon noise ---------- */ /* Don't kill the canvas content (it's drawn from JS), just dim the layer. The visual brief calls for "very subtle" not "overcrowded". */ #menuScreen > #menuBgCanvas { opacity: 0.35 !important; mix-blend-mode: screen; } /* ---------- Faction grid mobile: 3 cols (kept from prior block) ---------- */ @media (max-width: 767px) { .menu-container .faction-grid, #menuScreen .faction-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; flex-wrap: nowrap !important; width: 100% !important; } } /* === END HOME LAYOUT — AI DESIGNER ALIGNMENT === */ /* ============================================================ === HOME LAYOUT — AI DESIGNER ALIGNMENT v2 (corrections) === Issues fixed in this pass: 1. SKINS/SETTINGS were ABOVE PLAY (HTML order). Use flex order + force-wrap on PLAY (width:100%) so PLAY renders first. 2. Border-beam on PLAY was barely visible (opacity 0.85, thin). Bump opacity, beam thickness, and accent. 3. Background canvas still busy (0.35 opacity). Drop to 0.15. 4. Mobile: EARN / RUNNER / VOL were stacked at the TOP of the document above the hero (display:block ignores `order:`). Hide them on mobile entirely (mockup pattern, line 160 FAB). 5. Mobile: top bar overcrowded — compact stats strip + cap height. ============================================================ */ /* ---------- 1. PLAY first, SKINS/SETTINGS below ---------- */ .menu-main-actions { width: 100%; } .menu-play-row { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; width: 100% !important; align-items: stretch !important; } .menu-play-row #playBtn { order: 1 !important; flex: 1 0 100% !important; /* full width — forces wrap */ width: 100% !important; min-height: 56px !important; } .menu-play-row .btn-skins { order: 2 !important; flex: 1 1 0 !important; min-width: 0 !important; } .menu-play-row .btn-settings { order: 3 !important; flex: 1 1 0 !important; min-width: 0 !important; } /* ---------- 2. PLAY border-beam: more visible ---------- */ #playBtn::after { padding: 1.5px !important; /* thicker beam */ opacity: 1 !important; background: conic-gradient( from var(--bb-angle, 0deg), transparent 0%, transparent 60%, rgba(255,255,255,0.85) 78%, var(--ring, #4ade80) 88%, transparent 100% ) !important; } /* ---------- 3. Background canvas: very subtle ---------- */ #menuScreen > #menuBgCanvas { opacity: 0.15 !important; } /* ---------- 4 + 5. Mobile cleanup ---------- */ /* === 2026-05-18: OBSOLETE BLOCK NEUTRALIZED. The old "AI Designer alignment v2" block used to pin .vgpu-corner as a fixed top strip on mobile, which is what the user kept seeing as "rail tiles in the middle of the screen". We now skip PHASE COLLAPSE on mobile + hide .vgpu-corner entirely on mobile (see the "MOBILE HOME LAYOUT — SAME AS PC" block far below). Keep this commented so future devs see why these rules were removed. The .menu-earn-panel / runner-panel / vol-panel hide stays — those widgets are now stacked inline by the newer mobile block via flex order. */ @media (max-width: 767px) { #menuScreen > .menu-earn-panel, #menuScreen > .menu-runner-panel, #menuScreen > .menu-vol-panel { /* Kept hidden on mobile — secondary widgets, low-priority on small screens. */ display: none !important; } /* .vgpu-corner rules REMOVED — handled by mobile rewrite block lower in file. */ } /* === END HOME LAYOUT — AI DESIGNER ALIGNMENT v2 === */ /* === MOBILE FAB + BOTTOM SHEET (line 160 of AI Designer mockup) === * Floating Action Button visible only on phones. Tapping it opens a bottom * sheet where the EARN / RUNNER / VOL widgets live (they are display:none in * the menu on mobile and re-parented into the sheet by JS). Desktop: FAB and * sheet are display:none and the widgets stay in their original positions. */ .mobile-menu-fab { position: fixed; right: 16px; bottom: 60px; /* sits above the ticker */ width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: var(--ring, #4ade80); color: #0b0b10; display: none; /* shown on mobile via media query */ align-items: center; justify-content: center; z-index: 1200; /* above menu, below modals */ box-shadow: 0 8px 24px rgba(74, 222, 128, 0.35), 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.18); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; -webkit-tap-highlight-color: transparent; } .mobile-menu-fab:active { transform: scale(0.94); box-shadow: 0 4px 12px rgba(74, 222, 128, 0.30), inset 0 1px 0 rgba(255,255,255,0.18); } .mobile-menu-fab .mfb-icon { display: block; } .mobile-menu-fab .mfb-icon-close { display: none; } .mobile-menu-fab.mfb-open .mfb-icon-open { display: none; } .mobile-menu-fab.mfb-open .mfb-icon-close { display: block; } .mobile-menu-sheet-backdrop { position: fixed; inset: 0; background: rgba(5, 5, 8, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; z-index: 1190; } .mobile-menu-sheet-backdrop.mms-backdrop-visible { opacity: 1; pointer-events: auto; } .mobile-menu-sheet { position: fixed; left: 0; right: 0; bottom: 0; background: radial-gradient(120% 80% at 50% 0%, rgba(74,222,128,0.06), transparent 60%), rgba(12, 12, 18, 0.96); border-top: 1px solid rgba(255,255,255,0.08); border-top-left-radius: 16px; border-top-right-radius: 16px; padding: 10px 16px max(16px, env(safe-area-inset-bottom)) 16px; z-index: 1195; transform: translateY(110%); transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; gap: 12px; max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 -10px 30px rgba(0,0,0,0.45); } .mobile-menu-sheet.mms-visible { transform: translateY(0); } .mobile-menu-sheet .mms-handle { width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); margin: 0 auto 4px auto; } .mobile-menu-sheet .mms-title { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); text-align: center; margin-bottom: 6px; } .mobile-menu-sheet .mms-slot { display: contents; /* let widgets flow with their own layout */ } /* When widgets are inside the sheet, override their fixed/absolute positioning. */ .mobile-menu-sheet .menu-earn-panel, .mobile-menu-sheet .menu-runner-panel, .mobile-menu-sheet .menu-vol-panel { position: static !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; display: block !important; /* re-show inside the sheet */ } .mobile-menu-sheet .menu-earn-panel { padding: 6px 0; } .mobile-menu-sheet .menu-runner-panel { padding: 6px 0; } .mobile-menu-sheet .menu-vol-panel { padding: 6px 0 4px 0; } .mobile-menu-sheet .mbp-earn-row { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 8px; } .mobile-menu-sheet .mbp-vol-row { display: grid !important; grid-template-columns: 60px 1fr; align-items: center; gap: 8px 12px; } .mobile-menu-sheet .mbp-vol-row .vol-slider { width: 100% !important; } body.mms-locked { overflow: hidden; } /* Show FAB only on phones; desktop layout keeps the widgets where they are. */ @media (max-width: 767px) { .mobile-menu-fab { display: inline-flex; } } @media (min-width: 768px) { .mobile-menu-fab, .mobile-menu-sheet, .mobile-menu-sheet-backdrop { display: none !important; } } /* === END MOBILE FAB + BOTTOM SHEET === */ /* ===================================================== === TWEAKPANE SETTINGS === Replaces the body of #settingsPanel with a Tweakpane instance. Theme matches the dark glass aesthetic: bg #050508, accent #4ade80, surfaces rgba(255,255,255,0.04). ===================================================== */ #tweakpaneSettingsMount { width: 100%; margin: 0 auto; display: block; } /* The Tweakpane v4 root element. We override its CSS custom properties to fit the VoltageGPU dark theme. */ #tweakpaneSettingsMount .tp-dfwv, #tweakpaneSettingsMount > div { position: static !important; /* override Tweakpane's fixed default */ width: 100% !important; max-width: none !important; font-family: 'Inter', 'Rajdhani', system-ui, sans-serif; /* Base palette */ --tp-base-background-color: rgba(5, 5, 8, 0.92); --tp-base-shadow-color: rgba(0, 0, 0, 0.4); /* Containers (folder bodies, list bodies) */ --tp-container-background-color: rgba(255, 255, 255, 0.04); --tp-container-background-color-hover: rgba(255, 255, 255, 0.07); --tp-container-background-color-focus: rgba(255, 255, 255, 0.08); --tp-container-background-color-active: rgba(255, 255, 255, 0.10); --tp-container-foreground-color: #e2e8f0; /* Buttons */ --tp-button-background-color: rgba(74, 222, 128, 0.12); --tp-button-background-color-hover: rgba(74, 222, 128, 0.22); --tp-button-background-color-focus: rgba(74, 222, 128, 0.28); --tp-button-background-color-active: rgba(74, 222, 128, 0.34); --tp-button-foreground-color: #4ade80; /* Input fields */ --tp-input-background-color: rgba(255, 255, 255, 0.05); --tp-input-background-color-hover: rgba(255, 255, 255, 0.08); --tp-input-background-color-focus: rgba(255, 255, 255, 0.10); --tp-input-background-color-active: rgba(255, 255, 255, 0.12); --tp-input-foreground-color: #e2e8f0; /* Monitors (read-only displays — used for keybind labels) */ --tp-monitor-background-color: rgba(0, 0, 0, 0.35); --tp-monitor-foreground-color: #4ade80; /* Labels */ --tp-label-foreground-color: rgba(226, 232, 240, 0.75); /* Group separators */ --tp-groove-foreground-color: rgba(255, 255, 255, 0.08); } /* Folder titles (Audio / Controls / Graphics) */ #tweakpaneSettingsMount .tp-fldv_t, #tweakpaneSettingsMount .tp-rotv_t { font-family: 'Rajdhani', 'Inter', sans-serif !important; font-weight: 700 !important; letter-spacing: 1.5px; text-transform: uppercase; color: #4ade80 !important; font-size: 12px !important; } /* Slider track + thumb accents */ #tweakpaneSettingsMount .tp-sldtxtv_s .tp-sldv_t { background-color: rgba(255, 255, 255, 0.10) !important; } #tweakpaneSettingsMount .tp-sldv_k { background-color: #4ade80 !important; } /* Subtle border + radius on the whole panel to match glass cards */ #tweakpaneSettingsMount > div { border: 1px solid rgba(74, 222, 128, 0.18) !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 0 24px rgba(74, 222, 128, 0.08); } /* Make sure scrollable container doesn't fight Tweakpane width */ #settingsPanel .settings-container { width: 520px; } @media (max-width: 600px) { #settingsPanel .settings-container { width: 95vw; } } /* === END TWEAKPANE SETTINGS === */ /* ============================================================= === HUD REDESIGN 2026-05-05 (Phase A-E, additive overrides) == Token-driven rewrite of in-game HUD surfaces. Source: DESIGN.md, DESIGN-shadcn.md, DESIGN-chat.md, MODULES-VISUAL-AUDIT.md Affects: #playerStats, #leaderboard, .hud-invite-btn, .chat-msg, #chatInput, #killFeed Rollback: delete from this comment to EOF. ============================================================ */ /* ---- Phase A: Player Stats top-left ---- */ #playerStats { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 12px 14px; gap: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); isolation: isolate; } #playerStats::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--primary) 50%, transparent); opacity: 0.5; pointer-events: none; } #playerStats .ps-label { color: var(--muted-foreground); font-weight: 510; letter-spacing: 0.6px; min-width: 32px; } #playerStats .ps-val { color: var(--foreground); font-family: 'JetBrains Mono', ui-monospace, SF Mono, Menlo, monospace; font-weight: 500; font-variant-numeric: tabular-nums; } #playerStats .ps-bar-track { background: rgba(255, 255, 255, 0.06); height: 5px; border-radius: 3px; position: relative; overflow: hidden; } #playerStats .ps-bar-fill { position: relative; box-shadow: 0 0 8px currentColor; transition: width 0.3s ease, box-shadow 0.3s ease; } #playerStats .ps-bar-fill.ps-hp { background: linear-gradient(90deg, var(--destructive), var(--accent)); color: var(--accent); } #playerStats .ps-bar-fill.ps-hash { background: var(--primary); color: var(--primary); } /* HP critical pulse (< 25% via inline style width — apply to fill below 25%) */ #playerStats .ps-bar-fill.ps-hp.ps-hp-critical { animation: hud-hp-pulse 0.8s ease-in-out infinite alternate; } @keyframes hud-hp-pulse { from { box-shadow: 0 0 6px var(--destructive); filter: brightness(1); } to { box-shadow: 0 0 18px var(--destructive); filter: brightness(1.3); } } /* Combo: violet brand-aligned, with subtle pulse beyond x2 */ #playerStats .ps-combo { color: var(--primary); font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; text-shadow: 0 0 8px rgba(167, 139, 250, 0.45); } #playerStats .ps-combo.ps-combo-hot { animation: hud-combo-pulse 1.2s ease-in-out infinite alternate; } @keyframes hud-combo-pulse { from { text-shadow: 0 0 6px rgba(167, 139, 250, 0.4); transform: scale(1); } to { text-shadow: 0 0 14px rgba(167, 139, 250, 0.85); transform: scale(1.06); } } /* ---- Phase B: Faction War top-right ---- */ #leaderboard { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); width: 268px; padding: 14px 14px 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); isolation: isolate; } #leaderboard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent); opacity: 0.5; pointer-events: none; } #leaderboard .lb-title { color: var(--muted-foreground); font-size: 10px; font-weight: 600; letter-spacing: 2.6px; margin-bottom: 10px; position: relative; padding-left: 10px; } #leaderboard .lb-title::before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 6px var(--accent); transform: translateY(-50%); } #leaderboard #lbRows { display: flex; flex-direction: column; gap: 2px; } #leaderboard .lb-row { height: 32px; padding: 2px 6px; border-radius: 6px; border-bottom: 1px solid var(--border-subtle); transition: background 0.2s ease; } #leaderboard .lb-row:last-child { border-bottom: none; } /* Leader highlight — first row in DOM is the top faction */ #leaderboard .lb-row:first-child { background: linear-gradient(90deg, rgba(74, 222, 128, 0.12) 0%, rgba(74, 222, 128, 0.03) 70%, transparent 100%); position: relative; } #leaderboard .lb-row:first-child::after { content: ''; position: absolute; left: -2px; top: 4px; bottom: 4px; width: 2px; background: var(--accent); border-radius: 1px; box-shadow: 0 0 6px var(--accent); } #leaderboard .lb-dot { width: 9px; height: 9px; box-shadow: 0 0 6px currentColor; } #leaderboard .lb-row:first-child .lb-dot { animation: hud-dot-pulse 3.5s ease-in-out infinite alternate; } /* transform-only pulse — compositor-friendly, no box-shadow keyframe */ @keyframes hud-dot-pulse { from { transform: scale(1); opacity: 0.85; } to { transform: scale(1.18); opacity: 1; } } #leaderboard .lb-faction-name { color: var(--foreground); font-weight: 590; font-size: 11.5px; letter-spacing: 0.8px; } #leaderboard .lb-miners { color: var(--muted-foreground); font-size: 10px; font-variant-numeric: tabular-nums; opacity: 0.7; } #leaderboard .lb-hashrate { color: var(--foreground); font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; font-size: 10.5px; font-variant-numeric: tabular-nums; letter-spacing: 0.3px; } #leaderboard .lb-bar-track { height: 3px; background: rgba(255, 255, 255, 0.06); } #leaderboard .lb-bar-fill { box-shadow: 0 0 4px currentColor; } /* Leader bar gets a brighter fill (no animated shimmer — perf) */ #leaderboard .lb-row:first-child .lb-bar-fill { filter: brightness(1.3) saturate(1.2); } /* ---- Phase C: Invite Friend button (border-beam Aceternity) ---- */ .hud-invite-btn { position: relative; width: 100%; margin-top: 12px; padding: 9px 12px; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; background: rgba(74, 222, 128, 0.06); border: 1px solid var(--accent-border); border-radius: var(--radius-md); color: var(--accent); cursor: pointer; font-family: inherit; transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; text-align: center; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; } .hud-invite-btn::before { content: ''; position: absolute; left: 8%; right: 8%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(74,222,128,0.5), transparent); pointer-events: none; } .hud-invite-mark { width: 12px; height: 12px; display: inline-block; position: relative; flex-shrink: 0; } .hud-invite-mark::before, .hud-invite-mark::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; background: currentColor; border-radius: 1px; transform: translate(-50%, -50%); } .hud-invite-mark::after { transform: translate(-50%, -50%) rotate(90deg); } .hud-invite-btn:hover { background: rgba(74, 222, 128, 0.18); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 0 18px rgba(74, 222, 128, 0.35); } .hud-invite-btn:active { transform: translateY(0); } /* Border-beam — rotating conic accent, paused by default, runs on hover (perf) */ .hud-invite-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient( from var(--bb-angle, 0deg), transparent 0%, transparent 70%, var(--accent) 82%, rgba(74, 222, 128, 0.6) 90%, transparent 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; opacity: 0; animation: bb-rotate 5s linear infinite; animation-play-state: paused; transition: opacity 0.2s ease; z-index: 1; } .hud-invite-btn:hover::after { opacity: 0.85; animation-play-state: running; } /* ---- Phase D: Chat feed (LibreChat-inspired tokens) ---- */ #chatBox { width: 380px; } #chatMessages { scrollbar-width: thin; scrollbar-color: var(--accent-border) transparent; } #chatMessages::-webkit-scrollbar { width: 4px; } #chatMessages::-webkit-scrollbar-track { background: transparent; } #chatMessages::-webkit-scrollbar-thumb { background: var(--accent-border); border-radius: 2px; } #chatMessages::-webkit-scrollbar-thumb:hover { background: var(--accent); } .chat-msg { background: rgba(10, 10, 20, 0.55); border: 1px solid var(--border-subtle); border-left: 2px solid var(--primary); border-radius: var(--radius-md); padding: 6px 12px; margin-bottom: 4px; font-size: 13px; font-weight: 400; color: var(--foreground); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); line-height: 1.5; animation: hud-chat-slidein 0.28s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes hud-chat-slidein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .chat-msg.chat-taunt { border-left-color: var(--warning); background: rgba(30, 25, 10, 0.55); } .chat-msg.chat-bot-beef { border-left-color: var(--destructive); background: rgba(30, 10, 10, 0.55); } .chat-msg .chat-faction-logo { width: 18px; height: 18px; box-shadow: 0 0 4px currentColor; border: 1px solid rgba(255, 255, 255, 0.18); } .chat-msg .chat-name { font-weight: 510; letter-spacing: 0.2px; } #chatInput { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--foreground); font-weight: 400; padding: 10px 14px; margin-top: 6px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color 0.15s ease, box-shadow 0.15s ease; } #chatInput::placeholder { color: var(--tertiary); } #chatInput:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.10); } /* ---- Phase E: Kill feed (token-aligned, slide horizontal preserved) ---- */ #killFeed { gap: 4px; width: 200px; } .kill-entry { background: var(--card); border: 1px solid var(--border-subtle); border-left-width: 2px; border-radius: var(--radius-sm); padding: 5px 9px; font-size: 11px; font-weight: 400; color: var(--muted-foreground); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; overflow: hidden; } .kill-entry .kill-dot { width: 7px; height: 7px; box-shadow: 0 0 4px currentColor; } .kill-entry .name-btc, .kill-entry .name-ai, .kill-entry .name-meme, .kill-entry .name-whale { font-weight: 510; letter-spacing: 0.2px; } /* Self-kill flash (apply class .kill-self via JS when victim or killer === me) */ .kill-entry.kill-self { border-left-color: var(--accent); background: rgba(74, 222, 128, 0.10); animation: hud-kill-self-flash 0.6s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes hud-kill-self-flash { 0% { transform: translateX(40px) scale(1.05); opacity: 0; } 60% { transform: translateX(0) scale(1.05); opacity: 1; box-shadow: 0 0 16px rgba(74, 222, 128, 0.5); } 100% { transform: translateX(0) scale(1); opacity: 1; box-shadow: 0 0 4px rgba(74, 222, 128, 0.2); } } /* (Auto-dismiss progress bar removed — opacity fade in JS already telegraphs lifetime) */ /* ============================================================ PHASE F+G+H — DRAIN FEEDBACK + MINIMAP + FRIENDS + CHAT 2026-05-05 — DESIGN.md + DESIGN-shadcn.md + DESIGN-chat.md ============================================================ */ /* ===== DRAIN FEEDBACK ===== */ /* Triggered when a 2x+ hashrate player touches you (DOT eating). Card pulses red, HP bar flashes, warning row slides in. */ #playerStats.ps-drained { border-color: rgba(248, 113, 113, 0.45); box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.20), 0 0 24px rgba(248, 113, 113, 0.15); animation: ps-drain-pulse 0.6s ease-in-out infinite alternate; } @keyframes ps-drain-pulse { from { box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.20), 0 0 18px rgba(248, 113, 113, 0.12); } to { box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.45), 0 0 28px rgba(248, 113, 113, 0.28); } } #playerStats.ps-drained .ps-bar-fill.ps-hp { background: linear-gradient(90deg, #f87171, #ef4444); box-shadow: 0 0 12px rgba(248, 113, 113, 0.55); } /* Warning row appended under stats */ .ps-drain-warn { margin-top: 8px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(248, 113, 113, 0.10); border: 1px solid rgba(248, 113, 113, 0.25); color: #f87171; font-size: 11px; font-weight: 510; letter-spacing: 0.04em; text-transform: uppercase; animation: ps-drain-slide 0.18s cubic-bezier(0.16, 1, 0.3, 1); } .ps-drain-warn[hidden] { display: none; } .ps-drain-warn .ps-drain-icon { width: 16px; height: 16px; border-radius: 50%; background: rgba(248, 113, 113, 0.25); border: 1px solid rgba(248, 113, 113, 0.55); display: inline-flex; align-items: center; justify-content: center; color: #fecaca; font-weight: 700; font-size: 11px; flex-shrink: 0; } .ps-drain-warn .ps-drain-text { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } @keyframes ps-drain-slide { from { transform: translateY(-4px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ===== PHASE F — MINIMAP ===== */ /* Glass card consistent with leaderboard / playerStats. */ #minimapWrap { background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: var(--radius, 12px) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04); padding: 8px !important; position: relative; overflow: hidden; } /* Subtle violet accent bar at top (matches playerStats / leaderboard) */ #minimapWrap::before { content: ''; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, 0.45) 50%, transparent 100%); opacity: 0.6; } #minimapWrap canvas { border-radius: 8px; display: block; } /* Hover-reveal label "TACTICAL MAP" — only visible on minimap hover */ #minimapWrap::after { content: 'TACTICAL MAP'; position: absolute; bottom: 6px; left: 12px; font-size: 9px; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.35); pointer-events: none; opacity: 0; transition: opacity 0.18s ease; } #minimapWrap:hover::after { opacity: 1; } /* Dev: trigger-event button — fixed, just above the minimap, same right edge */ #devTriggerEventBtn { position: fixed; right: 14px; bottom: 290px; /* minimap bottom:80 + height:200 + 10px gap */ z-index: 51; width: 200px; padding: 8px 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.18em; font-weight: 700; text-align: center; color: rgba(255, 215, 0, 0.92); background: rgba(20, 14, 0, 0.78); border: 1px solid rgba(255, 215, 0, 0.45); border-radius: 8px; cursor: pointer; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55), inset 0 0 14px rgba(255, 215, 0, 0.05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease; } #devTriggerEventBtn:hover { background: rgba(40, 28, 0, 0.85); border-color: rgba(255, 215, 0, 0.75); color: rgba(255, 240, 140, 1); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.65), 0 0 18px rgba(255, 215, 0, 0.18); } #devTriggerEventBtn:active { transform: translateY(1px); } #devTriggerEventBtn:disabled { opacity: 0.45; cursor: default; transform: none; } @media (max-width: 768px) { #devTriggerEventBtn { display: none; } } /* ===== PHASE G — FRIENDS MENU POPUP ===== */ /* Migrate friendsMenuPopup from off-token purple to shadcn tokens. */ #friendsMenuOverlay { background: rgba(0, 0, 0, 0.60) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #friendsMenuPopup { background: rgba(20, 20, 28, 0.95) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: relative; overflow: hidden !important; } /* Violet/green accent gradient ribbon at top */ #friendsMenuPopup::before { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, 0.55) 30%, rgba(74, 222, 128, 0.55) 70%, transparent 100%); } .fmp-title { color: #ececf1 !important; font-weight: 590 !important; letter-spacing: -0.01em !important; } .fmp-close { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; color: #a0a0a0 !important; transition: all 0.15s ease !important; } .fmp-close:hover { background: rgba(255, 255, 255, 0.06) !important; color: #ececf1 !important; border-color: rgba(255, 255, 255, 0.14) !important; } /* Add friend row — solid accent token instead of heavy purple→green gradient */ .fmp-add-row { background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; } .fmp-add-input { background: rgba(0, 0, 0, 0.30) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; color: #ececf1 !important; font-size: 14px !important; transition: border-color 0.15s ease !important; } .fmp-add-input::placeholder { color: #606060 !important; } .fmp-add-input:focus { outline: none !important; border-color: rgba(167, 139, 250, 0.40) !important; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.10) !important; } .fmp-add-btn { background: rgba(74, 222, 128, 0.12) !important; border: 1px solid rgba(74, 222, 128, 0.30) !important; border-radius: 8px !important; color: #4ade80 !important; font-weight: 590 !important; letter-spacing: 0.02em !important; transition: all 0.15s ease !important; } .fmp-add-btn:hover { background: rgba(74, 222, 128, 0.18) !important; border-color: rgba(74, 222, 128, 0.45) !important; transform: translateY(-1px) !important; } /* Friends list rows */ .fmp-friend-row { background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 10px !important; transition: all 0.15s ease !important; } .fmp-friend-row:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.12) !important; } /* Status dots — token-aligned */ .fmp-status-online, .fmp-friend-row .fmp-status[data-status="online"] { background: #4ade80 !important; box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.20) !important; } .fmp-status-offline, .fmp-friend-row .fmp-status[data-status="offline"] { background: #606060 !important; box-shadow: none !important; } .fmp-status-pending, .fmp-friend-row .fmp-status[data-status="pending"] { background: #fbbf24 !important; box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.20) !important; } /* Friends toast — token unification */ .fmp-toast { background: rgba(20, 20, 28, 0.95) !important; border: 1px solid rgba(74, 222, 128, 0.30) !important; border-radius: 10px !important; color: #4ade80 !important; backdrop-filter: blur(8px) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30) !important; } .fmp-toast-error { border-color: rgba(248, 113, 113, 0.30) !important; color: #f87171 !important; } /* ===== INVITE FRIEND BTN — refined glass ===== */ /* Already styled previously; just lighten the rest state */ .hud-invite-btn { background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #d1d1d1 !important; } .hud-invite-btn:hover { background: rgba(167, 139, 250, 0.10) !important; border-color: rgba(167, 139, 250, 0.30) !important; color: #ececf1 !important; } /* ===== PHASE H — CHAT (LibreChat / Open WebUI treatment) ===== */ /* Surface hierarchy : container Void #0d0d0d → row Base #212121 → focus #2f2f2f */ #chatBox { background: rgba(13, 13, 13, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 14px !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03); padding: 8px !important; display: flex; flex-direction: column; } /* Slim 4px scrollbar (DESIGN-chat.md §12) */ #chatBox, .chat-list, #chatBox > div, #chatBox .chat-scroll { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.10) transparent; } #chatBox::-webkit-scrollbar, .chat-list::-webkit-scrollbar, #chatBox > div::-webkit-scrollbar { width: 4px; } #chatBox::-webkit-scrollbar-track, .chat-list::-webkit-scrollbar-track { background: transparent; } #chatBox::-webkit-scrollbar-thumb, .chat-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 2px; } #chatBox::-webkit-scrollbar-thumb:hover, .chat-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.20); } /* Message rows (overrides previous Phase D) */ .chat-msg { background: rgba(33, 33, 33, 0.55) !important; /* Surface Base */ border: 1px solid rgba(255, 255, 255, 0.06) !important; border-left: 2px solid var(--primary, #a78bfa) !important; border-radius: 10px !important; padding: 6px 10px !important; margin: 3px 0 !important; color: #ececf1 !important; font-size: 13px !important; line-height: 1.45 !important; letter-spacing: 0.005em !important; animation: chat-msg-fade-in 0.18s ease-out; transition: background 0.15s ease, border-color 0.15s ease; } .chat-msg:hover { background: rgba(47, 47, 47, 0.70) !important; /* Surface focus */ border-color: rgba(255, 255, 255, 0.12) !important; } @keyframes chat-msg-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Faction-color border-left (auto via inline color from JS) */ .chat-msg.chat-faction-btc { border-left-color: #f7931a !important; } .chat-msg.chat-faction-eth { border-left-color: #627eea !important; } .chat-msg.chat-faction-sol { border-left-color: #14f195 !important; } .chat-msg.chat-faction-bnb { border-left-color: #f3ba2f !important; } .chat-msg.chat-faction-tao { border-left-color: #00ffd1 !important; } .chat-msg.chat-faction-doge { border-left-color: #c2a633 !important; } /* Message author — refined typography */ .chat-msg .chat-author, .chat-msg .msg-author { font-weight: 590 !important; font-size: 12.5px !important; letter-spacing: -0.005em !important; color: #f0f0f5 !important; margin-right: 6px; } /* Message body */ .chat-msg .chat-body, .chat-msg .msg-body { color: #d8d8e0 !important; font-size: 12.5px !important; line-height: 1.5 !important; } /* Taunt + bot beef tones */ .chat-taunt { background: rgba(251, 191, 36, 0.06) !important; border-left-color: #fbbf24 !important; } .chat-bot-beef { background: rgba(248, 113, 113, 0.06) !important; border-left-color: #f87171 !important; } /* System message (kills, joins, server msgs) — muted */ .chat-msg.chat-system, .chat-msg.chat-server { background: rgba(255, 255, 255, 0.015) !important; border-left-color: rgba(255, 255, 255, 0.12) !important; color: #909090 !important; font-style: italic; font-size: 12px !important; } /* Chat input (if rendered) — Open WebUI rounded-3xl signature */ .chat-input, #chatInput, #chatBox input[type="text"] { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 24px !important; color: #ececf1 !important; padding: 10px 14px !important; font-size: 13px !important; transition: border-color 0.15s ease, background 0.15s ease; } .chat-input::placeholder, #chatInput::placeholder { color: #606060 !important; } .chat-input:focus, #chatInput:focus { outline: none !important; border-color: rgba(167, 139, 250, 0.35) !important; background: rgba(255, 255, 255, 0.06) !important; } /* ===== Reduced motion for new pieces ===== */ @media (prefers-reduced-motion: reduce) { #playerStats.ps-drained, .ps-drain-warn, .chat-msg { animation: none !important; } #playerStats.ps-drained { box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.30) !important; } } /* === END PHASE F+G+H === */ /* ============================================================ PHASE I — MINIMAP BOTTOM-RIGHT LOCK + KILL FEED REWORK 2026-05-05 — DESIGN.md + DESIGN-shadcn.md + DESIGN-chat.md ============================================================ */ /* ===== MINIMAP — force bottom-right at every viewport ===== Overrides the portrait, tablet, and phone media queries which previously scaled / repositioned the minimap. The minimap is tactically essential and must be where the thumb expects it. */ #minimapWrap { position: fixed !important; bottom: 80px !important; right: 14px !important; top: auto !important; left: auto !important; transform: none !important; transform-origin: center !important; } @media (max-width: 768px) and (orientation: portrait) { #minimapWrap { width: 130px !important; height: 130px !important; bottom: 14px !important; right: 10px !important; transform: none !important; } } @media (max-width: 1024px) and (orientation: landscape) { #minimapWrap { width: 140px !important; height: 140px !important; bottom: 14px !important; right: 12px !important; } } @media (max-width: 480px) { #minimapWrap { width: 110px !important; height: 110px !important; bottom: 10px !important; right: 8px !important; } } body.is-mobile #minimapWrap { bottom: 16px !important; right: 12px !important; top: auto !important; left: auto !important; } /* ===== MINIMAP — visual polish ===== Brighter glass card, dual-tone ribbon (violet → green) hinting at "tactical map", a subtle inner crosshair, and a frame ring that picks up the player's faction accent on hover. */ #minimapWrap { background: linear-gradient( 180deg, rgba(13, 13, 18, 0.78) 0%, rgba(8, 8, 12, 0.82) 100% ) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 24px rgba(0, 0, 0, 0.25) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; } #minimapWrap:hover { border-color: rgba(167, 139, 250, 0.30) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(167, 139, 250, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } /* Dual-tone ribbon — violet on the left, green on the right */ #minimapWrap::before { background: linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, 0.55) 25%, rgba(74, 222, 128, 0.55) 75%, transparent 100%) !important; height: 1.5px !important; opacity: 0.7 !important; } /* TACTICAL MAP label — always faintly visible, brighter on hover */ #minimapWrap::after { opacity: 0.18 !important; color: rgba(167, 139, 250, 0.65) !important; font-weight: 590; letter-spacing: 0.22em !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } #minimapWrap:hover::after { opacity: 0.85 !important; color: rgba(74, 222, 128, 0.75) !important; } /* ============================================================ KILL FEED REWORK — DESIGN-chat.md surface hierarchy Single column, glass row, faction-tinted dot + names, weapon bolt centered, self-kill flash. Structured spans: .ke-dot.ke-dot-killer — left dot (faction color via --ke-killer) .ke-killer — killer name .ke-bolt — centered ⚡ .ke-victim — victim name ============================================================ */ #killFeed { /* Keep mid-right anchored, slim width, generous gap */ width: 230px !important; gap: 5px !important; } .kill-entry { display: flex !important; align-items: center !important; gap: 8px !important; padding: 6px 10px 6px 8px !important; background: rgba(20, 20, 26, 0.72) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-left: 3px solid var(--ke-killer, rgba(167, 139, 250, 0.55)) !important; border-radius: 10px !important; backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.03); font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: -0.005em; color: #d1d1d8 !important; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; position: relative; overflow: hidden; } /* Subtle gradient sweep from killer color → transparent */ .kill-entry::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, var(--ke-killer, rgba(167, 139, 250, 0.55)) 0%, transparent 35% ); opacity: 0.06; pointer-events: none; } /* Faction dot left of killer name */ .ke-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ke-killer, #a78bfa); box-shadow: 0 0 6px var(--ke-killer, #a78bfa), 0 0 0 2px rgba(0, 0, 0, 0.35); position: relative; z-index: 1; } /* Killer + victim text styling */ .ke-killer, .ke-victim { font-weight: 590 !important; letter-spacing: 0.01em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; position: relative; z-index: 1; } .ke-killer { color: var(--ke-killer, #ececf1) !important; flex: 1 1 auto; text-align: left; } .ke-victim { color: var(--ke-victim, #94a3b8) !important; opacity: 0.92; flex: 1 1 auto; text-align: right; } /* Sober separator — thin slash between killer and victim. No emoji, no pulse. */ .ke-sep { flex: 0 0 auto; width: 16px; height: 1px; background: linear-gradient(90deg, var(--ke-killer, rgba(255,255,255,0.18)) 0%, rgba(255,255,255,0.18) 50%, var(--ke-victim, rgba(255,255,255,0.18)) 100%); opacity: 0.55; position: relative; z-index: 1; border-radius: 1px; } /* Tiny diamond marker centered on the line for hierarchy */ .ke-sep::after { content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; background: rgba(255,255,255,0.55); transform: translate(-50%, -50%) rotate(45deg); } /* Legacy bolt span (older entries pre-refactor) → render as separator too */ .ke-bolt { display: inline-block; width: 16px; height: 1px; background: rgba(255,255,255,0.18); color: transparent; font-size: 0; flex: 0 0 auto; position: relative; z-index: 1; } /* Self-kill emphasis: green glow, bolt becomes accent green */ .kill-entry.kill-self { background: rgba(74, 222, 128, 0.08) !important; border-color: rgba(74, 222, 128, 0.30) !important; border-left-color: #4ade80 !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30), 0 0 18px rgba(74, 222, 128, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; animation: ke-self-flash 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .kill-entry.kill-self .ke-sep, .kill-entry.kill-self .ke-bolt { background: linear-gradient(90deg, rgba(74,222,128,0.55) 0%, rgba(74,222,128,0.8) 50%, rgba(74,222,128,0.55) 100%); opacity: 0.85; } .kill-entry.kill-self .ke-sep::after { background: #4ade80; box-shadow: 0 0 4px rgba(74,222,128,0.65); } .kill-entry.kill-self::before { background: linear-gradient( 90deg, rgba(74, 222, 128, 0.18) 0%, transparent 60% ); opacity: 1; } @keyframes ke-self-flash { 0% { transform: translateX(40px) scale(1.04); opacity: 0; } 60% { transform: translateX(0) scale(1.04); opacity: 1; box-shadow: 0 0 24px rgba(74, 222, 128, 0.45); } 100% { transform: translateX(0) scale(1); opacity: 1; box-shadow: 0 0 18px rgba(74, 222, 128, 0.18); } } /* Fading state (last 0.5s of life) — also handled inline by JS */ .kill-entry.fading { pointer-events: none; animation: kfFadeOut 0.5s ease-out forwards; } @keyframes kfSlideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @keyframes kfFadeOut { from { opacity: 1; } to { opacity: 0; transform: translateX(-6px); } } .kill-entry { animation: kfSlideIn 0.22s ease-out; will-change: transform, opacity; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .kill-entry, .kill-entry.kill-self, .ke-bolt { animation: none !important; } #minimapWrap { transition: none !important; } } /* Phone tightening for the wider entries */ @media (max-width: 480px) { #killFeed { width: 180px !important; } .kill-entry { font-size: 10.5px !important; padding: 4px 8px 4px 6px !important; gap: 6px !important; } .ke-bolt { font-size: 11px; width: 12px; } } /* === END PHASE I === */ /* ============================================================ PHASE J — MINIMAP FRAMELESS + FRIENDS BTN REPOS + CHAT IDLE 2026-05-05 — user feedback: no frame, friends not on minimap, chat input hidden until Enter ============================================================ */ /* ===== MINIMAP — frameless ===== Drop the glass card chrome. The map stays bottom-right but reads as raw cartography on the world background. */ #minimapWrap, body.is-mobile #minimapWrap { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; } /* Strip the violet ribbon and the TACTICAL MAP label */ #minimapWrap::before, #minimapWrap::after { content: none !important; display: none !important; } /* Soft inner shadow on the canvas itself instead, so the minimap still reads as a bounded surface against bright zones. */ #minimapWrap canvas, #minimap { border-radius: 10px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important; } /* ===== FRIENDS TOGGLE BTN — top-right, off the chat ===== Was bottom:60/left:14 → sat directly on the chat input. Moved to top-right next to the leaderboard so it doesn't steal real estate from chat or minimap. */ #friendsToggleBtn { top: 14px !important; right: 14px !important; bottom: auto !important; left: auto !important; width: 40px !important; height: 40px !important; font-size: 18px !important; background: rgba(13, 13, 18, 0.78) !important; border: 1px solid rgba(167, 139, 250, 0.30) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; z-index: 60 !important; /* below modals (200+), above HUD */ } #friendsToggleBtn:hover { border-color: rgba(167, 139, 250, 0.55) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(167, 139, 250, 0.35) !important; transform: scale(1.06) !important; } @media (max-width: 768px) { #friendsToggleBtn { top: 10px !important; right: 10px !important; bottom: auto !important; left: auto !important; width: 38px !important; height: 38px !important; } } /* ===== CHAT — idle by default ===== The chatBox container stays visible (so messages appear), but without messages it becomes nearly invisible. The input is hidden until Enter (handled in JS via inline display toggle). */ #chatBox { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; } /* When the input is hidden (default state), no chrome at all */ #chatInput[style*="display:none"], #chatInput[style*="display: none"] { display: none !important; } /* When the input IS visible (user pressed Enter), give it the full Open WebUI rounded chrome — but only then. */ #chatInput[style*="display:block"], #chatInput[style*="display: block"] { display: block !important; background: rgba(13, 13, 18, 0.92) !important; border: 1px solid rgba(167, 139, 250, 0.45) !important; border-radius: 24px !important; padding: 10px 16px !important; font-size: 13px !important; color: #ececf1 !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(167, 139, 250, 0.10); outline: none !important; } /* Fade-in messages list — no static placeholder bar */ #chatMessages { background: transparent !important; padding: 0 !important; } #chatMessages:empty { display: none !important; } /* === END PHASE J === */ /* ===================================================================== * PHASE K — DEATH SCREEN REWORK * Source: DESIGN.md (glass surfaces, accent bar, weight 510, tabular nums), * DESIGN-shadcn.md (oklch tokens, --card / --border / --primary / --accent), * DESIGN-chat.md (hierarchy through scale, calm muted secondary). * Goal: editorial recap, not a generic stat grid. Hero score + supporting * stats + secondary career strip + designed CTAs. * ===================================================================== */ /* Calm the red wash — keep tension via title, not full-screen flood */ #deathScreen { background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(239, 68, 68, 0.08), transparent 70%), radial-gradient(ellipse 60% 40% at 50% 90%, rgba(167, 139, 250, 0.05), transparent 70%), rgba(5, 5, 8, 0.78) !important; backdrop-filter: blur(10px) saturate(110%) !important; -webkit-backdrop-filter: blur(10px) saturate(110%) !important; } .death-container { max-width: 560px !important; padding: 56px 28px 32px !important; } /* Title — single-color cinematic red with crisp tracking, drop a stop */ .death-title { font-size: 88px !important; font-weight: 800 !important; letter-spacing: -3.5px !important; background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0 60px rgba(239, 68, 68, 0.35)) drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6)) !important; line-height: 0.95 !important; } /* Killer attribution — eyebrow chip pattern */ .death-killer { margin-top: 14px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.40) !important; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 28px !important; } .death-killer .killer-name { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #f0f0f5 !important; padding: 4px 10px; border-radius: 999px; background: rgba(239, 68, 68, 0.10); border: 1px solid rgba(239, 68, 68, 0.30); } /* Stats grid — hero row (3 cards) + career strip */ .death-stats { margin-top: 28px !important; gap: 10px !important; } /* Glass cards (DESIGN.md §5) */ .stat-card { position: relative; background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; padding: 18px 14px 14px !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important; } .stat-card:hover { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.14) !important; transform: translateY(-1px); } /* Accent bar — featured cards (top hairline gradient) */ .stat-card::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: linear-gradient(90deg, transparent, rgba(167,139,250,0.45), transparent); opacity: 0.6; } .stat-value { font-family: 'JetBrains Mono', 'Inter Variable', monospace !important; font-size: 28px !important; font-weight: 700 !important; letter-spacing: -1px !important; color: #f0f0f5 !important; font-variant-numeric: tabular-nums !important; line-height: 1.05 !important; } .stat-label { margin-top: 6px !important; font-size: 9.5px !important; font-weight: 600 !important; letter-spacing: 1.4px !important; color: rgba(255, 255, 255, 0.42) !important; text-transform: uppercase !important; } /* Career strip — denser, muted, distinct */ .death-stats.career { margin-top: 12px !important; gap: 8px !important; } .death-stats.career .stat-card { padding: 12px 10px 10px !important; background: rgba(255, 255, 255, 0.015) !important; border-color: rgba(255, 255, 255, 0.06) !important; } .death-stats.career .stat-card::before { display: none; } .death-stats.career .stat-value { font-size: 18px !important; color: rgba(240, 240, 245, 0.92) !important; } .death-stats.career .stat-label { font-size: 9px !important; color: rgba(255, 255, 255, 0.35) !important; } /* Career divider — refined eyebrow */ .career-divider { margin-top: 28px !important; padding: 12px 0 0 !important; font-size: 9px !important; letter-spacing: 2.6px !important; color: rgba(255, 255, 255, 0.30) !important; border-top: 1px solid rgba(255, 255, 255, 0.06) !important; position: relative; } /* Class chips — flatter, glass, tighter row */ #deathClassSelect { margin: 18px auto 8px !important; gap: 6px !important; } .death-class-btn { padding: 7px 12px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.55) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0.4px !important; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease !important; } .death-class-btn:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: #f0f0f5 !important; transform: translateY(-1px); } .death-class-btn[data-class="whale"]:hover { border-color: rgba(100,180,255,0.55) !important; color: #9ec7ff !important; } .death-class-btn[data-class="layer2"]:hover { border-color: rgba(0,255,200,0.50) !important; color: #6effe1 !important; } .death-class-btn[data-class="liquidator"]:hover { border-color: rgba(255,80,110,0.50) !important; color: #ff8a9e !important; } .death-class-btn[data-class="lp"]:hover { border-color: rgba(80,255,120,0.50) !important; color: #88ff9f !important; } .death-class-btn[data-class="hodler"]:hover { border-color: rgba(255,215,0,0.50) !important; color: #ffe066 !important; } /* PLAY AGAIN — green, primary, with glow halo (DESIGN.md featured) */ .btn-play-again { margin-top: 22px !important; padding: 16px !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; color: #050508 !important; background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%) !important; border: 1px solid rgba(74, 222, 128, 0.55) !important; border-radius: 12px !important; box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.25), 0 8px 24px rgba(34, 197, 94, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important; position: relative; overflow: hidden; } .btn-play-again::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); } .btn-play-again:hover { transform: translateY(-1px) !important; box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.45), 0 12px 36px rgba(34, 197, 94, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; } /* RETURN TO MENU — secondary ghost (violet on hover, DESIGN.md primary token) */ .btn-return-menu { margin-top: 10px !important; padding: 13px 24px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 1.2px !important; text-transform: uppercase; background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.78) !important; border-radius: 10px !important; box-shadow: none !important; } .btn-return-menu:hover { background: rgba(167, 139, 250, 0.10) !important; border-color: rgba(167, 139, 250, 0.45) !important; color: #f0f0f5 !important; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.25), 0 8px 28px rgba(124, 92, 239, 0.18) !important; transform: translateY(-1px) !important; } /* Tertiary actions row — icon-style ghost buttons */ .death-actions-row { margin-top: 14px !important; gap: 8px !important; } .death-actions-row > button { padding: 9px 14px !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 0.6px !important; text-transform: none !important; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 8px !important; color: rgba(255, 255, 255, 0.55) !important; box-shadow: none !important; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease !important; } .death-actions-row > button:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.16) !important; color: #f0f0f5 !important; transform: translateY(-1px) !important; } .btn-tweet-death:hover { border-color: rgba(255,255,255,0.30) !important; } .btn-invite-friend { color: rgba(74, 222, 128, 0.85) !important; border-color: rgba(74, 222, 128, 0.25) !important; background: rgba(74, 222, 128, 0.06) !important; } .btn-invite-friend:hover { border-color: rgba(74, 222, 128, 0.55) !important; color: #4ade80 !important; background: rgba(74, 222, 128, 0.10) !important; box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.20) !important; } /* Mobile tightening */ @media (max-width: 480px) { .death-container { padding: 36px 18px 24px !important; } .death-title { font-size: 56px !important; letter-spacing: -2.5px !important; } .stat-value { font-size: 22px !important; } .death-stats.career .stat-value { font-size: 15px !important; } .btn-play-again { font-size: 14px !important; padding: 14px !important; letter-spacing: 2px !important; } } /* === END PHASE K === */ /* ================================================================ PHASE L — HUD polish: ability cards, combo bar, tooltips, settings ================================================================ */ /* --- L1. Ability cards: hide top-right glyph, center the letter --- The .hud-icon-cd images (lightning / flame / clock) ate visual space and pushed the key label down. With them hidden, the letter sits in the vertical center and the label below has clean breathing room. */ .cd-item .hud-icon-cd { display: none !important; } .cd-item { width: 60px !important; height: 64px !important; border-radius: 10px !important; background: linear-gradient(180deg, rgba(20,20,28,0.78), rgba(10,10,16,0.92)) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-top-width: 2px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 16px rgba(0,0,0,0.45) !important; } /* Flatter bottom borders (the old design used an extra-thick under-bar) */ .cd-item[data-ability="q"] { border-top-color: #f5c518 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .cd-item[data-ability="e"] { border-top-color: #ef4444 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .cd-item[data-ability="f"] { border-top-color: #00b4d8 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .cd-item[data-ability="t"] { border-top-color: #4ade80 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .cd-item[data-ability="r"] { border-top-color: #a78bfa !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .cd-item .cd-key-wrap { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; padding: 0 !important; } .cd-item .cd-key-letter { font-family: 'Inter', system-ui, sans-serif !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: 0 !important; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important; line-height: 1 !important; } .cd-item .cd-key-label { font-family: 'Inter', system-ui, sans-serif !important; font-size: 8px !important; font-weight: 600 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; color: rgba(255,255,255,0.55) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.7) !important; margin-top: 2px !important; } /* On-cooldown: dim the letter+label only, not background, so the canvas clock overlay reads cleanly */ .cd-item.cd-on-cooldown .cd-key-letter { color: rgba(255,255,255,0.35) !important; } .cd-item.cd-on-cooldown .cd-key-label { color: rgba(255,255,255,0.20) !important; } /* Ready state: subtle accent-tinted glow, no neon */ .cd-item.cd-ready[data-ability="q"] { box-shadow: 0 0 0 1px rgba(245,197,24,0.45), 0 6px 18px rgba(245,197,24,0.18), inset 0 1px 0 rgba(255,255,255,0.05) !important; } .cd-item.cd-ready[data-ability="e"] { box-shadow: 0 0 0 1px rgba(239,68,68,0.45), 0 6px 18px rgba(239,68,68,0.18), inset 0 1px 0 rgba(255,255,255,0.05) !important; } .cd-item.cd-ready[data-ability="f"] { box-shadow: 0 0 0 1px rgba(0,180,216,0.45), 0 6px 18px rgba(0,180,216,0.18), inset 0 1px 0 rgba(255,255,255,0.05) !important; } .cd-item.cd-ready[data-ability="t"] { box-shadow: 0 0 0 1px rgba(74,222,128,0.45), 0 6px 18px rgba(74,222,128,0.18), inset 0 1px 0 rgba(255,255,255,0.05) !important; } .cd-item.cd-ready[data-ability="r"] { box-shadow: 0 0 0 1px rgba(167,139,250,0.45),0 6px 18px rgba(167,139,250,0.18),inset 0 1px 0 rgba(255,255,255,0.05) !important; } /* Active buff: pulsing golden outline around the key (Adrenaline / Regen duration) */ .cd-item.cd-active { animation: cdActivePulse 1.2s ease-in-out infinite; will-change: box-shadow; } @keyframes cdActivePulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(255,216,74,0.85), 0 0 18px rgba(255,216,74,0.55), inset 0 0 12px rgba(255,216,74,0.25) !important; } 50% { box-shadow: 0 0 0 3px rgba(255,216,74,1.00), 0 0 28px rgba(255,216,74,0.85), inset 0 0 18px rgba(255,216,74,0.45) !important; } } .cd-item.cd-active .cd-key-letter { color: #ffd84a !important; text-shadow: 0 0 8px rgba(255,216,74,0.9), 0 1px 2px rgba(0,0,0,0.85) !important; } .cd-item.cd-active .cd-key-label { color: rgba(255,216,74,0.85) !important; } /* The cooldown timer (e.g. "3.2") sits in the dead-center of the card */ .cd-item .cd-timer { top: 50% !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 18px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; } /* --- L2. Ability tooltip: bigger, glass, color-keyed by ability --- */ .ability-tooltip { width: 280px !important; padding: 14px 16px !important; background: linear-gradient(180deg, rgba(12,12,18,0.96), rgba(6,6,10,0.98)) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 12px !important; box-shadow: 0 12px 32px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05) !important; margin-bottom: 14px !important; backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); } /* Top accent hairline keyed to ability color */ .ability-tooltip::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 12px 12px 0 0; background: currentColor; opacity: 0.85; } .cd-item[data-ability="q"] .ability-tooltip { color: #f5c518; } .cd-item[data-ability="e"] .ability-tooltip { color: #ef4444; } .cd-item[data-ability="f"] .ability-tooltip { color: #00b4d8; } .cd-item[data-ability="t"] .ability-tooltip { color: #4ade80; } .cd-item[data-ability="r"] .ability-tooltip { color: #a78bfa; } .ability-tooltip .tt-name { font-family: 'Inter', system-ui, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.3px !important; color: currentColor !important; margin-bottom: 4px !important; } .ability-tooltip .tt-meta { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 10px !important; font-weight: 500 !important; font-variant-numeric: tabular-nums !important; color: rgba(255,255,255,0.4) !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; margin-bottom: 10px !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(255,255,255,0.06); } .ability-tooltip .tt-desc { font-family: 'Inter', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; color: rgba(255,255,255,0.78) !important; line-height: 1.55 !important; margin-bottom: 10px !important; } .ability-tooltip .tt-stats { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 11px !important; font-variant-numeric: tabular-nums !important; color: rgba(74,222,128,0.85) !important; line-height: 1.7 !important; letter-spacing: 0.2px !important; } .ability-tooltip .tt-stats span { color: #ffffff !important; font-weight: 600 !important; margin-left: 4px !important; } /* --- L3. Settings panel: clean modal + per-folder glass cards --- The legacy modal had a duplicate "SETTINGS" header and the previous pane root override was clipping content (overflow:hidden + padding compounding) so AUDIO/CONTROLS/GRAPHICS appeared truncated. Strategy: neutralize the root pane styling, move glass card aesthetic onto each folder (.tp-fldv), and let the modal scroll naturally. */ #settingsPanel .settings-container { width: 480px; max-width: 95vw; max-height: 86vh; overflow-y: auto; overflow-x: hidden; padding: 22px 24px 28px !important; } /* Compact the legacy SETTINGS h2 — Tweakpane folders supply hierarchy */ #settingsPanel .settings-title { font-family: 'Inter', system-ui, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 2.4px !important; color: rgba(226,232,240,0.55) !important; margin: 0 0 18px !important; text-transform: uppercase; } #tweakpaneSettingsMount { margin-top: 0 !important; } /* Neutralize the pane root: the original 8462 block forced overflow:hidden + a thick green border that fought the new card design. Strip it so the modal owns scroll and each folder owns its own card chrome. */ #tweakpaneSettingsMount > div, #tweakpaneSettingsMount .tp-dfwv { padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } /* Each folder = a glass card */ #tweakpaneSettingsMount .tp-fldv { background: rgba(255,255,255,0.025) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 10px !important; margin-bottom: 10px !important; overflow: hidden !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 4px 14px rgba(0,0,0,0.30) !important; } #tweakpaneSettingsMount .tp-fldv:last-child { margin-bottom: 0 !important; } #tweakpaneSettingsMount .tp-fldv:hover { border-color: rgba(255,255,255,0.10) !important; } /* Folder header: tighter, less aggressive */ #tweakpaneSettingsMount .tp-fldv_t { padding: 10px 14px !important; font-size: 11px !important; letter-spacing: 1.6px !important; background: rgba(255,255,255,0.015) !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; } #tweakpaneSettingsMount .tp-fldv:not(.tp-fldv-expanded) .tp-fldv_t { border-bottom: none !important; } /* Folder body: comfortable, never cramped */ #tweakpaneSettingsMount .tp-fldv_c { padding: 6px 12px 10px !important; } /* Slider rows */ #tweakpaneSettingsMount .tp-lblv { padding: 5px 0 !important; } #tweakpaneSettingsMount .tp-lblv_l { font-size: 12px !important; font-weight: 500 !important; color: rgba(226,232,240,0.85) !important; } /* Slider numeric value: tabular */ #tweakpaneSettingsMount .tp-sldtxtv_t, #tweakpaneSettingsMount .tp-txtv_i { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-variant-numeric: tabular-nums !important; font-size: 11px !important; } /* Buttons (Rebind keys / Reset) — match green accent */ #tweakpaneSettingsMount .tp-btnv_b { border-radius: 8px !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; padding: 8px 12px !important; } /* === END PHASE L === */ /* ================================================================ PHASE M — Kill feed tri-color (red/green/yellow), Friends panel, subtle ambient pulse on grid intersections. ================================================================ */ /* --- M1. Kill feed: relation-coded colors, no decorative dot ------ Killer/victim colors come from JS as #ef4444 (enemy red), #4ade80 (ally green), or #facc15 (self yellow). The CSS below keeps the glass card clean, drops the leftover faction dot, and makes the whole row feel like a satisfying pop instead of a label. */ #killFeed { width: 260px !important; gap: 6px !important; pointer-events: none; } .kill-entry { padding: 7px 12px !important; background: linear-gradient(135deg, rgba(18,18,24,0.78), rgba(8,8,14,0.88)) !important; border: 1px solid rgba(255,255,255,0.06) !important; /* Border-left tinted by killer relation — reads at a glance */ border-left: 3px solid var(--ke-killer, #94a3b8) !important; border-radius: 10px !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; gap: 8px !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: #d1d1d8 !important; position: relative; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); } /* Subtle gradient sweep from killer color → victim color (very low opacity) */ .kill-entry::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, var(--ke-killer, transparent) 0%, transparent 50%, var(--ke-victim, transparent) 100% ); opacity: 0.10; pointer-events: none; } /* Hide leftover faction dot if any markup still produces one */ .ke-dot { display: none !important; } .ke-killer, .ke-victim { font-weight: 700 !important; letter-spacing: 0.005em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.7); } .ke-killer { color: var(--ke-killer, #d1d1d8) !important; text-align: left; } .ke-victim { color: var(--ke-victim, #94a3b8) !important; text-align: right; } .ke-bolt { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 13px !important; font-weight: 700 !important; color: rgba(255,255,255,0.85) !important; text-shadow: 0 0 8px rgba(255,220,80,0.45), 0 0 2px rgba(255,255,255,0.6) !important; width: 18px; text-align: center; position: relative; z-index: 1; flex-shrink: 0; } /* Self-kill emphasis: yellow border + subtle glow (replaces previous green) */ .kill-entry.kill-self { background: linear-gradient(135deg, rgba(250,204,21,0.10), rgba(8,8,14,0.88)) !important; border-color: rgba(250,204,21,0.30) !important; border-left-color: #facc15 !important; box-shadow: 0 6px 22px rgba(0,0,0,0.40), 0 0 16px rgba(250,204,21,0.18), inset 0 1px 0 rgba(255,255,255,0.05) !important; animation: ke-self-flash-yellow 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .kill-entry.kill-self .ke-bolt { color: #facc15; text-shadow: 0 0 10px rgba(250,204,21,0.85), 0 0 2px rgba(255,255,255,0.6); } @keyframes ke-self-flash-yellow { 0% { transform: translateX(28px) scale(1.04); opacity: 0; } 60% { transform: translateX(0) scale(1.04); opacity: 1; box-shadow: 0 0 22px rgba(250,204,21,0.45); } 100% { transform: translateX(0) scale(1); opacity: 1; box-shadow: 0 0 16px rgba(250,204,21,0.18); } } /* --- M2. Friends panel: glass card with proper hierarchy --------- */ #friendsPanel { /* anchor under the relocated top-right toggle button */ top: 64px !important; right: 14px !important; bottom: auto !important; left: auto !important; width: 300px !important; background: linear-gradient(180deg, rgba(14,14,22,0.94), rgba(8,8,14,0.96)) !important; border: 1px solid rgba(167,139,250,0.18) !important; border-radius: 14px !important; box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 0 32px rgba(167,139,250,0.08), inset 0 1px 0 rgba(255,255,255,0.04) !important; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); overflow: hidden; } #friendsPanelHeader { padding: 14px 16px !important; background: linear-gradient(135deg, rgba(167,139,250,0.10), rgba(74,222,128,0.04)) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: #ffffff !important; } #friendsPanelHeader > span::before { content: '\1F465'; /* 👥 */ margin-right: 8px; font-size: 14px; filter: hue-rotate(0deg); } #friendsPanelClose { font-size: 22px !important; color: rgba(255,255,255,0.4) !important; width: 24px; height: 24px; border-radius: 6px !important; transition: background 0.15s, color 0.15s !important; } #friendsPanelClose:hover { background: rgba(255,255,255,0.06) !important; color: #ffffff !important; } #friendsAuthStatus { padding: 12px 16px !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.2px !important; line-height: 1.5 !important; color: rgba(226,232,240,0.7) !important; background: rgba(255,255,255,0.015); border-bottom: 1px solid rgba(255,255,255,0.04); } #friendsAuthStatus.auth-fail { color: #fda4af !important; background: rgba(239,68,68,0.06) !important; border-bottom-color: rgba(239,68,68,0.12) !important; } #friendsAuthStatus.auth-ok { color: #4ade80 !important; background: rgba(74,222,128,0.06) !important; border-bottom-color: rgba(74,222,128,0.14) !important; } #friendsAddSection { padding: 10px 14px !important; gap: 8px !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; background: rgba(255,255,255,0.012) !important; } #friendAddInput { padding: 8px 12px !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 8px !important; color: #e2e8f0 !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; transition: border-color 0.15s, background 0.15s !important; } #friendAddInput::placeholder { color: rgba(226,232,240,0.35) !important; font-weight: 400 !important; } #friendAddInput:focus { border-color: rgba(167,139,250,0.5) !important; background: rgba(255,255,255,0.06) !important; box-shadow: 0 0 0 3px rgba(167,139,250,0.10) !important; } #friendAddBtn { width: 34px; padding: 0 !important; background: linear-gradient(135deg, rgba(167,139,250,0.30), rgba(167,139,250,0.18)) !important; border: 1px solid rgba(167,139,250,0.35) !important; border-radius: 8px !important; color: #ffffff !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1 !important; transition: all 0.15s !important; } #friendAddBtn:hover { background: linear-gradient(135deg, rgba(167,139,250,0.50), rgba(167,139,250,0.32)) !important; border-color: rgba(167,139,250,0.55) !important; transform: translateY(-1px); } /* Empty state inside #friendsList — used by inline JS for "No friends yet" */ #friendsList > div { font-family: 'Inter', system-ui, sans-serif !important; } #friendsList:empty::before, #friendsList > div[style*="No friends yet"] { content: ''; } /* === END PHASE M === */ /* ================================================================ PHASE N — Modal redesign (SETTINGS / FRIENDS / AUTH / SKIN SHOP) + home ambient brightening. Aligned to DESIGN-chat.md tokens (Open WebUI / LibreChat). Neutralizes the legacy violet/green gradient cocktail and replaces it with the chat-style glass: rgba(17,17,17,0.95) + rgba(255,255,255,0.08) border, radius 24px, inputs rgba(255,255,255,0.05) bg + 0.10 border + violet focus ring. ================================================================ */ /* --- N0. Home ambient — lift the canvas a few notches ------------ Original was #050508 with grain at 0.04 and tiny radial accents; it read as flat black. New: keep void-dark but ramp up the two editorial gradients (purple top-left, green bottom-right) and add a third subtle highlight, dial grain DOWN so the surface feels intentional rather than fuzzy. */ #menuScreen { background-image: radial-gradient(ellipse 70% 50% at 18% 8%, rgba(167,139,250,0.13) 0%, transparent 62%), radial-gradient(ellipse 60% 45% at 82% 88%, rgba(74, 222,128,0.10) 0%, transparent 62%), radial-gradient(ellipse 40% 30% at 50% 50%, rgba(247,147, 26,0.04) 0%, transparent 70%) !important; } body::before { /* Less grain, less mix-blend overlap → cleaner glass */ opacity: 0.025 !important; } /* --- N1. SETTINGS modal ----------------------------------------- Drop the violet glow + 16px radius. Use chat-modal: dark base, subtle border, 24px radius, no colored shadow. */ #settingsPanel { background: rgba(0,0,0,0.55) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } #settingsPanel .settings-container, #settingsPanel.settings-container { background: rgba(17,17,17,0.96) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 24px !important; box-shadow: 0 25px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04) !important; padding: 26px 28px 32px !important; } #settingsPanel .settings-title { font-family: 'Inter Variable','Inter',system-ui,sans-serif !important; font-size: 12px !important; font-weight: 510 !important; letter-spacing: 2.6px !important; color: rgba(236,236,241,0.55) !important; text-transform: uppercase !important; margin: 0 0 18px !important; } #settingsPanel .settings-close { top: 14px !important; right: 16px !important; width: 30px !important; height: 30px !important; border-radius: 50% !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: #a0a0a0 !important; font-size: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.15s ease !important; } #settingsPanel .settings-close:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.14) !important; color: #ececf1 !important; } /* Tweakpane folders inside settings — clean glass cards */ #tweakpaneSettingsMount .tp-fldv { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 14px !important; margin-bottom: 12px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important; } #tweakpaneSettingsMount .tp-fldv_t { padding: 12px 16px !important; font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 11px !important; font-weight: 510 !important; letter-spacing: 2.2px !important; color: #4ade80 !important; text-transform: uppercase !important; background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; } #tweakpaneSettingsMount .tp-fldv:not(.tp-fldv-expanded) .tp-fldv_t { border-bottom: none !important; } #tweakpaneSettingsMount .tp-fldv_c { padding: 12px 16px 14px !important; } #tweakpaneSettingsMount .tp-lblv_l { font-size: 13px !important; font-weight: 400 !important; color: #ececf1 !important; } #tweakpaneSettingsMount .tp-sldv_t { height: 4px !important; background: rgba(255,255,255,0.08) !important; border-radius: 2px !important; } #tweakpaneSettingsMount .tp-sldv_k { background: #4ade80 !important; border-radius: 2px !important; } #tweakpaneSettingsMount .tp-sldtxtv_t, #tweakpaneSettingsMount .tp-txtv_i { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-variant-numeric: tabular-nums !important; font-size: 12px !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 6px !important; color: #ececf1 !important; } #tweakpaneSettingsMount .tp-btnv_b { background: rgba(74,222,128,0.10) !important; border: 1px solid rgba(74,222,128,0.25) !important; color: #4ade80 !important; border-radius: 8px !important; font-size: 11px !important; font-weight: 590 !important; letter-spacing: 1px !important; } #tweakpaneSettingsMount .tp-btnv_b:hover { background: rgba(74,222,128,0.18) !important; border-color: rgba(74,222,128,0.40) !important; } /* --- N2. FRIENDS popup ------------------------------------------ */ #friendsMenuPopup { background: rgba(17,17,17,0.96) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 24px !important; box-shadow: 0 25px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04) !important; width: 440px !important; max-width: 92vw !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } #friendsMenuPopup .fmp-header { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; padding: 18px 22px !important; } #friendsMenuPopup .fmp-title { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 15px !important; font-weight: 590 !important; color: #ececf1 !important; letter-spacing: 0.2px !important; } #friendsMenuPopup .fmp-close { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: #a0a0a0 !important; font-size: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } #friendsMenuPopup .fmp-close:hover { background: rgba(255,255,255,0.08) !important; color: #ececf1 !important; } #friendsMenuPopup .fmp-add-row { padding: 14px 22px 16px !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; } #friendsMenuPopup .fmp-add-row input { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 10px !important; padding: 10px 14px !important; color: #ececf1 !important; font-size: 13px !important; transition: border-color 0.15s ease !important; } #friendsMenuPopup .fmp-add-row input:focus { border-color: rgba(167,139,250,0.40) !important; box-shadow: none !important; } #friendsMenuPopup .fmp-add-row input::placeholder { color: #606060 !important; } #friendsMenuPopup .fmp-add-btn { background: #a78bfa !important; border: none !important; color: #0d0d0d !important; font-weight: 590 !important; font-size: 13px !important; border-radius: 10px !important; padding: 10px 18px !important; letter-spacing: 0.2px !important; } #friendsMenuPopup .fmp-add-btn:hover { background: #b9a4fc !important; } #friendsMenuPopup .fmp-section-label { padding: 14px 22px 6px !important; font-size: 11px !important; font-weight: 510 !important; color: #606060 !important; letter-spacing: 1.6px !important; } #friendsMenuPopup .fmp-item { padding: 10px 22px !important; border-radius: 0 !important; transition: background 0.15s ease !important; } #friendsMenuPopup .fmp-item:hover { background: rgba(255,255,255,0.04) !important; } #friendsMenuPopup .fmp-avatar { background: rgba(167,139,250,0.12) !important; border: 1px solid rgba(167,139,250,0.20) !important; } #friendsMenuPopup .fmp-name { font-weight: 510 !important; color: #ececf1 !important; } #friendsMenuPopup .fmp-status-dot.online, #friendsMenuPopup .fmp-status-text.online { color: #4ade80 !important; } #friendsMenuPopup .fmp-status-dot.online { background: #4ade80 !important; box-shadow: 0 0 0 2px rgba(74,222,128,0.20) !important; } #friendsMenuPopup .fmp-actions button { border-radius: 9999px !important; font-size: 11px !important; font-weight: 510 !important; letter-spacing: 0.3px !important; padding: 6px 14px !important; } #friendsMenuPopup .fmp-btn-invite { background: rgba(74,222,128,0.10) !important; color: #4ade80 !important; border: 1px solid rgba(74,222,128,0.25) !important; } #friendsMenuPopup .fmp-btn-invite:hover { background: rgba(74,222,128,0.18) !important; } /* --- N3. AUTH popup (Sign in / Create account) ------------------ */ #authPopup { background: rgba(17,17,17,0.96) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 24px !important; box-shadow: 0 25px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04) !important; width: 420px !important; max-width: 92vw !important; padding: 32px 32px 26px !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } .auth-close { top: 14px !important; right: 16px !important; width: 30px !important; height: 30px !important; border-radius: 50% !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: #a0a0a0 !important; font-size: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .auth-close:hover { background: rgba(255,255,255,0.08) !important; color: #ececf1 !important; } .auth-logo-img { filter: brightness(1.05) !important; } .auth-tabs { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 12px !important; padding: 4px !important; gap: 4px !important; margin-bottom: 22px !important; } .auth-tab { background: transparent !important; color: #a0a0a0 !important; font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 13px !important; font-weight: 510 !important; border-radius: 8px !important; padding: 9px 0 !important; letter-spacing: 0.1px !important; } .auth-tab:hover { background: rgba(255,255,255,0.04) !important; color: #ececf1 !important; } .auth-tab-active { background: rgba(167,139,250,0.12) !important; color: #c4b5fd !important; } .auth-field label { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 11px !important; font-weight: 510 !important; color: #606060 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; } .auth-field input { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 10px !important; padding: 11px 14px !important; color: #ececf1 !important; font-size: 14px !important; transition: border-color 0.15s ease !important; } .auth-field input:focus { border-color: rgba(167,139,250,0.40) !important; box-shadow: none !important; } .auth-field input::placeholder { color: #606060 !important; } .auth-optional { color: #4ade80 !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; } .auth-submit { background: #a78bfa !important; color: #0d0d0d !important; border: none !important; border-radius: 12px !important; padding: 12px 0 !important; font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 14px !important; font-weight: 590 !important; letter-spacing: 0.2px !important; margin-top: 6px !important; transition: background 0.15s ease, transform 0.15s ease !important; } .auth-submit:hover { background: #b9a4fc !important; transform: none !important; box-shadow: none !important; } .auth-submit-register { background: #4ade80 !important; color: #0d0d0d !important; } .auth-submit-register:hover { background: #6ee19a !important; box-shadow: none !important; } .auth-forgot { color: #606060 !important; font-size: 12px !important; font-weight: 400 !important; } .auth-forgot:hover { color: #a78bfa !important; } .auth-divider { color: #606060 !important; font-size: 11px !important; font-weight: 510 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; margin: 18px 0 !important; } .auth-divider::before, .auth-divider::after { background: rgba(255,255,255,0.06) !important; } .auth-google { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 12px !important; color: #ececf1 !important; font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 13px !important; font-weight: 510 !important; padding: 11px 0 !important; transition: all 0.15s ease !important; } .auth-google:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.16) !important; } .auth-bonus-info { margin-top: 18px !important; padding: 10px 14px !important; background: rgba(74,222,128,0.06) !important; border: 1px solid rgba(74,222,128,0.16) !important; border-radius: 10px !important; color: #a0a0a0 !important; font-size: 12px !important; } .auth-bonus-badge { background: rgba(74,222,128,0.18) !important; color: #4ade80 !important; font-weight: 700 !important; border-radius: 6px !important; } .auth-error { color: #f87171 !important; } .auth-success { color: #4ade80 !important; } /* --- N4. SKIN SHOP — calmer chrome, less violet glow ------------ */ #skinShop { background: rgba(0,0,0,0.65) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } #skinShop .shop-container { background: #050505 !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 24px !important; box-shadow: 0 25px 60px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04) !important; } /* Grain overlay on the shop container (overrides any earlier ::before) */ #skinShop .shop-container::before { content: '' !important; position: absolute !important; inset: 0 !important; background-image: url("data:image/svg+xml;utf8,") !important; background-size: 240px 240px !important; opacity: 0.07 !important; pointer-events: none !important; mix-blend-mode: overlay !important; border-radius: 24px !important; z-index: 0 !important; } #skinShop .shop-container > * { position: relative; z-index: 1; } #skinShop .shop-title { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 32px !important; font-weight: 590 !important; letter-spacing: -0.4px !important; background: linear-gradient(135deg, #ececf1 0%, #a78bfa 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: none !important; text-shadow: none !important; } #skinShop .shop-subtitle { color: #a0a0a0 !important; font-weight: 400 !important; } #skinShop .shop-coins-banner { background: rgba(251,191,36,0.08) !important; border: 1px solid rgba(251,191,36,0.22) !important; border-radius: 9999px !important; font-family: 'Inter Variable','Inter',sans-serif !important; font-weight: 590 !important; font-size: 13px !important; color: #fbbf24 !important; box-shadow: none !important; } #skinShop .shop-close { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: #a0a0a0 !important; } #skinShop .shop-close:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.16) !important; color: #ececf1 !important; } #skinShop .skin-card { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 14px !important; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important; } #skinShop .skin-card:hover { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.14) !important; transform: translateY(-2px) !important; } /* === END PHASE N === */ /* ================================================================ PHASE O — $DOM AIRDROP module redesign (DESIGN-chat.md tokens) Was: linear-gradient #0d0d1f / yellow-tinted glow + 42px "AIRDROP" gold + colored stat shadows. New: chat-modal glass — rgba(17,17,17,0.96) bg, rgba(255,255,255,0.08) border, 24px radius, no colored glow, sectioned glass cards (rgba(255,255,255,0.03) / 0.07 border), violet accents for headers, green for funded amounts, gold reserved for $DOM brand only. ================================================================ */ /* Backdrop calmer */ .airdrop-panel { background: rgba(0,0,0,0.78) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } /* Container — chat-modal flat dark + subtle highlight */ .ap-box { background: rgba(17,17,17,0.96) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 24px !important; padding: 0 36px 36px !important; box-shadow: 0 25px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04) !important; } /* Close — match Settings/Auth/Friends close pattern */ .ap-close { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: #a0a0a0 !important; width: 32px !important; height: 32px !important; font-size: 18px !important; top: 16px !important; right: 16px !important; transition: all 0.15s ease !important; } .ap-close:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.16) !important; color: #ececf1 !important; transform: none !important; } /* Hero — drop the gold halo, use violet→green gradient text for $DOM, tighter spacing, no text-shadow */ .ap-hero { padding: 36px 0 24px !important; } .ap-hero-glow { background: radial-gradient(ellipse, rgba(167,139,250,0.10) 0%, rgba(74,222,128,0.05) 45%, transparent 75%) !important; width: 360px !important; height: 220px !important; top: -40px !important; } .ap-title { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 38px !important; font-weight: 590 !important; letter-spacing: -0.5px !important; color: #ececf1 !important; text-shadow: none !important; } .ap-title-accent { background: linear-gradient(135deg, #ececf1 0%, #a78bfa 60%, #4ade80 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; font-weight: 590 !important; letter-spacing: -0.3px !important; } .ap-subtitle { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 15px !important; font-weight: 400 !important; color: #a0a0a0 !important; letter-spacing: 0 !important; margin-top: 10px !important; } /* Chain badges — pill style aligned with chat tokens */ .ap-chain-badges { gap: 6px !important; margin-top: 16px !important; } .ap-badge { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 9999px !important; padding: 5px 12px !important; font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 11px !important; font-weight: 510 !important; color: #a0a0a0 !important; letter-spacing: 0.2px !important; } /* Stats — uniform glass cards, no colored shadow */ .ap-stats { gap: 10px !important; margin-bottom: 24px !important; } .ap-stat { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 14px !important; padding: 18px 14px 16px !important; transition: background 0.15s ease, border-color 0.15s ease !important; } .ap-stat:hover { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.14) !important; } .ap-stat-coins, .ap-stat-tokens, .ap-stat-rank, .ap-stat-multi { border-color: rgba(255,255,255,0.07) !important; } .ap-stat-val { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 24px !important; font-weight: 600 !important; color: #ececf1 !important; text-shadow: none !important; font-variant-numeric: tabular-nums !important; letter-spacing: -0.5px !important; } .ap-stat-coins .ap-stat-val { color: #fbbf24 !important; } .ap-stat-tokens .ap-stat-val { color: #4ade80 !important; text-shadow: none !important; } .ap-stat-rank .ap-stat-val { color: #a78bfa !important; text-shadow: none !important; } .ap-stat-multi .ap-stat-val { color: #f87171 !important; } .ap-stat-label { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 10px !important; font-weight: 590 !important; color: #707070 !important; letter-spacing: 1.2px !important; margin-top: 6px !important; } /* Section title — chat-style overline */ .ap-section-title { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 11px !important; font-weight: 590 !important; letter-spacing: 1.6px !important; color: #707070 !important; text-transform: uppercase !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; margin-bottom: 16px !important; padding-bottom: 10px !important; } /* Funding pool — clean meter, green progress only */ .ap-fund { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 16px !important; padding: 22px 24px !important; margin-bottom: 22px !important; } .ap-fund-desc { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 13px !important; color: #a0a0a0 !important; line-height: 1.65 !important; } .ap-fund-bar { height: 12px !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 9999px !important; } .ap-fund-fill { background: linear-gradient(90deg, #4ade80, #22c55e, #4ade80) !important; border-radius: 9999px !important; } .ap-fund-val { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 17px !important; font-weight: 600 !important; color: #4ade80 !important; text-shadow: none !important; font-variant-numeric: tabular-nums !important; } .ap-fund-target .ap-fund-val { color: #707070 !important; } .ap-fund-label { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 10px !important; color: #707070 !important; letter-spacing: 1.2px !important; font-weight: 590 !important; } .ap-fund-breakdown { gap: 8px !important; margin-top: 16px !important; } .ap-fund-bk-item { background: rgba(255,255,255,0.025) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 10px !important; padding: 10px 12px !important; font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 12px !important; color: #a0a0a0 !important; } .ap-fund-bk-icon { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-weight: 600 !important; font-size: 13px !important; font-variant-numeric: tabular-nums !important; } /* Tokenomics — match other section cards */ .ap-tokenomics { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 16px !important; padding: 22px 24px !important; margin-bottom: 22px !important; } .ap-supply { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 13px !important; color: #a0a0a0 !important; font-weight: 400 !important; } .ap-supply strong { font-family: 'JetBrains Mono', ui-monospace, monospace !important; color: #fbbf24 !important; font-weight: 600 !important; letter-spacing: -0.3px !important; } .ap-legend-item { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 12px !important; color: #a0a0a0 !important; } .ap-legend-pct { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-weight: 600 !important; font-variant-numeric: tabular-nums !important; color: #ececf1 !important; } /* Anti-Dump cards — neutral surfaces with single accent border */ .ap-vesting { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 16px !important; padding: 22px 24px !important; margin-bottom: 22px !important; } .ap-vest-subtitle { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 13px !important; color: #a0a0a0 !important; margin-bottom: 16px !important; line-height: 1.6 !important; } .ap-vest-cards { gap: 10px !important; } .ap-vest-card { background: rgba(255,255,255,0.025) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 14px !important; padding: 18px 16px !important; transition: border-color 0.15s ease !important; } .ap-vest-green { border-left: 2px solid #4ade80 !important; } .ap-vest-orange { border-left: 2px solid #fbbf24 !important; } .ap-vest-red { border-left: 2px solid #f87171 !important; } .ap-vest-card-pct { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 28px !important; font-weight: 600 !important; letter-spacing: -0.5px !important; color: #ececf1 !important; font-variant-numeric: tabular-nums !important; } .ap-vest-green .ap-vest-card-pct { color: #4ade80 !important; } .ap-vest-orange .ap-vest-card-pct { color: #fbbf24 !important; } .ap-vest-red .ap-vest-card-pct { color: #f87171 !important; } .ap-vest-card-label { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 11px !important; font-weight: 590 !important; color: #707070 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; margin: 6px 0 !important; } .ap-vest-card-desc { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 12px !important; color: #a0a0a0 !important; line-height: 1.55 !important; } /* How to farm — uniform grid */ .ap-how { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 16px !important; padding: 22px 24px !important; margin-bottom: 22px !important; } .ap-how-grid { gap: 10px !important; } .ap-how-card { background: rgba(255,255,255,0.025) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 12px !important; padding: 16px 12px !important; } .ap-how-card:hover { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.14) !important; } .ap-how-card-special { border-color: rgba(167,139,250,0.25) !important; background: rgba(167,139,250,0.05) !important; } .ap-how-reward { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 24px !important; font-weight: 600 !important; letter-spacing: -0.5px !important; font-variant-numeric: tabular-nums !important; } .ap-how-action { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 11px !important; font-weight: 590 !important; color: #ececf1 !important; letter-spacing: 0.4px !important; margin-top: 4px !important; } .ap-how-desc { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 11px !important; color: #707070 !important; margin-top: 4px !important; line-height: 1.4 !important; } /* Skin tiers + multiplier */ .ap-tiers { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 16px !important; padding: 22px 24px !important; margin-bottom: 22px !important; } .ap-tier-subtitle { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 13px !important; color: #a0a0a0 !important; margin-bottom: 16px !important; line-height: 1.6 !important; } .ap-tier-card { background: rgba(255,255,255,0.025) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 14px !important; padding: 18px 16px !important; transition: border-color 0.15s ease, background 0.15s ease !important; } .ap-tier-card:hover { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.14) !important; } .ap-tier-premium { border-left: 2px solid #a78bfa !important; } .ap-tier-ultra { border-left: 2px solid #f87171 !important; } .ap-tier-legendary { border-left: 2px solid #fbbf24 !important; } .ap-tier-name { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 13px !important; font-weight: 590 !important; letter-spacing: 0.5px !important; } .ap-tier-price { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 18px !important; font-weight: 600 !important; color: #ececf1 !important; letter-spacing: -0.3px !important; font-variant-numeric: tabular-nums !important; margin: 6px 0 !important; } .ap-tier-rewards { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 12px !important; color: #a0a0a0 !important; line-height: 1.6 !important; } /* Multiplier stack info */ .ap-stack-info { background: rgba(167,139,250,0.05) !important; border: 1px solid rgba(167,139,250,0.18) !important; border-radius: 14px !important; padding: 18px 20px !important; margin-top: 16px !important; } .ap-stack-title { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 12px !important; font-weight: 590 !important; letter-spacing: 1.4px !important; color: #a78bfa !important; text-transform: uppercase !important; margin-bottom: 10px !important; } .ap-stack-desc { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 12px !important; color: #a0a0a0 !important; line-height: 1.6 !important; margin-bottom: 12px !important; } .ap-stack-ex { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 10px !important; padding: 8px 12px !important; font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 12px !important; color: #a0a0a0 !important; } .ap-stack-ex-val { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-weight: 600 !important; font-variant-numeric: tabular-nums !important; } .ap-stack-note { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 11px !important; color: #707070 !important; line-height: 1.6 !important; margin-top: 12px !important; } /* Roadmap — neutral timeline, accent only on active */ .ap-roadmap { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 16px !important; padding: 22px 24px !important; margin-bottom: 22px !important; } .ap-tl-item .ap-tl-dot { background: rgba(255,255,255,0.10) !important; border: 2px solid rgba(255,255,255,0.06) !important; box-shadow: none !important; } .ap-tl-done .ap-tl-dot { background: #4ade80 !important; border-color: #4ade80 !important; } .ap-tl-active .ap-tl-dot { background: #a78bfa !important; border-color: #a78bfa !important; box-shadow: 0 0 0 4px rgba(167,139,250,0.18) !important; } .ap-tl-date { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 11px !important; font-weight: 600 !important; color: #707070 !important; letter-spacing: 0.5px !important; } .ap-tl-active .ap-tl-date { color: #a78bfa !important; } .ap-tl-done .ap-tl-date { color: #4ade80 !important; } .ap-tl-title { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 14px !important; font-weight: 590 !important; color: #ececf1 !important; margin: 4px 0 !important; letter-spacing: -0.1px !important; } .ap-tl-desc { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 12px !important; color: #a0a0a0 !important; line-height: 1.55 !important; } /* Footer */ .ap-footer { border-top: 1px solid rgba(255,255,255,0.06) !important; padding-top: 18px !important; margin-top: 8px !important; } .ap-footer-trust, .ap-footer-chain, .ap-trust-item { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 11px !important; color: #707070 !important; letter-spacing: 0.3px !important; } .ap-footer-chain strong { color: #ececf1 !important; font-weight: 590 !important; } /* === END PHASE O === */ /* ================================================================ PHASE P — Mobile / iPhone polish for the home (320 / 375 / 414). Builds on existing @media (max-width: 767px) and (max-width: 480px) blocks — fixes overflows, tap targets, safe-area insets, and the $DOM AIRDROP modal scaling on phones. ================================================================ */ /* iPhone safe-area insets (notch + home indicator) */ @supports (padding: max(0px)) { @media (max-width: 767px) { #menuScreen > .ticker-bar { padding-left: max(8px, env(safe-area-inset-left)) !important; padding-right: max(8px, env(safe-area-inset-right)) !important; } #menuScreen > .vgpu-corner { top: max(36px, calc(env(safe-area-inset-top) + 36px)) !important; left: max(8px, env(safe-area-inset-left)) !important; right: max(8px, env(safe-area-inset-right)) !important; } #menuScreen > .menu-container { padding-left: max(16px, env(safe-area-inset-left)) !important; padding-right: max(16px, env(safe-area-inset-right)) !important; padding-bottom: max(24px, env(safe-area-inset-bottom)) !important; } } } /* Phones — kill any hidden horizontal overflow + force full-width sizing on widgets that previously used 100vw (which ignores scrollbars and triggers overflow on some Androids/PWAs). */ @media (max-width: 767px) { html, body { overflow-x: hidden; width: 100%; } #menuScreen { width: 100%; min-height: 100dvh; /* dynamic viewport — accounts for iOS Safari URL bar */ } #menuScreen > .menu-vol-panel, #menuScreen > .menu-earn-panel { width: auto !important; max-width: calc(100% - 32px) !important; margin-left: auto !important; margin-right: auto !important; } /* Ticker — make sure it never breaks the row */ .ticker-bar { overflow: hidden; } .ticker-bar .ticker-track { will-change: transform; } /* Tap targets — WCAG 44×44 minimum */ #playBtn, .btn-skins, .btn-settings, .btn-earn, .btn-runner-corner, .abc-info-btn, .vgpu-corner-top a, .vgpu-corner-top button { min-height: 44px; touch-action: manipulation; } /* Faction buttons — increase tap area, prevent label clipping */ .menu-container .faction-btn { min-height: 64px; } .menu-container .faction-btn .faction-label { line-height: 1.2; word-break: keep-all; } /* Stats banner: align baseline + monospace numbers stay tabular */ .abc-val { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } /* PHASE N0 home gradients — tighter on small viewports so the canvas doesn't feel wash-empty when content is short */ #menuScreen { background-image: radial-gradient(ellipse 80% 35% at 18% 5%, rgba(167,139,250,0.14) 0%, transparent 60%), radial-gradient(ellipse 70% 30% at 82% 95%, rgba(74,222,128,0.10) 0%, transparent 60%) !important; } /* AIRDROP modal — fullscreen sheet on phones */ .airdrop-panel { padding: 0 !important; } .ap-box { width: 100% !important; max-width: 100% !important; max-height: 100dvh !important; border-radius: 0 !important; border: none !important; padding: 0 16px max(24px, env(safe-area-inset-bottom)) !important; box-shadow: none !important; } .ap-close { top: max(12px, env(safe-area-inset-top)) !important; right: 12px !important; } .ap-hero { padding: 28px 0 18px !important; } .ap-hero-glow { width: 220px !important; height: 140px !important; } .ap-title { font-size: 28px !important; letter-spacing: -0.3px !important; } .ap-subtitle { font-size: 13px !important; } .ap-chain-badges { flex-wrap: wrap !important; } .ap-stats { flex-wrap: wrap !important; gap: 8px !important; } .ap-stat { flex: 1 1 calc(50% - 4px) !important; min-width: calc(50% - 4px) !important; padding: 14px 10px 12px !important; } .ap-stat-val { font-size: 20px !important; } .ap-fund, .ap-tokenomics, .ap-vesting, .ap-how, .ap-tiers, .ap-roadmap { padding: 18px 16px !important; margin-bottom: 14px !important; } .ap-fund-breakdown { flex-direction: column !important; } .ap-vest-cards { flex-direction: column !important; } .ap-how-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; } .ap-tier-grid { display: grid !important; grid-template-columns: 1fr !important; } .ap-donut-row { flex-direction: column !important; align-items: center !important; gap: 14px !important; } .ap-stack-ex { flex-wrap: wrap !important; gap: 6px !important; } } /* iPhone SE / 320–375 px — finer tuning */ @media (max-width: 380px) { /* 3×2 stays — just shrink icons + tighten gap so 3 cols fit comfortably on 320px */ .menu-container .faction-grid, #menuScreen .faction-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } .menu-container .faction-grid > .faction-btn, #menuScreen .faction-grid > .faction-btn { padding: 10px 4px !important; min-height: 68px !important; } .menu-container .faction-grid .faction-icon, #menuScreen .faction-grid .faction-icon, .menu-container .faction-grid .faction-icon img, #menuScreen .faction-grid .faction-icon img { width: 30px !important; height: 30px !important; } .menu-container .faction-grid .faction-label, #menuScreen .faction-grid .faction-label { font-size: 11px !important; } .menu-container .faction-btn { min-height: 60px; padding: 10px 8px !important; } .menu-container .faction-icon img { width: 26px !important; height: 26px !important; } .menu-container .faction-btn .faction-label { font-size: 10px !important; } /* Stats badge row: allow vertical stacking when too narrow */ .vgpu-corner-top { flex-wrap: wrap; row-gap: 4px; } .abc-val { font-size: 12px !important; } .abc-label { font-size: 7px !important; } .abc-divider { display: none; } /* Volume sliders — 2 per row instead of 3 */ .mbp-vol-row { gap: 8px !important; } .mbp-vol-row .vol-slider { width: 64px !important; } /* AIRDROP — smaller hero, single-column stats */ .ap-title { font-size: 24px !important; } .ap-stat { flex: 1 1 100% !important; min-width: 100% !important; } .ap-how-grid { grid-template-columns: 1fr !important; } } /* Landscape phones — short height, allow scroll, compact hero */ @media (max-height: 480px) and (orientation: landscape) and (max-width: 1024px) { #menuScreen > .menu-container { padding-top: 80px !important; } .game-title { font-size: 22px !important; } .game-subtitle { font-size: 10px !important; } #playBtn { min-height: 44px !important; padding: 10px 18px !important; font-size: 15px !important; } .ap-hero { padding: 14px 0 10px !important; } .ap-title { font-size: 20px !important; } } /* === END PHASE P === */ /* ================================================================ PHASE Q — Final unification pass. Audit found legacy gradients + heavy weights still leaking in: • Faction Quick Popup (FQP) — violet/yellow tinted card • Class Selection Popup — cyan border + cyan glow • Rules Popup — yellow border + violet CTA • Faction Random Button — heavy violet • Airdrop tier-ultra/legendary — gradient overrides fighting PHASE O (defined later in file) • Airdrop ap-stat-multi — same All folded onto chat-modal tokens (rgba(17,17,17,0.96) + rgba(255,255,255,0.08) border + 24px radius), with weight ≤ 590, neutral tertiary text and a single accent per surface. ================================================================ */ /* ---------- Q1. FACTION QUICK POPUP (FQP) ---------- */ .fqp-overlay { background: rgba(0,0,0,0.65) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .fqp-box { background: rgba(17,17,17,0.96) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 24px !important; padding: 28px 30px 24px !important; box-shadow: 0 25px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04) !important; } /* Drop the per-faction colored borders — single neutral kit */ .fqp-box[data-faction="btc"], .fqp-box[data-faction="eth"], .fqp-box[data-faction="tao"], .fqp-box[data-faction="doge"], .fqp-box[data-faction="sol"], .fqp-box[data-faction="bnb"] { border-color: rgba(255,255,255,0.08) !important; } .fqp-logo { width: 52px !important; height: 52px !important; filter: none !important; } .fqp-title { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 22px !important; font-weight: 590 !important; letter-spacing: -0.3px !important; text-transform: none !important; color: #ececf1 !important; } /* Per-faction title color — keep brand identity but at chat weights */ .fqp-box[data-faction="btc"] .fqp-title { color: #f7931a !important; } .fqp-box[data-faction="eth"] .fqp-title { color: #8aa0f5 !important; } .fqp-box[data-faction="tao"] .fqp-title { color: #5fd6ff !important; } .fqp-box[data-faction="doge"] .fqp-title { color: #d4b94a !important; } .fqp-box[data-faction="sol"] .fqp-title { color: #a78bfa !important; } .fqp-box[data-faction="bnb"] .fqp-title { color: #fbbf24 !important; } .fqp-tagline { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 13px !important; color: #a0a0a0 !important; font-style: normal !important; font-weight: 400 !important; } .fqp-class-indicator { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 12px !important; color: #707070 !important; margin-top: 14px !important; padding-top: 12px !important; border-top: 1px solid rgba(255,255,255,0.06) !important; } .fqp-class-label { color: #707070 !important; } .fqp-class-value { color: #a78bfa !important; font-weight: 590 !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-variant-numeric: tabular-nums !important; } /* FQP buttons — chat-modal pill row */ .fqp-btn { font-family: 'Inter Variable','Inter',sans-serif !important; font-weight: 510 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; font-size: 12px !important; padding: 11px 14px !important; } .fqp-btn-play { background: #a78bfa !important; color: #0d0d0d !important; border: none !important; font-weight: 590 !important; font-size: 13px !important; letter-spacing: 0.4px !important; } .fqp-btn-play:hover { background: #b89cf9 !important; box-shadow: none !important; } .fqp-btn-skins, .fqp-btn-rules, .fqp-btn-class { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: #ececf1 !important; } .fqp-btn-skins:hover, .fqp-btn-rules:hover, .fqp-btn-class:hover { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.16) !important; } /* ---------- Q2. CLASS SELECTION POPUP ---------- */ .class-overlay { background: rgba(0,0,0,0.72) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .class-box { background: rgba(17,17,17,0.96) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 24px !important; padding: 32px 32px 28px !important; box-shadow: 0 25px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04) !important; } .class-close { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 50% !important; width: 32px !important; height: 32px !important; font-size: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #a0a0a0 !important; top: 16px !important; right: 16px !important; transition: all 0.15s ease !important; } .class-close:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.16) !important; color: #ececf1 !important; } .class-title { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 24px !important; font-weight: 590 !important; letter-spacing: -0.3px !important; text-transform: none !important; color: #ececf1 !important; text-shadow: none !important; } .class-subtitle { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 13px !important; font-weight: 400 !important; color: #a0a0a0 !important; letter-spacing: 0 !important; margin-top: 6px !important; } /* Class cards — flat glass, single accent on hover/selected */ .class-card { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 16px !important; padding: 22px 20px !important; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important; } .class-card:hover { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.16) !important; transform: translateY(-2px) !important; box-shadow: none !important; } .class-card-selected { border-color: #a78bfa !important; background: rgba(167,139,250,0.06) !important; box-shadow: 0 0 0 3px rgba(167,139,250,0.16) !important; } .class-card-icon { font-size: 44px !important; margin-bottom: 12px !important; } .class-card-name { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 17px !important; font-weight: 590 !important; letter-spacing: 0.4px !important; color: #ececf1 !important; margin-bottom: 4px !important; } .class-card-role { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 11px !important; font-weight: 590 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; color: #707070 !important; margin-bottom: 14px !important; } .class-card-desc { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 13px !important; color: #a0a0a0 !important; line-height: 1.6 !important; margin-bottom: 14px !important; font-weight: 400 !important; } .class-stat { background: rgba(255,255,255,0.025) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 8px !important; padding: 5px 10px !important; font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 12px !important; } .stat-label { color: #707070 !important; font-weight: 590 !important; letter-spacing: 0.4px !important; } .stat-val { color: #ececf1 !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-weight: 600 !important; font-variant-numeric: tabular-nums !important; } .stat-buff { color: #4ade80 !important; } .stat-nerf { color: #f87171 !important; } .class-card-abilities { border-top: 1px solid rgba(255,255,255,0.06) !important; padding-top: 14px !important; } .ability-key { background: rgba(167,139,250,0.10) !important; border: 1px solid rgba(167,139,250,0.22) !important; border-radius: 6px !important; padding: 3px 9px !important; color: #a78bfa !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-weight: 600 !important; font-size: 12px !important; min-width: 24px !important; } .ability-name { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 13px !important; font-weight: 590 !important; color: #ececf1 !important; letter-spacing: 0.2px !important; } .ability-desc { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 12px !important; color: #a0a0a0 !important; line-height: 1.5 !important; } .class-passive .passive-label { background: rgba(74,222,128,0.10) !important; border: 1px solid rgba(74,222,128,0.22) !important; color: #4ade80 !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-weight: 600 !important; font-size: 11px !important; border-radius: 6px !important; padding: 3px 8px !important; letter-spacing: 0.4px !important; } .passive-desc { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 12px !important; color: #a0a0a0 !important; line-height: 1.5 !important; } /* Confirm — solid violet button (chat send) */ .class-confirm-btn { background: #a78bfa !important; color: #0d0d0d !important; border: none !important; border-radius: 12px !important; font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 14px !important; font-weight: 590 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; padding: 13px 36px !important; text-shadow: none !important; transition: background 0.15s ease, transform 0.15s ease !important; box-shadow: none !important; } .class-confirm-btn:hover { background: #b89cf9 !important; transform: translateY(-1px) !important; box-shadow: none !important; } .class-confirm-btn:active { transform: translateY(0) !important; } /* ---------- Q3. RULES POPUP ---------- */ .rules-overlay { background: rgba(0,0,0,0.68) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .rules-box { background: rgba(17,17,17,0.96) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 24px !important; padding: 30px 32px 26px !important; box-shadow: 0 25px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04) !important; } .rules-close { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 50% !important; width: 32px !important; height: 32px !important; font-size: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #a0a0a0 !important; top: 14px !important; right: 14px !important; transition: all 0.15s ease !important; } .rules-close:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.16) !important; color: #ececf1 !important; } .rules-title { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 22px !important; font-weight: 590 !important; letter-spacing: -0.3px !important; text-transform: none !important; color: #ececf1 !important; margin-bottom: 4px !important; } .rules-subtitle { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 13px !important; color: #a0a0a0 !important; font-style: normal !important; font-weight: 400 !important; } .rules-section { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 14px !important; padding: 16px 18px !important; } .rules-section-title { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 11px !important; font-weight: 590 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; color: #707070 !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; padding-bottom: 8px !important; margin-bottom: 10px !important; } .rules-section p { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 13px !important; color: #a0a0a0 !important; line-height: 1.65 !important; font-weight: 400 !important; } .rules-section strong { color: #ececf1 !important; font-weight: 590 !important; } .rules-list li { font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 13px !important; color: #a0a0a0 !important; line-height: 1.65 !important; font-weight: 400 !important; } .rules-list li strong { color: #ececf1 !important; font-weight: 590 !important; } .rules-list li::before { color: #f87171 !important; font-weight: 510 !important; } .rules-list-green li::before { color: #4ade80 !important; } .rules-list-green li strong { color: #ececf1 !important; } .rules-list-yellow li::before { color: #fbbf24 !important; } .rules-list-yellow li strong { color: #ececf1 !important; } .rules-got-it { background: #a78bfa !important; color: #0d0d0d !important; border: none !important; border-radius: 12px !important; font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 13px !important; font-weight: 590 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; padding: 12px 32px !important; text-shadow: none !important; box-shadow: none !important; transition: background 0.15s ease, transform 0.15s ease !important; } .rules-got-it:hover { background: #b89cf9 !important; transform: translateY(-1px) !important; box-shadow: none !important; } /* ---------- Q4. FACTION RANDOM BUTTON ---------- */ .faction-random-btn { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 12px !important; color: #a0a0a0 !important; font-family: 'Inter Variable','Inter',sans-serif !important; font-size: 11px !important; font-weight: 510 !important; letter-spacing: 0.4px !important; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important; } .faction-random-btn:hover { background: rgba(255,255,255,0.06) !important; border-color: rgba(167,139,250,0.4) !important; color: #a78bfa !important; transform: translateY(-1px) !important; } .faction-random-btn .random-dice { font-size: 22px !important; line-height: 1 !important; } /* ---------- Q5. AIRDROP — beat back legacy gradient overrides defined later in file (lines ~7200, ~7246-7253) ---------- */ .ap-stat-multi { background: rgba(255,255,255,0.025) !important; border: 1px solid rgba(248,113,113,0.18) !important; } .ap-tier-ultra { background: rgba(255,255,255,0.025) !important; border-color: rgba(248,113,113,0.18) !important; } .ap-tier-legendary { background: rgba(255,255,255,0.025) !important; border-color: rgba(251,191,36,0.20) !important; } .ap-community { background: rgba(248,113,113,0.04) !important; border-color: rgba(248,113,113,0.18) !important; border-radius: 16px !important; } /* ---------- Q6. FACTION INFO BAR ---------- */ .faction-info-bar .fi-tagline { font-family: 'Inter Variable','Inter',sans-serif !important; font-weight: 400 !important; font-size: 13px !important; color: #a0a0a0 !important; } .faction-info-bar .fi-ability-name { font-family: 'Inter Variable','Inter',sans-serif !important; font-weight: 590 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; } /* ---------- Q7. GAME TITLE LOGO HALO — calmer ---------- */ .vgpu-title-logo::before { background: radial-gradient( closest-side, rgba(167,139,250,0.18) 0%, rgba(167,139,250,0.06) 45%, transparent 75% ) !important; opacity: 0.5 !important; } /* ---------- Q8. MOBILE — shrink popups + chat-style sheet ---------- */ @media (max-width: 767px) { .fqp-box, .class-box, .rules-box { padding: 22px 18px !important; border-radius: 20px !important; width: calc(100% - 24px) !important; max-width: 100% !important; } .class-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .class-title { font-size: 20px !important; } .fqp-title { font-size: 20px !important; } .rules-title { font-size: 20px !important; } } /* === END PHASE Q === */ /* ================================================================ PHASE R — Settings folder clipping fix, EARN COINS card polish, Bitcoin Runner card, AIRDROP hero polish. Why: AUDIO/CONTROLS/GRAPHICS labels were vertically clipped by Tweakpane's default 20px folder height fighting our padding. EARN COINS and Runner cards looked flat and didn't match the chat-modal token system. AIRDROP hero needed a stronger anchor. ================================================================ */ /* --- R1. Settings: Tweakpane folder header clipping fix ------------ Tweakpane v3 sets `.tp-fldv_t { height: var(--bld-us) }` (= 20px) which clips any text taller than the height even with padding. Force min-height + line-height + box-sizing so AUDIO / CONTROLS / GRAPHICS render fully. Also tighten the chevron alignment. */ #tweakpaneSettingsMount .tp-fldv_t { height: auto !important; min-height: 40px !important; line-height: 1 !important; display: flex !important; align-items: center !important; font-size: 11px !important; font-weight: 590 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: rgba(236,236,241,0.78) !important; padding: 12px 16px !important; box-sizing: border-box !important; cursor: pointer; transition: background 150ms ease, color 150ms ease; } #tweakpaneSettingsMount .tp-fldv_t:hover { background: rgba(255,255,255,0.04) !important; color: #ececf1 !important; } /* Folder chevron (right-side arrow): make it visible at the right size */ #tweakpaneSettingsMount .tp-fldv_m, #tweakpaneSettingsMount .tp-fldv_t::after, #tweakpaneSettingsMount .tp-fldv_t::before { color: rgba(236,236,241,0.45) !important; } /* Section title (single visible "SETTINGS") — chat modal kebab style */ #settingsPanel .settings-container { background: rgba(17,17,17,0.96) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 24px !important; padding: 28px 28px 24px !important; box-shadow: 0 24px 64px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05) !important; } #settingsPanel .settings-title { font-size: 11px !important; letter-spacing: 2.6px !important; color: rgba(255,255,255,0.42) !important; text-align: center !important; margin: 0 0 22px !important; text-transform: uppercase !important; } .settings-close { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.65) !important; font-size: 18px !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; position: absolute; top: 16px; right: 16px; } .settings-close:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.16) !important; color: #ececf1 !important; } /* Folder body: add breathing room when expanded */ #tweakpaneSettingsMount .tp-fldv.tp-fldv-expanded .tp-fldv_t { border-bottom: 1px solid rgba(255,255,255,0.05) !important; } #tweakpaneSettingsMount .tp-fldv_c { padding: 12px 14px 10px !important; } /* Tweakpane native button (Rebind keys) — chat-violet pill */ #tweakpaneSettingsMount .tp-btnv_b { background: rgba(167,139,250,0.10) !important; border: 1px solid rgba(167,139,250,0.25) !important; color: #c5b3ff !important; font-weight: 590 !important; letter-spacing: 1px !important; } #tweakpaneSettingsMount .tp-btnv_b:hover { background: rgba(167,139,250,0.16) !important; border-color: rgba(167,139,250,0.4) !important; color: #ececf1 !important; } /* --- R2. EARN COINS panel: tight horizontal pill row (chat-suggestion density) Goal: feel like a deliberate task track, not a chunky bottom widget. Cards are compact horizontal pills (icon + label + coin chip) so the panel hugs the bottom and reads as a single line of CTAs. */ .menu-earn-panel { background: rgba(17,17,17,0.94) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 16px !important; padding: 10px 12px 12px !important; box-shadow: 0 10px 28px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } .menu-earn-panel .earn-title { font-size: 9px !important; font-weight: 590 !important; letter-spacing: 2.6px !important; color: rgba(236,236,241,0.42) !important; text-transform: uppercase !important; margin: 0 0 10px !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } .menu-earn-panel .earn-title::before, .menu-earn-panel .earn-title::after { content: ''; flex: 0 0 28px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); } .menu-earn-panel .mbp-earn-row { display: flex !important; gap: 6px !important; flex-wrap: nowrap !important; justify-content: center !important; } .btn-earn, .btn-earn-x, .btn-earn-follow, .btn-earn-discord, .btn-earn-invite { background: rgba(255,255,255,0.035) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 11px !important; padding: 8px 10px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; position: relative; cursor: pointer; transition: background 180ms ease, border-color 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1); } .btn-earn:hover, .btn-earn-x:hover, .btn-earn-follow:hover, .btn-earn-discord:hover, .btn-earn-invite:hover { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.14) !important; transform: translateY(-1px); } .earn-icon { width: 22px !important; height: 22px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 7px !important; background: rgba(255,255,255,0.04) !important; color: #ececf1 !important; flex: 0 0 22px !important; } .earn-icon svg { width: 13px !important; height: 13px !important; } .earn-label { font-size: 11px !important; font-weight: 590 !important; color: #ececf1 !important; letter-spacing: 0.2px !important; } .earn-reward { display: inline-flex !important; align-items: center !important; gap: 3px !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-variant-numeric: tabular-nums !important; font-size: 10px !important; font-weight: 600 !important; color: #fbbf24 !important; background: rgba(251,191,36,0.10) !important; border: 1px solid rgba(251,191,36,0.20) !important; padding: 2px 7px !important; border-radius: 999px !important; letter-spacing: 0.4px !important; } .earn-reward.earn-done { color: #4ade80 !important; background: rgba(74,222,128,0.10) !important; border-color: rgba(74,222,128,0.25) !important; } /* --- R3. Bitcoin Runner card: same chat-modal token system ------ The runner panel was a bare button. Make it look like a deliberate "module" — same surface as EARN, single orange accent for BTC. */ .menu-runner-panel { background: rgba(17,17,17,0.92) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 18px !important; padding: 4px !important; box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important; } .btn-runner-corner { background: rgba(247,147,26,0.04) !important; border: 1px solid rgba(247,147,26,0.18) !important; border-radius: 14px !important; padding: 12px 16px !important; display: flex !important; align-items: center !important; gap: 10px !important; color: #ececf1 !important; cursor: pointer; transition: background 180ms ease, border-color 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; } .btn-runner-corner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(247,147,26,0.08), transparent 60%); opacity: 0; transition: opacity 180ms ease; pointer-events: none; } .btn-runner-corner:hover { background: rgba(247,147,26,0.08) !important; border-color: rgba(247,147,26,0.32) !important; transform: translateY(-2px); } .btn-runner-corner:hover::before { opacity: 1; } .runner-corner-icon { width: 26px !important; height: 26px !important; border-radius: 50%; filter: drop-shadow(0 2px 4px rgba(247,147,26,0.4)); } .runner-corner-label { font-size: 12px !important; font-weight: 590 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; color: #ececf1 !important; } /* Tiny "PLAY" affordance pill */ .btn-runner-corner::after { content: 'PLAY'; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; font-weight: 600; letter-spacing: 1px; color: #f7931a; background: rgba(247,147,26,0.10); border: 1px solid rgba(247,147,26,0.25); padding: 3px 8px; border-radius: 999px; margin-left: 6px; transition: background 180ms ease; } .btn-runner-corner:hover::after { background: rgba(247,147,26,0.20); color: #ffb74a; } /* --- R4. AIRDROP hero anchor: stronger title + cleaner tagline --- */ .ap-hero { position: relative; padding-top: 8px !important; } .ap-title { font-size: 42px !important; letter-spacing: -0.5px !important; line-height: 1.05 !important; } .ap-tagline { font-size: 13px !important; letter-spacing: 0.4px !important; color: rgba(236,236,241,0.62) !important; margin-top: 8px !important; font-weight: 400 !important; } .ap-tagline strong { color: #4ade80 !important; font-weight: 590 !important; } /* Hero tagline gold word — accent on "$DOM" / "bag" inline */ .ap-tagline-gold { color: #fbbf24 !important; font-weight: 590 !important; } /* --- R5. Mobile EARN/Runner stacks: cards full width, taller -------- */ @media (max-width: 767px) { .menu-earn-panel { padding: 12px 10px !important; } .menu-earn-panel .mbp-earn-row { flex-wrap: wrap !important; gap: 8px !important; } .menu-earn-panel .btn-earn { flex: 1 1 calc(50% - 4px) !important; min-height: 64px !important; padding: 10px 8px !important; } .btn-runner-corner { width: 100% !important; justify-content: center !important; min-height: 56px !important; padding: 14px 18px !important; } /* Settings modal — fullscreen feel on phone */ #settingsPanel .settings-container { width: 92vw !important; max-height: 88vh !important; border-radius: 20px !important; padding: 22px 20px !important; } } /* === END PHASE R === */ /* ================================================================ PHASE S — Settings popup polish (DESIGN-chat.md modal tokens) Goal: collapsed AUDIO / CONTROLS / GRAPHICS shouldn't read as flat horizontal bars. Promote each folder to a proper suggestion-card surface with clear chevron + slim status meta + tighter rhythm. ================================================================ */ /* Container — confirmed chat-modal: rgba(17,17,17,0.95), rounded-4xl */ #settingsPanel .settings-container { background: rgba(17,17,17,0.96) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 28px !important; padding: 32px 28px 26px !important; box-shadow: 0 25px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05) !important; max-width: 480px !important; width: min(480px, 92vw) !important; } /* Title kebab — single accent, generous letter-spacing */ #settingsPanel .settings-title { font-size: 11px !important; font-weight: 590 !important; letter-spacing: 3px !important; color: rgba(236,236,241,0.45) !important; text-align: center !important; margin: 0 0 24px !important; text-transform: uppercase !important; } /* Each folder = elevated suggestion card */ #tweakpaneSettingsMount .tp-fldv { background: rgba(255,255,255,0.035) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 14px !important; margin-bottom: 10px !important; overflow: visible !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 6px 18px rgba(0,0,0,0.35) !important; transition: border-color 180ms ease, background 180ms ease; } #tweakpaneSettingsMount .tp-fldv:hover { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.14) !important; } #tweakpaneSettingsMount .tp-fldv.tp-fldv-expanded { background: rgba(255,255,255,0.045) !important; border-color: rgba(255,255,255,0.12) !important; } /* Folder header — substantial, with caret indicator. CRITICAL: line-height MUST allow ascender+descender room for the uppercase letters or "AUDIO/CONTROLS/GRAPHICS" gets clipped vertically. */ #tweakpaneSettingsMount .tp-fldv_t { height: auto !important; min-height: 52px !important; padding: 16px 44px 16px 20px !important; font-size: 12px !important; font-weight: 590 !important; letter-spacing: 2.4px !important; text-transform: uppercase !important; color: rgba(236,236,241,0.82) !important; background: transparent !important; border-bottom: none !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; cursor: pointer; position: relative !important; box-sizing: border-box !important; line-height: 1.4 !important; overflow: visible !important; white-space: nowrap !important; border-radius: 14px 14px 0 0 !important; } /* Strip Tweakpane's native chevron and replace with a clean SVG-like glyph */ #tweakpaneSettingsMount .tp-fldv_m { display: none !important; } #tweakpaneSettingsMount .tp-fldv_t::after { content: '' !important; position: absolute !important; right: 18px !important; top: 50% !important; width: 9px !important; height: 9px !important; border-right: 1.5px solid rgba(236,236,241,0.55) !important; border-bottom: 1.5px solid rgba(236,236,241,0.55) !important; transform: translateY(-70%) rotate(-45deg) !important; transition: transform 180ms ease, border-color 180ms ease !important; background: none !important; color: transparent !important; margin: 0 !important; } #tweakpaneSettingsMount .tp-fldv.tp-fldv-expanded .tp-fldv_t::after { transform: translateY(-30%) rotate(45deg) !important; border-color: #a78bfa !important; } #tweakpaneSettingsMount .tp-fldv_t:hover { background: rgba(255,255,255,0.03) !important; color: #ececf1 !important; } #tweakpaneSettingsMount .tp-fldv_t:hover::after { border-color: #ececf1 !important; } /* Body — separator stripe + comfortable padding when expanded */ #tweakpaneSettingsMount .tp-fldv.tp-fldv-expanded .tp-fldv_t { border-bottom: 1px solid rgba(255,255,255,0.06) !important; } #tweakpaneSettingsMount .tp-fldv_c { padding: 14px 18px 16px !important; } /* Slider rows — chat suggestion text rhythm */ #tweakpaneSettingsMount .tp-lblv { padding: 6px 0 !important; } #tweakpaneSettingsMount .tp-lblv_l { font-size: 12px !important; font-weight: 510 !important; color: rgba(236,236,241,0.78) !important; letter-spacing: 0.1px !important; } /* Slider track / knob — match chat violet primary */ #tweakpaneSettingsMount .tp-sldv_t { background: rgba(255,255,255,0.06) !important; border-radius: 999px !important; height: 4px !important; } #tweakpaneSettingsMount .tp-sldv_k { background: linear-gradient(180deg, #c5b3ff, #a78bfa) !important; border-radius: 999px !important; height: 4px !important; } #tweakpaneSettingsMount .tp-sldv_h { background: #ffffff !important; border: 2px solid #a78bfa !important; border-radius: 50% !important; width: 14px !important; height: 14px !important; box-shadow: 0 2px 6px rgba(167,139,250,0.35) !important; } /* Numeric value chip — JetBrains Mono tabular */ #tweakpaneSettingsMount .tp-sldtxtv_t, #tweakpaneSettingsMount .tp-txtv_i { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-variant-numeric: tabular-nums !important; font-size: 11px !important; font-weight: 600 !important; color: #ececf1 !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 6px !important; padding: 2px 6px !important; } /* Rebind keys button — chat violet pill */ #tweakpaneSettingsMount .tp-btnv_b { background: rgba(167,139,250,0.10) !important; border: 1px solid rgba(167,139,250,0.28) !important; border-radius: 10px !important; color: #c5b3ff !important; font-weight: 590 !important; font-size: 11px !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; padding: 8px 12px !important; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; } #tweakpaneSettingsMount .tp-btnv_b:hover { background: rgba(167,139,250,0.18) !important; border-color: rgba(167,139,250,0.45) !important; color: #ececf1 !important; } /* Dropdown (Graphics quality) — match chat input pattern */ #tweakpaneSettingsMount .tp-lstv_s { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 8px !important; color: #ececf1 !important; font-size: 12px !important; padding: 6px 10px !important; } #tweakpaneSettingsMount .tp-lstv_s:focus { border-color: rgba(167,139,250,0.40) !important; outline: none !important; } /* Close button — chat-modal ghost circle, brighter on hover */ .settings-close { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: rgba(236,236,241,0.7) !important; font-size: 18px !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; position: absolute !important; top: 18px !important; right: 18px !important; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; } .settings-close:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.18) !important; color: #ececf1 !important; } /* === END PHASE S === */ /* ================================================================ PHASE T — Bitcoin Runner: inline "bonus" CTA under PLAY row The corner placement read as orphaned. Now it sits inside the hero column directly under PLAY/SKINS/SETTINGS as a clear secondary feature card with BTC-orange identity. ================================================================ */ /* Hide the now-empty corner panel — keeps JS hooks alive but takes no visual space. */ .menu-runner-panel[hidden], .menu-runner-panel:empty { display: none !important; } /* The new inline runner card */ .btn-runner-inline { margin-top: 12px; width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; background: linear-gradient(135deg, rgba(247,147,26,0.06) 0%, rgba(247,147,26,0.03) 100%); border: 1px solid rgba(247,147,26,0.20); border-radius: 16px; color: #ececf1; font-family: inherit; cursor: pointer; position: relative; overflow: hidden; transition: background 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 6px 18px rgba(0,0,0,0.3); } .btn-runner-inline::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0% 50%, rgba(247,147,26,0.18) 0%, transparent 45%); opacity: 0; transition: opacity 220ms ease; pointer-events: none; } .btn-runner-inline:hover { border-color: rgba(247,147,26,0.42); background: linear-gradient(135deg, rgba(247,147,26,0.10) 0%, rgba(247,147,26,0.05) 100%); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 28px rgba(247,147,26,0.18), 0 6px 18px rgba(0,0,0,0.4); } .btn-runner-inline:hover::before { opacity: 1; } .btn-runner-inline:active { transform: translateY(0); } .btn-runner-inline .bri-leading { display: flex; align-items: center; gap: 12px; min-width: 0; } .btn-runner-inline .bri-icon { width: 32px; height: 32px; border-radius: 50%; filter: drop-shadow(0 2px 6px rgba(247,147,26,0.45)); flex: 0 0 32px; } .btn-runner-inline .bri-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; min-width: 0; } .btn-runner-inline .bri-kicker { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: #f7931a; margin-bottom: 3px; } .btn-runner-inline .bri-title { font-size: 14px; font-weight: 590; letter-spacing: 0.2px; color: #ececf1; } .btn-runner-inline .bri-cta { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #f7931a; background: rgba(247,147,26,0.10); border: 1px solid rgba(247,147,26,0.30); padding: 8px 14px; border-radius: 999px; white-space: nowrap; transition: background 200ms ease, border-color 200ms ease, color 200ms ease; } .btn-runner-inline .bri-arrow { font-size: 13px; transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1); } .btn-runner-inline:hover .bri-cta { background: rgba(247,147,26,0.18); border-color: rgba(247,147,26,0.50); color: #ffb74a; } .btn-runner-inline:hover .bri-arrow { transform: translateX(3px); } /* Mobile — keep tappable, allow text wrap if needed */ @media (max-width: 767px) { .btn-runner-inline { padding: 12px 14px; gap: 10px; } .btn-runner-inline .bri-title { font-size: 13px; } .btn-runner-inline .bri-kicker { font-size: 8px; letter-spacing: 1.4px; } .btn-runner-inline .bri-cta { font-size: 10px; padding: 7px 11px; letter-spacing: 1.2px; } } /* === END PHASE T === */ /* ================================================================ PHASE U — Wide bonus row (DESIGN.md §7 feature grid pattern) Why: home menu was overflowing vertically because every secondary widget (BTC RUNNER, EARN COINS) was stacked under the hero. DESIGN.md §7 says public-page feature grids should be 2–3 columns at 1024px+. We split the bonus row into a true 2-col grid (runner left, earn right) so the page uses horizontal width and no longer scrolls past viewport. On <=900px the grid collapses back to a single column to preserve the existing mobile flow. ================================================================ */ .menu-bonus-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; margin-top: 14px; align-items: stretch; } /* Cancel the old centered-card constraint when runner is in the grid */ .menu-bonus-row .btn-runner-inline { margin: 0; max-width: none; width: 100%; height: 100%; min-height: 84px; } /* EARN COINS card — glass surface per DESIGN.md §8 (rgba .025 bg + .08 border) */ .menu-earn-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(0, 0, 0, 0.3); transition: background 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease; } .menu-earn-card:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); } .menu-earn-card .earn-title { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: #a78bfa; /* violet kicker — matches DESIGN.md §11 primary */ margin: 0; } .menu-earn-card .mbp-earn-row { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; /* Override the old flex-row from PHASE R now that we're in a grid cell */ flex-direction: initial !important; } .menu-earn-card .btn-earn { width: 100% !important; min-width: 0 !important; flex: initial !important; } /* Tablet — keep 2-col bonus row but tighter padding */ @media (max-width: 1023px) { .menu-bonus-row { gap: 12px; } .menu-earn-card { padding: 12px 14px 14px; } } /* Below 900px — stack bonus row back to single column. Uses .menu-main-actions max-width (880px) as the breakpoint signal: below this width the runner+earn side-by-side feels cramped. */ @media (max-width: 900px) { .menu-bonus-row { grid-template-columns: 1fr; gap: 10px; } .menu-bonus-row .btn-runner-inline { min-height: 0; } } /* Mobile — earn buttons re-stack under the runner (2x2 to save height) */ @media (max-width: 480px) { .menu-earn-card .mbp-earn-row { grid-template-columns: repeat(2, 1fr); } } /* === END PHASE U === */ /* ================================================================ PHASE V — True 2-column hero (use left + right of the screen) Why: stacking everything in one centered flex column overflows vertically and wastes the wide screen. Per user request "use left and right side like voltagegpu.com home" we split the hero into: LEFT col = identity (logo + title + subtitle + BTC dom + players) RIGHT col = setup (name input + faction grid 3x2 + faction tag) FULL BAND = actions (PLAY row + bonus row stays 2-col) Implemented via CSS Grid on .menu-container so the existing markup order and JS hooks stay unchanged. Below 960px we fall back to the original single-column flex flow. ================================================================ */ @media (min-width: 960px) { #menuScreen > .menu-container { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-auto-rows: min-content; column-gap: 56px; row-gap: 12px; align-content: start; align-items: start; text-align: left; } /* LEFT column — identity (rows 1..6, packed top) */ #menuScreen > .menu-container > .vgpu-title-logo { grid-column: 1; grid-row: 1; margin: 0 0 8px; } #menuScreen > .menu-container > .game-title { grid-column: 1; grid-row: 2; font-size: clamp(48px, 5.2vw, 64px); /* down from 72 — fits half-width */ letter-spacing: -1.408px; text-align: left; } #menuScreen > .menu-container > .game-subtitle { grid-column: 1; grid-row: 3; text-align: left; margin: 4px 0 0; } #menuScreen > .menu-container > .btc-dom-inline { grid-column: 1; grid-row: 4; justify-self: start; margin: 8px 0 0; } #menuScreen > .menu-container > .players-online-inline { grid-column: 1; grid-row: 5; justify-self: start; margin: 0; } /* RIGHT column — setup Faction grid spans rows 4-5 so left col badges (btc-dom row 4, players row 5) sit naturally adjacent without inheriting the full faction-grid height as a giant gap on the left. */ #menuScreen > .menu-container > #nameInput { grid-column: 2; grid-row: 1 / 3; align-self: end; width: 100%; max-width: 100%; margin: 0; } #menuScreen > .menu-container > .faction-section-title { grid-column: 2; grid-row: 3; text-align: left; margin: 8px 0 0; } #menuScreen > .menu-container > .faction-grid { grid-column: 2; grid-row: 4 / span 2; /* spans rows 4 + 5 */ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 0; justify-content: stretch; align-self: start; } #menuScreen > .menu-container > .faction-info-bar { grid-column: 2; grid-row: 6; text-align: left; margin: 6px 0 0; } /* BOTTOM band — full-width actions (PLAY + bonus row) */ #menuScreen > .menu-container > .menu-main-actions { grid-column: 1 / -1; grid-row: 7; margin-top: 16px; justify-self: stretch; text-align: center; width: 100%; max-width: none; } /* Overlays + hidden placeholders sit at row 1 / span all so they do NOT push the grid to extra implicit rows. They keep their own position:fixed/absolute behaviour. */ #menuScreen > .menu-container > .fqp-overlay, #menuScreen > .menu-container > .class-overlay, #menuScreen > .menu-container > .rules-overlay, #menuScreen > .menu-container > .menu-earn-panel, #menuScreen > .menu-container > .menu-runner-panel { grid-column: 1 / -1; grid-row: 1; } /* The faction-info-bar default has a centered tagline — left-align it */ #menuScreen > .menu-container > .faction-info-bar .fi-tagline { text-align: left; } /* The vgpu logo block was centered via margin auto — pull it to the left edge of the column with a small visual lift to match the title. */ #menuScreen > .menu-container > .vgpu-title-logo .vgpu-title-img, #menuScreen > .menu-container > .vgpu-title-logo .vgpu-logo-ring { /* keep their existing positioning relative to the logo wrapper */ } } /* Wider screens — give the hero a touch more breathing room */ @media (min-width: 1280px) { #menuScreen > .menu-container { column-gap: 72px; } #menuScreen > .menu-container > .game-title { font-size: 68px; } } /* === END PHASE V === */ /* ============================================================ PHASE W — EARN COINS vertical stack + volume panel lift - PHASE R forced .btn-earn into flex-direction: row globally, which is cramped inside the 4-col grid in .menu-earn-card. Override to vertical column stack inside the card. - Volume panel was at bottom: 28px on >=1024px but the price ticker pinned at bottom is 34px tall → direct overlap. Lift the volume panel above the ticker. ============================================================ */ /* (a) EARN COINS buttons — vertical stack inside the card */ .menu-earn-card .mbp-earn-row .btn-earn { flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 10px 8px !important; gap: 6px !important; min-height: 76px !important; text-align: center !important; } .menu-earn-card .mbp-earn-row .btn-earn .be-icon { font-size: 18px !important; margin: 0 !important; } .menu-earn-card .mbp-earn-row .btn-earn .be-label { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; line-height: 1.15 !important; text-align: center !important; } .menu-earn-card .mbp-earn-row .btn-earn .be-reward { font-size: 10px !important; padding: 2px 8px !important; margin: 0 !important; align-self: center !important; } /* (b) Lift volume panel above the bottom-pinned ticker (34px) */ @media (min-width: 1024px) { #menuScreen > .menu-vol-panel { bottom: 52px !important; } } @media (min-width: 1280px) { #menuScreen > .menu-vol-panel { bottom: 56px !important; } } /* === END PHASE W === */ /* ================================================================ PHASE X — hero polish per user feedback (2026-05-08) - Kill ~180px top void (#menuScreen flex-centered → top-aligned) - Force faction-grid to 3x2 on desktop (PHASE V was losing to line ~7935 `repeat(6, 1fr) !important` AID v1) - Drop .menu-play-row 520px cap so actions breathe full-width - New .menu-hero-stats consolidated stat-bar (BTC Dominance | players online | Powered by VoltageGPU) - Hide legacy .menu-footer (link moved into stat-bar) ================================================================ */ /* (1) ---- Kill the giant top void on desktop ----------------------- #menuScreen at line 323 uses align-items:center which pushes the container to the vertical middle. With ~180px of unused header above the title, the hero feels lost. Top-anchor the container so padding-top alone controls spacing. */ @media (min-width: 960px) { #menuScreen { align-items: flex-start !important; } #menuScreen > .menu-container { margin: 0 auto !important; /* was margin: auto */ padding-top: 64px !important; /* tighter — vgpu-corner is fixed, not in flow */ padding-bottom: 80px !important; /* clear ticker (40px) + breathing room */ } } @media (min-width: 1280px) { #menuScreen > .menu-container { padding-top: 72px !important; } } /* (2) ---- Force 3x2 faction-grid in 2-col mode -------------------- AID-v1 forces `repeat(6, 1fr) !important` for >=768px. We need higher specificity + !important to win at >=960px. */ @media (min-width: 960px) { #menuScreen > .menu-container > .faction-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: minmax(64px, auto) !important; flex-wrap: nowrap !important; gap: 10px !important; margin: 6px 0 0 !important; width: 100% !important; } #menuScreen > .menu-container > .faction-grid > .faction-btn { aspect-ratio: auto !important; /* AID v1 forced 1/1 — drop it for 3-col */ width: 100% !important; min-height: 64px !important; } } /* (3) ---- Full-width actions band --------------------------------- .menu-play-row had max-width:520px — keep PLAY/SKINS/SETTINGS tight in single-col mode but spread to full hero width in 2-col so the bottom band balances against bonus-row below. */ @media (min-width: 960px) { #menuScreen > .menu-container > .menu-main-actions { max-width: none !important; } #menuScreen > .menu-container > .menu-main-actions .menu-play-row { max-width: none !important; width: 100% !important; display: grid !important; grid-template-columns: 1fr 1fr 2fr; /* SKINS | SETTINGS | PLAY (PLAY 2x wider) */ gap: 12px !important; align-items: stretch; } #menuScreen > .menu-container > .menu-main-actions .menu-play-row > #playBtn { flex: initial !important; width: 100% !important; min-width: 0 !important; } #menuScreen > .menu-container > .menu-main-actions .menu-play-row > .btn-skins, #menuScreen > .menu-container > .menu-main-actions .menu-play-row > .btn-settings { width: 100% !important; min-width: 0 !important; } } /* (4) ---- Consolidated stat-bar ----------------------------------- New
wraps BTC dominance + players online + Powered-by-VGPU. Renders as a horizontal pill row on desktop, wraps gracefully on mobile. Sits in left col rows 4-5 in 2-col mode — span 2 rows so left col matches right col height (faction-grid spans rows 4-5 too). */ .menu-hero-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; padding: 8px 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 999px; width: max-content; max-width: 100%; } .menu-hero-stats .btc-dom-inline, .menu-hero-stats .players-online-inline { margin: 0 !important; background: transparent !important; border: none !important; padding: 0 !important; font-size: 12px; color: var(--secondary, #a0a0b0); white-space: nowrap; } .menu-hero-stats .hero-stat-divider { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.12); } .menu-hero-stats .hero-poweredby { font-size: 11px; color: var(--tertiary, #606070); text-decoration: none; letter-spacing: 0.02em; transition: color 150ms ease; white-space: nowrap; } .menu-hero-stats .hero-poweredby:hover { color: #a78bfa; } /* In 2-col mode the stat-bar replaces both old grid items */ @media (min-width: 960px) { #menuScreen > .menu-container > .menu-hero-stats { grid-column: 1; grid-row: 4 / span 2; justify-self: start; align-self: end; /* anchor at bottom of left col */ margin: 0; } } /* Mobile: keep stat-bar as a centered chip below the subtitle */ @media (max-width: 959px) { .menu-hero-stats { margin: 12px auto 0; } } /* Hide the old legacy footer — its link is now inside the stat-bar */ .menu-footer { display: none !important; } /* === END PHASE X === */ /* ================================================================ PHASE Y — left col fill + PLAY order + width tuning (2026-05-08) - line 8134 sets #playBtn { order: 1 !important } which makes PLAY sort BEFORE SKINS(order:2) and SETTINGS(order:3) in any order-respecting layout. Override to put PLAY last. - Tighten the gap between subtitle and stat-bar (drop align-self:end) - Add .menu-value-props feature list at row 5 to fill the left col bottom void and balance against right-col faction-grid+tagline. - PLAY width 2fr → 1.6fr so SKINS/SETTINGS aren't crushed. ================================================================ */ /* (1) ---- PLAY button order — push to last position -------------- line 8134 forces order:1. Grid respects `order` property too, so we override to order:9 to land it after SKINS(2) + SETTINGS(3). */ @media (min-width: 960px) { #menuScreen .menu-main-actions .menu-play-row > #playBtn { order: 9 !important; } #menuScreen .menu-main-actions .menu-play-row > .btn-skins { order: 1 !important; } #menuScreen .menu-main-actions .menu-play-row > .btn-settings { order: 2 !important; } /* Re-tune the play-row column ratio: SKINS | SETTINGS | PLAY */ #menuScreen > .menu-container > .menu-main-actions .menu-play-row { grid-template-columns: 1fr 1fr 1.6fr !important; } } /* (2) ---- Stat-bar: collapse the 130px void ---------------------- Move stat-bar from row 4-5 align-end (floating) → row 4 normal flow, immediately under subtitle (gap ~12px). The bottom void will be filled by .menu-value-props in row 5. */ @media (min-width: 960px) { #menuScreen > .menu-container > .menu-hero-stats { grid-column: 1; grid-row: 4; grid-row-end: auto !important; /* drop the `span 2` from PHASE X */ justify-self: start; align-self: start !important; /* was: end (which created void above) */ margin: 12px 0 0; } } /* (3) ---- Value props list — fill left col bottom ---------------- Below stat-bar in row 5. 3 lines with colored dots. Subtle, monospace-ish, balances the right col without screaming. */ .menu-value-props { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .menu-value-props li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 510; color: var(--secondary, #a0a0b0); letter-spacing: 0.005em; line-height: 1.4; } .menu-value-props .vp-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .menu-value-props .vp-dot-violet { background: #a78bfa; box-shadow: 0 0 8px rgba(167, 139, 250, 0.6); } .menu-value-props .vp-dot-green { background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.6); } .menu-value-props .vp-dot-orange { background: #f7931a; box-shadow: 0 0 8px rgba(247, 147, 26, 0.5); } /* In 2-col mode — placed at row 5 in left col */ @media (min-width: 960px) { #menuScreen > .menu-container > .menu-value-props { grid-column: 1; grid-row: 5; justify-self: start; align-self: start; margin: 16px 0 0; text-align: left; } } /* Mobile: hide value-props on phones (stat-bar carries enough info, small screens shouldn't waste vertical space on prose). Show on tablet+ even in single-col fallback so 768-959px gets value too. */ @media (max-width: 767px) { .menu-value-props { display: none; } } @media (min-width: 768px) and (max-width: 959px) { .menu-value-props { margin: 16px auto 0; align-items: center; } .menu-value-props li { justify-content: center; } } /* (4) ---- Re-balance left col — drop the faction-grid 2-row span so right col rows are: input(1-2), title(3), grid(4), info-bar(5). Left col rows: logo(1), title(2), subtitle(3), stat-bar(4), props(5). Both columns now have content through row 5 → balanced heights. */ @media (min-width: 960px) { #menuScreen > .menu-container > .faction-grid { grid-row: 4 !important; /* was: 4 / span 2 */ } #menuScreen > .menu-container > .faction-info-bar { grid-row: 5 !important; /* was: 6 */ } } /* === END PHASE Y === */ /* ================================================================ PHASE Z — coherent action band (2026-05-08) - Solid violet PLAY clashes with the dark-glass SKINS/SETTINGS. Switch PLAY to glass base (same surface as SKINS/SETTINGS) + green→violet gradient veil + green primary text + animated green border-glow. Reads as the same family as its siblings, still clearly the primary CTA. - Tighten ratio 1.6fr → 1.4fr so the 3 cards feel proportional. - Match heights/padding/radius across all 3. ================================================================ */ @media (min-width: 960px) { /* Tighter ratio + ensure all 3 buttons stretch identically */ #menuScreen > .menu-container > .menu-main-actions .menu-play-row { grid-template-columns: 1fr 1fr 1.4fr !important; gap: 14px !important; } #menuScreen .menu-play-row > .btn-skins, #menuScreen .menu-play-row > .btn-settings, #menuScreen .menu-play-row > #playBtn { height: 64px !important; min-height: 64px !important; padding: 0 20px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 590 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } #menuScreen .menu-play-row > #playBtn { font-size: 16px !important; /* CTA reads slightly louder */ } } /* PLAY redesign — glass base + green primary accent, no more block violet */ @media (min-width: 960px) { #menuScreen .menu-play-row > #playBtn { background: linear-gradient( 135deg, rgba(74, 222, 128, 0.14) 0%, rgba(167, 139, 250, 0.10) 100% ), rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(74, 222, 128, 0.45) !important; color: #4ade80 !important; box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.05) inset, 0 8px 24px -12px rgba(74, 222, 128, 0.35), 0 0 32px -8px rgba(74, 222, 128, 0.25) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 150ms ease, color 200ms ease !important; text-shadow: 0 0 14px rgba(74, 222, 128, 0.35); } #menuScreen .menu-play-row > #playBtn:hover { background: linear-gradient( 135deg, rgba(74, 222, 128, 0.22) 0%, rgba(167, 139, 250, 0.16) 100% ), rgba(255, 255, 255, 0.06) !important; border-color: rgba(74, 222, 128, 0.75) !important; color: #6ee895 !important; box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.15) inset, 0 12px 32px -8px rgba(74, 222, 128, 0.55), 0 0 48px -4px rgba(74, 222, 128, 0.4) !important; transform: translateY(-1px) !important; } #menuScreen .menu-play-row > #playBtn:active { transform: translateY(0) !important; } #menuScreen .menu-play-row > #playBtn .play-icon { color: #4ade80; margin-right: 8px; font-size: 14px; } /* SKINS/SETTINGS — match the new PLAY style language (glass + subtle hover lift), keeping their neutral neutral-text identity. */ #menuScreen .menu-play-row > .btn-skins, #menuScreen .menu-play-row > .btn-settings { background: rgba(255, 255, 255, 0.035) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: rgba(240, 240, 245, 0.85) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 200ms ease, border-color 200ms ease, transform 150ms ease, color 200ms ease !important; } #menuScreen .menu-play-row > .btn-skins:hover, #menuScreen .menu-play-row > .btn-settings:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.16) !important; color: #f0f0f5 !important; } } /* === END PHASE Z === */ /* ================================================================ PHASE AA — Action band hierarchy per DESIGN.md (2026-05-08) 3 buttons in equal-ish row was wrong hierarchy. DESIGN.md §6: - Primary CTA = bold, claims space (line 217) - Ghost secondary = subtle glass (line 232) - Green live-action = rgba(74,222,128,0.12) bg (line 256) Pattern: PLAY hero full-width (btnGreen scaled up) + SKINS · SETTINGS ghost buttons compact below (44px) ================================================================ */ @media (min-width: 960px) { /* Reset PHASE Y/Z grid — switch to 2-row stack */ #menuScreen > .menu-container > .menu-main-actions .menu-play-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; grid-template-columns: none !important; width: 100% !important; max-width: 720px !important; margin: 0 auto !important; } /* PLAY — hero CTA, full-width, 72px tall, green live-action style (DESIGN.md .btnGreen scaled up for hero). Text 18px. */ #menuScreen .menu-play-row > #playBtn { order: 1 !important; width: 100% !important; height: 72px !important; min-height: 72px !important; padding: 0 28px !important; font-size: 20px !important; font-weight: 590 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; border-radius: 12px !important; background: linear-gradient( 180deg, rgba(74, 222, 128, 0.16) 0%, rgba(74, 222, 128, 0.10) 100% ), rgba(74, 222, 128, 0.04) !important; border: 1px solid rgba(74, 222, 128, 0.40) !important; color: #4ade80 !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.06) inset, 0 12px 32px -16px rgba(74, 222, 128, 0.45), 0 0 60px -12px rgba(74, 222, 128, 0.30) !important; text-shadow: 0 0 16px rgba(74, 222, 128, 0.4); transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 150ms ease, color 200ms ease !important; } #menuScreen .menu-play-row > #playBtn:hover { background: linear-gradient( 180deg, rgba(74, 222, 128, 0.24) 0%, rgba(74, 222, 128, 0.14) 100% ), rgba(74, 222, 128, 0.06) !important; border-color: rgba(74, 222, 128, 0.70) !important; color: #6ee895 !important; box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.18) inset, 0 16px 40px -10px rgba(74, 222, 128, 0.60), 0 0 80px -8px rgba(74, 222, 128, 0.45) !important; transform: translateY(-1px) !important; } #menuScreen .menu-play-row > #playBtn:active { transform: translateY(0) !important; } #menuScreen .menu-play-row > #playBtn .play-icon { color: #4ade80 !important; margin-right: 10px !important; font-size: 15px !important; } /* Sub-row wrapper — flex inline for SKINS+SETTINGS so they sit side-by-side below PLAY without wrapping. Use ::before pseudo ... actually CSS can't wrap two siblings. Use order to keep SKINS+SETTINGS together below PLAY in a flex column. */ #menuScreen .menu-play-row > .btn-skins, #menuScreen .menu-play-row > .btn-settings { height: 44px !important; min-height: 44px !important; padding: 0 18px !important; border-radius: 10px !important; font-size: 12px !important; font-weight: 510 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; color: rgba(240, 240, 245, 0.78) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: none !important; transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 150ms ease !important; flex: 1 1 auto !important; /* sits side-by-side in sub-row */ } #menuScreen .menu-play-row > .btn-skins:hover, #menuScreen .menu-play-row > .btn-settings:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #f0f0f5 !important; transform: translateY(-1px) !important; } /* Push SKINS+SETTINGS into a sub-row below PLAY. Trick: put PLAY in order:1 (top), then SKINS/SETTINGS in order:2/3 — they auto-flow under PLAY in column flex. But we want them side-by-side, not stacked. Solution: wrap them in a flex sub-band by using flex-flow with a row break. We use a ::after pseudo as a break row marker on PLAY. Easier: use 100% width row break via grid trick. Simplest: switch to flex-wrap row with PLAY 100% basis. */ #menuScreen > .menu-container > .menu-main-actions .menu-play-row { flex-direction: row !important; flex-wrap: wrap !important; } #menuScreen .menu-play-row > #playBtn { flex: 1 1 100% !important; /* PLAY = full row */ } #menuScreen .menu-play-row > .btn-skins { order: 2 !important; flex: 1 1 calc(50% - 6px) !important; /* half the row, gap-aware */ } #menuScreen .menu-play-row > .btn-settings { order: 3 !important; flex: 1 1 calc(50% - 6px) !important; } } /* === END PHASE AA === */ /* ================================================================ PHASE BB — Bonus row coherence (2026-05-08) Bitcoin Runner + EARN COINS now share the same glass language per DESIGN.md §6. Brand colors live on icons/chips ONLY, not on the card surface. Both cards land at matching heights. ================================================================ */ /* (1) ---- Bitcoin Runner — neutralize the orange-themed panel ---- Drop orange bg/border/shadow from card surface. Keep BTC orange ONLY on the icon ring + the CTA chip. Body becomes glass like EARN COINS so the two cards read as siblings. */ .menu-bonus-row .btn-runner-inline, #menuScreen .menu-bonus-row .btn-runner-inline { background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 16px 18px !important; margin: 0 !important; max-width: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 14px rgba(0, 0, 0, 0.22) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease !important; } .menu-bonus-row .btn-runner-inline::before { display: none !important; /* drop the orange radial-gradient veil */ } .menu-bonus-row .btn-runner-inline:hover, #menuScreen .menu-bonus-row .btn-runner-inline:hover { background: rgba(255, 255, 255, 0.045) !important; border-color: rgba(247, 147, 26, 0.32) !important; /* BTC hint on hover */ transform: translateY(-1px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 22px rgba(247, 147, 26, 0.14), 0 4px 14px rgba(0, 0, 0, 0.3) !important; } /* Kicker — match EARN COINS kicker style */ .menu-bonus-row .btn-runner-inline .bri-kicker { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; color: #f7931a !important; /* BTC accent for the kicker */ margin-bottom: 2px !important; } .menu-bonus-row .btn-runner-inline .bri-title { font-size: 14px !important; font-weight: 590 !important; color: #f0f0f5 !important; } /* CTA chip — small ghost pill with BTC accent (was solid orange button) */ .menu-bonus-row .btn-runner-inline .bri-cta { background: rgba(247, 147, 26, 0.12) !important; border: 1px solid rgba(247, 147, 26, 0.35) !important; color: #f7931a !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 1.4px !important; padding: 6px 12px !important; border-radius: 8px !important; text-transform: uppercase !important; flex-shrink: 0 !important; } .menu-bonus-row .btn-runner-inline:hover .bri-cta { background: rgba(247, 147, 26, 0.20) !important; border-color: rgba(247, 147, 26, 0.55) !important; } /* (2) ---- EARN COINS — harmonize to match Runner padding/title --- */ .menu-bonus-row .menu-earn-card { padding: 16px 18px !important; gap: 12px !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 14px rgba(0, 0, 0, 0.22) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .menu-bonus-row .menu-earn-card .earn-title { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 1.8px !important; color: #a78bfa !important; /* violet kicker mirrors BTC orange on Runner */ text-align: left !important; margin: 0 !important; } /* (3) ---- EARN buttons → horizontal compact pills ---------------- Was vertical-stacked (PHASE W) → tall card. Switch to horizontal pills (icon · label · reward) so card height matches Runner. 4-col grid stays, but each button is now a compact 1-line chip. */ .menu-bonus-row .menu-earn-card .mbp-earn-row { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; flex-direction: initial !important; } .menu-bonus-row .menu-earn-card .btn-earn, .menu-earn-card .mbp-earn-row .btn-earn { flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 8px 6px !important; min-height: 36px !important; height: 36px !important; border-radius: 8px !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; transition: background 150ms ease, border-color 150ms ease, transform 120ms ease !important; text-align: center !important; width: 100% !important; min-width: 0 !important; } .menu-bonus-row .menu-earn-card .btn-earn:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.14) !important; transform: translateY(-1px) !important; } .menu-bonus-row .menu-earn-card .btn-earn .earn-icon, .menu-earn-card .mbp-earn-row .btn-earn .earn-icon { font-size: 12px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; } .menu-bonus-row .menu-earn-card .btn-earn .earn-icon svg { width: 12px !important; height: 12px !important; } .menu-bonus-row .menu-earn-card .btn-earn .earn-label, .menu-earn-card .mbp-earn-row .btn-earn .earn-label { font-size: 10px !important; font-weight: 510 !important; letter-spacing: 0.02em !important; line-height: 1 !important; color: rgba(240, 240, 245, 0.85) !important; flex-shrink: 0 !important; } .menu-bonus-row .menu-earn-card .btn-earn .earn-reward, .menu-earn-card .mbp-earn-row .btn-earn .earn-reward { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 9px !important; font-weight: 600 !important; color: #f7931a !important; /* coin reward = BTC orange */ background: transparent !important; padding: 0 !important; margin: 0 !important; letter-spacing: 0 !important; align-self: center !important; flex-shrink: 0 !important; } /* (4) ---- Match card heights — let stretch fill ------------------ */ .menu-bonus-row { align-items: stretch !important; } .menu-bonus-row > .btn-runner-inline, .menu-bonus-row > .menu-earn-card { min-height: 88px !important; height: auto !important; } /* === END PHASE BB === */ /* ========================================================================== PHASE CC — Final polish per DESIGN.md 1. SKINS/SETTINGS as 56px icon-square buttons RIGHT of PLAY (PLAY dominant) 2. Width consistency: action band 1100px, matches bonus row 3. PLAY glow tightened (60/80px → 22/32px per DESIGN.md hierarchy) 4. Right col tagline pushed to bottom (kill void) 5. Top padding reduced 64→48px (kill top-right void near pills) ========================================================================== */ /* --- Action band: align to bonus row width --- */ @media (min-width: 768px) { #menuScreen .menu-main-actions { max-width: 1100px !important; width: 100% !important; padding: 0 !important; margin: 12px auto 0 !important; } /* Kill the 2-row stack from PHASE AA — back to single row */ #menuScreen .menu-main-actions .menu-play-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; max-width: none !important; width: 100% !important; margin: 0 !important; align-items: stretch !important; } /* PLAY = dominant hero, takes remaining width */ #menuScreen .menu-main-actions .menu-play-row #playBtn { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 64px !important; order: 1 !important; padding: 0 32px !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: 0.5px !important; border-radius: 12px !important; /* Tightened glow per DESIGN.md — accent on action element only */ box-shadow: 0 8px 22px -10px rgba(74, 222, 128, 0.40), 0 0 32px -8px rgba(74, 222, 128, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } /* SKINS / SETTINGS = 56px icon-square ghost buttons */ #menuScreen .menu-main-actions .menu-play-row #skinShopBtn, #menuScreen .menu-main-actions .menu-play-row #settingsBtn { flex: 0 0 56px !important; width: 56px !important; min-width: 56px !important; max-width: 56px !important; height: 64px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; font-size: 0 !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.85) !important; transition: background 200ms ease, border-color 200ms ease, transform 200ms ease !important; } #menuScreen .menu-main-actions .menu-play-row #skinShopBtn { order: 2 !important; } #menuScreen .menu-main-actions .menu-play-row #settingsBtn { order: 3 !important; } #menuScreen .menu-main-actions .menu-play-row #skinShopBtn:hover, #menuScreen .menu-main-actions .menu-play-row #settingsBtn:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.14) !important; transform: translateY(-1px) !important; } #menuScreen .menu-main-actions .menu-play-row #skinShopBtn .btn-icon, #menuScreen .menu-main-actions .menu-play-row #settingsBtn .btn-icon { font-size: 20px !important; line-height: 1 !important; display: inline-block !important; } /* Hide text label in icon-only mode */ #menuScreen .menu-main-actions .menu-play-row #skinShopBtn .btn-text, #menuScreen .menu-main-actions .menu-play-row #settingsBtn .btn-text { display: none !important; } } /* --- Right column: push faction tagline to bottom of grid (kill void) --- */ @media (min-width: 960px) { #menuScreen > .menu-container > .faction-info-bar { align-self: end !important; } } /* --- Top void reduction: tighter padding under header pills --- */ @media (min-width: 960px) { #menuScreen > .menu-container { padding-top: 48px !important; } } /* --- Mobile fallback: keep PLAY full-width, SKINS+SETTINGS row below --- */ @media (max-width: 767px) { #menuScreen .menu-main-actions .menu-play-row { flex-wrap: wrap !important; } #menuScreen .menu-main-actions .menu-play-row #playBtn { order: 1 !important; flex: 1 0 100% !important; height: 60px !important; } #menuScreen .menu-main-actions .menu-play-row #skinShopBtn { order: 2 !important; flex: 1 1 0 !important; height: 48px !important; } #menuScreen .menu-main-actions .menu-play-row #settingsBtn { order: 3 !important; flex: 1 1 0 !important; height: 48px !important; } #menuScreen .menu-main-actions .menu-play-row #skinShopBtn .btn-text, #menuScreen .menu-main-actions .menu-play-row #settingsBtn .btn-text { display: inline !important; margin-left: 6px !important; font-size: 12px !important; } #menuScreen .menu-main-actions .menu-play-row #skinShopBtn .btn-icon, #menuScreen .menu-main-actions .menu-play-row #settingsBtn .btn-icon { font-size: 16px !important; } } /* === END PHASE CC === */ /* ========================================================================== PHASE DD — Override PHASE X grid that was winning on specificity. Uses the SAME selector chain as PHASE X so cascade order resolves in PHASE DD's favour (later = wins on equal specificity). ========================================================================== */ @media (min-width: 960px) { /* (1) Action band: align width to bonus row, centered, no padding gutter */ #menuScreen > .menu-container > .menu-main-actions { max-width: 1100px !important; width: 100% !important; margin: 16px auto 0 !important; padding: 0 !important; justify-self: center !important; } /* (2) Match bonus row inside the band to the same 1100px container */ #menuScreen > .menu-container > .menu-main-actions > .menu-bonus-row { max-width: 1100px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* (3) Play row: FLEX with PLAY dominant left, SKINS/SETTINGS 56px right. Beats PHASE X grid because identical specificity + later in source. */ #menuScreen > .menu-container > .menu-main-actions .menu-play-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; grid-template-columns: none !important; gap: 12px !important; width: 100% !important; max-width: none !important; margin: 0 !important; align-items: stretch !important; justify-content: stretch !important; } /* PLAY = dominant, takes all remaining width */ #menuScreen > .menu-container > .menu-main-actions .menu-play-row > #playBtn { order: 1 !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 64px !important; padding: 0 32px !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: 0.5px !important; border-radius: 12px !important; box-shadow: 0 8px 22px -10px rgba(74, 222, 128, 0.40), 0 0 32px -8px rgba(74, 222, 128, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } /* SKINS / SETTINGS = 56×64 ghost icon squares on the right */ #menuScreen > .menu-container > .menu-main-actions .menu-play-row > #skinShopBtn, #menuScreen > .menu-container > .menu-main-actions .menu-play-row > #settingsBtn { flex: 0 0 56px !important; width: 56px !important; min-width: 56px !important; max-width: 56px !important; height: 64px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; font-size: 0 !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.85) !important; transition: background 200ms ease, border-color 200ms ease, transform 200ms ease !important; } #menuScreen > .menu-container > .menu-main-actions .menu-play-row > #skinShopBtn { order: 2 !important; } #menuScreen > .menu-container > .menu-main-actions .menu-play-row > #settingsBtn { order: 3 !important; } #menuScreen > .menu-container > .menu-main-actions .menu-play-row > #skinShopBtn:hover, #menuScreen > .menu-container > .menu-main-actions .menu-play-row > #settingsBtn:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.14) !important; transform: translateY(-1px) !important; } #menuScreen > .menu-container > .menu-main-actions .menu-play-row > #skinShopBtn .btn-icon, #menuScreen > .menu-container > .menu-main-actions .menu-play-row > #settingsBtn .btn-icon { font-size: 20px !important; line-height: 1 !important; display: inline-block !important; } #menuScreen > .menu-container > .menu-main-actions .menu-play-row > #skinShopBtn .btn-text, #menuScreen > .menu-container > .menu-main-actions .menu-play-row > #settingsBtn .btn-text { display: none !important; } /* (4) Right col tagline → push to bottom of grid (kills the void under it) */ #menuScreen > .menu-container > .faction-info-bar { align-self: end !important; margin-top: auto !important; } /* (5) Top padding tightened (kills top-right void between pills + input) */ #menuScreen > .menu-container { padding-top: 48px !important; } /* (6) Username input: tame the giant PROUTE box. Constrain height so it doesn't span 2 grid rows visually. */ #menuScreen > .menu-container > #nameInput { height: 52px !important; padding: 0 16px !important; font-size: 15px !important; align-self: start !important; grid-row: 1 !important; margin-top: 0 !important; max-width: 360px !important; justify-self: end !important; } /* Push faction section title up to row 2 since input no longer spans 1/3 */ #menuScreen > .menu-container > .faction-section-title { grid-row: 2 !important; align-self: end !important; justify-self: end !important; text-align: right !important; margin-top: 8px !important; } } /* === END PHASE DD === */ /* ========================================================================== PHASE EE — Settings modal: AUDIO / CONTROLS / GRAPHICS labels were clipped because Tweakpane's button parent `.tp-fldv_b` has a fixed height (--bld-us = 20px), and we'd only styled the inner `.tp-fldv_t` text wrapper — so the text overflowed the button and got clipped. Force the BUTTON to expand alongside the text + show overflow. ========================================================================== */ #tweakpaneSettingsMount .tp-fldv_b, #tweakpaneSettingsMount button.tp-fldv_b { height: auto !important; min-height: 52px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; border-radius: 14px 14px 0 0 !important; display: flex !important; align-items: center !important; justify-content: stretch !important; width: 100% !important; overflow: visible !important; box-sizing: border-box !important; cursor: pointer !important; position: relative !important; text-align: left !important; color: inherit !important; font: inherit !important; } #tweakpaneSettingsMount .tp-fldv_b:focus { outline: none !important; } /* Ensure the inner text wrapper fills the button cleanly with proper line-height so descenders don't get cut. */ #tweakpaneSettingsMount .tp-fldv_b > .tp-fldv_t, #tweakpaneSettingsMount .tp-fldv_t { flex: 1 1 auto !important; min-height: 52px !important; height: 52px !important; line-height: 52px !important; padding: 0 44px 0 20px !important; margin: 0 !important; font-size: 12px !important; font-weight: 590 !important; letter-spacing: 2.4px !important; text-transform: uppercase !important; color: rgba(236, 236, 241, 0.82) !important; white-space: nowrap !important; overflow: visible !important; display: block !important; background: transparent !important; text-align: left !important; box-sizing: border-box !important; } /* Make sure the folder root reveals the full button — no clipping */ #tweakpaneSettingsMount .tp-fldv, #tweakpaneSettingsMount .tp-fldv > .tp-fldv_b { overflow: visible !important; } /* Re-anchor the chevron now that line-height is 52px (was 1.4) */ #tweakpaneSettingsMount .tp-fldv_b::after, #tweakpaneSettingsMount .tp-fldv_t::after { content: '' !important; position: absolute !important; right: 18px !important; top: 50% !important; width: 9px !important; height: 9px !important; border-right: 1.5px solid rgba(236, 236, 241, 0.55) !important; border-bottom: 1.5px solid rgba(236, 236, 241, 0.55) !important; transform: translateY(-70%) rotate(-45deg) !important; transition: transform 180ms ease, border-color 180ms ease !important; background: none !important; color: transparent !important; margin: 0 !important; pointer-events: none !important; } #tweakpaneSettingsMount .tp-fldv.tp-fldv-expanded .tp-fldv_b::after, #tweakpaneSettingsMount .tp-fldv.tp-fldv-expanded .tp-fldv_t::after { transform: translateY(-30%) rotate(45deg) !important; border-color: #a78bfa !important; } /* === END PHASE EE === */ /* ========================================================================== PHASE FF — Settings modal polish per DESIGN-chat.md tokens 1. Kill Tweakpane's left indicator stripe on collapsed folders 2. Slider track/knob/value styling (rgba 0.08 track, violet fill, JetBrains Mono numerals) 3. Text input pill (mono numerals, glass bg, focus violet ring) 4. Keybind buttons (glass pill, mono key letter) 5. Row spacing + label color (#a0a0a0 secondary) Tokens: violet #a78bfa, green #4ade80, surfaces rgba(255,255,255,0.04-0.08) ========================================================================== */ /* (1) Kill Tweakpane's left indicator stripe ------------------------------- Tweakpane v3 paints a 4px left bar via `.tp-fldv::before` for the folder nesting hint. We've already promoted folders to suggestion cards, so the stripe just reads as visual noise on a flat list. */ #tweakpaneSettingsMount .tp-fldv::before, #tweakpaneSettingsMount .tp-fldv::after, #tweakpaneSettingsMount .tp-rotv_c::before, #tweakpaneSettingsMount .tp-cntr::before { display: none !important; content: none !important; } /* Force any default left padding/border set by Tweakpane to zero so the text label aligns flush with our card padding. */ #tweakpaneSettingsMount .tp-fldv, #tweakpaneSettingsMount .tp-fldv > .tp-fldv_b { border-left: none !important; background-image: none !important; } #tweakpaneSettingsMount .tp-fldv_c { padding-left: 0 !important; border-left: none !important; background-image: none !important; } /* (2) Sliders — track + knob per DESIGN-chat.md ---------------------------- Track: 4px tall, rgba 0.08 surface, 999px radius Fill: violet #a78bfa Knob: 14px circle, white-ish with shadow */ #tweakpaneSettingsMount .tp-sldv, #tweakpaneSettingsMount .tp-sldtxtv_s { background: transparent !important; height: 18px !important; display: flex !important; align-items: center !important; } #tweakpaneSettingsMount .tp-sldv_t, #tweakpaneSettingsMount .tp-sldtxtv_s .tp-sldv_t { height: 4px !important; background: rgba(255, 255, 255, 0.08) !important; border-radius: 999px !important; border: none !important; position: relative !important; overflow: visible !important; } /* Filled portion (Tweakpane uses ::before or _v inner element) */ #tweakpaneSettingsMount .tp-sldv_v, #tweakpaneSettingsMount .tp-sldv_t::before { background: linear-gradient(90deg, #a78bfa 0%, #c4b5fd 100%) !important; border-radius: 999px !important; height: 100% !important; box-shadow: 0 0 8px -2px rgba(167, 139, 250, 0.45) !important; } /* Knob */ #tweakpaneSettingsMount .tp-sldv_k { width: 14px !important; height: 14px !important; border-radius: 50% !important; background: #ececf1 !important; border: 2px solid #a78bfa !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(167, 139, 250, 0.0) !important; transition: box-shadow 150ms ease, transform 150ms ease !important; cursor: pointer !important; } #tweakpaneSettingsMount .tp-sldv_k:hover { transform: scale(1.1) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(167, 139, 250, 0.20) !important; } /* (3) Number input on the right of slider — glass pill, mono numerals -----*/ #tweakpaneSettingsMount .tp-txtv, #tweakpaneSettingsMount .tp-txtv_i, #tweakpaneSettingsMount .tp-sldtxtv_t .tp-txtv_i { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; color: #ececf1 !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 12px !important; font-weight: 500 !important; padding: 6px 10px !important; height: 30px !important; text-align: right !important; outline: none !important; transition: border-color 150ms ease, background 150ms ease !important; } #tweakpaneSettingsMount .tp-txtv_i:focus, #tweakpaneSettingsMount .tp-sldtxtv_t .tp-txtv_i:focus { border-color: rgba(167, 139, 250, 0.40) !important; background: rgba(255, 255, 255, 0.06) !important; } /* Number text container alignment */ #tweakpaneSettingsMount .tp-sldtxtv { display: grid !important; grid-template-columns: 1fr 70px !important; gap: 12px !important; align-items: center !important; } /* (4) Row layout — label left, control right, comfortable rhythm ---------- */ #tweakpaneSettingsMount .tp-lblv { padding: 10px 18px !important; display: grid !important; grid-template-columns: 110px 1fr !important; gap: 14px !important; align-items: center !important; } #tweakpaneSettingsMount .tp-lblv_l { color: #a0a0a0 !important; font-size: 13px !important; font-weight: 510 !important; letter-spacing: 0.1px !important; text-transform: none !important; white-space: nowrap !important; } #tweakpaneSettingsMount .tp-lblv_v { min-width: 0 !important; } /* (5) Inner padding around expanded folder content */ #tweakpaneSettingsMount .tp-fldv.tp-fldv-expanded > .tp-fldv_c { padding: 8px 4px 14px !important; background: transparent !important; } /* (6) Select dropdown (Quality picker in GRAPHICS) — match input pill */ #tweakpaneSettingsMount .tp-lstv, #tweakpaneSettingsMount .tp-lstv_s { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; color: #ececf1 !important; font-size: 13px !important; height: 30px !important; padding: 0 12px !important; outline: none !important; cursor: pointer !important; transition: border-color 150ms ease, background 150ms ease !important; } #tweakpaneSettingsMount .tp-lstv_s:hover, #tweakpaneSettingsMount .tp-lstv:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.14) !important; } #tweakpaneSettingsMount .tp-lstv_s:focus { border-color: rgba(167, 139, 250, 0.40) !important; } /* (7) Keybind row buttons (W / S / A / D / SHIFT etc.) — mono key chip The keybind area is rendered outside Tweakpane in `.keybind-btn`. Make them feel like physical key caps. */ #settingsPanel .keybind-btn { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-bottom: 2px solid rgba(255, 255, 255, 0.06) !important; border-radius: 6px !important; color: #ececf1 !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.4px !important; padding: 6px 12px !important; min-width: 44px !important; height: 30px !important; text-align: center !important; cursor: pointer !important; transition: all 150ms ease !important; } #settingsPanel .keybind-btn:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(167, 139, 250, 0.30) !important; } #settingsPanel .keybind-btn.listening { background: rgba(167, 139, 250, 0.12) !important; border-color: #a78bfa !important; color: #c4b5fd !important; } /* === END PHASE FF === */ /* ========================================================================== PHASE GG — Settings: full Tweakpane CSS-var reset + clean layout Root cause of remaining issues: - The "left bars" were Tweakpane's default container backgrounds painted via `--tp-container-background-color` on .tp-fldv_b (button), creating a darker stripe that doesn't blend with our card surface. - The "double pill" on Controls keys was .tp-txtv (outer wrapper) + .tp-txtv_i (inner input) BOTH styled as glass pills. - The audio sliders showed only knob+number because the track inner element name in Tweakpane v3 differs (.tp-sldv_b not .tp-sldv_t). Strategy: override Tweakpane CSS variables at the mount root, then add minimal targeted rules for the few elements that need brand polish. ========================================================================== */ /* (1) ---- Override Tweakpane CSS vars per DESIGN-chat.md tokens --------- */ #tweakpaneSettingsMount { --tp-base-background-color: transparent; --tp-base-shadow-color: transparent; --tp-button-background-color: rgba(255, 255, 255, 0.04); --tp-button-background-color-active: rgba(167, 139, 250, 0.18); --tp-button-background-color-focus: rgba(167, 139, 250, 0.12); --tp-button-background-color-hover: rgba(255, 255, 255, 0.07); --tp-button-foreground-color: #ececf1; --tp-container-background-color: transparent; --tp-container-background-color-active: rgba(255, 255, 255, 0.06); --tp-container-background-color-focus: rgba(255, 255, 255, 0.05); --tp-container-background-color-hover: rgba(255, 255, 255, 0.04); --tp-container-foreground-color: #ececf1; --tp-groove-foreground-color: rgba(255, 255, 255, 0.10); --tp-input-background-color: rgba(255, 255, 255, 0.04); --tp-input-background-color-active: rgba(167, 139, 250, 0.10); --tp-input-background-color-focus: rgba(167, 139, 250, 0.08); --tp-input-background-color-hover: rgba(255, 255, 255, 0.06); --tp-input-foreground-color: #ececf1; --tp-label-foreground-color: #a0a0a0; --tp-monitor-background-color: rgba(255, 255, 255, 0.04); --tp-monitor-foreground-color: #a0a0a0; background: transparent !important; font-family: 'Inter Variable', system-ui, sans-serif; } /* (2) ---- Reset the inner Tweakpane wrappers — no extra backgrounds ----- */ #tweakpaneSettingsMount .tp-rotv, #tweakpaneSettingsMount .tp-rotv_c, #tweakpaneSettingsMount .tp-cntr, #tweakpaneSettingsMount .tp-fldv_c { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } /* The outer .tp-fldv root is our suggestion-card surface. PHASE EE/S already styles it; we keep it but kill any leftover stripe. */ #tweakpaneSettingsMount .tp-fldv { background-image: none !important; border-left: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(0, 0, 0, 0.35) !important; } /* (3) ---- Sliders: visible track, violet fill, clean knob --------------- */ #tweakpaneSettingsMount .tp-sldv { height: 16px !important; display: flex !important; align-items: center !important; background: transparent !important; cursor: pointer !important; position: relative !important; } /* Tweakpane v3 paints the track with .tp-sldv_b (background bar). Older builds used .tp-sldv_t. We target both. */ #tweakpaneSettingsMount .tp-sldv_b, #tweakpaneSettingsMount .tp-sldv_t { height: 4px !important; background: rgba(255, 255, 255, 0.10) !important; border-radius: 999px !important; border: none !important; width: 100% !important; position: relative !important; overflow: visible !important; } /* Filled portion. Tweakpane v3 uses .tp-sldv_v (value bar) inside _b. */ #tweakpaneSettingsMount .tp-sldv_v { background: linear-gradient(90deg, #a78bfa 0%, #c4b5fd 100%) !important; border-radius: 999px !important; height: 4px !important; box-shadow: 0 0 8px -2px rgba(167, 139, 250, 0.55) !important; } /* Knob (the draggable circle). */ #tweakpaneSettingsMount .tp-sldv_k { width: 14px !important; height: 14px !important; border-radius: 50% !important; background: #ffffff !important; border: 2px solid #a78bfa !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important; cursor: grab !important; transition: transform 150ms ease, box-shadow 150ms ease !important; position: absolute !important; top: 50% !important; transform: translate(-50%, -50%) !important; } #tweakpaneSettingsMount .tp-sldv_k:hover, #tweakpaneSettingsMount .tp-sldv:hover .tp-sldv_k { transform: translate(-50%, -50%) scale(1.15) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(167, 139, 250, 0.18) !important; } /* Composite slider+text layout — slider takes most of the room, value pill on right */ #tweakpaneSettingsMount .tp-sldtxtv { display: grid !important; grid-template-columns: 1fr 60px !important; gap: 12px !important; align-items: center !important; } #tweakpaneSettingsMount .tp-sldtxtv_s { width: 100% !important; display: block !important; background: transparent !important; } #tweakpaneSettingsMount .tp-sldtxtv_t { display: block !important; } /* (4) ---- Number/text input pill — single layer, no double pill -------- */ /* The OUTER wrapper .tp-txtv: transparent, no border (it was the outer pill) */ #tweakpaneSettingsMount .tp-txtv { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; height: auto !important; box-shadow: none !important; display: block !important; } /* The INNER input .tp-txtv_i is the visible glass pill */ #tweakpaneSettingsMount .tp-txtv_i { width: 100% !important; height: 30px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 8px !important; color: #ececf1 !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 12px !important; font-weight: 500 !important; padding: 0 10px !important; text-align: center !important; outline: none !important; box-shadow: none !important; transition: border-color 150ms ease, background 150ms ease !important; } #tweakpaneSettingsMount .tp-txtv_i:focus { border-color: rgba(167, 139, 250, 0.40) !important; background: rgba(255, 255, 255, 0.06) !important; } #tweakpaneSettingsMount .tp-txtv_i:hover { border-color: rgba(255, 255, 255, 0.18) !important; } /* For READ-ONLY inputs (Controls keys), make them feel like keycaps */ #tweakpaneSettingsMount .tp-txtv_i[readonly], #tweakpaneSettingsMount .tp-txtv_i:read-only { background: rgba(255, 255, 255, 0.05) !important; border-bottom: 2px solid rgba(255, 255, 255, 0.04) !important; cursor: default !important; font-weight: 600 !important; letter-spacing: 0.5px !important; color: #ececf1 !important; text-transform: uppercase !important; } /* (5) ---- Row layout — label left (110px), control right (rest) -------- */ #tweakpaneSettingsMount .tp-lblv { display: grid !important; grid-template-columns: 110px 1fr !important; gap: 14px !important; align-items: center !important; padding: 8px 18px !important; background: transparent !important; } #tweakpaneSettingsMount .tp-lblv_l { color: #a0a0a0 !important; font-size: 13px !important; font-weight: 510 !important; letter-spacing: 0.1px !important; text-transform: none !important; white-space: nowrap !important; font-family: 'Inter Variable', system-ui, sans-serif !important; } #tweakpaneSettingsMount .tp-lblv_v { min-width: 0 !important; } /* (6) ---- Folder content padding when expanded ------------------------ */ #tweakpaneSettingsMount .tp-fldv.tp-fldv-expanded > .tp-fldv_c { padding: 6px 0 12px !important; } /* (7) ---- Select dropdown (Quality) — match input pill ---------------- */ #tweakpaneSettingsMount .tp-lstv { background: transparent !important; border: none !important; padding: 0 !important; } #tweakpaneSettingsMount .tp-lstv_s { width: 100% !important; height: 30px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 8px !important; color: #ececf1 !important; font-family: 'Inter Variable', system-ui, sans-serif !important; font-size: 13px !important; padding: 0 12px !important; outline: none !important; cursor: pointer !important; transition: border-color 150ms ease, background 150ms ease !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; } #tweakpaneSettingsMount .tp-lstv_m { color: rgba(236, 236, 241, 0.55) !important; } #tweakpaneSettingsMount .tp-lstv_s:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.18) !important; } #tweakpaneSettingsMount .tp-lstv_s:focus { border-color: rgba(167, 139, 250, 0.40) !important; } /* (8) ---- "Rebind keys" button — primary CTA per DESIGN-chat ---------- */ #tweakpaneSettingsMount .tp-btnv { padding: 8px 18px !important; background: transparent !important; border: none !important; } #tweakpaneSettingsMount .tp-btnv_b { width: 100% !important; height: 36px !important; background: rgba(167, 139, 250, 0.12) !important; border: 1px solid rgba(167, 139, 250, 0.30) !important; border-radius: 8px !important; color: #c4b5fd !important; font-family: 'Inter Variable', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 590 !important; letter-spacing: 0.5px !important; cursor: pointer !important; transition: background 150ms ease, border-color 150ms ease, transform 150ms ease !important; } #tweakpaneSettingsMount .tp-btnv_b:hover { background: rgba(167, 139, 250, 0.20) !important; border-color: rgba(167, 139, 250, 0.50) !important; transform: translateY(-1px) !important; } /* (9) ---- Hide the legacy .settings-section blocks completely --------- settings-tweakpane.js sets style.display='none' on them at boot, but they remain in DOM and one of them might leak through styling. Belt-and-braces: any .settings-section inside #settingsPanel that is NOT the Tweakpane mount stays hidden unless the rebind escape hatch restores it. */ #settingsPanel .settings-container > .settings-section { display: none; } #settingsPanel .settings-container > .settings-section[style*="display: block"], #settingsPanel .settings-container > .settings-section[style*="display:block"], #settingsPanel .settings-container > .settings-section[style*="display: "] { display: revert; } /* === END PHASE GG === */ /* ========================================================================== PHASE HH — Settings polish round 3 1. Keycap chips compact + right-aligned (no more huge empty pill) 2. REBIND KEYS button no longer truncated (white-space + flex centering) 3. Quality dropdown