/* HANDHELD MODE -- the game as the whole window, laid out like a phone app.

   Linked by js/games/arcade/handheld.js itself, which says what handheld mode
   is; the design is Z_Nice Colors/Handheld Mode.html. In this file:

   - the shell in app view: one line of numbers on top, the board, one row of
     big buttons (the dock) at the bottom;
   - every screen before play gets the whole shell, so the readout, the dock
     and the side strip step aside while one is up;
   - the dock;
   - the Menu: a sheet from the bottom on an upright phone, a rail down the
     left on a phone held sideways, a box in the middle on anything bigger;
   - the "turn your phone" card.

   Tokens only, never a colour, so it is right in all eight themes. The phone
   queries are the same as css/games/phone.css: a touch screen, and narrow
   (upright) or short (sideways). */


/* ------------------------------------------------------------ the shell

   App view is focus mode held for good (arcade/fullscreen.js), so focus.css
   already pins the shell over the window. This is its inside. The selector is
   heavier than arcade.css's `.arcade-page .Master > section.ar-shell`, which
   sets this box's own padding and gap and would otherwise win. The insets
   keep the bars clear of a phone's rounded corners and its home bar. */

body .Master > section.hh-app.is-focus {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding:
    max(8px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  background: var(--ground);
}

/* A screen before play -- the questions, the level map, the level card, the
   tally -- is the whole shell. Nothing has been chosen yet for the numbers
   and the buttons to be about. The stage is the only thing that flexes, so it
   takes every pixel they give up, and its frame goes so the screen does not
   sit in a box. Mark a side strip .hh-side, or a line of numbers that is not
   an .ar-readout .hh-top, to have it step aside too. */
.hh-app:has(.ar-screen:not([hidden])) :is(.ar-readout, .hh-top, .hh-dock, .hh-side) {
  display: none;
}

.hh-app:has(.ar-screen:not([hidden])) .ar-stage {
  border-color: transparent;
  background: var(--ground);
}

.hh-app .ar-screen { border-radius: 0; }


/* ------------------------------------------------- the board's column

   The stage and the dock under it, as one column, beside whatever side strip
   a game has. The dock is centred under the BOARD this way; spanning the
   whole window it was centred on the window, and with a strip on the right
   the board sits left of that (David, Oct 14). */

.hh-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* ------------------------------------------------------------- the dock

   The row of big buttons along the bottom, where a thumb rests. An icon with
   its word under it: both of the solitaire apps David sent do it, and a bulb
   means nothing to half of this audience until it says Hint. Two to five of
   them, never more; everything else is in Menu. */

.hh-dock {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex: none;
}

.hh-dock button {
  flex: 0 1 6.5rem;
  min-width: 0;
  min-height: 3.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px 5px;
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
}

.hh-dock button i { font-size: 1.35rem; }

.hh-dock button:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

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

.hh-dock button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* The board's focus ring is for a keyboard, and a phone has none. Start hands
   the board the focus so the keys work at once on a computer; on a phone it
   drew a thick ring round the whole board for the length of the game. */
@media (pointer: coarse) {
  .hh-app .ar-stage canvas:focus-visible { outline: none; }
}


/* ------------------------------------------------------------- the Menu */

.hh-menu {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}

.hh-menu::backdrop { background: var(--backdrop, rgba(0, 0, 0, 0.45)); }

.hh-menu__panel {
  width: min(24rem, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 14px 16px 18px;
  border: 1px solid var(--rule-strong);
  border-radius: 16px;
  background: var(--raised, var(--surface));
  box-shadow: 0 12px 34px var(--shadow, rgba(0, 0, 0, 0.25));
}

.hh-menu__title {
  margin: 0 0 12px;
  text-align: center;
  font-size: 1.1rem;
}

.hh-menu__items {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hh-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 3rem;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.hh-menu__item:hover { border-color: var(--accent); background: var(--accent-soft); }

.hh-menu__item i,
.hh-menu__item svg {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  font-size: 1.1rem;
  text-align: center;
  color: var(--accent);
}

/* The words keep their line; a note gives way and wraps at the far end. A
   squeezed "New game" broke onto two lines beside its note. */
.hh-menu__item span { flex: none; white-space: nowrap; }

.hh-menu__item small {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.2;
  text-align: right;
  color: var(--ink-faint);
}

.hh-menu__item.is-main {
  justify-content: center;
  min-height: 3.3rem;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-size: 1.05rem;
}

.hh-menu__item.is-main i { color: inherit; }
.hh-menu__item.is-main:hover { filter: brightness(1.12); background: var(--accent); }

.hh-menu__item.is-leave {
  background: none;
  border-style: dashed;
  color: var(--accent);
}

.hh-menu__rule {
  margin: 3px 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

/* An upright phone: a sheet up from the bottom, thumb-high, the full width. */
@media (pointer: coarse) and (max-width: 500px) {
  .hh-menu {
    width: 100%;
    margin: auto 0 0;
  }

  .hh-menu__panel {
    width: 100%;
    max-height: 88dvh;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
  }
}

/* A phone on its side: a rail down the left edge, full height, each line an
   icon over its word -- the way Kristanix's Epic games do it, which David
   sent on Oct 14. A sheet from the bottom would cover the whole short screen. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .hh-menu {
    height: 100%;
    margin: 0 auto 0 0;
  }

  .hh-menu__panel {
    width: 7.5rem;
    height: 100%;
    max-height: none;
    padding: 6px max(6px, env(safe-area-inset-left));
    border-width: 0 1px 0 0;
    border-radius: 0;
  }

  .hh-menu__title,
  .hh-menu__rule,
  .hh-menu__item small { display: none; }

  .hh-menu__items { gap: 5px; }

  /* Two abreast once there are more than five. Seven or eight lines of icon
     and word, one under another, ran off the bottom of a 390px-tall screen
     and the rail had to be scrolled to find Leave. */
  .hh-menu__panel:has(.hh-menu__item:nth-of-type(6)) { width: 14.5rem; }

  .hh-menu__items:has(.hh-menu__item:nth-of-type(6)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }

  /* A word under an icon, in a narrow column: it wraps. "Leave for the Games
     page" on one line pushed the second column out of the rail. */
  .hh-menu__item span { white-space: normal; }

  .hh-menu__item {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 4.1rem;
    padding: 6px 4px;
    font-size: 0.78rem;
    text-align: center;
  }

  .hh-menu__item i,
  .hh-menu__item svg {
    width: auto;
    height: 1.5rem;
    font-size: 1.4rem;
  }
}


/* ------------------------------------------------- the readout, upright

   One line on a phone, each number under its small label, spread across the
   width. Two lines of it cost an iPhone 60px of board. */

@media (pointer: coarse) and (max-width: 720px) {
  .hh-app .ar-readout {
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: start;
    gap: 4px;
    padding: 0 2px;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .hh-app .ar-readout__item {
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 0;
    white-space: nowrap;
  }

  .hh-app .ar-readout b {
    font-size: 1.1rem;
    letter-spacing: 0;
    text-transform: none;
  }

  .hh-app .ar-readout__lead b { font-size: 1.3rem; }

  .hh-app .hh-side { display: none; }

  .hh-app .ar-stage { min-height: 0; }
}


/* ------------------------------------------------- turn your phone round */

.hh-turn {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: var(--ground);
  color: var(--ink);
}

.hh-turn[hidden] { display: none; }

.hh-turn svg {
  width: 4.5rem;
  height: 4.5rem;
  color: var(--accent);
}

.hh-turn b { font-size: 1.4rem; }

.hh-turn span {
  max-width: 22rem;
  color: var(--ink-muted);
}