* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: #081a46;
  color: #f5e8a8;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

.app {
  --board-size: min(74dvh, 88vw, 768px);
  display: grid;
  gap: 8px;
  justify-items: center;
  align-content: center;
  width: 100%;
  max-width: 100vw;
  height: 100dvh;
  padding: 8px 12px;
}

h1 {
  margin: 0;
  font-size: clamp(20px, 2.8dvh, 32px);
  line-height: 1.1;
}

.hint {
  margin: 0;
  font-size: clamp(13px, 1.7dvh, 16px);
  opacity: 0.9;
}

.hud {
  width: var(--board-size);
  display: flex;
  justify-content: space-between;
  font-size: clamp(15px, 2dvh, 20px);
  font-weight: 700;
}

#game {
  display: block;
  width: var(--board-size);
  height: var(--board-size);
  border: 6px solid #f1e3a1;
  border-radius: 8px;
  background: #08235f;
}

.controls {
  width: var(--board-size);
  display: none;
  gap: 12px;
}

.dpad {
  display: grid;
  grid-template-columns: repeat(3, minmax(68px, 1fr));
  grid-template-rows: repeat(2, minmax(56px, auto));
  gap: 10px;
  grid-template-areas:
    ". up ."
    "left down right";
}

.arrow.up {
  grid-area: up;
}

.arrow.left {
  grid-area: left;
}

.arrow.right {
  grid-area: right;
}

.arrow.down {
  grid-area: down;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ctrl-btn {
  border: 2px solid #f1e3a1;
  border-radius: 10px;
  background: #0e2d72;
  color: #f5e8a8;
  font-size: 24px;
  font-weight: 700;
  min-height: 56px;
}

.ctrl-btn:active {
  transform: translateY(1px);
  background: #1a3f93;
}

.hidden {
  display: none !important;
}

.gameover-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(0 0 0 / 60%);
  z-index: 20;
}

.gameover-card {
  width: min(88vw, 420px);
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 16px;
  border: 3px solid #f1e3a1;
  border-radius: 14px;
  background: #102d6d;
}

.gameover-image {
  width: min(64vw, 280px);
  max-width: 100%;
  height: auto;
}

.gameover-text {
  margin: 0;
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 800;
  letter-spacing: 1px;
}

@media (orientation: portrait) {
  .app {
    --board-size: min(44dvh, 94vw, 768px);
    gap: 6px;
    padding: 6px 10px;
  }

  .hint {
    display: none;
  }

  .controls {
    display: grid;
  }

  .ctrl-btn {
    min-height: 50px;
    font-size: 22px;
  }
}