.grid {
  display: grid;
  grid-auto-rows: 14px;
  gap: 1px;
  background: #fff;
  width: max-content;
}
.cell {
  width: 10px;
  height: 14px;
  box-sizing: border-box;
  border: 1px solid;
  image-rendering: pixelated;
}

/* FREE: no border, no background — pure white grid bg shows through. */
.cell--free {
  border: none;
  background: transparent;
}

/* Unoptimized data — three pattern variants */
.cell--cyan-solid {
  background: #00b0b0;
  border-color: #006666;
}
.cell--cyan-diag {
  background: repeating-linear-gradient(-45deg, #00d8d8 0 2px, #006666 2px 3px);
  border-color: #004444;
}
.cell--cyan-dots {
  background:
    radial-gradient(#004444 0.6px, transparent 0.7px) 0 0 / 3px 3px,
    #00b0b0;
  border-color: #004444;
}

/* Optimized data: solid blue */
.cell--opt {
  background: #0000a8;
  border-color: #000044;
}

/* Won't move (system): dark cross-hatch */
.cell--sys {
  background: repeating-linear-gradient(-45deg, #404040 0 2px, #606060 2px 3px);
  border-color: #000;
}

/* Bad sector — white box with black border and a single red diagonal
   line from top-left to bottom-right (mirrors the original Win98 defrag
   marker, distinct from the red "writing" indicator). */
.cell--bad {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14' preserveAspectRatio='none'><line x1='0' y1='0' x2='10' y2='14' stroke='%23d80000' stroke-width='1.4'/></svg>") no-repeat center / 100% 100%,
    #fff;
  border-color: #000;
}

/* Reading tell — green flashing */
.cell--read {
  background: #00c000;
  border-color: #006600;
  animation: blinkR 0.55s steps(2) infinite;
}
@keyframes blinkR { 50% { background: #88ff88; } }

/* Writing tell — red flashing */
.cell--write {
  background: #ff4040;
  border-color: #800000;
  animation: blinkW 0.55s steps(2) infinite;
}
@keyframes blinkW { 50% { background: #ffaaaa; } }

/* Defrag cursor (per-row jagged) */
.cell--cursor {
  background: #00ff00;
  border-color: #008800;
  box-shadow: 0 0 4px 1px #00ff00, inset 0 0 0 1px #ccffcc;
  animation: cursorPulse 0.4s steps(2) infinite;
}
@keyframes cursorPulse {
  50% { background: #88ff88; box-shadow: 0 0 6px 2px #88ff88; }
}

/* Coin: small rectangular gold cell. Player walks through to collect. */
.cell--coin {
  background: linear-gradient(135deg, #fff4a3 0%, #d4af37 55%, #8b6914 100%);
  border-color: #6b4c00;
  box-shadow: inset -1px -1px 0 #806000, inset 1px 1px 0 #ffeb78;
}
/* Coin-count overlay digit cell (top-right HUD) */
.cell--digit {
  background: #000;
  border-color: #000;
  color: #ffeb78;
  font-family: 'MS Sans Serif', monospace;
  font-size: 9px;
  font-weight: bold;
  text-align: center;
  line-height: 14px;
}

/* Goal */
.cell--goal {
  background: repeating-linear-gradient(45deg, #ff00ff 0 2px, #800080 2px 3px);
  border-color: #400040;
  animation: pulseGoal 1.2s ease-in-out infinite;
}
@keyframes pulseGoal { 50% { box-shadow: 0 0 4px 1px #ff00ff; } }

/* Checkpoint */
.cell--checkpoint {
  background:
    radial-gradient(#fff 0.8px, transparent 1px) 0 0 / 3px 3px,
    #008000;
  border-color: #004000;
}

/* Fragile */
.cell--fragile {
  background: repeating-linear-gradient(90deg, #c0a000 0 2px, #604000 2px 3px);
  border-color: #402000;
}

/* Player (rendered as a grid cell, not an overlay) */
.cell--player {
  background: #ffff00;
  border-color: #806000;
  box-shadow: inset 0 0 0 1px #ffff00;
  z-index: 5;
}

/* Enemies — virus */
.cell--virus {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'><circle cx='5' cy='8' r='3.5' fill='%2300aa00' stroke='%23004400' stroke-width='0.5'/><circle cx='3.7' cy='7' r='0.6' fill='%23000'/><circle cx='6.3' cy='7' r='0.6' fill='%23000'/><line x1='5' y1='4' x2='5' y2='2' stroke='%23004400' stroke-width='0.5'/><line x1='1.5' y1='8' x2='0.2' y2='8' stroke='%23004400' stroke-width='0.5'/><line x1='8.5' y1='8' x2='9.8' y2='8' stroke='%23004400' stroke-width='0.5'/></svg>") center/contain no-repeat,
    #fff;
  border: none;
}