/*
 * หน้า Games: hero, Pha Klai, Coming soon และแฟ้มผลงาน
 */

.games-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 165px 6% 90px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 90% 70%, #7a18253b, transparent 60%);
}
.games-hero h1 {
  font-size: clamp(58px, 7vw, 104px);
  max-width: 1050px;
}
.games-hero > p {
  max-width: 540px;
}
.game-group-links {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}
.game-orbit {
  position: absolute;
  right: -10%;
  top: 22%;
  width: 540px;
  height: 540px;
  z-index: -1;
  opacity: 0.25;
  display: grid;
  place-items: center;
}
.game-orbit i {
  position: absolute;
  inset: 0;
  border: 1px solid #ff343b;
  border-radius: 50%;
  transform: rotateX(50deg) rotateZ(-40deg);
}
.game-orbit i:nth-child(2) {
  inset: 55px;
  transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);
}
.game-orbit span {
  font:
    110px "Archivo Black",
    sans-serif;
  color: #ff343b;
  transform: rotate(-15deg);
  letter-spacing: -0.08em;
}
.game-feature {
  background: #111113;
  border-top: 1px solid #ffffff12;
}
.games-page .scene-copy .eyebrow {
  color: #ff757a;
}
.games-page .scene-copy h2 {
  font-size: clamp(45px, 5.2vw, 76px);
  margin-bottom: 18px;
}
.games-page .scene-steps {
  margin-top: 28px;
  gap: 24px;
}
.games-page .scene-step p {
  color: #c4c0c2;
}
.games-page .scene-step.active .step-line {
  background: #ff343b;
}
.game-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.game-display {
  perspective: 1200px;
}
.game-window {
  width: 100%;
  background: #19191c;
  border: 1px solid #ffffff24;
  border-radius: 23px;
  overflow: hidden;
  transform: rotateY(calc(-8deg + var(--scene-progress, 0) * 8deg));
  box-shadow: 0 30px 100px #ff343b16;
}
.game-window img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 500/280;
  object-fit: cover;
}
.game-window-top,
.game-window-bottom {
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font:
    500 10px/1.4 "Anuphan",
    sans-serif;
  letter-spacing: 0.08em;
  color: #a09da3;
}
.game-window-bottom {
  font-size: 12px;
  color: #f3eeee;
}
.display-caption {
  color: #77757c;
  text-align: center;
}
.coming-project {
  padding: 115px 6%;
  background: #e9eee7;
  color: #152419;
  overflow: hidden;
}
.coming-project > .eyebrow {
  color: #556456;
}
.coming-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
  align-items: center;
  max-width: 1320px;
  margin: auto;
}
.coming-layout h2 {
  font-size: clamp(48px, 6vw, 85px);
  letter-spacing: -0.06em;
  margin-bottom: 24px;
}
.coming-layout p {
  max-width: 440px;
  color: #506057;
}
.coming-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 35px;
  font:
    600 13px/1.5 "Anuphan",
    sans-serif;
  letter-spacing: 0.06em;
}
.coming-label i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #45713e;
  box-shadow: 0 0 0 6px #45713e16;
}
.unrevealed-game {
  position: relative;
  min-height: 360px;
  background: #14201c;
  border-radius: 28px;
  color: #eaf7ea;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.unrevealed-game > span {
  font:
    500 11px/1.6 "Anuphan",
    sans-serif;
  letter-spacing: 0.13em;
  color: #83fd80;
}
.unrevealed-game h3 {
  font:
    600 31px/1.4 "Anuphan",
    sans-serif;
  margin: 10px 0;
}
.unrevealed-game p {
  color: #a0b1a5;
}
.unrevealed-symbol {
  position: absolute;
  right: 15px;
  top: -10px;
  transform: rotate(-18deg);
  width: 240px;
  height: 230px;
  opacity: 0.6;
}
.unrevealed-symbol i {
  display: block;
  position: absolute;
  border: 1px solid #83fd80;
  border-radius: 30px;
  width: 135px;
  height: 135px;
  top: 15px;
  left: 20px;
}
.unrevealed-symbol i:nth-child(2) {
  top: 50px;
  left: 55px;
}
.unrevealed-symbol i:nth-child(3) {
  top: 85px;
  left: 90px;
}
.archive-section {
  padding: 75px 6% 110px;
}
.archive-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 32px 0;
  border-bottom: 1px solid #333;
}
.archive-compact .eyebrow {
  margin-bottom: 12px;
}
.archive-compact h3 {
  font:
    600 27px/1.4 "Anuphan",
    sans-serif;
}
.archive-compact p:not(.eyebrow) {
  color: #aaa;
}
.games-page .credits h2 {
  font-size: clamp(35px, 4.5vw, 64px);
}
.games-page .credits li {
  gap: 20px;
}
.games-page .credits li > span {
  flex: none;
}
@media (max-width: 850px) {
  .coming-layout {
    gap: 35px;
  }
  .unrevealed-game {
    padding: 30px;
  }
  .game-window-top,
  .game-window-bottom {
    padding: 15px;
  }
}
@media (max-width: 700px) {
  .games-hero {
    padding-top: 145px;
    min-height: 800px;
  }
  .games-hero h1 {
    font-size: clamp(46px, 11.8vw, 75px);
  }
  .game-orbit {
    right: -65%;
    top: 20%;
    opacity: 0.18;
  }
  .game-group-links {
    flex-wrap: wrap;
  }
  .games-page .scene-copy h2 {
    font-size: 48px;
  }
  .game-window {
    transform: none;
  }
  .game-actions {
    gap: 12px;
  }
  .coming-project {
    padding: 75px 6%;
  }
  .coming-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .coming-layout h2 {
    font-size: 60px;
  }
  .unrevealed-game {
    min-height: 330px;
  }
  .archive-section {
    padding: 60px 6% 70px;
  }
  .archive-compact {
    flex-wrap: wrap;
    gap: 20px;
  }
  .archive-compact p {
    width: 100%;
    order: 3;
  }
  .games-page .credits li {
    font-size: 20px;
    flex-wrap: wrap;
  }
  .game-window-top {
    font-size: 9px;
  }
  .game-window-bottom {
    font-size: 11px;
  }
}

.obby-showcase {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: center;
  gap: 40px;
  padding: clamp(65px, 9vw, 140px) 6%;
  background: #15211d;
  color: #dbfae2;
}
.obby-platforms {
  display: flex;
  justify-content: center;
  gap: 6%;
  padding-block: 54px;
}
.obby-platforms i {
  width: 19%;
  aspect-ratio: 1.8;
  background: #83fd80;
  box-shadow: 0 9px #396147;
  transform: skewY(-15deg);
}
.obby-platforms i:nth-child(2) {
  translate: 0 -22px;
}
.obby-platforms i:nth-child(3) {
  translate: 0 -44px;
}
@media (max-width: 700px) {
  .obby-showcase {
    grid-template-columns: 1fr;
  }
}

/* ฉากเลื่อนแบบย้อนกลับได้: ชื่อสตูดิโอ → สถานี → แท้งค์น้ำ → เกม */
.game-group-links {
  flex-wrap: wrap;
}

/* Both layers use the same 2048px coordinate space, including on portrait screens. */
.pha-story {
  background: #22313e;
}
.pha-stage {
  height: 100svh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(#184f94, #387fbd 40%, #92c5df 70%, #e4edf1);
  background-size: 100% 240%;
  background-position: center calc(var(--pan, 1) * 100%);
}
.pha-flight.is-scrubbed {
  height: 340svh;
}
.is-scrubbed .pha-stage {
  position: sticky;
  top: 0;
}
.pha-studio {
  position: absolute;
  top: 23%;
  width: 100%;
  text-align: center;
  color: white;
  font:
    italic 900 clamp(40px, 7vw, 100px) / 1 "Archivo Black",
    sans-serif;
  letter-spacing: -0.07em;
  transform: translateY(calc(var(--studio-exit, 1) * -65svh));
}
.pha-landscape {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: max(100%, 108svh);
  aspect-ratio: 2048 / 1080;
  transform: translate(-50%, calc((1 - var(--pan, 1)) * 72%));
}
.pha-landscape :is(.pha-ridge, .pha-town) {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
  display: block;
}
.pha-ridge {
  /* Raise the ridge 82–170 source pixels: the town's roof always covers its cut edge. */
  transform: translateY(calc(-15.74% + var(--pan, 1) * 8.15%));
}
/* Back the street pixels below the roofline, including small translucent spots in the PNG. */
.pha-landscape::after {
  content: "";
  position: absolute;
  inset: 52% 0 0;
  background: #354651;
}
.pha-ridge {
  z-index: 1;
}
.pha-landscape::after {
  z-index: 3;
}
.pha-town {
  z-index: 4;
}
/* ชื่อสตูดิโอเท่านั้นที่เฟด โลโก้และคำอธิบายใช้การเลื่อนกับลำดับชั้นภาพ */
.pha-studio strong {
  display: block;
  opacity: var(--studio-enter, 1);
  transform: translateY(calc((1 - var(--studio-enter, 1)) * 16svh));
}
.pha-kicker {
  display: block;
  margin-bottom: 12px;
  font:
    600 clamp(16px, 2vw, 22px) / 1.4 Anuphan,
    sans-serif;
  letter-spacing: 0;
  opacity: var(--kicker-enter, 1);
}
.pha-logo,
.pha-description {
  position: absolute;
  transform: translate(-50%, calc((1 - var(--rise, 1)) * 100svh));
}
.pha-logo {
  --rise: var(--logo-rise, 1);
  left: calc(50% - 17vw);
  bottom: max(59svh, 66%);
  width: clamp(90px, 18svh, 190px);
  height: auto;
}
.pha-description {
  --rise: var(--description-rise, 1);
  z-index: 2;
  left: calc(50% + 16vw);
  bottom: max(60svh, 65%);
  width: min(35vw, 40ch);
  margin: 0;
  color: #102c42;
  font-weight: 600;
}
.pha-end {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(54px, 9svh, 110px) 6% max(22px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, #008acf99 52%, #007ec8 100%);
  color: white;
  transform: translateY(calc((1 - var(--end-rise, 1)) * 101%));
}
.pha-end h2 {
  font-size: clamp(32px, 4.8vw, 72px);
  line-height: 1.05;
}
.pha-end p {
  margin: 4px 0 0;
}
.pha-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 108px;
  padding: 12px 24px;
  border-radius: 999px;
  background: #087e43;
  color: white;
  box-shadow:
    0 4px 0 #06522f,
    0 9px 18px #00335245;
  font:
    700 18px/1.4 Anuphan,
    sans-serif;
}
.pha-play:hover,
.pha-play:focus-visible {
  background: #066735;
}
@media (max-width: 700px) and (orientation: portrait) {
  .pha-logo {
    left: 50%;
    bottom: 66svh;
    width: min(25vw, 14svh);
  }
  .pha-description {
    left: 50%;
    bottom: 45svh;
    width: min(84vw, 38ch);
    text-align: center;
  }
}
@media (min-aspect-ratio: 2/1) {
  .pha-landscape {
    bottom: min(0px, calc(52svh - 29vw));
  }
}
.games-page .site-header.over-pha-flight {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: 0 1px 6px #153547;
}