:root {
  --bg: #05070c;
  --surface: #12161f;
  --surface-2: #1a2130;
  --surface-3: #1f2740;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --text: #f2f5fa;
  --muted: #8993a8;
  --accent: #00e5ff;
  --accent-2: #ff2e7e;
  --gold: #ffd166;
  --coral: #ff5470;
  --rank-c: #6b7688;
  --rank-b: #35c2c1;
  --rank-a: #ffd166;
  --rank-s: #ff5d3c;
  --rank-ss: #ff2e9e;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font-display: 'Orbitron', -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background:
    radial-gradient(circle at 28% 22%, rgba(0,229,255,0.18), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(255,46,126,0.15), transparent 50%),
    var(--bg);
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.splash.splash-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash-inner { text-align: center; padding: 0 24px; }
.splash-logo {
  color: var(--accent);
  opacity: 0;
  filter: drop-shadow(0 0 26px rgba(0,229,255,0.65));
  animation: splash-logo-in 0.7s ease-out 0.1s forwards;
}
.splash-title {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: splash-text-in 0.6s ease-out 0.55s forwards;
}
.splash-tagline {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.05em;
  opacity: 0;
  animation: splash-text-in 0.6s ease-out 0.95s forwards;
}
.splash-skip-hint {
  position: absolute;
  bottom: calc(30px + var(--safe-bottom));
  left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  opacity: 0;
  animation: splash-text-in 0.5s ease-out 1.5s forwards;
}
@keyframes splash-logo-in {
  0% { opacity: 0; transform: scale(0.6) rotate(-10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes splash-text-in {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

#app {
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 18% 0%, rgba(0,229,255,0.10), transparent 55%),
    radial-gradient(circle at 88% 12%, rgba(255,46,126,0.10), transparent 45%),
    var(--bg);
  position: relative;
  overflow: hidden;
}

header.app-header {
  padding: calc(14px + var(--safe-top)) 18px 14px;
  background: linear-gradient(180deg, rgba(15,19,28,0.98), rgba(15,19,28,0.86));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0,229,255,0.2);
}

header.app-header h1 {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

header.app-header .completion {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.03em;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--accent);
  padding: 5px 12px;
  border-radius: 999px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.header-help-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.header-help-btn:active { transform: scale(0.9); }
.header-sound-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.header-sound-btn.muted { color: var(--muted); }
.header-sound-btn:active { transform: scale(0.9); }
.header-shop-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.header-shop-btn:active { transform: scale(0.9); }

main.screen {
  flex: 1;
  padding: 14px 14px calc(96px + var(--safe-bottom));
  overflow-y: auto;
}

/* position:fixedで画面(ビューポート)に直接固定することで、iOSのアドレスバー
   出現/格納による100vhのズレや、外側ページのスクロールに影響されず、
   常に画面最下部にナビが表示され続けるようにする(以前はposition:stickyで、
   #appが独自のスクロールコンテナを持たないため稀に隠れることがあった)。 */
nav.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  background: rgba(13,16,24,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-bottom);
  z-index: 15;
}

nav.bottom-nav button {
  flex: 1;
  border: none;
  background: none;
  padding: 11px 1px 9px;
  font-size: 9.5px;
  letter-spacing: 0;
  white-space: nowrap;
  min-width: 0;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: color 0.2s ease;
}

nav.bottom-nav button .icon {
  width: 20px;
  height: 20px;
  opacity: 0.65;
  transition: all 0.2s ease;
}
nav.bottom-nav button .icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

nav.bottom-nav button.active {
  color: var(--accent);
  font-weight: 700;
}
nav.bottom-nav button.active .icon {
  opacity: 1;
  transform: translateY(-2px);
  filter: drop-shadow(0 0 6px rgba(0,229,255,0.75));
}

.card {
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.4);
}

.section-title {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--accent);
  margin: 4px 0 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.section-title::before {
  content: "";
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  flex-shrink: 0;
}

label.field {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin: 12px 0 5px;
  letter-spacing: 0.02em;
}

.field-check {
  display: inline-block;
  margin-left: 5px;
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  vertical-align: middle;
}

/* 1行入力(text/number/date/time/select)は高さを揃える。textareaは複数行・可変なので
   別ルールにして高さ固定の対象から外す(天気のselectと気温・海水温のnumber inputの
   見た目の高さが機種によってズレないようにするための対応)。 */
input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="time"], select {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  font-size: 14px;
  background: var(--surface-3);
  color: var(--text);
  color-scheme: dark;
}
/* 日付・時刻inputは、機種によっては値が中央寄せで表示され他の入力欄と見た目が
   揃わないため、常に左詰めになるよう明示する(WebKit系はtext-alignだけでは効かない
   ことがあるため、内部の値表示部分にも同じ指定をしておく) */
input[type="date"], input[type="time"] {
  text-align: left;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
}
textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  font-size: 14px;
  background: var(--surface-3);
  color: var(--text);
  color-scheme: dark;
}
input::placeholder, textarea::placeholder { color: #59627a; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,229,255,0.18);
}

textarea { resize: vertical; min-height: 64px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 16px;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #04050a;
  width: 100%;
  box-shadow: 0 8px 22px rgba(0,229,255,0.25);
}
.btn-secondary {
  background: var(--surface-3);
  color: var(--text);
  width: 100%;
  border: 1px solid var(--border-strong);
}
.btn-ghost {
  background: transparent;
  color: var(--accent);
  width: 100%;
  border: 1px solid rgba(0,229,255,0.4);
}
.btn-ghost:active { background: rgba(0,229,255,0.08); }
.btn:disabled { opacity: 0.4; }
.btn-icon { width: 15px; height: 15px; flex-shrink: 0; }
.inline-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; }

.photo-drop {
  border: 2px dashed var(--border-strong);
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  position: relative;
  overflow: hidden;
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  /* AI判定トグルの枠(.rec-ai-toggle-row)とすぐ隣接して見えてしまっていたため、隙間を空ける */
  margin-top: 12px;
}

.photo-drop img { width: 100%; border-radius: 10px; object-fit: cover; }

.photo-source-buttons { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.photo-source-buttons .btn { flex: 1; }
/* 写真削除ボタン: 文字ラベル無しの小さな円形アイコンボタン(header-help-btnと同じ考え方)。
   以前はテキスト付きの.btnと同じ横幅いっぱいの見た目で大きすぎたため、この専用サイズにした */
.photo-delete-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,46,126,0.4);
  background: var(--surface-3);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.photo-delete-btn:active { transform: scale(0.9); background: rgba(255,46,126,0.1); }
.photo-delete-btn .btn-icon { width: 16px; height: 16px; }

/* 記録画面: カード表示範囲のトリミングUI */
.photo-crop-section { margin-top: 14px; }
.photo-crop-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.photo-crop-label .inline-icon { color: var(--accent); }
.crop-frame {
  position: relative;
  width: 100%;
  /* カード本体の写真枠(.tc-photo-wrap)と必ず同じ縦横比にする。写真をより大きく
     主役として見せるため、縦長の4:5にしている(このcrop-frame自体は書き出し
     ライブラリで直接キャプチャされる要素ではないため、aspect-ratioプロパティで
     問題ない)。 */
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  touch-action: none;
  cursor: grab;
}
.crop-frame:active { cursor: grabbing; }
.crop-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  user-select: none;
}
.crop-hint { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* 記録画面: 表紙以外の追加写真(インスタのような複数枚投稿) */
.rec-extra-photos-block { margin-top: 14px; }
.rec-extra-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 10px;
}
.rec-extra-photo-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.rec-extra-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-extra-photo-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(10,13,18,0.72);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.rec-extra-photo-remove-btn .btn-icon { width: 11px; height: 11px; }

/* 記録画面: ステップ見出し(アイコン+タイトル。番号は付けない) */
.rec-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 14px;
}
.rec-step-title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.rec-step-title .inline-icon { color: var(--accent); }

/* 記録画面: 2カラムの入力行(サイズ/重さ、日付/時刻、天気/潮汐など) */
.field-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.field-row-2 > div {
  /* グリッドアイテムは初期値min-width:autoのため、date/time inputのネイティブ表示が
     セル幅を押し広げ、天気/潮汐のselectより横に大きく見えてしまうことがあるのを防ぐ */
  min-width: 0;
}
.field-row-2 label.field { margin-top: 0; }
/* 日付/時刻の入力は、天気/気温など他の2カラム行と間隔・サイズ感を揃える
   (以前はネイティブの日付/時刻ピッカーが列幅を圧迫しないよう文字を小さくしていたが、
   見た目がバラバラになっていたため、カレンダー/時計アイコンだけを小さくして
   パディング・フォントサイズは他の入力欄と統一した) */
.field-row-2 input[type="date"]::-webkit-calendar-picker-indicator,
.field-row-2 input[type="time"]::-webkit-calendar-picker-indicator {
  width: 14px;
  height: 14px;
  padding: 0;
  margin-left: 2px;
}
/* 日付・時刻はネイティブpickerの内部表示分だけ他の入力より横幅を食って見えがちなので、
   文字サイズと左右パディングを少し絞って、天気・気温などの列と横幅の見た目を揃える */
.field-row-2 input[type="date"],
.field-row-2 input[type="time"] {
  font-size: 13px;
  padding-left: 10px;
  padding-right: 6px;
}

/* 記録画面: ランクのプレビュー */
.rank-preview-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 12px;
}
.rank-preview-text { font-size: 12px; color: var(--muted); line-height: 1.5; }

.rec-save-btn { margin-top: 4px; font-size: 15px; padding: 15px 16px; }

.tide-chart-card {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 4px 2px;
}
.tide-chart-card svg { display: block; }

.ai-result {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.candidate-chip {
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(0,229,255,0.4);
  background: var(--surface-3);
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
}

.candidate-chip.selected {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #04050a;
  border-color: transparent;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.14) inset;
}
.rank-C { background: var(--rank-c); color: #fff; }
.rank-B { background: var(--rank-b); color: #04141a; }
.rank-A { background: var(--rank-a); color: #2a1400; }
.rank-S {
  /* AランクのゴールドとSランクが同じオレンジに見えないよう、Sは赤寄りの「炎」グラデーションにする */
  background: linear-gradient(135deg, var(--rank-s), #ff2b6b);
  color: #fff;
  box-shadow: 0 0 14px rgba(255,93,60,0.6);
}
.rank-SS {
  background: linear-gradient(135deg, var(--rank-ss), var(--accent));
  color: #fff;
  box-shadow: 0 0 16px rgba(255,46,158,0.7);
}
/* サイズ未入力(計測なし)の釣果用。ランクの色を付けず、控えめなグレーにする */
.rank-unrated { background: var(--surface-3); color: var(--muted); box-shadow: none; }

/* アップデート情報・アップデート履歴モーダル(js/changelog-ui.js) */
.changelog-modal-card { width: min(440px, 100%); max-height: 80vh; overflow-y: auto; }
.changelog-entry + .changelog-entry { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.changelog-entry-date { font-weight: 700; font-size: 13px; color: var(--accent); margin-bottom: 6px; }
.changelog-list { margin: 0; padding-left: 1.1em; }
.changelog-list li { font-size: 13px; line-height: 1.6; margin-bottom: 6px; }
.changelog-list li:last-child { margin-bottom: 0; }

.zukan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  overflow: hidden;
  margin: 8px 0 16px;
}
.progress-bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(0,229,255,0.6);
}

/* 図鑑の発見ゲージ: 通常の.cardより余白を詰めた省スペース版 */
.zukan-progress-card {
  padding: 11px 14px;
  margin-bottom: 10px;
}
.zukan-progress-card .zukan-header { margin-bottom: 0; }
.zukan-progress-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.zukan-progress-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--sea-deep, var(--text));
}
.zukan-progress-bar.progress-bar {
  height: 6px;
  margin: 6px 0 0;
}

/* カテゴリタブ: 画面幅に収まるよう、テキストではなくアイコン+件数だけのコンパクト表示にする */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 2px 4px;
  margin-bottom: 2px;
}
.cat-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--muted);
  padding: 6px 4px;
  border-radius: 12px;
  transition: all 0.15s ease;
}
.cat-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.cat-tab.active {
  color: var(--bg);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0,229,255,0.35);
}
.cat-tab-count {
  font-family: var(--font-display);
  font-size: 9px;
  opacity: 0.85;
}
.cat-tabs-active-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin: 2px 0 10px;
}

.species-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.species-tile {
  position: relative;
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 11px 6px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.species-tile .best-rank-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  font-size: 10px;
  z-index: 2;
}
.species-tile .new-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #05070c;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 2px 8px rgba(255,46,126,0.45);
  z-index: 2;
}
.species-tile:active { transform: scale(0.96); }
.species-tile:not(.undiscovered) { border-color: rgba(0,229,255,0.22); }

.species-tile .emblem {
  width: 48px; height: 48px;
  margin: 0 auto 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08) inset;
}

/* 魚種アイコン(icons/species/<id>.png)の表示。無ければ独自アイコンが見えたままになる */
.emblem-fallback { position: relative; z-index: 0; }
.emblem-fallback-icon { width: 1em; height: 1em; display: block; opacity: 0.85; }
.emblem-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.species-tile.undiscovered .emblem {
  background: var(--surface-3) !important;
}
.species-tile.undiscovered .name { color: var(--muted); }
.species-tile.undiscovered .emblem span { opacity: 0.55; }

.species-tile .name { font-size: 11px; font-weight: 700; }
.species-tile .count { font-size: 10px; color: var(--muted); }

.detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.detail-header .emblem {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #fff;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.1) inset, 0 0 20px rgba(0,229,255,0.15);
}
.detail-header h2 { margin: 0; font-size: 18px; color: var(--text); }
.detail-header .latin { font-size: 12px; color: var(--muted); font-style: italic; }
.icon-change-btn {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: rgba(0,229,255,0.1);
  border: 1px solid rgba(0,229,255,0.3);
  border-radius: 999px;
  padding: 5px 11px;
}
.icon-change-btn .btn-icon { width: 12px; height: 12px; }

/* 図鑑アイコンの写真選び直しモーダル */
.icon-picker-card { width: min(340px, 88vw); max-height: 80vh; overflow-y: auto; }
.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.icon-picker-thumb {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  padding: 0;
  background: var(--surface-3);
}
.icon-picker-thumb:active { transform: scale(0.94); }
.icon-picker-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.species-level-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.species-level-badge {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  color: #05070c;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.species-level-next { font-size: 11px; color: var(--muted); }

.species-level-card { display: flex; flex-direction: column; gap: 4px; }
.species-insight-row {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
}
.species-insight-row:not(:last-child) { border-bottom: 1px solid var(--border); }
.species-insight-row .k { width: 100px; color: var(--muted); flex-shrink: 0; }
.species-insight-row .v { flex: 1; color: var(--text); }
.species-locked-note {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  padding: 6px 0;
}
.species-locked-note:not(:last-child) { border-bottom: 1px solid var(--border); }

.kv-row {
  display: flex;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.kv-row .k { width: 88px; color: var(--muted); flex-shrink: 0; }
.kv-row .v { flex: 1; }

.timeline-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.timeline-item img {
  width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
  background: var(--surface-3);
}
.timeline-item .meta { font-size: 12px; color: var(--muted); }
.timeline-item .size { font-weight: 700; font-size: 14px; }
.timeline-item .pb {
  font-size: 10px; color: var(--coral); font-weight: 700;
}

/* 図鑑詳細の釣果ログ: 左に写真+ランク、中央にテキスト、右に潮位グラフ(あれば)の3カラム */
.timeline-item.tl-compact { align-items: center; }
.tl-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.tl-left img {
  width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex-shrink: 0;
  background: var(--surface-3);
}
.timeline-item .tl-line {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-tide-mini {
  flex-shrink: 0;
  width: 96px;
  height: 44px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.tl-tide-mini svg { display: block; width: 100%; height: 100%; }
.tl-del-btn {
  flex-shrink: 0;
  align-self: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--coral);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-del-btn:active { transform: scale(0.9); }
.tl-del-icon { width: 15px; height: 15px; }

#record-map {
  width: 100%;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 8px;
}

#map-canvas {
  width: 100%;
  /* screen-mapでflexが効かない万一のフォールバック値。通常は下のflex指定で上書きされる */
  height: calc(100vh - 160px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

/* マップ画面はヘッダー・下部ナビ・(あれば)案内バッジを差し引いた「残り全部」を
   マップが埋めるようにする。固定px計算だとヘッダー高さやバッジ有無で画面をはみ出し
   縦に長くなりすぎる問題があったため、flexで実測ベースに揃える */
main.screen.screen-map {
  display: flex;
  flex-direction: column;
}
main.screen.screen-map .badge-note {
  flex-shrink: 0;
  margin-bottom: 10px;
}
main.screen.screen-map .map-filter-bar {
  flex-shrink: 0;
  margin-bottom: 8px;
}
main.screen.screen-map #map-canvas {
  flex: 1;
  min-height: 0;
  height: auto;
}

/* マップ画面: 上部の魚種フィルター(タップした魚種の釣果だけを地図に表示する) */
.map-filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scrollbar-width: none;
}
.map-filter-bar::-webkit-scrollbar { display: none; }
.map-filter-chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.map-filter-chip.active {
  color: var(--bg);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0,229,255,0.35);
}
.map-filter-count {
  font-family: var(--font-display);
  font-size: 10px;
  opacity: 0.8;
}
.leaflet-control-zoom a {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
.leaflet-control-attribution {
  background: rgba(15,19,28,0.8) !important;
  color: var(--muted) !important;
}
.leaflet-control-attribution a { color: var(--accent) !important; }

.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
}
.toast.show { opacity: 1; }

.empty-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--muted);
  font-size: 13px;
}
.empty-state .big { font-size: 32px; margin-bottom: 8px; }

/* 読み込み中の表示(js/loading-illustration.js)。魚が左右をゆったり泳ぎ、
   気泡が立ちのぼるアニメーションで「止まっているのではなく進行中」だと伝える。 */
.loading-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--muted);
  font-size: 13px;
}
.loading-fish-stage {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 54px;
  margin: 0 auto 12px;
}
.loading-fish-stage .loading-fish {
  position: absolute;
  top: 50%;
  left: 8%;
  display: block;
  width: 30px;
  height: 30px;
  color: var(--accent);
  transform: translate(-50%, -50%);
  animation: loading-fish-swim 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(0,229,255,0.35));
}
.loading-fish-stage .loading-fish svg { display: block; width: 100%; height: 100%; }
.loading-fish-stage .loading-bubble {
  position: absolute;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: loading-bubble-rise 3.2s ease-in infinite;
}
.loading-fish-stage .loading-bubble:nth-child(1) { left: 20%; animation-delay: 0.2s; }
.loading-fish-stage .loading-bubble:nth-child(2) { left: 45%; animation-delay: 1.1s; }
.loading-fish-stage .loading-bubble:nth-child(3) { left: 68%; animation-delay: 2s; }
.loading-text { letter-spacing: 0.02em; }

/* 魚アイコンは標準の向きだと鼻先が左を向いているため、右へ泳ぐ区間はscaleX(-1)で
   反転させて鼻先を進行方向(右)へ、左へ泳ぐ区間はscaleX(1)のまま鼻先を進行方向(左)へ向ける。 */
@keyframes loading-fish-swim {
  0%   { left: 8%;  transform: translate(-50%, -50%) rotate(-3deg) scaleX(-1); }
  47%  { left: 92%; transform: translate(-50%, -50%) rotate(2deg) scaleX(-1); }
  50%  { left: 92%; transform: translate(-50%, -50%) rotate(2deg) scaleX(1); }
  97%  { left: 8%;  transform: translate(-50%, -50%) rotate(-3deg) scaleX(1); }
  100% { left: 8%;  transform: translate(-50%, -50%) rotate(-3deg) scaleX(-1); }
}
@keyframes loading-bubble-rise {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  12% { opacity: 0.6; }
  85% { opacity: 0; }
  100% { opacity: 0; transform: translateY(-36px) scale(1); }
}

/* インライン版(カード内の1行など、狭いスペース用) */
.loading-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.loading-inline-fish {
  display: inline-flex;
  width: 13px;
  height: 13px;
  color: var(--accent);
  animation: loading-inline-pulse 1.1s ease-in-out infinite;
}
.loading-inline-fish svg { display: block; width: 100%; height: 100%; }
@keyframes loading-inline-pulse {
  0%, 100% { transform: translateX(0) scaleX(1); }
  50% { transform: translateX(3px) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .loading-fish-stage .loading-fish,
  .loading-fish-stage .loading-bubble,
  .loading-inline-fish {
    animation: none !important;
  }
}

.badge-note {
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--border);
  padding: 9px 11px;
  border-radius: 10px;
  margin-top: 8px;
}

/* 記録画面: 既存の記録を編集中であることを示すバナー(通常のbadge-noteより目立たせる) */
.rec-edit-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  color: var(--text);
  border-color: var(--accent);
}

/* 記録画面: AI魚種判定ON/OFFのトグル行(写真をAIに送信したくないユーザー向け)。
   トグルとオフ時の説明を同じ枠内にまとめ、1つの情報ボックスに見えるようにする。 */
.rec-ai-toggle-row {
  margin-top: 8px;
  padding: 9px 11px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.rec-ai-toggle-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rec-ai-toggle-label {
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}
/* 記録画面: 「他にも釣れましたか？」で追加した魚種1件分の入力欄。
   .rec-ai-toggle-rowと同じ「枠で囲んだ情報ボックス」の見た目を踏襲しつつ、
   右上の削除ボタン分だけ相対配置にしている。 */
.rec-extra-row {
  position: relative;
  margin-top: 10px;
  padding: 11px 40px 11px 11px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.rec-extra-row .field {
  margin-top: 0;
}
.rec-extra-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--coral);
  cursor: pointer;
}
.rec-extra-remove-btn:active { transform: scale(0.9); background: rgba(255,46,126,0.1); }
.rec-extra-remove-btn .btn-icon { width: 16px; height: 16px; }
.rec-ai-toggle-hint {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
}
.switch-sw {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex: none;
}
.switch-sw input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.switch-sw-track {
  position: absolute;
  inset: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.switch-sw-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s ease, background 0.15s ease;
}
.switch-sw input:checked + .switch-sw-track {
  background: var(--accent);
  border-color: var(--accent);
}
.switch-sw input:checked + .switch-sw-track .switch-sw-thumb {
  transform: translateX(18px);
  background: #04050a;
}

/* カード内で複数の情報のかたまりを区切る小さな見出し。記録画面「釣行情報」カードの
   4項目(釣り場位置・日時・天候・潮位観測地点、それぞれの折りたたみブロックの上部)、
   および釣行予定画面の結果カード内(気象・海況/まずめ・潮位)で使う。label.fieldより軽く、
   .section-titleより控えめな重さにして、情報のまとまりが一目で分かるようにする。 */
.rec-subcaption {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 6px;
}

/* 記録画面: 自動入力できた項目を折りたたんで✓つきの要約行にまとめる共通パーツ
   (釣り場・地図/日付・時刻/天気・気温・海水温/潮位観測地点の4箇所で使う)。 */
.rec-collapse-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.rec-collapse-check {
  flex: none;
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
}
.rec-collapse-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 「編集する」で開いたあとの入力欄側に置く「閉じる」ボタンの行。右寄せにして
   .trivia-toggle-btnと対になる控えめな見た目(アクセント色ではなくグレー)にする。 */
.rec-collapse-close-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.trivia-toggle-btn-close {
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
}

.install-banner {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #04050a;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.install-banner button {
  border: none; background: #04050a; color: var(--accent);
  padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
}

/* 新しいバージョンが有効になったときの再読み込み促しバナー */
.sw-update-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #04050a;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.5);
}
.sw-update-banner button {
  border: none; background: #04050a; color: var(--accent);
  padding: 7px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; flex-shrink: 0;
}

/* ===== トレーディングカード演出 ===== */
.card-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 4, 8, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 22px;
  gap: 16px;
  overflow-y: auto;
}

.tc-stage {
  position: relative;
  perspective: 1000px;
  width: min(280px, 80vw);
}

/* カードの"後ろ"に敷く、ランクが上がるほど豪華になる背景エフェクト。
   以前は写真の上にキラキラ(星型アイコン)を散らす演出だったが、写真が見えにくくなる
   という声を受けて廃止し、代わりにカードの背後で光る演出に一本化した。
   トレカ本体(.trading-card)より手前に出ないよう、z-indexで明示的に奥へ固定する。 */
.tc-backdrop-glow {
  position: absolute;
  inset: -18% -24%;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(120,140,170,0.38) 0%, rgba(120,140,170,0) 68%);
  filter: blur(10px);
  opacity: 0.8;
}
.tc-backdrop-glow.rank-B {
  background: radial-gradient(circle, rgba(53,194,193,0.42) 0%, rgba(53,194,193,0) 68%);
}
.tc-backdrop-glow.rank-A {
  inset: -22% -28%;
  background: radial-gradient(circle, rgba(255,207,92,0.5) 0%, rgba(255,207,92,0) 68%);
  animation: tc-glow-breathe 3.2s ease-in-out infinite;
}
.tc-backdrop-glow.rank-S {
  inset: -26% -32%;
  background: radial-gradient(circle, rgba(255,93,60,0.6) 0%, rgba(255,43,107,0.24) 45%, rgba(255,43,107,0) 70%);
  animation: tc-glow-breathe 2.2s ease-in-out infinite;
}
.tc-backdrop-glow.rank-SS {
  inset: -32% -38%;
  background: conic-gradient(from 0deg, #ff2e9e, #00e5ff, #ffd700, #ff2e9e);
  filter: blur(24px);
  opacity: 0.55;
  animation: tc-glow-spin 6s linear infinite, tc-glow-breathe 2s ease-in-out infinite;
}
@keyframes tc-glow-breathe {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.09); }
}
@keyframes tc-glow-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tc-backdrop-glow { animation: none !important; }
}

.trading-card {
  --frame-a: #5a6478;
  --frame-b: #2a3242;
  --glow: rgba(120,140,170,0.32);
  position: relative;
  z-index: 1;
  width: 100%;
  /* 高さは中身(写真+情報)に合わせて自然に決まるようにする。以前はaspect-ratioで
     カード全体の高さを固定していたが、写真以外の行(バッジ・名前・チップ・潮位グラフ)が
     増えるほど写真だけが押し縮められて小さくなってしまっていたため撤廃した。
     写真の大きさは.tc-photo-wrapの高さで直接確保する。 */
  border-radius: 22px;
  padding: 3px;
  background: linear-gradient(155deg, var(--frame-a), var(--frame-b));
  box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 30px var(--glow);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.trading-card.face-down { transform: rotateY(180deg); }

.trading-card.rank-B { --frame-a: #35c2c1; --frame-b: #114f4e; --glow: rgba(53,194,193,0.42); }
.trading-card.rank-A { --frame-a: #ffcf5c; --frame-b: #966a12; --glow: rgba(255,207,92,0.42); }
.trading-card.rank-S {
  --frame-a: #ff5d3c; --frame-b: #ff2b6b; --glow: rgba(255,93,60,0.55);
  animation: tc-pulse 2.4s ease-in-out infinite;
}
.trading-card.rank-SS {
  --frame-a: #ffffff; --frame-b: #ff2e9e; --glow: rgba(255,46,158,0.62);
  animation: tc-pulse 2s ease-in-out infinite;
}
@keyframes tc-pulse {
  0%, 100% { box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 30px var(--glow); }
  50% { box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 56px var(--glow); }
}

.trading-card.burst { animation: tc-burst 0.8s ease-out; }
@keyframes tc-burst {
  0% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  35% { box-shadow: 0 0 100px rgba(255,255,255,0.95); }
  100% { box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 30px var(--glow); }
}

.tc-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 19px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.07), transparent 55%),
    linear-gradient(165deg, #151b26, #0a0d14);
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
}

.tc-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 2px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  flex-shrink: 0;
}
.tc-topline span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-topline span:last-child { flex-shrink: 0; }

/* レアリティ表示: ランクバッジ(丸アイコン)を「RARE」等の文字の左に並べる */
.tc-rarity-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tc-rarity-label { line-height: 1; }

.tc-photo-outer {
  /* 横方向の余白(左右10px)はこの外側の要素に持たせる。以前は.tc-photo-wrap自身に
     width:100%と左右marginを両方指定していたため、CSSのボックスモデル上、実際の
     ボックス幅が親要素の幅+20pxになってしまい、右側10px分が親(.tc-inner)の
     overflow:hiddenで見切れる形で「写真の右端がはみ出る(=右側だけ余白が無い)」
     不具合と、それに伴う見た目の縦横比のズレが発生していた。paddingによる
     アスペクト比ハックは常に「containing blockの幅」に対する%で高さを決めるため、
     marginを持つ要素自身にwidth:100%を指定するとこのズレを避けられない。
     そのため、marginは外側のこの要素に持たせ、内側の.tc-photo-wrapは
     「marginを引いた後の幅」に対して100%・aspect比を計算するようにしている。 */
  margin: 4px 10px 0;
  flex-shrink: 0;
}
.tc-photo-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  /* 記録画面のトリミング枠(.crop-frame)とまったく同じ縦横比にする。写真をより大きく
     主役として見せるため、以前の横長寄り(788:580)から縦長の4:5に変更した。
     縦横比の固定にはCSSの aspect-ratio プロパティではなく、古くからあるpadding-bottom(%)
     によるアスペクト比ハックを使っている。aspect-ratioは書き出しライブラリ(html2canvas)
     が正しく解釈できず、書き出し画像だけこの枠が上下につぶれてしまう不具合があったため
     (padding-bottomは通常のCSSボックスモデルの機能そのものなので、この種のライブラリでも
     確実に効く)。 */
  width: 100%;
  height: 0;
  padding-bottom: 125%; /* 4:5 (縦長) */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.tc-photo { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--surface-3); }
.tc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-photo-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px;
  position: relative;
  overflow: hidden;
}
.tc-photo-placeholder-fallback { position: relative; z-index: 0; opacity: 0.85; }
.placeholder-fish-icon { width: 46px; height: 46px; display: block; }
.tc-photo-placeholder-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* 複数写真ギャラリー(表紙+追加写真。card-fx.jsのopenCardModal参照) */
.tc-photo-gallery { position: relative; width: 100%; height: 100%; touch-action: pan-y; }
.tc-photo-slide { position: absolute; inset: 0; }
.tc-photo-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(10,13,18,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.tc-photo-nav-btn .btn-icon { width: 14px; height: 14px; }
.tc-photo-nav-prev { left: 8px; }
.tc-photo-nav-next { right: 8px; }
.tc-photo-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 5px;
  z-index: 2;
}
.tc-photo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  transition: background 0.15s ease, transform 0.15s ease;
}
.tc-photo-dot.active { background: #fff; transform: scale(1.3); }

/* 情報ブロック(写真の"下"に独立配置。写真とは重ならない)
   1行目: 魚種名(+右隣にNEWバッジ) / 2行目: 学名
   ランクバッジは上のtc-toplineにレアリティ文字と並べて移動済みなので、ここは
   名前まわりだけのシンプルな帯にする */
.tc-info-block {
  margin: 8px 10px 0;
  padding: 8px 10px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  flex-shrink: 0;
}
/* トップラインに移動した、ランクを表す丸アイコン。「スタイリッシュ」な見た目にするため、
   ベースの.rank-badge(他画面のリスト等でも共有)はそのまま流用しつつ、カードの中でだけ
   ガラス質のハイライトと縁の光彩を重ねて宝石のような質感を足す(他画面には影響しない)。 */
.tc-rank-badge-inline {
  position: relative;
  width: 20px; height: 20px;
  font-size: 10px;
  flex-shrink: 0;
  border: none;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.6),
    0 2px 6px rgba(0,0,0,0.5);
}
.tc-rank-badge-inline::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.08) 40%, transparent 55%);
  pointer-events: none;
}
.tc-new-badge-inline {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0b0e16;
  background: linear-gradient(90deg, #ffe066, #ff9d3d);
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255,157,61,0.55);
  flex-shrink: 0;
}
.tc-name-row { min-width: 0; }
.tc-name-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tc-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; color: #fff; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-latin { font-size: 9px; font-style: italic; color: #a3adc2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }

/* 潮位グラフ(実測データがある記録だけ表示) */
.tc-tide-section { margin: 8px 16px 0; flex-shrink: 0; }
.tc-tide-label {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 4px;
}
.tc-tide-chart {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 4px 2px 0;
}
.tc-tide-chart svg { display: block; width: 100%; height: auto; }

/* 新種発見の開封演出: モーダル全体に散る紙吹雪と、上部に出るバナー */
.discovery-confetti {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1050;
}
.confetti-piece {
  position: absolute;
  top: -8%;
  opacity: 0;
  border-radius: 2px;
  animation-name: confetti-fall;
  animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
  animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(var(--drift), 115vh) rotate(600deg); opacity: 0; }
}

.discovery-banner {
  position: fixed;
  top: 8%;
  left: 50%;
  z-index: 1060;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #0b0e16;
  padding: 11px 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffe066, #ff9d3d, #ff2e9e, #ffe066);
  background-size: 300% 100%;
  box-shadow: 0 12px 34px rgba(255,110,60,0.5), 0 0 0 1px rgba(255,255,255,0.4) inset;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -16px) scale(0.7);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: center;
}
.discovery-banner-icon { width: 16px; height: 16px; flex-shrink: 0; }
.discovery-banner.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  animation: discovery-banner-shimmer 2.2s linear 0.45s infinite;
}
@keyframes discovery-banner-shimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}

/* ステータス: 値の長さに応じて詰まるピル型チップ(固定グリッドより省スペース)。
   潮目は潮位グラフがあるのでここには出さない。 */
.tc-stats-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px 0;
}
.tc-chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  padding: 5px 9px;
  min-width: 0;
}
.tc-chip-label {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 0.04em;
  color: var(--muted);
  display: block;
}
.tc-chip-value { font-size: 13px; font-weight: 800; color: #fff; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.trading-card.rank-B .tc-chip-value { color: #7fe8e7; }
.trading-card.rank-A .tc-chip-value { color: #ffd97a; }
.trading-card.rank-S .tc-chip-value { color: #ff9478; }
.trading-card.rank-SS .tc-chip-value { color: #ff8fc7; }

/* カラーテーマ(釣りガチャ)装備時: 縁(--frame-a/--frame-b)はJS側のinline styleで
   直接上書き済み。ここでは背景・文字色をテーマの値に差し替える(グラフの色はcard-fx.js側で
   renderTideSvgに直接渡している)。未装備時はこのクラス自体が付かないため、これまで通りの
   見た目のまま変わらない。rank-*のチップ色より後ろに書くことで、同じ詳細度でも
   カスケードの後勝ちでテーマの文字色を優先させている。 */
.trading-card.themed .tc-inner {
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.07), transparent 55%),
    linear-gradient(165deg, var(--tc-theme-body-a), var(--tc-theme-body-b));
}
.trading-card.themed .tc-name { color: var(--tc-theme-text); }
.trading-card.themed .tc-chip-value { color: var(--tc-theme-text); }
.trading-card.themed .tc-gear-value { color: var(--tc-theme-text); }
.trading-card.themed .tc-gear-memo { color: var(--tc-theme-text); opacity: 0.85; }

/* 仕掛け・タックル・リール・メモ(潮位グラフの下にまとめて配置) */
.tc-gear-section {
  margin: 10px 16px 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tc-gear-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 6px 10px;
}
.tc-gear-label {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--muted);
  flex-shrink: 0;
}
.tc-gear-value {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.tc-gear-memo {
  font-size: 12px;
  line-height: 1.5;
  color: #d8dde8;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

.tc-footline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 16px 0;
  min-height: 15px;
}
.tc-pb { font-size: 11px; color: #ff6f91; font-weight: 800; }
.tc-points {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(0,229,255,0.5);
}

.tc-footer {
  text-align: center;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.6;
  padding: 6px 0 10px;
}

.tc-hint { font-size: 12px; color: var(--muted); text-align: center; }
.tc-actions { display: flex; gap: 8px; width: min(300px, 84vw); flex-wrap: wrap; }
.tc-actions .btn { flex: 1; font-size: 11px; padding: 11px 6px; min-width: 84px; }

.tc-share-preview {
  max-width: min(320px, 88vw);
  max-height: 60vh;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}

/* ===== SNS投稿用デザイン選択(js/card-fx.js openInstaPickerModal) =====
   閉じるボタンをスクロールしない見出し行に固定表示(legal-modal-*と同じ、見出し行と
   本文をスクロール領域を分ける構成)にすることで、デザイン数が増えて一覧が縦に
   長くなっても、常にワンタップで閉じられるようにしている。 */
.insta-picker-backdrop { z-index: 1050; padding: 16px; }
.insta-picker-panel {
  background: var(--surface);
  border-radius: 20px;
  width: min(360px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.insta-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 16px 12px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.insta-picker-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.insta-picker-close-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.insta-picker-body {
  padding: 16px 16px 16px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.insta-picker-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; justify-items: center; }
.insta-picker-thumb {
  background: none; border: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; color: inherit; font: inherit; width: 100%;
}
.insta-picker-thumb:disabled { opacity: 0.4; pointer-events: none; }
.insta-picker-thumb-frame {
  display: block;
  width: 152px; height: 190px; border-radius: 12px; overflow: hidden;
  border: 2px solid var(--border); position: relative; background: #000;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.insta-picker-thumb:active .insta-picker-thumb-frame { transform: scale(0.96); border-color: var(--accent); }
/* サムネイルは実物(360x450)を152x190へ縮小表示するだけ(4:5のまま縮小するのでカード全体が
   欠けることなく見える。書き出しには使わず、タップ後に別途フルサイズを画面外に生成する)。
   frame・inner とも <span>(既定でdisplay:inline)のままだと、widthやtransformが
   仕様上効かず(inline要素はblock/atomic-inlineでないと変形対象にならない)、実寸のまま
   はみ出た部分がoverflow:hiddenで切り取られる=「一部だけが大きく見える」状態になって
   しまっていた。display:blockを明示することで縮小表示が正しく効くようにしている。 */
.insta-picker-thumb-inner {
  display: block;
  width: 360px; height: 450px;
  transform: scale(0.42222);
  transform-origin: top left;
  pointer-events: none;
}
.insta-picker-thumb-label { font-size: 11px; color: var(--text); text-align: center; line-height: 1.3; }
.insta-picker-status { min-height: 18px; font-size: 12px; color: var(--accent); margin: 8px 0 2px; text-align: center; }

/* ===== SNS投稿用カード本体(4:5・360x450 = 書き出し時1080x1350) =====
   それぞれ完全に独立したCSSブロックなので、運用側で不要なデザインを削る場合は
   該当ブロック(.insta-vN一式)とjs/insta-card.jsのINSTA_DESIGNS配列の
   エントリ・buildXxx関数を削除するだけでよい。 */
.insta-card {
  position: relative;
  width: 360px;
  height: 450px;
  overflow: hidden;
  color: #fff;
  flex-shrink: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}
/* 主写真(.insta-photo-img)は既定でobject-fit:containにより、切り取らず・引き伸ばさず・
   縦横比を変えずに全体を縮小して収める(html2canvasはobject-fit:containを正しく描画できない
   ため、実際にはjs/card-image.jsのapplyContainSizing()が書き出し直前に実寸ベースで
   width/heightをpx指定し直して代替している。ここでのwidth/height:100%は、通常の
   ブラウザ表示(デザイン選択画面のサムネイル等)向けの指定)。containの場合、収まりきらない
   余白は単色(魚種カラー)ではなく同じ写真を拡大・暗めのスクリムを重ねた背景
   (.insta-photo-backdrop-img/-scrim)で埋め、写真を写真で額装する構成にしている。
   .insta-photo-cover(js/insta-card.jsのphotoLayer()でfit:"cover"指定時)は逆に
   object-fit:coverで枠を隙間なく満たす(引き伸ばしはしないが上下/左右は切り取られる)。
   写真を大胆に大きく見せたいデザイン専用で、この場合は余白が生まれないため背景額装
   レイヤー自体を出力しない(js/card-image.jsのcontainSelectorも.insta-photo-coverを
   除外し、書き出し時に余計なサイズ計算をしないようにしている)。 */
.insta-photo-frame { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.insta-photo-frame:not(.insta-photo-frame-static) { position: absolute; inset: 0; width: 100%; height: 100%; }
.insta-photo-frame-static { position: relative; width: 100%; height: 100%; }
.insta-photo-backdrop-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.insta-photo-backdrop-scrim { position: absolute; inset: 0; background: rgba(4,6,10,0.6); }
.insta-photo-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
.insta-photo-cover { object-fit: cover; }
.insta-photo-fallback { color: rgba(255,255,255,0.6); background: #171b23; }

/* --- v1: ミニマル・エディトリアル --- */
.insta-v1 { background: #111722; }
.insta-v1-scrim {
  position: absolute; inset: 0;
  /* 文字が読みやすいよう、下部の暗さを以前より強め、暗くなり始める位置も少し早めている */
  background: linear-gradient(180deg, rgba(5,7,12,0) 28%, rgba(5,7,12,0.65) 58%, rgba(5,7,12,0.96) 100%);
}
.insta-v1-top { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.insta-v1-brand { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.85); font-weight: 700; }
/* 右端まで広げず、幅を絞って左下の角に寄せる(横いっぱいの帯ではなく、左下コーナーに
   まとまった塊として置きたいため)。 */
.insta-v1-bottom { position: absolute; left: 22px; right: auto; max-width: 72%; bottom: 22px; z-index: 2; }
.insta-v1-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #05070c; background: #fff; padding: 3px 8px; border-radius: 5px; margin-bottom: 8px; }
.insta-v1-name { font-size: 34px; font-weight: 800; line-height: 1.15; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insta-v1-latin { font-size: 13px; font-style: italic; color: rgba(255,255,255,0.65); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insta-v1-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; row-gap: 4px; margin-top: 12px; }
.insta-v1-size { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: #fff; }
.insta-v1-unit { font-size: 13px; font-weight: 400; margin-left: 2px; color: rgba(255,255,255,0.7); }
.insta-v1-divider { width: 1px; height: 16px; background: rgba(255,255,255,0.3); }
.insta-v1-sub { font-size: 12px; color: rgba(255,255,255,0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- v4: ホロ・トレカ --- */
.insta-v4 { background: #05070c; display: flex; align-items: center; justify-content: center; }
.insta-v4-frame {
  width: 336px; height: 426px; border-radius: 26px; padding: 4px;
  background: linear-gradient(155deg, var(--holo-a, #5a6478), var(--holo-b, #2a3242));
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
}
/* 写真領域を「縦5:横4」(=カード全体と同じ4:5比率)まで拡大し、その中に
   カテゴリ・ランク・サイズ・日付・潮位チャート・天気/気温・潮回り・場所・魚種名を
   すべてHUD的に重ねる構成にした(以前は写真の下に文字・グラフの行を積んでいた)。
   .insta-v4-inner はもう複数行を縦に並べる入れ物ではなく、.insta-v4-photo-wrap
   1枚を中央に収めるだけの器になる(aspect-ratioで実寸から独立して4:5を保証する)。 */
.insta-v4-inner { width: 100%; height: 100%; border-radius: 22px; background: linear-gradient(160deg, var(--holo-body-a, #12181f), var(--holo-body-b, #0a0d12)); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 6px; box-sizing: border-box; }
.insta-v4-rank-badge { font-family: var(--font-display); font-weight: 700; font-size: 11px; color: #05070c; background: var(--holo-a, #5a6478); padding: 3px 10px; border-radius: 999px; }
.insta-v4-photo-wrap { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; }
.insta-v4-photo-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.16) 45%, rgba(0,0,0,0.88) 100%); }
.insta-v4-top-row { position: absolute; top: 8px; left: 10px; right: 10px; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.insta-v4-category { font-size: 10px; color: rgba(255,255,255,0.8); text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.insta-v4-photo-badges { position: absolute; top: 32px; left: 10px; right: 10px; z-index: 2; display: flex; gap: 5px; }
.insta-v4-photo-badge { font-family: var(--font-display); font-size: 10px; font-weight: 700; color: #fff; background: rgba(5,7,12,0.55); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
/* 潮位チャート・天気/気温バッジ・潮回り/場所・魚種名を、写真下部にまとめて重ねる
   1つの縦積みブロック(以前のように個別にposition:absoluteで積むのではなく、
   このブロックだけを写真下端に固定し、中身はflexの通常フローで積む)。 */
.insta-v4-bottom-block { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.insta-v4-tide-row { display: flex; gap: 6px; height: 84px; }
.insta-v4-tide { flex: 1; min-width: 0; background: rgba(6,9,16,0.72); border-radius: 8px; padding: 5px 7px 3px; display: flex; }
.insta-v4-tide-chart { flex: 1; min-width: 0; }
.insta-v4-tide-chart svg { display: block; width: 100%; height: 100%; }
.insta-v4-side-dials { width: 60px; flex-shrink: 0; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.insta-v4-dial { background: rgba(6,9,16,0.72); border-radius: 8px; padding: 6px 3px; text-align: center; }
.insta-v4-dial-icon { display: flex; justify-content: center; margin-bottom: 2px; color: var(--holo-a, #5a6478); }
.insta-v4-dial-icon svg { display: block; }
.insta-v4-dial b { display: block; font-family: var(--font-display); font-size: 10px; line-height: 1.15; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insta-v4-meta-line { font-size: 9.5px; color: rgba(255,255,255,0.8); text-shadow: 0 1px 4px rgba(0,0,0,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.insta-v4-name-block { flex-shrink: 0; }
.insta-v4-name { font-size: 17px; font-weight: 800; color: var(--holo-text, #fff); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.insta-v4-new { font-size: 9px; font-weight: 700; background: var(--holo-a, #5a6478); color: #05070c; padding: 2px 6px; border-radius: 5px; flex-shrink: 0; }
.insta-v4-latin { font-size: 9px; font-style: italic; color: rgba(255,255,255,0.7); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }

/* --- フィルムストリップ --- */
.insta-v6 { background: #0a0a0a; padding: 0 24px; display: flex; flex-direction: column; }
.insta-v6-sprockets { position: absolute; top: 0; bottom: 0; width: 20px; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; z-index: 2; background: #0a0a0a; }
.insta-v6-sprockets-l { left: 0; }
.insta-v6-sprockets-r { right: 0; }
.insta-v6-hole { width: 9px; height: 14px; border-radius: 3px; background: #232323; flex-shrink: 0; }
/* 文字群(REC表示+スレート)を写真の下にまとめて集約し、写真は上端から大きく確保する */
.insta-v6-frame { position: relative; margin-top: 12px; height: 312px; border: 2px solid rgba(255,255,255,0.85); border-radius: 4px; overflow: hidden; z-index: 1; background: #151515; flex-shrink: 0; }
.insta-v6-textgroup { margin-top: 6px; flex-shrink: 0; }
.insta-v6-rec { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.08em; color: #ff3b3b; flex-shrink: 0; }
.insta-v6-rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff3b3b; }
.insta-v6-slate { margin-top: 6px; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 6px; flex-shrink: 0; }
.insta-v6-slate-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.insta-v6-slate-name { font-size: 22px; font-weight: 700; color: #fff; font-family: Georgia, 'Times New Roman', serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.insta-v6-slate-size { font-family: var(--font-display); font-size: 16px; color: #ff3b3b; font-weight: 700; flex-shrink: 0; }
.insta-v6-slate-size small { font-size: 10px; margin-left: 1px; }
.insta-v6-slate-sub { font-size: 11px; color: #8a8a8a; margin-top: 3px; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insta-v6-slate-place { font-size: 10px; color: #6f6f6f; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insta-v6-brand { margin-top: auto; padding-top: 4px; padding-bottom: 7px; font-size: 9px; letter-spacing: 0.16em; color: #4a4a4a; text-transform: uppercase; text-align: center; flex-shrink: 0; }

/* --- ウェーブ ---
   flex-directionがcolumnの.insta-v8-panel内で、名前・学名・補足情報の各要素には
   明示的にflex-shrink:0を指定している。指定しない場合、overflow:hiddenを持つ要素は
   CSS仕様上「flexアイテムとしての自動最小サイズが0」になり、収まりきらない分の
   縮小がその要素に集中して割り当てられてしまい、最悪(高さ0まで潰れて)文字が
   まるごと見えなくなることがある(実際に発生した不具合)。 */
.insta-v8 { display: flex; flex-direction: column; color: #fff; }
.insta-v8-top { display: flex; justify-content: space-between; align-items: center; padding: 9px 22px 0; }
.insta-v8-brand { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.85); font-weight: 700; }
.insta-v8-rank { font-family: var(--font-display); font-size: 13px; font-weight: 800; background: rgba(255,255,255,0.22); padding: 4px 12px; border-radius: 999px; }
/* 写真をひと回り大きくしている */
.insta-v8-frame { position: relative; margin: 8px 24px 0; height: 262px; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,0.22); flex-shrink: 0; }
.insta-v8-wave { display: block; width: 100%; height: 22px; margin-top: -1px; flex-shrink: 0; }
/* 文字群は下寄せにし、写真(+波形)側とのあいだに余白が余っても、文字がパネルの
   下端(カードの下端)にきちんと揃うようにしている */
.insta-v8-panel { background: #fff; flex: 1; padding: 3px 26px 7px; color: #241d1a; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; }
.insta-v8-name { font-size: 20px; font-weight: 800; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.insta-v8-latin { font-size: 12px; font-style: italic; color: #8a8178; margin-top: 2px; flex-shrink: 0; }
.insta-v8-stats { display: flex; justify-content: space-between; margin-top: 5px; flex-shrink: 0; }
.insta-v8-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
/* text-overflow:ellipsisはhtml2canvasの書き出し時に効かず、はみ出したまま描画される
   ことがあるため頼らない。代わりにfont-sizeを控えめにし、素直にnowrapで収める。 */
.insta-v8-stat b { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--wave-accent, #ff5d3c); white-space: nowrap; }
.insta-v8-stat b small { font-size: 12px; font-weight: 400; margin-left: 1px; }
.insta-v8-stat span { font-size: 10px; color: #9a8f83; margin-top: 2px; }
/* 天気・気温・場所は幅を食う4列目にはせず、細い1行の補足情報として下に添える */
.insta-v8-info { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; padding-top: 4px; border-top: 1px solid #efe9df; font-size: 11px; color: #6b6259; white-space: nowrap; flex-shrink: 0; }
.insta-v8-info-dot { width: 3px; height: 3px; border-radius: 50%; background: #c9c2b8; flex-shrink: 0; }

/* --- デジタル・ログ ---
   ダイビングコンピューター/計測機器のHUDをイメージした、ネオンではなく落ち着いた
   シアン×ダークネイビーの「デジタル計測」テイスト。天気・気温・潮回りを数値の
   読み取り値として並べ、潮位グラフを主役級に大きく見せる。 */
.insta-v10 { background: linear-gradient(180deg, #060a12, #0a1220); color: #d7f3ff; display: flex; flex-direction: column; }
.insta-v10-topbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px 8px; border-bottom: 1px solid rgba(0,229,255,0.25); flex-shrink: 0; }
.insta-v10-brand { font-size: 8px; letter-spacing: 0.12em; color: rgba(215,243,255,0.65); font-family: var(--font-display); }
.insta-v10-rank { font-family: var(--font-display); font-size: 10px; font-weight: 800; color: #00e5ff; letter-spacing: 0.06em; }
/* ユーザーからの評価がとくに高いデザインのため、写真領域を「縦5:横4」(=カード全体と
   同じ4:5比率)まで拡大した。魚種名・サイズ・学名・潮位チャート・読み取りバッジまで、
   すべて写真の上に重ねるHUD表示にすることで(以前は写真の下にグラフの行を積んでいた)、
   一番下にあったポイント数・自己ベストの行も丸ごと不要になったため削除している。
   .insta-v10-photo-area が余白を吸収しつつ.insta-v10-photo-wrapを中央に置き、
   wrap自体はaspect-ratioで実寸から独立して4:5を保証する。 */
.insta-v10-photo-area { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px 18px 14px; }
.insta-v10-photo-wrap { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,229,255,0.35); }
.insta-v10-corner { position: absolute; width: 14px; height: 14px; border: 2px solid #00e5ff; z-index: 2; opacity: 0.9; }
.insta-v10-corner.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.insta-v10-corner.tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.insta-v10-corner.bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.insta-v10-corner.br { bottom: 6px; right: 6px; border-left: none; border-top: none; }
.insta-v10-timestamp { position: absolute; left: 8px; top: 6px; z-index: 2; font-family: var(--font-display); font-size: 9px; letter-spacing: 0.02em; color: #00e5ff; background: rgba(4,10,18,0.6); padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
/* 写真下部の暗さ(黒い重ね処理)。bottomをちょうど0ではなくわずかにマイナスへ、
   heightもその分だけ広げて、写真の一番下の縁まで確実にかぶさるようにしている
   (0ちょうどだと、書き出し(html2canvas)時の丸め誤差で写真の最下端に暗くならない
   細い隙間が出ることがあったための対処。親(.insta-v10-photo-wrap)がoverflow:hidden
   なので、マイナス分がはみ出て見えることはない)。 */
.insta-v10-photo-scrim { position: absolute; left: 0; right: 0; bottom: -2px; height: calc(62% + 2px); background: linear-gradient(180deg, rgba(6,12,20,0) 0%, rgba(4,10,18,0.16) 40%, rgba(4,10,18,0.94) 100%); pointer-events: none; z-index: 1; }
/* 魚種名・サイズ・学名は写真右上のパネルにまとめて重ねる(左上のタイムスタンプと
   左右対称の位置)。 */
.insta-v10-species-panel { position: absolute; top: 6px; right: 8px; z-index: 2; max-width: 62%; text-align: right; background: rgba(4,10,18,0.55); padding: 5px 9px; border-radius: 8px; }
.insta-v10-species-top { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.insta-v10-species-name { font-size: 15px; font-weight: 800; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.insta-v10-species-size { font-family: var(--font-display); font-size: 11px; font-weight: 700; color: #00e5ff; white-space: nowrap; flex-shrink: 0; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.insta-v10-species-latin { font-size: 8px; font-style: italic; color: rgba(215,243,255,0.75); margin-top: 1px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 潮位チャート(潮回りはチャート自体のラベルとして表示)・天気/気温(海水温があれば追記)の
   読み取りバッジを、写真の一番下(下詰め)にまとめて重ねる。魚種名を右上へ移した分、
   以前より高さに余裕ができたためチャート・バッジとも一回り大きくしている。 */
.insta-v10-hud-row { position: absolute; left: 14px; right: 14px; bottom: 10px; z-index: 2; display: flex; gap: 6px; height: 104px; }
.insta-v10-tide { flex: 1; min-width: 0; background: rgba(0,229,255,0.1); border: 1px solid rgba(0,229,255,0.25); border-radius: 8px; padding: 6px 8px 5px; display: flex; flex-direction: column; }
.insta-v10-tide-label { font-size: 8px; letter-spacing: 0.04em; color: rgba(215,243,255,0.7); margin-bottom: 2px; font-family: var(--font-display); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insta-v10-tide-chart { flex: 1; min-height: 0; }
.insta-v10-tide-chart svg { display: block; width: 100%; height: 100%; }
.insta-v10-readouts { width: 72px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.insta-v10-readout { background: rgba(0,229,255,0.14); border: 1px solid rgba(0,229,255,0.32); border-radius: 6px; padding: 2px 3px; text-align: center; min-width: 0; }
.insta-v10-readout-icon { display: flex; justify-content: center; margin-bottom: 1px; color: #00e5ff; }
.insta-v10-readout-icon svg { display: block; }
/* 極小フォントサイズでは、フォントの行送りメタデータの都合でCSSのline-height:normalが
   font-sizeに対して不釣り合いに大きくなり、バッジ自体の高さが想定より膨らんでしまう
   ことがあるため、明示的にタイトな行送りを指定している。 */
.insta-v10-readout b { display: block; line-height: 1.15; font-family: var(--font-display); font-size: 9.5px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insta-v10-readout span { display: block; line-height: 1.15; font-size: 5.5px; letter-spacing: 0.05em; color: rgba(215,243,255,0.45); }

/* --- スプリット ---
   写真をfit:coverでカード全面に敷き詰め、左端の縦帯に魚種名を回転させて大きく配置する、
   アートポスターのような大胆・非対称のレイアウト。7案の中でもっとも写真を大きく見せる。 */
.insta-v11 { background: #000; }
.insta-v11-shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(2,3,6,0.55) 0%, rgba(2,3,6,0) 30%), linear-gradient(0deg, rgba(2,3,6,0.7) 0%, rgba(2,3,6,0) 34%); z-index: 1; }
.insta-v11-strip { position: absolute; top: 0; bottom: 0; left: 0; width: 52px; z-index: 2; background: linear-gradient(180deg, rgba(2,4,8,0.82), rgba(2,4,8,0.42) 42%, rgba(2,4,8,0.82)); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16px 0; }
/* 魚種名は本物の縦書き(writing-mode)がhtml2canvasで文字化けするため、1文字ずつ
   <span>に分割してブロック要素として縦に積み上げる自前の縦書き表現を使う
   (js/insta-card.js の verticalText() 参照)。 */
.insta-v11-strip-name {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.insta-vtext-char {
  display: block;
  line-height: 1.18;
}
.insta-v11-strip-brand { font-size: 8px; letter-spacing: 0.14em; color: rgba(255,255,255,0.6); writing-mode: horizontal-tb; }
.insta-v11-ribbon { position: absolute; top: 22px; right: -34px; z-index: 3; transform: rotate(34deg); background: #fff; color: #05070c; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; padding: 5px 40px; box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
.insta-v11-capsule { position: absolute; right: 16px; bottom: 20px; z-index: 2; max-width: 260px; background: rgba(4,6,10,0.6); border-radius: 16px; padding: 12px 16px; text-align: right; }
.insta-v11-capsule-latin { font-size: 11px; font-style: italic; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insta-v11-capsule-stats { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; }
.insta-v11-capsule-stat { text-align: right; }
.insta-v11-capsule-stat b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 800; color: #fff; white-space: nowrap; }
.insta-v11-capsule-stat b small { font-size: 11px; font-weight: 400; margin-left: 1px; }
.insta-v11-capsule-stat span { font-size: 8px; color: rgba(255,255,255,0.55); letter-spacing: 0.06em; }

/* --- 実績画面(レベル・ポイント・バッジ) ---
   プロフィールUIとして、レベル/PTに加えて図鑑コンプリート率・魚種登録数(ランク別)・
   獲得バッジのアイコンをこの1枚のカードにまとめて表示する。 */
.achv-level-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    radial-gradient(circle at 15% 0%, rgba(0,229,255,0.16), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(255,46,126,0.14), transparent 55%),
    linear-gradient(160deg, var(--surface), var(--surface-2));
}
.achv-level-top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.achv-level-badge {
  flex-shrink: 0;
  width: 62px; height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: #0b0e16;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 24px rgba(0,229,255,0.5);
}
.achv-level-body { flex: 1; min-width: 0; }
.achv-level-title { font-size: 16px; font-weight: 800; color: var(--text); }
.achv-equipped-title-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}
.achv-points {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--accent);
  margin-top: 2px;
}
.achv-points span { font-size: 12px; margin-left: 3px; color: var(--muted); font-family: inherit; }

.achv-next {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin: -8px 0 4px;
}
.achv-next strong { color: var(--accent); font-weight: 800; }

/* プロフィールの集計3項目(コンプリート率・魚種登録数・獲得バッジ数) */
.achv-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.achv-stat {
  text-align: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 4px;
}
.achv-stat-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
}
.achv-stat-unit { font-size: 11px; color: var(--muted); margin-left: 2px; font-family: inherit; font-weight: 700; }
.achv-stat-label {
  margin-top: 2px;
  font-size: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* ラベルが折り返すと、1行分の高さしかないアイコンが「2行ぶんの中央」に
     縦センタリングされて1行目の文字からずれて見えるため、折り返させず省略する */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.achv-stat-label .inline-icon { flex-shrink: 0; }
.achv-stat-label .inline-icon { width: 11px; height: 11px; }

/* 魚種登録数のランク別内訳(C〜SS。魚種ごとの自己ベストランクで集計) */
.achv-rank-breakdown {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.achv-rank-chip-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.achv-rank-chip { width: 26px; height: 26px; font-size: 10px; }
.achv-rank-count { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--text); }
.achv-rank-breakdown-label { font-size: 10px; color: var(--muted); text-align: center; margin-top: -4px; }

/* 獲得バッジのアイコンだけをコンパクトに並べる一覧 */
.achv-badge-icons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.achv-badge-icon-mini {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,209,102,0.14);
  color: var(--gold);
  box-shadow: 0 0 10px rgba(255,209,102,0.3);
  flex-shrink: 0;
}
.achv-badge-icon-mini-svg { width: 16px; height: 16px; }
.achv-badge-icons-empty { font-size: 11px; color: var(--muted); }

.achv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.achv-badge {
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
  opacity: 0.55;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.achv-badge.unlocked {
  opacity: 1;
  border-color: rgba(255,209,102,0.4);
  box-shadow: 0 0 22px rgba(255,209,102,0.22), 0 6px 16px rgba(0,0,0,0.35);
}
.achv-badge-icon { margin-bottom: 4px; color: var(--muted); display: flex; justify-content: center; }
.achv-badge.unlocked .achv-badge-icon { color: var(--gold); filter: drop-shadow(0 0 6px rgba(255,209,102,0.55)); }
.achv-badge-icon-svg { width: 20px; height: 20px; }
.achv-badge-title { font-size: 10.5px; font-weight: 800; color: var(--text); }
.achv-badge-desc { font-size: 9px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.achv-badge.locked .achv-badge-title { color: var(--muted); letter-spacing: 2px; }
.achv-badge.locked .achv-badge-desc { opacity: 0.8; }

/* --- 釣りガチャ(実績画面。累計ポイントの使い道として、カードの背景デザインガチャを回せる) --- */
.gacha-balance {
  color: var(--accent);
  font-weight: 700;
}
/* 釣りガチャ画面: ガチャを回すボタン類は常に表示するカードの先頭に置くため、
   .section-title(トグル付きの見出し)ではなく、この行だけで残高を目立たせる。 */
.gacha-balance-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.gacha-balance-row .gacha-balance { display: flex; align-items: center; gap: 5px; }
/* マイページ: 折りたたみセクションのタイトル行に添える現在値のヒント(ガチャの所持pt表示と
   同じ考え方)。開かなくても中身の見当がつくよう、アカウントのメール・しきい値の現在値・
   カード表示項目の数などをここに表示する。 */
.achv-inline-hint {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* マイページ: 複数の折りたたみセクションを意味のまとまりごとに区切るための見出し
   (時系列グラフ等と同じ.section-titleを、トグルボタン無しの単なる区切りとして使う)。 */
.mypage-zone-label { margin-top: 22px; }
.gacha-card { display: flex; flex-direction: column; gap: 10px; }
.gacha-equipped-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
}
.gacha-equipped-label { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.gacha-equipped-title { font-size: 14px; font-weight: 800; color: var(--gold); margin-left: auto; }
.gacha-pull-btn { margin-top: 2px; }
.gacha-collection-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 6px;
}
.gacha-title-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.gacha-bg-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0; /* grid-templateが1frでも中身(特に長いテーマ名)で押し広げられないようにする */
  background: linear-gradient(160deg, var(--surface-2), var(--surface-3));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 6px;
  text-align: left;
}
.gacha-bg-chip.locked { opacity: 0.5; }
.gacha-bg-chip:disabled { cursor: default; }
.gacha-bg-chip-top { display: flex; align-items: center; gap: 6px; width: 100%; }
.gacha-bg-swatch {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background-color: var(--surface-3);
  background-size: cover;
  background-position: center;
}
.gacha-equipped-swatch { width: 30px; height: 30px; border-radius: 9px; }
.gacha-bg-rarity {
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 800;
  padding: 2px 4px;
  border-radius: 5px;
  flex-shrink: 0;
  color: #05070c;
  background: var(--muted);
}
.gacha-bg-chip.rarity-R .gacha-bg-rarity { background: var(--accent); }
.gacha-bg-chip.rarity-SR .gacha-bg-rarity { background: linear-gradient(90deg, var(--accent-2), var(--gold)); }
.gacha-bg-chip.rarity-SSR .gacha-bg-rarity { background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--gold)); }
.gacha-bg-name {
  display: block;
  width: 100%;
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gacha-bg-chip.owned.equipped {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(255,209,102,0.35);
}
.gacha-bg-chip.rarity-SSR.owned {
  border-color: rgba(255,209,102,0.6);
  box-shadow: 0 0 14px rgba(255,209,102,0.3);
}

/* ガチャの演出(回転中の表示・結果カード)・確率表示 */
.gacha-pull-btn.rolling { opacity: 0.75; pointer-events: none; }
.gacha-reveal-stage:empty { display: none; }
.gacha-rolling-fx {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 14px;
}
.gacha-rolling-orb {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.gacha-rolling-ring {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--accent);
  border-right-color: var(--accent-2);
  animation: gachaRingSpin 0.85s linear infinite;
}
.gacha-rolling-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  color: var(--accent);
  animation: gachaOrbit 1.3s linear infinite;
}
.gacha-rolling-icon-2 { color: var(--accent-2); animation-delay: -0.43s; }
.gacha-rolling-icon-3 { color: var(--gold); animation-delay: -0.86s; }
@keyframes gachaRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes gachaOrbit {
  from { transform: rotate(0deg) translateX(26px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(26px) rotate(-360deg); }
}
.gacha-rolling-text {
  font-size: 13px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.gacha-reveal-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gacha-burst-rays {
  position: absolute;
  inset: -34px;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,209,102,0.4) 0deg 4deg, transparent 4deg 20deg);
  mix-blend-mode: screen;
  animation: gachaBurstSpin 3.2s linear infinite, gachaBurstFade 1.8s ease-out forwards;
}
@keyframes gachaBurstSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes gachaBurstFade {
  0% { opacity: 0; }
  15% { opacity: 0.9; }
  100% { opacity: 0.3; }
}
.gacha-confetti { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.gacha-confetti-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--dc, var(--gold));
  opacity: 0;
  animation: gachaConfettiBurst 1.1s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
@keyframes gachaConfettiBurst {
  0% { transform: translate(-50%, -50%) scale(0.4) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(220deg); opacity: 0; }
}
.gacha-reveal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 12px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface-3));
  border: 1px solid var(--border-strong);
}
.gacha-reveal-card.pop-in { animation: gachaPop 0.8s cubic-bezier(0.22, 1.8, 0.36, 1); }
@keyframes gachaPop {
  0% { transform: scale(0.3) rotate(-8deg); opacity: 0; }
  55% { transform: scale(1.16) rotate(3deg); opacity: 1; }
  75% { transform: scale(0.96) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
/* 当たり度が高い演出(SR以上・図鑑情報)は、登場後もゆっくり呼吸するように光らせ続けて目を引く */
.gacha-reveal-card.epic { animation: gachaPop 0.8s cubic-bezier(0.22, 1.8, 0.36, 1), gachaEpicPulse 1.1s ease-in-out 0.8s infinite; }
@keyframes gachaEpicPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
.gacha-reveal-swatch {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.2);
}
.gacha-reveal-rarity {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.gacha-reveal-card.rarity-R .gacha-reveal-rarity { color: var(--accent); }
.gacha-reveal-card.rarity-SR .gacha-reveal-rarity { color: var(--gold); }
.gacha-reveal-card.rarity-SSR .gacha-reveal-rarity { color: var(--gold); text-shadow: 0 0 10px rgba(255,209,102,0.6); }
.gacha-reveal-card.rarity-SSR { box-shadow: 0 0 20px rgba(255,209,102,0.35); border-color: rgba(255,209,102,0.6); }
.gacha-reveal-name { font-size: 14px; font-weight: 800; color: var(--text); }
.gacha-reveal-sub { font-size: 11px; color: var(--muted); }
.gacha-odds-title { font-size: 11px; color: var(--muted); margin-top: 4px; }
.gacha-odds-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gacha-odds-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  font-size: 11px;
}
.gacha-odds-rarity {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 10px;
  color: var(--muted);
}
.gacha-odds-chip.rarity-R .gacha-odds-rarity { color: var(--accent); }
.gacha-odds-chip.rarity-SR .gacha-odds-rarity { color: var(--gold); }
.gacha-odds-chip.rarity-SSR .gacha-odds-rarity { color: var(--gold); }
.gacha-odds-chip.rarity-INFO .gacha-odds-rarity { color: var(--accent-2); }
.gacha-odds-percent { color: var(--text); font-weight: 700; }
.gacha-odds-chip.complete { opacity: 0.55; }
.gacha-odds-chip.complete .gacha-odds-percent { color: var(--muted); font-weight: 600; }

/* 「図鑑情報の解放」の当選演出(カードテーマと同じ枠を使い、色だけ変えて区別する) */
.gacha-reveal-card.rarity-INFO { border-color: rgba(255,46,126,0.5); box-shadow: 0 0 16px rgba(255,46,126,0.25); }
.gacha-reveal-card.rarity-INFO .gacha-reveal-rarity { color: var(--accent-2); }
.shop-info-reveal-swatch {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,46,126,0.14);
  color: var(--accent-2);
}

/* ポイントショップ: 図鑑情報の解放状況リスト */
.shop-info-row { align-items: center; }
.shop-info-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.shop-info-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.shop-info-chip.unlocked { color: var(--accent-2); border-color: rgba(255,46,126,0.4); background: rgba(255,46,126,0.08); }

/* --- マップの魚種ピン --- */
/* .map-pinは位置決めだけを担当する「外枠」。丸く切り抜く表示(overflow:hidden)は
   .map-pin-inner側だけに掛けることで、件数バッジ(.map-pin-count)が外枠からはみ出す
   位置(top:-6px/right:-6px)にあっても、丸アイコン側のoverflow:hiddenに巻き込まれて
   欠けて見えてしまう不具合を避けている。 */
.map-pin {
  position: relative;
  width: 40px; height: 40px;
}
.map-pin-inner {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface-3));
  border: 2px solid var(--accent);
  box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 14px rgba(0,229,255,0.4);
  overflow: hidden;
}
.map-pin-fish-icon { width: 18px; height: 18px; display: block; color: var(--accent); }
.map-pin-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.map-pin-count {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent-2);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.5);
  z-index: 1;
}
/* ピンの下に常時表示する魚種名ラベル(Leafletのtooltipを流用) */
.leaflet-tooltip.map-pin-label {
  background: rgba(13,16,24,0.92);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.leaflet-tooltip.map-pin-label::before { display: none; }

.map-popup { font-size: 12px; max-width: 200px; color: #1c2333; }
.map-popup .mp-title { font-weight: 800; font-size: 13px; margin-bottom: 4px; color: #0b0e16; }
.map-popup .mp-rank-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.map-popup .mp-recent { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(0,0,0,0.12); color: #4a5468; }

/* --- 釣り場の登録ツールバー --- */
.map-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
main.screen.screen-map .map-toolbar { flex-shrink: 0; margin-bottom: 8px; }
.map-toolbar-hint {
  font-size: 11px;
  color: var(--accent);
  font-weight: 700;
}
#spot-register-btn { width: auto; padding: 9px 14px; }
#spot-register-btn.active {
  background: linear-gradient(90deg, var(--accent-2), var(--gold));
  color: #1c0d10;
  border-color: transparent;
}

/* --- 登録済みの釣り場ピン(魚種ピンとは別デザイン。金色系で常時表示) --- */
.spot-pin {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #3a2d10, #241a08);
  border: 2px solid var(--gold);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 12px rgba(255,209,102,0.45);
}
.spot-pin-icon { width: 15px; height: 15px; color: var(--gold); transform: rotate(45deg); }

/* --- 釣り場ポップアップ(白背景のLeafletポップアップ上に載るため、mp-titleなどと同じダーク系文字色) --- */
.spot-popup { max-width: 230px; }
.spot-level-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.spot-level-badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(90deg, #c9950f, var(--gold));
}
.spot-level-count { font-size: 10px; color: #4a5468; }
.spot-level-next { font-size: 10px; color: #4a5468; margin-top: 3px; }
.spot-section-title {
  font-size: 11px;
  font-weight: 800;
  color: #0b0e16;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.12);
}
.spot-empty-note { font-size: 11px; color: #4a5468; margin-top: 2px; }
.spot-locked-note {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: #8a8f9c;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0,0,0,0.12);
}
.spot-today-pick { font-size: 11px; color: #0b0e16; margin-top: 2px; line-height: 1.5; }
.spot-popup-actions { margin-top: 12px; }
.spot-delete-btn {
  width: 100%;
  color: var(--coral) !important;
  border-color: rgba(255,84,112,0.4) !important;
  font-size: 11px;
  padding: 7px 10px;
}
.spot-coord-hint { font-size: 11px; color: var(--muted); margin-top: 6px; }

/* --- 釣果カレンダー --- */
.cal-mode-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.cal-mode-btn {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 12px;
  padding: 10px 6px;
  font-size: 11px;
  font-weight: 700;
  transition: all 0.15s ease;
}
.cal-mode-btn.active {
  color: #0b0e16;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 0 16px rgba(0,229,255,0.35);
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cal-nav-btn { width: 44px; padding: 9px 0; flex: none; }

/* カレンダー本体(週見出し・日付グリッド)の折りたたみ。月移動(.cal-nav)は
   折りたたんでいても常に操作できるよう、この行は.cal-navの外に置かない。 */
.cal-grid-toggle-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}
.cal-grid-toggle-row .fc-picker-summary { flex: 1; margin: 0; }
.cal-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text);
}

#cal-species-filter, #cal-season-species { margin-bottom: 12px; }

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 4px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--muted);
}
.cal-cell.empty { visibility: hidden; }
/* 釣果の有無に関わらず、すべての日付をタップして釣行予定を登録できるようにしたため、
   クリック可能であることを示すカーソル・押下時の縮小アニメーションは日付セル全体にかける */
.cal-cell:not(.empty) { cursor: pointer; }
.cal-cell:not(.empty):active { transform: scale(0.94); }
.cal-cell.has-catch {
  background: var(--surface-3);
  color: var(--text);
  font-weight: 700;
  border: 1px solid var(--border);
}
.cal-cell.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-cell.has-plan { box-shadow: inset 0 0 0 1.5px var(--gold); }
.cal-cell.is-today.has-plan { box-shadow: inset 0 0 0 1.5px var(--accent), inset 0 0 0 3px var(--gold); }
.cal-cell.selected {
  background: linear-gradient(160deg, rgba(0,229,255,0.28), rgba(255,46,126,0.22));
  border-color: var(--accent);
}
.cal-daynum { position: relative; z-index: 1; }
.cal-plan-mark {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  color: #2a1d00;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(255,209,102,0.6);
}
.cal-plan-mark svg { width: 9px; height: 9px; display: block; }
.cal-dot {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255,255,255,0.5);
}
.cal-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--accent-2);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.5);
}

/* --- 魚種シーズナリティ(月別バーチャート) --- */
.season-chart {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 16px 0 4px;
  padding: 0 2px;
}
.season-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.season-bar-value {
  font-size: 10px;
  font-weight: 800;
  color: var(--accent);
  min-height: 13px;
}
.season-bar-track {
  width: 100%;
  max-width: 20px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0 auto;
}
.season-bar {
  width: 100%;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, rgba(0,229,255,0.9), rgba(0,229,255,0.28));
  min-height: 3px;
  transition: height 0.3s ease;
}
.season-bar.peak {
  background: linear-gradient(180deg, var(--accent-2), rgba(255,46,126,0.3));
  box-shadow: 0 0 14px rgba(255,46,126,0.55);
}
.season-bar-label {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--muted);
}
.season-insight {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text);
  text-align: center;
  padding: 10px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* --- 図鑑の豆知識(セクション全体を一括で表示/非表示するボタン付き) --- */
.trivia-toggle-btn {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: rgba(0,229,255,0.1);
  border: 1px solid rgba(0,229,255,0.3);
  border-radius: 999px;
  padding: 5px 12px;
}
.trivia-card {
  background: linear-gradient(160deg, rgba(0,229,255,0.08), rgba(255,46,126,0.06)), linear-gradient(160deg, var(--surface), var(--surface-2));
  padding: 4px 0;
}
.log-sort-toggle {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
}
.log-sort-btn {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 5px 10px;
}
.log-sort-btn.active {
  color: #05070c;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.trivia-item {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  padding: 10px 16px;
}
.trivia-item + .trivia-item { border-top: 1px solid var(--border); }

/* --- 管理者設定画面 --- */
.admin-field { margin-bottom: 12px; }
.admin-field label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 5px;
  letter-spacing: 0.02em;
}
.admin-field input:disabled {
  opacity: 0.55;
}
.admin-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
.admin-btn-row {
  display: flex;
  gap: 8px;
}
.admin-btn-row .btn {
  flex: 1;
  width: auto;
}
.admin-checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
}
.admin-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
}
.admin-checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
input[type="color"] {
  width: 64px;
  height: 42px;
  padding: 4px;
  cursor: pointer;
}
.admin-rank-preview-box {
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rank-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text);
}

/* --- 新着ページ(Apple Musicの「新着」のような横スクロールカード) --- */
.whatsnew-shelf-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 10px;
  margin: 0 -2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.whatsnew-shelf-row::-webkit-scrollbar { display: none; }
.whatsnew-card {
  flex: 0 0 auto;
  width: 148px;
  scroll-snap-align: start;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.whatsnew-card:active { transform: scale(0.96); }
.whatsnew-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  /* 写真の読み込みが終わるまでの背景は、魚種ごとの色でバラバラに見えないよう単一色に統一している */
  background: var(--surface-3);
  overflow: hidden;
}
.whatsnew-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.whatsnew-card-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
}
.whatsnew-card-rank {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  font-size: 10.5px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35), 0 0 8px rgba(0,0,0,0.35);
}
.whatsnew-new-ribbon {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: linear-gradient(90deg, var(--gold), #ffb703);
  color: #2a1d00;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 7px 3px 5px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  box-shadow: 0 0 8px rgba(255,209,102,0.6);
}
.whatsnew-card-info { padding: 9px 10px 11px; }
.whatsnew-card-species {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.whatsnew-card-meta { font-size: 10.5px; color: var(--muted); margin-top: 2px; }

/* --- 釣行予定の天気監視UI(カレンダー画面に統合。天気・波・潮汐・危険情報・まずめ時間・
   持ち物チェックリストで使う共通パーツ。もとは独立した「予報」タブだった) --- */
.fc-location-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#fc-mini-map-wrap, #plan-mini-map-wrap { margin-top: 4px; }
#fc-mini-map, #plan-mini-map {
  width: 100%;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}
/* カレンダーの日付タップで出す釣行予定フォームの「登録する/削除」ボタン行 */
.cal-plan-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.cal-plan-actions .btn-primary { flex: 1; }
.cal-plan-actions .btn-ghost { flex: 1; width: auto; }

/* 登録済みの釣行予定を積み上げて表示するリスト(予定を追加するほど下にカードが増えていく) */
.plan-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 登録済みの釣行予定を、日付・場所・時間・天気の要点だけで見せるコンパクトなカード。
   縦に長い内訳・時系列グラフは常時表示せず、タップして開く詳細モーダル側に持たせている。 */
.plan-card {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.plan-card:active { transform: scale(0.98); }
/* 複数の予定が積み上がるため、どの予定のカードかひと目でわかるよう日付を主見出しにしている
   (場所は地図タップ地点だと「選んだ地点」のような汎用文言になることがあるため、副次表示にする) */
.plan-card-date {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 6px;
}
.plan-card-place {
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.plan-card-time {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.plan-card-weather { margin-top: 10px; min-height: 20px; }
.plan-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 12.5px;
  color: var(--text);
}
.plan-card-stat { display: flex; align-items: center; gap: 4px; }
.plan-card-tide {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
}
.plan-card-na { font-size: 12px; color: var(--muted); }
.plan-card-danger {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--coral);
  display: flex;
  align-items: center;
  gap: 5px;
}
.plan-card-hint {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 予定カードをタップして開く、天気・波・潮汐・危険情報の詳細モーダル */
.plan-detail-modal {
  width: min(440px, 100%);
  max-height: 100%;
}

.fc-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 10px;
}
.fc-head-date { color: var(--accent); }
.fc-danger-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,84,112,0.14);
  border: 1px solid rgba(255,84,112,0.4);
  color: var(--coral);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 10px;
}
.fc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 4px;
}
.fc-cell {
  background: var(--surface-2);
  padding: 10px 8px;
  position: relative;
}
/* 天気アプリのように、値に応じて中身が変わるミニイラスト(js/weather-icons.js)。
   ラベル・数値のレイアウトは変えず、マスの右上に控えめに添える。 */
.fc-cell-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0.92;
  line-height: 0;
}
.fc-cell-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.fc-cell-value {
  font-size: 14px;
  font-weight: 800;
  margin-top: 3px;
  color: var(--text);
}
.fc-cell-na {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}
/* マス目の数が3列グリッドで割り切れない場合、余ったマスを行全体に広げて表示するための
   クラス(気圧を削除して6マス=3列グリッドできれいに割り切れるようになったため、
   現在はどのマスにも付けていないが、マス数が変わったときのために残してある) */
.fc-cell-wide { grid-column: 1 / -1; }
.fc-row {
  padding: 12px 2px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}
.fc-estimated-tag {
  font-size: 10px;
  color: var(--muted);
  margin-left: 4px;
}
.fc-checklist-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fc-checklist-remove-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  padding: 4px;
  cursor: pointer;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
.fc-checklist-add-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.fc-checklist-add-row input {
  flex: 1;
  min-width: 0;
}
.fc-checklist-add-row .btn { width: auto; padding: 9px 14px; flex-shrink: 0; }
.fc-picker-summary {
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 11px;
  margin: -4px 0 10px;
}
.fc-datetime-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fc-datetime-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fc-datetime-caption {
  flex: 0 0 28px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.fc-datetime-row input[type="date"] {
  flex: 1.3;
  min-width: 0;
}
.fc-datetime-row input[type="time"] {
  flex: 1;
  min-width: 0;
}
.fc-chart-item + .fc-chart-item {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.fc-chart-item svg, #fc-results .fc-chart-item svg { display: block; }

/* ===== 使い方チュートリアル(初回起動時の自動表示・マイページからの再生) ===== */
.tutorial-card {
  width: min(360px, 100%);
  text-align: center;
  position: relative;
  padding-top: 34px;
}
.tutorial-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tutorial-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  filter: drop-shadow(0 0 10px rgba(0,229,255,0.35));
}
.tutorial-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.tutorial-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  min-height: 68px;
}
.tutorial-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 16px 0 4px;
}
.tutorial-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
}
.tutorial-dot.active {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(0,229,255,0.7);
}
.tutorial-nav-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.tutorial-nav-row .btn { width: auto; flex: 1; }

/* ===== 使い方画面(ヘッダーの「？」から開く機能紹介) ===== */
.help-intro-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.help-intro-desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.help-list-card { padding: 6px 16px; }
.help-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  align-items: flex-start;
}
.help-row + .help-row { border-top: 1px solid var(--border); }
.help-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.help-row-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 3px;
}
.help-row-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

/* ===== 利用規約・プライバシーポリシー(マイページ・ログイン画面から開くモーダル) ===== */
.legal-modal-card {
  width: min(480px, 100%);
  max-height: 82vh;
  padding: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.legal-modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 46px 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  color: var(--accent);
}
.legal-modal-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.legal-modal-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.legal-modal-body {
  padding: 4px 20px 20px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--muted);
}
.legal-section { margin-top: 16px; }
.legal-section:first-child { margin-top: 4px; }
.legal-section h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
}
.legal-modal-body p { margin: 0 0 8px; }
.legal-modal-body ul { margin: 0 0 8px; padding-left: 18px; }
.legal-modal-body li { margin-bottom: 4px; }
.legal-modal-date {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  text-align: right;
}

/* ログイン画面の「利用規約・プライバシーポリシーに同意」注記内の、インラインリンク風ボタン */
.legal-inline-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
  font-size: inherit;
  cursor: pointer;
}

/* =====================================================================
   処理中オーバーレイ(js/busy-overlay.js)
   保存・アップロード・画像作成などの待ち時間に「動いている」ことを伝える。
   ===================================================================== */
body.busy-lock { pointer-events: none; }
.busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 5, 10, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: auto;
  touch-action: none;
}
.busy-overlay.show { opacity: 1; }
.busy-overlay.hide { opacity: 0; }
.busy-panel {
  width: min(300px, 86vw);
  padding: 22px 20px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,229,255,0.06);
  text-align: center;
  transform: translateY(8px) scale(0.97);
  transition: transform 0.22s cubic-bezier(.2,.8,.2,1);
}
.busy-overlay.show .busy-panel { transform: none; }
.busy-stage {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(0,229,255,0.16), rgba(0,229,255,0.03) 70%);
}
.busy-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(0,229,255,0.12);
  border-top-color: var(--accent);
  border-right-color: rgba(0,229,255,0.5);
  animation: busy-spin 1.1s linear infinite;
}
.busy-wave {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -62%;
  height: 100%;
  border-radius: 42%;
  background: rgba(0,229,255,0.16);
  animation: busy-wave 3.6s linear infinite;
}
.busy-fish {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  color: var(--accent);
  filter: drop-shadow(0 0 8px rgba(0,229,255,0.55));
  animation: busy-fish-circle 2.4s linear infinite;
}
.busy-fish svg { display: block; width: 100%; height: 100%; }
.busy-bubble {
  position: absolute;
  bottom: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  opacity: 0;
  animation: loading-bubble-rise 2.4s ease-in infinite;
}
.busy-bubble:nth-of-type(1) { left: 30%; animation-delay: 0.1s; }
.busy-bubble:nth-of-type(2) { left: 52%; animation-delay: 0.9s; }
.busy-bubble:nth-of-type(3) { left: 70%; animation-delay: 1.6s; }
.busy-label { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.5; }
.busy-progress {
  height: 6px;
  margin: 12px 4px 0;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.busy-progress-bar {
  display: block;
  height: 100%;
  width: 4%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #7fe8e7);
  box-shadow: 0 0 10px rgba(0,229,255,0.6);
  transition: width 0.3s ease;
}
.busy-sub { margin-top: 10px; font-size: 11.5px; color: var(--muted); line-height: 1.5; min-height: 0; }
.busy-sub:empty { display: none; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
@keyframes busy-wave { to { transform: rotate(360deg); } }
/* 魚が円を描くように泳ぐ(鼻先=左向きのアイコンなので、進行方向に合わせて回転させる) */
@keyframes busy-fish-circle {
  0%   { transform: translate(-50%, -50%) rotate(0deg) translateX(22px) rotate(90deg) scaleX(-1); }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateX(22px) rotate(90deg) scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) {
  .busy-ring, .busy-wave, .busy-fish, .busy-bubble { animation-duration: 6s !important; }
}

/* =====================================================================
   写真ビューア(js/photo-viewer.js)。トリミングなしで大きく表示する。
   ===================================================================== */
body.pv-open { overflow: hidden; }
.photo-viewer {
  --pv-bg-alpha: 0.98;
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, var(--pv-bg-alpha));
  opacity: 0;
  transition: opacity 0.2s ease;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.photo-viewer.show { opacity: 1; }
.photo-viewer.hide { opacity: 0; }
.pv-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + var(--safe-top)) 12px 8px 16px;
  color: #fff;
  flex-shrink: 0;
}
.pv-counter { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.08em; min-width: 44px; }
.pv-title { flex: 1; font-size: 13px; color: rgba(255,255,255,0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-close-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pv-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.pv-track { display: flex; height: 100%; will-change: transform; }
.pv-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pv-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
  will-change: transform;
}
.pv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.pv-nav:disabled { opacity: 0.25; cursor: default; }
.pv-prev { left: 10px; }
.pv-next { right: 10px; }
@media (hover: none) { .pv-nav { display: none; } }
.pv-thumbs {
  display: flex;
  gap: 6px;
  padding: 10px 12px 4px;
  overflow-x: auto;
  flex-shrink: 0;
  justify-content: safe center;
  scrollbar-width: none;
}
.pv-thumbs::-webkit-scrollbar { display: none; }
.pv-thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--surface-3);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.pv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-thumb.active { opacity: 1; border-color: var(--accent); }
.pv-hint {
  padding: 6px 16px calc(12px + var(--safe-bottom));
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}

/* カード内の写真: 枚数カウンター・拡大ボタン(書き出し画像には含めない) */
.tc-photo-gallery { cursor: zoom-in; }
.tc-photo-count {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(10,13,18,0.66);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
}
.tc-photo-count svg { width: 12px; height: 12px; }
.tc-photo-expand-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(10,13,18,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.tc-photo-expand-btn svg { width: 15px; height: 15px; }

/* 一覧(図鑑の釣果ログ・カレンダー)のサムネイルに付ける「複数枚あり」バッジ */
.thumb-wrap { position: relative; flex-shrink: 0; display: inline-flex; }
.thumb-multi-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 5px 1px 4px;
  border-radius: 99px;
  background: var(--accent);
  color: #03141a;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  box-shadow: 0 0 0 2px var(--surface);
}
.thumb-multi-badge svg { width: 10px; height: 10px; }

/* 記録画面: 追加写真サムネイルの「表紙にする」ボタン */
.rec-extra-photo-cover-btn {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: none;
  border-radius: 6px;
  padding: 3px 0;
  background: rgba(10,13,18,0.72);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.rec-cover-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(10,13,18,0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}
.rec-photo-pick-hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* 記録画面: 自動取得した詳細コンディション(気圧・波など)の一覧 */
.rec-cond-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.rec-cond-item {
  padding: 7px 9px;
  border-radius: 10px;
  background: var(--surface-3);
  font-size: 12px;
  line-height: 1.35;
}
.rec-cond-item .k { display: block; font-size: 10.5px; color: var(--muted); }
.rec-cond-item .v { font-weight: 700; color: var(--text); }
.rec-cond-item .v small { font-weight: 500; color: var(--muted); margin-left: 3px; }

/* カード詳細: 「コンディション詳細」パネル(カード画像には含まれない) */
.tc-cond-panel {
  width: min(300px, 84vw);
  border-radius: 14px;
  background: rgba(26,33,48,0.9);
  border: 1px solid var(--border);
  overflow: hidden;
}
.tc-cond-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.tc-cond-toggle .tc-cond-hint { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--muted); }
.tc-cond-body { padding: 0 12px 12px; }
.tc-cond-body .rec-cond-grid { margin-top: 0; }
.tc-cond-empty { font-size: 12px; color: var(--muted); padding: 2px 2px 4px; line-height: 1.5; }
.thumb-multi-badge.thumb-multi-badge-corner {
  right: 6px;
  bottom: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  z-index: 2;
}

/* =====================================================================
   分析タブ(js/screens/analysis.js)
   ===================================================================== */
.an-species-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -14px 14px;
  padding: 2px 14px 6px;
  scrollbar-width: none;
}
.an-species-bar::-webkit-scrollbar { display: none; }
.an-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 99px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.an-chip.active { background: var(--accent); color: #03141a; border-color: var(--accent); }
.an-chip-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,0.3); }
.an-chip-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  color: var(--muted);
}
.an-chip.active .an-chip-count { background: rgba(3,20,26,0.18); color: #03141a; }
.an-head { margin: 2px 2px 10px; }
.an-head-title { font-size: 20px; font-weight: 800; }
.an-head-sub { font-size: 12px; color: var(--muted); font-style: italic; }
.an-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.an-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 4px 10px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.an-stat-v { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text); }
.an-stat-k { font-size: 11px; color: var(--muted); margin-top: 2px; }
.an-highlights { display: flex; flex-direction: column; gap: 8px; }
.an-hl {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  grid-template-areas: "icon k share" "icon v share";
  align-items: center;
  column-gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(0,229,255,0.12), rgba(0,229,255,0.03));
  border: 1px solid rgba(0,229,255,0.25);
}
.an-hl-icon { grid-area: icon; color: var(--accent); display: flex; }
.an-hl-k { grid-area: k; font-size: 11px; color: var(--muted); }
.an-hl-v { grid-area: v; font-size: 15px; font-weight: 800; }
.an-hl-share { grid-area: share; text-align: right; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--accent); }
.an-hl-share small { display: block; font-family: inherit; font-size: 10px; color: var(--muted); font-weight: 500; }
.an-caveat { font-size: 11px; color: var(--muted); margin: 8px 2px 16px; line-height: 1.5; }
.an-dim { padding: 14px 14px 10px; }
.an-dim-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.an-dim-title { font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.an-dim-n { font-size: 11px; color: var(--muted); }
.an-bars { display: flex; flex-direction: column; gap: 7px; }
.an-bar-row {
  display: grid;
  grid-template-columns: 92px 1fr 58px;
  grid-template-areas: "label track val" ". size size";
  align-items: center;
  column-gap: 8px;
  font-size: 12px;
}
.an-bar-label { grid-area: label; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-bar-track { grid-area: track; height: 10px; border-radius: 4px; background: rgba(255,255,255,0.05); overflow: hidden; }
.an-bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: rgba(0,229,255,0.45); }
.an-bar-row.top .an-bar-fill { background: var(--accent); box-shadow: 0 0 8px rgba(0,229,255,0.5); }
.an-bar-row.top .an-bar-label { font-weight: 800; }
.an-bar-val { grid-area: val; text-align: right; font-weight: 700; color: var(--text); }
.an-bar-val small { font-weight: 500; color: var(--muted); margin-left: 4px; font-size: 10.5px; }
.an-bar-size { grid-area: size; font-size: 10.5px; color: var(--muted); margin-top: -3px; }
.an-bar-row.zero .an-bar-label, .an-bar-row.zero .an-bar-val { color: var(--muted); opacity: 0.6; }
.an-missing { margin: 6px 2px 20px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--border-strong); }
.an-missing-title { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.an-missing-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.an-missing-list span { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.an-missing-desc { font-size: 11px; color: var(--muted); line-height: 1.5; }
.an-empty { text-align: center; padding: 30px 20px; }
.an-empty-icon { color: var(--accent); margin-bottom: 10px; }
.an-empty-title { font-weight: 800; font-size: 16px; margin-bottom: 8px; }
.an-empty-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }

/* =====================================================================
   v1.0 リデザイン: 記録ライブラリ(ネオン調は維持し、写真と数字を主役に)
   ===================================================================== */

/* --- UIテキストは基本1行(折り返さず、はみ出す分は…で省略) --- */
.btn, .trivia-toggle-btn, .cat-tab, .log-sort-btn, .map-filter-chip, .an-chip, .lib-switch-btn, .rec-mode-btn,
.section-title, .section-title > span, label.field, .rec-subcaption, .rec-collapse-key, .rec-status, .rec-inline-hint,
.achv-inline-hint, .crop-hint, .rec-ai-status, .lib-card-line1, .lib-card-line2, .an-dim-title, .an-dim-n,
.an-bar-label, .an-hl-k, .an-hl-v, .an-caveat, .an-missing-desc, .lib-stat-k, .an-stat-k, .my-stat-k, .zk-info-row .k,
nav.bottom-nav button > span:last-child, .header-right .completion, #header-title, .spot-level-count, .mp-rank-row span,
.zk-hero-name, .zk-hero-latin, .zk-hero-cat, .toast {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.section-title > span { flex: 1 1 auto; }
.section-title .trivia-toggle-btn, .section-title .log-sort-toggle { flex: none; }
.achv-inline-hint { flex: 0 1 auto; }
.btn { max-width: 100%; }
.btn-sm { padding: 10px 12px; font-size: 13px; }
.badge-note { line-height: 1.4; }

/* --- ヘッダー: 数字を目立たせる --- */
.header-right .completion { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.04em; }

/* --- 下部メニュー: 中央に「記録」の大きなボタン --- */
nav.bottom-nav button.nav-btn-record { position: relative; }
.nav-record-orb {
  width: 50px;
  height: 50px;
  margin-top: -24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #03141a;
  background: linear-gradient(135deg, var(--accent), #7fe8e7 55%, var(--accent-2));
  box-shadow: 0 0 0 4px var(--bg), 0 6px 22px rgba(0,229,255,0.55), 0 0 30px rgba(255,46,126,0.3);
}
.nav-record-orb svg { width: 24px; height: 24px; display: block; }
nav.bottom-nav button.nav-btn-record.active { color: var(--accent); }
nav.bottom-nav button.nav-btn-record.active .nav-record-orb { transform: scale(1.06); }

/* --- ライブラリ: 表示切り替え --- */
.lib-switch, .rec-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.rec-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lib-switch-btn, .rec-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.lib-switch-btn.active, .rec-mode-btn.active {
  color: #03141a;
  background: linear-gradient(135deg, var(--accent), #7fe8e7);
  box-shadow: 0 0 16px rgba(0,229,255,0.45);
}
.rec-mode-btn[data-mode="skunk"].active {
  background: linear-gradient(135deg, #8993a8, #c3cad8);
  box-shadow: 0 0 14px rgba(137,147,168,0.4);
}
.lib-body-map { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* --- 数字の帯(匹・魚種・釣行日・ボウズ など) --- */
.lib-stats, .my-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.my-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.lib-stat, .my-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 4px 8px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  min-width: 0;
}
.lib-stat-v, .my-stat-v {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 0 12px rgba(0,229,255,0.45);
}
.my-stat-v small { font-size: 11px; color: var(--muted); text-shadow: none; }
.lib-stat-k, .my-stat-k { font-size: 11px; color: var(--muted); margin-top: 3px; max-width: 100%; }

/* --- 検索 --- */
.lib-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--muted);
}
.lib-search input {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  color: var(--text);
  font-size: 14px;
  box-shadow: none !important;
}
.lib-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,229,255,0.15); }

/* --- 記録カード(写真が主役・サイズの数字を大きく) --- */
.lib-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.lib-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(0,229,255,0.18);
  color: var(--text);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  min-width: 0;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.lib-card:active { transform: scale(0.97); }
.lib-card:hover { box-shadow: 0 0 18px rgba(0,229,255,0.25); }
.lib-card-media { position: relative; display: block; width: 100%; height: 0; padding-top: 100%; background: var(--surface-3); overflow: hidden; }
.lib-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
.lib-card-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.75); }
.lib-card-pb, .lib-card-new {
  position: absolute;
  top: 7px;
  left: 7px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  color: #0b0e16;
  background: linear-gradient(90deg, #ffe066, #ff9d3d);
  box-shadow: 0 2px 10px rgba(255,157,61,0.55);
}
.lib-card-new { font-family: var(--font-display); background: linear-gradient(90deg, #ff2e9e, #ff7bc4); color: #fff; box-shadow: 0 2px 10px rgba(255,46,158,0.5); }
.lib-card-info { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; min-width: 0; }
.lib-card-line1 { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.lib-card-name { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lib-card-size {
  flex: none;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(0,229,255,0.55);
  line-height: 1;
}
.lib-card-size small { font-size: 10px; margin-left: 1px; color: var(--muted); text-shadow: none; }
.lib-card-size-none { color: var(--muted); text-shadow: none; font-size: 14px; }
.lib-card-line2 { font-size: 11px; color: var(--muted); }
.lib-card-skunk { border-color: var(--border); opacity: 0.85; }
.lib-card-media-skunk {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #8993a8;
  background: repeating-linear-gradient(135deg, #141925 0 10px, #171d2b 10px 20px);
}
.lib-skunk-label { font-family: var(--font-display); font-weight: 900; font-size: 15px; letter-spacing: 0.1em; }
.lib-none { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 13px; padding: 24px 0; }
.lib-empty { text-align: center; padding: 40px 16px; }
.lib-empty-icon { color: var(--accent); margin-bottom: 10px; filter: drop-shadow(0 0 10px rgba(0,229,255,0.6)); }
.lib-empty-title { font-weight: 800; font-size: 16px; margin-bottom: 16px; }
.lib-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 12px 0 8px;
  margin-bottom: 12px;
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

/* --- 図鑑 --- */
.zk-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.zk-progress-num { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: #fff; text-shadow: 0 0 12px rgba(0,229,255,0.45); white-space: nowrap; }
.zk-progress-num small { font-size: 11px; color: var(--muted); text-shadow: none; }
.zk-progress-bar { flex: 1; height: 8px; border-radius: 99px; background: rgba(255,255,255,0.07); overflow: hidden; }
.zk-progress-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px rgba(0,229,255,0.6); }
.zk-progress-pct { font-family: var(--font-display); font-size: 13px; color: var(--accent); }
.species-tile { font-family: inherit; color: var(--text); cursor: pointer; min-width: 0; }
.species-tile .name, .species-tile .count { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.species-tile .count { font-family: var(--font-display); letter-spacing: 0.02em; }
.emblem-silhouette { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: rgba(255,255,255,0.18); }
.zk-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.zk-hero-emblem { width: 84px !important; height: 84px !important; flex: none; border-radius: 20px; overflow: hidden; box-shadow: 0 0 22px rgba(0,229,255,0.3); position: relative; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.zk-hero.undiscovered .zk-hero-emblem { box-shadow: none; }
.zk-hero-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zk-hero-cat { font-size: 11px; color: var(--accent); font-weight: 700; }
.zk-hero-name { font-size: 26px; font-weight: 900; color: #fff; text-shadow: 0 0 14px rgba(0,229,255,0.35); }
.zk-hero-latin { font-size: 12px; color: var(--muted); font-style: italic; }
.zk-actions { display: flex; gap: 8px; margin-bottom: 18px; }
.zk-actions .btn { flex: 1; }
.zk-undiscovered-note { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--muted); font-size: 13px; }
.zk-info { padding: 6px 14px; }
.zk-info-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.zk-info-row:last-child { border-bottom: none; }
.zk-info-row .k { flex: none; width: 76px; color: var(--muted); }
.zk-info-row .v { flex: 1; min-width: 0; line-height: 1.5; }
.zk-trivia { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.zk-trivia-item {
  padding: 11px 14px;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(0,229,255,0.09), rgba(255,46,126,0.05));
  border: 1px solid rgba(0,229,255,0.2);
  font-size: 13px;
  line-height: 1.6;
}
.skunk-modal { width: min(340px, 90vw); }
.skunk-modal-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; margin-bottom: 8px; color: #c3cad8; }
.skunk-modal-actions { display: flex; gap: 8px; margin-top: 14px; }
.skunk-modal-actions .btn { flex: 1; }

/* --- 記録画面: 3ステップ --- */
.rec-edit-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255,209,102,0.1); border: 1px solid rgba(255,209,102,0.35); font-size: 13px; font-weight: 700; }
.rec-sec { padding: 16px; }
.rec-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rec-step-num {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  color: #03141a;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(0,229,255,0.6);
}
.rec-step-title { font-size: 16px; font-weight: 800; white-space: nowrap; }
.photo-drop {
  min-height: 200px;
  margin-top: 0;
  flex-direction: column;
  gap: 10px;
  border-color: rgba(0,229,255,0.4);
  background: radial-gradient(circle at 50% 40%, rgba(0,229,255,0.12), transparent 70%), var(--surface-3);
  cursor: pointer;
  color: var(--accent);
}
.photo-drop-icon { filter: drop-shadow(0 0 10px rgba(0,229,255,0.7)); }
.photo-drop-text { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
.photo-source-buttons { margin-top: 10px; }
.rec-extra-photos-block { margin-top: 10px; }
.rec-ai-status { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.ai-result { margin-bottom: 8px; }
.rec-size-row { margin-top: 12px; }
.rec-num-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rec-num-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.rec-num-box {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 56px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
}
.rec-num-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,229,255,0.15); }
.rec-num-box input {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: var(--font-display);
  font-size: 26px !important;
  font-weight: 900;
  color: #fff;
}
.rec-num-unit { color: var(--muted); font-size: 13px; flex: none; }
#add-extra-species-btn { margin-top: 10px; width: 100%; }
.rec-ai-inline { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.rec-collapse-block + .rec-collapse-block { margin-top: 8px; }
.rec-collapse-key { flex: none; width: 34px; font-size: 11px; color: var(--muted); }
.rec-inline-hint { font-size: 12px; color: var(--muted); margin: 6px 0; }
.rec-status { font-size: 12px; color: var(--muted); margin-top: 6px; }
#record-map { margin-top: 6px; }
.rec-more { padding: 0; }
.rec-more-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.rec-more-summary::-webkit-details-marker { display: none; }
.rec-more-summary span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rec-more-opt { font-size: 11px; color: var(--muted); font-weight: 500; }
.rec-more[open] .rec-more-summary { border-bottom: 1px solid var(--border); }
.rec-more-body { padding: 14px 16px 16px; }
.rec-save-btn { width: 100%; height: 56px; font-size: 16px; box-shadow: 0 0 24px rgba(0,229,255,0.35); }
.rec-save-btn.rec-save-skunk { background: linear-gradient(135deg, #8993a8, #c3cad8); color: #0b0e16; box-shadow: none; }

/* --- トレカ: ランク廃止。自己ベスト=金、初めての魚種=ピンク、通常=シアンのネオン縁 --- */
.trading-card { --frame-a: #00e5ff; --frame-b: #0b4a57; --glow: rgba(0,229,255,0.4); }
.trading-card.tier-new { --frame-a: #ff2e9e; --frame-b: #5a0e6b; --glow: rgba(255,46,158,0.5); }
.trading-card.tier-pb { --frame-a: #ffd166; --frame-b: #8a5a10; --glow: rgba(255,209,102,0.55); animation: tc-pulse 2.4s ease-in-out infinite; }
.tc-backdrop-glow { background: radial-gradient(circle, rgba(0,229,255,0.35) 0%, rgba(0,229,255,0) 68%); }
.tc-backdrop-glow.tier-new { background: radial-gradient(circle, rgba(255,46,158,0.45) 0%, rgba(255,46,158,0) 68%); animation: tc-glow-breathe 3s ease-in-out infinite; }
.tc-backdrop-glow.tier-pb { inset: -26% -32%; background: radial-gradient(circle, rgba(255,209,102,0.55) 0%, rgba(255,157,61,0.2) 45%, rgba(255,157,61,0) 70%); animation: tc-glow-breathe 2.2s ease-in-out infinite; }
.tc-info-block { display: flex; align-items: center; gap: 10px; }
.tc-info-block .tc-name-row { flex: 1; min-width: 0; }
.tc-size-hero {
  flex: none;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 14px var(--glow), 0 0 4px var(--frame-a);
}
.tc-size-hero small { font-size: 11px; color: #a3adc2; margin-left: 2px; text-shadow: none; }
.tc-rarity-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- 分析: 場所の絞り込み・釣果率 --- */
.an-place {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--accent);
}
.an-place select { flex: 1; min-width: 0; border: none !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; color: var(--text); }
.an-head-title small { font-size: 13px; color: var(--accent); font-weight: 700; }
.an-hitrate {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "k bar v" "n n n";
  align-items: center;
  gap: 4px 10px;
  padding: 12px 14px;
  margin: -8px 0 18px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.an-hitrate-k { grid-area: k; font-size: 12px; color: var(--muted); white-space: nowrap; }
.an-hitrate-bar { grid-area: bar; height: 10px; border-radius: 4px; background: rgba(137,147,168,0.25); overflow: hidden; }
.an-hitrate-bar span { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 8px rgba(0,229,255,0.6); }
.an-hitrate-v { grid-area: v; font-family: var(--font-display); font-size: 20px; font-weight: 900; color: var(--accent); }
.an-hitrate-n { grid-area: n; font-size: 11px; color: var(--muted); white-space: nowrap; }
.an-bar-row { grid-template-areas: "label track val" "size size size"; }
.an-bar-size { padding-left: 100px; }

/* --- カレンダー: ボウズの日 --- */
.cal-skunk-mark { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 900; color: #8993a8; line-height: 1; }

/* --- 地図の釣り場ポップアップ --- */
.spot-level-count { font-size: 12px; color: var(--muted); margin: 2px 0 6px; }

/* 画面ごとの入れ物(app.jsのswitchScreen)。レイアウト上は存在しないものとして扱う */
.screen-inner { display: contents; }

/* モーダルの中身が画面より高いとき(小さいスマホ・コンディション詳細を開いたとき等)、
   中央寄せのせいで上端が画面外に切れて「写真が見切れる・閉じるボタンに届かない」状態に
   なっていた。上下に伸縮する余白を置き、収まるときは中央・収まらないときは上から並べて
   スクロールできるようにする。 */
.card-modal-backdrop { justify-content: flex-start; padding-top: calc(22px + var(--safe-top)); padding-bottom: calc(22px + var(--safe-bottom)); }
.card-modal-backdrop::before, .card-modal-backdrop::after { content: ""; flex: 1 1 0; min-height: 0; }
.card-modal-backdrop > * { flex-shrink: 0; }
.tc-close-x {
  position: fixed;
  top: calc(12px + var(--safe-top));
  right: 12px;
  z-index: 1070;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(10,13,18,0.8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tc-close-x svg { width: 18px; height: 18px; }

/* 記録画面 手順3: 取得したデータの一覧(同じ大きさのタイルで1行ずつ) */
.rec-cond-board-wrap { flex-direction: column; gap: 8px; padding: 10px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 12px; }
.rec-cond-board-head { display: flex; align-items: center; gap: 8px; }
.rec-cond-board-head .rec-collapse-key { width: auto; }
.rec-cond-board-status { font-size: 11px !important; color: var(--muted) !important; }
.rec-cond-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rec-cond-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid rgba(0,229,255,0.14);
}
.rec-cond-tile.empty { border-color: var(--border); opacity: 0.6; }
.rec-cond-k { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.rec-cond-v {
  display: flex;
  align-items: baseline;
  gap: 2px;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec-cond-v small { font-size: 9.5px; color: var(--muted); font-family: inherit; }
.rec-cond-v em { font-style: normal; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; margin-right: 3px; }
.rec-cond-v i { font-style: normal; font-size: 10px; color: var(--gold); margin-left: 3px; }
.rec-cond-v svg { align-self: center; margin-right: 3px; flex: none; }
.rec-cond-tile:nth-child(6) .rec-cond-v { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; font-size: 13px; }
.rec-cond-tile:first-child .rec-cond-v, .rec-cond-tile .rec-cond-v:not(:has(small)) { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; font-size: 13px; }

/* =====================================================================
   潮・天気タブ(js/screens/conditions.js)
   ===================================================================== */
.cd-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cd-loc {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--accent);
}
.cd-loc select { flex: 1; min-width: 0; border: none !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; color: var(--text); }
.cd-date { display: flex; align-items: center; gap: 6px; }
.cd-date-btn, .cd-today-btn {
  flex: none; height: 44px; min-width: 44px; border-radius: 12px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit;
}
.cd-today-btn { padding: 0 12px; font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.cd-date-main {
  position: relative; flex: 1; min-width: 0; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,229,255,0.16), rgba(255,46,126,0.08)); border: 1px solid rgba(0,229,255,0.35);
  font-family: var(--font-display); font-size: 17px; font-weight: 800; color: #fff; white-space: nowrap; cursor: pointer;
}
/* 日付欄全体をタップすると端末の日付ピッカーが開くよう、透明な入力欄を重ねる */
.cd-date-main input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: none !important; padding: 0 !important; }
.cd-loading, .cd-empty, .cd-hint { padding: 18px 4px; color: var(--muted); font-size: 13px; text-align: center; }
.cd-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cd-warn {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 12px; border-radius: 12px;
  background: rgba(255,84,112,0.12); border: 1px solid rgba(255,84,112,0.45); color: #ff8fa2; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden;
}
.cd-card { padding: 14px 12px 10px; }
.cd-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding: 0 2px; }
.cd-card-title { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; white-space: nowrap; color: #fff; }
.cd-card-title svg { color: var(--accent); }
.cd-card-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cd-hero { border-color: rgba(0,229,255,0.35); box-shadow: 0 0 26px rgba(0,229,255,0.15), 0 10px 26px rgba(0,0,0,0.4); }
.cd-best { display: flex; align-items: baseline; gap: 10px; padding: 0 2px 4px; }
.cd-best-time { font-family: var(--font-display); font-size: 30px; font-weight: 900; color: #fff; text-shadow: 0 0 16px rgba(0,229,255,0.6); white-space: nowrap; }
.cd-best-time small { font-size: 13px; color: var(--muted); text-shadow: none; margin: 0 2px; }
.cd-best-why { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-chart { position: relative; }
.cd-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cd-axis { font-size: 9px; fill: #6d7890; font-family: var(--font-display); }
.cd-base { stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.cd-sel-line { stroke: var(--accent-2); stroke-width: 1.5; stroke-dasharray: 3 3; }
.cd-val { font-size: 11px; font-weight: 800; fill: #fff; font-family: var(--font-display); paint-order: stroke; stroke: #0b0e16; stroke-width: 3px; }
.cd-val-dim { font-size: 9.5px; fill: #a3adc2; font-family: var(--font-display); }
.cd-bar { fill: var(--accent); }
.cd-bar.best { fill: #ffd166; filter: drop-shadow(0 0 4px rgba(255,209,102,0.8)); }
.cd-hit { cursor: pointer; }
.cd-nodata { padding: 16px 0; text-align: center; color: var(--muted); font-size: 12px; }
.cd-species { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.cd-sp {
  display: grid; grid-template-columns: 10px minmax(0, 76px) 1fr 38px 40px; align-items: center; gap: 8px;
  padding: 6px 4px; border: none; background: transparent; color: var(--text); font-family: inherit; font-size: 13px; cursor: pointer; text-align: left;
}
.cd-sp-dot { width: 9px; height: 9px; border-radius: 50%; }
.cd-sp-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-sp-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
.cd-sp-bar span { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.cd-sp-pct { font-family: var(--font-display); font-weight: 800; text-align: right; font-size: 12px; }
.cd-sp-best { font-size: 11px; color: #ffd166; text-align: right; white-space: nowrap; }
.cd-tiles { margin-bottom: 4px; }
.rec-cond-tile.hot { border-color: rgba(255,209,102,0.6); box-shadow: 0 0 12px rgba(255,209,102,0.25); }
.rec-cond-tile.hot .rec-cond-v { color: #ffd166; }
.rec-cond-v.is-text { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; font-size: 13px; }
.cd-hour-hint { font-size: 10.5px; color: var(--muted); text-align: right; margin-top: 4px; white-space: nowrap; }
.cd-extremes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; padding: 0 2px; }
.cd-extremes span { font-size: 11px; font-family: var(--font-display); padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.cd-extremes .hi { background: rgba(79,209,197,0.15); color: #4fd1c5; }
.cd-extremes .lo { background: rgba(137,147,168,0.18); color: #c3cad8; }
.cd-row + .cd-row { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.cd-row-head { display: flex; align-items: baseline; gap: 6px; padding: 0 2px; font-size: 12px; font-weight: 700; }
.cd-row-unit { font-size: 10px; color: var(--muted); font-weight: 500; }
.cd-arrows { position: relative; height: 16px; }
.cd-arrow { position: absolute; top: 0; font-size: 12px; line-height: 16px; color: #7fe8e7; }
.cd-gps-btn { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 99px; border: 1px solid rgba(0,229,255,0.4); background: rgba(0,229,255,0.1); color: var(--accent); font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap; }
.cd-empty .btn { margin-top: 6px; }

/* 写真枠: aspect-ratio非対応の端末でも正方形が潰れないよう、padding-topで高さを確保している */
.lib-card-media > .lib-card-noimg { position: absolute; inset: 0; }
.lib-card-media-skunk > * { position: relative; }
.lib-card-media-skunk { height: auto; padding-top: 0; aspect-ratio: auto; min-height: 0; }
.lib-card-media-skunk::before { content: ""; display: block; padding-top: 100%; }
.lib-card-media-skunk { display: grid; place-items: center; }
.lib-card-media-skunk::before { grid-area: 1 / 1; }
.lib-card-media-skunk > svg, .lib-card-media-skunk > .lib-skunk-label { grid-area: 1 / 1; }
.lib-card-media-skunk > svg { transform: translateY(-12px); }
.lib-card-media-skunk > .lib-skunk-label { transform: translateY(16px); }
.lib-card-pb, .lib-card-new { z-index: 2; }
.lib-card-media .thumb-multi-badge { z-index: 2; }

/* 記録一覧の期間切り替え(累計 / 年) */
.lib-period { display: flex; gap: 6px; overflow-x: auto; margin: 0 -14px 10px; padding: 0 14px 2px; scrollbar-width: none; }
.lib-period::-webkit-scrollbar { display: none; }
.lib-period-btn {
  flex: none; height: 32px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 700; font-family: var(--font-display); cursor: pointer; white-space: nowrap;
}
.lib-period-btn.active { color: #03141a; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(0,229,255,0.45); }
.lib-stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lib-stats-5 .lib-stat-v { font-size: 18px; }

/* 潮・天気: 釣行判断カード(上部) */
.cd-go { padding-top: 12px; }
.cd-verdict { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; margin-bottom: 10px; }
.cd-verdict-label { font-size: 17px; font-weight: 900; white-space: nowrap; }
.cd-verdict-why { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; opacity: 0.9; }
.cd-verdict.ok { background: rgba(0,229,255,0.12); border: 1px solid rgba(0,229,255,0.45); color: var(--accent); box-shadow: 0 0 16px rgba(0,229,255,0.18); }
.cd-verdict.warn { background: rgba(255,209,102,0.12); border: 1px solid rgba(255,209,102,0.5); color: #ffd166; }
.cd-verdict.ng { background: rgba(255,84,112,0.14); border: 1px solid rgba(255,84,112,0.55); color: #ff8fa2; }
.cd-go-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cd-go-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 9px; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--border); }
.cd-go-item .k { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cd-go-item .v { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-go-item .v.is-text { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; font-size: 14px; }
.cd-go-item .v small { font-size: 9.5px; color: var(--muted); margin-left: 1px; font-family: inherit; }
.cd-go-item .v em { font-style: normal; font-size: 11px; margin-right: 3px; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; }
.cd-go-item.bad { border-color: rgba(255,84,112,0.6); }
.cd-go-item.bad .v { color: #ff8fa2; }
.cd-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.cd-strip-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0; border-radius: 8px; background: rgba(255,255,255,0.03); font-size: 11px; white-space: nowrap; }
.cd-strip-cell .h { color: var(--muted); font-size: 10px; }
.cd-strip-cell .w { font-weight: 800; font-size: 13px; }
.cd-strip-cell .t { font-family: var(--font-display); font-size: 11px; }
.cd-strip-cell .wd { font-family: var(--font-display); font-size: 10px; color: #7fe8e7; }
.cd-strip-cell.rain { background: rgba(111,168,255,0.14); }
.cd-strip-cell.rain .w { color: #6fa8ff; }
.cd-go-note { margin-top: 8px; font-size: 12px; color: #ff8fa2; white-space: nowrap; }
.cd-go-foot { margin-top: 8px; font-size: 11px; color: var(--muted); text-align: right; white-space: nowrap; }
.cd-sp { grid-template-columns: minmax(0, 84px) 1fr 38px 40px; }

/* ---- 同意画面・同意チェック ---- */
.consent-gate { z-index: 10000; }
.consent-card { max-width: 420px; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.consent-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; }
.consent-points { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.6; color: var(--text); }
.consent-points strong { color: var(--accent, #00e5ff); }
.consent-links { display: flex; gap: 14px; font-size: 13px; }
.consent-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; cursor: pointer; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 12px; }
.consent-check input { width: 20px; height: 20px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--accent, #00e5ff); }
.consent-check span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.consent-check em { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px; background: rgba(255, 90, 120, 0.18); color: #ff8aa0; }
.consent-check em.opt { background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.consent-check small { flex-basis: 100%; font-size: 11px; color: var(--muted); line-height: 1.5; }
.consent-check.shake { animation: consentShake 0.4s; border-color: #ff8aa0; }
@keyframes consentShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.consent-logout { font-size: 12px; }
.consent-status { font-size: 12px; color: var(--muted); min-height: 1.2em; text-align: center; }
.auth-consent { display: grid; gap: 8px; margin-top: 14px; }
.consent-mypage { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-strong); }
.consent-meta { margin-top: 6px; font-size: 11px; color: var(--muted); }

/* ---- 広告枠(AdSense)。未設定・有料プランでは空のまま高さ0 ---- */
.ad-host:not(.is-on) { display: none; }
.ad-host.is-on { margin: 18px 0 8px; padding: 8px; border: 1px solid var(--border-strong); border-radius: 12px; min-height: 60px; }
.ad-label { font-size: 10px; color: var(--muted); margin-bottom: 4px; }

/* ---- 匹数(複数の魚) ---- */
.rec-size-row-3 { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 8px; }
.rec-count { display: flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; background: var(--surface-2, rgba(255,255,255,0.04)); height: 48px; }
.rec-count-btn { flex: 0 0 34px; border: 0; background: transparent; color: var(--accent, #00e5ff); font-size: 20px; font-weight: 700; cursor: pointer; }
.rec-count-btn:active { background: rgba(0, 229, 255, 0.12); }
.rec-count-input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0 !important; background: transparent !important; text-align: center; font-size: 18px; font-weight: 800; padding: 0 !important; color: var(--text); -moz-appearance: textfield; }
.rec-count-input::-webkit-outer-spin-button, .rec-count-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rec-fish-total { margin: 10px 0 4px; font-size: 13px; color: var(--muted); text-align: center; }
.rec-fish-total strong { color: var(--accent, #00e5ff); font-size: 15px; }
.rec-extra-row { display: grid; gap: 4px; }
.rec-extra-row .rec-size-row { margin-top: 6px; }
.rec-size-row-3 .rec-num-box { height: 52px; padding: 0 10px; }
.rec-size-row-3 .rec-num-box input { font-size: 22px !important; }
.rec-size-row-3 .rec-count { height: 52px; border-radius: 14px; background: var(--surface-3); }
.lib-card-count { position: absolute; right: 6px; bottom: 6px; padding: 2px 8px; border-radius: 99px; background: rgba(0, 0, 0, 0.7); color: #fff; font-weight: 800; font-size: 13px; font-family: var(--font-num, inherit); }
.lib-card-size em { font-style: normal; font-size: 10px; color: var(--muted); margin-right: 2px; }
.tc-count { display: inline-block; margin-right: 8px; font-size: 0.55em; color: var(--accent, #00e5ff); }

/* ---- 潮・天気(round36): 潮位を上部に・3時間予報アイコン・月齢・酸素・週間天気 ---- */
.cd-verdict { margin-bottom: 6px; }
.cd-verdict-sum { font-size: 12px; color: var(--text); opacity: 0.85; margin: 0 2px 10px; line-height: 1.5; }
.cd-tide-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 2px; }
.cd-tide-name { font-size: 18px; font-weight: 900; letter-spacing: 0.08em; padding: 4px 14px; border-radius: 99px; background: rgba(79,209,197,0.14); color: #4fd1c5; border: 1px solid rgba(79,209,197,0.5); }
.cd-tide-name.t-oo { background: rgba(0,229,255,0.16); color: var(--accent); border-color: rgba(0,229,255,0.6); box-shadow: 0 0 14px rgba(0,229,255,0.25); }
.cd-tide-name.t-ko, .cd-tide-name.t-naga { background: rgba(137,147,168,0.16); color: #c3cad8; border-color: rgba(137,147,168,0.45); }
.cd-tide-name.t-waka { background: rgba(180,140,255,0.14); color: #c9b0ff; border-color: rgba(180,140,255,0.5); }
.cd-moon { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.cd-moon-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cd-moon-t b { font-size: 13px; color: #ffe9a8; font-family: var(--font-display); }
.cd-moon-t small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cd-tide-svg .cd-night { fill: rgba(40, 50, 90, 0.35); }
.cd-tide-svg .cd-hi-dot { fill: #4fd1c5; stroke: #0b0e16; stroke-width: 1.5; }
.cd-tide-svg .cd-lo-dot { fill: #8e98b0; stroke: #0b0e16; stroke-width: 1.5; }
.cd-tide-svg .cd-ext-t { font-size: 9.5px; font-weight: 700; }
.cd-tide-svg .cd-ext-t.hi { fill: #4fd1c5; }
.cd-tide-svg .cd-ext-t.lo { fill: #c3cad8; }
.cd-tide-svg .cd-ext-v { font-size: 10px; font-weight: 800; fill: #fff; font-family: var(--font-display); }
.cd-tide-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); margin-top: -2px; white-space: nowrap; }
.cd-tide-foot span { overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 3px; }
.cd-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; margin-top: 12px; }
.cd-strip-cell { border: 1px solid transparent; color: var(--text); cursor: pointer; font: inherit; padding: 6px 0 5px; gap: 2px; }
.cd-strip-cell.sel { border-color: rgba(0,229,255,0.6); background: rgba(0,229,255,0.08); }
.cd-strip-cell .w { height: 26px; display: flex; align-items: center; }
.cd-strip-cell .t { font-size: 12px; font-weight: 800; }
.cd-strip-cell .p { font-size: 9.5px; color: #6fa8ff; font-family: var(--font-display); }
.cd-strip-cell .wd { display: inline-flex; align-items: center; gap: 1px; }
.cd-strip-cell .wd i { font-style: normal; display: inline-block; font-size: 9px; }
.cd-wx-none { color: var(--muted); }
.cd-o2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(79,209,197,0.06); border: 1px solid var(--border); }
.cd-o2 .k { font-size: 11px; color: var(--muted); }
.cd-o2 .v { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff; }
.cd-o2 .v small { font-size: 10px; color: var(--muted); margin-left: 2px; }
.cd-o2 .lv { font-size: 11px; font-weight: 800; color: #4fd1c5; }
.cd-o2.warn .lv { color: #ffd166; }
.cd-o2 .note { flex-basis: 100%; font-size: 10.5px; color: var(--muted); }
.cd-week { display: grid; grid-template-columns: repeat(8, minmax(62px, 1fr)); gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px 2px; }
.cd-week::-webkit-scrollbar { display: none; }
.cd-wday { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid transparent; color: var(--text); font: inherit; cursor: pointer; white-space: nowrap; }
.cd-wday.sel { border-color: rgba(0,229,255,0.6); background: rgba(0,229,255,0.08); }
.cd-wday .d { font-size: 12px; font-weight: 800; font-family: var(--font-display); }
.cd-wday .d small { font-size: 10px; margin-left: 2px; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; }
.cd-wday.sun .d small { color: #ff8fa2; }
.cd-wday.sat .d small { color: #6fa8ff; }
.cd-wday .t { font-size: 11px; color: #6fa8ff; font-family: var(--font-display); }
.cd-wday .t b { color: #ff9d3d; font-size: 13px; }
.cd-wday .pp { font-size: 10.5px; color: #6fa8ff; }
.cd-wday .wd, .cd-wday .wv { font-size: 10.5px; font-family: var(--font-display); color: #7fe8e7; }
.cd-wday .bad { color: #ff8fa2; font-weight: 800; }
.cd-wday .tn { font-size: 10.5px; color: #4fd1c5; font-weight: 700; }
.cd-wday .mo { height: 14px; }
.cd-week-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 10px; color: var(--muted); }

/* ---- 規約・ポリシー: 全画面シート(round36) ---- */
.legal-sheet { position: fixed; inset: 0; z-index: 10050; display: flex; flex-direction: column; background: var(--bg, #0b0e16); animation: legalIn 0.14s ease-out; }
.legal-sheet.closing { opacity: 0; transition: opacity 0.14s; }
@keyframes legalIn { from { opacity: 0; } to { opacity: 1; } }
body.legal-open { overflow: hidden; }
.legal-sheet-head { flex: none; display: flex; align-items: center; gap: 8px; padding: calc(10px + var(--safe-top, 0px)) 12px 10px; border-bottom: 1px solid var(--border); background: var(--surface-1, #10141f); }
.legal-sheet-back { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border-strong); background: transparent; color: var(--text); display: flex; align-items: center; justify-content: center; flex: none; }
.legal-sheet-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legal-sheet-title svg { color: var(--accent); }
.legal-sheet-date { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.legal-sheet-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px calc(28px + var(--safe-bottom, 0px)); }
.legal-summary { border: 1px solid rgba(0,229,255,0.35); background: rgba(0,229,255,0.06); border-radius: 14px; padding: 12px 14px; }
.legal-summary-t { font-size: 12px; font-weight: 800; color: var(--accent); margin-bottom: 4px; }
.legal-summary ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--text); }
.legal-toc { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 12px -16px 0; padding: 0 16px 2px; }
.legal-toc::-webkit-scrollbar { display: none; }
.legal-toc button { flex: none; font-size: 11.5px; padding: 6px 10px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface-3); color: var(--text); white-space: nowrap; }
.legal-sheet .legal-modal-body { padding: 4px 0 0; overflow: visible; font-size: 13px; }
.legal-modal-body a { color: var(--accent); }
.legal-loading { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 40px 0; color: var(--muted); font-size: 13px; }
.legal-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0,229,255,0.25); border-top-color: var(--accent); animation: legalSpin 0.7s linear infinite; }
@keyframes legalSpin { to { transform: rotate(360deg); } }

/* ---- マイページ(round36): グループ化した1行リスト ---- */
.my-profile { padding: 14px; }
.my-profile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.my-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(0,229,255,0.25), rgba(255,84,160,0.25)); color: #fff; flex: none; }
.my-profile-t { display: flex; flex-direction: column; min-width: 0; }
.my-profile-t b { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-profile-t small { font-size: 11.5px; color: var(--muted); }
.my-profile .my-stats { margin-bottom: 0; }
.my-group-label { margin: 20px 6px 6px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; }
.my-group { border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2, rgba(255,255,255,0.03)); overflow: hidden; }
.my-group > * + * { border-top: 1px solid var(--border); }
.my-row { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.my-row:active { background: rgba(255,255,255,0.05); }
.my-row:disabled { opacity: 0.5; }
.my-row-static { cursor: default; }
.my-row-ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(0,229,255,0.1); color: var(--accent); flex: none; }
.my-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.my-row-t small { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.my-row-hint { font-size: 12px; color: var(--muted); white-space: nowrap; }
.my-chev { color: var(--muted); flex: none; transition: transform 0.15s; }
.my-fold.open > .my-row .my-chev { transform: rotate(90deg); }
.my-fold-body { padding: 4px 14px 14px 56px; }
.my-fold-note { font-size: 12px; color: var(--muted); margin-bottom: 8px; line-height: 1.6; }
.my-fold-status { font-size: 12px; color: var(--muted); margin-top: 6px; min-height: 1.2em; }
.my-row.danger { color: #ff8fa2; }
.my-row.danger .my-row-ic { background: rgba(255,84,112,0.12); color: #ff8fa2; }
.my-row-switch { cursor: pointer; }
.my-group-foot { margin: 6px 8px 0; font-size: 10.5px; color: var(--muted); }
.my-version { text-align: center; margin: 22px 0 8px; font-size: 11px; color: var(--muted); }
.rec-count-input { font-family: var(--font-display) !important; font-size: 22px !important; font-weight: 900 !important; color: #fff !important; }
.rec-num-box input::-webkit-outer-spin-button, .rec-num-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rec-num-box input[type="number"] { -moz-appearance: textfield; }
.rec-extra-row { padding: 11px; }
.rec-extra-row .rec-extra-species { width: calc(100% - 36px); }
.rec-skunk-end { margin-top: 10px; align-items: end; }
.rec-skunk-end-note { font-size: 12px; color: var(--muted); padding-bottom: 14px; }
/* ---- ライブラリ: ボウズの表示切り替え(round37) ---- */
.lib-search-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 14px; }
.lib-search-row .lib-search { flex: 1; min-width: 0; margin: 0; }
.lib-skunk-filter { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-3); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.lib-skunk-filter.active { color: #0b0e16; background: #93a0bb; border-color: #93a0bb; }
.lib-stat-btn { font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--border); }
.lib-stat-btn.active { border-color: #93a0bb; background: rgba(147,160,187,0.16); }
.lib-filter-note { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 2px 0; font-size: 12px; color: var(--muted); }
.skunk-modal-actions { flex-wrap: wrap; }
/* ---- 写真の再読み込みボタン(round38) ---- */
.img-retry { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 99px; background: rgba(10,14,22,0.85); border: 1px solid rgba(0,229,255,0.5); color: var(--accent); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.img-retry.spinning svg { animation: legalSpin 0.8s linear infinite; }
/* (.tc-photo は absolute で枠いっぱいに広げているので、ここでは位置指定を変えない) */
.cd-wday .pp { font-family: var(--font-display); }
.header-my-btn.active { color: var(--accent); border-color: rgba(0,229,255,0.6); }

/* ---- ヒットした仕掛け(round38) ---- */
.rec-gear .rec-step-head { display: flex; align-items: center; gap: 10px; }
.rec-gear .rec-more-opt { margin-left: auto; }
.gear-recent { margin-bottom: 10px; }
.gear-recent-k { display: block; font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.gear-recent-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 0 2px 2px; }
.gear-recent-list::-webkit-scrollbar { display: none; }
.gear-recent-chip { flex: none; padding: 7px 12px; border-radius: 12px; border: 1px dashed rgba(0,229,255,0.55); background: rgba(0,229,255,0.06); color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.gear-row { margin-bottom: 4px; }
.gear-k { font-size: 11.5px; color: var(--muted); margin: 12px 0 6px; display: block; }
.gear-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gear-chip { padding: 7px 11px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface-3); color: var(--text); font: inherit; font-size: 12.5px; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.gear-chip.on { border-color: var(--accent); background: rgba(0,229,255,0.16); color: #fff; box-shadow: 0 0 0 1px rgba(0,229,255,0.35) inset; }
.gear-method { flex: 1; justify-content: center; font-size: 14px; font-weight: 800; padding: 10px 0; border-radius: 12px; }
.gear-row .gear-chips { flex-wrap: nowrap; }
.gear-sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); flex: none; }
.gear-weight .gear-chip { font-family: var(--font-display); }
.gear-num { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface-3); height: 33px; }
.gear-num input { width: 44px; border: 0 !important; background: transparent !important; padding: 0 !important; font-size: 13px; text-align: right; color: var(--text); box-shadow: none !important; }
.gear-num span { font-size: 12px; color: var(--muted); }
.gear-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.gear-2 label { display: flex; flex-direction: column; min-width: 0; }
.gear-line-toggle { margin-top: 12px; background: transparent; border: 0; color: var(--muted); font: inherit; font-size: 12px; padding: 4px 0; cursor: pointer; }
.gear-meter { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.gear-meter-bar { flex: 0 0 70px; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.gear-meter-bar span { display: block; height: 100%; background: linear-gradient(90deg,#00e5ff,#ff2e7e); }
.gear-meter-t { font-size: 11px; color: var(--muted); }
.gear-hint { margin-top: 8px; font-size: 12px; color: var(--muted); }
/* ---- 分析: タックル(round38) ---- */
.an-gear-rate { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 600; }
.an-gear-meter { height: 4px; border-radius: 99px; background: rgba(255,255,255,0.07); overflow: hidden; margin: -4px 2px 10px; }
.an-gear-meter span { display: block; height: 100%; background: linear-gradient(90deg,#00e5ff,#ff2e7e); }
.an-gear-card { padding: 14px; }
.an-gear-lead { font-size: 13px; line-height: 1.6; color: var(--muted); text-align: center; }
.an-gear-lead b { color: var(--text); }
.an-gear-sample { position: relative; margin: 12px 0 4px; filter: blur(1.2px); opacity: 0.55; pointer-events: none; }
.an-gear-sample-tag { position: absolute; right: 0; top: -6px; font-size: 10px; padding: 1px 6px; border-radius: 99px; background: rgba(255,255,255,0.12); color: var(--muted); filter: none; }
.an-gear-todo-title { margin: 12px 0 6px; font-size: 12px; color: var(--muted); font-weight: 700; }
.an-gear-todo { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; margin-top: 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-3); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.an-gear-todo-add { flex: none; font-size: 12px; font-weight: 700; color: var(--accent); }
.an-gear-top { border-color: rgba(0,229,255,0.45); box-shadow: 0 0 18px rgba(0,229,255,0.12); }
.an-bar-label .gear-sw { display: inline-block; vertical-align: -2px; margin-right: 5px; width: 11px; height: 11px; }
.cd-sp-gear { grid-column: 1 / -1; font-size: 11px; color: var(--accent); margin: -3px 0 2px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-gear-top .an-bar-row { grid-template-columns: 1fr 58px; grid-template-areas: "label label" "track val" "size size"; row-gap: 3px; }
.an-gear-top .an-bar-label { white-space: normal; overflow: visible; }
.an-gear-top .an-bar-size { grid-column: 1 / -1; justify-self: start; }
/* ---- round39: ライブラリのバッジ(NEWと自己ベストを並べて表示)・記録/図鑑の切り替え ---- */
.lib-card-badges { position: absolute; top: 7px; left: 7px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 14px); }
.lib-card-badges .lib-card-pb, .lib-card-badges .lib-card-new { position: static; }
.lib-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* アップデート履歴: 閉じるボタンを常に見える位置に */
.changelog-modal-close-btn { position: sticky; bottom: 0; box-shadow: 0 -10px 18px rgba(10,13,20,0.9); }
/* ---- 友だち紹介(round40) ---- */
.my-invite { margin-top: 12px; padding: 14px; border-color: rgba(0,229,255,0.4); background: linear-gradient(135deg, rgba(0,229,255,0.08), rgba(255,46,126,0.08)); }
.my-invite-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.my-invite-t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.my-invite-t b { font-size: 15px; color: var(--text); }
.my-invite-t small { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.my-invite-count { flex: none; font-size: 11px; color: var(--muted); text-align: right; }
.my-invite-count b { display: block; font-family: var(--font-display); font-size: 22px; color: var(--accent); }
.my-invite-btns { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }
.my-invite-btns .btn { margin: 0; white-space: nowrap; padding-left: 12px; padding-right: 12px; }
.btn-line { background: #06c755; color: #fff; border: 0; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; border-radius: 12px; }
.my-invite-url { margin-top: 8px; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-invite { max-width: 420px; margin: 20px auto -16px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(0,229,255,0.45); background: rgba(0,229,255,0.08); color: var(--accent); font-size: 13px; font-weight: 700; }
.cd-credit { margin: 14px 4px 6px; font-size: 10.5px; line-height: 1.6; color: var(--muted); }
.cd-credit a { color: var(--muted); text-decoration: underline; }
.tc-share-actions { display: flex; gap: 8px; width: min(420px, 100%); }
.tc-share-actions .btn { flex: 1; margin: 0; }
.gear-k-first { margin-top: 2px; }
/* ---- 写真に位置情報が無いときの案内(round43) ---- */
.rec-geo-tip { margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,209,102,0.5); background: rgba(255,209,102,0.08); }
.rec-geo-tip-head { display: flex; align-items: center; gap: 6px; color: #ffd166; font-size: 13.5px; }
.rec-geo-tip-sub { margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.rec-geo-tip-btns { display: flex; gap: 8px; margin-top: 10px; }
.rec-geo-tip-btns .btn { flex: 1; margin: 0; }
.rec-geo-tip-how { margin-top: 10px; font-size: 12px; color: var(--text); }
.rec-geo-tip-how summary { cursor: pointer; color: var(--accent); font-weight: 700; }
.rec-geo-tip-how ol { margin: 8px 0 0; padding-left: 18px; line-height: 1.7; color: var(--muted); }
.rec-geo-tip-off { margin-top: 8px; background: none; border: 0; color: var(--muted); font-size: 11px; text-decoration: underline; padding: 0; cursor: pointer; }
/* 写真が無い・読み込めないときの背景はグレーで統一(魚種ごとの色分けは廃止) */
:root { --noimg-bg: #3a414f; }
.lib-card-media { background: var(--noimg-bg); }
.tc-photo-placeholder { background: var(--noimg-bg) !important; }
/* ---- 分析: 絞り込みとタブ(round43) ---- */
.an-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 6px; margin-bottom: 10px; align-items: center; }
.an-filter { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 0 8px; height: 38px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-3); color: var(--muted); }
.an-filter.on { border-color: var(--accent); color: var(--accent); background: rgba(0,229,255,0.08); }
.an-filter select { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; color: var(--text); font-size: 12px; padding: 0 !important; height: 100%; box-shadow: none !important; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.an-filter-clear { height: 38px; padding: 0 10px; border-radius: 12px; border: 0; background: transparent; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; }
.an-tabs { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; margin: 16px 0 10px; border-radius: 14px; background: var(--surface, #111622); border: 1px solid var(--border); }
.an-tab { height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.an-tab.active { background: linear-gradient(135deg, #00e5ff, #7fe8e7); color: #03141a; }
.rec-place-hint { margin-top: 6px; font-size: 11.5px; color: #ffd166; line-height: 1.6; }
.rec-ai-inline[hidden] { display: none; }

/* ログイン前の「先にホーム画面に追加」案内(round46) */
.auth-install { max-width: 420px; margin: 20px auto -16px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(0,229,255,0.35); background: rgba(0,229,255,0.06); font-size: 13px; line-height: 1.6; }
.auth-install-title { display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--accent); margin-bottom: 4px; }
.auth-install p { margin: 0 0 4px; }
.auth-install-steps { margin: 4px 0 8px; padding-left: 1.3em; }
.auth-install small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.auth-install .btn { margin-top: 2px; }

/* LINE・Instagramなどのアプリ内ブラウザで開いたときの案内(round46) */
.inapp-guide { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6, 12, 20, 0.92); }
.inapp-card { width: 100%; max-width: 400px; padding: 20px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 14px; line-height: 1.6; display: flex; flex-direction: column; gap: 10px; }
.inapp-title { font-size: 17px; font-weight: 800; }
.inapp-lead { margin: 0; color: var(--muted); }
.inapp-steps { margin: 0; padding-left: 1.3em; }
.inapp-steps li { margin: 4px 0; }
.inapp-status { min-height: 1.4em; font-size: 12px; color: var(--accent); word-break: break-all; }
.inapp-skip { background: none; border: 0; color: var(--muted); font-size: 12px; text-decoration: underline; padding: 4px; align-self: center; }

/* 特徴から魚を探す(round47) */
.rec-finder-link { display: inline-flex; align-items: center; gap: 5px; margin: 8px 0 2px; padding: 4px 2px; background: none; border: 0; color: var(--accent); font-size: 12.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.spf-photo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.spf-photo img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-strong); }
.spf-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--muted); }
.spf-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font-size: 15px; padding: 12px 0; outline: none; }
.spf-k { margin: 16px 0 8px; font-size: 12px; font-weight: 800; color: var(--muted); }
.spf-k small { font-weight: 500; margin-left: 4px; }
.spf-shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.spf-shape { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 12px; line-height: 1.3; }
.spf-shape svg { width: 48px; height: 24px; fill: currentColor; color: var(--muted); margin-bottom: 2px; }
.spf-shape small { font-size: 10px; color: var(--muted); }
.spf-shape[aria-pressed="true"] { border-color: var(--accent); background: rgba(0,229,255,0.1); }
.spf-shape[aria-pressed="true"] svg { color: var(--accent); }
.spf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.spf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 12.5px; }
.spf-chip[aria-pressed="true"] { border-color: var(--accent); background: rgba(0,229,255,0.12); color: var(--accent); font-weight: 700; }
.spf-sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); flex: none; }
.spf-size { margin-top: 12px; font-size: 12px; color: var(--muted); }
.spf-count { margin: 18px 0 8px; font-size: 13px; font-weight: 800; color: var(--text); }
.spf-list { display: flex; flex-direction: column; gap: 8px; }
.spf-item { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.spf-item-main { flex: 1; min-width: 0; }
.spf-name { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.spf-warn { font-size: 10px; font-weight: 800; color: #fff; background: var(--coral); border-radius: 6px; padding: 1px 6px; }
.spf-local { font-size: 11px; color: var(--muted); margin-top: 2px; }
.spf-tip { font-size: 12.5px; line-height: 1.55; margin-top: 4px; }
.spf-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.spf-pick { flex: none; }
.spf-empty { padding: 20px 8px; text-align: center; font-size: 13px; line-height: 1.7; color: var(--muted); }

/* 特徴から探す: コンパクト化(round48) */
.spf-row { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.spf-row::-webkit-scrollbar { display: none; }
.spf-shapes.spf-row { display: flex; grid-template-columns: none; }
.spf-row .spf-shape { flex: none; width: 78px; padding: 6px 2px; font-size: 11px; }
.spf-row .spf-shape svg { width: 40px; height: 20px; }
.spf-row .spf-shape small { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 74px; }
.spf-row .spf-chip { flex: none; white-space: nowrap; }
.spf-k { margin: 12px 0 6px; }
.spf-photo img { width: 72px; height: 54px; }
.spf-photo { margin-bottom: 10px; }
.spf-count { margin: 14px 0 8px; font-size: 12.5px; }
.spf-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spf-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 68px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; }
.spf-tile.on { border-color: var(--accent); background: rgba(0,229,255,0.1); box-shadow: 0 0 0 1px var(--accent) inset; }
.spf-tile-name { display: flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 800; line-height: 1.3; }
.spf-tile-tip { font-size: 11px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spf-more, .spf-empty { grid-column: 1 / -1; }
.spf-more { padding: 10px; border-radius: 12px; border: 1px dashed var(--border-strong); background: transparent; color: var(--accent); font-size: 12.5px; font-weight: 700; }
.spf-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + var(--safe-bottom, 0px)); border-top: 1px solid var(--border-strong); background: var(--surface-2); }
.spf-foot[hidden] { display: none; }
.spf-foot-main { flex: 1; min-width: 0; }
.spf-foot .spf-tip { font-size: 12px; margin-top: 2px; }
.spf-foot .spf-meta { font-size: 10.5px; }
.spf-foot .spf-pick { flex: none; }
.spf-foot .spf-pick { width: auto; flex: none; padding: 11px 16px; white-space: nowrap; margin: 0; }