/* 文化祭デジタルスタンプラリー カスタムCSS */

/* フォント設定 */
body {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

/* アニメーション */
@keyframes bounce-in {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* ボタンアニメーション */
.btn-bounce {
  animation: bounce-in 0.3s ease-out;
}

.btn-pulse:hover {
  animation: pulse 1s infinite;
}

/* スタンプアニメーション */
.stamp-collected {
  animation: bounce-in 0.5s ease-out;
}

/* カードフェードイン */
.fade-in {
  animation: fade-in 0.5s ease-out;
}

/* シェイクアニメーション（不正解時） */
.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* QRスキャナー枠 */
.qr-scanner-frame {
  border: 3px solid #ff6b6b;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.qr-scanner-frame::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border: 2px solid #ff6b6b;
  border-radius: 8px;
  transform: translate(-50%, -50%);
  z-index: 10;
}

/* スタンプカード */
.stamp-card {
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.stamp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.stamp-card.collected {
  border-color: #4ecdc4;
  background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
  color: white;
}

.stamp-card.not-collected {
  border-color: #e5e7eb;
  background: #f9fafb;
}

/* プログレスバー */
.progress-bar {
  background: linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 100%);
  transition: width 0.8s ease-out;
}

/* 完走証明書 */
.completion-certificate {
  background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
  border: 3px solid gold;
  animation: bounce-in 1s ease-out;
}

/* レスポンシブ調整 */
@media (max-width: 640px) {
  .qr-scanner-frame::before {
    width: 150px;
    height: 150px;
  }
}

/* ローディングスピナー */
.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #ff6b6b;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 通知アニメーション */
.notification {
  animation: fade-in 0.3s ease-out;
}

.notification.success {
  background: linear-gradient(135deg, #4ecdc4, #44a08d);
}

.notification.error {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

.notification.warning {
  background: linear-gradient(135deg, #ffa726, #ff9800);
}
/* QRコード表示用 */
.qr-canvas {
  width: 150px !important;
  height: 150px !important;
  display: block;
}