/* =============================================================================
   guide.css — the "How to play" panel shared by every game page.

   Why a panel and not content below the game: every game page sets
   body{position:fixed;inset:0;overflow:hidden;touch-action:none} on purpose, so
   iOS cannot rubber-band and a swipe during play never scrolls the page. That
   makes the document itself unscrollable, so text appended after the game would
   be unreachable. This panel is its own scrolling layer instead, which leaves
   the game's layout and gesture handling completely untouched.

   The opener only appears while the start screen is up, so it can never sit on
   top of a HUD or steal a tap mid-game.
   ============================================================================= */

/* ---------- the opener, shown only on the start screen ---------- */
.gg-open {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  transform: translateX(-50%);
  z-index: 25;                      /* above the start overlay (10–20), below the panel */
  display: none;                    /* guide.js shows it when the start screen is up */
  align-items: center;
  gap: 7px;
  min-height: 44px;                 /* never below the touch-target minimum */
  padding: 10px 18px;
  border: 1px solid rgba(255, 179, 71, .45);
  border-radius: 999px;
  background: rgba(12, 18, 32, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #ffd9a0;
  font: 600 13px/1 system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gg-open.on { display: inline-flex; }

/* Merge Isle has no start screen, so its opener sits inline in the top bar
   beside the back link rather than floating over the board. */
.gg-open-inline {
  position: static;
  transform: none;
  bottom: auto;
  left: auto;
  margin-left: 8px;
  padding: 7px 12px;
  min-height: 36px;
  font-size: 12px;
  flex: 0 0 auto;
}
.gg-open:hover { border-color: rgba(255, 179, 71, .8); color: #fff; }

/* ---------- the panel ---------- */
.gg-panel {
  position: fixed;
  inset: 0;
  z-index: 60;                      /* above every in-game overlay */
  display: none;
  background: rgba(4, 6, 12, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow-y: auto;                 /* this layer scrolls; the document still cannot */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;     /* scrolling to the end must not chain to the page */
  touch-action: pan-y;              /* body sets touch-action:none, so re-enable it here */
  user-select: text;                /* body disables selection; readers may want to copy */
  -webkit-user-select: text;
  padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 40px);
}
.gg-panel.on { display: block; }

.gg-box {
  max-width: 640px;
  margin: 0 auto;
  color: #cfd8ea;
  font: 15px/1.65 system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.gg-box h2 {
  margin: 4px 40px 14px 0;          /* keep clear of the close button */
  font-size: 22px;
  line-height: 1.25;
  color: #fff;
  letter-spacing: -.01em;
}
.gg-box h3 {
  margin: 22px 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffb347;
}
.gg-box p { margin: 0 0 12px; }
.gg-box ul { margin: 0 0 12px; padding-left: 20px; }
.gg-box li { margin: 0 0 7px; }
.gg-box strong { color: #e9eefb; }
.gg-box kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
  font: 12px/1.5 ui-monospace, Consolas, Menlo, monospace;
  color: #e9eefb;
}
.gg-foot {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px;
  color: #8ea3c8;
}
.gg-foot a { color: #ffb347; }

.gg-close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 10px);
  right: 12px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  background: rgba(16, 24, 40, .8);
  color: #cfd8ea;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gg-close:hover { color: #fff; border-color: rgba(255, 255, 255, .45); }

/* On a wide screen the panel reads as a centred card rather than a full wash. */
@media (min-width: 720px) {
  .gg-panel { padding-top: 40px; padding-bottom: 60px; }
  .gg-close { right: calc(50% - 320px - 56px); }
}
@media (max-width: 830px) {
  .gg-close { right: 12px; }
}