/* オリジナルフォント（ひらがなのみ適用） */
@font-face {
  font-family: 'Ricchan';
  src: url('../assets/fonts/Ricchan_01-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3041-309F; /* ひらがな */
}

/* アプリ全体用のオリジナルフォント。
   フォントに収録されていない漢字などは、後続の日本語フォントへ自動で切り替わる。 */
@font-face {
  font-family: 'Ritsu';
  src: url('../assets/fonts/ritsu.ttf?v=78') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 同じ字形を太字指定の画面にも明示的に割り当てる。
   ブラウザによる擬似的な太字化を防ぎ、全画面で見た目を揃える。 */
@font-face {
  font-family: 'Ritsu';
  src: url('../assets/fonts/ritsu.ttf?v=78') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ritsu';
  src: url('../assets/fonts/ritsu.ttf?v=78') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #FFF9F0;
  --color-primary: #FF7043;
  --color-primary-light: #FFAB91;
  --color-accent: #FFD740;
  --color-text: #3E2723;
  --color-white: #FFFFFF;
  --font-main: 'Ritsu', 'Ricchan', 'Rounded Mplus 1c', 'Hiragino Maru Gothic ProN', 'BIZ UDPGothic', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
  user-select: none;
  touch-action: none;
}

/* ============================================================
   バッジ（ぎん・きん・だいや）
   きろく画面のいちらんと、ゲーム中の獲得ポップアップで共通に使う。
   画像を使わず、CSSのグラデーション＋光のスイープで表現する。
   ============================================================ */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px 6px;
  margin-bottom: 16px;
}

.badge { text-align: center; }

/* まるいバッジ本体 */
.badge-disc {
  position: relative;
  width: 46px; height: 46px;
  margin: 0 auto 3px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.28), inset 0 -2px 4px rgba(0,0,0,0.18);
}
.badge-icon {
  font-size: 1.1rem;
  font-weight: 900;
  position: relative;
  z-index: 2;
}

/* ---- ぎん ---- */
.badge.silver .badge-disc {
  background: linear-gradient(145deg, #FFFFFF 0%, #C8D2DA 35%, #8E9BA8 65%, #E6ECF1 100%);
  border: 2px solid #9AA7B4;
}
.badge.silver .badge-icon { color: #4A5560; text-shadow: 0 1px 0 rgba(255,255,255,0.9); }

/* ---- きん ---- */
.badge.gold .badge-disc {
  background: linear-gradient(145deg, #FFF7D6 0%, #FFD54F 35%, #E8A00A 65%, #FFE9A3 100%);
  border: 2px solid #D99A0B;
}
.badge.gold .badge-icon { color: #7A4E00; text-shadow: 0 1px 0 rgba(255,255,255,0.85); }

/* ---- だいや ---- */
.badge.diamond .badge-disc {
  background:
    linear-gradient(145deg, #FFFFFF 0%, #C9F6FF 25%, #A9C4FF 50%, #EBC7FF 75%, #FFFFFF 100%);
  border: 2px solid #8FD8EA;
}
.badge.diamond .badge-icon { color: #2E6E86; text-shadow: 0 1px 0 rgba(255,255,255,0.95); }

/* 手に入れたバッジは光が横切ってキラッとする */
.badge.got .badge-disc::after {
  content: '';
  position: absolute;
  top: -60%; left: -120%;
  width: 60%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.92), transparent);
  transform: rotate(20deg);
  animation: badge-shine 2.8s ease-in-out infinite;
}
@keyframes badge-shine {
  0%   { left: -120%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}
/* だいやはさらに強く、少し速く光る */
.badge.diamond.got .badge-disc::after { animation-duration: 2s; }
.badge.diamond.got .badge-disc {
  box-shadow: 0 2px 6px rgba(0,0,0,0.28), 0 0 10px rgba(150, 230, 255, 0.85);
}
.badge.gold.got .badge-disc {
  box-shadow: 0 2px 6px rgba(0,0,0,0.28), 0 0 8px rgba(255, 213, 79, 0.75);
}

/* まだ持っていないバッジはシルエット */
.badge.locked .badge-disc {
  background: #E0E0E0;
  border-color: #CFCFCF;
  box-shadow: none;
}
.badge.locked .badge-icon { color: #BDBDBD; text-shadow: none; }

.badge-name {
  font-size: 0.6rem;
  font-weight: bold;
  color: #6D4C41;
  line-height: 1.25;
  word-break: break-all;
}
.badge.locked .badge-name { color: #BDBDBD; }

/* ============================================================
   バッジ獲得のポップアップ（ゲーム中）
   ============================================================ */
.badge-toast {
  position: fixed;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  z-index: 9995;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 10px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 6px 18px rgba(0,0,0,0.32);
  pointer-events: none;
  animation: badge-toast-anim 2.6s ease-out forwards;
}
.badge-toast .badge-disc { margin: 0; width: 40px; height: 40px; }
.badge-toast-title { font-size: 0.7rem; font-weight: 900; color: #8D6E63; }
.badge-toast-name  { font-size: 1rem;  font-weight: 900; color: var(--color-primary); }

@keyframes badge-toast-anim {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.7); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.06); }
  20%  { transform: translateX(-50%) translateY(0) scale(1); }
  80%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.94); }
}