.popomee-word-jumble { --wj-ink: var(--popomee-ink, #243638); --wj-teal: var(--popomee-teal, #31585b); --wj-coral: var(--popomee-coral, #dd6b5d); --wj-cream: var(--popomee-cream, #f5f1e6); --wj-border: #768789; color: var(--wj-ink); font: inherit; line-height: 1.6; max-width: 760px; margin-inline: auto; padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
.popomee-word-jumble, .popomee-word-jumble * { box-sizing: border-box; }
.popomee-word-jumble [hidden] { display: none !important; }
.popomee-word-jumble p { margin: 0 0 10px; }
.popomee-word-jumble h2, .popomee-word-jumble h3 { color: var(--wj-ink); background: none; border: 0; padding: 0; margin: 0 0 10px; line-height: 1.4; }
.popomee-word-jumble h2 { font-size: 1.2rem; }
.popomee-word-jumble h3 { font-size: 1.05rem; }
.popomee-word-jumble button { font: inherit; color: var(--wj-ink); min-height: 44px; padding: 8px 12px; border: 1px solid var(--wj-border); border-radius: 6px; background: #fffdf8; margin: 0; line-height: 1.4; }
.popomee-word-jumble button { cursor: pointer; }
.popomee-word-jumble button:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--wj-cream); }
.popomee-word-jumble button:disabled { cursor: default; opacity: 0.55; }
.popomee-word-jumble .wj-primary { color: #fff; background: var(--wj-teal); border-color: var(--wj-teal); font-weight: 600; }
.popomee-word-jumble .wj-primary:hover:not(:disabled) { background: #254548; }
.popomee-word-jumble :is(button, summary, a, [tabindex="-1"]):focus-visible { outline: 3px solid var(--wj-teal); outline-offset: 3px; }
.popomee-word-jumble a { color: var(--wj-teal); text-decoration: underline; text-underline-offset: 3px; }
.popomee-word-jumble .wj-small, .popomee-word-jumble .wj-terms { font-size: 0.8125rem; color: #46595b; }
.popomee-word-jumble .wj-summary { font-size: 0.9375rem; font-weight: 600; }
.popomee-word-jumble summary { cursor: pointer; min-height: 44px; padding-block: 10px; }
.popomee-word-jumble .wj-option-group { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.popomee-word-jumble .wj-option-group legend { margin-bottom: 6px; padding: 0; font-size: 0.9375rem; font-weight: 600; }
.popomee-word-jumble .wj-choices { display: grid; gap: 3px; padding: 3px; border: 1px solid var(--wj-border); border-radius: 8px; background: #e8edeb; }
.popomee-word-jumble .wj-choices--language { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.popomee-word-jumble .wj-choices--level { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.popomee-word-jumble .wj-choices button { width: 100%; min-width: 0; padding-inline: 6px; border-color: transparent; border-radius: 4px; background: #f7f9f8; }
.popomee-word-jumble .wj-choices--level button { padding-inline: 2px; font-size: clamp(0.75rem, 4vw, 0.875rem); white-space: nowrap; }
.popomee-word-jumble .wj-choices button[aria-pressed="true"] { color: #fff; background: var(--wj-teal); border-color: #183f42; font-weight: 700; }
.popomee-word-jumble .wj-choices button[aria-pressed="false"]:hover:not(:disabled) { background: #dce5e2; }
.popomee-word-jumble .wj-choices button[aria-pressed="true"]:hover:not(:disabled) { background: #254548; }
.popomee-word-jumble .wj-choices button[aria-pressed="true"]:focus-visible { outline-color: #fff; outline-offset: -4px; }
.popomee-word-jumble .wj-start { width: 100%; margin-bottom: 8px; padding-block: 12px; }
.popomee-word-jumble .wj-status { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.popomee-word-jumble .wj-status h2 { margin: 0; }
.popomee-word-jumble .wj-status span { font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.popomee-word-jumble .wj-question-meta { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 12px 0 10px; }
.popomee-word-jumble .wj-question-meta p { margin: 0; }
.popomee-word-jumble .wj-current-score, .popomee-word-jumble .wj-earned-points { font-weight: 600; font-variant-numeric: tabular-nums; }
.popomee-word-jumble .wj-board > p { font-size: 0.875rem; margin-bottom: 4px; }
.popomee-word-jumble .wj-tiles { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 12px; }
.popomee-word-jumble .wj-tiles li { padding: 0; margin: 0; width: 44px; height: 44px; list-style: none; }
.popomee-word-jumble .wj-tiles button { width: 44px; height: 44px; min-width: 44px; padding: 0; font-size: 1.25rem; font-weight: 600; text-align: center; }
.popomee-word-jumble .wj-tiles button[data-fixed="true"] { background: var(--wj-cream); border-color: var(--wj-teal); }
.popomee-word-jumble .wj-tiles button[aria-disabled="true"] { cursor: default; }
.popomee-word-jumble .wj-tiles button[data-used="true"] { visibility: hidden; }
.popomee-word-jumble .wj-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 10px; }
.popomee-word-jumble .wj-actions button { font-size: 0.875rem; }
.popomee-word-jumble .wj-actions .wj-primary { flex-basis: 100%; }
.popomee-word-jumble .wj-notice { min-height: 1.6em; font-size: 0.875rem; }
.popomee-word-jumble .wj-feedback { padding-block: 12px; overflow-wrap: anywhere; }
.popomee-word-jumble .wj-feedback h3 { color: var(--wj-teal); }
.popomee-word-jumble .wj-feedback[data-outcome="incorrect"] h3, .popomee-word-jumble .wj-feedback[data-outcome="timeout"] h3 { color: #983f34; }
.popomee-word-jumble .wj-confirm { border: 1px solid var(--wj-border); border-radius: 6px; padding: 12px; margin-block: 12px; }
.popomee-word-jumble .wj-quit { font-size: 0.8125rem; margin-block: 4px 12px; }
.popomee-word-jumble .wj-review { padding-left: 24px; }
.popomee-word-jumble .wj-review li { padding-block: 10px; border-bottom: 1px solid #c0cac6; overflow-wrap: anywhere; }
.popomee-word-jumble .wj-review strong, .popomee-word-jumble .wj-review span { display: block; }
.popomee-word-jumble .wj-help { font-size: 0.875rem; border-top: 1px solid #c0cac6; margin-top: 12px; }
.popomee-word-jumble .wj-terms { margin-top: 12px; }
@media (min-width: 640px) {
  .popomee-word-jumble .wj-actions .wj-primary { flex-basis: auto; }
  .popomee-word-jumble .wj-choices, .popomee-word-jumble .wj-start { max-width: 520px; }
}