body {
  margin: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: radial-gradient(circle at top, #4a2730, #1b151a 68%);
  font-family: system-ui, sans-serif;
}

.lava-game {
  width: min(96vw, 560px);
  margin: 8px auto;
  text-align: center;
}

.lava-game h1 {
  width: fit-content;
  margin: 0 auto 4px;
  padding: 5px 30px;
  border: 3px solid #ffcc55;
  border-radius: 13px;
  color: #fff6b0;
  background: linear-gradient(135deg, #e22f16, #7f0a22 58%, #2a0712);
  box-shadow: 0 0 22px rgba(255, 90, 20, 0.65);
  font-size: clamp(1.8rem, 8vw, 2.8rem);
  letter-spacing: 0.13em;
}

.lava-tagline,
.lava-help {
  margin: 5px 0 8px;
  color: #ffe2a3;
  font-weight: 800;
}

.lava-board-wrap {
  position: relative;
  width: min(92vw, 420px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 19px;
  background: #130e2e;
  box-shadow: 0 0 35px rgba(255, 76, 18, 0.48);
  overflow: hidden;
}

.lava-hud {
  width: min(92vw, 420px);
  margin: 0 auto 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#game-board {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: none;
}

#game-board:focus-visible {
  box-shadow: inset 0 0 0 4px #fff;
}

.lava-score,
.lava-level {
  padding: 4px 9px;
  border: 2px solid #ffbd3d;
  border-radius: 999px;
  color: #fff;
  background: rgba(20, 10, 35, 0.78);
  font-weight: 1000;
}

.lava-message {
  position: absolute;
  z-index: 3;
  inset: 50% auto auto 50%;
  width: 70%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 3px solid #ffd55f;
  border-radius: 15px;
  color: #fff;
  background: rgba(78, 7, 15, 0.9);
  transform: translate(-50%, -50%);
}

.lava-message[hidden] { display: none; }
.lava-message strong { font-size: 1.8rem; }

.direction-pad {
  width: fit-content;
  margin: 9px auto 0;
  display: grid;
  grid-template-columns: repeat(3, clamp(48px, 14vw, 58px));
  grid-template-areas: ". up ." "left . right" ". down .";
  gap: 6px;
}

.direction-pad button {
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  border: 3px solid #ffb02e;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(#9e1830, #5c0c23);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.24);
  font-size: 1.35rem;
  cursor: pointer;
  touch-action: manipulation;
}

.direction-pad button:active { transform: translateY(2px); }
.direction-pad [data-direction="up"] { grid-area: up; }
.direction-pad [data-direction="left"] { grid-area: left; }
.direction-pad [data-direction="down"] { grid-area: down; }
.direction-pad [data-direction="right"] { grid-area: right; }

@media (hover: hover) and (pointer: fine) {
  .direction-pad,
  .lava-help { display: none; }
}

@media (max-height: 730px) {
  .lava-board-wrap { width: min(76vh, 88vw, 390px); }
  .direction-pad { margin-top: 5px; }
  .lava-help { display: none; }
}