.wpg-kilordle-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.wpg-kilordle-top .wpg-pill { order: -1; }
.wpg-kilordle-solved { flex: 1 1 auto; }
.wpg-kilordle-solved b, .wpg-kilordle-left b { color: var(--ink); font-variant-numeric: tabular-nums; }
.wpg-kilordle-left.is-low b { color: var(--accent); }
.wpg-kilordle-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; margin: 8px 0 12px; }
.wpg-kilordle-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--ok))); transition: width .5s var(--ease); }

.wpg-kilordle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
@media (min-width: 601px) { .wpg-kilordle-grid { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); } }
.wpg-kilordle-card {
    border: 1px solid var(--line); border-radius: 10px; background: var(--tile-bg); padding: 5px 5px 4px;
    display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0;
}
.wpg-kilordle-card.is-new { border-color: color-mix(in srgb, var(--ink) 30%, var(--tile-line)); animation: wpg-kilordle-flash .7s var(--ease); }
@keyframes wpg-kilordle-flash { 0% { background: color-mix(in srgb, var(--mid) 22%, var(--tile-bg)); } }
.wpg-kilordle-t { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; width: 100%; }
.wpg-kilordle-t i {
    font-style: normal; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 4px;
    border: 1.5px solid var(--tile-line); font-weight: 800; font-size: 13px; line-height: 1; text-transform: uppercase; color: var(--ink);
}
.wpg-kilordle-t i.is-g { background: var(--ok); border-color: transparent; color: #fff; }
.wpg-kilordle-y { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.wpg-kilordle-y b {
    font-size: 10.5px; font-weight: 800; line-height: 15px; min-width: 14px; padding: 0 2px; border-radius: 3px; text-align: center;
    background: var(--mid); color: #fff; text-transform: uppercase;
}
.wpg-kilordle-bar.is-idle { opacity: .45; }

.wpg-kilordle-intro { grid-column: 1 / -1; text-align: center; padding: 18px 8px 14px; }
.wpg-kilordle-intro__n { font-size: 54px; font-weight: 900; line-height: 1; letter-spacing: -1px; color: var(--accent); font-variant-numeric: tabular-nums; }
.wpg-kilordle-intro__l { font-size: 15px; font-weight: 800; color: var(--ink); margin-top: 4px; }
.wpg-kilordle-ghosts { display: flex; justify-content: center; gap: 8px; margin: 16px 0 14px; }
.wpg-kilordle-ghost { display: grid; grid-template-columns: repeat(5, 12px); gap: 2px; padding: 5px; border-radius: 7px; border: 1px solid var(--line); opacity: .75; }
.wpg-kilordle-ghost i { height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.wpg-kilordle-ghost:nth-child(2) i:nth-child(2), .wpg-kilordle-ghost:nth-child(4) i:nth-child(5), .wpg-kilordle-ghost:nth-child(3) i:nth-child(1) { background: var(--ok); }
.wpg-kilordle-ghost:nth-child(1) i:nth-child(4), .wpg-kilordle-ghost:nth-child(3) i:nth-child(3), .wpg-kilordle-ghost:nth-child(5) i:nth-child(2) { background: var(--mid); }
.wpg-kilordle-intro__t { font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); max-width: 360px; margin: 0 auto; }
.wpg-kilordle-intro__t b { color: var(--ink); }
.wpg-kilordle-more { text-align: center; font-size: 12.5px; color: var(--ink-soft); margin: 6px 0 0; min-height: 16px; }

.wpg-kilordle-input { display: flex; justify-content: center; gap: 6px; margin: 10px 0 6px; --tile: 44px; }
.wpg-kilordle-input.is-shake { animation: wpg-shake .4s; }
.wpg-kilordle-input.is-win .wpg-tile-l { animation: wpg-bounce .5s ease both; background: var(--ok); border-color: transparent; color: #fff; }
.wpg-kilordle-status { margin: 0 0 2px; font-weight: 700; min-height: 20px; }
.wpg-kilordle-status b { color: var(--ink); text-transform: uppercase; }
.wpg-kilordle-status.is-hit, .wpg-kilordle-status.is-hit b { color: var(--ok); }
.wpg-app--kilordle .wpg-kb { margin-top: 8px; }

.wpg-kilordle-rest { text-align: center; font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; }
.wpg-kilordle-rest__w { font-weight: 800; color: var(--ink); margin-top: 4px; letter-spacing: .3px; }

@media (max-width: 420px) {
    .wpg-kilordle-top { font-size: 13.5px; }
    .wpg-kilordle-top .wpg-pill { display: none; }
    .wpg-kilordle-input { --tile: 38px; margin-top: 8px; }
    .wpg-kilordle-t i { font-size: 12px; }
    .wpg-kilordle-ghosts { gap: 6px; }
    .wpg-kilordle-ghost { grid-template-columns: repeat(5, 9px); padding: 4px; }
    .wpg-kilordle-ghost i { height: 9px; }
}