/* Board Together notebook skin.
   Reuses the structural rules from styles.css and re-themes them under
   body.fgm with a cream ruled-paper palette, navy ink, handwriting
   headings, and the app's pastel tile accents. Board Together is a
   separate game from the Eat Chess series, so it gets its own look. */

body.fgm {
  /* paper + ink */
  --paper:            #FBF6E6;
  --paper-rule:       rgba(74, 120, 194, 0.10);
  --ink:              #2A3A57;
  --ink-soft:         #5D6B82;

  /* pastel accents pulled from the app art */
  --pen-blue:         #3E6FB0;
  --pen-blue-dark:    #2F5790;
  --coral:            #DE6A5E;
  --highlight:        #F6D96B;
  --leaf:             #4E9E72;

  /* remap the shared tokens so styles.css components re-theme cleanly */
  --canvas-bottom:    #FFFFFF;

  --surface-card:     #FFFFFF;
  --surface-card-tint:#E7DEC4;

  --brand-green:      var(--pen-blue);
  --brand-green-dark: var(--pen-blue-dark);
  --frame-gold:       var(--coral);
  --state-selected:   var(--pen-blue);

  --text-primary:     var(--ink);
  --text-secondary:   var(--ink-soft);
  --text-on-cream:    var(--ink);
  --text-on-cream-soft: var(--ink-soft);

  /* fonts: Caveat for headings + flourish, DM Sans for everything read in bulk */
  --font-display: "Caveat", "Comic Sans MS", cursive;
  --font-flavor:  "Caveat", "Comic Sans MS", cursive;
  --font-script:  "Caveat", cursive;
  --font-ui:      "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  color: var(--ink);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 33px,
    var(--paper-rule) 33px,
    var(--paper-rule) 34px
  );
  background-attachment: fixed;
}

/* a faint red margin line down the left of the page, like a real pad */
body.fgm .page { position: relative; }
body.fgm .page::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--gutter) - 0.9rem);
  width: 2px;
  background: rgba(213, 91, 60, 0.28);
  pointer-events: none;
}
@media (max-width: 620px) { body.fgm .page::before { display: none; } }

/* links read as blue ballpoint, hover to coral */
body.fgm a { color: var(--pen-blue); }
body.fgm a:hover, body.fgm a:focus { color: var(--coral); }

/* handwriting headings sit a little larger than the serif originals */
body.fgm .brand-mark {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink);
}
body.fgm .brand-mark img { border-radius: 9px; box-shadow: 0 2px 8px rgba(60,70,90,0.22); }

body.fgm h1, body.fgm h2,
body.fgm .hero h1, body.fgm .page-header h1 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}
body.fgm .hero h1 { font-size: clamp(3rem, 9vw, 5.4rem); line-height: 0.96; margin-bottom: 1.2rem; }
body.fgm h2 { font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1.04; }
body.fgm .hero h1 .accent { color: var(--coral); }

body.fgm h3,
body.fgm .menu-card h3,
body.fgm .feature h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
}
body.fgm .menu-card h3 { font-size: 1.55rem; }
body.fgm .feature h3 { font-size: 1.4rem; }

/* keep paragraphs in clean sans for readability; Caveat is for titles */
body.fgm p,
body.fgm .hero p.lede,
body.fgm .menu-card p,
body.fgm .feature p,
body.fgm .contact-strip .label {
  font-family: var(--font-ui);
}
body.fgm .hero p.lede { color: var(--ink-soft); max-width: 42ch; }

/* eyebrows: small-caps blue, like the app's section labels */
body.fgm .eyebrow, body.fgm .hero-eyebrow { color: var(--pen-blue); font-weight: 600; }

/* section dividers: dashed pencil rule instead of a hard line */
body.fgm section.block { border-top: 1px dashed rgba(42, 58, 87, 0.16); }

/* tile-style cards: white with a soft sketch outline */
body.fgm .menu-card,
body.fgm .contact-strip {
  border: 1.5px solid #E0D7BD;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(60, 70, 90, 0.10);
}
body.fgm .contact-strip {
  background: #FFFFFF;
}
body.fgm .menu-card .course-label { color: var(--coral); }

/* feature blocks: blue pencil rule on the left */
body.fgm .feature {
  background: rgba(255, 255, 255, 0.6);
  border-left: 3px solid var(--pen-blue);
}

/* a couple of cards get the highlighter treatment, like the recommended chip in-app */
body.fgm .menu-card.starred {
  background: #FFFBEC;
  border-color: var(--highlight);
}

/* the "note" flourish stays coral Caveat */
body.fgm .note { color: var(--coral); }

/* ghost button reads as a hand-drawn outline */
body.fgm .btn-ghost {
  color: var(--ink);
  border-color: rgba(42, 58, 87, 0.3);
  background: #FFFFFF;
}
body.fgm .btn-ghost:hover, body.fgm .btn-ghost:focus {
  border-color: var(--pen-blue);
  color: var(--pen-blue);
}

/* footer on paper */
body.fgm .site-footer {
  border-top: 1px dashed rgba(42, 58, 87, 0.18);
  color: var(--ink-soft);
}
body.fgm .site-footer a { color: var(--ink-soft); }
body.fgm .site-footer a:hover { color: var(--ink); }

/* privacy / support copy sits like a white card taped to the page,
   so swap the dark Eat Chess shadow for the softer notebook one */
body.fgm .receipt { box-shadow: 0 8px 24px rgba(60, 70, 90, 0.12); }

/* ==========================================================
   Hero art: the app icon, sat on the page like a taped-in sticker
   ========================================================== */
body.fgm .hero-art img {
  width: min(100%, 300px);
  border-radius: 26px;
  filter: drop-shadow(0 14px 28px rgba(60, 70, 90, 0.28));
}
body.fgm .hero-art::after { display: none; }

/* ==========================================================
   Mascot scene: transparent tile characters dropped on the paper
   ========================================================== */
body.fgm .mascot-scene {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0.5rem auto 0;
}
body.fgm .mascot-scene img { width: 100%; height: auto; }

body.fgm .scene-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 4vw, 2rem);
  align-items: center;
}
@media (min-width: 760px) {
  body.fgm .scene-card { grid-template-columns: 1.1fr 0.9fr; }
  body.fgm .scene-card.flip > .scene-art { order: -1; }
}
body.fgm .scene-art {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid #E0D7BD;
  box-shadow: 0 8px 22px rgba(60, 70, 90, 0.12);
  background: #FFFDF4;
}
body.fgm .scene-art img { display: block; width: 100%; height: auto; }

/* ==========================================================
   Screenshot grid: landscape iPad captures, two-up on desktop
   ========================================================== */
body.fgm .shot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.4rem);
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
}
@media (min-width: 720px) { body.fgm .shot-grid { grid-template-columns: 1fr 1fr; } }
body.fgm .shot-grid figure { margin: 0; }
body.fgm .shot-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1.5px solid #E0D7BD;
  box-shadow: 0 10px 26px rgba(60, 70, 90, 0.16);
  background: #FFFDF4;
}
body.fgm .shot-grid figcaption {
  margin-top: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink-soft);
  text-align: center;
}

/* gentle idle bob on the hero sticker; respects reduced-motion globally */
@media (prefers-reduced-motion: no-preference) {
  body.fgm .hero-art img { animation: fgm-bob 5s ease-in-out infinite; }
}
@keyframes fgm-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-8px) rotate(1.5deg); }
}