/* sopa de letras · the board and what is around it. Tokens and shared pieces come from /shared/base.css. */
:root{
  --word:#1F3F73;  --word-soft:rgba(31,63,115,.15);      /* a found word: the ballpoint circles it */
  --phrase:#8A5E12; --phrase-soft:rgba(138,94,18,.18);   /* the hidden phrase: ochre */
  --trace:#6B675F;  --trace-soft:rgba(107,103,95,.2);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --word:#8FB0E6; --word-soft:rgba(143,176,230,.2);
    --phrase:#D7AC58; --phrase-soft:rgba(215,172,88,.22);
    --trace:#9B968C; --trace-soft:rgba(155,150,140,.25);
  }
}
:root[data-theme="dark"]{
  --word:#8FB0E6; --word-soft:rgba(143,176,230,.2);
  --phrase:#D7AC58; --phrase-soft:rgba(215,172,88,.22);
  --trace:#9B968C; --trace-soft:rgba(155,150,140,.25);
}

.main{gap:18px;}

/* ---------- the brand: "letras" circled in ballpoint, as you circle a word you found ---------- */
.brand-word{white-space:nowrap;}
.brand-word .circled{
  display:inline-block; padding:.02em .26em .1em; margin-left:-.04em;
  border:1.5px solid var(--accent); border-radius:999px; transform:rotate(-4deg);
}
a.brand:hover .circled{background:var(--word-soft);}

.day-bar{display:flex; align-items:baseline; justify-content:space-between; gap:16px; font-size:13px; color:var(--muted);}
.day-bar .date::first-letter{text-transform:uppercase;}

.theme{display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;}
.progress{margin:6px 0 0; font-size:13.5px; color:var(--muted);}
.progress b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums;}
.label{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.theme-title{margin:0; font-family:var(--serif); font-size:clamp(24px,6.4vw,30px); line-height:1.25; text-wrap:balance;}

/* the line being drawn, or the last message */
.trace{min-height:30px; display:flex; align-items:baseline; justify-content:center; gap:12px; margin-bottom:-8px;}
.trace-word:empty{display:none;}
.trace-word{font-family:var(--mono); font-weight:600; font-size:19px; letter-spacing:.12em; color:var(--ink);}
.message{font-size:14px; color:var(--muted);}
.message.good{color:var(--word);}
.message.gold{color:var(--phrase);}

/* ---------- the board: letters on a CSS grid; the circles around the words are an SVG underneath ---------- */
.board-wrap{display:flex; justify-content:center;}
.board{
  --cols:10; --rows:10;
  position:relative; width:min(100%, 440px); aspect-ratio:var(--cols)/var(--rows);
  display:grid; grid-template-columns:repeat(var(--cols),1fr); grid-template-rows:repeat(var(--rows),1fr);
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.lines{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible;}
.lines line{stroke-linecap:round;}
.lines .word{stroke:var(--word-soft); stroke-width:.74;}
.lines .now{stroke:var(--trace-soft); stroke-width:.74;}
.lines .hint{fill:none; stroke:var(--word); stroke-width:.05; stroke-dasharray:.1 .08;}

.cell{
  position:relative; z-index:1; display:grid; place-items:center; padding:0; border:0;
  background:transparent; cursor:pointer; border-radius:50%;
  font-family:var(--mono); font-weight:600; font-size:clamp(14.5px,4.4vw,20px); line-height:1; color:var(--ink);
  transition:color .15s;
}
.cell:focus-visible{outline:2px solid var(--accent); outline-offset:-3px;}
.cell.on{color:var(--ink);}
.cell.start{box-shadow:inset 0 0 0 1.5px var(--trace);}
.cell.word{color:var(--word);}
.cell.leftover{color:var(--phrase); background:var(--phrase-soft);}
.board.done .cell:not(.leftover){color:var(--muted);}
.board.done .cell.word{color:var(--word); opacity:.75;}
.board.shake{animation:shake .3s;}
.board.pop .cell.fresh{animation:pop .45s cubic-bezier(.34,1.56,.64,1);}
.board.reveal .cell.leftover{animation:pop .5s cubic-bezier(.34,1.56,.64,1) both; animation-delay:calc(var(--k,0) * 45ms);}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.2)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.board.shake,.board.pop .cell.fresh,.board.reveal .cell.leftover{animation:none} .cell{transition:none}}

/* ---------- the list: words cross out as they are found ---------- */
.words{
  list-style:none; margin:0 auto; padding:0; width:min(100%, 440px);
  display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:4px 16px;
  font-family:var(--mono); font-size:14px; letter-spacing:.05em;
}
.words li{padding:2px 0; color:var(--ink);}
.words li.found{color:var(--muted); text-decoration:line-through; text-decoration-color:var(--word); text-decoration-thickness:1.5px;}
.words li.hinted{color:var(--word);}

/* ---------- the hidden phrase: boxes grouped by word, filled at the end (or when you guess it) ---------- */
section.phrase{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; border-top:1px solid var(--line); padding-top:16px;}
.phrase-note{margin:0; font-size:13.5px; color:var(--muted);}
.slots{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; max-width:440px;}
.slot-word{display:inline-flex; gap:3px;}
.slot{
  width:22px; height:28px; display:grid; place-items:center; border-bottom:1.5px solid var(--line);
  font-family:var(--mono); font-weight:600; font-size:16px; color:var(--phrase);
}
.slot.filled{border-bottom-color:var(--phrase);}
.phrase-text{margin:2px 0 0; font-family:var(--serif); font-size:19px; color:var(--ink);}
.phrase-text:empty{display:none;}
.guess{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center;}
.guess input{
  font:inherit; font-family:var(--mono); font-size:15px; letter-spacing:.06em; text-transform:uppercase;
  padding:7px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); width:min(100%, 280px);
}
.guess input:focus{outline:2px solid var(--accent); outline-offset:1px;}
@media (max-width:420px){.slot{width:18px; height:24px; font-size:14px;} .slots{gap:6px 10px;}}

.toolbar{display:flex; align-items:center; gap:12px; justify-content:center; flex-wrap:wrap;}

.result-line{margin:0; font-size:15px;}
.empty{margin:0; color:var(--muted);}
.empty a{color:var(--accent);}

/* how-to page: a tiny board drawn with the same classes */
.mini{--cols:6; --rows:4; width:min(100%, 240px); margin:6px 0;}
.mini .cell{cursor:default; font-size:15px;}
.archive-intro{margin:0; font-size:14.5px; color:var(--muted);} .archive-intro a{color:var(--accent);}

/* phone: "sopa de letras" is longer than the other brands; on inner pages it shares the row with three links */
@media (max-width:420px){
  .header .brand{font-size:19px;}
  .nav{gap:10px;}
  .nav-link{font-size:12.5px;}
}