/*
 * Mobile-web layer — a Play-only phone experience (#100 follow-up).
 *
 * Loaded LAST in index.html, so these overrides win ties. Everything lives inside a
 * single max-width query, so desktop is completely untouched. On a phone we:
 *   - hide the Create and Market tabs (authoring + shop are desktop concerns),
 *   - slim the parchment scroll frame (its fixed 148px of horizontal border ate most
 *     of a phone's width),
 *   - reflow the player-facing pages, which were authored at fixed desktop widths.
 *
 * Breakpoint 768px = phones (portrait + landscape) and small tablets. The player
 * still moves by TAPPING the compass (handleCompassClick), so the compass stays
 * visible and tappable in the game view.
 */

@media (max-width: 768px) {
  /* Never scroll sideways: the fixed-width desktop leftovers get clipped, not
     turned into a horizontal scrollbar. */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, canvas, svg, table, video { max-width: 100%; }

  /* ---------------------------------------------------------------- Nav */
  /* Drop the desktop-only tabs; leave Play, Account, Help, About, audio (+ Admin). */
  .navitem.nav-desktop-only { display: none; }
  .navouter { height: auto; }               /* let the bar wrap if it must */
  .navtop { padding-left: 10px; padding-right: 10px; }
  .navitem { font-size: 16px; margin: 6px 6px 0; }   /* bigger tap targets */

  /* -------------------------------------------------- The parchment frame */
  /* 81px left + 67px right of border-image was ~148px of a 375px screen. Slim it. */
  .scroll {
    border-width: 22px 14px 26px 14px;
    border-image: url('/img/scroll.png') 90 67 112 81 fill repeat;
  }

  /* ------------------------------------------------ Play landing (Home) */
  .entry { margin-left: 4px; font-size: 17px; line-height: 1.55; }
  .entrylinks { padding-left: 4px; }
  .entrylinks a { padding: 3px 6px; }       /* fingers, not cursors */
  h1 { font-size: 1.4em; }
  .notification { font-size: 12pt; padding: 6px 10px; }

  /* ------------------------------------------------------ Protagonist form */
  .protag-form .editfield,
  .protag-form textarea.editfield,
  .protag-form .tag.traitlabel { width: 100%; max-width: 100%; box-sizing: border-box; }
  .protag-form .newrow,
  .protag-form .newcomborow,
  .protag-form .locked,
  .protag-form .protagsubmit,
  .protag-form .editdone,
  .accountlistitem,
  .iteminner { margin-left: 0; }

  /* ---------------------------------------- Book (completed-story reader) */
  /* The reader is a fixed 1024x768 book image with two columns; drop to one. */
  .book { width: 100%; max-width: 100%; height: auto; background: none; }
  .bookcontent {
    -webkit-column-count: 1; column-count: 1;
    margin: 12px; height: auto;
  }
  #lefthalf, #righthalf { width: 100%; }

  /* -------------------------------------------------------- The game view */
  /* The desktop layout is a ~820px-wide decorative frame (border-image borders of
     220-293px, min-width:740px, negative margins) around a small 155px realm canvas.
     None of that fits a phone. Neutralize the frame and present a compact fixed
     header — realm + compass — with the story scrolling full-width beneath it. */
  #topdiv {
    border-width: 0;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 8px 0;
    background: rgba(244, 238, 222, 0.97);  /* opaque strip so it reads over the scrolling story */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  }
  #topbg { min-width: 0; margin: 0; }
  #bottomdiv { border-width: 0; min-width: 0; margin: 0; }
  #toppositioner {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  #topleft { position: static; margin: 0; }        /* the 155px realm canvas */
  #topmiddle { position: static; display: block; width: 168px; height: 168px; background: none; }
  #compassdiv { margin: 0; }                        /* the compass — tap to move */
  #topright { display: none; }                      /* world-map thumbnail is secondary on a phone */
  #leftstrut, #rightstrut { display: none; }        /* frame decorations */
  #contentdiv {
    margin-left: 0;
    margin-right: 0;
    padding-top: 195px;                             /* clear the ~180px fixed header */
  }
  #contentdiv .paragraphblock .paragraph { padding-left: 12px; padding-right: 12px; }
  body.game-page #topbg { min-height: 0; }
  body.game-page #contentdiv { min-height: 0; }

  /* Battle / challenge: stack the two writing panels instead of side-by-side. */
  .battle-panels { flex-direction: column; }
  .challenge-entry-text_mine { margin-left: 12px; }
  .challenge-entry-text_theirs { margin-right: 12px; }
  textarea.challenge-input { width: 100%; margin-left: 0; }
}