/* Mahjong — table, controls and dialogs.
   Sized up from the card games' chrome for the same reason jigsaw and Loose
   Ends were: the people this is for are mostly over seventy, often on a laptop
   trackpad, and a 0.92rem button they have to aim at is the difference between
   a game and a chore. Nothing here is smaller than 1rem or shorter than
   2.6rem. */

.mahjong-page {
  margin: 0;

  /* What the table looks like before backgrounds.js has said otherwise —
     which is the first paint, and also what a browser with no JavaScript at
     all is left holding. The same green as the "Green baize" entry, so the
     hand-over is invisible. */
  --mj-table: radial-gradient(ellipse at 50% 28%, #2E7D53 0%, #1E5E3C 55%, #133D28 100%);
}

/* Full-height chain, as the card games, jigsaw and Loose Ends do it: the stage
   takes whatever is left after the header, nav, bars and footer. min-height:0
   on the flex children is what lets them shrink instead of shoving the footer
   off the bottom of the window. */
.mahjong-page .Master {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.mahjong-page .Master > section.mj-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px 10px;
}

/* Full screen puts the shell on a background of its own, and without this it
   is whatever the browser picks — which is white, behind a dark green table,
   in a one pixel band all the way round. */
.mj-shell:fullscreen,
.mj-shell.is-focus {
  background: var(--ground);
  padding: 10px;
}

.mahjong-page footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  padding: 2px 10px;
  margin: 0;
}

.mahjong-page .build-tag,
.mahjong-page .page-hits {
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: var(--footer-size);
  letter-spacing: 0.04em;
  opacity: 0.45;
  margin: 0;
}

.mahjong-page .page-hits::before { content: '· '; }


/* ------------------------------------------------------------- buttons

   The dialogs' main button. The bar that sat over the board is gone: the
   dock is css/games/handheld.css. */

.mj-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
  font-weight: 700;
}

.mj-primary:hover:not(:disabled) { filter: brightness(1.12); }


/* ------------------------------------------------------------- readout */

.mj-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  margin: 0;
  padding: 0 4px;
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.mj-readout__item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.mj-readout b {
  font-size: 1.15rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* How many pairs can go right now is the number that actually says how much
   trouble you are in, so it is the one allowed to shout. */
.mj-readout__free b { color: var(--accent); }

.mj-readout__par {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}


/* --------------------------------------------------------------- stage

   The one element on the page whose background is not the site's. It is set
   from JavaScript by backgrounds.js — see the list at the top of that file —
   and the value here is only what is up before that lands. */

.mj-stage {
  position: relative;
  flex: 1;
  /* A floor, for the same reason Loose Ends has one. The stage is the only
     thing that flexes, so on a short window it was handed whatever the bars
     and the readout left over, and a board squeezed into 160px is a board
     nobody can play. Below this the page scrolls instead: the bars go off the
     top, the board stays a usable size, and full screen is right there. */
  min-height: 18rem;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: var(--mj-table);
  overflow: hidden;
}

/* A dark table wants a darker rim than the site's hairline, or the board
   appears to sit in a lit picture frame. */
.mj-stage--dark { border-color: rgba(0, 0, 0, 0.5); }

.mj-stage > canvas {
  /* Absolute, not height:100%. The stage is a flex item sized by flex-grow
     and min-height, so its own `height` stays auto — and a percentage height
     resolves against the parent's height PROPERTY, not against the box flex
     actually gave it. Loose Ends hit this: height:100% quietly did nothing,
     the canvas fell back to the pixel height in its attributes, and the board
     nailed itself to 150px inside a 272px stage and stayed there.

     inset:0 has no such dependency. */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Every tap on the board is ours — a browser that decides a drag was a
     scroll makes the board unplayable on a phone. */
  touch-action: none;
}

.mj-stage > canvas:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}


/* ------------------------------------------------------------- dialogs */

.mj-dialog {
  width: min(34rem, calc(100vw - 32px));
  padding: 0 18px 18px;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: var(--raised, var(--surface));
  color: var(--ink);
}

.mj-dialog::backdrop { background: var(--backdrop, rgba(0, 0, 0, 0.55)); }

.mj-dialog__head {
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  padding: 14px 0 10px;
  background: inherit;
  border-bottom: 1px solid var(--rule);
}

.mj-dialog__head h2 { flex: 1; margin: 0; font-size: 1.25rem; }

.mj-dialog__head button {
  min-width: 2.6rem;
  min-height: 2.6rem;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.15rem;
  cursor: pointer;
}

.mj-dialog__title { margin: 18px 0 0; font-size: 1.35rem; }

.mj-dialog__note {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.mj-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.mj-dialog__actions button {
  flex: 1 1 8rem;
  min-height: 2.8rem;
  padding: 0 1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.mj-dialog__actions button:hover:not(:disabled) { background: var(--accent-soft); }

.mj-dialog__actions button:disabled {
  color: var(--ink-faint);
  cursor: default;
  opacity: 0.55;
}

.mj-done__headline {
  margin: 10px 0 0;
  font-size: 1.05rem;
  color: var(--ink);
}

.mj-done__detail,
.stats-list {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  margin: 14px 0 0;
}

.mj-done__detail dt,
.stats-list dt {
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.mj-done__detail dd,
.stats-list dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.stats-body h3 {
  margin: 20px 0 0;
  font-size: 1.02rem;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
}


/* ----------------------------------------------------------- how to play

   Worth its own rules because it is the one dialog that is mostly words, and
   the only one somebody reads rather than glances at. */

.mj-rules { margin: 4px 0 0; }

.mj-rules h3 {
  margin: 16px 0 4px;
  font-size: 1rem;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  color: var(--accent);
}

.mj-rules p { margin: 0 0 6px; font-size: 0.97rem; line-height: 1.5; }

.mj-rules ul { margin: 0 0 6px; padding-left: 1.2rem; }
.mj-rules li { margin: 0 0 4px; font-size: 0.97rem; line-height: 1.45; }


/* ======================================================================
   HANDHELD MODE

   css/games/handheld.css lays the shell out: the numbers along the top
   (.hh-top), then the board with its dock under it (.hh-main), the screens
   before play over the lot. These are Mahjong's own parts of it.
   ====================================================================== */

.hh-app .mj-readout { justify-content: center; }

/* A screen before play is a page of its own, not a panel over the table:
   the same plain ground as every other game's, as handheld.css does for
   theirs. The table comes back with the board. backgrounds.js hands the table
   to the stage as --mj-table rather than as an inline background, which no
   rule here could cover. */
.hh-app:has(.ar-screen:not([hidden])) .mj-stage {
  border-color: transparent;
  background: var(--ground);
}

/* The board's focus ring is for a keyboard, and a phone has none. */
@media (pointer: coarse) {
  .hh-app .mj-stage > canvas:focus-visible { outline: none; }
}

/* The corners and the list of moves: a phone on its side only. */
.mj-corner,
.mj-pop { display: none; }


/* ------------------------------------------------- phones: played sideways

   The boards are wide -- The Turtle is fifteen tiles across -- so on a phone
   held upright its tiles came out 26px wide, and a finger wants about 44.
   The phone Mahjong apps are played sideways, and so is this. A page cannot
   lock an iPhone round (only Apple's own apps may), so upright, over a dealt
   board, it asks. The screens before play still work upright: choose, then
   turn. The numbers along the top go while upright: there is no board to
   count, and on a phone that narrow they took two lines. */

.mj-turn { display: none; }

@media (pointer: coarse) and (max-width: 720px) and (orientation: portrait) {
  .hh-app .mj-readout { display: none; }

  .mj-stage:not(:has(.ar-screen:not([hidden]))) .mj-turn {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    text-align: center;
    background: var(--ground);
    color: var(--ink-muted);
  }

  .mj-turn p { margin: 0; max-width: 18rem; }

  .mj-turn__ask {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
  }

  .mj-turn__phone {
    margin-bottom: 10px;
    font-size: 3.5rem;
    color: var(--accent);
    animation: mj-turn 1.4s ease-in-out infinite alternate;
  }

  @media (prefers-reduced-motion: reduce) {
    .mj-turn__phone { animation: none; transform: rotate(-90deg); }
  }
}

@keyframes mj-turn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-90deg); }
}

/* SIDEWAYS ON A PHONE the board gets the whole screen, the table running to
   its edges. The height is what decides the size of a tile, so the dock goes
   and so does the line of numbers over the board. In their place, two round
   buttons in the top corners -- Epic Mahjong's way, which David sent: the
   gear is Menu, which opens down the left edge (handheld.css), and the dots
   open the moves.

   They were 2.6rem and 4px from the edge, and hard to hit (David, Oct 14). An
   iPhone on its side hands a tap that close to the edge to its own toolbar,
   and its corners are rounded off. So they are 3.5rem now, set in from the
   edges and clear of the notch, and the board keeps out of a strip down each
   side for them -- the boards are wide but the screen is wider, so the strip
   costs the tiles nothing on most boards and a few pixels on the turtle. The
   numbers go in the left strip, under the gear. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  body .Master > section.mj-shell.hh-app.is-focus {
    --mj-corner: 3.5rem;
    --mj-top: max(10px, env(safe-area-inset-top));
    --mj-edge-l: max(14px, env(safe-area-inset-left));
    --mj-edge-r: max(14px, env(safe-area-inset-right));
    --mj-strip-l: calc(var(--mj-edge-l) + var(--mj-corner) + 10px);
    --mj-strip-r: calc(var(--mj-edge-r) + var(--mj-corner) + 10px);

    gap: 0;
    padding: 0;
  }

  .hh-app .mj-main { gap: 0; }
  .hh-app .mj-main > .hh-dock { display: none; }

  .hh-app .mj-stage {
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  /* Its size stated, not left to the four edges: a canvas is a picture, and
     a picture given only its edges stays at its own size. */
  .hh-app .mj-stage > canvas {
    --mj-above: max(6px, env(safe-area-inset-top));
    --mj-below: max(6px, env(safe-area-inset-bottom));

    top: var(--mj-above);
    left: var(--mj-strip-l);
    width: calc(100% - var(--mj-strip-l) - var(--mj-strip-r));
    height: calc(100% - var(--mj-above) - var(--mj-below));
  }

  .mj-corner {
    position: absolute;
    top: var(--mj-top);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mj-corner);
    height: var(--mj-corner);
    padding: 0;
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    font-size: 1.45rem;
    box-shadow: 0 3px 10px var(--shadow, rgba(0, 0, 0, 0.3));
    cursor: pointer;
    touch-action: manipulation;
  }

  .mj-corner:active { background: var(--accent-soft); }

  .mj-corner--left { left: var(--mj-edge-l); }
  .mj-corner--right { right: var(--mj-edge-r); }

  /* The screens before play have their own way back. */
  .mj-stage:has(.ar-screen:not([hidden])) .mj-corner { display: none; }

  /* The numbers, down the left strip under the gear, on a card of the
     page's own ground so they read on any table. Coins and taps are on the
     tally and the cleared board; the strip keeps what is wanted mid-board. */
  .hh-app > .mj-readout {
    position: absolute;
    top: calc(var(--mj-top) + var(--mj-corner) + 12px);
    left: var(--mj-edge-l);
    z-index: 5;
    width: var(--mj-corner);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 8px 2px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--ground) 86%, transparent);
    font-size: 0.56rem;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
  }

  .hh-app > .mj-readout .mj-readout__item {
    flex-direction: column;
    align-items: center;
    gap: 1px;
  }

  .hh-app > .mj-readout b {
    font-size: 1rem;
    letter-spacing: 0;
  }

  .hh-app > .mj-readout .mj-readout__extra { display: none; }

  /* The moves, under the dots. */
  .mj-pop:not([hidden]) {
    position: absolute;
    top: calc(var(--mj-top) + var(--mj-corner) + 8px);
    right: var(--mj-edge-r);
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: calc(100% - var(--mj-top) - var(--mj-corner) - 16px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--rule-strong);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 8px 24px var(--shadow, rgba(0, 0, 0, 0.3));
  }

  .mj-pop button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 3rem;
    padding: 0 16px 0 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
  }

  .mj-pop button:disabled { color: var(--ink-faint); cursor: default; }
  .mj-pop button:not(:disabled):active { background: var(--accent-soft); }

  .mj-pop .ar-ico {
    width: 1.3em;
    font-size: 1.15rem;
    text-align: center;
    color: var(--accent);
  }
}