/* ...existing styles... */
:root {
  --bg: #ffffff;
  --text: #111;
  --muted: #666;
  --focus: #000;
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

html,body {
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
}

#app {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:12px;
  padding:16px;
  box-sizing:border-box;
}

#play-area {
  border:1px solid #e6e6e6;
  border-radius:12px;
  height:80vh; /* increased from 60vh to give a much larger gesture canvas */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:transparent;
  outline: none;
  touch-action: none; /* allow custom swipe handling */
  padding:16px; /* added padding so large area feels less cramped on small screens */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; /* prevent text selection on long press */
  -webkit-touch-callout: none; /* prevent iOS callout */
}

.instructions {
  color:var(--muted);
  padding:12px;
  max-width:48ch;
}

#controls {
  display:flex;
  gap:8px;
  justify-content:center;
}

button {
  background:#111;
  color:#fff;
  border:0;
  padding:8px 12px;
  border-radius:8px;
  font-size:16px;
}

button:focus {
  box-shadow:0 0 0 3px rgba(0,0,0,0.08);
  outline: none;
}

#status {
  text-align:center;
  color:var(--muted);
  font-size:16px;
}

/* screen-reader-only */
.sr-only {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* NEW: subtle recoil animation to accompany heavy revolver fire (mobile vibration + short translate) */
.recoil {
  animation: recoil-anim 140ms ease-out;
}
@keyframes recoil-anim {
  0% { transform: translateY(0); }
  30% { transform: translateY(-8px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0); }
}