/* ねこ友だち（js/friends.js）: ゲームの後の カード（#fdCards）と ねこ友だちの本（#fdBook）
   - 絵は SG_ART だけ。読めなかった絵は .fr-missing で隠す（壊れた絵のマークを出さない）
   - ゆれる飾り（紙ふぶき・💗）は CSS だけ・プレイ中は出さない。動きを減らす設定なら 出さない
   - たて向き（スマホ）が基本。横向きで低い画面（高さ 500px 以下）は 左右2列に */

.fr-missing { visibility: hidden !important; }

/* ================= ゲームの後の カード ================= */
.fr-cards {
  z-index: 55;
  gap: 10px;
  padding: 14px 12px;
  background: rgba(255, 240, 246, 0.95);
  overflow-y: auto;
  /* 入りきる時は まんなか・入りきらない小さい画面では 上から並べてスクロール（カードの上下の auto の余白。
     justify-content: safe center は Chrome 115 から → 古い端末では カードの上が 画面の外に切れる） */
  justify-content: flex-start;
}
.fr-cards > .fr-card { margin-top: auto; margin-bottom: auto; }
.fr-card {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 360px;
  padding: 14px 14px 16px;
  border-radius: 24px;
  background: #fff;
  border: 3px solid #F6C4D4;
  box-shadow: 0 6px 0 #F6C4D4;
  text-align: center;
  animation: fr-in 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
@keyframes fr-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fr-card .fr-ok { flex-shrink: 0; margin-top: 4px; }
.fr-c-title {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.45;
  color: var(--accent-deep);
  word-break: keep-all;              /* ことばの間（スペース）で 折り返す */
  overflow-wrap: anywhere;
}
.fr-c-pics { display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.fr-c-cat { width: 110px; height: 110px; flex-shrink: 0; }
.fr-c-cat { width: clamp(84px, calc(var(--app-h, 640px) * 0.17), 110px); height: clamp(84px, calc(var(--app-h, 640px) * 0.17), 110px); } /* 低い画面では 少し小さく */
.fr-c-item {
  width: 96px;
  height: 96px;
  width: clamp(76px, calc(var(--app-h, 640px) * 0.15), 96px);
  height: clamp(76px, calc(var(--app-h, 640px) * 0.15), 96px);
  flex-shrink: 0;
  padding: 9px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #FFF6C9 0%, #FFE6F0 70%, rgba(255, 230, 240, 0) 100%);
}
.fr-c-item.big { width: 150px; height: 150px; padding: 12px; }
.fr-c-name {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.45;
}
.fr-c-cnt { color: var(--accent-deep); font-size: 18px; }
.fr-c-use { font-size: 14px; font-weight: 800; line-height: 1.45; color: var(--ink-soft); }
/* 段階の札（メダルの絵＋ことば） */
.fr-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 10px 1px 6px;
  border-radius: 999px;
  border: 2px solid #F6C4D4;
  background: var(--bg2);
  color: var(--accent-deep);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  white-space: nowrap;
}
.fr-pill.s0 { padding-left: 10px; background: #fff; border-color: var(--line); color: var(--ink-soft); }
.fr-pill-ico { display: block; width: 22px; height: 22px; object-fit: contain; }
/* おてがみ（🐾 の はんこ） */
.fr-letter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 7px 12px 6px;
  border-radius: 14px;
  background: #FFF9EE;
  border: 2px dashed #F2D3A8;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
.fr-letter-txt { word-break: keep-all; overflow-wrap: anywhere; } /* ことばの間（スペース）で 折り返す */
.fr-letter-sign { align-self: flex-end; color: var(--accent-deep); font-size: 14px; font-weight: 900; white-space: nowrap; }

/* ---- しんきろく: 3:2 の ぶたい（うしろの絵＋こねこ6匹＋紙ふぶき）と その下に ことば・ボタン ---- */
.fr-rec { max-width: 420px; gap: 4px; padding: 10px 10px 14px; }
.fr-rec-stage {
  position: relative;
  width: 100%;
  width: min(100%, calc(var(--app-h, 640px) * 0.52));  /* 低い画面では 少し小さく（3:2 のまま） */
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFE3EF 0%, #FFF3D9 55%, #E6F7F0 100%); /* うしろの絵が 無い・読めない時 */
}
.fr-rec-bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* こねこ6匹: ぶたいの はばの 80%・まんなか・下の はしを 高さの 95% に（うしろの絵の ステージの 床に 立つ） */
.fr-rec-kits { position: absolute; left: 10%; bottom: 5%; display: block; width: 80%; height: auto; }
.fr-rec-title { font-size: 30px; font-size: clamp(26px, calc(var(--app-h, 640px) * 0.054), 34px); font-weight: 900; line-height: 1.3; color: #FF3D7F; }
.fr-rec-num { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 8px; font-size: 34px; font-size: clamp(28px, calc(var(--app-h, 640px) * 0.058), 36px); font-weight: 900; line-height: 1.25; color: var(--ink); }
.fr-rec-num .sg-emoji { font-size: 0.85em; }
.fr-rec-old { font-size: 16px; font-weight: 800; color: var(--ink-soft); }
.fr-rec-troph { display: flex; justify-content: center; gap: 6px; }
.fr-rec-tro { display: block; width: 36px; height: 36px; width: clamp(30px, calc(var(--app-h, 640px) * 0.062), 40px); height: clamp(30px, calc(var(--app-h, 640px) * 0.062), 40px); object-fit: contain; }
.fr-rec-btns { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; }
.fr-rec-btns .sg-btn { min-height: 56px; padding: 4px 18px; font-size: 19px; white-space: nowrap; }
.fr-rec-btns .fr-ok { min-width: 110px; margin-top: 0; }
.fr-share .sg-emoji { font-size: 20px; }
.fr-share.fr-busy { opacity: 0.6; }

/* 紙ふぶき・ふってくる 💗（ぶたいの上・3 秒まで・さわれない） */
.fr-fx { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.fr-cf {
  position: absolute;
  top: -14px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  animation: fr-fall 2.2s ease-in forwards;  /* おくれ 0.72 秒まで → 3 秒で ぜんぶ おわる */
}
.fr-fh {
  position: absolute;
  top: -26px;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  animation: fr-fall 2.4s linear forwards;   /* おくれ 0.5 秒まで → 3 秒で ぜんぶ おわる */
}
@keyframes fr-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), 330px) rotate(var(--rot, 0deg)); }
}

/* ---- だいすき: 大きな絵と ふわふわ 💗 ---- */
.t-love { overflow: hidden; }
.t-love > .fr-fx { z-index: 2; } /* カードの 前を ふわふわ のぼる（さわれない） */
.fr-lh {
  position: absolute;
  bottom: -40px;
  font-style: normal;
  line-height: 1;
  opacity: 0;
  animation: fr-rise 3.4s ease-in-out infinite;
}
@keyframes fr-rise {
  0% { opacity: 0; transform: translateY(0) scale(0.8); }
  20% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-520px) scale(1.15); }
}
.fr-love { gap: 2px; padding: 10px 14px 14px; }
.fr-love-art {
  height: 220px;
  height: clamp(140px, calc(var(--app-h, 640px) * 0.4), 380px);
  aspect-ratio: 540 / 718;
  flex-shrink: 0;
}
.fr-love-art .fr-love-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fr-love-big { font-size: 30px; font-weight: 900; line-height: 1.35; color: #FF3D7F; }
.fr-love-name { font-size: 20px; font-weight: 900; line-height: 1.45; }

/* ---- 新しい バッジ（何こでも: 多い時は 中で スクロール） ---- */
.fr-blist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px 6px;
  width: 100%;
  max-height: 46vh;
  max-height: calc(var(--app-h, 640px) * 0.46);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fr-bitem { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; font-weight: 800; line-height: 1.35; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.fr-bitem-img { display: block; width: 64px; height: 64px; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .fr-fx { display: none; }
  .fr-card { animation: none; }
}

/* ================= ねこ友だちの本 ================= */
.fr-book {
  position: absolute;
  inset: 0;
  z-index: 52;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.fr-top {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 6px 10px;
  background: #fff;
  border-bottom: 2px solid var(--line);
}
.fr-back { min-height: 44px; min-width: 0; padding: 2px 14px; font-size: 16px; box-shadow: 0 3px 0 var(--line); }
.fr-top-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--accent-deep);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-top-count { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; padding: 2px 10px; border-radius: 999px; background: var(--bg2); color: var(--accent-deep); font-size: 15px; font-weight: 900; }
.fr-scroll { flex: 1; min-height: 0; height: auto; padding: 6px 12px 28px; }
.fr-sec { margin: 4px 0 14px; }
.fr-sec h3 { display: flex; align-items: center; gap: 6px; margin: 6px 0 8px; font-size: 18px; font-weight: 900; line-height: 1.45; }
.fr-h-count { margin-left: auto; font-size: 14px; color: var(--ink-soft); }

/* バッジ（とっていない物は うすい灰色＋?・さわると 名前と とりかた） */
.fr-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.fr-badge {
  position: relative;
  min-height: 56px;
  aspect-ratio: 1;
  padding: 6px;
  border-radius: 16px;
  border: 2px solid var(--line);
  background: #fff;
  cursor: pointer;
  touch-action: manipulation;
}
.fr-badge.locked .sg-art { filter: grayscale(1) opacity(0.3); }
.fr-q { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 26px; font-weight: 900; pointer-events: none; }
.fr-badge.sel { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 143, 177, 0.35); }
.fr-tip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 48px;
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}
.fr-tip b { color: var(--accent-deep); font-size: 16px; }

/* 猫（めずらしい ねこで まだ あっていない子は 黒い かげ＋???） */
.fr-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.fr-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 56px;
  padding: 8px 6px 10px;
  border-radius: 18px;
  border: 2px solid var(--line);
  background: #fff;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}
.fr-cat.unmet { cursor: default; background: #FBF4EF; }
.fr-cat-art { width: 88px; height: 88px; }
.fr-sil .sg-art, .fr-sil .sg-art-svg { filter: brightness(0) opacity(0.45); }
.fr-cat-name { font-size: 17px; font-weight: 900; line-height: 1.45; }
.fr-meter { width: 88%; height: 10px; border-radius: 99px; background: rgba(90, 70, 54, 0.12); overflow: hidden; }
.fr-meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FF9AB8, #FF5C94); }
.fr-meter-txt { font-size: 13px; font-weight: 800; line-height: 1.45; color: var(--ink-soft); white-space: nowrap; }
.fr-cat-gifts { display: flex; gap: 4px; margin-top: 2px; }
.fr-gift { width: 36px; height: 36px; padding: 3px; border-radius: 10px; background: var(--bg); }
.fr-gift.locked .sg-art { filter: grayscale(1) opacity(0.3); }

/* たからばこ（まだの物は うすい かげ＋???・持っている数 ×N） */
.fr-chest { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.fr-tr {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px 8px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: #fff;
}
.fr-tr-art { width: 52px; height: 52px; }
.fr-tr.locked .sg-art { filter: brightness(0) opacity(0.16); }
.fr-tr-name { font-size: 12px; font-weight: 800; line-height: 1.35; text-align: center; }
.fr-tr-n { position: absolute; top: 3px; right: 6px; color: var(--accent-deep); font-size: 13px; font-weight: 900; }

/* 猫の くわしい ページ（だいすきなら 大きな だいすきの絵・おてがみ） */
.fr-detail { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; background: var(--bg); }
.fr-detail-in { flex: 1; min-height: 0; height: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 14px 28px; }
.fr-detail-art { flex-shrink: 0; width: 160px; height: 160px; }
.fr-detail-art.love { width: auto; height: 260px; height: clamp(160px, calc(var(--app-h, 640px) * 0.4), 360px); aspect-ratio: 540 / 718; }
.fr-detail-name { font-size: 24px; font-weight: 900; line-height: 1.4; }
.fr-detail-stage { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.fr-letters { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; margin-top: 6px; }
.fr-letters h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 17px; font-weight: 900; line-height: 1.45; }
.fr-none { margin: 0; color: var(--ink-soft); font-size: 15px; font-weight: 800; text-align: center; }

/* ================= 横向きで 低い画面 ================= */
@media (orientation: landscape) and (max-height: 500px) {
  .fr-cards { padding: 8px 12px; }
  .fr-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    column-gap: 14px;
    row-gap: 2px;
    width: auto;
    max-width: 100%;
    padding: 8px 14px 10px;
  }
  .fr-c-title { font-size: 17px; }
  .fr-c-cat { width: 84px; height: 84px; }
  .fr-c-item { width: 72px; height: 72px; padding: 7px; }
  .fr-c-item.big { width: 104px; height: 104px; padding: 9px; }
  .fr-c-name { font-size: 17px; }
  .fr-c-use { font-size: 13px; }
  .fr-card .fr-ok { min-width: 150px; min-height: 56px; font-size: 20px; margin-top: 2px; }
  .fr-letter { font-size: 13px; padding: 5px 10px 4px; }
  .fr-letter-sign { font-size: 12px; }
  /* なかよし: 左に 絵と おてがみ、右に ことばと OK */
  .fr-up { grid-template-areas: "pics title" "pics name" "letter use" "letter ok"; max-width: 520px; }
  .fr-up .fr-c-title { grid-area: title; }
  .fr-up .fr-c-pics { grid-area: pics; }
  .fr-up .fr-c-name { grid-area: name; }
  .fr-up .fr-c-use { grid-area: use; }
  .fr-up .fr-letter { grid-area: letter; align-self: center; max-width: 240px; }
  .fr-up .fr-ok { grid-area: ok; }
  .fr-tre, .fr-crown { grid-template-areas: "pics title" "pics name" "pics use" "pics ok"; }
  .fr-tre .fr-c-title, .fr-crown .fr-c-title { grid-area: title; }
  .fr-tre .fr-c-pics, .fr-crown .fr-c-pics { grid-area: pics; }
  .fr-tre .fr-c-name, .fr-crown .fr-c-name { grid-area: name; }
  .fr-crown .fr-c-use { grid-area: use; }
  .fr-tre .fr-ok, .fr-crown .fr-ok { grid-area: ok; }
  /* 新しい バッジ: 1れつに ならべて 横に スクロール（低い画面でも 名前が 切れない）・OK は 右 */
  .fr-bdg { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "list ok"; width: 100%; max-width: 560px; padding: 8px 12px 10px; }
  .fr-bdg .fr-c-title { grid-area: title; }
  .fr-blist { grid-area: list; display: flex; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden; }
  .fr-bitem { flex: 0 0 78px; }
  .fr-bitem:first-child { margin-left: auto; }  /* 少ない時は まんなか・多い時は 左から（スクロールで ぜんぶ 見える） */
  .fr-bitem:last-child { margin-right: auto; }
  .fr-bitem-img { width: 48px; height: 48px; }
  .fr-bdg .fr-ok { grid-area: ok; }
  /* しんきろく: 左に ぶたい、右に ことばと ボタン */
  .fr-rec { grid-template-areas: "stage title" "stage num" "stage troph" "stage btns"; max-width: 100%; padding: 8px 10px; }
  /* ぶたいは 高さ 143px まで（右に ボタン2つが 横に ならぶ はばを のこす） */
  .fr-rec-stage { grid-area: stage; width: auto; height: min(calc(var(--app-h, 360px) - 170px), 143px); }
  .fr-rec-title { grid-area: title; font-size: 24px; }
  .fr-rec-num { grid-area: num; font-size: 30px; }
  .fr-rec-troph { grid-area: troph; }
  .fr-rec-tro { width: 32px; height: 32px; }
  .fr-rec-btns { grid-area: btns; gap: 8px; }
  .fr-rec-btns .sg-btn { font-size: 17px; padding: 4px 12px; gap: 5px; }
  .fr-rec-btns .fr-ok { min-width: 88px; }
  /* だいすき: 左に 大きな絵、右に ことばと OK */
  .fr-love { grid-template-areas: "art big" "art name" "art ok"; }
  .fr-love-art { grid-area: art; height: calc(var(--app-h, 360px) - 160px); max-height: 260px; }
  .fr-love-big { grid-area: big; font-size: 26px; }
  .fr-love-name { grid-area: name; }
  .fr-love .fr-ok { grid-area: ok; }

  .fr-top { min-height: 50px; padding: 3px 10px; }
  .fr-scroll { padding: 4px 12px 20px; }
  .fr-cats { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  /* くわしく: 左に 絵、右に 名前・段階・おてがみ（おてがみが スクロール しないで 見える） */
  .fr-detail-in {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    align-items: start;
    justify-items: center;
    column-gap: 16px;
    row-gap: 4px;
  }
  .fr-detail-art { grid-column: 1; grid-row: 1 / span 3; width: 120px; height: 120px; }
  .fr-detail-art.love { width: auto; height: min(200px, calc(var(--app-h, 360px) - 160px)); }
  .fr-detail-name, .fr-detail-stage, .fr-letters { grid-column: 2; }
  .fr-letters { margin-top: 2px; }
}
@media (orientation: landscape) and (max-height: 340px) {
  .fr-cards { padding: 6px 12px; }
  .fr-card { padding: 6px 12px 8px; border-width: 2px; box-shadow: 0 4px 0 #F6C4D4; }
  .fr-c-title { font-size: 15px; }
  .fr-c-cat { width: 58px; height: 58px; }
  .fr-c-item { width: 54px; height: 54px; padding: 5px; }
  .fr-c-item.big { width: 84px; height: 84px; }
  .fr-c-name { font-size: 15px; }
  .fr-c-use { font-size: 12px; }
  .fr-pill { font-size: 12px; }
  .fr-pill-ico { width: 18px; height: 18px; }
  .fr-card .fr-ok { min-height: 56px; font-size: 19px; }
  .fr-letter { font-size: 12px; line-height: 1.4; }
  .fr-up .fr-letter { max-width: 200px; } /* 右の列を ひろく（ことばと パーツの名前が 1行に 入って 低くなる） */
  /* 高さ = 見えている高さ − 上のバー・下のタブ・すきま・わく（= app-h − 140px） */
  .fr-rec-title { font-size: 18px; line-height: 1.4; }
  .fr-rec-num { font-size: 22px; }
  .fr-rec-old { font-size: 13px; }
  .fr-rec-tro { width: 24px; height: 24px; }
  .fr-rec-stage { height: min(calc(var(--app-h, 280px) - 140px), 143px); }
  .fr-rec-btns .sg-btn { font-size: 16px; }
  .fr-love-big { font-size: 22px; }
  .fr-love-name { font-size: 16px; }
  .fr-love-art { height: calc(var(--app-h, 280px) - 140px); }
  .fr-bitem { font-size: 12px; }
  .fr-bitem-img { width: 40px; height: 40px; }
  .fr-top { min-height: 48px; }
  .fr-back { min-height: 44px; font-size: 15px; }
  .fr-detail-in { padding-top: 6px; row-gap: 2px; }
  .fr-detail-art { width: 100px; height: 100px; }
  .fr-detail-name { font-size: 18px; line-height: 1.3; }
  .fr-letters { gap: 6px; }
  .fr-letters h4 { font-size: 14px; }
}