/* ==========================================================================
   mobile.css — the site on a phone (MOBILE.md, reference/phone-mockup.html)
   --------------------------------------------------------------------------
   A RE-COMPOSITION, not a shrink. The isometric room doesn't squeeze into
   390px and stay usable (five tables in 195 art px cover each other), so a
   phone gets the same markup laid out on purpose for it:

     1. the room is the HEADER: a slice of the bar at 2x, the sign at true
        centre, that scrolls away (never pinned)
     2. the five tables are stacked PLATES: the same tabletop PNGs cropped
        to their branded top, at 2x, 280px wide, centred, one under another
     3. OPEN NOW: hours, CALL and DIRECTIONS, never behind a tap
     4. the panels (MENU, ORDER, ABOUT, GAMES, EVENTS, ACCOUNT) go
        FULL-SCREEN: no inset, no room down the sides

   WHEN: wherever the room stops working as navigation, measured, not
   guessed: a tap in the middle of a table's word must open THAT table.
   At the room's smallest scale (2x, 304px a table) that fails below about
   920px wide (at 901 a tap on MENU opens GAMES), and below about 1150px
   wide once the window is under about 680px tall (the floor squeezes and
   the tables stack). So:
     up to 1023px wide              a phone, or a tablet held upright
     up to 1151px and under 680px   a small, short window
     under 500px tall               a phone on its side (the bar alone is
                                    taller than that)
   1366x768 and up is the room, exactly as before.

   This is the one breakpoint for the whole re-composition. --phone below
   tells js/room.js and js/people.js which layout they're in, so the
   scripts never keep a copy of it. CSS can't share a media query, so the
   same query heads the phone sections of account.css, games.css and
   events.css ("css/mobile.css's breakpoint"): change all four together.
   The finer phone rules already in style.css, account.css, games.css and
   events.css (a slim top bar under 760px, a narrow trivia stage) are about
   the panels' insides and stand as they are.

   Pixel art stays at whole-number scales: --px is 2px here (js/room.js
   fixes the scale at 2 for the header), and every art size below is art
   pixels x --px.

   Safe areas: index.html asks for viewport-fit=cover, so a notched phone
   draws edge to edge; everything that has to be seen or tapped is kept
   inside env(safe-area-inset-*).
   ========================================================================== */

:root { --phone: 0; }

/* Only a phone shows these (the room has no page to put them on). */
.bar__tag,
.visit,
.room-foot { display: none; }

@media (max-width: 1023px), (max-width: 1151px) and (max-height: 679px), (max-height: 500px) {
  :root { --phone: 1; }

  /* ---- The page ----------------------------------------------------------
     It scrolls now. Under the header it's the saloon's own floor, at the
     header's scale, so the plates read as the tables seen closer. */
  html { background: var(--wood-dark); }
  .page-room {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    overflow-x: clip;                  /* the bar's far bays never widen the page */
    background: url(../assets/floor-tile.png) 0 0 / calc(128 * var(--px)) calc(64 * var(--px)) repeat var(--wood-dark);
  }
  .room {
    position: relative;
    inset: auto;
    overflow: visible;
    background: none;
    transition: none;
  }
  /* A panel covers the whole screen on a phone: nothing to dim, and a
     filter over the whole page is work for nothing. */
  .room.is-dim { filter: none; }
  /* ...and the page behind it stays where it was (you come back to the
     plates you left from), rather than scrolling underneath. */
  html:has(.panel.is-open) { overflow: hidden; }

  /* ---- 1. The header: a slice of the bar --------------------------------
     From the ceiling beam down through the bartop to the stools' red
     seats: 156 art rows, 312px. The shadow on the floor goes (there's no
     floor under it), and a dark fade at the foot carries the address. */
  .bar {
    height: calc(156 * var(--px));
    margin-top: 0;
    overflow: hidden;                  /* (a browser without clip still keeps the far bays in) */
    overflow: clip;
  }
  .bar__shadow { display: none; }
  .bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(20 * var(--px));
    background: linear-gradient(transparent, rgba(36, 23, 16, .92));
    pointer-events: none;
  }
  .bar__tag {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    z-index: 1;
    margin: 0;
    padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));
    color: #D8BC92;
    font: italic 14px/20px var(--font-menu);
    text-align: center;
    text-shadow: 0 2px 6px #000, 0 0 2px #000;
  }

  /* The account plaque rides the header's corner and scrolls away with it
     (fixed, it would sit over the plates all the way down). */
  .acct-chip {
    position: absolute;
    top: calc(8px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
  }

  /* ---- 2. The plates -----------------------------------------------------
     The five tables, stacked: each tabletop PNG at 2x (304 x 232), shown
     through a 280 x 144 window on its branded top (art px 6-146 across,
     2-74 down), with a hard shadow under it like the mockup's. 2x is the
     largest whole scale that fits 390px with gutters; never stretched,
     never 2-across (the words stop reading as tables). */
  .lobby {
    position: static;
    overflow: visible;
    pointer-events: auto;
    padding: 20px 16px 0;
  }
  .lobby ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .table {
    position: relative;
    z-index: auto;
    width: calc(140 * var(--px));
    height: calc(72 * var(--px));
    filter: drop-shadow(0 calc(3 * var(--px)) 0 rgba(0, 0, 0, .45));
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .table__glow { display: none; }
  .table__art {
    inset: auto;
    left: calc(-6 * var(--px));
    top: calc(-2 * var(--px));
    width: calc(152 * var(--px));
    height: calc(116 * var(--px));
    clip-path: inset(calc(2 * var(--px)) calc(6 * var(--px)) calc(42 * var(--px)));
  }
  /* pressed: down onto its shadow */
  .table:active {
    transform: translateY(calc(2 * var(--px)));
    filter: drop-shadow(0 var(--px) 0 rgba(0, 0, 0, .45));
  }

  /* Nobody stands on a floor that isn't there (js/people.js leaves them be). */
  .floor-people { display: none; }

  /* ---- 3. OPEN NOW -------------------------------------------------------
     Under the plates: open or closed, the hours, and CALL / DIRECTIONS as
     real tel: and maps links with the number and the street on them. A
     bar's commonest phone question is "are you open, and what's the
     number"; it should never take a tap to answer. */
  .visit {
    display: block;
    box-sizing: border-box;
    width: min(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right), 440px);
    margin: 28px auto 0;
    padding: 16px;
    border: 4px solid var(--edge);
    background: linear-gradient(rgba(74, 51, 35, .96), rgba(36, 23, 16, .96));
    box-shadow: inset 0 4px 0 #6B4A2F;
    color: #E4D2AC;
    font-family: var(--font-menu);
  }
  .visit__now {
    margin: 0;
    color: var(--gold-light);
    font: 700 16px/24px var(--font-menu);
    letter-spacing: .12em;
    text-transform: uppercase;
    text-shadow: none;
    will-change: auto;
  }
  .visit__now.is-closed { color: #F0A090; }
  .visit__hours {
    margin: 4px 0 0;
    font: 16px/24px var(--font-menu);
  }
  .visit__go {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
  }
  .visit__btn {
    display: grid;
    place-content: center;
    gap: 2px;
    min-height: 60px;
    padding: 8px 6px;
    border: 4px solid var(--edge);
    background: linear-gradient(#D0A94C, #A37F2E);
    box-shadow: inset 0 4px 0 var(--gold-light);
    color: var(--burn);
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
  }
  .visit__btn:active { background: linear-gradient(#B08A3C, #8A6B28); }
  .visit__verb {
    font: 700 15px/20px var(--font-menu);
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .visit__what {
    font: 600 14px/18px var(--font-menu);
    white-space: nowrap;
  }

  .room-foot {
    display: block;
    padding: 28px 16px calc(40px + env(safe-area-inset-bottom));
    color: #B59D78;
    font: italic 14px/1.7 var(--font-menu);
    text-align: center;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .6);
  }

  /* ---- 4. Panels: full-screen ---------------------------------------------
     No inset and no room at the sides: there isn't space for both. The
     barnwood fills the safe areas (under a notch, behind the home bar);
     the paper runs edge to edge under the top bar. It still rises from
     the plate you tapped (js/menu.js), just to the whole screen. */
  .panel {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    border: 0;
    box-shadow: none;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .panel__sheet,
  .panel--order .panel__sheet {
    width: 100%;
    margin: 0;
    border: 0;
    box-shadow: none;
  }
  .panel__list,
  .panel__page,
  .panel__cats,
  .tab__body { overscroll-behavior: contain; }

  /* Thumb-sized: nothing to hit that's under 44px. */
  .panel__mode,
  .panel__shut { min-height: 44px; }
  .panel__mode { display: flex; align-items: center; }
  .tab__toggle { min-height: 44px; }
  .tab__lines li { align-items: center; }
  .tab__rm { width: 44px; height: 44px; margin: -8px -8px -8px 0; }

  /* The customiser: a sheet up from the bottom, the width of the phone,
     with ADD TO TAB under the thumb. Every option row is a 44px target. */
  .cust {
    width: 100%;
    max-width: none;
    max-height: 92vh;
    max-height: 92dvh;
    margin: auto 0 0;
    border-width: 4px 0 0;
  }
  .cust__form { max-height: calc(92vh - 4px); max-height: calc(92dvh - 4px); }
  .cust__foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .opt { min-height: 44px; padding: 4px 0; }
  .opt input { width: 22px; height: 22px; }
  .cust__qty button { width: 48px; height: 48px; }
  .cust__qty input { height: 48px; }
  .cust__cancel,
  .cust__add { min-height: 48px; }
}

/* A phone on its side: the header stops at the bartop's front (124 art
   rows, 248px), so a plate shows on the first screen. */
@media (max-height: 500px) {
  .bar { height: calc(124 * var(--px)); }
}

/* A small phone (under 380px): the plaque in the corner comes down to 48px
   so it stays clear of the sign at true centre. */
@media (max-width: 379px) {
  .acct-chip { min-width: 48px; top: calc(4px + env(safe-area-inset-top)); right: calc(4px + env(safe-area-inset-right)); padding: 2px 4px; }
}