@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

body:has(.game-detail-page), .game-detail-page, .game-detail-footer { font-family: "Inter", Arial, sans-serif; }
body:has(.game-detail-page) { --shell: min(1152px, calc(100% - 48px)); }
body:has(.game-detail-page) .site-header { position: fixed; }
body:has(.game-detail-page) .brand span { font-size: 15px; letter-spacing: .16em; text-transform: uppercase; }
body:has(.game-detail-page) .brand small { letter-spacing: .34em; }
body:has(.game-detail-page) .nav-cta, body:has(.game-detail-page) .nav-store { min-width: auto; margin-left: 10px; padding: 8px 14px; border-color: rgba(255,255,255,.2); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
body:has(.game-detail-page) .nav-cta:hover, body:has(.game-detail-page) .nav-store:hover { color: var(--white); border-color: rgba(255,255,255,.55); }
.game-detail-page { min-height: 100vh; padding-top: 0; color: var(--white); background: #000; }
.game-detail-hero { position: relative; height: min(60vh, 600px); min-height: 480px; overflow: visible; background: #000; }
.game-detail-hero::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.12) 15%, rgba(0,0,0,.1) 42%, rgba(0,0,0,.66) 73%, #000 100%), linear-gradient(90deg, rgba(0,0,0,.5), transparent 65%); pointer-events: none; }
.game-detail-hero::after { content: ""; position: absolute; z-index: 1; right: 0; bottom: -125px; left: 0; height: 200px; background: linear-gradient(180deg, rgba(0,0,0,.92), #000 78%); pointer-events: none; }
.game-detail-layout { position: relative; z-index: 2; display: block; height: 100%; }
.game-detail-layout > div:first-child { position: static; }
.game-detail-cover { position: absolute; z-index: -1; inset: 0 calc((var(--shell) - 100vw) / 2); width: 100vw; max-width: none; height: 100%; aspect-ratio: auto; margin: 0; overflow: hidden; border: 0; box-shadow: none; background: #111; }
.game-detail-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.78) brightness(.76); }
.game-detail-back { display: inline-flex; position: relative; z-index: 3; align-items: center; gap: 8px; margin-top: 92px; color: rgba(255,255,255,.42); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: color .2s ease; }
.game-detail-back span { font-size: 17px; font-weight: 300; }
.game-detail-back:hover { color: var(--white); }
.game-detail-copy { position: absolute; z-index: 3; top: 438px; right: 0; left: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(235px, 1fr); column-gap: clamp(38px, 7vw, 76px); row-gap: 0; align-items: start; min-height: 320px; }
.game-detail-kicker { margin: 0 0 14px; color: rgba(255,255,255,.58); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.game-detail-copy > .game-detail-kicker { grid-column: 1; grid-row: 1; }
.game-detail-copy h1 { max-width: 700px; margin: 0; color: var(--white); font-size: clamp(42px, 5.5vw, 72px); font-weight: 900; line-height: .93; letter-spacing: -.055em; text-transform: none; }
.game-detail-copy > h1 { grid-column: 1; grid-row: 2; }
.game-detail-developer { display: none; }
.game-detail-copy > .game-detail-description { grid-column: 1; grid-row: 3; }
.game-detail-description { max-width: 690px; margin: 24px 0 0; color: rgba(255,255,255,.48); font-size: 16px; font-weight: 300; line-height: 1.55; }
.game-detail-copy > .game-detail-actions { grid-column: 1; grid-row: 4; }
.game-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 25px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); }
.game-download-button { min-width: 170px; height: 38px; font-size: 10px; }
.game-download-note { max-width: 210px; margin: 0; color: rgba(255,255,255,.32); font-size: 9px; line-height: 1.45; }
.game-facts { position: relative; margin: 0; padding: 24px; border: 1px solid rgba(255,255,255,.14); background: rgba(7,9,10,.82); box-shadow: 0 18px 55px rgba(0,0,0,.2); backdrop-filter: blur(12px); }
.game-detail-copy > .game-facts { position: absolute; top: 0; right: 0; width: calc((100% - clamp(38px, 7vw, 76px)) / 3); }
.game-facts::before { content: "Game Info"; display: block; margin-bottom: 21px; color: rgba(255,255,255,.27); font-size: 10px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.game-fact { min-width: 0; padding: 0 0 18px; margin: 0 0 17px; border: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.game-fact:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.game-fact dt { margin-bottom: 6px; color: rgba(255,255,255,.3); font-size: 9px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
.game-fact dd { margin: 0; color: var(--white); font-size: 13px; font-weight: 600; }
.game-more-games { margin-top: 22px; }
.game-detail-copy > .game-more-games { position: absolute; top: 295px; right: 0; width: calc((100% - clamp(38px, 7vw, 76px)) / 3); }
.game-more-games > p { margin: 0 0 11px; color: rgba(255,255,255,.27); font-size: 10px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.game-more-list { display: grid; gap: 8px; }
.game-more-link { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.1); transition: border-color .2s ease, background .2s ease; }
.game-more-link:hover { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.04); }
.game-more-link img { flex: 0 0 56px; width: 56px; height: 40px; object-fit: cover; }
.game-more-link span { color: rgba(255,255,255,.68); font-size: 9px; line-height: 1.25; }
.game-screenshot-section { position: relative; z-index: 2; width: var(--shell); margin: 380px auto 0; padding-bottom: 95px; }
.game-screenshot-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.game-screenshot-heading h2 { flex: 0 0 auto; margin: 0; color: rgba(255,255,255,.3); font-size: 10px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.game-screenshot-heading::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.game-screenshot-count { color: rgba(255,255,255,.3); font-size: 9px; }
.game-screenshot-controls { display: flex; gap: 8px; }
.game-screenshot-control { width: 33px; height: 29px; padding: 0; color: var(--white); border: 1px solid rgba(255,255,255,.28); background: transparent; font-size: 16px; line-height: 1; cursor: pointer; }
.game-screenshot-control:hover, .game-screenshot-control:focus-visible { color: #000; background: var(--white); outline: none; }
.game-screenshot-stage { position: relative; overflow: hidden; background: rgba(255,255,255,.05); }
.game-screenshot-stage img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.game-screenshot-thumbs { display: flex; gap: 6px; overflow-x: auto; margin-top: 10px; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.game-screenshot-thumb { flex: 0 0 82px; height: 48px; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: transparent; cursor: pointer; opacity: .55; }
.game-screenshot-thumb.is-active, .game-screenshot-thumb:hover, .game-screenshot-thumb:focus-visible { border-color: var(--white); opacity: 1; outline: none; }
.game-screenshot-thumb img { width: 100%; height: 100%; object-fit: cover; }
.game-detail-content { display: none; }
.game-detail-footer { padding: 63px 0 25px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.3); background: #000; font-size: 8px; }
.detail-footer-layout { display: grid; grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(100px, .65fr)); gap: clamp(24px, 6vw, 88px); padding-bottom: 52px; }
.detail-footer-brand h2 { margin: 0 0 15px; color: var(--white); font-size: 24px; font-weight: 800; letter-spacing: .1em; }
.detail-footer-brand small { display: block; margin-top: 4px; color: rgba(255,255,255,.3); font-size: 7px; letter-spacing: .32em; }
.detail-footer-brand p { max-width: 250px; margin: 0 0 17px; color: rgba(255,255,255,.38); font-size: 10px; line-height: 1.55; }
.detail-footer-brand a { color: rgba(255,255,255,.48); font-size: 9px; }
.detail-footer-column { display: flex; flex-direction: column; gap: 10px; }
.detail-footer-column h3 { margin: 2px 0 5px; color: rgba(255,255,255,.3); font-size: 9px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.detail-footer-column a { color: rgba(255,255,255,.42); font-size: 9px; transition: color .2s ease; }
.detail-footer-column a:hover, .detail-footer-brand a:hover { color: var(--white); }
.detail-footer-bottom { display: flex; justify-content: space-between; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.25); font-size: 8px; }

@media (max-width: 900px) {
  .game-detail-copy { gap: 28px; }
  .game-detail-description { font-size: 13px; }
  .game-facts { padding: 18px; }
  .game-more-link { min-height: 46px; }
}

@media (max-width: 760px) {
  .game-detail-hero { height: 555px; min-height: 555px; }
  .game-detail-cover { inset: 0 calc((var(--shell) - 100vw) / 2); }
  .game-detail-back { margin-top: 80px; }
  .game-detail-copy { top: 410px; right: 0; left: 0; display: block; }
  .game-detail-copy > .game-more-games { position: static; width: 100%; }
  .game-detail-copy h1 { font-size: clamp(39px, 10vw, 60px); }
  .game-detail-description { margin-top: 18px; font-size: 12px; }
  .game-facts { margin-top: 27px; }
  .game-detail-copy > .game-facts { position: static; width: auto; }
  .game-more-games { margin-top: 25px; }
  .game-screenshot-section { margin-top: 510px; padding-bottom: 68px; }
  .game-screenshot-heading { flex-wrap: wrap; }
  .game-screenshot-heading::after { min-width: 50px; }
  .game-detail-footer { padding-top: 42px; }
  .detail-footer-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px 16px; }
  .detail-footer-brand { grid-column: 1 / -1; }
  body:has(.game-detail-page) .nav-store { display: none; }
}

@media (max-width: 640px) {
  .game-detail-hero { height: 500px; min-height: 500px; }
  .game-detail-copy { top: 372px; }
  .game-detail-copy h1 { font-size: clamp(37px, 11vw, 52px); }
  .game-detail-description { max-width: 100%; font-size: 11px; }
  .game-detail-actions { align-items: flex-start; flex-direction: column; }
  .game-screenshot-section { margin-top: 760px; }
  .game-detail-footer .shell { display: block; line-height: 1.9; }
  .detail-footer-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; padding-bottom: 37px; }
  .detail-footer-brand { grid-column: 1 / -1; }
  .detail-footer-column { min-width: 0; margin-top: 0; }
  .detail-footer-column a { line-height: 1.35; overflow-wrap: anywhere; }
  .detail-footer-bottom { display: block; line-height: 1.9; }
}