/* The web daily's board, keys and week strip. Sizes come from --cell (set by daily.js from the space available). */
.daily-card { background: var(--card); border: 1px solid var(--card-edge); border-bottom-width: 5px; border-radius: 1.5rem; padding: 1.25rem; box-shadow: var(--shadow); }
#daily { min-height: 34rem; }
.pz-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; max-width: 54rem; margin: 0 auto; }

.pz-bar { display: flex; align-items: center; gap: 0.6rem; width: 100%; flex-wrap: wrap; }
.pz-title { flex: 1 1 auto; min-width: 8rem; }
.pz-title h3 { font-size: 1.6rem; }
.pz-sub { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--muted); }
.pz-timer { font: 700 1.05rem/1 var(--mono); font-variant-numeric: tabular-nums; min-width: 3.4rem; text-align: right; }
.pz-btn { font: 800 0.92rem/1 var(--sans); color: var(--ink); background: transparent; border: 2px solid var(--card-edge); border-radius: 999px; padding: 0.55rem 0.95rem; cursor: pointer; }
.pz-btn:hover:not(:disabled) { border-color: var(--tile-edge); }
.pz-btn:disabled { opacity: 0.45; cursor: default; }
.pz-btn-quiet { border-color: transparent; color: var(--muted); padding-inline: 0.5rem; }
.pz-btn-quiet:hover:not(:disabled) { border-color: transparent; color: var(--ink); text-decoration: underline; }
.pz-mode { margin: 0; width: 100%; font-size: 0.92rem; color: var(--muted); }
.pz-mode b { color: var(--ink); }
.pz-hint { margin: 0; font-size: 0.9rem; color: var(--muted); text-align: center; min-height: 1.4em; }
.pz-error { padding: 3rem 1rem; text-align: center; color: var(--muted); }

/* board */
.pz-board {
  --cell: 44px; --gap: 4px;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: calc(var(--cell) * 0.16);
  row-gap: calc(var(--cell) * 0.12);
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.pz-cols { display: grid; grid-template-columns: repeat(var(--n), var(--cell)); column-gap: var(--gap); align-items: end; }
.pz-rows { display: grid; grid-template-rows: repeat(var(--n), var(--cell)); row-gap: var(--gap); justify-items: end; }
.pz-grid { display: grid; grid-template-columns: repeat(var(--n), var(--cell)); grid-auto-rows: var(--cell); gap: var(--gap); }

.clue { font: 700 calc(var(--cell) * 0.4)/1 var(--mono); color: var(--ink); border-radius: calc(var(--cell) * 0.16); transition: background-color 0.15s, color 0.15s; }
.clue-letters span.used { color: var(--struck); text-decoration: line-through; text-decoration-thickness: 2px; }
.clue-count { font: 800 calc(var(--cell) * 0.3)/1 var(--sans); color: var(--count); }
.clue-col { display: flex; flex-direction: column; align-items: center; gap: calc(var(--cell) * 0.1); padding: calc(var(--cell) * 0.14) 0; }
.clue-col .clue-letters { display: flex; flex-direction: column; align-items: center; gap: calc(var(--cell) * 0.08); }
.clue-row { display: flex; align-items: center; gap: calc(var(--cell) * 0.16); padding: 0 calc(var(--cell) * 0.16); height: var(--cell); letter-spacing: 0.04em; white-space: nowrap; }
.clue.is-on { background: var(--clue-on); }
.clue.is-spent:not(.is-on) .clue-letters { opacity: 0.85; }
.clue.is-over .clue-letters, .clue.is-over .clue-letters span.used { color: var(--err); }
.clue.shake { animation: shake 0.36s ease-in-out; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.cell {
  width: var(--cell); height: var(--cell); padding: 0; margin: 0;
  display: grid; place-items: center;
  font: 700 calc(var(--cell) * 0.5)/1 var(--mono); color: var(--tile-ink);
  background: var(--well); border: 0; border-radius: calc(var(--cell) * 0.16);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cell.is-filled { background: var(--tile); border-bottom: calc(var(--cell) * 0.07) solid var(--tile-edge); }
.cell.is-line { background: var(--inline); }
.cell.is-line.is-filled { border-bottom-color: var(--inline-edge); }
.cell.is-sel { box-shadow: inset 0 0 0 calc(var(--cell) * 0.06) var(--accent); background: var(--inline); }
.cell.is-sel:not(.is-filled) { background: var(--tile); }
.cell.is-blank, .cell.is-marked {
  background: repeating-linear-gradient(135deg, var(--blank) 0 calc(var(--cell) * 0.1), var(--blank-stripe) calc(var(--cell) * 0.1) calc(var(--cell) * 0.15));
  border-bottom: 0;
}
.cell.is-blank { cursor: default; }
.cell.is-marked { opacity: 0.55; }
.cell.is-marked.is-sel { opacity: 0.8; box-shadow: inset 0 0 0 calc(var(--cell) * 0.06) var(--accent); }
.cell.is-wrong { background: color-mix(in srgb, var(--err) 22%, var(--tile)); color: var(--err); border-bottom-color: var(--err); }
.cell.is-wrong::after { content: ""; }
.cell:disabled { cursor: default; }
.cell:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.cell.is-solved.is-filled { color: var(--tile-solved); background: var(--tile); border-bottom-color: var(--tile-edge); }
:root[data-theme="dark"] .cell.is-solved.is-filled { color: #23406a; }
.is-waving .cell { animation: flip 0.5s cubic-bezier(.3,.7,.3,1.3) both; animation-delay: var(--d); }
@keyframes flip { 0% { transform: rotateX(0); } 45% { transform: rotateX(90deg) scale(0.92); } 100% { transform: rotateX(0); } }

/* keyboard: --kw is a key's width, set by daily.js so the keyboard is as wide as the board; never smaller than a
   phone's keys */
.kb { --kw: 3.1rem; display: flex; flex-direction: column; gap: max(0.4rem, calc(var(--kw) * 0.12)); width: 100%; max-width: 34rem; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.kb[hidden] { display: none; }
/* computers type on their own keyboard; the board gets the room instead (daily.js sizes it) */
@media (hover: hover) and (pointer: fine) { .kb { display: none; } }
.kb-row { display: flex; gap: max(0.25rem, calc(var(--kw) * 0.1)); justify-content: center; }
.key {
  flex: 1 1 0; min-width: 0; max-width: var(--kw); height: max(2.85rem, calc(var(--kw) * 1.15)); padding: 0;
  font: 400 max(1.15rem, calc(var(--kw) * 0.44))/1 var(--serif); color: var(--ink);
  background: var(--key); border: 1px solid var(--key-edge); border-bottom-width: 4px; border-radius: max(0.6rem, calc(var(--kw) * 0.18));
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.key:active { transform: translateY(2px); border-bottom-width: 2px; }
.key-del { flex: 1.6 1 0; max-width: calc(var(--kw) * 1.55); font: 800 max(0.95rem, calc(var(--kw) * 0.3))/1 var(--sans); }
.key-blank { flex: 1.6 1 0; max-width: calc(var(--kw) * 1.55); position: relative; }
.key-blank::before { content: ""; position: absolute; inset: 28% 32%; border-radius: 4px; background: repeating-linear-gradient(135deg, var(--blank) 0 4px, var(--blank-stripe) 4px 6px); }
.key-blank:disabled { opacity: 0.35; cursor: default; }

/* solved */
.pz-done { width: 100%; text-align: center; padding: 1.25rem 0.5rem 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.pz-done[hidden] { display: none; }
.pz-done .mug { font-size: 4rem; margin-bottom: 0.25rem; }
.pz-done h3 { font-size: 2rem; }
.pz-done p { margin: 0; }
.pz-done-time { font: 700 1.1rem/1.4 var(--sans); }
.pz-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.9rem; }

/* week strip */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; margin-bottom: 1rem; }
.wk {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.55rem 0.2rem 0.5rem;
  background: transparent; border: 2px solid transparent; border-radius: 0.9rem;
  font: 700 0.78rem/1.2 var(--sans); color: var(--ink); cursor: pointer; position: relative;
}
.wk:hover:not(:disabled) { background: var(--paper-2); }
.wk:disabled { opacity: 0.45; cursor: default; }
.wk[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent); }
.wk-day { font: 800 0.7rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wk.is-today .wk-day { color: var(--count); }
.wk-size { font: 400 1.05rem/1.2 var(--serif); }
.wk-mode { font-size: 0.72rem; color: var(--muted); }
.wk.is-solved::after { content: "✓"; position: absolute; top: -0.45rem; right: -0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; display: grid; place-items: center; font: 800 0.7rem/1 var(--sans); background: var(--ok); color: var(--paper); }
@media (max-width: 480px) {
  .week { gap: 0.15rem; }
  .wk { padding-inline: 0; }
  .wk-mode { font-size: 0.62rem; }
  .daily-card { padding: 0.9rem 0.6rem; border-radius: 1.1rem; }
  .pz-title h3 { font-size: 1.35rem; }
}