/* ===== Cribbage Word of the Day — standalone page styles =====
 * Scoped under .cwordy / .cw-* so nothing leaks if this is ever mounted
 * inside the lounge.
 *
 * Single-theme by design: the eCrib+ flyer's candle-lit castle look, the same
 * palette and Cinzel/Lato pairing the printed flyer and the shareable puzzle
 * card use, so the page and the image an admin exports from it read as one
 * piece rather than two.
 */

.cwordy {
  --ground: #120b06;
  --panel: #1d130a;
  --panel-hi: #261a0d;
  --well: #0e0904;
  --gold: #f2c94c;
  --gold-hi: #ffe08a;
  --rule: #8a6a1f;
  --parchment: #f3e6c4;
  --parchment-dim: #cfc0a0;
  --ink: #1a1006;
  --red: #b3261e;
  --good: #7fd66a;
  --danger: #e2603f;
  --radius: 8px;
  --display: Cinzel, Georgia, 'Times New Roman', serif;
  --body: Lato, 'Segoe UI', system-ui, Helvetica, Arial, sans-serif;
  color: var(--parchment);
  font-family: var(--body);
}

/* Padding must sit inside every declared width — without this .cw-main's
   width:100% plus its side padding overflows the viewport on phones. */
.cwordy, .cwordy *, .cwordy *::before, .cwordy *::after { box-sizing: border-box; }

.cw-page { min-height: 100%; background: var(--ground); display: flex; flex-direction: column; }

/* Title row: the crest BESIDE "Cribbage / Word of the Day" (Damien
   2026-09-21) — a stacked crest above the title ate the space the lede and
   the start card need. On a narrow phone the row still fits: the crest
   shrinks with the viewport and the title text wraps under its own column. */
.cw-titlerow {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.5rem, 2vw, 1rem);
  margin: 0.1rem 0 0;
}
.cw-titlecrest {
  flex: 0 0 auto; display: block;
  width: auto; height: clamp(64px, 12vw, 104px);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
}
.cw-titletext { text-align: left; min-width: 0; }
.cw-titletext .cw-bigtitle {
  margin: 0;
  /* Sized so "WORD OF THE DAY" stays on one line beside the crest down to a
     ~360px phone (6.2vw ≈ 24px at 390px); desktop tops out at the same 3.6rem
     as before. */
  font-size: clamp(1.3rem, 6.2vw, 3.6rem);
}

/* ===== Hero: the castle band, as on the flyer ===== */
.cw-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0.7rem 1rem 1.4rem;
  text-align: center;
}
.cw-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background: url(/extras/promo/assets/bg_castle.jpg?v=1.62c) center 28% / cover no-repeat;
}
.cw-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18, 11, 6, 0.58) 0%, rgba(18, 11, 6, 0.44) 40%, var(--ground) 100%);
}
.cw-herotop {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.cw-back-btn {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: rgba(14, 9, 4, 0.66);
  color: var(--gold);
  font-family: var(--display);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
  cursor: pointer; white-space: nowrap;
}
.cw-back-btn:hover { background: rgba(14, 9, 4, 0.9); color: var(--gold-hi); }
.cw-date {
  font-family: var(--display); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--parchment-dim); text-shadow: 0 1px 5px #000; white-space: nowrap;
}
.cw-kicker {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(0.8rem, 2.6vw, 1.15rem); letter-spacing: 0.3em;
  text-transform: uppercase; text-shadow: 0 2px 8px #000;
}
.cw-bigtitle {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.9rem, 7.4vw, 3.6rem); line-height: 1;
  letter-spacing: 0.04em; color: var(--gold);
  text-shadow: 0 3px 0 #5a3d08, 0 6px 18px #000;
  margin: 0.1rem 0 0;
}
.cw-lede {
  margin: 0.7rem auto 0; max-width: 60ch;
  font-size: clamp(0.85rem, 2.2vw, 1rem); color: var(--parchment);
  text-shadow: 0 1px 6px #000;
}
.cw-lede b { color: var(--gold-hi); }

/* ===== Body ===== */
.cw-main {
  flex: 1 1 auto; width: 100%; max-width: 780px; margin: 0 auto;
  padding: 0 1rem 3rem;
  display: flex; flex-direction: column; gap: 0.95rem;
}

/* ===== Answer slots ===== */
.cw-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
.cw-slot {
  width: clamp(34px, 9vw, 54px); height: clamp(44px, 11.5vw, 68px);
  border: 2px solid var(--rule); border-radius: 6px;
  background: rgba(14, 9, 4, 0.72);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.15rem, 4.4vw, 1.7rem); color: var(--gold);
}
.cw-slot.filled { border-color: var(--gold); background: rgba(242, 201, 76, 0.14); color: var(--gold-hi); }

/* ===== Panels ===== */
.cw-panel {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.15rem 1.2rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.8rem; align-items: center; text-align: center;
}
.cw-panel h2 {
  margin: 0; font-family: var(--display); font-weight: 900;
  font-size: clamp(1.15rem, 3.6vw, 1.5rem); color: var(--gold); letter-spacing: 0.03em;
}
.cw-panel p { margin: 0; color: var(--parchment-dim); max-width: 54ch; line-height: 1.55; }
.cw-panel p b { color: var(--parchment); }

.cw-btn {
  padding: 0.7rem 2rem; border: none; border-radius: 6px;
  background: var(--gold); color: var(--ink);
  font-family: var(--display); font-weight: 900;
  font-size: 1rem; letter-spacing: 0.08em; cursor: pointer;
  box-shadow: 0 3px 0 #5a3d08;
}
.cw-btn:hover { background: var(--gold-hi); }
.cw-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 #5a3d08; }
.cw-btn.ghost {
  background: rgba(14, 9, 4, 0.6); color: var(--gold);
  border: 1px solid var(--rule); box-shadow: none;
}
.cw-btn.ghost:hover { background: var(--panel-hi); color: var(--gold-hi); }
.cw-btnrow { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; }

/* ===== Section heading with a rule, as on the flyer ===== */
.cw-head {
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--display); font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
}
.cw-head::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* ===== A-Z key + the clock, in ONE frame =====
   The chart is compact on the left; time and wrong letters ride in a column
   on its right, so the thing you look up and the thing you are racing sit
   together instead of stacking two panels. */
.cw-keywrap {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.6rem 0.7rem 0.65rem;
  display: flex; align-items: stretch; gap: 0.8rem;
}
.cw-keymain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.cw-keyside {
  flex: 0 0 auto; width: clamp(104px, 21%, 148px);
  border-left: 1px solid var(--rule); padding-left: 0.8rem;
  display: flex; flex-direction: column; justify-content: center; gap: 0.7rem;
}
.cw-keyside > div { display: flex; flex-direction: column; align-items: center; gap: 0.05rem; }
.cw-key { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; }
.cw-key div {
  background: var(--well); border: 1px solid #3d2d13; border-radius: 3px;
  text-align: center; padding: 0.16rem 0 0.18rem; line-height: 1.18;
  overflow: hidden;
}
.cw-key .k {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(0.62rem, 1.8vw, 0.8rem); color: var(--gold);
}
.cw-key .v {
  font-size: clamp(0.5rem, 1.45vw, 0.66rem); color: var(--parchment-dim);
  font-variant-numeric: tabular-nums; font-weight: 700;
}
.cw-key div.gone { opacity: 0.34; }
.cw-key div.gone .k { color: var(--parchment-dim); }
.cw-keynote { font-size: 0.68rem; color: var(--parchment-dim); text-align: center; }

/* ===== Clock (inside the chart frame) ===== */
.cw-clock-lab, .cw-miss-lab {
  font-family: var(--display); font-weight: 700;
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--parchment-dim); text-align: center;
}
.cw-clock {
  font-family: var(--display); font-weight: 900; font-size: clamp(1.25rem, 3.6vw, 1.7rem);
  font-variant-numeric: tabular-nums; color: var(--gold);
}
.cw-miss {
  font-family: var(--display); font-weight: 900; font-size: clamp(1rem, 3vw, 1.25rem);
  color: var(--danger); font-variant-numeric: tabular-nums;
}

/* ===== Play: one hand on stage, the word building on the right =====
   The hand you are counting sits in the middle. Get it right and it lights
   green, flies to its slot in the rail, and the next hand slides up behind
   it — so the word assembles on the right as you go. */
.cw-board2 { display: flex; align-items: flex-start; gap: 1rem; }

.cw-stage {
  flex: 1 1 auto; min-width: 0;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.9rem 0.9rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.cw-stage.right {
  border-color: var(--good);
  box-shadow: 0 0 0 1px var(--good), 0 0 26px rgba(127, 214, 106, 0.32);
}
.cw-stage.wrong { animation: cw-shake 0.32s; border-color: var(--danger); }
.cw-stagehead {
  font-family: var(--display); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--parchment-dim);
}
.cw-stagehead b { color: var(--gold); }
.cw-stagecards {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(3px, 1.1vw, 8px); max-width: 100%;
}
.cw-stagecards .cw-card { width: clamp(42px, 12vw, 92px); }
.cw-stageentry { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }
.cw-stage .cw-let { width: clamp(52px, 14vw, 78px); height: clamp(60px, 16vw, 90px); }
.cw-skip {
  background: none; border: none; cursor: pointer;
  font-family: var(--body); font-size: 0.74rem; color: var(--rule);
  text-decoration: underline; padding: 0.15rem 0.3rem;
}
.cw-skip:hover { color: var(--gold); }
.cw-skip[hidden] { display: none; }

/* The stage entering from below as the next hand comes up. */
@keyframes cw-riseup {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cw-stage.rising { animation: cw-riseup 0.26s ease-out; }

/* ===== The word rail ===== */
.cw-rail {
  flex: 0 0 auto; width: clamp(96px, 26%, 188px);
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.7rem 0.6rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.cw-railhead {
  font-family: var(--display); font-weight: 700;
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); text-align: center;
}
.cw-railrows { display: flex; flex-direction: column; gap: 0.3rem; }
.cw-railrow { display: flex; align-items: center; gap: 0.4rem; }
.cw-railrow.on .cw-railtile {
  border-color: var(--good); background: rgba(127, 214, 106, 0.14); color: var(--gold-hi);
}
.cw-railrow.cur .cw-railtile { border-color: var(--gold); box-shadow: 0 0 10px rgba(242, 201, 76, 0.35); }
.cw-railtile {
  flex: 0 0 auto;
  width: clamp(28px, 7vw, 38px); height: clamp(34px, 8.6vw, 46px);
  border: 2px solid var(--rule); border-radius: 5px; background: var(--well);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(0.9rem, 2.8vw, 1.3rem); color: #5a4418;
}
@keyframes cw-pop {
  0% { transform: scale(0.4); opacity: 0; }
  65% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.cw-railtile.popped { animation: cw-pop 0.32s ease-out; }
/* The shrunken hand that earned the letter, parked beside it. */
.cw-railmini { display: flex; gap: 1.5px; min-width: 0; opacity: 0; transition: opacity 0.25s; }
.cw-railrow.on .cw-railmini { opacity: 0.9; }
.cw-railmini .cw-card {
  width: clamp(13px, 3.1vw, 21px); border-radius: 2px; border-width: 0;
  box-shadow: none;
}
.cw-railmini .cw-card .cw-r, .cw-railmini .cw-card .cw-s { display: none; }

/* The clone that flies from the stage to the rail. */
/* Above the embedded overlay (z-index 12000) as well as the bare page, or the
   solved hand would fly out of sight behind it. */
.cw-flier {
  position: fixed; z-index: 99999; pointer-events: none;
  display: flex; align-items: center; gap: 4px;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.42s ease-in;
  transform-origin: top left;
}
@media (prefers-reduced-motion: reduce) {
  .cw-flier { transition: none; }
  .cw-stage.rising, .cw-railtile.popped { animation: none; }
}

/* Narrow: the rail lies down under the stage and drops the mini hands. */
@media (max-width: 620px) {
  .cw-board2 { flex-direction: column; gap: 0.6rem; }
  .cw-rail { width: 100%; }
  .cw-railrows { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.35rem; }
  .cw-railmini { display: none; }
}

/* ===== Hand rows ===== */
.cw-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.cw-row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.35rem, 1.6vw, 0.9rem);
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.5rem clamp(0.4rem, 1.8vw, 0.9rem);
}
.cw-row.solved { border-color: var(--gold); background: rgba(242, 201, 76, 0.08); }
.cw-row.wrong { animation: cw-shake 0.32s; border-color: var(--danger); }
@keyframes cw-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) { .cw-row.wrong { animation: none; } }

.cw-n {
  flex: 0 0 auto; width: 1.2rem; text-align: right;
  font-family: var(--display); font-weight: 700; font-size: 0.9rem; color: var(--rule);
}
.cw-cards { flex: 0 1 auto; display: flex; align-items: center; gap: clamp(2px, 0.9vw, 6px); min-width: 0; }
.cw-cut-sep { flex: 0 0 auto; width: 1px; align-self: stretch; background: var(--rule); margin: 0 clamp(2px, 1vw, 8px); }

/* ===== A playing card =====
   The face is the SAME art the felt uses (/images/cards/<rank>_<suit>.svg).
   A face that fails to load must never leave a see-through card, so the
   typographic rank+suit underneath is revealed instead — see
   project_invisible_cards_facecard_svg. */
.cw-card {
  flex: 0 1 auto;
  width: clamp(28px, 8.6vw, 68px);
  aspect-ratio: 69 / 94;
  border-radius: 5px;
  background: var(--parchment); color: var(--ink);
  border: 1px solid #c9b489;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.cw-card.red { color: var(--red); }
.cw-card.cut { box-shadow: 0 0 0 2px var(--gold), 0 2px 5px rgba(0, 0, 0, 0.7); }
.cw-face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: fill; -webkit-user-drag: none; user-select: none;
}
.cw-card.fallback .cw-face { display: none; }
/* Typographic fallback: hidden while the real face is showing. */
.cw-card .cw-r, .cw-card .cw-s { display: none; }
.cw-card.fallback .cw-r, .cw-card.fallback .cw-s { display: block; }
.cw-card .cw-r {
  position: absolute; top: 1px; left: 3px;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(0.75rem, 2.5vw, 1.15rem); line-height: 1.05;
}
.cw-card .cw-s {
  position: absolute; bottom: 0; right: 2px;
  font-size: clamp(0.9rem, 3.2vw, 1.5rem); line-height: 1;
}

/* ===== Letter entry ===== */
.cw-let {
  flex: 0 0 auto;
  width: clamp(38px, 10vw, 64px); height: clamp(44px, 12vw, 74px);
  border: 2px solid var(--rule); border-radius: 6px;
  background: var(--well); color: var(--gold);
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.15rem, 4.5vw, 1.7rem); text-align: center; text-transform: uppercase;
}
.cw-let::placeholder { color: #5a4418; }
.cw-let:focus { outline: none; border-color: var(--gold); background: rgba(242, 201, 76, 0.1); }
.cw-let:disabled {
  border-color: var(--gold); color: var(--gold-hi);
  background: rgba(242, 201, 76, 0.16);
  -webkit-text-fill-color: var(--gold-hi); opacity: 1;
}

/* The nudge shown when someone types the score instead of its letter. */
.cw-hint {
  text-align: center; font-size: 0.85rem; color: var(--gold-hi);
  background: rgba(242, 201, 76, 0.1); border: 1px solid var(--rule);
  border-radius: 6px; padding: 0.45rem 0.7rem;
}
.cw-hint[hidden] { display: none; }

/* ===== Leaderboard ===== */
.cw-board { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.cw-board h3 {
  margin: 0; padding: 0.65rem 1rem;
  font-family: var(--display); font-weight: 700;
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid var(--rule);
}
.cw-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.cw-table th {
  text-align: left; font-family: var(--display);
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--parchment-dim); font-weight: 700; padding: 0.5rem 0.75rem 0.3rem;
}
.cw-table td {
  padding: 0.4rem 0.75rem; border-top: 1px solid #2c1f0e;
  font-variant-numeric: tabular-nums;
}
.cw-table td.rank { width: 2.2rem; color: var(--rule); font-family: var(--display); font-weight: 700; }
.cw-table td.nm { font-weight: 700; }
/* Name ellipsizes; the guest tag and admin × sit beside it and never wrap. */
.cw-nmrow { display: flex; align-items: baseline; gap: 0.3rem; min-width: 0; }
.cw-nmtext { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-nmrow .cw-guest-tag, .cw-nmrow .cw-hide-btn { flex: 0 0 auto; margin-left: 0; }
.cw-table td.tm { text-align: right; color: var(--gold); font-family: var(--display); font-weight: 900; white-space: nowrap; }
.cw-table td.ms { text-align: right; width: 5.5rem; color: var(--parchment-dim); font-size: 0.78rem; white-space: nowrap; }
.cw-table tr.me td { background: rgba(242, 201, 76, 0.12); }
.cw-table tr.me td.nm { color: var(--gold-hi); }
.cw-empty { padding: 0.85rem 1rem; color: var(--parchment-dim); font-size: 0.85rem; }
.cw-guest-tag {
  display: inline-block; margin-left: 0.3rem; padding: 0 0.35rem;
  font-family: var(--body); font-size: 0.62rem; font-weight: 700;
  line-height: 1.35; text-transform: uppercase; letter-spacing: 0.4px;
  border-radius: 6px; border: 1px solid var(--rule); color: var(--parchment-dim);
  vertical-align: middle;
}
.cw-hide-btn {
  background: none; border: none; color: var(--rule); cursor: pointer;
  font-size: 0.85rem; padding: 0 0.25rem;
}
.cw-hide-btn:hover { color: var(--danger); }

/* ===== Result ===== */
.cw-result-word {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.4rem, 5.6vw, 2.1rem); letter-spacing: 0.3em; color: var(--gold);
  text-shadow: 0 2px 0 #5a3d08;
}
.cw-result-time {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.4rem, 9vw, 3.4rem); color: var(--gold-hi);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.cw-result-sub { color: var(--parchment-dim); font-size: 0.9rem; }
.cw-result-sub b { color: var(--parchment); }
.cw-rank-pill {
  display: inline-block; padding: 0.3rem 0.9rem; border-radius: 999px;
  background: rgba(242, 201, 76, 0.14); border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--display); font-weight: 900; font-size: 0.9rem;
}

/* ===== Guest name prompt ===== */
.cw-nameform { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: center; }
.cw-nameform input {
  padding: 0.5rem 0.75rem; border-radius: 6px; border: 1px solid var(--rule);
  background: var(--well); color: var(--parchment); font-size: 1rem; font-family: var(--body);
  width: min(220px, 60vw);
}
.cw-nameform input:focus { outline: none; border-color: var(--gold); }
.cw-note { font-size: 0.8rem; color: var(--parchment-dim); }
.cw-note b { color: var(--gold); }
.cw-err { color: var(--danger); font-size: 0.85rem; }

/* ===== Narrow phones ===== */
@media (max-width: 620px) {
  .cw-key { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cw-keywrap { flex-direction: column; gap: 0.55rem; }
  .cw-keyside {
    width: auto; border-left: 0; padding-left: 0;
    border-top: 1px solid var(--rule); padding-top: 0.55rem;
    flex-direction: row; justify-content: space-around; gap: 1rem;
  }
}

@media (max-width: 560px) {
  .cw-main { padding-inline: 0.75rem; gap: 0.7rem; }
  .cw-hero { padding-inline: 0.75rem; }
  .cw-back-btn { padding: 0.35rem 0.6rem; font-size: 0.72rem; }
  .cw-date { font-size: 0.62rem; }
}

/* ===========================================================================
   EMBEDDED MODE — the puzzle as a lounge overlay
   ---------------------------------------------------------------------------
   The same game, re-housed: a compact bar on top, the live lounge chat docked
   down the left, the puzzle in the middle and today's board on the right, with
   the player's avatar bottom-left. Deliberately the same furniture as Cribbage
   Sudoku and Cribbage Counter (.cc-* / .cs-*), so a player moving between the
   three puzzles finds everything in the same place — only the palette stays
   this puzzle's own candle-lit castle.

   The borrowed chat panel arrives wearing Sudoku's ".cs-chat-docked" styling
   (the shared _dockLoungeChat helper sets it); we only size the dock shell.
   =========================================================================== */

.cw-overlay {
  position: fixed; inset: 0;
  z-index: 12000;                 /* above the lounge (~10020) */
  background: #080603;
  display: flex; flex-direction: column;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.cw-overlay > .cwordy { position: relative; z-index: 2; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

/* The live lounge's own background (copied onto .lounge-bg by copyLoungeBg),
   darkened by a vignette so the hands read — same treatment as the tables.
   The page and hero go transparent over it; the flyer's castle band is only
   for the public page. */
.cw-overlay > .cw-lounge-bg { z-index: 0; }
.cw-bg-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, rgba(8, 6, 3, 0.2) 0%, rgba(8, 6, 3, 0.58) 58%, rgba(8, 6, 3, 0.86) 100%);
}
.cw-embed .cw-page { background: transparent; }
.cw-embed .cw-hero::before { display: none; }
.cw-embed .cw-hero::after { display: none; }
.cw-embed .cw-bigtitle, .cw-embed .cw-kicker { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85); }
body.cw-active { overflow: hidden; }

/* ── Top bar: leave · title · date ── */
.cw-embedbar {
  flex: 0 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.32);
  border-bottom: 1px solid var(--rule);
}
.cw-leave-btn {
  justify-self: start;
  padding: 0.45rem 1rem;
  border: 2px solid var(--rule); border-radius: 8px;
  background: rgba(242, 201, 76, 0.12);
  color: var(--gold);
  font-family: var(--display); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.05em;
  cursor: pointer; white-space: nowrap;
}
.cw-leave-btn:hover { background: var(--gold); color: var(--ink); }
.cw-embedtitle {
  justify-self: center;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--display); font-weight: 900;
  font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap;
}
.cw-embeddate {
  justify-self: end;
  font-family: var(--display); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.16em;
  color: var(--parchment-dim); white-space: nowrap;
}

.cw-barcrest { display: block; height: 30px; width: auto; flex: 0 0 auto; }

/* ── Body: chat · puzzle · board · avatar ── */
.cw-embedbody { flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; }
.cw-chat-dock {
  flex: 0 0 360px; width: 360px; min-height: 0; display: flex;
  border-right: 1px solid var(--rule); background: rgba(0, 0, 0, 0.22);
}
.cw-chat-toggle { display: none; }          /* desktop: chat is always open */

.cw-scroll { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; }
/* Inside the overlay the puzzle column is the scroller, so .cw-page must be
   free to grow past it rather than being pinned to its height. */
.cw-embed .cw-page { min-height: 0; }

/* The overlay's own header already carries the leave button and the date, so
   the page hero drops its row and shrinks — the castle band stays, because it
   is what makes this puzzle look like itself. */
.cw-embed .cw-herotop { display: none; }
.cw-embed .cw-hero { padding: 0.55rem 1rem 0.9rem; }
.cw-embed .cw-titlerow { display: none; }
.cw-embed .cw-kicker { font-size: clamp(0.7rem, 1.7vw, 0.9rem); }
.cw-embed .cw-lede { margin-top: 0.45rem; }
.cw-embed .cw-main { padding-bottom: 1.5rem; }

/* ── Today's board, right-hand panel ── */
.cw-lb-panel {
  flex: 0 0 320px; width: 320px; min-height: 0; overflow-y: auto; overflow-x: hidden;
  border-left: 1px solid var(--rule); border-radius: 0;
  background: rgba(0, 0, 0, 0.18);
}
.cw-lb-panel .cw-table { font-size: 0.82rem; table-layout: fixed; }
.cw-lb-panel .cw-table td, .cw-lb-panel .cw-table th { padding-left: 0.4rem; padding-right: 0.4rem; }
.cw-lb-panel .cw-table td.ms { font-size: 0.72rem; }
/* Fixed layout so the table can never outgrow the panel: rank, mistakes and
   time get set widths and the name column takes whatever is left (and
   ellipsizes). Before this a long name plus the 5.5rem mistakes column pushed
   the time column clean off the panel's right edge. */
.cw-lb-panel .cw-table th:first-child, .cw-lb-panel .cw-table td.rank { width: 1.1rem; }
.cw-lb-panel .cw-table th:nth-child(3), .cw-lb-panel .cw-table td.ms { width: 3.1rem; }
.cw-lb-panel .cw-table th:last-child, .cw-lb-panel .cw-table td.tm { width: 2.8rem; }
/* The in-page copy of the board is the phone's only one; on a wide overlay the
   right-hand panel carries it, so hide the duplicate. Pure CSS, so a resize
   never lands on a stale half — renderLeaderboard always fills both. */
.cw-embed .cw-board:not(.cw-lb-panel) { display: none; }

/* ── Avatar, clear of the chat dock and the board panel ── */
.cw-avatar {
  position: fixed; left: 380px; bottom: 18px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  pointer-events: none;
}
.cw-avatar-img {
  width: 104px; height: 104px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--gold); background: var(--panel);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  display: inline-flex; align-items: center; justify-content: center;
}
.cw-avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-avatar-name {
  font-family: var(--display); font-weight: 700; font-size: 0.9rem;
  color: var(--parchment); text-shadow: 0 1px 3px #000;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The word rail and the avatar both want the bottom-left; below this width the
   avatar loses, since it is decoration and the rail is the game. */
@media (max-width: 1180px) {
  .cw-avatar { display: none; }
  .cw-lb-panel { flex-basis: 260px; width: 260px; }
  .cw-chat-dock { flex-basis: 300px; width: 300px; }
}

/* ── Phones: board panel and avatar go, chat docks along the bottom ── */
@media (max-width: 820px) {
  .cw-lb-panel { display: none; }
  .cw-embed .cw-board:not(.cw-lb-panel) { display: block; }
  .cw-avatar { display: none; }
  .cw-chat-dock {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; flex: none; height: auto; max-height: 60vh;
    flex-direction: column; border-right: none; border-top: 1px solid var(--rule);
    z-index: 5;
    /* The sheet floats over the puzzle, and the borrowed chat panel brings no
       background of its own — without an opaque one here the hands and the
       rail read straight through the messages. */
    background: var(--ground);
    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.7);
  }
  .cw-chat-dock.cw-chat-collapsed { height: auto; max-height: none; }
  .cw-chat-dock.cw-chat-collapsed .lounge-chat-panel { display: none !important; }
  .cw-chat-toggle {
    display: block; width: 100%; padding: 0.5rem; border: none;
    background: var(--panel-hi); color: var(--gold);
    font-family: var(--display); font-weight: 700; cursor: pointer;
  }
  /* Clear of the collapsed chat bar pinned to the bottom. */
  .cw-embed .cw-main { padding-bottom: 4rem; }
  .cw-embedtitle { display: none; }
  /* ...so with the bar's title gone, the hero's crest + title row comes back
     here, compact, to say what the puzzle is. */
  .cw-embed .cw-titlerow { display: flex; }
  .cw-embed .cw-titlecrest { height: 56px; }
}

/* ===== Play-modal preview (static teaser, not the game) ===== */
.cw-preview { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.9rem; }
/* Cards and crest share one row — crest to the right of the cut card — so
   the panel stays short. Wraps the crest under the cards on a narrow panel. */
.cw-preview-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(0.8rem, 3vw, 1.8rem); margin-bottom: 0.8rem;
}
.cw-preview-banner { flex: 0 0 auto; display: flex; justify-content: center; }
.cw-preview-banner .cw-logo { display: block; width: auto; max-width: 100%; max-height: 124px; height: auto; margin: 0 auto; }
.cw-mini-logo { display: block; height: 100%; width: auto; }

/* ===== The crest =====
   The old placeholder logos were <svg>, so a few lounge rules size svg only —
   these give the <img> the same footprint in each of those spots. */
.cw-crest { display: block; width: auto; height: auto; max-width: 100%; margin: 0 auto; }
/* "How to Play" popup hero (its own rule pins svg to 300px wide). */
.lounge-howto-hero .cw-logo { width: auto; max-height: 240px; margin: 0 auto; }
/* "Play … while I wait" buttons on the tournament notice (svg-only height). */
.ecrib-notice-game-ico .cw-mini-logo { height: 34px; width: auto; }
.cw-preview-cols { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.cw-preview-cards { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
/* Real card widths, not a transform: scale() shrank the picture but kept the
   full-size layout box, which would shove the crest off the row. */
.cw-preview .cw-stagecards .cw-card { width: clamp(38px, 7vw, 64px); }
.cw-preview-eq { font-family: var(--display); font-size: 0.85rem; color: var(--parchment-dim); }
.cw-preview-eq b { color: var(--gold); }
.cw-preview-text { flex: 1 1 100%; min-width: 0; }
/* Phone: keep the crest on the cards' row too — wrapped under them the panel
   was 534px tall on a 390px screen. Smaller cards + a smaller crest fit. */
@media (max-width: 480px) {
  .cw-preview-top { flex-wrap: nowrap; gap: 0.55rem; }
  .cw-preview-cards { flex: 0 1 auto; min-width: 0; }
  .cw-preview .cw-stagecards { gap: 3px; }
  .cw-preview .cw-stagecards .cw-card { width: 33px; }
  .cw-preview .cw-cut-sep { margin: 0 3px; }
  .cw-preview-banner .cw-logo { max-height: 78px; }
}
.cw-preview-blurb { color: var(--parchment); font-size: 0.92rem; line-height: 1.5; margin: 0 0 0.6rem; }
.cw-preview-blurb b { color: var(--gold-hi); }
.cw-preview-points { margin: 0; padding-left: 1.1rem; color: var(--parchment-dim); font-size: 0.88rem; line-height: 1.6; }