/* Page chrome shared by every app page. Desktop: a centered 3x-scaled phone.
   Phones (coarse pointer or narrow window): fullscreen, no scroll or zoom, HUD inside the safe area,
   on-screen D-pad / soft keys / 12-key pad. */
html, body { margin: 0; background: #111; color: #ccc; font: 13px -apple-system, "Helvetica Neue", sans-serif; }
body { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
#phone { position: relative; width: 720px; margin: 24px auto 8px; }
#view { position: relative; }
#screen { display: block; width: 720px; height: 720px; image-rendering: pixelated; image-rendering: crisp-edges; background: #000; }
#softbar { display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 0 12px;
  background: #202020; color: #fff; font: bold 22px "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; white-space: pre; }
#softbar span { display: flex; align-items: baseline; gap: 8px; }
#soft1 { justify-content: flex-start; }
#soft2 { justify-content: flex-end; }
#softbar i { font-style: normal; font-weight: normal; font-size: 15px; opacity: .45; }
#closed { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .85); color: #fff; font-size: 20px; }
#closed[hidden] { display: none; }
#closed a { color: #8cf; }
#help { text-align: center; color: #777; }

/* Touch hint pill, shown on coarse pointers until the first drag. */
#hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); pointer-events: none;
  background: rgba(0, 0, 0, .6); color: #ddd; border-radius: 999px; padding: 6px 14px;
  font: 13px -apple-system, "Helvetica Neue", sans-serif; white-space: nowrap; opacity: 0; transition: opacity .5s; }
#help { display: none; }
#helpcard { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .92); color: #fff; font: 16px -apple-system, "Helvetica Neue", sans-serif; }
#helpcard[hidden] { display: none; }
#helpcard p { margin: 8px 16px; text-align: center; }
#helpcard .dim { color: #999; font-size: 13px; }
#helpcard .tap { color: #8cf; margin-top: 20px; }

/* Narrow window or touch device: fill the viewport. */
@media (max-width: 760px), (pointer: coarse) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body { position: fixed; inset: 0; width: 100%; user-select: none; -webkit-user-select: none; touch-action: none; }
  #phone { position: fixed; inset: 0; width: auto; height: 100vh; height: 100dvh; margin: 0; box-sizing: border-box;
    display: flex; flex-direction: column;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 6px) env(safe-area-inset-left); }
  #view { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
  #screen { width: 100%; height: auto; max-height: 100%; }
  #softbar { flex: none; height: 44px; margin-top: 4px; padding: 0 12px; font-size: 16px; }
  #help { display: none; }
}
/* Touch input only where there is no keyboard: drag on the screen to roll, tap for select. */
@media (pointer: coarse) {
  #hint:not(.off) { opacity: 1; }
  #softbar i { display: none; }
  #softbar span { flex: 1; align-items: center; min-height: 44px; }
  #softbar span:active { opacity: .7; }
  #help { display: block; order: 2; flex: none; width: 40px; align-self: center;
    background: none; border: none; color: #777; font: bold 17px -apple-system, "Helvetica Neue", sans-serif;
    min-height: 44px; }
}