/* =========================================================
   SMALL TOWN MAHJ — MAT FIELD
   The cobalt center should read immediately as a designed Mahjong mat,
   not as a flat blue website background.
   ========================================================= */

.tabletop-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.07), transparent 28rem),
    radial-gradient(circle at 50% 84%, rgba(83,130,183,.09), transparent 34rem),
    linear-gradient(180deg, #0b377a 0%, #062b67 32%, #05265c 70%, #042352 100%);
  box-shadow:
    0 12px 36px rgba(2,25,64,.25),
    inset 0 0 82px rgba(0,13,45,.34);
}

/* Upholstered / piped inner seam. */
.tabletop-shell::before {
  z-index: 0;
  inset: 10px;
  border: 1px solid rgba(236,244,251,.16);
  border-radius: 2px;
  background: none;
  box-shadow:
    inset 0 0 0 1px rgba(0,8,28,.09),
    inset 0 0 30px rgba(255,255,255,.022);
  opacity: 1;
  pointer-events: none;
}

/* The center field pattern is intentionally visible now: still tonal, but
   strong enough to read as part of the mat in a normal phone screenshot. */
.tabletop-shell::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.045), transparent 21rem),
    radial-gradient(circle at 50% 70%, rgba(123,165,207,.04), transparent 24rem),
    url('/decor/mat-field-pattern.svg') center top / 640px 640px repeat,
    repeating-linear-gradient(88deg, rgba(255,255,255,.014) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(2deg, rgba(0,8,28,.016) 0 1px, transparent 1px 10px);
  content: '';
  opacity: .42;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Visible floral vines run down the left and right edges of the cobalt field,
   echoing the real floral-trim Mahjong mat reference. */
.mat-side-ornament {
  position: absolute !important;
  z-index: 0 !important;
  top: 128px;
  bottom: 100px;
  width: clamp(46px, 5vw, 72px);
  background-image: url('/decor/mat-side-vine.svg');
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto;
  opacity: .48;
  pointer-events: none;
  filter: saturate(.92) drop-shadow(0 0 10px rgba(116,160,204,.08));
}

.mat-side-ornament--left {
  left: 8px;
}

.mat-side-ornament--right {
  right: 8px;
  transform: scaleX(-1);
}

/* Ensure interface objects sit above the mat artwork. */
.tabletop-shell > * {
  position: relative;
  z-index: 1;
}

.tabletop-shell > .mat-side-ornament {
  position: absolute;
  z-index: 0;
}

/* Transparent landing chapters let the field and vines remain visible. */
.landing-moments,
.landing-about,
.landing-invite {
  background-color: transparent;
}

/* The hero previously covered almost the entire blue field on phones. Leave
   a deliberate strip of mat visible so the visitor can actually read the
   tabletop concept before scrolling. */
@media (max-width: 680px) {
  .tabletop-hero .hero-tile {
    width: calc(100% - 34px);
  }
}

@media (max-width: 980px) {
  .tabletop-shell::before {
    inset: 8px;
  }

  .tabletop-shell::after {
    background:
      radial-gradient(circle at 50% 28%, rgba(255,255,255,.04), transparent 17rem),
      url('/decor/mat-field-pattern.svg') center top / 520px 520px repeat,
      repeating-linear-gradient(88deg, rgba(255,255,255,.012) 0 1px, transparent 1px 7px),
      repeating-linear-gradient(2deg, rgba(0,8,28,.014) 0 1px, transparent 1px 9px);
    opacity: .38;
  }

  .mat-side-ornament {
    top: 110px;
    bottom: 80px;
    width: 52px;
    opacity: .45;
  }

  .mat-side-ornament--left { left: 3px; }
  .mat-side-ornament--right { right: 3px; }
}

@media (max-width: 680px) {
  .tabletop-shell::before {
    inset: 6px;
  }

  .tabletop-shell::after {
    background:
      radial-gradient(circle at 50% 24%, rgba(255,255,255,.036), transparent 12rem),
      url('/decor/mat-field-pattern.svg') center top / 390px 390px repeat,
      repeating-linear-gradient(88deg, rgba(255,255,255,.01) 0 1px, transparent 1px 6px),
      repeating-linear-gradient(2deg, rgba(0,8,28,.012) 0 1px, transparent 1px 8px);
    opacity: .36;
  }

  .mat-side-ornament {
    top: 96px;
    bottom: 60px;
    width: 42px;
    opacity: .42;
  }

  .mat-side-ornament--left { left: -4px; }
  .mat-side-ornament--right { right: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .tabletop-shell::after {
    mix-blend-mode: normal;
    opacity: .28;
  }
}