.wpg-app--spelling-bee { display: flex; flex-direction: column; align-items: stretch; }
.wpg-app--spelling-bee .wpg-status { margin-bottom: 8px; }

/* Rank ladder */
.wpg-sb-rank { display: flex; align-items: center; gap: 14px; max-width: 520px; width: 100%; margin: 0 auto 12px; }
.wpg-sb-rank__name { flex: 0 0 auto; min-width: 92px; display: flex; flex-direction: column; line-height: 1.15; }
.wpg-sb-rank__name b { font-size: 16px; font-weight: 900; }
.wpg-sb-rank__name span { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.wpg-sb-track { position: relative; flex: 1 1 auto; height: 30px; margin: 0 16px 0 24px; }
.wpg-sb-track::before, .wpg-sb-track__fill { content: ''; position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--tile-line); width: 100%; }
.wpg-sb-track__fill { background: var(--accent); width: 0; transition: width .4s var(--ease); }
.wpg-sb-dot {
    position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
    background: var(--tile-line); display: flex; align-items: center; justify-content: center;
    font-style: normal; font-size: 11px; font-weight: 900; color: var(--accent-ink); transition: all .3s var(--ease);
}
.wpg-sb-dot.is-done { background: var(--accent); }
.wpg-sb-dot.is-cur { width: 30px; height: 30px; margin: -15px 0 0 -15px; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent); }
.wpg-sb-track.is-queen .wpg-sb-dot.is-cur { background: linear-gradient(135deg, var(--accent), #f59e0b); }

/* Found words */
.wpg-sb-found { max-width: 520px; width: 100%; margin: 0 auto 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.wpg-sb-found__head {
    display: flex !important; align-items: center; gap: 10px; width: 100%; border: 0 !important; background: transparent !important; padding: 10px 14px !important;
    font: inherit; color: var(--ink) !important; cursor: pointer; text-align: left; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
.wpg-sb-found__label { font-weight: 800; font-size: 14px; white-space: nowrap; }
.wpg-sb-found__preview { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-soft); font-size: 13px; text-transform: capitalize; }
.wpg-sb-found__chev { flex: 0 0 auto; color: var(--ink-soft); transition: transform .2s; }
.wpg-sb-found.is-open .wpg-sb-found__chev { transform: rotate(180deg); }
.wpg-sb-found.is-open .wpg-sb-found__preview { visibility: hidden; }
.wpg-sb-found__body { display: none; flex-wrap: wrap; gap: 4px 6px; padding: 2px 14px 12px; max-height: 260px; overflow: auto; }
.wpg-sb-found.is-open .wpg-sb-found__body { display: flex; }
.wpg-sb-word { font-size: 14px; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 6%, transparent); text-transform: capitalize; }
.wpg-sb-word.is-pangram { background: var(--accent-2); color: #3d2a00; font-weight: 900; }
.wpg-sb-word.is-bonus { background: transparent; border: 1px dashed var(--tile-line); color: var(--ink-soft); }
.wpg-sb-word.is-missed { background: transparent; color: #dc2626; border: 1px solid color-mix(in srgb, #dc2626 35%, transparent); }
.wpg-sb-empty { color: var(--ink-soft); font-size: 13px; }

/* Input */
.wpg-sb-inputwrap { position: relative; display: flex; justify-content: center; align-items: center; margin: 12px 0 6px; }
.wpg-sb-input {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: min(300px, 100%); min-height: 50px; padding: 0 10px;
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, var(--tile-line));
    font-size: 30px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; line-height: 1;
}
.wpg-sb-input span { color: var(--ink); }
.wpg-sb-input span.is-center { color: var(--accent); }
.wpg-sb-input span.is-bad { color: var(--tile-line); }
.wpg-sb-input span.wpg-sb-ph { font-size: 15px; font-weight: 700; color: var(--ink-soft); text-transform: none; letter-spacing: 0; opacity: .8; margin-left: 8px; }
.wpg-sb-input span.wpg-sb-caret { display: inline-block !important; width: 3px; height: 30px; margin-left: 2px; background: var(--accent); border-radius: 2px; animation: wpg-sb-blink 1s steps(1) infinite; }
.wpg-sb-input.is-empty span.wpg-sb-caret { margin-left: 0; }
.wpg-sb-input.is-shake { animation: wpg-shake .4s; }
@keyframes wpg-sb-blink { 50% { opacity: 0; } }
.wpg-sb-pop {
    position: absolute; top: -18px; left: 50%; transform: translate(-50%, 6px); opacity: 0; pointer-events: none; white-space: nowrap;
    background: var(--ink); color: var(--surface); font-weight: 800; font-size: 13.5px; padding: 5px 12px; border-radius: 999px; transition: opacity .2s, transform .25s var(--ease);
}
.wpg-sb-pop.is-on { opacity: 1; transform: translate(-50%, 0); }
.wpg-sb-pop.is-pangram { background: var(--accent); color: var(--accent-ink); }
.wpg-sb-pop.is-bonus { background: #2563eb; color: #fff; }

/* Hive */
.wpg-sb-hivewrap { display: flex; justify-content: center; margin: 8px 0 12px; }
.wpg-sb-hive { width: min(300px, 78vw); height: auto; overflow: visible; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.wpg-sb-cell { cursor: pointer; }
.wpg-sb-cell__in { transition: transform .12s var(--ease); transform-box: fill-box; transform-origin: center; }
.wpg-sb-cell polygon { fill: color-mix(in srgb, var(--ink) 9%, var(--surface)); transition: fill .15s; }
.wpg-sb-cell:hover polygon { fill: color-mix(in srgb, var(--ink) 14%, var(--surface)); }
.wpg-sb-cell.is-center polygon { fill: var(--accent); }
.wpg-sb-cell.is-center:hover polygon { fill: color-mix(in srgb, var(--accent) 88%, #000); }
.wpg-sb-cell text { font-size: 38px; font-weight: 900; fill: var(--ink); text-transform: uppercase; pointer-events: none; transition: opacity .14s; font-family: inherit; }
.wpg-sb-cell.is-center text { fill: #1f1600; }
.wpg-sb-cell.is-press .wpg-sb-cell__in { transform: scale(.9); }
.wpg-sb-hive.is-shuffling .wpg-sb-cell:not(.is-center) text { opacity: 0; }
.wpg-sb-hive.is-off { opacity: .55; pointer-events: none; }

.wpg-sb-controls { gap: 10px; }
.wpg-sb-controls .wpg-btn { min-width: 96px; border: 1px solid var(--tile-line); }
.wpg-sb-controls .wpg-sb-round { min-width: 0; width: 48px; height: 44px; padding: 0; }
.wpg-sb-round svg { width: 20px; height: 20px; }
.wpg-sb-endrow:empty { display: none; }
.wpg-sb-endrow .wpg-btn svg { width: 18px; height: 18px; }

/* Dialog bits */
.wpg-sb-endlabel { font-weight: 800; font-size: 14px; margin: 4px 0 6px; }
.wpg-sb-endwords { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 12px; max-height: 160px; overflow: auto; }
.wpg-sb-htable { border-collapse: collapse; margin: 6px auto 10px; font-size: 14px; }
.wpg-sb-htable th, .wpg-sb-htable td { padding: 3px 7px; text-align: center; border-bottom: 1px solid var(--line); }
.wpg-sb-htable th { font-weight: 900; text-transform: uppercase; color: var(--ink-soft); }
.wpg-sb-htable td.is-tot { font-weight: 900; }
.wpg-sb-two { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; font-weight: 800; font-size: 14px; text-transform: uppercase; }

@media (max-width: 420px) {
    .wpg-sb-rank { gap: 6px; }
    .wpg-sb-rank__name { min-width: 80px; }
    .wpg-sb-track { margin: 0 14px 0 20px; }
    .wpg-sb-input { font-size: 27px; }
}