/* Sudoku Word Search — sudokuwordsearch.com
   Colors come from CSS vars set in _includes/head.html (from _data/site.yml),
   matching the Skadson Puzzles palette. The .sws-* rules style the game DOM,
   which assets/ts builds at runtime. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--card);
  line-height: 1.6;
  font-size: 18px;
}
h1, h2, h3 { font-family: "Fraunces", Georgia, "Times New Roman", serif; line-height: 1.1; font-weight: 600; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.wrap { width: min(1080px, 100% - 3rem); margin-inline: auto; }
.measure { max-width: 44rem; }
main { display: block; }
section { padding-block: clamp(2.2rem, 6vw, 4.5rem); }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.note { background: #fff6f3; border: 1px solid #f3c9be; color: #8a3a2b; border-radius: 10px; padding: .8rem 1rem; }

/* Header */
.site-header { background: var(--bg); color: var(--fg); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; flex-wrap: wrap; }
.brand { color: var(--fg); font-family: "Fraunces", serif; font-weight: 600; font-size: 1.25rem; }
.brand:hover { text-decoration: none; opacity: .9; }
.nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.nav a { color: var(--muted); font-size: .95rem; }
.nav a:hover { color: var(--fg); text-decoration: none; }

/* Hero + buttons */
.hero { background: var(--bg); color: var(--fg); }
.hero .home-hero { font-size: clamp(2.4rem, 7vw, 4rem); margin: 0; letter-spacing: -.5px; }
.hero-tagline { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.15; color: var(--fg); margin: .8rem 0 0; }
.hero-tagline .accent { color: var(--accent); }
.hero-sub { color: var(--muted); font-size: 1.2rem; margin-top: 1rem; max-width: 38rem; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin: 1.5rem 0 0; }
.btn, .btn-amazon { display: inline-block; background: var(--accent); color: #fff; padding: .8rem 1.5rem; border-radius: 10px; font-weight: 600; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.btn:hover, .btn-amazon:hover { text-decoration: none; filter: brightness(1.05); }
.btn-ghost { background: transparent; border: 1.5px solid currentColor; color: inherit; padding: calc(.8rem - 1.5px) 1.5rem; }
.hero .btn-amazon { background: transparent; border: 1.5px solid var(--muted); color: var(--fg); padding: calc(.8rem - 1.5px) 1.5rem; }

.section-title { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0 0 1.25rem; }
.about p { font-size: 1.12rem; }
.about strong { color: var(--bg); }

/* Landing: difficulty tiers */
.tiers { background: #f6f8fc; }
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tier-card { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1.5rem 1rem; background: #fff; border: 1px solid #e6e8ef; border-radius: 14px; color: var(--ink); }
.tier-card:hover { text-decoration: none; box-shadow: 0 12px 28px rgba(20,30,60,.10); transform: translateY(-2px); transition: .15s; }
.tier-n { font-family: "Fraunces", serif; font-size: 2.2rem; font-weight: 600; color: var(--accent); }
.tier-name { font-weight: 600; }
.book-pitch { background: var(--bg); color: var(--fg); }
.book-pitch .section-title { color: var(--fg); }
.book-pitch p { color: var(--muted); }
.book-pitch a { color: #fff; text-decoration: underline; }
@media (max-width: 560px) { .tier-grid { grid-template-columns: repeat(2, 1fr); } }

/* Prose pages */
.prose-section h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin: 0 0 1rem; }
.prose-section h2 { font-size: 1.5rem; margin: 2rem 0 .5rem; }
.prose-section kbd { background: #eef1f8; border: 1px solid #d4dae9; border-radius: 5px; padding: .05em .4em; font-size: .85em; }

/* Puzzle picker */
.tier-head { display: flex; align-items: baseline; gap: .6rem; font-size: 1.4rem; margin: 2rem 0 .8rem; scroll-margin-top: 1rem; }
.tier-count { font-size: .9rem; font-weight: 500; color: #fff; background: var(--accent); border-radius: 999px; padding: .1rem .6rem; font-family: "Inter", sans-serif; }
.puzzle-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr)); gap: .6rem; }
.puzzle-chip { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: #fff; border: 1px solid #d8deeb; border-radius: 12px; color: var(--ink); font-weight: 600; font-size: 1.1rem; }
.puzzle-chip:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.puzzle-chip.done { background: #eaf6ee; border-color: #9ed3b0; }
.puzzle-chip.done::after { content: "✓"; position: absolute; top: -.4rem; right: -.4rem; width: 1.25rem; height: 1.25rem; background: #2e8b57; color: #fff; border-radius: 50%; font-size: .8rem; display: flex; align-items: center; justify-content: center; }

/* Stuck code-entry */
.code-form { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.25rem 0; }
.code-form input { flex: 1 1 14rem; padding: .85rem 1rem; border-radius: 10px; border: 1px solid #c8d0e2; font-size: 1.2rem; font-family: ui-monospace, monospace; letter-spacing: .15em; }
.code-form input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.codechip { background: #eef1f8; border-radius: 6px; padding: .1em .45em; }

/* Game shell */
.crumbs { margin: 1.5rem 0 .5rem; font-size: .95rem; }
.game-section { padding-top: 0; }
.game-h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: .25rem 0 1rem; }
.game-mount { margin-top: 1rem; }

/* ---- The game (DOM built by assets/ts) ---- */
.swsgame { --line: #cfd6e6; --given: var(--bg); --entered: #2563eb; display: flex; flex-direction: column; gap: 1.25rem; }
.sws-metarow { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; }
.sws-chip { font-size: .85rem; font-weight: 600; background: #f1f3f9; color: #3a4060; border-radius: 999px; padding: .25rem .75rem; }
.sws-chip.diff-easy { background:#e8f6ee; color:#1f7a47; }
.sws-chip.diff-medium { background:#fff3e0; color:#9a6212; }
.sws-chip.diff-hard { background:#fdecea; color:#b1391f; }
.sws-chip.diff-expert { background:#efe6fb; color:#6b32b0; }

/* Alphabet reference bar */
.sws-rack { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.sws-rack-label { font-size: .85rem; color: #667; margin-right: .25rem; }
.sws-rack-cell { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--bg); border-radius: 6px; font-weight: 700; font-family: "Fraunces", serif; }

/* Board + side-by-side word list */
.sws-main { display: grid; grid-template-columns: minmax(0, 33rem) 1fr; gap: 1.75rem; align-items: start; }
@media (max-width: 760px) { .sws-main { grid-template-columns: 1fr; } }

.sws-grid { display: grid; grid-template-columns: repeat(9, 1fr); width: 100%; max-width: 33rem; aspect-ratio: 1; margin: 0; border: 3px solid var(--bg); background: #fff; touch-action: manipulation; }
.sws-cell { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; font-family: "Fraunces", serif; font-weight: 600; font-size: clamp(1rem, 4.2vw, 1.7rem); color: var(--entered); cursor: pointer; padding: 0; user-select: none; -webkit-tap-highlight-color: transparent; }
.sws-cell:nth-child(9n) { border-right: 0; }
.sws-cell:nth-child(n+73) { border-bottom: 0; }
.sws-cell.bx-right { border-right: 2px solid var(--bg); }
.sws-cell.bx-bottom { border-bottom: 2px solid var(--bg); }
.sws-cell.is-given { color: var(--given); font-weight: 700; cursor: default; }
.sws-cell.is-peer { background: #f3f6fc; }
.sws-cell.is-same { background: #e1e9fb; }
.sws-cell.is-selected { background: #fdeee9; box-shadow: inset 0 0 0 2px var(--accent); z-index: 1; }
.sws-cell.is-conflict { color: #c0392b; background: #fde7e3; }
.sws-cell.is-hint { animation: swspulse 1.1s ease-in-out 3; }
@keyframes swspulse { 0%,100% { background: transparent; } 50% { background: #ffe2b0; } }
.sws-cell.is-given.is-hint { animation: swspulse 1.1s ease-in-out 3; }

/* Pencil marks: a 3x3 micro-grid of candidates, shown only when the cell is empty */
.sws-pencil { position: absolute; inset: 8%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); font-family: "Inter", sans-serif; font-weight: 500; color: #8a93ac; font-size: clamp(.42rem, 1.5vw, .62rem); pointer-events: none; }
.sws-pencil span { display: flex; align-items: center; justify-content: center; }
/* A candidate being ruled out this walkthrough step: shown struck through, then
   gone on the next step. */
.sws-pencil .struck { color: #c0392b; font-weight: 700; text-decoration: line-through; }

/* On-screen keypad */
.sws-keypad { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; max-width: 33rem; }
.sws-key { padding: .7rem 0; border: 1px solid #c8d0e2; border-radius: 10px; background: #fff; font-family: "Fraunces", serif; font-weight: 600; font-size: 1.25rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sws-key:hover { border-color: var(--accent); }
.sws-key:active { background: #fdeee9; }
.sws-key.util { font-family: "Inter", sans-serif; font-size: .95rem; font-weight: 600; color: #3a4060; }
.sws-key.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
.sws-key[disabled] { opacity: .4; cursor: default; }

/* Word list */
.sws-words-title { font-size: 1rem; font-weight: 600; color: #3a4060; margin: 0 0 .5rem; }
.sws-words { display: flex; flex-wrap: wrap; gap: .4rem .55rem; padding: 0; margin: 0; list-style: none; }
.sws-word { font-family: "Fraunces", serif; font-weight: 600; letter-spacing: .03em; padding: .2rem .5rem; border-radius: 6px; background: #f1f3f9; color: #2b3450; cursor: pointer; }
.sws-word.is-found { color: #9aa3ba; background: transparent; text-decoration: line-through; }
.sws-word:hover { outline: 1.5px solid var(--accent); }

/* Controls + status + walkthrough */
.sws-controls { display: flex; flex-wrap: wrap; gap: .6rem; }
.sws-btn { padding: .6rem 1.1rem; border: 1px solid #c8d0e2; border-radius: 10px; background: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.sws-btn:hover { border-color: var(--accent); color: var(--accent); }
.sws-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.sws-btn.primary:hover { filter: brightness(1.05); color: #fff; }
.sws-btn[disabled] { opacity: .45; cursor: default; border-color: #c8d0e2; color: inherit; }
.sws-status { min-height: 1.2em; font-weight: 600; }
.sws-status.ok { color: #2e8b57; }
.sws-status.bad { color: #c0392b; }

.sws-walk { background: #f6f8fc; border: 1px solid #e0e5f0; border-left: 4px solid var(--accent); border-radius: 10px; padding: 1rem 1.1rem; }
.sws-walk-step { font-size: .85rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.sws-walk-reason { margin: .35rem 0 0; font-size: 1.05rem; }
.sws-tech-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-transform: capitalize; }
.sws-walk-done { color: #2e8b57; font-weight: 600; }

/* Win banner */
.sws-win { background: var(--bg); color: var(--fg); border-radius: 14px; padding: 1.5rem; text-align: center; }
.sws-win h3 { color: var(--fg); font-size: 1.6rem; margin: 0 0 .5rem; }
.sws-win p { color: var(--muted); margin: 0 0 1rem; }
.sws-win .hero-cta { justify-content: center; }

/* Newsletter (footer band reuse) */
.site-footer { background: #11192e; color: var(--muted); padding-block: 2.5rem; }
.site-footer .brand-line { font-family: "Fraunces", serif; color: var(--fg); font-size: 1.1rem; margin: 0 0 .25rem; }
.site-footer p { margin: 0 0 .35rem; }
.site-footer a { color: #fff; text-decoration: underline; }
.site-footer .fine { margin-top: .75rem; font-size: .85rem; color: #6b7690; }