:root{--cell-gap:8px}
html,body{height:100%}
body{background:#f8f9fa}
.img-cell{position:relative;overflow:hidden;background:#000}
.img-cell canvas{width:100%;height:100%;display:block}
.cell-card{aspect-ratio:1/1}
.card-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}
.cell-selected{outline:4px solid rgba(13,110,253,.2);box-shadow:0 0 0 3px rgba(13,110,253,.06);transform:scale(1.01);transition:transform .12s ease}

.timer-badge{position:absolute;left:.5rem;top:.5rem;z-index:6}
.reveal-progress{position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(90deg, rgba(255,255,255,0.08), rgba(0,0,0,0.08));z-index:5}
.reveal-progress .reveal-inner{height:100%;width:0%;background:linear-gradient(90deg,#0d6efd,#20c997);transition:width .12s linear}
.overlay-feedback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:7;pointer-events:none;opacity:0;transition:opacity .25s ease}
.overlay-feedback.show{opacity:1}

@media (max-width:576px){
  .cell-card{aspect-ratio:1/1}
}