/* =========================================================
   SMALL TOWN MAHJ — FIXED MAHJONG MAT FRAME
   Artwork fills the binding. Two matching porcelain rails cross
   at every corner. The inner playing field begins exactly where
   the inside rail ends, with no extra gutter.
   ========================================================= */

:root {
  --mat-porcelain-blue: #174b8f;
  --mat-porcelain-ivory: #fff9ee;

  /* Slightly deeper binding gives the artwork breathing room. */
  --mat-frame-side: 30px;
  --mat-frame-top: 30px;
  --mat-frame-bottom: 30px;

  /* Matching 3px rails. Outer rail moves inward so more artwork is visible
     between the screen edge and the first porcelain line. */
  --mat-rule-width: 3px;
  --mat-rule-gap: 10px;
  --mat-rule-outer-offset: 11px;

  /* Artwork slot. The design covers the fixed frame, including the top and
     bottom safe-area portions of the page viewport. */
  --mat-frame-art: url('/decor/mat-frame-design.png');
  --mat-frame-art-size: 220px 220px;

  --mat-edge-side: var(--mat-frame-side);
  --mat-edge-top: var(--mat-frame-top);
  --mat-edge-bottom: var(--mat-frame-bottom);
}

html,
body {
  max-width: 100%;
  min-height: 100%;
  overflow-x: clip;
  background: var(--mat-porcelain-ivory) !important;
}

body {
  margin: 0 !important;
  padding:
    calc(var(--mat-frame-top) + env(safe-area-inset-top, 0px))
    var(--mat-frame-side)
    calc(var(--mat-frame-bottom) + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   FIXED FRAME SURFACE
   --------------------------------------------------------- */
.mat-edge-frame {
  position: fixed !important;
  z-index: 500 !important;
  inset: 0 !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transform: translateZ(0);
  background-color: transparent;
}

.mat-edge {
  position: fixed !important;
  z-index: 1 !important;
  display: block !important;
  background-color: var(--mat-porcelain-ivory) !important;
  background-image: var(--mat-frame-art) !important;
  background-repeat: repeat !important;
  background-position: center !important;
  background-size: var(--mat-frame-art-size) !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Top and bottom include safe-area depth so artwork visually reaches
   the very top and bottom of the page viewport on supported mobile browsers. */
.mat-edge--top {
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  height: calc(var(--mat-frame-top) + env(safe-area-inset-top, 0px)) !important;
}

.mat-edge--bottom {
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: calc(var(--mat-frame-bottom) + env(safe-area-inset-bottom, 0px)) !important;
}

.mat-edge--left {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: var(--mat-frame-side) !important;
}

.mat-edge--right {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: var(--mat-frame-side) !important;
}

.mat-corner,
.mat-edge::before,
.mat-edge::after {
  display: none !important;
  content: none !important;
}

/* ---------------------------------------------------------
   CROSSING DOUBLE PORCELAIN RAILS
   Both rails use the same cobalt. Horizontal and vertical rails run
   edge-to-edge so they visibly cross at every corner.
   --------------------------------------------------------- */
.mat-edge-frame::before {
  position: fixed;
  z-index: 4;
  inset: 0;
  content: '';
  pointer-events: none;
  background:
    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      0 calc(env(safe-area-inset-top, 0px) + var(--mat-rule-outer-offset)) / 100% var(--mat-rule-width) no-repeat,
    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      0 calc(env(safe-area-inset-top, 0px) + var(--mat-frame-top) - var(--mat-rule-width)) / 100% var(--mat-rule-width) no-repeat,

    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      0 calc(100% - env(safe-area-inset-bottom, 0px) - var(--mat-frame-bottom)) / 100% var(--mat-rule-width) no-repeat,
    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      0 calc(100% - env(safe-area-inset-bottom, 0px) - var(--mat-rule-outer-offset) - var(--mat-rule-width)) / 100% var(--mat-rule-width) no-repeat,

    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      var(--mat-rule-outer-offset) 0 / var(--mat-rule-width) 100% no-repeat,
    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      calc(var(--mat-frame-side) - var(--mat-rule-width)) 0 / var(--mat-rule-width) 100% no-repeat,

    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      calc(100% - var(--mat-frame-side)) 0 / var(--mat-rule-width) 100% no-repeat,
    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      calc(100% - var(--mat-rule-outer-offset) - var(--mat-rule-width)) 0 / var(--mat-rule-width) 100% no-repeat;
}

.mat-edge-frame::after {
  display: none !important;
  content: none !important;
}

/* ---------------------------------------------------------
   INNER PLAYING FIELD
   No extra gutter: cobalt begins exactly at the inside rail boundary.
   Important: do not create a clipping/stacking context here. The fixed crest
   must be able to rise out of the playing field and render above the frame.
   --------------------------------------------------------- */
.tabletop-shell {
  position: relative;
  isolation: auto !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #083477 !important;
  box-shadow: inset 0 0 46px rgba(0,12,42,.14) !important;
}

.tabletop-shell::before,
.tabletop-shell::after {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body > .tabletop-shell {
  min-height: calc(100dvh - var(--mat-frame-top) - var(--mat-frame-bottom) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------
   FIXED CONTROL RAIL
   On tablet/mobile, the logo + Book Now + hamburger stay locked directly
   beneath the fixed top mat binding while page content scrolls behind them.
   The crest intentionally rises above the rail and over the frame artwork.
   --------------------------------------------------------- */
@media (max-width: 980px) {
  :root {
    --mat-frame-side: 28px;
    --mat-frame-top: 28px;
    --mat-frame-bottom: 28px;
    --mat-rule-width: 3px;
    --mat-rule-gap: 9px;
    --mat-rule-outer-offset: 10px;
    --mat-frame-art-size: 180px 180px;
    --mat-control-height: 72px;
  }

  .site-header.mat-header,
  .site-header.mat-header[data-scrolled] {
    position: fixed !important;
    z-index: 700 !important;
    top: calc(var(--mat-frame-top) + env(safe-area-inset-top, 0px)) !important;
    right: var(--mat-frame-side) !important;
    left: var(--mat-frame-side) !important;
    width: auto !important;
    height: var(--mat-control-height) !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(126,166,213,.14) !important;
    background: rgba(8,52,119,.985) !important;
    box-shadow: 0 7px 16px rgba(0,18,51,.10) !important;
    backdrop-filter: none !important;
  }

  .tabletop-shell > main {
    padding-top: var(--mat-control-height) !important;
  }

  .site-header.mat-header::before,
  .site-header.mat-header::after,
  .site-header.mat-header[data-scrolled]::before,
  .site-header.mat-header[data-scrolled]::after {
    display: none !important;
    content: none !important;
  }

  .site-header.mat-header .site-header__inner {
    position: relative;
    z-index: 701 !important;
    min-height: var(--mat-control-height) !important;
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  .mat-crest,
  .site-header.mat-header[data-scrolled] .mat-crest {
    position: absolute !important;
    top: -22px !important;
    width: 132px !important;
    z-index: 750 !important;
    overflow: visible !important;
  }

  .mat-crest img {
    position: relative !important;
    z-index: 751 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .header-book-tile {
    top: 14px !important;
    left: 0 !important;
  }

  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle {
    top: 14px !important;
    right: 0 !important;
  }

  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    top: 78px !important;
  }
}

@media (max-width: 680px) {
  :root {
    --mat-frame-side: 26px;
    --mat-frame-top: 26px;
    --mat-frame-bottom: 26px;
    --mat-rule-width: 3px;
    --mat-rule-gap: 8px;
    --mat-rule-outer-offset: 10px;
    --mat-frame-art-size: 150px 150px;
    --mat-control-height: 68px;
  }

  .site-header.mat-header,
  .site-header.mat-header[data-scrolled] {
    height: var(--mat-control-height) !important;
  }

  .site-header.mat-header .site-header__inner {
    min-height: var(--mat-control-height) !important;
    width: calc(100% - 16px) !important;
  }

  .mat-crest,
  .site-header.mat-header[data-scrolled] .mat-crest {
    top: -24px !important;
    width: 132px !important;
  }

  .header-book-tile {
    top: 13px !important;
    min-height: 40px !important;
  }

  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle {
    top: 13px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    top: 74px !important;
  }
}