/* MADE FOR A BIGGER SCREEN -- the notice in htmlPieces/frag--big-screen-only.html.

   Hidden everywhere but a phone. On a phone it shows, and the page's own
   section -- the game it would have been -- goes. CSS rather than a script
   sniffing the device: the question is the size of the screen and whether it
   is touched, which is exactly what a media query asks, and it is answered
   again the moment a phone is turned or a window resized.

   The same query as js/core/bigScreenOnly.js, which also keeps the page's
   script from running at all on a phone, and as the phone rules at the end
   of css/games/arcade.css. Change one, change them all. */

.big-screen-only { display: none; }

@media (pointer: coarse) and (max-width: 720px),
       (pointer: coarse) and (max-height: 500px) {
  /* "A page that has the notice", which is also the weight it needs: the
     pages' own stylesheets show their section with a rule of three classes
     (.jigsaw-page .Master > section.jig-shell), and that beat a plainer one. */
  body:has(.big-screen-only) .Master > section:not(.big-screen-only) { display: none; }

  .big-screen-only {
    display: block;
    margin: 24px 12px;
    padding: 28px 20px;
    text-align: center;
  }

  .big-screen-only__icon {
    font-size: 2.6rem;
    color: var(--accent);
  }

  .big-screen-only h2 {
    margin: 12px 0 10px;
    font-size: 1.4rem;
  }

  .big-screen-only p {
    margin: 0 auto 12px;
    max-width: 26rem;
    line-height: 1.5;
  }

  .big-screen-only__back {
    display: inline-block;
    margin-top: 8px;
    padding: 12px 22px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--on-accent, #fff);
    font-weight: 700;
    text-decoration: none;
  }
}