/* ============================================================
   FunWonder shared layout framework — fw.css
   Layout-only: no colors, fonts, or game styles.
   Three page types, one set of rules:
     Type G (2048):          .layout grid + .gstage + .lb-col
     Type A (4 grid games):  .layout grid + .wrap/.gstage + .info-col
     Type S (5 stacked):     game + section.fw-about
   Guarantees:
     - footer pinned to the viewport bottom
     - expanding a foldable never moves the footer or the game
     - long foldable content scrolls inside its own container
     - accordion (one open at a time) lives in fw.js
   ============================================================ */

/* ---- page shell: flex column so the footer can be pushed down ---- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* structural children never shrink; only the foldable containers may scroll */
.topnav, header, #stage, .fw-footer {
  flex-shrink: 0;
}

/* stacked pages (Type S): the game container owns the free space — it grows
   to push the footer down but never shrinks. width:100% stops a
   margin:auto .wrap from shrink-to-fitting (spend-money went 327px wide). */
body > .wrap, body > main {
  flex: 1 0 auto;
  width: 100%;
}

/* ---- footer (identical on every page) ---- */
.fw-footer {
  width: 720px;
  max-width: calc(100% - 40px);
  margin: 16px auto 0;
  padding: 12px 20px;
  border-top: 1px solid rgba(128,128,128,.25);
  text-align: center;
  font-size: 13px;
  opacity: .65;
}

/* ---- grid pages (Types G + A) ---- */
.layout .lb-col { order: 3; }

@media (min-width: 1200px) {
  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: start;
    padding: 0;
    flex: 1;
  }
  .layout .info-col {
    grid-column: 1; grid-row: 1; justify-self: end; margin-right: 28px;
    width: 320px; max-width: 320px; order: 0;
    /* left column fills the row height (set by the game column);
       long content scrolls inside it, never grows the page. */
    align-self: stretch;
    min-height: 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }
  .layout .wrap, .layout .gstage { grid-column: 2; grid-row: 1; }
  .layout .lb-col {
    grid-column: 3; grid-row: 1; justify-self: start; margin-left: 28px;
    display: flex; flex-direction: column; width: 320px;
  }
  .layout .lb-panel {
    display: flex; position: static; z-index: auto;
    width: 100%; height: auto; max-height: min(calc(100vh - 100px), 600px);
    border: 1px solid #e5dccb; border-radius: 12px;
    box-shadow: 0 2px 10px rgba(119, 110, 101, .12);
  }
  .layout .lb-panel h2 .lb-close { display: none; }
  #lbToggle { display: none; }
}

/* ---- stacked pages (Type S): info opens as a modal popup ----
   The section never appears inline on the page: it stays hidden until the
   user taps the button, then opens as a fixed centered panel over a
   backdrop. Opening it never moves the game or the footer and never
   changes the page height. The text is still in the static HTML, so
   SEO is unaffected. The panel background is copied from the page body
   by fw.js, so it matches each page's own theme. */
section.fw-about[hidden] { display: none; }
section.fw-about.fw-modal-open {
  display: block;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 32px));
  max-height: 85vh;
  margin: 0;
  padding: 28px 28px 24px;
  overflow-y: auto;
  z-index: 1000;
  border: 1px solid rgba(128,128,128,.35);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.35);
}
.fw-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
}
.fw-modal-backdrop[hidden] { display: none; }
.fw-modal-close {
  position: absolute; top: 6px; right: 10px;
  border: none; background: transparent;
  color: inherit; font: inherit; font-size: 26px; line-height: 1;
  cursor: pointer; opacity: .65; padding: 4px 8px;
}
.fw-modal-close:hover { opacity: 1; }
.fw-info-toggle { display: flex; justify-content: center; flex: 0 0 auto; padding: 10px 0 2px; }

/* S pages: the More games line sits on the page above the footer.
   Scoped to a direct child of body so the grid pages' own .fw-more
   (inside .info-col) is untouched. */
body > .fw-more {
  flex: 0 0 auto;
  text-align: center;
  font-size: 13px;
  opacity: .65;
  margin: 16px auto 0;
  padding: 0 20px;
  max-width: 720px;
}
body > .fw-more a, body > .fw-more a:visited { color: inherit; text-decoration: none; cursor: pointer; }
body > .fw-more a:hover { color: var(--accent, #ffb347); }
.fw-info-btn {
  font: inherit; font-size: 13px; cursor: pointer;
  color: inherit; background: transparent;
  border: 1px solid currentColor; border-radius: 999px;
  opacity: .65; padding: 6px 16px;
}
.fw-info-btn:hover { opacity: 1; }