/* =========================================================
   Arcadia Gaming Platform
   Responsive dark browser-game UI
   ========================================================= */

:root {
  --bg: #0f1115;
  --surface: #191d25;
  --text: #f7f8fb;
  --muted: #9ca5b4;
  --muted-2: #6f7886;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --accent: #8b5cf6;
  --accent-2: #ff7a45;
  --danger: #ff5470;
  --header-h: 72px;
  --sidebar-w: 244px;
  --sidebar-mini-w: 82px;
  --content-max: 1680px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  --ease: 180ms ease;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scrollbar-color: #343a47 #111318;
  scrollbar-width: thin;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 85% 0%, rgba(139, 92, 246, 0.09), transparent 27%),
    radial-gradient(circle at 20% 35%, rgba(255, 122, 69, 0.05), transparent 25%),
    var(--bg);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

body.drawer-open {
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  color: white;
  background: var(--accent);
}

:focus-visible {
  outline: 3px solid rgba(139, 92, 246, 0.55);
  outline-offset: 2px;
}

.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;
}

.icon {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.app-header {
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto 0;
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  background: rgba(15, 17, 21, 0.86);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.header-inner {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(260px, 720px) minmax(230px, 1fr);
  align-items: center;
  gap: 22px;
  height: 100%;
  max-width: 1920px;
  padding: 0 24px;
  margin: 0 auto;
}

.brand-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.desktop-sidebar-toggle,
.mobile-menu-btn,
.icon-btn {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: #dce1eb;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}

.desktop-sidebar-toggle:hover,
.mobile-menu-btn:hover,
.icon-btn:hover {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.mobile-menu-btn {
  display: none;
}

.logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.logo-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--accent), #6e3fea 55%, var(--accent-2));
  box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
}

.logo-mark::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border: 4px solid rgba(255, 255, 255, 0.92);
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-22deg);
}

.logo-dot {
  position: absolute;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

.logo-text {
  overflow: hidden;
  font-size: 1.25rem;
  text-overflow: ellipsis;
}

.logo-text span {
  color: #a98cff;
}

.search-shell {
  position: relative;
  width: min(100%, 720px);
  justify-self: center;
}

.search-input {
  width: 100%;
  height: 46px;
  padding: 0 92px 0 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  outline: none;
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}

.search-input::placeholder {
  color: #7e8794;
}

.search-input:focus {
  border-color: rgba(139, 92, 246, 0.7);
  background: #191c23;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12);
}

.search-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  color: var(--muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.search-shortcut {
  position: absolute;
  top: 50%;
  right: 12px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.72rem;
  transform: translateY(-50%);
}

.clear-search {
  position: absolute;
  top: 50%;
  right: 12px;
  display: none;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transform: translateY(-50%);
}

.search-shell.has-value .search-shortcut {
  display: none;
}

.search-shell.has-value .clear-search {
  display: grid;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  gap: 10px;
}

.notification-btn {
  position: relative;
}

.notification-dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 8px;
  height: 8px;
  border: 2px solid #171a20;
  border-radius: 50%;
  background: var(--danger);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-ghost {
  border-color: var(--border);
  color: #e4e8ef;
  background: rgba(255, 255, 255, 0.035);
}

.btn-ghost:hover {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.07);
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #7446ee);
  box-shadow: 0 10px 22px rgba(139, 92, 246, 0.24);
}

.btn-primary:hover {
  box-shadow: 0 13px 28px rgba(139, 92, 246, 0.34);
}

.sidebar {
  position: fixed;
  z-index: 900;
  top: var(--header-h);
  bottom: 0;
  left: 0;
  width: var(--sidebar-w);
  overflow: hidden auto;
  border-right: 1px solid var(--border);
  background: rgba(17, 19, 24, 0.96);
  transition: width 240ms ease, transform 240ms ease;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.sidebar:hover {
  scrollbar-color: #373d49 transparent;
}

.sidebar-inner {
  width: var(--sidebar-w);
  padding: 18px 12px 100px;
}

.sidebar-heading {
  padding: 14px 12px 8px;
  color: var(--muted-2);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity var(--ease);
}

.nav-list {
  display: grid;
  gap: 4px;
  list-style: none;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  min-height: 45px;
  padding: 0 12px;
  gap: 13px;
  overflow: hidden;
  border: 0;
  border-radius: 11px;
  color: #aeb6c3;
  background: transparent;
  cursor: pointer;
  font-size: 0.89rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  transition: color var(--ease), background var(--ease);
}

.nav-link:hover {
  color: white;
  background: rgba(255, 255, 255, 0.055);
}

.nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(139, 92, 246, 0.06));
}

.nav-link.active::before {
  content: "";
  position: absolute;
  inset: 9px auto 9px 0;
  width: 3px;
  border-radius: 99px;
  background: #a683ff;
}

.nav-label {
  transition: opacity var(--ease);
}

.sidebar-divider {
  height: 1px;
  margin: 16px 10px 6px;
  background: var(--border);
}

body.sidebar-collapsed .sidebar {
  width: var(--sidebar-mini-w);
}

body.sidebar-collapsed .sidebar-heading,
body.sidebar-collapsed .nav-label {
  opacity: 0;
  pointer-events: none;
}

body.sidebar-collapsed .nav-link {
  width: 56px;
  justify-content: center;
  padding: 0;
  margin-inline: 1px;
}

body.sidebar-collapsed .main-shell {
  margin-left: var(--sidebar-mini-w);
}

body.sidebar-collapsed .sidebar-divider {
  margin-inline: 8px;
}

.main-shell {
  min-height: 100vh;
  padding-top: var(--header-h);
  margin-left: var(--sidebar-w);
  transition: margin-left 240ms ease;
}

.content {
  width: 100%;
  max-width: var(--content-max);
  padding: 26px 28px 64px;
  margin: 0 auto;
}

.hero {
  position: relative;
  min-height: clamp(330px, 39vw, 520px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #181b22;
  box-shadow: var(--shadow);
  isolation: isolate;
}

.hero-track {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 550ms ease;
}

.hero-slide.active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.025);
  transition: transform 5s ease;
}

.hero-slide.active img {
  transform: scale(1);
}

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 10, 14, 0.96) 0%, rgba(8, 10, 14, 0.78) 35%, rgba(8, 10, 14, 0.16) 73%, rgba(8, 10, 14, 0.2) 100%),
    linear-gradient(0deg, rgba(9, 11, 15, 0.65), transparent 46%);
}

.hero-content {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(24px, 5vw, 72px);
  width: min(580px, 55%);
  transform: translateY(-50%);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  margin-bottom: 17px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: #efeaff;
  background: rgba(139, 92, 246, 0.18);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 5px rgba(255, 122, 69, 0.15);
}

.hero-title {
  max-width: 680px;
  margin-bottom: 14px;
  font-size: clamp(2.25rem, 5vw, 4.8rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.hero-desc {
  max-width: 520px;
  margin-bottom: 26px;
  color: #c2c8d2;
  font-size: clamp(0.92rem, 1.3vw, 1.06rem);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.play-btn {
  min-height: 50px;
  padding: 0 22px;
  gap: 10px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #7041e5);
  box-shadow: 0 14px 30px rgba(139, 92, 246, 0.34);
}

.play-btn .icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.details-btn {
  min-height: 50px;
  padding-inline: 20px;
  border-color: rgba(255, 255, 255, 0.17);
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
}

.hero-rating {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 5px;
  color: #dce1e8;
  font-size: 0.83rem;
  font-weight: 700;
}

.star {
  color: #ffc857;
}

.hero-controls {
  position: absolute;
  z-index: 4;
  right: 22px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-arrow {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: white;
  background: rgba(15, 17, 21, 0.58);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background var(--ease), transform var(--ease);
}

.hero-arrow:hover {
  background: rgba(139, 92, 246, 0.72);
  transform: translateY(-1px);
}

.hero-dots {
  position: absolute;
  z-index: 4;
  bottom: 30px;
  left: 50%;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
}

.hero-dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: width 250ms ease, background 250ms ease;
}

.hero-dot.active {
  width: 27px;
  background: #fff;
}

.genre-wrap {
  position: relative;
  margin: 22px 0 30px;
}

.genre-scroller {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.genre-scroller::-webkit-scrollbar,
.game-scroller::-webkit-scrollbar {
  display: none;
}

.genre-pill {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: #c3cad5;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 700;
  transition: color var(--ease), border-color var(--ease), background var(--ease), transform var(--ease);
}

.genre-pill:hover,
.genre-pill.active {
  border-color: rgba(139, 92, 246, 0.48);
  color: #fff;
  background: rgba(139, 92, 246, 0.17);
  transform: translateY(-1px);
}

.search-status {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  margin-bottom: 22px;
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.09);
}

.search-status.visible {
  display: flex;
}

.search-status-copy {
  color: #d9d3ed;
  font-size: 0.9rem;
}

.search-status-copy strong {
  color: white;
}

.clear-results-btn {
  flex: 0 0 auto;
  border: 0;
  color: #bda9ff;
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}

.game-sections {
  display: grid;
  gap: 36px;
}

.game-section {
  min-width: 0;
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.game-section[hidden] {
  display: none;
}

.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.section-title-wrap {
  min-width: 0;
}

.section-kicker {
  margin-bottom: 3px;
  color: var(--accent-2);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.all-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 7px;
  color: #b4bdca;
  font-size: 0.82rem;
  font-weight: 800;
  transition: color var(--ease);
}

.all-link:hover {
  color: white;
}

.row-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: #ced4de;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), opacity var(--ease);
}

.row-arrow:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.08);
}

.row-arrow:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.row-arrow .icon {
  width: 18px;
  height: 18px;
}

.game-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(174px, 15.4vw, 235px);
  gap: 15px;
  overflow-x: auto;
  padding: 4px 3px 15px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.game-card {
  position: relative;
  min-width: 0;
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 220ms ease;
}

.game-card.filtered-out {
  display: none;
}

.game-card:hover {
  z-index: 2;
  transform: translateY(-5px);
}

.game-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
  transition: border-color var(--ease), box-shadow 220ms ease;
}

.game-card:hover .game-thumb {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 17px 32px rgba(0, 0, 0, 0.34);
}

.game-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms ease, filter 300ms ease;
}

.game-card:hover .game-thumb img {
  filter: brightness(0.72);
  transform: scale(1.07);
}

.game-badge {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 9px;
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 8px;
  border-radius: 7px;
  color: white;
  background: rgba(15, 17, 21, 0.74);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.17);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.game-badge.hot {
  background: linear-gradient(135deg, #ff5470, #ef476f);
}

.game-badge.new {
  background: linear-gradient(135deg, #28c76f, #0ea765);
}

.game-badge.top {
  background: linear-gradient(135deg, #ff9f43, #ff6b35);
}

.game-badge.updated {
  background: linear-gradient(135deg, #6f5bf5, #9b6dff);
}

.favorite-btn {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  color: white;
  background: rgba(15, 17, 21, 0.5);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-3px);
  backdrop-filter: blur(8px);
  transition: opacity var(--ease), transform var(--ease), background var(--ease);
}

.game-card:hover .favorite-btn,
.favorite-btn.active {
  opacity: 1;
  transform: translateY(0);
}

.favorite-btn.active {
  color: #ff6b85;
  background: rgba(255, 84, 112, 0.18);
}

.favorite-btn .icon {
  width: 16px;
  height: 16px;
}

.favorite-btn.active .icon {
  fill: currentColor;
}

.play-overlay {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: white;
  background: rgba(139, 92, 246, 0.86);
  box-shadow: 0 12px 25px rgba(43, 24, 93, 0.45);
  opacity: 0;
  transform: translate(-50%, -44%) scale(0.76);
  transition: opacity 200ms ease, transform 220ms ease;
}

.play-overlay .icon {
  width: 19px;
  height: 19px;
  margin-left: 2px;
  fill: currentColor;
}

.game-card:hover .play-overlay {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.game-info {
  padding: 10px 3px 0;
}

.game-title {
  overflow: hidden;
  color: #f0f2f6;
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  color: var(--muted-2);
  font-size: 0.71rem;
  font-weight: 600;
}

.game-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #aab2bf;
}

.empty-state {
  display: none;
  padding: 58px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}

.empty-state.visible {
  display: block;
}

.empty-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 17px;
  color: #bca8ff;
  background: rgba(139, 92, 246, 0.13);
}

.empty-state h2 {
  margin-bottom: 7px;
  color: #f1f3f7;
  font-size: 1.12rem;
}

.empty-state p {
  font-size: 0.87rem;
}

.footer {
  margin-top: 64px;
  border-top: 1px solid var(--border);
  background: rgba(10, 12, 16, 0.46);
}

.footer-inner {
  max-width: var(--content-max);
  padding: 48px 28px 96px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(250px, 1.5fr) repeat(3, minmax(130px, 0.65fr));
  gap: 40px;
  padding-bottom: 34px;
}

.footer-brand .logo {
  margin-bottom: 15px;
}

.footer-brand p {
  max-width: 390px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.75;
}

.footer-col h3 {
  margin-bottom: 13px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  gap: 10px;
  list-style: none;
}

.footer-links a {
  color: var(--muted);
  font-size: 0.83rem;
  transition: color var(--ease);
}

.footer-links a:hover {
  color: white;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  color: var(--muted-2);
  font-size: 0.78rem;
}

.language-select {
  height: 38px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: #d1d7e0;
  background: var(--surface);
  outline: none;
  cursor: pointer;
}

.drawer-backdrop {
  position: fixed;
  z-index: 850;
  inset: var(--header-h) 0 0;
  display: none;
  background: rgba(0, 0, 0, 0.58);
  opacity: 0;
  transition: opacity 220ms ease;
  backdrop-filter: blur(3px);
}

.bottom-nav {
  position: fixed;
  z-index: 1000;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  height: 66px;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: rgba(21, 24, 30, 0.91);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.bottom-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-radius: 13px;
  color: #8992a1;
  background: transparent;
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 700;
}

.bottom-nav-btn.active {
  color: #fff;
  background: rgba(139, 92, 246, 0.17);
}

.bottom-nav-btn .icon {
  width: 20px;
  height: 20px;
}

.toast {
  position: fixed;
  z-index: 2000;
  right: 22px;
  bottom: 24px;
  max-width: min(360px, calc(100vw - 30px));
  padding: 13px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: #eef1f6;
  background: rgba(28, 32, 40, 0.96);
  box-shadow: var(--shadow);
  font-size: 0.83rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1160px) {
  .header-inner {
    grid-template-columns: auto minmax(260px, 1fr) auto;
  }

  .login-btn {
    display: none;
  }

  .app-header .logo-text {
    display: none;
  }

  .hero-content {
    width: min(600px, 64%);
  }

  .footer-top {
    grid-template-columns: 1.3fr repeat(3, minmax(100px, 0.65fr));
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 66px;
  }

  .header-inner {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding-inline: 16px;
  }

  .desktop-sidebar-toggle {
    display: none;
  }

  .mobile-menu-btn {
    display: grid;
  }

  .signup-btn,
  .notification-btn {
    display: none;
  }

  .sidebar {
    z-index: 950;
    width: min(310px, 86vw);
    transform: translateX(-105%);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.35);
  }

  .sidebar-inner {
    width: 100%;
  }



/* Mobile par desktop collapsed sidebar styles reset */
body.sidebar-collapsed .sidebar {
    width: min(310px, 86vw);
}

body.sidebar-collapsed .sidebar-heading {
    padding: 14px 12px 8px;
    opacity: 1;
    pointer-events: auto;
}

body.sidebar-collapsed .nav-label {
    display: block;
    max-width: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

body.sidebar-collapsed .nav-link {
    width: 100%;
    justify-content: flex-start;
    padding: 0 12px;
    margin-inline: 0;
    gap: 13px;
}

body.sidebar-collapsed .sidebar-divider {
    margin: 16px 10px 6px;
}


  body.drawer-open .sidebar {
    transform: translateX(0);
  }

  body.drawer-open .drawer-backdrop {
    display: block;
    opacity: 1;
  }

  .main-shell,
  body.sidebar-collapsed .main-shell {
    margin-left: 0;
  }

  .content {
    padding: 20px 18px 60px;
  }

  .hero {
    min-height: 440px;
  }

  .hero-content {
    top: auto;
    bottom: 56px;
    left: 24px;
    width: calc(100% - 48px);
    transform: none;
  }

  .hero-slide::after {
    background:
      linear-gradient(0deg, rgba(8, 10, 14, 0.98) 0%, rgba(8, 10, 14, 0.79) 42%, rgba(8, 10, 14, 0.1) 83%),
      linear-gradient(90deg, rgba(8, 10, 14, 0.5), transparent 65%);
  }

  .hero-title {
    font-size: clamp(2.15rem, 8vw, 3.5rem);
  }

  .hero-desc {
    max-width: 600px;
  }

  .hero-controls {
    right: 14px;
    bottom: 13px;
  }

  .hero-dots {
    left: 24px;
    bottom: 28px;
    transform: none;
  }

  .footer-top {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-inner {
    padding-inline: 20px;
  }
}

@media (max-width: 767px) {
  .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding-inline: 12px;
  }

  .brand-wrap {
    gap: 8px;
  }

  .logo-mark {
    width: 39px;
    height: 39px;
    border-radius: 12px;
  }

  .search-input {
    height: 42px;
    padding-right: 43px;
    padding-left: 42px;
    font-size: 0.82rem;
  }

  .search-shortcut {
    display: none;
  }

  .clear-search {
    right: 8px;
  }

  .header-actions {
    display: none;
  }

  .content {
    padding: 14px 13px 54px;
  }

  .hero {
    min-height: 420px;
    border-radius: 18px;
  }

  .hero-content {
    bottom: 54px;
    left: 19px;
    width: calc(100% - 38px);
  }

  .hero-title {
    margin-bottom: 10px;
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .hero-desc {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 18px;
    font-size: 0.84rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .eyebrow {
    margin-bottom: 12px;
  }

  .play-btn,
  .details-btn {
    min-height: 45px;
    padding-inline: 16px;
    font-size: 0.82rem;
  }

  .hero-rating {
    display: none;
  }

  .hero-arrow {
    display: none;
  }

  .hero-dots {
    bottom: 22px;
    left: 19px;
  }

  .genre-wrap {
    margin: 16px 0 25px;
  }

  .genre-scroller {
    margin-inline: -13px;
    padding: 2px 13px 8px;
  }

  .genre-pill {
    min-height: 38px;
    padding-inline: 14px;
    font-size: 0.78rem;
  }

  .game-sections {
    gap: 31px;
  }

  .section-header {
    margin-bottom: 12px;
  }

  .section-kicker {
    display: none;
  }

  .section-title {
    font-size: 1.16rem;
  }

  .row-arrow {
    display: none;
  }

  .all-link {
    font-size: 0.76rem;
  }

  .game-scroller {
    grid-auto-columns: minmax(158px, 47vw);
    gap: 11px;
    margin-inline: -13px;
    padding: 3px 13px 14px;
    scroll-snap-type: x mandatory;
  }

  .game-info {
    padding-top: 8px;
  }

  .game-title {
    font-size: 0.84rem;
  }

  .favorite-btn {
    opacity: 1;
    transform: none;
  }

  .play-overlay {
    display: none;
  }

  .footer {
    margin-top: 48px;
  }

  .footer-inner {
    padding: 37px 17px 105px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 31px 25px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column-reverse;
  }

  .bottom-nav {
    display: grid;
  }

  .toast {
    right: 12px;
    bottom: 88px;
    left: 12px;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .mobile-menu-btn {
    width: 39px;
    height: 39px;
  }

  .app-header .logo-mark {
    display: none;
  }

  .search-shell {
    grid-column: 2;
  }

  .hero {
    min-height: 400px;
  }

  .hero-content {
    bottom: 49px;
  }

  .hero-title {
    font-size: 2.1rem;
  }

  .details-btn {
    display: none;
  }

  .game-scroller {
    grid-auto-columns: 44vw;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .search-status {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}




/* =========================================================
   SIDEBAR COLLAPSE / MOBILE DRAWER FIX
   Paste this at the END of style.css
========================================================= */

.sidebar {
  width: var(--sidebar-w);
  overflow-x: hidden;
  overflow-y: auto;

  transition:
    width 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);

  will-change: width, transform;
}

/* Animation ke time scrollbar flicker remove karega */
body.sidebar-animating .sidebar {
  overflow-y: hidden;
  pointer-events: none;
}

.sidebar-inner {
  width: 100%;
  min-width: var(--sidebar-mini-w);
}

.sidebar-heading {
  max-height: 40px;
  overflow: hidden;

  transition:
    max-height 220ms ease,
    padding 220ms ease,
    opacity 140ms ease;
}

.nav-link {
  width: 100%;

  transition:
    color var(--ease),
    background var(--ease),
    padding 260ms cubic-bezier(0.22, 1, 0.36, 1),
    gap 220ms ease;
}

.nav-label {
  display: block;
  max-width: 170px;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);

  transition:
    max-width 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 140ms ease,
    transform 220ms ease;
}

body.sidebar-collapsed .sidebar-heading {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
}

body.sidebar-collapsed .nav-label {
  max-width: 0;
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
}

body.sidebar-collapsed .nav-link {
  padding-right: 17px;
  padding-left: 17px;
  gap: 0;
}

.main-shell {
  transition:
    margin-left 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mobile drawer fix */
@media (max-width: 900px) {
  /*
   Desktop par sidebar collapsed ho tab bhi
   mobile drawer full width mein open hona chahiye.
  */
  body.sidebar-collapsed .sidebar {
    width: min(310px, 86vw);
  }

  body.sidebar-collapsed .sidebar-heading {
    max-height: 40px;
    padding: 14px 12px 8px;
    opacity: 1;
    pointer-events: auto;
  }

  body.sidebar-collapsed .nav-label {
    max-width: 170px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  body.sidebar-collapsed .nav-link {
    padding: 0 12px;
    gap: 13px;
  }

  body.sidebar-collapsed .sidebar-divider {
    margin-inline: 10px;
  }
}




/* =========================================================
   QUICK GAME CATEGORY CARDS
========================================================= */

.quick-categories {
    position: relative;
    width: 100%;
    margin-bottom: 24px;
}

.quick-categories-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 220px;
    gap: 10px;

    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    padding: 2px 2px 10px;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.quick-categories-track::-webkit-scrollbar {
    display: none;
}

/* Individual category card */

.quick-category-card {
    --card-background: #172033;
    --card-accent: #46d9ff;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    min-width: 0;
    height: 118px;
    overflow: hidden;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.035);
    border-radius: 15px;

    color: var(--card-accent);
    background: var(--card-background);

    cursor: pointer;
    scroll-snap-align: start;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;
}

.quick-category-card::before {
    content: "";

    position: absolute;
    top: -65px;
    right: -55px;

    width: 160px;
    height: 160px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.12),
            transparent 68%
        );

    pointer-events: none;
}

.quick-category-card:hover {
    z-index: 2;

    border-color: rgba(255, 255, 255, 0.11);

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.32);

    filter: brightness(1.08);
    transform: translateY(-3px);
}

.quick-category-card:active {
    transform: translateY(-1px) scale(0.99);
}

/* Category icon */

.quick-category-icon {
    position: absolute;
    top: 10px;
    right: 14px;

    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    font-size: 2.45rem;
    line-height: 1;

    filter:
        drop-shadow(0 7px 8px rgba(0, 0, 0, 0.25));

    transform: rotate(2deg);

    transition:
        transform 220ms ease;
}

.quick-category-card:hover .quick-category-icon {
    transform:
        translateY(-3px)
        rotate(-3deg)
        scale(1.08);
}

/* Category title */

.quick-category-title {
    position: relative;
    z-index: 2;

    display: block;
    overflow: hidden;

    color: var(--card-accent);

    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.025em;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Selected category */

.quick-category-card.active {
    border-color:
        color-mix(
            in srgb,
            var(--card-accent) 45%,
            transparent
        );

    box-shadow:
        inset 0 0 0 1px
        color-mix(
            in srgb,
            var(--card-accent) 22%,
            transparent
        );
}

/* Large desktop */

@media (min-width: 1500px) {
    .quick-categories-track {
        grid-auto-columns:
            calc((100% - 60px) / 7);
    }
}

/* Normal desktop */

@media (max-width: 1499px) {
    .quick-categories-track {
      grid-auto-columns: 200px;
    }
}

/* Small desktop */

@media (max-width: 1200px) {
    .quick-categories-track {
        grid-auto-columns:
            calc((100% - 40px) / 5);
    }

    .quick-category-card {
        height: 108px;
    }
}

/* Tablet */

@media (max-width: 900px) {
    .quick-categories-track {
        grid-auto-columns:
            calc((100% - 30px) / 4);
    }
}

/* Mobile */

@media (max-width: 767px) {
    .quick-categories {
        margin-bottom: 18px;
    }

    .quick-categories-track {
        grid-auto-columns: 165px;
        margin-inline: -13px;
        padding-inline: 13px;
        scroll-snap-type: x mandatory;
    }

    .quick-category-card {
        height: 96px;
        padding: 12px;
        border-radius: 13px;
    }

    .quick-category-icon {
        top: 7px;
        right: 11px;

        width: 49px;
        height: 49px;

        font-size: 2rem;
    }

    .quick-category-title {
        font-size: 0.86rem;
    }

    .quick-category-card:hover {
        filter: none;
        transform: none;
    }
}

/* Small mobile */

@media (max-width: 420px) {
    .quick-categories-track {
        grid-auto-columns: 158px;
    }

    .quick-category-card {
        height: 91px;
    }
}



/* =========================================================
   QUICK CATEGORY SCROLL BUTTONS
========================================================= */

.quick-categories {
    position: relative;
    width: 100%;
}

.quick-categories-track {
    padding-right: 48px;
    padding-left: 48px;
}

/* Left and right scroll buttons */

.quick-category-arrow {
    position: absolute;
    z-index: 10;
    top: 50%;

    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 11px;

    color: #ffffff;
    background: rgba(18, 21, 27, 0.88);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.38);

    cursor: pointer;

    transform: translateY(-50%);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        opacity 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.quick-category-arrow:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.24);
    background: #7653f6;

    transform:
        translateY(-50%)
        scale(1.05);
}

.quick-category-arrow:active:not(:disabled) {
    transform:
        translateY(-50%)
        scale(0.96);
}

.quick-category-arrow:disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.quick-category-prev {
    left: 7px;
}

.quick-category-next {
    right: 7px;
}

.quick-category-arrow .icon {
    width: 19px;
    height: 19px;
}

/* Button ke paas soft fade */

.quick-categories::before,
.quick-categories::after {
    content: "";

    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 8px;

    width: 65px;

    pointer-events: none;
}

.quick-categories::before {
    left: 0;

    background:
        linear-gradient(
            to right,
            var(--bg) 10%,
            transparent
        );
}

.quick-categories::after {
    right: 0;

    background:
        linear-gradient(
            to left,
            var(--bg) 10%,
            transparent
        );
}

/* Mobile */

@media (max-width: 767px) {
    .quick-categories-track {
        padding-right: 47px;
        padding-left: 47px;
    }

    .quick-category-arrow {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .quick-category-arrow .icon {
        width: 17px;
        height: 17px;
    }

    .quick-category-prev {
        left: 6px;
    }

    .quick-category-next {
        right: 6px;
    }

    .quick-categories::before,
    .quick-categories::after {
        width: 52px;
    }
}




/* =========================================================
   TOP GAMES MOSAIC SCROLLABLE SECTION
========================================================= */

.top-games-section {
    position: relative;
    width: 100%;
    min-width: 0;
    margin-bottom: 34px;
    scroll-margin-top: calc(var(--header-h) + 20px);
}

.top-games-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
}

.top-games-title {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #ffffff;

    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.035em;
}

.top-games-country {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 1.35rem;
    line-height: 1;
}

.top-games-controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.top-games-arrow {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;

    color: #d7dce5;
    background: rgba(255, 255, 255, 0.045);

    cursor: pointer;

    transition:
        color 160ms ease,
        opacity 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.top-games-arrow:hover:not(:disabled) {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
    background: #7c5cff;
    transform: translateY(-1px);
}

.top-games-arrow:active:not(:disabled) {
    transform: translateY(0) scale(0.95);
}

.top-games-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.top-games-arrow .icon {
    width: 18px;
    height: 18px;
}

/* Scroll container */

.top-games-slider {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.top-games-track {
    display: grid;

    /*
     * Two rows wali mosaic layout.
     * Large cards 2 columns aur 2 rows cover karenge.
     */
    grid-template-rows: repeat(2, 140px);
    grid-auto-columns: 250px;
    grid-auto-flow: column dense;

    gap: 8px;

    width: 100%;
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 2px 2px 10px;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;

    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.top-games-track::-webkit-scrollbar {
    display: none;
}

/* Individual cards */

.top-game-card {
    position: relative;
    min-width: 0;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;

    color: #ffffff;
    background: #191d25;

    cursor: pointer;
    scroll-snap-align: start;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.18);

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

/* Large 2x2 card */

.top-game-card--large {
    grid-row: span 2;
    grid-column: span 2;
}

/* Normal 1x1 card */

.top-game-card--small {
    grid-row: span 1;
    grid-column: span 1;
}

.top-game-card:hover {
    z-index: 5;

    border-color: rgba(255, 255, 255, 0.18);

    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.4);

    transform: translateY(-2px);
}

.top-game-image {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        filter 220ms ease,
        transform 280ms ease;
}

.top-game-card:hover .top-game-image {
    filter: brightness(0.74);
    transform: scale(1.045);
}

/* Badges */

.top-game-badges {
    position: absolute;
    z-index: 4;
    top: 7px;
    left: 7px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.top-game-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    min-height: 22px;
    padding: 0 7px;

    border-radius: 7px;

    color: #17130a;
    background: #ffed75;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.25);

    font-size: 0.63rem;
    font-weight: 850;
    line-height: 1;
}

.top-game-badge--hot {
    color: #ffffff;
    background: #ff593d;
}

.top-game-badge--new {
    color: #ffffff;
    background: #1dbb70;
}

.top-game-badge--original {
    color: #6c43e7;
    background: #ffffff;
}

/* Hover overlay */

.top-game-overlay {
    position: absolute;
    z-index: 3;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 15px;

    color: #ffffff;

    background:
        linear-gradient(
            to top,
            rgba(5, 7, 11, 0.88),
            rgba(5, 7, 11, 0.2),
            transparent
        );

    opacity: 0;
    pointer-events: none;

    transition:
        opacity 180ms ease;
}

.top-game-card:hover .top-game-overlay {
    opacity: 1;
}

.top-game-play {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: 11px;

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;

    color: #ffffff;
    background: rgba(124, 92, 255, 0.92);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.42);

    transform: scale(0.75);

    transition:
        transform 200ms ease;
}

.top-game-card:hover .top-game-play {
    transform: scale(1);
}

.top-game-play .icon {
    width: 19px;
    height: 19px;
    margin-left: 2px;
    fill: currentColor;
}

.top-game-name {
    max-width: 100%;
    overflow: hidden;

    color: #ffffff;

    font-size: 0.85rem;
    font-weight: 800;

    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tablet */

@media (max-width: 1100px) {
    .top-games-track {
        grid-template-rows: repeat(2, 120px);
        grid-auto-columns: 210px;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .top-games-section {
        margin-bottom: 27px;
    }

    .top-games-header {
        margin-bottom: 11px;
    }

    .top-games-title {
        gap: 6px;
        font-size: 1.05rem;
    }

    .top-games-country {
        font-size: 1.15rem;
    }

    .top-games-arrow {
        width: 33px;
        height: 33px;
        border-radius: 9px;
    }

    .top-games-track {
        grid-template-rows: repeat(2, 94px);
        grid-auto-columns: 155px;

        gap: 7px;

        margin-inline: -13px;
        padding:
            2px
            13px
            10px;

        scroll-snap-type: x mandatory;
    }

    .top-game-card {
        border-radius: 8px;
    }

    .top-game-card:hover {
        transform: none;
    }

    .top-game-overlay {
        display: none;
    }

    .top-game-badge {
        min-height: 18px;
        padding-inline: 5px;
        border-radius: 5px;
        font-size: 0.52rem;
    }
}

@media (max-width: 420px) {
    .top-games-track {
        grid-template-rows: repeat(2, 88px);
        grid-auto-columns: 145px;
    }
}





/* =========================================================
   ORIGINALS PORTRAIT GAME SLIDER
========================================================= */

.originals-section {
    position: relative;
    width: 100%;
    min-width: 0;
    margin-bottom: 36px;
    scroll-margin-top: calc(var(--header-h) + 20px);
}

/* Section heading */

.originals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.originals-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 0;
    border: 0;

    color: #ffffff;
    background: transparent;

    cursor: pointer;

    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.035em;

    transition:
        color 160ms ease,
        gap 160ms ease;
}

.originals-heading:hover {
    gap: 12px;
    color: #dcd4ff;
}

.originals-heading .icon {
    width: 22px;
    height: 22px;
}

/* Slider wrapper */

.originals-slider {
    position: relative;
    width: 100%;
    min-width: 0;
}

/* Horizontal scrolling track */

.originals-track {
    display: grid;
    grid-auto-flow: column;

    /*
     * Desktop par 6 portrait cards visible.
     * Extra cards horizontally scroll honge.
     */
    grid-auto-columns:
        calc((100% - 50px) / 6);

    gap: 10px;

    width: 100%;
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 3px 2px 12px;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;

    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.originals-track::-webkit-scrollbar {
    display: none;
}

/* Portrait game card */

.original-game-card {
    position: relative;
    display: block;

    width: 100%;
    min-width: 0;
    aspect-ratio: 2 / 3;

    overflow: hidden;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;

    color: #ffffff;
    background: #191d25;

    cursor: pointer;
    scroll-snap-align: start;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.2);

    transition:
        transform 190ms ease,
        border-color 190ms ease,
        box-shadow 190ms ease;
}

.original-game-card:hover {
    z-index: 4;

    border-color: rgba(255, 255, 255, 0.18);

    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.42);

    transform: translateY(-4px);
}

/* Card image */

.original-game-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        filter 220ms ease,
        transform 300ms ease;
}

.original-game-card:hover .original-game-image {
    filter: brightness(0.7);
    transform: scale(1.055);
}

/* Bottom gradient */

.original-game-card::after {
    content: "";

    position: absolute;
    z-index: 1;
    inset: 35% 0 0;

    background:
        linear-gradient(
            to top,
            rgba(5, 7, 11, 0.8),
            transparent
        );

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 180ms ease;
}

.original-game-card:hover::after {
    opacity: 1;
}

/* Badges */

.original-game-badges {
    position: absolute;
    z-index: 4;
    top: 7px;
    left: 7px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.original-game-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    min-height: 22px;
    padding: 0 7px;

    border-radius: 7px;

    color: #17120a;
    background: #ffed75;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.24);

    font-size: 0.62rem;
    font-weight: 850;
    line-height: 1;
}

.original-game-badge.hot {
    color: #ffffff;
    background: #ff593d;
}

.original-game-badge.new {
    color: #ffffff;
    background: #22b970;
}

.original-game-badge.updated {
    color: #ffffff;
    background: #2997ff;
}

.original-game-badge.originals {
    color: #6d47e8;
    background: #ffffff;
}

/* Hover play button */

.original-game-overlay {
    position: absolute;
    z-index: 3;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 16px;

    opacity: 0;
    pointer-events: none;

    transition:
        opacity 180ms ease;
}

.original-game-card:hover .original-game-overlay {
    opacity: 1;
}

.original-game-play {
    display: grid;
    place-items: center;

    width: 50px;
    height: 50px;

    margin-bottom: 12px;

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;

    color: #ffffff;
    background: rgba(124, 92, 255, 0.94);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.42);

    transform: scale(0.75);

    transition:
        transform 190ms ease;
}

.original-game-card:hover .original-game-play {
    transform: scale(1);
}

.original-game-play .icon {
    width: 19px;
    height: 19px;
    margin-left: 2px;
    fill: currentColor;
}

.original-game-name {
    position: relative;
    z-index: 3;

    display: block;
    width: 100%;
    overflow: hidden;

    color: #ffffff;

    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.35;

    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Left/right scroll arrows */

.originals-arrow {
    position: absolute;
    z-index: 10;
    top: 50%;

    display: grid;
    place-items: center;

    width: 52px;
    height: 60px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;

    color: #ffffff;
    background: rgba(10, 13, 17, 0.9);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.42);

    cursor: pointer;

    transform: translateY(-50%);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        opacity 160ms ease,
        visibility 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.originals-arrow:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.25);
    background: #7653f6;

    transform:
        translateY(-50%)
        scale(1.05);
}

.originals-arrow:active:not(:disabled) {
    transform:
        translateY(-50%)
        scale(0.96);
}

.originals-arrow:disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.originals-arrow .icon {
    width: 23px;
    height: 23px;
}

.originals-arrow-prev {
    left: 12px;
}

.originals-arrow-next {
    right: 12px;
}

/* Desktop hover par arrows visible */

@media (hover: hover) {
    .originals-arrow {
        opacity: 0;
    }

    .originals-slider:hover
    .originals-arrow:not(:disabled) {
        opacity: 1;
    }
}

/* Large screens: 7 cards */

@media (min-width: 1650px) {
    .originals-track {
        grid-auto-columns:
            calc((100% - 60px) / 7);
    }
}

/* Medium desktop: 5 cards */

@media (max-width: 1250px) {
    .originals-track {
        grid-auto-columns:
            calc((100% - 40px) / 5);
    }
}

/* Tablet: 4 cards */

@media (max-width: 950px) {
    .originals-track {
        grid-auto-columns:
            calc((100% - 30px) / 4);
    }
}

/* Mobile */

@media (max-width: 767px) {
    .originals-section {
        margin-bottom: 28px;
    }

    .originals-header {
        margin-bottom: 11px;
    }

    .originals-heading {
        font-size: 1.05rem;
    }

    .originals-heading .icon {
        width: 19px;
        height: 19px;
    }

    .originals-track {
        grid-auto-columns: 42vw;
        gap: 8px;

        margin-inline: -13px;

        padding:
            2px
            13px
            11px;

        scroll-snap-type: x mandatory;
    }

    .original-game-card {
        border-radius: 9px;
    }

    .original-game-card:hover {
        transform: none;
    }

    .original-game-overlay {
        display: none;
    }

    .originals-arrow {
        width: 39px;
        height: 48px;
        border-radius: 13px;
    }

    .originals-arrow-prev {
        left: 5px;
    }

    .originals-arrow-next {
        right: 5px;
    }

    .originals-arrow .icon {
        width: 19px;
        height: 19px;
    }
}

/* Small mobile */

@media (max-width: 420px) {
    .originals-track {
        grid-auto-columns: 47vw;
    }
}






/* =========================================================
   FREE GAMES INFORMATION + CATEGORY GRID
========================================================= */

.free-games-section {
    display: grid;
    grid-template-columns: minmax(300px, 425px) minmax(0, 1fr);
    gap: 10px;

    width: 100%;
    min-width: 0;

    margin-top: 38px;
    margin-bottom: 36px;
}

/* Information card */

.free-games-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-height: 218px;
    padding: 24px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #232538,
            #1c1e2d
        );
}

.free-games-info h2 {
    max-width: 340px;
    margin-bottom: 15px;

    color: #ffffff;

    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.04em;
}

.free-games-info p {
    display: -webkit-box;

    max-width: 380px;
    overflow: hidden;

    color: #c3c8e6;

    font-size: 0.86rem;
    line-height: 1.65;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.free-games-learn-more {
    display: inline-flex;
    align-items: center;

    margin-top: auto;
    padding-top: 10px;

    color: #9d75ff;

    font-size: 0.88rem;
    font-weight: 800;

    transition:
        color 160ms ease,
        transform 160ms ease;
}

.free-games-learn-more:hover {
    color: #bda6ff;
    transform: translateX(3px);
}

/* Slider container */

.free-games-slider {
    position: relative;

    width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* Two-row horizontal category grid */

.free-games-track {
    display: grid;

    grid-template-rows:
        repeat(2, minmax(100px, 1fr));

    grid-auto-flow: column;
    grid-auto-columns: 148px;

    gap: 9px;

    width: 100%;
    min-width: 0;
    height: 218px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 0 57px 5px 0;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity;

    scrollbar-width: none;
    overscroll-behavior-inline: contain;

    -webkit-overflow-scrolling: touch;
}

.free-games-track::-webkit-scrollbar {
    display: none;
}

/* Category cards */

.free-games-category {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    min-width: 0;
    padding: 17px;

    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 11px;

    color: #f5f5fa;
    background: #1d1f2c;

    cursor: pointer;
    scroll-snap-align: start;

    transition:
        background 170ms ease,
        border-color 170ms ease,
        box-shadow 170ms ease,
        transform 170ms ease;
}

.free-games-category:hover {
    z-index: 2;

    border-color: rgba(142, 130, 255, 0.32);
    background: #242638;

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.28);

    transform: translateY(-2px);
}

.free-games-category.active {
    border-color: rgba(139, 124, 255, 0.48);
    background: rgba(121, 100, 255, 0.14);
}

.free-games-category-icon {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    margin-bottom: 9px;

    color: #8d8cff;
}

.free-games-category-icon .icon {
    width: 29px;
    height: 29px;
    stroke-width: 2;
}

.free-games-category-title {
    display: block;

    max-width: 100%;
    overflow: hidden;

    color: #f5f5fa;

    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Scroll buttons */

.free-games-arrow {
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;

    display: grid;
    place-items: center;

    width: 58px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;

    color: #ffffff;
    background: rgba(5, 6, 10, 0.96);

    box-shadow:
        0 7px 24px rgba(0, 0, 0, 0.45);

    cursor: pointer;

    transition:
        opacity 160ms ease,
        visibility 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.free-games-arrow:hover:not(:disabled) {
    background: #7657f6;
}

.free-games-arrow:active:not(:disabled) {
    transform: scale(0.96);
}

.free-games-arrow:disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.free-games-arrow .icon {
    width: 24px;
    height: 24px;
}

.free-games-arrow-prev {
    left: 8px;
}

.free-games-arrow-next {
    right: 8px;
}

/* Desktop hover behavior */

@media (hover: hover) {
    .free-games-arrow {
        opacity: 0;
    }

    .free-games-slider:hover
    .free-games-arrow:not(:disabled) {
        opacity: 1;
    }
}

/* Tablet */

@media (max-width: 1100px) {
    .free-games-section {
        grid-template-columns: minmax(280px, 350px) minmax(0, 1fr);
    }

    .free-games-track {
        grid-auto-columns: 140px;
    }

    .free-games-info {
        padding: 21px;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .free-games-section {
        grid-template-columns: 1fr;
        gap: 12px;

        margin-top: 29px;
        margin-bottom: 28px;
    }

    .free-games-info {
        min-height: auto;
        padding: 20px;
    }

    .free-games-info h2 {
        margin-bottom: 11px;
        font-size: 1.3rem;
    }

    .free-games-info p {
        -webkit-line-clamp: 4;
    }

    .free-games-learn-more {
        margin-top: 12px;
    }

    .free-games-slider {
        margin-inline: -13px;
        width: calc(100% + 26px);
    }

    .free-games-track {
        grid-template-rows:
            repeat(2, 92px);

        grid-auto-columns: 138px;

        height: 193px;
        gap: 8px;

        padding:
            0
            49px
            5px
            13px;

        scroll-snap-type: x mandatory;
    }

    .free-games-category {
        padding: 14px;
        border-radius: 10px;
    }

    .free-games-category-icon {
        width: 31px;
        height: 31px;
        margin-bottom: 7px;
    }

    .free-games-category-icon .icon {
        width: 25px;
        height: 25px;
    }

    .free-games-category-title {
        font-size: 0.8rem;
    }

    .free-games-arrow {
        display: none;
    }

    .free-games-track {
        padding-right: 13px;
    }
}

/* Filtered games infinite-scroll pagination */
.genre-infinite-pagination{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;margin-top:18px;color:var(--muted,#949aa8);font-size:12px;font-weight:700}
.genre-infinite-pagination.complete{opacity:.75}
.genre-infinite-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.16);border-top-color:var(--accent,#7653f6);border-radius:50%;animation:genreInfiniteSpin .75s linear infinite}
@keyframes genreInfiniteSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.genre-infinite-spinner{animation:none;border-top-color:rgba(255,255,255,.5)}}

/* =========================================================
   ACTION CATEGORY PAGE — CONTENT ONLY
========================================================= */

.category_page {
    --category-card-gap: 12px;
    width: 100%;
    min-width: 0;
    padding-bottom: 36px;
}

.category_breadcrumb {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
    color: #a98cff;
    font-size: 0.72rem;
    font-weight: 750;
}

.category_breadcrumb a {
    transition: color 160ms ease;
}

.category_breadcrumb a:hover {
    color: #ffffff;
}

.category_breadcrumb strong {
    color: #b9a9ff;
}

.category_breadcrumb .icon {
    width: 13px;
    height: 13px;
}

/* =========================================================
   HEADER
========================================================= */

.category_header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    align-items: center;
    gap: 28px;
    min-height: 170px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 84% 30%,
            rgba(139, 92, 246, 0.2),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            rgba(28, 31, 45, 0.96),
            rgba(15, 17, 26, 0.96)
        );
}

.category_heading {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 27px 30px;
}

.category_eyebrow {
    display: inline-flex;
    margin-bottom: 5px;
    color: #a98cff;
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.category_heading h1 {
    color: #ffffff;
    font-size: clamp(2.15rem, 4vw, 3.65rem);
    line-height: 1.03;
    letter-spacing: -0.065em;
}

.category_description {
    max-width: 980px;
    margin-top: 11px;
}

.category_description p {
    color: #aab2c1;
    font-size: 0.79rem;
    line-height: 1.75;
}

.category_description_toggle {
    display: none;
    margin-top: 8px;
    border: 0;
    color: #a98cff;
    background: transparent;
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 850;
}

.category_header_art {
    position: relative;
    align-self: stretch;
    overflow: hidden;
}

.category_header_art > .icon {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 74px;
    height: 74px;
    color: #ffffff;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.35));
    transform: translate(-50%, -50%) rotate(-10deg);
}

.category_art_shape {
    position: absolute;
    display: block;
    border-radius: 26px;
    transform: rotate(24deg);
}

.category_art_shape--one {
    top: 16px;
    right: 26px;
    width: 118px;
    height: 118px;
    background: linear-gradient(135deg, #8b5cf6, #4f35bf);
}

.category_art_shape--two {
    right: 112px;
    bottom: -52px;
    width: 112px;
    height: 112px;
    background: linear-gradient(135deg, #21b6d7, #3267c6);
}

.category_art_shape--three {
    top: -52px;
    right: -22px;
    width: 108px;
    height: 108px;
    background: rgba(255, 255, 255, 0.08);
}

/* =========================================================
   CONTROLS
========================================================= */

.category_controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 13px;
}

.category_filter_chips {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow-x: auto;
    padding: 2px 1px 7px;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}

.category_filter_chips::-webkit-scrollbar {
    display: none;
}

.category_filter_chip {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 999px;
    color: #aeb6c4;
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 750;
    transition:
        border-color 160ms ease,
        color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.category_filter_chip:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.065);
}

.category_filter_chip.active {
    border-color: rgba(139, 92, 246, 0.5);
    color: #ffffff;
    background: rgba(139, 92, 246, 0.18);
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.08);
}

.category_sort_wrap {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.category_sort_wrap > label {
    color: #777f8e;
    font-size: 0.64rem;
    font-weight: 750;
}

.category_sort_field {
    position: relative;
}

.category_sort {
    width: 184px;
    height: 40px;
    padding: 0 42px 0 13px;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9px;
    outline: 0;
    color: #f0f2f6;
    background: #11141d;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 750;
}

.category_sort:focus {
    border-color: rgba(139, 92, 246, 0.65);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12);
}

.category_sort_field .icon {
    position: absolute;
    top: 50%;
    right: 13px;
    width: 16px;
    height: 16px;
    color: #c9cfda;
    pointer-events: none;
    transform: translateY(-50%) rotate(90deg);
}

.category_result_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    margin-bottom: 8px;
}

.category_result_count {
    color: #798294;
    font-size: 0.65rem;
}

.category_mobile_filter_button {
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    color: #d6dbe4;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    font-size: 0.65rem;
    font-weight: 800;
}

.category_mobile_filter_button .icon {
    width: 15px;
    height: 15px;
}

/* =========================================================
   GAME GRID
========================================================= */

.category_game_grid,
.category_skeleton_grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--category-card-gap);
}

.category_game_card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 10px;
    color: #ffffff;
    background: #171b25;
    cursor: pointer;
    isolation: isolate;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.category_game_card:hover {
    z-index: 3;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    transform: translateY(-4px);
}

.category_game_media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #202533;
}

.category_game_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 240ms ease,
        filter 240ms ease;
}

.category_game_card:hover .category_game_image {
    filter: brightness(0.72);
    transform: scale(1.045);
}

.category_game_badges {
    position: absolute;
    z-index: 5;
    top: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.category_game_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 21px;
    padding: 0 7px;
    border-radius: 7px;
    color: #ffffff;
    background: rgba(15, 18, 26, 0.84);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.23);
    font-size: 0.55rem;
    font-weight: 850;
    backdrop-filter: blur(7px);
}

.category_game_badge--originals {
    color: #6d48e8;
    background: #ffffff;
}

.category_game_badge--new {
    background: #b53be4;
}

.category_game_badge--hot {
    background: #ff5b3f;
}

.category_game_badge--top {
    color: #312406;
    background: #ffe779;
}

.category_game_play {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    color: #ffffff;
    background: rgba(119, 87, 255, 0.92);
    box-shadow: 0 11px 24px rgba(0, 0, 0, 0.38);
    opacity: 0;
    transform: translate(-50%, -44%) scale(0.74);
    transition:
        opacity 170ms ease,
        transform 180ms ease;
}

.category_game_play .icon {
    width: 18px;
    height: 18px;
    margin-left: 2px;
    fill: currentColor;
}

.category_game_card:hover .category_game_play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.category_game_hover_info {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 30px 9px 8px;
    background:
        linear-gradient(
            to top,
            rgba(5, 7, 11, 0.94),
            rgba(5, 7, 11, 0.32),
            transparent
        );
    opacity: 0;
    transform: translateY(5px);
    transition:
        opacity 170ms ease,
        transform 170ms ease;
}

.category_game_card:hover .category_game_hover_info {
    opacity: 1;
    transform: translateY(0);
}

.category_game_hover_info strong,
.category_game_hover_info span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category_game_hover_info strong {
    font-size: 0.68rem;
}

.category_game_hover_info span {
    margin-top: 1px;
    color: rgba(255, 255, 255, 0.67);
    font-size: 0.56rem;
}

.category_game_mobile_info {
    display: none;
    padding: 7px 2px 2px;
}

.category_game_mobile_info strong,
.category_game_mobile_info span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category_game_mobile_info strong {
    color: #eef1f5;
    font-size: 0.63rem;
}

.category_game_mobile_info span {
    margin-top: 1px;
    color: #777f8e;
    font-size: 0.52rem;
}

.category_skeleton_grid[hidden] {
    display: none;
}

.category_skeleton_grid span {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    background: #171b25;
}

.category_skeleton_grid span::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.06),
            transparent
        );
    transform: translateX(-100%);
    animation: category-skeleton 1.15s infinite;
}

@keyframes category-skeleton {
    to {
        transform: translateX(100%);
    }
}

/* =========================================================
   EMPTY STATE
========================================================= */

.category_empty_state {
    padding: 60px 20px;
    border: 1px dashed rgba(255, 255, 255, 0.11);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.018);
    text-align: center;
}

.category_empty_state[hidden] {
    display: none;
}

.category_empty_icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 13px;
    border-radius: 17px;
    color: #b8a8ff;
    background: rgba(139, 92, 246, 0.15);
}

.category_empty_icon .icon {
    width: 28px;
    height: 28px;
}

.category_empty_state h2 {
    font-size: 1.15rem;
}

.category_empty_state p {
    margin-top: 5px;
    color: #838c9c;
    font-size: 0.7rem;
}

.category_empty_state button {
    min-height: 38px;
    padding: 0 14px;
    margin-top: 16px;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    background: #7757ff;
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 800;
}

/* =========================================================
   PAGINATION
========================================================= */

.category_pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 27px;
}

.category_page_button {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 9px;
    color: #aeb6c4;
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 800;
    transition:
        border-color 160ms ease,
        color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.category_page_button:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.17);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.075);
    transform: translateY(-1px);
}

.category_page_button.active {
    border-color: rgba(139, 92, 246, 0.62);
    color: #ffffff;
    background: #7757ff;
    box-shadow: 0 8px 22px rgba(119, 87, 255, 0.27);
}

.category_page_button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.category_page_button--arrow {
    min-width: 42px;
}

.category_page_button .icon {
    width: 16px;
    height: 16px;
}

.category_page_ellipsis {
    display: grid;
    place-items: center;
    width: 24px;
    height: 38px;
    color: #697284;
    font-size: 0.8rem;
}

/* =========================================================
   SEO CONTENT
========================================================= */

.category_seo_content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.25fr;
    gap: 20px;
    margin-top: 42px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            rgba(28, 31, 45, 0.78),
            rgba(15, 17, 26, 0.86)
        );
}

.category_seo_intro h2 {
    font-size: 1.5rem;
    letter-spacing: -0.04em;
}

.category_seo_intro p {
    margin-top: 9px;
    color: #9fa8b7;
    font-size: 0.73rem;
    line-height: 1.75;
}

.category_feature_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.category_feature_grid article {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.025);
}

.category_feature_grid article > span {
    font-size: 1.3rem;
}

.category_feature_grid h3 {
    margin-top: 8px;
    font-size: 0.75rem;
}

.category_feature_grid p {
    margin-top: 5px;
    color: #87909f;
    font-size: 0.62rem;
    line-height: 1.6;
}

/* =========================================================
   RESPONSIVE GRID
========================================================= */

@media (max-width: 1500px) {
    .category_game_grid,
    .category_skeleton_grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1240px) {
    .category_game_grid,
    .category_skeleton_grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .category_header {
        grid-template-columns: minmax(0, 1fr) 190px;
    }

    .category_seo_content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .category_header {
        grid-template-columns: minmax(0, 1fr) 160px;
    }

    .category_controls {
        align-items: flex-start;
        flex-direction: column-reverse;
        gap: 9px;
    }

    .category_filter_chips {
        width: 100%;
    }

    .category_sort_wrap {
        width: 100%;
        justify-content: flex-end;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .category_page {
        --category-card-gap: 8px;
        padding-bottom: 24px;
    }

    .category_breadcrumb {
        margin-bottom: 8px;
        font-size: 0.59rem;
    }

    .category_header {
        display: block;
        min-height: 0;
        margin-bottom: 13px;
        border-radius: 13px;
    }

    .category_heading {
        padding: 17px;
    }

    .category_eyebrow {
        margin-bottom: 3px;
        font-size: 0.54rem;
    }

    .category_heading h1 {
        font-size: 2rem;
    }

    .category_description {
        max-height: 43px;
        margin-top: 7px;
        overflow: hidden;
    }

    .category_description.expanded {
        max-height: none;
    }

    .category_description p {
        font-size: 0.64rem;
        line-height: 1.65;
    }

    .category_description_toggle {
        display: inline-flex;
    }

    .category_header_art {
        display: none;
    }

    .category_controls {
        display: block;
        margin-bottom: 6px;
    }

    .category_sort_wrap {
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .category_sort_wrap > label {
        font-size: 0.58rem;
    }

    .category_sort_field {
        width: 156px;
    }

    .category_sort {
        width: 100%;
        height: 36px;
        font-size: 0.65rem;
    }

    .category_filter_chips {
        display: none;
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, 0.075);
        border-radius: 11px;
        background: #141822;
    }

    .category_filter_chips.mobile-open {
        display: flex;
    }

    .category_filter_chip {
        min-height: 31px;
        padding-inline: 10px;
        font-size: 0.59rem;
    }

    .category_result_bar {
        min-height: 36px;
        margin-bottom: 5px;
    }

    .category_result_count {
        font-size: 0.57rem;
    }

    .category_mobile_filter_button {
        display: inline-flex;
    }

    .category_game_grid,
    .category_skeleton_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category_game_card {
        overflow: visible;
        border: 0;
        border-radius: 8px;
        background: transparent;
    }

    .category_game_card:hover {
        box-shadow: none;
        transform: none;
    }

    .category_game_media {
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 8px;
    }

    .category_game_card:hover .category_game_image {
        filter: none;
        transform: none;
    }

    .category_game_badges {
        top: 4px;
        left: 4px;
        gap: 3px;
    }

    .category_game_badge {
        min-height: 17px;
        padding-inline: 5px;
        border-radius: 5px;
        font-size: 0.45rem;
    }

    .category_game_play,
    .category_game_hover_info {
        display: none;
    }

    .category_game_mobile_info {
        display: block;
    }

    .category_skeleton_grid span {
        border-radius: 8px;
    }

    .category_pagination {
        gap: 5px;
        margin-top: 21px;
    }

    .category_page_button {
        min-width: 34px;
        height: 34px;
        padding-inline: 7px;
        border-radius: 8px;
        font-size: 0.61rem;
    }

    .category_page_button--arrow {
        min-width: 36px;
    }

    .category_page_ellipsis {
        width: 18px;
        height: 34px;
    }

    .category_seo_content {
        display: block;
        margin-top: 30px;
        padding: 17px;
        border-radius: 13px;
    }

    .category_seo_intro h2 {
        font-size: 1.14rem;
    }

    .category_seo_intro p {
        font-size: 0.63rem;
    }

    .category_feature_grid {
        grid-template-columns: 1fr;
        margin-top: 14px;
    }

    .category_feature_grid article {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 9px;
        padding: 11px;
    }

    .category_feature_grid article > span {
        grid-row: span 2;
    }

    .category_feature_grid h3 {
        margin-top: 0;
    }

    .category_feature_grid p {
        margin-top: 2px;
        font-size: 0.58rem;
    }
}

@media (max-width: 380px) {
    .category_page {
        --category-card-gap: 7px;
    }

    .category_heading {
        padding: 15px;
    }

    .category_heading h1 {
        font-size: 1.8rem;
    }

    .category_game_mobile_info strong {
        font-size: 0.59rem;
    }
}

/* =========================================================
   GAME DETAIL PAGE — CONTENT ONLY
========================================================= */

.game_page_layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.game_page_main {
    min-width: 0;
}

.game_player_card,
.game_content_card,
.game_video_section {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #141821;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

/* =========================================================
   PLAYER
========================================================= */

.game_player_topbar,
.game_player_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 52px;
    padding: 8px 11px;
    background: #181c27;
}

.game_player_topbar {
    border-bottom: 1px solid var(--border);
}

.game_player_toolbar {
    border-top: 1px solid var(--border);
}

.game_identity,
.game_topbar_actions,
.game_toolbar_info,
.game_toolbar_actions {
    display: flex;
    align-items: center;
}

.game_identity {
    min-width: 0;
    gap: 10px;
}

.game_identity_icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--accent), #4b35ca);
}

.game_identity_icon .icon {
    width: 20px;
    height: 20px;
}

.game_identity_text {
    min-width: 0;
}

.game_identity_text strong,
.game_identity_text span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game_identity_text strong {
    font-size: 0.82rem;
}

.game_identity_text span {
    color: var(--muted);
    font-size: 0.66rem;
}

.game_topbar_actions {
    flex: 0 0 auto;
    gap: 7px;
}

.game_small_action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #cbd1dc;
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 750;
    transition:
        border-color 170ms ease,
        color 170ms ease,
        background 170ms ease;
}

.game_small_action:hover,
.game_small_action.active {
    border-color: rgba(139, 92, 246, 0.42);
    color: #ffffff;
    background: rgba(139, 92, 246, 0.14);
}

.game_small_action.active .icon {
    fill: currentColor;
}

.game_small_action .icon {
    width: 16px;
    height: 16px;
}

.game_player_stage {
    position: relative;
    width: 100%;
    min-height: 440px;
    aspect-ratio: 16 / 8.4;
    overflow: hidden;
    background: #0d1017;
    isolation: isolate;
}

.game_player_cover {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game_player_iframe {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border: 0;
    background: #0d1017;
}

.game_start_overlay {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        linear-gradient(rgba(8, 10, 15, 0.6), rgba(8, 10, 15, 0.86)),
        radial-gradient(circle at 70% 20%, rgba(45, 212, 191, 0.18), transparent 35%);
    backdrop-filter: blur(3px);
}

.game_start_overlay[hidden] {
    display: none !important;
}

.game_start_content {
    width: min(100%, 470px);
    text-align: center;
}

.game_start_logo {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    color: #ffffff;
    background: rgba(139, 92, 246, 0.22);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.game_start_logo .icon {
    width: 34px;
    height: 34px;
}

.game_start_kicker {
    margin-bottom: 5px;
    color: #a896ff;
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game_start_content h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.06em;
}

.game_start_rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 9px;
    color: #ffffff;
    font-size: 0.7rem;
}

.game_start_rating > span:first-child {
    color: #ffd45e;
    font-size: 0.9rem;
}

.game_start_rating strong {
    font-size: 0.82rem;
}

.game_start_rating > span:last-child {
    color: #aeb6c4;
}

.game_start_description {
    max-width: 460px;
    margin: 13px auto 0;
    color: #c3c9d4;
    font-size: 0.83rem;
    line-height: 1.7;
}

.game_play_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 47px;
    padding: 0 20px;
    margin-top: 21px;
    border: 0;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #8b5cf6, #6940e6);
    box-shadow: 0 13px 28px rgba(139, 92, 246, 0.34);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 850;
    transition:
        transform 170ms ease,
        box-shadow 170ms ease;
}

.game_play_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(139, 92, 246, 0.42);
}

.game_play_button .icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.game_fullscreen_exit {
    position: absolute;
    z-index: 100;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: #ffffff;
    background: rgba(10, 12, 17, 0.78);
    cursor: pointer;
    font-size: 1.45rem;
    line-height: 1;
    backdrop-filter: blur(10px);
}

.game_fullscreen_exit[hidden] {
    display: none !important;
}

.game_player_stage:fullscreen,
.game_player_stage:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    aspect-ratio: auto;
    border-radius: 0;
    background: #000000;
}

.game_player_stage:fullscreen .game_player_iframe,
.game_player_stage:-webkit-full-screen .game_player_iframe {
    width: 100%;
    height: 100%;
}

.game_player_stage.game_player_stage--fullscreen-fallback {
    position: fixed;
    z-index: 5000;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    aspect-ratio: auto;
    border-radius: 0;
    background: #000000;
}

body.game_fullscreen_open,
body.game_modal_open {
    overflow: hidden;
}

.game_toolbar_info {
    min-width: 0;
    gap: 7px;
}

.game_toolbar_info strong,
.game_toolbar_info span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game_toolbar_info strong {
    font-size: 0.72rem;
}

.game_toolbar_info span {
    color: var(--muted);
    font-size: 0.64rem;
}

.game_live_dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #32d296;
    box-shadow: 0 0 0 5px rgba(50, 210, 150, 0.1);
}

.game_toolbar_actions {
    flex: 0 0 auto;
    gap: 5px;
}

.game_toolbar_button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    color: #aeb6c4;
    background: transparent;
    cursor: pointer;
    transition:
        color 170ms ease,
        background 170ms ease;
}

.game_toolbar_button:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.game_toolbar_button .icon {
    width: 18px;
    height: 18px;
}

/* =========================================================
   MOBILE RECOMMENDATIONS
========================================================= */

.game_mobile_recommendations {
    display: none;
}

/* =========================================================
   AD, BREADCRUMBS, CONTENT
========================================================= */

.game_advertisement {
    display: grid;
    place-items: center;
    height: 112px;
    margin: 13px 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: #596174;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.015) 0,
            rgba(255, 255, 255, 0.015) 8px,
            transparent 8px,
            transparent 16px
        ),
        #10131b;
    font-size: 0.63rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.game_breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 5px 2px 13px;
    color: #70798a;
    font-size: 0.68rem;
}

.game_breadcrumbs a:hover {
    color: #a98cff;
}

.game_breadcrumbs strong {
    color: #a6aebc;
}

.game_content_card {
    padding: clamp(20px, 3vw, 34px);
}

.game_content_header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--border);
}

.game_heading_area {
    min-width: 0;
}

.game_content_badge {
    display: inline-flex;
    margin-bottom: 6px;
    color: #a98cff;
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game_heading_area h2,
.game_video_section h2 {
    color: #ffffff;
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.05em;
}

.game_heading_area p {
    max-width: 850px;
    margin-top: 10px;
    color: #aeb6c4;
    font-size: 0.78rem;
    line-height: 1.8;
}

.game_rating_box {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.game_rating_score {
    display: flex;
    align-items: center;
    gap: 7px;
}

.game_rating_score span {
    color: #ffd159;
    font-size: 1.2rem;
}

.game_rating_score strong {
    font-size: 1.55rem;
    letter-spacing: -0.05em;
}

.game_rating_box > span {
    display: block;
    margin: 3px 0 11px;
    color: var(--muted);
    font-size: 0.62rem;
}

.game_rating_box button {
    width: 100%;
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: rgba(139, 92, 246, 0.18);
    cursor: pointer;
    font-size: 0.66rem;
    font-weight: 800;
}

.game_meta_grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 24px 0 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 11px;
}

.game_meta_grid > div {
    min-width: 0;
    padding: 12px;
    border-right: 1px solid var(--border);
}

.game_meta_grid > div:last-child {
    border-right: 0;
}

.game_meta_grid dt {
    margin-bottom: 3px;
    color: #737d8f;
    font-size: 0.57rem;
    font-weight: 800;
    text-transform: uppercase;
}

.game_meta_grid dd {
    overflow: hidden;
    color: #dce1e8;
    font-size: 0.68rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game_tag_list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.game_tag_list a {
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid rgba(139, 92, 246, 0.24);
    border-radius: 7px;
    color: #b9a9ff;
    background: rgba(139, 92, 246, 0.09);
    font-size: 0.62rem;
    font-weight: 750;
}

.game_article_section {
    padding-top: 27px;
}

.game_article_section h3 {
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 1rem;
    letter-spacing: -0.025em;
}

.game_article_section h4 {
    margin: 18px 0 8px;
    color: #e9ebf0;
    font-size: 0.8rem;
}

.game_article_section p,
.game_article_section li {
    color: #aeb6c4;
    font-size: 0.76rem;
    line-height: 1.8;
}

.game_article_section p + p {
    margin-top: 10px;
}

.game_article_section ul {
    display: grid;
    gap: 6px;
    padding-left: 18px;
}

.game_article_section li::marker {
    color: #9d82ff;
}

.game_controls_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    max-width: 760px;
}

.game_controls_grid > div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.025);
}

.game_controls_grid kbd {
    display: grid;
    place-items: center;
    min-width: 43px;
    min-height: 31px;
    padding: 0 7px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom-width: 3px;
    border-radius: 6px;
    color: #ffffff;
    background: #252b39;
    font-family: inherit;
    font-size: 0.63rem;
    font-weight: 850;
}

.game_controls_grid span {
    color: #939cab;
    font-size: 0.66rem;
    font-weight: 700;
}

/* =========================================================
   FAQ
========================================================= */

.game_faq_list {
    display: grid;
    gap: 8px;
}

.game_faq_item {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.02);
}

.game_faq_question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 0;
    color: #e5e8ee;
    background: transparent;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: left;
}

.game_faq_question .icon {
    width: 17px;
    height: 17px;
    transition: transform 170ms ease;
}

.game_faq_question[aria-expanded="true"] .icon {
    transform: rotate(90deg);
}

.game_faq_answer {
    padding: 0 14px 14px;
    color: #9fa8b7;
    font-size: 0.7rem;
    line-height: 1.7;
}

/* =========================================================
   VIDEO
========================================================= */

.game_video_section {
    padding: clamp(18px, 3vw, 28px);
    margin-top: 14px;
}

.game_section_heading {
    margin-bottom: 16px;
}

.game_section_heading > span {
    display: block;
    margin-bottom: 3px;
    color: #9f83ff;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game_video_poster {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #0f1219;
    cursor: pointer;
}

.game_video_poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game_video_play_icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #ffffff;
    background: rgba(13, 16, 23, 0.84);
    box-shadow: 0 14px 33px rgba(0, 0, 0, 0.38);
    transform: translate(-50%, -50%);
}

.game_video_play_icon .icon {
    width: 23px;
    height: 23px;
    margin-left: 3px;
    fill: currentColor;
}

.game_store_badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.game_store_badges a {
    min-height: 38px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #ffffff;
    background: #0f1219;
    font-size: 0.68rem;
    font-weight: 800;
}

/* =========================================================
   DESKTOP RECOMMENDATIONS
========================================================= */

.game_recommendation_sidebar {
    position: sticky;
    top: calc(var(--header-h) + 14px);
    align-self: start;
    min-width: 0;
}

.game_recommendation_header {
    padding: 2px 1px 9px;
}

.game_recommendation_header h2 {
    font-size: 0.8rem;
}

.game_recommendation_header span {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: 0.61rem;
}

.game_recommendation_list {
    display: grid;
    gap: 8px;
}

.game_recommendation_card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #171b25;
    transition:
        transform 170ms ease,
        border-color 170ms ease,
        box-shadow 170ms ease;
}

.game_recommendation_card:hover {
    z-index: 2;
    border-color: var(--border-strong);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);
    transform: translateX(-3px);
}

.game_recommendation_card img {
    width: 100%;
    aspect-ratio: 16 / 9.5;
    object-fit: cover;
}

.game_recommendation_card span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    padding: 22px 7px 6px;
    color: #ffffff;
    background: linear-gradient(to top, rgba(5, 7, 11, 0.94), transparent);
    font-size: 0.62rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   SHARE DIALOG
========================================================= */

.game_dialog_backdrop {
    position: fixed;
    z-index: 6000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(2, 4, 8, 0.76);
    backdrop-filter: blur(7px);
}

.game_dialog_backdrop[hidden] {
    display: none !important;
}

.game_dialog {
    position: relative;
    width: min(100%, 440px);
    padding: 26px;
    border: 1px solid var(--border-strong);
    border-radius: 17px;
    background: #181d29;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}

.game_dialog_close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    color: #a7afbd;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    font-size: 1.25rem;
}

.game_dialog h2 {
    margin-bottom: 7px;
    font-size: 1.35rem;
    letter-spacing: -0.04em;
}

.game_dialog p {
    color: #9fa8b7;
    font-size: 0.74rem;
}

.game_share_field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 18px;
}

.game_share_field input {
    min-width: 0;
    height: 42px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    outline: 0;
    color: #cbd1dc;
    background: #10131b;
    font-size: 0.68rem;
}

.game_share_field button {
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    background: #7957f6;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 800;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {
    .game_page_layout {
        grid-template-columns: minmax(0, 1fr) 165px;
    }

    .game_meta_grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .game_meta_grid > div:nth-child(3) {
        border-right: 0;
    }

    .game_meta_grid > div:nth-child(n + 4) {
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 900px) {
    .game_page_layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .game_recommendation_sidebar {
        position: static;
    }

    .game_recommendation_list {
        grid-auto-flow: column;
        grid-auto-columns: 180px;
        overflow-x: auto;
        padding-bottom: 9px;
        scrollbar-width: none;
    }

    .game_recommendation_list::-webkit-scrollbar {
        display: none;
    }
}

/* =========================================================
   MOBILE — SCREENSHOT-STYLE CONTENT
========================================================= */

@media (max-width: 767px) {
    .game_page_layout {
        display: block;
    }

    .game_page_main {
        width: 100%;
    }

    /* Player */

    .game_player_card {
        margin-inline: -13px;
        overflow: hidden;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        background: #11141d;
        box-shadow: none;
    }

    .game_player_topbar {
        display: none;
    }

    .game_player_stage {
        min-height: 0;
        aspect-ratio: 16 / 9;
        background: #090b10;
    }

    .game_start_overlay {
        display: flex;
        align-items: flex-end;
        padding: 0;
        background:
            linear-gradient(
                to top,
                rgba(7, 9, 14, 0.98) 0%,
                rgba(7, 9, 14, 0.76) 48%,
                rgba(7, 9, 14, 0.06) 100%
            );
        backdrop-filter: none;
    }

    .game_start_content {
        width: 100%;
        padding: 62px 14px 13px;
        text-align: center;
    }

    .game_start_logo,
    .game_start_kicker,
    .game_start_description {
        display: none;
    }

    .game_start_content h1 {
        margin: 0;
        font-size: 1.08rem;
        line-height: 1.25;
        letter-spacing: -0.025em;
    }

    .game_start_rating {
        margin-top: 3px;
    }

    .game_play_button {
        width: 100%;
        min-height: 40px;
        margin-top: 9px;
        border-radius: 999px;
        font-size: 0.72rem;
    }

    .game_play_button .icon {
        width: 16px;
        height: 16px;
    }

    .game_player_toolbar {
        min-height: 43px;
        padding: 5px 8px;
    }

    .game_toolbar_info {
        gap: 6px;
    }

    .game_toolbar_info strong {
        font-size: 0.66rem;
    }

    .game_toolbar_info > span:last-child {
        display: none;
    }

    .game_toolbar_button {
        width: 31px;
        height: 31px;
    }

    .game_toolbar_button .icon {
        width: 16px;
        height: 16px;
    }

    /* Recommendations below player */

    .game_mobile_recommendations {
        display: block;
        padding: 12px 0 4px;
    }

    .game_mobile_recommendation_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
    }

    .game_mobile_recommendation_header h2 {
        color: #ffffff;
        font-size: 0.82rem;
        line-height: 1.25;
    }

    .game_mobile_recommendation_header span {
        display: block;
        margin-top: 1px;
        color: #777f8f;
        font-size: 0.57rem;
    }

    .game_mobile_recommendation_header a {
        color: #a98cff;
        font-size: 0.61rem;
        font-weight: 800;
    }

    .game_mobile_recommendation_grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .game_mobile_recommendation_grid .game_recommendation_card {
        border-radius: 7px;
    }

    .game_mobile_recommendation_grid .game_recommendation_card:hover {
        transform: none;
    }

    .game_mobile_recommendation_grid .game_recommendation_card img {
        aspect-ratio: 1 / 0.78;
    }

    .game_mobile_recommendation_grid .game_recommendation_card span {
        padding: 15px 5px 4px;
        font-size: 0.52rem;
    }

    .game_recommendation_sidebar {
        display: none;
    }

    .game_advertisement {
        display: none;
    }

    /* Breadcrumb */

    .game_breadcrumbs {
        gap: 5px;
        padding: 12px 1px 8px;
        font-size: 0.56rem;
    }

    /* Main information */

    .game_content_card {
        padding: 10px 1px 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .game_content_header {
        display: block;
        padding-bottom: 13px;
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    .game_content_badge {
        margin-bottom: 3px;
        font-size: 0.55rem;
    }

    .game_heading_area h2 {
        font-size: 1.2rem;
    }

    .game_heading_area p {
        margin-top: 6px;
        font-size: 0.67rem;
        line-height: 1.65;
    }

    .game_rating_box {
        display: none;
    }

    .game_meta_grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        margin: 12px 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .game_meta_grid > div,
    .game_meta_grid > div:nth-child(3),
    .game_meta_grid > div:nth-child(even) {
        display: grid;
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 9px;
        padding: 4px 0;
        border: 0;
    }

    .game_meta_grid dt {
        margin: 0;
        color: #777f8e;
        font-size: 0.55rem;
        text-transform: none;
    }

    .game_meta_grid dd {
        color: #c7cdd7;
        font-size: 0.59rem;
        white-space: normal;
    }

    .game_tag_list {
        gap: 5px;
        padding-bottom: 13px;
    }

    .game_tag_list a {
        min-height: 23px;
        padding: 4px 7px;
        border-radius: 5px;
        font-size: 0.52rem;
    }

    /* Article */

    .game_article_section {
        padding-top: 17px;
    }

    .game_article_section h3 {
        margin-bottom: 6px;
        font-size: 0.78rem;
    }

    .game_article_section h4 {
        margin: 12px 0 5px;
        font-size: 0.68rem;
    }

    .game_article_section p,
    .game_article_section li {
        font-size: 0.61rem;
        line-height: 1.65;
    }

    .game_article_section ul {
        gap: 3px;
        padding-left: 15px;
    }

    .game_controls_grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .game_controls_grid > div {
        min-width: 0;
        padding: 7px;
    }

    .game_controls_grid kbd {
        min-width: 34px;
        min-height: 26px;
        font-size: 0.52rem;
    }

    .game_controls_grid span {
        font-size: 0.54rem;
    }

    /* FAQ */

    .game_faq_list {
        gap: 6px;
    }

    .game_faq_question {
        min-height: 40px;
        padding-inline: 10px;
        font-size: 0.61rem;
    }

    .game_faq_answer {
        padding: 0 10px 10px;
        font-size: 0.58rem;
    }

    /* Gameplay video */

    .game_video_section {
        padding: 17px 0 0;
        margin-top: 4px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .game_section_heading {
        margin-bottom: 8px;
    }

    .game_section_heading > span {
        font-size: 0.54rem;
    }

    .game_video_section h2 {
        font-size: 0.85rem;
    }

    .game_video_poster {
        border-radius: 7px;
    }

    .game_video_play_icon {
        width: 39px;
        height: 39px;
    }

    .game_video_play_icon .icon {
        width: 17px;
        height: 17px;
    }

    .game_store_badges {
        gap: 6px;
        margin-top: 8px;
    }

    .game_store_badges a {
        min-height: 29px;
        padding: 6px 10px;
        font-size: 0.54rem;
    }
}

@media (max-width: 480px) {
    .game_player_stage {
        min-height: 0;
    }

    .game_content_card {
        padding-inline: 0;
    }

    .game_share_field {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .game_mobile_recommendation_grid {
        gap: 5px;
    }

    .game_mobile_recommendation_grid .game_recommendation_card span {
        font-size: 0.48rem;
    }
}

/* Only React/runtime helpers. Original visual CSS stays in the three original CSS files. */
button, a, select, input { font: inherit; }
.page-progress{position:fixed;z-index:5000;top:0;right:0;left:0;height:3px;pointer-events:none;opacity:0;transition:opacity .18s ease}.page-progress.visible{opacity:1}.page-progress span{display:block;height:100%;width:0;border-radius:0 999px 999px 0;background:linear-gradient(90deg,#6d5dfc,#49b8ff,#8b5cf6);box-shadow:0 0 13px rgba(91,123,255,.8);transition:width .22s cubic-bezier(.2,.7,.2,1)}
a { color: inherit; }
.game-card-link { color: inherit; display: block; text-decoration: none; }
.game-grid-filtered { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.quick-category-card { text-decoration: none; }
.originals-heading, .original-game-card, .top-game-card, .all-link { text-decoration: none; }
.drawer-backdrop { border: 0; padding: 0; }
.spa-state { min-height: 420px; display: grid; place-items: center; align-content: center; gap: 14px; text-align: center; color: var(--text, #f4f7fb); }
.spa-state p { max-width: 580px; color: var(--muted, #98a2b3); margin: 0; }
.spa-state h1 { font-size: clamp(64px, 12vw, 130px); line-height: .8; margin: 0; opacity: .18; }
.spa-state h2, .spa-state strong { margin: 0; }
.spa-spinner { width: 42px; height: 42px; border: 4px solid rgba(255,255,255,.14); border-top-color: currentColor; border-radius: 999px; animation: spa-spin .8s linear infinite; }
.spa-state-icon { width: 44px; height: 44px; }
@keyframes spa-spin { to { transform: rotate(360deg); } }
.category_game_card { color: inherit; text-decoration: none; }
.category_pagination button { display: inline-flex; align-items: center; gap: 6px; }
.category_infinite_status { min-height: 72px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted, #98a2b3); font-size: 13px; }
.category_infinite_loading { display: inline-flex; align-items: center; gap: 10px; }
.category_infinite_status button { border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.05); color: inherit; padding: 10px 15px; cursor: pointer; }
.category_infinite_spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.16); border-top-color: currentColor; border-radius: 50%; animation: spa-spin .8s linear infinite; }
.category_header_art > svg { width: 74px; height: 74px; position: relative; z-index: 2; }
.game_content_root { min-height: 60vh; }
.game_recommendation_card { text-decoration: none; }
.game_recommendation_card img { object-fit: cover; }
.game_mobile_recommendation_grid a { color: inherit; text-decoration: none; }
.game_player_iframe.is-visible { opacity: 1; visibility: visible; }
.game_player_stage:fullscreen { width: 100vw; height: 100vh; background: #05070b; }
.game_player_stage:fullscreen .game_player_iframe { width: 100%; height: 100%; }
.game_small_action.active, .favorite-btn.active { color: #ff5370; }
.free-game-category-card { flex: 0 0 175px; min-height: 150px; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; text-decoration: none; background: rgba(255,255,255,.035); transition: transform .2s ease, border-color .2s ease; }
.free-game-category-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.18); }
.free-game-category-icon { font-size: 34px; margin-bottom: auto; }
.free-game-category-card span:last-child { opacity: .65; font-size: 13px; }

@media (max-width: 760px) {
  .game-grid-filtered { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .search-shortcut { display: none; }
}

.app-root, .home-sections-root, .category-results-wrap { display: contents; }

/* Phase 4 player engagement — follows the existing dark/blue Arcadia theme. */
.phase4_badge_row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}.phase4_game_badge{display:inline-flex;align-items:center;min-height:25px;padding:4px 10px;border:1px solid rgba(111,139,255,.25);border-radius:999px;background:rgba(78,111,232,.13);color:#b9c8ff;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.phase4_game_badge.new{background:rgba(53,207,124,.12);border-color:rgba(53,207,124,.24);color:#83e7af}.phase4_game_badge.popular,.phase4_game_badge.hot{background:rgba(255,132,76,.12);border-color:rgba(255,132,76,.25);color:#ffb08b}.phase4_game_badge.featured{background:rgba(160,110,255,.13);border-color:rgba(160,110,255,.28);color:#cdb4ff}.game_start_content>.phase4_game_badge{margin:0 auto 7px}.phase4_rating_box{min-width:230px}.phase4_stars{display:flex;align-items:center;justify-content:center;gap:3px;margin-top:9px}.phase4_star{width:31px;height:31px;padding:5px;border:0;border-radius:8px;background:rgba(255,255,255,.045);color:#5f6877;display:grid;place-items:center;cursor:pointer;transition:transform .15s ease,color .15s ease,background .15s ease}.phase4_star svg{width:18px;height:18px;fill:currentColor;stroke:currentColor}.phase4_star:hover:not(:disabled){transform:translateY(-2px);background:rgba(255,196,72,.13);color:#ffc94d}.phase4_star.average,.phase4_star.selected{color:#ffc94d;background:rgba(255,196,72,.1)}.phase4_star.selected{box-shadow:inset 0 0 0 1px rgba(255,201,77,.2)}.phase4_star:disabled{cursor:default}.phase4_your_vote{display:block;margin-top:7px;color:rgba(255,255,255,.55);font-size:10px}.phase4_reaction_panel{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:20px 0 25px;padding:17px;border:1px solid rgba(100,128,255,.16);border-radius:16px;background:linear-gradient(135deg,rgba(77,106,215,.1),rgba(255,255,255,.025))}.phase4_reaction_copy{display:flex;align-items:center;gap:12px;min-width:0}.phase4_reaction_copy h3{margin:0 0 3px;font-size:15px}.phase4_reaction_copy p{margin:0;color:rgba(255,255,255,.55);font-size:11px}.phase4_engagement_icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(85,116,235,.16);color:#aabaff;flex:none}.phase4_engagement_icon svg{width:19px;height:19px}.phase4_reaction_actions{display:flex;gap:8px}.phase4_reaction_button{height:42px;min-width:106px;padding:0 12px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.04);color:#b7c0cf;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;font-weight:800;transition:.16s}.phase4_reaction_button svg{width:17px;height:17px}.phase4_reaction_button strong{min-width:22px;padding-left:7px;border-left:1px solid rgba(255,255,255,.09);font-size:11px}.phase4_reaction_button.like:hover:not(:disabled),.phase4_reaction_button.like.active{background:rgba(53,207,124,.11);border-color:rgba(53,207,124,.25);color:#7ce3aa}.phase4_reaction_button.dislike:hover:not(:disabled),.phase4_reaction_button.dislike.active{background:rgba(255,97,120,.1);border-color:rgba(255,97,120,.24);color:#ff8da0}.phase4_reaction_button:disabled{cursor:default}.phase4_comments_panel{margin-top:22px;padding:24px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(180deg,rgba(18,22,32,.98),rgba(12,15,22,.98));box-shadow:0 22px 60px rgba(0,0,0,.17)}.phase4_comments_header{display:flex;justify-content:space-between;gap:18px;margin-bottom:18px}.phase4_comments_header h2{margin:6px 0 4px;font-size:24px;letter-spacing:-.025em}.phase4_comments_header p{margin:0;color:rgba(255,255,255,.55);font-size:12px}.phase4_section_kicker{display:inline-flex;align-items:center;gap:6px;color:#93a9ff;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.phase4_section_kicker svg{width:14px;height:14px}.phase4_comment_form{display:grid;gap:12px;margin-bottom:21px;padding:16px;border:1px solid rgba(255,255,255,.075);border-radius:15px;background:rgba(255,255,255,.022)}.phase4_comment_form_grid{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:12px}.phase4_comment_form label{display:grid;gap:6px;color:#cbd2dd;font-size:11px;font-weight:800}.phase4_comment_form input,.phase4_comment_form textarea{width:100%;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#090c12;color:#f4f7fb;padding:11px 12px;outline:none;resize:vertical}.phase4_comment_form input:focus,.phase4_comment_form textarea:focus{border-color:#6684ff;box-shadow:0 0 0 3px rgba(79,117,255,.11)}.phase4_comment_form_footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.phase4_comment_form_footer small{color:rgba(255,255,255,.42)}.phase4_submit_button{min-height:41px;padding:0 16px;border:1px solid rgba(111,139,255,.25);border-radius:10px;background:linear-gradient(135deg,#607eff,#4967dc);color:#fff;display:inline-flex;align-items:center;gap:8px;font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(60,88,210,.22)}.phase4_submit_button svg{width:16px;height:16px}.phase4_submit_button:disabled{opacity:.55;cursor:wait}.phase4_honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.phase4_comment_list{display:grid;gap:10px}.phase4_comment{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:14px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(255,255,255,.018)}.phase4_comment_avatar{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#526fdf,#2c418e);display:grid;place-items:center;color:#fff;font-weight:950;box-shadow:inset 0 1px rgba(255,255,255,.18)}.phase4_comment_content{min-width:0}.phase4_comment_content header{display:flex;align-items:center;justify-content:space-between;gap:10px}.phase4_comment_content strong{font-size:12px}.phase4_comment_content time{color:rgba(255,255,255,.4);font-size:10px}.phase4_comment_content p{margin:6px 0 0;color:#c2c9d5;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}.phase4_comments_state{padding:24px;border:1px dashed rgba(255,255,255,.1);border-radius:13px;color:rgba(255,255,255,.5);text-align:center}.phase4_comments_state.error{color:#ff91a2}.phase4_comments_state button{margin-left:8px;border:0;background:transparent;color:#9cb0ff;text-decoration:underline;cursor:pointer}.phase4_comments_pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}.phase4_comments_pagination button{height:35px;padding:0 13px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:rgba(255,255,255,.035);color:#d4d9e3;cursor:pointer}.phase4_comments_pagination button:disabled{opacity:.35;cursor:default}.phase4_comments_pagination span{color:rgba(255,255,255,.48);font-size:11px}

/* Keep the five compact rating stars from inheriting the original full-width rating button rule. */
.game_rating_box .phase4_star{width:31px;min-width:31px;min-height:31px;height:31px;padding:5px;border-radius:8px;background:rgba(255,255,255,.045);color:#5f6877;font-size:inherit;font-weight:inherit}
@media(max-width:760px){.phase4_reaction_panel{align-items:stretch;flex-direction:column}.phase4_reaction_actions{display:grid;grid-template-columns:1fr 1fr}.phase4_reaction_button{min-width:0}.phase4_comments_panel{padding:17px}.phase4_comment_form_grid{grid-template-columns:1fr}.phase4_comments_header h2{font-size:21px}.phase4_rating_box{min-width:0;width:100%}.phase4_stars{justify-content:flex-start}.phase4_comment_content header{align-items:flex-start;flex-direction:column;gap:1px}}

/* Phase 5: editable engagement UX, honest rating display and Poppins typography */
html,body,button,input,textarea,select{font-family:"Poppins",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.game-rating.no-rating,.hero-rating.no-rating,.game_start_rating.no-rating{color:rgba(255,255,255,.58)}
.game-rating.no-rating{font-size:10px;font-weight:650}.game-rating.has-rating{color:#ffd46a}.hero-rating.no-rating svg,.game_start_rating.no-rating svg{width:15px;height:15px;fill:none;stroke:currentColor}

.phase5_rating_box{position:relative;isolation:isolate;min-width:330px;overflow:hidden;padding:18px!important;border:1px solid rgba(255,204,86,.22)!important;border-radius:18px!important;background:linear-gradient(145deg,rgba(255,194,55,.095),rgba(89,106,255,.075) 52%,rgba(12,15,23,.96))!important;box-shadow:0 18px 46px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.055)!important;text-align:left!important}
.phase5_rating_glow{position:absolute;z-index:-1;right:-70px;top:-80px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(255,197,59,.18),transparent 70%);pointer-events:none}
.phase5_rating_top{display:flex;align-items:center;gap:15px}.phase5_score{position:relative;flex:none;width:92px;height:92px;border:1px solid rgba(255,205,85,.24);border-radius:25px;background:linear-gradient(145deg,rgba(255,198,61,.16),rgba(255,255,255,.035));display:flex;align-items:center;justify-content:center;gap:2px;box-shadow:inset 0 1px rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.16)}
.phase5_score_star{position:absolute;top:8px;left:10px;color:#ffd05e;font-size:15px;text-shadow:0 0 16px rgba(255,197,49,.45)}.phase5_score strong{font-size:31px;line-height:1;color:#fff;letter-spacing:-.055em}.phase5_score small{align-self:flex-end;margin-bottom:25px;color:rgba(255,255,255,.48);font-size:10px;font-weight:700}
.phase5_rating_copy{min-width:0}.phase5_rating_kicker{display:block;margin-bottom:3px;color:#ffd369;font-size:9px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.phase5_rating_copy>strong{display:block;color:#f5f7fb;font-size:13px;line-height:1.35}.phase5_rating_copy p{margin:4px 0 0;color:rgba(255,255,255,.48);font-size:10px;line-height:1.55}
.phase5_stars{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:15px}.game_rating_box .phase5_star,.phase5_star{position:relative;width:48px;min-width:48px;height:45px;min-height:45px;padding:0;border:1px solid rgba(255,255,255,.075);border-radius:13px;background:rgba(255,255,255,.035);color:#596171;display:grid;place-items:center;cursor:pointer;transition:transform .18s ease,color .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.phase5_star svg{width:23px;height:23px;fill:currentColor;stroke:currentColor;transition:transform .18s ease}.phase5_star:hover:not(:disabled),.phase5_star:focus-visible:not(:disabled){transform:translateY(-3px) scale(1.045);border-color:rgba(255,202,72,.28);background:rgba(255,196,52,.11);color:#ffd15b;box-shadow:0 9px 22px rgba(255,176,27,.11);outline:none}.phase5_star.selected{color:#ffd15b;background:linear-gradient(145deg,rgba(255,200,66,.16),rgba(255,255,255,.035));border-color:rgba(255,206,90,.22)}.phase5_star.current{box-shadow:0 0 0 2px rgba(255,203,70,.14),0 9px 24px rgba(255,171,21,.13)}.phase5_star.current:after{content:"";position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:#ffd15b;box-shadow:0 0 9px rgba(255,209,91,.8)}.phase5_star:disabled{cursor:wait;opacity:.65}
.phase5_vote_status{min-height:25px;margin-top:9px;padding:6px 9px;border:1px solid rgba(255,255,255,.06);border-radius:9px;background:rgba(0,0,0,.14);color:rgba(255,255,255,.54);display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:9.5px;font-weight:650}.phase5_vote_status.has-vote{color:#f8d676;border-color:rgba(255,204,80,.13);background:rgba(255,198,55,.055)}
.phase5_rating_distribution{display:grid;gap:4px;margin-top:11px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}.phase5_rating_bar{display:grid;grid-template-columns:10px 11px minmax(0,1fr) 20px;align-items:center;gap:5px;color:rgba(255,255,255,.43);font-size:8px}.phase5_rating_bar svg{width:9px;height:9px;color:#f9c854;fill:currentColor;stroke:currentColor}.phase5_rating_bar strong{text-align:right;font-size:8px;font-weight:700}.phase5_rating_track{height:4px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.065)}.phase5_rating_track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f6b934,#ffe085);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.phase5_inline_loader{width:13px;height:13px;border:2px solid rgba(255,255,255,.2);border-top-color:#ffd15b;border-radius:50%;animation:phase5Spin .65s linear infinite;flex:none}
.phase5_rating_box.is-updated{animation:phase5RatingPulse .62s ease}.phase5_rating_box.is-updated .phase5_score strong{animation:phase5NumberPop .52s ease}

.phase5_reaction_panel{position:relative;margin:20px 0 25px;padding:18px;border:1px solid rgba(94,124,255,.16);border-radius:18px;background:linear-gradient(135deg,rgba(77,105,216,.105),rgba(255,255,255,.025));overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.035)}.phase5_reaction_head{display:flex;align-items:center;justify-content:space-between;gap:18px}.phase5_reaction_score{flex:none;min-width:78px;text-align:right}.phase5_reaction_score strong{display:block;color:#77e2a6;font-size:18px;line-height:1}.phase5_reaction_score span{display:block;margin-top:3px;color:rgba(255,255,255,.42);font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}.phase5_reaction_score.empty strong{color:rgba(255,255,255,.35)}
.phase5_reaction_actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.phase5_reaction_button{height:58px;padding:0 13px;border:1px solid rgba(255,255,255,.085);border-radius:14px;background:rgba(255,255,255,.034);color:#bdc5d2;display:grid;grid-template-columns:35px minmax(0,1fr) auto;align-items:center;gap:9px;cursor:pointer;text-align:left;transition:transform .17s ease,border-color .17s ease,background .17s ease,color .17s ease,box-shadow .17s ease}.phase5_reaction_button:hover:not(:disabled){transform:translateY(-2px)}.phase5_reaction_icon{width:35px;height:35px;border-radius:10px;background:rgba(255,255,255,.045);display:grid;place-items:center}.phase5_reaction_icon svg{width:18px;height:18px}.phase5_reaction_label{display:grid;gap:1px;font-size:11px;font-weight:850}.phase5_reaction_label small{color:rgba(255,255,255,.4);font-size:8px;font-weight:600}.phase5_reaction_button>strong{min-width:30px;padding-left:9px;border-left:1px solid rgba(255,255,255,.075);text-align:right;font-size:12px}.phase5_reaction_button.like:hover,.phase5_reaction_button.like.active{color:#83e8b0;border-color:rgba(53,207,124,.28);background:linear-gradient(145deg,rgba(53,207,124,.12),rgba(255,255,255,.025));box-shadow:0 12px 28px rgba(22,155,84,.08)}.phase5_reaction_button.dislike:hover,.phase5_reaction_button.dislike.active{color:#ff95a7;border-color:rgba(255,97,120,.27);background:linear-gradient(145deg,rgba(255,97,120,.105),rgba(255,255,255,.025));box-shadow:0 12px 28px rgba(202,45,70,.07)}.phase5_reaction_button.active .phase5_reaction_icon{background:currentColor;color:#0e1118}.phase5_reaction_button:disabled{cursor:wait;opacity:.65}
.phase5_sentiment_bar{height:5px;margin-top:12px;overflow:hidden;border-radius:99px;background:linear-gradient(90deg,rgba(255,97,120,.32),rgba(255,97,120,.1))}.phase5_sentiment_bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#35cf7c,#75e4a8);transition:width .5s cubic-bezier(.2,.8,.2,1)}.phase5_reaction_saving{position:absolute;right:15px;bottom:6px;color:rgba(255,255,255,.48);display:flex;align-items:center;gap:6px;font-size:8px}.phase5_reaction_panel.is-updated{animation:phase5ReactionPulse .62s ease}.phase5_reaction_panel.is-updated .phase5_reaction_button.active{animation:phase5ButtonPop .48s ease}

.phase4_comments_panel,.phase4_comment_form,.phase4_comment{transition:border-color .2s ease,background .2s ease,transform .2s ease}.phase4_comment{animation:phase5CommentIn .36s both}.phase4_comment:hover{transform:translateY(-1px);border-color:rgba(100,128,255,.14);background:rgba(255,255,255,.025)}.phase4_submit_button{transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.phase4_submit_button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 14px 30px rgba(60,88,210,.3)}

@keyframes phase5Spin{to{transform:rotate(360deg)}}@keyframes phase5RatingPulse{0%,100%{box-shadow:0 18px 46px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.055)}45%{box-shadow:0 18px 52px rgba(255,177,30,.13),0 0 0 3px rgba(255,204,78,.08),inset 0 1px rgba(255,255,255,.075)}}@keyframes phase5ReactionPulse{45%{border-color:rgba(101,132,255,.38);box-shadow:0 0 0 3px rgba(84,113,230,.08)}}@keyframes phase5NumberPop{50%{transform:scale(1.16);color:#ffe18d}}@keyframes phase5ButtonPop{45%{transform:scale(1.025)}}@keyframes phase5CommentIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:960px){.phase5_rating_box{min-width:295px}.phase5_score{width:82px;height:82px}.game_rating_box .phase5_star,.phase5_star{width:43px;min-width:43px}}
@media(max-width:760px){.phase5_rating_box{width:100%;min-width:0}.phase5_rating_top{align-items:flex-start}.phase5_stars{justify-content:flex-start}.game_rating_box .phase5_star,.phase5_star{width:46px;min-width:46px}.phase5_reaction_head{align-items:flex-start}.phase5_reaction_actions{grid-template-columns:1fr 1fr}.phase5_reaction_button{grid-template-columns:32px minmax(0,1fr) auto;padding:0 9px}.phase5_reaction_score{min-width:65px}.phase4_comments_panel{animation:phase5CommentIn .42s both}}
@media(max-width:460px){.phase5_score{width:76px;height:76px;border-radius:21px}.phase5_score strong{font-size:26px}.phase5_rating_copy>strong{font-size:11px}.game_rating_box .phase5_star,.phase5_star{width:calc((100vw - 106px)/5);min-width:39px;max-width:47px;height:43px}.phase5_reaction_actions{grid-template-columns:1fr}.phase5_reaction_button{height:55px}.phase5_rating_distribution{display:none}}
@media(prefers-reduced-motion:reduce){.phase5_rating_box,.phase5_reaction_panel,.phase5_star,.phase5_reaction_button,.phase4_comment,.phase4_submit_button,.phase5_rating_track i,.phase5_sentiment_bar span{animation:none!important;transition:none!important}.phase5_inline_loader{animation-duration:1.4s}}
.phase5_reaction_button.active .phase5_reaction_icon{color:#0e1118}.phase5_reaction_button.like.active .phase5_reaction_icon{background:#83e8b0}.phase5_reaction_button.dislike.active .phase5_reaction_icon{background:#ff95a7}

/* Phase 6: account system, motion polish, responsive player dock, blog and legal pages. */
html,body,button,input,textarea,select{font-family:"Poppins",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.auth-modal-open{overflow:hidden}
.page-enter{animation:phase6PageIn .48s cubic-bezier(.2,.75,.2,1) both}.home-block-enter{animation:phase6BlockIn .5s cubic-bezier(.2,.75,.2,1) both}.filter-enter{animation:phase6FilterIn .34s ease both}.category-card-motion{min-width:0;animation:phase6CardIn .42s cubic-bezier(.2,.75,.2,1) both}.category-card-motion>.category_game_card{height:100%}
@keyframes phase6PageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes phase6BlockIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes phase6FilterIn{from{opacity:.3;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@keyframes phase6CardIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* Header account controls */
.guest-auth-actions{display:flex;align-items:center;gap:8px}.header-user-wrap{position:relative}.header-user-button{height:42px;max-width:210px;padding:4px 10px 4px 5px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.045);color:#eff3fb;display:flex;align-items:center;gap:8px;cursor:pointer;transition:.18s}.header-user-button:hover{border-color:rgba(105,132,255,.3);background:rgba(91,117,232,.1)}.header-user-button>img,.header-user-button>span:first-child{width:32px;height:32px;border-radius:10px;object-fit:cover;display:grid;place-items:center;background:linear-gradient(145deg,#5576f0,#7d56e9);font-size:12px;font-weight:900}.header-user-button>.icon{width:14px;height:14px;transform:rotate(90deg);opacity:.55}.header-user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:800}.header-user-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:90;width:220px;padding:7px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(14,17,25,.98);box-shadow:0 24px 70px rgba(0,0,0,.5);animation:phase6MenuIn .18s ease both}.header-user-menu a,.header-user-menu button{width:100%;min-height:42px;padding:0 11px;border:0;border-radius:10px;background:transparent;color:#c8cfda;display:flex;align-items:center;gap:10px;text-decoration:none;text-align:left;cursor:pointer;font-size:11px;font-weight:750}.header-user-menu a:hover,.header-user-menu button:hover{background:rgba(89,116,232,.13);color:#fff}.header-user-menu .icon{width:17px;height:17px}.header-user-menu button:last-child{color:#ff9aaa}@keyframes phase6MenuIn{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}}

/* Login/sign-up modal */
.auth-modal-layer{position:fixed;inset:0;z-index:1000;padding:20px;display:grid;place-items:center;background:rgba(3,5,9,.76);backdrop-filter:blur(14px);animation:phase6OverlayIn .25s ease both}.auth-modal-layer.is-closing{animation:phase6OverlayOut .22s ease both}.auth-modal{position:relative;width:min(460px,100%);max-height:calc(100vh - 28px);overflow:auto;padding:28px;border:1px solid rgba(125,148,255,.2);border-radius:26px;background:radial-gradient(circle at 100% 0,rgba(80,112,238,.22),transparent 42%),linear-gradient(180deg,#151a26,#0d1119);box-shadow:0 35px 120px rgba(0,0,0,.7);animation:phase6ModalIn .34s cubic-bezier(.2,.8,.2,1) both}.is-closing .auth-modal{animation:phase6ModalOut .2s ease both}.auth-modal-close{position:absolute;right:16px;top:16px;width:37px;height:37px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.045);color:#bcc5d4;display:grid;place-items:center;cursor:pointer}.auth-modal-close:hover{color:#fff;background:rgba(255,255,255,.09)}.auth-modal-close .icon{width:17px;height:17px}.auth-modal-brand{display:flex;align-items:center;gap:9px;color:#c9d4ff;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.auth-modal-logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#5578f1,#7e54ea);display:grid;place-items:center;color:#fff;box-shadow:0 10px 25px rgba(76,103,223,.3)}.auth-modal-logo .icon{width:18px;height:18px}.auth-modal-heading{margin:23px 0 20px}.auth-modal-heading>span{color:#7f96ef;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.09em}.auth-modal-heading h2{margin:5px 0 8px;font-size:clamp(28px,6vw,39px);letter-spacing:-.045em;line-height:1.05}.auth-modal-heading p{margin:0;color:#9099a9;font-size:12px;line-height:1.65}.auth-google-wrap{min-height:44px;display:grid;place-items:center}.auth-google-button{width:100%;min-height:44px;display:grid;place-items:center}.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:#697180;font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.08em}.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:rgba(255,255,255,.08)}.auth-form{display:grid;gap:13px}.auth-form label,.account-form-card label,.contact-form label{display:grid;gap:7px;color:#adb6c5;font-size:10px;font-weight:750}.auth-form input,.account-form-card input,.account-form-card textarea,.contact-form input,.contact-form textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(4,7,12,.52);color:#fff;outline:0;transition:.18s}.account-form-card textarea,.contact-form textarea{min-height:110px;resize:vertical}.auth-form input:focus,.account-form-card input:focus,.account-form-card textarea:focus,.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(100,131,255,.58);box-shadow:0 0 0 4px rgba(81,108,225,.11)}.auth-submit{min-height:50px;margin-top:3px;border:0;border-radius:14px;background:linear-gradient(135deg,#5578ee,#7457e7);color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;font-weight:850;box-shadow:0 15px 32px rgba(71,94,207,.28);transition:.18s}.auth-submit:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.07)}.auth-submit .icon{width:18px;height:18px}.auth-success{padding:10px 12px;border:1px solid rgba(68,211,139,.22);border-radius:11px;background:rgba(55,190,122,.09);color:#8ce0b4;font-size:10px;line-height:1.5}.auth-error{padding:10px 12px;border:1px solid rgba(255,91,114,.22);border-radius:11px;background:rgba(255,74,100,.08);color:#ff9cac;font-size:10px;line-height:1.5}.auth-switch,.auth-legal{text-align:center;color:#838c9c;font-size:10px}.auth-switch{margin:18px 0 0}.auth-switch button{padding:0;border:0;background:none;color:#9eb0ff;cursor:pointer;font-weight:850}.auth-legal{margin:13px 20px 0;line-height:1.55}.auth-legal a{color:#b4c1ff}.auth-modal .phase5_inline_loader{display:inline-block}@keyframes phase6OverlayIn{from{opacity:0}to{opacity:1}}@keyframes phase6OverlayOut{to{opacity:0}}@keyframes phase6ModalIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}@keyframes phase6ModalOut{to{opacity:0;transform:translateY(12px) scale(.97)}}

/* Player dock and mobile exit */
.game_player_stage.is-playing{background:#05070b}.game_mobile_exit{display:none;position:absolute;left:10px;top:10px;z-index:12;min-height:38px;padding:0 12px;border:1px solid rgba(255,255,255,.18);border-radius:11px;background:rgba(7,10,16,.78);backdrop-filter:blur(9px);color:#fff;align-items:center;gap:7px;cursor:grab;font-size:10px;font-weight:800;touch-action:none;user-select:none;-webkit-user-select:none}.game_mobile_exit .icon{width:16px;height:16px}.phase6_player_dock{min-height:62px;padding:9px 12px;background:linear-gradient(180deg,rgba(18,22,31,.98),rgba(10,13,19,.98));border-top:1px solid rgba(255,255,255,.07)}.phase6_player_dock .game_toolbar_info>span:last-child{display:grid;gap:1px}.phase6_player_dock .game_toolbar_info small{color:#747e8e;font-size:8px;font-weight:600}.phase6_player_dock .game_toolbar_actions{display:flex;align-items:center;gap:7px}.game_dock_button{min-height:40px;padding:0 12px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.035);color:#b8c1cf;display:flex;align-items:center;gap:7px;cursor:pointer;font-size:9px;font-weight:800;transition:.17s}.game_dock_button:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(104,134,255,.25);background:rgba(87,115,229,.11);color:#fff}.game_dock_button.primary{background:linear-gradient(135deg,#5273e9,#6c54dc);border-color:transparent;color:#fff}.game_dock_button.exit{color:#ff9aaa}.game_dock_button:disabled{opacity:.38;cursor:not-allowed}.game_dock_button .icon{width:16px;height:16px}.game_below_recommendations{margin-top:18px;padding:17px;border:1px solid rgba(255,255,255,.075);border-radius:18px;background:rgba(255,255,255,.022)}.game_below_recommendation_grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:13px}.game_below_recommendation_grid .game_recommendation_card{min-width:0}.game_below_recommendation_grid .game_recommendation_card img{aspect-ratio:1.22/1;width:100%;border-radius:10px}.game_below_recommendation_grid .game_recommendation_card span{display:block;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:750}

/* Rating interaction fix */
.phase6_star_glyph{display:block;font-family:Arial,sans-serif;font-size:27px;line-height:1;transform:translateY(-1px);filter:drop-shadow(0 4px 7px rgba(255,181,20,.08))}.phase5_star.selected .phase6_star_glyph{filter:drop-shadow(0 5px 10px rgba(255,183,25,.3))}.phase5_star.current .phase6_star_glyph{animation:phase6StarPop .28s ease}@keyframes phase6StarPop{50%{transform:translateY(-2px) scale(1.2)}}.comment-signed-in{min-height:46px;padding:0 13px;border:1px solid rgba(90,122,244,.17);border-radius:12px;background:rgba(77,105,216,.08);display:flex;align-items:center;gap:9px;color:#aab8ea;font-size:10px}.comment-signed-in .icon{width:17px;height:17px}.phase4_comment_avatar img{width:100%;height:100%;border-radius:inherit;object-fit:cover}

/* Account area */
.account-page{padding-top:24px}.account-login-gate{min-height:520px;display:grid;place-items:center;align-content:center;gap:13px;text-align:center}.account-login-gate h1{margin:0;font-size:clamp(30px,5vw,52px)}.account-login-gate p{max-width:560px;margin:0 0 8px;color:#8d96a6;line-height:1.7}.account-gate-icon{width:72px;height:72px;border-radius:23px;background:linear-gradient(145deg,rgba(84,117,238,.22),rgba(117,78,222,.15));color:#9db1ff;display:grid;place-items:center}.account-gate-icon .icon{width:31px;height:31px}.account-hero{padding:26px;border:1px solid rgba(255,255,255,.08);border-radius:23px;background:radial-gradient(circle at 88% 10%,rgba(80,111,235,.22),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px}.account-avatar{width:76px;height:76px;border-radius:23px;overflow:hidden;background:linear-gradient(145deg,#5679ef,#8154e6);display:grid;place-items:center;color:#fff;font-size:27px;font-weight:900;box-shadow:0 16px 35px rgba(72,95,211,.28)}.account-avatar img{width:100%;height:100%;object-fit:cover}.account-hero h1{margin:3px 0 5px;font-size:clamp(25px,4vw,40px);letter-spacing:-.04em}.account-hero p,.account-hero span{margin:0;color:#929bac;font-size:10px}.account-tabs{display:flex;gap:7px;margin:17px 0;overflow:auto;scrollbar-width:none}.account-tabs button{flex:none;min-height:39px;padding:0 13px;border:1px solid rgba(255,255,255,.075);border-radius:11px;background:rgba(255,255,255,.025);color:#8993a3;display:flex;align-items:center;gap:7px;cursor:pointer;font-size:9px;font-weight:800}.account-tabs button.active{border-color:rgba(92,123,244,.32);background:rgba(76,105,218,.13);color:#c7d1ff}.account-tabs .icon{width:15px;height:15px}.account-panel{min-height:330px}.account-stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.account-stat-grid article{padding:17px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.025)}.account-stat-grid strong{display:block;font-size:25px}.account-stat-grid span{color:#7f8998;font-size:9px;text-transform:capitalize}.account-overview-section{margin-top:23px}.account-game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.account-game-item{min-width:0;position:relative;animation:phase6CardIn .4s both}.account-rating-chip{position:absolute;left:9px;top:9px;z-index:3;padding:5px 8px;border-radius:8px;background:rgba(7,10,16,.86);color:#ffd66c;font-size:8px;font-weight:850}.account-empty{min-height:300px;display:grid;place-items:center;align-content:center;gap:8px;text-align:center;color:#8b95a5}.account-empty>.icon{width:38px;height:38px;color:#7588dc}.account-empty h3,.account-empty p{margin:0}.account-empty p{font-size:10px}.account-comment-list{display:grid;gap:9px}.account-comment-card{padding:13px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.024);display:grid;grid-template-columns:65px minmax(0,1fr);gap:13px;text-decoration:none;transition:.18s}.account-comment-card:hover{transform:translateY(-2px);border-color:rgba(92,124,242,.25)}.account-comment-card img{width:65px;height:65px;border-radius:11px;object-fit:cover}.account-comment-card strong{display:block}.account-comment-card p{margin:4px 0;color:#9aa3b1;font-size:10px}.account-comment-card small{color:#697383;font-size:8px;text-transform:capitalize}.account-settings-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:15px}.account-form-card{padding:21px;border:1px solid rgba(255,255,255,.075);border-radius:18px;background:rgba(255,255,255,.023);display:grid;gap:12px}.account-form-card h2{margin:0 0 4px;font-size:18px}

/* Blog, policy and contact */
.home-blog-section{margin-top:28px}.home-blog-grid,.blog-page-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.blog-card{min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.075);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.018));color:inherit;text-decoration:none;display:flex;flex-direction:column;animation:phase6CardIn .45s both;transition:.2s}.blog-card:hover{transform:translateY(-5px);border-color:rgba(93,124,245,.28);box-shadow:0 20px 48px rgba(0,0,0,.24)}.blog-card>img,.blog-card-art{width:100%;aspect-ratio:1.8/1;object-fit:cover}.blog-card-art{display:grid;place-items:center;background:radial-gradient(circle at 75% 25%,rgba(119,80,225,.35),transparent 28%),linear-gradient(135deg,#243257,#171d2b);color:#9db1ff}.blog-card-art .icon{width:39px;height:39px}.blog-card-body{padding:17px;display:flex;flex-direction:column;flex:1}.blog-card-body small{color:#748096;font-size:8px}.blog-card-body>strong{margin:7px 0;font-size:16px;line-height:1.32}.blog-card-body p{margin:0;color:#8993a3;font-size:10px;line-height:1.65}.blog-card-link{margin-top:auto;padding-top:13px;color:#9eaff4;font-size:9px;font-weight:850;display:flex;align-items:center;gap:5px}.blog-card-link .icon{width:13px;height:13px}.editorial-page{padding-top:28px}.editorial-hero{max-width:760px;margin:0 auto 28px;text-align:center}.editorial-hero>span,.article-page header>span,.policy-page header>span,.contact-copy>span{color:#8399ed;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.11em}.editorial-hero h1,.article-page h1,.policy-page h1,.contact-copy h1{margin:7px 0 11px;font-size:clamp(32px,6vw,60px);letter-spacing:-.055em;line-height:1.05}.editorial-hero p,.article-page header p,.contact-copy>p{margin:0;color:#8c96a7;line-height:1.7}.article-page,.policy-page{max-width:870px;margin:auto;padding:clamp(22px,5vw,55px);border:1px solid rgba(255,255,255,.075);border-radius:24px;background:rgba(255,255,255,.022)}.article-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:26px;color:#9aacf2;text-decoration:none;font-size:10px;font-weight:800}.article-back .icon{width:16px;height:16px}.article-cover{width:100%;max-height:460px;object-fit:cover;margin:25px 0;border-radius:18px}.article-content{color:#afb7c4;font-size:13px;line-height:1.9}.article-content p{margin:0 0 20px}.contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px;max-width:1000px;margin:auto}.contact-copy,.contact-form{padding:28px;border:1px solid rgba(255,255,255,.075);border-radius:22px;background:rgba(255,255,255,.022)}.contact-copy{background:radial-gradient(circle at 0 100%,rgba(73,106,228,.22),transparent 42%),rgba(255,255,255,.022)}.contact-note{margin-top:28px;padding:14px;border:1px solid rgba(99,129,244,.18);border-radius:14px;background:rgba(74,103,215,.08);display:flex;gap:11px}.contact-note .icon{width:21px;height:21px;color:#9aacf3;flex:none}.contact-note strong{font-size:11px}.contact-note p{margin:4px 0 0;color:#8c96a6;font-size:9px;line-height:1.55}.contact-form{display:grid;gap:13px}.contact-success{padding:11px;border:1px solid rgba(60,207,127,.2);border-radius:11px;background:rgba(49,193,112,.08);color:#83e8af;font-size:10px}

@media(max-width:1100px){.game_below_recommendation_grid{grid-template-columns:repeat(4,minmax(0,1fr))}.account-game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.account-stat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.guest-auth-actions .login-btn{display:none}.header-user-name{display:none}.header-user-button{padding-right:5px}.header-user-button>.icon{display:none}.auth-modal-layer{padding:9px}.auth-modal{padding:23px 18px;border-radius:22px}.game_mobile_exit{display:flex}.phase6_player_dock{min-height:52px;padding:7px}.phase6_player_dock .game_toolbar_info{display:none}.phase6_player_dock .game_toolbar_actions{width:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.game_dock_button{min-width:0;padding:0;justify-content:center}.game_dock_button span{display:none}.game_dock_button .icon{width:17px;height:17px}.game_below_recommendation_grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.game_recommendation_sidebar{display:none!important}.account-hero{grid-template-columns:auto minmax(0,1fr);padding:18px}.account-hero>.btn{grid-column:1/-1}.account-avatar{width:60px;height:60px;border-radius:18px}.account-stat-grid{grid-template-columns:repeat(2,1fr)}.account-game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.account-settings-grid,.contact-layout{grid-template-columns:1fr}.home-blog-grid,.blog-page-grid{grid-template-columns:1fr 1fr;gap:10px}.article-page,.policy-page{padding:23px 17px}.contact-copy,.contact-form{padding:20px}.phase5_star .phase6_star_glyph{font-size:25px}}
@media(max-width:480px){.home-blog-grid,.blog-page-grid{grid-template-columns:1fr}.game_below_recommendation_grid{grid-template-columns:repeat(3,minmax(0,1fr))}.game_below_recommendation_grid .game_recommendation_card span{font-size:7.5px}.account-tabs{margin-inline:-14px;padding-inline:14px}.account-comment-card{grid-template-columns:48px minmax(0,1fr)}.account-comment-card img{width:48px;height:48px}.auth-modal-heading h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){.page-enter,.home-block-enter,.filter-enter,.category-card-motion,.blog-card,.account-game-item,.auth-modal-layer,.auth-modal,.header-user-menu{animation:none!important}.blog-card,.game_dock_button,.auth-submit{transition:none!important}}


/* Phase 6 stability overrides */
.home-sections-root.dynamic-home-sections,.category-results-wrap{display:block;min-width:0}.home-page{overflow:hidden}.home-sections-root.dynamic-home-sections>*{min-width:0}.game-grid-filtered>.category-card-motion>.game-card-link{height:100%}
.comment-login-gate{margin-bottom:21px;padding:16px;border:1px solid rgba(91,123,245,.18);border-radius:15px;background:linear-gradient(135deg,rgba(75,105,218,.11),rgba(255,255,255,.02));display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px}.comment-login-icon{width:42px;height:42px;border-radius:12px;background:rgba(91,120,233,.15);color:#a8b7f4;display:grid;place-items:center}.comment-login-icon .icon{width:20px;height:20px}.comment-login-gate strong{display:block;font-size:12px}.comment-login-gate p{margin:3px 0 0;color:#858f9f;font-size:9px}.comment-login-gate .btn{white-space:nowrap}
@media(max-width:620px){.comment-login-gate{grid-template-columns:auto minmax(0,1fr)}.comment-login-gate .btn{grid-column:1/-1;width:100%}}

/* =========================================================
   Phase 6.1 stability and player UX hotfix
========================================================= */

/* Category cards must remain direct grid children. The old animation wrapper
   changed the original card sizing and mobile layout. */
.category_game_grid > .category_game_card.category-card-motion {
    width: 100%;
    height: auto;
    min-height: 0;
    animation: phase6CardIn .42s cubic-bezier(.2,.75,.2,1) both;
}
.category_game_card .category_game_image { display:block; }
.category_game_rating_badge { position:absolute;z-index:4;right:6px;bottom:6px;display:inline-flex;align-items:center;gap:3px;min-height:22px;padding:3px 7px;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:rgba(7,10,16,.86);backdrop-filter:blur(7px);color:#c3cad5;font-size:9px;font-weight:800;line-height:1;box-shadow:0 5px 14px rgba(0,0,0,.25); }
.category_game_rating_badge.has-rating { color:#ffd46a;border-color:rgba(255,212,106,.24); }
.category_game_rating_badge .star { font-size:10px; }

/* Full-width rating layout: never squeeze a 330px card into the old 180px
   sidebar column. */
.phase6_game_content_card { overflow: visible; }
.game_content_header.phase6_content_header {
    display: block;
    grid-template-columns: none;
    gap: 0;
    padding-bottom: 22px;
}
.phase6_engagement_stack {
    display: grid;
    gap: 14px;
    padding: 20px 0 4px;
}
.phase6_rating_card {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(190px,.75fr) minmax(300px,1.25fr) minmax(210px,.8fr);
    align-items: center;
    gap: 22px;
    padding: 22px;
    border: 1px solid rgba(255,204,83,.2);
    border-radius: 20px;
    background:
        radial-gradient(circle at 8% 0,rgba(255,202,64,.14),transparent 32%),
        radial-gradient(circle at 100% 100%,rgba(87,112,237,.14),transparent 35%),
        linear-gradient(145deg,rgba(27,31,43,.98),rgba(13,16,23,.98));
    box-shadow: 0 20px 52px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.045);
}
.phase6_rating_card:before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(120deg,transparent 22%,rgba(255,255,255,.035),transparent 56%);
    transform:translateX(-100%);
}
.phase6_rating_card.is-updated:before { animation:phase61RatingSweep .65s ease; }
.phase6_rating_summary { display:flex;align-items:center;gap:14px;min-width:0; }
.phase6_rating_score {
    flex:none;
    width:88px;
    height:88px;
    border:1px solid rgba(255,205,81,.25);
    border-radius:24px;
    background:linear-gradient(145deg,rgba(255,199,52,.18),rgba(255,255,255,.035));
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px;
    color:#fff;
    box-shadow:inset 0 1px rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.18);
}
.phase6_rating_score>span { color:#ffd15b;font-size:19px;filter:drop-shadow(0 4px 10px rgba(255,190,42,.3)); }
.phase6_rating_score strong { font-size:31px;line-height:1;letter-spacing:-.06em; }
.phase6_rating_score small { align-self:flex-end;margin-bottom:22px;color:#7d8798;font-size:9px; }
.phase6_rating_copy { min-width:0; }
.phase6_rating_copy>span { display:block;margin-bottom:3px;color:#e8b941;font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase; }
.phase6_rating_copy h3 { margin:0;color:#fff;font-size:17px;line-height:1.2;letter-spacing:-.025em; }
.phase6_rating_copy p { margin:5px 0 0;color:#7f899a;font-size:9px;line-height:1.55; }
.phase6_rating_interaction { min-width:0; }
.phase6_rating_stars {
    display:grid;
    grid-template-columns:repeat(5,minmax(44px,1fr));
    gap:8px;
    width:100%;
}
.phase6_rating_star {
    position:relative;
    min-width:0;
    height:54px;
    padding:0;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:rgba(255,255,255,.035);
    color:#505867;
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}
.phase6_rating_star>span { font-family:Arial,sans-serif;font-size:27px;line-height:1;transform:translateY(-1px); }
.phase6_rating_star small { position:absolute;right:6px;bottom:4px;color:rgba(255,255,255,.28);font-size:7px;font-weight:800; }
.phase6_rating_star:hover:not(:disabled) { transform:translateY(-3px) scale(1.02);border-color:rgba(255,202,73,.34); }
.phase6_rating_star.is-active {
    color:#ffd15b;
    border-color:rgba(255,199,54,.42);
    background:linear-gradient(145deg,rgba(255,194,45,.2),rgba(255,255,255,.055));
    box-shadow:0 10px 24px rgba(221,155,18,.12),inset 0 1px rgba(255,255,255,.08);
}
.phase6_rating_star.is-current { outline:2px solid rgba(255,215,111,.2);outline-offset:2px; }
.phase6_rating_star:disabled { cursor:not-allowed;opacity:.62; }
.phase6_rating_status { position:relative;display:grid;gap:2px;margin-top:10px;min-height:31px;padding-right:26px; }
.phase6_rating_status strong { color:#c7ced9;font-size:10px; }
.phase6_rating_status.has-rating strong { color:#ffd66a; }
.phase6_rating_status span { color:#737e8f;font-size:8px;line-height:1.45; }
.phase6_rating_status .phase5_inline_loader { position:absolute;right:0;top:4px; }
.phase6_rating_distribution { display:grid;gap:7px;min-width:0;padding-left:20px;border-left:1px solid rgba(255,255,255,.065); }
.phase6_rating_row { display:grid;grid-template-columns:24px minmax(0,1fr) 28px;align-items:center;gap:8px;color:#6f7989;font-size:8px; }
.phase6_rating_row>span:first-child { color:#9ba4b3;font-weight:750; }
.phase6_rating_row strong { text-align:right;color:#7f8999;font-size:8px; }
.phase6_rating_track { height:6px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.065); }
.phase6_rating_track i { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#efad24,#ffe17c);transition:width .4s cubic-bezier(.2,.8,.2,1); }
@keyframes phase61RatingSweep { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* Desktop player shell keeps the action bar below the iframe in normal and
   browser fullscreen modes. */
.game_player_shell { position:relative;display:flex;flex-direction:column;min-width:0;background:#05070b; }
.game_player_shell .game_player_stage { flex:none;width:100%; }
.game_player_shell:fullscreen,
.game_player_shell:-webkit-full-screen {
    width:100vw;
    height:100vh;
    min-height:100vh;
    background:#000;
    display:flex;
    flex-direction:column;
}
.game_player_shell:fullscreen .game_player_stage,
.game_player_shell:-webkit-full-screen .game_player_stage {
    flex:1 1 auto;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:auto;
    border-radius:0;
}
.game_player_shell:fullscreen .game_player_iframe,
.game_player_shell:-webkit-full-screen .game_player_iframe { width:100%;height:100%; }
.phase6_player_dock { flex:none; }
.game_player_shell:fullscreen .phase6_player_dock,.game_player_shell:-webkit-full-screen .phase6_player_dock { display:none!important; }
.game_dock_button.favorite.active {
    color:#ff7f9b;
    border-color:rgba(255,92,129,.3);
    background:rgba(255,75,113,.12);
    box-shadow:inset 0 1px rgba(255,255,255,.045),0 9px 22px rgba(140,25,58,.1);
}
.game_dock_button.favorite.active .icon { fill:currentColor;stroke:currentColor; }
.game_dock_button.compact { width:40px;min-width:40px;padding:0;justify-content:center; }
.game_dock_restore {
    align-self:flex-end;
    min-height:34px;
    margin:7px 9px 8px;
    padding:0 11px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:10px;
    background:rgba(255,255,255,.04);
    color:#9da7b7;
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    font-size:8px;
    font-weight:800;
    transition:.17s;
}
.game_dock_restore:hover { color:#fff;border-color:rgba(100,132,255,.3);background:rgba(83,111,224,.11); }
.game_dock_restore .icon { width:14px;height:14px; }
.game_small_action.active .icon { color:#ff7695;fill:currentColor;stroke:currentColor; }

/* Share and report dialogs */
.phase6_dialog_backdrop { animation:phase61DialogBackdrop .2s ease both; }
.phase6_action_dialog { overflow:hidden;animation:phase61DialogIn .28s cubic-bezier(.2,.8,.2,1) both; }
.phase6_action_dialog:before { content:"";position:absolute;right:-75px;top:-85px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(83,112,235,.2),transparent 70%);pointer-events:none; }
.phase6_dialog_icon { width:45px;height:45px;margin-bottom:15px;border-radius:14px;display:grid;place-items:center; }
.phase6_dialog_icon .icon { width:21px;height:21px; }
.phase6_dialog_icon.share { color:#aebeff;background:rgba(76,105,220,.14); }
.phase6_dialog_icon.report { color:#ff9aaa;background:rgba(226,64,96,.11); }
.phase6_dialog_primary,.phase6_dialog_secondary {
    min-height:43px;
    padding:0 15px;
    border-radius:11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    font-size:9px;
    font-weight:850;
}
.phase6_dialog_primary { width:100%;margin-top:10px;border:0;color:#fff;background:linear-gradient(135deg,#5578ed,#7254e3);box-shadow:0 12px 26px rgba(68,91,204,.22); }
.phase6_dialog_primary.danger { width:auto;margin-top:0;background:linear-gradient(135deg,#dd4964,#bb3857); }
.phase6_dialog_secondary { border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:#aeb7c5; }
.phase6_dialog_primary .icon,.phase6_dialog_secondary .icon { width:16px;height:16px; }
.phase6_report_form { display:grid;gap:13px;margin-top:18px; }
.phase6_report_form label { display:grid;gap:7px;color:#aab3c1;font-size:9px;font-weight:800; }
.phase6_report_form select,.phase6_report_form textarea {
    width:100%;
    padding:11px 12px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:11px;
    outline:0;
    background:#10141d;
    color:#e8ebf1;
    font:inherit;
}
.phase6_report_form textarea { resize:vertical;min-height:104px; }
.phase6_report_form select:focus,.phase6_report_form textarea:focus { border-color:rgba(94,126,244,.48);box-shadow:0 0 0 4px rgba(75,103,213,.1); }
.phase6_dialog_actions { display:flex;justify-content:flex-end;gap:8px;margin-top:3px; }
@keyframes phase61DialogBackdrop { from{opacity:0}to{opacity:1} }
@keyframes phase61DialogIn { from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none} }

/* Google sign-in remains visible in both modal modes, including a clear setup
   state when the client ID is not configured yet. */
.auth-google-wrap { gap:8px; }
.auth-google-fallback {
    width:min(380px,100%);
    min-height:44px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    background:#15191f;
    color:#e7eaf0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:11px;
    font-weight:750;
    opacity:.72;
}
.auth-google-fallback>span { width:24px;height:24px;border-radius:50%;background:#fff;color:#4285f4;display:grid;place-items:center;font-family:Arial,sans-serif;font-size:15px;font-weight:900; }
.auth-google-error { max-width:380px;color:#eaa9b3;font-size:8px;line-height:1.45;text-align:center; }

@media(max-width:1050px) {
    .phase6_rating_card { grid-template-columns:minmax(180px,.7fr) minmax(280px,1.3fr); }
    .phase6_rating_distribution { grid-column:1/-1;padding:14px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.065);grid-template-columns:repeat(5,1fr);gap:8px; }
    .phase6_rating_row { grid-template-columns:25px minmax(0,1fr) 20px; }
}
@media(max-width:760px) {
    .phase6_player_dock { display:flex!important; }
    .game_dock_restore,.game_dock_button.compact { display:none!important; }
    .game_player_shell:fullscreen .game_player_stage,.game_player_shell:-webkit-full-screen .game_player_stage { height:100%; }
    .phase6_rating_card { grid-template-columns:1fr;gap:16px;padding:17px;border-radius:17px; }
    .phase6_rating_summary { align-items:center; }
    .phase6_rating_score { width:76px;height:76px;border-radius:20px; }
    .phase6_rating_score strong { font-size:27px; }
    .phase6_rating_score small { margin-bottom:18px; }
    .phase6_rating_stars { grid-template-columns:repeat(5,minmax(0,1fr));gap:6px; }
    .phase6_rating_star { height:49px;border-radius:12px; }
    .phase6_rating_star>span { font-size:24px; }
    .phase6_rating_distribution { grid-column:auto;display:grid;grid-template-columns:1fr;gap:6px;padding:13px 0 0;border-top:1px solid rgba(255,255,255,.065); }
    .phase6_rating_row { grid-template-columns:25px minmax(0,1fr) 24px; }
    .phase6_dialog_actions { display:grid;grid-template-columns:1fr 1fr; }
    .phase6_dialog_primary.danger,.phase6_dialog_secondary { width:100%; }
}
@media(max-width:430px) {
    .phase6_rating_card { margin-inline:0;padding:14px; }
    .phase6_rating_score { width:68px;height:68px; }
    .phase6_rating_score strong { font-size:24px; }
    .phase6_rating_copy h3 { font-size:15px; }
    .phase6_rating_star { height:45px; }
    .phase6_rating_star>span { font-size:21px; }
    .phase6_rating_star small { display:none; }
    .game_dialog.phase6_action_dialog { padding:22px 17px; }
    .game_share_field { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
    .phase6_rating_card,.phase6_rating_card:before,.phase6_rating_star,.phase6_dialog_backdrop,.phase6_action_dialog,.game_dock_button,.game_dock_restore { animation:none!important;transition:none!important; }
}

/* =========================================================
   Phase 6.2 account favorites and settings stability
   ========================================================= */
.favorite-btn{transition:transform .18s ease,color .18s ease,background .18s ease,opacity .18s ease}
.favorite-btn .icon{transition:fill .18s ease,stroke .18s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
.favorite-btn.active{color:#ff5576!important;background:rgba(255,75,111,.17)!important;box-shadow:0 8px 22px rgba(255,69,105,.22)}
.favorite-btn.active .icon,.game_small_action.active .icon,.game_dock_button.favorite.active .icon{fill:currentColor;stroke:currentColor;transform:scale(1.08)}
.favorite-btn.login-required:not(.active){color:#a4adbd}
.favorite-btn.login-required:hover{color:#c9d4ff;background:rgba(82,111,229,.18)}
.favorite-btn:disabled{cursor:wait;opacity:.62;transform:scale(.94)}

.account-settings-grid{align-items:start}
.account-form-card{position:relative;overflow:hidden;padding:24px;border-color:rgba(255,255,255,.085);background:linear-gradient(155deg,rgba(255,255,255,.045),rgba(255,255,255,.018));box-shadow:0 22px 60px rgba(0,0,0,.15)}
.account-form-card:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(126,151,255,.55),transparent);opacity:.75}
.account-form-heading{display:flex;align-items:flex-start;gap:13px;margin-bottom:5px}
.account-form-heading h2{margin:0;font-size:19px;line-height:1.2;letter-spacing:-.025em}
.account-form-heading p{margin:5px 0 0;color:#7f8999;font-size:10px;line-height:1.6}
.account-avatar-upload{display:flex;align-items:center;gap:13px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(4,7,12,.38)}.account-avatar-preview{width:58px;height:58px;flex:0 0 58px;overflow:hidden;border-radius:17px;background:linear-gradient(145deg,#5679ef,#8154e6);color:#fff;display:grid;place-items:center}.account-avatar-preview img{width:100%;height:100%;object-fit:cover}.account-avatar-preview .icon{width:24px;height:24px}.account-avatar-picker{position:relative;min-width:0;cursor:pointer}.account-avatar-picker strong,.account-avatar-picker small{display:block}.account-avatar-picker strong{color:#dce3ff;font-size:11px}.account-avatar-picker small{margin-top:4px;color:#7f8999;font-size:9px}.account-avatar-picker input{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none}
.account-form-icon{flex:0 0 auto;width:39px;height:39px;border:1px solid rgba(111,139,255,.18);border-radius:13px;display:grid;place-items:center;color:#9cafef;background:linear-gradient(145deg,rgba(77,106,225,.18),rgba(118,76,218,.1))}
.account-form-icon.password{color:#bca7ff;background:linear-gradient(145deg,rgba(116,81,221,.2),rgba(70,100,213,.11))}
.account-form-icon .icon{width:18px;height:18px}
.account-heading-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.account-security-chip{padding:4px 8px;border:1px solid rgba(102,132,248,.2);border-radius:999px;background:rgba(78,107,222,.12);color:#aebcff;font-size:7px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.account-password-fields{display:grid;gap:12px}
.account-password-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:rgba(3,6,11,.27)}
.account-password-tools span{color:#737e8e;font-size:8px;line-height:1.5;text-align:right}
.account-show-passwords{flex:none;padding:6px 9px;border:1px solid rgba(105,134,244,.2);border-radius:9px;background:rgba(77,105,218,.11);color:#acbaff;font:800 8px/1 Poppins,sans-serif;cursor:pointer;transition:.18s}
.account-show-passwords:hover{background:rgba(77,105,218,.2);color:#fff}
.account-save-button{min-height:46px;margin-top:2px;justify-self:start;padding-inline:19px}
.account-password-card{background:radial-gradient(circle at 100% 0,rgba(112,76,217,.13),transparent 40%),linear-gradient(155deg,rgba(255,255,255,.045),rgba(255,255,255,.018))}
.account-game-item.removing{animation:phase62FavoriteOut .24s ease both}
@keyframes phase62FavoriteOut{to{opacity:0;transform:scale(.93) translateY(8px)}}

@media(max-width:760px){
  .account-form-card{padding:18px;border-radius:16px}
  .account-form-heading{gap:10px}
  .account-form-icon{width:35px;height:35px;border-radius:11px}
  .account-password-tools{align-items:flex-start;flex-direction:column}
  .account-password-tools span{text-align:left}
  .account-save-button{width:100%;justify-content:center}
}

/* Stable touch sliders for the home page. Desktop keeps the richer layouts. */
@media(max-width:767px){
  .quick-categories,.originals-slider,.top-games-slider{min-width:0;overflow:hidden}
  .quick-category-arrow,.originals-arrow,.top-games-controls{display:none!important}
  .quick-categories:before,.quick-categories:after{display:none!important}
  .quick-categories-track{grid-auto-columns:clamp(138px,42vw,170px);gap:9px;margin:0!important;padding:2px 0 10px!important;scroll-padding-inline:0;scroll-snap-type:x mandatory}
  .quick-category-card{width:100%;height:94px;scroll-snap-align:start;scroll-snap-stop:normal}
  .originals-track{grid-auto-columns:clamp(132px,42vw,168px);gap:9px;margin:0!important;padding:2px 0 11px!important;scroll-padding-inline:0;scroll-snap-type:x mandatory}
  .original-game-card{width:100%;aspect-ratio:2/3;scroll-snap-align:start;scroll-snap-stop:normal}
  .top-games-track{display:flex;grid-template:none;grid-auto-columns:auto;gap:9px;margin:0!important;padding:2px 0 11px!important;overflow-x:auto;overflow-y:hidden;scroll-padding-inline:0;scroll-snap-type:x mandatory}
  .top-game-card,.top-game-card--large,.top-game-card--small{flex:0 0 clamp(230px,72vw,310px);width:auto;aspect-ratio:16/9;grid-row:auto;grid-column:auto;scroll-snap-align:start;scroll-snap-stop:normal}
  .top-game-image{display:block;width:100%;height:100%;object-fit:cover}
}

.section-anim-slide{animation:sectionBuilderSlideIn .52s cubic-bezier(.2,.75,.2,1) both}@keyframes sectionBuilderSlideIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.section-anim-slide{animation:none!important}}

/* Content Studio public blocks */
.article-blocks{display:grid;gap:22px;margin-top:28px}.article-block{min-width:0}.article-block.paragraph{margin:0;color:var(--color-text-secondary,#9aa0ad);font-size:16px;line-height:1.85;white-space:pre-line}.article-block.paragraph.align-center{text-align:center}.block-heading{margin:18px 0 0;color:var(--color-text-primary,#fff);letter-spacing:-.025em;line-height:1.15}.article-blocks h2.block-heading{font-size:clamp(25px,3vw,36px)}.article-blocks h3.block-heading{font-size:clamp(21px,2.5vw,29px)}.article-blocks h4.block-heading{font-size:18px}.block-image{margin:2px auto;display:grid;gap:9px}.block-image.size-normal{max-width:780px}.block-image.size-wide{max-width:1040px}.block-image.size-full{max-width:none}.block-image img{width:100%;display:block;border-radius:18px;border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 48px rgba(0,0,0,.18)}.block-image figcaption{color:var(--color-text-muted,#6f7582);font-size:12px;text-align:center}.block-quote{margin:4px 0;padding:24px 26px;border-left:4px solid #2563eb;border-radius:0 18px 18px 0;background:rgba(37,99,235,.08)}.block-quote p{margin:0;color:var(--color-text-primary,#fff);font-size:19px;line-height:1.65}.block-quote cite{display:block;margin-top:12px;color:var(--color-text-muted,#7f8795);font-style:normal;font-size:12px;font-weight:700}.block-callout{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;padding:18px;border:1px solid rgba(37,99,235,.22);border-radius:16px;background:rgba(37,99,235,.07)}.block-callout.tone-success{border-color:rgba(52,211,153,.24);background:rgba(52,211,153,.07)}.block-callout.tone-warning{border-color:rgba(245,158,11,.25);background:rgba(245,158,11,.07)}.callout-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#2563eb;color:#fff;font-weight:900}.tone-success .callout-icon{background:#10b981}.tone-warning .callout-icon{background:#f59e0b}.block-callout strong{display:block;margin-bottom:5px;color:var(--color-text-primary,#fff);font-size:15px}.block-callout p{margin:0;color:var(--color-text-secondary,#9aa0ad);line-height:1.65}.block-button{display:flex}.block-button .btn{min-height:44px;padding:0 18px}.block-divider{padding:8px 0}.block-divider span{display:block;height:1px;background:rgba(255,255,255,.09)}.block-divider.style-dots span{height:3px;background:radial-gradient(circle,rgba(255,255,255,.22) 1px,transparent 1.5px);background-size:10px 3px}.block-spacer.size-sm{height:10px}.block-spacer.size-md{height:24px}.block-spacer.size-lg{height:48px}.block-list{margin:0;padding-left:24px;color:var(--color-text-secondary,#9aa0ad);display:grid;gap:10px;line-height:1.7}.block-list li::marker{color:#3b82f6;font-weight:800}.block-faq{border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.025);overflow:hidden}.block-faq summary{cursor:pointer;padding:17px 19px;color:var(--color-text-primary,#fff);font-weight:800;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:15px}.block-faq summary::-webkit-details-marker{display:none}.block-faq summary:after{content:'+';font-size:20px;color:#60a5fa}.block-faq[open] summary:after{content:'−'}.block-faq p{margin:0;padding:0 19px 18px;color:var(--color-text-secondary,#9aa0ad);line-height:1.7}.block-code{overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:#090b11}.block-code>div{padding:8px 13px;border-bottom:1px solid rgba(255,255,255,.07);color:#7c8493;font-size:11px;font-weight:800;text-transform:uppercase}.block-code pre{margin:0;padding:18px;overflow:auto;color:#d7deea;font-size:13px;line-height:1.65}.block-game-grid{display:grid;gap:14px;padding:20px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(255,255,255,.02)}.block-game-grid>h3{margin:0;color:var(--color-text-primary,#fff);font-size:20px}.article-games-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.article-games-grid .game-card{min-width:0}@media(max-width:820px){.article-games-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.block-quote{padding:20px}.block-quote p{font-size:17px}}@media(max-width:520px){.article-blocks{gap:18px}.article-block.paragraph{font-size:15px}.article-games-grid{grid-template-columns:1fr 1fr;gap:9px}.block-game-grid{padding:14px}.block-callout{grid-template-columns:32px minmax(0,1fr);padding:14px}.callout-icon{width:32px;height:32px}.block-image img{border-radius:13px}}

/* Contact Center public controls */
.contact-form select{width:100%;min-height:48px;padding:12px 14px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(4,7,12,.52);color:#fff;outline:0;transition:.18s}.contact-form select:focus{border-color:rgba(100,131,255,.58);box-shadow:0 0 0 4px rgba(81,108,225,.11)}.contact-form label>input+input,.contact-form label>select+input{margin-top:8px}.contact-character-count{justify-self:end;margin-top:-3px;color:#687386;font-size:8px;font-weight:650}.contact-support-fact{margin-top:10px;padding:12px 14px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(255,255,255,.026)}.contact-support-fact small,.contact-support-fact strong,.contact-support-fact a{display:block}.contact-support-fact small{color:#697488;font-size:8px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.contact-support-fact strong,.contact-support-fact a{margin-top:4px;color:#c8d1e0;font-size:10px;line-height:1.45}.contact-support-fact a{color:#9eb0ff;text-decoration:none}.contact-form-unavailable{min-height:330px;align-content:center;justify-items:start}.contact-form-unavailable>.icon{width:36px;height:36px;color:#91a5fa}.contact-form-unavailable h2{margin:8px 0 0;font-size:24px}.contact-form-unavailable p{margin:0 0 6px;color:#8d97a8;line-height:1.65}.contact-form-unavailable .btn{margin-top:8px}

/* Phase 1 site-control public hooks */
.site-announcement{position:relative;z-index:65;border-bottom:1px solid rgba(255,255,255,.07);background:linear-gradient(90deg,rgba(60,91,205,.2),rgba(105,64,180,.15));color:#dfe6ff}.site-announcement-inner{min-height:34px;max-width:1440px;margin:0 auto;padding:5px 22px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:10px;font-weight:650;text-align:center}.site-announcement-label{padding:4px 7px;border-radius:999px;background:rgba(91,117,225,.2);color:#b8c5ff;font-size:7px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.site-announcement a{color:#fff;font-size:9px;font-weight:800;text-decoration:none}.site-logo-image{display:block;max-width:148px;max-height:34px;width:auto;height:auto;object-fit:contain}.logo.logo-image-mode{min-width:0}.footer-social-links{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.footer-social-links a{padding:6px 9px;border:1px solid rgba(255,255,255,.08);border-radius:999px;color:#9da8ba;font-size:8px;font-weight:750;text-decoration:none;transition:.18s}.footer-social-links a:hover{color:#fff;border-color:rgba(103,132,246,.35);background:rgba(76,106,226,.1)}.public-nav-badge{margin-left:auto;padding:3px 5px;border-radius:999px;background:rgba(88,116,232,.16);color:#aebcff;font-size:6px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.footer-links .public-nav-badge{margin-left:6px}.quick-category-card.has-image .quick-category-icon{overflow:hidden;border-radius:12px}.quick-category-card.has-image .quick-category-icon img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:620px){.site-announcement-inner{padding-inline:12px;justify-content:flex-start;overflow:hidden}.site-announcement-inner>span:not(.site-announcement-label){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.site-announcement a{white-space:nowrap}.site-logo-image{max-width:116px;max-height:29px}}
/* Phase 1 taxonomy artwork */
.category_header_art.has-custom-art{overflow:hidden;isolation:isolate}
.category_header_art.has-custom-art:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(15,19,29,.04),rgba(15,19,29,.42));z-index:1;pointer-events:none}
.category_custom_art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.category_header_art.has-custom-art .category_art_shape{z-index:2;opacity:.5}
/* Phase 1 maintenance mode */
.site-maintenance-screen{min-height:100vh;display:grid;place-items:center;padding:32px;background:radial-gradient(circle at 50% 15%,rgba(91,114,255,.17),transparent 32%),#0f1117;color:#f7f9ff;font-family:Poppins,Inter,system-ui,sans-serif}
.site-maintenance-card{width:min(560px,100%);padding:44px 34px;border:1px solid rgba(255,255,255,.09);border-radius:28px;background:rgba(18,22,32,.94);box-shadow:0 28px 90px rgba(0,0,0,.42);text-align:center;display:grid;justify-items:center;gap:12px}
.site-maintenance-card .logo{margin-bottom:18px}.site-maintenance-pulse{width:12px;height:12px;border-radius:50%;background:#7184ff;box-shadow:0 0 0 0 rgba(113,132,255,.36);animation:maintenancePulse 1.8s infinite}
.site-maintenance-card h1{margin:6px 0 0;font-size:clamp(28px,5vw,44px);line-height:1.08;letter-spacing:-.045em}.site-maintenance-card p{max-width:460px;margin:0;color:#aeb7ca;font-size:14px;line-height:1.75}.site-maintenance-card>a{margin-top:8px;color:#9dadff;font-size:13px;font-weight:700}
@keyframes maintenancePulse{70%{box-shadow:0 0 0 14px rgba(113,132,255,0)}100%{box-shadow:0 0 0 0 rgba(113,132,255,0)}}
@media(max-width:600px){.site-maintenance-screen{padding:18px}.site-maintenance-card{padding:36px 22px;border-radius:22px}.site-maintenance-card p{font-size:13px}}

/* Keep the enabled announcement visible above the fixed application chrome. */
:root{--announcement-h:36px}
.site-announcement{position:fixed;inset:0 0 auto 0;height:var(--announcement-h);z-index:1100}
.site-announcement-inner{height:100%;min-height:0}
body.announcement-visible .app-header{top:var(--announcement-h)}
body.announcement-visible .sidebar{top:calc(var(--header-h) + var(--announcement-h))}
body.announcement-visible .main-shell{padding-top:calc(var(--header-h) + var(--announcement-h))}

/* Public Contact page unified responsive fix */
.contact-layout{width:100%;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);align-items:start}.contact-copy,.contact-form{min-width:0;overflow:hidden}.contact-copy h1,.contact-copy>p,.contact-note p,.contact-support-fact strong,.contact-support-fact a{overflow-wrap:anywhere}.contact-form label{min-width:0}.contact-form input,.contact-form select,.contact-form textarea{max-width:100%;box-sizing:border-box}.contact-form select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:linear-gradient(45deg,transparent 50%,#7e899b 50%),linear-gradient(135deg,#7e899b 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 12px) 21px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}.contact-form select option{background:#111722;color:#fff}.contact-form textarea{line-height:1.65}.contact-form>.btn{width:100%;min-height:50px;margin-top:2px}.contact-character-count{max-width:100%;overflow-wrap:anywhere}.contact-success{line-height:1.55;overflow-wrap:anywhere}
@media(max-width:980px){.contact-layout{grid-template-columns:1fr;max-width:760px}.contact-copy,.contact-form{padding:24px}.contact-note{margin-top:20px}}
@media(max-width:560px){.editorial-page:has(.contact-layout){padding:16px 12px 34px}.contact-layout{gap:12px}.contact-copy,.contact-form{padding:18px 15px;border-radius:18px}.contact-copy h1{font-size:clamp(31px,11vw,44px)}.contact-form input,.contact-form select{min-height:46px}.contact-form textarea{min-height:150px}.contact-note{align-items:flex-start}.contact-support-fact{padding:11px 12px}}
/* Managed ad slots — Phase 2 */
.managed-ad-stack{width:100%;display:grid;gap:10px;margin:14px 0}.managed-ad-slot{position:relative;width:100%;border:1px solid var(--border-color,#2a2f38);border-radius:14px;background:rgba(255,255,255,.02);overflow:hidden;display:grid;align-items:stretch}.managed-ad-label{position:absolute;top:7px;left:9px;z-index:2;padding:3px 6px;border-radius:999px;background:rgba(0,0,0,.55);color:rgba(255,255,255,.65);font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}.managed-ad-frame{width:100%;height:100%;min-height:90px;border:0;background:transparent;display:block}.managed-ad-slot.device-mobile{display:none}@media(max-width:760px){.managed-ad-slot.device-desktop{display:none}.managed-ad-slot.device-mobile{display:grid}.managed-ad-stack{margin:10px 0}.managed-ad-slot{border-radius:11px}}


/* Arcadia v1.3.0 — server-rendered first paint helpers */
.ssr-app .ssr-menu-mark{display:grid;place-items:center;cursor:default;font-size:17px;font-weight:800;color:var(--muted,#8d96a5)}
.ssr-app .ssr-nav-icon{width:20px;flex:0 0 20px;display:grid;place-items:center;color:#8494d8;font-size:13px}
.ssr-app .genre-pill,.ssr-app .quick-category-card,.ssr-app .game-card,.ssr-app .game_recommendation_card{text-decoration:none}
.ssr-noscript{position:fixed;left:50%;bottom:18px;z-index:1400;width:min(720px,calc(100% - 28px));transform:translateX(-50%);padding:12px 16px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(12,15,22,.96);box-shadow:0 18px 60px rgba(0,0,0,.45);color:#c6cfde;font:600 12px/1.55 Poppins,Arial,sans-serif;text-align:center}


/* =========================================================
   Frontend Core Web Vitals performance layer
   ========================================================= */
button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

img {
  -webkit-user-drag: none;
}

/* Skip expensive paint/layout work for content that is well below the viewport.
   `auto` keeps the real size once the browser has measured the section. */
.game-section,
.top-games-section,
.originals-section,
.free-games-section,
.home-blog-section,
.category_seo_content,
.game_below_recommendations,
.game_article_section,
.footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* Isolate repeated cards so one card update does not invalidate the full grid. */
.game-card,
.category_game_card,
.top-game-card,
.original-game-card,
.blog-card {
  contain: layout style;
}

/* Avoid costly translucent blur while scrolling on smaller/touch devices. */
@media (max-width: 760px), (hover: none) {
  .app-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 17, 21, 0.97);
  }
}

/* The browser can prioritize the hero/cover without animated scale work during first paint. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide img,
  .game-thumb img,
  .category_game_image,
  .top-game-image,
  .original-game-image {
    transition: none !important;
  }
}

/* Game page related cards: readable media cards below the player and compact horizontal recommendations in the desktop sidebar. */
.game_below_recommendations{padding:20px;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.015))}
.game_below_recommendation_grid{gap:14px}
.game_below_recommendation_grid .game_recommendation_card{display:flex;min-width:0;padding:5px;flex-direction:column;border-color:rgba(255,255,255,.08);border-radius:14px;background:#141923;color:#f5f7fb;text-decoration:none;box-shadow:0 7px 20px rgba(0,0,0,.16)}
.game_below_recommendation_grid .game_recommendation_card:hover{border-color:rgba(111,135,255,.32);transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.game_below_recommendation_grid .game_recommendation_card img{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:10px;object-fit:cover;background:#0d1118}
.game_below_recommendation_grid .game_recommendation_card span{position:static;display:-webkit-box;min-height:38px;margin:0;padding:9px 6px 5px;overflow:hidden;background:none;color:#edf1f8;font-size:10px;font-weight:780;line-height:1.4;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.game_recommendation_sidebar .game_recommendation_card{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;min-height:66px;padding:5px;border-radius:12px;color:#eef2f8;text-decoration:none}
.game_recommendation_sidebar .game_recommendation_card:hover{transform:translateX(-3px)}
.game_recommendation_sidebar .game_recommendation_card img{width:88px;height:58px;aspect-ratio:auto;border-radius:8px;object-fit:cover}
.game_recommendation_sidebar .game_recommendation_card span{position:static;padding:0 9px;background:none;font-size:9px;line-height:1.4;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
@media(max-width:1100px){.game_below_recommendation_grid{gap:11px}}
@media(max-width:760px){
  .game_below_recommendations{margin-top:14px;padding:15px 12px;border-radius:17px}
  .game_below_recommendation_grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}
  .game_below_recommendation_grid .game_recommendation_card{padding:4px;border-radius:12px}
  .game_below_recommendation_grid .game_recommendation_card:hover{transform:none}
  .game_below_recommendation_grid .game_recommendation_card img{aspect-ratio:1/1;border-radius:9px}
  .game_below_recommendation_grid .game_recommendation_card span{min-height:36px;padding:7px 3px 3px;font-size:9px;text-align:center}
}
@media(max-width:480px){
  .game_below_recommendation_grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 9px}
  .game_below_recommendation_grid .game_recommendation_card span{min-height:39px;padding:8px 4px 4px;font-size:10px}
}

/* Persistent custom responsive overrides. */
@media(max-width:767px){
  .top-games-section{margin-bottom:28px}.top-games-slider{overflow:visible}.top-games-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto;gap:13px 8px;margin:0!important;padding:0!important;overflow:visible;scroll-snap-type:none}
  .top-game-card,.top-game-card--large,.top-game-card--small{display:block;width:100%;min-width:0;height:auto;aspect-ratio:auto;padding-bottom:24px;border:0;border-radius:0;overflow:visible;background:transparent;box-shadow:none;grid-row:auto;grid-column:auto}
  .top-game-card--small .top-game-image{display:block;width:100%;aspect-ratio:1/1;height:auto;border-radius:13px;object-fit:cover;box-shadow:0 7px 18px rgba(0,0,0,.25)}
  .top-game-card--small .top-game-overlay{inset:auto 0 0;height:20px;padding:0 3px;display:block;background:none;opacity:1}.top-game-card--small .top-game-play{display:none}.top-game-card--small .top-game-name{display:block;color:#f7f8fb;font-size:clamp(.67rem,3vw,.78rem);line-height:20px;text-align:center}
  .top-game-card--large{grid-column:1/-1;height:clamp(178px,53vw,230px);padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:#171b26;box-shadow:0 14px 30px rgba(0,0,0,.3)}
  .top-game-card--large .top-game-image{display:block;width:100%;height:100%;object-fit:cover}.top-game-card--large .top-game-overlay{inset:0;padding:18px;display:flex;flex-direction:row-reverse;align-items:flex-end;justify-content:space-between;gap:14px;background:linear-gradient(to top,rgba(8,10,18,.94),rgba(8,10,18,.12) 68%,transparent);opacity:1}
  .top-game-card--large .top-game-play{flex:0 0 auto;width:58px;height:36px;margin:0;border:0;border-radius:999px;background:linear-gradient(135deg,#7657ff,#613bfa);transform:none;box-shadow:0 8px 20px rgba(83,49,230,.4)}.top-game-card--large .top-game-play:after{content:'Play';margin-left:5px;font-size:.76rem;font-weight:850}.top-game-card--large .top-game-play .icon{width:13px;height:13px;margin:0}.top-game-card--large .top-game-name{margin-right:auto;max-width:calc(100% - 72px);font-size:clamp(1rem,4.6vw,1.3rem);text-align:left;text-shadow:0 2px 9px rgba(0,0,0,.55)}
  .top-game-badges{top:-4px;left:-3px}.top-game-card--large .top-game-badges{top:10px;left:10px}.top-game-badge{min-height:23px;padding:0 7px;border-radius:7px;font-size:.62rem}
}
.auth-password-field{position:relative;display:block;min-width:0}.auth-form .auth-password-field>input{padding-right:68px}.auth-password-toggle{position:absolute;z-index:2;right:7px;top:50%;transform:translateY(-50%);min-width:52px;height:34px;padding:0 9px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:rgba(255,255,255,.045);color:#aeb8c9;cursor:pointer;font:inherit;font-size:9px;font-weight:850;line-height:1}.auth-password-toggle:hover,.auth-password-toggle:focus-visible{border-color:rgba(100,131,255,.42);background:rgba(81,108,225,.14);color:#fff;outline:0}.auth-password-toggle[aria-pressed=true]{color:#b8c5ff;background:rgba(81,108,225,.13)}
@media(max-width:900px){.bottom-nav{display:grid}.footer-inner{padding-bottom:105px}.toast{bottom:88px}}

/* Seller credit */
.footer-bottom .developer-credit{margin-left:auto;color:var(--muted,#8f96a3);font-size:11px;white-space:nowrap}.footer-bottom .developer-credit strong{color:inherit}@media(max-width:700px){.footer-bottom .developer-credit{margin-left:0}}