.game-window--sweeper{max-width:520px}
.game-canvas-wrap--sweeper{aspect-ratio:auto;min-height:380px;padding:16px}

.sweeper-hud{display:flex;justify-content:space-between;margin-bottom:10px;font-size:13px;color:var(--text-dim)}

.sweeper-grid{display:grid;gap:3px}
.sweeper-cell{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:3px;
  font-family:var(--font-mono);font-weight:700;font-size:13px;color:var(--text);
  cursor:pointer;user-select:none;touch-action:none;transition:background .1s;
}
.sweeper-cell:active{background:var(--border-bright)}
.sweeper-cell.is-revealed{background:var(--bg-alt);cursor:default}
.sweeper-cell.is-flagged{background:rgba(251,146,60,.14)}
.sweeper-cell.is-bug{background:rgba(251,146,60,.28);border-color:var(--warn)}
.sweeper-cell[data-n="1"]{color:var(--text-dim)}
.sweeper-cell[data-n="2"]{color:var(--accent)}
.sweeper-cell[data-n="3"]{color:var(--accent-bright)}
.sweeper-cell[data-n="4"],.sweeper-cell[data-n="5"],.sweeper-cell[data-n="6"],.sweeper-cell[data-n="7"],.sweeper-cell[data-n="8"]{color:var(--warn)}

.game-card-sweeper-grid{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;grid-template-columns:repeat(3,20px);gap:3px;
}
.game-card-sweeper-cell{
  width:20px;height:20px;border-radius:3px;background:var(--bg-elevated);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:700;
}
.game-card-sweeper-cell--flag{background:rgba(251,146,60,.14)}
.game-card-sweeper-cell--num{background:var(--bg-alt);color:var(--accent)}
.game-card-sweeper-cell--pulse{
  background:var(--bg-alt);box-shadow:0 0 0 rgba(143,227,168,.5);
  animation:game-card-sweeper-pulse 2.2s ease-in-out infinite;
}
@keyframes game-card-sweeper-pulse{
  0%,100%{box-shadow:0 0 0 rgba(143,227,168,0)}
  50%{box-shadow:0 0 10px rgba(143,227,168,.6)}
}

@media (max-width:520px){
  .game-window--sweeper{max-width:none}
  .sweeper-cell{font-size:11px}
}

@media (prefers-reduced-motion: reduce){
  .game-card-sweeper-cell--pulse{animation:none}
}