/* ===== Cribble — grid, tiles and keyboard =====
 * Page chrome (hero, panels, board, lounge overlay) comes from ecrib-word.css;
 * everything here is the Wordle grid itself. Colours: green = right rank,
 * right spot; yellow = in the hand, other spot; gray = not in the hand. */
.cwordy .cb-titlerow { align-items: center; }
.cwordy .cb-titlecrest { flex: 0 0 auto; width: clamp(120px, 24vw, 200px); filter: drop-shadow(0 4px 10px #000); }
.cwordy .cb-crest-svg { width: 100%; height: auto; display: block; }
.cwordy .cb-clue-n { color: var(--gold-hi); font-size: 1.25em; }
.cwordy .cb-clue-sub { text-align: center; color: var(--parchment); font-size: 0.95rem; margin: -0.3rem 0 0.4rem; }
.cwordy .cb-clue-sub b { color: var(--gold-hi); }
.cwordy .cb-ok { color: #6fd38a; font-weight: 900; }
.cwordy .cb-no { color: #e07a6a; font-weight: 700; }

/* ---- compact vertical rhythm (Damien 2026-10-18: a laptop screen lost the
   Start button and the result buttons below the fold). The shared Word of
   the Day chrome is generous; Cribble trims it everywhere. ---- */
.cb-page .cw-hero { padding: 0.45rem 1rem 0.7rem; }
.cb-page .cw-titlerow { margin: 0; gap: 0.6rem; }
.cb-page .cw-titletext .cw-bigtitle { font-size: clamp(1.5rem, 4.6vw, 2.4rem); }
.cb-page .cw-kicker { font-size: clamp(0.7rem, 2vw, 0.85rem); }
.cb-page .cb-titlecrest { width: clamp(96px, 15vw, 132px); }
.cb-page .cw-lede { margin: 0.25rem auto 0; font-size: 0.95rem; }
.cb-page .cw-main { gap: 0.6rem; padding-bottom: 1.5rem; }
.cb-page .cw-panel { padding: 0.75rem 1rem 0.85rem; gap: 0.5rem; }
.cb-page .cw-panel h2 { font-size: clamp(1.05rem, 3vw, 1.3rem); }
.cb-page .cw-result-word { font-size: clamp(1.15rem, 3.6vw, 1.5rem); }
.cb-page .cw-result-time { font-size: clamp(1.7rem, 5.5vw, 2.3rem); }
.cb-page .cb-answer { margin: 0.1rem auto 0; gap: 0.25rem; }
.cb-page .cb-answer-cards .cw-card { width: clamp(40px, 8vw, 62px); }
.cb-page .cb-mini-grid { margin: 0.2rem 0 0.3rem; }
.cb-page .cw-datenav { margin-top: 0.5rem; padding-top: 0.5rem; }

/* Two quick taps on the same key (5 then 5) read as a double-tap on iOS and
   zoom the page. `manipulation` keeps pinch-zoom and panning but drops the
   double-tap zoom and the 300ms tap delay — on the keys, the grid and the
   page itself (Damien 2026-10-18). */
.cb-page, .cb-embed, .cwordy .cb-keys, .cwordy .cb-key, .cwordy .cb-grid, .cwordy .cb-tile,
.cwordy .cb-demo-row, .cb-page .cw-btn, .cb-embed .cw-btn { touch-action: manipulation; }
.cwordy .cb-key { -webkit-tap-highlight-color: transparent; }

/* ---- instructions ---- */
.cwordy .cb-how { text-align: left; max-width: 640px; margin: 0.3rem auto 0.2rem; }
.cwordy .cb-how-title {
  font-family: var(--display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0.35rem;
}
.cwordy .cb-how-list { margin: 0; padding-left: 1.3rem; line-height: 1.4; font-size: 0.9rem; color: var(--parchment); }
.cwordy .cb-how-list li { margin-bottom: 0.25rem; }
.cwordy .cb-how-list b { color: var(--gold-hi); }
.cwordy .cb-sw { display: inline-block; width: 0.85em; height: 0.85em; border-radius: 3px; vertical-align: -1px; margin: 0 0.3em 0 0; border: 1px solid #1a1006; }
.cwordy .cb-sw.g { background: #3a9a4a; } .cwordy .cb-sw.y { background: #c9a227; } .cwordy .cb-sw.x { background: #5a5247; }
.cwordy .cb-demo { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin-top: 0.4rem; }
.cwordy .cb-demo-row { display: flex; gap: 6px; }
.cwordy .cb-demo-row .cb-tile { width: 38px; height: 44px; font-size: 1.15rem; cursor: default; }
.cwordy .cb-demo-cap { font-size: 0.82rem; color: var(--parchment-dim); text-align: center; max-width: 520px; }

/* ---- play: status strip ---- */
.cwordy .cb-status {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem 1.6rem;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.4rem 1rem; margin-bottom: 0.5rem;
}
.cwordy .cb-status > div { display: flex; align-items: baseline; gap: 0.5rem; }
.cwordy .cb-clue { font-family: var(--display); font-weight: 700; color: var(--gold); letter-spacing: 0.06em; font-size: 1.05rem; }
.cwordy .cb-clue b { color: var(--gold-hi); font-size: 1.5rem; }

/* ---- the grid ---- */
.cwordy .cb-grid { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0.2rem 0 0.6rem; }
.cwordy .cb-row { display: flex; align-items: center; gap: 6px; position: relative; }
.cwordy .cb-row.active .cb-tile:not(.filled) { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(242, 201, 76, 0.25); }
.cwordy .cb-tile {
  width: clamp(42px, 11vw, 50px); height: clamp(46px, 12vw, 54px);
  border: 2px solid var(--rule); border-radius: 8px; background: rgba(14, 9, 4, 0.6);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 900; font-size: clamp(1.1rem, 4vw, 1.6rem); color: var(--parchment);
  box-shadow: 0 2px 0 #000; user-select: none;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.cwordy .cb-tile.filled { border-color: var(--gold-hi); color: #fff; }
.cwordy .cb-tile.flip { animation: cb-flip 0.36s ease-in-out; }
.cwordy .cb-tile.g { background: #3a9a4a; border-color: #2d7a3a; color: #fff; }
.cwordy .cb-tile.y { background: #c9a227; border-color: #9a7a16; color: #1a1006; }
.cwordy .cb-tile.x { background: #5a5247; border-color: #3f3932; color: #e8e0d0; }
.cwordy .cb-rowscore {
  width: 7.2rem; text-align: left; font-size: 0.8rem; color: var(--parchment-dim); font-family: var(--body); font-weight: 700;
  opacity: 0; transition: opacity 0.25s ease; white-space: nowrap;
}
.cwordy .cb-rowscore.on { opacity: 1; }
.cwordy .cb-row.shake { animation: cb-shake 0.4s; }
@keyframes cb-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes cb-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---- the rank keyboard ---- */
.cwordy .cb-keys { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 0.6rem; }
.cwordy .cb-keyrow { display: flex; gap: 6px; justify-content: center; }
.cwordy .cb-key {
  min-width: clamp(38px, 11vw, 46px); height: clamp(40px, 11vw, 42px); padding: 0 0.5rem;
  border-radius: 6px; border: 1px solid var(--rule); background: var(--panel-hi); color: var(--parchment);
  font-family: var(--display); font-weight: 900; font-size: clamp(0.95rem, 3.4vw, 1.15rem); cursor: pointer;
  box-shadow: 0 2px 0 #000; transition: background-color 0.15s ease, color 0.15s ease;
}
.cwordy .cb-key:hover { border-color: var(--gold); }
.cwordy .cb-key:active { transform: translateY(1px); box-shadow: 0 1px 0 #000; }
.cwordy .cb-key.wide { min-width: clamp(78px, 20vw, 110px); font-size: 0.9rem; letter-spacing: 0.04em; }
.cwordy .cb-key.enter { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.cwordy .cb-key.enter:hover { background: var(--gold-hi); }
.cwordy .cb-key.g { background: #3a9a4a; border-color: #2d7a3a; color: #fff; }
.cwordy .cb-key.y { background: #c9a227; border-color: #9a7a16; color: #1a1006; }
.cwordy .cb-key.x { background: #3f3932; border-color: #2c2823; color: #8f877a; }

/* ---- result ---- */
.cwordy .cb-answer { margin: 0.6rem auto 0.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.cwordy .cb-answer-lab {
  font-family: var(--display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--parchment-dim);
}
.cwordy .cb-answer-lab b { color: var(--gold-hi); font-size: 1rem; }
.cwordy .cb-answer-cards { justify-content: center; }
.cwordy .cb-mini-grid { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0.5rem 0 0.7rem; }
.cwordy .cb-mini-row { display: flex; align-items: center; gap: 3px; }
.cwordy .cb-mini-sq {
  width: 26px; height: 26px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 900; font-size: 0.72rem; color: #fff; border: 1px solid #1a1006;
}
.cwordy .cb-mini-sq.g { background: #3a9a4a; } .cwordy .cb-mini-sq.y { background: #c9a227; color: #1a1006; } .cwordy .cb-mini-sq.x { background: #5a5247; }
.cwordy .cb-mini-score { width: 2.2rem; text-align: left; font-size: 0.72rem; color: var(--parchment-dim); margin-left: 4px; }
.cwordy .cb-board-counts { padding: 0.4rem 1rem 0.6rem; font-size: 0.78rem; color: var(--parchment-dim); text-align: right; }

/* ---- lounge: overlay bar crest + Play-panel preview ---- */
.cwordy .cb-barcrest { width: 70px; height: auto; vertical-align: middle; margin-right: 8px; }
.cwordy .cb-preview-demo .cb-demo-row { margin: 0 auto; }
.cwordy .cb-preview-demo .cb-tile { width: 38px; height: 46px; font-size: 1.1rem; }
.cw-preview-banner .cb-logo { width: 100%; max-width: 190px; height: auto; display: block; }
/* The mini logo is WIDE (five tiles), unlike the other puzzles' square marks:
   size it by height wherever it sits inline, by width only inside the lounge
   table cards' logo wrap. */
.cs-mini-logo.cb-mini-logo { height: 20px; width: auto; }
.lounge-create-puzzles-fan .cs-mini-logo.cb-mini-logo { height: 16px; width: auto; }
.cs-mini-logo-wrap .cs-mini-logo.cb-mini-logo { width: 92%; height: auto; }
/* The 320px side board: give the Guesses column room so its header doesn't
   run into Time. */
.cb-embed .cw-lb-panel .cw-table th:nth-child(3), .cb-embed .cw-lb-panel .cw-table td.ms { width: 4.3rem; }

@media (max-width: 480px) {
  .cwordy .cb-rowscore { width: 3.6rem; font-size: 0.7rem; }
  .cwordy .cb-preview-demo .cb-tile { width: 30px; height: 36px; font-size: 0.9rem; }
  .cwordy .cb-barcrest { width: 54px; }
}