/* THE GAMES ON A PHONE -- the page round the game, shared.

   A phone is played on, not browsed. Before this, Pebble Crush on an iPhone
   opened on the logo, the nav bar, a play bar on two rows and a readout on
   two more, with the board -- and the front door on it -- barely on screen at
   the bottom. So on a small touch screen, for every game page that links this
   file:

   - the header is ONE thin line, the whole name at the size of its small
     "COMPUTER SERVICES" line, with no version and no dead menu icon;
   - the nav bar goes. The phone's own Back gets you out, and so does the
     front door's own way out in its top-left corner;
   - while the front door is up, everything else in the game's section goes
     too: the bars, the readout, the side strips. Nothing has been chosen yet
     for them to be about, and the stage is the only thing that flexes, so
     the door gets every pixel they gave up;
   - the play bar's buttons show their icon rather than their words.

   Written against what every game page has -- a <section> in .Master, the
   shared front door (.ar-screen, js/games/arcade/intermission.js), buttons
   carrying .ar-ico and .ar-word -- rather than any one game's names, so a
   game joins by linking this file. Each game's own stylesheet still owns the
   shape of its bar on a phone (the end of arcade.css, mahjong.css).

   Touch AND small, so a narrow window on a laptop keeps its site header. The
   second line is a phone on its side: wide, but far too short to spare it.
   The SAME query as css/bigScreenOnly.css and js/core/bigScreenOnly.js --
   change one, change them all. */

/* A button's icon is for a phone; a computer shows the words, as it always
   has. JavaScript changes both through setLabel() in arcade/shell.js. */
.ar-ico { display: none; }

@media (pointer: coarse) and (max-width: 720px),
       (pointer: coarse) and (max-height: 500px) {

  /* ------------------------------------------------------ the thin header */

  header {
    padding: 3px 10px;
    margin: 0;
  }

  header h1 { gap: 0; }

  header .toggle-nav-icon,
  header .site-version { display: none; }

  .site-wordmark {
    flex-direction: row;
    gap: 0.6em;
  }

  .site-name-main,
  .site-name-sub {
    font-size: 9px;
    letter-spacing: 4px;
    margin: 0;
  }

  .status-bar.nav-bar { display: none; }


  /* --------------------------------------------- only the door until PLAY

     Every part of the game's section that does not hold the door. Dialogs
     are left alone: a modal one (How to play, on a first visit) sits over
     the door and must stay up. The side strips live beside the stage, inside
     the part that holds the door, so they are named on their own. */

  .Master > section:has(.ar-screen.is-door:not([hidden]))
    > :not(:has(.ar-screen), .ar-screen, dialog),
  .Master > section:has(.ar-screen.is-door:not([hidden])) aside {
    display: none;
  }


  /* ----------------------------------------------------- icons, not words

     The words stay for a screen reader: hidden from sight, not from the
     page. */

  .ar-ico { display: inline; }

  .ar-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}