:root{--bg1:#0f0f1b;--bg2:#1a1a2e;--accent-pubg:#f6d365;--accent-ff:#ff6b6b;--text:#fff;--card-gap:14px; --glowing-gold: #FFD700;}
*{box-sizing:border-box;margin:0;padding:0;font-family:"Tajawal",sans-serif}
html { background-color: var(--bg1); }
html,body{height:100%;-webkit-font-smoothing:antialiased}
body{ background-color: transparent; color:var(--text); overflow-x:hidden; position: relative; z-index: 1; }
body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: url('images/bg.png') center/cover fixed no-repeat, linear-gradient(135deg,var(--bg1),var(--bg2)); background-size: cover; z-index: -1; }
header{position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);z-index:2000;border-bottom:1px solid rgba(255,255,255,0.03)}
.logo{height:46px}
.menu-btn{font-size:22px;cursor:pointer;color:var(--text)}
.sidebar{ position:fixed; top: 64px; right:-280px; width:280px; height: calc(100vh - 64px); background:linear-gradient(180deg, rgba(8,8,10,0.96), rgba(6,6,8,0.9)); padding:20px; z-index:1900; transition:right .32s ease; backdrop-filter:blur(6px); overflow-y: auto; }
.sidebar.active{right:0}
.sidebar h3{font-size:20px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.03);padding-bottom:10px}
.sidebar a{display:flex;justify-content: flex-start; gap:15px;align-items:center;padding:12px 16px;border-radius:10px;margin:8px 0;color:var(--text);text-decoration:none;font-weight:600;transition:all .25s ease;border:1px solid transparent;}
.sidebar a i {font-size:18px;width:24px;text-align:center;color:rgba(255, 255, 255, 0.6);transition:color .25s ease;}
#loginLink, #registerLink {background:linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));border:1px solid rgba(255, 255, 255, 0.08);}
#loginLink:hover, #registerLink:hover {transform:translateY(-4px) scale(1.02);background:linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));border-color:rgba(255, 255, 255, 0.15);box-shadow:0 8px 20px rgba(0,0,0,0.3);}
#loginLink:hover i, #registerLink:hover i {color:var(--accent-pubg);}
#whatsappLink {background:#25D366;color:white;border-color: #25D366;}
#whatsappLink i { color:white; }
#whatsappLink:hover {transform:translateY(-4px) scale(1.02);box-shadow:0 0 15px rgba(37, 211, 102, 0.5);filter: brightness(1.1);}
.dashboard-link { display: flex; align-items: center; gap: 15px; padding: 12px 16px; background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; margin-bottom: 15px !important; transition: all .25s ease; text-align: right; }
.dashboard-link i { font-size: 32px; color: var(--accent-pubg); opacity: 0.8; }
.dashboard-link div { display: flex; flex-direction: column; gap: 2px; }
.dashboard-link div span { font-weight: 700; font-size: 16px; color: #fff; }
.dashboard-link div small { font-size: 12px; color: rgba(255,255,255,0.6); }
.dashboard-link:hover { transform: translateY(-4px) scale(1.02); background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)); border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.dashboard-link:hover i { opacity: 1; }
.main{padding-top:88px;max-width:1200px;margin:0 auto;padding-left:12px;padding-right:12px; padding-bottom: 70px;}
.slider{width:95%;max-width:1100px;height:320px;margin:18px auto;border-radius:14px;position:relative;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,0.6), 0 0 25px rgba(246, 211, 101, 0.15);}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .9s ease,transform .9s ease;transform:scale(1.02)}
.slide.show{opacity:1;transform:scale(1)}
.dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.dots button{width:10px;height:10px;border-radius:50%;border:none;background:rgba(255,255,255,0.28);cursor:pointer}
.dots button.active{background:var(--accent-pubg);box-shadow:0 0 10px rgba(255,255,255,0.08)}
.section{margin:8px auto;width:95%;max-width:1100px;background:transparent;padding:18px;border-radius:12px}
.section .section-top{display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.section .section-top img{width:260px;height:auto;object-fit:contain;filter:drop-shadow(0 10px 30px rgba(0,0,0,0.5)) drop-shadow(0 0 12px rgba(255,255,255,0.5))}
.cards{display:flex;gap:var(--card-gap);overflow-x:auto;padding:10px;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.cards::-webkit-scrollbar{height:9px}
.cards::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:10px}
.card{flex:0 0 calc((100% / 5) - (var(--card-gap) * .2));min-width:140px;max-width:220px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:12px;padding:10px;text-align:center;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;backdrop-filter:blur(6px)}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.6)}
.card-image-container {position: relative;border-radius: 10px;overflow: hidden;display: block;}
.card-image-container::after {content: '';position: absolute;bottom: 0;left: 0;right: 0;height: 70%;background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);pointer-events: none;}
.card-image-container img {width: 100%;height: auto;display: block;}
.card .card-price {margin-top: 12px;font-size: 18px;font-weight: 900;}
.card-image-container h4 {position: absolute;bottom: 10px;left: 0;right: 0;margin: 0;color: #fff;text-shadow: 0 1px 5px rgba(0,0,0,0.9);z-index: 2;padding: 0 5px;display: flex;align-items: center;justify-content: center;gap: 8px;font-size: 24px;font-weight: 900;}
.card-image-container h4 img {height: 32px;width: auto;margin: 0;padding: 0;display: inline-block;vertical-align: middle;}
@keyframes gold-shine { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
.card .card-price, .modal.show .offer-price > span { background: linear-gradient(90deg, var(--glowing-gold), #FFFFE0, var(--glowing-gold)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 12px rgba(255, 215, 0, 0.6); animation: gold-shine 3s linear infinite; }
.modal{display: flex; opacity: 0; visibility: hidden; position:fixed; inset:0; align-items:center; justify-content:center; background:rgba(10, 10, 20, 0.6); backdrop-filter:blur(10px); z-index:3000; transition: opacity .3s ease, visibility .3s ease;}
.modal.show{opacity: 1; visibility: visible;}
.game-modal .modal-wrapper {position: relative; transform: scale(0.95); transition: transform .3s ease-out;}
.modal.show .game-modal .modal-wrapper {transform: scale(1);}
.game-modal .modal-border-wrap {position: relative; border-radius: 26px; overflow: hidden; padding: 2px;}
.game-modal .modal-border-wrap::before {content: ''; position: absolute; top: 50%; left: 50%; width: 200%; height: 200%; background: conic-gradient(from 180deg, var(--accent-pubg), var(--accent-ff), #00c6ff, var(--accent-pubg)); z-index: 1; animation: rotateBorder 4s linear infinite;}
@keyframes rotateBorder { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.game-modal .modal-card{position: relative; width: 380px; max-width: 95vw; border-radius: 24px; background: linear-gradient(160deg, rgba(26, 28, 42, 0.95), rgba(15, 15, 27, 0.95)); box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5); z-index: 2;}
.game-modal .modal-logo-container {position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background: var(--bg2); border-radius: 20px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 0 30px rgba(0,0,0,0.4); z-index: 3;}
.game-modal .modal-logo{width: 90px; height: 90px; object-fit: contain; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));}
.game-modal .modal-content {padding-top: 60px; padding-left: 25px; padding-right: 25px; padding-bottom: 25px; text-align: center;}
.offer-name, .offer-price {position: relative; overflow: hidden; color: transparent; margin-bottom: 4px;}
.offer-price {margin-bottom: 20px;}
.offer-name > span, .offer-price > span {display: inline-block;}
@keyframes revealText {from { transform: translateY(110%); } to { transform: translateY(0); }}
.modal.show .offer-name > span {color: var(--text); animation: revealText 0.6s 0.2s ease-out backwards;}
.segmented-control { display: grid; grid-template-columns: 1fr 1fr; background: rgba(0,0,0,0.3); border-radius: 12px; padding: 4px; margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.1); }
.segmented-control button { background: transparent; border: none; color: rgba(255,255,255,0.6); padding: 10px; border-radius: 10px; cursor: pointer; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all .25s ease; border-right: 1px solid rgba(255,255,255,0.1); }
.segmented-control button:last-child { border-right: none; }
.segmented-control button.active { background: var(--accent-pubg); color: #111; }
.modal-card.ff .segmented-control button.active { background: var(--accent-ff); }
.input-group-title { display: block; text-align: right; font-size: 14px; margin-bottom: 10px; color: rgba(255,255,255,0.6); }
.gift-card-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px; margin-bottom: 20px; }
.gift-card-btn { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); color: var(--text); padding: 10px 5px; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 700; transition: all .2s ease; }
.gift-card-btn:hover { background: rgba(255,255,255,0.1); }
.gift-card-btn.selected { border-color: var(--accent-pubg); box-shadow: 0 0 10px rgba(246, 211, 101, 0.3); color: var(--accent-pubg); }
.modal-card.ff .gift-card-btn.selected { border-color: var(--accent-ff); box-shadow: 0 0 10px rgba(255, 107, 107, 0.3); color: var(--accent-ff); }
.modal-input{width: 100%; padding: 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.3); color: var(--text); text-align: center; font-size: 18px; font-weight: 700; outline: none; transition: all .2s;}
.modal-input:focus {border-color: var(--accent-pubg); box-shadow: 0 0 15px rgba(246, 211, 101, 0.3);}
.quantity-selector {display: flex;align-items: center;justify-content: center;gap: 10px;}
.quantity-selector .modal-input {width: 100px;}
.quantity-btn {width: 40px;height: 40px;border-radius: 50%;border: 1px solid rgba(255,255,255,0.1);background: rgba(0,0,0,0.3);color: var(--text);font-size: 24px;font-weight: bold;cursor: pointer;transition: all 0.2s;line-height: 38px;}
.quantity-btn:hover {background: rgba(255,255,255,0.1);border-color: var(--accent-pubg);}
.quantity-btn:disabled {opacity: 0.4;cursor: not-allowed;}
.auth-modal .modal-card{width:420px; max-width: 95vw;max-height: 90vh; overflow-y: auto;padding: 25px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius: 12px;border: 1px solid rgba(255,255,255,0.05);box-shadow: 0 15px 40px rgba(0,0,0,0.5);position: relative;transform: scale(0.95);transition: transform 0.3s ease-out;}
.modal.show .auth-modal .modal-card {transform: scale(1);}
.auth-modal h3{text-align:center;margin-bottom:24px;font-size:22px; font-weight: 700;}
.form-step{display:none;}
.form-step.active-step{display:block; animation: fadeIn .3s ease-in-out;}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.input-wrapper{position:relative;margin-bottom:16px}
.input-wrapper .input-icon{position:absolute;top:50%;right:15px;transform:translateY(-50%);color:rgba(255,255,255,0.4)}
.input-wrapper .eye-icon{position:absolute;top:50%;left:15px;transform:translateY(-50%);color:rgba(255,255,255,0.5);cursor:pointer}
.input-wrapper input{width:100%;padding:12px 45px;border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:rgba(0,0,0,0.2);color:#fff;font-size:16px;outline:none;transition:all .25s ease-in-out; text-align: center;}
.input-wrapper input:focus{border-color:var(--accent-pubg);box-shadow:0 0 12px rgba(246,211,101,0.3); background: rgba(0,0,0,0.1);}
.form-options{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.custom-checkbox{display:flex;align-items:center;cursor:pointer;font-size:14px;color:rgba(255,255,255,0.7)}
.custom-checkbox input{opacity:0;width:0;height:0}
.custom-checkbox .checkmark{width:18px;height:18px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);border-radius:4px;margin-left:8px;transition:background .2s}
.custom-checkbox input:checked ~ .checkmark{background:var(--accent-pubg)}
.custom-checkbox input:checked ~ .checkmark::after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:#111;display:flex;align-items:center;justify-content:center;font-size:12px;height:100%}
.forgot-password-link {font-size: 14px; color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color .2s;}
.forgot-password-link:hover {color: var(--accent-pubg);}
.strength-meter{height:8px;background:rgba(255,255,255,0.05);border-radius:10px;margin-top:-8px;margin-bottom:16px;display:flex;overflow:hidden}
.strength-meter .bar{height:100%;width:0%;transition:width .3s,background-color .3s}
.strength-meter .bar.weak{background-color:#e74c3c}
.strength-meter .bar.medium{background-color:#f39c12}
.strength-meter .bar.strong{background-color:#2ecc71}
.strength-meter .bar.very-strong{background-color:#3498db}
.password-match-error{color:#e74c3c;font-size:12px;text-align:right;margin-top:-10px;margin-bottom:10px;display:none}
.form-navigation{display:flex;gap:10px;margin-top:10px}
.cta{margin-top:0; width:100%; padding:15px; font-size:18px; border-radius:12px; border:none; background:linear-gradient(90deg,var(--accent-pubg),#ffd27a); color:#111; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; position:relative; overflow:hidden; transition:transform .2s ease, filter .2s ease;}
.cta:hover{ transform:translateY(-4px); box-shadow:0 10px 20px rgba(246,211,101,0.2); filter: brightness(1.1);}
.cta.ff { background: linear-gradient(90deg, var(--accent-ff), #ff9b9b); }
.cta.ff:hover{ box-shadow: 0 10px 20px rgba(255,107,107,0.2); }
.cta.cta-danger { background: linear-gradient(90deg, #e74c3c, #c0392b); color: white; }
.divider {display: flex;align-items: center;text-align: center;color: rgba(255,255,255,0.4);font-size: 13px;margin: 20px 0;}
.divider::before, .divider::after {content: '';flex: 1;border-bottom: 1px solid rgba(255,255,255,0.1);}
.google-btn {display: flex;align-items: center;justify-content: center;gap: 12px;width: 100%;padding: 12px;border-radius: 10px;background: #fff;color: #444;font-weight: 700;font-size: 16px;border: 1px solid #ddd;cursor: pointer;transition: background-color .2s, transform .2s;}
.google-btn:hover {background: #f5f5f5; transform: translateY(-2px);}
.switch-modal-text{text-align:center;margin-top:16px;font-size:14px;color:rgba(255,255,255,0.6)}
.switch-link{color:var(--accent-pubg);font-weight:bold;text-decoration:none}
.modal-close{position:absolute;top:15px;left:15px;background:rgba(255,255,255,0.05);border:none;width:32px;height:32px;border-radius:50%;color:#fff;font-size:24px;line-height:30px;cursor:pointer;transition:background .2s; z-index: 10;}
.modal-close:hover{background:rgba(255,255,255,0.1)}
footer{position: fixed;left: 0;right: 0;bottom: 0;padding: 12px 20px; background: rgba(0,0,0,0.55);backdrop-filter: blur(8px);z-index: 1500;border-top: 1px solid rgba(255,255,255,0.03);}
.footer-icons { display: flex; justify-content: space-around; align-items: center; }
.footer-icons a { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 26px; transition: all 0.3s ease; }
.footer-icons a:hover { transform: scale(1.2) translateY(-2px); }
.footer-icons a[href*="wa.me"]:hover { color: #25D366; text-shadow: 0 0 15px rgba(37, 211, 102, 0.7); }
@media (max-width:700px){ .card{ flex: 0 0 calc(50% - (var(--card-gap) / 2)); max-width: none; } .slider{height:200px} .section .section-top img{width:180px} header{height:60px;padding:8px 12px} .sidebar { top: 60px; height: calc(100vh - 60px); } }
@media (max-width:1000px){ .card{flex:0 0 28%} }
@media (max-width: 480px) { .game-modal .modal-logo-container {top: 0; transform: translate(-50%, -50%); width: 80px; height: 80px;} .game-modal .modal-logo {width: 70px; height: 70px;} .game-modal .modal-content {padding-top: 50px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px;} }