:root {
    --a: #37d67a;
    --a-dark: #0aa86a;
    --b: #ff4e86;
    --b-dark: #ef3d3d;
    --count: #35d7ff;
    --count-dark: #0d74ff;
}

body.popit-page--subtracao {
    background:
        radial-gradient(circle at 12% 15%, rgba(255, 255, 255, 0.98), transparent 27%),
        radial-gradient(circle at 86% 12%, rgba(55, 214, 122, 0.25), transparent 28%),
        radial-gradient(circle at 10% 78%, rgba(255, 78, 134, 0.18), transparent 30%),
        linear-gradient(180deg, #f2fff8 0%, #e5f8ff 48%, #d8e8ff 100%);
}

.popit-page--subtracao .popit-board {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.42), transparent 38%),
        linear-gradient(135deg, #37d67a 0%, #00c8ff 44%, #806dff 70%, #ff4e86 100%);
}

.popit-page--subtracao .bubble.is-a {
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.85), transparent 30%),
        linear-gradient(145deg, #a8ffcb, var(--a) 48%, var(--a-dark));
}

.popit-page--subtracao .bubble.is-b {
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.86), transparent 30%),
        linear-gradient(145deg, #ffd15c, #ff7b39 38%, var(--b));
}

.popit-page--subtracao .bubble.is-leftover {
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.88), transparent 30%),
        linear-gradient(145deg, #99f5ff, var(--count) 48%, var(--count-dark));
    box-shadow:
        inset 0 10px 12px rgba(255, 255, 255, 0.34),
        inset 0 -13px 16px rgba(13, 116, 255, 0.28),
        0 4px 8px rgba(35, 74, 126, 0.1);
    transform: translateY(4px) scale(0.93);
}

.popit-page--subtracao .count-tray {
    background: linear-gradient(180deg, #edfbff, #c9f3ff);
}