/* ------------------------------------------------------- GameRewardsHub — Master Stylesheet Path: assets/css/style.css ---------------------------------------------------- */ /* --- Base / Reset --- */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; background:#0e0f16; color:#e5e7eb; -webkit-font-smoothing:antialiased; line-height:1.45; } /* --- Utilities --- */ .hidden{display:none !important} .center{display:flex;align-items:center;justify-content:center} /* --- Header --- */ .header{ display:flex;align-items:center;gap:12px; padding:18px 16px; background:linear-gradient(90deg,#0b1630,#133b8a); border-bottom:1px solid rgba(255,255,255,.06); } .header img{width:42px;height:42px;border-radius:8px;object-fit:cover} .header h1{margin:0;color:#fff;font-size:22px;font-weight:800} /* Header right actions */ .header-right{margin-left:auto;display:flex;align-items:center;gap:10px} .icon-btn{ background:transparent;border:0;cursor:pointer; font-size:20px;line-height:1;color:#eaf2ff; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); } /* --- Sections / Titles --- */ .section{padding:18px 16px} .section-title{ display:block;margin:0 0 12px 0; color:#eaf2ff;font-size:20px;font-weight:800; } .login-section{padding:18px 16px} /* --- Login Row --- */ .login-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} #playerId{ flex:1 1 260px;min-width:240px; height:44px;border-radius:10px;border:1px solid #2a2f45; background:#101321;color:#e5e7eb; padding:0 14px;outline:none; } #playerId::placeholder{color:#94a3b8} /* --- Buttons (generic) --- */ .btn{ height:44px;padding:0 18px;border-radius:10px;border:1px solid transparent; font-weight:700;cursor:pointer;user-select:none; transition:transform .06s ease, background .15s ease, border-color .15s ease, opacity .15s ease; } .btn:active{transform:translateY(1px)} .btn.primary{background:#2563eb;color:#fff} .btn.primary:hover{background:#1d4ed8} .btn.violet{background:#7c3aed;color:#fff} .btn.violet:hover{background:#6d28d9} .btn.danger{background:#ef4444;color:#fff} .btn.danger:hover{background:#dc2626} /* --- Status message --- */ #statusMsg{display:none;margin:10px 4px 0 4px;font-weight:700;text-align:center} #statusMsg.msg--ok{color:#22c55e} #statusMsg.msg--error{color:#ef4444} #statusMsg.msg--info{color:#93c5fd} /* Optional hook */ #submitStatus{display:none;color:#31d05e;font-weight:700;margin-top:8px;text-align:center} /* --- Ads Counter bar --- */ .ads-counter{ margin:14px 16px 6px; padding:12px 14px;border-radius:12px; background:#15182a;border:1px solid #22253b; display:flex;justify-content:space-between;align-items:center; color:#c7d2fe;font-weight:800; } /* --- Grids --- */ .grid{display:grid;gap:14px} .diamond-grid,.deal-grid{grid-template-columns:repeat(3,1fr)} @media (min-width:560px){.diamond-grid,.deal-grid{grid-template-columns:repeat(4,1fr)}} @media (min-width:920px){.diamond-grid,.deal-grid{grid-template-columns:repeat(5,1fr)}} /* --- Cards (generic) --- */ .card{ background:#151827;border:1px solid #22263e; border-radius:16px;padding:16px 12px 12px; box-shadow:0 8px 24px rgba(0,0,0,.25); display:flex;flex-direction:column;align-items:center;gap:12px; } .card img{ width:100%;aspect-ratio:5/6;object-fit:contain;display:block; filter:drop-shadow(0 8px 24px rgba(0,0,0,.35)); } /* --- Diamond cards --- */ .diamond-grid .card{padding:14px 10px 10px;gap:10px} .diamond-grid .card .diamond-top{ width:100%;display:flex;flex-direction:column;align-items:center;gap:6px } .diamond-grid .card .diamond-top svg{width:22px;height:22px} .diamond-grid .card .diamond-num{font-size:26px;font-weight:800;line-height:1} .diamond-grid .card .diamond-points{opacity:.9;font-weight:700} /* --- Claim button --- */ .claim-btn{ width:100%;height:40px;border-radius:10px;border:1px solid #1d4ed8; background:#1d4ed8;color:#fff;font-weight:800;cursor:pointer; transition:background .15s,border-color .15s,transform .06s; margin-top:4px; } .claim-btn:hover{background:#2563eb;border-color:#2563eb} .claim-btn:active{transform:translateY(1px)} .claim-btn.active, .grid .card .claim-btn.active{ background:#16a34a !important;border-color:#16a34a !important;color:#fff !important; } /* --- Ad Modal --- */ .ad-modal{position:fixed;inset:0;background:rgba(7,8,14,.72);display:none;align-items:center;justify-content:center;z-index:90} .ad-modal[aria-hidden="false"]{display:flex} .ad-modal__card{width:min(520px,92vw);border-radius:16px;overflow:hidden;background:#0f1324;border:1px solid #212743} .ad-modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#0b1630;color:#e5e7eb;font-weight:800} .ad-modal__body{padding:16px} .ad-placeholder{height:220px;background:#10172a;border:1px dashed #2b3357;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-weight:700} .ad-modal__footer{padding:12px 14px;border-top:1px solid #1f2542;display:flex;justify-content:flex-end} /* --- Minor layout polish --- */ .login-section .ad-controls{display:flex;gap:12px;margin-top:12px} /* --- Wallet Card --- */ .wallet-card{ padding:16px;border-radius:16px;background:#15182a;border:1px solid #22253b } .wallet-head{display:flex;align-items:center;justify-content:space-between} .wallet-title{font-size:22px;font-weight:800;color:#eaf2ff} .wallet-amount{font-size:22px;font-weight:800;color:#eaf2ff} .wallet-amount small{font-size:14px;opacity:.8;margin-left:4px} .wallet-meta{margin-top:8px;color:#a5b4fc;font-weight:700;display:flex;gap:8px} .wallet-points{ margin-top:14px;padding:10px 12px;border-radius:12px; background:#0f1324;border:1px solid #212743; display:flex;align-items:center;justify-content:space-between; color:#c7d2fe;font-weight:800 } /* ===================================================== Special Deals layout (Topup.pk style), images full, and package diamond badge ===================================================== */ #special-deals .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } @media (max-width:768px){ #special-deals .grid{grid-template-columns:repeat(2,minmax(0,1fr))} } #special-deals .deal-card{ position:relative; background:#151a28; border-radius:18px; height:160px; padding:10px; box-shadow:0 6px 18px rgba(0,0,0,.25); border:1px solid #22263e; } #special-deals .deal-card .deal-img { width: 100%; height: 100%; border-radius: 12px; background-size: cover; background-position: center; background-repeat: no-repeat; } #special-deals .deal-title{margin-top:8px;font-weight:600} #special-deals .deal-claim{margin-top:8px} .package-card{position:relative;overflow:visible} /* ===================================================== Info/Note Modal ===================================================== */ .modal{ position:fixed;inset:0;background:rgba(0,0,0,.6); display:none;align-items:center;justify-content:center;z-index:9999; } .modal.show{display:flex} .modal-box{ width:min(520px,92vw);background:#0f1320;color:#fff; border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.45); } /* ===================================================== ENTER FACE (VISIBLE BUTTONS ON THE ARTWORK) ===================================================== */ /* Buttons position & size (tweak if needed) */ :root{ --ef-login-top: 42vh; /* Login button vertical position (was 54vh) */ --ef-google-top: 52vh; /* Continue with Email vertical position (was 64vh) */ --ef-btn-width: min(560px, 88vw); --ef-btn-height: 56px; /* screen ka top/bottom background, image edge color jaisa */ --ef-bg-above:#0f1735; --ef-bg-below:#0f1735; /* NEW: inline auth form position */ --ef-form-top: 62vh; /* kam = upar, zyada = neecha */ } .enter-face{ position:relative; min-height:100svh; background:linear-gradient(var(--ef-bg-above), var(--ef-bg-below)); } /* Center the artwork */ .enter-face .ef-art{ position:absolute; inset:auto; left:50%; top:50%; transform:translate(-50%,-50%); width:min(690px,92vw); height:auto; max-height:92svh; object-fit:contain; display:block; z-index:1; } /* Visible solid buttons */ .ef-btn{ position:absolute; z-index:2; left:50%; transform:translateX(-50%); width:var(--ef-btn-width); height:var(--ef-btn-height); border-radius:16px; border:1px solid #20294a; background:#0c142f; color:#fff; font-weight:800; letter-spacing:.2px; font-size:clamp(18px, 2.8vw, 26px); display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04); cursor:pointer; user-select:none; transition:transform .06s ease, background .15s ease, border-color .15s ease; } .ef-btn:hover{ background:#101b44; border-color:#2a3560; } .ef-btn:active{ transform:translateX(-50%) translateY(1px); } .ef-login { top:var(--ef-login-top); } .ef-google { top:var(--ef-google-top); } /* NEW: position the inline auth form by CSS variable */ .enter-face #efAuthForm{ position:absolute; top:var(--ef-form-top); left:50%; transform:translateX(-50%); } /* google button icon */ .ef-google-btn .g-icon{ width:22px; height:22px; display:inline-grid; place-items:center; } /* legal links */ .ef-legal{ position:absolute; z-index:2; left:50%; bottom:24px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; color:#c8d2ff; font-weight:600; font-size:14px; text-shadow:0 1px 2px rgba(0,0,0,.35); } .ef-legal a{ color:#e6ecff; text-decoration:none; border-bottom:1px dotted rgba(230,236,255,.5); } .ef-legal a:hover{ border-bottom-color:transparent; } /* small phones tweak */ @media (max-width:360px){ :root{ --ef-btn-height:52px; } } /* ===================================================== NEW — Minimal a11y + disabled state (ADDED) ===================================================== */ /* Keyboard focus outlines */ :focus-visible{outline:2px solid #60a5fa; outline-offset:2px} .btn:focus-visible, .claim-btn:focus-visible, #playerId:focus-visible, .ef-btn:focus-visible, .icon-btn:focus-visible{outline:2px solid #60a5fa; outline-offset:2px} /* Disabled buttons look (used when Submit disables) */ .btn[disabled], .claim-btn[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; } /* ===================================================== ADDITIONS (per your request) ===================================================== */ /* 1) Compact header (text + bar ~50% smaller on mobile) */ @media (max-width:600px){ .header{ padding:9px 12px; } /* roughly half the original 18px */ .header img{ width:28px; height:28px; } .header h1{ font-size:14px; line-height:1.15; } } /* 2) Diamond icon/number tidy: - icon ≈ emoji size - number normal text size */ .diamond-grid .card .diamond-top svg{ width:1.1em; height:1.1em; } .diamond-grid .card .diamond-num{ font-size:1rem; font-weight:700; line-height:1.1; /* === Fullscreen Ad Overlay (new) === */ .grh-ad-overlay { position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; background: rgba(0, 0, 0, .96) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .grh-ad-overlay[hidden] { display: none !important; } .grh-ad-close { position: absolute !important; top: 12px !important; right: 12px !important; width: 44px !important; height: 44px !important; border: 0 !important; border-radius: 999px !important; font-size: 28px !important; line-height: 44px !important; text-align: center !important; background: rgba(255, 255, 255, .12) !important; color: #fff !important; cursor: pointer !important; } /* === Auto Ad Counter Circle === */ .grh-counter{ position:absolute!important; top:12px!important; right:60px!important; z-index:2147483649!important; } .grh-counter .c-outer{ width:44px; height:44px; border-radius:999px; background:rgba(255,255,255,.12); display:grid; place-items:center; } .grh-counter .c-inner{ width:28px; height:28px; border-radius:999px; background:rgba(74,222,128,.95); /* green */ color:#000; display:grid; place-items:center; font:700 14px/1 system-ui; } .grh-ad-close:active { transform: scale(.96); } /* Safety: kahin aur se radius apply ho raha ho to kill */ video, iframe { border-radius: 0 !important; } .grh-ad-frame{ width:100vw !important; height:100vh !important; border:0 !important; outline:0 !important; background:#000 !important; border-radius:0 !important; object-fit:cover !important; display:block !important; } /* Hide default rounded native video controls */ video::-webkit-media-controls { display:none !important; } .package-card::before{ content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(45deg); width:18px; height:18px; border-radius:2px; background:#7dd3fc; box-shadow:0 4px 10px rgba(0,0,0,.35), inset 0 0 6px rgba(255,255,255,.35); } /* hide eruda panel */ .eruda, .eruda * { display: none !important; }