/* pages.css — /words/ 与 /play/ 的页面样式（与 /printable/ 视觉一致） */

:root {
  --ink: #14202b;
  --muted: #5b6b7a;
  --line: #dfe6ec;
  --accent: #1667c4;
  --wash: #f4f7fa;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--wash);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

.wrap { max-width: 760px; margin: 0 auto; padding: 32px 20px 72px; }

.crumb { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.crumb a { color: var(--muted); }

h1 { font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 10px; }
.lede { font-size: 17px; color: #28323c; margin: 0 0 20px; }

h2 { font-size: 20px; letter-spacing: -0.01em; margin: 36px 0 12px; }
h3 { font-size: 16px; margin: 0 0 4px; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 18px;
}

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.chips li {
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
  background: #eef4fb;
  color: #1b4f8a;
  border-radius: 6px;
  padding: 6px 8px;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.btn {
  display: inline-block;
  border-radius: 9px;
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.hint { font-size: 13px; color: var(--muted); margin: 0 0 4px; }

/* CTA / table / related blocks as they appear on the printable pack pages.
   The static build put these in a per-page <style>; WordPress pages get them
   from this file instead, so both places look the same. */
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 10px; }
.cta a.primary,
.cta a.ghost {
  display: inline-block;
  border-radius: 9px;
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
}
.cta a.primary { background: var(--accent); color: #fff; }
.cta a.ghost { border: 1px solid var(--line); color: var(--ink); background: #fff; }
.meta { font-size: 14px; color: var(--muted); }

.wrap table { width: 100%; border-collapse: collapse; margin: 14px 0 26px; font-size: 15px; }
.wrap th,
.wrap td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.wrap th { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.wrap ul.related { padding-left: 18px; }

/* --------------- WordPress host: widen the theme's 672px card for data pages */
body.wf-core-page .entry-content {
  width: min(1180px, 96vw);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
body.wf-core-page article.entry { background: transparent; box-shadow: none; }
body.wf-core-page .entry-content-wrap { padding-inline: 0; }

.list { list-style: none; padding: 0; margin: 0; }
.list li { border-bottom: 1px solid var(--line); padding: 12px 0; }
.list li:last-child { border-bottom: 0; }
.list .name { font-weight: 650; }
.list .meta { display: block; font-size: 13px; color: var(--muted); }

.qa { border-bottom: 1px solid var(--line); padding: 12px 0; }
.qa:last-child { border-bottom: 0; }
.qa p { margin: 0; color: #3a4652; }

footer { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 16px; font-size: 13px; color: var(--muted); }
footer a { color: var(--muted); }

/* ---------------------------------------------------------------- /play/daily/ 交互 */

.play { display: grid; gap: 18px; }

.play-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 14px; }
.play-bar input[type="date"] { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; }

.play-grid {
  display: grid;
  gap: 0;
  border: 2px solid var(--ink);
  width: min(100%, 520px);
  user-select: none;
  touch-action: manipulation;
}
.play-cell {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  font: 700 clamp(9px, 2.2vw, 16px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  border-right: 1px solid #e7edf3;
  border-bottom: 1px solid #e7edf3;
  background: #fff;
  cursor: pointer;
}
.play-cell.is-sel { background: #ffe9a8; }
.play-cell.is-found { background: #d8f0d2; }

.play-words { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.play-words li {
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
  padding: 7px 9px;
  border-radius: 6px;
  background: #eef4fb;
  color: #1b4f8a;
}
.play-words li.is-found { background: #d8f0d2; color: #2c5b22; text-decoration: line-through; }

.status-line { font-size: 14px; color: var(--muted); margin: 0; }


/* --- WordPress host: Kadence column, hero and card ------------------------ */
/* --- WordPress shortcode: the maker needs more room than a blog column -----
   Kadence keeps page content in a ~608px column and gives the hero title a
   200px min-height; the generator needs 1180px. These rules widen the content
   column, flatten the hero and drop the card background so the two columns
   sit on the page background like they do on the static site.              */
body.wf-core-page .entry-content {
  width: min(1180px, 96vw);
  margin-inline: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
body.wf-core-page .entry-hero { min-height: 0 !important; }
body.wf-core-page .entry-hero .hero-container,
body.wf-core-page .entry-hero .entry-header { min-height: 0 !important; padding-block: 0 !important; }
body.wf-core-page .entry-hero .entry-hero-container-inner { padding-block: 18px !important; }
body.wf-core-page .entry-hero .entry-title { font-size: clamp(1.6rem, 3vw, 1.85rem) !important; margin: 0 !important; }
body.wf-core-page .entry-hero .hero-section-overlay { display: none !important; }
body.wf-core-page article.entry { background: transparent !important; box-shadow: none !important; }
body.wf-core-page .content-area,
body.wf-core-page .site-main { padding-top: 0 !important; margin-top: 0 !important; }
.wf-maker.shell {
  width: 100%;
  left: auto;
  transform: none;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
}
.wf-maker .sheet { max-width: 100%; }
@media (max-width: 1100px) {
  .wf-maker.shell { grid-template-columns: 1fr; }
}
@media print {
  #wpadminbar { display: none !important; }
  body.wf-core-page .entry-content { width: auto; left: auto; transform: none; }
}