.pixel-game {
  --pixel-ink: #e9faff;
  --pixel-bg: #101a32;
  --pixel-line: #52759b;
  margin: 1.25rem 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  color: var(--pixel-ink);
  background: var(--pixel-bg);
  border: 4px solid var(--pixel-line);
  border-radius: 0;
  box-shadow: 8px 8px 0 #0a1020;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.pixel-game h3 { color: #fef08a; margin: 0 0 .7rem; }
.pixel-game p { color: var(--pixel-ink); margin: .55rem 0; }
.pixel-game .pixel-status { color: #86efac; font-weight: 800; }
.pixel-game .pixel-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: min(100%, 420px);
  margin: 1rem 0;
  border: 4px solid #8ba9ce;
  outline-offset: 5px;
  background: #213657;
}
.pixel-game .pixel-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid #405575;
  background: #1a2b48;
  color: #fff;
  font-size: clamp(1rem, 4vw, 1.8rem);
  font-weight: 900;
  line-height: 1;
  text-shadow: 3px 3px 0 #101a32;
}
.pixel-game .pixel-cell:nth-child(odd) { background: #203454; }
.pixel-game .pixel-cell.wall { background: repeating-linear-gradient(45deg, #53647c 0 8px, #65758e 8px 16px); }
.pixel-game .pixel-cell.item { color: #fbbf24; text-shadow: 3px 3px 0 #78350f; }
.pixel-game .pixel-cell.exit { color: #67e8f9; text-shadow: 3px 3px 0 #075985; }
.pixel-game .pixel-cell.player::after {
  content: '';
  width: 46%;
  height: 46%;
  background: #4ade80;
  border: 4px solid #dcfce7;
  box-shadow: 4px 4px 0 #14532d, inset 4px 4px 0 #86efac;
  position: absolute;
}
.pixel-game .pixel-controls { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.pixel-game button {
  border: 3px solid #b8d6ee;
  border-radius: 0;
  background: #234768;
  color: #fff;
  box-shadow: 4px 4px 0 #060b17;
  font: 800 1rem ui-monospace, SFMono-Regular, Consolas, monospace;
  padding: .45rem .75rem;
  min-width: 2.8rem;
  min-height: 2.8rem;
  cursor: pointer;
}
.pixel-game button:hover { background: #346b8f; }
.pixel-game button:focus-visible, .pixel-game .pixel-board:focus-visible { outline: 3px solid #fef08a; }
.pixel-game .pixel-feedback { min-height: 2.5rem; color: #fef08a; font-weight: 700; }
@media (max-width: 480px) { .pixel-game .pixel-cell { border-width: 1px; } }
@media print { .pixel-game .pixel-controls { display: none; } }