/*========================================================== SATTA KHEL MARKET PAGE BASE THEME ==========================================================*/ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; padding: 0; background: #f8fafc; color: #0f172a; font-family: Arial, Helvetica, sans-serif; line-height: 1.6; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } img { display: block; max-width: 100%; height: auto; } /*========================================================== CONTAINER ==========================================================*/ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } .container-fluid { width: 100%; max-width: 1400px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } /*========================================================== COMMON SECTION ==========================================================*/ section { width: 100%; } .section-header { width: 100%; margin-bottom: 35px; } .section-tag { display: inline-block; margin-bottom: 10px; color: #2563eb; font-size: 14px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; } .section-title { margin: 0 0 12px; color: #0f172a; font-size: 32px; line-height: 1.3; font-weight: 800; } .section-description { max-width: 760px; margin: 0; color: #64748b; font-size: 16px; line-height: 1.8; } .text-center { text-align: center; } /*========================================================== COMMON CARD ==========================================================*/ .market-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 10px 30px rgba(15, 23, 42, .05); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .market-card:hover { transform: translateY(-4px); border-color: rgba(37, 99, 235, .25); box-shadow: 0 18px 40px rgba(15, 23, 42, .09); } /*========================================================== COMMON BUTTON ==========================================================*/ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; } .btn-primary { background: #2563eb; color: #ffffff; } .btn-primary:hover { background: #1d4ed8; transform: translateY(-2px); } .btn-outline { background: #ffffff; color: #2563eb; border-color: #2563eb; } .btn-outline:hover { background: #2563eb; color: #ffffff; } /*========================================================== COMMON STATUS ==========================================================*/ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; } /*========================================================== COMMON FORM ELEMENTS ==========================================================*/ input, select, textarea { border: 1px solid #cbd5e1; background: #ffffff; color: #0f172a; border-radius: 10px; outline: none; } input:focus, select:focus, textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .10); } /*========================================================== COMMON TABLE ==========================================================*/ .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .chart-table { width: 100%; border-collapse: collapse; background: #ffffff; border: 1px solid #e2e8f0; } .chart-table th { background: #0f172a; color: #ffffff; font-weight: 700; } .chart-table th, .chart-table td { padding: 14px 16px; border-bottom: 1px solid #e2e8f0; text-align: center; } .chart-table td { color: #475569; } .chart-table tr:last-child td { border-bottom: 0; } /*========================================================== COMMON EMPTY STATE ==========================================================*/ .chart-empty { padding: 30px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 18px; color: #64748b; text-align: center; } /*========================================================== MOBILE BASE ==========================================================*/ @media (max-width: 768px) { .container, .container-fluid { padding-left: 15px; padding-right: 15px; } .section-title { font-size: 25px; } .section-description { font-size: 15px; } .section-header { margin-bottom: 25px; } } @media (max-width: 480px) { .section-title { font-size: 22px; } .section-description { font-size: 14px; } } /*========================================================== MARKET PAGE HERO ==========================================================*/ .game-page-hero { position: relative; padding: 70px 0; overflow: hidden; background: linear-gradient( 135deg, #08162b 0%, #0b1f3a 50%, #2563eb 100% ); } /*========================================================== HERO BACKGROUND EFFECT ==========================================================*/ .game-page-hero::before { content: ""; position: absolute; width: 420px; height: 420px; top: -180px; right: -100px; border-radius: 50%; background: rgba(96, 165, 250, .14); filter: blur(5px); pointer-events: none; } .game-page-hero::after { content: ""; position: absolute; width: 300px; height: 300px; bottom: -180px; left: -100px; border-radius: 50%; background: rgba(37, 99, 235, .15); pointer-events: none; } /*========================================================== HERO CONTENT ==========================================================*/ .game-hero-content { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; text-align: center; } /*========================================================== HERO TAG ==========================================================*/ .game-hero-tag { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; padding: 8px 17px; border: 1px solid rgba(255, 255, 255, .20); border-radius: 999px; background: rgba(255, 255, 255, .10); color: #ffffff; font-size: 14px; font-weight: 700; line-height: 1.4; } /*========================================================== HERO TITLE ==========================================================*/ .game-hero-title { max-width: 900px; margin: 0 auto 18px; color: #ffffff; font-size: 48px; line-height: 1.18; font-weight: 800; letter-spacing: -.5px; } /*========================================================== HERO DESCRIPTION ==========================================================*/ .game-hero-description { max-width: 720px; margin: 0 auto; color: rgba(255, 255, 255, .80); font-size: 17px; line-height: 1.8; } /*========================================================== HERO RESULT BOX ==========================================================*/ .game-hero-result { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 220px; margin-top: 30px; padding: 24px 38px; background: #ffffff; border: 1px solid rgba(255, 255, 255, .60); border-radius: 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, .22); } /*========================================================== RESULT LABEL ==========================================================*/ .game-hero-result-label { display: block; margin-bottom: 9px; color: #64748b; font-size: 13px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; } /*========================================================== RESULT NUMBER ==========================================================*/ .game-hero-result-number { display: block; color: #2563eb; font-size: 62px; line-height: 1; font-weight: 800; } /*========================================================== HERO MOBILE ==========================================================*/ @media (max-width: 768px) { .game-page-hero { padding: 50px 0; } .game-hero-content { max-width: 100%; } .game-hero-tag { margin-bottom: 15px; padding: 7px 14px; font-size: 13px; } .game-hero-title { font-size: 34px; line-height: 1.25; } .game-hero-description { font-size: 15px; line-height: 1.75; } .game-hero-result { min-width: 190px; margin-top: 25px; padding: 21px 30px; border-radius: 18px; } .game-hero-result-number { font-size: 52px; } } /*========================================================== HERO SMALL MOBILE ==========================================================*/ @media (max-width: 480px) { .game-page-hero { padding: 42px 0; } .game-hero-title { font-size: 29px; } .game-hero-description { font-size: 14px; } .game-hero-result { min-width: 175px; } .game-hero-result-number { font-size: 46px; } } /*========================================================== MARKET PAGE LIVE RESULTS ==========================================================*/ .game-result-section { padding: 60px 0; background: #f8fafc; } /*========================================================== RESULT GRID ==========================================================*/ .result-market-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 30px; } /*========================================================== RESULT CARD ==========================================================*/ .result-market-card { display: flex; flex-direction: column; min-width: 0; padding: 25px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; color: #0f172a; text-decoration: none; box-shadow: 0 10px 30px rgba(15, 23, 42, .05); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .result-market-card:hover { transform: translateY(-5px); border-color: rgba(37, 99, 235, .30); box-shadow: 0 18px 40px rgba(15, 23, 42, .10); } /*========================================================== CHART NAVIGATION ==========================================================*/ .game-chart-navigation { padding: 60px 0; background: #ffffff; } /*========================================================== CHART NAVIGATION GRID ==========================================================*/ .chart-navigation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 30px; } /*========================================================== CHART NAVIGATION CARD ==========================================================*/ .chart-navigation-card { display: flex; flex-direction: column; min-width: 0; padding: 28px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; color: #0f172a; text-decoration: none; box-shadow: 0 10px 30px rgba(15, 23, 42, .05); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .chart-navigation-card:hover { transform: translateY(-5px); border-color: rgba(37, 99, 235, .30); box-shadow: 0 18px 40px rgba(15, 23, 42, .10); } /*========================================================== CHART ICON ==========================================================*/ .chart-navigation-icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 20px; border-radius: 16px; background: #eff6ff; color: #2563eb; font-size: 24px; transition: background .3s ease, color .3s ease, transform .3s ease; } .chart-navigation-card:hover .chart-navigation-icon { background: #2563eb; color: #ffffff; transform: translateY(-2px); } /*========================================================== CHART CONTENT ==========================================================*/ .chart-navigation-content { display: flex; flex-direction: column; flex: 1; } .chart-navigation-content h3 { margin: 0 0 10px; color: #0f172a; font-size: 20px; line-height: 1.4; font-weight: 700; } .chart-navigation-content p { margin: 0 0 22px; color: #64748b; font-size: 15px; line-height: 1.75; } /*========================================================== CHART LINK ==========================================================*/ .chart-navigation-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: #2563eb; font-size: 14px; line-height: 1.5; font-weight: 700; } .chart-navigation-link i { font-size: 12px; transition: transform .3s ease; } .chart-navigation-card:hover .chart-navigation-link i { transform: translateX(4px); } /*========================================================== OTHER MARKETS ==========================================================*/ /* The second .chart-navigation-grid in the component automatically uses the same card design. */ .game-chart-navigation .chart-navigation-grid + .section-header { margin-top: 70px; } /*========================================================== TABLET ==========================================================*/ @media (max-width: 1100px) { .chart-navigation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /*========================================================== MOBILE ==========================================================*/ @media (max-width: 768px) { .game-chart-navigation { padding: 45px 0; } .chart-navigation-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 25px; } .chart-navigation-card { padding: 22px; border-radius: 18px; } .chart-navigation-icon { width: 52px; height: 52px; margin-bottom: 17px; font-size: 21px; } .chart-navigation-content h3 { font-size: 19px; } .chart-navigation-content p { font-size: 14px; line-height: 1.7; } .game-chart-navigation .chart-navigation-grid + .section-header { margin-top: 45px; } } /*========================================================== CARD TOP ==========================================================*/ .result-market-card-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 30px; } /*========================================================== MARKET NAME ==========================================================*/ .result-market-name { color: #0f172a; font-size: 20px; line-height: 1.4; font-weight: 700; } /*========================================================== RESULT STATUS ==========================================================*/ .result-market-status { margin-top: 14px; margin-bottom: 18px; } .market-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 12px; line-height: 1.3; font-weight: 700; } .market-status.declared { background: #ecfdf5; color: #16a34a; } .market-status.awaiting { background: #fff7ed; color: #ea580c; } /*========================================================== STATUS DOT ==========================================================*/ .market-status .status-dot { width: 7px; height: 7px; margin: 0; border-radius: 50%; background: currentColor; flex-shrink: 0; } /*========================================================== TODAY + YESTERDAY RESULTS ==========================================================*/ .result-market-results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; } .result-day-box { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 125px; padding: 18px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; } .result-day-box.today { background: #eff6ff; border-color: #bfdbfe; } .result-day-label { margin-bottom: 12px; color: #64748b; font-size: 12px; font-weight: 700; text-transform: uppercase; } .result-day-box.today .result-day-label { color: #2563eb; } .result-day-number { color: #2563eb; font-size: 42px; line-height: 1; font-weight: 800; } .result-day-box:not(.today) .result-day-number { color: #475569; } .result-pending { color: #94a3b8; } @media (max-width: 480px) { .result-market-results { gap: 8px; } .result-day-box { min-height: 100px; padding: 15px 8px; } .result-day-number { font-size: 34px; } } /*========================================================== PENDING RESULT ==========================================================*/ .result-pending { color: #94a3b8; } /*========================================================== RESULT BOTTOM ==========================================================*/ .result-market-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 16px; border-top: 1px solid #e2e8f0; } /*========================================================== RESULT LABEL ==========================================================*/ .result-market-label { color: #64748b; font-size: 13px; line-height: 1.4; } /*========================================================== RESULT TIME ==========================================================*/ .result-market-time { color: #0f172a; font-size: 13px; line-height: 1.4; font-weight: 700; text-align: right; } /*========================================================== VIEW MARKET LINK ==========================================================*/ .result-market-view { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding-top: 17px; border-top: 1px solid #e2e8f0; color: #2563eb; font-size: 14px; line-height: 1.5; font-weight: 700; } .result-market-card:hover .result-market-view { color: #1d4ed8; } .result-market-view i { font-size: 12px; transition: transform .3s ease; } .result-market-card:hover .result-market-view i { transform: translateX(4px); } .game-other-markets .section-description { display: block; width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; } /*========================================================== TABLET ==========================================================*/ @media (max-width: 1100px) { .result-market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /*========================================================== MOBILE ==========================================================*/ @media (max-width: 768px) { .game-result-section { padding: 45px 0; } .result-market-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 25px; } .result-market-card { padding: 20px; border-radius: 18px; } .result-market-name { font-size: 18px; } .result-market-number { min-height: 110px; font-size: 50px; border-radius: 16px; } } /*========================================================== SMALL MOBILE ==========================================================*/ @media (max-width: 480px) { .result-market-card { padding: 18px; } .result-market-number { min-height: 100px; font-size: 45px; } .result-market-bottom { gap: 10px; } .result-market-label, .result-market-time { font-size: 12px; } } .game-result-section .section-description { margin-left: auto; margin-right: auto; text-align: center; } .game-chart-navigation .section-header { text-align: center; } .game-chart-navigation .section-description { display: block; width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; } /*================================================== GAME PAGE COMBINED MONTHLY CHART ==================================================*/ .monthly-chart-section { width: 100%; padding: 50px 0 65px; background: #f8fafc; } /*================================================== CONTAINER ==================================================*/ .monthly-chart-section > .container { width: 100%; max-width: 1400px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } /*================================================== SECTION HEADER ==================================================*/ .monthly-chart-section .section-header { width: 100%; margin: 0 auto 30px; text-align: center; } .monthly-chart-section .section-tag { display: block; margin-bottom: 10px; color: #2563eb; font-size: 14px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; } .monthly-chart-section .section-title { margin: 0 auto 12px; color: #0f172a; font-size: 32px; line-height: 1.25; font-weight: 800; text-align: center; } .monthly-chart-section .section-description { width: 100%; max-width: 850px; margin: 0 auto; color: #64748b; font-size: 16px; line-height: 1.7; text-align: center; } /*================================================== CHART TOOLBAR ==================================================*/ .monthly-chart-section .chart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; margin: 0 0 24px; padding: 16px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 8px 25px rgba(15,23,42,.05); } /*================================================== CHART NAVIGATION ==================================================*/ .monthly-chart-section .chart-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .monthly-chart-section .chart-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 17px; border: 1px solid #dbe3ee; border-radius: 10px; background: #eff6ff; color: #2563eb; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; transition: .25s ease; } .monthly-chart-section .chart-btn:hover { background: #2563eb; border-color: #2563eb; color: #ffffff; transform: translateY(-1px); } .monthly-chart-section .chart-btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; } .monthly-chart-section .chart-current { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 10px; background: #eff6ff; color: #1d4ed8; font-size: 16px; font-weight: 800; line-height: 1; } /*================================================== CHART FILTER ==================================================*/ .monthly-chart-section .chart-filter { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0; } .monthly-chart-section .chart-filter select { height: 44px; min-width: 125px; padding: 0 34px 0 13px; border: 1px solid #cbd5e1; border-radius: 10px; background: #ffffff; color: #334155; font-family: inherit; font-size: 14px; font-weight: 600; outline: none; cursor: pointer; transition: .25s ease; } .monthly-chart-section .chart-filter select:hover { border-color: #93c5fd; } .monthly-chart-section .chart-filter select:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.10); } .monthly-chart-section .chart-filter .btn { height: 44px; padding: 0 19px; border: 1px solid #2563eb; border-radius: 10px; background: #2563eb; color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: .25s ease; } .monthly-chart-section .chart-filter .btn:hover { background: #1d4ed8; border-color: #1d4ed8; transform: translateY(-1px); } /*================================================== COMBINED CHART WRAPPER ==================================================*/ .monthly-chart-section .combined-chart-wrapper { width: 100%; background: #ffffff; border: 1px solid #dbe3ee; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 35px rgba(15,23,42,.07); } /*================================================== MONTHLY TABLE ==================================================*/ .monthly-chart-section .monthly-chart { width: 100%; min-width: 0; margin: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; } /*================================================== COLUMN WIDTH ==================================================*/ .monthly-chart-section .monthly-chart th:first-child, .monthly-chart-section .monthly-chart td:first-child { width: 70px; } .monthly-chart-section .monthly-chart th:not(:first-child), .monthly-chart-section .monthly-chart td:not(:first-child) { width: calc((100% - 70px) / 6); } /*================================================== TABLE HEADER ==================================================*/ .monthly-chart-section .monthly-chart thead th { padding: 16px 8px; background: #2563eb; color: #ffffff; border-right: 1px solid rgba(255,255,255,.16); border-bottom: 0; font-size: 15px; font-weight: 800; line-height: 1.25; text-align: center; vertical-align: middle; } .monthly-chart-section .monthly-chart thead th:first-child { border-top-left-radius: 18px; } .monthly-chart-section .monthly-chart thead th:last-child { border-right: 0; border-top-right-radius: 18px; } /*================================================== TABLE BODY ==================================================*/ .monthly-chart-section .monthly-chart tbody td { height: 56px; padding: 12px 8px; background: #ffffff; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; color: #334155; font-size: 17px; font-weight: 700; line-height: 1; text-align: center; vertical-align: middle; } .monthly-chart-section .monthly-chart tbody td:last-child { border-right: 0; } /*================================================== DATE COLUMN ==================================================*/ .monthly-chart-section .monthly-chart tbody td:first-child { color: #2563eb; font-size: 17px; font-weight: 800; } /*================================================== RESULT NUMBERS ==================================================*/ .monthly-chart-section .monthly-chart tbody td:not(:first-child) { font-weight: 600; color: #334155; } /*================================================== ALTERNATE ROW ==================================================*/ .monthly-chart-section .monthly-chart tbody tr:nth-child(even) td { background: #f8fafc; } /*================================================== HOVER ==================================================*/ .monthly-chart-section .monthly-chart tbody tr:hover td { background: #eff6ff; } /*================================================== TODAY ROW ==================================================*/ .monthly-chart-section .monthly-chart tbody tr.today-row td { background: #dbeafe !important; color: #334155; font-weight: 600; } .monthly-chart-section .monthly-chart tbody tr.today-row td:first-child { background: #2563eb !important; color: #ffffff; } /*================================================== MARKET NAME ==================================================*/ .monthly-chart-section .desktop-name { display: inline; } .monthly-chart-section .mobile-name { display: none; } /*================================================== MOBILE ==================================================*/ @media (max-width: 768px) { .monthly-chart-section { padding: 40px 0 50px; } .monthly-chart-section > .container { padding-left: 12px; padding-right: 12px; } /*---------------------------------------------- HEADER ----------------------------------------------*/ .monthly-chart-section .section-header { margin-bottom: 24px; } .monthly-chart-section .section-title { font-size: 25px; } .monthly-chart-section .section-description { font-size: 15px; line-height: 1.7; } /*---------------------------------------------- TOOLBAR ----------------------------------------------*/ .monthly-chart-section .chart-toolbar { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px; } /*---------------------------------------------- NAVIGATION ----------------------------------------------*/ .monthly-chart-section .chart-nav { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; } .monthly-chart-section .chart-btn, .monthly-chart-section .chart-current { width: 100%; min-width: 0; min-height: 42px; padding-left: 6px; padding-right: 6px; font-size: 12px; text-align: center; } /*---------------------------------------------- FILTER ----------------------------------------------*/ .monthly-chart-section .chart-filter { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .monthly-chart-section .chart-filter select { width: 100%; min-width: 0; } .monthly-chart-section .chart-filter .btn { grid-column: 1 / -1; width: 100%; } /*---------------------------------------------- TABLE ----------------------------------------------*/ .monthly-chart-section .combined-chart-wrapper { border-radius: 16px; overflow: hidden; } .monthly-chart-section .monthly-chart { width: 100%; min-width: 0; table-layout: fixed; } /* Date */ .monthly-chart-section .monthly-chart th:first-child, .monthly-chart-section .monthly-chart td:first-child { width: 48px; } /* Six markets */ .monthly-chart-section .monthly-chart th:not(:first-child), .monthly-chart-section .monthly-chart td:not(:first-child) { width: calc((100% - 48px) / 6); } /*---------------------------------------------- MOBILE HEADER ----------------------------------------------*/ .monthly-chart-section .monthly-chart thead th { height: 58px; padding: 9px 3px; font-size: 13px; line-height: 1.2; white-space: normal; word-break: normal; } /*---------------------------------------------- MOBILE ROWS ----------------------------------------------*/ .monthly-chart-section .monthly-chart tbody td { height: 56px; padding: 10px 2px; font-size: 16px; } .monthly-chart-section .monthly-chart tbody td:first-child { font-size: 16px; } .monthly-chart-section .monthly-chart tbody td:not(:first-child) { font-size: 17px; } /*---------------------------------------------- MOBILE MARKET NAMES ----------------------------------------------*/ .monthly-chart-section .desktop-name { display: none; } .monthly-chart-section .mobile-name { display: inline; } } /*================================================== SMALL MOBILE ==================================================*/ @media (max-width: 400px) { .monthly-chart-section { padding: 35px 0 45px; } .monthly-chart-section .section-title { font-size: 22px; } .monthly-chart-section .section-tag { font-size: 12px; } .monthly-chart-section .section-description { font-size: 14px; } /*---------------------------------------------- NAVIGATION ----------------------------------------------*/ .monthly-chart-section .chart-nav { grid-template-columns: 1fr; } .monthly-chart-section .chart-btn, .monthly-chart-section .chart-current { min-height: 40px; } /*---------------------------------------------- FILTER ----------------------------------------------*/ .monthly-chart-section .chart-filter { grid-template-columns: 1fr; } .monthly-chart-section .chart-filter .btn { grid-column: auto; } /*---------------------------------------------- TABLE ----------------------------------------------*/ .monthly-chart-section .monthly-chart th:first-child, .monthly-chart-section .monthly-chart td:first-child { width: 42px; } .monthly-chart-section .monthly-chart th:not(:first-child), .monthly-chart-section .monthly-chart td:not(:first-child) { width: calc((100% - 42px) / 6); } .monthly-chart-section .monthly-chart thead th { height: 56px; padding: 8px 2px; font-size: 12px; } .monthly-chart-section .monthly-chart tbody td { height: 54px; padding: 9px 1px; font-size: 15px; } .monthly-chart-section .monthly-chart tbody td:not(:first-child) { font-size: 16px; } } /*================================================== YEARLY CHART SECTION ==================================================*/ .game-yearly-chart{ padding:10px 0 50px; background:#f8fafc; } .game-yearly-chart .section-description { width: 100%; max-width: 850px; margin: 0 auto; color: #64748b; font-size: 16px; line-height: 1.7; text-align: center; } /*================================================== YEAR SELECTOR ==================================================*/ .yearly-chart-selector{ width:100%; margin:30px 0; padding:18px 25px; display:flex; align-items:center; justify-content:center; gap:14px; background:#ffffff; border:1px solid #e2e8f0; border-radius:18px; box-shadow:0 10px 30px rgba(15,23,42,.05); } .yearly-chart-selector-label{ font-size:16px; font-weight:700; color:#0f172a; } .yearly-chart-year-select{ min-width:120px; height:44px; padding:0 38px 0 15px; border:1px solid #cbd5e1; border-radius:10px; background:#ffffff; color:#0f172a; font-size:15px; font-weight:600; cursor:pointer; outline:none; transition:.25s ease; } .yearly-chart-year-select:hover{ border-color:#2563eb; } .yearly-chart-year-select:focus{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.10); } /*================================================== HALF YEAR SECTION ==================================================*/ .yearly-half-section{ margin-top:30px; } .yearly-half-title{ margin-bottom:12px; padding-left:4px; font-size:20px; font-weight:700; color:#0f172a; } .yearly-half-title span{ color:#2563eb; } /*================================================== TABLE WRAPPER ==================================================*/ .yearly-half-table-wrapper{ width:100%; overflow:hidden; border:1px solid #dbe3ee; border-radius:16px; background:#ffffff; box-shadow:0 12px 35px rgba(15,23,42,.07); } /*================================================== YEARLY COMBINED TABLE ==================================================*/ .yearly-combined-table{ width:100%; border-collapse:collapse; table-layout:fixed; background:#ffffff; } /*================================================== TABLE HEADER ==================================================*/ .yearly-combined-table thead{ background:#2563eb; } .yearly-combined-table th{ height:52px; padding:10px 8px; background:#2563eb; color:#ffffff; border-right:1px solid rgba(255,255,255,.15); text-align:center; font-size:15px; font-weight:700; } .yearly-combined-table th:last-child{ border-right:none; } /*================================================== DATE COLUMN ==================================================*/ .yearly-combined-table th.yearly-date-column{ width:90px; } /*================================================== TABLE BODY ==================================================*/ .yearly-combined-table td{ height:44px; padding:8px 6px; border-bottom:1px solid #e2e8f0; border-right:1px solid #e2e8f0; text-align:center; color:#334155; font-size:15px; font-weight:600; } .yearly-combined-table td:last-child{ border-right:none; } .yearly-combined-table tbody tr:last-child td{ border-bottom:none; } /*================================================== DATE ==================================================*/ .yearly-combined-table td.yearly-date{ color:#2563eb; font-weight:700; background:#f8fafc; } /*================================================== RESULT ==================================================*/ .yearly-combined-table td.yearly-result{ color:#334155; font-weight:700; } /*================================================== ALTERNATE ROW ==================================================*/ .yearly-combined-table tbody tr:nth-child(even){ background:#f8fafc; } .yearly-combined-table tbody tr:nth-child(even) .yearly-date{ background:#eff6ff; } /*================================================== HOVER ==================================================*/ .yearly-combined-table tbody tr:hover{ background:#eff6ff; } .yearly-combined-table tbody tr:hover .yearly-date{ background:#dbeafe; } /*================================================== HIDDEN ROWS ==================================================*/ .yearly-combined-table .yearly-hidden-row{ display:none; } .yearly-combined-table .yearly-hidden-row.show{ display:table-row; } /*================================================== VIEW MORE BUTTON ==================================================*/ .yearly-view-more{ width:100%; min-height:48px; margin-top:0; border:1px solid #dbe3ee; border-top:none; border-radius:0 0 16px 16px; background:#ffffff; color:#2563eb; display:flex; align-items:center; justify-content:center; gap:9px; font-size:15px; font-weight:700; cursor:pointer; transition:.25s ease; } .yearly-view-more:hover{ background:#eff6ff; color:#1d4ed8; } .yearly-view-more i{ font-size:12px; transition:transform .25s ease; } .yearly-view-more i.rotated{ transform:rotate(180deg); } /*================================================== NO RESULT / EMPTY STATE ==================================================*/ .yearly-combined-table td{ min-width:0; } /*================================================== TABLE SPACING ==================================================*/ .yearly-half-section + .yearly-half-section{ margin-top:40px; } /*================================================== TABLET ==================================================*/ @media(max-width:992px){ .yearly-chart-selector{ margin:25px 0; } .yearly-combined-table th{ font-size:14px; padding:9px 5px; } .yearly-combined-table td{ font-size:14px; height:42px; } .yearly-combined-table th.yearly-date-column{ width:70px; } } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .game-yearly-chart{ padding:10px 0 35px; } /*---------------------------------------------- Year Selector ----------------------------------------------*/ .yearly-chart-selector{ margin:20px 0 25px; padding:15px; gap:10px; border-radius:14px; } .yearly-chart-selector-label{ font-size:14px; } .yearly-chart-year-select{ height:42px; min-width:105px; font-size:14px; } /*---------------------------------------------- Half Title ----------------------------------------------*/ .yearly-half-section{ margin-top:25px; } .yearly-half-title{ margin-bottom:10px; font-size:17px; } /*---------------------------------------------- Table ----------------------------------------------*/ .yearly-half-table-wrapper{ border-radius:12px; } .yearly-combined-table{ width:100%; table-layout:fixed; } .yearly-combined-table th{ height:44px; padding:8px 2px; font-size:12px; white-space:nowrap; } .yearly-combined-table td{ height:38px; padding:6px 2px; font-size:12px; } .yearly-combined-table th.yearly-date-column{ width:48px; } .yearly-combined-table td.yearly-date{ width:48px; } /*---------------------------------------------- View More ----------------------------------------------*/ .yearly-view-more{ min-height:44px; font-size:14px; border-radius:0 0 12px 12px; } /*---------------------------------------------- Second Table ----------------------------------------------*/ .yearly-half-section + .yearly-half-section{ margin-top:30px; } } /*================================================== SMALL MOBILE ==================================================*/ @media(max-width:400px){ .yearly-chart-selector{ padding:12px; } .yearly-chart-selector-label{ font-size:13px; } .yearly-chart-year-select{ min-width:95px; height:40px; font-size:13px; } .yearly-half-title{ font-size:16px; } .yearly-combined-table th{ font-size:11px; height:42px; } .yearly-combined-table td{ font-size:11px; height:36px; } .yearly-combined-table th.yearly-date-column{ width:42px; } } /*================================================== CUSTOM CHART SECTION ==================================================*/ .game-custom-chart{ padding:10px 0 50px; background:#ffffff; } .game-custom-chart .section-description { width: 100%; max-width: 850px; margin: 0 auto; color: #64748b; font-size: 16px; line-height: 1.7; text-align: center; } /*================================================== CUSTOM CHART FORM ==================================================*/ .custom-chart-form{ width:100%; margin:30px auto; padding:25px; background:#ffffff; border:1px solid #e2e8f0; border-radius:18px; box-shadow:0 12px 35px rgba(15,23,42,.06); } /*================================================== FIELDS ==================================================*/ .custom-chart-fields{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; align-items:end; } .custom-chart-field{ display:flex; flex-direction:column; gap:8px; } .custom-chart-field label{ font-size:15px; font-weight:700; color:#0f172a; } /*================================================== DATE INPUT ==================================================*/ .custom-chart-field input[type="date"]{ width:100%; height:48px; padding:0 14px; border:1px solid #cbd5e1; border-radius:10px; background:#ffffff; color:#0f172a; font-size:15px; font-family:inherit; outline:none; transition:.25s ease; box-sizing:border-box; } .custom-chart-field input[type="date"]:hover{ border-color:#93c5fd; } .custom-chart-field input[type="date"]:focus{ border-color:#2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.10); } /*================================================== SUBMIT BUTTON ==================================================*/ .chart-submit-button{ width:100%; height:48px; padding:0 22px; border:none; border-radius:10px; background:#2563eb; color:#ffffff; font-size:15px; font-weight:700; font-family:inherit; cursor:pointer; transition:.25s ease; } .chart-submit-button:hover{ background:#1d4ed8; transform:translateY(-1px); box-shadow: 0 8px 20px rgba(37,99,235,.20); } .chart-submit-button:active{ transform:translateY(0); } /*================================================== RESULT TABLE ==================================================*/ .game-custom-chart .table-responsive{ width:100%; overflow-x:auto; border:1px solid #e2e8f0; border-radius:16px; background:#ffffff; box-shadow: 0 12px 35px rgba(15,23,42,.07); } .game-custom-chart .chart-table{ width:100%; border-collapse:collapse; table-layout:fixed; } /*================================================== TABLE HEADER ==================================================*/ .game-custom-chart .chart-table thead{ background:#2563eb; } .game-custom-chart .chart-table th{ padding:15px 12px; background:#2563eb; color:#ffffff; border-right: 1px solid rgba(255,255,255,.15); font-size:15px; font-weight:700; text-align:center; } .game-custom-chart .chart-table th:last-child{ border-right:none; } /*================================================== TABLE BODY ==================================================*/ .game-custom-chart .chart-table td{ padding:13px 10px; border-bottom:1px solid #e2e8f0; border-right:1px solid #e2e8f0; text-align:center; color:#334155; font-size:15px; font-weight:600; } .game-custom-chart .chart-table td:last-child{ border-right:none; } .game-custom-chart .chart-table tbody tr:last-child td{ border-bottom:none; } /*================================================== DATE COLUMN ==================================================*/ .game-custom-chart .chart-table td:first-child{ color:#2563eb; font-weight:700; } /*================================================== RESULT ==================================================*/ .game-custom-chart .chart-result{ color:#2563eb; font-weight:800; } /*================================================== ALTERNATE ROW ==================================================*/ .game-custom-chart .chart-table tbody tr:nth-child(even){ background:#f8fafc; } .game-custom-chart .chart-table tbody tr:hover{ background:#eff6ff; } /*================================================== EMPTY RESULT ==================================================*/ .game-custom-chart .chart-empty{ margin-top:25px; padding:30px; text-align:center; background:#ffffff; border:1px solid #e2e8f0; border-radius:16px; box-shadow: 0 10px 30px rgba(15,23,42,.05); } .game-custom-chart .chart-empty p{ margin:0; color:#64748b; font-size:16px; line-height:1.7; } /*================================================== TABLET ==================================================*/ @media(max-width:992px){ .custom-chart-fields{ grid-template-columns: repeat(2, 1fr); } .custom-chart-field:last-child{ grid-column: 1 / -1; } .chart-submit-button{ width:100%; } } /* ================================================== CUSTOM CHART - FINAL ================================================== */ .game-custom-chart { width: 100%; max-width: 100%; padding: 10px 0 50px; background: #ffffff; overflow: hidden; } .game-custom-chart .container-fluid { width: 100%; max-width: 1400px; margin: 0 auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } /* ================================================== FORM ================================================== */ .custom-chart-form { width: 100%; max-width: 100%; margin: 30px auto; padding: 25px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 18px; box-shadow: 0 12px 35px rgba(15,23,42,.06); box-sizing: border-box; } /* ================================================== FIELDS ================================================== */ .custom-chart-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%; box-sizing: border-box; } .custom-chart-field { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; } .custom-chart-field label { display: block; width: 100%; margin: 0; font-size: 15px; font-weight: 700; color: #0f172a; } /* ================================================== DATE INPUT ================================================== */ .custom-chart-field input[type="date"] { display: block; width: 100%; max-width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0 14px; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 10px; background: #ffffff; color: #0f172a; font-family: inherit; font-size: 15px; outline: none; appearance: none; -webkit-appearance: none; } .custom-chart-field input[type="date"]:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.10); } /* ================================================== BUTTON ================================================== */ .chart-submit-button { display: block; width: 100%; max-width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0 22px; box-sizing: border-box; border: none; border-radius: 10px; background: #2563eb; color: #ffffff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; } /* ================================================== TABLET ================================================== */ @media (max-width: 992px) { .custom-chart-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .custom-chart-field:last-child { grid-column: 1 / -1; } } /* ================================================== MOBILE ================================================== */ @media (max-width: 768px) { .game-custom-chart { width: 100%; max-width: 100%; overflow-x: hidden; } .game-custom-chart .container-fluid { width: 100%; max-width: 100%; padding-left: 15px; padding-right: 15px; box-sizing: border-box; } .custom-chart-form { width: 100%; max-width: 100%; margin: 25px 0; padding: 20px; box-sizing: border-box; } .custom-chart-fields { display: flex; flex-direction: column; width: 100%; max-width: 100%; gap: 18px; } .custom-chart-field { width: 100%; max-width: 100%; min-width: 0; flex: none; } .custom-chart-field input[type="date"] { display: block; width: 100%; max-width: 100%; min-width: 0; height: 56px; box-sizing: border-box; padding: 0 12px; font-size: 16px; appearance: none; -webkit-appearance: none; } .chart-submit-button { width: 100%; max-width: 100%; min-width: 0; height: 56px; box-sizing: border-box; } } /* ================================================== SMALL MOBILE ================================================== */ @media (max-width: 480px) { .game-custom-chart .container-fluid { padding-left: 12px; padding-right: 12px; } .custom-chart-form { padding: 18px; } .custom-chart-fields { gap: 16px; } .custom-chart-field input[type="date"] { width: 100%; max-width: 100%; min-width: 0; height: 54px; padding: 0 10px; font-size: 16px; appearance: none; -webkit-appearance: none; } .chart-submit-button { width: 100%; max-width: 100%; height: 54px; } } /*================================================== CUSTOM CHART PAGINATION ==================================================*/ .custom-chart-hidden-row{ display:none !important; } /*================================================== VIEW MORE ==================================================*/ .custom-chart-view-more{ width:100%; min-height:48px; margin-top:0; border:1px solid #dbe3ee; border-top:none; border-radius:0 0 16px 16px; background:#ffffff; color:#2563eb; display:flex; align-items:center; justify-content:center; gap:9px; font-size:15px; font-weight:700; cursor:pointer; transition:.25s ease; } .custom-chart-view-more:hover{ background:#eff6ff; color:#1d4ed8; } .custom-chart-view-more i{ font-size:12px; transition:.25s ease; } .custom-chart-view-more:hover i{ transform:translateY(3px); } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .custom-chart-view-more{ min-height:44px; font-size:14px; border-radius:0 0 12px 12px; } } /*================================================== COMPARE RESULTS SECTION ==================================================*/ .game-compare-section{ padding:10px 0 50px; background:#f8fafc; } /*================================================== SECTION HEADER ==================================================*/ .game-compare-section .section-header{ text-align:center; display:flex; flex-direction:column; align-items:center; } .game-compare-section .section-description{ width:100%; max-width:850px; margin-left:auto; margin-right:auto; text-align:center; } /*================================================== COMPARE FORM ==================================================*/ .compare-form{ width:100%; margin:30px auto 0; padding:25px; background:#ffffff; border:1px solid #e2e8f0; border-radius:18px; box-shadow: 0 12px 35px rgba(15,23,42,.06); } /*================================================== MARKET LIST ==================================================*/ .compare-market-list{ display:flex; flex-direction:column; gap:15px; } /*================================================== MARKET ROW ==================================================*/ .compare-market-row{ padding:20px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:14px; transition:.25s ease; } .compare-market-row:hover{ border-color:#bfdbfe; box-shadow: 0 6px 20px rgba(37,99,235,.06); } /*================================================== MARKET HEADER ==================================================*/ .compare-market-header{ display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:15px; } .compare-market-number{ display:inline-flex; align-items:center; min-height:32px; padding:5px 12px; border-radius:8px; background:#eff6ff; color:#2563eb; font-size:14px; font-weight:700; } /*================================================== REMOVE MARKET ==================================================*/ .compare-remove-market{ border:1px solid #fecaca; background:#fff1f2; color:#dc2626; padding:7px 13px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:.25s ease; } .compare-remove-market:hover{ background:#dc2626; color:#ffffff; border-color:#dc2626; } /*================================================== FIELDS ==================================================*/ .compare-fields{ display:grid; grid-template-columns: repeat(3, 1fr); gap:15px; } .compare-field{ display:flex; flex-direction:column; gap:7px; } .compare-field label{ font-size:14px; font-weight:700; color:#334155; } /*================================================== SELECTS ==================================================*/ .compare-field select{ width:100%; height:46px; padding:0 38px 0 13px; border:1px solid #cbd5e1; border-radius:10px; background:#ffffff; color:#0f172a; font-family:inherit; font-size:14px; font-weight:500; outline:none; cursor:pointer; transition:.25s ease; } .compare-field select:hover{ border-color:#93c5fd; } .compare-field select:focus{ border-color:#2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.10); } /*================================================== ACTIONS ==================================================*/ .compare-actions{ display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:20px; padding-top:20px; border-top:1px solid #e2e8f0; } /*================================================== ADD MARKET ==================================================*/ .compare-add-market{ min-height:46px; padding:0 18px; border:1px solid #bfdbfe; border-radius:10px; background:#eff6ff; color:#2563eb; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:.25s ease; } .compare-add-market:hover{ background:#2563eb; color:#ffffff; border-color:#2563eb; } /*================================================== SUBMIT ==================================================*/ .compare-submit-button{ min-height:46px; padding:0 24px; border:none; border-radius:10px; background:#2563eb; color:#ffffff; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:.25s ease; } .compare-submit-button:hover{ background:#1d4ed8; transform:translateY(-1px); box-shadow: 0 8px 20px rgba(37,99,235,.20); } .compare-submit-button:active{ transform:translateY(0); } /*================================================== AJAX RESULTS ==================================================*/ .compare-results{ width:100%; margin-top:25px; } .compare-results:empty{ display:none; } /*================================================== TABLET ==================================================*/ @media(max-width:992px){ .compare-fields{ grid-template-columns: repeat(2, 1fr); } } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .game-compare-section{ padding:10px 0 35px; } .compare-form{ margin-top:20px; padding:16px; border-radius:14px; } .compare-market-list{ gap:12px; } .compare-market-row{ padding:15px; border-radius:12px; } .compare-market-header{ margin-bottom:13px; } .compare-market-number{ font-size:13px; } .compare-fields{ grid-template-columns:1fr; gap:12px; } .compare-field select{ height:44px; font-size:14px; } .compare-actions{ flex-direction:column; align-items:stretch; } .compare-add-market, .compare-submit-button{ width:100%; } } /*================================================== SMALL MOBILE ==================================================*/ @media(max-width:400px){ .compare-form{ padding:13px; } .compare-market-row{ padding:13px; } .compare-market-number{ font-size:12px; } .compare-remove-market{ padding:6px 10px; font-size:12px; } } /*================================================== COMPARE RESULTS SECTION ==================================================*/ .compare-results-section{ width:100%; margin-top:30px; padding:30px 0 10px; } /*================================================== RESULT HEADER ==================================================*/ .compare-results-header{ width:100%; text-align:center; display:flex; flex-direction:column; align-items:center; margin-bottom:25px; } .compare-results-tag{ display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:5px 12px; border-radius:8px; background:#eff6ff; color:#2563eb; font-size:13px; font-weight:700; } .compare-results-title{ margin:10px 0 8px; color:#0f172a; font-size:28px; line-height:1.3; font-weight:700; } .compare-results-description{ width:100%; max-width:700px; margin:0 auto; color:#64748b; font-size:16px; line-height:1.7; text-align:center; } /*================================================== TABLE WRAPPER ==================================================*/ .compare-table-wrapper{ width:100%; overflow-x:auto; overflow-y:hidden; background:#ffffff; border:1px solid #dbe3ee; border-radius:16px; box-shadow: 0 12px 35px rgba(15,23,42,.07); } /*================================================== TABLE ==================================================*/ .compare-table{ width:100%; min-width:600px; border-collapse:collapse; table-layout:fixed; } /*================================================== TABLE HEADER ==================================================*/ .compare-table thead{ background:#2563eb; } .compare-table th{ padding:14px 10px; background:#2563eb; color:#ffffff; border-right: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); text-align:center; font-size:15px; font-weight:700; vertical-align:middle; } .compare-table th:last-child{ border-right:none; } /*================================================== MARKET HEADER SMALL TEXT ==================================================*/ .compare-table th small{ display:block; margin-top:5px; color:#dbeafe; font-size:12px; font-weight:500; line-height:1.4; } /*================================================== TABLE BODY ==================================================*/ .compare-table td{ height:46px; padding:10px 8px; border-right:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; text-align:center; color:#334155; font-size:15px; font-weight:600; } .compare-table td:last-child{ border-right:none; } .compare-table tbody tr:last-child td{ border-bottom:none; } /*================================================== ALTERNATE ROW ==================================================*/ .compare-table tbody tr:nth-child(even){ background:#f8fafc; } /*================================================== HOVER ==================================================*/ .compare-table tbody tr:hover{ background:#eff6ff; } /*================================================== DAY COLUMN ==================================================*/ .compare-table .compare-day{ width:70px; background:#f8fafc; color:#2563eb; font-weight:700; } /*================================================== RESULT ==================================================*/ .compare-table .compare-result{ color:#334155; font-size:16px; font-weight:800; } /*================================================== NO RESULT ==================================================*/ .compare-table .compare-no-result{ color:#94a3b8; font-weight:500; } /*================================================== TABLET ==================================================*/ @media(max-width:992px){ .compare-results-title{ font-size:25px; } .compare-table{ min-width:550px; } .compare-table th{ padding:12px 7px; font-size:14px; } .compare-table td{ padding:9px 6px; font-size:14px; } } /*================================================== MOBILE COMPARE TABLE NO HORIZONTAL SCROLL ==================================================*/ @media(max-width:768px){ .compare-table-wrapper{ width:100%; overflow:hidden; border-radius:12px; } .compare-table{ width:100%; min-width:0; table-layout:fixed; } .compare-table th{ padding:9px 3px; font-size:11px; line-height:1.25; word-break:break-word; overflow-wrap:anywhere; } .compare-table th small{ display:block; margin-top:3px; font-size:8px; line-height:1.2; word-break:break-word; } .compare-table td{ height:38px; padding:7px 2px; font-size:11px; word-break:break-word; } /*---------------------------------------------- Day Column ----------------------------------------------*/ .compare-table th:first-child, .compare-table td.compare-day{ width:40px; } /*---------------------------------------------- Result Columns ----------------------------------------------*/ .compare-table th:not(:first-child), .compare-table td.compare-result{ width:auto; } .compare-table .compare-result{ font-size:12px; font-weight:800; } } @media(max-width:400px){ .compare-table-wrapper{ overflow:hidden; } .compare-table{ width:100%; min-width:0; } .compare-table th{ padding:8px 2px; font-size:10px; } .compare-table th small{ font-size:7px; } .compare-table td{ padding:7px 1px; font-size:10px; } .compare-table .compare-day{ width:36px; } .compare-table .compare-result{ font-size:11px; } } /*================================================== GAME INFORMATION SECTION ==================================================*/ .game-information-section{ padding:10px 0 50px; background:#f8fafc; } /*================================================== SECTION HEADER ==================================================*/ .game-information-section .section-header{ text-align:center; display:flex; flex-direction:column; align-items:center; } .game-information-section .section-description{ width:100%; max-width:850px; margin-left:auto; margin-right:auto; text-align:center; } .game-information-section .section-title{ text-align:center; } .game-information-section .section-tag{ text-align:center; } /*================================================== INTRO ==================================================*/ .game-information-intro{ width:100%; margin:25px 0 20px; padding:25px 30px; background:#ffffff; border:1px solid #e2e8f0; border-radius:18px; box-shadow: 0 10px 30px rgba(15,23,42,.05); } .game-information-intro p{ margin:0; color:#475569; font-size:17px; line-height:1.9; text-align:left; } /*================================================== INFORMATION CONTENT ==================================================*/ .game-information-content{ width:100%; margin-top:20px; padding:35px 40px; background:#ffffff; border:1px solid #e2e8f0; border-radius:18px; box-shadow: 0 12px 35px rgba(15,23,42,.06); } .game-information-content h3{ margin:30px 0 12px; color:#0f172a; font-size:24px; line-height:1.4; font-weight:700; } .game-information-content h3:first-child{ margin-top:0; } .game-information-content p{ margin:0 0 20px; color:#475569; font-size:16px; line-height:1.9; } .game-information-content p:last-child{ margin-bottom:0; } /*================================================== HEADING ACCENT ==================================================*/ .game-information-content h3{ position:relative; padding-left:16px; } .game-information-content h3::before{ content:""; position:absolute; left:0; top:5px; width:4px; height:calc(100% - 10px); border-radius:4px; background:#2563eb; } /*================================================== TABLET ==================================================*/ @media(max-width:992px){ .game-information-intro{ padding:22px 25px; } .game-information-content{ padding:30px; } .game-information-content h3{ font-size:22px; } .game-information-content p{ font-size:16px; } } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .game-information-section{ padding:10px 0 35px; } .game-information-intro{ margin:20px 0 15px; padding:20px; border-radius:14px; } .game-information-intro p{ font-size:15px; line-height:1.8; } .game-information-content{ margin-top:15px; padding:22px 20px; border-radius:14px; } .game-information-content h3{ margin:25px 0 10px; padding-left:13px; font-size:19px; line-height:1.5; } .game-information-content h3::before{ width:3px; top:5px; height:calc(100% - 10px); } .game-information-content p{ margin-bottom:18px; font-size:15px; line-height:1.8; } } /*================================================== SMALL MOBILE ==================================================*/ @media(max-width:400px){ .game-information-intro{ padding:18px; } .game-information-content{ padding:20px 17px; } .game-information-content h3{ font-size:18px; } .game-information-content p{ font-size:14px; line-height:1.8; } } /*================================================== GAME SEARCH SECTION ==================================================*/ .game-search-section{ padding:10px 0 50px; background:#ffffff; } /*================================================== SECTION HEADER ==================================================*/ .game-search-section .section-header{ text-align:center; display:flex; flex-direction:column; align-items:center; } .game-search-section .section-title{ text-align:center; } .game-search-section .section-tag{ text-align:center; } .game-search-section .section-description{ width:100%; max-width:850px; margin-left:auto; margin-right:auto; text-align:center; } /*================================================== SEARCH FORM ==================================================*/ .search-form{ width:100%; max-width:900px; margin:30px auto 0; padding:25px; background:#ffffff; border:1px solid #e2e8f0; border-radius:18px; box-shadow: 0 12px 35px rgba(15,23,42,.06); } /*================================================== SEARCH INPUT GROUP ==================================================*/ .search-input-group{ display:grid; grid-template-columns: 1fr auto; grid-template-rows:auto 48px; column-gap:15px; align-items:end; } .search-input-group label{ grid-column:1 / -1; margin-bottom:8px; color:#334155; font-size:15px; font-weight:700; } /*================================================== INPUT ==================================================*/ .search-input-group input{ width:100%; height:48px; padding:0 15px; border:1px solid #cbd5e1; border-radius:10px; background:#ffffff; color:#0f172a; font-family:inherit; font-size:15px; outline:none; transition:.25s ease; box-sizing:border-box; } .search-input-group input::placeholder{ color:#94a3b8; } .search-input-group input:hover{ border-color:#93c5fd; } .search-input-group input:focus{ border-color:#2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.10); } /*================================================== SEARCH BUTTON ==================================================*/ .search-submit-button{ min-width:125px; height:48px; padding:0 22px; border:none; border-radius:10px; background:#2563eb; color:#ffffff; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; transition:.25s ease; } .search-submit-button:hover{ background:#1d4ed8; transform:translateY(-1px); box-shadow: 0 8px 20px rgba(37,99,235,.20); } .search-submit-button:active{ transform:translateY(0); } /*================================================== SEARCH RESULTS ==================================================*/ .search-results{ width:100%; max-width:1100px; margin:25px auto 0; } .search-results:empty{ display:none; } /*================================================== TABLET ==================================================*/ @media(max-width:992px){ .search-form{ max-width:850px; } .search-results{ max-width:100%; } } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .game-search-section{ padding:10px 0 35px; } .search-form{ margin-top:20px; padding:18px; border-radius:14px; } .search-input-group{ display:flex; flex-direction:column; align-items:stretch; gap:9px; } .search-input-group label{ margin:0; font-size:14px; } .search-input-group input{ height:46px; font-size:14px; } .search-submit-button{ width:100%; height:46px; font-size:14px; } .search-results{ margin-top:20px; } } /*================================================== SMALL MOBILE ==================================================*/ @media(max-width:400px){ .search-form{ padding:15px; } .search-input-group input{ height:44px; } .search-submit-button{ height:44px; } } /*================================================== SEARCH RESULTS ==================================================*/ .search-results{ width:100%; max-width:1100px; margin:30px auto 0; } /*================================================== SEARCH SUMMARY ==================================================*/ .search-result-summary{ width:100%; padding:22px 25px; margin-bottom:15px; background:#ffffff; border:1px solid #e2e8f0; border-radius:16px; box-shadow: 0 10px 30px rgba(15,23,42,.05); text-align:center; } .search-result-summary h3{ margin:0 0 7px; color:#0f172a; font-size:22px; font-weight:700; line-height:1.4; } .search-result-summary p{ margin:0; color:#64748b; font-size:15px; line-height:1.6; } .search-result-summary strong{ color:#2563eb; font-weight:800; } /*================================================== SORT CONTROLS ==================================================*/ .search-sort-controls{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-bottom:15px; padding:14px 16px; background:#ffffff; border:1px solid #e2e8f0; border-radius:14px; } .search-sort-controls label{ margin-right:3px; color:#475569; font-size:14px; font-weight:700; } .search-sort-controls select{ height:42px; padding:0 35px 0 12px; border:1px solid #cbd5e1; border-radius:9px; background:#ffffff; color:#0f172a; font-family:inherit; font-size:14px; font-weight:600; outline:none; cursor:pointer; transition:.25s ease; } .search-sort-controls select:hover{ border-color:#93c5fd; } .search-sort-controls select:focus{ border-color:#2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.10); } /*================================================== SEARCH TABLE WRAPPER ==================================================*/ .search-table-wrapper{ width:100%; overflow:hidden; background:#ffffff; border:1px solid #e2e8f0; border-radius:16px; box-shadow: 0 12px 35px rgba(15,23,42,.07); } /*================================================== SEARCH TABLE ==================================================*/ .search-results-table{ width:100%; border-collapse:collapse; table-layout:fixed; } /*================================================== TABLE HEADER ==================================================*/ .search-results-table thead{ background:#2563eb; } .search-results-table th{ padding:15px 12px; background:#2563eb; color:#ffffff; border-right: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); text-align:center; font-size:15px; font-weight:700; } .search-results-table th:last-child{ border-right:none; } /*================================================== TABLE BODY ==================================================*/ .search-results-table td{ padding:13px 10px; border-right:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; color:#334155; text-align:center; font-size:15px; font-weight:600; } .search-results-table td:last-child{ border-right:none; } .search-results-table tbody tr:last-child td{ border-bottom:none; } /*================================================== ALTERNATE ROW ==================================================*/ .search-results-table tbody tr:nth-child(even){ background:#f8fafc; } .search-results-table tbody tr:hover{ background:#eff6ff; } /*================================================== RESULT NUMBER ==================================================*/ .search-results-table .search-result-number{ color:#2563eb; font-size:17px; font-weight:800; } /*================================================== ERROR / EMPTY / LOADING ==================================================*/ .search-error, .search-loading, .search-no-results{ width:100%; padding:25px; margin-top:20px; background:#ffffff; border:1px solid #e2e8f0; border-radius:14px; color:#64748b; text-align:center; font-size:15px; line-height:1.7; } .search-error{ color:#dc2626; background:#fff7f7; border-color:#fecaca; } .search-loading{ color:#2563eb; background:#eff6ff; border-color:#bfdbfe; } /*================================================== VIEW MORE ==================================================*/ .search-load-more-wrapper{ width:100%; padding:0; background:#ffffff; border-top:1px solid #e2e8f0; } .search-view-more{ width:100%; min-height:48px; border:none; background:#ffffff; color:#2563eb; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; transition:.25s ease; } .search-view-more:hover{ background:#eff6ff; color:#1d4ed8; } /*================================================== SEARCH FORM BUTTON LOADING ==================================================*/ .search-submit-button:disabled{ opacity:.65; cursor:wait; transform:none; } /*================================================== TABLET ==================================================*/ @media(max-width:992px){ .search-results{ max-width:100%; } .search-result-summary{ padding:20px; } .search-results-table th{ padding:13px 8px; font-size:14px; } .search-results-table td{ padding:12px 7px; font-size:14px; } } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .search-results{ margin-top:20px; } .search-result-summary{ padding:18px 15px; border-radius:13px; } .search-result-summary h3{ font-size:19px; } .search-result-summary p{ font-size:14px; } /*---------------------------------------------- SORT CONTROLS ----------------------------------------------*/ .search-sort-controls{ display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:13px; border-radius:12px; } .search-sort-controls label{ grid-column:1 / -1; margin:0; font-size:13px; } .search-sort-controls select{ width:100%; height:42px; padding-left:10px; padding-right:25px; font-size:12px; } /*---------------------------------------------- TABLE ----------------------------------------------*/ .search-table-wrapper{ border-radius:12px; overflow:hidden; } .search-results-table{ width:100%; min-width:0; table-layout:fixed; } .search-results-table th{ padding:10px 4px; font-size:12px; line-height:1.3; word-break:break-word; } .search-results-table td{ padding:10px 4px; font-size:12px; line-height:1.3; word-break:break-word; } .search-results-table .search-result-number{ font-size:13px; } /*---------------------------------------------- VIEW MORE ----------------------------------------------*/ .search-view-more{ min-height:45px; font-size:14px; } /*---------------------------------------------- STATUS MESSAGES ----------------------------------------------*/ .search-error, .search-loading, .search-no-results{ padding:20px 15px; font-size:14px; } } /*================================================== SMALL MOBILE ==================================================*/ @media(max-width:400px){ .search-result-summary{ padding:16px 12px; } .search-result-summary h3{ font-size:18px; } .search-result-summary p{ font-size:13px; } .search-sort-controls{ padding:10px; } .search-sort-controls select{ height:40px; font-size:11px; } .search-results-table th{ padding:9px 3px; font-size:11px; } .search-results-table td{ padding:9px 3px; font-size:11px; } .search-results-table .search-result-number{ font-size:12px; } } /*================================================== GAME FAQ SECTION ==================================================*/ .game-faq{ padding:10px 0 50px; background:#f8fafc; } .game-faq__container{ width:100%; margin:0 auto; } /*================================================== FAQ HEADER ==================================================*/ .game-faq__header{ width:100%; margin-bottom:25px; text-align:center; display:flex; flex-direction:column; align-items:center; } .game-faq__tag{ display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:5px 13px; border-radius:8px; background:#eff6ff; color:#2563eb; font-size:13px; font-weight:700; } .game-faq__title{ margin:10px 0 8px; color:#0f172a; font-size:30px; line-height:1.35; font-weight:700; text-align:center; } .game-faq__description{ width:100%; max-width:850px; margin:0 auto; color:#64748b; font-size:16px; line-height:1.7; text-align:center; } /*================================================== FAQ LIST ==================================================*/ .game-faq__list{ width:100%; display:flex; flex-direction:column; gap:10px; } /*================================================== FAQ ITEM ==================================================*/ .game-faq__item{ width:100%; background:#ffffff; border:1px solid #e2e8f0; border-radius:16px; overflow:hidden; box-shadow: 0 8px 25px rgba(15,23,42,.04); transition: border-color .25s ease, box-shadow .25s ease; } .game-faq__item:hover{ border-color:#bfdbfe; box-shadow: 0 12px 30px rgba(37,99,235,.08); } .game-faq__item[open]{ border-color:#93c5fd; box-shadow: 0 12px 35px rgba(37,99,235,.09); } /*================================================== QUESTION ==================================================*/ .game-faq__question{ min-height:68px; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#0f172a; font-size:17px; font-weight:700; line-height:1.5; cursor:pointer; list-style:none; outline:none; } /* Remove native arrow */ .game-faq__question::-webkit-details-marker{ display:none; } .game-faq__question::marker{ display:none; } /*================================================== QUESTION HOVER ==================================================*/ .game-faq__question:hover{ color:#2563eb; } /*================================================== FAQ ICON ==================================================*/ .game-faq__icon{ width:38px; height:38px; min-width:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#eff6ff; color:#2563eb; font-size:24px; font-weight:500; line-height:1; transition: transform .25s ease, background .25s ease, color .25s ease; } /*================================================== OPEN ICON ==================================================*/ .game-faq__item[open] .game-faq__icon{ background:#2563eb; color:#ffffff; transform:rotate(45deg); } /*================================================== ANSWER ==================================================*/ .game-faq__answer{ padding:0 22px 22px; } .game-faq__answer p{ margin:0; padding-top:18px; border-top:1px solid #e2e8f0; color:#475569; font-size:16px; line-height:1.85; } /*================================================== OPEN QUESTION ==================================================*/ .game-faq__item[open] .game-faq__question{ color:#1d4ed8; } /*================================================== TABLET ==================================================*/ @media(max-width:992px){ .game-faq__title{ font-size:27px; } .game-faq__description{ font-size:15px; } .game-faq__question{ font-size:16px; } } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .game-faq{ padding:10px 0 35px; } .game-faq__header{ margin-bottom:20px; } .game-faq__tag{ min-height:28px; padding:4px 11px; font-size:12px; } .game-faq__title{ margin:9px 0 7px; font-size:22px; } .game-faq__description{ padding:0 10px; font-size:14px; line-height:1.7; } .game-faq__list{ gap:8px; } .game-faq__item{ border-radius:13px; } .game-faq__question{ min-height:60px; padding:15px 16px; gap:12px; font-size:15px; line-height:1.45; } .game-faq__icon{ width:34px; height:34px; min-width:34px; font-size:21px; } .game-faq__answer{ padding:0 16px 18px; } .game-faq__answer p{ padding-top:15px; font-size:14px; line-height:1.8; } } /*================================================== SMALL MOBILE ==================================================*/ @media(max-width:400px){ .game-faq__title{ font-size:20px; } .game-faq__description{ font-size:13px; } .game-faq__question{ padding:14px; font-size:14px; } .game-faq__icon{ width:32px; height:32px; min-width:32px; font-size:20px; } .game-faq__answer{ padding:0 14px 16px; } .game-faq__answer p{ font-size:13px; } }