:root {
  --paper: #faf6ec;
  --card: #fffdf7;
  --ink: #2b2620;
  --muted: #8a7f6d;
  --border: #e6dcc4;
  --accent: #c1502e;
  --accent-ink: #ffffff;
  --found: #7a9a5c;
  --selected-bg: rgba(193, 80, 46, 0.28);
  --found-bg: rgba(122, 154, 92, 0.35);
  --radius: 14px;
}

/* Author-chosen puzzle themes. "classic" is the palette above and needs no
   override; the others are applied via [data-theme="..."] on whichever
   element wraps the puzzle -- the whole <body> on p.html, or just the
   preview pane on index.html -- so custom properties cascade down to
   everything inside it (panels, buttons, the grid) without touching
   anything outside that wrapper. Keep this list in sync with WS_THEMES in
   api/lib.php and the .theme-swatch dots below. */
[data-theme="ocean"] {
  --paper: #eaf4f6; --card: #ffffff; --ink: #163137; --muted: #5b7d84;
  --border: #cfe6ea; --accent: #1f7a8c; --accent-ink: #ffffff; --found: #3fa796;
  --selected-bg: rgba(31, 122, 140, 0.28); --found-bg: rgba(63, 167, 150, 0.35);
}
[data-theme="forest"] {
  --paper: #f0f5ea; --card: #fbfdf7; --ink: #26321f; --muted: #6c7f5c;
  --border: #dbe6c9; --accent: #4c7a3f; --accent-ink: #ffffff; --found: #b98a2e;
  --selected-bg: rgba(76, 122, 63, 0.28); --found-bg: rgba(185, 138, 46, 0.35);
}
[data-theme="sunset"] {
  --paper: #fdf1e6; --card: #fffaf3; --ink: #3a2419; --muted: #a1795a;
  --border: #f4dabb; --accent: #e0663f; --accent-ink: #ffffff; --found: #c98a1f;
  --selected-bg: rgba(224, 102, 63, 0.28); --found-bg: rgba(201, 138, 31, 0.35);
}
[data-theme="berry"] {
  --paper: #f6eef6; --card: #fffbff; --ink: #33202f; --muted: #8a6d87;
  --border: #e7d2e7; --accent: #93357c; --accent-ink: #ffffff; --found: #4f8a63;
  --selected-bg: rgba(147, 53, 124, 0.28); --found-bg: rgba(79, 138, 99, 0.35);
}
[data-theme="midnight"] {
  --paper: #171923; --card: #20232f; --ink: #e8eaf2; --muted: #9498ac;
  --border: #343849; --accent: #6c8cff; --accent-ink: #0c0d14; --found: #4fd1a5;
  --selected-bg: rgba(108, 140, 255, 0.30); --found-bg: rgba(79, 209, 165, 0.30);
  /* the dotted body background below is tuned for a light paper color */
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--paper);
  background-image: radial-gradient(circle at 1px 1px, rgba(43,38,32,0.05) 1px, transparent 0);
  background-size: 18px 18px;
  color: var(--ink);
  padding: 32px 16px 80px;
}
.wrap { max-width: 720px; margin: 0 auto; }
.wrap.wide { max-width: 900px; }

.auth-nav {
  display: flex; justify-content: flex-end; align-items: center; gap: 12px;
  font-size: 0.82rem; margin-bottom: 10px; min-height: 20px;
}
.auth-nav a { color: var(--accent); text-decoration: none; font-weight: 600; }
.auth-nav a:hover { text-decoration: underline; }
.auth-nav .auth-sep { color: var(--border); }

header.page-header { position: relative; text-align: center; margin-bottom: 28px; }
header.page-header h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem; margin: 0 0 4px; letter-spacing: -0.01em;
}
header.page-header p { color: var(--muted); font-size: 0.9rem; margin: 0; }
.mfa-home { position: absolute; top: 0; left: 0; display: inline-flex; border-radius: 7px; }
.mfa-home img { display: block; width: 26px; height: 26px; border-radius: 7px; }
.mfa-home:hover, .mfa-home:focus-visible { opacity: .8; }

.panel {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.panel h2 {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 0 0 12px;
}
.panel p.hint { font-size: 0.8rem; color: var(--muted); margin: -6px 0 14px; }

.panel.hero { text-align: center; }
.panel.hero p { max-width: 520px; margin: 0 auto; font-size: 0.95rem; }
.hero-actions { justify-content: center; margin-top: 18px; }
.feature-list { margin: 0; padding-left: 20px; font-size: 0.9rem; display: grid; gap: 8px; }

textarea, input[type="text"], input[type="number"], input[type="email"], input[type="password"] {
  width: 100%; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: 0.9rem; background: #fffef9;
  color: var(--ink);
}
textarea { min-height: 120px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
textarea:focus, input:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
button:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
label.field-label { font-size: 0.8rem; color: var(--muted); display: block; margin: 14px 0 4px; font-weight: 600; }
.theme-picker { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.theme-swatch { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; cursor: pointer; }
.theme-swatch input { width: auto; margin: 0; }
.swatch-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,0.15); }
.swatch-classic { background: #c1502e; }
.swatch-ocean { background: #1f7a8c; }
.swatch-forest { background: #4c7a3f; }
.swatch-sunset { background: #e0663f; }
.swatch-berry { background: #93357c; }
.swatch-midnight { background: #6c8cff; }
.row { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.checkbox-row { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.checkbox-row input { width: auto; }

.create-layout { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.create-main { flex: 1 1 420px; min-width: 280px; }
.create-sidebar { flex: 1 1 300px; min-width: 280px; }
@media (min-width: 860px) {
  .create-sidebar { position: sticky; top: 20px; }
}

button {
  font-size: 0.88rem; font-weight: 600; padding: 10px 20px; border-radius: 999px;
  border: none; cursor: pointer; background: var(--accent); color: var(--accent-ink);
}
button.secondary { background: transparent; color: var(--muted); border: 1px solid var(--border); }
button.tiny { padding: 6px 12px; font-size: 0.78rem; }
button:disabled { opacity: 0.4; cursor: not-allowed; }

.status { font-size: 0.82rem; margin-top: 10px; min-height: 1.2em; }
.status.ok { color: #4c6b34; }
.status.err { color: #a5341c; }
.status.warn { color: #9a6b1f; }

.link-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem;
  background: #fffef9; border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; word-break: break-all; margin-top: 10px; display: flex;
  justify-content: space-between; align-items: center; gap: 10px;
}

.empty-state { text-align: center; color: var(--muted); font-size: 0.9rem; padding: 40px 10px; }
footer.note { text-align: center; color: var(--muted); font-size: 0.75rem; margin-top: 40px; }
footer.note a { color: var(--muted); font-weight: 600; text-decoration: underline; }
footer.note a:hover { color: var(--accent); }
footer.note .site-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
footer.note .site-links a { text-decoration: none; }
footer.note .site-links a:hover { text-decoration: underline; }
footer.note .promo-banner {
  display: flex; align-items: center; gap: 18px; margin-top: 18px;
  padding: 14px 18px; text-align: left; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius); box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
footer.note .promo-banner:hover, footer.note .promo-banner:focus-visible {
  transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.promo-tiles { display: flex; flex: none; }
.promo-tiles .tile {
  --r: 0deg;
  width: 30px; height: 30px; margin-left: -10px;
  display: flex; align-items: flex-end; justify-content: center; position: relative;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 1rem;
  background: #fff8e7; border: 1px solid var(--border); border-radius: 5px;
  color: var(--ink); box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transform: rotate(var(--r)); padding-bottom: 3px;
}
.promo-tiles .tile:first-child { margin-left: 0; }
.promo-tiles .tile .pt { position: absolute; top: 2px; left: 3px; font-size: 0.5rem; font-weight: 600; color: var(--muted); }
footer.note .promo-copy { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 160px; text-align: left; }
footer.note .promo-eyebrow { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; text-decoration: none; }
footer.note .promo-title { font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
footer.note .promo-sub { font-size: 0.8rem; color: var(--muted); font-weight: 400; text-decoration: none; }
footer.note .promo-cta { flex: none; font-size: 0.85rem; font-weight: 700; color: var(--accent); white-space: nowrap; text-decoration: none; }
footer.note .promo-banner:hover .promo-cta, footer.note .promo-banner:focus-visible .promo-cta { text-decoration: underline; }

@media (max-width: 640px) {
  footer.note .promo-banner { flex-wrap: wrap; justify-content: center; text-align: center; }
  footer.note .promo-copy { align-items: center; text-align: center; }
}

footer.note .coffee-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  padding: 8px 16px; background: #ffdd00; color: #2b2620; font-weight: 700;
  font-size: 0.8rem; border-radius: 999px; text-decoration: none;
  border: 1px solid #e6c700; transition: transform .15s ease, box-shadow .15s ease;
}
footer.note .coffee-link:hover, footer.note .coffee-link:focus-visible {
  transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.15); color: #2b2620;
}

.sidebar-ad {
  display: none; position: fixed; top: 120px; right: 24px; z-index: 5;
  border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  background: var(--card);
}
.sidebar-ad-label {
  display: block; line-height: normal;
  padding: 3px 0; text-align: center;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
}
.sidebar-ad img { display: block; width: 160px; height: 600px; }
/* Only shown once the viewport has real room beside the 900px-wide .wrap --
   otherwise it would overlap the puzzle content. */
@media (min-width: 1300px) {
  .sidebar-ad { display: block; }
}

/* My Puzzles */
.puzzle-section h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 12px; }
.puzzle-list { list-style: none; margin: 0 0 24px; padding: 0; }
.puzzle-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px dashed var(--border);
}
.puzzle-list .puzzle-title { font-weight: 600; }
.puzzle-list .puzzle-meta { font-size: 0.78rem; color: var(--muted); }
.puzzle-list .puzzle-actions { display: flex; gap: 8px; flex: none; }
.puzzle-list li.draft { border-left: 3px solid var(--accent); padding-left: 10px; }
.draft-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent); background: rgba(193, 80, 46, 0.12);
  border-radius: 999px; padding: 2px 8px; vertical-align: middle;
}

/* Puzzle view */
.page-sub { color: var(--muted); font-size: 0.8rem; margin: 4px 0 0; }
.qr-block {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); text-align: center; flex: none;
}
.qr-block img { display: block; margin: 0 auto; }
.qr-block p { font-size: 0.78rem; color: var(--muted); margin: 8px 0 0; }
.puzzle-layout { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
/* --cols (set inline per-puzzle by solve.js/index.html's preview renderer -- the grid is
   always square, so --cols is both the row and column count) lives on .grid-wrap, not the
   table: .grid-wrap is a flex item here, so its own width resolves against .puzzle-layout's
   definite size, whereas a % width on the table itself would resolve against .grid-wrap's
   *auto* flex-basis -- which in turn depends on the table's content, a circular dependency
   that collapses to 0 instead of sizing at all. */
.grid-wrap {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  width: min(100%, calc(var(--cols, 15) * 30px + 32px));
  container-type: inline-size;
}
/* Cells are sized off --cols, not a fixed px, so a big grid shrinks to fit any phone width
   instead of overflowing the page horizontally like it used to. 30px is the same cap the
   fixed size always used, so nothing changes for grids small enough to already fit at that
   size. Font size is derived the same way (~half the resolved cell width, floored at 8px) so
   text stays proportional instead of overflowing a shrunk cell. */
table.grid {
  border-collapse: collapse; user-select: none; touch-action: none; table-layout: fixed;
  width: 100%;
  margin: 0 auto;
}
table.grid td {
  /* aspect-ratio doesn't reliably apply to table cells (row height stayed content-sized
     instead of matching width in testing), so height is spelled out explicitly here to
     match width instead of relying on it. Both use cqw (relative to .grid-wrap's own
     resolved content width, via its container-type:inline-size) rather than % so they
     compute to a real length, not one more layer of percentage-of-auto circularity. */
  width: calc(100cqw / var(--cols, 15)); height: calc(100cqw / var(--cols, 15));
  text-align: center; vertical-align: middle;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700;
  font-size: max(8px, calc(100cqw / var(--cols, 15) * 0.5));
  color: var(--ink); cursor: pointer; position: relative;
}
table.grid td.selected { background: var(--selected-bg); }
table.grid td.found { background: var(--found-bg); }

.word-list { min-width: 200px; }
.word-list h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 10px; }
.word-list ul { list-style: none; margin: 0; padding: 0; }
.word-list li {
  font-size: 0.95rem; padding: 5px 0; border-bottom: 1px dashed var(--border);
}
.word-list li.found { color: var(--found); text-decoration: line-through; opacity: 0.7; }
.progress { font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; }
.win-banner {
  background: var(--found); color: white; padding: 10px 14px; border-radius: 10px;
  text-align: center; font-weight: 700; margin-bottom: 16px; display: none;
}
.win-banner.show { display: block; }

@media print {
  /* Force the light "classic" palette on paper regardless of the puzzle's
     on-screen theme (e.g. midnight's light ink would be unreadable on white
     paper) -- printing isn't the place to show off the color scheme. */
  /* body[data-theme] (rather than plain body) so this outranks the
     [data-theme="..."] specificity of the theme blocks above it. */
  body, body[data-theme] {
    background: white; padding: 0;
    --paper: #faf6ec; --card: #fffdf7; --ink: #2b2620; --muted: #8a7f6d;
    --border: #e6dcc4; --accent: #c1502e; --accent-ink: #ffffff; --found: #7a9a5c;
  }
  .no-print { display: none !important; }
  .puzzle-layout { gap: 20px; }
  table.grid td.selected, table.grid td.found { background: none !important; }
}