/* Raspão — SEIS raspagens independentes, uma por célula (não uma superfície
   única sobre a grade). Cada .rsp-raspa vira um ScratchCard próprio: a lib
   insere um <img> e um <canvas> dentro dele, nessa ordem. */

#divRaspao {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.rsp-grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}
/* catálogo curto encolhe a grade (ver totalCelulas no raspao.js) */
/* sempre 3 colunas: 12 celulas = 4 linhas; catalogo curto encolhe para 9 ou 6 */
.rsp-grade[data-celulas="3"] { grid-template-columns: repeat(3, 1fr); }

/* box-sizing em tudo que compõe a célula: sem isso, o padding da imagem soma ao
   width/height de 100% e ela fica maior que a célula, escorregando para baixo e
   para a direita — foi a causa do desalinhamento. */
.rsp-celula, .rsp-raspa, .rsp-raspa img, .rsp-raspa canvas { box-sizing: border-box; }

.rsp-celula {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--jg-e1eadf, #E1EADF);
    box-shadow: rgba(50,50,93,.14) 0 4px 10px -4px;
}

.rsp-raspa {
    position: absolute;
    inset: 0;
    display: block;
    cursor: crosshair;
}

/* A imagem ocupa a célula inteira; `contain` centraliza sem cortar, e o padding
   dá a margem interna. Com border-box o conjunto continua sendo 100% da célula. */
.rsp-raspa img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10%;
    background: #fff;
}

/* O canvas é criado pela lib no tamanho exato de .rsp-raspa (containerWidth /
   containerHeight vêm de offsetWidth/offsetHeight), então o 100% aqui é só
   garantia de cobertura — não redimensiona nem desloca a raspagem. */
.rsp-raspa canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 576px) {
    .rsp-grade { gap: 5px; }
    .rsp-celula { border-radius: 7px; }
    .rsp-raspa img { padding: 8%; }
}