.showcase-page { padding-top: 60px; }
.catalog-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 45px; }
.catalog-heading h1 { font-size: clamp(44px, 5vw, 64px); letter-spacing: -.05em; margin: 0 0 18px; }
.catalog-heading p { margin: 0; color: #68706b; line-height: 1.8; }
.catalog-count { font-size: 38px; font-weight: 800; color: #87908a; white-space: nowrap; }
.catalog-count small { font-size: 12px; font-weight: 400; }
.catalog-bar { display: flex; justify-content: space-between; padding: 14px 20px; background: #253330; color: #eff6f2; font-size: 12px; }
.catalog-bar span:first-child { color: #f3e633; }
.catalog-bar span:last-child { color: #b1beb8; }
.catalog-list { display: grid; gap: 16px; }
.catalog-bar + .catalog-list { margin-top: 16px; }
.catalog-game { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr) minmax(0, 19%); background: #e9ede7; border: 1px solid #dbe1d9; transition: background .2s ease, box-shadow .2s ease; }
.catalog-game:hover { background: #e0e8df; box-shadow: 0 5px 18px #172e2410; }
.catalog-cover { display: flex; align-items: center; background: #101a18; overflow: hidden; }
.catalog-cover img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.catalog-cover:hover img { transform: scale(1.035); }
.catalog-copy { min-width: 0; padding: 25px; }
.catalog-copy h2 { margin: 12px 0; font-size: 28px; letter-spacing: -.03em; }
.catalog-copy h2 a:hover { color: #087e77; }
.catalog-copy p { font-size: 13px; line-height: 1.8; color: #58655e; margin: 0 0 22px; }
.catalog-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 11px; color: #58655e; }
.catalog-link { display: inline-flex; gap: 20px; align-items: center; font-size: 12px; font-weight: 700; color: #08776f; }
.catalog-link:hover { color: #12473c; text-decoration: underline; text-underline-offset: 5px; }
.catalog-link:active { transform: translateY(2px); }
.catalog-screens { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; padding: 12px 12px 12px 0; }
.catalog-screens a { overflow: hidden; background: #101a18; }
.catalog-screens img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease; }
.catalog-screens a:hover img { opacity: .8; }
.game-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.game-tags span { background: #dbe3da; color: #506254; padding: 5px 9px; font-size: 10px; }
.store-breadcrumb { display: inline-block; margin-bottom: 22px; font-size: 12px; color: #68706b; }
.store-breadcrumb:hover { color: #08776f; }
.store-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 25px; }
.store-heading h1 { font-size: clamp(36px, 5vw, 56px); margin: 0; letter-spacing: -.04em; }
.store-heading > span { font-size: 10px; letter-spacing: .15em; color: #68706b; }
.store-top { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.game-gallery { min-width: 0; }
.gallery-stage { position: relative; background: #101a18; aspect-ratio: 16 / 9; }
.gallery-original, .gallery-image { display: block; width: 100%; height: 100%; }
.gallery-image { object-fit: contain; }
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); border: 1px solid #ffffff30; background: #0c1615b8; color: #fff; width: 38px; height: 50px; font-size: 30px; cursor: pointer; transition: background .2s ease; }
.gallery-arrow:hover { background: #08776f; }
.gallery-arrow:active { transform: translateY(-50%) scale(.92); }
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }
.gallery-count { position: absolute; bottom: 12px; right: 14px; padding: 5px 8px; font-size: 10px; color: #fff; background: #101a18c9; pointer-events: none; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; background: #1d2b27; padding: 10px; }
.gallery-thumb { border: 2px solid transparent; padding: 0; cursor: pointer; background: #0d1815; opacity: .65; transition: opacity .2s ease, border-color .2s ease; aspect-ratio: 16 / 9; min-width: 0; }
.gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-thumb:hover, .gallery-thumb.selected { opacity: 1; }
.gallery-thumb.selected { border-color: #f3e633; }
.gallery-thumb:active { transform: scale(.96); }
.gallery-hint { color: #737e76; font-size: 11px; margin: 11px 0 0; }
.game-summary { background: #e8ede6; min-width: 0; }
.summary-cover { display: block; width: 100%; height: auto; }
.summary-body { padding: 20px; }
.summary-body > p { margin: 0 0 22px; font-size: 13px; line-height: 1.9; color: #536158; }
.summary-body dl { margin: 0 0 20px; font-size: 11px; }
.summary-body dl div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; margin-top: 12px; }
.summary-body dt { color: #68766c; }
.summary-body dd { margin: 0; }
.summary-body dd a { color: #08776f; }
.summary-body dd a:hover { text-decoration: underline; }
.store-play { display: flex; justify-content: space-between; margin-top: 24px; padding: 15px; }
.store-lower { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 40px; margin-top: 55px; }
.store-section-title { font-size: 19px; font-weight: 600; margin: 0 0 24px; padding-bottom: 13px; border-bottom: 1px solid #bac7ba; letter-spacing: .02em; }
.store-about > p { font-size: 15px; color: #59655d; line-height: 2.1; margin: 0; }
.store-team .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; gap: 22px; }
.store-team .member-grid li { padding: 0; border: 0; }
.store-team .member-grid b { font-size: 13px; }
.studio-directory-card { background: #e8ede6; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); border: 1px solid #dbe1d9; }
.studio-directory-info { padding: 36px; }
.studio-avatar { width: 106px; height: 106px; object-fit: contain; background: #fff; border: 1px solid #dbe1d9; }
.studio-directory-info .section-kicker { font-size: 9px; margin-top: 28px; }
.studio-directory-info h2 { font-size: 32px; line-height: 1.2; letter-spacing: -.04em; margin: 15px 0; }
.studio-directory-info p { font-size: 14px; color: #59655d; line-height: 1.9; max-width: 390px; }
.studio-directory-info .catalog-link { margin-top: 14px; }
.studio-featured-games { display: grid; align-content: center; gap: 18px; padding: 28px; background: #20322c; }
.studio-featured-games a { display: grid; grid-template-columns: 58% 1fr; align-items: center; color: #eff6ee; background: #ffffff08; transition: background .2s ease; }
.studio-featured-games a:hover { background: #ffffff16; }
.studio-featured-games img { display: block; width: 100%; }
.studio-featured-games span { display: flex; justify-content: space-between; gap: 10px; padding: 18px; font-size: 14px; }
.studio-featured-games b { color: #f3e633; }
.studio-banner { position: relative; background: #1e3029; overflow: hidden; }
.studio-banner-art { height: 180px; background: linear-gradient(90deg, #172d25a0, #172d2560), url('assets/games/unmasker/screenshot-2.webp') center 48% / cover; }
.studio-identity { padding: 0 36px 36px; position: relative; display: flex; align-items: flex-start; gap: 28px; color: #f6f8f2; }
.studio-identity .studio-avatar { margin-top: -32px; width: 140px; height: 140px; flex-shrink: 0; }
.studio-identity .section-kicker { font-size: 9px; color: #b2d3bf; margin: 22px 0 14px; }
.studio-identity h1 { font-size: clamp(28px, 3vw, 40px); margin: 0; line-height: 1.2; }
.studio-identity h1 span { font-weight: 400; font-size: .65em; margin-left: 12px; color: #c4d5c9; display: inline-block; }
.studio-identity p { font-size: 13px; color: #bfd0c3; line-height: 1.9; max-width: 650px; margin-bottom: 0; }
.studio-section-nav { display: flex; gap: 30px; border-bottom: 1px solid #becabc; margin-bottom: 40px; }
.studio-section-nav a { padding: 20px 0; font-size: 13px; border-bottom: 3px solid transparent; }
.studio-section-nav a:hover { border-color: #08776f; }
.studio-section-nav span { font-size: 10px; margin-left: 8px; color: #68706b; }
.studio-collection, .studio-members { scroll-margin-top: 110px; }
.studio-members { margin-top: 55px; }
.studio-members .member-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.showcase-page a:focus-visible, .showcase-page button:focus-visible { outline: 3px solid #0faaa0; outline-offset: 4px; }
@media (max-width: 1000px) {
  .catalog-game { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
  .catalog-screens { display: none; }
  .studio-featured-games a { grid-template-columns: 1fr; }
  .studio-identity { padding: 0 25px 30px; }
}
@media (max-width: 760px) {
  .showcase-page { padding-top: 36px; }
  .catalog-heading { align-items: start; gap: 15px; margin-bottom: 30px; }
  .catalog-count { font-size: 26px; }
  .catalog-count small { display: block; text-align: right; margin-top: 5px; }
  .catalog-heading p { font-size: 13px; }
  .catalog-bar span:last-child { display: none; }
  .catalog-game { grid-template-columns: 1fr; }
  .catalog-copy { padding: 22px; }
  .catalog-copy h2 { font-size: 26px; }
  .store-heading > span { display: none; }
  .store-top, .store-lower { grid-template-columns: 1fr; }
  .store-top { gap: 24px; }
  .summary-cover { display: none; }
  .store-lower { margin-top: 40px; gap: 40px; }
  .gallery-arrow { width: 30px; height: 40px; }
  .gallery-thumbs { padding: 7px; gap: 5px; }
  .studio-directory-card { grid-template-columns: 1fr; }
  .studio-directory-info { padding: 26px; }
  .studio-featured-games { padding: 18px; }
  .studio-featured-games a { grid-template-columns: 58% 1fr; }
  .studio-featured-games span { font-size: 12px; padding: 12px; }
  .studio-banner-art { height: 125px; }
  .studio-identity { display: block; padding: 0 22px 28px; }
  .studio-identity .studio-avatar { width: 100px; height: 100px; }
  .studio-identity h1 span { display: block; margin: 8px 0 0; }
  .studio-members .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-page *, .showcase-page *::before, .showcase-page *::after { transition: none; scroll-behavior: auto; }
}