:root {
    --bg: #f4f5f7;
    --panel: #ffffff;
    --ink: #1f2430;
    --muted: #6b7280;
    --line: #d7dbe0;
    --accent: #3b6ef5;
    --accent-ink: #ffffff;
    --shade: #ffe9a8;
    --black-cell: #2b3040;
    --radius: 10px;
}

* { box-sizing: border-box; }

/* The HTML hidden attribute must win over component display rules
   (e.g. .actions/.toggle use display:flex). */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(1200px 420px at 100% -120px, rgba(123, 92, 255, 0.10), transparent 70%),
        radial-gradient(1000px 460px at -10% -80px, rgba(59, 110, 245, 0.12), transparent 70%),
        var(--bg);
    background-attachment: fixed;
    line-height: 1.45;
}

.topbar {
    background: linear-gradient(120deg, #2536b8 0%, #4b5cf5 42%, #7b5cff 78%, #9b6bff 100%);
    color: #fff;
    padding: 15px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 8px 22px -12px rgba(37, 54, 184, 0.7);
}
.topbar h1 {
    margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 10px; color: #fff;
}
.topbar h1::before {
    content: "🧩";
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; font-size: 18px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
}
.topbar__logout {
    font-size: .82rem; color: #fff; text-decoration: none; font-weight: 600;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background .15s;
}
.topbar__logout:hover { background: rgba(255, 255, 255, 0.28); text-decoration: none; color: #fff; }

/* Login screen — full-bleed gradient with a floating glass card */
.login {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    overflow: hidden;
    background:
        radial-gradient(1100px 620px at 12% -10%, #6f8bff 0%, rgba(111,139,255,0) 55%),
        radial-gradient(900px 560px at 108% 10%, #b678ff 0%, rgba(182,120,255,0) 52%),
        radial-gradient(880px 620px at 50% 118%, #35d0c0 0%, rgba(53,208,192,0) 55%),
        linear-gradient(150deg, #1b2140 0%, #232a52 48%, #171a33 100%);
}
/* Soft drifting colour blobs behind the card. */
.login__aurora {
    position: absolute; inset: -20%;
    background:
        radial-gradient(320px 320px at 20% 30%, rgba(120,150,255,.55), transparent 60%),
        radial-gradient(360px 360px at 80% 70%, rgba(90,220,200,.45), transparent 60%),
        radial-gradient(300px 300px at 65% 25%, rgba(200,130,255,.45), transparent 60%);
    filter: blur(20px);
    animation: loginDrift 18s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes loginDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2%, -3%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 2%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .login__aurora { animation: none; } }

.login__card {
    position: relative; z-index: 1;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 40px 34px 30px;
    width: 100%; max-width: 380px;
    text-align: center;
    box-shadow: 0 24px 60px -18px rgba(15, 20, 45, 0.55), 0 2px 8px rgba(15, 20, 45, 0.16);
    animation: loginRise .5s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes loginRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.login__badge {
    width: 68px; height: 68px; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; line-height: 1;
    border-radius: 20px;
    background: linear-gradient(140deg, var(--accent), #7b5cff 60%, #b678ff);
    box-shadow: 0 12px 26px -8px rgba(59, 110, 245, 0.7);
    transform: rotate(-6deg);
}
.login__title {
    margin: 0 0 6px; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em;
    background: linear-gradient(120deg, #2536b8, #7b5cff 55%, #b678ff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login__sub { margin: 0 0 22px; color: var(--muted); font-size: .92rem; }
.login__field { text-align: left; }
.login__field .field__label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.login__field input {
    width: 100%; box-sizing: border-box;
    margin-top: 6px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--line); font-size: 1rem; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.login__field input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(59, 110, 245, 0.18);
}
.login__btn {
    width: 100%; margin-top: 18px; padding: 12px; font-size: 1rem; font-weight: 700;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), #7b5cff);
    border: none; box-shadow: 0 12px 24px -10px rgba(59, 110, 245, 0.8);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.login__btn:hover:not(:disabled) {
    transform: translateY(-1px); filter: brightness(1.05);
    box-shadow: 0 16px 30px -10px rgba(59, 110, 245, 0.9); border: none;
}
.login__btn:active { transform: translateY(0); }
.login__card .message { margin: 14px 0 0; }
.login__foot { margin: 20px 0 0; font-size: .72rem; color: var(--muted); letter-spacing: .01em; }

.layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px;
    padding: 24px;
    align-items: start;
}
@media (max-width: 820px) {
    .layout { grid-template-columns: 1fr; }
}

.panel, .preview {
    background: var(--panel);
    border: 1px solid rgba(15, 20, 45, 0.06);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 18px 40px -24px rgba(15, 20, 45, 0.4), 0 1px 2px rgba(15, 20, 45, 0.05);
}

.field { display: block; margin-bottom: 16px; }
.field__label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem; }
.field__help { display: block; color: var(--muted); font-size: .8rem; margin-top: 4px; }

select, input[type="text"], input[type="number"], textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    background: #fff;
    color: var(--ink);
}
textarea { min-height: 120px; resize: vertical; font-family: ui-monospace, "Cascadia Code", monospace; }
select:focus, input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.fields { margin-top: 8px; }

.prompt-helper {
    margin-top: 8px; padding: 14px; border: 1px dashed var(--line);
    border-radius: 8px; background: #fafbfc;
}
.prompt-helper .field { margin-bottom: 10px; }
.prompt-helper__hint { margin: 8px 0 0; font-size: .78rem; color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.btn {
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, transform .1s, box-shadow .15s, filter .15s;
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary {
    background: linear-gradient(135deg, var(--accent), #7b5cff);
    color: var(--accent-ink); border: none;
    box-shadow: 0 10px 22px -12px rgba(59, 110, 245, 0.85);
}
.btn--primary:hover:not(:disabled) {
    border: none; transform: translateY(-1px); filter: brightness(1.05);
    box-shadow: 0 14px 26px -12px rgba(59, 110, 245, 0.95);
}

.toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: .9rem;
    cursor: pointer;
}
.toggle input { cursor: pointer; }

.message { min-height: 1.2em; margin: 12px 0 0; font-size: .9rem; }
.message--error { color: #b42318; }
.message--ok { color: #15803d; }

/* ---- Player instructions panel (left column) ---- */
.instructions {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.instructions__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.instructions__title { margin: 0; font-size: 1rem; }
.instructions__hint { margin: 6px 0 10px; font-size: .78rem; color: var(--muted); }
.instructions__list { margin: 0; padding-left: 1.3em; }
.instructions__list li { margin: 0 0 8px; font-size: .9rem; line-height: 1.45; }
.instructions__list li:last-child { margin-bottom: 0; }
.btn--small { padding: 5px 12px; font-size: .82rem; flex: none; }

/* ---- Public "How to Play" page info (left column) ---- */
.pubinfo {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.pubinfo__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.pubinfo__title { margin: 0; font-size: 1rem; }
.pubinfo__hint { margin: 6px 0 10px; font-size: .78rem; color: var(--muted); }
.pubinfo__name { margin: 0 0 4px; font-weight: 600; font-size: .92rem; }
.pubinfo__blurb { margin: 0 0 10px; font-size: .9rem; line-height: 1.5; }
.pubinfo__tips { margin: 0; padding-left: 18px; font-size: .88rem; line-height: 1.5; }
.pubinfo__tips li { margin-bottom: 6px; }
.pubinfo__tips li:last-child { margin-bottom: 0; }
.pubinfo__empty { margin: 0; font-size: .82rem; color: var(--muted); }
.pubinfo__empty code { font-size: .8rem; }

/* ---- Social caption panel (left column) ---- */
.caption {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.caption__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.caption__title { margin: 0; font-size: 1rem; }
.caption__hint { margin: 6px 0 10px; font-size: .78rem; color: var(--muted); }
.caption__opts { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 10px; }
.toggle--inline { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; margin: 0; cursor: pointer; }
.toggle--inline input { width: auto; }
.caption__text {
    white-space: pre-line;
    font-size: .9rem; line-height: 1.5;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
}

.preview__empty { color: var(--muted); text-align: center; padding: 40px 0; }

/* ---- Puzzle labels (solve time · difficulty · category · format) ---- */
.labels {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 18px; padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.label-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .8rem; font-weight: 600; color: var(--ink);
    white-space: nowrap;
}
.label-badge__ic { font-size: .95rem; line-height: 1; }

/* ---- Rendered puzzles ---- */
.puzzle { margin-bottom: 28px; }
.puzzle__title { margin: 0 0 4px; font-size: 1.3rem; }
.puzzle__sub { margin: 0 0 14px; color: var(--muted); font-size: .85rem; }

.grid { border-collapse: collapse; margin: 0 auto 14px; }
.grid td {
    width: 30px; height: 30px;
    text-align: center; vertical-align: middle;
    border: 1px solid var(--line);
    font-weight: 600; font-size: .95rem;
    font-family: ui-monospace, monospace;
}
.grid td.shade { background: var(--shade); border-radius: 50%; }
.grid td.shade-phrase { background: #bfe3c6; }
.phrase-reveal { text-align: center; font-size: .95rem; margin: 8px 0 0; }
.phrase-reveal .word { font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: .12em; }

.wordlist { columns: 3; column-gap: 18px; list-style: none; padding: 0; margin: 8px 0 0; }
.wordlist li { font-family: ui-monospace, monospace; }

/* Crossword */
.xgrid { border-collapse: collapse; margin: 0 auto 14px; }
.xgrid td {
    width: 30px; height: 30px; position: relative;
    border: 1px solid var(--ink);
    text-align: center; vertical-align: middle;
    font-family: ui-monospace, monospace; font-weight: 600;
}
.xgrid td.black { background: var(--black-cell); border-color: var(--black-cell); }
.xgrid td.hidden-cell { background: #c4c8d0; }
.xgrid td .num {
    position: absolute; top: 1px; left: 2px;
    font-size: .55rem; font-weight: 600; color: var(--muted);
}
.clues { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.clues h4 { margin: 0 0 6px; }
.clues ol { margin: 0; padding-left: 1.4em; }
.clues li { margin-bottom: 4px; font-size: .9rem; }

/* Number Fill-In */
.nfi-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.nfi-grid { margin: 0; }
.nfi-grid td.given { background: #eef3ff; font-weight: 700; }
.nfi-bank { flex: 1 1 220px; min-width: 200px; }
.nfi-group { font-size: .82rem; line-height: 1.5; margin-bottom: 8px; word-spacing: .04em; }
.nfi-group b { display: inline; }
.nfi-story { max-width: 640px; margin: 0 auto 12px; }
.nfi-story p { margin: 0 0 8px; line-height: 1.5; }
.nfi-grid td.given.hidden-cell { background: #c4c8d0; }

/* Sudoku */
.sudoku { border-collapse: collapse; margin: 0 auto 14px; }
.sudoku td {
    width: 34px; height: 34px; text-align: center; vertical-align: middle;
    border: 1px solid var(--line); font-size: 1.05rem; font-family: ui-monospace, monospace;
}
.sudoku td.given { font-weight: 700; }
.sudoku td.hidden-cell { background: #c4c8d0; }
.sudoku td.r3 { border-bottom: 2px solid var(--ink); }
.sudoku td.c3 { border-right: 2px solid var(--ink); }
.sudoku td.r0 { border-top: 2px solid var(--ink); }
.sudoku td.c0 { border-left: 2px solid var(--ink); }

/* Jigsaw sudoku: the heavy lines follow the irregular regions instead of the
   3x3 boxes, so every cell's borders are set inline by RENDER.sudoku. Nothing
   is needed here beyond squarer cells to show the shapes off. */
.sudoku.jigsaw td { width: 38px; height: 38px; }

/* Mini sudoku (6x6): the same table at a size meant to be read on a screen. */
.sudoku.minisud td { width: 44px; height: 44px; font-size: 1.2rem; }

/* Killer sudoku: dashed cage outlines drawn as an inner box per cell, plus the
   cage total in its top-left square. Cells need bigger boxes to fit the total
   above the digit. Offsets come from the renderer (see RENDER.sudoku). */
.sudoku.killer td { position: relative; width: 40px; height: 40px; }
.sudoku.killer .cage { position: absolute; pointer-events: none; }
.sudoku.killer .csum {
    position: absolute; top: 4px; left: 6px;
    font-size: 0.6rem; font-weight: 700; line-height: 1;
    font-family: system-ui, sans-serif; color: #444;
}

/* Mathdoku (a Sudoku mode): a 7x7 lattice of number squares, the operators
   between them, an '=' and the line's result. The cells belonging to no
   equation are blocked out, and the result strips are tinted. See
   mathdokuCell() in app.js for which cell is which. */
.mathdoku { border-collapse: collapse; margin: 0 auto 14px; }
.mathdoku td {
    width: 46px; height: 46px; text-align: center; vertical-align: middle;
    border: 1px solid var(--ink); background: #fff;
    font-size: 1.25rem; font-family: ui-monospace, monospace;
}
.mathdoku td.num.given { font-weight: 700; }
.mathdoku td.op, .mathdoku td.eq { font-size: 1.15rem; color: #333; }
.mathdoku td.res { background: #ededed; font-weight: 700; }
.mathdoku td.fill { background: #cccdd3; }

/* Scramble */
.scramble { list-style: decimal; padding-left: 1.6em; }
.scramble li { margin-bottom: 10px; }
.scramble .word { font-family: ui-monospace, monospace; font-size: 1.1rem; letter-spacing: .18em; font-weight: 700; }
.scramble .hint { color: var(--muted); font-size: .85rem; }
.scramble .ans { color: #15803d; font-family: ui-monospace, monospace; font-weight: 700; }

/* Word Unscramble — the scramble, then a rule to write the answer on. */
.wu-list li { margin-bottom: 14px; }
.wu-list .wu-line {
    display: inline-block; min-width: 140px; margin: 0 8px;
    border-bottom: 1px solid var(--muted); vertical-align: baseline;
}

/* Word Unscramble, quick cut - one word, no rule to write on. */
.qu-word {
    font-family: ui-monospace, monospace; font-weight: 700;
    font-size: clamp(1.6rem, 7vw, 3.2rem); letter-spacing: .16em;
    text-align: center; margin: 28px 0 8px;
}
.qu-word--answer { color: #15803d; }
.qu-hint { text-align: center; color: var(--muted); font-size: .9rem; margin: 0; }

/* Eavesdropping - the overheard conversation as chat bubbles, then the
   question. The key lights the facts up and strikes through the misheard one. */
.ed-scene { text-align: center; font-weight: 700; color: var(--muted); margin: 6px 0 10px; }
.ed-chat { display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin: 0 auto; }
.ed-line { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; }
.ed-line--b { align-self: flex-end; align-items: flex-end; }
.ed-who { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 8px 2px; }
.ed-bubble {
    padding: 8px 14px; border-radius: 16px 16px 16px 4px; background: #f1f0ea;
    font-weight: 600; font-size: 1.05rem; line-height: 1.35;
}
.ed-line--b .ed-bubble { border-radius: 16px 16px 4px 16px; background: #fff1c2; }
.ed-fact { background: #ffd23f; color: inherit; border-radius: 3px; padding: 0 2px; }
.ed-fact.ed-misheard { background: transparent; color: #b3261e; text-decoration: line-through; }
.ed-cover {
    text-align: center; color: var(--muted); font-size: .8rem; font-style: italic;
    border-top: 2px dashed #d6d1c4; margin: 16px auto 10px; padding-top: 6px; max-width: 520px;
}
.ed-q { text-align: center; font-weight: 800; font-size: 1.15rem; margin: 8px 0; }
.ed-opts { list-style: none; padding: 0; margin: 0 auto; max-width: 520px; display: grid; gap: 6px; }
.ed-opts li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid #ddd8c8; border-radius: 10px; font-weight: 600; }
.ed-letter {
    flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: #27362c; color: #fff; font-size: .8rem; font-weight: 800;
}
.ed-opts li.ed-right { background: #dcf5e3; border-color: #15803d; }
.ed-opts li.ed-right .ed-letter { background: #15803d; }
.ed-answer { text-align: center; font-size: 1.1rem; margin: 6px 0 12px; }
.ed-note { text-align: center; color: var(--muted); font-size: .85rem; margin: 10px 0 0; }



/* Codeword (coded crossword) */
.codeword-grid { border-collapse: collapse; margin: 0 auto 12px; }
.codeword-grid td {
    width: 30px; height: 30px; position: relative;
    border: 1px solid var(--ink); text-align: center; vertical-align: middle;
    font-family: ui-monospace, monospace;
}
.codeword-grid td.black { background: var(--black-cell); border-color: var(--black-cell); }
.codeword-grid td.given { background: #eef3ff; }
.codeword-grid td.hidden-cell { background: #c4c8d0; }
.codeword-grid td .n { position: absolute; top: 1px; left: 2px; font-size: .5rem; color: var(--muted); }
.codeword-grid td .l { font-weight: 700; font-size: 1rem; }
.code-strip { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 10px 0 14px; }
.code-strip .box {
    width: 26px; border: 1px solid var(--line); border-radius: 4px;
    padding: 2px 0; text-align: center;
}
.code-strip .box.given { background: #eef3ff; border-color: var(--accent); }
.code-strip .box .bn { display: block; font-size: .6rem; color: var(--muted); }
.code-strip .box .bl { display: block; font-weight: 700; height: 1.1em; font-family: ui-monospace, monospace; }

/* Matching */
.matching { display: flex; gap: 72px; justify-content: center; align-items: flex-start; margin: 10px 0 14px; }
.matching__col { list-style: none; margin: 0; padding: 0; min-width: 170px; max-width: 240px; }
.matching__col li { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.matching .lbl { font-weight: 700; color: var(--muted); flex: none; }
.matching-key { list-style: none; margin: 0; padding: 0; }
.matching-key li { padding: 4px 0; }
.matching-key .pair { display: inline-block; min-width: 64px; font-weight: 700; }

/* Mad Libs */
.madlibs-prompts { padding-left: 1.7em; margin: 8px 0 0; }
.madlibs-prompts li { margin-bottom: 12px; }
.madlibs-prompts .label { font-weight: 700; text-transform: capitalize; margin-right: 8px; }
.madlibs-prompts .line {
    display: inline-block; min-width: 190px;
    border-bottom: 1.5px solid var(--ink);
}
.madlibs-story { font-size: 1.1rem; line-height: 2.4; }
.madlibs-story .txt { white-space: pre-wrap; }
.madlibs-blank {
    display: inline-flex; flex-direction: column; align-items: center;
    vertical-align: bottom; margin: 0 2px;
}
.madlibs-blank .line { min-width: 96px; border-bottom: 1.5px solid var(--ink); height: 1.3em; }
.madlibs-blank .tag {
    font-size: .62rem; color: var(--muted); text-transform: capitalize; line-height: 1.2;
}

/* Cryptogram */
.crypto-line { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.crypto-line.crypto-blank { height: 8px; margin-bottom: 4px; }
.crypto-word { display: flex; gap: 5px; }
.crypto-cell { display: inline-flex; flex-direction: column; align-items: center; }
.crypto-cell .top {
    min-width: 16px; height: 20px; line-height: 20px;
    border-bottom: 2px solid var(--ink);
    font-family: ui-monospace, monospace; font-weight: 700; color: var(--accent);
}
.crypto-cell .bot {
    font-family: ui-monospace, monospace; font-weight: 700; font-size: 1rem; margin-top: 3px;
}
.crypto-punct {
    align-self: flex-end; font-family: ui-monospace, monospace;
    font-weight: 700; font-size: 1rem; padding-bottom: 3px;
}
.crypto-solution { font-size: 1.1rem; font-weight: 600; white-space: pre-wrap; margin: 0 0 12px; }

/* Cipher */
.cipher-list { list-style: decimal; padding-left: 1.6em; }
.cipher-list li { margin-bottom: 14px; }
.cipher-text {
    font-family: ui-monospace, "Cascadia Code", monospace;
    font-size: 1.15rem; font-weight: 700; letter-spacing: .08em;
    word-break: break-word;
}
.cipher-ans { color: #15803d; font-weight: 700; }
.cipher-legend {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 4px 14px; margin: 10px 0 0; padding: 0; list-style: none;
}
.cipher-legend li {
    font-family: ui-monospace, monospace; font-size: .85rem;
    margin: 0; white-space: nowrap;
}
.cipher-legend .from { font-weight: 700; }
.cipher-keylabel { font-size: .9rem; color: var(--accent); font-weight: 600; margin: 4px 0 0; }

/* Pigpen (Masonic) cipher: letters are drawn, not written. */
.pigpen {
    stroke: currentColor; stroke-width: 2; stroke-linecap: round;
    fill: none; vertical-align: middle; overflow: visible;
}
.pigpen-dot { fill: currentColor; stroke: none; }
.pigpen-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.pigpen-word { display: inline-flex; gap: 5px; align-items: center; }
.cipher-legend--glyph {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 8px 14px;
}
.cipher-legend--glyph li {
    display: flex; align-items: center; gap: 5px;
    font-family: inherit; font-weight: 700;
}

/* Unscramble: Jumble, sentence and grid */
.unsc-list { margin: 12px 0 0; padding: 0 0 0 22px; }
.unsc-list li { margin-bottom: 10px; }
.unsc-list--sentence { list-style: decimal; }
.unsc-scram {
    font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: .12em;
    display: inline-block; min-width: 8ch;
}
.unsc-hint { font-size: .85rem; color: var(--muted); font-style: italic; }
.unsc-boxes { display: inline-flex; gap: 3px; vertical-align: middle; margin: 0 8px; }
.unsc-cell {
    width: 22px; height: 22px; border: 1px solid #b9bec9; border-radius: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem; background: #fff;
}
.unsc-cell.is-circled { border-color: var(--accent); border-radius: 50%; border-width: 1.6px; }

.unsc-final { margin-top: 18px; padding-top: 12px; border-top: 1px dashed #cfd4de; }
.unsc-clue { font-weight: 700; margin: 0 0 8px; }
.unsc-final-boxes { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.unsc-word { display: inline-flex; gap: 3px; }
.unsc-final-boxes .unsc-cell { border-color: var(--accent); width: 24px; height: 24px; }
.unsc-final-ans { margin-top: 14px; color: var(--accent); font-size: 1.05rem; }

.unsc-words { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.unsc-chip {
    font-family: ui-monospace, monospace; font-weight: 700; font-size: .9rem;
    background: #eef1f6; border-radius: 4px; padding: 2px 8px;
}
.unsc-rule { border-bottom: 1px solid #cfd4de; height: 20px; margin-top: 6px; }
.unsc-ans { font-weight: 700; }

.unsc-grid { border-collapse: separate; border-spacing: 2px; margin-top: 12px; }
.unsc-grid th { text-align: left; padding-right: 12px; white-space: nowrap; font-weight: 400; }
.unsc-grid td {
    width: 24px; height: 24px; text-align: center; vertical-align: middle;
    font-weight: 700; font-size: .9rem;
}
.unsc-grid td.is-cell { border: 1px solid #b9bec9; border-radius: 2px; background: #fff; }
.unsc-grid td.is-gap { border: 0; background: transparent; }
.unsc-grid td.is-key { border-color: var(--accent); background: #e2ecff; }

/* Code Breaker */
.cb-legend {
    font-size: .82rem; color: var(--muted); margin: 0 0 14px;
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
.cb-list { list-style: none; margin: 0; padding: 0; }
.cb-list li { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cb-num { min-width: 1.6em; text-align: right; color: var(--muted); font-weight: 700; }
.cb-code { display: inline-flex; gap: 6px; }
.cb-digit {
    width: 30px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 6px; background: #f7f8fa;
    font-family: ui-monospace, monospace; font-weight: 700; font-size: 1.15rem;
}
.cb-pegs { display: inline-flex; gap: 8px; }
.cb-peg {
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; flex: none;
}
.cb-peg--exact { background: var(--black-cell); color: #fff; }
.cb-peg--partial { background: #fff; border: 1.5px solid var(--muted); color: var(--ink); }
.cb-clue-text { font-size: .9rem; }
.cb-answer { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; font-weight: 600; }

/* Missing Vowels */
.mv-list { list-style: decimal; padding-left: 1.7em; margin: 8px 0 0; }
.mv-list li { margin-bottom: 12px; }
.mv-clue { font-family: ui-monospace, monospace; font-size: 1.2rem; font-weight: 700; letter-spacing: .14em; }
.mv-hint { color: var(--muted); font-size: .85rem; font-family: system-ui, sans-serif; letter-spacing: normal; }
.mv-ans { color: #15803d; font-weight: 700; font-family: ui-monospace, monospace; letter-spacing: .06em; }

/* Word Ladder */
.wl-grid { display: flex; flex-wrap: wrap; gap: 24px 40px; margin: 10px 0 14px; }
.wl-ladder { display: flex; flex-direction: column; gap: 3px; }
.wl-rung { display: flex; align-items: center; gap: 10px; }
.wl-word { display: inline-flex; gap: 2px; }
.wl-cell {
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ink); font-family: ui-monospace, monospace; font-weight: 700;
}
.wl-cell.wl-given { background: #eef3ff; }
.wl-clue { color: var(--muted); font-size: .82rem; }

/* Word Wheel / Letter Hive */
.ww-hive { width: 240px; height: 240px; display: block; margin: 6px auto 12px; }
.ww-hex { fill: #eef3ff; stroke: var(--ink); stroke-width: 1.2; }
.ww-hex.ww-center { fill: #ffdd57; }
.ww-letter { text-anchor: middle; font-weight: 700; font-size: 22px; fill: var(--ink); font-family: ui-monospace, monospace; }
.ww-words { columns: 4; column-gap: 18px; list-style: none; padding: 0; margin: 8px 0 0; }
.ww-words li { font-family: ui-monospace, monospace; font-size: .9rem; margin-bottom: 2px; }
.ww-words li.ww-pangram { font-weight: 700; color: var(--accent); }

/* Math Puzzles */
.mp-pyramid { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 10px 0 14px; }
.mp-prow { display: flex; gap: 4px; }
.mp-brick {
    width: 46px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--ink); border-radius: 4px; background: #fff;
    font-family: ui-monospace, monospace; font-weight: 600;
}
.mp-brick.mp-given { background: #eef3ff; font-weight: 700; }

.mp-arg-grid { display: flex; flex-wrap: wrap; gap: 8px 4px; justify-content: center; margin: 8px 0 14px; }
.mp-arg-cell { width: 32%; min-width: 150px; text-align: center; position: relative; }
.mp-arg-num { position: absolute; top: 2px; left: 6px; font-weight: 700; color: var(--muted); font-size: .85rem; }
.mp-arg { width: 150px; height: 140px; }
.mp-tri { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.mp-corner { fill: #eef3ff; stroke: var(--ink); stroke-width: 1.2; }
.mp-edge { fill: #fff; stroke: var(--ink); stroke-width: 1; }
.mp-ctext { text-anchor: middle; font-weight: 700; font-size: 14px; fill: #15803d; font-family: ui-monospace, monospace; }
.mp-etext { text-anchor: middle; font-weight: 700; font-size: 13px; fill: var(--ink); font-family: ui-monospace, monospace; }

.mp-cross { border-collapse: collapse; margin: 8px auto 14px; }
.mp-cross td { width: 30px; height: 30px; text-align: center; vertical-align: middle; font-family: ui-monospace, monospace; }
.mp-cross .mp-x-num { width: 40px; height: 40px; border: 1.5px solid var(--ink); font-size: 1.2rem; }
.mp-cross .mp-x-op { font-weight: 700; color: var(--accent); font-size: 1.1rem; }
.mp-cross .mp-x-eq { font-weight: 700; }
.mp-cross .mp-x-res { font-weight: 700; font-size: 1.05rem; }

.mp-seq-list, .mp-tf-list { list-style: decimal; padding-left: 1.7em; margin: 8px 0 0; }
.mp-seq-list li, .mp-tf-list li { margin-bottom: 12px; }
.mp-seq { font-family: ui-monospace, monospace; font-size: 1.05rem; font-weight: 700; }
.mp-term { padding: 0 1px; }
.mp-comma { margin-right: 6px; }
.mp-blank {
    display: inline-block; min-width: 26px; height: 1.3em; vertical-align: middle;
    border-bottom: 2px solid var(--ink); text-align: center; color: var(--muted); font-weight: 700;
}
.mp-seq-nth { color: var(--muted); font-size: .8rem; font-weight: 400; }
.mp-seq-ans { color: #15803d; font-weight: 700; font-family: ui-monospace, monospace; margin-right: 10px; }
.mp-seq-rule { color: var(--muted); font-size: .85rem; }
.mp-tf-nums { font-family: ui-monospace, monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; }
.mp-tf-sol { color: #15803d; font-weight: 700; margin-left: 10px; font-family: ui-monospace, monospace; }

.mp-magic { border-collapse: collapse; margin: 8px auto 14px; }
.mp-magic .mp-mcell {
    width: 46px; height: 46px; text-align: center; vertical-align: middle;
    border: 1.5px solid var(--ink); font-family: ui-monospace, monospace; font-size: 1.25rem;
}
.mp-magic .mp-mcell.ng-given { background: #eef3ff; font-weight: 700; }

/* Number Logic Grids */
.ng-futoshiki, .ng-sky, .ng-kenken, .ng-binairo, .ng-numbrix { border-collapse: collapse; margin: 6px auto 14px; }
.ng-numbrix .ng-ncell {
    width: 42px; height: 42px; text-align: center; vertical-align: middle;
    border: 1.5px solid var(--ink); font-family: ui-monospace, monospace; font-size: 1rem;
}
.ng-numbrix .ng-ncell.ng-given { font-weight: 700; background: #eef3ff; }
.ng-nono { border-collapse: collapse; margin: 6px auto 14px; }
.ng-nono .nono-corner { width: 22px; height: 22px; }
.ng-nono .nono-clue {
    width: 22px; height: 22px; text-align: center; vertical-align: middle;
    font-size: .78rem; font-weight: 600; font-family: ui-monospace, monospace;
}
.ng-nono .nono-cclue { vertical-align: bottom; }
.ng-nono .nono-rclue { text-align: right; padding-right: 3px; }
.ng-nono .nono-cell { width: 24px; height: 24px; border: 1px solid var(--line); background: #fff; }
.ng-nono .nono-fill { background: var(--black-cell); }
.ng-cell {
    width: 38px; height: 38px; text-align: center; vertical-align: middle;
    border: 1.5px solid var(--ink); font-size: 1.2rem;
    font-family: ui-monospace, monospace;
}
.ng-cell.ng-given { font-weight: 700; background: #eef3ff; }
/* Futoshiki inequality gaps */
.ng-futoshiki .ng-h { width: 16px; text-align: center; font-weight: 700; color: var(--accent); }
.ng-futoshiki .ng-v { height: 16px; text-align: center; font-weight: 700; color: var(--accent); line-height: 16px; }
.ng-futoshiki .ng-corner { width: 16px; height: 16px; }
/* Skyscrapers edge clues */
.ng-sky .ng-clue {
    width: 38px; height: 38px; text-align: center; vertical-align: middle;
    font-weight: 700; color: var(--muted); font-size: 1rem;
}
.ng-sky .ng-corner { width: 38px; height: 38px; }
/* KenKen cages */
.ng-kenken .ng-kcell {
    width: 44px; height: 44px; position: relative; text-align: center; vertical-align: middle;
    border: 0.5px solid #b8bcc6; font-size: 1.2rem; font-family: ui-monospace, monospace;
}
.ng-kenken .ng-kcell.bt { border-top: 2.5px solid var(--ink); }
.ng-kenken .ng-kcell.bl { border-left: 2.5px solid var(--ink); }
.ng-kenken .ng-kcell.bb { border-bottom: 2.5px solid var(--ink); }
.ng-kenken .ng-kcell.br { border-right: 2.5px solid var(--ink); }
.ng-kenken .ng-klabel {
    position: absolute; top: 1px; left: 3px;
    font-size: .62rem; font-weight: 700; font-family: system-ui, sans-serif; color: var(--ink);
}
.ng-kenken .ng-kval { font-weight: 600; }

/* Logic Puzzle */
.logic-clues { padding-left: 1.6em; margin: 6px 0 16px; }
.logic-clues li { margin-bottom: 6px; }
.logic-table { border-collapse: collapse; margin: 4px 0 8px; min-width: 320px; }
.logic-table th, .logic-table td {
    border: 1px solid var(--line); padding: 7px 12px; text-align: center;
    min-width: 70px; height: 30px;
}
.logic-table th { background: #eef0f4; font-size: .9rem; }
.logic-table td { text-transform: capitalize; }
.logic-table .logic-h { background: #eef0f4; font-weight: 700; }
.logic-items { margin: 6px 0 12px; }
.logic-order td { text-transform: none; }

/* Password Game */
.pw-rules li { margin-bottom: 9px; }
.pw-note { color: var(--muted); font-size: .85rem; font-style: italic; margin-left: 4px; }
.pw-blank {
    display: inline-block; min-width: 220px; border-bottom: 1.5px solid var(--ink);
    height: 1.2em; vertical-align: bottom; margin-left: 6px;
}
.pw-answer {
    font-family: ui-monospace, "Courier New", monospace; font-weight: 700;
    background: #f2f4f8; padding: 2px 8px; border-radius: 4px; word-break: break-all;
}
.logic-list { list-style: decimal; padding-left: 1.7em; margin: 8px 0 0; }
.logic-list li { margin-bottom: 14px; }
.logic-q { font-size: 1rem; }
.logic-subclues { margin: 6px 0 0; padding-left: 1.2em; color: var(--muted); font-size: .9rem; }
.logic-subclues li { margin-bottom: 2px; }

/* Who Owns What? elimination grid */
.lg-howto { color: var(--muted); font-size: .92rem; line-height: 1.45; margin: 2px 0 12px; }
.lg-wrap { overflow-x: auto; margin: 10px 0 14px; }
.lg-grid { border-collapse: collapse; }
.lg-grid th, .lg-grid td {
    border: 1px solid var(--line); text-align: center; padding: 0;
    width: 26px; height: 26px; font-size: .82rem;
}
.lg-grid .lg-corner { border: none; }
.lg-grid .lg-glabel { background: #eef0f4; font-weight: 700; font-size: .78rem; height: 20px; }
.lg-grid .lg-vhead {
    writing-mode: vertical-rl; text-orientation: mixed;
    height: 66px; vertical-align: bottom; font-weight: 600; font-size: .8rem;
    white-space: nowrap; padding: 4px 0;
}
.lg-grid .lg-rlabel {
    text-align: right; padding: 0 8px; font-weight: 600; white-space: nowrap;
    background: #f7f8fa;
}
.lg-grid .lg-cell { background: #fff; }
.lg-grid .lg-void { border: none; background: transparent; }
.lg-grid .lg-vsep { border-right: 2px solid #333; }
.lg-grid .lg-hsep { border-bottom: 2px solid #333; }
.lg-grid .lg-yes { color: #15803d; font-weight: 700; }
.lg-grid .lg-no { color: #b91c1c; }
/* Logic Grid: the same grid in any shape, with each row block's category on its side */
.lg-grid .lg-rcat {
    writing-mode: vertical-rl; background: #eef0f4; font-weight: 700; font-size: .78rem;
    width: 20px; white-space: nowrap; border-bottom: 2px solid #333;
}
.lgx--dense th, .lgx--dense td { width: 20px; height: 20px; font-size: .72rem; }
.lgx--dense .lg-vhead { font-size: .72rem; }

/* Whodunit (Guess Who) */
.who-table { border-collapse: collapse; margin: 6px 0 8px; }
.who-table th, .who-table td {
    border: 1px solid var(--line); padding: 6px 12px; text-align: center;
    min-width: 56px; height: 28px; text-transform: capitalize;
}
.who-table th { background: #eef0f4; font-size: .9rem; text-transform: none; }
.who-table .who-name { background: #eef0f4; font-weight: 700; }
.who-table .who-culprit td { background: #fff3cd; }
.who-head { margin: 14px 0 4px; font-size: 1rem; }
.who-clues { padding-left: 1.6em; margin: 4px 0 14px; }
.who-clues li { margin-bottom: 6px; }
.who-q { font-weight: 600; margin: 6px 0 0; }
.who-blank { display: inline-block; min-width: 140px; border-bottom: 1px solid var(--ink, #333); }
.who-answer { font-size: 1.05rem; margin: 0 0 8px; }

/* Cross Off the Suspects (reuses .who-table) */
.co-cleared td { color: var(--muted); text-decoration: line-through; }
.co-list { list-style: none; padding: 0; margin: 12px 0 0; }
.co-list li { color: var(--muted); font-size: .9rem; margin-bottom: 4px; }
.co-list s { color: var(--ink); }

/* Find the Code (1-100 elimination grid) */
.ftc-clues { padding-left: 1.6em; margin: 4px 0 14px; }
.ftc-clues li { margin-bottom: 6px; }
.ftc-grid { border-collapse: collapse; margin: 8px auto 4px; }
.ftc-grid td {
    width: 34px; height: 34px; text-align: center; vertical-align: middle;
    border: 1px solid var(--line);
    font-family: ui-monospace, monospace; font-size: .85rem; color: var(--ink);
}
.ftc-grid .ftc-hit {
    background: var(--shade); font-weight: 700;
    box-shadow: inset 0 0 0 2px #b43c3c;
}
.ftc-trace { padding-left: 1.6em; margin: 4px 0 0; }
.ftc-trace li { margin-bottom: 5px; }

/* Six-digit vault code: a row of digit boxes. */
.sd-code { display: flex; gap: 8px; justify-content: center; margin: 14px 0 4px; }
.sd-box {
    width: 40px; height: 48px; border: 2px solid var(--line); border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-family: ui-monospace, monospace; font-size: 1.5rem; font-weight: 700; color: var(--ink);
}
.sd-box--fill { background: var(--shade); border-color: #b43c3c; }
.ftc-left { color: var(--muted); font-size: .85rem; }

/* Riddle Cards */
.rc-grid {
    display: grid; gap: 14px; margin-top: 12px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.rc-card {
    position: relative;
    border: 1px solid var(--line); border-radius: 10px;
    background: #fafbfc; padding: 16px 14px 12px;
}
.rc-num {
    position: absolute; top: -11px; left: 12px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent); color: var(--accent-ink);
    font-size: .8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.rc-q { margin: 4px 0 8px; font-weight: 600; line-height: 1.4; }
.rc-hint { margin: 0 0 8px; font-size: .82rem; color: var(--muted); font-style: italic; }
.rc-ans { margin: 0; color: #15803d; font-weight: 700; }
.rc-blank { margin: 0; font-size: .85rem; color: var(--muted); }
.rc-line { display: inline-block; min-width: 120px; border-bottom: 1px solid var(--ink); }

/* Odd Word Out (word chips) */
.owo-hint { margin: 0 0 8px; font-size: .85rem; color: var(--muted); font-style: italic; }
.owo-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.owo-word {
    display: inline-block; padding: 6px 13px;
    border: 1px solid var(--line); border-radius: 999px;
    background: #f7f7fa; font-weight: 600; font-size: .9rem;
}
.owo-keep { background: #d5f0dc; border-color: #7cc79a; color: #15803d; }
.owo-cull, .owo-cull s { color: var(--muted); }

/* Brain Teasers (numbered Q&A) */
.bt-list { list-style: decimal; padding-left: 1.7em; margin: 10px 0 0; }
.bt-list li { margin-bottom: 12px; line-height: 1.45; }
.bt-ans { color: #15803d; font-weight: 700; }
.bt-blank { display: block; margin-top: 6px; max-width: 260px; height: 1.1em; border-bottom: 1px solid var(--ink); }

/* Knights & Knaves */
.kn-says { list-style: none; padding-left: 0; margin: 10px 0 14px; }
.kn-says li { margin-bottom: 9px; line-height: 1.45; }
.kn-who { font-weight: 700; }
.kn-q { font-weight: 600; margin: 8px 0 0; }
.kn-ans { list-style: none; padding-left: 0; margin: 4px 0; }
.kn-ans li { margin-bottom: 7px; font-size: 1.05rem; }
.kn-type { font-weight: 700; }
.kn-knight { color: #15803d; }
.kn-knave { color: #b91c1c; }

/* Round Table (seating) */
.seat-people { margin: 6px 0 10px; }
.seat-wrap { display: flex; justify-content: center; margin: 8px 0; }
.seat-svg { width: 100%; max-width: 340px; height: auto; }
.seat-svg text { font-family: inherit; }
.seat-num { font-size: 11px; fill: #6b7280; }
.seat-numbig { font-size: 15px; font-weight: 700; fill: #111; }
.seat-name { font-size: 12px; font-weight: 600; fill: #111; }
.seat-clues { padding-left: 1.6em; margin: 4px 0 12px; }
.seat-clues li { margin-bottom: 6px; }

/* Colour Rows — one item per coloured row */
.cr-rows { display: flex; flex-direction: column; gap: 7px; margin: 10px 0 4px;
    max-width: 460px; }
.cr-row { display: flex; align-items: center; gap: 12px; min-height: 46px;
    border: 2px solid #222; border-radius: 12px; padding: 6px 14px; }
.cr-swatch { width: 20px; height: 20px; flex: none; border: 1px solid var(--line);
    border-radius: 2px; }
.cr-colour { width: 54px; flex: none; font-size: .78rem; color: var(--muted); }
.cr-fill { font-weight: 700; }

/* Grid Placement — one item per cell of a lettered/numbered grid */
.gp-wrap { overflow-x: auto; margin: 12px 0 4px; }
.gp-grid { border-collapse: collapse; }
.gp-grid .gp-head {
    width: 26px; height: 26px; font-size: .8rem; font-weight: 700;
    color: var(--muted); border: none; text-align: center;
}
.gp-grid .gp-corner { border: none; }
.gp-grid .gp-cell {
    width: 112px; height: 54px; border: 2px solid #222; text-align: center;
    font-weight: 700; padding: 2px 6px; word-break: break-word; line-height: 1.15;
}

/* The Lady or the Tiger */
.lt-rule { font-weight: 700; background: #eef0f4; border-left: 4px solid #5b6472;
    padding: 8px 12px; margin: 10px 0 14px; border-radius: 0 4px 4px 0; }
.lt-doors { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.lt-door { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line);
    border-radius: 6px; padding: 10px 14px; }
.lt-door.lt-prize { background: #fff3cd; border-color: #e0c36a; }
.lt-doornum { font-weight: 700; min-width: 64px; }
.lt-sign { flex: 1; }
.lt-tf { font-weight: 700; font-size: .85rem; letter-spacing: .03em; }
.lt-true { color: #15803d; }
.lt-false { color: #b91c1c; }
.lt-q { font-weight: 600; margin: 6px 0 0; }
.lt-answer { font-size: 1.05rem; margin: 0 0 10px; }

/* Spot the Lie (Minute Mystery) */
.stl-head { margin: 14px 0 4px; font-size: 1rem; }
.stl-facts { margin: 4px 0 10px; padding-left: 1.4em; }
.stl-facts li { margin-bottom: 5px; }
.stl-facts li.stl-hit { background: #fff3cd; font-weight: 700;
    padding: 2px 6px; border-radius: 4px; list-style-position: inside; }
.stl-says { list-style: none; padding-left: 0; margin: 4px 0 10px; }
.stl-says li { margin-bottom: 8px; line-height: 1.45; }
.stl-says li.stl-liar { background: #fff3cd; border-left: 4px solid #e0c36a;
    padding: 6px 10px; border-radius: 0 4px 4px 0; }
.stl-who { font-weight: 700; }
.stl-q { font-weight: 600; margin: 8px 0 0; }
.stl-blank { display: inline-block; min-width: 160px;
    border-bottom: 1px solid var(--ink, #333); }
.stl-reason { font-size: 1.02rem; margin: 0 0 6px; line-height: 1.5; }

/* Find the Pattern */
.pat-list { list-style: decimal; padding-left: 1.8em; margin: 8px 0 0; }
.pat-list li { margin-bottom: 12px; }
.pat-seq { font-family: ui-monospace, monospace; font-size: 1.1rem; font-weight: 700; }
.pat-term { padding: 0 2px; }
.pat-comma { margin-right: 6px; }
.pat-blank {
    display: inline-block; min-width: 26px; height: 1.4em; vertical-align: middle;
    border-bottom: 2px solid var(--ink); text-align: center; color: var(--muted);
    font-weight: 700;
}
.pat-blank--wide { min-width: 64px; }
.pat-opts { display: inline-flex; flex-wrap: wrap; gap: 10px 22px; }
.pat-opt { font-size: 1rem; }
.pat-analogy { font-size: 1.1rem; font-weight: 600; }
.pat-ans { color: #15803d; font-weight: 700; font-family: ui-monospace, monospace; margin-right: 10px; }
.pat-rule { color: var(--muted); font-size: .88rem; }

.pat-list--visual li { margin-bottom: 22px; }
.pat-vrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pat-cell {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px;
    background: #fff;
}
.pat-cell--q { font-weight: 700; font-size: 1.2rem; color: var(--muted); min-width: 34px; min-height: 34px; }
.pat-choices { display: flex; flex-wrap: wrap; gap: 12px; padding-left: 4px; }
.pat-choice {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px;
}
.pat-choice__lbl { font-weight: 700; color: var(--muted); font-size: .85rem; }
.pat-svg { display: block; }

/* Maze */
.maze { border-collapse: collapse; margin: 0 auto 14px; }
.maze td {
    padding: 0; text-align: center; vertical-align: middle;
    border: 0 solid var(--ink);
    font-family: ui-monospace, monospace; font-weight: 700; color: #333;
}
.maze td.wt { border-top-width: 2px; }
.maze td.wr { border-right-width: 2px; }
.maze td.wb { border-bottom-width: 2px; }
.maze td.wl { border-left-width: 2px; }
.maze td.sol { background: #cfe3ff; }
.maze td.phrase { background: #bfe3c6; }
.maze td.start { background: #d1f0d6; }
.maze td.end { background: #ffd9d9; }
.maze-legend { text-align: center; font-size: .8rem; color: var(--muted); margin: 0 0 10px; }

/* Rebus */
.rebus-list { list-style: decimal; padding-left: 1.6em; }
.rebus-list li { margin-bottom: 20px; }
.rebus-tiles {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    margin: 6px 0;
}
.rebus-tile {
    font-family: ui-monospace, "Cascadia Code", monospace;
    font-size: 1.7rem; font-weight: 700; letter-spacing: .05em;
}
.rebus-stack {
    display: inline-flex; flex-direction: column; align-items: center;
    font-size: 1.05rem; line-height: 1.15; letter-spacing: .04em;
}
.rebus-stack .top { border-bottom: 2px solid var(--ink); padding: 0 8px 1px; }
.rebus-stack .bottom { padding: 1px 8px 0; }
.rebus-hint { color: var(--muted); font-size: .85rem; margin-left: 4px; }
.rebus-ans { color: #15803d; font-family: ui-monospace, monospace; font-weight: 700; }

.section-head {
    margin: 26px 0 10px; padding-top: 18px;
    border-top: 2px dashed var(--line);
    font-size: 1.05rem; color: var(--accent);
}
.warn { color: #b45309; font-size: .85rem; }

/* ---- Save as Image: what goes in the picture ---- */
.pngopts {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    margin: 10px 0 0; padding: 10px 12px;
    border: 1px dashed var(--line); border-radius: 10px;
}
.pngopts__label { font-weight: 700; font-size: .9rem; }
.pngopts__hint {
    flex-basis: 100%; margin: 0; color: var(--muted); font-size: .82rem;
}
/* The handle box, revealed by its own toggle (see syncPngOpts). */
/* Its own row, so it reads the same in the narrow sidebar as it does wide. */
.pngopts__field {
    display: flex; align-items: center; gap: 8px; flex-basis: 100%;
}
.pngopts__field[hidden] { display: none; }
.pngopts__fieldlabel { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.pngopts__input {
    flex: 1 1 auto; min-width: 0; max-width: 18rem; padding: 5px 9px;
    border: 1px solid var(--line); border-radius: 8px;
    font: inherit; font-size: .85rem;
}
.pngopts__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The off-screen card html2canvas rasterizes. Positioned out of view rather
   than display:none, because html2canvas can only capture a laid-out element.
   Fixed width so the exported square never depends on the window size. */
.pngcard {
    position: fixed; top: 0; left: -20000px; z-index: -1;
    /* Padding stays tight: the card is upscaled to fill the 1080 square, so
       every pixel of margin here is multiplied. squareFit adds the breathing
       room instead, at a size that does not depend on the scale factor. */
    box-sizing: border-box; padding: 10px 12px;
    background: #fffdf7; text-align: center;
}
.pngcard .labels { margin-bottom: 14px; }
/* A numbered list has to read as a list. The card centres everything, which
   leaves an <ol>'s markers stranded in a column of their own with the text
   floating away from them — so every ordered list is left aligned inside a
   shrink-to-fit block, which the card then centres as one unit. */
.pngcard ol, .pngcard ol li { text-align: left; }
.pngcard ol { display: inline-block; margin-left: auto; margin-right: auto; }
/* The handle signing off a composed image. Quick Puzzles do not use this —
   their frame draws the handle itself (see pngQuickFrame). */
.pngcard__handle {
    margin: 16px 0 2px; color: #8a8477;
    font-size: .82rem; font-weight: 500; letter-spacing: .1em;
}

/* ---- Quick Puzzles (Instagram) ---- */
.qp { text-align: center; }

/* Odd One Out */
.oddgrid {
    display: inline-grid; gap: 6px; margin: 6px auto 4px;
    justify-content: center;
}
.oddgrid span {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; font-size: 1.4rem; line-height: 1;
}
.oddgrid span.odd {
    outline: 3px solid #d32f2f; border-radius: 50%;
}

/* Symbol Algebra */
.qa-eqs { display: inline-block; text-align: left; margin: 4px auto; }
.qa-line {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.6rem; margin: 6px 0;
}
.qa-sym { font-size: 1.9rem; line-height: 1; }
.qa-op { color: var(--muted); font-weight: 700; }
.qa-q { color: #b3261e; font-weight: 800; font-size: 1.8rem; }
.qa-ans { color: #15803d; font-weight: 800; }
.qa-legend {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
    margin: 4px 0 12px; font-size: 1.1rem; font-weight: 700;
}

/* Sujiko — 3x3 grid with the four circle sums sitting on the inner corners. */
.sjk {
    --sjk-cell: 74px;
    position: relative;
    width: calc(var(--sjk-cell) * 3);
    margin: 16px auto 10px;
}
.sjk__grid {
    display: grid;
    grid-template-columns: repeat(3, var(--sjk-cell));
    grid-template-rows: repeat(3, var(--sjk-cell));
}
.sjk__cell {
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--line); margin: -1px 0 0 -1px;
    background: #fff;
    font-weight: 800; font-size: 1.7rem;
    font-family: ui-monospace, monospace;
}
.sjk__cell.is-given { background: #f3f4f6; }
.sjk__cell.is-solved { color: #15803d; }
.sjk__sum {
    position: absolute; transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid #1f2430; background: #fbeecf;
    font-weight: 800; font-size: 1.05rem;
    z-index: 1;
}
.sjk-note { color: var(--muted); font-size: .9rem; margin: 2px 0 0; }

/* What Comes Next */
.wcn-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 12px; margin: 12px 0;
}
.wcn-term {
    min-width: 58px; padding: 12px 10px;
    border: 2px solid var(--line); border-radius: 12px;
    font-weight: 800; font-size: 1.5rem;
    font-family: ui-monospace, monospace;
}
.wcn-q { color: #b3261e; border-color: #b3261e; background: #fbeecf; }

/* Find the Missing Number — wheel */
.mn-wheel {
    position: relative; width: 260px; height: 260px; margin: 12px auto 8px;
}
.mn-wheel .mn-node, .mn-wheel .mn-hub {
    position: absolute; transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
    width: 62px; height: 62px; border-radius: 50%;
    font-weight: 800; font-size: 1.35rem;
    border: 2px solid var(--line); background: #fff;
}
.mn-wheel .mn-hub {
    width: 68px; height: 68px; background: #1f2430; color: #fff;
    border-color: #1f2430; font-size: 1.5rem; z-index: 1;
}
/* Draw the spokes behind the nodes. */
.mn-wheel::before {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(to right, var(--line) 0 0) center/2px 100% no-repeat,
        linear-gradient(60deg, transparent calc(50% - 1px), var(--line) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(-60deg, transparent calc(50% - 1px), var(--line) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}
.mn-node--q { color: #b3261e; border-color: #b3261e; background: #fbeecf; z-index: 2; }
.mn-node--ans { color: #15803d; border-color: #15803d; background: #eafaf0; z-index: 2; }

/* Find the Missing Number — grid */
.mn-grid { border-collapse: collapse; margin: 12px auto 8px; }
.mn-grid td {
    width: 62px; height: 62px; text-align: center;
    border: 2px solid var(--line);
    font-weight: 800; font-size: 1.5rem;
}
.mn-grid td.mn-q { color: #b3261e; border-color: #b3261e; background: #fbeecf; }
.mn-grid td.mn-ans { color: #15803d; border-color: #15803d; background: #eafaf0; }

/* Crack the Code */
.cc-eqs { display: inline-block; margin: 10px auto; }
.cc-line {
    font-size: 1.7rem; font-weight: 700; margin: 8px 0;
    font-family: ui-monospace, monospace;
}
.cc-final { font-size: 1.9rem; margin-top: 14px; }

/* Odd Number Out */
.onum-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 14px; margin: 14px 0;
}
.onum {
    min-width: 74px; padding: 16px 12px;
    border: 2px solid var(--line); border-radius: 14px;
    font-weight: 800; font-size: 1.7rem;
    font-family: ui-monospace, monospace;
}
.onum--odd { color: #b3261e; border-color: #b3261e; background: #fbeecf; }

/* Cipher Message — the coded line sits on a dark scrap, the same as the social
   square draws it, so the preview shows what will actually be posted. The
   lopsided radii stand in for the torn edge the canvas renderer draws. */
.cmsg-note {
    display: block; max-width: 620px; margin: 18px auto 14px; padding: 30px 32px;
    background: #2b3630; color: #f7f4ea;
    border-radius: 12px 16px 10px 18px / 14px 10px 18px 12px;
    box-shadow: 0 10px 26px rgba(20, 28, 24, .28);
}
.cmsg-note--answer { background: #34261e; color: #f7e8d2; }
.cmsg-code {
    margin: 0;
    font-family: "Courier New", ui-monospace, monospace;
    font-weight: 700; font-size: 1.45rem; line-height: 1.55;
    letter-spacing: .1em; word-break: break-word;
}
.cmsg-hint { margin: 0; color: var(--muted); font-style: italic; font-size: .95rem; }

/* ---------- Create Puzzle: button + status modal ---------- */

.btn--create { background: #15803d; color: #fff; border-color: #15803d; }
.btn--create:hover:not(:disabled) { border-color: #0f5f2d; background: #0f5f2d; }
.btn--danger { color: #b91c1c; border-color: #f0b4b4; background: #fff5f5; }
.btn--danger:hover:not(:disabled) { color: #fff; background: #b91c1c; border-color: #b91c1c; }

/* Create Patreon — the brand's warm orange, to read as a sibling of Create Puzzle. */
.btn--patreon { background: #d9643a; color: #fff; border-color: #d9643a; }
.btn--patreon:hover:not(:disabled) { border-color: #bf5230; background: #bf5230; }

/* The Create Patreon popup's coming-soon / status line. */
.dropmodal__note { margin: 12px 0 0; min-height: 1.2em; color: var(--muted, #6b7280); font-size: .92rem; border-radius: 6px; }
/* Briefly flag the note when a blocked Generate click can't proceed, so the
   click clearly registers even if the reason text is unchanged. */
.dropmodal__note--flash { animation: noteFlash 0.9s ease; }
@keyframes noteFlash {
  0%, 100% { background: transparent; color: var(--muted, #6b7280); }
  15%      { background: #fde68a; color: #7c2d12; box-shadow: 0 0 0 6px #fde68a; }
}

.dropmodal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dropmodal__backdrop { position: absolute; inset: 0; background: rgba(31, 36, 48, .55); }
.dropmodal__card {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 18px 48px rgba(31, 36, 48, .28);
    padding: 24px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
}
.dropmodal__title { margin: 0 0 16px; font-size: 1.15rem; }
.dropmodal__actions { display: flex; gap: 10px; margin-top: 20px; }

/* Monthly Plan swap chooser — the puzzles that fit the slot being replaced. */
.swaplist {
    margin-top: 12px; max-height: 46vh; overflow-y: auto;
    border: 1px solid var(--line); border-radius: 10px; padding: 4px;
}
.swaplist__row {
    display: flex; align-items: baseline; gap: 9px; cursor: pointer;
    padding: 7px 9px; border-radius: 8px; font-size: .92rem;
}
.swaplist__row:hover { background: #eef3ff; }
.swaplist__row input { cursor: pointer; accent-color: var(--accent); }
.swaplist__name { font-weight: 600; }
.swaplist__used {
    margin-left: auto; font-size: .74rem; color: #b45309; background: #fff8ec;
    border: 1px solid #f3d9a8; border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}

/* Save-as-Image sheet. The image must be a real, visible <img> so iOS offers
   "Save Image" on a long press — hence no background-image or canvas here. */
.dropmodal__card--image { max-width: 480px; }
.imagemodal__parts { display: flex; flex-direction: column; gap: 22px; margin-top: 14px; }
.imagemodal__part { display: flex; flex-direction: column; gap: 8px; }
.imagemodal__label {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}
.imagemodal__share { align-self: flex-start; }
.imagemodal__img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.dropsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dropstep {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: 8px;
    background: #fafbfc;
}
/* The dot carries the pass/fail colour; the left border echoes it. */
.dropstep__mark { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--line); }
.dropstep__text { min-width: 0; }
.dropstep__name { display: block; font-weight: 600; font-size: .92rem; }
/* pre-line so the success detail can list the code, link and saved file name
   on their own rows. */
.dropstep__detail { display: block; margin-top: 2px; font-size: .82rem; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }

.dropstep[data-state="busy"] { border-left-color: var(--accent); }
.dropstep[data-state="busy"] .dropstep__mark { background: var(--accent); animation: dropstep-pulse 1s ease-in-out infinite; }

.dropstep[data-state="ok"] { border-left-color: #15803d; background: #f1f9f3; }
.dropstep[data-state="ok"] .dropstep__mark { background: #15803d; }
.dropstep[data-state="ok"] .dropstep__detail { color: #15803d; }

.dropstep[data-state="fail"] { border-left-color: #b3261e; background: #fdf2f1; }
.dropstep[data-state="fail"] .dropstep__mark { background: #b3261e; }
.dropstep[data-state="fail"] .dropstep__detail { color: #b3261e; }

/* Deliberately not done — either the step does not apply (Story Mode), or the
   portal record was switched off. Amber, so it reads as a choice rather than a
   pass, a failure, or a row still waiting its turn. */
.dropstep[data-state="skipped"] { border-left-color: #d97706; background: #fff8ec; }
.dropstep[data-state="skipped"] .dropstep__mark { background: #d97706; }
.dropstep[data-state="skipped"] .dropstep__detail { color: #b45309; }

@keyframes dropstep-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
    .dropstep[data-state="busy"] .dropstep__mark { animation: none; }
}

/* ---------- Top tabs (Puzzle Generator / Mystery Generator) ---------- */
.tabs {
    display: flex; gap: 6px;
    padding: 10px 24px 0;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    /* Five tabs are wider than a phone. They used to push the page wider than
       the screen, so the last ones sat past the header's background; now the
       strip scrolls sideways inside its own bar instead. */
    overflow-x: auto;
    position: relative;          /* offsetLeft of a tab is measured from here */
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    appearance: none; border: none; background: none;
    font: inherit; font-weight: 600; color: var(--muted);
    padding: 10px 18px; cursor: pointer;
    border-radius: 10px 10px 0 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, background .15s;
}
.tab { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 600px) {
    .tabs { padding: 8px 10px 0; gap: 2px; }
    .tab { padding: 10px 12px; font-size: .92rem; }
}
.tab:hover { color: var(--ink); background: rgba(59, 110, 245, 0.06); }
.tab--active {
    color: var(--accent); border-bottom-color: var(--accent);
    background: rgba(59, 110, 245, 0.08);
}

/* ---------- Reversible: Work Backwards / Vault ---------- */
.wb-chain {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px; margin: 16px 0;
}
.wb-node {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 48px; height: 48px; padding: 0 10px;
    border-radius: 12px; font-weight: 800; font-size: 1.2rem;
    font-family: ui-monospace, monospace;
    border: 2px solid var(--line); background: #fff;
}
.wb-node--start { border-color: var(--accent); color: var(--accent); }
.wb-node--result {
    border: none; color: #fff;
    background: linear-gradient(135deg, var(--accent), #7b5cff);
}
.wb-op {
    font-family: ui-monospace, monospace; font-weight: 700; font-size: 1rem;
    padding: 5px 9px; border-radius: 8px; background: rgba(59, 110, 245, 0.08); color: var(--ink);
}
.wb-op--sm { font-size: .9rem; }
.wb-arrow { color: var(--muted); font-size: 1.1rem; }
.wb-work { margin: 6px auto 0; max-width: 340px; }
.wb-work-row {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    font-family: ui-monospace, monospace; font-size: 1rem; padding: 3px 0;
}
.wb-work-from { min-width: 46px; text-align: right; color: var(--muted); }
.wb-work-to { min-width: 46px; font-weight: 800; }

/* ---------- Reversible: Token Shuffle ---------- */
.ts-label { margin: 12px 0 6px; font-weight: 700; font-size: .9rem; }
.ts-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.ts-cell {
    position: relative;
    width: 54px; height: 54px; border: 2px solid var(--line); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 800; font-family: ui-monospace, monospace; background: #fff;
}
.ts-cell--ans { border-color: var(--accent); color: var(--accent); }
.ts-pos {
    position: absolute; top: 2px; left: 4px;
    font-size: .6rem; font-weight: 600; color: var(--muted);
}
/* On the image card the tokens stay on ONE row whatever the count: the row
   never wraps, and each tile shrinks (square, down to 28px) to share the width. */
.pngcard .ts-row { flex-wrap: nowrap; justify-content: center; gap: 6px; }
.pngcard .ts-cell {
    flex: 0 1 54px; min-width: 28px; width: auto; height: auto; aspect-ratio: 1;
}
.ts-swaps { margin: 0; padding-left: 1.4em; }
.ts-swaps li { margin: 3px 0; font-size: .92rem; }

/* ---------- Monthly Plan ---------- */
.monthly__intro { margin: 0 0 14px; line-height: 1.5; color: var(--muted); font-size: .9rem; }
.monthly__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.monthly__saved {
    margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line);
}

.plan__title { margin: 0 0 4px; font-size: 1.4rem; }
.plan__sub { margin: 0 0 6px; color: var(--muted); font-size: .9rem; }
.plan__saved { margin: 0 0 18px; font-size: .82rem; color: #15803d; font-weight: 600; }
.plan__saved--none { color: var(--muted); font-weight: 400; font-style: italic; }
.plan-week { margin-bottom: 22px; }
.plan-week__title {
    margin: 0 0 10px; font-size: 1.05rem; font-weight: 700;
    padding-bottom: 6px; border-bottom: 2px solid var(--accent);
    background: linear-gradient(120deg, #2536b8, #7b5cff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    border-image: linear-gradient(120deg, var(--accent), #7b5cff) 1;
}
.plan-day {
    border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px;
    background: rgba(59, 110, 245, 0.03);
}
.plan-day__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }

/* "Posted" tick + the swap button that replaces one pick with another. */
.plan-day__check {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); user-select: none;
}
.plan-day__check input { width: 15px; height: 15px; cursor: pointer; accent-color: #15803d; }
.plan-day__swap {
    margin-left: auto; cursor: pointer; line-height: 1;
    border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
    padding: 3px 7px; font-size: .95rem;
}
.plan-day__swap:hover { border-color: var(--accent); background: #eef3ff; }

/* A posted puzzle stays readable but is plainly struck through and done with. */
.plan-day--done { background: #f2f4f7; border-color: #cfd5dd; opacity: .72; }
.plan-day--done .plan-day__name { text-decoration: line-through; }
.plan-day--done .plan-day__day { background: #9aa3b2; }
.plan-day--done .plan-day__check { color: #15803d; }
.plan-day--done .plan-day__path,
.plan-day--done .plan-prompt summary { text-decoration: line-through; }

/* A saved pick whose puzzle has since left the generator. */
.plan-day--missing { border-color: #d97706; background: #fff8ec; }
.plan-day__gone { margin: 0 0 6px; font-size: .8rem; color: #b45309; font-weight: 600; }
.plan-day__day {
    font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: #fff; background: linear-gradient(135deg, var(--accent), #7b5cff);
    padding: 3px 9px; border-radius: 999px;
}
.plan-day__name { font-weight: 700; font-size: 1rem; }
.plan-day__path { margin: 0; padding-left: 1.2em; font-size: .84rem; color: var(--ink); }
.plan-day__path li { margin: 1px 0; }
.plan-day__nocontent { margin: 8px 0 0; font-size: .8rem; color: var(--muted); font-style: italic; }
.plan-prompt { margin-top: 8px; }
.plan-prompt summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--accent); }
.plan-prompt__copy { margin: 8px 0; }
.plan-prompt__text {
    white-space: pre-wrap; word-break: break-word;
    background: #f6f7fb; border: 1px solid var(--line); border-radius: 8px;
    padding: 10px; font-size: .78rem; line-height: 1.4; margin: 0;
    max-height: 260px; overflow: auto;
}

/* ---------- Mystery Generator ---------- */
.mys-intro { margin: 0 0 14px; line-height: 1.55; }
.mys-head { margin: 16px 0 6px; font-size: 1rem; color: var(--accent); }
.mys-dossier { list-style: none; padding-left: 0; margin: 4px 0 12px; }
.mys-dossier li { margin-bottom: 8px; line-height: 1.45; }
.mys-name { font-weight: 700; }
.mys-clues { padding-left: 1.6em; margin: 4px 0 14px; }
.mys-clues li { margin-bottom: 7px; line-height: 1.45; }
.mys-q { font-weight: 600; margin: 10px 0 0; }
.mys-blank {
    display: inline-block; min-width: 170px;
    border-bottom: 1px solid var(--ink);
}

.mys-answer { font-size: 1.05rem; margin: 0 0 10px; }
.mys-grid { border-collapse: collapse; margin: 6px 0 12px; }
.mys-grid th, .mys-grid td {
    border: 1px solid var(--line);
    padding: 6px 12px; text-align: center;
}
.mys-grid th { background: #eef0f4; font-size: .9rem; }
.mys-grid .mys-name { background: #eef0f4; text-align: left; }
.mys-grid .mys-culprit td { background: #fff3cd; }
.mys-yes { color: #15803d; font-weight: 700; }
.mys-no { color: #b91c1c; }
.mys-reason { margin: 4px 0 6px; line-height: 1.5; }

/* ---------- Solve-It (narrative, hidden-clue) mystery ---------- */
.si-story { margin: 0 0 12px; line-height: 1.6; }
.si-accounts { list-style: none; padding-left: 0; margin: 4px 0 12px; }
.si-accounts li { margin-bottom: 9px; line-height: 1.5; }
.si-who { font-weight: 700; }
.si-accounts li.si-tell {
    background: #fff3cd; border-left: 4px solid #e0c36a;
    padding: 6px 10px; border-radius: 6px; margin-left: -10px;
}
.si-q { font-weight: 600; margin: 12px 0 0; }
.si-answer { font-size: 1.02rem; margin: 0 0 8px; line-height: 1.5; }

/* ---------- Story Mode (pure prose) mystery ---------- */
.sm-story { margin: 0 0 12px; line-height: 1.65; }
.sm-q { font-weight: 700; font-size: 1.05rem; margin: 14px 0 0; }
.sm-answer { font-size: 1.02rem; margin: 0 0 8px; line-height: 1.5; }
.sm-hit { background: #fff3cd; padding: 0 2px; border-radius: 3px; }

/* Sign Grid (Takuzu) — one mark per square, in whichever symbol pair was
   picked. Cells shrink as the grid grows so a 10x10 still fits the preview
   column; the drawn marks are inline SVG sized off the cell. */
.sg-grid { border-collapse: collapse; margin: 8px auto 14px; }
.sg-grid .sg-cell {
    width: 40px; height: 40px; text-align: center; vertical-align: middle;
    border: 1px solid var(--line); font-size: 1.35rem; line-height: 1;
    font-family: ui-monospace, monospace; color: var(--muted);
}
.sg-grid .sg-cell.sg-given { font-weight: 700; color: var(--ink); background: #eef3ff; }
.sg-grid.sg-n8 .sg-cell { width: 36px; height: 36px; font-size: 1.2rem; }
.sg-grid.sg-n10 .sg-cell { width: 31px; height: 31px; font-size: 1.05rem; }
.sg-grid .sg-svg { width: 1.1em; height: 1.1em; display: block; margin: 0 auto; }
/* The outer edge reads as the board, so it gets the heavier rule. */
.sg-grid tr:first-child .sg-cell { border-top: 2px solid var(--ink); }
.sg-grid tr:last-child .sg-cell { border-bottom: 2px solid var(--ink); }
.sg-grid .sg-cell:first-child { border-left: 2px solid var(--ink); }
.sg-grid .sg-cell:last-child { border-right: 2px solid var(--ink); }

/* Star Battle — every square tinted by its region (same values as SB_FILL in
   app.js), with a heavy rule wherever a region ends (sb-t / sb-r / sb-b /
   sb-l, set per edge by RENDER) so the regions still read without colour. */
.sb-grid { border-collapse: collapse; margin: 8px auto 14px; }
.sb-grid .sb-cell {
    width: 40px; height: 40px; padding: 0; text-align: center; vertical-align: middle;
    border: 1px solid #9aa0aa; font-size: 1.5rem; line-height: 1;
}
.sb-grid.sb-n8 .sb-cell { width: 36px; height: 36px; font-size: 1.35rem; }
.sb-grid.sb-n10 .sb-cell { width: 31px; height: 31px; font-size: 1.15rem; }
.sb-grid .sb-t { border-top: 3px solid #1f2430; }
.sb-grid .sb-r { border-right: 3px solid #1f2430; }
.sb-grid .sb-b { border-bottom: 3px solid #1f2430; }
.sb-grid .sb-l { border-left: 3px solid #1f2430; }
.sb-grid .sb-star { color: #1f2430; }
.sb-grid .sb-g0 { background: #f9c6c9; }
.sb-grid .sb-g1 { background: #ffe39f; }
.sb-grid .sb-g2 { background: #bfe5c4; }
.sb-grid .sb-g3 { background: #bcd7f5; }
.sb-grid .sb-g4 { background: #d9c9f2; }
.sb-grid .sb-g5 { background: #ffd0a8; }
.sb-grid .sb-g6 { background: #b5e6ea; }
.sb-grid .sb-g7 { background: #f2c4e3; }
.sb-grid .sb-g8 { background: #dbe8a8; }
.sb-grid .sb-g9 { background: #d6d0c4; }

/* Connect the Pairs (Link Paths) — the whole board is one inline SVG rather
   than a table, because the answer key draws routes through cell centres and a
   table has nothing to draw them on. The SVG scales to the preview column, so
   a 5x5 and an 8x8 both fill the width. */
.lp-wrap { margin: 10px auto 14px; max-width: 460px; }
.lp-grid { display: block; width: 100%; height: auto; }
.lp-grid .lp-cell { fill: none; stroke: var(--line); stroke-width: 1.4; }
.lp-grid .lp-wall { fill: var(--black-cell); opacity: 0.82; }
.lp-grid .lp-frame { fill: none; stroke: var(--ink); stroke-width: 2.6; }
.lp-grid .lp-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lp-grid .lp-mark {
    fill: #fff; font-weight: 700; text-anchor: middle;
    font-family: ui-sans-serif, system-ui, sans-serif;
}

/* Tangle (the Quick Puzzle cut) draws through the very same lpSvg, so it needs
   no styles of its own beyond a narrower column: it is four or five pairs on a
   5x5, and at the full 460px the marks come out larger than the printable
   sheet's, which reads as a different puzzle rather than a smaller one. */
.lp-wrap--quick { max-width: 330px; }

/* Bridges (Hashi) — an inline SVG for the same reason Connect the Pairs is one:
   the answer draws spans between island centres, and the puzzle half has no
   grid at all, only the faint dots that let a solver count the gaps. */
.br-wrap { margin: 10px auto 14px; max-width: 460px; }
.br-grid { display: block; width: 100%; height: auto; }
.br-grid .br-dot { fill: var(--line); }
.br-grid .br-span { stroke: var(--ink); stroke-linecap: round; }
.br-grid .br-isle { stroke: var(--ink); stroke-width: 2; }
.br-grid .br-num {
    fill: #fff; font-weight: 700; text-anchor: middle;
    font-family: ui-sans-serif, system-ui, sans-serif;
}
.br-count { text-align: center; color: var(--muted); font-size: 0.9rem; margin: 6px 0 0; }

/* Wire Up — the nodes ARE the grid (every square carries one, bar
   Constellation's gaps), so there is nothing to draw in the empty space and no
   grid lines at all. The lines are drawn under the nodes. */
.wu-wrap { margin: 10px auto 14px; max-width: 470px; }
.wu-grid { display: block; width: 100%; height: auto; }
.wu-grid .wu-wire { stroke: var(--ink); stroke-linecap: round; }
.wu-grid .wu-node { stroke: var(--ink); stroke-width: 2; }
.wu-grid .wu-num {
    fill: #fff; font-weight: 700; text-anchor: middle;
    font-family: ui-sans-serif, system-ui, sans-serif;
}

/* Slitherlink — the loop is drawn BETWEEN the dots, so there is no grid to make
   out of table cells at all: the dots are the lattice and the numbers float in
   the squares between them. */
.sl-wrap { margin: 10px auto 14px; max-width: 430px; }
.sl-grid { display: block; width: 100%; height: auto; }
.sl-grid .sl-dot { fill: var(--ink); }
.sl-grid .sl-loop { fill: none; stroke-linecap: round; }
.sl-grid .sl-num {
    fill: var(--ink); font-weight: 700; text-anchor: middle;
    font-family: ui-sans-serif, system-ui, sans-serif;
}

/* End View (Easy as ABC) — the grid plus a one-cell clue rail on all four
   sides. The rail cells carry no border, so the frame reads as the puzzle and
   the clues read as annotations sitting outside it. */
.ev-grid { border-collapse: collapse; margin: 10px auto 14px; }
.ev-grid .ev-cell {
    width: 42px; height: 42px; text-align: center; vertical-align: middle;
    border: 1px solid var(--line); font-size: 1.3rem; line-height: 1;
    font-weight: 700; color: var(--muted);
}
.ev-grid .ev-cell.ev-given { color: var(--ink); background: #eef3ff; }
.ev-grid .ev-clue, .ev-grid .ev-corner {
    width: 42px; height: 42px; text-align: center; vertical-align: middle;
    border: 0; font-size: 1.2rem; font-weight: 700; color: #c43e34;
}
.ev-grid.ev-n7 .ev-cell, .ev-grid.ev-n7 .ev-clue, .ev-grid.ev-n7 .ev-corner,
.ev-grid.ev-n8 .ev-cell, .ev-grid.ev-n8 .ev-clue, .ev-grid.ev-n8 .ev-corner {
    width: 36px; height: 36px; font-size: 1.1rem;
}
/* Only the playing area is framed; the rail floats outside it. */
.ev-grid tr:nth-child(2) .ev-cell { border-top: 2px solid var(--ink); }
.ev-grid tr:nth-last-child(2) .ev-cell { border-bottom: 2px solid var(--ink); }
/* Column 1 and column n of the playing area — :first-of-type would pick the
   clue rail, since every cell in the row is a td. */
.ev-grid .ev-cell:nth-child(2) { border-left: 2px solid var(--ink); }
.ev-grid .ev-cell:nth-last-child(2) { border-right: 2px solid var(--ink); }
.ev-letters { text-align: center; color: var(--muted); letter-spacing: 0.04em; }

/* Which Box? — statement cards with a label chip on the left, the rule pinned
   under the stack. Matches the social square: the preview IS the layout. */
.wbox {
    display: flex; flex-direction: column; gap: 12px;
    max-width: 620px; margin: 16px auto 0; text-align: left;
}
.wbox__card {
    display: flex; align-items: stretch; gap: 0;
    border: 2px solid var(--line); border-radius: 14px; background: #fff;
    overflow: hidden;
}
.wbox__card--open { border-color: #b3261e; background: #fbeecf; }
.wbox__tag {
    flex: 0 0 108px; display: flex; align-items: center; justify-content: center;
    padding: 14px 10px; font-weight: 800; font-size: .95rem;
    color: #5b6472; border-right: 2px solid var(--line);
}
.wbox__card--open .wbox__tag { color: #b3261e; border-right-color: #e0bfae; }
.wbox__text { margin: 0; padding: 16px 18px; font-size: 1.08rem; line-height: 1.45; }
.wbox__rule {
    display: inline-block; margin: 18px auto 4px; padding: 12px 26px;
    border: 2px solid var(--line); border-radius: 999px;
    background: #f1f0ea; font-weight: 700;
}

/* The answer key's elimination table: a tick per statement for every candidate,
   so the reader sees the other rows fail rather than being told they do. */
.wbox-check {
    margin: 12px auto 0; border-collapse: collapse; font-size: .95rem;
}
.wbox-check th, .wbox-check td { padding: 7px 12px; text-align: center; }
.wbox-check thead th { font-size: .8rem; color: #5b6472; text-transform: uppercase; }
.wbox-check tbody th { text-align: left; font-weight: 700; white-space: nowrap; }
.wbox-check tbody tr { border-top: 1px solid var(--line); }
.wbox-check .is-true { color: #1f7a44; font-weight: 700; }
.wbox-check .is-false { color: #b9bfc8; }
.wbox-check__count { font-weight: 800; }
.wbox-check__verdict { color: #7a828e; font-size: .88rem; white-space: nowrap; }
.wbox-check__hit { background: #fbeecf; }
.wbox-check__hit .wbox-check__verdict { color: #b3261e; font-weight: 700; }

/* Word Builder — the source word as letter tiles, and the key as a length ladder */
.wb-word {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px; margin: 18px 0 14px;
}
.wb-tile {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px;
    border: 2px solid var(--line); border-radius: 12px; background: #fff;
    font-weight: 800; font-size: 2rem; line-height: 1;
}
.wb-word--small { gap: 6px; margin: 10px 0 16px; }
.wb-word--small .wb-tile { width: 40px; height: 40px; font-size: 1.2rem; border-radius: 8px; }
.wb-ask { text-align: center; font-size: 1.3rem; margin: 6px 0 4px; }
.wb-ask strong { color: #b3261e; }
.wb-rule { text-align: center; color: #7a828e; font-size: .92rem; margin: 0; }
.wb-key { display: grid; gap: 10px; }
.wb-group { display: flex; align-items: baseline; gap: 12px; }
.wb-group__len {
    flex: 0 0 auto; min-width: 30px; text-align: center;
    padding: 2px 8px; border-radius: 999px; background: #f1f0ea;
    color: #7a828e; font-size: .82rem; font-weight: 700;
}
.wb-group__words { font-weight: 700; letter-spacing: .02em; }

/* Sum It Up — the grid, with the row/column totals on rails outside it */
/* Math Crossword — a crossword's own drawing: unused squares solid, playing
   squares outlined. The operator squares are tinted so the signs read as part of
   the printed puzzle rather than as another answer to fill in. */
.mx-wrap { text-align: center; }
.mx { border-collapse: collapse; margin: 18px auto 10px; }
.mx td {
  width: 34px; height: 34px; text-align: center; vertical-align: middle;
  font-weight: 700; font-size: 1.05rem; padding: 0;
}
.mx__block { border: 0; background: #1a1a1a; }
.mx__cell { border: 2px solid var(--line); background: #fff; }
.mx__cell.is-given { background: #f1f0ea; }
.mx__cell.is-solved { color: #15803d; }
.mx__op { border: 2px solid var(--line); background: #fbfaf6; color: #5b6472; }
.mx-note { color: #7a828e; font-size: .9rem; margin: 4px 0 0; }
.mx-key {
  list-style: none; padding: 0; margin: 14px auto 0; max-width: 460px;
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
}
.mx-key li { font-size: .95rem; }
.mx-key__dir { color: #7a828e; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

.siu-wrap { text-align: center; }
.siu { border-collapse: collapse; margin: 18px auto 10px; }
.siu td {
    width: 62px; height: 62px; text-align: center; vertical-align: middle;
    font-size: 1.35rem; font-weight: 700;
}
.siu__cell { border: 2px solid var(--line); background: #fff; }
.siu__cell.is-given { background: #f1f0ea; }
.siu__cell.is-solved { color: #15803d; }
.siu__sum { color: #5b6472; font-size: 1.15rem; }
.siu__corner { border: 0; }
.siu-note { color: #7a828e; font-size: .9rem; margin: 4px 0 0; }

/* Kakuro: a clue square is split by a diagonal, across total top-right and
   down total bottom-left. */
.kk-wrap { text-align: center; }
.kk { border-collapse: collapse; margin: 18px auto 10px; border: 3px solid #1f2933; }
.kk td {
    width: 44px; height: 44px; padding: 0; text-align: center; vertical-align: middle;
    border: 1px solid #1f2933; font-size: 1.3rem; font-weight: 700;
}
.kk-s11 td { width: 38px; height: 38px; font-size: 1.1rem; }
.kk-block { background: #c4c4c4; }
.kk-clue {
    position: relative;
    background: linear-gradient(to top right, #c4c4c4 calc(50% - 1px), #1f2933 50%, #c4c4c4 calc(50% + 1px));
}
.kk-clue span { position: absolute; font-size: .72rem; font-weight: 700; line-height: 1; color: #111; }
.kk-across { top: 4px; right: 4px; }
.kk-down { bottom: 4px; left: 4px; }
.kk-cell { background: #fff; }
.kk-cell.is-given { background: #f1f0ea; }
.kk-cell.is-solved { color: #15803d; }
.kk-note { color: #7a828e; font-size: .9rem; margin: 4px 0 0; }
@media (max-width: 560px) {
    .kk td { width: 32px; height: 32px; font-size: 1rem; }
    .kk-s11 td { width: 28px; height: 28px; font-size: .9rem; }
    .kk-clue span { font-size: .6rem; }
    .kk-across { top: 2px; right: 2px; }
    .kk-down { bottom: 2px; left: 2px; }
}

/* ---------- Mystery Pack ---------- */
/* The panel is the import form; .packpreview is the built pack on the right.
   Each card shows both halves side by side — puzzle and answer — because the
   whole point of a pack is that the two belong together, and proof-reading a
   game means checking that the answer really is the clue you meant. */

.pack__intro { margin: 0 0 14px; line-height: 1.5; color: var(--muted); font-size: .9rem; }
.pack__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pack input[type="file"] { font-size: .9rem; padding: 6px 0; }
.pack textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }

.packpreview { display: grid; gap: 14px; }

.packhead {
    border-bottom: 2px solid var(--line);
    padding-bottom: 12px;
}
.packhead__title { margin: 0; font-size: 1.5rem; letter-spacing: .01em; }
.packhead__sub { margin: 2px 0 0; color: var(--muted); font-size: .95rem; }
.packhead__meta {
    margin: 8px 0 0; font-size: .78rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em;
}
.packhead__intro { margin: 10px 0 0; line-height: 1.5; }

.packcard {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--panel);
}
@media (max-width: 760px) { .packcard { grid-template-columns: 1fr; } }

.packcard__side { padding: 14px 16px; }
.packcard__side--answer {
    background: #fbfbfd;
    border-left: 1px dashed var(--line);
    display: flex; flex-direction: column; justify-content: center; text-align: center;
}
@media (max-width: 760px) {
    .packcard__side--answer { border-left: 0; border-top: 1px dashed var(--line); }
}

.packcard__title {
    margin: 0; font-size: .82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; color: var(--accent);
}
.packcard__kind {
    margin: 2px 0 0; font-size: .72rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em;
}
.packcard__instruction { margin: 10px 0 0; font-size: .92rem; line-height: 1.45; }

.packcard__code {
    margin: 14px 0 0; text-align: center;
    font-size: 1.7rem; font-weight: 700; letter-spacing: .06em;
    word-break: break-word;
}
.packcard__word { display: inline-block; margin: 0 10px; }
.packcard__key {
    margin: 10px 0 0; text-align: center;
    font-size: .68rem; color: var(--muted); line-height: 1.6;
}
/* Pigpen's key, on the card. Its instruction says "use the key below", so the
   26 drawings have to be below it - in one compact block, because a pack card
   is half a page and the message above it needs the room. */
.packcard__glyphkey {
    margin: 10px 0 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px;
}
.packcard__glyphkey li {
    display: flex; align-items: center; gap: 3px;
    font-size: .7rem; font-weight: 700; color: var(--muted);
}
/* What to DO with the cipher - the shift, the keyword, the rails. Small print,
   but the card is unsolvable without it. */
.packcard__hint {
    margin: 10px 0 0; text-align: center;
    font-size: .72rem; color: var(--muted); line-height: 1.5;
}

.packcard__list {
    margin: 14px 0 0; padding: 0; list-style: none;
    text-align: center; font-size: 1.15rem; font-weight: 700; letter-spacing: .1em;
}
.packcard__list li { padding: 3px 0; }

.packcard__riddle { margin: 14px 0 0; text-align: center; }
.packcard__riddle p { margin: 3px 0; font-size: .98rem; line-height: 1.5; }

.packcard__ws { margin: 14px 0 0; display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.packcard__grid { border-collapse: collapse; margin: 0 auto; }
.packcard__grid td {
    width: 21px; height: 21px; text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem; font-weight: 700;
}
.packcard__words {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; gap: 4px 12px;
    font-size: .82rem; letter-spacing: .04em;
}
.packcard__rule { margin: 14px 0 8px; font-weight: 600; font-size: .9rem; }

.packcard__secret {
    margin: 6px 0 0; font-size: 1.6rem; font-weight: 800; letter-spacing: .05em;
}
.packcard__clue { margin: 8px 0 0; font-size: .9rem; line-height: 1.45; }
.packcard__how { margin: 10px 0 0; font-size: .7rem; color: var(--muted); line-height: 1.6; }

.packsolution {
    border-top: 2px solid var(--line); padding-top: 12px;
}
.packsolution h3 {
    margin: 0 0 4px; font-size: .8rem; text-transform: uppercase;
    letter-spacing: .07em; color: var(--muted);
}
.packsolution p { margin: 0; font-size: .95rem; }

/* "Use as public example" — snapshots the current preview for the public /play/
   site. Deliberately quieter than Create Puzzle/Create Patreon: it publishes
   nothing and numbers nothing, it just decides what a first-timer sees. */
.btn--public { background: #0f766e; color: #fff; border-color: #0f766e; }
.btn--public:hover:not(:disabled) { border-color: #115e59; background: #115e59; }

/* What is already saved for this puzzle on /play/. A snapshot goes stale
   silently when a renderer changes, so the age is always on screen next to the
   button that would replace it. */
.public-hint { align-self: center; font-size: .86rem; color: var(--muted); }
.public-hint--none { font-style: italic; }
.public-hint--stale { color: #b45309; font-weight: 600; }

/* ---- Editing a panel in place (instructions / public page / caption) ----
   The head's buttons sit in a row so Copy+Edit can be swapped for Save+Cancel
   without the heading jumping, and the editor box takes the place of the
   rendered text rather than appearing under it. */
.panel__btns { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.panel-edit { margin: 0; }
.panel-edit__field { display: block; margin: 0 0 10px; }
.panel-edit__label {
    display: block; margin-bottom: 4px;
    font-size: .78rem; color: var(--muted);
}
.panel-edit textarea {
    width: 100%;
    font: inherit; font-size: .88rem; line-height: 1.5;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    resize: vertical;
}
.panel-edit__hint { margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.45; }

/* ---------- Fun Game tab (which game is live on the Puzzles app's /fun/) ---------- */
.fungame__msg { min-height: 1.3em; margin: 12px 0 0; font-size: .9rem; }
.fungame__msg--ok { color: #15803d; font-weight: 600; }
.fungame__msg--err { color: #b91c1c; font-weight: 600; }
.fungame__card {
    padding: 18px 20px; margin-bottom: 20px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(59, 110, 245, .06), rgba(123, 92, 255, .06));
}
.fungame__eyebrow { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #15803d; }
.fungame__name { margin: 2px 0 6px; font-size: 1.6rem; }
.fungame__meta { margin: 4px 0; color: var(--muted); font-size: .92rem; word-break: break-word; }
.fungame__meta strong { color: var(--ink); }
.fungame__link { margin: 12px 0 0; font-size: .95rem; word-break: break-all; }
.fungame__status--warn { margin: 0; color: #92400e; background: #fef3c7; padding: 10px 12px; border-radius: 8px; }
.fungame__h { margin: 0 0 8px; font-size: 1.05rem; }
.fungame__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fungame__game { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.fungame__game.is-live { border-color: #15803d; box-shadow: 0 0 0 1px #15803d inset; }
.fungame__game p { margin: 6px 0 0; color: var(--muted); font-size: .9rem; }
.fungame__sub { color: var(--muted); font-size: .88rem; }
.fungame__play { margin: 0 4px; padding: 2px 10px; text-decoration: none; vertical-align: 1px; }
.fungame__pill { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #15803d; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.fungame__note { margin: 8px 0 0; color: var(--muted); font-size: .82rem; }
.funstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
@media (min-width: 700px) { .funstats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.funstat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.funstat__label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.funstat__value { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.funstat__sub { font-size: .78rem; color: var(--muted); }
/* width 0 + min-width 100%: the wide table scrolls inside this box instead of
   stretching the page's grid column (a 1fr track never shrinks below its
   content's min width, which is the whole un-wrapped table). */
.funhist__wrap { width: 0; min-width: 100%; overflow-x: auto; margin-top: 4px; border: 1px solid var(--line); border-radius: var(--radius); }
.funhist { width: 100%; border-collapse: collapse; font-size: .86rem; white-space: nowrap; }
.funhist th, .funhist td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.funhist th { background: #f8f9fb; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.funhist td small { color: var(--muted); }
.funhist tr:last-child td { border-bottom: 0; }
.funhist tr.is-live td { background: #f0fdf4; }
.fungame__list + .fungame__h { margin-top: 20px; }

/* The /play/ rules link for a puzzle that has a public example. */
.ruleslink { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; font-size: 0.9rem; }
.ruleslink__label { font-weight: 600; }
.ruleslink__url { word-break: break-all; }

/* Fun Game tab: the access-code row and the "allow full access" box. */
.fungame__coderow { display: flex; gap: 8px; align-items: stretch; }
.fungame__coderow input { flex: 1 1 auto; min-width: 0; letter-spacing: .12em; font-weight: 700; }
.fungame__coderow input:disabled { opacity: .5; }
.field--check { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.field--check input { width: auto; margin: 0; }

/* Quick Fun — the preview is the finished square itself. */
.qf { text-align: center; }
.qf-img { width: 100%; max-width: 540px; height: auto; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.qf-note { max-width: 540px; margin: .6rem auto 0; text-align: left; color: #5b6472; font-size: .95rem; }

/* ---------- Mystery Games: Mystery Finder (assets/mysterygames.js) ---------- */
.mf { display: grid; gap: 22px; }
.mf-page { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.mf-bar {
    background: #e9eaec; border-radius: 6px; padding: 8px 12px; margin-bottom: 12px;
    font-family: "Courier New", ui-monospace, monospace; font-weight: 700; letter-spacing: .08em;
}
.mf-note { color: var(--muted); font-size: .85rem; margin: 0 0 14px; }
.mf-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
.mf-rooms--key { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 8px; }
.mf-room {
    position: relative; border: 1.5px solid var(--ink); border-radius: 12px;
    padding: 20px 8px 8px; display: flex; flex-direction: column; align-items: center; min-width: 0;
}
.mf-pill {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap;
    background: var(--black-cell); color: #fff; border-radius: 999px; padding: 3px 12px;
    font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.mf-rooms--key .mf-pill { font-size: .6rem; padding: 2px 8px; }
.mf-zone { font-size: .75rem; font-style: italic; color: var(--muted); margin-top: 4px; }
.mf-grid { border-collapse: collapse; max-width: 100%; }
.mf-grid td {
    width: 1.35em; height: 1.35em; text-align: center; padding: 0;
    font-size: clamp(.55rem, 1.6vw, .85rem); font-weight: 600;
}
.mf-rooms--key .mf-grid td { font-size: clamp(.4rem, .9vw, .6rem); }
.mf-hit--s { background: #ffd6aa; }
.mf-hit--i { background: #bed6ff; }
.mf-lists { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin: 12px 0; }
.mf-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.mf-table th { text-align: left; font-size: .7rem; color: var(--muted); text-transform: uppercase; padding: 4px; }
.mf-table td { border-top: 1px solid var(--line); padding: 4px; vertical-align: middle; }
.mf-table small { color: var(--muted); }
.mf-k { text-align: center !important; width: 1.4em; }
.mf-box { display: inline-block; width: 11px; height: 11px; border: 1.2px solid var(--ink); }
.mf-h { font-family: "Courier New", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; margin: 14px 0 6px; }
.mf-clues { margin: 0; padding-left: 22px; line-height: 1.5; font-size: .9rem; }
.mf-solve { font-family: "Courier New", ui-monospace, monospace; font-weight: 700; margin-top: 16px; }
.mf-answer { background: #e9eaec; border-radius: 6px; padding: 8px 12px; text-align: center; }
@media (max-width: 640px) {
    .mf-rooms, .mf-lists { grid-template-columns: minmax(0, 1fr); }
    .mf-rooms--key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mystery Games: Evidence Locker + Escape Room ---------- */
.mg-glyph { display: inline-block; vertical-align: middle; color: var(--ink); }
.el-lists { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr); gap: 14px; margin: 12px 0; }
.el-log { margin: 0; padding-left: 26px; }
.el-log li { border-bottom: 1px solid var(--line); height: 1.9em; }
.el-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.el-tag { border: 1.5px solid var(--ink); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.el-taghead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.el-taghead em, .er-lockhead em { color: var(--muted); font-size: .8rem; }
.el-pill { position: static; transform: none; display: inline-block; }
.el-code { font-family: "Courier New", ui-monospace, monospace; font-weight: 700; margin: 0; word-break: break-word; }
.el-glyphs { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.el-gword { display: inline-flex; gap: 4px; }
.el-kit { border-top: 1px solid var(--line); padding: 10px 0; }
.el-kit h4 { margin: 0 0 4px; font-family: "Courier New", ui-monospace, monospace; text-transform: uppercase; }
.el-kit h4 small { font-family: system-ui, sans-serif; text-transform: none; color: var(--muted); font-weight: 400; }
.el-kit p { margin: 2px 0; font-size: .88rem; }
.el-key { font-weight: 700; }
.el-legend { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; margin-top: 6px; }
.el-legend span { display: flex; flex-direction: column; align-items: center; background: #f1f2f4; border-radius: 4px; padding: 2px; min-width: 0; }
.el-legend code { font-size: .62rem; overflow-wrap: anywhere; text-align: center; }
.el-square { border-collapse: collapse; margin-top: 6px; }
.el-square th, .el-square td { width: 26px; height: 22px; text-align: center; font-size: .8rem; }
.el-square td { border: 1px solid var(--ink); }
.el-square th { color: var(--muted); }
.er-lockhead { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; }
.er-boxes { display: inline-flex; gap: 4px; }
.er-boxes span { width: 22px; height: 22px; border: 1.2px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.er-track td { vertical-align: middle; }
.er-exit { background: #e9eaec; border-radius: 6px; padding: 8px 12px; }
.er-sudoku { border-collapse: collapse; border: 2px solid var(--ink); margin: 6px auto; }
.er-sudoku td { width: 34px; height: 34px; border: 1px solid #9aa0aa; text-align: center; position: relative; font-size: 1rem; }
.er-sudoku td.er-bR { border-right: 2px solid var(--ink); }
.er-sudoku td.er-bB { border-bottom: 2px solid var(--ink); }
.er-sudoku td.er-circ { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--ink); border-radius: 50%; }
.er-sudoku sup { position: absolute; top: 1px; left: 3px; font-size: .55rem; color: var(--muted); }
.er-code { font-family: "Courier New", ui-monospace, monospace; font-weight: 700; font-size: 1.2rem; background: #e9eaec; border-radius: 6px; padding: 10px; text-align: center; letter-spacing: .08em; }
.er-ws { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.er-words { columns: 2; margin: 0; padding-left: 18px; font-size: .85rem; font-weight: 600; }
.er-cb td { vertical-align: middle; }
.er-sol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.er-wsg td { font-size: .7rem; }
@media (max-width: 640px) {
    .el-lists, .el-tags, .er-sol { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Mystery Games: Crossword Case ---------- */
.cc-stmt { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.cc-grid { border-collapse: collapse; }
.cc-grid td { width: 24px; height: 24px; padding: 0; position: relative; text-align: center; font-weight: 700; font-size: .85rem; }
.cc-grid td.cc-w { border: 1px solid var(--ink); background: #fff; }
.cc-grid td.cc-shade { background: #cdd0d6; }
.cc-grid td.cc-circ span { display: inline-flex; width: 19px; height: 19px; border: 1.3px solid var(--ink); border-radius: 50%; align-items: center; justify-content: center; }
.cc-grid sup { position: absolute; top: 0; left: 1px; font-size: .5rem; font-weight: 400; }
.mf-rooms--key .cc-grid td { width: 14px; height: 14px; font-size: .55rem; }
.mf-rooms--key .cc-grid td.cc-circ span { width: 11px; height: 11px; }
.cc-clues { flex: 1; min-width: 220px; font-size: .85rem; }
.cc-clues h4 { margin: 0 0 4px; font-family: "Courier New", ui-monospace, monospace; }
.cc-clues ol { margin: 0 0 10px; padding-left: 26px; }
.cc-facts { color: var(--muted); font-size: .85rem; margin-top: 10px; }
/* Secret Mission (kids): the preview is the PDF drawn as SVG, one page per card. */
.sm .sm-wrap { padding: 0; overflow: hidden; }
.sm-page { display: block; width: 100%; height: auto; }

/* ---------- Mystery Games: Treasure Hunt Map ---------- */
.th-map { border-collapse: collapse; margin: 8px auto; }
.th-map th { font-size: .7rem; color: var(--muted); padding: 2px 4px; }
.th-map td { width: 40px; height: 40px; border: 1px solid #b9bcc2; text-align: center; vertical-align: middle; padding: 0; position: relative; }
.th-map td span { display: block; font-size: 1rem; line-height: 1; }
.th-map td small { display: block; font-size: .5rem; line-height: 1.05; font-weight: 700; }
.th-map td.th-w { background: #cde4f5; }
.th-map td.th-b { background: #f3e2b4; }
.th-map td.th-j { background: #bedea5; }
.th-map td.th-route { box-shadow: inset 0 0 0 3px #c82828; }
.th-x { color: #c82828; font-size: 1.4rem; }
.th-note { color: var(--muted); font-size: .85rem; text-align: center; }
.th-hint { color: var(--muted); font-size: .8rem; font-style: italic; margin: 6px 0 0; }
@media (max-width: 640px) { .th-map td { width: 24px; height: 24px; } .th-map td small { display: none; } }

/* Do Not Disturb: the building chart, one row per floor, top floor first. */
.dnd-chart { border-collapse: collapse; margin: 10px auto 4px; border: 2px solid var(--ink); }
.dnd-chart td {
    width: 40px; height: 32px; text-align: center; vertical-align: middle;
    border: 1px solid var(--line);
    font-size: 1rem; color: var(--ink);
}
.dnd-chart .dnd-hit {
    background: var(--shade); font-weight: 700;
    box-shadow: inset 0 0 0 2px #b43c3c;
}

/* No Vacancy: the tower chart beside (or under) each night's note. */
.nv-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.nv-scroll { overflow-x: auto; max-width: 100%; }
.nv-chart { border-collapse: collapse; margin: 6px 0; border: 2px solid var(--ink); }
.nv-chart td, .nv-chart th { padding: 0 3px; height: 20px; text-align: center; font-size: .72rem; }
.nv-chart td { border: 1px solid var(--line); min-width: 30px; color: var(--ink); }
.nv-chart th { color: var(--muted); font-weight: 600; background: var(--paper, transparent); }
.nv-chart .nv-none { background: var(--shade); }
.nv-chart .nv-short { background: var(--shade); }
.nv-chart .nv-hit { background: var(--shade); font-weight: 700; box-shadow: inset 0 0 0 2px #b43c3c; }
.nv-trail td { height: 26px; }
@media (max-width: 640px) { .nv-side { grid-template-columns: 1fr; } }

/* Alibi Sudoku: hours down, rooms across, thick lines round each wing x shift. */
.as-grid { border-collapse: collapse; margin: 8px auto; }
.as-grid th { font-size: .7rem; font-weight: 600; padding: 2px 4px; color: var(--ink); }
.as-grid th small { color: var(--muted); font-weight: 400; }
.as-grid td { width: 38px; height: 38px; border: 1px solid var(--line); text-align: center; font-weight: 600; color: #3b6ef5; }
.as-grid td.as-given { color: var(--ink); }
.as-grid .as-bL { border-left: 2px solid var(--ink); }
.as-grid .as-bT { border-top: 2px solid var(--ink); }
.as-grid td.as-crime { background: var(--shade); box-shadow: inset 0 0 0 2px #b43c3c; }
.as-statements li { margin-bottom: 4px; }

/* Sketch Artist: a 10x10 picture grid with its run clues. */
.sk-block { margin: 6px 0 18px; }
.sk-nono { border-collapse: collapse; margin: 6px auto; }
.sk-nono th { font-size: .68rem; font-weight: 600; color: var(--ink); padding: 0 3px; }
.sk-nono th.sk-cc { vertical-align: bottom; text-align: center; height: 13px; }
.sk-nono th.sk-rc { text-align: right; white-space: nowrap; }
.sk-nono td { width: 20px; height: 20px; border: 1px solid var(--line); }
.sk-nono td:nth-child(6) { border-right: 2px solid var(--ink); }   /* child 1 is the row clue, so this is column 5 */
.sk-nono td.sk-on { background: var(--ink); }
.sk-nono td.sk-dot { background: radial-gradient(circle, var(--ink) 2px, transparent 2.5px); }
.sk-sol { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.sk-sol .sk-nono td { width: 11px; height: 11px; }
.sk-board tr.sk-culprit td { background: var(--shade); font-weight: 700; }

/* The Getaway Car: the car park, row A (the exit) at the top. */
.gc-lot { border-collapse: collapse; margin: 10px auto 2px; }
.gc-lot th { font-size: .72rem; color: var(--muted); font-weight: 600; padding: 2px 4px; }
.gc-lot td.gc-car { border: 1px solid var(--line); padding: 4px 6px; font-size: .72rem; line-height: 1.35; min-width: 72px; vertical-align: top; color: var(--ink); }
.gc-lot td.gc-car code { font-size: .72rem; font-weight: 700; }
.gc-sw { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border: 1px solid #555; vertical-align: -1px; }
.gc-red .gc-sw { background: #d23c32; } .gc-blue .gc-sw { background: #3c64c8; } .gc-green .gc-sw { background: #3c9650; }
.gc-white .gc-sw { background: #fff; } .gc-black .gc-sw { background: #1e1e1e; } .gc-yellow .gc-sw { background: #f0c828; }
.gc-silver .gc-sw { background: #b4b9be; }
.gc-lot td.gc-hit { background: var(--shade); box-shadow: inset 0 0 0 2px #b43c3c; }
.gc-exit { text-align: center; font-size: .72rem; color: var(--muted); margin: 10px 0 0; }

/* Before & After: two photos of the same shelves. */
.sd-scene { display: block; margin: 4px auto 12px; color: var(--ink); max-width: none; }
.sd-cap { margin: 10px 0 2px; }