:root {
  --text: #edf6ff;
  --muted: #c8d8eb;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 20% 7%, #466f96 0%, #29435e 40%, #112133 100%);
}

.app {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
}

.eyebrow {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

h1 {
  margin: 6px 0;
  font-size: clamp(22px, 6vw, 32px);
}

.subtitle {
  margin: 0 0 12px;
  color: var(--muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tile {
  border: 0;
  border-radius: 14px;
  min-height: 84px;
  font: inherit;
  font-size: 24px;
  font-weight: 700;
  color: #e8f5ff;
  background: linear-gradient(135deg, #2f5476 0%, #1f3953 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.tile.safe {
  background: linear-gradient(135deg, #28bf97 0%, #148567 100%);
}

.tile.mine {
  background: linear-gradient(135deg, #f06b56 0%, #c34738 100%);
}

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

.actions button {
  border-radius: 11px;
  border: 0;
  padding: 12px;
  font: inherit;
  font-weight: 700;
}

.actions button:disabled {
  opacity: 0.5;
}

.ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.primary {
  background: linear-gradient(130deg, #f4b463 0%, #d97f3b 100%);
  color: #23364a;
}

.status {
  margin: 12px 0 0;
  color: var(--muted);
}

.debug {
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(11, 23, 36, 0.74);
  padding: 12px;
}

.debug pre {
  white-space: pre-wrap;
  font-size: 12px;
  color: #d4eaff;
}

.debug button {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.hidden {
  display: none;
}