/* =============================================================
   pages.css — shared styles for the play-2048.io content pages
   -------------------------------------------------------------
   Every colour uses your existing CSS variables with a fallback:
       var(--foreground, #776e65)
   If your global stylesheet defines the variable, YOUR value wins
   and these pages match your site automatically. If it does not,
   the fallback keeps them looking correct.

   Load your main stylesheet FIRST, then this file.
   ============================================================= */

* { box-sizing: border-box; }

body.pg {
  margin: 0;
  background-color: var(--background, #faf8ef);
  color: var(--foreground, #776e65);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Header ---------- */
.pg-header {
  border-bottom: 1px solid var(--border, #d8cec4);
  background-color: var(--card, #ffffff);
}
.pg-header-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pg-logo {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--foreground, #776e65);
  text-decoration: none;
  letter-spacing: -0.5px;
}
.pg-nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.pg-nav a {
  color: var(--muted-foreground, #8c8279);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
}
.pg-nav a:hover { color: var(--primary, #c77d48); }
.pg-nav a[aria-current="page"] {
  color: var(--primary, #c77d48);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Layout ---------- */
.pg-main {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* ---------- Breadcrumb ---------- */
.pg-crumb {
  font-size: 0.85rem;
  color: var(--muted-foreground, #8c8279);
  padding: 18px 0 6px;
}
.pg-crumb a { color: var(--muted-foreground, #8c8279); text-decoration: none; }
.pg-crumb a:hover { color: var(--primary, #c77d48); text-decoration: underline; }

/* ---------- Typography ---------- */
.pg-main h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--foreground, #776e65);
  margin: 8px 0 12px;
}
.pg-main h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--foreground, #776e65);
  margin: 40px 0 12px;
}
.pg-main h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--foreground, #776e65);
  margin: 28px 0 8px;
}
.pg-main p { margin: 0 0 18px; }
.pg-main strong { color: var(--foreground, #776e65); font-weight: 700; }
.pg-main a { color: var(--primary, #c77d48); }
.pg-main a:hover { color: var(--foreground, #776e65); }
.pg-lead { font-size: 1.08rem; }

.pg-main ul,
.pg-main ol { margin: 0 0 20px; padding-left: 22px; }
.pg-main li { margin-bottom: 8px; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--primary, #c77d48);
  outline-offset: 2px;
}

/* ---------- Tables ---------- */
.pg-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 24px;
  border-radius: 12px;
  border: 1px solid var(--border, #d8cec4);
}
.pg-table-scroll table {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  font-size: 0.94rem;
  background-color: var(--card, #ffffff);
}
.pg-table-scroll th,
.pg-table-scroll td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border, #d8cec4);
}
.pg-table-scroll thead th {
  background-color: var(--muted, #f1ebe3);
  font-weight: 700;
  color: var(--foreground, #776e65);
}
.pg-table-scroll tbody tr:last-child td { border-bottom: none; }

/* ---------- Callout box ---------- */
.pg-note {
  background-color: var(--card, #ffffff);
  border: 1px solid var(--border, #d8cec4);
  border-left: 4px solid var(--primary, #c77d48);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 24px;
}
.pg-note p:last-child { margin-bottom: 0; }
.pg-note-title { font-weight: 700; margin-bottom: 6px; }

/* ---------- Board diagram ---------- */
.pg-board {
  background-color: var(--muted, #f1ebe3);
  border: 1px solid var(--border, #d8cec4);
  border-radius: 12px;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.9;
  margin: 0 0 24px;
}

/* ---------- Play button ---------- */
.pg-cta { margin: 32px 0 8px; }
.pg-btn {
  display: inline-block;
  background-color: #ffffff;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  padding: 13px 28px;
  border-radius: 12px;
}
.pg-btn:hover { opacity: 0.9; color: #ffffff; }

/* ---------- Related links ---------- */
.pg-related {
  border-top: 1px solid var(--border, #d8cec4);
  margin-top: 44px;
  padding-top: 22px;
}
.pg-related ul { list-style: none; padding: 0; }
.pg-related li { margin-bottom: 8px; }

/* ---------- Footer ---------- */
.pg-footer {
  border-top: 1px solid var(--border, #d8cec4);
  background-color: var(--card, #ffffff);
  margin-top: 40px;
}
.pg-footer-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 22px 16px;
  font-size: 0.88rem;
  color: var(--muted-foreground, #8c8279);
}
.pg-footer-nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pg-footer-nav a { color: var(--muted-foreground, #8c8279); text-decoration: none; }
.pg-footer-nav a:hover { color: var(--primary, #c77d48); text-decoration: underline; }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  body.pg { font-size: 16px; }
  .pg-main h1 { font-size: 1.6rem; }
  .pg-main h2 { font-size: 1.28rem; margin-top: 32px; }
  .pg-nav { gap: 12px; }
  .pg-nav a { font-size: 0.85rem; }
  .pg-table-scroll th,
  .pg-table-scroll td { padding: 9px 11px; }
}