* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #fbf3e6;
  color: #4a3a30;
  font-family: -apple-system, "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}

.hero { text-align: center; margin: 12px 0 20px; }
.hero h1 { font-size: 30px; margin: 0; }
.catch { margin: 6px 0 0; font-size: 14px; opacity: 0.75; }
.hero .sound-toggle { margin-top: 10px; }

h2 { font-size: 17px; margin: 24px 0 10px; }

.btn {
  font: inherit;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  background: #e0884a;
  color: #fff;
}

/* スタンプカード */
.card-section h2 { margin-top: 0; }
.stamp-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  background: #fffaf2;
  border: 2px dashed #d9b99a;
}
.stamp-slot {
  width: calc((100% - 32px) / 5);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #ead7c3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4bfa9;
  font-size: 14px;
}
.stamp-slot.stamped { border-color: transparent; background: #fde3e6; }
.paw { width: 72%; height: 72%; fill: #e5728a; }
.stamp-slot.stamped .paw { transform: rotate(-12deg); }
.card-info { text-align: center; font-size: 14px; margin: 10px 0 0; }
.btn-unlock { display: block; margin: 12px auto 0; background: #e5728a; }
.btn-unlock[hidden] { display: none; }

/* ゲーム一覧 */
.games { display: flex; flex-direction: column; gap: 10px; }
.game-link {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-radius: 14px;
  background: #d9a86c;
  color: #fff;
  text-decoration: none;
  box-shadow: inset 0 -5px 0 #b9874e;
}
.game-name { font-size: 18px; font-weight: bold; }
.game-desc { font-size: 13px; opacity: 0.9; margin-top: 2px; }
.game-link.has-icon { flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; }
.game-icon-wrap { flex: none; width: 56px; height: 56px; }
.game-icon { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 0 rgba(120, 80, 40, 0.25)); }
.game-text { display: flex; flex-direction: column; min-width: 0; }
.stamp-rule { font-size: 12px; opacity: 0.7; margin: 8px 0 0; }

/* にゃんこ図鑑へのリンク */
.zukan-link { background: #e5a0ad; box-shadow: inset 0 -5px 0 #c97b8a; }

/* 一番下: はじめの画面（ファーストビュー）をもう一度出すボタン。控えめな色にする */
.fv-replay-wrap { text-align: center; margin: 32px 0 8px; }
.btn-replay {
  min-height: 44px;
  font-size: 14px;
  padding: 10px 22px;
  background: #fffaf2;
  color: #8a6f5a;
  border: 2px solid #ead7c3;
  cursor: pointer;
}
.btn-replay:active { transform: scale(0.96); background: #fde3e6; }

/* アルバム */
.album-count { font-size: 14px; font-weight: normal; opacity: 0.7; margin-left: 6px; }
.album {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.album-cell {
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  background: #eadfd2;
  font: inherit;
  color: inherit;
}
.album-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.locked { font-size: 28px; color: #c8b6a4; }
.album-cell.new { animation: pop 0.6s ease-out; }
@keyframes pop {
  0% { transform: scale(0.6); }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.photo-missing {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fde3e6;
  font-size: 11px;
  text-align: center;
  line-height: 1.4;
}
.photo-missing .paw { width: 40%; height: 40%; margin-bottom: 4px; }

/* 写真を大きく見る */
.viewer {
  position: fixed; inset: 0;
  background: rgba(60, 40, 30, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.viewer[hidden] { display: none; }
.viewer-body {
  background: #fffaf2;
  border-radius: 16px;
  padding: 16px;
  width: min(420px, 100%);
  text-align: center;
}
.viewer-photo { aspect-ratio: 1; border-radius: 10px; overflow: hidden; position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.viewer-slide { position: absolute; inset: 0; }
.viewer-slide img { -webkit-user-drag: none; pointer-events: none; }
.viewer-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viewer-photo .photo-missing { font-size: 16px; }
.viewer-caption { margin: 4px 0 10px; }
.viewer-body { max-height: 100%; overflow-y: auto; }
.viewer-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; }
.nav-btn { font: inherit; font-size: 26px; line-height: 1; width: 44px; height: 36px; border: none; border-radius: 999px; background: #eadfd2; color: #6b5a4c; }
.nav-btn:disabled { opacity: 0.3; }
.viewer-count { font-size: 14px; min-width: 56px; font-variant-numeric: tabular-nums; }

/* フレームと飾りを選ぶ */
.deco-pick { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; text-align: left; }
.deco-label { flex: none; width: 4.5em; font-size: 13px; opacity: 0.8; }
.deco-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
.deco-chip { flex: none; font: inherit; font-size: 13px; padding: 6px 11px; border-radius: 999px; border: 2px solid transparent; background: #eadfd2; color: #6b5a4c; }
.deco-chip.selected { background: #e0884a; color: #fff; border-color: #4a3a30; }

/* 写真の飾り（album/deco.js）。余白は写真の幅に対する割合なので、一覧の小さな写真でも同じ見た目になる */
.deco { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
.deco > img, .deco > .photo-missing { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 3px; }
.frame-wood { padding: 6%; background: repeating-linear-gradient(90deg, #b9874e 0 6px, #c99660 6px 11px); box-shadow: inset 0 0 0 2px #8a6038; }
.frame-pink { padding: 5%; background: #f6a9c4; }
.frame-pink > img { border-radius: 10%; }
.frame-paw { padding: 8%; background: #f9cdd7; }
.frame-polaroid { padding: 5% 5% 18%; background: #fffefb; box-shadow: inset 0 0 0 1px #e8ddd0; }
.frame-star { padding: 8%; background: radial-gradient(circle at 30% 20%, #3d4f8a, #232c52); }
.deco-over { position: absolute; pointer-events: none; display: block; }
.deco-over svg { width: 100%; height: 100%; display: block; }
.corner { width: 12%; height: 12%; }
.corner-tl { left: 1.5%; top: 1.5%; transform: rotate(-20deg); }
.corner-tr { right: 1.5%; top: 1.5%; transform: rotate(20deg); }
.corner-bl { left: 1.5%; bottom: 1.5%; transform: rotate(-160deg); }
.corner-br { right: 1.5%; bottom: 1.5%; transform: rotate(160deg); }
.frame-star .corner-bl, .frame-star .corner-br { transform: none; }
.sticker-crown { left: 36%; top: 2%; width: 28%; height: 17%; }
.sticker-ribbon { left: 3%; top: 4%; width: 26%; height: 17%; transform: rotate(-18deg); }
.sticker-heart { right: 4%; top: 4%; width: 24%; height: 20%; }
.sticker-nya { left: 4%; bottom: 6%; width: 34%; height: 20%; }

/* ---- ファーストビュー（T66）: 最初に開いたときと、一番下のボタンから、トップの上に重ねて出す ---- */
.firstview { display: none; }
html.fv-on body { overflow: hidden; }
html.fv-on .firstview {
  display: flex;
  position: fixed; inset: 0;
  z-index: 50;
  align-items: center; justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 42%, #fffaf2 0, #fffaf2 30%, rgba(255, 250, 242, 0) 62%),
    radial-gradient(circle at 15% 12%, #fde3e6 0, rgba(253, 227, 230, 0) 38%),
    radial-gradient(circle at 88% 90%, #f7dcc0 0, rgba(247, 220, 192, 0) 42%),
    #fbf3e6;
  overflow: hidden;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.firstview.fv-leave { animation: fv-leave 0.4s ease-in forwards; pointer-events: none; }
@keyframes fv-leave { to { opacity: 0; transform: scale(1.06); } }

/* 背景の肉球の足あと */
.fv-paws { position: absolute; inset: 0; pointer-events: none; }
.fv-paws .paw { position: absolute; width: 34px; height: 34px; fill: #e5728a; opacity: 0;
  animation: fv-step 9s ease-in-out infinite; }
@keyframes fv-step {
  0% { opacity: 0; } 8% { opacity: 0.22; } 70% { opacity: 0.22; } 85%, 100% { opacity: 0; }
}

.fv-inner { position: relative; width: min(400px, 100%); text-align: center; }

.fv-title {
  margin: 0;
  display: flex; flex-direction: column; align-items: center;
  font-weight: 800; line-height: 1.05; letter-spacing: 0.04em;
  animation: fv-drop 0.7s cubic-bezier(.3, 1.5, .5, 1) both;
}
.fv-title span {
  /* 白いふちどり（文字を太く見せる） */
  text-shadow: 0 3px 0 #fff, 3px 0 0 #fff, -3px 0 0 #fff, 0 -3px 0 #fff,
    2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff,
    0 6px 0 rgba(185, 135, 78, 0.35);
}
.fv-t1 { font-size: 44px; color: #e0884a; transform: rotate(-3deg); }
.fv-t2 { font-size: 50px; color: #e5728a; transform: rotate(2deg); }
@keyframes fv-drop { 0% { opacity: 0; transform: translateY(-30px) scale(0.8); } 100% { opacity: 1; transform: none; } }

.fv-catch {
  display: inline-block;
  margin: 14px 0 0; padding: 6px 14px;
  font-size: 14px; font-weight: bold; color: #8a6f5a;
  background: #fff; border-radius: 999px;
  box-shadow: 0 2px 0 #ead7c3;
  animation: fv-fade 0.6s 0.25s ease-out both;
}
@keyframes fv-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 並んだ猫。ざぶとんの上で、ゆっくり揺れる */
.fv-cats {
  position: relative;
  height: 170px;
  margin: 18px auto 6px;
  width: 300px; max-width: 100%;
}
.fv-cats::after {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: 4px; height: 34px;
  border-radius: 50%; background: #f2c9a0; box-shadow: inset 0 -6px 0 #e0ae7e;
  z-index: 0;
}
.fv-cat { position: absolute; bottom: 18px; z-index: 1; animation: fv-in 0.5s cubic-bezier(.3, 1.6, .5, 1) both; }
.fv-cat .cat { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 0 rgba(120, 80, 40, 0.2));
  transform-origin: 50% 90%; animation: fv-bob 2.6s ease-in-out infinite; }
.fv-cat.c1 { left: 2%;  width: 84px; height: 84px; animation-delay: 0.45s; }
.fv-cat.c2 { left: 50%; width: 118px; height: 118px; margin-left: -59px; bottom: 22px; z-index: 2; animation-delay: 0.35s; }
.fv-cat.c3 { right: 2%; width: 84px; height: 84px; animation-delay: 0.55s; }
.fv-cat.c1 .cat { animation-delay: -0.9s; }
.fv-cat.c3 .cat { animation-delay: -1.7s; }
.fv-cat.sleep .cat { animation: fv-breathe 3.4s ease-in-out infinite; }
@keyframes fv-in { from { opacity: 0; transform: translateY(24px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes fv-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-7px) rotate(4deg); }
}
@keyframes fv-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.04, 0.96); }
}
.fv-zzz { position: absolute; top: -8px; right: -6px; font-weight: bold; color: #9fb4d9; font-size: 18px;
  animation: fv-zzz 2.8s ease-in-out infinite; }
.fv-zzz.z2 { top: -26px; right: -18px; font-size: 13px; animation-delay: 1.4s; }
@keyframes fv-zzz {
  0% { opacity: 0; transform: translate(0, 6px); }
  30%, 70% { opacity: 1; }
  100% { opacity: 0; transform: translate(8px, -10px); }
}
.fv-heart { position: absolute; z-index: 3; width: 22px; height: 22px; fill: #f28ca5;
  animation: fv-float 3.2s ease-in-out infinite; }
.fv-heart.h1 { left: 30%; top: 0; }
.fv-heart.h2 { right: 28%; top: 14px; width: 16px; height: 16px; animation-delay: 1.6s; }
@keyframes fv-float {
  0% { opacity: 0; transform: translateY(10px) scale(0.6); }
  30%, 60% { opacity: 1; transform: translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateY(-18px) scale(0.9); }
}

.fv-start {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font: inherit; font-size: 22px; font-weight: bold; letter-spacing: 0.1em;
  padding: 14px 40px 16px;
  border: none; border-radius: 999px;
  background: #e5728a; color: #fff;
  box-shadow: inset 0 -6px 0 #c95670, 0 4px 12px rgba(201, 86, 112, 0.3);
  animation: fv-fade 0.6s 0.6s ease-out both, fv-pulse 2s 1.2s ease-in-out infinite;
}
.fv-start .paw { width: 26px; height: 26px; fill: #fff; transform: rotate(-12deg); }
.fv-start:active { transform: scale(0.95); }
@keyframes fv-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.fv-hint { margin: 14px 0 0; font-size: 13px; color: #8a6f5a; animation: fv-blink 2s 1.2s ease-in-out infinite both; }
@keyframes fv-blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } }

@media (max-height: 600px) {
  .fv-t1 { font-size: 36px; } .fv-t2 { font-size: 42px; }
  .fv-cats { height: 140px; margin-top: 10px; }
  .fv-start { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .firstview *, .firstview *::after { animation: none !important; }
  .fv-paws .paw { opacity: 0.18; }
}

/* ゲームから戻ったとき（T63）: さっき遊んだゲームのカードを一瞬だけ軽く光らせる */
.game-link.just-played { animation: just-played 1.2s ease-out; }
@keyframes just-played {
  0%, 30% { box-shadow: inset 0 -5px 0 #b9874e, 0 0 0 4px rgba(240, 160, 50, 0.9); }
  100% { box-shadow: inset 0 -5px 0 #b9874e, 0 0 0 4px rgba(240, 160, 50, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .game-link.just-played { animation-duration: 0.01s; }
}