/* Shared style for static pages (About / Privacy / Terms / Contact / 404).
   Header and footer are SMALL FLOATING elements that mirror the game page
   exactly — same size, position, font, colors. */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* Disable double-tap-to-zoom while keeping pinch-to-zoom for accessibility. */
html { touch-action: manipulation; }
/* Reserve the scrollbar gutter so navigating between pages and screens doesn't
   cause a horizontal jolt as the scrollbar appears/disappears. */
html { scrollbar-gutter: stable; overflow-y: scroll; }

body {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Consolas', 'Courier New', monospace;
  background: linear-gradient(#bfe3ff, #eaf6ff);
  color: #1a2a3a;
  min-height: 100vh; min-height: 100svh;
}

/* ----- Fixed header (identical to the game's) ----- */
.site-nav {
  position: fixed; top: 12px; left: 14px; z-index: 1001;
  display: flex; align-items: center; gap: 14px;
}
.site-nav-links { display: flex; gap: 14px; font-size: .9rem; align-items: center; }
.site-nav-links a { color: #234; text-decoration: none; font-weight: 600; }
.site-nav-links a:hover { text-decoration: underline; }
/* Reserve fixed dimensions so the image loading doesn't push every nav item to
   the right (the "header shake on refresh"). object-fit handles non-square logos. */
.nav-logo { height: 32px; width: 32px; object-fit: contain; display: block; flex: 0 0 auto; }

/* RULES / BOARD pills inside the desktop nav (hidden on phone — they live in the dropdown there). */
.nav-actions { display: flex; gap: 8px; align-items: center; }
.pill-btn {
  background: #f83010;
  color: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 8px;
  padding: 2px 9px;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .8px;
  font-size: .8rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
  transition: opacity .1s ease;
  text-transform: uppercase;
  user-select: none;
  line-height: 1.3;
  display: inline-block;
}
/* No transform on hover/active — even tiny movement on the fixed header reads
   as a "shake", and on tap browsers were leaving a square trace behind the
   rounded pill (default focus ring + link :active background). Kill them all. */
.pill-btn:hover                 { text-decoration: none; opacity: .92; }
.pill-btn,
.pill-btn:focus,
.pill-btn:active,
.pill-btn:focus-visible,
.pill-btn:visited               { outline: none; box-shadow: 0 2px 5px rgba(0,0,0,.18); }
.pill-btn::-moz-focus-inner     { border: 0; }
/* Specificity bump — beats `.site-nav-links a { color: #234 }`. */
.site-nav-links a.pill-btn,
.nav-drop a.pill-btn { color: #fff; }
.site-nav-links a.pill-btn:hover,
.nav-drop a.pill-btn:hover { color: #fff; text-decoration: none; }
@media (max-width: 760px) {
  .nav-actions { display: none; }
}

/* burger icon (only on phone) */
.burger {
  width: 42px; height: 42px;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; cursor: pointer;
  background: rgba(255,255,255,.7); border: none; border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.burger span { display: block; width: 20px; height: 2.5px; background: #234; border-radius: 2px; }
@media (max-width: 760px) {
  .site-nav-links { display: none; }
  .burger { display: flex; }
}

/* dropdown panel triggered by the burger (mobile) */
.nav-drop {
  position: fixed; top: 62px; left: 14px; z-index: 1001;
  background: #fff; border-radius: 10px;
  padding: 12px 18px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  display: none; flex-direction: column; gap: 10px;
  min-width: 160px;
}
.nav-drop.show { display: flex; }
.nav-drop a { color: #234; text-decoration: none; font-weight: 600; font-size: 1rem; }
.nav-drop a:hover { text-decoration: underline; }
.nav-drop-home { display: flex; align-items: center; gap: 8px; }
.nav-drop-home img { height: 22px; width: auto; }

/* ----- Fixed footer (identical to the game's) ----- */
.site-foot {
  text-align: center; font-size: .68rem;
  color: #557; padding: 18px 12px 22px; line-height: 1.3;
}

/* ----- Page content ----- */
main {
  padding: 70px 20px 10px;   /* leave room for the floating header at top */
  max-width: 720px;
  margin: 0 auto;
}
main > .inner {
  background: rgba(255, 255, 255, .55);
  border-radius: 16px;
  padding: 28px 28px 36px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}

h1 { font-size: clamp(1.6rem, 3.6vh, 2.2rem); margin-bottom: 6px; }
h2 { font-size: 1.15rem; margin: 22px 0 8px; }
p, li { font-size: 1rem; line-height: 1.55; margin: 8px 0; }
ul { padding-left: 22px; }
a  { color: #1565c0; text-decoration: underline; }
a:hover { color: #0d47a1; }

/* Back to game — uses the same image as the in-game BACK button */
.back-link { display: inline-block; margin-bottom: 18px; cursor: pointer; transition: transform .05s; }
.back-link img {
  height: clamp(38px, 7vh, 56px); width: auto; display: block;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.25));
}
.back-link:hover  { transform: translateY(-2px); }
.back-link:active { transform: translateY(3px) scale(.97); }
.muted { color: #557; font-size: .9rem; margin-top: 28px; }

/* ----- Sound + music toggle buttons (top-right) ----- */
/* Two square buttons in the top-right corner. Sound mutes voice/SFX only;
   Music mutes the background music only. Both persist their state via
   localStorage in audio.js, so the choice survives navigation. */
.sound-btn, .music-btn {
  position: fixed; top: 12px; z-index: 1001;
  cursor: pointer; line-height: 0;
  transition: transform .05s;
}
.sound-btn { right: 14px; }
.music-btn { right: 64px; }
.sound-btn img, .music-btn img {
  /* Square footprint + object-fit so square / tall icons read as same size. */
  height: 44px; width: 44px; object-fit: contain; display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
  transition: opacity .15s;
}
.sound-btn:active, .music-btn:active { transform: scale(.9); }
.sound-btn.off img, .music-btn.off img { opacity: .45; }
.sound-btn.off::after, .music-btn.off::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 135%; height: 4px; border-radius: 2px; background: #e53935;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.8);
}