/* ===== CSS変数 ===== */
:root {
  --bg: #fdfaf4;
  --bg-bar: #f9f5eb;
  --border-bar: #ede8d8;
  --text-primary: #2a2a2a;
  --text-muted: #aaa;
  --female: #d46a5a;
  --female-bg: rgba(212, 106, 90, 0.12);
  --male: #5a9bd4;
  --male-bg: rgba(90, 155, 212, 0.12);
  --card-bg: #fff;
  --card-border: #f5e8c0;
  --gold: #d4a820;
}

/* ===== リセット ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  height: 100vh;        /* dvh非対応ブラウザ向けフォールバック */
  height: 100dvh;       /* モバイルのURLバー分を含めた実表示高さに追従 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ===== コンテンツ領域（広告枠を除いた可変高さ） ===== */
.app-content {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* ===== 画面切替 ===== */
.screen { display: none; flex-direction: column; height: 100%; }
.screen.active { display: flex; }

/* ===== ゲーム画面 ===== */
.game-header {
  padding: 32px 24px 12px;
  text-align: center;
  flex-shrink: 0;
}
.game-title {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.score-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.score-num {
  font-size: 56px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  display: inline-block;
}
.score-unit { font-size: 14px; color: var(--text-muted); }

@keyframes scoreBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.score-num--bump { animation: scoreBump 0.25s ease-out; }

/* ===== 上部バー ===== */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  background: var(--bg-bar);
  border-top: 1px solid var(--border-bar);
  border-bottom: 1px solid var(--border-bar);
  flex-shrink: 0;
}
.label {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: 20px;
  letter-spacing: 0.05em;
}
.label--female { color: var(--female); background: var(--female-bg); }
.label--male   { color: var(--male);   background: var(--male-bg); }
.top-icons { display: flex; gap: 8px; }
.icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.icon-btn:hover { background: rgba(0,0,0,0.12); }

/* ===== ステージ（カードスタック置き場） ===== */
.stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.25;
  pointer-events: none;
  user-select: none;
}
.hint--left  { margin-right: 16px; }
.hint--right { margin-left: 16px; }
.hint-arrow { font-size: 22px; color: var(--text-primary); }
.hint-text  { font-size: 11px; font-weight: 700; color: var(--text-muted); }

/* ===== カードスタック ===== */
.card-stack {
  position: relative;
  width: 200px;
  height: 270px;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 260px;
  border-radius: 20px;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.25s ease;
  touch-action: none;
  user-select: none;
}

.card[data-pos="0"] {
  transform: rotate(0deg) scale(1);
  z-index: 3;
  box-shadow: 0 12px 36px rgba(0,0,0,0.14);
}
.card[data-pos="1"] {
  transform: rotate(-2deg) scale(0.95) translateY(10px);
  z-index: 2;
  pointer-events: none;
}
.card[data-pos="2"] {
  transform: rotate(3deg) scale(0.90) translateY(18px);
  z-index: 1;
  pointer-events: none;
}

.card-name {
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.05em;
}

@keyframes flyLeft {
  to { transform: translateX(-140vw) rotate(-30deg); opacity: 0; }
}
@keyframes flyRight {
  to { transform: translateX(140vw) rotate(30deg); opacity: 0; }
}
.card--flying-left {
  animation: flyLeft 0.3s ease-in forwards;
  pointer-events: none;
  z-index: 10;
}
.card--flying-right {
  animation: flyRight 0.3s ease-in forwards;
  pointer-events: none;
  z-index: 10;
}

/* ===== 操作ガイド ===== */
.swipe-guide {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  padding: 14px 0 28px;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

/* ===== 共通：画面ヘッダー ===== */
.screen-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border-bar);
  flex-shrink: 0;
}
.back-btn {
  font-size: 28px;
  color: var(--female);
  line-height: 1;
  padding: 0 4px;
}
.screen-title {
  font-size: 16px;
  font-weight: 700;
}
.screen-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

/* ===== 設定画面 ===== */
.settings-body { flex: 1; min-height: 0; padding: 4px 0 24px; overflow-y: auto; }
.settings-section-label {
  padding: 14px 20px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--bg-bar);
}
.settings-row-label { font-size: 13px; }
.settings-row-sub   { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.settings-value     { font-size: 13px; color: var(--text-muted); }
.danger-btn {
  font-size: 11px;
  color: var(--male);
  background: var(--male-bg);
  border: 1px solid rgba(212, 106, 90, 0.3);
  border-radius: 8px;
  padding: 6px 14px;
  transition: background 0.15s;
}
.danger-btn:hover { background: rgba(212, 106, 90, 0.2); }

/* ===== ひよこ図鑑 ===== */
.gallery-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
}
.gallery-card {
  background: var(--card-bg);
  border-radius: 14px;
  border: 1.5px solid var(--card-border);
  padding: 14px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.gallery-chick-wrap {
  width: 72px;
  height: 84px;
  position: relative;
  overflow: visible;
}
.gallery-chick-wrap .chick {
  transform: scale(0.6);
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
}
.gallery-card-name {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}
.gallery-card-stats {
  display: flex;
  gap: 5px;
}
.stat {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
}
.stat--female { color: var(--female); background: var(--female-bg); }
.stat--male   { color: var(--male);   background: var(--male-bg); }

/* ===== ひよこコンポーネント ===== */
.chick {
  position: relative;
  width: 120px;
  height: 140px;
  flex-shrink: 0;
}

/* 体（下部の大きな円） */
.chick-body {
  position: absolute;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--chick-body);
  border: var(--chick-body-border, none);
  left: 16px;
  top: 40px;
}

/* 頭（上部の小さな円、体に重なる） */
.chick-head {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--chick-body);
  border: var(--chick-body-border, none);
  left: 34px;
  top: 0;
}

/* 左目 */
.chick-eye-left {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chick-eye);
  left: 44px;
  top: 12px;
}

/* 右目 */
.chick-eye-right {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chick-eye);
  left: 63px;
  top: 12px;
}

/* くちばし */
.chick-beak {
  position: absolute;
  width: 11px;
  height: 7px;
  border-radius: 3px;
  background: var(--chick-beak);
  left: 55px;
  top: 25px;
}

/* 左翼 */
.chick-wing-left {
  position: absolute;
  width: 26px;
  height: 16px;
  border-radius: 50% 0 50% 50%;
  background: var(--chick-wing);
  left: 4px;
  top: 75px;
  transform: rotate(-25deg);
}

/* 右翼 */
.chick-wing-right {
  position: absolute;
  width: 26px;
  height: 16px;
  border-radius: 0 50% 50% 50%;
  background: var(--chick-wing);
  right: 4px;
  top: 75px;
  transform: rotate(25deg);
}

/* 左足 */
.chick-foot-left {
  position: absolute;
  width: 18px;
  height: 11px;
  border-radius: 0 0 6px 6px;
  background: var(--chick-beak);
  left: 30px;
  top: 126px;
}

/* 右足 */
.chick-foot-right {
  position: absolute;
  width: 18px;
  height: 11px;
  border-radius: 0 0 6px 6px;
  background: var(--chick-beak);
  left: 66px;
  top: 126px;
}

/* アクセサリー：リボン */
.chick-ribbon {
  position: absolute;
  top: -7px;
  left: 50px;
  width: 20px;
  height: 12px;
}
.chick-ribbon-left {
  position: absolute;
  width: 11px;
  height: 8px;
  background: #ff7eb3;
  border-radius: 50%;
  top: 0;
  left: 0;
  transform: rotate(45deg);
}
.chick-ribbon-right {
  position: absolute;
  width: 11px;
  height: 8px;
  background: #ff7eb3;
  border-radius: 50%;
  top: 0;
  right: 0;
  transform: rotate(-45deg);
}
.chick-ribbon-knot {
  position: absolute;
  width: 7px;
  height: 6px;
  background: #ff9ec8;
  border-radius: 50%;
  top: 2px;
  left: 6px;
}

/* アクセサリー：帽子 */
.chick-hat {
  position: absolute;
  top: -12px;
  left: 46px;
  width: 26px;
  height: 16px;
  background: #5ab4d4;
  border-radius: 5px 5px 0 0;
}
.chick-hat::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: -4px;
  width: 34px;
  height: 5px;
  background: #4a9abf;
  border-radius: 2px;
}

/* アクセサリー：メガネ */
.chick-glasses {
  position: absolute;
  top: 11px;
  left: 40px;
  width: 34px;
  height: 10px;
}
.chick-glasses-left {
  position: absolute;
  left: 2px;
  top: 0;
  width: 10px;
  height: 8px;
  border: 1.5px solid #777;
  border-radius: 50%;
  background: rgba(180, 220, 255, 0.35);
}
.chick-glasses-bridge {
  position: absolute;
  left: 13px;
  top: 3px;
  width: 6px;
  height: 2px;
  background: #777;
}
.chick-glasses-right {
  position: absolute;
  left: 20px;
  top: 0;
  width: 10px;
  height: 8px;
  border: 1.5px solid #777;
  border-radius: 50%;
  background: rgba(180, 220, 255, 0.35);
}

/* ===== 広告（Web 版のみ表示。Electron 版は web-ads が付かず非表示） ===== */
/* 画面下部の常設バナー */
.ad-banner {
  display: none;
  flex-shrink: 0;
  padding: 6px 0;
  background: var(--bg-bar);
  border-top: 1px solid var(--border-bar);
  align-items: center;
  justify-content: center;
}
body.web-ads .ad-banner { display: flex; }

/* 図鑑・設定のコンテンツ末尾に置く広告枠 */
.ad-inline {
  display: none;
  justify-content: center;
  padding: 16px 12px 20px;
}
body.web-ads .ad-inline { display: flex; }
#ad-gallery.ad-inline { grid-column: 1 / -1; }   /* 図鑑グリッドの全幅に渡す */
#ad-settings.ad-inline { border-top: 1px solid var(--border-bar); margin-top: 8px; }

/* 横長固定サイズバナー。auto 形式だと大きな矩形になり画面を占有するため、
   ブレークポイントごとに横長サイズを明示する。 */
.ad-unit {
  width: 320px;
  height: 50px;
}
@media (min-width: 480px) {
  .ad-unit { width: 468px; height: 60px; }
}
@media (min-width: 768px) {
  .ad-unit { width: 728px; height: 90px; }
}

/* ===== レスポンシブ ===== */
@media (max-width: 400px) {
  .card-stack {
    width: 160px;
    height: 220px;
  }
  .card {
    width: 160px;
    height: 210px;
  }
  .chick {
    width: 96px;
    height: 112px;
  }
  .chick-body {
    width: 70px;
    height: 70px;
    left: 13px;
    top: 32px;
  }
  .chick-head {
    width: 42px;
    height: 42px;
    left: 27px;
  }
  .chick-eye-left  { left: 35px; top: 10px; width: 6px; height: 6px; }
  .chick-eye-right { left: 51px; top: 10px; width: 6px; height: 6px; }
  .chick-beak      { left: 44px; top: 21px; width: 9px; height: 6px; }
  .chick-wing-left  { left: 2px; top: 60px; width: 21px; height: 13px; }
  .chick-wing-right { right: 2px; top: 60px; width: 21px; height: 13px; }
  .chick-foot-left  { left: 24px; top: 101px; width: 14px; height: 9px; }
  .chick-foot-right { left: 53px; top: 101px; width: 14px; height: 9px; }
  .chick-hat { left: 37px; }
  .chick-ribbon { left: 40px; }
  .chick-glasses { left: 32px; top: 9px; }

  .gallery-chick-wrap {
    width: 58px;
    height: 67px;
  }
  .gallery-chick-wrap .chick {
    transform: scale(0.48);
  }

  .score-num { font-size: 44px; }
}