/* ========================================================= ECODEXGAME — shared design system Display: 'Sora' / Body: 'Inter' / Mono-data: 'JetBrains Mono' Palette — dark navy casino theme with vivid purple/blue/pink gradient accents (single fixed theme) ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); :root { --bg: #0a0e1c; --bg-alt: #0d1226; --panel: #131a30; --panel-2: #1a2340; --border: #262f52; --text: #f0f2fb; --text-dim: #a8b0d4; --text-faint: #6b74a0; --accent: #7c5cff; --accent-2: #4f8cff; --accent-3: #ffb648; --danger: #ff4d6d; --success: #2de8a3; --warn: #ffb648; --shadow: 0 10px 34px rgba(0,0,0,.55); --radius: 16px; --grad: linear-gradient(135deg, #7c5cff, #4f8cff); --grad-pink: linear-gradient(135deg, #ff4d9e, #7c5cff); --grad-gold: linear-gradient(135deg, #ffb648, #ff8a3d); } * { box-sizing: border-box; } .btn-spinner { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: btnSpin .65s linear infinite; vertical-align: -2px; margin-right: 2px; } @keyframes btnSpin { to { transform: rotate(360deg); } } /* ---------- mobile tap feedback ---------- */ /* Removes the browser's default gray/blue "hitbox" flash on tap across the whole site. Buttons and clickable text look and behave exactly like normal — no color or brightness change on tap. */ html, body { -webkit-tap-highlight-color: transparent; } button, .btn, a, .nav-item, .nav-wallet-balance, .settings-textlink, .settings-link-row, .game-card, .item-card, .chat-thread-item, .friend-search-result, .gc-title, [onclick], input[type="checkbox"], input[type="radio"], .checkline, .subtab-btn { -webkit-tap-highlight-color: transparent; outline: none; } html { background: #0a0e1c; } html, body { height: 100%; overflow-x: hidden; scroll-behavior: smooth; } body { margin: 0; background: transparent; color: var(--text); font-family: 'Inter', system-ui, sans-serif; transition: background .3s ease, color .3s ease; -webkit-font-smoothing: antialiased; position: relative; } /* Text on the client-facing site/app can't be selected or copied anywhere except actual input fields — those keep normal selection so typing, editing, and copying a value the client typed still works completely normally. Scoped to a class (added to on client-facing pages only, not the admin panel) rather than applied globally, since admin regularly needs to copy account IDs, codes, and other client details for their own work. */ body.no-copy { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; } body.no-copy input, body.no-copy textarea, body.no-copy select, body.no-copy [contenteditable="true"] { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; -webkit-touch-callout: default; } /* All real content sits above the ambient layer. */ .sidebar, .main, .signin-shell, .auth-wrap, .modal-overlay { position: relative; z-index: 1; } h1, h2, h3, h4, .display { font-family: 'Sora', sans-serif; letter-spacing: -.01em; } .mono { font-family: 'JetBrains Mono', monospace; } a { color: var(--accent); } ::selection { background: var(--accent); color: #fff; } /* ---------- ambient animated background v3 ("Aurora Pulse") ---------- */ /* Single living background layer mounted behind every page by app.js — drifting aurora glows, a pulsing hex-lined grid, a diagonal light sweep, a continuously scrolling market-ticker line, and rising diamond glints. Replaces the older v2 grid/ribbon/constellation background (and the separate legacy #ambientBgLayer mesh, which used to render underneath it as an unintentional duplicate — now there's exactly one layer). */ .ambient-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: var(--bg); } .ambient-aurora { position: absolute; inset: -30%; filter: blur(70px); } .ambient-aurora span { position: absolute; border-radius: 50%; opacity: .65; mix-blend-mode: screen; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } .ambient-aurora .a1 { top: -8%; left: -10%; width: 60%; height: 38%; background: radial-gradient(ellipse, rgba(124,92,255,.6), transparent 72%); animation-name: auroraDrift1; animation-duration: 24s; } .ambient-aurora .a2 { top: -14%; right: -12%; width: 55%; height: 42%; background: radial-gradient(ellipse, rgba(79,140,255,.5), transparent 72%); animation-name: auroraDrift2; animation-duration: 29s; animation-delay: -6s; } .ambient-aurora .a3 { bottom: -20%; left: 20%; width: 62%; height: 36%; background: radial-gradient(ellipse, rgba(255,182,72,.32), transparent 72%); animation-name: auroraDrift3; animation-duration: 33s; animation-delay: -13s; } .ambient-aurora .a4 { top: 30%; left: -14%; width: 48%; height: 30%; background: radial-gradient(ellipse, rgba(45,232,163,.28), transparent 72%); animation-name: auroraDrift1; animation-duration: 38s; animation-delay: -20s; } .ambient-aurora .a5 { bottom: 8%; right: -16%; width: 50%; height: 33%; background: radial-gradient(ellipse, rgba(255,77,158,.24), transparent 72%); animation-name: auroraDrift2; animation-duration: 42s; animation-delay: -9s; } .ambient-aurora-2 { position: absolute; inset: -30%; filter: blur(80px); opacity: .5; animation: auroraCounter 60s linear infinite; } .ambient-aurora-2 span { position: absolute; border-radius: 50%; mix-blend-mode: screen; } .ambient-aurora-2 .b1 { top: 10%; left: 30%; width: 40%; height: 25%; background: radial-gradient(ellipse, rgba(124,92,255,.22), transparent 75%); } .ambient-aurora-2 .b2 { bottom: 12%; left: 5%; width: 38%; height: 24%; background: radial-gradient(ellipse, rgba(79,140,255,.2), transparent 75%); } @keyframes auroraDrift1 { 0% { transform: translate(0,0) scale(1) rotate(0deg) skewX(0deg); } 33% { transform: translate(7%,-6%) scale(1.15) rotate(6deg) skewX(3deg); } 66% { transform: translate(-4%,4%) scale(0.95) rotate(-4deg) skewX(-2deg); } 100% { transform: translate(3%,-3%) scale(1.08) rotate(3deg) skewX(1deg); } } @keyframes auroraDrift2 { 0% { transform: translate(0,0) scale(1) rotate(0deg) skewY(0deg); } 40% { transform: translate(-6%,5%) scale(1.12) rotate(-7deg) skewY(2deg); } 70% { transform: translate(5%,-4%) scale(0.92) rotate(5deg) skewY(-3deg); } 100% { transform: translate(-3%,3%) scale(1.05) rotate(-2deg) skewY(1deg); } } @keyframes auroraDrift3 { 0% { transform: translate(0,0) scale(1) rotate(0deg); } 50% { transform: translate(6%,-5%) scale(1.16) rotate(8deg); } 100% { transform: translate(-5%,6%) scale(1.05) rotate(-6deg); } } @keyframes auroraCounter { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .ambient-hexgrid { position: absolute; inset: 0; background-image: linear-gradient(30deg, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(150deg, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 56px 98px; mask-image: radial-gradient(ellipse 75% 65% at 50% 22%, #000 35%, transparent 88%); animation: hexPulse 8s ease-in-out infinite; } @keyframes hexPulse { 0%, 100% { opacity: .35; } 50% { opacity: .65; } } .ambient-orbitals { position: absolute; inset: 0; } .ambient-orbit-ring { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; animation: orbitSpin linear infinite; } .ambient-orbit-ring .dot { position: absolute; top: 0; left: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%,-50%); } .ambient-orbit-ring.r1 { top: -8%; left: -12%; animation-duration: 46s; } .ambient-orbit-ring.r1 .dot { background: var(--accent,#7c5cff); box-shadow: 0 0 14px 3px var(--accent,#7c5cff); } .ambient-orbit-ring.r2 { bottom: -14%; right: -10%; width: 38vmax; height: 38vmax; animation-duration: 62s; animation-direction: reverse; } .ambient-orbit-ring.r2 .dot { background: var(--accent-2,#4f8cff); box-shadow: 0 0 12px 3px var(--accent-2,#4f8cff); width: 6px; height: 6px; } .ambient-orbit-ring.r3 { top: 30%; right: -18%; width: 30vmax; height: 30vmax; animation-duration: 38s; } .ambient-orbit-ring.r3 .dot { background: var(--accent-3,#ffb648); box-shadow: 0 0 10px 3px var(--accent-3,#ffb648); width: 5px; height: 5px; } @keyframes orbitSpin { to { transform: rotate(360deg); } } @media (max-width: 640px) { .ambient-orbit-ring.r2 { display: none; } } .ambient-growth { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; display: flex; align-items: flex-end; gap: clamp(10px, 2.2vw, 26px); padding: 0 6%; opacity: .5; mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%); -webkit-mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%); } .ambient-bar { position: relative; flex: 1 1 0; min-width: 4px; max-width: 46px; border-radius: 5px 5px 0 0; background: linear-gradient(to top, var(--bar-c1, var(--accent)), var(--bar-c2, var(--accent-2)) 70%, transparent); filter: drop-shadow(0 0 10px var(--bar-glow, rgba(124,92,255,.35))); transform-origin: bottom; animation-name: barGrow; animation-timing-function: cubic-bezier(.45,0,.2,1); animation-iteration-count: infinite; } @keyframes barGrow { 0%, 100% { transform: scaleY(var(--h-lo, .35)); opacity: .55; } 50% { transform: scaleY(var(--h-hi, 1)); opacity: .85; } } .ambient-glints { position: absolute; inset: 0; overflow: hidden; } .ambient-glint { position: absolute; border-radius: 50%; background: radial-gradient(circle, currentColor 0%, currentColor 35%, transparent 75%); opacity: 0; transform: scale(.3); filter: blur(.2px) drop-shadow(0 0 6px currentColor); animation-name: glintTwinkle; animation-timing-function: ease-in-out; animation-iteration-count: infinite; will-change: transform, opacity; } @keyframes glintTwinkle { 0%, 100% { opacity: 0; transform: translate(0, 0) scale(.3); } 50% { opacity: var(--peak-op, .6); transform: translate(var(--driftx, 0px), var(--drifty, 0px)) scale(1); } } /* ---------- layout shells ---------- */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .auth-card { width: 100%; max-width: 460px; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--border); border-radius: 20px; padding: 40px 36px; box-shadow: var(--shadow); animation: rise .5s cubic-bezier(.2,.8,.2,1); position: relative; overflow: hidden; } .auth-card::before { content: ''; position: absolute; inset: -2px -2px auto -2px; height: 3px; background: var(--grad); } .auth-card.wide { max-width: 640px; } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; } .brand .mark { width: 42px; height: 42px; border-radius: 12px; background: var(--grad); display: grid; place-items: center; font-family: 'Sora'; font-weight: 800; color: #fff; box-shadow: 0 0 0 4px rgba(45,212,191,.12); } .brand .name { font-family: 'Sora'; font-weight: 700; font-size: 20px; } .brand .name-logo { height: 34px; width: auto; display: block; } span.name-logo { height: auto; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.2px; } .brand .sub { font-size: 11px; color: var(--text-faint); letter-spacing: .12em; text-transform: uppercase; } /* ---------- forms ---------- */ .field { margin-bottom: 18px; } .field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 7px; letter-spacing: .02em; } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pw-field-wrap { position: relative; } .pw-requirements { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .pw-req { font-size: 12px; color: var(--text-faint); display: flex; align-items: center; gap: 6px; transition: color .15s; } .pw-req.met { color: var(--success, #2dd4bf); } .pw-req-ic { display: inline-block; width: 14px; text-align: center; font-size: 12px; } .pw-field-wrap input { padding-right: 44px; width: 100%; box-sizing: border-box; } .pw-toggle-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 8px; font-size: 15px; color: var(--text-faint); line-height: 1; } .pw-toggle-btn:hover { color: var(--text); } .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .mult-key-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 10px 12px; background: var(--bg-alt); border-radius: 10px; } .mult-key-checks label { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; } .mult-key-checks input[type=checkbox] { width: 16px; height: 16px; margin: 0; } input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], input[type=file], select, textarea { width: 100%; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text); padding: 12px 14px; border-radius: 10px; font-size: 14.5px; font-family: inherit; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; } textarea { resize: vertical; min-height: 90px; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45,212,191,.15); } input:disabled, input[readonly] { opacity: .65; cursor: not-allowed; } input[type=file] { padding: 9px; cursor: pointer; } .checkline { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-dim); } .checkline input { width: auto; } .slide-captcha { position: relative; width: 100%; height: 46px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; user-select: none; } .slide-captcha-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(124,92,255,.35), rgba(79,216,240,.35)); transition: width .05s linear; } .slide-captcha.verified .slide-captcha-fill { background: linear-gradient(90deg, rgba(46,196,120,.4), rgba(79,216,240,.35)); } .slide-captcha-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600; color: var(--text-dim); pointer-events: none; letter-spacing: .2px; } .slide-captcha.verified .slide-captcha-label { color: var(--success); } .slide-captcha-handle { position: absolute; left: 0; top: 3px; width: 40px; height: 40px; border-radius: 8px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,.3); transition: left .05s linear, background .2s ease; } .slide-captcha-handle.grabbing { cursor: grabbing; transition: none; } .slide-captcha.verified .slide-captcha-handle { background: var(--success); } .hint { font-size: 12px; color: var(--text-faint); margin-top: 6px; } .field-inline-btn { display: flex; gap: 8px; } .field-inline-btn input { flex: 1; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 30px; padding: 12px 20px; font-weight: 600; font-size: 14px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .15s; font-family: inherit; } .btn:active { transform: scale(.97); } .btn-primary { background: var(--grad); color: #fff; box-shadow: 0 6px 20px rgba(124,92,255,.35); position: relative; overflow: hidden; } .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 9px 26px rgba(124,92,255,.45); } .btn-primary::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), transparent 55%); transition: opacity .3s; pointer-events: none; } .btn-primary:hover::after { opacity: 1; } /* Balance number count-up — flashes briefly on change so a win, purchase, or reward is visually confirmed, not just silently updated. */ @keyframes numFlashUp { 0% { color: #2fbf71; text-shadow: 0 0 12px rgba(47,191,113,.7); } 100% { color: inherit; text-shadow: none; } } @keyframes numFlashDown { 0% { color: var(--danger); text-shadow: 0 0 12px rgba(255,77,109,.6); } 100% { color: inherit; text-shadow: none; } } .num-flash-up { animation: numFlashUp .6s ease-out; } .num-flash-down { animation: numFlashDown .6s ease-out; } /* Interactive cards get a gentle lift on hover instead of sitting flat — makes the whole interface feel more responsive to the cursor. */ .pkg-card, .panel { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } /* Input focus gets a soft glow instead of an abrupt outline. */ input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=date]:focus, input[type=time]:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,92,255,.18); transition: box-shadow .18s ease, border-color .18s ease; } /* Sidebar nav — active item gets a soft sliding highlight instead of just a flat color swap. */ .nav-item:active { transform: scale(.98); } .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-danger { background: rgba(255,77,109,.15); color: var(--danger); border: 1px solid rgba(255,77,109,.35); } .btn-danger:hover { background: rgba(255,77,109,.25); } .btn-success { background: rgba(45,232,163,.15); color: var(--success); border: 1px solid rgba(45,232,163,.35); } .btn-success:hover { background: rgba(45,232,163,.25); } .btn-sm { padding: 7px 14px; font-size: 12.5px; border-radius: 20px; } .btn-block { width: 100%; } .btn:disabled { opacity: .45; cursor: not-allowed; } .error-box { background: rgba(255,77,109,.12); border: 1px solid rgba(255,77,109,.3); color: #ffb0c0; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px; display: none; } .error-box.show { display: block; animation: shake .3s; } @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} } /* Same look as .error-box.show but without the shake — for persistent status messages that get redrawn every render cycle (like "no payment method set yet"). Using the animated variant there made it visibly re-shake every few seconds as the page re-renders. */ .warning-box-static { background: rgba(255,77,109,.12); border: 1px solid rgba(255,77,109,.3); color: #ffb0c0; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px; display: block; } .divider { display:flex; align-items:center; gap:10px; color:var(--text-faint); font-size:12px; margin: 22px 0; } .divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--border); } /* ---------- dashboard shell ---------- */ .shell { min-height: 100vh; display: flex; } .sidebar { background: rgba(19,26,48,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-right: 1px solid var(--border); border-bottom: none; padding: 22px 16px; display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 6px; position: sticky; top: 0; left: 0; width: 250px; height: 100vh; flex-shrink: 0; z-index: 900; box-shadow: var(--shadow); overflow-y: auto; overflow-x: hidden; transition: filter .2s ease; } .sidebar.blurred { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease; } .sidebar .brand { margin-bottom: 8px; padding: 0; flex-shrink: 0; } /* Vertical stack of primary tabs — was a horizontally-scrolling strip when the sidebar was a top bar; now a normal column list. */ .nav-scroll { margin-top: 6px; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 4px; flex: 1; min-width: 0; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-scroll::-webkit-scrollbar { display: none; } .sidebar-promo-box { margin-top: auto; flex-shrink: 0; padding: 16px; border-radius: 14px; background: linear-gradient(160deg, rgba(124,92,255,.16), rgba(124,92,255,.04)); border: 1px solid rgba(124,92,255,.3); } .sidebar-promo-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .sidebar-promo-sub { font-size: 11.5px; color: var(--text-faint); line-height: 1.4; } /* Utility cluster (Wallet / Friends / Settings) — pinned at the end of the bar, icon-only, visually separated from the scrollable tab strip. */ .nav-utility { display: flex; flex-wrap: nowrap; gap: 4px; flex-shrink: 0; padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--border); } .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--text-dim); cursor: pointer; font-size: 13.5px; font-weight: 500; margin-bottom: 0; transition: background .15s, color .15s, transform .12s ease; position: relative; user-select: none; white-space: nowrap; flex-shrink: 0; width: 100%; box-sizing: border-box; border: none; background: none; font-family: inherit; text-align: left; } .nav-item .ic { width: 18px; text-align: center; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; } .nav-ic-svg { display: block; filter: drop-shadow(0 0 3px rgba(232,184,75,.35)); transition: transform .2s ease, filter .2s ease; } .pill-ic, .panel-ic { display: inline-flex; align-items: center; vertical-align: -3px; margin-right: 2px; } .panel-ic svg { vertical-align: -4px; } .nav-item:hover .nav-ic-svg { transform: scale(1.15) rotate(-4deg); filter: drop-shadow(0 0 6px rgba(232,184,75,.6)); } .nav-item.active .nav-ic-svg { animation: navIconPulse 2.4s ease-in-out infinite; } @keyframes navIconPulse { 0%, 100% { filter: drop-shadow(0 0 4px rgba(232,184,75,.4)); } 50% { filter: drop-shadow(0 0 9px rgba(79,216,240,.7)); } } .nav-item.nav-icon-only { padding: 9px 12px; gap: 5px; } .nav-item.nav-icon-only .ic { width: auto; font-size: 17px; } .nav-item:hover { background: var(--panel-2); color: var(--text); } .nav-item.active { background: rgba(45,212,191,.12); color: var(--accent); } .nav-item.active::before { display: none; } /* the old side rail indicator doesn't apply to a horizontal bar */ .nav-badge { margin-left: auto; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 1px 7px; min-width: 18px; text-align: center; } .topbar-right { display: flex; align-items: center; gap: 10px; } /* On Inventory, More Earnings, and Settings, the page subtitle runs long enough to overlap the wallet balances/notification bell on narrower screens — hiding them here avoids that clash. They're still one tap away on the other tabs, so nothing becomes unreachable. */ body[data-active-tab="inventory"] .topbar-right, body[data-active-tab="earnings"] .topbar-right, body[data-active-tab="settings"] .topbar-right { display: none; } .notif-bell-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; } .notif-bell-btn:hover { background: var(--panel-2); } .notif-bell-btn .nav-badge { position: absolute; top: -3px; right: -3px; margin-left: 0; } .notif-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; } .notif-item { padding: 12px 14px; border-radius: 10px; background: var(--bg-alt); border-left: 3px solid var(--accent-2); } .notif-item.type-success { border-left-color: #2fbf71; } .notif-item.type-warning { border-left-color: var(--danger); } .notif-item.unread { background: rgba(124,92,255,.08); } .notif-item .notif-title { font-weight: 700; font-size: 13.5px; margin-bottom: 3px; display: flex; align-items: center; gap: 6px; } .notif-del-btn { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-faint); padding: 4px; border-radius: 6px; display: flex; transition: color .15s, background .15s; } .notif-del-btn:hover { color: var(--danger); background: rgba(255,77,109,.12); } .notif-item .notif-msg { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; } .notif-item .notif-time { font-size: 11px; color: var(--text-faint); margin-top: 5px; } .nav-item.nav-icon-only .nav-badge { margin-left: 0; } /* Quick-link rows inside Settings (Wallet / Friends now live here instead of the main nav bar) and the small "back to Settings" link shown atop the pages they lead to. */ .settings-link-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; cursor: pointer; transition: background .15s; color: var(--text); font-size: 14px; font-weight: 500; } .settings-link-row:hover { background: var(--panel-2); } .settings-link-row .ic { width: 20px; text-align: center; font-size: 16px; } .settings-link-row .lbl { flex: 1; } .settings-link-row .chev { color: var(--text-faint); font-size: 18px; } .back-to-settings { display: inline-flex; align-items: center; gap: 6px; color: var(--text-faint); font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 14px; transition: color .15s; } .settings-textlink { display: flex; align-items: center; gap: 8px; padding: 13px 4px; font-size: 14.5px; font-weight: 500; color: var(--text); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; border-bottom: 1px solid var(--border); transition: color .12s; } .settings-textlink:last-child { border-bottom: none; } .settings-textlink:hover, .settings-textlink:active { color: var(--accent); } .settings-textlink.danger { color: var(--danger, #ff5c7a); } .settings-textlink.danger:hover, .settings-textlink.danger:active { color: #ff8ca0; } .back-to-settings:hover { color: var(--accent); } .collapsible { display: none; } .collapsible.show { display: block; } /* ---------- generic "..." dropdown menu ---------- */ .dots-menu { position: relative; display: inline-block; } .dots-menu-btn { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); font-size: 16px; line-height: 1; } .dots-menu-btn:hover { border-color: var(--accent); } .dots-menu-list { display: none; position: absolute; right: 0; top: 38px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); min-width: 150px; z-index: 50; overflow: hidden; } .dots-menu-list.show { display: block; } .dots-menu-list button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 14px; background: none; border: none; color: var(--text); font-family: inherit; font-size: 13px; cursor: pointer; } .dots-menu-list button:hover { background: var(--panel-2); } .dots-menu-list button.danger { color: var(--danger); } .main { padding: 26px 32px; overflow-x: hidden; margin-left: 0; box-sizing: border-box; flex: 1; min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; gap: 14px; flex-wrap: wrap; } .topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; } .topbar h1 { font-size: 22px; margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar .meta { color: var(--text-faint); font-size: 13px; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--grad); display:grid; place-items:center; font-weight:700; color:#fff; font-size:13px; overflow: hidden; } .tabpage { display: none; animation: fadein .35s ease; } .tabpage.active { display: block; } @keyframes fadein { from { opacity:0; transform: translateY(6px);} to {opacity:1; transform:none;} } /* ---------- cards / grids ---------- */ .grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 16px; margin-bottom: 24px; } .stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; position: relative; overflow: hidden; transition: transform .2s, border-color .2s; } .stat-card:hover { transform: translateY(-3px); border-color: var(--accent); } .stat-card .lbl { font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; } .stat-card .val { font-family: 'Sora'; font-size: 26px; font-weight: 700; margin-top: 6px; } .stat-card .ic { position: absolute; right: 14px; top: 14px; font-size: 22px; opacity: .35; } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; } .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; } .panel-head h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 6px; } .panel-head h3 svg, .panel-head h3 [data-panel-icon] svg, .panel-head h3 [data-admin-icon] svg { flex-shrink: 0; vertical-align: middle; } .section-head h3 { display: flex; align-items: center; gap: 6px; } .section-head h3 svg, .section-head h3 [data-panel-icon] svg { flex-shrink: 0; vertical-align: middle; } .panel-head .sub { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; } .subtabs { display: flex; gap: 6px; background: var(--bg-alt); padding: 5px; border-radius: 12px; margin-bottom: 18px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .subtabs::-webkit-scrollbar { display: none; } .subtab-btn { border: none; background: transparent; color: var(--text-dim); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 600; font-family: inherit; transition: all .15s; flex-shrink: 0; white-space: nowrap; } .subtab-btn.active { background: var(--panel); color: var(--accent); box-shadow: var(--shadow); } .subpage { display: none; } .subpage.active { display: block; animation: fadein .3s ease; } .subpage2 { display: none; } .subpage2.active { display: block; animation: fadein .3s ease; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th { text-align: left; color: var(--text-faint); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; padding: 10px 12px; border-bottom: 1px solid var(--border); } td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } tr:last-child td { border-bottom: none; } tr.tbl-row td { transition: background .15s ease; } tr.tbl-row:hover td { background: var(--panel-2); } .table-wrap { overflow-x: auto; } .tbl-section-head { background: var(--panel-2); font-weight: 800; font-size: 12.5px; color: var(--accent-3); padding: 10px 14px !important; text-transform: uppercase; letter-spacing: .04em; } .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .03em; } .badge-ok { background: rgba(45,212,143,.15); color: var(--success); } .badge-pending { background: rgba(246,198,45,.15); color: var(--warn); } .badge-danger { background: rgba(246,87,45,.15); color: var(--danger); } .badge-purple { background: rgba(124,92,255,.15); color: var(--accent); } .admin-overview-welcome { margin-bottom: 20px; } .admin-overview-eyebrow { color: var(--text-dim); font-size: 14px; } .admin-overview-name { font-size: 26px; font-weight: 800; margin: 4px 0 6px; display: flex; align-items: center; gap: 10px; } .admin-overview-sub { color: var(--text-faint); font-size: 13.5px; } .admin-status-ok { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--success); font-weight: 600; } .admin-status-ok .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px var(--success); flex-shrink: 0; } .badge-info { background: rgba(139,124,246,.15); color: var(--accent-2); } .empty-state { text-align: center; padding: 50px 20px; color: var(--text-faint); } .empty-state .ic { font-size: 34px; margin-bottom: 10px; } .empty-state .ic svg { margin: 0 auto; } .item-grid .empty-state, .games-grid .empty-state { grid-column: 1 / -1; } .coming-soon-block { text-align: center; padding: 60px 20px; } .coming-soon-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; } .coming-soon-icon-wrap svg { width: 52px; height: 52px; animation: comingSoonFloat 2.6s ease-in-out infinite; position: relative; z-index: 1; } .coming-soon-glow { position: absolute; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, rgba(232,184,75,.35), transparent 70%); animation: comingSoonGlow 2.6s ease-in-out infinite; } @keyframes comingSoonFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } } @keyframes comingSoonGlow { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } } .coming-soon-title { font-family: 'Sora'; font-weight: 700; font-size: 17px; color: var(--text); margin-bottom: 10px; } .coming-soon-dots { display: flex; gap: 6px; justify-content: center; } .coming-soon-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: comingSoonDotBounce 1.2s ease-in-out infinite; } .coming-soon-dots span:nth-child(2) { animation-delay: .15s; } .coming-soon-dots span:nth-child(3) { animation-delay: .3s; } @keyframes comingSoonDotBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-6px); opacity: 1; } } /* ---------- modal ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(4,8,16,.65); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9600; opacity: 0; transition: opacity .2s; padding: 20px; will-change: opacity; } .modal-overlay.show { opacity: 1; } .modal-box { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 28px; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; position: relative; transform: scale(.94) translateY(10px); transition: transform .22s cubic-bezier(.2,.8,.2,1); box-shadow: var(--shadow); will-change: transform; } .modal-overlay.show .modal-box { transform: none; } .modal-wide { max-width: 720px; } .modal-box.ad-view-modal { max-width: 900px; width: 92vw; } .modal-box.ad-view-modal #viewAdFrame { height: 520px; } @media (max-width: 640px) { .modal-box.ad-view-modal { width: 96vw; max-height: 90vh; overflow-y: auto; } .modal-box.ad-view-modal #viewAdFrame { height: min(70vh, 480px); } } .modal-close { position: absolute; right: 16px; top: 16px; background: var(--bg-alt); border: 1px solid var(--border); width: 30px; height: 30px; border-radius: 50%; color: var(--text-dim); cursor: pointer; font-size: 16px; line-height: 1; } .modal-close:hover { color: var(--danger); border-color: var(--danger); } .modal-box h3 { margin-top: 0; } /* ---------- toast ---------- */ #toast-host { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; } .toast { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 13px 18px; border-radius: 10px; box-shadow: var(--shadow); font-size: 13.5px; min-width: 240px; transform: translateX(110%); transition: transform .3s cubic-bezier(.2,.8,.2,1); will-change: transform; } .toast.show { transform: translateX(0); } .toast-success { border-left-color: var(--success); } .toast-error { border-left-color: var(--danger); } /* ---------- chat ---------- */ .chat-shell { display: grid; grid-template-columns: 260px 1fr; gap: 16px; height: 560px; overflow: hidden; } .chat-list { border-right: 1px solid var(--border); overflow-y: auto; padding-right: 10px; min-height: 0; } .chat-thread-item { padding: 11px 12px; border-radius: 10px; cursor: pointer; margin-bottom: 4px; transition: background .15s; } .chat-thread-item:hover, .chat-thread-item.active { background: var(--panel-2); } .chat-thread-item .nm { font-weight: 600; font-size: 13.5px; } .chat-thread-item .pv { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-body { display: flex; flex-direction: column; height: 100%; min-height: 0; } .chat-msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px; } .msg { max-width: 72%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; } .msg.out { align-self: flex-end; background: var(--grad); color: #fff; border-bottom-right-radius: 4px; } .msg.in { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .msg .ts { font-size: 10px; opacity: .6; margin-top: 4px; } .msg-deleted { opacity: .6; font-style: italic; cursor: default; } .msg-status { opacity: .85; } .msg-del { cursor: pointer; margin-left: 6px; opacity: .7; } .msg-del:hover { opacity: 1; } .chat-input-row { display: flex; gap: 8px; margin-top: 12px; } .chat-input-row input { flex: 1; } /* ---------- inventory / shop ---------- */ .shop-top-icons { display: flex; gap: 10px; margin-bottom: 16px; } .shop-icon-btn { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; } .shop-icon-btn:hover { border-color: var(--accent); background: var(--panel-2); } .shop-icon-btn .ic { font-size: 17px; } .item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px,1fr)); gap: 12px; justify-content: center; } /* ---------- Market Predictor v3 — live chart ---------- */ .mp-chart-header { display: flex; align-items: center; justify-content: flex-start; padding: 0 2px 6px; } .mp-live-price { font-size: 20px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; transition: color .3s; } .mp-live-price.mp-tick-up { color: #1fb15e; } .mp-live-price.mp-tick-down { color: #e0455a; } #mpCurrentDot { filter: drop-shadow(0 0 6px rgba(255,182,72,.8)); } #mpCurrentDotPulse { animation: mpDotPulse 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes mpDotPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } } #mpChartLineGlow { transition: opacity .3s; } .mp-zone-line { stroke: rgba(255,255,255,.22); stroke-width: 1; stroke-dasharray: 4,3; } .mp-zone-line-mid { stroke: rgba(255,255,255,.35); } .mp-pending-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; } .mp-pending-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(255,182,72,.12)); border: 1px solid var(--accent-3); border-radius: 12px; padding: 10px 14px; } .mp-pending-dir { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; } .mp-pending-dir.mp-tick-up { color: #1fb15e; } .mp-pending-dir.mp-tick-down { color: #e0455a; } .mp-pending-countdown { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; } .mp-result-flash { animation: mpResultFlashIn .4s ease; } @keyframes mpResultFlashIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Recent predictions list — capped to the last 10 (server-enforced; older ones are dropped automatically, never shown here at all). */ .mp-history-panel { margin-top: 14px; } .mp-history-title { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; } .mp-history-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .mp-history-list::-webkit-scrollbar { display: none; } .mp-history-row { padding: 8px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); font-size: 12.5px; } .mp-history-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mp-history-price { margin-top: 4px; font-size: 11px; color: var(--text-faint); } .mp-history-dir { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); } .mp-history-pending { color: var(--text-faint); font-style: italic; } .mp-history-outcome { font-weight: 800; } .mp-history-outcome.win { color: #1fb15e; } .mp-history-outcome.loss { color: #e0455a; } .mp-history-time { color: var(--text-faint); font-size: 11px; } .mp-collapsible { margin-top: 10px; } .mp-collapsible-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; padding: 10px 12px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; transition: border-color .15s, background .15s; } .mp-collapsible-head:hover { border-color: var(--accent); background: var(--panel); } .mp-collapsible-head:active { transform: scale(.99); } .mp-collapse-chevron { font-size: 12px; transition: transform .15s; } /* ---------- Offline / Connection Lost overlay ---------- */ #offline-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(6,9,20,.92); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease; padding: 24px; box-sizing: border-box; } #offline-overlay.show { opacity: 1; } .offline-card { padding: 32px 28px; max-width: 340px; width: 100%; text-align: center; } .offline-wifi-icon { display: flex; justify-content: center; margin-bottom: 18px; } .offline-wifi-icon svg { overflow: visible; } .wifi-arc { fill: none; stroke: var(--text-faint); stroke-width: 6; stroke-linecap: round; transition: stroke .3s; } .wifi-dot { fill: var(--text-faint); transition: fill .3s; } .wifi-slash { stroke: #e0455a; stroke-width: 6; stroke-linecap: round; animation: wifiSlashPulse 2s ease-in-out infinite; } @keyframes wifiSlashPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .offline-card h3 { margin: 0 0 8px; font-size: 18px; } .offline-msg { font-size: 13.5px; color: var(--text-faint); line-height: 1.5; } /* Reload pressed: the slash fades out and the three signal arcs light up one after another on a loop, like a device actively searching for a connection, instead of just sitting on a static "no signal" icon while the retry request is in flight. */ .offline-wifi-icon.searching .wifi-slash { opacity: 0; } .offline-wifi-icon.searching .wifi-arc { animation: wifiSearchArc 1.2s ease-in-out infinite; } .offline-wifi-icon.searching .wifi-dot { animation: wifiSearchDot 1.2s ease-in-out infinite; } .offline-wifi-icon.searching .wifi-arc-1 { animation-delay: 0s; } .offline-wifi-icon.searching .wifi-arc-2 { animation-delay: .15s; } .offline-wifi-icon.searching .wifi-arc-3 { animation-delay: .3s; } .offline-wifi-icon.searching .wifi-dot { animation-delay: -.15s; } /* FIX: the arcs are outline-only paths (fill:none in their base rule) — a single animation that set BOTH stroke and fill on every matched element (arcs and dot alike) meant an arc's fill briefly switched from none to a solid color during the animation, filling in the whole wedge behind each thin arc instead of just lighting up its outline. Arcs and the dot now animate separately: arcs only ever animate their stroke color, the dot (an actual filled circle) only ever animates its fill — nothing ever paints outside the lines. */ @keyframes wifiSearchArc { 0%, 100% { stroke: var(--text-faint); } 40% { stroke: #7c5cff; } } @keyframes wifiSearchDot { 0%, 100% { fill: var(--text-faint); } 40% { fill: #7c5cff; } } /* ---------- Signal strength indicator dot ---------- */ .signal-dot { position: fixed; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; z-index: 99998; transition: background-color .3s; pointer-events: none; } /* A gentle glowing "beat" — the dot itself softly grows and brightens on a loop, calm and slow for a healthy connection, quicker and more urgent as it worsens — so it reads as quietly alive even when nothing is actually changing, rather than sitting there as a flat, static sticker. */ .signal-dot-good { background: #1fb15e; color: #1fb15e; animation: signalDotBeat 2.2s ease-in-out infinite; } .signal-dot-weak { background: #ffb648; color: #ffb648; animation: signalDotBeat 1.2s ease-in-out infinite; } .signal-dot-none { background: #e0455a; color: #e0455a; animation: signalDotBeat 0.85s ease-in-out infinite; } @keyframes signalDotBeat { 0%, 100% { transform: scale(1); box-shadow: 0 0 4px currentColor; } 50% { transform: scale(1.4); box-shadow: 0 0 12px 2px currentColor; } } /* ---------- "Get the App" popup (website/browser only) ---------- */ .download-app-popup { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 420px; margin: 0 auto; z-index: 99997; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.4); opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease; } .download-app-popup.show { opacity: 1; transform: translateY(0); } .download-app-icon { font-size: 28px; flex-shrink: 0; } .download-app-text { flex: 1; min-width: 0; } .download-app-title { font-weight: 800; font-size: 13.5px; } .download-app-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; } .download-app-btn { flex-shrink: 0; background: linear-gradient(90deg,#7c5cff,#ffb648); color: #0a0e1c; font-weight: 800; font-size: 12.5px; padding: 8px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; } .download-app-close { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* ---------- App Update: APK upload progress bar ---------- */ .au-upload-progress-track { width: 100%; height: 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; position: relative; } .au-upload-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7c5cff, #ffb648); transition: width .2s ease; position: relative; overflow: hidden; } .au-upload-progress-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: auUploadShimmer 1.2s linear infinite; } @keyframes auUploadShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ---------- Market Predictor v2 ---------- */ .mp-chart-wrap { width: 100%; height: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 12px; padding: 10px; box-sizing: border-box; overflow: hidden; backdrop-filter: blur(2px); } .mp-chart-wrap svg { width: 100%; height: 100%; } /* FIX: .l777-boardwrap is flex:1 (fills all remaining vertical space in the page), which on a tall phone screen could stretch to several hundred pixels tall. The chart's viewBox (300x120, a wide/landscape shape) has preserveAspectRatio="none", so it was stretching to completely fill that tall, narrow box — turning gentle price moves into extreme, ugly vertical spikes. Capping the panel's own height keeps the chart a normal landscape shape regardless of screen height, and flex-grow:0 stops it from re-expanding to fill flex:1's leftover space. */ /* FIX: .l777-shell has 14px side padding for everything in it (the topbar, buttons, etc. all correctly want that breathing room) — but the graph itself should bleed edge-to-edge, ignoring that padding. Negative margins pull it back out to the full screen width; the matching padding keeps the live price / zone lines from sitting flush against the very edge once it's there. Also gives it real breathing room from the topbar above instead of sitting flush against the wallet pill/settings button. */ #marketPredictorPanel { align-items: stretch !important; flex: 0 0 auto !important; flex-direction: column !important; max-height: 210px; height: 210px; margin: 14px -14px 0; width: calc(100% + 28px); padding: 0 14px; box-sizing: border-box; } #mpChartLine { transition: stroke .2s; } #mpChartFill { transition: opacity .3s; } @keyframes mpDrawLine { to { stroke-dashoffset: 0; } } .savings-chart-wrap { width: 100%; height: 100px; background: var(--bg-alt); border-radius: 12px; padding: 10px; box-sizing: border-box; overflow: hidden; margin-bottom: 14px; } .savings-chart-wrap svg { width: 100%; height: 100%; } #savingsChartLine { stroke-dasharray: 900; stroke-dashoffset: 900; filter: drop-shadow(0 0 4px rgba(124,92,255,.5)); } #savingsChartLine.draw { animation: mpDrawLine 1.3s cubic-bezier(.2,.8,.2,1) forwards; } .mp-result { min-height: 22px; text-align: center; font-weight: 700; font-size: 14px; margin-top: 10px; } .mp-result.win { color: #1fb15e; } .mp-result.loss { color: #e0455a; } .mp-btn-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; flex: 1; min-width: 0; } .mp-side-info { flex-shrink: 0; width: 96px; font-size: 10px; color: var(--text-faint); } .mp-side-item { display: flex; justify-content: space-between; gap: 6px; } .mp-side-item + .mp-side-item { margin-top: 4px; } .mp-side-item span:last-child { font-weight: 700; color: var(--text); } .mp-pred-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-2); cursor: pointer; color: var(--text); font-weight: 700; font-size: 12px; transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease; } .mp-pred-btn:hover:not(:disabled) { transform: translateY(-2px); } .mp-pred-btn:active:not(:disabled) { transform: scale(.96); } .mp-pred-btn:disabled { opacity: .4; cursor: default; } .mp-down, .mp-bigdown { border-color: rgba(224,69,90,.35); } .mp-up, .mp-bigup { border-color: rgba(31,177,94,.35); } .mp-bigdown:hover:not(:disabled), .mp-bigup:hover:not(:disabled) { box-shadow: 0 8px 20px rgba(0,0,0,.28); } /* ---------- Reflex Tap v2 ---------- */ .rt-zone { width: 100%; height: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); } #reflexTapPanel { align-items: stretch !important; } .rt-target-btn { position: relative; overflow: visible; height: 60px; border-radius: 14px; border: none; cursor: pointer; font-weight: 800; font-size: 17px; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 0 rgba(124,92,255,0), inset 0 2px 6px rgba(255,255,255,.25); transition: transform .1s ease, box-shadow .2s ease, background .2s; } .rt-target-btn:active { transform: translateY(3px) scale(.97); box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 2px 6px rgba(255,255,255,.15); } .rt-target-btn.waiting { background: linear-gradient(135deg, #4b4f66, #33364a); cursor: default; overflow: hidden; } .rt-target-btn.waiting::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); background-size: 220% 100%; animation: rtShimmer 1.3s ease-in-out infinite; } @keyframes rtShimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } } .rt-target-btn.live { background: linear-gradient(135deg, #22d47a, #0e8a45); box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 44px rgba(34,212,122,.75), 0 0 80px rgba(34,212,122,.3), inset 0 2px 6px rgba(255,255,255,.3); animation: rtPulse .35s ease-in-out infinite alternate; } .rt-target-btn.live::after { content: ''; position: absolute; inset: -3px; border-radius: 17px; pointer-events: none; border: 2px solid rgba(255,255,255,.65); animation: rtLiveRing .85s ease-out infinite; } @keyframes rtLiveRing { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.1); opacity: 0; } } @keyframes rtPulse { 0% { transform: scale(1); } 100% { transform: scale(1.045); } } .rt-target-btn.toofast { background: linear-gradient(135deg, #ff5f6f, #b7273c); animation: rtShake .35s ease; } @keyframes rtShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .rt-target-btn.tap-burst::before, .rt-target-btn.tap-burst::after { content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; border: 3px solid rgba(255,255,255,.9); animation: rtRippleBurst .5s ease-out forwards; } .rt-target-btn.tap-burst::after { inset: -6px; border-radius: 18px; border-width: 2px; border-color: var(--accent-3); animation: rtRippleBurst .6s ease-out .05s forwards; } @keyframes rtRippleBurst { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.22); opacity: 0; } } .rt-streak { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--accent-3); } .rt-streak svg { width: 16px; height: 16px; } .rt-result { min-height: 22px; text-align: center; font-weight: 700; font-size: 14px; margin-top: 10px; } .rt-result.win { color: #1fb15e; } .rt-result.loss { color: #e0455a; } .item-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px; text-align: center; transition: transform .15s, border-color .15s, box-shadow .18s ease; } .pkg-card-diamond { border: 2px solid #4fd8f0; box-shadow: 0 0 14px rgba(79,216,240,.25); } .pkg-card-coin { border: 2px solid #e8b84b; box-shadow: 0 0 14px rgba(232,184,75,.25); } .pkg-card:hover { transform: translateY(-4px) scale(1.02); } .pkg-icon-3d-wrap { perspective: 300px; height: 88px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .pkg-icon-3d { width: 100%; max-width: 140px; height: 84px; object-fit: contain; transform-style: preserve-3d; transform: rotateX(4deg); filter: drop-shadow(0 8px 10px rgba(0,0,0,.3)); } .pkg-card-diamond .pkg-icon-3d { filter: drop-shadow(0 8px 10px rgba(0,0,0,.3)) drop-shadow(0 0 12px rgba(79,216,240,.45)); } .pkg-card-coin .pkg-icon-3d { filter: drop-shadow(0 8px 10px rgba(0,0,0,.3)) drop-shadow(0 0 12px rgba(232,184,75,.45)); } @keyframes pkgShineSweep { 0% { transform: translateX(0) skewX(-18deg); opacity: 0; } 8% { opacity: .95; } 45% { transform: translateX(140px) skewX(-18deg); opacity: .95; } 55% { opacity: 0; } 100% { transform: translateX(140px) skewX(-18deg); opacity: 0; } } .item-card:hover { transform: translateY(-3px); border-color: var(--accent); } .item-card .thumb { width: 56px; height: 56px; border-radius: 10px; background: var(--bg-alt); display:grid; place-items:center; font-size: 22px; margin: 0 auto 8px; overflow:hidden;} .ticket-item-card { grid-column: span 2; } .ticket-item-card .ticket-thumb { width: 100%; height: auto; aspect-ratio: 420 / 220; border-radius: 10px; background: transparent; margin-bottom: 8px; } .ticket-item-card .ticket-thumb svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); } .item-card .thumb img { width: 100%; height: 100%; object-fit: cover; } .item-card .nm { font-weight: 600; font-size: 12px; } .item-card .qty { font-size: 11px; color: var(--text-faint); margin-top: 2px; } .item-card .px { color: var(--accent); font-weight: 700; font-size: 12.5px; margin-top: 5px; } /* ---------- ads popup (client) ---------- */ .ad-float { position: fixed; right: 16px; bottom: 84px; width: 164px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); z-index: 500; overflow: hidden; animation: slideup .4s cubic-bezier(.2,.8,.2,1); } @keyframes slideup { from { opacity:0; transform: translateY(30px);} to {opacity:1; transform:none;} } .ad-float iframe { width: 100%; height: 110px; border: none; display: block; background: var(--bg-alt); } .ad-float .ad-close { position: absolute; top: 5px; right: 5px; background: rgba(0,0,0,.55); color:#fff; border:none; width:18px;height:18px;border-radius:50%; cursor:pointer; font-size:10px; z-index:2;} .ad-float .ad-lbl { font-size: 8.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); padding: 5px 8px 0; } .ad-float .ad-body { padding: 4px 8px 8px; } .ad-float .ad-body a { font-size: 10.5px; font-weight: 600; text-decoration: none; } /* ---------- misc ---------- */ .flex { display: flex; } .flex-1 { flex: 1 1 0%; min-width: 0; } .between { justify-content: space-between; } .center { align-items: center; } .gap-8 { gap: 8px; } .gap-16 { gap: 16px; } .wrap { flex-wrap: wrap; } .mt-0{margin-top:0} .mb-0{margin-bottom:0} .mt-8{margin-top:8px} .mt-16{margin-top:16px} .mt-24{margin-top:24px} .small { font-size: 12.5px; color: var(--text-faint); } .kv { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; } .kv:last-child { border-bottom: none; } .kv .k { color: var(--text-faint); } .kv .v { font-weight: 600; text-align: right; } .kv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ach-tier-row { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px dashed var(--border); } .ach-tier-row:last-of-type { border-bottom: none; } .ach-category-card { padding: 0; overflow: hidden; } .ach-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; justify-content: center; } .ach-category-grid .ach-category-card { padding: 18px 14px; text-align: center; transition: transform .15s, border-color .15s; } .ach-category-grid .ach-category-card:hover { transform: translateY(-3px); border-color: var(--accent); } .ach-category-grid .ach-category-mini-badge { margin: 0 auto; } .ach-category-header { display: flex; align-items: center; gap: 14px; padding: 16px 22px; cursor: pointer; transition: background .15s; } .ach-category-header:hover { background: var(--bg-alt); } .ach-category-mini-badge { width: 44px; height: 44px; flex-shrink: 0; } .ach-category-mini-badge svg { width: 100%; height: 100%; } .ach-expand-chevron { flex-shrink: 0; color: var(--text-faint); transition: transform .2s; display: flex; } .ach-expand-chevron.open { transform: rotate(180deg); color: var(--accent); } .ach-category-body { padding: 0 22px 22px; animation: fadein .2s ease; } .ach-tier-badge { width: 64px; height: 64px; flex-shrink: 0; } .ach-tier-badge svg { width: 100%; height: 100%; } .ach-tier-fields { flex: 1; min-width: 0; } .ach-badge-wrap { width: 96px; height: 110px; flex-shrink: 0; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); margin: 0 auto; } .ach-badge-wrap svg { width: 100%; height: 100%; } .ach-badge-wrap.ach-badge-locked { opacity: .35; filter: grayscale(1); } .ach-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; justify-content: center; } .ach-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 14px; } .ach-card-name { font-weight: 700; font-size: 14px; margin-top: 6px; } .ach-card-progress { width: 100%; margin-top: 4px; } .kv-grid .kv { flex-direction: column; gap: 4px; background: var(--bg-alt); border-radius: 10px; padding: 12px; border-bottom: none; } .kv-grid .kv .v { text-align: left; font-size: 16px; } @media (max-width: 640px) { .kv-grid { grid-template-columns: 1fr; } } .id-preview { width: 100%; border-radius: 10px; border: 1px solid var(--border); cursor: zoom-in; max-height: 160px; object-fit: cover; } .progress-dots { display: flex; gap: 8px; margin-bottom: 26px; justify-content: center; } .progress-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: all .25s; } .progress-dots span.active { background: var(--grad); width: 22px; border-radius: 4px; } .slider { -webkit-appearance: none; width: 100%; height: 5px; border-radius: 5px; background: var(--border); outline: none; } .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--grad); cursor: pointer; } .switch { position: relative; display: inline-block; width: 42px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .slider-track { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 24px; transition: .2s; } .slider-track::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: .2s; } .switch input:checked + .slider-track { background: var(--grad); } .switch input:checked + .slider-track::before { transform: translateX(18px); } .badge-realworld { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; background: rgba(246,167,45,.15); color: var(--accent-3); margin-bottom: 6px; } /* ---------- order status stepper ---------- */ .order-stepper { display: flex; align-items: flex-start; margin: 14px 0 6px; } .order-step { flex: 1; text-align: center; position: relative; } .order-step:not(:last-child)::before { content: ''; position: absolute; top: 11px; left: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0; } .order-step.done:not(:last-child)::before { background: var(--accent); } .order-step .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); border: 2px solid var(--border); margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-faint); position: relative; z-index: 1; } .order-step.done .dot { background: var(--accent); border-color: var(--accent); color: #fff; } .order-step.done .dot::after { content: '✓'; } .order-step.active .dot { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 0 0 4px rgba(124,92,255,.2); } .order-step .lbl { font-size: 10px; color: var(--text-faint); } .order-step.done .lbl, .order-step.active .lbl { color: var(--text); font-weight: 600; } .nav-wallet-balance { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 30px; background: var(--panel-2); border: 1px solid var(--border); cursor: pointer; transition: border-color .15s; flex-shrink: 0; order: 5; margin-left: 10px; /* pin to the far right of the bar, clear of the brand */ } .topbar-wallet { order: initial; margin-left: 0; } .nav-wallet-balance + .nav-wallet-balance { margin-left: 4px; } /* Coins and Diamonds sit close together as a pair */ .nav-wallet-balance:hover { border-color: var(--accent); } .nav-wallet-balance .ic { color: var(--accent); font-size: 14px; } .nav-wallet-balance .val { font-family: 'Sora'; font-weight: 700; font-size: 13px; color: var(--text); white-space: nowrap; } /* idle "alive" animation for shop/inventory icons — randomly timed per item */ @keyframes idleShine { 0% { filter: brightness(1); } 50% { filter: brightness(1.45) saturate(1.2); } 100% { filter: brightness(1); } } .idle-shine { animation: idleShine 1.1s ease-in-out; } /* ---------- coin visuals (Gold/Silver/Bronze with QR) ---------- */ .coin { position: relative; display: block; margin: 0 auto; } .coin .coin-qr { border-radius: 4px; padding: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.35); } .coin .coin-qr svg { display: block; } .coin-tier-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .coin-tier-opt { border: 2px solid var(--border); border-radius: 14px; padding: 14px 10px; text-align: center; cursor: pointer; transition: all .15s; background: var(--panel-2); } .coin-tier-opt:hover { border-color: var(--accent); } .coin-tier-opt.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45,212,191,.15); } .coin-tier-opt .nm { font-size: 12.5px; font-weight: 700; margin-top: 8px; } .coin-code-preview { max-height: 200px; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 4px; } .coin-code-list { max-height: 240px; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; } .coin-code-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); } .coin-code-row:last-child { border-bottom: none; } .coin-code-row .mono { font-size: 12.5px; color: var(--accent-3); font-weight: 700; } /* purchase flourish: card "flies" up and fades toward the sidebar */ @keyframes flyToInv { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(-40px,-70px) scale(.3); opacity: 0; } } .item-card.fly-out { animation: flyToInv .5s ease-in forwards; pointer-events: none; } /* ---------- sound assignment badges ---------- */ .loc-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: rgba(139,124,246,.15); color: var(--accent-2); margin-right: 4px; } /* ========================================================= STOREFRONT COMPONENTS — hero banners, filter pills, game cards, topbar search, floating action buttons (client Home). ========================================================= */ .nav-item.active { background: var(--accent); color: #fff; } .nav-item.active::before { display: none; } .nav-item:hover { background: rgba(124,92,255,.12); } .brand .mark { border-radius: 10px; } .topbar-profile { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); padding: 7px 16px 7px 7px; border-radius: 30px; } .topbar-profile .nm { font-size: 12.5px; font-weight: 700; } .topbar-profile .role { font-size: 10.5px; color: var(--text-faint); } /* hero promo banners */ .hero-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; } .hero-banner.hb-2 { background: linear-gradient(135deg, #1c1608, #4a3308); } /* filter pill row */ .filter-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; } .filter-pill { display: flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 30px; background: var(--panel); border: 1px solid var(--border); color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: inherit; } .filter-pill:hover { border-color: var(--accent); color: var(--text); } .filter-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* popular items grid (game-card style) */ .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .bulletin-title-list { display: flex; flex-direction: column; gap: 8px; } .bulletin-title-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .15s, transform .15s; } .bulletin-title-row:hover { border-color: var(--accent); transform: translateX(2px); } .bulletin-title-ic { font-size: 16px; flex-shrink: 0; } .bulletin-title-text { flex: 1; font-weight: 600; font-size: 14px; } .bulletin-title-arrow { color: var(--text-faint); font-size: 16px; } .bulletin-modal-img { display: block; width: 100%; height: auto; border-radius: 10px; } .section-head h3 { margin: 0; font-size: 17px; } .section-head .see-all { font-size: 12.5px; color: var(--text-dim); background: var(--panel); border: 1px solid var(--border); padding: 7px 16px; border-radius: 20px; cursor: pointer; font-family: inherit; } .section-head .see-all:hover { border-color: var(--accent); color: var(--text); } .games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 10px; margin-bottom: 22px; justify-content: center; } .game-card { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; background: var(--panel-2); cursor: pointer; transition: transform .18s, box-shadow .18s ease; border: 1px solid var(--border); } .game-card:hover { transform: translateY(-4px) scale(1.02); border-color: var(--accent); box-shadow: 0 12px 28px rgba(124,92,255,.25); } .game-card .gc-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 28px; background: linear-gradient(160deg, var(--panel-2), var(--bg-alt)); } .game-card .gc-img img { width: 100%; height: 100%; object-fit: cover; } .game-card:nth-of-type(6n+1) .gc-img { background: linear-gradient(160deg, #7c5cff, #4225a8); } .game-card:nth-of-type(6n+2) .gc-img { background: linear-gradient(160deg, #ff4d9e, #a8226b); } .game-card:nth-of-type(6n+3) .gc-img { background: linear-gradient(160deg, #4f8cff, #1e4fb0); } .game-card:nth-of-type(6n+4) .gc-img { background: linear-gradient(160deg, #ffb648, #c5730f); } .game-card:nth-of-type(6n+5) .gc-img { background: linear-gradient(160deg, #2de8a3, #0f9c6b); } .game-card:nth-of-type(6n+6) .gc-img { background: linear-gradient(160deg, #ff8a3d, #b8461c); } .game-card .gc-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6,9,22,.92) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; } .game-card .gc-title { font-weight: 700; font-size: 11px; color: #fff; line-height: 1.25; } .game-card .gc-price { font-size: 10px; color: var(--accent-3); font-weight: 700; margin-top: 1px; } .game-card .gc-play-pill { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.7); opacity: 0; z-index: 3; background: var(--grad); color: #fff; font-weight: 800; font-size: 10px; padding: 5px 13px; border-radius: 30px; box-shadow: 0 6px 16px rgba(124,92,255,.5); transition: opacity .18s, transform .18s; pointer-events: none; } .game-card:hover .gc-play-pill { opacity: 1; transform: translate(-50%,-50%) scale(1); } @media (hover: none) { .game-card .gc-play-pill { opacity: 1; transform: translate(-50%,-50%) scale(1); } } .gc-closing-badge { position: absolute; top: 6px; right: 6px; z-index: 2; font-size: 8.5px; font-weight: 800; padding: 3px 7px; border-radius: 20px; letter-spacing: .02em; } .gc-closing-badge.warn { background: rgba(255,77,109,.9); color: #fff; animation: idleShine 1s ease-in-out infinite; } .gc-closing-badge.sched { background: rgba(124,92,255,.85); color: #fff; } .gc-closing-badge.closed { background: rgba(0,0,0,.6); color: var(--text-faint); } .game-card.gc-closed { cursor: default; filter: grayscale(.7) brightness(.65); } .game-card.gc-closed .gc-play-pill { opacity: 1; transform: translate(-50%,-50%) scale(1); background: rgba(0,0,0,.7); box-shadow: none; } .game-card .gc-badge { position: absolute; top: 6px; left: 6px; background: var(--grad); color: #fff; font-size: 8px; font-weight: 800; padding: 2px 7px; border-radius: 6px; letter-spacing: .03em; } /* floating quick-action buttons (Support etc.) */ .floating-actions { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 12px; z-index: 480; } .floating-actions .fa-btn { width: 54px; height: 54px; border-radius: 50%; background: var(--grad); border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #fff; font-weight: 700; font-size: 9px; box-shadow: var(--shadow); font-family: inherit; transition: transform .15s; } .floating-actions .fa-btn:hover { transform: scale(1.06); } .floating-actions .fa-btn .ic { font-size: 18px; } /* inventory box "opening" animation — hover on desktop, tap on mobile */ @keyframes boxOpenWiggle { 0%, 100% { transform: scale(1) rotate(0deg); } 20% { transform: scale(1.1) rotate(-6deg); } 40% { transform: scale(.94) rotate(5deg); } 60% { transform: scale(1.08) rotate(-4deg); } 80% { transform: scale(.98) rotate(2deg); } } #invGrid .item-card .thumb, #shopGrid .item-card .thumb, .game-card .gc-img { transition: filter .15s; } .item-card:not(.no-anim):hover .thumb:not(.coin-thumb), .item-card.tapped:not(.no-anim) .thumb:not(.coin-thumb) { animation: boxOpenWiggle .7s ease-in-out infinite; filter: brightness(1.15); } .thumb.coin-thumb:hover, .item-card.tapped .thumb.coin-thumb { animation: idleShine 1s ease-in-out infinite; filter: brightness(1.2); } .game-card:hover .gc-img, .game-card.tapped .gc-img { filter: brightness(1.15); } /* per-game hub icon animations */ .gc-icon-inner { display: inline-block; will-change: transform, filter; } .gc-img[data-game="pvb"] .gc-icon-inner { animation: pvbCardFloat 2.6s ease-in-out infinite; } @keyframes pvbCardFloat { 0%, 100% { transform: perspective(280px) rotateY(0deg) rotate(0deg) translateY(0); } 30% { transform: perspective(280px) rotateY(22deg) rotate(-4deg) translateY(-3px); } 60% { transform: perspective(280px) rotateY(-14deg) rotate(3deg) translateY(-1px); } } .gc-img[data-game="lucky777"] .gc-icon-inner { animation: l777IconSpin 2.4s ease-in-out infinite; } @keyframes l777IconSpin { 0%, 100% { transform: rotate(0deg) scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(255,182,72,0)); } 25% { transform: rotate(-10deg) scale(1.05); } 50% { transform: rotate(0deg) scale(1.12); filter: brightness(1.35) drop-shadow(0 0 12px rgba(255,182,72,.75)); } 75% { transform: rotate(10deg) scale(1.05); } } .gc-img[data-game="colorgame"] .gc-icon-inner { animation: cgIconCycle 3.2s ease-in-out infinite; } @keyframes cgIconCycle { 0%, 100% { transform: scale(1) rotate(0deg); filter: hue-rotate(0deg) saturate(1); } 50% { transform: scale(1.1) rotate(6deg); filter: hue-rotate(180deg) saturate(1.5); } } /* ---------- Mission & Vision page ---------- */ .mv-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 32px 20px 60px; } .mv-topbar { width: 100%; max-width: 720px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; } .mv-logo { height: 30px; width: auto; } .mv-content { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 22px; } .mv-hero { text-align: center; margin-bottom: 6px; animation: mvCardIn .5s ease both; } .mv-hero-eyebrow { font-family: 'Sora'; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-3); margin-bottom: 10px; } .mv-hero-title { font-family: 'Sora'; font-weight: 800; font-size: 30px; line-height: 1.25; margin: 0 0 12px; background: linear-gradient(135deg, var(--text), var(--accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent; } .mv-hero-sub { font-size: 15px; line-height: 1.7; color: var(--text-faint); max-width: 480px; margin: 0 auto; } .mv-card { background: rgba(19,26,48,.55); border: 1px solid var(--border); border-radius: 18px; padding: 30px 32px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: mvCardIn .5s ease both; } .mv-content .mv-card:nth-of-type(1) { animation-delay: .1s; } .mv-content .mv-card:nth-of-type(2) { animation-delay: .2s; } .mv-content .mv-card:nth-of-type(3) { animation-delay: .3s; } @keyframes mvCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .mv-eyebrow { font-family: 'Sora'; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-3); margin-bottom: 12px; } .mv-text { font-size: 15px; line-height: 1.85; color: var(--text-dim); } .mv-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; } .mv-list li { font-size: 15px; line-height: 1.7; color: var(--text-dim); padding-left: 22px; position: relative; } .mv-list li::before { content: '✓'; position: absolute; left: 0; top: 1px; color: var(--success); font-weight: 800; } .mv-list li strong { color: var(--text); } @media (max-width: 640px) { .mv-card { padding: 22px 20px; } .mv-text { font-size: 14px; } .mv-hero-title { font-size: 24px; } #popularGrid.games-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; justify-content: center; } #popularGrid .gc-overlay { padding: 8px; } #popularGrid .gc-title { font-size: 11px; } #popularGrid .gc-price { font-size: 9.5px; } #popularGrid .gc-play-pill { font-size: 9.5px; padding: 6px 13px; } #popularGrid .gc-badge { font-size: 8px; padding: 2px 7px; } } /* ---------- signin showcase (two-column auth layout) ---------- */ .signin-shell { display: flex; min-height: 100vh; } .signin-showcase { flex: 1.15; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 60px 64px; } .signin-showcase::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(20,27,58,.35), rgba(10,14,28,.15) 70%); } .signin-showcase .sc-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; } .signin-showcase .sc-brand .mark { width: 46px; height: 46px; border-radius: 12px; background: var(--grad); display: grid; place-items: center; font-family: 'Sora'; font-weight: 800; color: #fff; font-size: 17px; } .signin-showcase .sc-brand .nm { font-family: 'Sora'; font-weight: 800; font-size: 22px; color: #fff; } .signin-showcase .sc-brand .nm-logo { height: 46px; width: auto; display: block; } span.nm-logo { height: auto; font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.3px; } .signin-showcase h2 { font-family: 'Sora'; font-size: 30px; font-weight: 800; color: #fff; line-height: 1.2; max-width: 460px; margin: 0 0 14px; } .signin-showcase p.sc-lead { color: rgba(255,255,255,.7); font-size: 14px; max-width: 420px; line-height: 1.6; margin-bottom: 26px; } /* investment growth-chart animation */ .growth-chart { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 140px; width: 320px; background: rgba(0,0,0,.28); padding: 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 50px rgba(0,0,0,.4); } .gc-bar { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #7c5cff, #4f8cff); animation: gcRise 1.6s cubic-bezier(.2,.9,.25,1) both; animation-delay: var(--d); transform-origin: bottom; } @keyframes gcRise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } .gc-line { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); pointer-events: none; } .gc-line polyline { fill: none; stroke: #ffb648; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: gcDraw 1.8s ease forwards .3s; filter: drop-shadow(0 0 4px rgba(255,182,72,.6)); } @keyframes gcDraw { to { stroke-dashoffset: 0; } } .signin-formside { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; } /* ========================================================= LIVE GAMES — Player vs Banker (always-on table) and Lucky 777 (jackpot-gated slot), plus shared coin/QR shop visuals. ========================================================= */ .subpage2lg { display: none; } .subpage3 { display: none; } .subpage3.active { display: block; animation: fadein .3s ease; } .subpage4 { display: none; } .subpage4.active { display: block; animation: fadein .3s ease; } /* ---------- Reports: System / Client's Report top-level switch ---------- */ .report-group-switch { display: flex; gap: 8px; margin-bottom: 18px; } .report-group-btn { flex: 1; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text-dim); padding: 12px 16px; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 700; font-family: inherit; transition: all .15s; } .report-group-btn.active { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--shadow); } /* ---------- Client Account detail view (Reports → Client's Report) ---------- */ .ca-detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .ca-back-btn { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; color: var(--text); cursor: pointer; font-size: 13px; font-weight: 600; } .ca-join-date { text-align: center; font-weight: 700; font-size: 13px; color: #7a7364; background: #f7f5ef; border: 1px solid rgba(0,0,0,.06); border-radius: 10px 10px 0 0; padding: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.14); } .ca-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: rgba(0,0,0,.08); border-radius: 0 0 10px 10px; overflow: hidden; margin-bottom: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.14); } .ca-info-cell { background: #f7f5ef; padding: 10px 14px; } .ca-info-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #a89f8a; font-weight: 700; margin-bottom: 3px; } .ca-info-value { font-size: 13.5px; font-weight: 600; word-break: break-word; color: #2a2620; } .ca-status-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; } .ca-status-badge { padding: 6px 18px; border-radius: 999px; font-weight: 800; font-size: 12.5px; letter-spacing: .02em; } .ca-status-active { background: rgba(31,177,94,.18); color: #1fb15e; border: 1px solid rgba(31,177,94,.4); } .ca-status-inactive { background: rgba(138,147,166,.18); color: #8a93a6; border: 1px solid rgba(138,147,166,.4); } .ca-status-banned { background: rgba(224,69,90,.18); color: #e0455a; border: 1px solid rgba(224,69,90,.4); } .ca-status-suspended { background: rgba(255,182,72,.18); color: #ffb648; border: 1px solid rgba(255,182,72,.4); } .ca-status-deleted { background: rgba(80,20,90,.25); color: #c77dff; border: 1px solid rgba(199,125,255,.4); } .ca-report-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 16px; } .ca-report-tab-btn { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; cursor: pointer; color: var(--text); font-size: 12.5px; font-weight: 700; font-family: inherit; text-align: center; transition: all .15s; } .ca-report-tab-btn.active { background: var(--grad); color: #fff; border-color: transparent; } .ca-open-field { background: var(--bg-alt); border: 1px dashed var(--border); border-radius: 12px; padding: 16px; min-height: 160px; } .ca-open-field-empty { text-align: center; color: var(--text-faint); font-size: 13px; padding: 40px 20px; font-weight: 600; } .ca-mini-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .ca-mini-tab-btn { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; cursor: pointer; color: var(--text-dim); font-size: 12px; font-weight: 600; font-family: inherit; } .ca-mini-tab-btn.active { background: var(--accent); color: #fff; border-color: transparent; } /* ---------- Client Account list: paper-style cards ---------- */ /* Deliberately distinct from the site's own dark panel look — these read as individual paper sheets/index cards laid out in a list, rather than the usual flat dark list rows used everywhere else in the admin panel. */ .ca-client-card { display: flex; align-items: center; gap: 12px; background: #f7f5ef; color: #2a2620; border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.4) inset; border: 1px solid rgba(0,0,0,.06); transition: transform .12s, box-shadow .12s; } .ca-client-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.4) inset; } .ca-client-card-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #e5e0d3; font-size: 16px; overflow: hidden; } .ca-client-card-name { flex: 1; font-weight: 700; font-size: 14px; color: #2a2620; } .ca-client-card-username { display: block; font-weight: 500; font-size: 11.5px; color: #7a7364; margin-top: 1px; } .ca-client-card-chev { color: #a89f8a; font-size: 18px; } /* ---------- Daily Reward Calendar (Settings → Daily Reward Chest) ---------- */ .reward-calendar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 4px; } .reward-calendar-cell { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 6px; text-align: center; } .reward-calendar-cell-day { font-size: 10.5px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; } .reward-calendar-cell input { width: 100%; box-sizing: border-box; text-align: center; padding: 6px 2px; border-radius: 7px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 700; } .reward-calendar-cell input::placeholder { color: var(--text-faint); font-weight: 500; } .subpage5 { display: none; } .subpage5.active { display: block; animation: fadein .3s ease; } .subpage6.active { display: block; animation: fadein .3s ease; } @media print { body * { visibility: hidden; } .tabpage.active, .tabpage.active *, .subpage3.active, .subpage3.active * { visibility: visible; } .tabpage.active { position: absolute; left: 0; top: 0; width: 100%; } .tabpage.active > .subtabs, .tabpage.active .see-all { visibility: hidden; display: none; } .panel { box-shadow: none !important; border: 1px solid #000 !important; } } .subpage2lg.active { display: block; animation: fadein .3s ease; } .subpageann { display: none; } .subpageann.active { display: block; animation: fadein .3s ease; } /* ---------- Player vs Banker (Baccarat) ---------- */ .bac-table { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 12px; padding: 16px 10px; width: 100%; box-sizing: border-box; backdrop-filter: blur(2px); } #pvbBoardwrap { align-items: stretch !important; } .pvb-bet-frame { display: flex; align-items: stretch; border-radius: 12px; overflow: hidden; margin-top: 4px; animation: pvbFrameIn .25s ease-out; } .pvb-bet-frame-label { background: var(--panel-2); display: flex; align-items: center; justify-content: center; padding: 0 14px; font-weight: 800; font-size: 14px; flex-shrink: 0; min-width: 74px; text-align: center; border: 2px solid var(--border); border-right: none; border-radius: 12px 0 0 12px; } .pvb-bet-frame input { flex: 1; min-width: 0; border-radius: 0; border: 2px solid var(--border); border-left: none; border-right: none; background: var(--bg-alt); text-align: center; font-size: 15px; color: var(--text); padding: 0 8px; font-family: inherit; } .pvb-bet-frame .l777-spinbtn { border-radius: 0 12px 12px 0; align-self: stretch; height: auto; } @keyframes pvbFrameIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .bac-hand { flex: 1; text-align: center; } .bac-hand-label { font-weight: 700; font-size: 13px; margin-bottom: 8px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; } .bac-cards { display: flex; gap: 8px; justify-content: center; min-height: 108px; flex-wrap: wrap; } .bac-card { width: 90px; height: 125px; border-radius: 12px; background: linear-gradient(160deg,#fdfaf2,#eae2cc); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0,0,0,.3); animation: bacDeal .35s ease-out; flex-shrink: 0; } .bac-card.red { color: #c0272d; } .bac-card.blk { color: #1a1a1a; } .bac-card .bac-rank { font-family: 'Sora'; font-weight: 800; font-size: 23px; line-height: 1; } .bac-card .bac-suit { font-size: 26px; margin-top: 4px; } .bac-card .bac-suit-img { width: 26px; height: 26px; object-fit: contain; display: block; margin-top: 4px; } .bac-card-back { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: inset 0 0 0 3px rgba(255,255,255,.25); } @keyframes bacDeal { 0% { transform: translateY(-16px) scale(.7); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } .bac-total { font-family: 'Sora'; font-weight: 800; font-size: 22px; color: var(--accent-3); margin-top: 8px; } .pvb-vs { text-align: center; min-width: 90px; } .pvb-phase { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); font-weight: 700; } .pvb-timer { font-family: 'Sora'; font-weight: 800; font-size: 30px; color: var(--accent-3); } .pvb-bet-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; transition: opacity .2s; } .pvb-bet-btn { background: var(--panel-2); border: 2px solid var(--border); border-radius: 12px; padding: 13px 6px; cursor: pointer; text-align: center; transition: all .15s; font-family: inherit; } .pvb-bet-btn:hover { border-color: var(--accent); } .pvb-bet-btn.selected { border-color: var(--accent); background: rgba(124,92,255,.12); } .pb-lbl { font-weight: 700; font-size: 14px; color: var(--text); } .pb-odds { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; } #pvbBetAmountInput { padding: 15px 12px !important; font-size: 16px !important; } #pvbPlaceBetBtn { height: 56px !important; font-size: 16px !important; padding: 0 26px !important; } @media (max-width: 380px) { .pvb-bet-row { gap: 4px; } .pvb-bet-btn { padding: 6px 2px; border-radius: 8px; } .pb-lbl { font-size: 10px; } .pb-odds { font-size: 8.5px; } .bac-table { gap: 6px; } .pvb-vs { min-width: 60px; } } .pvb-chip.selected { border-style: solid; border-color: var(--accent-3); box-shadow: 0 0 0 3px rgba(255,182,72,.35), 0 4px 10px rgba(0,0,0,.35); transform: translateY(-2px) scale(1.05); } .pvb-stats { display: flex; gap: 14px; flex-wrap: wrap; } .pvb-stat-bar { flex: 1; min-width: 100px; text-align: center; } .pvb-stat-track { height: 8px; background: var(--panel-2); border-radius: 6px; overflow: hidden; margin-top: 6px; } .pvb-stat-fill { height: 100%; transition: width .3s; transform-origin: left; animation: statBarGrow .7s cubic-bezier(.2,.8,.2,1); } @keyframes statBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ---------- Lucky 777 ---------- */ .l777-symbol-editor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .icon-size-control { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; } .icon-size-control-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .icon-size-control-row label { font-size: 13px; font-weight: 600; } .icon-size-value { font-family: 'Sora'; font-weight: 800; color: var(--accent); font-size: 13px; } .icon-size-control input[type="range"] { width: 100%; } .icon-size-preview { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .icon-size-preview-label { font-size: 11.5px; color: var(--text-faint); } .acct-actions-gear { font-size: 15px; padding: 5px 10px; } .acct-actions-popup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .settings-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px; cursor: pointer; transition: border-color .15s, transform .12s ease; } .settings-card:hover { border-color: var(--accent); transform: translateY(-2px); } .icon-size-preview-box { display: flex; align-items: center; justify-content: center; min-width: 60px; min-height: 60px; background: var(--panel); border: 1px dashed var(--border); border-radius: 10px; padding: 8px; } .bac-card-preview-box { min-width: 90px; min-height: 125px; background: var(--bg); } .bac-card-preview-box .bac-card { animation: none; } .l777-symbol-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; } .l777-symbol-card-preview { width: 60px; height: 60px; margin: 0 auto 8px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 30px; overflow: hidden; } .l777-symbol-card-preview img { width: 100%; height: 100%; object-fit: contain; } .l777-symbol-card-name { font-weight: 700; font-size: 12.5px; margin-bottom: 8px; } .l777-symbol-card input[type="file"] { display: none; } .l777-symbol-card-upload-btn { display: block; width: 100%; font-size: 11px; padding: 6px; margin-bottom: 8px; } .l777-symbol-card-clear-btn { display: block; width: 100%; font-size: 11px; padding: 6px; margin-top: -4px; margin-bottom: 8px; color: var(--danger); border-color: rgba(246,87,45,.3); } .l777-symbol-card-resize-btn { display: block; width: 100%; font-size: 11px; padding: 6px; margin-top: -4px; color: var(--accent); border-color: rgba(124,92,255,.3); } .l777-symbol-card input[type="number"] { width: 100%; text-align: center; } .l777-shell { display: flex; flex-direction: column; height: 100dvh; height: 100vh; padding: 10px 14px 14px; box-sizing: border-box; overflow: hidden; } .l777-topbar { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-bottom: 10px; } .l777-topbar .gp-back-btn { flex-shrink: 0; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; width: 32px; height: 32px; font-size: 18px; color: var(--text); } .l777-user { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--text-dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .l777-avatar { font-size: 14px; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--panel-2); color: var(--text-dim); font-weight: 700; } .l777-coinpill { display: flex; align-items: center; justify-content: flex-start; gap: 6px; background: linear-gradient(135deg, rgba(255,182,72,.22), rgba(255,182,72,.08)); border: 1px solid rgba(255,182,72,.5); border-radius: 999px; padding: 6px 10px; font-weight: 800; font-size: 13.5px; color: #ffe89a; flex-shrink: 0; height: 32px; overflow: visible; width: 100px; box-sizing: border-box; white-space: nowrap; } /* FIX: this pill had no fixed width, so it grew wider every time the coin balance's displayed text got longer (e.g. "744K" -> "1.2M") — on narrower phone screens that growth pushed it into the avatar next to it. A fixed width keeps the pill's footprint constant regardless of how the number inside it changes; the number itself already always renders as a short compact form (formatCompactNumber in app.js: "744K", "1.2M", "3.4M", etc.), so this width comfortably fits every case without ever needing to resize. justify-content stays flex-start (not center) so the coin ICON never shifts position either — centering the icon+text group together would re-center (and visibly nudge) the icon sideways every time the text's width changed during a win/loss count-up animation. With flex-start, the icon is pinned to the same spot always; only the number's own right edge moves as its digits change. */ .l777-coinpill span:last-child { overflow: hidden; text-overflow: ellipsis; } /* FIX: the previous fix for a resized coin icon stretching this whole pill went too far the other way — it capped the icon at a fixed 20px no matter what size the admin actually chose (Settings → Icons → Site Icons), so the resize control looked completely broken here specifically (every other place that icon appears sized correctly). The pill's own box already stays a fixed 32px tall via height above — that alone is what stops it from growing. Letting the icon render at its real configured size and spill outside the pill's rounded edge when it's larger (overflow: visible, no cap here) keeps the pill fixed-size while actually showing the chosen icon size, instead of silently ignoring it. */ .l777-coinpill [data-panel-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .l777-settings-btn { flex-shrink: 0; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .l777-tier-badge { flex-shrink: 0; background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(124,92,255,.08)); border: 1px solid rgba(124,92,255,.5); border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 12.5px; color: #d8cfff; cursor: pointer; } .floating-multiplier-badge { position: fixed; top: 172px; right: 16px; z-index: 500; cursor: pointer; user-select: none; background: linear-gradient(135deg, rgba(255,182,72,.28), rgba(124,92,255,.18)); border: 1px solid var(--accent-3); border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 12.5px; color: #ffe89a; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,.35); } /* Same look, but sitting below the Settings button instead of inline in the topbar — used by every game whose topbar previously had it sitting inline or under the wallet pill (PVB, Color Game, Market Predictor, Reflex Tap), which could shift width as the countdown text changed length ("9m 59s" vs "10s") and end up overlapping the avatar/username on narrower screens. Settings sits at the far right of the topbar, away from the username, so anchoring here instead avoids that regardless of how the countdown text's length changes. Lucky 777's topbar is different again (it also has the x1/x2/x3 tier badge), so it keeps its own separate fixed floating position below the Jackpot Pool panel instead, via .floating-multiplier-badge above. */ .l777-settings-wrap { position: relative; flex-shrink: 0; } .multiplier-topbar-badge { cursor: pointer; user-select: none; background: linear-gradient(135deg, rgba(255,182,72,.28), rgba(124,92,255,.18)); border: 1px solid var(--accent-3); border-radius: 999px; font-weight: 800; color: #ffe89a; } .l777-settings-wrap .multiplier-topbar-badge { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 80px; box-sizing: border-box; padding: 4px 6px; font-size: 10px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .l777-jackpot-view { text-align: center; background: linear-gradient(160deg, rgba(255,182,72,.16), rgba(255,182,72,.04)); border: 1px solid rgba(255,182,72,.4); border-radius: 12px; padding: 14px 10px; margin-bottom: 22px; flex-shrink: 0; } .l777-jackpot-view .jp-lbl { font-size: 10px; letter-spacing: .14em; font-weight: 800; color: var(--accent-3); text-transform: uppercase; } .l777-jackpot-view .jp-amt { font-family: 'Sora'; font-weight: 800; font-size: 22px; color: #fff; text-shadow: 0 0 16px rgba(255,182,72,.6); margin: 2px 0 0; } .l777-feature-tier-selector { display: flex; gap: 8px; margin: 14px 0; } .l777-tier-option { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; gap: 4px; background: var(--panel-2); border: 2px solid var(--border); border-radius: 10px; padding: 10px 6px; font-size: 11.5px; color: var(--text-dim); cursor: pointer; transition: border-color .15s, background .15s; } .l777-tier-option input { position: absolute; opacity: 0; pointer-events: none; } .l777-tier-option:has(input:checked) { border-color: var(--accent); background: rgba(124,92,255,.14); color: var(--text); } .l777-tier-label strong { display: block; color: var(--accent-3); font-size: 15px; } .l777-jackpot-view .jp-sub { font-size: 11px; color: var(--text-faint); } .l777-boardwrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; } .l777-board { display: flex; justify-content: center; align-items: center; gap: 8px; position: relative; height: 100%; max-height: 340px; width: 100%; background: rgba(10,38,32,.28); border: 3px solid #a8791f; border-radius: 14px; padding: 14px; box-sizing: border-box; backdrop-filter: blur(2px); } .l777-reel { flex: 1; max-width: 120px; height: 285px; background: linear-gradient(160deg,#fdfaf2,#eae2cc); border-radius: 10px; overflow: hidden; position: relative; box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); } .l777-winlines-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; } /* Two stacked strokes (soft blurred aura + crisp gradient core) read as a real glowing "laser" line instead of a single flat-colored stroke with a CSS drop-shadow, which tended to look thin and flat. */ .l777-winline-glow { stroke: #ffb648; stroke-width: 7; stroke-linecap: round; opacity: .5; filter: blur(3px); } .l777-winline-core { stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(255,220,140,.95)); } /* Once the line has finished drawing, a slow ongoing glow pulse keeps it feeling alive rather than sitting there static for the rest of the win display. */ .l777-winline-group.drawn .l777-winline-glow, .l777-winline-group.drawn .l777-winline-core { animation: l777LinePulse 1.1s ease-in-out infinite; } @keyframes l777LinePulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } } /* One spark per matched symbol — pops in with a slight cascade right after the line lands, so the win visibly "hits" each character instead of just a line appearing between them. */ .l777-winline-spark { fill: #fff6d8; opacity: 0; filter: drop-shadow(0 0 7px rgba(255,220,140,1)); } .l777-winline-spark.pop { animation: l777SparkPop .5s cubic-bezier(.2,1.4,.4,1) forwards; } @keyframes l777SparkPop { 0% { r: 0; opacity: 0; } 45% { r: 5; opacity: 1; } 100% { r: 2.5; opacity: .85; } } .l777-strip { display: flex; flex-direction: column; } .l777-strip.spinning { filter: blur(1.5px); } @keyframes l777SpinLoop { from { transform: translateY(-285px); } to { transform: translateY(0); } } .l777-reel.spin-glow { box-shadow: 0 0 0 3px rgba(255,214,120,.9), 0 0 22px 6px rgba(255,182,72,.75), inset 0 0 14px rgba(255,214,120,.35); animation: l777SpinGlowPulse .5s ease-in-out infinite; } @keyframes l777SpinGlowPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255,214,120,.9), 0 0 22px 6px rgba(255,182,72,.75), inset 0 0 14px rgba(255,214,120,.35); } 50% { box-shadow: 0 0 0 3px rgba(255,214,120,1), 0 0 32px 10px rgba(255,182,72,.95), inset 0 0 18px rgba(255,214,120,.5); } } .l777-cell { height: 95px; display: flex; align-items: center; justify-content: center; font-size: 40px; font-family: 'Sora'; font-weight: 800; flex-shrink: 0; } .l777-reel.jackpot { animation: l777Jackpot .5s ease-in-out infinite; box-shadow: 0 0 30px rgba(255,182,72,1); } @keyframes l777Jackpot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } } .l777-msgrow { flex-shrink: 0; text-align: center; font-size: 12px; color: var(--text-dim); padding: 8px 4px; min-height: 16px; } .l777-controlsrow { flex-shrink: 0; display: flex; align-items: center; gap: 8px; } .l777-stepbtn { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(124,92,255,.28), rgba(124,92,255,.12)); border: 1px solid rgba(124,92,255,.5); color: #fff; font-size: 22px; font-weight: 800; flex-shrink: 0; cursor: pointer; } .l777-betbox, .l777-winbox { flex: 1; min-width: 0; text-align: center; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 6px 4px; } .l777-ctrllbl { display: block; font-size: 9.5px; letter-spacing: .12em; font-weight: 800; color: var(--text-faint); text-transform: uppercase; } .l777-betbox span:last-child, .l777-winbox span:last-child { display: block; font-family: 'Sora'; font-weight: 800; font-size: 17px; color: #fff; } .l777-betbox-input { display: block; width: 100%; font-family: 'Sora'; font-weight: 800; font-size: 17px; color: #fff; background: transparent; border: none; text-align: center; padding: 0; -moz-appearance: textfield; } .l777-betbox-input::-webkit-outer-spin-button, .l777-betbox-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .l777-betbox-input:focus { outline: none; } .l777-winbox span:last-child { color: var(--accent-3); } .l777-spinbtn { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 0 20px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #ff5fb0, #c837e0); border: none; color: #fff; font-weight: 800; font-size: 14.5px; box-shadow: 0 4px 16px rgba(200,55,224,.5); cursor: pointer; } .l777-spinbtn:disabled { opacity: .55; cursor: not-allowed; } .l777-settings-overlay { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; background: rgba(6,8,18,.72); backdrop-filter: blur(3px); padding: 20px; } .l777-settings-card { width: 100%; max-width: 360px; max-height: 82vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); font-size: 13.5px; } .l777-settings-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .l777-settings-head h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14.5px; } .l777-settings-close { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; width: 26px; height: 26px; color: var(--text); font-size: 12px; cursor: pointer; } /* ---------- quantity stepper (shop buying, admin inventory removal) ---------- */ .qty-stepper { display: flex; align-items: center; gap: 6px; margin-top: 8px; } .qty-stepper input { flex: 1; text-align: center; padding: 6px 4px; } .qty-btn { width: 26px; height: 26px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-weight: 800; cursor: pointer; flex-shrink: 0; } .qty-btn:hover { border-color: var(--accent); } /* ---------- Color Game ---------- */ .cg-wallet { text-align: center; font-size: 12.5px; color: var(--text-dim); margin-bottom: 10px; font-weight: 600; } .cg-status { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-bottom: 14px; } .cg-phase { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); font-weight: 700; } .cg-timer { font-family: 'Sora'; font-weight: 800; font-size: 22px; color: var(--accent-3); } .cg-blocks { display: flex; justify-content: center; gap: 14px; margin-bottom: 14px; } .cg-block { width: 76px; height: 76px; border-radius: 14px; background: var(--panel-2); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; color: #fff; transition: transform .1s; text-transform: uppercase; } .cg-blocks-big { gap: 18px; margin-bottom: 18px; } .cg-block-big { width: 110px; height: 110px; border-radius: 20px; font-size: 15px; box-shadow: 0 6px 16px rgba(0,0,0,.3); } .cg-block.rolling { animation: cgShake .12s linear infinite; } @keyframes cgShake { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } } .cg-block.settle { animation: cgSettle .4s cubic-bezier(.34,1.6,.64,1); } @keyframes cgSettle { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } } .cg-wheel-popup { display: none; position: fixed; inset: 0; z-index: 920; background: rgba(4,10,7,.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 20px; } .cg-wheel-popup.show { display: flex; animation: fadein .25s ease; } .cg-wheel-popup-box { text-align: center; } .cg-wheel-popup-title { font-family: 'Sora'; font-weight: 800; font-size: 22px; color: var(--accent-3); text-shadow: 0 0 20px rgba(255,182,72,.6); animation: idleShine 1s ease-in-out infinite; } .cg-wheel-popup-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; margin-bottom: 8px; } .cg-wheel-popup-timer { font-family: 'Sora'; font-weight: 800; font-size: 15px; color: var(--accent-3); margin-bottom: 12px; } .cg-wheel-stage { position: relative; display: flex; flex-direction: column; align-items: center; } .cg-wheel-svg { width: 320px; height: 320px; max-width: 88vw; max-height: 88vw; filter: drop-shadow(0 10px 26px rgba(0,0,0,.55)) drop-shadow(0 0 0 3px rgba(255,182,72,.2)); } .cg-wheel-pointer { font-size: 30px; color: #ffb648; text-shadow: 0 2px 6px rgba(0,0,0,.6); margin-bottom: -10px; z-index: 2; filter: drop-shadow(0 0 6px rgba(255,182,72,.5)); } .cg-wheel-result-text { font-family: 'Sora'; font-weight: 800; font-size: 20px; color: var(--text); min-height: 30px; margin-top: 18px; } .cg-color-grid { display: grid; grid-template-columns: repeat(3, 1fr); justify-content: center; gap: 8px; max-width: 360px; width: 100%; margin: 0 auto; transition: opacity .2s; } .cg-color-grid-compact { gap: 8px; } .cg-color-card { position: relative; width: 100%; aspect-ratio: 1; border-radius: 12px; border: 3px solid var(--border); overflow: hidden; cursor: pointer; transition: border-color .15s, transform .1s, box-shadow .15s; } .cg-color-card.active { border-color: #fff; box-shadow: 0 0 0 3px var(--accent), 0 0 18px rgba(124,92,255,.55); transform: scale(1.03); } .cg-color-swatch { position: absolute; inset: 0; } .cg-color-card-bet { position: absolute; top: 7px; right: 7px; background: rgba(10,10,20,.75); border: 1px solid rgba(255,232,154,.5); border-radius: 8px; padding: 3px 8px; font-size: 12px; font-weight: 800; color: #ffe89a; display: none; } .cg-color-card.active .cg-color-card-bet { display: block; } @media (max-width: 640px) { /* Sign In and Sign Up: remove the boxed "card" look on phones — no background panel, border, shadow, or rounded corners — so the form just sits flush in the page like a native mobile screen instead of floating inside a container that eats into already limited width. Kept for wider/desktop views, where a centered card is the more natural presentation. */ .auth-wrap { padding: 16px 12px; } .auth-card, .auth-card.wide { max-width: 100%; background: none; border: none; box-shadow: none; border-radius: 0; padding: 8px 4px; } .auth-card::before { display: none; } } @media (max-width: 920px) { .signin-shell { flex-direction: column; } /* Mobile: only the sign-in form itself should show — the marketing showcase panel (logo, "Grow your money" description, growth chart) is desktop-only from here down. .signin-formside already centers its content both ways, so with the showcase gone the sign-in card just centers cleanly in the full viewport height. */ .signin-showcase { display: none; } } @media (max-width: 880px) { .row-2, .row-3 { grid-template-columns: 1fr; } .chat-shell { grid-template-columns: 1fr; height: auto; } .chat-list { max-height: 160px; border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 10px; } .main { padding: 18px; } } .hamburger-btn { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 18px; cursor: pointer; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(6,8,20,.65); backdrop-filter: blur(2px); z-index: 950; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .sidebar-overlay.show { opacity: 1; pointer-events: auto; } @media (max-width: 860px) { /* The sidebar becomes a hamburger-triggered slide-in drawer on phones/tablets — fixed off-screen by default, slides into view over a dark backdrop when opened, and closes on backdrop tap or picking a nav item. A full permanent vertical sidebar doesn't fit a narrow screen without eating all the available width. */ .shell { flex-direction: row; } .hamburger-btn { display: flex; } .sidebar-overlay { display: block; } .sidebar { position: fixed; top: 0; left: 0; width: 250px; height: 100vh; transform: translateX(-100%); transition: transform .25s ease; z-index: 960; flex-direction: column; padding: 20px 16px; } .sidebar.mobile-open { transform: translateX(0); } .main { margin-left: 0; padding: 16px; } .nav-item.nav-icon-only { padding: 9px 10px; } .brand .mark { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; } .brand-avatar-wrap .mark { border-radius: 50%; } .brand .name { font-size: 15px; } .brand .name-logo { height: 24px; } .brand .sub { font-size: 9.5px; } .topbar { flex-wrap: wrap; row-gap: 10px; } .topbar-left { min-width: 0; flex: 1; gap: 10px; } .topbar h1 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar .meta { display: none; } .topbar-wallet { padding: 7px 10px; } .topbar-wallet .val { font-size: 12px; } .user-chip .nm { display: none; } } @media (min-width: 861px) { .hamburger-btn, .sidebar-overlay { display: none; } } /* ---------- Rewards ---------- */ .chest-claim-wrap { text-align: center; padding: 22px 0 6px; perspective: 500px; } .lucky-num-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .lucky-num-btn { aspect-ratio: 1; border-radius: 14px; border: 2px solid var(--border); background: var(--panel-2); color: var(--text); font-family: 'Sora'; font-weight: 800; font-size: 26px; cursor: pointer; transition: all .15s; } .lucky-num-btn:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); } .lucky-num-btn:disabled { opacity: .4; cursor: not-allowed; } .puzzle-piece.filled { opacity: 1; filter: none; transform: scale(1.1); } .mystery-box-grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 20px; } .mystery-box-grid .mystery-box-btn { margin: 0; width: 72px; } .mystery-box-grid .mystery-box-btn .chest-img { width: 48px; height: 48px; } .mystery-box-btn.opened { opacity: .6; } .mystery-box-btn { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 auto; } .mystery-box-btn:disabled { opacity: .5; cursor: not-allowed; } .mystery-box-btn .chest-img { width: 150px; height: 150px; object-fit: contain; transition: transform .15s; } .mystery-box-btn:hover:not(:disabled) .chest-img { transform: scale(1.06) rotate(-2deg); } .dsw-wheel-stage { position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px 0; } .dsw-wheel-svg { width: 290px; height: 290px; max-width: 88vw; max-height: 88vw; filter: drop-shadow(0 10px 22px rgba(0,0,0,.5)) drop-shadow(0 0 0 3px rgba(127,224,200,.18)); } .dsw-wheel-pointer { font-size: 26px; color: #7fe0c8; text-shadow: 0 2px 6px rgba(0,0,0,.6); margin-bottom: -8px; z-index: 2; filter: drop-shadow(0 0 6px rgba(127,224,200,.5)); } .chest-btn { background: none; border: none; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px; } .chest-btn:disabled { cursor: not-allowed; } .chest-emoji { position: relative; width: 150px; height: 128px; display: inline-flex; align-items: center; justify-content: center; transition: transform .18s ease; } .chest-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0,0,0,.35)); transition: filter .3s ease; } .chest-btn:not(:disabled):hover .chest-emoji { transform: scale(1.05); } .chest-emoji.locked .chest-img { filter: grayscale(.65) drop-shadow(0 8px 14px rgba(0,0,0,.3)); opacity: .55; } .chest-glow-burst { position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(255,246,216,.95) 0%, rgba(255,246,216,0) 70%); opacity: 0; transition: opacity .3s ease, width .4s ease, height .4s ease; } .chest-emoji.opened .chest-glow-burst { opacity: 1; width: 200px; height: 200px; } .chest-emoji.opened .chest-img { filter: drop-shadow(0 12px 20px rgba(0,0,0,.35)) drop-shadow(0 0 26px rgba(255,220,120,.85)); } .chest-sparkles { position: absolute; inset: 0; pointer-events: none; } .chest-sparkles .spark { position: absolute; top: 50%; left: 50%; font-size: 18px; color: #ffe89a; opacity: 0; } .chest-emoji.opened .chest-sparkles .spark { animation: chestSparkOut .8s ease-out forwards; } .chest-emoji.opened .chest-sparkles .spark:nth-child(1) { animation-delay: .05s; } .chest-emoji.opened .chest-sparkles .spark:nth-child(2) { animation-delay: .1s; } .chest-emoji.opened .chest-sparkles .spark:nth-child(3) { animation-delay: .1s; } .chest-emoji.opened .chest-sparkles .spark:nth-child(4) { animation-delay: .15s; } .chest-emoji.opened .chest-sparkles .spark:nth-child(5) { animation-delay: .15s; } .chest-emoji.opened .chest-sparkles .spark:nth-child(6) { animation-delay: .2s; } .chest-emoji.shaking { animation: chestShake .65s ease-in-out; } .chest-emoji.opened { animation: chestPop .4s cubic-bezier(.34,1.56,.64,1); } .chest-label { font-size: 13px; font-weight: 700; color: var(--text); } .chest-btn:disabled .chest-label { color: var(--text-faint); font-weight: 500; } @keyframes chestShake { 0%, 100% { transform: rotate(0deg) scale(1); } 10% { transform: rotate(-6deg) scale(1.02); } 20% { transform: rotate(6deg) scale(1.02); } 30% { transform: rotate(-8deg) scale(1.03); } 40% { transform: rotate(8deg) scale(1.03); } 50% { transform: rotate(-6deg) scale(1.04); } 60% { transform: rotate(6deg) scale(1.05); } 70% { transform: rotate(-4deg) scale(1.06); } 80% { transform: rotate(4deg) scale(1.07); } 90% { transform: rotate(-2deg) scale(1.08); } } @keyframes chestPop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } } @keyframes chestSparkOut { 0% { opacity: 0; transform: translate(-50%,-50%) translate(0,0) scale(.4); } 30% { opacity: 1; transform: translate(-50%,-50%) translate(calc(var(--sx) * .5), calc(var(--sy) * .5)) scale(1.3); } 100% { opacity: 0; transform: translate(-50%,-50%) translate(var(--sx), var(--sy)) scale(.7); } } /* reward-reveal popup — shown right after a chest is opened */ .reward-reveal-backdrop { position: fixed; inset: 0; background: rgba(4,6,14,.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: rrFadeIn .2s ease; } @keyframes rrFadeIn { from { opacity: 0; } to { opacity: 1; } } .reward-reveal-box { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--border); border-radius: 22px; padding: 38px 34px; text-align: center; max-width: 320px; width: 88%; box-shadow: var(--shadow); position: relative; overflow: hidden; animation: rrPopIn .45s cubic-bezier(.3,1.6,.4,1); } @keyframes rrPopIn { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } } .reward-reveal-box .rr-burst { font-size: 52px; margin-bottom: 4px; animation: rrIconPop .6s ease .1s both; } @keyframes rrIconPop { 0% { transform: scale(0) rotate(-20deg); } 60% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0deg); } } .reward-reveal-box .rr-amt { font-family: 'Sora'; font-weight: 800; font-size: 34px; color: var(--success); margin: 8px 0 2px; animation: rrAmtIn .5s ease .25s both; } @keyframes rrAmtIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .reward-reveal-box .rr-day { font-size: 12.5px; color: var(--text-faint); margin-bottom: 20px; } .reward-reveal-box .rr-particle { position: absolute; font-size: 20px; opacity: 0; animation: rrParticle 1s ease forwards; pointer-events: none; } @keyframes rrParticle { 0% { opacity: 1; transform: translate(0,0) scale(1) rotate(0deg); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4) rotate(var(--rot)); } } .reward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; justify-content: center; } .reward-day { background: var(--panel-2); border: 2px solid var(--border); border-radius: 10px; padding: 8px 4px; text-align: center; position: relative; } .reward-day.claimed { border-color: var(--accent); background: rgba(124,92,255,.12); opacity: .8; } .reward-day.next { border-color: var(--accent-3); box-shadow: 0 0 12px rgba(255,182,72,.4); animation: idleShine 1.6s ease-in-out infinite; } .rd-num { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; } .rd-amt { font-family: 'Sora'; font-weight: 800; font-size: 12px; color: var(--text); margin-top: 2px; } .rd-check { position: absolute; top: -6px; right: -6px; background: var(--grad); color: #fff; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; } /* ---------- Game play modals (large, opened from a hub card) ---------- */ .game-modal-overlay { display: none; position: fixed; inset: 0; z-index: 910; background: rgba(4,10,7,.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); align-items: center; justify-content: center; padding: 24px; } .game-modal-overlay.show { display: flex; animation: fadein .2s ease; } .game-modal-box { position: relative; width: 100%; max-width: 640px; max-height: 92vh; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; } .game-modal-scroll { overflow-y: auto; padding: 20px; } .game-modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 7px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; cursor: pointer; } .game-modal-close:hover { border-color: var(--accent); } @media (max-width: 600px) { .game-modal-overlay { padding: 0; } .game-modal-box { max-width: 100%; max-height: 100vh; max-height: 100dvh; height: 100vh; height: 100dvh; border-radius: 0; } .game-modal-scroll { display: flex; flex-direction: column; justify-content: flex-start; flex: 1; min-height: 0; } } /* ---------- Cart ---------- */ .cart-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .cart-row:last-child { border-bottom: none; } .cart-thumb { width: 48px; height: 48px; border-radius: 10px; background: var(--panel-2); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; font-size: 22px; } .cart-thumb img { width: 100%; height: 100%; object-fit: cover; } .cart-info { flex: 1; } .cart-total-row { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--border); } .cart-total-amt { font-family: 'Sora'; font-weight: 800; font-size: 18px; color: var(--accent-3); } /* ---------- Custom scrollbars (replaces the native browser scrollbar everywhere) ---------- */ * { scrollbar-width: thin; scrollbar-color: var(--accent-2) var(--panel-2); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--panel-2); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-radius: 10px; border: 2px solid var(--panel-2); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #34e07a, var(--accent)); } ::-webkit-scrollbar-corner { background: var(--panel-2); } /* On phone-width screens (this covers the Android app entirely, since it's always a narrow phone viewport) the always-visible custom scrollbar just eats into limited screen width for little benefit — content still scrolls fine with touch. Hide it there; keep it for wider/desktop views where a visible scrollbar is more expected. */ @media (max-width: 768px) { * { scrollbar-width: none; } ::-webkit-scrollbar { display: none; width: 0; height: 0; } } .id-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; justify-content: center; } .id-type-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 10px; text-align: center; cursor: pointer; transition: border-color .15s, transform .15s; } .id-type-card:hover { border-color: var(--accent); transform: translateY(-2px); } .id-type-ic { font-size: 28px; margin-bottom: 8px; } .id-type-lbl { font-size: 11.5px; font-weight: 600; } /* ---------- Home right-side panel ---------- */ .home2-welcome { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; margin-bottom: 20px; } .home2-welcome-eyebrow { color: var(--text-dim); font-size: 14px; } .home2-welcome-name { font-size: 26px; font-weight: 800; margin: 4px 0 6px; } .home2-welcome-sub { color: var(--text-faint); font-size: 13.5px; } .home2-quote { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; position: relative; } .home2-quote-mark { position: absolute; top: 10px; left: 16px; font-size: 34px; color: var(--accent); opacity: .5; font-family: Georgia, serif; line-height: 1; } .home2-quote-text { font-size: 14px; font-weight: 600; padding-left: 6px; margin-top: 8px; } .home2-quote-sub { color: var(--text-faint); font-size: 12px; margin-top: 6px; padding-left: 6px; } .home2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 14px; margin-bottom: 22px; } .home2-stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: flex; align-items: center; gap: 12px; transition: transform .2s, border-color .2s; } .home2-stat-card:hover { transform: translateY(-2px); border-color: var(--accent); } .home2-stat-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .home2-stat-gold .home2-stat-icon { background: rgba(255,182,72,.14); } .home2-stat-blue .home2-stat-icon { background: rgba(79,140,255,.14); } .home2-stat-green .home2-stat-icon { background: rgba(45,232,163,.14); } .home2-stat-fire .home2-stat-icon { background: rgba(255,77,109,.14); } .home2-stat-lbl { font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; } .home2-stat-val { font-family: 'Sora'; font-size: 20px; font-weight: 800; margin-top: 2px; } .home2-layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; } .home2-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; } .home2-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .home2-panel-head h3 { margin: 0; font-size: 15px; } .home2-activity-list { display: flex; flex-direction: column; gap: 4px; } .home2-activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); } .home2-activity-item:last-child { border-bottom: none; } .home2-activity-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--panel-2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; } .home2-activity-body { flex: 1; min-width: 0; } .home2-activity-title { font-size: 12.5px; font-weight: 600; } .home2-activity-count { font-size: 11px; font-weight: 800; color: var(--accent-3); } .home2-activity-msg { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; } .home2-activity-time { font-size: 10.5px; color: var(--text-faint); flex-shrink: 0; white-space: nowrap; } .home2-activity-empty { color: var(--text-faint); font-size: 13px; text-align: center; padding: 20px 0; } @media (max-width: 880px) { .home2-welcome { grid-template-columns: 1fr; } .home2-layout { grid-template-columns: 1fr; } } .home-main { flex: 1; min-width: 0; } .brand-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; } .brand-avatar-wrap .mark { border-radius: 50%; overflow: hidden; } .spc-status { font-size: 9px; color: var(--text-faint); white-space: nowrap; max-width: 64px; overflow: hidden; text-overflow: ellipsis; } .scp-msg.mine { background: rgba(124,92,255,.14); } @media (max-width: 980px) { } /* ---------- Collapsible report sections ---------- */ .report-toggle-head { cursor: pointer; user-select: none; } .report-toggle-head:hover h3 { color: var(--accent); } .report-chevron { display: inline-block; font-size: 13px; color: var(--text-faint); margin-left: 4px; transition: transform .15s; } .report-body { animation: fadein .2s ease; } .vip-badge { display: inline-block; background: var(--grad-gold); color: #2a1a00; font-family: 'Sora'; font-weight: 800; font-size: 10px; padding: 2px 8px; border-radius: 20px; letter-spacing: .03em; vertical-align: middle; } .vip-progress-track { height: 8px; border-radius: 6px; background: var(--panel-2); overflow: hidden; margin-top: 8px; } .vip-progress-fill { height: 100%; background: var(--grad-gold); border-radius: 6px; transition: width .3s; } /* ---------- Friends ---------- */ .friends-layout { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: flex-start; } .friends-side { display: flex; flex-direction: column; gap: 16px; } .friend-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; transition: background .15s; } .friend-card:hover { background: var(--panel-2); } .friend-card.active { background: rgba(124,92,255,.14); } .friend-avatar-wrap { position: relative; flex-shrink: 0; } .friend-avatar-wrap .avatar { width: 38px; height: 38px; font-size: 14px; } .online-dot { position: absolute; bottom: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--text-faint); border: 2px solid var(--panel); } .online-dot.online { background: var(--success); } .friend-name { font-weight: 600; font-size: 13px; } .friend-sub { font-size: 11px; color: var(--text-faint); } .friend-search-result { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 10px; } .friend-search-result:hover { background: var(--panel-2); } .friends-chat { height: 560px; } .friends-chat .panel { height: 100%; box-sizing: border-box; } .friend-chat-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; } #friendChatMsgs { flex: 1; overflow-y: auto; } .btn-icon { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; width: 38px; height: 38px; font-size: 16px; cursor: pointer; flex-shrink: 0; } .emoji-picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px; margin-top: 8px; max-height: 140px; overflow-y: auto; } .emoji-picker span { cursor: pointer; text-align: center; font-size: 18px; padding: 4px; border-radius: 6px; } .emoji-picker span:hover { background: var(--panel); } .msg img.chat-img { max-width: 180px; border-radius: 10px; display: block; margin-top: 4px; } @media (max-width: 880px) { .friends-layout { grid-template-columns: 1fr; } .friends-chat { height: 460px; } } .admin-setup-banner { background: rgba(255,182,72,.1); border: 1px solid rgba(255,182,72,.35); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; } /* ---------- Admin dashboard: mobile polish ---------- */ @media (max-width: 640px) { .main { padding: 14px 12px; } .grid-stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .stat-card { padding: 14px; } .stat-card .val { font-size: 20px; } .stat-card .lbl { font-size: 10.5px; } .stat-card .ic { font-size: 18px; right: 10px; top: 10px; } .panel { padding: 14px; margin-bottom: 14px; } .panel-head h3 { font-size: 15px; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; } .table-wrap table { min-width: 480px; } .table-wrap::after { content: ''; display: block; } .row-2, .row-3 { grid-template-columns: 1fr; gap: 10px; } .flex.gap-16.wrap { flex-direction: column; } .flex.gap-16.wrap > .panel { max-width: 100% !important; } #pageTitle { font-size: 20px; } #pageSub { font-size: 12.5px; } } /* Shared win-celebration overlay — used by showWinCelebration() in app.js. Center-screen card with a coin/diamond icon and amount, followed by a burst of particles flying to wherever the header's balance display sits on screen. */ .win-celebration-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; pointer-events: none; } .upload-progress-overlay { position: fixed; inset: 0; z-index: 10500; display: flex; align-items: center; justify-content: center; background: rgba(6,8,20,.55); backdrop-filter: blur(2px); } .upload-progress-card { background: linear-gradient(160deg, rgba(20,16,40,.97), rgba(10,10,28,.97)); border: 1.5px solid var(--border); border-radius: 16px; padding: 28px 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.5); } .upload-progress-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: uploadSpin .7s linear infinite; } @keyframes uploadSpin { to { transform: rotate(360deg); } } .upload-progress-icon-anim { color: var(--accent); } .upload-progress-scanline { animation: uploadScanline 1.4s ease-in-out infinite; } @keyframes uploadScanline { 0% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(38px); opacity: .35; } 100% { transform: translateX(0); opacity: 1; } } .upload-progress-waveform { display: flex; align-items: center; justify-content: center; gap: 4px; height: 38px; } .upload-progress-waveform span { width: 5px; background: var(--accent); border-radius: 3px; height: 10px; animation: uploadWave 1s ease-in-out infinite; } .upload-progress-waveform span:nth-child(1) { animation-delay: 0s; } .upload-progress-waveform span:nth-child(2) { animation-delay: .1s; } .upload-progress-waveform span:nth-child(3) { animation-delay: .2s; } .upload-progress-waveform span:nth-child(4) { animation-delay: .3s; } .upload-progress-waveform span:nth-child(5) { animation-delay: .4s; } @keyframes uploadWave { 0%, 100% { height: 10px; } 50% { height: 34px; } } .upload-progress-label { font-size: 13px; font-weight: 600; color: var(--text-dim); } .entry-loading-screen { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: var(--bg); transition: opacity .4s ease; } .entry-loading-screen.fade-out { opacity: 0; pointer-events: none; } .entry-loading-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: entryLoadingBgIn .5s ease forwards; } @keyframes entryLoadingBgIn { to { opacity: 1; } } .entry-loading-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; } .entry-loading-icon { width: 90px; height: 90px; object-fit: contain; animation: entryLoadingPulse 1.4s ease-in-out infinite; } @keyframes entryLoadingPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .85; } } /* Real 0-100% progress bar — the fill width and percentage text are both driven by a genuine 1-at-a-time count-up (see __setEntryLoadingTargetPct in app.js), not a straight jump between real completion percentages, so it always reads as smooth, ordinary loading (0%, 1%, 2%, ... 100%) rather than choppy jumps — while still being tied to real page readiness underneath. */ .entry-loading-progress-track { width: 200px; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.14); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); } .entry-loading-progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #7c5cff, #ffb648, #fff6d8); box-shadow: 0 0 10px rgba(255,182,72,.55); position: relative; overflow: hidden; } /* A soft traveling shimmer over the fill so the bar still feels alive even while it's holding at a given width between count-up ticks. */ .entry-loading-progress-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); width: 50%; transform: translateX(-120%); animation: entryLoadingShimmer 1.2s ease-in-out infinite; } @keyframes entryLoadingShimmer { to { transform: translateX(220%); } } .entry-loading-progress-text { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: .5px; display: flex; align-items: center; gap: 6px; } .entry-loading-progress-text .elp-arrow { color: var(--success, #2de8a3); font-size: 13px; animation: entryLoadingArrowPop .4s ease; } @keyframes entryLoadingArrowPop { from { transform: translateY(4px) scale(.5); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .entry-loading-progress-label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); } .result-notif-overlay { position: fixed; inset: 0; z-index: 9800; display: flex; align-items: flex-start; justify-content: center; padding-top: 22vh; pointer-events: none; } .result-notif-card { padding: 16px 28px; border-radius: 14px; max-width: 320px; text-align: center; background: linear-gradient(160deg, rgba(20,16,40,.95), rgba(10,10,28,.95)); border: 1.5px solid var(--border); box-shadow: 0 12px 40px rgba(0,0,0,.5); opacity: 0; transform: scale(.85) translateY(10px); transition: opacity .25s ease, transform .25s cubic-bezier(.2,1.4,.4,1); } .result-notif-overlay.show .result-notif-card { opacity: 1; transform: scale(1) translateY(0); } .result-notif-msg { font-size: 14px; font-weight: 600; color: var(--text); } .result-notif-success { border-color: rgba(126,231,135,.4); } .result-notif-success .result-notif-msg { color: #7ee787; } .result-notif-error { border-color: rgba(255,138,138,.4); } .result-notif-error .result-notif-msg { color: #ff8a8a; } .result-notif-info .result-notif-msg { color: var(--text-dim); } .win-celebration-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 32px; border-radius: 18px; background: linear-gradient(160deg, rgba(20,16,40,.94), rgba(10,10,28,.94)); border: 1.5px solid rgba(255,182,72,.45); box-shadow: 0 0 50px rgba(255,182,72,.25), 0 12px 40px rgba(0,0,0,.5); animation: wcCardIn .45s cubic-bezier(.2,1.4,.4,1) both, wcCardPulse 1.1s ease-in-out .45s infinite; transition: opacity .25s ease; } @keyframes wcCardIn { 0% { transform: scale(.4) translateY(20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } @keyframes wcCardPulse { 0%, 100% { box-shadow: 0 0 50px rgba(255,182,72,.25), 0 12px 40px rgba(0,0,0,.5); } 50% { box-shadow: 0 0 70px rgba(255,182,72,.4), 0 12px 40px rgba(0,0,0,.5); } } .win-celebration-icon { width: 52px; height: 52px; animation: wcIconSpin 1.6s ease-in-out infinite; } .win-celebration-icon svg, .win-celebration-icon img { width: 100%; height: 100%; object-fit: contain; } @keyframes wcIconSpin { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(8deg) scale(1.08); } } .win-celebration-label { font-size: 14px; font-weight: 700; color: var(--text-faint, #9aa4c7); letter-spacing: .3px; text-transform: uppercase; } .win-celebration-amount { font-size: 34px; font-weight: 900; color: #ffe89a; text-shadow: 0 0 20px rgba(255,182,72,.5); } .win-celebration-particles { position: fixed; inset: 0; pointer-events: none; } .win-celebration-particle { position: fixed; width: 26px; height: 26px; transform: translate(-50%, -50%); animation: wcParticleFly .75s cubic-bezier(.3,0,.6,1) forwards; } .win-celebration-particle svg, .win-celebration-particle img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255,182,72,.6)); } @keyframes wcParticleFly { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--wc-dx)), calc(-50% + var(--wc-dy))) scale(.35); opacity: 0; } } .coin-fly-particle { position: fixed; font-size: 20px; z-index: 9999; pointer-events: none; transform: translate(-50%, -50%) scale(1); opacity: 1; filter: drop-shadow(0 0 6px rgba(255,182,72,.6)); } .coin-fly-particle.flying { transition: transform .55s cubic-bezier(.3,0,.6,1), opacity .55s ease-in; transform: translate(calc(-50% + var(--cf-dx)), calc(-50% + var(--cf-dy))) scale(.5); opacity: 0; } /* ---------- System Update Progress Animation ---------- */ .update-progress-error { color: var(--danger, #e0455a); font-weight: 600; text-align: center; padding: 16px 0; } /* v2: circular progress ring + vertical step list, replacing the old flat spinner+pills */ .update-progress-v2 { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 20px 4px 8px; } .upv2-ring-wrap { position: relative; width: 100px; height: 100px; } .upv2-ring { width: 100%; height: 100%; transform: rotate(-90deg); } .upv2-ring-track { fill: none; stroke: var(--border); stroke-width: 7; } .upv2-ring-fill { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .5s cubic-bezier(.4,0,.2,1); filter: drop-shadow(0 0 6px rgba(124,92,255,.5)); } .upv2-ring-fill-complete { stroke: #3ddc84; stroke-dasharray: 264; stroke-dashoffset: 0; filter: drop-shadow(0 0 8px rgba(61,220,132,.6)); } .upv2-ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; font-family: 'Sora', sans-serif; } .upv2-ring-complete .upv2-ring-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; animation: upv2CheckPop .4s cubic-bezier(.34,1.56,.64,1) both; } .upv2-ring-check svg path { stroke: #3ddc84; } @keyframes upv2CheckPop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .upv2-text { font-weight: 700; font-size: 13.5px; text-align: center; min-height: 18px; transition: opacity .2s; } .upv2-text-done { color: #3ddc84; } .upv2-steps { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 320px; } .upv2-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; } .upv2-step-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); background: var(--panel-2); display: flex; align-items: center; justify-content: center; transition: background .3s, border-color .3s; flex-shrink: 0; } .upv2-step.active .upv2-step-dot { border-color: var(--accent); background: var(--accent); animation: upv2DotPulse 1s ease-in-out infinite; } .upv2-step.done .upv2-step-dot { border-color: #3ddc84; background: #3ddc84; } .upv2-step.done .upv2-step-dot svg { animation: upv2CheckPop .3s ease both; } @keyframes upv2DotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(124,92,255,.5); } 50% { box-shadow: 0 0 0 6px rgba(124,92,255,0); } } .upv2-step-label { font-size: 10px; font-weight: 600; color: var(--text-faint); white-space: nowrap; } .upv2-step.active .upv2-step-label { color: var(--accent); font-weight: 800; } .upv2-step.done .upv2-step-label { color: #3ddc84; } .upv2-step-line { flex: 1; height: 2px; background: var(--border); margin: 0 4px 16px; min-width: 12px; transition: background .3s; } .upv2-step-line.done { background: #3ddc84; }