/* Daily Word Search: home, the letter board, the word list. Big type first. */
body{background:var(--lacquer)}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:radial-gradient(120% 90% at 50% 0%,#FFFDF7 0%,var(--lacquer) 70%)}

/* home */
.home{gap:1em;padding:1.2em}
.home-head,.home-body{display:flex;flex-direction:column;align-items:center;gap:.7em}
.home-icon{width:72px;height:72px;border-radius:18px;box-shadow:0 6px 18px rgba(30,60,100,.2)}
.home .title{font-size:clamp(2.3em,10vw,3.8em);line-height:1.02;text-wrap:balance}
.home .tagline{color:var(--ink-soft);text-shadow:none;font-size:1.15em}
.today{display:flex;flex-direction:column;align-items:center;background:#fff;border:1px solid var(--hair);border-radius:1em;padding:.55em 1.4em;min-width:15em}
.today b{font-size:1.3em}
.today small{color:var(--ink-soft);font-size:.95em}
.home .choices{justify-content:center}
.home .choice{font-size:1.05em;min-width:5.4em}
.home .links{flex-wrap:wrap;gap:0 .3em}
.home .link{font-size:1.05em;min-height:44px;color:var(--brass-lo)}
@media (max-height:480px) and (min-width:520px){
  .home{flex-direction:row;justify-content:center;gap:2em;padding:.8em 1.2em}
  .home-head{max-width:40%}
  .home-icon{width:56px;height:56px}
  .home .title{font-size:clamp(2em,6vw,2.8em)}
  .home .tagline{font-size:1em}
  .home-body{gap:.5em}
  .today{padding:.35em 1.2em}
  .home .pill{padding:.5em 2em;min-height:48px}
}
@media (max-height:600px) and (max-width:519px){.home-icon{display:none}.home{gap:.6em}}

/* play: bar, board, words (side by side when wide) */
.play{display:flex;flex-direction:column;padding:0 max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.bar{padding:max(8px,env(safe-area-inset-top)) 0 4px;gap:.6em}
.icon-btn{width:48px;height:48px;flex:none;border-radius:14px;border:1px solid var(--hair);background:#fff;display:grid;place-items:center;padding:0;box-shadow:0 2px 6px rgba(30,40,60,.08)}
.icon-btn svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:active{transform:translateY(1px)}
.icon-btn:focus-visible,.board:focus-visible{outline:3px solid var(--pick);outline-offset:2px}
.info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.info b{font-size:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info small{color:var(--ink-soft);font-size:.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clock{font:700 1.15em/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.clock.off{visibility:hidden}
.boardbox{flex:1;min-height:0;display:grid;place-items:center;position:relative}
.board{position:relative;display:grid;grid-template-columns:repeat(var(--n),var(--cell));grid-auto-rows:var(--cell);touch-action:none;user-select:none;-webkit-user-select:none;
  background:#FFFDF7;border-radius:14px;box-shadow:0 0 0 1px var(--hair),0 8px 24px rgba(30,40,60,.12);padding:6px;cursor:pointer}
.board svg.marks{position:absolute;left:6px;top:6px;width:calc(var(--cell)*var(--n));height:calc(var(--cell)*var(--n));pointer-events:none;overflow:visible}
.cell{position:relative;display:grid;place-items:center;font:800 calc(var(--cell)*.6)/1 var(--sans);color:var(--ink);pointer-events:none;border-radius:50%;transition:transform .15s,color .2s}
.cell.cur{box-shadow:inset 0 0 0 3px var(--pick)}
.cell.hint{animation:hintpulse 1s ease-in-out 2}
@keyframes hintpulse{50%{transform:scale(1.35);color:var(--vermilion)}}
.board.won .cell{animation:wave .6s ease-out both;animation-delay:calc(var(--d)*18ms)}
@keyframes wave{40%{transform:translateY(-18%) scale(1.15)}}
.board.miss{animation:nudge .32s}
@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.marks .found{fill:none;stroke-linecap:round;stroke-width:.74;opacity:.55;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .35s ease-out}
.marks .found.new{stroke-dashoffset:1}
.marks .shown{fill:none;stroke-linecap:round;stroke-width:.7;opacity:.6;stroke:#B8BEC8;stroke-dasharray:.12 .1}
.marks .sel{fill:none;stroke-linecap:round;stroke-width:.8;stroke:var(--brass-hi);opacity:.45}
.marks .sel.bad{stroke:var(--vermilion);opacity:.4;transition:opacity .35s}
.marks .anchor{fill:var(--pick);opacity:.55}

.words{display:flex;flex-direction:column;gap:.3em;padding:.4em 0 0;min-height:0}
.count{display:flex;align-items:baseline;justify-content:space-between;gap:.6em;font-size:1em}
.count b{font-size:1.1em;white-space:nowrap}
#say{color:var(--ink-soft);font-size:.95em;text-align:right;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#say.good{color:var(--jade-deep);font-weight:700}
#wordList{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35em .4em;overflow:auto;min-height:0}
#wordList li{font:800 1.05em/1 var(--sans);letter-spacing:.06em;padding:.45em .7em;border-radius:999px;background:#fff;border:1px solid var(--hair);color:var(--ink)}
#wordList li.got{background:var(--c);border-color:transparent;color:#1D2230;text-decoration:line-through;text-decoration-thickness:2px;animation:pop .35s}
#wordList li.missed{color:var(--vermilion);border-color:var(--vermilion)}
@keyframes pop{50%{transform:scale(1.18)}}
.play.tight #wordList li{font-size:.9em;padding:.35em .55em}

.play.wide{display:grid;grid-template-columns:var(--bw) minmax(0,540px);justify-content:center;grid-template-rows:auto minmax(0,1fr);column-gap:12px}
.play.wide .boardbox{grid-row:1/3;grid-column:1}
.play.wide .bar{grid-column:2}
.play.wide .words{grid-column:2;padding-bottom:4px}

/* cards */
.card .brand{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.75em;color:var(--brass-lo);text-align:center;margin:-.2em 0 .2em}
.card .big{text-align:center;font-size:1.15em;margin:0 0 .4em}
.card p{margin:.2em 0 .6em;font-size:1.05em}
.card .how p{margin:0 0 .55em}
.card .best .row{cursor:default}
.archive .rows{margin-top:.6em}
.archive .row b{font-size:1.05em}
.marks-done{font-weight:800;letter-spacing:.15em;color:var(--jade);white-space:nowrap}
.marks-done i{font-style:normal;color:#C4C9D1}
#burst{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
.pill.soft{background:#fff;color:var(--brass-lo);box-shadow:0 0 0 2px var(--brass) inset,0 3px 0 rgba(30,60,100,.18)}
.card .actions .pill{min-width:9em}
@media (min-width:1000px) and (min-height:700px){#wordList li{font-size:1.25em}.info b{font-size:1.5em}}
@media (max-height:480px){.card .stats{margin:0;gap:1.1em;font-size:.85em}.card .stats b{font-size:1.35em}.card .big{margin:0 0 .2em;font-size:1em}.card .brand{margin:0}}