.games-page { min-height:100vh; overflow-x:hidden; color:#fff; background:#020617; }
.games-page .wrap { width:min(1220px,calc(100% - 64px)); }
.games-header { position:sticky; top:0; z-index:20; border:0; border-bottom:1px solid rgba(255,255,255,.14); background:rgba(2,6,23,.86); backdrop-filter:blur(20px); }
.games-header .nav { min-height:74px; }
.games-header .brand { color:#fff; font-size:1.04rem; letter-spacing:-.02em; }
.games-header .brand span,.games-footer .brand span { color:#e879f9; }
.games-header .nav-links { gap:28px; color:rgba(255,255,255,.78); }
.games-header .nav-links a:hover,.games-footer a:hover { color:#e9d5ff; }
.games-header .nav-links a[aria-current="page"] { color:#fff; }
.games-header .nav-links a.games-nav-cta { display:inline-flex; align-items:center; gap:12px; padding:10px 16px; border:1px solid rgba(255,255,255,.22); border-radius:16px; color:#fff; background:rgba(255,255,255,.08); }
.games-content { position:relative; }
.games-page .breadcrumbs { display:flex; align-items:center; gap:11px; padding:19px 0; color:rgba(255,255,255,.62); font-size:.82rem; }
.games-page .breadcrumbs a { color:rgba(255,255,255,.82); }.games-page .breadcrumbs a:hover { color:#e9d5ff; }
.games-hero { position:relative; isolation:isolate; overflow:hidden; min-height:370px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); align-items:center; margin:4px 0 70px; padding:42px 58px; border:1px solid rgba(255,255,255,.2); border-radius:32px; background:radial-gradient(ellipse at 76% 35%,rgba(139,92,246,.3),transparent 42%),linear-gradient(118deg,#0c0b25 8%,#171039 55%,#260d39 100%); box-shadow:0 26px 80px rgba(76,29,149,.2); }
.games-hero__content { position:relative; z-index:2; max-width:610px; }
.games-hero .eyebrow { display:flex; align-items:center; gap:10px; color:#e9d5ff; font-size:.72rem; letter-spacing:.14em; }
.games-hero__spark { width:22px; height:2px; border-radius:2px; background:linear-gradient(90deg,#8b5cf6,#e879f9); }
.games-hero h1 { margin:18px 0 14px; color:#fff; font-size:clamp(2.8rem,6vw,5rem); font-weight:760; letter-spacing:-.06em; line-height:1.06; }
.games-hero h1 span { color:#f0abfc; background:linear-gradient(90deg,#c4b5fd,#f0abfc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.games-hero__description { max-width:560px; margin:0; color:rgba(255,255,255,.82); font-size:1rem; line-height:1.9; }
.games-hero__button { min-height:48px; display:inline-flex; align-items:center; gap:15px; margin-top:23px; padding:11px 19px; border:1px solid rgba(255,255,255,.16); border-radius:16px; color:#fff; background:linear-gradient(100deg,#7c3aed,#c026d3,#7c3aed); background-size:200% auto; box-shadow:0 12px 36px rgba(139,92,246,.28); font-weight:650; transition:all .3s ease; }
.games-hero__button:hover { background-position:right center; box-shadow:0 18px 48px rgba(217,70,239,.4); transform:translateY(-2px); }
.games-hero__art { position:relative; min-height:275px; display:grid; place-items:center; isolation:isolate; }
.games-hero__art-orb { position:absolute; z-index:-2; width:240px; aspect-ratio:1; border-radius:50%; background:linear-gradient(135deg,#8b5cf6,#d946ef 55%,#22d3ee); filter:blur(3rem); opacity:.3; }
.games-hero__art-ring { position:absolute; z-index:-1; width:360px; height:220px; border:1px solid rgba(216,180,254,.25); border-radius:50%; transform:rotate(-28deg); }
.games-hero__art-ring--two { width:310px; height:260px; border-color:rgba(103,232,249,.18); transform:rotate(38deg); }
.games-hero__art-label { width:220px; aspect-ratio:1; display:flex; flex-direction:column; justify-content:center; gap:12px; padding:30px; border:1px solid rgba(255,255,255,.24); border-radius:32px; background:rgba(255,255,255,.1); backdrop-filter:blur(22px); box-shadow:0 25px 70px rgba(139,92,246,.25),inset 0 1px rgba(255,255,255,.12); transform:rotate(4deg); }
.games-hero__art-label span,.games-hero__art-label i { color:rgba(255,255,255,.72); font-size:.61rem; font-style:normal; letter-spacing:.16em; }
.games-hero__art-label strong { color:#fff; font-size:1.65rem; line-height:1.05; letter-spacing:-.04em; }
.games-hero__art-label i { color:#f0abfc; }
.games-hero__art-chip { position:absolute; right:-2%; bottom:8%; padding:12px 15px; border:1px solid rgba(255,255,255,.2); border-radius:15px; color:rgba(255,255,255,.9); background:rgba(255,255,255,.1); backdrop-filter:blur(18px); font-size:.72rem; }
.games-hero__art-chip b { margin-left:12px; color:#f0abfc; }
.games-hero__glow { position:absolute; z-index:-1; width:260px; height:260px; border-radius:50%; filter:blur(3rem); opacity:.3; pointer-events:none; }
.games-hero__glow--a { top:-130px; left:-75px; background:#7c3aed; }.games-hero__glow--b { right:-100px; bottom:-170px; background:#d946ef; }
.games-catalog-section { padding:0 0 72px; }
.games-section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }
.games-section-heading__eyebrow { margin:0 0 6px; color:#d8b4fe; font-size:.77rem; font-weight:650; letter-spacing:.08em; }
.games-section-heading h2 { margin:0; color:#fff; font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:730; letter-spacing:-.045em; line-height:1.25; }
.games-section-heading__hint { margin:0 0 4px; color:rgba(255,255,255,.72); font-size:.9rem; }
.games-search { position:relative; width:100%; max-width:none; margin:0 0 24px; }
.games-search > span:first-child { left:18px; color:rgba(255,255,255,.82); font-size:.86rem; }
.games-search input { width:100%; height:58px; padding:10px 54px 10px 134px; border:1px solid rgba(255,255,255,.2); border-radius:17px; color:#fff; background:rgba(255,255,255,.1); backdrop-filter:blur(20px); font:inherit; font-size:.94rem; transition:border-color .25s ease,box-shadow .25s ease; }
.games-search input::placeholder { color:rgba(255,255,255,.52); }
.games-search input:focus { outline:2px solid rgba(139,92,246,.42); outline-offset:2px; border-color:rgba(196,181,253,.75); box-shadow:0 0 0 5px rgba(139,92,246,.12); }
.games-search__icon { position:absolute; top:50%; right:19px; left:auto!important; transform:translateY(-54%); color:#e9d5ff!important; font-size:1.65rem!important; line-height:1; }
.games-grid { width:100%; max-width:none; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:minmax(150px,auto); gap:15px; }
.games-grid .catalog-card { position:relative; min-width:0; min-height:150px; overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:24px; background:rgba(255,255,255,.1); backdrop-filter:blur(18px); box-shadow:0 14px 42px rgba(76,29,149,.13); transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease; }
.games-grid .catalog-card:hover { z-index:1; transform:translateY(-4px); border-color:rgba(216,180,254,.72); box-shadow:0 22px 52px rgba(139,92,246,.3); color:#fff; }
.games-grid .catalog-card img { position:absolute; inset:0; display:block; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; transition:transform .5s ease; }
.games-grid .catalog-card:hover img { transform:scale(1.045); }
.games-grid .catalog-card::before { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(0deg,rgba(2,6,23,.94),rgba(2,6,23,.02) 78%); pointer-events:none; }
.games-grid .catalog-card h3 { position:absolute; z-index:2; right:18px; bottom:17px; left:18px; margin:0; padding:0 34px 0 0; color:#fff; font-size:1.02rem; font-weight:680; line-height:1.35; }
.games-grid .catalog-card h3::after { content:"↗"; position:absolute; right:0; bottom:-2px; display:grid; place-items:center; width:31px; height:31px; margin:0; border:1px solid rgba(255,255,255,.28); border-radius:11px; color:#fff; background:rgba(255,255,255,.12); font-size:.9rem; transition:background .25s ease,border-color .25s ease; }
.games-grid .catalog-card:hover h3::after { border-color:rgba(216,180,254,.65); background:rgba(139,92,246,.55); }
.games-grid .catalog-card[href="/eft/"] { grid-column:span 7; grid-row:span 2; min-height:315px; }
.games-grid .catalog-card[href="/lol-script/"] { grid-column:span 5; grid-row:span 2; min-height:315px; }
.games-grid .catalog-card[href="/eft/"] h3,.games-grid .catalog-card[href="/lol-script/"] h3 { right:24px; bottom:23px; left:24px; font-size:1.5rem; }
.games-grid .catalog-card[href="/eft/"]::before,.games-grid .catalog-card[href="/lol-script/"]::before { background:linear-gradient(0deg,rgba(2,6,23,.96),rgba(2,6,23,.02) 75%),linear-gradient(110deg,rgba(124,58,237,.22),transparent 70%); }
.games-grid .catalog-card[href="/wardogs/"],.games-grid .catalog-card[href="/aion-2/"],.games-grid .catalog-card[href="/apex/"] { grid-column:span 4; }
.games-grid .catalog-card[href="/arc-raiders/"],.games-grid .catalog-card[href="/valorant/"],.games-grid .catalog-card[href="/rust/"],.games-grid .catalog-card[href="/cod-bo7/"],.games-grid .catalog-card[href="/dark-and-darker/"],.games-grid .catalog-card[href="/palworld/"],.games-grid .catalog-card[href="/overwatch/"],.games-grid .catalog-card[href="/dead-by-daylight/"] { grid-column:span 3; }
.games-grid .catalog-card[hidden] { display:none!important; }
.games-no-results { margin:0; padding:24px; border:1px solid rgba(255,255,255,.2); border-radius:20px; color:rgba(255,255,255,.82); background:rgba(255,255,255,.08); text-align:center; }
.games-guide { display:flex; align-items:center; gap:16px; margin:0 0 76px; padding:20px 22px; border:1px solid rgba(255,255,255,.2); border-radius:22px; background:linear-gradient(105deg,rgba(139,92,246,.2),rgba(255,255,255,.06)); }
.games-guide__icon { flex:none; display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(255,255,255,.22); border-radius:14px; color:#f0abfc; background:rgba(255,255,255,.1); }
.games-guide p { flex:1; margin:0; color:rgba(255,255,255,.85); font-size:.9rem; }.games-guide a { flex:none; color:#e9d5ff; font-size:.88rem; font-weight:650; }.games-guide a span { padding-left:8px; color:#f0abfc; }
.games-footer { margin-top:0; padding:30px 0 82px; border-top:1px solid rgba(255,255,255,.13); background:#020617; }
.games-footer__inner { display:flex; justify-content:space-between; align-items:center; gap:20px; }.games-footer .brand { color:#fff; }.games-footer__inner>a:last-child { color:rgba(255,255,255,.7); font-size:.88rem; }
.games-page .bottom-nav { border-top:1px solid rgba(255,255,255,.2); background:rgba(2,6,23,.94); backdrop-filter:blur(18px); }
.games-page .menu { color:#fff; }.games-page :focus-visible { outline:2px solid #c4b5fd; outline-offset:4px; }
@media(max-width:900px) {
  .games-hero { grid-template-columns:minmax(0,1fr) minmax(230px,.72fr); gap:12px; padding:38px; }.games-hero__art-ring { width:300px; }
  .games-grid { grid-auto-rows:minmax(135px,auto); gap:12px; }.games-grid .catalog-card[href="/eft/"] { min-height:282px; }.games-grid .catalog-card[href="/lol-script/"] { min-height:282px; }
}
@media(max-width:760px) {
  .games-page .wrap { width:min(1220px,calc(100% - 36px)); }.games-header .nav { min-height:64px; }
  .games-header .nav-links { top:64px; gap:3px; border:1px solid rgba(255,255,255,.2); border-radius:0 0 20px 20px; background:rgba(2,6,23,.97); backdrop-filter:blur(20px); }
  .games-header .nav-links a { padding:10px 8px; }.games-header .nav-links a.games-nav-cta { justify-content:center; margin-top:4px; }
  .games-hero { min-height:330px; grid-template-columns:1fr; margin-top:0; margin-bottom:54px; padding:38px 30px; }
  .games-hero__content { max-width:560px; }.games-hero h1 { font-size:clamp(2.6rem,8vw,4rem); }
  .games-hero__art { position:absolute; top:5px; right:-100px; width:330px; min-height:320px; opacity:.28; pointer-events:none; }
  .games-hero__art-chip { display:none; }.games-hero__description { max-width:470px; font-size:.95rem; }
  .games-section-heading { align-items:flex-start; flex-direction:column; gap:7px; }.games-section-heading__hint { font-size:.84rem; }
  .games-grid { grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:minmax(125px,auto); gap:10px; }
  .games-grid .catalog-card[href="/eft/"] { grid-column:span 6; grid-row:span 2; min-height:270px; }.games-grid .catalog-card[href="/lol-script/"] { grid-column:span 3; grid-row:span 2; min-height:250px; }
  .games-grid .catalog-card[href="/wardogs/"],.games-grid .catalog-card[href="/aion-2/"],.games-grid .catalog-card[href="/apex/"] { grid-column:span 3; }
  .games-grid .catalog-card[href="/arc-raiders/"],.games-grid .catalog-card[href="/valorant/"],.games-grid .catalog-card[href="/rust/"],.games-grid .catalog-card[href="/cod-bo7/"],.games-grid .catalog-card[href="/dark-and-darker/"],.games-grid .catalog-card[href="/palworld/"],.games-grid .catalog-card[href="/overwatch/"],.games-grid .catalog-card[href="/dead-by-daylight/"] { grid-column:span 3; }
  .games-grid .catalog-card { min-height:145px; border-radius:20px; }.games-grid .catalog-card h3 { right:13px; bottom:13px; left:13px; font-size:.91rem; }
  .games-grid .catalog-card[href="/eft/"] h3,.games-grid .catalog-card[href="/lol-script/"] h3 { right:16px; bottom:17px; left:16px; font-size:1.2rem; }
  .games-guide { align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:58px; padding:17px; }.games-guide p { flex-basis:calc(100% - 54px); }.games-guide a { margin-left:52px; }
}
@media(max-width:480px) {
  .games-page .wrap { width:calc(100% - 30px); }.games-page .breadcrumbs { padding:14px 0; }
  .games-hero { min-height:310px; margin-bottom:42px; padding:30px 22px; border-radius:25px; }.games-hero h1 { font-size:clamp(2.45rem,10vw,3.2rem); }.games-hero__description { font-size:.9rem; }
  .games-hero__art { right:-150px; opacity:.24; }.games-catalog-section { padding-bottom:52px; }
  .games-search input { height:54px; padding-left:118px; font-size:.88rem; }.games-grid { grid-auto-rows:minmax(116px,auto); gap:9px; }
  .games-grid .catalog-card[href="/eft/"] { min-height:230px; }.games-grid .catalog-card[href="/lol-script/"] { min-height:210px; }
  .games-grid .catalog-card { min-height:125px; border-radius:17px; }.games-grid .catalog-card h3 { right:10px; bottom:11px; left:10px; padding-right:28px; font-size:.8rem; }.games-grid .catalog-card h3::after { width:25px; height:25px; border-radius:9px; font-size:.78rem; }
  .games-grid .catalog-card[href="/eft/"] h3,.games-grid .catalog-card[href="/lol-script/"] h3 { font-size:1.08rem; }
  .games-guide { margin-bottom:48px; }.games-guide p { font-size:.84rem; }.games-footer__inner { align-items:flex-start; flex-direction:column; gap:12px; }
}
@media(prefers-reduced-motion:reduce) { .games-page *, .games-page *::before, .games-page *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
