.wpg-app--phrasle { min-height: 0 !important; }
.wpg-phrasle-head { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 14px !important; }
.wpg-phrasle-hearts { display: flex; gap: 5px; justify-content: center; font-size: 21px; line-height: 1; }
.wpg-phrasle-hearts span { transition: transform .2s var(--ease), color .2s; }
.wpg-phrasle-hearts .is-on { color: #ef4444; }
.wpg-phrasle-hearts .is-off { color: color-mix(in srgb, var(--ink) 18%, transparent); }
.wpg-phrasle-hearts .is-lost { animation: wpg-phrasle-lost .5s var(--ease); }
.wpg-phrasle-hearts.is-shake { animation: wpg-shake .4s; }
@keyframes wpg-phrasle-lost { 0% { transform: scale(1.5); color: #ef4444; } }

.wpg-phrasle-phrase { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; margin: 4px auto 14px; max-width: 560px; }
.wpg-phrasle-word { display: flex; gap: 4px; align-items: flex-end; }
.wpg-phrasle-word .wpg-tile-l { border-radius: 8px; font-size: calc(var(--tile) * .55); }
.wpg-phrasle-word .wpg-tile-l.is-correct { background: var(--accent); color: var(--accent-ink); }
.wpg-phrasle-word .wpg-tile-l.is-absent { background: color-mix(in srgb, #ef4444 16%, var(--tile-bg)); color: #b91c1c; border-color: transparent; }
.wpg-phrasle-punct { font-weight: 900; font-size: calc(var(--tile) * .6); line-height: var(--tile); color: var(--ink-soft); padding: 0 1px; }

.wpg-phrasle-info { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.wpg-phrasle-info:empty { display: none; }
.wpg-phrasle-card { background: var(--accent-soft); border-radius: 12px; padding: 10px 14px; font-size: 14.5px; line-height: 1.45; text-align: left; }
.wpg-phrasle-card b { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-soft); margin-bottom: 2px; }
.wpg-phrasle-info + .wpg-phrasle-solve, .wpg-phrasle-info:not(:empty) { margin-bottom: 12px; }

.wpg-phrasle-solve { display: flex; gap: 8px; max-width: 520px; margin: 0 auto 10px; }
.wpg-phrasle-solve .wpg-input { flex: 1 1 auto; min-width: 0; }
.wpg-phrasle-solve .wpg-input.is-shake { animation: wpg-shake .4s; border-color: #ef4444; }
.wpg-phrasle-acts { margin: 4px 0 2px; }
.wpg-phrasle-acts svg { width: 17px; height: 17px; }
.wpg-phrasle-end { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.wpg-phrasle-end__p { text-align: center; font-size: 20px; font-weight: 900; line-height: 1.3; color: var(--ink); }