/* Shared styles for static content pages (guides, puzzle archive, 404). */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1446 50%, #2d1b4e 100%);
    background-attachment: fixed;
    color: #e0e0e0;
    min-height: 100vh;
    padding: 15px;
}
.container { max-width: 900px; margin: 0 auto; }
.card {
    background: linear-gradient(135deg, #1a1446 0%, #2d1b4e 100%);
    padding: 40px;
    border-radius: 20px;
    border: 3px solid #9d4edd;
    box-shadow: 0 0 50px rgba(157, 78, 221, 0.5);
}
h1 { font-size: 2em; margin-bottom: 8px; color: #fff; line-height: 1.3; }
.subtitle { color: #b0b0b0; margin-bottom: 24px; font-size: 1.1em; }
h2 { font-size: 1.35em; margin: 32px 0 14px; color: #c77dff; }
h3 { font-size: 1.1em; margin: 22px 0 10px; color: #fff; }
p, li { color: #c8c8c8; margin-bottom: 12px; line-height: 1.7; }
ul, ol { padding-left: 25px; margin-bottom: 15px; }
li { margin-bottom: 8px; }
a { color: #8ea2ff; text-decoration: none; }
a:hover { color: #c77dff; text-decoration: underline; }
strong { color: #fff; }
em { color: #e0c3fc; font-style: normal; }
code { background: rgba(255, 255, 255, 0.08); padding: 1px 6px; border-radius: 4px; }

.nav-links { text-align: center; margin-bottom: 28px; }
.nav-links a { color: #b0b0b0; margin: 0 10px; font-weight: 600; display: inline-block; }
.nav-links a:hover { color: #9d4edd; text-decoration: none; }
.footer { text-align: center; margin-top: 24px; color: #888; font-size: 0.9em; }
.footer a { color: #b0b0b0; }
.breadcrumb { font-size: 0.9em; color: #999; margin-bottom: 10px; }

.callout {
    background: rgba(157, 78, 221, 0.15);
    border-left: 4px solid #9d4edd;
    padding: 16px 20px;
    border-radius: 8px;
    margin: 20px 0;
}
.callout p:last-child { margin-bottom: 0; }

.toc { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.toc li { margin: 0; }
.toc a {
    display: inline-block; padding: 6px 14px; border-radius: 20px;
    background: rgba(157, 78, 221, 0.2); border: 1px solid #9d4edd; color: #fff;
}
.day-nav { display: flex; justify-content: space-between; gap: 10px; margin: 20px 0; font-weight: 600; }

.puzzle { border-top: 2px solid rgba(157, 78, 221, 0.4); margin-top: 36px; padding-top: 8px; }
.meta { color: #999; font-size: 0.95em; }
.play-btn {
    display: inline-block; background: #9d4edd; color: #fff; padding: 8px 22px;
    border-radius: 25px; font-weight: 600;
}
.play-btn:hover { background: #b06ae8; color: #fff; text-decoration: none; }
.clues li { margin-bottom: 6px; }
.steps li { margin-bottom: 10px; }

details {
    background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(157, 78, 221, 0.4);
    border-radius: 10px; padding: 12px 16px; margin: 14px 0;
}
summary { cursor: pointer; font-weight: 600; color: #fff; }
details[open] summary { margin-bottom: 12px; }

.grid-wrap { overflow-x: auto; margin: 12px 0; }
.grid { border-collapse: collapse; font-size: 0.8em; min-width: 100%; }
.grid th, .grid td { border: 1px solid rgba(157, 78, 221, 0.4); padding: 6px; text-align: center; vertical-align: middle; }
.grid th { color: #fff; background: rgba(157, 78, 221, 0.2); white-space: nowrap; }
.grid td { min-width: 64px; height: 56px; }
.grid td img { display: block; margin: 0 auto 2px; }
.grid td span { color: #ddd; font-size: 0.9em; }
.col-num { display: block; font-weight: 400; color: #aaa; font-size: 0.85em; }

.date-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.date-list li { margin: 0; }
.date-list a {
    display: block; text-align: center; padding: 6px 0; border-radius: 8px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(157, 78, 221, 0.3);
}

.example { background: rgba(255, 255, 255, 0.04); border-radius: 10px; padding: 14px 18px; margin: 12px 0; }
.example p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
    .card { padding: 22px 16px; }
    h1 { font-size: 1.5em; }
    .nav-links a { margin: 4px 8px; }
}

/* Difficulty ratings and summary tables */
.rating { margin-bottom: 6px; }
.paws { color: #c77dff; letter-spacing: 2px; }
.glance { border-collapse: collapse; width: 100%; font-size: 0.95em; margin-bottom: 8px; }
.glance th, .glance td { border-bottom: 1px solid rgba(157, 78, 221, 0.3); padding: 8px 10px; text-align: left; }
.glance th { color: #fff; white-space: nowrap; }
.glance td { color: #c8c8c8; }
button.play-btn { border: none; font: inherit; font-weight: 600; cursor: pointer; }

/* Printable packs */
.sheet { border-top: 2px solid rgba(157, 78, 221, 0.4); margin-top: 36px; padding-top: 8px; }
.print-grid { margin-bottom: 16px; }
.sheet-body { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: flex-start; }
.sheet-main { flex: 1 1 300px; }
.scratch { flex: 0 0 auto; }
.print-grid td { height: 44px; min-width: 80px; color: #ddd; }
.scratch-grid { font-size: 0.75em; min-width: 0; }
.scratch-grid th { text-align: left; font-weight: 400; }
.scratch-grid td { height: 22px; min-width: 44px; }
.scratch-grid .cat-row th { font-weight: 600; background: rgba(157, 78, 221, 0.35); }
.answer-key { border-top: 2px solid rgba(157, 78, 221, 0.4); margin-top: 36px; }
.key-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 20px; }
.key-grid { font-size: 0.7em; }
.key-grid td { height: auto; min-width: 0; color: #ddd; }

@media print {
    @page { margin: 14mm; }
    body { background: #fff !important; color: #000; padding: 0; font-size: 11pt; }
    .card { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
    .nav-links, .footer, .breadcrumb, .no-print { display: none !important; }
    h1, h2, h3, p, li, strong, em, th, td, span, a, .meta, .subtitle { color: #000 !important; }
    h2 { margin-top: 0; }
    .grid th, .grid td { border-color: #000 !important; }
    .grid th, .scratch-grid .cat-row th { background: #e8e8e8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .sheet, .answer-key { border-top: 0; margin-top: 0; padding-top: 0; break-before: page; }
    .scratch { break-inside: avoid; }
    .sheet, .print-grid { break-inside: avoid; }
    .sheet-body { flex-wrap: nowrap; }
    .print-grid td { color: #000 !important; }
    .key-item { break-inside: avoid; }
    .no-print + .sheet { break-before: auto; }
    h1 { font-size: 16pt; margin-bottom: 2px; }
    .subtitle { margin-bottom: 10px; font-size: 10pt; }
    h2 { font-size: 14pt; margin-bottom: 4px; }
    h3 { font-size: 11pt; margin: 10px 0 4px; }
    p, li { line-height: 1.35; margin-bottom: 3px; }
    ul, ol { margin-bottom: 6px; }
    .print-grid td { height: 32px; }
    .scratch-grid td { height: 17px; }
    .scratch-grid th, .scratch-grid td { padding: 1px 6px; }
}