html { overflow-x: clip; }
html.body-modalShow,
html:has(body.body-modalShow),
html:has(body.body-menuShow) {
overflow: hidden !important;
height: 100% !important;
}
body.body-modalShow,
body.body-menuShow {
overflow: hidden !important;
height: 100% !important;
overscroll-behavior: contain !important;
}
.xh-page {
--xh-bg-deep: #060a14;
--xh-bg-primary: #0a0f1c;
--xh-text-dim: var(--xh-text-muted);
--xh-border-input: #34456a;
--xh-link-blue: #5fa8d1;
--xh-orange-deep: var(--xh-burnt);
--xh-blue: var(--xh-blue-deep);
--xh-res-metal: #a47d7a;
--xh-res-crystal: #5ca6aa;
--xh-res-deuterium: #339966;
--xh-res-energy: #e09a3a;
--xh-bg-placeholder-grad: linear-gradient(135deg, var(--xh-bg-card-hover) 0%, var(--xh-border) 100%);
margin: 0; padding: 0;
font-family: var(--xh-font-body);
font-size: 16px; line-height: 1.6;
color: var(--xh-text);
background: var(--xh-bg-deep);
-webkit-font-smoothing: antialiased;
}
.xh-page *, .xh-page *::before, .xh-page *::after { box-sizing: border-box; }
.xh-page img { max-width: 100%; height: auto; display: block; }
.xh-page a:not([class*="xh-btn"]) { color: inherit; }
.xh-page a { text-decoration: none; }
.xh-page button { font-family: inherit; cursor: pointer; border: none; background: none; }
.xh-page ul, .xh-page ol { list-style: none; margin: 0; padding: 0; }
.xh-page h1,.xh-page h2,.xh-page h3,.xh-page h4 { margin: 0; font-family: var(--xh-font-heading); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.xh-page p { text-wrap: pretty; }
.xh-container { width: 100%; max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad); }
.xh-page::before {
content: ''; position: fixed; inset: 0;
background: radial-gradient(ellipse at 70% 20%, rgba(20,50,100,.15) 0%, transparent 60%),
radial-gradient(ellipse at 30% 80%, rgba(20,40,80,.1) 0%, transparent 50%);
pointer-events: none; z-index: 0;
}
#xh-stars-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; }@media (min-width: 769px) {
.xh-header {
background: var(--xh-bg-header);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
}
@media (max-width: 768px) {
.xh-header {
position: fixed; top: 0; left: 0; right: 0;
}
.xh-page {
padding-top: var(--xh-header-h);
}
}.xh-logo { display: flex; align-items: baseline; gap: 0; flex-shrink: 0; margin-right: 16px; }
.xh-nav { display: flex; gap: 4px; flex: 1; align-items: center; }.xh-header-right { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-shrink: 0; }
.xh-lang-soon-tag {
display: inline-block;
margin-left: 4px;
padding: 1px 6px;
font-size: 9px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
background: var(--xh-orange-text);
color: var(--xh-gold);
border-radius: 999px;
vertical-align: middle;
}
.xh-login-link { font-family: var(--xh-font-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--xh-text); padding: 9px 18px; border: 1px solid var(--xh-border-light); border-radius: var(--xh-radius); transition: color var(--xh-transition), background var(--xh-transition), border-color var(--xh-transition), box-shadow var(--xh-transition), transform var(--xh-transition); }
.xh-login-link:hover { border-color: var(--xh-text-secondary); background: var(--xh-overlay-3); }
.xh-btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--xh-font-heading); font-weight: 700; font-size: 15px;
padding: 10px 24px; border-radius: var(--xh-radius);
letter-spacing: .5px; text-transform: uppercase;
transition: color var(--xh-transition), background var(--xh-transition), border-color var(--xh-transition), box-shadow var(--xh-transition), transform var(--xh-transition); white-space: nowrap;
}
.xh-page a:focus-visible,
.xh-page button:focus-visible,
.xh-page input:focus-visible,
.xh-page summary:focus-visible,
.xh-page [tabindex]:focus-visible { outline: 2px solid var(--xh-orange); outline-offset: 2px; border-radius: 4px; }
.xh-btn--primary { background: var(--xh-orange); color: var(--xh-orange-text); font-weight: 800; box-shadow: 0 0 20px var(--xh-orange-glow); }
.xh-btn--primary:hover { background: var(--xh-orange-hover); color: var(--xh-orange-text); box-shadow: 0 0 30px rgba(232,132,30,.4); transform: translateY(-1px); }
.xh-btn--outline { background: transparent; color: var(--xh-text); border: 1px solid var(--xh-border-light); }
.xh-btn--outline:hover { border-color: var(--xh-text-secondary); background: var(--xh-overlay-3); }.xh-btn--lg { font-size: 17px; padding: 14px 36px; }
.xh-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; background: transparent; border: 0; cursor: pointer; }.xh-mobile-menu {
-webkit-backdrop-filter: blur(12px);
display: none; position: fixed; top: var(--xh-header-h); left: 0; right: 0; bottom: 0;
background: rgba(6,10,20,.96); backdrop-filter: blur(12px);
z-index: 99; padding: 24px 32px; flex-direction: column; gap: 4px; overflow-y: auto;
padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
-webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.xh-mobile-menu.is-open { display: flex; }
.xh-mobile-menu a:not([class*="xh-btn"]) {
font-family: var(--xh-font-heading); font-size: 18px; font-weight: 600;
padding: 14px 0; color: var(--xh-text-secondary);
border-bottom: 1px solid var(--xh-border); transition: color var(--xh-transition);
}
.xh-mobile-menu a:not([class*="xh-btn"]):hover { color: var(--xh-text); }
.xh-mobile-menu .xh-btn { margin-top: 16px; justify-content: center; border: 0; }
.xh-mobile-menu .xh-btn--primary { color: var(--xh-orange-text); border-bottom: 0; }
.xh-mobile-user {
margin: 8px 0 4px; padding: 14px 16px;
background: rgba(255,204,0,.08); border: 1px solid rgba(255,204,0,.25); border-radius: 10px;
display: flex; flex-direction: column; gap: 4px;
}
.xh-mobile-user-label { font-size: 12px; font-weight: 500; color: var(--xh-text-secondary); text-transform: uppercase; letter-spacing: .08em; }
.xh-mobile-user-name { font-family: var(--xh-font-heading); font-size: 20px; font-weight: 700; color: var(--xh-yellow, var(--xh-gold)); }
.xh-mobile-universes {
margin: 16px 0 8px; padding: 14px 0;
border-top: 1px solid var(--xh-border);
}
.xh-mobile-universes__heading {
font-size: 11px; font-weight: 700; color: var(--xh-text-muted, var(--xh-text-dim));
text-transform: uppercase; letter-spacing: .1em; padding: 0 4px 8px;
}
.xh-mobile-universe-item {
display: flex !important; align-items: center; justify-content: space-between;
padding: 12px 14px !important; margin: 4px 0; border-bottom: 0 !important;
background: var(--xh-overlay-2); border: 1px solid var(--xh-border);
border-radius: 8px; transition: border-color var(--xh-transition), background var(--xh-transition);
font-size: 16px !important; font-weight: 600 !important;
}
.xh-mobile-universe-item:hover { border-color: rgba(232,132,30,.5); background: rgba(232,132,30,.06); }
.xh-mobile-universe-name { color: var(--xh-text); }
.xh-mobile-universe-ver { font-size: 11px; color: var(--xh-text-muted, var(--xh-text-dim)); font-weight: 500; font-family: var(--xh-font-mono, monospace); }
.xh-user-dropdown {
min-width: 260px;
grid-template-columns: 1fr !important;
}
#modal-mask {
display: none;
position: fixed; inset: 0; z-index: 9999;
background: rgba(6,10,20,.78);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
padding: 20px;
overflow-y: auto;
}
body.body-modalShow #modal-mask {
display: flex !important;
align-items: center;
justify-content: center;
}
#modal-mask .modal-body {
display: none;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
width: 100% !important;
max-width: 480px !important;
max-height: calc(100vh - 40px);
overflow-y: auto;
margin: 0 auto;
}
#modal-mask #modal-reg { max-width: min(800px, calc(100vw - 32px)) !important; }
@media (max-width: 820px) {
#modal-mask #modal-reg { max-width: 100% !important; width: 100% !important; }
}
#modal-mask .modal-body.modal-show { display: block; }
body.body-modalShow { overflow: hidden; }
#modal-mask #modal-login,
#modal-mask #modal-reg,
#modal-mask #modal-recover,
#modal-mask #modal-recoverend {
height: auto !important;
}
#modal-mask .modal-content {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
padding: 0 !important;
overflow: visible !important;
}
#modal-mask .modal-close-mask { position: fixed; inset: 0; z-index: -1; cursor: pointer; }
#modal-mask .modal-title { font-family: var(--xh-font-display); font-size: 24px; color: var(--xh-text); margin-bottom: 20px; text-align: center; font-style: normal !important; font-weight: 700; height: auto; }
#modal-mask .modal-title span { display: block; font-size: 13px; color: var(--xh-text-dim); margin-top: 8px; font-family: var(--xh-font-body); }
#modal-mask .modal-title span span { display: inline; color: var(--xh-orange); cursor: pointer; text-decoration: underline; }
#modal-mask .modal-content { width: 100%; }
#modal-mask .modal-soc { margin-bottom: 16px; }
#modal-mask .modal-soc-icos { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
#modal-mask .modal-soc-sep { text-align: center; color: var(--xh-text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin: 16px 0; position: relative; }
#modal-mask .modal-soc-sep::before, #modal-mask .modal-soc-sep::after { content: ''; position: absolute; top: 50%; width: calc(50% - 24px); height: 1px; background: var(--xh-border); }
#modal-mask .modal-soc-sep::before { left: 0; }
#modal-mask .modal-soc-sep::after { right: 0; }
#modal-mask form { display: flex; flex-direction: column; gap: 12px; }
#modal-mask .input-text, #modal-mask .select { background: var(--xh-overlay-4); border: 1px solid var(--xh-border-input, #34456a); border-radius: var(--xh-radius-md); padding: 12px 14px; color: var(--xh-text); font-size: 16px ; width: 100%; font-family: inherit; }
#modal-mask .input-text:focus, #modal-mask .select:focus { outline: none; border-color: var(--xh-orange); }
#modal-mask .modal-extra-text { text-align: center; font-size: 13px; }
#modal-mask .modal-extra-text a { color: var(--xh-text-dim); text-decoration: none; }
#modal-mask .modal-extra-text a:hover { color: var(--xh-orange); }
#modal-mask .btn { padding: 14px 20px; border-radius: var(--xh-radius-md); font-weight: 700; cursor: pointer; border: none; font-size: 14px; }
#modal-mask .btn-primary { background: var(--xh-orange); color: var(--xh-orange-text); font-weight: 700; }
#modal-mask .btn-primary:hover { background: var(--xh-orange-hover); }
#modal-mask .btn-big { font-size: 16px; padding: 16px; }
#modal-mask .modal-block { margin-bottom: 12px; }
#modal-mask .modal-policy-text, #modal-mask .recover-text { font-size: 12px; color: var(--xh-text-dim); line-height: 1.5; }
#modal-mask label { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--xh-text-dim); cursor: pointer; }
#modal-mask label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.xh-hero { position: relative; z-index: 1; min-height: 520px; padding: 56px 0 40px; overflow: hidden; display: flex; align-items: center; background: var(--xh-bg-deep); }
.xh-hero > picture {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; display: block;
}
.xh-hero .xh-hero-img {
width: 100%; height: 100%; object-fit: cover; object-position: center;
display: block;
aspect-ratio: auto;
max-width: none;
}
.xh-hero-bg {
position: absolute; inset: 0; z-index: 1;
background: transparent;
pointer-events: none;
}
.xh-hero-bg::after {
content: ''; position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(6,10,20,.85) 0%, var(--xh-bg-dark-a50) 45%, transparent 70%),
linear-gradient(180deg, transparent 0%, transparent 50%, rgba(6,10,20,.85) 100%);
}
@media (max-width: 860px) {
.xh-hero-bg::after {
background:
linear-gradient(180deg,
rgba(6,10,20,.30) 0%,
var(--xh-bg-dark-a50) 35%,
rgba(6,10,20,.80) 60%,
rgba(6,10,20,.97) 80%,
var(--xh-bg-primary) 95%);
}
}
.xh-hero-inner {
position: relative; z-index: 2; width: 100%; max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad);
display: flex; align-items: center; justify-content: flex-start; gap: 40px;
}
.xh-hero-content { max-width: 560px; flex-shrink: 0; }
.xh-hero-title {
font-family: var(--xh-font-display); font-size: clamp(38px, 4.8vw, 60px);
line-height: 1.0; letter-spacing: 1px; color: var(--xh-white); margin: 0 0 10px; text-transform: uppercase;
display: flex; flex-direction: column;
}
.xh-hero-title span { display: block; }
.xh-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;
}
.xh-hero-subtitle { font-family: var(--xh-font-heading); font-size: 18px; font-weight: 600; color: var(--xh-text); margin-bottom: 10px; letter-spacing: .3px; }
.xh-hero-desc { font-size: 15px; color: var(--xh-text-secondary); max-width: 460px; margin-bottom: 22px; line-height: 1.55; }
.xh-hero-eyebrow {
display: inline-flex; align-items: center; gap: 12px;
margin-bottom: 18px; padding: 7px 14px;
background: var(--xh-overlay-2);
border: 1px solid var(--xh-border-light); border-radius: 999px;
font-family: var(--xh-font-heading); font-size: 12px; font-weight: 600;
color: var(--xh-text-secondary); letter-spacing: .3px;
flex-wrap: wrap;
}
.xh-hero-eyebrow strong { color: var(--xh-white); font-weight: 700; }
.xh-trust-pill { display: inline-flex; align-items: center; gap: 7px; }
.xh-trust-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--xh-green); box-shadow: 0 0 0 0 rgba(32,168,104,.6); animation: xh-pulse 2s infinite; flex-shrink: 0; }
.xh-trust-sep { width: 1px; height: 12px; background: var(--xh-border-light); display: inline-block; }
.xh-trust-rating { display: inline-flex; align-items: center; gap: 5px; }
.xh-trust-rating svg { width: 13px; height: 13px; color: var(--xh-amber); flex-shrink: 0; }
.xh-trust-muted { color: var(--xh-text-muted); font-weight: 600; }
.xh-trust-season strong { color: var(--xh-orange); }
.xh-hero-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.xh-hero-actions .xh-btn { flex-shrink: 0; }
.xh-hero-actions .xh-btn--primary {
font-size: 16px;
padding: 14px 28px;
box-shadow: 0 0 28px var(--xh-orange-glow), 0 0 0 1px rgba(255, 140, 0, 0.3);
position: relative;
overflow: hidden;
}
.xh-hero-actions .xh-btn--primary::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 200%; height: 200%;
background: radial-gradient(circle, rgba(255, 200, 80, 0.25) 0%, transparent 50%);
transform: translate(-50%, -50%);
pointer-events: none;
animation: xh-hero-cta-pulse 3.5s ease-in-out infinite;
}
@keyframes xh-hero-cta-pulse {
0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.95); }
50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
.xh-hero-actions .xh-btn--primary::after { animation: none; opacity: 0.5; }
}
.xh-hero-perks { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 22px; }
.xh-hero-perks span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--xh-text-secondary); font-family: var(--xh-font-heading); font-weight: 600; letter-spacing: .2px; }
.xh-hero-perks svg { width: 14px; height: 14px; color: var(--xh-green); flex-shrink: 0; }
.xh-btn--ghost {
background: transparent; color: var(--xh-text);
border: 1px solid transparent; padding: 10px 16px;
}
.xh-btn--ghost svg { width: 18px; height: 18px; color: var(--xh-text); }
.xh-btn--ghost:hover { background: var(--xh-overlay-4); border-color: var(--xh-border-light); }
.xh-hero-apps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xh-hero-apps-label { font-size: 12px; color: var(--xh-text-muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .5px; font-family: var(--xh-font-heading); font-weight: 600; }
.xh-store-badge {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 16px; border: 1px solid var(--xh-border-light);
border-radius: var(--xh-radius); color: var(--xh-text);
font-family: var(--xh-font-heading); font-weight: 600;
transition: color var(--xh-transition), background var(--xh-transition), border-color var(--xh-transition), box-shadow var(--xh-transition), transform var(--xh-transition); white-space: nowrap;
background: var(--xh-overlay-1);
}
.xh-store-badge:hover { border-color: var(--xh-text-secondary); background: var(--xh-overlay-4); transform: translateY(-1px); }
.xh-store-badge svg { width: 22px; height: 22px; flex-shrink: 0; }
.xh-store-badge--browser svg { color: var(--xh-blue-light); }
.xh-store-badge--browser:hover { border-color: rgba(74,157,245,.5); box-shadow: 0 6px 20px rgba(74,157,245,.18); }
.xh-store-badge--gp svg { color: var(--xh-green-bright); }
.xh-store-badge--gp:hover { border-color: rgba(61,219,133,.5); box-shadow: 0 6px 20px rgba(61,219,133,.18); }
.xh-store-badge--as svg { color: var(--xh-white); }
.xh-store-badge--as:hover { border-color: rgba(245,246,250,.5); box-shadow: 0 6px 20px rgba(255,255,255,.10); }
.xh-store-badge-stack { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.xh-store-badge-stack strong { font-size: 13px; font-weight: 700; }
.xh-store-badge-stack small { font-size: 10px; color: var(--xh-text-muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.xh-stats { position: relative; z-index: 1; padding: 8px 0 8px; background: transparent; border-bottom: 1px solid var(--xh-border); border-top: 1px solid var(--xh-border); }
.xh-stats-inner { max-width: var(--xh-max-w); margin: 0 auto; padding: 18px 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.xh-stat { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 14px; min-width: 0; }
.xh-stat + .xh-stat { border-left: 1px solid var(--xh-border); padding-left: 24px; }
.xh-stat-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--xh-text-secondary); flex-shrink: 0; background: var(--xh-overlay-2); border: 1px solid var(--xh-border); border-radius: 50%; }
.xh-stat-icon svg { width: 22px; height: 22px; }
.xh-stat-number { font-family: var(--xh-font-heading); font-size: 26px; font-weight: 700; color: var(--xh-text); line-height: 1.1; }
.xh-stat-label { font-size: 12px; color: var(--xh-text-muted); letter-spacing: .3px; line-height: 1.3; }
.xh-galaxy { position: relative; z-index: 1; padding: 64px 0; }
.xh-galaxy-inner-wrap { max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad); }
.xh-galaxy-card {
position: relative; overflow: hidden;
background: linear-gradient(180deg, var(--xh-bg-card) 0%, var(--xh-bg-primary) 100%);
border: 1px solid var(--xh-border-light); border-radius: var(--xh-radius-lg);
padding: 40px;
}
.xh-galaxy-map-bg {
position: absolute; right: -5%; top: 50%; transform: translateY(-50%);
width: 70%; aspect-ratio: 1100 / 619;
background-size: cover; background-position: center;
opacity: .85; pointer-events: none;
}
.xh-galaxy-map-overlay {
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(90deg, var(--xh-bg-card) 0%, rgba(13,20,36,.85) 35%, rgba(13,20,36,.25) 70%, rgba(13,20,36,.7) 100%),
radial-gradient(circle at 80% 50%, transparent 0%, rgba(13,20,36,.4) 60%);
}
@media (max-width: 860px) {
.xh-galaxy-map-bg {
width: 110%; right: -5%; left: -5%; top: 50%; bottom: 0; transform: none;
aspect-ratio: auto; height: 50%;
background-position: center top;
background-size: cover;
opacity: 1;
}
.xh-galaxy-map-overlay {
background:
linear-gradient(180deg,
var(--xh-bg-card) 0%,
var(--xh-bg-card) 48%,
rgba(13,20,36,.55) 52%,
rgba(13,20,36,0) 70%,
rgba(13,20,36,0) 100%);
}
}
.xh-galaxy-inner { display: flex; gap: 48px; align-items: flex-start; position: relative; z-index: 1; }
.xh-live-indicator {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--xh-font-heading); font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.2px;
color: var(--xh-text-secondary); margin-bottom: 16px;
}
.xh-trust-dot, .xh-live-dot { position: relative; }
.xh-trust-dot::after, .xh-live-dot::after {
content: ''; position: absolute; inset: 0;
border-radius: 50%; background: rgba(32,168,104,.7);
animation: xh-pulse 2s infinite;
will-change: transform, opacity;
pointer-events: none;
}
@keyframes xh-pulse {
0%   { transform: scale(1); opacity: .7; }
70%  { transform: scale(2.6); opacity: 0; }
100% { transform: scale(2.6); opacity: 0; }
}
.xh-galaxy-content { flex: 0 0 460px; max-width: 60%; }
@media (max-width: 860px) { .xh-galaxy-content { flex: 1; max-width: 100%; } }
.xh-galaxy-title { font-size: 28px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; color: var(--xh-white); }
.xh-galaxy-desc { font-size: 15px; color: var(--xh-text-secondary); margin-bottom: 28px; line-height: 1.6; }
.xh-galaxy-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.xh-galaxy-action {
display: flex; align-items: center; gap: 14px;
padding: 12px 14px;
background: rgba(20, 35, 60, .45);
border: 1px solid rgba(74, 157, 245, .12);
border-radius: 10px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background var(--xh-transition), border-color var(--xh-transition), transform var(--xh-transition);
}
.xh-galaxy-action:hover {
background: rgba(28, 50, 84, .65);
border-color: rgba(74, 157, 245, .35);
transform: translateX(2px);
}
.xh-galaxy-action-icon {
width: 40px; height: 40px; border-radius: var(--xh-radius);
background: var(--xh-bg-card); border: 1px solid var(--xh-border);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.xh-galaxy-action-icon svg { width: 20px; height: 20px; color: var(--xh-blue); }
.xh-galaxy-action span { font-family: var(--xh-font-heading); font-size: 15px; font-weight: 600; color: var(--xh-text); }
.xh-galaxy-map { flex: 1; min-width: 0; }
.xh-galaxy-map svg { width: 100%; height: auto; }
.xh-galaxy-map-img { width: 100%; border-radius: var(--xh-radius-lg); border: 1px solid var(--xh-border); }
.xh-universes { position: relative; z-index: 1; padding: 64px 0; }
.xh-universes-header { text-align: center; margin-bottom: 40px; }
.xh-universes-title {
font-size: 26px; text-transform: uppercase; letter-spacing: 2px; color: var(--xh-white); margin-bottom: 10px;
display: flex; align-items: center; justify-content: center; gap: 16px;
}
.xh-universes-title::before, .xh-universes-title::after { content: ''; flex: 1; max-width: 120px; height: 1px; background: var(--xh-border-light); }
.xh-universes-sub { font-size: 15px; color: var(--xh-text-secondary); }
.xh-universe-grid { max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.xh-universe-card {
position: relative; border: 1px solid var(--xh-border); border-radius: var(--xh-radius-lg);
padding: 28px 24px; background: var(--xh-bg-card); overflow: hidden;
transition: color var(--xh-transition), background var(--xh-transition), border-color var(--xh-transition), box-shadow var(--xh-transition), transform var(--xh-transition); display: flex; flex-direction: column;
min-height: 460px;
}
.xh-universe-card:hover { border-color: var(--xh-border-light); transform: translateY(-3px); box-shadow: 0 8px 32px var(--xh-shadow-soft); }
.xh-universe-card--woa {
border-color: rgba(232,132,30,.55);
box-shadow: 0 0 0 1px rgba(232,132,30,.20) inset, 0 0 32px rgba(232,132,30,.10);
}
.xh-universe-card--woa:hover { border-color: rgba(232,132,30,.75); box-shadow: 0 0 0 1px var(--xh-orange-a30) inset, 0 0 48px var(--xh-orange-a18); }
.xh-universe-badge {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--xh-font-heading); font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1px; padding: 4px 12px;
background: var(--xh-orange); color: var(--xh-orange-text); border-radius: 999px;
margin-bottom: 14px; align-self: flex-start;
box-shadow: 0 0 14px var(--xh-orange-glow);
}
.xh-universe-badge::before { content: '★'; font-size: 11px; }
.xh-universe-header-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.xh-universe-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.xh-universe-icon svg { width: 32px; height: 32px; }
.xh-universe-name { font-family: var(--xh-font-heading); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--xh-white); line-height: 1.1; }
.xh-universe-name-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.xh-universe-meta { font-family: var(--xh-font-body); font-size: 12px; font-weight: 400; color: var(--xh-text-muted); letter-spacing: .2px; text-transform: none; }
.xh-universe-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; flex: 1; }
.xh-universe-feature { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--xh-text-secondary); }
.xh-universe-feature::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.xh-universe-card--woa .xh-universe-feature::before { background: var(--xh-orange); }
.xh-universe-card--classic .xh-universe-feature::before { background: var(--xh-blue); }
.xh-universe-card--reborn .xh-universe-feature::before { background: var(--xh-teal); }
.xh-universe-platforms { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; font-size: 13px; color: var(--xh-text-muted); }
.xh-universe-platforms svg { width: 16px; height: 16px; }
.xh-universe-platforms span { display: flex; align-items: center; gap: 5px; }
.xh-universe-card .xh-btn { align-self: stretch; justify-content: center; }
.xh-universe-cta { margin-top: auto; }
.xh-universe-card-bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-size: cover; background-position: center;
}
.xh-universe-card > *:not(.xh-universe-card-bg) { position: relative; z-index: 1; }
.xh-universe-card-bg::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(12,19,34,0) 0%, rgba(12,19,34,.25) 45%, rgba(12,19,34,.85) 100%);
}
.xw-top { max-width: var(--xh-max-w); margin: 56px auto; padding: 0 var(--xh-container-pad); }
.xw-top-wrap {
background: rgba(12, 19, 34, .55);
border: 1px solid var(--xh-border);
border-radius: var(--xh-radius-lg);
padding: 28px 32px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.xw-top-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.xw-top-title { font-family: var(--xh-font-display); font-size: clamp(20px, 2.4vw, 26px); margin: 0; color: var(--xh-text); }
.xw-top-update { font-size: 12px; color: var(--xh-text-muted); font-family: var(--xh-font-mono, monospace); }
.xw-top-note { margin: 16px 0 0; font-size: 11px; color: var(--xh-text-secondary); font-style: italic; }
.xw-top-table { display: flex; flex-direction: column; gap: 4px; }
.xw-top-row {
display: grid;
grid-template-columns: 50px 1fr 80px 130px;
gap: 12px;
padding: 12px 14px;
background: var(--xh-overlay-1);
border: 1px solid var(--xh-overlay-4);
border-radius: var(--xh-radius);
align-items: center;
font-size: 14px;
}
.xw-top-row--head {
background: transparent;
border: 0;
padding: 6px 14px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--xh-text-muted);
}
.xw-top-cell { color: var(--xh-text); }
.xw-top-cell--rank { font-family: var(--xh-font-mono, monospace); font-weight: 700; }
.xw-top-rank--gold   { color: var(--xh-gold); }
.xw-top-rank--silver { color: #c0c8d4; }
.xw-top-rank--bronze { color: #cd7f32; }
.xw-top-cell--name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.xw-top-tag { font-family: var(--xh-font-mono, monospace); font-weight: 700; color: var(--xh-orange); font-size: 13px; }
.xw-top-fullname { color: var(--xh-text); font-weight: 600; }
.xw-top-cell--members,
.xw-top-cell--points { font-family: var(--xh-font-mono, monospace); text-align: right; }
.xw-top-cell--change { text-align: right; font-family: var(--xh-font-mono, monospace); font-size: 12px; font-weight: 600; }
.xw-top-change--up   { color: var(--xh-green); }
.xw-top-change--down { color: var(--xh-red); }
.xw-top-battles { display: flex; flex-direction: column; gap: 10px; }
.xw-top-battle {
padding: 14px 16px;
background: var(--xh-overlay-1);
border: 1px solid var(--xh-overlay-4);
border-left: 3px solid var(--xh-border-light);
border-radius: var(--xh-radius);
transition: border-color .2s, background .2s;
}
.xw-top-battle:hover { background: var(--xh-overlay-3); }
.xw-top-battle[data-xh-result="victory"] { border-left-color: var(--xh-green); }
.xw-top-battle[data-xh-result="defeat"]  { border-left-color: var(--xh-red); }
.xw-top-battle[data-xh-result="draw"]    { border-left-color: var(--xh-gold); }
.xw-top-battle[data-xh-result="a"]       { border-left-color: var(--xh-green); }
.xw-top-battle[data-xh-result="r"]       { border-left-color: var(--xh-red); }
.xw-top-battle[data-xh-result="w"]       { border-left-color: var(--xh-gold); }
.xw-top-battle-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.xw-top-battle-tags { font-family: var(--xh-font-mono, monospace); font-weight: 700; color: var(--xh-text); }
.xw-top-vs { color: var(--xh-text-muted); font-weight: 400; margin: 0 2px; }
.xw-top-battle-result {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
padding: 3px 8px;
border-radius: 999px;
}
.xw-top-battle-result--victory { background: rgba(32,168,104,.18); color: #5fc88a; }
.xw-top-battle-result--defeat  { background: rgba(208,80,32,.18); color: #e88555; }
.xw-top-battle-result--draw    { background: rgba(255,204,0,.18); color: var(--xh-gold); }
.xw-top-battle-result--a       { background: rgba(32,168,104,.18); color: #5fc88a; }
.xw-top-battle-result--r       { background: rgba(208,80,32,.18); color: #e88555; }
.xw-top-battle-result--w       { background: rgba(255,204,0,.18); color: var(--xh-gold); }
.xw-top-battle-stats { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--xh-text-muted); }
.xw-top-battle-stats strong { color: var(--xh-text); font-weight: 600; font-family: var(--xh-font-mono, monospace); }
.xw-top-players { display: flex; flex-direction: column; gap: 6px; }
.xw-top-player {
display: grid;
grid-template-columns: 50px 1fr 80px 110px;
gap: 12px;
padding: 10px 14px;
background: var(--xh-overlay-1);
border: 1px solid var(--xh-overlay-4);
border-radius: var(--xh-radius);
align-items: center;
font-size: 14px;
}
.xw-top-player[data-xh-rank="1"] { background: linear-gradient(90deg, rgba(255,204,0,.10), rgba(255,204,0,0)); border-color: rgba(255,204,0,.3); }
.xw-top-player[data-xh-rank="2"] { background: linear-gradient(90deg, rgba(192,200,212,.08), transparent); }
.xw-top-player[data-xh-rank="3"] { background: linear-gradient(90deg, rgba(205,127,50,.08), transparent); }
.xw-top-player-rank { font-family: var(--xh-font-mono, monospace); font-weight: 700; color: var(--xh-text-muted); }
.xw-top-player-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; }
.xw-top-player-status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-left: 4px; }
.xw-top-player-status--online { background: var(--xh-green); box-shadow: 0 0 0 2px rgba(32,168,104,.25); }
.xw-top-player-status--offline { background: #5a6378; }
.xw-top-player-guild { font-family: var(--xh-font-mono, monospace); color: var(--xh-orange); font-weight: 600; font-size: 13px; }
.xw-top-player-points { font-family: var(--xh-font-mono, monospace); text-align: right; }
@media (max-width: 720px) {
.xw-top { padding: 0 16px; }
.xw-top-wrap { padding: 20px 16px; }
.xw-top-row,
.xw-top-player {
grid-template-columns: 40px 1fr 70px;
font-size: 13px;
padding: 10px 12px;
}
.xw-top-row .xw-top-cell--members,
.xw-top-row .xw-top-cell--change,
.xw-top-row--head .xw-top-cell--members,
.xw-top-row--head .xw-top-cell--change { display: none; }
.xw-top-battle-stats { gap: 10px; font-size: 12px; }
}
.xh-galaxy-factions {
display: flex; flex-direction: column; gap: 8px;
margin-bottom: 24px;
padding: 14px 16px;
background: rgba(8, 14, 28, .55);
border: 1px solid rgba(74, 157, 245, .15);
border-radius: 12px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.xh-galaxy-factions-title {
font-family: var(--xh-font-heading);
font-size: 11px;
font-weight: 700;
color: var(--xh-text-secondary);
letter-spacing: .15em;
text-transform: uppercase;
margin-bottom: 4px;
}
.xh-galaxy-faction {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 10px;
border-left: 3px solid var(--xh-blue);
background: rgba(14, 24, 44, .4);
border-radius: 0 6px 6px 0;
transition: background .2s, border-color .2s;
}
.xh-galaxy-faction:hover { background: rgba(18, 32, 60, .6); }
.xh-galaxy-faction--grabtor { border-left-color: var(--xh-woa-red, var(--xh-red)); }
.xh-galaxy-faction--senteri { border-left-color: var(--xh-teal, var(--xh-teal)); }
.xh-galaxy-faction--talkor { border-left-color: var(--xh-purple, var(--xh-purple)); }
.xh-galaxy-faction-name {
font-family: var(--xh-font-heading);
font-size: 14px;
font-weight: 700;
color: var(--xh-text);
}
.xh-galaxy-faction-tag {
font-size: 12px;
color: var(--xh-text-muted);
text-align: right;
}
@media (max-width: 480px) {
.xh-galaxy-faction { flex-direction: column; align-items: flex-start; gap: 2px; }
.xh-galaxy-faction-tag { text-align: left; }
}
.xh-galaxy,
.xh-universes,
.xh-kb-strip,
.xh-forum-updates,
.xh-features-grid,
.xh-section-cta,
.xh-community-block {
content-visibility: auto;
contain-intrinsic-size: 1px 800px;
}
.xh-universe-actions { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.xh-universe-actions .xh-btn { width: 100%; box-sizing: border-box; justify-content: center; }
.xh-universe-actions .xh-btn--outline {
padding: 8px 12px;
font-size: 13px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.85);
}
.xh-universe-actions .xh-btn--outline:hover {
background: var(--xh-overlay-6);
border-color: rgba(255, 255, 255, 0.30);
color: var(--xh-white);
}
.xh-universe-card--woa .xh-universe-card-bg {
background-image: url('/media/v2/img/universe-classic-v2.webp');
background-position: center 30%;
}
.xh-universe-card--classic .xh-universe-card-bg {
background-image: url('/media/v2/img/hero-woa-battle.webp');
background-position: center 30%;
}
.xh-universe-card--reborn .xh-universe-card-bg {
background-image: url('/media/v2/img/universe-reborn-v2.webp');
background-position: center 30%;
}
.xh-advantages { position: relative; z-index: 1; padding: 56px 0; border-top: 1px solid var(--xh-border); }
.xh-advantages-title {
text-align: center; font-size: 22px; text-transform: uppercase; letter-spacing: 2px;
color: var(--xh-white); margin-bottom: 40px;
display: flex; align-items: center; justify-content: center; gap: 16px;
}
.xh-advantages-title::before, .xh-advantages-title::after { content: ''; flex: 1; max-width: 100px; height: 1px; background: var(--xh-border-light); }
.xh-advantages-grid { max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad); display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.xh-advantage { text-align: center; padding: 0 8px; }
.xh-advantage-icon { width: 64px; height: 64px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--xh-overlay-2); border: 1px solid var(--xh-border); transition: transform var(--xh-transition), box-shadow var(--xh-transition), border-color var(--xh-transition); }
.xh-advantage:hover .xh-advantage-icon { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.xh-advantage-icon svg { width: 28px; height: 28px; stroke-width: 1.5; }
.xh-advantage--blue   { --xh-adv-color: var(--xh-blue-light); --xh-adv-rgb: 74,157,245; }
.xh-advantage--orange { --xh-adv-color: var(--xh-orange); --xh-adv-rgb: 232,132,30; }
.xh-advantage--gold   { --xh-adv-color: var(--xh-amber); --xh-adv-rgb: 245,197,66; }
.xh-advantage--teal   { --xh-adv-color: var(--xh-teal); --xh-adv-rgb: 32,176,184; }
.xh-advantage--green  { --xh-adv-color: var(--xh-green); --xh-adv-rgb: 32,168,104; }
.xh-advantage .xh-advantage-icon {
color: var(--xh-adv-color, var(--xh-text));
background: rgba(var(--xh-adv-rgb, 255,255,255), .10);
border-color: rgba(var(--xh-adv-rgb, 255,255,255), .30);
}
.xh-advantage:hover .xh-advantage-icon {
border-color: rgba(var(--xh-adv-rgb, 255,255,255), .55);
box-shadow: 0 12px 32px rgba(var(--xh-adv-rgb, 0,0,0), .20);
}
.xh-advantage h3 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; color: var(--xh-white); }
.xh-advantage p { margin: 0; font-size: 13px; color: var(--xh-text-muted); line-height: 1.5; text-wrap: pretty; }
.xh-community { position: relative; z-index: 1; padding: 64px 0; }
.xh-community-header { text-align: center; margin-bottom: 36px; }
.xh-community-header h2 {
font-size: 26px; text-transform: uppercase; letter-spacing: 2px; color: var(--xh-white);
display: flex; align-items: center; justify-content: center; gap: 16px;
}
.xh-community-header h2::before, .xh-community-header h2::after { content: ''; flex: 1; max-width: 120px; height: 1px; background: var(--xh-border-light); }
.xh-community-cards { max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad); display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.xh-comm-card {
display: flex; align-items: center; gap: 14px;
padding: 18px 20px; border-radius: var(--xh-radius-lg);
background: var(--xh-bg-card); border: 1px solid var(--xh-border);
transition: color var(--xh-transition), background var(--xh-transition), border-color var(--xh-transition), box-shadow var(--xh-transition), transform var(--xh-transition); position: relative; overflow: hidden;
}
.xh-comm-card::before { content: ''; position: absolute; inset: 0; background: var(--xh-cc, transparent); opacity: 0; transition: opacity var(--xh-transition); pointer-events: none; }
.xh-comm-card > * { position: relative; z-index: 1; }
.xh-comm-card:hover { transform: translateY(-3px); border-color: var(--xh-cc, var(--xh-border-light)); box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 32px var(--xh-cc-glow, transparent); }
.xh-comm-card:hover::before { opacity: .10; }
.xh-comm-card-icon {
width: 44px; height: 44px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; background: var(--xh-cc-bg, rgba(255,255,255,.04));
border: 1px solid var(--xh-cc-border, var(--xh-border));
color: var(--xh-cc, var(--xh-text));
}
.xh-comm-card-icon svg { width: 22px; height: 22px; }
.xh-comm-card-body { min-width: 0; }
.xh-comm-card-title { font-family: var(--xh-font-heading); font-size: 15px; font-weight: 700; color: var(--xh-text); line-height: 1.2; margin-bottom: 3px; letter-spacing: .3px; }
.xh-comm-card-sub { font-size: 12px; color: var(--xh-text-muted); letter-spacing: .2px; }
.xh-comm-card--forum    { --xh-cc: var(--xh-teal); --xh-cc-bg: rgba(32,176,184,.10);  --xh-cc-border: rgba(32,176,184,.30);  --xh-cc-glow: rgba(32,176,184,.18); }
.xh-comm-card--discord  { --xh-cc: #5865F2; --xh-cc-bg: rgba(88,101,242,.12);  --xh-cc-border: rgba(88,101,242,.30);  --xh-cc-glow: rgba(88,101,242,.22); }
.xh-comm-card--telegram { --xh-cc: #29B6F6; --xh-cc-bg: rgba(41,182,246,.12);  --xh-cc-border: rgba(41,182,246,.30);  --xh-cc-glow: rgba(41,182,246,.20); }
.xh-comm-card--vk        { --xh-cc: #4680C2; --xh-cc-bg: rgba(70,128,194,.12);  --xh-cc-border: rgba(70,128,194,.30);  --xh-cc-glow: rgba(70,128,194,.20); }
.xh-comm-card--facebook  { --xh-cc: #1877F2; --xh-cc-bg: rgba(24,119,242,.12);  --xh-cc-border: rgba(24,119,242,.30);  --xh-cc-glow: rgba(24,119,242,.20); }
.xh-comm-card--instagram { --xh-cc: #E1306C; --xh-cc-bg: rgba(225,48,108,.12);  --xh-cc-border: rgba(225,48,108,.30);  --xh-cc-glow: rgba(225,48,108,.20); }
.xh-comm-card--youtube   { --xh-cc: #FF3D3D; --xh-cc-bg: rgba(255,61,61,.12);   --xh-cc-border: rgba(255,61,61,.30);   --xh-cc-glow: rgba(255,61,61,.20); }
.xh-cta { position: relative; z-index: 1; padding: 56px 0 72px; }
.xh-cta-wrap { max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad); }
.xh-cta-inner {
padding: 56px 48px;
border: 1px solid var(--xh-border-light); border-radius: var(--xh-radius-lg);
overflow: hidden; position: relative;
display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.xh-cta-bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: url('/media/v2/img/cta-bg.webp') center center / cover no-repeat;
}
.xh-cta-bg::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(8,12,22,.94) 0%, rgba(8,12,22,.7) 50%, rgba(8,12,22,.55) 100%);
}
@media (max-width: 860px) {
.xh-cta-bg {
background-image: url('/media/v2/img/cta-bg.webp');
background-position: 35% center;
background-size: 200% auto;
background-repeat: no-repeat;
}
.xh-cta-bg::after {
background:
radial-gradient(ellipse 70% 60% at 50% 50%,
transparent 0%,
rgba(8,12,22,.30) 50%,
rgba(8,12,22,.80) 85%,
rgba(8,12,22,1) 100%);
}
}
.xh-cta-content { position: relative; z-index: 1; flex: 1; min-width: 280px; max-width: 560px; }
.xh-cta-title { font-size: 34px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px; color: var(--xh-white); line-height: 1.05; }
.xh-cta-desc { margin: 0 0 22px; font-size: 16px; color: var(--xh-text-secondary); line-height: 1.55; }
.xh-cta-badges { display: flex; gap: 24px; flex-wrap: wrap; }
.xh-cta-badges span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--xh-text); font-family: var(--xh-font-heading); font-weight: 600; }
.xh-cta-badges svg { width: 18px; height: 18px; color: var(--xh-text-secondary); flex-shrink: 0; }
.xh-cta-action { position: relative; z-index: 1; }.xh-footer-inner { max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad); padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); }
.xh-footer-grid {
display: grid; gap: 28px 32px;
grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr 1fr;
align-items: start;
}
.xh-footer-col a.xh-footer-social,
.xh-footer-social {
width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--xh-bg-card);
border: 1px solid var(--xh-border); display: inline-flex; align-items: center; justify-content: center;
color: var(--xh-text-muted); transition: color var(--xh-transition), background var(--xh-transition), border-color var(--xh-transition), box-shadow var(--xh-transition), transform var(--xh-transition); flex-shrink: 0;
}.xh-footer-col h4, .xh-footer-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--xh-text-muted); margin-bottom: 14px; }
.xh-footer-col li a + a { display: inline; padding: 0; }
.xh-reveal.xh-reveal-init { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.xh-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 1280px) { .xh-hero-bg { background-position: 70% center; } }
@media (max-width: 1024px) {
.xh-community-cards { grid-template-columns: repeat(3, 1fr); }
.xh-community-cards a:nth-child(4),
.xh-community-cards a:nth-child(5) { grid-column: span 1; }
.xh-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 16px 24px; }
.xh-stat + .xh-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
.xh-nav { display: none; }
.xh-burger { display: flex; }
.xh-login-link { display: none; }
.xh-btn--header { display: none; }
.xh-header-right { gap: 8px; }
.xh-lang-wrap .xh-lang { padding: 6px 8px; font-size: 12px; }
.xh-lang-wrap .xh-lang-icon { width: 14px; height: 14px; }
.xh-hero { min-height: 480px; padding: 60px 0 40px; }
.xh-galaxy-content { flex: 0 0 280px; }
.xh-universe-card { padding: 22px 18px; }
.xh-universe-name { font-size: 18px; }
.xh-advantages-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.xh-page { --xh-container-pad: 20px; }
.xh-mobile-menu { padding-left: var(--xh-container-pad); padding-right: var(--xh-container-pad); }
.xh-header-inner { gap: 12px; }
.xh-logo-x, .xh-logo-text { font-size: 20px; letter-spacing: 1.5px; }
.xh-hero { min-height: auto; padding: 56px 0 40px; }
.xh-hero-content { max-width: 100%; }
.xh-hero-title {
font-size: clamp(36px, 11vw, 56px);
letter-spacing: .5px;
word-break: break-word;
}
.xh-hero-subtitle { font-size: 17px; }
.xh-hero-desc { font-size: 15px; max-width: 100%; margin-bottom: 24px; }
.xh-hero-actions { gap: 12px; margin-bottom: 24px; }
.xh-galaxy { padding: 56px 0 48px; }
.xh-galaxy-inner { flex-direction: column; gap: 28px; }
.xh-galaxy-content { flex: none; max-width: 100%; }
.xh-galaxy-title { font-size: 24px; letter-spacing: 1.5px; }
.xh-galaxy-desc { font-size: 14px; }
.xh-galaxy-actions { gap: 12px; margin-bottom: 24px; }
.xh-universes { padding: 48px 0; }
.xh-universes-title { font-size: 22px; letter-spacing: 1.5px; }
.xh-universes-title::before, .xh-universes-title::after { max-width: 40px; }
.xh-universes-sub { font-size: 14px; padding: 0 8px; text-wrap: pretty; }
.xh-universe-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; gap: 16px; }
.xh-universe-card { padding: 24px 20px; }
.xh-universe-name { font-size: 20px; }
.xh-stats-inner { gap: 12px 20px; justify-content: space-between; }
.xh-stat { min-width: 0; flex: 1 1 calc(50% - 10px); justify-content: center; }
.xh-stat-number { font-size: 22px; }
.xh-stat-label { font-size: 11px; }
.xh-advantages { padding: 48px 0; }
.xh-advantages-title { font-size: 18px; letter-spacing: 1.5px; margin-bottom: 32px; }
.xh-advantages-title::before, .xh-advantages-title::after { max-width: 30px; }
.xh-advantages-grid { grid-template-columns: 1fr; gap: 24px; max-width: 480px; }
.xh-advantage { padding: 22px 20px; background: rgba(255,255,255,.025); border: 1px solid var(--xh-border); border-radius: var(--xh-radius-lg); }
.xh-advantage h3 { font-size: 14px; text-wrap: balance; }
.xh-advantage p { font-size: 13px; color: var(--xh-text-secondary); text-wrap: pretty; }
.xh-community { padding: 48px 0; }
.xh-community-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
.xh-community-header h2 { font-size: 20px; letter-spacing: 1.5px; }
.xh-community-header h2::before, .xh-community-header h2::after { max-width: 40px; }
.xh-comm-card { padding: 14px 16px; gap: 12px; }
.xh-comm-card-icon { width: 40px; height: 40px; }
.xh-comm-card-icon svg { width: 20px; height: 20px; }
.xh-comm-card-title { font-size: 14px; }
.xh-comm-card-sub { font-size: 11px; }
.xh-stats-inner { grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 20px; }
.xh-stat + .xh-stat { border-left: 0; padding-left: 0; }
.xh-stat:nth-child(3), .xh-stat:nth-child(4) { border-top: 1px solid var(--xh-border); padding-top: 16px; }
.xh-galaxy-card { padding: 28px 20px; }
.xh-cta-inner { padding: 32px 24px; flex-direction: column; align-items: stretch; gap: 24px; }
.xh-cta-content { max-width: 100%; }
.xh-cta-title { font-size: 24px; letter-spacing: 1px; }
.xh-cta-badges { gap: 14px 18px; justify-content: center; }
.xh-cta-badges span { font-size: 13px; }
.xh-cta-action { width: 100%; display: block; }
.xh-cta-action .xh-btn { width: 100%; justify-content: center; box-sizing: border-box; }
.xh-footer { padding: 40px 0 24px; }
.xh-footer-brand { flex: none; }
.xh-footer-grid {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"brand brand"
"game  knowledge"
"community popular"
"docs  docs";
gap: 32px 20px;
}
.xh-footer-brand { grid-area: brand; }
.xh-footer-grid > .xh-footer-col:nth-of-type(2) { grid-area: game; }
.xh-footer-grid > .xh-footer-col:nth-of-type(3) { grid-area: knowledge; }
.xh-footer-grid > .xh-footer-col:nth-of-type(4) { grid-area: community; }
.xh-footer-grid > .xh-footer-col:nth-of-type(5) { grid-area: popular; }
.xh-footer-grid > .xh-footer-col:nth-of-type(6) { grid-area: docs; padding-top: 20px; border-top: 1px solid var(--xh-border); }
.xh-footer-grid > .xh-footer-col:nth-of-type(6) ul { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.xh-footer-grid > .xh-footer-col:nth-of-type(6) ul li { margin: 0; }
.xh-footer-grid > .xh-footer-col:nth-of-type(6) a { padding: 2px 0; }
.xh-footer-col h4, .xh-footer-h { font-size: 11px; margin-bottom: 10px; }
.xh-footer-col a { font-size: 13px; padding: 4px 0; }
}
@media (max-width: 480px) {
.xh-page { --xh-container-pad: 16px; }
.xh-hero { padding: 40px 0 32px; }
.xh-hero-title { font-size: clamp(32px, 10vw, 44px); }
.xh-hero-subtitle { font-size: 16px; margin-bottom: 10px; }
.xh-hero-actions { flex-wrap: wrap; }
.xh-hero-actions .xh-btn { justify-content: center; width: 100%; }
.xh-hero-apps { gap: 8px; }
.xh-hero-apps-label { width: 100%; margin-bottom: 4px; }
.xh-store-badge { flex: 1; justify-content: center; min-width: 130px; }
.xh-stats-inner { gap: 14px 12px; }
.xh-stat { gap: 10px; }
.xh-stat-icon { width: 32px; height: 32px; }
.xh-stat-icon svg { width: 18px; height: 18px; }
.xh-stat-number { font-size: 20px; }
.xh-galaxy-title { font-size: 22px; }
.xh-galaxy-actions .xh-btn { width: 100%; justify-content: center; }
.xh-galaxy-content > .xh-btn { width: 100%; justify-content: center; }
.xh-universes-title { font-size: 20px; }
.xh-universes-title::before, .xh-universes-title::after { display: none; }
.xh-universe-card { padding: 22px 18px; }
.xh-advantage-icon { width: 40px; height: 40px; margin-bottom: 10px; }
.xh-advantage-icon svg { width: 26px; height: 26px; }
.xh-cta-title { font-size: 20px; }
}
@media (max-width: 380px) {
.xh-logo-x, .xh-logo-text { font-size: 18px; }
.xh-hero-title { font-size: 30px; line-height: 1.05; }
.xh-hero-subtitle { font-size: 15px; }
.xh-hero-desc { font-size: 14px; }
.xh-stats-inner { grid-template-columns: 1fr 1fr; }
.xh-cta-inner { padding: 24px 18px; }
.xh-cta-title { font-size: 19px; letter-spacing: .5px; }
}
@media (prefers-reduced-motion: reduce) {
.xh-page, .xh-page *, .xh-page *::before, .xh-page *::after,
main, main *, main *::before, main *::after { animation-duration: 0.01ms; transition-duration: 0.01ms; }
.xh-reveal { opacity: 1; transform: none; }
#xh-stars-canvas { display: none; }
.xh-trust-dot, .xh-live-dot { animation: none !important; box-shadow: 0 0 0 0 rgba(32,168,104,.6) !important; }
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--xh-orange);
outline-offset: 2px;
border-radius: 4px;
}
#modal-mask a:focus-visible,
#modal-mask button:focus-visible,
#modal-mask input:focus-visible,
#modal-mask select:focus-visible,
#modal-mask textarea:focus-visible {
outline: 2px solid var(--xh-orange);
outline-offset: 2px;
border-radius: 4px;
}
#modal-mask .input-text:focus-visible,
#modal-mask .select:focus-visible {
outline-offset: 0;
border-color: var(--xh-orange);
}
.xh-skip-link {
position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.xh-skip-link:focus {
position: fixed; left: 16px; top: 16px; width: auto; height: auto; z-index: 10000;
padding: 12px 18px; background: var(--xh-orange); color: var(--xh-orange-text);
font-weight: 700; border-radius: 6px; box-shadow: 0 4px 12px var(--xh-shadow-strong);
}
.xh-hero.xh-reveal { opacity: 1; transform: none; }
.xh-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--xh-green); flex-shrink: 0; animation: xh-pulse 2s infinite; }
@media (max-width: 768px) {
.xh-community-cards > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media print {
.xh-page { background: var(--xh-white) !important; color: var(--xh-black) !important; }
.xh-page * { background-image: none !important; box-shadow: none !important; text-shadow: none !important; }
#xh-stars-canvas, .xh-header, .xh-mobile-menu, .xh-cta, .xh-footer-socials, #modal-mask { display: none !important; }
.xh-page a { color: #0044cc !important; text-decoration: underline !important; }
.xh-page a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
.xh-page h1, .xh-page h2, .xh-page h3 { color: var(--xh-black) !important; page-break-after: avoid; }
.xh-page p, .xh-page li { page-break-inside: avoid; }
.xh-hero, .xh-galaxy, .xh-universes, .xh-stats, .xh-advantages, .xh-community { padding: 12px 0 !important; }
}
@media (forced-colors: active) {
.xh-btn--primary, .xh-btn--header { border: 2px solid CanvasText; }
.xh-page a:focus-visible, .xh-page button:focus-visible,
.xh-page input:focus-visible, .xh-page [tabindex]:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
.xh-trust-pill, .xh-universe-card, .xh-advantage, .xh-comm-card, .xh-faq-item, .xh-compare-table { border: 1px solid CanvasText; }
}
.xh-about { padding: 72px 32px 24px; }
.xh-about-inner { max-width: var(--xh-max-w); margin: 0 auto; }
.xh-about-title {
font-family: var(--xh-font-display); font-size: clamp(28px, 3.2vw, 38px);
color: var(--xh-white); margin: 0 0 28px; text-transform: uppercase; letter-spacing: 1px; text-align: center;
}
.xh-about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.xh-about-col p { color: var(--xh-text); line-height: 1.65; margin: 0 0 14px; font-size: 16px; }
.xh-about-lead { font-size: 17px; }
.xh-about-col p strong { color: var(--xh-text); font-weight: 700; }
.xh-about-facts { margin: 0; padding: 22px 24px; background: var(--xh-overlay-2); border: 1px solid var(--xh-border); border-radius: var(--xh-radius-lg); }
.xh-about-facts dt { font-family: var(--xh-font-heading); font-size: 12px; font-weight: 700;
color: var(--xh-text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 12px; }
.xh-about-facts dt:first-child { margin-top: 0; }
.xh-about-facts dd { margin: 4px 0 0; color: var(--xh-text); font-size: 15px; line-height: 1.45; }
@media (max-width: 860px) { .xh-about-grid { grid-template-columns: 1fr; gap: 28px; } }
.xh-compare { padding: 60px 32px; background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.015) 100%); }
.xh-compare-inner { max-width: var(--xh-max-w); margin: 0 auto; }
.xh-compare-title {
font-family: var(--xh-font-display); font-size: clamp(26px, 3vw, 34px);
color: var(--xh-white); margin: 0 0 14px; text-transform: uppercase; letter-spacing: 1px; text-align: center;
}
.xh-compare-lead { color: var(--xh-text-secondary); text-align: center; margin: 0 auto 28px; max-width: 720px; font-size: 15px; line-height: 1.5; }
.xh-compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--xh-radius-lg); border: 1px solid var(--xh-border); }
.xh-compare-table { width: 100%; border-collapse: collapse; min-width: 720px; background: var(--xh-overlay-1); }
.xh-compare-table th, .xh-compare-table td {
padding: 14px 16px; text-align: left; font-size: 14px;
border-bottom: 1px solid var(--xh-border); color: var(--xh-text);
}
.xh-compare-table thead th { background: var(--xh-overlay-3); font-family: var(--xh-font-heading); font-size: 13px;
font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--xh-text-muted); }
.xh-compare-table tbody th { font-family: var(--xh-font-heading); font-weight: 700; color: var(--xh-text); font-size: 15px; }
.xh-compare-table tbody tr:last-child td, .xh-compare-table tbody tr:last-child th { border-bottom: 0; }
.xh-compare-self { background: var(--xh-orange-a08); }
.xh-compare-self th { color: var(--xh-orange); }
.xh-compare-summary { margin-top: 24px; color: var(--xh-text); line-height: 1.6; font-size: 15px; }
.xh-faq { padding: 60px 32px; }
.xh-faq-inner { max-width: 880px; margin: 0 auto; }
.xh-faq-title {
font-family: var(--xh-font-display); font-size: clamp(26px, 3vw, 34px);
color: var(--xh-white); margin: 0 0 26px; text-transform: uppercase; letter-spacing: 1px; text-align: center;
}
.xh-faq-list { display: flex; flex-direction: column; gap: 10px; }
.xh-faq-item {
background: rgba(255,255,255,.025); border: 1px solid var(--xh-border);
border-radius: var(--xh-radius-lg); padding: 0; transition: border-color var(--xh-transition);
}
.xh-faq-item[open] { border-color: var(--xh-border-light); }
.xh-faq-q {
font-family: var(--xh-font-heading); font-size: 17px; font-weight: 700; color: var(--xh-text);
padding: 18px 22px; cursor: pointer; list-style: none; display: flex; align-items: flex-start;
justify-content: space-between; gap: 12px;
}
.xh-faq-q::-webkit-details-marker { display: none; }
.xh-faq-q::-moz-list-bullet { display: none; }
.xh-faq-q::after { content: none !important; }
.xh-faq-q > svg { flex: 0 0 18px; width: 18px !important; height: 18px !important; min-width: 18px; color: var(--xh-orange); opacity: .85; transition: transform var(--xh-transition); }
.xh-faq-item[open] .xh-faq-q > svg { transform: rotate(180deg); }
.xh-faq-q > .xh-faq-q-text { flex: 1 1 auto; }
.xh-faq-q:hover { color: var(--xh-orange); }
.xh-faq-a { padding: 0 22px 18px; color: var(--xh-text); line-height: 1.6; font-size: 15px; }
.xh-faq-a .xh-faq-link { color: var(--xh-orange); border-bottom: 1px solid currentColor; }
.xh-faq-a .xh-faq-link:hover { color: var(--xh-orange-hover); }
@media (max-width: 600px) {
.xh-about { padding: 48px 20px 16px; }
.xh-compare, .xh-faq { padding: 44px 20px; }
.xh-compare-table th, .xh-compare-table td { padding: 11px 12px; font-size: 13px; }
}
#modal-mask .modal-close {
position: absolute; top: 12px; right: 12px;
background: var(--xh-overlay-3); border: 1px solid var(--xh-border);
width: 32px; height: 32px; padding: 0; cursor: pointer;
color: #c7d2e5;
display: flex; align-items: center; justify-content: center;
}
#modal-mask .modal-close:hover { color: var(--xh-text); background: var(--xh-overlay-8); }
#modal-mask .modal-close::before { content: '×'; font-size: 22px; line-height: 1; }
#modal-mask .modal-link {
background: none; border: none; padding: 0; color: var(--xh-orange);
text-decoration: underline; cursor: pointer; font: inherit;
}
#modal-mask .modal-link:hover { color: var(--xh-orange-hover); }
#modal-mask .modal-soc-btn {
width: 44px; height: 44px; border-radius: 8px; padding: 0; cursor: pointer;
background: var(--xh-overlay-4) center/22px no-repeat; border: 1px solid var(--xh-border);
color: transparent;
transition: background-color var(--xh-transition), border-color var(--xh-transition), transform var(--xh-transition);
}
#modal-mask .modal-soc-btn:hover { background-color: rgba(255,255,255,.10); border-color: var(--xh-border-light); transform: translateY(-1px); }
#modal-mask .modal-soc-btn--vk            { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234c75a3'%3E%3Cpath d='M13.2 17.5c-5.3 0-8.6-3.7-8.7-9.8h2.7c.1 4.5 2.1 6.4 3.7 6.8V7.7h2.5v3.9c1.6-.2 3.3-2 3.9-3.9h2.5c-.5 2.4-2.3 4.2-3.5 4.9 1.3.6 3.3 2.2 4 5h-2.8c-.6-1.9-2.1-3.3-4-3.5v3.5h-.3z'/%3E%3C/svg%3E"); }
#modal-mask .modal-soc-btn--google        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fbbc05' d='M3 12c0-1.6.4-3.1 1.1-4.4L8.4 11l-4.3 4.4C3.4 14.1 3 12.6 3 11z' transform='translate(0 1)'/%3E%3Cpath fill='%23ea4335' d='M12 5.7c2 0 3.4.9 4.2 1.6L19 4.5C17.4 3 14.9 2 12 2 7.7 2 4 4.5 2.2 8.1L5.5 11C6.4 8.1 9 5.7 12 5.7z'/%3E%3Cpath fill='%2334a853' d='M12 18.3c-3 0-5.6-2-6.5-4.7L2.2 16.5C4 20 7.7 22 12 22c2.8 0 5.4-1 7.2-2.8L16 16.5c-1 .8-2.5 1.8-4 1.8z'/%3E%3Cpath fill='%234285f4' d='M21.6 12.2c0-.7-.1-1.2-.2-1.8H12v3.6h5.4c-.2 1.1-.9 2.1-1.9 2.7l2.9 2.3c1.7-1.6 2.7-3.9 2.7-6.8z'/%3E%3C/svg%3E"); }
#modal-mask .modal-soc-btn--odnoklassniki { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ed812b'%3E%3Cpath d='M12 6.6c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5S13.4 6.6 12 6.6m0-3.6c3.2 0 5.8 2.6 5.8 5.8s-2.6 5.8-5.8 5.8c-3.2 0-5.8-2.6-5.8-5.8S8.8 3 12 3M9.5 14.4c-1 0-2.1.3-3.1.9-.5.3-.6.9-.4 1.4.3.5.9.6 1.4.4 1.7-1 4.5-1 6.2 0 .2.1.3.1.5.1.4 0 .7-.2.9-.5.3-.5.1-1.1-.4-1.4-1-.6-2.1-.9-3.1-.9m1.3 4.7l-2.5 2.5c-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3l1.3-1.3 1.3 1.3c.2.2.5.3.7.3.3 0 .5-.1.7-.3.4-.4.4-1 0-1.4l-2.5-2.5c-.1-.1-.3-.1-.4 0z'/%3E%3C/svg%3E"); }
#modal-mask .modal-soc-btn--mailru        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23005ff9'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c1.8 0 3.5-.5 5-1.4l-1.2-1.6c-1.1.7-2.4 1.1-3.8 1.1-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8c0 1.3-.3 2.1-1.2 2.1-.8 0-1.1-.6-1.1-1.5V8h-2v.9c-.5-.7-1.4-1.1-2.5-1.1-2.4 0-4 2-4 4.4s1.6 4.4 4 4.4c1.4 0 2.4-.7 2.8-1.5.4 1 1.4 1.5 2.5 1.5 2.7 0 3.4-2.4 3.4-4.6 0-5.5-4.5-10-10-10zm0 12.4c-1.3 0-2.2-1-2.2-2.2s1-2.2 2.2-2.2 2.2 1 2.2 2.2-.9 2.2-2.2 2.2z'/%3E%3C/svg%3E"); }
#modal-mask .modal-soc-btn--yandex        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fc3f1d'%3E%3Cpath d='M13.4 4.6h-1.1c-1.9 0-3.4 1.3-3.4 3.9 0 2.5 1.1 3.7 2.9 3.7h1.6V4.6zm0 9.1h-1.5L8.3 21H6l3.9-7.7C8 12.4 6.7 10.7 6.7 8.4 6.7 5.2 8.8 3 12.2 3h3.3v18h-2.1v-7.3z'/%3E%3C/svg%3E"); }
#modal-mask .modal-soc-btn--facebook      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231877f2'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.52c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E"); }
#modal-mask .modal-soc-icos { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 44px; }
#modal-mask .img-captcha, #modal-mask .modal-captcha img { max-width: 120px; height: auto; border-radius: 6px; }
#modal-mask .input-text-captcha { display: flex; align-items: center; gap: 12px; }
#modal-mask .input-text-captcha .input-text { max-width: 200px; }
#modal-mask .modal-captcha { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
#modal-mask .input-modal-checkbox { margin-top: 4px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--xh-orange); cursor: pointer; }
#modal-mask .modal-label { display: inline; font-size: 13px; color: var(--xh-text-dim); cursor: pointer; line-height: 1.4; flex: 1; min-width: 0; }
#modal-mask .modal-extra-text {
display: flex !important;
align-items: flex-start;
gap: 10px;
text-align: left !important;
flex-wrap: nowrap;
height: auto !important;
padding: 8px 4px;
font-size: 13px !important;
}
#modal-mask .modal-extra-text:has(.input-modal-checkbox) {
margin: 10px 0;
}
#modal-mask .select {
appearance: auto !important;
-webkit-appearance: auto !important;
-moz-appearance: auto !important;
pointer-events: auto !important;
cursor: pointer;
}
#modal-mask .modal-label a { color: var(--xh-orange); }
.xh-lang-wrap { position: relative; }.xh-lang-dropdown a[aria-current="true"] { background: var(--xh-orange-a12); color: var(--xh-orange); font-weight: 600; }.xh-lang-dropdown a[aria-current="true"] .xh-lang-code { color: var(--xh-orange); }
.xh-mobile-lang-wrap { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--xh-border); }
.xh-mobile-lang-toggle {
display: flex; align-items: center; gap: 10px;
background: var(--xh-overlay-3); border: 1px solid var(--xh-border);
color: var(--xh-text); padding: 10px 14px; border-radius: var(--xh-radius-md);
cursor: pointer; font: inherit; width: 100%; justify-content: flex-start;
font-size: 14px;
}
.xh-mobile-lang-toggle:hover { background: rgba(255,255,255,.07); }
.xh-mobile-lang-toggle .xh-lang-icon,
.xh-mobile-lang-toggle svg {
width: 18px !important; height: 18px !important;
flex-shrink: 0;
color: var(--xh-gold);
}
.xh-lang-dropdown--mobile[hidden] { display: none; }
.xh-cookie-consent__details {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--xh-border, var(--xh-border-light));
}
.xh-cookie-consent__details[hidden] { display: none; }
.xh-cookie-consent__fieldset {
border: 0;
padding: 0;
margin: 0 0 12px;
}
.xh-cookie-consent__purpose {
margin: 0 0 12px;
padding: 10px 12px;
background: var(--xh-overlay-2);
border: 1px solid var(--xh-border, var(--xh-border-light));
border-radius: 6px;
}
.xh-cookie-consent__purpose-label {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 14px;
color: var(--xh-text);
cursor: pointer;
}
.xh-cookie-consent__purpose-label input { margin: 0; }
.xh-cookie-consent__purpose-name { user-select: none; }
.xh-cookie-consent__purpose-desc {
margin: 6px 0 0 26px;
font-size: 12px;
line-height: 1.4;
color: var(--xh-text-muted, var(--xh-text-muted));
}
.xh-cookie-consent__save { margin-top: 8px; }
.xh-link-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--xh-font-heading);
font-size: 14px;
font-weight: 600;
color: var(--xh-orange);
padding: 8px 0;
text-decoration: none;
transition: color var(--xh-transition);
}
.xh-link-btn:hover { color: var(--xh-orange-hover); }
.xh-link-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.modal-field-label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--xh-text-secondary, var(--xh-text-muted));
margin: 8px 0 4px;
letter-spacing: .02em;
text-transform: uppercase;
}
.modal-field-label:first-child { margin-top: 0; }
#modal-mask .modal-body--video {
position: fixed !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translate(-50%, -50%) !important;
max-width: 920px !important;
width: 95vw !important;
padding: 0 !important;
background: var(--xh-black) !important;
border: 1px solid var(--xh-overlay-8) !important;
overflow: visible !important;
margin: 0 !important;
transition: none !important;
}
#modal-mask .modal-body--video.modal-show {
top: 50% !important;
transform: translate(-50%, -50%) !important;
}
#modal-mask .modal-body--video .modal-close {
position: absolute;
top: -36px;
right: 0;
z-index: 2;
}
.xh-video-wrap {
position: relative;
padding-top: 56.25%;
width: 100%;
background: var(--xh-black);
border-radius: var(--xh-radius-lg);
overflow: hidden;
}
.xh-video-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.xh-lang-flag {
display: inline-flex; align-items: center; justify-content: center;
font-size: 18px; line-height: 1;
width: 24px; min-width: 24px;
font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.xh-breadcrumbs {
--xh-bc-indent: 30px;
max-width: var(--xh-max-w, 1200px);
margin: var(--xh-bc-gap, 28px) auto 14px;
padding: 24px var(--xh-container-pad, 32px) 0 calc(var(--xh-container-pad, 32px) + var(--xh-bc-indent));
font-size: 14px;
color: var(--xh-text-mute, var(--xh-text-muted));
}
.xh-shero-inner .xh-breadcrumbs,
.xk-cat-hero-inner .xh-breadcrumbs,
.xk-entity-hero-inner .xh-breadcrumbs,
.xk-enc-hero-inner .xh-breadcrumbs,
.xk-hero-inner .xh-breadcrumbs,
.ach-hero-inner .xh-breadcrumbs,
.xg-hero-inner .xh-breadcrumbs,
.xp-hero-inner .xh-breadcrumbs,
.xs-hero-inner .xh-breadcrumbs,
.xs-fhero-inner .xh-breadcrumbs,
.al-hero-inner .xh-breadcrumbs,
.ex-hero-inner .xh-breadcrumbs,
.tn-hero-inner .xh-breadcrumbs,
.xa-inner .xh-breadcrumbs {
max-width: none;
margin: 0 0 14px;
padding: 24px 0 0 var(--xh-bc-indent);
}
@media (max-width: 600px) {
.xh-breadcrumbs { --xh-bc-indent: 14px; padding-left: calc(16px + var(--xh-bc-indent)); padding-right: 16px; }
}
.xh-breadcrumbs-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.xh-breadcrumbs-list::before {
content: ''; flex: none; width: 22px; height: 2px; border-radius: 2px;
background: var(--xh-orange, #f59a3e); align-self: center;
}
.xh-breadcrumbs-item { display: inline-flex; align-items: center; gap: 8px; }
.xh-breadcrumbs-item a {
color: var(--xh-text-mute, var(--xh-text-muted));
text-decoration: none;
transition: color .15s;
}
.xh-breadcrumbs-item a:hover { color: var(--xh-text, var(--xh-text)); }
.xh-breadcrumbs-item [aria-current="page"] { color: var(--xh-text, var(--xh-text)); font-weight: 500; }
.xh-breadcrumbs-sep { color: var(--xh-text-mute, var(--xh-text-muted)); opacity: .5; }
.xh-page-hero {
max-width: 1180px;
margin: 0 auto;
padding: 48px var(--xh-container-pad, 24px) 56px;
text-align: center;
}
.xh-page-hero-inner {
max-width: 720px;
margin: 0 auto;
display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.xh-page-hero-icon {
width: 56px; height: 56px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(255,204,0,.15), rgba(255,204,0,.05));
border: 1px solid rgba(255,204,0,.3);
border-radius: 16px;
color: var(--xh-gold);
}
.xh-page-hero-icon svg { width: 28px; height: 28px; }
.xh-page-hero-eyebrow {
display: inline-block;
padding: 6px 14px;
font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--xh-text-mute, var(--xh-text-muted));
background: var(--xh-overlay-3);
border: 1px solid var(--xh-overlay-6);
border-radius: 999px;
}
.xh-page-hero-title {
font-family: var(--xh-font-display, 'Archivo Black'), system-ui, sans-serif;
font-size: clamp(32px, 5vw, 48px); line-height: 1.1; margin: 0;
color: var(--xh-text, var(--xh-text));
letter-spacing: -.01em;
}
.xh-page-hero-subtitle {
font-size: clamp(16px, 2vw, 18px); line-height: 1.5; margin: 0;
color: var(--xh-text-mute, var(--xh-text-muted));
max-width: 600px;
}
.xh-hero-uni-badge {
display: inline-block;
padding: 4px 12px;
margin-bottom: 10px;
font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--xh-gold);
border: 1px solid rgba(255,204,0,.35);
border-radius: 999px;
background: rgba(255,204,0,.07);
}
.xh-page-hero-note {
margin: 0; font-size: 13px; letter-spacing: .02em;
color: var(--xh-gold);
opacity: .85;
}
.xh-page-hero-actions {
margin-top: 8px;
display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.xh-page-content {
max-width: 920px;
margin: 0 auto;
padding: 0 var(--xh-container-pad, 24px) 80px;
}
.xh-prose {
color: var(--xh-text, var(--xh-text));
font-size: 17px; line-height: 1.7;
overflow-wrap: anywhere;
word-break: break-word;
}
.xh-prose a {
word-break: break-word;
}
.xh-prose h2 {
font-family: var(--xh-font-display, 'Archivo Black'), system-ui, sans-serif;
font-size: clamp(24px, 3vw, 32px);
margin: 56px 0 16px;
color: var(--xh-text, var(--xh-text));
scroll-margin-top: 80px;
}
.xh-prose h2:first-child { margin-top: 0; }
.xh-prose h3 {
font-size: clamp(20px, 2.4vw, 24px); font-weight: 600;
margin: 40px 0 12px;
color: var(--xh-text, var(--xh-text));
scroll-margin-top: 80px;
}
.xh-prose h4 {
font-size: 18px; font-weight: 600;
margin: 28px 0 8px;
}
.xh-prose p { margin: 0 0 16px; }
.xh-prose ul, .xh-prose ol { padding-left: 24px; margin: 0 0 20px; }
.xh-prose li { margin-bottom: 8px; }
.xh-prose a {
color: var(--xh-gold); text-decoration: underline; text-underline-offset: 3px;
}
.xh-prose a:hover { color: var(--xh-gold-bright); }
.xh-prose blockquote {
margin: 24px 0; padding: 16px 20px;
border-left: 3px solid var(--xh-gold);
background: rgba(255,204,0,.05);
border-radius: 0 8px 8px 0;
color: var(--xh-text-mute, var(--xh-text-muted)); font-style: italic;
}
.xh-prose code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .9em;
padding: 2px 6px;
background: var(--xh-overlay-6);
border-radius: 4px;
}
.xh-prose hr {
margin: 40px 0;
border: none; border-top: 1px solid var(--xh-overlay-8);
}
.xh-prose table {
width: 100%; border-collapse: collapse; margin: 20px 0;
font-size: 15px;
}
.xh-prose th, .xh-prose td {
padding: 12px 16px; text-align: left;
border-bottom: 1px solid var(--xh-overlay-8);
}
.xh-prose th {
font-weight: 600; color: var(--xh-text, var(--xh-text));
background: var(--xh-overlay-2);
}
.xh-prose img {
max-width: 100%; height: auto; border-radius: 12px;
margin: 24px 0;
}
.xh-toc {
padding: 20px 24px; margin: 0 0 32px;
background: linear-gradient(rgb(13,20,36), rgb(10,15,28));
border: 1px solid rgba(30,45,74,.6);
border-radius: 12px;
}
.xh-toc-title {
font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--xh-text-mute, var(--xh-text-muted)); margin: 0 0 12px;
}
.xh-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.xh-toc li { counter-increment: toc; padding: 4px 0; }
.xh-toc li::before {
content: counter(toc) ". "; color: var(--xh-gold); font-weight: 600;
margin-right: 6px;
}
.xh-toc a { color: var(--xh-text, var(--xh-text)); text-decoration: none; }
.xh-toc a:hover { color: var(--xh-gold); }
.xh-section-cta {
max-width: 1180px;
margin: 64px auto 80px;
padding: 56px var(--xh-container-pad, 24px);
}
.xh-section-cta-inner {
text-align: center;
padding: 48px 32px;
background: linear-gradient(135deg, rgba(255,204,0,.08), rgba(255,204,0,.02));
border: 1px solid rgba(255,204,0,.2);
border-radius: 20px;
max-width: 720px; margin: 0 auto;
}
.xh-section-cta-title {
font-family: var(--xh-font-display, 'Archivo Black'), system-ui, sans-serif;
font-size: clamp(24px, 3.5vw, 36px); line-height: 1.2;
margin: 0 0 12px;
color: var(--xh-text, var(--xh-text));
}
.xh-section-cta-subtitle {
font-size: 16px; line-height: 1.5;
color: var(--xh-text-mute, var(--xh-text-muted));
margin: 0 0 28px;
}
.xh-section-cta-actions {
display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
body.xh-page--rules .xh-page-content,
body.xh-page--agreement .xh-page-content,
body.xh-page--privacy .xh-page-content {
max-width: 820px;
}
@media (max-width: 720px) {
.xh-page-hero { padding: 32px var(--xh-container-pad, 16px) 40px; }
.xh-page-hero-title { font-size: 28px; }
.xh-page-content { padding-bottom: 56px; }
.xh-prose { font-size: 16px; }
.xh-section-cta { margin: 40px auto 56px; padding: 32px var(--xh-container-pad, 16px); }
.xh-section-cta-inner { padding: 32px 20px; }
.xh-section-cta-actions { display: flex; flex-direction: column; width: 100%; gap: 12px; }
.xh-section-cta-actions > .xh-btn { width: 100%; box-sizing: border-box; justify-content: center; }
}
.xh-contacts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
margin-bottom: 48px;
}
.xh-contacts-card {
display: block;
padding: 24px;
background: linear-gradient(rgb(13,20,36), rgb(10,15,28));
border: 1px solid rgba(30,45,74,.6);
border-radius: 16px;
color: var(--xh-text, var(--xh-text));
text-decoration: none;
transition: transform .15s, border-color .15s, box-shadow .15s;
}
.xh-contacts-card:hover {
transform: translateY(-2px);
border-color: rgba(255,204,0,.4);
box-shadow: 0 8px 24px var(--xh-shadow-soft);
}
.xh-contacts-card-icon {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,204,0,.1);
border-radius: 12px;
color: var(--xh-gold);
margin-bottom: 12px;
}
.xh-contacts-card-icon svg { width: 24px; height: 24px; }
.xh-contacts-card h3 {
font-family: var(--xh-font-display, 'Archivo Black'), system-ui, sans-serif;
font-size: 18px; margin: 0 0 8px;
color: var(--xh-text, var(--xh-text));
}
.xh-contacts-card p {
font-size: 14px; line-height: 1.5;
color: var(--xh-text-mute, var(--xh-text-muted));
margin: 0 0 12px;
min-height: 42px;
}
.xh-contacts-value {
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 600;
color: var(--xh-gold);
}
.xh-contacts-value svg { width: 14px; height: 14px; }
.xh-contacts-legal {
padding: 24px;
background: var(--xh-overlay-2);
border: 1px solid var(--xh-overlay-6);
border-radius: 12px;
font-size: 15px; line-height: 1.6;
}
.xh-contacts-legal h3 {
font-size: 16px; font-weight: 600;
margin: 0 0 12px;
color: var(--xh-text, var(--xh-text));
letter-spacing: .02em;
}
.xh-contacts-legal p {
margin: 0 0 6px;
color: var(--xh-text-mute, var(--xh-text-muted));
}
.xh-contacts-legal strong { color: var(--xh-text, var(--xh-text)); }
.xh-contacts-legal a { color: var(--xh-gold); }
.xh-contacts-legal-note {
margin-top: 12px;
font-size: 13px;
font-style: italic;
opacity: .8;
}
@media (max-width: 480px) {
.xh-contacts-grid { grid-template-columns: 1fr; }
}
.xh-uni-hub-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 32px;
}
.xh-uni-hub-card {
position: relative;
padding: 28px 24px 24px;
background: linear-gradient(rgb(13,20,36), rgb(10,15,28));
border: 1px solid rgba(30,45,74,.6);
border-radius: 16px;
display: flex; flex-direction: column;
transition: transform .15s, border-color .15s, box-shadow .15s;
}
.xh-uni-hub-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px var(--xh-shadow-soft);
}
.xh-uni-hub-card--woa { border-color: rgba(120,170,255,.3); }
.xh-uni-hub-card--woa:hover { border-color: rgba(120,170,255,.6); }
.xh-uni-hub-card--classic { border-color: rgba(255,180,80,.3); }
.xh-uni-hub-card--classic:hover { border-color: rgba(255,180,80,.6); }
.xh-uni-hub-card--reborn { border-color: rgba(120,255,180,.3); }
.xh-uni-hub-card--reborn:hover { border-color: rgba(120,255,180,.6); }
.xh-uni-hub-badge {
position: absolute; top: -10px; left: 16px;
padding: 4px 12px;
font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
background: var(--xh-gold); color: var(--xh-bg-card);
border-radius: 999px;
}
.xh-uni-hub-card-icon {
width: 48px; height: 48px;
flex: 0 0 48px;
align-self: flex-start;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,204,0,.1); color: var(--xh-gold);
border-radius: 12px;
margin-bottom: 16px;
}
.xh-uni-hub-card-icon svg { width: 24px; height: 24px; flex-shrink: 0; }
.xh-uni-hub-card-title {
font-family: var(--xh-font-display, 'Archivo Black'), system-ui, sans-serif;
font-size: 22px; margin: 0 0 8px;
color: var(--xh-text, var(--xh-text));
}
.xh-uni-hub-card-desc {
font-size: 14px; line-height: 1.55;
color: var(--xh-text-mute, var(--xh-text-muted));
margin: 0 0 16px;
flex: 1;
}
.xh-uni-hub-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.xh-uni-hub-tag {
padding: 3px 10px;
font-size: 11px;
color: var(--xh-text-mute, var(--xh-text-muted));
background: var(--xh-overlay-3);
border: 1px solid var(--xh-overlay-8);
border-radius: 999px;
}
.xh-uni-hub-card-link {
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 600;
color: var(--xh-gold); text-decoration: none;
}
.xh-uni-hub-card-link svg { width: 14px; height: 14px; transition: transform .15s; }
.xh-uni-hub-card-link:hover svg { transform: translateX(3px); }
.xh-uni-hub-compare-hint {
padding: 16px 20px; margin-top: 16px;
background: rgba(255,204,0,.04);
border: 1px solid rgba(255,204,0,.15);
border-radius: 10px;
font-size: 14px;
color: var(--xh-text-mute, var(--xh-text-muted));
text-align: center;
}
.xh-uni-features-list {
display: flex; flex-wrap: wrap; gap: 8px;
list-style: none; padding: 0; margin: 0 0 32px;
}
.xh-uni-features-list li {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: rgba(255,204,0,.08);
border: 1px solid rgba(255,204,0,.2);
border-radius: 999px;
font-size: 14px; font-weight: 500;
color: var(--xh-text, var(--xh-text));
}
.xh-uni-features-list svg { width: 16px; height: 16px; color: var(--xh-gold); }
.xh-uni-related {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--xh-overlay-8);
}
.xh-uni-related h2 {
font-family: var(--xh-font-display, 'Archivo Black'), system-ui, sans-serif;
font-size: 24px; margin: 0 0 16px;
color: var(--xh-text, var(--xh-text));
}
.xh-uni-related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.xh-uni-related-card {
display: block;
padding: 20px;
background: var(--xh-overlay-2);
border: 1px solid var(--xh-overlay-6);
border-radius: 12px;
text-decoration: none;
transition: border-color .15s, background .15s;
}
.xh-uni-related-card:hover {
border-color: rgba(255,204,0,.3);
background: var(--xh-overlay-4);
}
.xh-uni-related-card h3 {
font-size: 16px; margin: 0 0 6px;
color: var(--xh-text, var(--xh-text));
font-weight: 600;
}
.xh-uni-related-card p {
font-size: 13px; line-height: 1.5; margin: 0 0 10px;
color: var(--xh-text-mute, var(--xh-text-muted));
}
.xh-uni-related-card span {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600;
color: var(--xh-gold);
}
.xh-uni-related-card span svg { width: 13px; height: 13px; }
.xh-kb-empty {
text-align: center; padding: 48px 24px;
color: var(--xh-text-mute, var(--xh-text-muted));
font-size: 16px;
background: var(--xh-overlay-2);
border: 1px dashed rgba(255,255,255,.1);
border-radius: 12px;
}
.xh-kb-categories { display: flex; flex-direction: column; gap: 48px; }
.xh-kb-category-header {
display: flex; align-items: center; gap: 12px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--xh-overlay-8);
}
.xh-kb-category-icon {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,204,0,.1);
border-radius: 8px;
color: var(--xh-gold);
}
.xh-kb-category-icon svg { width: 18px; height: 18px; }
.xh-kb-category-title {
font-family: var(--xh-font-display, 'Archivo Black'), system-ui, sans-serif;
font-size: 22px; margin: 0;
color: var(--xh-text, var(--xh-text));
flex: 1;
}
.xh-kb-category-count {
font-size: 13px; color: var(--xh-text-mute, var(--xh-text-muted));
background: var(--xh-overlay-3);
padding: 4px 10px; border-radius: 999px;
}
.xh-kb-articles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.xh-kb-article-card {
display: block;
padding: 20px;
background: linear-gradient(rgb(13,20,36), rgb(10,15,28));
border: 1px solid rgba(30,45,74,.6);
border-radius: 12px;
text-decoration: none;
transition: transform .15s, border-color .15s;
}
.xh-kb-article-card:hover {
transform: translateY(-2px);
border-color: rgba(255,204,0,.4);
}
.xh-kb-article-card h3 {
font-size: 17px; font-weight: 600;
margin: 0 0 8px;
color: var(--xh-text, var(--xh-text));
line-height: 1.3;
}
.xh-kb-article-card p {
font-size: 14px; line-height: 1.5;
color: var(--xh-text-mute, var(--xh-text-muted));
margin: 0 0 12px;
}
.xh-kb-article-meta {
display: flex; align-items: center; justify-content: space-between;
font-size: 13px;
color: var(--xh-text-mute, var(--xh-text-muted));
}
.xh-kb-article-meta span:first-child { font-style: italic; }
.xh-kb-article-link {
display: inline-flex; align-items: center; gap: 4px;
color: var(--xh-gold); font-weight: 600;
}
.xh-kb-article-link svg { width: 13px; height: 13px; }
.xh-kb-meta-pills {
display: flex; flex-wrap: wrap; gap: 8px;
list-style: none; padding: 0; margin: 0 0 32px;
font-size: 13px;
color: var(--xh-text-mute, var(--xh-text-muted));
}
.xh-kb-meta-pills li {
padding: 4px 12px;
background: var(--xh-overlay-3);
border: 1px solid var(--xh-overlay-6);
border-radius: 999px;
}
.xh-support-quick {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin-bottom: 48px;
}
.xh-support-quick-card {
display: block;
padding: 20px;
text-align: center;
background: var(--xh-overlay-2);
border: 1px solid var(--xh-overlay-6);
border-radius: 12px;
text-decoration: none;
transition: border-color .15s, background .15s;
}
.xh-support-quick-card:hover {
border-color: rgba(255,204,0,.4);
background: var(--xh-overlay-4);
}
.xh-support-quick-icon {
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,204,0,.1);
border-radius: 10px;
color: var(--xh-gold);
margin-bottom: 10px;
}
.xh-support-quick-icon svg { width: 20px; height: 20px; }
.xh-support-quick-card h3 {
font-size: 15px; font-weight: 600;
margin: 0 0 4px;
color: var(--xh-text, var(--xh-text));
}
.xh-support-quick-card p {
font-size: 13px; margin: 0;
color: var(--xh-text-mute, var(--xh-text-muted));
}
.xh-support-faq details {
padding: 16px 20px;
margin-bottom: 8px;
background: var(--xh-overlay-2);
border: 1px solid var(--xh-overlay-6);
border-radius: 10px;
}
.xh-support-faq summary {
font-weight: 600; cursor: pointer;
list-style: none;
display: flex; justify-content: space-between; align-items: center;
}
.xh-support-faq summary::after { content: '+'; font-size: 20px; opacity: .6; }
.xh-support-faq details[open] summary::after { content: '−'; }
.xh-support-faq details > div {
padding-top: 12px; margin-top: 12px;
border-top: 1px solid var(--xh-overlay-8);
color: var(--xh-text-mute, var(--xh-text-muted));
font-size: 15px; line-height: 1.6;
}
.xh-support-still {
margin-top: 48px;
padding: 24px;
background: rgba(255,204,0,.05);
border: 1px solid rgba(255,204,0,.2);
border-radius: 12px;
text-align: center;
}
.xh-support-still h3 { margin: 0 0 8px; font-size: 18px; color: var(--xh-text); }
.xh-support-still p { margin: 0; color: var(--xh-text-mute); font-size: 15px; }
.xh-support-still a { color: var(--xh-gold); }
.xh-mobile-stores {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 48px;
}
.xh-mobile-store-card {
display: flex; align-items: center; gap: 16px;
padding: 24px;
background: linear-gradient(rgb(13,20,36), rgb(10,15,28));
border: 1px solid rgba(30,45,74,.6);
border-radius: 16px;
text-decoration: none;
transition: transform .15s, border-color .15s;
}
.xh-mobile-store-card:hover {
transform: translateY(-2px);
border-color: rgba(255,204,0,.4);
}
.xh-mobile-store-card svg { width: 40px; height: 40px; flex-shrink: 0; }
.xh-mobile-store-card--gp svg { color: var(--xh-green-bright); }
.xh-mobile-store-card--as svg { color: var(--xh-white); }
.xh-mobile-store-card div { display: flex; flex-direction: column; line-height: 1.3; }
.xh-mobile-store-card span { font-size: 12px; color: var(--xh-text-mute); }
.xh-mobile-store-card strong { font-size: 18px; color: var(--xh-text); margin-top: 2px; }
.xh-mobile-store-card small { font-size: 12px; color: var(--xh-text-mute); margin-top: 4px; }
.xh-community-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
margin-bottom: 48px;
}
.xh-community-card {
position: relative;
display: block;
padding: 24px;
background: linear-gradient(rgb(13,20,36), rgb(10,15,28));
border: 1px solid rgba(30,45,74,.6);
border-radius: 14px;
text-decoration: none;
transition: transform .15s, border-color .15s;
}
.xh-community-card:hover {
transform: translateY(-2px);
border-color: rgba(255,204,0,.4);
}
.xh-community-card--discord:hover { border-color: rgba(88,101,242,.6); }
.xh-community-card--telegram:hover { border-color: rgba(34,158,217,.6); }
.xh-community-card--vk:hover { border-color: rgba(0,119,255,.6); }
.xh-community-card--youtube:hover { border-color: rgba(255,0,0,.6); }
.xh-community-card-tag {
position: absolute; top: 16px; right: 16px;
padding: 3px 10px;
font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
background: rgba(255,204,0,.1);
color: var(--xh-gold);
border-radius: 999px;
}
.xh-community-card-icon {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--xh-overlay-3);
border-radius: 10px;
color: var(--xh-text);
margin-bottom: 14px;
}
.xh-community-card--discord .xh-community-card-icon { background: rgba(88,101,242,.15); color: #5865F2; }
.xh-community-card--telegram .xh-community-card-icon { background: rgba(34,158,217,.15); color: #229ED9; }
.xh-community-card--vk .xh-community-card-icon { background: rgba(0,119,255,.15); color: #0077FF; }
.xh-community-card--youtube .xh-community-card-icon { background: rgba(255,0,0,.15); color: var(--xh-error); }
.xh-community-card-icon svg { width: 22px; height: 22px; }
.xh-community-card h3 {
font-size: 18px; font-weight: 600;
margin: 0 0 8px;
color: var(--xh-text);
}
.xh-community-card p {
font-size: 14px; line-height: 1.5;
color: var(--xh-text-mute);
margin: 0 0 14px;
}
.xh-community-card-link {
display: inline-flex; align-items: center; gap: 4px;
font-size: 13px; font-weight: 600;
color: var(--xh-gold);
}
.xh-community-card-link svg { width: 13px; height: 13px; }
.xh-kb-search { margin: 0 0 32px; }
.xh-kb-search__wrap {
position: relative;
display: flex; align-items: center;
}
.xh-kb-search__icon {
position: absolute; left: 18px;
width: 18px; height: 18px;
color: rgba(255,255,255,.5);
pointer-events: none;
}
.xh-kb-search__input {
width: 100%;
padding: 16px 48px 16px 50px;
font-family: inherit;
font-size: 15px;
color: var(--xh-text, var(--xh-white));
background: var(--xh-overlay-3);
border: 1px solid rgba(255,255,255,.1);
border-radius: 14px;
outline: none;
transition: border-color .15s, background .15s;
}
.xh-kb-search__input:focus,
.xh-kb-search__input:hover {
border-color: rgba(255,204,0,.4);
background: var(--xh-overlay-6);
}
.xh-kb-search__input::placeholder { color: rgba(255,255,255,.4); }
.xh-kb-search__input::-webkit-search-cancel-button { display: none; }
.xh-kb-search__clear {
position: absolute; right: 8px;
width: 32px; height: 32px;
display: none; align-items: center; justify-content: center;
background: var(--xh-overlay-8);
border: none; border-radius: 8px;
color: rgba(255,255,255,.7);
font-size: 18px; line-height: 1; cursor: pointer;
transition: background .15s;
}
.xh-kb-search__clear.is-visible { display: inline-flex; }
.xh-kb-search__clear:hover { background: rgba(255,255,255,.14); color: var(--xh-gold); }
.xh-kb-search__hint {
margin: 8px 4px 0;
font-size: 13px; color: rgba(255,255,255,.45);
}
.xh-kb-results { margin-top: 8px; }
.xh-kb-results__title {
font-family: var(--xh-font-display, 'Archivo Black'), system-ui, sans-serif;
font-size: 20px; margin: 0 0 4px;
}
.xh-kb-results__count {
font-size: 13px; color: rgba(255,255,255,.5);
margin: 0 0 18px;
}
.xh-kb-results__empty {
padding: 32px 24px; text-align: center;
background: var(--xh-overlay-2);
border: 1px dashed rgba(255,255,255,.12);
border-radius: 12px;
color: rgba(255,255,255,.7);
font-size: 14px; line-height: 1.55;
}
.xh-kb-results__empty strong {
color: var(--xh-text, var(--xh-white));
display: inline-block; margin-bottom: 4px;
}
.xh-kb-results__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.xh-kb-result-card {
display: block;
padding: 18px 20px;
background: var(--xh-overlay-3);
border: 1px solid var(--xh-overlay-8);
border-radius: 12px;
text-decoration: none;
color: var(--xh-text, var(--xh-white));
transition: border-color .15s, background .15s, transform .15s;
}
.xh-kb-result-card:hover,
.xh-kb-result-card:focus-visible {
border-color: rgba(255,204,0,.5);
background: var(--xh-overlay-6);
transform: translateY(-1px);
outline: none;
}
.xh-kb-result-card__meta {
display: flex; gap: 8px; align-items: center;
font-size: 12px; color: rgba(255,255,255,.5);
margin-bottom: 6px;
}
.xh-kb-result-card__cat {
text-transform: uppercase; letter-spacing: .05em;
color: var(--xh-gold); font-weight: 600;
}
.xh-kb-result-card__rt::before { content: '·'; margin-right: 6px; opacity: .5; }
.xh-kb-result-card__title {
font-family: var(--xh-font-display, 'Archivo Black'), system-ui, sans-serif;
font-size: 16px; margin: 0 0 6px; line-height: 1.3;
}
.xh-kb-result-card__desc {
font-size: 13px; line-height: 1.5;
color: rgba(255,255,255,.7);
margin: 0;
}
.xh-kb-result-card__tags {
display: flex; flex-wrap: wrap; gap: 4px;
margin-top: 10px;
}
.xh-kb-result-card__tag {
display: inline-block;
padding: 2px 8px;
font-size: 11px;
background: rgba(255,204,0,.08);
color: rgba(255,204,0,.85);
border-radius: 4px;
}
@media (max-width: 640px) {
.xh-kb-search__input { padding: 14px 44px 14px 46px; font-size: 14px; }
.xh-kb-search__icon { left: 16px; width: 16px; height: 16px; }
.xh-kb-results__grid { grid-template-columns: 1fr; }
}
.xh-uni-hub-card-icon,
.xh-contacts-card-icon,
.xh-community-card-icon,
.xh-kb-category-icon,
.xh-support-quick-icon,
.xh-page-hero-icon,
.xh-404-icon {
flex: 0 0 auto;
align-self: flex-start;
}
.xh-page-hero-icon,
.xh-404-icon,
.xh-support-quick-icon {
align-self: center;
}
.xh-uni-hub-card-icon svg,
.xh-contacts-card-icon svg,
.xh-community-card-icon svg,
.xh-kb-category-icon svg,
.xh-support-quick-icon svg,
.xh-page-hero-icon svg,
.xh-404-icon svg {
flex-shrink: 0;
}
.xh-kb-strip { padding: 64px 0; }
.xh-kb-strip-header {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
margin-bottom: 32px;
}
.xh-kb-strip-eyebrow {
display: inline-block;
padding: 4px 10px;
font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--xh-gold);
background: rgba(255,204,0,.1);
border-radius: 999px;
margin-bottom: 8px;
}
.xh-kb-strip-title {
font-family: var(--xh-font-display, 'Archivo Black'), system-ui, sans-serif;
font-size: clamp(28px, 4vw, 36px); line-height: 1.15;
margin: 0 0 8px;
color: var(--xh-text, var(--xh-text));
letter-spacing: -.01em;
}
.xh-kb-strip-sub {
font-size: 16px; line-height: 1.5;
color: var(--xh-text-mute, var(--xh-text-muted));
margin: 0;
max-width: 560px;
}
.xh-kb-strip-cta { flex-shrink: 0; }
.xh-kb-strip-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.xh-kb-strip-card {
display: flex; align-items: flex-start; gap: 14px;
padding: 20px;
background: linear-gradient(rgb(13,20,36), rgb(10,15,28));
border: 1px solid rgba(30,45,74,.6);
border-radius: 12px;
text-decoration: none;
transition: transform .15s, border-color .15s, box-shadow .15s;
}
.xh-kb-strip-card:hover {
transform: translateY(-2px);
border-color: rgba(255,204,0,.4);
box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.xh-kb-strip-card-icon {
width: 40px; height: 40px;
flex: 0 0 40px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,204,0,.1);
border-radius: 10px;
color: var(--xh-gold);
}
.xh-kb-strip-card--wiki .xh-kb-strip-card-icon { background: rgba(120,170,255,.12); color: var(--xh-blue-accent); }
.xh-kb-strip-card--mechanics .xh-kb-strip-card-icon { background: rgba(120,255,180,.12); color: var(--xh-mint); }
.xh-kb-strip-card-icon svg { width: 20px; height: 20px; flex-shrink: 0; }
.xh-kb-strip-card-body { flex: 1; min-width: 0; }
.xh-kb-strip-card-cat {
font-size: 11px; font-weight: 600; letter-spacing: .06em;
color: var(--xh-gold);
text-transform: uppercase;
display: block;
margin-bottom: 4px;
}
.xh-kb-strip-card--wiki .xh-kb-strip-card-cat { color: var(--xh-blue-accent); }
.xh-kb-strip-card--mechanics .xh-kb-strip-card-cat { color: var(--xh-mint); }
.xh-kb-strip-card h3 {
font-size: 16px; font-weight: 600;
margin: 0 0 6px;
color: var(--xh-text, var(--xh-text));
line-height: 1.3;
}
.xh-kb-strip-card p {
font-size: 13px; line-height: 1.5;
color: var(--xh-text-mute, var(--xh-text-muted));
margin: 0 0 10px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.xh-kb-strip-card-meta {
display: flex; align-items: center; justify-content: space-between;
font-size: 12px; color: var(--xh-text-mute, var(--xh-text-muted));
}
.xh-kb-strip-card-link {
display: inline-flex; align-items: center; gap: 4px;
font-weight: 600; color: var(--xh-gold);
}
.xh-kb-strip-card-link svg { width: 12px; height: 12px; }
@media (max-width: 720px) {
.xh-kb-strip { padding: 48px 0; }
.xh-kb-strip-header { flex-direction: column; align-items: flex-start; }
.xh-kb-strip-cta { width: 100%; justify-content: center; }
}
.xh-cookie-consent {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 9990;
max-width: 920px;
margin: 0 auto;
background: rgba(12, 19, 34, 0.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--xh-border-light, rgba(255,255,255,.08));
border-radius: 14px;
box-shadow: 0 12px 36px var(--xh-shadow-strong), 0 0 0 1px rgba(255,204,0,.08);
padding: 18px 22px;
opacity: 0;
transform: translateY(20px);
transition: opacity .25s ease, transform .25s ease;
pointer-events: none;
}
.xh-cookie-consent--visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.xh-cookie-consent[hidden] { display: none; }
.xh-cookie-consent__close {
position: absolute;
top: 12px;
right: 14px;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid var(--xh-border, var(--xh-border));
border-radius: 50%;
background: transparent;
color: var(--xh-text-muted, var(--xh-text-muted));
font-size: 20px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color .15s, color .15s, border-color .15s;
}
.xh-cookie-consent__close:hover { background: var(--xh-bg-card-hover, var(--xh-bg-card-hover)); color: var(--xh-text, var(--xh-text)); }
.xh-cookie-consent__close:focus-visible { outline: 2px solid var(--xh-orange, var(--xh-orange)); outline-offset: 2px; }
.xh-cookie-consent__inner {
position: relative;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
padding-right: 44px;
}
.xh-cookie-consent__text { flex: 1 1 360px; min-width: 0; }
.xh-cookie-consent__title {
margin: 0 0 6px;
font-size: 15px;
font-weight: 700;
color: var(--xh-text, var(--xh-text));
letter-spacing: .01em;
}
.xh-cookie-consent__desc {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--xh-text-secondary, var(--xh-text-secondary));
}
.xh-cookie-consent__link {
color: var(--xh-gold);
text-decoration: underline;
text-underline-offset: 2px;
margin-left: 4px;
}
.xh-cookie-consent__link:hover { color: var(--xh-gold-bright); }
.xh-cookie-consent__link:focus-visible {
outline: 2px solid var(--xh-gold);
outline-offset: 2px;
border-radius: 2px;
}
.xh-cookie-consent__actions {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.xh-cookie-consent__btn {
padding: 10px 18px;
font-size: 13px;
white-space: nowrap;
}
.xh-cookie-consent__btn.xh-btn--primary {
background: var(--xh-orange, var(--xh-orange));
color: var(--xh-orange-text, var(--xh-orange-text));
box-shadow: 0 0 20px var(--xh-orange-glow, rgba(232,132,30,.25));
}
.xh-cookie-consent__btn.xh-btn--primary:hover {
background: var(--xh-orange-hover, var(--xh-orange-hover));
}
.xh-cookie-consent__btn.xh-btn--ghost {
background: var(--xh-overlay-3);
border: 1px solid var(--xh-border-light, var(--xh-border-light));
color: var(--xh-text, var(--xh-text));
}
.xh-cookie-consent__btn.xh-btn--ghost:hover {
background: var(--xh-overlay-8);
border-color: var(--xh-text-secondary, var(--xh-text-secondary));
}
.xh-cookie-settings-link {
background: none;
border: none;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: rgba(255,255,255,.2);
transition: color .15s ease, text-decoration-color .15s ease;
}
.xh-cookie-settings-link:hover { color: var(--xh-gold); text-decoration-color: var(--xh-gold); }
.xh-cookie-settings-link:focus-visible {
outline: 2px solid var(--xh-gold);
outline-offset: 2px;
border-radius: 2px;
}
@media (max-width: 640px) {
.xh-cookie-consent {
left: 8px;
right: 8px;
bottom: 8px;
padding: 16px 18px;
border-radius: 12px;
}
.xh-cookie-consent__inner {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.xh-cookie-consent__text { flex: 1 1 auto; }
.xh-cookie-consent__actions {
flex-direction: column-reverse;
width: 100%;
}
.xh-cookie-consent__btn {
width: 100%;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.xh-cookie-consent {
transition: opacity .15s ease;
transform: none;
}
.xh-cookie-consent--visible { transform: none; }
}
.xh-forum-updates {
padding: 64px 0;
position: relative;
z-index: 1;
}
.xh-forum-updates__header {
text-align: center;
margin: 0 auto 36px;
max-width: 720px;
}
.xh-forum-updates__title {
margin: 0 0 12px;
font-size: 32px;
font-weight: 700;
font-family: var(--xh-font-heading);
color: var(--xh-text);
}
.xh-forum-updates__sub {
margin: 0;
font-size: 15px;
line-height: 1.55;
color: var(--xh-text-secondary);
}
.xh-forum-updates__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin: 0 0 32px;
}
.xh-forum-col {
padding: 22px 24px 18px;
background: rgba(12, 19, 34, .55);
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 14px;
}
.xh-forum-col__title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 16px;
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--xh-text);
}
.xh-forum-col__dot {
width: 8px; height: 8px;
border-radius: 50%;
}
.xh-forum-col__dot--updates { background: var(--xh-gold); box-shadow: 0 0 8px rgba(255,204,0,.5); }
.xh-forum-col__dot--discussions { background: var(--xh-blue-accent); box-shadow: 0 0 8px rgba(120,170,255,.5); }
.xh-forum-list {
list-style: none;
padding: 0;
margin: 0;
}
.xh-forum-item {
border-bottom: 1px solid var(--xh-overlay-3);
}
.xh-forum-item:last-child { border-bottom: 0; }
.xh-forum-item__link {
display: block;
padding: 12px 0;
text-decoration: none;
color: inherit;
transition: color .15s ease;
}
.xh-forum-item__link:hover { color: var(--xh-text); }
.xh-forum-item__body {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 4px;
flex-wrap: wrap;
}
.xh-forum-item__cat {
display: inline-block;
padding: 2px 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
background: rgba(255, 204, 0, .14);
color: var(--xh-gold);
border-radius: 999px;
}
.xh-forum-item__title {
font-size: 14px;
font-weight: 600;
color: var(--xh-text);
line-height: 1.4;
}
.xh-forum-item__link:hover .xh-forum-item__title { color: var(--xh-gold); }
.xh-forum-item__meta {
font-size: 12px;
color: var(--xh-text-muted);
display: flex;
align-items: center;
gap: 8px;
}
.xh-forum-item__sep { opacity: .5; }
.xh-forum-updates__cta {
text-align: center;
}
@media (max-width: 720px) {
.xh-forum-updates { padding: 48px 0; }
.xh-forum-updates__title { font-size: 24px; }
.xh-forum-updates__grid { grid-template-columns: 1fr; gap: 16px; }
.xh-forum-col { padding: 18px 18px 14px; }
}
.xh-page a:focus-visible,
.xh-page button:focus-visible,
.xh-page input:focus-visible,
.xh-page select:focus-visible,
.xh-page textarea:focus-visible,
.xh-page [tabindex]:focus-visible,
#modal-mask a:focus-visible,
#modal-mask button:focus-visible,
#modal-mask input:focus-visible,
#modal-mask select:focus-visible,
#modal-mask textarea:focus-visible {
outline: 2px solid var(--xh-gold);
outline-offset: 2px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
*:hover {
transform: none !important;
}
}
.xh-kb-strip-sections {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
.xh-kb-strip-section {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 22px 22px 20px;
background: rgba(12, 19, 34, .55);
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: border-color .15s ease, transform .15s ease, background .15s ease;
--_c: var(--xh-gold);
-webkit-tap-highlight-color: transparent;
}
.xh-kb-strip-section--wiki { --_c: var(--xh-blue-accent); }
.xh-kb-strip-section--mechanics { --_c: var(--xh-mint); }
.xh-kb-strip-section:hover,
.xh-kb-strip-section:active {
border-color: color-mix(in srgb, var(--_c) 50%, transparent);
transform: translateY(-2px);
background: rgba(12, 19, 34, .85);
}
.xh-kb-strip-section__icon {
width: 44px; height: 44px;
border-radius: 10px;
background: rgba(255, 204, 0, .14);
display: flex; align-items: center; justify-content: center;
color: var(--xh-gold);
flex-shrink: 0;
}
.xh-kb-strip-section--wiki .xh-kb-strip-section__icon { background: rgba(120, 170, 255, .14); color: var(--xh-blue-accent); }
.xh-kb-strip-section--mechanics .xh-kb-strip-section__icon { background: rgba(120, 255, 180, .14); color: var(--xh-mint); }
.xh-kb-strip-section__icon svg { width: 22px; height: 22px; }
.xh-kb-strip-section__body { flex: 1; min-width: 0; }
.xh-kb-strip-section__count {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--xh-text-muted, var(--xh-text-dim));
display: block;
margin: 0 0 6px;
}
.xh-kb-strip-section__body h3 {
margin: 0 0 8px;
font-size: 18px;
font-weight: 700;
color: var(--xh-text, var(--xh-text));
}
.xh-kb-strip-section__body p {
margin: 0 0 12px;
font-size: 13px;
line-height: 1.5;
color: var(--xh-text-secondary, var(--xh-text-secondary));
}
.xh-kb-strip-section__cta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 700;
color: var(--xh-gold);
text-transform: uppercase;
letter-spacing: .04em;
}
.xh-kb-strip-section--wiki .xh-kb-strip-section__cta { color: var(--xh-blue-accent); }
.xh-kb-strip-section--mechanics .xh-kb-strip-section__cta { color: var(--xh-mint); }
.xh-kb-strip-section__cta svg { width: 12px; height: 12px; }
.xh-page--auth {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.xh-auth-main {
padding: 56px 0 80px;
position: relative;
z-index: 1;
}
.xh-auth-content {
max-width: 720px;
margin: 0 auto;
}
.xh-page--auth form {
background: rgba(12, 19, 34, .55);
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 14px;
padding: 32px 32px 24px;
margin: 0 auto;
}
.xh-page--auth h1, .xh-page--auth h2, .xh-page--auth h3 {
color: var(--xh-text);
font-family: var(--xh-font-heading);
margin-bottom: 20px;
}
.xh-page--auth label,
.xh-page--auth p,
.xh-page--auth li {
color: var(--xh-text-secondary);
line-height: 1.55;
}
.xh-page--auth input[type="text"],
.xh-page--auth input[type="email"],
.xh-page--auth input[type="password"],
.xh-page--auth input[type="number"],
.xh-page--auth input:not([type]),
.xh-page--auth textarea,
.xh-page--auth select {
width: 100%;
padding: 11px 14px;
margin: 6px 0 14px;
background: rgba(6, 10, 20, .6);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 8px;
color: var(--xh-text);
font: inherit;
font-size: 14px;
outline: none;
transition: border-color .15s ease, background .15s ease;
}
.xh-page--auth input:focus,
.xh-page--auth textarea:focus,
.xh-page--auth select:focus {
border-color: var(--xh-gold);
background: rgba(6, 10, 20, .85);
}
.xh-page--auth input[type="submit"],
.xh-page--auth button[type="submit"],
.xh-page--auth .btn-submit {
background: var(--xh-orange);
color: var(--xh-orange-text);
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
padding: 12px 24px;
border: 0;
border-radius: 8px;
cursor: pointer;
width: auto;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 0 18px var(--xh-orange-glow);
transition: background .15s ease, transform .15s ease;
}
.xh-page--auth input[type="submit"]:hover,
.xh-page--auth button[type="submit"]:hover,
.xh-page--auth .btn-submit:hover {
background: var(--xh-orange-hover);
transform: translateY(-1px);
}
.xh-page--auth a:not(.xh-btn):not(.xh-nav a):not(.xh-footer a):not(.xh-logo):not(.xh-breadcrumbs-item a) {
color: var(--xh-gold);
}
.xh-page--auth a:not(.xh-btn):not(.xh-nav a):not(.xh-footer a):not(.xh-logo):not(.xh-breadcrumbs-item a):hover {
color: var(--xh-gold-bright);
}
.xh-page--auth .win, .xh-page--auth .bg-g, .xh-page--auth .bg-tc, .xh-page--auth .bg-p-1 {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.xh-page--auth #topnav,
.xh-page--auth .legacy-header,
.xh-page--auth .legacy-footer { display: none !important; }
.xh-auth-fallback {
max-width: 560px;
margin: 0 auto;
padding: 32px 32px 28px;
background: rgba(12, 19, 34, .55);
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 14px;
text-align: center;
}
.xh-auth-fallback__icon {
width: 56px; height: 56px;
margin: 0 auto 16px;
border-radius: 14px;
background: rgba(255, 204, 0, .14);
display: flex; align-items: center; justify-content: center;
color: var(--xh-gold);
}
.xh-auth-fallback__icon svg { width: 28px; height: 28px; }
.xh-auth-fallback h1 {
font-size: 24px;
font-weight: 700;
color: var(--xh-text);
margin: 0 0 10px;
}
.xh-auth-fallback p {
font-size: 15px;
line-height: 1.55;
color: var(--xh-text-secondary);
margin: 0 0 18px;
}
.xh-auth-fallback__steps {
list-style: none;
padding: 0;
margin: 0 0 24px;
text-align: left;
display: inline-block;
}
.xh-auth-fallback__steps li {
padding: 8px 0;
font-size: 14px;
color: var(--xh-text-secondary);
}
.xh-auth-fallback__steps strong { color: var(--xh-gold); }
.xh-auth-fallback__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.xh-about-stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
margin: 0 0 40px;
padding: 0;
list-style: none;
}
.xh-about-stat {
padding: 20px 16px;
border: 1px solid var(--xh-border, var(--xh-border));
border-radius: var(--xh-radius-lg, 10px);
background: var(--xh-bg-card, var(--xh-bg-card));
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
transition: border-color var(--xh-transition, .3s ease), transform var(--xh-transition, .3s ease);
}
.xh-about-stat:hover {
border-color: var(--xh-border-light, var(--xh-border-light));
transform: translateY(-2px);
}
.xh-about-stat__value {
font-family: var(--xh-font-display, 'Archivo Black'), sans-serif;
font-size: 32px;
line-height: 1;
color: var(--xh-orange, var(--xh-orange));
}
.xh-about-stat__value sup { font-size: 0.55em; vertical-align: super; opacity: .8; }
.xh-about-stat__label {
font-family: var(--xh-font-heading, 'Rajdhani'), sans-serif;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .8px;
color: var(--xh-text-secondary, var(--xh-text-secondary));
}
@media (max-width: 980px) {
.xh-about-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
.xh-about-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.xh-about-stat { padding: 16px 14px; }
.xh-about-stat__value { font-size: 26px; }
}
@media (max-width: 380px) {
.xh-about-stats { grid-template-columns: 1fr 1fr; }
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.xh-page--auth .xh-user-dropdown a,
.xh-page--auth .xh-lang-dropdown a,
.xh-page--auth .xh-mobile-menu a,
.xh-page--auth .xh-mobile-menu a:not([class*="xh-btn"]) {
color: var(--xh-text) !important;
}
.xh-page--auth .xh-user-dropdown a:hover,
.xh-page--auth .xh-lang-dropdown a:hover,
.xh-page--auth .xh-mobile-menu a:hover {
color: var(--xh-orange) !important;
}
.xh-page--auth .xh-user-dropdown__logout {
color: var(--xh-orange) !important;
}
.xh-page--auth .xh-user-dropdown .xh-uni-ver {
color: var(--xh-text-muted) !important;
}
.xh-page--auth .xh-user .xh-user-nick {
color: var(--xh-yellow, var(--xh-gold)) !important;
}
@media (max-width: 640px) {
.xh-hero { min-height: auto; padding: 24px 0 28px; }
.xh-hero-eyebrow { font-size: 11px; letter-spacing: 1px; margin-bottom: 8px; }
.xh-hero-title { font-size: clamp(32px, 9vw, 48px); margin-bottom: 6px; }
.xh-hero-subtitle { font-size: 15px; margin-bottom: 8px; }
.xh-hero-desc { font-size: 14px; margin-bottom: 16px; line-height: 1.5; }
.xh-hero-actions { gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.xh-hero-actions .xh-btn { padding: 12px 18px; font-size: 14px; min-height: 44px; }
.xh-hero-perks { gap: 12px; margin-bottom: 14px; font-size: 12px; }
.xh-hero-apps { gap: 8px; }
}
@media (max-width: 640px) {
.xh-lang-dropdown {
grid-template-columns: 1fr;
min-width: 180px;
max-width: calc(100vw - 24px);
right: 0;
}
.xh-lang-dropdown a {
padding: 10px 12px;
font-size: 14px;
}
}
@media (max-width: 380px) {
.xh-hero-title { font-size: 28px; }
.xh-hero-actions { flex-direction: column; align-items: stretch; }
.xh-hero-actions .xh-btn { width: 100%; justify-content: center; }
.xh-lang-dropdown { min-width: 160px; }
}
@media (max-width: 640px) {
#modal-mask #modal-reg,
#modal-mask #modal-login,
#modal-mask #modal-recover,
#modal-mask #modal-recoverend {
max-width: 100% !important;
width: calc(100vw - 16px) !important;
margin: 8px !important;
padding: 16px !important;
}
#modal-mask .modal-content { padding: 0 !important; }
#modal-mask .modal-title {
font-size: 18px !important;
margin-bottom: 8px !important;
line-height: 1.2;
}
#modal-mask .modal-title span {
font-size: 12px !important;
margin-top: 4px !important;
}
#modal-mask .modal-soc { margin-bottom: 10px !important; }
#modal-mask .modal-soc-icos { gap: 6px !important; }
#modal-mask .modal-soc-icos > * {
width: 40px !important;
height: 40px !important;
}
#modal-mask .modal-soc-sep {
margin: 8px 0 !important;
font-size: 11px !important;
}
#modal-mask .modal-field-label {
font-size: 11px !important;
margin-top: 8px !important;
margin-bottom: 4px !important;
letter-spacing: .5px;
}
.xh-field-helper { font-size: 11px !important; min-height: 12px !important; }
#modal-mask .input-text,
#modal-mask .select {
padding: 9px 12px !important;
font-size: 14px !important;
}
#modal-mask form > div { margin-bottom: 6px; }
#modal-mask .modal-captcha {
margin: 8px 0 !important;
gap: 8px !important;
display: flex !important;
align-items: center !important;
}
#modal-mask .modal-captcha .img-captcha {
height: 36px !important;
width: auto !important;
max-width: 80px !important;
}
#modal-mask .modal-captcha .modal-field-label {
flex: 0 1 auto !important;
margin: 0 !important;
font-size: 10px !important;
}
#modal-mask .input-text-captcha .input-text {
max-width: 100px !important;
padding: 9px 8px !important;
text-align: center;
}
#modal-mask .modal-extra-text {
margin: 6px 0 !important;
font-size: 12px !important;
line-height: 1.4 !important;
}
#modal-mask label[for*="accept"],
#modal-mask label[for*="news"] {
font-size: 12px !important;
margin: 4px 0 !important;
line-height: 1.3 !important;
}
#modal-mask input[type="checkbox"] {
margin-right: 6px !important;
width: 18px !important;
height: 18px !important;
}
#modal-mask input[type="submit"],
#modal-mask button[type="submit"] {
width: 100% !important;
padding: 12px !important;
font-size: 15px !important;
margin-top: 8px !important;
min-height: 44px;
}
}
@media (max-width: 380px) {
#modal-mask #modal-reg,
#modal-mask #modal-login,
#modal-mask #modal-recover,
#modal-mask #modal-recoverend {
padding: 12px !important;
}
#modal-mask .modal-soc-icos > * {
width: 36px !important;
height: 36px !important;
}
}
.xh-lang-dropdown__search {
grid-column: 1 / -1;
padding: 0;
margin: 0 0 4px;
}
.xh-lang-dropdown li[data-xh-lang-hidden="true"] { display: none !important; }
@media (max-width: 640px) {
.xh-lang-dropdown__search { padding: 0 0 6px; }
.xh-lang-search-input { font-size: 14px; padding: 10px 12px; }
}
#modal-mask #modal-reg .reg-more { display: none !important; }
#modal-mask #modal-reg .reg-start { display: block !important; }
#modal-mask #modal-reg.reg-active .reg-more { display: block !important; }
#modal-mask #modal-reg.reg-active .modal-captcha.reg-more { display: flex !important; }
#modal-mask #modal-reg.reg-active .reg-start { display: none !important; }
@media (max-width: 640px) {
#modal-mask .input-text,
#modal-mask .select,
#modal-mask textarea,
#modal-mask input[type="email"],
#modal-mask input[type="password"],
#modal-mask input[type="text"],
#modal-mask input[type="number"],
#modal-mask input[type="tel"] {
font-size: 16px !important;
padding: 10px 12px !important;
}
#modal-mask #modal-reg,
#modal-mask #modal-login,
#modal-mask #modal-recover,
#modal-mask #modal-recoverend {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 12px 14px 20px !important;
border-radius: 0 !important;
box-sizing: border-box !important;
min-height: 0 !important;
max-height: 100vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
#modal-mask {
padding: 0 !important;
align-items: flex-start !important;
overflow: hidden !important;
height: 100dvh !important;
min-height: 100dvh !important;
}
#modal-mask .modal-title {
padding-top: 8px !important;
margin-top: 0 !important;
}
#modal-mask .modal-close,
#modal-mask .i-close {
top: 8px !important;
right: 8px !important;
width: 36px !important;
height: 36px !important;
z-index: 10 !important;
background: var(--xh-overlay-8) !important;
}
#modal-mask form .modal-block { margin-bottom: 4px !important; }
#modal-mask .modal-field-label {
margin-top: 6px !important;
margin-bottom: 2px !important;
}
#modal-mask .modal-extra-text.modal-checkbox-row {
height: auto !important;
min-height: 0 !important;
margin: 4px 0 !important;
padding: 0 !important;
display: flex !important;
align-items: flex-start !important;
gap: 6px !important;
font-size: 11px !important;
line-height: 1.3 !important;
}
#modal-mask .modal-extra-text.modal-checkbox-row .modal-label {
font-size: 11px !important;
line-height: 1.3 !important;
margin: 0 !important;
}
#modal-mask .modal-extra-text.modal-checkbox-row input[type="checkbox"] {
margin: 2px 4px 0 0 !important;
width: 16px !important;
height: 16px !important;
flex-shrink: 0 !important;
}
#modal-mask #modal-reg input[type="submit"].reg-more,
#modal-mask #modal-reg button[type="submit"].reg-more {
width: 100% !important;
margin-top: 12px !important;
margin-bottom: 8px !important;
padding: 14px !important;
font-size: 16px !important;
font-weight: 700;
}
html, body { overflow-x: hidden !important; }
#modal-mask form, #modal-mask .modal-content { max-width: 100% !important; overflow-x: hidden; }
body.body-modalShow,
body.body-menuShow {
touch-action: none !important;
}
#modal-mask {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 380px) {
#modal-mask #modal-reg,
#modal-mask #modal-login,
#modal-mask #modal-recover,
#modal-mask #modal-recoverend {
padding: 10px 12px 12px !important;
}
#modal-mask .modal-title { font-size: 16px !important; }
}
@media (max-width: 640px) {
#modal-mask .modal-body * {
max-width: 100% !important;
box-sizing: border-box !important;
}
#modal-mask .modal-body img,
#modal-mask .modal-body select,
#modal-mask .modal-body input,
#modal-mask .modal-body textarea,
#modal-mask .modal-body button {
max-width: 100% !important;
box-sizing: border-box !important;
}
#modal-mask {
max-width: 100vw !important;
width: 100vw !important;
overflow-x: hidden !important;
}
}
.xh-form-grid {
display: grid;
gap: 6px;
margin-bottom: 6px;
}
.xh-form-grid--row {
margin-bottom: 16px;
}
.xh-form-label {
display: block;
font-size: 14px;
color: var(--xh-text-muted, var(--xh-text-muted));
}
.xh-form-label--sm {
display: block;
margin: 0 0 6px;
font-size: 13px;
color: var(--xh-text-secondary, #c7d2e5);
}
.xh-form-label--overline {
display: block;
margin: 0 0 6px;
font-size: 12.5px;
color: var(--xh-text-muted, var(--xh-text-muted));
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
}
.xh-form-input {
background: var(--xh-overlay-4);
border: 1px solid var(--xh-border-input, #34456a);
border-radius: 8px;
padding: 11px 13px;
color: var(--xh-text, var(--xh-text));
font-size: 15px;
width: 100%;
font-family: inherit;
box-sizing: border-box;
transition: border-color .15s ease;
}
.xh-form-input:focus {
outline: none;
border-color: var(--xh-orange, var(--xh-orange));
}
.xh-form-input--textarea {
resize: vertical;
min-height: 140px;
line-height: 1.5;
}
.xh-form-error-text {
display: block;
margin-top: 4px;
color: #ffb4b4;
font-size: 12px;
}
.xh-form-helper {
display: block;
margin-top: 4px;
color: var(--xh-text-muted, var(--xh-text-muted));
font-size: 11px;
}
.xh-link--blue {
color: var(--xh-link-blue, #5fa8d1);
}
.xh-link--blue:hover {
color: #7dbfe0;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.xh-hero-cta-glow, .xh-trust-dot, .xh-live-pulse, [data-xh-live],
.xh-pulse, .xh-hero-cta-pulse {
animation: none !important;
}
}
.xk-cat-title {
font-family: var(--xh-font-heading, 'Rajdhani'), sans-serif;
font-size: 18px;
font-weight: 700;
margin: 0 0 4px;
line-height: 1.2;
color: var(--xh-text, var(--xh-text));
}
.xh-faq-a .xh-faq-link {
display: inline-block;
min-height: 24px;
line-height: 24px;
padding: 2px 0;
}
.xh-cookie-settings-link {
background: none;
border: none;
color: var(--xh-text-muted, var(--xh-text-muted));
text-decoration: underline;
cursor: pointer;
font-size: 13px;
padding: 6px 4px;
min-height: 24px;
display: inline-block;
font-family: inherit;
}
.xh-cookie-settings-link:hover {
color: var(--xh-text, var(--xh-text));
}
@media (max-width: 768px) {
.xh-footer a,
.xh-cookie-settings-link {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.xh-support-chip {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.xh-universe-cta {
min-height: 44px;
}
}
.xh-sec-head { text-align: center; max-width: 900px; margin: 0 auto; padding: 0 32px; }
.xh-sec-title { font-family: var(--xh-font-heading); font-weight: 700; font-size: 28px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--xh-white); margin: 0 0 14px; line-height: 1.15; }
.xh-sec-sub { font-family: var(--xh-font-body); font-size: 14px; line-height: 1.6; color: var(--xh-text-secondary); margin: 0 auto; max-width: 840px; }
.xh-factions { position: relative; z-index: 1; padding: 8px 0 64px; background: var(--xh-bg-deep); --fac-red: #ff3b46; --fac-green: #2ee06e; --fac-blue: #4aa6ff; }
.xh-factions .xh-sec-head { margin-bottom: 28px; }
.xh-factions-wrap { max-width: var(--xh-max-w); margin: 0 auto; padding: 0 32px; }
.xh-factions-banner { position: relative; overflow: hidden; isolation: isolate; border-radius: 16px; border: 1px solid var(--xh-overlay-8); box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.xh-factions-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.xh-fac-layer { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; background-position: center; transition: opacity .5s ease; }
.xh-fac-layer--red, .xh-fac-layer--green, .xh-fac-layer--blue { opacity: 0; mix-blend-mode: screen; transition: opacity .3s ease; transform: translateZ(0); will-change: opacity; backface-visibility: hidden; }
.xh-fac-layer--red   { background: radial-gradient(ellipse 30% 62% at 20% 48%, rgba(255,59,70,.30), transparent 66%); }
.xh-fac-layer--green { background: radial-gradient(ellipse 26% 70% at 50% 52%, rgba(120,255,170,.20), transparent 68%); }
.xh-fac-layer--blue  { background: radial-gradient(ellipse 30% 62% at 80% 48%, rgba(74,166,255,.30), transparent 66%); }
.xh-factions-banner:has(.xh-faction--red:hover)   .xh-fac-layer--red,
.xh-factions-banner:has(.xh-faction--red:focus-within)   .xh-fac-layer--red   { opacity: 1; }
.xh-factions-banner:has(.xh-faction--green:hover) .xh-fac-layer--green,
.xh-factions-banner:has(.xh-faction--green:focus-within) .xh-fac-layer--green { opacity: 1; }
.xh-factions-banner:has(.xh-faction--blue:hover)  .xh-fac-layer--blue,
.xh-factions-banner:has(.xh-faction--blue:focus-within)  .xh-fac-layer--blue  { opacity: 1; }
.xh-factions-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, rgba(6,10,20,.6) 0%, rgba(6,10,20,.12) 20%, rgba(6,10,20,0) 36%, rgba(6,10,20,0) 64%, rgba(6,10,20,.12) 80%, rgba(6,10,20,.6) 100%),
radial-gradient(ellipse 36% 52% at 50% 90%, rgba(6,10,20,.55) 0%, rgba(6,10,20,0) 72%),
linear-gradient(180deg, rgba(6,10,20,.32) 0%, rgba(6,10,20,0) 26%, rgba(6,10,20,0) 58%, var(--xh-bg-dark-a50) 100%); }
.xh-factions-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.05fr 1fr; grid-template-areas: "red green blue"; gap: 24px; align-items: start; padding: 34px 48px 30px; min-height: 300px; }
.xh-faction { position: relative; max-width: 300px; }
.xh-faction--red   { grid-area: red;   --fc: var(--fac-red); }
.xh-faction--green { grid-area: green; --fc: var(--fac-green); margin: 44px auto 0; text-align: center; }
.xh-faction--blue  { grid-area: blue;  --fc: var(--fac-blue); margin-left: auto; text-align: right; }
.xh-faction-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.xh-faction--blue .xh-faction-head { flex-direction: row-reverse; }
.xh-faction--green .xh-faction-head { flex-direction: column; gap: 8px; align-items: center; }
.xh-faction-emblem { width: 60px; height: 60px; flex-shrink: 0; filter: drop-shadow(0 0 10px color-mix(in oklab, var(--fc) 55%, transparent)); transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease; will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
.xh-faction-emblem img { width: 100%; height: 100%; object-fit: contain; display: block; }
.xh-faction:hover .xh-faction-emblem { transform: translateZ(0) scale(1.08); filter: drop-shadow(0 0 18px var(--fc)); }
.xh-faction-name { font-family: var(--xh-font-heading); font-weight: 700; font-size: 23px; letter-spacing: 2px; text-transform: uppercase; color: var(--xh-white); line-height: 1; text-shadow: 0 2px 14px rgba(0,0,0,.9); }
.xh-faction-role { font-family: var(--xh-font-heading); font-weight: 700; font-size: 13px; letter-spacing: .6px; color: var(--fc); margin-top: 7px; white-space: nowrap; text-shadow: 0 0 12px color-mix(in oklab, var(--fc) 55%, transparent), 0 1px 6px rgba(0,0,0,.9); }
.xh-faction-desc { font-family: var(--xh-font-body); font-size: 13px; line-height: 1.6; color: #cad2de; margin-bottom: 18px; max-width: 260px; text-shadow: 0 1px 7px rgba(0,0,0,.95); }
.xh-faction--blue .xh-faction-desc { margin-left: auto; }
.xh-faction--green .xh-faction-desc { margin-left: auto; margin-right: auto; }
.xh-faction-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--xh-font-heading); font-weight: 700; font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; padding: 11px 22px; border-radius: var(--xh-radius); border: 1px solid var(--fc); color: var(--xh-white); background: rgba(6,10,20,.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); text-decoration: none; cursor: pointer; transition: all .3s ease; }
.xh-faction-btn:hover { background: color-mix(in oklab, var(--fc) 22%, transparent); box-shadow: 0 0 22px color-mix(in oklab, var(--fc) 55%, transparent); transform: translateY(-1px); }
.xh-faction-btn svg { width: 13px; height: 13px; transition: transform .3s ease; }
.xh-faction-btn:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .xh-fac-layer, .xh-faction-emblem, .xh-faction-btn, .xh-faction-btn svg { transition: none !important; } }
@media (max-width: 1024px) { .xh-factions-inner { padding: 38px 32px 40px; gap: 20px; } .xh-faction--green { margin-top: 44px; } }
@media (max-width: 768px) {
.xh-fac-layer--red, .xh-fac-layer--green, .xh-fac-layer--blue { display: none; }
.xh-fac-layer--base { opacity: .42; transform: none !important; }
.xh-factions { padding: 8px 0 48px; }
.xh-factions-wrap { padding: 0 20px; }
.xh-factions-inner { grid-template-columns: 1fr; grid-template-areas: "red" "green" "blue"; gap: 14px; padding: 22px 18px 26px; min-height: 0; }
.xh-faction--red, .xh-faction--green, .xh-faction--blue { margin: 0; max-width: 100%; text-align: center; padding: 18px; background: linear-gradient(180deg, rgba(6,10,20,.55), rgba(6,10,20,.35)); border: 1px solid rgba(255,255,255,.07); border-top: 2px solid var(--fc); border-radius: var(--xh-radius); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.xh-faction-head { flex-direction: column !important; align-items: center; gap: 8px; margin-bottom: 12px; }
.xh-faction-desc, .xh-faction--blue .xh-faction-desc { margin: 0 auto 16px; max-width: 100%; }
.xh-faction-emblem { width: 48px; height: 48px; }
.xh-sec-title { font-size: 21px; letter-spacing: 1.5px; }
.xh-sec-sub { font-size: 13px; }
}
.xh-uni { position: relative; isolation: isolate; overflow: hidden; border-radius: 14px; border: 1px solid var(--xh-border); min-height: 466px; padding: 26px 26px 24px; display: flex; flex-direction: column; transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease; }
.xh-uni-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform 1.5s cubic-bezier(.2,.7,.2,1); }
.xh-uni-bg::after { content: ''; position: absolute; inset: 0; background:
linear-gradient(180deg, rgba(8,12,22,.5) 0%, rgba(8,12,22,.1) 28%, rgba(8,12,22,.42) 58%, rgba(8,12,22,.95) 100%),
linear-gradient(100deg, rgba(8,12,22,.82) 0%, rgba(8,12,22,.34) 46%, rgba(8,12,22,0) 82%); }
.xh-uni:hover { transform: translateY(-5px); }
.xh-uni:hover .xh-uni-bg { transform: scale(1.07); }
.xh-uni--woa     { --uni-accent: 232,132,30; }
.xh-uni--classic { --uni-accent: 90,180,255; }
.xh-uni--reborn  { --uni-accent: 60,228,122; }
.xh-uni-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
.xh-uni:hover .xh-uni-fx, .xh-uni.is-alive .xh-uni-fx { opacity: 1; }
.xh-uni-fx::before { content: ''; position: absolute; top: -25%; left: 0; width: 38%; height: 150%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); filter: blur(7px); transform: translateX(-160%) skewX(-16deg); }
.xh-uni-fx::after { content: ''; position: absolute; inset: -12% 0 0 0; background-repeat: no-repeat;
background-image:
radial-gradient(2px 2px at 18% 82%, rgba(var(--uni-accent),.95), transparent 60%),
radial-gradient(2px 2px at 44% 64%, rgba(var(--uni-accent),.70), transparent 60%),
radial-gradient(1.5px 1.5px at 68% 92%, rgba(255,255,255,.75), transparent 60%),
radial-gradient(2px 2px at 84% 72%, rgba(var(--uni-accent),.85), transparent 60%),
radial-gradient(1.5px 1.5px at 33% 96%, rgba(255,255,255,.6), transparent 60%),
radial-gradient(1.5px 1.5px at 58% 78%, rgba(var(--uni-accent),.7), transparent 60%);
opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.xh-uni:hover .xh-uni-bg, .xh-uni.is-alive .xh-uni-bg { animation: xh-uni-kenburns 16s ease-in-out infinite alternate; }
.xh-uni:hover .xh-uni-fx::before, .xh-uni.is-alive .xh-uni-fx::before { animation: xh-uni-sweep 5s ease-in-out .3s infinite; }
.xh-uni:hover .xh-uni-fx::after, .xh-uni.is-alive .xh-uni-fx::after { animation: xh-uni-rise 7s linear infinite; }
.xh-uni:hover, .xh-uni.is-alive { animation: xh-uni-glow 3.4s ease-in-out infinite; }
.xh-uni:hover .xh-uni-btn, .xh-uni.is-alive .xh-uni-btn { animation: xh-uni-btn-pulse 2.4s ease-in-out infinite; }
}
@keyframes xh-uni-kenburns { 0% { transform: scale(1.06) translate(0,0); } 100% { transform: scale(1.13) translate(-2.2%,-1.6%); } }
@keyframes xh-uni-sweep { 0% { transform: translateX(-160%) skewX(-16deg); } 60%,100% { transform: translateX(360%) skewX(-16deg); } }
@keyframes xh-uni-rise { 0% { transform: translateY(0); opacity: 0; } 14% { opacity: 1; } 100% { transform: translateY(-130px); opacity: 0; } }
@keyframes xh-uni-glow { 0%,100% { box-shadow: 0 14px 44px rgba(var(--uni-accent),.18), 0 0 0 1px rgba(var(--uni-accent),.28) inset; } 50% { box-shadow: 0 20px 64px rgba(var(--uni-accent),.36), 0 0 0 1px rgba(var(--uni-accent),.5) inset; } }
@keyframes xh-uni-btn-pulse { 0%,100% { box-shadow: 0 0 18px rgba(var(--uni-accent),.42); } 50% { box-shadow: 0 0 36px rgba(var(--uni-accent),.72); } }
.xh-uni--woa { border-color: rgba(232,132,30,.5); box-shadow: 0 0 0 1px rgba(232,132,30,.14) inset, 0 0 34px var(--xh-orange-a12); }
.xh-uni--woa:hover { border-color: rgba(232,132,30,.85); box-shadow: 0 0 0 1px rgba(232,132,30,.28) inset, 0 16px 50px rgba(232,132,30,.22); }
.xh-uni--classic { border-color: rgba(90,180,255,.3); }
.xh-uni--classic:hover { border-color: rgba(90,180,255,.62); box-shadow: 0 16px 50px rgba(90,180,255,.2); }
.xh-uni--reborn { border-color: rgba(60,228,122,.3); }
.xh-uni--reborn:hover { border-color: rgba(60,228,122,.6); box-shadow: 0 16px 50px rgba(60,228,122,.18); }
.xh-uni-badge-row { min-height: 26px; margin-bottom: 16px; display: flex; }
.xh-uni-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--xh-font-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 5px 13px; background: var(--xh-orange); color: var(--xh-orange-text); border-radius: 999px; box-shadow: 0 0 16px rgba(232,132,30,.5); }
.xh-uni-badge svg { width: 12px; height: 12px; }
.xh-uni-badge--reborn { background: #1d9d57; box-shadow: 0 0 16px rgba(60,228,122,.5); }
.xh-uni-name { font-family: var(--xh-font-heading); font-weight: 700; font-size: 27px; letter-spacing: 1px; text-transform: uppercase; color: var(--xh-white); line-height: 1.05; margin-bottom: 10px; text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.xh-user-dropdown .xh-uni-name { font-size: 14px; font-weight: 600; letter-spacing: .4px; line-height: 1.2; margin-bottom: 0; text-shadow: none; }
.xh-uni-tagline { font-family: var(--xh-font-heading); font-weight: 700; font-size: 14px; letter-spacing: .3px; margin-bottom: 12px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.xh-uni--woa .xh-uni-tagline { color: var(--xh-orange); }
.xh-uni--classic .xh-uni-tagline { color: #5ab4ff; }
.xh-uni--reborn .xh-uni-tagline { color: #3ce47a; }
.xh-uni-desc { font-family: var(--xh-font-body); font-size: 13.5px; line-height: 1.6; color: #c2cad6; max-width: 270px; text-shadow: 0 1px 6px rgba(0,0,0,.75); }
.xh-uni-tags { display: flex; flex-direction: column; gap: 9px; margin: auto 0 18px; padding-top: 20px; }
.xh-uni-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--xh-font-heading); font-size: 12.5px; font-weight: 600; color: #d8dfea; text-shadow: 0 1px 5px rgba(0,0,0,.85); }
.xh-uni-tag svg { width: 15px; height: 15px; flex-shrink: 0; }
.xh-uni--woa .xh-uni-tag svg { color: var(--xh-orange); }
.xh-uni--classic .xh-uni-tag svg { color: #5ab4ff; }
.xh-uni--reborn .xh-uni-tag svg { color: #3ce47a; }
.xh-uni-btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--xh-font-heading); font-size: 12.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; padding: 14px 18px; border-radius: var(--xh-radius); border: 1px solid; cursor: pointer; transition: all .3s ease; text-decoration: none; }
.xh-uni-btn svg { width: 14px; height: 14px; }
.xh-page .xh-uni--woa .xh-uni-btn { background: var(--xh-orange); border-color: var(--xh-orange); color: var(--xh-orange-text); box-shadow: 0 0 20px rgba(232,132,30,.4); }
.xh-uni--woa .xh-uni-btn:hover { background: var(--xh-orange-hover); border-color: var(--xh-orange-hover); box-shadow: 0 0 30px rgba(232,132,30,.55); transform: translateY(-1px); }
.xh-uni--classic .xh-uni-btn { background: rgba(8,13,24,.62); border-color: rgba(255,255,255,.2); color: var(--xh-white); }
.xh-uni--classic .xh-uni-btn:hover { border-color: #5ab4ff; background: rgba(74,157,245,.16); box-shadow: 0 0 24px rgba(74,157,245,.3); transform: translateY(-1px); }
.xh-uni--reborn .xh-uni-btn { background: rgba(8,13,24,.45); border-color: rgba(60,228,122,.6); color: #74ffae; }
.xh-uni--reborn .xh-uni-btn:hover { border-color: #3ce47a; background: rgba(60,228,122,.16); box-shadow: 0 0 24px rgba(60,228,122,.3); color: var(--xh-white); transform: translateY(-1px); }
.xh-uni-more { display: block; text-align: center; margin-top: 10px; padding: 6px 0; font-family: var(--xh-font-heading); font-size: 12px; font-weight: 600; letter-spacing: .4px; color: var(--xh-text-secondary); text-decoration: none; transition: color .3s ease; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.xh-uni-more:hover { color: var(--xh-white); }
@media (prefers-reduced-motion: reduce) { .xh-uni-bg, .xh-uni-fx, .xh-uni { transition: none !important; } }
@media (max-width: 1024px) { .xh-uni { padding: 22px 20px; min-height: 440px; } .xh-uni-name { font-size: 23px; } }
@media (max-width: 768px) { .xh-uni { padding: 24px 22px; min-height: 420px; } .xh-uni-name { font-size: 24px; } .xh-uni-desc { max-width: 100%; } }
.xh-faction { border-radius: 14px; transition: transform .32s cubic-bezier(.2,.7,.2,1); }
.xh-faction::before { content: ''; position: absolute; inset: -16px -18px; z-index: -1; border-radius: 16px;
background: linear-gradient(180deg, color-mix(in oklab, var(--fc) 16%, transparent), rgba(6,10,20,.30));
border: 1px solid color-mix(in oklab, var(--fc) 38%, transparent);
box-shadow: 0 0 30px color-mix(in oklab, var(--fc) 30%, transparent), inset 0 0 26px rgba(6,10,20,.42);
backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
opacity: 0; transform: scale(.96); transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.xh-faction:hover, .xh-faction:focus-within, .xh-faction.is-alive { transform: translateY(-3px); }
.xh-faction:hover::before, .xh-faction:focus-within::before, .xh-faction.is-alive::before { opacity: 1; transform: scale(1); }
.xh-faction:hover .xh-faction-emblem, .xh-faction:focus-within .xh-faction-emblem, .xh-faction.is-alive .xh-faction-emblem { transform: translateZ(0) scale(1.08); filter: drop-shadow(0 0 18px var(--fc)); }
.xh-faction:hover .xh-faction-name, .xh-faction:focus-within .xh-faction-name, .xh-faction.is-alive .xh-faction-name { text-shadow: 0 0 18px color-mix(in oklab, var(--fc) 60%, transparent), 0 2px 14px rgba(0,0,0,.9); }
.xh-faction-desc { margin-top: 4px; }
.xh-uni-desc { margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .xh-faction, .xh-faction::before { transition: none !important; } }
@media (max-width: 768px) { .xh-faction::before { inset: -12px -14px; } }
@media (max-width: 768px) {
.xh-universe-grid {
display: flex; grid-template-columns: none; flex-wrap: nowrap;
overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; gap: 14px; max-width: none; margin: 0;
padding: 6px 20px 18px; scrollbar-width: none;
}
.xh-universe-grid::-webkit-scrollbar { display: none; }
.xh-uni { flex: 0 0 84%; scroll-snap-align: center; min-height: 432px; }
.xh-factions-inner {
display: flex; grid-template-columns: none; grid-template-areas: none; flex-wrap: nowrap;
overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; gap: 12px; padding: 18px 16px 20px; min-height: 0;
scrollbar-width: none;
}
.xh-factions-inner::-webkit-scrollbar { display: none; }
.xh-faction--red, .xh-faction--green, .xh-faction--blue {
flex: 0 0 78%; scroll-snap-align: center; margin: 0; max-width: none; text-align: center;
padding: 20px 18px;
background: linear-gradient(180deg, rgba(6,10,20,.42), rgba(6,10,20,.62));
border: 1px solid var(--xh-overlay-8); border-top: 2px solid var(--fc);
border-radius: 14px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.xh-faction-head { flex-direction: column !important; align-items: center; gap: 8px; margin-bottom: 12px; }
.xh-faction-desc, .xh-faction--blue .xh-faction-desc { margin: 0 auto 16px; max-width: 100%; }
.xh-faction::before { inset: 0; border-radius: 14px; }
.xh-universes .xh-universe-grid, .xh-factions .xh-factions-inner { scroll-padding: 0 20px; }
}
@media (min-width: 769px) {
.xh-faction::before { display: none !important; }
.xh-faction:hover, .xh-faction:focus-within { transform: none; }
.xh-fac-layer--red, .xh-fac-layer--green, .xh-fac-layer--blue { opacity: 0 !important; }
}
.xh-uni-fx::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); }
.xh-uni:hover .xh-uni-fx::before, .xh-uni.is-alive .xh-uni-fx::before { animation-duration: 9s; }
.xh-uni-fx::after {
background-image:
radial-gradient(2.5px 2.5px at 12% 88%, rgba(var(--uni-accent),1),   transparent 60%),
radial-gradient(2px 2px     at 24% 72%, rgba(255,255,255,.92),        transparent 60%),
radial-gradient(3px 3px     at 37% 94%, rgba(var(--uni-accent),.98),  transparent 60%),
radial-gradient(2px 2px     at 49% 66%, rgba(var(--uni-accent),.85),  transparent 60%),
radial-gradient(2.5px 2.5px at 61% 86%, rgba(255,255,255,.9),         transparent 60%),
radial-gradient(2px 2px     at 71% 74%, rgba(var(--uni-accent),.95),  transparent 60%),
radial-gradient(3px 3px     at 83% 92%, rgba(var(--uni-accent),1),    transparent 60%),
radial-gradient(2px 2px     at 92% 78%, rgba(255,255,255,.85),        transparent 60%);
}
.xh-uni:hover .xh-uni-fx::after, .xh-uni.is-alive .xh-uni-fx::after { animation-duration: 4.5s; }
@keyframes xh-uni-rise { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-160px); opacity: 0; } }
@media (max-width: 768px) {
.xh-factions-inner {
display: grid !important; grid-template-columns: 1fr; grid-template-areas: "red" "green" "blue";
overflow: visible !important; gap: 4px; padding: 20px 18px 24px; scroll-snap-type: none;
}
.xh-faction--red, .xh-faction--green, .xh-faction--blue {
flex: none; max-width: 100%; margin: 0; padding: 16px 6px;
background: none !important; border: none !important; border-top: none !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important; scroll-snap-align: none;
}
.xh-faction + .xh-faction { border-top: 1px solid var(--xh-overlay-6); }
.xh-faction--red   { text-align: left; }
.xh-faction--green { text-align: center; }
.xh-faction--blue  { text-align: right; }
.xh-faction--red .xh-faction-head   { flex-direction: row !important; justify-content: flex-start; align-items: center; }
.xh-faction--green .xh-faction-head { flex-direction: column !important; align-items: center; }
.xh-faction--blue .xh-faction-head  { flex-direction: row-reverse !important; justify-content: flex-start; align-items: center; }
.xh-faction-desc { max-width: 100%; }
.xh-faction--red .xh-faction-desc   { margin: 0 auto 14px 0; }
.xh-faction--green .xh-faction-desc { margin: 0 auto 14px; }
.xh-faction--blue .xh-faction-desc  { margin: 0 0 14px auto; }
.xh-fac-layer--base { opacity: .5; }
.xh-faction::before { display: block !important; content: ''; position: absolute; inset: -6px -8px; z-index: -1;
border-radius: 16px; background: radial-gradient(ellipse at center, color-mix(in oklab, var(--fc) 18%, transparent), transparent 72%);
border: none !important; box-shadow: none !important; backdrop-filter: none !important; opacity: 0; transform: none; transition: opacity .35s ease; }
.xh-faction.is-alive::before { opacity: 1; }
}
.xh-uni:hover .xh-uni-bg, .xh-uni.is-alive .xh-uni-bg { animation: none !important; }
.xh-uni:hover, .xh-uni.is-alive { animation: none !important; }
.xh-uni:hover .xh-uni-btn, .xh-uni.is-alive .xh-uni-btn { animation: none !important; }
.xh-uni { transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, border-color .5s ease; }
.xh-uni-bg { transition: transform 2.4s cubic-bezier(.22,.61,.36,1); }
.xh-uni:hover .xh-uni-bg, .xh-uni.is-alive .xh-uni-bg { transform: scale(1.05); }
.xh-uni:hover, .xh-uni.is-alive { transform: translateY(-4px); }
@media (max-width: 768px) {
.xh-universe-grid { scroll-snap-type: x mandatory; scroll-padding-left: 20px; }
.xh-uni { scroll-snap-align: start; scroll-snap-stop: always; }
}
@media (max-width: 768px) {
.xh-universe-grid { touch-action: pan-y; scroll-behavior: smooth; overscroll-behavior-x: contain; }
}
.xh-fc { position: relative; z-index: 1; padding: 64px 20px 72px; color: var(--xh-white); }
.xh-fc-head { max-width: 980px; margin: 0 auto 38px; text-align: center; padding: 0 12px; }
.xh-fc-head h2 { margin: 0 0 12px; font-family: var(--xh-font-heading); font-weight: 700; font-size: clamp(26px, 3vw, 42px); line-height: 1.08; letter-spacing: .06em; text-transform: uppercase; color: var(--xh-white); }
.xh-fc-head p { margin: 0 auto; max-width: 780px; color: rgba(210,225,255,.78); font-size: 15px; line-height: 1.6; }
.xh-fc-orbit {
position: relative; max-width: 1280px; min-height: 430px; margin: 0 auto; padding: 34px;
display: grid; grid-template-columns: 1fr 1.08fr 1fr; align-items: center; gap: 24px;
border-radius: 22px; overflow: hidden; border: 1px solid rgba(140,175,230,.14);
background:
radial-gradient(circle at 18% 52%, rgba(255,45,55,.22), transparent 34%),
radial-gradient(circle at 50% 54%, rgba(37,255,128,.18), transparent 34%),
radial-gradient(circle at 82% 52%, rgba(70,165,255,.22), transparent 34%),
linear-gradient(180deg, rgba(9,17,32,.94), rgba(4,8,18,.98));
box-shadow: 0 24px 80px rgba(0,0,0,.36), inset 0 0 80px rgba(120,170,255,.035);
}
.xh-fc-orbit::before { content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, rgba(255,40,52,.12), transparent 28%, transparent 72%, rgba(60,150,255,.13)),
radial-gradient(ellipse at center, rgba(60,255,140,.12), transparent 44%); }
.xh-fc-orbit::after { content: ''; position: absolute; left: 8%; right: 8%; top: 50%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); opacity: .55; pointer-events: none; }
.xh-fc-card { position: relative; z-index: 2; min-height: 280px; padding: 30px 34px; border-radius: 18px;
background: rgba(4,10,22,.52); border: 1px solid rgba(140,175,230,.13);
box-shadow: inset 0 0 42px rgba(255,255,255,.025), 0 12px 36px rgba(0,0,0,.22);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.xh-fc-card:hover, .xh-fc-card.is-alive { transform: translateY(-3px); border-color: var(--fc);
box-shadow: 0 0 34px color-mix(in srgb, var(--fc) 30%, transparent), inset 0 0 44px var(--xh-overlay-3); }
.xh-fc-card--talkor.is-alive { transform: translateY(31px); }
.xh-fc-card--grabtor { --fc: #ff3347; }
.xh-fc-card--talkor  { --fc: #20e878; transform: translateY(34px); }
.xh-fc-card--senteri { --fc: #4aa8ff; }
.xh-fc-icon { width: 64px; height: 64px; margin-bottom: 16px; border-radius: 50%; display: grid; place-items: center;
background: radial-gradient(circle, rgba(8,14,28,.92), rgba(8,14,28,.45) 58%, transparent 72%);
box-shadow: 0 0 24px color-mix(in srgb, var(--fc) 60%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--fc) 38%, transparent); }
.xh-fc-icon img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--fc) 70%, transparent)); }
.xh-fc-card h3 { margin: 0 0 6px; font-family: var(--xh-font-heading); font-size: 26px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: var(--xh-white); }
.xh-fc-card strong { display: block; margin-bottom: 16px; color: var(--fc); font-family: var(--xh-font-heading); font-size: 14px; letter-spacing: .04em; }
.xh-fc-card p { margin: 0 0 22px; max-width: 320px; color: rgba(230,237,255,.76); font-size: 14.5px; line-height: 1.65; }
.xh-fc-card a { display: inline-flex; align-items: center; gap: 8px; color: var(--xh-white); font-family: var(--xh-font-heading); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: gap .25s ease; }
.xh-fc-card a svg { width: 13px; height: 13px; }
.xh-fc-card a:hover { gap: 12px; }
.xh-fc-core { position: absolute; z-index: 1; left: 50%; top: 47%; width: 190px; height: 190px; transform: translate(-50%, -50%); border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.18), transparent 22%),
conic-gradient(from 0deg, rgba(255,50,70,.38), rgba(35,240,120,.42), rgba(70,165,255,.42), rgba(255,50,70,.38));
filter: blur(18px); opacity: .42; }
@media (prefers-reduced-motion: no-preference) { .xh-fc-core { animation: xh-fc-core-spin 26s linear infinite; } }
@keyframes xh-fc-core-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.xh-fc-action { margin-top: 28px; text-align: center; }
.xh-fc-action a { display: inline-flex; min-width: 230px; height: 54px; align-items: center; justify-content: center; gap: 8px;
border-radius: 10px; border: 1px solid rgba(120,180,255,.42); background: rgba(8,18,38,.74); color: var(--xh-white);
font-family: var(--xh-font-heading); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
box-shadow: 0 0 28px rgba(70,145,255,.16); transition: all .3s ease; }
.xh-fc-action a:hover { border-color: rgba(120,180,255,.8); background: rgba(20,40,72,.85); box-shadow: 0 0 34px rgba(70,145,255,.3); transform: translateY(-1px); }
@media (max-width: 980px) {
.xh-fc-orbit { grid-template-columns: 1fr; min-height: auto; gap: 16px; padding: 26px 18px; }
.xh-fc-card { min-height: 0; padding: 24px 22px; text-align: center; }
.xh-fc-card--talkor, .xh-fc-card--talkor.is-alive { transform: none; }
.xh-fc-card--talkor:hover, .xh-fc-card.is-alive { transform: translateY(-3px); }
.xh-fc-icon { margin-left: auto; margin-right: auto; }
.xh-fc-card p { max-width: 100%; margin-left: auto; margin-right: auto; }
.xh-fc-orbit::after { display: none; }
.xh-fc-core { top: 50%; width: 150px; height: 150px; opacity: .3; }
}
.xh-factions { position: relative; z-index: 1; padding: 44px 0 60px; background: var(--xh-bg-deep); --fac-red: #ff3b46; --fac-green: #2ee06e; --fac-blue: #4aa6ff; }
.xh-factions .xh-sec-head { margin-bottom: 34px; }
.xh-factions .xh-sec-title { font-size: 38px; letter-spacing: 2px; }
.xh-factions-wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.xh-fac-frame { position: relative; isolation: isolate; aspect-ratio: 1672 / 720; max-height: 600px; overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent 0, var(--xh-black) 6%, var(--xh-black) 94%, transparent 100%), linear-gradient(to bottom, transparent 0, var(--xh-black) 5%, var(--xh-black) 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to right, transparent 0, var(--xh-black) 6%, var(--xh-black) 94%, transparent 100%), linear-gradient(to bottom, transparent 0, var(--xh-black) 5%, var(--xh-black) 100%);
mask-composite: intersect; }
.xh-fac-bg { position: absolute; inset: 0; z-index: 0; }
.xh-fac-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,15,.28) 0%, rgba(5,8,15,0) 22%, rgba(5,8,15,0) 52%, rgba(5,8,15,.45) 100%); }
.xh-fac-grid { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; }
.xh-fac-col { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 0 30px 42px; --fc: var(--fac-red); }
.xh-fac-col--red { --fc: var(--fac-red); }
.xh-fac-col--green { --fc: var(--fac-green); }
.xh-fac-col--blue { --fc: var(--fac-blue); }
.xh-fac-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .55s ease; mix-blend-mode: screen; background: radial-gradient(ellipse 58% 54% at 50% 50%, color-mix(in oklab, var(--fc) 36%, transparent), transparent 60%); }
.xh-fac-aura { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .55s ease; mix-blend-mode: screen; }
.xh-fac-aura--red   { background: radial-gradient(ellipse 46% 74% at 17% 52%, color-mix(in oklab, var(--fac-red) 50%, transparent), transparent 64%); }
.xh-fac-aura--green { background: radial-gradient(ellipse 46% 74% at 50% 52%, color-mix(in oklab, var(--fac-green) 44%, transparent), transparent 64%); }
.xh-fac-aura--blue  { background: radial-gradient(ellipse 46% 74% at 83% 52%, color-mix(in oklab, var(--fac-blue) 50%, transparent), transparent 64%); }
.xh-fac-frame:has(.xh-fac-col--red:hover)   .xh-fac-aura--red,
.xh-fac-frame:has(.xh-fac-col--green:hover) .xh-fac-aura--green,
.xh-fac-frame:has(.xh-fac-col--blue:hover)  .xh-fac-aura--blue { opacity: 1; }
.xh-fac-banner { position: absolute; top: 2%; left: 70%; transform: translateX(-50%); width: 40%; max-width: 140px; z-index: 2; pointer-events: none; filter: drop-shadow(0 14px 28px var(--xh-shadow-strong)); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.xh-fac-screen { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 92%; z-index: 1; opacity: .42; pointer-events: none; mix-blend-mode: screen; transition: opacity .55s ease; }
.xh-fac-col:hover .xh-fac-screen, .xh-fac-col.is-alive .xh-fac-screen { opacity: .7; }
.xh-fac-char { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 318px; height: auto; z-index: 3; pointer-events: none; filter: drop-shadow(0 20px 32px rgba(0,0,0,.55)); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.xh-fac-col::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(180deg, rgba(6,10,20,0) 46%, var(--xh-bg-dark-a50) 66%, rgba(6,10,20,.88) 83%, #060a14 100%); }
.xh-fac-col:hover .xh-fac-char, .xh-fac-col.is-alive .xh-fac-char { transform: translateX(-50%) scale(1.035); }
.xh-fac-col:hover .xh-fac-banner, .xh-fac-col.is-alive .xh-fac-banner { transform: translateX(-50%) translateY(-5px); }
.xh-fac-col:hover .xh-fac-glow, .xh-fac-col.is-alive .xh-fac-glow { opacity: 1; }
.xh-fac-body { position: relative; z-index: 5; width: 100%; max-width: 300px; }
.xh-fac-name { font-family: var(--xh-font-heading); font-weight: 700; font-size: 28px; letter-spacing: 3px; text-transform: uppercase; color: var(--xh-white); line-height: 1; text-shadow: 0 2px 16px rgba(0,0,0,.92); }
.xh-fac-role { font-family: var(--xh-font-heading); font-weight: 700; font-size: 14px; letter-spacing: .8px; color: var(--fc); margin-top: 9px; text-shadow: 0 0 14px color-mix(in oklab, var(--fc) 55%, transparent), 0 1px 6px rgba(0,0,0,.9); }
.xh-fac-desc { font-family: var(--xh-font-body); font-size: 13.5px; line-height: 1.62; color: #cdd5e1; margin: 14px auto 22px; max-width: 264px; text-shadow: 0 1px 8px rgba(0,0,0,.95); text-wrap: pretty; }
.xh-fac-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--xh-font-heading); font-weight: 700; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; padding: 12px 26px; color: var(--xh-white); text-decoration: none; cursor: pointer; border: 1px solid color-mix(in oklab, var(--fc) 70%, transparent); background: rgba(5,9,16,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); transition: all .3s ease; }
.xh-fac-btn:hover { background: color-mix(in oklab, var(--fc) 24%, transparent); box-shadow: 0 0 26px color-mix(in oklab, var(--fc) 55%, transparent); border-color: var(--fc); transform: translateY(-1px); }
.xh-fac-btn svg { width: 13px; height: 13px; transition: transform .3s ease; }
.xh-fac-btn:hover svg { transform: translateX(3px); }
.xh-fac-compare-wrap { display: flex; justify-content: center; margin-top: 32px; }
.xh-fac-compare { display: inline-flex; align-items: center; gap: 12px; font-family: var(--xh-font-heading); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #dce6f5; text-decoration: none; white-space: nowrap; padding: 18px 50px; border: 1px solid rgba(120,170,240,.4); background: linear-gradient(180deg, rgba(22,34,60,.62), rgba(8,14,26,.62)); clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%); transition: all .3s ease; }
.xh-fac-compare:hover { border-color: rgba(120,170,240,.85); box-shadow: 0 0 34px rgba(74,140,230,.32); color: var(--xh-white); }
.xh-fac-compare svg { width: 15px; height: 15px; transition: transform .3s ease; }
.xh-fac-compare:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .xh-fac-char, .xh-fac-banner, .xh-fac-glow, .xh-fac-screen, .xh-fac-btn, .xh-fac-btn svg { transition: none !important; } }
@media (max-width: 768px) {
.xh-factions { padding: 30px 0 52px; }
.xh-factions .xh-sec-title { font-size: 24px; }
.xh-factions-wrap { padding: 0 18px; }
.xh-fac-frame { aspect-ratio: auto; max-height: none; -webkit-mask-image: none; mask-image: none; border-radius: 16px; border: 1px solid var(--xh-overlay-8); }
.xh-fac-grid { position: static; grid-template-columns: 1fr; }
.xh-fac-col { min-height: 520px; padding: 0 22px 30px; }
.xh-fac-col + .xh-fac-col { border-top: 1px solid var(--xh-overlay-8); }
.xh-fac-char { max-width: 320px; }
.xh-fac-banner { max-width: 190px; }
}
@media (max-width: 480px) { .xh-factions-wrap { padding: 0 12px; } .xh-fac-col { min-height: 450px; padding: 0 18px 26px; } }
@media (max-width: 768px) {
.xh-fac-bg { display: none; }
.xh-fac-aura { display: none; }
.xh-fac-col { background-image: url(/media/v2/img/fac2-bg.webp); background-size: 300% auto; background-repeat: no-repeat; }
.xh-fac-col--red   { background-position: 0% center; }
.xh-fac-col--green { background-position: 50% center; }
.xh-fac-col--blue  { background-position: 100% center; }
.xh-fac-glow { opacity: 0; background:
radial-gradient(ellipse 84% 46% at 50% 28%, color-mix(in oklab, var(--fc) 66%, transparent), transparent 66%),
radial-gradient(ellipse 122% 84% at 50% 46%, color-mix(in oklab, var(--fc) 26%, transparent), transparent 76%); }
.xh-fac-col.is-alive .xh-fac-glow { opacity: 0; }
.xh-fac-col:active .xh-fac-glow, .xh-fac-col.is-active .xh-fac-glow { opacity: 1; }
.xh-fac-col.is-active { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--fc) 60%, transparent), inset 0 24px 64px -22px color-mix(in oklab, var(--fc) 58%, transparent); }
.xh-fac-col.is-active .xh-fac-char { transform: translateX(-50%) scale(1.05); }
.xh-fac-col.is-active .xh-fac-name { text-shadow: 0 2px 16px rgba(0,0,0,.92), 0 0 26px color-mix(in oklab, var(--fc) 58%, transparent); }
.xh-fac-col.is-alive .xh-fac-banner { transform: translateX(-50%); }
.xh-fac-col.is-active .xh-fac-banner { transform: translateX(-50%) translateY(-4px); }
.xh-fac-col::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(6,10,20,.30) 0%, rgba(6,10,20,.20) 40%, rgba(6,10,20,.72) 100%); }
.xh-fac-col { min-height: 500px; }
.xh-fac-char { max-width: 236px; }
.xh-fac-grid .xh-fac-banner { width: 36%; max-width: 138px; top: 8%; left: 76%; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
}
#xh_funi_header,
#xh_funi_header *,
#xh_funi_header *::before,
#xh_funi_header *::after { box-sizing: border-box; }
#xh_funi_header a { text-decoration: none; }
#xh_funi_header button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
#xh_funi_header ul, #xh_funi_header ol { list-style: none; margin: 0; padding: 0; }
.xh-skip-link {
position: absolute !important; left: -9999px !important; top: auto !important;
width: 1px !important; height: 1px !important; overflow: hidden !important;
}
.xh-skip-link:focus {
position: fixed !important; left: 16px !important; top: 16px !important; width: auto !important; height: auto !important;
z-index: 10000; padding: 12px 18px; background: var(--xh-orange); color: var(--xh-orange-text, var(--xh-orange-text));
font-weight: 700; border-radius: 6px; box-shadow: 0 4px 12px var(--xh-shadow-strong);
}
.xh-header {
position: sticky; top: 0; z-index: 100;
height: var(--xh-header-h);
background: var(--xh-bg-primary);
border-bottom: 1px solid var(--xh-border);
transition: background var(--xh-transition), box-shadow var(--xh-transition);
}
#xh_funi_header {
position: sticky; top: 0; z-index: 1000;
height: var(--xh-header-h);
background: var(--xh-bg-primary);
border-bottom: 1px solid var(--xh-border);
font-family: var(--xh-font-body);
}
@media (max-width: 768px) {
.xh-header,
#xh_funi_header {
position: fixed; top: 0; left: 0; right: 0;
}
.xh-page {
padding-top: var(--xh-header-h);
}
#ipboard_body { padding-top: var(--xh-header-h); }
.xh-header .xh-burger { margin-left: 4px; }
}
.xh-header.is-scrolled { background: rgba(6,10,20,0.95); box-shadow: 0 2px 20px rgba(0,0,0,.4); }
.xh-header-inner {
max-width: 100%;
padding: 0 var(--xh-container-pad);
padding-left: max(32px, env(safe-area-inset-left));
padding-right: max(32px, env(safe-area-inset-right));
height: 100%; display: flex; align-items: center; gap: 32px;
}
#xh_funi_header .xh-header-inner {
max-width: var(--xh-max-w);
margin: 0 auto;
}
.xh-logo { display: flex; align-items: baseline; gap: 0; flex-shrink: 0; margin-right: 16px; }
.xh-logo-x { font-family: var(--xh-font-display); font-size: 22px; color: var(--xh-orange); letter-spacing: .5px; }
.xh-logo-text { font-family: var(--xh-font-heading); font-size: 22px; font-weight: 700; letter-spacing: 2px; color: var(--xh-text); }
.xh-nav { display: flex; gap: 4px; flex: 1; align-items: center; color: var(--xh-text-secondary); }
.xh-nav a {
font-family: var(--xh-font-heading); font-size: 14px; font-weight: 600;
padding: 6px 12px; border-radius: var(--xh-radius);
color: var(--xh-text-secondary); transition: color var(--xh-transition), background var(--xh-transition);
letter-spacing: .3px; white-space: nowrap;
}
.xh-nav a:hover, .xh-nav a:focus-visible { color: var(--xh-text); background: var(--xh-overlay-4); }
.xh-nav a.is-active,
.xh-nav a[aria-current="page"] {
color: var(--xh-orange); background: var(--xh-orange-a12); font-weight: 700;
}
.xh-header-right { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-shrink: 0; }
.xh-lang {
font-family: var(--xh-font-body); font-size: 13px; font-weight: 600;
color: var(--xh-text-secondary); padding: 6px 10px; border-radius: var(--xh-radius);
display: flex; align-items: center; gap: 4px; transition: color var(--xh-transition);
min-height: 24px;
background: transparent !important; border: 0 !important; box-shadow: none !important;
-webkit-appearance: none !important; appearance: none !important; text-shadow: none !important;
cursor: pointer;
}
.xh-lang:hover { color: var(--xh-text); }
.xh-burger { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; }
.xh-lang--static { cursor: default; }
.xh-lang--static:hover { color: var(--xh-text-secondary); }
.xh-lang-wrap { position: relative; }
.xh-lang-dropdown__soon {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px;
font-family: var(--xh-font-heading);
font-size: 13px;
color: var(--xh-text-muted);
cursor: not-allowed;
opacity: .6;
}
.xh-lang-dropdown__soon .xh-lang-code { font-weight: 700; min-width: 28px; }
.xh-lang-soon-tag {
display: inline-block;
margin-left: 4px;
padding: 1px 6px;
font-size: 9px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
background: var(--xh-orange-text);
color: var(--xh-gold);
border-radius: 999px;
vertical-align: middle;
}
.xh-login-link { font-family: var(--xh-font-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; line-height: 1.6; color: var(--xh-text); padding: 9px 18px; border: 1px solid var(--xh-border-light); border-radius: var(--xh-radius); transition: color var(--xh-transition), background var(--xh-transition), border-color var(--xh-transition), box-shadow var(--xh-transition), transform var(--xh-transition); }
.xh-login-link:hover { border-color: var(--xh-text-secondary); background: var(--xh-overlay-3); }
.xh-btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--xh-font-heading); font-weight: 700; font-size: 15px;
padding: 10px 24px; border-radius: var(--xh-radius);
letter-spacing: .5px; text-transform: uppercase;
transition: color var(--xh-transition), background var(--xh-transition), border-color var(--xh-transition), box-shadow var(--xh-transition), transform var(--xh-transition); white-space: nowrap;
}
.xh-btn:focus-visible { outline: 2px solid var(--xh-orange); outline-offset: 2px; }
.xh-btn--header {
font-size: 13px; line-height: 1.1; padding: 9px 18px;
background: var(--xh-orange); color: var(--xh-orange-text); font-weight: 800; border: 1px solid var(--xh-orange);
box-shadow: 0 0 18px var(--xh-orange-glow);
display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.xh-btn--header svg { width: 12px; height: 12px; flex-shrink: 0; }
.xh-btn--header:hover { background: var(--xh-orange-hover); border-color: var(--xh-orange-hover); color: var(--xh-orange-text); box-shadow: 0 0 26px var(--xh-orange-a45); transform: translateY(-1px); }
.xh-btn svg { width: 14px; height: 14px; }
.xh-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; background: transparent; border: 0; cursor: pointer; }
.xh-burger span { display: block; width: 22px; height: 2px; background: var(--xh-text); border-radius: 1px; transition: color var(--xh-transition), background var(--xh-transition), border-color var(--xh-transition), box-shadow var(--xh-transition), transform var(--xh-transition); }
.xh-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.xh-burger.is-active span:nth-child(2) { opacity: 0; }
.xh-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.xh-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.xh-burger.is-open span:nth-child(2) { opacity: 0; }
.xh-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.xh-user { gap: 8px !important; min-width: 0; padding: 8px 14px !important; position: relative; }
.xh-user-notif {
position: absolute; top: 2px; left: 24px; min-width: 16px; height: 16px; line-height: 15px;
padding: 0 4px; font-size: 10px; font-weight: 700; color: var(--xh-white); background: #ff4d4d;
border-radius: 999px; text-align: center; border: 1px solid var(--xh-bg-header, var(--xh-bg-primary)); pointer-events: none;
}
.xh-user .xh-lang-icon { width: 18px; height: 18px; color: var(--xh-yellow, var(--xh-gold)); }
.xh-user-nick {
font-family: var(--xh-font-body);
font-weight: 700; color: var(--xh-yellow, var(--xh-gold));
white-space: nowrap;
font-size: 15px;
letter-spacing: .2px;
flex: 0 0 auto; min-width: 0;
max-width: clamp(36px, 20vw, 140px); overflow: hidden; text-overflow: ellipsis;
}
.xh-burger { flex-shrink: 0; }
@media (max-width: 480px) {
#xh_funi_header .xh-header-inner, .xh-header .xh-header-inner { gap: 8px; }
}
@media (min-width: 880px) {
.xh-user { padding: 9px 16px !important; gap: 10px !important; }
.xh-user .xh-lang-icon { width: 22px; height: 22px; }
.xh-user-nick { font-size: 17px; }
}
.xh-lang-dropdown {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 200;
background: var(--xh-bg-card); border: 1px solid var(--xh-border-light); border-radius: var(--xh-radius-md);
box-shadow: 0 12px 36px rgba(0,0,0,.55);
list-style: none; margin: 0; padding: 6px;
min-width: 372px; max-width: calc(100vw - 24px); max-height: min(70vh, 480px);
overflow-y: auto; overflow-x: hidden;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
}
.xh-lang-dropdown li { min-width: 0; }
.xh-lang-dropdown a { min-width: 0; }
.xh-lang-dropdown .xh-lang-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xh-lang-dropdown[hidden] { display: none; }
.xh-lang-dropdown li { margin: 0; }
.xh-lang-dropdown a {
display: flex; align-items: center; gap: 10px; padding: 7px 10px;
border-radius: 6px; color: var(--xh-text); font-family: var(--xh-font-body); text-decoration: none; font-size: 13px;
}
.xh-lang-dropdown a:hover { background: var(--xh-overlay-4); color: var(--xh-orange); }
.xh-lang-dropdown a[aria-current="page"],
.xh-lang-dropdown a[aria-current="true"],
.xh-lang-dropdown li.selected a,
.xh-lang-dropdown a.is-current {
background: var(--xh-orange-a12); color: var(--xh-orange); font-weight: 600;
}
.xh-lang-code { font-family: var(--xh-font-heading); font-weight: 700; min-width: 28px; color: var(--xh-text-muted); }
.xh-lang-dropdown a[aria-current="page"] .xh-lang-code,
.xh-lang-dropdown a[aria-current="true"] .xh-lang-code { color: var(--xh-orange); }
.xh-lang-name { color: inherit; }
.xh-mobile-lang-wrap { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--xh-border); }
.xh-mobile-lang-toggle {
display: flex; align-items: center; gap: 10px;
background: var(--xh-overlay-3); border: 1px solid var(--xh-border);
color: var(--xh-text); padding: 10px 14px; border-radius: var(--xh-radius-md);
cursor: pointer; font: inherit; width: 100%; justify-content: flex-start;
font-size: 14px;
}
.xh-mobile-lang-toggle:hover { background: rgba(255,255,255,.07); }
.xh-mobile-lang-toggle .xh-lang-icon,
.xh-mobile-lang-toggle svg { width: 18px !important; height: 18px !important; flex-shrink: 0; color: var(--xh-gold); }
.xh-lang-dropdown--mobile[hidden] { display: none; }
.xh-lang-dropdown--mobile:not([hidden]) {
position: static; box-shadow: none; margin-top: 8px;
min-width: 0; width: 100%;
display: flex; flex-direction: column; gap: 4px;
background: transparent; padding: 0; border: 0;
}
.xh-lang-dropdown--mobile li { list-style: none; }
.xh-lang-dropdown--mobile a {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px;
background: var(--xh-overlay-2); border: 1px solid var(--xh-border);
border-radius: var(--xh-radius-md);
color: var(--xh-text-secondary); text-decoration: none; font-size: 13px;
}
.xh-lang-dropdown--mobile a[aria-current="true"] {
background: rgba(255, 204, 0, .12); border-color: rgba(255, 204, 0, .4); color: var(--xh-gold);
}
.xh-lang-dropdown--mobile .xh-lang-flag { font-size: 20px; }
.xh-user-dropdown {
min-width: 260px;
grid-template-columns: 1fr !important;
}
.xh-user-dropdown__heading {
padding: 10px 14px 6px; font-size: 11px; font-weight: 700;
color: var(--xh-text-muted, var(--xh-text-dim)); text-transform: uppercase; letter-spacing: .1em;
}
.xh-user-dropdown a { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; }
.xh-user-dropdown .xh-ud-l { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.xh-ud-ico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--xh-text-muted, var(--xh-text-dim)); opacity: .85; }
.xh-user-dropdown .xh-uni-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xh-mobile-menu .xh-mm-row { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.xh-mobile-menu .xh-ud-ico { width: 18px; height: 18px; color: var(--xh-text-muted, var(--xh-text-dim)); opacity: .85; flex: 0 0 auto; }
.xh-mobile-universe-item .xh-mm-row .xh-ud-ico { width: 16px; height: 16px; }
.xh-user-dropdown .xh-uni-name { font-weight: 600; }
.xh-user-dropdown .xh-uni-ver { font-size: 11px; color: var(--xh-text-muted, var(--xh-text-dim)); font-family: var(--xh-font-mono, monospace); }
.xh-user-dropdown__sep { height: 1px; background: var(--xh-border); margin: 6px 8px; }
.xh-user-dropdown__logout { color: var(--xh-orange) !important; font-weight: 600; }
.xh-user-dropdown a.xh-uf-row { justify-content: flex-start !important; gap: 10px; }
.xh-user-dropdown a.xh-uf-link { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
.xh-uf-ava { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--xh-overlay-8); border: 1px solid var(--xh-border-light, var(--xh-border-light)); }
.xh-uf-ava--empty { display: inline-block; }
.xh-uf-nick { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xh-uf-unread { flex: 0 0 auto; min-width: 18px; height: 18px; line-height: 18px; text-align: center; padding: 0 5px; font-size: 11px; font-weight: 700; background: #ff4d4d; color: var(--xh-white); border-radius: 999px; }
.xh-user-dropdown__muted { padding: 8px 14px; font-size: 13px; color: var(--xh-text-muted, var(--xh-text-dim)); }
.xh-lang-flag {
display: inline-flex; align-items: center; justify-content: center;
font-size: 18px; line-height: 1;
width: 21px; min-width: 21px; height: 14px;
border-radius: 2px; overflow: hidden;
font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.xh-lang-flag svg { width: 100%; height: 100%; display: block; }
.xh-lang-dropdown__soon .xh-lang-flag { opacity: 0.55; }
.xh-caret { font-size: 9px; opacity: .7; }
.xh-lang-dropdown__search {
grid-column: 1 / -1;
padding: 0;
margin: 0 0 4px;
}
.xh-lang-search-input {
width: 100%;
background: var(--xh-overlay-3);
border: 1px solid var(--xh-border);
border-radius: 6px;
padding: 8px 10px;
color: var(--xh-text);
font-size: 13px;
font-family: inherit;
box-sizing: border-box;
outline: none;
transition: border-color .15s ease;
}
.xh-lang-search-input::placeholder { color: var(--xh-text-muted); }
.xh-lang-search-input:focus { border-color: var(--xh-orange); }
.xh-lang-dropdown li[data-xh-lang-hidden="true"] { display: none !important; }
@media (max-width: 1024px) {
.xh-nav { display: none; }
.xh-burger { display: flex; }
.xh-login-link { display: none; }
.xh-btn--header { display: none; }
.xh-header-right { gap: 8px; flex-shrink: 1; min-width: 0; }
.xh-user-wrap { min-width: 0; }
.xh-lang-wrap .xh-lang { padding: 11px 10px; font-size: 12px; min-height: 44px; box-sizing: border-box; }
.xh-lang-wrap .xh-lang-icon { width: 14px; height: 14px; }
}
@media (max-width: 768px) {
.xh-header-inner { gap: 12px; }
.xh-logo-x, .xh-logo-text { font-size: 20px; letter-spacing: 1.5px; }
.xh-header-inner {
padding-left: max(14px, env(safe-area-inset-left));
padding-right: max(14px, env(safe-area-inset-right));
}
}
@media (max-width: 640px) {
.xh-lang-dropdown {
grid-template-columns: 1fr;
position: fixed;
top: 62px; left: 8px; right: 8px;
min-width: 0; max-width: none; width: auto;
max-height: calc(100dvh - 72px);
padding-bottom: max(12px, env(safe-area-inset-bottom));
-webkit-overflow-scrolling: touch;
}
.xh-lang-dropdown a { padding: 10px 12px; font-size: 14px; }
.xh-lang-dropdown__search { padding: 0 0 6px; }
.xh-lang-search-input { font-size: 14px; padding: 10px 12px; }
}
@media (max-width: 380px) {
.xh-logo-x, .xh-logo-text { font-size: 18px; }
.xh-lang-dropdown { min-width: 220px; }
}
@media (max-width: 1024px) {
#xh_funi_header .xh-nav { display: none; }
#xh_funi_header .xh-login-link,
#xh_funi_header .xh-btn--header { display: none; }
#xh_funi_header .xh-user-wrap { display: block !important; }
#xh_funi_header .xh-user { padding: 8px 10px; min-height: 44px; }
#xh_funi_header .xh-burger { display: flex; }
}
.xh-mobile-menu {
-webkit-backdrop-filter: blur(12px);
display: none; position: fixed; top: var(--xh-header-h); left: 0; right: 0; bottom: 0;
background: rgba(6,10,20,.96); backdrop-filter: blur(12px);
z-index: 99; padding: 24px 32px; flex-direction: column; gap: 4px; overflow-y: auto;
padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
-webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.xh-mobile-menu.is-open { display: flex; }
.xh-mobile-menu a:not([class*="xh-btn"]) {
font-family: var(--xh-font-heading); font-size: 18px; font-weight: 600;
padding: 14px 0; color: var(--xh-text-secondary);
border-bottom: 1px solid var(--xh-border); transition: color var(--xh-transition);
}
.xh-mobile-menu a:not([class*="xh-btn"]):hover { color: var(--xh-text); }
.xh-mobile-menu .xh-btn { margin-top: 16px; justify-content: center; border: 0; }
.xh-mobile-menu .xh-btn--primary { background: var(--xh-orange); color: var(--xh-orange-text); border-bottom: 0; }
.xh-mobile-menu .xh-btn--primary:hover { background: var(--xh-orange-hover); }
.xh-mobile-menu__heading {
font-size: 11px; font-weight: 700; color: var(--xh-text-muted, var(--xh-text-dim));
text-transform: uppercase; letter-spacing: .1em;
padding: 16px 4px 8px; margin-top: 8px; border-top: 1px solid var(--xh-border);
}
.xh-mobile-universes {
margin: 16px 0 8px; padding: 14px 0;
border-top: 1px solid var(--xh-border);
}
.xh-mobile-universes__heading {
font-size: 11px; font-weight: 700; color: var(--xh-text-muted, var(--xh-text-dim));
text-transform: uppercase; letter-spacing: .1em; padding: 0 4px 8px;
}
.xh-mobile-universe-item {
display: flex !important; align-items: center; justify-content: space-between;
padding: 12px 14px !important; margin: 4px 0; border-bottom: 0 !important;
background: var(--xh-overlay-2); border: 1px solid var(--xh-border);
border-radius: 8px; transition: border-color var(--xh-transition), background var(--xh-transition);
font-size: 16px !important; font-weight: 600 !important;
}
.xh-mobile-universe-item:hover { border-color: rgba(232,132,30,.5); background: rgba(232,132,30,.06); }
.xh-mobile-universe-name { color: var(--xh-text); }
.xh-mobile-universe-ver { font-size: 11px; color: var(--xh-text-muted, var(--xh-text-dim)); font-weight: 500; font-family: var(--xh-font-mono, monospace); }
.xh-mobile-user {
margin: 8px 0 4px; padding: 14px 16px;
background: rgba(255,204,0,.08); border: 1px solid rgba(255,204,0,.25); border-radius: 10px;
display: flex; flex-direction: column; gap: 4px;
}
.xh-mobile-user-label { font-size: 12px; font-weight: 500; color: var(--xh-text-secondary); text-transform: uppercase; letter-spacing: .08em; }
.xh-mobile-user-name { font-family: var(--xh-font-heading); font-size: 20px; font-weight: 700; color: var(--xh-yellow, var(--xh-gold)); }
.xh-mobile-langs {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 4px 0 8px;
}
.xh-mobile-langs a {
display: flex !important; align-items: center; gap: 8px;
padding: 10px 12px !important; border-bottom: 0 !important;
background: var(--xh-overlay-2); border: 1px solid var(--xh-border);
border-radius: 8px; font-size: 14px !important; font-weight: 600 !important;
color: var(--xh-text-secondary) !important;
}
.xh-mobile-langs a:hover { color: var(--xh-orange) !important; border-color: rgba(232,132,30,.4); }
.xh-mobile-langs a.is-current,
.xh-mobile-langs a[aria-current="page"] {
color: var(--xh-orange) !important; border-color: rgba(232,132,30,.5); background: var(--xh-orange-a08);
}
.xh-mobile-menu .xh-lang-dropdown--mobile {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
position: static !important;
box-shadow: none; background: transparent; border: 0;
padding: 0; margin: 8px 0 8px; min-width: 0; max-width: none;
max-height: none !important;
overflow: visible !important;
}
.xh-mobile-menu .xh-lang-dropdown--mobile[hidden] { display: none !important; }
.xh-mobile-menu .xh-lang-dropdown--mobile li { display: block; }
.xh-mobile-menu .xh-lang-dropdown--mobile a {
background: var(--xh-overlay-2); border: 1px solid var(--xh-border);
color: var(--xh-text-secondary);
}
#xhf-mobile-menu .xh-mobile-lang-wrap { margin: 4px 0 8px; border-top: 1px solid var(--xh-border); padding-top: 8px; }
#xhf-mobile-menu .xh-mobile-lang-toggle {
display: flex; align-items: center; gap: 8px; width: 100%;
font-family: var(--xh-font-heading); font-size: 15px; font-weight: 600;
color: var(--xh-text-secondary); padding: 12px 0; background: none; border: 0; cursor: pointer;
}
#xhf-mobile-menu .xh-mobile-lang-toggle:hover { color: var(--xh-text); }
#xhf-mobile-menu .xh-mobile-lang-toggle .xh-lang-flag { display: inline-flex; }
#xhf-mobile-menu .xh-mobile-lang-toggle .xh-caret { margin-left: auto; font-size: 11px; transition: transform .2s; }
#xhf-mobile-menu .xh-mobile-lang-toggle[aria-expanded="true"] .xh-caret { transform: rotate(180deg); }
#xhf-mobile-menu { z-index: 1100; }
body.xhf-menu-open { overflow: hidden; }
@media (min-width: 1025px) {
#xhf-mobile-menu { display: none !important; }
}
.xh-footer {
--xh-bg-primary: #0a0f1c; --xh-bg-card: #0c1322;
position: relative; z-index: 1; border-top: 1px solid var(--xh-border); background: var(--xh-bg-primary);
padding: 32px 0 16px; padding-bottom: max(16px, env(safe-area-inset-bottom));
font-family: var(--xh-font-body); color: var(--xh-text-secondary);
}
.xh-footer * { box-sizing: border-box; }
.xh-footer .xh-footer-h,
.xh-footer .xh-footer-col h4 {
font-family: var(--xh-font-heading) !important;
font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--xh-text-muted); margin-bottom: 14px;
}
@media (max-width: 768px) {
.xh-footer .xh-footer-h,
.xh-footer .xh-footer-col h4 { font-size: 11px; margin-bottom: 10px; }
}
.xh-footer a { text-decoration: none; }
.xh-footer .xh-container {
max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad);
padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right));
}
.xh-footer-grid { display: grid; gap: 28px 32px; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr 1fr; align-items: start; }
.xh-footer-grid .xh-footer-col ul { list-style: none; padding: 0; margin: 0; }
.xh-footer-brand { flex: 0 0 200px; }
.xh-footer-brand .xh-logo { margin-bottom: 16px; display: flex; align-items: baseline; }
.xh-footer-brand .xh-logo-x { font-family: var(--xh-font-display); font-size: 22px; color: var(--xh-orange); letter-spacing: .5px; }
.xh-footer-brand .xh-logo-text { font-family: var(--xh-font-heading); font-size: 22px; font-weight: 700; letter-spacing: 2px; color: var(--xh-text); }
.xh-footer-socials { display: flex; gap: 12px; }
.xh-footer-col a.xh-footer-social,
.xh-footer-social {
width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--xh-bg-card);
border: 1px solid var(--xh-border); display: inline-flex; align-items: center; justify-content: center;
color: var(--xh-text-muted); transition: color var(--xh-transition), background var(--xh-transition), border-color var(--xh-transition); flex-shrink: 0;
}
.xh-footer-col a.xh-footer-social:hover,
.xh-footer-social:hover { border-color: var(--xh-text-secondary); color: var(--xh-text); }
.xh-footer-social svg { width: 18px; height: 18px; display: block; }
.xh-footer-col h3 { font-size: 13px; margin-bottom: 10px; color: var(--xh-text); }
.xh-footer-col a { display: block; font-size: 13px; color: var(--xh-text-secondary); padding: 6px 0; min-height: 24px; transition: color var(--xh-transition); text-wrap: pretty; line-height: 1.6; }
.xh-footer-col a:hover { color: var(--xh-text); }
.xh-footer-col li { line-height: 1.4; }
.xh-footer-desc { font-size: 13px; line-height: 1.5; margin: 8px 0 12px; }
.xh-footer-bottom { border-top: 1px solid var(--xh-border); padding-top: 14px; margin-top: 8px; text-align: center; font-size: 12px; color: var(--xh-text-muted); }
.xh-footer-copy { margin: 0; }
.xh-footer .xh-cookie-settings-link { background: none; border: 0; padding: 0; color: var(--xh-text-muted); text-decoration: underline; cursor: pointer; font-size: 12px; font-family: inherit; }
.xh-footer .xh-cookie-settings-link:hover { color: var(--xh-text); }
@media (max-width: 768px) {
.xh-footer { padding: 40px 0 24px; }
.xh-footer-brand { flex: none; }
.xh-footer-grid {
grid-template-columns: 1fr 1fr;
grid-template-areas: "brand brand" "game knowledge" "community popular" "docs docs";
gap: 32px 20px;
}
.xh-footer-brand { grid-area: brand; }
.xh-footer-grid > .xh-footer-col:nth-of-type(2) { grid-area: game; }
.xh-footer-grid > .xh-footer-col:nth-of-type(3) { grid-area: knowledge; }
.xh-footer-grid > .xh-footer-col:nth-of-type(4) { grid-area: community; }
.xh-footer-grid > .xh-footer-col:nth-of-type(5) { grid-area: popular; }
.xh-footer-grid > .xh-footer-col:nth-of-type(6) { grid-area: docs; padding-top: 20px; border-top: 1px solid var(--xh-border); }
.xh-footer-grid > .xh-footer-col:nth-of-type(6) ul { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.xh-footer-grid > .xh-footer-col:nth-of-type(6) ul li { margin: 0; }
.xh-footer-grid > .xh-footer-col:nth-of-type(6) a { padding: 2px 0; }
.xh-footer-col a { font-size: 13px; padding: 4px 0; }
}
:root{--xhh-bg:#060a14;--xhh-title:#ffffff;--xhh-desc:var(--xh-text-secondary);
--xh-bc-gap:28px;}
.xh-shero{position:relative;z-index:1;overflow:hidden;min-height:288px;padding:28px 0 48px;display:flex;align-items:flex-start;}
.xh-shero--split{align-items:center;}
.xh-shero, .xk-enc-hero, .xk-cat-hero, .xk-entity-hero, .xk-hero, .xg-hero, .xp-hero, .ach-hero,
.xs-hero, .al-hero, .ex-hero, .tn-hero {
padding-top: var(--xh-bc-gap, 28px) !important;
}
.xh-shero--bleed{width:100vw;margin-left:calc(50% - 50vw);}
.xh-shero-bg{position:absolute;inset:0;z-index:0;}
.xh-shero-bg picture,.xh-shero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;}
.xh-shero-bg::after{content:'';position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(6,10,20,.45) 0%,rgba(6,10,20,.86) 72%,var(--xhh-bg,#060a14) 100%);}
.xh-shero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 32px;width:100%;}
.xh-shero--bleed .xh-shero-inner{max-width:none;margin:0;padding:0 max(32px, calc(50vw - 576px));}
.xh-shero--split .xh-shero-inner{display:grid;grid-template-columns:1fr 400px;gap:48px;align-items:center;}
.xh-shero--split:not(:has(.xh-shero-aside)) .xh-shero-inner{grid-template-columns:1fr;}
.xh-shero-main{min-width:0;}
.xh-shero--split .xh-shero-main{max-width:600px;align-self:start;}
.xh-shero-inner .xh-breadcrumbs{margin:0 0 12px;padding:24px 0 0 var(--xh-bc-indent,30px);font-size:14px;line-height:1.6;}
.xh-shero-eyebrow{display:inline-block;font-family:var(--xh-font-heading,'Rajdhani'),sans-serif;font-size:12px;
font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--xh-orange,#f59a3e);margin-bottom:10px;}
.xh-shero-title{font-family:var(--xh-font-display,'Rajdhani'),sans-serif;font-size:clamp(30px,4vw,46px);
text-transform:uppercase;letter-spacing:1px;color:var(--xhh-title,#fff);line-height:1.1;margin:0 0 10px;}
.xh-shero-title em{font-style:normal;color:var(--xh-orange,#f59a3e);}
.xh-shero-subtitle{font-family:var(--xh-font-heading,'Rajdhani'),sans-serif;font-size:17px;font-weight:700;
color:var(--xh-text,#e8ecf2);letter-spacing:.3px;margin:0 0 8px;}
.xh-shero-subtitle em{font-style:normal;color:var(--xh-orange,#f59a3e);}
.xh-shero-desc{font-size:15.5px;color:var(--xhh-desc,#a4b3c8);max-width:720px;margin:0;line-height:1.6;}
.xh-shero-desc--gap{margin-bottom:26px;}
@media (max-width:980px){
.xh-shero--split .xh-shero-inner{grid-template-columns:1fr;gap:28px;}
.xh-shero--split .xh-shero-main{max-width:100%;}
}
@media (max-width:768px){
.xh-shero{min-height:auto;padding:32px 0 40px;}
.xh-shero-title{font-size:clamp(26px,7vw,38px);}
.xh-shero-inner{padding-left:16px;padding-right:16px;}
}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(/media/v2/fonts/archivo-black-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(/media/v2/fonts/archivo-black-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url(/media/v2/fonts/rajdhani-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url(/media/v2/fonts/rajdhani-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url(/media/v2/fonts/rajdhani-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url(/media/v2/fonts/rajdhani-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/media/v2/fonts/source-sans-3-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/media/v2/fonts/source-sans-3-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/media/v2/fonts/source-sans-3-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/media/v2/fonts/source-sans-3-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/media/v2/fonts/source-sans-3-600-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/media/v2/fonts/source-sans-3-600-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/media/v2/fonts/source-sans-3-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/media/v2/fonts/source-sans-3-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.xh-page,
.xh-header,
#xh_funi_header,
#ipboard_body {
--xh-bg-header: rgba(6, 10, 20, 0.82);
--xh-border: #162035;
--xh-border-light: #1e2d4a;
--xh-text: #e8ecf2;
--xh-text-secondary: #a4b3c8;
--xh-text-muted: #9aa6bd;
--xh-orange: #e88420;
--xh-orange-hover: #f59a3e;
--xh-orange-text: #1a0f00;
--xh-orange-glow: rgba(232, 132, 30, 0.25);
--xh-yellow: #c8a820;
--xh-white: #fff;
--xh-black: #000;
--xh-gold: #ffcc00;
--xh-gold-dark: #d8b13a;
--xh-text-dim: #8a99b0;
--xh-text-soft: #b3bccd;
--xh-purple-light: #9a6ff0;
--xh-red: #d05020;
--xh-error: #ff0000;
--xh-coral: #ff6b6b;
--xh-red-bg: #5a1a0a;
--xh-pink-soft: #ffc2c2;
--xh-blue-soft: #bcdcff;
--xh-blue-accent: #78aaff;
--xh-sky: #63b3ed;
--xh-blue-deep: #2a7de1;
--xh-mint: #78ffb4;
--xh-green-bright: #3ddb85;
--xh-peach: #ffd9b0;
--xh-cyan-soft: #a9e7ec;
--xh-amber: #f5c542;
--xh-gold-muted: #e6c558;
--xh-gold-soft: #f1c75e;
--xh-gold-bright: #ffd633;
--xh-violet: #a78bfa;
--xh-lavender: #d6c8ff;
--xh-red-bright: #d52b1e;
--xh-burnt: #c46c14;
--xh-mint-pale: #9fe8c2;
--xh-blue-royal: #0039a6;
overlay-*/
shadow-*/bg-dark-a*) не резолвились на всех страницах с home.css (KB: xk-*.css 200+ uses без fallback). */
--xh-orange-a08: rgba(232,132,30,.08);
--xh-orange-a12: rgba(232,132,30,.12);
--xh-orange-a18: rgba(232,132,30,.18);
--xh-orange-a30: rgba(232,132,30,.30);
--xh-orange-a45: rgba(232,132,30,.45);
--xh-overlay-1: rgba(255,255,255,.02);
--xh-overlay-2: rgba(255,255,255,.03);
--xh-overlay-3: rgba(255,255,255,.04);
--xh-overlay-4: rgba(255,255,255,.05);
--xh-overlay-6: rgba(255,255,255,.06);
--xh-overlay-8: rgba(255,255,255,.08);
--xh-shadow-soft: rgba(0,0,0,.3);
--xh-shadow-strong: rgba(0,0,0,.5);
--xh-bg-dark-a50: rgba(6,10,20,.5);
--xh-bg-dark-a82: rgba(6,10,20,.82);
--xh-font-display: 'Archivo Black', sans-serif;
--xh-font-heading: 'Rajdhani', sans-serif;
--xh-font-body: 'Source Sans 3', sans-serif;
--xh-font-mono: 'JetBrains Mono', monospace;
--xh-fs-xxs: 11px;
--xh-fs-xs:  12px;
--xh-fs-sm:  13px;
--xh-fs-base:16px;
--xh-fs-md:  17px;
--xh-fs-lg:  18px;
--xh-fs-xl:  22px;
--xh-fs-2xl: clamp(24px, 3vw, 32px);
--xh-fs-hero:clamp(32px, 3.6vw, 44px);
--xh-lh-tight: 1.3;
--xh-lh-base: 1.55;
--xh-lh-relaxed: 1.65;
--xh-radius: 6px;
--xh-radius-md: 8px;
--xh-radius-lg: 12px;
--xh-bg-primary: #0a0f1c;
--xh-bg-card: #0c1322;
--xh-bg-card-hover: #131c30;
--xh-blue-light: #4a9df5;
--xh-green: #20a868;
--xh-teal: #20b0b8;
--xh-purple: #6a40b8;
--xh-purple-text: #a98ce0;
--xh-woa-red: #d9622e;
--xh-max-w: 1200px;
--xh-container-pad: 32px;
--xh-header-h: 58px;
--xh-transition: .3s ease;
}
.xh-page a.xh-skip-link:focus { color: var(--xh-orange-text); }
html { scroll-padding-top: 64px; }