/* ══════════════════════════════════════════════════════════════ CASEOBJET — Premium Prize Box UI Stylesheet (premios reales) ══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800;900&family=Rajdhani:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap'); /* ── Design Tokens ── */ :root { --bg-deep: #04060b; --bg-dark: #080c14; --bg-panel: rgba(12, 16, 28, 0.85); --bg-card: rgba(14, 18, 32, 0.9); --border-color: rgba(255, 255, 255, 0.06); --border-glow: rgba(124, 92, 255, 0.18); --text-primary: #eef0f7; --text-secondary: #8b8fa3; --text-muted: #4a5066; /* Premium Palette (violeta -> cian) */ --color-fire: #7c5cff; --color-magenta: #22d3ee; --color-cyan: #22d3ee; --color-bronze: #cd7f32; --color-silver: #b4c4d9; --color-gold: #ffc107; --color-diamond: #7c5cff; --color-admin: #ff2d55; /* Rarities */ --color-common: #7a8599; --color-rare: #2196f3; --color-epic: #ab47bc; --color-legendary: #ff9800; /* Glow Shadows */ --glow-common: 0 0 12px rgba(122, 133, 153, 0.3); --glow-rare: 0 0 18px rgba(33, 150, 243, 0.5); --glow-epic: 0 0 22px rgba(171, 71, 188, 0.6); --glow-legendary: 0 0 30px rgba(255, 152, 0, 0.7); /* Accent Gradient */ --gradient-fire: linear-gradient(135deg, #7c5cff 0%, #22d3ee 100%); --gradient-gold: linear-gradient(135deg, #ffc107 0%, #ff9800 100%); } /* ── Reset ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── Base ── */ html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } body { background: var(--bg-deep); color: var(--text-primary); font-family: 'Rajdhani', 'Inter', sans-serif; font-weight: 500; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; position: relative; } /* Animated grid background */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 15% 10%, rgba(124, 92, 255, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 85% 90%, rgba(171, 71, 188, 0.05) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(0, 229, 255, 0.02) 0%, transparent 60%); pointer-events: none; z-index: 0; } /* Subtle grid overlay */ body::after { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } /* ── Scrollbars ── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--bg-deep); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--color-fire), var(--color-magenta)); border-radius: 10px; } /* ── Glass Panel ── */ .glass-panel { background: var(--bg-panel); border: 1px solid var(--border-color); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03); position: relative; z-index: 1; } /* ══════════════════════════════════════════════════════════════ HEADER / NAV BAR ══════════════════════════════════════════════════════════════ */ header { border-bottom: 1px solid rgba(124, 92, 255, 0.1); background: rgba(4, 6, 11, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 100; } header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-fire), var(--color-magenta), transparent); opacity: 0.4; } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0.8rem 2rem; display: flex; justify-content: space-between; align-items: center; } .logo { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.4rem; letter-spacing: 3px; background: var(--gradient-fire); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: flex; align-items: center; gap: 10px; text-decoration: none; text-transform: uppercase; position: relative; } .logo span { font-size: 1.6rem; -webkit-text-fill-color: initial; filter: drop-shadow(0 0 8px rgba(124, 92, 255, 0.5)); } .user-info { display: flex; align-items: center; gap: 1rem; } .balance-tag { background: rgba(255, 193, 7, 0.08); border: 1px solid rgba(255, 193, 7, 0.25); color: var(--color-gold); padding: 0.5rem 1.2rem; border-radius: 50px; font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; box-shadow: 0 0 15px rgba(255, 193, 7, 0.08); font-family: 'Orbitron', sans-serif; letter-spacing: 1px; } .logout-btn { color: var(--text-secondary); text-decoration: none; font-size: 0.8rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; transition: all 0.3s; border: 1px solid rgba(255,255,255,0.08); padding: 0.5rem 1rem; border-radius: 8px; position: relative; overflow: hidden; } .logout-btn:hover { color: var(--color-admin); border-color: var(--color-admin); background: rgba(255, 45, 85, 0.06); box-shadow: 0 0 12px rgba(255, 45, 85, 0.1); } /* ══════════════════════════════════════════════════════════════ AUTH PAGE (LOGIN / REGISTER) ══════════════════════════════════════════════════════════════ */ .auth-wrapper { display: flex; align-items: center; justify-content: center; flex-grow: 1; padding: 2rem 1rem; position: relative; z-index: 1; } .auth-card { width: 100%; max-width: 440px; padding: 2.5rem; position: relative; overflow: hidden; transition: max-width 0.35s ease; } /* Modo registro: ensancha la tarjeta para mostrar el formulario en 2 columnas (escritorio) */ .auth-card.register-mode { max-width: 720px; } .auth-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-fire); } .auth-header { text-align: center; margin-bottom: 2rem; } .auth-header h1 { font-family: 'Orbitron', sans-serif; font-size: 1.6rem; font-weight: 800; margin-bottom: 0.5rem; letter-spacing: 2px; text-transform: uppercase; } .auth-header p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.4; } .tabs-header { display: flex; margin-bottom: 2rem; background: rgba(0, 0, 0, 0.3); border-radius: 10px; padding: 4px; gap: 4px; } .tab-link { flex: 1; text-align: center; padding: 0.7rem; cursor: pointer; font-weight: 700; font-size: 0.8rem; color: var(--text-secondary); transition: all 0.3s; border-radius: 8px; text-transform: uppercase; letter-spacing: 1px; font-family: 'Orbitron', sans-serif; } .tab-link.active { color: #fff; background: var(--gradient-fire); box-shadow: 0 4px 15px rgba(124, 92, 255, 0.3); } .form-group { margin-bottom: 1.2rem; } .form-group label { display: block; margin-bottom: 0.4rem; font-size: 0.75rem; color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-family: 'Orbitron', sans-serif; } .form-control { width: 100%; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 0.85rem 1rem; color: var(--text-primary); font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 600; transition: all 0.3s; letter-spacing: 0.5px; } .form-control:focus { outline: none; border-color: var(--color-fire); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.1), 0 0 15px rgba(124, 92, 255, 0.08); background: rgba(0, 0, 0, 0.7); } .form-control::placeholder { color: #3a4050; font-weight: 500; } select.form-control { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } /* ── Alerts ── */ .alert { padding: 0.85rem 1.2rem; border-radius: 10px; margin-bottom: 1.5rem; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; } .alert::before { font-size: 1.1rem; } .alert-danger { background: rgba(255, 45, 85, 0.1); border: 1px solid rgba(255, 45, 85, 0.3); color: #ff6b8a; } .alert-danger::before { content: '⚠'; } .alert-success { background: rgba(0, 230, 118, 0.1); border: 1px solid rgba(0, 230, 118, 0.3); color: #00e676; } .alert-success::before { content: '✓'; } /* ══════════════════════════════════════════════════════════════ PRIMARY BUTTON — Gaming Style ══════════════════════════════════════════════════════════════ */ .btn-primary { width: 100%; background: var(--gradient-fire); border: none; padding: 1rem; color: white; font-weight: 800; font-size: 0.85rem; border-radius: 10px; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 20px rgba(124, 92, 255, 0.25); text-transform: uppercase; letter-spacing: 2px; font-family: 'Orbitron', sans-serif; position: relative; overflow: hidden; } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transition: left 0.6s; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { box-shadow: 0 6px 30px rgba(124, 92, 255, 0.4); transform: translateY(-2px); } .btn-primary:active { transform: translateY(1px); box-shadow: 0 2px 10px rgba(124, 92, 255, 0.3); } /* ══════════════════════════════════════════════════════════════ DASHBOARD / LOBBY ══════════════════════════════════════════════════════════════ */ .container { max-width: 1200px; margin: 2rem auto; padding: 0 1.5rem; width: 100%; position: relative; z-index: 1; } .section-title { font-family: 'Orbitron', sans-serif; font-size: 1.4rem; font-weight: 800; margin-bottom: 1.5rem; letter-spacing: 2px; text-transform: uppercase; position: relative; padding-left: 16px; display: flex; align-items: center; gap: 12px; } .section-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 70%; background: var(--gradient-fire); border-radius: 2px; box-shadow: 0 0 8px rgba(124, 92, 255, 0.4); } /* ── Case Grid ── */ .cases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; } /* ── Case Card ── */ .case-card { overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; cursor: pointer; border: 1px solid rgba(255,255,255,0.04); } .case-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--theme-color, var(--color-bronze)); box-shadow: 0 0 20px var(--theme-color, var(--color-bronze)); z-index: 2; } /* Animated border shimmer */ .case-card::after { content: ''; position: absolute; inset: 0; border-radius: 16px; padding: 1px; background: linear-gradient(135deg, transparent 30%, var(--theme-color) 50%, transparent 70%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s; pointer-events: none; } .case-card:hover::after { opacity: 0.5; } .case-card.bronce { --theme-color: var(--color-bronze); } .case-card.plata { --theme-color: var(--color-silver); } .case-card.oro { --theme-color: var(--color-gold); } .case-card.diamante { --theme-color: var(--color-diamond); } .case-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(var(--theme-color), 0.1); border-color: rgba(255,255,255,0.08); } .case-card-body { padding: 2rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; } /* Radial glow behind box */ .case-card-body::before { content: ''; position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 120px; height: 120px; background: radial-gradient(circle, var(--theme-color) 0%, transparent 70%); opacity: 0.08; pointer-events: none; transition: opacity 0.4s; } .case-card:hover .case-card-body::before { opacity: 0.18; } .case-icon-wrapper { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; position: relative; } .case-glow { position: absolute; width: 90px; height: 90px; border-radius: 50%; background: var(--theme-color); opacity: 0.12; filter: blur(25px); animation: pulse 3s infinite alternate; } @keyframes pulse { 0% { transform: scale(0.85); opacity: 0.1; } 100% { transform: scale(1.3); opacity: 0.22; } } .case-box-css { width: 60px; height: 60px; position: relative; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(25deg); animation: float 4s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: rotateX(-20deg) rotateY(25deg) translateY(0); } 50% { transform: rotateX(-20deg) rotateY(25deg) translateY(-10px); } } .case-box-css div { position: absolute; width: 60px; height: 60px; background: rgba(10, 14, 25, 0.95); border: 2px solid var(--theme-color); box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.03), 0 0 5px var(--theme-color); } .case-box-css .front { transform: translateZ(30px); } .case-box-css .back { transform: rotateY(180deg) translateZ(30px); } .case-box-css .right { transform: rotateY(90deg) translateZ(30px); } .case-box-css .left { transform: rotateY(-90deg) translateZ(30px); } .case-box-css .top { transform: rotateX(90deg) translateZ(30px); background: var(--theme-color); opacity: 0.15; } .case-box-css .bottom { transform: rotateX(-90deg) translateZ(30px); } .case-card-body h3 { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.5rem; color: var(--text-primary); } .case-price { font-size: 1rem; font-weight: 700; color: var(--color-gold); display: flex; align-items: center; gap: 6px; margin-bottom: 1.5rem; font-family: 'Orbitron', sans-serif; letter-spacing: 1px; } .case-btn { width: 100%; padding: 0.8rem; border-radius: 8px; font-weight: 800; font-size: 0.75rem; cursor: pointer; transition: all 0.4s; background: transparent; border: 1.5px solid var(--theme-color); color: var(--theme-color); text-transform: uppercase; letter-spacing: 2px; font-family: 'Orbitron', sans-serif; position: relative; overflow: hidden; } .case-card:hover .case-btn, .case-btn:hover { background: var(--theme-color) !important; color: #000000 !important; text-shadow: none !important; box-shadow: 0 0 20px var(--theme-color); font-weight: 900; } /* ── Profile Panel ── */ .profile-panel { padding: 1.5rem; margin-bottom: 2rem; position: relative; overflow: hidden; } .profile-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--color-fire), var(--color-magenta), var(--color-cyan)); } .profile-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; } .user-meta { display: flex; align-items: center; gap: 1.25rem; } .avatar { width: 52px; height: 52px; border-radius: 12px; background: var(--gradient-fire); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.2rem; color: white; font-family: 'Orbitron', sans-serif; box-shadow: 0 4px 15px rgba(124, 92, 255, 0.25); } .user-details h2 { font-size: 1.1rem; font-weight: 700; font-family: 'Orbitron', sans-serif; letter-spacing: 1px; } .user-details p { color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; } .claim-daily-btn { background: var(--gradient-gold); border: none; color: #080c14; padding: 0.7rem 1.5rem; border-radius: 10px; font-weight: 800; font-size: 0.75rem; cursor: pointer; text-decoration: none; transition: all 0.3s; box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2); text-transform: uppercase; letter-spacing: 1px; font-family: 'Orbitron', sans-serif; position: relative; overflow: hidden; } .claim-daily-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.5s; } .claim-daily-btn:hover::before { left: 100%; } .claim-daily-btn:hover { box-shadow: 0 6px 25px rgba(255, 193, 7, 0.35); transform: translateY(-2px); } /* ══════════════════════════════════════════════════════════════ CASE DETAIL / ROULETTE PAGE ══════════════════════════════════════════════════════════════ */ .case-header-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .back-link { color: var(--text-secondary); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s; font-weight: 600; font-size: 0.9rem; padding: 0.5rem 1rem; border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; } .back-link:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.03); } /* ── Spinner Outer Container ── */ .spinner-outer-container { padding: 2.5rem 1.5rem; margin-bottom: 2.5rem; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; } /* Holographic top and bottom edge lines */ .spinner-outer-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--theme-color, var(--color-fire)), transparent); opacity: 0.5; } /* ── Roulette Viewport ── */ .roulette-viewport { width: 100%; max-width: 800px; height: 140px; background: #050710; border: 1px solid var(--theme-color, rgba(255,255,255,0.06)); border-radius: 12px; position: relative; overflow: hidden; box-shadow: inset 0 0 40px rgba(0,0,0,1), inset 0 2px 0 rgba(255,255,255,0.02), 0 0 25px rgba(0, 0, 0, 0.8); } /* Fade edges */ .roulette-viewport::before { content: ''; position: absolute; top: 0; left: 0; width: 22%; height: 100%; background: linear-gradient(to right, #050710 0%, transparent 100%); z-index: 5; pointer-events: none; } .roulette-viewport::after { content: ''; position: absolute; top: 0; right: 0; width: 22%; height: 100%; background: linear-gradient(to left, #050710 0%, transparent 100%); z-index: 5; pointer-events: none; } /* ── Neon Laser Pointer ── */ .roulette-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--theme-color, #22d3ee); z-index: 10; box-shadow: 0 0 8px var(--theme-color, #22d3ee), 0 0 20px var(--theme-color, #22d3ee); transform: translateX(-50%); } .roulette-line::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid var(--theme-color, #22d3ee); filter: drop-shadow(0 0 6px var(--theme-color, #22d3ee)); } .roulette-line::after { content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 10px solid var(--theme-color, #22d3ee); filter: drop-shadow(0 0 6px var(--theme-color, #22d3ee)); } /* ── Roulette Track ── */ .roulette-track { display: flex; position: absolute; top: 10px; left: 0; height: 120px; will-change: transform; transform: translate3d(0, 0, 0); } /* ── Spinner Card (Premium) ── */ .spinner-card { width: 120px; height: 120px; margin-right: 6px; background: radial-gradient(ellipse at center, rgba(25, 30, 48, 0.8) 0%, rgba(8, 10, 18, 0.98) 100%); border: 1px solid rgba(255, 255, 255, 0.04); border-bottom: 3px solid var(--rarity-color, var(--color-common)); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0.5rem; flex-shrink: 0; text-align: center; position: relative; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.03); } .spinner-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, var(--rarity-color) 0%, transparent 65%); opacity: 0.1; pointer-events: none; } .spinner-card.common { --rarity-color: var(--color-common); } .spinner-card.rare { --rarity-color: var(--color-rare); } .spinner-card.epic { --rarity-color: var(--color-epic); } .spinner-card.legendary { --rarity-color: var(--color-legendary); } .spinner-card img { max-width: 65px; max-height: 55px; object-fit: contain; margin-bottom: 0.4rem; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5)); } .spinner-card p { font-size: 0.65rem; font-weight: 700; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); letter-spacing: 0.5px; text-transform: uppercase; } /* ── Spin Button ── */ .spin-actions { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .btn-spin { background: var(--gradient-fire); border: none; color: white; font-size: 0.85rem; font-weight: 900; padding: 1rem 4rem; border-radius: 50px; cursor: pointer; transition: all 0.3s; box-shadow: 0 6px 25px rgba(124, 92, 255, 0.3); text-transform: uppercase; letter-spacing: 3px; font-family: 'Orbitron', sans-serif; position: relative; overflow: hidden; } /* Scanning light effect on hover */ .btn-spin::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.6s; } .btn-spin:hover:not(:disabled)::before { left: 150%; } .btn-spin:hover:not(:disabled) { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 35px rgba(124, 92, 255, 0.45); } .btn-spin:disabled { background: rgba(30, 35, 50, 0.8); color: var(--text-muted); cursor: not-allowed; box-shadow: none; transform: none; } /* ══════════════════════════════════════════════════════════════ SHOWCASE / BOX CONTENTS ══════════════════════════════════════════════════════════════ */ .item-showcase { margin-top: 3rem; } .showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 1rem; } .showcase-card { padding: 1.2rem; text-align: center; border-radius: 12px; background: var(--bg-card); border: 1px solid rgba(255,255,255,0.04); position: relative; overflow: hidden; transition: all 0.35s; } .showcase-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.08); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); } .showcase-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--rarity-color, var(--color-common)); box-shadow: 0 0 10px var(--rarity-color, var(--color-common)); } /* Inner glow */ .showcase-card::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 40%; background: radial-gradient(ellipse at bottom, var(--rarity-color) 0%, transparent 70%); opacity: 0.06; pointer-events: none; } .showcase-card.common { --rarity-color: var(--color-common); } .showcase-card.rare { --rarity-color: var(--color-rare); } .showcase-card.epic { --rarity-color: var(--color-epic); } .showcase-card.legendary { --rarity-color: var(--color-legendary); } .showcase-card img { max-width: 85px; height: 65px; object-fit: contain; margin-bottom: 0.75rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); } .showcase-card h4 { font-size: 0.8rem; font-weight: 700; margin-bottom: 0.3rem; line-height: 1.2; letter-spacing: 0.3px; } .showcase-card .rarity-label { font-size: 0.65rem; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; color: var(--rarity-color); font-family: 'Orbitron', sans-serif; } .showcase-card .item-prob { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; font-weight: 600; } .jackpot-badge { position: absolute; top: 8px; right: 8px; background: linear-gradient(135deg, #22d3ee, #7c5cff); color: white; font-size: 0.55rem; padding: 3px 8px; border-radius: 4px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 0 12px rgba(34, 211, 238, 0.5); font-family: 'Orbitron', sans-serif; } /* ══════════════════════════════════════════════════════════════ VICTORY MODAL ══════════════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: rgba(2, 3, 8, 0.9); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-content { width: 92%; max-width: 440px; padding: 3rem 2rem; text-align: center; position: relative; border: 1px solid var(--theme-color, var(--color-legendary)); box-shadow: var(--glow-effect, var(--glow-legendary)), 0 0 60px rgba(0, 0, 0, 0.6); transform: scale(0.8) translateY(20px); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow: hidden; } .modal-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--theme-color); box-shadow: 0 0 20px var(--theme-color); } /* Animated shimmer across modal */ .modal-content::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent, var(--theme-color), transparent, transparent); opacity: 0.03; animation: modalShimmer 4s linear infinite; pointer-events: none; } @keyframes modalShimmer { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .modal-overlay.active .modal-content { transform: scale(1) translateY(0); } .modal-content.common { --theme-color: var(--color-common); --glow-effect: var(--glow-common); } .modal-content.rare { --theme-color: var(--color-rare); --glow-effect: var(--glow-rare); } .modal-content.epic { --theme-color: var(--color-epic); --glow-effect: var(--glow-epic); } .modal-content.legendary { --theme-color: var(--color-legendary); --glow-effect: var(--glow-legendary); } .modal-title { font-family: 'Orbitron', sans-serif; font-size: 1.2rem; font-weight: 900; text-transform: uppercase; color: var(--theme-color); margin-bottom: 1.5rem; letter-spacing: 3px; position: relative; z-index: 1; } .modal-item-img { max-width: 160px; height: 110px; object-fit: contain; margin-bottom: 1.5rem; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6)); position: relative; z-index: 1; } .modal-item-name { font-size: 1.2rem; font-weight: 800; margin-bottom: 0.5rem; position: relative; z-index: 1; font-family: 'Rajdhani', sans-serif; letter-spacing: 1px; } .modal-item-rarity { font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: var(--theme-color); margin-bottom: 2rem; position: relative; z-index: 1; font-family: 'Orbitron', sans-serif; } .btn-modal-close { background: var(--theme-color); border: none; color: #080c14; font-weight: 900; font-size: 0.75rem; padding: 0.85rem 3rem; border-radius: 50px; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 2px; font-family: 'Orbitron', sans-serif; position: relative; z-index: 1; } .btn-modal-close:hover { box-shadow: 0 0 25px var(--theme-color); transform: scale(1.05); } /* ══════════════════════════════════════════════════════════════ REWARDS TABLE ══════════════════════════════════════════════════════════════ */ .rewards-table-container { overflow-x: auto; margin-top: 1rem; } .rewards-table { width: 100%; border-collapse: collapse; text-align: left; } .rewards-table th { background: rgba(0, 0, 0, 0.5); padding: 0.9rem 1rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); font-family: 'Orbitron', sans-serif; font-weight: 600; } .rewards-table td { padding: 0.85rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 0.9rem; font-weight: 600; } .rewards-table tr:hover td { background: rgba(255, 255, 255, 0.015); } .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-family: 'Orbitron', sans-serif; } .status-badge.pending { background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.3); color: var(--color-gold); } .status-badge.pending::before { content: '⏳'; font-size: 0.8rem; } .status-badge.delivered { background: rgba(0, 230, 118, 0.1); border: 1px solid rgba(0, 230, 118, 0.3); color: #00e676; } .status-badge.delivered::before { content: '✓'; font-size: 0.8rem; } /* ══════════════════════════════════════════════════════════════ ADMIN PANEL ══════════════════════════════════════════════════════════════ */ .admin-layout { display: flex; flex-direction: column; min-height: 100vh; } .admin-nav { border-bottom: 1px solid rgba(255, 45, 85, 0.15); background: rgba(8, 12, 20, 0.95); padding: 0.8rem 2rem; } .admin-nav::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-admin), transparent); opacity: 0.3; } .admin-nav-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .admin-logo { color: var(--color-admin); font-weight: 900; font-family: 'Orbitron', sans-serif; font-size: 1rem; letter-spacing: 2px; text-decoration: none; display: flex; align-items: center; gap: 10px; text-transform: uppercase; } .admin-menu { display: flex; gap: 0.5rem; } .admin-menu-link { color: var(--text-secondary); text-decoration: none; font-size: 0.75rem; font-weight: 700; transition: all 0.3s; padding: 0.5rem 1rem; border-radius: 8px; text-transform: uppercase; letter-spacing: 1px; } .admin-menu-link:hover, .admin-menu-link.active { color: var(--text-primary); background: rgba(255, 45, 85, 0.1); border-color: rgba(255, 45, 85, 0.2); } .admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.2rem; margin-bottom: 2.5rem; } .admin-stat-card { padding: 1.5rem; border-left: 3px solid var(--color-admin); position: relative; overflow: hidden; } .admin-stat-card::after { content: ''; position: absolute; top: 0; right: 0; width: 60px; height: 60px; border-radius: 50%; opacity: 0.04; pointer-events: none; } .admin-stat-card.total-users { border-color: #2196f3; } .admin-stat-card.total-users::after { background: #2196f3; } .admin-stat-card.total-opened { border-color: #ab47bc; } .admin-stat-card.total-opened::after { background: #ab47bc; } .admin-stat-card.total-pending { border-color: #ffc107; } .admin-stat-card.total-pending::after { background: #ffc107; } .admin-stat-card.pool-status { border-color: #00e676; } .admin-stat-card.pool-status::after { background: #00e676; } .admin-stat-label { font-size: 0.65rem; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.5rem; letter-spacing: 1.5px; font-family: 'Orbitron', sans-serif; font-weight: 600; } .admin-stat-value { font-size: 2rem; font-weight: 900; font-family: 'Orbitron', sans-serif; } .admin-btn { background: var(--color-admin); border: none; color: white; padding: 0.45rem 0.9rem; border-radius: 6px; font-size: 0.7rem; font-weight: 800; cursor: pointer; transition: all 0.3s; text-decoration: none; display: inline-block; text-transform: uppercase; letter-spacing: 1px; font-family: 'Orbitron', sans-serif; } .admin-btn:hover { box-shadow: 0 0 15px rgba(255, 45, 85, 0.3); transform: translateY(-1px); } .admin-btn.btn-deliver { background: #00e676; color: #080c14; } .admin-btn.btn-deliver:hover { box-shadow: 0 0 15px rgba(0, 230, 118, 0.3); } .admin-btn.btn-delete { background: #ff2d55; } .admin-btn.btn-delete:hover { box-shadow: 0 0 15px rgba(255, 45, 85, 0.3); } .admin-btn.btn-edit { background: #2196f3; margin-right: 5px; } .pool-config-card { padding: 2rem; margin-bottom: 2rem; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .rarity-pill { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-family: 'Orbitron', sans-serif; } .rarity-pill.common { background: rgba(122, 133, 153, 0.12); color: var(--color-common); } .rarity-pill.rare { background: rgba(33, 150, 243, 0.12); color: var(--color-rare); } .rarity-pill.epic { background: rgba(171, 71, 188, 0.12); color: var(--color-epic); } .rarity-pill.legendary { background: rgba(255, 152, 0, 0.12); color: var(--color-legendary); } .item-admin-list { margin-top: 1.5rem; } .admin-item-thumb { width: 40px; height: 40px; object-fit: contain; vertical-align: middle; margin-right: 8px; border-radius: 6px; background: rgba(0,0,0,0.3); padding: 4px; } /* ══════════════════════════════════════════════════════════════ RESPONSIVE / MOBILE OPTIMIZATIONS ══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Kill GPU-heavy blur on mobile */ .glass-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(12, 16, 28, 0.97) !important; } header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(4, 6, 11, 0.98) !important; } .modal-overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Disable grid background on mobile for perf */ body::after { display: none; } .nav-container { padding: 0.8rem 1rem; flex-direction: row; gap: 0.5rem; } .logo { font-size: 1rem; letter-spacing: 1px; } .logo span { font-size: 1.2rem; } .balance-tag { font-size: 0.75rem; padding: 0.4rem 0.8rem; } .logout-btn { font-size: 0.7rem; padding: 0.4rem 0.8rem; } .profile-grid { flex-direction: column; text-align: center; align-items: center; } .user-meta { flex-direction: column; } .section-title { font-size: 1.1rem; letter-spacing: 1px; } .cases-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; } .case-card-body { padding: 1.2rem 0.8rem; } .case-card-body h3 { font-size: 0.85rem; letter-spacing: 1px; } .case-price { font-size: 0.8rem; } .case-btn { font-size: 0.65rem; padding: 0.6rem; letter-spacing: 1px; } .case-icon-wrapper { width: 90px; height: 90px; margin-bottom: 1rem; } .case-box-css { width: 45px; height: 45px; } .case-box-css div { width: 45px; height: 45px; } .case-box-css .front { transform: translateZ(22px); } .case-box-css .back { transform: rotateY(180deg) translateZ(22px); } .case-box-css .right { transform: rotateY(90deg) translateZ(22px); } .case-box-css .left { transform: rotateY(-90deg) translateZ(22px); } .case-box-css .top { transform: rotateX(90deg) translateZ(22px); } .case-box-css .bottom { transform: rotateX(-90deg) translateZ(22px); } .auth-card { padding: 1.5rem; } .btn-spin { font-size: 0.7rem; padding: 0.85rem 2.5rem; letter-spacing: 2px; } .container { margin: 1rem auto; padding: 0 0.60rem; } .spinner-outer-container { padding: 1.5rem 0.80rem; } .roulette-viewport { height: 105px !important; } .showcase-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.6rem; } .showcase-card { padding: 0.8rem 0.6rem; } .showcase-card img { max-width: 75px; height: 50px; margin-bottom: 0.4rem; } .showcase-card h4 { font-size: 0.72rem; } .admin-nav-container { flex-direction: column; gap: 0.8rem; } .admin-menu { flex-wrap: wrap; justify-content: center; gap: 0.3rem; } .admin-menu-link { font-size: 0.65rem; padding: 0.4rem 0.6rem; } .admin-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; } .admin-stat-value { font-size: 1.5rem; } } @media (max-width: 400px) { .cases-grid { grid-template-columns: 1fr; } .showcase-grid { grid-template-columns: 1fr 1fr; } } /* ── Ticket Icons & Real Images Support ── */ .ticket-icon-min { width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 0 4px var(--theme-color, rgba(255,255,255,0.2))); vertical-align: middle; } .case-box-img { width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6)); animation: caseFloat 4s ease-in-out infinite; transition: transform 0.4s ease; } .case-card:hover .case-box-img { transform: scale(1.1) rotate(5deg); filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 15px var(--theme-color)); } @keyframes caseFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ── Lobby Custom Tabs Navigation ── */ .lobby-tabs-header { display: flex; justify-content: center; gap: 10px; margin-bottom: 2rem; background: rgba(0, 0, 0, 0.4); padding: 6px; border-radius: 12px; border: 1px solid var(--border-color); } .lobby-tab-btn { flex: 1; max-width: 250px; background: transparent; border: 1px solid transparent; color: var(--text-secondary); padding: 0.85rem 1.5rem; cursor: pointer; font-weight: 800; font-size: 0.85rem; border-radius: 8px; text-transform: uppercase; letter-spacing: 2px; font-family: 'Orbitron', sans-serif; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; align-items: center; justify-content: center; gap: 10px; } .lobby-tab-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.03); } .lobby-tab-btn.active { color: #fff; background: var(--gradient-fire); border-color: transparent; box-shadow: 0 4px 20px rgba(124, 92, 255, 0.3), inset 0 1px 0 rgba(255,255,255,0.1); } .lobby-tab-content { display: none; animation: fadeIn 0.4s ease-out; } .lobby-tab-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .case-box-img { width: 80px; height: 80px; } .lobby-tabs-header { padding: 4px; gap: 4px; } .lobby-tab-btn { padding: 0.7rem 0.5rem; font-size: 0.7rem; letter-spacing: 1px; gap: 6px; } } /* ── Hamburguer Menu Toggle ── */ .menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 26px; height: 18px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1100; } .menu-toggle span { width: 100%; height: 2px; background-color: var(--text-primary); border-radius: 2px; transition: all 0.3s ease-in-out; } /* ── Mobile Sidebar Desplegable ── */ .mobile-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: 290px; background: #080c14; border-left: 1px solid var(--border-color); box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8); z-index: 1050; padding: 2.5rem 1.5rem; display: flex; flex-direction: column; gap: 2rem; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .mobile-sidebar.active { transform: translateX(0); } .sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); z-index: 1040; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .sidebar-overlay.active { opacity: 1; pointer-events: auto; } .sidebar-close { position: absolute; top: 1rem; right: 1.25rem; background: transparent; border: none; color: var(--text-secondary); font-size: 2rem; cursor: pointer; line-height: 1; transition: color 0.3s; } .sidebar-close:hover { color: var(--color-admin); } .sidebar-header { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 1.25rem; } .avatar-min { width: 44px; height: 44px; border-radius: 10px; background: var(--gradient-fire); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; color: white; font-family: 'Orbitron', sans-serif; box-shadow: 0 4px 10px rgba(124, 92, 255, 0.2); } .sidebar-user-details h3 { font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 800; color: var(--text-primary); } .sidebar-user-details p { font-size: 0.75rem; color: var(--text-secondary); } .sidebar-section h4 { font-family: 'Orbitron', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-secondary); margin-bottom: 1rem; } .sidebar-tickets-list { display: flex; flex-direction: column; gap: 0.8rem; } .sidebar-ticket-item { display: flex; align-items: center; gap: 12px; padding: 0.6rem 1rem; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255,255,255,0.03); border-radius: 8px; font-size: 0.9rem; font-weight: bold; } .sidebar-ticket-item img { width: 24px; height: 24px; object-fit: contain; } .sidebar-ticket-item.bronce { border-left: 3px solid var(--color-bronze); color: var(--color-bronze); } .sidebar-ticket-item.plata { border-left: 3px solid var(--color-silver); color: var(--color-silver); } .sidebar-ticket-item.oro { border-left: 3px solid var(--color-gold); color: var(--color-gold); } .sidebar-ticket-item.diamante { border-left: 3px solid var(--color-cyan); color: var(--color-cyan); } .sidebar-ticket-item span b { color: var(--text-primary); } .sidebar-menu-links { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; } .sidebar-link { display: block; padding: 0.8rem 1.2rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255,255,255,0.04); border-radius: 8px; color: var(--text-primary); text-decoration: none; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; font-family: 'Orbitron', sans-serif; letter-spacing: 1px; transition: all 0.3s; } .sidebar-link:hover { border-color: var(--color-fire); background: rgba(124, 92, 255, 0.05); box-shadow: 0 0 10px rgba(124, 92, 255, 0.08); } .sidebar-link.admin { border-color: rgba(255, 45, 85, 0.2); color: #ff4d6d; } .sidebar-link.admin:hover { background: rgba(255, 45, 85, 0.05); border-color: var(--color-admin); } .sidebar-link.logout { border-color: rgba(255, 75, 75, 0.15); color: #ff6b6b; } .sidebar-link.logout:hover { background: rgba(255, 75, 75, 0.05); border-color: #ff4b4b; } /* ── Mobile adaptations ── */ @media (max-width: 768px) { .ticket-inventory-bar, header .user-info .logout-btn, header .user-info .admin-btn, header .user-info .ticket-inventory-pill { display: none !important; } .menu-toggle { display: flex; } /* Ocultar botones redundantes del dashboard */ .profile-grid .claim-daily-btn { display: none !important; } } /* ── Suspense Animations & Visual Effects ── */ .roulette-viewport.suspense-pulse { box-shadow: inset 0 0 40px rgba(0,0,0,1), 0 0 35px var(--theme-color, var(--color-fire)); border-color: var(--theme-color, var(--color-fire)) !important; animation: roulettePulse 0.5s infinite alternate ease-in-out; } @keyframes roulettePulse { 0% { filter: brightness(1) drop-shadow(0 0 5px rgba(124, 92, 255, 0.2)); } 100% { filter: brightness(1.3) drop-shadow(0 0 15px var(--theme-color, var(--color-fire))); } } .spinner-card.winner-pulse { animation: winnerCardFlash 1.2s ease-in-out infinite alternate; border: 2.5px solid var(--rarity-color) !important; box-shadow: 0 0 30px var(--rarity-color) !important; transform: scale(1.08) translateZ(10px); z-index: 100; } @keyframes winnerCardFlash { 0% { box-shadow: 0 0 15px var(--rarity-color); filter: brightness(1); } 100% { box-shadow: 0 0 40px var(--rarity-color); filter: brightness(1.5); } } /* ── Smooth Fade-in Image Loading Animation ── NOTE: animating `filter: blur()` on every image at once is extremely expensive on mobile GPUs (it was a major source of lag). This is now a cheap opacity-only fade, and it is disabled entirely on small screens and when the user prefers reduced motion. */ img { animation: imageFadeIn 0.5s ease forwards; } @keyframes imageFadeIn { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 768px) { img { animation: none; } } /* ── Admin Pagination & Layout Adjustments ── */ .admin-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 2rem; flex-wrap: wrap; } .admin-pagination .page-link { text-decoration: none; color: var(--text-secondary); background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); padding: 0.5rem 1rem; border-radius: 8px; font-weight: 700; font-size: 0.85rem; font-family: 'Orbitron', sans-serif; transition: all 0.3s; } .admin-pagination .page-link:hover { color: var(--text-primary); border-color: var(--color-admin); background: rgba(255, 45, 85, 0.05); box-shadow: 0 0 10px rgba(255, 45, 85, 0.15); } .admin-pagination .page-link.active { color: #fff; background: var(--color-admin); border-color: transparent; box-shadow: 0 4px 15px rgba(255, 45, 85, 0.3); } .admin-pagination .page-link.disabled { color: var(--text-muted); pointer-events: none; opacity: 0.4; background: rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.05); } /* ========================================== AAA-QUALITY CASE OPENING UPGRADES ========================================== */ /* --- Dynamic Motion Blur --- */ .roulette-track.motion-blurred, #roulette-game-canvas.motion-blurred { filter: url(#roulette-motion-blur); will-change: transform, filter; } /* --- Pointer Ticker Physical Bounce --- */ .roulette-line.jiggle { animation: tickerBounce 0.14s cubic-bezier(0.25, 0.8, 0.25, 1.4) forwards; } @keyframes tickerBounce { 0% { transform: translateX(-50%) rotate(0deg) scaleX(1); } 30% { transform: translateX(-50%) rotate(-10deg) scaleX(1.4); filter: brightness(1.8) drop-shadow(0 0 12px var(--theme-color, #22d3ee)); } 70% { transform: translateX(-50%) rotate(4deg) scaleX(0.85); } 100% { transform: translateX(-50%) rotate(0deg) scaleX(1); } } /* --- Canvas Particle Overlay --- */ .roulette-particles-canvas { position: absolute; inset: 0; z-index: 8; pointer-events: none; width: 100%; height: 100%; } /* --- Interactive Spin Button Upgrades --- */ .btn-spin.spinning-active { background: rgba(12, 16, 28, 0.95); border: 1px solid var(--theme-color, var(--color-fire)); color: var(--theme-color, var(--color-fire)); text-shadow: 0 0 8px var(--theme-color, var(--color-fire)); box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(124, 92, 255, 0.05); animation: btnActivePulse 1.8s infinite ease-in-out; pointer-events: none; } @keyframes btnActivePulse { 0%, 100% { opacity: 0.9; transform: scale(0.97); box-shadow: 0 0 10px rgba(124, 92, 255, 0.1); } 50% { opacity: 1; transform: scale(1.01); box-shadow: 0 0 25px var(--theme-color, var(--color-fire)); } } /* --- Rotating Sunburst Behind Reward --- */ .modal-sunburst { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 450px; height: 450px; background: radial-gradient(circle, var(--theme-color) 0%, transparent 65%); opacity: 0.22; z-index: 0; pointer-events: none; animation: sunburstRotate 24s linear infinite; } .modal-sunburst::after { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg, transparent 0deg 15deg, rgba(255, 255, 255, 0.04) 15deg 30deg); -webkit-mask-image: radial-gradient(circle, black 15%, transparent 68%); mask-image: radial-gradient(circle, black 15%, transparent 68%); border-radius: 50%; } @keyframes sunburstRotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* --- Victory Modal Overlay Blur --- */ .modal-overlay { background: rgba(2, 3, 8, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); } /* --- Staggered Theatrical Entrances --- */ .modal-overlay.active .modal-title { animation: modalSlideDown 0.65s cubic-bezier(0.19, 1, 0.22, 1) forwards; } .modal-overlay.active .modal-item-img { animation: modalImageScale 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards; opacity: 0; } .modal-overlay.active .modal-item-name { animation: modalSlideUp 0.65s cubic-bezier(0.19, 1, 0.22, 1) 0.4s forwards, textShine 3s ease-in-out infinite 1.2s; opacity: 0; } .modal-overlay.active .modal-item-rarity { animation: modalSlideUp 0.65s cubic-bezier(0.19, 1, 0.22, 1) 0.5s forwards; opacity: 0; } .modal-overlay.active p { animation: modalFadeInUp 0.65s cubic-bezier(0.19, 1, 0.22, 1) 0.6s forwards; opacity: 0; } .modal-overlay.active .btn-modal-close { animation: modalFadeInUp 0.65s cubic-bezier(0.19, 1, 0.22, 1) 0.75s forwards; opacity: 0; } @keyframes modalSlideDown { from { transform: translateY(-40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes modalSlideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes modalImageScale { 0% { transform: scale(0.35); opacity: 0; filter: brightness(3) drop-shadow(0 0 0 var(--theme-color)); } 65% { transform: scale(1.12); filter: brightness(1.6) drop-shadow(0 0 25px var(--theme-color)); } 100% { transform: scale(1); opacity: 1; filter: brightness(1) drop-shadow(0 8px 25px rgba(0,0,0,0.6)); } } @keyframes modalFadeInUp { from { transform: translateY(25px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes textShine { 0%, 100% { text-shadow: 0 0 6px rgba(255, 255, 255, 0.15); } 50% { text-shadow: 0 0 15px var(--theme-color), 0 0 30px var(--theme-color); color: #ffffff; } } /* Rarity specific glow animations inside victory modal background */ .modal-content.common { --theme-color: var(--color-common); --glow-effect: var(--glow-common); } .modal-content.rare { --theme-color: var(--color-rare); --glow-effect: var(--glow-rare); } .modal-content.epic { --theme-color: var(--color-epic); --glow-effect: var(--glow-epic); } .modal-content.legendary { --theme-color: var(--color-legendary); --glow-effect: var(--glow-legendary); } /* --- HUD Bezel & Canvas Upgrades --- */ .roulette-viewport-wrapper { width: 100%; max-width: 800px; margin: 0 auto; position: relative; padding: 2px; background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); } .roulette-viewport-wrapper::before { content: ''; position: absolute; inset: 0; border-radius: 14px; padding: 1.5px; background: linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 40%, rgba(124, 92, 255, 0.15) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } #roulette-game-canvas { width: 100%; height: 100%; display: block; border-radius: 12px; background: #03050a; } .hud-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 12; } /* Pulsing neon center laser pointer line */ .hud-center-laser { stroke-dasharray: 4, 2; animation: hudLaserPulse 0.8s infinite alternate ease-in-out; } @keyframes hudLaserPulse { 0% { opacity: 0.55; stroke-width: 1.5px; filter: drop-shadow(0 0 2px var(--theme-color)); } 100% { opacity: 0.95; stroke-width: 3.5px; filter: drop-shadow(0 0 6px var(--theme-color)) drop-shadow(0 0 12px var(--theme-color)); } } /* Pulsing reticle pointers */ .hud-reticle-top, .hud-reticle-bottom { transform-origin: center; animation: hudReticleGlow 1.2s infinite alternate ease-in-out; } @keyframes hudReticleGlow { 0% { opacity: 0.7; filter: drop-shadow(0 0 2px var(--theme-color)); } 100% { opacity: 1; filter: drop-shadow(0 0 8px var(--theme-color)) drop-shadow(0 0 14px var(--theme-color)); } } /* Mechanical camera kickback screen shake */ .roulette-viewport.shake { animation: viewportShake 0.45s cubic-bezier(.36,.07,.19,.97) both; } @keyframes viewportShake { 10%, 90% { transform: translate3d(-1.5px, -0.5px, 0); } 20%, 80% { transform: translate3d(2.5px, 1px, 0); } 30%, 50%, 70% { transform: translate3d(-3.5px, -1.5px, 0); } 40%, 60% { transform: translate3d(3.5px, 1.5px, 0); } } /* Subtle physical vibration on crawl ticks */ .roulette-viewport.subtle-shake { animation: viewportSubtleShake 0.12s ease-in-out; } @keyframes viewportSubtleShake { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-1px, 0.5px, 0); } } /* Physiological heartbeat throb visual overlay pulse */ .roulette-viewport.heartbeat-flash { animation: heartbeatFlashAnim 0.45s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; } @keyframes heartbeatFlashAnim { 0% { box-shadow: inset 0 0 60px rgba(0,0,0,1), 0 0 45px var(--theme-color, var(--color-fire)); border-color: var(--theme-color, var(--color-fire)) !important; transform: scale(1.018); } 100% { box-shadow: inset 0 0 40px rgba(0,0,0,1), 0 0 25px rgba(0, 0, 0, 0.8); border-color: var(--theme-color, rgba(255,255,255,0.06)) !important; transform: scale(1); } } /* ══════════════════════════════════════════════════════════════ AAA IMMERSIVE OVERHAUL · v2 Cinematic depth, HUD framing, mobile-game layout & perf guards. This block is intentionally last so it refines everything above. ══════════════════════════════════════════════════════════════ */ /* ── 1. PERFORMANCE & ACCESSIBILITY GUARDS ────────────────────── The single biggest cause of mobile lag was many always-on infinite animations compositing every frame. We keep them on desktop (where they look great) but pause the continuous ones on phones and for users who ask for reduced motion. The one-shot reveal animations stay. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } @media (max-width: 768px) { /* Kill perpetual GPU work on phones (floating boxes, pulses, rotators) */ .case-glow, .case-box-css, .case-box-img, .modal-sunburst, .modal-content::after { animation: none !important; } /* Promote heavy layers to their own GPU layer so they don't repaint siblings */ .roulette-viewport-wrapper, #roulette-game-canvas { transform: translateZ(0); } } /* ── 2. CINEMATIC BACKGROUND (static = cheap) ─────────────────── Layered ambient light + a vignette so the screen reads as an immersive game scene instead of a flat web page. */ body::before { background: radial-gradient(ellipse 70% 50% at 50% -8%, rgba(124, 92, 255, 0.10) 0%, transparent 60%), radial-gradient(ellipse 60% 45% at 12% 8%, rgba(34, 211, 238, 0.07) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 88% 95%, rgba(171, 71, 188, 0.07) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 50% 55%, rgba(0, 229, 255, 0.035) 0%, transparent 60%), radial-gradient(ellipse 120% 100% at 50% 50%, transparent 48%, rgba(0, 0, 0, 0.55) 100%); } /* ── 3. HUD PANELS ────────────────────────────────────────────── A crisp top light-edge + deeper shadow gives panels a moulded, hardware-bezel look rather than a flat web card. */ .glass-panel { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 0 0 1px rgba(255, 255, 255, 0.015) inset; } .profile-panel, .spinner-outer-container, .auth-card { border-radius: 18px; } /* ── 4. CASE CRATE — HUD corner brackets (no extra HTML, shadow-safe) ── Repurpose the card's ::after into four glowing L-brackets, like a targeting frame around a weapon crate. */ .case-card { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.025) inset; } .case-card::after { content: ''; position: absolute; inset: 7px; border-radius: 12px; border: 1.5px solid var(--theme-color, var(--color-bronze)); background: none; -webkit-mask: linear-gradient(#000 0 0) top left / 16px 16px no-repeat, linear-gradient(#000 0 0) top right / 16px 16px no-repeat, linear-gradient(#000 0 0) bottom left / 16px 16px no-repeat, linear-gradient(#000 0 0) bottom right/ 16px 16px no-repeat; mask: linear-gradient(#000 0 0) top left / 16px 16px no-repeat, linear-gradient(#000 0 0) top right / 16px 16px no-repeat, linear-gradient(#000 0 0) bottom left / 16px 16px no-repeat, linear-gradient(#000 0 0) bottom right/ 16px 16px no-repeat; /* Reset the xor/exclude composite inherited from the original rule so all four corner brackets render additively instead of cancelling out. */ -webkit-mask-composite: source-over; mask-composite: add; padding: 0; opacity: 0.35; transition: opacity 0.35s, inset 0.35s; pointer-events: none; z-index: 2; } .case-card:hover::after { opacity: 0.9; inset: 4px; } /* Tier ribbon on the crate title */ .case-card .case-card-body h3::after { content: ''; display: block; width: 38px; height: 2px; margin: 8px auto 0; background: var(--theme-color, var(--color-fire)); box-shadow: 0 0 8px var(--theme-color, var(--color-fire)); opacity: 0.8; } /* ── 5. BUTTONS — cut-corner game chip ──────────────────────────*/ .case-btn { clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 12px) 100%, 0 100%); } /* ── 6. SECTION TITLES — HUD tick line ──────────────────────────*/ .section-title::after { content: ''; flex: 1; height: 1px; margin-left: 6px; background: linear-gradient(90deg, rgba(124, 92, 255, 0.35), transparent); } /* ── 7. LOGIN HERO ──────────────────────────────────────────────*/ .auth-card .logo-emblem { width: 84px; height: 84px; object-fit: contain; margin: 0 auto 1rem; display: block; filter: drop-shadow(0 0 18px rgba(124, 92, 255, 0.55)); } @media (min-width: 769px) { .auth-card .logo-emblem { animation: emblemFloat 5s ease-in-out infinite; } } @keyframes emblemFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .auth-header h1 { font-size: 1.85rem; } /* ── 8. MOBILE BOTTOM HUD NAV ─────────────────────────────────── The strongest "this is a game app, not a website" signal on phones: a fixed console-style action bar pinned to the bottom. */ .mobile-bottom-nav { display: none; } @media (max-width: 768px) { body { padding-bottom: 72px; } /* room for the bar */ .mobile-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; /* below victory modal (1000) and sidebar overlay (1040/1050) */ height: 64px; padding: 0 6px env(safe-area-inset-bottom, 0px) 6px; background: linear-gradient(180deg, rgba(10, 13, 22, 0.92), rgba(4, 6, 11, 0.98)); border-top: 1px solid rgba(124, 92, 255, 0.18); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6); } .mobile-bottom-nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-fire), var(--color-magenta), transparent); opacity: 0.6; } .mbn-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--text-secondary); font-family: 'Orbitron', sans-serif; font-size: 0.58rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: none; border: none; cursor: pointer; position: relative; transition: color 0.25s; } .mbn-item .mbn-ico { font-size: 1.25rem; line-height: 1; filter: grayscale(0.3); transition: transform 0.25s, filter 0.25s; } .mbn-item.active { color: var(--text-primary); } .mbn-item.active .mbn-ico { filter: none; transform: translateY(-2px) scale(1.1); } .mbn-item.active::before { content: ''; position: absolute; top: 6px; width: 34px; height: 30px; border-radius: 10px; background: radial-gradient(ellipse at center, rgba(124, 92, 255, 0.22), transparent 70%); z-index: -1; } .mbn-item.admin.active { color: var(--color-admin); } .mbn-item.admin.active::before { background: radial-gradient(ellipse at center, rgba(255, 45, 85, 0.25), transparent 70%); } } /* ── 9. TOUCH POLISH ────────────────────────────────────────────*/ @media (hover: none) { .case-card:active { transform: scale(0.97); } .case-card:hover { transform: none; } /* avoid sticky hover on touch */ } @media (max-width: 768px) { .btn-spin { width: 100%; max-width: 360px; padding: 1.05rem 1rem; } .case-header-nav { gap: 0.5rem; } } /* ══════════════════════════════════════════════════════════════ AAA PLATFORM SYSTEM · v3 Professional line-icon set + a single unified game-HUD visual language applied across player and admin screens. ══════════════════════════════════════════════════════════════ */ /* ── PROFESSIONAL ICON SET (CSS masks, inherit currentColor) ────── Consistent Feather/Lucide-style line icons. Replaces every emoji. Usage: (sizes with font-size, 1em). */ :root { --ico-flame: url("data:image/svg+xml,"); --ico-box: url("data:image/svg+xml,"); --ico-trophy: url("data:image/svg+xml,"); --ico-shield: url("data:image/svg+xml,"); --ico-ticket: url("data:image/svg+xml,"); --ico-zap: url("data:image/svg+xml,"); --ico-gift: url("data:image/svg+xml,"); --ico-copy: url("data:image/svg+xml,"); --ico-check: url("data:image/svg+xml,"); --ico-clock: url("data:image/svg+xml,"); --ico-warn: url("data:image/svg+xml,"); --ico-search: url("data:image/svg+xml,"); --ico-trash: url("data:image/svg+xml,"); --ico-edit: url("data:image/svg+xml,"); --ico-save: url("data:image/svg+xml,"); --ico-logout: url("data:image/svg+xml,"); --ico-back: url("data:image/svg+xml,"); --ico-grid: url("data:image/svg+xml,"); --ico-cog: url("data:image/svg+xml,"); --ico-layers: url("data:image/svg+xml,"); --ico-sliders: url("data:image/svg+xml,"); } .ico { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -0.14em; } .ico-flame { --i: var(--ico-flame); } .ico-box { --i: var(--ico-box); } .ico-trophy { --i: var(--ico-trophy); } .ico-shield { --i: var(--ico-shield); } .ico-ticket { --i: var(--ico-ticket); } .ico-zap { --i: var(--ico-zap); } .ico-gift { --i: var(--ico-gift); } .ico-copy { --i: var(--ico-copy); } .ico-check { --i: var(--ico-check); } .ico-clock { --i: var(--ico-clock); } .ico-warn { --i: var(--ico-warn); } .ico-search { --i: var(--ico-search); } .ico-trash { --i: var(--ico-trash); } .ico-edit { --i: var(--ico-edit); } .ico-save { --i: var(--ico-save); } .ico-logout { --i: var(--ico-logout); } .ico-back { --i: var(--ico-back); } .ico-grid { --i: var(--ico-grid); } .ico-cog { --i: var(--ico-cog); } .ico-layers { --i: var(--ico-layers); } .ico-sliders { --i: var(--ico-sliders); } /* Replace the old emoji ::before glyphs on alerts & status badges with icons */ .alert::before { content: ''; width: 1.15em; height: 1.15em; background-color: currentColor; -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat; } .alert-danger::before { content: ''; --i: var(--ico-warn); } .alert-success::before { content: ''; --i: var(--ico-check); } .status-badge::before { content: ''; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat; } .status-badge.pending::before { content: ''; --i: var(--ico-clock); } .status-badge.delivered::before { content: ''; --i: var(--ico-check); } /* ── BRAND EMBLEM (header logo) ─────────────────────────────────*/ .logo .logo-ico { width: 30px; height: 30px; background: var(--gradient-fire); filter: drop-shadow(0 0 9px rgba(124, 92, 255, 0.55)); } .logo { gap: 12px; } /* ── HEADER as a top game HUD bar ───────────────────────────────*/ header { background: linear-gradient(180deg, rgba(8, 11, 19, 0.96), rgba(4, 6, 11, 0.92)); } .nav-container { padding-top: 0.95rem; padding-bottom: 0.95rem; } .logout-btn { display: inline-flex; align-items: center; gap: 7px; } /* ══════════════════════════════════════════════════════════════ ADMIN CONSOLE — fully integrated game-HUD look ══════════════════════════════════════════════════════════════ */ .admin-nav { position: sticky; top: 0; z-index: 100; background: linear-gradient(180deg, rgba(16, 9, 14, 0.97), rgba(7, 6, 10, 0.95)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .admin-logo { align-items: center; font-size: 1.05rem; } .admin-logo .admin-logo-ico { width: 30px; height: 30px; background: linear-gradient(135deg, #ff2d55, #b3122e); filter: drop-shadow(0 0 9px rgba(255, 45, 85, 0.5)); } .admin-menu-link { position: relative; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px; } .admin-menu-link.active { color: #fff; background: rgba(255, 45, 85, 0.12); border-color: rgba(255, 45, 85, 0.3); box-shadow: inset 0 0 12px rgba(255, 45, 85, 0.08); } .admin-menu-link.active::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2px; background: var(--color-admin); box-shadow: 0 0 8px var(--color-admin); border-radius: 2px; } /* Telemetry stat cards */ .admin-stat-card { background: linear-gradient(150deg, rgba(18, 14, 22, 0.9), rgba(10, 8, 14, 0.92)); border-radius: 14px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; } .admin-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--color-admin); opacity: 0.7; } .admin-stat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); } .admin-stat-value { background: linear-gradient(180deg, #fff, #cfd3dd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 1px; } /* ══════════════════════════════════════════════════════════════ DATA TABLES — console panels (player & admin) ══════════════════════════════════════════════════════════════ */ .rewards-table-container { border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; overflow: hidden; overflow-x: auto; } .rewards-table th { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.4)); color: var(--text-secondary); border-bottom: 1px solid rgba(124, 92, 255, 0.15); } .rewards-table tbody tr { transition: background 0.2s; } .rewards-table tbody tr:hover td { background: rgba(124, 92, 255, 0.04); } .rewards-table td code, .reward-mobile-meta code { border: 1px solid rgba(0, 229, 255, 0.18); } /* ── Pagination chips (unify player + admin) ────────────────────*/ .pagination-link, .admin-pagination .page-link { font-family: 'Orbitron', sans-serif; } /* ══════════════════════════════════════════════════════════════ CASE CRATES — make them feel valuable & important ══════════════════════════════════════════════════════════════ */ .case-card { background: linear-gradient(165deg, rgba(20, 24, 38, 0.92), rgba(8, 10, 18, 0.95)); } .case-card-body { padding-top: 2.4rem; } /* Bigger, more dramatic crate art */ .case-box-img { width: 116px; height: 116px; } .case-card:hover .case-box-img { transform: scale(1.12) translateY(-4px); } /* Stronger radial spotlight behind the crate */ .case-card-body::before { width: 150px; height: 150px; opacity: 0.14; } .case-card:hover .case-card-body::before { opacity: 0.30; } /* Price as a ticket chip */ .case-price { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--theme-color, rgba(255, 255, 255, 0.12)); padding: 0.4rem 1rem; border-radius: 50px; margin-bottom: 1.4rem; } /* Make the open CTA read as the hero action */ .case-btn { padding: 0.9rem; font-size: 0.8rem; letter-spacing: 2.5px; } /* ══════════════════════════════════════════════════════════════ INVENTORY — premium ticket chips ══════════════════════════════════════════════════════════════ */ .ticket-pill { backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .sidebar-ticket-item { background: linear-gradient(120deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.35)); transition: transform 0.25s, border-color 0.25s; } .sidebar-ticket-item:hover { transform: translateX(3px); } /* ══════════════════════════════════════════════════════════════ REWARDS — loot cards with rarity glow ══════════════════════════════════════════════════════════════ */ .reward-mobile-card { background: linear-gradient(150deg, rgba(20, 24, 38, 0.92), rgba(8, 10, 18, 0.95)) !important; } .reward-mobile-card::after { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--theme-color, var(--color-common)); box-shadow: 0 0 14px var(--theme-color, var(--color-common)); } /* ── Lobby tabs & links: align icons ────────────────────────────*/ .lobby-tab-btn .ico { font-size: 1.15em; } .sidebar-link { display: flex; align-items: center; gap: 10px; } .claim-daily-btn { display: inline-flex; align-items: center; gap: 9px; } .back-link .ico { font-size: 1.05em; } .admin-btn { display: inline-flex; align-items: center; gap: 6px; justify-content: center; } /* Generated-codes celebration box icons */ .generated-box h3 { display: flex; align-items: center; gap: 10px; } /* Bottom-nav icons sit a touch larger */ .mbn-item .ico { font-size: 1.5rem; } /* ══════════════════════════════════════════════════════════════ CASE THEATER · v4 — AAA case-opening experience Cinematic opening chamber, premium reel framing & a theatrical reward reveal built for suspense and payoff. ══════════════════════════════════════════════════════════════ */ /* ── Opening-chamber banner ─────────────────────────────────────*/ .spinner-outer-container { padding-top: 1.6rem; } .case-theater-banner { text-align: center; margin-bottom: 1.4rem; position: relative; z-index: 2; } .ct-kicker { display: inline-flex; align-items: center; gap: 7px; font-family: 'Orbitron', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--theme-color, var(--color-fire)); opacity: 0.85; padding: 0.3rem 0.9rem; border: 1px solid var(--theme-color, var(--color-fire)); border-radius: 50px; background: rgba(0, 0, 0, 0.35); } .ct-title { position: relative; font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1; letter-spacing: 6px; text-transform: uppercase; margin: 0.55rem 0 0.4rem; color: #fff; background: linear-gradient(180deg, #ffffff 10%, var(--theme-color, var(--color-fire)) 130%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 22px var(--theme-color, rgba(124, 92, 255, 0.5))); } /* Bloom layer behind the title */ .ct-title::before { content: attr(data-text); position: absolute; inset: 0; z-index: -1; color: var(--theme-color, var(--color-fire)); -webkit-text-fill-color: var(--theme-color, var(--color-fire)); filter: blur(18px); opacity: 0.55; } .ct-sub { display: block; font-family: 'Rajdhani', sans-serif; font-size: 0.92rem; font-weight: 600; letter-spacing: 1px; color: var(--text-secondary); text-transform: uppercase; } /* ── Taller, more cinematic reel ────────────────────────────────*/ .roulette-viewport { height: 200px; border-color: var(--theme-color, rgba(255,255,255,0.1)); } .roulette-viewport-wrapper { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), 0 0 26px -6px var(--theme-color, transparent); } /* Idle "armed" breathing glow (desktop only) */ @media (min-width: 769px) and (prefers-reduced-motion: no-preference) { .roulette-viewport-wrapper { animation: reelArmed 3.4s ease-in-out infinite; } } @keyframes reelArmed { 0%, 100% { box-shadow: 0 14px 40px rgba(0,0,0,0.7), 0 0 18px -8px var(--theme-color, transparent); } 50% { box-shadow: 0 14px 40px rgba(0,0,0,0.7), 0 0 34px -2px var(--theme-color, transparent); } } /* Brighter center lock-beam */ .hud-center-laser { stroke-width: 2.5; } .hud-reticle-top, .hud-reticle-bottom { filter: drop-shadow(0 0 6px var(--theme-color)); } /* Floor reflection strip beneath the reel */ .spinner-outer-container::after { content: ''; display: block; width: 60%; max-width: 480px; height: 40px; margin: -6px auto 0; background: radial-gradient(ellipse at center top, var(--theme-color, var(--color-fire)) 0%, transparent 72%); opacity: 0.16; filter: blur(4px); pointer-events: none; } /* The spin CTA reads as the hero action of the screen */ .btn-spin { font-size: 0.95rem; padding: 1.15rem 4.5rem; background: linear-gradient(135deg, var(--theme-color, var(--color-fire)) 0%, #22d3ee 130%); display: inline-flex; align-items: center; gap: 10px; } .btn-spin .ico { font-size: 1.2em; } /* ══════════════════════════════════════════════════════════════ THEATRICAL REWARD REVEAL (victory modal) ══════════════════════════════════════════════════════════════ */ .modal-content { max-width: 470px; padding: 2.8rem 2rem 2.2rem; border-width: 2px; } .modal-eyebrow { position: relative; z-index: 2; display: inline-block; font-family: 'Orbitron', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--theme-color, var(--color-legendary)); padding: 0.3rem 1rem; border: 1px solid var(--theme-color, var(--color-legendary)); border-radius: 50px; margin-bottom: 1rem; opacity: 0.9; } .modal-title { font-size: 1.5rem; letter-spacing: 4px; margin-bottom: 1.6rem; } /* Static radial ray-burst behind the prize (complements JS sunburst) */ .modal-rays { position: absolute; top: 42%; left: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, var(--theme-color, var(--color-legendary)) 0deg 4deg, transparent 4deg 14deg); -webkit-mask: radial-gradient(circle, #000 0%, transparent 62%); mask: radial-gradient(circle, #000 0%, transparent 62%); opacity: 0.12; z-index: 0; pointer-events: none; } @media (min-width: 769px) and (prefers-reduced-motion: no-preference) { .modal-overlay.active .modal-rays { animation: raysSpin 30s linear infinite; } } @keyframes raysSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Prize pedestal */ .modal-pedestal { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; margin: 0.5rem auto 1.4rem; width: 230px; height: 180px; } .modal-glow-orb { position: absolute; top: 42%; left: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--theme-color, var(--color-legendary)) 0%, transparent 65%); opacity: 0.4; filter: blur(8px); pointer-events: none; } @media (min-width: 769px) and (prefers-reduced-motion: no-preference) { .modal-overlay.active .modal-glow-orb { animation: orbPulse 2.4s ease-in-out infinite; } } @keyframes orbPulse { 0%, 100% { opacity: 0.32; transform: translate(-50%, -50%) scale(0.9); } 50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.08); } } .modal-ring { position: absolute; top: 50%; left: 50%; width: 168px; height: 168px; transform: translate(-50%, -50%); border: 1.5px solid var(--theme-color, var(--color-legendary)); border-radius: 50%; opacity: 0.35; box-shadow: 0 0 22px -4px var(--theme-color, var(--color-legendary)) inset; pointer-events: none; } .modal-item-img { position: relative; z-index: 2; max-width: 200px; height: 150px; margin: 0; } /* Reflective platform under the prize */ .modal-platform { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 150px; height: 26px; background: radial-gradient(ellipse at center, var(--theme-color, var(--color-legendary)) 0%, transparent 70%); opacity: 0.5; filter: blur(3px); pointer-events: none; } /* Rarity as a bold badge */ .modal-item-name { font-size: 1.5rem; } .modal-item-rarity { display: inline-block; padding: 0.35rem 1.4rem; border-radius: 50px; background: var(--theme-color, var(--color-legendary)); color: #08060f; margin-bottom: 1.6rem; box-shadow: 0 0 22px -4px var(--theme-color, var(--color-legendary)); -webkit-text-fill-color: #08060f; } /* Delivery note + claim CTA */ .modal-delivery { position: relative; z-index: 2; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.5; margin-bottom: 1.6rem; } .modal-delivery code { background: rgba(0, 0, 0, 0.45); padding: 3px 9px; border-radius: 6px; border: 1px solid rgba(0, 229, 255, 0.2); color: var(--color-cyan); font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.85rem; } .modal-delivery-eta { display: inline-flex; align-items: center; gap: 6px; margin-top: 0.7rem; font-weight: 600; color: var(--text-secondary); } .btn-modal-close { padding: 1rem 3rem; font-size: 0.8rem; letter-spacing: 2px; box-shadow: 0 8px 24px -6px var(--theme-color, var(--color-legendary)); } @media (max-width: 768px) { .roulette-viewport { height: 152px !important; } .ct-title { letter-spacing: 4px; } .btn-spin { padding: 1.05rem 1rem; font-size: 0.85rem; } .modal-pedestal { width: 200px; height: 158px; } .modal-item-img { max-width: 168px; height: 128px; } .modal-rays { width: 380px; height: 380px; } } /* ══════════════════════════════════════════════════════════════ ITEM SHOWCASE · v5 — premium collectible item cards The "Contenido Disponible en esta Caja" grid (NOT the spinner). ══════════════════════════════════════════════════════════════ */ .showcase-grid { grid-template-columns: repeat(auto-fill, minmax(162px, 1fr)); gap: 1.1rem; } .showcase-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; background: linear-gradient(170deg, rgba(22, 26, 40, 0.95) 0%, rgba(8, 10, 18, 0.97) 100%); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 14px; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s, box-shadow 0.3s; } /* Top rarity strip with glow (re-aim the base bottom bar to the top) */ .showcase-card::before { top: 0; bottom: auto; height: 3px; background: var(--rarity-color, var(--color-common)); box-shadow: 0 0 16px var(--rarity-color, var(--color-common)); z-index: 3; } /* Rarity backplate glow behind the item (re-aim the base bottom glow upward) */ .showcase-card::after { top: 0; bottom: auto; left: 50%; transform: translateX(-50%); width: 100%; height: 58%; background: radial-gradient(ellipse at top, var(--rarity-color, var(--color-common)) 0%, transparent 70%); opacity: 0.12; transition: opacity 0.3s; } .showcase-card:hover { transform: translateY(-6px); border-color: var(--rarity-color, rgba(255, 255, 255, 0.12)); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 26px -8px var(--rarity-color, transparent); } .showcase-card:hover::after { opacity: 0.24; } /* HUD corner brackets — same targeting frame as the crates */ .showcase-card .showcase-img-wrap::before { content: ''; position: absolute; inset: 8px 8px auto 8px; height: 14px; border-top: 1.5px solid var(--rarity-color, var(--color-common)); border-left: 1.5px solid var(--rarity-color, var(--color-common)); border-right: 1.5px solid var(--rarity-color, var(--color-common)); -webkit-mask: linear-gradient(#000 0 0) top left / 14px 14px no-repeat, linear-gradient(#000 0 0) top right / 14px 14px no-repeat; mask: linear-gradient(#000 0 0) top left / 14px 14px no-repeat, linear-gradient(#000 0 0) top right / 14px 14px no-repeat; opacity: 0.4; pointer-events: none; } .showcase-img-wrap { position: relative; z-index: 1; width: 100%; padding: 1.6rem 1rem 0.7rem; display: flex; justify-content: center; align-items: center; } .showcase-card img { max-width: 96px; height: 74px; margin: 0; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55)); transition: transform 0.3s; } .showcase-card:hover img { transform: scale(1.08); } .showcase-card h4 { padding: 0 0.7rem; margin: 0 0 0.45rem; min-height: 2.1em; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; z-index: 1; } /* Rarity as a badge pill */ .showcase-card .rarity-label { display: inline-block; padding: 2px 12px; margin-bottom: 0.7rem; border-radius: 50px; border: 1px solid var(--rarity-color, var(--color-common)); background: rgba(0, 0, 0, 0.35); color: var(--rarity-color, var(--color-common)); font-size: 0.6rem; z-index: 1; } /* Stat footer: ID tag + drop chance */ .showcase-foot { width: 100%; margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.05); background: rgba(0, 0, 0, 0.32); z-index: 1; } .showcase-id { font-family: 'Orbitron', monospace; font-size: 0.62rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; } .showcase-card .item-prob { margin: 0; font-family: 'Orbitron', sans-serif; font-size: 0.72rem; font-weight: 800; color: var(--rarity-color, var(--text-primary)); } /* Jackpot ribbon refresh */ .jackpot-badge { z-index: 4; background: linear-gradient(135deg, #ffc107, #7c5cff); color: #1a1205; box-shadow: 0 0 14px rgba(255, 152, 0, 0.5); } @media (max-width: 768px) { .showcase-card img { max-width: 80px; height: 58px; } .showcase-card h4 { font-size: 0.74rem; } } /* ══════════════════════════════════════════════════════════════ HUD READOUTS & RETICLE — DPI-safe HTML overlay The HUD uses preserveAspectRatio="none" (so its frame fills the reel), which non-uniformly stretches its contents. Text and the center marker are rendered here as HTML instead so they never look squashed on phones with odd pixel ratios. ══════════════════════════════════════════════════════════════ */ .hud-readout { position: absolute; top: 7px; z-index: 13; pointer-events: none; font-family: 'Orbitron', sans-serif; font-size: 0.5rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--theme-color, var(--color-fire)); opacity: 0.6; white-space: nowrap; } .hud-readout-left { left: 14px; } .hud-readout-right { right: 14px; } .hud-diamond { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%) rotate(45deg); border: 1.5px solid var(--theme-color, var(--color-fire)); z-index: 13; pointer-events: none; opacity: 0.85; box-shadow: 0 0 8px var(--theme-color, var(--color-fire)); } @media (max-width: 768px) { /* The SVG arrow carets compress horizontally on narrow screens — drop them and keep the vertical laser (undistorted) + crisp diamond. */ .hud-reticle-top, .hud-reticle-bottom { display: none; } } @media (max-width: 480px) { .hud-readout { font-size: 0.42rem; letter-spacing: 1px; } .hud-readout-left { left: 8px; } .hud-readout-right { right: 8px; } }