/* escondidas · 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,.16);      /* a found theme word: ballpoint blue */
  --span:#8A5E12;  --span-soft:rgba(138,94,18,.2);       /* the spangram: ochre */
  --trace:#6B675F;                                       /* the word being traced */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --word:#8FB0E6; --word-soft:rgba(143,176,230,.2);
    --span:#D7AC58; --span-soft:rgba(215,172,88,.22);
    --trace:#9B968C;
  }
}
:root[data-theme="dark"]{
  --word:#8FB0E6; --word-soft:rgba(143,176,230,.2);
  --span:#D7AC58; --span-soft:rgba(215,172,88,.22);
  --trace:#9B968C;
}

.main{gap:18px;}

/* ---------- the brand: the a hides behind the d and leans out to peek ----------
   The d paints the page colour behind itself, so it covers the a in light and dark alike. */
.brand-word{white-space:nowrap;}
.brand-word .front{position:relative; z-index:1; background:var(--bg);}
.brand-word .peek{
  position:relative; z-index:0; display:inline-block; margin-left:-.13em;
  color:var(--muted); transform:rotate(-12deg); transform-origin:50% 100%;
}
.brand-word .after{position:relative; z-index:1;}
a.brand:hover .peek{color:var(--accent);}
.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;}

/* the theme and the count sit centred over the board: the count belongs to the game, not to the date */
.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 word being traced, or the last message */
.trace{min-height:30px; display:flex; align-items:baseline; justify-content:center; gap:12px; margin-bottom:-6px;}
.trace-word:empty{display:none;}
.trace-word{font-family:var(--mono); font-weight:600; font-size:20px; letter-spacing:.12em; color:var(--ink);}
.message{font-size:14px; color:var(--muted);}
.message.good{color:var(--word);}
.message.span{color:var(--span);}

/* ---------- the board: letters are buttons on a CSS grid; the lines are an SVG underneath ---------- */
.board-wrap{display:flex; justify-content:center;}
.board{
  --cols:6; --rows:8;
  position:relative; width:min(100%, 380px); 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 polyline{fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:.3;}
.lines .word{stroke:var(--word-soft);}
.lines .span{stroke:var(--span-soft);}
.lines .now{stroke:var(--line); stroke-width:.24;}
.lines .shown{stroke:var(--word); stroke-width:.06; stroke-dasharray:.12 .12;}

.cell{
  position:relative; z-index:1; margin:auto; width:78%; aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; padding:0; border:0; background:transparent; cursor:pointer;
  font-family:var(--mono); font-weight:600; font-size:clamp(17px,5.2vw,22px); color:var(--ink);
  transition:background-color .12s, color .12s;
}
.cell:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.cell.on{background:var(--well); box-shadow:inset 0 0 0 1.5px var(--trace);}
.cell.word{background:var(--word-soft); color:var(--word); cursor:default;}
.cell.span{background:var(--span-soft); color:var(--span); cursor:default;}
.cell.hinted{box-shadow:inset 0 0 0 1.5px var(--word); }
.cell.hinted::after{content:""; position:absolute; inset:-3px; border-radius:50%; border:1px dashed var(--word); opacity:.6;}
.cell.first{background:var(--word-soft);}   /* where the hinted word starts */
.board.shake{animation:shake .3s;}
.board.pop .cell.fresh{animation:pop .45s cubic-bezier(.34,1.56,.64,1);}
@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.16)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.board.shake,.board.pop .cell.fresh{animation:none} .cell{transition:none}}

/* ---------- hint: three dots fill as you find words outside the theme ---------- */
.toolbar{display:flex; align-items:center; gap:14px; justify-content:center; flex-wrap:wrap;}
.hint{display:inline-flex; align-items:center; gap:8px;}
.meter{display:inline-flex; gap:3px;}
.meter i{width:6px; height:6px; border-radius:50%; border:1px solid var(--muted); display:block;}
.meter i.full{background:var(--accent); border-color:var(--accent);}
.hint:not(:disabled){border-color:var(--accent);}
/* "?" next to the hint: shows, on demand, how the next hint is earned */
.qmark{
  width:24px; height:24px; flex:none; border-radius:50%; padding:0; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; line-height:1; color:var(--muted);
  background:none; border:1px solid var(--line);
}
.qmark:hover,.qmark[aria-expanded="true"]{color:var(--ink); border-color:var(--muted);}
.qmark:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.hint-note{flex-basis:100%; margin:0; text-align:center; font-size:13.5px; color:var(--muted);}

.found{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; font-family:var(--mono); font-size:13px; letter-spacing:.06em;}
.found li{color:var(--word);}
.found li.span{color:var(--span); font-weight:600;}

.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:4; --rows:2; width:180px; margin:6px 0;}