.cw-intro { margin: 1.2rem 0; }
.cw-intro h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 .4rem; }
.cw-intro p { color: var(--bh-muted); line-height: 1.6; max-width: 68ch; margin: 0; }
.cw-current { background: var(--bh-selected); border-radius: 10px; padding: .85rem 1rem; margin: 1.15rem 0 1rem; color: #145f54; }
.cw-current h3 { font-size: .85rem; font-weight: 700; margin: 0 0 .4rem; }
.cw-current p { margin: 0; line-height: 1.5; }
.cw-current .cw-current-state { font-size: .8rem; margin-top: .35rem; }
.cw-grid-frame { width: 100%; max-width: 392px; margin: 0 auto; }
.cw-grid { display: grid; grid-template-columns: repeat(var(--cw-columns, 7), minmax(0, 1fr)); background: var(--bh-ink); }
.cw-square { position: relative; min-width: 0; aspect-ratio: 1; background: #fff; border: 1px solid #75868d; }
.cw-block { background: var(--bh-ink); border-color: var(--bh-ink); }
.cw-square.is-selected { background: var(--bh-selected); }
.cw-square.is-fixed { background: #f1f6f4; }
.cw-square.is-hinted { background: #fff5dd; }
.cw-square:has(input:focus) { z-index: 1; outline: 3px solid var(--bh-accent); outline-offset: -3px; }
.cw-cell-number { position: absolute; top: .12rem; left: .22rem; font-size: .6rem; line-height: 1; color: var(--bh-ink); pointer-events: none; }
.cw-letter { display: block; width: 100%; height: 100%; min-height: 44px; padding: .3rem 0 0; border: 0; border-radius: 0; background: transparent; color: var(--bh-ink); font: inherit; font-size: 1.4rem; font-weight: 650; text-align: center; text-transform: uppercase; caret-color: var(--bh-accent); outline: none; }
.cw-letter:read-only { color: #145f54; cursor: default; }
.cw-keyboard-note, .cw-cost-note { color: var(--bh-muted); font-size: .8rem; line-height: 1.5; margin: .75rem 0 0; }
.cw-cost-note { font-variant-numeric: tabular-nums; }
.cw-clues { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 1.7rem; }
.cw-clues h2 { font-size: 1rem; font-weight: 700; margin: 0 0 .7rem; }
.cw-clues ol { list-style: none; padding: 0; margin: 0; }
.cw-clues li + li { margin-top: .55rem; }
.cw-clue { display: block; width: 100%; min-height: 60px; text-align: left; border: 1px solid var(--bh-line); border-radius: 8px; background: #fff; color: var(--bh-ink); padding: .7rem .8rem; font-size: .9rem; line-height: 1.5; }
.cw-clue strong { color: var(--bh-accent); font-weight: 700; }
.cw-clue small { display: block; color: var(--bh-muted); font-size: .8rem; margin-top: .2rem; }
.cw-clue[aria-pressed="true"] { border-color: var(--bh-accent); background: var(--bh-selected); }
.cw-clue:disabled { cursor: default; }
.cw-summary { list-style: none; padding: 0; margin: 1rem 0 0; }
.cw-summary li { padding: .9rem 0; border-bottom: 1px solid var(--bh-line); }
.cw-summary h3 { margin: 0 0 .35rem; }
.cw-summary span { color: var(--bh-muted); font-size: .8rem; font-weight: 500; }
.cw-summary p { color: var(--bh-muted); margin: 0; line-height: 1.6; font-size: .9rem; }
.cw-challenge-note { font-size: .85rem; color: var(--bh-muted); line-height: 1.6; margin: .8rem 0 0; }
.cw #cw-result-title:focus-visible { outline: 3px solid var(--bh-accent); outline-offset: 4px; }
.cw #pg-share-text { font: inherit; font-size: .9rem; line-height: 1.6; }
@media (hover: hover) { .cw-clue:not(:disabled):hover { border-color: var(--bh-accent); background: #f4f9f7; } }
@media (max-width: 540px) {
    .cw-intro { margin-top: .9rem; }
    .cw-current { padding: .75rem; }
    .cw-clues { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
    .cw .bh-play-actions { flex-wrap: wrap; gap: .35rem; }
    .cw .bh-play-actions .bh-primary { flex-basis: 100%; }
    .cw .bh-play-actions .bh-text-button { margin-left: auto; }
    .cw .bh-result-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 340px) { .cw-grid-frame { width: calc(100% + 1.25rem); margin-left: -.625rem; margin-right: -.625rem; } }