/* Cascade — the board (the signature element): a column of word tiles stepping down and to the right, one row
   per word; a right answer drops into place. Everything else is Empire UI defaults. Classes are prefixed cas-. */

.cas-board { max-width: 100%; }
.cas-col { --cas-step: 0rem; }
@media (min-width: 640px) { .cas-col, .cas-play { --cas-step: 0.85rem; } }

.cas-head { margin-bottom: 1.25rem; }
.cas-title { margin: 0; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.1; }
.cas-sub { margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: 0.9375rem; }
.cas-sub > span { display: inline-flex; align-items: center; gap: 0.2em; }
.cas-sub svg { display: inline; width: 0.9em; height: 0.9em; color: var(--brand); }
.cas-intro { max-width: 52ch; color: var(--muted-foreground); }

.cas-col { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.cas-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin-inline-start: calc(var(--i) * var(--cas-step)); }
.js .cas-row { scroll-margin-block: 5rem 15rem; }
.cas-tiles { display: flex; gap: 0.25rem; }
.cas-tile {
  width: clamp(1.85rem, 7.2vw, 2.4rem);
  height: clamp(2.1rem, 8vw, 2.7rem);
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 0.375rem;
  background: var(--card); color: var(--foreground);
  font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.1rem, 4.4vw, 1.4rem); line-height: 1;
  text-transform: uppercase;
}
.cas-tile.is-blank { border-style: dashed; background: transparent; }
.cas-row.is-current .cas-tile.is-blank { border-color: var(--foreground); border-style: solid; }
/* The first letter of every word is shown from the start (so a chain can be reasoned out before typing). */
.cas-tile.is-first { background: var(--muted); }
.cas-tile.is-hint { color: var(--brand); border-color: var(--brand); }
.cas-row.is-top .cas-tile { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.cas-row.is-future { opacity: 0.55; }
.cas-tally { font-size: 0.8125rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* The fall: a solved row's tiles drop in one after another and settle. */
.cas-row.is-new .cas-tile { animation: cas-drop 0.5s var(--ease-out, ease-out) both; animation-delay: calc(var(--j) * 45ms); }
@keyframes cas-drop {
  0% { transform: translateY(-1.6rem); opacity: 0; }
  65% { transform: translateY(0.18rem) scaleY(0.9); opacity: 1; }
  100% { transform: none; }
}
/* A refused guess shakes the input, not the board. */
.cas-board[data-just="wrong"] .cas-row.is-current, .cas-board[data-just="phrase"] .cas-row.is-current, .cas-board[data-just="length"] .cas-row.is-current { animation: cas-shake 0.4s; }
@keyframes cas-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* The mark: one dot per solved row, the same four states as the share card. */
.cas-mark { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 999px; flex: none; }
.cas-mark.is-clean { background: var(--success); }
.cas-mark.is-missed { background: oklch(0.8 0.17 90); }
.cas-mark.is-hinted { background: oklch(0.72 0.17 55); }
.cas-mark.is-given { background: var(--muted-foreground); opacity: 0.45; }

.cas-dock { margin-top: 1rem; }
.cas-play { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.cas-form { display: flex; gap: 0.5rem; }
/* With JS the tiles are the input and the keyboard is on screen; the text box is the no-JS fallback. */
.js .cas-fallback { display: none; }
.cas-help { display: none; flex-basis: 100%; margin: 0; font-size: 0.8125rem; color: var(--muted-foreground); }
.js .cas-help { display: block; order: -1; flex: 1; }
/* With JS the keyboard and Hint dock to the bottom of the screen, so the board scrolls behind them. */
.js .cas-dock { position: sticky; bottom: 0; z-index: 5; margin-inline: -1rem; padding: 0.6rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); background: var(--background); border-top: 1px solid var(--border); }
.js .cas-dock .cas-play { margin-bottom: 0.5rem; }
.cas-tile.is-cursor { border-color: var(--foreground); border-style: solid; box-shadow: 0 0 0 2px var(--ring); }
.cas-tile[data-typed] { border-style: solid; border-color: var(--foreground); background: var(--card); }
.cas-tile.is-drop { animation: cas-drop 0.3s var(--ease-out, ease-out) both; }
.cas-row.is-shake { animation: cas-shake 0.4s; }

/* The on-screen keyboard (JS only): big targets, no native keyboard. */
.cas-kb { display: none; gap: 0.35rem; margin-top: 0; user-select: none; -webkit-user-select: none; }
.js .cas-kb { display: grid; }
.cas-kb-row { display: flex; justify-content: center; gap: 0.3rem; }
.cas-key {
  flex: 1 1 0; min-width: 0; max-width: 2.9rem; height: 3.25rem;
  border: 1px solid var(--border); border-radius: 0.375rem; background: var(--card); color: var(--foreground);
  font: 600 1rem var(--font-sans); text-transform: uppercase; cursor: pointer; touch-action: manipulation;
}
.cas-key:active { background: var(--muted); }
.cas-key.is-wide { flex: 1.7 1 0; max-width: 4.8rem; font-size: 0.8125rem; }
.cas-key.is-enter { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
@media (min-width: 640px) { .cas-kb { max-width: 30rem; } }
.cas-input { max-width: 13rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.cas-input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cas-msg { margin: 0.75rem 0 0; max-width: 52ch; font-size: 0.9375rem; }
.cas-row > .cas-msg { flex-basis: 100%; margin: 0.15rem 0 0.35rem; font-size: 0.875rem; }
.cas-msg.is-ok { color: var(--success); font-weight: 500; }
.cas-msg.is-miss { color: var(--foreground); }
.cas-msg.is-info { color: var(--muted-foreground); }

.cas-end { margin-top: 1.5rem; }
.cas-recap { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.cas-recap li { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.9375rem; }
.cas-recap li .cas-mark { align-self: center; }
.cas-recap b { text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
.cas-share-wrap { display: grid; gap: 0.75rem; }
.cas-share { margin: 0; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--muted); font: 0.9375rem/1.4 var(--font-sans); white-space: pre; overflow-x: auto; }

.cas-stairs { display: inline-flex; gap: 0.2rem; }
.cas-example { margin: 1.5rem 0; }
.cas-example .cas-tile { width: 1.6rem; height: 1.85rem; font-size: 0.95rem; }

.cas-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.cas-dist li { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: 0.75rem; }
.cas-dist-label { font-size: 0.875rem; color: var(--muted-foreground); }
.cas-dist-bar { display: flex; align-items: center; min-width: 1.75rem; width: var(--w); height: 1.4rem; padding-inline: 0.4rem; border-radius: 0.25rem; background: var(--primary); color: var(--primary-foreground); }
.cas-dist-n { font-size: 0.8125rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cas-row.is-new .cas-tile, .cas-board .cas-form { animation: none; }
}