/* Puzzles & Games: shared styles for /puzzles/ and every puzzle or game page. Every rule is scoped to .pz so nothing
   leaks into the rest of the site, except the print rules at the end, which only exist on puzzle pages (this file is
   loaded nowhere else). Colours follow the site's dark theme (style.css, tool-dark.css). */

.pz { max-width: 1100px; margin: 0 auto; padding: 0 16px 8px; color: var(--text-primary, #E6EDF3); }
.pz [hidden] { display: none !important; }
.pz-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pz-muted { color: var(--text-muted, #9AA4AE); line-height: 1.6; }
.pz-kicker { margin: 0 0 6px; color: #f87171; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.pz-hero { margin: 18px 0 8px; }
.pz-hero h1 { margin: 0 0 8px; font-size: 2rem; color: var(--heading, #F8FAFC); }
.pz-hero > p { max-width: 780px; margin: 0; color: var(--text-muted, #9AA4AE); line-height: 1.6; }

/* Buttons. !important keeps tool-dark.css (which styles every button on tool pages) from overriding them. */
.pz .pz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px !important; border-radius: 12px !important; border: 1px solid transparent !important; background: linear-gradient(135deg, #D32F2F, #B71C1C) !important; color: #fff !important; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px rgba(211, 47, 47, 0.25); }
.pz .pz-btn:hover { filter: brightness(1.07); }
.pz .pz-btn-secondary { background: #1F2937 !important; border-color: var(--border, #2A2F36) !important; box-shadow: none; color: var(--text-primary, #E6EDF3) !important; }
.pz .pz-btn:focus-visible, .pz a:focus-visible, .pz input:focus-visible, .pz select:focus-visible { outline: 2px solid #f87171; outline-offset: 2px; }

.pz-card { margin: 18px 0; padding: 22px; border: 1px solid var(--border, #2A2F36); border-radius: 16px; background: linear-gradient(135deg, #161B22, #111827); box-shadow: 0 16px 42px rgba(0, 0, 0, 0.45); }

/* Segmented choice (difficulty, board size): radio buttons styled as one control */
.pz-levels { display: inline-flex; margin: 0; padding: 0; border: 1px solid var(--border, #2A2F36); border-radius: 12px; overflow: hidden; }
.pz-levels legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pz-levels label { position: relative; padding: 10px 16px; background: #111827; color: var(--text-muted, #9AA4AE); font-weight: 600; cursor: pointer; }
.pz-levels label + label { border-left: 1px solid var(--border, #2A2F36); }
.pz-levels input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pz-levels label:has(input:checked) { background: #D32F2F; color: #fff; }
/* tool-dark.css colours every label on a tool page with !important; the selected option keeps white text (AA contrast). */
.pz .pz-levels label:has(input:checked) { color: #fff !important; }
.pz-levels label:has(input:focus-visible) { outline: 2px solid #f87171; outline-offset: -3px; }

/* Hub */
.pz-jump { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin-top: 16px; }
.pz-jump a { padding: 8px 14px; border: 1px solid var(--border, #2A2F36); border-radius: 999px; background: #111827; color: var(--text-primary, #E6EDF3); font-weight: 600; text-decoration: none; }
.pz-jump a:hover { border-color: #D32F2F; }
.pz-jump span { color: var(--text-muted, #9AA4AE); font-weight: 500; }
.pz-hub-section { margin: 34px 0 0; scroll-margin-top: 90px; }
.pz-hub-section h2 { margin: 0 0 6px; font-size: 1.5rem; color: var(--heading, #F8FAFC); }
.pz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.pz-card-link { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--border, #2A2F36); border-radius: 14px; background: #161B22; }
.pz-card-link h3 { margin: 0; font-size: 1.15rem; }
.pz-card-link h3 a { color: var(--heading, #F8FAFC); text-decoration: none; }
.pz-card-link p { flex: 1; margin: 0; color: var(--text-muted, #9AA4AE); line-height: 1.5; }
.pz-card-link .pz-btn { align-self: flex-start; }
.pz-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pz-tags li { padding: 2px 10px; border-radius: 999px; background: rgba(211, 47, 47, 0.14); color: #fca5a5; font-size: 0.8rem; font-weight: 600; }

/* Text below a tool, and the hub's closing text */
.pz-content { max-width: 860px; margin: 40px auto 0; padding: 0 16px; color: var(--text-primary, #E6EDF3); line-height: 1.65; }
.pz .pz-content { margin: 40px 0 0; padding: 0; }
.pz-content h2 { margin: 28px 0 8px; font-size: 1.35rem; color: var(--heading, #F8FAFC); }
.pz-content h3 { margin: 16px 0 4px; font-size: 1.05rem; color: var(--heading, #F8FAFC); }
.pz-content p, .pz-content li { color: var(--text-muted, #9AA4AE); }
.pz-content a { color: #f87171; }
.pz-faq details { margin: 10px 0; padding: 12px 16px; border: 1px solid var(--border, #2A2F36); border-radius: 12px; background: #161B22; }
.pz-faq summary { cursor: pointer; color: var(--text-primary, #E6EDF3); font-weight: 600; }
.pz-faq details p { margin: 8px 0 0; }
.pz-related { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; }
.pz-related a { display: inline-block; padding: 8px 14px; border: 1px solid var(--border, #2A2F36); border-radius: 999px; background: #111827; color: var(--text-primary, #E6EDF3); text-decoration: none; }
/* tool-dark.css colours every link on a tool page #D32F2F (hover #B71C1C), too dark on this pill; these keep AA contrast. */
.pz-content .pz-related a, .pz-content .pz-related a:visited { color: #f87171; }
.pz-content .pz-related a:hover, .pz-content .pz-related a:focus-visible { color: #fff; border-color: #D32F2F; }
.pz-content .pz-related a:focus-visible { outline: 2px solid #f87171; outline-offset: 2px; }

@media (max-width: 600px) {
    .pz-hero h1 { font-size: 1.6rem; }
    .pz-card { padding: 16px; }
}

/* The site's floating Share control (includes/social-share.php) fades out while it would cover the game board or a
   printable sheet, and comes back once it is clear (puzzles.js). Only puzzle pages load this file. */
.social-share-container { transition: opacity 0.2s ease, visibility 0.2s ease; }
.pz-share-clear .social-share-container { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .social-share-container { transition: none; }
}

/* Print: never print an advertisement from a puzzle page (in-content units, Auto ads, their frames). Printable puzzles
   add their own rules (only the puzzle sheets print); this keeps any other puzzle page clean too. */
@media print {
    .ad-slot, .ad-reserve-tool, ins.adsbygoogle, .google-auto-placed, iframe { display: none !important; }
}