/* Mini Crossword: a clipping torn from the paper, solved in biro. */
:root {
  --news: #f2efe6; --news-2: #e6e2d8; --newsink: #1f1b16; --newsink-2: #5f5a52; --rule: #bdb7a9; --biro: #1f3a93; --biro-soft: #dce3f7; --grid-line: #1f1b16; --block: #1f1b16; --sel: #fff2a8; --word: #eaf0ff; --wrong: #c8372d;
  --bg: var(--news-2); --surface: var(--news); --surface-2: #dcd7cb; --ink: var(--newsink); --ink-2: var(--newsink-2); --line: var(--rule); --ok: #2e7d4f; --warn: #b7791f; --bad: var(--wrong); --info: var(--biro); --accent: var(--newsink); --accent-ink: var(--news);
  --font-display: "Old Standard TT", "Times New Roman", serif; --font-ui: "Libre Franklin", "Inter", system-ui, sans-serif; --font-hand: "Caveat", "Segoe Print", cursive;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --news: #26241f; --news-2: #1a1916; --newsink: #ece7da; --newsink-2: #a8a295; --rule: #4a463d; --biro: #9db4ff; --biro-soft: #2c3550; --grid-line: #8a8478; --block: #0b0a09; --sel: #5a4d10; --word: #2c3550; --bg: var(--news-2); --surface: var(--news); --surface-2: #33302a; --ink: var(--newsink); --ink-2: var(--newsink-2); --line: var(--rule); --accent: var(--newsink); --accent-ink: var(--news-2); } }
:root[data-theme="dark"] { --news: #26241f; --news-2: #1a1916; --newsink: #ece7da; --newsink-2: #a8a295; --rule: #4a463d; --biro: #9db4ff; --biro-soft: #2c3550; --grid-line: #8a8478; --block: #0b0a09; --sel: #5a4d10; --word: #2c3550; --bg: var(--news-2); --surface: var(--news); --surface-2: #33302a; --ink: var(--newsink); --ink-2: var(--newsink-2); --line: var(--rule); --accent: var(--newsink); --accent-ink: var(--news-2); }
body { background-image: radial-gradient(circle, rgb(0 0 0 / .05) 0 .6px, transparent 1px); background-size: 4px 4px; }
.screen { gap: 12px; max-width: 560px; margin-inline: auto; }
.topbar { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.screen-title { font-size: 1.9rem; font-weight: 700; margin-left: 6px; }
.btn { font-weight: 700; } .cta { font-size: 1.05rem; min-height: 50px; }
.clipping { background: var(--news); padding: 22px 18px 18px; box-shadow: 0 6px 18px rgb(0 0 0 / .18); clip-path: polygon(0 3%, 3% 0, 7% 2%, 12% 0, 18% 2%, 23% 0, 30% 2%, 36% 0, 42% 2%, 48% 0, 55% 2%, 61% 0, 67% 2%, 73% 0, 80% 2%, 86% 0, 92% 2%, 97% 0, 100% 3%, 100% 100%, 0 100%); display: flex; flex-direction: column; gap: 14px; }
.masthead { text-align: center; border-top: 3px double var(--rule); border-bottom: 1px solid var(--rule); padding: 10px 0; }
.masthead h1 { font-size: clamp(2.6rem, 12vw, 3.6rem); font-weight: 700; letter-spacing: .02em; } .dateline { font-family: var(--font-display); font-style: italic; color: var(--ink-2); font-size: .95rem; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pcard { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px; min-height: 76px; border: 1px solid var(--rule); background: transparent; color: var(--ink); text-align: left; }
.pcard b { font-family: var(--font-display); font-size: 1.2rem; } .pcard span { color: var(--ink-2); font-size: .82rem; line-height: 1.25; font-weight: 500; }
.pcard[data-done="true"] b::after { content: " ✓"; color: var(--ok); }
.archive { display: flex; flex-wrap: wrap; gap: 6px; } .archive button { padding: 8px 12px; border: 1px solid var(--rule); font-weight: 700; font-size: .9rem; } .archive button[data-done="true"] { opacity: .55; text-decoration: line-through; }
.link { align-self: center; text-decoration: underline; text-underline-offset: 3px; font-family: var(--font-display); font-weight: 400; font-style: italic; }
.streak-pill { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface); color: var(--warn); font-weight: 700; box-shadow: var(--shadow-1); }

/* Play */
.screen[data-screen="play"] { height: 100dvh; min-height: 0; overflow: hidden; gap: 8px; container-type: inline-size; }
.hud-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; } .hud-note { color: var(--ink-2); font-weight: 700; }
.play-wrap { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
.paper { background: var(--news); padding: 8px; box-shadow: 0 4px 14px rgb(0 0 0 / .15); width: min(100%, calc(100dvh - 330px), 420px); margin-inline: auto; flex: 0 0 auto; }
.grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); border: 2px solid var(--grid-line); background: var(--grid-line); gap: 1px; aspect-ratio: 1; }
.cell { position: relative; background: var(--news); display: flex; align-items: center; justify-content: center; font-family: var(--font-hand); font-weight: 600; font-size: var(--fs); color: var(--biro); text-transform: uppercase; padding: 0; min-width: 0; transition: background var(--t-fast); }
.cell[data-black="true"] { background: var(--block); }
.cell .num { position: absolute; top: 1px; left: 3px; font-family: var(--font-ui); font-size: calc(var(--fs) * .32); font-weight: 700; color: var(--ink); line-height: 1; }
.cell[data-word="true"] { background: var(--word); } .cell[data-sel="true"] { background: var(--sel); }
.cell[data-wrong="true"] .v { color: var(--wrong); text-decoration: line-through; text-decoration-thickness: 2px; } .cell[data-revealed="true"] .v { color: var(--ink-2); font-family: var(--font-ui); font-size: calc(var(--fs) * .8); font-weight: 700; }
.cell .v.anim-in { animation: pen-in .16s var(--ease-out); } @keyframes pen-in { from { transform: translateY(4px) scale(.7); opacity: 0; } }
.cell:focus-visible { outline: 3px solid var(--biro); outline-offset: -3px; z-index: 1; }
.grid[data-n="5"] { --fs: clamp(1.4rem, 9vw, 2.6rem); } .grid[data-n="7"] { --fs: clamp(1.1rem, 6.5vw, 2rem); }
.grid.anim-flash .cell[data-black="true"] { animation: invert .6s var(--ease-out); } @keyframes invert { 30% { background: var(--biro); } }
.clue-bar { display: flex; align-items: center; gap: 4px; background: var(--biro-soft); border-radius: 10px; padding: 4px; min-height: 52px; }
.clue-text { flex: 1; min-width: 0; text-align: left; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; padding: 4px 6px; color: var(--ink); }
.clue-text b { font-family: var(--font-ui); font-size: .8rem; margin-right: 6px; color: var(--biro); }
.clue-lists { display: none; }
.play-msg { text-align: center; min-height: 1.3em; color: var(--ink-2); font-family: var(--font-display); font-style: italic; }
hg-keyboard { padding-bottom: env(safe-area-inset-bottom); } .key { background: var(--surface); box-shadow: var(--shadow-1); font-family: var(--font-ui); }
@container (min-width: 700px) { .play-wrap { flex-direction: row; align-items: flex-start; } .paper { width: min(420px, 55cqw); margin: 0; } .clue-bar { display: none; } .clue-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; font-family: var(--font-display); } .clue-lists h3 { font-size: 1.1rem; border-bottom: 1px solid var(--rule); margin-bottom: 6px; } .clue-lists ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .clue-lists li { padding: 4px 6px; cursor: pointer; border-radius: 4px; line-height: 1.25; } .clue-lists li b { font-family: var(--font-ui); font-size: .8rem; color: var(--biro); margin-right: 6px; } .clue-lists li[data-active="true"] { background: var(--biro-soft); } .clue-lists li[data-done="true"] { color: var(--ink-2); text-decoration: line-through; } }
@media (min-width: 640px) { .screen[data-screen="play"] { max-width: 900px; } }

/* Sheets */
.tools-note { color: var(--ink-2); font-size: .92rem; } .tools-grid { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 6px; align-items: center; } .tools-grid span { font-weight: 700; font-family: var(--font-display); padding-right: 6px; } .tools-grid .btn { min-height: 42px; padding: 0 8px; background: var(--surface-2); }
.result-verdict { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 2.8rem); text-align: center; font-weight: 700; line-height: 1.05; } .result-sub { text-align: center; color: var(--ink-2); font-family: var(--font-display); font-style: italic; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; } .result-actions .cta { grid-column: 1 / -1; }
.set-row small { display: block; color: var(--ink-2); font-size: .8rem; font-weight: 500; }