:root {
  --bg-top: #1e293b;
  --bg-bottom: #0f172a;
  --panel: rgba(15, 23, 42, 0.72);
  --text: #e2e8f0;
  --accent: #22c55e;
  --accent-2: #0ea5e9;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "Segoe UI", "Noto Sans KR", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 20% 10%, #334155 0%, var(--bg-top) 35%, var(--bg-bottom) 100%);
}

.app {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 0.6rem;
  padding: calc(env(safe-area-inset-top, 0) + 0.75rem) calc(env(safe-area-inset-right, 0) + 0.75rem)
    calc(env(safe-area-inset-bottom, 0) + 0.75rem) calc(env(safe-area-inset-left, 0) + 0.75rem);
}

.hud {
  background: var(--panel);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 0.9rem;
  padding: 0.6rem 0.8rem;
}

.hud h1 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.92rem;
}

.game-wrap {
  min-height: 38vh;
  background: var(--panel);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
}

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

.controls {
  display: grid;
  gap: 0.45rem;
}

.control-row {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
}

.control-row:last-child {
  grid-template-columns: repeat(3, minmax(44px, 1fr));
}

button {
  min-height: 48px;
  border: none;
  border-radius: 0.7rem;
  font-weight: 700;
  color: #f8fafc;
  background: linear-gradient(160deg, #0ea5e9, #0369a1);
  box-shadow: 0 6px 12px rgba(2, 132, 199, 0.35);
  touch-action: manipulation;
}

button:active {
  transform: translateY(1px);
}

button[data-action="hard-drop"],
button[data-action="restart"] {
  background: linear-gradient(160deg, #22c55e, #15803d);
  box-shadow: 0 6px 12px rgba(21, 128, 61, 0.35);
}

.help {
  margin: 0.1rem 0 0;
  opacity: 0.85;
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .app {
    max-width: 980px;
    margin: 0 auto;
    grid-template-columns: minmax(280px, 1fr) minmax(250px, 300px);
    grid-template-rows: auto 1fr auto;
    column-gap: 0.8rem;
  }

  .hud {
    grid-column: 1 / 3;
  }

  .game-wrap {
    min-height: 72vh;
  }

  .controls {
    align-self: stretch;
    grid-template-rows: repeat(3, 1fr);
  }

  .control-row {
    align-content: stretch;
  }

  button {
    min-height: 56px;
    font-size: 0.95rem;
  }

  .help {
    grid-column: 1 / 3;
  }
}