/* 맞춤 운세 결과 모달 (Red 테마) */
.ft-modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(15, 0, 0, 0.95);
  backdrop-filter: blur(15px);
  visibility: hidden; /* 평소엔 숨김 */
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  transition: all 0.5s ease;
}

/* 💡 자바스크립트가 클래스를 추가하면 보이는 설정 */
.ft-modal-overlay.active {
  visibility: visible !important;
  opacity: 1 !important;
}

.ft-modal-container {
  background: #1a0505;
  border: 2px solid #ff3333;
  border-radius: 20px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 40px 25px;
  box-shadow: 0 0 40px rgba(255, 51, 51, 0.2);
  transform: scale(0.9);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ft-modal-overlay.active .ft-modal-container {
  transform: scale(1);
}

/* 행운번호 하이라이트 효과 */
/* 보너스: 행운번호(보너스번호)가 뜰 때 팡 터지는 효과 */
.ft-lucky-ball {
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 5px #ff3333, inset 0 0 5px #ffffff !important;
  animation: luckyPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes luckyPop {
  0% { transform: scale(0.5); filter: brightness(2); }
  100% { transform: scale(1.1); filter: brightness(1); }
}

@keyframes ft-lucky-glow {
  from { box-shadow: 0 0 0px #ff0000; }
  to { box-shadow: 0 0 5px #ff5555, 0 0 5px #fff; }
}

/* 기존에 흩어져 있던 .ft-game-card 설정들을 다 지우고 이것만 남겨! */


/* 닫기 버튼 및 하단 버튼들 클릭 우선순위 */
.ft-close-btn, .ft-btn, .btn-retrys, .btn-close {
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 3000 !important;
}

/* 스크롤 영역 설정 확인 */
.ft-result-container {
  max-height: 90vh; /* 적절한 높이 설정 */
  overflow-y: auto;
  scroll-behavior: smooth;
}
/* 닫기 버튼 스타일 보강 */
.ft-close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 30px;
  position: absolute;
  top: 20px;
  right: 20px;
}

/* 카드 확장 애니메이션 */

/* 1. 부모 헤더 정렬 */
/* 헤더를 중앙으로 모으는 핵심 설정 */
.ft-header {
  text-align: center;
  margin-bottom: 0px;
}

/* 타이틀이 안 보였던 건 높이나 표시 설정 때문일 수 있음 */
.ft-title {
  font-size: 35px;  
  color: #ffffff;
  margin-bottom: 0px;  
  font-family : 'kbl';
}

/* 클래스 .ft-title 대신 ID #ftMainTitle 로 작성 */
#ftMainTitle {
  display: block !important;
  visibility: visible !important;
  
  /* 텍스트 정렬의 핵심 */
  width: 100% !important;
  text-align: center !important;
  
  /* 스타일 */
  color: #ff3333 !important; 
  font-size: 28px !important;
  font-weight: 800 !important;
  font-family: 'Orbitron', sans-serif !important;
  
  /* 여백 */
  margin: 20px 0 !important;
  padding: 0 !important;
  
  /* 그림자 효과로 존재감 뿜뿜 */
  text-shadow: 0 0 15px rgba(255, 51, 51, 0.7) !important;
  
  /* 확인용 배경색 (이번엔 진짜 보일 거야!) */
  background: rgba(255, 255, 0, 0.3) !important; 
}

/* 문구가 신비롭게 움직이는 효과 */
@keyframes ft-floating {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}
.ft-floating-text {
    animation: ft-floating 3s ease-in-out infinite;
    display: inline-block;
}

/* 추가로 ft-desc도 안 보일 수 있으니 색상을 잡아줄게 */
.ft-desc { 
  color: rgba(255, 255, 255, 0.8) !important; 
  font-size: 14px; 
  margin-top: 5px; 
  text-align: center;
}

.ft-desc { color: rgba(255,255,255,0.7); font-size: 14px; margin-top: 5px; }

#ftStatusProgress {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #1624b2 0%, #c3202f 100%);
  transition: width 0.3s ease; /* 자바스크립트에서 덮어쓰기 전 기본값 */
  box-shadow: 0 0 10px rgba(255, 51, 51, 0.5);
}

/* 행운 번호 공에 특수 효과 */
.ft-ball.is-lucky {
    position: relative;
    z-index: 10;
}

/* 번호 위에 'LUCKY' 뱃지 띄우기 */
.ft-ball.is-lucky::after {
    content: 'LUCKY';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff3333;
    color: white;
    font-size: 8px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 4px;    
    animation: bounce 0.5s infinite alternate; /* 통통 튀는 효과 */
}

@keyframes bounce {
    from { transform: translateX(-50%) translateY(0); }
    to { transform: translateX(-50%) translateY(-3px); }
}

/* 번호 뒤에 후광 효과 */
.ft-ball.is-lucky::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    filter: blur(15px);
    opacity: 0.6;
    z-index: -1;
    border-radius: 50%;
}

.ft-status-text {
    font-family: "DnfTemperedBlade";
    text-align: center !important;
    color: #ff8888 !important; /* 연한 붉은색 */
    font-size: 14px !important; /* 요청대로 기본은 14px */
    font-weight: 500 !important;
    min-height: 20px;
    margin-bottom: 20px;
    /* 애니메이션 적용 */
    animation: ftFadeIn 0.8s ease-in-out infinite alternate;
    transition: font-size 0.3s ease; /* 크기 변경 시 부드럽게 전환 */
}

/* 마지막 문구 "운명은 우연이 아니다." 강조 스타일 (16px) */
.ft-status-text.complete {
    font-size: 20px !important; /* 완료 시점에만 16px로 업! */
    color: #ffffff !important;
    font-weight: bold;
    text-shadow: 0 0 10px #ff3333, 0 0 20px #ff3333;
    animation: ftFinalGlow 1.5s infinite alternate;
}

/* 녹화 중인 것 같은 깜빡임 효과 */
@keyframes ft-blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.ft-record-dot {
    animation: ft-blink 2s infinite ease-in-out;
}

/* 생성완료 라벨 스타일 */
.ft-status-label {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    letter-spacing: 0.5px;
    /* 기본(붉은색) 테마 */
    background: rgba(255, 51, 51, 0.1);
    color: #ff8888;
    border: 1px solid rgba(255, 51, 51, 0.3);
}

/* 마지막 라인(녹색) 테마 */
.ft-status-label.final {
    background: rgba(0, 255, 136, 0.1);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.3);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
}

@media (max-width: 768px) {
  .ft-title {
    font-size: 22px;
  }

/* 반응형 - 작은 모바일 */
@media (max-width: 360px) {  

  .ft-numbers-grid {
    gap: 2px;
  }
  
  .ft-ball {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }