/*
 * 共通下部ナビ(.app-bottom-nav)と設定パネル(⚙️)の見た目をまとめたスタイルシート。
 * 全ページで共通のため、ここを直せば1箇所の変更で全ページに反映される。
 * 中身はjs/bottomNav.jsが生成する。
 * 色は各ページの:root(--navy/--paper/--line/--ink/--moonなど)に依存しているため、
 * このファイルより前に各ページの<style>で:rootが定義されている必要はない
 * (CSSカスタムプロパティは読み込み順に関係なくカスケードで解決される)。
 */

/* ---- ページ遷移(View Transitions) ----
 * 同一オリジンのページ移動を、瞬間的な白画面ではなくクロスフェードで繋ぐ。
 * これはCSSだけで完結し、対応していないブラウザでは今まで通りの遷移になる。
 * 遷移先のページにも同じ指定が必要なので、全ページが読むこのファイルに書いている。 */
@view-transition{
  navigation:auto;
}
/* 下部ナビは全ページで同じものなので、フェードさせず据え置きにする。
 * 名前を付けた要素は「同じもの」として扱われ、間の位置・見た目が補間される。 */
.app-bottom-nav{
  view-transition-name:app-bottom-nav;
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.18s;
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){
    animation:none !important;
  }
}

/* ---- ポップアップとナビの住み分け ----
 * ポップアップ(イベント詳細・ステータス詳細・アメ変換など)がナビの上に乗ってしまわないよう、
 * ナビが画面のどこをどれだけ占めているかをここで一元的に持たせる。
 * 各ページのポップアップは padding や bottom にこの値を足して、ナビの領域を避ける。
 * z-indexもナビ(100)より前面になる値をここで決める。 */
:root{
  /* 下部ナビの高さ + 下余白 + 少しゆとり */
  --app-nav-inset-bottom:88px;
  --app-nav-inset-left:0px;
  --app-popup-z:140;
}
/* PCモードではナビが左サイドバーになるので、避ける方向が下から左に変わる */
html[data-layout="pc"]{
  --app-nav-inset-bottom:0px;
  --app-nav-inset-left:116px;
}

/* ---- 共通下部ナビ ---- */
.app-bottom-nav{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2px;
  /* ---- すりガラス(リキッドグラス)風の見た目 ----
     背景を強めにぼかして彩度を上げ、後ろの色をうっすら透かす。
     ガラスの「厚み」は落ち影ではなく、内側のふち(1px)と上端のハイライトで表現する。
     浮かせるための落ち影は付けない(box-shadowはすべてinset)。
     アイコンは白系なので、背景は暗い側に寄せたグラデーションにして読みやすさを保つ。 */
  background:linear-gradient(180deg, rgba(52,62,112,.40), rgba(14,18,42,.52));
  /* ぼかしは弱め。強くかけると向こう側が「色」だけになってしまい、
     形が透けて見えるガラスらしさが出ない。
     透け具合はぼかしの弱さで出し、文字の読みやすさは色の濃さで確保している。 */
  backdrop-filter:blur(6px) saturate(180%);
  -webkit-backdrop-filter:blur(6px) saturate(180%);
  border-radius:22px;
  padding:8px 6px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 1px rgba(255,255,255,.07);
  max-width:560px;
  margin:0 auto;
  /* 上の光沢(::before)より前に中身を出すための基準 */
  isolation:isolate;
}
/* ガラス表面の光沢。左上から差し込む光を1枚重ねてガラスらしさを出す。
   中身の邪魔をしないよう、操作は透過しz-indexで下に敷く。 */
.app-bottom-nav::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(150deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,0) 60%);
  pointer-events:none;
  z-index:0;
}
.app-bottom-nav .bn-item{
  position:relative;
  z-index:1;
}
.app-bottom-nav .bn-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:6px 2px;
  border-radius:14px;
  border:none;
  background:transparent;
  font:inherit;
  text-decoration:none;
  /* 向こう側が透けるので、白のままだと明るい背景に重なったときに消えてしまう。
     不透明度を上げたうえで、下の text-shadow / drop-shadow で輪郭を作っている */
  color:rgba(255,255,255,.92);
  --pokeball-mask:rgba(14,18,42,.52);
  /* 選択の切り替わりが分かるよう、色・背景に加えて縮小のアニメーションも入れる */
  transition:color .18s ease, background .18s ease, transform .18s ease;
  min-width:0;
  cursor:pointer;
}
.app-bottom-nav .bn-icon{
  width:22px;
  height:22px;
  flex:none;
  /* 透けた背景に明るいものが来ても線が消えないよう、細い影で縁取る */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));
  /* 選択中はアイコンを少し持ち上げて大きくする */
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.app-bottom-nav .bn-label{
  font-size:.55rem;
  font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  transition:opacity .18s ease;
}
.app-bottom-nav .bn-item.is-active{
  color:var(--moon);
  background:rgba(246,203,90,.20);
  --pokeball-mask:rgba(52,62,112,.40);
  /* 選択中だけガラスのふちを一段明るくして、押し込まれた面のように見せる */
  box-shadow:inset 0 0 0 1px rgba(246,203,90,.28);
}
.app-bottom-nav .bn-item.is-active .bn-icon{
  transform:translateY(-2px) scale(1.12);
}
.app-bottom-nav .bn-item:not(.is-active) .bn-label{
  opacity:.85;
}
.app-bottom-nav .bn-item:active{
  background:rgba(255,255,255,.1);
  transform:scale(.94);
}
@media (prefers-reduced-motion: reduce){
  .app-bottom-nav .bn-item,
  .app-bottom-nav .bn-icon,
  .app-bottom-nav .bn-label{ transition:none; }
  .app-bottom-nav .bn-item:active{ transform:none; }
}

/* ---- 自動折りたたみ(設定「メニューバーを自動的に閉じる」) ----
 * 一定時間操作が無いと、バーが右端の小さなかたまりに縮む。
 * 残るのは今いるページのアイコン1つだけで、他の項目は幅を0にして畳み込む。
 * 幅の縮小を右端に寄せた状態で行うため、設定ボタンのあたりへ
 * 吸い込まれていくように見える。
 * 畳んだバーを押すと元に戻る(移動はしない。js/bottomNav.js側でクリックを止めている)。
 * 残す1つは js/bottomNav.js が .is-collapsed-keep を付けて指定する
 * (通常は今いるページ。該当が無いページでは設定ボタンを残す)。 */
.app-bottom-nav{
  /* 畳んだときのボタン1つぶんの大きさ。アイコン(22px)の周りに均等な余白を取り、
     指で押せる大きさ(44px角)を確保する。アイコン自体の大きさは畳んでも変えない */
  --bn-collapsed-item:44px;
  transition:max-width .34s cubic-bezier(.4,0,.2,1);
}
/* 折りたたみを使う間は、畳んでいるかどうかに関わらず右端に寄せておく。
   既定の margin:0 auto のままだと、幅が変わる間ずっと中央揃えのままになり、
   開くときに「中央から左右へ広がる」動きに見えてしまう。右に固定しておけば、
   畳んだ位置を起点にして左へ伸びる動きになる。 */
.app-bottom-nav.is-collapsible{
  margin-left:auto;
  margin-right:0;
}
.app-bottom-nav.is-collapsed{
  /* ボタン1つ + バーの左右の余白 */
  max-width:calc(var(--bn-collapsed-item) + 14px);
  cursor:pointer;
}
.app-bottom-nav.is-collapsed .bn-item{
  flex:none;
  width:var(--bn-collapsed-item);
  /* 上下の余白でボタンを正方形にする(22pxのアイコン + 11px×2) */
  padding:11px 0;
  transition:width .34s cubic-bezier(.4,0,.2,1), opacity .2s ease, padding .34s ease;
}
/* 残す1つ以外は幅を0にして消える。overflow:hiddenで中身がはみ出さないようにする */
.app-bottom-nav.is-collapsed .bn-item:not(.is-collapsed-keep){
  width:0;
  padding:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
}
/* ラベルは畳むと読めない幅になるので消す。高さも詰めてバー自体を薄くする */
.app-bottom-nav.is-collapsed .bn-label{
  opacity:0;
  height:0;
  overflow:hidden;
}
@media (prefers-reduced-motion: reduce){
  .app-bottom-nav,
  .app-bottom-nav.is-collapsed .bn-item{ transition:none; }
}

/* ---- 設定パネル(⚙️) ---- */
.settings-backdrop{
  position:fixed;
  inset:0;
  background:rgba(10,12,26,.28);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:159;
}
.settings-backdrop.open{
  opacity:1;
  pointer-events:auto;
}
.settings-panel{
  position:fixed;
  left:50%;
  bottom:calc(var(--app-nav-inset-bottom) + 10px);
  z-index:160;
  background:var(--paper);
  /* 移動先タブと同じ吹き出しカード。設定項目が多いぶんだけ中でスクロールする。 */
  border-radius:18px;
  padding:16px;
  width:min(calc(100% - 32px), 480px);
  max-height:calc(100vh - var(--app-nav-inset-bottom) - 100px);
  overflow-y:auto;
  box-shadow:0 14px 38px rgba(0,0,0,.28);
  transform:translate(-50%, 10px) scale(.98);
  opacity:0;
  pointer-events:none;
  transition:transform .18s ease, opacity .18s ease;
}
.settings-panel.open{
  transform:translate(-50%, 0) scale(1);
  opacity:1;
  pointer-events:auto;
}
/* 設定ボタンと同じ位置関係を示すための、枠なし・パネルと同色の三角形。
   パネル本体はoverflow-y:autoなので、三角形は外側の兄弟要素として置く。 */
.settings-modal-arrow{
  position:fixed;
  z-index:160;
  width:24px;
  height:12px;
  background:var(--paper);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, -4px);
  transition:opacity .2s ease, transform .2s ease;
}
.settings-modal-arrow.open{
  opacity:1;
  transform:translateX(-50%);
}
.settings-modal-arrow.is-side{
  width:12px;
  height:24px;
  clip-path:polygon(100% 0, 100% 100%, 0 50%);
  transform:translate(4px, -50%);
}
.settings-modal-arrow.is-side.open{
  transform:translateY(-50%);
}
/* PCモードも移動先タブと同様、設定ボタンの右側から開く。 */
.settings-panel.is-side{
  left:116px;
  top:var(--settings-panel-anchor-y, 50vh);
  bottom:auto;
  width:min(calc(100vw - 140px), 360px);
  max-height:calc(100vh - 120px);
  transform:translateY(calc(-50% + 10px)) scale(.98);
}
.settings-panel.is-side.open{
  transform:translateY(-50%) scale(1);
}
@media (prefers-reduced-motion: reduce){
  .settings-panel,
  .settings-modal-arrow{ transition:none; }
}
.settings-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:4px;
}
.settings-title{
  flex:none;
  white-space:nowrap;
  font-weight:700;
  font-size:.95rem;
  color:var(--navy);
}
.settings-title-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px 10px;
  flex:none;
  min-width:0;
}
.settings-language-control{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  color:var(--ink-soft);
  font-size:.76rem;
  font-weight:700;
  white-space:nowrap;
}
.settings-title-language{
  min-width:0;
  max-width:82px;
  padding:3px 6px;
  font-size:.75rem;
  overflow:hidden;
  text-overflow:ellipsis;
}
.settings-title-pokemon-language{
  max-width:96px;
}
.settings-close-btn{
  flex:none;
  width:28px;
  height:28px;
  border-radius:50%;
  border:none;
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:1.2rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.settings-close-btn:active{
  transform:scale(.9);
}
.settings-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 2px;
  border-top:1px solid var(--line);
}
.settings-row:first-of-type{
  border-top:none;
}
/* .settings-rowのdisplay:flexがhidden属性の既定display:noneを上書きしてしまうため、
   明示的に上書きし直す(「閉じるまでの時間」行など条件付き表示の行で使う) */
.settings-row[hidden]{ display:none; }
/* 直前の項目に付随する設定。区切り線を消して字下げし、従属関係を見せる */
.settings-row-sub{
  border-top:none;
  padding-top:0;
  padding-left:26px;
}
.settings-row-sub .settings-row-label{
  font-size:.78rem;
  color:var(--ink-soft);
}
.settings-weekly-flow-panel[hidden]{ display:none; }
.settings-weekly-flow-range{
  color:var(--ink-soft);
  font-size:.7rem;
  font-weight:500;
}
.settings-weekly-flow-time-row .settings-row-label{
  line-height:1.45;
}
.settings-weekly-flow-now-row{
  padding-top:6px;
  padding-bottom:10px;
}
.settings-weekly-flow-now{
  width:100%;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink-soft);
  font:inherit;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
}
.settings-weekly-flow-now:hover{
  background:var(--paper-dim);
  color:var(--ink);
}
/* 機能設定(テーマ〜自動的に閉じる)と、お知らせ・連絡先のグループを分ける区切り線。
   各行のborder-topより太い余白を空けて、グループの切れ目だと分かるようにする */
.settings-divider{
  height:1px;
  background:var(--line);
  margin:16px 0;
}
.settings-select{
  font-family:inherit;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
  padding:4px 8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
}
.settings-profile-select{
  flex:1;
  min-width:0;
}
.settings-profile-color{
  width:30px;
  height:28px;
  padding:2px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  cursor:pointer;
}
.settings-profile-panel[hidden]{ display:none; }
.settings-profile-panel{
  padding:8px 0 4px;
}
.settings-profile-controls{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.settings-profile-color-control{
  display:flex;
  align-items:center;
  gap:4px;
  flex:none;
  color:var(--ink-soft);
  font-size:.75rem;
  font-weight:700;
}
.settings-profile-color-label{
  line-height:1;
}
.settings-profile-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:32px;
  height:32px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
}
.settings-profile-icon-btn .settings-icon{
  width:16px;
  height:16px;
}
.settings-profile-btn{
  min-width:0;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink-soft);
  font:inherit;
  font-size:.72rem;
  cursor:pointer;
}
.settings-profile-delete-btn{
  flex:none;
}
.settings-profile-add-row{
  padding-top:8px;
}
.settings-profile-add-btn{
  width:100%;
  padding:7px 8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink-soft);
  font:inherit;
  font-size:.74rem;
  font-weight:700;
  cursor:pointer;
}
.settings-profile-btn:disabled{
  opacity:.45;
  cursor:default;
}
.settings-profile-name-input{
  display:block;
  width:100%;
  margin:8px 0 14px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
}
.settings-row-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  color:var(--ink);
}
.settings-icon{
  width:18px;
  height:18px;
  flex:none;
  color:var(--ink-soft);
}
.toggle-switch{
  position:relative;
  width:44px;
  height:26px;
  border-radius:999px;
  background:var(--line);
  border:none;
  cursor:pointer;
  padding:0;
  flex:none;
  transition:background .2s ease;
}
.toggle-switch .toggle-knob{
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--paper);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .2s ease;
}
.toggle-switch[aria-checked="true"]{
  background:var(--navy);
}
.toggle-switch[aria-checked="true"] .toggle-knob{
  transform:translateX(18px);
}

/* ---- 設定: 他ページへのリンク行(お手スピ10分きれるかな等) ----
   隠れた完全版限定機能への入口だと分かるよう、ボタンの縁取りそのものから
   紫の光が漏れ出すような演出を付ける(border+box-shadowで縁を光らせ、
   ::beforeで縁の外側だけをさらにぼかして滲ませる)。 */
.settings-row-link{
  position:relative;
  margin:6px 0;
  padding:12px 10px;
  border-radius:12px;
  border:1px solid rgba(168,85,247,.55);
  background:rgba(168,85,247,.06);
  box-shadow:0 0 7px 1px rgba(168,85,247,.55), inset 0 0 6px rgba(168,85,247,.2);
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  animation:settings-link-glow 2.6s ease-in-out infinite;
}
/* 縁のすぐ外側だけをぼかして、光が縁からにじみ出ているように見せる */
.settings-row-link::before{
  content:'';
  position:absolute;
  inset:-4px;
  z-index:-1;
  border-radius:16px;
  border:1px solid rgba(168,85,247,.5);
  filter:blur(4px);
  animation:settings-link-glow 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes settings-link-glow{
  0%, 100%{
    border-color:rgba(168,85,247,.4);
    box-shadow:0 0 5px 0px rgba(168,85,247,.4), inset 0 0 5px rgba(168,85,247,.15);
    opacity:.75;
  }
  50%{
    border-color:rgba(168,85,247,.85);
    box-shadow:0 0 12px 2px rgba(168,85,247,.8), inset 0 0 9px rgba(168,85,247,.3);
    opacity:1;
  }
}
@media (prefers-reduced-motion: reduce){
  .settings-row-link,
  .settings-row-link::before{ animation:none; }
}
.settings-row-arrow{
  flex:none;
  font-size:1.1rem;
  color:var(--ink-soft);
}

/* ---- 設定: データの保存/同期(ファイル操作とクラウド同期) ---- */
.settings-storage-sync-panel[hidden],
.settings-cloud-sync-panel[hidden]{ display:none; }
.settings-storage-sync-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  gap:10px;
  padding:10px 0 4px;
}
.settings-storage-file-column,
.settings-storage-cloud-column{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.settings-backup-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  min-height:42px;
  font:inherit;
  font-size:.74rem;
  line-height:1.25;
  font-weight:700;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
}
.settings-backup-btn .settings-icon{ width:16px; height:16px; }
.settings-backup-btn:active{ transform:scale(.97); }
.settings-storage-choice{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  width:100%;
  min-height:42px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.settings-storage-choice .settings-row-label{
  min-width:0;
  gap:5px;
  font-size:.74rem;
  font-weight:700;
}
.settings-storage-choice .settings-icon{ width:16px; height:16px; }
.settings-storage-choice:active{ transform:scale(.97); }
.settings-storage-choice[aria-expanded="true"] .settings-row-chevron{ transform:rotate(90deg); }
.settings-backup-hint{
  font-size:.72rem;
  color:var(--ink-soft);
  padding:0 2px;
  line-height:1.45;
}
.settings-backup-hint[hidden]{ display:none; }
.settings-backup-hint.is-error{ color:var(--danger); }
.settings-cloud-sync-panel{ padding-top:2px; }
.settings-cloud-sync-description{
  margin:0;
  padding:0 2px 4px;
  color:var(--ink-soft);
  font-size:.68rem;
  line-height:1.55;
}
.settings-cloud-sync-privacy{
  display:flex;
  align-items:center;
  gap:3px;
  margin:0;
  padding:0 2px 5px;
  color:var(--ink-soft);
  font-size:.66rem;
  line-height:1.45;
}
.settings-cloud-sync-info-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:19px;
  height:19px;
  margin:-2px 0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--accent);
  cursor:pointer;
}
.settings-cloud-sync-info-btn .settings-icon{ width:15px; height:15px; }
.settings-cloud-sync-info-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.settings-cloud-sync-info-btn:active{ transform:scale(.92); }
.settings-cloud-sync-privacy-details{
  margin:0 0 6px;
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:color-mix(in srgb, var(--paper) 88%, var(--accent) 12%);
  color:var(--ink-soft);
  font-size:.66rem;
  line-height:1.55;
}
.settings-cloud-sync-privacy-details[hidden]{ display:none; }
.settings-cloud-sync-privacy-details p{ margin:0; }
.settings-cloud-sync-privacy-details p + p{ margin-top:6px; }
.settings-cloud-sync-account{
  display:block;
  padding:0 2px 4px;
  font-size:.7rem;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.settings-cloud-sync-account-status{
  color:var(--ink);
  font-weight:700;
  line-height:1.4;
}
.settings-cloud-sync-account-status.is-active{ color:var(--success); }
.settings-cloud-sync-account-user{
  margin-top:2px;
  color:var(--ink-soft);
  font-size:.66rem;
  line-height:1.4;
}
.settings-cloud-sync-notify-row{
  padding-top:6px;
  padding-bottom:6px;
}
.settings-cloud-sync-notify-row[hidden]{ display:none; }
.settings-cloud-sync-actions{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:0 0 4px;
}
.settings-cloud-sync-actions[hidden]{ display:none; }
.settings-cloud-sync-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex:1;
  min-width:0;
  min-height:34px;
  padding:7px 6px;
  border:1px solid var(--navy);
  border-radius:10px;
  background:var(--navy);
  color:var(--paper);
  font:inherit;
  font-size:.68rem;
  line-height:1.25;
  font-weight:700;
  cursor:pointer;
  white-space:normal;
}
.settings-cloud-sync-btn[hidden]{ display:none; }
.settings-cloud-sync-btn .settings-icon{ width:15px; height:15px; color:inherit; }
.settings-cloud-sync-btn.is-secondary{
  border-color:var(--line);
  background:var(--paper);
  color:var(--ink-soft);
}
.settings-cloud-sync-btn:disabled{ opacity:.5; cursor:default; }
.settings-cloud-sync-btn:not(:disabled):active{ transform:scale(.97); }
.settings-cloud-sync-hint{
  padding:0 2px 4px;
  color:var(--ink-soft);
  font-size:.68rem;
  line-height:1.45;
}
.settings-cloud-sync-hint[hidden]{ display:none; }
.settings-cloud-sync-hint.is-error{ color:var(--danger); }
/* 設定パネル(z-index:151)の上から確認モーダルを開けるよう、共通.overlay-modalの
   既定z-index(140)より確実に高くする。settingsPanel自体は開いたままにしておき、
   その手前に確認モーダルを重ねる見せ方にするため、settingsPanelを閉じたりはしない。 */
#dataImportConfirmModal{ z-index:200; }
#profileNameModal{ z-index:200; }
#cloudRestorePromptModal{ z-index:220; }
.cloud-restore-prompt-description{
  margin:-6px 0 16px;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  line-height:1.6;
}

/* ---- 設定: お知らせ再表示など、通常の行と同じ見た目のボタン行 ---- */
.settings-row-action{
  width:100%;
  background:none;
  border:none;
  border-top:1px solid var(--line);
  font:inherit;
  color:inherit;
  cursor:pointer;
  text-align:left;
}
.settings-row-chevron{
  flex:none;
  font-size:1.1rem;
  color:var(--ink-soft);
  transition:transform .15s ease;
}
.settings-row-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
}
.settings-row-toggle{
  width:38px;
  height:23px;
  cursor:pointer;
}
.settings-row-toggle .toggle-knob{
  width:17px;
  height:17px;
}
.settings-row-toggle[aria-checked="true"] .toggle-knob{
  transform:translateX(15px);
}
.settings-row-action[aria-expanded="true"] .settings-row-chevron{ transform:rotate(90deg); }

/* ---- 設定: おしらせ一覧(お知らせボタンを押すと展開)。
   過去のおしらせから選んで見返せる(実際の表示はindex.htmlのモーダル)。 ---- */
.settings-announce-list{
  display:flex;
  flex-direction:column;
  padding-left:26px;
}
/* `.settings-announce-list` の display:flex がHTMLの hidden 属性を上書きしないよう、
   閉じている間は明示的に非表示にする。 */
.settings-announce-list[hidden]{ display:none; }
.settings-announce-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  width:100%;
  padding:8px 2px;
  border-top:1px solid var(--line);
  background:none;
  border-left:none;
  border-right:none;
  border-bottom:none;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

/* ---- 移動先選択モーダル ----
   ナビを押した位置から吹き出しが生えているように見えるよう、三角形はカードと
   同じ --paper 色だけで塗る(枠線・影なし)。実際のリンクはこの中のタブだけに置く。 */
.nav-destination-backdrop{
  position:fixed;
  inset:0;
  z-index:159;
  background:rgba(10,12,26,.28);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.nav-destination-backdrop.open{
  opacity:1;
  pointer-events:auto;
}
.nav-destination-modal{
  --nav-destination-anchor-x:50%;
  position:fixed;
  z-index:160;
  left:50%;
  bottom:calc(var(--app-nav-inset-bottom) + 10px);
  width:min(calc(100% - 32px), 480px);
  padding:16px;
  border-radius:18px;
  background:var(--paper);
  box-shadow:0 14px 38px rgba(0,0,0,.28);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, 10px) scale(.98);
  transition:opacity .18s ease, transform .18s ease;
}
.nav-destination-modal.open{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%, 0) scale(1);
}
.nav-destination-arrow{
  position:absolute;
  left:clamp(22px, calc(var(--nav-destination-anchor-x) - ((100vw - min(100vw - 32px, 480px)) / 2)), calc(100% - 22px));
  bottom:-12px;
  width:24px;
  height:12px;
  transform:translateX(-50%);
  background:var(--paper);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}
.nav-destination-title{
  margin:0 0 10px;
  color:var(--ink-soft);
  font-size:var(--fs-xs, .75rem);
  font-weight:700;
}
.nav-doubletap-setting{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  margin:0 0 10px;
  padding:2px 0 10px;
  border-bottom:1px solid var(--line);
}
.nav-doubletap-title{
  flex:none;
  color:var(--ink-soft);
  font-size:var(--fs-xs, .75rem);
  font-weight:700;
}
.nav-doubletap-current{
  min-width:0;
  flex:1;
  overflow:hidden;
  color:var(--ink);
  font-size:var(--fs-sm, .875rem);
  font-weight:700;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nav-doubletap-edit{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  flex:none;
  padding:0;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
}
.nav-doubletap-edit .bn-icon{
  width:17px;
  height:17px;
}
.nav-doubletap-edit:active{ transform:scale(.93); }
.nav-doubletap-setting.is-editing .nav-doubletap-current,
.nav-doubletap-setting.is-editing .nav-doubletap-edit{
  color:var(--navy);
}
.nav-doubletap-setting.is-editing .nav-doubletap-edit{
  border-color:var(--navy);
  background:var(--paper-dim);
}
.nav-destination-tabs{
  display:grid;
  /* 空き列も残すことで、料理の2タブだけが横に大きく伸びず、
     他ページと同じ幅基準のカードになる。 */
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:6px;
  max-height:calc(100vh - var(--app-nav-inset-bottom) - 100px);
  overflow-y:auto;
}
.nav-destination-tabs[hidden]{ display:none; }
.bn-destination-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:68px;
  padding:7px 3px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper);
  color:var(--ink-soft);
  font:inherit;
  text-align:center;
  cursor:pointer;
  --pokeball-mask:var(--paper);
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.bn-destination-ribbon{
  position:absolute;
  /* 中央のアイコン・名前を避け、右上だけを横切る短いリボンにする。 */
  top:6px;
  right:-15px;
  z-index:2;
  width:78px;
  padding:2px 0;
  background:var(--navy);
  color:var(--paper);
  font-size:.42rem;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.03em;
  text-align:center;
  white-space:nowrap;
  transform:rotate(34deg);
  pointer-events:none;
}
.bn-destination-item.is-double-tap-target{ overflow:hidden; }
.bn-destination-item.is-none{ color:var(--ink-soft); }
.bn-destination-item .bn-icon,
.bn-destination-item svg{
  width:22px;
  height:22px;
  flex:none;
}
/* VSミュウツーは、ナビゲーションモーダルと上部タブで同じ本人画像を使う。
   モーダルではサイズに合わせてVS表記も添える。 */
.tab-btn .nav-mewtwo-icon,
.bn-destination-item .nav-mewtwo-icon{
  display:inline-flex;
  align-items:center;
  gap:1px;
  color:currentColor;
}
.tab-btn .nav-mewtwo-icon{
  width:auto;
  height:15px;
}
.tab-btn .nav-mewtwo-icon img{
  display:block;
  width:15px;
  height:15px;
  object-fit:contain;
}
/* スマホの上部タブは、文字に対して小さく見えないようアイコンを一段大きくする。
   ページ側のインラインCSSや、動的に追加されるSVG/ミュウツー画像にも確実に効かせる。 */
@media (max-width:760px){
  #tabBar .tab-btn .tab-icon,
  #tabBar .tab-btn .tab-icon .ui-icon{
    width:18px;
    height:18px;
  }
  #tabBar .tab-btn .nav-mewtwo-icon{ height:18px; }
  #tabBar .tab-btn .nav-mewtwo-icon img{ width:18px; height:18px; }
  #viewSwitch .view-switch-btn .view-switch-icon{
    width:17px;
    height:17px;
  }
  #viewSwitch .view-switch-btn .view-switch-icon .ui-icon{
    width:17px;
    height:17px;
  }
}
.bn-destination-item .nav-mewtwo-icon::before{
  content:"VS";
  font-size:10px;
  font-weight:900;
  letter-spacing:-.08em;
  line-height:1;
}
.bn-destination-item .nav-mewtwo-icon img{
  display:block;
  width:22px;
  height:22px;
  object-fit:contain;
}
.bn-destination-label{
  display:block;
  width:100%;
  max-width:100%;
  overflow:hidden;
  font-size:var(--fs-2xs, .6875rem);
  font-weight:700;
  text-overflow:ellipsis;
  white-space:normal;
  line-height:1.25;
}
.bn-destination-item:hover,
.bn-destination-item:focus-visible{
  background:var(--paper-dim);
  border-color:var(--navy);
  color:var(--navy);
  --pokeball-mask:var(--paper-dim);
  outline:none;
}
.bn-destination-item:active{ transform:scale(.94); }
.bn-destination-item.is-full-row{
  grid-column:1 / -1;
  min-height:42px;
  flex-direction:row;
  justify-content:flex-start;
  padding:8px 10px;
}
.bn-destination-item.is-disabled{
  opacity:.55;
  cursor:default;
}
.bn-destination-item.is-disabled:active{ transform:none; }
.bn-destination-item.is-active{
  background:var(--selected-bg, var(--navy));
  border-color:var(--selected-border, var(--navy));
  color:var(--selected-ink, var(--paper));
  --pokeball-mask:var(--selected-bg, var(--navy));
}
/* ホームから追加している3つのログだけ、入口のテーマカラーを薄く添える。
   選択中は共通のアクティブ表示を優先し、通常時の背景・枠・アイコンで区別する。 */
.bn-destination-item[data-tab-key="sleep-log"]:not(.is-active){
  --nav-log-bg:rgba(69,136,251,.10);
  --nav-log-border:rgba(69,136,251,.38);
  --nav-log-ink:#356BC9;
  background:var(--nav-log-bg);
  border-color:var(--nav-log-border);
  color:var(--nav-log-ink);
}
.bn-destination-item[data-tab-key="cooking-log"]:not(.is-active){
  --nav-log-bg:rgba(241,206,97,.18);
  --nav-log-border:rgba(199,153,38,.42);
  --nav-log-ink:#7A4B2D;
  background:var(--nav-log-bg);
  border-color:var(--nav-log-border);
  color:var(--nav-log-ink);
}
.bn-destination-item[data-tab-key="skill-log"]:not(.is-active){
  --nav-log-bg:rgba(242,118,46,.10);
  --nav-log-border:rgba(242,118,46,.38);
  --nav-log-ink:#B35322;
  background:var(--nav-log-bg);
  border-color:var(--nav-log-border);
  color:var(--nav-log-ink);
}
.bn-destination-item[data-tab-key="dreamfacelist"]:not(.is-active),
.bn-destination-item[data-tab-key="dreamface"]:not(.is-active){
  background:color-mix(in srgb, var(--dreamface-theme) 12%, var(--paper-dim));
  border-color:color-mix(in srgb, var(--dreamface-theme) 48%, var(--line));
  color:var(--dreamface-theme-ink);
}
.nav-destination-tabs[data-nav-key="manage"] .bn-destination-item[data-tab-key="progress"]:not(.is-active),
.nav-destination-tabs[data-nav-key="field"] .bn-destination-item[data-tab-key="compare"]:not(.is-active){
  background:color-mix(in srgb, var(--success) 12%, var(--paper-dim));
  border-color:color-mix(in srgb, var(--success) 48%, var(--line));
  color:var(--success);
}
.bn-destination-item[data-tab-key="sleep-log"]:not(.is-active):hover,
.bn-destination-item[data-tab-key="sleep-log"]:not(.is-active):focus-visible,
.bn-destination-item[data-tab-key="cooking-log"]:not(.is-active):hover,
.bn-destination-item[data-tab-key="cooking-log"]:not(.is-active):focus-visible,
.bn-destination-item[data-tab-key="skill-log"]:not(.is-active):hover,
.bn-destination-item[data-tab-key="skill-log"]:not(.is-active):focus-visible{
  background:color-mix(in srgb, var(--nav-log-bg) 72%, var(--paper-dim));
  border-color:var(--nav-log-ink);
  color:var(--nav-log-ink);
  --pokeball-mask:var(--paper-dim);
}
.bn-destination-item[data-tab-key="dreamfacelist"]:not(.is-active):hover,
.bn-destination-item[data-tab-key="dreamfacelist"]:not(.is-active):focus-visible,
.bn-destination-item[data-tab-key="dreamface"]:not(.is-active):hover,
.bn-destination-item[data-tab-key="dreamface"]:not(.is-active):focus-visible{
  background:color-mix(in srgb, var(--dreamface-theme) 18%, var(--paper-dim));
  border-color:var(--dreamface-theme-ink);
  color:var(--dreamface-theme-ink);
  --pokeball-mask:var(--paper-dim);
}
.nav-destination-tabs[data-nav-key="manage"] .bn-destination-item[data-tab-key="progress"]:not(.is-active):hover,
.nav-destination-tabs[data-nav-key="manage"] .bn-destination-item[data-tab-key="progress"]:not(.is-active):focus-visible,
.nav-destination-tabs[data-nav-key="field"] .bn-destination-item[data-tab-key="compare"]:not(.is-active):hover,
.nav-destination-tabs[data-nav-key="field"] .bn-destination-item[data-tab-key="compare"]:not(.is-active):focus-visible{
  background:color-mix(in srgb, var(--success) 18%, var(--paper-dim));
  border-color:var(--success);
  color:var(--success);
  --pokeball-mask:var(--paper-dim);
}
/* PCモードでは左サイドバーの各ボタンを根元にして、右側へ吹き出しを出す。 */
.nav-destination-modal.is-side{
  --nav-destination-anchor-y:50vh;
  left:116px;
  bottom:auto;
  top:var(--nav-destination-anchor-y);
  width:180px;
  transform:translateY(calc(-50% + 10px)) scale(.98);
}
.nav-destination-modal.is-side.open{
  transform:translateY(-50%) scale(1);
}
.nav-destination-modal.is-side .nav-destination-arrow{
  left:-12px;
  top:clamp(22px, var(--nav-destination-arrow-y, 50%), calc(100% - 22px));
  bottom:auto;
  width:12px;
  height:24px;
  transform:translateY(-50%);
  clip-path:polygon(100% 0, 100% 100%, 0 50%);
}
.nav-destination-modal.is-side .nav-destination-tabs{
  grid-template-columns:1fr;
  max-height:calc(100vh - 120px);
}
.nav-destination-modal.is-side .bn-destination-item{
  min-height:42px;
  flex-direction:row;
  justify-content:flex-start;
  padding:8px 10px;
}
@media (prefers-reduced-motion: reduce){
  .nav-destination-backdrop,
  .nav-destination-modal,
  .bn-destination-item{ transition:none; }
}
.settings-announce-date{
  font-size:.68rem;
  color:var(--ink-soft);
}
.settings-announce-title{
  font-size:.8rem;
  color:var(--ink);
}

/* ---- 設定: 連絡・交流用Discordサーバーへの目立つ入口 ---- */
.settings-discord-link{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:52px;
  margin:6px 0 4px;
  padding:12px 14px;
  border:1px solid #5865f2;
  border-radius:12px;
  background:#5865f2;
  color:#fff;
  font-size:.9rem;
  font-weight:800;
  line-height:1.3;
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.settings-discord-link:hover,
.settings-discord-link:focus-visible{
  border-color:#4752c4;
  background:#4752c4;
  outline:none;
}
.settings-discord-link:focus-visible{
  box-shadow:0 0 0 3px rgba(88,101,242,.3);
}
.settings-discord-link:active{ transform:scale(.98); }
.settings-discord-link-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.settings-discord-link-icon .settings-icon{
  width:23px;
  height:23px;
  color:inherit;
}
.settings-discord-link-label{
  min-width:0;
  flex:1;
}
.settings-discord-link .settings-row-arrow{
  color:inherit;
  font-size:1.35rem;
  line-height:1;
}

/* ---- 設定: 連絡先(X・mondへのリンク) ---- */
.settings-contact-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:1;
  min-width:0;
  flex-wrap:wrap;
  gap:10px;
}
.settings-contact-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  flex:none;
  border-radius:50%;
  background:var(--paper-dim);
  color:var(--ink);
  transition:background .15s ease, transform .15s ease;
}
.settings-contact-link:active{ transform:scale(.92); }
.settings-contact-link .settings-icon{
  width:18px;
  height:18px;
  color:inherit;
}
/* mondへの2リンク(要望・支援)。アイコンではなく下線でリンクだと分かるようにする */
.settings-contact-text-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:4px;
  min-width:0;
  color:var(--ink-soft);
  font-size:.72rem;
  line-height:1.35;
}
.settings-text-link{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ---- 設定: テーマ(ヘッダーに出すフィールド選び) ---- */
.theme-field-row{
  padding-top:2px;
}
.theme-field-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
}
.theme-field-btn{
  width:42px;
  height:42px;
  flex:none;
  border-radius:50%;
  border:2px solid transparent;
  background-color:var(--paper-dim);
  background-size:cover;
  background-position:center;
  cursor:pointer;
  padding:0;
  transition:border-color .15s ease, transform .15s ease;
}
.theme-field-btn:active{ transform:scale(.94); }
.theme-field-btn.active{
  border-color:var(--navy);
  box-shadow:0 0 0 2px var(--paper);
}
.theme-field-btn.is-none{
  border:1px dashed var(--line);
  color:var(--ink-soft);
  font-size:var(--fs-2xs, .6875rem);
  font-family:inherit;
}

/* ---- ヘッダーのフィールドテーマ ----
   設定で選んだフィールドの画像を、各ページのヘッダー(header / .home-hero / .hero)に
   重ねて表示する。画像自体はjs/settingsPanel.jsが--header-field-imgにセットし、
   ここでは「どう見せるか」だけを1箇所で決める。左側(タイトル文字の上)は
   ブランド色のグラデーションで覆い、右側にフィールドの絵が見えるようにする。 */
html[data-header-field] header,
html[data-header-field] .home-hero,
html[data-header-field] .hero{
  background-image:
    linear-gradient(100deg, var(--header-bg) 0%, var(--header-bg) 28%, rgba(27,34,69,.45) 60%, rgba(27,34,69,.1) 100%),
    var(--header-field-img, none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ---- PCモード: 下部ナビを左サイドバーに切り替える ----
   コンテンツ側の幅調整(--content-max)やmain/filter-barの余白は各ページ側の
   責務のため、ここではナビ自体の見た目だけを扱う。 */
html[data-layout="pc"] .app-bottom-nav{
  left:16px;
  right:auto;
  top:16px;
  bottom:16px;
  width:84px;
  max-width:none;
  margin:0;
  flex-direction:column;
  justify-content:flex-start;
  gap:10px;
  padding:16px 6px;
  border-radius:20px;
}
html[data-layout="pc"] .app-bottom-nav .bn-item{
  flex:none;
  width:100%;
}

/* ---- 共通アイコン (data/icons.js) ----
   Tabler / Lucide から取り込んだSVGアイコンの下地。
   色は currentColor なので置いた場所の文字色を継ぐ。大きさは
   uiIcon() の size 引数か、下の width/height をCSSで上書きして変える。 */
.ui-icon{
  display:inline-block;
  vertical-align:-.15em;
  flex:none;
}