.wfc-panel { margin: 16px 0; }
.wfc-panel summary { cursor: pointer; font-weight: 700; }
.wfc-grid { display: grid; grid-template-columns: repeat(var(--wfc-size,13),minmax(0,1fr)); gap: 1px; width: 100%; max-width: 520px; margin: 12px 0; background: #513520; border: 1px solid #513520; }
.wfc-grid > div { aspect-ratio: 1; position: relative; min-width: 0; }
.wfc-grid small { position: absolute; top: 1px; left: 2px; color: #513520; font-size: clamp(7px, 1.5vw, 10px); pointer-events: none; }
.wfc-grid input { display: block; width: 100%; height: 100%; box-sizing: border-box; margin: 0; padding: 2px 0 0; border: 0; border-radius: 0; text-align: center; background: #fffaf2; color: #302017; font-size: clamp(12px, 3.5vw, 22px); font-weight: 700; }
.wfc-grid .wfc-active { background: #f6deb1; }
.wfc-grid input:focus { outline: 2px solid #ab4d1d; outline-offset: -2px; }
.wfc-clues { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.wfc-clues button { display: block; width: 100%; text-align: left; margin: 4px 0; color: #513520; background: #f7ebda; }

.wfc-cover { display: block; width: 100%; max-width: 720px; height: auto; margin-top: 10px; border-radius: 12px; }

.wfc-levels { display: flex; flex-wrap: wrap; gap: 6px; }
.wfc-levels button[aria-pressed="true"] { outline: 2px solid #ab4d1d; outline-offset: 1px; }
.wfc-levels button:disabled { opacity: .6; }
.wfc-next[hidden] { display: none; }