*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #070B14; --surface: #101827; --surface2: #162033; --border: #1E2D47; --border2: #243149; --text: #EAF0FF; --muted: #9AA7BD; --dim: #576880; --cyan: #38BDF8; --violet: #A78BFA; --green: #22C55E; --amber: #F59E0B; --red: #EF4444; --lime: #84CC16; --nav-bg: #0D1525; --footer-bg: #060C18; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .nav { background: var(--nav-bg); border-bottom: 1px solid var(--border); padding: 0 24px; height: 48px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .nav-inner { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .nav-logo { font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 700; color: var(--cyan); letter-spacing: 0.4px; display: flex; align-items: center; gap: 7px; cursor: pointer; flex-shrink: 0; } .nav-logo i { font-size: 18px; } .nav-links { display: flex; gap: 2px; } .nav-link { font-size: 11px; color: var(--muted); padding: 5px 10px; border-radius: 6px; cursor: pointer; transition: color .15s, background .15s; font-weight: 500; } .nav-link:hover { color: var(--text); background: var(--surface2); } .nav-link.active { color: var(--cyan); background: var(--surface2); } .nav-right { display: flex; align-items: center; gap: 8px; } .nav-search-form { width: 184px; height: 30px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px; display: grid; grid-template-columns: 1fr 30px; align-items: center; overflow: hidden; transition: border-color .15s, background .15s, box-shadow .15s; } .nav-search-form:focus-within { border-color: rgba(56,189,248,0.58); background: var(--surface); box-shadow: 0 0 0 2px rgba(56,189,248,0.08); } .nav-search-input { width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; padding: 0 8px 0 10px; } .nav-search-input::placeholder { color: var(--dim); } .nav-search-btn { width: 30px; height: 30px; border: 0; border-left: 1px solid rgba(36,49,73,0.72); background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: color .15s, background .15s; } .nav-search-btn:hover { color: var(--cyan); background: rgba(56,189,248,0.06); } .page-wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; } .hero-strip { padding: 18px 0 0; display: grid; grid-template-columns: 1fr 272px; gap: 12px; } .hero-main { background: transparent; border: 0; border-radius: 12px; overflow: hidden; position: relative; min-height: 236px; transition: transform .15s; } .hero-main:hover { transform: translateY(-1px); } .hero-slide { position: absolute; inset: 0; display: block; opacity: 0; pointer-events: none; transition: opacity .35s ease; } .hero-slide.active { opacity: 1; pointer-events: auto; } .hero-slider-static { position: relative; min-height: 236px; } .hero-controls { position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 3; display: flex; align-items: center; justify-content: flex-end; gap: 8px; pointer-events: none; } .hero-dots { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 999px; background: rgba(7,11,20,0.62); border: 1px solid rgba(36,49,73,0.72); pointer-events: auto; } .hero-dot-btn { width: 7px; height: 7px; border-radius: 999px; border: 0; background: var(--dim); cursor: pointer; padding: 0; transition: width .18s, background .18s; } .hero-dot-btn.active { width: 18px; background: var(--cyan); } .hero-nav-btn { width: 30px; height: 30px; border: 1px solid rgba(36,49,73,0.88); background: rgba(7,11,20,0.72); color: var(--muted); border-radius: 999px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .15s, border-color .15s, background .15s, transform .15s, box-shadow .15s, opacity .15s; pointer-events: auto; backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,0.18); opacity: 0; } .hero-main:hover .hero-nav-btn, .hero-main:focus-within .hero-nav-btn { opacity: .92; } .hero-nav-btn i, .rail-btn i { font-size: 15px; line-height: 1; pointer-events: none; } .hero-nav-btn:hover, .hero-nav-btn:focus-visible { color: var(--cyan); border-color: rgba(56,189,248,0.56); background: rgba(7,11,20,0.92); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.24); } .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.74; } .hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,11,20,0.84) 0%, rgba(7,11,20,0.56) 34%, rgba(7,11,20,0.20) 66%, rgba(7,11,20,0.06) 100%), linear-gradient(0deg, rgba(7,11,20,0.62) 0%, rgba(7,11,20,0.08) 58%, rgba(7,11,20,0.00) 100%); } .hero-content { position: absolute; left: 0; right: 96px; bottom: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; max-width: 620px; } .hero-badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; background: rgba(56,189,248,0.15); color: var(--cyan); border: 1px solid rgba(56,189,248,0.35); font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 5px; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 9px; } .hero-badge i { font-size: 11px; } .hero-title { font-family: 'Syne', sans-serif; font-size: 24px; font-weight: 700; color: #F0F6FF; line-height: 1.18; margin-bottom: 8px; } .hero-meta { font-size: 11px; color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .hero-meta i { font-size: 12px; } .hero-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border2); } .hero-sidebar { display: flex; flex-direction: column; gap: 10px; } .side-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; flex: 1; } .side-card-header { font-size: 10px; font-weight: 600; color: var(--muted); padding: 9px 12px 7px; letter-spacing: 0.8px; text-transform: uppercase; border-bottom: 1px solid var(--surface2); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .side-card-header-link { color: var(--cyan); font-size: 10px; letter-spacing: 0; text-transform: none; font-weight: 500; white-space: nowrap; } .side-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--surface2); cursor: pointer; transition: background .15s; } .side-item:last-child { border-bottom: none; } .side-item:hover { background: var(--surface2); } .side-thumb { width: 34px; height: 34px; border-radius: 7px; flex-shrink: 0; object-fit: cover; background: var(--surface2); } .side-item-title { font-size: 12px; color: #C8D8EC; font-weight: 500; line-height: 1.3; } .side-item-sub { font-size: 10px; color: var(--muted); margin-top: 2px; } .side-item-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .dot-green { background: var(--green); } .dot-lime { background: var(--lime); } .side-slider { position: relative; } .side-slider-viewport { overflow: hidden; width: 100%; } .side-slider-track { display: flex; width: 100%; transition: transform .34s ease; will-change: transform; } .side-slide { flex: 0 0 100%; min-width: 0; } .side-slide .side-item:last-child { border-bottom: none; } .side-dots { border-top: 1px solid rgba(36,49,73,0.58); padding: 7px 12px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; } .side-dot-btn { width: 6px; height: 6px; border: 0; border-radius: 999px; background: var(--dim); padding: 0; cursor: pointer; transition: width .18s, background .18s; } .side-dot-btn.active { width: 15px; background: var(--cyan); } .section { padding: 20px 0 0; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; } .section-title { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: 0.3px; display: flex; align-items: center; gap: 8px; } .section-line { width: 3px; height: 15px; background: var(--cyan); border-radius: 2px; } .section-line.violet { background: var(--violet); } .section-line.green { background: var(--green); } .section-line.amber { background: var(--amber); } .section-line.lime { background: var(--lime); } .section-more { font-size: 11px; color: var(--cyan); display: flex; align-items: center; gap: 3px; font-weight: 500; transition: opacity .15s; white-space: nowrap; } .section-more:hover { opacity: 0.75; } .cards-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; } .cards-row-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; } .cards-row-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; display: block; min-width: 0; } .card:hover { border-color: var(--cyan); transform: translateY(-1px); } .card-thumb { height: 86px; background: var(--surface2); position: relative; overflow: hidden; } .card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; } .card:hover .card-thumb img { transform: scale(1.03); } .card-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,11,20,0.38), transparent 65%); pointer-events: none; } .card-body { padding: 10px; } .card-tag { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; border: 1px solid; } .tag-news { color: var(--cyan); background: rgba(56,189,248,0.08); border-color: rgba(56,189,248,0.2); } .tag-guide { color: var(--violet); background: rgba(167,139,250,0.08); border-color: rgba(167,139,250,0.2); } .tag-codes { color: var(--green); background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.2); } .tag-profile { color: var(--cyan); background: rgba(56,189,248,0.08); border-color: rgba(56,189,248,0.2); } .tag-upcoming{ color: var(--lime); background: rgba(132,204,22,0.08); border-color: rgba(132,204,22,0.2); } .card-title { font-size: 12px; color: #C8D8EC; font-weight: 500; line-height: 1.4; } .card-meta { font-size: 10px; color: var(--muted); margin-top: 5px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .card-meta i { font-size: 11px; } .game-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; display: flex; flex-direction: column; } .game-card:hover { border-color: var(--cyan); transform: translateY(-1px); } .game-card-thumb { height: 118px; position: relative; overflow: hidden; background: var(--surface2); } .game-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; } .game-card:hover .game-card-thumb img { transform: scale(1.03); } .game-card-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,11,20,0.54), transparent 72%); } .game-card-body { padding: 10px; } .game-card-name { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .game-card-meta { font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .corner-badge { position: absolute; left: 8px; bottom: 8px; z-index: 1; font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 4px; border: 1px solid; letter-spacing: 0.3px; } .cb-released { color: var(--green); background: rgba(10,18,30,0.88); border-color: rgba(34,197,94,0.35); } .cb-upcoming { color: var(--lime); background: rgba(10,18,30,0.88); border-color: rgba(132,204,22,0.35); } .plat-pills { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; } .plat-pill { font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 4px; border: 1px solid; } .pp-pc { color: var(--cyan); background: rgba(56,189,248,0.07); border-color: rgba(56,189,248,0.2); } .pp-android { color: var(--green); background: rgba(34,197,94,0.07); border-color: rgba(34,197,94,0.2); } .pp-ios { color: #C8D8EC; background: rgba(200,216,236,0.07); border-color: rgba(200,216,236,0.2); } .pp-ps { color: #6EA8FE; background: rgba(110,168,254,0.07); border-color: rgba(110,168,254,0.2); } .pp-xb { color: #4ADE80; background: rgba(74,222,128,0.07); border-color: rgba(74,222,128,0.2); } .rail-slider { background: transparent; border: 0; border-radius: 0; overflow: visible; position: relative; } .popular-portrait-rail { background: transparent; border: 0; border-radius: 0; overflow: hidden; } .rail-slider::before, .rail-slider::after { content: ''; position: absolute; top: 0; bottom: 0; width: 46px; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .15s; } .rail-slider::before { left: 0; background: linear-gradient(90deg, rgba(7,11,20,0.42), rgba(7,11,20,0)); } .rail-slider::after { right: 0; background: linear-gradient(270deg, rgba(7,11,20,0.42), rgba(7,11,20,0)); } .rail-slider:hover::before, .rail-slider:hover::after, .rail-slider:focus-within::before, .rail-slider:focus-within::after { opacity: .85; } .rail-viewport { overflow: hidden; width: 100%; } .rail-track { display: flex; gap: 10px; padding: 0; transition: transform .38s ease; will-change: transform; } .rail-card { flex: 0 0 calc((100% - 30px) / 4); min-width: 0; background: var(--surface2); border: 1px solid rgba(36,49,73,0.78); border-radius: 10px; overflow: hidden; transition: border-color .15s, transform .15s, background .15s; } .rail-card:hover { border-color: var(--cyan); transform: translateY(-1px); background: #19243A; } .rail-card.is-upcoming { flex-basis: calc((100% - 20px) / 3); } .update-rail .rail-card, .profile-rail .rail-card { flex-basis: calc((100% - 20px) / 3); } .compact-rail .rail-card { flex-basis: calc((100% - 10px) / 2); } .compact-rail .rail-cover { height: 88px; } .rail-card-inner { padding: 10px; } .rail-card.has-overlay .rail-card-inner { padding: 10px; } .rail-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .rail-icon { width: 34px; height: 34px; border-radius: 8px; background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.18); display: flex; align-items: center; justify-content: center; color: var(--cyan); font-size: 16px; flex-shrink: 0; } .rail-icon.green { color: var(--green); background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.18); } .rail-icon.lime { color: var(--lime); background: rgba(132,204,22,0.08); border-color: rgba(132,204,22,0.18); } .rail-icon.violet { color: var(--violet); background: rgba(167,139,250,0.08); border-color: rgba(167,139,250,0.18); } .rail-title { font-size: 12px; color: #C8D8EC; font-weight: 600; line-height: 1.35; } .rail-meta { font-size: 10px; color: var(--muted); display: flex; gap: 5px; align-items: center; flex-wrap: wrap; } .rail-meta i { font-size: 11px; } .rail-cover { height: 102px; border-radius: 8px; overflow: hidden; background: var(--surface); position: relative; margin-bottom: 9px; } .rail-card.has-overlay .rail-cover { height: 128px; margin-bottom: 0; } .rail-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; opacity: .94; transition: transform .2s; } .rail-card:hover .rail-cover img { transform: scale(1.03); } .rail-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,11,20,0.42), transparent 68%); pointer-events: none; } .rail-card.has-overlay .rail-cover::after { background: linear-gradient(180deg, rgba(7,11,20,0.03) 0%, rgba(7,11,20,0.12) 34%, rgba(7,11,20,0.74) 70%, rgba(7,11,20,0.96) 100%); } .rail-overlay-box { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 10px; } .rail-card.has-overlay .rail-title { color: #F0F6FF; margin-bottom: 4px; text-shadow: 0 1px 2px rgba(0,0,0,0.25); } .rail-card.has-overlay .rail-meta { color: #C6D3E8; } .rail-card.has-overlay .rail-meta i { color: #AEBBD0; } .rail-release-mini{ margin-top:3px;font-size:9px;line-height:1.2;color:#AEBBD0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .rail-countdown{ position:absolute;top:8px;left:8px;z-index:3;display:inline-flex;align-items:center; padding:4px 7px;border-radius:5px;border:1px solid rgba(132,204,22,.28); background:rgba(7,11,20,.76);backdrop-filter:blur(6px);color:#DDE8F7; font-size:9.5px;font-weight:700;line-height:1;letter-spacing:.15px; } .rail-countdown.is-urgent{background:rgba(239,110,80,.90);border-color:rgba(255,255,255,.16);color:#fff} .popular-combo-grid { display: grid; grid-template-columns: 310px 1fr; gap: 12px; align-items: stretch; } .popular-main-col, .popular-side-stack, .popular-side-row { min-width: 0; } .popular-main-col { display: flex; flex-direction: column; } .popular-side-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; } .popular-main-col .rail-slider, .popular-side-row .rail-slider { flex: 1; } .popular-portrait-rail .rail-track { padding: 0; } .popular-side-rail .rail-track { padding: 0; } .popular-portrait-rail .rail-card { flex-basis: 100%; border-radius: 12px; } .popular-portrait-rail .rail-card-inner { height: 100%; } .popular-portrait-rail .rail-cover { height: 360px; min-height: 360px; margin-bottom: 0; background: #0B1322; } .popular-portrait-rail .rail-cover img.rail-cover-bg { display: none; } .popular-portrait-rail .rail-cover img.rail-cover-main { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center center; padding: 0; opacity: .88; } .popular-portrait-rail .rail-cover::after { z-index: 2; background: linear-gradient(180deg, rgba(7,11,20,0.08) 0%, rgba(7,11,20,0.18) 44%, rgba(7,11,20,0.76) 76%, rgba(7,11,20,0.96) 100%), linear-gradient(90deg, rgba(7,11,20,0.32) 0%, transparent 38%, rgba(7,11,20,0.2) 100%); } .popular-portrait-rail .rail-status, .popular-portrait-rail .rail-overlay-box { z-index: 3; } .popular-portrait-rail .rail-title { font-size: 15px; line-height: 1.28; } .popular-portrait-rail .rail-meta { font-size: 11px; } .popular-portrait-rail .rail-card:nth-child(2) .rail-cover-main { object-position: right center; } .popular-portrait-rail .rail-card:nth-child(3) .rail-cover-main { object-position: center center; } .popular-side-rail .rail-card { flex-basis: calc((100% - 10px) / 2); } .popular-side-rail .rail-cover { height: 138px; margin-bottom: 0; } .popular-side-rail .rail-title { font-size: 12px; line-height: 1.32; } .rail-status { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; border: 1px solid rgba(34,197,94,0.22); color: var(--green); background: rgba(34,197,94,0.08); margin-bottom: 6px; } .rail-status.lime { color: var(--lime); background: rgba(132,204,22,0.08); border-color: rgba(132,204,22,0.22); } .rail-status.cyan { color: var(--cyan); background: rgba(56,189,248,0.08); border-color: rgba(56,189,248,0.22); } .rail-status.violet { color: var(--violet); background: rgba(167,139,250,0.08); border-color: rgba(167,139,250,0.22); } .rail-status.amber { color: var(--amber); background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.22); } .rail-controls { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .rail-btn { position: absolute; top: 50%; width: 30px; height: 30px; border: 1px solid rgba(36,49,73,0.9); background: rgba(7,11,20,0.68); color: var(--muted); border-radius: 999px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transform: translateY(-50%) scale(.96); transition: color .15s, border-color .15s, background .15s, opacity .15s, transform .15s, box-shadow .15s; pointer-events: auto; backdrop-filter: blur(8px); opacity: 0; box-shadow: 0 6px 18px rgba(0,0,0,0.22); } .rail-btn[data-rail-prev] { left: 8px; } .rail-btn[data-rail-next] { right: 8px; } .rail-slider:hover .rail-btn, .rail-slider:focus-within .rail-btn { opacity: .88; } .rail-btn:hover, .rail-btn:focus-visible { color: var(--cyan); border-color: rgba(56,189,248,0.6); background: rgba(7,11,20,0.94); opacity: 1; transform: translateY(-50%) scale(1.04); box-shadow: 0 8px 22px rgba(0,0,0,0.28); } .rail-dots { display: none; } .rail-dot { width: 6px; height: 6px; border: 0; border-radius: 999px; background: var(--dim); padding: 0; cursor: pointer; transition: width .18s, background .18s; } .rail-dot.active { width: 16px; background: var(--cyan); } .release-tracker { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .tracker-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--surface2); cursor: pointer; transition: background .15s; } .tracker-row:last-child { border-bottom: none; } .tracker-row:hover { background: var(--surface2); } .tracker-num { font-size: 11px; font-weight: 600; color: var(--border2); font-variant-numeric: tabular-nums; text-align: center; } .tracker-info { min-width: 0; } .tracker-name { font-size: 12px; font-weight: 600; color: #C8D8EC; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tracker-sub { font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .tracker-date { font-size: 11px; font-weight: 500; text-align: right; white-space: nowrap; } .date-green { color: var(--green); } .date-lime { color: var(--lime); } .date-muted { color: var(--muted); } .tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; } .tag-pill { font-size: 11px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 4px 10px; cursor: pointer; transition: color .15s, border-color .15s; } .tag-pill:hover { color: var(--cyan); border-color: var(--cyan); } .tag-pill.featured { color: var(--cyan); border-color: rgba(56,189,248,0.3); background: rgba(56,189,248,0.06); } .tag-pill:nth-child(6n+1) { color: var(--cyan); border-color: rgba(56,189,248,0.28); background: rgba(56,189,248,0.06); } .tag-pill:nth-child(6n+2) { color: var(--green); border-color: rgba(34,197,94,0.28); background: rgba(34,197,94,0.06); } .tag-pill:nth-child(6n+3) { color: var(--violet); border-color: rgba(167,139,250,0.28); background: rgba(167,139,250,0.06); } .tag-pill:nth-child(6n+4) { color: var(--amber); border-color: rgba(245,158,11,0.28); background: rgba(245,158,11,0.06); } .tag-pill:nth-child(6n+5) { color: var(--lime); border-color: rgba(132,204,22,0.28); background: rgba(132,204,22,0.06); } .tag-pill:nth-child(6n+6) { color: #F472B6; border-color: rgba(244,114,182,0.28); background: rgba(244,114,182,0.06); } .footer { background: var(--footer-bg); border-top: 1px solid var(--surface2); margin-top: 36px; padding: 28px 0 0; } .footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 0.9fr 0.9fr 0.9fr 0.9fr; gap: 20px; margin-bottom: 20px; } .footer-logo { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700; color: var(--cyan); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; } .footer-logo i { font-size: 17px; } .footer-desc { font-size: 11px; color: var(--muted); line-height: 1.65; margin-bottom: 12px; } .footer-col-title { font-size: 10px; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; } .footer-link { font-size: 11px; color: var(--muted); display: block; margin-bottom: 6px; cursor: pointer; transition: color .15s; } .footer-link:hover { color: var(--cyan); } .footer-bottom { border-top: 1px solid var(--surface2); padding: 12px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .footer-copy { font-size: 10px; color: var(--dim); } .footer-legal { display: flex; gap: 14px; flex-wrap: wrap; } .legal-link { font-size: 10px; color: var(--dim); cursor: pointer; transition: color .15s; } .legal-link:hover { color: var(--muted); } .footer-disclaimer { padding: 12px 0 20px; border-top: 1px solid rgba(26,40,64,0.5); } .disclaimer-text { font-size: 10px; color: #3A4A60; line-height: 1.65; } @media (max-width: 900px) { .nav { height: auto; padding: 10px 16px; } .nav-inner { flex-wrap: wrap; } .nav-links { order: 3; width: 100%; overflow-x: auto; padding-top: 4px; } .nav-search-form { width: 170px; } .hero-strip { grid-template-columns: 1fr; } .hero-sidebar { display: grid; grid-template-columns: 1fr 1fr; } .cards-row, .cards-row-4 { grid-template-columns: repeat(2,1fr); } .popular-combo-grid { grid-template-columns: 1fr; } .popular-side-stack { grid-template-rows: auto; } .popular-portrait-rail .rail-cover { height: 260px; } .rail-card, .rail-card.is-upcoming { flex-basis: calc((100% - 10px) / 2); } .rail-slider::before, .rail-slider::after { opacity: .55; } .rail-btn { width: 28px; height: 28px; opacity: .42; background: rgba(7,11,20,0.62); } .rail-slider:hover .rail-btn, .rail-slider:focus-within .rail-btn { opacity: .72; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .page-wrap { padding: 0 14px; } .hero-title { font-size: 21px; } .hero-sidebar { grid-template-columns: 1fr; } .cards-row, .cards-row-2, .cards-row-4 { grid-template-columns: 1fr; } .rail-card, .rail-card.is-upcoming, .popular-side-rail .rail-card { flex-basis: 100%; } .popular-portrait-rail .rail-cover { height: 250px; } .popular-side-rail .rail-cover { height: 124px; } .footer-grid { grid-template-columns: 1fr; } .home-two-col { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { .nav-logo { font-size: 16px; } .nav-search-form { width: 100%; } .nav-right { width: 100%; } .hero-content { right: 0; padding: 14px; } .hero-title { font-size: 19px; } .hero-controls { left: 14px; right: 14px; bottom: 10px; } .hero-nav-btn { display: inline-flex; width: 28px; height: 28px; opacity: .42; } .hero-main:hover .hero-nav-btn, .hero-main:focus-within .hero-nav-btn { opacity: .7; } .tracker-row { grid-template-columns: 28px 1fr; } .tracker-date { grid-column: 2; text-align: left; } } .site-brand-logo{width:22px;height:22px;object-fit:contain;display:block;flex:0 0 auto}.footer-logo .site-brand-logo{width:21px;height:21px} .archive-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .archive-count { font-size: 11px; color: var(--muted); font-weight: 500; white-space: nowrap; } .archive-empty { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 48px 0; color: var(--muted); font-size: 13px; } .archive-empty i { font-size: 18px; } .archive-pagination { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); } .page-link, .page-number { min-height: 34px; border: 1px solid var(--border2); background: var(--surface); color: var(--muted); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; font-weight: 600; transition: color .15s, border-color .15s, background .15s, transform .15s; } .page-link { padding: 0 12px; width: fit-content; } .page-prev { justify-self: start; } .page-next { justify-self: end; } .page-link:hover, .page-number:hover { color: var(--cyan); border-color: rgba(56,189,248,.55); background: var(--surface2); transform: translateY(-1px); } .page-link.is-disabled { opacity: .36; pointer-events: none; } .page-numbers { display: flex; align-items: center; justify-content: center; gap: 6px; } .page-number { min-width: 34px; padding: 0 8px; } .page-number.is-current { color: #06111b; background: var(--cyan); border-color: var(--cyan); pointer-events: none; } .page-ellipsis { color: var(--dim); font-size: 12px; padding: 0 2px; } .ad-slot { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 4px 0 16px; } .ad-slot-label { font-size: 9px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.6px; } .ad-slot-frame { max-width: 100%; overflow: hidden; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); } .ad-slot--mobile { display: none; } .ad-native { display: flex; flex-direction: column; gap: 5px; margin: 14px 0; } .ad-native .ad-slot-label { align-self: center; } .ad-native #container-7c94ae9b66edf69ed936e16a8becf9ed { border-radius: 8px; overflow: hidden; } .sb-sponsor { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; transition: border-color .15s; } .sb-sponsor:hover { border-color: var(--cyan); } .sb-sponsor-label { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dim); background: var(--nav-bg); border: 1px solid var(--border2); border-radius: 4px; padding: 2px 5px; flex-shrink: 0; } .sb-sponsor-text { font-size: 10.5px; color: var(--muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-sponsor .ti { font-size: 11px; color: var(--dim); flex-shrink: 0; } @media (max-width: 760px) { .ad-slot--desktop { display: none; } .ad-slot--mobile { display: flex; } .sb-ad-tall { display: none; } } @media (max-width: 760px) { html, body { width: 100%; max-width: 100%; overflow-x: clip; } body, main, .page-wrap, .nav-inner, .hero-strip, .hero-main, .hero-slider-static, .section, .rail-slider, .rail-viewport, .rail-track, .home-two-col, .archive-grid { min-width: 0; max-width: 100%; } .page-wrap { width: 100%; padding-left: 12px; padding-right: 12px; } .nav { height: auto; padding: 8px 0 !important; } .nav-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(120px, 42vw); align-items: center; gap: 8px; width: 100%; padding: 0 12px !important; } .nav-logo { grid-column: 1; grid-row: 1; min-width: 0; font-size: 16px; white-space: nowrap; } .nav-right { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; margin-left: 0; } .nav-search-form { width: 100% !important; max-width: none; } .nav-links { grid-column: 1 / -1; grid-row: 2; display: flex; width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; gap: 4px; padding: 2px 0 1px; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; scrollbar-width: none; } .nav-links::-webkit-scrollbar { display: none; } .nav-link { flex: 0 0 auto; min-height: 32px; display: inline-flex; align-items: center; padding: 6px 9px; white-space: nowrap; } .hero-strip { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; padding-top: 12px; } .hero-main, .hero-slider-static { width: 100%; min-height: clamp(230px, 72vw, 300px); } .hero-content { left: 0; right: 0; max-width: 100%; padding: 14px; } .hero-title { font-size: clamp(19px, 5.7vw, 22px); line-height: 1.2; overflow-wrap: anywhere; } .hero-desc, .card-title, .game-card-name, .rail-title, .tracker-name, .section-title, .sb-title, .up-name { overflow-wrap: anywhere; } .hero-controls { left: 12px; right: 12px; bottom: 10px; } .hero-sidebar, .cards-row, .cards-row-2, .cards-row-4, .popular-combo-grid, .home-two-col { grid-template-columns: minmax(0, 1fr) !important; } .rail-viewport { width: 100%; overflow: hidden; } .rail-track { min-width: 0; } .rail-card, .rail-card.is-upcoming, .popular-side-rail .rail-card { flex-basis: 100% !important; max-width: 100%; min-width: 0; } .rail-cover img, .card-thumb img, .game-card-thumb img, img, video, iframe, svg, canvas { max-width: 100%; } .section-header { align-items: flex-start; flex-wrap: wrap; gap: 8px; } .section-title { min-width: 0; line-height: 1.25; } .tracker-row { grid-template-columns: 28px minmax(0, 1fr); } .tracker-info { min-width: 0; } .tracker-date { grid-column: 2; text-align: left; white-space: normal; } .archive-grid { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 12px; } .archive-grid .rail-card, .archive-grid .rail-card.is-upcoming { width: 100%; max-width: 100%; flex-basis: auto !important; } .archive-count { white-space: normal; } .ad-slot, .ad-slot-frame, .ad-native, .sb-sponsor { max-width: 100%; } .ad-slot-frame iframe { max-width: 100%; } .footer-inner { width: 100%; padding-left: 12px; padding-right: 12px; } .footer-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; } .footer-bottom { align-items: flex-start; flex-direction: column; } .archive-pagination { grid-template-columns: 1fr 1fr; gap: 10px; } .page-numbers { grid-column: 1 / -1; grid-row: 1; flex-wrap: wrap; } .page-prev { grid-column: 1; grid-row: 2; } .page-next { grid-column: 2; grid-row: 2; } .page-link { width: 100%; } } @media (max-width: 420px) { .nav-inner { grid-template-columns: minmax(0, 1fr) minmax(110px, 40vw); padding-left: 10px !important; padding-right: 10px !important; } .page-wrap, .footer-inner { padding-left: 10px; padding-right: 10px; } .nav-logo { font-size: 15px; } .nav-search-input { font-size: 10px; } .hero-main, .hero-slider-static { min-height: 230px; } .hero-content { padding: 12px; } .hero-title { font-size: 19px; } .hero-controls { left: 10px; right: 10px; } } .plat-pill, .qi-platform-pills .plat-pill, .table-pill-row .plat-pill, .plat-row .plat-pill { font-size: 9px; line-height: 1.5; font-weight: 600; letter-spacing: .02em; padding: 2px 7px; border-radius: 5px; border: 1px solid; display: inline-flex; align-items: center; } :root{ --bg: #080B12; --surface: #0E131D; --surface2: #151B28; --surface3: #1C2436; --border: #232B3D; --border2: #2C3550; --text: #E8EBF1; --muted: #98A2B8; --dim: #666F85; --cyan: #4B8BF4; --violet: #7C5CFF; --green: #3ECF8E; --amber: #FFB020; --red: #EF6E50; --lime: #9EDE4A; --orange: #F8974A; --nav-bg: #0E131D; --footer-bg: #070B12; --cg-box: rgba(14,19,29,0.62); --cg-r: 14px; --cg-r-sm: 9px; } body{ background-color:var(--bg); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2217.32%22%20height%3D%2230.00%22%20viewBox%3D%220%200%2017.32%2030.00%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%234b8bf4%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220.14%22%3E%3Cpolygon%20points%3D%22-8.66%2C-25.00%200.00%2C-20.00%200.00%2C-10.00%20-8.66%2C-5.00%20-17.32%2C-10.00%20-17.32%2C-20.00%22%20/%3E%3Cpolygon%20points%3D%228.66%2C-25.00%2017.32%2C-20.00%2017.32%2C-10.00%208.66%2C-5.00%20-0.00%2C-10.00%200.00%2C-20.00%22%20/%3E%3Cpolygon%20points%3D%2225.98%2C-25.00%2034.64%2C-20.00%2034.64%2C-10.00%2025.98%2C-5.00%2017.32%2C-10.00%2017.32%2C-20.00%22%20/%3E%3Cpolygon%20points%3D%22-17.32%2C-10.00%20-8.66%2C-5.00%20-8.66%2C5.00%20-17.32%2C10.00%20-25.98%2C5.00%20-25.98%2C-5.00%22%20/%3E%3Cpolygon%20points%3D%220.00%2C-10.00%208.66%2C-5.00%208.66%2C5.00%200.00%2C10.00%20-8.66%2C5.00%20-8.66%2C-5.00%22%20/%3E%3Cpolygon%20points%3D%2217.32%2C-10.00%2025.98%2C-5.00%2025.98%2C5.00%2017.32%2C10.00%208.66%2C5.00%208.66%2C-5.00%22%20/%3E%3Cpolygon%20points%3D%22-8.66%2C5.00%200.00%2C10.00%200.00%2C20.00%20-8.66%2C25.00%20-17.32%2C20.00%20-17.32%2C10.00%22%20/%3E%3Cpolygon%20points%3D%228.66%2C5.00%2017.32%2C10.00%2017.32%2C20.00%208.66%2C25.00%20-0.00%2C20.00%200.00%2C10.00%22%20/%3E%3Cpolygon%20points%3D%2225.98%2C5.00%2034.64%2C10.00%2034.64%2C20.00%2025.98%2C25.00%2017.32%2C20.00%2017.32%2C10.00%22%20/%3E%3Cpolygon%20points%3D%22-17.32%2C20.00%20-8.66%2C25.00%20-8.66%2C35.00%20-17.32%2C40.00%20-25.98%2C35.00%20-25.98%2C25.00%22%20/%3E%3Cpolygon%20points%3D%220.00%2C20.00%208.66%2C25.00%208.66%2C35.00%200.00%2C40.00%20-8.66%2C35.00%20-8.66%2C25.00%22%20/%3E%3Cpolygon%20points%3D%2217.32%2C20.00%2025.98%2C25.00%2025.98%2C35.00%2017.32%2C40.00%208.66%2C35.00%208.66%2C25.00%22%20/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 15% 0%, rgba(75,139,244,0.10), transparent 40%), radial-gradient(circle at 85% 12%, rgba(124,92,255,0.08), transparent 42%); background-repeat:repeat,no-repeat,no-repeat; background-size:17.32px 30px,auto,auto; background-attachment:scroll,fixed,fixed; } .page-wrap,.footer-inner,.nav-inner{max-width:1180px;} .cg-box{ background:var(--cg-box); border:1px solid var(--border); border-radius:var(--cg-r); padding:20px 22px; } .cg-box.cg-flush{padding:0;overflow:hidden;} @media (max-width:760px){ .cg-box{padding:12px;} } .tax-pill{ border-radius:6px !important; padding:3px 9px !important; font-size:10.5px !important; font-weight:600 !important; background:rgba(var(--tax-rgb),.22) !important; border:1px solid rgba(var(--tax-rgb),.45) !important; color:var(--tax-color) !important; } .tag-pill,.plat-pill,.genre-pill,.model-link,.status-link{border-radius:6px;} .tag-cloud{gap:8px;} .nav{ background:transparent; border-bottom:0; height:auto; padding:14px 0; position:sticky;top:0;z-index:100; } .nav::before{ content:"";position:absolute;inset:0;z-index:-2;background:var(--bg); } .nav .nav-inner, .nav > .page-wrap{ position:relative; height:62px; max-width:1180px; margin:0 auto; padding:0 52px !important; display:flex; align-items:center; gap:20px; } .nav .nav-inner::before, .nav > .page-wrap::before{ content:""; position:absolute; inset:0 32px; z-index:-1; background:#111825; border:1px solid rgba(255,255,255,0.07); border-radius:12px; } .nav-logo{ font-family:'Syne',sans-serif; font-size:16.5px;font-weight:700;color:#fff; gap:11px;flex:0 0 auto; } .nav-logo .site-brand-logo{width:30px;height:30px;border-radius:9px;} @keyframes cg-btn-march{ to{background-position:8px 0, -8px 100%, 0 -8px, 100% 8px, 0 0;} } .nav-links{display:flex;align-items:center;gap:8px;flex:1 1 auto;} .nav-link{ padding:8px 13px; border-radius:8px; border:0; font-size:13px; font-weight:500; color:#93A0B8; background-image: linear-gradient(90deg, var(--cyan) 50%, transparent 50%), linear-gradient(90deg, var(--cyan) 50%, transparent 50%), linear-gradient(0deg, var(--cyan) 50%, transparent 50%), linear-gradient(0deg, var(--cyan) 50%, transparent 50%), linear-gradient(180deg, rgba(75,139,244,0.06), rgba(75,139,244,0.06)); background-repeat:repeat-x, repeat-x, repeat-y, repeat-y, no-repeat; background-size:8px 1px, 8px 1px, 1px 8px, 1px 8px, 100% 100%; background-position:0 0, 0 100%, 0 0, 100% 0, 0 0; animation:cg-btn-march .7s infinite linear; transition:color .15s ease; } .nav-link:hover{color:#fff;background-color:transparent;} .nav-link.active{ color:#fff;font-weight:600;background-color:transparent; background-image: linear-gradient(90deg, var(--cyan) 50%, transparent 50%), linear-gradient(90deg, var(--cyan) 50%, transparent 50%), linear-gradient(0deg, var(--cyan) 50%, transparent 50%), linear-gradient(0deg, var(--cyan) 50%, transparent 50%), linear-gradient(180deg, rgba(75,139,244,0.20), rgba(75,139,244,0.20)); } @media (prefers-reduced-motion: reduce){ .nav-link{animation:none;} } .nav-right{flex:0 0 auto;} .nav-search-form{ width:262px;height:36px; border-radius:9px; background:rgba(0,0,0,0.28); border:1px solid rgba(255,255,255,0.08); box-shadow:none; transition:border-color .18s ease, box-shadow .18s ease; } .nav-search-form:focus-within{ background:rgba(0,0,0,0.4); border-color:rgba(75,139,244,0.55); box-shadow:0 0 0 3px rgba(75,139,244,0.12); } .nav-search-input{font-size:12.5px;} .nav-search-input::placeholder{color:#66708A;} .nav-search-btn{border-left-color:rgba(255,255,255,0.07);color:#6B7794;} .nav-search-btn:hover{color:var(--cyan);background:rgba(75,139,244,0.08);} .footer{background:rgba(7,11,18,0.6);border-top:1px solid var(--border);margin-top:44px;} .footer-logo{font-family:'Syne',sans-serif;color:#fff;} .footer-col-title{letter-spacing:.06em;} .footer-link{font-size:12px;margin-bottom:9px;} .footer-link:hover{color:var(--cyan);} .footer-bottom{border-top-color:var(--border);} .disclaimer-text{color:var(--dim);opacity:.85;} .ad-slot-frame{border-radius:var(--cg-r-sm);border-color:var(--border);background:var(--surface2);} .ad-slot-label{color:var(--dim);letter-spacing:.14em;} .cg-tabbar,.cg-sheet,.cg-sheet-backdrop{display:none;} @media (max-width:860px){ body.cg-has-tabbar{padding-bottom:62px;} body.cg-has-tabbar .nav-links{display:none !important;} body.cg-has-tabbar .nav{padding:8px 0;} body.cg-has-tabbar .nav .nav-inner, body.cg-has-tabbar .nav > .page-wrap{ height:52px;padding:0 24px !important;gap:10px; } body.cg-has-tabbar .nav .nav-inner::before, body.cg-has-tabbar .nav > .page-wrap::before{inset:0 12px;border-radius:10px;} body.cg-has-tabbar .nav-search-form{width:100%;max-width:none;} .cg-tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:120;display:flex; background:rgba(14,19,29,0.96); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border-top:1px solid var(--border); padding-bottom:env(safe-area-inset-bottom,0px); } .cg-tab{ flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; padding:7px 0 9px;color:var(--dim);text-decoration:none; font-family:'Inter',sans-serif;font-size:9.5px;background:none;border:0;cursor:pointer; } .cg-tab-ic{ display:flex;align-items:center;justify-content:center; width:42px;height:26px;border-radius:14px;font-size:17px; transition:background .15s ease,color .15s ease; } .cg-tab.is-active{color:var(--cyan);} .cg-tab.is-active .cg-tab-ic{background:rgba(75,139,244,0.15);color:var(--cyan);} .cg-sheet-backdrop{ position:fixed;inset:0 0 62px;z-index:118;display:block; background:rgba(3,5,9,0.55);opacity:0;pointer-events:none;transition:opacity .2s ease; } .cg-sheet-backdrop.is-open{opacity:1;pointer-events:auto;} .cg-sheet{ position:fixed;left:0;right:0;z-index:119;display:block; bottom:calc(62px + env(safe-area-inset-bottom,0px)); background:var(--surface2);border-top:1px solid var(--border); border-radius:16px 16px 0 0;padding:8px 16px 14px; transform:translateY(120%);transition:transform .25s ease; box-shadow:0 -12px 30px -10px rgba(0,0,0,0.5); } .cg-sheet.is-open{transform:translateY(0);} .cg-sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--border2);margin:8px auto 12px;} .cg-sheet-row{ display:flex;align-items:center;gap:12px;padding:12px 2px; border-bottom:1px solid var(--border);color:var(--text); font-size:13.5px;text-decoration:none; } .cg-sheet-row:last-child{border-bottom:none;} .cg-sheet-row i{width:18px;text-align:center;font-size:15px;color:var(--muted);} body.cg-has-tabbar .footer-grid{grid-template-columns:1fr;gap:0;} body.cg-has-tabbar .cg-acc{border-bottom:1px solid var(--border);} body.cg-has-tabbar .cg-acc .footer-col-title{ display:flex;align-items:center;justify-content:space-between; margin:0;padding:13px 2px;cursor:pointer; font-size:12px;font-weight:500;color:var(--text); text-transform:none;letter-spacing:0; } body.cg-has-tabbar .cg-acc .cg-acc-chev{font-size:14px;color:var(--muted);transition:transform .2s ease;} body.cg-has-tabbar .cg-acc.is-open .cg-acc-chev{transform:rotate(180deg);color:var(--cyan);} body.cg-has-tabbar .cg-acc-body{max-height:0;overflow:hidden;transition:max-height .22s ease;} body.cg-has-tabbar .cg-acc.is-open .cg-acc-body{max-height:320px;} } @media (min-width:861px){ .cg-acc-body{max-height:none !important;overflow:visible !important;} .cg-acc-chev{display:none !important;} }