.wpg-app--suika { padding: 12px 10px 14px; }
.wpg-suika {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "cards" "stage" "evo";
    gap: 10px; justify-content: center;
}
.wpg-suika.is-wide {
    grid-template-columns: auto 200px; grid-template-areas: "stage cards" "stage evo" "stage keys";
    grid-template-rows: auto 1fr auto; align-items: stretch; gap: 12px 16px;
}
.wpg-suika-cards { grid-area: cards; display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.wpg-suika.is-wide .wpg-suika-cards { grid-template-columns: 1fr 1fr; }
.wpg-suika.is-wide .wpg-suika-card.is-score { grid-column: 1 / -1; }
.wpg-suika-card {
    background: var(--accent-soft); border: 1px solid var(--line); border-radius: 14px; padding: 7px 12px;
    min-width: 0; display: flex; flex-direction: column; justify-content: center;
}
.wpg-suika-k {
    font-size: 11.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.wpg-suika-v { font-size: 22px; font-weight: 900; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpg-suika-card.is-score .wpg-suika-v { color: var(--accent); }
.wpg-suika.is-wide .wpg-suika-card.is-score .wpg-suika-v { font-size: 32px; }
.wpg-suika-card.is-next { flex-direction: row; align-items: center; gap: 6px; padding: 4px 8px 4px 12px; }
.wpg-suika.is-wide .wpg-suika-card.is-next { flex-direction: column; align-items: flex-start; gap: 0; padding: 7px 12px; }
.wpg-suika-next { width: 44px; height: 44px; display: block; flex: 0 0 auto; }
.wpg-suika.is-wide .wpg-suika-next { align-self: center; width: 52px; height: 52px; }

.wpg-suika-stage { grid-area: stage; position: relative; justify-self: center; line-height: 0; }
.wpg-suika-cv { display: block; touch-action: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wpg-suika-over {
    position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    line-height: 1.2; text-align: center; animation: wpg-suika-in .3s ease both;
}
.wpg-suika-over.is-on { display: flex; }
.wpg-suika-over__t { font-size: 26px; font-weight: 900; color: var(--ink); }
.wpg-suika-over__s { font-size: 40px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
@keyframes wpg-suika-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

.wpg-suika-evo { grid-area: evo; min-width: 0; }
.wpg-suika-evo .wpg-suika-k, .wpg-suika-list, .wpg-suika-keys { display: none; }
.wpg-suika-strip { display: block; width: 100%; height: 42px; }
.wpg-suika.is-wide .wpg-suika-strip { display: none; }
.wpg-suika.is-wide .wpg-suika-evo {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--accent-soft); border: 1px solid var(--line); border-radius: 14px; padding: 8px 8px 6px;
}
.wpg-suika.is-wide .wpg-suika-evo .wpg-suika-k { display: block; padding: 0 4px 4px; }
.wpg-suika.is-wide .wpg-suika-list { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: space-between; gap: 1px; }
.wpg-suika-er {
    display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 1px 6px; border-radius: 9px;
    font-size: 13.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.2; opacity: .55; transition: opacity .2s, background .2s;
}
.wpg-suika-er.is-got { opacity: 1; color: var(--ink); }
.wpg-suika-er.is-top { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.wpg-suika-er__n { width: 16px; flex: 0 0 auto; text-align: right; font-size: 11.5px; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wpg-suika-er__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpg-suika-er .wpg-suika-ico { flex: 0 0 auto; }
.wpg-suika.is-wide .wpg-suika-keys {
    display: block; grid-area: keys; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 14px;
    font-size: 12.5px; line-height: 1.45; color: var(--ink-soft);
}
.wpg-suika-keys b { color: var(--ink); font-weight: 800; }
.wpg-suika-statfruit { justify-content: center; margin-top: 12px; }

.wpg-suika-help { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px 4px; margin-top: 12px; }
.wpg-suika-hi { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.2; }
.wpg-suika-ico { display: block; }
.wpg-suika-end { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 2px 0 8px; }
.wpg-suika-end__score { font-size: 44px; font-weight: 900; line-height: 1.05; color: var(--accent); font-variant-numeric: tabular-nums; }
.wpg-page--suika .wpg-modal__actions .wpg-btn { white-space: nowrap; }
.wpg-suika-end__best { font-weight: 800; color: var(--ink-soft); }
.wpg-suika-end__fruit { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.wpg-page--suika .wpg-tool.is-on { color: var(--accent); background: var(--accent-soft); }