/* Hallmark · checked: 2026-11-07 · genre: atmospheric · scope: app
   GRIMCAT game storefront: one product selection, one cinematic surface.
   Direction: frontend-design + UI UX Pro Max; existing brand and copy retained. */
@font-face {
  font-family:Rajdhani; font-style:normal; font-weight:600; font-display:swap;
  src:url('/fonts/rajdhani-semibold-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:Rajdhani; font-style:normal; font-weight:600; font-display:swap;
  src:url('/fonts/rajdhani-semibold-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root {
  --showcase-ground:#0c1017;
  --showcase-surface:#171c27;
  --showcase-glass:#111620dd;
  --showcase-muted:#b4bfce;
  --showcase-ink:#eef1f8;
  --showcase-line:#dce5f21f;
  --showcase-selected:#eef1f810;
  --showcase-shadow:#00000055;
  --showcase-clear:#0c101700;
  --showcase-veil-strong:#0c1017eb;
  --showcase-veil-copy:#0c1017c7;
  --showcase-veil-art:#0c101733;
  --showcase-veil-edge:#0c10170d;
  --showcase-veil-floor:#0c1017e6;
  --showcase-veil-mobile:#0c1017dd;
  --showcase-veil-mobile-art:#0c101726;
  --showcase-veil-mobile-edge:#0c101777;
}
.storefront-shell:has(.cinema-catalog) .store-intro { padding-top:36px; padding-bottom:24px }
.storefront-shell:has(.cinema-catalog) .store-intro h1 { font-size:28px; letter-spacing:-.8px }
.storefront-shell:has(.cinema-catalog) .store-intro p { max-width:520px; font-size:13px }
.storefront-shell .cinema-catalog .catalog-workspace {
  display:grid; grid-template-columns:minmax(0,1fr) 224px; grid-template-areas:"stage games"; gap:18px;
}
.storefront-shell .cinema-catalog .catalog-results { grid-area:stage; min-width:0 }
.storefront-shell .cinema-catalog .catalog-filter {
  grid-area:games; margin:0; padding:20px 12px; align-self:start;
  background:var(--showcase-glass); border:1px solid var(--showcase-line); border-radius:14px;
}
.storefront-shell .cinema-catalog .catalog-filter>h2 {
  position:static; width:auto; height:auto; clip-path:none; overflow:visible;
  margin:0 10px 16px; font-size:14px; font-weight:500; color:var(--showcase-muted);
}
.storefront-shell .cinema-catalog .game-category-nav {
  display:flex; flex-direction:column; flex-wrap:nowrap; gap:8px; margin:0; padding:2px;
  border:0; overflow:auto; max-height:526px; scrollbar-width:thin;
}
.storefront-shell .cinema-catalog .game-category-nav a {
  position:relative; display:flex; align-items:center; gap:12px; min-width:0; min-height:82px;
  padding:12px 10px; border:1px solid transparent; border-radius:9px;
  background:none; color:var(--showcase-muted); box-shadow:none;
  transition:background-color 160ms var(--finish-ease),border-color 160ms var(--finish-ease);
}
.storefront-shell .cinema-catalog .category-art {
  position:relative; display:block; flex:none; width:48px; height:58px; overflow:hidden; border-radius:5px;
}
.storefront-shell .cinema-catalog .category-art .product-cover {
  display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:1; filter:none; transform:none;
}
.storefront-shell .cinema-catalog .category-label { display:flex; flex-direction:column; gap:6px; min-width:0 }
.storefront-shell .cinema-catalog .category-name { color:inherit; font-size:14px; font-weight:600; line-height:1.4; overflow-wrap:anywhere }
.storefront-shell .cinema-catalog .category-count,
.storefront-shell .cinema-catalog .game-category-nav a[aria-selected="true"] .category-count { color:var(--showcase-muted); background:none; border:0; padding:0; font-size:12px; line-height:1.2 }
.storefront-shell .cinema-catalog .game-category-nav a[aria-selected="true"] {
  color:var(--showcase-ink); background:var(--showcase-selected); border-color:var(--showcase-line);
  box-shadow:inset 2px 0 var(--finish-red);
}
.storefront-shell .cinema-catalog .game-category-nav a:focus-visible { outline-offset:-2px }
.storefront-shell .cinema-catalog .game-category {
  position:relative; isolation:isolate; display:flex; min-height:590px; overflow:hidden;
  border:1px solid var(--showcase-line); border-radius:16px; background:var(--showcase-ground);
  box-shadow:0 18px 48px var(--showcase-shadow); scroll-margin-top:110px;
}
.storefront-shell .cinema-catalog .game-category[hidden] { display:none }
.storefront-shell .cinema-catalog .game-category+.game-category { margin-top:24px }
.storefront-shell .cinema-catalog .game-category[role="tabpanel"] { margin-top:0 }
.storefront-shell .cinema-catalog .game-stage-art { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none }
.storefront-shell .cinema-catalog .game-stage-art .product-cover {
  position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover;
  object-position:65% center; opacity:1; filter:none; transform:none;
}
.storefront-shell .cinema-catalog .game-stage-art .product-cover.is-default { object-fit:contain; padding:10% 4% 10% 44% }
.storefront-shell .cinema-catalog .game-stage-art::after {
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg,var(--showcase-ground) 2%,var(--showcase-veil-strong) 27%,var(--showcase-veil-copy) 44%,var(--showcase-veil-art) 75%,var(--showcase-veil-edge)),linear-gradient(0deg,var(--showcase-veil-floor),var(--showcase-clear) 58%);
}
.storefront-shell .cinema-catalog .game-stage-content {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  width:58%; min-width:0; padding:42px; gap:28px;
}
.storefront-shell .cinema-catalog .game-stage-heading { width:100% }
.storefront-shell .cinema-catalog .game-stage-heading h2 {
  margin:0; color:var(--showcase-ink); font:600 clamp(48px,5.4vw,82px)/.95 Rajdhani,'Segoe UI',sans-serif;
  letter-spacing:-1.6px; overflow-wrap:anywhere;
}
.storefront-shell .cinema-catalog .game-stage-heading p { margin:14px 0 0; font-size:13px; color:var(--showcase-muted) }
.storefront-shell .cinema-catalog .edition-nav { display:flex; flex-wrap:wrap; gap:8px; width:100% }
.storefront-shell .cinema-catalog .edition-choice {
  position:relative; min-height:44px; max-width:100%; padding:10px 14px; border:1px solid var(--showcase-line);
  border-radius:6px; background:var(--showcase-glass); color:var(--showcase-muted);
  font:inherit; font-size:13px; line-height:1.45; text-align:left; white-space:normal; overflow-wrap:anywhere; cursor:pointer;
}
.storefront-shell .cinema-catalog .edition-choice[aria-selected="true"] {
  border-color:var(--finish-edge-bright); background:var(--showcase-selected); color:var(--showcase-ink);
  box-shadow:inset 0 -2px var(--finish-red);
}
.storefront-shell .cinema-catalog .edition-choice:active { transform:translateY(1px) scale(.985) }
.storefront-shell .cinema-catalog .game-editions { display:block; width:100%; margin:0; padding:0; border:0; background:none; box-shadow:none }
.storefront-shell .cinema-catalog .game-edition {
  display:flex; flex-direction:column; align-items:flex-start; gap:20px;
  padding:0; border:0; border-radius:0; background:none; box-shadow:none; transform:none;
}
.storefront-shell .cinema-catalog .game-edition[hidden] { display:none }
.storefront-shell .cinema-catalog .game-edition+.game-edition { margin-top:24px; padding-top:24px; border-top:1px solid var(--showcase-line) }
.storefront-shell .cinema-catalog .game-edition[role="tabpanel"] { margin:0; padding:0; border:0 }
.storefront-shell .cinema-catalog .edition-identity { display:block; order:2; min-width:0 }
.storefront-shell .cinema-catalog .edition-identity h3 { margin:0 0 12px; font-size:21px; line-height:1.4; overflow-wrap:anywhere }
.storefront-shell .cinema-catalog .edition-identity h3[hidden] { display:none }
.storefront-shell .cinema-catalog .edition-identity p { margin:0; font-size:14px; line-height:1.75; color:var(--showcase-muted); overflow-wrap:anywhere }
.storefront-shell .cinema-catalog .game-edition .status { display:flex; align-items:center; gap:7px; order:1; padding:0; font-size:12px; align-self:flex-start }
.storefront-shell .cinema-catalog .game-edition .status::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor }
.storefront-shell .cinema-catalog .edition-actions { display:flex; flex-direction:column-reverse; align-items:flex-start; gap:12px; order:3; width:100%; margin-top:2px }
.storefront-shell .cinema-catalog .edition-actions .button { min-width:174px; min-height:46px; padding:12px 24px; font-size:13px }
.storefront-shell .cinema-catalog .catalog-video-link { min-height:32px; display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--showcase-muted) }
@media(hover:hover) and (pointer:fine) {
  .storefront-shell .cinema-catalog .game-category-nav a:hover { background:var(--showcase-selected); border-color:var(--showcase-line) }
  .storefront-shell .cinema-catalog .game-edition:hover { background:none; border:0; box-shadow:none; transform:none }
  .storefront-shell .cinema-catalog .edition-choice:hover { border-color:var(--finish-edge-bright); transform:none }
}
@media(max-width:1080px) {
  .storefront-shell .cinema-catalog .catalog-workspace { grid-template-columns:minmax(0,1fr) 200px; gap:14px }
  .storefront-shell .cinema-catalog .game-stage-content { width:68%; padding:32px; gap:24px }
  .storefront-shell .cinema-catalog .game-category { min-height:570px }
  .storefront-shell .cinema-catalog .game-stage-heading h2 { font-size:64px }
  .storefront-shell .cinema-catalog .category-art { width:40px; height:52px }
}
@media(max-width:850px) {
  .storefront-shell .cinema-catalog .catalog-workspace { display:flex; flex-direction:column; gap:18px }
  .storefront-shell .cinema-catalog .catalog-filter { padding:0; width:100%; border:0; background:none }
  .storefront-shell .cinema-catalog .catalog-filter>h2 { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; margin:0 }
  .storefront-shell .cinema-catalog .game-category-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:244px }
  .storefront-shell .cinema-catalog .game-category-nav a { min-height:68px; padding:8px; gap:10px; background:var(--showcase-glass); border-color:var(--showcase-line) }
  .storefront-shell .cinema-catalog .category-art { width:42px; height:48px }
  .storefront-shell .cinema-catalog .category-name { font-size:13px }
  .storefront-shell .cinema-catalog .category-count { font-size:11px }
  .storefront-shell .cinema-catalog .category-label { gap:3px }
  .storefront-shell .cinema-catalog .game-category { min-height:540px }
  .storefront-shell .cinema-catalog .game-stage-content { width:64%; padding:36px }
}
@media(max-width:540px) {
  .storefront-shell:has(.cinema-catalog) .store-intro { padding-top:26px; padding-bottom:18px }
  .storefront-shell:has(.cinema-catalog) .store-intro h1 { font-size:27px }
  .storefront-shell:has(.cinema-catalog) .store-intro p { font-size:12px }
  .storefront-shell .cinema-catalog .game-category { min-height:0; border-radius:12px }
  .storefront-shell .cinema-catalog .game-stage-art { bottom:auto; height:340px }
  .storefront-shell .cinema-catalog .game-stage-art .product-cover { object-position:center top }
  .storefront-shell .cinema-catalog .game-stage-art .product-cover.is-default { padding:24px; object-fit:contain }
  .storefront-shell .cinema-catalog .game-stage-art::after { background:linear-gradient(0deg,var(--showcase-ground) 2%,var(--showcase-veil-mobile) 28%,var(--showcase-veil-mobile-art) 80%),linear-gradient(90deg,var(--showcase-veil-mobile-edge),var(--showcase-clear)) }
  .storefront-shell .cinema-catalog .game-stage-content { width:100%; padding:160px 24px 28px; gap:22px }
  .storefront-shell .cinema-catalog .game-stage-heading h2 { font-size:56px; letter-spacing:-1px }
  .storefront-shell .cinema-catalog .game-stage-heading p { margin-top:10px; font-size:12px }
  .storefront-shell .cinema-catalog .edition-choice { font-size:12px; padding:10px 12px }
  .storefront-shell .cinema-catalog .edition-identity p { font-size:14px }
  .storefront-shell .cinema-catalog .edition-actions { align-items:stretch; gap:8px }
  .storefront-shell .cinema-catalog .edition-actions .button { width:100% }
  .storefront-shell .cinema-catalog .catalog-video-link { justify-content:center; min-height:44px }
}
@media(prefers-reduced-motion:reduce) {
  .storefront-shell .cinema-catalog .game-category-nav a { transition:none }
  .storefront-shell .cinema-catalog .edition-choice:active { transform:none }
}