/* Crypto quiz: the clue large, the answer's boxes below it, a keyboard, the help underneath. */
.cq { display: flex; flex-direction: column; gap: 16px; max-width: 640px; margin: 0 auto; }
.cq-loading { margin: 40px 0; text-align: center; font-size: 18px; color: #4b5563; }
.cq-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 17px; color: #4b5563; }
.cq-progress { font-weight: 700; color: #2f5d45; letter-spacing: .02em; }
.cq-score { font-weight: 700; }
.cq-clue { margin: 0; padding: 18px 20px; border-radius: 14px; background: #eef4f0; font: 400 25px/1.4 Georgia, 'Times New Roman', serif; color: #1a1a1a; }
.cq-count { white-space: nowrap; font: 700 19px/1 Inter, system-ui, sans-serif; color: #2f5d45; }

.cq-boxes { container-type: inline-size; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 4px; }
.cq-word { display: flex; gap: 4px; }
.cq-boxes > .cq-gap { width: min(14px, calc(100cqi / var(--n) * .5)); }
.cq-gap--dash { width: auto; font: 700 24px/1 Inter, system-ui, sans-serif; color: #4b5563; }
.cq-box { display: grid; place-items: center; width: min(48px, calc((100cqi - (var(--n) - 1) * 4px) / var(--n))); height: 54px; padding: 0; border: 2px solid #9fbfac; border-radius: 8px; background: #fff; font: 700 min(26px, calc(100cqi / var(--n) * .62))/1 Inter, system-ui, sans-serif; color: #1a1a1a; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cq-box.is-cursor { border-color: #2f5d45; background: #f7d65c; }
.cq-box.is-shown { color: #2f5d45; background: #eef4f0; }
.cq-box:disabled { cursor: default; }
.cq-box:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.cq-boxes.is-wrong .cq-box { border-color: #d98b83; animation: cq-shake .35s ease-in-out; }
.cq-boxes.is-right .cq-box { border-color: #2f5d45; background: #d7eadf; }
.cq-boxes.is-missed .cq-box { border-color: #d8d3c7; background: #f7f6f2; color: #6b6255; }
@keyframes cq-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.cq-keys { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.cq-key[data-key="W"] { grid-column-start: 2; }
.cq-key--erase { grid-column: span 3; }
.cq-key { min-height: 50px; padding: 0; border: 1.5px solid #cfe2d6; border-radius: 10px; background: #fff; box-shadow: 0 2px 0 #cfe2d6; font: 700 22px/1 Inter, system-ui, sans-serif; color: #1f2937; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cq-key:active:not(:disabled) { background: #eef4f0; border-color: #2f5d45; }
.cq-key--erase { color: #2f5d45; }
.cq-key:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }

.cq-help { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cq-help .sp-button { flex: 1 1 180px; max-width: 260px; }

.cq-verdict { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border-radius: 14px; background: #f7f6f2; text-align: center; }
.cq-verdict.is-right { background: #eef4f0; }
.cq-verdict__title { margin: 0; font-size: 18px; font-weight: 700; color: #4b5563; }
.cq-verdict.is-right .cq-verdict__title { font: 700 26px/1.2 Georgia, 'Times New Roman', serif; color: #2f5d45; }
.cq-verdict__answer { margin: 0 0 6px; font: 700 26px/1.25 Georgia, 'Times New Roman', serif; color: #1a1a1a; }
.cq-verdict__why { max-width: 32em; margin: 0 0 8px; font-size: 17px; line-height: 1.5; color: #374151; }

.cq-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cq-summary li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border-radius: 10px; background: #f7f6f2; font-size: 17px; line-height: 1.45; }
.cq-summary li.is-right { background: #eef4f0; }
.cq-summary__mark { font-weight: 700; color: #9a8f80; text-align: center; }
.is-right .cq-summary__mark { color: #2f5d45; }
.cq-summary__clue { font-family: Georgia, 'Times New Roman', serif; }
.cq-summary__answer { white-space: nowrap; color: #2f5d45; }

@media (prefers-reduced-motion: reduce) { .cq-boxes.is-wrong .cq-box { animation: none; } }

@media (max-width: 420px) {
  .cq { gap: 12px; }
  .cq-clue { padding: 14px; font-size: 21px; }
  .cq-count { font-size: 17px; }
  .cq-box { height: 48px; border-radius: 6px; }
  .cq-keys { gap: 4px; }
  .cq-key { min-height: 46px; font-size: 20px; }
}

/* "Grotere letters": the clue, the boxes, the keys and the answer a size up. */
.sp--large .cq-head { font-size: 19px; }
.sp--large .cq-clue { font-size: 29px; }
.sp--large .cq-count { font-size: 21px; }
.sp--large .cq-box { height: 60px; font-size: min(30px, calc(100cqi / var(--n) * .66)); }
.sp--large .cq-key { min-height: 56px; font-size: 25px; }
.sp--large .cq-verdict__title { font-size: 20px; }
.sp--large .cq-verdict__answer, .sp--large .cq-verdict.is-right .cq-verdict__title { font-size: 30px; }
.sp--large .cq-verdict__why { font-size: 19px; }
.sp--large .cq-summary li { font-size: 19px; }
@media (max-width: 420px) {
  .sp--large .cq-clue { font-size: 24px; }
  .sp--large .cq-box { height: 54px; }
  .sp--large .cq-key { min-height: 52px; font-size: 22px; }
}

/* "Meer contrast": dark lines and text. */
.sp--contrast .cq-head, .sp--contrast .cq-verdict__why, .sp--contrast .cq-verdict__title, .sp--contrast .cq-loading { color: #000; }
.sp--contrast .cq-progress, .sp--contrast .cq-count { color: #133a26; }
.sp--contrast .cq-clue { color: #000; border: 1.5px solid #133a26; }
.sp--contrast .cq-box { border-color: #1f2937; color: #000; }
.sp--contrast .cq-box.is-cursor { border-color: #000; border-width: 3px; }
.sp--contrast .cq-box.is-shown { color: #133a26; background: #dcebe2; }
.sp--contrast .cq-boxes.is-right .cq-box { border-color: #133a26; }
.sp--contrast .cq-boxes.is-missed .cq-box { border-color: #4b5563; color: #1f2937; }
.sp--contrast .cq-key { border-color: #1f2937; box-shadow: 0 2px 0 #1f2937; color: #000; }
.sp--contrast .cq-summary li { border: 1.5px solid #6b7280; }
.sp--contrast .cq-summary__mark { color: #4b5563; }
.sp--contrast .is-right .cq-summary__mark, .sp--contrast .cq-summary__answer { color: #133a26; }