/* A full-bleed game showcase, built on the original Createwithdev palette. */
.shapes-page .site-header { position: relative; z-index: 5; border-bottom-color: #ffffff18; }
.shapes-page .site-header .nav-contact { background: #090d16b3; border-color: #ffffff40; }
.shapes-page .cinematic-hero { position: relative; display: block; isolation: isolate; padding: 0; margin-top: -108px; overflow: hidden; background: #070809; }
.cinematic-backdrop { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.cinematic-backdrop img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 100% 50%; animation: cinema-arrive 1.3s cubic-bezier(.18,.55,.25,1) both; }
.cinematic-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #070809 0%, #070809ed 28%, #070809b3 42%, #0708094d 57%, #0708090a 75%), linear-gradient(0deg, #070809 0%, #070809c7 7%, transparent 37%, #0708090d 75%, #070809bf 100%); }
.cinematic-inner { min-height: min(930px, max(790px, 94svh)); padding-block: 142px 103px; position: relative; display: flex; align-items: center; }
.cinematic-hero .shapes-hero-copy { width: min(100%, 560px); padding: 0; position: relative; z-index: 1; }
.cinematic-hero .back-link { margin-bottom: 38px; color: #abb2bd; font-size: .6875rem; }
.original-label { display: flex; align-items: center; gap: 10px; color: #ced8e8; font-size: .625rem; font-weight: 700; letter-spacing: .2em; }
.original-label > span { width: 5px; height: 19px; display: block; background: var(--blue); box-shadow: 0 0 20px #287cff55; }
.cinematic-hero h1 { font-size: clamp(5rem, 8.2vw, 8rem); line-height: .9; letter-spacing: -.075em; margin-block: 25px 24px; text-shadow: 0 2px 30px #0008; }
.cinematic-hero .game-subtitle { font-size: .29em; letter-spacing: .015em; color: #e5eafa; font-weight: 400; margin-top: 17px; }
.hero-metadata { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; color: #a7b8ce; font-size: .5625rem; letter-spacing: .17em; margin-block: 27px 28px; font-weight: 600; }
.hero-metadata i { color: var(--blue-bright); font-style: normal; }
.cinematic-hero .game-tagline { font-size: clamp(1.65rem, 2.6vw, 2.3rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.2; }
.cinematic-hero .game-tagline span { color: #a8b5c6; }
.cinematic-hero .game-intro { max-width: 410px; margin-top: 18px; color: #bac1cd; line-height: 1.8; font-size: .9375rem; }
.cinematic-hero .game-actions { margin-top: 29px; gap: 13px; }
.cinematic-hero .button { min-height: 53px; border-radius: 5px; font-size: .8125rem; padding-inline: 20px; }
.cinematic-hero .button-primary { background: #236ee9; box-shadow: 0 5px 28px #0b4dc533; }
.cinematic-hero .button-primary:hover { background: #3984ff; }
.button-secondary { gap: 21px; background: #161f2ed9; color: #e6ecf5; border: 1px solid #ffffff30; }
.button-secondary:hover { background: #27364a; transform: translateY(-2px); }
.cinematic-hero .game-fineprint { font-size: .625rem; color: #929caa; margin-top: 15px; }
.hero-look-link { position: absolute; display: flex; align-items: center; gap: 15px; right: 0; bottom: 156px; color: #fff; padding: 18px 0 18px 20px; border-left: 2px solid #8eb9ff; text-shadow: 0 2px 15px #000; font-size: .8125rem; }
.hero-look-icon { width: 43px; height: 43px; border: 1px solid #ffffff6b; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; background: #0a14218c; transition: background .2s, transform .2s; }
.hero-look-link:hover .hero-look-icon { background: #216ee9; transform: translate(2px,-2px); }
.hero-look-link small { display: block; color: #d6e5fa; font-size: .5625rem; letter-spacing: .18em; margin-bottom: 5px; }
.hero-look-note { display: block; color: #aebcd0; font-size: .625rem; margin-top: 3px; }
.cinematic-bottom { position: absolute; bottom: 31px; inset-inline: 0; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #ffffff19; padding-top: 24px; gap: 20px; color: #929daa; font-size: .5625rem; letter-spacing: .14em; }
.cinematic-bottom > span { display: flex; align-items: center; gap: 9px; }
.cinematic-bottom i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue-bright); }
.cinematic-bottom a { color: #c3ccda; font-size: .6875rem; letter-spacing: 0; }
.cinematic-bottom a > span { margin-left: 13px; color: var(--blue-bright); }
.scene-section { padding-block: 33px 62px; }
.scene-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.scene-heading .eyebrow { font-size: .5625rem; letter-spacing: .16em; }
.scene-heading h2 { font-size: 1.8rem; letter-spacing: -.04em; margin-top: 11px; }
.scene-heading > a { font-size: .6875rem; color: #b9c5d8; white-space: nowrap; padding-bottom: 3px; }
.scene-heading > a span { color: var(--blue-bright); margin-left: 11px; }
.scene-rail { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 17px; }
.scene-card { position: relative; display: block; isolation: isolate; height: 205px; border: 1px solid #343d4d; border-radius: 7px; background: #111a28; transition: transform .3s, border-color .3s, box-shadow .3s; }
.scene-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(0deg, #050812f5 0%, #05081277 43%, #0508120a 100%); }
.scene-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; border-radius: inherit; filter: saturate(1.08); }
.scene-card:hover { transform: translateY(-6px); border-color: #779bcc; box-shadow: 0 12px 40px #0009; }
.scene-card:focus-visible { outline-offset: 6px; }
.scene-number { position: absolute; top: 14px; left: 16px; font-size: .5625rem; letter-spacing: .1em; color: #fff; background: #060b16aa; padding: 4px 7px; border: 1px solid #ffffff2b; border-radius: 3px; }
.scene-caption { position: absolute; bottom: 19px; left: 17px; right: 35px; }
.scene-caption small { display: block; font-size: .5rem; font-weight: 600; color: #9ec3ff; letter-spacing: .16em; margin-bottom: 7px; }
.scene-caption strong { font-size: 1.05rem; font-weight: 500; letter-spacing: -.03em; }
.scene-arrow { position: absolute; right: 15px; bottom: 20px; color: #bdcce3; transition: transform .25s; }
.scene-card:hover .scene-arrow { transform: translate(2px,-2px); }
.scene-candy .scene-caption small { color: #ffb9d4; }
.scene-origami .scene-caption small { color: #e4c5a9; }
.scene-synthwave .scene-caption small { color: #e6a6ff; }
.shapes-page .how-section { border-top: 1px solid var(--line); padding-top: 65px; }
.shapes-page .play-steps article { position: relative; padding: 28px 25px; border: 1px solid #252e3c; border-radius: 7px; background: linear-gradient(145deg, #101620, #090b0f 80%); }
.shapes-page .play-steps { gap: 18px; }
.shapes-page .step-top { margin-bottom: 28px; }
.shapes-page .looks-section { padding-block: 85px; }
.shapes-page .theme-viewer { border-color: #2b3c55; background: radial-gradient(ellipse at 50% 10%, #182c4555, transparent 65%), #0b0f16; }
.shapes-page .theme-viewer::before { display: none; }
.shapes-page .game-download { margin-block: 65px; padding: 0; position: relative; isolation: isolate; border-radius: 8px; border: 1px solid #26354a; overflow: hidden; }
.shapes-page .feature-art { position: absolute; inset: 0; z-index: -2; border: 0; border-radius: 0; }
.shapes-page .feature-art img { height: 100%; object-fit: cover; object-position: 80% 50%; opacity: .9; }
.shapes-page .feature-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #090d15f5 0%, #090d15ec 35%, #090d154d 100%), linear-gradient(0deg, #090d15d9, #090d1540); }
.shapes-page .download-content { min-height: 340px; padding: 55px 48px; align-items: center; }
.shapes-page .download-content h2 { font-size: clamp(3.5rem, 6vw, 5.5rem); margin-top: 22px; }
.shapes-page .download-content .eyebrow { font-size: .5625rem; color: #b5c5dd; }
.shapes-page .download-action .button { white-space: nowrap; box-shadow: 0 8px 30px #0004; }
@keyframes cinema-arrive { from { opacity: .2; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 1100px) {
  .cinematic-backdrop::after { background: linear-gradient(90deg, #070809f5 0%, #070809ed 28%, #070809c7 55%, #07080999 66%, #07080926 85%), linear-gradient(0deg, #070809 0%, #070809c7 7%, transparent 37%, #0708090d 75%, #070809bf 100%); }
  .cinematic-inner { min-height: 810px; padding-top: 145px; }
  .cinematic-hero .shapes-hero-copy { width: 510px; }
  .hero-look-link { bottom: 115px; font-size: .75rem; padding-left: 15px; }
  .hero-look-icon { display: none; }
  .scene-rail { gap: 12px; }
  .scene-card { height: 185px; }
  .scene-caption { left: 13px; bottom: 17px; }
  .scene-caption strong { font-size: .9375rem; }
}
@media (max-width: 760px) {
  .shapes-page .cinematic-hero { margin-top: -88px; }
  .shapes-page .site-header .nav-contact { background: transparent; border: 0; }
  .cinematic-backdrop { height: 440px; top: 88px; }
  .cinematic-backdrop img { height: 300px; min-height: 0; object-fit: cover; object-position: 100% center; mask-image: linear-gradient(#000 0%, #000 60%, transparent 100%); }
  .cinematic-backdrop::after { background: linear-gradient(0deg, #070809 0%, #070809 12%, #070809b3 37%, #07080922 74%, #07080955 100%); }
  .cinematic-inner { display: block; min-height: 0; padding-block: 278px 95px; }
  .cinematic-hero .shapes-hero-copy { width: 100%; }
  .cinematic-hero .back-link { position: absolute; top: -160px; margin: 0; color: #c3ccd9; font-size: .625rem; background: #07080999; padding: 6px 9px; border-radius: 3px; }
  .original-label { font-size: .5rem; letter-spacing: .16em; }
  .original-label > span { height: 15px; width: 4px; }
  .cinematic-hero h1 { font-size: clamp(4.1rem, 17vw, 6.5rem); margin-block: 23px 20px; }
  .cinematic-hero .game-subtitle { font-size: .32em; margin-top: 13px; }
  .hero-metadata { font-size: .5rem; gap: 11px; margin-block: 23px; }
  .cinematic-hero .game-tagline { font-size: 1.8rem; }
  .cinematic-hero .game-tagline br { display: initial; }
  .cinematic-hero .game-tagline span { display: inline; margin: 0; }
  .cinematic-hero .game-intro { font-size: .875rem; max-width: 410px; }
  .cinematic-hero .game-actions { margin-top: 25px; gap: 12px; }
  .cinematic-hero .button { padding-inline: 17px; min-height: 51px; }
  .cinematic-hero .game-fineprint { font-size: .5625rem; }
  .hero-look-link { display: none; }
  .cinematic-bottom { bottom: 25px; padding-top: 19px; font-size: .4375rem; gap: 15px; }
  .cinematic-bottom > a { font-size: .5625rem; }
  .cinematic-bottom a > span { margin-left: 5px; }
  .cinematic-bottom > span { max-width: 145px; line-height: 1.6; }
  .cinematic-bottom i { flex-shrink: 0; }
  .scene-section { padding-block: 30px 45px; }
  .scene-heading { align-items: flex-start; margin-bottom: 21px; }
  .scene-heading h2 { font-size: 1.55rem; }
  .scene-heading .eyebrow { font-size: .4375rem; }
  .scene-heading > a { font-size: .5625rem; margin-top: 4px; }
  .scene-heading > a span { display: none; }
  .scene-rail { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
  .scene-card { height: 185px; }
  .scene-caption strong { font-size: .9375rem; }
  .scene-caption small { font-size: .4375rem; letter-spacing: .1em; }
  .scene-number { top: 11px; left: 12px; }
  .scene-arrow { font-size: .8125rem; right: 11px; bottom: 18px; }
  .shapes-page .how-section { padding-top: 44px; }
  .shapes-page .play-steps { gap: 13px; }
  .shapes-page .play-steps article { padding: 23px 20px; grid-template-columns: 30px 1fr; gap: 9px 18px; }
  .shapes-page .step-top { margin-bottom: 0; }
  .shapes-page .looks-section { padding-block: 50px; }
  .shapes-page .game-download { margin-block: 45px; }
  .shapes-page .download-content { padding: 40px 25px; min-height: 355px; align-items: flex-start; gap: 28px; }
  .shapes-page .download-content h2 { font-size: 3.8rem; }
  .shapes-page .feature-art img { object-position: 85% center; }
}
@media (min-width: 480px) and (max-width: 760px) { .cinematic-inner { padding-top: 355px; } .cinematic-backdrop { height: 525px; } .cinematic-backdrop img { height: 390px; } .cinematic-hero .back-link { top: -235px; } }
@media (max-width: 380px) { .cinematic-hero .game-actions { flex-direction: column; align-items: stretch; } .cinematic-hero .button { justify-content: center; } .cinematic-hero h1 { font-size: 4.1rem; } .cinematic-inner { padding-top: 260px; } .scene-heading { flex-wrap: wrap; gap: 12px; } .scene-card { height: 170px; } .scene-caption { left: 11px; right: 26px; } .scene-caption strong { font-size: .8125rem; } }
@media (prefers-reduced-motion: reduce) { .cinematic-backdrop img { animation: none; } .scene-card:hover, .scene-card:hover .scene-arrow, .hero-look-link:hover .hero-look-icon, .button-secondary:hover { transform: none; } }