/* Daily puzzles (/daily/, scripts/daily.mjs, public/daily.js). Uses the tokens in style.css. */
.dp { margin: var(--s5) 0 0; padding: 18px; border: 2px solid var(--line-2); border-radius: var(--radius-lg); background: var(--card); }
.dp-archive { border: 0; padding: 0; background: none; }
.dp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin: 0 0 var(--s3); }
.dp-meta { margin: 0; font-weight: 700; flex: 1 1 14rem; }
.dp-date { font-weight: 400; color: var(--muted); }
.dp-time { margin: 0; font: 800 var(--t-lg) / 1 var(--font); font-variant-numeric: tabular-nums; min-width: 4ch; }
.dp-past { background: var(--sun-soft); border-radius: 12px; padding: 10px 14px; }
.dp-theme { font-size: var(--t-lg); margin: 0 0 var(--s3); }
.dp-how { color: var(--muted); margin: 0 0 var(--s3); max-width: var(--measure); }
.dp-status:empty, .dp-loading:empty { display: none; }
.dp-btns { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 0; }
.dp-done { margin: var(--s4) 0 0; padding: 16px 18px; border-radius: var(--radius); background: var(--green-soft); }
.dp-done-h { margin: 0 0 6px; font-size: 1.4rem; }
/* Just solved (not a restored result): the panel settles in once. */
@media (prefers-reduced-motion: no-preference) { .dp-done.dp-pop { animation: dp-pop .45s cubic-bezier(.34, 1.4, .64, 1) both; } }
@keyframes dp-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.dp-done-h:focus { outline: none; }
.dp-done p { margin: 6px 0; }
.dp-print { margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); }
.dp-print h3 { margin: 0 0 var(--s2); font-size: var(--t-lg); }
.dp-print-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.dp-key { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; }
.dp-key input { width: 22px; height: 22px; accent-color: var(--coral); }
.dp-nojs { color: var(--muted); }

/* Word scramble: the clue under each word. */
.dp-scr { margin: 0; }
.dp-clue { flex: 1 0 100%; color: var(--muted); font-size: var(--t-sm); padding-left: 2.6ch; }
.dp .scr-mix { letter-spacing: .22em; }

/* Mini crossword: the shared player, a little tighter. */
.dp-cw { margin: 0; }

/* Word search */
.dp-ws-wrap { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 900px) { .dp-ws-wrap { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); } }
.dp-ws-grid { display: grid; grid-template-rows: repeat(var(--n), 1fr); width: min(100%, 560px); aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 12px; padding: 4px; background: #fff; touch-action: none; user-select: none; -webkit-user-select: none; }
.dp-ws-grid > div { display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.dp-ws-c { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font: 800 clamp(.95rem, 4.2vw, 1.55rem) / 1 var(--font); color: var(--ink); border-radius: 50%; cursor: pointer; min-width: 0; min-height: 24px; }
.dp-ws-c:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.dp-ws-c.dp-found { background: #cfe0ff; border-radius: 6px; }
.dp-ws-c.dp-sel { background: var(--sun); }
.dp-ws-h { margin: 0 0 var(--s2); font-size: var(--t-lg); }
.dp-ws-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 4px var(--s3); font-weight: 700; letter-spacing: .04em; }
.dp-ws-list li { padding: 6px 4px; }
.dp-ws-list .dp-got { text-decoration: line-through; color: var(--muted); font-weight: 400; }

/* Sudoku */
.dp-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
.dp-sd-grid { display: grid; grid-template-rows: repeat(9, 1fr); width: min(100%, 540px); aspect-ratio: 1; border: 3px solid var(--ink); background: #fff; container-type: inline-size; }
.dp-sd-grid > div { display: grid; grid-template-columns: repeat(9, 1fr); }
.dp-sq { position: relative; border-right: 1px solid #9a9ab4; border-bottom: 1px solid #9a9ab4; }
.dp-sq:nth-child(9) { border-right: 0; }
.dp-sd-grid > div:last-child .dp-sq { border-bottom: 0; }
.dp-sq.dp-br { border-right: 3px solid var(--ink); }
.dp-sq.dp-bb { border-bottom: 3px solid var(--ink); }
.dp-sq input { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; padding: 0; background: transparent; text-align: center; font: 600 calc(100cqi / 9 * .58) / 1 var(--font); color: var(--sky); caret-color: transparent; border-radius: 0; -webkit-appearance: none; appearance: none; }
.dp-given input { color: var(--ink); font-weight: 800; }
.dp-peer { background: var(--blue-soft); }
.dp-same { background: var(--sun-soft); }
.dp-sq input:focus { outline: 3px solid var(--focus); outline-offset: -3px; background: var(--sun); }
.dp-bad { background: #ffe1db; }
.dp-bad input { color: #b3261e; }
.dp-pad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: min(100%, 540px); margin: var(--s3) 0 0; }
.dp-pad button { min-height: 48px; padding: 0; font-size: 1.3rem; font-weight: 800; }
.dp-pad .dp-erase { font-size: 1rem; }

/* Larger text (the "Larger text" button; remembered on this device). */
.dp-big .dp-ws-c { font-size: clamp(1.15rem, 5vw, 1.9rem); }
.dp-big .dp-ws-list, .dp-big .dp-clue, .dp-big .cw-clues { font-size: 1.25rem; }
.dp-big .scr-mix, .dp-big .scr-in input { font-size: 1.6rem; }
.dp-big .dp-sd-grid, .dp-big .dp-ws-grid { width: min(100%, 680px); }
.dp-big .dp-pad { width: min(100%, 680px); }

/* Hub cards */
.dp-cards { list-style: none; padding: 0; margin: var(--s4) 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.dp-card a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 18px; border: 2px solid var(--line-2); border-radius: var(--radius); background: var(--sun-field); color: var(--ink); text-decoration: none; }
.dp-card a:hover { border-color: var(--ink); }
.dp-card a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.dp-card-name { font-size: 1.3rem; font-weight: 800; }
.dp-card-state { margin-top: auto; font-weight: 700; color: var(--muted); }
.dp-card-done .dp-card-state { color: var(--green); }
.dp-card-done .dp-card-state::before { content: "✓ "; }

/* Archive */
.dp-arc { list-style: none; padding: 0; margin: 0; }
.dp-arc li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px var(--s3); }
.dp-arc-d { font-weight: 700; min-width: 17rem; }
.dp-arc-g a { display: inline-block; min-height: 24px; padding: 2px 0; }
.dp-tick { color: var(--green); font-weight: 800; }

@media print { .dp, .dp-howto { display: none; } }