/* Star word search (puzzles.html). Shares the bar, meter and buttons with puzzle-hero.css. */

/* The star sits centred in a wide, frameless area; the word bank is pinned to the right. */
.ws-stage {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
  padding: 0;
}

/* The star: a square of letters (empty cells outside the star), with a line layer on top. */
/* The area the star zooms within: full width of its column, as tall as the star, no frame. */
.ws-view {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-block: 4.5%;
}

/* zoomed: the star's area takes all the room and the word bank moves to the far right */
.ws-stage.is-zoomed .ws-bank {
  justify-self: end;
}

.ws-stage.is-zoomed {
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: stretch;
  gap: 24px;
}

.ws-view.is-zoomed {
  overflow: hidden;
  cursor: grab;
}

.ws-box {
  position: relative;
  flex: none;
  width: min(calc(100vw - 48px), calc((100vh - 93px - 250px - var(--pz-peek, 0px)) * 0.98), 620px);
  min-width: 300px;
  aspect-ratio: 1;
  transform-origin: 0 0;

  container-type: inline-size;
  touch-action: none;
  user-select: none;
  cursor: var(--cursor-link, pointer);
}

/* The star of paper the letters are printed on. Slightly larger than the grid, tilted a hair. */
.ws-paper {
  position: absolute;
  left: -10.5%;
  top: -10.5%;
  width: 121%;
  height: 121%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(20, 36, 59, 0.2)) drop-shadow(0 8px 12px rgba(20, 36, 59, 0.14)) drop-shadow(0 26px 34px rgba(20, 36, 59, 0.12));
}

.ws-grid {
  position: absolute;
  inset: 0;
  display: grid;
}

/* Letters pressed into the card: sized from the star itself, a touch lighter than ink, with a
   lit lower lip and a shaded upper edge so they read as debossed rather than printed on top. */
.ws-cell {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  color: rgba(20, 36, 59, 0.74);
  font: 500 calc(100cqw / 19 * 0.74)/1 "Satoshi", sans-serif;
  letter-spacing: 0;
  text-transform: lowercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 -0.6px 0 rgba(20, 36, 59, 0.28);
  mix-blend-mode: multiply;
}

.ws-grid {
  z-index: 1;
}

.ws-marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ws-marks line {
  fill: none;
  stroke-linecap: round;
}

/* dragging and found words: a solid ink capsule under the letters, which turn white */
.ws-marks .is-found {
  stroke: var(--home-ink);
  stroke-width: 0.8;
}

.ws-marks .ws-live {
  stroke: var(--home-ink);
  stroke-width: 0.8;
  opacity: 0;
}

.ws-cell.is-live,
.ws-cell.is-lit {
  color: #fff;
  text-shadow: none;
  mix-blend-mode: normal;
}

.ws-marks .ws-live.is-on {
  opacity: 1;
}

.ws-marks .is-miss {
  stroke: rgba(20, 36, 59, 0.3);
  stroke-width: 0.86;
  animation: ws-fade 0.38s ease forwards;
}

@keyframes ws-fade { to { opacity: 0; } }

/* the word list, like the card's list: little star bullets, crossed off when found */
.ws-bank {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ws-box.is-easing {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Map-style zoom: a small white stack of + and − pinned to the bottom right of the star's area. */
.ws-zoomctl {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--home-rule), 0 6px 16px -8px rgba(20, 36, 59, 0.35);
}

.ws-zoomctl button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: #fff;
  cursor: var(--cursor-link, pointer);
  color: var(--home-ink);
  transition: background 0.18s ease, color 0.18s ease;
}

.ws-zoomctl button + button {
  border-top: 1px solid var(--home-rule);
}

.ws-zoomctl button svg {
  width: 16px;
  height: 16px;
}

.ws-zoomctl button:hover:not(:disabled) {
  background: #f2f4f7;
}

.ws-zoomctl button:active:not(:disabled) {
  background: #e6e9ee;
}

.ws-zoomctl button:disabled {
  color: rgba(20, 36, 59, 0.28);
  cursor: default;
}

.ws-zoomctl button:focus {
  outline: none;
}

.ws-zoomctl button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--home-ink);
}

.ws-bank h3 {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--home-rule);
  color: var(--home-ink);
  font: italic 400 24px/1 "Apple Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  letter-spacing: -0.04em;
}

.ws-list {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 12px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--home-ink);
  font: 400 15px/1.2 "Satoshi", sans-serif;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  transition: color 0.3s ease;
}

.ws-list img {
  width: 13px;
  height: 13px;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.3s ease;
}

.ws-list li.is-found {
  color: rgba(20, 36, 59, 0.38);
  text-decoration: line-through;
  text-decoration-color: rgba(20, 36, 59, 0.38);
}

.ws-list li.is-found img {
  transform: rotate(144deg) scale(1.2);
}

.ws-gem {
  position: absolute;
  z-index: 5;
  object-fit: contain;
  pointer-events: none;
}

@media (max-width: 860px) {
  .ws-stage {
    flex-direction: column;
  }
  .ws-stage {
    grid-template-columns: minmax(0, 1fr);
  }
  .ws-box {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-list img { transition: none; }
}

/* the progress line lives under the word bank in this puzzle */
.ws-bank .pz-status {
  max-width: 24ch;
  margin: 10px 0 0;
  text-align: left;
  text-wrap: pretty;
}

/* ---------- the open notebook: cloth cover, two cream pages, word bank on the left page and
   the star card on the right. The star, letters and capsules keep their own styling. ---------- */
.ws-stage.ws-book,
.ws-stage.ws-book.is-zoomed {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  justify-content: stretch;
  align-items: stretch;
  gap: 0;
  width: min(100%, 980px);
  margin: 6px auto 0;
  padding: 9px;
  border-radius: 10px;
  /* linen cloth cover */
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #8d97a8, #7d8798);
  box-shadow: 0 2px 2px rgba(20, 36, 59, 0.12), 0 28px 40px -26px rgba(20, 36, 59, 0.55);
}

.ws-book > .ws-bank,
.ws-book > .ws-view {
  position: relative;
  background: #fbf8f1;
  box-shadow: 0 1px 1px rgba(20, 36, 59, 0.08);
}

/* left page: word bank on faint ruled lines, gutter shadow on its right edge */
.ws-book > .ws-bank {
  order: 1;
  justify-self: stretch;
  justify-content: center;
  padding: 36px 34px 44px 40px;
  border-radius: 4px 2px 2px 4px;
  background:
    linear-gradient(270deg, rgba(60, 45, 25, 0.16), transparent 34px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(96, 128, 172, 0.13) 31px 32px),
    #fbf8f1;
}

/* right page: the star card, gutter shadow on its left edge */
.ws-book > .ws-view {
  order: 2;
  padding: 3% 4% 5%;
  border-radius: 2px 4px 4px 2px;
  background: linear-gradient(90deg, rgba(60, 45, 25, 0.18), transparent 38px), #fbf8f1;
  overflow: hidden;
}

.ws-book > [data-page]::after {
  content: attr(data-page);
  position: absolute;
  bottom: 14px;
  color: rgba(20, 36, 59, 0.45);
  font: 400 11px/1 "Satoshi", sans-serif;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.ws-book > .ws-bank::after { left: 40px; }
.ws-book > .ws-view::after { right: 24px; }

/* the zoom buttons sit on the right page's lower corner, clear of the page number */
.ws-book .ws-zoomctl {
  right: 18px;
  bottom: 34px;
}

/* the zoomed star stays inside its page */
.ws-book > .ws-view.is-zoomed {
  background: linear-gradient(90deg, rgba(60, 45, 25, 0.18), transparent 38px), #fbf8f1;
}

/* labels in the editorial style: small tracked Satoshi caps */
.ws-book .ws-bank h3 {
  padding-bottom: 10px;
  font: 500 11px/1 "Satoshi", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .ws-stage.ws-book {
    grid-template-columns: minmax(0, 1fr);
  }
  .ws-book > .ws-bank { order: 2; border-radius: 0 0 4px 4px; }
  .ws-book > .ws-view { order: 1; border-radius: 4px 4px 0 0; }
}

.ws-stage.ws-book.is-zoomed > .ws-bank {
  justify-self: stretch;
}

/* Allison's felt star (letters sit on it) and the lace star tucked behind, which opens out */
.ws-felt,
.ws-lace {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.ws-lace {
  z-index: 0;
  transform-origin: 0 0;
  filter: drop-shadow(0 6px 10px rgba(20, 36, 59, 0.1));
}

.ws-felt {
  z-index: 0;
  filter: drop-shadow(0 1px 1px rgba(20, 36, 59, 0.16)) drop-shadow(0 10px 16px rgba(20, 36, 59, 0.12));
}

/* ---------- bigger star: word bank on the left under the title, the star on the right using the
   full height beside the heading ---------- */
.home-page .ws-stage,
.home-page .ws-stage.is-zoomed {
  --ws-lift: 112px;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: stretch;
  align-items: start;
  gap: 0 32px;
  margin-top: calc(-1 * var(--ws-lift));
  padding: 0;
}

.home-page .ws-stage > .ws-bank {
  order: 1;
  justify-self: start;
  margin-top: calc(var(--ws-lift) + 28px);
}

.home-page .ws-stage > .ws-view {
  order: 2;
  justify-self: center;
  padding-block: 0;
}

.home-page .ws-stage .ws-box {
  width: min(calc(100vw - 48px), calc(100vh - 93px - 140px - var(--pz-peek, 0px)), 640px);
  min-width: 320px;
}

@media (max-width: 860px) {
  .home-page .ws-stage,
  .home-page .ws-stage.is-zoomed {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 12px;
  }
  .home-page .ws-stage > .ws-bank { order: 2; margin-top: 20px; }
  .home-page .ws-stage > .ws-view { order: 1; }
  .home-page .ws-stage .ws-box { width: 100%; min-width: 0; }
}

/* the little note about a word, shown when it's found (and when a found word is hovered) */
.ws-note {
  max-width: 30ch;
  min-height: 3.2em;
  margin: 2px 0 0;
  padding: 12px 14px;
  border-radius: 14px 14px 14px 4px;
  background: var(--home-ink);
  color: #fff;
  font: 400 14px/1.4 "Satoshi", sans-serif;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.ws-note.is-on {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.ws-note:empty {
  visibility: hidden;
}

.ws-note__word {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ws-list li.is-found {
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .ws-note.is-on { transition: none; }
}

/* greys instead of navy for the found-word capsules and the word notes */
.home-page .ws-marks .is-found,
.home-page .ws-marks .ws-live { stroke: #393939; }
.home-page .ws-note { background: #393939; }
.home-page .ws-note__word { color: rgba(255, 255, 255, 0.62); }

/* word bank: one word per line, bigger; the found word's note appears just under it */
.home-page .ws-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  max-width: 300px;
}

.home-page .ws-list li {
  flex-wrap: wrap;
  font-size: 19px;
  line-height: 1.2;
}

.home-page .ws-list img {
  width: 15px;
  height: 15px;
}

.home-page .ws-list > .ws-note {
  display: none;
}

.home-page .ws-list li .ws-note {
  flex: 1 0 100%;
  max-width: none;
  min-height: 0;
  margin: 2px 0 4px 23px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #707070;
  font: italic 300 15px/1.35 "Satoshi", sans-serif;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-transform: none;
}

.home-page .ws-list li.is-found .ws-note {
  color: #505050;
}

/* only the word is struck through, never its note */
.home-page .ws-list li.is-found {
  text-decoration: none;
}

.home-page .ws-list li.is-found > span {
  text-decoration: line-through;
  text-decoration-color: rgba(20, 36, 59, 0.38);
}

/* notes stay under every found word, so keep them compact enough for all ten to fit */
.home-page .ws-list {
  gap: 6px;
  max-width: 420px;
}

.home-page .ws-list li {
  font-size: 17px;
}

.home-page .ws-list li .ws-note {
  display: block;
  margin: 1px 0 3px 23px;
  font-size: 13px;
  line-height: 1.3;
}

.home-page .ws-list > .ws-note {
  display: none;
}

/* two columns of five, each word with its note beneath, so all ten notes fit beside the star */
.home-page .ws-list {
  grid-template-columns: repeat(2, minmax(0, 200px));
  gap: 10px 26px;
  max-width: none;
  align-items: start;
}

.home-page .ws-list li .ws-note {
  margin-left: 23px;
  font-size: 12.5px;
}

.home-page .ws-list li.is-found > span.ws-note {
  text-decoration: none;
}

/* two independent columns: a word only gets taller when its own note appears */
.home-page .ws-list {
  display: block;
  columns: 2;
  column-gap: 26px;
  max-width: 430px;
}

.home-page .ws-list li {
  break-inside: avoid;
  margin-bottom: 10px;
}

.home-page .ws-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 200px));
  align-items: start;
  gap: 0 26px;
  columns: auto;
}

.home-page .ws-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-page .ws-list li {
  margin-bottom: 0;
}

/* navy ink pressed into the felt for dragging and found words */
.home-page .ws-marks .is-found,
.home-page .ws-marks .ws-live {
  stroke: #1f2f48;
}

/* the ink sinks into the felt: the felt's texture shows through it */
.home-page .ws-marks {
  mix-blend-mode: multiply;
}

.home-page .ws-marks .is-found,
.home-page .ws-marks .ws-live {
  stroke: #24344f;
}

/* a deeper, matte ink for the letterpress impression; white letters sit slightly sunk too */
.home-page .ws-marks .is-found,
.home-page .ws-marks .ws-live {
  stroke: #1d2b44;
}

.home-page .ws-cell.is-live,
.home-page .ws-cell.is-lit {
  text-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.45);
  transform: translateY(0.5px);
}

.home-page .ws-marks .is-found,
.home-page .ws-marks .ws-live {
  stroke: #22324d;
  stroke-opacity: 0.94;
}