/* Order the Verse. Builds on styles.css (site header, colors, .btn) and home.css (.home, h2).
   The verse and its words are always Hebrew, right to left, on both language pages. */

.ps-page-title { font-size: clamp(1.7rem, 4.6vw, 2.4rem); line-height: 1.15; margin: 12px 0 8px; }
.ps-lede { color: var(--ink-soft); line-height: 1.6; max-width: 620px; margin: 0 0 18px; }

.ps-game { max-width: 620px; margin: 0 auto; }

/* the week: seven days, the solved ones with their stars */
.ps-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.ps-day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 54px; padding: 6px 2px; font: inherit; color: var(--ink-soft);
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; cursor: pointer;
  touch-action: manipulation;
}
.ps-day .d { font-weight: 700; font-size: 0.95rem; }
.ps-day .s { font-size: 0.72rem; letter-spacing: 1px; line-height: 1; min-height: 0.8rem; }
.ps-day.today { border-color: var(--gold-deep); color: var(--ink); }
.ps-day.done { color: var(--ink); }
.ps-day.done .s { color: var(--gold-deep); }
.ps-day[aria-current="true"] { background: var(--panel-solid); box-shadow: inset 0 -3px 0 var(--gold-deep); }
.ps-day:disabled { cursor: default; opacity: 0.55; }
.ps-day.rest:disabled { opacity: 0.38; }
.ps-day:not(:disabled):hover { border-color: var(--gold); }
.ps-day:focus-visible, .ps-tile:focus-visible, .ps-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.ps-board {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px clamp(14px, 4vw, 24px) 20px; min-height: 320px;
}
.ps-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: var(--ink-soft); font-size: 0.92rem; }
.ps-where { font-weight: 700; color: var(--ink); margin-inline-end: auto; }
.ps-clock { font-variant-numeric: tabular-nums; direction: ltr; }

/* the verse being built: placed words, then a short line for each word still missing */
.ps-game .ps-verse {
  font-family: "Noto Serif Hebrew", "SBL Hebrew", "Frank Ruehl", "Times New Roman", serif;
  font-size: clamp(1.4rem, 5.4vw, 1.85rem); line-height: 1.9; color: var(--ink);
  text-align: start; margin: 14px 0 6px;
}
.ps-verse .slot { display: inline-block; width: 1.7em; height: 0.2em; margin: 0 0.12em; border-bottom: 3px solid var(--border); border-radius: 2px; vertical-align: baseline; }
.ps-verse .w.new { animation: ps-in 0.32s ease-out; }
.ps-game .ps-verse.whole { margin-bottom: 2px; }
.ps-verse.glow { animation: ps-glow 1.1s ease-out; }
@keyframes ps-in { from { color: var(--gold); transform: translateY(6px); opacity: 0.2; } }
@keyframes ps-glow { 0% { color: var(--gold); text-shadow: 0 0 18px rgba(255, 210, 74, 0.55); } 100% { text-shadow: none; } }
.ps-verse .w { display: inline-block; }
.ps-ref { display: inline-block; color: var(--gold-deep); font-size: 0.95rem; text-decoration: none; margin-bottom: 4px; }
.ps-ref:hover { text-decoration: underline; }

/* the shuffled words */
.ps-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.ps-tile {
  font-family: "Noto Serif Hebrew", "SBL Hebrew", "Frank Ruehl", "Times New Roman", serif;
  font-size: clamp(1.25rem, 4.8vw, 1.5rem); line-height: 1.5; color: var(--ink);
  background: var(--panel-solid); border: 1px solid var(--border); border-bottom-width: 3px; border-radius: 12px;
  min-height: 54px; padding: 6px 16px; cursor: pointer; touch-action: manipulation;
  transition: border-color 0.12s ease, transform 0.08s ease;
}
.ps-tile:hover { border-color: var(--gold); }
.ps-tile:active { transform: translateY(2px); }
.ps-tile.gone { visibility: hidden; }
.ps-tile.no { border-color: var(--red); animation: ps-no 0.34s ease; }
.ps-tile.hint { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 210, 74, 0.35); animation: ps-hint 0.9s ease-in-out infinite alternate; }
@keyframes ps-no { 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
@keyframes ps-hint { to { box-shadow: 0 0 0 6px rgba(255, 210, 74, 0.12); } }

.ps-actions { display: flex; justify-content: center; margin-top: 16px; }
.ps-hint { padding: 10px 22px; min-height: 46px; }
.ps-note { color: var(--ink-dim); font-size: 0.88rem; text-align: center; margin: 12px 0 0; }

/* after the verse is solved */
.ps-result { text-align: center; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.ps-result h2 { margin: 0; font-size: 1.25rem; }
.ps-stars { margin: 4px 0 0; font-size: 2rem; line-height: 1.2; letter-spacing: 4px; }
.ps-stars .on { color: var(--gold); }
.ps-stars .off { color: var(--border); }
.ps-line { margin: 2px 0 0; color: var(--ink-soft); }
.ps-game .ps-streak { margin: 6px 0 0; font-weight: 700; color: var(--ink); min-height: 1.5em; }
.ps-next { margin: 12px 0 0; color: var(--ink-dim); font-size: 0.92rem; }
.ps-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 12px; }
.ps-row .btn { text-decoration: none; min-height: 48px; padding: 12px 20px; }
.ps-link { font: inherit; color: var(--ink-soft); background: none; border: 0; padding: 12px 8px; min-height: 44px; cursor: pointer; text-decoration: underline; }
.ps-link:hover { color: var(--ink); }

.ps-msg { text-align: center; padding: 48px 8px; }
.ps-msg p { margin: 0 0 14px; font-size: 1.1rem; line-height: 1.6; color: var(--ink); }
.ps-wait { text-align: center; color: var(--ink-dim); padding: 60px 0; margin: 0; }
.ps-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* under the game */
.ps-about { max-width: 720px; margin: 34px auto 0; }
.ps-about ul { padding-inline-start: 22px; margin: 0 0 8px; }
.ps-about li { margin-bottom: 6px; line-height: 1.6; }
.ps-credit { color: var(--ink-dim); font-size: 0.9rem; line-height: 1.6; }

@media (max-width: 380px) {
  .ps-week { gap: 4px; }
  .ps-day { min-height: 50px; border-radius: 10px; }
  .ps-tiles { gap: 8px; }
  .ps-tile { padding: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-verse .w.new, .ps-verse.glow, .ps-tile.no, .ps-tile.hint { animation: none; }
  .ps-tile { transition: none; }
}