font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: #07070D; color: #E8E6E1; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior: none; } #root { min-height: 100%; overflow-x: clip; } /* ── CSS Variables (critical subset) ── */ :root { --pitch: #07070D; --gold: #D4AF37; --gold2: #F0D060; --gold-dim: rgba(212, 175, 55, 0.08); --ruby: #DC143C; --ruby2: #FF1A4A; --emerald: #D4AF37; --emerald2: #F5D76E; --ice: #88CCFF; --fog: #8A8AA0; --dim: #5A5A70; --border: rgba(180, 150, 80, 0.12); --border-gold: rgba(212, 175, 55, 0.2); --surface: rgba(12, 12, 28, 0.6); --glass: rgba(255, 255, 255, 0.03); --glass-border: rgba(212, 175, 55, 0.08); --shadow-gold: 0 0 30px rgba(212, 175, 55, 0.15); --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.4); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --font-display: 'Orbitron', monospace; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', monospace; --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* ── Layout ── */ .app-layout { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: #07070D; background-image: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.03) 0%, transparent 60%); overflow: hidden; position: relative; } /* ── Header ── */ .app-header { display: flex; align-items: center; flex-shrink: 0; min-height: 60px; height: auto; padding: max(8px, var(--safe-top)) max(16px, var(--safe-right)) 8px max(16px, var(--safe-left)); border-bottom: 1px solid var(--border); background: rgba(7, 7, 13, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 20; gap: 12px; } .app-logo { font-family: 'Orbitron', monospace; font-weight: 700; font-size: 16px; letter-spacing: 3px; color: var(--gold); text-shadow: 0 0 20px rgba(212, 175, 55, 0.1); white-space: nowrap; } .app-logo-sep { color: var(--ruby); } .header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; } .balance-display { display: flex; flex-direction: column; text-align: right; flex-shrink: 0; } .balance-label { font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 600; color: var(--dim); letter-spacing: 1.5px; text-transform: uppercase; line-height: 1; margin-bottom: 2px; } .balance-value { font-family: 'Orbitron', monospace; font-weight: 700; font-size: 14px; color: var(--gold); text-shadow: 0 0 10px rgba(212, 175, 55, 0.1); } /* ── Login Screen ── */ .login-screen { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 16px; background: #07070D; background-image: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.03) 0%, transparent 60%); } .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px; width: 100%; max-width: 400px; animation: slideUp 0.4s ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .login-title { font-family: 'Orbitron', monospace; font-size: 24px; font-weight: 700; letter-spacing: 4px; color: var(--gold); text-shadow: 0 0 30px rgba(212, 175, 55, 0.1); text-align: center; margin-bottom: 8px; } .login-subtitle { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--dim); letter-spacing: 3px; text-align: center; margin-bottom: 24px; } .login-tabs { display: flex; margin-bottom: 20px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); } .login-tab { flex: 1; padding: 10px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; transition: all 0.2s ease; cursor: pointer; border: none; background: transparent; color: var(--dim); } .login-tab.active { color: var(--gold); background: var(--gold-dim); } .login-error { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 8px 12px; margin-bottom: 16px; border-radius: var(--radius-sm); background: rgba(220, 20, 60, 0.1); color: var(--ruby2); border: 1px solid rgba(220, 20, 60, 0.2); display: block; } .login-form { display: flex; flex-direction: column; gap: 12px; } /* ── Buttons (critical) ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--radius-md); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; transition: all 0.2s ease; cursor: pointer; border: none; white-space: nowrap; } .btn:disabled { opacity: 0.3; cursor: not-allowed; } .btn-gold { background: linear-gradient(135deg, #D4AF37, #F0D060); color: #000; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2); } .btn-ruby { background: linear-gradient(135deg, #DC143C, #FF1A4A); color: #fff; box-shadow: 0 4px 15px rgba(220, 20, 60, 0.2); } .btn-emerald { background: linear-gradient(135deg, #D4AF37, #F5D76E); color: #000; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2); } .btn-sm { padding: 8px 14px; font-size: 11px; } .btn-full { width: 100%; } .btn-ghost { background: transparent; color: var(--dim); border: 1px solid var(--border); } /* ── Inputs (critical) ── */ .dash-input { flex: 1; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: rgba(0, 0, 0, 0.3); color: #E8E8F0; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; outline: none; transition: border-color 0.2s ease; width: 100%; } .dash-input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-dim); } /* ── Game Area (critical) ── */ .game-area { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; max-width: 1200px; margin: 0 auto; } .game-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-shrink: 0; overflow-x: auto; padding-bottom: 4px; } .game-tab { padding: 10px 18px; border-radius: var(--radius-md); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.3px; transition: all 0.2s ease; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--dim); white-space: nowrap; } .game-tab.active { color: var(--gold); background: var(--gold-dim); border-color: var(--border-gold); box-shadow: 0 0 20px rgba(212, 175, 55, 0.12); } /* ── Skeleton loader ── */ .skeleton { background: linear-gradient(90deg, var(--glass) 25%, rgba(30,30,60,0.5) 50%, var(--glass) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-md); } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ── Splash Screen ── */ #root::before { content: 'ROYAL//GAMES'; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 9999; font-family: 'Orbitron', monospace; font-size: clamp(24px, 6vw, 48px); font-weight: 900; letter-spacing: 8px; color: #D4AF37; text-shadow: 0 0 40px rgba(212, 175, 55, 0.3), 0 0 80px rgba(212, 175, 55, 0.1), 0 4px 20px rgba(0, 0, 0, 0.5); background: #07070D; animation: splashFadeOut 0.45s ease-out 0.35s forwards; pointer-events: none; } #root::after { content: ''; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9998; width: 120px; height: 2px; background: linear-gradient(90deg, transparent, #DC143C, #D4AF37, transparent); opacity: 0.5; animation: splashLine 0.5s ease-out 0.15s forwards, splashFadeOut 0.45s ease-out 0.35s forwards; pointer-events: none; } @keyframes splashFadeOut { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } @keyframes splashLine { 0% { width: 0; opacity: 0; } 100% { width: 200px; opacity: 0.6; } } .splash-ready #root::before, .splash-ready #root::after { display: none; } /* ── Animations (critical) ── */ @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-fade-in { animation: fadeIn 0.3s ease; }