.g-card{
  position:relative;
  display:block;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 2px 8px color-mix(in srgb,var(--bg) 60%,transparent);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.g-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
  box-shadow:var(--shadow);
}
.g-card:focus-visible{outline-offset:3px}

.g-thumb{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--surface-2);
}
.g-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform var(--t-med) var(--ease),opacity var(--t-med) var(--ease);
}
.g-card:hover .g-thumb img{transform:scale(1.05)}

.g-gradient{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 45%,transparent 75%);
  pointer-events:none;
}
.g-card-bottom{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:26px 12px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  pointer-events:none;
}
.g-title{
  font-size:15px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.01em;
  text-shadow:0 1px 4px color-mix(in srgb,var(--bg) 80%,transparent);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.g-tags{display:flex;gap:6px;flex-wrap:wrap}

.g-tags-full{margin-top:14px}

.g-badge{
  position:absolute;
  top:8px;
  left:8px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-radius:var(--r-pill);
  color:var(--text);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,var(--badge-color,var(--dim)) 65%,transparent);
  color:var(--badge-color,var(--dim));
}
.g-badge svg{width:12px;height:12px;flex:0 0 12px}
.g-badge.b-new{--badge-color:var(--info)}
.g-badge.b-hot{--badge-color:var(--cta)}
.g-badge.b-top{--badge-color:var(--accent)}
.g-badge.b-updated{--badge-color:var(--dim)}
.g-badge.b-originals{
  --badge-color:var(--text);
  background:linear-gradient(120deg,var(--accent),var(--info));
  border-color:transparent;
  color:var(--accent-contrast);
}

.g-hover{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:color-mix(in srgb,var(--bg) 62%,transparent);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity var(--t-fast) var(--ease);
}
.g-card:hover .g-hover,
.g-card:focus-within .g-hover{opacity:1}
.play-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--cta);
  color:var(--cta-contrast);
  box-shadow:0 6px 18px color-mix(in srgb,var(--cta) 45%,transparent);
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.play-btn:hover{transform:scale(1.06);background:color-mix(in srgb,var(--cta) 88%,var(--text))}
.play-btn svg{width:20px;height:20px}
.g-meta{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  font-weight:600;
  color:var(--text);
}
.g-meta svg{width:13px;height:13px;color:var(--success)}
.g-meta .dot{color:var(--dim);opacity:.6}

.mini-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:6px;
  border-radius:var(--r-md);
  text-align:left;
  transition:background var(--t-fast) var(--ease);
}
.mini-row:hover{background:var(--surface-2)}
.mini-row img{
  width:76px;
  height:48px;
  object-fit:cover;
  border-radius:var(--r-sm);
  background:var(--surface-2);
  flex:0 0 auto;
}
.mini-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.mini-title{
  font-size:13.5px;
  font-weight:700;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.mini-meta{font-size:11.5px;color:var(--dim);margin-top:2px}
.mini-row > svg{width:16px;height:16px;flex:0 0 16px;color:var(--dim)}

#hero-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(150px,auto);
  gap:14px;
}
#hero-grid .g-card{animation:fade-up .5s var(--ease) both}
#hero-grid .g-card.hero-big{
  grid-column:span 2;
  grid-row:span 2;
}
#hero-grid .g-card.hero-big .g-thumb{aspect-ratio:auto;height:100%}
#hero-grid .g-card.hero-big .g-title{font-size:22px}
#hero-grid .g-card:nth-child(2){animation-delay:.06s}
#hero-grid .g-card:nth-child(3){animation-delay:.12s}
#hero-grid .g-card:nth-child(4){animation-delay:.18s}
#hero-grid .g-card:nth-child(5){animation-delay:.24s}

#group-rows{display:flex;flex-direction:column;gap:24px;min-width:0}
.group-row{min-width:0}
.group-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:0 0 12px;
}
.group-head h2{font-size:18px;font-weight:800;letter-spacing:-.01em;margin:0}
.group-head .show-all{
  margin-left:auto;
  min-height:32px;
  padding:6px 14px;
  border-radius:var(--r-pill);
  font-size:13px;
  font-weight:700;
  color:var(--accent);
  background:var(--accent-soft);
  border-color:transparent;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.group-head .show-all:hover{background:var(--accent);color:var(--accent-contrast)}
.group-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:clamp(180px,22%,240px);
  gap:14px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:2px 2px 8px;
  margin:-2px -2px 0;
}
.group-track .track-card{scroll-snap-align:start}

.group-track.expanded{
  grid-auto-flow:row;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  grid-auto-columns:unset;
  overflow-x:visible;
  scroll-snap-type:none;
}

#all-games-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
}
#all-games-grid .g-card{animation:fade-up .4s var(--ease) both}

@media (max-width:1199px){
  #hero-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:859px){
  #hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #hero-grid .g-card.hero-big .g-title{font-size:18px}
  #all-games-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .group-track{grid-auto-columns:clamp(150px,42%,200px);gap:10px}
}
@media (max-width:560px){
  
  #hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  #hero-grid .g-card.hero-big{grid-column:span 2;grid-row:auto}
  #hero-grid .g-card.hero-big .g-thumb{aspect-ratio:16/9;height:auto}
  #all-games-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
  .g-title{font-size:13.5px}
}