/* === app/assets/stylesheets/application.css === */
.ana-mileage-bar {
  margin: 0 auto 20px;
  width: calc(100% - 2rem); /* 🌟 px-4 のバナーと左右の端を1px単位で揃える */
  max-width: 100%;
  background: #ffffff;
  padding: 16px 18px;
  border-radius: 16px;      /* 🌟 rounded-2xl (16px) に統一 */
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(15, 43, 90, 0.05);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.ana-bar-content { display: flex; align-items: center; justify-content: space-between; }
.ana-section { display: flex; align-items: center; gap: 10px; }
.ana-divider { width: 1px; height: 36px; background-color: #e2e8f0; margin: 0 6px; }
.ana-icon-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.fuel-icon { background: #fff7ed; color: #ea580c; border: 1px solid #ffedd5; }
.miles-icon { background: #eff6ff; color: #0076d6; border: 1px solid #dbeafe; }
.ana-text-col { display: flex; flex-direction: column; justify-content: center; }
.ana-label { font-size: 0.65rem; font-weight: 800; color: #64748b; letter-spacing: 0.06em; margin-bottom: 1px; }
.ana-value { font-weight: 900; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 1.25rem; color: #0f2b5a; line-height: 1.1; letter-spacing: -0.5px; }
.ana-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ana-rank-badge { font-size: 0.65rem; padding: 3px 10px; border-radius: 9999px; font-weight: 900; letter-spacing: 0.06em; border: 1px solid #e2e8f0; display: inline-flex; align-items: center; }
.ana-rank-badge.guest, .ana-rank-badge.economy { color: #475569; background: #f8fafc; border-color: #cbd5e1; }
.ana-rank-badge.first, .ana-rank-badge.first_class { color: #92400e; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-color: #f59e0b; box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2); }
.ana-total-score { display: flex; gap: 4px; align-items: baseline; color: #64748b; }
.ana-label-small { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; }
.ana-value-small { font-weight: 900; font-size: 0.85rem; color: #0f2b5a; }

.animate-pulse-slow { animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse-slow { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }

@keyframes stamp-bang {
  0% { transform: scale(3) rotate(-5deg); opacity: 0; }
  50% { transform: scale(0.9) rotate(-15deg); opacity: 1; }
  100% { transform: scale(1.1) rotate(-12deg); opacity: 0.9; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); }
}
.animate-stamp-bang { animation: stamp-bang 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards; opacity: 0; animation-delay: 0.2s; }

/* チケットレアリティ装飾（全画面共通・一元管理） */
.ticket-r { background: linear-gradient(135deg, #ffffff 0%, #fffdf0 60%, #fef9c3 100%) !important; border: 4px solid transparent !important; border-image: linear-gradient(135deg, #b45309, #fbbf24, #fffbeb, #f59e0b, #92400e) 1 !important; box-shadow: 0 0 25px rgba(245, 158, 11, 0.35), inset 0 0 15px rgba(254, 240, 138, 0.6) !important; overflow: hidden; position: relative; }
.ticket-r::after { content: ''; position: absolute; top: 0; left: -150%; width: 35%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%); transform: skewX(-30deg); animation: shimmer-swipe 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1); z-index: 4; }
.ticket-sr { border: 3px solid #38bdf8 !important; box-shadow: 0 0 35px rgba(14, 165, 233, 0.5) !important; overflow: hidden; position: relative; }
.ticket-sr::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: linear-gradient(115deg, transparent 20%, rgba(255,0,128,0.3) 30%, rgba(111,0,255,0.3) 40%, transparent 50%, rgba(0,255,255,0.3) 60%, rgba(0,255,0,0.3) 70%, transparent 80%); background-size: 300% 300%; animation: holo-shimmer 4s ease infinite; mix-blend-mode: color-dodge; }
@keyframes shimmer-swipe { 0% { left: -150%; } 30% { left: 150%; } 100% { left: 150%; } }
@keyframes holo-shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }