/* ============================================================ Rewards Battle eSports — shared theme (Premium Blue) ------------------------------------------------------------ Linked by every page using the new design. Kept separate from assets/app.css on purpose: that file still backs pages not yet migrated to this theme (about/contact/faq/profile/settings/ support/wallet/etc.) — overwriting it would break all of them at once. Once every page has moved over, this file can be renamed to app.css and the old one retired. Page-specific layout (cards, grids, page-only components) stays in that page's own CSS file (e.g. assets/login.css) and links AFTER this one. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); .msr{font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal; display:inline-block; line-height:1; white-space:nowrap; letter-spacing:normal; text-transform:none; -webkit-font-smoothing:antialiased; font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;} .msr.fill{ font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24; } .rupee-ic{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:#F5F8FF; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,0.25);} .rupee-ic svg{width:78%; height:78%;} :root{ --bg:#030914; --bg2:#071426; --card:#0A172A; --card2:#0D1E38; --blue:#147BFF; --blue-br:#35A8FF; --gold:#FFC400; --gold-dk:#B98200; --white:#F5F8FF; --muted:#8292AA; --line:rgba(53,168,255,0.16); --gold-line:rgba(255,196,0,0.24); --green:#37E28C; --red:#FF4D5E; --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px); --safe-right:env(safe-area-inset-right,0px); } *{box-sizing:border-box; margin:0; padding:0;} html,body{background:var(--bg); color:var(--white); font-family:'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; width:100%; overflow-x:hidden; -webkit-tap-highlight-color:transparent;} img{max-width:100%; display:block;} button{font-family:inherit; cursor:pointer; touch-action:manipulation;} a{text-decoration:none; color:inherit; touch-action:manipulation;} input,textarea,select{font-family:inherit;} :focus-visible{outline:2px solid var(--blue-br); outline-offset:2px;} ::-webkit-scrollbar{display:none;} *{scrollbar-width:none;} /* ---------- Layout helpers ---------- */ .wrap{max-width:440px; margin:0 auto; padding:0 20px;} /* ---------- Buttons ---------- */ .btn{display:block; width:100%; text-align:center; padding:14px; border-radius:13px; border:none; font-weight:900; font-size:13.5px; letter-spacing:0.3px;} .btn:disabled{opacity:0.5; cursor:not-allowed; pointer-events:none;} .btn-primary{background:linear-gradient(180deg,var(--blue-br),var(--blue)); color:#04101f; box-shadow:0 10px 24px rgba(20,123,255,0.4);} .btn-primary:disabled{opacity:0.5;} .btn-secondary{background:rgba(255,255,255,0.03); color:var(--white); border:1px solid var(--line);} .btn-success{background:linear-gradient(180deg,#4dffb0,var(--green)); color:#04170e; box-shadow:0 10px 22px rgba(55,226,140,0.35);} .btn-gold{background:linear-gradient(180deg,#FFD84D,var(--gold)); color:#1a1200; box-shadow:0 10px 22px rgba(255,196,0,0.3);} .btn-ghost{background:transparent; color:var(--muted); border:none; box-shadow:none;} .btn-ghost:active{color:var(--white);} .btn-sm{padding:10px 14px; font-size:12px; min-height:44px; display:flex; align-items:center; justify-content:center;} .spinner{display:inline-block; width:14px; height:14px; border-radius:50%; border:2px solid rgba(4,16,31,0.35); border-top-color:#04101f; animation:rb-spin .7s linear infinite; vertical-align:-2px; margin-right:7px;} @keyframes rb-spin{ to{ transform:rotate(360deg); } } /* ---------- Form fields ---------- */ .field{margin-top:18px;} .field-label{font-size:10px; font-weight:800; color:var(--muted); letter-spacing:1px; text-transform:uppercase;} .field-input-wrap{position:relative; margin-top:8px;} .field-input{width:100%; padding:13px 14px; border-radius:12px; background:rgba(255,255,255,0.03); border:1px solid var(--line); color:var(--white); font-size:13px; outline:none; transition:border-color .15s, box-shadow .15s;} .field-input::placeholder{color:var(--muted);} .field-input:focus{border-color:var(--blue-br); box-shadow:0 0 0 3px rgba(53,168,255,0.15);} .field-input[aria-invalid="true"]{border-color:var(--red);} .field-input.pr{padding-right:44px;} .eye-btn{position:absolute; right:0; top:0; width:44px; height:100%; min-height:44px; background:none; border:none; color:var(--muted); display:flex; align-items:center; justify-content:center;} .eye-btn .msr{font-size:19px;} .field-hint{font-size:10px; color:var(--muted); font-weight:600; margin-top:6px;} .field-hint.err{color:var(--red); font-weight:700;} .field-error{font-size:10.5px; color:var(--red); font-weight:700; margin-top:6px;} .check-row{display:flex; align-items:flex-start; gap:10px; margin-top:16px;} .checkbox{width:19px; height:19px; border-radius:6px; border:1.5px solid var(--line); background:rgba(255,255,255,0.03); flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; transition:all .15s;} .checkbox.checked{background:linear-gradient(180deg,var(--blue-br),var(--blue)); border-color:transparent;} .checkbox .msr{font-size:13px; color:#04101f; opacity:0; transition:opacity .1s;} .checkbox.checked .msr{opacity:1;} .check-text{font-size:11.5px; color:var(--muted); font-weight:600; line-height:1.5;} .check-text a{color:var(--blue-br); font-weight:700;} /* ---------- Status / notice / error banners ---------- */ .status-banner{display:flex; align-items:flex-start; gap:10px; margin-top:18px; background:rgba(20,123,255,0.1); border:1px solid var(--blue-br); border-radius:13px; padding:12px 14px;} .status-banner .msr{color:var(--blue-br); font-size:17px; flex-shrink:0; margin-top:1px;} .status-banner .st1{font-size:12px; font-weight:800; color:var(--blue-br); line-height:1.5;} .status-banner .st1 a{color:var(--white); font-weight:700; text-decoration:underline;} .status-banner.error{background:rgba(255,77,94,0.1); border-color:var(--red);} .status-banner.error .msr, .status-banner.error .st1{color:var(--red);} .status-banner.error .st1{font-weight:700;} /* ---------- Cards ---------- */ .card{background:linear-gradient(155deg,var(--card),var(--bg2)); border:1px solid var(--line); border-radius:18px;} /* ---------- Toast stack ---------- */ .toast-stack{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:500; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;} .toast{background:rgba(10,23,42,0.96); border:1px solid var(--gold-line); color:var(--white); font-size:12.5px; font-weight:700; padding:11px 17px; border-radius:999px; display:flex; align-items:center; gap:8px; white-space:nowrap; box-shadow:0 10px 26px rgba(0,0,0,0.5); animation:rb-toast-in .25s ease;} .toast.error{border-color:rgba(255,77,94,0.4);} .toast .tdot{width:6px;height:6px;border-radius:50%; background:var(--gold); flex-shrink:0;} .toast.error .tdot{background:var(--red);} .toast.leaving{animation:rb-toast-out .25s ease forwards;} @keyframes rb-toast-in{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}} @keyframes rb-toast-out{to{opacity:0; transform:translateY(10px);}} /* ---------- Empty / error state ---------- */ .empty-state{padding:40px 24px; text-align:center;} .empty-state .msr{font-size:40px; color:var(--muted); opacity:0.5;} .empty-state .et{font-size:13px; font-weight:800; margin-top:10px;} .empty-state .es{font-size:11px; color:var(--muted); font-weight:600; margin-top:4px; line-height:1.5;} /* ============================================================ APP SHELL — header, bottom nav, wallet chip ------------------------------------------------------------ Shared by every logged-in page. Fixes applied project-wide (see RBe-UI-Redesign-Handoff.md issues #1-#3): 1. Blue stays primary — gold is now only used on the win-coins half of the wallet chip and on prize/achievement numbers, never as a card/button's dominant color. 2. Wallet chip shows Ads Coins and Win Coins as two distinct values, never merged into one number. 3. .circ-btn and .back-btn are 44x44px (was 32/34px). ============================================================ */ .section-head{display:flex; align-items:center; justify-content:space-between; padding:0 16px; margin-bottom:12px; gap:10px;} .section-title{font-size:16.5px; font-weight:800; display:flex; align-items:center; gap:7px;} .section-sub{font-size:11px; color:var(--muted); font-weight:600; margin-top:2px;} .view-all{font-size:11.5px; font-weight:800; color:var(--blue-br); white-space:nowrap; flex-shrink:0;} section.block{margin-top:24px;} .hscroll{display:flex; gap:12px; overflow-x:auto; padding:0 16px 4px; scroll-snap-type:x proximity;} .hscroll > *{scroll-snap-align:start;} .stat-label{font-size:9.5px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:0.4px;} .stat-val{font-size:12.5px; font-weight:800; margin-top:2px; display:flex; align-items:center; gap:4px;} .stat-val.gold{color:var(--gold);} /* ---------- Header ---------- */ header.app-header{ position:sticky; top:0; z-index:50; min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:8px; /* Safe-area top: env(safe-area-inset-top) resolves to the real notch/status-bar/camera-cutout height whenever the page is rendered edge-to-edge (meta viewport-fit=cover, already set on every page's ) inside a WebView configured for edge-to-edge display. The 14px base is a comfortable minimum even where the inset itself is 0 (no cutout, or a WebView that isn't drawing edge-to-edge yet), so the header never looks flush against the very top edge on any device. */ padding:calc(14px + var(--safe-top)) max(12px,var(--safe-right)) 10px max(12px,var(--safe-left)); background:rgba(4,10,20,0.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line); } .hdr-left{display:flex; align-items:center; gap:9px; min-width:0;} .logo-ring{width:38px;height:38px;border-radius:50%; background:conic-gradient(from 180deg, var(--blue), var(--blue-br), var(--blue)); padding:2px; flex-shrink:0;} .logo-ring-inner{width:100%; height:100%; border-radius:50%; background:radial-gradient(circle at 35% 30%, #0d2b57, #030914 75%); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;} .logo-ring-inner svg,.logo-ring-inner img{width:100%; height:100%; object-fit:cover; border-radius:50%;} .logo-text{line-height:1.05; min-width:0;} .logo-text .l1{font-size:13px; font-weight:900; letter-spacing:0.3px; white-space:nowrap;} .logo-text .l2{font-size:8.5px; font-weight:800; letter-spacing:2px; color:var(--blue-br); white-space:nowrap;} .hdr-title{font-size:15px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1;} .hdr-right{display:flex; align-items:center; gap:6px; flex-shrink:0;} .back-btn,.circ-btn{ width:44px;height:44px;border-radius:50%; background:rgba(20,123,255,0.14); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--white); flex-shrink:0; position:relative; } .circ-btn .dot{position:absolute; top:9px; right:9px; width:7px;height:7px;border-radius:50%; background:var(--red); box-shadow:0 0 6px var(--red);} /* ---------- Notice ticker ---------- */ .ticker{margin:10px 16px 0; background:var(--card); border:1px solid var(--line); border-radius:12px; display:flex; align-items:center; gap:9px; padding:9px 12px; overflow:hidden;} .ticker .flag{font-size:14px; flex-shrink:0; color:var(--blue-br);} .ticker-track{white-space:nowrap; overflow:hidden; flex:1;} .ticker-track span{display:inline-block; font-size:11.5px; font-weight:600; color:var(--muted); animation:tick 16s linear infinite; padding-left:100%;} @keyframes tick{ from{transform:translateX(0);} to{transform:translateX(-100%);} } @media (prefers-reduced-motion:reduce){ .ticker-track span{animation:none; padding-left:0;} } /* ---------- Bottom navigation ---------- Floating pill, matches every mockup 1:1. Fix applied: the home button's border/glow is now blue-dominant (was solid gold border + gold-tinted glow pulse — issue #1). Touch targets on .nav-item and .home-btn are >=44px (issue #3). */ .bottom-nav{ position:fixed; left:max(12px,var(--safe-left)); right:max(12px,var(--safe-right)); bottom:calc(10px + var(--safe-bottom)); height:66px; z-index:100; background:rgba(9,18,34,0.92); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--line); border-radius:24px; box-shadow:0 -2px 0 0 rgba(20,123,255,0.08) inset, 0 14px 34px rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:space-between; padding:0 6px; } .nav-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; flex:1; min-height:48px; color:var(--muted); font-size:9px; font-weight:700; padding:6px 2px; border:none; background:transparent; } .nav-item .ni{font-size:19px;} .nav-item.active{color:var(--blue-br);} .nav-item.home-spacer{flex:1.15;} .home-btn-wrap{position:absolute; left:50%; top:-24px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; z-index:101;} .home-btn{ width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--card2); border:3px solid var(--line); box-shadow:0 8px 18px rgba(0,0,0,0.5); color:var(--muted); } .home-btn.active{ background:radial-gradient(circle at 35% 30%, #1c8bff, #0a49a6 70%); border-color:var(--blue-br); box-shadow:0 0 0 6px rgba(20,123,255,0.14), 0 0 22px rgba(20,123,255,0.55), 0 8px 18px rgba(0,0,0,0.5); animation:homeGlow 2.4s infinite ease-in-out; color:#04101f; } @keyframes homeGlow{ 0%,100%{box-shadow:0 0 0 6px rgba(20,123,255,0.14), 0 0 22px rgba(20,123,255,0.55), 0 8px 18px rgba(0,0,0,0.5);} 50%{box-shadow:0 0 0 9px rgba(20,123,255,0.2), 0 0 30px rgba(53,168,255,0.5), 0 8px 18px rgba(0,0,0,0.5);} } @media (prefers-reduced-motion:reduce){ .home-btn{animation:none;} } .home-btn svg{width:24px; height:24px;} .home-label{font-size:8.5px; font-weight:800; color:var(--muted); margin-top:3px; letter-spacing:0.5px;} .home-label.active{color:var(--blue-br);} body{padding-bottom:calc(100px + var(--safe-bottom));} /* Pages with no bottom-nav (FAQ, Privacy, About, Terms, Contact Support) don't need the ~100px reserved for the floating nav bar — without this override they'd just have a large empty gap at the bottom. */ body.no-bottom-nav{padding-bottom:calc(20px + var(--safe-bottom));} @media (min-width:768px){ .bottom-nav{left:50%; transform:translateX(-50%); width:calc(600px - 24px); max-width:576px;} } /* ---------- Skeleton / shimmer loading ---------- */ /* ============ PORTRAIT MODE / CATEGORY CARDS ============ Shared by index.php's Popular Modes and game_modes.php's category grid — same visual language (character portrait, live-status dot, name label) whether the card links to a tournament mode or a category. Moved here from index.css once a second page needed it. */ /* ============ PORTRAIT MODE CARDS ============ */ .modes-grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:0 16px;} .portrait{position:relative; border-radius:12px; overflow:hidden; background:#000; aspect-ratio:1/1.15; border:1px solid var(--line); display:block;} .p-banner{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .p-fallback{position:absolute; inset:0; z-index:2;} .p-emblem{position:absolute; inset:0; background:conic-gradient(from 0deg, var(--pc1,#0A3D63), transparent 25%, var(--pc2,#147BFF), transparent 60%, var(--pc1,#0A3D63)); opacity:0.35;} .p-emblem::after{content:''; position:absolute; inset:8%; border-radius:50%; background:radial-gradient(circle, transparent 55%, rgba(0,0,0,0.5) 100%);} .p-figure{position:absolute; left:50%; bottom:-6%; transform:translateX(-50%); width:78%; height:82%;} .p-head{position:absolute; left:50%; top:8%; transform:translateX(-50%); width:46%; aspect-ratio:1/1; border-radius:48% 48% 46% 46%; background:linear-gradient(160deg, var(--pc2,#35A8FF), var(--pc1,#0A172A) 75%); box-shadow:0 0 24px var(--pc2,#147BFF) inset, 0 4px 14px rgba(0,0,0,0.6);} .p-eyes{position:absolute; left:50%; top:38%; transform:translateX(-50%); display:flex; gap:14%;} .p-eyes i{width:9%; aspect-ratio:1/1; border-radius:50%; background:var(--blue-br); box-shadow:0 0 8px var(--blue-br);} .p-body{position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:88%; height:52%; border-radius:38% 38% 14% 14%; background:linear-gradient(180deg, var(--pc1,#0A172A) 0%, #030914 100%); box-shadow:0 0 20px var(--pc2,#147BFF) inset;} .p-body::before{content:''; position:absolute; left:50%; top:12%; transform:translateX(-50%); width:36%; height:38%; background:linear-gradient(180deg, var(--pc2,#35A8FF), transparent); border-radius:50%; opacity:0.5; filter:blur(2px);} .p-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,9,20,0) 45%, rgba(3,9,20,0.94) 100%); z-index:2;} .p-status{position:absolute; top:6px; right:6px; z-index:3; display:flex; align-items:center; gap:4px; background:rgba(3,9,20,0.65); border-radius:999px; padding:2.5px 6px 2.5px 2.5px;} .p-status .pd{width:7px;height:7px;border-radius:50%;} .p-status.on .pd{background:var(--green); box-shadow:0 0 6px var(--green);} .p-status.off .pd{background:var(--red); box-shadow:0 0 6px var(--red);} .p-status span{font-size:9.5px; font-weight:800; color:var(--white);} .p-label{position:absolute; left:0; right:0; bottom:7px; z-index:3; padding:0 7px;} .p-name{font-size:10.5px; font-weight:900; letter-spacing:0.2px; line-height:1.15;} /* color themes per mode — kept blue/green/red/purple/teal spread, gold reserved for t8 (a rare "premium" mode tag) */ .t1{--pc1:#B91B1B; --pc2:#FF5C5C;} .t2{--pc1:#0A3D63; --pc2:#35A8FF;} .t3{--pc1:#0A4A3A; --pc2:#37E28C;} .t4{--pc1:#5C2E0A; --pc2:#FF9A3C;} .t5{--pc1:#3A1050; --pc2:#B060FF;} .t6{--pc1:#5C0A2E; --pc2:#FF3C7E;} .t7{--pc1:#0A172A; --pc2:#8292AA;} .t8{--pc1:#7A5200; --pc2:#FFC400;} .t9{--pc1:#5C3A0A; --pc2:#FFB020;} .t10{--pc1:#08303A; --pc2:#20D8E0;} .t11{--pc1:#3A2A0A; --pc2:#D4AF37;} .t12{--pc1:#3A0A0A; --pc2:#FF6B35;} /* ============ UNDERLINE STATUS TABS ============ Shared by tournaments.php and my_tournaments.php — equal-width flex tabs with a centered sliding underline, distinct from the pill-style shared .tabs/.tab-btn used elsewhere (e.g. leaderboard.php). */ .status-tabs{display:flex; border-bottom:1px solid var(--line);} .status-tab{flex:1; text-align:center; padding:12px 4px; font-size:12.5px; font-weight:800; color:var(--muted); background:none; border:none; position:relative; min-height:44px; transition:color .2s ease; text-transform:uppercase; letter-spacing:0.4px;} .status-tab.active{color:var(--white);} .status-tab::after{content:''; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%) scaleX(0); width:36px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--blue-br),var(--blue)); transition:transform .25s cubic-bezier(.4,0,.2,1);} .status-tab.active::after{transform:translateX(-50%) scaleX(1);} @media (prefers-reduced-motion:reduce){ .status-tab,.status-tab::after{transition:none;} } .skel{position:relative; overflow:hidden; background:var(--card2); border-radius:10px;} .skel::after{content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent); animation:skel-shimmer 1.5s infinite;} @keyframes skel-shimmer{100%{transform:translateX(100%);}} /* Shared pulse for any "live" indicator dot — used by index.css's hero live-chip and tournaments.css's status-badge.live, so it lives here once instead of being redefined per page. Each page still handles its own prefers-reduced-motion opt-out since each defines its own dot selector. */ @keyframes heroPulse{0%,100%{opacity:1;} 50%{opacity:0.35;}} @media (prefers-reduced-motion:reduce){ .skel::after{animation:none;} } /* ---------- Image shimmer (real , not a placeholder block) ---------- Wrap any image-loading element with class="img-shimmer" + data-shimmer: theme.js's initImageShimmer() fades the in and stops the sweep the moment it finishes loading (or immediately if already cached) — see master rule #12/#13: never a blank flash while an image fetches, never break the layout while it loads. Every future page reuses this same pair of classes instead of inventing a new loading treatment. */ .img-shimmer{position:relative; overflow:hidden; background:var(--card2);} .img-shimmer::after{content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,0.07),transparent); animation:skel-shimmer 1.5s infinite; z-index:1; pointer-events:none;} .img-shimmer.loaded::after{content:none; animation:none;} .img-shimmer > img{opacity:0; transition:opacity .35s ease;} .img-shimmer > img.loaded{opacity:1;} @media (prefers-reduced-motion:reduce){ .img-shimmer::after{animation:none;} } /* ---------- Tabs / filter chips ---------- */ .tabs{display:flex; gap:8px; padding:0 16px; overflow-x:auto;} .tab-btn{flex-shrink:0; min-height:44px; padding:9px 16px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,0.02); color:var(--muted); font-size:12px; font-weight:800; display:flex; align-items:center;} .tab-btn.active{background:linear-gradient(180deg,var(--blue-br),var(--blue)); color:#04101f; border-color:transparent;} .chip-row{display:flex; gap:8px; padding:0 16px; overflow-x:auto;} .filter-chip{flex-shrink:0; min-height:44px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--muted); font-size:11.5px; font-weight:700; display:flex; align-items:center; gap:5px;} .filter-chip.active{border-color:var(--blue-br); color:var(--blue-br); background:rgba(20,123,255,0.12);} /* ---------- Progress bar ---------- */ .progress{height:7px; border-radius:999px; background:rgba(255,255,255,0.06); overflow:hidden;} .progress > i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--blue),var(--blue-br)); transition:width .4s ease;} .progress.gold > i{background:linear-gradient(90deg,var(--gold-dk),var(--gold));} /* ---------- Badges / pills ---------- */ .badge{display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800; padding:3px 8px; border-radius:999px;} .badge-blue{background:rgba(20,123,255,0.14); color:var(--blue-br); border:1px solid var(--line);} .badge-gold{background:rgba(255,196,0,0.12); color:var(--gold); border:1px solid var(--gold-line);} .badge-green{background:rgba(55,226,140,0.12); color:var(--green); border:1px solid rgba(55,226,140,0.3);} .badge-red{background:rgba(255,77,94,0.12); color:var(--red); border:1px solid rgba(255,77,94,0.3);} /* ---------- Modal ---------- */ .modal-overlay{position:fixed; inset:0; z-index:200; background:rgba(2,6,14,0.7); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .2s;} .modal-overlay.open{opacity:1; pointer-events:auto;} .modal-box{width:100%; max-width:380px; background:linear-gradient(160deg,var(--card),var(--bg2)); border:1px solid var(--line); border-radius:20px; padding:22px; max-height:85vh; overflow-y:auto; transform:scale(0.94); transition:transform .2s;} .modal-overlay.open .modal-box{transform:scale(1);} .modal-title{font-size:16px; font-weight:900;} .modal-close{position:absolute; top:14px; right:14px;} /* ---------- Bottom sheet ---------- */ .sheet-overlay{position:fixed; inset:0; z-index:200; background:rgba(2,6,14,0.7); opacity:0; pointer-events:none; transition:opacity .2s;} .sheet-overlay.open{opacity:1; pointer-events:auto;} .sheet{position:fixed; left:0; right:0; bottom:0; z-index:201; background:linear-gradient(160deg,var(--card),var(--bg2)); border:1px solid var(--line); border-bottom:none; border-radius:22px 22px 0 0; padding:14px 20px calc(20px + var(--safe-bottom)); transform:translateY(100%); transition:transform .25s ease; max-height:88vh; overflow-y:auto;} .sheet.open{transform:translateY(0);} .sheet-handle{width:36px; height:4px; border-radius:99px; background:var(--line); margin:0 auto 14px;} /* ============ SCHEDULE / TIMELINE ============ Shared by tournament_details.php and match_details.php. The 3rd state (.current — in progress right now, distinct from finished .done or plain upcoming) is only used by match_details.php's schedule, which needs it; tournament_details.php's simpler done/todo schedule just never applies the class. */ .sched-item{position:relative; display:flex; align-items:flex-start; gap:12px; padding-bottom:20px;} .sched-item:last-child{padding-bottom:0;} .sched-item:last-child .sched-line{display:none;} .sched-line{position:absolute; left:13px; top:28px; bottom:0; width:2px; background:var(--line);} .sched-line.done{background:var(--blue-br);} .sched-dot{width:28px; height:28px; border-radius:50%; background:var(--bg2); border:1px solid var(--line); color:var(--muted); display:flex; align-items:center; justify-content:center; flex-shrink:0; z-index:1; font-size:11px; font-weight:800;} .sched-dot .msr{font-size:14px;} .sched-dot.done{background:rgba(55,226,140,0.14); border-color:rgba(55,226,140,0.35); color:var(--green);} .sched-dot.current{background:rgba(20,123,255,0.16); border-color:var(--blue-br); color:var(--blue-br); box-shadow:0 0 0 4px rgba(20,123,255,0.12);} .sched-time{font-size:9.5px; color:var(--blue-br); font-weight:800; text-transform:uppercase; letter-spacing:0.3px;} .sched-name{font-size:12.5px; font-weight:700; margin-top:3px;} /* ============ STATUS BADGE ============ Shared by tournaments.php, tournament_details.php and match_details.php — the small live/upcoming/completed/full pill used on banners, heroes and card headers. */ .status-badge{display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800; letter-spacing:0.3px; padding:5px 10px; border-radius:999px; background:rgba(5,12,24,0.7); border:1px solid var(--line); color:var(--white);} .status-badge.live{color:#ff5c5c; border-color:rgba(255,80,80,0.4); background:rgba(255,60,60,0.14);} .status-badge.live i{width:6px;height:6px;border-radius:50%; background:#ff3c3c; box-shadow:0 0 6px #ff3c3c; animation:heroPulse 1.4s infinite; display:inline-block;} @media (prefers-reduced-motion:reduce){ .status-badge.live i{animation:none;} } .status-badge.upcoming{color:var(--blue-br); border-color:var(--line); background:rgba(20,123,255,0.14);} .status-badge.full{color:var(--gold); border-color:var(--gold-line); background:rgba(255,196,0,0.12);} .status-badge.completed{color:var(--muted);} /* ============ SEARCH BAR ============ Shared by tournament_details.php's player search and wallet.php's transaction search. .clear-btn is optional — only wallet.php uses it, hidden until there's a query (.has-value on the wrapper). */ .search-bar{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:12px; padding:11px 14px; margin-bottom:12px;} .search-bar .msr{font-size:17px; color:var(--muted); flex-shrink:0;} .search-bar input{flex:1; min-width:0; background:none; border:none; color:var(--white); font-size:13px; outline:none;} .search-bar input::placeholder{color:var(--muted);} .search-bar .clear-btn{display:none; flex-shrink:0; width:28px; height:28px; align-items:center; justify-content:center; color:var(--muted); background:none; border:none;} .search-bar.has-value .clear-btn{display:flex;} /* ============ NOTICE ============ Shared warning/info banner — used by match_details.php's important- notice and room-notes cards, and wallet.php's frozen-wallet banner. .icon variant color is set inline per-call since severity differs (gold for info/room-notes, red for frozen). */ .notice-card{border-radius:14px; padding:14px; background:rgba(255,196,0,0.08); border:1px solid var(--gold-line); display:flex; gap:11px; align-items:flex-start;} .notice-icon{width:32px; height:32px; border-radius:9px; flex-shrink:0; background:rgba(255,196,0,0.14); color:var(--gold); display:flex; align-items:center; justify-content:center;} .notice-icon svg{width:16px; height:16px;} .notice-title{font-weight:800; font-size:11.5px; color:var(--gold); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:6px;} .notice-text,.notice-list{font-size:11.5px; color:var(--muted); font-weight:600; line-height:1.55;} .notice-list{display:flex; flex-direction:column; gap:5px;} .sheet-title{font-size:15px; font-weight:900; margin-bottom:14px;} .sheet-desc{font-size:11.5px; color:var(--muted); font-weight:600; margin-top:4px; margin-bottom:16px;} .sheet-actions{display:flex; gap:10px; margin-top:20px;} /* Equal width for every action, whether it's a plain