:root{ --games-bg:#f5f7fb; --games-surface:#ffffff; --games-surface-2:#f8fafc; --games-text:#111827; --games-muted:#667085; --games-border:#e6ebf2; --games-shadow:0 6px 22px rgba(16,24,40,.08); --games-shadow-hover:0 12px 30px rgba(16,24,40,.12); --games-accent:#2563eb; --games-accent-2:#1d4ed8; --games-radius:20px; --games-radius-sm:14px; --games-max:1280px; } *, *::before, *::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body.games-body{ margin:0; color:var(--games-text); background: radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 28%), radial-gradient(circle at top right, rgba(124,58,237,.08), transparent 28%), linear-gradient(180deg,#f7f9fc 0%, #eef3f9 100%); font-family:Inter, "Segoe UI", Arial, sans-serif; } body.games-body--player{ background: radial-gradient(circle at top left, rgba(37,99,235,.06), transparent 30%), linear-gradient(180deg,#f7f9fc 0%, #eef2f7 100%); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .games-loader{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(247,249,252,.92); backdrop-filter:blur(4px); transition:opacity .24s ease, visibility .24s ease; } .games-loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; } .games-loader__inner{ min-width:180px; text-align:center; padding:20px 24px; border:1px solid rgba(255,255,255,.8); border-radius:22px; background:rgba(255,255,255,.85); box-shadow:var(--games-shadow); } .games-loader__spinner{ width:42px; height:42px; margin:0 auto 12px; border-radius:50%; border:3px solid #dbe6ff; border-top-color:var(--games-accent); animation:spin .8s linear infinite; } .games-loader__text{ font-size:14px; font-weight:700; color:#334155; } @keyframes spin{ to{ transform:rotate(360deg); } } .games-page{ width:min(100% - 24px, var(--games-max)); margin:0 auto; padding:24px 0 40px; } .games-hero{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:22px; align-items:stretch; margin:12px 0 22px; } .games-hero__content, .games-hero__visual{ position:relative; overflow:hidden; border:1px solid var(--games-border); border-radius:28px; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88)); box-shadow:var(--games-shadow); } .games-hero__content{ padding:34px; } .games-hero__badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:12px; font-weight:800; letter-spacing:.08em; } .games-hero__title{ margin:16px 0 10px; font-size:clamp(28px, 4vw, 48px); line-height:1.04; letter-spacing:-.03em; } .games-hero__text{ max-width:700px; margin:0; color:var(--games-muted); font-size:16px; line-height:1.65; } .games-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; } .games-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border-radius:14px; text-decoration:none; font-weight:800; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; } .games-btn:hover{ transform:translateY(-1px); } .games-btn--primary{ background:linear-gradient(135deg, var(--games-accent), var(--games-accent-2)); color:#fff; box-shadow:0 10px 20px rgba(37,99,235,.22); } .games-btn--ghost{ background:#fff; border:1px solid var(--games-border); color:var(--games-text); } .games-hero__visual{ min-height:280px; padding:26px; background: radial-gradient(circle at 10% 10%, rgba(37,99,235,.16), transparent 30%), radial-gradient(circle at 90% 20%, rgba(139,92,246,.14), transparent 28%), linear-gradient(160deg, #ffffff 0%, #f5f8ff 100%); } .hero-orb{ position:absolute; border-radius:50%; filter:blur(2px); } .hero-orb--1{ width:120px; height:120px; top:18px; right:22px; background:rgba(37,99,235,.18); } .hero-orb--2{ width:86px; height:86px; bottom:32px; left:30px; background:rgba(124,58,237,.15); } .hero-orb--3{ width:58px; height:58px; top:92px; left:22%; background:rgba(16,185,129,.15); } .hero-cards{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; height:100%; } .hero-mini-card{ display:flex; align-items:center; justify-content:center; min-height:100px; border:1px solid rgba(255,255,255,.8); border-radius:20px; background:rgba(255,255,255,.72); box-shadow:0 8px 20px rgba(15,23,42,.06); font-size:18px; font-weight:800; color:#1f2937; backdrop-filter:blur(8px); } .games-toolbar{ position:sticky; top:0; z-index:20; display:grid; grid-template-columns:minmax(220px, 320px) 1fr; gap:14px; align-items:center; margin:0 0 22px; padding:14px; border:1px solid rgba(230,235,242,.9); border-radius:22px; background:rgba(255,255,255,.82); backdrop-filter:blur(10px); box-shadow:0 4px 20px rgba(15,23,42,.05); } .games-search{ width:100%; height:48px; padding:0 16px; border:1px solid var(--games-border); border-radius:14px; outline:none; background:#fff; color:var(--games-text); font-size:15px; } .games-search:focus{ border-color:#bfdbfe; box-shadow:0 0 0 4px rgba(59,130,246,.12); } .games-toolbar__filters{ display:flex; flex-wrap:wrap; gap:10px; } .games-chip{ height:42px; padding:0 14px; border:1px solid var(--games-border); border-radius:999px; background:#fff; color:#334155; cursor:pointer; font-weight:700; transition:all .18s ease; } .games-chip:hover{ transform:translateY(-1px); border-color:#cfd8e6; } .games-chip.is-active{ border-color:transparent; background:linear-gradient(135deg, var(--games-accent), var(--games-accent-2)); color:#fff; box-shadow:0 8px 18px rgba(37,99,235,.2); } .games-section{ margin-top:18px; } .games-section__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; } .games-section__title{ margin:0; font-size:24px; line-height:1.2; letter-spacing:-.02em; } .games-section__meta{ color:var(--games-muted); font-size:14px; font-weight:700; } .games-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; } .game-card{ display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid var(--games-border); border-radius:24px; background:rgba(255,255,255,.94); box-shadow:var(--games-shadow); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .game-card:hover{ transform:translateY(-4px); box-shadow:var(--games-shadow-hover); border-color:#dbe4f0; } .game-card.is-hidden{ display:none; } .game-card__thumb{ position:relative; aspect-ratio:16 / 10; overflow:hidden; } .game-card__pill{ position:absolute; left:12px; top:12px; z-index:1; display:inline-flex; align-items:center; min-height:30px; padding:0 10px; border-radius:999px; background:rgba(255,255,255,.9); color:#1f2937; font-size:12px; font-weight:800; box-shadow:0 3px 10px rgba(0,0,0,.08); } .game-card__body{ display:flex; flex:1; flex-direction:column; padding:16px; } .game-card__title{ margin:0 0 8px; font-size:20px; line-height:1.2; letter-spacing:-.02em; } .game-card__desc{ margin:0 0 12px; color:var(--games-muted); font-size:14px; line-height:1.6; } .game-card__meta{ margin-top:auto; color:#475467; font-size:13px; font-weight:700; } .game-card__actions{ margin-top:14px; } .game-link{ display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 16px; border-radius:12px; background:#0f172a; color:#fff; text-decoration:none; font-weight:800; transition:transform .18s ease, opacity .18s ease; } .game-link:hover{ transform:translateY(-1px); opacity:.95; } .game-bg{ background-size:cover; background-position:center; } .game-bg--1{ background:linear-gradient(135deg,#dbeafe,#bfdbfe 40%,#93c5fd); } .game-bg--2{ background:linear-gradient(135deg,#fef3c7,#fde68a 45%,#f59e0b); } .game-bg--3{ background:linear-gradient(135deg,#dcfce7,#86efac 45%,#16a34a); } .game-bg--4{ background:linear-gradient(135deg,#ede9fe,#c4b5fd 45%,#7c3aed); } .game-bg--5{ background:linear-gradient(135deg,#fee2e2,#fecaca 45%,#ef4444); } .game-bg--6{ background:linear-gradient(135deg,#cffafe,#67e8f9 45%,#06b6d4); } .game-bg--7{ background:linear-gradient(135deg,#e0f2fe,#7dd3fc 45%,#0284c7); } .game-bg--8{ background:linear-gradient(135deg,#fae8ff,#e9d5ff 45%,#a855f7); } .game-bg--9{ background:linear-gradient(135deg,#fce7f3,#f9a8d4 45%,#ec4899); } .game-bg--10{ background:linear-gradient(135deg,#ecfccb,#bef264 45%,#65a30d); } .game-bg--11{ background:linear-gradient(135deg,#f3e8ff,#d8b4fe 45%,#8b5cf6); } .game-bg--12{ background:linear-gradient(135deg,#e0e7ff,#a5b4fc 45%,#4f46e5); } .games-empty{ margin-top:18px; padding:22px; border:1px dashed #cfd8e6; border-radius:18px; background:rgba(255,255,255,.7); text-align:center; color:#475467; font-weight:700; } /* PLAYER VIEW */ .games-player-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:12px 0 16px; padding:20px; border:1px solid var(--games-border); border-radius:24px; background:rgba(255,255,255,.94); box-shadow:var(--games-shadow); } .games-player-top__left{ min-width:0; } .games-back-link{ display:inline-flex; align-items:center; gap:8px; margin-bottom:10px; color:#2563eb; text-decoration:none; font-weight:800; } .games-back-link:hover{ text-decoration:underline; } .games-player-title{ margin:0 0 8px; font-size:clamp(24px, 3vw, 34px); line-height:1.1; letter-spacing:-.03em; } .games-player-subtitle{ margin:0; color:var(--games-muted); font-size:14px; line-height:1.6; } .games-player-shell{ margin-bottom:24px; } .games-player-frame{ overflow:hidden; border:1px solid var(--games-border); border-radius:28px; background:#fff; box-shadow:var(--games-shadow); padding:16px; min-height:540px; } /* sanitize embedded game layout */ .games-player-frame > *:first-child{ margin-top:0 !important; } .games-player-frame img, .games-player-frame canvas, .games-player-frame iframe, .games-player-frame video{ max-width:100%; height:auto; } .games-player-frame table{ max-width:100%; } .reveal-item{ opacity:0; transform:translateY(16px); transition:opacity .45s ease, transform .45s ease; } .reveal-item.is-visible{ opacity:1; transform:none; } @media (max-width: 1180px){ .games-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } } @media (max-width: 920px){ .games-page{ width:min(100% - 16px, var(--games-max)); padding:16px 0 32px; } .games-hero{ grid-template-columns:1fr; gap:16px; } .games-hero__content{ padding:24px 18px; } .games-hero__visual{ min-height:220px; padding:18px; } .games-toolbar{ grid-template-columns:1fr; gap:12px; padding:12px; border-radius:18px; } .games-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; } .game-card__title{ font-size:18px; } .games-player-top{ flex-direction:column; align-items:stretch; } .games-player-frame{ min-height:420px; padding:12px; } } @media (max-width: 640px){ .games-page{ width:min(100% - 12px, var(--games-max)); } .games-hero__title{ font-size:30px; } .games-hero__text{ font-size:15px; } .hero-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; } .hero-mini-card{ min-height:78px; font-size:15px; border-radius:16px; } .games-toolbar{ position:relative; top:auto; } .games-toolbar__filters{ flex-wrap:nowrap; overflow:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; } .games-toolbar__filters::-webkit-scrollbar{ display:none; } .games-chip{ flex:0 0 auto; } .games-grid{ grid-template-columns:1fr; gap:12px; } .game-card{ border-radius:20px; } .game-card__thumb{ aspect-ratio:16 / 9; } .game-card__body{ padding:14px; } .games-section__head{ align-items:flex-start; flex-direction:column; gap:4px; } .games-player-top{ padding:16px; border-radius:18px; } .games-player-frame{ padding:10px; border-radius:18px; min-height:320px; } } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ animation:none !important; transition:none !important; } }