.wpg-app--quintessential .wpg-q5-top { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.wpg-app--quintessential .wpg-q5-pair { display: inline-flex; gap: inherit; flex-wrap: nowrap; }
.wpg-app--quintessential .wpg-q5-top .wpg-pill { white-space: nowrap; font-weight: 700; color: var(--ink-soft); gap: 4px; }
.wpg-app--quintessential .wpg-q5-top b { font-weight: 800; color: var(--ink); font-size: 14px; }
@media (max-width: 420px) {
    .wpg-app--quintessential .wpg-q5-top { gap: 5px; }
    .wpg-app--quintessential .wpg-q5-top .wpg-pill { padding: 5px 9px; font-size: 12.5px; }
}
.wpg-q5-grid {
    display: grid; grid-template-columns: repeat(5, var(--tile, 60px)); gap: 8px; justify-content: center;
    position: relative; margin: 4px auto 12px; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.wpg-q5-grid .wpg-q5-tile {
    position: relative; padding: 0; margin: 0; font-family: inherit; cursor: grab; line-height: 1;
    transition: background-color .22s, border-color .22s, box-shadow .15s, color .22s;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .06);
}
.wpg-q5-grid .wpg-q5-tile.is-correct, .wpg-q5-grid .wpg-q5-tile.is-present { color: #fff; border-color: transparent; }
.wpg-q5-grid .wpg-q5-tile.is-sel { box-shadow: 0 0 0 3px var(--accent), 0 6px 14px color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); }
.wpg-q5-grid .wpg-q5-tile.is-over { box-shadow: 0 0 0 3px var(--accent-2), 0 0 0 6px var(--accent); }
.wpg-q5-grid .wpg-q5-tile.is-lifted { opacity: .28; }
.wpg-q5-grid .wpg-q5-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wpg-q5-grid.is-done .wpg-q5-tile { cursor: default; }
.wpg-q5-grid.is-win .wpg-q5-tile { animation: wpg-bounce .5s ease both; }
.wpg-q5-grid.is-win .wpg-q5-tile:nth-child(5n+2) { animation-delay: .06s; }
.wpg-q5-grid.is-win .wpg-q5-tile:nth-child(5n+3) { animation-delay: .12s; }
.wpg-q5-grid.is-win .wpg-q5-tile:nth-child(5n+4) { animation-delay: .18s; }
.wpg-q5-grid.is-win .wpg-q5-tile:nth-child(5n) { animation-delay: .24s; }
.wpg-q5-ghost {
    position: fixed !important; left: 0; top: 0; margin: 0; pointer-events: none; z-index: 10003; box-sizing: border-box;
    transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 14px 30px rgba(15, 23, 42, .28) !important;
    display: flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 800;
    text-transform: uppercase;
}
.wpg-q5-legend { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-soft); font-weight: 700; margin-bottom: 12px; }
.wpg-q5-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wpg-q5-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.wpg-q5-legend i.is-correct { background: var(--ok); }
.wpg-q5-legend i.is-present { background: var(--mid); }
.wpg-q5-end { text-align: center; margin-bottom: 8px; }
.wpg-app--quintessential .wpg-btn svg, .wpg-page--quintessential .wpg-modal .wpg-btn svg { width: 17px; height: 17px; flex: 0 0 auto; display: block; }
.wpg-q5-stars { font-size: 34px; letter-spacing: 4px; color: var(--mid); line-height: 1.1; margin-bottom: 8px; }
.wpg-q5-words { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.wpg-q5-words span { padding: 4px 10px; border-radius: 8px; background: var(--ok); color: #fff; font-weight: 800; letter-spacing: 1.5px; font-size: 14px; }