/* 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; }
}
/* Phones: the generator's sheet is typeset at 184 mm, which is wider than a
   phone. Rather than reflowing the page (the print geometry must not change),
   scale the sheet down so the whole page fits, and let the form stack. */
@media (max-width: 820px) {
  body.wf-core-page .entry-content,
  body.wf-core-page .entry-content-wrap,
  body.wf-core-page .content-wrap,
  body.wf-core-page .site-main {
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    transform: none !important;
    padding-inline: 14px !important;
    box-sizing: border-box;
  }
  body.wf-core-page .entry-hero,
  body.wf-core-page .entry-hero .hero-container,
  body.wf-core-page .entry-hero .entry-header,
  body.wf-core-page .entry-hero .entry-hero-container-inner,
  body.wf-core-page main.wrap,
  body.wf-core-page .content-container {
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    transform: none !important;
    padding-inline: 14px !important;
    min-height: 0 !important;
  }
  body.wf-core-page .entry-hero .entry-title { font-size: 1.45rem !important; }
  .wf-maker.shell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    transform: none !important;
  }
  .wf-maker aside { margin-bottom: 20px; }
  /* Two selects side by side leave ~120px each on a phone, which truncates
     "All 8 directions" and "A4 portrait" — stack them instead. */
  .wf-maker .row { display: block; }
  .wf-maker .row > .field + .field { margin-top: 12px; }
  /* The sheet stays 184 mm so print geometry is untouched; on a phone the
     preview scrolls sideways instead of being scaled (scaling would corrupt the
     millimetre measurement fitSizing() does before printing). */
  .wf-maker { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wrap table { display: block; overflow-x: auto; white-space: nowrap; }
  .chips { gap: 4px; }
}
@media print {
  #wpadminbar { display: none !important; }
  body.wf-core-page .entry-content { width: auto; left: auto; transform: none; }
}

/* ---- Brand -----------------------------------------------------------------
   The logo is a wordmark; Kadence's default maximum height is too generous and
   the header jumps when the menu wraps. Fix a height and let the width follow. */
.site-branding .custom-logo,
.site-header .custom-logo-link img,
img.custom-logo {
  height: 44px;
  width: auto;
  max-width: 240px;
  display: block;
}
.site-header .site-branding { padding-block: 8px; }
/* The logo already spells the site name; Kadence still renders .site-title next
   to it, which reads as "wordfind.fun wordfind.fun". Matched from <body> because
   the mobile header puts the logo and the title in different wrappers. */
.site-branding:has(.custom-logo) .site-title { display: none; }
.site-branding:has(.custom-logo) .site-description { display: none; }
body:has(img.custom-logo) .site-title { display: none; }
@media (max-width: 767px) {
  .site-branding .custom-logo,
  .site-header .custom-logo-link img,
  img.custom-logo { height: 34px; max-width: 190px; }
}