.wpg-app--combinations { --c0: #0d9488; --c1: #2563eb; --c2: #16a34a; --c3: #9333ea; --c4: #db2777; --c5: #0891b2; --c6: #a16207; --c7: #4f46e5; }
.wpg-combinations-head { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.wpg-combinations-head .wpg-pill.is-bad { background: color-mix(in srgb, #ef4444 14%, transparent); }
.wpg-combinations-c0 { --c: var(--c0); } .wpg-combinations-c1 { --c: var(--c1); } .wpg-combinations-c2 { --c: var(--c2); } .wpg-combinations-c3 { --c: var(--c3); }
.wpg-combinations-c4 { --c: var(--c4); } .wpg-combinations-c5 { --c: var(--c5); } .wpg-combinations-c6 { --c: var(--c6); } .wpg-combinations-c7 { --c: var(--c7); }

.wpg-combinations-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-width: 520px; margin: 0 auto 12px; }
.wpg-combinations-slot {
    min-height: 36px; border-radius: 10px; border: 2px dashed var(--tile-line); display: flex; align-items: center; justify-content: center;
    gap: 3px; padding: 4px 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; font-size: 15px; overflow: hidden;
}
.wpg-combinations-slot.is-found { border: 2px solid transparent; background: var(--c); color: #fff; }
.wpg-combinations-slot.is-missed { border-style: solid; background: color-mix(in srgb, var(--no) 18%, transparent); color: var(--ink-soft); }
.wpg-combinations-slot.is-pop { animation: wpg-combinations-pop .45s var(--ease); }
.wpg-combinations-word.is-hint { color: var(--accent); }
.wpg-combinations-dots { display: inline-flex; gap: 3px; }
.wpg-combinations-dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); display: block; }

.wpg-combinations-preview {
    min-height: 48px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; margin: 0 auto 12px; max-width: 520px;
    border-radius: 12px; background: var(--accent-soft); padding: 6px 10px; font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: 1px;
}
.wpg-combinations-preview span { padding: 0 2px; border-bottom: 3px solid var(--accent); line-height: 1.2; }
.wpg-combinations-preview em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.wpg-combinations-preview.is-shake { animation: wpg-shake .4s; }

.wpg-combinations-board { --cols: 6; --gap: 7px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); max-width: 520px; margin: 0 auto; }
.wpg-combinations-piece {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0;
    position: relative; height: 46px; border: 0; border-radius: 11px; cursor: pointer; padding: 0 4px;
    background: color-mix(in srgb, var(--ink) 8%, var(--surface)); color: var(--ink); font: inherit; font-weight: 900; font-size: 18px;
    text-transform: uppercase; letter-spacing: .5px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08);
    transition: transform .12s var(--ease), background .15s, color .15s; touch-action: manipulation;
}
.wpg-combinations-piece:not(:disabled):hover { transform: translateY(-1px); }
.wpg-combinations-piece:not(:disabled):active { transform: scale(.95); }
.wpg-combinations-piece.is-sel { background: var(--surface); color: var(--accent); box-shadow: inset 0 0 0 2.5px var(--accent), 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); transform: translateY(-2px); }
.wpg-combinations-piece.is-sel b { background: var(--accent); color: var(--accent-ink); }
.wpg-combinations-piece.is-hint { outline: 2px dashed var(--accent); outline-offset: -4px; }
.wpg-combinations-piece.is-locked { background: var(--c); color: #fff; opacity: .9; cursor: default; box-shadow: none; }
.wpg-combinations-piece:disabled:not(.is-locked) { cursor: default; opacity: .6; }
.wpg-combinations-piece b {
    position: absolute; top: -6px; right: -4px; min-width: 19px; height: 19px; border-radius: 10px; padding: 0 5px;
    background: var(--ink); color: var(--surface); font-size: 11px; line-height: 19px; letter-spacing: 0;
}
.wpg-combinations-piece.is-shake { animation: wpg-shake .4s; background: color-mix(in srgb, #ef4444 75%, var(--surface)); color: #fff; }

.wpg-combinations-ctrls { margin-top: 14px; }
.wpg-combinations-ctrls .wpg-btn { min-width: 112px; }
.wpg-combinations-ctrls .wpg-combinations-icon { min-width: 0; width: 44px; padding: 0; }
.wpg-combinations-ctrls svg, .wpg-combinations-extras svg { width: 18px; height: 18px; }
.wpg-combinations-extras { margin-top: 10px; }
.wpg-combinations-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 12px; }
.wpg-combinations-list span { padding: 4px 10px; border-radius: 8px; background: color-mix(in srgb, var(--no) 25%, transparent); font-weight: 800; text-transform: uppercase; font-size: 13px; }
.wpg-combinations-list span.is-found { background: var(--ok); color: #fff; }
@keyframes wpg-combinations-pop { 40% { transform: scale(1.06); } }
@media (max-width: 420px) {
    .wpg-combinations-board { --cols: 4; --gap: 6px; }
    .wpg-combinations-piece { font-size: 16px; height: 44px; }
    .wpg-combinations-slot { font-size: 13px; min-height: 32px; }
    .wpg-combinations-preview { font-size: 19px; }
}