:root {
  --bg: #ffffff;
  --text: #1d1d1f;
  --accent: #0071e3;
  --gray: #f5f5f7;
}

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex; align-items: center; justify-content: center; height: 100vh;
}

#app { width: 100%; max-width: 800px; text-align: center; padding: 20px; }

h1 { font-size: 2.5rem; font-weight: 600; margin-bottom: 0.5rem; letter-spacing: -0.5px; }
.v2 { color: var(--accent); }
.subtitle { color: #86868b; font-size: 1rem; margin-bottom: 2rem; }

/* カメラエリア：枠線を消して影と角丸で高級感を出す */
.camera-container {
  position: relative; width: 100%; max-width: 640px; aspect-ratio: 4/3;
  margin: 0 auto; border-radius: 28px; overflow: hidden;
  background: var(--gray); box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

#video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

/* スキャン枠：細い白線だけで「スマート」に */
.scanner-frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 280px; height: 280px; border: 1px solid rgba(255,255,255,0.5);
  border-radius: 40px; pointer-events: none;
}

/* 読み取りラインも細く、速く */
.scan-line {
  position: absolute; width: 100%; height: 1px; background: #fff;
  top: 0; animation: scanning 2s ease-in-out infinite;
}

@keyframes scanning { 0% { top: 10%; opacity: 0; } 50% { opacity: 1; } 100% { top: 90%; opacity: 0; } }

#status-message {
  margin-top: 20px; font-size: 1.1rem; font-weight: 500; color: var(--accent);
}

/* 投票ボタン：大きく、押しやすく */
#vote-selection { margin-top: 30px; }
.button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; max-width: 500px; margin: 20px auto; }

.vote-btn {
  background: var(--gray); border: none; padding: 20px; font-size: 1.2rem;
  font-weight: 600; border-radius: 18px; cursor: pointer; transition: 0.2s;
}

.vote-btn:active { transform: scale(0.95); background: #e8e8ed; }

.hidden { display: none !important; }