/* CoinMahjong case study.
   Figma node 216:33671 is a 2600px by 4859px artboard. This page keeps that
   artboard as the layout model: max width 2600px, centered, then scaled by
   available width without reflowing the visual composition. */

.cm-page {
  background: #ffffff;
}

.cm-main {
  overflow-x: hidden;
  background:
    linear-gradient(180deg, #ffffff 0%, #ffffff 19.9%, #f1f1f1 50%, #f1f1f1 100%);
}

.cm-stage-viewport {
  container-type: inline-size;
  position: relative;
  width: 100%;
  height: 4859px;
  margin: 0 auto;
  overflow: hidden;
}

.cm-stage {
  container-type: inline-size;
  position: absolute;
  top: 0;
  left: 50%;
  width: 2600px;
  height: 4859px;
  transform: translateX(-50%);
  transform-origin: top center;
  /* Clip horizontal bleed (keeps the design width crisp) but let the tablet,
     which is placed past the artboard bottom, spill down into the viewport
     instead of being cut off — the viewport is what bounds the page. */
  overflow-x: clip;
  overflow-y: visible;
}

.cm-stage > * {
  position: absolute;
  margin: 0;
}

.cm-stage img {
  display: block;
  max-width: none;
  height: auto;
  user-select: none;
}

.cm-stage img:not(.cm-tablet-device) {
  transform-origin: center;
  transition:
    transform 360ms cubic-bezier(0.18, 0.89, 0.32, 1.18),
    filter 360ms cubic-bezier(0.18, 0.89, 0.32, 1.18);
  will-change: transform;
}

.cm-stage img:not(.cm-tablet-device):hover {
  transform: translate3d(0, -0.231cqw, 0) rotate(2.4deg) scale(1.012);
  filter: drop-shadow(0 0.346cqw 0.769cqw rgba(17, 24, 39, 0.1));
}

/* ---------- hero icon field ---------- */

.cm-icon-field {
  left: 17.269%;
  top: 2.15%;
  display: grid;
  grid-template-columns: repeat(7, 14.2857%);
  width: 65.471%;
}

.cm-icon-field > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.cm-logo-cell {
  grid-column: 3 / 6;
  grid-row: 2;
  position: relative;
}

.cm-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76.2%;
  aspect-ratio: 555 / 111;
  transform: translate(-50%, -50%);
}

.cm-logo .cm-logo-mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 20.04%;
  height: 100%;
}

.cm-logo .cm-logo-word {
  position: absolute;
  left: 24.56%;
  top: 24.98%;
  width: 75.37%;
  height: 56.44%;
}

/* ---------- title ---------- */

.cm-stage-title {
  left: 50%;
  top: 18.995%;
  display: flex;
  width: 42.308%;
  flex-direction: column;
  align-items: center;
  gap: 0.615cqw;
  color: var(--case-muted);
  text-align: center;
  transform: translateX(-50%);
}

.cm-stage-title h1 {
  margin: 0;
  width: 100%;
  color: var(--case-ink);
  font-size: 1.231cqw;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.4px;
}

.cm-stage-title p {
  margin: 0;
  width: 75.636%;
  font-size: 0.692cqw;
  font-weight: 400;
  line-height: 1.5;
}

.cm-stage-date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.308cqw;
  font-size: 0.692cqw;
  font-weight: 400;
  line-height: 1.5;
}

.cm-stage-date svg {
  width: 0.923cqw;
  height: 0.923cqw;
}

/* ---------- product composition ---------- */

.cm-room-tournament {
  left: 57.047%;
  top: 22.124%;
  width: 7.21%;
  z-index: 4;
}

.cm-room-japan {
  left: 44.585%;
  top: 23.085%;
  width: 10.638%;
  z-index: 4;
}

.cm-room-training {
  left: 35.77%;
  top: 23.944%;
  width: 6.993%;
  z-index: 4;
}

.cm-hand {
  left: 51.269%;
  top: 26.014%;
  width: 48.731%;
  z-index: 20;
}

.cm-tile-character {
  left: 30.301%;
  top: 30.743%;
  width: 8.026%;
  z-index: 2;
}

.cm-game-phone {
  left: 25.649%;
  top: 34.846%;
  width: 32.024%;
  z-index: 1;
}

.cm-tile-east {
  left: 59.332%;
  top: 35.866%;
  width: 6.149%;
  z-index: 2;
}

.cm-tile-bird {
  left: 61.999%;
  top: 43.948%;
  width: 7.754%;
  z-index: 2;
}

.cm-tile-dots {
  left: 30.6%;
  top: 46.017%;
  width: 6.503%;
  z-index: 2;
}

.cm-tile-bamboo {
  left: 53.319%;
  top: 48.754%;
  width: 7.673%;
  z-index: 2;
}

.cm-phone-room {
  left: 32.097%;
  top: 48.622%;
  width: 20.515%;
  z-index: 1;
}

.cm-phone-lobby {
  left: 13.268%;
  top: 59.585%;
  width: 30.065%;
  z-index: 1;
}

.cm-phone-menu {
  left: 58.299%;
  top: 45.914%;
  width: 32.024%;
  z-index: 1;
}

.cm-tile-green {
  left: 44.558%;
  top: 63.5%;
  width: 6.72%;
  z-index: 2;
}

.cm-streak {
  left: 46.191%;
  top: 68.41%;
  width: 14.802%;
  z-index: 2;
}

.cm-nav-home {
  left: 58.299%;
  top: 62.175%;
  width: 10.611%;
  z-index: 3;
}

.cm-nav-lobby {
  left: 62.434%;
  top: 66.309%;
  width: 9.441%;
  z-index: 3;
}

.cm-nav-tournament {
  left: 59.142%;
  top: 68.408%;
  width: 10.176%;
  z-index: 3;
}

.cm-nav-friend {
  left: 62.434%;
  top: 71.218%;
  width: 9.605%;
  z-index: 3;
}

.cm-tile-north {
  left: 68.72%;
  top: 76.08%;
  width: 8.38%;
  z-index: 2;
}

.cm-tablet-device {
  left: 9.677%;
  top: 81.337%;
  width: 80.646%;
  z-index: 1;
}

/* ---------- text blocks ---------- */

.cm-copy {
  z-index: 4;
  color: var(--case-muted);
  font-family: var(--font-main);
}

.cm-copy h2 {
  margin: 0 0 0.653cqw;
  color: var(--case-ink);
  font-size: 0.871cqw;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.283px;
}

.cm-copy p {
  margin: 0;
  font-size: 0.49cqw;
  font-weight: 400;
  line-height: 1.5;
}

.cm-copy--intro {
  left: 50%;
  top: 31.428%;
  width: 14.992%;
  text-align: center;
  transform: translateX(-50%);
}

.cm-copy--gameplay {
  left: 54.407%;
  top: 58.114%;
  width: 12.081%;
}

.cm-copy--tablet {
  left: 33.239%;
  top: 77.155%;
  width: 12.652%;
}

@media (max-width: 979.98px) {
  .cm-stage-viewport {
    height: calc(4859 / 2600 * 100vw);
    margin-top: max(0px, calc(var(--nav-height) + 16px - 5.769vw));
  }

  .cm-stage {
    transform: translateX(-50%) scale(calc(100vw / 2600px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cm-stage img:not(.cm-tablet-device) {
    transition: none;
    will-change: auto;
  }

  .cm-stage img:not(.cm-tablet-device):hover {
    transform: none;
    filter: none;
  }
}