/* Bubble Word Jam V6 (26 Oct 2026). Every selector is scoped to .bwj (Bubble Word Jam pages only). Loaded after bwj.css.
   Palette is the existing CluePeak dark tokens: surface #332f4e, surface-2 #3d3860, ink #faf8ff, border #625b89, gold #d7b36b/#e0bb74/#f1c76e. */

/* Anchors land below the sticky header (position:sticky, sw-range.css .nav). Header measured at 71px (>=561px wide), 121px (376-560px) and 169px (<=375px).
   Re-measured on production with the real web fonts: 71px (>=561px wide), 121px (401-560px) and 169px (<=400px).
   112px is the initial value; narrow phones need more because the tabs wrap. bwj-v6.js replaces these static values with the measured height + 12px. */
.bwj { --bwj-sm: 112px; }
@media (max-width: 560px) { .bwj { --bwj-sm: 140px; } }
@media (max-width: 400px) { .bwj { --bwj-sm: 188px; } }
.bwj .bwj-ac { scroll-margin-top: var(--bwj-sm); }

/* ---- Part 3: homepage exact-level shortcuts ---- */
.bwj .bwj-exact-level-shortcuts .bwj-els__grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 18px 0 0; padding: 0; }
@media (min-width: 500px) { .bwj .bwj-exact-level-shortcuts .bwj-els__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .bwj .bwj-exact-level-shortcuts .bwj-els__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bwj .bwj-exact-level-shortcuts .bwj-els__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .bwj .bwj-exact-level-shortcuts .bwj-els__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.bwj .bwj-exact-level-shortcuts .bwj-els__grid li { margin: 0; padding: 0; min-width: 0; }
.bwj .bwj-exact-level-shortcuts .bwj-els__grid a { display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; width: 100%; height: 100%; min-height: 48px; padding: 12px 14px;
  background: #332f4e; color: #faf8ff; border: 1px solid #625b89; border-radius: 14px; font-size: 14px; font-weight: 650; line-height: 1.4; text-align: left; text-decoration: none;
  overflow-wrap: normal; word-break: normal; transition: background-color .15s ease, border-color .15s ease; }
.bwj .bwj-exact-level-shortcuts .bwj-els__grid a:hover { background: #3d3860; border-color: #d7b36b; }
.bwj .bwj-exact-level-shortcuts .bwj-els__grid a:focus-visible { outline: 3px solid #f1c76e; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bwj .bwj-exact-level-shortcuts .bwj-els__grid a { transition: none; } }

/* ---- Part 4: level jump navigation directly under the H1 ---- */
.bwj .bwj-jump { margin: 18px 0 0; max-width: 780px; }
.bwj .bwj-jump .bwj-jump__label { margin: 0 0 10px; font-size: 15px; font-weight: 700; line-height: 1.4; color: #faf8ff; }
.bwj .bwj-jump .bwj-jump__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.bwj .bwj-jump .bwj-jump__list li { margin: 0; padding: 0; min-width: 0; }
.bwj .bwj-jump .bwj-jump__list .jb { display: flex; width: 100%; box-sizing: border-box; min-width: 0; min-height: 44px; padding: 8px 6px; border-radius: 12px; text-align: center; overflow-wrap: anywhere; }
@media (min-width: 500px) and (max-width: 767px) { .bwj .bwj-jump .bwj-jump__list { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); } }
@media (max-width: 499px) {
  .bwj .bwj-jump .bwj-jump__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bwj .bwj-jump .bwj-jump__list li:nth-child(5) { grid-column: 1 / -1; }
}
.bwj .bwj-jump .jb:focus-visible { outline: 3px solid #f1c76e; outline-offset: 3px; }

/* ---- Part 7: Level 830 explanation ---- */
.bwj .bwj-level-explanation { background: #332f4e; border-left: 4px solid #e0bb74; border-radius: 12px; padding: 16px; margin: 16px 0; color: #faf8ff; }
.bwj .bwj-level-explanation h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.35; color: #faf8ff; }
.bwj .bwj-level-explanation p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; color: #faf8ff; max-width: none; }
.bwj .bwj-level-explanation p:last-child { margin-bottom: 0; }

/* ---- Part 5: Daily directory ---- */
.bwj .bwj-dir-h3 { margin: 26px 0 0; font-size: 19px; line-height: 1.35; color: #faf8ff; }
.bwj .bwj-search-help { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: #ddd6f3; max-width: 800px; margin-inline: auto; }
.bwj .bwj-daily-dir { display: grid; gap: 12px; margin-top: 22px; }
.bwj .bwj-daily-dir summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; list-style: none; color: #faf8ff; }
.bwj .bwj-daily-dir summary::-webkit-details-marker { display: none; }
.bwj .bwj-daily-dir summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid #faf8ff; border-bottom: 2px solid #faf8ff; transform: rotate(45deg); transition: transform .15s ease; margin-right: 4px; }
.bwj .bwj-daily-dir details[open] > summary::after { transform: rotate(-135deg); }
.bwj .bwj-daily-dir summary:focus-visible { outline: 3px solid #f1c76e; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bwj .bwj-daily-dir summary::after { transition: none; } }
.bwj .bwj-dgroup { margin: 0; padding: 0; border: 0; background: none; }
.bwj .bwj-dgroup > summary { background: #3d3860; border-radius: 14px; padding: 14px 16px; font-size: 16px; font-weight: 700; line-height: 1.4; min-height: 48px; }
.bwj .bwj-dgroup__body { padding: 14px 0 4px; }
.bwj .bwj-dgroup__note { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: #ddd6f3; max-width: 820px; }
.bwj .bwj-dbatch { margin: 10px 0 0; }
.bwj .bwj-dbatch > summary { background: #332f4e; border: 1px solid #625b89; border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 650; line-height: 1.4; min-height: 44px; }
.bwj .bwj-dgrid { display: grid; gap: 10px; grid-template-columns: repeat(1, minmax(0, 1fr)); margin-top: 12px; }
@media (min-width: 500px) { .bwj .bwj-dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .bwj .bwj-dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bwj .bwj-dgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .bwj .bwj-dgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.bwj .bwj-dgrid details.bwj-dcard { min-width: 0; box-sizing: border-box; margin: 0; padding: 12px; border-radius: 14px; background: #332f4e; border: 1px solid #625b89; border-left: 4px solid rgb(147, 87, 255); color: #faf8ff; box-shadow: none; overflow: visible; scroll-margin-top: var(--bwj-sm); }
.bwj .bwj-dgrid details.bwj-dcard[open] { grid-column: 1 / -1; }
.bwj .bwj-dgrid details.bwj-dcard > summary { font-size: 14px; font-weight: 700; line-height: 1.4; min-height: 24px; }
.bwj .bwj-dgrid details.bwj-dcard .srcline { margin-top: 10px; color: #ddd6f3; }
.bwj .bwj-dgrid details.bwj-dcard .catgrid { margin-top: 12px; }
.bwj .bwj-dgroup, .bwj .bwj-dbatch { scroll-margin-top: var(--bwj-sm); }

/* ---- Part 6: Daily search result presentation ---- */
.bwj .bwj-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bwj .bwj-res { margin-top: 24px; }
.bwj .bwj-res .bwj-res__h { margin: 0; font-size: 20px; line-height: 1.35; color: #faf8ff; }
.bwj .bwj-res .bwj-res__count, .bwj .bwj-res .bwj-res__status { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: #faf8ff; }
.bwj .bwj-res .bwj-res__status:focus { outline: 3px solid #f1c76e; outline-offset: 3px; }
.bwj .bwj-res .bwj-res__toggle, .bwj .bwj-res .bwj-res__more { margin-top: 12px; }
.bwj .bwj-res .bwj-res__list[hidden] { display: none; }
.bwj .bwj-res .bwj-res__more[hidden] { display: none !important; }
.bwj .bwj-res .bwj-res__toggle:focus-visible, .bwj .bwj-res .bwj-res__more:focus-visible { outline: 3px solid #f1c76e; outline-offset: 3px; }

/* ---- Daily page, phones: the five coverage stat cards sit two per row so the collapsed page stays under 8,000px at 320px (no content removed) ---- */
@media (max-width: 480px) { .bwj.bwj-daily #coverage .hstats.h3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; } }