/* =====================================
   Bootstrap + clamp() レスポンシブフォント設定
   ===================================== */

/*  Bootstrap読込後に適用する */
:root {
  /* 本文（スマホで小さく、PCで大きく） */
  --bs-body-font-size: clamp(0.875rem, 2.5vw + 0.5rem, 1.125rem);
  
  /* 見出し - スマホで控えめに */
  --h1-size: clamp(1.5rem, 4vw + 0.5rem, 3rem);
  --h2-size: clamp(1.375rem, 3.5vw + 0.5rem, 2.5rem);
  --h3-size: clamp(1.25rem, 3vw + 0.5rem, 2rem);
  --h4-size: clamp(1.125rem, 2.5vw + 0.5rem, 1.5rem);
  --h5-size: clamp(1rem, 2vw + 0.5rem, 1.25rem);
  --h6-size: clamp(0.77rem, 1.5vw + 0.4rem, 1rem);

  h1, .h1 { font-size: var(--h1-size); font-weight: 700; line-height: 1.2; }
  h2, .h2 { font-size: var(--h2-size); font-weight: 700; line-height: 1.3; }
  h3, .h3 { font-size: var(--h3-size); font-weight: 600; line-height: 1.4; }
  h4, .h4 { font-size: var(--h4-size); font-weight: 600; }
  h5, .h5 { font-size: var(--h5-size); font-weight: 500; }
  h6, .h6 { font-size: var(--h6-size); font-weight: 500; }

  /* ボタン */
  --btn-font-size: clamp(0.8rem, 2vw + 0.4rem, 1rem);
}

/* メニューボタンのフォントサイズ調整 */
#menuGroup .menu-btn {
    font-size: clamp(0.6rem, 2.5vw + 0.3rem, 1.2rem) !important;
    padding: 0.5rem 0.75rem;
}

/* =====================================
   見出し設定
   ===================================== */
h1 { font-size: var(--h1-size); font-weight: 700; line-height: 1.2; }
h2 { font-size: var(--h2-size); font-weight: 700; line-height: 1.3; }
h3 { font-size: var(--h3-size); font-weight: 600; line-height: 1.4; }
h4 { font-size: var(--h4-size); font-weight: 600; }
h5 { font-size: var(--h5-size); font-weight: 500; }
h6 { font-size: var(--h6-size); font-weight: 500; }

/* =====================================
   ボタン・フォームなど
   ===================================== */
.btn {
  font-size: var(--btn-font-size);
  padding: 0.5em 1em;
  border-radius: 0.4rem;
  transition: all 0.2s ease;
}

.btn:hover {
  transform: scale(1.03);
}



/* =====================================
   微発光テキスト（神々しい演出用）
   ===================================== */
.glow-text {
  color: #fff;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.6),
    0 0 12px rgba(255, 255, 200, 0.5),
    0 0 20px rgba(255, 240, 180, 0.3);
  transition: text-shadow 0.5s ease;
}
.glow-text:hover {
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 20px rgba(255, 255, 200, 0.7),
    0 0 40px rgba(255, 240, 180, 0.5);
}


/* =====================================
   背景　演出
   ===================================== */

.background-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
}
.main-container{

    z-index: 1000;
    position: relative;
    z-index: 1000;
    min-height: 100vh;

}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('img/bg.png') center center / cover no-repeat;
}

.stars-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('img/stars.png') center center / cover no-repeat;
  animation: twinkle 4s ease-in-out infinite;
}

.stars-overlay:nth-child(2) {
  animation-delay: 1s;
  animation-duration: 5s;
}

.stars-overlay:nth-child(3) {
  animation-delay: 2s;
  animation-duration: 3s;
}

/*　点滅パターン やりすぎるとページが重くなる スマホのみ適用*/
@media screen and (max-width: 576px) {
  @keyframes twinkle {
    0% {
      opacity: 0.2;
      transform: scale(0.5);
    }
    25% {
      opacity: 0.8;
      transform: scale(1.52);
    }
    50% {
      opacity: 0.4;
      transform: scale(1);
    }
    75% {
      opacity: 0.9;
      transform: scale(1.21);
    }
    100% {
      opacity: 0.2;
      transform: scale(1);
    }
  }
}

/* ラグジュアリな感じに */
.divine-glow {
  display: block;
  width: 100%; 
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8))
          drop-shadow(0 0 16px rgba(255, 255, 255, 0.4))
          drop-shadow(0 0 24px rgba(255, 255, 200, 0.2));
  transition: filter 0.3s ease;
}

.divine-glow:hover {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 1))
          drop-shadow(0 0 24px rgba(255, 255, 200, 0.6))
          drop-shadow(0 0 40px rgba(255, 220, 150, 0.3));
}

.pop-gothic {
  font-family: 'M PLUS Rounded 1c', "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 700;
  color:#111;
  letter-spacing: 0.03em;
}

/* 点滅　*/
@keyframes blink {
  0%, 100% { opacity: 1; }
  0% { opacity: 0; }
}

.blinking {
  animation: blink 1s infinite;
}

/* =====================================
   collapseによるコンテンツ切り替え
   ===================================== */

/* ===== メニューボタン部 ===== */

/* kill bootstrap btn margin */
.menu-btn {
  flex: 1;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* ← transform削除 */
  box-shadow: none !important;
  transform: none !important;
}
.menu-btn:hover,
.menu-btn:focus,
.menu-btn:active {
  transform: none !important;  /* ← hover時の微妙な拡大を防ぐ */
  box-shadow: none !important; /* ← Bootstrapの影を無効化 */
}


.menu-btn {
  flex: 1;
  color: #fff;
  background: #D22027;
  border: 1px solid #fff;
  border-bottom: none;
  border-radius: .5rem .5rem 0 0;
  transition: all 0.3s ease;
  font-size: 1.1rem;
}

.menu-btn:hover {
  background: #E16D48;
  color: #fff;
  border: 1px solid #fff;
}

.menu-btn.active {
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* ===== コンテンツ部 ===== */
.content-wrapper {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 0 0 .5rem .5rem;
  border-top: none;
  padding: 1.5rem;
  margin-top: -1px; /* ボタンとピッタリくっつける */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.content-box {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.collapse.show {
  opacity: 1;
}


/* =====================================
   ランキング
   ===================================== */

table th {
  white-space: nowrap;
}

/* 上位3名の特別色 */
.table tbody tr.gold td ,#ranking .gold  {
  background: linear-gradient(90deg, #fff7c0, #ffec80) !important ;
  font-weight: bold;
}
.table tbody tr.silver td  ,#ranking .silver{
  background: linear-gradient(90deg, #f0f0f0, #dcdcdc)  !important;
  font-weight: bold;
}
.table tbody tr.bronze td  ,#ranking .bronze {
  background: linear-gradient(90deg, #f5deb3, #deb887)  !important;
  font-weight: bold;
}



/* フェードアニメーション */
#rankingBody {
  transition: opacity 0.5s ease;
}
#rankingBody.fade-out {
  opacity: 0;
}
#rankingBody.fade-in {
  opacity: 1;
}


.pagination.flex-wrap {
    flex-wrap: wrap !important;
}

.page-item {
    margin-bottom: 5px;
}

/* =====================================
   エントリー
   ===================================== */

/* 成功表示のスタイル */
#success-section {
    border: 2px solid #28a745;
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.3);
}

#success-section .card-body {
    background: linear-gradient(135deg, #f8fff8 0%, #e8f5e8 100%);
}

/* エラーメッセージのスタイル */
.alert-danger {
    border: 1px solid #dc3545;
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
}

/* ローディング状態のスタイル */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* リロードカウントダウン */
#reload-countdown {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-left: 4px solid #007bff;
}

#countdown-number {
    font-weight: bold;
    font-size: 1.5em;
    color: #dc3545;
}



/* =====================================
   景品
   ===================================== */


.large-category {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.medium-category {
    border-left: 4px solid #1A73E8;
    padding-left: 1rem;
    margin-bottom: 2rem;
}

.prize-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 1rem;
    border-radius: 10px;
}

.prize-item:hover {
    transform: translateY(-5px);
    background: rgba(0, 123, 255, 0.05);
}

.prize-thumb {
    transition: transform 0.3s ease;
    border: 3px solid transparent;
}

.prize-thumb:hover {
    transform: scale(1.05);
    border-color: #007bff;
}

/* モーダルスタイル */
#prize-modal .modal-content {
    border-radius: 15px;
    border: none;
}

#prize-modal .modal-header {
    border-bottom: 2px solid #e9ecef;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 15px 15px 0 0;
}

#prize-modal .modal-header .btn-close {
    filter: invert(1);
}


/* =====================================
   Bootstrap ボタンサイズ修正
   ===================================== */

/* btn-sm のスタイルを確実に適用 */
.btn-sm {
  font-size: clamp(0.5rem, 1.3vw + 0.1rem, 0.65rem) !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 0.3rem !important;
  line-height: 1.5;
}


.btn-lg {
  font-size: clamp(0.9rem, 2.5vw + 0.5rem, 1.25rem) !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 0.5rem !important;
  line-height: 1.5;
}