:root { --bg:#0c0a14; --frame:#1b1730; }
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: radial-gradient(circle at 50% 30%, #221a33, #0c0a14 70%);
  color: #e8e2cc; font-family: "Courier New", monospace;
  display: flex; align-items: center; justify-content: center;
}
#frame { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; }
#stage {
  border: 4px solid #6a5db0;
  border-radius: 6px;
  box-shadow: 0 0 0 4px #120f22, 0 12px 40px rgba(0,0,0,.6);
  background: #000; line-height: 0;
}
canvas#game {
  display: block;
  width: min(92vw, 768px);
  height: auto;
  image-rendering: pixelated;
  image-rendering: -webkit-optimize-contrast;
  filter: sepia(0.22) contrast(1.10) brightness(0.96);
}
#hint { font-size: 12px; color: #8d86a8; margin: 2px 0 0; text-align: center; }

/* on-screen controls — shown only on small / touch screens */
#touch { display: none; width: min(92vw, 768px); justify-content: space-between; align-items: center; }
/* 3×3 grid so the four diagonal buttons sit in the corners (true 8-way) */
.dpad8 { display: grid; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); gap: 4px; }
.db, .ab, .sb {
  background: #2a2444; color: #e8e2cc; border: 2px solid #6a5db0;
  border-radius: 8px; font-size: 20px; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: center;
}
.db { width: 50px; height: 50px; }
.db.nw, .db.ne, .db.sw, .db.se { font-size: 18px; color: #b7add9; }
.db.mid { background: transparent; border: none; cursor: default; }
.db:active { background: #41386a; }
.acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; max-width: 200px; }
.ab { width: 60px; height: 60px; border-radius: 50%; font-size: 22px; }
.sb { width: 46px; height: 46px; border-radius: 8px; font-size: 18px; }
.ab:active, .sb:active { background: #41386a; }
@media (hover: none), (max-width: 720px) { #touch { display: flex; } }