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

.wpg-sq-prog { max-width: 560px; width: 100%; margin: 0 auto 6px; }
.wpg-sq-prog__text { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 700; color: var(--ink-soft); margin-bottom: 5px; }
.wpg-sq-prog__text b { color: var(--ink); font-weight: 900; }
.wpg-sq-prog__bonus { color: #2563eb; font-weight: 800; }
.wpg-sq-prog__bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.wpg-sq-prog__bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .4s var(--ease); }

.wpg-sq-word {
    text-align: center; height: 40px; line-height: 40px; font-size: 26px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px;
    color: var(--ink); transition: color .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wpg-sq-word.is-empty, .wpg-sq-word.is-msg { font-size: 15px; letter-spacing: 0; text-transform: none; }
.wpg-sq-word.is-empty { color: var(--ink-soft); font-weight: 700; opacity: .75; }
.wpg-sq-word.is-msg { font-size: 16px; }
.wpg-sq-word.is-nopath { color: var(--ink-soft); opacity: .6; }
.wpg-sq-word.is-ok { color: var(--ok); }
.wpg-sq-word.is-bonus { color: #2563eb; }
.wpg-sq-word.is-dup { color: var(--mid); }
.wpg-sq-word.is-bad { color: #dc2626; }

.wpg-sq-gridwrap { display: flex; justify-content: center; margin: 2px 0 12px; }
.wpg-sq-grid { position: relative; display: grid; gap: var(--gap, 9px); flex: 0 0 auto; margin: 0 auto; touch-action: none; -webkit-tap-highlight-color: transparent; }
.wpg-sq-grid.is-shake { animation: wpg-shake .35s; }
.wpg-sq-grid.is-off { pointer-events: none; }
.wpg-sq-cell {
    width: var(--cell); height: var(--cell); border-radius: 16px; display: flex; align-items: center; justify-content: center;
    background: var(--tile-bg); border: 2px solid var(--tile-line); box-shadow: 0 2px 0 var(--tile-line);
    font-size: calc(var(--cell, 64px) * .46) !important; font-weight: 900 !important; line-height: 1; text-transform: uppercase; color: var(--ink); cursor: pointer;
    transition: background .15s, border-color .15s, opacity .5s, transform .12s; position: relative; z-index: 1;
}
.wpg-sq-cell.is-hole { visibility: hidden; }
.wpg-sq-cell.is-faded { opacity: .28; }
.wpg-sq-cell.is-path { background: var(--accent-2); border-color: var(--accent); transform: scale(1.04); opacity: 1; }
.wpg-sq-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.wpg-sq-line polyline { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; opacity: .5; transition: stroke .15s; }
.wpg-sq-line.is-ok polyline { stroke: var(--ok); }
.wpg-sq-line.is-bonus polyline { stroke: #2563eb; }
.wpg-sq-line.is-dup polyline { stroke: var(--mid); }
.wpg-sq-line.is-bad polyline { stroke: #dc2626; }

.wpg-sq-endrow { margin-bottom: 12px; }
.wpg-sq-endrow:empty { display: none; }
.wpg-sq-endrow .wpg-btn svg { width: 18px; height: 18px; }

.wpg-sq-list { max-width: 560px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.wpg-sq-group__head { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; margin-bottom: 5px; }
.wpg-sq-group__head b { font-weight: 900; }
.wpg-sq-group__head span { color: var(--ink-soft); font-weight: 800; }
.wpg-sq-group.is-done .wpg-sq-group__head span { color: var(--ok); }
.wpg-sq-group__words { display: flex; flex-wrap: wrap; gap: 5px 6px; }
.wpg-sq-w { font-size: 14px; font-weight: 800; padding: 3px 9px; border-radius: 8px; background: color-mix(in srgb, var(--ok) 14%, transparent); text-transform: uppercase; letter-spacing: .5px; }
.wpg-sq-w.is-missed { background: transparent; color: #dc2626; border: 1px solid color-mix(in srgb, #dc2626 35%, transparent); }
.wpg-sq-w.is-bonus { background: color-mix(in srgb, #2563eb 12%, transparent); }
.wpg-sq-blank { display: inline-flex; gap: 2px; padding: 3px 5px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.wpg-sq-blank i { width: 13px; height: 20px; border-bottom: 2px solid color-mix(in srgb, var(--ink) 30%, transparent); font-style: normal; font-size: 13px; font-weight: 900; text-transform: uppercase; text-align: center; line-height: 18px; color: var(--accent); }

.wpg-sq-bonus { max-width: 560px; width: 100%; margin: 14px auto 0; border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; }
.wpg-sq-bonus summary { cursor: pointer; font-weight: 800; font-size: 14px; color: var(--ink); }
.wpg-sq-bonus__body { display: flex; flex-wrap: wrap; gap: 5px 6px; padding-top: 8px; max-height: 220px; overflow: auto; }
.wpg-sq-empty { font-size: 13px; color: var(--ink-soft); }

.wpg-sq-endlabel { font-weight: 800; font-size: 14px; margin: 4px 0 6px; }
.wpg-sq-endwords { display: flex; flex-wrap: wrap; gap: 4px 6px; max-height: 170px; overflow: auto; margin-bottom: 10px; }