/* Hunch, the daily word game (#/daily/word): js/views/dailyword.js. Real HTML/CSS for every tile, key, dialog and count (the two supplied pictures are the Home shortcut's icon and the result panel's reward picture, nothing
   else). Colours are the supplied visual system: charcoal, cream, lime for an exact letter, cream with a double dark outline for a letter that is elsewhere, slate with cream letters for one that is not in
   the word, coral for emphasis. Colour is never the only signal: a mark can be shown on every tile and key (the "Show symbols" switch) and every tile has a text label once its row is accepted.
   Shared breakpoints only (1000, 480, 360). Motion (a short staggered flip, a small shake) is switched off under prefers-reduced-motion and never blocks typing. */
.page.dw { --dw-bg: #191814; --dw-cream: #EFE6D2; --dw-lime: #C6F432; --dw-coral: #FF4B2B; --dw-slate: #45443E; --dw-forest: #244C3D; --dw-line: #827E70; max-width: 1040px; }
.dw a:focus-visible, .dw button:focus-visible, .dw summary:focus-visible, .dw input:focus-visible { outline: 3px solid var(--dw-lime); outline-offset: 3px; }
.dw .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

body.dw-on .ticker, body.dw-on .search-mobile { display: none; }

/* ---- head ---- */
.dw-head { display: grid; gap: 6px; justify-items: start; margin-bottom: 14px; min-width: 0; }
.dw-back { display: inline-flex; align-items: center; min-height: 44px; font: 600 13px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); text-decoration: none; }
.dw-back:hover { color: var(--text); }
.dw-titles { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.dw-head h1 { margin: 0; font-family: var(--f-display); font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
.dw-date { margin: 0; font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.dw-offer { margin: 4px 0 0; max-width: 100%; padding: 8px 16px; border: 2px solid #0E0C0A; border-radius: 999px; background: var(--dw-lime); color: #10140A; font: 700 16px var(--f-body); box-shadow: 3px 3px 0 var(--lime-shadow); overflow-wrap: anywhere; }

/* ---- layout: the puzzle in the middle, the rules and the reward beside it on a wide screen, tucked into disclosures on a phone ---- */
.dw-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 32px; align-items: start; }
.dw-play { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.dw-side { display: grid; gap: 12px; min-width: 0; }
.dw-disc { border: 2px solid var(--dw-line); border-radius: 14px; background: rgba(239, 230, 210, .04); }
.dw-disc summary { min-height: 44px; display: flex; align-items: center; padding: 0 16px; font: 700 16px var(--f-body); cursor: pointer; }
.dw-disc > div { padding: 0 16px 14px; font-size: 15px; line-height: 1.45; color: var(--text); }
.dw-disc p { margin: 0; }
.dw-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; }

.dw-bar { width: min(100%, 520px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
.dw-count-wrap { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font: 500 13px var(--f-mono); letter-spacing: .04em; color: var(--text-2); min-width: 0; }
.dw-pill { padding: 4px 10px; border: 2px solid var(--dw-cream); border-radius: 999px; color: var(--dw-cream); font-weight: 700; }
.dw-tools { display: inline-flex; gap: 4px; }
.dw-link { min-height: 44px; padding: 0 10px; background: none; border: 0; color: var(--text); font: 600 13px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.dw-msg { min-height: 24px; margin: 4px 0 0; font: 600 14px var(--f-body); color: var(--text); text-align: center; }
.dw-msg[data-kind=warn] { color: var(--dw-coral); }

/* ---- the board ---- */
.dw-board { display: grid; grid-template-rows: repeat(6, auto); gap: 8px; width: min(100%, 340px); margin: 10px auto 18px; }
.dw-board.dw-off { opacity: .35; }
.dw-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dw-tile { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--dw-line); border-radius: 9px; background: transparent; color: var(--dw-cream); font-family: var(--f-display); font-size: clamp(24px, 7vw, 32px); font-weight: 800; line-height: 1; user-select: none; box-sizing: border-box; }
.dw-tile[data-state=typing] { border-color: var(--dw-cream); animation: dwPop .1s ease-out; }
.dw-tile[data-state=pending] { border-color: var(--dw-lime); animation: dwPulse 1s ease-in-out infinite; }
.dw-tile[data-state=exact] { background: var(--dw-lime); color: var(--dw-bg); border-color: var(--dw-lime); }
.dw-tile[data-state=present] { background: var(--dw-cream); color: var(--dw-bg); border: 4px double var(--dw-bg); }
.dw-tile[data-state=absent] { background: var(--dw-slate); color: var(--dw-cream); border-color: var(--dw-slate); }
.dw-tile.dw-flip { animation: dwFlip .45s ease-in-out; }
.dw-row.dw-shake { animation: dwShake .4s ease-in-out; }
.dw-mark { display: none; position: absolute; top: 2px; right: 4px; font: 700 11px var(--f-mono); line-height: 1; }
[data-symbols=on] .dw-tile[data-state=exact] .dw-mark::before { content: "\2713"; }
[data-symbols=on] .dw-tile[data-state=present] .dw-mark::before { content: "\25CF"; }
[data-symbols=on] .dw-tile[data-state=absent] .dw-mark::before { content: "\2013"; }
[data-symbols=on] .dw-tile[data-state=exact] .dw-mark, [data-symbols=on] .dw-tile[data-state=present] .dw-mark, [data-symbols=on] .dw-tile[data-state=absent] .dw-mark { display: block; }
@keyframes dwPop { from { transform: scale(.92); } to { transform: scale(1); } }
@keyframes dwPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes dwFlip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes dwShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* ---- the keyboard ---- */
.dw-keyboard { display: grid; gap: 6px; width: min(100%, 520px); margin: 0 auto; }
.dw-keyboard[hidden] { display: none; }
.dw-key-row { display: flex; justify-content: center; gap: 4px; }
.dw-key { position: relative; flex: 1; min-width: 0; min-height: 52px; padding: 4px 2px; border: 1px solid var(--dw-line); border-radius: 7px; background: var(--dw-cream); color: var(--dw-bg); font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer; touch-action: manipulation; }
.dw-key[data-wide=true] { flex: 1.7; font-size: 12px; letter-spacing: 0; }
.dw-key[data-state=exact] { background: var(--dw-lime); border-color: var(--dw-lime); }
.dw-key[data-state=present] { border: 3px double var(--dw-bg); }
.dw-key[data-state=absent] { background: var(--dw-slate); border-color: var(--dw-slate); color: var(--dw-cream); }
.dw-key:active { transform: translateY(1px); }
[data-symbols=on] .dw-key[data-state]::after { position: absolute; top: 1px; right: 3px; font: 700 9px var(--f-mono); }
[data-symbols=on] .dw-key[data-state=exact]::after { content: "\2713"; }
[data-symbols=on] .dw-key[data-state=present]::after { content: "\25CF"; }
[data-symbols=on] .dw-key[data-state=absent]::after { content: "\2013"; }
.dw-sym { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; min-height: 44px; margin-top: 10px; font-size: 14px; color: var(--text-2); text-align: center; }
.dw-sym input { width: 20px; height: 20px; accent-color: var(--dw-lime); }
.dw-legend { display: none; font: 500 12px var(--f-mono); }
[data-symbols=on] .dw-legend { display: inline; }

/* ---- the result ---- */
.dw-res { display: flex; align-items: center; gap: 16px; width: min(100%, 520px); box-sizing: border-box; padding: 16px; border: 2px solid #0E0C0A; border-radius: 16px; background: var(--dw-forest); color: var(--dw-cream); box-shadow: 4px 4px 0 var(--shadow-c); }
.dw-res:focus { outline: 3px solid var(--dw-lime); outline-offset: 3px; }
.dw-art { flex: none; width: 104px; height: 104px; object-fit: contain; pointer-events: none; }
.dw-res-t { min-width: 0; }
.dw-res h2 { margin: 0 0 6px; font-family: var(--f-display); font-size: clamp(26px, 4vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.dw-res p { margin: 0 0 8px; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.dw-credit { font-size: 17px; }
.dw-credit strong { color: var(--dw-lime); }
.dw-word { font: 800 20px var(--f-display); letter-spacing: .1em; color: var(--dw-lime); }
.dw-next { font: 500 13px var(--f-mono); letter-spacing: .02em; opacity: .9; }
.dw-res-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dw-res-actions .btn { min-height: 44px; }
.dw-none { justify-content: center; text-align: center; margin-top: 6px; }

/* ---- the dialogs ---- */
.dw-how { display: grid; gap: 6px; margin: 4px 0 10px; }
.dw-how p { margin: 0 0 8px; font-size: 15px; }
.dw-ex { display: grid; grid-template-columns: repeat(5, 44px); gap: 5px; }
.dw-tile-s { font-size: 22px; border-radius: 7px; background: transparent; color: #191814; border-color: #827E70; }
.dw-tile-s[data-state=exact] { background: #C6F432; color: #191814; border-color: #C6F432; }
.dw-tile-s[data-state=present] { background: #EFE6D2; border: 4px double #191814; }
.dw-tile-s[data-state=absent] { background: #45443E; color: #EFE6D2; border-color: #45443E; }
.dw-fine { font-size: 13px; line-height: 1.45; }
.dw-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 14px; text-align: center; }
.dw-stats div { padding: 8px 4px; border: 1.5px solid #b9b09b; border-radius: 10px; min-width: 0; }
.dw-stats b { display: block; font: 800 26px var(--f-display); letter-spacing: -.03em; }
.dw-stats span { display: block; font: 500 11px var(--f-mono); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
.dw-dh { margin: 4px 0 6px; font: 700 15px var(--f-body); }
.dw-dist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.dw-dist li { display: grid; grid-template-columns: 18px minmax(0, 1fr) 28px; align-items: center; gap: 8px; font: 600 13px var(--f-mono); }
.dw-dist i { display: block; height: 20px; width: max(var(--w), 6px); border-radius: 4px; background: #8F866F; }
.dw-dist li.now i { background: #7E9B14; }
.dw-dist b { text-align: right; }

@media (max-width: 1000px) {
  .dw-main { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dw-side { order: 2; }
}
@media (max-width: 640px) {                                           /* (a phone: title, board and keyboard have to share one screen, so every gap is small) */
  .dw-head { gap: 0; margin-bottom: 4px; }
  .dw-back { min-height: 32px; }
  .dw-head h1 { font-size: 30px; }
  .dw-offer { margin-top: 2px; padding: 6px 14px; font-size: 15px; }
  .dw-bar { gap: 0 8px; }
  .dw-link { min-height: 40px; padding: 0 8px; }
  .dw-msg { min-height: 20px; margin: 0; }
  .dw-board { width: clamp(200px, calc((var(--view-h) - var(--stuck-h) - var(--dock-h) - 250px) * 5 / 6), 340px); margin: 4px auto 10px; }      /* (what is left under the pinned header, less the status line and the keys) */
  .dw-sym { margin-top: 4px; }
}
@media (max-width: 480px) {
  .dw-lbl { display: none; }                                         /* (the time still says "Resets in" to a screen reader: its aria-label; on a phone the status line has to fit on one row) */
  .dw-link { font-size: 12px; padding: 0 4px; letter-spacing: .04em; }
  .dw-count-wrap { font-size: 12px; gap: 6px; } .dw-pill { padding: 2px 8px; }
  .dw-res { flex-direction: column; text-align: center; }
  .dw-art { width: 80px; height: 80px; }
  .dw-res-actions { justify-content: center; }
  .dw-board, .dw-row { gap: 6px; }
  .dw-keyboard { gap: 5px; }
  .dw-key { min-height: 50px; font-size: 14px; }
  .dw-ex { grid-template-columns: repeat(5, 40px); }
}
@media (max-width: 360px) {
  .dw-key-row { gap: 3px; }
  .dw-key[data-wide=true] { font-size: 10.5px; }
  .dw-stats b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .dw *, .dw-tile, .dw-row { animation: none !important; transition: none !important; } }

/* the link on the Daily challenges page */
.dc-wordlink { display: flex; align-items: center; gap: 14px; margin: 14px 0 6px; padding: 12px 16px; border: 2px solid var(--dw-line, #827E70); border-radius: 14px; background: rgba(239, 230, 210, .05); color: var(--text); text-decoration: none; min-height: 64px; }
.dc-wordlink:hover { border-color: var(--lime); }
.dc-wordlink img { flex: none; width: 48px; height: 48px; object-fit: contain; pointer-events: none; }
.dc-wordlink > span:nth-of-type(1) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dc-wordlink b { font-size: 18px; } .dc-wordlink small { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.modal h2[tabindex="-1"]:focus { outline: none; }                   /* (the dialog's heading takes focus when it opens so a screen reader starts there; it is not a control) */