/**/ /**/ /**/ /**/ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html, body { min-height: 100%; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } a { text-decoration: none; color: inherit; } ul, ol { padding-left: 1.25rem; } table { border-collapse: collapse; width: 100%; } /**/ :root { --color-primary-dark: #dde7f3; --color-accent-orange: #f3b45f; --color-accent-coral: #f08b6c; --color-white: #ffffff; --color-text-primary: #e7edf5; --color-text-muted: #b8c7d8; --color-border: #304154; --color-bg-page: #0f1722; --color-bg-surface: #162231; --color-bg-soft: #1c2a3b; --color-link: #dce8f5; --color-link-hover: #f3b45f; --color-input-bg: #101c2a; --color-header-bg: rgba(10, 16, 24, 0.92); --color-header-border: rgba(145, 166, 190, 0.25); --color-header-text: rgba(228, 237, 248, 0.94); --color-header-hover-bg: rgba(148, 170, 194, 0.14); --color-header-hover-border: rgba(148, 170, 194, 0.35); --color-header-chip-bg: rgba(148, 170, 194, 0.12); --color-header-chip-border: rgba(148, 170, 194, 0.34); --color-header-chip-hover-bg: rgba(148, 170, 194, 0.2); --color-header-chip-hover-border: rgba(177, 196, 216, 0.44); --color-header-chip-text: #f3f7fb; --color-menu-bg: #121e2c; --color-menu-border: #2f4154; --color-menu-link-hover: #223346; --color-footer-bg-start: #101925; --color-footer-bg-end: #0b121b; --color-footer-text: rgba(228, 237, 248, 0.84); --color-footer-border: rgba(145, 166, 190, 0.2); --color-btn-outline-bg: rgba(23, 35, 49, 0.9); --color-btn-outline-border: #4f657e; --color-btn-outline-text: #e7eef8; --color-btn-outline-hover-bg: #293d53; --color-btn-outline-hover-border: #6f87a1; --color-btn-outline-hover-text: #ffffff; --color-focus-ring: #7dd3fc; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 0.875rem; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08); --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08); --shadow-lg: 0 14px 30px rgba(15, 23, 42, 0.12); --shadow-focus: 0 0 0 3px #7dd3fc, 0 0 0 6px rgba(8, 15, 25, 0.86); --site-header-sticky-offset: 3.7rem; --server-subheader-sticky-height: 3.2rem; --motion-fast: 140ms; --motion-base: 220ms; --motion-slow: 420ms; --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --font-family-base: 'Poppins', 'Segoe UI', Tahoma, sans-serif; } /**/ html { font-size: 16px; color-scheme: dark; } body { font-family: var(--font-family-base); font-weight: 400; color: var(--color-text-primary); min-height: 100vh; background-color: var(--color-bg-page); background-image: radial-gradient(circle at 14% -8%, rgba(72, 86, 104, 0.13) 0%, rgba(72, 86, 104, 0) 44%), radial-gradient(circle at 88% 12%, rgba(58, 71, 87, 0.1) 0%, rgba(58, 71, 87, 0) 46%), linear-gradient(180deg, #f4f7fb 0%, #edf2f7 54%, #e7edf4 100%); background-attachment: fixed; } body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 36%), radial-gradient(circle at 82% 4%, rgba(123, 138, 158, 0.08) 0%, rgba(123, 138, 158, 0) 42%); pointer-events: none; z-index: 0; } body::after { content: ''; position: fixed; inset: 0; background: radial-gradient(circle at 50% 115%, rgba(9, 18, 30, 0.2) 0%, rgba(9, 18, 30, 0) 54%), radial-gradient(circle at 50% -16%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 46%), linear-gradient(180deg, rgba(9, 17, 28, 0.06) 0%, rgba(9, 17, 28, 0) 36%, rgba(9, 17, 28, 0.08) 100%), repeating-linear-gradient( 0deg, rgba(88, 110, 136, 0.055) 0, rgba(88, 110, 136, 0.055) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 112px ), repeating-linear-gradient( 90deg, rgba(88, 110, 136, 0.05) 0, rgba(88, 110, 136, 0.05) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 112px ); pointer-events: none; z-index: 0; } .site-bg-particles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.62; } .site-game-bg { position: fixed; top: 0; bottom: 0; width: clamp(12rem, calc((100vw - min(1100px, 100vw - 2rem)) / 2 + 10vw), 34rem); background-image: var(--site-game-bg-image); background-position: center; background-repeat: no-repeat; background-size: cover; pointer-events: none; z-index: 0; opacity: 0.78; transform: perspective(1200px) rotateX(calc(var(--site-game-bg-tilt-y) * -1deg)) rotateY(calc(var(--site-game-bg-tilt-x) * 1deg)) translate3d(var(--site-game-bg-shift-x), var(--site-game-bg-shift-y), 0); transform-origin: center; transition: transform 160ms ease-out; will-change: transform; } .site-game-bg::before, .site-game-bg::after { content: none; } .site-game-bg--left { left: 0; background-image: none; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 44%, rgba(0, 0, 0, 0.55) 72%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 44%, rgba(0, 0, 0, 0.55) 72%, transparent 100%); } .site-game-bg--left::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--site-game-bg-image); background-position: center; background-repeat: no-repeat; background-size: cover; transform: scaleX(-1); } .site-game-bg--left::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(245, 247, 250, 0) 0%, rgba(245, 247, 250, 0) 88%, rgba(245, 247, 250, 0.18) 96%, var(--color-bg-page) 100%); } .site-game-bg--right { right: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 28%, #000 56%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 28%, #000 56%, #000 100%); } .site-game-bg--right::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--color-bg-page) 0%, rgba(245, 247, 250, 0.18) 4%, rgba(245, 247, 250, 0) 12%, rgba(245, 247, 250, 0) 100%); } @media (max-width: 860px) { .site-game-bg { width: clamp(7rem, 30vw, 13rem); opacity: 0.34; } } .site-game-bg--left::after, .site-game-bg--right::after { content: none; } @media (min-width: 1600px) { .site-game-bg { width: clamp(25.4rem, 23.8vw, 38.1rem); } } @media (min-width: 1600px) and (max-width: 1920px) { .site-game-bg { width: clamp(20.6rem, 19.1vw, 30.9rem); } } .app-shell { position: relative; z-index: 2; } .main-container { position: relative; } body[data-game-theme-active='1'] { --site-theme-accent: #4c73a3; --site-theme-accent-rgb: 76, 115, 163; } body[data-game-bg-active='1'] { --site-game-bg-image: none; --site-game-bg-tilt-x: 0; --site-game-bg-tilt-y: 0; --site-game-bg-shift-x: 0rem; --site-game-bg-shift-y: 0rem; } body[data-game-theme-active='1'] .hero, body[data-game-theme-active='1'] .page-subheader:not(.page-subheader--server-sticky) { position: relative; overflow: hidden; border-top: 2px solid rgba(var(--site-theme-accent-rgb), 0.34); box-shadow: inset 0 1px 0 rgba(var(--site-theme-accent-rgb), 0.14); } body[data-game-theme-active='1'] .hero::before, body[data-game-theme-active='1'] .page-subheader:not(.page-subheader--server-sticky)::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4rem; background: linear-gradient(180deg, rgba(var(--site-theme-accent-rgb), 0.08) 0%, rgba(var(--site-theme-accent-rgb), 0) 100%); pointer-events: none; } body[data-game-theme-active='1'] .page-subheader.page-subheader--server-sticky { position: sticky; } body[data-game-theme-active='1'] .card, body[data-game-theme-active='1'] .section-surface--elevated, body[data-game-theme-active='1'] .browse-sponsored-card { border-color: rgba(var(--site-theme-accent-rgb), 0.18); } body[data-game-theme-active='1'] .btn-outline { border-color: rgba(var(--site-theme-accent-rgb), 0.34); } body[data-game-theme-active='1'] .btn-secondary:hover, body[data-game-theme-active='1'] .btn-outline:hover, body[data-game-theme-active='1'] .btn-secondary:focus-visible, body[data-game-theme-active='1'] .btn-outline:focus-visible { box-shadow: 0 0 0 2px rgba(var(--site-theme-accent-rgb), 0.2); } body[data-game-theme-active='1'] .promotion-status-badge, body[data-game-theme-active='1'] .advertise-game-page__recommended-badge { border-color: rgba(var(--site-theme-accent-rgb), 0.34); background: linear-gradient(160deg, rgba(var(--site-theme-accent-rgb), 0.12) 0%, rgba(var(--site-theme-accent-rgb), 0.04) 100%); } body[data-game-theme-active='1'] .card-header { border-left: 2px solid rgba(var(--site-theme-accent-rgb), 0.34); padding-left: 0.45rem; } body[data-game-theme-active='1'] .site-breadcrumbs__link { color: rgba(var(--site-theme-accent-rgb), 0.86); } body[data-game-theme-active='1'] .site-breadcrumbs__link:hover { color: rgba(var(--site-theme-accent-rgb), 0.98); } body[data-game-theme-active='1'] .site-breadcrumbs__current, body[data-game-theme-active='1'] .page-subheader__eyebrow, body[data-game-theme-active='1'] .server-info-section__title, body[data-game-theme-active='1'] .vote-section-title { color: rgba(var(--site-theme-accent-rgb), 0.9); } body[data-game-theme-active='1'] .site-breadcrumbs__item:not(:last-child)::after, body[data-game-theme-active='1'] .advertise-page__divider, body[data-game-theme-active='1'] hr { border-top-color: rgba(var(--site-theme-accent-rgb), 0.2); color: rgba(var(--site-theme-accent-rgb), 0.45); } body[data-game-theme-active='1'] .server-taxonomy-chip, body[data-game-theme-active='1'] .vote-summary__chip, body[data-game-theme-active='1'] .server-card__about-badge, body[data-game-theme-active='1'] .advertise-game-page__value-badge { border-color: rgba(var(--site-theme-accent-rgb), 0.28); background: linear-gradient(165deg, rgba(var(--site-theme-accent-rgb), 0.1) 0%, rgba(var(--site-theme-accent-rgb), 0.04) 100%); } body[data-game-theme-active='1'] .server-taxonomy-chip:hover, body[data-game-theme-active='1'] .vote-summary__chip:hover, body[data-game-theme-active='1'] .server-card__about-badge:hover { border-color: rgba(var(--site-theme-accent-rgb), 0.38); } body[data-game-theme-active='1'] .server-tab-panel, body[data-game-theme-active='1'] .server-tab-panel .card-header, body[data-game-theme-active='1'] .vote-context-card, body[data-game-theme-active='1'] .vote-reward-callout, body[data-game-theme-active='1'] .server-info-section--narrative, body[data-game-theme-active='1'] .server-media-embed { border-color: rgba(var(--site-theme-accent-rgb), 0.24); } body[data-game-theme-active='1'] .server-tab-trigger:hover, body[data-game-theme-active='1'] .server-tab-trigger:focus-visible { border-color: rgba(var(--site-theme-accent-rgb), 0.34); } body[data-game-theme-active='1'] .server-tab-trigger[aria-selected='true'] { border-color: rgba(var(--site-theme-accent-rgb), 0.36); box-shadow: inset 0 -1px 0 rgba(var(--site-theme-accent-rgb), 0.85); } body[data-game-theme-active='1'] .btn-vote:hover, body[data-game-theme-active='1'] .btn-secondary:hover { border-color: rgba(var(--site-theme-accent-rgb), 0.45); } body { background-image: radial-gradient(circle at 14% -10%, rgba(75, 95, 120, 0.16) 0%, rgba(75, 95, 120, 0) 44%), radial-gradient(circle at 90% 8%, rgba(56, 74, 97, 0.12) 0%, rgba(56, 74, 97, 0) 48%), linear-gradient(180deg, #0f1824 0%, #101a28 52%, #0f1723 100%); } body::before { background: radial-gradient(circle at 18% 8%, rgba(95, 117, 142, 0.11) 0%, rgba(95, 117, 142, 0) 40%), radial-gradient(circle at 82% 6%, rgba(70, 88, 111, 0.12) 0%, rgba(70, 88, 111, 0) 44%); } body::after { background: radial-gradient(circle at 50% 115%, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0) 55%), radial-gradient(circle at 50% -18%, rgba(161, 180, 204, 0.08) 0%, rgba(161, 180, 204, 0) 44%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.24) 100%), repeating-linear-gradient( 0deg, rgba(129, 151, 179, 0.045) 0, rgba(129, 151, 179, 0.045) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 114px ), repeating-linear-gradient( 90deg, rgba(129, 151, 179, 0.04) 0, rgba(129, 151, 179, 0.04) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 114px ); } .site-bg-particles { opacity: 0.72; } @media (max-width: 760px) { .site-bg-particles { opacity: 0.48; } } @media (prefers-reduced-motion: reduce) { .site-bg-particles { display: none; } } body[data-game-theme-active='1'] .hero, body[data-game-theme-active='1'] .page-subheader:not(.page-subheader--server-sticky) { box-shadow: inset 0 1px 0 rgba(var(--site-theme-accent-rgb), 0.2); } body[data-game-theme-active='1'] .hero::before, body[data-game-theme-active='1'] .page-subheader:not(.page-subheader--server-sticky)::before { background: linear-gradient(180deg, rgba(var(--site-theme-accent-rgb), 0.12) 0%, rgba(var(--site-theme-accent-rgb), 0) 100%); } body[data-game-theme-active='1'] .site-breadcrumbs__link { color: rgba(var(--site-theme-accent-rgb), 0.95); } body[data-game-theme-active='1'] .site-breadcrumbs__link:hover { color: rgba(var(--site-theme-accent-rgb), 1); } body[data-game-theme-active='1'] .site-breadcrumbs__current, body[data-game-theme-active='1'] .page-subheader__eyebrow, body[data-game-theme-active='1'] .server-info-section__title, body[data-game-theme-active='1'] .vote-section-title { color: rgba(var(--site-theme-accent-rgb), 0.98); } body[data-game-theme-active='1'] .server-taxonomy-chip, body[data-game-theme-active='1'] .vote-summary__chip, body[data-game-theme-active='1'] .server-card__about-badge, body[data-game-theme-active='1'] .advertise-game-page__value-badge { border-color: rgba(var(--site-theme-accent-rgb), 0.34); background: linear-gradient(165deg, rgba(var(--site-theme-accent-rgb), 0.18) 0%, rgba(var(--site-theme-accent-rgb), 0.08) 100%); } body[data-game-theme-active='1'] .server-tab-panel, body[data-game-theme-active='1'] .server-tab-panel .card-header, body[data-game-theme-active='1'] .vote-context-card, body[data-game-theme-active='1'] .vote-reward-callout, body[data-game-theme-active='1'] .server-info-section--narrative, body[data-game-theme-active='1'] .server-media-embed { border-color: rgba(var(--site-theme-accent-rgb), 0.28); } main { display: block; } h1, h2, h3, h4, h5, h6 { color: var(--color-primary-dark); font-weight: 600; line-height: 1.25; margin-bottom: var(--space-3); } h1 { font-size: 1.875rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } p, ul, ol, table, form { margin-bottom: var(--space-4); } p:last-child, ul:last-child, ol:last-child, table:last-child, form:last-child { margin-bottom: 0; } a { color: var(--color-link); } a:hover { color: var(--color-link-hover); } small { color: var(--color-text-muted); } label { display: inline-block; font-weight: 500; margin-bottom: var(--space-2); cursor: pointer; } input, textarea, select { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.625rem 0.75rem; background: var(--color-input-bg); color: var(--color-text-primary); } input[type='checkbox'], input[type='radio'] { width: auto; min-width: 1rem; min-height: 1rem; margin-right: 0.35rem; } input:focus, textarea:focus, select:focus { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-color: var(--color-accent-orange); } table { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; } th, td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; } thead th { background: var(--color-bg-soft); color: var(--color-primary-dark); font-weight: 600; } tbody tr:last-child td { border-bottom: 0; } @media (max-width: 760px) { table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; } } /**/ .app-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; margin-bottom: 0; } .site-header { background: var(--color-header-bg); backdrop-filter: blur(10px); color: var(--color-header-chip-text); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.2); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--color-header-border); } .site-header__inner, .site-footer__inner, .main-container { width: min(1100px, 100% - 2rem); margin-inline: auto; } .site-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 3.55rem; padding-block: 0.34rem; margin-bottom: 0; } .global-header__left { display: flex; align-items: center; gap: var(--space-4); min-width: 0; margin-bottom: 0; } .brand-link { color: var(--color-white); display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; white-space: nowrap; line-height: 1; transition: opacity var(--motion-base) var(--motion-ease); } .brand-link:hover { opacity: 0.92; } .brand-link__icon { display: block; width: auto; height: 1.62rem; flex: 0 0 auto; } .brand-link__text { display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.98rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1; } .global-header__brand .brand-link__icon { height: 3.05rem; } .global-header__brand .brand-link__text { font-size: 1.06rem; transform: translateY(2px); } .global-header__brand { gap: 0.12rem; } .site-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.24rem; margin-bottom: 0; } .site-nav a { display: inline-flex; align-items: center; justify-content: center; color: var(--color-header-text); font-size: 0.9rem; font-weight: 500; line-height: 1; min-height: 1.92rem; padding: 0.26rem 0.58rem; border: 1px solid transparent; border-radius: var(--radius-pill); margin-bottom: 0; transition: color var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease), background-color var(--motion-base) var(--motion-ease); } .site-nav a:hover { color: var(--color-header-chip-text); border-color: var(--color-header-hover-border); background: var(--color-header-hover-bg); } .site-header__auth { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: var(--space-2); margin-bottom: 0; } .site-header__auth > * { margin-bottom: 0; } .site-header__auth .btn { border-color: var(--color-header-chip-border); color: var(--color-header-chip-text); min-height: 1.96rem; padding: 0.34rem 0.78rem; font-size: 0.88rem; line-height: 1; border-radius: var(--radius-pill); margin-bottom: 0; } .site-header__auth .btn-secondary { color: #102033; border-color: var(--color-accent-orange); } .global-header__wallet { margin-bottom: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 1.96rem; gap: 0.4rem; border: 1px solid var(--color-header-chip-border); border-radius: var(--radius-pill); background: var(--color-header-chip-bg); color: var(--color-header-chip-text); padding: 0.35rem 0.7rem; line-height: 1.1; white-space: nowrap; list-style: none; cursor: pointer; } .global-header__wallet-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; } .global-header__wallet--guest { align-self: center; } .global-header__wallet:hover { color: var(--color-header-chip-text); border-color: var(--color-header-chip-hover-border); background: var(--color-header-chip-hover-bg); } .global-header__wallet:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .global-header__wallet-buy { display: inline-flex; align-items: center; justify-content: center; min-height: 1.85rem; padding: 0.2rem 0.6rem; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; } .global-header__wallet-buy:hover { color: #fff; border-color: rgba(255, 255, 255, 0.48); background: rgba(255, 255, 255, 0.18); } .global-header__wallet-label { display: inline-flex; align-items: center; font-size: 0.75rem; color: var(--color-header-text); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; } .global-header__wallet-value { display: inline-flex; align-items: center; gap: 0.34rem; font-size: 0.92rem; font-weight: 500; line-height: 1; } .global-header__wallet-value .ui-icon { display: block; width: 0.95em; height: 0.95em; flex: 0 0 auto; } .global-header__wallet-value [data-header-wallet-balance-number] { display: inline-block; line-height: 1; } .global-header__wallet-value.is-updating { color: #1f7a43; text-shadow: 0 0 0 rgba(31, 122, 67, 0.18); animation: wallet-balance-pulse 0.72s ease; } .global-header__wallet-reward-toast { position: absolute; top: calc(100% + 0.4rem); left: 0; margin: 0; padding: 0.34rem 0.64rem; border-radius: 0.62rem; background: #1f7a43; border: 1px solid #1a6b3a; color: #f4fff8; font-size: 0.76rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.01em; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(8px) scale(0.985); box-shadow: 0 10px 20px rgba(12, 51, 30, 0.28); z-index: 160; } .global-header__wallet-reward-toast.is-visible { animation: wallet-reward-toast 3.95s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes wallet-reward-toast { 0% { opacity: 0; transform: translateY(8px) scale(0.985); } 16% { opacity: 1; transform: translateY(0) scale(1); } 76% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-5px) scale(0.995); } } @keyframes wallet-balance-pulse { 0% { transform: translateY(0) scale(1); text-shadow: 0 0 0 rgba(31, 122, 67, 0.2); } 45% { transform: translateY(-1px) scale(1.03); text-shadow: 0 0 10px rgba(31, 122, 67, 0.26); } 100% { transform: translateY(0) scale(1); text-shadow: 0 0 0 rgba(31, 122, 67, 0.18); } } .global-header__notifications { position: relative; width: auto; border: 1px solid var(--color-header-chip-border); border-radius: var(--radius-pill); background: var(--color-header-chip-bg); color: var(--color-header-text); font-size: 0.82rem; font-weight: 500; line-height: 1.1; padding: 0.35rem 0.68rem; cursor: pointer; } .global-account-menu, .global-notifications-menu, .global-wallet-menu, .global-mobile-nav { margin-bottom: 0; position: relative; } .global-account-menu > summary, .global-notifications-menu > summary, .global-mobile-nav > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; border: 1px solid var(--color-header-chip-border); border-radius: var(--radius-pill); background: var(--color-header-chip-bg); color: var(--color-header-chip-text); padding: 0.36rem 0.72rem; font-size: 0.86rem; font-weight: 600; line-height: 1.1; cursor: pointer; margin-bottom: 0; transition: border-color var(--motion-base) var(--motion-ease), background-color var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease); } .global-account-menu > summary:hover, .global-notifications-menu > summary:hover, .global-mobile-nav > summary:hover { border-color: var(--color-header-chip-hover-border); background: var(--color-header-chip-hover-bg); } .global-account-menu > summary:focus-visible, .global-notifications-menu > summary:focus-visible, .global-mobile-nav > summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .global-mobile-nav__toggle { width: 2.15rem; height: 2.15rem; padding: 0; gap: 0; } .global-mobile-nav__toggle .ui-icon { width: 1.05rem; height: 1.05rem; } .global-header__account-icon { display: none; } .global-account-menu > summary::-webkit-details-marker, .global-notifications-menu > summary::-webkit-details-marker, .global-wallet-menu > summary::-webkit-details-marker, .global-mobile-nav > summary::-webkit-details-marker { display: none; } .global-wallet-menu > summary::marker { content: ''; } .global-account-menu[open] > summary, .global-notifications-menu[open] > summary, .global-mobile-nav[open] > summary { border-color: var(--color-header-chip-hover-border); background: var(--color-header-chip-hover-bg); } .global-wallet-menu[open] > summary { border-color: var(--color-header-chip-hover-border); background: var(--color-header-chip-hover-bg); } .global-account-menu__panel, .global-notifications-menu__panel, .global-wallet-menu__panel, .global-mobile-nav__panel { margin-bottom: 0; border: 1px solid var(--color-menu-border); border-radius: var(--radius-md); background: var(--color-menu-bg); box-shadow: var(--shadow-md); padding: 0.42rem; } .global-account-menu__panel { position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 13rem; z-index: 140; } .global-notifications-menu__panel { position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(22rem, calc(100vw - 1.5rem)); z-index: 140; } .global-wallet-menu__panel { position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(15rem, calc(100vw - 1.5rem)); z-index: 140; display: grid; gap: 0.2rem; } .global-wallet-menu.is-ready > .global-wallet-menu__panel { opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 170ms ease, transform 170ms ease; } .global-wallet-menu.is-ready[open].is-open > .global-wallet-menu__panel { opacity: 1; transform: translateY(0); pointer-events: auto; } .global-wallet-menu.is-ready[open].is-closing > .global-wallet-menu__panel { opacity: 0; transform: translateY(-6px); pointer-events: none; } .global-wallet-menu__title { margin: 0; padding: 0.36rem 0.5rem 0.26rem; font-size: 0.78rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .global-wallet-menu__link { display: flex; align-items: center; width: 100%; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--color-primary-dark); font-size: 0.88rem; font-weight: 500; line-height: 1.2; padding: 0.5rem 0.58rem; margin-bottom: 0; } .global-wallet-menu__link:hover { background: var(--color-menu-link-hover); color: var(--color-text-primary); } .global-wallet-menu__upsell { margin: 0.22rem 0.08rem 0.08rem; padding: 0.42rem 0.48rem 0.1rem; border-top: 1px solid var(--color-menu-border); color: var(--color-text-muted); font-size: 0.75rem; line-height: 1.3; } .global-wallet-menu__upsell a { color: var(--color-primary-dark); font-weight: 600; } .global-notifications-menu.is-ready > .global-notifications-menu__panel { opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 170ms ease, transform 170ms ease; } .global-notifications-menu.is-ready[open].is-open > .global-notifications-menu__panel { opacity: 1; transform: translateY(0); pointer-events: auto; } .global-notifications-menu.is-ready[open].is-closing > .global-notifications-menu__panel { opacity: 0; transform: translateY(-6px); pointer-events: none; } .global-account-menu__panel a, .global-mobile-nav__panel a, .global-account-menu__logout { display: flex; align-items: center; width: 100%; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--color-primary-dark); font-size: 0.9rem; font-weight: 500; line-height: 1.2; padding: 0.55rem 0.65rem; margin-bottom: 0; box-shadow: none; text-align: left; } .global-account-menu__panel a:hover, .global-mobile-nav__panel a:hover, .global-account-menu__logout:hover { background: var(--color-menu-link-hover); color: var(--color-text-primary); transform: none; } .global-account-menu__panel form { margin-bottom: 0; } .global-notifications-menu__count { min-width: 1rem; height: 1rem; border-radius: 999px; padding: 0 0.22rem; background: var(--color-accent-coral); color: #fff; font-size: 0.66rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; opacity: 1; transform: translateY(0) scale(1); transition: opacity 160ms ease, transform 160ms ease; } .global-notifications-menu__count.is-fading-out { opacity: 0; transform: translateY(-2px) scale(0.85); } .global-notifications-menu__head { margin: 0; padding: 0.36rem 0.5rem 0.48rem; display: flex; align-items: center; justify-content: flex-start; } .global-notifications-menu__title { margin: 0; font-size: 0.78rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .global-notifications-menu__empty { margin: 0; padding: 0.5rem 0.5rem 0.7rem; display: grid; gap: 0.22rem; } .global-notifications-menu__empty-title { margin: 0; color: var(--color-text-primary); font-size: 0.85rem; font-weight: 600; line-height: 1.3; } .global-notifications-menu__empty-subtitle { margin: 0; color: var(--color-text-muted); font-size: 0.78rem; line-height: 1.35; } .global-notifications-menu__empty-actions { margin: 0.18rem 0 0; } .global-notifications-menu__empty-actions .btn { min-height: 1.7rem; padding: 0.28rem 0.58rem; font-size: 0.74rem; border-radius: var(--radius-pill); } .global-notifications-menu__list { list-style: none; margin: 0; padding: 0; max-height: 19rem; overflow: auto; } .global-notifications-menu__item { margin: 0; padding: 0.5rem; border-top: 1px solid var(--color-menu-border); background: transparent; opacity: 1; transform: translateY(0); transition: opacity 150ms ease, transform 150ms ease, border-color var(--motion-base) var(--motion-ease), background-color var(--motion-base) var(--motion-ease); } .global-notifications-menu__item.is-clearing { opacity: 0; transform: translateY(-4px); } .global-notifications-menu__item--unread { background: rgba(238, 168, 73, 0.08); } .global-notifications-menu__item:hover, .global-notifications-menu__item:focus-within { border-top-color: var(--color-border); } .global-notifications-menu__item-row { display: flex; align-items: flex-start; gap: var(--space-2); } .global-notifications-menu__item-body { min-width: 0; flex: 1 1 auto; } .global-notifications-menu__dismiss { width: 1.65rem; height: 1.65rem; min-height: 1.65rem; border-radius: var(--radius-pill); border: 1px solid var(--color-menu-border); background: transparent; color: var(--color-text-muted); box-shadow: none; padding: 0; flex: 0 0 auto; } .global-notifications-menu__dismiss:hover { background: var(--color-menu-link-hover); border-color: var(--color-border); color: var(--color-text-primary); transform: none; box-shadow: none; } .global-notifications-menu__dismiss:disabled { opacity: 0.5; cursor: default; } .global-notifications-menu__item-link { display: block; border-radius: var(--radius-sm); padding: 0.12rem; color: inherit; transition: background-color var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease); } .global-notifications-menu__item-link:hover { background: var(--color-menu-link-hover); color: inherit; } .global-notifications-menu__item-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .global-notifications-menu__item-title { margin: 0; color: var(--color-text-primary); font-size: 0.85rem; font-weight: 600; line-height: 1.25; display: inline-flex; align-items: center; gap: 0.38rem; } .global-notifications-menu__item-dot { width: 0.42rem; height: 0.42rem; border-radius: 999px; background: var(--color-accent-coral); box-shadow: 0 0 0 2px rgba(244, 107, 69, 0.15); flex: 0 0 auto; } .global-notifications-menu__item-summary { margin: 0.2rem 0 0; color: var(--color-text-muted); font-size: 0.78rem; line-height: 1.35; } .global-notifications-menu__item-meta { margin: 0.28rem 0 0; color: var(--color-text-muted); font-size: 0.72rem; line-height: 1.2; } .global-notifications-menu__item-cta { margin-left: 0.5rem; color: var(--color-primary-dark); font-weight: 600; } .global-notifications-menu__footer { margin: 0; padding: 0.45rem 0.5rem 0.3rem; border-top: 1px solid var(--color-menu-border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; } .global-notifications-menu__footer a { color: var(--color-primary-dark); font-size: 0.82rem; font-weight: 600; } .global-notifications-menu__footer a:hover { color: var(--color-text-primary); } .global-notifications-menu__clear-all { border: 1px solid var(--color-menu-border); background: transparent; color: var(--color-primary-dark); border-radius: var(--radius-pill); padding: 0.18rem 0.52rem; min-height: 1.65rem; font-size: 0.72rem; font-weight: 600; line-height: 1; box-shadow: none; } .global-notifications-menu__clear-all:hover { background: var(--color-menu-link-hover); border-color: var(--color-border); transform: none; box-shadow: none; } .global-notifications-menu__clear-all:disabled { opacity: 0.55; cursor: default; } @media (max-width: 700px) { .global-notifications-menu__footer { flex-direction: column; align-items: stretch; } .global-notifications-menu__clear-all { width: 100%; justify-content: center; } } .global-mobile-nav { display: none; } .global-mobile-nav__panel { position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(19rem, calc(100vw - 1rem)); max-height: calc(100vh - 5.5rem); max-height: calc(100dvh - 5.5rem); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; z-index: 140; } .global-mobile-nav__divider { display: block; height: 1px; margin: 0.42rem 0; background: var(--color-menu-border); } .global-mobile-nav__section-label { margin: 0.5rem 0.6rem 0.24rem; color: var(--color-text-muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; line-height: 1.2; text-transform: uppercase; } .global-mobile-nav__panel .dashboard-nav a { align-items: flex-start; padding: 0.45rem 0.6rem; font-size: 0.86rem; line-height: 1.3; overflow-wrap: anywhere; } .global-mobile-nav__panel .dashboard-nav a .ui-icon { flex: 0 0 auto; margin-top: 0.06rem; } .global-mobile-nav__panel .dashboard-nav { list-style: none; margin: 0; padding: 0; } .global-mobile-nav__panel .dashboard-nav li { margin: 0; } .global-mobile-nav__panel .dashboard-nav li + li { margin-top: 0.08rem; } .global-mobile-nav__panel .dashboard-sidebar__group { margin: 0.2rem 0; } .global-mobile-nav__panel .dashboard-sidebar__group-summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; margin: 0; padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); color: inherit; font-size: 0.86rem; line-height: 1.2; } .global-mobile-nav__panel .dashboard-sidebar__group-summary:hover { background: var(--color-menu-link-hover); color: var(--color-text-primary); } .global-mobile-nav__panel .dashboard-sidebar__group-summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .global-mobile-nav__panel .dashboard-sidebar__group-summary::-webkit-details-marker { display: none; } .global-mobile-nav__panel .dashboard-sidebar__group-summary::after { content: "\25B6"; font-size: 0.7em; } .global-mobile-nav__panel .dashboard-sidebar__group[open] > .dashboard-sidebar__group-summary::after { transform: rotate(90deg); } .global-mobile-nav__panel .dashboard-sidebar__group[open] > .dashboard-sidebar__group-summary { margin-bottom: 0.08rem; } .global-mobile-nav__panel .dashboard-sidebar__group[open] > .dashboard-nav { padding-left: 0.35rem; } .global-mobile-nav__panel .dashboard-sidebar__logout-form { margin: 0.55rem 0 0; padding: 0.55rem 0 0.08rem; border-top: 1px solid var(--color-menu-border); } .global-mobile-nav__panel .dashboard-sidebar__logout-form button { width: 100%; } .main-container { flex: 1; padding-block: var(--space-6); } .site-footer { margin-top: auto; margin-bottom: 0; background: linear-gradient(180deg, var(--color-footer-bg-start) 0%, var(--color-footer-bg-end) 100%); border-top: 1px solid var(--color-footer-border); color: var(--color-footer-text); } .site-footer__inner { padding-block: var(--space-4); margin-bottom: 0; } .global-footer__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: var(--space-4); padding-top: var(--space-6); padding-bottom: var(--space-5); } .global-footer h2, .global-footer h3 { color: #ffffff; margin-bottom: var(--space-2); } .global-footer h2 { font-size: 1.08rem; } .global-footer h3 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; } .global-footer__brand p { margin-bottom: 0; color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; max-width: 36ch; } .global-footer__brand-title { margin-bottom: var(--space-2); } .global-footer__brand-link { display: inline-flex; align-items: center; gap: 0.12rem; line-height: 1; color: #ffffff; transition: opacity var(--motion-base) var(--motion-ease); } .global-footer__brand-link:hover { opacity: 0.92; } .global-footer__brand-link .brand-link__icon { height: 3.25rem; } .global-footer__brand-link .brand-link__text { font-size: 1.08rem; transform: translateY(2px); } .global-footer__column { display: grid; gap: 0.32rem; margin-bottom: 0; } .global-footer__column-title { margin-bottom: 0.35rem; color: #ffffff; font-weight: 700; } .global-footer__column a { color: rgba(255, 255, 255, 0.78); font-size: 0.9rem; line-height: 1.25; margin-bottom: 0; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.28rem 0.24rem; border-radius: var(--radius-sm); } .global-footer__column a:hover { color: #ffffff; } .global-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: var(--space-3); padding-bottom: var(--space-4); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); } .global-footer__copyright { margin-bottom: 0; color: rgba(255, 255, 255, 0.66); font-size: 0.84rem; } .global-footer__meta { display: grid; gap: 0.18rem; } .footer-version { margin-bottom: 0; color: rgba(255, 255, 255, 0.56); font-size: 0.72rem; font-weight: 400; line-height: 1.2; } .global-footer__cycle { margin-bottom: 0; color: rgba(255, 255, 255, 0.78); font-size: 0.84rem; text-align: center; } .global-footer__legal { margin-bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); } .global-footer__legal a { color: rgba(255, 255, 255, 0.74); font-size: 0.84rem; margin-bottom: 0; display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.24rem 0.2rem; border-radius: var(--radius-sm); } .global-footer__legal a:hover { color: #ffffff; } .global-footer__social { margin-bottom: 0; display: flex; align-items: center; gap: var(--space-2); } .global-footer__social-link { width: 1.95rem; height: 1.95rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.05); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.82rem; margin-bottom: 0; transition: border-color var(--motion-base) var(--motion-ease), background-color var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease); } .global-footer__social-link .ui-icon { width: 0.98rem; height: 0.98rem; } .global-footer__social-link:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.42); color: #ffffff; } .global-footer__social-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .global-footer__social-link--facebook:hover, .global-footer__social-link--facebook:focus-visible { border-color: rgba(24, 119, 242, 0.72); background: rgba(24, 119, 242, 0.2); color: #dfeeff; } .global-footer__social-link--x:hover, .global-footer__social-link--x:focus-visible { border-color: rgba(255, 255, 255, 0.56); background: rgba(255, 255, 255, 0.14); color: #ffffff; } .global-footer__social-link--youtube:hover, .global-footer__social-link--youtube:focus-visible { border-color: rgba(255, 0, 0, 0.64); background: rgba(255, 0, 0, 0.18); color: #ffe3e3; } @media (max-width: 980px) { .site-header__inner { grid-template-columns: 1fr auto; } .global-header__left { gap: var(--space-3); } .global-nav { display: none; } .global-mobile-nav { display: block; } .global-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .global-footer__brand { grid-column: 1 / -1; } .global-footer__bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--space-2); } } @media (max-width: 700px) { .site-header__inner, .site-footer__inner, .main-container { width: min(1100px, 100% - 1.25rem); } .site-header__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 0.42rem; } .global-header__left { min-width: 0; } .global-header__brand { min-width: 0; } .global-header__brand .brand-link__text { font-size: 0.96rem; } .site-header__auth { flex: 0 0 auto; gap: 0.34rem; } .site-header__auth .btn, .global-header__wallet, .global-account-menu > summary, .global-mobile-nav > summary { width: 2.05rem; min-width: 2.05rem; height: 2.05rem; min-height: 2.05rem; padding: 0; border-radius: var(--radius-pill); gap: 0; flex: 0 0 auto; } .site-header__auth .btn .ui-icon, .global-header__wallet .ui-icon, .global-mobile-nav__toggle .ui-icon { width: 1.02rem; height: 1.02rem; } .global-header__wallet-label, .global-header__wallet-amount, .global-header__wallet-units, .global-header__account-label, .global-header__auth-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .global-header__wallet-value { gap: 0; } .global-header__account-icon { display: inline-flex; align-items: center; justify-content: center; } .global-header__account-icon .ui-icon { width: 1.02rem; height: 1.02rem; } .global-header__wallet-reward-toast { font-size: 0.72rem; padding: 0.32rem 0.56rem; max-width: min(78vw, 16rem); white-space: normal; } .global-header__wallet-buy { padding-inline: 0.52rem; } .global-header__wallet-value { font-size: 0.83rem; } .global-header__notifications { display: none; } .global-notifications-menu__panel { right: -0.2rem; } .global-wallet-menu__panel { right: -0.2rem; } .global-footer__inner { grid-template-columns: 1fr; gap: var(--space-3); } .global-footer__brand { grid-column: auto; } .global-footer__legal { gap: var(--space-2); } .global-header__brand .brand-link__icon { height: 1.92rem; } .global-footer__brand-link .brand-link__icon { height: 2.42rem; } .global-footer__brand-link .brand-link__text { font-size: 1.01rem; transform: translateY(2px); } } @media (max-width: 380px) { .site-header__inner { width: min(1100px, 100% - 0.8rem); gap: 0.28rem; } .site-header__auth { gap: 0.26rem; } .site-header__auth .btn, .global-header__wallet, .global-account-menu > summary, .global-mobile-nav > summary { width: 1.92rem; min-width: 1.92rem; height: 1.92rem; min-height: 1.92rem; } .global-header__brand .brand-link__icon { height: 1.72rem; } .global-header__brand .brand-link__text { font-size: 0.88rem; } .global-header__auth-link--register { order: 1; } .global-header__auth-link--login, .global-account-menu { order: 2; } .global-mobile-nav { order: 3; } .global-header__wallet-wrap, .global-header__wallet--guest { order: 5; } } @media (prefers-reduced-motion: reduce) { .global-wallet-menu.is-ready > .global-wallet-menu__panel, .global-wallet-menu.is-ready[open].is-open > .global-wallet-menu__panel, .global-wallet-menu.is-ready[open].is-closing > .global-wallet-menu__panel, .global-notifications-menu.is-ready > .global-notifications-menu__panel, .global-notifications-menu.is-ready[open].is-open > .global-notifications-menu__panel, .global-notifications-menu.is-ready[open].is-closing > .global-notifications-menu__panel { transition: none; transform: none; } .global-header__wallet-reward-toast.is-visible { animation: none; opacity: 1; transform: none; } } /**/ /**/ .btn, button, input[type='submit'] { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-sm); border: 1px solid transparent; padding: 0.64rem 1.05rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; cursor: pointer; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08); } .btn-primary, button, input[type='submit'] { background: linear-gradient(160deg, #4b5968 0%, #3c4857 100%); border-color: #34404e; color: #fff; } .btn-secondary { background: linear-gradient(160deg, #f3b45f 0%, #eea849 100%); border-color: #df983a; color: #3c4857; } .btn-outline { background: var(--color-btn-outline-bg); border-color: var(--color-btn-outline-border); color: var(--color-btn-outline-text); } .ui-inline { display: inline-flex; align-items: center; gap: 0.45rem; } .ui-icon { width: 1em; height: 1em; flex: 0 0 auto; } .ui-icon--sm { width: 0.95em; height: 0.95em; } .ui-icon--lg { width: 1.1em; height: 1.1em; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .section-stack { display: grid; gap: var(--space-5); } .hero { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: linear-gradient(140deg, #ffffff 0%, #fff4e6 100%); box-shadow: var(--shadow-sm); padding: var(--space-4); } .homepage-hero { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); padding-block: clamp(0.95rem, 2vw, 1.3rem); width: 100%; max-width: 100%; box-sizing: border-box; } .homepage-hero__content { min-width: 0; max-width: 100%; box-sizing: border-box; } .homepage-directory .hero.homepage-hero { padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1.5rem, 3vw, 2rem); background-image: linear-gradient(135deg, rgba(48, 78, 108, 0.28), rgba(20, 39, 60, 0.13) 58%, rgba(65, 90, 116, 0.2)), linear-gradient(90deg, rgba(10, 18, 28, 0.08), rgba(10, 18, 28, 0.02) 58%, rgba(10, 18, 28, 0.07)), url('/assets/images/components/01_background_only_clean.png'); background-image: linear-gradient(135deg, rgba(48, 78, 108, 0.28), rgba(20, 39, 60, 0.13) 58%, rgba(65, 90, 116, 0.2)), linear-gradient(90deg, rgba(10, 18, 28, 0.08), rgba(10, 18, 28, 0.02) 58%, rgba(10, 18, 28, 0.07)), image-set(url('/assets/images/components/01_background_only_clean.webp?rev=b8c3870ace940749') type('image/webp'), url('/assets/images/components/01_background_only_clean.png') type('image/png')); background-size: cover; background-position: center; background-repeat: no-repeat; background-blend-mode: screen, normal, normal; } .homepage-hero__eyebrow, .homepage-section__kicker { margin: 0; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: #52606d; } .homepage-directory .homepage-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.08rem; margin-bottom: 0.35rem; color: var(--color-accent-orange); } .homepage-hero__eyebrow-marker { display: block; width: 2.65em; height: 2.65em; object-fit: contain; flex: 0 0 auto; } .hero__title { margin: 0; font-size: clamp(1.6rem, 3.8vw, 2.2rem); overflow-wrap: anywhere; } .homepage-directory .homepage-hero .hero__title { max-width: 100%; font-size: clamp(1.85rem, 5.2vw, 3.05rem); line-height: 1.08; white-space: normal; overflow-wrap: anywhere; word-break: normal; } .homepage-hero__title-divider { display: block; width: min(34rem, 100%); height: 0.72rem; margin: -0.24rem 0 0.02rem; background: url('/assets/images/components/05_glowing_underline_accent_transparent.png') center / 100% 100% no-repeat; } .hero__subtitle { margin: 0; color: var(--color-text-muted); } .homepage-hero__actions { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: 100%; min-width: 0; box-sizing: border-box; } .homepage-hero__actions .btn { max-width: 100%; min-width: 0; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; } .homepage-hero__button-icon { display: block; width: 1.1em; height: 1.1em; object-fit: contain; flex: 0 0 auto; } .homepage-hero__promo-link { margin-top: 0.25rem; } .homepage-directory .homepage-hero .hero__title { margin-bottom: 0.45rem; } .homepage-directory .homepage-hero .hero__subtitle { margin-bottom: 0.75rem; } .homepage-hero__promo-anchor { display: inline-grid; gap: 0.14rem; max-width: 100%; text-decoration: none; } .homepage-hero__promo-text { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; } .homepage-hero__promo-text span { min-width: 0; overflow-wrap: anywhere; } .homepage-hero__promo-icon { display: block; width: 2.15em; height: 2.15em; object-fit: contain; flex: 0 0 auto; } .homepage-hero__promo-underline { display: block; width: 100%; max-width: none; height: 0.62rem; background: url('/assets/images/components/06_dotted_underline_accent_transparent.png') center / 100% 100% no-repeat; } .homepage-hero__stats { display: grid; gap: var(--space-2); align-content: start; min-width: 0; max-width: 100%; box-sizing: border-box; } .homepage-hero__stats-title { margin: 0; font-size: 1.05rem; } .platform-stats-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); width: 100%; max-width: 100%; box-sizing: border-box; } .platform-stat-card { margin: 0; padding: var(--space-3); border: 1px solid #d4deea; border-radius: var(--radius-sm); background: linear-gradient(160deg, #f9fbfe 0%, #edf3f9 100%); display: grid; gap: 0.2rem; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .platform-stat-card h3 { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .platform-stat-card__value { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; color: var(--color-accent-orange); overflow-wrap: anywhere; } .homepage-hero__stats .platform-stat-card__value { color: var(--color-accent-orange); } .platform-stat-card__hint { margin: 0; color: var(--color-text-muted); font-size: 0.8rem; } .homepage-contents { margin: 0; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-card); } .homepage-contents__title { margin: 0 0 var(--space-2) 0; font-size: 1rem; font-weight: 600; } .homepage-contents__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-2); } .homepage-contents__list li, .homepage-contents__list a { margin: 0; } .homepage-section { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-card); box-shadow: var(--shadow-sm); padding: var(--space-4); display: grid; gap: var(--space-3); max-width: 100%; box-sizing: border-box; } .homepage-section--band { background: linear-gradient(180deg, #fff 0%, #fff8f0 100%); } .homepage-section__head, .homepage-section__content { display: grid; gap: var(--space-2); } .homepage-section__head > * { margin: 0; } .homepage-section__lead { margin: 0; color: var(--color-text-muted); font-size: 1rem; line-height: 1.5; } .homepage-entry-links { display: grid; gap: var(--space-2); } .homepage-featured-servers { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid rgba(168, 189, 209, 0.24); position: relative; overflow: visible; } .homepage-featured-server-carousel { position: relative; } .homepage-featured-server-carousel__nav { position: absolute; top: 50%; z-index: 3; display: block; width: 2.15rem; height: 2.15rem; padding: 0; border: 1px solid rgba(243, 180, 95, 0.78); border-radius: 999px; background: rgba(8, 16, 26, 0.86); color: transparent; cursor: pointer; font-size: 0; line-height: 0; transform: translateY(-50%); transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, opacity 160ms ease; } .homepage-featured-server-carousel__nav::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 0.58rem; height: 0.58rem; border-top: 0.16rem solid #ffd391; border-right: 0.16rem solid #ffd391; } .homepage-featured-server-carousel__nav--prev::before { transform: translate(-50%, -50%) rotate(-135deg); } .homepage-featured-server-carousel__nav--next::before { transform: translate(-50%, -50%) rotate(45deg); } .homepage-featured-server-carousel__nav:hover, .homepage-featured-server-carousel__nav:focus-visible { border-color: rgba(255, 211, 145, 0.95); box-shadow: 0 0 18px rgba(243, 180, 95, 0.26); transform: translateY(-50%); } .homepage-featured-server-carousel__nav:active { transform: translateY(-50%); } .homepage-featured-server-carousel__nav[hidden] { display: none; } .homepage-featured-server-carousel__nav--prev { left: -1.45rem; } .homepage-featured-server-carousel__nav--next { right: -1.45rem; } .homepage-featured-server-grid { --featured-server-card-gap: clamp(0.72rem, 1.6vw, 1rem); display: flex; gap: var(--featured-server-card-gap); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .homepage-featured-server-grid::-webkit-scrollbar { display: none; } .homepage-featured-server-card { position: relative; flex: 0 0 calc((100% - (var(--featured-server-card-gap) * 2)) / 3); min-width: 0; border-radius: 0.72rem; background: linear-gradient(165deg, rgba(14, 25, 38, 0.76) 0%, rgba(11, 20, 32, 0.84) 100%); box-shadow: 0 18px 36px rgba(5, 12, 22, 0.3); overflow: hidden; isolation: isolate; scroll-snap-align: start; } .homepage-featured-server-card__body { position: relative; z-index: 1; min-height: 100%; padding: clamp(0.62rem, 1.45vw, 0.9rem); display: grid; gap: 0.58rem; } .homepage-featured-server-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.55rem; } .homepage-featured-server-card__badge { margin: 0; justify-self: start; display: inline-flex; align-items: center; gap: 0.28rem; min-height: 1.62rem; padding: 0.24rem 0.52rem; border: 1px solid rgba(243, 180, 95, 0.8); border-radius: 0.42rem; background: linear-gradient(165deg, rgba(85, 56, 22, 0.76) 0%, rgba(37, 30, 20, 0.72) 100%); color: #f3b45f; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; } .homepage-featured-server-card__badge-icon, .homepage-featured-server-card__action-icon, .homepage-featured-server-card__action-arrow { display: block; flex: 0 0 auto; } .homepage-featured-server-card__badge-icon { width: 1.05rem; height: 1.05rem; } .homepage-featured-server-card__banner { display: block; width: 351px; max-width: 100%; height: 45px; object-fit: contain; border: 1px solid rgba(101, 135, 170, 0.62); border-radius: 0.48rem; background: #0f1c2a; } .homepage-featured-server-card__main { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.62rem; align-items: start; } .homepage-featured-server-card__icon { display: block; width: 3.5rem; height: 3.5rem; border: 1px solid rgba(243, 180, 95, 0.62); border-radius: 0.56rem; background: rgba(255, 255, 255, 0.08); object-fit: cover; } .homepage-featured-server-card__copy { min-width: 0; display: grid; gap: 0.22rem; } .homepage-featured-server-card__copy h3, .homepage-featured-server-card__game { margin: 0; } .homepage-featured-server-card__copy h3 { color: #f6f8fb; font-size: clamp(0.98rem, 1.65vw, 1.18rem); line-height: 1.15; } .homepage-featured-server-card__game { flex: 0 1 auto; min-width: 0; max-width: 48%; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; color: #f3b45f; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .homepage-featured-server-card__copy-ip { width: 100%; max-width: 13rem; min-height: 2.08rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.34rem; align-items: center; margin: 0.02rem 0; padding: 0.34rem 0.48rem; border-color: rgba(243, 180, 95, 0.5); background: rgba(7, 15, 24, 0.58); color: #eef5fb; box-shadow: none; } .homepage-featured-server-card__copy-ip.server-ip-copy-box.is-copying, .homepage-featured-server-card__copy-ip.server-ip-copy-box.is-copied { border-color: rgba(131, 198, 165, 0.72); background: rgba(7, 15, 24, 0.58); color: #eef5fb; } .homepage-featured-server-card__copy-ip .server-ip-copy-box__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.76rem; } .homepage-featured-server-card__copy-ip .server-ip-copy-box__hint { display: inline-flex; align-items: center; gap: 0.22rem; color: #f3b45f; font-size: 0.7rem; font-weight: 800; white-space: nowrap; } .homepage-featured-server-card__action { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr) 2rem; align-items: center; gap: 0.42rem; min-height: 2.42rem; margin-top: auto; padding: 0.44rem 0.62rem; border: 1px solid rgba(243, 180, 95, 0.72); border-radius: 0.44rem; background: linear-gradient(165deg, rgba(22, 31, 43, 0.78) 0%, rgba(14, 24, 35, 0.84) 100%); color: #f3b45f; font-weight: 800; text-decoration: none; } .homepage-featured-server-card__action:hover { color: #ffd391; border-color: rgba(255, 204, 128, 0.92); box-shadow: 0 0 18px rgba(243, 180, 95, 0.22); text-decoration: none; } .homepage-featured-server-card__action-icon { width: 1.45rem; height: 1.45rem; } .homepage-featured-server-card__action-arrow { width: 2rem; height: auto; justify-self: end; } .state-message { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); background: var(--color-bg-soft); } .state-message--empty { color: var(--color-text-muted); } .homepage-empty-state, .homepage-empty-state__hint, .homepage-empty-state__actions { margin: 0; } .homepage-game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); } .game-accent { --game-accent: var(--color-accent-coral); --game-accent-rgb: 244, 107, 69; } .homepage-game-card { border: 1px solid rgba(var(--game-accent-rgb), 0.28); border-radius: var(--radius-md); background: linear-gradient(160deg, rgba(var(--game-accent-rgb), 0.09) 0%, rgba(var(--game-accent-rgb), 0.03) 100%); padding: var(--space-3); display: grid; gap: var(--space-2); position: relative; overflow: hidden; isolation: isolate; max-width: 100%; box-sizing: border-box; } .homepage-game-card > * { position: relative; z-index: 1; } .homepage-game-card--has-bg { border-color: rgba(var(--game-accent-rgb), 0.48); background: var(--game-card-bg-image); background-position: center; background-size: cover; color: #ffffff; } .homepage-game-card--has-bg::before { content: none; } .homepage-game-card h3, .homepage-game-card p { margin: 0; } .homepage-game-card__visual { width: 6.8rem; height: 6.8rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--game-accent-rgb), 0.28); border-radius: var(--radius-md); background: #fff; padding: 0.14rem; } .homepage-game-card__logo, .homepage-game-card__visual > .game-logo, .homepage-game-card__visual > .game-icon { width: 100%; height: 100%; object-fit: contain; border: 0; background: transparent; box-shadow: none; padding: 0; } .homepage-game-card__count { font-size: 0.92rem; color: #4a6075; font-weight: 600; } .homepage-game-card__meta { font-size: 0.84rem; color: #42566a; } .homepage-game-card__actions { margin: 0; display: flex; flex-wrap: wrap; gap: 0.44rem; max-width: 100%; min-width: 0; } .homepage-game-card__actions .btn { min-width: 0; max-width: 100%; white-space: normal; } .homepage-game-card--has-bg h3, .homepage-game-card--has-bg .homepage-game-card__count, .homepage-game-card--has-bg .homepage-game-card__meta, .homepage-game-card--has-bg .ui-inline { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42); } .homepage-game-card--has-bg .homepage-game-card__visual { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.9); box-shadow: 0 10px 22px rgba(7, 13, 20, 0.26); } .homepage-section.homepage-faq-section { border: 0; background: transparent; box-shadow: none; padding: clamp(1.25rem, 3vw, 2rem) 0 0; gap: clamp(1.35rem, 2.6vw, 2rem); } .homepage-faq-section .homepage-section__head { justify-items: center; gap: 0.55rem; text-align: center; } .homepage-faq-section__label { display: grid; grid-template-columns: minmax(2.6rem, 4.25rem) auto minmax(2.6rem, 4.25rem); align-items: center; gap: 0.8rem; margin: 0; color: #f57b57; font-size: 0.9rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; } .homepage-faq-section__label::before, .homepage-faq-section__label::after { content: ''; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(245, 123, 87, 0) 0%, rgba(243, 180, 95, 0.94) 100%); box-shadow: 0 0 12px rgba(243, 180, 95, 0.42); } .homepage-faq-section__label::after { background: linear-gradient(90deg, rgba(243, 180, 95, 0.94) 0%, rgba(245, 123, 87, 0) 100%); } .homepage-faq-section .homepage-section__head h2 { color: #f5f8fc; font-size: clamp(2.35rem, 5.5vw, 4.15rem); line-height: 1.02; text-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); } .homepage-faq-section .homepage-section__lead { max-width: 48rem; color: #aebdca; font-size: clamp(1rem, 1.8vw, 1.18rem); line-height: 1.5; } .homepage-support-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) 1px minmax(15rem, 0.8fr); align-items: center; gap: clamp(1.25rem, 3vw, 2.35rem); margin-top: var(--space-3); padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.5vw, 1.8rem); border: 1px solid rgba(120, 143, 168, 0.45); border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(255, 168, 62, 0.1) 0%, rgba(255, 168, 62, 0) 48%), linear-gradient(145deg, #1b2a3a 0%, #142233 100%); box-shadow: inset 0 1px 0 rgba(255, 185, 93, 0.22), 0 12px 26px rgba(5, 12, 22, 0.28); overflow: hidden; } .homepage-support-cta::before { content: ''; position: absolute; inset: 0.08rem 0.55rem auto; height: 1px; background: linear-gradient(90deg, rgba(255, 170, 74, 0) 0%, rgba(255, 170, 74, 0.78) 62%, rgba(255, 170, 74, 0) 100%); opacity: 0.85; pointer-events: none; } .homepage-support-cta__message { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1rem, 2vw, 1.45rem); min-width: 0; } .homepage-support-cta__icon { display: inline-grid; place-items: center; width: clamp(4.75rem, 8vw, 5.75rem); height: clamp(4.75rem, 8vw, 5.75rem); border: 1px solid rgba(241, 151, 54, 0.5); border-radius: 999px; background: radial-gradient(circle at 50% 42%, rgba(255, 168, 62, 0.22) 0%, rgba(255, 168, 62, 0.08) 46%, rgba(10, 18, 28, 0.54) 100%); box-shadow: 0 0 26px rgba(240, 143, 45, 0.18), inset 0 0 16px rgba(255, 176, 72, 0.12); flex: 0 0 auto; } .homepage-support-cta__icon img { display: block; width: 62%; height: 62%; object-fit: contain; } .homepage-support-cta__copy { min-width: 0; } .homepage-support-cta__copy h3, .homepage-support-cta__copy p, .homepage-support-cta__action p { margin: 0; } .homepage-support-cta__copy h3 { color: #f5f8fc; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.18; } .homepage-support-cta__copy p { margin-top: 0.35rem; max-width: 27rem; color: #b8c6d5; font-size: clamp(0.92rem, 1.35vw, 1rem); line-height: 1.45; } .homepage-support-cta__divider { width: 1px; height: min(4.75rem, 100%); background: linear-gradient(180deg, rgba(117, 140, 164, 0) 0%, rgba(117, 140, 164, 0.72) 50%, rgba(117, 140, 164, 0) 100%); } .homepage-support-cta__action { display: grid; justify-items: center; gap: 0.5rem; min-width: 0; } .homepage-support-cta__button { width: min(100%, 18.5rem); min-height: 3.2rem; padding: 0.82rem 1.25rem; border: 1px solid rgba(255, 177, 82, 0.4); border-radius: var(--radius-sm); background: linear-gradient(120deg, #ffae35 0%, #ff8c32 45%, #ff5147 100%); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 18px rgba(255, 110, 50, 0.2); } .homepage-support-cta__button:hover, .homepage-support-cta__button:focus-visible { color: #fff; text-decoration: none; filter: brightness(1.04); } .homepage-support-cta__action p { color: #aebdca; font-size: 0.88rem; line-height: 1.35; text-align: center; } .server-badge-gold { display: inline-flex; align-items: center; gap: 0.25rem; border: 1px solid #dfb42f; border-radius: 999px; background: linear-gradient(180deg, #fff4cc 0%, #f2da8a 100%); color: #6d4e00; font-size: 0.72rem; font-weight: 700; line-height: 1; padding: 0.18rem 0.42rem; } .server-badge-gold__star, .server-badge-gold__label { display: inline-flex; margin: 0; } @media (max-width: 900px) { .homepage-hero { grid-template-columns: 1fr; } .homepage-featured-server-card { flex-basis: calc((100% - var(--featured-server-card-gap)) / 2); } .homepage-support-cta { grid-template-columns: 1fr; justify-items: center; text-align: center; } .homepage-support-cta__divider { width: min(100%, 26rem); height: 1px; background: linear-gradient(90deg, rgba(117, 140, 164, 0) 0%, rgba(117, 140, 164, 0.72) 50%, rgba(117, 140, 164, 0) 100%); } .homepage-support-cta__copy p { max-width: 32rem; } } @media (max-width: 768px) { .page-hierarchy.homepage-directory, .page-hierarchy.homepage-directory .hero.homepage-hero, .page-hierarchy.homepage-directory .homepage-hero__content, .page-hierarchy.homepage-directory .homepage-hero__stats, .page-hierarchy.homepage-directory .homepage-section, .page-hierarchy.homepage-directory .homepage-section__head, .page-hierarchy.homepage-directory .homepage-section__content, .page-hierarchy.homepage-directory .card, .page-hierarchy.homepage-directory .card-body, .page-hierarchy.homepage-directory .homepage-game-grid, .page-hierarchy.homepage-directory .homepage-game-card, .page-hierarchy.homepage-directory .homepage-growth-cta__cards, .page-hierarchy.homepage-directory .homepage-growth-card, .page-hierarchy.homepage-directory .platform-stats-grid, .page-hierarchy.homepage-directory .platform-stat-card { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; } .page-hierarchy.homepage-directory .hero.homepage-hero { padding: clamp(0.9rem, 4vw, var(--space-3)) clamp(0.75rem, 3.5vw, var(--space-3)); } .page-hierarchy.homepage-directory .homepage-hero .hero__title { font-size: clamp(1.7rem, 8vw, 2.4rem); line-height: 1.08; overflow-wrap: normal; word-break: normal; } .page-hierarchy.homepage-directory .homepage-hero__actions, .page-hierarchy.homepage-directory .homepage-empty-state__actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100%; } .page-hierarchy.homepage-directory .homepage-hero__actions .btn, .page-hierarchy.homepage-directory .homepage-empty-state__actions .btn { width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; } .page-hierarchy.homepage-directory .homepage-hero__promo-anchor, .page-hierarchy.homepage-directory .homepage-hero__promo-text { max-width: 100%; min-width: 0; } .page-hierarchy.homepage-directory .homepage-hero__promo-text span { min-width: 0; overflow-wrap: anywhere; } .page-hierarchy.homepage-directory .platform-stats-grid, .page-hierarchy.homepage-directory .homepage-game-grid, .page-hierarchy.homepage-directory .homepage-growth-cta__cards { grid-template-columns: minmax(0, 1fr); } .page-hierarchy.homepage-directory .platform-stat-card, .page-hierarchy.homepage-directory .homepage-game-card, .page-hierarchy.homepage-directory .homepage-growth-card { width: 100%; max-width: 100%; min-width: 0; } .page-hierarchy.homepage-directory .homepage-game-card__actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100%; } .page-hierarchy.homepage-directory .homepage-game-card__actions .btn { width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; } .page-hierarchy.homepage-directory .homepage-featured-servers, .page-hierarchy.homepage-directory .homepage-featured-server-carousel, .page-hierarchy.homepage-directory .homepage-featured-server-grid { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; } .page-hierarchy.homepage-directory .homepage-featured-server-carousel__nav--prev { left: 0.35rem; } .page-hierarchy.homepage-directory .homepage-featured-server-carousel__nav--next { right: 0.35rem; } .page-hierarchy.homepage-directory .homepage-featured-server-grid { padding-inline: 0; } .page-hierarchy.homepage-directory .homepage-featured-server-card__main { grid-template-columns: 3.25rem minmax(0, 1fr); } .page-hierarchy.homepage-directory .homepage-featured-server-card { flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .page-hierarchy.homepage-directory .homepage-featured-server-card__icon { width: 3.25rem; height: 3.25rem; } .page-hierarchy.homepage-directory .homepage-game-card__visual { width: 6rem; height: 6rem; } .page-hierarchy.homepage-directory .homepage-support-cta__message { grid-template-columns: 1fr; justify-items: center; } .page-hierarchy.homepage-directory .homepage-faq-section .homepage-section__head h2 { font-size: clamp(2rem, 10vw, 2.85rem); overflow-wrap: anywhere; } } .homepage-hero__stats { border-color: #3b5166; background: linear-gradient(160deg, #19293b 0%, #172638 100%); } .homepage-section { border-color: #3a5168; } .homepage-section--base { background: linear-gradient(165deg, #1a2a3c 0%, #172638 100%); } .homepage-section--elevated { background: linear-gradient(165deg, #192a3d 0%, #152436 100%); } .homepage-section--cta { border-color: #816635; background: linear-gradient(155deg, #3d3019 0%, #4a3a1f 100%); box-shadow: 0 10px 20px rgba(7, 5, 2, 0.35); } .homepage-directory .homepage-section--cta { position: relative; overflow: hidden; display: grid; gap: clamp(1.25rem, 2.4vw, 1.8rem); min-height: clamp(27rem, 50vw, 34rem); padding: clamp(1.6rem, 3vw, 2.3rem); border-color: rgba(243, 180, 95, 0.42); background-color: #101b29; background-image: linear-gradient(90deg, rgba(9, 16, 25, 0.94) 0%, rgba(9, 16, 25, 0.82) 35%, rgba(9, 16, 25, 0.36) 68%, rgba(9, 16, 25, 0.1) 100%), linear-gradient(180deg, rgba(9, 16, 25, 0.08) 0%, rgba(9, 16, 25, 0.72) 100%), url('/assets/images/components/grow-your-community.png'); background-image: linear-gradient(90deg, rgba(9, 16, 25, 0.94) 0%, rgba(9, 16, 25, 0.82) 35%, rgba(9, 16, 25, 0.36) 68%, rgba(9, 16, 25, 0.1) 100%), linear-gradient(180deg, rgba(9, 16, 25, 0.08) 0%, rgba(9, 16, 25, 0.72) 100%), image-set(url('/assets/images/components/grow-your-community.webp?rev=2c08c971c2f2840f') type('image/webp'), url('/assets/images/components/grow-your-community.png') type('image/png')); background-position: center top, center top, 78% top; background-size: cover; background-repeat: no-repeat; box-shadow: 0 14px 28px rgba(5, 12, 22, 0.38); } .homepage-growth-cta__hero { display: grid; gap: 0.72rem; max-width: 34rem; } .homepage-growth-cta__hero > * { margin: 0; } .homepage-growth-cta__kicker { display: inline-flex; justify-self: start; padding: 0.22rem 0.48rem; border: 1px solid rgba(243, 180, 95, 0.3); border-radius: 0.28rem; color: #f3b45f; font-size: 0.84rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.1; text-transform: uppercase; } .homepage-growth-cta__hero h2 { max-width: 9.5ch; color: #f5f8fc; font-size: clamp(3rem, 7vw, 5.4rem); line-height: 0.98; } .homepage-growth-cta__hero h2::after { content: ''; display: block; width: min(22rem, 86%); height: 0.35rem; margin-top: 0.18rem; border-radius: 999px; background: linear-gradient(90deg, #f0b84f 0%, #ff9b3d 64%, #f05e4e 100%); transform: skewX(-18deg); } .homepage-growth-cta__hero p:last-child { max-width: 29rem; color: #c8d4e3; font-size: clamp(1.05rem, 1.9vw, 1.34rem); line-height: 1.45; } .homepage-growth-cta__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 21rem)); gap: clamp(0.9rem, 1.8vw, 1.25rem); align-items: stretch; justify-content: center; width: min(100%, 66rem); margin-inline: auto; margin-top: auto; } .homepage-growth-card { position: relative; min-height: 14.6rem; padding: clamp(1rem, 2vw, 1.45rem); border: 1px solid rgba(139, 164, 191, 0.26); border-radius: var(--radius-md); background: rgba(15, 28, 43, 0.76); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 32px rgba(4, 10, 18, 0.25); backdrop-filter: blur(2px); display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; row-gap: 1rem; } .homepage-growth-card__icon { justify-self: center; width: 5.85rem; height: 5.85rem; object-fit: contain; } .homepage-growth-card__copy { display: grid; gap: 0.55rem; grid-template-rows: auto 1fr; align-self: stretch; min-width: 0; text-align: center; } .homepage-growth-card__copy h3, .homepage-growth-card__copy p { margin: 0; } .homepage-growth-card__copy h3 { color: #f5f8fc; font-size: clamp(1.12rem, 1.55vw, 1.34rem); line-height: 1.2; overflow-wrap: anywhere; } .homepage-growth-card__title { display: grid; min-height: 2.4em; align-content: center; } .homepage-growth-card__title span { display: block; margin: 0; } .homepage-growth-card__copy p { display: grid; align-content: start; justify-self: center; width: min(100%, 17.25rem); height: 2.72em; color: #c5d1df; font-size: 0.98rem; line-height: 1.36; text-align: center; overflow-wrap: normal; align-self: start; } .homepage-growth-card__copy p span { display: block; } .homepage-growth-card__action { grid-column: 1 / -1; min-height: 3.25rem; width: 100%; margin: 0; font-size: clamp(0.92rem, 1.35vw, 1.08rem); } .homepage-growth-card--orange .homepage-growth-card__action, .homepage-growth-card--coral .homepage-growth-card__action { border-color: rgba(121, 148, 178, 0.62); } .homepage-growth-card--coral .homepage-growth-card__action { border-color: rgba(255, 130, 86, 0.82); } .homepage-growth-cta__trust { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 1.8vw, 1.5rem); width: 100%; margin-inline: auto; } .homepage-growth-cta__trust-content { margin: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 1 44rem; gap: clamp(0.75rem, 1.3vw, 1rem); min-width: 0; color: #c8d4e3; font-size: clamp(0.95rem, 1.5vw, 1.16rem); line-height: 1.35; text-align: center; } .homepage-growth-cta__shield { flex: 0 0 auto; width: min(4.6875rem, 24vw); height: min(4.6875rem, 24vw); object-fit: contain; } .homepage-growth-cta__trust-content span { flex: 1 1 auto; min-width: 0; } .homepage-growth-cta__divider { flex: 1 1 0; min-width: 0; max-width: 24rem; height: 3.25rem; background-image: url('/assets/images/components/Border_Design_1.png'); background-repeat: no-repeat; background-size: 260% auto; background-position: right 56%; opacity: 1; } .homepage-growth-cta__divider--right { transform: scaleX(-1); background-position: right 56%; } @media (max-width: 980px) { .homepage-directory .homepage-section--cta { background-position: center top, center top, 78% top; } .homepage-growth-cta__cards { grid-template-columns: 1fr; } .homepage-growth-card { min-height: 0; } } @media (max-width: 620px) { .homepage-directory .homepage-section--cta { padding: var(--space-3); background-position: center top, center top, 78% top; } .homepage-growth-cta__hero { max-width: 100%; } .homepage-growth-cta__hero h2 { max-width: 100%; font-size: clamp(2.35rem, 13vw, 3.4rem); overflow-wrap: anywhere; } .homepage-growth-cta__cards { width: 100%; max-width: 100%; } .homepage-growth-card { grid-template-columns: 1fr; width: 100%; max-width: 100%; box-sizing: border-box; } .homepage-growth-card__icon { width: 5.6rem; height: 5.6rem; } .homepage-growth-cta__trust { flex-direction: column; gap: var(--space-2); } .homepage-growth-cta__divider { width: min(100%, 18rem); flex: 0 0 2.2rem; max-width: none; } .homepage-growth-cta__trust-content { flex-direction: column; flex-basis: auto; text-align: center; } } .homepage-section--plain { border: 0; background: transparent; } .homepage-section--band { border-color: #3b5470; background: linear-gradient(180deg, #1c2e42 0%, #18293b 100%); } .homepage-section__kicker, .homepage-hero__eyebrow { color: #a8bdd1; } .homepage-hero__stats-title { color: #adc0d3; } .btn-secondary { background: linear-gradient(160deg, #d8a14e 0%, #c68638 100%); border-color: #b7772d; color: #102033; } .btn-secondary:hover { background: linear-gradient(160deg, #e0ad60 0%, #cf9247 100%); border-color: #c08137; color: #102033; box-shadow: 0 6px 12px rgba(207, 146, 71, 0.28); } .btn:focus-visible, button:focus-visible, input[type='submit']:focus-visible, .btn-secondary:focus-visible, .btn-outline:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(8, 15, 25, 0.86), 0 0 0 8px rgba(125, 211, 252, 0.28); } .platform-stat-card { border-color: #3b5166; background: linear-gradient(160deg, #19293b 0%, #172638 100%); } .homepage-game-card { border-color: #3a5168; background: linear-gradient(155deg, #182738 0%, #162536 100%); } .homepage-game-card h3 { color: #e6eff8; } .homepage-game-card__count { color: #bed1e4; } .homepage-game-card__meta { color: #a4b8cc; } .homepage-game-card__visual { border-color: rgba(var(--game-accent-rgb), 0.42); background: linear-gradient(160deg, rgba(var(--game-accent-rgb), 0.2) 0%, rgba(var(--game-accent-rgb), 0.1) 100%); } .homepage-game-card__actions .btn-secondary { border-color: #c58338; box-shadow: 0 8px 14px rgba(207, 146, 71, 0.24); } .homepage-game-card__visual::after { box-shadow: inset 0 0 0 1px rgba(175, 194, 214, 0.16); } .homepage-game-card--has-bg { border-color: rgba(var(--game-accent-rgb), 0.52); background: var(--game-card-bg-image); background-position: center; background-size: cover; } .homepage-game-card--has-bg h3, .homepage-game-card--has-bg .homepage-game-card__count, .homepage-game-card--has-bg .homepage-game-card__meta, .homepage-game-card--has-bg .ui-inline { color: #ffffff; } .game-icon, .game-logo { border-color: rgba(var(--game-accent-rgb), 0.36); background: linear-gradient(160deg, rgba(var(--game-accent-rgb), 0.18) 0%, rgba(var(--game-accent-rgb), 0.1) 100%); box-shadow: inset 0 0 0 1px rgba(168, 188, 210, 0.2); } .game-icon--fallback, .game-logo--fallback { border-color: #435a72; background: #1a2a3b; } .homepage-entry-links a { border-color: #3a5168; background: #1a2b3d; color: #d7e2ee; } .homepage-entry-links a:hover { border-color: #607b97; background: #22364a; } /**/ .homepage-directory .homepage-game-card, .homepage-directory .homepage-game-card__visual { transition-property: transform, opacity; } @media (prefers-reduced-motion: reduce) { .homepage-directory .homepage-game-card, .homepage-directory .homepage-game-card__visual { transition: none !important; transform: none !important; } } /**/ .homepage-directory .hero.homepage-hero { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr); align-items: start; } .homepage-directory .homepage-hero__eyebrow { font-weight: 600; letter-spacing: 0.08em; } .homepage-directory .homepage-hero .hero__subtitle { max-width: 56ch; } .homepage-directory .homepage-hero__stats { border: 1px solid #3b5166; border-radius: var(--radius-md); padding: var(--space-3); } .homepage-directory .homepage-hero__stats-title { margin-bottom: var(--space-2); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .homepage-directory .homepage-hero .platform-stat-card { box-shadow: 0 6px 14px rgba(23, 38, 56, 0.08); gap: 0.22rem; align-content: start; } .homepage-directory .homepage-hero .platform-stat-card h3 { font-size: 0.92rem; } .homepage-directory .homepage-hero .platform-stat-card__value { font-size: clamp(1.35rem, 2.4vw, 1.75rem); } @media (max-width: 900px) { .homepage-directory .hero.homepage-hero { grid-template-columns: 1fr; gap: var(--space-3); } } .gaming-updates-section, .gaming-update-card__body { display: grid; gap: var(--space-2); } .gaming-updates-section > *, .gaming-update-card__body > * { margin-bottom: 0; } .gaming-updates-section__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .gaming-updates-section__header > div { display: grid; gap: 0.32rem; } .gaming-updates-section__header h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.2; } .gaming-updates-section__header p { margin: 0; color: var(--color-text-muted); line-height: 1.45; } .gaming-update-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } .gaming-update-discovery-section { padding: var(--space-3); border: 1px solid #3d536a; border-radius: var(--radius-md); background: linear-gradient(165deg, #152435 0%, #101d2d 100%); box-shadow: 0 14px 28px rgba(5, 12, 22, 0.28); } .gaming-update-discovery-section .gaming-updates-section__header h2 { color: #f8fafc; } .gaming-update-discovery-section .gaming-updates-section__header p { color: #b7c8da; } .gaming-update-card { min-height: 100%; overflow: visible; } .card.gaming-update-card { overflow: visible; } .gaming-update-discovery-section .gaming-update-card { border-color: #3e5368; background: linear-gradient(165deg, #1b2b3d 0%, #162536 100%); box-shadow: 0 10px 22px rgba(5, 12, 22, 0.28); } .gaming-update-discovery-section .gaming-update-card:hover { border-color: #5d7894; box-shadow: 0 14px 28px rgba(5, 12, 22, 0.38); } .gaming-update-card__body { height: 100%; align-content: start; } .gaming-update-card__media { display: block; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--color-border); border-radius: 0; background: var(--color-bg-soft); overflow: visible; } .gaming-update-card__media:hover, .gaming-update-card__placeholder:hover { text-decoration: none; } .gaming-update-card__media img { display: block; width: 100%; aspect-ratio: 16 / 9; height: 100%; border-radius: 0; object-fit: cover; transition: transform 0.18s ease, filter 0.18s ease; } .gaming-update-card__media:hover img { filter: brightness(1.05); transform: none; } .gaming-update-card__placeholder { display: grid; place-items: center; aspect-ratio: 16 / 9; border-bottom: 1px solid #3e5368; border-radius: 0; background: radial-gradient(circle at 24% 18%, rgba(246, 191, 112, 0.18), transparent 34%), linear-gradient(150deg, #203247 0%, #172638 100%); color: #f4dca8; text-decoration: none; } .gaming-update-card__placeholder span { display: inline-flex; align-items: center; border: 1px solid rgba(246, 191, 112, 0.48); border-radius: var(--radius-pill); background: rgba(16, 29, 45, 0.74); color: #f4dca8; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1.1; padding: 0.34rem 0.74rem; text-transform: uppercase; } .gaming-update-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: #b7c8da; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .gaming-update-card h2, .gaming-update-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.28; } .gaming-update-card p { color: #b7c8da; line-height: 1.45; } .gaming-update-card a { color: #f2f7fc; text-decoration: none; } .gaming-update-card a:hover { color: #f6bf70; text-decoration: underline; text-underline-offset: 0.14em; } .gaming-update-badge { display: inline-flex; align-items: center; border: 1px solid #c9d9ec; border-radius: var(--radius-pill); background: linear-gradient(165deg, #edf5fd 0%, #e4eef8 100%); color: #30506f; font-size: 0.72rem; font-weight: 800; line-height: 1.1; padding: 0.22rem 0.55rem; } .gaming-update-badge--news { border-color: #efd7aa; background: linear-gradient(165deg, #fff8e7 0%, #ffefcf 100%); color: #754f14; } @media (max-width: 980px) { .gaming-update-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .gaming-updates-section__header { align-items: flex-start; flex-direction: column; gap: var(--space-2); } .gaming-update-card-grid { grid-template-columns: 1fr; } } /**/ @supports (background-image: image-set(url("data:,") type("image/webp"))) { .homepage-directory .homepage-game-card--optimized-bg { background-image: image-set(var(--game-card-bg-webp) type("image/webp"), var(--game-card-bg-image) type("image/png")); } } /**/ .btn, button, input[type='submit'] { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-sm); border: 1px solid transparent; padding: 0.64rem 1.05rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; cursor: pointer; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.14s ease, box-shadow 0.2s ease; } .btn:active, button:active, input[type='submit']:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05); } .btn:focus-visible, button:focus-visible, input[type='submit']:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(8, 15, 25, 0.86); } .btn:disabled, button:disabled, input[type='submit']:disabled, .btn[aria-disabled='true'] { cursor: not-allowed; opacity: 0.65; filter: saturate(0.8); } button, input[type='submit'] { background: linear-gradient(160deg, #4b5968 0%, #3c4857 100%); border-color: #34404e; color: var(--color-white); } button:hover, input[type='submit']:hover { background: linear-gradient(160deg, #556577 0%, #42505f 100%); border-color: #2f3a46; box-shadow: 0 6px 12px rgba(31, 41, 51, 0.18); } .btn-secondary { background: linear-gradient(160deg, #f3b45f 0%, #eea849 100%); border-color: #df983a; color: #102033; } .btn-secondary:hover { background: linear-gradient(160deg, #f6bf70 0%, #f0af58 100%); border-color: #d88f30; color: #102033; box-shadow: 0 6px 12px rgba(238, 168, 73, 0.3); } .btn-outline { background: var(--color-btn-outline-bg); border-color: var(--color-btn-outline-border); color: var(--color-btn-outline-text); } .btn-outline:hover { background: var(--color-btn-outline-hover-bg); border-color: var(--color-btn-outline-hover-border); color: var(--color-btn-outline-hover-text); box-shadow: 0 4px 10px rgba(44, 55, 67, 0.14); } .card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.16s ease; } .card:hover { border-color: #c6d2dd; box-shadow: var(--shadow-md); transform: translateY(-1px); } .card-body { padding: var(--space-3); } .card-body> :last-child { margin-bottom: 0; } details>summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } .hero { background: linear-gradient(140deg, #ffffff 0%, #fff4e6 100%); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-7) var(--space-6); } .hero__title { font-size: clamp(2rem, 4vw, 3.25rem); margin-bottom: var(--space-3); } .hero__subtitle { color: var(--color-text-muted); max-width: 50rem; margin-bottom: var(--space-5); } .section-stack { display: grid; gap: var(--space-4); } .section-stack>* { margin-bottom: 0; } .page-hierarchy { gap: var(--space-5); } .page-hierarchy>* { margin-bottom: 0; } .section-surface { border-radius: var(--radius-lg); } .section-surface--band { border: 1px solid #d9e5f1; background: linear-gradient(180deg, #f8fbff 0%, #f2f7fc 100%); } .section-surface>.card-body>h2, .section-surface>.card-body>h3 { margin-bottom: var(--space-1); font-size: clamp(1.12rem, 1.7vw, 1.34rem); line-height: 1.24; } .homepage-section__head h2 { font-size: clamp(1.12rem, 1.75vw, 1.34rem); line-height: 1.24; margin-bottom: var(--space-1); } .homepage-section__lead { font-size: 0.94rem; line-height: 1.45; } .section-surface>.card-body>p:last-child { margin-bottom: 0; } .server-badge-gold { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 999px; padding: 0.16rem 0.58rem; border: 1px solid #c8961a; background: linear-gradient(135deg, #ffe58f 0%, #f3c84c 45%, #dca61d 100%); color: #3f2a00; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.01em; line-height: 1.1; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); box-shadow: 0 0 0 1px rgba(255, 212, 118, 0.35), 0 0 10px rgba(224, 170, 42, 0.25); } .server-badge-gold__star { color: #8c5e00; font-size: 0.76rem; line-height: 1; } .server-badge-gold__label { white-space: nowrap; } .state-message { border-radius: var(--radius-md); border: 1px solid var(--color-border); padding: var(--space-4); } .flash-stack .state-message { animation: flash-in 220ms var(--motion-ease) both; } .flash-stack { display: grid; margin-bottom: var(--space-4); } .state-message[data-reward-earned='1'] { position: relative; overflow: hidden; } .state-message.is-reward-highlight { animation: reward-earned-highlight 720ms var(--motion-ease) both; } .reward-earned-burst { position: absolute; inset: -25%; pointer-events: none; border-radius: 999px; background: radial-gradient(circle, rgba(118, 182, 137, 0.28) 0%, rgba(118, 182, 137, 0.12) 35%, rgba(118, 182, 137, 0) 70%); animation: reward-earned-burst 820ms var(--motion-ease) both; } .reward-earned-badge { position: absolute; top: 0.35rem; right: 0.45rem; pointer-events: none; border-radius: var(--radius-pill); padding: 0.16rem 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: #1f3b2a; background: #dcf3e4; border: 1px solid #99c8a8; box-shadow: 0 6px 14px rgba(44, 90, 58, 0.18); animation: reward-earned-badge 860ms var(--motion-ease) both; } .state-message>*:last-child { margin-bottom: 0; } .tilt-plus-mark { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 1px solid #d9ab3a; background: linear-gradient(150deg, #ffe8a6 0%, #f2c560 100%); color: #6d4d07; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1.1; padding: 0.14rem 0.46rem; vertical-align: middle; white-space: nowrap; } .state-message--empty { background: #fff8ef; border-color: #f2d7ae; } .state-message--loading { background: linear-gradient(165deg, #f5f8fc 0%, #edf3f9 100%); border-color: #d3dee9; } .async-status { width: 100%; align-items: flex-start; gap: var(--space-2); } .async-status__spinner { margin-top: 0.15rem; margin-left: auto; flex: 0 0 auto; } .async-status__content { flex: 1 1 auto; display: grid; gap: 0.15rem; min-width: 0; } .async-status__text { color: #2f4255; font-weight: 600; line-height: 1.35; } .async-status__stage { color: var(--color-text-muted); font-size: 0.82rem; line-height: 1.25; } .async-status__progress { margin-top: var(--space-1); } .homepage-directory { display: grid; gap: var(--space-5); } .homepage-section { display: grid; gap: var(--space-3); border-radius: var(--radius-lg); padding: clamp(0.95rem, 2vw, 1.3rem); border: 1px solid #d9e4ef; } .homepage-section--base { background: linear-gradient(165deg, #ffffff 0%, #f7fafd 100%); } .homepage-section--cta { background: linear-gradient(150deg, #fff7e3 0%, #ffefca 100%); border-color: #ecd5a3; box-shadow: 0 10px 20px rgba(164, 126, 52, 0.14); } .homepage-section--band { border-color: #dbe6f1; background: linear-gradient(180deg, #f8fbff 0%, #f2f7fc 100%); } .homepage-section__head { display: grid; gap: 0.42rem; margin-bottom: var(--space-1); } .homepage-section__kicker { margin-bottom: 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #607387; } .homepage-section__head h2 { margin-bottom: 0; font-size: clamp(1.15rem, 1.85vw, 1.36rem); line-height: 1.25; } .homepage-section__content>*:last-child { margin-bottom: 0; } .homepage-empty-state { margin-bottom: 0; display: grid; gap: var(--space-1); } .homepage-empty-state__hint { margin-bottom: 0; color: var(--color-text-muted); } .homepage-empty-state__actions { margin-bottom: 0; } .homepage-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: 0; max-width: 100%; } .homepage-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr); align-items: start; gap: var(--space-4); max-width: 100%; box-sizing: border-box; } .homepage-hero__content { margin-bottom: 0; min-width: 0; } .homepage-hero__stats { margin-bottom: 0; border: 1px solid #d6e1ec; border-radius: var(--radius-md); background: linear-gradient(160deg, #f8fbfe 0%, #edf3f9 100%); padding: var(--space-3); min-width: 0; max-width: 100%; box-sizing: border-box; } .homepage-hero__stats-title { margin-bottom: var(--space-2); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5d7186; } .homepage-hero__eyebrow { margin-bottom: var(--space-2); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } .homepage-hero .hero__title { max-width: 18ch; margin-bottom: var(--space-3); overflow-wrap: anywhere; } .homepage-hero .hero__subtitle { max-width: 56ch; margin-bottom: var(--space-4); } .homepage-section__lead { margin-bottom: var(--space-2); color: var(--color-text-muted); font-size: 1rem; line-height: 1.5; } .platform-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); list-style: none; margin: 0; padding: 0; } .platform-stat-card { margin-bottom: 0; padding: var(--space-3); border: 1px solid #d4deea; border-radius: var(--radius-sm); background: linear-gradient(160deg, #f9fbfe 0%, #edf3f9 100%); box-shadow: 0 6px 14px rgba(23, 38, 56, 0.08); display: grid; gap: 0.22rem; align-content: start; min-width: 0; } .platform-stat-card h3 { margin-bottom: 0; font-size: 0.92rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .platform-stat-card__value { margin-bottom: 0; font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 700; color: var(--color-primary-dark); overflow-wrap: anywhere; } .platform-stat-card__hint { margin-bottom: 0; color: var(--color-text-muted); font-size: 0.8rem; } .ad-banner-region { margin-bottom: var(--space-3); } .ad-banner-slot { display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: linear-gradient(165deg, #fafcfe 0%, #f2f7fc 100%); padding: 0.42rem; } .ad-banner-slot__link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .ad-banner-slot__image { display: block; width: auto; max-width: min(100%, 728px); height: auto; max-height: 90px; border-radius: 0.3rem; } .homepage-game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4); } .homepage-game-card { margin-bottom: 0; border: 1px solid #d7e1eb; border-radius: var(--radius-md); padding: var(--space-4); background: linear-gradient(155deg, #ffffff 0%, #f5f9fd 100%); box-shadow: var(--shadow-sm); display: grid; gap: 0.9rem; position: relative; overflow: hidden; min-height: 100%; transition: transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease), background var(--motion-base) var(--motion-ease); isolation: isolate; } .homepage-game-card>* { position: relative; z-index: 1; } .homepage-game-card--has-bg { border-color: rgba(var(--game-accent-rgb), 0.48); background: var(--game-card-bg-image); background-position: center; background-size: cover; box-shadow: 0 12px 24px rgba(31, 41, 51, 0.18); color: #ffffff; } .homepage-game-card--has-bg::before { content: none; } .homepage-game-card::after { content: ''; position: absolute; inset: auto -20% -55% auto; width: 11rem; height: 11rem; background: radial-gradient(circle, rgba(var(--game-accent-rgb), 0.18) 0%, rgba(var(--game-accent-rgb), 0) 70%); pointer-events: none; } .homepage-game-card--has-bg::after { inset: auto -18% -48% auto; background: radial-gradient(circle, rgba(var(--game-accent-rgb), 0.35) 0%, rgba(var(--game-accent-rgb), 0) 72%); z-index: 0; } .homepage-game-card__visual { width: 5.15rem; height: 5.15rem; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--game-accent-rgb), 0.32); background: linear-gradient(160deg, rgba(var(--game-accent-rgb), 0.15) 0%, rgba(var(--game-accent-rgb), 0.06) 100%); box-shadow: 0 8px 16px rgba(var(--game-accent-rgb), 0.17); margin-bottom: var(--space-2); overflow: hidden; padding: 0.12rem; position: relative; z-index: 1; transition: transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease); } .homepage-game-card__visual::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38); pointer-events: none; } .homepage-game-card__logo { width: 100%; height: 100%; border-radius: calc(var(--radius-md) - 0.12rem); object-fit: contain; border: 0; background: transparent; box-shadow: none; padding: 0; } .homepage-game-card h3 { margin-bottom: 0; position: relative; z-index: 1; font-size: 1.08rem; line-height: 1.2; color: #22364a; } .homepage-game-card__count { margin-bottom: 0; color: #4a6075; font-size: 0.92rem; position: relative; z-index: 1; font-weight: 600; } .homepage-game-card__meta { margin-bottom: 0; color: #42566a; font-size: 0.84rem; position: relative; z-index: 1; } .homepage-game-card__actions { margin-bottom: 0; display: flex; flex-wrap: wrap; gap: 0.44rem; position: relative; z-index: 1; margin-top: auto; padding-top: var(--space-1); } .homepage-game-card__actions .btn { min-width: 0; min-height: 2.2rem; padding-inline: 0.72rem; } .homepage-game-card__actions .btn-secondary { border-color: #d88f30; box-shadow: 0 8px 14px rgba(238, 168, 73, 0.22); font-weight: 700; } .homepage-game-card__actions .btn-secondary:hover { box-shadow: 0 10px 18px rgba(238, 168, 73, 0.3); } .homepage-game-card__links { margin-bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.9rem; position: relative; z-index: 1; } .homepage-game-card--has-bg h3, .homepage-game-card--has-bg .homepage-game-card__count, .homepage-game-card--has-bg .homepage-game-card__meta, .homepage-game-card--has-bg .ui-inline { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42); } .homepage-game-card--has-bg .homepage-game-card__visual { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.9); box-shadow: 0 10px 22px rgba(7, 13, 20, 0.26); } .homepage-game-card__actions .btn-secondary { flex: 1 1 100%; } .homepage-game-card__actions .btn-outline { flex: 1 1 calc(50% - 0.22rem); } .homepage-game-card:hover { transform: translateY(-3px); border-color: rgba(var(--game-accent-rgb), 0.4); box-shadow: 0 12px 22px rgba(var(--game-accent-rgb), 0.2); } .homepage-game-card:hover .homepage-game-card__visual { transform: translateY(-1px) scale(1.02); box-shadow: 0 10px 20px rgba(var(--game-accent-rgb), 0.25); } @media (max-width: 900px) { .hero { padding: var(--space-6) var(--space-4); max-width: 100%; box-sizing: border-box; } .homepage-hero { grid-template-columns: 1fr; gap: var(--space-3); } .page-hierarchy { gap: var(--space-4); } .homepage-directory { gap: var(--space-4); } .homepage-section { gap: var(--space-2); padding: var(--space-3); } .homepage-hero .hero__title { max-width: 100%; } } @media (max-width: 760px) { .homepage-directory, .homepage-directory .hero.homepage-hero, .card, .card-body { width: 100%; max-width: 100%; box-sizing: border-box; } .homepage-directory .hero.homepage-hero { padding: var(--space-4) var(--space-3); } .homepage-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; } .homepage-hero__actions .btn, .homepage-empty-state__actions .btn { width: 100%; min-width: 0; white-space: normal; } .platform-stats-grid { grid-template-columns: 1fr; } .homepage-game-card__actions .btn { width: 100%; white-space: normal; } .homepage-game-card__visual { width: 4.25rem; height: 4.25rem; } } .state-message--success { background: linear-gradient(165deg, #e9f8f0 0%, #dff3e8 100%); border-color: #7ec4a0; } .state-message--error { background: linear-gradient(165deg, #fff2ef 0%, #ffe8e2 100%); border-color: #eeb7ab; } .state-message--info { background: linear-gradient(165deg, #f5f8fc 0%, #edf3f9 100%); border-color: #d3dee9; } .state-message--warning { background: linear-gradient(165deg, #fff8ed 0%, #fff1df 100%); border-color: #efcc98; } @keyframes flash-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes reward-earned-highlight { 0% { box-shadow: 0 0 0 0 rgba(118, 182, 137, 0.38); transform: translateY(0); } 30% { box-shadow: 0 0 0 7px rgba(118, 182, 137, 0.16); transform: translateY(-1px); } 100% { box-shadow: 0 0 0 0 rgba(118, 182, 137, 0); transform: translateY(0); } } @keyframes reward-earned-burst { from { opacity: 0.75; transform: scale(0.5); } to { opacity: 0; transform: scale(1.15); } } @keyframes reward-earned-badge { 0% { opacity: 0; transform: translateY(6px) scale(0.92); } 20% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-8px) scale(1.02); } } @keyframes credit-reward-pulse { 0% { box-shadow: 0 0 0 0 rgba(67, 158, 104, 0.34); } 100% { box-shadow: 0 0 0 10px rgba(67, 158, 104, 0); } } @media (prefers-reduced-motion: reduce) { .state-message.is-reward-highlight { animation: none; } .reward-earned-burst, .reward-earned-badge { animation: none; display: none; } .credit-emphasis--reward { animation: none; } } .sr-only { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .site-breadcrumbs { margin-bottom: var(--space-3); } .site-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem; margin: 0; padding: 0; list-style: none; color: var(--color-text-muted); font-size: 0.84rem; } .site-breadcrumbs__item { display: inline-flex; align-items: center; gap: 0.55rem; } .site-breadcrumbs__item:not(:last-child)::after { content: '/'; color: #a7b4c2; } .site-breadcrumbs__link { color: #48617b; text-decoration: none; } .site-breadcrumbs__link:hover { color: #2e4359; text-decoration: underline; text-underline-offset: 0.14em; } .site-breadcrumbs__current { color: #42576c; font-weight: 600; } .server-banner { width: 468px; height: 60px; max-width: 100%; object-fit: cover; display: block; } .server-ip-copy-block { display: grid; gap: 0.45rem; } .server-ip-copy-box { appearance: none; width: 100%; border: 1px solid #cfdce9; border-radius: var(--radius-md); background: linear-gradient(160deg, #f8fbff 0%, #eef5fc 100%); color: var(--color-text-primary); text-align: left; padding: 0.62rem 0.78rem; display: grid; gap: 0.15rem; cursor: pointer; transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, background 140ms ease; } .server-ip-copy-box:hover { border-color: #9ab4ce; box-shadow: 0 5px 14px rgba(43, 61, 81, 0.12); background: linear-gradient(160deg, #f5f9ff 0%, #e9f2fc 100%); } .server-ip-copy-box:focus-visible { outline: 2px solid #8fb4db; outline-offset: 2px; } .server-ip-copy-box:active { transform: translateY(1px); } .server-ip-copy-box.is-copying { border-color: #9ab4ce; } .server-ip-copy-box.is-copied { border-color: #83c6a5; background: linear-gradient(160deg, #edf8f1 0%, #e3f2e9 100%); } .server-ip-copy-box.is-failed { border-color: #e0a79b; background: linear-gradient(160deg, #fff5f2 0%, #ffece7 100%); } .server-ip-copy-box__value { font-family: "Consolas", "SFMono-Regular", "Menlo", monospace; font-size: 0.98rem; line-height: 1.3; word-break: break-all; color: #1e2d3d; font-weight: 700; } .server-ip-copy-box__hint { display: inline-flex; align-items: center; gap: 0.32rem; color: #4d5f73; font-size: 0.78rem; margin-top: 0.12rem; } .server-ip-copy-box--inline { display: inline-flex; align-items: center; justify-content: space-between; width: auto; min-width: 0; max-width: 100%; gap: 0.38rem; white-space: nowrap; } .server-ip-copy-box--inline .server-ip-copy-box__value { font-size: 0.82rem; line-height: 1; white-space: nowrap; word-break: normal; } .server-ip-copy-box--inline .server-ip-copy-box__hint { margin-top: 0; white-space: nowrap; font-size: 0.68rem; } .ip-copy-popup { position: absolute; z-index: 1200; width: min(24rem, calc(100vw - 1.5rem)); border: 1px solid #cfd9e3; border-radius: var(--radius-md); background: linear-gradient(165deg, #f8fbff 0%, #eef4fa 100%); box-shadow: 0 16px 30px rgba(31, 41, 51, 0.18); padding: 0.7rem; } .ip-copy-popup__body { display: grid; gap: 0.58rem; } .ip-copy-popup__message { margin: 0; font-size: 0.9rem; line-height: 1.45; color: #2f3d4d; font-weight: 600; } .ip-copy-popup__title, .ip-copy-popup__subtext, .ip-copy-popup__microtext { display: block; } .ip-copy-popup__title { font-size: 0.94rem; font-weight: 700; line-height: 1.22; color: #223548; } .ip-copy-popup__subtext { margin-top: 0.22rem; font-size: 0.84rem; font-weight: 500; line-height: 1.4; color: #304458; } .ip-copy-popup__subtext strong { font-weight: 700; } .ip-copy-popup__microtext { margin-top: 0.18rem; font-size: 0.74rem; font-weight: 500; line-height: 1.35; color: #5b6d80; } .ip-copy-popup__actions { display: flex; flex-wrap: wrap; gap: 0.38rem; } .ip-copy-popup__chooser { display: grid; gap: 0.5rem; } .ip-copy-popup__chooser[hidden] { display: none; } .ip-copy-popup__choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.55rem; align-items: center; padding: 0.55rem; border: 1px solid #d4dee8; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.72); } .ip-copy-popup__choice-text { display: grid; min-width: 0; gap: 0.18rem; } .ip-copy-popup__choice-label { color: #223548; font-size: 0.84rem; font-weight: 700; line-height: 1.2; } .ip-copy-popup__choice-address { display: block; min-width: 0; overflow-wrap: anywhere; color: #425267; font-size: 0.82rem; line-height: 1.25; } .ip-copy-popup__choice-button { min-height: 2rem; padding: 0.32rem 0.58rem; font-size: 0.78rem; white-space: nowrap; } .ip-copy-popup__action { min-height: 2.05rem; padding: 0.34rem 0.7rem; font-size: 0.82rem; } .ip-copy-popup--guest .ip-copy-popup__actions { gap: 0.44rem; } .ip-copy-popup--guest [data-copy-popup-register] { font-weight: 700; } .ip-copy-popup--guest [data-copy-popup-share] { opacity: 0.9; } .ip-copy-popup__action[hidden] { display: none !important; } @media (max-width: 420px) { .ip-copy-popup__choice { grid-template-columns: 1fr; } .ip-copy-popup__choice-button { width: 100%; } } .credit-emphasis { display: inline-flex; align-items: center; border-radius: var(--radius-pill); padding: 0.06rem 0.5rem; margin: 0 0.08rem; font-weight: 700; line-height: 1.25; white-space: nowrap; } .credit-emphasis--reward { color: #104530; border: 1px solid #90c9a7; background: linear-gradient(165deg, #eaf8ef 0%, #dff1e7 100%); box-shadow: 0 0 0 0 rgba(67, 158, 104, 0.34); animation: credit-reward-pulse 1.4s ease-out 1; } .server-faq-section { border-color: #d7e2ec; overflow: hidden; } .server-faq-section>.card-body { padding-top: var(--space-3); } .faq-accordion { display: grid; gap: clamp(0.75rem, 1.4vw, 1rem); width: 100%; max-width: 100%; box-sizing: border-box; } .faq-accordion__item { border: 1px solid rgba(91, 116, 143, 0.62); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(31, 49, 68, 0.82) 0%, rgba(20, 35, 52, 0.84) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 28px rgba(5, 12, 22, 0.2); overflow: hidden; backdrop-filter: blur(3px); transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .faq-accordion__item:hover { border-color: rgba(243, 180, 95, 0.52); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 34px rgba(5, 12, 22, 0.28), 0 0 20px rgba(243, 180, 95, 0.12); transform: translateY(-2px); } .faq-accordion__item[open] { border-color: rgba(243, 180, 95, 0.78); box-shadow: inset 3px 0 0 rgba(245, 123, 87, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 36px rgba(5, 12, 22, 0.3); } .faq-accordion__item[open] .faq-accordion__icon { border-color: rgba(243, 180, 95, 0.68); background: linear-gradient(155deg, rgba(66, 48, 35, 0.92) 0%, rgba(41, 46, 56, 0.95) 100%); color: #f7c36d; } .faq-accordion__summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 1.25rem; align-items: center; gap: clamp(0.85rem, 1.8vw, 1.25rem); width: 100%; min-height: 4.1rem; margin: 0; padding: clamp(0.85rem, 1.8vw, 1.15rem) clamp(1rem, 2vw, 1.35rem); color: #f3f7fb; font-weight: 700; box-sizing: border-box; } .faq-accordion__summary::-webkit-details-marker { display: none; } .faq-accordion__summary:focus-visible { outline: 2px solid rgba(243, 180, 95, 0.72); outline-offset: 3px; } .faq-accordion__icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid rgba(121, 148, 178, 0.5); border-radius: var(--radius-sm); background: linear-gradient(155deg, rgba(44, 61, 78, 0.74) 0%, rgba(24, 39, 57, 0.86) 100%); color: #f3b45f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); box-sizing: border-box; } .faq-accordion__icon .ui-icon { width: 1.35rem; height: 1.35rem; } .faq-accordion__question { min-width: 0; margin: 0; color: #f3f7fb; font-size: clamp(1.04rem, 1.7vw, 1.28rem); line-height: 1.25; font-weight: 700; letter-spacing: 0.01em; overflow-wrap: anywhere; } .faq-accordion__caret { position: relative; display: block; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin-right: 0; border: 0; color: #eaf1f8; transition: transform 180ms ease, color 180ms ease; } .faq-accordion__caret::before { content: ''; position: absolute; inset: 0.18rem; border-right: 0.16rem solid currentColor; border-bottom: 0.16rem solid currentColor; transform: rotate(45deg); } .faq-accordion__item[open] .faq-accordion__caret { color: #f3b45f; transform: rotate(180deg); } .faq-accordion__content { margin: 0 clamp(1rem, 2vw, 1.35rem) clamp(1rem, 2vw, 1.25rem) calc(clamp(1rem, 2vw, 1.35rem) + 4.25rem); padding-top: clamp(0.85rem, 1.6vw, 1rem); border-top: 1px solid rgba(121, 148, 178, 0.28); } .faq-accordion__answer { max-width: 56rem; margin: 0; color: #b7c7d6; font-size: clamp(0.98rem, 1.35vw, 1.08rem); line-height: 1.65; } @supports selector(::details-content) { .faq-accordion__item::details-content { block-size: 0; overflow: hidden; transition: block-size 220ms ease, content-visibility 220ms ease allow-discrete; } .faq-accordion__item[open]::details-content { block-size: auto; } } @media (max-width: 760px) { .faq-accordion__summary { grid-template-columns: 2.65rem minmax(0, 1fr) 1rem; min-height: 3.85rem; padding: 0.8rem 0.85rem; gap: 0.75rem; } .faq-accordion__icon { width: 2.65rem; height: 2.65rem; } .faq-accordion__icon .ui-icon { width: 1.18rem; height: 1.18rem; } .faq-accordion__content { margin: 0 0.85rem 0.95rem calc(0.85rem + 3.4rem); } } @media (prefers-reduced-motion: reduce) { .faq-accordion__caret { transition: none; } } .ui-inline { display: inline-flex; align-items: center; gap: 0.45rem; } .ui-icon { width: 1em; height: 1em; flex: 0 0 auto; } .ui-icon--sm { width: 0.95em; height: 0.95em; } .game-accent { --game-accent: var(--color-accent-coral); --game-accent-rgb: 244, 107, 69; } .game-icon, .game-logo { width: 2.2rem; height: 1.45rem; display: inline-block; border-radius: 0.48rem; border: 1px solid rgba(var(--game-accent-rgb), 0.24); background: linear-gradient(160deg, rgba(var(--game-accent-rgb), 0.13) 0%, rgba(var(--game-accent-rgb), 0.06) 100%); object-fit: contain; vertical-align: middle; flex: 0 0 auto; padding: 0.12rem 0.16rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); image-rendering: auto; } .game-icon--sm, .game-logo--sm { width: 1.9rem; height: 1.2rem; border-radius: 0.42rem; padding: 0.1rem 0.14rem; } .game-icon--lg, .game-logo--lg { width: 3.05rem; height: 2rem; border-radius: 0.6rem; padding: 0.16rem 0.2rem; } .game-icon--fallback, .game-logo--fallback { border-color: var(--color-border); background: var(--color-bg-soft); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); } .homepage-game-card__visual>.game-logo, .homepage-game-card__visual>.game-icon { width: 100%; height: 100%; border: 0; background: transparent; box-shadow: none; padding: 0; object-fit: contain; } .card:hover { border-color: #3a4d61; } .hero { background: linear-gradient(140deg, #162334 0%, #1b2a3d 100%); } .section-surface--band { border-color: #3f5670; background: linear-gradient(180deg, #1a2b3f 0%, #162739 100%); } .homepage-hero__stats { border-color: #3b5166; background: linear-gradient(160deg, #19293b 0%, #172638 100%); } .homepage-section { border-color: #3a5168; } .homepage-section--base { background: linear-gradient(165deg, #1a2a3c 0%, #172638 100%); } .homepage-section--cta { border-color: #816635; background: linear-gradient(155deg, #3d3019 0%, #4a3a1f 100%); box-shadow: 0 10px 20px rgba(7, 5, 2, 0.35); } .homepage-section--band { border-color: #3b5470; background: linear-gradient(180deg, #1c2e42 0%, #18293b 100%); } .homepage-section__kicker { color: #a8bdd1; } .homepage-hero__stats-title { color: #adc0d3; } .state-message--success { background: linear-gradient(165deg, #143427 0%, #173d2d 100%); border-color: #2c7f5b; } .state-message--error { background: linear-gradient(165deg, #3a1f23 0%, #452428 100%); border-color: #8b4a50; } .state-message--info, .state-message--loading { background: linear-gradient(165deg, #17273a 0%, #152436 100%); border-color: #3b5268; } .state-message--warning, .state-message--empty { background: linear-gradient(165deg, #3b2e1f 0%, #463523 100%); border-color: #8b6a44; } .btn-secondary { background: linear-gradient(160deg, #d8a14e 0%, #c68638 100%); border-color: #b7772d; color: #102033; } .btn-secondary:hover { background: linear-gradient(160deg, #e0ad60 0%, #cf9247 100%); border-color: #c08137; color: #102033; box-shadow: 0 6px 12px rgba(207, 146, 71, 0.28); } .tilt-plus-mark { border-color: #a6802e; color: #f6dfaa; background: linear-gradient(150deg, #6f541b 0%, #9d7423 100%); } .platform-stat-card { border-color: #3b5166; background: linear-gradient(160deg, #19293b 0%, #172638 100%); } .ad-banner-slot { border-color: #3a5168; background: linear-gradient(165deg, #1a2a3c 0%, #162536 100%); } .homepage-game-card { border-color: #3a5168; background: linear-gradient(155deg, #182738 0%, #162536 100%); } .homepage-game-card h3 { color: #e6eff8; } .homepage-game-card__count { color: #bed1e4; } .homepage-game-card__meta { color: #a4b8cc; } .homepage-game-card__visual { border-color: rgba(var(--game-accent-rgb), 0.42); background: linear-gradient(160deg, rgba(var(--game-accent-rgb), 0.2) 0%, rgba(var(--game-accent-rgb), 0.1) 100%); } .homepage-game-card__actions .btn-secondary { border-color: #c58338; box-shadow: 0 8px 14px rgba(207, 146, 71, 0.24); } .homepage-game-card__visual::after { box-shadow: inset 0 0 0 1px rgba(175, 194, 214, 0.16); } .homepage-game-card--has-bg { border-color: rgba(var(--game-accent-rgb), 0.52); background: var(--game-card-bg-image); background-position: center; background-size: cover; } .homepage-game-card--has-bg h3, .homepage-game-card--has-bg .homepage-game-card__count, .homepage-game-card--has-bg .homepage-game-card__meta, .homepage-game-card--has-bg .ui-inline { color: #ffffff; } .game-icon, .game-logo { border-color: rgba(var(--game-accent-rgb), 0.36); background: linear-gradient(160deg, rgba(var(--game-accent-rgb), 0.18) 0%, rgba(var(--game-accent-rgb), 0.1) 100%); box-shadow: inset 0 0 0 1px rgba(168, 188, 210, 0.2); } .game-icon--fallback, .game-logo--fallback { border-color: #435a72; background: #1a2a3b; } .server-ip-copy-box { border-color: #44607c; background: linear-gradient(160deg, #1a2c3f 0%, #17293b 100%); color: #dce8f3; } .server-ip-copy-box:hover { border-color: #6280a0; background: linear-gradient(160deg, #1f3247 0%, #1a2d41 100%); } .server-ip-copy-box__value { color: #edf4fb; } .server-ip-copy-box__hint { color: #b6c8da; } .server-faq-section { border-color: #3f5670; } .btn:focus-visible, button:focus-visible, input[type='submit']:focus-visible, .btn-secondary:focus-visible, .btn-outline:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(8, 15, 25, 0.86), 0 0 0 8px rgba(125, 211, 252, 0.28); } /**/ /**/ .server-banner-media.server-banner-media { display: block; max-width: 100%; min-height: 0; max-height: none; height: auto; aspect-ratio: 468 / 60; object-fit: contain; } .server-banner-media[hidden] { display: none !important; } .server-card__banner.server-banner { width: 468px; max-width: 100%; height: auto; aspect-ratio: 468 / 60; overflow: hidden; }