/* =====================================================================
   Daily "Wise Word Finder" — styles for the playable word-search card.
   Imported by BOTH feed.css (feed/index cards) and post.css (the post page),
   so everything is scoped to .dw-card / .feed-card.daily-word and reuses the
   generic .dc-* play-shell classes (bar, timer, goal, flash, actions, status,
   leaderboard) that both stylesheets already define for Zip Mate.
   ===================================================================== */

/* the "found / solved" green. As TEXT it needs a brighter shade in dark mode —
   #1f6d4c is only ~2.7:1 on the dark tile (fills with white text keep the deep one) */
.dw-card,.dw-post{ --wf-green:#1f6d4c }
@media (prefers-color-scheme: dark){ .dw-card,.dw-post{ --wf-green:#4aa97c } }

/* card flavor: same treatment as daily-chess, green-tinted to tell them apart */
.feed-card.daily-word{ grid-template-columns:1fr; padding:16px 18px; text-align:center;
  background:linear-gradient(180deg, color-mix(in srgb, #1f6d4c 6%, var(--tile)), var(--tile)); }

/* COMPACT PILL while minimized (mirror of .feed-card.daily-chess's rules) */
.feed-card.daily-word:not(.dc-expanded){ padding:10px 12px; text-align:left }
.feed-card.daily-word:not(.dc-expanded) .dc-kicker-row,
.feed-card.daily-word:not(.dc-expanded) .dc-foot{ display:none }
.feed-card.daily-word .dc-prompt{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* tiny letter-grid thumbnail in the pill (the word cousin of .dc-mini-board) */
.wf-mini-grid{ flex:0 0 auto; width:54px; aspect-ratio:1/1; display:grid; gap:1px; padding:2px;
  grid-template-columns:repeat(var(--wfn,6),1fr); background:var(--line);
  border:2px solid color-mix(in srgb, var(--ink) 35%, var(--line)); border-radius:5px;
  box-shadow:0 3px 9px -6px rgba(0,0,0,.55); overflow:hidden }
.wf-mini-grid span{ display:grid; place-items:center; background:var(--tile);
  font-family:var(--ui); font-weight:700; font-size:5px; line-height:1; color:var(--ink-soft,#6a6253) }

/* ---- EXPAND ON PLAY (mirror of the .daily-chess transition set) ---- */
.dw-card .dc-host{ align-self:stretch; width:100% }
.wf-grid-area{ width:100%; max-width:340px; aspect-ratio:1/1; margin:10px auto 2px;
  transition:max-width .3s cubic-bezier(.2,.7,.2,1); will-change:max-width }
.dw-card:not(.dc-expanded) .wf-grid-area{ max-width:180px }
.dw-card.dc-expanded .wf-grid-area{ max-width:340px }
.dw-card .dc-bar, .dw-card .dc-actions, .dw-card .dc-status, .dw-card .wf-quote, .dw-card .wf-author{
  transition:opacity .28s ease .06s, transform .28s ease .06s }
.dw-card:not(.dc-expanded) .dc-bar,
.dw-card:not(.dc-expanded) .dc-actions,
.dw-card:not(.dc-expanded) .dc-status,
.dw-card:not(.dc-expanded) .wf-quote,
.dw-card:not(.dc-expanded) .wf-author{ opacity:0; transform:translateY(6px) }
.dw-card.dc-expanded .dc-bar,
.dw-card.dc-expanded .dc-actions,
.dw-card.dc-expanded .dc-status,
.dw-card.dc-expanded .wf-quote,
.dw-card.dc-expanded .wf-author{ opacity:1; transform:none }

/* ---- the quote with blanks ---- */
.wf-quote{ font-family:var(--display,serif); font-size:17px; line-height:1.55; color:var(--ink);
  margin:6px auto 0; max-width:560px; text-align:center; quotes:none }
.wf-blank{ display:inline-block; min-width:2ch; letter-spacing:.12em; font-weight:700;
  color:color-mix(in srgb, var(--ink) 55%, transparent); border-bottom:2px solid var(--line);
  padding:0 1px; white-space:nowrap }
.wf-blank-hint{ color:color-mix(in srgb, var(--crimson) 55%, var(--ink-soft,#6a6253)); font-style:italic;
  letter-spacing:normal; opacity:.85 }
/* AFTER .wf-blank-hint so finding a hint-revealed word upgrades it to the confident
   filled crimson (both classes stay on the span — last rule wins the tie) */
.wf-blank-filled{ color:var(--crimson); border-bottom-color:transparent; letter-spacing:normal;
  font-style:normal; opacity:1; animation:wf-fill .4s ease }
@keyframes wf-fill{ 0%{ transform:scale(.8); opacity:.2 } 60%{ transform:scale(1.12) } 100%{ transform:scale(1); opacity:1 } }
.wf-author{ font-family:var(--ui); font-size:12px; color:var(--ink-soft,#6a6253); margin-top:4px }

/* the goal line gets a gentle breathing pulse — CLEAR GOALS, with motion */
.wf-goal{ animation:wf-breathe 2.6s ease-in-out infinite }
/* double class to outrank feed.css/post.css's later .dc-goal{color:crimson} —
   a single .wf-goal-done ties on specificity and loses to the @import order */
.wf-goal.wf-goal-done{ color:var(--wf-green,#1f6d4c); animation:none }
@keyframes wf-breathe{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }

/* ---- the letter grid ---- */
.wf-grid{ position:relative; width:100%; height:100%; display:grid; gap:2px; padding:3px;
  grid-template-columns:repeat(var(--wfn,6),1fr); grid-auto-rows:1fr;
  background:var(--line); border:2px solid color-mix(in srgb, var(--ink) 35%, var(--line));
  border-radius:10px; touch-action:none; user-select:none; -webkit-user-select:none;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.6) }
.wf-cell{ position:relative; z-index:2; display:grid; place-items:center; cursor:pointer;
  background:var(--tile); border-radius:4px;
  font-family:var(--ui); font-weight:700; font-size:clamp(13px, 4.2vw, 22px); line-height:1;
  color:var(--ink); -webkit-tap-highlight-color:transparent }
.wf-cell.wf-start{ box-shadow:inset 0 0 0 3px #d9a514; background:color-mix(in srgb, #d9a514 22%, var(--tile)) }
.wf-cell.wf-tr{ background:color-mix(in srgb, #d9a514 30%, var(--tile)) }
.wf-cell.wf-bad{ background:color-mix(in srgb, #ff3b30 38%, var(--tile)); animation:wf-shake .3s ease }
.wf-cell.wf-found{ color:color-mix(in srgb, var(--ink) 80%, transparent) }
.wf-cell.wf-pulse{ animation:wf-pulse 1.2s ease 2 }
@keyframes wf-pulse{ 0%,100%{ box-shadow:none } 50%{ box-shadow:inset 0 0 0 4px var(--crimson) } }
@keyframes wf-shake{ 0%,100%{ transform:none } 25%{ transform:translateX(-2px) } 75%{ transform:translateX(2px) } }

/* found-word capsules (highlight style 1): an absolutely-positioned stadium pill
   OVER the cells (z:3 > cells' z:2) as a low-alpha wash — it can't sit underneath
   because the cell tiles are opaque. Positioned by CENTER in % + rotated via the
   --wf-cap-t var by drawCapsule() (diagonal words get a ±45° pill); the var
   composes with the pop-in keyframes so the animation doesn't drop the rotation.
   Capsules track their words when the grid resizes (the grid is square, so
   %-lengths hold at any angle). */
.wf-capsules{ position:absolute; inset:0; z-index:3; pointer-events:none }
.wf-capsule{ position:absolute; border-radius:999px; transform:var(--wf-cap-t, none);
  animation:wf-cap .35s ease; box-shadow:inset 0 0 0 2px rgba(0,0,0,.08) }
@keyframes wf-cap{ 0%{ transform:var(--wf-cap-t, none) scale(.85); opacity:0 }
  100%{ transform:var(--wf-cap-t, none) scale(1); opacity:1 } }

/* hint/reset buttons reuse .dc-actions styling context; give the word buttons the
   same fast-tap affordances as the chess ones */
.wf-hint,.wf-reset{ touch-action:manipulation; -webkit-tap-highlight-color:transparent }

/* flash variant for a found word */
.dc-flash.win{ color:#fff; background:#1f6d4c; animation:dc-pop .35s ease }

/* post-page wrap (the playable card on /feed/daily-word-<day>/) */
.dw-post{ margin:18px auto; max-width:620px; text-align:center }
.dw-post .dc-prelude{ display:flex; flex-direction:column; align-items:center; gap:0 }
.dw-post .dc-prelude .dc-play{ margin:12px auto 0 }
/* the post page's STATIC blanked quote (a direct child, outside .dc-host) must be
   visible BEFORE Play — the expand-fade rules above are for the in-shell quote —
   and must step aside after Play so the live fill-in quote isn't duplicated */
.dw-post:not(.dc-expanded) > .wf-quote,
.dw-post:not(.dc-expanded) > .wf-author{ opacity:1; transform:none }
.dw-post.dc-expanded > .wf-quote,
.dw-post.dc-expanded > .wf-author{ display:none }

/* reduced motion: snap, don't slide; keep the red wrong-cue visible */
@media (prefers-reduced-motion: reduce){
  .wf-grid-area{ transition:none }
  .dw-card .dc-bar, .dw-card .dc-actions, .dw-card .dc-status, .dw-card .wf-quote, .dw-card .wf-author{ transition:none }
  .dw-card:not(.dc-expanded) .dc-bar, .dw-card:not(.dc-expanded) .dc-actions, .dw-card:not(.dc-expanded) .dc-status,
  .dw-card:not(.dc-expanded) .wf-quote, .dw-card:not(.dc-expanded) .wf-author{ opacity:1; transform:none }
  .wf-goal, .wf-blank-filled, .wf-capsule, .wf-cell.wf-pulse, .wf-cell.wf-bad{ animation:none }
}