/* =========================================================
   SMALL TOWN MAHJ — FIXED VIEWPORT MAT + FIXED HEADER CONTROLS
   Mobile/tablet only. The complete decorative mat frame is owned by the
   fixed frame layer. The header controls float above it. Only the cobalt
   playing-field content scrolls inside the inner rectangle.
   ========================================================= */

@media (max-width: 980px) {
  :root {
    --mat-top-safe: env(safe-area-inset-top, 0px);
    --mat-bottom-safe: env(safe-area-inset-bottom, 0px);
    --mat-top-binding-height: calc(var(--mat-top-safe) + var(--mat-frame-top));
    --mat-top-assembly-height: calc(var(--mat-top-binding-height) + var(--mat-control-height));
    --mat-header-cobalt: #062e68;
    --mat-field-cobalt: #083477;
  }

  html,
  body {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body {
    position: fixed !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mat-edge--top {
    display: block !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: var(--mat-top-binding-height) !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;
  }

  .mat-edge-frame {
    z-index: 500 !important;
  }

  body > .tabletop-shell {
    position: fixed !important;
    z-index: 100 !important;
    top: var(--mat-top-binding-height) !important;
    right: var(--mat-frame-side) !important;
    bottom: calc(var(--mat-frame-bottom) + var(--mat-bottom-safe)) !important;
    left: var(--mat-frame-side) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    background: var(--mat-field-cobalt) !important;
  }

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

  .site-header.mat-header,
  .site-header.mat-header[data-scrolled] {
    position: fixed !important;
    z-index: 900 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: var(--mat-top-assembly-height) !important;
    overflow: visible !important;
    border: 0 !important;
    background:
      linear-gradient(var(--mat-header-cobalt), var(--mat-header-cobalt))
        var(--mat-frame-side) var(--mat-top-binding-height) /
        calc(100% - (var(--mat-frame-side) * 2)) var(--mat-control-height) no-repeat !important;
    box-shadow: 0 10px 18px rgba(0,18,51,.18) !important;
    backdrop-filter: none !important;
    transform: none !important;
    pointer-events: none;
  }

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

  /* A single porcelain rail cleanly separates the fixed header rack from
     the scrolling playing field without over-decorating the transition. */
  .site-header.mat-header::after,
  .site-header.mat-header[data-scrolled]::after {
    position: absolute !important;
    z-index: 905 !important;
    right: var(--mat-frame-side) !important;
    bottom: 0 !important;
    left: var(--mat-frame-side) !important;
    display: block !important;
    height: 1px !important;
    content: '' !important;
    pointer-events: none !important;
    background: var(--mat-porcelain-ivory) !important;
    box-shadow: 0 7px 11px rgba(0,18,51,.16) !important;
  }

  .site-header.mat-header .site-header__inner,
  .site-header.mat-header[data-scrolled] .site-header__inner {
    position: absolute !important;
    z-index: 910 !important;
    top: var(--mat-top-binding-height) !important;
    right: var(--mat-frame-side) !important;
    left: var(--mat-frame-side) !important;
    width: auto !important;
    max-width: none !important;
    min-height: var(--mat-control-height) !important;
    height: var(--mat-control-height) !important;
    margin: 0 !important;
    overflow: visible !important;
    pointer-events: auto;
  }

  /* Slightly smaller crest with a guaranteed visible top edge. It still
     overlaps the patterned binding, but its box stays below the safe-area
     ceiling so no part of the logo is clipped by the viewport. */
  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    position: absolute !important;
    z-index: 2000 !important;
    top: max(calc(var(--mat-top-safe) + 4px), calc(var(--mat-top-binding-height) - 28px)) !important;
    left: 50% !important;
    width: 118px !important;
    max-width: 118px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    pointer-events: auto;
  }

  .site-header.mat-header > .mat-crest img,
  .site-header.mat-header[data-scrolled] > .mat-crest img {
    position: relative !important;
    z-index: 2001 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    overflow: visible !important;
  }

  /* Pull both controls inward so the top composition reads as a centered
     three-piece cluster: BOOK — crest — menu. */
  .header-book-tile {
    top: 12px !important;
    left: 24px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(23,75,143,.38) !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, #fffdf8 0%, #f7f1e7 100%) !important;
    box-shadow:
      0 2px 0 rgba(182,166,143,.9),
      0 5px 12px rgba(3,28,65,.12),
      inset 0 0 0 2px rgba(255,255,255,.8) !important;
    font-size: .64rem !important;
    letter-spacing: .11em !important;
  }

  .header-book-tile::before {
    inset: 4px !important;
    border-color: rgba(23,75,143,.16) !important;
    border-radius: 6px !important;
  }

  .header-book-tile::after {
    margin-left: .38rem !important;
    font-size: .4rem !important;
    opacity: .68 !important;
  }

  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle {
    top: 12px !important;
    right: 24px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border: 1px solid rgba(23,75,143,.38) !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, #fffdf8 0%, #f7f1e7 100%) !important;
    box-shadow:
      0 2px 0 rgba(182,166,143,.9),
      0 5px 12px rgba(3,28,65,.12),
      inset 0 0 0 2px rgba(255,255,255,.8) !important;
    padding: 0 !important;
  }

  .site-header.mat-header .nav-toggle__face,
  .site-header.mat-header[data-scrolled] .nav-toggle__face {
    width: 22px !important;
    gap: 4px !important;
  }

  .site-header.mat-header .nav-toggle__face i,
  .site-header.mat-header[data-scrolled] .nav-toggle__face i {
    width: 22px !important;
    height: 2px !important;
    border-radius: 999px !important;
  }

  .header-book-tile,
  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle,
  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    z-index: 1000 !important;
    pointer-events: auto;
  }
}

@media (min-width: 681px) and (max-width: 980px) {
  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    top: max(calc(var(--mat-top-safe) + 5px), calc(var(--mat-top-binding-height) - 32px)) !important;
    width: 122px !important;
    max-width: 122px !important;
  }

  .header-book-tile {
    left: 30px !important;
  }

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