/* The landing illustration (landing.js): one moment at the club on deep felt. Everything is sized
   in container units, so the scene scales as one picture with the hero column. */
.club-scene {
  container-type: inline-size;
  --felt-light: #23704f;
  --felt: #1a5a40;
  --felt-dark: #103a2b;
  --rim: #6a4428;
  --rim-dark: #3f2717;
  --ivory: #fffdf6;
  --ivory-shade: #eee6d2;
  --jade-edge: #1c6a4d;
  --stamp: #b8322a;
}
.scene-felt {
  position: relative;
  aspect-ratio: 1 / 0.92;
  border-radius: 3.2cqi;
  background: radial-gradient(
    120% 95% at 50% 42%,
    var(--felt-light) 0%,
    var(--felt) 52%,
    var(--felt-dark) 100%
  );
  box-shadow:
    inset 0 0 0 1.6cqi var(--rim),
    inset 0 0 0 2cqi var(--rim-dark),
    inset 0 1.2cqi 4cqi rgb(0 0 0 / 0.45),
    0 2cqi 5cqi rgb(28 40 32 / 0.28);
  overflow: hidden;
}

/* Tiles: an ivory body with the jade back showing along its lower edge. */
.scene-tile {
  --w: 6.05cqi;
  display: inline-grid;
  place-items: center;
  width: var(--w);
  aspect-ratio: 3 / 4;
  padding: calc(var(--w) * 0.06);
  box-sizing: border-box;
  border-radius: calc(var(--w) * 0.14);
  background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-shade) 100%);
  box-shadow:
    0 calc(var(--w) * 0.09) 0 var(--jade-edge),
    0 calc(var(--w) * 0.16) calc(var(--w) * 0.24) rgb(0 0 0 / 0.38);
}
.scene-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.scene-tile.flat {
  --w: 4.2cqi;
  box-shadow:
    0 calc(var(--w) * 0.06) 0 var(--jade-edge),
    0 calc(var(--w) * 0.1) calc(var(--w) * 0.18) rgb(0 0 0 / 0.32);
}

/* The regulars, upright name plates under round portraits. */
.scene-seat {
  position: absolute;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 0.8cqi;
  width: 16cqi;
}
.scene-seat img {
  width: 11.5cqi;
  height: 11.5cqi;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 50%;
  background: #f5ecd8;
  border: 0.55cqi solid #f5ecd8;
  box-shadow: 0 0.8cqi 1.8cqi rgb(0 0 0 / 0.35);
}
.scene-seat figcaption {
  display: inline-flex;
  align-items: center;
  gap: 0.9cqi;
  padding: 0.5cqi 1.5cqi 0.5cqi 0.6cqi;
  border-radius: 99px;
  background: rgb(8 30 22 / 0.72);
  color: #f7f0de;
  font:
    700 2.25cqi/1.2 'Nunito Sans',
    system-ui,
    sans-serif;
  white-space: nowrap;
}
.scene-seat figcaption b {
  display: inline-grid;
  place-items: center;
  width: 3.3cqi;
  height: 3.3cqi;
  border-radius: 0.8cqi;
  background: var(--ivory);
  color: #173c30;
  font:
    700 2.3cqi/1 'Noto Sans SC',
    'PingFang SC',
    sans-serif;
}
.scene-seat-top {
  left: 50%;
  top: 4.5cqi;
  transform: translateX(-50%);
}
.scene-seat-left {
  left: 4cqi;
  top: 38cqi;
}
.scene-seat-right {
  right: 4cqi;
  top: 38cqi;
}

/* Uncle Lim's call: the claimed pong in front of him, the stamp and his words. */
.scene-meld {
  position: absolute;
  left: 50%;
  top: 26cqi;
  transform: translateX(-50%);
  display: flex;
  gap: 0.35cqi;
}
.scene-meld .scene-tile {
  --w: 5cqi;
}
.scene-stamp {
  position: absolute;
  left: 61cqi;
  top: 19cqi;
  margin: 0;
  display: grid;
  justify-items: center;
  padding: 1.2cqi 2.2cqi 1.1cqi;
  border-radius: 1.4cqi;
  background: var(--stamp);
  color: #fff8ec;
  transform: rotate(-7deg);
  box-shadow:
    0 0 0 0.45cqi rgb(255 248 236 / 0.85),
    0 1.2cqi 2.4cqi rgb(0 0 0 / 0.35);
}
.scene-stamp b {
  font:
    400 6.4cqi/1 'DM Serif Display',
    'Noto Serif SC',
    serif;
  color: #fff8ec;
}
.scene-stamp span {
  color: #fff8ec;
  font:
    800 1.75cqi/1.2 'Nunito Sans',
    system-ui,
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.scene-bubble {
  position: absolute;
  left: 60cqi;
  top: 6cqi;
  margin: 0;
  padding: 1.3cqi 2.2cqi;
  border-radius: 2.4cqi;
  background: var(--ivory);
  color: #173c30;
  font:
    800 2.6cqi/1.2 'Nunito Sans',
    system-ui,
    sans-serif;
  box-shadow: 0 0.8cqi 1.8cqi rgb(0 0 0 / 0.28);
}
.scene-bubble::before {
  content: '';
  position: absolute;
  left: -1.4cqi;
  top: 55%;
  border: 1.2cqi solid transparent;
  border-right-color: var(--ivory);
  border-left: 0;
  transform: translateY(-50%);
}

/* Discards laid in front of each player, oriented towards them, as at a real table. */
.scene-river {
  position: absolute;
  display: flex;
  gap: 0.3cqi;
}
.scene-river-top {
  left: 50cqi;
  top: 37cqi;
  transform: translate(-50%, -50%) rotate(180deg);
}
.scene-river-bottom {
  left: 50cqi;
  top: 58cqi;
  transform: translate(-50%, -50%);
}
.scene-river-left {
  left: 33cqi;
  top: 47.5cqi;
  transform: translate(-50%, -50%) rotate(90deg);
}
.scene-river-right {
  left: 67cqi;
  top: 47.5cqi;
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* Your hand, standing along your edge of the table. */
.scene-hand {
  position: absolute;
  left: 5cqi;
  right: 5cqi;
  bottom: 5cqi;
  display: flex;
  gap: 0.18cqi;
}
.scene-hand .scene-tile {
  --w: calc((90cqi - 2.16cqi) / 13);
  flex: 0 0 var(--w);
}
.scene-turn {
  position: absolute;
  left: 50%;
  bottom: 16.5cqi;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.7cqi 2cqi;
  border-radius: 99px;
  background: #e2b85c;
  color: #2a1e08;
  font:
    800 2.1cqi/1.2 'Nunito Sans',
    system-ui,
    sans-serif;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .scene-stamp {
    animation: scene-stamp-in 520ms cubic-bezier(0.2, 0.9, 0.3, 1.25) 350ms both;
  }
  .scene-bubble {
    animation: scene-bubble-in 360ms ease-out 700ms both;
  }
}
@keyframes scene-stamp-in {
  from {
    opacity: 0;
    transform: rotate(-7deg) scale(1.6);
  }
  to {
    opacity: 1;
    transform: rotate(-7deg) scale(1);
  }
}
@keyframes scene-bubble-in {
  from {
    opacity: 0;
    transform: translateY(1cqi);
  }
  to {
    opacity: 1;
    transform: none;
  }
}